:root { --bg: #060608; --panel: #0e0e12; --border: #24242c; --text: #d6d8e0; --muted: #7f8290; --accent: #c3c6d2; --up: #26a69a; --down: #ef5350; --bid: #ff5a5f; --ask: #3ddc97; --btn: #15151b; --head: #0a0a0d; --desk: #030304; --row: #15151b; --font: "JetBrains Mono", Consolas, "Segoe UI", monospace; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 12px var(--font); overflow: hidden; }
#app { display: flex; flex-direction: column; height: 100vh; }
button, select, input { font: inherit; color: var(--text); background: var(--btn); border: 1px solid var(--border); border-radius: 4px; padding: 3px 7px; }
button { cursor: pointer; } button:hover { border-color: var(--accent); } button.on { background: var(--accent); color: #fff; border-color: var(--accent); }
input[type=number] { width: 80px; } input[type=color] { width: 36px; padding: 0; height: 22px; }
.spacer { flex: 1; }
#topbar { display: flex; align-items: center; gap: 6px; padding: 4px 8px; background: var(--panel); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.brand { font-weight: 700; font-size: 15px; letter-spacing: 1px; margin-right: 6px; } .brand span { color: var(--accent); }
.seg { display: flex; } .seg button { border-radius: 0; padding: 3px 8px; } .seg button:first-child { border-radius: 4px 0 0 4px; } .seg button:last-child, .seg input:last-child { border-radius: 0 4px 4px 0; }
.seg input { width: 54px; border-radius: 0; }
.lbl { display: flex; align-items: center; gap: 4px; color: var(--muted); } .lbl input { width: 70px; }
.tb { white-space: nowrap; }
.status { color: var(--muted); font-size: 11px; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .status.ok { color: var(--ask); } .status.bad { color: var(--bid); }
#main { display: flex; flex: 1; min-height: 0; }
#chartArea { flex: 1; position: relative; min-width: 0; display: flex; flex-direction: column; }
#chartWrap { flex: 1; min-height: 0; position: relative; } .chart-canvas { display: block; }
#chartInfo { position: absolute; left: 8px; top: 26px; pointer-events: none; color: var(--text); font-size: 11px; text-shadow: 0 0 3px #000; white-space: pre; }
#right { width: 330px; display: flex; flex-direction: column; background: var(--panel); min-width: 0; }
#domWrap { flex: 1; min-height: 200px; position: relative; } #domCanvas { display: block; }
#terminal { border-top: 1px solid var(--border); padding: 6px; display: flex; flex-direction: column; gap: 5px; }
.acct { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; font-size: 11px; margin-bottom: 2px; } .acct .k { color: var(--muted); margin-right: 6px; } .acct b { float: right; }
.lock { grid-column: 1/3; background: #5a1a1a; color: #fff; text-align: center; padding: 3px; border-radius: 4px; }
.row { display: flex; gap: 4px; align-items: center; } .row label { display: flex; align-items: center; gap: 3px; color: var(--muted); font-size: 11px; } .row input { min-width: 0; width: 100%; }
.row button { flex: 1; padding: 6px 4px; font-weight: 700; } .row button.sm { padding: 3px 6px; font-weight: 400; flex: 0 0 auto; } .row.small { font-size: 10px; }
button.buy { background: #1b5e20; border-color: #2e7d32; } button.buy:hover { background: #2e7d32; }
button.sell { background: #7f1d1d; border-color: #b71c1c; } button.sell:hover { background: #b71c1c; }
button.warn { background: #3a3a1a; }
.pos { color: var(--ask); } .neg { color: var(--bid); }
#bottom { height: 220px; background: var(--panel); display: flex; flex-direction: column; min-height: 0; } #bottom.min { height: 26px !important; } #bottom.min .tabBody { display: none; }
.tabs { display: flex; gap: 2px; padding: 2px 6px; border-bottom: 1px solid var(--border); } .tabs button { border: none; background: transparent; color: var(--muted); padding: 3px 10px; } .tabs button.on { color: #fff; border-bottom: 2px solid var(--accent); border-radius: 0; }
.tabBody { flex: 1; overflow: auto; padding: 4px 8px; } .pane { display: none; } .pane.on { display: block; }
table { border-collapse: collapse; width: 100%; font-size: 11px; } th, td { padding: 2px 6px; text-align: right; border-bottom: 1px solid var(--btn); white-space: nowrap; } th { color: var(--muted); font-weight: 400; } td:first-child, th:first-child { text-align: left; }
td input[type=text] { width: 220px; background: transparent; border: 1px solid transparent; } td input[type=text]:focus { border-color: var(--border); }
#journalStats { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 2px 0 4px; } #journalStats span b { margin-left: 4px; }
.jrow { margin-bottom: 4px; } #eqCurve { width: 100%; display: block; background: #0d0d14; border-radius: 4px; }
#tape { font-size: 11px; display: grid; grid-template-columns: 80px 100px 90px 60px; gap: 0 10px; } #tape div { padding: 1px 0; } .tapeCtl { color: var(--muted); margin-bottom: 4px; }
.t-buy { color: var(--ask); } .t-sell { color: var(--bid); } .t-big { font-weight: 700; background: #1a1a2a; }
#events div, #alertList div { padding: 2px 0; border-bottom: 1px solid var(--btn); display: flex; gap: 12px; align-items: center; }
#replayBar { display: flex; gap: 8px; align-items: center; padding: 4px 8px; background: #2a1d5c; border-top: 1px solid var(--accent); } #replayBar[hidden] { display: none; }
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 100000; } .modal[hidden] { display: none; }
.modalBox { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; width: min(780px, 94vw); max-height: 86vh; display: flex; flex-direction: column; }
.modalHead { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--border); font-weight: 700; }
#modalBody { padding: 10px 12px; overflow: auto; }
.indGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .indList div.item { display: flex; align-items: center; gap: 6px; padding: 3px 0; border-bottom: 1px solid var(--btn); } .indList .grp { color: var(--muted); margin-top: 6px; font-size: 10px; text-transform: uppercase; }
.params { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: center; margin: 6px 0 10px 12px; font-size: 11px; color: var(--muted); }
.active .item { display: flex; align-items: center; gap: 6px; padding: 4px 0; } .active .item b { flex: 1; } .active .item .err { color: var(--bid); font-size: 10px; }
.ctx { position: fixed; z-index: 100001; background: var(--btn); border: 1px solid var(--border); border-radius: 6px; padding: 4px 0; min-width: 190px; box-shadow: 0 4px 16px #000; } .ctx[hidden] { display: none; }
.ctx div { padding: 5px 12px; cursor: pointer; } .ctx div:hover { background: var(--accent); color: #fff; } .ctx hr { border: none; border-top: 1px solid var(--border); margin: 3px 0; }
.form { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; } .form h4 { grid-column: 1/3; margin: 8px 0 0; color: var(--accent); }
.tplList div { display: flex; gap: 8px; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--btn); } .tplList b { flex: 1; }
.toast { position: fixed; right: 16px; bottom: 60px; background: #222235; border: 1px solid var(--accent); padding: 8px 12px; border-radius: 6px; z-index: 100002; animation: fade 4s forwards; } @keyframes fade { 0%,80% { opacity: 1 } 100% { opacity: 0 } }
/* panels: headers, splitters, minimize / maximize */
.phead { display: flex; align-items: center; gap: 4px; padding: 2px 6px; height: 20px; background: var(--head); border-bottom: 1px solid var(--border); font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; flex: 0 0 20px; }
.phead button, .tabs [data-min], .tabs [data-max] { padding: 0 6px; font-size: 11px; line-height: 15px; color: var(--muted); }
.splitV { flex: 0 0 5px; cursor: col-resize; background: var(--border); } .splitV:hover { background: var(--accent); }
.splitH { flex: 0 0 5px; cursor: row-resize; background: var(--border); } .splitH:hover { background: var(--accent); }
#right.min { width: 24px !important; } #right.min #domWrap, #right.min #terminal, #right.min .phead span, #right.min .phead [data-max] { display: none; } #right.min .phead { flex-direction: column; height: 100%; flex: 1; padding: 4px 0; }
body.max-chart #right, body.max-chart #bottom, body.max-chart .splitV, body.max-chart .splitH { display: none !important; }
body.max-right #chartArea, body.max-right #bottom, body.max-right .splitV, body.max-right .splitH { display: none !important; } body.max-right #right { width: 100% !important; }
body.max-bottom #main, body.max-bottom .splitH { display: none !important; } body.max-bottom #bottom { flex: 1; height: auto !important; }
body.max-chart [data-max="chart"], body.max-right [data-max="right"], body.max-bottom [data-max="bottom"] { color: var(--accent); }
/* paper trading UI hidden unless enabled in settings */
body.no-paper #terminal, body.no-paper [data-tab="positions"], body.no-paper [data-tab="journal"], body.no-paper .paperOnly { display: none !important; }
@media (max-width: 900px) { #right { width: 260px; } }

.fpform { grid-template-columns: auto 1fr; } .fprow { display: flex; align-items: center; gap: 8px; } .fprow input[type=range] { width: 160px; } .fprow code { color: var(--muted); font-size: 10px; } .fpform h4 { grid-column: 1/3; margin: 10px 0 2px; color: var(--accent); }
.trlab { display: flex; align-items: center; gap: 3px; color: var(--muted); font-size: 10px; } .fprow input[type=color]:disabled { opacity: .3; }
#btnLive { position: absolute; right: 84px; bottom: 30px; z-index: 5; font-size: 11px; padding: 3px 9px; background: var(--btn)cc; color: var(--muted); border-color: var(--border); } #btnLive.away { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 0 10px var(--accent); }

/* ---------- desk / windows ---------- */
#desk { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--desk); }
.win { position: absolute; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--border); border-radius: 4px; overflow: hidden; box-shadow: 0 2px 12px #0008; min-width: 160px; }
.win.active { border-color: #3a3a55; } .win.active .win-title { background: #14142a; }
.win-title { display: flex; align-items: center; gap: 4px; height: 24px; padding: 0 4px 0 8px; background: var(--head); border-bottom: 1px solid var(--border); font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); cursor: move; user-select: none; flex: 0 0 24px; }
.win-title button { padding: 0 6px; font-size: 11px; line-height: 16px; color: var(--muted); border: none; background: transparent; } .win-title button:hover { color: #fff; }
.win-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40%; }
.win-tb { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; overflow: hidden; }
.win-body { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; }
.win.min .win-body, .win.min .rs { display: none; } .win.max .rs { display: none; } .win.max .win-title { cursor: default; }
.rs { position: absolute; z-index: 3; } .rs-n { top: -3px; left: 8px; right: 8px; height: 6px; cursor: ns-resize; } .rs-s { bottom: -3px; left: 8px; right: 8px; height: 6px; cursor: ns-resize; }
.rs-e { right: -3px; top: 8px; bottom: 8px; width: 6px; cursor: ew-resize; } .rs-w { left: -3px; top: 8px; bottom: 8px; width: 6px; cursor: ew-resize; }
.rs-ne { top: -3px; right: -3px; width: 10px; height: 10px; cursor: nesw-resize; } .rs-sw { bottom: -3px; left: -3px; width: 10px; height: 10px; cursor: nesw-resize; }
.rs-nw { top: -3px; left: -3px; width: 10px; height: 10px; cursor: nwse-resize; } .rs-se { bottom: -3px; right: -3px; width: 10px; height: 10px; cursor: nwse-resize; }
body.dragging { user-select: none; cursor: grabbing; } body.dragging iframe, body.dragging canvas { pointer-events: none; }
/* chart window */
.cview { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.cbar { display: flex; align-items: center; gap: 4px; padding: 2px 4px; border-bottom: 1px solid var(--border); background: var(--head); flex-wrap: wrap; font-size: 11px; }
.cbar select, .cbar input, .cbar button { padding: 1px 5px; font-size: 11px; } .cbar .seg button { padding: 1px 6px; } .cbar .lbl input { width: 62px; } .cbar .tfCustom { width: 44px; }
.cbar .cstatus { color: var(--muted); font-size: 10px; margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40%; }
.cwrap { flex: 1; min-height: 0; position: relative; } .cwrap .chartWrap { position: absolute; inset: 0; }
.cwrap .chartInfo { position: absolute; left: 8px; top: 24px; pointer-events: none; color: var(--text); font-size: 11px; text-shadow: 0 0 3px #000; white-space: pre; }
.cwrap .btnLive { position: absolute; right: 84px; bottom: 30px; z-index: 5; font-size: 11px; padding: 3px 9px; background: var(--btn)cc; color: var(--muted); } .cwrap .btnLive.away { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 0 10px var(--accent); }
#bookContent, #bottomContent { display: flex; flex-direction: column; flex: 1; min-height: 0; }
#domWrap { flex: 1; min-height: 80px; position: relative; }
.tabBody { flex: 1; overflow: auto; padding: 4px 8px; min-height: 0; }
/* context menu with inline controls */
.ctx { min-width: 230px; max-width: 360px; } .ctx .sec { padding: 4px 12px 2px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .5px; cursor: default; } .ctx .sec:hover { background: transparent; color: var(--muted); }
.ctx .row { display: flex; gap: 4px; padding: 3px 10px; flex-wrap: wrap; cursor: default; } .ctx .row:hover { background: transparent; } .ctx .row button { padding: 2px 7px; font-size: 11px; }
.ctx .crow { display: flex; align-items: center; gap: 8px; padding: 2px 12px; cursor: default; } .ctx .crow:hover { background: #1c1c2a; color: inherit; } .ctx .crow span { flex: 1; font-size: 11px; } .ctx .crow input[type=color] { width: 28px; height: 18px; }
.ctx .crow label.tr { font-size: 9px; color: var(--muted); display: flex; align-items: center; gap: 2px; }
.ctx .sub { font-size: 11px; color: var(--muted); }
.list-edit div { display: flex; align-items: center; gap: 8px; padding: 3px 0; border-bottom: 1px solid var(--btn); } .list-edit b { flex: 1; font-weight: 400; } .list-edit button { padding: 0 6px; }
#topbar .drawColor { width: 26px; height: 22px; padding: 0; }

/* watchlist */
.wl { display: flex; flex-direction: column; flex: 1; min-height: 0; font-size: 11px; }
.wlhead, .wladd { display: flex; gap: 4px; padding: 4px 6px; border-bottom: 1px solid var(--border); align-items: center; } .wlhead select, .wladd select { flex: 1; min-width: 0; }
.wlrows { flex: 1; overflow: auto; }
.wlrow { display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px; align-items: center; padding: 4px 8px; border-bottom: 1px solid var(--btn); cursor: pointer; } .wlrow:hover { background: var(--btn); } .wlrow.on { background: #1c1c30; }
.wlrow b { font-weight: 600; } .wlrow .px { font-variant-numeric: tabular-nums; } .wlrow .chg { font-size: 10px; min-width: 52px; text-align: right; }
.wlbtns button { padding: 0 4px; font-size: 9px; color: var(--muted); border: none; background: transparent; } .wlbtns button:hover { color: #fff; }

/* ---------- World economy panel (techy) ---------- */
.mx { --cy: #00e5ff; --mg: #ff2bd6; --gn: #3dffc3; display: flex; flex-direction: column; flex: 1; min-height: 0; background: radial-gradient(1200px 600px at 20% -10%, #0e2a4a 0%, #070b16 55%, #05070f 100%); color: #d8e6f5; font-family: "JetBrains Mono", Consolas, monospace; }
.mx .sub { color: #7f9fbf; font-size: 10px; } .mx .pos { color: var(--gn); } .mx .neg { color: var(--mg); }
.mxbar { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-bottom: 1px solid rgba(0,229,255,0.18); background: linear-gradient(90deg, rgba(0,229,255,0.08), transparent 60%); }
.mxtabs { display: flex; gap: 2px; } .mxtabs button { background: transparent; border: 1px solid transparent; color: #9fb8d4; padding: 3px 10px; border-radius: 3px; } .mxtabs button.on { color: #fff; border-color: rgba(0,229,255,0.5); background: rgba(0,229,255,0.1); box-shadow: 0 0 12px rgba(0,229,255,0.25) inset; }
.mxstatus { margin-left: auto; font-size: 10px; color: #7f9fbf; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mxpane { flex: 1; min-height: 0; display: flex; flex-direction: column; } .mxpane[hidden] { display: none; }
.mxpane[data-p=map] { display: grid; grid-template-columns: 1fr 300px; grid-template-rows: auto 1fr; } .mxpane[data-p=map][hidden] { display: none; }
.mxctl { grid-column: 1 / 3; display: flex; gap: 8px; align-items: center; padding: 5px 8px; border-bottom: 1px solid rgba(0,229,255,0.12); flex-wrap: wrap; font-size: 11px; }
.mxctl select, .mxctl input, .mxctl button { background: rgba(10,20,40,0.8); border: 1px solid rgba(0,229,255,0.3); color: #e6f7ff; border-radius: 3px; padding: 2px 6px; font: inherit; }
.mxyear { display: flex; align-items: center; gap: 6px; } .mxyr { width: 220px; accent-color: var(--cy); } .mxyv { color: var(--cy); min-width: 36px; text-shadow: 0 0 8px rgba(0,229,255,0.7); }
.mxzoom { margin-left: auto; display: flex; gap: 2px; }
.mxmapwrap { position: relative; min-height: 0; overflow: hidden; background: radial-gradient(800px 400px at 50% 50%, rgba(0,229,255,0.05), transparent 70%); } .mxmap { display: block; cursor: grab; }
.mxtip { position: absolute; pointer-events: none; background: rgba(6,12,24,0.92); border: 1px solid rgba(0,229,255,0.45); border-radius: 4px; padding: 6px 9px; font-size: 11px; box-shadow: 0 0 16px rgba(0,229,255,0.25); max-width: 240px; backdrop-filter: blur(4px); } .mxtip[hidden] { display: none; }
.mxlegend { position: absolute; left: 12px; bottom: 10px; width: 220px; background: rgba(6,12,24,0.75); border: 1px solid rgba(0,229,255,0.25); border-radius: 4px; padding: 6px 8px; font-size: 10px; backdrop-filter: blur(3px); } .mxlegend .lg { height: 8px; border-radius: 2px; } .mxlegend .lgl { display: flex; justify-content: space-between; margin-top: 2px; color: #9fb8d4; } .mxlegend .lgt { color: #e6f7ff; margin-top: 2px; }
.mxside { border-left: 1px solid rgba(0,229,255,0.15); overflow: auto; padding: 8px; background: rgba(4,8,18,0.6); font-size: 11px; }
.mxempty { color: #7f9fbf; padding: 14px; text-align: center; line-height: 1.6; }
.mxch { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .mxch .flag { font-size: 26px; } .mxch b { font-size: 14px; color: #fff; } .mxclose { margin-left: auto; background: transparent; border: none; color: #7f9fbf; }
.mxrate { padding: 4px 8px; border: 1px solid rgba(61,255,195,0.35); border-radius: 4px; margin-bottom: 6px; background: rgba(61,255,195,0.06); } .mxrate b { color: var(--gn); }
.mxgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .mxind { border: 1px solid rgba(0,229,255,0.15); border-radius: 4px; padding: 5px 6px; background: rgba(10,20,40,0.5); cursor: pointer; } .mxind:hover, .mxind.on { border-color: rgba(0,229,255,0.6); box-shadow: 0 0 10px rgba(0,229,255,0.15); }
.mxind .n { color: #9fb8d4; font-size: 10px; } .mxind .v { font-size: 14px; color: #fff; margin: 2px 0; } .mxind .sp { width: 100%; height: 34px; display: block; }
.mxact { display: flex; gap: 6px; margin-top: 8px; } .mxact button { flex: 1; background: rgba(0,229,255,0.12); border: 1px solid rgba(0,229,255,0.4); color: #e6f7ff; border-radius: 3px; padding: 5px; }
.mxtable { overflow: auto; padding: 4px 8px; flex: 1; min-height: 0; } .mxtable table { width: 100%; border-collapse: collapse; font-size: 11px; } .mxtable th { color: #7f9fbf; font-weight: 400; text-align: left; padding: 3px 6px; position: sticky; top: 0; background: #070b16; border-bottom: 1px solid rgba(0,229,255,0.2); }
.mxtable td { padding: 3px 6px; border-bottom: 1px solid rgba(0,229,255,0.06); text-align: left; white-space: nowrap; } .mxtable td.num { text-align: right; font-variant-numeric: tabular-nums; } .mxtable tr[data-iso] { cursor: pointer; } .mxtable tr[data-iso]:hover td { background: rgba(0,229,255,0.07); }
.mxtable td.bar { width: 160px; } .mxtable td.bar div { height: 8px; border-radius: 2px; box-shadow: 0 0 8px currentColor; } .mxtable td.hm { color: #fff; } .mxtable h4 { margin: 10px 0 4px; color: var(--cy); font-weight: 400; }
.mxtable tr.past td { opacity: 0.55; } .mxtable tr.nxt td { background: rgba(61,255,195,0.08); } .imp { font-size: 10px; padding: 1px 6px; border-radius: 3px; } .imp.High { background: rgba(255,43,214,0.25); color: #ffb3ea; } .imp.Medium { background: rgba(255,225,77,0.2); color: #ffe14d; } .imp.Low { background: rgba(127,159,191,0.2); color: #9fb8d4; }
.mxnext { margin-left: auto; color: var(--gn); } .mxnext b { color: #fff; }
.mxcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; padding: 8px; overflow: auto; }
.mxcard { border: 1px solid rgba(0,229,255,0.18); border-radius: 6px; padding: 8px; background: linear-gradient(160deg, rgba(14,42,74,0.55), rgba(7,11,22,0.7)); cursor: pointer; transition: transform .12s, box-shadow .12s; } .mxcard:hover, .mxcard.on { transform: translateY(-1px); box-shadow: 0 0 18px rgba(0,229,255,0.25); border-color: rgba(0,229,255,0.6); }
.mxcard .n { display: flex; justify-content: space-between; color: #9fb8d4; font-size: 10px; } .mxcard .v { font-size: 20px; color: #fff; margin: 2px 0; text-shadow: 0 0 10px rgba(0,229,255,0.35); } .mxcard .v .sub { margin-left: 6px; } .mxcard .d { font-size: 11px; } .mxcard .sp { width: 100%; height: 36px; display: block; margin-top: 4px; }
.mxbig { padding: 8px; } .mxbig[hidden] { display: none; }
.mxnews { overflow: auto; padding: 6px 8px; display: flex; flex-direction: column; gap: 4px; } .mxitem { display: block; text-decoration: none; color: inherit; border: 1px solid rgba(0,229,255,0.12); border-radius: 4px; padding: 6px 8px; background: rgba(10,20,40,0.4); } .mxitem:hover { border-color: rgba(0,229,255,0.5); }
.mxitem .src { font-size: 9px; color: var(--cy); border: 1px solid rgba(0,229,255,0.4); border-radius: 3px; padding: 0 5px; margin-right: 8px; } .mxitem b { font-weight: 500; color: #fff; } .mxitem .sub { margin-left: 8px; } .mxitem .sum { color: #9fb8d4; font-size: 10px; margin-top: 3px; }
.mx .seg button { background: rgba(10,20,40,0.8); border: 1px solid rgba(0,229,255,0.3); color: #e6f7ff; } .mx .seg button.on { background: rgba(0,229,255,0.2); }
@media (max-width: 900px) { .mxpane[data-p=map] { grid-template-columns: 1fr; } .mxside { display: none; } }

/* light / mono site themes: a few extra overrides that hard-coded colors need */
body.theme-light .win-title, body.theme-light .cbar { background: var(--head); } body.theme-light .win.active .win-title { background: #e9edf5; }
body.theme-light .tabs button.on { color: #000; } body.theme-light .status.ok { color: #1b5e20; } body.theme-light .wlrow.on { background: #e3e8f5; } body.theme-light .wlrow:hover { background: #eef0f6; }
body.theme-light .t-big { background: #eef0f6; } body.theme-light .ctx { box-shadow: 0 4px 16px #0004; } body.theme-light .cwrap .btnLive { background: #ffffffcc; }
body.theme-mono .win.active .win-title { background: #1a1a1a; } body.theme-mono .tabs button.on { border-bottom-color: #fff; }

/* ---- extra site themes ---- */
body.theme-win95 { font-family: var(--font); } body.theme-win95 button, body.theme-win95 select, body.theme-win95 input { border: 2px outset #ffffff; border-radius: 0; background: #c0c0c0; color: #000; font-family: var(--font); }
body.theme-win95 button.on { border-style: inset; background: #e0e0e0; color: #000; } body.theme-win95 .win { border: 2px outset #ffffff; border-radius: 0; box-shadow: none; }
body.theme-win95 .win-title, body.theme-win95 .win.active .win-title { background: #000080; color: #fff; text-transform: none; font-weight: 700; letter-spacing: 0; } body.theme-win95 .win-name, body.theme-win95 .win-title button { color: #fff; }
body.theme-win95 .win-title button { border: 2px outset #fff; background: #c0c0c0; color: #000; padding: 0 4px; line-height: 12px; } body.theme-win95 #topbar { border-bottom: 2px outset #fff; } body.theme-win95 .brand span { color: #000080; }
body.theme-win95 .tabs button.on { color: #000; border-bottom-color: #000080; } body.theme-win95 .modalBox, body.theme-win95 .ctx { border: 2px outset #fff; border-radius: 0; background: #c0c0c0; color: #000; } body.theme-win95 .modalHead { background: #000080; color: #fff; }
body.theme-win95 .cwrap .btnLive { background: #c0c0c0; color: #000; } body.theme-win95 .wlrow.on { background: #000080; color: #fff; } body.theme-win95 .status.ok { color: #008000; }
body.theme-cyberpunk .win.active { box-shadow: 0 0 14px rgba(252,238,10,0.35); border-color: #fcee0a; } body.theme-cyberpunk .win-title { text-transform: uppercase; letter-spacing: 1px; } body.theme-cyberpunk button.on { background: #fcee0a; color: #000; border-color: #fcee0a; } body.theme-cyberpunk .brand span { color: #fcee0a; }
body.theme-vice #desk { background: linear-gradient(180deg, #0f0620 0%, #3b1266 65%, #ff6ec7 160%); } body.theme-vice .win.active { box-shadow: 0 0 16px rgba(255,110,199,0.35); } body.theme-vice .brand span { color: #ff6ec7; } body.theme-vice button.on { background: linear-gradient(90deg, #ff6ec7, #00e5d8); color: #1a0b2e; border-color: transparent; }
body.theme-synthwave #desk { background: linear-gradient(180deg, #0a0616 0%, #2a0f4a 60%, #ff2975 170%); } body.theme-synthwave .win.active { box-shadow: 0 0 16px rgba(255,41,117,0.4); } body.theme-synthwave .brand span { color: #ff2975; text-shadow: 0 0 10px #ff2975; } body.theme-synthwave button.on { background: #ff2975; border-color: #ff2975; color: #fff; }

/* ---- background art layer (non-chart panels + header) ---- */
#topbar { position: relative; overflow: hidden; } #topbar > * { position: relative; z-index: 1; }
#topbar::before, .win:not([data-kind="chart"]) .win-body::before, .modalBox::before { content: ''; position: absolute; inset: 0; background-image: var(--bgimg, none); background-repeat: repeat; opacity: var(--bgop, 0.18); pointer-events: none; z-index: 0; }
.win:not([data-kind="chart"]) .win-body > * { position: relative; z-index: 1; } .modalBox { position: relative; overflow: hidden; } .modalBox > * { position: relative; z-index: 1; }
/* matrix / retro extras */
body.theme-matrix .brand span { color: #00ff41; text-shadow: 0 0 8px #00ff41; } body.theme-matrix button.on { background: #00ff41; color: #000; border-color: #00ff41; } body.theme-matrix .win.active { box-shadow: 0 0 14px rgba(0,255,65,0.3); }
body.theme-retro .brand span { color: #ffb000; text-shadow: 0 0 8px #ffb000; } body.theme-retro button.on { background: #ffb000; color: #1a1204; border-color: #ffb000; } body.theme-retro .win { border-radius: 0; }
body.theme-retro::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 99999; background: repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0px, rgba(0,0,0,0.18) 1px, transparent 2px, transparent 4px); }

/* ---- alerts window, news popups, chart news strip ---- */
#alertsContent { display: flex; flex-direction: column; flex: 1; min-height: 0; font-size: 11px; } .alsec { padding: 6px 8px; border-bottom: 1px solid var(--border); } .alsec.grow { flex: 1; min-height: 0; overflow: auto; }
.alsec h4 { margin: 0 0 6px; color: var(--accent); font-weight: 400; font-size: 10px; text-transform: uppercase; letter-spacing: .5px; } .alsec .row { flex-wrap: wrap; } .alsec select { max-width: 150px; }
#nrList div, #alertList div { display: flex; gap: 8px; align-items: center; padding: 3px 0; border-bottom: 1px solid var(--row); } #nrList b { font-weight: 600; } #nrList .off { opacity: .45; }
#nrFeed a { display: block; text-decoration: none; color: var(--text); padding: 4px 0; border-bottom: 1px solid var(--row); } #nrFeed a:hover { background: var(--row); } #nrFeed .src, .newsPop .src { font-size: 9px; color: var(--accent); border: 1px solid var(--accent); border-radius: 3px; padding: 0 5px; margin-right: 6px; } #nrFeed .tg, .newsPop .tg { color: var(--muted); font-size: 9px; margin-left: 6px; } #nrFeed .ago { color: var(--muted); font-size: 10px; margin-left: 6px; }
#newsPops { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 100003; display: flex; flex-direction: column; gap: 6px; width: min(760px, 92vw); pointer-events: none; }
.newsPop { pointer-events: auto; background: var(--panel); border: 1px solid var(--accent); border-radius: 6px; padding: 8px 12px; box-shadow: 0 8px 28px #000c; display: flex; gap: 10px; align-items: center; animation: popin .18s ease-out; font-size: 12px; } @keyframes popin { from { transform: translateY(12px); opacity: 0 } to { transform: none; opacity: 1 } }
.newsPop a { color: var(--text); text-decoration: none; flex: 1; min-width: 0; } .newsPop a:hover { text-decoration: underline; } .newsPop button { border: none; background: transparent; color: var(--muted); font-size: 14px; } .newsPop .bell { font-size: 16px; }
.cwrap .newsStrip { position: absolute; left: 8px; bottom: 30px; z-index: 5; max-width: calc(100% - 200px); background: color-mix(in srgb, var(--panel) 85%, transparent); border: 1px solid var(--border); border-radius: 4px; padding: 3px 8px; font-size: 11px; cursor: pointer; display: flex; gap: 6px; align-items: center; white-space: nowrap; overflow: hidden; } .cwrap .newsStrip[hidden] { display: none; }
.cwrap .newsStrip:hover { border-color: var(--accent); } .cwrap .newsStrip .nsText { overflow: hidden; text-overflow: ellipsis; } .cwrap .newsStrip .nsCount { background: var(--accent); color: #fff; border-radius: 10px; padding: 0 6px; font-size: 10px; flex: 0 0 auto; } .cwrap .newsStrip .nsCount:empty { display: none; }

/* ---- chart analyzer ---- */
.anzpick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; } .anzbtn { text-align: left; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; border-radius: 6px; white-space: normal; } .anzbtn b { font-size: 13px; } .anzbtn.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
#modal .modalBox.wide { width: min(1000px, 96vw); }
.rep { font-size: 12px; display: flex; flex-direction: column; gap: 10px; line-height: 1.45; }
.rep .card { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; background: var(--row); } .rep h3 { margin: 0 0 6px; font-size: 12px; color: var(--accent); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.rep .verdict { display: grid; grid-template-columns: minmax(220px, 1fr) 2fr; gap: 16px; border-width: 2px; } .rep .verdict.pos { border-color: var(--ask); } .rep .verdict.neg { border-color: var(--bid); } .rep .verdict.neu { border-color: var(--muted); }
.rep .bias { font-size: 26px; font-weight: 800; letter-spacing: 1px; margin: 4px 0; } .rep .verdict.pos .bias { color: var(--ask); } .rep .verdict.neg .bias { color: var(--bid); }
.rep .meter { height: 6px; background: var(--btn); border-radius: 3px; overflow: hidden; margin: 4px 0 6px; } .rep .meter div { height: 100%; background: var(--accent); }
.rep ul.plain { margin: 0; padding-left: 18px; list-style: disc; } .rep ul.plain li { display: list-item; margin: 3px 0; border: none; }
.rep .plan.pos { border-color: var(--ask); } .rep .plan.neg { border-color: var(--bid); } .rep .planrow { display: flex; gap: 16px; flex-wrap: wrap; margin: 4px 0 6px; } .rep .planrow > div { display: flex; flex-direction: column; min-width: 150px; } .rep .planrow .k { color: var(--muted); font-size: 10px; text-transform: uppercase; } .rep .planrow b { font-size: 17px; }
.rep .chips { display: flex; gap: 8px; flex-wrap: wrap; } .rep .chip { border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; display: flex; flex-direction: column; min-width: 110px; } .rep .chip.pos { border-color: var(--ask); } .rep .chip.neg { border-color: var(--bid); } .rep .chip b { font-size: 13px; }
.rep .lvcols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 6px; } .rep .lvh { font-weight: 600; margin-bottom: 4px; } .rep .lv { display: grid; grid-template-columns: 90px 1fr; gap: 2px 10px; padding: 5px 8px; border: 1px solid var(--border); border-left-width: 4px; border-radius: 4px; margin-bottom: 4px; background: var(--panel); } .rep .lv.pos { border-left-color: var(--ask); } .rep .lv.neg { border-left-color: var(--bid); } .rep .lv b { font-size: 13px; } .rep .lv .d { color: var(--muted); font-size: 10px; } .rep .lv .s { grid-column: 1 / 3; color: var(--muted); font-size: 10px; } .rep .lv i { color: var(--accent); font-style: normal; }
.rep details.sg { border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; margin-bottom: 6px; background: var(--panel); } .rep details.sg summary { cursor: pointer; display: flex; gap: 8px; align-items: baseline; list-style: none; } .rep details.sg summary::-webkit-details-marker { display: none; } .rep details.sg summary .sub { flex: 1; } .rep .pts { font-weight: 700; min-width: 36px; text-align: right; }
.rep ul { margin: 4px 0 0; padding: 0; list-style: none; } .rep li { display: flex; gap: 8px; padding: 3px 0; border-top: 1px solid var(--row); } .rep li span:nth-child(2) { flex: 1; } .rep li .w { min-width: 14px; } .rep li.neu { color: var(--muted); }
.rep ul.news li a { color: var(--text); text-decoration: none; } .rep .src { font-size: 9px; color: var(--accent); border: 1px solid var(--accent); border-radius: 3px; padding: 0 4px; margin-right: 6px; } .rep .disc { margin-top: 2px; }
@media (max-width: 800px) { .rep .verdict, .rep .lvcols, .anzpick { grid-template-columns: 1fr; } }

/* pine editor */
.pine textarea { width: 100%; height: 340px; margin-top: 8px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 4px; font: 12px/1.5 "JetBrains Mono", Consolas, monospace; padding: 8px; resize: vertical; tab-size: 4; }
.pine .pnhelp { line-height: 1.6; padding: 4px 0; } .pine #pnMsg { margin-top: 6px; min-height: 16px; white-space: pre-wrap; }

.share img { max-width: 100%; border: 1px solid var(--border); border-radius: 6px; display: block; }

/* symbol picker */
.sp .spcats { margin: 6px 0; flex-wrap: wrap; } .splist { max-height: 56vh; overflow: auto; border: 1px solid var(--border); border-radius: 6px; }
.sprow { display: grid; grid-template-columns: 26px 120px 1fr 110px 70px 130px; gap: 8px; align-items: center; padding: 5px 10px; border-bottom: 1px solid var(--row); cursor: pointer; font-size: 12px; } .sprow:hover { background: var(--row); } .sprow.off { color: var(--muted); } .sprow.off b { color: var(--muted); }
.sprow .nm { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sprow .px { text-align: right; font-variant-numeric: tabular-nums; } .sprow .chg { text-align: right; font-size: 11px; } .sprow .fd { font-size: 10px; color: var(--muted); text-align: right; }
.cbar .symSel { font-weight: 700; }
@media (max-width: 700px) { .sprow { grid-template-columns: 26px 100px 1fr 80px; } .sprow .chg, .sprow .fd { display: none; } }

/* news ticker in the header (replaces the connection word; a dot shows connection state) */
#tickerWrap { flex: 1 0 100%; min-width: 0; order: 99; display: flex; align-items: center; gap: 8px; overflow: hidden; margin-top: 4px; } /* full-width row under the buttons */
#topbar { flex-wrap: wrap; }
#tkGrip { cursor: grab; color: var(--muted); font-size: 14px; letter-spacing: -2px; padding: 0 2px; user-select: none; } #tkGrip:active { cursor: grabbing; }
#tickerWrap.float { position: fixed; z-index: 99000; margin: 0; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 3px 6px; box-shadow: 0 6px 20px rgba(0,0,0,.5); width: var(--tkw, 60vw); min-width: 240px; }
#tickerWrap.float .tkResize { position: absolute; right: 0; top: 0; bottom: 0; width: 8px; cursor: ew-resize; }
body.mobile #tkGrip { display: none; } body.mobile #tickerWrap.float { position: static; width: auto; border: none; box-shadow: none; padding: 0; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: #888; flex: 0 0 9px; box-shadow: 0 0 6px #888; } .dot.ok { background: var(--ask); box-shadow: 0 0 8px var(--ask); } .dot.bad { background: var(--bid); box-shadow: 0 0 8px var(--bid); }
#ticker { flex: 1; overflow: hidden; white-space: nowrap; height: 22px; line-height: 22px; border: 1px solid var(--border); border-radius: 4px; background: var(--btn); position: relative; }
#ticker[hidden] { display: none; } .tk-track { display: inline-block; white-space: nowrap; animation: tkscroll var(--tk-dur, 60s) linear infinite; padding-left: 100%; } #ticker:hover .tk-track { animation-play-state: paused; }
.tk-track a { color: var(--text); text-decoration: none; margin-right: 34px; font-size: 11px; } .tk-track a:hover { color: var(--accent); } .tk-track .src { font-size: 9px; color: var(--accent); border: 1px solid var(--accent); border-radius: 3px; padding: 0 4px; margin-right: 6px; } .tk-track .tg { color: var(--muted); font-size: 9px; margin-left: 5px; }
@keyframes tkscroll { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.cwrap .newsStrip { display: none !important; }
.sprow .star { border: none; background: transparent; color: var(--muted); font-size: 15px; padding: 0; line-height: 1; cursor: pointer; } .sprow .star.on, .sprow .star:hover { color: #ffd54f; } #spWl { max-width: 120px; }
.sprow .spoff { padding: 0 5px; font-size: 9px; margin-left: 4px; }

/* login gate */
#authGate { position: fixed; inset: 0; z-index: 200000; display: flex; align-items: center; justify-content: center; background: var(--bg); } #authGate[hidden] { display: none; }
.agBox { display: flex; flex-direction: column; gap: 10px; width: min(340px, 92vw); padding: 26px 28px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.agBox .brand.big { font-size: 26px; margin-bottom: 4px; } .agBox h2 { margin: 0; font-size: 16px; font-weight: 600; } .agBox input { padding: 8px 10px; font-size: 13px; } .agBox button { padding: 8px; font-size: 13px; }
.agBox a { color: var(--cy); font-size: 12px; text-align: center; } .agBox .neg:empty { display: none; } .agBox .sub:empty { display: none; }
/* broker window */
.brk { padding: 8px; font-size: 12px; overflow: auto; height: 100%; box-sizing: border-box; } .brk h4 { margin: 10px 0 4px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.brkhead { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; } .brkhead .grow { flex: 1; }
.brkgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .brkgrid .bc { border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; background: rgba(0,0,0,.15); } .brkgrid .n { font-size: 10px; color: var(--muted); } .brkgrid .v { font-size: 13px; font-weight: 600; margin-top: 2px; }
.brktbl .br { display: grid; grid-template-columns: 1.3fr 1fr 1.4fr 1fr; gap: 6px; padding: 4px 6px; border-bottom: 1px solid var(--border); cursor: pointer; } .brktbl .br:hover { background: rgba(255,255,255,.05); }
#userChip { margin-left: 2px; }

/* broker connect popup */
.bcx { display: flex; flex-direction: column; gap: 12px; max-width: 100%; }
.bcx-reason { padding: 8px 10px; border-left: 3px solid var(--cy); background: rgba(0,229,255,.06); font-size: 12px; }
.bcx-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.bcard { display: flex; flex-direction: column; gap: 6px; align-items: stretch; text-align: left; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: rgba(255,255,255,.03); cursor: pointer; }
.bcard:hover { border-color: var(--cy); } .bcard.on { border-color: var(--cy); box-shadow: 0 0 0 1px var(--cy) inset; background: rgba(0,229,255,.06); }
.bcard .bn { font-size: 12px; font-weight: 600; } .bcard .bd { font-size: 11px; color: var(--muted); } .bcard .bon { font-size: 11px; color: var(--gn); }
.blogo { width: 100%; max-width: 170px; height: 44px; display: block; }
.bcx-form { display: grid; grid-template-columns: 120px 1fr; gap: 8px 12px; align-items: center; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: rgba(0,0,0,.15); }
.bcx-form .bcx-title { grid-column: 1 / -1; display: flex; gap: 12px; align-items: center; } .bcx-form .bcx-title .blogo { width: 120px; height: 34px; }
.bcx-form label { font-size: 12px; color: var(--muted); } .bcx-form input, .bcx-form select { padding: 6px 8px; } .bcx-form .row { display: flex; gap: 8px; align-items: center; } .bcx-form .neg:empty { display: none; } .bcx-form .neg { grid-column: 1 / -1; }
.bcx-form .bcx-title + label { margin-top: 2px; } .bcx-form > .row:last-child { grid-column: 2; }
.bcx-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.brkb { border: 1px solid var(--border); border-radius: 8px; padding: 8px; margin-bottom: 10px; } .brkbh { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .brkbh .blogo { width: 110px; height: 30px; } .brkbh .sub { flex: 1; }
.bcx, .bcx-form, .bcx-cards { min-width: 0; }
.bcx-form input, .bcx-form select { width: 100%; min-width: 0; box-sizing: border-box; } .bcx-form .row select { flex: 1; } .bcx-form .row { min-width: 0; }
.bcx-form .bcx-title .sub { word-break: break-word; }
@media (max-width: 640px) { .bcx-form { grid-template-columns: 1fr; } .bcx-form > .row:last-child { grid-column: 1; } .bcx-form .neg { grid-column: 1; } }
.bcx-cards { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.bcx-form .bcx-title .blogo { flex: 0 0 120px; }
#layoutSeg[hidden], .tb[hidden] { display: none !important; }

/* ---------------- mobile (phones / tablets) ---------------- */
canvas { touch-action: none; }
#mtabs { display: flex; gap: 4px; padding: 4px 6px; overflow-x: auto; background: var(--panel); border-top: 1px solid var(--border); flex: 0 0 auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } #mtabs::-webkit-scrollbar { display: none; }
#mtabs button { flex: 0 0 auto; min-height: 36px; padding: 4px 12px; font-size: 13px; white-space: nowrap; } #mtabs[hidden] { display: none; }
#desk.mobile .win { position: absolute; inset: 0 !important; width: 100% !important; height: 100% !important; display: none; border-radius: 0; border: none; box-shadow: none; }
#desk.mobile .win.active { display: flex; } #desk.mobile .rs { display: none; } #desk.mobile .win-title button[data-a="min"], #desk.mobile .win-title button[data-a="max"] { display: none; }
#desk.mobile .win-title { height: 30px; font-size: 11px; } #desk.mobile .win-title button { font-size: 14px; padding: 0 10px; }
body.mobile { font-size: 13px; } body.mobile #app { height: 100dvh; }
body.mobile #topbar { gap: 4px; padding: 4px 6px; flex-wrap: nowrap; overflow: hidden; }
body.mobile #topbar > .tb:not(.mob), body.mobile #topbar > .seg, body.mobile #feedStatus, body.mobile #btnMulti, body.mobile #userChip, body.mobile #tickerOn { display: none !important; }
body.mobile #btnMore { display: inline-block !important; min-height: 34px; min-width: 42px; font-size: 18px; padding: 0 10px; } body.mobile .brand { font-size: 16px; }
body.mobile #btnMore[hidden] { display: none !important; }
body.mobile .cbar { gap: 3px; padding: 3px 4px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; } body.mobile .cbar::-webkit-scrollbar { display: none; }
body.mobile .cbar select, body.mobile .cbar input, body.mobile .cbar button { min-height: 30px; font-size: 12px; padding: 2px 8px; } body.mobile .cbar .cstatus { display: none; } body.mobile .cbar .lbl { white-space: nowrap; }
body.mobile .cwrap .btnLive { right: 70px; bottom: calc(var(--below-main, 26px) + 8px); font-size: 13px; padding: 6px 12px; } body.mobile .cwrap .chartInfo { font-size: 10px; max-width: 70%; white-space: pre-wrap; }
body.mobile .ctx { min-width: 220px; max-width: 94vw; max-height: 78vh; overflow-y: auto; font-size: 14px; } body.mobile .ctx > div { padding: 9px 14px; } body.mobile .ctx .sec { padding: 6px 14px 2px; }
body.mobile .modalBox, body.mobile #modal .modalBox.wide { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; border: none; }
body.mobile #modalBody { padding: 10px; } body.mobile #modalBody input, body.mobile #modalBody select, body.mobile #modalBody button { min-height: 34px; font-size: 14px; } body.mobile .form { grid-template-columns: 1fr; } body.mobile .form label { margin-top: 6px; }
body.mobile .sprow { grid-template-columns: 30px 1fr 70px; } body.mobile .sprow .nm, body.mobile .sprow .chg { display: none; } body.mobile .sprow { min-height: 38px; align-items: center; } body.mobile .spcats { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; } body.mobile .spcats button { flex: 0 0 auto; min-height: 32px; }
body.mobile .bcx-cards { grid-template-columns: 1fr 1fr; } body.mobile .bcard { padding: 8px; } body.mobile .blogo { height: 36px; }
body.mobile #replayBar { flex-wrap: wrap; gap: 4px; } body.mobile #replayBar button { min-height: 32px; }
body.mobile .newsPop { left: 8px; right: 8px; width: auto; max-width: none; font-size: 13px; }
body.mobile .tabs button { min-height: 32px; padding: 4px 10px; } body.mobile .brk { font-size: 13px; } body.mobile .brkgrid { grid-template-columns: 1fr 1fr; }
body.mobile .agBox { width: 100vw; height: 100dvh; border-radius: 0; justify-content: center; }
@media (max-width: 480px) { body.mobile .bcx-cards { grid-template-columns: 1fr; } }
body.mobile .splist { max-height: none; flex: 1; min-height: 0; } body.mobile .sp { display: flex; flex-direction: column; height: 100%; }

/* economy map: country popup on phones */
.mxpane[data-p=map] { position: relative; } .mxpop { position: absolute; inset: 0; z-index: 6; overflow: auto; padding: 12px; background: var(--panel); font-size: 13px; } .mxpop[hidden] { display: none; }
.mxpop .mxch .flag { font-size: 34px; } .mxpop .mxch b { font-size: 18px; } .mxpop .mxclose { font-size: 22px; padding: 4px 10px; }
.mxpop .mxrate { font-size: 14px; margin: 6px 0 10px; } .mxpop .mxgrid { grid-template-columns: 1fr 1fr; gap: 8px; } .mxpop .mxind { padding: 8px; } .mxpop .mxind .n { font-size: 11px; } .mxpop .mxind .v { font-size: 16px; } .mxpop .mxind .sp { height: 56px; }
.mxpop .mxact { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .mxpop .mxact button { min-height: 36px; font-size: 13px; }
@media (max-width: 420px) { .mxpop .mxgrid { grid-template-columns: 1fr; } }

/* phones: chart bar = symbol + 4 timeframes + ⋯ ; the rest folds out under ⋯ */
.cbarMore { display: none; }
body.mobile .cbar { flex-wrap: wrap; overflow: visible; row-gap: 4px; }
body.mobile .cbar > *:not(.symSel):not(.tfSeg):not(.cbarMore) { display: none; }
body.mobile .cbar.open > * { display: inline-flex !important; } body.mobile .cbar.open > .cstatus { display: none !important; } body.mobile .cbar.open > label.lbl { align-items: center; gap: 4px; } body.mobile .cbar.open > select, body.mobile .cbar.open > input { display: inline-block !important; }
body.mobile .cbar .cbarMore { display: inline-flex; margin-left: auto; min-width: 36px; justify-content: center; font-size: 16px; }
body.mobile .cbar .tfSeg button[data-tf="30"], body.mobile .cbar .tfSeg button[data-tf="180"], body.mobile .cbar .tfCustom { display: none; }
body.mobile .cbar.open .tfSeg button[data-tf="30"], body.mobile .cbar.open .tfSeg button[data-tf="180"], body.mobile .cbar.open .tfCustom { display: inline-block; }
body.mobile .cbar .symSel { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

body.mobile .ctx .ctxX { position: sticky; top: 0; text-align: right; padding: 6px 12px; font-size: 18px; color: var(--muted); background: var(--btn); border-bottom: 1px solid var(--border); z-index: 1; } body.mobile .ctx .ctxX:hover { background: var(--btn); color: #fff; }

.tfSeg .tfAdd { padding: 1px 8px; font-weight: 700; } body.mobile .cbar .tfSeg .tfAdd { display: inline-block; min-width: 34px; } body.mobile .cbar .tfSeg .xtf { display: inline-block; }

body.mobile .ctx .row { flex-wrap: wrap; gap: 6px; padding: 6px 12px; } body.mobile .ctx .row button { min-height: 34px; padding: 4px 12px; font-size: 13px; } body.mobile .ctx .crow input[type=color] { width: 44px; height: 30px; } body.mobile .ctx .crow { padding: 6px 12px; }

/* phones: news ticker on its own row under the header (☰ menu or long-press to turn it off) */
body.mobile #topbar { flex-wrap: wrap; } body.mobile #tickerWrap { flex: 1 0 100%; min-width: 0; order: 99; gap: 6px; margin-top: 2px; } body.mobile #tickerWrap:has(#ticker[hidden]) { display: none !important; }
body.mobile #ticker { height: 26px; line-height: 26px; } body.mobile .tk-track a { font-size: 12px; }

/* phones: Menu button far left, logo centered */
body.mobile #topbar { position: relative; min-height: 42px; } body.mobile #btnMore { order: -1; font-size: 13px; font-weight: 600; letter-spacing: .5px; min-width: 64px; padding: 0 12px; }
body.mobile .brand { position: absolute; left: 50%; top: 4px; transform: translateX(-50%); margin: 0; line-height: 34px; pointer-events: none; }

/* phones with a single chart: no window title bar, the chart bar is the header */
body.mobile.one-chart #desk.mobile .win[data-kind="chart"]:not([data-id="macro"]) > .win-title { display: none; }

#ticker.js-marquee .tk-track { animation: none; padding-left: 0; will-change: transform; } body.mobile #ticker { touch-action: pan-y; }

/* bottom sheet (phones) */
#sheet { position: fixed; inset: 0; z-index: 100002; } #sheet[hidden] { display: none; } .sheet-bg { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.sheet-box { position: absolute; left: 0; right: 0; bottom: 0; max-height: 78vh; display: flex; flex-direction: column; background: var(--panel); border-top: 1px solid var(--border); border-radius: 16px 16px 0 0; box-shadow: 0 -10px 40px rgba(0,0,0,.6); animation: sheetUp .18s ease-out; padding-bottom: 6px; }
@keyframes sheetUp { from { transform: translateY(40px); opacity: .6; } to { transform: none; opacity: 1; } }
.sheet-handle { width: 42px; height: 4px; border-radius: 2px; background: var(--muted); margin: 8px auto 2px; opacity: .6; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 14px 8px; font-size: 14px; } .sheet-head button { min-height: 32px; min-width: 40px; font-size: 16px; }
#sheetBody { overflow-y: auto; padding: 0 12px 14px; }
.sh-sec { padding: 8px 0; border-top: 1px solid var(--border); } .sh-sec:first-child { border-top: none; } .sh-lab { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.sh-row { display: flex; flex-wrap: wrap; gap: 8px; } .sh-row2 { display: grid; grid-template-columns: 1fr; gap: 4px; } @media (min-width: 520px) { .sh-row2 { grid-template-columns: 1fr 1fr; gap: 10px; } }
.chip { min-height: 38px; padding: 6px 14px; border-radius: 19px; font-size: 14px; } .chip.on { background: var(--accent); color: #fff; border-color: var(--accent); } .chip.wide { flex: 1 1 100%; text-align: left; }
.sh-step { display: flex; align-items: center; gap: 6px; margin-top: 8px; } .sh-step span { font-size: 12px; color: var(--muted); min-width: 56px; } .sh-step button { min-width: 40px; min-height: 38px; font-size: 18px; border-radius: 10px; } .sh-step input { flex: 1; min-width: 0; min-height: 38px; font-size: 15px; text-align: center; }
body.mobile .cbar .cbarMore { font-size: 18px; }

/* first-run theme picker */
.onb .thgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.thcard { padding: 6px; border-radius: 10px; text-align: center; display: flex; flex-direction: column; gap: 6px; } .thcard.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.thprev { border: 1px solid; border-radius: 6px; overflow: hidden; height: 92px; display: flex; flex-direction: column; font-size: 9px; }
.thhead { display: flex; align-items: center; gap: 4px; padding: 3px 6px; font-weight: 700; } .thhead span { display: inline-block; width: 22px; height: 8px; border-radius: 2px; margin-left: auto; }
.thbars { flex: 1; display: flex; align-items: flex-end; gap: 3px; padding: 4px 8px 2px; } .thbars i { flex: 1; border-radius: 1px; display: block; }
.thax { padding: 2px 6px; font-size: 8px; text-align: left; } .thname { font-size: 12px; }
body.mobile .onb .thgrid { grid-template-columns: 1fr 1fr; }

.agBox button.alt { background: transparent; border-color: var(--border); color: var(--accent); } .agBox input[hidden], .agBox button[hidden] { display: none; }

.cwrap .chartStats { position: absolute; left: 8px; top: 6px; pointer-events: none; color: #ffffff; font-size: 11px; text-shadow: 0 0 3px #000, 0 0 3px #000; white-space: nowrap; letter-spacing: .2px; } .cwrap .chartStats .k { color: #ffffffaa; margin-left: 8px; } .cwrap .chartStats .k:first-child { margin-left: 0; } .cwrap .chartStats b { font-weight: 600; } .cwrap .chartStats .pos { color: var(--ask); } .cwrap .chartStats .neg { color: var(--bid); }
body.mobile .cwrap .chartStats { font-size: 10px; white-space: normal; max-width: calc(100% - 70px); line-height: 1.35; } body.mobile .cwrap .chartInfo { top: 34px; }

/* left tool rail */
#main { display: flex; flex: 1; min-height: 0; position: relative; }
#toolRail { flex: 0 0 44px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; background: var(--panel); border-right: 1px solid var(--border); overflow-y: auto; overflow-x: hidden; scrollbar-width: none; } #toolRail::-webkit-scrollbar { display: none; } #toolRail[hidden] { display: none; }
#toolRail hr { width: 24px; border: none; border-top: 1px solid var(--border); margin: 4px 0; }
#toolRail .rb { width: 36px; height: 36px; padding: 0; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; border-radius: 8px; color: var(--text); }
#toolRail .rb svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#toolRail .rb:hover { background: var(--btn); border-color: var(--border); } #toolRail .rb.on { background: var(--accent); color: #fff; border-color: var(--accent); }
body.mobile #toolRail { flex-basis: 46px; padding: 4px 0; } body.mobile #toolRail .rb { width: 40px; height: 40px; } body.mobile #toolRail .rb svg { width: 24px; height: 24px; }
#railTab { position: absolute; left: 0; top: 40%; z-index: 99990; /* above every window: window z-indexes climb with each activation */ width: 26px; height: 46px; padding: 0; border-radius: 0 10px 10px 0; border-left: none; font-size: 16px; opacity: .85; } #railTab[hidden] { display: none; } #railTab.on { left: 46px; background: var(--accent); color: #fff; border-color: var(--accent); }
#toolSeg { display: none !important; } /* the left rail replaces the header tool row on every device */

.ctx .emojirow { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; padding: 6px 10px; } .ctx .emojirow button { font-size: 20px; padding: 4px 0; background: transparent; border-color: transparent; } .ctx .emojirow button:hover { background: var(--btn); border-color: var(--border); }
.favind h4 { margin: 10px 0 4px; font-size: 11px; color: var(--muted); text-transform: uppercase; } .favind .chk { display: inline-flex; align-items: center; gap: 6px; margin: 3px 12px 3px 0; min-height: 28px; }
body.mobile .ctx .emojirow button { font-size: 26px; min-height: 40px; }

#bootErr { position: fixed; inset: 0; z-index: 300000; display: flex; align-items: center; justify-content: center; background: var(--bg); } #bootErr .agBox { gap: 10px; } #bootErr .agBox button { padding: 8px; }

/* news alerts window — card layout */
.nwa { display: flex; flex-direction: column; height: 100%; min-height: 0; font-size: 12px; padding: 0 10px; overflow: auto; } .nwa .sh-sec.grow { flex: 1; min-height: 120px; display: flex; flex-direction: column; } .nwa .nfeed { flex: 1; overflow: auto; min-height: 0; }
.nrcards { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.nrcard { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 10px; background: rgba(255,255,255,.03); } .nrcard.off { opacity: .55; }
.nrcard .nrtxt { flex: 1; min-width: 0; display: flex; flex-direction: column; } .nrcard .nrtxt b { font-size: 13px; } .nrcard .nrtxt span { color: var(--muted); font-size: 11px; } .nrcard .nrx { background: transparent; border-color: transparent; color: var(--muted); font-size: 14px; } .nrcard .nrx:hover { color: #fff; border-color: var(--border); }
.chip.sm { min-height: 28px; padding: 2px 10px; font-size: 12px; } .chip.tog { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; } .chip.tog input { margin: 0; }
.nradd { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 6px; } .nradd select { min-height: 32px; flex: 1; min-width: 120px; } .nradd .chip { min-height: 32px; }
.nwa .sh-step { margin-top: 6px; } .nwa .sh-step span.unit { min-width: 0; color: var(--muted); font-size: 11px; } .nwa .sh-step input { max-width: 90px; flex: 0 1 90px; }
.nfhead { padding: 2px 0 6px; }
.ncard { display: block; text-decoration: none; color: var(--text); padding: 8px 10px; margin-bottom: 6px; border: 1px solid var(--border); border-radius: 10px; background: rgba(255,255,255,.03); } .ncard:hover { border-color: var(--accent); }
.ncard .nmeta { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .ncard .src { font-size: 9px; color: var(--accent); border: 1px solid var(--accent); border-radius: 3px; padding: 0 5px; } .ncard .ago { color: var(--muted); font-size: 10px; } .ncard .tg { color: var(--muted); font-size: 10px; margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.ncard .ntitle { font-size: 12.5px; line-height: 1.35; }
.nrempty { padding: 6px 0; }
body.mobile .nwa { font-size: 13px; } body.mobile .ncard .ntitle { font-size: 14px; } body.mobile .nrcard .nrtxt b { font-size: 14px; }

/* ticker docked along the bottom of the workspace */
#tickerWrap.dockb { order: 0; flex: 0 0 auto; margin: 0; padding: 3px 8px; background: var(--panel); border-top: 1px solid var(--border); }
body.tkDragging { user-select: none; } body.tkDragging[data-tkzone="top"] #topbar { box-shadow: inset 0 -3px 0 var(--accent); } body.tkDragging[data-tkzone="bottom"] #main { box-shadow: inset 0 -3px 0 var(--accent); }
#tickerWrap.float { transition: none; }

/* indicators dialog: cards per active indicator, library rows that are on the chart light up */
.indcard { border: 1px solid var(--border); border-radius: 10px; padding: 6px 10px; margin-bottom: 8px; background: rgba(255,255,255,.03); transition: border-color .2s, box-shadow .2s; } .indcard .params { margin: 6px 0 4px 4px; } .indcard .item small { color: var(--muted); font-size: 10px; margin-right: 6px; }
.indcard.hl { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent), 0 0 18px rgba(124,92,255,.35); animation: cardPulse 1.2s ease-out 1; } @keyframes cardPulse { 0% { box-shadow: 0 0 0 6px var(--accent); } 100% { box-shadow: 0 0 0 2px var(--accent); } }
.indList div.item { cursor: pointer; border-radius: 6px; padding: 4px 6px; } .indList div.item:hover { background: var(--btn); } .indList div.item.on { background: rgba(124,92,255,.10); border-left: 3px solid var(--accent); } .indList .onc { margin-left: auto; font-style: normal; font-size: 10px; color: var(--accent); }
.indGrid .active { max-height: 70vh; overflow: auto; padding-right: 4px; }
body.mobile .indGrid { grid-template-columns: 1fr; } body.mobile .indGrid .active { max-height: none; }

/* header: proper menu bar — flat text buttons on a gradient */
#topbar { background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 70%, var(--accent) 30%) 0%, var(--panel) 55%, var(--head) 100%); border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, var(--accent) 40%); box-shadow: 0 2px 10px rgba(0,0,0,.35); gap: 2px; padding: 0 10px; min-height: 40px; }
#topbar .brand { margin-right: 14px; }
#topbar > .tb { background: transparent; border: 1px solid transparent; border-radius: 6px; padding: 7px 12px; font-size: 12.5px; font-weight: 500; letter-spacing: .2px; color: var(--text); line-height: 1; }
#topbar > .tb:hover { background: rgba(255,255,255,.07); border-color: transparent; color: #fff; } #topbar > .tb.on { background: rgba(255,255,255,.10); color: #fff; box-shadow: inset 0 -2px 0 var(--accent); }
#topbar > #btnSettings { color: var(--text); } #topbar > #userChip { margin-left: auto; font-weight: 600; color: var(--text); } #topbar > #userChip::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ask); margin-right: 8px; vertical-align: 1px; }
#topbar > #tickerWrap { margin-top: 0; padding: 3px 0 4px; }
body.mobile #topbar { background: var(--panel); box-shadow: none; padding: 4px 6px; } body.mobile #topbar > #userChip { margin-left: 0; }
body.theme-win95 #topbar { background: #c0c0c0; box-shadow: none; } body.theme-light #topbar { background: linear-gradient(180deg, #eef0f6, #f7f8fa 60%, #e9edf5); }

/* sound popover + header speaker */
#btnSound svg { vertical-align: -3px; } #topbar > #btnSound { padding: 7px 9px; } #btnSound.muted { color: var(--bid); }
#soundPop { min-width: 260px; } #soundPop .crow { display: flex; align-items: center; gap: 8px; padding: 6px 12px; } #soundPop .crow > span:first-child { flex: 1; } #soundPop .crow.tog { cursor: pointer; } #soundPop .crow:hover { background: transparent; } #soundPop input[type=checkbox] { width: 18px; height: 18px; }
body.mobile #btnSound { display: none !important; } body.mobile #soundPop { left: 8px !important; right: 8px; top: 50px !important; }

/* ---------- phone chrome: gradient header, pill menu button, app-style bottom tabs, tile menu ---------- */
body.mobile #topbar { background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 68%, var(--accent) 32%) 0%, var(--panel) 60%, var(--head) 100%); border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, var(--accent) 40%); box-shadow: 0 2px 12px rgba(0,0,0,.4); padding: 6px 10px 4px; min-height: 46px; }
body.mobile #btnMore { background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.14); border-radius: 18px; min-height: 34px; padding: 0 16px; font-size: 13px; font-weight: 600; color: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
body.mobile #btnMore:active { background: var(--accent); border-color: var(--accent); }
body.mobile .brand { top: 6px; font-size: 17px; letter-spacing: 1.5px; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
body.mobile #tickerWrap { margin-top: 4px; } body.mobile #ticker { background: rgba(0,0,0,.28); border-color: rgba(255,255,255,.08); border-radius: 13px; padding: 0 8px; }
#mtabs { background: linear-gradient(0deg, color-mix(in srgb, var(--panel) 75%, var(--accent) 25%) 0%, var(--panel) 100%); border-top: 1px solid color-mix(in srgb, var(--border) 60%, var(--accent) 40%); box-shadow: 0 -2px 12px rgba(0,0,0,.4); padding: 6px 8px 6px; gap: 6px; }
#mtabs button { border-radius: 18px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); min-height: 36px; padding: 4px 14px; font-weight: 500; color: var(--text); }
#mtabs button.on { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 55%, transparent); }
.mgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 4px 0 8px; }
.mtile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px 8px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07); min-height: 78px; color: var(--text); }
.mtile:active { background: var(--accent); color: #fff; } .mtile .mi { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); }
.mtile:active .mi { background: rgba(255,255,255,.25); color: #fff; } .mtile .mi svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mtile .ml { font-size: 12px; font-weight: 500; line-height: 1.15; text-align: center; } .mtile .ms { font-size: 10px; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 360px) { .mgrid { grid-template-columns: repeat(3, 1fr); } }
body.mobile .sheet-box { background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 85%, var(--accent) 15%), var(--panel) 30%); }
body.theme-win95 #mtabs, body.theme-win95.mobile #topbar { background: #c0c0c0; box-shadow: none; }

/* news alerts — app-style cards (matches the phone menu) */
.nwa { padding: 0 10px 8px; } .nwa .sh-lab { margin: 10px 0 8px; }
.nrcard { gap: 10px; padding: 8px 10px; border-radius: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, transparent), rgba(255,255,255,.03)); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border)); }
.nrcard .mi { width: 36px; height: 36px; border-radius: 10px; flex: 0 0 36px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); } .nrcard .mi svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nrcard.off { opacity: .5; filter: grayscale(.6); } .nrcard .chip.sm.tog.on { box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 50%, transparent); }
.nradd { padding: 10px; border-radius: 14px; border: 1px dashed color-mix(in srgb, var(--accent) 40%, var(--border)); background: rgba(255,255,255,.02); flex-direction: column; align-items: stretch; gap: 8px; }
.nradd select { min-height: 38px; border-radius: 10px; padding: 6px 10px; font-size: 13px; } .nradd .chip { min-height: 40px; border-radius: 12px; background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; font-size: 14px; justify-content: center; }
.nwa > .sh-sec > .sub { margin-top: 8px; font-size: 11px; line-height: 1.4; }
.ncard { border-radius: 14px; padding: 10px 12px; background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)); border: 1px solid var(--border); margin-bottom: 8px; } .ncard:active { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.ncard .nmeta { gap: 6px; flex-wrap: wrap; margin-bottom: 6px; } .ncard .src { font-size: 10px; border-radius: 10px; padding: 2px 8px; background: color-mix(in srgb, var(--accent) 18%, transparent); border: none; color: var(--accent); font-weight: 600; }
.ncard .ntag { font-size: 10px; border-radius: 10px; padding: 2px 8px; background: rgba(255,255,255,.06); color: var(--muted); } .ncard .ago { margin-left: auto; font-size: 10px; color: var(--muted); }
.ncard .ntitle { font-size: 13px; line-height: 1.4; font-weight: 500; } body.mobile .ncard .ntitle { font-size: 14.5px; }
.nfhead { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; padding: 0 0 8px; }
#desk.mobile .win[data-id="alerts"] .win-title, #desk.mobile .win[data-id="watch"] .win-title, #desk.mobile .win[data-id="broker"] .win-title, #desk.mobile .win[data-id="macro"] .win-title, #desk.mobile .win[data-id="book"] .win-title, #desk.mobile .win[data-id="bottom"] .win-title { height: 40px; font-size: 13px; text-transform: none; letter-spacing: .3px; font-weight: 600; background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 70%, var(--accent) 30%), var(--panel)); border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, var(--accent) 40%); }
#desk.mobile .win .win-title button[data-a="close"] { width: 34px; height: 34px; border-radius: 17px; background: rgba(255,255,255,.08); color: #fff; font-size: 16px; padding: 0; }

/* ---------- FRACTAL brand ---------- */
.brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; letter-spacing: 4px; font-size: 14px; color: #fff; } .brand .fmark { width: 22px; height: 22px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); } .brand .wordmark { font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif; font-weight: 300; letter-spacing: 5px; font-size: 15px; color: #f2f3f7; }
.agBox .brand.big { justify-content: center; margin-bottom: 2px; } .agBox .brand.big .fmark { width: 44px; height: 44px; } .agBox .brand.big .wordmark { font-size: 30px; letter-spacing: 9px; padding-left: 9px; }
.agBox .slogan { text-align: center; font-size: 10px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; white-space: nowrap; }
body.mobile .brand .wordmark { font-size: 15px; letter-spacing: 4px; } body.mobile .brand .fmark { width: 20px; height: 20px; }
body.theme-matrix .brand .wordmark, body.theme-retro .brand .wordmark { color: inherit; }
/* ---------- splash / loading screen ---------- */
#splash { position: fixed; inset: 0; z-index: 400000; background: #000; display: flex; align-items: center; justify-content: center; opacity: 1; transition: opacity .7s ease; } #splash[hidden] { display: none; } #splash.out { opacity: 0; pointer-events: none; }
#splash .sp-in { display: flex; flex-direction: column; align-items: center; gap: 18px; width: min(420px, 86vw); }
#splash img { width: 100%; max-width: 420px; opacity: 0; transform: scale(.94) translateY(10px); filter: blur(6px); transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.2,.8,.2,1), filter 1.1s ease; }
#splash.go img { opacity: 1; transform: none; filter: none; }
#splash .sp-bar { width: 60%; height: 2px; background: rgba(255,255,255,.12); border-radius: 1px; overflow: hidden; opacity: 0; transition: opacity .6s ease .6s; } #splash.go .sp-bar { opacity: 1; }
#splash .sp-bar i { display: block; height: 100%; width: 40%; background: linear-gradient(90deg, transparent, #fff, transparent); animation: spbar 1.4s ease-in-out infinite; } @keyframes spbar { 0% { transform: translateX(-120%); } 100% { transform: translateX(280%); } }
#splash .sp-status { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: #8b8d9c; opacity: 0; transition: opacity .6s ease .9s; } #splash.go .sp-status { opacity: 1; }

/* Fractal default theme: black + brushed steel. Silver accent needs dark text on filled controls. */
body:not([class*="theme-"]) button.on, body.theme-deepflow button.on, body:not([class*="theme-"]) .chip.on, body.theme-deepflow .chip.on, body:not([class*="theme-"]) #mtabs button.on, body.theme-deepflow #mtabs button.on, body:not([class*="theme-"]) .nradd .chip, body.theme-deepflow .nradd .chip, body:not([class*="theme-"]) #toolRail .rb.on, body.theme-deepflow #toolRail .rb.on, body:not([class*="theme-"]) .thcard.on, body.theme-deepflow .ctx div:hover, body:not([class*="theme-"]) .ctx div:hover, body.theme-deepflow #topbar > .tb.on, body:not([class*="theme-"]) .mtile:active, body.theme-deepflow .mtile:active { color: #0b0b0e; }
body:not([class*="theme-"]) button.on, body.theme-deepflow button.on, body:not([class*="theme-"]) .chip.on, body.theme-deepflow .chip.on, body:not([class*="theme-"]) #mtabs button.on, body.theme-deepflow #mtabs button.on { background: linear-gradient(180deg, #f2f3f7, #b4b7c3); border-color: #d9dbe3; text-shadow: none; }
body:not([class*="theme-"]) #topbar, body.theme-deepflow #topbar { background: linear-gradient(180deg, #2a2b33 0%, #141419 55%, #0a0a0d 100%); border-bottom-color: #3a3b45; }
body:not([class*="theme-"]) #mtabs, body.theme-deepflow #mtabs { background: linear-gradient(0deg, #202129, #0e0e12); border-top-color: #34353f; }
body:not([class*="theme-"]) .brand .wordmark, body.theme-deepflow .brand .wordmark { background: linear-gradient(180deg, #ffffff, #9a9dab); -webkit-background-clip: text; background-clip: text; color: transparent; }
body:not([class*="theme-"]) #topbar > .tb.on, body.theme-deepflow #topbar > .tb.on { box-shadow: inset 0 -2px 0 #e6e7ee; color: #fff; }
body:not([class*="theme-"]) .mtile .mi, body.theme-deepflow .mtile .mi { background: linear-gradient(135deg, #2b2c35, #17181e); color: #e3e5ec; border: 1px solid #3a3b45; }
body:not([class*="theme-"]) .sheet-box, body.theme-deepflow .sheet-box { background: linear-gradient(180deg, #1c1d24, #0e0e12 40%); }
body:not([class*="theme-"]) .win.active, body.theme-deepflow .win.active { border-color: #4a4b56; } body:not([class*="theme-"]) .win.active .win-title, body.theme-deepflow .win.active .win-title { background: linear-gradient(180deg, #1f2028, #13131a); }

.agBox h2, .agBox #agHint { text-align: center; } .agBox #agHint { font-size: 13px; color: var(--text); margin-top: 6px; } .agBox h2 { font-size: 18px; margin: 2px 0 6px; letter-spacing: .5px; }

.agBox #agTitle { display: none; } .agBox #agHint { font-size: 15px; font-weight: 600; color: #fff; margin: 4px 0 8px; }

/* news ticker: bigger, brighter, clearer separation */
#ticker { height: 28px; line-height: 28px; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border-color: rgba(255,255,255,.14); }
.tk-track a { font-size: 13px; color: #eceef3; margin-right: 0; padding-right: 26px; position: relative; } .tk-track a::after { content: '·'; position: absolute; right: 9px; color: var(--muted); font-weight: 700; }
.tk-track a:hover { color: #fff; text-decoration: underline; }
.tk-track .src { font-size: 10px; padding: 1px 7px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 22%, transparent); border: none; color: var(--accent); font-weight: 600; margin-right: 8px; vertical-align: 1px; }
.tk-track .tg { font-size: 10px; margin-left: 8px; color: var(--muted); }
body.mobile #ticker { height: 30px; line-height: 30px; } body.mobile .tk-track a { font-size: 14px; }
body:not([class*="theme-"]) .tk-track .src, body.theme-deepflow .tk-track .src { background: #2a2b33; color: #e6e7ee; border: 1px solid #3a3b45; }

/* welcome tour */
.tour { display: flex; flex-direction: column; gap: 12px; max-width: 760px; margin: 0 auto; }
.tour-art { border-radius: 12px; overflow: hidden; border: 1px solid var(--border); box-shadow: 0 10px 40px rgba(0,0,0,.5); background: #000; } .tour-art svg, .tour-art img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: top left; }
.tour h3 { margin: 6px 0 0; font-size: 20px; font-weight: 600; letter-spacing: .2px; } .tour p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text); }
.tour-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 6px; border-top: 1px solid var(--border); padding-top: 12px; }
.tour-chk { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); cursor: pointer; } .tour-chk input { width: 16px; height: 16px; }
.tour-dots { display: flex; gap: 8px; } .tour-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--border); cursor: pointer; display: block; } .tour-dots i.on { background: var(--accent); }
.tour-btns { display: flex; gap: 8px; } .tour-btns button { min-height: 38px; padding: 6px 18px; border-radius: 10px; font-size: 14px; } .tour-btns button.alt { background: transparent; }
.tour .thgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; max-height: 46vh; overflow: auto; padding: 2px; }
body.mobile .tour .thgrid { grid-template-columns: 1fr 1fr; max-height: 50vh; }
.tour h3 { margin-top: 0; }
body.mobile .tour h3 { font-size: 18px; } body.mobile .tour p { font-size: 14px; } body.mobile .tour-foot { flex-direction: column; align-items: stretch; } body.mobile .tour-btns button { flex: 1; }

/* ---------- Chart analyzer: modern report (white text, red/green only for bias and direction) ---------- */
.modalBox:has(.anz) { border-radius: 16px; border-color: rgba(255,255,255,.10); background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 90%, #fff 10%) 0%, var(--panel) 120px); box-shadow: 0 30px 90px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.04) inset; }
.anz, .anz *, .rep, .rep * { font-family: "Segoe UI", Inter, system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; }
.anz { color: #fff; }
.anzpick { gap: 12px; margin-bottom: 14px; }
.anzbtn { border-radius: 14px; padding: 14px 16px; gap: 6px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10); color: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.25); transition: border-color .15s, background .15s, transform .15s; }
.anzbtn:hover { border-color: rgba(255,255,255,.28); transform: translateY(-1px); }
.anzbtn b { font-size: 15px; font-weight: 600; letter-spacing: .2px; } .anzbtn .sub { color: rgba(255,255,255,.62); font-size: 12.5px; line-height: 1.45; }
.anzbtn.on, body:not([class*="theme-"]) .anzbtn.on, body.theme-deepflow .anzbtn.on { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 34%, transparent), rgba(255,255,255,.04)); border-color: var(--accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent) inset, 0 8px 24px rgba(0,0,0,.35); color: #fff; }
.anzbtn.on b, .anzbtn.on .sub { color: #fff; }
.rep { font-size: 13.5px; line-height: 1.55; color: #fff; gap: 14px; }
.rep .card { border-radius: 14px; padding: 16px 18px; background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.09); color: #fff; box-shadow: 0 6px 22px rgba(0,0,0,.28); }
.rep .card.pos, .rep .card.neg, .rep .card.neu, .rep .chip, .rep .chip.pos, .rep .chip.neg, .rep .chip.neu, .rep .lv, .rep .lv.pos, .rep .lv.neg, .rep li, .rep li.pos, .rep li.neg, .rep details.sg, .rep .pts { color: #fff; }
.rep h3 { font-size: 11px; letter-spacing: 1.4px; color: rgba(255,255,255,.62); margin-bottom: 8px; }
.rep .sub { color: rgba(255,255,255,.58); font-size: 12.5px; }
.rep .verdict { border-width: 1px; gap: 20px; padding: 18px 20px; }
.rep .verdict.pos { border-color: color-mix(in srgb, var(--ask) 55%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--ask) 16%, transparent), rgba(255,255,255,.02) 60%); }
.rep .verdict.neg { border-color: color-mix(in srgb, var(--bid) 55%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--bid) 16%, transparent), rgba(255,255,255,.02) 60%); }
.rep .verdict.neu { border-color: rgba(255,255,255,.18); }
.rep .bias { font-size: 34px; font-weight: 800; letter-spacing: 2.5px; margin: 6px 0 4px; line-height: 1.1; } .rep .verdict.neu .bias { color: #fff; }
.rep .meter { height: 8px; border-radius: 4px; background: rgba(255,255,255,.10); margin: 8px 0 8px; } .rep .verdict.pos .meter div { background: linear-gradient(90deg, color-mix(in srgb, var(--ask) 70%, #fff 0%), var(--ask)); } .rep .verdict.neg .meter div { background: linear-gradient(90deg, color-mix(in srgb, var(--bid) 70%, #fff 0%), var(--bid)); } .rep .verdict.neu .meter div { background: rgba(255,255,255,.5); }
.rep ul.plain li { margin: 5px 0; color: #fff; } .rep ul.plain li::marker { color: rgba(255,255,255,.45); }
.rep .plan.pos { border-color: color-mix(in srgb, var(--ask) 45%, transparent); } .rep .plan.neg { border-color: color-mix(in srgb, var(--bid) 45%, transparent); }
.rep .planrow { gap: 22px; margin: 6px 0 10px; } .rep .planrow .k { color: rgba(255,255,255,.55); font-size: 10.5px; letter-spacing: 1px; } .rep .planrow b { font-size: 20px; font-weight: 700; color: #fff; }
.rep .planrow b.pos, .rep .plan .pos b { color: var(--ask); } .rep .planrow b.neg { color: var(--bid); }
.rep .chip { border-radius: 12px; padding: 10px 12px; background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); min-width: 120px; gap: 2px; } .rep .chip b { font-size: 14px; }
.rep .chip.pos { border-color: color-mix(in srgb, var(--ask) 55%, transparent); } .rep .chip.neg { border-color: color-mix(in srgb, var(--bid) 55%, transparent); }
.rep .chip.pos > span:nth-child(2) { color: var(--ask); font-weight: 600; } .rep .chip.neg > span:nth-child(2) { color: var(--bid); font-weight: 600; }
.rep .lvh { font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 6px; } .rep .lvh.pos { color: var(--ask); } .rep .lvh.neg { color: var(--bid); }
.rep .lv { border-radius: 10px; background: rgba(255,255,255,.035); border-color: rgba(255,255,255,.08); padding: 8px 10px; } .rep .lv b { font-size: 14px; color: #fff; } .rep .lv .d, .rep .lv .s { color: rgba(255,255,255,.55); font-size: 11px; } .rep .lv i { color: #fff; font-weight: 600; }
.rep details.sg { border-radius: 10px; background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.08); padding: 6px 10px; } .rep details.sg summary b { font-size: 13.5px; }
.rep li { border-top-color: rgba(255,255,255,.06); padding: 5px 0; } .rep li.neu { color: rgba(255,255,255,.55); }
.rep li.pos .w, .rep li.pos .pts, .rep .pts.pos { color: var(--ask); } .rep li.neg .w, .rep li.neg .pts, .rep .pts.neg { color: var(--bid); }
.rep ul.news li a { color: #fff; } .rep .src { color: rgba(255,255,255,.7); border-color: rgba(255,255,255,.25); }
.rep .disc { color: rgba(255,255,255,.45); font-size: 11.5px; }
body.mobile .rep { font-size: 14px; } body.mobile .rep .bias { font-size: 28px; }
/* ---------- indicator windows (sub-pane indicators as their own windows) ---------- */
.win[data-kind="ipane"] .win-body { padding: 0; overflow: hidden; position: relative; }
.win[data-kind="ipane"] .win-body > .ipane { position: absolute !important; inset: 0; z-index: 1; } .ipane canvas { display: block; cursor: default; }
.win[data-kind="ipane"] .win-title { height: 22px; font-size: 9.5px; }