:root { --bg:#0b0e11; --panel:#141922; --border:#232a35; --text:#d1d4dc; --muted:#787b86; --accent:#2962ff; --up:#26a69a; --down:#ef5350; }
* { box-sizing:border-box; }
html,body { margin:0; height:100%; background:var(--bg); color:var(--text); font:14px/1.4 -apple-system,'Segoe UI',Roboto,sans-serif; }
#app { display:flex; flex-direction:column; height:100%; }

/* Header */
header { display:flex; gap:12px; align-items:center; padding:10px 14px; background:var(--panel); border-bottom:1px solid var(--border); flex-wrap:wrap; }
header .title { font-weight:600; margin-right:8px; }
input#symbol { background:var(--bg); border:1px solid var(--border); color:var(--text); border-radius:6px; padding:7px 10px; width:170px; font-size:14px; text-transform:uppercase; }
input#symbol:focus { outline:none; border-color:var(--accent); }
.group { display:flex; border:1px solid var(--border); border-radius:6px; overflow:hidden; }
.group button { background:transparent; border:none; color:var(--muted); padding:7px 11px; cursor:pointer; font-size:13px; }
.group button:hover { color:var(--text); }
.group button.active { background:var(--accent); color:#fff; }
.readout { margin-left:auto; text-align:right; font-size:13px; color:var(--muted); }
.readout b { color:var(--text); font-size:15px; }

/* Price-source picker (venue × spot/futures) — global popover, opened from
   any window's mini-header */
#psPanel { position:fixed; z-index:120; background:var(--panel); border:1px solid var(--border); border-radius:8px; padding:8px 10px 10px; min-width:340px; box-shadow:0 6px 20px rgba(0,0,0,0.5); }
.ps-title { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin:6px 0 4px; }
.ps-row { display:flex; flex-wrap:wrap; gap:4px; }
.ps-row button { background:var(--bg); border:1px solid var(--border); color:var(--muted); border-radius:6px; padding:5px 9px; cursor:pointer; font-size:12px; }
.ps-row button:hover { color:var(--text); border-color:var(--accent); }
.ps-row button.active { background:var(--accent); border-color:var(--accent); color:#fff; }

/* Sync settings gear + dropdown */
#syncWrap { position:relative; }
#syncGear { background:var(--bg); border:1px solid var(--border); color:var(--muted); border-radius:6px; width:32px; height:32px; cursor:pointer; font-size:15px; }
#syncGear:hover, #syncGear.on { color:var(--text); border-color:var(--accent); }
#syncPanel { position:absolute; top:38px; right:0; z-index:50; background:var(--panel); border:1px solid var(--border); border-radius:8px; padding:10px 12px; min-width:230px; box-shadow:0 6px 20px rgba(0,0,0,0.5); }
#syncPanel .sync-title { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px; }
#syncPanel label { display:flex; align-items:center; justify-content:space-between; padding:6px 0; font-size:13px; color:var(--text); cursor:pointer; }
#syncPanel input[type=checkbox] { width:34px; height:18px; appearance:none; background:var(--border); border-radius:9px; position:relative; cursor:pointer; transition:background .15s; }
#syncPanel input[type=checkbox]:checked { background:var(--accent); }
#syncPanel input[type=checkbox]::after { content:''; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:#fff; transition:left .15s; }
#syncPanel input[type=checkbox]:checked::after { left:18px; }

/* Per-window mini-header (TV-style): symbol/link + TF row + market picker */
.winhead { position:absolute; top:6px; left:8px; z-index:7; display:flex; gap:5px; align-items:center; background:rgba(11,14,17,0.78); border:1px solid var(--border); border-radius:6px; padding:3px 6px; }
.winhead .wsym { background:var(--bg); border:1px solid var(--border); color:var(--text); border-radius:5px; padding:3px 7px; width:96px; font-size:12px; text-transform:uppercase; }
.winhead .wsym:disabled { opacity:.55; }
.winhead .wlink { background:transparent; border:1px solid var(--border); color:var(--muted); border-radius:5px; padding:3px 6px; cursor:pointer; font-size:11px; }
.winhead .wlink.on { color:#fff; background:var(--accent); border-color:var(--accent); }
.winhead .wpslink { background:transparent; border:1px solid var(--border); color:var(--muted); border-radius:5px; padding:3px 6px; cursor:pointer; font-size:11px; }
.winhead .wpslink.on { color:#fff; background:var(--accent); border-color:var(--accent); }
.winhead .wtf { display:flex; }
.winhead .wtf button { background:transparent; border:none; color:var(--muted); padding:3px 5px; cursor:pointer; font-size:11px; border-radius:4px; }
.winhead .wtf button:hover { color:var(--text); }
.winhead .wtf button.active { color:#fff; background:var(--accent); }
.winhead .wps { background:var(--bg); border:1px solid var(--border); color:var(--text); border-radius:5px; padding:3px 8px; cursor:pointer; font-size:11px; white-space:nowrap; }
.winhead .wps:hover { border-color:var(--accent); }

/* Arbitrage page */
#agrid { flex:1; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:1px; background:var(--border); min-height:0; }
.awin { position:relative; background:var(--bg); min-height:0; min-width:0; }
.adiv { color:var(--muted); font-size:13px; padding:0 2px; }
.arb-legend { top:38px; left:8px; }
.navlink { color:var(--muted); text-decoration:none; font-size:13px; padding:6px 10px; border:1px solid var(--border); border-radius:6px; }
.navlink:hover { color:var(--text); border-color:var(--accent); }
input#asym { background:var(--bg); border:1px solid var(--border); color:var(--text); border-radius:6px; padding:7px 10px; width:150px; font-size:14px; text-transform:uppercase; }

/* Layout */
#main { flex:1; display:flex; min-height:0; }
#charts { flex:1; display:flex; min-width:0; position:relative; }
#charts.stacked { flex-direction:column; } /* main page: chart row + metrics window */
#chartsRow { flex:1; display:flex; min-width:0; min-height:0; position:relative; }
#chart5 { height:36%; min-height:180px; border-top:1px solid var(--border); position:relative; background:var(--bg); }
#chart5[hidden] { display:none; }
#chart5 .mx-legend { position:absolute; top:6px; left:8px; z-index:7; display:flex; gap:12px; align-items:center; font-size:12px; color:var(--muted); background:rgba(11,14,17,0.78); border:1px solid var(--border); border-radius:6px; padding:4px 9px; }
#chart5 .mx-legend b { color:var(--text); font-weight:600; }
#chart { flex:1; min-height:0; min-width:0; position:relative; }
#chart2 { flex:1; min-height:0; min-width:0; position:relative; border-left:1px solid var(--border); }
#chart3 { flex:1; min-height:0; min-width:0; position:relative; border-left:1px solid var(--border); }
#chart4 { flex:1; min-height:0; min-width:0; position:relative; border-left:1px solid var(--border); }

/* Watchlist */
#panel { width:345px; flex-shrink:0; border-left:1px solid var(--border); display:flex; flex-direction:column; background:var(--panel); }
#srcBar { display:flex; gap:8px; align-items:center; padding:8px 10px 2px; font-size:11px; color:var(--muted); position:relative; }
#wlSrcBtn { background:transparent; border:1px solid var(--border); color:var(--text); border-radius:5px; padding:2px 9px; font-size:11px; cursor:pointer; }
#wlSrcBtn:hover { border-color:#2962ff; }
#wlSrcMenu { position:absolute; top:30px; left:10px; z-index:60; background:var(--panel); border:1px solid var(--border); border-radius:6px; padding:6px; display:flex; flex-wrap:wrap; gap:4px; width:238px; box-shadow:0 6px 20px rgba(0,0,0,0.5); }
#wlSrcMenu[hidden] { display:none; } /* explicit display would beat the hidden attr otherwise */
#wlSrcMenu button { background:transparent; border:1px solid var(--border); color:var(--text); border-radius:5px; padding:3px 8px; font-size:11px; cursor:pointer; }
#wlSrcMenu button:hover { border-color:#2962ff; }
#wlSrcMenu button.active { background:#2962ff; border-color:#2962ff; color:#fff; }
#panelHead { display:grid; grid-template-columns:13px 13px 18px 1fr 52px 52px 58px; gap:6px; padding:8px 10px; font-size:11px; color:var(--muted); border-bottom:1px solid var(--border); }
#panelHead span { cursor:pointer; user-select:none; white-space:nowrap; }
#panelHead span[data-sort]:not([data-sort="symbol"]) { text-align:right; }
#panelHead span.sorted { color:var(--text); }
#panelList { overflow-y:auto; flex:1; }
.flag { cursor:pointer; color:#3a3f4b; text-align:center; user-select:none; line-height:1; }
.flag.on { color:var(--down); }
#flagFilter.active { color:var(--down); }
.prow { display:grid; grid-template-columns:13px 13px 18px 1fr 52px 52px 58px; gap:6px; padding:6px 10px; font-size:12px; cursor:pointer; border-bottom:1px solid rgba(255,255,255,0.03); align-items:center; }
.prow:hover { background:rgba(255,255,255,0.05); }
.prow.active { background:rgba(41,98,255,0.20); }
.prow .sym { color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.prow .val { text-align:right; font-variant-numeric:tabular-nums; }
.prow .val.tn { color:var(--muted); }
.prow .oflag { opacity:0; font-size:12px; }
.prow .oflag.of-f.on { opacity:1; color:#ab47bc; }
.prow .oflag.of-s.on { opacity:1; color:#26a69a; }
#panelHead .oflag { cursor:pointer; color:var(--muted); font-size:12px; }
#panelHead .oflag.of-f.active { color:#ab47bc; }
#panelHead .oflag.of-s.active { color:#26a69a; }
.pos { color:var(--up); } .neg { color:var(--down); } .na { color:var(--muted); }

/* Measure tool */
#measBox { position:absolute; pointer-events:none; display:none; z-index:20; border:1px solid; box-sizing:border-box; }
#measBox svg { position:absolute; inset:0; overflow:visible; }
#measLabel { position:absolute; pointer-events:none; display:none; z-index:21; padding:6px 10px; border-radius:5px; color:#fff; font:12px/1.4 -apple-system,'Segoe UI',sans-serif; white-space:pre-line; text-align:center; transform:translate(-50%,-50%); box-shadow:0 2px 8px rgba(0,0,0,0.45); }

/* Right rail (TradingView-style) + alerts tab */
#rail { width:38px; flex-shrink:0; border-left:1px solid var(--border); background:var(--panel); display:flex; flex-direction:column; align-items:center; padding-top:6px; gap:4px; }
#rail button { position:relative; width:30px; height:30px; background:transparent; border:none; border-radius:6px; color:var(--muted); font-size:15px; cursor:pointer; }
#rail button:hover { color:var(--text); background:rgba(255,255,255,0.06); }
#rail button.active { color:var(--accent); background:rgba(41,98,255,0.15); }
#alertBadge { position:absolute; top:-2px; right:-4px; background:var(--down); color:#fff; font-size:10px; font-weight:600; border-radius:8px; padding:1px 4px; line-height:1.2; }
.alerts-head { padding:8px 10px 4px; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.sound-btn { background:transparent; border:none; cursor:pointer; font-size:14px; padding:0 2px; }
.alerts-hint { padding:10px; font-size:11px; color:var(--muted); border-top:1px solid var(--border); margin-top:auto; }
#alertView { display:flex; flex-direction:column; height:100%; overflow-y:auto; }
#alertList, #alertLog { overflow-y:auto; }
#alertLog { flex:1; }
.arow { display:flex; align-items:center; gap:6px; padding:6px 10px; font-size:12px; border-bottom:1px solid rgba(255,255,255,0.03); }
.arow .asym { color:var(--text); font-weight:600; white-space:nowrap; }
.arow .ainfo { color:var(--muted); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.arow .adel { cursor:pointer; color:var(--muted); padding:0 4px; }
.arow .adel:hover { color:var(--down); }
.aev { padding:6px 10px; font-size:12px; color:var(--text); border-bottom:1px solid rgba(255,255,255,0.03); }
.aev .at { color:var(--muted); margin-right:6px; }
.aempty { padding:10px; font-size:12px; color:var(--muted); }

/* Toasts (bottom-right, auto-hide) */
#toasts { position:fixed; right:14px; bottom:14px; z-index:100; display:flex; flex-direction:column; gap:8px; max-width:340px; }
.toast { background:var(--panel); border:1px solid var(--accent); border-radius:8px; padding:10px 12px; font-size:13px; color:var(--text); box-shadow:0 4px 16px rgba(0,0,0,0.5); animation:toastIn .15s ease-out; }
@keyframes toastIn { from { transform:translateY(8px); opacity:0; } to { transform:none; opacity:1; } }

/* Pane labels — inline legend like Coinalyze: name + live value */
.pane-label { position:absolute; z-index:5; padding:3px 8px; font-size:11px; color:var(--muted); pointer-events:none; background:rgba(11,14,17,0.65); border-radius:4px; line-height:1.2; }
.pane-label b { font-weight:600; }
.pane-label b.up { color:var(--up); }
.pane-label b.down { color:var(--down); }
.pane-label b.na { color:var(--muted); font-weight:400; }

.wdev { font-size:15px; font-weight:700; margin-left:7px; letter-spacing:.2px; }
.wdev.up { color:var(--up); }
.wdev.down { color:var(--down); }

.wbasis { position:absolute; top:44px; left:8px; z-index:7; display:flex; gap:10px; align-items:center; flex-wrap:wrap; max-width:calc(100% - 100px); background:rgba(11,14,17,0.78); border:1px solid var(--border); border-radius:6px; padding:3px 8px; pointer-events:none; }
.wbasis .bpair { display:flex; gap:4px; align-items:baseline; }
.wbasis .bv { color:var(--muted); font-size:11px; }
.wbasis b { font-size:13px; font-weight:700; }
.wbasis b.up { color:var(--up); }
.wbasis b.down { color:var(--down); }

/* OI trust badge in pane labels (venues with inflated OI) */
.pane-label .oiwarn { color:#ff9800; font-size:13px; font-weight:700; cursor:help; }

/* drawing tools */
.drawcv { position:absolute; inset:0; z-index:6; pointer-events:none; }
#charts.drawing, #charts.drawing * { cursor:crosshair !important; }