/* SouqView · سوق ڤيو: a neon trading terminal at night in the souq.
   Glow is used for meaning only: the brand, the live dot, price moves and news. Everything at rest is crisp. */
:root, [data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0e14;
  --panel: rgba(19, 23, 34, .82); /* no backdrop blur on panels: a re-blur per frame over the aurora bought almost nothing */
  --panel-solid: #131722;
  --bar: rgba(13, 17, 26, .76);
  --panel-2: rgba(255, 255, 255, .035);
  --track: rgba(255, 255, 255, .035);
  --hover: rgba(255, 255, 255, .05);
  --line: rgba(148, 163, 184, .13);
  --line-2: rgba(148, 163, 184, .22);
  --hi: rgba(255, 255, 255, .055);
  --text: #d1d4dc;
  --text-strong: #f1f4f9;
  --muted: #8a91a3;
  --up: #19e6a0;
  --down: #ff5470;
  --up-c: #19e6a0;
  --down-c: #ff5470;
  --up-soft: rgba(25, 230, 160, .12);
  --down-soft: rgba(255, 84, 112, .12);
  --up-glow: rgba(25, 230, 160, .55);
  --down-glow: rgba(255, 84, 112, .55);
  --flat-glow: rgba(34, 211, 238, .5);
  --accent: #22d3ee;
  --accent-2: #2962ff;
  --accent-soft: rgba(34, 211, 238, .11);
  --accent-glow: rgba(34, 211, 238, .42);
  --ind-bg: linear-gradient(180deg, rgba(34, 211, 238, .2), rgba(41, 98, 255, .13));
  --ind-ring: rgba(34, 211, 238, .38);
  --grad: linear-gradient(90deg, #19e6a0, #22d3ee 55%, #2962ff);
  --grad-2: linear-gradient(90deg, #19e6a0, #22d3ee);
  --grad-v: linear-gradient(180deg, #19e6a0, #22d3ee 60%, #2962ff);
  --breaking-glow: rgba(255, 84, 112, .55); /* one red in the system: the coral of a falling price */
  --brk-bg: rgba(255, 84, 112, .12);
  --brk-ink: #ff8a9b;
  --brk-line: rgba(255, 84, 112, .35);
  --brk-dot: #ff5470;
  --brk-hot: #e23a58;
  --sk: rgba(148, 163, 184, .09);
  --sk-hi: rgba(255, 255, 255, .07);
  --ink: #f1f4f9;
  --shadow: 0 14px 34px -16px rgba(0, 0, 0, .75);
  --au1: rgba(25, 230, 160, .13);
  --au2: rgba(34, 211, 238, .10);
  --au3: rgba(41, 98, 255, .14);
  --grid: rgba(148, 163, 184, .05);
}
[data-theme="light"] {
  color-scheme: light;
  --bg: #eef2f7;
  --panel: rgba(255, 255, 255, .88);
  --panel-solid: #ffffff;
  --bar: rgba(255, 255, 255, .8);
  --panel-2: rgba(15, 23, 42, .035);
  --track: rgba(15, 23, 42, .04);
  --hover: rgba(15, 23, 42, .045);
  --line: rgba(15, 23, 42, .1);
  --line-2: rgba(15, 23, 42, .16);
  --hi: rgba(255, 255, 255, .95);
  --text: #2a2e39;
  --text-strong: #0b0e14;
  --muted: #5d6475;
  --up: #047857;
  --down: #c8243f;
  --up-c: #0aa874;
  --down-c: #e5354f;
  --up-soft: rgba(10, 168, 116, .1);
  --down-soft: rgba(229, 53, 79, .09);
  --up-glow: rgba(10, 168, 116, .26);
  --down-glow: rgba(229, 53, 79, .24);
  --flat-glow: rgba(8, 145, 178, .24);
  --accent: #0e7490;
  --accent-soft: rgba(8, 145, 178, .09);
  --accent-glow: rgba(8, 145, 178, .2);
  --ind-bg: linear-gradient(180deg, #ffffff, #f3f8fb);
  --ind-ring: rgba(8, 145, 178, .3);
  --grad: linear-gradient(90deg, #0aa874, #0891b2 55%, #2962ff);
  --grad-2: linear-gradient(90deg, #0aa874, #0891b2);
  --grad-v: linear-gradient(180deg, #0aa874, #0891b2 60%, #2962ff);
  --breaking-glow: rgba(229, 53, 79, .28);
  --brk-bg: rgba(229, 53, 79, .08);
  --brk-ink: #c8243f;
  --brk-line: rgba(229, 53, 79, .3);
  --brk-dot: #e5354f;
  --brk-hot: #d42f4f;
  --sk: rgba(15, 23, 42, .07);
  --sk-hi: rgba(255, 255, 255, .7);
  --ink: #0b0e14;
  --shadow: 0 12px 30px -18px rgba(15, 23, 42, .35);
  --au1: rgba(10, 168, 116, .09);
  --au2: rgba(8, 145, 178, .08);
  --au3: rgba(41, 98, 255, .08);
  --grid: rgba(15, 23, 42, .025); /* fainter: at .045 it read as graph paper behind the hero */
}
/* ---------- design tokens: the one spacing scale, radius scale, type scale and icon spec every component uses ----------
   Spacing 4/8: --sp-1 4 · --sp-2 8 · --sp-3 12 · --sp-4 16 · --sp-5 20 · --sp-6 24 · --sp-8 32
   Radius: --r-xs 4 (tags) · --r-sm 6 (chips) · --r-md 8 (segments, inputs) · --r-lg 12 (cards, toasts) · --r-xl 16 (sheets) · --r-pill
   Type (Readex Pro, weights 400 / 500 / 600 only): --fs-2xs 10 (tags) · --fs-xs 11 (labels) · --fs-sm 12 (meta) · --fs-md 13 (body)
     --fs-base 14 (phone body) · --fs-lg 15 (row titles) · --fs-xl 17 (headings) · --fs-2xl 20 (results) · --fs-3xl 30 (legend price) · --fs-hero 36
   Icons: one outline set, 24-unit grid, stroke 1.75, round caps, drawn at 20 px (22 px in the phone tab bar). Tap targets 44 px on phones. */
:root {
  --font: "Readex Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-latin: var(--font);
  --font-ar: var(--font);
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 20px; --r-pill: 999px;
  --fs-2xs: 10px; --fs-xs: 11px; --fs-sm: 12px; --fs-md: 13px; --fs-base: 14px; --fs-lg: 15px; --fs-xl: 17px; --fs-2xl: 20px; --fs-3xl: 30px; --fs-hero: 36px;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600;
  --icon: 20px; --icon-tab: 22px; --icon-stroke: 1.75;
  --tap: 44px;
  --topbar-h: 54px;
  --tk-h: 34px;
  --tabbar-h: 60px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.3, 1.25, .4, 1);
  --slide: -18px; /* toasts sit at the start edge and slide in from it */
  --warn: #f5a623; /* amber: stale quotes, a quiet market, reconnecting */
  --warn-ink: #e8961a;
  --warn-soft: rgba(245, 166, 35, .13);
  --warn-line: rgba(245, 166, 35, .35);
}
[data-theme="light"] { --warn: #d9850f; --warn-ink: #9a5b00; --warn-soft: rgba(217, 133, 15, .1); --warn-line: rgba(217, 133, 15, .3); }
html[dir="rtl"] { --slide: 18px; }

* { box-sizing: border-box; }
[hidden] { display: none !important; } /* wins over any explicit display (.btn, .form, .card…) */
html { -webkit-text-size-adjust: 100%; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: var(--fs-md)/1.4 var(--font);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input { font: inherit; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
svg { display: block; }
/* one focus ring everywhere: a 2 px accent outline standing off the control (keyboard only; taps and clicks stay clean) */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }
.seg button:focus-visible, .icon-btn:focus-visible, .pill:focus-visible, .wl-row:focus-visible, .btn:focus-visible { border-radius: inherit; outline-offset: 1px; }
input:focus-visible { outline: none; } /* the field around it lights up instead */
button[disabled], .btn[disabled] { opacity: .5; cursor: default; pointer-events: none; }
.muted { color: var(--muted); }
.small { font-size: 11px; }
.up { color: var(--up); }
.down { color: var(--down); }
.n { direction: ltr; unicode-bidi: isolate; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.code {
  display: inline-block; margin-inline-start: 6px; padding: 0 4px; border: 1px solid var(--line-2); border-radius: 4px;
  font: 600 10px/15px var(--font); color: var(--muted); letter-spacing: .02em; vertical-align: 2px; unicode-bidi: isolate;
}
.sv-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- atmosphere: deep navy, a slow aurora and a faint trading grid, fixed behind everything ---------- */
.atmos { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; contain: strict; }
.atmos::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 44px 44px; background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 35%, #000 25%, transparent 80%);
  mask-image: radial-gradient(ellipse 85% 75% at 50% 35%, #000 25%, transparent 80%);
}
.au { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; will-change: transform; animation: 46s ease-in-out infinite alternate; }
/* the drift is a desktop luxury: phones and tablets keep the glows still (battery, and the blurred bars over them) */
@media (max-width: 980px), (hover: none) { .au { animation: none; will-change: auto; } }
.au1 { left: -26vmax; top: -34vmax; background: radial-gradient(closest-side, var(--au1), transparent); animation-name: drift1; }
.au2 { right: -30vmax; top: -10vmax; background: radial-gradient(closest-side, var(--au2), transparent); animation-name: drift2; animation-duration: 58s; }
.au3 { left: 10vw; bottom: -46vmax; background: radial-gradient(closest-side, var(--au3), transparent); animation-name: drift3; animation-duration: 52s; }
@keyframes drift1 { to { transform: translate3d(14vmax, 10vmax, 0) scale(1.12); } }
@keyframes drift2 { to { transform: translate3d(-12vmax, 14vmax, 0) scale(.9); } }
@keyframes drift3 { to { transform: translate3d(12vmax, -10vmax, 0) scale(1.1); } }
.bg-paused .au, .bg-paused .live .dot::after, .bg-paused .tk-label::before { animation-play-state: paused; }

/* ---------- panels: tinted glass without a live blur (only the top bar, the phone tab bar and toasts blur) ---------- */
.card, .chart-panel {
  position: relative; /* a lock overlay can sit on any card */
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: inset 0 1px 0 var(--hi), var(--shadow);
}

/* ---------- press + hover feedback ---------- */
button, .pill, .wl-row, a.toast { transition: transform .14s var(--ease), color .2s, background-color .25s, border-color .25s, box-shadow .25s; }
button:active { transform: scale(.97); }
.wl-row:active { transform: scale(.985); }

/* ---------- top bar ---------- */
.top { position: sticky; top: 0; z-index: 20; -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); }
.top::after { /* a neon horizon under the bar */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, .35) 30%, rgba(25, 230, 160, .35) 70%, transparent);
  opacity: .7;
}
[data-theme="light"] .top::after { opacity: .45; }
.topbar {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  background: var(--bar);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 6px; color: var(--text-strong); padding-inline-end: 4px; flex: none; border-radius: 10px; }
.brand:hover { text-decoration: none; }
.logo-h { width: auto; height: 46px; margin-inline-start: -4px; overflow: visible; }
html[dir="rtl"] .logo-h { margin-inline-start: -2px; }
.brand-c { display: none; align-items: center; gap: 4px; direction: ltr; } /* the mark stays left of the names, as in the lockup */
.mark-live { width: 36px; height: 36px; overflow: visible; flex: none; }
.logo-s { height: 30px; width: auto; flex: none; }
.lg-l { display: none; }
[data-theme="light"] .lg-d { display: none; }
[data-theme="light"] .lg-l { display: inline; }
.lg-ink { fill: var(--ink); }
.lg-sep { fill: #22d3ee; fill-opacity: .55; }
[data-theme="light"] .lg-sep { fill: #c9ced8; fill-opacity: 1; }
.sv-ring { stroke: #19e6a0; }
[data-theme="light"] .sv-ring { stroke: #0aa874; }

.tb-sep { width: 1px; height: 22px; background: var(--line-2); margin: 0 4px; flex: none; }
.tb-sym { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; overflow: hidden; }
.tb-sym #tbSym { font-weight: 600; color: var(--text-strong); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-desc { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spacer { flex: 1; }

/* ---------- segmented controls with a sliding, glowing indicator ---------- */
.seg {
  position: relative; display: flex; gap: 2px; flex: none; padding: 2px; border-radius: 10px;
  background: var(--track); border: 1px solid var(--line); isolation: isolate;
}
.seg button {
  position: relative; z-index: 1;
  height: 28px; min-width: 32px; padding: 0 9px; border-radius: 8px;
  color: var(--muted); font-weight: 500; font-size: 13px; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center;
}
.seg button.on { color: var(--accent); }
.seg:not(.has-ind) button.on { background: var(--accent-soft); }
.seg svg { width: var(--icon); height: var(--icon); fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; }
.seg svg .fill { fill: currentColor; }
.seg svg .fill-soft { fill: currentColor; opacity: .22; stroke: none; }
.seg-sm button { height: 24px; font-size: 12px; padding: 0 9px; }
.seg-ind {
  position: absolute; z-index: 0; top: 2px; bottom: 2px; left: 0; width: 0; border-radius: 8px;
  background: var(--ind-bg); box-shadow: inset 0 0 0 1px var(--ind-ring);
  opacity: 0; pointer-events: none;
  transition: transform .42s var(--spring), width .42s var(--spring), opacity .2s;
}
[data-theme="light"] .seg-ind { box-shadow: inset 0 0 0 1px var(--ind-ring), 0 1px 3px rgba(15, 23, 42, .12); }
.seg-ind.on { opacity: 1; }
.seg-ind.instant { transition: none; }
@media (hover: hover) {
  .seg button:hover { color: var(--text-strong); }
  .seg:not(.has-ind) button:hover { background: var(--hover); }
}

.icon-btn {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--muted); flex: none;
  background: var(--track); border: 1px solid var(--line);
}
.icon-btn.icon-sm { width: 30px; height: 30px; border-radius: var(--r-md); }
.icon-btn.icon-ghost { background: none; border-color: transparent; }
@media (hover: hover) {
  .icon-btn:hover { color: var(--text-strong); border-color: rgba(34, 211, 238, .35); box-shadow: 0 0 16px -4px var(--accent-glow); }
  .icon-btn.icon-ghost:hover { background: var(--hover); box-shadow: none; border-color: transparent; }
}
.icon-btn:active { background: var(--accent-soft); }
.icon-btn svg { width: var(--icon); height: var(--icon); fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; }
.icon-btn svg .fill { fill: currentColor; stroke: none; }
.tb-account { display: flex; align-items: center; flex: none; }
.tb-account:empty { display: none; }
/* account button (mounted by the members layer): an initial in a circle, or a "Sign in" pill when logged out */
.acct-btn {
  display: inline-flex; align-items: center; gap: var(--sp-2); height: 34px; padding-block: 0; padding-inline: var(--sp-1) var(--sp-3); border-radius: var(--r-pill);
  background: var(--track); border: 1px solid var(--line); color: var(--text-strong); font-weight: var(--fw-medium); font-size: var(--fs-md); white-space: nowrap;
}
.acct-btn.signin { padding: 0 var(--sp-3); color: var(--accent); border-color: var(--ind-ring); background: var(--accent-soft); }
.acct-btn .avatar {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  color: #04130d; background: var(--grad-2); box-shadow: 0 0 10px -2px var(--accent-glow);
}
[data-theme="light"] .acct-btn .avatar { color: #fff; }
.acct-btn.pro .avatar { box-shadow: 0 0 0 2px var(--panel-solid), 0 0 0 3.5px var(--accent); }
@media (hover: hover) { .acct-btn:hover { border-color: rgba(34, 211, 238, .35); box-shadow: 0 0 16px -4px var(--accent-glow); } }
.lang-btn { font-weight: 600; font-size: 13px; color: var(--text); }
.lang-btn:lang(ar) { font: 600 16px/1 var(--font); }

/* live pill: only the dot pings while the feed is live */
.live {
  position: relative; display: flex; align-items: center; gap: 7px; padding: 0 11px; height: 30px; border-radius: 15px;
  background: var(--track); border: 1px solid var(--line); font-size: 12px; white-space: nowrap; flex: none;
  transition: border-color .4s, background-color .4s;
}
.live .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); position: relative; flex: none; }
.live-label { font-weight: 600; letter-spacing: .05em; }
html[lang="ar"] .live-label { letter-spacing: 0; }
.live-age { color: var(--muted); min-width: 13.5ch; } /* "checked 9s ago" -> "checked 59s ago" without the pill changing width */
html[lang="ar"] .live-age { min-width: 15ch; }
.live-age:empty { display: none; }
.live[data-state="live"] { border-color: rgba(25, 230, 160, .32); background: var(--up-soft); }
.live[data-state="live"] .dot { background: var(--up-c); box-shadow: 0 0 8px var(--up-glow); }
.live[data-state="live"] .dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid var(--up-c); opacity: 0; animation: ping 2.4s ease-out infinite;
}
.live[data-state="live"] .live-label { color: var(--up); }
.live[data-state="offline"] .dot, .live[data-state="error"] .dot, .live[data-state="netoff"] .dot { background: var(--down-c); box-shadow: 0 0 8px var(--down-glow); }
.live[data-state="offline"] .live-label, .live[data-state="netoff"] .live-label { color: var(--down); }
.live[data-state="importing"] .dot { background: #f5a623; }
.live[data-state="reconnecting"] .dot, .live[data-state="retrying"] .dot, .live[data-state="connecting"] .dot { background: #f5a623; animation: blink 1s ease-in-out infinite; }
.live[data-state="reconnecting"] .live-label, .live[data-state="retrying"] .live-label { color: #e8961a; } /* retrying: the poll transport's RETRYING / منقطع */
/* honest states (SPEC-v5 E): late = amber "updating…" (the cloud's read is 3-10 min old, or this page's reads fail);
   offline = red with the time of the last update (past 10 min) */
.live[data-state="late"] { border-color: rgba(245, 166, 35, .38); background: rgba(245, 166, 35, .09); }
.live[data-state="late"] .dot { background: #f5a623; box-shadow: 0 0 8px rgba(245, 166, 35, .55); animation: blink 1.6s ease-in-out infinite; }
.live[data-state="late"] .live-label { color: #e8961a; }
.live[data-state="offline"] { border-color: rgba(255, 84, 112, .38); background: var(--down-soft); }
[data-theme="light"] .live[data-state="late"] { background: rgba(245, 166, 35, .13); }
[data-theme="light"] .live[data-state="late"] .live-label { color: #a2600a; }
@keyframes ping { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes blink { 50% { opacity: .25; } }

/* ---------- breaking-news strip ---------- */
.ticker {
  height: var(--tk-h); display: flex; align-items: center; gap: 10px;
  padding-inline-start: 10px; background: var(--bar); border-bottom: 1px solid var(--line); overflow: hidden;
}
/* At rest a quiet coral chip with a slowly blinking dot; a new headline fills it red for ~8 s (.hot), then it fades back. */
.tk-label {
  position: relative; flex: none; height: 22px; padding: 0 10px; padding-inline-start: 20px; border-radius: 11px; display: inline-flex; align-items: center;
  background-color: var(--brk-bg); color: var(--brk-ink); border: 1px solid var(--brk-line);
  font-size: 11px; font-weight: 600; letter-spacing: .08em;
  transition: background-color .6s, color .6s, border-color .6s, box-shadow .6s;
}
html[lang="ar"] .tk-label { letter-spacing: 0; font-size: 13px; }
.tk-label::before {
  content: ""; position: absolute; inset-inline-start: 8px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%;
  background-color: var(--brk-dot); animation: brkBlink 2.4s ease-in-out infinite; transition: background-color .6s;
}
.tk-label.hot { background-color: var(--brk-hot); color: #fff; border-color: transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 0 14px -3px var(--breaking-glow); }
.tk-label.hot::before { background-color: #fff; }
.tk-label::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: 0; }
.tk-label.pulse { animation: tkPulse 1.6s var(--ease) 1; }
.tk-label.pulse::after { animation: tkRing 1.6s ease-out 1; }
@keyframes brkBlink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes tkPulse { 18% { transform: scale(1.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 24px 2px var(--breaking-glow); } }
@keyframes tkRing { 0% { opacity: 1; box-shadow: 0 0 0 0 var(--breaking-glow); } 100% { opacity: 0; box-shadow: 0 0 0 14px rgba(255, 84, 112, 0); } }
.tk-viewport {
  flex: 1; min-width: 0; height: 100%; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 44px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 44px), transparent);
}
.tk-track { display: flex; width: max-content; height: 100%; align-items: center; }
.tk-track.run { animation: tkMove var(--tk-dur, 60s) linear infinite; will-change: transform; }
/* Pause for a mouse over it, keyboard focus in it, or a finger on it (.hold lifts 2 s after release).
   Touch screens keep :hover on a tapped element and links keep focus after a click, so neither may pause it there. */
.ticker.hold .tk-track { animation-play-state: paused; }
@media (hover: hover) { .ticker:hover .tk-track { animation-play-state: paused; } }
.ticker:has(:focus-visible) .tk-track { animation-play-state: paused; }
@keyframes tkMove { from { transform: translateX(0); } to { transform: translateX(var(--tk-dist, 0px)); } }
.tk-run { display: flex; align-items: center; flex: none; height: 100%; }
.tk-item { display: inline-flex; align-items: center; gap: 8px; height: 100%; color: var(--text-strong); font-size: 13px; white-space: nowrap; }
.tk-item:hover { text-decoration: none; color: var(--accent); }
.tk-time { color: var(--muted); font-weight: 500; font-size: 12px; }
.tk-sep { display: inline-flex; align-items: center; padding: 0 18px; height: 100%; }
.tk-sep i { /* the brand diamond */
  display: block; width: 5px; height: 5px; border-radius: 1px; transform: rotate(45deg);
  background: linear-gradient(135deg, #19e6a0, #22d3ee); box-shadow: 0 0 3px rgba(34, 211, 238, .4);
}
[data-theme="light"] .tk-sep i { background: linear-gradient(135deg, #0aa874, #0891b2); box-shadow: none; }
.tk-empty { color: var(--muted); font-size: 12px; padding: 0 12px; }

/* ---------- skeletons ---------- */
.sk { display: block; position: relative; overflow: hidden; height: 11px; margin: 6px 0; border-radius: 6px; background: var(--sk); }
.sk::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--sk-hi), transparent); animation: shimmer 1.6s ease-in-out infinite;
}
html[dir="rtl"] .sk::after { animation-name: shimmerR; }
@keyframes shimmer { to { transform: translateX(100%); } }
@keyframes shimmerR { from { transform: translateX(100%); } to { transform: translateX(-100%); } }
.sk-price { height: 30px; width: 55%; margin: 4px 0 10px; border-radius: 8px; }
.sk-pill { display: inline-block; width: 76px; height: 40px; margin: 0; border-radius: 20px; flex: none; }
.sk-tk { flex: none; width: min(520px, 60vw); height: 10px; margin: 0 12px; }
.sk-row { display: grid; grid-template-columns: minmax(0, 1fr) 64px 62px; gap: 12px; align-items: center; padding: 10px 12px; }
.sk-spark { height: 18px; margin: 0; }
.sk-chg { height: 20px; margin: 0; border-radius: 6px; }
.sk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin-top: 12px; }
.sk-post { padding: 10px 8px; border-top: 1px solid var(--line); }
.sk-post:first-child { border-top: 0; }
.chart-sk { position: absolute; inset: 18% 78px 14% 5%; display: flex; align-items: center; justify-content: space-between; overflow: hidden; }
.chart-sk i { position: relative; flex: none; width: 2.6%; max-width: 16px; height: 26%; border-radius: 2px; background: var(--sk); }
.chart-sk i::before { content: ""; position: absolute; left: 50%; width: 1px; margin-left: -.5px; top: -22%; bottom: -22%; background: var(--sk); }
.chart-sk i:nth-child(odd) { transform: translateY(14%); }
.chart-sk i:nth-child(3n) { height: 38%; }
.chart-sk i:nth-child(4n) { height: 18%; transform: translateY(-30%); }
.chart-sk i:nth-child(5n) { height: 44%; transform: translateY(-12%); }
.chart-sk i:nth-child(n+9) { transform: translateY(-40%); }
.chart-sk i:nth-child(n+12) { transform: translateY(-70%); }
.chart-sk::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--sk-hi), transparent); animation: shimmer 1.8s ease-in-out infinite;
}

/* ---------- layout ---------- */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 344px;
  grid-template-rows: minmax(0, 1fr);
  gap: 8px;
  padding: 8px;
  height: calc(100vh - var(--topbar-h) - var(--tk-h));
  height: calc(100dvh - var(--topbar-h) - var(--tk-h));
}
@media (min-width: 1280px) { .layout { grid-template-columns: minmax(0, 1fr) 372px; } } /* room for one-line watchlist subtitles */
.chart-col { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.chart-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  container-type: inline-size; /* the range bar reacts to the panel's own width */
}
.chart-box { position: relative; flex: 1; min-height: 0; }
#chart { position: absolute; inset: 0; }
.legend { position: absolute; top: 10px; left: 12px; max-width: calc(100% - 96px); z-index: 3; pointer-events: none; }
.lg-row1 { display: flex; align-items: baseline; gap: 6px; font-size: 13px; color: var(--muted); }
.lg-sym { font-size: 15px; font-weight: 600; color: var(--text-strong); }
.lg-dot { opacity: .6; }
.lg-row2 { margin-top: 3px; display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 12px; }
.lg-row2 .k { color: var(--muted); margin-inline-end: 3px; }
/* the live price leads the screen (TradingView-style): always the last quote, the OHLC row below follows the crosshair */
.lg-quote { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; margin-top: 4px; }
.lg-quote:empty { display: none; }
.lg-price { font-size: 30px; font-weight: 600; line-height: 1.12; letter-spacing: -.02em; color: var(--text-strong); }
.lg-cur { font-size: 13px; font-weight: 500; color: var(--muted); }
.lg-chg { font-size: 15px; font-weight: 500; }
html[dir="rtl"] .lg-row1, html[dir="rtl"] .lg-row2, html[dir="rtl"] .lg-quote { justify-content: flex-end; } /* the chart stays LTR: hug its left edge */
.empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; text-align: center; color: var(--muted); font-size: 14px; z-index: 4; }
/* a new rate ripples out of the last bar */
.ripple { position: absolute; left: 0; top: 0; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; pointer-events: none; z-index: 2; opacity: 0; color: var(--accent); }
.ripple::before, .ripple::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid currentColor; opacity: 0; }
.ripple.rip-up { color: var(--up-c); }
.ripple.rip-down { color: var(--down-c); }
.ripple.go { opacity: 1; background: radial-gradient(closest-side, currentColor, transparent); animation: ripDot 1.4s ease-out forwards; }
.ripple.go::before { animation: ripRing 1.4s var(--ease) forwards; }
.ripple.go::after { animation: ripRing 1.4s var(--ease) .22s forwards; }
@keyframes ripDot { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.4); } }
@keyframes ripRing { 0% { opacity: .9; transform: scale(.5); } 100% { opacity: 0; transform: scale(5.5); } }

.rangebar {
  height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 8px;
  border-top: 1px solid var(--line);
}
.ranges { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.ranges::-webkit-scrollbar { display: none; }
.ranges button { height: 26px; padding: 0 9px; font-size: 12px; flex: none; }
.credit { margin-inline-start: auto; color: var(--muted); font-size: 11px; white-space: nowrap; opacity: .8; }
.credit:hover { color: var(--text); text-decoration: none; opacity: 1; }
.tz { color: var(--muted); font-size: 12px; white-space: nowrap; margin-inline-end: 2px; }
/* the range bar never scrolls: as the panel narrows the help button, then the Arabic clock, then the credit step aside */
@container (max-width: 920px) { #helpBtn { display: none; } html[lang="ar"] .tz { display: none; } }
@container (max-width: 780px) { html[lang="ar"] .credit { display: none; } }
@container (max-width: 640px) { .credit { display: none; } }

/* ---------- state chips: amber for a stale quote or a quiet market (one at a time, never both) ---------- */
.state-chip {
  display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: var(--fw-medium); letter-spacing: 0; white-space: nowrap; vertical-align: middle;
  color: var(--warn-ink); background: var(--warn-soft); border: 1px solid var(--warn-line);
}
.state-chip::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--warn); flex: none; }
.state-chip.quiet { color: var(--muted); background: var(--panel-2); border-color: var(--line-2); }
.state-chip.quiet::before { background: var(--muted); }
.lg-quote .state-chip { align-self: center; }

/* ---------- Pro badge + lock overlay (styled here, wired by the members layer) ---------- */
.pro-badge {
  display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 7px; border-radius: var(--r-pill);
  font-size: var(--fs-2xs); font-weight: var(--fw-semibold); letter-spacing: .08em; line-height: 1; white-space: nowrap; vertical-align: middle;
  color: #04130d; background: var(--grad-2); box-shadow: 0 0 10px -3px var(--accent-glow);
}
[data-theme="light"] .pro-badge { color: #fff; background: linear-gradient(90deg, #0aa874, #0e7490); box-shadow: none; }
.pro-badge.outline { color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--ind-ring); }
.pro-badge svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tier-badge { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--muted); background: var(--panel-2); border: 1px solid var(--line); }
/* the host (.chart-box, .details, a stats grid…) gets .locked; the overlay frosts it and offers one line + one button */
.lock {
  position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; padding: var(--sp-4); text-align: center;
  background: rgba(11, 14, 20, .42); -webkit-backdrop-filter: blur(7px) saturate(120%); backdrop-filter: blur(7px) saturate(120%);
  border-radius: inherit; animation: fadeIn .3s var(--ease) backwards;
}
[data-theme="light"] .lock { background: rgba(238, 242, 247, .5); }
.lock-card {
  display: grid; justify-items: center; gap: var(--sp-2); max-width: 300px; padding: var(--sp-4) var(--sp-5); border-radius: var(--r-lg);
  background: var(--panel-solid); border: 1px solid var(--line-2); box-shadow: var(--shadow), 0 0 30px -14px var(--accent-glow); pointer-events: auto;
}
.lock-icon { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--ind-ring); }
.lock-icon svg { width: var(--icon); height: var(--icon); fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; }
.lock-text { font-size: var(--fs-md); color: var(--text-strong); font-weight: var(--fw-medium); line-height: 1.45; }
.lock .btn { margin-top: var(--sp-1); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- buttons and fields (shared by the share flow, the help sheet and the coming members sheets) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); height: 40px; padding: 0 var(--sp-4); border-radius: 10px;
  font-weight: var(--fw-semibold); font-size: var(--fs-base); white-space: nowrap; color: var(--text-strong);
  background: var(--track); border: 1px solid var(--line-2);
}
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; }
.btn-primary { color: #04130d; background: var(--grad-2); border-color: transparent; box-shadow: 0 8px 22px -10px var(--accent-glow); }
[data-theme="light"] .btn-primary { color: #fff; background: linear-gradient(90deg, #0aa874, #0e7490); box-shadow: 0 8px 20px -12px rgba(8, 145, 178, .6); }
.btn-ghost { background: none; border-color: transparent; color: var(--accent); }
.btn-block { width: 100%; }
.btn-sm { height: 32px; padding: 0 var(--sp-3); font-size: var(--fs-md); border-radius: var(--r-md); }
@media (hover: hover) {
  .btn:hover { border-color: rgba(34, 211, 238, .4); text-decoration: none; }
  .btn-primary:hover { filter: brightness(1.06); }
  .btn-ghost:hover { background: var(--accent-soft); border-color: transparent; }
}
.btn:active { transform: scale(.97); }
.field { display: grid; gap: 6px; }
.field > span { font-size: var(--fs-sm); color: var(--muted); font-weight: var(--fw-medium); }
.field .in {
  display: flex; align-items: center; gap: var(--sp-2); height: 46px; padding: 0 var(--sp-3); border-radius: 11px;
  background: var(--track); border: 1px solid var(--line); transition: border-color .25s, box-shadow .25s;
}
.field .in:focus-within { border-color: rgba(34, 211, 238, .5); box-shadow: 0 0 0 3px rgba(34, 211, 238, .1), 0 0 18px -6px var(--accent-glow); }
.field input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: none; color: var(--text-strong); font-size: 16px; } /* 16 px: iOS does not zoom */
.field input::placeholder { color: var(--muted); opacity: .7; }
.field .prefix { color: var(--muted); font-weight: var(--fw-medium); white-space: nowrap; direction: ltr; }
.field.err .in { border-color: rgba(255, 84, 112, .55); }
.field .hint { font-size: var(--fs-sm); color: var(--muted); }
.field .hint.err { color: var(--down); }
.kbd { display: inline-block; min-width: 24px; padding: 2px 7px; border-radius: var(--r-sm); text-align: center; font: var(--fw-semibold) var(--fs-sm)/16px var(--font); color: var(--text-strong); background: var(--panel-2); border: 1px solid var(--line-2); box-shadow: 0 1px 0 var(--line-2); direction: ltr; unicode-bidi: isolate; }
.kbd-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: 10px 0; border-top: 1px solid var(--line); font-size: var(--fs-md); }
.kbd-row:first-child { border-top: 0; }
.kbd-row .keys { display: flex; gap: 4px; flex: none; direction: ltr; } /* ← → read left to right in Arabic too */

/* ---------- sheet: bottom sheet on phones, centred dialog elsewhere ---------- */
.sheet-root { position: fixed; inset: 0; z-index: 60; display: grid; place-items: end center; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(5, 7, 12, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: fadeIn .25s var(--ease) backwards; }
[data-theme="light"] .sheet-backdrop { background: rgba(15, 23, 42, .32); }
.sheet {
  position: relative; width: 100%; max-height: calc(100dvh - 32px - env(safe-area-inset-top)); display: flex; flex-direction: column; outline: none;
  background: var(--panel-solid); border: 1px solid var(--line-2); border-bottom: 0; border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  box-shadow: 0 -20px 60px -20px rgba(0, 0, 0, .7), inset 0 1px 0 var(--hi);
  padding-bottom: env(safe-area-inset-bottom);
  animation: sheetUp .42s var(--spring) backwards; will-change: transform;
  touch-action: pan-y;
}
.sheet.drag { transition: none; }
.sheet.settle { transition: transform .32s var(--spring); }
.sheet-root.closing .sheet { transition: transform .28s var(--ease); transform: translateY(110%) !important; }
.sheet-root.closing .sheet-backdrop { transition: opacity .28s; opacity: 0; }
.sheet-grip { display: grid; place-items: center; height: 22px; flex: none; touch-action: none; cursor: grab; }
.sheet-grip i { width: 40px; height: 4px; border-radius: 2px; background: var(--line-2); }
.sheet-h { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: 0 0 var(--sp-3); padding-inline: var(--sp-5) var(--sp-4); flex: none; touch-action: none; }
.sheet-title { margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-semibold); color: var(--text-strong); }
.sheet-body { overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--sp-5) var(--sp-5); -webkit-overflow-scrolling: touch; }
.sheet-body.no-scroll { touch-action: none; }
.sheet-body p { margin: 0 0 var(--sp-3); line-height: 1.6; }
.sheet-body .muted { line-height: 1.6; }
.sheet-actions { display: grid; gap: var(--sp-2); margin-top: var(--sp-4); }
.sheet-note { display: flex; gap: var(--sp-2); align-items: flex-start; padding: 10px 12px; border-radius: var(--r-md); background: var(--panel-2); border: 1px solid var(--line); font-size: var(--fs-sm); color: var(--muted); line-height: 1.55; }
.sheet-note.warn { color: var(--warn-ink); background: var(--warn-soft); border-color: var(--warn-line); align-items: center; flex-wrap: wrap; }
.sheet-note.warn > span { flex: 1 1 200px; }
.sheet-note.warn .btn { flex: none; }
.share-text { padding: 12px 14px; border-radius: var(--r-md); background: var(--panel-2); border: 1px solid var(--line); font-size: var(--fs-base); color: var(--text-strong); line-height: 1.7; -webkit-user-select: all; user-select: all; }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }
@media (min-width: 641px) {
  .sheet-root { place-items: center; padding: var(--sp-6); }
  .sheet { width: min(440px, 100%); max-height: min(720px, calc(100dvh - 48px)); border-radius: var(--r-xl); border-bottom: 1px solid var(--line-2); box-shadow: var(--shadow), 0 0 40px -16px var(--accent-glow); animation: dialogIn .3s var(--ease) backwards; padding-bottom: 0; }
  .sheet-grip { display: none; }
  .sheet-h { padding-top: var(--sp-4); }
  .sheet-root.closing .sheet { transform: translateY(12px) scale(.98) !important; opacity: 0; transition: transform .2s, opacity .2s; }
}
@keyframes dialogIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
body.sheet-open { overflow: hidden; }

/* ---------- floating network pill (offline / back online) ---------- */
.net-pill {
  position: fixed; top: calc(var(--topbar-h) + var(--tk-h) + env(safe-area-inset-top) + 10px); left: 50%; transform: translateX(-50%); z-index: 40;
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border-radius: var(--r-pill);
  background: var(--bar); border: 1px solid var(--line-2); color: var(--text-strong); font-size: var(--fs-sm); font-weight: var(--fw-medium); white-space: nowrap;
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); box-shadow: var(--shadow);
  animation: pillDrop .35s var(--spring) backwards;
}
.net-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--down-c); box-shadow: 0 0 8px var(--down-glow); }
.net-pill.ok .dot { background: var(--up-c); box-shadow: 0 0 8px var(--up-glow); }
@keyframes pillDrop { from { opacity: 0; transform: translate(-50%, -10px); } to { opacity: 1; transform: translate(-50%, 0); } }
body.has-banner .net-pill { top: calc(var(--topbar-h) + var(--tk-h) + var(--banner-h) + env(safe-area-inset-top) + 10px); }

/* ---------- error / empty block inside the chart ---------- */
.empty-card { display: grid; justify-items: center; gap: var(--sp-2); max-width: 320px; }
.empty-card .lock-icon { color: var(--muted); background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.empty-card.err .lock-icon { color: var(--down); background: var(--down-soft); box-shadow: inset 0 0 0 1px rgba(255, 84, 112, .3); }
.empty-card p { margin: 0; color: var(--text); font-size: var(--fs-base); line-height: 1.5; }
.empty-card .btn { margin-top: var(--sp-1); }

/* ---------- pull-to-refresh (phone) ---------- */
.ptr {
  position: fixed; top: calc(var(--topbar-h) + var(--tk-h) + env(safe-area-inset-top) - 44px); left: 50%; z-index: 25;
  width: 36px; height: 36px; margin-left: -18px; border-radius: 50%; display: none; place-items: center; color: var(--accent);
  background: var(--panel-solid); border: 1px solid var(--line-2); box-shadow: var(--shadow); opacity: 0;
  transform: translateY(var(--ptr-y, 0px)); will-change: transform;
}
.ptr.show { display: grid; }
.ptr svg { width: var(--icon); height: var(--icon); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ptr .ptr-ring { display: none; stroke-dasharray: 40 18; }
.ptr .ptr-arrow { transition: transform .25s var(--spring); transform-origin: 12px 12px; }
.ptr.armed .ptr-arrow { transform: rotate(180deg); }
.ptr.busy .ptr-arrow { display: none; }
.ptr.busy .ptr-ring { display: block; animation: spin .8s linear infinite; transform-origin: 12px 12px; }
.ptr.settle { transition: transform .3s var(--spring), opacity .2s; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- feed: day groups + sources ---------- */
.feed-day {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: baseline; gap: 8px; padding: 8px 8px 6px; margin: 0 -6px;
  background: var(--panel-solid); font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-strong); text-transform: uppercase; letter-spacing: .07em;
}
[data-theme="dark"] .feed-day { background: #131722; }
.feed-day .muted { font-weight: var(--fw-regular); text-transform: none; letter-spacing: 0; }
html[lang="ar"] .feed-day { letter-spacing: 0; text-transform: none; font-size: var(--fs-sm); }
.feed-day + .post { border-top: 0; }
.src { display: inline-block; max-width: 24ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-2xs); line-height: 1.3; color: var(--muted); direction: ltr; unicode-bidi: isolate; vertical-align: middle; }
.news-more { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-weight: var(--fw-medium); }
.post.rate .chips { margin-top: 5px; }
.post .post-h a:hover, .news-more:hover { color: var(--accent); text-decoration: none; }

/* ---------- plain text toasts ("Copied", "Back online"…) ---------- */
.toast-text { display: flex; align-items: center; gap: 10px; font-weight: var(--fw-medium); color: var(--text-strong); }
.toast-text .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); flex: none; }
.toast-text.ok .dot { background: var(--up-c); box-shadow: 0 0 8px var(--up-glow); }
.toast-text.warn .dot { background: var(--warn); box-shadow: 0 0 8px var(--warn-soft); }
.toast-text::before { display: none; }
/* "A new version is ready · Reload" (SPEC-v5 F): one tap, stays until tapped or snoozed, never pushed out by a price */
.toast.toast-update { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; max-width: 440px; } /* .toast sets display:block after .toast-text */
.toast-update .t-up-text { flex: 1; min-width: 0; line-height: 1.35; }
.toast-update .t-up-btn { flex: none; height: 32px; padding: 0 12px; }
.toast-update .t-up-x { flex: none; width: 30px; height: 30px; }
.toast-update .t-up-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* "Sign in again" (SPEC-v5 G): the member's own account in one row, only the password is asked */
.reauth-who { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-md); background: var(--panel-2); border: 1px solid var(--line-2); }
.reauth-who .acct-avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: var(--fw-semibold); color: #04130d; background: var(--grad-2); flex: none; }
.reauth-who > div { display: grid; gap: 1px; min-width: 0; }
.reauth-who b { font-weight: var(--fw-semibold); color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reauth-who span { color: var(--muted); font-size: var(--fs-sm); }

/* share button inside the phone hero, and the price-alert bell beside it (members.js opens the alerts or the plans) */
.hero-share { position: absolute; top: 0; inset-inline-end: 0; width: var(--tap); height: var(--tap); border-radius: 12px; }
.hero-bell { position: absolute; top: 0; inset-inline-end: var(--tap); width: var(--tap); height: var(--tap); border-radius: 12px; color: var(--accent); }

/* ---------- side ---------- */
.side { display: flex; flex-direction: column; gap: 8px; min-height: 0; min-width: 0; overflow-y: auto; scrollbar-width: thin; }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 12px 8px; font-weight: 600; color: var(--text-strong); }
.card-h .small { font-weight: 400; }

.watch { flex: none; }
.wl-group { padding: 6px 12px 4px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; font-weight: 500; }
html[lang="ar"] .wl-group { letter-spacing: 0; font-size: 12px; }
.wl-row {
  position: relative; overflow: hidden;
  width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 56px auto auto; gap: 10px; align-items: center;
  padding: 7px 12px; text-align: start;
}
.wl-row::before { /* the active row's neon edge */
  content: ""; position: absolute; inset-inline-start: 0; top: 9px; bottom: 9px; width: 2px; border-radius: 2px;
  background: var(--grad-v); box-shadow: 0 0 10px var(--accent-glow); opacity: 0; transform: scaleY(.3);
  transition: opacity .3s, transform .4s var(--spring);
}
.wl-row::after { /* the live ripple */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--rip, var(--accent-soft)) 45%, var(--rip, var(--accent-soft)) 55%, transparent);
}
.wl-row.rip-up { --rip: rgba(25, 230, 160, .2); }
.wl-row.rip-down { --rip: rgba(255, 84, 112, .2); }
.wl-row.rip-flat { --rip: rgba(34, 211, 238, .16); }
[data-theme="light"] .wl-row.rip-up { --rip: rgba(10, 168, 116, .14); }
[data-theme="light"] .wl-row.rip-down { --rip: rgba(229, 53, 79, .12); }
.wl-row.rip-up::after, .wl-row.rip-down::after, .wl-row.rip-flat::after { animation: sweep 1.15s var(--ease) 1; }
html[dir="rtl"] .wl-row.rip-up::after, html[dir="rtl"] .wl-row.rip-down::after, html[dir="rtl"] .wl-row.rip-flat::after { animation-name: sweepR; }
@keyframes sweep { 0% { opacity: 1; transform: translateX(-100%); } 100% { opacity: .3; transform: translateX(100%); } }
@keyframes sweepR { 0% { opacity: 1; transform: translateX(100%); } 100% { opacity: .3; transform: translateX(-100%); } }
@media (hover: hover) { .wl-row:hover { background: var(--hover); } }
.wl-row.on { background: linear-gradient(90deg, var(--accent-soft), transparent 85%); }
html[dir="rtl"] .wl-row.on { background: linear-gradient(270deg, var(--accent-soft), transparent 85%); }
.wl-row.on::before { opacity: 1; transform: none; }
.wl-name { font-weight: 600; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-desc { display: flex; flex-wrap: wrap; align-items: center; gap: 1px 6px; font-weight: 400; font-size: 11px; line-height: 1.35; color: var(--muted); white-space: normal; } /* wraps: never cut mid-word */
.wl-desc .code { order: 2; flex-basis: 100%; width: max-content; margin: 0; padding: 0; border: 0; font-size: 10px; line-height: 13px; opacity: .8; } /* Arabic: always on its own line under the subtitle, so every row has the same shape */
.wl-q { display: contents; }
.wl-last { font-weight: 600; text-align: end; color: var(--text-strong); }
.wl-chg { min-width: 64px; text-align: center; font-weight: 600; padding: 3px 6px; border-radius: 6px; font-size: 12px; border: 1px solid transparent; color: var(--muted); background: var(--panel-2); }
.wl-chg.up { color: var(--up); background: var(--up-soft); border-color: rgba(25, 230, 160, .22); }
.wl-chg.down { color: var(--down); background: var(--down-soft); border-color: rgba(255, 84, 112, .22); }
[data-theme="light"] .wl-chg.up { border-color: rgba(10, 168, 116, .2); }
[data-theme="light"] .wl-chg.down { border-color: rgba(229, 53, 79, .18); }

/* sparklines: last 30 days, gradient stroke, soft glow, coloured by direction */
.wl-spark { width: 56px; height: 22px; overflow: visible; }
.sp-l { fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke: var(--muted); }
.sp-a { fill: none; stroke: none; }
.sp-b { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 1.5 2.5; }
.sp-d { fill: var(--muted); }
.wl-spark.up .sp-l { stroke: url(#spUp); }
.wl-spark.up .sp-a { fill: url(#spUpA); }
.wl-spark.up .sp-d { fill: var(--up-c); }
.wl-spark.down .sp-l { stroke: url(#spDn); }
.wl-spark.down .sp-a { fill: url(#spDnA); }
.wl-spark.down .sp-d { fill: var(--down-c); }
.s-up0 { stop-color: #22d3ee; stop-opacity: .7; } .s-up1 { stop-color: #19e6a0; }
.s-dn0 { stop-color: #ff8a9b; stop-opacity: .7; } .s-dn1 { stop-color: #ff5470; }
.s-upa { stop-color: #19e6a0; } .s-dna { stop-color: #ff5470; }
[data-theme="light"] .s-up0 { stop-color: #0891b2; } [data-theme="light"] .s-up1 { stop-color: #0aa874; }
[data-theme="light"] .s-dn0 { stop-color: #f08a9a; } [data-theme="light"] .s-dn1 { stop-color: #e5354f; }
[data-theme="light"] .s-upa { stop-color: #0aa874; } [data-theme="light"] .s-dna { stop-color: #e5354f; }

/* ---------- rolling digits + direction glow ---------- */
/* Readex Pro has proportional digits only: every digit of a live price sits in a fixed cell (tabular by hand) */
.tn { white-space: nowrap; direction: ltr; unicode-bidi: isolate; } /* digit cells are inline-blocks: keep them in reading order in Arabic */
.tn-sr { -webkit-user-select: none; user-select: none; } /* copying a price gives the visible digits once, not twice */
.od-c { position: relative; display: inline-block; width: .585em; text-align: center; } /* the average Readex digit: 0 and 4 overhang a hair, 1 is not stranded */
.od-r { clip-path: inset(0 -.5em); -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); } /* digits fade in and out at the cell edges */
.od-g { visibility: hidden; }
.od-s { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; align-items: center; transition: transform .75s cubic-bezier(.2, .9, .25, 1); will-change: transform; }
.od-s > span { display: block; }
.glow-up { animation: glowUp 1.6s ease-out 1; }
.glow-down { animation: glowDown 1.6s ease-out 1; }
.glow-flat { animation: glowFlat 1.6s ease-out 1; }
/* no 100% frame: colour and glow ease back to the element's own resting values */
@keyframes glowUp { 0%, 20% { color: var(--up); text-shadow: 0 0 18px var(--up-glow), 0 0 4px var(--up-glow); } }
@keyframes glowDown { 0%, 20% { color: var(--down); text-shadow: 0 0 18px var(--down-glow), 0 0 4px var(--down-glow); } }
@keyframes glowFlat { 0%, 20% { color: var(--accent); text-shadow: 0 0 18px var(--flat-glow); } }
.pill.glow-up, .pill.glow-down, .pill.glow-flat { animation-name: pillUp; }
.pill.glow-down { animation-name: pillDown; }
.pill.glow-flat { animation-name: pillFlat; }
@keyframes pillUp { 0%, 25% { border-color: var(--up-c); box-shadow: 0 0 18px -2px var(--up-glow); } }
@keyframes pillDown { 0%, 25% { border-color: var(--down-c); box-shadow: 0 0 18px -2px var(--down-glow); } }
@keyframes pillFlat { 0%, 25% { border-color: var(--accent); box-shadow: 0 0 18px -2px var(--flat-glow); } }

/* ---------- quick converter ---------- */
.cv { display: grid; gap: 8px; padding: 0 12px 12px; }
.cv-seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cv-seg button { height: 28px; padding: 0 4px; font-size: 12.5px; }
.cv-box { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "in swap" "out out"; gap: 8px; }
.cv-in, .cv-out {
  display: flex; align-items: center; gap: 8px; min-width: 0; height: 44px; padding: 0 12px; border-radius: 11px;
  background: var(--track); border: 1px solid var(--line); transition: border-color .25s, box-shadow .25s;
}
.cv-in { grid-area: in; cursor: text; }
.cv-in:focus-within { border-color: rgba(34, 211, 238, .5); box-shadow: 0 0 0 3px rgba(34, 211, 238, .1), 0 0 18px -6px var(--accent-glow); }
#cvAmt {
  flex: 1; min-width: 0; height: 100%; padding: 0; background: none; border: 0; outline: none;
  color: var(--text-strong); font: 600 18px/1 var(--font); font-variant-numeric: tabular-nums; text-align: left;
}
html[dir="rtl"] #cvAmt { text-align: right; }
#cvAmt::placeholder { color: var(--muted); opacity: .6; }
.cv-unit { flex: none; font-size: 12px; font-weight: 600; color: var(--muted); padding: 3px 7px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel-2); white-space: nowrap; }
.cv-swap {
  grid-area: swap; width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; color: var(--accent);
  background: var(--track); border: 1px solid var(--line);
}
.cv-swap svg { width: var(--icon); height: var(--icon); fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; }
.cv-swap.tap { animation: swapTap .45s var(--ease) 1; }
@keyframes swapTap { 35% { transform: scale(.88); background-color: var(--accent-soft); border-color: var(--ind-ring); } }
@media (hover: hover) { .cv-swap:hover { border-color: rgba(34, 211, 238, .45); box-shadow: 0 0 18px -4px var(--accent-glow); } }
.cv-out {
  grid-area: out; height: 48px; position: relative; overflow: hidden;
  background: linear-gradient(90deg, rgba(25, 230, 160, .07), rgba(34, 211, 238, .05) 60%, rgba(41, 98, 255, .06));
  border-color: rgba(34, 211, 238, .2);
}
[data-theme="light"] .cv-out { background: linear-gradient(90deg, rgba(10, 168, 116, .06), rgba(8, 145, 178, .05) 60%, rgba(41, 98, 255, .05)); border-color: rgba(8, 145, 178, .2); }
.cv-res { /* no overflow clip here: it would cut the glow into a box (the rounded .cv-out clips instead) */
  flex: 1; min-width: 0; white-space: nowrap; direction: ltr; text-align: left;
  font-size: 20px; font-weight: 600; line-height: 1.15; color: var(--text-strong); letter-spacing: -.01em;
}
html[dir="rtl"] .cv-res { text-align: right; }
.cv-res.long { font-size: 16px; }
.cv-res.xlong { font-size: 13px; }
.cv-rate { min-height: 16px; display: flex; flex-wrap: wrap; gap: 2px 8px; justify-content: space-between; font-size: 12px; color: var(--muted); }
.cv-rate b { color: var(--text-strong); font-weight: 600; }
.cv-rate .sk { width: 42%; margin: 2px 0; }

.details { padding: 12px; flex: none; }
.dt-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dt-top .state-chip { align-self: center; }
.dt-price { font-size: 30px; font-weight: 600; color: var(--text-strong); letter-spacing: -.02em; line-height: 1.1; }
.dt-cur { font-size: 12px; color: var(--muted); font-weight: 500; }
.dt-chg { font-size: 14px; font-weight: 500; }
.dt-sub { color: var(--muted); font-size: 12px; margin-top: 2px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.dt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin-top: 12px; }
.dt-grid div { min-width: 0; }
.dt-grid .wide { grid-column: 1 / -1; }
.dt-grid .k { display: block; color: var(--muted); font-size: 11px; }
.dt-grid .v { font-weight: 600; color: var(--text-strong); white-space: nowrap; }
.dt-grid .v.up { color: var(--up); }
.dt-grid .v.down { color: var(--down); }
.dt-bar { position: relative; height: 4px; border-radius: 2px; background: rgba(148, 163, 184, .22); margin-top: 6px; }
[data-theme="light"] .dt-bar { background: rgba(15, 23, 42, .1); }
.dt-bar b { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: var(--grad-2); opacity: .5; }
.dt-bar i { /* the brand diamond marks where the price sits */
  position: absolute; top: -3px; width: 10px; height: 10px; border-radius: 2px; transform: rotate(45deg);
  background: linear-gradient(135deg, #19e6a0, #22d3ee); box-shadow: 0 0 10px var(--accent-glow); border: 1.5px solid var(--panel-solid);
}
[data-theme="light"] .dt-bar i { background: linear-gradient(135deg, #0aa874, #0891b2); }
.dt-note { margin-top: 12px; padding: 8px 10px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--line); font-size: 12px; }
.dt-note b { color: var(--text-strong); }
.dt-note .muted { white-space: nowrap; } /* "(CBL 6.4403)" moves to the next line as one piece */
.dt-credit { display: block; margin-top: 12px; color: var(--muted); font-size: 11px; opacity: .8; }

.feed { flex: 1; min-height: 160px; display: flex; flex-direction: column; }
#feed { overflow-y: auto; flex: 1; padding: 0 6px 6px; }
.feed-empty { padding: 12px; }
.post { position: relative; padding: 9px 8px; border-top: 1px solid var(--line); border-radius: 2px; }
.post:first-child { border-top: 0; }
.post.fresh { animation: freshIn 2.6s ease-out; }
.post.fresh::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 8px; bottom: 8px; width: 2px; border-radius: 2px;
  background: var(--grad-v); box-shadow: 0 0 10px var(--accent-glow); animation: fadeOut 2.6s ease-in forwards;
}
@keyframes freshIn { 0% { background: var(--accent-soft); } 100% { background: transparent; } }
@keyframes fadeOut { 0%, 60% { opacity: 1; } 100% { opacity: 0; } }
.post-h { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
.post-h a { margin-inline-start: auto; color: var(--muted); }
.badge { font-size: 10px; padding: 1px 6px; border-radius: 4px; background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); }
.badge.new { background: linear-gradient(90deg, #19e6a0, #22d3ee); border-color: transparent; color: #04130d; font-weight: 600; box-shadow: 0 0 10px -2px var(--accent-glow); }
[data-theme="light"] .badge.new { background: #0e7490; color: #fff; box-shadow: none; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.chip { display: inline-flex; gap: 5px; align-items: baseline; padding: 3px 8px; border-radius: 6px; background: var(--panel-2); border: 1px solid var(--line); font-size: 12px; }
.chip b { color: var(--text-strong); font-weight: 600; }
.chip .s { color: var(--muted); font-size: 11px; }
.chip.rej { opacity: .45; text-decoration: line-through; }
.post-text { margin-top: 6px; font-size: 12.5px; line-height: 1.7; color: var(--text); white-space: pre-line; direction: rtl; text-align: right; }
.post details summary { cursor: pointer; color: var(--muted); font-size: 11px; margin-top: 6px; list-style: none; }
.post details summary::-webkit-details-marker { display: none; }
.post details[open] summary { margin-bottom: 2px; }
.news-link { display: block; margin-top: 5px; color: var(--text-strong); font-size: 13.5px; font-weight: 500; line-height: 1.65; text-align: right; }
.news-link:hover { color: var(--accent); text-decoration: none; }
.news-more { display: inline-block; margin-top: 3px; }

/* ---------- toasts: glass with a neon edge ---------- */
/* over the chart's lower start corner, above the time axis (the live feed beside it already highlights the post) */
#toasts { position: fixed; inset-inline-start: 20px; bottom: 88px; display: flex; flex-direction: column; gap: 8px; z-index: 70; pointer-events: none; } /* above the sheet: an alert must never hide behind a dialog */
.toast {
  position: relative; overflow: hidden;
  display: block; pointer-events: auto; min-width: 260px; max-width: 340px; padding: 11px 13px; padding-inline-start: 17px; border-radius: 12px;
  background: var(--bar); border: 1px solid var(--line-2); color: inherit;
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset 0 1px 0 var(--hi), 0 20px 44px -18px rgba(0, 0, 0, .75), 0 0 30px -12px var(--accent-glow);
  animation: toastIn .5s var(--spring) backwards; /* not 'both': a held end frame would block the swipe-away transform */
}
[data-theme="light"] .toast { box-shadow: inset 0 1px 0 var(--hi), 0 16px 36px -18px rgba(15, 23, 42, .45); }
.toast::before {
  content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: 3px;
  background: var(--grad-v); box-shadow: 0 0 12px var(--accent-glow);
}
.toast-news::before { background: linear-gradient(180deg, #ff8a9b, #ff5470); box-shadow: 0 0 12px var(--breaking-glow); }
[data-theme="light"] .toast-news::before { background: linear-gradient(180deg, #ef5a70, #d42f4f); }
a.toast:hover { text-decoration: none; border-color: rgba(34, 211, 238, .35); }
.toast .t-h { font-size: 11px; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.toast .t-h .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--up-c); box-shadow: 0 0 8px var(--up-glow); flex: none; }
.toast .t-b { margin-top: 4px; font-weight: 600; color: var(--text-strong); display: flex; flex-wrap: wrap; gap: 4px 10px; }
.toast-news .t-h .dot { background: var(--brk-dot); box-shadow: 0 0 8px var(--breaking-glow); }
.toast-news .t-b { display: block; line-height: 1.6; text-align: right; font-weight: 500; }
.toast.out { opacity: 0; transform: translateX(var(--slide)); transition: opacity .3s, transform .35s var(--ease); }
@keyframes toastIn { from { opacity: 0; transform: translateX(var(--slide)) scale(.97); } to { opacity: 1; transform: none; } }

/* ---------- phone-only parts ---------- */
.tabbar { display: none; }
@media (min-width: 641px) {
  .m-only { display: none !important; }
  .watch { order: -1; } /* the converter comes first in the page (the phone's Rates tab and VoiceOver); here the watchlist leads */
}

/* ---------- short laptop screens: keep the live feed in view, details scroll in below it ---------- */
@media (min-width: 981px) and (max-height: 920px) {
  /* watchlist, details, alerts (the Pro features) stay in view; the converter and the feed follow below with a scroll hint */
  .details { order: 1; } .holdbook, .alerts { order: 2; } .conv { order: 3; }
  .feed { order: 4; flex: none; min-height: 220px; max-height: 260px; }
}
.side-more { order: 99; position: sticky; bottom: 0; z-index: 3; flex: none; height: 44px; margin-top: -44px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 4px; background: linear-gradient(transparent, var(--bg) 70%); font-size: var(--fs-xs); color: var(--muted); pointer-events: none; opacity: 0; transition: opacity .25s; }
.side.more .side-more { opacity: 1; }
@media (max-width: 980px) { .side-more { display: none; } }
/* a 13-inch laptop browser (~1440 x 790): one-line rows (the subtitle is the row's tooltip) and the currency choice moves up
   into the converter's header, so the live feed still shows under the watchlist and the converter */
@media (min-width: 981px) and (max-height: 860px) {
  .wl-row { padding-block: 6px; }
  .wl-desc { display: none; }
  .wl-group { padding-block: 4px 2px; }
  .conv { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "h seg" "box box" "rate rate"; padding-bottom: 12px; }
  .conv .card-h { grid-area: h; padding-inline-end: 4px; }
  .conv .card-h .small { display: none; }
  .cv { display: contents; }
  .cv-seg { grid-area: seg; align-self: center; margin: 6px 0 0; margin-inline-end: 12px; }
  .cv-seg button { height: 24px; font-size: 12px; }
  .cv-box { grid-area: box; margin: 4px 12px 0; }
  .cv-rate { grid-area: rate; margin: 8px 12px 0; }
}

/* ---------- tablet: stacked ---------- */
@media (max-width: 980px) {
  .layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; height: auto; padding: 8px; }
  .chart-panel { flex: none; height: 62vh; min-height: 380px; }
  .side { overflow: visible; min-height: auto; }
  .feed { max-height: 70vh; }
  .tb-desc { display: none; }
}
@media (max-width: 1099px) { /* the full lockup needs room: below this the arch mark + stacked names */
  .logo-h { display: none; }
  .brand-c { display: flex; }
}
@media (max-width: 860px) and (min-width: 641px) {
  .live-age { display: none; }
  .tb-sep { margin: 0 2px; }
  .tb-sym, .tb-sym + .tb-sep { display: none; } /* the chart legend names the symbol */
}
@media (max-width: 780px) and (min-width: 641px) { /* Arabic timeframe words are wider: tighter options so the bar never scrolls */
  .topbar { gap: 6px; }
  .topbar .seg button { min-width: 28px; padding: 0 6px; }
}

/* ---------- phone app ---------- */
@media (max-width: 640px) {
  .d-only { display: none !important; }
  html, body { height: auto; }
  body { font-size: 14px; }
  :root { --slide: 0px; }

  /* The status bar of the home-screen app (black-translucent: white clock) sits on this band, so it stays dark in both themes. */
  .top { padding-top: env(safe-area-inset-top); background: linear-gradient(#0b0e14, #0b0e14) top / 100% env(safe-area-inset-top) no-repeat; }
  .topbar {
    --topbar-h: 54px;
    gap: 6px;
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  .brand { min-height: 40px; }
  /* RECONNECTING / IMPORTING are wider than LIVE: the pill gives way instead of pushing the buttons off-screen */
  .live { height: 30px; padding: 0 10px; gap: 6px; flex: 0 1 auto; min-width: 0; }
  .live-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .live-age { display: none; }
  .icon-btn { width: var(--tap); height: var(--tap); border-radius: 12px; }
  .icon-btn.icon-sm { width: var(--tap); height: var(--tap); }
  .acct-btn { height: 40px; }
  html, body { overscroll-behavior-y: none; } /* our own pull-to-refresh, not the browser's */
  .ticker { padding-left: max(10px, env(safe-area-inset-left)); padding-right: env(safe-area-inset-right); }
  html[dir="rtl"] .ticker { padding-left: env(safe-area-inset-left); padding-right: max(10px, env(safe-area-inset-right)); }
  .tk-viewport {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
  }

  /* on a phone the cards are nearly opaque: only the bars blur */
  .card, .chart-panel { background: rgba(19, 23, 34, .9); }
  [data-theme="light"] .card, [data-theme="light"] .chart-panel { background: rgba(255, 255, 255, .92); }

  .layout {
    display: block; height: auto;
    padding: 10px max(10px, env(safe-area-inset-right)) calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 14px) max(10px, env(safe-area-inset-left));
  }
  /* the chart tab ends on the range buttons: room under them so the assistant button never covers the last one */
  body[data-tab="chart"] .layout { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 84px); }
  /* iPhone: a quick double tap (the language button, a tab) must never zoom the page — zoomed, Safari lets the fixed
     bottom bar float loose mid-screen while scrolling; pinch zoom still works */
  html { touch-action: manipulation; }
  /* the tab bar on its own layer, so Safari keeps it glued to the bottom while its toolbar collapses mid-scroll */
  .tabbar { transform: translateZ(0); -webkit-transform: translateZ(0); will-change: transform; }
  .side { display: flex; flex-direction: column; gap: 10px; overflow: visible; }
  body[data-tab="chart"] .side { margin-top: 10px; }
  body:not([data-tab="chart"]) .chart-col,
  body:not([data-tab="chart"]) .details,
  body:not([data-tab="rates"]) .watch,
  body:not([data-tab="rates"]) .conv,
  body:not([data-tab="news"]) .feed { display: none; }
  /* 21 Oct 2026: the prices list leads its tab (the converter folds under it); no theme toggle or chart-type icons on a phone */
  .watch { order: -1; }
  #themeBtn, .chart-tools .type-seg { display: none; }
  body:not([data-tab="alerts"]) .holdbook { display: none; }
  body[data-tab="alerts"] .alerts-guest { display: block; }
  .conv.foldable > .card-h { min-height: var(--tap); padding-block: 10px; font-size: 15px; }

  /* chart tab */
  .pills { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -10px; padding: 2px 10px 12px; }
  /* fade the edge that has more pills behind it, so it reads as scrollable */
  .pills { --fs: 0px; --fe: 0px; -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fs), #000 calc(100% - var(--fe)), transparent); mask-image: linear-gradient(to right, transparent, #000 var(--fs), #000 calc(100% - var(--fe)), transparent); }
  html[dir="rtl"] .pills { -webkit-mask-image: linear-gradient(to left, transparent, #000 var(--fs), #000 calc(100% - var(--fe)), transparent); mask-image: linear-gradient(to left, transparent, #000 var(--fs), #000 calc(100% - var(--fe)), transparent); }
  .pills.fade-s { --fs: 36px; }
  .pills.fade-e { --fe: 48px; }
  .pills::-webkit-scrollbar { display: none; }
  .pill {
    flex: none; height: var(--tap); padding: 0 16px; border-radius: 22px; white-space: nowrap;
    background: var(--panel); border: 1px solid var(--line); color: var(--text); font-weight: 500; font-size: 14px;
    animation: 1.6s ease-out 1;
  }
  .pill:active { transform: scale(.96); }
  .pill.on {
    color: var(--text-strong); border-color: rgba(34, 211, 238, .5);
    background: linear-gradient(180deg, rgba(25, 230, 160, .16), rgba(34, 211, 238, .08));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 0 18px -6px var(--accent-glow);
  }
  [data-theme="light"] .pill.on { color: var(--accent); background: #fff; border-color: rgba(8, 145, 178, .45); box-shadow: 0 4px 14px -6px var(--accent-glow); }
  .hero { position: relative; padding: 2px 2px 12px; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
  .hero > .sk { margin: 8px 0; }
  .hero-top { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 2px; padding-inline-end: 96px; }
  .hero-upd { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
  .hero-name { font-size: 17px; font-weight: 600; color: var(--text-strong); }
  .hero-sub { flex-basis: 100%; font-size: 12px; color: var(--muted); }
  .hero-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin-top: 6px; }
  .hero-price { font-size: 36px; font-weight: 600; line-height: 1.1; letter-spacing: -.02em; color: var(--text-strong); }
  [data-theme="dark"] .hero-price { text-shadow: 0 0 26px rgba(34, 211, 238, .18); }
  .hero-cur { font-size: 13px; font-weight: 500; color: var(--muted); }
  .hero-chg { font-size: 15px; font-weight: 500; }
  .hero-upd { margin-top: 5px; font-size: 12px; color: var(--muted); }
  .hero-dots { display: flex; gap: 5px; margin-top: 10px; }
  .hero-dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--line-2); transition: width .3s var(--spring), background-color .3s; }
  .hero-dots i.on { width: 18px; background: var(--grad-2); box-shadow: 0 0 8px var(--accent-glow); }

  .chart-panel { height: auto; min-height: 0; border-radius: 14px; }
  /* 8 equal 44 px targets; the timeframes share what the 3 type icons leave, so Arabic's wider words still fit */
  .chart-tools { display: flex; align-items: center; gap: 6px; padding: 4px; border-bottom: 1px solid var(--line); }
  .chart-tools .seg, .rangebar .seg { padding: 0; border: 0; background: none; }
  .chart-tools .seg button { height: 44px; min-width: 0; padding: 0 4px; font-size: 13px; }
  .chart-tools .seg-ind, .rangebar .seg-ind { top: 4px; bottom: 4px; border-radius: 10px; }
  .chart-tools .tf-seg { flex: 1; min-width: 0; }
  .chart-tools .tf-seg button { flex: 1 1 0; }
  /* Arabic says the hours in words (ساعة / 4 ساعات): the buttons share the row by their label length, not equally */
  html[lang="ar"] .chart-tools .tf-seg button { flex: 1 1 auto; padding: 0 5px; white-space: nowrap; }
  html[lang="ar"] .chart-tools .type-seg button { width: 38px; }
  .chart-tools .type-seg button { width: 42px; }
  .chart-box { flex: none; height: 44vh; min-height: 260px; }
  .legend { top: 6px; left: 8px; max-width: calc(100% - 76px); }
  .lg-row1, .lg-quote { display: none; } /* the hero above the chart carries the name and the price */
  .lg-row2 { margin-top: 0; font-size: 11px; gap: 0 8px; }
  /* all 8 ranges on screen (the active one must stay visible), spread across the bar */
  .rangebar { height: auto; padding: 2px 4px; }
  .ranges { flex: 1; }
  .ranges button { flex: 1 0 auto; height: 44px; padding: 0 4px; font-size: 13px; }
  html[lang="ar"] .ranges button { font-size: 12px; padding: 0 5px; } /* with the short العام: all eight fit 375 px, and breathe */
  /* the lock glyph on a Pro range takes no inline room on a phone (eight labels already fill 375 px): a small corner mark instead */
  .ranges button { position: relative; }
  .ranges button .lock-sm { position: absolute; top: 5px; inset-inline-end: 0; width: 9px; height: 9px; margin: 0; }
  .ranges button .lock-sm svg { width: 9px; height: 9px; }
  .tz { display: none; }

  .details { padding: 14px; }
  .details .dt-top, .details .dt-sub { display: none; }
  .dt-grid { margin-top: 0; gap: 12px 14px; }
  .dt-grid .k { font-size: 12px; }
  .dt-grid .v { font-size: 14px; }
  .dt-note { font-size: 13px; }

  /* rates tab: converter on top, then the watchlist (name · 30-day sparkline · price over change) */
  .conv .card-h, .watch .card-h { padding: 14px 14px 8px; font-size: 15px; }
  .cv { padding: 0 14px 14px; gap: 10px; }
  .cv-seg button { height: var(--tap); font-size: 14px; }
  .cv-in { height: 56px; }
  #cvAmt { font-size: 26px; }
  .cv-swap { width: 56px; height: 56px; }
  .cv-out { height: 64px; }
  .cv-res { font-size: 30px; }
  .cv-res.long { font-size: 22px; }
  .cv-res.xlong { font-size: 16px; }
  .cv-unit { font-size: 13px; }
  .cv-rate { font-size: 13px; }
  .wl-group { padding: 10px 14px 4px; }
  .wl-row { min-height: 66px; padding: 10px 14px; gap: 12px; grid-template-columns: minmax(0, 1fr) 64px auto; }
  .wl-name { font-size: 15px; }
  /* subtitle first, the USD/LYD code tag drops to its own line when both do not fit (no word split around it) */
  .wl-desc { font-size: 12px; margin-top: 1px; gap: 2px 6px; }
  .wl-desc .code { display: none; } /* the hero shows the code next to the name */
  .wl-spark { width: 64px; height: 22px; }
  .wl-q { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; min-width: 84px; }
  .wl-last { font-size: 16px; }
  .wl-chg { min-width: 76px; padding: 4px 8px; border-radius: 7px; font-size: 13px; }
  .sk-row { grid-template-columns: minmax(0, 1fr) 64px 84px; padding: 14px; }

  /* news tab */
  .feed { max-height: none; min-height: 0; }
  .feed .card-h { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 14px 8px; font-size: 15px; }
  #feedSeg { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; border-radius: 11px; }
  #feedSeg button { height: var(--tap); font-size: 14px; border-radius: 8px; }
  #feedSeg .seg-ind { top: 3px; bottom: 3px; border-radius: 8px; }
  #feed { overflow: visible; padding: 0 8px 8px; }
  .feed-day { top: calc(var(--topbar-h) + var(--tk-h) + env(safe-area-inset-top)); margin: 0 -8px; padding: 10px 14px 6px; font-size: var(--fs-sm); background: var(--bg); border-bottom: 1px solid var(--line); }
  [data-theme="dark"] .feed-day { background: #0f131b; }
  .feed-day:first-child { border-radius: 0; }
  .post { padding: 12px 6px; }
  .post-h { font-size: 12px; }
  .post-h a { padding: 12px 4px; margin-block: -12px; }
  .chip { font-size: 13px; padding: 4px 8px; }
  .post details summary { font-size: 12px; padding: 12px 0; margin: -2px 0 -8px; }
  .post-text { font-size: 14px; }
  .news-link { font-size: 15.5px; padding: 4px 0; }
  .news-more { padding: 14px 4px; margin: -4px -4px -12px; font-size: 12px; }
  .feed-title a { display: inline-block; padding: 12px 4px; margin-block: -12px; }

  /* tab bar: glass, with a glowing bar that slides to the active tab */
  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: var(--bar); border-top: 1px solid var(--line);
    -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
    padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }
  .tabbar button {
    position: relative; z-index: 1;
    flex: 1; height: var(--tabbar-h); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    color: var(--muted); font-size: 11px; font-weight: 500;
  }
  .tabbar button:active { transform: scale(.94); }
  .tabbar svg { width: var(--icon-tab); height: var(--icon-tab); fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--spring); }
  .tabbar button.on { color: var(--accent); }
  .tabbar button.on svg { transform: translateY(-1px); }
  [data-theme="dark"] .tabbar button.on svg { filter: drop-shadow(0 0 6px var(--accent-glow)); }
  .tab-ind { top: -1px; bottom: auto; height: var(--tabbar-h); background: none; box-shadow: none; border-radius: 0; }
  .tab-ind::before {
    content: ""; position: absolute; top: 0; left: 50%; width: 30px; height: 3px; margin-left: -15px; border-radius: 0 0 3px 3px;
    background: var(--grad-2); box-shadow: 0 0 12px 1px var(--accent-glow);
  }
  .tab-ind::after {
    content: ""; position: absolute; top: 0; left: 50%; width: 64px; height: 40px; margin-left: -32px;
    background: radial-gradient(closest-side, var(--accent-soft), transparent); opacity: .9;
  }
  [data-theme="light"] .tab-ind { box-shadow: none; }

  #toasts { inset-inline: 10px; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 10px); }
  .toast { min-width: 0; max-width: none; animation-name: toastUp; }
  .toast.out { transform: translateY(8px); }
  /* one slim line; a burst merges into it; swipe it (or tap it) away */
  .toast-mini { display: flex; align-items: center; gap: 8px; padding: 9px 12px; padding-inline-start: 15px; font-weight: 600; color: var(--text-strong); touch-action: none; cursor: grab; }
  .toast-mini .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--up-c); box-shadow: 0 0 8px var(--up-glow); flex: none; }
  .toast-mini .t-line { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .toast-mini .t-sep { color: var(--muted); margin: 0 6px; font-weight: 400; }
  .toast-mini .t-time { color: var(--muted); font-weight: 400; font-size: 12px; margin-inline-start: auto; flex: none; }
  @keyframes toastUp { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
}

/* ---------- still: no drifting, rolling or sliding ---------- */
@media (prefers-reduced-motion: reduce) {
  .sheet, .sheet-backdrop, .lock, .net-pill, .ptr.busy .ptr-ring { animation: none !important; }
  .sheet.settle, .sheet-root.closing .sheet, .sheet-root.closing .sheet-backdrop, .ptr.settle, .ptr .ptr-arrow, .btn, .icon-btn, .acct-btn { transition: none !important; }
  .sheet-root.closing .sheet { transform: none !important; opacity: 0; }
  .btn:active { transform: none; }
  .au, .sk::after, .chart-sk::after, .live[data-state] .dot, .live[data-state] .dot::after, .tk-label::before { animation: none !important; }
  .tk-track.run { animation: none; }
  .tk-viewport { overflow-x: auto; scrollbar-width: none; -webkit-mask-image: none; mask-image: none; }
  .tk-viewport::-webkit-scrollbar { display: none; }
  .tk-label.pulse, .tk-label.pulse::after, .cv-swap.tap { animation: none; }
  .tk-label, .tk-label::before { transition: none; }
  .toast { animation: none; }
  .toast.out { transform: none; }
  .seg-ind, .od-s, .hero-dots i, .tabbar svg, .wl-row::before { transition: none !important; }
  .ripple.go, .ripple.go::before, .ripple.go::after, .wl-row::after { animation: none !important; opacity: 0; }
  .post.fresh, .post.fresh::before { animation-duration: .01s; }
  button:active, .wl-row:active, .pill:active { transform: none; }
}

/* =====================================================================================================================
   Members layer (web/members.js): account button, auth / account / pricing sheets, gates, price alerts, the Pro banner.
   Everything below reuses the tokens and the .btn / .field / .lock / .pro-badge primitives defined above.
   ===================================================================================================================== */

/* ---------- account button in the top bar ---------- */
.acct-btn svg { width: var(--icon); height: var(--icon); fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; flex: none; }
.acct-btn.signin { padding-inline: 10px var(--sp-3); }
.acct-btn .acct-label { max-width: 11ch; overflow: hidden; text-overflow: ellipsis; }
.acct-btn .pro-badge { margin-inline-start: 2px; }
.acct-btn.pro { border-color: rgba(34, 211, 238, .3); }
@media (max-width: 640px) {
  .acct-btn, .acct-btn.signin { width: var(--tap); height: var(--tap); padding: 0; justify-content: center; border-radius: 12px; }
  .acct-btn .acct-label, .acct-btn .pro-badge { display: none; }
  .acct-btn .avatar { width: 28px; height: 28px; font-size: var(--fs-md); }
}

/* ---------- Pro banner: one slim strip under the news on wide screens, a card on phones ---------- */
.pro-banner {
  position: relative; display: flex; align-items: center; gap: var(--sp-3); min-height: var(--banner-h, 44px); padding: 6px var(--sp-4);
  background: linear-gradient(90deg, rgba(25, 230, 160, .09), rgba(34, 211, 238, .06) 50%, rgba(41, 98, 255, .08)); border-bottom: 1px solid var(--line);
  color: var(--text); font-size: var(--fs-md);
}
[data-theme="light"] .pro-banner { background: linear-gradient(90deg, rgba(10, 168, 116, .09), rgba(8, 145, 178, .06) 50%, rgba(41, 98, 255, .06)); }
.pb-text { display: flex; align-items: baseline; gap: 2px 10px; min-width: 0; flex: 1; flex-wrap: wrap; line-height: 1.35; }
.pb-text b { display: inline-flex; align-items: center; gap: 8px; color: var(--text-strong); font-weight: var(--fw-semibold); white-space: nowrap; }
.pb-text span { color: var(--muted); min-width: 0; }
.pb-text .pb-short { display: none; }
.pb-cta { flex: none; }
.pro-banner .pb-x { flex: none; color: var(--muted); }
:root { --banner-h: 44px; }
body.has-banner .layout { height: calc(100vh - var(--topbar-h) - var(--tk-h) - var(--banner-h)); height: calc(100dvh - var(--topbar-h) - var(--tk-h) - var(--banner-h)); }
@media (max-width: 980px) { body.has-banner .layout { height: auto; } }
@media (max-width: 640px) {
  /* one slim strip on the Chart tab only: PRO badge, one short line, a text-link CTA; never a card above the hero price */
  body:not([data-tab="chart"]) .pro-banner { display: none; }
  .pro-banner { margin: 10px max(10px, env(safe-area-inset-right)) 0 max(10px, env(safe-area-inset-left)); min-height: 44px; max-height: 56px; padding: 0; padding-inline: 12px 2px; border: 1px solid var(--line); border-radius: 12px; gap: 6px; }
  .pb-text { flex-wrap: nowrap; align-items: center; gap: 8px; }
  .pb-text b > span:not(.pb-badge), .pb-text .pb-long { display: none; }
  .pb-text .pb-short { display: inline; font-size: var(--fs-sm); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pb-cta { height: 36px; padding: 0 8px; background: none; border-color: transparent; box-shadow: none; color: var(--accent); font-size: var(--fs-md); }
  .pro-banner .pb-x { width: 36px; height: 36px; }
  /* the offline / back-online pill sits above the tab bar, clear of the hero and the banner */
  .net-pill { top: auto; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 12px); max-width: calc(100% - 24px); white-space: normal; text-align: center; height: auto; min-height: 32px; padding: 6px 14px; }
  @keyframes pillDrop { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
}

/* ---------- gates: locked ranges, the locked stats block, the export button ---------- */
#ranges button.gated { color: var(--muted); }
#ranges button.gated.on { color: var(--accent); }
.lock-sm { display: inline-grid; place-items: center; width: 12px; height: 12px; margin-inline-start: 3px; color: var(--accent); opacity: .85; vertical-align: -1px; }
.lock-sm svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pill .lock-sm { margin-inline-start: 5px; }
.wl-chg.lockchip { display: inline-grid; place-items: center; color: var(--accent); background: var(--accent-soft); border-color: var(--ind-ring); }
.wl-chg.lockchip .lock-sm { margin: 0; width: 14px; height: 14px; }
.post-tg { margin-inline-start: auto; width: 24px; height: 20px; display: inline-grid; place-items: center; border-radius: var(--r-xs); font-size: 13px; line-height: 1; }
.dt-gate { position: relative; border-radius: var(--r-md); min-height: 96px; }
.dt-gate.locked > :not(.lock) { filter: blur(2.5px); opacity: .55; -webkit-user-select: none; user-select: none; } /* the whole gated grid is frosted, no date leaks out */
.dt-gate.wide { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.dt-gate.wide .wide { grid-column: 1 / -1; }
.dt-gate > .dt-grid { margin-top: 0; }
.lock.compact { inset: -4px; padding: var(--sp-2); }
.lock.compact .lock-card { display: flex; align-items: center; gap: var(--sp-3); max-width: none; width: 100%; padding: 10px 12px; text-align: start; }
.lock.compact .lock-icon { width: 32px; height: 32px; flex: none; }
.lock.compact .lock-icon svg { width: 16px; height: 16px; }
.lock.compact .lock-text { flex: 1; min-width: 0; font-size: var(--fs-sm); }
.lock.compact .btn { margin: 0; flex: none; height: 30px; padding: 0 10px; font-size: var(--fs-sm); }
.dt-foot { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-3); margin-top: 12px; }
.dt-export svg { width: 16px; height: 16px; }
.dt-export.gated, #exportBtn.gated { color: var(--muted); }
#exportBtn { position: relative; }
#exportBtn.gated::after { content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); top: 4px; inset-inline-end: 4px; box-shadow: 0 0 6px var(--accent-glow); }
.wl-pro { margin-inline-start: 6px; vertical-align: 1px; height: 16px; padding: 0 6px; font-size: 9px; }

/* ---------- forms inside sheets ---------- */
.form { display: grid; gap: var(--sp-3); }
.form-err { display: flex; gap: var(--sp-2); align-items: flex-start; padding: 10px 12px; border-radius: var(--r-md); background: var(--down-soft); border: 1px solid rgba(255, 84, 112, .3); color: var(--down); font-size: var(--fs-md); line-height: 1.5; }
.form-err:empty { display: none; }
.field .in button { display: grid; place-items: center; width: 32px; height: 32px; margin-inline-end: -6px; border-radius: var(--r-sm); color: var(--muted); flex: none; font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.field .in button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; }
.field input[type="tel"], .field input[type="password"], .field input[type="text"][inputmode="decimal"] { direction: ltr; text-align: start; }
html[dir="rtl"] .field input[type="password"] { text-align: right; }
.field.tel .in { direction: ltr; } /* +218 | 091 234 5678 in both languages */
.field.tel input { text-align: left; }
.field input[type="password"]:not(:placeholder-shown) { letter-spacing: .14em; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; margin-bottom: var(--sp-4); border-radius: 11px; background: var(--track); border: 1px solid var(--line); }
.auth-tabs button { height: 38px; border-radius: 8px; color: var(--muted); font-weight: var(--fw-medium); font-size: var(--fs-base); }
.auth-tabs button.on { color: var(--text-strong); background: var(--ind-bg); box-shadow: inset 0 0 0 1px var(--ind-ring); }
.auth-switch { margin-top: var(--sp-3); text-align: center; font-size: var(--fs-md); color: var(--muted); }
.auth-switch button { color: var(--accent); font-weight: var(--fw-medium); padding: 6px; }
.btn.busy { position: relative; color: transparent !important; pointer-events: none; }
.btn.busy::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; color: #04130d; animation: spin .7s linear infinite; }
.btn.busy:not(.btn-primary)::after { color: var(--accent); }
[data-theme="light"] .btn-primary.busy::after { color: #fff; }
.sheet-sub { margin: -6px 0 var(--sp-4); color: var(--muted); font-size: var(--fs-md); line-height: 1.55; }
.sheet-sec { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.sheet-sec > h3 { margin: 0 0 var(--sp-3); font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
html[lang="ar"] .sheet-sec > h3 { letter-spacing: 0; font-size: var(--fs-sm); text-transform: none; }

/* ---------- account sheet ---------- */
.acct-head { display: flex; align-items: center; gap: var(--sp-3); }
.acct-head .avatar { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-2xl); font-weight: var(--fw-semibold); color: #04130d; background: var(--grad-2); box-shadow: 0 0 18px -4px var(--accent-glow); flex: none; }
[data-theme="light"] .acct-head .avatar { color: #fff; }
.acct-head .who { min-width: 0; flex: 1; display: grid; gap: 2px; }
.acct-head .name { font-size: var(--fs-xl); font-weight: var(--fw-semibold); color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-head .phone { color: var(--muted); font-size: var(--fs-md); direction: ltr; unicode-bidi: isolate; text-align: start; }
html[dir="rtl"] .acct-head .phone { text-align: right; }
.tier-badge.pro { color: var(--up); background: var(--up-soft); border-color: rgba(25, 230, 160, .3); }
.pend-steps b { color: var(--text-strong); font-weight: var(--fw-semibold); }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 44px; padding: 4px 0; }
.set-row > span { color: var(--text); font-size: var(--fs-md); }
.set-row .seg { flex: none; }
.set-row .seg button { height: 30px; min-width: 44px; font-size: var(--fs-sm); }
.set-row .seg.wide button { min-width: 0; padding: 0 10px; }
.acct-actions { display: grid; gap: var(--sp-2); }
.acct-actions .btn { justify-content: flex-start; gap: var(--sp-3); font-weight: var(--fw-medium); }
.acct-actions .btn svg { color: var(--muted); }
.acct-actions .btn.danger { color: var(--down); }
.acct-actions .btn.danger svg { color: inherit; }

/* ---------- pricing sheet ---------- */
.benefits { display: grid; gap: 8px; margin: 0 0 var(--sp-4); padding: 0; list-style: none; }
.benefits li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-md); line-height: 1.5; color: var(--text); }
.benefits li svg { width: 18px; height: 18px; flex: none; margin-top: 1px; fill: none; stroke: var(--up-c); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.benefits li .pro-badge.outline { margin-inline-start: 4px; }
.benefits li.soon { color: var(--muted); }
.benefits li.soon svg { stroke: var(--muted); stroke-width: 1.75; }
.plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.plan {
  position: relative; display: grid; gap: 2px; align-content: start; padding: 12px 12px 10px; min-height: 92px; border-radius: var(--r-lg); text-align: start;
  background: var(--track); border: 1px solid var(--line-2); color: var(--text); transition: border-color .25s, box-shadow .25s, background-color .25s, transform .14s var(--ease);
}
.plan .pl-months { font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--text); }
.plan .pl-price { font-size: 22px; font-weight: var(--fw-semibold); color: var(--text-strong); letter-spacing: -.01em; line-height: 1.15; }
.plan .pl-price small { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--muted); margin-inline-start: 3px; }
.plan .pl-per { font-size: var(--fs-xs); color: var(--muted); }
.plan .pl-badge { position: absolute; top: -9px; inset-inline-start: 10px; max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; height: 18px; padding: 0 7px; border-radius: var(--r-pill); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); letter-spacing: .04em; line-height: 18px; white-space: nowrap; color: var(--accent); background: var(--panel-solid); border: 1px solid var(--ind-ring); }
.plan.best { border-color: rgba(25, 230, 160, .45); background: linear-gradient(180deg, rgba(25, 230, 160, .09), rgba(34, 211, 238, .04)); }
.plan.best .pl-badge { color: #04130d; background: var(--grad-2); border-color: transparent; box-shadow: 0 0 12px -3px var(--accent-glow); }
[data-theme="light"] .plan.best .pl-badge { color: #fff; background: linear-gradient(90deg, #0aa874, #0e7490); }
.plan.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 22px -8px var(--accent-glow); }
.plan.on::after { content: ""; position: absolute; top: 10px; inset-inline-end: 10px; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23000' stroke='none'/%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' stroke='%23fff'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23000' stroke='none'/%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' stroke='%23fff'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (hover: hover) { .plan:hover { border-color: rgba(34, 211, 238, .45); } }
.pay-list { display: grid; gap: 8px; }
.pay { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: var(--r-md); text-align: start; background: var(--track); border: 1px solid var(--line); color: var(--text); transition: border-color .25s, background-color .25s; }
.pay .radio { width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; border: 2px solid var(--line-2); flex: none; display: grid; place-items: center; transition: border-color .2s; }
.pay .radio::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); transform: scale(0); transition: transform .2s var(--spring); }
.pay.on { border-color: var(--accent); background: var(--accent-soft); }
.pay.on .radio { border-color: var(--accent); }
.pay.on .radio::after { transform: scale(1); }
.pay .pay-l { font-weight: var(--fw-medium); color: var(--text-strong); font-size: var(--fs-base); }
.pay .pay-d { font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; margin-top: 1px; white-space: pre-line; }
.ref-box { display: grid; gap: 4px; padding: 14px; border-radius: var(--r-lg); text-align: center; background: var(--track); border: 1px dashed var(--line-2); }
.ref-box .k { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
html[lang="ar"] .ref-box .k { letter-spacing: 0; text-transform: none; font-size: var(--fs-sm); }
.ref-box .ref { font-size: 28px; font-weight: var(--fw-semibold); letter-spacing: .12em; color: var(--text-strong); direction: ltr; unicode-bidi: isolate; text-shadow: 0 0 22px var(--accent-glow); }
[data-theme="light"] .ref-box .ref { text-shadow: none; }
.ref-box .btn { justify-self: center; margin-top: 6px; }
.pend-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 10px 0; font-size: var(--fs-md); border-bottom: 1px solid var(--line); }
.pend-line:last-child { border-bottom: 0; }
.pend-line .k { color: var(--muted); }
.pend-line .v { color: var(--text-strong); font-weight: var(--fw-medium); }
.pend-steps { margin: var(--sp-3) 0 0; padding: 0 0 0 18px; color: var(--text); font-size: var(--fs-md); line-height: 1.6; }
html[dir="rtl"] .pend-steps { padding: 0 18px 0 0; }
.pend-steps li + li { margin-top: 4px; }
.contact-row { display: flex; flex-wrap: wrap; gap: 8px; }
.cancel-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--fs-md); color: var(--text); }
.cancel-confirm > span { flex: 1 1 100%; }
.cancel-confirm .btn.danger { color: var(--down); border-color: rgba(255, 84, 112, .35); }
.contact-row .btn { flex: 1; }
.status-pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: .02em; color: var(--warn-ink); background: var(--warn-soft); border: 1px solid var(--warn-line); }
.status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--warn); animation: blink 1.6s ease-in-out infinite; }

/* ---------- price alerts card ---------- */
.alerts { flex: none; }
.al-title { display: inline-flex; align-items: center; gap: 8px; }
.al-add { height: 30px; padding: 0 10px; margin-block: -4px; margin-inline: 0 -6px; }
.al-add svg { width: 16px; height: 16px; }
#alBody { padding: 0 12px 12px; display: grid; gap: 8px; }
.al-empty { display: flex; gap: 10px; align-items: flex-start; color: var(--muted); font-size: var(--fs-sm); line-height: 1.55; padding: 4px 0 2px; }
.al-empty svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; margin-top: 1px; }
.al-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 10px 12px; border-radius: var(--r-md); background: var(--panel-2); border: 1px solid var(--line); transition: border-color .3s, box-shadow .3s; }
.al-row.fired { border-color: rgba(25, 230, 160, .35); box-shadow: 0 0 18px -8px var(--up-glow); }
.al-row.off { opacity: .7; }
.al-main { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 6px; font-size: var(--fs-md); color: var(--text-strong); font-weight: var(--fw-medium); min-width: 0; }
.al-main .op { color: var(--muted); font-weight: var(--fw-regular); }
.al-main .lvl { font-weight: var(--fw-semibold); }
.al-sub { grid-column: 1; font-size: var(--fs-xs); color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.al-sub .state-chip { height: 18px; font-size: var(--fs-2xs); }
.al-sub .state-chip.armed { color: var(--up); background: var(--up-soft); border-color: rgba(25, 230, 160, .3); }
.al-sub .state-chip.armed::before { background: var(--up-c); }
.al-sub .state-chip.fired { color: var(--accent); background: var(--accent-soft); border-color: var(--ind-ring); }
.al-sub .state-chip.fired::before { background: var(--accent); }
.al-sub .state-chip.off { color: var(--muted); background: var(--panel-2); border-color: var(--line-2); }
.al-sub .state-chip.off::before { background: var(--muted); }
.al-act { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 2px; align-items: center; }
.al-act button { width: 32px; height: 32px; border-radius: var(--r-md); display: grid; place-items: center; color: var(--muted); }
.al-act button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; }
.al-act button.go { color: var(--accent); }
@media (hover: hover) { .al-act button:hover { background: var(--hover); color: var(--text-strong); } .al-act button.del:hover { color: var(--down); } }
.al-form { display: grid; gap: 10px; padding: 12px; border-radius: var(--r-lg); background: var(--panel-2); border: 1px solid var(--line-2); animation: fadeIn .25s var(--ease) backwards; }
.al-form .seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.al-form .seg button { padding: 0 6px; font-size: var(--fs-sm); min-width: 0; }
.al-form .field .in { height: 44px; }
.al-form .field input { font-weight: var(--fw-semibold); font-size: 17px; }
.al-form .op-seg button { height: 34px; font-size: var(--fs-md); }
.al-form .form-actions { display: flex; gap: 8px; justify-content: flex-end; }
.al-form .hint { font-size: var(--fs-xs); color: var(--muted); }
.alerts .lock-host { position: relative; min-height: 112px; border-radius: var(--r-md); }
.toast-text.alert { border-color: rgba(25, 230, 160, .4); }
.toast-text.alert .dot { background: var(--up-c); box-shadow: 0 0 8px var(--up-glow); }
.toast-text.alert span:last-child { line-height: 1.45; }
@media (max-width: 640px) {
  body:not([data-tab="alerts"]) .alerts { display: none; }
  .alerts .card-h { padding: 14px 14px 8px; font-size: 15px; }
  .al-add { height: 36px; }
  #alBody { padding: 0 14px 14px; }
  .al-row { padding: 12px 14px; }
  .al-act button { width: 40px; height: 40px; }
  .al-form .seg[data-pick="sym"] { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .al-form .seg[data-pick="sym"] button { height: 36px; }
  .plan { min-height: 96px; }
  .set-row .seg button { height: 36px; }
}

/* ---------- reduced motion for the new pieces ---------- */
@media (prefers-reduced-motion: reduce) {
  .status-pill::before, .btn.busy::after { animation: none !important; }
  .plan, .pay, .pay .radio::after, .al-row { transition: none !important; }
  .al-form { animation: none !important; }
}

/* 320-359 px phones (iPhone SE 1st gen, split views): the header has no slack, so the stacked names give way and the
   pill keeps its whole word (LIVE / مباشر) instead of clipping to "LI…" */
@media (max-width: 359px) {
  .logo-s { display: none; }
  .brand { padding-inline-end: 0; }
  .topbar { gap: 4px; }
}

/* ---------- fix1 (18 Oct): sign-in hint, Pro status line, the other-language payment line, the push hint ---------- */
.auth-new { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; padding: 8px 12px; border-radius: var(--r-md); background: var(--panel-2); border: 1px solid var(--line); font-size: var(--fs-md); color: var(--text); }
.auth-new[hidden] { display: none; }
.auth-new .btn { flex: none; }
.sheet-note.pro-now { align-items: center; flex-wrap: wrap; color: var(--text); }
.sheet-note.pro-now > span { flex: 1 1 180px; }
.sheet-note.pro-now .btn { flex: none; }
.pay-alt { display: inline-block; margin-top: 2px; unicode-bidi: isolate; }
/* phone alerts (Web Push): one row under the list, its text and buttons follow the device's state */
.al-phone {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 10px; align-items: start; width: 100%; padding: 10px 12px;
  border-radius: var(--r-md); background: var(--panel-2); border: 1px dashed var(--line-2); color: var(--muted); text-align: start; font: inherit;
}
.al-phone[hidden] { display: none; }
.al-phone[data-state="on"] { border-style: solid; border-color: rgba(25, 230, 160, .3); }
.alp-ic { width: 32px; height: 32px; border-radius: var(--r-md); display: grid; place-items: center; color: var(--accent); background: var(--accent-soft); }
.al-phone[data-state="blocked"] .alp-ic, .al-phone[data-state="unsupported"] .alp-ic, .al-phone[data-state="ios-old"] .alp-ic { color: var(--muted); background: var(--panel); }
.alp-ic svg, .alp-pro svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; }
.alp-txt { display: grid; gap: 2px; min-width: 0; font-size: var(--fs-sm); line-height: 1.5; }
.alp-txt b { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--text-strong); font-weight: var(--fw-semibold); font-size: var(--fs-md); }
.alp-txt .state-chip { height: 18px; font-size: var(--fs-2xs); color: var(--up); background: var(--up-soft); border-color: rgba(25, 230, 160, .3); }
.alp-txt .state-chip::before { background: var(--up-c); }
.alp-txt ol { margin: 4px 0 0; padding-inline-start: 18px; display: grid; gap: 3px; }
.alp-act { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; }
.alp-act .btn-ghost { padding: 0 var(--sp-2); }
.al-phone.locked { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; cursor: pointer; margin-top: 2px; }
.alp-pro {
  display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: var(--r-pill); white-space: nowrap;
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--ind-ring);
}
.alp-pro svg { width: 13px; height: 13px; }
@media (hover: hover) { .al-phone.locked:hover { border-color: var(--ind-ring); } }
.al-push { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 2px; color: var(--muted); font-size: var(--fs-sm); line-height: 1.5; }
.al-push[hidden] { display: none; }
.al-push svg { width: 16px; height: 16px; flex: none; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; }

/* ---------- fix2 (18 Oct): forgot password, forget this number, abroad hint, locked quote cards, how it works ---------- */
.link-btn { display: inline-block; padding: 4px 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-medium); cursor: pointer; text-align: start; }
.link-btn:hover { text-decoration: underline; }
.form .auth-forget { margin-top: -6px; }
.form .auth-forgot { justify-self: end; align-self: flex-end; margin-top: -6px; }
.auth-new { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 12px; }
.auth-new .an-q { min-width: 0; }
.auth-abroad[hidden], .auth-switch[hidden] { display: none; }
.auth-abroad .btn svg, .contact-row .btn svg { width: 16px; height: 16px; }
.chip-lock { cursor: pointer; align-items: center; color: var(--muted); font: inherit; font-size: 12px; }
.chip-lock .lock-sm { display: inline-flex; }
.chip-lock .lock-sm svg { width: 11px; height: 11px; }
.chip-lock .pro-badge { font-size: 9px; padding: 1px 5px; }
.chip-lock:hover { border-color: var(--ind-ring); color: var(--text); }
.fx-line:empty { display: none; }
.sheet-sec.how h3 { margin-bottom: 8px; }
.benefits.trust { margin: 0; }
.benefits.trust li { font-size: var(--fs-sm); color: var(--muted); }
.benefits.trust li svg { stroke: var(--muted); stroke-width: 1.9; width: 16px; height: 16px; }
#pendStatus:focus { outline: none; }
#pendStatus:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.site-foot { order: 98; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; padding: 6px 4px 14px; color: var(--muted); font-size: var(--fs-xs); line-height: 1.5; }
.site-foot .link-btn { font-size: var(--fs-xs); }
.about p { margin: 0 0 10px; font-size: var(--fs-md); line-height: 1.6; color: var(--text); }
.about h3 { margin: 16px 0 8px; }
.about .contact-row { margin-top: 8px; }

/* =====================================================================================================================
   v4 (19 Oct 2026): launch pricing + the 24-hour trial (SPEC-v4 §2, §3). One 3-month package, a live spot counter,
   guests see the official rate + gold 18 + news and the market prices frosted behind «سجّل وجرّب 24 ساعة ببلاش».
   ===================================================================================================================== */

/* ---------- package sheet ---------- */
.pkg-hero {
  position: relative; display: grid; gap: 6px; padding: 16px 16px 14px; border-radius: var(--r-xl); overflow: hidden;
  background: linear-gradient(160deg, rgba(25, 230, 160, .10), rgba(34, 211, 238, .05) 45%, rgba(41, 98, 255, .08));
  border: 1px solid var(--ind-ring); box-shadow: 0 0 34px -18px var(--accent-glow);
}
[data-theme="light"] .pkg-hero { background: linear-gradient(160deg, rgba(10, 168, 116, .08), rgba(8, 145, 178, .05) 45%, rgba(41, 98, 255, .06)); }
.pkg-tier {
  justify-self: start; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: #04130d; background: var(--grad-2); box-shadow: 0 0 12px -3px var(--accent-glow); white-space: nowrap;
}
[data-theme="light"] .pkg-tier { color: #fff; background: linear-gradient(90deg, #0aa874, #0e7490); box-shadow: none; }
.pkg-tier.std { color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--ind-ring); }
.pkg-tier svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pkg-name { font-size: var(--fs-xl); font-weight: var(--fw-semibold); color: var(--text-strong); margin-top: 2px; }
.pkg-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; line-height: 1; }
.pkg-price .amt { font-size: 52px; font-weight: var(--fw-semibold); letter-spacing: -.02em; color: var(--text-strong); }
[data-theme="dark"] .pkg-price .amt { text-shadow: 0 0 30px rgba(34, 211, 238, .28); }
.pkg-price .cur { font-size: var(--fs-xl); font-weight: var(--fw-medium); color: var(--text); }
.pkg-price .per { font-size: var(--fs-md); color: var(--muted); }
.pkg-fx { font-size: var(--fs-sm); color: var(--muted); }
.pkg-fx:empty { display: none; }
.pkg-count { display: grid; gap: 6px; margin-top: 6px; }
.pkg-bar { position: relative; height: 8px; border-radius: var(--r-pill); background: var(--track); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.pkg-bar b { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: inherit; background: var(--grad-2); box-shadow: 0 0 12px var(--accent-glow); }
.pkg-count-row { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 2px 10px; font-size: var(--fs-md); }
.pkg-left { color: var(--text-strong); font-weight: var(--fw-semibold); }
.pkg-left .n { color: var(--up); }
.pkg-next { color: var(--muted); font-size: var(--fs-sm); }
.pkg-life { display: flex; gap: 10px; align-items: flex-start; margin-top: var(--sp-4); padding: 10px 12px; border-radius: var(--r-md); background: var(--up-soft); border: 1px solid rgba(25, 230, 160, .28); color: var(--text); font-size: var(--fs-md); line-height: 1.55; }
.pkg-life svg { width: 18px; height: 18px; flex: none; margin-top: 2px; fill: none; stroke: var(--up-c); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pkg-life b { color: var(--text-strong); font-weight: var(--fw-semibold); }
.pkg-included { margin-top: var(--sp-4); }
.pkg-included > h3 { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--muted); }
html[lang="en"] .pkg-included > h3 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; }
.pkg-included .benefits { margin: 0; }
.pkg-member { display: grid; gap: 10px; }
.pkg-member .pm-line { font-size: var(--fs-lg); line-height: 1.55; color: var(--text-strong); font-weight: var(--fw-medium); }
.pkg-member .pm-line b { color: var(--up); font-weight: var(--fw-semibold); }
.pkg-member .btn { justify-self: start; }
.pkg-guest { display: grid; gap: 8px; }
.pkg-guest .pg-note { margin: 0; text-align: center; color: var(--muted); font-size: var(--fs-sm); }
.pkg-ended { margin-bottom: 12px; }
.sheet-actions .btn-block .pr { opacity: .9; font-weight: var(--fw-medium); }

/* ---------- trial: the countdown on the account button and in the account sheet ---------- */
.acct-btn .trial-chip {
  display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: var(--r-pill); white-space: nowrap;
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--ind-ring);
}
.acct-btn .trial-chip svg { width: 12px; height: 12px; stroke-width: 2.2; }
.acct-btn .trial-chip .tc-short { display: none; }
.acct-btn.trial-low .trial-chip { color: var(--warn-ink); background: var(--warn-soft); box-shadow: inset 0 0 0 1px var(--warn-line); }
.acct-btn.trial .avatar { box-shadow: 0 0 0 2px var(--panel-solid), 0 0 0 3.5px var(--ind-ring); }
@media (max-width: 640px) {
  /* the phone button keeps its 44 px square: the hours ride on it as a small badge */
  .acct-btn { position: relative; }
  .acct-btn .trial-chip { display: inline-flex; position: absolute; bottom: -3px; inset-inline-start: 50%; transform: translateX(-50%); height: 16px; padding: 0 5px; font-size: 10px; background: var(--panel-solid); gap: 0; }
  html[dir="rtl"] .acct-btn .trial-chip { transform: translateX(50%); }
  .acct-btn .trial-chip svg, .acct-btn .trial-chip .tc-long { display: none; }
  .acct-btn .trial-chip .tc-short { display: inline; }
}
.tier-badge.trial { color: var(--accent); background: var(--accent-soft); border-color: var(--ind-ring); }
.trial-card { display: grid; gap: 10px; padding: 12px 14px; border-radius: var(--r-lg); background: var(--accent-soft); border: 1px solid var(--ind-ring); }
.trial-card.low { background: var(--warn-soft); border-color: var(--warn-line); }
.trial-card .tc-line { display: flex; align-items: center; gap: 8px; font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--text-strong); }
.trial-card .tc-line svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.trial-card.low .tc-line svg { stroke: var(--warn-ink); }
.trial-card .tc-sub { margin: 0; font-size: var(--fs-sm); color: var(--muted); line-height: 1.55; }
.trial-card.ended { background: var(--panel-2); border-color: var(--line-2); }
.toast-text .t-act { flex: none; height: 30px; padding: 0 10px; margin-inline-start: 4px; font-size: var(--fs-sm); }
.toast.toast-text.trial { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; } /* .toast sets display:block */
.toast-text.trial > span:nth-child(2) { flex: 1; min-width: 0; line-height: 1.4; }

/* ---------- guests: market prices frosted (no tick ever reaches the page: the numbers under the frost are placeholders) ---------- */
.blur-num { display: inline-block; filter: blur(7px); opacity: .7; -webkit-user-select: none; user-select: none; pointer-events: none; }
.wl-last .blur-num { filter: blur(5px); }
.hero-lock { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 8px; }
.hero-lock .btn { height: 36px; }
.hero-lock .btn svg { width: 16px; height: 16px; }
.hero-lock .hl-txt { font-size: var(--fs-sm); color: var(--muted); }
/* the chart box of a locked market symbol: a quiet drawn curve under the frost instead of an empty grid */
.chart-box.ghost #chart { visibility: hidden; }
.chart-box.ghost::before {
  content: ""; position: absolute; inset: 16% 4% 12% 4%; z-index: 1; opacity: .55; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 160' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%2319e6a0'/%3E%3Cstop offset='1' stop-color='%2322d3ee'/%3E%3C/linearGradient%3E%3ClinearGradient id='a' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='%2322d3ee' stop-opacity='.28'/%3E%3Cstop offset='1' stop-color='%2322d3ee' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 130 C30 126 45 118 70 120 S110 104 135 100 S175 108 200 92 S240 70 265 76 S305 52 330 46 S370 30 400 18 L400 160 L0 160Z' fill='url(%23a)'/%3E%3Cpath d='M0 130 C30 126 45 118 70 120 S110 104 135 100 S175 108 200 92 S240 70 265 76 S305 52 330 46 S370 30 400 18' fill='none' stroke='url(%23g)' stroke-width='3'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.chart-box.ghost .legend .lg-quote, .chart-box.ghost .legend .lg-row2 { visibility: hidden; }
.lock .lock-sub { font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; }
.cv-seg.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cv-seg button .lock-sm { margin-inline-start: 2px; }
.cv-seg button.gated { color: var(--muted); }
.sheet-note.trial-note { align-items: center; color: var(--text); background: var(--accent-soft); border-color: var(--ind-ring); }
.sheet-note.trial-note svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.al-phone[data-state="trial"] { grid-template-columns: auto minmax(0, 1fr); }
.al-phone[data-state="trial"] .alp-act .btn svg { width: 14px; height: 14px; }

/* ---------- news alerts (20 Oct 2026, members.js newsRowHtml): «الأخبار المهمة على تليفونك» in the alerts card ----------
   the row (when the member has it) sits on top of the price alerts; without one, an invitation with «شغّلها», or the
   package button in a trial that leaves news alerts out. Reuses .al-row / .alp-ic / .alp-txt / .alp-act. */
.al-row.news { margin-bottom: 8px; }
.al-row.news.armed { border-color: rgba(25, 230, 160, .3); }
.al-row.news .al-main { align-items: center; }
.al-news-ic { display: inline-grid; place-items: center; width: 20px; height: 20px; flex: none; color: var(--accent); }
.al-news-ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; }
.al-news-invite {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 10px; align-items: start; margin-bottom: 8px; padding: 10px 12px;
  border-radius: var(--r-md); background: var(--panel-2); border: 1px dashed var(--ind-ring); color: var(--muted);
}
.al-news-invite.locked { border-color: var(--line-2); }
.al-news-invite .alp-act .btn svg { width: 14px; height: 14px; }
.al-news-rules { font-size: var(--fs-xs); color: var(--muted); }
@media (max-width: 640px) { .al-news-invite { padding: 12px 14px; } }
/* ---------- end of news alerts ---------- */

/* ---- holdings on price alerts (web/holdings.js, 20 Oct 2026): the form part, the row line, «محفظتي» ---- */
.al-hold { margin-top: 8px; border: 1px dashed var(--line); border-radius: var(--r-md); padding: 8px 10px; }
.al-hold > summary { cursor: pointer; font-size: var(--fs-sm); color: var(--muted); list-style: none; min-height: 32px; display: flex; align-items: center; }
.al-hold > summary::-webkit-details-marker { display: none; }
.al-hold > summary::before { content: '+'; display: inline-block; width: 1.2em; font-weight: 700; color: var(--accent, var(--up)); }
.al-hold[open] > summary::before { content: '−'; }
.al-hold .seg { margin: 6px 0; }
.al-hold-prev { min-height: 1.2em; }
.al-hold-prev.err { color: var(--down); }
.al-hold-note { margin: 4px 0 0; font-size: var(--fs-2xs); color: var(--muted); }
.al-hold-row { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 1px; font-size: var(--fs-xs); margin-top: 2px; }
.al-hold-line { font-weight: 600; }
.al-hold-sub { color: var(--muted); font-size: var(--fs-2xs); }
.al-sum { padding: 10px 12px; margin-bottom: 8px; border-radius: var(--r-md); background: var(--panel-2); border: 1px solid var(--line); display: grid; gap: 4px; }
.al-sum-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.al-sum-h span, .al-sum-x { color: var(--muted); font-size: var(--fs-2xs); }
.al-sum-r { display: flex; justify-content: space-between; gap: 8px; font-size: var(--fs-sm); }
.al-sum-r .k { color: var(--muted); }
.al-sum-r .v { font-weight: 600; }
.al-sum-sub { margin-top: 4px; font-size: var(--fs-xs); color: var(--muted); }

/* «ممتلكاتي»: the disclaimer sits inside the card so a screenshot always carries it (21 Oct) */
.al-sum-disc{margin-top:8px;font-size:12px;line-height:1.5;opacity:.8;font-style:italic}
.acct-hold .al-sum{margin:0}

/* «ممتلكاتي» (21 Oct) */
.holdbook .card-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.bk-list{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.bk-row-w{display:flex;gap:6px;align-items:stretch}
.bk-row{flex:1;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);color:inherit;text-align:start;cursor:pointer;min-height:56px}
.bk-row:hover{border-color:rgba(34,211,238,.35)}
.bk-l,.bk-r{display:flex;flex-direction:column;gap:3px;min-width:0}
.bk-r{align-items:flex-end;text-align:end}
.bk-l small,.bk-r small{opacity:.75;font-size:12.5px}
.bk-bell{width:44px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);color:inherit;display:grid;place-items:center;cursor:pointer}
.bk-bell{color:#cfd8e3}.bk-bell svg{width:18px;height:18px;stroke:currentColor;fill:none}.bk-bell:hover{color:#22d3ee;border-color:rgba(34,211,238,.35)}
.bk-form{margin:8px 0 10px;padding:12px;border-radius:12px;border:1px solid rgba(34,211,238,.3);background:rgba(34,211,238,.04)}
.bk-lbl{font-weight:600;margin-bottom:8px}
.bk-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.bk-chips .chip{padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:transparent;color:inherit;min-height:40px;cursor:pointer}
.bk-chips .chip.on{border-color:var(--cyan,#22d3ee);background:rgba(34,211,238,.12);font-weight:600}
.bk-two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bk-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.bk-prev{min-height:18px}
.n.up{color:#19e6a0}.n.down{color:#ff6b6b}
@media (max-width:420px){.bk-two{grid-template-columns:1fr}}

/* ---------- folding side cards (app.js applyFolds): the header bar opens and closes the card ---------- */
.card.foldable > .card-h { cursor: pointer; justify-content: flex-start; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.card.foldable > .card-h > :first-child { margin-inline-end: auto; }
.card.foldable > .card-h::after {
  content: ""; flex: none; width: 7px; height: 7px; margin-inline-start: 6px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: translateY(-2px) rotate(45deg); transition: transform .22s var(--ease), border-color .2s;
}
.card.foldable.folded > .card-h::after { transform: rotate(-45deg); }
html[dir="rtl"] .card.foldable.folded > .card-h::after { transform: rotate(135deg); }
@media (hover: hover) { .card.foldable > .card-h:hover::after { border-color: var(--accent); } }
.card.foldable > .card-h:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--r-md); }
.card.foldable.folded > .card-h { padding-bottom: 11px; }
.card.foldable.folded > :not(.card-h) { display: none !important; } /* beats #alBody's own display */
.holdbook .card-t { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; }

/* the phone's «تنبيهاتي» tab for a visitor (hidden everywhere else, and once the alerts card shows for a member) */
.alerts-guest { display: none; }
.alerts:not([hidden]) ~ .alerts-guest { display: none; }
.alerts-guest .ag-body { margin: 0; padding: 0 14px 12px; color: var(--muted); line-height: 1.6; font-size: 14px; }
.alerts-guest .ag-cta { display: flex; width: calc(100% - 28px); margin: 0 14px 14px; height: var(--tap); justify-content: center; align-items: center; }

.about .about-credit { margin-top: 18px; font-size: var(--fs-xs); opacity: .75; }
.about .about-credit a { color: inherit; text-decoration: none; }