/* AlphaDesk — Phase 1 dashboard
   Dense, dark, financial-terminal styling. No build step, no framework. */

:root {
  --bg:        #0d0f14;
  --bg-1:      #12151c;
  --bg-2:      #171b24;
  --bg-3:      #1e2430;
  --line:      #262d3a;
  --line-soft: #1d2330;

  --txt:       #e7eaf0;
  --txt-dim:   #9aa4b6;
  --txt-faint: #66708a;

  --up:        #26a69a;
  --down:      #ef5350;
  --accent:    #5b9dff;
  --amber:     #f0b429;
  --violet:    #a78bfa;

  --buy:       #16a34a;
  --acc:       #4d9e4d;
  --hold:      #8a93a6;
  --red:       #e08a3c;
  --sell:      #dc4c4c;

  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --topbar-h: 58px;
  --side-w: 232px;
}

* { box-sizing: border-box; }

/* The UA rule for the `hidden` attribute is `[hidden] { display: none }`, which
   any class selector that sets `display` outranks — `.overlay` did exactly that
   and left the deep-dive dialog permanently on top of the right panel. Panels
   here are toggled by setting `el.hidden`, so that attribute has to win. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--txt);
  font: 13px/1.45 var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------- top bar */

.topbar {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 14px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 40;
}

.brand { display: flex; align-items: center; gap: 9px; min-width: 190px; }
.brand-mark { font-size: 21px; color: var(--accent); }
.brand-name { font-weight: 650; font-size: 14px; letter-spacing: .2px; }
.brand-sub { font-size: 10.5px; color: var(--txt-faint); }

.indices { display: flex; gap: 6px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.indices::-webkit-scrollbar { display: none; }
.idx-skeleton { color: var(--txt-faint); font-size: 12px; align-self: center; }

.idx {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  padding: 5px 10px;
  min-width: 128px;
  flex-shrink: 0;
}
.idx-name { font-size: 10px; color: var(--txt-faint); text-transform: uppercase; letter-spacing: .5px; }
.idx-row { display: flex; align-items: baseline; gap: 7px; }
.idx-ltp { font-family: var(--mono); font-size: 13px; font-weight: 600; }
.idx-chg { font-family: var(--mono); font-size: 11px; }

.topbar-right { display: flex; align-items: center; gap: 14px; }

.source-badge {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg-2); border: 1px solid var(--line-soft);
  border-radius: 999px; padding: 4px 11px;
  font-size: 11px; color: var(--txt-dim); white-space: nowrap;
}
.source-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--txt-faint); }
.source-badge.synthetic { border-color: #6b4a12; background: #2a1e08; color: var(--amber); }
.source-badge.synthetic .dot { background: var(--amber); }
.source-badge.live { border-color: #12452f; background: #08251a; color: var(--up); }
.source-badge.live .dot { background: var(--up); }

.market-status { text-align: right; min-width: 132px; }
.status-line { display: flex; align-items: center; justify-content: flex-end; gap: 6px; font-size: 12px; font-weight: 550; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--txt-faint); }
.status-dot.live { background: var(--up); box-shadow: 0 0 0 3px rgba(38,166,154,.18); }
.status-dot.pre_open { background: var(--amber); }
.status-sub { font-size: 10.5px; color: var(--txt-faint); font-family: var(--mono); }
.status-sub.stale { color: var(--down); }

/* ------------------------------------------------------------ layout */

.layout { display: flex; height: calc(100vh - var(--topbar-h)); }

.sidebar {
  width: var(--side-w);
  flex-shrink: 0;
  background: var(--bg-1);
  border-right: 1px solid var(--line);
  padding: 14px 12px;
  overflow-y: auto;
}

.nav-title {
  font-size: 10px; text-transform: uppercase; letter-spacing: .7px;
  color: var(--txt-faint); margin: 0 0 8px 2px; font-weight: 600;
}

.nav { margin-bottom: 20px; }
.nav-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  background: none; border: 0; color: var(--txt-dim);
  padding: 7px 9px; border-radius: 6px; cursor: pointer;
  font: inherit; text-align: left; margin-bottom: 2px;
}
.nav-item:hover:not(.disabled) { background: var(--bg-3); color: var(--txt); }
.nav-item.active { background: var(--bg-3); color: var(--txt); font-weight: 550; }
.nav-item.disabled { opacity: .38; cursor: not-allowed; }
.nav-ico { width: 15px; text-align: center; color: var(--txt-faint); }
.nav-item em {
  margin-left: auto; font-style: normal; font-size: 9px;
  background: var(--bg-3); padding: 1px 5px; border-radius: 4px; color: var(--txt-faint);
}

.filters { margin-bottom: 20px; }
.fld { display: block; margin-bottom: 11px; }
.fld > span { display: block; font-size: 11px; color: var(--txt-dim); margin-bottom: 4px; }
.fld > span b { color: var(--accent); font-family: var(--mono); }
.fld input[type="search"], .fld select {
  width: 100%; background: var(--bg-2); border: 1px solid var(--line);
  color: var(--txt); border-radius: 6px; padding: 6px 8px; font: inherit; font-size: 12px;
}
.fld input[type="search"]:focus, .fld select:focus { outline: none; border-color: var(--accent); }
.fld input[type="range"] { width: 100%; accent-color: var(--accent); }

.btn-ghost {
  width: 100%; background: none; border: 1px solid var(--line);
  color: var(--txt-dim); border-radius: 6px; padding: 6px; cursor: pointer;
  font: inherit; font-size: 11.5px;
}
.btn-ghost:hover { background: var(--bg-2); color: var(--txt); }

.quick { margin-bottom: 18px; }
.btn-primary {
  width: 100%; background: var(--accent); border: 0; color: #06101f;
  font-weight: 650; border-radius: 6px; padding: 8px; cursor: pointer; font: inherit; font-weight: 600;
}
.btn-primary:hover { filter: brightness(1.1); }
.btn-primary:disabled { opacity: .55; cursor: wait; }
.quick-note { font-size: 10.5px; color: var(--txt-faint); margin-top: 5px; text-align: center; }

.agent-health { border-top: 1px solid var(--line-soft); padding-top: 12px; }
.ah-row { display: flex; justify-content: space-between; gap: 6px; font-size: 10.5px; padding: 3px 0; }
.ah-name { color: var(--txt-dim); font-family: var(--mono); }
.ah-val { color: var(--txt-faint); font-family: var(--mono); }
.ah-val.ok { color: var(--up); }
.ah-val.bad { color: var(--down); }

/* ------------------------------------------------------------- table */

.content { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

.content-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 13px 16px 11px; border-bottom: 1px solid var(--line);
}
.content-head h1 { margin: 0; font-size: 15px; font-weight: 600; }
.content-head .sub { font-size: 11px; color: var(--txt-faint); margin-top: 2px; font-family: var(--mono); }

.legend { display: flex; gap: 11px; font-size: 10.5px; color: var(--txt-dim); }
.lg { display: flex; align-items: center; gap: 4px; }
.sw { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.sw.buy { background: var(--buy); } .sw.acc { background: var(--acc); }
.sw.hold { background: var(--hold); } .sw.red { background: var(--red); }
.sw.sell { background: var(--sell); }

.table-wrap { flex: 1; overflow: auto; }

.grid { width: 100%; border-collapse: collapse; font-size: 12px; }
.grid thead th {
  position: sticky; top: 0; z-index: 10;
  background: var(--bg-2); color: var(--txt-dim);
  text-align: left; font-weight: 550; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .4px;
  padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.grid th.num, .grid td.num { text-align: right; }
.grid th.sortable { cursor: pointer; user-select: none; }
.grid th.sortable:hover { color: var(--txt); }
.grid th.sorted { color: var(--accent); }
.grid th .arrow { font-size: 8px; margin-left: 3px; }

.grid tbody tr { border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.grid tbody tr:hover { background: var(--bg-2); }
.grid td { padding: 7px 10px; white-space: nowrap; }
.grid td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.rownum { color: var(--txt-faint); font-family: var(--mono); font-size: 11px; width: 42px; }

.co { display: flex; align-items: center; gap: 8px; }
.co-tick { font-weight: 600; font-size: 12px; }
.co-name { color: var(--txt-faint); font-size: 11px; max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
.exch { font-size: 8.5px; background: var(--bg-3); color: var(--txt-faint); padding: 1px 4px; border-radius: 3px; letter-spacing: .3px; }

.up { color: var(--up); } .down { color: var(--down); } .flat { color: var(--txt-dim); }

.pill {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .2px;
}
.pill.strong-buy { background: rgba(22,163,74,.22); color: #4ade80; }
.pill.buy        { background: rgba(22,163,74,.16); color: #47c97b; }
.pill.accumulate { background: rgba(77,158,77,.14); color: #86c986; }
.pill.hold       { background: rgba(138,147,166,.14); color: #a8b0c2; }
.pill.reduce     { background: rgba(224,138,60,.16); color: #eda866; }
.pill.sell       { background: rgba(220,76,76,.16); color: #f08a8a; }
.pill.strong-sell{ background: rgba(220,76,76,.24); color: #ff9c9c; }

.trend-b { color: var(--up); } .trend-r { color: var(--down); } .trend-s { color: var(--txt-dim); }

.score { display: inline-flex; align-items: center; gap: 7px; justify-content: flex-end; }
.score-bar { width: 34px; height: 4px; border-radius: 2px; background: var(--bg-3); overflow: hidden; }
.score-bar i { display: block; height: 100%; border-radius: 2px; }
.score-val { font-family: var(--mono); font-weight: 600; min-width: 32px; text-align: right; }

.flagdot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; margin-left: 5px; }
.flagdot.vol { background: var(--violet); } .flagdot.high { background: var(--up); }

.empty { padding: 44px; text-align: center; color: var(--txt-faint); }

/* ------------------------------------------------------- detail panel */

.overlay {
  position: fixed; inset: 0; background: rgba(4,6,10,.72);
  z-index: 60; display: flex; justify-content: flex-end;
  backdrop-filter: blur(2px);
}
.panel {
  width: min(1020px, 94vw); height: 100%;
  background: var(--bg-1); border-left: 1px solid var(--line);
  overflow-y: auto; position: relative;
  animation: slide .18s ease-out;
}
@keyframes slide { from { transform: translateX(28px); opacity: .4 } to { transform: none; opacity: 1 } }

.panel-close {
  position: absolute; top: 12px; right: 14px; z-index: 5;
  background: var(--bg-3); border: 1px solid var(--line); color: var(--txt-dim);
  width: 28px; height: 28px; border-radius: 6px; font-size: 17px; cursor: pointer; line-height: 1;
}
.panel-close:hover { color: var(--txt); background: var(--line); }

.loading { padding: 60px; text-align: center; color: var(--txt-faint); }

.dt-head { padding: 18px 20px 14px; border-bottom: 1px solid var(--line); }
.dt-title { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.dt-tick { font-size: 20px; font-weight: 650; }
.dt-name { color: var(--txt-dim); font-size: 13px; }
.dt-sector { font-size: 10px; background: var(--bg-3); padding: 2px 7px; border-radius: 4px; color: var(--txt-dim); }

.dt-price { display: flex; align-items: baseline; gap: 12px; margin-top: 9px; }
.dt-ltp { font-family: var(--mono); font-size: 25px; font-weight: 600; }
.dt-chg { font-family: var(--mono); font-size: 14px; }
.dt-scorebadge { margin-left: auto; text-align: right; }
.dt-scorenum { font-family: var(--mono); font-size: 27px; font-weight: 700; line-height: 1; }
.dt-scorelbl { font-size: 10px; color: var(--txt-faint); text-transform: uppercase; letter-spacing: .5px; }

.range52 { margin-top: 13px; }
.range52-bar { height: 4px; background: var(--bg-3); border-radius: 2px; position: relative; }
.range52-fill { position: absolute; top: -2px; width: 3px; height: 8px; background: var(--accent); border-radius: 2px; }
.range52-lbl { display: flex; justify-content: space-between; font-size: 10px; color: var(--txt-faint); margin-top: 4px; font-family: var(--mono); }

.dt-section { padding: 16px 20px; border-bottom: 1px solid var(--line-soft); }
.dt-section h3 {
  margin: 0 0 11px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .6px; color: var(--txt-faint); font-weight: 600;
}

.chart-tools { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.chip {
  background: var(--bg-2); border: 1px solid var(--line); color: var(--txt-dim);
  border-radius: 5px; padding: 3px 9px; font-size: 11px; cursor: pointer; font: inherit; font-size: 11px;
}
.chip:hover { color: var(--txt); }
.chip.on { background: var(--accent); border-color: var(--accent); color: #06101f; font-weight: 600; }

#chart { height: 340px; width: 100%; }
#volChart { height: 88px; width: 100%; margin-top: 5px; }
.chart-legend { display: flex; gap: 14px; font-size: 10.5px; color: var(--txt-faint); margin-top: 7px; flex-wrap: wrap; }
.chart-legend i { display: inline-block; width: 11px; height: 2px; vertical-align: middle; margin-right: 4px; }

.levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 9px; }
.lvl { background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 7px; padding: 9px 11px; }
.lvl-lbl { font-size: 9.5px; color: var(--txt-faint); text-transform: uppercase; letter-spacing: .5px; }
.lvl-val { font-family: var(--mono); font-size: 15px; font-weight: 600; margin-top: 3px; }

.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 7px 18px; }
.kv-item { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--line-soft); }
.kv-k { color: var(--txt-faint); font-size: 11.5px; }
.kv-v { font-family: var(--mono); font-size: 11.5px; font-weight: 550; text-align: right; }

.evidence { list-style: none; margin: 0; padding: 0; }
.evidence li {
  padding: 7px 0 7px 17px; position: relative;
  border-bottom: 1px solid var(--line-soft); color: var(--txt-dim); font-size: 12px;
}
.evidence li:before { content: "▸"; position: absolute; left: 2px; color: var(--accent); }

.blocks { display: flex; flex-direction: column; gap: 9px; }
.blk { background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 7px; padding: 10px 12px; }
.blk-head { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.blk-name { font-size: 12px; font-weight: 600; text-transform: capitalize; }
.blk-w { font-size: 10px; color: var(--txt-faint); font-family: var(--mono); }
.blk-score { margin-left: auto; font-family: var(--mono); font-weight: 650; font-size: 13px; }
.blk-bar { height: 4px; background: var(--bg-3); border-radius: 2px; overflow: hidden; margin-bottom: 8px; }
.blk-bar i { display: block; height: 100%; }
.comp { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; padding: 3px 0; color: var(--txt-faint); }
.comp-d { flex: 1; }
.comp-s { font-family: var(--mono); color: var(--txt-dim); }

.note {
  background: #2a1e08; border: 1px solid #6b4a12; color: var(--amber);
  border-radius: 7px; padding: 9px 12px; font-size: 11.5px; margin: 14px 20px 0;
}

.disclaimer {
  padding: 11px 18px; background: var(--bg-1); border-top: 1px solid var(--line);
  font-size: 10.5px; color: var(--txt-faint); line-height: 1.55;
}

@media (max-width: 1100px) {
  .sidebar { display: none; }
  .indices { gap: 4px; }
}

/* ============================================================ Phase 2 */

:root { --rp-w: 320px; }

.layout { position: relative; }

/* views */
.view { display: none; flex-direction: column; flex: 1; overflow: hidden; height: 100%; }
.view.active { display: flex; }

/* ---- column groups in sidebar ---- */
.colgroups { margin-bottom: 18px; }
.cg-row { display: flex; align-items: center; gap: 7px; padding: 3px 2px; cursor: pointer; font-size: 11.5px; }
.cg-row input { accent-color: var(--accent); cursor: pointer; }
.cg-label { color: var(--txt-dim); flex: 1; }
.cg-row:hover .cg-label { color: var(--txt); }
.cg-tag { font-size: 8.5px; padding: 1px 4px; border-radius: 3px; background: var(--bg-3); color: var(--txt-faint); }
.cg-tag.syn { background: #2a1e08; color: var(--amber); }
.cg-tag.real { background: #0d2117; color: var(--green); }

/* ---- table additions ---- */
.grid th.pending { opacity: .55; }
.th-tag { font-size: 8px; margin-left: 4px; padding: 1px 3px; border-radius: 3px;
          background: var(--bg-3); color: var(--txt-faint); }
td.syn { background: rgba(240,180,41,.055); }
td.pending-cell { opacity: .4; }
.newscell { max-width: 260px; overflow: hidden; text-overflow: ellipsis; font-size: 11.5px; }
.sectorcell { font-size: 11px; color: var(--txt-dim); max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.tag { display: inline-block; font-size: 9.5px; padding: 1px 5px; margin-right: 3px;
       border-radius: 3px; background: var(--bg-3); color: var(--txt-dim); }

/* ---- right panel ---- */
.rightpanel {
  width: var(--rp-w); flex-shrink: 0; background: var(--bg-1);
  border-left: 1px solid var(--line); overflow-y: auto; padding: 12px;
}
body.rp-collapsed .rightpanel { display: none; }

/* The panel's own toggle. Tracks the panel's edge: against it when open, at
   the viewport edge when closed — so the control is always in the same place
   relative to the thing it opens, and is never hidden by it. */
.rp-edge-toggle {
  position: fixed;
  top: 50%;
  right: var(--rp-w);
  transform: translateY(-50%);
  z-index: 40;
  width: 20px;
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--bg-3);
  color: var(--txt-dim);
  border: 1px solid var(--line);
  border-right: 0;
  border-radius: 6px 0 0 6px;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: right .18s ease, background .12s ease;
}
.rp-edge-toggle:hover { background: var(--bg-2); color: var(--txt); }
.rp-edge-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
body.rp-collapsed .rp-edge-toggle { right: 0; }

/* The table already reflows — .content is flex:1, so removing the panel hands
   it the space. This only keeps the last column out from under the button,
   which is fixed-position and would otherwise sit on top of it. */
body.rp-collapsed .content { padding-right: 20px; }

@media (prefers-reduced-motion: reduce) { .rp-edge-toggle { transition: none; } }
.rp-section { margin-bottom: 20px; }
.rp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.rp-head h3 { margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .6px;
              color: var(--txt-faint); font-weight: 600; }
.rp-toggle { background: var(--bg-3); border: 1px solid var(--line); color: var(--txt-dim);
             width: 22px; height: 22px; border-radius: 5px; cursor: pointer; font-size: 13px; line-height: 1; }
.rp-tabs { display: flex; gap: 4px; margin-bottom: 9px; }
.rp-tab { flex: 1; background: var(--bg-2); border: 1px solid var(--line); color: var(--txt-dim);
          border-radius: 5px; padding: 4px 6px; font: inherit; font-size: 10.5px; cursor: pointer; }
.rp-tab.active { background: var(--accent); border-color: var(--accent); color: #06101f; font-weight: 600; }
.rp-loading { color: var(--txt-faint); font-size: 11.5px; padding: 14px 0; text-align: center; }

.pick { background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 8px;
        padding: 10px; margin-bottom: 8px; cursor: pointer; }
.pick:hover { border-color: var(--accent); }
.pick-head { display: flex; justify-content: space-between; align-items: baseline; }
.pick-tick { font-weight: 650; font-size: 13px; }
.pick-score { font-family: var(--mono); font-weight: 700; font-size: 16px; }
.pick-price { display: flex; align-items: center; gap: 7px; margin: 5px 0 7px; font-family: var(--mono); font-size: 11.5px; }
.pick-meta { font-size: 10.5px; color: var(--txt-dim); font-family: var(--mono); line-height: 1.6; }
.pick-scores { display: flex; flex-wrap: wrap; gap: 5px; margin: 7px 0; }
.ps { display: flex; gap: 3px; background: var(--bg-3); padding: 1px 5px; border-radius: 3px; font-size: 9.5px; }
.ps b { color: var(--txt-faint); font-weight: 500; text-transform: uppercase; }
.ps i { font-style: normal; font-family: var(--mono); font-weight: 600; }
.pick-trigger { font-size: 10.5px; color: var(--txt-dim); background: var(--bg-3);
                border-radius: 5px; padding: 6px 7px; margin-top: 6px; line-height: 1.45; }
.pick-trigger b { color: var(--accent); font-size: 9px; letter-spacing: .5px; }
.pick-conf { font-size: 9.5px; color: var(--txt-faint); margin-top: 5px; font-family: var(--mono); }

.feed-filter { width: 100%; background: var(--bg-2); border: 1px solid var(--line);
               color: var(--txt); border-radius: 5px; padding: 5px 7px; font: inherit;
               font-size: 11px; margin-bottom: 8px; }
.feed-item { border-left: 2px solid var(--line); padding: 7px 0 7px 9px; margin-bottom: 3px; }
.feed-item.up { border-left-color: var(--up); }
.feed-item.down { border-left-color: var(--down); }
.feed-top { display: flex; gap: 6px; align-items: center; margin-bottom: 3px; flex-wrap: wrap; }
.feed-time { font-size: 9.5px; color: var(--txt-faint); font-family: var(--mono); }
.feed-cat { font-size: 8.5px; text-transform: uppercase; letter-spacing: .4px;
            background: var(--bg-3); color: var(--txt-faint); padding: 1px 5px; border-radius: 3px; }
.feed-mag { font-size: 8.5px; background: rgba(220,76,76,.2); color: #f08a8a; padding: 1px 5px; border-radius: 3px; }
.feed-head { font-size: 11.5px; line-height: 1.4; color: var(--txt-dim); }
.feed-tick { display: inline-block; margin-top: 4px; font-size: 9.5px; font-weight: 600;
             color: var(--accent); cursor: pointer; }

/* ---- detail tabs ---- */
.dt-tabs { display: flex; gap: 2px; padding: 0 20px; border-bottom: 1px solid var(--line);
           position: sticky; top: 0; background: var(--bg-1); z-index: 4; overflow-x: auto; }
.dt-tab { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--txt-faint);
          padding: 10px 13px; cursor: pointer; font: inherit; font-size: 12px; white-space: nowrap; }
.dt-tab:hover { color: var(--txt-dim); }
.dt-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 550; }
.tabcount { margin-left: 5px; font-size: 9px; background: var(--bg-3); padding: 1px 4px; border-radius: 3px; }

.agent-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 7px; }
.agent-card { background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 7px;
              padding: 9px; text-align: center; }
.agent-card.empty { opacity: .42; }
.agent-card.syn { border-color: #4a3810; background: #1c1809; }
.agent-val { font-family: var(--mono); font-size: 19px; font-weight: 700; }
.agent-lbl { font-size: 9.5px; color: var(--txt-faint); text-transform: uppercase; letter-spacing: .4px; margin-top: 2px; }

.trigger-box { background: var(--bg-3); border-radius: 6px; padding: 9px 11px; margin-top: 10px;
               font-size: 12px; color: var(--txt-dim); line-height: 1.5; }
.trigger-box b { color: var(--accent); font-size: 9.5px; letter-spacing: .6px; }
.conflicts { margin-top: 11px; }
.conflicts h4 { margin: 0 0 6px; font-size: 10.5px; text-transform: uppercase;
                letter-spacing: .5px; color: var(--amber); font-weight: 600; }
.conflict { font-size: 11.5px; color: var(--txt-dim); padding: 5px 0 5px 12px;
            border-left: 2px solid var(--amber); margin-bottom: 4px; line-height: 1.45; }

.twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 760px) { .twocol { grid-template-columns: 1fr; } }
.case { background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 8px; padding: 11px; }
.case h4 { margin: 0 0 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
.case.bull h4 { color: var(--up); }
.case.bear h4 { color: var(--down); }
.case-item { font-size: 11.5px; color: var(--txt-dim); padding: 5px 0; border-bottom: 1px solid var(--line-soft); line-height: 1.45; }
.case-item:last-child { border-bottom: 0; }

.evidence.risk li:before { content: "▸"; color: var(--down); }

.ca-list { display: flex; flex-direction: column; gap: 5px; }
.ca-row { display: flex; gap: 10px; align-items: baseline; padding: 7px 9px; background: var(--bg-2);
          border-radius: 6px; border-left: 2px solid var(--line); font-size: 11.5px; }
.ca-row.up { border-left-color: var(--up); }
.ca-row.down { border-left-color: var(--down); }
.ca-type { font-weight: 600; min-width: 96px; }
.ca-desc { flex: 1; color: var(--txt-dim); }
.ca-date { font-family: var(--mono); font-size: 10.5px; color: var(--txt-faint); }

/* ---- news ---- */
.news-filters { display: flex; gap: 7px; }
.news-filters select { background: var(--bg-2); border: 1px solid var(--line); color: var(--txt);
                       border-radius: 6px; padding: 5px 8px; font: inherit; font-size: 11.5px; }
.news-list { display: flex; flex-direction: column; gap: 7px; overflow-y: auto; padding: 14px 16px; }
.view#view-news .news-list { flex: 1; }
.news-card { background: var(--bg-2); border: 1px solid var(--line-soft); border-left-width: 3px;
             border-radius: 7px; padding: 10px 12px; }
.news-card.up { border-left-color: var(--up); }
.news-card.down { border-left-color: var(--down); }
.news-card.flat { border-left-color: var(--line); }
.nc-top { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; margin-bottom: 5px; }
.nc-src { font-size: 10px; font-weight: 600; color: var(--accent); }
.nc-time { font-size: 10px; color: var(--txt-faint); font-family: var(--mono); }
.nc-cat, .nc-impact, .nc-mag { font-size: 8.5px; text-transform: uppercase; letter-spacing: .4px;
                               padding: 1px 5px; border-radius: 3px; background: var(--bg-3); color: var(--txt-faint); }
.nc-impact.up { background: rgba(38,166,154,.18); color: var(--up); }
.nc-impact.down { background: rgba(239,83,80,.18); color: var(--down); }
.nc-head { font-size: 12.5px; line-height: 1.45; margin-bottom: 4px; }
.nc-link { color: var(--txt); text-decoration: none; }
.nc-link:hover { color: var(--accent); text-decoration: underline; }
.nc-sum { font-size: 11.5px; color: var(--txt-dim); line-height: 1.5; margin-bottom: 5px; }
.nc-foot { display: flex; gap: 9px; flex-wrap: wrap; font-size: 9.5px; color: var(--txt-faint); font-family: var(--mono); }
.nc-tick { font-weight: 700; color: var(--accent); }
.nc-engine { font-style: italic; }

/* ---- chat ---- */
.chat-wrap { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.chat-log { flex: 1; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.chat-empty { margin: auto; text-align: center; max-width: 520px; }
.chat-empty h2 { font-size: 17px; margin: 0 0 6px; }
.chat-empty p { color: var(--txt-faint); font-size: 12.5px; margin: 0 0 16px; }
.chat-suggestions { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; }

.msg { max-width: 82%; }
.msg.user { align-self: flex-end; background: var(--accent); color: #06101f;
            border-radius: 12px 12px 3px 12px; padding: 9px 13px; font-size: 12.5px; }
.msg.assistant { align-self: flex-start; background: var(--bg-2); border: 1px solid var(--line-soft);
                 border-radius: 12px 12px 12px 3px; padding: 12px 15px; }
.msg.pending { opacity: .6; font-style: italic; }
.msg-h { margin: 10px 0 6px; font-size: 13.5px; color: var(--accent); }
.msg-h:first-child { margin-top: 0; }
.msg-p { font-size: 12.5px; line-height: 1.6; margin-bottom: 5px; color: var(--txt-dim); }
.msg-li { font-size: 12.5px; line-height: 1.55; padding-left: 14px; position: relative; color: var(--txt-dim); margin-bottom: 3px; }
.msg-li:before { content: "•"; position: absolute; left: 2px; color: var(--accent); }
.msg-meta { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 9px; padding-top: 8px;
            border-top: 1px solid var(--line-soft); font-size: 9.5px; color: var(--txt-faint); font-family: var(--mono); }
.engine-tag { padding: 1px 6px; border-radius: 3px; background: var(--bg-3); }
.engine-tag.claude { background: rgba(91,157,255,.18); color: var(--accent); }
.engine-tag.rules { background: #2a1e08; color: var(--amber); }

.chat-input { display: flex; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--line); background: var(--bg-1); }
.chat-input input { flex: 1; background: var(--bg-2); border: 1px solid var(--line); color: var(--txt);
                    border-radius: 8px; padding: 10px 13px; font: inherit; font-size: 12.5px; }
.chat-input input:focus { outline: none; border-color: var(--accent); }
.chat-input .btn-primary { width: auto; padding: 8px 20px; }

@media (max-width: 1400px) { .rightpanel { display: none; } }

/* ==========================================================================
   Phase 3 — Capital Allocation, Screener, Options, Sentiment
   ========================================================================== */

/* ---- Capital Allocation module (spec 1.2A) ---- */
.capital { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); }
.capital .nav-title { display: flex; align-items: center; justify-content: space-between; }
.cap-toggle {
  background: none; border: 0; color: var(--txt-faint); cursor: pointer;
  font-size: 12px; padding: 0 2px; line-height: 1;
}
.cap-toggle:hover { color: var(--txt); }
.capital.collapsed .cap-body { display: none; }
.cap-body > .fld { margin-bottom: 8px; }
.cap-styles { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.cap-row { display: grid; grid-template-columns: 1fr 46px 54px; gap: 5px; align-items: center; }
.cap-row-label { font-size: 11px; color: var(--txt-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cap-row input[type=number] {
  width: 100%; background: var(--bg-2); border: 1px solid var(--line);
  color: var(--txt); border-radius: 4px; padding: 3px 4px;
  font: 11px var(--mono); text-align: right;
}
.cap-row select {
  width: 100%; background: var(--bg-2); border: 1px solid var(--line);
  color: var(--txt-dim); border-radius: 4px; padding: 3px 2px; font-size: 10px;
}
.cap-row.unviable input[type=number] { border-color: var(--amber); }
.cap-amt { font: 10px var(--mono); color: var(--txt-faint); text-align: right; grid-column: 1 / -1; margin-top: -3px; }
.cap-sum {
  font: 11px var(--mono); color: var(--txt-dim); text-align: right;
  padding: 4px 0; border-top: 1px dashed var(--line);
}
.cap-sum.bad { color: var(--down); }
.cap-sum.ok { color: var(--up); }
.cap-msgs { display: flex; flex-direction: column; gap: 3px; margin-bottom: 6px; }
.cap-msg { font-size: 10.5px; line-height: 1.35; padding: 4px 6px; border-radius: 4px; }
.cap-msg.err { background: rgba(239,83,80,.12); color: #ffb3b1; border-left: 2px solid var(--down); }
.cap-msg.warn { background: rgba(240,180,41,.1); color: #f5cf7a; border-left: 2px solid var(--amber); }

/* ---- Options market strip on the dashboard ---- */
.optbar {
  display: flex; gap: 10px; flex-wrap: wrap; padding: 8px 10px; margin-bottom: 10px;
  background: var(--bg-1); border: 1px solid var(--line-soft); border-radius: 6px;
}
.optbar-idx { display: flex; flex-direction: column; gap: 2px; min-width: 132px; }
.optbar-name { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--txt-faint); }
.optbar-row { display: flex; gap: 8px; align-items: baseline; }
.optbar-val { font: 13px var(--mono); color: var(--txt); }
.optbar-sub { font: 10.5px var(--mono); color: var(--txt-dim); }
.optbar-note { margin-left: auto; align-self: center; font-size: 10.5px; color: var(--txt-faint); }

/* ---- Screener ---- */
.scan-layout { display: grid; grid-template-columns: 268px 1fr; gap: 12px; align-items: start; }
.scan-list { display: flex; flex-direction: column; gap: 5px; max-height: calc(100vh - 190px); overflow-y: auto; }
.scan-item {
  text-align: left; background: var(--bg-1); border: 1px solid var(--line-soft);
  border-radius: 5px; padding: 7px 9px; cursor: pointer; color: var(--txt);
}
.scan-item:hover { border-color: var(--line); background: var(--bg-2); }
.scan-item.active { border-color: var(--accent); background: var(--bg-2); }
.scan-item.dead { opacity: .55; cursor: not-allowed; }
.scan-item-top { display: flex; align-items: center; gap: 6px; justify-content: space-between; }
.scan-name { font-size: 12px; font-weight: 600; }
.scan-count { font: 11px var(--mono); color: var(--accent); }
.scan-count.zero { color: var(--txt-faint); }
.scan-desc { font-size: 10.5px; color: var(--txt-faint); margin-top: 3px; line-height: 1.35; }
.dq {
  font-size: 8.5px; letter-spacing: .07em; text-transform: uppercase;
  padding: 1px 4px; border-radius: 3px; font-weight: 700;
}
.dq.real { background: rgba(38,166,154,.16); color: var(--up); }
.dq.synthetic { background: rgba(240,180,41,.16); color: var(--amber); }
.dq.unavailable { background: rgba(102,112,138,.18); color: var(--txt-faint); }
.scan-res-head { font-size: 12px; color: var(--txt-dim); margin-bottom: 8px; }
.scan-res-head b { color: var(--txt); }
.scan-unavailable {
  background: rgba(102,112,138,.1); border-left: 2px solid var(--txt-faint);
  padding: 10px 12px; border-radius: 5px; font-size: 12px; color: var(--txt-dim); line-height: 1.5;
}

.custom-scan { background: var(--bg-1); border: 1px solid var(--line-soft); border-radius: 6px; padding: 10px; margin-bottom: 12px; }
.cs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 8px; }
.cs-fld { display: flex; flex-direction: column; gap: 3px; }
.cs-fld span { font-size: 10px; color: var(--txt-faint); text-transform: uppercase; letter-spacing: .05em; }
.cs-fld input, .cs-fld select {
  background: var(--bg-2); border: 1px solid var(--line); color: var(--txt);
  border-radius: 4px; padding: 4px 6px; font: 11px var(--mono);
}
.cs-actions { display: flex; gap: 8px; margin-top: 10px; }

/* ---- Options deep-dive tab ---- */
.opt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(126px, 1fr)); gap: 8px; }
.opt-cell { background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 5px; padding: 7px 9px; }
.opt-cell-lbl { font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--txt-faint); }
.opt-cell-val { font: 14px var(--mono); margin-top: 3px; }
.opt-cell-sub { font-size: 10px; color: var(--txt-faint); margin-top: 2px; }

.oi-chart { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.oi-row { display: grid; grid-template-columns: 1fr 62px 1fr; gap: 6px; align-items: center; font: 10.5px var(--mono); }
.oi-bar { height: 11px; border-radius: 2px; display: flex; }
.oi-bar.call { justify-content: flex-end; }
.oi-bar i { display: block; height: 100%; border-radius: 2px; }
.oi-bar.call i { background: rgba(239,83,80,.65); }
.oi-bar.put i { background: rgba(38,166,154,.65); }
.oi-strike { text-align: center; color: var(--txt-dim); }
.oi-strike.atm { color: var(--accent); font-weight: 700; }
.oi-strike.wall-c { color: var(--down); }
.oi-strike.wall-p { color: var(--up); }
.oi-legend { display: flex; gap: 14px; font-size: 10.5px; color: var(--txt-faint); margin-top: 6px; }
.oi-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }

.strat { background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 6px; padding: 10px 12px; margin-bottom: 8px; }
.strat-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.strat-name { font-size: 13px; font-weight: 700; }
.strat-tag { font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; padding: 1px 5px; border-radius: 3px; background: var(--bg-3); color: var(--txt-dim); }
.strat-pop { margin-left: auto; font: 12px var(--mono); color: var(--accent); }
.strat-rationale { font-size: 11.5px; color: var(--txt-dim); margin: 6px 0; line-height: 1.45; }
.strat-legs { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.leg { font: 11px var(--mono); padding: 3px 7px; border-radius: 4px; border: 1px solid var(--line); }
.leg.buy { background: rgba(38,166,154,.1); border-color: rgba(38,166,154,.4); }
.leg.sell { background: rgba(239,83,80,.1); border-color: rgba(239,83,80,.4); }
.strat-nums { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 6px; margin-top: 6px; }
.strat-num { font-size: 10.5px; }
.strat-num b { display: block; color: var(--txt-faint); font-weight: 500; font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; }
.strat-num span { font: 12px var(--mono); }
.strat-exits { margin-top: 7px; padding-top: 7px; border-top: 1px dashed var(--line); }
.strat-exits div { font-size: 11px; color: var(--txt-dim); padding: 1px 0 1px 12px; position: relative; }
.strat-exits div::before { content: "→"; position: absolute; left: 0; color: var(--txt-faint); }
.est { color: var(--amber); font-size: 9.5px; }

/* ---- Position sizing ---- */
.sizing { background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 6px; padding: 10px 12px; }
.sizing.blocked { border-color: rgba(240,180,41,.4); }
.sizing-qty { font: 22px var(--mono); color: var(--accent); }
.sizing-line { font-size: 11.5px; color: var(--txt-dim); margin-top: 2px; }
.sizing-warn { font-size: 11px; color: var(--amber); margin-top: 5px; padding-left: 12px; position: relative; }
.sizing-warn::before { content: "!"; position: absolute; left: 2px; font-weight: 700; }
.sizing-limit { font-size: 11px; color: var(--violet); margin-top: 4px; }
.pick-size { font: 10.5px var(--mono); color: var(--accent); margin-top: 4px; padding-top: 4px; border-top: 1px dashed var(--line); }

/* ---- Sentiment ---- */
.sent-bars { display: flex; flex-direction: column; gap: 7px; }
.sent-row { display: grid; grid-template-columns: 108px 1fr 74px; gap: 8px; align-items: center; }
.sent-lbl { font-size: 11px; color: var(--txt-dim); }
.sent-bar { height: 9px; background: var(--bg-3); border-radius: 5px; overflow: hidden; }
.sent-bar i { display: block; height: 100%; border-radius: 5px; }
.sent-meta { font: 10.5px var(--mono); color: var(--txt-faint); text-align: right; }
.sent-row.syn .sent-lbl { color: var(--amber); }
.sent-flags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.sent-flag { font-size: 10.5px; padding: 2px 7px; border-radius: 10px; background: var(--bg-3); color: var(--txt-dim); }
.sent-flag.hot { background: rgba(240,180,41,.15); color: var(--amber); }
.theme-tag { font-size: 10.5px; padding: 2px 7px; border-radius: 10px; background: rgba(91,157,255,.13); color: var(--accent); margin-right: 5px; }

/* ==========================================================================
   Phase 4 — Sectors, Portfolio, Alerts, Track Record, Settings
   ========================================================================== */

.nav-item .badge {
  margin-left: auto; background: var(--sell); color: #fff; font-style: normal;
  font-size: 9.5px; font-weight: 700; padding: 1px 5px; border-radius: 8px;
}

/* ---- shared panel ---- */
.p4-sec { background: var(--bg-1); border: 1px solid var(--line-soft); border-radius: 6px; padding: 12px 14px; margin-bottom: 12px; }
.p4-sec > h3 {
  margin: 0 0 10px; font-size: 12px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--txt-dim); font-weight: 600;
}
.p4-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.p4-cell { background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 5px; padding: 8px 10px; }
.p4-lbl { font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--txt-faint); }
.p4-val { font: 16px var(--mono); margin-top: 3px; }
.p4-sub { font-size: 10px; color: var(--txt-faint); margin-top: 2px; }
.p4-note { font-size: 11px; color: var(--txt-dim); line-height: 1.5; margin-top: 8px; }

/* ---- sectors ---- */
.stance { font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; padding: 2px 6px; border-radius: 3px; font-weight: 700; }
.stance.overweight { background: rgba(22,163,74,.18); color: var(--buy); }
.stance.neutral { background: rgba(138,147,166,.16); color: var(--hold); }
.stance.underweight { background: rgba(220,76,76,.16); color: var(--sell); }
.sector-row { display: grid; grid-template-columns: 190px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.sector-row:last-child { border-bottom: 0; }
.sector-name { font-size: 13px; font-weight: 600; }
.sector-index { font-size: 10.5px; color: var(--txt-faint); margin-top: 2px; }
.sector-nums { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.sector-num { font: 11.5px var(--mono); }
.sector-num b { display: block; font: 9.5px var(--sans); color: var(--txt-faint); text-transform: uppercase; letter-spacing: .05em; font-weight: 500; }
.sector-why { font-size: 11px; color: var(--txt-dim); margin-top: 5px; line-height: 1.45; }
.rs-bar { height: 6px; background: var(--bg-3); border-radius: 3px; position: relative; margin-top: 6px; overflow: hidden; }
.rs-bar i { position: absolute; top: 0; bottom: 0; border-radius: 3px; }
.rs-bar i.pos { background: var(--up); left: 50%; }
.rs-bar i.neg { background: var(--down); right: 50%; }
.rs-mid { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--line); }

/* ---- portfolio ---- */
.pf-head { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 12px; }
.gain-type { font-size: 9px; padding: 1px 4px; border-radius: 3px; background: var(--bg-3); color: var(--txt-faint); margin-left: 5px; }
.gain-type.long_term { background: rgba(38,166,154,.15); color: var(--up); }
.pf-close { background: none; border: 1px solid var(--line); color: var(--txt-faint); border-radius: 3px; cursor: pointer; font-size: 10px; padding: 1px 6px; }
.pf-close:hover { border-color: var(--sell); color: var(--sell); }
.exposure { display: flex; height: 22px; border-radius: 4px; overflow: hidden; margin: 6px 0; }
.exposure div { display: flex; align-items: center; justify-content: center; font-size: 9.5px; color: #0d0f14; font-weight: 600; overflow: hidden; }
.exposure-key { display: flex; flex-wrap: wrap; gap: 10px; font-size: 10.5px; color: var(--txt-dim); }
.exposure-key i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.stress-row { display: grid; grid-template-columns: 1fr 90px 84px; gap: 10px; align-items: center; padding: 5px 0; font-size: 11.5px; border-bottom: 1px dashed var(--line-soft); }
.stress-row:last-child { border-bottom: 0; }
.stress-bar { height: 8px; background: var(--bg-3); border-radius: 4px; overflow: hidden; }
.stress-bar i { display: block; height: 100%; background: var(--down); border-radius: 4px; }
.hedge { font-size: 11.5px; padding: 7px 10px; background: rgba(167,139,250,.09); border-left: 2px solid var(--violet); border-radius: 4px; margin-bottom: 5px; }
.hedge b { color: var(--violet); }
.hedge span { display: block; color: var(--txt-dim); margin-top: 2px; }
.corr-table { font: 10.5px var(--mono); border-collapse: collapse; }
.corr-table th, .corr-table td { padding: 3px 7px; text-align: center; border: 1px solid var(--line-soft); }
.corr-table th { color: var(--txt-faint); font-weight: 500; }

/* ---- alerts ---- */
.alert-item { display: grid; grid-template-columns: 4px 1fr; gap: 10px; background: var(--bg-1); border: 1px solid var(--line-soft); border-radius: 5px; margin-bottom: 6px; overflow: hidden; }
.alert-item.unread { border-color: var(--line); background: var(--bg-2); }
.alert-bar { background: var(--hold); }
.alert-item.info .alert-bar { background: var(--accent); }
.alert-item.warning .alert-bar { background: var(--amber); }
.alert-item.critical .alert-bar { background: var(--sell); }
.alert-body { padding: 8px 10px 9px; }
.alert-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 3px; }
.alert-type { font-size: 9px; text-transform: uppercase; letter-spacing: .06em; padding: 1px 5px; border-radius: 3px; background: var(--bg-3); color: var(--txt-dim); }
.alert-time { font-size: 10px; color: var(--txt-faint); }
.alert-tick { font: 10.5px var(--mono); color: var(--accent); cursor: pointer; }
.alert-head { font-size: 12.5px; line-height: 1.4; }
.alert-sub { font-size: 11px; color: var(--txt-dim); margin-top: 3px; line-height: 1.45; }
.channel { display: flex; align-items: center; gap: 8px; font-size: 11.5px; padding: 5px 0; border-bottom: 1px dashed var(--line-soft); }
.channel:last-child { border-bottom: 0; }
.channel .dot-ok { width: 7px; height: 7px; border-radius: 50%; background: var(--up); }
.channel .dot-off { width: 7px; height: 7px; border-radius: 50%; background: var(--txt-faint); }
.channel em { font-style: normal; color: var(--txt-faint); font-size: 10.5px; margin-left: auto; }

/* ---- track record / backtests ---- */
.verdict-box { background: rgba(240,180,41,.09); border-left: 2px solid var(--amber); padding: 10px 12px; border-radius: 4px; font-size: 12px; line-height: 1.55; color: var(--txt-dim); }
.bt-warn { background: rgba(220,76,76,.1); border-left: 2px solid var(--sell); padding: 10px 12px; border-radius: 4px; font-size: 11.5px; line-height: 1.55; color: #ffc9c7; margin-bottom: 10px; }
.mc-band { display: flex; align-items: center; gap: 8px; font: 11px var(--mono); margin-top: 6px; }
.mc-track { flex: 1; height: 8px; background: var(--bg-3); border-radius: 4px; position: relative; }
.mc-fill { position: absolute; top: 0; bottom: 0; background: rgba(91,157,255,.4); border-radius: 4px; }
.mc-median { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--accent); }

/* ---- settings ---- */
.set-row { display: grid; grid-template-columns: 210px 1fr; gap: 12px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line-soft); }
.set-row:last-child { border-bottom: 0; }
.set-lbl { font-size: 12px; }
.set-lbl span { display: block; font-size: 10.5px; color: var(--txt-faint); margin-top: 1px; }
.set-row select, .set-row input[type=number] {
  background: var(--bg-2); border: 1px solid var(--line); color: var(--txt);
  border-radius: 4px; padding: 4px 7px; font: 11.5px var(--mono); max-width: 190px;
}
.src-row { display: grid; grid-template-columns: 18px 1fr auto; gap: 10px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.src-row:last-child { border-bottom: 0; }
.src-name { font-size: 12px; font-weight: 600; }
.src-impact { font-size: 10.5px; color: var(--txt-faint); margin-top: 2px; line-height: 1.4; }
.src-keys { font: 10px var(--mono); color: var(--txt-faint); margin-top: 3px; }
.src-state { font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; padding: 2px 6px; border-radius: 3px; font-weight: 700; white-space: nowrap; }
.src-state.on { background: rgba(38,166,154,.16); color: var(--up); }
.src-state.off { background: rgba(240,180,41,.14); color: var(--amber); }

/* ==========================================================================
   Phase 5 — Accounts, tiers, access control
   ========================================================================== */

.authbox {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  padding: 4px 9px; border: 1px solid var(--line); border-radius: 4px;
  background: var(--bg-2); color: var(--txt-dim); white-space: nowrap;
}
.auth-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--txt-faint); }
.authbox.signed-in .auth-dot { background: var(--up); }
.authbox.open-mode { border-color: rgba(240,180,41,.5); color: var(--amber); }
.authbox.open-mode .auth-dot { background: var(--amber); }

.nav-item .tier-chip {
  margin-left: auto; font-style: normal; font-size: 8.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; padding: 1px 5px;
  border-radius: 3px; background: var(--bg-3); color: var(--txt-dim);
}
.nav-item .tier-chip.pro { background: rgba(91,157,255,.18); color: var(--accent); }
.nav-item .tier-chip.premium { background: rgba(167,139,250,.2); color: var(--violet); }
.nav-item .tier-chip.advisor { background: rgba(240,180,41,.2); color: var(--amber); }

/* ---- locked feature panel ---- */
.locked {
  background: var(--bg-1); border: 1px dashed var(--line); border-radius: 6px;
  padding: 22px 24px; text-align: center; max-width: 620px; margin: 20px auto;
}
.locked-ico { font-size: 26px; color: var(--txt-faint); }
.locked h3 { margin: 10px 0 6px; font-size: 15px; }
.locked p { margin: 0 0 6px; font-size: 12.5px; color: var(--txt-dim); line-height: 1.6; }
.locked-tiers { display: flex; gap: 6px; justify-content: center; margin: 12px 0; flex-wrap: wrap; }
.locked-note { font-size: 11px; color: var(--txt-faint); margin-top: 10px; line-height: 1.5; }

/* ---- pricing table ---- */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.plan {
  background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 6px;
  padding: 14px; display: flex; flex-direction: column;
}
.plan.current { border-color: var(--accent); box-shadow: inset 0 0 0 1px rgba(91,157,255,.25); }
.plan-name { font-size: 14px; font-weight: 700; }
.plan-price { font: 20px var(--mono); margin: 6px 0 2px; }
.plan-price small { font: 10.5px var(--sans); color: var(--txt-faint); }
.plan-annual { font-size: 10.5px; color: var(--txt-faint); }
.plan-summary { font-size: 11.5px; color: var(--txt-dim); margin: 8px 0; line-height: 1.5; min-height: 34px; }
.plan-adds { font-size: 11px; color: var(--txt-dim); flex: 1; }
.plan-adds div { padding: 2px 0 2px 13px; position: relative; }
.plan-adds div::before { content: "+"; position: absolute; left: 0; color: var(--up); font-weight: 700; }
.plan-btn {
  margin-top: 10px; width: 100%; background: var(--bg-3); border: 1px solid var(--line);
  color: var(--txt); border-radius: 4px; padding: 6px; cursor: pointer; font-size: 12px;
}
.plan-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.plan-btn:disabled { opacity: .5; cursor: default; }

/* ---- entitlement grid ---- */
.ent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 14px; }
.ent { display: flex; align-items: center; gap: 7px; font-size: 11.5px; padding: 3px 0; }
.ent i { width: 13px; text-align: center; font-style: normal; font-weight: 700; }
.ent.on i { color: var(--up); }
.ent.off { color: var(--txt-faint); }
.ent.off i { color: var(--txt-faint); }

/* ---- quota meters ---- */
.quota { display: grid; grid-template-columns: 170px 1fr 90px; gap: 10px; align-items: center; padding: 6px 0; }
.quota-bar { height: 8px; background: var(--bg-3); border-radius: 4px; overflow: hidden; }
.quota-bar i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.quota-bar i.full { background: var(--sell); }
.quota-val { font: 11px var(--mono); color: var(--txt-dim); text-align: right; }

.wl-item {
  display: inline-flex; align-items: center; gap: 6px; background: var(--bg-2);
  border: 1px solid var(--line-soft); border-radius: 4px; padding: 3px 8px;
  margin: 0 5px 5px 0; font: 11.5px var(--mono);
}
.wl-item button { background: none; border: 0; color: var(--txt-faint); cursor: pointer; font-size: 13px; line-height: 1; padding: 0; }
.wl-item button:hover { color: var(--sell); }

/* ==========================================================================
   Scheduler, reports and sign-in
   ========================================================================== */

.report-md { font-size: 13px; line-height: 1.7; max-width: 780px; }
.report-md h1 { font-size: 19px; margin: 0 0 4px; }
.report-md h2 { font-size: 15px; margin: 20px 0 7px; color: var(--txt); border-bottom: 1px solid var(--line-soft); padding-bottom: 4px; }
.report-md h3 { font-size: 13px; margin: 15px 0 5px; color: var(--txt-dim); }
.report-md p { margin: 0 0 10px; color: var(--txt-dim); }
.report-md li { margin: 0 0 4px 16px; color: var(--txt-dim); }
.report-md strong { color: var(--txt); }
.report-md em { color: var(--txt-faint); font-style: normal; font-size: 11.5px; }
.report-md hr { border: 0; border-top: 1px solid var(--line-soft); margin: 16px 0; }
.report-md blockquote {
  margin: 0 0 12px; padding: 9px 12px; background: rgba(240,180,41,.09);
  border-left: 2px solid var(--amber); border-radius: 4px; color: #f5cf7a; font-size: 12px;
}
.rep-badge { font-size: 9px; text-transform: uppercase; letter-spacing: .06em; padding: 1px 5px; border-radius: 3px; margin-left: 6px; }
.rep-badge.claude { background: rgba(91,157,255,.16); color: var(--accent); }
.rep-badge.rules { background: rgba(138,147,166,.16); color: var(--hold); }

/* ---- scheduler ---- */
.job-row { display: grid; grid-template-columns: 1fr 150px 88px; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line-soft); }
.job-row:last-child { border-bottom: 0; }
.job-name { font-size: 12px; font-weight: 600; }
.job-desc { font-size: 10.5px; color: var(--txt-faint); margin-top: 2px; line-height: 1.4; }
.job-next { font: 11px var(--mono); color: var(--txt-dim); }
.job-run { background: var(--bg-3); border: 1px solid var(--line); color: var(--txt-dim); border-radius: 4px; padding: 3px 8px; cursor: pointer; font-size: 11px; }
.job-run:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.job-run:disabled { opacity: .5; cursor: default; }
.runlog { display: grid; grid-template-columns: 150px 80px 70px 1fr; gap: 8px; font: 10.5px var(--mono); padding: 3px 0; border-bottom: 1px dashed var(--line-soft); }
.runlog:last-child { border-bottom: 0; }
.runlog .ok { color: var(--up); }
.runlog .bad { color: var(--down); }
.runlog .skip { color: var(--txt-faint); }

/* ---- sign in ---- */
.signin { max-width: 340px; }
.signin label { display: block; margin-bottom: 9px; }
.signin span { display: block; font-size: 10.5px; color: var(--txt-faint); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 3px; }
.signin input {
  width: 100%; background: var(--bg-2); border: 1px solid var(--line); color: var(--txt);
  border-radius: 4px; padding: 7px 9px; font-size: 12.5px;
}
.signin-actions { display: flex; gap: 8px; margin-top: 4px; }
.signin-msg { font-size: 11.5px; margin-top: 9px; line-height: 1.5; }
.signin-msg.err { color: var(--down); }
.signin-msg.ok { color: var(--up); }

/* ==========================================================================
   Phase 6 — Filter bar, left-panel news feed, macro
   ========================================================================== */

/* ---- A: filter bar ---- */
.filterbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 10px; margin-bottom: 10px; background: var(--bg-1);
  border: 1px solid var(--line-soft); border-radius: 6px;
}
.fb-pill {
  background: var(--bg-3); border: 1px solid var(--line); color: var(--txt);
  border-radius: 4px; padding: 5px 11px; cursor: pointer; font-size: 12px;
}
.fb-pill:hover { border-color: var(--accent); }
.fb-pill.on { border-color: var(--accent); color: var(--accent); }
.fb-pill em { font-style: normal; color: var(--txt-faint); margin-left: 6px; font-size: 10.5px; }
.fb-pill.on em { color: var(--accent); }
.fb-set {
  background: var(--bg-2); border: 1px solid var(--line); color: var(--txt-dim);
  border-radius: 4px; padding: 5px 7px; font-size: 11.5px; max-width: 210px;
}
.fb-count { margin-left: auto; font: 11.5px var(--mono); color: var(--txt-dim); }
.fb-count b { color: var(--accent); }

.fb-drawer {
  background: var(--bg-1); border: 1px solid var(--line-soft); border-radius: 6px;
  padding: 12px 14px; margin-bottom: 10px;
}
.fb-group { margin-bottom: 14px; }
.fb-group:last-child { margin-bottom: 0; }
.fb-group h4 {
  margin: 0 0 8px; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--txt-faint); font-weight: 600;
}
.fb-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 8px 12px; }
.fb-field { display: flex; flex-direction: column; gap: 3px; }
.fb-field > span { font-size: 10.5px; color: var(--txt-dim); }
.fb-range { display: flex; gap: 5px; align-items: center; }
.fb-range input {
  width: 100%; background: var(--bg-2); border: 1px solid var(--line); color: var(--txt);
  border-radius: 4px; padding: 4px 6px; font: 11px var(--mono);
}
.fb-range span { color: var(--txt-faint); font-size: 10px; }
.fb-field select, .fb-field input[type=number], .fb-field input[type=text] {
  background: var(--bg-2); border: 1px solid var(--line); color: var(--txt);
  border-radius: 4px; padding: 4px 6px; font: 11px var(--mono);
}
.fb-field select[multiple] { min-height: 68px; font-size: 10.5px; }
.fb-toggle { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--txt-dim); }
.fb-active {
  display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px;
  padding-top: 9px; border-top: 1px dashed var(--line);
}
.fb-active span {
  font: 10.5px var(--mono); background: rgba(91,157,255,.13); color: var(--accent);
  padding: 2px 7px; border-radius: 10px;
}

/* ---- B: left-panel news feed ---- */
.lp-feed { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); }
.lp-feed .nav-title { display: flex; align-items: center; justify-content: space-between; }
.lp-feed.collapsed .lp-feed-body { display: none; }
.feed-search {
  width: 100%; background: var(--bg-2); border: 1px solid var(--line); color: var(--txt);
  border-radius: 4px; padding: 5px 8px; font-size: 11.5px; margin-bottom: 6px;
}
.chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 7px; }
.fchip {
  font-size: 9.5px; padding: 2px 7px; border-radius: 10px; cursor: pointer;
  background: var(--bg-3); border: 1px solid transparent; color: var(--txt-faint);
}
.fchip:hover { color: var(--txt); }
.fchip.on { background: rgba(91,157,255,.16); border-color: rgba(91,157,255,.45); color: var(--accent); }
.lp-feed-list { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.lp-item {
  background: var(--bg-2); border: 1px solid var(--line-soft); border-left-width: 2px;
  border-radius: 4px; padding: 5px 7px; cursor: pointer;
}
.lp-item:hover { border-color: var(--line); }
.lp-item.positive { border-left-color: var(--up); }
.lp-item.negative { border-left-color: var(--down); }
.lp-item.neutral { border-left-color: var(--txt-faint); }
.lp-item.pinned { background: rgba(91,157,255,.07); border-color: rgba(91,157,255,.35); }
.lp-top { display: flex; align-items: center; gap: 5px; margin-bottom: 2px; }
.lp-time { font: 9.5px var(--mono); color: var(--txt-faint); }
.lp-tick { font: 9.5px var(--mono); color: var(--accent); }
.lp-pin { font-size: 8.5px; color: var(--accent); }
.lp-head { font-size: 10.5px; line-height: 1.35; color: var(--txt-dim); }
.lp-item.pinned .lp-head { color: var(--txt); }
.lp-feed-meta { font-size: 10px; color: var(--txt-faint); margin-top: 6px; }

/* ---- follow toggle ---- */
.follow-btn {
  background: var(--bg-3); border: 1px solid var(--line); color: var(--txt-dim);
  border-radius: 4px; padding: 4px 10px; cursor: pointer; font-size: 11.5px;
}
.follow-btn.on { border-color: var(--accent); color: var(--accent); background: rgba(91,157,255,.1); }

/* ---- macro ---- */
.macro-row { display: grid; grid-template-columns: 1fr 120px 92px; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.macro-row:last-child { border-bottom: 0; }
.macro-row.off { opacity: .55; }
.macro-name { font-size: 12px; }
.macro-why { font-size: 10.5px; color: var(--txt-faint); margin-top: 2px; line-height: 1.4; }
.macro-val { font: 13px var(--mono); text-align: right; }
.macro-src { font-size: 9.5px; color: var(--txt-faint); text-align: right; }
.expo-row { display: grid; grid-template-columns: 150px 88px 1fr; gap: 10px; align-items: start; padding: 6px 0; border-bottom: 1px dashed var(--line-soft); font-size: 11.5px; }
.expo-row:last-child { border-bottom: 0; }
.expo-dir { font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; padding: 1px 6px; border-radius: 3px; text-align: center; }
.expo-dir.negative { background: rgba(239,83,80,.16); color: var(--down); }
.expo-dir.positive { background: rgba(38,166,154,.16); color: var(--up); }
.expo-dir.mixed { background: rgba(240,180,41,.16); color: var(--amber); }

/* Provenance notes: green when the data is real, dim for derivation detail. */
.note.ok { border-left-color: var(--green); color: var(--txt); }
.note.dim { color: var(--txt-faint); font-size: 10px; }

/* ==========================================================================
   Responsive pass
   ==========================================================================

   The desktop layout is three fixed columns inside a viewport-height flexbox.
   That shape does not compress: below roughly 1100px the right panel squeezes
   the table until neither is usable, and below 900px the 232px sidebar takes a
   third of the screen.

   So the two side panels stop being columns and become overlays, in two steps:

     <= 1180px   right panel -> bottom sheet, raised by the ◨ button
     <=  900px   sidebar     -> off-canvas drawer, raised by the ☰ button

   The table is never reflowed into cards. It is a research grid with up to 40
   numeric columns whose value is in comparing rows against each other, and a
   stack of cards destroys exactly that. It scrolls horizontally instead, with
   the company column pinned so a row stays identifiable while scrolling.
   -------------------------------------------------------------------------- */

.mobile-btn {
  display: none;
  background: var(--bg-3); color: var(--txt); border: 1px solid var(--line);
  border-radius: 7px; font-size: 15px; line-height: 1;
  padding: 8px 10px; cursor: pointer; flex-shrink: 0;
}
.mobile-btn:hover { background: var(--bg-2); }
.mobile-btn[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }

.mobile-scrim {
  display: none;
  position: fixed; inset: var(--topbar-h) 0 0 0;
  background: rgba(4,6,10,.6); z-index: 55;
  backdrop-filter: blur(1px);
}

/* Grab handle on the bottom sheet. */
.sheet-handle {
  display: none;
  width: 100%; border: 0; background: transparent; cursor: pointer;
  padding: 9px 0 5px;
}
.sheet-handle::before {
  content: ""; display: block; width: 38px; height: 4px; margin: 0 auto;
  border-radius: 999px; background: var(--line);
}

@media (max-width: 1180px) {
  .mobile-btn-right { display: block; }

  .rightpanel {
    position: fixed; left: 0; right: 0; bottom: 0;
    width: auto; max-height: 78vh;
    border-left: 0; border-top: 1px solid var(--line);
    border-radius: 14px 14px 0 0;
    z-index: 56;
    padding: 0 12px 16px;
    box-shadow: 0 -12px 34px rgba(0,0,0,.5);
    /* Off-screen by default. transform rather than display so the panel keeps
       its scroll position and the transition has something to animate. */
    transform: translateY(102%);
    transition: transform .22s ease;
    overscroll-behavior: contain;
  }
  .sheet-handle { display: block; position: sticky; top: 0; background: var(--bg-1); z-index: 1; }
  body.sheet-open .rightpanel { transform: translateY(0); }
  body.sheet-open .mobile-scrim { display: block; }

  /* Below this width the panel is a bottom sheet raised by the ◨ button in the
     toolbar, so the desktop collapse state and its edge toggle are both
     meaningless here — and `rp-collapsed` lingering from a wider viewport must
     not leave the sheet stuck shut. */
  body.rp-collapsed .rightpanel { display: block; }
  body.rp-collapsed .content { padding-right: 0; }
  .rp-toggle,
  .rp-edge-toggle { display: none; }
}

@media (max-width: 900px) {
  :root { --topbar-h: 52px; }

  .mobile-btn { display: block; }

  /* The topbar's three clusters cannot sit on one line at this width. Indices
     keep their own horizontal scroll and everything else shrinks around them. */
  .topbar { gap: 8px; padding: 0 10px; }
  .brand { min-width: 0; }
  .brand-sub { display: none; }
  .indices { order: 3; flex-basis: 100%; }
  .topbar-right { gap: 8px; }
  .market-status { min-width: 0; }
  .status-sub { display: none; }

  .sidebar {
    position: fixed; top: var(--topbar-h); bottom: 0; left: 0;
    width: min(300px, 86vw); z-index: 57;
    transform: translateX(-101%);
    transition: transform .2s ease;
    box-shadow: 6px 0 28px rgba(0,0,0,.45);
  }
  body.nav-open .sidebar { transform: translateX(0); }
  body.nav-open .mobile-scrim { display: block; }

  .content-head { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .legend { display: none; }

  /* Pin the company column so a horizontally-scrolled row stays identifiable. */
  .grid thead th:nth-child(2),
  .grid tbody td:nth-child(2) {
    position: sticky; left: 0; z-index: 9;
    background: var(--bg-2);
    box-shadow: 1px 0 0 var(--line);
  }
  .grid thead th:nth-child(2) { z-index: 11; }
  .table-wrap { -webkit-overflow-scrolling: touch; }

  /* The deep-dive is a right-hand drawer on desktop; full-bleed here. */
  .panel { width: 100vw; }
}

@media (max-width: 560px) {
  .topbar { --topbar-h: 50px; }
  .brand-name { font-size: 13px; }
  .grid { font-size: 11.5px; }
  .panel { padding-left: 12px; padding-right: 12px; }
}

/* Respect a user's reduced-motion preference: the panels still open, they just
   arrive rather than slide. */
@media (prefers-reduced-motion: reduce) {
  .sidebar, .rightpanel { transition: none; }
}

/* Report export controls. */
.export-bar {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin: 16px 0 4px; padding-top: 13px; border-top: 1px solid var(--line-soft);
}
.export-label { font-size: 11px; color: var(--txt-faint); text-transform: uppercase; letter-spacing: .6px; }
.export-bar .chip { text-decoration: none; }