:root,[data-theme="dark"]{--bg:#0a0e17;--card:#111827;--text:#e5e7eb;--dim:#6b7280;--border:#1f2937;--green:#00ff88;--red:#ff4444;--yellow:#ffcc00;--accent:#6366f1;--hover:#1a2332}
[data-theme="light"]{--bg:#f3f4f6;--card:#fff;--text:#111827;--dim:#6b7280;--border:#d1d5db;--hover:#e5e7eb}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--text);line-height:1.5;transition:background .3s,color .3s}

/* Header */
header{display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg);z-index:100}
.logo{width:36px;height:36px;background:var(--accent);border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;color:#fff}
.title h1{font-size:16px;font-weight:600}.title p{font-size:11px;color:var(--dim)}
.controls{margin-left:auto;display:flex;gap:8px}
.controls button{background:var(--card);border:1px solid var(--border);color:var(--text);width:36px;height:36px;border-radius:8px;cursor:pointer;font-size:16px}

/* Quick Stats */
.quick-stats{display:flex;gap:16px;padding:10px 20px;overflow-x:auto;border-bottom:1px solid var(--border);position:sticky;top:61px;background:var(--bg);z-index:99;-webkit-overflow-scrolling:touch}
.stat{display:flex;align-items:center;gap:8px;white-space:nowrap;font-size:13px}
.stat .label{color:var(--dim);font-size:11px;text-transform:uppercase;letter-spacing:.5px}
.stat .val{font-weight:600;font-variant-numeric:tabular-nums}
.stat .chg{font-size:11px;font-weight:500}
.up{color:var(--green)}.dn{color:var(--red)}

/* Main */
main{padding:16px 20px;max-width:1200px;margin:0 auto}
#loading{text-align:center;padding:60px 0}
.spinner{width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 12px}
@keyframes spin{to{transform:rotate(360deg)}}

/* Regime Summary */
.regime{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px 20px;margin-bottom:16px}
.regime-header{display:flex;align-items:center;gap:12px;margin-bottom:8px;flex-wrap:wrap}
.regime-score{font-size:28px;font-weight:700;font-variant-numeric:tabular-nums}
.regime-badge{padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600;text-transform:uppercase}
.badge-hold{background:rgba(255,204,0,.15);color:var(--yellow)}
.badge-buy{background:rgba(0,255,136,.15);color:var(--green)}
.badge-sell{background:rgba(255,68,68,.15);color:var(--red)}
.regime-text{font-size:13px;color:var(--dim)}
.regime-summary{font-size:13px;margin-top:8px;color:var(--text);opacity:.85}
.market-status{font-size:12px;margin-top:6px}

/* Condition Cards Grid */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px;margin-bottom:16px}
.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;transition:border-color .2s}
.card:hover{border-color:var(--accent)}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.card-title{font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.status-badge{padding:2px 10px;border-radius:12px;font-size:11px;font-weight:600}
.status-bullish,.status-flush,.status-expansion,.status-intact{background:rgba(0,255,136,.12);color:var(--green)}
.status-bearish,.status-tightening,.status-sticky,.status-breakdown{background:rgba(255,68,68,.12);color:var(--red)}
.status-neutral{background:rgba(255,204,0,.12);color:var(--yellow)}
.card-class{font-size:12px;color:var(--dim);margin-bottom:10px}
.metrics-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;margin-bottom:10px}
.metric{display:flex;justify-content:space-between;font-size:12px}
.metric .mk{color:var(--dim)}.metric .mv{font-weight:500;font-variant-numeric:tabular-nums}
.signal-bar{height:4px;background:var(--border);border-radius:2px;overflow:hidden;margin-bottom:8px}
.signal-fill{height:100%;border-radius:2px;transition:width .6s ease}
.info-btn{background:none;border:1px solid var(--border);color:var(--dim);width:28px;height:28px;border-radius:50%;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;float:right}
.info-btn:hover{color:var(--accent);border-color:var(--accent)}

/* Gauge */
.gauge-container{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:20px;margin-bottom:16px;text-align:center}
.gauge-container h3{font-size:14px;margin-bottom:12px;font-weight:600}
.gauge-container canvas{max-width:100%}
.gauge-label{font-size:20px;font-weight:700;margin-top:8px}
.gauge-sub{font-size:12px;color:var(--dim)}

/* Holdings */
.holdings{margin-bottom:16px}
.holdings h3{font-size:14px;font-weight:600;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.holdings-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
.holding{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:12px;position:relative}
.holding .tk{font-weight:700;font-size:14px}.holding .nm{font-size:11px;color:var(--dim)}
.holding .pr{font-size:13px;margin-top:4px;font-variant-numeric:tabular-nums}
.holding .ch{font-size:12px;font-weight:500}
.holding .rm{position:absolute;top:6px;right:8px;background:none;border:none;color:var(--dim);cursor:pointer;font-size:16px}
.holding .rm:hover{color:var(--red)}
.add-btn{background:var(--card);border:2px dashed var(--border);border-radius:10px;padding:12px;cursor:pointer;text-align:center;color:var(--dim);font-size:24px;display:flex;align-items:center;justify-content:center;min-height:80px}
.add-btn:hover{border-color:var(--accent);color:var(--accent)}

/* War Room */
.warroom{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:16px}
.warroom h3{font-size:14px;font-weight:600;margin-bottom:12px}
.slider-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:13px}
.slider-row label{width:60px;color:var(--dim);font-size:12px}
.slider-row input[type=range]{flex:1;accent-color:var(--accent)}
.slider-row .sv{width:50px;text-align:right;font-variant-numeric:tabular-nums;font-weight:500;font-size:12px}
.scenario-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.scenario-btns button{padding:6px 14px;border-radius:8px;border:1px solid var(--border);background:var(--card);color:var(--text);font-size:12px;cursor:pointer}
.scenario-btns button:hover{border-color:var(--accent);color:var(--accent)}
.scenario-btns button.active{background:var(--accent);color:#fff;border-color:var(--accent)}

/* News Ticker */
.ticker{overflow:hidden;white-space:nowrap;padding:10px 0;border-top:1px solid var(--border);margin-top:16px}
.ticker-inner{display:inline-block;animation:scroll 40s linear infinite}
.ticker-inner:hover{animation-play-state:paused}
@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.ticker-item{display:inline-block;padding:0 24px;font-size:12px;color:var(--dim)}
.ticker-item .tc{color:var(--accent);font-weight:600;margin-right:6px}

/* Info Sheet */
#info-sheet{position:fixed;bottom:0;left:0;right:0;background:var(--card);border-top:1px solid var(--border);padding:20px;transform:translateY(100%);transition:transform .3s ease;z-index:200;border-radius:16px 16px 0 0;max-height:40vh;overflow-y:auto}
#info-sheet.open{transform:translateY(0)}
#info-sheet .close-btn{position:absolute;top:12px;right:16px;background:none;border:none;color:var(--dim);font-size:24px;cursor:pointer}
#info-sheet h4{font-size:15px;margin-bottom:8px;padding-right:30px}
#info-sheet p{font-size:13px;color:var(--dim);line-height:1.6}

/* Settings */
#settings-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:300;display:none;align-items:center;justify-content:center}
#settings-overlay.open{display:flex}
.settings-panel{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:24px;width:90%;max-width:360px}
.settings-panel h3{margin-bottom:16px;font-size:16px}
.settings-panel label{display:block;font-size:13px;margin-bottom:12px}
.settings-panel input{width:60px;padding:4px 8px;background:var(--bg);border:1px solid var(--border);border-radius:6px;color:var(--text);margin-left:8px}
.settings-panel button{display:block;width:100%;padding:8px;margin-top:10px;border-radius:8px;border:1px solid var(--border);background:var(--card);color:var(--text);cursor:pointer;font-size:13px}
.settings-panel button:hover{border-color:var(--accent)}

/* Mobile */
@media(max-width:768px){
  header{padding:10px 14px}
  .quick-stats{padding:8px 14px;gap:12px}
  main{padding:12px 14px}
  .cards-grid{grid-template-columns:1fr;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding-bottom:8px;-webkit-overflow-scrolling:touch}
  .card{min-width:85vw;scroll-snap-align:start;flex-shrink:0}
  .holdings-grid{grid-template-columns:repeat(2,1fr)}
  .scenario-btns{flex-wrap:wrap}
}