:root{--bg: #071018;--panel: #0e1a24;--panel-2: #122231;--line: #1e3346;--text: #e8f1f7;--dim: #8aa0b3;--up: #34d399;--down: #f87171;--accent: #22d3ee}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,sans-serif}.app{max-width:1280px;margin:0 auto;padding:16px 16px 40px}.topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px}.brand{font-size:22px;font-weight:800;letter-spacing:.02em}.sub,.dim,.clock,.metric-label,.replay-label{color:var(--dim)}.clock{font-variant-numeric:tabular-nums;font-size:13px}.controls,.metrics,.grid-2{display:grid;gap:10px}.controls{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:12px}.controls label,.live-toggle{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--dim)}select,input[type=range]{width:100%;background:var(--panel-2);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:10px}.live-toggle{flex-direction:row;align-items:center;gap:8px;padding-top:18px}.replay{margin:0 0 12px}.banner{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:12px}.banner.err{color:var(--down)}.metrics{grid-template-columns:repeat(6,minmax(0,1fr));margin-bottom:12px}.metric,.panel,.signal{background:linear-gradient(180deg,var(--panel),#0b1620);border:1px solid var(--line);border-radius:16px;padding:14px}.metric-value,.signal-main,.strike{font-weight:700}.metric-value{font-size:20px}.metric-sub{font-size:11px;color:var(--dim);margin-top:4px}.signal{display:grid;grid-template-columns:1.2fr 1.2fr .6fr;gap:12px;margin-bottom:12px}.signal p{grid-column:1 / -1;margin:0;color:var(--dim);line-height:1.5;font-size:13px}.signal.up{box-shadow:inset 0 0 0 1px #34d39940}.signal.down{box-shadow:inset 0 0 0 1px #f8717140}.panel{margin-bottom:12px}.panel-h{display:flex;justify-content:space-between;margin-bottom:10px;font-weight:600}.chart{height:280px}.chart.tall{height:360px}.grid-2{grid-template-columns:1fr 1fr}.walls{list-style:none;margin:0;padding:0}.walls li{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line)}.up{color:var(--up)}.down{color:var(--down)}.table-wrap{overflow:auto;-webkit-overflow-scrolling:touch}table{width:100%;border-collapse:collapse;font-size:12px;min-width:820px}th,td{padding:8px 6px;text-align:right;border-bottom:1px solid var(--line)}th:nth-child(2),td:nth-child(2),th:nth-child(10),td:nth-child(10),.strike{text-align:center}tr.atm td{background:#facc151f;font-weight:700}.tag{font-size:11px}.longbuild{color:#86efac}.shortbuild{color:#fca5a5}.shortcover{color:#93c5fd}.longunwind{color:#fdba74}.tip{background:#0b1722;border:1px solid var(--line);padding:8px 10px;border-radius:8px;font-size:12px}@media (max-width: 900px){.controls,.metrics,.grid-2,.signal{grid-template-columns:1fr 1fr}.chart,.chart.tall{height:240px}.app{padding:12px}}@media (max-width: 640px){.controls,.metrics,.signal{grid-template-columns:1fr}.live-toggle{padding-top:0}.brand{font-size:18px}}