/* =====================================================================
   SmartBorsa skin: the light and dark skins of the new design (green accent, white or deep-navy sheets, soft borders and shadows,
   a docked sidebar with a label beside each icon, a top bar with the search on the start side and round icon buttons).
   Loaded after app.css. It only sets the colour tokens the whole app already reads (--sb-*, --v2-*, --bd-*, the island tokens) and restyles the shell,
   so every page, island and dialog takes the new look together. Our logo mark is kept as it is.
   ===================================================================== */

/* ---------- light skin ---------- */
:root {
  --v2-bg:#F1F5F2; --v2-surface:#FFFFFF; --v2-raised:#F3F6F4; --v2-border:rgba(15,23,42,.09);
  --v2-muted:#566579; --v2-gain:#166534; --v2-ink:#0F172A; --v2-primary:#0B5E3F; --v2-radius-card:18px; --v2-radius-btn:12px;
  --elev-1:0 1px 2px rgba(15,23,42,.04), 0 8px 24px -14px rgba(15,23,42,.14);
  --elev-2:0 2px 4px rgba(15,23,42,.05), 0 14px 32px -14px rgba(15,23,42,.18);
  --elev-3:0 6px 14px rgba(15,23,42,.08), 0 28px 56px -20px rgba(15,23,42,.28);
}
.sb {
  --sb-canvas:#F1F5F2; --sb-sheet:#FFFFFF; --sb-sunk:#F1F5F3; --sb-sunk2:#E6EEE9; --sb-line:rgba(15,23,42,.09);
  --sb-ink:#0F172A; --sb-ink2:#334155; --sb-muted:#566579;
  --sb-sky:#0B5E3F; --sb-sky-tint:color-mix(in srgb,#0B5E3F 11%,transparent);
  --sb-gain:#166534; --sb-gain-bg:#E2F5E9; --sb-loss:#B91C1C; --sb-loss-bg:#FDE8E8;
  --sb-warn:#B45309; --sb-brand:#0B5E3F;
  --sb-elev1:0 1px 2px rgba(15,23,42,.04), 0 8px 24px -14px rgba(15,23,42,.14);
  --sb-elev2:0 2px 4px rgba(15,23,42,.05), 0 14px 32px -14px rgba(15,23,42,.2);
  --bd-bg:#FFFFFF; --bd-ink:#0F172A; --bd-ink2:#334155; --bd-muted:#566579; --bd-line:rgba(15,23,42,.09); --bd-well:#F1F5F3;
  --bd-grid:rgba(15,23,42,.08); --bd-track:#E6EEE9;
  --bd-sky:#0B5E3F; --bd-glow:rgba(11, 94, 63,.35); --bd-gain:#166534; --bd-loss:#DC2626;
}

/* ---------- dark skin ---------- */
.dark {
  --v2-bg:#0E1620; --v2-surface:#151F2B; --v2-raised:#1B2735; --v2-border:rgba(255,255,255,.07);
  --v2-muted:#8D9BAD; --v2-gain:#4ADE80; --v2-loss:#F87171; --v2-ink:#E8EEF5; --v2-primary:#22C55E;
  --elev-1:0 1px 0 rgba(255,255,255,.03) inset, 0 12px 30px -16px rgba(0,0,0,.6);
  --elev-2:0 1px 0 rgba(255,255,255,.04) inset, 0 18px 36px -16px rgba(0,0,0,.7);
  --elev-3:0 8px 16px rgba(0,0,0,.45), 0 34px 70px -22px rgba(0,0,0,.75);
}
.dark .sb {
  --sb-canvas:#0E1620; --sb-sheet:#151F2B; --sb-sunk:#1B2735; --sb-sunk2:#223142; --sb-line:rgba(255,255,255,.07);
  --sb-ink:#E8EEF5; --sb-ink2:#C2CCD9; --sb-muted:#8D9BAD;
  --sb-sky:#4ADE80; --sb-sky-tint:color-mix(in srgb,#4ADE80 13%,transparent);
  --sb-gain:#4ADE80; --sb-gain-bg:#0F2E22; --sb-loss:#F87171; --sb-loss-bg:#341A1C; --sb-warn:#FBBF24; --sb-brand:#22C55E;
  --sb-elev1:0 1px 2px rgba(0,0,0,.35), 0 12px 30px -16px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.03);
  --sb-elev2:0 2px 4px rgba(0,0,0,.4), 0 18px 40px -16px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.03);
  --bd-bg:#151F2B; --bd-ink:#E8EEF5; --bd-ink2:#CBD5E1; --bd-muted:#8D9BAD; --bd-line:rgba(255,255,255,.07); --bd-well:rgba(255,255,255,.05);
  --bd-grid:rgba(255,255,255,.06); --bd-track:rgba(255,255,255,.1);
  --bd-sky:#4ADE80; --bd-glow:rgba(74,222,128,.5); --bd-gain:#4ADE80; --bd-loss:#F87171;
}

body { background:var(--v2-bg) !important; }

/* ---------- cards: 18px corners, white or navy sheets, one soft shadow ---------- */
.sb-app .glass-panel { border-radius:18px !important; }
.sb-card, .sb-bento > *, .isl .isl-card, .isl .isl-cx { border-radius:18px; }

/* ---------- the welcome band: mint wash in the light skin, green glow in the dark ---------- */
.sb-band { border-radius:20px; background:linear-gradient(115deg, #E6F6EC 0%, #F6FBF8 48%, #FFFFFF 100%); }
.dark .sb-band { background:radial-gradient(120% 140% at 85% 0%, rgba(34,197,94,.22) 0%, rgba(34,197,94,0) 55%), linear-gradient(115deg, #12261F 0%, #151F2B 60%); }
.sb-mark { background:#0E2A52; }

/* ---------- sidebar: docked, one row per page (icon, then label), the active page in a soft pill ---------- */
@media (min-width: 761px) {
  body { padding-inline:0 !important; }
  .sb-app { max-width:none; padding:0; }
  .sb-shell { grid-template-columns:232px minmax(0,1fr); gap:0; align-items:stretch; min-height:100vh; }
  .sb-main { padding:18px clamp(16px,2.4vw,32px) 28px; }
  .sb-rail { position:sticky; top:0; align-self:start; height:100vh; max-height:100vh; min-height:0; border-radius:0; border:0; border-inline-end:1px solid var(--sb-line); background:var(--sb-sheet); box-shadow:none; padding:16px 12px; gap:2px; }
  .sb-rail-logo { width:auto; height:44px; margin:0 4px 14px; padding:0 12px 0 10px; border-radius:12px; display:flex; align-items:center; gap:10px; background:transparent; color:var(--sb-ink); font-weight:900; font-size:16px; justify-content:flex-start; }
  .sb-rail-logo svg { background:#0E2A52; border-radius:12px; padding:5px; box-sizing:content-box; flex:none; }
  .sb-rail-logo::after { content:"SmartBorsa"; letter-spacing:.2px; }
  .sb-ri { flex-direction:row; justify-content:flex-start; gap:12px; padding:10px 12px; font-size:14px; font-weight:700; border-radius:12px; min-height:42px; color:var(--sb-ink2); }
  .sb-ri svg { width:19px; height:19px; flex:none; }
  .sb-ri:hover { background:var(--sb-sunk); color:var(--sb-ink); }
  .sb-ri[aria-current=page] { background:var(--sb-sunk2); color:var(--sb-ink); font-weight:800; }
  .sb-ri[aria-current=page] svg { color:var(--sb-sky); }
  .sb-rail .sb-ri[aria-current=page]::before { display:none; }
  .sb-ri .bdg { position:static; margin-inline-start:auto; }
  .sb-ri-me { margin-top:4px; border-top:1px solid var(--sb-line); border-radius:0 0 12px 12px; padding-top:14px; }
  .sb-ri-me .sb-av { background-color:#0E2A52; }
  .sb-rsub { margin:0 0 4px; padding-inline:8px 0; background:transparent; }
  .sb-rsub.open { background:transparent; padding:2px 0 6px; margin:0 0 6px; }
  .sb-rs { flex-direction:row; justify-content:flex-start; gap:10px; font-size:13px; padding:8px 12px 8px 12px; margin-inline-start:22px; border-radius:12px; }
  .sb-rs[aria-current=page] { background:var(--sb-sunk); box-shadow:none; color:var(--sb-sky); }
}

/* ---------- top bar: search on the start side, the page title kept, round icon buttons ---------- */
.sb-top { background:var(--v2-bg); padding:0 0 16px; gap:10px; flex-direction:row; align-items:center; }
/* the page title is not shown in the bar (it stays in the page for readers and for the document title) */
.sb-top-title { position:absolute; inline-size:1px; block-size:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.sb-back { order:-2; }
.sb h1 { font-size:20px; }
.sb-search { order:-1; margin-inline-end:auto; min-width:min(380px,40vw); border-radius:999px; background:var(--sb-sheet); box-shadow:none; border-color:var(--sb-line); padding-block:10px; }
.sb-pal { inset-inline-start:0; inset-inline-end:auto; }   /* the search sits at the start edge, so its panel opens from there (RTL: right) */
.sb-iconbtn, .sb-avbtn { border-radius:999px; box-shadow:none; background:transparent; border-color:transparent; }
.sb-iconbtn:hover, .sb-avbtn:hover { background:var(--sb-sunk); border-color:transparent; color:var(--sb-ink); }
.sb-addbtn { background:var(--sb-brand); color:#fff; }
.sb-addbtn:hover { color:#fff; }
.dark .sb-addbtn, .dark .sb-addbtn:hover { color:#06210f; }
.sb-avbtn .sb-av { background-color:#0E2A52; border-radius:999px; width:34px; height:34px; }

/* ---------- buttons: green primary, rounded ---------- */
.v2-btn-primary, .sb-btn.primary { background:var(--sb-brand); color:#fff; border-radius:12px; }
.isl .isl-btn.primary, #sb .button--primary { --button-bg:var(--sb-brand); background:var(--sb-brand); color:#fff; }

/* ---------- home: welcome row (greeting, total, today's move, overview card) and featured stocks ---------- */
.sb-welcome { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:18px; padding:22px; border-radius:20px; border:1px solid var(--sb-line); box-shadow:var(--sb-elev1); background:linear-gradient(115deg,#E6F6EC 0%,#F6FBF8 55%,#FFFFFF 100%); }
.dark .sb-welcome { background:radial-gradient(110% 150% at 88% 0%, rgba(34,197,94,.22) 0%, rgba(34,197,94,0) 58%), linear-gradient(115deg,#12261F 0%,#151F2B 62%); }
.hw-title { margin:0 0 16px; font-size:clamp(22px,3.2vw,32px); line-height:1.25; font-weight:900; color:var(--sb-ink); letter-spacing:0; }
.hw-state { color:var(--sb-gain); } .hw-state.closed, .hw-state.pre { color:var(--sb-muted); }
.hw-stats { position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:18px; padding:16px 18px; border-radius:16px; background:var(--sb-sheet); border:1px solid var(--sb-line); box-shadow:var(--sb-elev1); overflow:hidden; }
.hw-stats .k { font-size:12px; font-weight:700; color:var(--sb-muted); }
.hw-stats .v { font-size:24px; font-weight:900; color:var(--sb-ink); margin-top:2px; }
.hw-stats .v.gain { color:var(--sb-gain); } .hw-stats .v.loss { color:var(--sb-loss); }
.hw-na { white-space:nowrap; font-size:12px !important; font-weight:700 !important; color:var(--sb-muted) !important; }
.hw-sep { width:1px; align-self:stretch; background:var(--sb-line); }
.hw-spark { margin-inline-start:auto; width:96px; height:34px; color:var(--sb-gain); flex:none; } .hw-spark.loss { color:var(--sb-loss); }
.hw-card { display:flex; flex-direction:column; gap:4px; padding:16px 18px 0; border-radius:16px; background:var(--sb-sheet); border:1px solid var(--sb-line); box-shadow:var(--sb-elev2); overflow:hidden; min-height:170px; }
.hw-card-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.hw-card-t { font-size:14px; font-weight:800; color:var(--sb-ink); }
.hw-card-v { font-size:24px; font-weight:900; color:var(--sb-gain); }
.hw-area { display:block; margin-top:auto; width:calc(100% + 36px); margin-inline:-18px; height:78px; color:var(--sb-gain); }
.hw-chip { display:inline-flex; align-items:center; gap:4px; padding:2px 10px; border-radius:999px; font-size:12px; font-weight:800; background:var(--sb-gain-bg); color:var(--sb-gain); }
.hw-chip.loss { background:var(--sb-loss-bg); color:var(--sb-loss); }
.sb-featured { padding:4px 0 0; }
.hw-feat-h { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.hw-feat-h h2 { font-size:16px; font-weight:900; margin:0; color:var(--sb-ink); }
.hw-link { border:0; background:transparent; color:var(--sb-gain); font-weight:800; font-size:13px; cursor:pointer; }
.hw-feat-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr)); gap:12px; }
.hw-stock { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:14px; background:var(--sb-sheet); border:1px solid var(--sb-line); box-shadow:var(--sb-elev1); min-width:0; }
.hw-stock:first-child { border-color:color-mix(in srgb,var(--sb-gain) 55%,transparent); }
.hw-ico { width:34px; height:34px; border-radius:999px; display:grid; place-items:center; background:var(--sb-gain-bg); color:var(--sb-gain); font-weight:900; flex:none; }
.hw-nm { display:grid; min-width:0; margin-inline-end:auto; } .hw-nm b { font-size:13px; color:var(--sb-ink); } .hw-nm small { font-size:12px; color:var(--sb-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hw-buy { border:0; border-radius:12px; padding:6px 14px; background:var(--sb-brand); color:#fff; font-weight:800; font-size:12px; cursor:pointer; }
.dark .hw-buy { color:#06210f; }
/* the old band keeps what the new row does not show: the period, the profit ring, the session and the chart */
.hw-grid > .sb-band .sb-band-top > div:first-child { display:none; }
.hw-grid > .sb-band .sb-band-top { grid-template-columns:minmax(0,1fr); }
.hw-grid > .sb-band .sb-band-side { width:100%; grid-template-columns:auto minmax(220px,1fr); }
@media (max-width: 860px) { .sb-welcome { grid-template-columns:minmax(0,1fr); padding:16px; } .hw-stats { flex-wrap:wrap; } }

/* ---------- home: two-column rows (trends and top gainers; holdings and watchlist) ---------- */
.hw-grid { display:grid; grid-template-columns:minmax(0,1.9fr) minmax(0,1fr); gap:16px; align-items:start; }
.hw-panel { padding:18px; border-radius:18px; background:var(--sb-sheet); border:1px solid var(--sb-line); box-shadow:var(--sb-elev1); min-width:0; }
.hw-panel h2 { margin:0 0 12px; font-size:16px; font-weight:900; color:var(--sb-ink); }
.hw-panel-h { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; } .hw-panel-h h2 { margin:0; }
.hw-pill { border:0; border-radius:12px; padding:6px 12px; background:var(--sb-gain-bg); color:var(--sb-gain); font-weight:800; font-size:12px; cursor:pointer; }
.hw-list { list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.hw-list li { display:flex; align-items:center; gap:10px; padding:8px 4px; border-bottom:1px solid var(--sb-line); } .hw-list li:last-child { border-bottom:0; }
.hw-px { font-size:13px; font-weight:800; color:var(--sb-ink2); }
.hw-empty { margin:0; font-size:13px; color:var(--sb-muted); }
.hw-tbl-wrap { overflow-x:auto; }
.hw-tbl { width:100%; border-collapse:collapse; font-size:13px; }
.hw-tbl th { text-align:start; font-weight:700; color:var(--sb-muted); font-size:12px; padding:6px 8px; border-bottom:1px solid var(--sb-line); }
.hw-tbl td { padding:8px; border-bottom:1px solid var(--sb-line); color:var(--sb-ink); vertical-align:middle; } .hw-tbl tr:last-child td { border-bottom:0; }
.hw-tbl .hw-ico { width:26px; height:26px; font-size:12px; display:inline-grid; vertical-align:middle; margin-inline-end:6px; }
.hw-grid > .sb-band { margin:0; }
@media (max-width: 980px) { .hw-grid { grid-template-columns:minmax(0,1fr); } }

.hw-one { grid-template-columns:minmax(0,1fr); }

/* ---------- layout: a readable maximum width on wide screens ---------- */
@media (min-width: 761px) { .sb-main { width:100%; max-width:1440px; justify-self:center; } }
@media (min-width: 761px) and (max-width: 1100px) { .sb-shell { grid-template-columns:76px minmax(0,1fr); } .sb-rail { padding-inline:8px; } .sb-ri { flex-direction:column; gap:3px; font-size:12px; padding:9px 2px 8px; justify-content:center; } .sb-ri .bdg { position:absolute; top:4px; inset-inline-end:8px; margin:0; } .sb-rail-logo { padding:0; justify-content:center; margin-inline:auto; } .sb-rail-logo::after, .sb-rsub { display:none; } .sb-ri-me { padding-top:9px; } }

/* ---------- phones: search takes the row, compact round icons, one-column welcome, tight cards ---------- */
@media (max-width: 760px) {
  .sb-app { padding:10px 12px 0; }
  .sb-top { gap:6px; padding:0 0 12px; position:sticky; top:0; }
  .sb-search { order:-1; flex:1 1 auto; min-width:0; margin-inline-end:0; padding-inline:12px; }
  .sb-search kbd { display:none; }
  .sb-search .tx { display:inline !important; }
  .sb-search .tx { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .sb-iconbtn, .sb-avbtn { width:44px; height:44px; }
  #refresh-prices-btn { display:none; }
  .sb-welcome { padding:14px; gap:12px; border-radius:18px; }
  .hw-title { font-size:24px; margin-bottom:12px; }
  .hw-stats { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:14px; }
  .hw-stats .v { font-size:16px; }
  .sb .hw-sep, .sb .hw-spark { display:none; }
  .hw-card { min-height:0; padding:14px 14px 0; }
  .hw-card-v { font-size:24px; }
  .hw-area { height:64px; }
  .hw-panel { padding:14px; border-radius:16px; }
  .hw-list li { padding:8px 2px; }
  .sb-band { border-radius:18px; }
  #toast-container { inset-inline:12px !important; inline-size:auto !important; max-inline-size:none !important; }
}
body { overflow-x:clip; }

/* ---------- welcome row and band tools: sized to their content, never stretched to fill a gap ---------- */
.sb-welcome { align-items:start; }
.hw-card { min-height:0; }
.hw-card .hw-area { margin-top:10px; }
.hw-stats { align-self:start; }
.hw-grid > .sb-band { align-self:start; }
.hw-grid > .sb-band .sb-band-top { padding:14px 16px 0; gap:12px; }
.hw-grid > .sb-band .sb-band-side { display:flex; flex-wrap:wrap; gap:10px; width:100%; align-items:center; }
.hw-grid > .sb-band .sb-band-ctrl { display:flex; align-items:center; gap:10px; flex:0 0 auto; padding:6px 8px; margin:0; }
.hw-grid > .sb-band .sb-ring { flex:0 0 auto; }
.hw-grid > .sb-band .sb-session { flex:1 1 240px; min-width:0; }
.hw-stats { flex-wrap:nowrap; }
.hw-stats > div:not(.hw-sep) { min-width:0; }
.hw-stats .hw-spark { flex:0 1 96px; min-width:48px; margin-inline-start:auto; }
@media (max-width: 760px) { .hw-stats { flex-wrap:wrap; } }

/* ---------- sweep fixes: the wallet card stays harbour navy (its muted text was made for navy), primary buttons use dark ink on the bright night green, table scroll boxes clip what is inside them ---------- */
.sb-wcard { background:#0E2A52; }
.dark .sb-wcard { background:#1B2735; }
.dark .v2-btn-primary, .dark .sb-btn.primary { color:#06210F; }
.isl .isl-table-wrap { position:relative; }
.tp-seg { flex-wrap:wrap; max-inline-size:100%; }
.sg-controls, .sg-controls > * { min-width:0; max-inline-size:100%; }

/* ---------- home: the trend card and the card beside it share one height; the chart fills what the card gives it ---------- */
.hw-grid { align-items:stretch; }
.hw-grid > .sb-band { align-self:stretch; display:flex; flex-direction:column; }
.hw-grid > .sb-band .sb-band-chart { flex:1 1 200px; height:auto; min-height:200px; margin-top:6px; }
.hw-grid > .sb-band .sb-band-chart > svg { position:absolute; inset:0; width:100%; height:100%; }
.hw-grid > .hw-panel { align-self:stretch; }

/* ---- audit fixes (all screens) ---- */
/* the palette search field sits inside a bar, so the bar shows focus for it */
.sb-pal-in:focus-within { border-bottom-color: var(--sb-sky); box-shadow: 0 2px 0 -1px var(--sb-sky); }
.sb-pal-in input:focus-visible { outline: 2px solid var(--sb-sky); outline-offset: 4px; border-radius: 6px; }
/* secondary text on amber notices is tinted from the notice, never gray */
html:not(.dark) .bg-amber-50 :is([class*="text-slate-"], .text-gray-500) { color: #7a4a06; }
.dark .bg-amber-50 :is([class*="text-slate-"]) { color: #fcd9a0; }
/* the Pro badge: white on amber at 10px was under the readable floor */
.pro-badge { font-size: 11.5px; padding: 1px 8px; background: #8f5a0f; }

/* ---------- desktop rail and top bar: quiet luxury - one calm surface, hairline edges, one emerald accent, no decoration that moves ---------- */
@media (min-width: 761px) {
  .sb-rail, .sb-top {
    --r-bg: #f8fbf9; --r-edge: rgba(15,60,50,.1); --r-ink: #0f2a24; --r-ink2: #4a5f58; --r-accent: #0B5E3F; --r-tint: rgba(11, 94, 63,.1); --r-hov: rgba(15,60,50,.05);
    --r-shadow: 0 1px 2px rgba(15,50,40,.05), 0 20px 40px -26px rgba(15,60,50,.28);
  }
  .dark .sb-rail, .dark .sb-top {
    --r-bg: #111a24; --r-edge: rgba(255,255,255,.08); --r-ink: #eaf3ef; --r-ink2: #97aaa3; --r-accent: #4ade80; --r-tint: rgba(74,222,128,.12); --r-hov: rgba(255,255,255,.05);
    --r-shadow: 0 24px 48px -28px #000;
  }
  .sb-shell { grid-template-columns: 240px minmax(0, 1fr); }

  /* rail: a floating panel */
  .sb-rail {
    margin-block: 12px; margin-inline: 12px 0; top: 12px; height: calc(100vh - 24px); max-height: calc(100vh - 24px);
    padding: 18px 12px 12px; gap: 2px; border: 1px solid var(--r-edge); border-radius: 24px; background: var(--r-bg); color: var(--r-ink);
    box-shadow: var(--r-shadow); overflow: hidden auto; overscroll-behavior: contain; scrollbar-width: none;
  }
  .sb-rail-logo { height: auto; margin: 0 4px 12px; padding: 2px 8px 18px; border-radius: 0; border-bottom: 1px solid var(--r-edge); color: var(--r-ink); }
  .sb-rail-logo svg { background: linear-gradient(145deg, var(--sb-green-bright), var(--sb-green-deep)); border-radius: 12px; box-shadow: 0 8px 16px -8px color-mix(in srgb, var(--sb-green-deep) 60%, transparent); }
  .sb-rail-logo::after { font-size: 17px; font-weight: 900; letter-spacing: .01em; }
  .sb-ri { min-block-size: 44px; border-radius: 14px; color: var(--r-ink2); font-weight: 700; transition: background-color .18s, color .18s; }
  .sb-ri svg { stroke-width: 1.8; }
  .sb-ri:hover { background: var(--r-hov); color: var(--r-ink); }
  .sb-ri:focus-visible { outline: 2px solid var(--r-accent); outline-offset: 2px; }
  .sb-ri[aria-current=page] { background: var(--r-tint); color: var(--r-ink); font-weight: 800; box-shadow: none; }
  .sb-ri[aria-current=page] svg { color: var(--r-accent); filter: none; }
  /* the open page is marked by a small emerald light at the end of its row */
  .sb-rail .sb-ri[aria-current=page]::before {
    display: block; content: ""; position: absolute; inset-inline-end: 14px; inset-block-start: calc(50% - 3px); inset-inline-start: auto; inset-block-end: auto;
    inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--r-accent); box-shadow: 0 0 0 3px var(--r-tint), 0 0 10px var(--r-accent);
  }
  .sb-ri .bdg { background: var(--r-accent); color: #fff; font-weight: 900; }
  .dark .sb-ri .bdg { color: #052e16; }
  .sb-rail-sp { position: relative; min-block-size: 12px; }
  .sb-rail-sp::after { content: ""; position: absolute; inset-inline: 8px; inset-block-end: 2px; block-size: 1px; background: var(--r-edge); }
  .sb-ri-me { margin-top: 10px; padding: 10px 12px; border: 0; border-radius: 14px; background: transparent; }
  .sb-ri-me .sb-av:not(.has-photo) { background: linear-gradient(145deg, var(--sb-green-bright), var(--sb-green-deep)); color: #fff; }   /* the shorthand would reset the size and position a photo needs */
  .sb-ri-me .sb-av.has-photo { background-color: transparent; }
  .sb-ri-me[aria-current=page] .sb-av { box-shadow: 0 0 0 2px var(--r-bg), 0 0 0 4px var(--r-accent); }

  /* top bar: the same panel, lying flat */
  .sb-top {
    top: 12px; margin-block: 0 18px; padding: 8px 10px; border: 1px solid var(--r-edge); border-radius: 20px; background: var(--r-bg);
    box-shadow: 0 0 0 12px var(--v2-bg), var(--r-shadow);
  }
  .sb-top .sb-search { background: var(--r-hov); border-color: transparent; box-shadow: none; transition: border-color .2s, box-shadow .2s; }
  .sb-top .sb-search:hover, .sb-top .sb-search[aria-expanded=true] { border-color: var(--r-accent); box-shadow: 0 0 0 4px var(--r-tint); }
  .sb-top :is(.sb-iconbtn, .sb-avbtn):hover { background: var(--r-hov); color: var(--r-ink); }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .sb-shell { grid-template-columns: 96px minmax(0, 1fr); }
  .sb-rail { margin-inline: 8px 0; padding-inline: 6px; border-radius: 22px; }
  .sb-rail .sb-ri[aria-current=page]::before { inset-inline-end: 8px; inset-block-start: 8px; }
}

/* ---- home customisation: the panel, its button, and the single-column row when the gainers list is hidden ---- */
.hw-grid.hw-solo { grid-template-columns: minmax(0, 1fr); }
.sb-iconbtn[hidden] { display: none; }
html.hz-locked, html.hz-locked body { overflow: hidden; }
.hz-modal { --sb-sheet: #FFFFFF; --sb-sunk: #F1F5F3; --sb-line: rgba(15,23,42,.09); position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 16px; background: rgba(15,23,42,.5); animation: hz-fade .2s ease-out; }
.dark .hz-modal { --sb-sheet: #151F2B; --sb-sunk: #1B2735; --sb-line: rgba(255,255,255,.08); background: rgba(2,6,12,.66); }
.hz-sheet { inline-size: min(100%, 460px); max-block-size: min(88dvh, 640px); display: flex; flex-direction: column; border-radius: 22px; background: var(--sb-sheet); color: var(--sb-ink); border: 1px solid var(--sb-line); box-shadow: 0 4px 8px rgba(15,23,42,.08), 0 28px 60px -20px rgba(15,23,42,.45); overflow: hidden; animation: hz-rise .28s cubic-bezier(.16,1,.3,1); }
.dark .hz-sheet { box-shadow: 0 4px 8px rgba(0,0,0,.4), 0 28px 60px -20px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.04); }
.hz-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 20px 14px; }
.hz-sheet-head h2 { margin: 0; font-size: 18px; font-weight: 900; line-height: 1.4; text-wrap: balance; }
.hz-sheet-note { margin: 4px 0 0; font-size: 13px; font-weight: 600; color: var(--sb-muted); }
.hz-x { flex: none; inline-size: 44px; block-size: 44px; margin: -6px; border: 0; border-radius: 999px; background: transparent; color: var(--sb-ink2); display: grid; place-items: center; cursor: pointer; }
.hz-x:hover { background: var(--sb-sunk); color: var(--sb-ink); }
.hz-x svg, .hz-move svg { inline-size: 18px; block-size: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hz-rows { list-style: none; margin: 0; padding: 4px 14px 8px; display: grid; gap: 8px; overflow-y: auto; overscroll-behavior: contain; }
.hz-rows li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-inline: 12px 6px; border-radius: 14px; background: var(--sb-sunk); border: 1px solid transparent; transition: background-color .2s, border-color .2s; }
.hz-rows li.on { border-color: var(--sb-line); }
.hz-sw { position: relative; flex: 1; min-inline-size: 0; display: flex; align-items: center; gap: 12px; min-block-size: 52px; cursor: pointer; }
.hz-sw input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }
.hz-sw-track { flex: none; position: relative; inline-size: 44px; block-size: 26px; border-radius: 999px; background: var(--sb-muted); transition: background-color .2s; }
.hz-sw-track i { position: absolute; inset-block-start: 3px; inset-inline-start: 3px; inline-size: 20px; block-size: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.35); transition: inset-inline-start .22s cubic-bezier(.16,1,.3,1); }
.hz-sw input:checked + .hz-sw-track { background: var(--sb-green-deep); }
.hz-sw input:checked + .hz-sw-track i { inset-inline-start: 21px; }
.hz-sw input:focus-visible + .hz-sw-track { outline: 2px solid var(--sb-green-deep); outline-offset: 3px; }
.hz-sw-name { font-size: 14.5px; font-weight: 800; }
.hz-rows li.off .hz-sw-name { color: var(--sb-muted); font-weight: 700; }
.hz-move { flex: none; display: inline-flex; }
.hz-move button { inline-size: 44px; block-size: 44px; border: 0; border-radius: 12px; background: transparent; color: var(--sb-ink2); display: grid; place-items: center; cursor: pointer; }
.hz-move button:hover:not(:disabled) { background: var(--sb-sheet); color: var(--sb-ink); }
.hz-move button:disabled { opacity: .3; cursor: default; }
.hz-sheet-foot { display: flex; align-items: center; gap: 8px; padding: 12px 20px 18px; border-block-start: 1px solid var(--sb-line); }
.hz-count { margin-inline-end: auto; font-size: 13px; font-weight: 800; color: var(--sb-muted); }
.hz-ghost, .hz-done { min-block-size: 44px; padding-inline: 18px; border-radius: 12px; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.hz-ghost { border: 1px solid var(--sb-line); background: transparent; color: var(--sb-ink2); }
.hz-ghost:hover:not(:disabled) { background: var(--sb-sunk); color: var(--sb-ink); }
.hz-ghost:disabled { opacity: .4; cursor: default; }
.hz-done { border: 1px solid var(--sb-green-deep); background: var(--sb-green-deep); color: #fff; }
.dark .hz-done { background: #22C55E; border-color: #22C55E; color: #06210F; }
.hz-done:hover { filter: brightness(1.08); }
.hz-x:focus-visible, .hz-move button:focus-visible, .hz-ghost:focus-visible, .hz-done:focus-visible { outline: 2px solid var(--sb-green-deep); outline-offset: 2px; }
.dark .hz-x:focus-visible, .dark .hz-move button:focus-visible, .dark .hz-ghost:focus-visible, .dark .hz-done:focus-visible { outline-color: #4ADE80; }
@keyframes hz-fade { from { opacity: 0; } }
@keyframes hz-rise { from { opacity: 0; transform: translateY(14px) scale(.98); } }
@media (max-width: 640px) {
  .hz-modal { place-items: end center; padding: 0; }
  .hz-sheet { inline-size: 100%; max-block-size: 90dvh; border-radius: 22px 22px 0 0; border-block-end: 0; animation-name: hz-sheet-up; }
  .hz-sheet-foot { padding-block-end: max(18px, env(safe-area-inset-bottom)); }
}
@keyframes hz-sheet-up { from { transform: translateY(40px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hz-modal, .hz-sheet { animation: none; } .hz-sw-track, .hz-sw-track i, .hz-rows li { transition: none; } }
.hz-allhidden { text-align: center; margin: 24px 0; }

/* the two greens of the brand mark and the account avatar, named once (the same in light and dark: they sit under white text) */
:root { --sb-green-bright: #1f9d55; --sb-green-deep: #0B5E3F; }

/* ---------- market switcher (js/markets/market-switcher.js): the market in the top bar and its menu. The dot is ink when the market is open and an empty ring when closed: green and red stay for gain and loss. ---------- */
.sb .sb-mkt { display: inline-flex; align-items: center; gap: 6px; min-block-size: 36px; padding-inline: 10px; border: 1px solid var(--sb-line); border-radius: 999px; background: transparent; color: var(--sb-ink); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.sb .sb-mkt:hover { background: var(--sb-sunk); }
.sb .sb-mkt:focus-visible, .sb .sb-mkt-it:focus-visible { outline: 2px solid var(--sb-brand); outline-offset: 2px; }
.sb .sb-mkt-name { white-space: nowrap; }
.sb .sb-mkt-cur { color: var(--sb-muted); font-weight: 700; }
.sb .sb-mkt-dot { inline-size: 8px; block-size: 8px; border-radius: 50%; border: 1.5px solid var(--sb-muted); flex: none; }
.sb .sb-mkt-dot[data-open="1"] { background: var(--sb-ink); border-color: var(--sb-ink); }
.sb .sb-top { position: relative; }
.sb .sb-mkt-menu { position: absolute; inset-block-start: calc(100% + 6px); inset-inline-end: 12px; z-index: 60; inline-size: min(340px, calc(100vw - 24px)); padding: 8px; background: var(--sb-sheet); border: 1px solid var(--sb-line); border-radius: 16px; box-shadow: var(--sb-elev2); display: grid; gap: 2px; }
.sb .sb-mkt-menu[hidden] { display: none; }
.sb .sb-mkt-h { padding: 6px 8px; font-size: 12px; font-weight: 800; color: var(--sb-muted); }
.sb .sb-mkt-it { display: flex; align-items: center; gap: 10px; min-block-size: 48px; padding: 6px 8px; border: 0; border-radius: 12px; background: transparent; color: var(--sb-ink); font: inherit; text-align: start; cursor: pointer; }
.sb .sb-mkt-list { display: grid; gap: 2px; }
.sb .sb-mkt-it:hover, .sb .sb-mkt-it[aria-checked="true"] { background: var(--sb-sunk); }
.sb .sb-mkt-tx { display: grid; gap: 2px; min-inline-size: 0; }
.sb .sb-mkt-n { font-size: 14px; font-weight: 800; }
.sb .sb-mkt-s { font-size: 12px; color: var(--sb-muted); }
.sb .sb-mkt-note { margin: 4px 8px 6px; font-size: 12px; line-height: 1.6; color: var(--sb-muted); }
@media (max-width: 760px) { .sb .sb-mkt-cur { display: none; } .sb .sb-mkt { padding-inline: 8px; } .sb .sb-mkt-name { max-inline-size: 11ch; overflow: hidden; text-overflow: ellipsis; } .sb .sb-mkt-menu { inset-inline: 12px; inline-size: auto; } .sb .sb-mkt-base select { min-block-size: 44px; } .sb .sb-mkt-det summary { min-block-size: 44px; } .sb .sb-mkt { min-block-size: 44px; } .sb .js-lang-toggle-btn { min-inline-size: 44px; } }

/* the combined total inside the market menu */
.sb .sb-mkt-tot { margin-block-start: 6px; padding: 8px; border-block-start: 1px solid var(--sb-line); display: grid; gap: 6px; }
.sb .sb-mkt-base { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--sb-muted); }
.sb .sb-mkt-base select { min-block-size: 36px; padding-inline: 8px; border: 1px solid var(--sb-line); border-radius: 10px; background: var(--sb-sheet); color: var(--sb-ink); font: inherit; font-size: 13px; }
.sb .sb-mkt-big { font-size: 20px; font-weight: 900; color: var(--sb-ink); }
.sb .sb-mkt-det { margin-block-start: 4px; }
.sb .sb-mkt-det summary { display: flex; align-items: center; min-block-size: 32px; font-size: 12px; font-weight: 800; color: var(--sb-muted); cursor: pointer; }
.sb .sb-mkt-det summary { list-style: none; gap: 8px; }
.sb .sb-mkt-det summary::-webkit-details-marker { display: none; }
/* a chevron says the line opens: without it the toggle looked like a plain muted label */
.sb .sb-mkt-det summary::after { content: ""; inline-size: 6px; block-size: 6px; border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.sb .sb-mkt-det[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.sb .sb-mkt-det summary:focus-visible { outline: 2px solid var(--sb-brand); outline-offset: 2px; border-radius: 6px; }
.sb .sb-mkt-part { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--sb-ink2); }
.sb .sb-mkt-amt { color: var(--sb-ink); font-weight: 700; text-align: end; }

/* the question «you have no portfolio in this market: create yours» (js/markets/market-portfolio.js) */
.sb-ask { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgba(15, 23, 42, .5); }
.sb-ask-box { inline-size: min(380px, 100%); display: grid; gap: 12px; padding: 20px; background: var(--sb-sheet, #fff); color: var(--sb-ink, #0f172a); border: 1px solid var(--sb-line, rgba(15,23,42,.1)); border-radius: 16px; box-shadow: var(--sb-elev2, 0 14px 32px rgba(15,23,42,.2)); }
.sb-ask-box h2 { margin: 0; font-size: 17px; font-weight: 900; }
.sb-ask-box p { margin: 0; font-size: 13px; line-height: 1.7; color: var(--sb-muted, #566579); }
.sb-ask-box label { display: grid; gap: 6px; font-size: 12px; font-weight: 800; }
.sb-ask-box input { min-block-size: 44px; padding-inline: 12px; border: 1px solid var(--sb-line, rgba(15,23,42,.15)); border-radius: 12px; background: var(--sb-sunk, #f1f5f3); color: inherit; font: inherit; font-size: 14px; }
.sb-ask-err { min-block-size: 16px; font-size: 12px; color: var(--sb-loss, #b91c1c); }
.sb-ask-row { display: flex; gap: 8px; }
.sb-notice { position: fixed; inset-block-end: 88px; inset-inline: 16px; z-index: 95; margin-inline: auto; inline-size: fit-content; max-inline-size: min(440px, calc(100vw - 32px)); padding: 10px 14px; border-radius: 12px; background: var(--sb-ink, #0f172a); color: var(--sb-sheet, #fff); font-size: 13px; line-height: 1.6; box-shadow: var(--sb-elev2, 0 14px 32px rgba(15,23,42,.2)); }
.sb-ask-row button { flex: 1; min-block-size: 44px; border-radius: 12px; font: inherit; font-weight: 800; cursor: pointer; border: 1px solid var(--sb-line, rgba(15,23,42,.15)); background: transparent; color: inherit; }
.sb-ask-row .sb-ask-go { background: var(--sb-brand, #0b5e3f); border-color: var(--sb-brand, #0b5e3f); color: #fff; }