/* SAHM — سهم. Dark only. Arabic RTL. A trading app's layout: portfolio first, one stock page per symbol. */
@font-face { font-family: "Readex"; src: url("/static/fonts/readex-arabic.woff2") format("woff2");
  font-weight: 160 700; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Readex"; src: url("/static/fonts/readex-latin.woff2") format("woff2");
  font-weight: 160 700; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  color-scheme: dark;
  --ground: #0a1316;            /* = the native app's ground (Sahm/Theme.swift) */
  --ground-2: #0c171b;
  --surface: #101c21;
  --surface-2: #15252b;
  --surface-3: #1b2e35;
  --line: rgba(146, 186, 198, .11);
  --line-2: rgba(146, 186, 198, .19);
  --ink: #eef4f5;
  --ink-2: #b9c9ce;
  --muted: #84a0a8;
  --faint: #5d7379;
  --sand: #e9b860;
  --sand-2: #f2c879;
  --sand-ink: #1b1305;
  --sand-soft: rgba(233, 184, 96, .14);
  --gain: #34d399;
  --gain-soft: rgba(52, 211, 153, .14);
  --loss: #ff6b6b;
  --loss-soft: rgba(255, 107, 107, .14);
  --info: #7ab8ff;
  --info-soft: rgba(122, 184, 255, .14);
  --teal: #6ed6c8;
  --r: 18px;
  --r-sm: 12px;
  --r-xs: 9px;
  --shadow: 0 12px 32px -16px rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 255, 255, .03) inset;
  --tg-inset: 0px;
  --nav-h: 60px;
  --top-h: 52px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--ground); color: var(--ink); }
html { touch-action: manipulation; }
body {
  font-family: "Readex", system-ui, -apple-system, sans-serif; font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; caret-color: var(--sand);
  overscroll-behavior-y: none;
}
::selection { background: var(--sand); color: var(--sand-ink); }
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 8px; }
:focus-visible { outline: 2px solid var(--sand); outline-offset: 2px; border-radius: 8px; }
a { color: var(--sand); text-underline-offset: 3px; }
button { font: inherit; color: inherit; }
button, .tap, nav.tabs, .chips, .seg { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.num, .tab-num { font-variant-numeric: tabular-nums lining-nums; direction: ltr; unicode-bidi: isolate; text-align: right; }
.up { color: var(--gain); } .down { color: var(--loss); } .flat { color: var(--ink-2); }
[hidden] { display: none !important; }

/* ── shell ───────────────────────────────────────────────────────────── */
.top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  min-height: calc(var(--top-h) + env(safe-area-inset-top));
  padding: calc(8px + env(safe-area-inset-top)) 16px 8px;
  background: rgba(10, 19, 22, .78);
  -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px);
  border-bottom: 1px solid transparent; transition: border-color .2s;
}
.top.scrolled { border-bottom-color: var(--line); }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 20px; letter-spacing: -.01em; }
.brand svg { width: 22px; height: 22px; color: var(--sand); flex: none; }
.brand.titled svg { display: none; }
.top .spacer { flex: 1; }
.pill {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 500;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-2);
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
.dot.on { background: var(--gain); box-shadow: 0 0 0 4px var(--gain-soft); }
.dot.warn { background: var(--sand); box-shadow: 0 0 0 4px var(--sand-soft); }
.dot.off { background: var(--loss); box-shadow: 0 0 0 4px var(--loss-soft); }

main { padding: 6px 16px calc(var(--nav-h) + max(env(safe-area-inset-bottom), var(--tg-inset)) + 22px); max-width: 760px; margin: 0 auto; }
.screen { display: none; }
.screen.active { display: block; animation: rise .4s var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

nav.tabs {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding: 6px 6px max(env(safe-area-inset-bottom), var(--tg-inset));
  background: rgba(10, 19, 22, .82);
  -webkit-backdrop-filter: saturate(1.6) blur(20px); backdrop-filter: saturate(1.6) blur(20px);
  border-top: 1px solid var(--line);
}
nav.tabs button {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 50px; border: 0; background: none; color: var(--faint);
  font-size: 10.5px; font-weight: 500; cursor: pointer; padding: 0 2px; white-space: nowrap; transition: color .2s;
}
nav.tabs button svg { width: 24px; height: 24px; transition: transform .25s var(--ease); }
nav.tabs button[aria-selected="true"] { color: var(--sand); }
nav.tabs button[aria-selected="true"] svg { transform: translateY(-1px) scale(1.06); }
nav.tabs button[aria-selected="true"]::before {
  content: ""; position: absolute; top: -6px; width: 22px; height: 3px; border-radius: 0 0 3px 3px; background: var(--sand);
}

.error-band, .offline-bar {
  display: none; margin: 8px 0 12px; padding: 11px 14px; border-radius: var(--r-sm); font-size: 13px; line-height: 1.6;
}
.error-band { background: var(--loss-soft); color: #ffd2d2; border: 1px solid rgba(255, 107, 107, .3); }
.offline-bar { background: var(--sand-soft); color: var(--sand); border: 1px solid rgba(233, 184, 96, .3); }
.error-band.show, .offline-bar.show { display: block; }
.toast {
  position: fixed; inset-inline: 16px; bottom: calc(var(--nav-h) + max(env(safe-area-inset-bottom), var(--tg-inset)) + 14px);
  z-index: 80; padding: 12px 16px; border-radius: 14px; text-align: center; font-size: 14px; font-weight: 500;
  background: rgba(27, 46, 53, .96); color: var(--ink); border: 1px solid var(--line-2); box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  opacity: 0; transform: translateY(12px) scale(.98); pointer-events: none; transition: opacity .25s ease, transform .3s var(--ease);
}
.toast.show { opacity: 1; transform: none; }

/* ── building blocks ─────────────────────────────────────────────────── */
.sec { margin: 0 0 26px; }
.sec > h2, .fold > summary { margin: 22px 2px 10px; font-size: 17px; font-weight: 650; letter-spacing: -.01em; display: flex; align-items: baseline; gap: 10px; }
.sec > h2 .aside, .fold > summary .aside { margin-inline-start: auto; font-size: 12px; font-weight: 400; color: var(--muted); }
.card, .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.card { overflow: hidden; }
.note { font-size: 12.5px; color: var(--muted); line-height: 1.75; margin: 10px 2px 0; }
.empty { padding: 20px 18px; color: var(--ink-2); font-size: 14px; line-height: 1.85; }
.empty b { color: var(--ink); font-weight: 600; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; line-height: 1.7; }
.chip.test { background: var(--info-soft); color: var(--info); }
.chip.cert { background: var(--gain-soft); color: var(--gain); }
.chip.retired, .chip.rejected { background: var(--loss-soft); color: var(--loss); }
.chip.neutral { background: var(--surface-2); color: var(--ink-2); }
.chip.g-ex { background: var(--gain-soft); color: var(--gain); }
.chip.g-good { background: rgba(110, 214, 200, .13); color: var(--teal); }
.chip.g-weak { background: var(--sand-soft); color: var(--sand); }
.chip.g-danger { background: var(--loss-soft); color: var(--loss); }
.chip.g-na { background: var(--surface-2); color: var(--muted); }
.chip.sig { background: var(--info-soft); color: var(--info); }
.chg { display: inline-flex; align-items: center; justify-content: center; min-width: 64px; padding: 3px 8px; border-radius: 8px; font-size: 12.5px; font-weight: 650; }
.chg.up { background: var(--gain-soft); } .chg.down { background: var(--loss-soft); } .chg.flat { background: var(--surface-2); }
.sym { font-weight: 700; font-size: 16px; letter-spacing: .02em; direction: ltr; unicode-bidi: isolate; }

.seg { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--ground-2); border: 1px solid var(--line); gap: 2px; }
.seg button { border: 0; background: none; padding: 7px 12px; border-radius: 9px; font-size: 13px; color: var(--ink-2); cursor: pointer; transition: background .2s, color .2s; }
.seg button[aria-pressed="true"] { background: var(--surface-3); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.wide-seg { display: flex; width: 100%; margin: 14px 0 0; }
.wide-seg button { flex: 1; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chips button { border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); padding: 7px 13px; border-radius: 999px; font-size: 13px; cursor: pointer; transition: border-color .2s, color .2s, background .2s; }
.chips button[aria-pressed="true"] { border-color: transparent; background: var(--sand); color: var(--sand-ink); font-weight: 600; }
.scroll-x { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding: 2px 16px; scroll-padding: 16px; }
.scroll-x::-webkit-scrollbar { display: none; }
.scroll-x button { flex: none; }

.skel, .skel-row, .skel-text { background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 50%, var(--surface) 100%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.skel-row { height: 64px; border-bottom: 1px solid var(--line); }
.skel-text { color: transparent !important; border-radius: 8px; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ── logo avatars ────────────────────────────────────────────────────── */
.logo { width: 42px; height: 42px; border-radius: 50%; flex: none; background-color: #fff; background-image: var(--logo-img); background-size: var(--logo-size); background-repeat: no-repeat; box-shadow: 0 0 0 1px var(--line); }
.logo.ini {
  display: grid; place-items: center; font-size: 13.5px; font-weight: 700; letter-spacing: .02em; direction: ltr;
  background-image: none; background-color: hsl(var(--h, 190) 32% 22%); color: hsl(var(--h, 190) 70% 80%);
}
.logo.lg { width: 56px; height: 56px; font-size: 17px; }

/* ── portfolio hero ──────────────────────────────────────────────────── */
.hero {
  position: relative; margin: 4px -16px 6px; padding: 14px 20px 8px;
  background: radial-gradient(120% 90% at 50% -10%, rgba(233, 184, 96, .09), transparent 62%);
}
.hero-label { font-size: 13px; color: var(--muted); font-weight: 500; }
.hero-value { font-size: 40px; font-weight: 700; letter-spacing: -.025em; line-height: 1.15; margin-top: 2px; text-align: right; display: block; }
.hero-change { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; font-size: 14px; color: var(--ink-2); min-height: 22px; }
.hero-change b { font-weight: 650; }
.hero-chart { position: relative; height: 150px; margin: 12px -6px 0; direction: ltr; }
.hero-chart .chart-msg { font-size: 12.5px; }
.hero-chart { touch-action: pan-y; cursor: crosshair; -webkit-user-select: none; user-select: none; }
.spark { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.spark-line { fill: none; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.spark-base { stroke: rgba(146, 186, 198, .35); stroke-width: 1; stroke-dasharray: 3 4; }
.spark-x { stroke: rgba(233, 184, 96, .6); stroke-width: 1; opacity: 0; }
.spark-x.on { opacity: 1; }
.spark-dot { stroke: var(--ground); stroke-width: 2.5; }
.spark-pulse { transform-box: fill-box; transform-origin: center; animation: pulse 1.8s ease-out infinite; }
@keyframes pulse { from { transform: scale(1); opacity: .55; } to { transform: scale(3.2); opacity: 0; } }
.hero-split { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.hero-split > div { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 9px 11px; }
.hero-split .k { font-size: 11.5px; color: var(--muted); }
.hero-split .v { font-size: 15px; font-weight: 650; margin-top: 1px; }

/* ── strategy cards (the road from $1,000 to $2,000) ─────────────────── */
.strat-cards { display: grid; gap: 12px; }
.scard { display: block; width: 100%; text-align: start; padding: 16px; cursor: pointer; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); transition: transform .2s var(--ease), border-color .2s; }
.scard:active { transform: scale(.985); }
.scard-head { display: flex; align-items: center; gap: 10px; }
.scard-badge { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; font-weight: 700; font-size: 13px; direction: ltr; background: var(--sand-soft); color: var(--sand); }
.scard-badge.m { background: rgba(110, 214, 200, .13); color: var(--teal); }
.scard-name { flex: 1; min-width: 0; font-weight: 600; font-size: 14.5px; line-height: 1.45; }
.scard-figs { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.scard-eq { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.scard-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.scard-stats b { color: var(--ink); font-weight: 600; }
.road { position: relative; margin-top: 12px; }
.road-track { height: 8px; border-radius: 8px; background: var(--ground-2); border: 1px solid var(--line); overflow: hidden; }
.road-fill { height: 100%; width: 0; border-radius: 8px; background: linear-gradient(270deg, rgba(233, 184, 96, .45), var(--sand)); transition: width 1.1s var(--ease); }
.road.below .road-fill { background: var(--loss); }
.road-ends { display: flex; justify-content: space-between; margin-top: 5px; font-size: 11px; color: var(--muted); }
.road.below .road-ends span:nth-child(2) { color: var(--loss); }
.road-pin { display: none; }

/* ── list rows (positions, market, trades, settings) ─────────────────── */
.list { padding: 0; }
.rows { margin: 0; padding: 0; list-style: none; }
.row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.row + .row, .rows > li + li > .row { border-top: 1px solid var(--line); }
.row .grow { flex: 1; min-width: 0; }
.row .sub { font-size: 12.5px; color: var(--muted); line-height: 1.55; }
.row .end { text-align: end; flex: none; white-space: nowrap; }
.prow { display: flex; width: 100%; align-items: center; gap: 12px; padding: 12px 16px; border: 0; background: none; text-align: start; cursor: pointer; transition: background .15s; }
.prow + .prow { border-top: 1px solid var(--line); }
.prow:active, .an-row:active { background: var(--surface-2); }
.prow .grow { flex: 1; min-width: 0; }
.prow .t1 { display: flex; align-items: center; gap: 8px; }
.prow .t2 { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.prow .end { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.prow .px { font-weight: 650; font-size: 15px; }
.acc-tag { font-size: 11px; font-weight: 650; color: var(--muted); background: var(--surface-2); border-radius: 6px; padding: 0 6px; direction: ltr; }
.chev { color: var(--faint); font-size: 18px; flex: none; }

/* ── today timeline ──────────────────────────────────────────────────── */
.steps { list-style: none; margin: 0; padding: 8px 0; }
.step { display: grid; grid-template-columns: 62px 22px 1fr; align-items: start; gap: 2px 8px; padding: 9px 16px; }
.step time { font-size: 12.5px; color: var(--ink-2); padding-top: 1px; }
.step .mark { width: 12px; height: 12px; margin: 5px auto 0; border-radius: 50%; border: 2px solid var(--line-2); background: var(--ground); }
.step.done .mark { background: var(--sand); border-color: var(--sand); }
.step.now .mark { border-color: var(--sand); box-shadow: 0 0 0 4px var(--sand-soft); }
.step .what { font-size: 14px; font-weight: 500; }
.step .detail { font-size: 12.5px; color: var(--muted); grid-column: 3; line-height: 1.6; }

/* ── market (analysis list) ──────────────────────────────────────────── */
.search { position: relative; margin: 6px 0 12px; }
.search svg { position: absolute; inset-inline-start: 14px; top: 50%; width: 19px; height: 19px; margin-top: -9.5px; color: var(--muted); pointer-events: none; }
.search input {
  width: 100%; height: 46px; padding: 0 44px 0 14px; border-radius: 14px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 15px; outline: none; transition: border-color .2s;
}
.search input:focus { border-color: var(--sand); }
.search input::placeholder { color: var(--faint); }
.list-meta { font-size: 12px; color: var(--muted); margin: 12px 2px 8px; }
.an-filter button { display: inline-flex; align-items: center; gap: 6px; }
.an-filter button .num { color: var(--muted); font-size: 12px; }
.an-filter button[aria-pressed="true"] .num { color: var(--sand-ink); opacity: .7; }
.an-row { display: flex; width: 100%; gap: 12px; padding: 12px 16px; text-align: start; border: 0; background: none; cursor: pointer; align-items: flex-start; transition: background .15s; }
.rows > li + li > .an-row { border-top: 1px solid var(--line); }
.an-row .grow { flex: 1; min-width: 0; }
.an-row .t1 { display: flex; align-items: center; gap: 8px; }
.an-row .t2 { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-row .tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.an-row .end { flex: none; white-space: nowrap; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.rank { font-size: 11.5px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; direction: ltr; }
.rank.in10 { color: var(--gain); font-weight: 650; }
.an-row .why { font-size: 12px; color: var(--muted); margin-top: 5px; line-height: 1.6; }
.an-figs { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 12px; color: var(--muted); margin-top: 5px; }
.an-figs b { font-weight: 600; color: var(--ink-2); }
.an-more { display: block; width: 100%; padding: 14px; border: 0; border-top: 1px solid var(--line); background: none; color: var(--sand); cursor: pointer; font-size: 14px; font-weight: 500; }

/* ── stock page ──────────────────────────────────────────────────────── */
.page { position: fixed; inset: 0; z-index: 50; background: var(--ground); display: flex; flex-direction: column; animation: slideIn .32s var(--ease); }
.page.closing { animation: slideOut .24s ease forwards; }
@keyframes slideIn { from { transform: translateX(-24%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes slideOut { to { transform: translateX(-16%); opacity: 0; } }
.page-bar {
  flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
  padding: calc(6px + env(safe-area-inset-top)) 10px 6px; min-height: calc(var(--top-h) + env(safe-area-inset-top));
  background: rgba(10, 19, 22, .86); -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px);
  border-bottom: 1px solid var(--line);
}
.back { display: inline-flex; align-items: center; gap: 2px; justify-self: start; border: 0; background: none; color: var(--sand); font-size: 16px; font-weight: 500; padding: 8px 6px; cursor: pointer; }
.back svg { width: 22px; height: 22px; }
.back.ghost { visibility: hidden; }
.page-title { font-weight: 700; font-size: 16px; direction: ltr; }
.page-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 14px 16px calc(28px + env(safe-area-inset-bottom)); }
.page-body > * { max-width: 760px; margin-inline: auto; }
.sp-head { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: center; }
.sp-head .logo { grid-row: span 2; }
.sp-head .names { min-width: 0; }
.sp-head .names .sym { font-size: 22px; display: block; text-align: right; }
.sp-head .names .co { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-price { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.sp-price .px { font-size: 34px; font-weight: 700; letter-spacing: -.02em; }
.sp-price .when { font-size: 12px; color: var(--muted); }
.sp-tags { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.tf-seg { display: flex; width: 100%; margin: 16px 0 10px; }
.tf-seg button { flex: 1; }
.chart-card { overflow: hidden; }
.chart-box { height: 420px; position: relative; direction: ltr; }
#stock-page .chart-box { height: 300px; }
.chart-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 10px 14px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); }
.chart-msg { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 13.5px; text-align: center; padding: 20px; z-index: 2; pointer-events: none; }
.pos-card { margin-top: 14px; padding: 16px; }
.pos-card h3 { margin: 0 0 10px; font-size: 15px; font-weight: 650; display: flex; align-items: center; gap: 8px; }
.pos-figs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 14px; }
.pos-figs .k { font-size: 11.5px; color: var(--muted); }
.pos-figs .v { font-size: 16px; font-weight: 650; margin-top: 1px; }
.pos-notes { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--muted); margin-top: 10px; line-height: 1.6; }
.sp-analysis { margin-top: 14px; padding: 16px; }
.sp-h { margin: 0 0 4px; font-size: 16px; font-weight: 650; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sp-h .src { font-size: 12px; font-weight: 400; color: var(--muted); }
.pos-card .note { margin-top: 10px; }
.pos-figs .k.num { text-align: right; }
#stock-page .sheet-head .sym, #stock-page .sheet-close, #stock-page [data-chart] { display: none; }

/* meters inside the position card */
.meter { position: relative; height: 32px; margin-top: 14px; direction: ltr; }
.meter-bar { position: absolute; left: 0; right: 0; top: 14px; height: 8px; border-radius: 8px; background: linear-gradient(90deg, var(--loss-soft), var(--surface-2) 45%, var(--gain-soft)); border: 1px solid var(--line); }
.meter-tick { position: absolute; top: 9px; width: 2px; height: 18px; background: var(--line-2); }
.meter-tick.entry { background: var(--ink-2); }
.meter-tick.stop { background: var(--loss); }
.meter-tick.tgt { background: var(--gain); }
.meter-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.meter-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-inline-end: 5px; vertical-align: 1px; }
.lg-stop { background: var(--loss); } .lg-entry { background: var(--ink-2); } .lg-now { background: var(--sand); } .lg-tgt { background: var(--gain); }
.meter-now { position: absolute; top: 8px; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: var(--sand); border: 3px solid var(--ground); box-shadow: 0 2px 10px rgba(0, 0, 0, .5); transition: left .9s var(--ease); }
.gates { margin-top: 12px; display: grid; gap: 10px; }
.gate { display: grid; grid-template-columns: 1fr auto; gap: 5px 10px; font-size: 13px; line-height: 1.6; }
.gate .bar { grid-column: 1 / -1; height: 6px; border-radius: 6px; background: var(--ground-2); overflow: hidden; direction: ltr; }
.gate .bar i { display: block; height: 100%; border-radius: 6px; background: var(--info); }
.gate.ok .bar i { background: var(--gain); }

/* ── analysis detail ─────────────────────────────────────────────────── */
.sheet-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sheet-head .sym { font-size: 22px; }
.sheet-close { margin-inline-start: auto; border: 1px solid var(--line-2); background: var(--surface-2); border-radius: 10px; padding: 6px 12px; cursor: pointer; color: var(--ink-2); }
.an-block { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.an-block h4 { margin: 0 0 10px; font-size: 14.5px; font-weight: 650; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.an-block h4 .src { font-size: 11.5px; font-weight: 400; color: var(--muted); }
.big { font-size: 28px; font-weight: 700; letter-spacing: -.02em; }
.kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1px; margin-top: 12px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.kv > div { background: var(--ground-2); padding: 10px 12px; }
.kv .k { font-size: 11.5px; color: var(--muted); }
.kv .v { font-size: 16px; font-weight: 650; margin-top: 2px; }
.chk { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.chk li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; font-size: 13.5px; color: var(--ink-2); padding: 6px 0; line-height: 1.6; }
.chk li + li { border-top: 1px dashed var(--line); }
.chk .m { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; font-size: 12px; font-weight: 700; margin-top: 1px; }
.chk .m.ok { background: var(--gain-soft); color: var(--gain); }
.chk .m.no { background: var(--loss-soft); color: var(--loss); }
.chk .m.na { background: var(--surface-2); color: var(--muted); }
.reasons { margin: 12px 0 0; padding: 0 18px 0 0; font-size: 13.5px; line-height: 1.85; }
.reasons.bad li { color: #ffb8b8; }
.reasons li::marker { color: var(--sand); }

/* ── strategies, lessons, lab ────────────────────────────────────────── */
#strats { display: grid; gap: 14px; }
.strat { padding: 18px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.strat h3 { margin: 0; font-size: 16px; font-weight: 650; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; line-height: 1.5; }
.rules { margin: 12px 0 0; padding: 0 18px 0 0; font-size: 13.5px; line-height: 1.85; color: var(--ink-2); }
.rules li::marker { color: var(--sand); }
.label-hist { display: inline-block; margin-top: 16px; font-size: 12.5px; font-weight: 600; color: var(--info); }
.strat h3 .scard-badge { width: 34px; height: 34px; border-radius: 10px; font-size: 12.5px; }
.strat .gate > span:first-child { color: var(--ink-2); }
.fold-in { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 4px; }
.fold-in > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; padding: 10px 0; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.fold-in > summary::-webkit-details-marker { display: none; }
.fold-in > summary::after { content: "‹"; margin-inline-start: auto; color: var(--muted); font-size: 20px; line-height: 1; transition: transform .25s var(--ease); }
.fold-in[open] > summary::after { transform: rotate(-90deg); }
.fold-in .rules { margin-top: 2px; }
#lessons { padding: 14px 0 6px; }
#lessons > .note, #lessons > h4 { padding: 0 16px; }
.fold > summary { cursor: pointer; list-style: none; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after { content: "‹"; color: var(--muted); font-size: 20px; line-height: 1; transition: transform .25s var(--ease); margin-inline-start: 6px; }
.fold[open] > summary::after { transform: rotate(-90deg); }
.fold > summary .aside { margin-inline-start: auto; }
.lab-round { margin-top: 10px; }
.lab-round > summary { display: flex; align-items: center; gap: 10px; padding: 14px 16px; cursor: pointer; list-style: none; font-weight: 600; font-size: 14px; line-height: 1.55; }
.lab-round > summary > span:first-child { flex: 1; min-width: 0; }
.lab-round > summary .chip { flex: none; }
.lab-round > summary::-webkit-details-marker { display: none; }
.lab-round > summary::after { content: "‹"; color: var(--muted); font-size: 20px; transition: transform .25s var(--ease); }
.lab-round[open] > summary::after { transform: rotate(-90deg); }
.lab-round > .card, .lab-round > .rows { border-top: 1px solid var(--line); }
.lab-round > .rows .row { align-items: flex-start; }
.lab-round .note { padding: 0 16px 14px; }

/* ── trades ──────────────────────────────────────────────────────────── */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 8px; }
.stat-row > div { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 10px; text-align: center; }
.stat-row .k { font-size: 11px; color: var(--muted); }
.stat-row .v { font-size: 16px; font-weight: 700; margin-top: 2px; text-align: center; }
.prow.trow .t2 { white-space: normal; line-height: 1.6; }
.prow .end .acc-tag { align-self: flex-end; }
.row .t1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#orders .row, #days .row { align-items: flex-start; }
.ord-status { margin-top: 4px; }

/* ── more: settings ──────────────────────────────────────────────────── */
.settings .set { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 12px 16px; border: 0; background: none; text-align: start; font-size: 15px; color: var(--ink); }
.settings .set + .set { border-top: 1px solid var(--line); }
.settings .set > span:first-child { flex: 1; }
.settings .set-v { color: var(--muted); font-size: 13.5px; }
.settings .tap { cursor: pointer; }
.settings .tap:active { background: var(--surface-2); }
.switch { -webkit-appearance: none; appearance: none; flex: none; position: relative; width: 51px; height: 31px; margin: 0; border-radius: 31px; background: var(--surface-3); cursor: pointer; transition: background .25s; }
.switch::after { content: ""; position: absolute; top: 2px; right: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .4); transition: transform .25s var(--ease); }
.switch:checked { background: var(--gain); }
.switch:checked::after { transform: translateX(-20px); }
.switch:disabled { opacity: .45; }
.about { margin-top: 30px; }

/* ── sheets (admin panel) ────────────────────────────────────────────── */
.sheet[hidden] { display: none; }
.sheet { position: fixed; inset: 0; z-index: 60; background: rgba(3, 8, 10, .62); display: flex; align-items: flex-end; justify-content: center; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.sheet-body { width: 100%; max-width: 760px; max-height: 90vh; overflow: auto; border-radius: 22px 22px 0 0; padding: 18px 16px calc(20px + env(safe-area-inset-bottom)); animation: sheetUp .38s var(--ease); background: var(--surface); }
.sheet-body::before { content: ""; display: block; width: 38px; height: 5px; border-radius: 5px; background: var(--line-2); margin: -8px auto 12px; }
@keyframes sheetUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── tables (desktop dashboard) ──────────────────────────────────────── */
.tbl-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 10px 12px; text-align: start; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { color: var(--muted); font-weight: 500; font-size: 12px; position: sticky; top: 0; background: var(--surface); }
td.wrap { white-space: normal; min-width: 180px; }
.chart-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.chart-tools input { width: 120px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--ground-2); color: var(--ink); font: inherit; font-size: 14px; direction: ltr; text-transform: uppercase; }

/* legacy blocks still drawn on the desktop dashboard */
.ledger { overflow: hidden; }
.pos { padding: 14px 16px; }
.pos + .pos { border-top: 1px solid var(--line); }
.pos-head { display: flex; align-items: baseline; gap: 10px; }
.pos-head .spacer { flex: 1; }
.pos-foot { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--ink-2); margin-top: 6px; }

/* ── desktop dashboard ───────────────────────────────────────────────── */
body.desk main { max-width: 1680px; padding: 18px 22px 40px; }
body.desk nav.tabs { display: none; }
body.desk .screen { display: block; animation: none; }
body.desk .grid { display: grid; grid-template-columns: minmax(330px, 380px) minmax(0, 1fr) minmax(300px, 360px); gap: 20px; align-items: start; }
body.desk .chart-box { height: 520px; }
body.desk .wide { margin-top: 8px; }
body.desk .two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
body.desk .an-desk { margin-top: 8px; }
body.desk .an-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 520px); gap: 20px; align-items: start; }
body.desk .sheet { position: static; background: none; display: block; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.desk .sheet-body { max-height: 720px; border-radius: var(--r); animation: none; }
body.desk .sheet-body::before { display: none; }
body.desk .sheet-close { display: none; }
@media (max-width: 1200px) { body.desk .grid { grid-template-columns: 1fr 1fr; } body.desk .two { grid-template-columns: 1fr; } }
@media (max-width: 1000px) { body.desk .an-cols { grid-template-columns: 1fr; } }
@media (max-width: 800px) { body.desk .grid { grid-template-columns: 1fr; } }

.gate-screen { min-height: 70vh; display: grid; place-items: center; text-align: center; padding: 30px; }
.gate-screen h1 { font-size: 22px; margin: 14px 0 8px; }
.gate-screen p { color: var(--ink-2); max-width: 420px; line-height: 1.8; }

@media (min-width: 700px) {
  .strat-cards { grid-template-columns: 1fr 1fr; }
  .hero { margin-inline: 0; border-radius: var(--r); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ── header: المزيد moved to a gear (five tabs: المحفظة · السوق · الأخبار · المختبر · الصفقات) ── */
.gear { flex: none; display: grid; place-items: center; width: 36px; height: 36px; margin-inline-start: 8px; border: 1px solid var(--line);
  border-radius: 11px; background: var(--surface); color: var(--ink-2); cursor: pointer; transition: color .2s, border-color .2s; }
.gear svg { width: 19px; height: 19px; }
.gear:active { color: var(--sand); border-color: var(--line-2); }

/* ── home: one account at a time ── */
.acc-switch { display: flex; gap: 8px; margin-top: 14px; }
.acc-btn { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 86px; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink-2); cursor: pointer; text-align: start;
  transition: border-color .2s, background .2s; }
.acc-btn.on { border-color: rgba(233, 184, 96, .55); background: linear-gradient(180deg, var(--sand-soft), transparent 140%); color: var(--ink); }
.acc-id { font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; direction: ltr; }
.acc-btn.real .acc-id { direction: rtl; }
.acc-kind { font-style: normal; font-size: 10px; font-weight: 600; color: var(--info); background: var(--info-soft); padding: 0 6px; border-radius: 999px; direction: rtl; }
.acc-v { font-size: 12.5px; }
.acc-v.test { color: var(--info); } .acc-v.rejected { color: var(--loss); } .acc-v.neutral { color: var(--muted); }
#hero-road .road { margin-top: 12px; }
.diag { padding: 12px 16px 14px; }
.diag-head { display: flex; align-items: center; gap: 8px; }
.diag-id { font-size: 12px; color: var(--muted); direction: ltr; }
.diag .reasons { margin-top: 8px; }
.diag-v { font-size: 13.5px !important; font-weight: 600; line-height: 1.6; }

/* ── trade plan ── */
.plan-mini { margin-top: 5px; font-size: 12px; color: var(--ink-2); line-height: 1.6; }
.plan-mini .dot-sep { color: var(--faint); margin: 0 6px; }
.sig-t { color: var(--info); font-weight: 650; }
.plan-card { padding: 14px 16px 12px; margin-top: 12px; }
.pl-block { margin-top: 10px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--ground-2); border: 1px solid var(--line); }
.pl-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.pl-head b { font-size: 14px; }
.pl-tag { font-size: 11.5px; color: var(--muted); }
.pl-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-top: 1px dashed var(--line); font-size: 13px; }
.pl-row:first-of-type { border-top: 0; }
.pl-k { flex: none; color: var(--muted); min-width: 86px; }
.pl-v { text-align: end; line-height: 1.6; }
.pl-sub { display: inline-block; font-size: 11.5px; color: var(--muted); }
.pl-entry .pl-v .num:first-child, .pl-entry .pl-v > .num { color: var(--info); font-weight: 650; }
.pl-stop .pl-v > .num:first-child { color: var(--loss); font-weight: 650; }
.pl-exit .pl-v > .num:first-child { color: var(--gain); font-weight: 650; }
.pl-why { margin: 4px 0 2px; font-size: 12.5px; color: var(--ink-2); line-height: 1.7; }

/* ── news ── */
.nlist .nrow { padding: 12px 16px; }
.nlist .nrow + .nrow { border-top: 1px solid var(--line); }
.n-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); }
.imp { letter-spacing: 1px; font-size: 8px; color: var(--sand); direction: ltr; }
.imp i { font-style: normal; color: var(--surface-3); }
.n-src { margin-inline-start: auto; }
.n-title { display: block; width: 100%; margin-top: 6px; padding: 0; border: 0; background: none; color: var(--ink); text-align: start;
  font: inherit; font-size: 14.5px; font-weight: 600; line-height: 1.65; cursor: pointer; }
.n-why { margin-top: 3px; font-size: 12.5px; color: var(--ink-2); line-height: 1.6; }
.n-tk { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tk { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2);
  color: var(--ink-2); font-size: 11.5px; font-weight: 600; cursor: pointer; }
.tk.held { border-color: rgba(233, 184, 96, .5); color: var(--sand); }
.tk.top { border-color: rgba(110, 214, 200, .45); color: var(--teal); }
.tk i { font-style: normal; } .tk i.ok { color: var(--gain); } .tk i.no { color: var(--loss); }
.tk-n { font-size: 10.5px; font-weight: 500; color: var(--muted); }

/* ── backtests ── */
.bt-stats { grid-template-columns: repeat(4, 1fr); margin-top: 14px; }
.bt-stats .k { min-height: 2.6em; display: grid; place-items: center; line-height: 1.3; }
.bt-final { padding: 12px 14px 12px; margin-top: 10px; }
.bt-final-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bt-final-head b { font-size: 14px; font-weight: 650; }
.bt-spark { display: block; width: 100%; height: 70px; margin-top: 10px; direction: ltr; }
.bt-spark .spark-base { stroke: var(--line-2); stroke-dasharray: 3 4; }
.gate-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.gate-chip { font-size: 11px; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); }
.gate-chip.ok { color: var(--gain); } .gate-chip.no { color: var(--loss); }
.bt-top .row { align-items: flex-start; }
.bt-rank { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: var(--surface-2); font-size: 12px; font-weight: 700; color: var(--ink-2); }
.bt-top .row:first-child .bt-rank { background: var(--sand-soft); color: var(--sand); }
.bt-var { color: var(--ink-2) !important; }

/* ── the real account ── */
.real-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px 10px; }
.real-head .sub { font-size: 12px; color: var(--muted); }
.real-logo { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: rgba(110, 214, 200, .13);
  color: var(--teal); font-weight: 800; font-size: 18px; }

/* v3 review fixes */
.zone { white-space: nowrap; }
.pm-cond { color: var(--muted); }
.bt-sub { margin: 12px 2px 6px; font-size: 12px; color: var(--muted); }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tiles > div { padding: 8px 6px; border-radius: var(--r-sm); background: var(--ground-2); border: 1px solid var(--line); text-align: center; }
.tiles .k { font-size: 11px; color: var(--muted); }
.tiles .v { font-size: 15px; font-weight: 700; margin-top: 2px; text-align: center; }
.tiles .v.up { color: var(--gain); } .tiles .v.down { color: var(--loss); }
.an-row { flex-wrap: wrap; }
.an-row > .plan-mini { flex: 0 0 100%; margin-top: 2px; }
.pm-cells { display: flex; gap: 6px; flex-wrap: wrap; }
.pm-cells > span { display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 8px; border-radius: 8px; background: var(--surface-2); white-space: nowrap; }
.pm-cells i { font-style: normal; font-size: 11px; color: var(--muted); }
.pm-cells > span:nth-child(1) .num { color: var(--info); }
.pm-cells > span:nth-child(2) .num { color: var(--loss); }
.pm-cells > span:nth-child(3) .num { color: var(--gain); }
.pm-cond, .pm-fast { font-size: 11.5px; color: var(--muted); margin-bottom: 4px; }
.pm-fast { color: var(--ink-2); }
body.desk .strat-cards { grid-template-columns: 1fr; }   /* the dashboard's first column is <= 380px: one card per row */
.sup { padding: 12px 16px; }
.sup summary { cursor: pointer; font-weight: 600; line-height: 1.7; list-style: none; }
.sup summary::-webkit-details-marker { display: none; }
.sup-body p { margin: 8px 0 0; font-size: 13px; color: var(--ink-2); line-height: 1.8; }
.prow .t2.who, .t2.who { direction: ltr; unicode-bidi: isolate; text-align: right; white-space: normal; overflow: visible; text-overflow: clip; }
/* ── round 15: market regime card (lab → اليومية) ── */
.regime-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px 4px; }
.regime-card > .note { padding: 0 14px 12px; margin: 0; }
.regime-head .k { font-size: 11px; color: var(--muted); }
.regime-score { font-size: 20px; font-weight: 700; margin-top: 2px; }
.regime-row { display: flex; align-items: flex-start; gap: 8px; }
.chip.fear { background: rgba(255, 107, 107, .14); color: var(--loss); }
/* ── free live chart (TradingView widget) beside our own chart with trade marks ── */
.chart-box[hidden] { display: none !important; }
.tv-box .tradingview-widget-copyright { font-size: 10px; text-align: center; padding-top: 4px; }
.tv-box .tradingview-widget-copyright a { color: var(--muted); text-decoration: none; }
.chart-meta .mk-row { flex-basis: 100%; }
.mk-buy { color: #e9b860; } .mk-sell { color: #34d399; } .mk-stop { color: #ff6b6b; }
.tv-toggle { margin-inline-start: auto; background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 12px; cursor: pointer; }
/* ── each strategy's trades on a chart (المختبر) + the hourly check line ── */
.sc { margin: 14px 0 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.sc-title { font-size: 13.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 8px; }
.sc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.sc-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 12.5px; cursor: pointer; }
.sc-chip small { color: var(--muted); font-size: 11px; }
.sc-chip.open small { color: var(--gain); }
.sc-chip[aria-selected="true"] { border-color: var(--sand); background: var(--sand-soft); }
.sc-box { height: 230px; position: relative; direction: ltr; border-radius: var(--r-sm); overflow: hidden; background: var(--ground-2); }
.sc-box[hidden] { display: none; }
.sc-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin-top: 8px; font-size: 12.5px; line-height: 1.75; color: var(--ink-2); }
.sc-legend .mk-row { flex-basis: 100%; }
.sc-rules { margin: 8px 0 0; line-height: 1.8; }
.sup-hourly { margin: 8px 2px 0; }
.sc-legend .num, .sc-legend bdi, .sc-rules bdi { white-space: nowrap; }
.sc-rules .nw { white-space: nowrap; }
/* ── server health (حالة المحرك والسيرفر) ── */
.srv { margin-top: 14px; }
.srv-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 13.5px; color: var(--ink-2); }
.srv-h .src { color: var(--muted); font-size: 11.5px; }
.srv .kv { margin-top: 8px; }
.srv-bar { height: 4px; margin-top: 6px; background: var(--surface-3); border-radius: 999px; overflow: hidden; direction: ltr; }
.srv-bar i { display: block; height: 100%; background: var(--gain); border-radius: 999px; }
.srv-bar.warm i { background: var(--sand); }
.srv-bar.hot i { background: var(--loss); }
.srv-svc { margin: 8px 2px 0; }
/* ── site activation box (gate) + admin code ── */
.act-form { display: flex; gap: 8px; justify-content: center; margin: 16px auto 6px; max-width: 320px; }
.act-form input { flex: 1; min-width: 0; text-align: center; font-size: 20px; letter-spacing: .25em; padding: 10px 12px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink); font-family: inherit; }
.act-form input:focus { outline: 2px solid var(--sand); outline-offset: 1px; }
.act-form .pill { cursor: pointer; padding-inline: 18px; }
.webcode { display: flex; align-items: baseline; gap: 12px; margin-top: 10px; }
.webcode b { font-size: 28px; letter-spacing: .12em; color: var(--sand); }
/* ── analysis live state ── */
.an-live { display: inline-flex; align-items: center; gap: 6px; color: var(--gain); font-weight: 600; }
.an-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--gain); box-shadow: 0 0 0 0 rgba(52, 211, 153, .6); animation: an-pulse 1.8s infinite; }
.an-live.off { color: var(--muted); font-weight: 400; }
@keyframes an-pulse { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .55); } 70% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } }
@media (prefers-reduced-motion: reduce) { .an-live i { animation: none; } }
.srv-url { margin-top: 2px; font-size: 11.5px; color: var(--faint); overflow-wrap: anywhere; text-align: start; }
#act-msg.down { color: var(--loss); }
/* live chart badge (reuses .an-live) */
#chart-live:empty { display: none; }
.chart-meta #chart-live { flex-basis: 100%; }