/* ---------- tokens (light theme) ---------- */
:root{
  /* Surface & text */
  --bg:#f7f9fe;
  --bg-grad-start:#f9fbff;
  --bg-grad-end:#eef2f9;
  --panel:#ffffff;
  --panel-2:#fbfcff;
  --line:#e6ecf4;
  --line-sub:#edf1f7;
  --text:#0b1220;
  --muted:#6a7a92;

  /* Accents */
  --good:#16a34a;
  --bad:#e11d48;
  --brand:#5b8cff;
  --brand-2:#9a8cff;

  /* Radii & shadows */
  --r-xl:16px; --r-lg:14px; --r-md:12px; --r-sm:10px;
  --shadow-1:0 10px 30px rgba(20,41,74,.10);
  --shadow-2:0 8px 18px rgba(20,41,74,.08), inset 0 1px 0 rgba(255,255,255,1);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial; color:var(--text);
  background:linear-gradient(180deg,var(--bg-grad-start),var(--bg-grad-end));
}

/* ---------- header ---------- */
.topbar{
  position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;
  padding:12px 16px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.6));
  backdrop-filter:blur(8px)
}
.brand{display:flex;gap:12px;align-items:center}
.logo{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;text-decoration:none;font-weight:800;color:#0b1220;background:linear-gradient(135deg,var(--brand),var(--brand-2));box-shadow:var(--shadow-1)}
.brand-text{display:flex;flex-direction:column;line-height:1}
.muted{color:var(--muted)}
.actions{display:flex;gap:10px}
.btn{padding:10px 14px;border-radius:12px;text-decoration:none;font-weight:700;border:1px solid var(--line);color:var(--text); background:#fff; box-shadow:var(--shadow-1)}
.btn.primary{background:linear-gradient(135deg,#6ea2ff,#a08bff);color:#fff;border:none}
.btn.secondary{background:#f5f7ff}
.btn.ghost{background:transparent}
.btn:hover{transform:translateY(-1px)}
.logo-img{height:40px;vertical-align:middle;margin-right:8px}
.model-icon{width:32px;height:32px;border-radius:8px;object-fit:cover;margin-right:10px}
.model-card{display:flex;align-items:center;gap:10px}

/* links inherit color, no purple visited */
a{color:inherit;text-decoration:none}
a:hover,a:focus{text-decoration:none;color:inherit}
a:visited{color:inherit}

/* ---------- ticker ---------- */
.ticker{display:flex;gap:12px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line);overflow-x:auto;background:transparent}
.tick{display:flex;gap:6px;background:#f3f6ff;border:1px solid var(--line);padding:8px 10px;border-radius:999px;white-space:nowrap;font-weight:700;box-shadow:var(--shadow-1)}
.tick:hover{box-shadow:0 0 0 1px #cfe0ff}

/* ---------- HL bar ---------- */
.hlbar{display:flex;gap:10px;align-items:center;padding:8px 16px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#ffffff,#f5f8ff)}
.hl{display:flex;gap:8px;align-items:center}
.badge{padding:3px 8px;border-radius:999px;font-size:12px;font-weight:700}
.badge.up{background:rgba(22,163,74,.1);color:var(--good);border:1px solid rgba(22,163,74,.25)}
.badge.down{background:rgba(225,29,72,.1);color:var(--bad);border:1px solid rgba(225,29,72,.25)}
.sep{opacity:.35}

/* ---------- layout ---------- */
.container{display:grid;gap:18px;grid-template-columns:1.7fr 1fr;padding:18px}
.panel{background:linear-gradient(180deg,var(--panel),#fcfdff);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-1);overflow:hidden}
.panel-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#ffffff,#f7f9ff)}
.title{margin:0;font-size:22px;letter-spacing:.3px}

.controls{display:flex;gap:10px}
.toggle{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:#fff}
.chip{background:transparent;border:none;color:var(--text);padding:8px 12px;font-weight:700;cursor:pointer}
.chip.small{padding:6px 10px}
.chip.active{box-shadow:inset 0 0 0 2px var(--brand);color:#1b3a8a;background:#f2f6ff}

.chart-wrap{position:relative;padding:12px 18px 12px 12px}
#arenaChart{width:100%}
.end-labels{position:absolute;inset:0;pointer-events:none}
.end-pill{position:absolute;transform:translateY(-50%);padding:6px 10px;border-radius:999px;font-size:12px;background:#ffffff;border:1px solid var(--line);white-space:nowrap;box-shadow:var(--shadow-2)}
.end-pill.up{color:var(--good)} .end-pill.down{color:var(--bad)}

.legend{display:flex;flex-wrap:wrap;gap:10px;padding:12px 14px;border-top:1px dashed var(--line)}
.pill{padding:6px 10px;border-radius:999px;background:#f4f7ff;border:1px solid var(--line);font-size:12px}

/* ---------- tabs / side ---------- */
.side .tabs{display:flex}
.tab{flex:1;padding:10px;border:none;background:linear-gradient(180deg,var(--panel-2),#f6f9ff);color:var(--muted);font-weight:700;border-right:1px solid var(--line)}
.tab:last-child{border-right:0}
.tab.active{color:var(--text);border-bottom:2px solid var(--brand);background:var(--panel)}
.tab-body{padding:14px;min-height:260px}
.hidden{display:none}

/* ---------- model cards ---------- */
.models-grid{display:grid;grid-template-columns:1fr;gap:12px}
.model-card{
  display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;
  padding:12px 14px;border-radius:var(--r-lg);
  background:linear-gradient(180deg,#ffffff,#f6f9ff);
  border:1px solid var(--line);box-shadow:var(--shadow-1);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.model-card:hover{transform:translateY(-2px);border-color:#d7e3f8;box-shadow:0 16px 40px rgba(20,41,74,.12)}
.model-ava{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  font-weight:800;background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#0b1220;box-shadow:var(--shadow-1)
}
.model-meta strong{font-size:14px}
.model-sub{font-size:12px;color:var(--muted)}
.model-right{text-align:right}
.badge-soft{display:inline-block;padding:4px 8px;border-radius:999px;font-size:12px;font-weight:700;border:1px solid #d9e4fb;background:#f3f7ff}
.badge-soft.up{color:var(--good);border-color:rgba(22,163,74,.25);background:rgba(22,163,74,.06)}
.badge-soft.down{color:var(--bad);border-color:rgba(225,29,72,.25);background:rgba(225,29,72,.06)}
.model-spark{width:96px;height:28px;opacity:.9}

/* ---------- lists ---------- */
.item{display:grid;grid-template-columns:1fr auto;gap:8px;padding:12px 10px;border-bottom:1px dashed var(--line);transition:background .15s ease,border-color .15s ease}
.item:hover{background:rgba(0,0,0,.02);border-color:#dae4f6}
.tag{padding:3px 8px;border-radius:999px;font-size:12px;margin-left:6px;background:#f2f6ff;border:1px solid #dfe9ff;color:#304565}
.pnl{font-weight:800}
.pnl.up{color:var(--good)} .pnl.down{color:var(--bad)}

/* chart pills and overlay (dup for safety) */
.end-labels{position:absolute;inset:0;pointer-events:none}
.end-pill{
  position:absolute; transform:translateY(-50%);
  background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:6px 10px; font-weight:700; font-size:12px; white-space:nowrap;
  box-shadow:var(--shadow-2)
}
.end-pill.up{color:var(--good)}
.end-pill.down{color:var(--bad)}

/* ---------- model page grid ---------- */
.model-page{grid-template-columns:1.1fr 1fr}
.span-2{grid-column:1 / -1}
.model-stats{padding:14px;font-family:Inter,system-ui}
.model-stats .line{display:flex;justify-content:space-between;border-bottom:1px dashed var(--line-sub);padding:6px 0}
.model-stats .line:last-child{border-bottom:0}
.mini-chart-wrap{padding:12px 16px}
#perfChart{width:100%}

/* ---------- footer ---------- */
.footer{padding:16px 18px;border-top:1px solid var(--line);color:var(--muted);display:flex;justify-content:space-between;background:linear-gradient(180deg,#ffffff,#f7f9ff)}

/* ---------- responsive ---------- */
@media (max-width: 980px){
  .container{grid-template-columns:1fr}
  .model-page{grid-template-columns:1fr}
}