:root{
  --bg:#070A12;
  --panel:#0B1020;
  --panel2:#0E1630;
  --text:#EAF0FF;
  --muted:#A9B4D0;
  --line:rgba(140,170,255,.18);
  --glow:rgba(120,190,255,.22);
  --good:#86F7C6;
  --bad:#FF6B8B;
  --accent:#7AB7FF;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: radial-gradient(900px 600px at 25% 10%, rgba(122,183,255,.16), transparent 60%),
              radial-gradient(900px 600px at 80% 30%, rgba(134,247,198,.10), transparent 55%),
              var(--bg);
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

#app{max-width:1100px; margin:0 auto; padding:16px}

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:14px 14px;
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(14,22,48,.92), rgba(11,16,32,.86));
  border-radius:18px;
  box-shadow: 0 0 0 1px rgba(122,183,255,.06), 0 20px 60px rgba(0,0,0,.35);
}

.brand{display:flex; align-items:center; gap:12px}
.logo{
  width:42px; height:42px; border-radius:14px;
  display:grid; place-items:center;
  background: linear-gradient(180deg, rgba(122,183,255,.30), rgba(122,183,255,.08));
  border:1px solid rgba(122,183,255,.22);
  box-shadow: 0 0 30px var(--glow);
  font-weight:800;
}
.title{font-size:18px; font-weight:800; letter-spacing:.2px}
.subtitle{font-size:12px; color:var(--muted)}

.actions{display:flex; gap:10px; align-items:center}

.grid{
  margin-top:14px;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:14px;
}

.card{
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(14,22,48,.85), rgba(11,16,32,.85));
  border-radius:18px;
  padding:14px;
  box-shadow: 0 0 0 1px rgba(122,183,255,.05);
}

.card-title{
  font-weight:800;
  color:var(--text);
  letter-spacing:.2px;
  margin-bottom:12px;
}

.big{padding:10px 0 6px}
.big-label{color:var(--muted); font-size:12px}
.big-value{font-size:34px; font-weight:900; margin:6px 0}
.big-meta{color:var(--muted); font-size:12px}

.row{display:flex; align-items:center; gap:12px; margin-top:10px}
.hint{color:var(--muted); font-size:12px}

.btn{
  border:1px solid var(--line);
  background: rgba(122,183,255,.10);
  color:var(--text);
  padding:10px 12px;
  border-radius:14px;
  cursor:pointer;
  transition: transform .06s ease, box-shadow .12s ease, background .12s ease;
  user-select:none;
}
.btn:hover{box-shadow: 0 0 28px rgba(122,183,255,.18)}
.btn:active{transform: translateY(1px)}
.btn.primary{
  background: linear-gradient(180deg, rgba(122,183,255,.26), rgba(122,183,255,.10));
  border-color: rgba(122,183,255,.28);
}
.btn.ghost{background: rgba(255,255,255,.03)}
.btn.danger{
  background: rgba(255,107,139,.10);
  border-color: rgba(255,107,139,.22);
}

.list{display:flex; flex-direction:column; gap:10px}
.item{
  display:flex; justify-content:space-between; gap:10px;
  padding:10px 10px;
  border-radius:16px;
  border:1px solid rgba(122,183,255,.15);
  background: rgba(10,14,28,.6);
}
.item strong{display:block}
.item small{display:block; color:var(--muted); margin-top:2px}
.price{color:var(--muted); font-size:12px}
.buy{white-space:nowrap}

.wide{grid-column:1 / -1}
.systems{display:grid; grid-template-columns: repeat(3, 1fr); gap:10px}
.sys{
  padding:12px; border-radius:16px;
  border:1px solid rgba(134,247,198,.14);
  background: rgba(8,12,22,.6);
}
.sys-name{font-weight:800}
.sys-desc{color:var(--muted); font-size:12px; margin-top:4px}

.footer{
  margin-top:12px;
  color:var(--muted);
  display:flex; gap:10px; align-items:center;
  font-size:12px;
}
.status{
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(122,183,255,.16);
  background: rgba(122,183,255,.08);
  color: var(--text);
}

/* Mobile: minimal / compact */
@media (max-width: 820px){
  #app{padding:12px}
  .grid{grid-template-columns: 1fr}
  .systems{grid-template-columns: 1fr}
  .big-value{font-size:30px}
}
.mobile-bar{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  padding: 10px 12px;
  display: none;
  gap: 10px;
  background: rgba(7,10,18,.82);
  border-top: 1px solid rgba(122,183,255,.18);
  backdrop-filter: blur(10px);
  z-index: 50;
}

.mobile-bar .btn{
  flex: 1;
  padding: 12px 10px;
  border-radius: 16px;
}

@media (max-width: 820px){
  .mobile-bar{display:flex;}
  body{padding-bottom: 80px;} /* pour pas cacher le contenu */
}


/* --- Soft Ad Gate --- */
.adActions{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:10px;
  flex-wrap:wrap;
}
.cooldowns{
  display:flex;
  gap:10px;
  flex:1;
  min-width:220px;
}
.cooldownText{
  font-size:12px;
  opacity:.8;
}

.adGate{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.55);
  z-index:9999;
  padding:16px;
}
.adGate.hidden{ display:none; }
.adGateCard{
  width:min(520px, 100%);
  background:rgba(12,18,34,.96);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
  padding:16px;
}
.adGateHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
.adGateTitle{
  font-weight:700;
  font-size:18px;
}
.adGateClose{
  background:transparent;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  padding:6px 10px;
  color:inherit;
  cursor:pointer;
}
.adGateText{
  opacity:.9;
  line-height:1.3;
  margin:10px 0;
}
.adGateTimer{
  display:flex;
  gap:8px;
  align-items:baseline;
  font-size:14px;
  opacity:.9;
  margin-bottom:12px;
}
.adGateBtns{
  display:flex;
  gap:10px;
  justify-content:flex-end;
}
.adGateFoot{
  margin-top:10px;
  font-size:12px;
  opacity:.75;
}