:root{
  --bg:#07070a;--bg2:#0f0f14;--bg3:#16161d;--bg4:#1e1e28;--bg5:#252532;
  --border:#2a2a38;--border2:#363648;
  --text:#e8e8f0;--text2:#9898b0;--text3:#606075;
  --green:#22c55e;--green2:#86efac;--green-bg:#052e16;--green-dim:#0a4020;
  --red:#ef4444;--red2:#fca5a5;--red-bg:#450a0a;--red-dim:#4a1010;
  --amber:#f59e0b;--amber2:#fcd34d;--amber-bg:#451a03;
  --blue:#3b82f6;--blue2:#93c5fd;--blue-bg:#172554;
  --purple:#a78bfa;
  --mono:'JetBrains Mono',monospace;
  --sans:'DM Sans',system-ui,sans-serif;
  --r:8px;--r2:12px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:14px;overflow:hidden}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--bg5);border-radius:3px}

/* ── Layout ─────────────────────────────────── */
.app{display:flex;flex-direction:column;height:100vh;height:100dvh}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:0 12px;height:52px;background:var(--bg);border-bottom:1px solid var(--border);flex-shrink:0;gap:8px}
.logo{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--green);white-space:nowrap}
.logo span{color:var(--text3);font-weight:400}
.mobile-view-title{display:none}
.market-bar{display:flex;gap:10px;align-items:center;flex:1;overflow:hidden}
.mkt-item{font-family:var(--mono);font-size:11px;white-space:nowrap;display:flex;gap:4px;align-items:center}
.mkt-label{color:var(--text3)}
.top-right{display:flex;gap:6px;align-items:center;flex-shrink:0}
.pulse-dot{width:7px;height:7px;border-radius:50%;background:var(--green);display:inline-block;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}
.body{display:flex;flex:1;overflow:hidden;position:relative}

/* ── Mobile menu toggle ──────────────────────── */
.mob-menu-btn{display:none;background:none;border:1px solid var(--border2);border-radius:var(--r);color:var(--text2);cursor:pointer;padding:5px 8px;font-size:14px;flex-shrink:0}

/* ── Sidebar ─────────────────────────────────── */
.sidebar{width:300px;min-width:300px;background:var(--bg);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;transition:transform .25s ease;flex-shrink:0}
.sb-tabs{display:flex;border-bottom:1px solid var(--border)}
.sb-tab{flex:1;padding:10px;font-size:12px;font-weight:600;text-align:center;cursor:pointer;color:var(--text3);border-bottom:2px solid transparent;transition:all .15s;background:none;border-top:none;border-left:none;border-right:none;font-family:var(--sans)}
.sb-tab.active{color:var(--green);border-bottom-color:var(--green)}
.sb-tab:hover:not(.active){color:var(--text)}
.sb-panel{flex:1;overflow-y:auto;display:none;flex-direction:column}
.sb-panel.active{display:flex}
.add-row{display:flex;gap:6px;padding:10px 12px;border-bottom:1px solid var(--border);flex-shrink:0;min-width:0}
.add-row input{flex:1;min-width:0;padding:7px 10px;border-radius:var(--r);border:1px solid var(--border2);background:var(--bg3);color:var(--text);font-family:var(--mono);font-size:12px;outline:none;text-transform:uppercase}
.add-row input::placeholder{text-transform:none;color:var(--text3)}
.add-row input:focus{border-color:var(--green)}

/* Sidebar overlay backdrop on mobile */
.sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:49}
.sidebar-backdrop.show{display:block}

/* ── Responsive breakpoints ──────────────────── */
@media (max-width:768px){
  /* Topbar */
  .topbar{padding:0 10px;gap:6px}
  .market-bar{display:none} /* hide market ticker on small screens */
  .mob-menu-btn{display:flex;align-items:center;justify-content:center}
  .top-right .btn-sm:not(.mob-keep){display:none} /* hide secondary buttons */
  #current-user-name{display:none}

  /* Sidebar slides in as overlay */
  .sidebar{
    position:fixed;left:0;top:52px;bottom:56px;z-index:50;
    transform:translateX(-100%);
    width:min(320px, 86vw);min-width:0;
    box-shadow:4px 0 24px rgba(0,0,0,.5);
  }
  .sidebar.open{transform:translateX(0)}
  .sidebar-backdrop{top:52px;bottom:56px}

  /* Main takes full width */
  .main{width:100%}

  /* The bottom navigation and More menu replace the desktop tab strip. */
  .view-tabs{display:none !important}
  .mobile-view-title{display:block;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:600;color:var(--text2)}

  /* Dashboard cards — single column */
  .dash-grid{grid-template-columns:1fr !important}

  /* Chart stats — 2 columns on mobile */
  .chart-stats-row{grid-template-columns:repeat(2,1fr) !important}

  /* Strategy grid — 1 column */
  .strat-grid{grid-template-columns:1fr !important}
  .strat-footer{flex-direction:column}
  .strat-risk{text-align:left}

  /* Research grids */
  .research-news-grid{grid-template-columns:1fr !important}

  /* Detail view — full screen */
  .detail-view{padding:10px !important}
  .detail-insights-grid,.research-market-grid{grid-template-columns:1fr}

  /* Status bar — simpler */
  .statusbar{font-size:9px;padding:0 10px}

  /* Modal full screen */
  .modal{width:100%;max-width:100%;margin:0;border-radius:var(--r2) var(--r2) 0 0;max-height:85vh;position:fixed;bottom:0;left:0}
  .modal-bg{align-items:flex-end}

  /* Toast bottom adjusted */
  .toast-container{bottom:20px;right:10px;left:10px;align-items:stretch}
  .toast{max-width:100%}

  /* Stock cards metrics - 2 col */
  .sc-metrics{grid-template-columns:repeat(2,1fr) !important}

  /* Prevent iOS/Android auto-zoom on focus: any input/select/textarea
     with a computed font-size under 16px makes mobile Safari zoom the
     whole viewport in on focus, which looks like a full-screen takeover
     and pushes the right side of the page off-screen until you zoom
     back out manually. Forcing 16px here stops that entirely. */
  input, select, textarea{font-size:16px !important}
  .search-wrap input{padding:9px 30px 9px 10px}
  .add-row input{padding:9px 10px}

  /* Search dropdown — keep it clipped to the sidebar's own width so it
     can never stretch past the visible edge of the screen */
  .search-wrap, .search-dropdown{max-width:100%}
  .search-dropdown{box-sizing:border-box}

  /* Login/register/verify screen inputs are set inline at 14px — same
     iOS zoom-on-focus issue applies there, so bump those too */
  #login-email, #login-password, #reg-name, #reg-email, #reg-password{font-size:16px !important}
}

@media (max-width:480px){
  .logo span{display:none} /* hide subtitle on very small screens */
  .topbar{height:48px}
  .sidebar{top:48px}
  .sidebar-backdrop{top:48px}
  .chart-stats-row{grid-template-columns:repeat(2,1fr) !important}
}

/* ── Bottom nav for mobile ───────────────────── */
.mobile-bottom-nav{
  display:none;
  position:fixed;bottom:0;left:0;right:0;
  background:var(--bg);border-top:1px solid var(--border);
  height:56px;z-index:40;
  padding:0 4px;
  padding-bottom:env(safe-area-inset-bottom, 0px);
}
.mobile-bottom-nav{display:none}
.mob-nav-items{display:flex;height:56px}
.mob-nav-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;background:none;border:none;color:var(--text3);cursor:pointer;font-size:9px;font-family:var(--sans);font-weight:600;transition:color .15s;padding:0}
.mob-nav-btn.active{color:var(--green)}
.mob-nav-icon{font-size:18px;line-height:1}

.mobile-more-menu{display:none;position:fixed;right:8px;bottom:64px;z-index:61;width:min(240px,calc(100vw - 16px));padding:6px;background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r2);box-shadow:0 12px 32px rgba(0,0,0,.55)}
.mobile-more-menu.show{display:grid;gap:2px}
.mobile-more-item{width:100%;padding:10px 12px;background:none;border:0;border-radius:var(--r);color:var(--text2);font:600 12px var(--sans);text-align:left;cursor:pointer}
.mobile-more-item:hover,.mobile-more-item.active{background:var(--bg4);color:var(--green)}

@media(max-width:768px){
  .mobile-bottom-nav{display:block}
  .app{padding-bottom:56px;padding-bottom:calc(56px + env(safe-area-inset-bottom, 0px))}
}

/* ── Search autocomplete ─────────────────────────── */
.search-wrap{position:relative;flex:1;min-width:0}
.search-wrap input{width:100%;max-width:100%;padding:7px 28px 7px 10px;border-radius:var(--r);border:1px solid var(--border2);background:var(--bg3);color:var(--text);font-family:var(--sans);font-size:12px;outline:none}
.search-wrap input:focus{border-color:var(--green)}
.search-wrap input::placeholder{color:var(--text3)}
.search-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text3);cursor:pointer;font-size:14px;line-height:1;padding:0;display:none}
.search-clear.show{display:block}
.search-clear:hover{color:var(--text)}
.search-dropdown{
  position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:200;
  background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r2);
  overflow:hidden;display:none;
  box-shadow:0 16px 48px rgba(0,0,0,.7);max-height:320px;overflow-y:auto;
}
.search-dropdown.show{display:block}
.sd-item{
  display:flex;align-items:center;gap:10px;padding:9px 12px;
  cursor:pointer;transition:background .1s;border-bottom:1px solid var(--border);
}
.sd-item:last-child{border-bottom:none}
.sd-item:hover,.sd-item.focused{background:var(--bg3)}
.sd-ticker{font-family:var(--mono);font-size:12px;font-weight:700;min-width:52px;color:var(--green)}
.sd-name{font-size:12px;color:var(--text2);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sd-type{font-size:10px;color:var(--text3);font-family:var(--mono);flex-shrink:0}
.sd-exch{font-size:10px;color:var(--text3);font-family:var(--mono);flex-shrink:0;min-width:40px;text-align:right}
.sd-loading{padding:12px;text-align:center;color:var(--text3);font-size:12px}
.sd-empty{padding:12px;text-align:center;color:var(--text3);font-size:12px}
.sd-section{padding:6px 12px;font-size:10px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;background:var(--bg3);border-bottom:1px solid var(--border)}

/* Stock list */
.stock-list{flex:1;overflow-y:auto}
.stock-row{display:flex;align-items:center;padding:10px 12px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .12s;gap:8px}
.stock-row:hover{background:var(--bg2)}
.stock-row.active{background:var(--bg3);border-left:3px solid var(--green);padding-left:9px}
.sr-info{flex:1;min-width:0}
.sr-ticker{font-family:var(--mono);font-size:13px;font-weight:700}
.sr-name{font-size:10px;color:var(--text3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-right{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.sr-price{font-family:var(--mono);font-size:13px;font-weight:600}
.sr-chg{font-family:var(--mono);font-size:10px;padding:1px 5px;border-radius:4px;font-weight:700}
.sr-chg.up{background:var(--green-bg);color:var(--green2)}
.sr-chg.dn{background:var(--red-bg);color:var(--red2)}
.sr-signal{font-family:var(--mono);font-size:9px;font-weight:700;padding:2px 5px;border-radius:8px;white-space:nowrap}
.sr-signal.STRONG\ BUY,.sr-signal.STRONG_BUY{background:#064d20;color:#4ade80}
.sr-signal.BUY{background:var(--green-dim);color:var(--green2)}
.sr-signal.WATCH{background:var(--blue-bg);color:var(--blue2)}
.sr-signal.HOLD{background:var(--bg4);color:var(--text3)}
.sr-signal.SELL{background:#4a1010;color:#fca5a5}
.sr-signal.STRONG\ SELL,.sr-signal.STRONG_SELL{background:#5a0a0a;color:#ff6b6b}
.sr-remove{background:none;border:none;color:var(--text3);cursor:pointer;font-size:13px;padding:2px 4px;opacity:0;transition:opacity .12s}
.stock-row:hover .sr-remove{opacity:1}
.sr-remove:hover{color:var(--red)}
.sparkline{width:48px;height:20px;flex-shrink:0}

/* Alerts list */
.alert-row{padding:10px 12px;border-bottom:1px solid var(--border);font-size:12px}
.ar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.ar-ticker{font-family:var(--mono);font-weight:700;font-size:12px}
.ar-type{font-size:10px;color:var(--text3)}
.ar-val{font-family:var(--mono);font-size:12px;color:var(--amber2)}
.ar-actions{display:flex;gap:4px;align-items:center}
.ar-toggle{background:none;border:1px solid var(--border2);border-radius:4px;color:var(--text3);cursor:pointer;font-size:10px;padding:2px 6px;font-family:var(--sans)}
.ar-toggle:hover{background:var(--bg4);color:var(--text)}
.ar-del{background:none;border:1px solid var(--border2);border-radius:4px;color:var(--red);cursor:pointer;font-size:10px;padding:2px 6px}
.ar-status-active{color:var(--green);font-size:9px;font-weight:700}
.ar-status-off{color:var(--text3);font-size:9px}
.ar-last{font-size:10px;color:var(--text3);margin-top:3px}

/* ── Main ──────────────────────────────────────── */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden}
.view-tabs{display:flex;border-bottom:1px solid var(--border);background:var(--bg2);flex-shrink:0}
.view-tab{padding:11px 18px;font-size:12px;font-weight:600;color:var(--text3);cursor:pointer;border-bottom:2px solid transparent;transition:all .15s;background:none;border-top:none;border-left:none;border-right:none;font-family:var(--sans)}
.view-tab.active{color:var(--green);border-bottom-color:var(--green)}
.view-tab:hover:not(.active){color:var(--text)}
.view{flex:1;overflow-y:auto;display:none;flex-direction:column}
.view.active{display:flex}

/* ── Dashboard ─────────────────────────────────── */
.dashboard{padding:16px 20px;display:flex;flex-direction:column;gap:16px}
.summary-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.s-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r2);padding:12px 14px}
.s-card-label{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px}
.s-card-val{font-family:var(--mono);font-size:20px;font-weight:700;margin-top:5px}
.s-card-sub{font-size:10px;color:var(--text3);margin-top:3px}
.stock-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:12px}

/* ── Signal Badge — 6 tiers ─────────────────────── */
.signal-badge{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:11px;font-weight:700;
  padding:4px 12px;border-radius:14px;margin-bottom:10px;letter-spacing:.3px;
}
.signal-badge.STRONG_BUY{background:#064d20;color:#4ade80;border:1px solid #16a34a}
.signal-badge.BUY{background:var(--green-dim);color:var(--green2);border:1px solid #15803d}
.signal-badge.WATCH{background:var(--blue-bg);color:var(--blue2);border:1px solid #1d4ed8}
.signal-badge.HOLD{background:var(--bg4);color:var(--text2);border:1px solid var(--border2)}
.signal-badge.SELL{background:var(--red-dim);color:var(--red2);border:1px solid #b91c1c}
.signal-badge.STRONG_SELL{background:#5a0a0a;color:#ff6b6b;border:1px solid #dc2626}

/* ── Signal Meter Widget ─────────────────────────── */
.signal-meter-widget{
  background:var(--bg3);border:1px solid var(--border);border-radius:var(--r2);
  padding:14px 16px;margin-bottom:12px;
}
.sm-title{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px;font-weight:600}
.sm-track{position:relative;height:12px;border-radius:6px;margin-bottom:8px;
  background:linear-gradient(to right,
    #7f1d1d 0%,#dc2626 16%,
    #f97316 32%,
    #eab308 45%,#737373 55%,
    #22c55e 68%,#16a34a 84%,
    #064d20 100%
  );
}
.sm-needle{
  position:absolute;top:-4px;width:4px;height:20px;background:#fff;
  border-radius:2px;transform:translateX(-50%);
  box-shadow:0 0 6px rgba(255,255,255,.5);transition:left .6s cubic-bezier(.34,1.56,.64,1);
}
.sm-labels{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9px;color:var(--text3)}
.sm-label-active{font-weight:700}
.sm-label-active.sl{color:#ff6b6b}
.sm-label-active.ss{color:#dc2626}
.sm-label-active.h{color:var(--text2)}
.sm-label-active.w{color:var(--blue2)}
.sm-label-active.b{color:var(--green2)}
.sm-label-active.sb{color:#4ade80}
.sm-score-row{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
.sm-score-val{font-family:var(--mono);font-size:18px;font-weight:700}
.sm-reasons{font-size:11px;color:var(--text3);line-height:1.7;margin-top:8px}

/* ── 52-Week Range Widget ────────────────────────── */
.range-widget{
  background:var(--bg3);border:1px solid var(--border);border-radius:var(--r2);
  padding:14px 16px;margin-bottom:12px;position:relative;cursor:pointer;
  transition:border-color .15s;
}
.range-widget:hover{border-color:var(--border2)}
.rw-title{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px;font-weight:600;display:flex;justify-content:space-between;align-items:center}
.rw-hint{font-size:10px;color:var(--text3);font-weight:400;opacity:.7}
.rw-track{position:relative;height:8px;background:var(--bg5);border-radius:4px;margin:8px 0}
.rw-fill{height:100%;border-radius:4px;background:linear-gradient(to right,var(--blue),var(--green));position:absolute;left:0;top:0}
.rw-marker{
  position:absolute;top:-5px;width:18px;height:18px;border-radius:50%;
  background:var(--text);border:3px solid var(--bg3);transform:translateX(-50%);
  box-shadow:0 0 0 2px var(--green);cursor:help;transition:left .4s ease;
}
.rw-bounds{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--text3);margin-top:4px}
.rw-current{text-align:center;font-family:var(--mono);font-size:13px;font-weight:700;color:var(--text);margin-top:6px}
.rw-pct{font-size:10px;color:var(--text3);text-align:center}

/* Chart popup */
.chart-popup{
  display:none;position:absolute;left:0;right:0;top:100%;margin-top:6px;z-index:50;
  background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r2);
  padding:14px;box-shadow:0 16px 48px rgba(0,0,0,.7);
}
.range-widget:hover .chart-popup,
.range-widget.chart-open .chart-popup{display:block}
.cp-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.cp-title{font-size:12px;font-weight:600}
.cp-canvas-wrap{position:relative}
.cp-tooltip{
  position:absolute;pointer-events:none;background:var(--bg3);
  border:1px solid var(--border2);border-radius:6px;padding:6px 10px;
  font-family:var(--mono);font-size:11px;display:none;z-index:10;
  white-space:nowrap;transform:translateX(-50%);
}
.cp-legend{display:flex;gap:14px;margin-top:10px;font-size:10px;color:var(--text3)}
.cp-leg-item{display:flex;align-items:center;gap:4px}
.cp-leg-line{width:16px;height:2px;border-radius:1px}

/* ── Stock Card ─────────────────────────────────── */
.stock-card{
  background:var(--bg3);border:1px solid var(--border);border-radius:var(--r2);
  padding:14px 16px;cursor:pointer;transition:border-color .15s;
}
.stock-card:hover{border-color:var(--border2)}
.stock-card.strong-buy-card{border-left:4px solid #4ade80}
.stock-card.buy-card{border-left:3px solid var(--green)}
.stock-card.sell-card{border-left:3px solid var(--red)}
.stock-card.strong-sell-card{border-left:4px solid #dc2626}
.stock-card.watch-card{border-left:3px solid var(--blue)}
.sc-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px}
.sc-ticker{font-family:var(--mono);font-size:16px;font-weight:700}
.sc-name{font-size:10px;color:var(--text3);margin-top:2px}
.sc-price{font-family:var(--mono);font-size:20px;font-weight:700;text-align:right}
.sc-chg{font-family:var(--mono);font-size:11px;margin-top:2px}
.sc-chg.up{color:var(--green)}
.sc-chg.dn{color:var(--red)}
.sc-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px}
.sc-metric{background:var(--bg4);border-radius:6px;padding:6px 8px;text-align:center}
.sc-metric-label{font-size:9px;color:var(--text3);text-transform:uppercase}
.sc-metric-val{font-family:var(--mono);font-size:12px;font-weight:600;margin-top:2px}
.sc-bar-wrap{margin-top:10px}
.sc-bar-label{display:flex;justify-content:space-between;font-size:10px;color:var(--text3);margin-bottom:4px}
.sc-bar{height:4px;background:var(--bg5);border-radius:2px;overflow:hidden}
.sc-bar-fill{height:100%;border-radius:2px;transition:width .5s}

/* Mini 52w bar on card */
.sc-52w{margin-top:10px}
.sc-52w-label{font-size:10px;color:var(--text3);margin-bottom:5px;display:flex;justify-content:space-between}
.sc-52w-track{position:relative;height:5px;background:var(--bg5);border-radius:3px}
.sc-52w-fill{position:absolute;left:0;top:0;height:100%;border-radius:3px;background:linear-gradient(to right,var(--blue),var(--green))}
.sc-52w-dot{position:absolute;top:-3px;width:11px;height:11px;background:var(--text);border:2px solid var(--bg3);border-radius:50%;transform:translateX(-50%)}

/* ── Detail view ─────────────────────────────────── */
.detail-view{padding:20px;display:flex;flex-direction:column;gap:14px}
.dv-header{display:flex;justify-content:space-between;align-items:flex-start}
.dv-ticker{font-family:var(--mono);font-size:28px;font-weight:700}
.dv-name{font-size:13px;color:var(--text3);margin-top:2px}
.dv-price{font-family:var(--mono);font-size:32px;font-weight:700;text-align:right}
.dv-chg{font-family:var(--mono);font-size:14px;text-align:right;margin-top:2px}
.dv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.dv-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:12px 14px}
.dv-card-label{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.dv-card-val{font-family:var(--mono);font-size:17px;font-weight:700}
.dv-card-sub{font-size:11px;color:var(--text3);margin-top:3px}
.dv-tech{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.tech-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:12px 14px}
.tech-label{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px}
.tech-val{font-family:var(--mono);font-size:16px;font-weight:700;margin-top:5px}
.tech-bar{height:3px;border-radius:2px;margin-top:6px;background:var(--bg5)}
.tech-bar-fill{height:100%;border-radius:2px}

/* Stock intelligence and broader market research */
.detail-insights-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.detail-insight-card,.research-market-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:12px 14px}
.detail-insight-title,.research-market-title{font-size:10px;color:var(--text3);font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.detail-insight-value{font-family:var(--mono);font-size:19px;font-weight:700;margin-top:8px}
.detail-insight-sub,.detail-insight-muted{font-size:11px;color:var(--text3);margin-top:4px}
.detail-rating-bar{display:flex;gap:2px;height:6px;border-radius:3px;overflow:hidden;margin-top:12px}
.detail-rating-bar span{min-width:0}
.detail-insight-target{font-size:11px;color:var(--text3);margin-top:10px}
.detail-insight-target strong{font-family:var(--mono);color:var(--green2);font-size:13px}
.detail-insights-loading{font-size:12px;color:var(--text3);padding:12px 0}
.detail-insider-card{min-width:0}
.detail-insight-title .detail-insight-muted{display:inline;font-weight:400;text-transform:none;letter-spacing:0}
.detail-insider-row{display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--border);padding-top:8px;margin-top:8px;font-size:11px}
.detail-insider-row strong,.detail-insider-row span{display:block}
.detail-insider-row > div:first-child span{color:var(--text3);font-size:10px;margin-top:3px}
.detail-insider-action{text-align:right;font-weight:600;max-width:52%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.detail-insider-action span{font-family:var(--mono);font-size:10px;margin-top:3px}
.research-section-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;margin-bottom:10px}
.research-market-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:20px}
.research-market-title{margin-bottom:7px}
.research-market-row{display:flex;align-items:center;justify-content:space-between;gap:6px;border-top:1px solid var(--border);padding:7px 0;cursor:pointer}
.research-market-row:hover{background:var(--bg4)}
.research-market-identity{flex:1;min-width:0}
.research-market-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.research-market-add{font-size:9px;padding:3px 6px;border:1px solid var(--border2);border-radius:5px;background:transparent;color:var(--blue2);cursor:pointer;font-family:var(--mono);white-space:nowrap}
.research-market-add:hover{border-color:var(--blue2);background:var(--bg4)}
.research-market-added{font-size:11px;color:var(--green2);font-family:var(--mono);padding:0 5px}
.research-market-ticker{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--text)}
.research-market-name{display:block;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;color:var(--text3);margin-top:2px}
.research-market-change{font-family:var(--mono);font-size:10px;font-weight:700;white-space:nowrap}
.research-market-change.up{color:var(--green2)}
.research-market-change.dn{color:var(--red2)}

/* Alert creation */
.alert-types-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.at-card{background:var(--bg4);border:1px solid var(--border);border-radius:var(--r);padding:10px;cursor:pointer;transition:all .15s;text-align:center}
.at-card:hover{border-color:var(--border2);background:var(--bg5)}
.at-card.selected{border-color:var(--green);background:var(--green-dim)}
.at-icon{font-size:20px;margin-bottom:4px}
.at-name{font-size:11px;font-weight:600;color:var(--text)}
.at-desc{font-size:10px;color:var(--text3);margin-top:2px}
.af-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.af-row{display:flex;flex-direction:column;gap:4px}
.af-label{font-size:11px;color:var(--text3)}
.af-input,.af-select{padding:8px 10px;border-radius:var(--r);border:1px solid var(--border2);background:var(--bg4);color:var(--text);font-family:var(--sans);font-size:12px;outline:none}
.af-input:focus,.af-select:focus{border-color:var(--green)}
.af-select option{background:var(--bg3)}

/* Buttons */
.btn{padding:7px 14px;border-radius:var(--r);font-size:12px;font-weight:600;cursor:pointer;border:1px solid var(--border2);background:var(--bg3);color:var(--text2);transition:all .15s;font-family:var(--sans)}
.btn:hover{background:var(--bg4);color:var(--text)}
.btn-green{background:var(--green);color:#000;border-color:var(--green)}
.btn-green:hover{background:#16a34a}
.btn-red{background:var(--red-dim);color:var(--red2);border-color:var(--red)}
.btn-sm{padding:5px 10px;font-size:11px}

/* Log */
.log-view{padding:16px 20px}
.log-item{display:flex;gap:12px;align-items:flex-start;padding:10px 14px;border-bottom:1px solid var(--border);font-size:12px}
.log-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:3px}
.log-dot.buy{background:var(--green)}
.log-dot.sell{background:var(--red)}
.log-dot.alert{background:var(--amber)}
.log-time{font-family:var(--mono);font-size:10px;color:var(--text3);white-space:nowrap}
.log-msg{color:var(--text2);line-height:1.5}
.log-ticker{font-family:var(--mono);font-weight:700;color:var(--text)}

/* Empty */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:12px;color:var(--text3);padding:40px;text-align:center}
.empty .icon{font-size:40px;opacity:.3}
.empty p{font-size:13px;max-width:280px;line-height:1.7}

/* ── Robinhood-style Chart ───────────────────────── */
.chart-panel{background:var(--bg);display:flex;flex-direction:column;height:100%;min-height:0}
.chart-hero{padding:20px 24px 0;flex-shrink:0}
.chart-name{font-size:13px;color:var(--text3);margin-bottom:2px}
.chart-price-row{display:flex;align-items:baseline;gap:12px;margin:2px 0}
.chart-price{font-family:var(--mono);font-size:36px;font-weight:700;line-height:1;transition:color .1s}
.chart-change{font-family:var(--mono);font-size:14px;font-weight:500}
.chart-change.up{color:var(--green)}
.chart-change.dn{color:var(--red)}
.chart-hover-info{font-size:12px;color:var(--text3);margin-top:2px;min-height:18px}

.chart-wrap{position:relative;flex:1;min-height:180px;margin:10px 0 0;cursor:crosshair;overflow:hidden}
.chart-canvas{position:absolute;top:0;left:0;width:100%;height:100%}
.chart-vol-canvas{position:absolute;bottom:0;left:0;width:100%;height:25%}
.chart-crosshair-v{position:absolute;top:0;bottom:0;width:1px;background:var(--text2);opacity:.5;pointer-events:none;display:none}
.chart-crosshair-h{position:absolute;left:0;right:0;height:1px;background:var(--text2);opacity:.3;pointer-events:none;display:none}
.chart-dot{position:absolute;width:10px;height:10px;border-radius:50%;border:2.5px solid var(--bg);transform:translate(-50%,-50%);pointer-events:none;display:none;z-index:2}
.chart-tooltip{position:absolute;background:var(--bg3);border:1px solid var(--border2);border-radius:var(--r);padding:6px 10px;font-family:var(--mono);font-size:11px;pointer-events:none;display:none;z-index:10;white-space:nowrap;transform:translateX(-50%)}

.chart-range-row{display:flex;gap:2px;padding:8px 20px;flex-shrink:0}
.range-btn{font-family:var(--mono);font-size:12px;font-weight:600;padding:5px 12px;border-radius:18px;border:none;background:none;color:var(--text3);cursor:pointer;transition:all .12s}
.range-btn:hover{color:var(--text);background:var(--bg3)}
.range-btn.active{background:var(--bg3);color:var(--text)}

.chart-stats-row{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--border);flex-shrink:0}
.chart-stat{padding:10px 16px;border-right:1px solid var(--border)}
.chart-stat:last-child{border-right:none}
.chart-stat-label{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px}
.chart-stat-val{font-family:var(--mono);font-size:13px;font-weight:600;margin-top:4px}

.chart-back{display:flex;align-items:center;gap:6px;padding:10px 20px 0;font-size:13px;color:var(--text3);cursor:pointer;border:none;background:none;font-family:var(--sans);flex-shrink:0}
.chart-back:hover{color:var(--text)}

/* ── Volume Intelligence Widget ──────────────────── */
.vol-widget{
  background:var(--bg3);border:1px solid var(--border);border-radius:var(--r2);
  padding:14px 16px;margin-bottom:12px;
}

/* ── Options Strategy Cards ──────────────────────── */
.strat-card{
  background:var(--bg3);border:1px solid var(--border);border-radius:var(--r2);
  padding:16px 18px;margin-bottom:10px;transition:border-color .15s;
}
.strat-card:hover{border-color:var(--border2)}
.strat-card.HIGH{border-left:3px solid var(--green)}
.strat-card.MEDIUM{border-left:3px solid var(--blue)}
.strat-card.LOW{border-left:3px solid var(--text3)}
.strat-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.strat-name{font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px}
.strat-badges{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.strat-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:10px;font-family:var(--mono)}
.strat-reason{font-size:12px;color:var(--text2);line-height:1.7;margin-bottom:12px}
.strat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.strat-cell{background:var(--bg4);border-radius:var(--r);padding:8px 10px}
.strat-cell-label{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.4px}
.strat-cell-val{font-family:var(--mono);font-size:12px;font-weight:600;margin-top:3px;line-height:1.4}
.strat-footer{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding-top:10px;border-top:1px solid var(--border)}
.strat-when{font-size:11px;color:var(--text3);flex:1;line-height:1.6}
.strat-risk{font-size:11px;color:var(--red2);flex:1;line-height:1.6;text-align:right}
.strat-tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:8px}
.strat-tag{font-size:9px;padding:1px 7px;border-radius:8px;background:var(--bg5);color:var(--text3);font-family:var(--mono)}

/* ── Sort & Filter controls ──────────────────────── */
.sb-sort-btn{
  flex:1;padding:5px 4px;font-size:10px;font-weight:600;text-align:center;
  cursor:pointer;color:var(--text3);background:none;border:none;
  border-bottom:2px solid transparent;transition:all .12s;font-family:var(--mono);
  white-space:nowrap;
}
.sb-sort-btn:hover{color:var(--text)}
.sb-sort-btn.active{color:var(--green);border-bottom-color:var(--green)}

.dash-sort-btn{
  font-size:11px;font-weight:600;padding:4px 10px;border-radius:14px;
  border:1px solid var(--border);background:none;color:var(--text3);
  cursor:pointer;transition:all .12s;font-family:var(--mono);
}
.dash-sort-btn:hover{background:var(--bg3);color:var(--text)}
.dash-sort-btn.active{background:var(--bg3);color:var(--text);border-color:var(--border2)}
.dash-horizon-btn{border:1px solid var(--border);background:var(--bg2);color:var(--text3);border-radius:6px;padding:6px 9px;font-size:11px;cursor:pointer}
.dash-horizon-btn:hover,.dash-horizon-btn.active{background:var(--bg3);color:var(--text);border-color:var(--border2)}

.dash-filter-btn{
  font-size:11px;font-weight:600;padding:4px 10px;border-radius:14px;
  border:1px solid var(--border);background:none;color:var(--text3);
  cursor:pointer;transition:all .12s;font-family:var(--mono);
}
.dash-filter-btn:hover{background:var(--bg3)}
.dash-filter-btn.active{background:var(--bg3);border-color:var(--border2)}

/* ── Mover rows ──────────────────────────────────── */
.mover-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:9px 12px;border-bottom:1px solid var(--border);
  cursor:pointer;transition:background .1s;gap:8px;
}
.mover-row:hover{background:var(--bg2)}
.mover-left{flex:1;min-width:0}
.mover-ticker{font-family:var(--mono);font-size:13px;font-weight:700;display:flex;align-items:center;gap:6px}
.mover-name{font-size:10px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px;margin-top:1px}
.mover-right{text-align:right;flex-shrink:0}
.mover-price{font-family:var(--mono);font-size:12px;font-weight:600}
.mover-chg{font-family:var(--mono);font-size:11px;font-weight:700;padding:1px 6px;border-radius:4px}
.mover-chg.up{background:var(--green-bg);color:var(--green2)}
.mover-chg.dn{background:var(--red-bg);color:var(--red2)}
.mover-add{font-size:10px;padding:2px 7px;border-radius:8px;border:1px solid var(--border2);background:none;color:var(--blue2);cursor:pointer;font-family:var(--mono);opacity:1;transition:background .12s;flex-shrink:0}
.mover-add:hover{background:var(--blue-bg)}
.mover-signal{font-size:9px;font-weight:700;font-family:var(--mono);padding:1px 5px;border-radius:6px}
.mover-signal.buy{background:var(--green-dim);color:var(--green2)}
.mover-signal.sell{background:var(--red-dim);color:var(--red2)}
.mover-signal.watch{background:var(--blue-bg);color:var(--blue2)}
.mover-section{padding:6px 12px;font-size:10px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;background:var(--bg2);border-bottom:1px solid var(--border)}

/* Status bar */
.statusbar{height:26px;background:var(--bg);border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 16px;font-size:10px;color:var(--text3);flex-shrink:0;font-family:var(--mono)}

/* Modal */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.75);display:none;align-items:center;justify-content:center;z-index:100}
.modal-bg.show{display:flex}
.modal{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r2);padding:24px 28px;max-width:520px;width:92%;max-height:90vh;overflow-y:auto}
.modal h2{font-size:15px;margin-bottom:16px}
.modal label{font-size:11px;color:var(--text3);display:block;margin-bottom:4px;margin-top:12px}
.modal input,.modal select{width:100%;padding:8px 10px;border-radius:var(--r);border:1px solid var(--border2);background:var(--bg3);color:var(--text);font-size:12px;font-family:var(--mono);outline:none}
.modal textarea{width:100%;padding:10px;border-radius:var(--r);border:1px solid var(--border2);background:var(--bg3);color:var(--text);font-size:13px;font-family:var(--sans);outline:none;resize:vertical;line-height:1.5}
.modal input:focus,.modal select:focus{border-color:var(--green)}
.modal-btns{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}

/* Toast */
.toast-container{position:fixed;bottom:40px;right:20px;display:flex;flex-direction:column;gap:8px;z-index:999}
.toast{background:var(--bg3);border:1px solid var(--border2);border-radius:var(--r2);padding:12px 16px;max-width:320px;font-size:12px;line-height:1.6;animation:slideIn .3s ease;box-shadow:0 8px 32px rgba(0,0,0,.5)}
.toast.buy{border-left:4px solid var(--green)}
.toast.sell{border-left:4px solid var(--red)}
.toast.alert{border-left:4px solid var(--amber)}
.toast-title{font-weight:700;margin-bottom:3px;font-size:12px}
.toast-msg{color:var(--text2)}
@keyframes slideIn{from{transform:translateX(120%);opacity:0}to{transform:translateX(0);opacity:1}}