:root{
  --bg:#0f0f0f; --panel:#0f0f0f; --panel2:#1e1e1e; --dialog:#1e1e1e; --border:#2e2e2e; --text:#dbdbdb; --muted:#8c8c8c;
  --accent:#2962ff; --accent-soft:rgba(41,98,255,.2); --up:#089981; --down:#f23645; --hover:#2a2a2a; --grid:#1c1c1c;
  --shadow:0 4px 24px rgba(0,0,0,.6);
}
:root[data-theme=light]{
  --bg:#ffffff; --panel:#ffffff; --panel2:#f0f3fa; --dialog:#ffffff; --border:#e0e3eb; --text:#131722; --muted:#6a6d78;
  --accent:#2962ff; --accent-soft:rgba(41,98,255,.12); --hover:#f0f3fa; --grid:#f0f3fa;
  --shadow:0 4px 24px rgba(19,23,34,.18);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font:13px/1.4 -apple-system,BlinkMacSystemFont,"Trebuchet MS",Roboto,Ubuntu,"Segoe UI",sans-serif;overflow:hidden}
[hidden]{display:none!important}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
input,select{font:inherit;color:var(--text)}
.muted{color:var(--muted)} .small{font-size:12px} .pad{padding:10px}
.up{color:var(--up)} .dn{color:var(--down)}
.grow{flex:1}
kbd{font:11px ui-monospace,Consolas,monospace;background:var(--panel2);border:1px solid var(--border);border-radius:4px;padding:1px 5px;white-space:nowrap}

/* top bar */
#top{height:46px;display:flex;align-items:center;gap:3px;padding:0 8px;border-bottom:1px solid var(--border);background:var(--panel);overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
#top::-webkit-scrollbar{display:none}
.brand{display:flex;align-items:center;gap:7px;font-weight:700;margin-right:4px;white-space:nowrap}
.brand svg{color:var(--accent)}
.sym{display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:6px;white-space:nowrap}
#symName{display:flex;align-items:center;gap:6px;font-weight:700;font-size:14px}
#symName small{font-weight:500;font-size:11px;color:var(--muted)}
.sym:hover,.tb:hover,.icon:hover,.seg button:hover{background:var(--hover)}
.sep{width:1px;height:22px;background:var(--border);margin:0 4px;flex:none}
.seg{display:flex;gap:1px}
.seg button{padding:5px 7px;border-radius:5px;color:var(--muted);font-weight:600;white-space:nowrap}
.seg button.on{color:var(--accent);background:var(--accent-soft)}
.tb{display:flex;align-items:center;gap:6px;padding:6px 9px;border-radius:6px;white-space:nowrap}
.icon{width:32px;height:32px;display:grid;place-items:center;border-radius:6px;flex:none}
.icon.sm{width:26px;height:26px}
.sel{background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:4px 6px;cursor:pointer;color:var(--text)}
.badge{width:18px;height:18px;border-radius:50%;display:inline-grid;place-items:center;font-size:10px;font-weight:700;color:#fff;background:#546e7a;flex:none;object-fit:cover}
.badge.idx{background:#5c6bc0} .badge.econ{background:#8d6e63} .badge.expr{background:#00897b}

/* layout */
#app{display:flex;height:calc(100% - 46px);position:relative}
#tools{width:52px;flex:none;border-right:1px solid var(--border);background:var(--panel);display:flex;flex-direction:column;align-items:center;padding:8px 0;gap:4px;overflow-y:auto;scrollbar-width:none}
#tools::-webkit-scrollbar{display:none}
#tools button{width:40px;height:38px;border-radius:6px;display:grid;place-items:center;color:var(--text);opacity:.82;flex:none}
#tools button:hover{background:var(--hover);opacity:1}
#tools .tmain.on{opacity:1;background:var(--panel2);box-shadow:inset 0 0 0 1px var(--border)}
#tools [data-tg].on{color:var(--accent);background:var(--accent-soft);box-shadow:none}
#tools hr{width:30px;border:0;border-top:1px solid var(--border);margin:6px 0;flex:none}
.tgrp{position:relative;flex:none;display:flex}
#tools .tgrp .tmain{width:40px;height:38px}
#tools .tgrp .tmore{position:absolute;right:-5px;top:0;bottom:0;margin:auto;width:9px;height:18px;border-radius:3px;opacity:0;background:none}
#tools .tgrp:hover .tmore{opacity:.75}
#tools .tgrp .tmore::after{content:"";position:absolute;right:2px;top:50%;margin-top:-4px;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:4px solid currentColor}
#tools .tgrp .tmore:hover{background:var(--hover);color:var(--accent)}

.emoIc{font-size:17px;line-height:1;font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif}
.flyPop{min-width:230px;padding:4px}
.flyRow{display:flex;align-items:center;gap:10px;width:100%;padding:6px 10px;border-radius:5px;text-align:left;color:var(--text)}
.flyRow:hover{background:var(--hover)}
.flyRow.on{color:var(--accent);background:var(--accent-soft)}
.flyRow span{flex:1;white-space:nowrap}
.flyRow kbd{font-size:10px;opacity:.75}
.emoGrid{display:grid;grid-template-columns:repeat(6,34px);gap:2px;padding:2px}
.emoGrid button{width:34px;height:34px;border-radius:6px;font-size:20px;font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif}
.emoGrid button:hover,.emoGrid button.on{background:var(--hover)}
/* only the plot cell (2nd cell of the first row) — the price/time axes keep their own resize cursors */
#mainWrap.cur-cross tr:first-child>td:nth-child(2) canvas,#panes.cur-cross tr:first-child>td:nth-child(2) canvas{cursor:var(--plus-cursor)!important}
#mainWrap.grabbing tr:first-child>td:nth-child(2) canvas,#mainWrap.grabbing #overlay{cursor:grabbing!important}
/* axes: drag to stretch, like TradingView */
#mainChart tr:first-child>td:nth-child(3) canvas,#panes tr:first-child>td:nth-child(3) canvas{cursor:ns-resize}
#mainChart tr:last-child>td:nth-child(2) canvas{cursor:ew-resize}
#mainWrap.cur-arrow canvas,#mainWrap.cur-arrow td{cursor:default!important}
#mainWrap.cur-dot canvas,#mainWrap.cur-dot td{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Ccircle cx='6' cy='6' r='3' fill='%234c8dff' stroke='white' stroke-width='1'/%3E%3C/svg%3E") 6 6,crosshair!important}
#mainWrap.cur-eraser canvas,#mainWrap.cur-eraser td{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='white' stroke='black' stroke-width='1.4'%3E%3Cpath d='M4 15l9-9 7 7-6 6H8z'/%3E%3C/svg%3E") 4 18,cell!important}
#center{flex:1;min-width:0;display:flex;flex-direction:column}
#mainWrap{position:relative;flex:1;min-height:140px}
#mainChart{position:absolute;inset:0}
#overlay{position:absolute;left:0;top:0;pointer-events:none;z-index:3;touch-action:none}
#legend,.pLegend{color:var(--chart-text,var(--text))}
#legend{position:absolute;left:10px;top:8px;z-index:4;pointer-events:none;font-size:12px;max-width:calc(100% - 110px)}
.l1{display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline}
#lgSym{font-weight:700;font-size:13px}
#lgOhlc span{font-variant-numeric:tabular-nums}
.lrow{display:flex;gap:7px;align-items:center;margin-top:2px;pointer-events:auto;width:max-content;max-width:100%;padding:1px 4px;border-radius:4px;border:1px solid transparent}
.lrow:hover{background:var(--panel);border-color:var(--border)}
.lrow.off>span:not(.dot){opacity:.45}
.lrow .v{font-variant-numeric:tabular-nums}
.lrow button{opacity:0;color:var(--muted);width:20px;height:20px;border-radius:4px;display:grid;place-items:center}
.lrow:hover button{opacity:1}
.lrow button:hover{background:var(--hover);color:var(--text)}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
#legend.fold #lgInd .lrow{display:none}
.lgFold{pointer-events:auto;display:flex;align-items:center;gap:3px;margin-top:3px;height:22px;min-width:24px;padding:0 5px;border:1px solid var(--border);border-radius:4px;background:var(--panel);color:var(--chart-text,var(--text));font-size:11px;justify-content:center}
.lgFold:hover{background:var(--hover)}
#drawBar{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:6;display:flex;flex-wrap:wrap;gap:4px;align-items:center;background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:4px 6px;box-shadow:var(--shadow);max-width:calc(100% - 20px)}
#drawBar .sw{width:18px;height:18px;border-radius:50%;border:2px solid transparent;box-shadow:inset 0 0 0 1px rgba(128,128,128,.4)}
#drawBar .sw.on{border-color:var(--text)}
#drawBar input[type=color]{width:24px;height:22px;border:0;background:none;padding:0;cursor:pointer}
#drawBar .sel{padding:2px 4px}
.db{padding:3px 8px;border-radius:5px;white-space:nowrap}
.db:hover{background:var(--hover)}
#replayBar{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);z-index:6;display:flex;gap:6px;align-items:center;background:var(--panel);border:1px solid #f0b90b;border-radius:10px;padding:6px 10px;box-shadow:var(--shadow);white-space:nowrap}
#loading{position:absolute;inset:0;display:grid;place-items:center;z-index:5;pointer-events:none}
.spin{width:28px;height:28px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#panes{flex:none;display:flex;flex-direction:column}
.pane{position:relative;height:140px;border-top:1px solid var(--border);flex:none}
.pane .pc{position:absolute;inset:0}
.pLegend{position:absolute;left:10px;top:4px;z-index:4;font-size:12px}
.paneGrip{position:absolute;left:0;right:0;top:-3px;height:7px;cursor:row-resize;z-index:5}
.paneGrip:hover{background:var(--accent-soft)}
#status{height:26px;flex:none;display:flex;align-items:center;gap:10px;padding:0 10px;border-top:1px solid var(--border);background:var(--panel);font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden}
#status a,#clock{color:var(--muted);text-decoration:none}
#status a:hover,#clock:hover{color:var(--text)}
#stDot{width:7px;height:7px;border-radius:50%;background:var(--muted);flex:none}
#stDot.live{background:var(--up)} #stDot.off{background:var(--down)}

/* side panel */
#side{width:300px;flex:none;border-left:1px solid var(--border);background:var(--panel);display:flex;flex-direction:column;min-height:0;position:relative}
#sideGrip{position:absolute;left:-4px;top:0;bottom:0;width:7px;cursor:ew-resize;z-index:6}
#sideGrip:hover,#sideGrip.on{background:linear-gradient(90deg,transparent 3px,var(--accent) 3px,var(--accent) 4px,transparent 4px)}
body.sideDrag,body.sideDrag *{cursor:ew-resize!important;user-select:none}
.wlRow .nm,.wlRow .nm b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hotCols span[data-sk]{cursor:pointer;user-select:none}
.hotCols span[data-sk]:hover{color:var(--text)}
.hotCols span.on{color:var(--text)}
.sideHead{display:flex;align-items:center;gap:2px;padding:8px 8px 6px 10px}
.sideHead .sel{max-width:160px;font-weight:600}
#side{--cLast:72px;--cChg:58px}
.wlCols,.wlRow{display:grid;grid-template-columns:minmax(0,1fr) var(--cLast) var(--cChg);align-items:center;gap:6px;padding:0 8px 0 10px;position:relative}
#side,#side *{scrollbar-width:none}
#side ::-webkit-scrollbar,#side::-webkit-scrollbar{display:none;width:0;height:0}
.wlCols span{position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wlCols span:has(.colGrip){overflow:visible}
.colGrip{position:absolute;left:-7px;top:-4px;bottom:-5px;width:8px;cursor:col-resize;z-index:2}
.colLine{position:absolute;width:1px;background:var(--accent);pointer-events:none;z-index:5;display:none}
body.colDrag,body.colDrag *{cursor:col-resize!important;user-select:none}
.wlRow .x{position:absolute;right:2px;top:50%;transform:translateY(-50%);width:18px;height:18px;border-radius:4px;background:var(--panel2)}
.wlCols{font-size:11px;color:var(--muted);padding-bottom:4px;border-bottom:1px solid var(--border)}
.wlCols span:nth-child(n+2),.wlRow .p,.wlRow .c{text-align:right;font-variant-numeric:tabular-nums}
#wl{overflow-y:auto;flex:1;min-height:80px}
.wlRow{height:36px;cursor:pointer;border-left:2px solid transparent}
.wlRow:hover{background:var(--hover)}
.wlRow.active{background:var(--accent-soft);border-left-color:var(--accent)}
.wlRow .s{display:flex;align-items:center;gap:7px;min-width:0}
.wlRow .nm{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.wlRow .nm b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wlRow .nm small{font-size:10px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wlRow .x,.wlSec .x{opacity:0;color:var(--muted);font-size:13px}
.wlRow:hover .x,.wlSec:hover .x{opacity:1}
.wlRow .x:hover,.wlSec .x:hover{color:var(--down)}
.wlSec{display:flex;justify-content:space-between;align-items:center;padding:8px 10px 3px 12px;font-size:11px;font-weight:700;letter-spacing:.6px;color:var(--muted);cursor:grab}
.dropT{box-shadow:inset 0 2px 0 var(--accent)}
.flashUp{animation:fu .6s} .flashDn{animation:fd .6s}
@keyframes fu{from{background:rgba(8,153,129,.3)}} @keyframes fd{from{background:rgba(242,54,69,.3)}}
#info{border-top:1px solid var(--border);padding:12px;max-height:46%;overflow-y:auto;flex:none}
.infoHead{display:flex;gap:8px;align-items:center}
.infoHead .badge{width:26px;height:26px;font-size:12px}
#info .big{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:6px}
#info .grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;margin-top:10px;font-size:12px}
#info .grid div span{display:block;color:var(--muted);font-size:11px}

/* popovers */
.pop{position:fixed;z-index:55;background:var(--dialog);border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow);padding:6px;max-height:70vh;overflow-y:auto}
.ivPop{width:250px}
.ivAdd{display:flex;gap:6px;margin-bottom:4px}
.ivAdd .inp{padding:6px 8px}
.ivRow{display:flex;align-items:center;justify-content:space-between;padding:5px 8px;border-radius:5px;cursor:pointer}
.ivRow:hover{background:var(--hover)} .ivRow.on{color:var(--accent)}
.ivRow span{flex:1}
.star{color:var(--muted);opacity:.5;padding:0 3px} .star.on{color:#f0b90b;opacity:1} .star:hover{opacity:1}
.menuPop{min-width:200px}
.mi{display:block;width:100%;text-align:left;padding:7px 10px;border-radius:5px}
.mi:hover{background:var(--hover)} .mi.dn{color:var(--down)}

/* modal */
.modalBg{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:50;display:flex;align-items:flex-start;justify-content:center;padding:50px 16px 16px}
.modal{background:var(--dialog);border:1px solid var(--border);border-radius:10px;width:min(560px,100%);max-height:calc(100vh - 70px);display:flex;flex-direction:column;box-shadow:var(--shadow)}
.modal.wide{width:min(760px,100%)}
.mHead{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--border);font-size:15px}
#mBody{padding:12px 14px;overflow-y:auto}
.inp{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:8px 10px;outline:none}
.inp:focus{border-color:var(--accent)}
.inp.sm{padding:4px 6px;width:90px}
.btn{background:var(--accent);color:#fff;border-radius:6px;padding:8px 14px;font-weight:600;white-space:nowrap}
.btn.ghost{background:var(--panel2);color:var(--text)}
.btn.sm{padding:4px 10px;font-weight:500}
.row{display:flex;gap:8px;align-items:center;margin-bottom:10px} .row.wrap{flex-wrap:wrap} .row0{display:flex;gap:6px;align-items:center}
.tabs{display:flex;gap:4px;align-items:center;margin:10px 0 6px;flex-wrap:wrap}
.tabs button{padding:5px 11px;border-radius:14px;color:var(--muted);border:1px solid var(--border)}
.tabs button.on{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
.slist{margin-top:4px}
.sItem{display:grid;grid-template-columns:22px minmax(90px,1fr) minmax(0,1.3fr) 92px 66px 62px;gap:8px;padding:7px 8px;border-radius:6px;cursor:pointer;align-items:center}
.sItem>span:nth-child(n+4){text-align:right;font-variant-numeric:tabular-nums}
.sItem .ex{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.sItem:hover,.sItem.sel{background:var(--hover)}
.sItem b{font-weight:600;overflow:hidden;text-overflow:ellipsis}
.sItem.direct b{color:var(--accent)}
.secT{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin:14px 0 6px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--border);border-radius:16px;padding:5px 11px;background:var(--bg)}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.indRow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px;border:1px solid var(--border);border-radius:8px;margin-bottom:6px}
.indRow.focus{border-color:var(--accent)}
.indRow .nm{font-weight:600;min-width:150px}
.indRow label{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--muted)}
.indRow input[type=number]{width:64px;background:var(--bg);border:1px solid var(--border);border-radius:5px;padding:4px 6px}
.indRow input[type=color],.fld input[type=color]{width:30px;height:24px;border:0;background:none;padding:0;cursor:pointer}
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px 18px}
.fld{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:30px}
.fld>span:first-child{color:var(--muted)}
.fld.chk{justify-content:flex-start}
.fld.chk span{color:var(--text)!important}
.alRow{display:flex;align-items:center;gap:10px;padding:8px 4px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.alRow .st{font-size:11px;padding:2px 7px;border-radius:10px;background:var(--panel2)}
.alRow .st.act{color:var(--up)}
.scHead,.scRow{display:grid;grid-template-columns:1fr 110px 80px 90px 30px;gap:8px;align-items:center;padding:6px 8px}
.scHead{font-size:11px;color:var(--muted);border-bottom:1px solid var(--border)}
.scHead span{cursor:pointer} .scHead span.on{color:var(--accent)}
.scHead span:nth-child(n+2),.scRow span{text-align:right;font-variant-numeric:tabular-nums}
.scList{max-height:52vh;overflow-y:auto}
.scRow{border-radius:6px;cursor:pointer} .scRow:hover{background:var(--hover)}
.keys{display:grid;gap:8px} .keys div{display:flex;justify-content:space-between;gap:16px}
#toasts{position:fixed;right:16px;bottom:40px;z-index:60;display:flex;flex-direction:column;gap:8px;max-width:min(380px,calc(100vw - 32px))}
.toast{background:var(--panel);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:8px;padding:10px 12px;box-shadow:var(--shadow);animation:tin .2s}
.toast.error{border-left-color:var(--down)} .toast.alert{border-left-color:#f0b90b}
@keyframes tin{from{transform:translateY(8px);opacity:0}}

/* footer controls */
.fsep{width:1px;height:14px;background:var(--border);flex:none}
.fseg button{padding:2px 6px;font-size:11.5px;font-weight:600}
.ficon{display:grid;place-items:center;width:24px;height:22px;border-radius:5px;color:var(--muted)}
.ficon:hover,.tg:hover{background:var(--hover);color:var(--text)}
.tg{padding:2px 7px;border-radius:5px;color:var(--muted);font-weight:600;font-size:11.5px}
.tg.on{color:var(--accent);background:var(--accent-soft)}
.credit{opacity:.7}

/* side tabs */
/* right icon rail (always visible; opens/closes the side panel) */
#rail{width:46px;flex:none;border-left:1px solid var(--border);background:var(--panel);display:flex;flex-direction:column;align-items:center;padding:6px 0;overflow-y:auto;scrollbar-width:none}
#rail::-webkit-scrollbar{display:none}
.sideTabs{display:flex;flex-direction:column;align-items:center;gap:4px}
.sideTabs button{width:36px;height:36px;border-radius:7px;display:grid;place-items:center;color:var(--muted);position:relative;flex:none}
.sideTabs button:hover{color:var(--text);background:var(--hover)}
.sideTabs button.on{color:var(--accent);background:var(--accent-soft)}
.sideTabs button.on::before{content:"";position:absolute;right:-5px;top:8px;bottom:8px;width:2px;border-radius:2px;background:var(--accent)}
#sideTabs{padding-bottom:8px;border-bottom:1px solid var(--border)}
.rbadge{position:absolute;top:1px;right:1px;min-width:15px;height:15px;padding:0 3px;border-radius:8px;background:var(--down);color:#fff;font-size:9.5px;font-weight:700;line-height:15px;text-align:center}
.sideBody{flex:1;min-height:0;display:flex;flex-direction:column;position:relative}
.sideBody.scroll{display:block;overflow-y:auto}
.pPad{padding:10px 12px}
.fcol{display:flex;flex-direction:column;gap:6px}
.row0 .inp{min-width:0}
.dwHead{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);padding:10px 12px 4px;border-top:1px solid var(--border)}
.dwHead:first-child{border-top:0}
.dwRow{display:flex;justify-content:space-between;padding:2px 12px;font-variant-numeric:tabular-nums}
.dwRow span{color:var(--muted)}
.obRow{display:flex;align-items:center;gap:6px;padding:4px 6px;border-radius:5px;cursor:pointer}
.obRow:hover,.obRow.sel{background:var(--hover)}
.obRow .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.obRow button{width:22px;height:22px;display:grid;place-items:center;border-radius:4px;color:var(--muted);font-size:11px}
.obRow button:hover{background:var(--panel2);color:var(--text)}
.obkHead,.obk{display:grid;grid-template-columns:1fr 1fr 1fr;padding:1px 12px;font-size:12px;font-variant-numeric:tabular-nums;position:relative}
.obkHead{color:var(--muted);font-size:11px;padding-top:6px;padding-bottom:3px}
.obkHead span:nth-child(n+2),.obk span:nth-child(n+2){text-align:right}
.obk i{position:absolute;right:0;top:1px;bottom:1px;opacity:.16}
.obk.ask i{background:var(--down)} .obk.bid i{background:var(--up)}
.obk.ask span:first-of-type{color:var(--down)} .obk.bid span:first-of-type{color:var(--up)}
.obk span{position:relative}
.obkMid{display:flex;justify-content:space-between;align-items:baseline;padding:6px 12px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin:3px 0;font-size:14px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;font-size:12px}
.grid2 span{display:block;color:var(--muted);font-size:11px}
.grid2 b{font-size:15px}
.seg2{display:flex;gap:4px;margin-bottom:8px}
.seg2 button{flex:1;padding:7px;border-radius:6px;background:var(--panel2);color:var(--muted);font-weight:600}
.seg2 button.on.buy{background:var(--up);color:#fff} .seg2 button.on.sell{background:var(--down);color:#fff}
.btn.buy{background:var(--up)} .btn.sell{background:var(--down)}
.ptRow{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--border);font-size:12px}
.ptRow>div:first-child{flex:1}
.ptRow .r{text-align:right}
.link{cursor:pointer} .link:hover{color:var(--accent)}
textarea.code{width:100%;height:280px;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:10px;font:12.5px/1.5 ui-monospace,Consolas,monospace;resize:vertical;outline:none;tab-size:2}
textarea.code:focus{border-color:var(--accent)}

/* layouts */
.lyGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.ly{width:40px;height:34px;display:grid;place-items:center;border-radius:6px;color:var(--muted)}
.ly:hover{background:var(--hover);color:var(--text)} .ly.on{color:var(--accent);background:var(--accent-soft)}
.lyPop{width:220px}
body.layoutMode #top,body.layoutMode #app{display:none}
#layoutRoot{position:fixed;inset:0;display:flex;flex-direction:column;background:var(--bg)}
#layoutBar{height:42px;flex:none;display:flex;align-items:center;gap:4px;padding:0 10px;background:var(--panel);border-bottom:1px solid var(--border);overflow-x:auto;white-space:nowrap}
#layoutBar .fld{min-height:0;margin-left:8px}
#layoutGrid{flex:1;display:grid;gap:3px;background:var(--border);min-height:0}
#layoutGrid iframe{width:100%;height:100%;border:0;background:var(--bg);outline:2px solid transparent;outline-offset:-2px}
#layoutGrid iframe.active{outline-color:var(--accent)}
.embed .brand,.embed .credit,.embed #fsBtn{display:none}
.embed #top{height:40px}
.embed #app{height:calc(100% - 40px)}

@media (max-width:1100px){ .tb .lbl{display:none} #symName small{display:none} }
@media (max-width:900px){
  #side{position:absolute;right:46px;top:0;bottom:0;z-index:20;box-shadow:var(--shadow);max-width:calc(100vw - 92px)}
  #side.closedM{display:none}
}
@media (min-width:901px){ #side.closedD{display:none} }
@media (max-width:760px){ #ranges,.credit,#clock{display:none} }
@media (max-width:600px){
  #tools{width:42px} #tools button,#tools .tgrp .tmain{width:34px;height:32px}
  #rail{width:40px} .sideTabs button{width:32px;height:32px}
  #side{right:40px;max-width:calc(100vw - 80px)}
  .pane{height:110px}
  .brand span{display:none}
  .sItem{grid-template-columns:22px 1fr 84px 60px}
  .sItem .ex,.sItem .vol{display:none}
  .scHead,.scRow{grid-template-columns:1fr 90px 70px 30px} .scHead span:nth-child(4),.scRow span:nth-child(4){display:none}
  #replayBar{bottom:10px}
}

#syncSt{font-size:11.5px}
#syncSt.synced{color:var(--up)} #syncSt.offline,#syncSt.signed{color:var(--down)}

/* right-click menus */
.ctxMenu{position:fixed;z-index:70;min-width:280px;max-width:420px;background:var(--dialog);border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow);padding:5px 0;font-size:13px;user-select:none}
.ctxRow{position:relative;display:flex;align-items:center;gap:12px;padding:7px 14px;cursor:pointer;white-space:nowrap}
.ctxRow:hover{background:var(--hover)}
.ctxRow>svg,.ctxRow>i{width:18px;height:18px;flex:none;color:var(--muted)}
.ctxRow span{flex:1;overflow:hidden;text-overflow:ellipsis}
.ctxRow kbd{background:none;border:0;color:var(--muted);font-size:11.5px;padding:0}
.ctxRow.dis{opacity:.45;cursor:default}
.ctxRow.dis:hover{background:none}
.ctxRow.dn span{color:var(--down)}
.ctxSep{height:1px;background:var(--border);margin:5px 0}
.ctxArrow{color:var(--muted);font-weight:400;font-size:16px}
.ctxSub{display:none;position:absolute;left:100%;top:-6px;min-width:220px;background:var(--dialog);border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow);padding:5px 0}
.ctxHasSub:hover>.ctxSub{display:block}
.subLeft .ctxSub{left:auto;right:100%}
.tvWrap{max-height:62vh;overflow:auto;border:1px solid var(--border);border-radius:6px}
.tvTable{width:100%;border-collapse:collapse;font-size:12px;font-variant-numeric:tabular-nums}
.tvTable th{position:sticky;top:0;background:var(--panel2);color:var(--muted);font-weight:600;text-align:right;padding:6px 10px}
.tvTable td{text-align:right;padding:4px 10px;border-top:1px solid var(--border)}
.tvTable th:first-child,.tvTable td:first-child{text-align:left}
.tvTable tr:hover td{background:var(--hover)}

/* floating drawing toolbar (TradingView style) */
#drawBar{gap:2px!important;padding:3px 4px!important;border-radius:6px!important;background:var(--dialog)!important;flex-wrap:nowrap!important}
.dbGrip{display:grid;place-items:center;width:18px;height:32px;color:var(--muted);cursor:grab}
.dbb{position:relative;display:grid;place-items:center;width:32px;height:32px;border-radius:4px;color:var(--text)}
.dbb:hover{background:var(--hover)}
.dbb.on{color:var(--accent)}
.dbCol{position:absolute;left:8px;right:8px;bottom:4px;height:3px;border-radius:1px;box-shadow:inset 0 0 0 1px rgba(128,128,128,.35)}
.dbW{width:auto;min-width:46px;padding:0 6px;display:flex;align-items:center;gap:6px}
.dbW i{display:block;width:16px;background:currentColor;border-radius:1px}
.dbW span{font-size:11px}
.dbSep{width:1px;height:22px;background:var(--border);margin:0 3px}
.wPrev{display:block;width:40px;background:currentColor;border-radius:1px}
/* colour palette */
.palPop{padding:10px;width:auto}
.palGrid{display:grid;grid-template-columns:repeat(10,20px);gap:3px}
.palSw{width:20px;height:20px;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(128,128,128,.25)}
.palSw:hover{transform:scale(1.15)}
.palSw.on{box-shadow:0 0 0 2px var(--dialog),0 0 0 3.5px var(--accent)}
.palFoot{display:flex;align-items:center;gap:8px;margin-top:10px;padding-top:8px;border-top:1px solid var(--border)}
.palCustom{position:relative;width:22px;height:22px;border:1px dashed var(--muted);border-radius:4px;display:grid;place-items:center;cursor:pointer;color:var(--muted)}
.palCustom input{position:absolute;inset:0;opacity:0;cursor:pointer}
.palA{flex:1;min-width:90px;accent-color:var(--accent)}
.palAv{font-size:11px;min-width:32px;text-align:right}
/* drawing settings dialog */
.modal.dsDlg{width:min(440px,100%)}
.dsDlg .mHead{border-bottom:0;padding-bottom:4px;font-size:17px}
.dsDlg #mBody{padding-top:0}
.dsTabs{display:flex;gap:20px;border-bottom:1px solid var(--border);margin-bottom:12px}
.dsTabs button{padding:8px 0;font-weight:600;color:var(--muted);border-bottom:3px solid transparent;margin-bottom:-1px}
.dsTabs button.on{color:var(--text);border-bottom-color:var(--text)}
.dsBody{min-height:170px;max-height:52vh;overflow-y:auto;padding-right:2px}
.dsRow{display:flex;align-items:center;gap:10px;min-height:38px}
.dsRow>span{flex:1;color:var(--text)}
.dsRow>span:empty{display:none}
.dsCtl{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.dsRow>span:empty+.dsCtl{justify-content:flex-start}
.dsIn{width:110px;padding:6px 8px}
.dsIn.wide{width:220px}
.dsDate{width:190px}
.dsSel{padding:6px 8px}
.dsText{width:100%;resize:vertical;margin-bottom:8px;font:inherit}
.dsChk{display:inline-flex;align-items:center;gap:7px;margin-right:12px;cursor:pointer}
.dsChk input,.dsLvl input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent)}
.swb{width:34px;height:30px;border:1px solid var(--border);border-radius:4px;display:grid;place-items:center;background:var(--bg)}
.swb i{display:block;width:20px;height:16px;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(128,128,128,.3)}
.dsLevels{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px}
.dsLvl{display:flex;align-items:center;gap:6px}
.dsLvl .dsIn{width:80px}
.dsFoot{display:flex;align-items:center;gap:8px;border-top:1px solid var(--border);margin:12px -14px -12px;padding:12px 14px}
.dsFoot .btn{min-width:72px}
.flyRow.dis{opacity:.45;pointer-events:none}

/* alerts list + editor */
.alRow{cursor:pointer;flex-wrap:nowrap!important;gap:8px!important}
.alRow:hover{background:var(--hover)}
.alDot{width:8px;height:8px;border-radius:50%;flex:none}
.alTxt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.alTxt b{font-weight:600}
.alTxt span{font-size:12px;overflow:hidden;text-overflow:ellipsis}
.alTxt .st{align-self:flex-start;margin-top:2px}
.alRow .st.paused{color:var(--muted)}
.alSym{display:inline-flex;align-items:center;gap:6px;font-weight:600}

/* Indicators dialog (TradingView layout) */
.modal.ixDlg{width:min(880px,100%);height:min(640px,calc(100vh - 70px))}
.ixDlg .mHead{border-bottom:0;font-size:18px;padding:16px 20px 8px}
.ixDlg #mBody{display:flex;flex-direction:column;padding:4px 20px 16px;overflow:hidden;flex:1;min-height:0}
.ixSearch{display:flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:6px;padding:0 10px;margin-bottom:12px;color:var(--muted)}
.ixSearch:focus-within{border-color:var(--accent)}
.ixSearch input{flex:1;border:0;background:none;outline:none;padding:10px 0;font-size:15px}
.ixMain{display:flex;gap:16px;flex:1;min-height:0}
.ixNav{width:200px;flex:none;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.ixSec{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin:10px 10px 6px}
.ixSec:first-child{margin-top:0}
.ixNav button{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:6px;text-align:left;color:var(--text)}
.ixNav button svg{color:var(--muted);flex:none}
.ixNav button:hover{background:var(--hover)}
.ixNav button.on{background:var(--panel2);font-weight:600}
.ixNav button.on svg{color:var(--text)}
.ixList{flex:1;min-width:0;overflow-y:auto}
.ixHead,.ixRow{display:grid;grid-template-columns:30px 1fr 170px;align-items:center;gap:4px}
.ixHead{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);padding:4px 8px 8px}
.ixRow{padding:5px 8px;border-radius:6px;cursor:pointer}
.ixRow:hover{background:var(--hover)}
.ixRow .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ixCat{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ixCat a{color:var(--accent);cursor:pointer}
.ixStar{width:26px;height:26px;display:grid;place-items:center;border-radius:4px;color:var(--muted);opacity:.5}
.ixRow:hover .ixStar{opacity:1}
.ixStar:hover{color:var(--text)}
.ixStar.on{opacity:1;color:#f7c600}
.ixStar.on svg{fill:currentColor}
.ixEmpty{text-align:center;color:var(--muted);padding:60px 20px}
.ixEmpty svg{width:36px;height:36px}
.ixList .indRow{margin-bottom:6px}
@media (max-width:640px){ .ixNav{width:auto} .ixMain{flex-direction:column} .ixNav{flex-direction:row;flex-wrap:wrap;max-height:120px} .ixSec{display:none} .ixHead,.ixRow{grid-template-columns:30px 1fr} .ixCat{display:none} }

/* ---------- tool flyout sections + favorites */
.flyPop{max-height:calc(100vh - 16px);overflow-y:auto}
.flySec{font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);padding:8px 10px 3px}
.flySec:first-child{padding-top:4px}
.flyStar{font-style:normal;color:var(--muted);opacity:0;font-size:13px;padding:0 2px;line-height:1}
.flyRow:hover .flyStar{opacity:.7}
.flyStar:hover{opacity:1!important;color:#f5a623}
.flyStar.on{opacity:1;color:#f5a623}
.favBar{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:6;display:flex;align-items:center;gap:1px;padding:2px;background:var(--panel2);border:1px solid var(--border);border-radius:6px;box-shadow:var(--shadow)}
.favBar button{display:grid;place-items:center;width:30px;height:30px;border-radius:5px;color:var(--text)}
.favBar button:hover{background:var(--hover)}
.favBar button.on{color:var(--accent);background:var(--accent-soft)}
.favGrip{width:8px;height:22px;cursor:grab;background-image:radial-gradient(var(--muted) 1px,transparent 1.2px);background-size:4px 4px;opacity:.6;margin:0 2px}

/* ---------- strategy tester */
.ftab{margin-right:4px}
.ftab.on{color:var(--accent);background:var(--accent-soft)}
#stratPanel{flex:none;display:flex;flex-direction:column;border-top:1px solid var(--border);background:var(--panel);min-height:140px;position:relative}
.spGrip{position:absolute;top:-4px;left:0;right:0;height:8px;cursor:ns-resize;z-index:3}
.spHead{display:flex;align-items:center;gap:10px;padding:5px 10px;border-bottom:1px solid var(--border)}
#spInfo{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spHead .icon{flex:none}
.spTitle{font-weight:600;white-space:nowrap}
#spSel{max-width:220px}
.spTabs{display:flex;gap:2px;flex:none;overflow-x:auto}
.spTabs button{padding:5px 10px;border-radius:5px;color:var(--muted);white-space:nowrap}
.spTabs button:hover{background:var(--hover);color:var(--text)}
.spTabs button.on{color:var(--text);background:var(--hover);box-shadow:inset 0 -2px 0 var(--accent)}
.spBody{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column}
.spPick{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px;padding:10px}
.spCard{display:flex;flex-direction:column;gap:4px;text-align:left;padding:10px 12px;border:1px solid var(--border);border-radius:8px}
.spCard:hover{border-color:var(--accent);background:var(--accent-soft)}
.spStats{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--border);flex:none}
.spStat{display:flex;flex-direction:column;padding:8px 14px;border-right:1px solid var(--border);min-width:120px}
.spStat b{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.spChartWrap{flex:1;min-height:90px;position:relative}
.spChartWrap canvas{position:absolute;inset:0}
.spTip{position:absolute;pointer-events:none;background:var(--panel2);border:1px solid var(--border);border-radius:6px;padding:6px 9px;font-size:11.5px;line-height:1.5;box-shadow:var(--shadow);white-space:nowrap;z-index:2}
.spLegend{display:flex;gap:16px;padding:4px 14px 6px;color:var(--muted);flex-wrap:wrap;flex:none}
.spLegend i{display:inline-block;width:10px;height:3px;border-radius:2px;margin-right:5px;vertical-align:middle}
.spTable{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:12.5px}
.spTable th{position:sticky;top:0;background:var(--panel);text-align:right;font-weight:500;color:var(--muted);padding:6px 12px;border-bottom:1px solid var(--border)}
.spTable td{text-align:right;padding:5px 12px;border-bottom:1px solid var(--border);white-space:nowrap}
.spTable th:first-child,.spTable td:first-child{text-align:left}
.spTable small{color:var(--muted);margin-left:4px}
.spTable td.up small,.spTable td.dn small{color:inherit;opacity:.8}
.spTrades td{border-bottom-color:transparent}
.spTrades tr.spT2 td{border-bottom:1px solid var(--border)}
.spTrades tr.spT1 td[rowspan]{border-bottom:1px solid var(--border)}
.spTrades tbody tr{cursor:pointer}
.spTrades tbody tr:hover td{background:var(--hover)}
.spTrades td:nth-child(2),.spTrades td:nth-child(3),.spTrades tr.spT2 td:nth-child(1),.spTrades tr.spT2 td:nth-child(2){text-align:left}
.spProps{display:grid;grid-template-columns:1fr 1fr;gap:6px 24px;padding:0 14px 10px}
.spGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px 12px}
.spF{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--muted)}
.spF .inp,.spF .sel{width:100%}
.spF .row{display:flex;gap:6px}
.spF .row .inp{width:80px}
.spChk{flex-direction:row;align-items:center;gap:7px;color:var(--text)}
.spCode{width:100%;min-height:150px;font:12px/1.5 ui-monospace,Consolas,monospace;resize:vertical;margin-bottom:6px}
@media (max-width:900px){ .spProps{grid-template-columns:1fr} .spStat{min-width:96px;padding:6px 10px} .spTitle{display:none} }

/* ---------- hotlists / technicals / heatmap */
.hotTabs{margin:8px 0 4px}
.hotLists{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.hotLists button{padding:4px 9px;border-radius:5px;color:var(--muted);font-size:12px}
.hotLists button:hover{background:var(--hover);color:var(--text)}
.hotLists button.on{color:var(--text);background:var(--hover)}
.hotRow .nm small.up{color:var(--up)} .hotRow .nm small.dn{color:var(--down)}
.hotRow .s{position:relative}
.hAdd{position:absolute;right:0;top:50%;transform:translateY(-50%);opacity:0;width:20px;height:20px;border-radius:4px;background:var(--panel2);color:var(--text);font-size:15px;line-height:1}
.hotRow:hover .hAdd{opacity:1}
.hAdd:hover{background:var(--accent);color:#fff}
.techIvs{margin:8px 0}
.techIvs button{padding:3px 8px;font-size:11.5px}
.techG{display:flex;flex-direction:column;align-items:center;text-align:center;color:var(--text);margin:6px 0}
.techG b{font-size:13px;margin-top:-2px}
.techG.big b{font-size:16px}
.techRow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px}
.techG{min-width:0}
.techG .muted{white-space:nowrap}
.techCnt{display:flex;gap:14px;font-size:11px;color:var(--muted);margin-top:4px}
.techCnt b{font-size:12.5px}
.techTbl{width:100%;border-collapse:collapse;font-size:11.5px}
.techTbl th{text-align:left;font-weight:500;color:var(--muted);padding:3px 2px;border-bottom:1px solid var(--border)}
.techTbl td{padding:4px 2px;border-bottom:1px solid var(--border)}
.techTbl td:nth-child(2),.techTbl th:nth-child(2){text-align:right;font-variant-numeric:tabular-nums}
.techTbl td:nth-child(3),.techTbl th:nth-child(3){text-align:right}
.modal.heatDlg{width:min(1100px,100%);height:calc(100vh - 70px)}
.modal.heatDlg #mBody{display:flex;flex-direction:column;flex:1;min-height:0}
.heatBar{gap:8px;flex-wrap:wrap;margin-bottom:8px}
.heatBox{position:relative;flex:1;min-height:300px;border-radius:6px;overflow:hidden;background:var(--panel2)}
.hmTile{position:absolute;box-sizing:border-box;border:1px solid var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;overflow:hidden;text-align:center;line-height:1.15;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.hmTile.link{cursor:pointer}
.hmTile.link:hover{filter:brightness(1.15);z-index:1;outline:2px solid #fff}
.hmTile span{font-size:12px;font-weight:600}
.hmTile small{font-size:10.5px;opacity:.85}

/* ---------- quick search */
.qsBg{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.35);display:flex;justify-content:center;align-items:flex-start;padding:70px 16px 16px}
.qsBox{width:min(620px,100%);max-height:calc(100vh - 100px);display:flex;flex-direction:column;background:var(--dialog);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);overflow:hidden}
.qsIn{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--border);color:var(--muted)}
.qsIn input{flex:1;border:0;outline:0;background:none;font-size:15px;color:var(--text)}
.qsList{overflow-y:auto;padding:4px}
.qsGrp{font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);padding:8px 10px 3px}
.qsRow{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:6px;cursor:pointer}
.qsRow span{flex:1}
.qsRow.on{background:var(--accent-soft)}
.qsFoot{display:flex;gap:16px;padding:7px 14px;border-top:1px solid var(--border)}

/* ---------- watchlist flags, layouts, alert log */
.wlFlag{flex:none;width:4px;height:18px;border-radius:2px;margin-left:-6px;background:transparent;cursor:pointer;font-style:normal;position:relative}
.wlFlag::after{content:'';position:absolute;inset:-4px -5px}
.wlRow:hover .wlFlag{background:var(--fc);opacity:.35}
.wlFlag.on,.wlRow:hover .wlFlag.on{background:var(--fc);opacity:1}
.lyBtn .lbl{max-width:140px;overflow:hidden;text-overflow:ellipsis}
.lyPop{min-width:250px}
.mi kbd{float:right;font-size:10px}
.lyRow{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:5px;cursor:pointer}
.lyRow:hover{background:var(--hover)}
.lyRow.on b{color:var(--accent)}
.lyRow span{flex:1;display:flex;flex-direction:column;min-width:0}
.lyRow small{font-size:10.5px}
.lyRow .x{opacity:0;color:var(--muted)}
.lyRow:hover .x{opacity:1}
.lyRow .x:hover{color:var(--down)}
.aLogRow{display:flex;flex-direction:column;padding:6px 0;border-bottom:1px solid var(--border);cursor:pointer;font-size:12px}
.aLogRow:hover{background:var(--hover)}
.lgTf{font-size:10px;font-weight:600;padding:0 4px;border-radius:3px;background:var(--accent-soft);color:var(--accent);margin-left:2px}

/* ---------- symbol search (TradingView style) */
.modal.symDlg{width:min(860px,100%);height:min(720px,calc(100vh - 70px))}
.modal.symDlg #mBody{display:flex;flex-direction:column;flex:1;min-height:0;padding-top:4px}
.ssBar{display:flex;align-items:center;gap:10px;padding:4px 4px 10px;color:var(--muted);border-bottom:1px solid var(--border)}
.ssBar input{flex:1;border:0;outline:0;background:none;font-size:17px;color:var(--text);min-width:0}
.ssFilters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 0}
.ssChips{display:flex;gap:6px;flex-wrap:wrap}
.ssChips button{padding:5px 12px;border-radius:16px;border:1px solid var(--border);color:var(--text);font-size:12.5px;white-space:nowrap}
.ssChips button:hover{background:var(--hover)}
.ssChips button.on{background:var(--text);color:var(--bg);border-color:var(--text)}
.ssSel{border-radius:16px;padding:4px 10px;font-size:12.5px}
.ssList{flex:1;min-height:0;overflow-y:auto;border-top:1px solid var(--border);margin:0 -14px;padding:2px 0}
.ssRow,.ssSub{display:grid;grid-template-columns:28px minmax(0,1fr) 120px 92px 52px 26px;align-items:center;gap:10px;padding:7px 14px;cursor:pointer}
.ssRow{min-height:52px;border-bottom:1px solid transparent}
.ssRow:hover,.ssSub:hover{background:var(--hover)}
.ssRow.sel,.ssSub.sel{background:var(--accent-soft)}
.ssRow .badge,.ssRow .coin{width:28px;height:28px;font-size:12px}
.ssMain{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.ssMain b{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ssMain small{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ssMain em{font-style:normal;color:#2962ff}
.ssTag{font-style:normal;font-size:9.5px;text-transform:uppercase;letter-spacing:.4px;background:var(--panel2);border:1px solid var(--border);border-radius:3px;padding:0 4px;margin-left:6px;color:var(--muted)}
.ssPx{display:flex;flex-direction:column;align-items:flex-end;font-variant-numeric:tabular-nums;font-size:12.5px;line-height:1.3}
.ssPx small{font-size:11px}
.ssEx{text-align:right;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ssMore{display:flex;align-items:center;gap:2px;justify-content:center;padding:3px 6px;border-radius:12px;border:1px solid var(--border);font-size:11.5px;color:var(--text);white-space:nowrap}
.ssMore:hover,.ssMore.on{background:var(--hover);border-color:var(--muted)}
.ssMore.on svg{transform:rotate(180deg)}
.ssSub{grid-template-columns:28px minmax(0,1fr) 120px 92px;padding-left:54px;background:var(--panel2);min-height:40px}
.ssSub .ssMain b{font-size:13px}
.ssVol{text-align:right;font-size:11.5px}
.exIco{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;font-style:normal;font-size:8.5px;font-weight:700;letter-spacing:-.3px;flex:none}
.ssSub .exIco{width:24px;height:24px}
.ssFoot{display:flex;justify-content:space-between;gap:12px;padding:8px 0 0;flex-wrap:wrap}
@media (max-width:700px){ .ssRow{grid-template-columns:28px minmax(0,1fr) 84px 44px 22px} .ssRow .ssEx{display:none} .ssSub{grid-template-columns:24px minmax(0,1fr) 84px;padding-left:20px} .ssSub .ssVol{display:none} }
.ssFutBtn{display:flex;align-items:center;gap:4px;border:1px solid var(--border);background:var(--panel2);color:var(--text);cursor:pointer}
.ssFutBtn b{font-weight:600;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.futPop{min-width:230px;padding:4px}
.futRow{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:5px;cursor:pointer}
.futRow:hover{background:var(--hover)}
.futRow span{flex:1}

/* chart type menu (TradingView style) */
#typeBtn svg{display:block}
.typePop{min-width:210px}
.popT{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;padding:6px 10px 3px}
.typeMi{display:flex!important;align-items:center;gap:10px;padding:4px 10px!important}
.typeMi.on{background:var(--accent-soft);color:var(--accent)}
.pop{scrollbar-width:thin;scrollbar-color:var(--border) transparent}
/* thin dark scrollbars everywhere (TradingView) */
*{scrollbar-width:thin;scrollbar-color:var(--border) transparent}
#side,#side *,#top,#tools{scrollbar-width:none}

/* ---------- alerts panel, TradingView style */
:root{--seg-on:#3a3a3a} :root[data-theme=light]{--seg-on:#ffffff}
.alHead{position:sticky;top:0;z-index:3;background:var(--panel);padding:10px 12px 4px}
.alTabs{display:flex;gap:2px;padding:3px;border-radius:8px;background:var(--panel2)}
.alTabs button{flex:1;padding:6px 0;border-radius:6px;font-weight:600;color:var(--muted)}
.alTabs button:hover{color:var(--text)}
.alTabs button.on{background:var(--seg-on);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.25)}
.alBar{display:flex;align-items:center;gap:2px;margin-top:6px}
.alBar .icon{color:var(--text);width:32px;height:32px;display:flex;align-items:center;justify-content:center}
#aSearch{width:100%;margin:4px 0 6px}
.alPad{padding:0!important}
#alertsPane .alRow{position:relative;display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--border);cursor:pointer;flex-wrap:nowrap}
#alertsPane .alRow:hover,#alertsPane .alRow.cur:hover{background:var(--hover)}
#alertsPane .alRow.cur{background:var(--panel2)}
#alertsPane .alTxt{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
#alertsPane .alTxt b{font-weight:500;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#alertsPane .alRow.off .alTxt b{color:var(--muted)}
.alSub{display:flex;align-items:center;gap:6px;font-size:12px!important;overflow:visible!important;white-space:nowrap}
.alSub>span{font-size:12px;overflow:hidden;text-overflow:ellipsis}
.alSub .badge{width:16px;height:16px;min-width:16px;font-size:9px;line-height:16px;flex:none}
.alSub i{font-style:normal;color:var(--muted)}
#alertsPane .alSub .st{background:none;padding:0;margin:0;border-radius:0;font-size:12px;align-self:auto;color:var(--muted)}
#alertsPane .alSub .st.act{color:var(--up)} #alertsPane .alSub .st.paused{color:#f5a623} #alertsPane .alSub .st.stop{color:var(--down)}
.alAct{display:none;position:absolute;right:6px;top:6px;gap:0;background:var(--hover);border-radius:6px;padding-left:6px}
#alertsPane .alRow:hover .alAct{display:flex}
.alAct .icon{color:var(--text);width:30px;height:30px;display:flex;align-items:center;justify-content:center}
.alAct .icon:hover{background:var(--border)}
.alEmpty{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:40px 24px;color:var(--muted)}
.alEmpty b{color:var(--text);font-size:15px;font-weight:600}
.alMenu .mi.on{color:var(--accent)}
#aLog .aLogRow{flex-direction:column-reverse;gap:3px;padding:10px 14px;font-size:13px}
#aLog>.muted{padding:24px 14px;text-align:center}

/* resizable details box under the watchlist */
#infoGrip{flex:none;height:9px;margin:-4px 0;cursor:ns-resize;position:relative;z-index:4;touch-action:none}
#infoGrip::after{content:"";position:absolute;left:0;right:0;top:3px;height:2px;background:transparent;transition:background .12s}
#infoGrip:hover::after,#infoGrip.on::after{background:var(--accent)}
body.infoDrag,body.infoDrag *{cursor:ns-resize!important;user-select:none}
#info.mini{overflow:hidden}

/* left toolbar: bigger, thinner icons like TradingView */
#tools svg{width:26px;height:26px}
#tools button{opacity:1}

a.brand{color:inherit;text-decoration:none}

/* account menu + dialog */
.miSep{height:1px;background:var(--border);margin:5px 0}
.miNote{padding:6px 10px 2px;font-size:12px;color:var(--muted);max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.miNote b{color:var(--text);font-weight:600}
.acct{padding:4px 2px;max-width:420px}
.acct .acRow{display:flex;justify-content:space-between;gap:12px;padding:6px 0 10px}
.acct .fcol{display:flex;flex-direction:column;gap:8px;margin:6px 0 4px}
.acct .secT{margin-top:16px}
.acct #acMsg{min-height:18px;margin-top:10px}