:root {
  --bg:#0a0c10;--bg2:#0f1217;--bg3:#141820;--bg4:#1a1f2e;
  --border:#1e2535;--border2:#252d3d;
  --text:#e2e8f0;--text2:#8896b0;--text3:#4a5568;
  --accent:#3b82f6;--accent2:#60a5fa;
  --green:#10b981;--green2:#34d399;
  --red:#ef4444;--red2:#f87171;
  --yellow:#f59e0b;--purple:#8b5cf6;--cyan:#06b6d4;
  --font-mono:'Open Sans',sans-serif;
  --font:'Open Sans',sans-serif;
  --r:6px;
}
html.light {
  --bg:#ffffff;--bg2:#f8fafc;--bg3:#f1f5f9;--bg4:#e2eaf5;
  --border:#e2e8f0;--border2:#cbd5e1;
  --text:#0f172a;--text2:#334155;--text3:#94a3b8;
  --accent:#2563eb;--accent2:#3b82f6;
  --green:#059669;--green2:#10b981;
  --red:#dc2626;--red2:#ef4444;
  --yellow:#d97706;--purple:#7c3aed;--cyan:#0891b2;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{background:var(--bg);color:var(--text);font-family:var(--font);height:100vh;min-height:0;display:flex;flex-direction:column;overflow:hidden;user-select:none;}

/* TOP BAR */
.topbar{display:flex;align-items:center;background:var(--bg2);border-bottom:1px solid var(--border);padding:0 14px;height:50px;flex-shrink:0;gap:0;}
.logo{font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--accent2);letter-spacing:.08em;margin-right:20px;}
.logo span{color:var(--text3);}
.sym-block{display:flex;align-items:center;gap:8px;padding:0 16px;height:100%;border-right:1px solid var(--border);}
.sym-name{font-family:var(--font-mono);font-size:15px;font-weight:700;color:var(--text);}
.xbadge{font-size:9px;font-weight:600;background:var(--bg4);border:1px solid var(--border2);color:var(--text2);padding:2px 6px;border-radius:3px;}
.price-block{display:flex;align-items:center;gap:10px;padding:0 18px;border-right:1px solid var(--border);height:100%;}
.price-cur{font-family:var(--font-mono);font-size:22px;font-weight:700;transition:color .3s;}
.price-chg{font-size:11px;font-weight:600;padding:2px 8px;border-radius:4px;font-family:var(--font-mono);}
.price-chg.pos{color:var(--green);background:rgba(16,185,129,.12);}
.price-chg.neg{color:var(--red2);background:rgba(239,68,68,.12);}
.ohlc-row{display:flex;gap:16px;padding:0 16px;height:100%;align-items:center;border-right:1px solid var(--border);}
.ohlc-item{display:flex;flex-direction:column;gap:2px;}
.ohlc-lbl{font-size:9px;color:var(--text3);font-weight:700;letter-spacing:.08em;text-transform:uppercase;}
.ohlc-v{font-size:11px;font-family:var(--font-mono);color:var(--text2);}
.tbr{margin-left:auto;display:flex;align-items:center;gap:8px;}

/* STATUS BADGE */
.ws-badge{display:flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--r);border:1px solid;font-size:11px;font-weight:600;font-family:var(--font-mono);letter-spacing:.04em;transition:all .3s;}
.ws-badge.connecting{border-color:var(--yellow);color:var(--yellow);background:rgba(245,158,11,.1);}
.ws-badge.connected{border-color:var(--green);color:var(--green2);background:rgba(16,185,129,.1);}
.ws-badge.error{border-color:var(--red);color:var(--red2);background:rgba(239,68,68,.1);}
.ws-dot{width:7px;height:7px;border-radius:50%;background:currentColor;}
.ws-dot.pulse{animation:pulse 1.2s infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.2}}

/* TOOLBAR */
.toolbar{display:flex;align-items:center;gap:2px;background:var(--bg2);border-bottom:1px solid var(--border);padding:5px 10px;flex-shrink:0;overflow-x:auto;scrollbar-width:none;}
.toolbar::-webkit-scrollbar{display:none;}
.tg{display:flex;align-items:center;gap:2px;padding-right:10px;margin-right:8px;border-right:1px solid var(--border);}
.tg:last-child{border:none;padding:0;margin:0;}
.tlbl{font-size:9px;color:var(--text3);font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-right:4px;white-space:nowrap;}
.tbtn{display:flex;align-items:center;gap:5px;padding:5px 9px;background:transparent;border:1px solid transparent;border-radius:var(--r);color:var(--text2);cursor:pointer;font-size:11px;font-family:var(--font);font-weight:500;white-space:nowrap;transition:all .15s;}
.tbtn:hover{background:var(--bg4);border-color:var(--border2);color:var(--text);}
.tbtn.on{background:rgba(59,130,246,.12);border-color:rgba(59,130,246,.4);color:var(--accent2);}
.tbtn.g:hover{background:rgba(16,185,129,.1);border-color:rgba(16,185,129,.3);color:var(--green2);}
.tbtn.r:hover{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.3);color:var(--red2);}
.tf{padding:4px 8px;background:transparent;border:1px solid transparent;border-radius:4px;color:var(--text3);font-family:var(--font-mono);font-size:10px;font-weight:700;cursor:pointer;transition:all .15s;}
.tf:hover{color:var(--text2);background:var(--bg4);}
.tf.on{color:var(--accent2);background:rgba(59,130,246,.12);border-color:rgba(59,130,246,.3);}
.dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}

/* OVERLAY DROPDOWN */
.ov-drop{display:none;position:fixed;z-index:400;
  background:var(--bg3);border:1px solid var(--border2);border-radius:var(--r);
  padding:6px 4px;min-width:140px;box-shadow:0 8px 24px rgba(0,0,0,.4);}
.ov-drop.open{display:flex;flex-direction:column;gap:1px;}
.ov-item{display:flex;align-items:center;gap:7px;padding:5px 8px;border-radius:4px;
  font-size:11px;color:var(--text2);cursor:pointer;white-space:nowrap;user-select:none;}
.ov-item:hover{background:var(--bg4);}
.ov-item input[type=checkbox],.ov-item input[type=radio]{accent-color:var(--accent2);width:12px;height:12px;cursor:pointer;flex-shrink:0;}
.ov-item-disabled{opacity:.45;cursor:not-allowed;}
.ov-item-disabled:hover{background:transparent;}
.ov-item-oi{justify-content:space-between;cursor:default;}
.ov-item-oi:hover{background:transparent;}
.oi-lay-btns{display:flex;gap:3px;margin-left:auto;}
.oi-lay-btn{display:flex;align-items:center;justify-content:center;width:22px;height:18px;background:var(--bg4);border:1px solid var(--border2);border-radius:3px;color:var(--text3);cursor:pointer;padding:2px;}
.oi-lay-btn svg{width:14px;height:10px;}
.oi-lay-btn:hover{background:var(--bg3);color:var(--text2);}
.oi-lay-btn.on{background:rgba(99,102,241,.2);border-color:var(--accent2);color:var(--accent2);}
.ov-item-disabled input{cursor:not-allowed;}
.ov-soon{font-size:9px;color:var(--text3);background:var(--bg4);border:1px solid var(--border);
  border-radius:3px;padding:1px 4px;margin-left:auto;}

/* MAIN */
.main{display:flex;flex:1;overflow:hidden;}

/* LEFT SIDEBAR */
.sl{width:42px;background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:center;padding:8px 4px;gap:3px;flex-shrink:0;}
.sbtn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid transparent;border-radius:var(--r);color:var(--text3);cursor:pointer;transition:all .15s;font-size:13px;}
.sbtn:hover{background:var(--bg4);border-color:var(--border2);color:var(--text);}
.sbtn.on{background:rgba(59,130,246,.15);border-color:var(--accent);color:var(--accent2);}
.ssep{width:24px;height:1px;background:var(--border);margin:4px 0;}

/* CHART */
.chart-wrap{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative;}
.chart-cont{flex:1;position:relative;overflow:hidden;}
canvas{display:block;position:absolute;top:0;left:0;}
.ind-panel{height:110px;border-top:1px solid var(--border);position:relative;flex-shrink:0;}
.ind-resizer{height:4px;background:transparent;cursor:ns-resize;flex-shrink:0;position:relative;z-index:10;}
.ind-resizer:hover,.ind-resizer.dragging{background:var(--accent);}
.ind-resizer::after{content:'';position:absolute;left:50%;transform:translateX(-50%);top:0;width:32px;height:4px;border-radius:2px;}
.plbl{position:absolute;top:6px;left:10px;font-size:10px;font-family:var(--font-mono);color:var(--text3);font-weight:700;z-index:2;display:flex;align-items:center;gap:8px;}
.chi{position:absolute;top:8px;right:8px;background:rgba(10,12,16,.9);border:1px solid var(--border2);border-radius:4px;padding:5px 10px;font-size:10px;font-family:var(--font-mono);color:var(--text2);pointer-events:none;z-index:10;display:none;}

/* RIGHT SIDEBAR */
.sr{width:200px;background:var(--bg2);border-left:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;overflow:hidden;transition:width .2s;}
.sr.collapsed{width:0;border-left:none;}
.srs{border-bottom:1px solid var(--border);padding:10px 12px;}
.srt{font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text3);margin-bottom:8px;}
.itog{display:flex;align-items:center;justify-content:space-between;padding:4px 0;cursor:pointer;}
.iname{font-size:11px;color:var(--text2);display:flex;align-items:center;gap:6px;}
.iname::before{content:'';width:8px;height:2px;border-radius:1px;background:currentColor;display:block;}
.iname.ma{color:var(--yellow);}.iname.ema{color:var(--cyan);}.iname.bb{color:var(--purple);}.iname.vwap{color:#fb923c;}.iname.rsi{color:var(--green2);}.iname.macd{color:var(--accent2);}
.tog{width:26px;height:14px;background:var(--bg4);border:1px solid var(--border2);border-radius:7px;position:relative;cursor:pointer;transition:background .2s;flex-shrink:0;}
.tog.on{background:var(--accent);border-color:var(--accent);}
.tog::after{content:'';position:absolute;width:10px;height:10px;background:white;border-radius:50%;top:1px;left:1px;transition:left .2s;box-shadow:0 1px 3px rgba(0,0,0,.4);}
.tog.on::after{left:13px;}
.srow{display:flex;justify-content:space-between;padding:3px 0;}
.sk{font-size:10px;color:var(--text3);}
.sv{font-size:10px;font-family:var(--font-mono);color:var(--text2);}
.sv.g{color:var(--green2);}.sv.r{color:var(--red2);}
.obtn{width:100%;padding:8px;border-radius:var(--r);border:1px solid;font-family:var(--font);font-size:12px;font-weight:600;cursor:pointer;margin-bottom:4px;transition:all .15s;}
.obtn.buy{background:rgba(16,185,129,.12);border-color:var(--green);color:var(--green2);}
.obtn.buy:hover{background:rgba(16,185,129,.22);}
.obtn.sell{background:rgba(239,68,68,.12);border-color:var(--red);color:var(--red2);}
.obtn.sell:hover{background:rgba(239,68,68,.22);}

/* LOG PANEL */
.log-panel{background:var(--bg2);border-top:1px solid var(--border);height:80px;overflow-y:auto;padding:6px 12px;flex-shrink:0;scrollbar-width:thin;scrollbar-color:var(--border2) transparent;display:none;}
.log-panel.visible{display:block;}
.log-entry{font-size:9px;font-family:var(--font-mono);color:var(--text3);line-height:1.8;border-bottom:1px solid rgba(255,255,255,.02);padding:1px 0;}
.log-entry.info{color:var(--accent2);}
.log-entry.success{color:var(--green2);}
.log-entry.error{color:var(--red2);}
.log-entry.tick{color:var(--text2);}
.log-entry.warn{color:var(--yellow);}

/* STATUS BAR */
.statusbar{height:22px;background:var(--bg2);border-top:1px solid var(--border);display:flex;align-items:center;gap:16px;padding:0 12px;flex-shrink:0;}
.sbi{font-size:9px;font-family:var(--font-mono);color:var(--text3);display:flex;align-items:center;gap:4px;}

/* FLASH */
@keyframes fadeFlash{0%{opacity:0;transform:translateX(-50%) translateY(10px)}10%{opacity:1;transform:translateX(-50%) translateY(0)}80%{opacity:1}100%{opacity:0;transform:translateX(-50%) translateY(-6px)}}
@keyframes fadeFlash2{0%{opacity:0}10%{opacity:1}80%{opacity:1}100%{opacity:0}}

/* CONNECT OVERLAY */
.overlay{position:fixed;inset:0;background:rgba(10,12,16,.92);display:flex;align-items:center;justify-content:center;z-index:500;backdrop-filter:blur(4px);}
.overlay-card{background:var(--bg3);border:1px solid var(--border2);border-radius:12px;padding:32px 36px;max-width:420px;width:90%;text-align:center;}
.overlay-card h2{font-family:var(--font-mono);font-size:15px;color:var(--accent2);margin-bottom:8px;letter-spacing:.05em;}
.overlay-card p{font-size:12px;color:var(--text2);line-height:1.7;margin-bottom:20px;}
.overlay-card .conn-btn{padding:10px 24px;background:var(--accent);border:none;border-radius:var(--r);color:white;font-family:var(--font);font-size:13px;font-weight:600;cursor:pointer;transition:background .2s;}
.overlay-card .conn-btn:hover{background:var(--accent2);}
.overlay-card input{width:100%;padding:8px 12px;background:var(--bg4);border:1px solid var(--border2);border-radius:var(--r);color:var(--text);font-family:var(--font-mono);font-size:11px;margin-bottom:10px;outline:none;}
.overlay-card input:focus{border-color:var(--accent);}
.hash-display{background:var(--bg4);border:1px solid var(--border);border-radius:var(--r);padding:8px 10px;font-size:9px;font-family:var(--font-mono);color:var(--text3);word-break:break-all;text-align:left;margin-bottom:16px;}

/* SCRIP SEARCH */
.search-btn{display:flex;align-items:center;justify-content:center;width:30px;height:30px;background:transparent;border:1px solid transparent;border-radius:var(--r);color:var(--text2);cursor:pointer;transition:all .15s;font-size:14px;flex-shrink:0;}
.search-btn:hover{background:var(--bg4);border-color:var(--border2);color:var(--text);}
.search-panel{position:fixed;width:380px;background:var(--bg3);border:1px solid var(--border2);border-radius:8px;box-shadow:0 8px 32px rgba(0,0,0,.55);z-index:200;display:none;}
.search-panel.open{display:block;}
.search-input-wrap{display:flex;align-items:center;padding:10px 12px;gap:8px;border-bottom:1px solid var(--border);}
.search-input-wrap input{flex:1;background:transparent;border:none;outline:none;color:var(--text);font-family:var(--font-mono);font-size:12px;}
.search-input-wrap input::placeholder{color:var(--text3);}
.search-quick-btns{display:flex;gap:6px;padding:8px 12px;border-bottom:1px solid var(--border);}
.search-qbtn{padding:4px 10px;background:var(--bg4);border:1px solid var(--border2);border-radius:4px;color:var(--text3);font-family:var(--font-mono);font-size:10px;cursor:default;}
.search-qbtn[onclick]{cursor:pointer;color:var(--accent2);}
.search-qbtn[onclick]:not(.active):hover{background:var(--bg3);border-color:var(--accent);}
.search-qbtn.active{background:var(--accent);border-color:var(--accent);color:#fff;cursor:default;}
.search-results{max-height:320px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--border2) transparent;scrollbar-gutter:stable;}
/* Option chain — non-scrolling header area */
.oc-hdr{display:flex;align-items:center;gap:8px;padding:8px 10px 4px;}
.oc-sym{font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--text2);}
.oc-expiry{background:var(--bg4);border:1px solid var(--border2);border-radius:4px;color:var(--text2);font-family:var(--font-mono);font-size:10px;padding:2px 6px;cursor:pointer;outline:none;}
/* Shared table styles — fixed col widths keep thead/tbody aligned */
.oc-table{width:100%;border-collapse:separate;border-spacing:0;font-family:var(--font-mono);font-size:10px;}
.oc-table thead th{position:sticky;top:0;z-index:1;padding:4px 6px;font-size:9px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;}
.oc-table thead tr:last-child th{box-shadow:0 1px 0 var(--border);}
.oc-th-call{background:rgba(34,211,238,.15);color:rgba(34,211,238,.9);text-align:center;}
.oc-th-put{background:rgba(244,114,182,.15);color:rgba(244,114,182,.9);text-align:center;}
.oc-th-strike{background:var(--bg3);color:var(--text3);text-align:center;}
.oc-table tbody tr:hover{background:var(--bg4);}
.oc-table tbody td{padding:3px 6px;text-align:right;border-bottom:1px solid var(--border);border-right:1px solid var(--border);color:var(--text2);}
.oc-table tbody td:first-child{border-left:1px solid var(--border);}
.oc-table thead th{border-right:1px solid var(--border);}
.oc-table thead th:first-child{border-left:1px solid var(--border);}
.oc-td-call{background:transparent;}
.oc-td-put{background:transparent;}
.oc-clickable{cursor:pointer;}
.oc-clickable:hover{background:var(--bg4);opacity:.85;}
.oc-table tbody td.oc-td-strike{text-align:center;color:var(--text);font-weight:600;background:var(--bg3);}
.search-result-item{padding:10px 14px;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.04);transition:background .1s;}
.search-result-item:hover{background:var(--bg4);}
.search-result-item:last-child{border-bottom:none;}
.sri-name{font-size:12px;font-family:var(--font-mono);color:var(--text);font-weight:600;}
.sri-meta{font-size:10px;color:var(--text3);margin-top:2px;}
.search-empty{padding:20px;text-align:center;font-size:11px;color:var(--text3);font-family:var(--font-mono);}

/* LAYOUTS */
.chart-area{flex:1;display:flex;flex-direction:column;overflow:hidden;}
.layout-cont{flex:1;display:grid;gap:1px;background:var(--border);overflow:hidden;}
.layout-1  {grid-template-columns:1fr;grid-template-rows:1fr;}
.layout-2h {grid-template-columns:1fr 1fr;grid-template-rows:1fr;}
.layout-2v {grid-template-columns:1fr;grid-template-rows:1fr 1fr;}
.layout-3l {grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;}
.layout-3r {grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;}
.layout-3t {grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;}
.layout-4  {grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;}
.cpane{display:flex;flex-direction:column;overflow:hidden;background:var(--bg);position:relative;}
.cpane.focused{outline:1px solid rgba(59,130,246,.5);outline-offset:-1px;z-index:1;}
.cpane-chart{flex:1;position:relative;overflow:hidden;}
.cpane-chart canvas{display:block;position:absolute;top:0;left:0;}
.cpane-chi{position:absolute;top:8px;right:8px;background:rgba(10,12,16,.9);border:1px solid var(--border2);border-radius:4px;padding:5px 10px;font-size:10px;font-family:var(--font-mono);color:var(--text2);pointer-events:none;z-index:10;display:none;}
.cpane-ind{border-top:1px solid var(--border);position:relative;flex-shrink:0;height:110px;}
.cpane-ind canvas{display:block;position:absolute;top:0;left:0;}
.cpane-resizer{height:4px;background:transparent;cursor:ns-resize;flex-shrink:0;position:relative;z-index:5;}
.cpane-resizer:hover,.cpane-resizer.dragging{background:var(--accent);}
.cpane-plbl{position:absolute;top:6px;left:10px;font-size:10px;font-family:var(--font-mono);color:var(--text3);font-weight:700;z-index:2;display:flex;align-items:center;gap:8px;}
.cpane-hdr{display:flex;align-items:center;gap:6px;padding:3px 8px;background:var(--bg2);border-bottom:1px solid var(--border);flex-shrink:0;cursor:pointer;}
.cpane-hdr:hover{background:var(--bg3);}
.cpane-spot-fut-btn{margin-left:5px;padding:1px 7px;font-size:10px;font-weight:700;font-family:var(--font-mono);border-radius:3px;border:1px solid rgba(148,163,184,.4);background:rgba(148,163,184,.08);color:var(--text2);cursor:pointer;line-height:16px;flex-shrink:0;}
.cpane-spot-fut-btn:hover{background:rgba(148,163,184,.18);}
.cpane-bs-btn{margin-left:4px;padding:1px 8px;font-size:10px;font-weight:700;font-family:var(--font-mono);border-radius:3px;border:1px solid;cursor:pointer;line-height:16px;flex-shrink:0;}
.cpane-bs-btn+.cpane-bs-btn{margin-left:0;}
.cpane-buy-btn{background:rgba(16,185,129,.15);border-color:rgba(16,185,129,.6);color:#10b981;}
.cpane-buy-btn:hover{background:rgba(16,185,129,.3);}
.cpane-sell-btn{background:rgba(239,68,68,.15);border-color:rgba(239,68,68,.6);color:#ef4444;}
.cpane-sell-btn:hover{background:rgba(239,68,68,.3);}
.cpane-search-ico{width:12px;height:12px;color:var(--text3);flex-shrink:0;}
.cpane-sym{font-size:11px;font-family:var(--font-mono);font-weight:700;color:var(--text2);cursor:pointer;white-space:nowrap;}
.cpane-sym:hover{color:var(--text);}
.cpane-ltpgrp{display:flex;align-items:baseline;gap:3px;white-space:nowrap;}
.cpane-ltp{font-size:11px;font-family:var(--font-mono);font-weight:700;color:var(--text);}
.cpane-chg{font-size:9px;font-family:var(--font-mono);font-weight:600;}
.cpane-chg.pos{color:var(--green2);}
.cpane-chg.neg{color:var(--red2);}
.cpane-ohlcv{position:absolute;top:4px;left:8px;display:flex;align-items:center;gap:8px;pointer-events:none;z-index:5;}
.cpane-ohlcv span{font-size:10px;font-family:var(--font-mono);color:var(--text3);white-space:nowrap;}
.cpane-ohlcv span b{font-weight:400;color:var(--text2);}
.cpane-goto-latest{position:absolute;bottom:36px;right:76px;z-index:4;width:22px;height:22px;display:flex;align-items:center;justify-content:center;background:rgba(15,18,23,.75);border:1px solid var(--border2);border-radius:4px;color:var(--text3);cursor:pointer;font-size:13px;line-height:1;backdrop-filter:blur(4px);}
.cpane-goto-latest:hover{background:var(--bg4);color:var(--text);}
html.light .cpane-goto-latest{background:rgba(240,245,255,.85);color:var(--text3);}
.cpane-zoom{position:absolute;bottom:34px;left:8px;display:flex;gap:3px;z-index:3;}
.cpane-zbtn{width:22px;height:22px;display:flex;align-items:center;justify-content:center;background:rgba(15,18,23,.75);border:1px solid var(--border2);border-radius:4px;color:var(--text3);cursor:pointer;font-size:13px;line-height:1;backdrop-filter:blur(4px);position:relative;}
html.light .cpane-zbtn{background:rgba(240,245,255,.85);color:var(--text3);}
.cpane-zbtn:hover{background:var(--bg4);color:var(--text);}
.cpane-zbtn::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 5px);left:50%;transform:translateX(-50%);background:var(--bg4);border:1px solid var(--border2);color:var(--text2);font-size:10px;font-family:var(--font);white-space:nowrap;padding:3px 7px;border-radius:4px;pointer-events:none;opacity:0;transition:opacity .15s;}
.cpane-zbtn:hover::after{opacity:1;}

/* Layout picker */
.layout-picker-btn{display:flex;align-items:center;justify-content:center;width:30px;height:30px;background:transparent;border:1px solid transparent;border-radius:var(--r);color:var(--text2);cursor:pointer;font-size:16px;flex-shrink:0;transition:all .15s;}
.layout-picker-btn:hover{background:var(--bg4);border-color:var(--border2);color:var(--text);}
.layout-picker{position:fixed;width:200px;background:var(--bg3);border:1px solid var(--border2);border-radius:8px;box-shadow:0 8px 32px rgba(0,0,0,.55);z-index:300;display:none;padding:14px;}
.layout-picker.open{display:block;}
.lp-section{margin-bottom:12px;}
.lp-section:last-child{margin-bottom:0;}
.lp-stitle{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);margin-bottom:8px;}
.lp-row{display:flex;align-items:center;gap:5px;}
.lp-opt{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--border2);border-radius:4px;cursor:pointer;transition:all .15s;flex-shrink:0;}
.lp-opt:hover{background:var(--bg4);}
.lp-opt.on{background:rgba(59,130,246,.15);border-color:var(--accent);}
.lp-opt svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.5;color:var(--text2);}
.lp-opt.on svg{color:var(--accent2);}

/* THEME TOGGLE */
.theme-toggle{width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--border2);border-radius:var(--r);color:var(--text2);cursor:pointer;font-size:15px;line-height:1;transition:all .15s;flex-shrink:0;}
.theme-toggle:hover{background:var(--bg4);color:var(--text);}

/* LIGHT THEME — canvas chip override */
html.light .cpane-chi{background:rgba(248,250,252,.95);border-color:var(--border2);color:var(--text2);}
html.light .search-input-wrap input{color:var(--text);}
html.light .overlay{background:rgba(240,245,255,.92);}

/* ORDER MODAL */
.om-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:900;align-items:center;justify-content:center;}
.om-backdrop.open{display:flex;}
.om-card{background:var(--bg2);border:1px solid var(--border2);border-radius:8px;padding:20px;min-width:280px;max-width:340px;width:90%;box-shadow:0 8px 32px rgba(0,0,0,.5);}
.om-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;}
.om-title{font-size:14px;font-weight:700;font-family:var(--font-mono);}
.om-title.buy{color:#10b981;}
.om-title.sell{color:#ef4444;}
.om-close{background:none;border:none;color:var(--text3);font-size:20px;cursor:pointer;padding:0;line-height:1;}
.om-close:hover{color:var(--text);}
.om-exchange{font-size:10px;color:var(--text3);font-family:var(--font-mono);margin-bottom:14px;}
.om-row{display:flex;gap:12px;margin-bottom:16px;}
.om-field{flex:1;display:flex;flex-direction:column;gap:4px;}
.om-field label{font-size:10px;color:var(--text3);font-family:var(--font-mono);text-transform:uppercase;}
.om-qty{background:var(--bg4);border:1px solid var(--border2);border-radius:4px;color:var(--text);font-family:var(--font-mono);font-size:14px;font-weight:600;padding:6px 8px;width:100%;box-sizing:border-box;}
.om-qty:focus{outline:none;border-color:var(--accent2);}
.om-price-val{font-size:14px;font-weight:600;font-family:var(--font-mono);color:var(--text);padding:6px 0;}
.om-actions{display:flex;gap:8px;}
.om-cancel{flex:1;padding:8px;background:var(--bg4);border:1px solid var(--border2);border-radius:4px;color:var(--text2);font-size:12px;font-weight:600;cursor:pointer;}
.om-cancel:hover{background:var(--bg3);}
.om-confirm{flex:2;padding:8px;border:none;border-radius:4px;font-size:13px;font-weight:700;cursor:pointer;}
.om-confirm.buy{background:#10b981;color:#fff;}
.om-confirm.buy:hover{background:#059669;}
.om-confirm.sell{background:#ef4444;color:#fff;}
.om-confirm.sell:hover{background:#dc2626;}
.om-confirm:disabled{opacity:.5;cursor:not-allowed;}