:root{
  --bg:#eef1f5; --chrome:#0f1720; --chrome-2:#1b2634;
  --card:#fff; --ink:#11181f; --ink-2:#5d6b7a; --line:#dde3ea;
  --accent:#3fb5e8; --warn:#c8721a; --bad:#c0392b; --ok:#2f9e5e;
  --plot:#fff; --grid:#e6ebf0; --past:#f0f2f5;
  --shadow:0 1px 2px rgba(16,26,38,.08),0 6px 18px rgba(16,26,38,.06);
  --safe-l:env(safe-area-inset-left,0px); --safe-r:env(safe-area-inset-right,0px);
}
@media (prefers-color-scheme:dark){
  :root{--bg:#0b1017; --card:#151d27; --ink:#e8eef5; --ink-2:#93a2b3; --line:#26313d;
        --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 18px rgba(0,0,0,.3);}
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--ink);
  font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-text-size-adjust:100%;
}

/* ---------- top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:20; background:var(--chrome); color:#fff;
  padding:10px calc(14px + var(--safe-r)) 10px calc(14px + var(--safe-l));
  box-shadow:0 2px 10px rgba(0,0,0,.25);
}
.topbar-row{display:flex; align-items:center; gap:10px; justify-content:space-between}
.topbar-row+.topbar-row{margin-top:9px}
.brand{display:flex; align-items:center; gap:10px; min-width:0}
.brand-mark{
  width:26px; height:26px; border-radius:7px; flex:0 0 auto;
  background:linear-gradient(150deg,#7ef58a,#7ef0e0 45%,#3fb5e8);
}
.brand-text{display:flex; flex-direction:column; min-width:0}
.brand-text strong{font-size:15px; letter-spacing:.14em}
.brand-text small{font-size:11px; color:#9fb0c2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.refresh{
  display:inline-flex; align-items:center; gap:7px; flex:0 0 auto;
  background:#2a3a4d; color:#fff; border:1px solid #3b5069; border-radius:9px;
  padding:8px 13px; font:inherit; font-weight:600; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.refresh:hover{background:#35485e}
.refresh:active{transform:translateY(1px)}
.refresh[disabled]{opacity:.6; cursor:default}
.refresh-icon{
  width:14px; height:14px; flex:0 0 auto;
  border:2px solid currentColor; border-right-color:transparent; border-radius:50%;
}
.refresh.busy .refresh-icon{animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.controls{flex-wrap:wrap; gap:8px}
.segmented{display:inline-flex; background:#22303f; border:1px solid #33465c; border-radius:9px; padding:2px; gap:2px}
.segmented button{
  background:transparent; color:#a9bccd; border:0; border-radius:7px;
  padding:6px 11px; font:inherit; font-weight:600; font-size:13px; cursor:pointer;
  -webkit-tap-highlight-color:transparent; white-space:nowrap;
}
.segmented button[aria-pressed="true"]{background:var(--accent); color:#06212e}
.status{font-size:11.5px; color:#9fb0c2; min-height:15px}
.status .err{color:#ff9d8a}

/* ---------- panels ---------- */
main{padding:12px calc(12px + var(--safe-r)) 4px calc(12px + var(--safe-l)); display:grid; gap:12px}
.panel{background:var(--card); border-radius:12px; box-shadow:var(--shadow); overflow:hidden}
.phead{display:flex; align-items:center; gap:11px; padding:10px 12px; border-bottom:1px solid var(--line)}
.code{
  font-weight:800; font-size:15px; letter-spacing:.04em; color:#06212e;
  background:linear-gradient(150deg,#7ef0e0,#3fb5e8); border-radius:7px;
  padding:5px 9px; flex:0 0 auto; min-width:44px; text-align:center;
}
.pname{display:flex; flex-direction:column; min-width:0; flex:1 1 auto}
.pname b{font-size:13.5px; font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pname span{font-size:11px; color:var(--ink-2); font-variant-numeric:tabular-nums}
.pnow{display:flex; align-items:center; gap:9px; flex:0 0 auto}
.pnow .big{font-size:20px; font-weight:750; font-variant-numeric:tabular-nums; line-height:1}
.pnow .sub{font-size:11px; color:var(--ink-2); text-align:right; line-height:1.3}
.pnow svg{display:block; flex:0 0 auto}

.chartwrap{display:flex; align-items:stretch; background:var(--plot)}
.yaxis{flex:0 0 auto; background:var(--plot); border-right:1px solid var(--grid)}
.scroller{
  flex:1 1 auto; min-width:0; max-width:100%;
  /* `scroll` not `auto`: the bar stays visible so it is obvious the chart pans */
  overflow-x:scroll; overflow-y:hidden;
  -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
  scrollbar-width:thin; scrollbar-color:#b9c3ce transparent;
  cursor:grab;
}
.scroller.dragging{cursor:grabbing; user-select:none}
.scroller:focus{outline:none}
.scroller:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.scroller::-webkit-scrollbar{height:10px}
.scroller::-webkit-scrollbar-thumb{background:#b9c3ce; border-radius:5px; border:2px solid #fff}
.scroller::-webkit-scrollbar-thumb:hover{background:#93a2b3}
.scroller::-webkit-scrollbar-track{background:#f4f6f9}
.scroller svg{display:block}
.pmsg{padding:16px 14px; font-size:12.5px; color:var(--ink-2)}
.pmsg.error{color:var(--bad)}
.skel{height:188px; background:
  linear-gradient(90deg,transparent,rgba(127,160,190,.13),transparent) 0 0/240px 100% no-repeat,var(--plot);
  animation:sweep 1.2s ease-in-out infinite}
@keyframes sweep{to{background-position:130% 0}}

.foot{padding:10px calc(14px + var(--safe-r)) 22px calc(14px + var(--safe-l)); color:var(--ink-2); font-size:11.5px}
.foot p{margin:0}
.foot a{color:var(--accent)}
.foot code{font-size:11px}

@media (min-width:900px){
  main{grid-template-columns:1fr; max-width:1400px; margin:0 auto}
  .brand-text small{font-size:12px}
}