/* ============================================================ tokens */
:root {
  color-scheme: light;
  --bg: #f3f5f9;
  --surface: #ffffff;
  --surface-2: #f7f8fb;
  --surface-3: #eef1f6;
  --line: #e2e6ee;
  --line-soft: #edf0f5;
  --tx: #131926;
  --tx-2: #454f66;
  --tx-3: #5d677d;
  --accent: #2a6bd1;
  --accent-strong: #1d57b4;
  --accent-soft: #e7effc;
  --on-accent: #ffffff;
  --pos: #0a7a49;
  --pos-bar: #14a566;
  --pos-soft: #e1f4ea;
  --neg: #c1273d;
  --neg-bar: #e04458;
  --neg-soft: #fde8eb;
  --warn: #8a5300;
  --warn-soft: #fff1d1;
  --info-soft: #e7effc;
  --shadow: 0 1px 2px rgb(19 25 38 / .04), 0 6px 20px rgb(19 25 38 / .05);
  --shadow-lg: 0 10px 40px rgb(19 25 38 / .16);
  --grid: #e8ebf2;
  --s0: #2a78d6; --s1: #eb6834; --s2: #1baf7a; --s3: #4a3aa7;
  --r-lg: 18px; --r-md: 12px; --r-sm: 8px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --font: "Vazirmatn", "Segoe UI", Tahoma, "Noto Sans Arabic", system-ui, -apple-system, sans-serif;
  --nav-h: 64px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0b0f16; --surface: #131923; --surface-2: #181f2b; --surface-3: #1e2635; --line: #242d3d; --line-soft: #1c2433;
    --tx: #e8ecf4; --tx-2: #b4bdce; --tx-3: #8f99ad;
    --accent: #6aa6f6; --accent-strong: #8dbbf8; --accent-soft: #172a47; --on-accent: #0b0f16;
    --pos: #3fd691; --pos-bar: #22b878; --pos-soft: #12301f; --neg: #ff7b8b; --neg-bar: #e5576a; --neg-soft: #3a1a21;
    --warn: #f2b34c; --warn-soft: #33260c; --info-soft: #172a47;
    --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 6px 20px rgb(0 0 0 / .25); --shadow-lg: 0 10px 40px rgb(0 0 0 / .55); --grid: #212a39;
    --s0: #3987e5; --s1: #d95926; --s2: #199e70; --s3: #9085e9;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0f16; --surface: #131923; --surface-2: #181f2b; --surface-3: #1e2635; --line: #242d3d; --line-soft: #1c2433;
  --tx: #e8ecf4; --tx-2: #b4bdce; --tx-3: #8f99ad;
  --accent: #6aa6f6; --accent-strong: #8dbbf8; --accent-soft: #172a47; --on-accent: #0b0f16;
  --pos: #3fd691; --pos-bar: #22b878; --pos-soft: #12301f; --neg: #ff7b8b; --neg-bar: #e5576a; --neg-soft: #3a1a21;
  --warn: #f2b34c; --warn-soft: #33260c; --info-soft: #172a47;
  --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 6px 20px rgb(0 0 0 / .25); --shadow-lg: 0 10px 40px rgb(0 0 0 / .55); --grid: #212a39;
  --s0: #3987e5; --s1: #d95926; --s2: #199e70; --s3: #9085e9;
}

/* ============================================================ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body {
  margin: 0; background: var(--bg); color: var(--tx); font-family: var(--font); font-size: 15px; line-height: 1.7;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100vh; overflow-x: hidden;
}
@media (min-width: 900px) { body { font-size: 15.5px; } }
h1, h2, h3, h4, p { margin: 0; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--accent); text-underline-offset: 3px; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--accent-soft); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic.sm { width: 16px; height: 16px; }
.ic.fill { fill: currentColor; stroke: none; }

/* numbers: always LTR-isolated so signs and % never scramble in RTL text */
.n { direction: ltr; unicode-bidi: isolate; display: inline-block; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; white-space: nowrap; }
.pos { color: var(--pos); } .neg { color: var(--neg); } .zero, .muted { color: var(--tx-3); }
.unit { font-size: .62em; font-weight: 500; color: var(--tx-3); margin-inline-start: 5px; letter-spacing: .02em; }
.mono { font-variant-numeric: tabular-nums; }
.sm { font-size: 13px; } .xs { font-size: 12px; }
.b { font-weight: 700; }

/* ============================================================ shell */
.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--sp-4); }
.top { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line); }
.top-in { display: flex; align-items: center; gap: var(--sp-4); height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; color: var(--tx); text-decoration: none; }
.brand-mark { width: 32px; height: 32px; border-radius: 10px; background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #8b5cf6)); color: #fff; display: grid; place-items: center; box-shadow: 0 3px 10px color-mix(in srgb, var(--accent) 35%, transparent); }
.brand small { display: block; font-size: 11px; font-weight: 500; color: var(--tx-3); line-height: 1.2; }
.tabs { display: none; gap: 2px; margin-inline-start: var(--sp-4); }
.tab { white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 10px; border: 0; background: none; color: var(--tx-2); font-weight: 600; font-size: 14px; text-decoration: none; transition: background .15s, color .15s; }
.tab:hover { background: var(--surface-3); color: var(--tx); }
.tab[aria-current="page"] { background: var(--accent-soft); color: var(--accent-strong); }
.top-actions { margin-inline-start: auto; display: flex; align-items: center; gap: var(--sp-2); }
.live { display: inline-flex; align-items: center; gap: 8px; padding: 5px 11px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-size: 12.5px; color: var(--tx-2); white-space: nowrap; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pos-bar); flex: none; position: relative; }
.dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--pos-bar); opacity: 0; animation: ping 2.4s ease-out infinite; }
.live.stale .dot, .dot.warn { background: #e09a1a; } .live.stale .dot::after { border-color: #e09a1a; }
.live.down .dot, .dot.bad { background: var(--neg-bar); } .live.down .dot::after { border-color: var(--neg-bar); animation: none; }
.dot.off { background: var(--tx-3); } .dot.off::after, .dot.warn::after, .dot.bad::after { display: none; }
@keyframes ping { 0% { transform: scale(.6); opacity: .7; } 70%, 100% { transform: scale(1.5); opacity: 0; } }
.icon-btn { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--tx-2); display: grid; place-items: center; transition: background .15s, color .15s, border-color .15s; }
.icon-btn:hover { background: var(--surface-3); color: var(--tx); }
.user { display: none; align-items: center; gap: 8px; font-size: 13px; color: var(--tx-2); padding-inline-start: 6px; }
.main { padding-block: var(--sp-5) calc(var(--nav-h) + var(--sp-6) + env(safe-area-inset-bottom)); min-height: 70vh; }
.page { display: grid; gap: var(--sp-4); animation: rise .35s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.page-h { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: 2px; }
.page-h h1 { font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.page-h p { color: var(--tx-3); font-size: 13.5px; }

.bnav { position: fixed; inset-inline: 0; bottom: 0; z-index: 40; background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(7, 1fr); padding: 4px 2px calc(4px + env(safe-area-inset-bottom)); }
.bnav a { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 0 4px; border-radius: 10px; color: var(--tx-3); text-decoration: none; font-size: 10px; white-space: nowrap; font-weight: 600; line-height: 1.4; transition: color .15s; position: relative; }
.bnav a[aria-current="page"] { color: var(--accent-strong); }
.bnav a[aria-current="page"]::before { content: ""; position: absolute; top: -5px; width: 22px; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent); }
.bnav .ic { width: 22px; height: 22px; }
@media (min-width: 900px) {
  .tabs { display: flex; } .bnav { display: none; } .user { display: inline-flex; } .main { padding-bottom: var(--sp-6); } .brand small { display: block; }
}
@media (max-width: 899px) { .brand small, .live-p { display: none; } .live { padding: 5px 10px; } }
@media (max-width: 520px) { .brand > span:last-child { display: none; } }

/* ============================================================ cards & grids */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: var(--sp-4); min-width: 0; }
@media (min-width: 640px) { .card { padding: 20px 22px; } }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.card-h h2, .card-h h3 { font-size: 15.5px; font-weight: 700; }
.card-h .sub { font-size: 12.5px; color: var(--tx-3); font-weight: 400; display: block; margin-top: 1px; }
.grid { display: grid; gap: var(--sp-4); }
.g-auto { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.g-tiles { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
@media (min-width: 720px) { .g-tiles { grid-template-columns: repeat(4, 1fr); } .g-tiles.t3 { grid-template-columns: repeat(3, 1fr); } .g-tiles.t6 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .g-tiles.t6 { grid-template-columns: repeat(6, 1fr); } .g-tiles.t5 { grid-template-columns: repeat(5, 1fr); } .cols-2-1 { grid-template-columns: 1.9fr 1fr; } .cols-1-1 { grid-template-columns: 1fr 1fr; } }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; min-width: 0; box-shadow: var(--shadow); }
.tile .k { font-size: 12.5px; color: var(--tx-3); display: flex; align-items: center; gap: 6px; line-height: 1.5; }
.tile .v { font-size: 21px; font-weight: 800; letter-spacing: -.01em; margin-top: 2px; line-height: 1.35; }
.tile .h { font-size: 12px; color: var(--tx-3); margin-top: 1px; line-height: 1.5; }
.eyebrow { font-size: 12.5px; color: var(--tx-3); font-weight: 600; display: flex; gap: 6px; align-items: center; }

/* hero */
.hero { display: grid; gap: var(--sp-5); overflow: hidden; position: relative; background: radial-gradient(900px 260px at 100% -40%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%), var(--surface); }
@media (min-width: 900px) { .hero { grid-template-columns: 1.05fr 1fr; align-items: stretch; } .hero-kpis { grid-column: 1 / -1; } }
.hero-value { font-size: clamp(36px, 8vw, 48px); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; margin-top: 4px; }
.hero-value .unit { font-size: 15px; }
.delta { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; font-weight: 700; font-size: 15px; }
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; line-height: 1.7; }
.pill.pos { background: var(--pos-soft); } .pill.neg { background: var(--neg-soft); } .pill.zero { background: var(--surface-3); }
.spark { display: block; width: 100%; max-width: 360px; height: 52px; margin-top: 14px; }
.spark path.l { vector-effect: non-scaling-stroke; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.spark path.a { fill: color-mix(in srgb, var(--accent) 12%, transparent); stroke: none; }
.spark circle { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.split-bar { display: flex; gap: 3px; height: 16px; margin: 10px 0 12px; }
.split-bar i { display: block; border-radius: 6px; min-width: 6px; transition: flex-grow .6s cubic-bezier(.2, .7, .2, 1); flex-basis: 0; }
.split-bar i.real { background: var(--pos-bar); } .split-bar i.real.neg { background: var(--neg-bar); }
.split-bar i.unreal { background: repeating-linear-gradient(135deg, var(--pos-bar) 0 4px, color-mix(in srgb, var(--pos-bar) 38%, var(--surface)) 4px 8px); } .split-bar i.unreal.neg { background: repeating-linear-gradient(135deg, var(--neg-bar) 0 4px, color-mix(in srgb, var(--neg-bar) 38%, var(--surface)) 4px 8px); }
.split-bar.empty i { background: var(--surface-3); }
.legend2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.legend2 .it b { display: block; font-size: 17px; line-height: 1.4; }
.legend2 .it span.l { font-size: 12.5px; color: var(--tx-2); display: flex; align-items: center; gap: 6px; }
.sw { width: 11px; height: 11px; border-radius: 3px; display: inline-block; flex: none; background: var(--pos-bar); }
.sw.hatch { background: repeating-linear-gradient(135deg, var(--pos-bar) 0 3px, color-mix(in srgb, var(--pos-bar) 38%, var(--surface)) 3px 6px); }
.sw.neg { background: var(--neg-bar); }
.hint { font-size: 12.5px; color: var(--tx-3); line-height: 1.8; }
.hero-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
@media (min-width: 720px) { .hero-kpis { grid-template-columns: repeat(4, 1fr); } }
.hero-kpis .tile { box-shadow: none; background: var(--surface-2); }

/* badges & chips */
.badges { display: flex; flex-wrap: wrap; gap: 8px; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: var(--surface-3); color: var(--tx-2); border: 1px solid transparent; white-space: nowrap; line-height: 1.7; }
.badge.good { background: var(--pos-soft); color: var(--pos); } .badge.bad { background: var(--neg-soft); color: var(--neg); }
.badge.warn { background: var(--warn-soft); color: var(--warn); } .badge.info { background: var(--info-soft); color: var(--accent-strong); }
.badge.outline { background: transparent; border-color: var(--line); }
.badge.short { background: var(--neg-soft); color: var(--neg); } .badge.long { background: var(--pos-soft); color: var(--pos); }
.badge.lg { padding: 5px 13px; font-size: 13.5px; }
.bd-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--tx-2); font-size: 13px; font-weight: 600; transition: background .15s, border-color .15s, color .15s; white-space: nowrap; }
.chip:hover { background: var(--surface-3); }
.chip[aria-pressed="true"], .chip.on { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent-strong); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.seg { display: inline-flex; padding: 3px; border-radius: 11px; background: var(--surface-3); gap: 2px; }
.seg button { border: 0; background: none; padding: 4px 13px; border-radius: 8px; font-size: 13px; font-weight: 700; color: var(--tx-2); transition: background .15s, color .15s; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--tx); box-shadow: 0 1px 3px rgb(0 0 0 / .12); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); font-weight: 700; transition: filter .15s, background .15s; }
.btn:hover { background: var(--surface-3); }
.btn.primary { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.btn.primary:hover { filter: brightness(1.08); background: var(--accent); }
.btn:disabled { opacity: .6; cursor: wait; }

/* banners & states */
.banner { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; border-radius: var(--r-md); font-size: 14px; border: 1px solid transparent; }
.banner.warn { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 25%, transparent); }
.banner.bad { background: var(--neg-soft); color: var(--neg); border-color: color-mix(in srgb, var(--neg) 25%, transparent); }
.banner.info { background: var(--info-soft); color: var(--accent-strong); }
.banner .ic { margin-top: 3px; }
.banners { display: grid; gap: var(--sp-2); }
.banners:empty { display: none; }
.empty { text-align: center; padding: 28px 12px; color: var(--tx-3); }
.empty .ic { width: 34px; height: 34px; margin-bottom: 6px; opacity: .55; }
.empty b { display: block; color: var(--tx-2); font-size: 15px; margin-bottom: 2px; }
.empty p { font-size: 13.5px; max-width: 46ch; margin-inline: auto; }
.sk { position: relative; overflow: hidden; background: var(--surface-3); border-radius: 10px; min-height: 16px; }
.sk::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--surface) 60%, transparent) 50%, transparent 80%); transform: translateX(-100%); animation: shimmer 1.4s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }
.note { padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-2); border: 1px dashed var(--line); font-size: 13.5px; color: var(--tx-2); line-height: 1.9; }
.note.honest { background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 28%, transparent); color: var(--tx); }
.note.honest b { color: var(--warn); }

/* ============================================================ charts */
.chart { position: relative; width: 100%; height: var(--ch, 270px); direction: ltr; touch-action: pan-y; outline-offset: 4px; }
@media (max-width: 599px) { .chart { --ch: 230px; } }
.chart svg { display: block; width: 100%; height: 100%; overflow: visible; font-family: var(--font); user-select: none; -webkit-user-select: none; }
.chart.h-sm { --ch: 190px; } .chart.h-xs { --ch: 150px; }
.gl { stroke: var(--grid); stroke-width: 1; shape-rendering: crispEdges; }
.gl.zero { stroke: var(--tx-3); opacity: .55; }
.axl { fill: var(--tx-3); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.axl.x { unicode-bidi: plaintext; }
.ln { fill: none; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.ln.s0 { stroke: var(--s0); } .ln.s1 { stroke: var(--s1); } .ln.s2 { stroke: var(--s2); } .ln.s3 { stroke: var(--s3); } .ln.acc { stroke: var(--accent); }
.ln.dash { stroke: var(--tx-3); stroke-width: 1.6; stroke-dasharray: 5 4; }
.fill-pos { fill: var(--pos-bar); opacity: .2; } .fill-neg { fill: var(--neg-bar); opacity: .22; }
.xh { stroke: var(--tx-3); stroke-width: 1; stroke-dasharray: 3 3; }
.pt { stroke: var(--surface); stroke-width: 2.5; }
.pt.s0 { fill: var(--s0); } .pt.s1 { fill: var(--s1); } .pt.s2 { fill: var(--s2); } .pt.s3 { fill: var(--s3); } .pt.acc { fill: var(--accent); } .pt.cap { fill: var(--tx-3); }
.bar { transition: opacity .12s; } .bar.pos { fill: var(--pos-bar); } .bar.neg { fill: var(--neg-bar); } .bar.acc { fill: var(--accent); } .bar.dim { opacity: .35; }
.bar-v { fill: var(--tx-2); font-size: 11px; font-weight: 600; text-anchor: middle; font-variant-numeric: tabular-nums; }
.tip { position: absolute; z-index: 5; pointer-events: none; min-width: 150px; max-width: 260px; background: var(--surface); color: var(--tx); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 8px 11px; font-size: 12.5px; line-height: 1.7; direction: rtl; opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s; }
.tip.on { opacity: 1; transform: none; }
.tip .t { color: var(--tx-3); font-size: 12px; margin-bottom: 2px; }
.tip .r { display: flex; justify-content: space-between; gap: 14px; align-items: center; }
.tip .r .k { display: flex; align-items: center; gap: 6px; color: var(--tx-2); }
.tip .r .k i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.lg-row { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 10px; font-size: 13px; color: var(--tx-2); }
.lg-row span { display: inline-flex; align-items: center; gap: 7px; }
.lg-row i { width: 14px; height: 4px; border-radius: 2px; display: inline-block; } .lg-row i.dash { height: 0; border-top: 2px dashed var(--tx-3); background: none; }
.lg-row i.s0 { background: var(--s0); } .lg-row i.s1 { background: var(--s1); } .lg-row i.s2 { background: var(--s2); } .lg-row i.s3 { background: var(--s3); } .lg-row i.sq { width: 10px; height: 10px; border-radius: 3px; } .lg-row i.acc { background: var(--accent); }

/* horizontal bars (html) */
.hb { display: grid; gap: 10px; }
.hb-row { display: grid; grid-template-columns: minmax(64px, 96px) 1fr auto; gap: 10px; align-items: center; font-size: 13.5px; }
.hb-track { position: relative; height: 20px; background: var(--surface-2); border-radius: 6px; overflow: hidden; }
.hb-track::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: var(--z, 0%); width: 1px; background: var(--tx-3); opacity: .6; }
.hb-fill { position: absolute; top: 3px; bottom: 3px; border-radius: 4px; transition: width .6s cubic-bezier(.2, .7, .2, 1), inset-inline-start .6s; }
.hb-fill.pos { background: var(--pos-bar); } .hb-fill.neg { background: var(--neg-bar); } .hb-fill.acc { background: var(--accent); }

/* funnel */
.funnel { display: grid; gap: 8px; }
.fn { display: grid; grid-template-columns: 1fr; gap: 3px; }
.fn-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 13.5px; gap: 8px; }
.fn-bar { height: 28px; background: var(--surface-2); border-radius: 8px; overflow: hidden; position: relative; }
.fn-bar i { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: 8px; background: var(--accent); transition: width .7s cubic-bezier(.2, .7, .2, 1); min-width: 8px; }
.fn:nth-child(1) .fn-bar i { opacity: .38; } .fn:nth-child(2) .fn-bar i { opacity: .55; } .fn:nth-child(3) .fn-bar i { opacity: .75; } .fn:nth-child(4) .fn-bar i { opacity: 1; background: var(--pos-bar); }

/* ============================================================ trade cards */
.tcards { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.tcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 16px; display: grid; gap: 12px; min-width: 0; align-content: start; position: relative; overflow: hidden; }
.tcard::before { content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 4px; background: var(--line); }
.tcard.up::before { background: var(--pos-bar); } .tcard.down::before { background: var(--neg-bar); }
.tc-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sym { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sym-name { font-size: 19px; font-weight: 800; letter-spacing: -.01em; direction: ltr; unicode-bidi: isolate; }
.st { font-size: 12.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; color: var(--tx-2); }
.st.open { color: var(--pos); } .st.pending { color: var(--warn); } .st.closed { color: var(--tx-3); }
.tc-pnl { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tc-pnl .big { font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.tc-pnl .big .unit { font-size: 12px; }
.rmult { font-weight: 700; font-size: 14px; }
.kv { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 14px; font-size: 13px; }
.kv div { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px dashed var(--line-soft); padding-bottom: 3px; min-width: 0; }
.kv dt, .kv .k { color: var(--tx-3); } .kv .v { font-weight: 600; }
.more { border-top: 1px solid var(--line-soft); padding-top: 4px; }
.more > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; color: var(--accent-strong); font-weight: 700; font-size: 13.5px; padding: 6px 0; border-radius: 8px; }
.more > summary::-webkit-details-marker { display: none; }
.more > summary .ic { transition: transform .2s; } .more[open] > summary .ic { transform: rotate(180deg); }
.detail { display: grid; gap: 12px; padding-top: 6px; animation: rise .25s ease both; }
.money { display: grid; gap: 4px; font-size: 13.5px; }
.money .row { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; }
.money .row.tot { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 7px; font-weight: 800; }
.money .row .k { color: var(--tx-2); }
.tl { position: relative; display: grid; gap: 10px; padding-inline-start: 18px; font-size: 13px; }
.tl::before { content: ""; position: absolute; inset-block: 6px; inset-inline-start: 4px; width: 2px; background: var(--line); border-radius: 2px; }
.tl .ev { position: relative; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tl .ev::before { content: ""; position: absolute; inset-inline-start: -18px; top: 8px; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--tx-3); }
.tl .ev.g::before { border-color: var(--pos-bar); background: var(--pos-bar); } .tl .ev.r::before { border-color: var(--neg-bar); background: var(--neg-bar); }
.sec-t { font-size: 12.5px; font-weight: 700; color: var(--tx-3); margin-bottom: 5px; letter-spacing: .01em; }

/* gauge */
.gauge { position: relative; height: 66px; margin-top: 4px; }
.g-track { position: absolute; inset-inline: 0; top: 30px; height: 10px; border-radius: 6px; background: var(--surface-3); overflow: hidden; }
.g-zone { position: absolute; top: 0; bottom: 0; }
.g-zone.risk { background: color-mix(in srgb, var(--neg-bar) 22%, transparent); } .g-zone.rew { background: color-mix(in srgb, var(--pos-bar) 22%, transparent); }
.g-fill { position: absolute; top: 0; bottom: 0; transition: width .6s cubic-bezier(.2, .7, .2, 1), inset-inline-start .6s cubic-bezier(.2, .7, .2, 1); }
.g-fill.pos { background: var(--pos-bar); } .g-fill.neg { background: var(--neg-bar); }
.g-tick { position: absolute; top: 24px; width: 2px; height: 22px; margin-inline-start: -1px; background: var(--tx-3); border-radius: 1px; transition: inset-inline-start .6s; }
.g-tick.sl { background: var(--neg-bar); } .g-tick.en { background: var(--tx); height: 26px; top: 22px; }
.g-tp { position: absolute; top: 31px; width: 12px; height: 12px; margin-inline-start: -6px; border-radius: 50%; background: var(--surface); border: 2px solid var(--pos-bar); }
.g-tp.done { background: var(--pos-bar); }
.g-mark { position: absolute; top: 0; transform: translateX(var(--tx-shift, 0)); margin-inline-start: 0; transition: inset-inline-start .6s cubic-bezier(.2, .7, .2, 1); }
.g-mark .bub { position: absolute; bottom: 0; transform: translateX(50%); direction: ltr; background: var(--tx); color: var(--surface); font-size: 11.5px; font-weight: 700; padding: 0 7px; border-radius: 7px; line-height: 20px; white-space: nowrap; font-variant-numeric: tabular-nums; }
[dir="rtl"] .g-mark .bub { transform: translateX(50%); }
.g-mark::after { content: ""; position: absolute; top: 21px; inset-inline-start: -1px; width: 3px; height: 28px; background: var(--tx); border-radius: 2px; }
.g-mark .bub { top: 0; bottom: auto; }
.g-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--tx-3); margin-top: 2px; }
.g-legend b { color: var(--tx-2); font-weight: 600; }

/* ============================================================ tables */
.tbl-wrap { overflow-x: auto; margin-inline: calc(var(--sp-4) * -1); padding-inline: var(--sp-4); -webkit-overflow-scrolling: touch; }
@media (min-width: 640px) { .tbl-wrap { margin-inline: -22px; padding-inline: 22px; } }
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.tbl th { text-align: start; font-weight: 700; font-size: 12.5px; color: var(--tx-3); padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--surface); position: sticky; top: 0; }
.tbl th button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; border-radius: 6px; }
.tbl th button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tbl th[aria-sort] button { color: var(--tx); }
.tbl th .arr { width: 10px; opacity: .8; }
.tbl td { padding: 10px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.tbl tbody tr.r { cursor: pointer; transition: background .12s; }
.tbl tbody tr.r:hover { background: var(--surface-2); }
.tbl tbody tr.r:focus-visible { outline-offset: -2px; }
.tbl tr.open > td { background: var(--surface-2); border-bottom-color: transparent; }
.tbl tr.dtl > td { background: var(--surface-2); padding: 4px 14px 16px; }
.tbl td.num, .tbl th.num { text-align: end; }
.tbl tr.me td { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.tbl .strat { font-weight: 600; min-width: 170px; }
.star { color: #e0a21a; display: inline-flex; vertical-align: -3px; }
.ret-bar { display: inline-block; height: 6px; border-radius: 3px; vertical-align: middle; margin-inline-start: 8px; background: var(--pos-bar); max-width: 80px; transition: width .5s; }
.ret-bar.neg { background: var(--neg-bar); }
@media (max-width: 639px) { .hide-sm { display: none; } }
@media (max-width: 899px) { .hide-md { display: none; } }

/* ============================================================ signals */
.sigs { display: grid; gap: var(--sp-3); }
.sig { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 14px 16px; display: grid; gap: 12px; scroll-margin-top: 80px; }
.sig.flash { animation: flash 1.6s ease; }
@keyframes flash { 0%, 60% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 50%, transparent); } }
.sig-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.sig-time { font-size: 12.5px; color: var(--tx-3); }
.sig-body { display: grid; gap: 10px 22px; }
@media (min-width: 760px) { .sig-body { grid-template-columns: 1.1fr 1fr; } }
.lv { display: flex; flex-wrap: wrap; gap: 6px; }
.lvl { display: inline-flex; align-items: baseline; gap: 6px; padding: 3px 10px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--line-soft); font-size: 13px; }
.lvl small { color: var(--tx-3); font-size: 11.5px; font-weight: 600; }
.lvl.sl { background: var(--neg-soft); border-color: transparent; } .lvl.sl small, .lvl.sl b { color: var(--neg); }
.lvl.en { background: var(--accent-soft); border-color: transparent; } .lvl.en small, .lvl.en b { color: var(--accent-strong); }
.lvl.tp { background: var(--pos-soft); border-color: transparent; } .lvl.tp small, .lvl.tp b { color: var(--pos); }
.decision { display: flex; gap: 11px; padding: 11px 13px; border-radius: var(--r-md); background: var(--surface-2); align-items: flex-start; }
.decision .di { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--surface-3); color: var(--tx-2); }
.decision.good { background: var(--pos-soft); } .decision.good .di { background: var(--pos-bar); color: #fff; }
.decision.warn { background: var(--warn-soft); } .decision.warn .di { background: #e0a21a; color: #fff; }
.decision.bad { background: var(--neg-soft); } .decision.bad .di { background: var(--neg-bar); color: #fff; }
.decision.info { background: var(--info-soft); } .decision.info .di { background: var(--accent); color: var(--on-accent); }
.decision b { display: block; font-size: 14px; line-height: 1.6; }
.decision .why { font-size: 13px; color: var(--tx-2); margin-top: 2px; }
.decision .why em { font-style: normal; font-weight: 700; color: var(--tx); }
.demo-bar { height: 8px; border-radius: 5px; background: var(--surface-3); overflow: hidden; margin: 6px 0 8px; }
.demo-bar i { display: block; height: 100%; background: var(--accent); border-radius: 5px; transition: width .6s; }
.gchip { display: inline-flex; gap: 6px; align-items: baseline; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; background: var(--surface-3); color: var(--tx-2); }
.gchip.full { background: var(--pos-soft); color: var(--pos); } .gchip.none { opacity: .7; }
.gchip b { font-weight: 800; }
.reason-g { padding: 8px 0; border-top: 1px dashed var(--line); }
.reason-g:first-child { border-top: 0; }
.reason-g .rt { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.mini-chips { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.mini-chips span { font-size: 12px; padding: 0 8px; background: var(--surface-3); border-radius: 6px; color: var(--tx-2); line-height: 1.8; }

/* drawer */
.scrim { position: fixed; inset: 0; background: rgb(8 12 20 / .5); z-index: 60; animation: fade .2s both; }
@keyframes fade { from { opacity: 0; } }
.drawer { position: fixed; z-index: 61; background: var(--surface); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; inset-block: 0; inset-inline-start: 0; width: min(480px, 100%); animation: slidein .28s cubic-bezier(.2, .7, .2, 1) both; border-inline-end: 1px solid var(--line); }
@keyframes slidein { from { transform: translateX(-30px); opacity: 0; } }
@media (max-width: 719px) { .drawer { inset: auto 0 0 0; width: 100%; max-height: 88vh; border-radius: 20px 20px 0 0; animation-name: sheet; } @keyframes sheet { from { transform: translateY(40px); opacity: 0; } } }
.drawer-h { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); gap: 10px; }
.drawer-b { overflow-y: auto; padding: 16px 18px calc(24px + env(safe-area-inset-bottom)); display: grid; gap: 16px; align-content: start; }
.rules { display: grid; gap: 8px; padding: 0; margin: 0; list-style: none; }
.rules li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.9; }
.rules li .ic { color: var(--accent); margin-top: 6px; }
.cond { display: inline; background: var(--accent-soft); color: var(--accent-strong); padding: 1px 8px; border-radius: 7px; font-weight: 600; font-size: 13.5px; }

/* login */
.login { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: radial-gradient(900px 500px at 80% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), radial-gradient(700px 400px at 0% 110%, color-mix(in srgb, var(--s3) 14%, transparent), transparent 70%), var(--bg); }
.login-card { width: min(400px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-lg); padding: 28px 24px 24px; display: grid; gap: 16px; }
.login-card h1 { font-size: 21px; font-weight: 800; }
.field { display: grid; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--tx-2); }
.field input { padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); font-size: 16px; direction: ltr; text-align: start; color: var(--tx); transition: border-color .15s, box-shadow .15s; }
.field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.err { color: var(--neg); font-size: 13.5px; min-height: 22px; }
.lock-note { font-size: 12.5px; color: var(--tx-3); text-align: center; }

.footer { text-align: center; color: var(--tx-3); font-size: 12px; padding: var(--sp-5) 0 0; }
.toast { position: fixed; inset-inline: 0; bottom: calc(var(--nav-h) + 16px); display: flex; justify-content: center; z-index: 70; pointer-events: none; }
.toast span { background: var(--tx); color: var(--surface); padding: 8px 16px; border-radius: 12px; font-size: 13.5px; box-shadow: var(--shadow-lg); animation: rise .25s both; }

.ins { display: grid; gap: 10px; padding: 0; margin: 0; list-style: none; }
.ins li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-2); font-size: 14.5px; line-height: 2; }
.ins li .ic { color: var(--accent); margin-top: 7px; }
.ins li.warn .ic { color: #d99a1c; }
.kvt { display: grid; gap: 0; }
.kvt > div { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
.kvt > div:last-child { border: 0; }
.kvt .k { color: var(--tx-2); } .kvt .d { color: var(--tx-3); font-size: 12.5px; display: block; }
.svc { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.svc:last-child { border: 0; }
.svc .nm { flex: 1; min-width: 0; } .svc code { font-size: 12px; color: var(--tx-3); direction: ltr; unicode-bidi: isolate; display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
@media print { .top, .bnav { display: none; } }

body.lock { overflow: hidden; }
.tip .r .k i.acc { background: var(--accent); } .tip .r .k i.cap { background: var(--tx-3); } .tip .r .k i.s0 { background: var(--s0); } .tip .r .k i.s1 { background: var(--s1); } .tip .r .k i.s2 { background: var(--s2); } .tip .r .k i.s3 { background: var(--s3); }
.feed { display: grid; gap: 2px; }
.frow { display: grid; gap: 4px; padding: 10px 12px; margin-inline: -12px; border-radius: var(--r-md); text-decoration: none; color: var(--tx); transition: background .12s; }
.frow:hover { background: var(--surface-2); }
.frow + .frow { border-top: 1px solid var(--line-soft); border-radius: 0; }
.f-top, .f-bot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.f-top .sig-time { margin-inline-start: auto; }
.fn-top .hint { margin-inline-start: 4px; }

.card.col { display: flex; flex-direction: column; }
.chart.grow { flex: 1; height: auto; min-height: 190px; }
.kv .wide { grid-column: 1 / -1; }
.card.col > .hint { margin-top: 8px; }

.dt { direction: rtl; unicode-bidi: isolate; white-space: nowrap; font-variant-numeric: tabular-nums; }
.drawer .g-tiles { grid-template-columns: repeat(2, 1fr) !important; }
@media (max-width: 479px) { .kv { grid-template-columns: 1fr; } }

@media (min-width: 900px) { .tbl tr.dtl .detail { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

@media (max-width: 639px) {
  .tbl.stack thead { display: none; }
  .tbl.stack, .tbl.stack tbody { display: block; }
  .tbl-wrap:has(.tbl.stack) { overflow: visible; }
  .tbl.stack tbody tr:not(.dtl) { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; padding: 10px 4px; border-bottom: 1px solid var(--line-soft); }
  .tbl.stack tbody tr:not(.dtl) td, .tbl.stack td.hide-sm, .tbl.stack td.hide-md { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 3px 0; border: 0; background: none; text-align: start; }
  .tbl.stack tbody tr:not(.dtl) td::before { content: attr(data-l); color: var(--tx-3); font-size: 12px; }
  .tbl.stack tr.dtl, .tbl.stack tr.dtl td { display: block; padding: 0 4px 12px; }
}
@media (max-width: 639px) { .tbl .strat { min-width: 120px; } .ret-bar { display: none; } .tbl th, .tbl td { padding: 8px 6px; } .tbl:not(.stack) th:first-child, .tbl:not(.stack) td:first-child.muted { display: none; } }

/* ---- series colours 4..8 (categorical palette slots 4-8; slot 8 is neutral gray) */
:root { --s4: #eda100; --s5: #e87ba4; --s6: #008300; --s7: #e34948; --s8: #6b7489; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --s4: #c98500; --s5: #d55181; --s6: #00a000; --s7: #e66767; --s8: #8f99ad; } }
:root[data-theme="dark"] { --s4: #c98500; --s5: #d55181; --s6: #00a000; --s7: #e66767; --s8: #8f99ad; }
.ln.s4 { stroke: var(--s4); } .ln.s5 { stroke: var(--s5); } .ln.s6 { stroke: var(--s6); } .ln.s7 { stroke: var(--s7); } .ln.s8 { stroke: var(--s8); }
.pt.s4 { fill: var(--s4); } .pt.s5 { fill: var(--s5); } .pt.s6 { fill: var(--s6); } .pt.s7 { fill: var(--s7); } .pt.s8 { fill: var(--s8); }
.wh { stroke-width: 2; opacity: .85; } .wh.s0 { stroke: var(--s0); } .wh.s1 { stroke: var(--s1); } .wh.s2 { stroke: var(--s2); } .wh.s3 { stroke: var(--s3); } .wh.s4 { stroke: var(--s4); } .wh.s5 { stroke: var(--s5); } .wh.s6 { stroke: var(--s6); } .wh.s7 { stroke: var(--s7); } .wh.s8 { stroke: var(--s8); } .wh.acc { stroke: var(--accent); }
.lg-row i.s4, .tip .r .k i.s4, .sw.s4 { background: var(--s4); } .lg-row i.s5, .tip .r .k i.s5, .sw.s5 { background: var(--s5); } .lg-row i.s6, .tip .r .k i.s6, .sw.s6 { background: var(--s6); } .lg-row i.s7, .tip .r .k i.s7, .sw.s7 { background: var(--s7); } .lg-row i.s8, .tip .r .k i.s8, .sw.s8 { background: var(--s8); }
.sw.s0 { background: var(--s0); } .sw.s1 { background: var(--s1); } .sw.s2 { background: var(--s2); } .sw.s3 { background: var(--s3); }
.sc-p { cursor: pointer; } .sc-p .pt { transition: r .12s; } .sc-p.on .pt { r: 8.5px; }
.sc-l { fill: var(--tx-2); font-size: 11px; font-weight: 600; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.spark.pos path.l { stroke: var(--pos-bar); } .spark.pos path.a { fill: color-mix(in srgb, var(--pos-bar) 14%, transparent); }
.spark.neg path.l { stroke: var(--neg-bar); } .spark.neg path.a { fill: color-mix(in srgb, var(--neg-bar) 14%, transparent); }

/* ---- free channels page */
@media (min-width: 900px) { .top .wrap { max-width: 1360px; } }
@media (min-width: 900px) and (max-width: 1399px) { .tab .ic, .live-p, .user bdi { display: none; } .tab { padding: 8px 10px; font-size: 13.5px; } .tabs { margin-inline-start: 6px; } .top-in { gap: 10px; } }
.toolbar { display: grid; gap: 10px; }
@media (min-width: 900px) { .toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } }
.dotc { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-inline-end: 8px; flex: none; background: var(--accent); }
.dotc.s0 { background: var(--s0); } .dotc.s1 { background: var(--s1); } .dotc.s2 { background: var(--s2); } .dotc.s3 { background: var(--s3); } .dotc.s4 { background: var(--s4); } .dotc.s5 { background: var(--s5); } .dotc.s6 { background: var(--s6); } .dotc.s7 { background: var(--s7); } .dotc.s8 { background: var(--s8); }
.chip .sw { width: 10px; height: 10px; border-radius: 50%; } .chip[disabled] { opacity: .45; cursor: not-allowed; } .chip[aria-pressed="false"] .sw { opacity: .35; }
.tbl.lg td.chn { min-width: 200px; line-height: 1.6; } .chlink { color: var(--tx); font-weight: 700; text-decoration: none; } .chlink:hover { color: var(--accent-strong); text-decoration: underline; }
.tbl tr.dim { opacity: .6; } .tbl td.spk { width: 120px; } .tbl td.spk .spark { margin: 0; width: 110px; height: 34px; }
a.ext { display: inline-flex; vertical-align: middle; color: var(--tx-3); padding: 2px; border-radius: 6px; } a.ext:hover { color: var(--accent-strong); background: var(--surface-3); }
.warnic { color: #d99a1c; font-weight: 700; cursor: help; }
.ciw { white-space: nowrap; } .ciw .civ { display: inline-block; min-width: 56px; margin-inline-start: 8px; font-weight: 700; } .civ.pos { color: var(--pos); } .civ.neg { color: var(--neg); }
.cib { position: relative; display: inline-block; vertical-align: middle; width: 110px; height: 14px; direction: ltr; }
.cib::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: var(--surface-3); border-radius: 2px; }
.cib .cz { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--tx-3); }
.cib .cr { position: absolute; top: 4px; height: 6px; border-radius: 3px; background: var(--tx-3); opacity: .55; } .cib .cr.pos { background: var(--pos-bar); opacity: .8; } .cib .cr.neg { background: var(--neg-bar); opacity: .8; }
.cib .cd { position: absolute; top: 2px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--tx); border: 2px solid var(--surface); }
.back { margin-bottom: 2px; } .chead h1 { font-size: 22px; font-weight: 800; display: flex; align-items: center; flex-wrap: wrap; }
.chead-top { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 10px; }
.sumtxt { font-size: 14.5px; line-height: 2.1; color: var(--tx); margin-top: 10px; }
.sec-t.gap { margin-top: 14px; }
.heat { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.hcell { display: grid; gap: 1px; padding: 8px 10px; border-radius: var(--r-md); background: var(--surface-2); text-align: start; }
.hcell.pos { background: color-mix(in srgb, var(--pos-bar) calc(var(--a, .2) * 100%), var(--surface-2)); } .hcell.neg { background: color-mix(in srgb, var(--neg-bar) calc(var(--a, .2) * 100%), var(--surface-2)); }
.hcell .hm { font-size: 12px; color: var(--tx-2); } .hcell b { font-size: 16px; line-height: 1.4; } .hcell .hn { font-size: 11px; color: var(--tx-2); }
.hb-row.g3 { grid-template-columns: minmax(56px, 90px) 1fr auto; } .hb-row.faint .hb-track { opacity: .55; } .hb-row .gv { white-space: nowrap; text-align: end; font-size: 13px; }
.tbl tr.me td { background: color-mix(in srgb, var(--accent) 7%, transparent); }
@media (max-width: 639px) {
  .tbl.stack td.full { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: wrap; }
  .tbl.stack td.full::before { display: none; }
  .tbl.stack td.spk { grid-column: 1 / -1; width: auto; } .tbl.stack td.spk .spark { width: 100%; max-width: none; }
  .tbl.stack td[data-l=""]::before { display: none; }
  .tbl.stack td.ciw { grid-column: 1 / -1; }
  .tbl.stack tbody tr:not(.dtl) { margin-bottom: 4px; }
}
.page { grid-template-columns: minmax(0, 1fr); } .page > * { min-width: 0; } .grid > * { min-width: 0; }

.tbl.lg th, .tbl.lg td { padding: 10px 6px; } .tbl.lg td.chn { min-width: 170px; } .tbl td.spk { width: 96px; } .tbl td.spk .spark { width: 90px; height: 30px; }
.cib { width: 84px; } .ciw .civ { min-width: 48px; }