/* =====================================================================================
   Launchpad glass design system
   Loaded after styles.css and tokens.css (the colour, type and material tokens). Gives each
   component its material. Components here use tokens only, so the light and dark themes
   differ in tokens.css and nowhere else.

   Materials, from most to least transparent:
     --glass-2  clear glass:   index tiles, floating controls, secondary panels
     --glass-1  primary glass: dashboard cards
     --glass-3  heavy frost:   tables, news, the chart workstation, menus, forms
     --accent   cobalt glass:  the one featured surface per page (EGX 30 hero, watchlist hero)
   Numbers use tabular figures everywhere. Market direction colours (--up, --down, --flat)
   mean the same thing in every chart, table and card.
   ===================================================================================== */

/* ---------- base ---------- */
html { background: var(--bg); }
body {
  background: transparent; color: var(--ink); font-family: var(--f-body); font-size: 15px; line-height: 1.5;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "ss01" 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  isolation: isolate;
}
/* the atmosphere: one fixed layer of diffused light behind every surface */
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--atmo); }
body::before { background: var(--glass-bar); }
::selection { background: color-mix(in srgb, var(--blue) 26%, transparent); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 8px; }
.num, .mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
code, kbd, pre { font-family: var(--f-code); }
h1, h2, h3 { letter-spacing: -.012em; }
h2 { font-family: var(--f-display); font-weight: 600; font-size: 15.5px; letter-spacing: -.01em; }
.sub { color: var(--muted); font-size: 13px; }
/* labels in sentence case, quiet, never shouted */
.eyebrow { font-family: var(--f-body); font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }

/* glass material helpers */
.card, .ws, .idx, .wel-q, .hero-r {
  background: var(--glass-1);
  -webkit-backdrop-filter: blur(var(--blur-1)) saturate(var(--sat)); backdrop-filter: blur(var(--blur-1)) saturate(var(--sat));
  border: 1px solid var(--edge);
  box-shadow: inset 0 1px 0 var(--hi), 0 0 0 .5px var(--edge-out), var(--shadow-glass);
}
.card { border-radius: var(--r); padding: 20px; gap: 16px; }

/* heavy frost for dense data */
.ws, .c-movers, .c-news, .c-ua, .c-cal, .wl-tablecard, .card:has(> .tbl-wrap > table.t), .card:has(> .mc-table), .acct-menu, .results, .dd-panel, .wl-sugg {
  background: var(--glass-3);
  -webkit-backdrop-filter: blur(var(--blur-3)) saturate(var(--sat)); backdrop-filter: blur(var(--blur-3)) saturate(var(--sat));
}

/* ---------- command bar: one sheet of frosted glass holding brand, search, sections and tape ---------- */
.bar {
  background: var(--glass-bar); color: var(--ink);
  -webkit-backdrop-filter: blur(var(--blur-bar)) saturate(180%); backdrop-filter: blur(var(--blur-bar)) saturate(180%);
  border-bottom: 1px solid var(--line);
  box-shadow: inset 0 -1px 0 var(--hi), 0 10px 30px -24px rgba(16, 24, 40, .35);
}
.bar-in { gap: 14px; padding-block: 12px 8px; }
.brand { color: var(--ink); }
.brand-word { font-family: var(--f-logo); }
.brand-word b, .auth-word b, .lp-word b { color: var(--brand); }
.brand-sub { font-family: var(--f-logo); opacity: .62; }
.search input {
  height: 40px; border-radius: 999px; border: 1px solid var(--line); background: var(--input); color: var(--ink);
  box-shadow: inset 0 1px 2px rgba(16, 24, 40, .05); font-size: 14.5px; transition: border-color .2s, box-shadow .2s, background .2s;
}
.search input::placeholder { color: var(--muted); }
.search input:focus { background: var(--panel); border-color: color-mix(in srgb, var(--blue) 55%, transparent); box-shadow: 0 0 0 4px var(--blue-soft); }
.search svg { opacity: .55; }
.search kbd { border-color: var(--line-strong); color: var(--muted); opacity: 1; font-size: 11px; background: var(--panel-2); }
.results { border: 1px solid var(--edge); border-radius: var(--r-md); box-shadow: inset 0 1px 0 var(--hi), var(--shadow-pop); padding: 6px; }
.res { border-radius: 10px; }
.res[aria-selected="true"], .res:hover { background: var(--hover); }
.res .tk { font-family: var(--f-display); font-weight: 600; color: var(--ink); letter-spacing: .01em; }
.res .px { font-family: var(--f-mono); }
.lang { height: 38px; border: 1px solid var(--line); background: var(--glass-2); color: var(--ink); font-weight: 600; font-size: 13.5px; box-shadow: inset 0 1px 0 var(--hi); }
.lang:hover { background: var(--panel); border-color: var(--line-strong); }
.acct-btn { width: 38px; height: 38px; border: 0; background: var(--accent); color: #fff; font: 600 15px var(--f-display); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 4px 14px -4px rgba(47, 107, 234, .55); }
.acct-btn:hover { background: var(--accent); filter: brightness(1.08); }

/* section switcher: a segmented control with a raised glass pill on the current section */
.mainnav { background: transparent; border-top: 0; }
.mainnav-in { align-items: center; gap: 10px; padding-block: 2px 10px; }
.mainnav-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--track); box-shadow: inset 0 1px 1px rgba(16, 24, 40, .04); flex: none; }
.mainnav a { padding: 7px 14px; border-radius: 999px; color: var(--muted); font-weight: 550; font-size: 13.5px; transition: color .2s, background .25s var(--ease), box-shadow .25s var(--ease); }
.mainnav a svg { color: currentColor; opacity: .75; }
.mainnav a:hover { color: var(--ink); }
.mainnav a[aria-current="page"] { color: var(--ink); background: var(--seg-on); box-shadow: var(--seg-on-shadow); }
.mainnav a[aria-current="page"] svg { color: var(--blue); opacity: 1; }
.mainnav a::after { display: none; }

/* ticker tape: a quiet strip inside the bar, fading at both edges */
.tape { border-top: 1px solid var(--line); background: transparent; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.tape-track { font-family: var(--f-mono); font-size: 12px; padding-block: 7px; gap: 30px; color: var(--muted); }
.tape a b { color: var(--ink); font-weight: 600; }
.tape .up { color: var(--up); } .tape .down { color: var(--down); }

/* data freshness: a small pill at the end of the section bar, on every page */
.data-status { margin-inline-start: auto; flex: none; display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--glass-2); color: var(--muted); font: 500 12.5px var(--f-body); cursor: pointer; white-space: nowrap;
  box-shadow: inset 0 1px 0 var(--hi); transition: background .2s, color .2s, border-color .2s; }
.data-status:hover { color: var(--ink); border-color: var(--line-strong); }
.data-status b { color: var(--ink); font-weight: 600; }
.data-status i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--flat); flex: none; }
.data-status[data-state="ok"] i { background: var(--up); }
.data-status[data-state="checking"] i { background: var(--blue); animation: ds-pulse 1s ease-in-out infinite; }
.data-status[data-state="stale"] i { background: var(--orange); }
.data-status[data-state="new"] { color: var(--accent-ink); background: var(--accent); border-color: var(--accent-edge); }
.data-status[data-state="new"] b { color: var(--accent-ink); }
.data-status[data-state="new"] i { background: #fff; }
.data-status svg { width: 13px; height: 13px; opacity: .7; }
@keyframes ds-pulse { 50% { opacity: .35; } }
.ds-full { display: inline; } .ds-short { display: none; }
@media (max-width: 720px) { .ds-full { display: none; } .ds-short { display: inline; } .data-status { padding: 0 10px 0 9px; height: 28px; font-size: 12px; } }

/* ---------- page ---------- */
.wrap { gap: 20px; padding-block: 22px 56px; }
.card-head { align-items: center; gap: 10px 14px; }
.card-head h2 + .sub, .card-head .sub { margin-top: 3px; }
.foot { border-top: 1px solid var(--line); color: var(--muted); }
.foot a { color: var(--blue-ink); }

/* segmented chip groups (period, interval, tabs) */
.chips:has(> button.chip) { gap: 2px; padding: 3px; border-radius: 999px; background: var(--track); box-shadow: inset 0 1px 1px rgba(16, 24, 40, .04); flex-wrap: wrap; }
.chip { border: 0; background: transparent; color: var(--muted); font-weight: 550; font-size: 12.5px; padding: 5px 12px; border-radius: 999px; transition: background .22s var(--ease), color .2s, box-shadow .22s var(--ease); }
.chip:hover { color: var(--ink); border-color: transparent; }
.chip[aria-pressed="true"], .chip.or[aria-pressed="true"] { background: var(--seg-on); color: var(--ink); box-shadow: var(--seg-on-shadow); }
/* stand-alone chips (links, quick picks) keep a visible outline */
a.chip, .wl-quick .chip, .cmp-quick .chip { border: 1px solid var(--line); background: var(--glass-2); color: var(--ink-2); box-shadow: inset 0 1px 0 var(--hi); }
a.chip:hover, .wl-quick .chip:hover, .cmp-quick .chip:hover { border-color: color-mix(in srgb, var(--blue) 45%, transparent); color: var(--ink); }

.pill { font-weight: 600; font-size: 12px; letter-spacing: 0; padding: 3px 10px; }
.pill.or { background: var(--orange-soft); color: var(--orange); }
.pill.bl { background: var(--blue-soft); color: var(--blue-ink); }

/* ---------- home: EGX 30 hero ---------- */
.hero { background: transparent; border: 0; box-shadow: none; border-radius: 0; overflow: visible; gap: 16px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.65fr); }
.hero-l {
  position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-xl); padding: 24px 24px 20px; gap: 14px;
  background: var(--accent); color: var(--accent-ink);
  border: 1px solid var(--accent-edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(0, 0, 0, .12), 0 30px 60px -28px rgba(37, 82, 201, .65), 0 2px 6px rgba(16, 24, 40, .08);
}
/* specular light across the top of the cobalt glass, and a soft caustic low on the card */
.hero-l::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 70% at 18% -18%, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, 0) 55%),
    radial-gradient(70% 50% at 100% 112%, rgba(120, 225, 255, .35) 0%, rgba(120, 225, 255, 0) 70%),
    linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 40%); }
.hero-l::after { right: auto; left: 0; bottom: auto; top: 0; width: 100%; height: 100%; border: 0; border-radius: inherit; z-index: -1;
  background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 9px); -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%); }
[dir="rtl"] .hero-l::after { left: 0; right: auto; }
.hero-l .eyebrow { color: var(--accent-muted); font-size: 13px; }
.big { font-family: var(--f-display); font-weight: 300; font-size: clamp(44px, 5.4vw, 68px); letter-spacing: -.045em; line-height: .95; }
.hero-l .big { text-shadow: 0 1px 0 rgba(255, 255, 255, .15), 0 10px 30px rgba(10, 30, 90, .35); }
.hero-chg { font-family: var(--f-mono); font-size: 13.5px; gap: 8px 12px; }
.hero-l .hero-chg { color: var(--accent-muted); }
.hero-l .hero-chg .pill { background: rgba(255, 255, 255, .16); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hero-l .hero-chg .pill.down::before, .hero-l .hero-chg .pill.up::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }
.hero-l .hero-chg .pill.down::before { background: #FFB0B3; } .hero-l .hero-chg .pill.up::before { background: #7BF0C4; }
.hero-stats { gap: 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .18); }
.hero-stats div { padding-inline-end: 10px; }
.hero-stats div + div { padding-inline-start: 12px; border-inline-start: 1px solid rgba(255, 255, 255, .14); }
.hero-stats span { opacity: 1; color: var(--accent-muted); font-size: 12px; }
.hero-stats b { font-family: var(--f-mono); font-weight: 500; font-size: 13.5px; }
.spark { color: #fff; }
.spark-dot { background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .25), 0 0 14px 2px rgba(150, 230, 255, .8); }
.spark-dot::after { border-color: rgba(255, 255, 255, .6); }
.hero-r { border-radius: var(--r-xl); padding: 18px 20px 12px; gap: 10px; }
.take { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); max-width: 74ch; }
.take b { color: var(--ink); font-weight: 600; }
.take b.up { color: var(--up); } .take b.down { color: var(--down); }
@media (max-width: 900px) { .hero { grid-template-columns: minmax(0, 1fr); } }

/* index tiles: clear glass, lighter than the cards around them */
.idx-row { gap: 12px; }
.idx { background: var(--glass-2); border-radius: var(--r); padding: 14px 16px 13px; gap: 6px; transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s; }
a.idx:hover { transform: translateY(-2px); border-color: var(--edge); background: var(--glass-1); box-shadow: inset 0 1px 0 var(--hi), 0 0 0 .5px var(--edge-out), var(--shadow-lift); }
.idx .lbl { font-weight: 500; font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.idx .lbl .arr { margin-inline-start: auto; width: 22px; height: 22px; display: inline-grid; place-items: center; border-radius: 50%; background: var(--track); color: var(--ink-2); font-size: 11px; transition: background .2s, color .2s; }
a.idx:hover .lbl .arr { background: var(--blue); color: #fff; }
.idx .v { font-family: var(--f-display); font-weight: 300; font-size: 27px; letter-spacing: -.03em; line-height: 1.05; }
.idx .c { font-family: var(--f-mono); font-size: 12.5px; gap: 12px; }
@media (max-width: 860px) { .idx .v { font-size: 22px; } }

/* internals, meters and breadth */
.breadth { height: 10px; gap: 3px; background: transparent; }
.breadth i { border-radius: 999px; }
.track-lbl { font-family: var(--f-mono); font-size: 11.5px; margin-top: 6px; }
.kv { gap: 14px; }
.kv span { font-size: 12.5px; }
.kv b { font-family: var(--f-display); font-weight: 400; font-size: 22px; letter-spacing: -.02em; }
.meter { height: 6px; background: var(--track); margin-top: 6px; }
.meter i { background: var(--blue); }
.meter.or i { background: var(--cyan); }

/* heatmap: tiles separated by thin light seams */
.heat { border-radius: var(--r-md); }
.cell { border: 1.5px solid color-mix(in srgb, var(--panel) 70%, transparent); border-radius: 7px; }
.cell b { font-family: var(--f-display); font-weight: 600; font-size: 12px; letter-spacing: .01em; }
.cell span { font-family: var(--f-mono); }
.sec-lbl { font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 11px; }
.legend-scale { font-family: var(--f-mono); }

/* tables: frosted, hairline rows, right-aligned figures */
table.t { font-size: 13.5px; }
table.t th { font-size: 12px; letter-spacing: 0; text-transform: none; font-weight: 500; color: var(--muted); padding: 6px 10px 9px 0; border-bottom: 1px solid var(--line-strong); }
table.t td { border-bottom: 1px solid var(--line); padding: 9px 10px 9px 0; }
table.t tbody tr.go:hover td { background: var(--hover); }
table.t tbody tr.go td:first-child { border-radius: 8px 0 0 8px; } table.t tbody tr.go td:last-child { border-radius: 0 8px 8px 0; }
.tk-cell { font-family: var(--f-display); font-weight: 600; font-size: 13px; color: var(--ink); letter-spacing: .01em; }
tr.go:hover .tk-cell, .ua:hover .tk-cell { color: var(--blue-ink); }
.tbl-wrap { scrollbar-width: thin; }
[dir="rtl"] table.t th, [dir="rtl"] table.t td { padding-inline: 10px 0; }

/* flows */
.flows svg text { font-family: var(--f-body); }

/* macro tiles, rate tiles and other inset tiles */
.macro { gap: 10px; }
.macro div, .rate-tiles div, .tally div, .co-f, .val-top > div, .sx-tile, .brow, .rung, .pro-tiers li, .pro-next, .wel-sum > div, .rep-settings, .wl-kpi {
  background: var(--tile-bg); border-radius: var(--r-md); box-shadow: inset 0 1px 0 var(--hi), inset 0 0 0 1px var(--line);
}
.macro b, .rate-tiles b, .tally b, .wl-kpi b, .sx-tile b, .val-cap, .cmf-top b { font-family: var(--f-display); font-weight: 400; letter-spacing: -.02em; }
.macro b { font-size: 20px; }
.rate-tiles b { font-size: 25px; }
.rate-tiles div::before { width: 3px; top: 12px; bottom: 12px; border-radius: 0 3px 3px 0; }
[dir="rtl"] .rate-tiles div::before { border-radius: 3px 0 0 3px; }

/* rates corridor: cobalt-to-cyan band instead of a warm one */
.corridor .band { background: linear-gradient(90deg, color-mix(in srgb, var(--blue) 70%, transparent), var(--cyan)); box-shadow: 0 8px 22px -6px color-mix(in srgb, var(--blue) 55%, transparent); }
.corridor .axis { background: var(--line-strong); }
.corridor .gap { border-color: var(--blue); }
.cd .bk { border-radius: 9px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
.cd .bk.cbe { background: var(--navy); color: #fff; }
.cd .bk.avg { background: var(--blue); }
.cd .trk { background: var(--track); height: 7px; }
.cd b { font-family: var(--f-display); font-weight: 500; letter-spacing: -.01em; }
.cd .kind { letter-spacing: 0; text-transform: none; font-weight: 600; font-size: 10.5px; }

/* unusual activity rows */
.ua { border-radius: 12px; border-bottom-color: var(--line); padding: 10px 8px; }
.ua:hover { background: var(--hover); }
.ua .rv { font-family: var(--f-display); font-weight: 500; letter-spacing: -.01em; }
.uapill { font-weight: 600; }
details.how { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel-2); }
details.how summary::before { color: var(--blue); }
details.how code { font-family: var(--f-code); background: var(--panel); border-color: var(--line); }

/* news */
.ni { border-bottom-color: var(--line); grid-template-columns: 50px minmax(0, 1fr); }
.ni .dt { font-family: var(--f-mono); }
.ni .dt b { font-family: var(--f-display); font-weight: 300; font-size: 24px; letter-spacing: -.03em; line-height: 1; margin-bottom: 2px; }
.ni a.h { font-weight: 600; letter-spacing: -.005em; }
.ni a.h:hover { color: var(--blue-ink); }
.sig { font-weight: 600; border-width: 1px; }
.sig.Watch { color: var(--orange); }
.cal td:first-child { font-family: var(--f-mono); color: var(--blue-ink); font-weight: 500; }

/* "Show more" and the Pro banner */
.home-more button { border: 1px solid var(--edge); background: var(--glass-1); color: var(--ink); font-weight: 600; box-shadow: inset 0 1px 0 var(--hi), var(--shadow-glass); -webkit-backdrop-filter: blur(var(--blur-2)); backdrop-filter: blur(var(--blur-2)); }
.home-more button:hover { border-color: color-mix(in srgb, var(--blue) 45%, transparent); }
.pro-banner { position: relative; overflow: hidden; background: var(--accent); border: 1px solid var(--accent-edge); border-radius: var(--r); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 20px 40px -26px rgba(37, 82, 201, .7); }
.pro-banner::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(80% 120% at 0% -20%, rgba(255, 255, 255, .3), transparent 60%); }
.pro-banner > * { position: relative; }
.pro-tag { background: rgba(255, 255, 255, .18); color: #fff; transform: none; letter-spacing: .04em; font: 600 11.5px/1 var(--f-display); padding: 6px 9px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }
.pro-btn { background: #fff; color: #1B3FA8; font-weight: 600; box-shadow: 0 4px 14px -4px rgba(10, 30, 90, .45); }
.pro-btn:hover { background: #fff; filter: brightness(.97); }
.pro-btn.ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); box-shadow: none; }
.card .pro-btn:not(.ghost) { background: var(--accent); color: #fff; border: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 18px -6px rgba(47, 107, 234, .6); }
.card .pro-btn.ghost { color: var(--blue-ink); border-color: color-mix(in srgb, var(--blue) 45%, transparent); }
.pro-stats .pro-big:first-child b { color: var(--blue-ink); }
.pro-big b { font-weight: 300; letter-spacing: -.035em; }
.pro-invited { background: var(--blue-soft); color: var(--blue-ink); }
.pro-tiers li.on .pro-n { background: var(--blue); border-color: var(--blue); color: #fff; }
.pro-link { border-color: var(--line); background: var(--input); }
.pro-share { border-color: var(--line); background: var(--glass-2); }

/* "updated as of" line on the market page */
.asof-bar { color: var(--muted); margin-bottom: -4px; align-items: center; gap: 8px 20px; }
.asof-l { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.asof-note { font-size: 12px; color: var(--muted); max-width: 80ch; }
.asof-check { font-size: 12.5px; color: var(--muted); }
.asof-check.warn { color: var(--orange); font-weight: 500; }
.asof-main { color: var(--ink-2); }
.asof-main svg { color: var(--blue); }
.asof-main b { font-weight: 600; color: var(--ink); }
.asof-act { display: inline-flex; align-items: center; gap: 10px; }
.asof-btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--glass-2); color: var(--ink-2); font: 500 12.5px var(--f-body); cursor: pointer; box-shadow: inset 0 1px 0 var(--hi); }
.asof-btn:hover { color: var(--ink); border-color: var(--line-strong); }
.asof-btn:disabled { opacity: .6; cursor: progress; }
.asof-btn svg { width: 13px; height: 13px; }
.asof-btn[aria-busy="true"] svg { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- stock view ---------- */
.back { color: var(--muted); font-weight: 500; }
.back:hover { color: var(--blue-ink); }
.sv-tk { font-family: var(--f-display); font-weight: 600; font-size: clamp(32px, 4.6vw, 46px); letter-spacing: -.035em; color: var(--ink); }
:root[data-theme="dark"] .sv-tk { color: var(--ink); }
.sv-nm { color: var(--muted); }
.sv-px .big { font-size: clamp(40px, 5vw, 60px); }
.sv-px .eyebrow { margin-bottom: 4px; }
.ws { border-radius: var(--r-xl); padding: 14px 16px 16px; gap: 12px; }
.toolbar { gap: 8px 10px; }
.tool-group { gap: 2px; padding: 3px; border-radius: 999px; background: var(--track); box-shadow: inset 0 1px 1px rgba(16, 24, 40, .04); }
.tool-group > span { font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); padding: 0 6px 0 9px; margin: 0; }
[dir="rtl"] .tool-group > span { padding: 0 9px 0 6px; }
.chart-main { border-radius: var(--r-md); }
.pane { border-top: 1px solid var(--line); }
.lgd { font-family: var(--f-mono); background: color-mix(in srgb, var(--glass-3) 90%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--edge); box-shadow: inset 0 1px 0 var(--hi), 0 6px 18px -10px rgba(16, 24, 40, .3); border-radius: 10px; padding: 4px 9px; }
.dd-btn { border: 1px solid var(--line); background: var(--glass-2); border-radius: 999px; font-weight: 600; box-shadow: inset 0 1px 0 var(--hi); }
.dd-btn:hover, .dd-btn[aria-expanded="true"] { border-color: color-mix(in srgb, var(--blue) 45%, transparent); }
.dd-btn[aria-expanded="true"] { background: var(--blue-soft); }
.dd-btn .count { background: var(--blue); color: #fff; font-family: var(--f-mono); }
.dd-panel { border: 1px solid var(--edge); border-radius: var(--r); box-shadow: inset 0 1px 0 var(--hi), var(--shadow-pop); }
.dd-sec h3 { font-family: var(--f-body); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--muted); }
.dd-item:hover { background: var(--hover); }
.dd-foot { border-top-color: var(--line); }
.dd-foot .solid { background: var(--blue); }

/* position, gauge, levels, liquidity, beta */
.track { background: linear-gradient(90deg, color-mix(in srgb, var(--down) 30%, var(--track)), var(--track) 50%, color-mix(in srgb, var(--up) 30%, var(--track))); height: 8px; }
.track.neutral { background: var(--track); }
.track .dot, .bdot { background: var(--panel); border: 0; box-shadow: 0 0 0 1px var(--line-strong), 0 0 0 5px color-mix(in srgb, var(--blue) 18%, transparent), 0 2px 8px rgba(16, 24, 40, .25); }
.track .dot::after, .bdot::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--blue); }
.bdot { width: 18px; height: 18px; }
.track .mid, .bone { background: var(--line-strong); }
.btrack { background: linear-gradient(90deg, color-mix(in srgb, var(--cyan) 30%, var(--track)), var(--track) 50%, color-mix(in srgb, var(--blue) 40%, var(--track))); height: 8px; }
.beta-sym { color: var(--blue); font-family: var(--f-display); font-weight: 400; }
.bval { font-weight: 300; letter-spacing: -.03em; }
.verdict { font-family: var(--f-display); font-weight: 500; letter-spacing: -.02em; }
.tally span, .sigtag { letter-spacing: 0; text-transform: none; font-weight: 600; }
.gauge text { font-family: var(--f-body); letter-spacing: 0; }
.ring text { font-family: var(--f-display); font-weight: 400; fill: var(--ink); }
.rung.now { background: var(--blue-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 30%, transparent); }
.rung .k { font-family: var(--f-display); }
.rung .k.N { color: var(--blue-ink); }
.liq-list b, .pos-row > b, .pf b, .rung .p, .rung .d { font-family: var(--f-mono); font-weight: 500; }
.pf .lbl { font-family: var(--f-mono); }
.co-f a { color: var(--blue-ink); }
.val-k { letter-spacing: 0; text-transform: none; font-weight: 600; }
.pill.val-below { background: var(--blue-soft); color: var(--blue-ink); }
.pill.val-above, :root[data-theme="dark"] .pill.val-above { background: var(--orange-soft); color: var(--orange); }

/* ---------- My Launchpad, sectors, compare, Pro ---------- */
.acct-title { font-family: var(--f-display); font-weight: 600; letter-spacing: -.03em; color: var(--ink); font-size: clamp(28px, 4vw, 40px); }
:root[data-theme="dark"] .acct-title { color: var(--ink); }
.subtabs { padding: 3px; gap: 2px; border-radius: 999px; background: var(--track); border: 0; box-shadow: inset 0 1px 1px rgba(16, 24, 40, .04); }
.subtab { padding: 7px 15px; border-radius: 999px; font-weight: 550; font-size: 13.5px; }
.subtab[aria-current="page"] { background: var(--seg-on); box-shadow: var(--seg-on-shadow); }
.acct-banner { background: var(--blue-soft); border: 1px solid color-mix(in srgb, var(--blue) 22%, transparent); }
.wl-kpi { animation: none; }
.wl-kpi b { font-size: 24px; }
.wl-kpi.hero { position: relative; overflow: hidden; background: var(--accent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 20px 40px -24px rgba(37, 82, 201, .7); }
.wl-kpi.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 70% at 15% -20%, rgba(255, 255, 255, .38), transparent 55%); }
.wl-kpi.hero > * { position: relative; }
.wl-kpi.hero b { font-size: 38px; font-weight: 300; }
.wl-kpi.hero b.up { color: #8DF5CE; } .wl-kpi.hero b.down { color: #FFC2C4; }
.wl-input, .f-field input, #f-del, .cmp-sel, .mc-sort, .pro-link { border: 1px solid var(--line); background: var(--input); color: var(--ink); box-shadow: inset 0 1px 2px rgba(16, 24, 40, .05); }
.wl-input:focus, .f-field input:focus, #f-del:focus { border-color: color-mix(in srgb, var(--blue) 55%, transparent); box-shadow: 0 0 0 4px var(--blue-soft); }
.wl-sugg { border: 1px solid var(--edge); border-radius: var(--r-md); box-shadow: inset 0 1px 0 var(--hi), var(--shadow-pop); }
.wl-opt:hover, .wl-opt:focus { background: var(--hover); }
.wl-opt b { font-family: var(--f-display); font-weight: 600; }
.wl-range i { border-color: var(--blue); }
.wl-flag { color: var(--orange); }
.wl-x { border-color: var(--line); background: var(--glass-2); }
.wl-bar:hover, .sx-bar:hover { background: var(--hover); }
.f-btn { border-radius: 999px; background: var(--blue); font-weight: 600; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 6px 16px -8px rgba(47, 107, 234, .7); }
.f-btn.ghost { background: var(--glass-2); border: 1px solid var(--line); color: var(--ink); box-shadow: inset 0 1px 0 var(--hi); }
.f-btn.danger { background: var(--down); box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--down) 70%, transparent); }
.f-link, .f-more summary, details.more-ind > summary, .sx-more summary, .cd-toggle { color: var(--blue-ink); }
.switch i { background: var(--line-strong); }
.switch input:checked + i { background: var(--blue); }
.rep-ic { background: var(--blue-soft); color: var(--blue-ink); }
.rep-phone { border-color: var(--navy); border-radius: 28px; box-shadow: var(--shadow-pop); }
.theme-seg { border: 0; border-radius: 999px; background: var(--track); padding: 3px; }
.theme-seg button { border-radius: 999px; font-weight: 550; }
.theme-seg button[aria-checked="true"] { background: var(--seg-on); box-shadow: var(--seg-on-shadow); }
.theme-seg button[aria-checked="true"] svg { color: var(--blue); }

/* chart cards (Quick Snap, My dashboard): clear glass in both themes */
.mv-tile { background: var(--tile-bg); border: 1px solid var(--edge); color: var(--ink); box-shadow: inset 0 1px 0 var(--hi), 0 0 0 .5px var(--edge-out); border-radius: var(--r-md); animation: none; }
.mv-tile b { font-family: var(--f-display); font-weight: 400; letter-spacing: -.02em; }
.mv-tile span { color: var(--muted); }
.mv-tile.up i, .mv-tile.up b { color: var(--up); } .mv-tile.down i, .mv-tile.down b { color: var(--down); }
.mv-tile.or i, .mv-tile.or b { color: var(--orange); } .mv-tile.bl i, .mv-tile.bl b { color: var(--blue-ink); }
.mc { color: var(--ink); background: var(--glass-1); -webkit-backdrop-filter: blur(var(--blur-2)) saturate(var(--sat)); backdrop-filter: blur(var(--blur-2)) saturate(var(--sat));
  border: 1px solid var(--edge); border-radius: var(--r); box-shadow: inset 0 1px 0 var(--hi), 0 0 0 .5px var(--edge-out), var(--shadow-glass); animation: none; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.mc:hover { transform: translateY(-2px); border-color: var(--edge); box-shadow: inset 0 1px 0 var(--hi), 0 0 0 .5px var(--edge-out), var(--shadow-lift); }
.mc .up, .mc-spark.up { color: var(--up); } .mc .down, .mc-spark.down { color: var(--down); }
.mc-id b { font-family: var(--f-display); font-weight: 600; }
.mc-id small { font-family: var(--f-body); color: var(--muted); }
.mc-px { font-family: var(--f-mono); }
.mc-px b { font-weight: 500; }
.mc-pill.up { background: color-mix(in srgb, var(--up) 14%, transparent); color: var(--up); }
.mc-pill.down { background: color-mix(in srgb, var(--down) 14%, transparent); color: var(--down); }
.mc-pill.flat { background: var(--panel-2); color: var(--muted); }
.mc-spike { color: var(--orange); }
.mc-score b, .mt-score { font-family: var(--f-mono); font-weight: 600; }
.mc-score.up b, .mt-score.up, .sx-dot.up { background: color-mix(in srgb, var(--up) 85%, #000); box-shadow: 0 0 0 3px color-mix(in srgb, var(--up) 18%, transparent); }
.mc-score.down b, .mt-score.down, .sx-dot.down { background: color-mix(in srgb, var(--down) 85%, #000); box-shadow: 0 0 0 3px color-mix(in srgb, var(--down) 18%, transparent); }
.mc-score.mid b, .mt-score.mid, .sx-dot.mid { background: color-mix(in srgb, var(--orange) 85%, #000); box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange) 18%, transparent); }
.mc-score small { color: var(--muted); letter-spacing: 0; text-transform: none; }
.mc-x { border-color: var(--line); background: var(--panel); color: var(--muted); }
.mc-x:hover { color: var(--down); border-color: var(--down); }
.sx { background: var(--panel-2); border-color: var(--line); border-radius: var(--r); }
.sx-formula { font-family: var(--f-code); background: var(--panel); border-color: var(--line); }
.sx-ex { border-inline-start-color: var(--blue); }
.sc-card { transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.sc-card:hover { transform: translateY(-2px); border-color: var(--edge); box-shadow: inset 0 1px 0 var(--hi), 0 0 0 .5px var(--edge-out), var(--shadow-lift); }
.sc-breadth, .sx-bar-t { background: var(--track); }
.h-link::after { color: var(--blue); }
.h-link:hover { color: var(--blue-ink); }
.cmp-t tr.cmp-sec th { color: var(--blue-ink); letter-spacing: 0; text-transform: none; font-size: 12.5px; font-weight: 600; border-bottom-color: var(--line-strong); }
.cmp-h { font-family: var(--f-display); font-weight: 600; }
.cmp-swap { border-color: var(--line); background: var(--glass-2); }
.cmp-swap:hover { border-color: color-mix(in srgb, var(--blue) 45%, transparent); }
.plain-note, .wel-later { background: var(--blue-soft); }
.plain-card { border-inline-start: 3px solid var(--blue); }
.plain-list li::before { background: var(--blue); border-radius: 50%; transform: none; width: 6px; height: 6px; top: .7em; }

/* onboarding */
.wel-q { border-radius: var(--r-xl); }
.wel-step { font-family: var(--f-body); font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--blue-ink); font-weight: 600; }
.wel-title { font-weight: 600; letter-spacing: -.03em; }
.wel-dots i.done { background: var(--blue); } .wel-dots i.cur { background: var(--ink); }
.wel-opt, .lay-opt { border: 1px solid var(--line); background: var(--glass-2); border-radius: var(--r); box-shadow: inset 0 1px 0 var(--hi); }
.wel-opt:hover, .lay-opt:hover { border-color: color-mix(in srgb, var(--blue) 40%, transparent); }
.wel-opt[aria-pressed="true"], .lay-opt[aria-pressed="true"] { border-color: var(--blue); background: var(--blue-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 16%, transparent); }
.wel-tick { background: var(--blue); }
.lay-sketch { color: var(--muted); }
.wel-opt[aria-pressed="true"] .lay-sketch, .lay-opt[aria-pressed="true"] .lay-sketch, .wel-sum .lay-sketch { color: var(--blue); }
.wel-go { background: var(--accent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 22px -8px rgba(47, 107, 234, .7); }

/* account menu */
.acct-menu { border: 1px solid var(--edge); border-radius: var(--r); box-shadow: inset 0 1px 0 var(--hi), var(--shadow-pop); }
.acct-item:hover { background: var(--hover); }
.acct-link { color: var(--blue-ink); }
.acct-out { border-radius: 999px; border-color: var(--line); background: var(--panel-2); }
.acct-row input, .auth-check input { accent-color: var(--blue); }

/* loading placeholders while the market data downloads */
#h-val:empty::before, .lp-skel { content: ""; display: block; }
#h-chart:empty, #idx-row:empty, #heat:empty, #news:empty, #ua-list:empty, #macro:empty, #cds:empty, #internals:empty {
  min-height: 72px; border-radius: var(--r-md);
  background: linear-gradient(100deg, var(--panel-2) 30%, color-mix(in srgb, var(--panel) 60%, transparent) 50%, var(--panel-2) 70%) 0 0 / 300% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
}
#idx-row:empty { min-height: 92px; }
#news:empty { min-height: 240px; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -50% 0; } }

/* the updated-in-place moment: changed figures settle with a brief tint */
@keyframes refreshed { from { background-color: var(--blue-soft); } to { background-color: transparent; } }
html.lp-quiet *, html.lp-quiet *::before, html.lp-quiet *::after { animation-duration: 0s !important; animation-delay: 0s !important; transition-duration: 0s !important; }
html.lp-quiet #h-chart:empty, html.lp-quiet #heat:empty { animation: none; }

/* ---------- sign-in screen ---------- */
html.auth-locked body { background: #07090E; }
.auth { background: var(--bg); }
.auth::after { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--atmo); pointer-events: none; }
.auth { isolation: isolate; }
.auth-panel, .auth-panel {
  background:
    radial-gradient(70% 60% at 0% 0%, rgba(64, 118, 240, .55) 0%, transparent 65%),
    radial-gradient(60% 50% at 100% 100%, rgba(25, 182, 217, .25) 0%, transparent 70%),
    linear-gradient(160deg, #0D1424 0%, #070A12 100%);
}
.auth-panel::after { border: 0; box-shadow: none; right: -140px; bottom: -140px; width: 420px; height: 420px;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .14), rgba(255, 255, 255, .02) 60%, transparent); }
.auth-word { font-family: var(--f-logo); }
.auth-sub { font-family: var(--f-logo); }
.auth-pitch { font-family: var(--f-display); font-weight: 600; letter-spacing: -.035em; line-height: 1.08; }
.auth-pitch em { color: #9CC0FF; }
.auth-hook { color: rgba(255, 255, 255, .78); font-weight: 500; }
.auth-list li::before { background: #7FB0FF; border-radius: 50%; transform: none; width: 6px; height: 6px; }
.auth-card { background: var(--glass-3); -webkit-backdrop-filter: blur(var(--blur-3)) saturate(var(--sat)); backdrop-filter: blur(var(--blur-3)) saturate(var(--sat));
  border: 1px solid var(--edge); border-radius: var(--r-xl); box-shadow: inset 0 1px 0 var(--hi), 0 0 0 .5px var(--edge-out), var(--shadow-pop); }
.auth-card h2 { font-weight: 600; letter-spacing: -.025em; font-size: 23px; }
.auth-tabs { background: var(--track); border-radius: 999px; padding: 3px; }
.auth-tabs button { border-radius: 999px; font-weight: 600; height: 38px; }
.auth-tabs button[aria-selected="true"] { background: var(--seg-on); box-shadow: var(--seg-on-shadow); }
.auth-google { border-radius: 999px; border-color: var(--line); background: var(--input); font-weight: 600; }
.auth-google:hover { border-color: var(--line-strong); }
.auth-field input { border-radius: 12px; border-color: var(--line); background: var(--input); }
.auth-field input:focus { border-color: color-mix(in srgb, var(--blue) 55%, transparent); box-shadow: 0 0 0 4px var(--blue-soft); }
.auth-primary { border-radius: 999px; background: var(--accent); font-weight: 600; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 10px 24px -10px rgba(47, 107, 234, .8); }
.auth-primary:hover { filter: brightness(1.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 14px 28px -10px rgba(47, 107, 234, .9); }
.auth-link, .auth-check a { color: var(--blue-ink); }
.auth-perks li { background: var(--blue-soft); color: var(--blue-ink); font-weight: 600; }
.auth-lang, .auth-back { border-radius: 999px; border-color: var(--line); background: var(--glass-2); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.auth-lang:hover, .auth-back:hover { border-color: var(--line-strong); }
@media (max-width: 860px) { .auth-lang, .auth-back { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .25); color: #fff; } }

/* ---------- layout modes keep their character ---------- */
html.layout-simple .card { padding: 24px; border-radius: var(--r-lg); }
html.layout-dense .card { padding: 13px 15px; border-radius: var(--r-md); }
html.layout-dense .hero-l, html.layout-dense .hero-r, html.layout-dense .ws { border-radius: var(--r); }
html.layout-dense .big { font-size: clamp(32px, 3.4vw, 46px); }
html.layout-dense h2 { font-size: 14px; }

/* ---------- phones and touch screens: a lighter frost (smaller blur radius, so scrolling stays smooth) ---------- */
@media (hover: none), (max-width: 760px) {
  :root { --blur-1: 18px; --blur-2: 14px; --blur-3: 20px; --blur-bar: 20px; --sat: 175%; --glass-1: rgba(255, 255, 255, .4); --glass-2: rgba(255, 255, 255, .3); --glass-3: rgba(255, 255, 255, .6); }
  :root[data-theme="dark"] { --glass-1: rgba(24, 29, 40, .47); --glass-2: rgba(32, 38, 51, .36); --glass-3: rgba(18, 22, 31, .62); }
}
@media (hover: none) and (prefers-color-scheme: dark), (max-width: 760px) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --glass-1: rgba(24, 29, 40, .47); --glass-2: rgba(32, 38, 51, .36); --glass-3: rgba(18, 22, 31, .62); }
}
@media (max-width: 760px) {
  .wrap { gap: 14px; padding-block: 14px 40px; }
  .card { padding: 16px; border-radius: var(--r); }
  .hero-l, .hero-r, .ws { border-radius: var(--r-lg); }
  .hero-l { padding: 20px 18px 16px; }
  .bar-in { padding-block: 10px 6px; gap: 10px; }
  .mainnav-in { padding-block: 0 8px; }
  .mainnav a { padding: 6px 11px; font-size: 13px; }
  .card-head { align-items: flex-start; }
  .toolbar { gap: 6px; }
  .tool-group > span { display: none; }
}
@media (max-width: 430px) { .mainnav a { padding: 6px 9px; font-size: 12.5px; } .mainnav a svg { display: none; } }

@media (prefers-reduced-motion: reduce) {
  #h-chart:empty, #idx-row:empty, #heat:empty, #news:empty, #ua-list:empty, #macro:empty, #cds:empty, #internals:empty { animation: none; }
}

/* ---------- refinements ---------- */
/* the cobalt card grows its sparkline to fill the card, keeping the stats on the bottom edge */
.hero-l .spark-wrap { flex: 1 1 auto; min-height: 70px; max-height: 240px; }
.cell.sm { border-radius: 5px; } .cell.xs { border-radius: 3px; border-width: 1px; }
.sec-lbl { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 0 10px rgba(0, 0, 0, .35); }
/* phones: the section tabs scroll inside their track; the freshness pill stays pinned at the end */
@media (max-width: 720px) {
  .mainnav-in { overflow: visible; gap: 8px; }
  .mainnav-seg { min-width: 0; flex: 1 1 auto; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  [dir="rtl"] .mainnav-seg { -webkit-mask-image: linear-gradient(270deg, #000 88%, transparent); mask-image: linear-gradient(270deg, #000 88%, transparent); }
  .mainnav-seg::-webkit-scrollbar { display: none; }
  .mainnav a { flex: none; }
}

/* =====================================================================================
   Landing page (assets/landing.js): graphite night, cool light, one reactive dot field
   ===================================================================================== */
html.booting body, html.lp-on body { background: #05070C; }
.lp { background: #05070C; font-family: var(--f-body); }
.lp-hero { min-height: min(100svh, 940px); }
.lp-hero-bg, .lp[dir="rtl"] .lp-hero-bg {
  background:
    radial-gradient(60vmax 50vmax at 72% 40%, rgba(64, 110, 235, .20) 0%, transparent 65%),
    radial-gradient(50vmax 40vmax at 8% 0%, rgba(40, 70, 160, .30) 0%, transparent 70%),
    radial-gradient(40vmax 30vmax at 100% 100%, rgba(110, 90, 210, .16) 0%, transparent 70%),
    linear-gradient(180deg, #070A12 0%, #05070C 100%);
}
.lp[dir="rtl"] .lp-hero-bg { background:
    radial-gradient(60vmax 50vmax at 28% 40%, rgba(64, 110, 235, .20) 0%, transparent 65%),
    radial-gradient(50vmax 40vmax at 92% 0%, rgba(40, 70, 160, .30) 0%, transparent 70%),
    radial-gradient(40vmax 30vmax at 0% 100%, rgba(110, 90, 210, .16) 0%, transparent 70%),
    linear-gradient(180deg, #070A12 0%, #05070C 100%); }
/* phones and touch screens: a still field of dots in CSS, no canvas */
@media (hover: none), (pointer: coarse), (max-width: 899px) {
  .lp-hero-bg::after { display: block; content: ""; position: absolute; inset: 0; opacity: 1;
    background-image: radial-gradient(rgba(205, 218, 240, .16) 1px, transparent 1.4px); background-size: 17px 17px;
    -webkit-mask-image: radial-gradient(80% 70% at 60% 45%, #000 20%, transparent 80%); mask-image: radial-gradient(80% 70% at 60% 45%, #000 20%, transparent 80%); }
}
.lp-hero::after { height: 1px; background: linear-gradient(90deg, transparent, rgba(150, 190, 255, .55) 30%, rgba(190, 170, 255, .55) 70%, transparent); box-shadow: 0 0 22px rgba(110, 150, 255, .45); }
.lp-hero-text { text-shadow: none; }
.lp-h1, .lp-hero .lp-h1 { font-family: var(--f-display); font-weight: 600; letter-spacing: -.048em; line-height: 1.0; text-shadow: none; }
.lp-hero .lp-h1 { font-size: clamp(42px, 5.6vw, 88px); }
.lp-w.accent > span { background: linear-gradient(100deg, rgba(255, 255, 255, .62), rgba(186, 204, 255, .62)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-top .lp-word, .lp-word { font-family: var(--f-logo); }
.lp-sub { font-family: var(--f-logo); }
.lp-lang, .lp-signin { height: 38px; padding: 0 16px; border-radius: 999px; font: 600 13.5px var(--f-body); color: #fff;
  border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); }
.lp-signin { background: rgba(255, 255, 255, .12) !important; border-color: rgba(255, 255, 255, .24); }
.lp-lang:hover, .lp-signin:hover { background: rgba(255, 255, 255, .16) !important; }
/* the call to action: a white glass pill, the brightest thing on the page */
.lp-cta { height: 60px; padding: 0 10px 0 28px; gap: 18px; border-radius: 999px; color: #0B1220; font: 600 17px var(--f-display); letter-spacing: -.01em;
  background: linear-gradient(180deg, #FFFFFF 0%, #E8EEF8 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(15, 23, 42, .12), 0 0 0 1px rgba(255, 255, 255, .35), 0 18px 50px -14px rgba(96, 150, 255, .55); }
.lp[dir="rtl"] .lp-cta { padding: 0 28px 0 10px; }
.lp-cta::before, .lp-cta::after { display: none; }
.lp-cta:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(15, 23, 42, .12), 0 0 0 1px rgba(255, 255, 255, .5), 0 24px 60px -14px rgba(96, 150, 255, .7); }
.lp-cta-arrow { width: 40px; height: 40px; background: var(--accent, #2F6BEA); background: linear-gradient(150deg, #5A8DF5, #2452C9); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); font-size: 17px; }
.lp-cta.ghosted { height: 54px; color: #fff; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.lp-cta.ghosted:hover { background: rgba(255, 255, 255, .14); }
.lp-cta-note { color: rgba(220, 230, 250, .62); text-shadow: none; }
.lp-invited { background: rgba(255, 255, 255, .07); border-color: rgba(150, 190, 255, .35); }
.lp-invited b { color: #B9CEFF; }
/* monuments: graded cooler so they sit in the night light rather than glow orange */
.lp-tower-wrap { filter: drop-shadow(0 0 30px rgba(110, 150, 255, .22)); }
.lp-mono { filter: saturate(.62) brightness(.92) contrast(1.06); }
.lp-tower-glow { background: radial-gradient(closest-side, rgba(110, 150, 255, .28), transparent); }
.lp-cue { color: rgba(220, 230, 250, .5); letter-spacing: .02em; text-transform: none; font-size: 12px; text-shadow: none; }
.lp-cue i { background: linear-gradient(rgba(150, 190, 255, .9), transparent); }
/* second section: photography graded cool, data in glass */
.lp-grade { background:
    linear-gradient(115deg, rgba(40, 80, 200, .34) 0%, rgba(5, 7, 12, 0) 45%, rgba(100, 80, 200, .18) 100%),
    radial-gradient(ellipse 85% 70% at 50% 45%, rgba(5, 7, 12, .3) 0%, rgba(5, 7, 12, .76) 72%, rgba(5, 7, 12, .96) 100%),
    linear-gradient(180deg, rgba(5, 7, 12, .75) 0%, rgba(5, 7, 12, .15) 30%, rgba(5, 7, 12, .35) 62%, rgba(5, 7, 12, .96) 100%); }
.lp-slide { filter: saturate(.7) contrast(1.05) brightness(.8); }
.lp-grid, .lp-grain, .lp-sweep { display: none; }
.lp-candles { opacity: .35; }
.lp-trace { filter: drop-shadow(0 0 6px rgba(150, 190, 255, .7)); }
.lp-kicker { font-family: var(--f-body); font-size: 14px; letter-spacing: 0; text-transform: none; color: rgba(185, 206, 255, .85); font-weight: 500; }
.lp-h2 { font-family: var(--f-display); font-weight: 600; letter-spacing: -.04em; line-height: 1.05; text-shadow: none; }
.lp-lead { color: rgba(225, 232, 245, .82); text-shadow: none; }
.lp-pulse { border-radius: 999px; padding: 9px 18px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); }
.lp-pulse b { font-family: var(--f-display); font-weight: 600; letter-spacing: 0; }
.lp .mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.lp .up { color: #4FE3AE; } .lp .down { color: #FF8589; }
.lp-live { letter-spacing: 0; text-transform: none; font-size: 12.5px; color: rgba(220, 230, 250, .65); }
.lp-live i { background: #9DB7FF; animation: none; box-shadow: none; }
.lp-stats { border-top: 0; gap: 10px; max-width: 860px; }
.lp-stat { padding: 16px 16px 14px; border-radius: 18px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); text-align: start; }
.lp-stat + .lp-stat { border-inline-start: 1px solid rgba(255, 255, 255, .12); }
.lp-stat b { font-family: var(--f-display); font-weight: 300; letter-spacing: -.035em; font-size: clamp(24px, 2.6vw, 32px); }
.lp-stat span { color: rgba(220, 230, 250, .65); }
.lp-cap-kind { font-family: var(--f-body); letter-spacing: .02em; color: rgba(185, 206, 255, .85); font-size: 11.5px; }
.lp-dots button[aria-current="true"]::after { background: #fff; }
.lp-tape { background: rgba(5, 7, 12, .75); border-top-color: rgba(255, 255, 255, .08); }
.lp-tk b { font-family: var(--f-display); font-weight: 600; }
.lp-legal { background: rgba(5, 7, 12, .9); }
.lp[dir="rtl"] .lp-h1, .lp[dir="rtl"] .lp-hero .lp-h1, .lp[dir="rtl"] .lp-h2, .lp[dir="rtl"] .lp-cta { font-family: "IBM Plex Sans Arabic", var(--f-body); font-weight: 700; letter-spacing: 0; }
.lp[dir="rtl"] .lp-hero .lp-h1 { line-height: 1.3; }
@media (hover: none), (max-width: 760px) {
  .lp-lang, .lp-signin, .lp-pulse, .lp-stat, .lp-cta.ghosted { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .lp-lang { background: rgba(20, 26, 38, .85) !important; } .lp-signin { background: rgba(40, 48, 66, .9) !important; }
  .lp-stat { background: rgba(20, 26, 38, .72); }
  .lp-mono, .lp-tower-wrap { filter: none; }
}
@media (max-width: 720px) {
  .lp-hero .lp-h1 { font-size: clamp(28px, 8.4vw, 40px); }
  .lp-cta { height: 54px; font-size: 16px; padding-inline-start: 22px; }
  .lp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-stat:nth-child(3) { border-inline-start: 1px solid rgba(255, 255, 255, .12); }
}
/* Arabic: no Alexandria any more, Plex Arabic carries display text too */
.lang[lang="ar"], .lp-lang[lang="ar"], .auth-lang[lang="ar"] { font-family: "IBM Plex Sans Arabic", var(--f-body); }
.auth[dir="rtl"] .auth-pitch, .auth[dir="rtl"] h2, :root[lang="ar"] .acct-title, :root[lang="ar"] .wel-title { font-family: "IBM Plex Sans Arabic", var(--f-body); font-weight: 700; letter-spacing: 0; }
/* popovers: menus and dropdowns are read on top of busy content, so they are nearly opaque
   (blur cannot reach through the frosted bar they sit in) */
.acct-menu, .results, .dd-panel, .wl-sugg { background: var(--pop); }
/* change pills outside the cobalt card use the market colours */
.hero-chg .pill.down { background: color-mix(in srgb, var(--down) 14%, transparent); color: var(--down); }
.hero-chg .pill.up { background: color-mix(in srgb, var(--up) 14%, transparent); color: var(--up); }
.hero-chg .pill.flat { background: var(--panel-2); color: var(--muted); }
.hero-l .hero-chg .pill.up, .hero-l .hero-chg .pill.down, .hero-l .hero-chg .pill.flat { background: rgba(255, 255, 255, .16); color: #fff; }

/* =====================================================================================
   Round 2 refinements
   ===================================================================================== */
/* Compare: the stock pickers sit on the card's glass like every other control */
.cmp-sel { background: var(--glass-2); border-color: var(--line); box-shadow: inset 0 1px 0 var(--hi); font-family: var(--f-body); font-weight: 600; }
.cmp-sel:hover { border-color: var(--line-strong); }

/* Central bank rate tiles: each lights up in its own colour (the bar on its edge) under the pointer */
.rate-tiles div { transition: background-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease); cursor: default; }
.rate-tiles div::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s var(--ease);
  background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--tile) 26%, transparent) 0%, transparent 65%); }
[dir="rtl"] .rate-tiles div::after { background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--tile) 26%, transparent) 0%, transparent 65%); }
.rate-tiles div:hover { background-color: color-mix(in srgb, var(--tile) 11%, var(--glass-1)); transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tile) 42%, transparent), inset 0 1px 0 var(--hi), 0 16px 32px -16px color-mix(in srgb, var(--tile) 70%, transparent); }
.rate-tiles div:hover::after { opacity: 1; }
.rate-tiles div:hover b { color: color-mix(in srgb, var(--tile) 78%, var(--ink)); }
.rate-tiles div > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .rate-tiles div:hover { transform: none; } }

/* Balanced layout on wide screens: cards stack in two columns chosen to even out their heights
   (packHome in app.js); a long list scrolls inside its card to absorb what is left over. */
.pack { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.pack-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.pack-col > .card { flex: none; }
.pack-col > .card.pack-grow { flex: 1 1 auto; }
.pack-scroll { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-bottom: 18px;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent); }

/* Footer: the same links and notice under every page */
#home.wrap, #view.wrap { padding-bottom: 26px; }
.site-foot { padding-block: 0 44px; }
.site-foot .foot { margin: 0; }

/* A little of the logo's orange: primary actions and the current section's icon */
.mainnav a[aria-current="page"] svg { color: var(--brand); }
.auth-primary, .wel-go, .f-btn:not(.ghost):not(.danger), .card .pro-btn:not(.ghost), .pro-banner .pro-btn:not(.ghost) {
  background: var(--brand-btn); color: var(--brand-ink); font-weight: 650;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(120, 40, 0, .18), var(--brand-glow); }
.auth-primary:hover, .wel-go:hover, .f-btn:not(.ghost):not(.danger):hover, .card .pro-btn:not(.ghost):hover, .pro-banner .pro-btn:not(.ghost):hover {
  background: var(--brand-btn); filter: brightness(1.05) saturate(1.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -1px 0 rgba(120, 40, 0, .18), 0 14px 30px -10px rgba(255, 122, 26, .75); }
.lp-cta-arrow { background: var(--brand-btn); color: var(--brand-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 6px 16px -6px rgba(255, 122, 26, .7); }
.lp-cta { box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(15, 23, 42, .12), 0 0 0 1px rgba(255, 255, 255, .35), 0 18px 50px -16px rgba(255, 140, 60, .45); }
.data-status[data-state="new"] { background: var(--brand-btn); color: var(--brand-ink); border-color: rgba(255, 255, 255, .4); }
.data-status[data-state="new"] b { color: var(--brand-ink); }
.data-status[data-state="new"] i { background: var(--brand-ink); }

/* Titles in Bricolage Grotesque: a grotesque with a little more character than Geist. Numbers, labels and
   body text stay in Geist; Arabic titles use IBM Plex Sans Arabic through --f-title. */
h2, .acct-title, .wel-title, .auth-card h2, .sc-top h3, .sx-h, .wl-empty b, .cmp-h { font-family: var(--f-title); font-optical-sizing: auto; }
h2 { font-weight: 600; font-size: 16px; letter-spacing: -.015em; }
.acct-title { font-weight: 650; letter-spacing: -.035em; font-size: clamp(30px, 4.2vw, 44px); }
.sv-tk { font-family: var(--f-title); font-weight: 700; letter-spacing: -.03em; font-size: clamp(34px, 4.8vw, 48px); }
.wel-title { font-weight: 650; letter-spacing: -.03em; }
.auth-card h2 { font-weight: 600; font-size: 23px; letter-spacing: -.02em; }
.sc-top h3 { font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
.cmp-h { font-weight: 700; letter-spacing: -.01em; }
html.layout-simple h2 { font-size: 18px; }
html.layout-dense h2 { font-size: 14px; }
:root[lang="ar"] h2, :root[lang="ar"] .acct-title, :root[lang="ar"] .wel-title, :root[lang="ar"] .sv-tk { letter-spacing: 0; font-weight: 700; }
@media (max-width: 760px) { h2 { font-size: 15px; } }
/* the "ss01" option set for Geist is turned off for title faces and the logo */
h2, .acct-title, .wel-title, .auth-card h2, .sc-top h3, .sx-h, .wl-empty b, .cmp-h, .sv-tk, .brand-word, .lp-word, .auth-word { font-feature-settings: normal; }

/* =====================================================================================
   Certificates: real-return chart ("Where an Egyptian pound earns") and bank tiles
   ===================================================================================== */
.kind { letter-spacing: 0; text-transform: none; font-weight: 600; font-size: 10.5px; padding: 1px 7px; border-radius: 999px; white-space: nowrap; }
.kind.Fixed { background: var(--blue-soft); color: var(--blue-ink); }
.kind.Variable { background: color-mix(in srgb, var(--cyan) 13%, transparent); color: var(--cyan); }
.kind.Descending { background: color-mix(in srgb, var(--violet) 13%, transparent); color: var(--violet); }
.bk-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--flat); flex: none; }
.bk-dot.bm { background: var(--bk-bm); } .bk-dot.nbe { background: var(--bk-nbe); } .bk-dot.cib { background: var(--bk-cib); }

/* chart: label | plot | value; the plot always reads left to right */
.c-cds { container-type: inline-size; }
.rr { display: flex; flex-direction: column; }
.rr-row { display: grid; grid-template-columns: minmax(130px, 36%) minmax(0, 1fr) 96px; align-items: stretch; column-gap: 14px; }
.rr-row:not(.rr-head):not(.rr-axis) { border-bottom: 1px solid var(--line); }
.rr-row.stock { border-bottom: 0; }
.rr-l { padding: 9px 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.rr-name { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 13px; }
.rr-name b { font-weight: 600; }
.rr-l small { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); }
.rr-plot { position: relative; direction: ltr; min-height: 18px; }
.rr-ln { position: absolute; top: 0; bottom: 0; width: 0; pointer-events: none; }
.rr-ln.infl { border-left: 1.5px dashed var(--orange); }
.rr-ln.cbe { border-left: 1.5px solid color-mix(in srgb, var(--ink) 55%, transparent); }
.rr-bar { position: absolute; top: 50%; height: 12px; margin-top: -6px; border-radius: 4px; animation: grow .9s cubic-bezier(.2, .8, .2, 1) both; }
.rr-bar.pos { background: linear-gradient(90deg, color-mix(in srgb, var(--blue) 35%, transparent), var(--blue)); box-shadow: 0 4px 12px -5px color-mix(in srgb, var(--blue) 70%, transparent); transform-origin: left center; border-radius: 0 4px 4px 0; }
.rr-bar.neg { background: linear-gradient(270deg, color-mix(in srgb, var(--down) 30%, transparent), color-mix(in srgb, var(--down) 85%, transparent)); transform-origin: right center; border-radius: 4px 0 0 4px; }
.rr-v { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; text-align: end; padding: 8px 0; }
.rr-v b { font-family: var(--f-display); font-weight: 400; font-size: 19px; letter-spacing: -.02em; line-height: 1.1; direction: ltr; }
.rr-v small { font-size: 11px; font-weight: 500; white-space: nowrap; }
.rr-head .rr-plot { height: 20px; min-height: 20px; }
.rr-tag { position: absolute; bottom: 3px; transform: translateX(-50%); font-size: 11px; font-weight: 600; white-space: nowrap; }
.rr-tag.infl { color: var(--orange); } .rr-tag.cbe { color: var(--ink-2); }
.rr-axis .rr-plot { height: 22px; border-top: 1px solid var(--line-strong); }
.rr-axis .rr-plot span { position: absolute; top: 5px; transform: translateX(-50%); font-size: 10.5px; color: var(--muted); }
[dir="rtl"] .rr-v { align-items: flex-start; }
/* narrow card (Dense layout, phones): name on its own line, then the bar and the rate */
@container (max-width: 500px) {
  .rr-row { grid-template-columns: minmax(0, 1fr) 84px; }
  .rr-row > .rr-l { grid-column: 1 / -1; padding-bottom: 0; }
  .rr-head > span:first-child, .rr-axis > span:first-child { display: none; }
  .rr-plot { min-height: 22px; }
}

/* bank tiles */
.bk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 14px; align-items: start; }
.bk-tile { --bk: var(--flat); position: relative; overflow: hidden; border-radius: var(--r); padding: 16px 16px 12px; display: flex; flex-direction: column; gap: 4px;
  background: linear-gradient(165deg, color-mix(in srgb, var(--bk) 12%, var(--glass-1)) 0%, var(--glass-2) 55%);
  box-shadow: inset 0 1px 0 var(--hi), inset 0 0 0 1px color-mix(in srgb, var(--bk) 20%, var(--line)); }
.bk-tile.bm { --bk: var(--bk-bm); } .bk-tile.nbe { --bk: var(--bk-nbe); } .bk-tile.cib { --bk: var(--bk-cib); }
.bk-h { display: flex; align-items: center; gap: 10px; }
.bk-h b { display: block; font-family: var(--f-title); font-weight: 600; font-size: 15px; letter-spacing: -.01em; font-feature-settings: normal; }
.bk-h small { font-size: 11.5px; color: var(--muted); }
.bk-mark { flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: #fff; font: 700 10.5px var(--f-body); letter-spacing: .02em;
  background: linear-gradient(160deg, color-mix(in srgb, var(--bk) 78%, #fff), var(--bk)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 6px 14px -6px color-mix(in srgb, var(--bk) 70%, transparent); }
.bk-best { display: flex; align-items: baseline; gap: 2px; margin-top: 8px; direction: ltr; justify-content: flex-start; }
[dir="rtl"] .bk-best { justify-content: flex-end; }
.bk-best-v { font-family: var(--f-display); font-weight: 300; font-size: 40px; letter-spacing: -.045em; line-height: 1; }
.bk-best span { font-size: 18px; color: var(--muted); }
.bk-best-n { margin: 2px 0 6px; font-size: 12px; color: var(--ink-2); }
.bk-best-n .up, .bk-best-n .down { font-weight: 500; }
.bk-term { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 4px; }
.bk-term h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 4px; font: 600 12.5px var(--f-body); color: var(--ink); }
.bk-term h3 span { font-weight: 500; font-size: 11px; color: var(--muted); }
.bk-term ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.bk-term li { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 6px 8px; margin: 0 -8px; border-radius: 10px; transition: background .2s; }
.bk-term li:hover { background: color-mix(in srgb, var(--bk) 8%, transparent); }
.bk-pn { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.bk-term li small { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.4; margin-top: 2px; }
.bk-term li b { font-family: var(--f-display); font-weight: 500; font-size: 15px; white-space: nowrap; direction: ltr; padding-top: 1px; }
.bk-src { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--muted); }
.bk-src a { color: var(--blue-ink); }
/* where the new card sits in the other layouts */
html.layout-simple #home > .c-banks { order: 5; }
@media (min-width: 1100px) { html.layout-dense .c-banks { grid-column: 1 / -1; order: 6; } }

/* =====================================================================================
   Loading and entrance
   ===================================================================================== */
/* While the market data downloads: a moving line under the header, and each tile as glass with its title
   and a shimmering placeholder where its content will go. */
html.lp-loading .bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--blue) 35%, var(--brand) 65%, transparent) no-repeat; background-size: 38% 100%;
  animation: lp-load 1.15s cubic-bezier(.45, 0, .25, 1) infinite; }
@keyframes lp-load { from { background-position: -60% 0; } to { background-position: 160% 0; } }
html.lp-loading #home .card { position: relative; min-height: 200px; overflow: hidden; }
html.lp-loading #home .card > :not(.card-head), html.lp-loading #home .card .card-head > :not(div), html.lp-loading #home .hero-l > *,
html.lp-loading #home .hero-r > :not(.card-head), html.lp-loading #home .asof-bar, html.lp-loading #home .card-head .chips { visibility: hidden; }
html.lp-loading #home .card::after, html.lp-loading #home .hero-r::after, .idx.skel::after {
  content: ""; position: absolute; left: 20px; right: 20px; top: 78px; bottom: 20px; border-radius: 12px; pointer-events: none;
  background: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--panel) 75%, transparent) 50%, transparent 80%) -150% 0 / 55% 100% no-repeat, var(--panel-2);
  box-shadow: inset 0 0 0 1px var(--line);
  animation: lp-skel 1.5s ease-in-out infinite; }
html.lp-loading #home .hero-r { position: relative; }
html.lp-loading #home .hero-r::after { top: 90px; }
.idx.skel { position: relative; min-height: 96px; }
.idx.skel::after { left: 16px; right: 16px; top: 16px; bottom: 16px; }
@keyframes lp-skel { to { background-position: 250% 0, 0 0; } }
html.lp-loading #home .hero-l::before { animation: lp-sheen 1.6s ease-in-out infinite alternate; }
@keyframes lp-sheen { from { opacity: .45; } to { opacity: 1; } }

/* Entrance: tiles fall a few pixels into place while fading in, one after another */
html.lp-entering :is(#home, #view) :is(.asof-bar, .hero-l, .hero-r, .idx, .card, .ws, .sv-head, .acct-head, .subtabs, .mc, .sc-card, .bk-tile, .wl-kpi, .mv-tile, .wel-q, .pro-banner) { opacity: 0; }
.tile-in { animation: tile-drop .66s cubic-bezier(.2, .9, .3, 1) var(--td, 0ms) both !important; }
@keyframes tile-drop {
  0% { opacity: 0; transform: translateY(-18px) scale(.985); }
  55% { opacity: 1; }
  78% { transform: translateY(1.5px) scale(1); }
  100% { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html.lp-loading .bar::after, html.lp-loading #home .card::after, .idx.skel::after { animation: none; }
  .tile-in { animation: none !important; }
  html.lp-entering :is(#home, #view) * { opacity: 1; }
}

/* =====================================================================================
   Tile character: big thin figures with raised decimals, a glow in the market colour,
   charts that run to the tile's edges, and a stats row split by hairlines
   ===================================================================================== */
/* raised decimals and units (set by setNum in app.js on .nsplit figures) */
.nsplit sup { font-size: .44em; vertical-align: .95em; margin-inline-start: 2px; font-weight: 400; letter-spacing: 0; color: var(--muted); line-height: 0; }
.hero-l .nsplit sup, .wl-kpi.hero .nsplit sup { color: var(--accent-muted); }
.nsplit .up ~ sup, .up.nsplit sup, .down.nsplit sup { color: inherit; opacity: .75; }

/* glow: a soft light in the tile's colour from one corner, and an edge that catches it */
.glow { --k: var(--blue); position: relative; isolation: isolate; overflow: hidden; }
.k-up { --k: var(--up); } .k-down { --k: var(--down); } .k-flat { --k: var(--flat); } .k-blue { --k: var(--blue); } .k-amber { --k: var(--orange); }
.glow::before { content: ""; position: absolute; z-index: -1; top: -38%; inset-inline-end: -28%; width: min(240px, 85%); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--k) var(--glow-a), transparent), transparent); transition: transform .4s var(--ease); }
.glow::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, var(--hi) 0%, color-mix(in srgb, var(--k) 40%, transparent) 38%, transparent 66%, color-mix(in srgb, var(--k) 22%, transparent) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.glow.k-none::before { display: none; }
.glow.k-none::after { background: linear-gradient(140deg, var(--hi) 0%, transparent 50%, color-mix(in srgb, var(--blue) 16%, transparent) 100%); }
a.glow:hover::before { transform: scale(1.2); transition: transform .4s var(--ease); }

/* index tiles */
.idx { padding: 15px 16px 0; gap: 4px; min-height: 172px; }
.idx:not(:has(.mc-spark)) { padding-bottom: 14px; }
.idx .lbl { position: relative; }
.idx .v { font-weight: 300; font-size: 34px; letter-spacing: -.045em; margin-top: 6px; }
.idx .mc-spark { display: block; width: calc(100% + 32px); height: 46px; margin: auto -16px 0; color: var(--k); }
.idx .mc-spark.up, .idx .mc-spark.down { color: var(--k); }
@media (max-width: 860px) { .idx .v { font-size: 26px; } .idx { min-height: 0; } }

/* stats row: supporting figures split by hairlines */
.c-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin-top: 8px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-family: var(--f-mono); font-size: 12.5px; gap: 0; }
.c-row > span { display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; border-inline-start: 1px solid var(--line); min-width: 0; white-space: nowrap; }
.c-row > span:first-child { padding-inline-start: 0; border-inline-start: 0; }
.c-row small { font-family: var(--f-body); font-size: 10.5px; color: var(--muted); font-weight: 500; }
.idx .c-row { margin-bottom: 4px; }
@media (max-width: 480px) { .c-row { font-size: 11.5px; } .c-row > span { padding-inline: 5px; } }
.hero-stats { padding-top: 0; border-top: 1px solid rgba(255, 255, 255, .18); border-bottom: 1px solid rgba(255, 255, 255, .18); }
.hero-stats div { padding-block: 9px; }

/* chart cards (Quick Snap, My dashboard): bigger price, chart to the edges, stats row along the bottom */
.mc { padding: 14px 14px 10px; border-radius: var(--r-lg); }
.mc-px b { font-family: var(--f-display); font-weight: 300; font-size: 24px; letter-spacing: -.03em; line-height: 1.05; }
.mc-px small { font-family: var(--f-mono); }
.mc .mc-spark { width: calc(100% + 28px); margin-inline: -14px; height: 62px; }
.mc .mc-spark.up, .mc .mc-spark.down { color: var(--k); }
.mc-bot { margin: 0 -14px; padding: 8px 14px 0; border-top: 1px solid var(--line); }

/* other tiles get the same light */
.mv-tile, .wl-kpi:not(.hero), .sc-card, .sx-tile { position: relative; isolation: isolate; overflow: hidden; }
.mv-tile::before, .wl-kpi:not(.hero)::before, .sc-card::before { content: ""; position: absolute; z-index: -1; top: -80px; inset-inline-end: -70px; width: 200px; height: 200px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--k, var(--blue)) var(--glow-a), transparent), transparent); }
.mv-tile.up { --k: var(--up); } .mv-tile.down { --k: var(--down); } .mv-tile.or { --k: var(--orange); } .mv-tile.bl { --k: var(--blue); }
.wl-kpi:has(b.up) { --k: var(--up); } .wl-kpi:has(b.down) { --k: var(--down); } .wl-kpi:not(:has(b.up)):not(:has(b.down)) { --k: var(--flat); }
.sc-card:has(.sc-spark.down) { --k: var(--down); } .sc-card:has(.sc-spark:not(.down)) { --k: var(--up); }
.mv-tile b, .wl-kpi b { font-weight: 300; letter-spacing: -.035em; }
/* rate tiles keep their edge bar; their colour glows softly at rest and fully under the pointer */
.rate-tiles div { background-image: radial-gradient(140px 110px at 100% 0%, color-mix(in srgb, var(--tile) 14%, transparent), transparent 70%); }
[dir="rtl"] .rate-tiles div { background-image: radial-gradient(140px 110px at 0% 0%, color-mix(in srgb, var(--tile) 14%, transparent), transparent 70%); }
.rate-tiles b { font-weight: 300; font-size: 28px; letter-spacing: -.035em; }
/* macro tiles: edge light only, they carry no direction */
.macro div { padding: 13px 14px; }
.macro b { font-weight: 300; font-size: 24px; letter-spacing: -.035em; }
/* hero and stock price figures */
.big.nsplit sup { font-size: .4em; vertical-align: 1.05em; }

/* glow strength: gentler on light glass, fuller on dark */
:root { --glow-a: 17%; }
:root[data-theme="dark"] { --glow-a: 26%; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --glow-a: 26%; } }
@media (max-width: 480px) {
  .idx .c-row { font-size: 11px; }
  .idx .c-row > span { padding-inline: 4px; }
  .idx .c-row small { font-size: 9.5px; }
}
@media (max-width: 400px) { .idx { padding-inline: 12px; } .idx .mc-spark { width: calc(100% + 24px); margin-inline: -12px; } .idx .c-row { font-size: 10.5px; letter-spacing: -.01em; } .idx .c-row > span { padding-inline: 3px; } .idx .c-row small { font-size: 9px; } }
.idx .c.c-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); flex-wrap: nowrap; gap: 0; }

/* Overnight deposit tile on the market page, in the "instrument" style: an icon in a glass circle, an arrow to
   open the central bank rates, a big light figure, and a status pill */
.idx-rate { padding-bottom: 14px; }
.ia-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.ia-ic, .ia-go { display: grid; place-items: center; border-radius: 50%; color: var(--ink-2); background: var(--glass-2);
  box-shadow: inset 0 1px 0 var(--hi), 0 0 0 1px var(--line), 0 4px 10px -4px rgba(30, 52, 100, .25); }
.ia-ic { width: 36px; height: 36px; } .ia-ic svg { width: 18px; height: 18px; }
.ia-go { width: 28px; height: 28px; transition: background .2s, color .2s, transform .3s var(--ease); } .ia-go svg { width: 13px; height: 13px; }
[dir="rtl"] .ia-go svg { transform: scaleX(-1); }
a.idx-rate:hover .ia-go { background: var(--blue); color: #fff; transform: rotate(-8deg); }
.idx-rate .v { margin-top: 2px; }
.ia-foot { margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ia-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; color: #fff; }
.ia-pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ia-pill.green { background: linear-gradient(180deg, color-mix(in srgb, var(--up) 78%, #fff), var(--up)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 6px 14px -6px color-mix(in srgb, var(--up) 80%, transparent); }
.ia-pill.amber { background: linear-gradient(180deg, color-mix(in srgb, var(--orange) 78%, #fff), var(--orange)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }
.ia-real { font-size: 12px; font-weight: 500; white-space: nowrap; }
#home .c-cbe { scroll-margin-top: 140px; }

/* Portfolio: holdings (trade form, positions, allocation, trade log) and the simulator (setup and results) */
.pfo .card-head .sub { max-width: 62ch; }
.pf-h3 { margin: 4px 0 10px; font: 600 13px var(--f-body); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
:root[lang="ar"] .pf-h3 { letter-spacing: 0; }
.pf-f { align-content: start; }
.pfo .pf-table td.mono { white-space: nowrap; }
.pf-f small { font-weight: 500; font-size: 11.5px; color: var(--muted); }
.pf-f input { width: 100%; min-width: 0; }
.pf-form { display: grid; gap: 12px 14px; align-items: end;
  grid-template-columns: auto minmax(220px, 1.6fr) minmax(90px, .7fr) minmax(120px, .9fr) minmax(140px, .9fr) auto; }
.pf-add .acct-note { margin-top: 4px; }
.pf-side, .pf-go { align-self: end; padding-bottom: 4px; }
.pf-stock { position: relative; display: grid; }
.pf-pick { max-width: none; }
.pf-chosen { position: absolute; inset: 0; display: flex; align-items: center; gap: 10px; padding: 0 8px 0 14px; border-radius: 12px; z-index: 2;
  background: var(--input); border: 1px solid color-mix(in srgb, var(--blue) 45%, var(--line)); box-shadow: 0 0 0 3px var(--blue-soft); }
.pf-chosen span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.pf-chosen small { color: var(--muted); font-size: 12px; white-space: nowrap; }
.pf-chosen[hidden] { display: none; }
.f-btn.sell:not(.ghost) { background: linear-gradient(180deg, color-mix(in srgb, var(--down) 80%, #fff), var(--down)); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 6px 16px -8px color-mix(in srgb, var(--down) 70%, transparent); }
.pf-kpis { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.pf-kpis .wl-kpi.hero { grid-column: span 2; }
.pf-kpis .wl-kpi b { overflow: visible; text-overflow: clip; }
.pf-bw { font-size: 19px !important; }
.pf-chart { height: 320px; }
.pf-legend { flex-wrap: wrap; row-gap: 6px; }
.pf-legend i.dash { background: repeating-linear-gradient(90deg, var(--c) 0 4px, transparent 4px 7px); }
.pf-table td { vertical-align: middle; }
.pf-w { display: grid; grid-template-columns: 34px 64px; align-items: center; gap: 8px; justify-content: end; }
.pf-w i { height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; display: block; }
.pf-w i b { display: block; height: 100%; border-radius: 3px; background: var(--blue); }
.pf-stack { display: flex; gap: 3px; height: 14px; border-radius: 999px; overflow: hidden; margin: 6px 0 12px; }
.pf-stack i { flex-grow: 0; flex-shrink: 1; min-width: 3px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.pf-keys { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--muted); margin-bottom: 16px; }
.pf-keys span { display: inline-flex; align-items: center; gap: 6px; }
.pf-keys i { width: 8px; height: 8px; border-radius: 50%; }
.pf-keys b { color: var(--ink); font-weight: 600; font-family: var(--f-display); }
.pf-log summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pf-log summary::-webkit-details-marker { display: none; }
.pf-log summary h2 { margin: 0; display: inline-flex; align-items: center; gap: 8px; }
.pf-log summary h2::before { content: ""; width: 7px; height: 7px; border: solid var(--muted); border-width: 0 2px 2px 0; transform: rotate(-45deg); transition: transform .25s var(--ease); }
[dir="rtl"] .pf-log summary h2::before { transform: rotate(135deg); }
.pf-log[open] summary h2::before { transform: rotate(45deg); }
.pf-log[open] summary { margin-bottom: 12px; }
.pf-fine { padding-inline: 4px; max-width: 90ch; line-height: 1.6; }
.pf-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
.pf-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pf-col + .pf-col { border-inline-start: 1px solid var(--line); padding-inline-start: 28px; }
.pf-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pf-start { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pf-start input { height: 36px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--input); color: var(--ink); font: 500 14px var(--f-body); }
.pf-picks { display: flex; flex-direction: column; gap: 6px; }
.pf-pickrow { display: grid; grid-template-columns: 62px minmax(0, 1fr) 92px 30px; align-items: center; gap: 10px; padding: 6px 6px 6px 12px; border-radius: 12px;
  background: var(--glass-2); border: 1px solid var(--line); box-shadow: inset 0 1px 0 var(--hi); }
.pf-pickrow .wl-nm { max-width: none; }
.pf-wt { display: flex; align-items: center; gap: 4px; justify-self: end; }
.pf-wt input { width: 64px; height: 32px; padding: 0 8px; text-align: end; border-radius: 9px; border: 1px solid var(--line); background: var(--input); color: var(--ink); font: 500 14px var(--f-body); font-variant-numeric: tabular-nums; }
.pf-wt input:focus, .pf-start input:focus { outline: none; border-color: color-mix(in srgb, var(--blue) 55%, transparent); box-shadow: 0 0 0 3px var(--blue-soft); }
.pf-wt span { color: var(--muted); font-size: 13px; }
.pf-sum { margin: 0; font-size: 12.5px; color: var(--muted); }
.pf-sum.warn { color: var(--orange); }
.pf-eq { gap: 14px; }
.pf-eq .f-btn { height: 36px; padding: 0 16px; font-size: 13px; }
.pf-copy { margin-top: 14px; }
.pf-skip { margin-top: 12px; }
.pf-res { display: flex; flex-direction: column; gap: 18px; }
@media (max-width: 1100px) {
  .pf-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
  .pf-side { grid-column: 1 / -1; padding: 0; }
  .pf-stock { grid-column: 1 / -1; }
  .pf-go { grid-column: 1 / -1; padding: 0; }
}
@media (max-width: 860px) {
  .pf-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .pf-col + .pf-col { border-inline-start: 0; padding-inline-start: 0; border-top: 1px solid var(--line); padding-top: 18px; }
}
@media (max-width: 560px) {
  .pf-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pf-form > .pf-f:nth-of-type(3) { grid-column: 1 / -1; }
  .pf-go .f-btn { width: 100%; }
  .pf-two { grid-template-columns: minmax(0, 1fr); }
  .pf-kpis { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pf-kpis .wl-kpi.hero { grid-column: 1 / -1; }
  .pf-chart { height: 250px; }
  .pf-pickrow { grid-template-columns: 56px minmax(0, 1fr) 84px 28px; gap: 6px; }
  .pf-table th, .pf-table td { padding-inline: 6px; }
}

/* Round icon buttons: clearer glass with a bright rim */
.ia-ic, .ia-go, .wl-x, .asof-btn, .lang {
  background: var(--icon-bg); box-shadow: var(--icon-hi), 0 0 0 1px var(--line), 0 6px 14px -8px rgba(30, 52, 100, .3);
  -webkit-backdrop-filter: blur(10px) saturate(180%); backdrop-filter: blur(10px) saturate(180%);
}

/* Cards answer the pointer like the rate tiles: they lift, a soft blue glow rises from the top corner, and the edge picks up blue */
@property --tint { syntax: '<color>'; inherits: false; initial-value: transparent; }
@property --wash { syntax: '<color>'; inherits: false; initial-value: transparent; }
.card {
  background-image: radial-gradient(120% 85% at 0% 0%, var(--tint) 0%, transparent 62%), linear-gradient(var(--wash), var(--wash));
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease), --tint .35s var(--ease), --wash .35s var(--ease);
}
[dir="rtl"] .card { background-image: radial-gradient(120% 85% at 100% 0%, var(--tint) 0%, transparent 62%), linear-gradient(var(--wash), var(--wash)); }
@media (hover: hover) and (pointer: fine) {
  .card:hover {
    --tint: color-mix(in srgb, var(--blue) 15%, transparent); --wash: color-mix(in srgb, var(--blue) 3.5%, transparent);
    transform: translateY(-2px); border-color: color-mix(in srgb, var(--blue) 28%, var(--edge));
    box-shadow: inset 0 1px 0 var(--hi), 0 0 0 .5px var(--edge-out), var(--shadow-lift), 0 18px 40px -28px color-mix(in srgb, var(--blue) 60%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) { .card:hover { transform: none; } }

/* Dense layout: cards stack in three or four independent columns (see packDense in app.js) */
html.layout-dense .dpack { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 12px; align-items: stretch; }
html.layout-dense .dpack > .pack-col { gap: 12px; }
html.layout-dense #home:has(> .dpack) > .c-heat { grid-column: 1 / -1; }
html.layout-dense .dpack .c-ua .ua-list:not(.pack-scroll), html.layout-dense .dpack .c-news .news:not(.pack-scroll) { max-height: none; overflow: visible; }

/* Session brief (Dense layout): a completely clear glass panel, with no fill and only a light blur */
html.layout-dense .dpack.has-brief { grid-template-rows: auto 1fr; }
html.layout-dense .dpack.has-brief > .pack-col { grid-row: 1 / span 2; }
html.layout-dense .dpack.has-brief > .pack-col:nth-last-of-type(1), html.layout-dense .dpack.has-brief > .pack-col:nth-last-of-type(2) { grid-row: 2; }
html.layout-dense .dpack > .brief { grid-row: 1; grid-column: calc(var(--n) - 1) / span 2; }
.card.brief { background: transparent; -webkit-backdrop-filter: blur(4px) saturate(130%); backdrop-filter: blur(4px) saturate(130%);
  border: 1px solid rgba(255, 255, 255, .55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 18px 40px -34px rgba(30, 52, 100, .35); }
:root[data-theme="dark"] .card.brief { border-color: rgba(255, 255, 255, .12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 18px 40px -32px rgba(0, 0, 0, .6); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .card.brief { border-color: rgba(255, 255, 255, .12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 18px 40px -32px rgba(0, 0, 0, .6); } }
.card.brief:hover { --tint: transparent; --wash: transparent; }
.br-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.br-head h2 { margin: 2px 0 0; font-family: var(--f-title); font-size: 19px; }
.br-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap;
  background: transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 0 0 1px var(--line); }
.br-chip i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.br-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.br-cell { display: flex; flex-direction: column; gap: 3px; padding: 12px 12px 10px 0; min-width: 0; color: inherit; text-decoration: none; border-bottom: 1px solid var(--line); }
.br-cell:nth-child(4n) { padding-inline-end: 0; }
.br-cell:nth-child(4n+2), .br-cell:nth-child(4n+3), .br-cell:nth-child(4n+4) { padding-inline-start: 12px; border-inline-start: 1px solid var(--line); }
.br-cell:nth-last-child(-n+4) { border-bottom: 0; }
a.br-cell:hover .br-v { color: var(--blue-ink); }
.br-l { font-size: 11.5px; color: var(--muted); }
.br-v { font-family: var(--f-display); font-weight: 400; font-size: 20px; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.br-v .br-sub { font-size: 13px; color: var(--muted); }
.br-v .br-ev { font-family: var(--f-body); font-size: 13.5px; font-weight: 600; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; letter-spacing: 0; }
.br-cell small { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* phones: the brief stands alone under the EGX 30 card, its eight figures in two columns */
#home > .brief-solo { grid-column: 1 / -1; order: 0; }
html.layout-simple #home > .brief-solo { order: 1; }
.brief-solo .br-head h2 { font-size: 17px; }
.brief-solo .br-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 10px; }
.brief-solo .br-cell { padding: 11px 10px 9px 0; }
:root .brief-solo .br-cell:nth-child(n) { padding-inline-start: 0; border-inline-start: 0; border-bottom-width: 1px; border-bottom-style: solid; }
:root .brief-solo .br-cell:nth-child(2n) { padding-inline-start: 12px; padding-inline-end: 0; border-inline-start-width: 1px; border-inline-start-style: solid; }
:root .brief-solo .br-cell:nth-last-child(-n+2) { border-bottom: 0; }
.brief-solo .br-v { font-size: 18px; }

/* "How the score is calculated": a closed panel that opens on click, like the other explanations */
details.sx { padding: 0 18px; }
details.sx > summary.sx-h { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; margin: 0; padding: 14px 0; font-size: 15px; }
details.sx > summary.sx-h::-webkit-details-marker { display: none; }
details.sx > summary.sx-h::before { content: "+"; font-family: var(--f-display); font-weight: 400; color: var(--blue); width: 14px; display: inline-block; transition: transform .2s var(--ease); }
details.sx[open] > summary.sx-h::before { transform: rotate(45deg); }
details.sx > .sx-body { padding: 0 0 14px; }

/* ---------- Quick Snap / My charts table: aligned score slots, tidy on phones ---------- */
.mt-sc { display: inline-grid; grid-template-columns: auto 30px 14px; align-items: center; justify-items: end; column-gap: 6px; }
.mt-sc .mc-spike { justify-self: start; font-size: 12px; }
.mc-table .mt-stock .mt-nm { white-space: nowrap; }
@media (max-width: 640px) {
  .mc-table .mt-vol, .mc-table .mt-spark-h, .mc-table td.mt-spark { display: none; }
  .mc-table .mt-stock { max-width: 150px; }
  .mc-table .mt-stock .tk-cell { display: block; }
  .mc-table .mt-stock .mt-nm { display: block; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
  .mt-sc { grid-template-columns: 30px 12px; }
  .mt-sc .mc-pill { display: none; }
}

/* certificate chart: the inflation marker drawn as a dashed fill (a dashed border on a zero-width line shows
   as a single dot in Safari) */
.rr-ln.infl { border: 0; width: 1.5px; margin-left: -.75px; background: repeating-linear-gradient(to bottom, var(--orange) 0 4px, transparent 4px 7px); }

/* ---------- account menu ---------- */
.acct-menu.am { width: min(320px, calc(100vw - 24px)); padding: 10px; gap: 4px; border-radius: 22px; transform-origin: top right;
  animation: am-in .26s cubic-bezier(.2, .9, .25, 1.15) both; }
[dir="rtl"] .acct-menu.am { transform-origin: top left; }
@keyframes am-in { from { opacity: 0; transform: translateY(-6px) scale(.96); } to { opacity: 1; transform: none; } }
.am > * { animation: am-rise .32s calc(40ms + var(--i, 0) * 22ms) cubic-bezier(.2, .8, .2, 1) both; }
@keyframes am-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .acct-menu.am, .am > *, .am-rows > *, .am-tiles > * { animation: none; } }
.am-who { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; color: #fff;
  background: var(--accent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 14px 30px -18px rgba(37, 82, 201, .8); }
.am-who::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 0% -20%, rgba(255, 255, 255, .35), transparent 55%), radial-gradient(80% 90% at 110% 120%, rgba(255, 138, 51, .45), transparent 60%); }
.am-who > * { position: relative; }
.am-av { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font: 700 18px var(--f-display); color: #fff;
  background: linear-gradient(150deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .06)); box-shadow: 0 0 0 2px #FF8A33, 0 0 0 5px rgba(255, 138, 51, .25), inset 0 1px 0 rgba(255, 255, 255, .5); }
.am-id { display: grid; gap: 2px; min-width: 0; }
.am-id b { font: 600 15px var(--f-title); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.am-id small { font-size: 12px; color: rgba(255, 255, 255, .78); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.am-sec { padding: 10px 8px 4px; font-size: 11.5px; font-weight: 600; color: var(--muted); letter-spacing: .02em; }
.am-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.am-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 11px 12px; border-radius: 14px; text-decoration: none; color: var(--ink); font-size: 13px; font-weight: 600;
  background: var(--tile-bg); box-shadow: inset 0 1px 0 var(--hi), inset 0 0 0 1px var(--line); transition: transform .2s var(--ease), box-shadow .2s, background-color .2s; animation: am-rise .32s calc(60ms + var(--i, 0) * 28ms) cubic-bezier(.2, .8, .2, 1) both; }
.am-tile:hover { transform: translateY(-2px); background-color: color-mix(in srgb, var(--blue) 8%, transparent); box-shadow: inset 0 1px 0 var(--hi), inset 0 0 0 1px color-mix(in srgb, var(--blue) 30%, var(--line)), 0 10px 20px -14px rgba(37, 82, 201, .6); }
.am-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; color: var(--blue); flex: none;
  background: color-mix(in srgb, var(--blue) 12%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.am-ic svg, .am-go svg, .am-out svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.am-rows { display: grid; gap: 1px; }
.am-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 12px; text-decoration: none; color: var(--ink); font-size: 14px; font-weight: 550;
  transition: background-color .2s; animation: am-rise .32s calc(120ms + var(--i, 0) * 22ms) cubic-bezier(.2, .8, .2, 1) both; }
.am-row .am-ic { width: 28px; height: 28px; border-radius: 9px; color: var(--ink-2); background: var(--icon-bg); box-shadow: var(--icon-hi), 0 0 0 1px var(--line); }
.am-lbl { flex: 1; min-width: 0; }
.am-go { color: var(--muted); opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s var(--ease); display: grid; }
[dir="rtl"] .am-go svg { transform: scaleX(-1); }
.am-row:hover { background: var(--hover); }
.am-row:hover .am-ic { color: var(--blue); }
.am-row:hover .am-go { opacity: 1; transform: none; }
.am-pro { padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--brand-ink, #1F0E02); background: var(--brand-btn, #FF8A33); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); }
.am-theme { margin: 6px 0 2px; padding: 10px 8px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.am-foot { display: grid; gap: 10px; padding: 6px 8px 4px; }
.am-foot .acct-links { gap: 4px 14px; font-size: 12.5px; }
.am-out { display: flex; align-items: center; justify-content: center; gap: 8px; height: 40px; transition: color .2s, border-color .2s, background-color .2s; }
.am-out:hover { color: var(--down); border-color: color-mix(in srgb, var(--down) 50%, var(--line)); background: color-mix(in srgb, var(--down) 8%, transparent); }

/* ---------- session brief: brand orange glass at about three-quarters strength ----------
   Light mode uses the dark brown ink of the orange buttons (white on a light orange would not be readable);
   dark mode uses a deeper orange with white text. */
:root .card.brief, :root[data-theme] .card.brief { color: #2B1405; border: 1px solid rgba(255, 210, 170, .7);
  background: linear-gradient(150deg, rgba(255, 168, 98, .76) 0%, rgba(255, 128, 36, .76) 50%, rgba(238, 102, 16, .76) 100%);
  -webkit-backdrop-filter: blur(10px) saturate(150%); backdrop-filter: blur(10px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 236, 214, .7), 0 20px 40px -24px rgba(214, 96, 16, .6); text-shadow: none; }
:root .card.brief h2, :root .card.brief .br-v { color: #1F0E02; }
:root .card.brief .eyebrow, :root .card.brief .br-l, :root .card.brief .br-cell small, :root .card.brief .br-v .br-sub { color: rgba(43, 20, 5, .8); }
:root .card.brief .eyebrow { font-weight: 600; }
:root .card.brief .br-v .up, :root .card.brief .br-v.up { color: #06603F; }
:root .card.brief .br-v .down, :root .card.brief .br-v.down { color: #9E1D25; }
:root .card.brief .br-chip { color: #1F0E02; background: rgba(255, 255, 255, .3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 0 0 1px rgba(120, 50, 0, .22); }
:root .card.brief .br-chip.down i { background: #9E1D25; } :root .card.brief .br-chip.up i { background: #06603F; }
:root .card.brief .br-grid, :root .card.brief .br-cell { border-color: rgba(120, 50, 0, .2); }
:root .card.brief .br-cell:nth-child(4n+2), :root .card.brief .br-cell:nth-child(4n+3), :root .card.brief .br-cell:nth-child(4n+4) { border-inline-start-color: rgba(120, 50, 0, .2); }
:root .card.brief a.br-cell:hover .br-v { color: #1F0E02; text-decoration: underline; text-decoration-color: rgba(43, 20, 5, .45); text-underline-offset: 4px; }
:root[data-theme="dark"] .card.brief { color: #fff; border-color: rgba(255, 190, 140, .45);
  background: linear-gradient(150deg, rgba(240, 130, 50, .74) 0%, rgba(214, 96, 16, .74) 50%, rgba(170, 70, 8, .74) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 210, 170, .4), 0 20px 40px -24px rgba(214, 96, 16, .55); text-shadow: 0 1px 2px rgba(60, 20, 0, .35); }
:root[data-theme="dark"] .card.brief h2, :root[data-theme="dark"] .card.brief .br-v { color: #fff; }
:root[data-theme="dark"] .card.brief .eyebrow, :root[data-theme="dark"] .card.brief .br-l, :root[data-theme="dark"] .card.brief .br-cell small, :root[data-theme="dark"] .card.brief .br-v .br-sub { color: rgba(255, 255, 255, .88); }
:root[data-theme="dark"] .card.brief .br-v .up, :root[data-theme="dark"] .card.brief .br-v.up { color: #B9FFE3; }
:root[data-theme="dark"] .card.brief .br-v .down, :root[data-theme="dark"] .card.brief .br-v.down { color: #FFE0E2; }
:root[data-theme="dark"] .card.brief .br-chip { color: #fff; background: rgba(255, 255, 255, .16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 0 0 1px rgba(255, 255, 255, .25); }
:root[data-theme="dark"] .card.brief .br-chip.down i { background: #FFC2C4; } :root[data-theme="dark"] .card.brief .br-chip.up i { background: #8DF5CE; }
:root[data-theme="dark"] .card.brief .br-grid, :root[data-theme="dark"] .card.brief .br-cell { border-color: rgba(255, 255, 255, .22); }
:root[data-theme="dark"] .card.brief .br-cell:nth-child(4n+2), :root[data-theme="dark"] .card.brief .br-cell:nth-child(4n+3), :root[data-theme="dark"] .card.brief .br-cell:nth-child(4n+4) { border-inline-start-color: rgba(255, 255, 255, .22); }
:root[data-theme="dark"] .card.brief a.br-cell:hover .br-v { color: #fff; text-decoration-color: rgba(255, 255, 255, .5); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .card.brief { color: #fff; border-color: rgba(255, 190, 140, .45);
  background: linear-gradient(150deg, rgba(240, 130, 50, .74) 0%, rgba(214, 96, 16, .74) 50%, rgba(170, 70, 8, .74) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 210, 170, .4), 0 20px 40px -24px rgba(214, 96, 16, .55); text-shadow: 0 1px 2px rgba(60, 20, 0, .35); }
:root:not([data-theme="light"]) .card.brief h2, :root:not([data-theme="light"]) .card.brief .br-v { color: #fff; }
:root:not([data-theme="light"]) .card.brief .eyebrow, :root:not([data-theme="light"]) .card.brief .br-l, :root:not([data-theme="light"]) .card.brief .br-cell small, :root:not([data-theme="light"]) .card.brief .br-v .br-sub { color: rgba(255, 255, 255, .88); }
:root:not([data-theme="light"]) .card.brief .br-v .up, :root:not([data-theme="light"]) .card.brief .br-v.up { color: #B9FFE3; }
:root:not([data-theme="light"]) .card.brief .br-v .down, :root:not([data-theme="light"]) .card.brief .br-v.down { color: #FFE0E2; }
:root:not([data-theme="light"]) .card.brief .br-chip { color: #fff; background: rgba(255, 255, 255, .16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 0 0 1px rgba(255, 255, 255, .25); }
:root:not([data-theme="light"]) .card.brief .br-chip.down i { background: #FFC2C4; } :root:not([data-theme="light"]) .card.brief .br-chip.up i { background: #8DF5CE; }
:root:not([data-theme="light"]) .card.brief .br-grid, :root:not([data-theme="light"]) .card.brief .br-cell { border-color: rgba(255, 255, 255, .22); }
:root:not([data-theme="light"]) .card.brief .br-cell:nth-child(4n+2), :root:not([data-theme="light"]) .card.brief .br-cell:nth-child(4n+3), :root:not([data-theme="light"]) .card.brief .br-cell:nth-child(4n+4) { border-inline-start-color: rgba(255, 255, 255, .22); }
:root:not([data-theme="light"]) .card.brief a.br-cell:hover .br-v { color: #fff; text-decoration-color: rgba(255, 255, 255, .5); }
}

/* ---------- landing on phones: no masks and no viewport-sized glows (Safari draws both with hard edges) ---------- */
@media (hover: none), (pointer: coarse), (max-width: 899px) {
  .lp-hero-bg, .lp[dir="rtl"] .lp-hero-bg {
    background:
      radial-gradient(90% 55% at 75% 40%, rgba(64, 110, 235, .22) 0%, transparent 70%),
      radial-gradient(90% 45% at 0% 0%, rgba(40, 70, 160, .32) 0%, transparent 72%),
      radial-gradient(80% 40% at 100% 100%, rgba(110, 90, 210, .18) 0%, transparent 72%),
      linear-gradient(180deg, #070A12 0%, #05070C 100%); }
  .lp-hero-bg::after { -webkit-mask-image: none; mask-image: none;
    background-image: radial-gradient(ellipse 90% 80% at 60% 45%, rgba(5, 7, 12, 0) 35%, rgba(5, 7, 12, .9) 100%), radial-gradient(rgba(205, 218, 240, .16) 1px, transparent 1.4px);
    background-size: 100% 100%, 17px 17px; background-repeat: no-repeat, repeat; }
}
/* the menu sits over busy content: a solid sheet (no backdrop blur, which let the page show through its tiles) */
.acct-menu.am { background: #F8FAFD; -webkit-backdrop-filter: none; backdrop-filter: none; }
:root[data-theme="dark"] .acct-menu.am { background: #151A25; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .acct-menu.am { background: #151A25; } }

/* ---------- dark mode cards, style A "Aurora rim" ---------- */
/* the lit rim: blue at the top-left corner, through violet, to a hint of brand orange at the bottom-right */
:root[data-theme="dark"] :is(.card:not(.brief), .ws) { position: relative; isolation: isolate; border-color: transparent; background-color: rgba(18, 23, 36, .42); }
:root[data-theme="dark"] :is(.card:not(.brief), .ws)::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 2;
  background: linear-gradient(140deg, rgba(120, 160, 255, .75), rgba(150, 120, 255, .28) 28%, rgba(255, 255, 255, .05) 55%, rgba(255, 255, 255, .03) 80%, rgba(255, 150, 80, .35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
/* cool light pooling in the top corner (not while the page is still loading: the skeleton shimmer uses this layer) */
:root[data-theme="dark"]:not(.lp-loading) :is(.card:not(.brief), .ws)::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(70% 55% at 0% 0%, rgba(90, 130, 255, .20), transparent 70%), radial-gradient(50% 40% at 100% 100%, rgba(150, 110, 255, .10), transparent 70%); }
:root[data-theme="dark"] [dir="rtl"] :is(.card:not(.brief), .ws)::before { background: linear-gradient(220deg, rgba(120, 160, 255, .75), rgba(150, 120, 255, .28) 28%, rgba(255, 255, 255, .05) 55%, rgba(255, 255, 255, .03) 80%, rgba(255, 150, 80, .35)); }
:root[data-theme="dark"]:not(.lp-loading) [dir="rtl"] :is(.card:not(.brief), .ws)::after { background: radial-gradient(70% 55% at 100% 0%, rgba(90, 130, 255, .20), transparent 70%), radial-gradient(50% 40% at 0% 100%, rgba(150, 110, 255, .10), transparent 70%); }
/* titles: a small glowing dot; quieter subtitles */
:root[data-theme="dark"] .card:not(.brief) > .card-head h2 { display: flex; align-items: center; gap: 10px; }
:root[data-theme="dark"] .card:not(.brief) > .card-head h2::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #7FA6FF; box-shadow: 0 0 0 4px rgba(127, 166, 255, .14), 0 0 12px rgba(127, 166, 255, .85); }
:root[data-theme="dark"] .card > .card-head .sub { color: rgba(200, 212, 240, .62); }
/* tables: micro-caps headers over a blue hairline, faint row lines, a blue sweep on hover */
:root[data-theme="dark"] table.t thead th, :root[data-theme="dark"] table.t thead th .mt-sort { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: rgba(190, 205, 240, .55); font-weight: 600; }
:root[data-theme="dark"] table.t thead th { border-bottom: 1px solid rgba(127, 166, 255, .22); }
:root[data-theme="dark"] table.t td { border-bottom-color: rgba(255, 255, 255, .05); }
:root[data-theme="dark"] table.t tbody tr.go:hover td { background: linear-gradient(90deg, rgba(90, 130, 255, .10), rgba(90, 130, 255, .02)); }
:root[data-theme="dark"] [dir="rtl"] table.t tbody tr.go:hover td { background: linear-gradient(270deg, rgba(90, 130, 255, .10), rgba(90, 130, 255, .02)); }
:root[data-theme="dark"] .mv-tile { border-color: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), inset 0 1px 0 rgba(255, 255, 255, .1); }
@media (prefers-color-scheme: dark) {
/* the lit rim: blue at the top-left corner, through violet, to a hint of brand orange at the bottom-right */
:root:not([data-theme="light"]) :is(.card:not(.brief), .ws) { position: relative; isolation: isolate; border-color: transparent; background-color: rgba(18, 23, 36, .42); }
:root:not([data-theme="light"]) :is(.card:not(.brief), .ws)::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 2;
  background: linear-gradient(140deg, rgba(120, 160, 255, .75), rgba(150, 120, 255, .28) 28%, rgba(255, 255, 255, .05) 55%, rgba(255, 255, 255, .03) 80%, rgba(255, 150, 80, .35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
/* cool light pooling in the top corner (not while the page is still loading: the skeleton shimmer uses this layer) */
:root:not([data-theme="light"]):not(.lp-loading) :is(.card:not(.brief), .ws)::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(70% 55% at 0% 0%, rgba(90, 130, 255, .20), transparent 70%), radial-gradient(50% 40% at 100% 100%, rgba(150, 110, 255, .10), transparent 70%); }
:root:not([data-theme="light"]) [dir="rtl"] :is(.card:not(.brief), .ws)::before { background: linear-gradient(220deg, rgba(120, 160, 255, .75), rgba(150, 120, 255, .28) 28%, rgba(255, 255, 255, .05) 55%, rgba(255, 255, 255, .03) 80%, rgba(255, 150, 80, .35)); }
:root:not([data-theme="light"]):not(.lp-loading) [dir="rtl"] :is(.card:not(.brief), .ws)::after { background: radial-gradient(70% 55% at 100% 0%, rgba(90, 130, 255, .20), transparent 70%), radial-gradient(50% 40% at 0% 100%, rgba(150, 110, 255, .10), transparent 70%); }
/* titles: a small glowing dot; quieter subtitles */
:root:not([data-theme="light"]) .card:not(.brief) > .card-head h2 { display: flex; align-items: center; gap: 10px; }
:root:not([data-theme="light"]) .card:not(.brief) > .card-head h2::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #7FA6FF; box-shadow: 0 0 0 4px rgba(127, 166, 255, .14), 0 0 12px rgba(127, 166, 255, .85); }
:root:not([data-theme="light"]) .card > .card-head .sub { color: rgba(200, 212, 240, .62); }
/* tables: micro-caps headers over a blue hairline, faint row lines, a blue sweep on hover */
:root:not([data-theme="light"]) table.t thead th, :root:not([data-theme="light"]) table.t thead th .mt-sort { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: rgba(190, 205, 240, .55); font-weight: 600; }
:root:not([data-theme="light"]) table.t thead th { border-bottom: 1px solid rgba(127, 166, 255, .22); }
:root:not([data-theme="light"]) table.t td { border-bottom-color: rgba(255, 255, 255, .05); }
:root:not([data-theme="light"]) table.t tbody tr.go:hover td { background: linear-gradient(90deg, rgba(90, 130, 255, .10), rgba(90, 130, 255, .02)); }
:root:not([data-theme="light"]) [dir="rtl"] table.t tbody tr.go:hover td { background: linear-gradient(270deg, rgba(90, 130, 255, .10), rgba(90, 130, 255, .02)); }
:root:not([data-theme="light"]) .mv-tile { border-color: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), inset 0 1px 0 rgba(255, 255, 255, .1); }
}
.auth-google[hidden], .auth-or[hidden] { display: none !important; }
/* the account menu never runs off the bottom of the window: it scrolls inside itself instead (app sets the exact height) */
.acct-menu.am { max-height: calc(100dvh - 96px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }

/* Portfolio: locked, with a "coming soon" page that explains what it will do */
.mainnav a[data-soon]::after { content: attr(data-soon); display: inline-block; position: static; transform: none; height: auto; line-height: 1.5; margin-inline-start: 6px; padding: 1px 6px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .02em; vertical-align: 1px;
  color: #8A3D05; background: rgba(255, 138, 51, .16); box-shadow: inset 0 0 0 1px rgba(255, 138, 51, .4); }
:root[data-theme="dark"] .mainnav a[data-soon]::after { color: #FFC08A; background: rgba(255, 138, 51, .14); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mainnav a[data-soon]::after { color: #FFC08A; background: rgba(255, 138, 51, .14); } }
@media (max-width: 430px) { .mainnav a[data-soon]::after { margin-inline-start: 4px; padding: 1px 5px; font-size: 9.5px; } }
.am-soon { background: rgba(255, 138, 51, .16); color: #8A3D05; box-shadow: inset 0 0 0 1px rgba(255, 138, 51, .45); }
:root[data-theme="dark"] .am-soon { color: #FFC08A; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .am-soon { color: #FFC08A; } }
.pfs-head .eyebrow { display: flex; align-items: center; gap: 10px; }
.pfs-soon { padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .01em; text-transform: none; color: var(--brand-ink, #1F0E02); background: var(--brand-btn, #FF8A33); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 6px 16px -8px rgba(255, 122, 26, .7); }
.pfs { display: grid; gap: 16px; }
.card.pfs-lock { flex-direction: row; align-items: center; justify-content: flex-start; text-align: start; gap: 16px; padding: 18px 20px; }
.pfs-lock b { font-family: var(--f-title); font-size: 16px; }
.pfs-lock p { margin: 3px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.pfs-lock-ic, .pfs-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: var(--blue); background: var(--icon-bg); box-shadow: var(--icon-hi), 0 0 0 1px var(--line); }
.pfs-lock-ic { color: #C2560A; background: linear-gradient(180deg, rgba(255, 168, 98, .3), rgba(255, 128, 36, .12)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 0 0 1px rgba(255, 138, 51, .4); }
:root[data-theme="dark"] .pfs-lock-ic { color: #FFB06B; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pfs-lock-ic { color: #FFB06B; } }
.pfs-lock-ic svg, .pfs-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pfs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 760px) { .pfs-grid { grid-template-columns: minmax(0, 1fr); } }
.pfs-feat { display: flex; flex-direction: column; gap: 8px; padding: 22px; }
.pfs-feat h2 { margin: 8px 0 0; font-size: 20px; }
.pfs-feat > .sub { margin: 0; }
.pfs-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.pfs-list li { position: relative; padding: 10px 0 10px 26px; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.45; color: var(--ink-2, var(--ink)); }
[dir="rtl"] .pfs-list li { padding: 10px 26px 10px 0; }
.pfs-list li:last-child { border-bottom: 0; }
.pfs-list li::before { content: ""; position: absolute; inset-inline-start: 2px; top: 15px; width: 12px; height: 7px; border-left: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: rotate(-45deg); }
.pfs-fine { margin: 0; }
.pfs-cta { gap: 10px; }
.pfs-cta a.f-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.card.pfs-pro { flex-direction: row; align-items: center; gap: 16px; padding: 18px 20px; border-color: rgba(255, 138, 51, .45);
  background-image: linear-gradient(120deg, rgba(255, 168, 98, .22), rgba(255, 128, 36, .08) 55%, transparent); }
.pfs-pro .pro-tag { flex: none; }
.pfs-pro-txt { flex: 1; min-width: 0; }
.pfs-pro-txt b { font-family: var(--f-title); font-size: 16px; }
.pfs-pro-txt p { margin: 3px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.pfs-pro-act { flex: none; }
.pfs-pro-act a.pro-btn { display: inline-flex; align-items: center; text-decoration: none; }
@media (max-width: 760px) { .card.pfs-pro { flex-wrap: wrap; } .pfs-pro-txt { flex-basis: calc(100% - 70px); } .pfs-pro-act { width: 100%; } .pfs-pro-act > * { width: 100%; justify-content: center; } }
.pfs-pro .pro-tag { color: var(--brand-ink, #1F0E02); background: var(--brand-btn, #FF8A33); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 6px 16px -8px rgba(255, 122, 26, .7); }
.pfs-pro .pro-btn { color: var(--brand-ink, #1F0E02); background: var(--brand-btn, #FF8A33); border: 0; box-shadow: var(--brand-glow, 0 10px 26px -10px rgba(255, 122, 26, .65)); }
.pfs-pro .pro-btn.ghost { color: var(--ink); background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 138, 51, .6); }