:root { color-scheme: dark; --bg:#07110f; --panel:#0d1b18; --line:#1c3831; --ink:#edf8f4; --muted:#7d9b91; --mint:#58e0ae; --red:#ff6b78; --gold:#ffd166; }
body[data-theme="slate"]{--bg:#0b1220;--panel:#111827;--surface:#162033;--surface-2:#1b273b;--line:#30405a;--ink:#edf3fb;--muted:#9aa9be;--mint:#6296ff;--red:#ef7180;--gold:#e7b85f;--pe-max:#087a4a}
body[data-theme="navy"]{--bg:#06111f;--panel:#0b1b2e;--surface:#10243a;--surface-2:#142d47;--line:#234563;--ink:#eef6ff;--muted:#91a9c0;--mint:#42a5dc;--red:#ed6a79;--gold:#d9a94f;--pe-max:#087a4a}
body[data-theme="graphite"]{--bg:#101216;--panel:#191c22;--surface:#20242c;--surface-2:#282d36;--line:#3a414d;--ink:#f0f1f3;--muted:#a1a6af;--mint:#b99a69;--red:#d86f78;--gold:#d4ad6a;--pe-max:#087a4a}
body[data-theme="white"]{color-scheme:light;--bg:#f1f4f8;--panel:#ffffff;--surface:#edf1f6;--surface-2:#e3e9f1;--line:#cbd4df;--ink:#172033;--muted:#627087;--mint:#2868c7;--red:#cf3f55;--gold:#a96e09;--pe-max:#0b8a55}
body[data-theme="black"]{--bg:#000000;--panel:#08090b;--surface:#111318;--surface-2:#1a1d23;--line:#30343d;--ink:#f6f7f9;--muted:#9299a5;--mint:#4d8ee8;--red:#ed596b;--gold:#d9aa4c;--pe-max:#087a4a}
* { box-sizing:border-box; }
.page-nav{display:flex;gap:6px;padding:4px;border:1px solid var(--line);border-radius:11px;background:var(--panel)}
.page-nav a{padding:8px 13px;border-radius:7px;color:var(--muted);text-decoration:none;font-size:13px;white-space:nowrap}
.page-nav button{padding:8px 13px;border:0;border-radius:7px;background:transparent;color:var(--muted);font-size:13px;white-space:nowrap}
.page-nav a:hover,.page-nav a.active,.page-nav button:hover,.page-nav button.active{background:color-mix(in srgb,var(--mint) 18%,var(--surface));color:var(--ink)}
.backtester-backdrop{position:fixed;inset:0;z-index:160;background:#0009;backdrop-filter:blur(2px)}
.backtester-panel{position:fixed;z-index:170;top:8px;right:8px;bottom:8px;width:min(96vw,1780px);display:grid;grid-template-rows:auto minmax(0,1fr);border:1px solid var(--line);border-radius:16px;background:var(--bg);box-shadow:-22px 0 70px #000b;transform:translateX(calc(100% + 24px));transition:transform .24s ease;overflow:hidden}
.backtester-panel.open{transform:translateX(0)}.backtester-heading{display:flex;justify-content:space-between;align-items:center;min-height:48px;padding:6px 12px;border-bottom:1px solid var(--line);background:var(--panel)}.backtester-heading h2{margin:0;font-size:20px;line-height:1.1}.backtester-heading .eyebrow{margin-bottom:1px;font-size:8px}.backtester-heading button{font-size:18px;padding:3px 9px}.backtester-panel iframe{width:100%;height:100%;border:0;background:var(--bg)}
.login-gate{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:radial-gradient(circle at 50% 20%,#12362a,#050807 58%)}.login-gate[hidden]{display:none}.login-card{width:min(390px,calc(100% - 30px));padding:28px;border:1px solid #245b3d;border-radius:16px;background:#0a1210;box-shadow:0 24px 70px #000a}.login-card h2{margin:0 0 20px;font-size:28px}.login-card label{display:block;margin-top:12px}.login-card input{display:block;width:100%;margin-top:5px;padding:11px;border:1px solid #315344;border-radius:8px;background:#07100d;color:#fff}.login-card button{width:100%;margin-top:18px;border-color:#16834a;background:#0d2a1b}.login-card .error{margin-top:12px}
body { margin:0; min-height:100vh; background:radial-gradient(circle at 20% -10%, color-mix(in srgb,var(--mint) 18%,var(--bg)) 0, transparent 40%), var(--bg); color:var(--ink); font-family:Inter, ui-sans-serif, system-ui, sans-serif; }
main { width:min(1800px, calc(100% - 24px)); margin:auto; padding:42px 0 24px; }
header { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:28px; }
.eyebrow { color:var(--mint); font-size:12px; letter-spacing:.22em; font-weight:800; margin:0 0 7px; }
h1 { font-size:clamp(34px,5vw,58px); letter-spacing:-.055em; margin:0; line-height:.98; } h1 span { color:var(--mint); font-weight:400; }
.subtitle { color:var(--muted); margin:12px 0 0; }
.status-card { display:flex; align-items:center; gap:12px; min-width:180px; border:1px solid var(--line); background:#0b1815cc; padding:14px 16px; border-radius:14px; }
.status-card div { display:flex; flex-direction:column; } .status-card small { color:var(--muted); margin-top:3px; }
.dot { width:10px; height:10px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 5px #ffd16618; } .dot.live { background:var(--mint); box-shadow:0 0 0 5px #58e0ae18; } .dot.error-dot { background:var(--red); } .dot.loading { animation:pulse 1s infinite; }
@keyframes pulse { 50% { opacity:.35; } }
.metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:14px; }
.metrics article { border:1px solid var(--line); border-radius:14px; padding:16px 18px; background:linear-gradient(145deg,#10221d,#0b1714); }
.metrics span { display:block; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:7px; } .metrics strong { font-size:21px; font-variant-numeric:tabular-nums; }
.toolbar { display:flex; justify-content:space-between; align-items:end; gap:12px; margin:20px 0 10px; }
label { color:var(--muted); font-size:12px; } select,button { color:var(--ink); border:1px solid var(--line); background:#10221d; border-radius:9px; padding:9px 12px; font:inherit; } select { display:block; margin-top:6px; } button { cursor:pointer; } button:hover { border-color:var(--mint); }
.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:16px; background:var(--panel); }
table { width:100%; border-collapse:collapse; min-width:0; table-layout:fixed; font-size:10.5px; font-variant-numeric:tabular-nums; }
th,td { padding:8px 4px; text-align:right; border-bottom:1px solid #173029; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
thead { position:sticky; top:0; z-index:2; } thead th { color:var(--muted); background:#0c1b17; font-size:11px; letter-spacing:.08em; }
thead .group th:first-child { color:var(--mint); text-align:center; } thead .group th:nth-child(2) { color:var(--gold); text-align:center; } thead .group th:last-child { color:#ff8e98; text-align:center; }
tbody th { color:var(--gold); background:#101f1b; text-align:center; } tbody th small { display:block; color:#0b1714; background:var(--gold); width:max-content; margin:3px auto 0; padding:1px 5px; border-radius:4px; font-size:8px; }.strike-labels{display:flex;justify-content:center;gap:3px;flex-wrap:wrap}.strike-labels .level-badge.resistance{background:var(--red);color:#fff}.strike-labels .level-badge.support{background:var(--mint);color:#07110f}
tbody tr:hover td,tbody tr:hover th { background:#142a24; } tr.atm td,tr.atm th { border-top:1px solid #ffd16655; border-bottom:1px solid #ffd16655; background:#ffd16608; }
.positive { color:var(--mint); font-weight:700; } .negative { color:var(--red); font-weight:700; } .muted,.empty,footer { color:var(--muted); }
.cell-pair { display:inline-flex; flex-direction:column; align-items:flex-end; line-height:1.15; }
.cell-pair b { font-weight:750; }
.cell-pair small { color:currentColor; opacity:.72; font-size:10px; margin-top:3px; }
.volume-pair { color:var(--ink); }
.volume-pair small { color:var(--muted); opacity:1; }
tbody td.metric-low, tbody tr:hover td.metric-low { background:#000; }
tbody td.metric-ce-max, tbody tr:hover td.metric-ce-max { background:#d71920; color:#fff; }
tbody td.metric-pe-max, tbody tr:hover td.metric-pe-max { background:#075f36; color:#fff; }
tbody td.metric-gold, tbody tr:hover td.metric-gold { background:#b8860b; color:#fff; }
tbody td.metric-yellow, tbody tr:hover td.metric-yellow { background:#ffe45c; color:#111; }
tbody td.metric-ce-max .cell-pair, tbody td.metric-pe-max .cell-pair,
tbody td.metric-gold .cell-pair, tbody td.metric-yellow .cell-pair { color:inherit; }
tbody td.metric-ce-max .cell-pair small, tbody td.metric-pe-max .cell-pair small,
tbody td.metric-gold .cell-pair small, tbody td.metric-yellow .cell-pair small { color:inherit; opacity:.82; }
.coi-tip[title]{cursor:help;text-decoration:underline dotted;text-underline-offset:3px}
tbody tr.spot-row td, tbody tr.spot-row th,
tbody tr.spot-row:hover td, tbody tr.spot-row:hover th { background:#1878c9; color:#fff; border-color:#55aef8; }
tbody tr.spot-row td { height:42px; }
tbody tr.spot-row th { font-size:11.5px; letter-spacing:0; padding:4px 1px; overflow:visible; text-overflow:clip; }
tbody tr.spot-row th span { display:block; font-size:9px; letter-spacing:.14em; opacity:.8; margin-bottom:2px; }
.iv-delta { color:#d9e7e2; }
.iv-delta small { color:#8fb9ab; opacity:1; }
.empty { text-align:center; padding:48px; } .error { color:#ff9aa3; background:#38171c; border:1px solid #6e2b35; padding:12px 15px; border-radius:10px; }
footer { text-align:center; font-size:12px; padding:18px; }
.header-tools{display:flex;align-items:flex-end;gap:10px}.theme-control select{min-width:105px;margin-top:4px}.status-card,.metrics article,.option-panel,.chart-panel,.pnl-panel{background:var(--panel)}select,button,.chart-actions input,.risk-controls input{background:var(--surface)}thead th,tbody th,.trade-signal.idle{background:var(--surface)}tbody tr:hover td,tbody tr:hover th{background:var(--surface-2)}.levels-editor textarea,.canvas-wrap{background:var(--bg)}tbody td.metric-pe-max,tbody tr:hover td.metric-pe-max{background:var(--pe-max)}
.fit-control{display:flex;align-items:center;gap:6px;padding:9px 10px;border:1px solid var(--line);border-radius:9px;background:var(--surface);white-space:nowrap}.fit-control input{accent-color:var(--mint)}
body.fit-screen{overflow:hidden}body.fit-screen main{height:100vh;width:calc(100% - 18px);padding:10px 0 6px;display:grid;grid-template-rows:auto auto minmax(260px,1fr) minmax(145px,28vh) auto;gap:7px}body.fit-screen header{margin-bottom:0}body.fit-screen h1{font-size:clamp(25px,3vw,40px)}body.fit-screen .subtitle{margin-top:5px}body.fit-screen .metrics{margin-bottom:0;gap:7px}body.fit-screen .metrics article{padding:8px 12px}body.fit-screen .metrics span{margin-bottom:3px}body.fit-screen .metrics strong{font-size:16px}body.fit-screen .workspace-grid{height:100%;min-height:0;margin-top:0;gap:8px;overflow:hidden}body.fit-screen .option-panel,body.fit-screen .chart-panel{height:100%;overflow:auto;padding:9px}body.fit-screen .chart-head h2{font-size:19px}body.fit-screen .chart-metrics{padding:7px 2px}body.fit-screen .levels-editor{margin-bottom:7px}body.fit-screen .levels-editor textarea{min-height:50px;max-height:70px}body.fit-screen .canvas-wrap{max-height:calc(100% - 175px)}body.fit-screen .pnl-panel{height:100%;margin-top:0;padding:9px;overflow:hidden;display:flex;flex-direction:column}body.fit-screen .pnl-head h2{font-size:18px}body.fit-screen .live-order-controls{margin-top:5px;padding:5px}body.fit-screen .pnl-wrap{min-height:0;flex:1;margin-top:5px;overflow:auto}body.fit-screen footer{padding:2px;font-size:9px}
body.fit-screen main{grid-template-rows:auto minmax(280px,1fr) minmax(145px,28vh) auto}
body.fit-screen .top-strip{display:flex;align-items:center;gap:7px;min-width:0}
body.fit-screen .top-strip header{display:contents}
body.fit-screen .top-strip header>div:first-child{order:1;min-width:170px}
body.fit-screen .top-strip .page-nav{order:2;padding:2px;gap:2px}
body.fit-screen .top-strip .page-nav a{padding:5px 7px;font-size:9px}
body.fit-screen .top-strip h1{font-size:20px;white-space:nowrap}
body.fit-screen .top-strip .subtitle{font-size:9px;margin:1px 0 0}
body.fit-screen .top-strip .metrics{order:3;display:flex;flex:1;min-width:0;gap:5px}
body.fit-screen .top-strip .metrics article{flex:1;min-width:85px;padding:5px 8px;border-radius:8px}
body.fit-screen .top-strip .metrics span{font-size:8px;margin:0}
body.fit-screen .top-strip .metrics strong{font-size:12px}
body.fit-screen .top-strip .header-tools{order:4;gap:5px;align-items:center}
body.fit-screen .top-strip .fit-control,body.fit-screen .top-strip .theme-control select{padding:5px 7px;font-size:9px}
body.fit-screen .top-strip .status-card{min-width:135px;padding:6px 8px;border-radius:8px;font-size:10px}

/* Full-width primary navigation with readable labels. */
.page-nav{width:100%;display:flex;align-items:stretch;gap:6px;padding:5px}
.page-nav>a,.page-nav>button{flex:1 1 0;display:flex;align-items:center;justify-content:center;min-height:42px;padding:9px 16px;font-size:14px;font-weight:900;letter-spacing:.055em;text-align:center}
body.fit-screen .top-strip{display:grid;grid-template-columns:minmax(170px,auto) minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;gap:6px 8px}
body.fit-screen .top-strip .page-nav{grid-column:1/-1;grid-row:1;width:100%;padding:4px;gap:5px}
body.fit-screen .top-strip .page-nav>a,body.fit-screen .top-strip .page-nav>button{min-height:34px;padding:7px 12px;font-size:13px;font-weight:900;letter-spacing:.06em}
body.fit-screen .top-strip header>div:first-child{grid-column:1;grid-row:2;order:initial}
body.fit-screen .top-strip .metrics{grid-column:2;grid-row:2;order:initial}
body.fit-screen .top-strip .header-tools{grid-column:3;grid-row:2;order:initial}
body.fit-screen .chart-panel{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;overflow:hidden}
body.fit-screen .chart-toolbar-line{display:flex;align-items:center;gap:5px;min-width:0;overflow:hidden;white-space:nowrap;color:#22c55e}
body.fit-screen .chart-toolbar-line .chart-head{display:contents}
body.fit-screen .chart-toolbar-line .chart-head>div:first-child{display:flex;align-items:center;gap:4px}
body.fit-screen .chart-toolbar-line .eyebrow{font-size:8px;margin:0;color:#22c55e}
body.fit-screen .chart-toolbar-line h2{font-size:11px;color:#22c55e;white-space:nowrap}
body.fit-screen .chart-toolbar-line .chart-actions{flex-wrap:nowrap;gap:3px}
body.fit-screen .chart-toolbar-line .chart-actions input,body.fit-screen .chart-toolbar-line .chart-actions button{padding:4px 5px;font-size:8px;height:26px;color:#22c55e;border-color:#187f43}
body.fit-screen .chart-toolbar-line .chart-actions .totp-input{width:82px}
body.fit-screen .chart-toolbar-line .chart-actions input[type=date]{width:104px}
body.fit-screen .chart-toolbar-line .zoom-controls button{padding:4px 6px}
body.fit-screen .chart-toolbar-line .chart-metrics{display:flex;flex:1;min-width:0;flex-wrap:nowrap;gap:5px;padding:0;color:#22c55e;font-size:8px;overflow:hidden}
body.fit-screen .chart-toolbar-line .chart-metrics b{color:#22c55e}
body.fit-screen .chart-toolbar-line .trade-signal{min-width:80px;max-width:180px;margin-left:0;padding:5px 7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:8px}
body.fit-screen .levels-editor{grid-template-columns:minmax(240px,1fr) auto;margin:3px 0 5px;gap:3px 6px}
body.fit-screen .levels-editor>label{font-size:8px}
body.fit-screen .levels-editor textarea{min-height:42px;max-height:48px;padding:5px 7px;font-size:9px}
body.fit-screen .levels-editor>div{gap:3px}
body.fit-screen .risk-controls input{width:62px;padding:4px}
body.fit-screen .levels-editor button{padding:5px 8px;font-size:9px}
body.fit-screen .canvas-wrap{height:100%;max-height:none;min-height:0;overflow:hidden}
body.fit-screen .canvas-wrap canvas{width:100%;height:100%;min-width:0}
/* Readable chart control area: keep controls inside the highlighted chart header only */
body.fit-screen .chart-toolbar-line{display:grid;grid-template-rows:auto auto;gap:6px;overflow:visible;white-space:normal;color:#22c55e}
body.fit-screen .chart-toolbar-line .chart-head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
body.fit-screen .chart-toolbar-line .chart-head>div:first-child{display:flex;align-items:center;gap:7px;min-width:max-content}
body.fit-screen .chart-toolbar-line .eyebrow{font-size:10px;letter-spacing:.12em}
body.fit-screen .chart-toolbar-line h2{font-size:15px}
body.fit-screen .chart-toolbar-line .chart-actions{display:flex;flex:1;justify-content:flex-end;flex-wrap:nowrap;gap:5px;min-width:0}
body.fit-screen .chart-toolbar-line .chart-actions input,body.fit-screen .chart-toolbar-line .chart-actions button{height:32px;padding:6px 8px;font-size:10px}
body.fit-screen .chart-toolbar-line .chart-actions .totp-input{width:98px}
body.fit-screen .chart-toolbar-line .chart-actions input[type=date]{width:118px}
body.fit-screen .chart-toolbar-line .zoom-controls{display:inline-flex;gap:3px}
body.fit-screen .chart-toolbar-line .chart-metrics{display:flex;align-items:center;min-height:32px;gap:13px;padding:4px 2px;font-size:10px;overflow:visible}
body.fit-screen .chart-toolbar-line .trade-signal{flex:1;max-width:none;margin-left:auto;padding:7px 10px;font-size:10px;text-align:center}
body.fit-screen .levels-editor{grid-template-columns:minmax(300px,1fr) auto;gap:5px 10px;margin:4px 0 7px}
body.fit-screen .levels-editor>label{font-size:10px}
body.fit-screen .levels-editor textarea{min-height:54px;max-height:58px;padding:7px 9px;font-size:10px}
body.fit-screen .levels-editor>div{justify-content:flex-start;gap:5px}
body.fit-screen .risk-controls{gap:6px;flex-wrap:nowrap}
body.fit-screen .risk-controls label{font-size:9px}
body.fit-screen .risk-controls input{width:70px;padding:6px;font-size:11px}
body.fit-screen .levels-editor button{padding:7px 10px;font-size:10px}
/* Professional chart workspace based on the compact reference layout */
body.fit-screen .chart-toolbar-line{display:block;padding:2px 3px 5px;border-bottom:1px solid color-mix(in srgb,#16a34a 35%,var(--line));background:linear-gradient(90deg,color-mix(in srgb,#16a34a 5%,var(--panel)),var(--panel))}
body.fit-screen .chart-toolbar-line .chart-head{display:block}
body.fit-screen .chart-toolbar-line .chart-head>div:first-child{display:none}
body.fit-screen .chart-toolbar-line .chart-actions{display:flex;justify-content:flex-start;gap:6px;width:100%;overflow:hidden}
body.fit-screen .chart-toolbar-line .broker-status{font-size:11px;color:#60a5fa;margin-right:3px}
body.fit-screen .chart-toolbar-line .chart-actions input,body.fit-screen .chart-toolbar-line .chart-actions button{height:31px;padding:6px 9px;font-size:10px;color:#d8fbe7;border:1px solid #16834a;background:#07150f;border-radius:7px}
body.fit-screen .chart-toolbar-line .chart-actions input:focus,body.fit-screen .chart-toolbar-line .chart-actions button:hover{outline:none;border-color:#22c55e;box-shadow:0 0 0 2px #22c55e22}
body.fit-screen .chart-toolbar-line .chart-actions .totp-input{width:100px}
body.fit-screen .chart-toolbar-line .chart-actions input[type=date]{width:120px}
body.fit-screen .chart-toolbar-line .chart-metrics{display:flex;min-height:27px;gap:16px;padding:6px 1px 0;font-size:10px;color:#8ee7b2}
body.fit-screen .chart-toolbar-line .chart-metrics b{color:#22c55e}
body.fit-screen .chart-toolbar-line .trade-signal{margin-left:auto;min-height:25px;padding:5px 9px;border-radius:5px;font-size:9px;max-width:48%;color:#04130a;background:#22c55e}
body.fit-screen .levels-editor{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 292px;grid-template-rows:auto minmax(55px,auto);gap:4px 10px;padding:6px 3px 7px;margin:0;border-bottom:1px solid var(--line)}
body.fit-screen .levels-editor>label{grid-column:1;grid-row:1;font-size:9px;color:var(--muted)}
body.fit-screen .levels-editor>label small{font-size:8px}
body.fit-screen .levels-editor textarea{grid-column:1;grid-row:2;min-height:58px;max-height:62px;padding:7px 9px;font-size:9px;line-height:1.35;border-radius:7px}
body.fit-screen .levels-editor>div{grid-column:2;grid-row:1/3;display:grid;grid-template-rows:auto auto auto;align-content:start;gap:5px}
body.fit-screen .risk-controls{display:grid;grid-template-columns:repeat(2,1fr);gap:5px 7px;width:100%}
body.fit-screen .risk-controls label{font-size:9px}
body.fit-screen .risk-controls input{width:100%;height:29px;padding:5px 7px;border-radius:6px}
body.fit-screen .levels-editor>div>button{justify-self:start;padding:6px 10px;color:#d8fbe7;border-color:#16834a;background:#07150f}
body.fit-screen .levels-editor>div>span{font-size:8px;line-height:1.25;max-width:292px}
body.fit-screen .canvas-wrap{border-color:#17452d;border-radius:9px;background:#050908}
/* Keep levels/risk editor compact so the chart receives the panel height */
body.fit-screen .levels-editor{grid-template-columns:minmax(0,1fr) 300px;grid-template-rows:14px 96px;gap:4px 10px;padding:5px 3px 6px}
body.fit-screen .levels-editor>label{grid-column:1;grid-row:1;margin:0;line-height:14px}
body.fit-screen .levels-editor textarea{grid-column:1;grid-row:2;min-height:52px;max-height:52px;resize:none}
body.fit-screen .levels-editor>div{grid-column:2;grid-row:1/3;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:5px 7px;padding:5px 7px;border:1px solid #16834a;border-radius:8px;background:linear-gradient(145deg,#0a1912,#07100c);box-shadow:inset 0 0 0 1px #22c55e14}
body.fit-screen .levels-editor .risk-controls{grid-column:1/-1;grid-row:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 7px;width:100%}
body.fit-screen .levels-editor .risk-controls label{grid-column:auto!important;display:block;margin:0;font-size:8px;color:#8ee7b2}
body.fit-screen .levels-editor .risk-controls input{display:block;width:100%;height:25px;margin-top:2px;padding:3px 6px;border-color:#1b6540;background:#0d2017;color:#f1fff6}
body.fit-screen .levels-editor>div>button{grid-column:1;grid-row:2;align-self:start;margin:0;padding:5px 8px;font-size:9px}
body.fit-screen .levels-editor>div>span{grid-column:2;grid-row:2;align-self:center;max-width:none;font-size:7.5px;line-height:1.2;color:#86a996;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
/* Final levels layout: wide text box left, risk/apply block right */
body.fit-screen .levels-editor{grid-template-columns:minmax(0,2fr) minmax(290px,1fr);grid-template-rows:14px 92px;column-gap:10px;padding:5px 4px 7px}
body.fit-screen .levels-editor textarea{width:100%;height:58px;min-height:58px;max-height:58px;align-self:start;border:1px solid #245b3d;background:#07100d;color:#edf8f2}
body.fit-screen .levels-editor>div{height:92px;padding:5px 7px;grid-template-columns:94px minmax(0,1fr);grid-template-rows:53px 23px;gap:4px 7px}
body.fit-screen .levels-editor .risk-controls{height:53px;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,25px);gap:3px 7px}
body.fit-screen .levels-editor .risk-controls label{position:relative;padding-top:9px;height:27px}
body.fit-screen .levels-editor .risk-controls label input{position:absolute;left:0;right:0;bottom:0;height:19px;margin:0;padding:2px 6px}
body.fit-screen .levels-editor .risk-controls label{line-height:8px}
body.fit-screen .levels-editor>div>button{width:94px;height:23px;padding:3px 6px;white-space:nowrap}
body.fit-screen .levels-editor>div>span{font-size:7.5px;-webkit-line-clamp:2}
/* Exact single-band layout: levels | apply/status | risk controls */
body.fit-screen .levels-editor{display:grid;grid-template-columns:minmax(0,1fr) 200px 300px;grid-template-rows:14px 58px;gap:4px 8px;padding:5px 4px 7px}
body.fit-screen .levels-editor>label{grid-column:1;grid-row:1;line-height:14px}
body.fit-screen .levels-editor textarea{grid-column:1;grid-row:2;width:100%;height:58px;min-height:58px;max-height:58px;margin:0}
body.fit-screen .levels-editor>div{grid-column:2/4;grid-row:1/3;width:100%;height:76px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;display:grid;grid-template-columns:200px 300px;grid-template-rows:30px 46px;gap:0 8px}
body.fit-screen .levels-editor>div>button{grid-column:1;grid-row:1;justify-self:end;align-self:end;width:auto;height:25px;padding:4px 9px}
body.fit-screen .levels-editor>div>span{grid-column:1;grid-row:2;align-self:start;text-align:right;padding:5px 2px 0 4px;max-width:200px;font-size:7.5px;line-height:1.25;-webkit-line-clamp:3}
body.fit-screen .levels-editor .risk-controls{grid-column:2;grid-row:1/3;width:300px;height:76px;padding:5px 7px;border:1px solid #16834a;border-radius:8px;background:linear-gradient(145deg,#0a1912,#07100c);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,30px);gap:4px 7px}
body.fit-screen .levels-editor .risk-controls label{position:static!important;display:block!important;grid-column:auto!important;height:30px!important;padding:0!important;margin:0!important;font-size:8px;line-height:8px;color:#8ee7b2}
body.fit-screen .levels-editor .risk-controls label input{position:static!important;display:block;width:100%;height:21px;margin:1px 0 0;padding:2px 6px;border-color:#1b6540;background:#0d2017;color:#f1fff6}
.workspace-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; gap:16px; margin-top:20px; }
.option-panel,.chart-panel { min-width:0; border:1px solid var(--line); border-radius:18px; background:var(--panel); padding:14px; }
.chart-panel { margin-top:0; padding:18px; }
.option-panel .toolbar { margin-top:0; }
.chart-head { display:flex; justify-content:space-between; align-items:center; gap:18px; }
.chart-head h2 { margin:0; font-size:25px; }
.chart-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:8px; }
.chart-actions input { color:var(--ink); background:#10221d; border:1px solid var(--line); border-radius:9px; padding:8px; }
.chart-actions .totp-input { width:118px; letter-spacing:.12em; }
.zoom-controls{display:inline-flex;gap:4px}.zoom-controls button{padding:8px 10px}.canvas-wrap canvas{cursor:grab;touch-action:none}.canvas-wrap canvas.dragging{cursor:grabbing}
.broker-status { color:var(--muted); font-size:12px; margin-right:5px; }.broker-status.connected{color:var(--mint);}
.chart-metrics { display:flex; align-items:center; gap:20px; flex-wrap:wrap; padding:14px 2px; color:var(--muted); font-size:12px; }.chart-metrics b{color:var(--ink);margin-left:4px;}
.impulse-status{padding:5px 8px;border:1px solid #315348;border-radius:7px;background:#0b1814;color:#8fd9ba;font-size:10px;font-weight:700}.impulse-status.detected-up{border-color:#22c55e;color:#6ef59d;background:#082315}.impulse-status.detected-down{border-color:#ef4444;color:#ff8a92;background:#2a0d10}
.recording-status{padding:5px 8px;border:1px solid #5a3a3a;border-radius:7px;background:#201010;color:#ff9292;font-size:10px;font-weight:900}.recording-status.active{border-color:#ef4444;background:#3a090d;color:#fff;box-shadow:0 0 12px #ef444455}
.trade-signal { margin-left:auto; padding:8px 12px; border-radius:8px; letter-spacing:.04em; }.trade-signal.idle{color:var(--muted);background:#101d19;}.trade-signal.long{color:#071a12;background:var(--mint);box-shadow:0 0 18px #58e0ae44;}.trade-signal.short{color:#fff;background:var(--red);box-shadow:0 0 18px #ff6b7844;}
.levels-editor { display:grid; grid-template-columns:minmax(280px,1fr) auto; gap:8px 12px; margin:2px 0 14px; }
.levels-editor label { grid-column:1/-1; }.levels-editor label small { margin-left:8px; color:#5f8176; }
.levels-editor textarea { resize:vertical; min-height:68px; color:var(--ink); background:#08120f; border:1px solid var(--line); border-radius:10px; padding:10px 12px; font:12px ui-monospace,SFMono-Regular,Consolas,monospace; }
.levels-editor>div { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:7px; }.levels-editor>div span { color:var(--muted); font-size:10px; max-width:300px; }
.risk-controls{display:flex;flex-wrap:wrap;gap:8px}.risk-controls label{font-size:10px}.risk-controls input{display:block;width:76px;margin-top:4px;color:var(--ink);background:#10221d;border:1px solid var(--line);border-radius:7px;padding:7px}
.canvas-wrap { overflow:auto; border:1px solid #18322b; border-radius:12px; background:#0b1513; } canvas { display:block; width:100%; min-width:650px; height:auto; }
.pnl-panel { margin-top:16px; border:1px solid var(--line); border-radius:18px; background:var(--panel); padding:16px; }.pnl-head{display:flex;justify-content:space-between;align-items:center;gap:16px}.pnl-head h2{margin:0}.pnl-head>div:last-child{display:flex;flex-direction:column;text-align:right;color:var(--muted);font-size:11px}.pnl-head>div:last-child strong{font-size:20px;margin-top:3px}.pnl-wrap{overflow:auto;margin-top:12px}.pnl-table{table-layout:auto;min-width:760px;font-size:12px}.pnl-table th,.pnl-table td{padding:9px 10px}.side-long{color:var(--mint);font-weight:800}.side-short{color:var(--red);font-weight:800}.trade-open{background:#ffd1660b}
.live-order-controls{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:12px;padding:10px;border:1px solid #5f392d;border-radius:10px;background:#2a100d}.live-order-controls small{color:#d69b8c}.live-order-controls strong{color:#ffd166}.danger-button{background:#d83b45!important;color:white!important;border-color:#ff6872!important}.live-order-controls button:disabled{opacity:.45;cursor:not-allowed}
.trade-action{white-space:nowrap}.trade-action button{padding:7px 9px;font-size:10px}.exit-button{background:#ffd166!important;color:#251800!important;border-color:#ffd166!important}
.delete-trade{background:transparent!important;color:var(--red)!important;border-color:color-mix(in srgb,var(--red) 55%,transparent)!important}#clearPaperHistory{margin-top:7px;padding:5px 8px;font-size:10px;color:var(--red)}
.setup-badge{display:inline-block;padding:4px 7px;border-radius:5px;font-weight:900;cursor:help}.setup-hpt{background:#58e0ae;color:#07110f}.setup-lpt{background:#ffd166;color:#241a00}.setup-risky{background:#ff994d;color:#241000}.setup-no-trade{background:#ff6b78;color:#fff}
.trade-state,.trade-result{display:inline-block;min-width:58px;padding:4px 7px;border-radius:999px;text-align:center;font-size:10px;font-weight:900;letter-spacing:.04em}.state-open{background:#2f80ed;color:#fff}.state-closed{background:#596579;color:#fff}.result-win{background:#16c784;color:#04140d}.result-loss{background:#ef476f;color:#fff}.result-even{background:#ffd166;color:#241a00}.result-pending{color:var(--muted);border:1px solid var(--line)}
.side-long::before{content:"↑ ";}.side-short::before{content:"↓ ";}.setup-hpt::before{content:"◆ ";}.setup-lpt::before{content:"◇ ";}.setup-risky::before{content:"⚠ ";}.setup-no-trade::before{content:"⊘ ";}.state-open::before{content:"● ";}.state-closed::before{content:"■ ";}.result-win::before{content:"✓ ";}.result-loss::before{content:"✕ ";}.result-even::before{content:"= ";}.result-pending::before{content:"⏳ ";}
@media (max-width:1100px) { .workspace-grid { grid-template-columns:1fr; } }
@media (max-width:700px) { main { width:min(100% - 20px,1180px); padding-top:24px; } header { align-items:flex-start; flex-direction:column; } .status-card { width:100%; } .metrics { grid-template-columns:1fr 1fr; } .levels-editor{grid-template-columns:1fr;} }
.model-rule{margin:5px 0;color:#f4c95d;font-size:11px;line-height:1.25}
.model-rule strong{color:#39d98a}
.setup-calculation{display:block;max-width:230px;margin-top:4px;color:var(--muted);font-size:9px;line-height:1.25;white-space:normal}
.moneyness-badge{display:inline-block;margin-top:3px;padding:1px 5px;border-radius:999px;font-size:7px;line-height:12px;font-weight:900;letter-spacing:.07em}
.moneyness-atm{background:#ffd166;color:#251900}.moneyness-itm{background:#2dd4bf;color:#03211c}.moneyness-otm{background:#334155;color:#dbe7f5}
.moneyness-edge{box-shadow:inset 0 0 0 0 transparent}.moneyness-edge-itm{box-shadow:inset 3px 0 0 #2dd4bf}.moneyness-edge-atm{box-shadow:inset 3px 0 0 #ffd166}.moneyness-edge-otm{box-shadow:inset 3px 0 0 #64748b}
.rules-toggle{position:fixed;left:0;top:46%;z-index:89;padding:12px 7px;border-radius:0 9px 9px 0;background:#117a49;color:#fff;border-color:#36c87e;writing-mode:vertical-rl;letter-spacing:.08em;text-transform:uppercase;font-size:10px;font-weight:900;box-shadow:0 5px 20px #0008}
.rules-backdrop{position:fixed;inset:0;z-index:90;background:#0009;backdrop-filter:blur(2px)}
.rules-panel{position:fixed;left:0;top:0;bottom:0;z-index:91;width:min(560px,92vw);margin:0;padding:18px;border:0;border-right:1px solid var(--line);border-radius:0 18px 18px 0;background:var(--panel);overflow:auto;transform:translateX(-102%);transition:transform .22s ease;box-shadow:18px 0 45px #000b}
.rules-panel.open{transform:translateX(0)}
.rules-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.rules-heading h2{margin:0}.rules-heading-actions{display:flex;align-items:center;gap:8px}.rules-heading-actions>span{padding:6px 10px;border:1px solid #247a50;border-radius:999px;color:var(--mint);font-size:11px;font-weight:800}.rules-heading-actions button{width:31px;height:31px;padding:0;font-size:20px;line-height:1}
.symbol-legend{margin-bottom:12px;padding:12px 13px;border:1px solid #27513f;border-radius:11px;background:linear-gradient(145deg,#0c1b16,#09120f)}
.symbol-legend h3{margin:0 0 9px;color:var(--mint);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.symbol-legend-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px 12px;color:var(--muted);font-size:10px}
.symbol-legend-grid span{display:flex;align-items:center;gap:7px;min-width:0}
.symbol-legend-grid b{display:inline-grid;place-items:center;width:20px;height:20px;flex:0 0 20px;border-radius:5px;background:var(--surface);font-size:13px}
.symbol-long,.symbol-win,.symbol-entry,.symbol-hpt{color:var(--mint)}.symbol-short,.symbol-loss,.symbol-exit{color:var(--red)}.symbol-open{color:#4f9dff}.symbol-closed{color:#8995a8}.symbol-lpt{color:var(--gold)}.symbol-risky{color:#ff994d}.symbol-no-trade{color:#ff6b78}
.rules-grid{display:grid;grid-template-columns:1fr;gap:10px}
.rules-grid article{padding:13px 14px;border:1px solid #1a3c31;border-radius:11px;background:linear-gradient(145deg,#0b1713,#09110f)}
.rules-grid h3{margin:0 0 8px;color:var(--ink);font-size:13px}.rules-grid ul{margin:0;padding-left:17px;color:var(--muted);font-size:11px;line-height:1.45}.rules-grid li+li{margin-top:5px}
.rule-risky{color:#ff994d}.rule-lpt{color:#ffd166}.rule-hpt{color:#58e0ae}
.rules-warning{margin:12px 0 0;padding:9px 11px;border-left:3px solid #ffd166;background:#2a210b;color:#e6c96f;font-size:10px;line-height:1.4}
@media (max-width:700px){.rules-panel{width:94vw}.rules-toggle{top:42%}}
.analysis-toggle{position:fixed;right:0;top:46%;z-index:89;padding:12px 7px;border-radius:9px 0 0 9px;background:#2457a7;color:#fff;border-color:#5d91e9;writing-mode:vertical-rl;letter-spacing:.08em;text-transform:uppercase;font-size:10px;font-weight:900;box-shadow:0 5px 20px #0008}
.analysis-backdrop{position:fixed;inset:0;z-index:92;background:#0009;backdrop-filter:blur(2px)}
.analysis-panel{position:fixed;right:0;top:0;bottom:0;z-index:93;width:min(590px,94vw);padding:18px;border-left:1px solid #345d9e;border-radius:18px 0 0 18px;background:var(--panel);overflow:auto;transform:translateX(102%);transition:transform .22s ease;box-shadow:-18px 0 45px #000b}
.analysis-panel.open{transform:translateX(0)}.analysis-heading{display:flex;align-items:center;justify-content:space-between;gap:15px}.analysis-heading h2{margin:0}.analysis-heading>button{width:32px;height:32px;padding:0;font-size:20px}
.analysis-note{padding:10px;border-left:3px solid #5d91e9;background:#0d1a2d;color:var(--muted);font-size:11px;line-height:1.45}.analysis-run{width:100%;margin:3px 0 12px;background:#2457a7;border-color:#5d91e9}
.analysis-summary{margin-bottom:10px;padding:9px 10px;border:1px solid #294d84;border-radius:9px;color:#a9c9ff;background:#0a1627;font-size:11px}.analysis-results{display:grid;gap:9px}
.analysis-card{padding:11px;border:1px solid #24436f;border-radius:10px;background:#0a151f}.analysis-card h3{display:flex;justify-content:space-between;gap:10px;margin:0 0 7px;font-size:13px}.analysis-card ul{margin:0;padding-left:17px;color:var(--muted);font-size:11px;line-height:1.5}.analysis-card .analysis-long{color:#58e0ae}.analysis-card .analysis-short{color:#ff7180}.analysis-card .analysis-setup{color:#ffd166}
.analysis-pnl{margin-top:14px;padding-top:12px;border-top:1px solid #294d84}.analysis-pnl-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.analysis-pnl-head h3{margin:0;font-size:14px}.analysis-pnl-head strong{color:#58e0ae}.analysis-pnl-stats{margin:7px 0;color:#a9c9ff;font-size:10px}.analysis-pnl-wrap{overflow:auto;border:1px solid #24436f;border-radius:9px}.analysis-pnl table{width:100%;min-width:1120px;font-size:10px}.analysis-pnl th,.analysis-pnl td{padding:7px 6px;white-space:nowrap}.analysis-win{color:#58e0ae;font-weight:900}.analysis-loss{color:#ff7180;font-weight:900}.analysis-open{color:#ffd166;font-weight:900}
@media (max-width:700px){.analysis-panel{width:96vw}.analysis-toggle{top:42%}}