.segmented { display:inline-flex; border:1px solid rgba(255,255,255,.12); border-radius:12px; overflow:hidden; flex-wrap:wrap; }
.segmented button { border:0; border-radius:0; background:rgba(255,255,255,.04); padding:10px 14px; }
.segmented button.active { background:rgba(138,180,255,.22); color:#fff; }
.filters { display:flex; gap:10px; flex-wrap:wrap; }
.filters input, .filters select { min-width:220px; width:auto; }
.filters select { border:1px solid rgba(255,255,255,.12); border-radius:12px; background:#121a2f; color:var(--text); padding:12px 16px; font:inherit; }
button:disabled { opacity:.55; cursor:wait; }
th.sortable { cursor:pointer; user-select:none; white-space:nowrap; }
th.sortable.sorted::after { content:' ▾'; }
th.sortable.sorted.asc::after { content:' ▴'; }
td.num, th.num { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.ticker { font-weight:900; color:#fff; }
.sub { color:var(--muted); font-size:12px; margin-top:2px; }
.bar { position:relative; height:8px; min-width:120px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; }
.bar span { position:absolute; inset:0 auto 0 0; border-radius:999px; background:#8ab4ff; }
.metric .delta { font-size:14px; margin-top:4px; }
.metric .value { overflow-wrap:normal; white-space:nowrap; font-size:clamp(17px, 1.55vw, 24px); }
.steps { margin:12px 0; padding-left:20px; color:#d9e5ff; line-height:1.7; }
.bookmarklet { cursor:grab; margin-left:8px; }
#pushForm { max-width:520px; margin-top:8px; }
kbd { border:1px solid rgba(255,255,255,.2); border-radius:6px; padding:1px 6px; font-size:12px; }
.darf-grid { grid-template-columns: repeat(4, minmax(150px,1fr)); margin:0 0 14px; }
.sub-title { margin:18px 0 10px; font-size:15px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }
@media (max-width: 1100px) { .darf-grid { grid-template-columns: repeat(2, 1fr); } }
.vchart { display:flex; align-items:flex-end; gap:2px; height:220px; padding:8px 4px 0; border-bottom:1px solid rgba(255,255,255,.14); overflow-x:auto; }
.vbar { flex:1 1 0; min-width:22px; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:stretch; outline:none; cursor:default; position:relative; padding-bottom:22px; }
.vbar-stack { display:flex; flex-direction:column; gap:2px; min-height:1px; }
.vbar .seg { display:block; min-height:1px; }
.vbar .seg:first-child { border-radius:4px 4px 0 0; }
.seg.received, .sw.received { background:#8ab4ff; }
.seg.future, .sw.future { background:rgba(138,180,255,.35); background-image:repeating-linear-gradient(45deg, transparent 0 4px, rgba(138,180,255,.55) 4px 6px); }
.vbar:hover .seg, .vbar:focus .seg { filter:brightness(1.2); }
.vbar-label { position:absolute; bottom:0; left:0; right:0; text-align:center; font-size:11px; color:var(--muted); white-space:nowrap; }
.legend { display:flex; gap:18px; font-size:13px; color:#d9e5ff; margin:4px 0 0; }
.legend .sw { display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:6px; vertical-align:-1px; }
.chart-tip { position:absolute; z-index:50; pointer-events:none; background:#0b1222; border:1px solid rgba(255,255,255,.18); color:#f6f8ff; font-size:12px; padding:6px 9px; border-radius:8px; box-shadow:0 6px 18px rgba(0,0,0,.4); max-width:320px; }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
table.compact { min-width:0; }
@media (max-width: 1100px) { .two-col { grid-template-columns:1fr; } }
#pushLinkBox p { margin:12px 0; display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.code-box { width:100%; font:12px ui-monospace, SFMono-Regular, Menlo, monospace; background:rgba(0,0,0,.25); color:#d9e5ff; border:1px solid rgba(255,255,255,.12); border-radius:10px; padding:10px; resize:vertical; }
.is-mobile .desktop-only { display:none !important; }