/* ═══════════════════════════════════════════════════════════════
   SPY Monitor — shared stylesheet
   To add a page: put its CSS in a body.p-<name> { } block below.
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600;700&family=IBM+Plex+Sans:wght@400;600;700;800&display=swap');

/* ── Design tokens ── */
:root{
  --bg:#07090d;--surface:#0d1117;--surface2:#161b22;--border:#21262d;
  --muted:#8b949e;--text:#e6edf3;--bright:#ffffff;
  --green:#3fb950;--green-hi:#56d364;--red:#f85149;--red-hi:#ff7b72;
  --amber:#d29922;--blue:#58a6ff;--purple:#bc8cff;
  --mono:'IBM Plex Mono',monospace;--sans:'IBM Plex Sans',sans-serif;
}

/* ── Reset ── */
*{box-sizing:border-box;margin:0;padding:0;}

/* ── Base ── */
body{background:var(--bg);color:var(--text);font-family:var(--mono);font-size:12px;}
h1,h2,h3,h4{color:var(--bright);}
p,li,label{color:var(--text);}
td,th{color:var(--text);}
.ptitle,.panel-title,.log-title,.kpi-lbl,.sig-lbl,.pane-label{color:var(--muted);}

/* ── Utilities ── */
.ml{margin-left:auto;}
.up{color:var(--green-hi);}
.dn{color:var(--red-hi);}
.neu{color:var(--amber);}
#countdown{font-size:10px;color:var(--muted);}
@keyframes spin{to{transform:rotate(360deg);}}

/* ── Pills ── */
.pill{font-size:10px;padding:2px 7px;border-radius:3px;font-weight:600;}
.pill-blue{background:rgba(88,166,255,.15);color:var(--blue);}
.pill-time{background:rgba(255,255,255,.06);color:var(--muted);}
.pill-bias{font-size:11px;padding:3px 10px;border-radius:3px;font-weight:700;}
.pill-bull{background:rgba(46,168,74,.2);color:var(--green-hi);}
.pill-bear{background:rgba(217,59,59,.2);color:var(--red-hi);}
.pill-mixed{background:rgba(210,153,34,.2);color:var(--amber);}  /* MIXED = passive/inst disagree */

/* ── Navbar ── */
.navbar{display:flex;align-items:center;gap:8px;padding:0 0 12px;margin-bottom:14px;
  border-bottom:1px solid var(--border);flex-shrink:0;flex-wrap:wrap;}
/* .navbar-brand and .nb are the same thing; both defined so old HTML still works */
.navbar-brand,.nb{font-family:var(--sans);font-size:15px;font-weight:800;
  color:var(--bright);margin-right:4px;}
.navbar-sep,.sep{width:1px;height:14px;background:var(--border);margin:0 4px;}
.navbar-pills{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}

/* ── Nav links ── */
a.nlink{font-size:11px;font-weight:600;color:var(--muted);text-decoration:none;
  padding:4px 10px;border-radius:4px;border:1px solid var(--border);transition:all .15s;}
a.nlink:hover,a.nlink.active{color:var(--bright);border-color:var(--blue);background:rgba(88,166,255,.08);}
a.nlink.current{color:var(--blue);border-color:var(--blue);background:rgba(88,166,255,.1);}
button.nlink{background:transparent;font-family:var(--mono);font-size:11px;font-weight:600;
  color:var(--muted);padding:4px 10px;border-radius:4px;border:1px solid var(--border);
  cursor:pointer;transition:all .15s;}
button.nlink:hover{color:var(--bright);border-color:var(--blue);background:rgba(88,166,255,.08);}

/* ── Live dot ── */
.live{width:7px;height:7px;border-radius:50%;background:var(--muted);flex-shrink:0;}
.live.on{background:var(--green-hi);box-shadow:0 0 8px var(--green);}

/* ── Generic panel + no-data ── */
.panel{background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:14px;}
.ptitle{font-size:9px;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);margin-bottom:10px;}
.no-data{display:flex;align-items:center;justify-content:center;height:80px;color:var(--muted);font-size:11px;}

/* ── Loading spinner ── */
.loading{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:11px;padding:8px;}
.spinner{width:12px;height:12px;border:2px solid var(--border);
  border-top-color:var(--blue);border-radius:50%;animation:spin .7s linear infinite;}


/* ═══════════════════════════════════════════════════════════
   HOME  (index.html)
   ═══════════════════════════════════════════════════════════ */
body.p-home{
  font-family:var(--sans);min-height:100vh;
  display:flex;flex-direction:column;padding:16px 20px;
}
body.p-home .main{
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:24px 0;
}
body.p-home h1{font-size:28px;font-weight:800;letter-spacing:-.5px;margin-bottom:6px;}
body.p-home .subtitle{font-family:var(--mono);font-size:12px;color:var(--muted);
  margin-bottom:48px;letter-spacing:1px;text-transform:uppercase;}
body.p-home .cards{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;}
body.p-home .card{background:var(--surface);border:1px solid var(--border);border-radius:8px;
  padding:32px 36px;text-decoration:none;width:240px;display:flex;flex-direction:column;
  gap:12px;transition:border-color .2s,transform .2s;position:relative;overflow:hidden;}
body.p-home .card::before{content:'';position:absolute;top:0;left:0;right:0;
  height:2px;background:var(--accent);transition:height .2s;}
body.p-home .card:hover{border-color:var(--accent);transform:translateY(-3px);}
body.p-home .card:hover::before{height:3px;}
body.p-home .card-icon{font-size:28px;line-height:1;}
body.p-home .card-title{font-size:17px;font-weight:700;color:var(--bright);}
body.p-home .card-desc{font-family:var(--mono);font-size:11px;color:var(--muted);line-height:1.6;}
body.p-home .footer{margin-top:56px;font-family:var(--mono);font-size:10px;
  color:var(--muted);letter-spacing:.5px;}


/* ═══════════════════════════════════════════════════════════
   FLOW DASHBOARD  (dashboard.html)
   ═══════════════════════════════════════════════════════════ */
body.p-dashboard{min-height:100vh;padding:16px 20px;}

/* Signal strip */
body.p-dashboard .sig-strip{display:flex;gap:1px;background:var(--border);border-radius:6px;
  overflow:hidden;height:58px;margin-bottom:14px;}
body.p-dashboard .sig{flex:1;display:flex;flex-direction:column;justify-content:center;
  padding:0 14px;background:var(--surface);gap:2px;position:relative;}
body.p-dashboard .sig::before{content:'';position:absolute;top:0;left:0;right:0;
  height:2px;background:var(--ac,transparent);}
body.p-dashboard .sig-lbl{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);}
body.p-dashboard .sig-val{font-family:var(--sans);font-size:21px;font-weight:800;
  color:var(--bright);line-height:1;}
body.p-dashboard .sig-sub{font-size:9px;color:var(--muted);}

/* Grid */
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px;}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:12px;}
@media(max-width:820px){.row2,.row3{grid-template-columns:1fr;}}

/* ── Dashboard mobile (≤767px) ──────────────────────────────────────────────
   The signal strip is 6 boxes in a flex row — on a phone they crush to ~60px
   each and clip the labels/values. Switch to a 2-col wrapping grid so each box
   gets real width. The snapshot-log table has 7 columns and overflows phone
   width, so make its wrapper horizontally scrollable. */
@media(max-width:767px){
  body.p-dashboard{padding:12px;}
  body.p-dashboard .sig-strip{
    display:grid;
    grid-template-columns:1fr 1fr;   /* 2 per row */
    grid-auto-rows:56px;
    gap:1px;
    height:auto;                     /* let it grow to fit all rows */
  }
  body.p-dashboard .sig{padding:0 12px;}
  body.p-dashboard .sig-val{font-size:18px;}   /* slightly smaller so it never clips */
  /* Snapshot log: horizontal scroll instead of clipping off-screen */
  #log-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  #log-wrap .mini-table{min-width:560px;}      /* force its natural width, scroll past edge */
}

/* Premium bars */
.vs-row{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.vs-lbl{font-size:10px;color:var(--muted);width:52px;flex-shrink:0;}
.vs-track{flex:1;height:18px;background:var(--surface2);border-radius:3px;overflow:hidden;display:flex;}
.vs-c{height:100%;background:rgba(46,168,74,.5);transition:width .4s;}
.vs-p{height:100%;background:rgba(217,59,59,.5);transition:width .4s;}
.vs-arrow{font-size:11px;width:16px;flex-shrink:0;}

/* C/P gauge */
.gauge{display:flex;align-items:center;gap:8px;margin-top:10px;}
.gauge-track{flex:1;height:7px;background:var(--surface2);border-radius:4px;overflow:hidden;}
.gauge-fill{height:100%;border-radius:4px;transition:width .4s;}
.gauge-val{font-size:11px;font-weight:700;width:36px;text-align:right;}

/* Streak */
.streak{display:flex;align-items:center;gap:8px;padding:7px 10px;
  background:var(--surface2);border-radius:4px;margin-bottom:10px;}
.streak-dots{display:flex;gap:3px;}
.sdot{width:9px;height:9px;border-radius:50%;}
.streak-info{font-size:10px;color:var(--muted);}
.streak-info b{color:var(--bright);}

/* Confluence */
.conf-row{display:flex;align-items:center;gap:8px;padding:5px 8px;
  background:var(--surface2);border-radius:3px;margin-bottom:4px;border-left:2px solid var(--border);}
.conf-lbl{font-size:9px;color:var(--muted);width:65px;flex-shrink:0;text-transform:uppercase;}
.conf-val{font-size:10px;}

/* Sparkline */
.spark-wrap{height:76px;}
svg.spark{width:100%;height:100%;}

/* Mini table */
.mini-table{width:100%;border-collapse:collapse;font-size:10px;}
.mini-table th{color:var(--muted);font-weight:400;padding:3px 8px;
  border-bottom:1px solid var(--border);text-align:right;}
.mini-table th:first-child{text-align:left;}
.mini-table td{padding:5px 8px;border-bottom:1px solid #0f1520;text-align:right;}
.mini-table td:first-child{text-align:left;color:var(--muted);}
.mini-table tr:last-child td{border-bottom:none;}


/* ═══════════════════════════════════════════════════════════
   GEX HEATMAP  (gex_heatmap.html)
   ═══════════════════════════════════════════════════════════ */
body.p-heatmap{font-size:11px;min-height:100vh;padding:14px 16px;}

/* Legend */
.legend{display:flex;align-items:center;gap:16px;margin-bottom:10px;
  font-size:10px;color:var(--muted);flex-wrap:wrap;}
.grad-bar{width:72px;height:7px;border-radius:2px;
  background:linear-gradient(to right,#7b1c1c,#3a1a1a,#111520,#1a3a22,#1c7b2a);}
.outlier-swatch{width:12px;height:12px;border-radius:2px;
  background:rgba(155,114,255,0.35);border:1px solid var(--purple);}

/* Controls */
.controls{display:flex;gap:12px;margin-bottom:10px;align-items:center;flex-wrap:wrap;}
.controls label{color:var(--muted);font-size:10px;}
input[type=range]{accent-color:var(--blue);width:100px;}
select{background:var(--surface2);border:1px solid var(--border);color:var(--text);
  font-family:var(--mono);font-size:10px;padding:2px 6px;border-radius:3px;}

/* KPI chips */
.kpi-strip{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap;}
.kpi-chip{background:var(--surface2);border:1px solid var(--border);border-radius:4px;
  padding:6px 12px;display:flex;flex-direction:column;gap:2px;}
.kpi-chip-lbl{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;}
.kpi-chip-val{font-family:var(--sans);font-size:14px;font-weight:700;color:var(--bright);}
.kpi-chip-delta{font-size:9px;}

/* Heatmap table */
.hm-wrap{border:1px solid var(--border);border-radius:6px;overflow:hidden;width:100%;}
table.hm{border-collapse:collapse;width:100%;table-layout:fixed;}
@media(max-width:767px){
  .hm-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:4px;}
  table.hm{min-width:700px;table-layout:auto;}
  .ci{font-size:11px;padding:0 5px;}
  .legend{flex-wrap:wrap;gap:6px;font-size:10px;}
  .controls{flex-wrap:wrap;gap:6px;}
}
table.hm thead tr.gr th{padding:6px 0;text-align:center;font-size:10px;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;border-bottom:1px solid var(--border);
  background:var(--surface);}
table.hm thead tr.sr th{padding:5px 4px;font-size:10px;font-weight:400;color:var(--muted);
  text-align:right;background:var(--surface);border-bottom:2px solid var(--border);
  white-space:nowrap;overflow:hidden;}
table.hm thead tr.sr th.sh{text-align:center;color:var(--muted);}
table.hm thead tr.sr th.gxh{color:var(--text);}
table.hm thead tr.sr th.dxh{color:var(--muted);font-style:italic;}
table.hm tbody tr:hover{background:rgba(255,255,255,.025)!important;}
table.hm tbody tr.spot-row{outline:1.5px solid var(--blue);outline-offset:-1px;}
table.hm td{padding:0;border-bottom:1px solid #0f1520;height:32px;
  vertical-align:middle;overflow:hidden;}
.ci{padding:0 6px;height:100%;display:flex;align-items:center;
  justify-content:flex-end;font-size:12px;white-space:nowrap;}
td.sk .ci{justify-content:center;font-size:13px;font-weight:700;color:var(--bright);
  background:var(--surface2);border-right:2px solid var(--border);}
td.sk.sp .ci{color:var(--blue);background:rgba(74,158,255,.08);}
td.gx .ci{font-weight:600;}
td.dx .ci{font-size:11px;color:var(--muted);border-left:1px solid #131b28;}
td.dx.du .ci{color:var(--green-hi);}
td.dx.dd .ci{color:var(--red-hi);}
td.ge-end{border-right:1px solid var(--border);}
td.outlier .ci{outline:1px solid var(--purple);outline-offset:-2px;
  background:rgba(155,114,255,0.12)!important;}
body.p-heatmap .no-data{display:flex;flex-direction:column;align-items:center;
  justify-content:center;height:260px;gap:8px;font-size:12px;text-align:center;line-height:1.8;}
body.p-heatmap .no-data code{background:var(--surface2);border:1px solid var(--border);
  padding:2px 8px;border-radius:3px;color:var(--text);}


/* ═══════════════════════════════════════════════════════════
   CHART  (chart.html)
   ═══════════════════════════════════════════════════════════ */
body.p-chart{display:flex;flex-direction:column;padding:12px 14px;gap:8px;}
body.p-chart,html:has(body.p-chart){height:100%;overflow:hidden;}
@media(max-width:767px){
  html:has(body.p-chart),body.p-chart{height:auto!important;overflow:visible!important;overflow-y:auto!important;}
}

/* Price row */
.price-row{display:flex;align-items:center;gap:14px;flex-shrink:0;flex-wrap:wrap;}
.price-big{font-family:var(--sans);font-size:30px;font-weight:800;color:var(--bright);
  line-height:1;transition:color .3s;}
.price-chg{font-size:13px;font-weight:600;color:var(--text);}
.price-lbl{font-size:10px;color:var(--muted);}

/* Toggles */
.toggles{display:flex;gap:5px;flex-wrap:wrap;align-items:center;margin-left:auto;}
.tog{display:flex;align-items:center;padding:3px 8px;border-radius:3px;
  border:1px solid var(--border);cursor:pointer;font-size:10px;font-weight:600;
  transition:all .15s;user-select:none;color:var(--muted);}
.tog.on{border-color:currentColor;}
.tog:hover{opacity:0.85;}
.tog-sep{width:1px;height:14px;background:var(--border);margin:0 2px;}
.tog-label{font-size:10px;color:var(--muted);}

/* Layout */
.main-body{flex:1;min-height:0;display:flex;gap:10px;}
.charts-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:0;}
#price-chart{flex:1;min-height:0;position:relative;}
.bottom-panes{display:flex;flex-direction:row;flex-shrink:0;
  height:160px;border-top:1px solid var(--border);}
#macd-wrap{flex:1;min-width:0;position:relative;border-right:1px solid var(--border);}
.right-panes{flex:1;min-width:0;display:flex;flex-direction:column;}
#vol-wrap{flex:1;min-height:0;position:relative;border-bottom:1px solid var(--border);}
#mfi-wrap{flex:1;min-height:0;position:relative;}
.pane-label{position:absolute;left:6px;top:3px;font-size:9px;font-weight:600;
  letter-spacing:1px;text-transform:uppercase;color:var(--muted);pointer-events:none;z-index:5;}

/* Signal sidebar */
.signal-sidebar{width:350px;flex-shrink:0;background:var(--surface);
  border:1px solid var(--border);border-radius:6px;
  display:flex;flex-direction:column;overflow:hidden;position:relative;}
#sidebar-handle{position:absolute;left:0;top:0;bottom:0;width:5px;
  cursor:col-resize;z-index:10;background:transparent;transition:background .15s;}
#sidebar-handle:hover{background:rgba(88,166,255,.18);}
#sidebar-handle::after{content:'';position:absolute;left:2px;top:50%;
  transform:translateY(-50%);width:1px;height:32px;
  background:var(--border);border-radius:1px;}
body.p-chart .sig-header{padding:10px 12px;border-bottom:1px solid var(--border);
  background:var(--surface2);}
.sig-badge{font-family:var(--sans);font-size:15px;font-weight:800;padding:3px 10px;
  border-radius:4px;display:inline-block;margin-bottom:4px;}
.sig-bull{background:rgba(63,185,80,.2);color:var(--green-hi);}
.sig-bear{background:rgba(248,81,73,.2);color:var(--red-hi);}
.sig-neu{background:rgba(210,153,34,.15);color:var(--amber);}
.sig-conf{font-size:11px;color:var(--muted);}
.sig-bar-wrap{height:4px;background:var(--border);border-radius:2px;margin-top:6px;overflow:hidden;}
.sig-bar-fill{height:100%;border-radius:2px;transition:width .4s;}
body.p-chart .sig-body{flex:1;overflow-y:auto;padding:10px 12px;}
.sig-section{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;
  color:var(--muted);margin:8px 0 4px;padding-bottom:3px;border-bottom:1px solid var(--border);}
body.p-chart .sig-row{display:flex;justify-content:space-between;
  align-items:flex-start;margin-bottom:5px;gap:6px;}
body.p-chart .sig-lbl{font-size:10px;color:var(--muted);flex-shrink:0;}
body.p-chart .sig-val{font-size:10px;font-weight:600;text-align:right;line-height:1.3;}
.sv-bull{color:var(--green-hi);}
.sv-bear{color:var(--red-hi);}
.sv-neu{color:var(--amber);}

/* Tooltip */
#tooltip{position:absolute;top:8px;left:8px;background:rgba(13,17,23,0.95);
  border:1px solid var(--border);border-radius:5px;padding:10px 14px;
  pointer-events:none;display:none;z-index:20;min-width:190px;}
.tt-time{font-size:10px;color:var(--muted);margin-bottom:4px;}
.tt-price{font-family:var(--sans);font-size:17px;font-weight:700;
  color:var(--bright);margin-bottom:5px;}
.tt-row{font-size:10px;margin-bottom:2px;color:var(--text);}
.tt-marker{font-size:11px;margin-top:4px;padding-top:4px;border-top:1px solid var(--border);}
.tt-marker.call{color:var(--green-hi);}
.tt-marker.put{color:var(--red-hi);}

/* GEX log */
.log-panel{flex-shrink:0;background:var(--surface);border:1px solid var(--border);
  border-radius:5px;padding:8px 12px;max-height:120px;overflow-y:auto;}
.log-title{font-size:9px;text-transform:uppercase;letter-spacing:1.5px;
  color:var(--muted);margin-bottom:6px;}
table.log{width:100%;border-collapse:collapse;font-size:10px;}
table.log th{color:var(--muted);font-weight:400;padding:2px 8px;
  border-bottom:1px solid var(--border);}
table.log th:not(:first-child){text-align:right;}
table.log td{padding:4px 8px;border-bottom:1px solid var(--border);color:var(--text);}
table.log td:not(:first-child){text-align:right;}
table.log tr:last-child td{border-bottom:none;}
.m-c{color:var(--muted);}

/* Mobile */
@media(max-width:767px){
  body.p-chart{padding:0;overflow-x:hidden;}
  #price-chart canvas,#macd-chart canvas,#vol-chart canvas,#mfi-chart canvas{touch-action:pan-y!important;}
  .toggles{gap:4px;padding:4px 6px;flex-wrap:wrap;}
  .tog{font-size:9px;padding:2px 5px;}
  .tog-label{font-size:9px;}
  .main-body{flex-direction:column;gap:0;overflow-y:visible;height:auto;min-height:0;}
  body.p-chart{overflow-y:auto!important;height:auto!important;}
  .signal-sidebar{flex:none;max-height:280px;}
  .charts-col{width:100%;}
  #price-chart{height:340px!important;flex:none;}
  .bottom-panes{flex-direction:column;height:auto;border-top:1px solid var(--border);}
  #macd-wrap{width:100%;height:110px;border-right:none;border-bottom:1px solid var(--border);}
  .right-panes{flex-direction:column;width:100%;}
  #vol-wrap{width:100%;height:90px;border-bottom:1px solid var(--border);}
  #mfi-wrap{width:100%;height:90px;}
  .signal-sidebar{width:100%;border-radius:0;border-left:none;border-right:none;
    border-top:1px solid var(--border);max-height:280px;}
  #tooltip{font-size:10px;padding:4px 6px;}
  .tt-price{font-size:13px;}
  .log-panel{padding:6px 8px;}
  .log-panel table{font-size:9px;}
}


/* ═══════════════════════════════════════════════════════════
   MAGNETS  (magnets.html)
   ═══════════════════════════════════════════════════════════ */
body.p-magnets{min-height:100vh;padding:14px 18px;display:flex;flex-direction:column;gap:12px;}

/* Tab bar */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);flex-shrink:0;}
.tab{font-size:11px;font-weight:600;padding:7px 16px;cursor:pointer;
  color:var(--muted);border-bottom:2px solid transparent;transition:all .15s;}
.tab:hover{color:var(--text);}
.tab.active{color:var(--bright);border-bottom-color:var(--blue);}
.tab-panel{display:none;flex-direction:column;gap:12px;}
.tab-panel.active{display:flex;}

/* Context strip */
.ctx{display:flex;gap:8px;flex-wrap:wrap;}
.ctx-chip{background:var(--surface);border:1px solid var(--border);border-radius:4px;
  padding:6px 12px;display:flex;flex-direction:column;gap:2px;
  position:relative;overflow:hidden;flex:1;min-width:90px;}
.ctx-chip::before{content:'';position:absolute;top:0;left:0;right:0;
  height:2px;background:var(--ac,transparent);}
.ctx-lbl{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);}
.ctx-val{font-family:var(--sans);font-size:16px;font-weight:800;color:var(--bright);}
.ctx-sub{font-size:9px;color:var(--muted);}

/* Scenario columns */
.scenario-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}
@media(max-width:800px){.scenario-grid{grid-template-columns:1fr;}}
.scenario-col{display:flex;flex-direction:column;gap:8px;}
.scenario-header{padding:10px 14px;border-radius:5px 5px 0 0;
  border:1px solid var(--border);border-bottom:none;}
.sh-bear{background:rgba(248,81,73,.08);border-color:rgba(248,81,73,.3);}
.sh-bull{background:rgba(63,185,80,.08);border-color:rgba(63,185,80,.3);}
.sh-neu{background:rgba(88,166,255,.05);border-color:rgba(88,166,255,.2);}
.scenario-title{font-family:var(--sans);font-size:13px;font-weight:700;margin-bottom:2px;}
.st-bear{color:var(--red-hi);}
.st-bull{color:var(--green-hi);}
.st-neu{color:var(--blue);}
.scenario-sub{font-size:10px;color:var(--muted);}
.conv-row{display:flex;align-items:center;gap:8px;margin-top:8px;}
.conv-track{flex:1;height:5px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden;}
.conv-fill{height:100%;border-radius:3px;transition:width .5s;}
.conv-pct{font-size:11px;font-weight:700;width:36px;text-align:right;}

/* Strike boxes */
.strike-box{background:var(--surface);border:1px solid var(--border);border-radius:0;
  padding:10px 14px;border-top:none;}
.strike-box:last-child{border-radius:0 0 5px 5px;}
.sb-top{display:flex;align-items:center;gap:8px;margin-bottom:5px;}
.sb-strike{font-family:var(--sans);font-size:17px;font-weight:800;color:var(--bright);}
.sb-spot{font-size:10px;color:var(--muted);}
.sb-type{font-size:9px;font-weight:700;padding:1px 6px;border-radius:3px;}
.sbt-target{background:rgba(88,166,255,.15);color:var(--blue);}
.sbt-floor{background:rgba(63,185,80,.15);color:var(--green-hi);}
.sbt-ceiling{background:rgba(248,81,73,.15);color:var(--red-hi);}
.sbt-pin{background:rgba(188,140,255,.15);color:var(--purple);}
.sb-gex{display:flex;align-items:center;gap:6px;margin-bottom:4px;}
.sb-gex-val{font-size:11px;font-weight:700;}
.sb-delta{font-size:10px;font-weight:600;padding:1px 5px;border-radius:2px;}
.delta-build{background:rgba(248,81,73,.12);color:var(--red-hi);}
.delta-unwind{background:rgba(63,185,80,.12);color:var(--green-hi);}
.delta-stable{background:rgba(255,255,255,.05);color:var(--muted);}
.delta-build-bull{background:rgba(63,185,80,.12);color:var(--green-hi);}
.sb-momentum{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--muted);}
.mom-dot{width:6px;height:6px;border-radius:50%;}
.mom-building{background:var(--red-hi);}
.mom-building-bull{background:var(--green-hi);}
.mom-unwinding{background:var(--amber);}
.mom-stable{background:var(--muted);}
.strike-empty{background:var(--surface);border:1px solid var(--border);border-radius:0 0 5px 5px;
  border-top:none;padding:16px 14px;text-align:center;font-size:10px;color:var(--muted);}

/* Signal accordion */
.sig-accordion{display:flex;flex-direction:column;gap:8px;}
.sig-card{background:var(--surface);border:1px solid var(--border);border-radius:6px;
  overflow:hidden;transition:box-shadow .2s;}
.sig-card:hover{box-shadow:0 0 0 1px var(--border);}
.sig-card.sig-bear{border-left:3px solid var(--red);}
.sig-card.sig-bull{border-left:3px solid var(--green);}
.sig-card.sig-neu{border-left:3px solid var(--blue);}
.sig-card.sig-resolved{opacity:.55;}
.sig-header-row{display:flex;align-items:center;gap:12px;padding:10px 14px;
  cursor:pointer;user-select:none;transition:background .15s;}
.sig-header-row:hover{background:rgba(255,255,255,.02);}
.sig-chevron{font-size:10px;color:var(--muted);transition:transform .2s;flex-shrink:0;}
.sig-card.open .sig-chevron{transform:rotate(90deg);}
.sig-scenario-lbl{font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.5px;width:64px;flex-shrink:0;}
.sl-bear{color:var(--red-hi);}
.sl-bull{color:var(--green-hi);}
.sl-neu{color:var(--blue);}
.sig-target-lbl{font-family:var(--sans);font-size:16px;font-weight:800;
  color:var(--bright);width:56px;flex-shrink:0;}
.sig-conv-col{display:flex;flex-direction:column;gap:3px;width:110px;flex-shrink:0;}
.sig-conv-bar{height:4px;background:var(--border);border-radius:2px;overflow:hidden;}
.sig-conv-fill{height:100%;border-radius:2px;transition:width .4s;}
.sig-conv-pct{font-size:10px;font-weight:600;}
.sig-status-badge{font-size:9px;font-weight:700;padding:2px 7px;border-radius:3px;flex-shrink:0;}
.ss-active{background:rgba(88,166,255,.15);color:var(--blue);}
.ss-strengthening{background:rgba(63,185,80,.15);color:var(--green-hi);}
.ss-weakening{background:rgba(210,153,34,.15);color:var(--amber);}
.ss-hit{background:rgba(63,185,80,.2);color:var(--green-hi);}
.ss-collapsed{background:rgba(255,255,255,.05);color:var(--muted);}
.ss-expired{background:rgba(210,153,34,.15);color:var(--amber);}  /* aged out, thesis intact */
.sig-summary{font-size:10px;color:var(--muted);flex:1;line-height:1.4;}
.sig-time-lbl{font-size:10px;color:var(--muted);flex-shrink:0;text-align:right;}
body.p-magnets .sig-body{display:none;border-top:1px solid var(--border);
  padding:14px;background:var(--surface2);}
.sig-card.open .sig-body{display:block;}
.sig-body-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:700px){.sig-body-grid{grid-template-columns:1fr;}}

/* Factor rows */
.factor-section{font-size:9px;text-transform:uppercase;letter-spacing:1.2px;
  color:var(--muted);margin-bottom:8px;padding-bottom:4px;border-bottom:1px solid var(--border);}
.factor-row{display:flex;align-items:flex-start;gap:8px;margin-bottom:7px;}
.factor-icon{font-size:11px;width:16px;flex-shrink:0;margin-top:1px;}
.factor-content{flex:1;}
.factor-name{font-size:10px;font-weight:600;color:var(--text);margin-bottom:1px;}
.factor-value{font-size:11px;font-weight:700;font-family:var(--sans);}
.fv-bear{color:var(--red-hi);}
.fv-bull{color:var(--green-hi);}
.fv-neu{color:var(--amber);}
.factor-note{font-size:10px;color:var(--muted);margin-top:1px;line-height:1.4;}

/* History timeline */
.history-title{font-size:9px;text-transform:uppercase;letter-spacing:1.2px;
  color:var(--muted);margin:10px 0 6px;padding-top:10px;border-top:1px solid var(--border);}
.history-items{display:flex;flex-direction:column;gap:4px;}
.history-item{display:flex;align-items:center;gap:8px;font-size:10px;}
.hi-time{color:var(--muted);width:42px;flex-shrink:0;}
.hi-bar{flex:1;height:3px;background:var(--border);border-radius:2px;overflow:hidden;}
.hi-fill{height:100%;border-radius:2px;}
.hi-pct{font-size:10px;font-weight:600;width:32px;text-align:right;flex-shrink:0;}

/* GEX context box */
.gex-context{background:var(--surface);border:1px solid var(--border);border-radius:4px;padding:10px 12px;}
.gex-ctx-title{font-size:9px;text-transform:uppercase;letter-spacing:1.2px;
  color:var(--muted);margin-bottom:8px;}
.gex-ctx-row{display:flex;justify-content:space-between;align-items:baseline;
  font-size:10px;margin-bottom:4px;}
.gex-ctx-lbl{color:var(--muted);}
.gex-ctx-val{font-weight:600;color:var(--text);}

/* Log tab */
.log-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.log-filter{font-size:10px;padding:3px 8px;border-radius:3px;border:1px solid var(--border);
  background:var(--surface2);color:var(--text);font-family:var(--mono);cursor:pointer;}
.log-filter.on{border-color:var(--blue);color:var(--blue);}
button.export-btn{background:transparent;border:1px solid var(--border);color:var(--muted);
  font-family:var(--mono);font-size:10px;padding:3px 10px;border-radius:3px;cursor:pointer;}
button.export-btn:hover{border-color:var(--green);color:var(--green-hi);}
.log-table{width:100%;border-collapse:collapse;font-size:10px;}
.log-table th{color:var(--muted);font-weight:400;padding:4px 10px;
  border-bottom:1px solid var(--border);text-align:left;white-space:nowrap;}
.log-table td{padding:5px 10px;border-bottom:1px solid var(--border);vertical-align:top;}
.log-table tr:last-child td{border-bottom:none;}
.log-table tr:hover{background:rgba(255,255,255,.02);}
.log-type{font-size:9px;font-weight:700;padding:1px 6px;border-radius:2px;}
.lt-mag{background:rgba(188,140,255,.15);color:var(--purple);}
.lt-sig{background:rgba(88,166,255,.15);color:var(--blue);}
.lt-role{background:rgba(88,166,255,.15);color:var(--blue);}
.lt-res{background:rgba(63,185,80,.15);color:var(--green-hi);}
.lt-col{background:rgba(248,81,73,.15);color:var(--red-hi);}
.lt-upd{background:rgba(255,255,255,.05);color:var(--muted);}
.no-log{display:flex;align-items:center;justify-content:center;
  height:80px;color:var(--muted);font-size:11px;}


/* ═══════════════════════════════════════════════════════════
   ACCURACY  (accuracy.html)
   ═══════════════════════════════════════════════════════════ */
body.p-accuracy{min-height:100vh;padding:14px 18px;display:flex;flex-direction:column;gap:12px;}

.explainer{background:var(--surface);border:1px solid var(--border);
  border-left:3px solid var(--purple);border-radius:4px;
  padding:10px 16px;font-size:11px;color:var(--text);line-height:1.7;}
.explainer b{color:var(--bright);}

select.date-sel{font-size:11px;background:var(--surface2);border:1px solid var(--border);
  color:var(--text);padding:4px 10px;border-radius:4px;font-family:var(--mono);}
button.exp-btn{background:transparent;border:1px solid var(--border);color:var(--muted);
  font-family:var(--mono);font-size:11px;padding:4px 10px;border-radius:4px;
  cursor:pointer;transition:all .15s;}
button.exp-btn:hover{border-color:var(--green);color:var(--green-hi);}

/* KPI strip */
body.p-accuracy .kpi-strip{display:flex;gap:10px;flex-wrap:wrap;flex-shrink:0;}
body.p-accuracy .kpi{background:var(--surface);border:1px solid var(--border);border-radius:5px;
  padding:10px 14px;flex:1;min-width:100px;position:relative;overflow:hidden;}
body.p-accuracy .kpi::before{content:'';position:absolute;top:0;left:0;right:0;
  height:2px;background:var(--ac,var(--border));}
body.p-accuracy .kpi-lbl{font-size:9px;text-transform:uppercase;letter-spacing:1px;
  color:var(--muted);margin-bottom:3px;}
body.p-accuracy .kpi-val{font-family:var(--sans);font-size:20px;font-weight:800;color:var(--bright);}
body.p-accuracy .kpi-sub{font-size:10px;color:var(--muted);margin-top:2px;}
.rate-bar{height:4px;background:var(--border);border-radius:2px;overflow:hidden;margin-top:5px;}
.rate-fill{height:100%;border-radius:2px;transition:width .5s;}

/* Scenario stats */
.scenario-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}
@media(max-width:700px){.scenario-stats{grid-template-columns:1fr;}}
.sc-card{background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:14px;}
.sc-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;}
.sc-name{font-family:var(--sans);font-size:13px;font-weight:700;}
.sc-rate{font-family:var(--sans);font-size:22px;font-weight:800;}
.sc-bar{height:5px;background:var(--border);border-radius:3px;overflow:hidden;margin-bottom:10px;}
.sc-bar-fill{height:100%;border-radius:3px;transition:width .5s;}

/* Conviction breakdown */
.conv-breakdown{display:flex;flex-direction:column;gap:4px;}
.cb-row{display:flex;align-items:center;gap:6px;font-size:10px;}
.cb-label{color:var(--muted);width:68px;flex-shrink:0;}
.cb-track{flex:1;height:4px;background:var(--border);border-radius:2px;overflow:hidden;}
.cb-fill{height:100%;border-radius:2px;}
.cb-val{font-size:10px;font-weight:600;width:44px;text-align:right;flex-shrink:0;}

/* TF window cards */
.tf-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
@media(max-width:700px){.tf-grid{grid-template-columns:1fr 1fr;}}
.tf-card{background:var(--surface);border:1px solid var(--border);border-radius:5px;padding:11px;}
.tf-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px;}
.tf-name{font-size:10px;font-weight:700;color:var(--text);}
.tf-rate{font-family:var(--sans);font-size:16px;font-weight:800;}
.tf-bar{height:4px;background:var(--border);border-radius:2px;overflow:hidden;margin-bottom:4px;}
.tf-bar-fill{height:100%;border-radius:2px;}
.tf-sub{font-size:9px;color:var(--muted);}
.tf-dir{font-size:9px;margin-top:4px;}

/* Momentum cards */
.mom-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.mom-card{background:var(--surface);border:1px solid var(--border);border-radius:5px;padding:11px;}
.mom-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px;}
.mom-name{font-size:10px;font-weight:700;}
.mom-rate{font-family:var(--sans);font-size:16px;font-weight:800;}
.mom-bar{height:4px;background:var(--border);border-radius:2px;overflow:hidden;margin-bottom:4px;}
.mom-bar-fill{height:100%;border-radius:2px;}
.mom-sub{font-size:9px;color:var(--muted);}

.section-lbl{font-size:9px;text-transform:uppercase;letter-spacing:1.5px;
  color:var(--muted);padding-bottom:6px;border-bottom:1px solid var(--border);}

/* Detail table */
table.acc{width:100%;border-collapse:collapse;font-size:10px;}
table.acc th{color:var(--muted);font-weight:400;padding:4px 8px;
  border-bottom:1px solid var(--border);text-align:left;white-space:nowrap;}
table.acc td{padding:6px 8px;border-bottom:1px solid var(--border);vertical-align:top;}
table.acc tr:last-child td{border-bottom:none;}
table.acc tr:hover{background:rgba(255,255,255,.02);}

.tf-chips{display:flex;gap:4px;flex-wrap:wrap;}
.tf-chip{font-size:9px;font-weight:700;padding:1px 5px;border-radius:2px;white-space:nowrap;}
.tc-hit{background:rgba(63,185,80,.15);color:var(--green-hi);}
.tc-miss{background:rgba(248,81,73,.15);color:var(--red-hi);}
.tc-pend{background:rgba(255,255,255,.05);color:var(--muted);}

.hb{display:inline-block;padding:2px 7px;border-radius:3px;font-size:9px;font-weight:700;}
.hb-hit{background:rgba(63,185,80,.2);color:var(--green-hi);}
.hb-miss{background:rgba(248,81,73,.2);color:var(--red-hi);}
.hb-pend{background:rgba(255,255,255,.05);color:var(--muted);}
.hb-expired{background:rgba(210,153,34,.18);color:var(--amber);}  /* aged out, thesis intact, excluded from rate */

.sc-badge{font-size:9px;font-weight:700;padding:1px 6px;border-radius:3px;}
.sb-bear{background:rgba(248,81,73,.15);color:var(--red-hi);}
.sb-bull{background:rgba(63,185,80,.15);color:var(--green-hi);}
.sb-neu{background:rgba(88,166,255,.15);color:var(--blue);}

.mom-badge{font-size:9px;padding:1px 5px;border-radius:2px;}
.mb-build{background:rgba(248,81,73,.1);color:var(--red-hi);}
.mb-unwind{background:rgba(210,153,34,.1);color:var(--amber);}
.mb-stable{background:rgba(255,255,255,.05);color:var(--muted);}

body.p-accuracy .no-data{display:flex;align-items:center;justify-content:center;
  height:80px;color:var(--muted);font-size:11px;flex-direction:column;gap:5px;}
body.p-accuracy .no-data code{background:var(--surface2);padding:2px 8px;
  border-radius:3px;color:var(--text);}

/* ── Accuracy mobile (≤767px) ───────────────────────────────────────────────
   The signal-detail table has many columns (scenario, conv%, momentum, entry,
   four window chips, dir) and overflows phone width — it was clipping on both
   edges. Wrap it in horizontal scroll. Also tighten page padding and let the
   3-col momentum grid wrap so it doesn't squeeze. */
@media(max-width:767px){
  body.p-accuracy{padding:12px;}
  #table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  #table-wrap table.acc{min-width:640px;}   /* natural width, scroll past edge */
  .mom-grid{grid-template-columns:1fr;}      /* stack momentum cards */
}


/* ═══════════════════════════════════════════════════════════
   GUIDE  (guide.html)
   ═══════════════════════════════════════════════════════════ */
body.p-guide{font-family:var(--sans);font-size:14px;line-height:1.7;
  min-height:100vh;overflow-y:scroll;}
body.p-guide .shell{display:block;}

nav.sidebar{width:240px;background:var(--surface);border-right:1px solid var(--border);
  padding:20px 0 32px;position:fixed;top:0;left:0;height:100vh;
  overflow-y:auto;z-index:200;transform:translateX(0);
  transition:transform .28s cubic-bezier(.4,0,.2,1);}
nav.sidebar.collapsed{transform:translateX(-240px);}

.sidebar-toggle{position:fixed;top:50%;left:240px;transform:translateY(-50%);z-index:300;
  background:var(--surface);border:1px solid var(--border);border-left:none;
  border-radius:0 6px 6px 0;padding:14px 6px;cursor:pointer;color:var(--muted);
  font-size:13px;line-height:1;
  transition:left .28s cubic-bezier(.4,0,.2,1),color .15s,background .15s;
  user-select:none;writing-mode:horizontal-tb;}
.sidebar-toggle:hover{color:var(--bright);background:var(--surface2);}
.sidebar-toggle.collapsed{left:0;border-left:1px solid var(--border);
  border-right:none;border-radius:6px 0 0 6px;}

.sidebar-overlay{display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.55);z-index:150;}
.sidebar-overlay.visible{display:block;}

.content{max-width:900px;padding:32px 40px 64px;margin-left:240px;
  overflow-x:hidden;transition:margin-left .28s cubic-bezier(.4,0,.2,1);}
.content.collapsed{margin-left:0;}

.topbar{margin-left:240px;transition:margin-left .28s cubic-bezier(.4,0,.2,1);}
.topbar.collapsed{margin-left:0;}

@media(max-width:767px){
  nav.sidebar{transform:translateX(-240px);}
  nav.sidebar.mobile-open{transform:translateX(0);}
  .sidebar-toggle{left:0;border-left:1px solid var(--border);
    border-right:none;border-radius:6px 0 0 6px;}
  nav.sidebar.mobile-open~* .sidebar-toggle,
  .sidebar-toggle.mobile-open{left:240px;border-left:none;
    border-right:1px solid var(--border);border-radius:0 6px 6px 0;}
  .content{margin-left:0;padding:16px 16px 64px;}
  .topbar{margin-left:0;}
  .sidebar-overlay{display:block;}
  .sidebar-overlay:not(.visible){display:none;}
}

.sidebar-logo{font-family:var(--sans);font-size:14px;font-weight:800;
  color:var(--bright);padding:0 20px 16px;
  border-bottom:1px solid var(--border);margin-bottom:12px;}
.sidebar-logo span{color:var(--blue);}
.nav-section{font-size:9px;text-transform:uppercase;letter-spacing:1.5px;
  color:var(--muted);padding:8px 20px 4px;}
.nav-link{display:block;padding:6px 20px;font-size:12px;font-weight:600;
  color:var(--muted);text-decoration:none;border-left:2px solid transparent;
  transition:all .15s;cursor:pointer;}
.nav-link:hover{color:var(--text);background:rgba(255,255,255,.03);}
.nav-link.active{color:var(--blue);border-left-color:var(--blue);background:rgba(74,158,255,.06);}
.nav-sep{height:1px;background:var(--border);margin:10px 0;}
.nav-app{display:block;padding:5px 20px;font-size:11px;color:var(--text);
  text-decoration:none;transition:color .15s;}
.nav-app:hover{color:var(--blue);}

.page-title{font-size:26px;font-weight:800;color:var(--bright);margin-bottom:6px;}
.page-sub{font-size:14px;color:var(--muted);margin-bottom:32px;
  border-bottom:1px solid var(--border);padding-bottom:20px;}

body.p-guide h2{font-size:18px;font-weight:700;color:var(--bright);margin:36px 0 12px;
  padding-bottom:8px;border-bottom:1px solid var(--border);scroll-margin-top:24px;}
body.p-guide h3{font-size:14px;font-weight:700;color:var(--text);margin:22px 0 8px;}
body.p-guide h4{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;
  letter-spacing:1px;margin:18px 0 6px;}
body.p-guide p{margin-bottom:12px;color:var(--text);}
body.p-guide p:last-child{margin-bottom:0;}
/* Small inline call-out used for "by the way" footnotes inside the guide */
body.p-guide p.note{font-size:12px;color:var(--muted);padding:8px 12px;
  border-left:2px solid var(--border);background:rgba(255,255,255,0.02);
  border-radius:0 3px 3px 0;line-height:1.55;}
body.p-guide p.note strong{color:var(--text);}

/* Topbar (sticky bar inside guide content) */
.topbar-inner{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:10px 24px;border-bottom:1px solid var(--border);
  background:var(--surface);position:sticky;top:0;z-index:10;}
.topbar-title{font-size:13px;font-weight:700;color:var(--muted);}
a.topnav,body.p-guide a.nlink{font-size:11px;font-weight:600;color:var(--muted);
  text-decoration:none;border:1px solid var(--border);padding:4px 10px;
  border-radius:4px;transition:all .15s;}
a.topnav:hover,body.p-guide a.nlink:hover{color:var(--bright);border-color:var(--blue);
  background:rgba(88,166,255,.08);}
body.p-guide a.nlink.current{color:var(--blue);border-color:var(--blue);
  background:rgba(88,166,255,.1);}

/* Callouts */
.box{border-radius:5px;padding:14px 16px;margin:16px 0;font-size:13px;}
.box-blue{background:rgba(74,158,255,.08);border:1px solid rgba(74,158,255,.25);border-left:3px solid var(--blue);}
.box-green{background:rgba(46,168,74,.08);border:1px solid rgba(46,168,74,.25);border-left:3px solid var(--green);}
.box-red{background:rgba(217,59,59,.08);border:1px solid rgba(217,59,59,.25);border-left:3px solid var(--red);}
.box-amber{background:rgba(201,146,26,.08);border:1px solid rgba(201,146,26,.25);border-left:3px solid var(--amber);}
.box-purple{background:rgba(155,114,255,.08);border:1px solid rgba(155,114,255,.25);border-left:3px solid var(--purple);}
.box b{color:var(--bright);}

code{font-family:var(--mono);font-size:11px;background:var(--surface2);
  padding:1px 6px;border-radius:3px;color:var(--blue);}

table.guide{width:100%;border-collapse:collapse;margin:14px 0;font-size:12px;}
table.guide th{text-align:left;color:var(--muted);font-weight:600;font-size:11px;
  padding:6px 12px;border-bottom:1px solid var(--border);background:var(--surface);}
table.guide td{padding:8px 12px;border-bottom:1px solid #0c1018;vertical-align:top;}
table.guide tr:last-child td{border-bottom:none;}
table.guide tr:hover{background:rgba(255,255,255,.015);}
.td-name{font-weight:700;color:var(--bright);white-space:nowrap;}
.td-color{width:10px;border-radius:2px;}

.score-meter{display:flex;align-items:center;gap:10px;margin:12px 0;}
.score-track{flex:1;height:8px;background:var(--border);border-radius:4px;overflow:hidden;display:flex;}
.score-bear{height:100%;background:linear-gradient(to right,var(--red),rgba(217,59,59,.3));}
.score-bull{height:100%;background:linear-gradient(to left,var(--green),rgba(46,168,74,.3));margin-left:auto;}
.score-label{font-size:10px;color:var(--muted);font-family:var(--mono);white-space:nowrap;}

.trade-card{background:var(--surface);border:1px solid var(--border);
  border-radius:8px;overflow:hidden;margin:20px 0;}
.trade-header{padding:14px 18px;background:var(--surface2);
  border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;}
.trade-time{font-family:var(--mono);font-size:11px;color:var(--muted);}
.trade-title{font-size:14px;font-weight:700;color:var(--bright);}
.trade-dir{font-size:11px;font-weight:700;padding:2px 9px;border-radius:3px;}
.trade-bear{background:rgba(217,59,59,.2);color:var(--red-hi);}
.trade-bull{background:rgba(46,168,74,.2);color:var(--green-hi);}
.trade-body{padding:16px 18px;display:flex;flex-direction:column;gap:14px;}
.trade-step{display:flex;gap:14px;align-items:flex-start;}
.step-num{width:22px;height:22px;border-radius:50%;background:var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;color:var(--muted);flex-shrink:0;margin-top:1px;}
.step-num.active{background:var(--blue);color:#fff;}
.step-num.hit{background:var(--green);color:#fff;}
.step-content{flex:1;}
.step-label{font-size:11px;font-weight:700;color:var(--bright);margin-bottom:2px;}
.step-detail{font-size:12px;color:var(--text);line-height:1.5;}
.step-data{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;}
.data-chip{font-family:var(--mono);font-size:10px;padding:2px 8px;border-radius:3px;
  background:var(--surface2);border:1px solid var(--border);}
.chip-bull{border-color:rgba(46,168,74,.4);color:var(--green-hi);}
.chip-bear{border-color:rgba(217,59,59,.4);color:var(--red-hi);}
.chip-neu{color:var(--muted);}
.chip-blue{border-color:rgba(74,158,255,.4);color:var(--blue);}

.result{display:flex;align-items:center;gap:16px;
  background:rgba(46,168,74,.06);border:1px solid rgba(46,168,74,.2);
  border-radius:5px;padding:12px 16px;margin-top:6px;}
.result-label{font-size:11px;font-weight:700;color:var(--green-hi);}
.result-detail{font-size:12px;color:var(--text);}
.result-warn{background:rgba(201,146,26,.06);border-color:rgba(201,146,26,.2);}
.result-warn .result-label{color:var(--amber);}

.checklist{list-style:none;margin:10px 0;display:flex;flex-direction:column;gap:6px;}
.checklist li{display:flex;gap:10px;align-items:flex-start;font-size:13px;}
.check-icon{font-size:11px;margin-top:2px;flex-shrink:0;}
.check-yes{color:var(--green-hi);}
.check-no{color:var(--red-hi);}
.check-warn{color:var(--amber);}

.conf-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0;}
.conf-item{background:var(--surface2);border:1px solid var(--border);border-radius:4px;padding:10px 12px;}
.conf-item.bull{border-left:3px solid var(--green);}
.conf-item.bear{border-left:3px solid var(--red);}
.conf-item.neu{border-left:3px solid var(--muted);}
.conf-name{font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.5px;color:var(--muted);margin-bottom:2px;}
.conf-val{font-size:12px;font-weight:600;}
.conf-val.bull{color:var(--green-hi);}
.conf-val.bear{color:var(--red-hi);}
.conf-val.neu{color:var(--amber);}

section{scroll-margin-top:64px;}


/* ═══════════════════════════════════════════════════════════
   LOGIN  (login.html)
   ═══════════════════════════════════════════════════════════ */
body.p-login{font-family:var(--sans);display:flex;align-items:center;
  justify-content:center;min-height:100vh;padding:24px;}
html:has(body.p-login),body.p-login{height:100%;}

body.p-login .card{background:var(--surface);border:1px solid var(--border);
  border-radius:10px;width:100%;max-width:480px;padding:40px;
  display:flex;flex-direction:column;gap:24px;}
.logo{display:flex;align-items:baseline;gap:10px;}
.logo-name{font-size:22px;font-weight:800;color:var(--bright);}
.logo-badge{font-family:var(--mono);font-size:9px;font-weight:600;padding:2px 7px;
  border-radius:3px;letter-spacing:1px;background:rgba(88,166,255,.15);color:var(--blue);}
.logo-sub{font-family:var(--mono);font-size:11px;color:var(--muted);}

.warning{background:rgba(248,81,73,.06);border:1px solid rgba(248,81,73,.25);
  border-left:3px solid var(--red);border-radius:5px;padding:14px 16px;
  font-size:12px;line-height:1.7;color:var(--text);}
.warning strong{color:var(--red-hi);}

.agreements{display:flex;flex-direction:column;gap:12px;}
.agreement-item{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;
  background:var(--surface2);border:1px solid var(--border);border-radius:5px;
  cursor:pointer;transition:border-color .15s;}
.agreement-item:hover{border-color:var(--blue);}
.agreement-item.checked{border-color:var(--green);background:rgba(63,185,80,.04);}
.agreement-item input[type=checkbox]{width:16px;height:16px;flex-shrink:0;
  margin-top:2px;accent-color:var(--green);cursor:pointer;}
.agreement-text{font-size:12px;line-height:1.6;color:var(--text);}
.agreement-text a{color:var(--blue);text-decoration:underline;cursor:pointer;}
.agreement-text a:hover{color:var(--bright);}

.cred-form{display:flex;flex-direction:column;gap:10px;}
.field-wrap{display:flex;flex-direction:column;gap:5px;}
.field-label{font-size:11px;font-weight:600;color:var(--muted);
  text-transform:uppercase;letter-spacing:.5px;}
.field-input{background:var(--surface2);border:1px solid var(--border);
  border-radius:5px;padding:10px 14px;color:var(--bright);
  font-family:var(--mono);font-size:13px;width:100%;outline:none;transition:border-color .15s;}
.field-input:focus{border-color:var(--blue);}
.field-input::placeholder{color:var(--muted);}
.field-input.error{border-color:var(--red)!important;animation:shake .3s ease;}
@keyframes shake{0%,100%{transform:translateX(0);}25%{transform:translateX(-6px);}75%{transform:translateX(6px);}}

.auth-error{font-size:11px;color:var(--red-hi);text-align:center;
  min-height:16px;transition:opacity .2s;}
.auth-spinner{display:none;width:14px;height:14px;border:2px solid var(--border);
  border-top-color:var(--blue);border-radius:50%;
  animation:spin .6s linear infinite;margin:0 auto;}

.btn-enter{width:100%;padding:14px;background:var(--blue);color:var(--bg);
  font-family:var(--sans);font-size:14px;font-weight:700;border:none;
  border-radius:6px;cursor:pointer;transition:opacity .15s,transform .1s;letter-spacing:.3px;}
.btn-enter:hover:not(:disabled){opacity:.9;transform:translateY(-1px);}
.btn-enter:disabled{background:var(--border);color:var(--muted);cursor:not-allowed;transform:none;}
.btn-enter:active:not(:disabled){transform:translateY(0);}

.session-note{text-align:center;font-size:10px;color:var(--muted);
  font-family:var(--mono);line-height:1.6;}

.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);display:none;
  align-items:center;justify-content:center;z-index:100;padding:24px;
  backdrop-filter:blur(4px);}
.modal-overlay.open{display:flex;}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:8px;
  width:100%;max-width:640px;max-height:80vh;display:flex;flex-direction:column;overflow:hidden;}
.modal-header{padding:18px 24px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
.modal-title{font-size:15px;font-weight:700;color:var(--bright);}
.modal-date{font-size:10px;color:var(--muted);font-family:var(--mono);}
.modal-close{background:transparent;border:none;color:var(--muted);
  font-size:20px;cursor:pointer;padding:0 4px;line-height:1;transition:color .15s;}
.modal-close:hover{color:var(--bright);}
.modal-body{flex:1;overflow-y:auto;padding:24px;font-size:12px;line-height:1.9;color:var(--text);}
.modal-body h2{font-size:13px;font-weight:700;color:var(--bright);
  margin:20px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--border);}
.modal-body h2:first-child{margin-top:0;}
.modal-body p{margin-bottom:12px;}
.modal-body ul{margin:0 0 12px 20px;}
.modal-body ul li{margin-bottom:5px;}
.modal-body strong{color:var(--bright);}
.modal-body .highlight{background:rgba(248,81,73,.08);border:1px solid rgba(248,81,73,.2);
  border-radius:4px;padding:10px 14px;margin:12px 0;color:var(--red-hi);font-weight:600;}
.modal-footer{padding:14px 24px;border-top:1px solid var(--border);
  text-align:center;font-size:10px;color:var(--muted);flex-shrink:0;}