/* ============================================================
   APEX DESK — design tokens
   bg:      #0A0B0D  near-black, blue-cast
   panel:   #14161A
   border:  #23262C
   text:    #E9E7E1  warm off-white
   dim:     #878C96
   accent:  #F2A93B  amber — brand/signal accent (conviction, highlights)
   bull:    #33D690  green — reserved strictly for gains/bullish
   bear:    #FF5C61  red   — reserved strictly for losses/bearish
   neutral: #545B66
   ============================================================ */
:root{
  --bg:#0A0B0D;
  --panel:#14161A;
  --panel-raised:#191B20;
  --border:#23262C;
  --text:#E9E7E1;
  --dim:#878C96;
  --dimmer:#5B6069;
  --accent:#F2A93B;
  --accent-dim:#8A6A2E;
  --bull:#33D690;
  --bear:#FF5C61;
  --neutral:#545B66;
  --radius:3px;
  --font-display:'Space Grotesk',sans-serif;
  --font-body:'Inter',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:14px;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;cursor:pointer;}
input,select{font-family:var(--font-mono);}

/* ---------- top bar ---------- */
.topbar{
  display:flex;align-items:center;gap:20px;
  height:52px;padding:0 18px;
  background:var(--panel);
  border-bottom:1px solid var(--border);
}
.brand{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:700;font-size:17px;letter-spacing:0.5px;}
.brand-mark{color:var(--accent);}
.brand-thin{font-weight:400;color:var(--dim);}
.ticker-tape{flex:1;overflow:hidden;height:24px;border-left:1px solid var(--border);border-right:1px solid var(--border);position:relative;}
.ticker-track{
  position:absolute;white-space:nowrap;font-family:var(--font-mono);font-size:12px;
  animation:scrollTicker 40s linear infinite;
  display:flex;gap:28px;padding-left:100%;
}
@keyframes scrollTicker{from{transform:translateX(0);}to{transform:translateX(-100%);}}
.ticker-item{color:var(--dim);}
.ticker-item .up{color:var(--bull);}
.ticker-item .down{color:var(--bear);}
.topbar-actions{display:flex;align-items:center;gap:10px;}
.mode-pill{
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.5px;
  padding:4px 9px;border:1px solid var(--accent-dim);color:var(--accent);border-radius:20px;
}
.btn-ghost{
  background:transparent;border:1px solid var(--border);color:var(--text);
  padding:6px 14px;border-radius:var(--radius);font-size:12.5px;
  transition:border-color .15s;
}
.btn-ghost:hover{border-color:var(--dim);}
.btn-ghost.small{padding:3px 10px;font-size:11.5px;}
.btn-primary{
  background:var(--accent);border:none;color:#171207;font-weight:600;
  padding:9px 18px;border-radius:var(--radius);font-size:13px;
}

/* ---------- disclaimer ---------- */
.disclaimer-strip{
  background:#1E1710;color:#D9AF6E;border-bottom:1px solid var(--accent-dim);
  font-size:11.5px;padding:6px 18px;text-align:center;
}
.disclaimer-strip strong{color:var(--accent);}

/* ---------- layout grids ---------- */
.layout{
  display:grid;
  grid-template-columns:220px 1fr 320px;
  gap:1px;background:var(--border);
  padding:1px 0 0 0;
}
.layout-lower{grid-template-columns:1fr 1fr 1fr;margin-top:1px;}
.layout-log{grid-template-columns:1fr;margin-top:1px;}
.panel{background:var(--panel);padding:14px 16px;min-width:0;}
.panel-head{
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--font-display);font-weight:600;font-size:13px;letter-spacing:0.3px;
  text-transform:uppercase;color:var(--text);margin-bottom:12px;
}
.panel-subhead{font-size:11px;text-transform:uppercase;color:var(--dim);letter-spacing:0.5px;margin:14px 0 6px;}
.eyebrow{font-family:var(--font-mono);font-size:10.5px;color:var(--dimmer);text-transform:none;font-weight:400;}

/* ---------- watchlist ---------- */
.watchlist-list{display:flex;flex-direction:column;gap:2px;max-height:340px;overflow-y:auto;}
.watch-item{
  display:flex;justify-content:space-between;align-items:center;
  padding:8px 8px;border-radius:var(--radius);cursor:pointer;
  border:1px solid transparent;
}
.watch-item:hover{background:var(--panel-raised);}
.watch-item.active{background:var(--panel-raised);border-color:var(--accent-dim);}
.watch-sym{font-family:var(--font-mono);font-weight:600;font-size:13px;}
.watch-badge{font-size:10px;font-family:var(--font-mono);padding:2px 6px;border-radius:10px;}
.watch-badge.bull{background:rgba(51,214,144,0.12);color:var(--bull);}
.watch-badge.bear{background:rgba(255,92,97,0.12);color:var(--bear);}
.watch-badge.neutral{background:rgba(84,91,102,0.2);color:var(--dim);}
.add-symbol{display:flex;gap:6px;margin-top:10px;}
.add-symbol input{
  flex:1;background:var(--panel-raised);border:1px solid var(--border);color:var(--text);
  padding:7px 8px;border-radius:var(--radius);font-size:12px;
}
.add-symbol button{
  background:var(--panel-raised);border:1px solid var(--border);color:var(--accent);
  width:30px;border-radius:var(--radius);font-size:16px;
}
.instrument-toggle,.timeframe-toggle{display:flex;gap:4px;}
.seg-btn{
  background:var(--panel-raised);border:1px solid var(--border);color:var(--dim);
  padding:5px 10px;font-size:11.5px;border-radius:var(--radius);font-family:var(--font-mono);
}
.seg-btn.active{color:var(--accent);border-color:var(--accent-dim);background:rgba(242,169,59,0.08);}

/* ---------- center chart ---------- */
.symbol-title{display:flex;align-items:baseline;gap:10px;font-family:var(--font-display);}
.symbol-title #activeSymbol{font-weight:700;font-size:18px;}
.price-tag{font-family:var(--font-mono);font-size:15px;color:var(--text);}
.change-tag{font-family:var(--font-mono);font-size:12.5px;padding:2px 6px;border-radius:3px;}
.change-tag.up{color:var(--bull);background:rgba(51,214,144,.1);}
.change-tag.down{color:var(--bear);background:rgba(255,92,97,.1);}
.price-chart{width:100%;height:280px;display:block;}

.conviction-block{
  display:flex;gap:20px;align-items:center;border-top:1px solid var(--border);
  margin-top:12px;padding-top:14px;
}
.conviction-gauge-wrap{position:relative;flex-shrink:0;width:260px;height:150px;}
#convictionGauge{width:260px;height:150px;display:block;}
.conviction-readout{position:absolute;top:88px;left:0;right:0;text-align:center;}
.conviction-verdict{font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:0.5px;}
.conviction-verdict.bull{color:var(--bull);}
.conviction-verdict.bear{color:var(--bear);}
.conviction-verdict.neutral{color:var(--dim);}
.conviction-score{font-family:var(--font-mono);font-size:11px;color:var(--dim);margin-top:2px;}
.factor-ticks{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.factor-tick{
  display:flex;align-items:center;gap:8px;font-size:11.5px;padding:6px 8px;
  background:var(--panel-raised);border-radius:var(--radius);border:1px solid var(--border);
}
.factor-tick .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--neutral);}
.factor-tick.pass .dot{background:var(--bull);box-shadow:0 0 6px rgba(51,214,144,.6);}
.factor-tick.fail .dot{background:var(--bear);}
.factor-tick .flabel{color:var(--dim);flex:1;}
.factor-tick .fval{font-family:var(--font-mono);color:var(--text);}

/* ---------- reasoning feed ---------- */
.reasoning-feed{
  display:flex;flex-direction:column;gap:6px;height:520px;overflow-y:auto;
  font-family:var(--font-mono);font-size:11.5px;
}
.reason-line{padding:6px 8px;border-radius:var(--radius);background:var(--panel-raised);border-left:2px solid var(--border);}
.reason-line.pass{border-left-color:var(--bull);}
.reason-line.fail{border-left-color:var(--bear);}
.reason-line.info{border-left-color:var(--accent-dim);}
.reason-time{color:var(--dimmer);margin-right:6px;}

/* ---------- sizer ---------- */
.sizer-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;}
.sizer-grid label{display:flex;flex-direction:column;gap:5px;font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:0.4px;}
.sizer-grid input,.sizer-grid select{
  background:var(--panel-raised);border:1px solid var(--border);color:var(--text);
  padding:8px;border-radius:var(--radius);font-size:13px;
}
.sizer-output{display:flex;flex-direction:column;gap:8px;}
.sizer-row{display:flex;justify-content:space-between;font-size:12.5px;padding:6px 0;border-bottom:1px dashed var(--border);}
.sizer-row .k{color:var(--dim);}
.sizer-row .v{font-family:var(--font-mono);font-weight:600;}
.sizer-row.highlight .v{color:var(--accent);font-size:15px;}

/* ---------- news ---------- */
.news-list{display:flex;flex-direction:column;gap:8px;max-height:400px;overflow-y:auto;}
.news-item{padding:9px;background:var(--panel-raised);border-radius:var(--radius);border:1px solid var(--border);}
.news-top{display:flex;justify-content:space-between;gap:8px;margin-bottom:4px;}
.news-tag{font-size:9.5px;font-family:var(--font-mono);padding:1px 6px;border-radius:10px;text-transform:uppercase;height:fit-content;}
.news-tag.bull{background:rgba(51,214,144,.12);color:var(--bull);}
.news-tag.bear{background:rgba(255,92,97,.12);color:var(--bear);}
.news-tag.neutral{background:rgba(84,91,102,.2);color:var(--dim);}
.news-impact{font-size:9.5px;color:var(--dimmer);font-family:var(--font-mono);}
.news-headline{font-size:12.5px;line-height:1.4;}
.news-src{font-size:10.5px;color:var(--dimmer);margin-top:4px;}

/* ---------- stats ---------- */
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px;}
.stat-card{background:var(--panel-raised);border:1px solid var(--border);border-radius:var(--radius);padding:9px;}
.stat-card .stat-label{font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:.4px;}
.stat-card .stat-value{font-family:var(--font-mono);font-size:16px;font-weight:700;margin-top:3px;}
.stat-value.bull{color:var(--bull);}
.stat-value.bear{color:var(--bear);}
.equity-chart{width:100%;height:120px;display:block;}

/* ---------- trade log ---------- */
.table-wrap{overflow-x:auto;}
table{width:100%;border-collapse:collapse;font-family:var(--font-mono);font-size:12px;}
th{text-align:left;color:var(--dim);font-weight:500;padding:8px 10px;border-bottom:1px solid var(--border);text-transform:uppercase;font-size:10.5px;letter-spacing:.4px;}
td{padding:8px 10px;border-bottom:1px solid var(--border);}
td.dir-bull{color:var(--bull);}
td.dir-bear{color:var(--bear);}
td.pl-pos{color:var(--bull);}
td.pl-neg{color:var(--bear);}
.status-pill{font-size:10px;padding:2px 7px;border-radius:10px;background:var(--panel-raised);border:1px solid var(--border);}

/* ---------- modal ---------- */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;
  align-items:center;justify-content:center;z-index:50;
}
.modal-overlay.open{display:flex;}
.modal{background:var(--panel);border:1px solid var(--border);border-radius:6px;width:420px;max-width:92vw;}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--border);font-family:var(--font-display);font-weight:600;}
.modal-head button{background:none;border:none;color:var(--dim);font-size:16px;}
.modal-body{padding:16px;display:flex;flex-direction:column;gap:14px;}
.modal-body label{display:flex;flex-direction:column;gap:6px;font-size:11.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.4px;}
.modal-body input,.modal-body select{background:var(--panel-raised);border:1px solid var(--border);color:var(--text);padding:9px;border-radius:var(--radius);}
.modal-note{font-size:11.5px;color:var(--dimmer);line-height:1.5;}
.modal-note code{color:var(--accent);}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .layout{grid-template-columns:1fr;}
  .layout-lower{grid-template-columns:1fr;}
}

/* ---------- scrollbars ---------- */
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .ticker-track{animation:none;}
}