:root{
  --bg:#eef1f8;--bg2:#fff;--bg3:#f6f8fd;--bg4:#e8ecf6;
  --border:#dde3f0;--b2:#c0cade;
  --text:#111827;--muted:#4b5675;--hint:#8891b0;
  --accent:#10b981;--a2:#059669;--adim:rgba(16,185,129,.10);
  --up:#10b981;--udim:#d1fae5;--uptxt:#065f46;
  --dn:#ef4444;--ddim:#fee2e2;--dntxt:#991b1b;
  --indigo:#6366f1;--amber:#f59e0b;--cyan:#06b6d4;--violet:#8b5cf6;
  --mono:'DM Mono',monospace;--sans:'DM Sans',sans-serif;--brand:'Bebas Neue',sans-serif;
  --r:16px;--rs:10px;
  --shadow:0 1px 3px rgba(17,24,39,.06),0 4px 16px rgba(17,24,39,.05);
  --shadow-md:0 2px 8px rgba(17,24,39,.08),0 8px 24px rgba(17,24,39,.06);
  --shadow-lg:0 8px 24px rgba(17,24,39,.10),0 20px 48px rgba(17,24,39,.08);
  --glow-green:0 4px 20px rgba(16,185,129,.25);
  --glow-red:0 4px 20px rgba(239,68,68,.2);
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--bg);
  background-image:
    radial-gradient(ellipse 80% 60% at 20% 0%,rgba(99,102,241,.05) 0%,transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 100%,rgba(16,185,129,.04) 0%,transparent 55%);
  color:var(--text);font-family:var(--sans);min-height:100vh;
}
button{font-family:var(--sans);cursor:pointer}
input,select,textarea{font-family:var(--sans)}
a{text-decoration:none}

/* ═══ LAYOUT ═══ */
.app{display:flex;min-height:100vh}

/* ═══ SIDEBAR ═══ */
.sidebar{
  width:230px;flex-shrink:0;
  background:linear-gradient(175deg,#1a2140 0%,#111829 50%,#0e1420 100%);
  box-shadow:2px 0 24px rgba(0,0,0,.2);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow-y:auto;z-index:10;
}
.logo{padding:22px 18px 18px;border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:8px;position:relative;overflow:hidden}
.logo::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 140% 80% at 100% 0%,rgba(16,185,129,.2) 0%,transparent 60%)}
.logo-bars{position:relative;z-index:1;display:flex;align-items:flex-end;gap:3px;height:26px;margin-bottom:6px}
.lb{border-radius:2px 2px 0 0}
.lb:nth-child(1){width:5px;height:12px;background:rgba(16,185,129,.3)}
.lb:nth-child(2){width:5px;height:21px;background:#059669}
.lb:nth-child(3){width:5px;height:10px;background:rgba(16,185,129,.3)}
.lb:nth-child(4){width:5px;height:26px;background:#10b981}
.lb:nth-child(5){width:5px;height:16px;background:#059669}
.logo-name{position:relative;z-index:1;font-family:var(--brand);font-size:21px;letter-spacing:4px;color:#fff;line-height:1}
.logo-name em{color:#10b981;font-style:normal}
.logo-sub{position:relative;z-index:1;font-size:8px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,.22);margin-top:3px}
.nav-label{font-size:9px;font-weight:700;letter-spacing:.14em;color:rgba(255,255,255,.22);text-transform:uppercase;padding:12px 18px 4px}
.nav-btn{display:flex;align-items:center;gap:10px;padding:9px 18px;font-size:13px;color:rgba(255,255,255,.45);background:none;border:none;width:100%;text-align:left;transition:all .15s;border-left:3px solid transparent;border-radius:0 8px 8px 0;margin:1px 6px 1px 0;width:calc(100% - 6px)}
.nav-btn:hover{color:rgba(255,255,255,.85);background:rgba(255,255,255,.05);border-left-color:rgba(255,255,255,.15)}
.nav-btn.active{color:#10b981;background:rgba(16,185,129,.12);border-left-color:#10b981;font-weight:600}
.nav-icon{font-size:15px;flex-shrink:0;width:20px;text-align:center}
.sb-bottom{margin-top:auto;padding:12px 16px;border-top:1px solid rgba(255,255,255,.06)}
.live-row{display:flex;align-items:center;gap:7px;margin-bottom:6px}
.ldot{width:7px;height:7px;border-radius:50%;flex-shrink:0;transition:all .3s}
.ldot.live{background:#10b981;box-shadow:0 0 8px #10b981}
.ldot.loading{background:#f59e0b;box-shadow:0 0 6px #f59e0b;animation:pulse 1s infinite}
.ldot.off{background:rgba(255,255,255,.2)}
.live-label{font-size:11px;color:rgba(255,255,255,.35)}
.live-cd{font-size:10px;font-family:var(--mono);color:rgba(255,255,255,.2)}
.cur-row{display:flex;gap:4px;margin-top:6px}
.cur-btn{padding:3px 10px;font-size:10px;font-weight:700;border-radius:4px;border:1px solid rgba(255,255,255,.12);background:none;color:rgba(255,255,255,.3);cursor:pointer;transition:all .12s;font-family:var(--mono)}
.cur-btn.active{color:#10b981;background:rgba(16,185,129,.15);border-color:rgba(16,185,129,.4)}
/* User pill */
#user-pill{padding:10px 16px 8px;border-bottom:1px solid rgba(255,255,255,.07);margin-bottom:4px}
.u-avatar{width:28px;height:28px;border-radius:50%;background:var(--a2);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0}
.u-name{font-size:12px;font-weight:600;color:rgba(255,255,255,.8)}
.u-email{font-size:10px;color:rgba(255,255,255,.3)}
.u-logout{background:none;border:1px solid rgba(255,255,255,.12);border-radius:4px;color:rgba(255,255,255,.3);font-size:10px;padding:2px 6px;cursor:pointer;transition:all .12s;margin-top:2px}
.u-logout:hover{color:#ef4444;border-color:#ef4444}

/* ═══ PAGES ═══ */
.page{display:none;flex:1;min-width:0;padding:28px 32px 60px;overflow-x:hidden}
.page.active{display:block}
.ph{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:26px;gap:12px;flex-wrap:wrap}
.ph-title{font-size:22px;font-weight:700;letter-spacing:-.03em}
.ph-sub{font-size:12px;color:var(--muted);margin-top:3px}
.row-btns{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* ═══ BUTTONS ═══ */
.btn-ghost{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--rs);font-size:12px;color:var(--muted);cursor:pointer;transition:all .15s;box-shadow:var(--shadow)}
.btn-ghost:hover{color:var(--accent);border-color:var(--accent)}
.btn-primary{display:inline-flex;align-items:center;gap:7px;padding:9px 22px;background:linear-gradient(135deg,var(--a2),#0d9488);border:none;border-radius:var(--rs);font-size:13px;font-weight:700;color:#fff;cursor:pointer;transition:all .18s;box-shadow:0 2px 10px rgba(5,150,105,.35)}
.btn-primary:hover{background:linear-gradient(135deg,var(--accent),var(--a2));box-shadow:0 4px 18px rgba(16,185,129,.45);transform:translateY(-1px)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-danger{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:none;border:1px solid #fecaca;border-radius:var(--rs);font-size:12px;color:#ef4444;cursor:pointer}
.btn-danger:hover{background:#fee2e2}
.tabs{display:inline-flex;background:var(--bg4);border-radius:var(--rs);padding:3px;gap:2px}
.tab{padding:5px 14px;font-size:11px;font-weight:600;border-radius:6px;border:none;background:none;color:var(--hint);transition:all .15s;cursor:pointer}
.tab.active{background:var(--bg2);color:var(--text);box-shadow:var(--shadow)}
.spin{animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:.6}50%{opacity:1}}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.fade-in{animation:fadeIn .25s ease}

/* ═══ CARDS ═══ */
.card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow)}
.card-hover{transition:all .18s}
.card-hover:hover{box-shadow:var(--shadow-lg);transform:translateY(-1px)}

/* ═══ DASHBOARD SUMMARY ═══ */
.summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:16px}
.kpi{
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);
  padding:14px 16px;box-shadow:var(--shadow);position:relative;overflow:hidden;
  transition:all .2s;
}
.kpi:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.kpi::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:var(--r) var(--r) 0 0}
.kpi::after{content:'';position:absolute;top:-40px;right:-20px;width:90px;height:90px;border-radius:50%;opacity:.07;pointer-events:none}
.kpi-total::before{background:linear-gradient(90deg,#10b981,#34d399)}
.kpi-total::after{background:#10b981}
.kpi-day::before{background:linear-gradient(90deg,#6366f1,#a5b4fc)}
.kpi-day::after{background:#6366f1}
.kpi-total-ret::before{background:linear-gradient(90deg,#f59e0b,#fde68a)}
.kpi-total-ret::after{background:#f59e0b}
.kpi-win::before{background:linear-gradient(90deg,#06b6d4,#67e8f9)}
.kpi-win::after{background:#06b6d4}
.kpi-label{font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--hint);margin-bottom:10px}
.kpi-value{font-family:var(--mono);font-size:20px;font-weight:700;line-height:1;color:var(--text);letter-spacing:-.02em}
.kpi-value.up{color:var(--uptxt)}.kpi-value.dn{color:var(--dntxt)}
.kpi-sub{font-size:11px;color:var(--hint);margin-top:7px}

/* ═══ MODULE GRID ═══ */
.mod-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.mod{
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--shadow);transition:all .2s;cursor:grab;
  position:relative;
}
.mod:active{cursor:grabbing}
.mod.dragging{opacity:.2;scale:.98}
.mod.drag-over{border-color:var(--accent);box-shadow:0 0 0 2px rgba(16,185,129,.25)}
/* Normal full-width widget */
.mod[data-wide]{grid-column:1/-1}

/* Small mode — physically smaller, compact content */
.mod[data-small]{
  grid-column:span 1 !important;
  min-height:0;
  max-height:160px;
  overflow:hidden;
}
.mod[data-small] .mod-body{
  padding:6px 10px;
  font-size:11px;
}
.mod[data-small] .mod-head{
  padding:4px 10px;
  background:var(--bg4);
  border-bottom-color:var(--bg4);
}
.mod[data-small] .mod-title{
  font-size:8px;
  letter-spacing:.1em;
}
.mod[data-small] .mod-title-dot{ width:5px;height:5px; }
.mod[data-small] .drag-handle{ display:none; }
.mod[data-small] .mtabs{ display:none; }
/* Small: compact row elements */
.mod[data-small] .idx-row{ padding:3px 0; }
.mod[data-small] .idx-name,.mod[data-small] .idx-val{ font-size:11px; }
.mod[data-small] .idx-chg{ font-size:10px;padding:1px 5px; }
.mod[data-small] .srow{ padding:3px 0; }
.mod[data-small] .sname,.mod[data-small] .sprice{ font-size:11px; }
.mod[data-small] .schg{ font-size:10px;padding:1px 5px; }
.mod[data-small] .sparkline{ width:32px; }
.mod[data-small] .sticker{ font-size:9px;padding:1px 5px;min-width:40px; }
.mod[data-small] .arow{ margin-bottom:5px; }
.mod[data-small] .aname{ font-size:11px; }
.mod[data-small] .abar-wrap{ height:5px; }
.mod[data-small] .apct{ font-size:10px; }
.mod[data-small] .ni{ padding:5px 4px; }
.mod[data-small] .nh{ font-size:11px;line-height:1.35; }
.mod[data-small] .nmeta{ display:none; }
.mod[data-small] .clock-time{ font-size:20px; }
.mod[data-small] .clock-date{ font-size:10px; }
/* Small size badge in header */
.mod[data-small] .mod-head::after{
  content:'SMALL';
  font-size:7px;font-weight:800;letter-spacing:.12em;
  color:var(--hint);
  margin-left:auto;
  padding-right:4px;
}
.mod:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.mod-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:9px 14px;border-bottom:1px solid var(--border);
  background:linear-gradient(135deg,var(--bg3) 0%,var(--bg4) 100%);
  position:relative;
}
.mod-head::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--mod-accent,var(--hint));
  border-radius:0;
}
.mod-title{font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:7px}
.mod-title-dot{width:7px;height:7px;border-radius:50%;box-shadow:0 0 6px currentColor}
.mod-body{padding:11px 14px}
.drag-handle{font-size:12px;color:var(--hint);cursor:grab;padding:2px 3px;border-radius:3px;user-select:none}
.drag-handle:hover{color:var(--accent)}
/* Module accent colors — dot + left border */
.mod[data-mod="movers"]     {--mod-accent:#f59e0b}.mod[data-mod="movers"]     .mod-title-dot{background:#f59e0b}
.mod[data-mod="news-p"]     {--mod-accent:#6366f1}.mod[data-mod="news-p"]     .mod-title-dot{background:#6366f1}
.mod[data-mod="news-eu"]    {--mod-accent:#3b82f6}.mod[data-mod="news-eu"]    .mod-title-dot{background:#3b82f6}
.mod[data-mod="news-us"]    {--mod-accent:#f59e0b}.mod[data-mod="news-us"]    .mod-title-dot{background:#f59e0b}
.mod[data-mod="news-intl"]  {--mod-accent:#06b6d4}.mod[data-mod="news-intl"]  .mod-title-dot{background:#06b6d4}
.mod[data-mod="watchlist"]  {--mod-accent:#8b5cf6}.mod[data-mod="watchlist"]  .mod-title-dot{background:#8b5cf6}
.mod[data-mod="alloc"]      {--mod-accent:#10b981}.mod[data-mod="alloc"]      .mod-title-dot{background:#10b981}
.mod[data-mod="indices"]    {--mod-accent:#0ea5e9}.mod[data-mod="indices"]    .mod-title-dot{background:#0ea5e9}
.mod[data-mod="crypto"]     {--mod-accent:#f97316}.mod[data-mod="crypto"]     .mod-title-dot{background:#f97316}
.mod[data-mod="fear-greed"] {--mod-accent:#ef4444}.mod[data-mod="fear-greed"] .mod-title-dot{background:#ef4444}
.mod[data-mod="stock-fg"]   {--mod-accent:#ef4444}.mod[data-mod="stock-fg"]   .mod-title-dot{background:#ef4444}
.mod[data-mod="forex"]      {--mod-accent:#06b6d4}.mod[data-mod="forex"]      .mod-title-dot{background:#06b6d4}
.mod[data-mod="weather"]    {--mod-accent:#3b82f6}.mod[data-mod="weather"]    .mod-title-dot{background:#3b82f6}
.mod[data-mod="clock"]      {--mod-accent:#64748b}.mod[data-mod="clock"]      .mod-title-dot{background:#64748b}
.mod[data-mod="news-w"]     {--mod-accent:#ec4899}.mod[data-mod="news-w"]     .mod-title-dot{background:#ec4899}
.mod[data-mod="perf-table"] {--mod-accent:#14b8a6}.mod[data-mod="perf-table"] .mod-title-dot{background:#14b8a6}
.mod[data-mod="live-chart"] {--mod-accent:#10b981}.mod[data-mod="live-chart"] .mod-title-dot{background:#10b981}
.mod[data-mod="ai-tips"]    {--mod-accent:#8b5cf6}.mod[data-mod="ai-tips"]    .mod-title-dot{background:#8b5cf6}
.mod[data-mod="port-chart"] {--mod-accent:#6366f1}.mod[data-mod="port-chart"] .mod-title-dot{background:#6366f1}
.mod[data-mod="chart"]      {--mod-accent:#6366f1}.mod[data-mod="chart"]      .mod-title-dot{background:#6366f1}
.mtabs{display:flex;background:var(--bg4);border-radius:5px;padding:2px;gap:1px}
.mt{padding:3px 9px;font-size:10px;font-weight:600;border-radius:4px;border:none;background:none;color:var(--hint);cursor:pointer;transition:all .12s}
.mt.active{background:var(--bg2);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.08)}

/* ═══ STOCK ROWS ═══ */
.srow{display:flex;align-items:center;gap:7px;padding:6px 4px;border-bottom:1px solid var(--border);border-radius:6px;margin:0 -4px;transition:background .1s}
.srow:last-child{border-bottom:none}
.srow:hover{background:var(--bg3)}
.sticker{font-family:var(--mono);font-size:10px;font-weight:700;background:var(--bg4);border:1px solid var(--border);border-radius:6px;padding:3px 8px;min-width:52px;text-align:center;color:var(--text);letter-spacing:.02em}
.sname{font-size:12px;color:var(--muted);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.sparkline{width:44px;height:18px;flex-shrink:0}
.sprice{font-family:var(--mono);font-size:12px;color:var(--text);min-width:58px;text-align:right;font-weight:500}
.sbuy{font-family:var(--mono);font-size:11px;color:var(--hint);min-width:54px;text-align:right}
.schg{font-family:var(--mono);font-size:11px;font-weight:700;min-width:62px;text-align:center;padding:3px 8px;border-radius:6px}
.schg.up{color:var(--uptxt);background:var(--udim)}.schg.dn{color:var(--dntxt);background:var(--ddim)}
.skel{display:inline-block;border-radius:3px;background:var(--bg4);animation:skel 1.4s ease-in-out infinite}
@keyframes skel{0%,100%{opacity:.4}55%{opacity:.85}}

/* ═══ NEWS ═══ */
.ni{padding:10px 8px;border-bottom:1px solid var(--border);cursor:pointer;transition:all .15s;border-radius:8px;margin:2px -8px}
.ni:last-child{border-bottom:none}
.ni:hover{background:rgba(99,102,241,.04);border-bottom-color:transparent;transform:translateX(2px)}
.ni:hover .nh{color:var(--indigo)}
.ntag{font-size:9px;font-weight:700;letter-spacing:.1em;color:var(--accent);margin-bottom:3px;text-transform:uppercase}
.nh{font-size:12px;color:var(--text);line-height:1.5;transition:color .15s;font-weight:600}
.nmeta{font-size:10px;color:var(--hint);margin-top:3px;display:flex;align-items:center;gap:6px}
.nsrc{background:var(--bg4);border:1px solid var(--border);border-radius:3px;padding:1px 6px;font-size:9px;font-weight:600;color:var(--muted)}

/* ═══ ALLOC BARS ═══ */
.arow{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.arow:last-child{margin-bottom:0}
.aname{font-size:12px;color:var(--text);min-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.abar-wrap{flex:1;height:8px;background:var(--bg4);border-radius:4px;overflow:hidden}
.abar{height:100%;border-radius:4px;transition:width .8s cubic-bezier(.34,1.56,.64,1)}
.apct{font-family:var(--mono);font-size:11px;color:var(--muted);min-width:34px;text-align:right;font-weight:700}

/* ═══ INDEX / CRYPTO / FOREX ROWS ═══ */
.idx-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--border);transition:background .1s;border-radius:6px;margin:0 -4px;padding-left:4px;padding-right:4px}
.idx-row:last-child{border-bottom:none}
.idx-row:hover{background:var(--bg3)}
.idx-name{font-size:12px;color:var(--muted);flex:1;font-weight:600}
.idx-val{font-family:var(--mono);font-size:13px;color:var(--text);font-weight:600}
.idx-chg{font-family:var(--mono);font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px;min-width:58px;text-align:center}
.idx-chg.up{color:var(--uptxt);background:var(--udim)}.idx-chg.dn{color:var(--dntxt);background:var(--ddim)}

/* ═══ CLOCK WIDGET ═══ */
.clock-time{font-family:var(--mono);font-size:34px;font-weight:700;color:var(--text);text-align:center;letter-spacing:.06em;line-height:1}
.clock-date{font-size:11px;color:var(--hint);text-align:center;margin-top:6px;font-weight:500;letter-spacing:.04em}

/* ═══ FEAR & GREED ═══ */
/* ── Fear & Greed Gauge ── */
.fg-gauge-wrap{padding:2px 4px 0}
.fg-gauge-wrap text{font-family:var(--mono)}

/* ═══ WL ADD ═══ */
.wl-add{display:flex;gap:7px;margin-top:11px;padding-top:10px;border-top:1px solid var(--border)}
.wl-in{flex:1;height:30px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--rs);color:var(--text);font-size:12px;padding:0 9px;outline:none;transition:border-color .12s}
.wl-in::placeholder{color:var(--hint)}
.wl-in:focus{border-color:var(--accent)}
.wl-btn{height:30px;padding:0 14px;background:var(--adim);border:1px solid var(--accent);border-radius:var(--rs);color:var(--a2);font-size:11px;font-weight:600;cursor:pointer}

/* ═══ DEPOT PAGE ═══ */
.depot-wrap{max-width:960px}

/* Onboarding step */
.onboard-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:28px;box-shadow:var(--shadow);margin-bottom:20px;text-align:center}
.onboard-icon{font-size:40px;margin-bottom:12px}
.onboard-title{font-size:18px;font-weight:700;margin-bottom:6px}
.onboard-sub{font-size:13px;color:var(--muted);line-height:1.6;margin-bottom:20px;max-width:420px;margin-left:auto;margin-right:auto}

/* Import zone */
.import-zone{background:var(--bg3);border:2px dashed var(--border);border-radius:var(--r);padding:24px;text-align:center;transition:all .2s;cursor:pointer}
.import-zone:hover,.import-zone.drag-over{border-color:var(--accent);background:rgba(16,185,129,.03)}
.import-zone-icon{font-size:28px;margin-bottom:8px}
.import-zone-text{font-size:13px;font-weight:600;color:var(--text);margin-bottom:4px}
.import-zone-sub{font-size:11px;color:var(--hint)}

/* Import status bar */
.import-status{display:none;align-items:center;gap:10px;padding:12px 16px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--rs);margin-bottom:16px;box-shadow:var(--shadow)}
.import-status.show{display:flex}
.import-spinner{width:18px;height:18px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;flex-shrink:0}

/* Depot table */
.depot-table-wrap{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);margin-bottom:14px}
.depot-table{width:100%;border-collapse:collapse}
.depot-table th{padding:10px 12px;text-align:left;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--hint);background:var(--bg3);border-bottom:1px solid var(--border);white-space:nowrap}
.depot-table td{padding:6px 8px;border-bottom:1px solid var(--border);vertical-align:middle}
.depot-table tr:last-child td{border-bottom:none}
.depot-table tr:hover td{background:var(--bg3)}

/* ── Depot form ── */
.form-field{margin-bottom:14px}
.form-lbl{display:block;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.form-hint{font-size:10px;color:var(--hint);margin-top:4px}
.form-in{width:100%;height:42px;background:var(--bg3);border:1.5px solid var(--border);border-radius:var(--rs);color:var(--text);font-size:14px;padding:0 12px;outline:none;transition:all .15s;font-family:var(--sans)}
.form-in:focus{border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px rgba(16,185,129,.1)}
.form-in::placeholder{color:var(--hint);font-size:13px}
.form-mono{font-family:var(--mono)!important}
.form-sel{width:100%;height:42px;background:var(--bg3);border:1.5px solid var(--border);border-radius:var(--rs);color:var(--text);font-size:13px;padding:0 10px;outline:none;cursor:pointer;transition:border-color .15s}
.form-sel:focus{border-color:var(--accent);background:#fff}
/* Remove number spinners */
.form-in::-webkit-outer-spin-button,.form-in::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.form-in[type=number]{-moz-appearance:textfield}

/* ── Depot overview cards ── */
.ov-card{background:#fff;border:1px solid var(--border);border-radius:var(--r);margin-bottom:10px;box-shadow:var(--shadow);display:grid;grid-template-columns:1fr auto;align-items:center;overflow:hidden;transition:all .2s;border-left:3px solid var(--border)}
.ov-card:hover{box-shadow:var(--shadow-md);transform:translateX(2px);border-left-color:var(--accent)}
.ov-card-left{padding:14px 16px;display:flex;align-items:center;gap:14px;min-width:0}
.ov-ticker{font-family:var(--mono);font-size:12px;font-weight:700;background:var(--bg4);border:1px solid var(--border);border-radius:6px;padding:4px 10px;white-space:nowrap;color:var(--text)}
.ov-name{font-size:14px;font-weight:600;color:var(--text)}
.ov-meta{font-size:11px;color:var(--muted);margin-top:2px}
.ov-prices{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.ov-price-block{text-align:right}
.ov-price-lbl{font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--hint);margin-bottom:2px}
.ov-price-val{font-family:var(--mono);font-size:14px;font-weight:600;color:var(--text)}
.ov-price-sub{font-family:var(--mono);font-size:11px;margin-top:1px}
.ov-card-right{padding:12px 14px;display:flex;flex-direction:column;gap:6px;border-left:1px solid var(--border);background:var(--bg3);align-self:stretch;justify-content:center;min-width:110px}
.ov-edit-btn{padding:6px 12px;background:#fff;border:1px solid var(--border);border-radius:var(--rs);font-size:11px;font-weight:600;color:var(--muted);cursor:pointer;transition:all .12s;white-space:nowrap}
.ov-edit-btn:hover{color:var(--accent);border-color:var(--accent)}
.ov-ai-btn{padding:6px 12px;background:var(--adim);border:1px solid var(--accent);border-radius:var(--rs);font-size:11px;font-weight:600;color:var(--accent);cursor:pointer;transition:all .12s;white-space:nowrap}
.ov-ai-btn:hover{background:rgba(16,185,129,.18)}
.ov-del-btn{padding:4px 8px;background:none;border:1px solid var(--border);border-radius:var(--rs);font-size:11px;color:var(--hint);cursor:pointer;transition:all .12s;white-space:nowrap}
.ov-del-btn:hover{color:#ef4444;border-color:#ef4444}
.pnl-chip{display:inline-flex;align-items:center;padding:4px 10px;border-radius:7px;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.01em}
.pnl-chip.up{color:#065f46;background:#d1fae5}
.pnl-chip.dn{color:#991b1b;background:#fee2e2}
/* inline edit inputs */
.dt-in{background:transparent;border:1px solid transparent;border-radius:5px;color:var(--text);font-size:13px;padding:4px 7px;outline:none;width:100%;transition:all .12s}
.dt-in:focus{border-color:var(--accent);background:var(--bg2)}
.dt-in::placeholder{color:var(--hint)}
.dt-sel{background:var(--bg3);border:1px solid var(--border);border-radius:5px;color:var(--text);font-size:12px;padding:4px 6px;outline:none;cursor:pointer;width:100%}
.dt-sel:focus{border-color:var(--accent)}
/* per-row KI button */
.ai-row-btn{padding:4px 9px;background:rgba(99,102,241,.08);border:1px solid rgba(99,102,241,.25);border-radius:5px;color:var(--indigo);font-size:11px;font-weight:600;cursor:pointer;white-space:nowrap;transition:all .12s}
.ai-row-btn:hover{background:rgba(99,102,241,.14)}
/* P&L cells */
.pnl-up{color:var(--uptxt);font-family:var(--mono);font-size:12px;font-weight:600}
.pnl-dn{color:var(--dntxt);font-family:var(--mono);font-size:12px;font-weight:600}
.pnl-na{color:var(--hint);font-family:var(--mono);font-size:12px}
/* AI analysis panel */
.ai-panel{background:var(--bg2);border:1px solid var(--border);border-left:3px solid var(--indigo);border-radius:var(--rs);padding:16px 18px;margin-top:14px;display:none;animation:fadeIn .2s ease}
.ai-panel.show{display:block}
.ai-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.ai-panel-title{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--indigo)}
.ai-thinking{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)}
.aidot{width:6px;height:6px;border-radius:50%;background:var(--indigo);animation:aidot 1.2s ease-in-out infinite}
.aidot:nth-child(2){animation-delay:.2s}.aidot:nth-child(3){animation-delay:.4s}
@keyframes aidot{0%,80%,100%{opacity:.2;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}
.ai-text{font-size:13px;color:var(--muted);line-height:1.8}
/* Recommendation badge */
.rec-hold{display:inline-block;padding:2px 10px;border-radius:4px;font-weight:700;font-size:12px;background:#fef3c7;color:#92400e}
.rec-buy{display:inline-block;padding:2px 10px;border-radius:4px;font-weight:700;font-size:12px;background:var(--udim);color:var(--uptxt)}
.rec-sell{display:inline-block;padding:2px 10px;border-radius:4px;font-weight:700;font-size:12px;background:var(--ddim);color:var(--dntxt)}
/* toast */
.toast{display:none;align-items:center;gap:8px;padding:10px 16px;background:#d1fae5;border:1px solid #6ee7b7;border-radius:var(--rs);font-size:13px;color:var(--uptxt);font-weight:600;margin-top:10px}
.toast.show{display:flex}

/* ═══ NEWS DRAWER ═══ */
.drawer-overlay{position:fixed;inset:0;background:rgba(26,32,56,.4);backdrop-filter:blur(3px);z-index:100;opacity:0;pointer-events:none;transition:opacity .25s}
.drawer-overlay.open{opacity:1;pointer-events:all}
.drawer{position:fixed;top:0;right:0;bottom:0;width:500px;max-width:100vw;background:var(--bg2);box-shadow:-4px 0 32px rgba(0,0,0,.12);z-index:101;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1)}
.drawer.open{transform:translateX(0)}
.drawer-head{padding:18px 20px 16px;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;gap:12px;background:var(--bg3)}
.drawer-body{flex:1;overflow-y:auto;padding:20px}
.drawer-sec{margin-bottom:20px}
.drawer-sec-label{font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--hint);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.drawer-sec-label::after{content:'';flex:1;height:1px;background:var(--border)}
.ai-box{background:var(--bg3);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:var(--rs);padding:14px 16px}
.drawer-link{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:var(--adim);border:1px solid var(--accent);border-radius:var(--rs);font-size:12px;color:var(--a2);font-weight:600;transition:all .12s}
.drawer-link:hover{background:rgba(16,185,129,.18)}
.ctx-cards{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.ctx-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--rs);padding:10px 14px;flex:1;min-width:100px}
.ctx-card-label{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--hint);margin-bottom:4px}

/* ═══ WATCHLIST PAGE ═══ */
#wl-list{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:4px 15px;box-shadow:var(--shadow)}

/* ═══ SETTINGS PAGE ═══ */
.widget-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:12px;margin-bottom:26px}
.wgt-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:15px 13px 13px;cursor:pointer;transition:all .15s;position:relative;box-shadow:var(--shadow)}
.wgt-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-1px)}
.wgt-card.on{border-color:var(--accent);box-shadow:0 0 0 2px rgba(16,185,129,.12)}
.wgt-check{position:absolute;top:10px;right:10px;width:18px;height:18px;border-radius:50%;border:2px solid var(--border);background:var(--bg4);transition:all .15s}
.wgt-card.on .wgt-check{background:var(--accent);border-color:var(--accent)}
.wgt-card.on .wgt-check::after{content:'✓';display:block;font-size:9px;font-weight:900;color:#fff;text-align:center;line-height:14px}
.wgt-icon{font-size:24px;margin-bottom:7px}
.wgt-name{font-size:12px;font-weight:700;color:var(--text);margin-bottom:3px}
.wgt-desc{font-size:10px;color:var(--muted);line-height:1.4}
.set-section{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:16px 18px;margin-bottom:14px;box-shadow:var(--shadow)}
.set-sec-title{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--hint);margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.set-row{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--border)}
.set-row:last-child{border-bottom:none}
.set-row-label{font-size:13px;font-weight:500;color:var(--text)}
.set-row-sub{font-size:11px;color:var(--muted);margin-top:1px}
.set-inp{height:30px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--rs);color:var(--text);font-size:12px;padding:0 10px;outline:none;width:180px;transition:border-color .12s}
.set-inp:focus{border-color:var(--accent);background:var(--bg2)}
.set-inp::placeholder{color:var(--hint)}

/* ═══ AUTH ═══ */
.auth-overlay{position:fixed;inset:0;background:linear-gradient(135deg,#eef1f8 0%,#e4e9f4 100%);z-index:500;display:flex;align-items:center;justify-content:center;padding:20px}
.auth-overlay.hidden{display:none}
.auth-box{background:#fff;border:1px solid var(--border);border-radius:20px;width:100%;max-width:420px;padding:36px 32px;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.auth-box::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 140% 60% at 100% 0%,rgba(16,185,129,.08) 0%,transparent 60%);pointer-events:none}
.auth-logo-area{display:flex;flex-direction:column;align-items:center;margin-bottom:26px;position:relative;z-index:1}
.auth-bars{display:flex;align-items:flex-end;gap:3px;height:22px;margin-bottom:6px}
.auth-bars span{border-radius:2px 2px 0 0}
.auth-bars span:nth-child(1){width:4px;height:11px;background:rgba(16,185,129,.3)}
.auth-bars span:nth-child(2){width:4px;height:18px;background:#059669}
.auth-bars span:nth-child(3){width:4px;height:8px;background:rgba(16,185,129,.3)}
.auth-bars span:nth-child(4){width:4px;height:22px;background:#10b981}
.auth-bars span:nth-child(5){width:4px;height:14px;background:#059669}
.auth-brand{font-family:var(--brand);font-size:24px;letter-spacing:4px;color:#1e2640;line-height:1}
.auth-brand em{color:#10b981;font-style:normal}
.auth-brand-sub{font-size:8px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--hint);margin-top:2px}
.auth-title{position:relative;z-index:1;font-size:17px;font-weight:700;color:var(--text);margin-bottom:5px}
.auth-sub{position:relative;z-index:1;font-size:13px;color:var(--muted);margin-bottom:22px;line-height:1.5}
.auth-field{position:relative;z-index:1;margin-bottom:13px}
.auth-field label{display:block;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--hint);margin-bottom:5px}
.auth-input{width:100%;height:42px;background:var(--bg3);border:1.5px solid var(--border);border-radius:var(--rs);color:var(--text);font-size:14px;padding:0 14px;outline:none;transition:all .15s}
.auth-input:focus{border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px rgba(16,185,129,.1)}
.auth-input::placeholder{color:var(--hint)}
.auth-consent{display:flex;align-items:flex-start;gap:10px;margin:12px 0;position:relative;z-index:1}
.auth-consent input{margin-top:3px;width:15px;height:15px;accent-color:var(--accent);flex-shrink:0;cursor:pointer}
.auth-consent span{font-size:11px;color:var(--muted);line-height:1.5}
.auth-consent a{color:var(--accent);cursor:pointer}
.auth-btn{position:relative;z-index:1;width:100%;height:44px;background:var(--a2);border:none;border-radius:var(--rs);color:#fff;font-size:14px;font-weight:700;cursor:pointer;transition:all .15s;box-shadow:0 2px 8px rgba(5,150,105,.28);margin-top:6px}
.auth-btn:hover{background:var(--accent);box-shadow:0 4px 14px rgba(16,185,129,.35);transform:translateY(-1px)}
.auth-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.auth-error{position:relative;z-index:1;font-size:12px;color:#dc2626;margin-top:7px;text-align:center;min-height:16px}
.auth-switch{position:relative;z-index:1;text-align:center;font-size:12px;color:var(--muted);margin-top:14px}
.auth-switch a{color:var(--accent);cursor:pointer;font-weight:600}

/* ═══ PRIVACY / COOKIE ═══ */
.privacy-modal{display:none;position:fixed;inset:0;background:rgba(26,32,56,.5);backdrop-filter:blur(4px);z-index:600;align-items:center;justify-content:center;padding:20px}
.privacy-modal.show{display:flex}
.privacy-box{background:#fff;border:1px solid var(--border);border-radius:16px;max-width:480px;width:100%;max-height:80vh;overflow-y:auto;padding:26px 26px 22px;position:relative;box-shadow:var(--shadow-lg)}
.cookie-bar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:400;padding:12px 20px;background:#fff;border-top:1px solid var(--border);align-items:center;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--muted);box-shadow:0 -4px 16px rgba(0,0,0,.06)}
.cookie-bar.show{display:flex}

/* ═══ ADMIN ═══ */
.admin-kpi-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:20px}
.akpi{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.akpi::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--accent),#34d399)}
.akpi-label{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--hint);margin-bottom:6px}
.akpi-val{font-family:var(--mono);font-size:24px;font-weight:600;color:var(--text)}
.akpi-sub{font-size:10px;color:var(--hint);margin-top:4px}
.admin-section{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;margin-bottom:12px;box-shadow:var(--shadow)}
.admin-sec-title{font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--hint);margin-bottom:12px;padding-bottom:7px;border-bottom:1px solid var(--border)}
.user-tbl{width:100%;border-collapse:collapse}
.user-tbl th{padding:8px 12px;text-align:left;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--hint);background:var(--bg3);border-bottom:1px solid var(--border)}
.user-tbl td{padding:9px 12px;border-bottom:1px solid var(--border);font-size:12px;vertical-align:middle}
.user-tbl tr:last-child td{border-bottom:none}
.user-tbl tr:hover td{background:var(--bg3)}
.online-dot{width:7px;height:7px;border-radius:50%;background:var(--hint);display:inline-block}
.online-dot.on{background:#10b981;box-shadow:0 0 5px #10b981}
.role-badge{font-size:9px;font-weight:700;padding:2px 8px;border-radius:4px;letter-spacing:.05em;text-transform:uppercase}
.role-badge.admin{color:var(--uptxt);background:var(--udim)}
.role-badge.user{color:var(--muted);background:var(--bg4)}
.act-bar{height:4px;background:var(--bg4);border-radius:2px;overflow:hidden;width:54px}
.act-fill{height:100%;background:var(--accent);border-radius:2px}

/* ═══ RESPONSIVE ═══ */
/* ════════════════════════════════════════
   MOBILE BOTTOM NAV
════════════════════════════════════════ */
.mob-nav{
  display:none;
  position:fixed;bottom:0;left:0;right:0;
  height:62px;
  /* Fix 2: Solid opaque background — no bleed-through */
  background:#0e1520;
  border-top:1px solid rgba(255,255,255,.1);
  z-index:100;
  flex-direction:row;
  align-items:stretch;
  box-shadow:0 -2px 20px rgba(0,0,0,.45);
}
.mob-nav-btn{
  flex:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;
  background:none;border:none;
  color:rgba(255,255,255,.38);
  cursor:pointer;
  transition:all .15s;
  -webkit-tap-highlight-color:transparent;
  padding:6px 2px 8px;
  position:relative;
}
/* Fix 3: Labels ALWAYS visible, not just on active */
.mob-nav-btn.active{ color:#10b981; }
.mob-nav-btn.active::after{
  content:'';position:absolute;top:0;left:20%;right:20%;height:2px;
  background:#10b981;border-radius:0 0 2px 2px;
}
.mob-nav-btn:active{ background:rgba(255,255,255,.04); border-radius:8px; }
.mob-nav-icon{ font-size:19px;line-height:1; }
/* Fix 3: label always shown */
.mob-nav-lbl{ font-size:9px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:inherit; }

/* Mobile widget picker pills */
.mob-pick-btn{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:10px 14px;
  background:var(--bg3);border:1.5px solid var(--border);border-radius:10px;
  font-size:12px;color:var(--muted);cursor:pointer;transition:all .15s;
  min-width:80px;
}
.mob-pick-btn:hover{ border-color:var(--b2);color:var(--text); }
.mob-pick-btn.active{ background:#d1fae5;border-color:#6ee7b7;color:#065f46;font-weight:600; }
@keyframes shake{
  0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)}
}

/* ════════════════════════════════════════
   MOBILE LAYOUT (≤ 768px)
════════════════════════════════════════ */
@media(max-width:768px){
  /* ── Layout ── */
  .sidebar{ display:none !important; }
  .mob-nav{ display:flex; }
  #feedback-btn{ display:none; }
  .app{ display:block; }
  .page{ padding:14px 14px 84px; min-height:100vh; }

  /* ── Page headers ── */
  .ph{ flex-direction:column; align-items:flex-start; gap:10px; padding:0 0 14px; }
  .ph-title{ font-size:18px !important; }
  .ph-sub{ font-size:11px !important; }
  .row-btns{ width:100%; display:flex; gap:8px; }
  .row-btns .btn-ghost{ flex:1; justify-content:center; }
  .row-btns .btn-primary{ flex:1; justify-content:center; }
  /* Hide desktop Today/Since buy tabs — replaced by mob-view-indicator */
  .ph .tabs{ display:none; }
  .ph .btn-ghost[onclick*="fetchAll"]{ display:none; }

  /* ── KPI cards ── */
  .summary-grid{ grid-template-columns:repeat(2,1fr); gap:8px; }
  .kpi{ padding:12px 14px; }
  .kpi-value{ font-size:18px !important; }
  .kpi-label{ font-size:9px; }
  .kpi-sub{ font-size:10px; }

  /* ── Widget grid ── */
  .mod-grid{ grid-template-columns:1fr; gap:10px; }
  .mod[data-wide],.mod[data-small]{ grid-column:1; }
  .mob-mod{ margin:0; }
  .drag-handle{ display:none; }
  .mod{ border-radius:10px; }
  .mod-head{ padding:10px 14px 8px; }
  .mod-title{ font-size:11px; }
  .mod-body{ padding:10px 14px 14px; }

  /* ── Bloomberg portfolio table ── */
  .bt-wrap{ border-radius:10px; }
  .bt-fullname{ max-width:100px; }
  .bt-num{ padding:8px 6px; font-size:11px; }
  .bt-name{ padding:8px 8px; }
  .bt-th{ padding:6px 6px; font-size:8px; }
  .bt-actions{ padding:4px 4px; white-space:nowrap; }
  .bta-btn{ width:28px; height:28px; font-size:13px; }
  /* Hide less critical columns on narrow screens */
  .bt th:nth-child(3),.bt td:nth-child(3){ display:none; }  /* Avg Buy */
  .bt th:nth-child(5),.bt td:nth-child(5){ display:none; }  /* Day % */
  .bt th:nth-child(9),.bt td:nth-child(9){ display:none; }  /* Alloc */
  /* Portfolio rename/delete bar wraps on mobile */
  .bt-wrap > div:first-child > div{ flex-wrap:wrap; }

  /* ── Portfolio tabs ── */
  #portfolio-tab-bar{ overflow-x:auto; -webkit-overflow-scrolling:touch; flex-wrap:nowrap; padding-bottom:8px; }
  .ptab{ flex-shrink:0; padding:5px 10px; font-size:11px; }

  /* ── Depot form ── */
  #depot-form{ max-width:100%; }
  .form-in{ font-size:16px !important; }  /* Prevent iOS zoom */
  .form-sel{ font-size:16px !important; }  /* Prevent iOS zoom on selects */
  /* Buy/qty side-by-side grid → stacked on very small screens */
  @media(max-width:380px){
    .form-in[id="f-buy"], .form-in[id="f-qty"]{ width:100%; }
    div[style*="grid-template-columns:1fr 1fr"]{ grid-template-columns:1fr !important; }
  }

  /* ── Charts ── */
  #depot-chart-wrap{ padding:12px; }
  #depot-chart{ max-height:180px; }
  #depot-sortbar{ overflow-x:auto; -webkit-overflow-scrolling:touch; flex-wrap:nowrap; gap:6px; padding:8px 14px; }
  .sort-btn{ white-space:nowrap; flex-shrink:0; }

  /* ── News ── */
  .ni{ padding:10px 8px; }

  /* ── Watchlist ── */
  .wl-add{ flex-direction:column; gap:8px; }
  .wl-add input{ width:100% !important; font-size:16px !important; }

  /* ── Auth ── */
  .auth-box{ padding:20px 18px; border-radius:14px; max-width:100%; }
  .auth-input{ height:48px; font-size:16px !important; }
  .auth-btn{ height:52px; font-size:15px; font-weight:700; }
  /* Forgot password link — make it a proper touch target */
  .auth-switch a{ padding:4px 0; display:inline-block; }

  /* ── Settings ── */
  .set-row{ flex-direction:column; align-items:flex-start; gap:8px; }
  .set-row > *{ width:100%; }
  .set-inp{ width:100% !important; font-size:16px !important; }
  /* City search results full width */
  #city-results{ left:0; right:0; }

  /* ── News drawer ── */
  .drawer{ width:100vw !important; }
  .ai-panel{ width:100%; box-sizing:border-box; }

  /* ── Broker picker — bottom sheet ── */
  #broker-picker-overlay{ padding:0; align-items:flex-end; }
  #broker-picker-overlay > div{
    border-radius:20px 20px 0 0;
    max-width:100%; max-height:88vh;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
  }
  /* Compact broker grid on mobile — single column */
  #broker-cards > div[style*="grid-template-columns:1fr 1fr"]{ grid-template-columns:1fr !important; }
  #broker-cards > div[style*="grid-template-columns:1fr 1fr 1fr"]{ grid-template-columns:1fr 1fr !important; }
  .broker-card-left{ padding:10px 12px; }
  .broker-logo{ width:32px; height:32px; font-size:9px; }
  .broker-name{ font-size:12px; }
  .broker-desc{ font-size:9px; }
  .bi-upload-btn{ height:50px; font-size:14px; }

  /* ── Import review ── */
  #import-review{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  #import-review table{ min-width:420px; }

  /* ── Onboarding ── */
  #onboarding-overlay{ padding:0; align-items:flex-end; }
  #onboarding-overlay > div{ border-radius:20px 20px 0 0; max-height:92vh; overflow-y:auto; }

  /* ── Admin ── */
  .admin-kpi-grid{ grid-template-columns:repeat(2,1fr); }
  .akpi{ padding:12px; }

  /* ── Feedback overlay ── */
  #feedback-overlay{ padding:0; align-items:flex-end; }
  #feedback-overlay > div{ border-radius:20px 20px 0 0; max-height:88vh; overflow-y:auto; }
}
/* Tablet (769–900px) — keep sidebar but adjust grid */
@media(min-width:769px) and (max-width:900px){
  .sidebar{display:none}
  .mob-nav{display:flex}
  .page{padding:16px 14px 80px}
  .summary-grid{grid-template-columns:repeat(2,1fr)}
  .mod-grid{grid-template-columns:repeat(2,1fr)}
  .mod[data-wide]{grid-column:1/-1}
  .drawer{width:100vw}
}
/* ── Depot sort bar ── */
.sort-btn{padding:5px 11px;font-size:11px;font-weight:600;border:1px solid var(--border);border-radius:5px;background:var(--bg3);color:var(--muted);cursor:pointer;transition:all .12s;white-space:nowrap}
.sort-btn:hover{border-color:var(--accent);color:var(--accent)}
.sort-btn.active{background:var(--adim);border-color:var(--accent);color:var(--a2)}

/* ── Feedback button type pills ── */
.fb-type{padding:5px 12px;background:var(--bg4);border:1.5px solid var(--border);border-radius:20px;font-size:12px;font-weight:500;color:var(--muted);cursor:pointer;transition:all .12s;white-space:nowrap}
.fb-type:hover{border-color:var(--b2);color:var(--text)}
.fb-type.active{background:#d1fae5;border-color:#6ee7b7;color:#065f46;font-weight:700}
#feedback-btn:hover{padding-right:12px;border-radius:10px 0 0 10px}

/* ── Position chart ── */
.ov-chart-btn{padding:5px 10px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--rs);font-size:11px;font-weight:600;color:var(--muted);cursor:pointer;transition:all .12s;white-space:nowrap}
.ov-chart-btn:hover{color:var(--a2);border-color:#6ee7b7;background:#d1fae5}
.pci-btn{padding:3px 8px;background:var(--bg3);border:1px solid var(--border);border-radius:4px;font-size:10px;font-weight:600;color:var(--hint);cursor:pointer;transition:all .1s;font-family:var(--mono)}
.pci-btn:hover{color:var(--text);border-color:var(--b2)}
.pci-btn.active{background:#d1fae5;border-color:#6ee7b7;color:#065f46}

/* ── Depot chart range buttons ── */
.dcr-btn{padding:4px 10px;background:var(--bg3);border:1px solid var(--border);border-radius:5px;font-size:11px;font-weight:700;color:var(--hint);cursor:pointer;transition:all .12s;font-family:var(--mono)}
.dcr-btn:hover{color:var(--text);border-color:var(--b2)}
.dcr-btn.active{background:#d1fae5;border-color:#6ee7b7;color:#065f46}

/* ── Chart position selector & benchmark buttons ── */
.chart-pos-btn{padding:4px 10px;background:var(--bg3);border:1.5px solid var(--border);border-radius:20px;font-size:11px;font-weight:700;color:var(--muted);cursor:pointer;transition:all .12s;font-family:var(--mono)}
.chart-pos-btn:hover{color:var(--text);border-color:var(--b2)}
.chart-pos-btn.active{background:#d1fae5;border-color:#6ee7b7;color:#065f46}
.bench-btn{padding:4px 10px;background:var(--bg3);border:1.5px solid var(--border);border-radius:20px;font-size:11px;font-weight:600;color:var(--muted);cursor:pointer;transition:all .12s;white-space:nowrap}
.bench-btn:hover{color:var(--text);border-color:var(--b2)}
.bench-btn.active{background:#ede9fe;border-color:#a78bfa;color:#5b21b6}

/* ── Widget config buttons ── */
.wgt-size-btn{
  padding:4px 12px;background:var(--bg4);border:1px solid var(--border);
  border-radius:6px;font-size:11px;font-weight:600;color:var(--hint);
  cursor:pointer;transition:all .15s;
  display:inline-flex;align-items:center;gap:4px;
}
.wgt-size-btn:hover{border-color:var(--b2);color:var(--text)}
.wgt-size-btn.active{
  background:var(--text);border-color:var(--text);color:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
}
.wgt-cfg-btn{padding:3px 8px;background:var(--bg3);border:1px solid var(--border);border-radius:4px;font-size:10px;font-weight:600;color:var(--muted);cursor:pointer;transition:all .12s}
.wgt-cfg-btn:hover{color:var(--accent);border-color:var(--accent)}
.cfg-item-btn{padding:5px 11px;background:var(--bg3);border:1.5px solid var(--border);border-radius:20px;font-size:12px;font-weight:500;color:var(--muted);cursor:pointer;transition:all .12s}
.cfg-item-btn:hover{border-color:var(--b2);color:var(--text)}
.cfg-item-btn.active{background:#d1fae5;border-color:#6ee7b7;color:#065f46;font-weight:700}
.cfg-count-btn{width:36px;height:36px;background:var(--bg3);border:1.5px solid var(--border);border-radius:8px;font-size:13px;font-weight:700;color:var(--muted);cursor:pointer;transition:all .12s}
.cfg-count-btn.active{background:#d1fae5;border-color:#6ee7b7;color:#065f46}

/* ── AI Tips widget ── */
.ait-style-btn{
  padding:10px 6px;background:var(--bg3);border:1.5px solid var(--border);
  border-radius:10px;cursor:pointer;transition:all .15s;
  color:var(--muted);text-align:center;line-height:1.3;
  display:flex;flex-direction:column;align-items:center;gap:2px;
}
.ait-style-btn:hover{ border-color:var(--b2);color:var(--text);background:var(--bg4); }
.ait-style-btn.active{
  background:linear-gradient(135deg,rgba(16,185,129,.12),rgba(99,102,241,.08));
  border-color:var(--accent);color:var(--a2);font-weight:700;
}

/* ── Onboarding ── */
.ob-step-dot{width:8px;height:8px;border-radius:50%;background:var(--bg4);transition:all .3s}
.ob-step-dot.active{background:var(--accent);width:24px;border-radius:4px}
.ob-feature-row{display:flex;align-items:flex-start;gap:12px;padding:10px 14px;background:var(--bg3);border-radius:10px;font-size:13px;color:var(--text)}
.ob-feature-row span{font-size:22px;flex-shrink:0;margin-top:1px}
.ob-btn-primary{width:100%;height:44px;background:linear-gradient(135deg,#10b981,#0d9488);border:none;border-radius:10px;color:#fff;font-size:14px;font-weight:700;cursor:pointer;transition:all .15s;letter-spacing:.02em}
.ob-btn-primary:hover{opacity:.9;transform:translateY(-1px)}
.ob-btn-secondary{background:var(--bg3);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:13px;font-weight:600;cursor:pointer;transition:all .12s}
.ob-btn-secondary:hover{border-color:var(--accent);color:var(--accent)}
.ob-widget-pill{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px;background:var(--bg3);border:2px solid var(--border);border-radius:10px;cursor:pointer;transition:all .15s;font-size:11px;font-weight:600;color:var(--muted);text-align:center}
.ob-widget-pill:hover{border-color:var(--b2);color:var(--text)}
.ob-widget-pill.active{background:#d1fae5;border-color:#6ee7b7;color:#065f46}
.ob-widget-pill .ob-pill-icon{font-size:20px}

/* ── Design extras ── */
@keyframes numFlash{0%{opacity:.4}50%{opacity:1}100%{opacity:.4}}
.num-update{animation:numFlash .4s ease}
@keyframes slideIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.mod.fade-in{animation:slideIn .3s ease}
/* Gradient text for big KPI values */
.kpi-value.up{
  background:linear-gradient(135deg,#059669,#10b981);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.kpi-value.dn{
  background:linear-gradient(135deg,#dc2626,#ef4444);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
/* Widget card in settings — hover glow */
.wgt-card{transition:all .18s}
.wgt-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.wgt-card.on{box-shadow:0 4px 16px rgba(16,185,129,.12),var(--shadow)}
/* Scrollbar */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--b2)}
/* Summary grid gap */
.summary-grid{gap:16px}

/* ── Broker import ── */
.broker-card{
  padding:18px 14px;background:var(--bg3);border:2px solid var(--border);
  border-radius:12px;cursor:pointer;transition:all .15s;text-align:center;
  color:var(--text);
}
.broker-card:hover{border-color:var(--accent);background:rgba(16,185,129,.04);transform:translateY(-2px);box-shadow:var(--shadow-md)}

/* ── Broker picker modal ── */
.broker-card{border:1.5px solid var(--border);border-radius:14px;overflow:hidden;cursor:pointer;transition:all .18s;background:#fff}
.broker-card:hover{border-color:var(--accent);box-shadow:0 4px 16px rgba(16,185,129,.1)}
.broker-card.selected{border-color:var(--accent);box-shadow:0 0 0 3px rgba(16,185,129,.12)}
.broker-card-left{display:flex;align-items:center;gap:14px;padding:14px 16px}
.broker-logo{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex-shrink:0;letter-spacing:.02em}
.broker-name{font-size:14px;font-weight:700;color:var(--text);margin-bottom:2px}
.broker-desc{font-size:11px;color:var(--hint)}
.broker-card-arrow{margin-left:auto;padding-right:16px;font-size:20px;color:var(--hint);transition:all .15s;flex-shrink:0}
.broker-card.selected .broker-card-arrow{color:var(--accent);transform:rotate(90deg)}
.broker-instructions{display:none;padding:14px 16px 16px;background:var(--bg3);border-top:1px solid var(--border)}
.broker-card.selected .broker-instructions{display:block}
.bi-step{display:flex;align-items:flex-start;gap:10px;margin-bottom:8px;font-size:13px;color:var(--text);line-height:1.45}
.bi-num{width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.bi-tip{background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.2);border-radius:8px;padding:10px 12px;font-size:11px;color:#065f46;margin:12px 0;line-height:1.5}
.bi-upload-btn{width:100%;height:44px;margin-top:4px;background:linear-gradient(135deg,var(--a2),#0d9488);border:none;border-radius:10px;color:#fff;font-size:13px;font-weight:700;cursor:pointer;transition:all .15s;letter-spacing:.02em}
.bi-upload-btn:hover{opacity:.9;transform:translateY(-1px)}

/* ══ Portfolio tabs ══ */
.ptab{display:flex;align-items:center;gap:6px;padding:6px 14px;background:var(--bg3);border:1.5px solid var(--border);border-radius:20px;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;transition:all .15s;white-space:nowrap}
.ptab:hover{color:var(--text);border-color:var(--b2)}
.ptab.active{background:#fff;border-color:var(--accent);color:var(--text);box-shadow:var(--shadow)}
.ptab-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.ptab-add{background:none;border-style:dashed;color:var(--hint)}
.ptab-add:hover{border-color:var(--accent);color:var(--accent);background:var(--adim)}

/* ══ Bloomberg table ══ */
.bt-wrap{background:#fff;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.bt{width:100%;border-collapse:collapse;font-size:12px}
.bt-th{padding:8px 12px;text-align:right;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--hint);background:var(--bg3);border-bottom:2px solid var(--border);cursor:pointer;white-space:nowrap;user-select:none;transition:color .12s}
.bt-th:first-child{text-align:left}
.bt-th:hover{color:var(--text)}
.bt-th-active{color:var(--accent)!important}
.bt-row{border-bottom:1px solid var(--border);transition:background .1s;position:relative}
.bt-row::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--rc,var(--accent));opacity:0;transition:opacity .15s}
.bt-row:hover{background:var(--bg3)}
.bt-row:hover::before{opacity:1}
.bt-chart-row{background:var(--bg3)}
.bt-totals{border-top:2px solid var(--border);background:var(--bg4)}
.bt-totals-lbl{font-size:9px;font-weight:800;letter-spacing:.14em;color:var(--hint)}
.bt-name{padding:10px 12px;text-align:left}
.bt-num{padding:10px 12px;text-align:right;font-family:var(--mono);color:var(--text);white-space:nowrap}
.bt-bold{font-weight:700}
.bt-price{font-weight:600}
.bt-ticker{font-family:var(--mono);font-size:11px;font-weight:700;background:var(--bg4);border:1px solid var(--border);border-radius:5px;padding:2px 7px;color:var(--text);white-space:nowrap;flex-shrink:0}
.bt-fullname{font-size:12px;font-weight:500;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}
.bt-pbadge{font-size:9px;font-weight:700;letter-spacing:.06em;border-radius:4px;padding:1px 7px;border:1px solid;white-space:nowrap;flex-shrink:0}
.bt-badge{font-family:var(--mono);font-size:11px;font-weight:700;padding:2px 7px;border-radius:5px;display:inline-block}
.bt-badge.up{color:var(--uptxt);background:var(--udim)}
.bt-badge.dn{color:var(--dntxt);background:var(--ddim)}
.bt-alloc-cell{padding:10px 12px;display:flex;align-items:center;gap:6px;min-width:100px}
.bt-alloc-wrap{flex:1;height:5px;background:var(--bg4);border-radius:3px;overflow:hidden}
.bt-alloc-bar{height:100%;border-radius:3px;transition:width .6s cubic-bezier(.34,1.4,.64,1)}
.bt-alloc-pct{font-family:var(--mono);font-size:10px;color:var(--hint);font-weight:600;white-space:nowrap}
.bt-actions{padding:6px 10px;text-align:center;white-space:nowrap}
.bta-btn{width:26px;height:26px;background:none;border:none;cursor:pointer;border-radius:5px;font-size:13px;padding:0;transition:all .12s;margin:0 1px}
.bta-btn:hover{background:var(--bg4)}
.bta-del:hover{background:#fee2e2;color:#ef4444}
.bta-text-btn{padding:4px 10px;background:none;border:1px solid var(--border);border-radius:6px;font-size:11px;font-weight:600;color:var(--muted);cursor:pointer;transition:all .12s}
.bta-text-btn:hover{color:var(--accent);border-color:var(--accent)}

/* ── Fix 4: Mobile view indicator ── */
#mob-view-indicator{display:none}
@media(max-width:768px){
  #mob-view-indicator{
    display:flex;gap:6px;
    background:var(--bg3);border:1px solid var(--border);
    border-radius:10px;padding:4px;
  }
  .mob-vi-btn{
    flex:1;height:32px;border:none;border-radius:7px;
    font-size:12px;font-weight:600;color:var(--muted);
    background:none;cursor:pointer;transition:all .15s;
  }
  .mob-vi-btn.active{
    background:#fff;color:var(--text);
    box-shadow:0 1px 4px rgba(0,0,0,.1);
  }
  /* Fix 3: desktop tabs hidden on mobile (redundant with indicator) */
  .ph .tabs{ display:none; }
}

/* ── Mobile actions bar (refresh on dashboard) ── */
#mob-actions-bar{ display:none; }
@media(max-width:768px){
  #mob-actions-bar{ display:flex; }
}

/* ══ Mobile Portfolio Cards ══ */
.mob-depot-list{display:flex;flex-direction:column;gap:0}

.mob-pos-card{
  padding:14px 16px;
  border-bottom:1px solid var(--border);
  border-left:3px solid var(--rc,var(--accent));
  background:#fff;
  position:relative;
  transition:background .12s;
}
.mob-pos-card:last-of-type{border-bottom:none}
.mob-pos-card:active{background:var(--bg3)}

/* Row 1: ticker + name left, P&L badge right */
.mob-pos-top{
  display:flex;align-items:center;justify-content:space-between;
  gap:8px;margin-bottom:5px;
}
.mob-pos-names{display:flex;align-items:center;gap:8px;min-width:0;flex:1}
.mob-pos-ticker{
  font-family:var(--mono);font-size:11px;font-weight:800;
  background:var(--bg4);border:1px solid var(--border);
  border-radius:5px;padding:2px 7px;
  color:var(--text);white-space:nowrap;flex-shrink:0;
}
.mob-pos-name{
  font-size:13px;font-weight:600;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mob-pos-pnl{
  font-family:var(--mono);font-size:13px;font-weight:800;
  flex-shrink:0;letter-spacing:-.01em;
}
.mob-pos-pnl.up{color:var(--uptxt)}
.mob-pos-pnl.dn{color:var(--dntxt)}

/* Row 2: price · qty · today% */
.mob-pos-mid{
  display:flex;align-items:center;gap:6px;
  font-size:12px;margin-bottom:10px;
}
.mob-pos-price{font-family:var(--mono);font-weight:600;color:var(--text)}
.mob-pos-sep{color:var(--hint)}
.mob-pos-qty{color:var(--muted)}
.mob-pos-today{font-family:var(--mono);font-size:11px;font-weight:600;margin-left:auto}
.mob-pos-today.up{color:var(--uptxt)}.mob-pos-today.dn{color:var(--dntxt)}

/* Row 3: 3 stats */
.mob-pos-stats{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:8px;margin-bottom:10px;
}
.mob-pos-stat{display:flex;flex-direction:column;gap:2px}
.mob-pos-stat-lbl{
  font-size:9px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--hint);
}
.mob-pos-stat-val{
  font-family:var(--mono);font-size:12px;font-weight:600;color:var(--text);
}
.mob-pos-stat-val.up{color:var(--uptxt)}
.mob-pos-stat-val.dn{color:var(--dntxt)}

/* Row 4: action buttons */
.mob-pos-actions{display:flex;gap:6px}
.mob-pos-btn{
  flex:1;height:32px;
  background:var(--bg3);border:1px solid var(--border);
  border-radius:7px;font-size:11px;font-weight:600;
  color:var(--muted);cursor:pointer;
  transition:all .12s;
  display:flex;align-items:center;justify-content:center;gap:3px;
}
.mob-pos-btn:active{background:var(--bg4)}
.mob-pos-del{flex:0 0 36px;color:var(--hint)}
.mob-pos-del:active{background:#fee2e2;color:#ef4444;border-color:#fecaca}

/* Totals bar */
.mob-totals{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:0;padding:12px 16px;
  background:var(--bg4);border-top:2px solid var(--border);
}
.mob-total-item{display:flex;flex-direction:column;gap:3px;text-align:center}
.mob-total-item:not(:last-child){border-right:1px solid var(--border)}
.mob-total-lbl{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--hint)}
.mob-total-val{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--text)}
.mob-total-val.up{color:var(--uptxt)}.mob-total-val.dn{color:var(--dntxt)}

/* ── Alloc sort buttons ── */
.alloc-sort-btn{padding:2px 9px;font-size:10px;font-weight:700;border:1px solid var(--border);border-radius:5px;background:var(--bg3);color:var(--hint);cursor:pointer;transition:all .12s}
.alloc-sort-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}