:root {
  --bg:#14161a; --panel:#1d2026; --line:#2c3037; --text:#d7dae0;
  --dim:#949aa5; --green:#4cc38a; --red:#e5534b; --amber:#d4a72c; --blue:#4c8ac3;
}
* { box-sizing:border-box; }
html { background:var(--bg); overscroll-behavior-y:contain; }
body {
  margin:0; min-height:100vh; background:var(--bg); color:var(--text);
  overscroll-behavior-y:contain;
  font:15px/1.5 system-ui,"Segoe UI",sans-serif;
  padding:calc(16px + env(safe-area-inset-top)) max(12px,env(safe-area-inset-right))
    calc(20px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
}
header { position:sticky; top:env(safe-area-inset-top,0px); z-index:10; display:flex; align-items:center;
  gap:8px; flex-wrap:wrap; max-width:1100px; margin:0 auto; padding-bottom:14px; background:var(--bg); }
header::before { position:absolute; right:0; bottom:100%; left:0; height:env(safe-area-inset-top,0px);
  background:var(--bg); content:""; pointer-events:none; }
.header-title-row { display:flex; align-items:center; flex:0 0 100%; gap:8px; min-width:0; }
.header-title-row h1 { min-width:0; margin-right:0; }
.header-title-row #forget-header { flex:0 0 auto; margin-left:auto; }
.small-action { padding:3px 8px; color:var(--dim); background:transparent; border:1px solid var(--line); border-radius:6px; font:inherit; font-size:13px; cursor:pointer; }
.small-action.connect-action { color:var(--green); border-color:var(--green); }
.small-action:hover { color:var(--text); background:var(--panel); }
.small-action:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
h1 { margin:0 6px 0 0; font-size:20px; font-weight:650; }
h2 { margin:0 0 10px; color:var(--dim); font-size:14px; font-weight:650; letter-spacing:.06em; text-transform:uppercase; }
section { max-width:1100px; margin:0 auto 12px; padding:14px; overflow:hidden; background:var(--panel); border:1px solid var(--line); border-radius:9px; }
.pill { display:inline-block; padding:2px 9px; color:var(--dim); background:var(--panel); border:1px solid var(--line); border-radius:11px; font-size:13px; white-space:nowrap; }
.pill.live { color:var(--red); border-color:var(--red); transform-origin:center; animation:spin-sign 4.5s ease-in-out infinite; }
.pill.dry { color:var(--green); border-color:var(--green); }
.pill.warn { color:var(--amber); border-color:var(--amber); }
@keyframes spin-sign { 0%,55% { transform:perspective(140px) rotateY(0); } 85%,100% { transform:perspective(140px) rotateY(360deg); } }
@media (prefers-reduced-motion:reduce) { .pill.live { animation:none; } }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); gap:14px; }
.card .value { font-size:21px; font-weight:650; font-variant-numeric:tabular-nums; }
.card .key { color:var(--dim); font-size:13px; }
.pnl-reconciliation { margin-top:12px; padding:7px 9px; color:var(--dim); background:#25282e;
  border:1px solid #4a4f58; border-radius:7px; font-size:14px; font-variant-numeric:tabular-nums; }
.pnl-reconciliation.difference,
.pnl-reconciliation.qualified { color:var(--amber); background:#292516; border-color:#665522; }
.pnl-reconciliation.legacy { color:var(--dim); }
.positive { color:var(--green); }
.negative { color:var(--red); }
.empty { color:var(--dim); font-size:16px; font-style:italic; }
.scroll { max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
table { width:100%; border-collapse:collapse; }
th,td { padding:7px 9px; border-bottom:1px solid var(--line); text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
th { color:var(--dim); font-size:13px; font-weight:550; }
th:first-child,td:first-child { text-align:left; }
.stock { color:var(--blue); text-decoration:none; }
.stock:focus-visible,.stock:hover { text-decoration:underline; }
.badge { padding:1px 7px; border-radius:8px; font-size:12px; }
.badge.ok { color:var(--green); background:#1c3529; }
.badge.bad { color:var(--red); background:#3a1f1d; font-weight:650; }
.runs { display:flex; gap:6px; flex-wrap:wrap; }
.run { display:inline-flex; flex-direction:column; align-items:center; gap:2px; min-width:70px; padding:5px 9px; color:inherit; background:transparent; border:1px solid var(--blue); border-radius:7px; font:inherit; cursor:pointer; }
.run.halted { border-color:var(--red); }
.run .time { color:var(--text); font-size:14px; font-weight:650; }
.run.halted .time { color:var(--red); }
.run .label { color:var(--dim); font-size:13px; }
.run[aria-expanded="true"] { background:#24303b; box-shadow:inset 0 0 0 1px var(--blue); }
.run:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
button.run-detail { display:grid; grid-template-rows:0fr; width:100%; min-height:0; margin:0; padding:0;
  overflow:hidden; color:var(--dim); background:transparent; border:0; opacity:0; font:inherit;
  font-size:14px; text-align:left; cursor:pointer; pointer-events:none;
  transition:grid-template-rows 900ms ease,margin-top 900ms ease,opacity 300ms ease; }
button.run-detail.open { grid-template-rows:1fr; margin-top:9px; opacity:1; pointer-events:auto; }
.run-detail-text { display:block; min-width:0; min-height:0; overflow:hidden; overflow-wrap:anywhere;
  word-break:break-word; transform:translateY(-8px); transition:transform 900ms ease; }
.run-detail.open .run-detail-text { transform:translateY(0); }
.run-detail-plain { display:block; white-space:pre-line; }
.run-detail-summary { display:grid; grid-template-columns:max-content minmax(0,1fr); align-items:baseline;
  gap:4px 10px; margin-bottom:9px; }
.run-detail-time { color:var(--text); font-weight:650; font-variant-numeric:tabular-nums; }
.run-detail-outcome { min-width:0; color:var(--dim); white-space:pre-line; }
.run-detail-timing { display:block; padding:9px 10px 10px; background:#181b20;
  border:1px solid var(--line); border-radius:7px; }
.run-detail-eyebrow { display:block; margin-bottom:7px; color:var(--dim); font-size:11px;
  font-weight:650; letter-spacing:.08em; text-transform:uppercase; }
.run-detail-grid { display:grid; grid-template-columns:minmax(108px,.85fr) minmax(0,1.25fr);
  align-items:start; gap:6px 12px; }
.run-detail-label { min-width:0; color:var(--dim); font-size:12px; line-height:1.35; }
.run-detail-value { display:block; min-width:0; color:var(--text); line-height:1.35;
  overflow-wrap:anywhere; }
.run-detail-identity { display:flex; flex-direction:column; gap:1px; }
.run-detail-identity-primary { display:block; font-weight:650; }
.run-detail-identity-secondary,.run-detail-provenance { display:block; color:var(--dim); font-size:12px; }
.run-detail-metric-value { text-align:right; font-variant-numeric:tabular-nums; }
.run-detail-primary { font-weight:650; }
.run-detail-warning,.run-detail-unknown { color:var(--amber); }
.run-detail:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (prefers-reduced-motion:reduce) {
  button.run-detail,.run-detail-text { transition:none; }
}
.stars { margin-right:6px; color:#edc84b; font-size:14px; letter-spacing:1px; white-space:nowrap; }
.pnl-quality { display:inline-block; margin-left:7px; padding:1px 5px; color:var(--dim);
  border:1px solid var(--line); border-radius:7px; font-size:11px; font-weight:500;
  letter-spacing:.02em; text-transform:uppercase; vertical-align:1px; }
.notice { max-width:1100px; margin:0 auto 12px; padding:13px; color:var(--amber); background:#332b18; border:1px solid #6e5c1d; border-radius:8px; }
.notice-message { margin:0; }
.notice-connect { display:block; margin:12px auto 0; }
.notice.error { color:var(--red); background:#3a1f1d; border-color:var(--red); }
.notice.offline { color:var(--dim); background:#25282e; border-color:#4a4f58; }
.install-gate { color:var(--text); background:#302918; border-color:var(--amber); }
.install-gate h2 { color:var(--amber); font-size:15px; }
.install-gate p { margin:8px 0; }
.install-gate ol { margin:12px 0 0; padding-left:22px; }
.install-gate li { margin:6px 0; }
.browser-handoff-actions { margin-bottom:10px; }
a.action-link { display:inline-block; padding:7px 13px; color:var(--text); background:#25282e;
  border:1px solid #4a4f58; border-radius:6px; text-decoration:none; }
a.action-link.primary { color:var(--green); border-color:var(--green); }
a.action-link:hover { background:#30343b; }
a.action-link:focus-visible { outline:2px solid #686e78; outline-offset:2px; }
.browser-address { margin:8px 0; padding:8px 10px; overflow-wrap:anywhere; color:var(--green);
  background:#191c21; border:1px solid var(--line); border-radius:6px; user-select:all; }
.browser-address code { font:13px/1.45 ui-monospace,"Cascadia Mono",Consolas,monospace; }
.frame-block { max-width:680px; margin:12vh auto; padding:22px; background:var(--panel); border:1px solid var(--red); border-radius:9px; }
.frame-block h1 { color:var(--red); }
.welcome p { margin:7px 0; }
.privacy { color:var(--dim); font-size:14px; }
.oauth-disclosure { margin:14px 0; padding:11px 12px; color:var(--dim); background:#191c21;
  border:1px solid var(--line); border-radius:7px; }
.oauth-disclosure h3 { margin:0 0 7px; color:var(--text); font-size:15px; }
.oauth-disclosure p { margin:6px 0; }
.oauth-disclosure a { color:var(--blue); }
.actions { display:flex; gap:8px; flex-wrap:wrap; margin:14px 0 8px; }
button.action { padding:7px 13px; color:var(--text); background:#25282e; border:1px solid #4a4f58; border-radius:6px; font:inherit; cursor:pointer; }
button.action.primary { color:var(--green); border-color:var(--green); }
button.action.danger { color:var(--red); border-color:var(--red); }
button.action:disabled { opacity:.45; cursor:not-allowed; }
button.action:hover { background:#30343b; }
button.action:focus-visible { outline:2px solid #686e78; outline-offset:2px; }
button.show-more { display:block; margin:12px auto 0; }
footer { max-width:1100px; margin:14px auto 0; color:var(--dim); text-align:center; font-size:13px; }
footer a,.document a { color:var(--blue); }
.document { max-width:760px; margin:0 auto; }
.document h1 { margin-bottom:16px; }
.document h2 { margin-top:24px; color:var(--text); font-size:16px; letter-spacing:0; text-transform:none; }
.document code { color:var(--green); }
.document-lead { color:var(--text); font-size:17px; }
.document-nav { display:flex; gap:14px; flex-wrap:wrap; margin-top:28px; padding-top:14px;
  border-top:1px solid var(--line); }
.document-nav a { color:var(--blue); }
[hidden] { display:none !important; }
@media (max-width:540px) {
  body { font-size:14px; }
  section { padding:12px; }
  .cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .card .value { font-size:19px; }
  .empty { font-size:15px; }
  .runs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
  .run { width:100%; min-width:0; min-height:52px; padding:6px 7px; }
  .run-detail-grid { grid-template-columns:minmax(102px,.8fr) minmax(0,1.2fr); column-gap:9px; }
}