/* ════════════════════════════════════════════════════════════════
   BRAND BOOK 2026 — DESIGN TOKENS
   FOCUS DARK (default)  · "Direction, with edge"
   FOCUS LIGHT (premium)  · "Where composure meets capital"
   Tokens lifted verbatim from the brand book palette pages.
   ════════════════════════════════════════════════════════════════ */
:root {
  /* ── FOCUS DARK — Color, at voltage ── */
  --bg:   #0A0F1F;   /* Midnight · app background  (SURFACE·INK) */
  --s1:   #111A33;   /* raised surface */
  --s2:   #16203d;   /* elevated card */
  --s3:   #1d2a4a;   /* highest surface / chips */
  --b1: rgba(241, 244, 251, 0.07);
  --b2: rgba(241, 244, 251, 0.14);
  --ac:   #3B6BFF;   /* Voltage · CTAs, links, focus */
  --bl:   #3B6BFF;   /* stocks share the voltage accent */
  --gd:   #B89150;   /* brass garnish, retained for FX chip only */
  --rd:   #FF4D5E;   /* Flare · losses */
  --gr:   #2BD17E;   /* Charge · gains */
  --t1:   #F1F4FB;   /* Paper · all body type */
  --t2:   #9aa6c4;   /* muted text */
  --t3:   #58688c;   /* faint text / captions */
  --font-logo:  'Red Hat Display', 'Assistant', sans-serif;   /* wordmark + mark ONLY */
  --font-title: 'Instrument Serif', 'Assistant', serif;
  --font-body:  'Geist', 'Assistant', 'Rubik', sans-serif;
  --font-mono:  'Geist Mono', 'JetBrains Mono', monospace;     /* numbers — tnum-style mono */
  --radius: 20px;     /* Focus cards: softly rounded */
  --radius-sm: 14px;
  --nav: 66px;
  --safe: env(safe-area-inset-bottom, 0px);
}

body.light {
  /* ── LIGHT MODE — mirror of dark mode with a brighter palette ──
     Same fonts, same radii, same structure. Only color values differ. */
  --bg:   #E8ECF4;   /* Soft cool grey-blue — easier on the eyes than white */
  --s1:   #F3F5FA;   /* raised surface */
  --s2:   #ECF0F7;   /* elevated card */
  --s3:   #DFE6F0;   /* highest surface / chips */
  --b1: rgba(11, 30, 63, 0.07);
  --b2: rgba(11, 30, 63, 0.14);
  --ac:   #3B6BFF;   /* same Voltage blue accent */
  --bl:   #3B6BFF;
  --gd:   #8F6A1B;   /* brass — darkened so it reads clearly on light glass tiles */
  --rd:   #C11A32;   /* losses — deepened for contrast in light mode */
  --gr:   #0A7A40;   /* gains — darker for readable contrast on light glass */
  --t1:   #0A0F1F;   /* primary text (mirror of dark --bg) */
  --t2:   #2E3958;   /* secondary text — dark slate, readable on glass */
  --t3:   #4A5878;   /* tertiary / captions — still readable on light glass */
  /* Same fonts as dark mode for visual parity */
  --font-logo:  'Red Hat Display', 'Assistant', sans-serif;
  --font-title: 'Instrument Serif', 'Assistant', serif;
  --font-body:  'Geist', 'Assistant', 'Rubik', sans-serif;
  --font-mono:  'Geist Mono', 'JetBrains Mono', monospace;
  --radius: 20px;     /* matches dark mode exactly */
  --radius-sm: 14px;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; }
body { font-family: var(--font-body); font-weight: 300; background: var(--bg); color: var(--t1); display: flex; flex-direction: column; transition: background 0.25s ease, color 0.25s ease; }

/* Rubik Light for every element that doesn't have its own font-family override */
*:not([style*="font-family"]) {
  font-weight: inherit;
}
.pl, .ir-l, .mrl, .mant, .af-t, .ed-s, .lock-sub, .lock-btn-lbl,
.ni-lbl, .t-lbl, .s-lbl, .s-sub, .t-sub, .ct2, .mchl, .ar-name,
.rank-name, .dist-l, .mkpi-l, .stxt, .erow-name, .arow .ar-price,
.ins-title, .ir-l, .mrl, .mant, .lock-err {
  font-family: 'Geist', 'Assistant', 'Rubik', sans-serif;
  font-weight: 300;
}

/* Ambient: faint voltage wash on midnight; the light direction stays clean. */
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(circle at 12% 8%, rgba(59,107,255,0.06), transparent 42%),
              radial-gradient(circle at 88% 96%, rgba(59,107,255,0.04), transparent 46%);
  transition: opacity .25s;
}
body.light::before { opacity: 0; }
/* Light mode: a soft, barely-there shadow under every money figure lifts the digits
   off the bright glass tiles so amounts read clearly at a glance. */
body.light .mkpi-v,
body.light .vv,
body.light .pn,
body.light .s-val,
body.light .psc-val,
body.light .t-val,
body.light #grandNum,
body.light .avg-toggle-val {
  text-shadow: 0 1px 2px rgba(11, 30, 63, .22);
}

#app { flex: 1; overflow-y: auto; overflow-x: hidden; position: relative; z-index: 1; padding-bottom: calc(var(--nav) + var(--safe) + 32px); -webkit-overflow-scrolling: touch; }
#app::-webkit-scrollbar { width: 4px; }
#app::-webkit-scrollbar-thumb { background: var(--s3); border-radius: var(--radius); }

/* ── TOPBAR ── */
.topbar { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--b1); display: flex; align-items: center; justify-content: space-between; padding: 13px 18px; padding-top: calc(13px + env(safe-area-inset-top, 0px)); }
.logo { display: flex; align-items: center; gap: 9px; }
/* ── PRO button (removes ads) ── */
.pro-btn { background: linear-gradient(135deg, color-mix(in srgb, var(--gd) 18%, transparent), color-mix(in srgb, var(--gd) 6%, transparent)); border: 1px solid color-mix(in srgb, var(--gd) 45%, transparent); color: var(--gd); font-family: var(--font-mono); font-size: 10px; font-weight: 800; letter-spacing: .12em; border-radius: 999px; padding: 4px 11px; cursor: pointer; transition: all .15s; line-height: 1; }
.pro-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px color-mix(in srgb, var(--gd) 25%, transparent); }
.pro-btn.on { background: var(--gd); color: #0A0F1F; border-color: var(--gd); }
.pro-btn.on::after { content: ' ✓'; }
/* Plan badge variants (the chip mirrors the ACTIVE PLAN, not just PRO) */
.pro-btn.plan-free { background: var(--s2); border-color: var(--b1); color: var(--t3); }
.pro-btn.plan-free:hover { box-shadow: none; border-color: var(--ac); color: var(--ac); }
.pro-btn.plan-premium { display: inline-flex; align-items: center; gap: 5px;
  background: linear-gradient(135deg, #E8B84B, #C8922A 55%, #E8B84B);
  border-color: #E8B84B; color: #1A1206;
  box-shadow: 0 0 0 1px color-mix(in srgb, #E8B84B 35%, transparent), 0 3px 12px color-mix(in srgb, #E8B84B 30%, transparent);
  animation: crownShine 3.2s ease-in-out infinite; }
.pro-btn.plan-premium i { font-size: 12px; line-height: 1; }
.pro-btn.plan-premium:hover { box-shadow: 0 0 0 1px #E8B84B, 0 5px 18px color-mix(in srgb, #E8B84B 45%, transparent); }
.pro-btn.plan-premium::after { content: none; }
@keyframes crownShine { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.18); } }
/* Balance privacy eye */
.balance-eye { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; margin-inline-start:10px; background:var(--s3); border:1px solid var(--b1); border-radius:8px; color:var(--t2); cursor:pointer; font-size:15px; vertical-align:middle; transition:all .12s; padding:0; }
.balance-eye:hover { border-color:var(--ac); color:var(--ac); }
/* First-run welcome screen */
.welcome-ov { position:fixed; inset:0; z-index:950; display:none; align-items:center; justify-content:center; background:color-mix(in srgb, var(--bg,#070B18) 80%, transparent); backdrop-filter:blur(16px); }
.welcome-ov.show { display:flex; animation:fadeIn .25s ease; }
.welcome-box { width:min(430px,90vw); background:linear-gradient(160deg, color-mix(in srgb, var(--ac) 10%, var(--s2)), var(--s2)); border:1px solid var(--b2); border-radius:22px; padding:32px 26px; text-align:center; box-shadow:0 40px 100px rgba(0,0,0,.55); }
.welcome-ico { width:66px; height:66px; margin:0 auto 16px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:color-mix(in srgb, var(--ac) 18%, transparent); color:var(--ac); font-size:32px; }
.welcome-title { font-size:22px; font-weight:800; color:var(--t1); margin-bottom:10px; }
.welcome-sub { font-size:13.5px; color:var(--t2); line-height:1.6; margin-bottom:22px; }
.welcome-cta { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; background:var(--ac); color:#fff; border:none; border-radius:12px; padding:13px; font-family:var(--font-body); font-size:14.5px; font-weight:800; cursor:pointer; transition:transform .12s, box-shadow .12s; }
.welcome-cta:hover { transform:translateY(-2px); box-shadow:0 10px 30px color-mix(in srgb, var(--ac) 35%, transparent); }
.welcome-skip { margin-top:12px; background:none; border:none; color:var(--t3); font-size:12.5px; cursor:pointer; text-decoration:underline; }
.welcome-skip:hover { color:var(--t2); }
/* ── Profile chip + popover ── */
.profile-chip { display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; overflow:hidden; border:2px solid color-mix(in srgb, var(--ac) 55%, var(--b1)); background:var(--s3); cursor:pointer; padding:0; transition:transform .12s, box-shadow .12s; }
.profile-chip:hover { transform:scale(1.06); box-shadow:0 0 0 3px color-mix(in srgb, var(--ac) 20%, transparent); }
.profile-chip img { width:100%; height:100%; object-fit:cover; }
.profile-chip span { font-family:var(--font-mono); font-weight:800; font-size:13px; color:var(--ac); }
.profile-pop { position:absolute; top:52px; inset-inline-start:12px; z-index:600; width:250px; background:var(--s1); border:1px solid var(--b2); border-radius:14px; padding:14px; box-shadow:0 20px 50px rgba(0,0,0,.45); display:none; }
.profile-pop.open { display:block; animation:fadeSlide .15s ease; }
.profile-pop-head { display:flex; align-items:center; gap:11px; margin-bottom:12px; }
.profile-pop-avatar { width:44px; height:44px; border-radius:50%; overflow:hidden; flex:0 0 44px; background:var(--s3); display:flex; align-items:center; justify-content:center; border:2px solid color-mix(in srgb, var(--ac) 45%, var(--b1)); }
.profile-pop-avatar img { width:100%; height:100%; object-fit:cover; }
.profile-pop-avatar span { font-family:var(--font-mono); font-weight:800; font-size:18px; color:var(--ac); }
.profile-pop-name { font-size:14px; font-weight:800; color:var(--t1); }
.profile-pop-email { font-size:11px; color:var(--t3); direction:ltr; text-align:end; }
.profile-pop-verify { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--gd); background:color-mix(in srgb, var(--gd) 10%, transparent); border:1px solid color-mix(in srgb, var(--gd) 28%, transparent); border-radius:8px; padding:7px 9px; margin-bottom:10px; }
.profile-pop-verify button { margin-inline-start:auto; background:none; border:none; color:var(--gd); font-size:11px; font-weight:700; text-decoration:underline; cursor:pointer; padding:0; }
.profile-pop-logout { display:flex; align-items:center; justify-content:center; gap:7px; width:100%; background:color-mix(in srgb, var(--rd) 9%, var(--s2)); border:1px solid color-mix(in srgb, var(--rd) 30%, var(--b1)); color:var(--rd); font-family:var(--font-body); font-size:12.5px; font-weight:700; border-radius:9px; padding:9px; cursor:pointer; transition:all .12s; }
.profile-pop-logout:hover { background:color-mix(in srgb, var(--rd) 16%, var(--s2)); }
/* Apple / Facebook buttons */
.gbtn.provider-apple { background:#000; color:#fff; border-color:#333; }
.gbtn.provider-apple svg { width:18px; height:18px; }
body.light .gbtn.provider-apple { background:#000; color:#fff; }
.gbtn.provider-facebook svg { width:18px; height:18px; }
/* ── Ad card (inside asset grids) ── */
.ad-card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 200px; height: 100%; align-self: stretch; background: linear-gradient(145deg, color-mix(in srgb, var(--ac) 7%, var(--s3)), var(--s3)); border: 1px dashed color-mix(in srgb, var(--ac) 40%, var(--b1)); border-radius: var(--radius); padding: 20px; text-align: center; overflow: hidden; box-sizing: border-box; }
/* Mobile: asset cards are compact single rows — the ad matches that shape */
@media (max-width: 640px) {
  .ad-card { min-height: 0; flex-direction: row; justify-content: flex-start; text-align: start; padding: 12px 14px; gap: 12px; }
  .ad-card .ad-ico { font-size: 20px; }
  .ad-card .ad-t { font-size: 12.5px; }
  .ad-card .ad-s { display: none; }
  .ad-card .ad-cta { margin-inline-start: auto; font-size: 10px; }
  .ad-card .ad-badge { position: static; order: -1; }
}
.ad-card .ad-badge { position: absolute; top: 8px; inset-inline-start: 8px; font-size: 9px; letter-spacing: .1em; color: var(--t3); border: 1px solid var(--b1); border-radius: 4px; padding: 2px 6px; background: var(--s2); font-family: var(--font-mono); }
.ad-card .ad-ico { font-size: 26px; color: color-mix(in srgb, var(--ac) 75%, var(--t3)); }
.ad-card .ad-t { font-size: 13px; font-weight: 700; color: var(--t2); }
.ad-card .ad-s { font-size: 11px; color: var(--t3); }
.ad-card .ad-cta { font-size: 10.5px; color: var(--gd); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
/* ── Interstitial (full-screen ad after login) ── */
.ad-inter { position: fixed; inset: 0; z-index: 900; display: none; align-items: center; justify-content: center; background: color-mix(in srgb, var(--bg, #070B18) 78%, transparent); backdrop-filter: blur(14px); }
.ad-inter.show { display: flex; }
.ad-inter-box { position: relative; width: min(420px, 90vw); background: var(--s2); border: 1px solid var(--b2); border-radius: 22px; padding: 34px 26px 26px; text-align: center; box-shadow: 0 40px 100px rgba(0,0,0,.6); }
.ad-inter-x { position: absolute; top: 10px; inset-inline-end: 10px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: var(--s3); border: 1px solid var(--b1); border-radius: 50%; color: var(--t2); cursor: pointer; font-size: 15px; transition: all .12s; }
.ad-inter-x:hover { color: var(--t1); border-color: var(--ac); }
.ad-inter-slot { display: flex; flex-direction: column; align-items: center; gap: 10px; background: linear-gradient(145deg, color-mix(in srgb, var(--ac) 9%, var(--s3)), var(--s3)); border: 1px dashed color-mix(in srgb, var(--ac) 40%, var(--b1)); border-radius: 14px; padding: 34px 18px; margin-bottom: 14px; }
.ad-inter-slot i { font-size: 34px; color: color-mix(in srgb, var(--ac) 75%, var(--t3)); }
.ad-inter-slot .t { font-size: 15px; font-weight: 800; color: var(--t1); }
.ad-inter-slot .s { font-size: 12px; color: var(--t3); }
.ad-inter-pro { font-size: 12px; color: var(--t3); }
.ad-inter-pro b { color: var(--gd); cursor: pointer; }
/* ── News mid-list ad row ── */
.an-row-ad { display: flex; align-items: center; gap: 12px; background: linear-gradient(120deg, color-mix(in srgb, var(--ac) 6%, var(--s3)), var(--s3)); border: 1px dashed color-mix(in srgb, var(--ac) 38%, var(--b1)); border-radius: var(--radius-sm); padding: 12px 14px; }
.an-row-ad .an-ad-ico { width: 56px; height: 56px; flex: 0 0 56px; display: flex; align-items: center; justify-content: center; background: var(--s2); border-radius: 10px; font-size: 22px; color: color-mix(in srgb, var(--ac) 70%, var(--t3)); }
.an-row-ad .an-ad-t { font-size: 13px; font-weight: 700; color: var(--t2); }
.an-row-ad .an-ad-s { font-size: 11px; color: var(--t3); margin-top: 2px; }
.an-row-ad .ad-badge { margin-inline-start: auto; font-size: 9px; letter-spacing: .1em; color: var(--t3); border: 1px solid var(--b1); border-radius: 4px; padding: 2px 6px; background: var(--s2); font-family: var(--font-mono); align-self: flex-start; }
body.pro-mode .ad-card, body.pro-mode .an-row-ad, body.pro-mode .an-ad, body.pro-mode .ad-inter { display: none !important; }
/* Focus mark: F + decimal point, solid voltage square (brand: never outline-only) */
.logo-m { width: 34px; height: 34px; border-radius: 9px; background: var(--ac); display: flex; align-items: center; justify-content: center; font-family: var(--font-logo); font-style: normal; font-weight: 400; font-size: 22px; line-height: 1; color: #F1F4FB; letter-spacing: -1px; }
body.light .logo-m { border-radius: 50%; background: var(--ac); color: var(--bg); font-style: normal; }
.logo-t { font-family: var(--font-title); font-size: 24px; font-weight: 400; letter-spacing: -0.3px; line-height: 1; }
.logo-t span { color: var(--t3); }

.topbar-r { display: flex; align-items: center; gap: 7px; }
.live { display: flex; align-items: center; gap: 5px; background: var(--b1); border: 1px solid var(--b2); padding: 4px 8px; border-radius: var(--radius-sm); font-size: 11px; font-weight: 700; font-family: var(--font-mono); color: var(--gr); letter-spacing: 0.5px; }
.dot { width: 5px; height: 5px; background: var(--gr); border-radius: 50%; animation: blink 1.6s infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }

.ibtn { width: 34px; height: 34px; border-radius: var(--radius-sm); background: var(--s1); border: 1px solid var(--b1); color: var(--t2); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; transition: all 0.15s; }
.ibtn:hover { border-color: var(--ac); color: var(--t1); background: var(--s2); }
.ibtn.spin svg { animation: rot .7s linear infinite; }
@keyframes rot { to { transform: rotate(360deg); } }

/* ── Global refresh overlay ── */
#refreshOverlay {
  position: fixed; inset: 0; z-index: 9999;
  pointer-events: none; opacity: 0;
  transition: opacity .18s ease;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: max(env(safe-area-inset-top, 0px), 14px);
  padding-top: calc(max(env(safe-area-inset-top, 0px), 14px) + 56px);
}
#refreshOverlay.show { opacity: 1; pointer-events: none; }
.refresh-pill {
  display: flex; align-items: center; gap: 8px;
  background: var(--s2); border: 1px solid var(--b1);
  border-radius: 100px;
  padding: 7px 14px 7px 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
  color: var(--t2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transform: translateY(-8px);
  transition: transform .22s cubic-bezier(.2,.9,.3,1.1);
}
#refreshOverlay.show .refresh-pill { transform: translateY(0); }
.refresh-pill-spin {
  width: 14px; height: 14px;
  border: 2px solid var(--b2);
  border-top-color: var(--ac);
  border-radius: 50%;
  animation: rot .7s linear infinite;
  flex-shrink: 0;
}
#ts { font-size: 11px; color: var(--t3); font-family: var(--font-mono); font-weight: 500; margin-right: 4px; display: inline-flex; align-items: center; gap: 6px; }
#tsUs { color: var(--gd); letter-spacing: .3px; }
#ts .clock-sep { color: var(--b2); opacity: .8; }

/* ── BOTTOM NAV ── */
/* ── Sync & Backup section in the editor ── */
.sync-section { margin-top: 14px; padding: 14px; background: rgba(255,255,255,0.04); border: 1px solid var(--b1); border-radius: var(--radius-sm); display: flex; flex-direction: column; gap: 8px; }
.sync-title { font-size: 10px; color: var(--t3); text-transform: uppercase; letter-spacing: 1px; font-weight: 700; margin-bottom: 2px; }
.sync-status { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--t2); padding: 8px 10px; background: var(--s2); border-radius: 6px; font-family: var(--font-body); }
.sync-status.connected { color: var(--gr); background: color-mix(in srgb, var(--gr) 10%, transparent); }
.sync-status i { font-size: 14px; }
.sync-btn { background: var(--s2); border: 1px solid var(--b2); border-radius: var(--radius-sm); padding: 9px 12px; color: var(--t1); font-family: var(--font-body); font-size: 12px; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; transition: all .15s; }
.sync-btn:hover { background: var(--s3); border-color: var(--ac); }
.sync-btn.primary { background: var(--ac); color: #fff; border-color: var(--ac); }
.sync-btn.primary:hover { filter: brightness(1.1); }
.sync-btn i { font-size: 14px; }
.sync-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* ── Loading shimmer — sweeps a soft light bar across the card while data is fetching ── */
.card-loading {
  position: relative;
  overflow: hidden;
}
.card-loading::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -75%;
  width: 75%;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(255, 255, 255, 0.02) 30%,
    rgba(255, 255, 255, 0.06) 50%,
    rgba(255, 255, 255, 0.02) 70%,
    transparent 100%
  );
  animation: cardShimmer 2.6s ease-in-out infinite;
  pointer-events: none;
  will-change: transform;
}
@keyframes cardShimmer {
  0%   { transform: translateX(0); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateX(240%); opacity: 0; }
}
body.light .card-loading::after {
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(255, 255, 255, 0.12) 30%,
    rgba(255, 255, 255, 0.28) 50%,
    rgba(255, 255, 255, 0.12) 70%,
    transparent 100%
  );
}

/* When data is slow to arrive, show a gentle "still loading" hint (not an error) */
.card-unavailable { opacity: 0.8; }
.card-unavailable::before {
  content: 'הנתונים בדרך, רק רגע...';
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 9px;
  font-family: var(--font-body);
  color: var(--gd);
  background: color-mix(in srgb, var(--gd) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--gd) 28%, transparent);
  padding: 2px 7px;
  border-radius: 100px;
  z-index: 2;
}

/* ── Dashboard asset news (Yahoo-style) ── */
.asset-news { margin-top: 4px; }
.asset-news-loading, .asset-news-empty { padding: 24px; text-align: center; color: var(--t3); font-size: 12px; }
.asset-news-loading .spinner { display:inline-block; vertical-align:-3px; margin-inline-end:6px; }
.an-layout { display: grid; grid-template-columns: 1fr 300px; gap: 18px; align-items: start; }
.an-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.an-list { display: flex; flex-direction: column; }
.an-row { display: flex; gap: 14px; padding: 16px 4px; border-bottom: 1px solid var(--b1); text-decoration: none; transition: background .15s; align-items: flex-start; }
.an-row:last-child { border-bottom: none; }
.an-row:hover { background: color-mix(in srgb, var(--ac) 4%, transparent); }
.an-thumb { width: 132px; height: 84px; flex: 0 0 132px; border-radius: var(--radius-sm); background-size: cover; background-position: center; background-color: var(--s2); }
.an-thumb-empty { display: flex; align-items: center; justify-content: center; color: var(--t3); font-size: 24px; }
.an-body { min-width: 0; flex: 1; padding-top: 2px; }
.an-title { font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--t1); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.an-meta { display: flex; align-items: center; gap: 7px; margin-top: 8px; font-size: 11px; color: var(--t3); flex-wrap: wrap; }
.an-tag { font-family: var(--font-mono); font-weight: 700; font-size: 10px; color: var(--ac); background: color-mix(in srgb, var(--ac) 12%, transparent); border: 1px solid color-mix(in srgb, var(--ac) 25%, transparent); padding: 1px 7px; border-radius: 100px; }
.an-dot { opacity: .5; }
.an-ad { position: sticky; top: 12px; }
.an-ad-slot { width: 100%; min-height: 600px; border: 1px dashed var(--b2); border-radius: var(--radius); background: color-mix(in srgb, var(--s2) 50%, transparent); display: flex; align-items: center; justify-content: center; color: var(--t3); font-size: 11px; letter-spacing: .5px; }
@media (max-width: 820px) {
  .an-layout { grid-template-columns: 1fr; }
  .an-ad { display: none; }
  .an-thumb { width: 104px; height: 68px; flex-basis: 104px; }
  .an-title { font-size: 14px; }
}
.nav {
  position: fixed;
  bottom: calc(var(--safe) + 16px);
  left: 16px; right: 16px;
  z-index: 100;
  /* Diagonal glass body — slightly stronger than cards because it's floating */
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0.03) 100%);
  backdrop-filter: blur(26px) saturate(140%);
  -webkit-backdrop-filter: blur(26px) saturate(140%);
  border-radius: 999px;     /* full pill */
  /* Gradient border via mask trick — replaces solid border */
  border: 1px solid transparent;
  background-clip: padding-box;
  box-shadow:
    0 14px 38px rgba(0,0,0,.40),
    0 2px 8px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,0.10);
  display: flex;
  height: var(--nav);
  padding: 6px 8px;
  overflow: visible;
}
/* Gradient stroke layer — appears stronger on top-left, fading to nothing on bottom-right */
.nav::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.0) 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
body.light .nav {
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(255, 255, 255, 0.06) 100%);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  box-shadow: 0 14px 38px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,0.85);
}
body.light .nav::before {
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0.0) 100%);
}
.ni {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  border: none;
  background: none;
  color: rgba(255, 255, 255, 0.62);
  font-family: var(--font-body);
  padding: 4px 6px;
  border-radius: 999px;
  transition: all 0.2s cubic-bezier(.55,.2,.2,1);
  position: relative;
}
.ni:hover { color: rgba(255, 255, 255, 0.85); }
.ni.active {
  color: #fff;
}
/* Sliding pill behind the active nav item — moves between items instead of jumping. */
.nav-glider {
  position: absolute;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.04) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
  transition: left .38s cubic-bezier(.55,.2,.2,1), width .38s cubic-bezier(.55,.2,.2,1), top .38s, height .38s;
  pointer-events: none;
  z-index: 0;
  opacity: 0;               /* shown once first positioned */
}
.nav-glider.ready { opacity: 1; }
.ni { z-index: 1; }         /* items above the glider */
body.light .ni { color: rgba(0, 0, 0, 0.55); }
body.light .ni:hover { color: rgba(0, 0, 0, 0.85); }
body.light .ni.active {
  color: #000;
  font-weight: 700;
}
body.light .nav-glider { background: linear-gradient(135deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.02) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.5); }
.ni-ico { font-size: 22px; line-height: 1; display: block; }
.ni-lbl { font-size: 10.5px; font-weight: 500; letter-spacing: 0.3px; opacity: 0.95; }

/* ── FLOATING EDIT FAB (mobile only) ── */
/* Floating pencil — matches the navbar pill (gradient glass, white outline icon) */
.fab-edit {
  display: flex;
  position: fixed;
  bottom: calc(var(--nav) + var(--safe) + 18px);
  left: 18px;
  z-index: 110;
  width: 52px; height: 52px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0.03) 100%);
  backdrop-filter: blur(26px) saturate(140%);
  -webkit-backdrop-filter: blur(26px) saturate(140%);
  color: #fff;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow:
    0 14px 38px rgba(0,0,0,.40),
    0 2px 8px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,0.10);
  transition: transform .2s cubic-bezier(.55,.2,.2,1), box-shadow .2s;
  position: fixed;
}
/* Same gradient stroke as the navbar */
.fab-edit::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.0) 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.fab-edit:hover {
  transform: translateY(-2px) scale(1.04);
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0.05) 100%);
}
.fab-edit:active { transform: scale(.95); }
.fab-edit i { font-size: 22px; line-height: 1; position: relative; z-index: 1; }
body.light .fab-edit {
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(255, 255, 255, 0.06) 100%);
  color: #000;
  box-shadow: 0 14px 38px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,0.85);
}
body.light .fab-edit::before {
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0.0) 100%);
}

/* Desktop top nav — separate row ABOVE the ticker tape; hidden on mobile */
.nav-top { display: none; position: sticky; top: 0; z-index: 61; background: var(--bg); border-bottom: 1px solid var(--b2); height: 46px; padding: 0 18px; gap: 4px; align-items: stretch; }
.nav-top button { background: none; border: none; cursor: pointer; height: 100%; padding: 0 18px; font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--t2); letter-spacing: .2px; transition: color .12s; position: relative; }
.nav-top button:hover { color: var(--t1); }
.nav-top button.active { color: var(--t1); font-weight: 700; }
/* Sliding underline — one element that glides to the active tab instead of a
   per-button ::after that jumps. Positioned by positionTopNavLine(). */
.nav-top-line { position: absolute; bottom: -1px; height: 2px; background: var(--ac); border-radius: 2px;
  transition: left .35s cubic-bezier(.55,.2,.2,1), width .35s cubic-bezier(.55,.2,.2,1); opacity: 0; pointer-events: none; }
.nav-top-line.ready { opacity: 1; }
@media (min-width: 640px) {
  body { max-width: 100%; }
  .fab-edit { display: none; }
  .nav { display: none !important; }
  /* Topbar stays sticky at the top of the viewport (was already sticky); nav + ticker pin below it */
  .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 62; }
  .nav-top { display: flex; position: fixed; top: 62px; left: 0; right: 0; z-index: 61; }
  #tickerBar { display: flex !important; position: fixed !important; top: 108px !important; left: 0; right: 0; z-index: 60; }
  #marketBar { display: flex !important; position: fixed !important; top: 136px !important; left: 0; right: 0; z-index: 59; }
  #app { padding-bottom: 24px; padding-top: 164px; }   /* topbar(62) + nav(46) + ticker(28) + marketBar(28) = exact */
  /* Pickers are relocated to <body> via JS (positionPickerToBody) so they escape the
     topbar's backdrop-filter stacking context and float above the ticker/nav. */
  .fx-conv { z-index: 100001 !important; }
  .tk-menu { z-index: 100000 !important; }
}

/* ── TOP TICKER TAPE (dash only) ── */
#tickerBar { position: sticky; top: 0; z-index: 60; display: none; height: 28px; background: var(--bg); border-bottom: 1px solid var(--b2); overflow: visible; }
#tickerBar.show { display: flex; }
@media (min-width: 640px) { #tickerBar { display: flex !important; } }
.tk-mkt { position: relative; flex-shrink: 0; height: 100%; display: flex; align-items: center; gap: 5px; padding: 0 10px; cursor: pointer; background: var(--s2); border-left: 1px solid var(--b2); color: var(--t1); font-size: 11px; font-weight: 600; user-select: none; white-space: nowrap; }
.tk-mkt i { font-size: 11px; color: var(--t3); transition: transform .15s; }
.tk-mkt.open i { transform: rotate(180deg); }
.tk-menu { position: absolute; top: calc(100% + 4px); right: 4px; min-width: 150px; background: var(--s2); border: 1px solid var(--b2); border-radius: var(--radius-sm); box-shadow: 0 10px 28px rgba(0,0,0,.45); display: none; overflow: hidden; z-index: 70; }
.tk-mkt.open .tk-menu { display: block; }
.tk-opt { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 12px; font-size: 12.5px; font-weight: 500; color: var(--t1); transition: background .12s; }
.tk-opt:hover { background: var(--s3); }
.tk-opt.sel { background: var(--ac); color: #fff; }
.tk-opt.sel .tk-chk { color: var(--gr); }
body.light .tk-opt.sel { color: #F4EFE5; }
.tk-chk { visibility: hidden; font-size: 13px; }
.tk-opt.sel .tk-chk { visibility: visible; }
.tk-strip { flex: 1; overflow: hidden; position: relative; direction: ltr; mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent); }
.tk-track { display: inline-flex; align-items: center; height: 28px; white-space: nowrap; will-change: transform; animation: tkScroll var(--tk-dur, 40s) linear infinite; }
.tk-strip:hover .tk-track, .tk-strip:active .tk-track { animation-play-state: paused; }
@keyframes tkScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tk-item { display: inline-flex; align-items: baseline; gap: 6px; padding: 0 14px; font-family: var(--font-mono); font-size: 11px; }
.tk-sym { color: var(--t2); font-family: 'Geist Mono', 'Geist', monospace; font-style: italic; font-size: 12.5px; font-weight: 400; letter-spacing: .3px; }
.tk-px { color: var(--t1); font-weight: 500; }
.tk-chg { font-weight: 700; }
.tk-chg.up { color: var(--gr); }
.tk-chg.dn { color: var(--rd); }
.tk-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--t3); opacity: .5; flex-shrink: 0; }

/* ── SECOND BAR: MARKET STATUS (open/closed + countdown) ── */
#marketBar { position: sticky; top: 28px; z-index: 59; display: none; height: 28px; background: var(--bg); border-bottom: 1px solid var(--b2); overflow: visible; }
#marketBar.show { display: flex; }
@media (min-width: 640px) { #marketBar { display: flex !important; } }
.mk-label { flex-shrink: 0; height: 100%; display: flex; align-items: center; gap: 5px; padding: 0 10px; background: var(--s2); border-left: 1px solid var(--b2); color: var(--t1); font-size: 11px; font-weight: 600; white-space: nowrap; }
.mk-label i { font-size: 12px; color: var(--gd); }
.mk-strip { flex: 1; overflow: hidden; position: relative; direction: ltr; mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent); }
.mk-track { display: inline-flex; align-items: center; height: 28px; white-space: nowrap; will-change: transform; animation: tkScroll var(--mk-dur, 40s) linear infinite; }
.mk-strip:hover .mk-track, .mk-strip:active .mk-track { animation-play-state: paused; }
.mk-item { display: inline-flex; align-items: center; gap: 7px; padding: 0 16px; font-family: var(--font-body); font-size: 11px; }
.mk-flag { font-size: 12px; line-height: 1; }
.mk-name { color: var(--t2); font-family: var(--font-body); font-weight: 600; font-size: 12px; letter-spacing: .2px; }
.mk-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.mk-dot.open { background: var(--gr); box-shadow: 0 0 6px color-mix(in srgb, var(--gr) 70%, transparent); }
.mk-dot.closed { background: var(--rd); }
.mk-dot.pre { background: var(--gd); }
.mk-status { font-weight: 700; }
.mk-status.open { color: var(--gr); }
.mk-status.closed { color: var(--rd); }
.mk-status.pre { color: var(--gd); }
.mk-count { color: var(--t3); font-weight: 500; }
.mk-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--t3); opacity: .5; flex-shrink: 0; }

/* ── SYMBOL AUTOCOMPLETE ── */
.ff { position: relative; }
/* Currency selector embedded inside the "buy price" field. */
.cur-input-wrap { display: flex; align-items: stretch; border: 1px solid var(--b1); border-radius: var(--radius-sm); overflow: hidden; background: var(--s1); }
.cur-input-wrap .cur-select { flex-shrink: 0; width: auto; max-width: 78px; border: none; border-inline-end: 1px solid var(--b1); background: var(--s3); color: var(--t2); font-family: var(--font-mono); font-size: 12px; font-weight: 700; padding: 0 6px; cursor: pointer; outline: none; }
.cur-input-wrap input { flex: 1; min-width: 0; border: none !important; border-radius: 0 !important; background: transparent !important; }
.cur-input-wrap input:focus { outline: none; box-shadow: none; }
body.light .cur-input-wrap { background: #fff; }
body.light .cur-input-wrap .cur-select { background: rgba(10,15,31,0.04); }
.ac-box { position: absolute; top: calc(100% + 4px); right: 0; left: 0; background: var(--s2); border: 1px solid var(--b2); border-radius: var(--radius-sm); box-shadow: 0 12px 30px rgba(0,0,0,.45); z-index: 30; overflow: hidden; display: none; }
.ac-box.show { display: block; }
.ac-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; border-bottom: 1px solid var(--b1); transition: background .12s; direction: ltr; text-align: left; }
.ac-item:last-child { border-bottom: none; }
.ac-item:hover, .ac-item.hov { background: var(--s3); }
.ac-thumb { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; }
.ac-sym { font-family: 'Geist Mono', 'Geist', monospace; font-style: italic; font-size: 15px; color: var(--t1); min-width: 70px; }
.ac-name { font-family: 'Geist', 'Assistant', 'Rubik', sans-serif; font-weight: 500; font-size: 12px; color: var(--t2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.ac-exch { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; color: var(--gd); background: var(--s2); border: 1px solid var(--b1); padding: 2px 7px; border-radius: 100px; letter-spacing: .5px; white-space: nowrap; flex-shrink: 0; }
.ac-load { padding: 9px 12px; font-size: 11px; color: var(--t3); font-family: 'Geist', 'Assistant', 'Rubik', sans-serif; }

/* Asset names — Geist Medium (Latin) / Assistant (Hebrew) */
.ar-name, .rank-name, .erow-name, .mh p {
  font-family: 'Geist', 'Assistant', 'Rubik', sans-serif !important;
  font-weight: 500 !important;
}

/* ── NEWS PAGE ── */
.news-subtabs { display: flex; gap: 4px; background: var(--s1); border: 1px solid var(--b2); border-radius: var(--radius-sm); padding: 4px; margin-bottom: 14px; }
.news-subtab { flex: 1; padding: 10px 0; border: none; background: none; color: var(--t2); font-family: var(--font-body); font-size: 13.5px; font-weight: 500; border-radius: calc(var(--radius-sm) - 3px); cursor: pointer; transition: all .15s; }
.news-subtab.active { background: var(--ac); color: #fff; font-weight: 700; }
body.light .news-subtab.active { color: #F4EFE5; }
.news-list { display: grid; gap: 10px; }
@media (min-width: 640px) { .news-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .news-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.news-item { background: var(--s1); border: 1px solid var(--b1); border-radius: var(--radius); padding: 14px 16px; cursor: pointer; transition: border-color .15s, transform .15s; display: flex; flex-direction: column; gap: 8px; min-height: 110px; }
.news-item:hover { border-color: var(--ac); transform: translateY(-2px); }
.news-item-head { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.news-item-src { font-family: var(--font-mono); font-size: 10.5px; color: var(--t3); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
.news-item-time { font-family: var(--font-mono); font-size: 10.5px; color: var(--t3); }
.news-item-title { font-family: 'Instrument Serif', 'Assistant', serif; font-size: 16px; line-height: 1.35; color: var(--t1); font-weight: 400; letter-spacing: -.1px; }
.news-item-desc { font-family: 'Geist', 'Assistant', 'Rubik', sans-serif; font-weight: 300; font-size: 12.5px; color: var(--t2); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-item-sym { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; background: var(--s2); border: 1px solid var(--b1); border-radius: 20px; font-family: 'Geist Mono', 'Geist', monospace; font-style: italic; font-size: 12px; color: var(--ac); }
.news-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.news-list { padding-bottom: 20px; }
.news-pager { display: none; }
.news-pager button { background: var(--s1); border: 1px solid var(--b1); color: var(--t2); padding: 7px 12px; font-family: var(--font-mono); font-size: 12px; border-radius: var(--radius-sm); cursor: pointer; min-width: 34px; transition: all .15s; }
.news-pager button:hover:not(:disabled) { color: var(--t1); border-color: var(--ac); }
.news-pager button.active { background: var(--ac); color: #fff; border-color: var(--ac); font-weight: 700; }
body.light .news-pager button.active { color: #F4EFE5; }
.news-pager button:disabled { opacity: .35; cursor: not-allowed; }
.news-pager .news-pager-step { display: none; }
@media (min-width: 640px) { #page-news.active { padding: 0 18px 60px; } }
.news-filters:empty { display: none; }
.news-chip { background: var(--s1); border: 1px solid var(--b1); color: var(--t2); padding: 6px 14px; border-radius: 100px; font-family: var(--font-body); font-size: 12px; font-weight: 500; cursor: pointer; transition: all .15s; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.news-chip:hover { color: var(--t1); border-color: var(--ac); }
.news-chip.active { background: var(--ac); color: #fff; border-color: var(--ac); font-weight: 700; }
body.light .news-chip.active { color: #F4EFE5; }
.news-chip i { font-size: 11px; }
.news-empty { text-align: center; padding: 40px 20px; color: var(--t3); font-size: 13px; line-height: 1.7; }
.news-skel { height: 110px; background: var(--s1); border: 1px solid var(--b1); border-radius: var(--radius); position: relative; overflow: hidden; }
.news-skel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--t3) 8%, transparent), transparent); animation: news-shimmer 1.6s linear infinite; }
@keyframes news-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* News article reader (in-app, no external nav) */
.news-reader { display: flex; flex-direction: column; gap: 14px; }
.news-reader-head { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--b1); flex-wrap: wrap; }
.news-reader-back { background: none; border: 1px solid var(--b2); color: var(--t2); cursor: pointer; padding: 6px 12px; font-family: var(--font-body); font-size: 12px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; gap: 6px; }
.news-reader-back:hover { color: var(--t1); border-color: var(--ac); }
.news-reader-title { font-family: 'Instrument Serif', 'Assistant', serif; font-size: 22px; line-height: 1.3; color: var(--t1); font-weight: 400; letter-spacing: -.2px; }
.news-reader-meta { display: flex; align-items: center; gap: 14px; color: var(--t3); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
.news-reader-body { font-family: 'Geist', 'Assistant', 'Rubik', sans-serif; font-weight: 300; font-size: 15px; line-height: 1.75; color: var(--t1); }
.news-reader-body p { margin: 0 0 14px 0; }
.news-reader-img { width: 100%; max-height: 280px; object-fit: cover; border-radius: var(--radius-sm); margin-bottom: 6px; }


/* ── PERIOD PERFORMANCE SUMMARY ── */
.period-panel-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
.period-panel-title { display:flex; align-items:center; gap:7px; font-size:11px; color:var(--t2); text-transform:uppercase; letter-spacing:1px; font-weight:700; }
.period-cache-status { min-height:18px; font-family:var(--font-mono); font-size:9.5px; color:var(--t3); display:flex; align-items:center; gap:5px; }
.period-cache-status.fresh { color:var(--gr); }
.period-cache-status.updating { color:var(--gd); }
.period-cache-status.error { color:var(--rd); }
.period-presets { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:10px; }
.period-presets .pb2 { flex:0 1 auto; min-width:64px; white-space:nowrap; }
.period-date-row { margin-bottom:10px; }
.period-result-grid { display:flex; flex-direction:column; gap:10px; }
.period-initial, .period-loading, .period-error { padding:14px; text-align:center; color:var(--t3); font-size:11px; }
.period-loading i, .period-initial i { vertical-align:-2px; margin-inline-end:6px; }
/* collapsible asset breakdown */
.period-cards-toggle { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 14px; background:var(--s2); border:1px solid var(--b1); border-radius:var(--radius-sm); cursor:pointer; font-size:11.5px; font-weight:700; color:var(--t2); transition:border-color .15s, background .15s; }
.period-cards-toggle:hover { border-color:var(--ac); color:var(--t1); }
.period-cards-toggle span { display:flex; align-items:center; gap:7px; }
.period-cards-caret { transition:transform .2s ease; font-size:13px; }
.period-cards-wrap { display:grid; grid-template-columns:repeat(auto-fill,minmax(145px,1fr)); gap:7px; }
.period-side { display:flex; flex-direction:column; gap:10px; min-width:0; }
.period-asset-card { background:var(--s3); border:1px solid var(--b1); border-radius:var(--radius-sm); padding:12px; cursor:pointer; min-width:0; transition:border-color .15s, transform .15s; }
.period-asset-card:hover { border-color:var(--ac); transform:translateY(-1px); }
.period-asset-head { display:flex; align-items:center; gap:8px; margin-bottom:7px; min-width:0; }
.period-asset-icon { width:28px; height:28px; flex:0 0 28px; border-radius:var(--radius-sm); background:var(--s2); display:flex; align-items:center; justify-content:center; font-size:14px; }
.period-asset-meta { min-width:0; }
.period-asset-symbol { font-size:12px; font-weight:700; }
.period-asset-name { font-size:9px; color:var(--t2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.period-asset-pct { font-size:15px; font-weight:700; margin-bottom:2px; font-family:var(--font-mono); }
.period-asset-pnl { font-size:11px; font-weight:600; font-family:var(--font-mono); }
.period-asset-from { font-size:8.5px; color:var(--t3); margin-top:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.period-summary { background:var(--s1); border:1px solid var(--b2); border-radius:var(--radius-sm); padding:13px; }
/* Desktop: summary and asset-detail sit side by side — summary in the first column
   (the right side in RTL), detail beside it filling the rest. Mobile keeps the
   stacked full-width layout. */
@media (min-width:1024px){
  .period-result-grid { display:grid !important; grid-template-columns:minmax(430px, 38%) 1fr; gap:14px; align-items:start; }
  .period-summary { position:sticky; top:10px; }
  .period-side { min-width:0; }
}
.period-summary-head { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
.period-summary-title { font-size:11px; color:var(--t2); font-weight:700; }
.period-summary-range { font-size:9.5px; color:var(--t3); font-family:var(--font-mono); }
.period-summary-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:9px; }
/* Collapsible period panel */
.period-panel-toggle { cursor:pointer; user-select:none; align-items:center; }
.period-panel-caret { margin-inline-start:auto; color:var(--t3); transition:transform .2s; font-size:16px; }
.period-panel.collapsed .period-panel-caret { transform:rotate(-90deg); }
.period-panel-body { overflow:hidden; transition:max-height .28s ease, opacity .2s ease, margin .2s; max-height:1600px; opacity:1; }
.period-panel.collapsed .period-panel-body { max-height:0; opacity:0; margin:0; pointer-events:none; }
/* Mobile: period summary cards stack cleanly instead of cramming */
@media (max-width: 640px) {
  /* KPI stat cards: smaller labels/values so nothing gets clipped on narrow screens */
  .stat { padding: 13px; }
  .s-lbl { font-size: 10.5px; letter-spacing: .2px; }
  .s-val { font-size: clamp(14px, 6.5vw, 20px); }
  .s-sub { font-size: 11px; }
  .period-summary-grid { grid-template-columns:1fr 1fr; gap:7px; }
  .psc.is-primary { grid-column:1 / -1; }
  .psc { padding:10px 10px 9px; }
  .psc-head { gap:5px; }
  .psc-ico { width:20px; height:20px; flex:0 0 20px; font-size:12px; }
  .psc-val { font-size:15px; }
  .psc.is-primary .psc-val { font-size:19px; }
  .psc-lbl { font-size:10px; }
  .psc-pill { font-size:9px; padding:2px 5px; }
  .period-result-grid { grid-template-columns:1fr !important; }
}
/* Extra-narrow screens: shrink type further before any truncation, never stack letters */
@media (max-width:390px){
  .psc-lbl { font-size:9px; letter-spacing:0; }
  .psc-pill { font-size:8px; padding:1.5px 4px; }
  .psc-val { font-size:13.5px; }
  .psc.is-primary .psc-val { font-size:17px; }
}
/* ── Redesigned period summary cards ── */
.psc { position:relative; background:linear-gradient(150deg, color-mix(in srgb, var(--psc-c) 6%, var(--s2)), var(--s2)); border:1px solid var(--b1); border-radius:12px; padding:12px 13px 11px; min-width:0; overflow:hidden; transition:transform .15s, border-color .15s; }
.psc::before { content:''; position:absolute; inset-inline-start:0; top:10px; bottom:10px; width:3px; border-radius:3px; background:var(--psc-c); opacity:.85; }
.psc:hover { transform:translateY(-2px); border-color:color-mix(in srgb, var(--psc-c) 45%, var(--b1)); }
.psc-head { display:flex; align-items:center; gap:7px; margin-bottom:8px; }
.psc-ico { display:flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:7px; background:color-mix(in srgb, var(--psc-c) 14%, transparent); color:var(--psc-c); font-size:14px; flex:0 0 24px; }
.psc-lbl { font-size:11px; font-weight:700; color:var(--t2); letter-spacing:.02em; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:1 1 auto; }
.psc-pill { margin-inline-start:auto; font-family:var(--font-mono); font-size:9.5px; font-weight:800; padding:2.5px 7px; border-radius:999px; white-space:nowrap; }
.psc-pill.up { color:var(--gr); background:color-mix(in srgb, var(--gr) 12%, transparent); }
.psc-pill.dn { color:var(--rd); background:color-mix(in srgb, var(--rd) 12%, transparent); }
.psc-val { font-family:var(--font-mono); font-size:17px; font-weight:800; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.psc.is-primary { grid-column:1 / -1; background:linear-gradient(135deg, color-mix(in srgb, var(--psc-c) 12%, var(--s1)), var(--s1)); border-color:color-mix(in srgb, var(--psc-c) 35%, var(--b1)); box-shadow:0 8px 26px rgba(0,0,0,.22); }
.psc.is-primary .psc-val { font-size:23px; }
.psc.is-primary .psc-lbl { font-size:12.5px; color:var(--t1); }
.psc.is-primary .psc-pill { font-size:11px; padding:3px 9px; }
body.light .psc { box-shadow:0 2px 8px rgba(11,30,63,.05); }
body.light .psc.is-primary { box-shadow:0 8px 24px rgba(11,30,63,.10); }
.period-summary-cell { background:var(--s2); border:1px solid var(--b1); border-radius:var(--radius-sm); padding:10px; min-width:0; }
.period-summary-cell.is-primary { border:1px solid var(--b1); background:var(--s1); box-shadow:0 4px 16px rgba(0,0,0,0.18), 0 1px 3px rgba(0,0,0,0.12); }
.period-summary-cell.is-primary .period-summary-label { color:var(--t2); font-weight:700; }
body.light .period-summary-cell.is-primary { background:#fff; border:1px solid color-mix(in srgb, var(--b1) 60%, transparent); box-shadow:0 6px 20px rgba(11,30,63,0.10), 0 2px 6px rgba(11,30,63,0.06); }
.period-summary-label { font-size:9px; color:var(--t3); text-transform:uppercase; letter-spacing:.6px; margin-bottom:5px; }
.period-summary-value { font-family:var(--font-mono); font-size:15px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.period-summary-pct { font-family:var(--font-mono); font-size:10px; margin-top:3px; }
.period-summary-note { margin-top:9px; padding-top:8px; border-top:1px solid var(--b1); color:var(--t3); font-size:9px; line-height:1.5; }
@media (max-width:640px) {
  .period-presets { flex-wrap:wrap; gap:6px; }
  .period-presets .pb2 { flex:1 1 auto; min-width:0; text-align:center; padding:8px 10px; font-size:12px; }
  .period-cards-wrap { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .period-summary-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
  .period-summary-cell { padding:9px 7px; }
  .period-summary-value { font-size:13px; letter-spacing:-0.4px; }
  .period-summary-pct { font-size:9px; }
  .period-summary-label { font-size:8.5px; }
  .period-date-row { align-items:stretch; }
  .period-date-row input { flex:1; min-width:120px; }
}

/* ── HAMBURGER MENU (mobile) ── */
#burgerBtn { display: none; }
@media (max-width: 640px) {
  #burgerBtn { display: flex; }
  #ts { display: none; }   /* clock removed on mobile per user request */
  .tb-extras {
    position: absolute;
    top: calc(100% + 6px);
    inset-inline-end: 12px;
    background: var(--s1);
    border: 1px solid var(--b2);
    border-radius: var(--radius);
    padding: 10px;
    box-shadow: 0 14px 40px rgba(0,0,0,.5);
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    z-index: 160;
    min-width: 200px;
  }
  .tb-extras.open { display: flex; animation: burgerIn .22s cubic-bezier(.55,.2,.2,1); }
  @keyframes burgerIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
  .tb-extras .live { width: 100%; justify-content: center; }
  .tb-extras > div, .tb-extras > button { width: 100%; }
  .tb-extras .ibtn { width: 100% !important; height: 38px; justify-content: flex-start; padding: 0 12px !important; gap: 10px; }
}
@media (min-width: 641px) {
  .tb-extras { display: contents; }   /* on desktop, render children inline as if no wrapper */
}

/* ── FX CONVERTER FLOATING CARD ── */
.fx-conv { position: fixed; top: 140px; left: 24px; z-index: 180; width: 280px; background: var(--s1); border: 1px solid var(--b2); border-radius: var(--radius); box-shadow: 0 14px 40px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.3); padding: 16px; display: none; flex-direction: column; gap: 10px; transform-origin: top left; }
.fx-conv.open { display: flex; animation: fxConvIn .25s cubic-bezier(.55,.2,.2,1); }
@keyframes fxConvIn { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.fx-conv-head { display: flex; align-items: center; justify-content: space-between; cursor: grab; user-select: none; padding-bottom: 6px; border-bottom: 1px solid var(--b1); }
.fx-conv-head.dragging { cursor: grabbing; }
.fx-conv-title { display: flex; align-items: center; gap: 8px; font-family: 'Instrument Serif', 'Assistant', serif; font-size: 15px; color: var(--t1); }
.fx-conv-title i { color: var(--ac); font-size: 14px; }
.fx-conv-close { background: none; border: none; color: var(--t3); cursor: pointer; padding: 4px; font-size: 16px; }
.fx-conv-close:hover { color: var(--t1); }
.fx-conv-row { display: flex; gap: 6px; }
.fx-conv-row input { flex: 1; min-width: 0; background: var(--s2); border: 1px solid var(--b1); border-radius: var(--radius-sm); padding: 10px 12px; color: var(--t1); font-family: var(--font-mono); font-size: 17px; font-weight: 700; text-align: start; outline: none; transition: border-color .12s; }
.fx-conv-row input:focus { border-color: var(--ac); }
.fx-conv-row select { background: var(--s2); border: 1px solid var(--b1); border-radius: var(--radius-sm); padding: 0 10px; color: var(--t1); font-family: var(--font-mono); font-size: 12px; font-weight: 600; cursor: pointer; outline: none; min-width: 88px; }
.fx-conv-arrow { text-align: center; color: var(--t3); font-size: 14px; margin: -3px 0; }
.fx-conv-rate { font-family: var(--font-mono); font-size: 10.5px; color: var(--t3); text-align: center; padding-top: 4px; border-top: 1px solid var(--b1); letter-spacing: .3px; }
@media (max-width: 640px) {
  .fx-conv { top: auto; bottom: calc(var(--nav) + var(--safe) + 90px); left: 50%; transform: translateX(-50%); width: calc(100vw - 32px); max-width: 320px; }
  .fx-conv.open { animation: fxConvInM .22s ease-out; }
  @keyframes fxConvInM { from { opacity: 0; transform: translateX(-50%) translateY(10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
}

.crypto-only-hint { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: 8px; padding: 2px 8px; border-radius: 100px; background: color-mix(in srgb, var(--ac) 15%, transparent); border: 1px solid color-mix(in srgb, var(--ac) 35%, transparent); color: var(--ac); font-family: var(--font-body); font-size: 10px; font-weight: 600; letter-spacing: .3px; vertical-align: middle; }
.crypto-only-hint i { font-size: 9px; }

.mch-date { font-family: var(--font-body); font-size: 11px; color: var(--t3); margin-top: 4px; letter-spacing: .2px; }
.mch-date .mch-time { color: var(--gd); font-family: var(--font-mono); font-weight: 600; }

.live-badge { display: none; align-items: center; gap: 5px; margin-inline-start: 10px; padding: 2px 7px; border-radius: 100px; background: color-mix(in srgb, var(--gr) 14%, transparent); border: 1px solid color-mix(in srgb, var(--gr) 32%, transparent); color: var(--gr); font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: .5px; vertical-align: middle; }
.live-badge.on { display: inline-flex; }
.lb-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gr); animation: lbPulse 1.8s ease-in-out infinite; }
@keyframes lbPulse { 0%, 100% { opacity: .4; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.15); } }

.fundamentals-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 16px; padding: 16px; background: var(--s2); border: 1px solid var(--b2); border-radius: var(--radius-sm); }
.fund-cell { display: flex; flex-direction: column; gap: 4px; padding: 8px; }
.fund-l { font-size: 10px; color: var(--t3); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.fund-v { font-family: var(--font-mono); font-size: 14px; color: var(--t1); font-weight: 700; }
@media (max-width: 640px) { .fundamentals-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 10px; } .fund-v { font-size: 12px; } }

.lots-history { margin-top: 14px; }
.lots-history-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.lots-history-title h3 { font-family: 'Instrument Serif', 'Assistant', serif; font-style: italic; font-size: 18px; font-weight: 400; color: var(--t1); }
.lots-history-title .avg-pill { font-family: var(--font-mono); font-size: 11px; color: var(--gd); font-weight: 600; padding: 4px 10px; background: color-mix(in srgb, var(--gd) 12%, transparent); border: 1px solid color-mix(in srgb, var(--gd) 25%, transparent); border-radius: 100px; }
.lot-card { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 12px; padding: 12px 14px; background: var(--s3); border: 1px solid var(--b1); border-radius: var(--radius-sm); margin-bottom: 8px; }
.lot-card-cell { display: flex; flex-direction: column; gap: 2px; }
.lot-card-cell .lc-l { font-size: 10px; color: var(--t3); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.lot-card-cell .lc-v { font-family: var(--font-mono); font-size: 13px; color: var(--t1); font-weight: 700; }
.lot-card-cell .lc-v.up { color: var(--gr); }
.lot-card-cell .lc-v.dn { color: var(--rd); }
@media (max-width: 640px) { .lot-card { grid-template-columns: 1fr 1fr; gap: 8px; } }


/* ── Glass — diagonal linear-gradient (matches Figma: FFFFFF 80% → 20%) ──
   Applied ONLY to top-level cards/tiles. Inner rows stay transparent. */
.stat, .mkpi, .manc, .fundamentals-grid, .news-item,
.fx-conv, .modal, .lots-panel, .lot-card,
.filter-block, .ins-card {
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.10) 0%,
    rgba(255, 255, 255, 0.025) 100%) !important;
  backdrop-filter: blur(22px) saturate(125%);
  -webkit-backdrop-filter: blur(22px) saturate(125%);
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow:
    0 24px 48px -8px rgba(0, 0, 0, 0.45),     /* main deep shadow — gives the lift */
    0 12px 24px -6px rgba(0, 0, 0, 0.28),     /* mid-distance haze */
    0 4px 8px rgba(0, 0, 0, 0.15),            /* close contact shadow */
    inset 0 1px 0 rgba(255, 255, 255, 0.06);  /* inner top highlight (glass sheen) */
}
.fund-cell {
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.02) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 8px;
}
/* Light theme: still genuinely transparent — uses backdrop-filter blur for a true frosted-glass look */
body.light .stat, body.light .mkpi, body.light .manc, body.light .fundamentals-grid,
body.light .news-item, body.light .fx-conv, body.light .modal,
body.light .lots-panel, body.light .lot-card,
body.light .filter-block, body.light .ins-card {
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0.04) 100%) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow:
    0 24px 48px -8px rgba(0, 0, 0, 0.14),
    0 12px 24px -6px rgba(0, 0, 0, 0.08),
    0 4px 8px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
/* Modal KPI tiles specifically: near-opaque WHITE (not translucent glass), so the
   mustard/red amounts have a solid bright surface to read against. */
body.light .mkpi {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(11, 30, 63, 0.10) !important;
}
body.light .fund-cell {
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(255, 255, 255, 0.03) 100%) !important;
  backdrop-filter: blur(18px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
}

.lots-panel { margin-top: 6px; padding: 10px; background: var(--s3); border: 1px solid var(--b1); border-radius: var(--radius-sm); }
.lots-panel-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-family: var(--font-body); font-size: 11px; color: var(--t2); text-transform: uppercase; letter-spacing: .5px; }
.lots-panel-avg { font-family: var(--font-mono); font-size: 11px; color: var(--gd); font-weight: 600; }
.lots-close { width: 24px; height: 24px; flex-shrink: 0; background: transparent; border: 1px solid var(--b1); border-radius: 6px; color: var(--t2); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .12s, color .12s; padding: 0; margin-inline-end: 8px; }
.lots-close:hover { background: var(--b1); color: var(--t1); }
.lots-close i { font-size: 14px; }
body.light .lots-close { background: rgba(255,255,255,0.7) !important; border-color: rgba(10,15,31,0.15) !important; }
.lot-row { display: grid; grid-template-columns: 1fr 1fr 1fr auto auto; gap: 6px; align-items: center; margin-bottom: 6px; }
.lot-row-head { margin-bottom: 4px; }
.lot-row-head span { font-size: 9.5px; font-weight: 700; color: var(--t3); text-transform: uppercase; letter-spacing: .4px; padding-inline-start: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lot-row input { background: var(--s1); border: 1px solid var(--b1); border-radius: 4px; padding: 6px 8px; font-family: var(--font-mono); font-size: 11px; color: var(--t1); width: 100%; }
.lot-row input:focus { border-color: var(--ac); outline: none; }
.lot-row input.lot-autofilled { border-color: color-mix(in srgb, var(--ac) 50%, var(--b1)); background: color-mix(in srgb, var(--ac) 6%, var(--s1)); }
.ff input.lot-autofilled { border-color: color-mix(in srgb, var(--ac) 50%, var(--b1)) !important; background: color-mix(in srgb, var(--ac) 7%, transparent) !important; }
.lot-row .lot-ok { width: 26px; height: 26px; background: transparent; border: 1px solid color-mix(in srgb, var(--gr) 45%, var(--b1)); border-radius: 4px; color: var(--gr); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .12s, transform .12s; }
.lot-row .lot-ok:hover { background: color-mix(in srgb, var(--gr) 14%, transparent); }
.lot-row .lot-ok-done { background: var(--gr); color: #fff; transform: scale(1.08); }
.lot-row .lot-del { width: 26px; height: 26px; background: transparent; border: 1px solid var(--b1); border-radius: 4px; color: var(--t3); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.lot-row .lot-del:hover { color: var(--rd); border-color: var(--rd); }
.lot-add { width: 100%; background: transparent; border: 1px dashed var(--b2); border-radius: 4px; padding: 6px; color: var(--ac); font-family: var(--font-body); font-size: 11px; cursor: pointer; margin-top: 2px; }
.lot-add:hover { background: color-mix(in srgb, var(--ac) 8%, transparent); }
.lots-toggle { background: transparent; border: 1px solid var(--b1); border-radius: 4px; padding: 4px 8px; color: var(--t2); font-family: var(--font-body); font-size: 10px; cursor: pointer; }
.lots-toggle:hover { color: var(--t1); border-color: var(--ac); }

/* ── CURRENCY / LANGUAGE PICKER DROPDOWNS ── */
.picker-pop { position: absolute; top: calc(100% + 6px); background: var(--s2); border: 1px solid var(--b2); border-radius: var(--radius-sm); min-width: 220px; max-height: 360px; overflow-y: auto; box-shadow: 0 18px 50px rgba(0,0,0,.45), 0 3px 10px rgba(0,0,0,.25); z-index: 9999; padding: 8px; opacity: 0; transform: translateY(-6px); pointer-events: none; transition: all .18s cubic-bezier(.55,.2,.2,1); }
html[dir="rtl"] .picker-pop { right: 0; }
html[dir="ltr"] .picker-pop, html:not([dir="rtl"]) .picker-pop { left: 0; }
.picker-pop.open { opacity: 1; transform: translateY(0); pointer-events: all; }
.picker-search { width: 100%; background: var(--s3); border: 1px solid var(--b1); border-radius: 4px; padding: 8px 10px; color: var(--t1); font-family: var(--font-body); font-size: 12px; margin-bottom: 6px; outline: none; }
.picker-search:focus { border-color: var(--ac); }
.picker-opt { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 4px; cursor: pointer; font-family: var(--font-body); font-size: 12px; color: var(--t2); transition: all .12s; }
.picker-opt:hover { background: var(--s3); color: var(--t1); }
.picker-opt.sel { background: color-mix(in srgb, var(--ac) 12%, transparent); color: var(--t1); }
.picker-opt .po-flag { font-size: 16px; line-height: 1; }
.picker-opt .po-sym { font-family: var(--font-mono); font-weight: 700; color: var(--gd); font-size: 15px; min-width: 24px; text-align: center; line-height: 1; }
.picker-opt .po-code { font-family: var(--font-mono); font-weight: 700; color: var(--gd); min-width: 40px; font-size: 11px; }
.picker-opt .po-name { flex: 1; }
.picker-opt .po-check { color: var(--ac); opacity: 0; font-size: 12px; }
.picker-opt.sel .po-check { opacity: 1; }
.picker-empty { padding: 14px; color: var(--t3); font-size: 11px; text-align: center; }
.picker-host { position: relative; }

/* ── PRICE TICK FLASH (from brand book p.13) ── */
@keyframes tickFlashUp {
  0%   { background: transparent; }
  20%  { background: color-mix(in oklab, var(--gr) 28%, transparent); }
  100% { background: transparent; }
}
@keyframes tickFlashDown {
  0%   { background: transparent; }
  20%  { background: color-mix(in oklab, var(--rd) 28%, transparent); }
  100% { background: transparent; }
}
#grandNumWrap.flash-up   { animation: tickFlashUp   700ms ease-out; border-radius: 8px; padding: 2px 8px; margin: -2px -8px; }
#grandNumWrap.flash-down { animation: tickFlashDown 700ms ease-out; border-radius: 8px; padding: 2px 8px; margin: -2px -8px; }

/* ── MOBILE COMPACT CARD (single-row watchlist style) ── */
@media (max-width: 640px) {
  .grid { grid-template-columns: 1fr; gap: 8px; }
  .card { padding: 12px 14px; display: grid; grid-template-columns: 40px minmax(0,1fr) 108px minmax(0,1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px; align-items: center;
          direction: ltr; }   /* force LTR so layout is identical in Hebrew and English */
  /* hide bits that don't fit a row layout */
  .card .cg { display: none; }
  .card .cedit { display: none; }
  .card .tag { display: none; }
  .card .pl { display: none; }
  .card .vq { display: none; }
  .card .pn { display: none; }
  .card .cf { display: none; }
  /* col 1: icon (always leftmost) */
  .card .ct { display: contents; }
  .card .cid { grid-column: 1 / span 2; grid-row: 1 / span 2; display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 10px; min-width: 0; direction: ltr; }
  .card .ico { width: 40px; height: 40px; font-size: 18px; grid-row: 1 / span 2; grid-column: 1; }
  .card .cid > div:last-child { flex-direction: column !important; align-items: flex-start !important; gap: 0 !important; min-width: 0; text-align: left; }
  .card .tic { font-size: 16px; line-height: 1.1; }
  .card .nam { font-size: 11px; line-height: 1.2; max-width: 100%; text-align: left; }
  /* col 3: spark in the middle */
  .card .spk { grid-column: 3; grid-row: 1 / span 2; height: 44px; width: 100%; max-width: 108px; margin: 0; padding: 0 6px; box-sizing: border-box; align-self: center; justify-self: center; display: flex; align-items: center; justify-content: center; overflow: hidden; }
  .card .spk svg { width: 100% !important; height: 100% !important; display: block; }
  /* col 4: value (top right) + % change (bottom right) */
  .card .cb { display: contents; }
  .card .cb > div:last-child { grid-column: 4; grid-row: 1; text-align: right; }
  .card .vv { font-size: 15px; font-weight: 700; text-align: right; }
  .card .pb { grid-column: 4; grid-row: 2; align-items: flex-end; text-align: right; }
  .card .pp { font-size: 11px; text-align: right; }
  /* mobile: keep cumulative P&L visible, override the generic .pn hide */
  .card .pn.pn-total { display: block !important; font-size: 10px; line-height: 1.2; margin-top: 1px !important; border-top: none !important; padding-top: 0 !important; opacity: 0.85; text-align: right; }
  /* mobile: also show the DAILY P&L value (₪), sitting between the % and the cumulative P&L */
  .card .pn:not(.pn-total) { display: block !important; font-size: 11px; font-weight: 700; line-height: 1.2; margin-top: 1px !important; text-align: right; }
  .card .pl.pl-total { display: none; }   /* keep label hidden — sign + color speak for themselves */
}

/* ── PAGES ── */
.page { display: none; padding: 18px 18px 10px; }
.page.active { display: block; animation: fi .26s cubic-bezier(.55,.2,.2,1); }
@keyframes fi { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── HERO TOTAL CARD ── */
.total { background: var(--s1); border: 1px solid var(--b2); border-radius: var(--radius); padding: 28px; margin-bottom: 14px; position: relative; overflow: hidden; }
/* Focus signature: 4px voltage line on the leading edge */
.total::before { content:''; position:absolute; top:0; right:0; left:0; height:3px; background: var(--ac); opacity: .85; }
body.light .total::before { display:none; }
.t-lbl { font-size: 15px; color: var(--t2); font-weight: 400; text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 12px; font-family: 'Instrument Serif', 'Assistant', serif; }
.t-val { font-family: var(--font-mono); font-size: 52px; font-weight: 700; letter-spacing: -2px; line-height: 1; margin-bottom: 20px; color: var(--t1); }
.t-val .sym { font-size: 24px; color: var(--t3); font-weight: 400; margin-left: 6px; }
.t-meta { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; flex-direction: column; }
.badge { padding: 5px 12px; border-radius: var(--radius-sm); font-size: 15px; font-weight: 700; font-family: var(--font-mono); }
.badge.up { background: color-mix(in srgb, var(--gr) 14%, transparent); color: var(--gr); border: 1px solid color-mix(in srgb, var(--gr) 22%, transparent); }
.badge.dn { background: color-mix(in srgb, var(--rd) 14%, transparent); color: var(--rd); border: 1px solid color-mix(in srgb, var(--rd) 22%, transparent); }
.t-sub { font-size: 16px; color: var(--t2); font-family: 'Geist', 'Assistant', 'Rubik', sans-serif; font-weight: 300; }
.t-pnl { font-size: 26px; font-weight: 700; font-family: var(--font-mono); }


/* ── PRE-MARKET / AFTER-HOURS — informational layer, never mixed into official P&L ── */
.ext-session {
  display: none;
  margin-top: 17px;
  padding: 14px 15px;
  border: 1px solid color-mix(in srgb, var(--gd) 28%, var(--b1));
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--gd) 8%, var(--s2)),
    color-mix(in srgb, var(--ac) 5%, var(--s2)));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--t1) 5%, transparent);
}
.ext-session.show { display: block; animation: extSlideIn .24s ease; }
@keyframes extSlideIn { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } }
.ext-session-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ext-session-title-wrap { display:flex; align-items:center; gap:8px; min-width:0; }
.ext-session-badge {
  flex:0 0 auto; padding:3px 8px; border-radius:999px;
  font-family:var(--font-mono); font-size:9px; font-weight:800; letter-spacing:.08em;
  color:var(--gd); background:color-mix(in srgb,var(--gd) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--gd) 32%,transparent);
}
.ext-session-badge.post { color:var(--ac); background:color-mix(in srgb,var(--ac) 12%,transparent); border-color:color-mix(in srgb,var(--ac) 32%,transparent); }
.ext-session-title { font-size:12px; font-weight:700; color:var(--t1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ext-session-toggle { display:inline-flex; align-items:center; gap:5px; border:0; background:transparent; color:var(--t2); font-family:var(--font-body); font-size:10.5px; cursor:pointer; padding:4px; }
.ext-session-toggle i { transition:transform .18s ease; }
.ext-session.details-open .ext-session-toggle i { transform:rotate(180deg); }
.ext-session-numbers { display:flex; align-items:baseline; gap:9px; margin-top:9px; direction:ltr; justify-content:flex-end; }
.ext-session-pnl { font-family:var(--font-mono); font-size:21px; font-weight:800; direction:ltr; }
.ext-session-pct { font-family:var(--font-mono); font-size:12px; font-weight:700; padding:3px 8px; border-radius:999px; }
.ext-session-pct.up { color:var(--gr); background:color-mix(in srgb,var(--gr) 12%,transparent); }
.ext-session-pct.dn { color:var(--rd); background:color-mix(in srgb,var(--rd) 12%,transparent); }
.ext-session-meta { margin-top:6px; display:flex; flex-wrap:wrap; align-items:center; gap:5px 9px; color:var(--t3); font-size:9.5px; line-height:1.45; }
.ext-session-meta b { color:var(--t2); font-weight:600; }
.ext-session-note { color:var(--gd); }
.ext-session-details { display:none; margin-top:11px; border-top:1px solid var(--b1); padding-top:8px; gap:3px; }
.ext-session.details-open .ext-session-details { display:grid; }
.ext-detail-row { display:grid; grid-template-columns:minmax(54px,.65fr) minmax(80px,1fr) minmax(72px,.8fr); align-items:center; gap:8px; padding:7px 6px; border-radius:8px; font-size:10px; }
.ext-detail-row:hover { background:color-mix(in srgb,var(--t1) 3%,transparent); }
.ext-detail-symbol { font-family:var(--font-mono); font-weight:800; color:var(--t1); direction:ltr; text-align:left; }
.ext-detail-price { color:var(--t2); direction:ltr; text-align:center; font-family:var(--font-mono); }
.ext-detail-impact { font-family:var(--font-mono); font-weight:700; direction:ltr; text-align:right; }
.card-stale-chip {
  display:inline-flex; align-items:center; gap:4px;
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--t3); background: color-mix(in srgb, var(--t3) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--t3) 28%, transparent);
  border-radius: 6px; padding: 2px 7px; margin-bottom: 4px;
}
.card.card-stale { opacity: 0.92; }
.card-ext-chip { align-self:flex-end; display:inline-flex; align-items:center; gap:4px; margin-bottom:3px; padding:2px 6px; border-radius:999px; font-family:var(--font-mono); font-size:8.5px; font-weight:800; line-height:1.2; background:color-mix(in srgb,var(--gd) 11%,transparent); border:1px solid color-mix(in srgb,var(--gd) 28%,transparent); color:var(--gd); direction:ltr; }
.card-ext-chip.post { color:var(--ac); background:color-mix(in srgb,var(--ac) 10%,transparent); border-color:color-mix(in srgb,var(--ac) 28%,transparent); }
.card-ext-chip.up .card-ext-change { color:var(--gr); }
.card-ext-chip.dn .card-ext-change { color:var(--rd); }
@media (max-width:640px) {
  .ext-session { margin-top:14px; padding:12px; }
  .ext-session-title { font-size:11px; }
  .ext-session-pnl { font-size:18px; }
  .ext-session-meta { font-size:9px; }
  .ext-detail-row { grid-template-columns:52px 1fr 80px; padding-inline:2px; }
  .card-ext-chip { font-size:8px; margin-bottom:1px; }
}

/* ── STAT GRID ── */
.stat-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; width: 100%; }
/* Mobile: balanced two rows, never a lone tile in a row.
   4→2+2, 5→3+2, 6→3+3, 7→4+3, 8→4+4 (columns = ceil(n/2)). */
.stat-g[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat-g[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat-g[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat-g[data-count="5"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat-g[data-count="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat-g[data-count="7"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat-g[data-count="8"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat-g[data-count="9"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.stat-g[data-count="10"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.stat { background: var(--s1); border: 1px solid var(--b1); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; overflow: hidden; }
.stat-click { cursor:pointer; transition:transform .15s, border-color .15s, box-shadow .15s; }
.stat-click:hover { transform:translateY(-2px); border-color:var(--ac); box-shadow:0 6px 18px rgba(0,0,0,.22); }
.stat-click:active { transform:translateY(0); }
/* Desktop: hero card with KPI on one side and 4 sub-stats in a 2x2 grid on the other */
@media (min-width: 640px) {
  .hero-block { background: var(--s1); border: 1px solid var(--b2); border-radius: var(--radius); padding: 24px 28px; margin-bottom: 14px;
                display: grid; grid-template-columns: 2fr 3fr; gap: 28px; align-items: center; }
  .hero-block .total { background: transparent; border: none; padding: 0; margin: 0; border-radius: 0; text-align: start; }
  .hero-block .total::before { display: none; }
  .hero-block .stat-g { grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 12px; margin: 0; }
  /* Column count adapts to the number of visible tiles so the grid always forms two
     balanced rows on desktop: 4→2+2, 5→3+2, 6→3+3, 7→4+3, 8→4+4. */
  .hero-block .stat-g[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
  .hero-block .stat-g[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
  .hero-block .stat-g[data-count="4"] { grid-template-columns: repeat(2, 1fr); }
  .hero-block .stat-g[data-count="5"] { grid-template-columns: repeat(3, 1fr); }
  .hero-block .stat-g[data-count="6"] { grid-template-columns: repeat(3, 1fr); }
  .hero-block .stat-g[data-count="7"] { grid-template-columns: repeat(4, 1fr); }
  .hero-block .stat-g[data-count="8"] { grid-template-columns: repeat(4, 1fr); }
  .hero-block .stat-g[data-count="9"] { grid-template-columns: repeat(5, 1fr); }
  .hero-block .stat-g[data-count="10"] { grid-template-columns: repeat(5, 1fr); }
  .hero-block .stat { background: var(--s2); border: 1px solid var(--b1); border-radius: var(--radius-sm); padding: 14px 16px; }
}
.s-lbl { font-size: 12px; color: var(--t3); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; line-height: 1.25; display: flex; align-items: center; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.s-lbl i { flex: 0 0 auto; }
.s-lbl > * { min-width: 0; }
.s-val { font-family: var(--font-mono); font-size: clamp(15px, 5.2vw, 23px); font-weight: 700; white-space: nowrap; overflow: visible; min-width: 0; }
.s-sub { font-family: 'Geist', 'Assistant', 'Rubik', sans-serif; font-size: 13px; font-weight: 300; color: var(--t2); margin-top: 4px; }
.bar { height: 3px; background: var(--s3); margin-top: 10px; border-radius: 2px; overflow: hidden; }
.bar-f { height: 100%; transition: width 0.8s cubic-bezier(.55,.2,.2,1); }

/* ── SECTION HEADERS ── */
.sec { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; margin-top: 8px; border-bottom: 1px solid var(--b1); padding-bottom: 7px; }
.sec-t { display: flex; align-items: center; gap: 9px; font-family: 'Instrument Serif', 'Assistant', serif; font-size: 20px; font-weight: 400; letter-spacing: -0.2px; }
.sec-t i { width: 3px; height: 15px; background: var(--ac); display: inline-block; border-radius: 1px; }

/* ═══════════════ MAP (heatmap treemap) ═══════════════ */
.map-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:12px; }
.map-scope { display:inline-flex; background:var(--s2); border:1px solid var(--b2); border-radius:10px; padding:3px; }
.map-scope button { font-family:var(--font-body); font-weight:700; font-size:13px; color:var(--t2); background:transparent; border:0; border-radius:7px; padding:7px 15px; cursor:pointer; transition:all .15s; }
.map-scope button.on { background:var(--ac); color:#fff; }
.map-status { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-body); font-weight:600; font-size:11px; color:var(--t2); border:1px solid var(--b2); border-radius:99px; padding:4px 11px; }
.map-dot { width:7px; height:7px; border-radius:99px; background:var(--t3); flex:none; }
.map-dot.live { background:var(--gr); box-shadow:0 0 0 0 color-mix(in srgb,var(--gr) 60%,transparent); animation:mapPulse 2s infinite; }
.map-dot.cache { background:var(--gd); }
.map-dot.err { background:var(--rd); }
@keyframes mapPulse { 0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--gr) 50%,transparent)} 70%{box-shadow:0 0 0 7px transparent} 100%{box-shadow:0 0 0 0 transparent} }
.map-refresh { margin-inline-start:auto; display:inline-flex; align-items:center; gap:6px; font-family:var(--font-body); font-size:12px; font-weight:700; color:var(--t2); background:var(--s2); border:1px solid var(--b2); border-radius:9px; padding:7px 12px; cursor:pointer; transition:all .15s; }
.map-refresh:hover { border-color:var(--ac); color:var(--t1); }
.map-intervals { display:flex; gap:5px; flex-wrap:wrap; background:var(--s2); border:1px solid var(--b2); border-radius:11px; padding:5px; margin-bottom:12px; }
.map-intervals button { font-family:var(--font-body); font-weight:700; font-size:12.5px; color:var(--t2); background:transparent; border:0; border-radius:8px; padding:7px 13px; cursor:pointer; transition:all .14s; line-height:1.1; text-align:center; }
.map-intervals button:hover { color:var(--t1); }
.map-intervals button.on { background:var(--s3); color:var(--t1); }
.map-intervals .mi-h { display:block; font-size:9.5px; font-weight:600; color:var(--t3); margin-top:1px; }
.map-intervals button.on .mi-h { color:var(--ac); }
.map-frame { background:var(--s1,var(--s2)); border:1px solid var(--b2); border-radius:var(--radius,14px); padding:5px; position:relative; overflow:hidden; }
#mapCanvas { width:100%; height:min(66vh,640px); position:relative; }
.map-cell { position:absolute; overflow:hidden; border:1px solid rgba(0,0,0,.32); display:flex; flex-direction:column; align-items:center; justify-content:center; transition:filter .12s; cursor:default; }
.map-cell:hover { filter:brightness(1.15); z-index:5; }
.map-cell .mc-t { font-family:var(--font-body); font-weight:800; line-height:1; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.45); }
.map-cell .mc-c { font-family:var(--font-body); font-weight:600; color:rgba(255,255,255,.92); text-shadow:0 1px 2px rgba(0,0,0,.45); direction:ltr; }
.map-sec-lbl { position:absolute; top:0; right:0; font-family:var(--font-body); font-weight:800; font-size:10px; letter-spacing:.06em; color:rgba(255,255,255,.6); padding:3px 7px; pointer-events:none; }
.map-loading { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:10px; color:var(--t2); font-size:13px; background:color-mix(in srgb,var(--bg) 55%,transparent); z-index:20; opacity:0; pointer-events:none; transition:.2s; }
.map-loading.on { opacity:1; }
.map-spin { width:16px; height:16px; border:2px solid var(--b2); border-top-color:var(--ac); border-radius:99px; animation:mapSpin .7s linear infinite; }
@keyframes mapSpin { to{transform:rotate(360deg)} }
.map-legend { display:flex; align-items:center; gap:2px; justify-content:center; flex-wrap:wrap; margin-top:14px; }
.map-legend .ml-l { font-size:12px; color:var(--t2); margin:0 8px; }
.map-legend .ml-s { width:32px; height:13px; }
.map-cap { color:var(--t3); font-size:12px; text-align:center; margin-top:11px; line-height:1.6; }
.map-tip { position:fixed; pointer-events:none; background:var(--bg); border:1px solid var(--b2); border-radius:10px; padding:9px 12px; font-size:12.5px; opacity:0; transition:opacity .12s; z-index:9999; direction:ltr; text-align:left; min-width:135px; box-shadow:0 12px 30px -12px rgba(0,0,0,.6); }
.map-tip .mt-t { font-family:var(--font-body); font-weight:800; font-size:14px; color:var(--t1); }
.map-tip .mt-n { color:var(--t3); font-size:11px; margin-bottom:5px; }
.map-tip .mt-r { display:flex; justify-content:space-between; gap:16px; color:var(--t2); }
.map-tip .mt-r b { color:var(--t1); font-weight:700; }
.map-tools-row{display:flex;align-items:center;gap:8px;flex:1;min-width:240px}
.map-search{position:relative;flex:1;max-width:340px;min-width:180px}
.map-search i{position:absolute;inset-inline-start:11px;top:50%;transform:translateY(-50%);color:var(--t3);font-size:15px;pointer-events:none}
.map-search input{width:100%;height:35px;padding:0 36px 0 12px;border:1px solid var(--b2);border-radius:9px;background:var(--s2);color:var(--t1);font-family:var(--font-body);font-size:12.5px;outline:none;transition:border-color .15s,box-shadow .15s}
.map-search input:focus{border-color:var(--ac);box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 16%,transparent)}
.map-search input::placeholder{color:var(--t3)}
.map-clear{position:absolute;inset-inline-end:7px;top:50%;transform:translateY(-50%);width:24px;height:24px;border:0;border-radius:7px;background:transparent;color:var(--t3);cursor:pointer;display:none;align-items:center;justify-content:center}
.map-clear.show{display:flex}.map-clear:hover{background:var(--s3);color:var(--t1)}
.map-summary{display:flex;align-items:center;gap:10px;margin-inline-start:auto;color:var(--t3);font-family:var(--font-mono);font-size:10.5px;white-space:nowrap}
.map-summary b{color:var(--t1);font-weight:700}
.map-back{display:none;align-items:center;gap:6px;border:1px solid var(--b2);background:var(--s2);color:var(--t2);border-radius:9px;padding:7px 11px;font-family:var(--font-body);font-size:12px;font-weight:700;cursor:pointer}
.map-back.show{display:inline-flex}.map-back:hover{border-color:var(--ac);color:var(--t1)}
.map-cell{will-change:transform,filter;transition:filter .12s,transform .12s,opacity .18s;contain:layout paint style}
.map-cell:hover{transform:scale(1.012);box-shadow:0 4px 18px rgba(0,0,0,.28)}
.map-cell.dim{opacity:.13;filter:saturate(.3)}
.map-cell.hit{outline:2px solid #fff;outline-offset:-2px;z-index:8;filter:brightness(1.18)}
.map-sec-lbl{z-index:7;background:rgba(0,0,0,.22);backdrop-filter:blur(3px);border-radius:0 0 0 6px;cursor:pointer;pointer-events:auto;transition:background .12s,color .12s}
.map-sec-lbl:hover{background:rgba(0,0,0,.5);color:#fff}
.map-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--t3);font-size:13px;gap:8px;padding:20px}
.map-empty i{font-size:28px;color:var(--t2)}
.map-frame:fullscreen{background:var(--bg);padding:10px;border:0;border-radius:0}.map-frame:fullscreen #mapCanvas{height:calc(100vh - 20px)!important}
@media(max-width:640px){.map-toolbar{gap:8px}.map-tools-row{order:3;width:100%;min-width:0}.map-search{max-width:none}.map-summary{display:none}#mapCanvas{height:min(62vh,560px)}.map-intervals{overflow-x:auto;flex-wrap:nowrap}.map-intervals button{flex:0 0 auto}.map-refresh{margin-inline-start:0}.map-scope button{padding:7px 11px;font-size:12px}}


.add-b { font-family: var(--font-body); font-size: 13px; font-weight: 700; color: var(--t1); background: var(--s2); border: 1px solid var(--b2); padding: 5px 11px; border-radius: var(--radius-sm); cursor: pointer; transition: all 0.15s; }
.add-b:hover { background: var(--s3); border-color: var(--ac); }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; margin-bottom: 14px; }
@media(max-width:600px){ .grid { grid-template-columns: 1fr; } }

/* ── ASSET CARDS ── */
/* ── Glass card style — diagonal linear-gradient (matches Figma) ── */
.card {
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.10) 0%,
    rgba(255, 255, 255, 0.025) 100%);
  backdrop-filter: blur(22px) saturate(125%);
  -webkit-backdrop-filter: blur(22px) saturate(125%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  padding: 20px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.2s cubic-bezier(.55,.2,.2,1);
  box-shadow:
    0 24px 48px -8px rgba(0, 0, 0, 0.45),
    0 12px 24px -6px rgba(0, 0, 0, 0.28),
    0 4px 8px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255,255,255,0.06);
}
.card:hover {
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.14) 0%,
    rgba(255, 255, 255, 0.04) 100%);
  border-color: rgba(255, 255, 255, 0.30);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.10),               /* crisp light rim */
    0 18px 50px -12px rgba(150, 180, 255, 0.30),        /* bright cool glow lifting the card */
    0 8px 24px -8px rgba(255, 255, 255, 0.14),          /* soft white halo */
    0 4px 8px rgba(0, 0, 0, 0.22),                      /* keep a little depth */
    inset 0 1px 0 rgba(255,255,255,0.16);               /* brighter top sheen */
  transform: translateY(-2px);
}
body.light .card {
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0.04) 100%);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow:
    0 24px 48px -8px rgba(0, 0, 0, 0.14),
    0 12px 24px -6px rgba(0, 0, 0, 0.08),
    0 4px 8px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255,255,255,0.8);
}
body.light .card:hover {
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.28) 0%,
    rgba(255, 255, 255, 0.08) 100%);
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow:
    0 32px 60px -10px rgba(0, 0, 0, 0.20),
    0 16px 30px -8px rgba(0, 0, 0, 0.12),
    0 6px 12px rgba(0, 0, 0, 0.07),
    inset 0 1px 0 rgba(255,255,255,0.9);
}
.cg { position: absolute; top: 0; left: 0; width: 3px; height: 100%; opacity: 0.8; }
.cedit { position: absolute; top: 12px; right: 12px; width: 24px; height: 24px; border-radius: var(--radius-sm); background: var(--s3); border: 1px solid var(--b2); color: var(--t2); font-size: 10px; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.15s; z-index: 5; }
.card:hover .cedit { opacity: 1; }
.ct { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.cid { display: flex; align-items: center; gap: 12px; }
.ico { width: 40px; height: 40px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 20px; background: var(--s3); border: 1px solid var(--b1); }
.ico i { font-size: 20px; }
.tic { font-family: 'Geist Mono', 'Geist', monospace; font-size: 21px; font-weight: 400; font-style: italic; color: var(--t1); line-height: 1; }
.nam { font-family: 'Geist', 'Assistant', 'Rubik', sans-serif; font-size: 13px; color: var(--t2); font-weight: 500; font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 3px; font-family: var(--font-mono); letter-spacing: 0.5px; }
.tc { background: color-mix(in srgb, var(--ac) 12%, transparent); color: var(--ac); border: 1px solid color-mix(in srgb, var(--ac) 20%, transparent); }
.ts { background: color-mix(in srgb, var(--ac) 12%, transparent); color: var(--ac); border: 1px solid color-mix(in srgb, var(--ac) 20%, transparent); }
.tm { background: color-mix(in srgb, var(--gd) 14%, transparent); color: var(--gd); border: 1px solid color-mix(in srgb, var(--gd) 26%, transparent); }

.spk { height: 56px; margin: 14px 0; opacity: 0.9; width: 100%; }
.cb { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 14px; }
.vv { font-family: var(--font-mono); font-size: 28px; font-weight: 700; color: var(--t1); letter-spacing: -0.5px; }
.vq { font-size: 13px; color: var(--t3); margin-top: 6px; font-family: 'Geist', 'Assistant', 'Rubik', sans-serif; font-weight: 300; }
.pb { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.pp { font-family: var(--font-mono); font-size: 14px; font-weight: 700; }
.pn { font-family: var(--font-mono); font-size: 13px; font-weight: 500; }
.pl { font-size: 10px; color: var(--t3); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; }
.cf { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; border-top: 1px solid var(--b1); }
.pi { font-size: 13px; color: var(--t2); font-family: var(--font-mono); }
.pi span { color: var(--t1); font-weight: 500; }

/* Loading: brand says voltage-tinted shimmer, hold min 400ms, never spinners */
.skel { background: linear-gradient(90deg, var(--s1) 25%, var(--s2) 50%, var(--s1) 75%); background-size: 200% 100%; animation: sk 1.4s infinite linear; border-radius: var(--radius); height: 150px; border: 1px solid var(--b1); }
@keyframes sk { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── TIMEFRAME TABS ── */
.prow { display: flex; gap: 0; margin-bottom: 14px; background: var(--s2); border-radius: 12px; padding: 4px; width: fit-content; }
.pb2 { font-family: var(--font-body); font-size: 12.5px; font-weight: 600; padding: 7px 14px; border-radius: 9px; border: none; background: transparent; color: var(--t3); cursor: pointer; transition: all 0.15s; }
.pb2:hover { color: var(--t1); background: var(--s3); }
.pb2.active { background: var(--s1); color: var(--t1); font-weight: 700; box-shadow: 0 1px 4px rgba(0,0,0,0.3); }
body.light .pb2.active { background: #fff; color: var(--ac); box-shadow: 0 1px 6px rgba(11,30,63,0.12); }

/* ── CHARTS ── */
.crow { display: grid; grid-template-columns: 3fr 2fr; gap: 12px; margin-top: 12px; }
@media(max-width: 640px) { .crow { grid-template-columns: 1fr; } }
.cc { background: var(--s1); border: 1px solid var(--b1); border-radius: var(--radius); padding: 16px; }
.ct2 { font-size: 13px; color: var(--t3); text-transform: uppercase; letter-spacing: 1px; font-weight: 700; margin-bottom: 12px; border-bottom: 1px solid var(--b1); padding-bottom: 5px; }
.ch { height: 180px; position: relative; }

/* ── ROW LISTS ── */
.arow { background: var(--s1); border: 1px solid var(--b1); border-radius: var(--radius); padding: 14px; display: flex; align-items: center; gap: 12px; margin-bottom: 6px; cursor: pointer; transition: all 0.15s; }
.arow:hover { border-color: var(--b2); background: var(--s2); }
.ar-ico { width: 38px; height: 38px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 17px; background: var(--s3); flex-shrink: 0; }
.ar-main { flex: 1; min-width: 0; }
.ar-sym { font-family: 'Geist Mono', 'Geist', monospace; font-style: italic; font-size: 17px; font-weight: 400; }
.ar-name { font-size: 13px; color: var(--t2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-price { font-size: 12px; color: var(--t3); margin-top: 2px; font-family: var(--font-mono); }
.ar-right { text-align: left; flex-shrink: 0; }
.ar-val { font-family: var(--font-mono); font-size: 16px; font-weight: 700; }
.ar-pct { font-family: var(--font-mono); font-size: 14px; font-weight: 700; }
.ar-pnl { font-family: var(--font-mono); font-size: 13px; }
.ar-pct.up, .ar-pnl.up { color: var(--gr); }
.ar-pct.dn, .ar-pnl.dn { color: var(--rd); }

/* ── INSIGHTS TABLES ── */
.ins-card { border-radius: var(--radius); padding: 16px; margin-bottom: 12px; }
/* Paired insight cards sit side-by-side on desktop, stacked on mobile. */
.ins-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; align-items: start; }
/* History & P&L table — larger, more readable font (bumped ~4px). */
#pnlHistory table { font-size: 15px; }
#pnlHistory table th { font-size: 14px; }
.ins-row > .ins-card { margin-bottom: 0; }
@media (max-width: 720px) { .ins-row { grid-template-columns: 1fr; gap: 12px; } }
.ins-title { font-family: 'Instrument Serif', 'Assistant', serif; font-size: 20px; font-weight: 400; color: var(--t1); letter-spacing: -0.2px; margin-bottom: 12px; border-bottom: 1px solid var(--b1); padding-bottom: 6px; }
.ir { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--b1); }
.ir:last-child { border-bottom: none; }
.ir-l { font-size: 14px; color: var(--t2); }
.ir-v { font-family: var(--font-mono); font-size: 14px; font-weight: 700; }
.ir-v.up { color: var(--gr); }
.ir-v.dn { color: var(--rd); }
.ir-v.ac { color: var(--ac); }
body.light .ir-v.ac { color: var(--t1); }
.ir-v.gd { color: var(--gd); }

.rank-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--b1); }
.rank-row:last-child { border-bottom: none; }
.rank-n { font-family: var(--font-mono); font-size: 14px; font-weight: 700; width: 20px; text-align: center; color: var(--t3); }
.rank-info { flex: 1; min-width: 0; }
.rank-sym { font-family: 'Geist Mono', 'Geist', monospace; font-style: italic; font-size: 16px; font-weight: 400; }
.rank-name { font-size: 13px; color: var(--t2); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.rank-pct { font-family: var(--font-mono); font-size: 14px; font-weight: 700; }
.rank-pnl { font-family: var(--font-mono); font-size: 13px; }

.dist-r { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.dist-l { font-family: 'Geist Mono', 'Geist', monospace; font-style: italic; font-size: 14px; color: var(--t2); width: 70px; flex-shrink: 0; }
.dist-bw { flex: 1; height: 4px; background: var(--s3); overflow: hidden; border-radius: 2px; }
.dist-b { height: 100%; transition: width 1s ease; }
.dist-p { font-family: var(--font-mono); font-size: 12px; color: var(--t3); width: 38px; text-align: left; }

/* ── MODALS ── */
.ov { position: fixed; inset: 0; background: rgba(10,15,31,0.82); backdrop-filter: blur(8px); z-index: 200; display: flex; align-items: stretch; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
body.light .ov { background: rgba(11,30,63,0.42); }
@media(min-width: 640px) { .ov { align-items: center; justify-content: center; } }
.ov.open { opacity: 1; pointer-events: all; }
.modal { background: var(--s2); border-top: 1px solid var(--b2); width: 100%; height: 100%; max-height: 100vh; overflow-y: auto; padding: 24px 20px 40px; transform: translateY(30px); transition: transform .25s cubic-bezier(.55,.2,.2,1); }
@media(min-width: 640px) { .modal { border: 1px solid var(--b2); border-radius: var(--radius); width: min(720px, 94vw); max-height: 85vh; height: auto; transform: scale(0.97) translateY(10px); padding: 24px 20px; } }
.ov.open .modal { transform: none; }
.drag { display: none; }
.modal-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 12px; flex-direction: row-reverse; }
.modal-back { display: inline-flex; align-items: center; gap: 6px; background: var(--s3); border: 1px solid var(--b1); color: var(--t2); border-radius: var(--radius-sm); padding: 7px 13px 7px 11px; font-family: var(--font-body); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s; }
.modal-back:hover { border-color: var(--ac); color: var(--ac); background: color-mix(in srgb, var(--ac) 8%, var(--s3)); }
.modal-back i { font-size: 16px; }
/* In LTR the back arrow should point left (reading direction) */
html[dir="ltr"] .modal-back i, body[dir="ltr"] .modal-back i { transform: scaleX(-1); }
.mclose { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 14px); inset-inline-start: 16px; width: 36px; height: 36px; border-radius: 50%; background: var(--s3); border: 1px solid var(--b1); color: var(--t2); font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 5; }
@media(min-width: 640px) { .mclose { top: 16px; width: 28px; height: 28px; border-radius: var(--radius-sm); } }
.mclose:hover { color: var(--rd); background: var(--b1); }
/* Topbar variant: in-flow, sits inside the header row (not overlapping content) */
.modal-topbar .mclose { position: static; top: auto; left: auto; width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; }
@media(min-width: 640px) { .modal-topbar .mclose { width: 32px; height: 32px; border-radius: var(--radius-sm); } }
.sell-btn { width: min(300px, 100%); margin: 14px auto 0; padding: 13px 26px; border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.09); color: #fff; font-family: var(--font-body); font-size: 13px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px; transition: opacity .15s, transform .1s, background .15s; position:relative; z-index:0; backdrop-filter: blur(4px); }
.sell-btn:hover { background: rgba(255,255,255,.13); }
body.light .sell-btn { background: #b89150; color: #fff; border-color: transparent; }
/* Border-light effect: faint uniform ring + a bright segment traveling along it.
   The segment's MOTION is driven by the Web Animations API in decorateSellButtons —
   not by CSS keyframes — because Safari does not support var() inside @keyframes,
   which silently killed the previous version there. */
.sell-ring { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:0; transition:opacity .22s; overflow:visible; }
.sell-ring.lit { opacity:1; }
.sell-ring .ring-base { fill:none; stroke:rgba(255,255,255,.30); stroke-width:1.4; }
body.light .sell-ring .ring-base { stroke:rgba(255,255,255,.45); }
.sell-ring .ring-move { fill:none; stroke:#fff; stroke-width:1.6; stroke-linecap:round;
  filter: drop-shadow(0 0 3px rgba(255,255,255,.9)) drop-shadow(0 0 7px rgba(255,255,255,.45)); }
.sell-btn:active { transform: scale(.96); }
@media (hover:none) { .sell-btn:active { transform: scale(.95); } }
.sell-btn i { font-size: 16px; }
.sell-cur-toggle { background: color-mix(in srgb, var(--gr) 9%, transparent); border: 1px solid color-mix(in srgb, var(--gr) 24%, transparent); border-radius: 8px; cursor: pointer; font-family: var(--font-mono, monospace); font-size: 12px; font-weight: 700; color: var(--gr); padding: 6px 8px; line-height: 1; transition: opacity .12s, background .12s, border-color .12s; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; }
.sell-cur-toggle:hover { opacity: .88; background: color-mix(in srgb, var(--gr) 14%, transparent); border-color: color-mix(in srgb, var(--gr) 42%, transparent); }
.sell-cur-toggle .sell-cur-code { color: var(--t2); font-size: 10px; letter-spacing: .35px; }
.sell-cur-toggle i { font-size: 11px; color: var(--t3); }
.sell-cur-rate { min-height: 15px; margin: -10px 0 14px; text-align: end; color: var(--t3); font-family: var(--font-mono, monospace); font-size: 9.5px; direction: ltr; }
/* ── After-tax net row in the sell modal ── */
.sell-tax-row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; padding:10px 12px; background:color-mix(in srgb, var(--gd) 7%, var(--s2)); border:1px solid color-mix(in srgb, var(--gd) 25%, var(--b1)); border-radius:var(--radius-sm); }
.sell-tax-row .sell-proceeds-lbl { display:flex; align-items:center; gap:7px; }
.sell-tax-select { background:var(--s3); border:1px solid var(--b1); color:var(--t1); font-family:var(--font-body); font-size:11px; border-radius:7px; padding:3px 6px; cursor:pointer; }
.sell-tax-net { font-family:var(--font-mono); font-size:15px; font-weight:800; color:var(--gd); white-space:nowrap; }
.sell-tax-note { font-size:10.5px; color:var(--t3); margin-top:5px; padding-inline-start:2px; }
.sell-cur-rate.loading { color: var(--gd); }
.sell-cur-rate.error { color: var(--rd); }
.sell-cur-picker { min-width: 280px !important; }
.sell-cur-picker .picker-opt { min-height: 38px; }
.sell-cur-picker .po-sym { min-width: 38px; }

/* ── חלונית מכירה ── */
#sellOv { align-items: center; justify-content: center; z-index: 300; }
.sell-modal {
  width: min(380px, 92vw);
  background: var(--s2, #14161f);
  border: 1px solid var(--b1);
  border-radius: 22px;
  padding: 24px 22px 20px;
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  font-family: var(--font-body);
  position: relative;
  animation: sellPop .22s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes sellPop { from { transform: scale(.92) translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
.sell-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.sell-ico { width: 44px; height: 44px; border-radius: 13px; background: var(--s3); display: flex; align-items: center; justify-content: center; font-size: 22px; }
.sell-ico i { font-size: 24px; }
.sell-sym { font-family: var(--font-display, var(--font-body)); font-size: 21px; font-weight: 600; color: var(--t1); letter-spacing: .5px; }
.sell-sub { font-size: 12px; color: var(--t3); margin-top: 1px; }
.sell-qty-display { text-align: center; margin: 6px 0 2px; display: flex; align-items: baseline; justify-content: center; gap: 8px; direction: ltr; }
.sell-qty-num { font-family: var(--font-mono, monospace); font-size: 38px; font-weight: 700; color: var(--rd); line-height: 1; }
.sell-qty-lbl { font-size: 13px; color: var(--t3); font-family: var(--font-mono, monospace); }
.sell-held { text-align: center; font-size: 11px; color: var(--t3); margin-bottom: 16px; }
.sell-slider { width: 100%; -webkit-appearance: none; appearance: none; height: 6px; border-radius: 100px; background: var(--s3); outline: none; margin: 6px 0 14px; }
.sell-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--rd); border: 3px solid var(--s2, #14161f); box-shadow: 0 2px 8px rgba(0,0,0,.4); cursor: pointer; }
.sell-slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--rd); border: 3px solid var(--s2, #14161f); cursor: pointer; }
.sell-pcts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-bottom: 16px; }
.sell-pcts button { padding: 9px 0; border-radius: 10px; border: 1px solid var(--b1); background: var(--s3); color: var(--t2); font-family: var(--font-body); font-size: 12px; font-weight: 600; cursor: pointer; transition: all .12s; }
.sell-pcts button:hover { border-color: color-mix(in srgb, var(--rd) 40%, transparent); color: var(--rd); }
.sell-stepper { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.sell-stepper button { width: 42px; height: 46px; border-radius: 12px; border: 1px solid var(--b1); background: var(--s3); color: var(--t1); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .12s; }
.sell-stepper button:hover { background: var(--b1); }
.sell-stepper input { flex: 1; height: 46px; text-align: center; border-radius: 12px; border: 1px solid var(--b1); background: var(--s3); color: var(--t1); font-family: var(--font-mono, monospace); font-size: 18px; font-weight: 600; outline: none; min-width: 0; }
.sell-stepper input:focus { border-color: color-mix(in srgb, var(--rd) 45%, transparent); }
.sell-proceeds { text-align: center; font-size: 12px; color: var(--t3); min-height: 18px; margin-bottom: 16px; }
.sell-proceeds b { color: var(--gr); font-family: var(--font-mono, monospace); }
.sell-proceeds-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 10px; min-width: 0; }
.sell-proceeds-lbl { font-size: 12px; color: var(--t3); white-space: nowrap; flex-shrink: 0; }
.sell-proceeds-inp-wrap { display: flex; align-items: center; flex: 1; min-width: 0; overflow: hidden; background: var(--s3); border: 1px solid var(--b1); border-radius: 10px; padding: 0 10px; gap: 5px; transition: border-color .12s; }
.sell-proceeds-inp-wrap:focus-within { border-color: color-mix(in srgb, var(--gr) 50%, transparent); }
.sell-proceeds-cur { font-family: var(--font-mono, monospace); font-size: 14px; color: var(--gr); font-weight: 700; }
.sell-proceeds-inp-wrap input { flex: 1; border: none; background: transparent; color: var(--t1); font-family: var(--font-mono, monospace); font-size: 14px; font-weight: 600; padding: 10px 0; outline: none; text-align: left; direction: ltr; min-width: 0; }
.sell-actions { display: flex; gap: 10px; }
.sell-actions button { flex: 1; padding: 14px 0; border-radius: 13px; font-family: var(--font-body); font-size: 14px; font-weight: 600; cursor: pointer; transition: all .12s; }
.sell-cancel { background: var(--s3); border: 1px solid var(--b1); color: var(--t2); }
.sell-cancel:hover { background: var(--b1); }
.sell-confirm { background: var(--rd); border: 1px solid var(--rd); color: #fff; }
.sell-confirm:hover { filter: brightness(1.08); }
.sell-confirm:disabled { opacity: .4; cursor: not-allowed; }

/* ── VIEW SETTINGS (modular display control) ── */
.view-toolbar { display: flex; justify-content: flex-start; margin-bottom: 10px; }
/* View button now lives INSIDE the total-value card, above its label */
.total-view-row { display: flex; justify-content: flex-start; margin-bottom: 10px; }   /* start = right in RTL (he/ar), left in LTR — always aligned with the text */
.total-view-row .view-toggle-btn { font-size: 12px; padding: 6px 12px; }
/* Top ad banner in the old button spot — MOBILE ONLY (desktop has the side ad slot) */
.ad-banner-top { display: flex; position: relative; align-items: center; gap: 10px; width: 100%; min-height: 96px; background: linear-gradient(120deg, color-mix(in srgb, var(--ac) 8%, var(--s3)), var(--s3)); border: 1px dashed color-mix(in srgb, var(--ac) 38%, var(--b1)); border-radius: var(--radius-sm); padding: 18px 20px; margin-bottom: 14px; }
.ad-banner-top .ad-badge { position: absolute; top: 6px; inset-inline-start: 8px; font-size: 9px; letter-spacing: .1em; color: var(--t3); border: 1px solid var(--b1); border-radius: 4px; padding: 1px 5px; background: var(--s2); font-family: var(--font-mono); }
.ad-banner-top .ad-banner-body { display: flex; align-items: center; gap: 12px; width: 100%; justify-content: center; }
.ad-banner-top .ad-banner-body > i { font-size: 22px; color: color-mix(in srgb, var(--ac) 70%, var(--t3)); }
.ad-banner-top .ad-banner-t { font-size: 13px; font-weight: 700; color: var(--t2); }
.ad-banner-top .ad-banner-s { font-size: 11px; color: var(--t3); }
.ad-banner-top .ad-banner-body > i { font-size: 30px; }
.ad-banner-top .ad-banner-t { font-size: 15px; }
.ad-banner-top .ad-banner-s { font-size: 12.5px; }
body.pro-mode .ad-banner-top { display: none !important; }
.view-toggle-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-body); font-size: 13px; font-weight: 700;
  color: var(--t1); background: var(--s1); border: 1px solid var(--b2);
  padding: 8px 14px; border-radius: var(--radius-sm); cursor: pointer;
  transition: border-color .15s, background .15s, transform .1s;
}
.view-toggle-btn:hover { border-color: var(--ac); background: color-mix(in srgb, var(--ac) 8%, var(--s1)); }
.view-toggle-btn:active { transform: scale(.97); }
.view-toggle-btn i { font-size: 16px; color: var(--ac); }

#viewOv { align-items: center; justify-content: center; z-index: 300; }
.view-modal {
  width: min(440px, 94vw); background: var(--s2); border: 1px solid var(--b1);
  border-radius: 22px; padding: 22px 20px 20px; box-shadow: 0 30px 80px rgba(0,0,0,.55);
  font-family: var(--font-body); max-height: 88vh; overflow-y: auto; position: relative;
  animation: sellPop .22s cubic-bezier(.2,.9,.3,1.2);
}
.view-modal-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.view-modal-titles { flex: 1; min-width: 0; }
.view-modal-title { font-family: 'Instrument Serif', 'Assistant', serif; font-size: 21px; font-weight: 400; color: var(--t1); letter-spacing: -.2px; }
.view-modal-sub { font-size: 12px; color: var(--t3); margin-top: 4px; line-height: 1.5; }
.view-modal .mclose { position: static; flex-shrink: 0; }
.view-section { margin-bottom: 18px; }
.view-section-title { font-size: 11px; color: var(--t3); font-weight: 700; text-transform: uppercase; letter-spacing: .6px; margin: 0 4px 4px; }
.view-section-hint { font-size: 11px; color: var(--t3); margin: 0 4px 8px; line-height: 1.4; opacity: .8; }
.view-list { background: var(--s3); border: 1px solid var(--b1); border-radius: var(--radius); overflow: hidden; }
body.light .view-list { background: rgba(10,15,31,0.04); border-color: rgba(10,15,31,0.1); }
.view-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 14px; border-bottom: 1px solid var(--b1); }
.view-row:last-child { border-bottom: none; }
.view-row-disabled { opacity: .45; }
.view-row-left { display: flex; align-items: center; gap: 11px; min-width: 0; }
/* Hierarchy arrows in the view modal */
.view-move { display: flex; flex-direction: column; gap: 1px; margin-inline-end: 2px; }
.view-move-btn { display: flex; align-items: center; justify-content: center; width: 20px; height: 15px; background: var(--s3); border: 1px solid var(--b1); color: var(--t2); border-radius: 4px; cursor: pointer; font-size: 10px; padding: 0; transition: all .12s; }
.view-move-btn:hover:not(:disabled) { border-color: var(--ac); color: var(--ac); }
.view-move-btn:disabled { opacity: .25; cursor: default; }
.view-row-ico { width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; background: var(--s2); border: 1px solid var(--b1); display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--ac); }
body.light .view-row-ico { background: rgba(255,255,255,0.8); }
.view-row-label { font-size: 14px; font-weight: 600; color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.view-soon { font-size: 9px; font-weight: 700; color: var(--gd); background: color-mix(in srgb, var(--gd) 14%, transparent); border: 1px solid color-mix(in srgb, var(--gd) 28%, transparent); padding: 1px 6px; border-radius: 100px; margin-inline-start: 6px; vertical-align: middle; }
/* iOS-style toggle switch */
.view-switch { position: relative; width: 46px; height: 28px; flex-shrink: 0; border-radius: 100px; border: none; background: var(--b2); cursor: pointer; padding: 0; transition: background .2s ease; }
.view-switch.on { background: var(--gr); }
.view-switch:disabled { cursor: not-allowed; }
.view-switch-knob { position: absolute; top: 3px; inset-inline-start: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.3); transition: transform .2s cubic-bezier(.55,.2,.2,1); }
.view-switch.on .view-switch-knob { transform: translateX(18px); }
html[dir="rtl"] .view-switch.on .view-switch-knob, body[dir="rtl"] .view-switch.on .view-switch-knob { transform: translateX(-18px); }
.view-done-btn { width: 100%; margin-top: 4px; padding: 13px; border-radius: var(--radius-sm); border: none; background: var(--ac); color: #F1F4FB; font-family: var(--font-body); font-size: 14px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: opacity .15s, transform .1s; }
body.light .view-done-btn { color: var(--bg); }
.view-done-btn:hover { opacity: .9; }
.view-done-btn:active { transform: scale(.98); }
/* Empty-state card for placeholder categories (commodities/bonds/etfs) */
.empty-cat-card { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 32px 20px; border: 1px dashed var(--b2); border-radius: var(--radius); background: color-mix(in srgb, var(--s2) 50%, transparent); text-align: center; cursor: pointer; transition: transform .15s, border-color .15s, box-shadow .15s; }
.empty-cat-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--ac) 55%, var(--b2)); box-shadow: 0 14px 30px -16px rgba(0,0,0,.5); }
.empty-cat-card:hover .empty-cat-ico { color: var(--ac); }
.empty-cat-ico { width: 48px; height: 48px; border-radius: 14px; background: var(--s3); border: 1px solid var(--b1); display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--ac); }
.empty-cat-title { font-family: 'Instrument Serif', 'Assistant', serif; font-size: 17px; font-weight: 400; color: var(--t1); }
.empty-cat-sub { font-size: 12px; color: var(--t3); }

.mh { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding-inline-start: 48px; }
.mh-titles { min-width: 0; }
.mh-actions { margin-inline-start: auto; display: flex; gap: 8px; flex-shrink: 0; }
.mh-btn { width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--b1); background: var(--s2); color: var(--t2); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; transition: all .15s; }
.mh-btn:hover { border-color: var(--ac); color: var(--ac); background: color-mix(in srgb, var(--ac) 8%, var(--s2)); transform: translateY(-1px); }
.mh-spin { animation: rot .7s linear infinite; }
.erow-flash { animation: erowFlash 1.4s ease; }
@keyframes erowFlash { 0%,100% { background: transparent; } 30% { background: color-mix(in srgb, var(--ac) 16%, transparent); } }
.mico { width: 46px; height: 46px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 21px; background: var(--s3); border: 1px solid var(--b1); }
.mh h2 { font-family: 'Instrument Serif', 'Assistant', serif; font-style: italic; font-size: 28px; font-weight: 400; letter-spacing: -0.4px; }
.mh p { font-size: 14px; color: var(--t2); margin-top: 2px; }

.mkpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 20px; }
@media(min-width: 480px) { .mkpis { grid-template-columns: repeat(4, 1fr); } }
.mkpi { background: var(--s3); border: 1px solid var(--b1); border-radius: var(--radius-sm); padding: 12px; }
.mkpi.avg-toggle { transition:background .12s, border-color .12s; }
.mkpi.avg-toggle:hover { background:color-mix(in srgb, var(--gd) 8%, transparent); border-color:color-mix(in srgb, var(--gd) 30%, var(--b1)); }
.mkpi-l { font-size: 11px; color: var(--t3); font-weight: 700; text-transform: uppercase; margin-bottom: 4px; }
.mkpi-v { font-family: var(--font-mono); font-size: 17px; font-weight: 700; }
.mkpi-v.up { color: var(--gr); }
.mkpi-v.dn { color: var(--rd); }
.mkpi-v.ac { color: var(--ac); }
body.light .mkpi-v.ac { color: var(--t1); }

.mch { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.mchl { font-size: 12px; color: var(--t2); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.rbtns { display: flex; gap: 0; background: var(--s2); border-radius: 12px; padding: 3px; }
.rb { font-family: var(--font-mono); font-size: 11px; font-weight: 600; padding: 6px 12px; border-radius: 9px; border: none; background: transparent; color: var(--t3); cursor: pointer; transition: all 0.15s; letter-spacing: 0.3px; }
.rb:hover { color: var(--t1); background: var(--s3); }
.rb.active { background: var(--s1); color: var(--t1); font-weight: 700; box-shadow: 0 1px 4px rgba(0,0,0,0.3); }
body.light .rb.active { background: #fff; color: var(--ac); box-shadow: 0 1px 6px rgba(11,30,63,0.12); }

/* TradingView Lightweight Charts™ — interactive asset detail chart */
.mch { flex-wrap: wrap; gap: 8px; }
.rbtns { max-width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.rbtns::-webkit-scrollbar { display: none; }
.tv-chart-shell { height: 310px; min-height: 280px; padding: 0 !important; isolation: isolate; }
.tv-chart-host { position: relative; width: 100%; height: 100%; direction: ltr; overflow: hidden; }
.tv-chart-host canvas { cursor: crosshair; }
.tv-chart-legend {
  position: absolute; top: 10px; left: 12px; z-index: 7;
  display: flex; align-items: baseline; gap: 8px; max-width: calc(100% - 260px);
  padding: 7px 10px; border: 1px solid var(--b1); border-radius: 10px;
  background: color-mix(in srgb, var(--s1) 82%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 18px rgba(0,0,0,.18); pointer-events: none;
  font-family: var(--font-mono); white-space: nowrap;
}
.tv-chart-legend-symbol { color: var(--t2); font-size: 10px; font-weight: 700; letter-spacing: .5px; }
.tv-chart-legend-price { color: var(--t1); font-size: 14px; font-weight: 800; }
.tv-chart-legend-change { font-size: 11px; font-weight: 800; }
.tv-chart-legend-time { color: var(--t3); font-family: var(--font-body); font-size: 9.5px; overflow: hidden; text-overflow: ellipsis; }
.tv-chart-toolbar {
  position: absolute; top: 9px; right: 10px; z-index: 10;
  display: flex; gap: 4px; padding: 4px;
  background: color-mix(in srgb, var(--s1) 88%, transparent);
  border: 1px solid var(--b1); border-radius: 11px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.tv-chart-tool {
  height: 30px; min-width: 32px; padding: 0 9px; border: 0; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  background: transparent; color: var(--t3); cursor: pointer;
  font-family: var(--font-body); font-size: 10px; font-weight: 700; transition: .15s ease;
}
.tv-chart-tool:hover { color: var(--t1); background: var(--s3); }
.tv-chart-tool.active { color: #fff; background: var(--ac); }
.tv-chart-tool i { font-size: 14px; }
.tv-chart-measure-layer { position: absolute; inset: 0; z-index: 6; pointer-events: none; touch-action: pan-y; cursor: crosshair; }
.tv-chart-measure-layer.active { pointer-events: auto; touch-action: none; }
.tv-chart-selection {
  position: absolute; top: 0; bottom: 0; display: none;
  background: color-mix(in srgb, var(--ac) 13%, transparent);
  border-inline: 1px solid color-mix(in srgb, var(--ac) 80%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ac) 9%, transparent);
}
.tv-chart-selection.show { display: block; }
.tv-chart-measure-card {
  position: absolute; left: 50%; top: 52px; z-index: 9; transform: translateX(-50%);
  display: none; min-width: 250px; max-width: calc(100% - 24px);
  padding: 9px 12px; border-radius: 11px;
  background: color-mix(in srgb, var(--s1) 94%, transparent);
  border: 1px solid var(--b2); box-shadow: 0 10px 28px rgba(0,0,0,.32);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  direction: rtl; text-align: right; pointer-events: none;
}
.tv-chart-measure-card.show { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 3px; }
.tv-measure-main { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.tv-measure-pct { font-family: var(--font-mono); font-size: 17px; font-weight: 900; }
.tv-measure-delta { font-family: var(--font-mono); font-size: 12px; font-weight: 800; }
.tv-measure-label { color: var(--t3); font-size: 9px; }
.tv-measure-value { color: var(--t1); font-family: var(--font-mono); font-size: 10px; text-align: left; direction: ltr; }
.tv-chart-attribution {
  position: absolute; right: 8px; bottom: 25px; z-index: 8;
  color: var(--t3); opacity: .62; font-size: 8px; text-decoration: none;
  font-family: var(--font-body); direction: ltr;
}
.tv-chart-attribution:hover { opacity: 1; color: var(--t2); }
@media (max-width: 640px) {
  .tv-chart-shell { height: 290px; }
  .tv-chart-toolbar { top: 7px; right: 7px; }
  .tv-chart-tool { min-width: 30px; padding: 0 7px; }
  .tv-chart-tool span { display: none; }
  .tv-chart-legend { top: 48px; left: 8px; right: 8px; max-width: none; width: fit-content; }
  .tv-chart-legend-time { display: none; }
  .tv-chart-measure-card { top: 87px; min-width: 220px; }
}

/* Fast interactive stock charts */
.mchb { position: relative; }
.stock-chart-status {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; text-align: center; pointer-events: none;
  color: var(--t3); font-size: 11px; font-family: var(--font-body);
  background: color-mix(in srgb, var(--s1) 68%, transparent);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.stock-chart-status.hidden { display: none; }
.stock-chart-status .spinner { margin-inline-end: 7px; }
.mchb { background: var(--s3); border: 1px solid var(--b1); border-radius: var(--radius-sm); padding: 0; height: 240px; position: relative; margin-bottom: 16px; overflow: hidden; }

.man { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media(max-width: 480px) { .man { grid-template-columns: 1fr; } }
.manc { background: var(--s3); border: 1px solid var(--b1); border-radius: var(--radius-sm); padding: 14px; }
.mant { font-size: 11px; color: var(--t3); text-transform: uppercase; font-weight: 700; margin-bottom: 8px; letter-spacing: 0.5px; }
.mr { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid var(--b1); }
.mr:last-child { border-bottom: none; }
.mrl { font-size: 13px; color: var(--t2); }
.mrv { font-family: var(--font-mono); font-size: 13px; font-weight: 700; }
.mrv.up { color: var(--gr); }
.mrv.dn { color: var(--rd); }

.sig { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--radius-sm); margin-top: 10px; font-family: var(--font-body); }
.sig.buy { background: color-mix(in srgb, var(--gr) 8%, transparent); border: 1px solid color-mix(in srgb, var(--gr) 20%, transparent); }
.sig.sell { background: color-mix(in srgb, var(--rd) 8%, transparent); border: 1px solid color-mix(in srgb, var(--rd) 20%, transparent); }
.sig.hold { background: color-mix(in srgb, var(--gd) 8%, transparent); border: 1px solid color-mix(in srgb, var(--gd) 20%, transparent); }
.sdot { width: 6px; height: 6px; border-radius: 50%; }
.sig.buy .sdot { background: var(--gr); }
.sig.sell .sdot { background: var(--rd); }
.sig.hold .sdot { background: var(--gd); }
.stxt { font-size: 12px; font-weight: 700; }
.sig.buy .stxt { color: var(--gr); }
.sig.sell .stxt { color: var(--rd); }
.sig.hold .stxt { color: var(--gd); }

/* ── EDITOR ── */
.ed-t { font-family: 'Instrument Serif', 'Assistant', serif; font-size: 24px; font-weight: 400; margin-bottom: 4px; letter-spacing: -0.3px; }
.ed-s { font-size: 14px; color: var(--t2); margin-bottom: 16px; }
.ed-manual-note { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--gd); background: color-mix(in srgb, var(--gd) 10%, transparent); border: 1px solid color-mix(in srgb, var(--gd) 25%, transparent); border-radius: var(--radius-sm); padding: 9px 12px; margin-bottom: 12px; }
/* Commodity quick-pick chips in the editor */
.commodity-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.commodity-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--s3); border: 1px solid var(--b1); border-radius: 999px; padding: 6px 12px; font-family: var(--font-body); font-size: 12px; color: var(--t1); cursor: pointer; transition: all .12s; }
.commodity-chip:hover { border-color: var(--ac); background: var(--s2); transform: translateY(-1px); }
.commodity-chip i { font-size: 14px; }
/* Icon preview inside the symbol field when a known commodity is detected */
.ns-icon { position: absolute; inset-inline-end: 10px; bottom: 9px; font-size: 17px; pointer-events: none; line-height: 1; }
/* Live total row: qty × live price, updates on every keystroke */
.cm-total { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; background: color-mix(in srgb, var(--gr) 8%, transparent); border: 1px solid color-mix(in srgb, var(--gr) 26%, transparent); border-radius: var(--radius-sm); padding: 10px 13px; margin-bottom: 12px; font-size: 13px; }
.cm-total i { font-size: 16px; }
.cm-total .cmt-l { color: var(--t3); font-size: 12px; }
.cm-total .cmt-v { font-family: var(--font-mono); font-weight: 800; color: var(--t1); font-size: 14.5px; }
.cm-total .cmt-ils { color: var(--gr); }
.cm-total .cmt-sep { color: var(--t3); }
.cm-total .cmt-sub { color: var(--t3); font-size: 11px; font-family: var(--font-mono); margin-inline-start: auto; }
.ed-manual-note i { font-size: 15px; flex-shrink: 0; }
.ed-empty-list { text-align: center; color: var(--t3); font-size: 13px; padding: 24px 16px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ed-empty-list i { font-size: 28px; color: var(--ac); }
.tabr { display: flex; gap: 4px; margin-bottom: 12px; }
.tabb { font-family: var(--font-body); font-size: 13px; font-weight: 700; padding: 6px 14px; border-radius: var(--radius-sm); border: 1px solid var(--b1); background: transparent; color: var(--t2); cursor: pointer; }
.tabb.active { background: var(--s3); border-color: var(--b2); color: var(--t1); }
.alist { display: flex; flex-direction: column; gap: 4px; max-height: 240px; overflow-y: auto; margin-bottom: 16px; }
.erow { display: flex; align-items: center; gap: 8px; background: var(--s3); border: 1px solid var(--b1); border-radius: var(--radius-sm); padding: 8px 12px; }
.emove { display: flex; flex-direction: column; gap: 1px; }
.emove-btn { background: var(--s2); border: 1px solid var(--b1); color: var(--t2); width: 24px; height: 16px; border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 9px; transition: all .12s; padding: 0; }
.emove-btn:hover:not(:disabled) { color: var(--t1); border-color: var(--ac); background: var(--s1); }
.emove-btn:disabled { opacity: .25; cursor: not-allowed; }
.emove-btn i { font-size: 9px; line-height: 1; }
.erow-ico { font-size: 16px; }
.erow-info { flex: 1; min-width: 0; }
.erow-sym { font-family: 'Geist Mono', 'Geist', monospace; font-style: italic; font-size: 14px; font-weight: 400; }
.erow-name { font-size: 10px; color: var(--t2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.einput { width: 92px; font-family: var(--font-mono); font-size: 11px; background: var(--s2); border: 1px solid var(--b2); border-radius: var(--radius-sm); padding: 5px; color: var(--t1); text-align: center; }
.einput:focus { outline: none; border-color: var(--ac); }
.edel { width: 26px; height: 26px; border-radius: var(--radius-sm); background: transparent; border: none; color: var(--t3); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.edel:hover { color: var(--rd); background: color-mix(in srgb, var(--rd) 8%, transparent); }

.aform { background: var(--s3); border: 1px solid var(--b1); border-radius: var(--radius-sm); padding: 14px; margin-bottom: 16px; }
.af-t { font-size: 10px; color: var(--t3); font-weight: 700; text-transform: uppercase; margin-bottom: 10px; }
.fg { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 8px; min-width: 0; }
@media(max-width:560px){ .fg { grid-template-columns: 1fr; } }
.ff { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ff label { font-size: 9px; color: var(--t3); font-weight: 700; text-transform: uppercase; }
.ff input { background: var(--s2); border: 1px solid var(--b2); border-radius: var(--radius-sm); padding: 6px 10px; color: var(--t1); font-family: var(--font-body); font-size: 12px; width: 100%; min-width: 0; box-sizing: border-box; }
.ff input:focus { outline: none; border-color: var(--ac); }
.fadd { width: min(300px, 100%); display:block; margin: 0 auto; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.14); color: #fff; padding: 10px 26px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 700; cursor: pointer; transition: opacity .15s, background .15s, transform .1s; position: relative; z-index: 0; backdrop-filter: blur(4px); }
.fadd:active { transform: scale(.96); }
body.light .fadd { background: #b89150; color: #fff; border-color: transparent; }
.fadd:hover { opacity: .88; }
i.fi { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.fi-spin { display: inline-block; animation: fi-spin 1.6s linear infinite; transform-origin: center; }
@keyframes fi-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
/* Primary CTA = Voltage, corners 14px — brand book §07 */
.fsave { width: min(300px, 100%); display:block; margin: 0 auto; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-sm); padding: 12px 26px; color: #fff; font-family: var(--font-body); font-size: 13px; font-weight: 800; cursor: pointer; transition: opacity .15s, background .15s, transform .1s; position: relative; z-index: 0; backdrop-filter: blur(4px); }
.fsave:active { transform: scale(.96); }
body.light .fsave { background: #b89150; color: #fff; border-color: transparent; }

/* ── Light mode: Edit panel fixes ── */
body.light .erow {
  background: rgba(10, 15, 31, 0.07) !important;
  border: 1px solid rgba(10, 15, 31, 0.13) !important;
}
body.light .erow-sym { color: var(--t1); }
body.light .einput {
  background: #fff !important;
  border: 1px solid rgba(10,15,31,0.2) !important;
  color: var(--t1);
}
body.light .emove-btn {
  background: rgba(255,255,255,0.9) !important;
  border-color: rgba(10,15,31,0.15) !important;
  color: var(--t2);
}
body.light .edel { color: var(--t3); }
body.light .aform {
  background: rgba(10, 15, 31, 0.04) !important;
  border: 1px solid rgba(10, 15, 31, 0.1) !important;
}
body.light .ff input {
  background: #fff !important;
  border: 1px solid rgba(10,15,31,0.2) !important;
  color: var(--t1);
}
body.light .sync-section {
  background: rgba(10,15,31,0.04) !important;
  border: 1px solid rgba(10,15,31,0.1) !important;
}
body.light .sync-status {
  background: rgba(10,15,31,0.06) !important;
}
body.light .sync-btn:not(.primary) {
  background: rgba(255,255,255,0.85) !important;
  border-color: rgba(10,15,31,0.15) !important;
  color: var(--t1);
}
body.light .sync-btn:not(.primary):hover {
  background: #fff !important;
}
body.light .lots-toggle {
  background: rgba(255,255,255,0.8) !important;
  border-color: rgba(10,15,31,0.15) !important;
  color: var(--t2);
}
body.light .lot-row input {
  background: #fff !important;
  border-color: rgba(10,15,31,0.15) !important;
  color: var(--t1);
}
body.light .lots-panel {
  background: rgba(10,15,31,0.04) !important;
  border-color: rgba(10,15,31,0.1) !important;
}
/* ── Light mode: refresh pill ── */
body.light .refresh-pill {
  background: rgba(255,255,255,0.95) !important;
  border-color: rgba(10,15,31,0.14) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.12) !important;
  color: var(--t1);
}
body.light .refresh-pill-spin {
  border-color: rgba(10,15,31,0.12) !important;
  border-top-color: var(--ac) !important;
}
/* ── Light mode: sell modal internals ── */
body.light .sell-modal {
  background: rgba(255,255,255,0.96) !important;
  border-color: rgba(10,15,31,0.12) !important;
}
body.light .sell-slider { background: rgba(10,15,31,0.1) !important; }
body.light .sell-pcts button {
  background: rgba(10,15,31,0.05) !important;
  border-color: rgba(10,15,31,0.12) !important;
  color: var(--t1);
}
body.light .sell-stepper button {
  background: rgba(10,15,31,0.05) !important;
  border-color: rgba(10,15,31,0.12) !important;
  color: var(--t1);
}
body.light .sell-stepper input {
  background: #fff !important;
  border-color: rgba(10,15,31,0.15) !important;
  color: var(--t1);
}
body.light .sell-proceeds-inp-wrap {
  background: #fff !important;
  border-color: rgba(10,15,31,0.15) !important;
}
body.light .sell-cancel {
  background: rgba(10,15,31,0.06) !important;
  border-color: rgba(10,15,31,0.12) !important;
  color: var(--t1);
}

/* ── LOCK SCREEN — glassmorphism on clean brand background ── */
#lockScreen { position: fixed; inset: 0; z-index: 999; display: flex; align-items: center; justify-content: center; padding: 24px; overflow: hidden; background: var(--bg); }
#lockScreen.hidden { display: none; }
/* subtle brand-tinted ambient glow so the glass card has something to refract */
#lockScreen::before {
  content: ''; position: absolute; z-index: 0;
  width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--ac) 22%, transparent) 0%, transparent 70%);
  filter: blur(40px);
}
.lock-card {
  /* no card on the login screen — just a centered column on the background */
  position: relative; z-index: 1;
  width: 100%; max-width: 380px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  animation: lockCardIn .5s cubic-bezier(.2,.9,.3,1.05);
}
@keyframes lockCardIn { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
body.light .lock-card { background: none; border: none; box-shadow: none; }

.lock-logo { width: 64px; height: 64px; border-radius: 18px; background: var(--ac); display: flex; align-items: center; justify-content: center; font-family: var(--font-logo); font-style: normal; font-weight: 400; font-size: 36px; color: #F1F4FB; letter-spacing: -2px; box-shadow: 0 8px 24px color-mix(in srgb, var(--ac) 45%, transparent); }
body.light .lock-logo { border-radius: 50%; background: var(--ac); color: #fff; }
.lock-title { font-family: var(--font-title); font-size: 28px; font-weight: 400; letter-spacing: -0.5px; color: var(--t1); }
.lock-sub { font-size: 12.5px; color: var(--t2); text-align: center; max-width: 260px; line-height: 1.6; margin-top: -6px; margin-bottom: 4px; }
.lock-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; background: var(--s2); border: 1px solid var(--b2); border-radius: var(--radius); padding: 16px 32px; cursor: pointer; transition: all 0.2s; width: 100%; }
.lock-btn:hover { border-color: var(--ac); background: var(--s3); }
.lock-btn-ico { font-size: 26px; }
.lock-btn-lbl { font-size: 12px; font-weight: 700; color: var(--t1); }
.lock-err { font-size: 11px; color: var(--rd); text-align: center; min-height: 16px; font-family: var(--font-mono); }
.gbtn { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; background: #fff; border: 1px solid rgba(0,0,0,.12); border-radius: 100px; padding: 13px 24px; cursor: pointer; transition: transform .12s, box-shadow .15s; }
.gbtn:hover { box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.gbtn:active { transform: scale(.985); }
.gbtn-lbl { font-family: 'Geist', 'Assistant', 'Rubik', sans-serif; font-size: 14.5px; font-weight: 500; color: #1f1f1f; }
.gbtn svg { width: 20px; height: 20px; flex-shrink: 0; }

/* ── Email/password auth form ── */
.auth-form { width: 100%; display: flex; flex-direction: column; gap: 9px; }
.auth-inp { width: 100%; padding: 13px 15px; border-radius: 13px; border: 1px solid var(--b2); background: var(--s2); color: var(--t1); font-family: 'Geist', 'Assistant', 'Rubik', sans-serif; font-size: 14px; outline: none; transition: border-color .15s, background .15s; box-sizing: border-box; }
.auth-inp:focus { border-color: var(--ac); background: var(--s3); }
.auth-inp::placeholder { color: var(--t3); opacity: .8; }
.auth-submit { width: 100%; padding: 14px; border-radius: 100px; border: none; background: var(--ac); color: #fff; font-family: 'Geist', 'Assistant', 'Rubik', sans-serif; font-size: 14.5px; font-weight: 600; cursor: pointer; transition: opacity .15s, transform .12s, box-shadow .15s; margin-top: 3px; box-shadow: 0 6px 20px color-mix(in srgb, var(--ac) 38%, transparent); }
.auth-submit:hover { opacity: .95; box-shadow: 0 8px 26px color-mix(in srgb, var(--ac) 48%, transparent); }
.auth-submit:active { transform: scale(.985); }
.auth-submit:disabled { opacity: .5; cursor: wait; }
.auth-forgot { background: none; border: none; color: var(--t3); font-size: 12px; cursor: pointer; padding: 4px; font-family: var(--font-body); margin-top: -2px; align-self: center; }
.auth-forgot:hover { color: var(--ac); text-decoration: underline; }

/* ── Signup preferences ── */
.signup-prefs { width: 100%; margin-top: 4px; }
.signup-prefs-q { font-size: 12.5px; color: var(--t2); font-weight: 600; margin-bottom: 9px; text-align: center; }
.signup-prefs-opts { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; }
.pref-chip { display: inline-flex; align-items: center; gap: 6px; padding: 9px 13px; border-radius: 100px; border: 1px solid var(--b2); background: var(--s2); color: var(--t2); font-family: var(--font-body); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all .14s; }
.pref-chip i { font-size: 15px; }
.pref-chip:hover { border-color: color-mix(in srgb, var(--ac) 50%, transparent); color: var(--t1); }
.pref-chip.on { background: color-mix(in srgb, var(--ac) 16%, transparent); border-color: var(--ac); color: var(--ac); }
.pref-chip.on i { color: var(--ac); }
.lock-div { display: flex; align-items: center; gap: 12px; width: 100%; color: var(--t3); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
.lock-div::before, .lock-div::after { content: ''; flex: 1; height: 1px; background: var(--b2); }
.lock-swap { font-size: 13.5px; color: var(--ac); cursor: pointer; background: none; border: none; font-family: var(--font-body); font-weight: 600; padding: 4px; }
.lock-swap:hover { text-decoration: underline; }
.lock-note { font-size: 11px; color: var(--t3); text-align: center; max-width: 270px; line-height: 1.5; display: none; }
.lock-skip { font-size: 11px; color: var(--t3); cursor: pointer; background: none; border: none; font-family: var(--font-body); text-decoration: underline; margin-top: 2px; }
.lock-skip:hover { color: var(--t2); }

/* ── SERVICE ── */
.ibanner { display: none; position: fixed; bottom: calc(var(--nav) + var(--safe) + 12px); left: 50%; transform: translateX(-50%); background: var(--s2); border: 1px solid var(--b2); border-radius: var(--radius); padding: 12px 16px; z-index: 150; align-items: center; gap: 10px; box-shadow: 0 8px 30px rgba(0,0,0,0.4); width: calc(100vw - 32px); max-width: 360px; }
.ibanner.show { display: flex; }

input[type=date] { background: var(--s2); border: 1px solid var(--b2); border-radius: var(--radius-sm); padding: 5px 8px; color: var(--t1); font-family: var(--font-mono); font-size: 11px; }
input[type=date]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: 0.4; }
body.light input[type=date]::-webkit-calendar-picker-indicator { filter: none; opacity: 0.8; }
.date-row { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; background: var(--s1); padding: 10px; border: 1px solid var(--b1); border-radius: var(--radius); }
.date-row label { font-size: 10px; color: var(--t3); font-weight: 700; text-transform: uppercase; }
.date-go { font-family: var(--font-body); font-size: 11px; font-weight: 700; padding: 5px 12px; border-radius: var(--radius-sm); border: none; background: var(--ac); color: #F1F4FB; cursor: pointer; }
body.light .date-go { color: var(--bg); }

/* Loading rows: brand prefers shimmer, but spinners kept minimal & voltage-tinted */
.loading-row { display: flex; align-items: center; gap: 8px; padding: 20px; color: var(--t2); font-size: 12px; justify-content: center; font-family: var(--font-mono); }
.spinner { width: 14px; height: 14px; border: 2px solid var(--b2); border-top-color: var(--ac); border-radius: 50%; animation: rot .8s linear infinite; }

table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); }
th { color: var(--t3); font-weight: 700; font-size: 9px; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--b1); }
td { font-size: 11px; color: var(--t1); border-bottom: 1px solid var(--b1); }

@media(max-width: 400px){ .t-val { font-size: 32px; } .s-val { font-size: 17px; } }

/* ── Phosphor thin icons ── */
.ph { font-size: 20px; line-height: 1; display: inline-block; }
.ph-sm { font-size: 15px; line-height: 1; }
.ph-lg { font-size: 28px; line-height: 1; }
.ni-ico i { font-size: 22px; }

@keyframes chartShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.chart-loading {
  background: linear-gradient(90deg, var(--s3) 25%, var(--s2) 50%, var(--s3) 75%);
  background-size: 200% 100%;
  animation: chartShimmer 1.4s linear infinite;
  border-radius: var(--radius-sm);
}
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
/* ── BRAND BOOK ANIMATIONS — Motion, responsive ── */

/* Price tick — brand book exact: ease-out 700ms, padding/margin for flash area */
@keyframes tickFlashUp {
  0%   { background: transparent; }
  20%  { background: color-mix(in oklab, var(--gr) 30%, transparent); }
  100% { background: transparent; }
}
@keyframes tickFlashDown {
  0%   { background: transparent; }
  20%  { background: color-mix(in oklab, var(--rd) 30%, transparent); }
  100% { background: transparent; }
}
.grand-digit { display: inline-block; min-width: 1.2em; text-align: right; font-feature-settings: 'tnum'; transition: color 0.4s ease; }
.flash-up   { animation: tickFlashUp   700ms ease-out; border-radius: 6px; padding: 2px 6px; margin: -2px -6px; }
.flash-down { animation: tickFlashDown 700ms ease-out; border-radius: 6px; padding: 2px 6px; margin: -2px -6px; }

/* Line draw-on: sparkline SVG path traces left-to-right, 2.4s */
@keyframes drawLine {
  0%   { stroke-dashoffset: var(--dash-len, 1000); opacity: 1; }
  70%  { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}
.spark-path {
  stroke-dasharray: var(--dash-len, 1000);
  stroke-dashoffset: var(--dash-len, 1000);
  animation: drawLine 2.4s cubic-bezier(.55,.2,.2,1) forwards;
}

/* Card enter: slide-up + 4px voltage line fades, stagger via JS */
@keyframes cardEnter {
  0%   { transform: translateY(18px); opacity: 0; }
  100% { transform: translateY(0);    opacity: 1; }
}
.card-enter {
  animation: cardEnter 600ms cubic-bezier(.2,.8,.25,1) both;
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ═══════════════════════════════════════════════════════════════
   FOCUS FORECAST · Analyst consensus + scenario engine
   ═══════════════════════════════════════════════════════════════ */
.forecast-page { padding: 0 18px 70px; }
.forecast-shell { width: min(1480px, 100%); margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.fc-card { position: relative; background: linear-gradient(145deg, color-mix(in srgb, var(--s1) 96%, var(--ac) 4%), var(--s1)); border: 1px solid var(--b1); border-radius: 24px; box-shadow: 0 18px 50px rgba(0,0,0,.14); overflow: hidden; }
.fc-card::before { content:''; position:absolute; inset:0; pointer-events:none; background: radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--ac) 9%, transparent), transparent 35%); opacity:.7; }
.fc-hero { padding: 28px; min-height: 330px; }
.fc-hero::after { content:''; position:absolute; width:420px; height:420px; border-radius:50%; inset-inline-end:-160px; top:-220px; background:radial-gradient(circle, color-mix(in srgb,var(--ac) 18%,transparent), transparent 68%); pointer-events:none; }
.fc-hero-top { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px; }
.fc-eyebrow { display:flex; align-items:center; gap:9px; color:var(--t2); font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.fc-live-dot { width:7px; height:7px; border-radius:50%; background:var(--gr); box-shadow:0 0 0 5px color-mix(in srgb,var(--gr) 12%,transparent); }
.fc-actions { display:flex; align-items:center; gap:8px; }
.fc-btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:38px; padding:0 14px; border-radius:12px; border:1px solid var(--b2); background:var(--s2); color:var(--t1); font-family:var(--font-body); font-size:12px; font-weight:650; cursor:pointer; transition:transform .15s,border-color .15s,background .15s; }
.fc-btn:hover { transform:translateY(-1px); border-color:color-mix(in srgb,var(--ac) 60%,var(--b2)); }
.fc-btn.primary { background:var(--ac); border-color:var(--ac); color:#fff; box-shadow:0 10px 24px color-mix(in srgb,var(--ac) 28%,transparent); }
.fc-btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.fc-hero-grid { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(420px,.75fr); gap:28px; align-items:end; }
.fc-title { font-family:var(--font-title); font-size:clamp(38px,5vw,70px); font-weight:400; letter-spacing:-1.5px; line-height:.96; margin-bottom:14px; max-width:760px; }
.fc-title em { color:var(--ac); font-style:italic; }
.fc-subtitle { max-width:760px; color:var(--t2); font-size:14px; line-height:1.75; }
.fc-disclaimer-inline { display:inline-flex; align-items:center; gap:6px; margin-top:12px; color:var(--gd); font-size:10.5px; }
.fc-kpis { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.fc-kpi { min-height:98px; padding:16px; border:1px solid var(--b1); border-radius:16px; background:color-mix(in srgb,var(--s2) 86%,transparent); backdrop-filter:blur(10px); }
.fc-kpi-l { color:var(--t3); font-size:10px; font-weight:650; letter-spacing:.05em; margin-bottom:9px; }
.fc-kpi-v { font-family:var(--font-mono); font-size:clamp(20px,2vw,29px); font-weight:700; letter-spacing:-.04em; white-space:nowrap; }
.fc-kpi-v.up { color:var(--gr); }.fc-kpi-v.dn { color:var(--rd); }.fc-kpi-v.gd { color:var(--gd); }
.fc-kpi-s { color:var(--t3); font-size:9.5px; margin-top:7px; }
.fc-controls { position:relative; z-index:1; margin-top:24px; padding:16px; border:1px solid var(--b1); border-radius:18px; background:color-mix(in srgb,var(--s2) 72%,transparent); display:grid; grid-template-columns:auto minmax(260px,1fr) auto; align-items:center; gap:18px; }
.fc-horizons,.fc-scenario-tabs { display:flex; gap:5px; padding:4px; border:1px solid var(--b1); border-radius:12px; background:var(--s1); }
.fc-horizons button,.fc-scenario-tabs button { border:none; background:transparent; color:var(--t2); padding:8px 12px; border-radius:9px; font-family:var(--font-body); font-size:11px; font-weight:650; cursor:pointer; white-space:nowrap; }
.fc-horizons button.on,.fc-scenario-tabs button.on { background:var(--ac); color:#fff; box-shadow:0 5px 14px color-mix(in srgb,var(--ac) 25%,transparent); }
.fc-slider-wrap { min-width:0; }
.fc-slider-top { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; color:var(--t3); font-size:10px; }
.fc-slider-top strong { color:var(--t1); font-size:11px; }
.fc-slider { direction:ltr; width:100%; height:6px; border-radius:999px; appearance:none; -webkit-appearance:none; background:linear-gradient(90deg,var(--rd),var(--gd) 50%,var(--gr)); outline:none; }
.fc-slider::-webkit-slider-thumb { -webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:var(--t1); border:5px solid var(--s1); box-shadow:0 0 0 2px var(--ac),0 6px 14px rgba(0,0,0,.32); cursor:grab; }
.fc-slider::-moz-range-thumb { width:13px; height:13px; border-radius:50%; background:var(--t1); border:5px solid var(--s1); box-shadow:0 0 0 2px var(--ac); cursor:grab; }
.fc-grid-2 { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(340px,.75fr); gap:16px; }
.fc-scenario-card { padding:22px; }
.fc-section-head { position:relative; z-index:1; display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:18px; }
.fc-section-title { font-size:15px; font-weight:750; display:flex; align-items:center; gap:8px; }
.fc-section-title i { color:var(--ac); font-size:18px; }
.fc-section-sub { color:var(--t3); font-size:10.5px; margin-top:4px; }
.fc-projection-main { position:relative; z-index:1; display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:18px; }
.fc-projection-amount { font-family:var(--font-mono); font-size:clamp(32px,4vw,54px); font-weight:750; letter-spacing:-.06em; }
.fc-projection-change { display:inline-flex; align-items:center; gap:6px; padding:7px 11px; border-radius:999px; background:color-mix(in srgb,var(--gr) 12%,transparent); border:1px solid color-mix(in srgb,var(--gr) 26%,transparent); color:var(--gr); font-family:var(--font-mono); font-weight:700; font-size:12px; }
.fc-projection-change.dn { color:var(--rd); background:color-mix(in srgb,var(--rd) 12%,transparent); border-color:color-mix(in srgb,var(--rd) 26%,transparent); }
.fc-range { position:relative; z-index:1; height:15px; border-radius:999px; background:linear-gradient(90deg,color-mix(in srgb,var(--rd) 88%,#fff),var(--gd),color-mix(in srgb,var(--gr) 88%,#fff)); margin:34px 4px 12px; }
.fc-range::before,.fc-range::after { position:absolute; top:22px; color:var(--t3); font-size:9.5px; }
.fc-range::before { content:'דובי'; left:0; }.fc-range::after { content:'שורי'; right:0; }
.fc-range-marker { position:absolute; top:50%; transform:translate(-50%,-50%); width:24px; height:24px; border-radius:8px; background:var(--s1); border:2px solid var(--t1); box-shadow:0 6px 18px rgba(0,0,0,.42); transition:left .25s ease; }
.fc-range-labels { direction:ltr; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:28px; }
.fc-range-label { direction:rtl; padding:12px; border-radius:13px; background:var(--s2); border:1px solid var(--b1); text-align:center; cursor:pointer; transition:border-color .15s,transform .15s; }
.fc-range-label:hover { transform:translateY(-1px); border-color:var(--ac); }
.fc-range-label.on { border-color:color-mix(in srgb,var(--ac) 72%,var(--b1)); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ac) 25%,transparent); }
.fc-range-label span { display:block; color:var(--t3); font-size:9.5px; margin-bottom:5px; }.fc-range-label strong { font-family:var(--font-mono); font-size:15px; }
.fc-consensus-card { padding:22px; }
.fc-consensus-layout { position:relative; z-index:1; display:grid; grid-template-columns:150px 1fr; gap:20px; align-items:center; }
.fc-ring { width:142px; aspect-ratio:1; border-radius:50%; display:grid; place-items:center; position:relative; background:conic-gradient(var(--gr) 0 50%,var(--gd) 50% 80%,var(--rd) 80% 100%); }
.fc-ring::after { content:''; width:100px; aspect-ratio:1; border-radius:50%; background:var(--s1); border:1px solid var(--b1); }
.fc-ring-center { position:absolute; z-index:1; text-align:center; }.fc-ring-center strong { display:block; font-family:var(--font-mono); font-size:25px; }.fc-ring-center span { color:var(--t3); font-size:9px; }
.fc-rec-list { display:flex; flex-direction:column; gap:10px; }
.fc-rec-row { display:grid; grid-template-columns:70px 1fr 34px; gap:8px; align-items:center; font-size:10.5px; color:var(--t2); }
.fc-rec-track { height:6px; border-radius:999px; background:var(--s3); overflow:hidden; }.fc-rec-fill { height:100%; border-radius:inherit; }
.fc-rec-row strong { font-family:var(--font-mono); color:var(--t1); text-align:end; }
.fc-table-card { padding:0; }
.fc-table-head { position:relative; z-index:1; padding:20px 22px 14px; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; border-bottom:1px solid var(--b1); }
.fc-table-tools { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.fc-search { position:relative; min-width:220px; }.fc-search i { position:absolute; inset-inline-start:11px; top:50%; transform:translateY(-50%); color:var(--t3); }.fc-search input { width:100%; height:38px; border-radius:11px; border:1px solid var(--b1); background:var(--s2); color:var(--t1); padding:0 36px 0 12px; font-family:var(--font-body); outline:none; }.fc-search input:focus { border-color:var(--ac); }
.fc-filter { height:38px; border-radius:11px; border:1px solid var(--b1); background:var(--s2); color:var(--t1); padding:0 11px; font-family:var(--font-body); font-size:11px; outline:none; }
.fc-table-wrap { position:relative; z-index:1; overflow:auto; }
.fc-table { width:100%; border-collapse:collapse; min-width:1040px; direction:rtl; }
.fc-table th { position:sticky; top:0; z-index:2; background:color-mix(in srgb,var(--s1) 94%,transparent); backdrop-filter:blur(12px); color:var(--t3); font-size:9.5px; letter-spacing:.04em; font-weight:700; padding:12px 14px; text-align:right; border-bottom:1px solid var(--b1); white-space:nowrap; }
.fc-sort { border:none; background:none; color:inherit; font:inherit; cursor:pointer; display:inline-flex; align-items:center; gap:4px; }.fc-sort.on { color:var(--ac); }
.fc-table td { padding:15px 14px; border-bottom:1px solid var(--b1); font-size:11.5px; color:var(--t2); white-space:nowrap; }
.fc-table tbody tr { cursor:pointer; transition:background .14s; }.fc-table tbody tr:hover { background:color-mix(in srgb,var(--ac) 5%,transparent); }.fc-table tbody tr:last-child td { border-bottom:none; }
.fc-asset { display:flex; align-items:center; gap:10px; min-width:165px; }.fc-asset-icon { width:34px; height:34px; flex:0 0 34px; border-radius:11px; display:grid; place-items:center; background:var(--s2); font-size:16px; }.fc-asset-symbol { color:var(--t1); font-family:var(--font-mono); font-weight:750; font-size:12.5px; }.fc-asset-name { color:var(--t3); font-size:9.5px; margin-top:2px; max-width:150px; overflow:hidden; text-overflow:ellipsis; }
.fc-money { color:var(--t1); font-family:var(--font-mono); font-weight:650; }.fc-target { color:var(--gr); font-family:var(--font-mono); font-weight:700; }.fc-target.no { color:var(--t3); }
.fc-upside { display:inline-flex; align-items:center; justify-content:center; min-width:58px; padding:5px 8px; border-radius:999px; color:var(--gr); background:color-mix(in srgb,var(--gr) 10%,transparent); border:1px solid color-mix(in srgb,var(--gr) 18%,transparent); font-family:var(--font-mono); font-weight:700; }.fc-upside.dn { color:var(--rd); background:color-mix(in srgb,var(--rd) 10%,transparent); border-color:color-mix(in srgb,var(--rd) 18%,transparent); }.fc-upside.flat { color:var(--t3); background:var(--s2); border-color:var(--b1); }
.fc-rating { display:inline-flex; align-items:center; gap:5px; padding:5px 8px; border-radius:999px; font-size:10px; font-weight:700; }.fc-rating.buy { color:var(--gr); background:color-mix(in srgb,var(--gr) 11%,transparent); }.fc-rating.hold { color:var(--gd); background:color-mix(in srgb,var(--gd) 11%,transparent); }.fc-rating.sell { color:var(--rd); background:color-mix(in srgb,var(--rd) 11%,transparent); }.fc-rating.none { color:var(--t3); background:var(--s2); }
.fc-confidence { display:flex; align-items:center; gap:7px; }.fc-confidence-bar { width:46px; height:5px; border-radius:999px; background:var(--s3); overflow:hidden; }.fc-confidence-bar i { display:block; height:100%; background:var(--ac); border-radius:inherit; }
.fc-source { display:block; color:var(--t3); font-size:8.5px; margin-top:4px; }
.fc-empty { padding:50px 20px; text-align:center; color:var(--t3); line-height:1.7; }
.fc-loading { padding:50px 20px; text-align:center; }.fc-loading-ring { width:36px; height:36px; border-radius:50%; border:3px solid var(--b2); border-top-color:var(--ac); animation:rot .7s linear infinite; margin:0 auto 13px; }.fc-loading-title { color:var(--t1); font-weight:700; }.fc-loading-sub { color:var(--t3); font-size:10.5px; margin-top:5px; }
.fc-progress { height:4px; background:var(--s3); border-radius:999px; overflow:hidden; margin:14px auto 0; max-width:280px; }.fc-progress i { display:block; height:100%; width:0; background:linear-gradient(90deg,var(--ac),var(--gr)); transition:width .25s; }
.fc-insights-card { padding:22px; }
.fc-insights-grid { position:relative; z-index:1; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.fc-insight { padding:16px; border-radius:16px; border:1px solid var(--b1); background:var(--s2); min-height:150px; display:flex; flex-direction:column; }.fc-insight-icon { width:34px; height:34px; border-radius:11px; display:grid; place-items:center; margin-bottom:14px; background:color-mix(in srgb,var(--ac) 12%,transparent); color:var(--ac); font-size:17px; }.fc-insight.warn .fc-insight-icon { color:var(--gd); background:color-mix(in srgb,var(--gd) 12%,transparent); }.fc-insight.risk .fc-insight-icon { color:var(--rd); background:color-mix(in srgb,var(--rd) 12%,transparent); }.fc-insight.good .fc-insight-icon { color:var(--gr); background:color-mix(in srgb,var(--gr) 12%,transparent); }
.fc-insight-title { color:var(--t1); font-size:12px; font-weight:750; margin-bottom:7px; }.fc-insight-text { color:var(--t2); font-size:10.5px; line-height:1.6; flex:1; }.fc-insight-tag { margin-top:12px; color:var(--t3); font-family:var(--font-mono); font-size:8.5px; }
.fc-lower-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,.55fr); gap:16px; }
.fc-sector-card,.fc-method-card { padding:22px; }
.fc-sector-list { position:relative; z-index:1; display:flex; flex-direction:column; gap:13px; }.fc-sector-row { display:grid; grid-template-columns:115px 1fr 45px; gap:10px; align-items:center; }.fc-sector-name { color:var(--t2); font-size:10.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.fc-sector-track { height:8px; border-radius:999px; background:var(--s3); overflow:hidden; }.fc-sector-fill { height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--ac),color-mix(in srgb,var(--ac) 60%,var(--gr))); }.fc-sector-pct { color:var(--t1); font-family:var(--font-mono); font-size:10px; text-align:end; }
.fc-method-list { position:relative; z-index:1; display:flex; flex-direction:column; gap:11px; }.fc-method-item { display:flex; gap:9px; align-items:flex-start; color:var(--t2); font-size:10.5px; line-height:1.55; }.fc-method-item i { color:var(--ac); margin-top:2px; }.fc-model-toggle { position:relative; z-index:1; margin-top:16px; padding:12px; border-radius:13px; border:1px solid var(--b1); background:var(--s2); display:flex; align-items:center; justify-content:space-between; gap:12px; }.fc-model-toggle span { color:var(--t2); font-size:10.5px; line-height:1.5; }.fc-switch { width:42px; height:24px; border-radius:999px; border:none; background:var(--s3); position:relative; cursor:pointer; flex:0 0 auto; }.fc-switch::after { content:''; position:absolute; width:18px; height:18px; top:3px; inset-inline-start:3px; border-radius:50%; background:var(--t2); transition:transform .2s,background .2s; }.fc-switch.on { background:color-mix(in srgb,var(--ac) 40%,var(--s3)); }.fc-switch.on::after { transform:translateX(-18px); background:#fff; }
.fc-footnote { color:var(--t3); font-size:9.5px; line-height:1.65; text-align:center; padding:4px 14px 0; }
.fc-detail { padding:4px 2px 8px; }.fc-detail-hero { padding:18px; border-radius:18px; background:linear-gradient(145deg,color-mix(in srgb,var(--ac) 10%,var(--s2)),var(--s2)); border:1px solid var(--b1); }.fc-detail-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }.fc-detail-title { display:flex; align-items:center; gap:12px; }.fc-detail-targets { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:14px; }.fc-detail-target { background:var(--s1); border:1px solid var(--b1); border-radius:13px; padding:12px; text-align:center; }.fc-detail-target span { display:block; color:var(--t3); font-size:9px; margin-bottom:5px; }.fc-detail-target strong { font-family:var(--font-mono); font-size:15px; }.fc-detail-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:10px; }.fc-detail-metric { background:var(--s2); border:1px solid var(--b1); border-radius:13px; padding:11px; }.fc-detail-metric span { display:block; color:var(--t3); font-size:8.5px; margin-bottom:5px; }.fc-detail-metric strong { font-family:var(--font-mono); font-size:12px; color:var(--t1); }
.fc-pdf-stage { position:fixed; left:-20000px; top:0; width:794px; z-index:-1; pointer-events:none; }
.fpdf-page { width:794px; height:1123px; overflow:hidden; background:#f5f3ec; color:#0b1020; padding:44px 42px; direction:rtl; font-family:'Assistant','Arial',sans-serif; position:relative; }
.fpdf-page::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 15% 0%,rgba(59,107,255,.08),transparent 36%); pointer-events:none; }.fpdf-brand { position:relative; font-size:9px; letter-spacing:.24em; color:#617087; font-weight:700; }.fpdf-title { position:relative; font-size:42px; line-height:1.04; font-weight:800; margin:18px 0 10px; max-width:620px; }.fpdf-sub { position:relative; color:#667085; font-size:13px; line-height:1.65; max-width:640px; }.fpdf-rule { height:1px; background:#1a2339; margin:28px 0; opacity:.55; }.fpdf-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }.fpdf-kpi { background:#fff; border:1px solid #dedfd9; border-radius:14px; padding:14px; }.fpdf-kpi span { display:block; color:#778092; font-size:9px; margin-bottom:7px; }.fpdf-kpi strong { font-size:20px; font-weight:800; }.fpdf-scenario { margin-top:18px; background:#fff; border:1px solid #dedfd9; border-radius:18px; padding:20px; }.fpdf-scenario-head { display:flex; justify-content:space-between; align-items:end; }.fpdf-big { font-size:34px; font-weight:850; }.fpdf-change { color:#159a68; font-size:17px; font-weight:800; }.fpdf-bar { height:9px; border-radius:999px; background:linear-gradient(90deg,#d55850,#d2b268,#29a87b); margin:24px 0 16px; position:relative; }.fpdf-dot { position:absolute; top:50%; transform:translate(50%,-50%); width:18px; height:18px; border-radius:6px; background:#0b1020; border:3px solid #fff; }.fpdf-three { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }.fpdf-three div { background:#f6f5ef; border:1px solid #e2e2dc; border-radius:11px; padding:11px; text-align:center; }.fpdf-three span { display:block; color:#7a8291; font-size:9px; margin-bottom:4px; }.fpdf-three strong { font-size:13px; }.fpdf-section-title { font-size:20px; font-weight:850; margin-bottom:13px; }.fpdf-table { width:100%; border-collapse:collapse; background:#fff; border:1px solid #dedfd9; border-radius:14px; overflow:hidden; }.fpdf-table th { padding:10px 9px; color:#6f7889; font-size:8px; text-align:right; background:#f1f1eb; border-bottom:1px solid #dedfd9; }.fpdf-table td { padding:11px 9px; font-size:9px; border-bottom:1px solid #ecece6; }.fpdf-table tr:last-child td { border-bottom:none; }.fpdf-green { color:#159a68; font-weight:800; }.fpdf-red { color:#c44d4d; font-weight:800; }.fpdf-insights { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }.fpdf-insight { background:#fff; border:1px solid #dedfd9; border-radius:14px; padding:15px; min-height:115px; }.fpdf-insight strong { display:block; font-size:12px; margin-bottom:7px; }.fpdf-insight p { color:#667085; font-size:9px; line-height:1.55; margin:0; }.fpdf-note { position:absolute; left:42px; right:42px; bottom:28px; color:#7b8290; font-size:7.5px; line-height:1.5; border-top:1px solid #d8d8d2; padding-top:10px; }
@media (max-width:1100px) { .fc-hero-grid { grid-template-columns:1fr; }.fc-grid-2,.fc-lower-grid { grid-template-columns:1fr; }.fc-insights-grid { grid-template-columns:repeat(2,1fr); }.fc-kpis { grid-template-columns:repeat(4,1fr); }.fc-kpi { min-height:88px; } }
@media (max-width:760px) { .forecast-page { padding:0 12px 105px; }.forecast-shell { gap:12px; }.fc-card { border-radius:19px; }.fc-hero { padding:19px 16px; }.fc-hero-top { align-items:flex-start; }.fc-actions .fc-btn span { display:none; }.fc-actions .fc-btn { width:38px; padding:0; }.fc-title { font-size:42px; }.fc-subtitle { font-size:12px; }.fc-kpis { grid-template-columns:repeat(2,1fr); }.fc-kpi { padding:13px; min-height:86px; }.fc-kpi-v { font-size:20px; }.fc-controls { grid-template-columns:1fr; gap:12px; padding:13px; }.fc-horizons,.fc-scenario-tabs { width:100%; }.fc-horizons button,.fc-scenario-tabs button { flex:1; padding:8px 5px; }.fc-projection-main { align-items:flex-start; flex-direction:column; }.fc-consensus-layout { grid-template-columns:1fr; justify-items:center; }.fc-rec-list { width:100%; }.fc-insights-grid { grid-template-columns:1fr; }.fc-table-head { padding:16px 14px 12px; }.fc-table-tools { width:100%; }.fc-search { min-width:0; flex:1; }.fc-table-wrap { overflow:visible; padding:0 10px 10px; }.fc-table { min-width:0; display:block; }.fc-table thead { display:none; }.fc-table tbody { display:flex; flex-direction:column; gap:9px; }.fc-table tr { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border:1px solid var(--b1); border-radius:15px; background:var(--s2); padding:12px; }.fc-table td { padding:7px 5px; border:none; white-space:normal; min-width:0; }.fc-table td::before { content:attr(data-label); display:block; color:var(--t3); font-size:8.5px; margin-bottom:4px; }.fc-table td:first-child { grid-column:1/-1; padding-bottom:10px; border-bottom:1px solid var(--b1); margin-bottom:3px; }.fc-asset-name { max-width:230px; }.fc-detail-targets,.fc-detail-metrics { grid-template-columns:1fr; }.nav .ni-lbl { font-size:9px; letter-spacing:0; }.nav .ni { padding-inline:2px; }}
@media print { body.forecast-printing * { visibility:hidden !important; } body.forecast-printing #page-forecast, body.forecast-printing #page-forecast * { visibility:visible !important; } body.forecast-printing #page-forecast { position:absolute!important; inset:0!important; display:block!important; background:#fff!important; color:#111!important; } body.forecast-printing .fc-actions,body.forecast-printing .fc-controls,body.forecast-printing .fc-table-tools,body.forecast-printing .nav,body.forecast-printing .topbar,body.forecast-printing #tickerBar,body.forecast-printing #marketBar { display:none!important; } }



/* ═══════════════════════════════════════════
   SMART PORTFOLIO IMPORT — screenshot / PDF / CSV
   Files are processed locally in the browser; review is mandatory before save.
   ═══════════════════════════════════════════ */
.portfolio-import-launch{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin:14px 0 4px;padding:12px 14px;border-radius:13px;border:1px solid color-mix(in srgb,var(--ac) 42%,var(--b1));background:linear-gradient(135deg,color-mix(in srgb,var(--ac) 18%,var(--s2)),color-mix(in srgb,var(--ac) 6%,var(--s1)));color:var(--t1);font:700 13px var(--font-body);cursor:pointer;transition:.16s transform,.16s border-color,.16s box-shadow}
.portfolio-import-launch:hover{transform:translateY(-1px);border-color:var(--ac);box-shadow:0 10px 28px color-mix(in srgb,var(--ac) 16%,transparent)}
.portfolio-import-launch i{font-size:18px;color:var(--ac)}
.pi-ov{position:fixed;inset:0;z-index:1200;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(3,7,18,.78);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.pi-ov.open{display:flex;animation:fadeIn .18s ease}
.pi-modal{width:min(1080px,96vw);max-height:min(900px,94vh);overflow:auto;background:var(--s1);border:1px solid var(--b2);border-radius:24px;box-shadow:0 34px 100px rgba(0,0,0,.58);direction:rtl}
.pi-head{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;background:color-mix(in srgb,var(--s1) 92%,transparent);backdrop-filter:blur(16px);border-bottom:1px solid var(--b1)}
.pi-title{display:flex;align-items:center;gap:11px}.pi-title-ico{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--ac) 16%,transparent);color:var(--ac);font-size:21px}.pi-title h2{font-size:17px;font-weight:800}.pi-title p{font-size:11px;color:var(--t3);margin-top:2px}
.pi-close{width:34px;height:34px;border-radius:10px;border:1px solid var(--b1);background:var(--s2);color:var(--t2);cursor:pointer;font-size:16px}.pi-close:hover{color:var(--t1);border-color:var(--ac)}
.pi-body{padding:20px}.pi-private{display:flex;align-items:center;gap:8px;margin-bottom:16px;padding:10px 12px;border-radius:11px;background:color-mix(in srgb,var(--gr) 8%,transparent);border:1px solid color-mix(in srgb,var(--gr) 24%,transparent);color:var(--gr);font-size:11.5px}.pi-private span{color:var(--t2)}
.pi-source-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.pi-source{min-height:150px;padding:18px;border:1px solid var(--b1);border-radius:17px;background:linear-gradient(145deg,var(--s2),color-mix(in srgb,var(--s3) 68%,var(--s2)));color:var(--t1);text-align:start;cursor:pointer;transition:.16s}.pi-source:hover{transform:translateY(-2px);border-color:var(--ac);box-shadow:0 12px 26px rgba(0,0,0,.2)}.pi-source i{font-size:27px;color:var(--ac)}.pi-source strong{display:block;font-size:14px;margin:14px 0 6px}.pi-source span{display:block;color:var(--t2);font-size:11.5px;line-height:1.55}.pi-source em{display:inline-flex;margin-top:12px;padding:3px 8px;border-radius:999px;background:var(--s3);color:var(--t3);font:500 9px var(--font-mono);font-style:normal}
.pi-drop{margin-top:13px;padding:18px;border:1px dashed color-mix(in srgb,var(--ac) 40%,var(--b2));border-radius:15px;text-align:center;color:var(--t3);font-size:11.5px;transition:.15s}.pi-drop.drag{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 8%,transparent);color:var(--t1)}
.pi-progress{display:none;margin-top:16px;padding:16px;border:1px solid var(--b1);border-radius:15px;background:var(--s2)}.pi-progress.show{display:block}.pi-progress-top{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;color:var(--t2);margin-bottom:9px}.pi-progress-track{height:7px;border-radius:999px;background:var(--s3);overflow:hidden}.pi-progress-fill{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--ac),var(--gr));border-radius:inherit;transition:width .2s}.pi-progress-note{margin-top:8px;color:var(--t3);font-size:10px}
.pi-review{display:none}.pi-review.show{display:block}.pi-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-bottom:14px}.pi-stat{padding:12px;border-radius:13px;border:1px solid var(--b1);background:var(--s2)}.pi-stat span{font-size:9px;color:var(--t3)}.pi-stat strong{display:block;margin-top:4px;font:700 17px var(--font-mono)}
.pi-warning{display:none;margin-bottom:12px;padding:10px 12px;border-radius:10px;background:color-mix(in srgb,var(--gd) 10%,transparent);border:1px solid color-mix(in srgb,var(--gd) 28%,transparent);color:var(--gd);font-size:11px}.pi-warning.show{display:block}
.pi-table-wrap{overflow:auto;border:1px solid var(--b1);border-radius:15px}.pi-table{width:100%;min-width:920px;border-collapse:collapse;font-size:11px}.pi-table th{position:sticky;top:0;background:var(--s2);color:var(--t3);font-size:9px;text-transform:uppercase;letter-spacing:.5px;padding:10px 8px;border-bottom:1px solid var(--b1);text-align:start}.pi-table td{padding:8px;border-bottom:1px solid var(--b1);vertical-align:middle}.pi-table tr:last-child td{border-bottom:none}.pi-table input,.pi-table select{width:100%;min-width:72px;padding:8px;border-radius:8px;border:1px solid var(--b1);background:var(--s2);color:var(--t1);font:500 11px var(--font-body);outline:none}.pi-table input:focus,.pi-table select:focus{border-color:var(--ac)}.pi-check{width:18px!important;min-width:18px!important;accent-color:var(--ac)}.pi-confidence{display:inline-flex;align-items:center;gap:5px;padding:3px 7px;border-radius:999px;background:color-mix(in srgb,var(--gr) 9%,transparent);color:var(--gr);font:700 9px var(--font-mono);white-space:nowrap}.pi-confidence.mid{color:var(--gd);background:color-mix(in srgb,var(--gd) 10%,transparent)}.pi-del{width:30px;height:30px;border-radius:8px;border:1px solid color-mix(in srgb,var(--rd) 25%,var(--b1));background:color-mix(in srgb,var(--rd) 7%,var(--s2));color:var(--rd);cursor:pointer}
.pi-review-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px}.pi-mode{display:flex;gap:7px;padding:4px;border:1px solid var(--b1);border-radius:12px;background:var(--s2)}.pi-mode label{display:flex;align-items:center;gap:6px;padding:8px 11px;border-radius:9px;color:var(--t2);font-size:11px;cursor:pointer}.pi-mode label:has(input:checked){background:var(--ac);color:#fff}.pi-mode input{display:none}.pi-actions{display:flex;gap:8px}.pi-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 14px;border-radius:11px;border:1px solid var(--b1);background:var(--s2);color:var(--t1);font:700 12px var(--font-body);cursor:pointer}.pi-btn.primary{background:var(--ac);border-color:var(--ac);color:#fff}.pi-btn.primary:hover{filter:brightness(1.08)}.pi-btn:disabled{opacity:.5;cursor:not-allowed}
.pi-raw{margin-top:12px}.pi-raw summary{cursor:pointer;color:var(--t3);font-size:10px}.pi-raw textarea{width:100%;min-height:110px;margin-top:8px;padding:10px;border:1px solid var(--b1);border-radius:10px;background:var(--s2);color:var(--t2);font:10px var(--font-mono);direction:ltr;text-align:left;resize:vertical}
.welcome-import{margin-top:9px;display:flex;align-items:center;justify-content:center;gap:7px;width:100%;padding:11px;border-radius:11px;border:1px solid color-mix(in srgb,var(--ac) 35%,var(--b1));background:color-mix(in srgb,var(--ac) 8%,var(--s2));color:var(--t1);font:700 13px var(--font-body);cursor:pointer}
@media(max-width:720px){.pi-ov{padding:0;align-items:flex-end}.pi-modal{width:100%;max-height:96vh;border-radius:22px 22px 0 0}.pi-body{padding:15px}.pi-source-grid{grid-template-columns:1fr}.pi-source{min-height:0}.pi-summary{grid-template-columns:1fr 1fr}.pi-review-actions{align-items:stretch}.pi-mode,.pi-actions{width:100%}.pi-mode label,.pi-actions .pi-btn{flex:1}.pi-title p{display:none}}


/* ════════════════════════════════════════════════════════════════
   SETTINGS CENTER · notifications and future account tools
   ════════════════════════════════════════════════════════════════ */
.settings-gear-btn i { font-size: 16px; transition: transform .28s ease; }
.settings-gear-btn:hover i { transform: rotate(38deg); }
.settings-ov { position:fixed; inset:0; z-index:1200; display:none; align-items:center; justify-content:center; padding:24px; background:color-mix(in srgb,var(--bg) 76%,transparent); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.settings-ov.open { display:flex; animation:fadeIn .18s ease; }
.settings-shell { width:min(1050px,calc(96vw / var(--app-zoom,1))); height:min(760px,calc(91vh / var(--app-zoom,1))); display:grid; grid-template-columns:230px minmax(0,1fr); overflow:hidden; background:linear-gradient(145deg,color-mix(in srgb,var(--ac) 5%,var(--s1)),var(--s1)); border:1px solid var(--b2); border-radius:24px; box-shadow:0 34px 100px rgba(0,0,0,.56); }
.settings-side { display:flex; flex-direction:column; padding:22px 16px; border-inline-end:1px solid var(--b1); background:color-mix(in srgb,var(--s2) 72%,transparent); }
.settings-brand { display:flex; align-items:center; gap:11px; padding:4px 8px 20px; }
.settings-brand-icon { width:38px; height:38px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb,var(--ac) 16%,transparent); border:1px solid color-mix(in srgb,var(--ac) 34%,transparent); color:var(--ac); font-size:20px; }
.settings-brand strong { display:block; font-size:15px; color:var(--t1); }
.settings-brand span { display:block; margin-top:3px; font-size:10px; color:var(--t3); }
.settings-nav { display:flex; flex-direction:column; gap:7px; }
.settings-nav-btn { width:100%; display:flex; align-items:center; gap:10px; padding:11px 12px; border:1px solid transparent; border-radius:12px; background:transparent; color:var(--t2); font:600 12.5px var(--font-body); text-align:start; cursor:pointer; transition:all .15s; }
.settings-nav-btn i { width:19px; font-size:18px; color:var(--t3); }
.settings-nav-btn:hover { color:var(--t1); background:var(--s3); }
.settings-nav-btn.active { color:var(--t1); background:color-mix(in srgb,var(--ac) 13%,var(--s3)); border-color:color-mix(in srgb,var(--ac) 30%,var(--b1)); }
.settings-nav-btn.active i { color:var(--ac); }
.settings-nav-btn.soon { opacity:.48; cursor:default; }
.settings-nav-btn.soon em { margin-inline-start:auto; padding:2px 6px; border-radius:999px; background:var(--s3); color:var(--t3); font:700 8px var(--font-mono); font-style:normal; }
.settings-side-foot { margin-top:auto; padding:14px 10px 2px; border-top:1px solid var(--b1); color:var(--t3); font-size:9.5px; line-height:1.55; }
.settings-main { min-width:0; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
.settings-head { min-height:80px; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:18px 24px; border-bottom:1px solid var(--b1); }
.settings-head h2 { font-size:21px; font-weight:800; color:var(--t1); margin:0; }
.settings-head p { margin:4px 0 0; color:var(--t3); font-size:11px; }
.settings-close { width:36px; height:36px; flex:0 0 36px; border-radius:11px; border:1px solid var(--b1); background:var(--s2); color:var(--t2); cursor:pointer; font-size:16px; }
.settings-close:hover { color:var(--t1); border-color:var(--ac); }
.settings-scroll { flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:22px 24px 30px; }
.settings-scroll::-webkit-scrollbar { width:4px; }.settings-scroll::-webkit-scrollbar-thumb { background:var(--s3); border-radius:99px; }
.settings-panel { display:none; }.settings-panel.active { display:block; animation:fadeSlide .18s ease; }
.notify-hero { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(250px,.85fr); gap:14px; margin-bottom:16px; }
.notify-master-card,.notify-summary-card,.notify-card,.notify-email-card,.notify-info { border:1px solid var(--b1); border-radius:17px; background:color-mix(in srgb,var(--s2) 76%,transparent); }
.notify-master-card { display:flex; align-items:center; gap:15px; min-height:126px; padding:20px; background:linear-gradient(135deg,color-mix(in srgb,var(--ac) 13%,var(--s2)),var(--s2)); }
.notify-master-icon { width:50px; height:50px; flex:0 0 50px; border-radius:15px; display:flex; align-items:center; justify-content:center; font-size:24px; color:var(--ac); background:color-mix(in srgb,var(--ac) 15%,transparent); border:1px solid color-mix(in srgb,var(--ac) 30%,transparent); }
.notify-master-copy { flex:1; min-width:0; }.notify-master-copy strong { display:block; font-size:16px; color:var(--t1); }.notify-master-copy span { display:block; margin-top:6px; max-width:520px; color:var(--t2); font-size:11.5px; line-height:1.55; }
.notify-summary-card { padding:18px; }.notify-summary-label { color:var(--t3); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; }.notify-summary-count { margin-top:8px; font:800 30px var(--font-mono); color:var(--t1); }.notify-summary-count span { color:var(--ac); }.notify-summary-text { margin-top:5px; color:var(--t2); font-size:11px; }.notify-summary-bars { display:flex; gap:5px; margin-top:15px; }.notify-summary-bars i { flex:1; height:5px; border-radius:99px; background:var(--s3); }.notify-summary-bars i.on { background:var(--ac); box-shadow:0 0 12px color-mix(in srgb,var(--ac) 35%,transparent); }
.notify-section-title { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:20px 2px 10px; }.notify-section-title strong { font-size:13.5px; color:var(--t1); }.notify-section-title span { color:var(--t3); font-size:10px; }
.notify-email-card { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:end; padding:16px; }
.notify-field label { display:block; margin-bottom:7px; color:var(--t2); font-size:10.5px; font-weight:700; }.notify-field input { width:100%; height:42px; padding:0 12px; border:1px solid var(--b1); border-radius:11px; outline:none; background:var(--s1); color:var(--t1); font:500 12px var(--font-body); direction:ltr; text-align:left; }.notify-field input:focus { border-color:var(--ac); box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 12%,transparent); }
.notify-account-chip { min-height:42px; display:flex; align-items:center; gap:7px; padding:0 12px; border:1px solid var(--b1); border-radius:11px; background:var(--s3); color:var(--t2); font-size:10.5px; white-space:nowrap; }.notify-account-chip i { color:var(--gr); font-size:15px; }
.notify-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
.notify-card { position:relative; display:flex; align-items:center; gap:13px; min-height:104px; padding:15px; transition:opacity .15s,border-color .15s,transform .15s; }.notify-card:hover { border-color:color-mix(in srgb,var(--ac) 34%,var(--b1)); transform:translateY(-1px); }.notify-card.disabled-by-master { opacity:.46; }
.notify-card-icon { width:42px; height:42px; flex:0 0 42px; border-radius:13px; display:flex; align-items:center; justify-content:center; background:var(--s3); color:var(--ac); font-size:20px; }.notify-card-copy { flex:1; min-width:0; }.notify-card-copy strong { display:block; font-size:13px; color:var(--t1); }.notify-card-copy span { display:block; margin-top:5px; color:var(--t3); font-size:10px; line-height:1.45; }.notify-card-copy em { display:inline-flex; align-items:center; gap:4px; margin-top:7px; padding:3px 7px; border-radius:999px; background:color-mix(in srgb,var(--gd) 10%,transparent); color:var(--gd); font:700 8.5px var(--font-mono); font-style:normal; }
.v-switch { position:relative; width:44px; height:25px; flex:0 0 44px; cursor:pointer; }.v-switch input { position:absolute; opacity:0; pointer-events:none; }.v-switch-track { position:absolute; inset:0; border-radius:99px; background:var(--s3); border:1px solid var(--b2); transition:all .18s; }.v-switch-track::after { content:''; position:absolute; width:17px; height:17px; top:3px; right:3px; border-radius:50%; background:var(--t3); box-shadow:0 2px 7px rgba(0,0,0,.35); transition:all .18s; }.v-switch input:checked + .v-switch-track { background:color-mix(in srgb,var(--ac) 80%,#17295f); border-color:var(--ac); }.v-switch input:checked + .v-switch-track::after { right:22px; background:#fff; }.v-switch input:disabled + .v-switch-track { opacity:.5; cursor:not-allowed; }
.notify-info { display:flex; gap:12px; margin-top:14px; padding:14px 16px; background:color-mix(in srgb,var(--gd) 7%,var(--s2)); border-color:color-mix(in srgb,var(--gd) 24%,var(--b1)); }.notify-info i { color:var(--gd); font-size:19px; flex:0 0 auto; }.notify-info strong { display:block; color:var(--t1); font-size:11px; }.notify-info p { margin:4px 0 0; color:var(--t2); font-size:10px; line-height:1.55; }
.notify-actions { position:sticky; bottom:-30px; display:flex; align-items:center; justify-content:space-between; gap:12px; margin:22px -24px -30px; padding:15px 24px; border-top:1px solid var(--b1); background:color-mix(in srgb,var(--s1) 91%,transparent); backdrop-filter:blur(14px); }.notify-save-state { min-height:18px; color:var(--t3); font-size:10px; }.notify-save-state.ok { color:var(--gr); }.notify-save-state.err { color:var(--rd); }.notify-save-btn { min-width:146px; display:flex; align-items:center; justify-content:center; gap:7px; padding:11px 16px; border:1px solid var(--ac); border-radius:11px; background:var(--ac); color:#fff; font:800 12px var(--font-body); cursor:pointer; }.notify-save-btn:hover { filter:brightness(1.08); }.notify-save-btn:disabled { opacity:.6; cursor:wait; }
body.light .settings-shell { box-shadow:0 30px 85px rgba(23,38,74,.18); }.settings-empty-panel { padding:50px 20px; text-align:center; color:var(--t3); }.settings-empty-panel i { display:block; margin-bottom:12px; font-size:38px; color:var(--ac); }.settings-empty-panel strong { display:block; color:var(--t1); font-size:17px; }.settings-empty-panel span { display:block; margin-top:8px; font-size:11px; }
/* The whole app can be zoomed for accessibility. On mobile the settings sheet
   must compensate for that zoom or its 100% width becomes wider than the viewport. */
@media (max-width:760px) {
  .settings-ov {
    inset:0 auto auto 0;
    width:calc(100vw / var(--app-zoom,1));
    height:calc(100vh / var(--app-zoom,1));
    height:calc(100dvh / var(--app-zoom,1));
    padding:0;
    align-items:stretch;
    justify-content:stretch;
    overflow:hidden;
  }
  .settings-shell {
    width:100%;
    max-width:100%;
    height:100%;
    max-height:100%;
    grid-template-columns:minmax(0,1fr);
    border-radius:0;
  }
  .settings-side {
    min-width:0;
    flex:0 0 auto;
    padding:calc(10px + env(safe-area-inset-top)) 12px 8px;
    border-inline-end:none;
    border-bottom:1px solid var(--b1);
  }
  .settings-brand { min-width:0; padding:0 2px 8px; }
  .settings-brand-icon { width:32px; height:32px; flex:0 0 32px; }
  .settings-brand span { display:none; }
  .settings-nav {
    width:100%;
    max-width:100%;
    flex-direction:row;
    gap:6px;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scrollbar-width:none;
  }
  .settings-nav::-webkit-scrollbar { display:none; }
  .settings-nav-btn {
    width:auto;
    flex:0 0 auto;
    white-space:nowrap;
    padding:8px 10px;
  }
  .settings-nav-btn i { width:auto; font-size:17px; }
  .settings-nav-btn.soon,
  .settings-side-foot { display:none; }
  .settings-main {
    width:100%;
    max-width:100%;
    min-width:0;
  }
  .settings-head {
    min-height:60px;
    flex:0 0 auto;
    padding:11px 14px;
  }
  .settings-head > div { min-width:0; }
  .settings-head h2 { font-size:17px; }
  .settings-head p {
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:10px;
  }
  .settings-close { width:34px; height:34px; flex-basis:34px; }
  .settings-scroll {
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    overflow-x:hidden;
    padding:14px 12px 22px;
  }
  .settings-panel,
  .notify-hero,
  .notify-master-card,
  .notify-summary-card,
  .notify-email-card,
  .notify-grid,
  .notify-card,
  .notify-info {
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
  }
  .notify-hero {
    grid-template-columns:minmax(0,1fr);
    gap:10px;
    margin-bottom:14px;
  }
  .notify-master-card {
    min-height:0;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:start;
    gap:10px;
    padding:14px;
  }
  .notify-master-icon { display:none; }
  .notify-master-copy strong { font-size:14px; }
  .notify-master-copy span {
    max-width:none;
    font-size:10.5px;
    line-height:1.45;
    overflow-wrap:anywhere;
  }
  .notify-summary-card { padding:14px; }
  .notify-summary-count { font-size:27px; }
  .notify-section-title { min-width:0; margin:17px 2px 9px; }
  .notify-section-title span {
    min-width:0;
    max-width:46%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .notify-email-card {
    grid-template-columns:minmax(0,1fr);
    padding:13px;
  }
  .notify-field,
  .notify-field input { min-width:0; box-sizing:border-box; }
  .notify-account-chip { display:none; }
  .notify-grid {
    grid-template-columns:minmax(0,1fr);
    gap:9px;
  }
  .notify-card {
    grid-template-columns:38px minmax(0,1fr) auto;
    display:grid;
    min-height:0;
    gap:10px;
    padding:12px;
  }
  .notify-card-icon {
    width:38px;
    height:38px;
    flex-basis:38px;
    border-radius:11px;
    font-size:18px;
  }
  .notify-card-copy span,
  .notify-card-copy em,
  .notify-info p { overflow-wrap:anywhere; }
  .notify-info { padding:12px 13px; }
  .notify-actions {
    bottom:-22px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    margin:18px -12px -22px;
    padding:12px 12px calc(12px + env(safe-area-inset-bottom));
  }
  .notify-save-state {
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .notify-save-btn {
    min-width:122px;
    flex:0 0 auto;
    padding:10px 13px;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   BRAND BOOK 2026 · ALIGNMENT LAYER
   Applies the brand book verbatim: mark & wordmark, four type roles,
   glass material, card signature, button hierarchy, motion, iconography.
   Loaded last so it wins over the historical rules above.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* Glass — brand book §08 (dark direction) */
  --glass-grad: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.025));
  --glass-grad-hover: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.04));
  --glass-blur: blur(22px) saturate(125%);
  --glass-bd: rgba(255,255,255,.12);
  --glass-bd-hover: rgba(255,255,255,.22);
  --glass-shadow: 0 24px 48px -12px rgba(0,0,0,.50), 0 12px 24px -6px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06);
  /* Radii — brand book §07 */
  --radius: 20px;      /* cards */
  --radius-row: 16px;  /* rows / tiles */
  --radius-sm: 14px;   /* buttons */
  --radius-chip: 11px; /* chips, icon tiles */
  --radius-mark: 9px;  /* the mark */
}
body.light{
  --glass-grad: linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,.16));
  --glass-grad-hover: linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.28));
  --glass-blur: blur(24px) saturate(180%);
  --glass-bd: rgba(255,255,255,.70);
  --glass-bd-hover: rgba(255,255,255,.90);
  --glass-shadow: 0 20px 40px rgba(11,30,63,.14), inset 0 1px 0 rgba(255,255,255,.85);
}

/* ── §02 LOGO & MARK ──────────────────────────────────────────────
   F-style construction: glyph + decimal point inside a FILLED voltage square,
   radius 9px, Red Hat Display 800, letter-spacing −1px. Never outline-only.
   Direction swap (light): square → circle, the decimal dot is dropped.       */
.logo-m, .lock-logo{
  font-family: var(--font-logo) !important;
  font-weight: 800 !important;
  font-style: normal !important;
  letter-spacing: -1px !important;
  background: var(--ac) !important;
  color: #F1F4FB !important;
}
/* radius scales with the mark: 9px @ 34px, 18px @ 64px — same optical corner */
.logo-m{ width:34px; height:34px; font-size:19px; border-radius: var(--radius-mark) !important; }
.lock-logo{ border-radius:18px !important; font-size:32px !important; letter-spacing:-1.5px !important; }
body.light .logo-m, body.light .lock-logo{ border-radius:50% !important; color:#F5F7FB !important; letter-spacing:0 !important; }
.logo-t, .lock-title{
  font-family: var(--font-logo) !important;
  font-weight: 700 !important;
  letter-spacing: -0.8px !important;
  font-style: normal !important;
}
.logo-t span{ color: var(--t3); font-weight:700; }

/* ── §05 TYPOGRAPHY · four families, one job each ────────────────
   Red Hat Display = wordmark only. Instrument Serif = display/titles
   (Hebrew falls back to Assistant SemiBold — font-synthesis off so the
   Latin serif is never faux-bolded). Geist/Assistant/Rubik = body at 300.
   Geist Mono = every number, tabular.                                */
.sec-t, .ins-title, .mh h2, .ed-t, .view-modal-title, .empty-cat-title,
.fx-conv-title, .news-item-title, .news-reader-title, .lots-history-title h3,
.fc-title, .welcome-title{
  font-family: 'Instrument Serif', 'Assistant', serif;
  font-weight: 600;
  font-synthesis: none;
  -webkit-font-synthesis: none;
}
/* Ticker symbols are data, not display type → Geist Mono, never italic. */
.tic, .ar-sym, .rank-sym, .erow-sym, .tk-sym, .ac-sym, .dist-l, .news-item-sym{
  font-family: 'Geist Mono', monospace !important;
  font-style: normal !important;
  font-weight: 500 !important;
  letter-spacing: -0.2px;
}
/* Every amount, percentage and price — tabular figures so columns align
   identically in Hebrew and Latin layouts (§05·B mixed text). */
.t-val, .t-pnl, .vv, .pp, .pn, .pi, .badge, .mkpi-v, .s-val, .psc-val,
.fc-kpi-v, .fc-projection-amount, #grandNum, .grand-digit, .avg-toggle-val,
.lot-row input, .ar-price, .rank-val, .stat-v{
  font-family: var(--font-mono) !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'cv01' 1;
}
/* Hero label is UI copy, not a serif title. */
.t-lbl{ font-family:'Geist','Assistant','Rubik',sans-serif !important; font-weight:400; font-size:15px; letter-spacing:.06em; }
.ct2, .pl{ font-family:'Geist','Assistant','Rubik',sans-serif; }

/* ── §07 CARDS · radius 20px + 4px voltage line on the leading edge ──
   The signature line exists in BOTH directions — the brand book changes
   colour values between modes, never structure.                        */
.total{ border-radius: var(--radius); }
/* No voltage bar on the hero value card — the signature line stays on the asset
   cards (.cg), where it carries meaning. Removed in BOTH directions. */
.total::before{ display:none !important; }
.cg{ width:4px !important; left:auto !important; inset-inline-start:0 !important; opacity:.9 !important; }

/* ── §08 GLASS & MATERIAL · top-level card only, rows stay transparent ── */
.card{
  background: var(--glass-grad) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-bd) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--glass-shadow) !important;
}
.card:hover{
  background: var(--glass-grad-hover) !important;
  border-color: var(--glass-bd-hover) !important;
}
/* Rows inside a card are transparent — never a second glass layer. */
.arow{ border-radius: var(--radius-row); }
.card .arow, .card .erow, .card .lot-row, .card .view-row{
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.ico, .ar-ico{ border-radius: var(--radius-chip) !important; }
.fc-card{ border-radius: var(--radius) !important; }
.fc-kpi{ border-radius: var(--radius-row) !important; }

/* ── §07 BUTTONS · primary = solid Voltage, corners 14px ──────────── */
.fsave, .fadd, .fc-btn.primary, .sync-btn.primary, .sell-btn, .date-go, .view-done-btn{
  background: var(--ac) !important;
  border: 1px solid var(--ac) !important;
  border-radius: var(--radius-sm) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--ac) 26%, transparent);
}
body.light .fsave, body.light .fadd, body.light .sell-btn,
body.light .view-done-btn, body.light .date-go{
  background: var(--ac) !important; border-color: var(--ac) !important; color:#fff !important;
}
.fsave:hover, .fadd:hover, .fc-btn.primary:hover{ filter: brightness(1.07); opacity:1; }
/* Secondary = paper 9% on 14% border. Ghost = voltage outline. Same 14px corner. */
.fc-btn, .sync-btn:not(.primary), .sell-cancel, .lots-toggle, .refresh-pill{
  border-radius: var(--radius-sm) !important;
}
.fc-btn:not(.primary){ background: rgba(241,244,251,.09) !important; border:1px solid rgba(241,244,251,.14) !important; color: var(--t1) !important; }
body.light .fc-btn:not(.primary){ background: rgba(10,15,31,.05) !important; border-color: rgba(10,15,31,.12) !important; }

/* ── §03/§04 BRASS is decoration only (FX / PRO), never an action colour ── */
.fadd, .fsave, body.light .fadd, body.light .fsave{ background: var(--ac) !important; }

/* ── §07 LOADING · voltage-tinted shimmer, never spinners ──────────── */
.spinner, .fi-spin, .refresh-pill-spin{
  border: none !important;
  border-radius: 999px !important;
  animation: none !important;
}
.spinner{
  width: 46px !important; height: 6px !important;
  background: linear-gradient(90deg,
      color-mix(in srgb, var(--ac) 12%, transparent) 25%,
      color-mix(in srgb, var(--ac) 55%, transparent) 50%,
      color-mix(in srgb, var(--ac) 12%, transparent) 75%) !important;
  background-size: 200% 100% !important;
  animation: sk 1.4s linear infinite !important;
  display: inline-block; vertical-align: middle;
}
.refresh-pill-spin{
  width: 8px !important; height: 8px !important;
  background: var(--ac) !important;
  animation: livePulse 1.8s ease-in-out infinite !important;
}
.load-dot{
  display:inline-block; width:8px; height:8px; border-radius:50%;
  background: var(--ac); vertical-align:-1px; margin-inline-end:8px;
  animation: livePulse 1.8s ease-in-out infinite;
}
/* Skeletons carry a voltage tint in the sweep — brand book §09, 1.4s. */
.skel{ background: linear-gradient(90deg, var(--s2) 25%, color-mix(in srgb, var(--ac) 22%, var(--s2)) 50%, var(--s2) 75%) !important; background-size:200% 100% !important; animation: sk 1.4s infinite linear !important; }

/* ── §09 MOTION ────────────────────────────────────────────────────── */
@keyframes livePulse{ 0%,100%{ opacity:.4; transform:scale(.85);} 50%{ opacity:1; transform:scale(1.15);} }
.dot, .lb-dot, .fc-live-dot{ animation: livePulse 1.8s ease-in-out infinite !important; }
/* The glass sweep belongs to .card-loading only — a card that is actually fetching
   (a newly added asset, a refresh). It is never an idle decoration on the hero value. */

/* ── §10 ICONOGRAPHY · Phosphor Thin only, inherits t2 ─────────────── */
[class*="ph-thin"]{ color: inherit; }
.ico i, .ar-ico i, .ni i, .sec-t i{ color: var(--t2); }
.ni.active i, .rb.active i, .pb2.active i, .fc-section-title i{ color: var(--ac); }

/* ── §07 KPI TILES · exactly the brand-book card ───────────────────
   label (t2 + thin icon) → value in Voltage, Geist Mono → weight sub →
   6px track, radius 99px, Voltage fill. No invented per-category accents:
   green/red stay reserved for market semantics, brass for FX/PRO only. */
.stat{
  background: var(--glass-grad) !important;
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-bd) !important;
  border-radius: var(--radius) !important;
  padding: 18px 20px !important;
}
.stat-click:hover{ border-color: color-mix(in srgb, var(--ac) 55%, var(--glass-bd)) !important; box-shadow: 0 12px 28px -10px color-mix(in srgb, var(--ac) 40%, transparent) !important; }
.s-lbl{ color: var(--t2) !important; font-weight: 400 !important; letter-spacing: 0 !important; text-transform: none !important; display:flex; align-items:center; gap:8px; }
.s-lbl i{ color: var(--t2) !important; font-size: 17px; order:1; margin-inline-start:auto; }
.stat .s-val{ color: var(--ac) !important; letter-spacing: -0.5px; }
#bestKpi{ color: var(--gr) !important; }   /* market semantics — a real gain */
#worstKpi{ color: var(--rd) !important; }  /* market semantics — a real loss */
#fxKpi{ color: var(--gd) !important; }     /* brass: FX garnish, per brand book */
.s-sub{ color: var(--t2) !important; }
.stat .bar{ height:6px !important; border-radius:99px !important; background: rgba(241,244,251,.10) !important; overflow:hidden; margin-top:14px; }
body.light .stat .bar{ background: rgba(11,30,63,.10) !important; }
.stat .bar-f{ height:100% !important; border-radius:99px !important; background: var(--ac) !important; }
/* Desktop hero: the 4px voltage line lives on the outer card, not the inner block. */
@media (min-width: 640px){
  .hero-block{ position:relative; overflow:hidden;
    background: var(--glass-grad) !important;
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border:1px solid var(--glass-bd) !important; border-radius: var(--radius) !important;
    box-shadow: var(--glass-shadow) !important; }
  .hero-block .stat{ background: transparent !important; backdrop-filter:none; -webkit-backdrop-filter:none;
                     border-color: var(--b1) !important; }
}

/* ── PRE / POST MARKET · collapsible strip under "מניות וניירות ערך" ──
   Same anatomy as "סיכום ביצועים לפי תקופה": head row that opens a body.
   Proportions of the original card are preserved. */
.ext-session{
  display:none; margin: 0 0 12px; padding: 14px 16px;
  background: var(--s1); border: 1px solid var(--b1); border-radius: var(--radius);
}
body.light .ext-session{ background: var(--s1); border-color: var(--b1); }
.ext-session.show{ display:block; animation: extSlideIn .24s ease; }
.ext-session-toggle-row{ cursor:pointer; user-select:none; }
.ext-session-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.ext-session-numbers{ margin-top:0 !important; margin-inline-start:auto; align-items:baseline; }
.ext-session-toggle{ margin-inline-start:0; }
.ext-session-toggle i{ font-size:15px; }
.ext-session-body{ overflow:hidden; max-height:0; opacity:0; transition: max-height .28s ease, opacity .2s ease, margin .2s; }
.ext-session.details-open .ext-session-body{ max-height:900px; opacity:1; margin-top:10px; }
.ext-session-meta{ margin-top:0 !important; }
@media (max-width: 640px){
  .ext-session{ padding:12px 13px; }
  .ext-session-numbers{ width:100%; margin-inline-start:0; justify-content:flex-end; }
}

/* ── LIGHT DIRECTION · brass legibility ───────────────────────────
   Brass on a bright surface reads as muddy orange, so in the light
   direction the VALUE is set in ink and brass survives only as the
   tint/border of a chip. Dark direction keeps brass as-is. */
body.light{ --gd: #7A5A14; }
body.light .mkpi-v.gd,
body.light .lots-panel-avg,
body.light .lots-history-title .avg-pill,
body.light .fc-kpi-v.gd,
body.light .avg-toggle-val,
body.light #fxKpi,
body.light .ext-session-note,
body.light .fc-disclaimer-inline,
body.light .pi-warning{ color: var(--t1) !important; }
body.light .lots-history-title .avg-pill{
  background: color-mix(in srgb, var(--gd) 10%, transparent);
  border-color: color-mix(in srgb, var(--gd) 26%, transparent);
}
body.light .card-ext-chip{ color: var(--t1); background: color-mix(in srgb, var(--gd) 12%, transparent); border-color: color-mix(in srgb, var(--gd) 26%, transparent); }
body.light .card-ext-chip.post{ color: var(--ac); background: color-mix(in srgb, var(--ac) 10%, transparent); border-color: color-mix(in srgb, var(--ac) 26%, transparent); }
body.light .card-unavailable::before{ color: var(--t2); background: color-mix(in srgb, var(--t3) 10%, transparent); border-color: color-mix(in srgb, var(--t3) 24%, transparent); }
body.light .tm{ color: var(--t1); background: color-mix(in srgb, var(--gd) 12%, transparent); border-color: color-mix(in srgb, var(--gd) 26%, transparent); }
body.light .ext-session-meta b{ color: var(--t1); }

/* ── LIGHT DIRECTION · deeper semantics ────────────────────────────
   On a bright surface the mid-tone green/red/brass read washed out and
   orange-ish, so the light direction runs a darker set. Dark is unchanged. */
body.light{
  --gr: #05532E;   /* deep forest — gains */
  --rd: #8C0F22;   /* deep crimson — losses */
  --gd: #5C4410;   /* deep bronze — FX / PRO garnish only */
}
body.light .badge.up, body.light .fc-upside, body.light .fc-rating.buy,
body.light .ext-session-pct.up{ background: color-mix(in srgb, var(--gr) 10%, transparent); }
body.light .badge.dn, body.light .fc-upside.dn, body.light .fc-rating.sell,
body.light .ext-session-pct.dn{ background: color-mix(in srgb, var(--rd) 9%, transparent); }
body.light .fc-rating.hold{ color: var(--t1); background: color-mix(in srgb, var(--gd) 11%, transparent); }

/* ── FORECAST PAGE · Assistant everywhere ──────────────────────────
   The mono/serif mix read poorly in this dense table; Assistant carries
   both Hebrew and Latin here, with tabular figures so columns still line up. */
#page-forecast, #page-forecast *:not(i):not([class*="ph-"]){
  font-family: 'Assistant', 'Geist', sans-serif !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
#page-forecast .fc-title{ font-weight: 700 !important; letter-spacing: -1px; }
#page-forecast .fc-asset-symbol{ font-weight: 700 !important; letter-spacing: .2px; font-size: 13px; }
#page-forecast .fc-asset-name{ font-size: 10.5px; }
#page-forecast .fc-table th{ font-size: 10.5px; font-weight: 600; letter-spacing: 0; }
#page-forecast .fc-table td{ font-size: 12.5px; }
#page-forecast .fc-money, #page-forecast .fc-target,
#page-forecast .fc-upside, #page-forecast .fc-kpi-v,
#page-forecast .fc-projection-amount{ font-weight: 700 !important; }
#page-forecast .fc-eyebrow{ letter-spacing: .12em; font-weight: 600 !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   v34.8 · UI PASS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── §9 · USD-RATE FIELD (topbar) ─────────────────────────────────────
   Was 42px wide with the browser's native number spinners on top, so a
   4-decimal rate got clipped and the spinner drew a bar across the digits. */
.fx-rate-input::-webkit-outer-spin-button,
.fx-rate-input::-webkit-inner-spin-button{ -webkit-appearance:none; appearance:none; margin:0; }
.fx-rate-input{ -moz-appearance:textfield; appearance:textfield; text-align:center; letter-spacing:-.2px; }

/* ── §5/§6 · ADD-ASSET PANEL ──────────────────────────────────────────
   Collapsible, closed by default, and opaque enough in the light direction
   to read as a real surface rather than a grey wash. */
.aform{ padding:0; }
.af-t{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin:0; padding:13px 14px; cursor:pointer; user-select:none;
  border:0; background:transparent; color:var(--t1);
  font-family:var(--font-body); font-size:12.5px; font-weight:700;
  text-transform:none; letter-spacing:0; text-align:start;
}
.af-t span{ display:flex; align-items:center; gap:8px; }
.af-t i{ font-size:16px; color:var(--ac); }
.af-caret{ color:var(--t3) !important; font-size:14px !important; transition:transform .2s ease; }
.aform.open .af-caret{ transform:rotate(180deg); }
.af-body{
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .3s cubic-bezier(.4,0,.2,1), opacity .2s ease, padding .25s ease;
  padding:0 14px;
}
/* Open state must NOT clip: the symbol autocomplete (.ac-box) is absolutely
   positioned and would be cut off by the collapse container. */
.aform.open .af-body{ max-height:1400px; opacity:1; padding:2px 14px 14px; overflow:visible; }
body.light .aform{
  background:#FFFFFF !important;
  border:1px solid rgba(11,30,63,.16) !important;
  box-shadow:0 6px 18px rgba(11,30,63,.07);
}
body.light .af-t{ color:var(--t1); }

/* ── §7 · LIGHT DIRECTION · no unreadable grey ────────────────────────
   The tertiary tone was a mid-grey that vanished on white at 9–10px. Both
   support tones are deepened, and the few places that hardcode a faded
   grey are pulled back onto the tokens. */
body.light{
  --t2: #1C2540;   /* secondary — near-ink */
  --t3: #33405E;   /* captions, labels, units — still distinct, now readable */
}
body.light .ff label,
body.light .s-sub, body.light .vq, body.light .pl,
body.light .nam, body.light .fc-kpi-l, body.light .fc-kpi-s,
body.light .fc-asset-name, body.light .fc-section-sub,
body.light .ext-session-meta, body.light .map-cell-sub,
body.light .mkpi-l, body.light .ed-s{ color:var(--t3) !important; }
body.light .fc-table th, body.light .fc-source{ color:var(--t2) !important; }
/* Placeholders were the faintest thing on the screen. */
body.light input::placeholder, body.light textarea::placeholder{ color:#7A85A0 !important; opacity:1; }
/* Anything still asking for a hardcoded pale grey in the light direction. */
body.light [style*="color:var(--t3)"]{ color:var(--t3) !important; }

/* ── §4 · PRE / POST-MARKET STRIP · larger type in the table ──────────
   The detail rows were 10px — too small to scan against the numbers above. */
.ext-session-title{ font-size:13.5px; }
.ext-session-meta{ font-size:11px; }
.ext-session-toggle{ font-size:12px; }
.ext-detail-row{ font-size:13px; padding:9px 8px; }
.ext-detail-symbol{ font-size:13.5px; }
.ext-detail-price{ font-size:12.5px; }
.ext-detail-impact{ font-size:13px; }
.ext-session-details{ margin-top:12px; padding-top:10px; gap:2px; }
@media (max-width:640px){
  .ext-session-title{ font-size:12.5px; }
  .ext-session-meta{ font-size:10.5px; }
  .ext-detail-row{ font-size:12px; padding:8px 4px; }
  .ext-detail-symbol{ font-size:12.5px; }
  .ext-detail-price{ font-size:11.5px; }
}

/* ── §3 · FORECAST PAGE · same material as the dashboard ──────────────
   It was running its own gradient/blob/24px-radius language. Now it uses the
   dashboard's glass card, section header and KPI tile so the two pages read
   as one product. */
.forecast-page{ padding:0 18px 70px; }
.forecast-shell{ gap:18px; }
.fc-card{
  background: var(--glass-grad) !important;
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border:1px solid var(--glass-bd) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--glass-shadow) !important;
}
.fc-card::before{ display:none !important; }   /* corner radial wash — off */
.fc-hero::after{ display:none !important; }    /* floating blob — off */
.fc-hero{ padding:22px; min-height:0; }
/* Section headers mirror .sec / .sec-t: serif title behind a 3px voltage tick. */
.fc-section-head{ border-bottom:1px solid var(--b1); padding-bottom:9px; margin-bottom:14px; }
.fc-section-title{
  font-family:'Instrument Serif','Assistant',serif !important;
  font-size:20px !important; font-weight:400 !important; letter-spacing:-.2px;
  gap:9px;
}
.fc-section-title i{
  width:3px !important; height:15px !important; font-size:0 !important;
  background:var(--ac); border-radius:1px; flex:0 0 3px;
}
/* KPI tiles = the dashboard's .stat, down to the 6px voltage track. */
.fc-kpi{
  background: var(--tile-grad) !important;
  backdrop-filter: var(--tile-blur); -webkit-backdrop-filter: var(--tile-blur);
  border:1px solid var(--tile-bd) !important;
  border-radius: var(--radius) !important;
  padding:18px 20px !important; min-height:0;
  box-shadow: 0 10px 24px -12px rgba(0,0,0,.45), var(--tile-inset);
}
.fc-kpi-l{ color:var(--t2) !important; font-size:12px !important; font-weight:400 !important; letter-spacing:0 !important; margin-bottom:8px; }
.fc-kpi-v{ font-size:clamp(19px,1.7vw,25px) !important; }
.fc-kpi-s{ color:var(--t2) !important; font-size:11px !important; }
/* Table shell matches a dashboard card instead of a bordered data grid. */
.fc-table-head{ padding:18px 20px 13px; }
.fc-table th{ background:transparent !important; backdrop-filter:none !important; }
.fc-table tbody tr:hover{ background:color-mix(in srgb, var(--ac) 6%, transparent); }
.fc-asset-icon{ border-radius: var(--radius-sm) !important; background: var(--s3) !important; border:1px solid var(--b1); }
.fc-search input, .fc-filter{ border-radius: var(--radius-sm) !important; }
@media (max-width:760px){ .fc-hero{ padding:18px 15px; } .fc-section-title{ font-size:17px !important; } }

/* ── FORECAST + MAP · dark-glass tile ─────────────────────────────────
   The home tile, with a glass finish: a faint white sheen gradient over
   the dark surface, light blur, an inner top highlight, and the soft
   shadow BEHIND. Interaction stays lift + shadow, never a stroke. */
:root{
  /* darker base — matches the effective tone of the home tiles: barely
     above the app background, not the bluer s2 card colour */
  --tile-base: color-mix(in srgb, var(--s1) 55%, var(--bg));
  --tile-grad: linear-gradient(135deg, rgba(255,255,255,.025), rgba(255,255,255,0)), var(--tile-base);
  --tile-grad-on: linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.01)), var(--tile-base);
  --tile-bd: rgba(255,255,255,.055);
  --tile-blur: none;
  --tile-inset: inset 0 1px 0 rgba(255,255,255,.03);
}
body.light{
  --tile-grad: linear-gradient(135deg, rgba(255,255,255,.7), rgba(255,255,255,.42));
  --tile-grad-on: linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,255,255,.6));
  --tile-bd: rgba(11,30,63,.12);
  --tile-blur: none;
  --tile-inset: inset 0 1px 0 rgba(255,255,255,.85);
}
.fc-kpi,
.fc-controls,
.fc-range-label,
.fc-insight,
.fc-model-toggle{
  background: var(--tile-grad) !important;
  backdrop-filter: var(--tile-blur) !important; -webkit-backdrop-filter: var(--tile-blur) !important;
  border: 1px solid var(--tile-bd) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 10px 24px -12px rgba(0,0,0,.45), var(--tile-inset) !important;
}
body.light .fc-kpi, body.light .fc-controls, body.light .fc-range-label,
body.light .fc-insight, body.light .fc-model-toggle{
  box-shadow: 0 10px 24px -12px rgba(11,30,63,.18), var(--tile-inset) !important;
}
/* Clickable scenario tiles — lift + deeper shadow, like the home stat-click */
.fc-range-label{ cursor:pointer; transition: transform .15s, box-shadow .15s, background .15s; }
.fc-range-label:hover{
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -16px rgba(0,0,0,.65), var(--tile-inset) !important;
}
.fc-range-label:active{ transform: translateY(0); }
.fc-range-label.on{
  background: var(--tile-grad-on) !important;
  border-color: var(--tile-bd) !important;
  box-shadow: 0 22px 44px -16px rgba(0,0,0,.7), var(--tile-inset) !important;
}
.fc-range-label.on strong{ color: var(--ac); }
body.light .fc-range-label:hover{ box-shadow: 0 14px 30px -12px rgba(11,30,63,.22), var(--tile-inset) !important; }
body.light .fc-range-label.on{ box-shadow: 0 16px 34px -12px rgba(11,30,63,.26), var(--tile-inset) !important; }
/* Segmented controls (horizons / scenario tabs) — the P&L period-tab style:
   flat strip, quiet text buttons, active = raised pill with a small shadow */
.fc-horizons, .fc-scenario-tabs{
  background: transparent !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border: none !important;
  border-radius: var(--radius-sm, 12px) !important;
  box-shadow: none !important;
  padding: 3px;
}
.fc-horizons button, .fc-scenario-tabs button{
  background: transparent; color: var(--t3); font-weight: 600; border-radius: 9px;
  box-shadow: none; transition: all .15s;
}
.fc-horizons button:hover, .fc-scenario-tabs button:hover{ color: var(--t1); background: var(--s3); }
.fc-horizons button.on, .fc-scenario-tabs button.on{
  background: var(--s1); color: var(--t1); font-weight: 700;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
body.light .fc-horizons button.on, body.light .fc-scenario-tabs button.on{
  background: #fff; color: var(--ac); box-shadow: 0 1px 6px rgba(11,30,63,0.12);
}
.fc-search input, .fc-filter{
  background: var(--tile-grad) !important;
  backdrop-filter: var(--tile-blur) !important; -webkit-backdrop-filter: var(--tile-blur) !important;
  border: 1px solid var(--tile-bd) !important;
}
.fc-search input:focus, .fc-filter:focus{ border-color: var(--ac) !important; }
@media (max-width:760px){
  .fc-table tr{
    background: var(--tile-grad) !important;
    backdrop-filter: var(--tile-blur) !important; -webkit-backdrop-filter: var(--tile-blur) !important;
    border: 1px solid var(--tile-bd) !important;
    border-radius: var(--radius) !important;
    box-shadow: 0 12px 26px -14px rgba(0,0,0,.5), var(--tile-inset);
  }
}

/* ── MAP PAGE · toolbar — same dark-glass tile, shadow behind ────────── */
.map-refresh,
.map-back,
.map-status,
.map-search input{
  background: var(--tile-grad) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border: 1px solid var(--tile-bd) !important;
  box-shadow: 0 8px 18px -10px rgba(0,0,0,.4), var(--tile-inset);
}
body.light .map-refresh,
body.light .map-back, body.light .map-status, body.light .map-search input{
  box-shadow: 0 6px 14px -8px rgba(11,30,63,.14), var(--tile-inset);
}
.map-refresh, .map-back, .map-search input{ border-radius: var(--radius-sm, 12px) !important; }
.map-status{ border-radius: 999px !important; }
/* Scope + intervals — the P&L period-tab style: flat group, active = raised pill */
.map-scope, .map-intervals{
  background: transparent !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border: none !important;
  border-radius: var(--radius-sm, 12px) !important;
  box-shadow: none !important;
}
.map-scope button, .map-intervals button{
  background: transparent; color: var(--t3); font-weight: 600; border-radius: 9px;
  box-shadow: none; transition: all .15s;
}
.map-scope button:hover, .map-intervals button:hover{ color: var(--t1); background: var(--s3); }
.map-scope button.on, .map-intervals button.on{
  background: var(--s1); color: var(--t1); font-weight: 700;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
body.light .map-scope button.on, body.light .map-intervals button.on{
  background: #fff; color: var(--ac); box-shadow: 0 1px 6px rgba(11,30,63,0.12);
}
.map-intervals button.on .mi-h{ color: var(--ac); }
.map-refresh, .map-back{ transition: transform .15s, box-shadow .15s, color .15s; }
.map-refresh:hover, .map-back:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -14px rgba(0,0,0,.6), var(--tile-inset);
  color: var(--t1);
}
.map-refresh:active, .map-back:active{ transform: translateY(0); }
.map-search input:focus{ border-color: var(--ac) !important; }


/* ── Settings · display / accessibility panel ── */
.disp-block{ background: var(--s1); border:1px solid var(--b1); border-radius: var(--radius); padding:18px; display:flex; flex-direction:column; gap:16px; }
.disp-block-head{ display:flex; align-items:flex-start; gap:12px; }
.disp-block-head > i{ font-size:22px; color: var(--ac); margin-top:2px; }
.disp-block-head strong{ display:block; font-size:14px; color:var(--t1); }
.disp-block-head span{ display:block; font-size:12px; color:var(--t3); margin-top:3px; line-height:1.5; }
.disp-scale-preview{ text-align:center; background: var(--s2); border:1px solid var(--b1); border-radius: var(--radius-sm); padding:16px; font-family: var(--font-mono); color: var(--t1); font-size: calc(15px * var(--app-scale-preview, 1)); transition: font-size .15s; }
.disp-scale-row{ display:flex; align-items:center; gap:12px; }
.disp-scale-cap{ color:var(--t3); font-size:12px; font-weight:700; }
.disp-scale-cap.big{ font-size:20px; }
.disp-scale-row input[type=range]{ flex:1; accent-color: var(--ac); cursor:pointer; }
.disp-scale-val{ font-family: var(--font-mono); font-size:12px; color: var(--ac); min-width:44px; text-align:center; background: var(--s2); border:1px solid var(--b1); border-radius:8px; padding:4px 6px; }
.disp-presets{ display:flex; gap:8px; flex-wrap:wrap; }
.disp-preset{ flex:1 1 auto; background: transparent; color: var(--t3); border:none; border-radius:9px; padding:8px 12px; font-family:var(--font-body); font-size:12.5px; font-weight:600; cursor:pointer; transition:all .15s; }
.disp-preset:hover{ color:var(--t1); background: var(--s3); }
.disp-preset.on{ background: var(--s1); color: var(--t1); font-weight:700; box-shadow: 0 1px 4px rgba(0,0,0,.3); border:1px solid var(--b1); }
body.light .disp-preset.on{ background:#fff; color: var(--ac); box-shadow: 0 1px 6px rgba(11,30,63,.12); border-color: rgba(11,30,63,.08); }
.disp-note{ display:flex; align-items:center; gap:7px; color: var(--t3); font-size:11.5px; }
.disp-note i{ color: var(--ac); }

/* ── Settings · profile panel ── */
.prof-card{ display:flex; align-items:center; gap:16px; background: var(--s1); border:1px solid var(--b1); border-radius: var(--radius); padding:18px; }
.prof-avatar{ width:64px; height:64px; border-radius:50%; overflow:hidden; flex-shrink:0; display:flex; align-items:center; justify-content:center; background: color-mix(in srgb, var(--ac) 14%, transparent); border:1px solid color-mix(in srgb, var(--ac) 32%, transparent); color: var(--ac); font-size:28px; }
.prof-avatar img{ width:100%; height:100%; object-fit:cover; }
.prof-id{ min-width:0; }
.prof-id strong{ display:block; font-size:16px; color:var(--t1); }
.prof-id span{ display:block; margin-top:3px; font-size:12px; color:var(--t3); direction:ltr; text-align:start; overflow:hidden; text-overflow:ellipsis; }
.prof-provider{ font-family: var(--font-mono); font-size:10px !important; color: var(--ac) !important; }
.prof-block{ margin-top:14px; background: var(--s1); border:1px solid var(--b1); border-radius: var(--radius); padding:16px 18px; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.prof-block-head{ display:flex; align-items:flex-start; gap:12px; min-width:0; }
.prof-block-head > i{ font-size:22px; color: var(--ac); margin-top:2px; }
.prof-block-head strong{ display:block; font-size:14px; color:var(--t1); }
.prof-block-head span{ display:block; font-size:12px; color:var(--t3); margin-top:3px; line-height:1.5; }
.prof-pass-btn{ display:inline-flex; align-items:center; gap:7px; background: var(--s2); color: var(--t1); border:1px solid var(--b2); border-radius: var(--radius-sm); padding:9px 16px; font:600 12.5px var(--font-body); cursor:pointer; transition: all .15s; }
.prof-pass-btn:hover{ border-color: var(--ac); color: var(--ac); }
/* ── Password change modal ── */
.pass-ov{ position:fixed; inset:0; z-index:1400; display:none; align-items:center; justify-content:center; padding:24px; background:color-mix(in srgb,var(--bg) 70%,transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.pass-ov.open{ display:flex; animation:fadeIn .16s ease; }
.pass-modal{ width:min(400px, calc(96vw / var(--app-zoom,1))); background: var(--s1); border:1px solid var(--b2); border-radius:20px; padding:20px; box-shadow:0 30px 80px rgba(0,0,0,.55); }
.pass-head{ display:flex; align-items:flex-start; gap:12px; margin-bottom:16px; }
.pass-head .mclose{ position:static; margin-inline-start:auto; flex-shrink:0; }
.pass-ico{ width:40px; height:40px; border-radius:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background: color-mix(in srgb, var(--ac) 14%, transparent); border:1px solid color-mix(in srgb, var(--ac) 32%, transparent); color: var(--ac); font-size:20px; }
.pass-head strong{ display:block; font-size:14.5px; color:var(--t1); }
.pass-head span{ display:block; margin-top:3px; font-size:11.5px; color:var(--t3); line-height:1.5; }
.pass-step{ display:flex; flex-direction:column; gap:10px; }
.pass-cta{ background: var(--ac); color:#fff; border:none; border-radius: var(--radius-sm); padding:11px 16px; font:700 13px var(--font-body); cursor:pointer; transition: filter .15s; }
.pass-cta:hover{ filter:brightness(1.1); }
.pass-cta:disabled{ opacity:.6; cursor:default; }
.pass-err{ min-height:16px; margin-top:10px; font-size:11.5px; color: var(--rd); text-align:center; }

/* profile edit controls */
.prof-avatar-wrap{ position:relative; flex-shrink:0; }
.prof-avatar-edit{ position:absolute; bottom:-2px; inset-inline-end:-2px; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; background: var(--s3); border:1px solid var(--b2); color: var(--t2); font-size:13px; cursor:pointer; transition: all .15s; }
.prof-avatar-edit:hover{ color: var(--ac); border-color: var(--ac); }
.prof-form{ flex:1; min-width:0; display:flex; flex-direction:column; gap:12px; }
.prof-field{ display:flex; flex-direction:column; gap:6px; }
.prof-field-lbl{ font-size:11px; font-weight:700; color: var(--t3); letter-spacing:.3px; }
.prof-inp{ width:100%; background: var(--s2); border:1px solid var(--b2); border-radius: var(--radius-sm); padding:11px 14px; color: var(--t1); font:600 13.5px var(--font-body); outline:none; transition: border-color .15s, background .15s; }
.prof-inp:focus{ border-color: var(--ac); background: color-mix(in srgb, var(--ac) 4%, var(--s2)); }
.prof-inp:disabled{ color: var(--t3); cursor:not-allowed; opacity:.75; }
.prof-form-foot{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.prof-provider{ font-family: var(--font-mono); font-size:10px; color: var(--ac); }
.prof-msg{ font-size:11px; color: var(--gr); min-height:13px; flex:1; }
.prof-save-btn{ display:inline-flex; align-items:center; gap:7px; background: var(--ac); color:#fff; border:none; border-radius: var(--radius-sm); padding:10px 22px; font:700 13px var(--font-body); cursor:pointer; transition: filter .15s, opacity .15s; margin-inline-start:auto; }
.prof-save-btn:hover{ filter:brightness(1.1); }
.prof-save-btn:disabled{ opacity:.45; cursor:default; filter:none; }
@media(max-width:600px){ .prof-card{ flex-direction:column; align-items:center; text-align:center; } .prof-form{ width:100%; } }

/* ── Map · sector menu (mobile-friendly drill navigation) ── */
.map-sec-menu{ display:flex; align-items:center; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:8px 2px; margin:2px 0 8px; }
.map-sec-menu::-webkit-scrollbar{ display:none; }
.map-sec-menu:empty{ display:none; }
.msm-chip{ flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; background:transparent; border:none; border-radius:9px; padding:8px 13px; color:var(--t3); font:600 12.5px var(--font-body); cursor:pointer; white-space:nowrap; transition:all .15s; }
.msm-chip:hover{ color:var(--t1); background:var(--s3); }
.msm-chip.on{ background:var(--s1); color:var(--t1); font-weight:700; box-shadow:0 1px 4px rgba(0,0,0,.3); }
body.light .msm-chip.on{ background:#fff; color:var(--ac); box-shadow:0 1px 6px rgba(11,30,63,.12); }
.msm-chip .msm-n{ font-family:var(--font-mono); font-size:9.5px; color:var(--t3); background:var(--s3); border-radius:999px; padding:1px 6px; }
.msm-chip.on .msm-n{ color:var(--ac); }
.msm-chip .msm-back-ico{ font-size:13px; }

/* map: merge-stocks toggle */
.map-merge{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--b2); background:var(--s2); color:var(--t3); border-radius: var(--radius-sm, 12px); padding:8px 12px; font:700 12px var(--font-body); cursor:pointer; transition:all .15s; }
.map-merge:hover{ color:var(--t1); border-color: var(--ac); }
.map-merge.on{ background: var(--ac); border-color: var(--ac); color:#fff; }

/* ── Ficus assistant chat ── */
.chat-fab{ position:fixed; bottom:22px; inset-inline-start:22px; z-index:1050; width:54px; height:54px; border-radius:50%; border:1px solid color-mix(in srgb, var(--ac) 55%, var(--b2)); background:linear-gradient(145deg,color-mix(in srgb,var(--ac) 28%,var(--s2)),var(--s2)); color:var(--ac); font-size:25px; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 16px 40px -12px rgba(0,0,0,.72),0 0 0 5px color-mix(in srgb,var(--ac) 7%,transparent); transition:transform .15s,box-shadow .15s; }
.chat-fab::after{ content:''; position:absolute; width:9px; height:9px; top:2px; right:2px; border-radius:50%; background:var(--gr); border:2px solid var(--bg); box-shadow:0 0 12px color-mix(in srgb,var(--gr) 70%,transparent); }
.chat-fab:hover{ transform:translateY(-2px); box-shadow:0 22px 48px -14px rgba(0,0,0,.78),0 0 0 6px color-mix(in srgb,var(--ac) 10%,transparent); }
.chat-fab:active{ transform: translateY(0); }
@media(max-width:760px){ .chat-fab{ bottom:calc(var(--nav) + var(--safe) + 18px); inset-inline-start:16px; width:48px; height:48px; font-size:22px; } }
.chat-panel{ position:fixed; bottom:88px; inset-inline-start:22px; z-index:1051; width:min(410px,calc(100vw - 32px)); height:min(620px,calc(100vh - 126px)); display:none; flex-direction:column; background:linear-gradient(160deg,color-mix(in srgb,var(--ac) 3%,var(--s1)),var(--s1) 42%); border:1px solid color-mix(in srgb,var(--ac) 22%,var(--b2)); border-radius:22px; box-shadow:0 34px 100px rgba(0,0,0,.66); overflow:hidden; isolation:isolate; }
.chat-panel.open{ display:flex; animation: chatIn .22s cubic-bezier(.2,.9,.3,1.05); }
@keyframes chatIn{ from{ opacity:0; transform: translateY(14px) scale(.97);} to{ opacity:1; transform:none; } }
@media(max-width:760px){
  .chat-panel{ bottom:0; inset-inline-start:0; width:calc(100vw / var(--app-zoom,1)); max-width:none; height:calc(82dvh / var(--app-zoom,1)); max-height:calc((100dvh - 14px) / var(--app-zoom,1)); border-radius:22px 22px 0 0; }
  body.chat-open .chat-fab{ opacity:0; pointer-events:none; }
  html.focus-android .chat-panel{ padding-bottom:calc(var(--fx-inset-bottom,0px) / var(--app-zoom,1)); }
}
.chat-head{ display:flex; align-items:center; gap:11px; padding:13px 14px; border-bottom:1px solid var(--b1); background:color-mix(in srgb,var(--ac) 6%,var(--s1)); flex:0 0 auto; }
.chat-head .mclose{ position:static; margin-inline-start:auto; flex-shrink:0; }
.chat-head-ico{ width:38px; height:38px; border-radius:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background: color-mix(in srgb, var(--ac) 16%, transparent); border:1px solid color-mix(in srgb, var(--ac) 34%, transparent); color: var(--ac); font-size:20px; }
.chat-head-t strong{ display:block; font-size:13.5px; color: var(--t1); }
.chat-head-t span{ display:flex; align-items:center; gap:5px; margin-top:2px; font-size:10.5px; color: var(--t3); }
.chat-dot{ width:6px; height:6px; border-radius:50%; background: var(--gr); animation: livePulse 1.8s ease-in-out infinite; }
.chat-reset{ width:32px; height:32px; flex:0 0 32px; display:flex; align-items:center; justify-content:center; border:1px solid transparent; border-radius:9px; background:transparent; color:var(--t3); font-size:15px; cursor:pointer; transition:all .15s; }
.chat-reset:hover{ color:var(--ac); background:var(--s3); border-color:var(--b1); }
.chat-msgs{ flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:15px; display:flex; flex-direction:column; gap:10px; scrollbar-width:thin; scrollbar-color:var(--b2) transparent; }
.chat-msg{ max-width:88%; padding:10px 13px; border-radius:15px; font-size:12.7px; line-height:1.58; white-space:pre-wrap; overflow-wrap:anywhere; }
.chat-msg.bot{ align-self:flex-start; background:var(--s2); border:1px solid var(--b1); color:var(--t1); border-start-start-radius:5px; box-shadow:0 7px 20px -18px rgba(0,0,0,.9); }
.chat-msg.user{ align-self:flex-end; background:linear-gradient(135deg,var(--ac),color-mix(in srgb,var(--ac) 72%,#7d4bff)); color:#fff; border-start-end-radius:5px; box-shadow:0 9px 25px -16px color-mix(in srgb,var(--ac) 80%,transparent); }
.chat-typing{ width:54px; display:flex; align-items:center; justify-content:center; gap:4px; padding-block:13px; }
.chat-typing i{ width:5px; height:5px; border-radius:50%; background:var(--t3); animation:chatTyping 1.1s infinite ease-in-out; }
.chat-typing i:nth-child(2){ animation-delay:.14s; }.chat-typing i:nth-child(3){ animation-delay:.28s; }
@keyframes chatTyping{ 0%,60%,100%{ transform:translateY(0); opacity:.45; } 30%{ transform:translateY(-4px); opacity:1; } }
.chat-chips,.chat-actions{ align-self:stretch; display:flex; gap:7px; flex-wrap:wrap; }
.chat-chip,.chat-action{ border-radius:999px; padding:7px 10px; font:700 10.5px var(--font-body); cursor:pointer; transition:all .14s; }
.chat-chip{ background:transparent; border:1px solid color-mix(in srgb,var(--ac) 30%,var(--b1)); color:var(--t2); }
.chat-chip:hover{ color:var(--ac); border-color:var(--ac); background:color-mix(in srgb,var(--ac) 7%,transparent); }
.chat-action{ background:color-mix(in srgb,var(--ac) 12%,var(--s2)); border:1px solid color-mix(in srgb,var(--ac) 38%,var(--b1)); color:var(--ac); }
.chat-action:hover{ transform:translateY(-1px); background:color-mix(in srgb,var(--ac) 18%,var(--s2)); }
.chat-action:disabled,.chat-chip:disabled{ opacity:.5; cursor:default; transform:none; }
.chat-card{ align-self:stretch; padding:13px; border:1px solid color-mix(in srgb,var(--ac) 32%,var(--b2)); border-radius:16px; background:linear-gradient(145deg,color-mix(in srgb,var(--ac) 8%,var(--s2)),var(--s2)); box-shadow:0 13px 34px -27px rgba(0,0,0,.95); transition:opacity .15s,border-color .15s; }
.chat-card-title{ display:flex; align-items:center; gap:8px; margin-bottom:9px; color:var(--t1); }
.chat-card-title > i{ width:28px; height:28px; display:flex; align-items:center; justify-content:center; border-radius:9px; background:color-mix(in srgb,var(--ac) 15%,transparent); color:var(--ac); font-size:16px; }
.chat-card-title strong{ font-size:12.5px; }
.chat-safe-badge{ margin-inline-start:auto; padding:3px 7px; border-radius:999px; background:color-mix(in srgb,var(--gd) 11%,transparent); border:1px solid color-mix(in srgb,var(--gd) 30%,transparent); color:var(--gd); font:800 8.5px var(--font-mono); }
.chat-card-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:7px 2px; border-bottom:1px solid var(--b1); }
.chat-card-row > span{ color:var(--t3); font-size:10.5px; }.chat-card-row > strong{ color:var(--t1); font:700 11.5px var(--font-mono); text-align:end; overflow-wrap:anywhere; }
.chat-card-question{ margin-top:10px; color:var(--t2); font-size:10.5px; line-height:1.45; }
.chat-mode-choices{ display:flex; gap:7px; margin-top:7px; }
.chat-mode-btn{ flex:1; padding:7px 8px; border:1px solid var(--b2); border-radius:9px; background:var(--s1); color:var(--t2); font:700 10.5px var(--font-body); cursor:pointer; }
.chat-mode-btn.on{ border-color:var(--ac); background:color-mix(in srgb,var(--ac) 13%,var(--s1)); color:var(--ac); }
.chat-card-warning{ margin-top:9px; padding:8px 9px; border-radius:9px; background:color-mix(in srgb,var(--rd) 9%,transparent); color:var(--rd); font-size:10px; }
.chat-card-actions{ display:flex; align-items:center; gap:8px; margin-top:11px; }
.chat-card-cancel,.chat-card-confirm{ min-height:36px; border-radius:10px; font:800 10.8px var(--font-body); cursor:pointer; transition:all .14s; }
.chat-card-cancel{ flex:0 0 72px; background:transparent; border:1px solid var(--b2); color:var(--t3); }
.chat-card-confirm{ flex:1; background:var(--ac); border:1px solid var(--ac); color:#fff; }
.chat-card-confirm:hover:not(:disabled){ filter:brightness(1.1); transform:translateY(-1px); }
.chat-card button:disabled{ opacity:.46; cursor:default; transform:none; }
.chat-card.handled{ opacity:.64; border-color:var(--b1); }
.chat-inputbar{ display:flex; align-items:flex-end; gap:8px; padding:10px 12px 8px; border-top:1px solid var(--b1); background:color-mix(in srgb,var(--s1) 94%,transparent); }
.chat-inputbar textarea{ flex:1; min-width:0; max-height:92px; resize:none; overflow-y:auto; background:var(--s2); border:1px solid var(--b2); border-radius:13px; padding:10px 12px; color:var(--t1); font:500 12.8px/1.45 var(--font-body); outline:none; transition:border-color .15s,box-shadow .15s; }
.chat-inputbar textarea:focus{ border-color:var(--ac); box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 9%,transparent); }
.chat-inputbar textarea::placeholder{ color:var(--t3); }
.chat-inputbar textarea:disabled{ opacity:.65; }
.chat-send{ width:41px; height:41px; flex-shrink:0; border-radius:12px; border:none; background:var(--ac); color:#fff; font-size:17px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:filter .15s,transform .15s; }
.chat-send:hover{ filter: brightness(1.1); }
.chat-send:active{ transform:scale(.95); }.chat-send:disabled{ opacity:.5; cursor:wait; }
.chat-privacy{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; gap:5px; padding:0 12px 9px; color:var(--t3); font-size:8.8px; background:color-mix(in srgb,var(--s1) 94%,transparent); }
.chat-privacy i{ color:var(--gr); font-size:12px; }
.aform.assistant-prefilled{ animation:assistantPrefill 1.6s ease; }
@keyframes assistantPrefill{ 0%,100%{ box-shadow:none; } 20%,65%{ box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 25%,transparent),0 0 32px color-mix(in srgb,var(--ac) 18%,transparent); } }
body.light .chat-panel{ box-shadow:0 28px 80px rgba(25,43,84,.22); }
@media(max-width:420px){ .chat-msgs{ padding:12px; }.chat-card{ padding:11px; }.chat-head{ padding-inline:12px; }.chat-privacy{ font-size:8.3px; } }

/* Compact mobile cards: keep the sparkline, hide only cumulative P&L. */
@media (max-width: 600px) {
  .card .pn.pn-total {
    display: none !important;
  }
}