:root{
  --bg:#0f1320; --panel:#141a2a; --card:#1a2135; --ink:#e8ecff; --muted:#98a2c9;
  --accent:#5eead4; --accent-ink:#06281f; --brand:#7aa2ff; --ring:rgba(122,162,255,.35);
  --radius:16px; --gap:12px;
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji";
  background:radial-gradient(1200px 600px at 20% -10%, #1b2440 0%, transparent 60%),
             radial-gradient(1000px 800px at 110% 10%, #19233b 0%, transparent 50%), var(--bg);
  color:var(--ink); line-height:1.45;}
.app-header,.app-foot{max-width:1100px;margin:auto;padding:16px}
.app-header{display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:700;letter-spacing:.3px;color:var(--brand)}
.score{display:flex;align-items:center;gap:.6rem;background:linear-gradient(180deg,#182340,#121a31);
  border:1px solid #25325c;padding:.5rem .8rem;border-radius:999px;box-shadow:0 0 0 3px var(--ring) inset}
.score-label{color:var(--muted);font-size:.9rem} .score-value{font-variant-numeric:tabular-nums;font-weight:700}

.grid{max-width:1100px;margin:auto;padding:16px;display:grid;gap:var(--gap);grid-template-columns:1fr}
.panel{background:var(--panel);border:1px solid #27304e;border-radius:var(--radius);padding:14px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.panel-title{margin:0 0 10px 0;font-size:1rem;color:#d6ddff;letter-spacing:.2px}
.cards{display:grid;gap:var(--gap);grid-template-columns:1fr 1fr}

.card{background:var(--card);border:1px solid #2a355a;border-radius:12px;padding:12px;display:flex;flex-direction:column;min-height:110px}
.card.placeholder{border-style:dashed;opacity:.5}
.card-accent{outline:2px solid var(--accent);outline-offset:0;background:linear-gradient(180deg,rgba(94,234,212,.12),transparent 50%),var(--card)}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.card-title{margin:0;font-size:1rem}
.badge{font-size:.8rem;padding:.1rem .4rem;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-weight:700}
.card-body{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.metric{background:rgba(255,255,255,.03);border:1px solid #2a355a;border-radius:10px;padding:8px;display:flex;align-items:center;justify-content:space-between}
.metric-label{color:var(--muted);font-size:.85rem}
.metric-value{font-variant-numeric:tabular-nums;font-weight:700}
.card-foot{margin-top:auto}
.actions-2{display:grid;grid-template-columns:1fr 1fr;gap:8px}

.btn{width:100%;padding:.6rem .8rem;border-radius:10px;border:1px solid #2b3a66;background:linear-gradient(180deg,#1b2542,#111a31);color:#bfc8ee;cursor:pointer}
.btn:disabled{opacity:.6;cursor:not-allowed}
.btn.ghost{background:transparent}

input[type="range"]{width:100%}

.app-foot{color:var(--muted);text-align:center;padding-bottom:28px;opacity:.9}

/* Responsive */
@media (min-width:760px){
  .grid{grid-template-columns:1fr 1fr;grid-auto-rows:minmax(0,auto)}
  .panel:nth-of-type(1){grid-column:1}
  .panel:nth-of-type(2){grid-column:2}
  .panel:nth-of-type(3){grid-column:1}
  .panel:nth-of-type(4){grid-column:2}
}
@media (max-width:380px){.cards{grid-template-columns:1fr}}