/* ═══════════════════════════════════════════════════════════════════
   Historical funding rates — standalone page in the Perpetuals Learn site.
   Theme-aware (light + dark) using Kalshi's DS3 base tokens; the rest of the
   Learn site is dark-only, so this page does not load styles.css.
   The theme follows kalshi.com's own preference (see the boot script in the
   page <head>); [data-theme] on <html> selects the token set below.
   ═══════════════════════════════════════════════════════════════════ */

@font-face { font-family:'Kalshi Sans'; font-weight:400; font-display:swap; src:url('fonts/KalshiSans-Regular-Web.woff2') format('woff2'); }
@font-face { font-family:'Kalshi Sans'; font-weight:500; font-display:swap; src:url('fonts/KalshiSans-Medium-Web.woff2') format('woff2'); }
@font-face { font-family:'Kalshi Sans'; font-weight:600; font-display:swap; src:url('fonts/KalshiSans-Semibold-Web.woff2') format('woff2'); }
@font-face { font-family:'Kalshi Sans'; font-weight:700; font-display:swap; src:url('fonts/KalshiSans-Bold-Web.woff2') format('woff2'); }
@font-face { font-family:'Kalshi Sans Condensed'; font-weight:600; font-display:swap; src:url('fonts/KalshiSansCondensed-Semibold-Web.woff2') format('woff2'); }
@font-face { font-family:'Kalshi Sans Condensed'; font-weight:700; font-display:swap; src:url('fonts/KalshiSansCondensed-Bold-Web.woff2') format('woff2'); }

:root{
  color-scheme:light;
  --bg:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#F6F7F8;            /* recessed: segmented tracks, notes */
  --surface-pop:#FFFFFF;          /* popovers, tooltip */
  --seg-on:#FFFFFF;
  --ink:rgba(0,0,0,0.90);
  --ink-2:rgba(0,0,0,0.60);
  --ink-3:rgba(0,0,0,0.45);
  --line:rgba(0,0,0,0.08);
  --line-2:rgba(0,0,0,0.12);
  --line-3:rgba(0,0,0,0.20);
  --hover:rgba(0,0,0,0.035);

  --green-mark:#0AC285;           /* bars, fills */
  --green-text:#007A52;           /* numbers and links: 5.6:1 on white */
  --red-mark:#D91616;
  --red-text:#D91616;
  --accent:#7839FF;               /* perps accent: focus, partial-day marks */
  --accent-text:#6229DB;
  --accent-wash:rgba(120,57,255,0.08);
  --warn:#B34A00;
  --warn-wash:rgba(255,106,0,0.06);
  --warn-line:rgba(179,74,0,0.30);

  --cum-line:rgba(0,0,0,0.88);    /* neutral cumulative series */
  --grid:rgba(0,0,0,0.07);
  --zero:rgba(0,0,0,0.30);
  --missing:rgba(0,0,0,0.045);
  --shadow:0 12px 32px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);

  --font:'Kalshi Sans',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --font-cond:'Kalshi Sans Condensed','Kalshi Sans',system-ui,sans-serif;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;
  --maxw:1280px;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0A0C0F;
  --surface:#13161A;
  --surface-2:#191D22;
  --surface-pop:#1A1E23;
  --seg-on:#2A2F36;
  --ink:rgba(255,255,255,0.90);
  --ink-2:rgba(255,255,255,0.62);
  --ink-3:rgba(255,255,255,0.45);
  --line:rgba(255,255,255,0.08);
  --line-2:rgba(255,255,255,0.12);
  --line-3:rgba(255,255,255,0.22);
  --hover:rgba(255,255,255,0.035);

  --green-mark:#28CC95;
  --green-text:#28CC95;
  --red-mark:#FF4D6A;
  --red-text:#FF4D6A;
  --accent:#AE88FF;
  --accent-text:#AE88FF;
  --accent-wash:rgba(174,136,255,0.12);
  --warn:#FF8A3D;
  --warn-wash:rgba(255,106,0,0.08);
  --warn-line:rgba(255,138,61,0.30);

  --cum-line:rgba(255,255,255,0.86);
  --grid:rgba(255,255,255,0.07);
  --zero:rgba(255,255,255,0.32);
  --missing:rgba(255,255,255,0.045);
  --shadow:0 16px 40px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.4);
}

*{ box-sizing:border-box; }
html{ background:var(--bg); }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
button,input,select{ font:inherit; color:inherit; }
a{ color:var(--green-text); text-underline-offset:2px; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
[hidden]{ display:none !important; }
.tnum{ font-variant-numeric:tabular-nums; }
.pos{ color:var(--green-text); }
.neg{ color:var(--red-text); }
.muted{ color:var(--ink-2); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.ico{ width:18px; height:18px; flex:0 0 auto; display:block; }
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important; scroll-behavior:auto !important; } }

/* ── Top bar (Learn site chrome, theme-aware) ── */
.fr-top{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:18px; height:60px; padding:0 24px;
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}
.fr-brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); }
.fr-brand svg{ height:16px; width:auto; color:var(--green-mark); }
.fr-brand .perp{ font-family:var(--font-cond); font-weight:600; font-size:19px; letter-spacing:-.01em; }
.fr-brand .div{ width:1px; height:16px; background:var(--line-3); }
.fr-brand .academy{ font-size:13px; font-weight:500; color:var(--ink-2); }
.fr-top .spacer{ flex:1; }
.fr-top nav a{ font-size:14px; font-weight:500; color:var(--ink-2); text-decoration:none; }
.fr-top nav a:hover{ color:var(--ink); }
.btn-trade{
  display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 14px;
  border-radius:var(--r-pill); background:var(--green-mark); color:#04261C;
  font-weight:600; font-size:14px; text-decoration:none;
}
.btn-trade:hover{ filter:brightness(1.05); }
@media (max-width:560px){ .fr-top nav{ display:none; } .fr-brand .academy, .fr-brand .div{ display:none; } }

/* ── Page ── */
.fr-main{ max-width:var(--maxw); margin:0 auto; padding:28px 24px 72px; display:flex; flex-direction:column; gap:20px; }
#fr-content{ display:flex; flex-direction:column; gap:20px; }
#fr-coverage:empty, #fr-banners:empty{ display:none; }
#fr-banners{ display:flex; flex-direction:column; gap:12px; }
.fr-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px 32px; }
.crumbs{ display:flex; gap:8px; font-size:12px; color:var(--ink-2); }
.crumbs a{ color:var(--ink-2); text-decoration:none; }
.crumbs a:hover{ color:var(--ink); text-decoration:underline; }
.fr-head h1{
  margin:8px 0 6px; font-family:var(--font-cond); font-weight:700;
  font-size:44px; line-height:48px; letter-spacing:-.01em;
}
.fr-head .sub{ margin:0; font-size:16px; line-height:24px; color:var(--ink-2); }
.status{ display:flex; align-items:center; flex-wrap:wrap; gap:12px; font-size:12px; color:var(--ink-2); }
.live-dot{ width:7px; height:7px; border-radius:50%; background:var(--green-mark); display:inline-block; margin-right:6px; vertical-align:1px; }
@media (max-width:560px){ .fr-head h1{ font-size:34px; line-height:38px; } }

.btn{
  display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px;
  border-radius:var(--r-sm); border:1px solid var(--line-2); background:transparent;
  font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap;
}
.btn:hover{ background:var(--hover); border-color:var(--line-3); }
.btn:disabled{ opacity:.55; cursor:default; }
.btn .ico{ width:16px; height:16px; }
.btn-solid{ border:0; background:var(--ink); color:var(--bg); height:36px; padding:0 16px; }
.btn-solid:hover{ background:var(--ink); opacity:.9; }

/* ── Banners ── */
.banner{
  display:flex; align-items:center; flex-wrap:wrap; gap:12px;
  padding:12px 16px; border-radius:var(--r-md); border:1px solid;
}
.banner .body{ flex:1; min-width:220px; display:flex; flex-direction:column; gap:2px; }
.banner strong{ font-weight:600; }
.banner-warn{ border-color:var(--warn-line); background:var(--warn-wash); }
.banner-warn > .ico{ color:var(--warn); }
.banner-err{ border-color:color-mix(in srgb, var(--red-text) 30%, transparent); background:color-mix(in srgb, var(--red-text) 5%, transparent); }
.banner-err > .ico{ color:var(--red-text); }

/* ── Loading / error ── */
.skel{ display:flex; flex-direction:column; gap:20px; }
.skel div{ border-radius:var(--r-lg); background:var(--surface-2); animation:pulse 1.4s ease-in-out infinite; }
@keyframes pulse{ 50%{ opacity:.55; } }
.state-card{
  padding:56px 24px; border-radius:var(--r-lg); border:1px solid var(--line-2);
  display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center;
}
.state-card h2{ margin:0; font-size:18px; line-height:24px; font-weight:600; }
.state-card p{ margin:0; max-width:440px; color:var(--ink-2); }
.state-card .ico{ width:32px; height:32px; }

/* ── Controls ── */
.toolbar{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.toolbar .grow{ flex:1; }
.picker{ position:relative; }
.picker-btn{
  height:44px; padding:0 12px 0 8px; min-width:230px;
  display:flex; align-items:center; gap:10px;
  border-radius:10px; border:1px solid var(--line-2); background:var(--surface); cursor:pointer;
}
.picker-btn:hover{ border-color:var(--line-3); }
.picker-btn .names{ display:flex; align-items:baseline; gap:8px; flex:1; text-align:left; }
.picker-btn .nm{ font-size:15px; font-weight:600; }
.picker-btn .sym{ font-size:13px; color:var(--ink-2); }
.picker-btn .ico{ color:var(--ink-2); }
.picker-pop{
  position:absolute; top:50px; left:0; z-index:30; width:min(340px, calc(100vw - 48px));
  border-radius:var(--r-md); border:1px solid var(--line-2); background:var(--surface-pop);
  box-shadow:var(--shadow); overflow:hidden;
}
.picker-search{ display:flex; align-items:center; gap:8px; padding:8px 8px 8px 14px; border-bottom:1px solid var(--line); }
.picker-search .ico{ color:var(--ink-2); }
.picker-search input{ flex:1; height:36px; border:0; outline:none; background:transparent; font-size:14px; }
.picker-list{ list-style:none; margin:0; padding:6px; max-height:340px; overflow:auto; }
.picker-list li{
  display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--r-sm); cursor:pointer;
}
.picker-list li[aria-selected="true"]{ background:var(--hover); }
.picker-list li.is-active{ background:var(--accent-wash); }
.picker-list .nm{ font-weight:600; }
.picker-list .meta{ margin-left:auto; font-size:12px; color:var(--ink-3); }
.picker-empty{ padding:16px; color:var(--ink-2); }

.asset-ico{
  width:28px; height:28px; border-radius:50%; flex:0 0 auto; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--surface-2); font-size:9px; font-weight:700; letter-spacing:.02em; color:var(--ink-2);
}
.asset-ico img{ width:100%; height:100%; object-fit:cover; display:block; }

.seg{ display:inline-flex; gap:2px; padding:3px; border-radius:10px; background:var(--surface-2); }
.seg button{
  height:36px; padding:0 14px; border:0; border-radius:var(--r-sm); background:transparent;
  font-size:13px; font-weight:600; color:var(--ink-2); cursor:pointer; white-space:nowrap;
}
.seg button:hover{ color:var(--ink); }
.seg button[aria-pressed="true"]{ background:var(--seg-on); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.12); }
.range-label{ font-size:14px; font-weight:600; white-space:nowrap; }
.range-label .tz{ margin-left:6px; font-size:11px; font-weight:600; color:var(--ink-2); padding:2px 6px; border-radius:4px; background:var(--surface-2); }
.custom{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.custom input{
  height:36px; padding:0 10px; border-radius:var(--r-sm); border:1px solid var(--line-2); background:var(--surface);
  font-variant-numeric:tabular-nums;
}
.custom span{ color:var(--ink-2); }

/* ── Coverage note ── */
.note{
  display:flex; gap:10px; padding:14px 16px; border-radius:var(--r-md); background:var(--surface-2);
}
.note .ico{ color:var(--ink-2); margin-top:1px; }
.note strong{ display:block; font-weight:600; margin-bottom:2px; }
.note p{ margin:0; color:var(--ink-2); }

/* ── Summary cards ── */
.cards{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; }
@media (max-width:860px){ .cards{ grid-template-columns:1fr; } }
.card{ padding:20px; border-radius:var(--r-lg); border:1px solid var(--line-2); background:var(--surface); }
.card-label{ display:flex; align-items:center; gap:6px; font-size:13px; font-weight:500; color:var(--ink-2); }
.card-value{
  margin:10px 0 6px; font-family:var(--font-cond); font-weight:700; font-size:36px; line-height:40px;
  letter-spacing:-.01em; font-variant-numeric:tabular-nums;
}
.card-sub{ font-size:12.5px; color:var(--ink-2); }
.tip{ position:relative; display:inline-flex; }
.tip-btn{ display:inline-flex; padding:0; border:0; background:none; cursor:help; color:var(--ink-3); }
.tip-btn .ico{ width:15px; height:15px; }
.tip-body{
  display:none;
  position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%); z-index:20;
  width:260px; padding:10px 12px; border-radius:10px; background:var(--surface-pop); border:1px solid var(--line-2);
  box-shadow:var(--shadow); font-size:12.5px; line-height:1.5; font-weight:400; color:var(--ink); text-align:left;
}

.tip:hover .tip-body, .tip:focus-within .tip-body{ display:block; }
@media (max-width:560px){ .tip-body{ left:auto; right:-8px; transform:none; } }

.fr-disclaimer{
  margin:0; padding:12px 16px; border-radius:var(--r-md); border-left:3px solid var(--line-3);
  background:var(--surface-2); color:var(--ink-2); font-size:13.5px; line-height:1.55;
}
.fr-disclaimer strong{ color:var(--ink); font-weight:600; }

/* ── Chart card ── */
.panel{ padding:20px; border-radius:var(--r-lg); border:1px solid var(--line-2); background:var(--surface); }
.chart-head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.chart-head h2{ margin:0; font-size:17px; font-weight:600; }
.legend{ display:flex; flex-wrap:wrap; gap:8px; }
.legend button{
  display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 12px;
  border-radius:var(--r-sm); border:1px solid var(--line-2); background:transparent; cursor:pointer;
  font-size:13px; font-weight:500;
}
.legend button[aria-pressed="false"]{ opacity:.45; }
.legend button[aria-pressed="false"] .lab{ text-decoration:line-through; }
.sw-bars{ display:inline-flex; gap:2px; }
.sw-bars i{ width:4px; height:12px; border-radius:1px; display:block; background:var(--green-mark); }
.sw-bars i + i{ background:var(--red-mark); }
.sw-line{ width:16px; height:2px; border-radius:2px; background:var(--cum-line); display:block; }
.axis-titles{ display:flex; justify-content:space-between; font-size:11.5px; font-weight:600; color:var(--ink-2); margin-bottom:6px; }
.chart{ position:relative; outline:none; touch-action:pan-y; }
.chart:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; border-radius:8px; }
.chart svg{ display:block; width:100%; overflow:visible; }
.chart .grid{ stroke:var(--grid); stroke-width:1; }
.chart .zero{ stroke:var(--zero); stroke-width:1; }
.chart .tick{ fill:var(--ink-3); font-size:11px; font-family:var(--font); font-variant-numeric:tabular-nums; }
.chart .bar-pos{ fill:var(--green-mark); }
.chart .bar-neg{ fill:var(--red-mark); }
.chart .bar-zero{ fill:var(--ink-2); }
.chart .bar-partial{ fill:none; stroke:var(--accent); stroke-width:1.25; stroke-dasharray:2 2; }
.chart .missing{ fill:var(--missing); }
.chart .cum{ fill:none; stroke:var(--cum-line); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.chart .cum-dot{ fill:var(--cum-line); stroke:var(--surface); stroke-width:2; }
.chart .cum-label{ fill:var(--ink); font-size:12px; font-weight:600; font-family:var(--font); font-variant-numeric:tabular-nums; paint-order:stroke; stroke:var(--surface); stroke-width:4px; stroke-linejoin:round; }
.chart .cross{ stroke:var(--ink-3); stroke-width:1; }
.chart .hi-band{ fill:var(--hover); }
.chart-tip{
  position:absolute; top:0; z-index:10; pointer-events:none; min-width:200px;
  padding:10px 12px; border-radius:10px; background:var(--surface-pop); border:1px solid var(--line-2);
  box-shadow:var(--shadow); font-size:12.5px;
}
@media (max-width:560px){
  .chart-tip{ min-width:0; padding:7px 9px; font-size:11.5px; }
  .chart-tip .d{ margin-bottom:4px; }
  .chart-tip .tnote{ max-width:170px; font-size:11px; }
  .chart-tip .k .key-bar, .chart-tip .k .key-line{ display:none; }
}
.chart-tip .d{ font-weight:600; margin-bottom:6px; }
.chart-tip .row{ display:flex; align-items:center; gap:8px; justify-content:space-between; }
.chart-tip .row + .row{ margin-top:3px; }
.chart-tip .k{ display:flex; align-items:center; gap:6px; color:var(--ink-2); }
.chart-tip .v{ font-weight:600; font-variant-numeric:tabular-nums; }
.chart-tip .key-bar{ width:3px; height:10px; border-radius:1px; background:var(--green-mark); }
.chart-tip .key-line{ width:10px; height:2px; border-radius:2px; background:var(--cum-line); }
.chart-tip .tnote{ margin-top:6px; padding-top:6px; border-top:1px solid var(--line); color:var(--ink-2); font-size:12px; max-width:240px; }
.marks-legend{ display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:10px; font-size:12px; color:var(--ink-2); }
.marks-legend span{ display:inline-flex; align-items:center; gap:6px; }
.mk-zero{ width:14px; height:0; border-top:1px solid var(--zero); }
.mk-missing{ width:12px; height:12px; border-radius:2px; background:var(--missing); border:1px solid var(--line); }
.mk-zeroday{ width:12px; height:3px; border-radius:1px; background:var(--ink-2); }
.mk-partial{ width:10px; height:12px; border:1.25px dashed var(--accent); border-radius:1px; }
.chart-empty{ padding:72px 16px; display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; color:var(--ink-2); }
.chart-empty strong{ color:var(--ink); font-size:16px; }

.explain{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:18px; padding-top:18px; border-top:1px solid var(--line); }
@media (max-width:760px){ .explain{ grid-template-columns:1fr; } }
.explain h3{ margin:0 0 6px; font-size:14px; font-weight:600; }
.explain p{ margin:0; color:var(--ink-2); }
.linkbtn{
  display:inline-flex; align-items:center; gap:6px; margin-top:16px; padding:0; border:0; background:none;
  color:var(--green-text); font-weight:600; cursor:pointer;
}
.linkbtn .ico{ width:16px; height:16px; }
.daytable{ margin-top:14px; max-height:420px; overflow:auto; border:1px solid var(--line); border-radius:var(--r-md); }

/* ── Tables ── */
table.fr{ width:100%; border-collapse:collapse; font-size:13.5px; }
table.fr caption{ text-align:left; padding:0 0 8px; font-size:12px; color:var(--ink-2); }
table.fr th{
  position:sticky; top:0; z-index:1; background:var(--surface);
  padding:12px 16px; text-align:left; font-size:12px; font-weight:600; color:var(--ink-2);
  border-bottom:1px solid var(--line-2); white-space:nowrap;
}
table.fr td{ padding:12px 16px; border-bottom:1px solid var(--line); vertical-align:middle; }
table.fr tr:last-child td{ border-bottom:0; }
table.fr .num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
table.fr th.num{ text-align:right; }

/* ── Interest vs funding ── */
.int-head{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px 32px; margin-bottom:18px; }
.int-head h2{ margin:0 0 6px; font-size:17px; font-weight:600; }
.int-head p{ margin:0; max-width:560px; color:var(--ink-2); }
.int-head .int-assume{ display:flex; gap:8px; align-items:flex-start; margin:12px 0 0; max-width:560px; padding:10px 12px; border-radius:var(--r-sm); background:var(--surface-2); color:var(--ink); }
.int-assume .ico{ width:16px; height:16px; margin-top:2px; color:var(--ink-2); }
.int-assume strong{ font-weight:600; }
.int-ctl{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:14px; }
.int-ctl label{ display:flex; flex-direction:column; gap:6px; font-size:12px; color:var(--ink-2); }
.money-in{ display:flex; align-items:center; height:40px; padding:0 10px; border-radius:var(--r-sm); border:1px solid var(--line-2); background:var(--surface); width:130px; }
.money-in input{ width:100%; border:0; outline:none; background:transparent; padding-left:4px; font-variant-numeric:tabular-nums; }
.money-in:focus-within{ outline:2px solid var(--accent); outline-offset:1px; }
.int-ctl .seg button{ height:34px; padding:0 12px; }
.pos-size{ display:flex; flex-direction:column; gap:6px; font-size:12px; color:var(--ink-2); text-align:right; }
.pos-size b{ font-size:15px; color:var(--ink); font-variant-numeric:tabular-nums; height:40px; display:flex; align-items:center; justify-content:flex-end; }
.sides{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:760px){ .sides{ grid-template-columns:1fr; } }
.side{ padding:16px 18px; border-radius:var(--r-md); border:1px solid var(--line-2); }
.side-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.side-top b{ font-size:15px; }
.badge{ font-size:11.5px; font-weight:600; padding:2px 8px; border-radius:var(--r-pill); }
.badge.pos{ background:color-mix(in srgb, var(--green-mark) 14%, transparent); }
.badge.neg{ background:color-mix(in srgb, var(--red-mark) 12%, transparent); }
.badge.mute{ background:var(--surface-2); color:var(--ink-2); }
.side .ln{ display:flex; justify-content:space-between; padding:3px 0; color:var(--ink-2); }
.side .ln b{ font-weight:600; font-variant-numeric:tabular-nums; }
.meter{ height:6px; border-radius:var(--r-pill); background:var(--surface-2); margin:12px 0 14px; overflow:hidden; }
.meter i{ display:block; height:100%; border-radius:var(--r-pill); background:var(--green-mark); }
.side-net{ display:flex; justify-content:space-between; align-items:flex-end; padding-top:12px; border-top:1px solid var(--line); }
.side-net span{ font-weight:600; }
.side-net b{ font-family:var(--font-cond); font-size:30px; line-height:32px; font-variant-numeric:tabular-nums; }
.side-note{ margin:8px 0 0; font-size:12.5px; color:var(--ink-2); }
.int-foot{ margin:14px 0 0; font-size:12.5px; color:var(--ink-2); }

/* ── All perps ── */
.all-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px 24px; margin-top:12px; }
.all-head h2{ margin:0; font-family:var(--font-cond); font-weight:700; font-size:28px; line-height:32px; }
.all-head p{ margin:4px 0 0; color:var(--ink-2); font-size:13px; }
.all-ctl{ display:flex; flex-wrap:wrap; gap:10px; }
.search{ display:flex; align-items:center; gap:8px; height:40px; padding:0 12px; border-radius:10px; border:1px solid var(--line-2); background:var(--surface); width:220px; }
.search .ico{ color:var(--ink-2); }
.search input{ flex:1; min-width:0; border:0; outline:none; background:transparent; }
.search:focus-within{ outline:2px solid var(--accent); outline-offset:1px; }
.all-ctl .seg button{ height:34px; }
.all-wrap{ border:1px solid var(--line-2); border-radius:var(--r-lg); overflow-x:auto; background:var(--surface); }
.hd-sm{ display:none; }
.all-wrap table.fr th{ cursor:pointer; user-select:none; }
.all-wrap table.fr th button{ all:unset; display:inline-flex; align-items:center; gap:4px; cursor:pointer; }
.all-wrap table.fr th button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
.sort-ind{ font-size:10px; color:var(--ink-3); }
.all-wrap tbody tr{ cursor:pointer; }
.all-wrap tbody tr:hover{ background:var(--hover); }
.all-wrap tbody tr.is-sel{ background:var(--accent-wash); }
.asset-cell{ display:flex; align-items:center; gap:10px; }
.asset-cell .nm{ font-weight:600; }
.asset-cell .sy{ font-size:12px; color:var(--ink-2); }
.charted{ margin-left:6px; font-size:11px; font-weight:600; padding:1px 7px; border-radius:4px; color:var(--accent-text); background:var(--accent-wash); }
.cov{ font-size:12.5px; color:var(--ink-2); }
.all-foot{ margin:0; font-size:12.5px; color:var(--ink-2); }
.no-rows{ padding:28px 16px; text-align:center; color:var(--ink-2); }
@media (max-width:720px){
  .all-wrap .col-avg, .all-wrap .col-cov{ display:none; }
  .hd-lg{ display:none; } .hd-sm{ display:inline; }
  .asset-cell .asset-ico{ width:24px; height:24px; }
  table.fr th, table.fr td{ padding:11px 10px; }
  .all-wrap .asset-cell .cov-inline{ display:block; }
  .search{ width:100%; }
  .all-ctl{ width:100%; }
}
.asset-cell .cov-inline{ display:none; font-size:12px; color:var(--ink-3); }

/* ── Footer (Learn site disclaimers) ── */
.site-foot{ max-width:var(--maxw); margin:0 auto; padding:32px 24px 56px; border-top:1px solid var(--line); }
.site-foot .foot-row{ display:flex; align-items:center; gap:12px; margin-bottom:14px; font-size:13px; color:var(--ink-2); }
.site-foot .foot-row svg{ color:var(--green-mark) !important; }
.site-foot .foot-row .div{ width:1px; height:14px; background:var(--line-3); }
.site-foot .disclaimer{ margin:0 0 12px; max-width:900px; font-size:12px; line-height:1.6; color:var(--ink-3); }
.site-foot a{ color:var(--ink-2); }