/* ═══════════════════════════════════════════════════════════════════════════
   Vii FIX Trader — app shell + components. Every rule composes tokens from
   tokens.css (the ViiSync design system, loaded first). Class names and values
   are taken 1:1 from design-system/layout-patterns.md + components.md.
   ═══════════════════════════════════════════════════════════════════════════ */

svg.i{display:block}

/* ── app shell ─────────────────────────────────────────────────────────── */
.app{display:flex;flex-direction:column;height:100vh;overflow:hidden;background:var(--bg);color:var(--fg)}
.body{display:flex;flex:1;min-height:0}
.main{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--bg)}
.content{flex:1;overflow:auto;padding:24px 28px 40px 34px}
.content.flush{padding:0;overflow:hidden}

/* ── title bar + tabs ──────────────────────────────────────────────────── */
.titlebar{display:flex;align-items:center;height:36px;flex:0 0 36px;background:var(--titlebar);border-bottom:1px solid var(--border-tb);padding:0 8px;gap:2px;z-index:6}
.tb-icons{display:flex;align-items:center;gap:2px;flex:0 0 auto}
.logo{width:24px;height:24px;margin:0 8px 0 2px;color:var(--logo-ink);display:block;flex:0 0 auto;filter:drop-shadow(0 0 5px var(--logo-glow)) drop-shadow(0 0 1px var(--logo-glow))}
html[data-theme="light"] .logo{filter:none}
.iconbtn{width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--fg-dim);border-radius:6px}
.iconbtn:hover{background:var(--hover);color:var(--fg)}
.iconbtn.on{color:var(--fg)}
.tb-tabs{display:flex;align-items:flex-end;flex:1;min-width:0;overflow-x:auto;height:100%;padding-left:0}
.tab{position:relative;display:flex;align-items:center;gap:8px;padding:0 7px 0 11px;height:30px;font-size:12px;color:var(--fg-dim);max-width:220px;white-space:nowrap;background:transparent;border-left:1px solid transparent;border-right:1px solid var(--border);transition:background .28s ease,color .2s ease;cursor:pointer}
.tab:hover{color:var(--fg);background:var(--hover)}
.tab.active{color:var(--fg);background:linear-gradient(180deg,var(--hover),var(--bg) 70%);border-left-color:var(--border);border-right-color:var(--border)}
.tab::before{content:"";position:absolute;left:7px;right:7px;top:0;height:2px;border-radius:0 0 3px 3px;background:var(--grad);box-shadow:0 1px 9px var(--glow),0 0 3px var(--glow);opacity:0;transition:opacity .3s ease}
.tab.active::before{opacity:1}
.tab.tab-ws{padding:0 12px;justify-content:center;flex:0 0 auto}
.tab .ti{opacity:.8;display:inline-flex;color:var(--fg-dim)}
.tab.active .ti{opacity:1}
.tab .tx{overflow:hidden;text-overflow:ellipsis}
.tab .tc{width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;border-radius:4px;color:var(--fg-faint);font-size:15px;line-height:1;margin-left:2px}
.tab .tc:hover{background:var(--chip);color:var(--fg)}
.tb-right{display:flex;align-items:center;gap:2px;flex:0 0 auto;padding-left:8px}
.tb-div{width:1px;height:18px;background:var(--chip);margin:0 4px;flex:0 0 1px}
.iconbtn:focus,.rolepill:focus,.tab:focus,.side-add:focus{outline:none;box-shadow:none}

/* ── chromeless desktop head: the app's titlebar IS the macOS window header ──────────────────
   On a chromeless native window the app owns the title area, so we render real macOS-style
   traffic lights on the left and treat the empty header as a drag region (handled in JS).
   The header sits at y=0 unified with the app's --titlebar color — no separate OS strip. */
.titlebar.chromeless{-webkit-user-select:none;user-select:none}
.tb-traffic{display:flex;align-items:center;gap:8px;flex:0 0 auto;padding:0 10px 0 12px}
.tb-traffic .tl{width:12px;height:12px;border-radius:50%;border:none;padding:0;cursor:pointer;position:relative;display:inline-flex;align-items:center;justify-content:center;transition:filter .12s ease}
.tb-traffic .tl-close{background:#ff5f57}
.tb-traffic .tl-min{background:#febc2e}
.tb-traffic .tl-max{background:#28c840}
.tb-traffic .tl:hover{filter:brightness(1.06)}
/* macOS shows the glyphs only while hovering the cluster */
.tb-traffic .tl::before{opacity:0;font-size:9px;line-height:1;font-weight:700;color:rgba(0,0,0,.55);transition:opacity .12s ease}
.tb-traffic:hover .tl::before{opacity:1}
.tb-traffic .tl-close::before{content:"\00d7";font-size:11px}
.tb-traffic .tl-min::before{content:"\2013"}
.tb-traffic .tl-max::before{content:"\002b";font-size:10px}
/* dim the lights when the window is unfocused — matches macOS (kept subtle) */
html[data-win-blur="1"] .tb-traffic .tl{background:var(--border4)}

/* ── pills ─────────────────────────────────────────────────────────────── */
.rolepill{display:inline-flex;align-items:center;gap:7px;height:24px;border:1px solid var(--chip);border-radius:7px;padding:0 8px 0 10px;font-size:11.5px;font-family:var(--mono);color:var(--tx2);background:var(--surf1);margin-right:6px;cursor:pointer}
.rolepill .rdot{width:7px;height:7px;border-radius:50%;background:var(--gray)}
.rolepill.green{color:var(--soft-green);border-color:rgba(63,185,80,.35);background:rgba(63,185,80,.10)}
.rolepill.green .rdot{background:var(--green)}
.rolepill.green:hover{background:rgba(63,185,80,.16)}
.demopill{display:inline-block;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:1px 7px;border-radius:10px;background:rgba(210,153,34,.16);color:var(--yellow);border:1px solid rgba(210,153,34,.4)}
.demopill.real{background:rgba(63,185,80,.14);color:var(--green);border-color:rgba(63,185,80,.4)}
.demopill.off{background:var(--surf1);color:var(--fg-faint);border-color:var(--chip)}

/* ── sidebar tree ──────────────────────────────────────────────────────── */
.sidebar{width:300px;min-width:230px;max-width:520px;background:var(--bg);border-right:1px solid var(--border-soft);display:flex;flex-direction:column;resize:horizontal;overflow:auto}
.side-head{display:flex;align-items:center;justify-content:space-between;height:34px;flex:0 0 34px;padding:0 10px 0 16px}
.side-head .t{font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--fg-faint);font-weight:600;font-family:var(--mono)}
.side-add{width:22px;height:22px;border-radius:6px;border:none;background:transparent;color:var(--fg-dim);font-size:15px}
.side-add:hover{background:var(--hover);color:var(--fg)}
.tree{flex:1;overflow:auto;padding:2px 0 18px}
.node{position:relative;display:flex;align-items:center;gap:8px;height:23px;padding:0 12px;color:var(--fg);font-size:12.5px;cursor:pointer;white-space:nowrap}
.node:hover{background:var(--hover)}
.node.sel{background:var(--sel)}
.node.sel::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:2px;border-radius:2px;background:var(--grad);box-shadow:0 0 5px var(--glow)}
.node .chev{width:13px;height:13px;color:var(--fg-faint);flex:0 0 13px;display:inline-flex;align-items:center;justify-content:center;font-size:9px}
.node .nicon{width:15px;height:15px;display:inline-flex;align-items:center;justify-content:center;color:var(--tx-dim2);flex:0 0 15px}
.node .nlabel{overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.node .badge{margin-left:auto;color:var(--fg-faint);font-size:11px;font-family:var(--mono);font-variant-numeric:tabular-nums}
.node-sub{padding:0 12px 4px 38px;color:var(--fg-faint);font-size:11px;font-family:var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.indent-1{padding-left:25px}.indent-2{padding-left:38px}.indent-3{padding-left:51px}
.conn-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:0 0 8px}
.dot-on{background:var(--green)}.dot-off{background:var(--gray)}.dot-warn{background:var(--yellow)}

/* ── crumbs + view header ──────────────────────────────────────────────── */
.crumbs{display:flex;align-items:center;gap:8px;height:34px;flex:0 0 34px;padding:0 22px;color:var(--fg-dim);font-size:12px;border-bottom:1px solid var(--border-soft);overflow:hidden}
.crumbs .sep{color:var(--fg-faint)}
.crumbs .cur{color:var(--fg2)}
.view-label{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--fg-faint);font-weight:600;font-family:var(--mono);margin-bottom:6px}
.view-title{font-size:20px;font-weight:600;color:var(--fg2);margin:0 0 18px;letter-spacing:-.2px}
.view-title .muted{color:var(--fg-dim);font-weight:600}
.view-head-row{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.view-head-row .view-title{margin:0}
.view-head-row .sp{flex:1}
.sy-dtabs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:14px}
.sy-dtabs button{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border:1px solid transparent;background:transparent;color:var(--fg-dim);border-radius:7px;font-size:12.5px;white-space:nowrap}
.sy-dtabs button:hover{color:var(--fg);background:var(--hover)}
.sy-dtabs button.active{background:var(--surf2);color:var(--fg2);border:1px solid var(--border2);font-weight:600}

/* ── stat cards + summary table ────────────────────────────────────────── */
.ws-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:24px;max-width:760px}
.ws-card{border:1px solid var(--border);border-radius:10px;padding:14px 15px;background:var(--panel)}
.ws-card .k{font-size:10px;font-weight:500;letter-spacing:.8px;color:var(--fg-faint);font-family:var(--mono);margin-bottom:9px;text-transform:uppercase}
.ws-card .v{font-family:var(--mono);font-size:23px;font-weight:600;color:var(--fg2)}
.ws-card .v .u{font-size:11px;color:var(--fg-faint);font-weight:400}
.ws-seclabel{font-size:10.5px;font-weight:600;letter-spacing:1px;color:var(--fg-faint);font-family:var(--mono);margin-bottom:11px;text-transform:uppercase}

/* ── entity list (accounts) ────────────────────────────────────────────── */
.utable{max-width:900px;border:1px solid var(--border);border-radius:11px;overflow:hidden}
.utable .uhead{display:flex;align-items:center;height:28px;padding:0 16px;background:var(--panel);border-bottom:1px solid var(--border-tb);font-family:var(--mono);font-size:10.5px;color:var(--fg-faint);letter-spacing:.3px;text-transform:uppercase}
.utable .urow{display:flex;align-items:center;height:31px;padding:0 16px;font-family:var(--mono);font-size:12.5px;color:var(--tx2);border-top:1px solid var(--border-soft)}
.utable .urow:hover{background:var(--surf0)}
.utable .urow>span,.utable .uhead>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.utable .urow>span:last-child{overflow:visible}
.utable .udot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:0 0 8px;margin-right:7px}
.utable .uact{background:none;border:none;padding:0;display:inline-flex;align-items:center;color:var(--fg-dim);cursor:pointer;font-family:var(--mono);font-size:11.5px}
.utable .uact:hover{color:var(--fg)}
.utable .uact.danger{color:var(--red)}
.utable .uempty{padding:22px 16px;text-align:center;font-family:var(--mono);font-size:12px;color:var(--tx-faint2);border-top:1px solid var(--border-soft)}

/* ── kv table ──────────────────────────────────────────────────────────── */
.kv{max-width:760px;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.kv-row{display:grid;grid-template-columns:210px 1fr}
.kv-row:nth-child(even){background:var(--bg2)}
.kv-k{padding:13px 18px;color:var(--fg-dim);font-family:var(--mono);font-size:12.5px;border-right:1px solid var(--border)}
.kv-v{padding:13px 18px;color:var(--fg);font-family:var(--mono);font-size:12.5px}

/* ── buttons ───────────────────────────────────────────────────────────── */
.btn{border:1px solid var(--border2);background:var(--bg2);color:var(--fg);border-radius:7px;padding:7px 14px;font-size:12.5px}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--grad);border:none;color:var(--on-grad-ink);font-weight:600}
.btn.primary:hover{filter:brightness(1.06)}
.btn:disabled{opacity:.45;cursor:not-allowed;filter:none}
.btn-add{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 13px;background:var(--grad);border:none;border-radius:8px;color:var(--on-grad-ink);font-size:12.5px;font-weight:600;cursor:pointer;box-shadow:0 0 10px var(--glow)}
.btn-add:hover{filter:brightness(1.06)}
.act-link{background:none;border:none;color:var(--accent);font-size:12px;padding:0;cursor:pointer}
.act-link:hover{text-decoration:underline}
.act-link.danger{color:var(--red)}
.ca-btn{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:6px;background:var(--panel);border:1px solid var(--border);color:var(--fg-dim);font-size:11.5px;font-weight:600;cursor:pointer;white-space:nowrap}
.ca-btn:hover{background:var(--surf2);color:var(--fg2)}
.ca-start{color:var(--soft-green);border-color:rgba(63,185,80,.4)}
.ca-start:hover{background:rgba(63,185,80,.12)}
.ca-stop{color:#e0a06a;border-color:rgba(196,120,60,.45)}
.ca-stop:hover{background:rgba(196,120,60,.14)}
.ca-del{color:#e08a86;border-color:rgba(181,72,68,.45)}
.ca-del:hover{background:rgba(181,72,68,.14)}
.wl-tabs{display:inline-flex;align-items:center;gap:3px}
.wl-tabs button{height:30px;padding:0 11px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--fg-dim);font-size:12.5px;font-weight:500;cursor:pointer}
.wl-tabs button:hover{color:var(--fg);background:var(--hover)}
.wl-tabs button.active{background:var(--grad);color:var(--on-grad-ink);font-weight:600;box-shadow:0 0 8px var(--glow)}

/* ── forms ─────────────────────────────────────────────────────────────── */
.field{margin-bottom:10px}
.field label{display:block;font-size:11px;color:var(--fg-dim);margin-bottom:4px}
.field .hint2{color:var(--fg-faint);font-weight:400}
.field input,.field select{width:100%;background:var(--bg);border:1px solid var(--border2);color:var(--fg);border-radius:7px;padding:7px 10px;font-size:12.5px;outline:none;font-family:inherit;box-sizing:border-box}
.field input:focus,.field select:focus{border-color:var(--accent)}
.field.mono input{font-family:var(--mono)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.sym-chk{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--fg2);margin-bottom:10px;cursor:pointer}
.sym-chk input{width:14px;height:14px;accent-color:var(--accent)}
.section-label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-faint);font-weight:700;margin:18px 0 10px;font-family:var(--mono)}

/* ── modal ─────────────────────────────────────────────────────────────── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:100}
.modal{width:760px;max-width:94vw;max-height:90vh;background:var(--panel);border:1px solid var(--border2);border-radius:14px;box-shadow:0 24px 64px rgba(0,0,0,.6);display:flex;flex-direction:column;overflow:hidden}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border)}
.modal-head h3{margin:0;font-size:16px;color:var(--fg2)}
.modal-head .x{background:none;border:none;color:var(--fg-dim);font-size:18px;cursor:pointer}
.modal-body{padding:4px 20px 18px;overflow:auto}
.modal-foot{display:flex;justify-content:flex-end;align-items:center;gap:10px;padding:14px 20px;border-top:1px solid var(--border)}
.modal-err{margin-top:10px;color:var(--err-soft);font-size:12px;background:rgba(224,106,106,.08);border:1px solid rgba(224,106,106,.3);border-radius:7px;padding:7px 10px}
.ok{color:var(--green);font-size:12px}
.warn-note{color:var(--yellow);font-size:11.5px;font-family:var(--mono)}

/* ── symbols folder-tree table ─────────────────────────────────────────── */
.sy-toolbar{display:flex;align-items:center;gap:12px;max-width:880px;margin:6px 0 12px}
.sy-search{flex:1;max-width:340px;display:flex;align-items:center;gap:7px;background:var(--surf1);border:1px solid var(--border-soft);border-radius:7px;padding:5px 10px;color:var(--fg-faint)}
.sy-search input{flex:1;background:transparent;border:none;outline:none;color:var(--fg);font-size:12px;font-family:inherit;min-width:0}
.sy-viewtog{display:flex;background:var(--surf1);border:1px solid var(--border-soft);border-radius:7px;overflow:hidden}
.sy-viewtog button{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 11px;background:transparent;border:none;color:var(--fg-dim);font-size:11.5px;cursor:pointer}
.sy-viewtog button.on{background:var(--chip);color:var(--fg2)}
.sy-table{border:1px solid var(--border);border-radius:11px;overflow:hidden;max-width:880px;display:flex;flex-direction:column}
.sy-h{display:flex;align-items:center;height:30px;flex:0 0 30px;padding:0 14px;background:var(--panel);border-bottom:1px solid var(--border-tb);font-family:var(--mono);font-size:10px;color:var(--fg-faint);letter-spacing:.3px;text-transform:uppercase}
.sy-tbody{max-height:calc(100vh - 380px);min-height:200px;overflow-y:auto}
.sy-r{display:flex;align-items:center;height:30px;padding:0 14px;font-size:12px;color:var(--tx2);border-bottom:1px solid var(--border-soft);cursor:pointer}
.sy-r:hover{background:var(--surf1)}
.sy-h .c-sym,.sy-r .c-sym{flex:0 0 148px;display:flex;align-items:center;gap:8px;min-width:0}
.sy-h .c-id,.sy-r .c-id{flex:0 0 84px;font-family:var(--mono);color:var(--fg-faint);text-align:right;padding-right:18px}
.sy-h .c-desc,.sy-r .c-desc{flex:1;min-width:130px;color:var(--fg-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sy-h .c-dig,.sy-r .c-dig{flex:0 0 56px;text-align:right;font-family:var(--mono)}
.sy-h .c-sub,.sy-r .c-sub{flex:0 0 110px;display:flex;justify-content:flex-end;align-items:center;gap:6px}
.sy-ic{display:inline-flex;color:var(--acc-gold)}
.sy-name{font-family:var(--mono);color:var(--fg2);font-weight:600}
.sy-folder{gap:7px;background:var(--surf0)}
.sy-folder:hover{background:var(--hover)}
.sy-fchev{color:var(--fg-faint);display:inline-flex;flex-shrink:0;font-size:9px;width:12px}
.sy-fico{color:var(--acc-gold);display:inline-flex;flex-shrink:0}
.sy-fname{color:var(--fg);font-weight:500}
.sy-fcount{font-family:var(--mono);font-size:10.5px;color:var(--fg-faint)}
.sy-note{font-family:var(--mono);font-size:11px;color:var(--fg-faint);margin-top:12px}
.sub-pill{display:inline-flex;align-items:center;gap:5px;height:18px;padding:0 8px;border-radius:9px;font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.5px;cursor:pointer;border:1px solid transparent;background:transparent}
.sub-pill.on{background:rgba(63,185,80,.12);border-color:rgba(63,185,80,.35);color:var(--soft-green)}
.sub-pill.off{border-color:var(--chip);color:var(--tx-faint2)}
.sub-pill.dis{cursor:default;opacity:.6}

/* ── full-bleed quotes grid (.content.flush .tk-view) ──────────────────── */
.content.flush .tk-view{height:100%;display:flex;flex-direction:column;background:var(--bg);font-family:var(--mono);overflow:hidden}
.content.flush .tk-head{display:flex;align-items:baseline;gap:10px;padding:13px 18px 0}
.content.flush .tk-name{font-size:15px;font-weight:700;color:var(--fg2);letter-spacing:.4px}
.content.flush .tk-sub{font-size:10px;color:var(--tx-faint2);letter-spacing:1px}
.content.flush .tk-meta{display:flex;align-items:center;gap:16px;margin:0;font-size:10px;color:var(--fg-faint);letter-spacing:.5px;padding:6px 18px 11px;border-bottom:1px solid var(--border)}
.content.flush .tk-fdot{width:6px;height:6px;border-radius:50%;background:var(--fg-faint);display:inline-block;margin-right:6px}
.content.flush .tk-fdot.on{background:var(--green);box-shadow:0 0 6px var(--green)}
.content.flush .tk-fname{color:var(--tx-dim2);text-transform:uppercase;letter-spacing:.6px}
.content.flush .tk-live{color:var(--green);font-weight:600}
.content.flush .tk-owner{color:var(--border4);margin-left:auto}
.content.flush .tk-search{display:flex;align-items:center;gap:7px;background:var(--surf1);border:1px solid var(--border-soft);border-radius:7px;padding:3px 9px;color:var(--fg-faint);margin-left:14px}
.content.flush .tk-search input{background:transparent;border:none;outline:none;color:var(--fg);font-size:11px;font-family:inherit;min-width:0;width:140px}
.content.flush .tk-table{flex:1;min-height:0;width:100%;max-width:none;border:none;border-radius:0;overflow-y:auto;overflow-x:hidden;background:var(--bg)}
.content.flush .tk-h,.content.flush .tk-r{display:grid;grid-template-columns:minmax(96px,1.3fr) 100px 92px 92px 100px 46px 66px minmax(110px,1.1fr);align-items:center;width:100%;height:auto}
.content.flush .tk-h{position:sticky;top:0;z-index:2;padding:8px 18px;background:var(--surf0);border-bottom:1px solid var(--border);font-size:9px;letter-spacing:1px;color:var(--fg-faint);font-weight:600}
.content.flush .tk-h .c-bid,.content.flush .tk-h .c-ask,.content.flush .tk-h .c-last,.content.flush .tk-h .c-tps,.content.flush .tk-h .c-tk{text-align:right}
.content.flush .tk-h .c-dir{text-align:center}
.content.flush .tk-r{padding:6px 18px;border-bottom:1px solid var(--border-soft);color:var(--tx2)}
.content.flush .tk-r:hover{background:var(--hover)}
.content.flush .tk-r .c-sym{font-size:12px;color:var(--fg2);font-weight:700;letter-spacing:.3px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.content.flush .tk-r .c-time{font-size:10.5px;color:var(--fg-faint);font-variant-numeric:tabular-nums}
.content.flush .tk-r .c-bid,.content.flush .tk-r .c-ask{text-align:right;font-size:11.5px;font-variant-numeric:tabular-nums}
.content.flush .tk-r .c-bid{color:var(--acc-bid)}
.content.flush .tk-r .c-ask{color:var(--acc-ask)}
.content.flush .tk-r .c-last{text-align:right;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.content.flush .tk-r .c-dir{text-align:center;font-size:9px}
.content.flush .tk-r .c-tps{text-align:right;font-size:11px;font-weight:700;color:var(--green);font-variant-numeric:tabular-nums}
.content.flush .tk-r .c-tps.zero{color:var(--tx-faint2);font-weight:400}
.content.flush .tk-r .c-tk{display:flex;justify-content:flex-end}
.content.flush .tk-r .c-tk .tk-warm{font-size:9.5px;color:var(--tx-faint2);font-style:italic;letter-spacing:.2px}
.content.flush .tk-note{font-size:9.5px;color:var(--tx-faint2);letter-spacing:.3px;padding:9px 18px;border-top:1px solid var(--border)}

/* ── right panel: watchlists ───────────────────────────────────────────── */
.rightpanel{width:340px;min-width:280px;max-width:560px;background:var(--bg);border-left:1px solid var(--border-soft);resize:horizontal;overflow:auto;direction:rtl;display:flex;flex-direction:column}
.rightpanel>*{direction:ltr}
.mdp-head{height:34px;flex:0 0 34px;display:flex;align-items:center;justify-content:space-between;padding:0 8px 0 14px;border-bottom:1px solid var(--border-soft)}
.mdp-title{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:1px;color:var(--fg-faint);text-transform:uppercase}
.mdp-title .live{color:var(--green)}
.mdp-actions{display:flex;gap:2px}
.mdp-search{margin:8px 10px;display:flex;align-items:center;gap:7px;background:var(--surf1);border:1px solid var(--border-soft);border-radius:7px;padding:4px 9px;color:var(--fg-faint)}
.mdp-search input{flex:1;background:transparent;border:none;outline:none;color:var(--fg);font-size:12px;font-family:inherit;min-width:0}
.mdp-scroll{flex:1;overflow-y:auto;min-height:0;position:relative}
.mdp-acct{border-bottom:1px solid var(--border-soft)}
.mdp-acct-h{display:flex;align-items:center;gap:8px;padding:6px 12px;background:var(--surf0);cursor:pointer;position:sticky;top:0;z-index:2}
.mdp-acct-h .chev{color:var(--fg-faint);font-size:9px;width:10px;flex-shrink:0}
.mdp-acct-h .dot{width:7px;height:7px;border-radius:50%;background:var(--gray);flex-shrink:0}
.mdp-acct-h .dot.on{background:var(--green)}
.mdp-acct-h .dot.warn{background:var(--yellow)}
.mdp-acct-h .aid{font-family:var(--mono);font-size:11.5px;color:var(--fg2);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mdp-acct-h .arole{font-size:10px;color:var(--fg-faint);background:var(--chip);border-radius:9px;padding:1px 8px;flex-shrink:0}
.mdp-acct-h .acount{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--fg-faint);flex-shrink:0}
.mdp-wl{margin:2px 0}
.mdp-wl-h{display:flex;align-items:center;gap:7px;padding:5px 12px 5px 18px;color:var(--fg-dim);cursor:pointer;font-size:11.5px;font-weight:500}
.mdp-wl-h:hover{background:var(--hover)}
.mdp-wl-h .chev{color:var(--fg-faint);font-size:9px;width:10px;flex-shrink:0}
.mdp-wl-h .star{color:var(--yellow);display:inline-flex;flex-shrink:0}
.mdp-wl-h .wlname{color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mdp-wl-h .wlcount{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--fg-faint);flex-shrink:0}
.mdp-wl-h .wlmenu{display:none;margin-left:4px}
.mdp-wl-h:hover .wlmenu{display:inline-flex}
.mdp-th{display:flex;padding:3px 14px 3px 28px;font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--fg-faint);border-bottom:1px solid var(--border-soft)}
.mdp-r{display:flex;align-items:center;padding:3px 14px 3px 28px;font-family:var(--mono);font-size:11.5px;cursor:pointer;border-left:2px solid transparent;user-select:none}
.mdp-r:hover{background:var(--hover)}
.mdp-r.sel{background:var(--sel);border-left-color:var(--accent)}
.mdp-th .c-sym,.mdp-r .c-sym{flex:1.5;min-width:0;color:var(--fg);display:flex;align-items:center;gap:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mdp-th .c-bid,.mdp-r .c-bid,.mdp-th .c-ask,.mdp-r .c-ask{flex:1;text-align:right;white-space:nowrap;justify-content:flex-end}
.mdp-th .c-bid,.mdp-th .c-ask,.mdp-th .c-spr{color:var(--fg-faint)}
.mdp-r .c-bid{color:var(--acc-bid)}
.mdp-r .c-ask{color:var(--acc-ask)}
.mdp-th .c-spr,.mdp-r .c-spr{flex:0 0 44px;text-align:right;color:var(--fg-faint);font-size:10.5px;white-space:nowrap}
.mdp-foot{height:24px;flex:0 0 24px;border-top:1px solid var(--border-soft);display:flex;align-items:center;gap:14px;padding:0 14px;font-family:var(--mono);font-size:10px;color:var(--fg-faint)}
.mdp-foot .g{color:var(--green)}
.dirchip{font-size:9px}.dirchip.up{color:var(--tick-up)}.dirchip.dn{color:var(--tick-dn)}
.mdp-empty{padding:16px 14px;font-family:var(--mono);font-size:11px;color:var(--tx-faint2);text-align:center}

/* quick-trade row */
.mdp-qt{display:flex;align-items:stretch;gap:4px;padding:3px 14px 5px 28px;background:color-mix(in srgb, var(--surf0) 55%, transparent);border-left:2px solid var(--border2)}
.qt-btn{flex:1 1 0;min-width:0;height:24px;display:flex;align-items:center;justify-content:center;gap:4px;padding:0 5px;border-radius:6px;border:1px solid;background:transparent;font-family:var(--mono);cursor:pointer;transition:background .12s ease}
.qt-btn .side{font-size:9px;font-weight:700;letter-spacing:.8px}
.qt-btn .px{font-size:10.5px;opacity:.95;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qt-sell{border-color:rgba(166,143,214,.5);color:var(--acc-ask);box-shadow:0 0 9px rgba(166,143,214,.22)}
.qt-sell:hover{background:rgba(166,143,214,.14);box-shadow:0 0 12px rgba(166,143,214,.35)}
.qt-buy{border-color:rgba(116,199,190,.5);color:var(--acc-bid);box-shadow:0 0 9px rgba(116,199,190,.22)}
.qt-buy:hover{background:rgba(116,199,190,.14);box-shadow:0 0 12px rgba(116,199,190,.35)}
.qt-lot{flex:0 0 56px;height:24px;background:var(--surf2);border:1px solid var(--border2);border-radius:6px;color:var(--fg2);font-family:var(--mono);font-size:11px;text-align:center;outline:none}
.qt-lot:focus{border-color:var(--accent)}
.qt-msg{font-family:var(--mono);font-size:9.5px;color:var(--fg-faint);padding:1px 14px 4px 28px}
.qt-msg .ok2{color:var(--green)}
.qt-msg .er{color:var(--red)}

/* context menu */
.tabmenu{position:fixed;z-index:120;min-width:210px;background:var(--surf1);border:1px solid var(--border2);border-radius:9px;box-shadow:0 16px 48px rgba(0,0,0,.55);padding:5px}
.tm-item{display:flex;align-items:center;justify-content:space-between;width:100%;height:28px;padding:0 10px;border:none;background:transparent;color:var(--fg);font-size:12.5px;border-radius:6px;text-align:left;cursor:pointer}
.tm-item:hover{background:var(--hover)}
.tm-item>span{display:inline-flex;align-items:center;gap:8px}
.tm-item.danger{color:var(--red)}
.tm-sep{height:1px;background:var(--border2);margin:4px 6px}

/* popover */
.pop-wrap{position:absolute;top:44px;right:10px;z-index:50}
.popover{width:300px;background:var(--panel);border:1px solid var(--border2);border-radius:12px;box-shadow:0 16px 48px rgba(0,0,0,.5);padding:16px}
.popover h3{margin:0 0 12px;font-size:14px;color:var(--fg2)}
.pop-actions{display:flex;align-items:center;gap:10px;margin-top:6px}

/* ── dock: trading operations ──────────────────────────────────────────── */
.dock{display:flex;flex-direction:column;flex:0 0 300px;height:300px;min-height:0;background:var(--bg);border-top:1px solid var(--surf2);position:relative}
/* 5px grab strip on the dock's top edge — drag to resize (design-system §6). Sits above the border,
   row-resize cursor, tints silver while hovered/dragging. */
.dock-resize{position:absolute;top:-3px;left:0;right:0;height:6px;cursor:row-resize;touch-action:none;z-index:7;background:transparent}
.dock-resize::after{content:"";position:absolute;left:0;right:0;top:3px;height:2px;background:transparent;transition:background .12s ease}
.dock-resize:hover::after,.dock-resize.dragging::after{background:var(--accent2)}
.dock-head{display:flex;align-items:center;justify-content:space-between;height:34px;flex:0 0 34px;padding:0 8px 0 16px;border-bottom:1px solid var(--surf1)}
.dock-tabs{display:flex;align-items:center;gap:2px;height:100%}
.dock-tab{position:relative;display:inline-flex;align-items:center;gap:7px;height:100%;padding:0 10px;border:none;background:transparent;color:var(--fg-faint);font-size:11px;font-weight:600;letter-spacing:.7px;font-family:var(--mono);cursor:pointer}
.dock-tab .dt-i{display:inline-flex;color:var(--fg-faint)}
.dock-tab:hover{color:var(--fg-dim)}
.dock-tab.active{color:var(--fg2)}
.dock-tab.active .dt-i{color:var(--fg2)}
.dock-tab.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--grad)}
.dock-tab .dt-n{color:var(--yellow);font-size:10px;margin-left:5px}
.dock-tabsep{width:1px;height:14px;background:var(--surf2);margin:0 8px;flex:0 0 1px}
.dock-actions{display:flex;align-items:center;gap:2px}
.dock-actions .iconbtn{width:24px;height:24px}
.dock-body{flex:1;display:flex;min-height:0;overflow:hidden}
.dock-logs{flex:1;overflow-y:auto;padding:8px 16px;min-width:0}
.dock-scope{flex:0 0 188px;border-left:1px solid var(--surf2);padding:8px 0;overflow-y:auto}
.scope-h{font-size:9.5px;font-weight:600;letter-spacing:1.2px;color:var(--tx-faint2);font-family:var(--mono);padding:2px 16px 8px}
.scope-row{position:relative;display:flex;align-items:center;gap:9px;height:27px;padding:0 16px;font-size:12px;color:var(--fg-dim);font-family:var(--mono);cursor:pointer}
.scope-row:hover{background:var(--hover)}
.scope-row.active{background:var(--sel);color:var(--fg2)}
.scope-row.active::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:2px;border-radius:2px;background:var(--grad)}
.scope-row .sdot{width:7px;height:7px;border-radius:50%;flex:0 0 7px}
/* FIX LOG source tree: bold account rows, indented MD/TD leaves */
.scope-row.scope-acct{color:var(--fg);font-weight:600}
.scope-row.scope-leg{padding-left:30px;height:23px;font-size:11px;color:var(--fg-dim)}
.scope-row.scope-leg .leg-sub{margin-left:6px;color:var(--tx-faint2);font-size:9.5px;font-weight:400}

/* fix log lines */
.logline{font-family:var(--mono);font-size:11.5px;line-height:1.65;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.logline .lt{color:var(--fg-faint)}
.logline .ll{font-weight:700}
.logline .ll-in{color:var(--acc-ask)} .logline .ll-out{color:var(--acc-bid)}
.logline .ll-info{color:var(--green)} .logline .ll-warn{color:var(--yellow)} .logline .ll-err{color:var(--red)}
.logline .fmt{color:var(--acc-lavender);font-weight:600}
.logline .ftag{color:var(--fg-faint)} .logline .fval{color:var(--tx2)}
.logline .lmsg{color:var(--tx2)}
.logline.dim{opacity:.55}

/* order ticket */
.ticket{flex:0 0 320px;border-right:1px solid var(--surf2);padding:12px 16px;display:flex;flex-direction:column;gap:9px;min-width:0;overflow-y:auto}
.ticket .trow{display:flex;gap:8px}
.ticket .trow .field{flex:1;margin:0}
.tk-bigpx{display:flex;gap:8px;margin-top:2px}
.bigpx{flex:1;border-radius:8px;border:1px solid;background:transparent;padding:8px 10px;font-family:var(--mono);text-align:center;cursor:pointer;transition:background .12s ease}
.bigpx .s{display:block;font-size:9px;font-weight:700;letter-spacing:1px;margin-bottom:3px}
.bigpx .p{display:block;font-size:16px;font-weight:700}
.bigpx .p small{font-size:10px;font-weight:400;opacity:.7}
.bigpx.sell{border-color:rgba(166,143,214,.5);color:var(--acc-ask);box-shadow:0 0 10px rgba(166,143,214,.22)}
.bigpx.sell:hover{background:rgba(166,143,214,.12);box-shadow:0 0 14px rgba(166,143,214,.38)}
.bigpx.buy{border-color:rgba(116,199,190,.5);color:var(--acc-bid);box-shadow:0 0 10px rgba(116,199,190,.22)}
.bigpx.buy:hover{background:rgba(116,199,190,.12);box-shadow:0 0 14px rgba(116,199,190,.38)}
.bigpx:disabled{opacity:.4;cursor:not-allowed}
.tk-spread{flex:0 0 52px;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:10px;color:var(--fg-faint)}
.ticket .tmeta{font-family:var(--mono);font-size:10px;color:var(--fg-faint);display:flex;gap:12px;flex-wrap:wrap}
.ticket .tmeta .er{color:var(--red)}
.ticket .tmeta .ok2{color:var(--green)}

/* ── full NewOrderSingle builder (proposal 12) ── */
.tk-tag{color:var(--acc-ask);font-family:var(--mono);font-size:9px;margin-left:4px;font-weight:500}
.ob-sec{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint);margin:6px 0 4px;display:flex;align-items:center;gap:8px}
.ob-sec::after{content:"";flex:1;height:1px;background:var(--border)}
.tk-adv{border:1px dashed var(--border2);border-radius:8px;background:var(--surf0);padding:6px 10px 8px}
.tk-preset{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.tk-preset .pchip{font-family:var(--mono);font-size:10px;color:var(--fg-dim);border:1px solid var(--border2);border-radius:12px;padding:2px 9px;cursor:pointer;background:var(--panel);user-select:none}
.tk-preset .pchip:hover{border-color:var(--accent);color:var(--fg2)}
.tk-preset .pchip.on{border-color:var(--acc-bid);color:var(--acc-bid)}
.tk-warn{font-family:var(--mono);font-size:10.5px;color:var(--yellow);display:flex;gap:6px;align-items:flex-start}
.tk-wire{border:1px solid var(--border);border-radius:8px;background:var(--surf0);overflow:hidden}
.tk-wire-h{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-faint);padding:6px 10px;border-bottom:1px solid var(--border-soft)}
.tk-wire-b{padding:8px 10px;font-family:var(--mono);font-size:11px;line-height:1.85;word-break:break-all;color:var(--fg-dim)}
.tk-wire-b .wt{color:var(--acc-ask)}
.tk-wire-b .wv{color:var(--fg2)}
.tk-wire-b .wn{color:var(--acc-bid)}
.tk-wire-b .wsoh{color:var(--fg-faint);padding:0 2px}

/* blotter grid */
.blot{flex:1;min-width:0;overflow:auto}
.blot .b-h,.blot .b-r{display:grid;grid-template-columns:150px 90px minmax(90px,1fr) 52px 64px 84px 92px 100px 70px 70px;column-gap:6px;align-items:center;padding:0 16px;font-family:var(--mono)}
.blot.mini .b-h,.blot.mini .b-r{grid-template-columns:minmax(80px,1fr) 46px 54px 76px 90px 44px}
.blot .b-h{position:sticky;top:0;height:26px;background:var(--surf0);border-bottom:1px solid var(--border);font-size:9px;letter-spacing:.8px;color:var(--fg-faint);font-weight:600;text-transform:uppercase;z-index:1}
.blot .b-r{height:27px;border-bottom:1px solid var(--border-soft);font-size:11.5px;color:var(--tx2)}
.blot .b-r:hover{background:var(--hover)}
.blot .b-r.sel{background:var(--sel);box-shadow:inset 2px 0 0 var(--accent)}
.blot .b-h span,.blot .b-r span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.blot .num{text-align:right;font-variant-numeric:tabular-nums}
.blot .sideB{color:var(--acc-bid);font-weight:700} .blot .sideS{color:var(--acc-ask);font-weight:700}
.blot .stNew{color:var(--acc-ask)} .blot .stFill{color:var(--green)} .blot .stRej{color:var(--red)} .blot .stPart{color:var(--yellow)} .blot .stCxl{color:var(--fg-faint)}
.blot .sym{color:var(--fg2);font-weight:600}
.blot .cxl{background:none;border:none;color:var(--red);font-family:var(--mono);font-size:11px;cursor:pointer;padding:0;text-align:right}
.blot .bempty{padding:20px 16px;text-align:center;font-family:var(--mono);font-size:12px;color:var(--tx-faint2)}
.pnl-pos{color:var(--pnl-long);font-weight:700} .pnl-neg{color:var(--pnl-short);font-weight:700}

/* ── status bar ────────────────────────────────────────────────────────── */
.statusbar{display:flex;align-items:center;justify-content:space-between;height:24px;flex:0 0 24px;background:var(--titlebar);border-top:1px solid var(--border-tb);padding:0 14px;font-size:11px;font-family:var(--mono);color:var(--fg-faint)}
.statusbar .sb-left,.statusbar .sb-right{display:flex;align-items:center;gap:16px}
.statusbar .sb-brand{display:flex;align-items:center;gap:6px;color:var(--fg-dim)}
.statusbar .sb-role{color:var(--tx-dim2)}
.statusbar .gdot{width:7px;height:7px;border-radius:50%;background:var(--green);display:inline-block}
.statusbar .gdot.off{background:var(--gray)}
.sb-theme{display:inline-flex;align-items:center;justify-content:center;width:20px;height:18px;padding:0;border:none;background:transparent;color:var(--fg-faint);border-radius:5px;cursor:pointer}
.sb-theme:hover{background:var(--hover);color:var(--fg);box-shadow:0 0 6px var(--glow)}

/* empty state */
.empty{color:var(--fg-dim);font-size:13px;margin:40px auto;text-align:center}

/* ── click-to-trade price ladder (proposal 04) ── */
.dom-view{padding:16px;display:flex;flex-direction:column;gap:14px;min-height:0}
.dom-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dom-symbol{font-size:14px;color:var(--fg2);font-weight:600;letter-spacing:.02em}
.dom-syminput{width:120px;height:26px;background:var(--surf2);border:1px solid var(--border2);border-radius:var(--r-input);color:var(--fg2);font-size:12px;padding:0 8px;outline:none}
.dom-syminput:focus{border-color:var(--accent)}
.dom-lotlabel{font-size:10px;color:var(--fg-faint);text-transform:uppercase;letter-spacing:.6px}
.qt-lot{width:64px;height:26px;background:var(--surf2);border:1px solid var(--border2);border-radius:var(--r-input);color:var(--fg2);font-size:12px;text-align:center;outline:none;font-family:var(--mono)}
.qt-lot:focus{border-color:var(--accent)}
.dom-center{padding:5px 12px;font-size:11px}
.dom-stats{margin-left:auto;font-size:10.5px;color:var(--fg-faint);letter-spacing:.06em;text-transform:uppercase}
.dom-wrap{display:flex;gap:16px;align-items:flex-start}
.dom-panel{width:340px;flex:none}
.ladcol{border:1px solid var(--border);border-radius:var(--r-table);overflow:hidden;background:var(--panel)}
.lad-h{display:flex;align-items:stretch;height:24px;font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-faint);border-bottom:1px solid var(--border)}
.lad-h .h-sell{flex:1;display:flex;align-items:center;justify-content:flex-end;padding-right:10px;color:var(--acc-ask)}
.lad-h .h-px{flex:0 0 96px;display:flex;align-items:center;justify-content:center}
.lad-h .h-buy{flex:1;display:flex;align-items:center;padding-left:10px;color:var(--acc-bid)}
.lad-row{display:flex;align-items:stretch;height:24px;border-bottom:1px solid var(--border-soft);font-family:var(--mono);font-size:11.5px}
.lad-row:last-child{border-bottom:0}
.lad-cell{flex:1;display:flex;align-items:center;cursor:pointer;user-select:none;position:relative;transition:background .08s}
.lad-cell.sell{justify-content:flex-end;padding-right:12px;color:var(--acc-ask)}
.lad-cell.buy{justify-content:flex-start;padding-left:12px;color:var(--acc-bid)}
.lad-cell.sell:hover{background:rgba(166,143,214,.18)}
.lad-cell.buy:hover{background:rgba(116,199,190,.18)}
.lad-cell .act{position:absolute;font-size:8.5px;font-weight:700;letter-spacing:.6px;opacity:0;top:50%;transform:translateY(-50%);transition:opacity .08s}
.lad-cell.sell .act{left:10px}
.lad-cell.buy .act{right:10px}
.lad-cell:hover .act{opacity:1}
.lad-px{flex:0 0 96px;display:flex;align-items:center;justify-content:center;color:var(--fg2);font-weight:500;border-left:1px solid var(--border-soft);border-right:1px solid var(--border-soft);background:var(--surf0)}
.lad-row.bidrow .lad-px{background:var(--acc-bid);color:var(--on-grad-ink);font-weight:700}
.lad-row.askrow .lad-px{background:var(--acc-ask);color:var(--on-grad-ink);font-weight:700}
.lad-cell.flash{animation:cellflash .5s ease-out}
@keyframes cellflash{0%{background:var(--accent);color:var(--on-grad-ink)}100%{background:transparent}}
.dom-mid{margin-top:8px;font-size:11px;color:var(--fg-dim)}
.dom-mid b{color:var(--fg2)}
.dom-side{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px}
.dom-log{border:1px solid var(--border);border-radius:var(--r-table);background:var(--panel);padding:10px 12px;min-height:120px}
.dom-log .lg-h{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-faint);margin-bottom:8px}
.dom-log .lg-line{font-size:11px;color:var(--fg-dim);padding:2px 0;display:flex;gap:8px}
.dom-log .lg-line .t{color:var(--fg-faint)}
.dom-log .lg-line.buy .s{color:var(--acc-bid)}
.dom-log .lg-line.sell .s{color:var(--acc-ask)}
.dom-log .lg-empty{font-size:11px;color:var(--fg-faint)}
.dom-note{font-family:var(--mono);font-size:10.5px;color:var(--yellow);line-height:1.6;border:1px dashed var(--border2);border-radius:var(--r-table);padding:10px 12px;background:var(--err-soft)}

/* ── Market Depth · Level 2 order book (proposal 13) — the DOM ladder in the Quotes right rail.
   All color from tokens (--bid/--ask/--fg-*); size bars are token-tinted overlays, no hard-coded hues. ── */
.l2-rail{flex:0 0 380px;display:flex;flex-direction:column;min-height:0;border-left:1px solid var(--border);background:var(--bg);overflow:auto}
.l2-rail-h{height:30px;display:flex;align-items:center;padding:0 14px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-faint);border-bottom:1px solid var(--border)}
.l2-wrap{display:flex;flex-direction:column;padding:8px}
.l2-acct-h{display:flex;align-items:center;gap:8px;padding:6px 8px;background:var(--surf0);border-radius:var(--r-table)}
.l2-acct-h .dot{width:7px;height:7px;border-radius:50%;background:var(--fg-faint);flex-shrink:0}
.l2-acct-h .dot.on{background:var(--green)}
.l2-acct-h .aid{font-size:11.5px;color:var(--fg2);font-weight:600}
.l2-acct-h .arole{font-size:10px;color:var(--fg-faint);background:var(--chip);border-radius:9px;padding:1px 8px}
.l2-acct-h .acount{margin-left:auto;font-size:10px;color:var(--fg-faint)}
.l2-dom{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:8px;border:1px solid var(--border);border-radius:var(--r-table);overflow:hidden;font-family:var(--mono)}
.l2-col{display:flex;flex-direction:column}
.l2-col.asks{border-left:1px solid var(--border-soft)}
.l2-ch{display:flex;height:24px;align-items:center;padding:0 10px;font-size:9.5px;letter-spacing:.4px;text-transform:uppercase;color:var(--fg-faint);border-bottom:1px solid var(--border)}
.l2-ch .lbl-b{color:var(--bid)}.l2-ch .lbl-a{color:var(--ask)}
.l2-lv{position:relative;display:flex;align-items:center;height:24px;padding:0 10px;font-size:11.5px;cursor:pointer;border-bottom:1px solid var(--border-soft);overflow:hidden}
.l2-lv:hover{background:var(--hover)}
.l2-lv .bar{position:absolute;top:0;bottom:0;z-index:0}
.l2-lv.bid .bar{right:0;background:var(--acc-bid);opacity:.16}
.l2-lv.ask .bar{left:0;background:var(--acc-ask);opacity:.16}
.l2-lv.best .bar{opacity:.28}
.l2-lv .px{position:relative;z-index:1;flex:1}
.l2-lv .sz{position:relative;z-index:1;color:var(--fg-dim);font-size:10.5px}
.l2-lv.bid .px{color:var(--bid);text-align:right;order:2}
.l2-lv.bid .sz{text-align:left;order:1}
.l2-lv.ask .px{color:var(--ask);text-align:left}
.l2-lv.ask .sz{text-align:right}
.l2-lv.best{background:var(--sel)}
.l2-lv.best .px{font-weight:700;color:var(--fg2)}
.l2-mid{grid-column:1/3;display:flex;align-items:center;justify-content:center;gap:14px;height:26px;background:var(--surf0);border-top:1px solid var(--border);border-bottom:1px solid var(--border);font-size:10.5px;color:var(--fg-dim)}
.l2-mid b{color:var(--fg2)}
.l2-imbal{grid-column:1/3;display:flex;height:5px;background:var(--acc-ask)}
.l2-imbal .b{background:var(--acc-bid)}
.l2-hint{margin-top:8px;font-size:10px;color:var(--fg-faint);line-height:1.5}
.l2-empty{margin-top:12px;padding:24px 12px;text-align:center;font-size:11px;color:var(--fg-faint);border:1px dashed var(--border2);border-radius:var(--r-table)}

/* blazor error ui — keep invisible unless a fatal error fires */
#blazor-error-ui{display:none;position:fixed;bottom:0;left:0;right:0;background:rgba(224,106,106,.12);border-top:1px solid rgba(224,106,106,.4);color:var(--err-soft);padding:8px 16px;font-size:12px;z-index:1000}

/* ─── UX proposal 01 · Live P&L & account equity (Positions dock + status bar) ─── */
.pnl-wrap{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:auto}
.pnl-wrap .blot{flex:1 1 auto}
.pnl-tiles{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;padding:12px 14px 4px;flex:none}
.pnl-tile{border:1px solid var(--border);border-radius:8px;background:var(--panel);padding:10px 13px}
.pnl-tile .tl{font-family:var(--mono);font-size:9.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--fg-faint)}
.pnl-tile .tv{font-family:var(--mono);font-size:18px;font-weight:600;margin-top:5px;letter-spacing:-.01em}
.pnl-tile .ts{font-family:var(--mono);font-size:10px;color:var(--fg-faint);margin-top:2px}
.blot .b-r.total{background:var(--surf0);border-top:1px solid var(--border);border-bottom:0;height:30px;font-weight:600}
.blot .b-r.total span:first-child{color:var(--fg-faint);font-size:9px;letter-spacing:.4px;text-transform:uppercase}
.eqstrip{display:flex;align-items:center;height:28px;margin:8px 14px 12px;border:1px solid var(--border2);border-radius:8px;background:var(--surf0);font-family:var(--mono);overflow:hidden;flex:none}
.eqstrip .seg{display:flex;align-items:center;gap:7px;padding:0 14px;height:100%;border-right:1px solid var(--border);font-size:11px}
.eqstrip .seg:last-child{border-right:0;margin-left:auto}
.eqstrip .k{color:var(--fg-faint);font-size:9.5px;letter-spacing:.5px;text-transform:uppercase}
.eqstrip .v{color:var(--fg2)}
.sb-eq{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono)}
.sb-eq .k{color:var(--fg-faint);font-size:9px;letter-spacing:.4px}
.sb-eq .v{color:var(--fg2)}
/* ── position risk heatmap (proposal 18 · RISK dock tab) ─────────────────── */
.risk-wrap{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:auto}
.risk-mixed{margin:8px 14px 0;padding:5px 12px;border:1px solid var(--yellow);border-radius:7px;background:rgba(210,153,34,.08);font-family:var(--mono);font-size:10.5px;color:var(--yellow);flex:none}
.hm-tiles{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:10px;padding:12px 14px 4px;flex:none}
.hm-tile{border:1px solid var(--border);border-radius:8px;background:var(--panel);padding:10px 13px}
.hm-tile .tl{font-family:var(--mono);font-size:9.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--fg-faint)}
.hm-tile .tv{font-family:var(--mono);font-size:18px;font-weight:600;margin-top:6px;letter-spacing:-.01em;color:var(--fg2)}
.hm-tile .ts{font-family:var(--mono);font-size:10px;color:var(--fg-faint);margin-top:2px}
.hm{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:74px;gap:6px;padding:6px 14px 12px;flex:none}
.hm .cell{position:relative;border:1px solid var(--border2);border-radius:8px;padding:9px 11px;overflow:hidden;cursor:pointer;transition:transform .1s,border-color .1s}
.hm .cell:hover{transform:translateY(-1px);border-color:var(--accent)}
.hm .cell.sel{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.hm .cell.other{cursor:default}
.hm .csym{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--fg2);display:flex;align-items:center;gap:6px}
.hm .csd{font-size:9px;font-family:var(--mono);letter-spacing:.5px;border-radius:8px;padding:0 6px;line-height:15px}
.hm .csd.b{color:var(--acc-bid);border:1px solid rgba(116,199,190,.5)}
.hm .csd.s{color:var(--acc-ask);border:1px solid rgba(166,143,214,.5)}
.hm .cpnl{font-family:var(--mono);font-size:15px;font-weight:600;position:absolute;left:11px;bottom:8px}
.hm .cexp{font-family:var(--mono);font-size:9.5px;color:var(--fg-faint);position:absolute;right:11px;bottom:9px}
.hm .cbar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.05)}
.hm .cbar i{display:block;height:100%}
.dstrip{margin:2px 14px 12px;border:1px solid var(--border2);border-radius:8px;background:var(--surf0);overflow:hidden;flex:none}
.dstrip-h{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;border-bottom:1px solid var(--border-soft);font-family:var(--mono);font-size:9.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--fg-faint)}
.drow{display:flex;align-items:center;gap:10px;padding:5px 12px;font-family:var(--mono);font-size:11px}
.drow .dsym{flex:0 0 84px;color:var(--fg2)}
.drow .dbarwrap{flex:1;display:flex;align-items:center;height:14px;position:relative}
.drow .dmid{position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--border2)}
.drow .dbar{position:absolute;top:2px;height:10px;border-radius:2px}
.drow .dbar.long{left:50%;background:var(--pnl-long)}
.drow .dbar.short{right:50%;background:var(--pnl-short)}
.drow .dnet{flex:0 0 96px;text-align:right;color:var(--fg-dim)}
.dstrip .legend{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9.5px;color:var(--fg-faint);text-transform:none;letter-spacing:0}
.dstrip .legend .sw{width:34px;height:9px;border-radius:2px;background:linear-gradient(90deg,var(--pnl-short),var(--chip) 50%,var(--pnl-long))}
.risk-empty{flex:1;display:flex;align-items:center;justify-content:center;color:var(--fg-faint);font-family:var(--mono);font-size:11.5px}
/* ── price chart view (proposal 02 · .content.flush .chartv) ────────────── */
.chartv{height:100%;display:flex;flex-direction:column;background:var(--bg);font-family:var(--mono);overflow:hidden;padding:14px 18px}
.cv-hdr{display:flex;align-items:center;gap:14px;height:30px;flex:none;margin-bottom:10px}
.cv-sym{font-size:14px;font-weight:700;color:var(--fg2);letter-spacing:.02em}
.cv-select{height:24px;background:var(--surf2);border:1px solid var(--border2);border-radius:6px;color:var(--fg2);font-family:var(--mono);font-size:11px;padding:0 6px;outline:none;cursor:pointer}
.cv-select:focus{border-color:var(--accent)}
.cv-ohlc{display:flex;gap:12px;font-size:11px;color:var(--fg-dim)}
.cv-ohlc b{color:var(--fg2);font-weight:600}
.cv-ohlc .up{color:var(--tick-up)} .cv-ohlc .dn{color:var(--tick-dn)}
.cv-tfs{margin-left:auto;display:flex;gap:4px}
.cv-pill{font-family:var(--mono);font-size:10.5px;color:var(--fg-dim);border:1px solid var(--border2);border-radius:6px;padding:2px 9px;background:var(--panel);cursor:pointer;user-select:none}
.cv-pill:hover{border-color:var(--accent);color:var(--fg)}
.cv-pill.active{color:var(--on-grad-ink);background:var(--grad);border-color:transparent;font-weight:600;box-shadow:0 0 8px var(--glow)}
.cv-plot{position:relative;flex:1;min-height:0;border:1px solid var(--border);border-radius:8px;background:var(--bg2);overflow:hidden}
.cv-series{position:absolute;left:0;top:0;right:54px;bottom:0;display:flex;align-items:stretch}
.cv-col{position:relative;flex:1 1 0;min-width:0}
.cv-col.hx{background:var(--sel)}
.cv-wick{position:absolute;left:50%;transform:translateX(-50%);width:1px}
.cv-body{position:absolute;left:50%;transform:translateX(-50%);width:56%;max-width:6px;border-radius:1px}
.cv-wick.up,.cv-body.up{background:var(--tick-up)}
.cv-wick.dn,.cv-body.dn{background:var(--tick-dn)}
.cv-fill{position:absolute;transform:translate(-50%,-50%);font-size:12px;pointer-events:none;text-shadow:0 0 4px rgba(0,0,0,.8)}
.cv-fill.buy{color:var(--tick-up)} .cv-fill.sell{color:var(--tick-dn)}
.cv-fill-tag{position:absolute;transform:translate(-50%,-50%);font-family:var(--mono);font-size:9px;background:var(--surf2);border:1px solid var(--border2);border-radius:4px;padding:1px 5px;color:var(--fg-dim);white-space:nowrap;pointer-events:none}
.cv-axis{position:absolute;right:0;top:0;bottom:0;width:54px;border-left:1px solid var(--border-soft)}
.cv-axlbl{position:absolute;right:5px;transform:translateY(-50%);font-family:var(--mono);font-size:9.5px;color:var(--fg-faint)}
.cv-axlbl.last{color:var(--on-grad-ink);background:var(--grad);border-radius:3px;padding:1px 4px;right:3px;font-weight:600}
.cv-warm,.cv-plot .cv-warm{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--tx-faint2);font-size:11px}
.cv-note{display:flex;gap:16px;flex:none;margin-top:8px;font-family:var(--mono);font-size:10px;color:var(--fg-faint)}
.cv-legend.up{color:var(--tick-up)} .cv-legend.dn{color:var(--tick-dn)}
/* ── Time & Sales tape (feature 03 · .content.flush .tapev) ───────────────── */
.content.flush .tapev{height:100%;display:flex;flex-direction:column;background:var(--bg);font-family:var(--mono);overflow:hidden}
.tapev-head{display:flex;align-items:center;gap:12px;padding:12px 18px 10px;border-bottom:1px solid var(--border);flex:none}
.tapev-pill{font-size:9px;font-weight:700;letter-spacing:.5px;color:var(--on-grad-ink);background:var(--grad);border-radius:9px;padding:2px 7px}
.tapev-sel{background:var(--surf2);border:1px solid var(--border2);color:var(--fg2);border-radius:6px;padding:5px 9px;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.4px;outline:none;min-width:130px}
.tapev-sel:focus{border-color:var(--accent)}
.tapev-tiles{display:flex;gap:8px;margin-left:4px}
.tapev-tile{display:flex;flex-direction:column;gap:2px;padding:4px 12px;background:var(--surf0);border:1px solid var(--border-soft);border-radius:7px;min-width:78px}
.tapev-tile .tl{font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint)}
.tapev-tile .tv{font-size:13px;color:var(--fg2);font-variant-numeric:tabular-nums}
.tapev-tile.up .tv{color:var(--tick-up)}
.tapev-tile.dn .tv{color:var(--tick-dn)}
.tapev-ctl{margin-left:auto;display:flex;align-items:center;gap:12px}
.tapev-rate{font-size:11px;color:var(--fg-faint);font-variant-numeric:tabular-nums}
.tapev-pause{height:28px;display:inline-flex;align-items:center;gap:6px;padding:0 12px;border-radius:7px;border:1px solid var(--border2);background:var(--surf1);color:var(--fg);font-family:var(--mono);font-size:11px;cursor:pointer;letter-spacing:.5px}
.tapev-pause:hover{border-color:var(--accent)}
.tapev-pause.paused{color:var(--yellow);border-color:var(--yellow);background:rgba(210,153,34,.10)}
.tapev-table{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.tapev-h,.tapev-r{display:grid;grid-template-columns:minmax(110px,1.1fr) 100px 100px 100px 92px 78px;align-items:center;width:100%}
.tapev-h{position:sticky;top:0;z-index:2;padding:8px 18px;background:var(--surf0);border-bottom:1px solid var(--border);font-size:9px;letter-spacing:1px;color:var(--fg-faint);font-weight:600;text-transform:uppercase;flex:none}
.tapev-h .c-bid,.tapev-h .c-ask,.tapev-h .c-mid,.tapev-h .c-delta,.tapev-h .c-spr{text-align:right}
.tapev-list{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden}
.tapev-r{padding:5px 18px;border-bottom:1px solid var(--border-soft);color:var(--tx2);font-size:11.5px;font-variant-numeric:tabular-nums}
.tapev-r .c-time{color:var(--fg-faint);font-size:10.5px}
.tapev-r .c-bid{text-align:right;color:var(--acc-bid)}
.tapev-r .c-ask{text-align:right;color:var(--acc-ask)}
.tapev-r .c-mid{text-align:right;color:var(--fg);font-weight:600}
.tapev-r .c-delta{text-align:right}
.tapev-r .c-spr{text-align:right;color:var(--fg-faint)}
.tapev-r .c-mid.up,.tapev-r .c-delta.up{color:var(--tick-up)}
.tapev-r .c-mid.dn,.tapev-r .c-delta.dn{color:var(--tick-dn)}
.tapev-r.print{animation:tapev-flash .5s ease-out}
@keyframes tapev-flash{from{background:var(--sel)}to{background:transparent}}
.tapev-empty{padding:30px;text-align:center;color:var(--tx-faint2);font-size:11px}
.tapev-note{flex:none;padding:6px 18px;border-top:1px solid var(--border);font-size:9.5px;color:var(--fg-faint);letter-spacing:.2px}
/* ── session health & latency (proposal 10) — cards + latency sparkline + status strip ──────── */
.view-sub{color:var(--fg-dim);font-size:13px;max-width:820px;margin:2px 0 18px;line-height:1.6}
.hsx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;max-width:980px}
.hsx-card{border:1px solid var(--border);border-radius:9px;background:var(--panel);overflow:hidden}
.hsx-card.warn{border-color:var(--yellow)}
.hsx-card.down{border-color:var(--red)}
.hsx-top{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--border)}
.hsx-acct{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--fg2)}
.hsx-pill{margin-left:auto;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;border-radius:9px;padding:2px 8px;border:1px solid}
.hsx-pill.up{color:var(--green);border-color:var(--green);background:var(--soft-green)}
.hsx-pill.retry{color:var(--yellow);border-color:var(--yellow)}
.hsx-pill.off{color:var(--red);border-color:var(--red)}
.hsx-legs{display:flex;gap:16px;padding:8px 12px;border-bottom:1px solid var(--border-soft)}
.hsx-leg{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;color:var(--fg-dim)}
.hsx-leg .d{width:8px;height:8px;border-radius:50%;flex:none}
.hsx-leg .d.g{background:var(--green)}
.hsx-leg .d.y{background:var(--yellow)}
.hsx-leg .d.r{background:var(--red)}
.hsx-kv{display:grid;grid-template-columns:1fr 1fr;gap:2px 12px;padding:9px 12px}
.hsx-kv .r{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px}
.hsx-kv .r .k{color:var(--fg-faint)}
.hsx-kv .r .v{color:var(--fg2)}
.hsx-kv .r .v.warn{color:var(--yellow)}
.hsx-kv .r .v.bad{color:var(--red)}
.hsx-rtt{display:flex;align-items:center;gap:9px;padding:8px 12px;border-top:1px solid var(--border-soft);background:var(--surf0)}
.hsx-rtt .lbl{font-family:var(--mono);font-size:9px;letter-spacing:.5px;text-transform:uppercase;color:var(--fg-faint)}
.hsx-rtt .val{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--fg2)}
.hsx-spark{display:flex;align-items:flex-end;gap:1px;height:22px;margin-left:auto}
.hsx-spark .b{width:3px;background:var(--acc-ask);border-radius:1px;opacity:.85}
.hsx-spark .b.hi{background:var(--yellow)}
.hsx-off{padding:10px 12px;font-family:var(--mono);font-size:10.5px;color:var(--fg-faint);text-align:center;line-height:1.7}
.hsx-connect{color:var(--yellow);cursor:pointer}
.hsx-connect:hover{text-decoration:underline}
/* ═══ System & Thread Monitor (UX proposal 21) ═══ */
.sysm-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:1000px;margin-bottom:12px}
.sysm-gauge{border:1px solid var(--border);border-radius:9px;background:var(--panel);padding:11px 13px}
.sysm-gauge .gl{display:flex;align-items:center;justify-content:space-between;font-family:var(--mono);font-size:9.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--fg-faint)}
.sysm-gauge .gv{font-family:var(--mono);font-size:20px;font-weight:600;color:var(--fg2);margin-top:4px;line-height:1}
.sysm-gauge .gv .u{font-size:11px;color:var(--fg-faint);font-weight:400}
.sysm-gauge .gsub{font-family:var(--mono);font-size:10px;color:var(--fg-faint);margin-top:2px}
.sysm-bar{height:5px;border-radius:3px;background:var(--surf2);margin-top:9px;overflow:hidden}
.sysm-bar .f{height:100%;border-radius:3px;background:var(--acc-bid);transition:width .3s}
.sysm-bar .f.warn{background:var(--yellow)}
.sysm-bar .f.hot{background:var(--red)}
.sysm-spark{display:flex;align-items:flex-end;gap:1px;height:20px;margin-top:8px}
.sysm-spark .b{flex:1;background:var(--acc-ask);border-radius:1px;opacity:.8;min-height:2px}
.hw-strip{display:flex;flex-wrap:wrap;gap:0;margin-bottom:14px;border:1px solid var(--border2);border-radius:8px;background:var(--surf0);font-family:var(--mono);overflow:hidden;max-width:1000px}
.hw-strip .seg{display:flex;flex-direction:column;gap:2px;padding:8px 14px;border-right:1px solid var(--border);min-width:0}
.hw-strip .seg .k{font-size:9px;letter-spacing:.5px;text-transform:uppercase;color:var(--fg-faint)}
.hw-strip .seg .v{font-size:11.5px;color:var(--fg2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thr-wrap{max-width:1000px;border:1px solid var(--border);border-radius:9px;background:var(--panel);overflow:hidden}
.thr-tabs{display:flex;gap:6px;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.4px;padding:10px 12px 4px}
.thr-tab{padding:4px 11px;border:1px solid var(--border2);border-radius:7px;color:var(--fg-dim);background:var(--panel);cursor:pointer}
.thr-tab.on{color:var(--fg2);border-color:var(--accent);background:var(--surf2)}
.thr-tab .c{color:var(--fg-faint)}
.thr-h{display:flex;align-items:center;height:26px;padding:0 12px;font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--fg-faint);border-bottom:1px solid var(--border)}
.thr-r{display:flex;align-items:center;height:27px;padding:0 12px;font-family:var(--mono);font-size:11.5px;border-bottom:1px solid var(--border-soft)}
.thr-r:hover{background:var(--hover)}
.thr-r.idle{color:var(--fg-faint)}
.thr-wrap .c-tid{flex:0 0 72px;color:var(--fg-dim)}
.thr-wrap .c-tname{flex:1.6;min-width:0;color:var(--fg2);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.thr-wrap .c-tacct{flex:0 0 92px;color:var(--fg-dim)}
.thr-wrap .c-tstate{flex:0 0 92px}
.thr-wrap .c-tcpu{flex:0 0 62px;text-align:right}
.thr-wrap .c-ttime{flex:0 0 84px;text-align:right;color:var(--fg-dim)}
.tstate{font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;border-radius:9px;padding:1px 7px;border:1px solid}
.tstate.run{color:var(--green);border-color:var(--green)}
.tstate.wait{color:var(--yellow);border-color:var(--yellow)}
.tstate.idle{color:var(--fg-faint);border-color:var(--border2)}
.thr-foot{display:flex;flex-wrap:wrap;gap:16px;padding:8px 12px;border-top:1px solid var(--border-soft);font-family:var(--mono);font-size:10px;color:var(--fg-faint)}
.thr-foot b{color:var(--fg2)}
.thr-foot .g{color:var(--green)}
.thr-foot .y{color:var(--yellow)}
/* status-bar health strip */
.sb-health{display:inline-flex;align-items:center;gap:5px;color:var(--fg-dim)}
.sb-health .up{color:var(--green)}
.sb-health .warn{color:var(--yellow)}
.sb-health .sb-hsep{color:var(--fg-faint)}
/* ═══ Pre-trade risk guardrails (UX proposal 09) ═══ */
/* status-bar risk chips */
.statusbar .rchip{display:inline-flex;align-items:center;gap:6px;padding:1px 8px;border-radius:9px;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.4px;line-height:1.6}
.statusbar .rchip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.statusbar .rchip.ok{color:var(--green);border:1px solid color-mix(in srgb,var(--green) 40%,transparent)}
.statusbar .rchip.warn{color:var(--yellow);border:1px solid color-mix(in srgb,var(--yellow) 45%,transparent)}
.statusbar .rchip.off{color:var(--red);border:1px solid color-mix(in srgb,var(--red) 50%,transparent)}

/* daily-loss kill banner (sits between the titlebar and the body) */
.kill-banner{display:flex;align-items:center;gap:10px;flex:0 0 auto;padding:8px 16px;
  background:color-mix(in srgb,var(--red) 12%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--red) 40%,transparent);
  color:var(--red);font-family:var(--mono);font-size:11.5px;font-weight:600}
.kill-banner .kb-x{font-size:13px}
.kill-banner b{color:var(--red)}

/* large-order confirmation dialog (reuses .modal / .btn) */
.modal.risk-confirm{width:460px}
.risk-confirm .risk-krow{display:flex;justify-content:space-between;padding:5px 0;font-family:var(--mono);font-size:12px;color:var(--fg-dim)}
.risk-confirm .risk-krow b{color:var(--fg2)}
.risk-confirm .risk-krow.big{font-size:13px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin:8px 0;padding:8px 0}
.risk-confirm .risk-krow.big b{font-size:14px}
.risk-confirm .risk-krow .sideB{color:var(--acc-bid);font-weight:700}
.risk-confirm .risk-krow .sideS{color:var(--acc-ask);font-weight:700}
.risk-warnrow{display:flex;align-items:center;gap:8px;margin-top:12px;padding:8px 11px;border-radius:7px;
  background:color-mix(in srgb,var(--yellow) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--yellow) 40%,transparent);
  color:var(--yellow);font-family:var(--mono);font-size:11.5px}
.btn.risk-danger{color:var(--red);border-color:color-mix(in srgb,var(--red) 45%,transparent)}
.btn.risk-danger:hover{background:color-mix(in srgb,var(--red) 12%,transparent);border-color:var(--red)}

/* risk-limits editor (Settings) */
.risk-hint{color:var(--fg-dim);font-size:12px;max-width:760px;margin-bottom:14px}
.risk-hint b{color:var(--fg2)}
.risk-card{max-width:760px;background:var(--panel);border:1px solid var(--border);border-radius:10px;margin-bottom:14px;overflow:hidden}
.risk-card-h{display:flex;align-items:center;gap:10px;height:34px;padding:0 16px;border-bottom:1px solid var(--border);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--fg-faint)}
.risk-card-h .rchip{display:inline-flex;align-items:center;padding:1px 8px;border-radius:9px;font-size:9.5px;font-weight:600}
.risk-card-h .rchip.off{color:var(--red);border:1px solid color-mix(in srgb,var(--red) 50%,transparent)}
.risk-saved{margin-left:auto;color:var(--green);font-family:var(--mono);font-size:10px}
.risk-card-b{padding:14px 16px;display:grid;grid-template-columns:1fr 1fr;gap:10px 20px}
.risk-card-b .field{margin-bottom:0}
/* ── proposal 08: flatten / bulk actions (positions dock) ── */
.dock-main{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}
.dock-main .blot{flex:1;min-height:0}
.bulk-bar,.bulk-foot{display:flex;align-items:center;gap:10px;flex:0 0 auto;padding:7px 14px}
.bulk-bar{border-bottom:1px solid var(--surf2)}
.bulk-foot{border-top:1px solid var(--surf2)}
.bulk-spacer{flex:1}
.bulk-info{font-size:11px;color:var(--fg-dim)}
.bulk-info b{color:var(--fg2);font-weight:600}
.bulk-ok{font-size:11px;color:var(--green)}
.bulk-warn{font-size:11px;color:var(--yellow)}
.btn.sm{padding:4px 11px;font-size:11.5px;border-radius:6px}
.btn.danger{color:var(--red);border-color:rgba(224,106,106,.45)}
.btn.danger:hover:not(:disabled){background:rgba(224,106,106,.12);border-color:var(--red)}
.btn.panic{font-weight:600;letter-spacing:.4px}
.blot .cxl.rev{color:var(--bid)}
.blot .cxl.rev:disabled,.blot .cxl:disabled{opacity:.4;cursor:not-allowed}
/* confirm modal body (reuses .modal-overlay/.modal chrome) */
.bulk-confirm{width:460px}
.bulk-confirm .krow{display:flex;justify-content:space-between;padding:5px 0;font-family:var(--mono);font-size:12px;color:var(--fg-dim)}
.bulk-confirm .krow b{color:var(--fg2)}
.bulk-confirm .note{font-family:var(--mono);font-size:10.5px;color:var(--yellow);margin-top:8px}
.bulk-confirm p{color:var(--fg-dim);font-size:12.5px;margin-bottom:10px}
.bulk-confirm p b{color:var(--fg2)}
.bulk-legs{margin-top:10px;max-height:140px;overflow:auto;font-family:var(--mono);font-size:11px}
.bulk-legs .leg{display:flex;justify-content:space-between;padding:2px 0;color:var(--fg-dim)}
.bulk-legs .leg.bad{color:var(--red)}
.bulk-legs .leg.good{color:var(--green)}
/* ═══ UX 06 · bracket orders — attach-protection block + position bracket chips ═══ */
.prot-block{margin:8px 0 4px;border:1px dashed var(--border2);border-radius:8px;background:var(--surf0);overflow:hidden}
.prot-block.on{border-color:var(--accent)}
.prot-head{display:flex;align-items:center;gap:8px;padding:7px 10px;cursor:pointer;user-select:none}
.prot-head:hover{background:var(--hover)}
.prot-lbl{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-faint);font-weight:600}
.prot-note{margin-left:auto;font-family:var(--mono);font-size:9.5px;color:var(--fg-faint)}
.prot-sw{width:30px;height:16px;border-radius:9px;background:var(--surf2);border:1px solid var(--border2);position:relative;flex:0 0 auto;cursor:pointer}
.prot-sw.sm{width:26px;height:14px}
.prot-sw::after{content:"";position:absolute;top:2px;left:2px;width:10px;height:10px;border-radius:50%;background:var(--fg-dim);transition:.12s}
.prot-sw.sm::after{width:8px;height:8px}
.prot-sw.on{background:var(--sel);border-color:var(--accent)}
.prot-sw.on::after{left:16px;background:var(--accent)}
.prot-sw.sm.on::after{left:14px}
.prot-body{padding:6px 10px 10px}
.field.sl label{color:var(--red)}
.field.tp label{color:var(--green)}
.field.sl input{border-color:rgba(240,106,106,.35)}
.field.tp input{border-color:rgba(63,185,80,.35)}
.prot-trail{display:flex;align-items:center;gap:8px;margin:8px 0 2px;font-size:12px;color:var(--fg-dim)}
.trail-in{width:60px;height:22px;background:var(--surf2);border:1px solid var(--border2);border-radius:6px;color:var(--fg2);font-size:11px;text-align:center;outline:none}
.trail-in:focus{border-color:var(--accent)}
.rr-line{margin-top:9px;padding:7px 10px;border-radius:7px;background:var(--surf1);font-size:11.5px;color:var(--fg-dim);display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.rr-line .risk{color:var(--red)}
.rr-line .rew{color:var(--green)}
.rr-line .ratio b{color:var(--fg2)}
.rr-line .sep{color:var(--fg-faint)}
/* position-row bracket strip */
.pos-bkt{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:5px 14px 7px 14px;border-bottom:1px solid rgba(36,36,40,.55)}
.bkt-chip{font-family:var(--mono);font-size:10px;padding:2px 8px;border-radius:9px;border:1px solid var(--border2);color:var(--fg-dim)}
.bkt-chip.bkt-arm{color:var(--accent);border-color:var(--accent)}
.bkt-chip.bkt-sl{color:var(--red);border-color:rgba(240,106,106,.4)}
.bkt-chip.bkt-tp{color:var(--green);border-color:rgba(63,185,80,.4)}
.bkt-none{font-size:10.5px;color:var(--fg-faint)}
.bkt-btn{font-family:var(--mono);font-size:10px;cursor:pointer;color:var(--fg-faint);border:1px solid var(--border2);border-radius:8px;padding:2px 8px;background:transparent}
.bkt-btn:hover{border-color:var(--accent);color:var(--fg2)}
.bkt-btn.add{color:var(--accent);border-color:var(--accent)}
.prot-editor{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap;flex:1 1 100%;margin-top:6px;padding:8px 10px;border:1px solid var(--border2);border-radius:8px;background:var(--surf0)}
.pe-field{display:flex;flex-direction:column;gap:3px}
.pe-field label{font-size:10px;color:var(--fg-dim)}
.pe-field label.sl{color:var(--red)}
.pe-field label.tp{color:var(--green)}
.pe-field input{width:96px;height:24px;background:var(--surf2);border:1px solid var(--border2);border-radius:6px;color:var(--fg2);font-size:11px;padding:0 8px;outline:none}
.pe-field input:focus{border-color:var(--accent)}
/* ── ⌘K command palette + cheat-sheet (proposal 07) — tokens only ── */
.pal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:flex-start;justify-content:center;z-index:200}
.pal{width:560px;max-width:94vw;margin-top:11vh;background:var(--panel);border:1px solid var(--border2);border-radius:12px;box-shadow:0 30px 70px rgba(0,0,0,.65);overflow:hidden;display:flex;flex-direction:column}
.pal-in{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--border)}
.pal-in .mag{color:var(--fg-faint);display:flex}
.pal-input{flex:1;background:transparent;border:none;outline:none;color:var(--fg2);font-size:15px;font-family:"IBM Plex Sans",system-ui,sans-serif}
.pal-input::placeholder{color:var(--fg-faint)}
.pal-esc{font-family:var(--mono,"IBM Plex Mono",monospace);font-size:9.5px;color:var(--fg-faint);border:1px solid var(--border2);border-radius:5px;padding:2px 6px}
.pal-cheat-t{flex:1;color:var(--fg2);font-size:14px}
.pal-grp{font-family:var(--mono,"IBM Plex Mono",monospace);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint);padding:8px 16px 3px}
.pal-list{max-height:52vh;overflow:auto;padding-bottom:6px}
.pal-row{display:flex;align-items:center;gap:11px;padding:8px 16px;cursor:pointer;border-left:2px solid transparent}
.pal-row:hover,.pal-row.act{background:var(--sel);border-left-color:var(--accent)}
.pal-row .pic{flex:0 0 18px;text-align:center;color:var(--fg-dim);font-size:13px;font-family:var(--mono,"IBM Plex Mono",monospace)}
.pal-row .plab{flex:1;color:var(--fg2);font-size:13px}
.pal-row .plab small{display:block;color:var(--fg-faint);font-size:10.5px;font-family:var(--mono,"IBM Plex Mono",monospace)}
.pal-row .pkey{font-family:var(--mono,"IBM Plex Mono",monospace);font-size:10px;color:var(--fg-dim);background:var(--surf2);border:1px solid var(--border2);border-radius:5px;padding:2px 7px;white-space:nowrap}
.pal-none{padding:16px;color:var(--fg-faint);font-family:var(--mono,"IBM Plex Mono",monospace);font-size:11.5px;text-align:center}
.pal-foot{display:flex;gap:16px;padding:8px 16px;border-top:1px solid var(--border);font-family:var(--mono,"IBM Plex Mono",monospace);font-size:10px;color:var(--fg-faint)}
.pal-foot b{color:var(--fg-dim);font-weight:600}
.pal-cheat{width:600px}
.cheat{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:16px}
.cheat .cq{display:flex;align-items:center;gap:10px;background:var(--surf0);border:1px solid var(--border-soft);border-radius:8px;padding:9px 12px}
.cheat .kc{font-family:var(--mono,"IBM Plex Mono",monospace);font-size:12px;font-weight:600;color:var(--fg2);background:var(--surf2);border:1px solid var(--border2);border-radius:6px;padding:3px 9px;min-width:34px;text-align:center}
.cheat .kc.buy{color:var(--acc-bid);border-color:rgba(116,199,190,.4)}
.cheat .kc.sell{color:var(--acc-ask);border-color:rgba(166,143,214,.4)}
.cheat .cl{color:var(--fg-dim);font-size:11.5px}
.cheat .cl b{color:var(--fg2);font-weight:600}
/* ═══ price alerts & notifications (UX proposal 05) ═══ */
.al-wrap{position:relative;display:inline-flex;align-items:center}
.al-bell{position:relative}
.al-badge{position:absolute;top:-4px;right:-4px;min-width:15px;height:15px;padding:0 3px;border-radius:8px;background:var(--red);color:var(--on-grad-ink);font-family:var(--mono);font-size:9px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;line-height:1}
.al-drop{position:absolute;top:30px;right:0;width:340px;max-height:70vh;overflow-y:auto;background:var(--panel);border:1px solid var(--border2);border-radius:var(--r-menu,9px);box-shadow:var(--sh-menu,0 18px 48px rgba(0,0,0,.5));z-index:1200}
.al-drop-h{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--panel)}
.al-drop-t{font-family:var(--mono);font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--fg-faint);flex:1}
.al-link{font-family:var(--mono);font-size:10px;color:var(--accent);cursor:pointer}
.al-link:hover{text-decoration:underline}
.al-create{padding:10px 12px;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:7px}
.al-crow{display:flex;align-items:center;gap:7px}
.al-in{background:var(--surf2);border:1px solid var(--border2);color:var(--fg);border-radius:6px;padding:5px 8px;font-family:var(--mono);font-size:11px;outline:none;min-width:0}
.al-in:focus{border-color:var(--accent)}
.al-crow>.al-in:first-child{flex:1}
.al-cond{flex:1}
.al-crow>input.al-in{flex:1}
.al-chk{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);font-size:11px;color:var(--fg-dim);white-space:nowrap;cursor:pointer}
.al-arm{padding:5px 10px;font-size:11px;white-space:nowrap}
.al-arm:disabled{opacity:.45;cursor:not-allowed}
.al-err{font-family:var(--mono);font-size:10px;color:var(--red)}
.al-sec{font-family:var(--mono);font-size:9.5px;letter-spacing:.8px;text-transform:uppercase;color:var(--fg-faint);padding:7px 12px 4px}
.al-rules{display:flex;flex-direction:column}
.al-rule{display:flex;align-items:center;gap:8px;padding:5px 12px;font-family:var(--mono);font-size:11px;border-bottom:1px solid var(--border-soft)}
.al-rule-arm{cursor:pointer;color:var(--fg-faint)}
.al-rule-arm.on{color:var(--green)}
.al-rule-sym{color:var(--fg2);min-width:64px}
.al-rule-cond{color:var(--fg-dim);flex:1}
.al-rule-mode{color:var(--fg-faint);font-size:10px}
.al-rule-del{cursor:pointer;color:var(--fg-faint);padding:0 2px}
.al-rule-del:hover{color:var(--red)}
.al-inbox{display:flex;flex-direction:column}
.al-empty{padding:14px 12px;color:var(--fg-faint);font-size:12px;text-align:center}
.al-ev{display:flex;align-items:center;gap:9px;padding:8px 12px;border-bottom:1px solid var(--border-soft)}
.al-ev.unread{background:var(--sel)}
.al-ev-g{font-size:12px;width:12px;text-align:center;flex:none}
.al-ev-b{min-width:0;flex:1;font-family:var(--mono);font-size:11px}
.al-ev-sym{color:var(--fg2)}
.al-ev-tx{color:var(--fg-dim)}
.al-ev-t{font-family:var(--mono);font-size:9px;color:var(--fg-faint);flex:none}
.al-toasts{position:fixed;right:18px;bottom:18px;width:290px;display:flex;flex-direction:column;gap:10px;z-index:1400;pointer-events:none}
.al-toast{background:var(--panel);border:1px solid var(--border2);border-left:3px solid var(--yellow);border-radius:9px;padding:9px 12px;box-shadow:var(--sh-modal,0 14px 34px rgba(0,0,0,.5));pointer-events:auto}
.al-toast-h{display:flex;align-items:center;gap:8px}
.al-toast-title{font-family:var(--mono);font-size:11px;color:var(--fg2);font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.al-toast-x{cursor:pointer;color:var(--fg-faint);font-size:13px}
.al-toast-x:hover{color:var(--fg)}
.al-toast-tx{font-family:var(--mono);font-size:11px;color:var(--fg-dim);margin-top:4px}

/* ── FIX Message Inspector (UX proposal 11): per-MsgType tab strip + one-column-per-tag grid ── */
.content.flush .mti{display:flex;flex-direction:column;min-height:0;margin:14px 18px;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.mti-tabs{display:flex;align-items:stretch;gap:0;height:36px;border-bottom:1px solid var(--border);background:var(--panel);overflow-x:auto;flex:none}
.mti-tab{display:inline-flex;align-items:center;gap:7px;padding:0 13px;height:100%;border-right:1px solid var(--border-soft);font-family:var(--mono);font-size:11px;color:var(--fg-dim);cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent;user-select:none}
.mti-tab:hover{background:var(--hover);color:var(--fg2)}
.mti-tab.sel{color:var(--fg2);border-bottom-color:var(--accent);background:var(--surf0)}
.mti-tab .mti-mt b{color:var(--fg2);font-weight:600}
.mti-tab .mti-ct{font-size:9.5px;color:var(--fg-faint);background:var(--chip);border-radius:9px;padding:1px 7px;min-width:20px;text-align:center}
.mti-tab.sel .mti-ct{color:var(--fg2)}
.mti-tab .mti-ct.hot{color:var(--green);background:var(--soft-green)}
.mti-toolbar{display:flex;align-items:center;gap:8px;padding:7px 14px;border-bottom:1px solid var(--border-soft);background:var(--surf0);flex:none}
.mti-toolbar .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.4px;text-transform:uppercase;color:var(--fg-faint)}
.mti-seg{display:inline-flex;border:1px solid var(--border2);border-radius:6px;overflow:hidden}
.mti-seg button{background:transparent;border:0;color:var(--fg-dim);font-family:var(--mono);font-size:10px;letter-spacing:.4px;text-transform:uppercase;padding:4px 10px;cursor:pointer}
.mti-seg button:not(:last-child){border-right:1px solid var(--border2)}
.mti-seg button.on{background:var(--surf2);color:var(--fg2)}
.mti-seg button.on.in{color:var(--acc-ask)}.mti-seg button.on.out{color:var(--acc-bid)}
.mti-cap{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--fg-faint)}
.mti-scroll{overflow-x:auto;overflow-y:auto;flex:1;min-height:0}
.mti-hd{display:flex;align-items:stretch;height:30px;padding:0 14px;font-family:var(--mono);font-size:9.5px;letter-spacing:.3px;color:var(--fg-faint);border-bottom:1px solid var(--border-soft);width:max-content;min-width:100%;position:sticky;top:0;background:var(--bg2);z-index:1}
.mti-hd .h{display:flex;flex-direction:column;justify-content:center;line-height:1.15}
.mti-hd .h .tag{color:var(--acc-gold);font-weight:600}
.mti-hd .h .nm{text-transform:uppercase;letter-spacing:.4px;font-size:8.5px;color:var(--fg-faint)}
.mti-hd .lead-h{display:flex;align-items:center;text-transform:uppercase;letter-spacing:.4px}
.mti-hd .lead-h.c-seq{justify-content:flex-end}
.mti-row{display:flex;align-items:center;height:27px;padding:0 14px;font-family:var(--mono);font-size:11.5px;border-bottom:1px solid var(--border-soft);width:max-content;min-width:100%}
.mti-row:hover{background:var(--hover)}
.mti-row.fresh{background:var(--soft-green)}
.mti .c-t{flex:0 0 96px;color:var(--fg-dim)}
.mti .c-d{flex:0 0 46px;font-weight:600}
.mti .c-d.in{color:var(--acc-ask)}.mti .c-d.out{color:var(--acc-bid)}
.mti .c-acct{flex:0 0 118px;color:var(--fg2);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.mti .c-acct .adot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);margin-right:6px;vertical-align:middle}
.mti .c-leg{flex:0 0 60px;color:var(--fg-faint);font-size:10px}
.mti .c-seq{flex:0 0 62px;text-align:right;color:var(--fg-dim);padding-right:16px}
.mti .c-tag{flex:0 0 auto;min-width:88px;padding-right:18px;color:var(--fg);white-space:nowrap}
.mti .c-tag.num{text-align:right}
.mti .c-tag.sym{color:var(--fg2)}
.mti .c-tag .dash{color:var(--fg-faint)}
.mti .c-prev{flex:1;min-width:340px;color:var(--tx2);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:2px}
.mti .c-prev .k{color:var(--acc-lavender);font-weight:600}
.mti .tk-note{flex:none}
.mti-body{width:max-content;min-width:100%}

/* ── Rolling activity heatmap (UX proposal 19) ─────────────────────────────
   One lane per observable object over a 1s × 5-minute grid; brightness encodes
   events-that-second. Colour ramp per lane kind via color-mix on design tokens
   (md=--acc-teal · depth=--pnl-long · session=--accent · order=--pnl-short). */
.hm{border:1px solid var(--border);border-radius:8px;background:var(--surf0);overflow:hidden}
.hm-top{display:flex;align-items:center;gap:14px;padding:7px 12px;border-bottom:1px solid var(--border);font-family:var(--mono);font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--fg-faint)}
.hm-top .seg{display:flex;align-items:center;gap:6px}
.hm-top .seg .v{color:var(--fg2);text-transform:none;letter-spacing:0}
.hm-top .rd{margin-left:auto;color:var(--fg-dim);text-transform:none;letter-spacing:0;font-size:11px}
.hm-top .rd b{color:var(--acc-teal)}
.hm-axis{display:flex;padding:3px 0 3px 132px;border-bottom:1px solid var(--border-soft);font-family:var(--mono);font-size:9px;color:var(--fg-faint);position:relative;height:18px}
.hm-axis span{position:absolute;transform:translateX(-50%)}
.hm-rows{position:relative}
.hm-lane{display:flex;align-items:stretch;height:17px;border-bottom:1px solid var(--border-soft)}
.hm-lane:last-child{border-bottom:0}
.hm-lbl{flex:0 0 132px;display:flex;align-items:center;gap:6px;padding:0 8px 0 12px;font-family:var(--mono);font-size:10px;color:var(--fg-dim);border-right:1px solid var(--border-soft);white-space:nowrap;overflow:hidden}
.hm-lbl .k{width:6px;height:6px;border-radius:1px;flex:none;background:var(--lane)}
.hm-lbl .nm{overflow:hidden;text-overflow:ellipsis}
.hm-lbl .ct{margin-left:auto;color:var(--fg-faint);font-size:9px}
.hm-cells{flex:1;display:flex;min-width:0}
.hm-cells i{flex:1;min-width:0;display:block}
.hm-cursor{position:absolute;top:0;bottom:0;width:1px;background:color-mix(in srgb,var(--acc-teal) 55%,transparent);pointer-events:none;right:0}
.hm-foot{display:flex;align-items:center;gap:16px;padding:6px 12px;border-top:1px solid var(--border);font-family:var(--mono);font-size:10px;color:var(--fg-faint)}
.hm-foot .g{color:var(--green)}
.hm-foot .scale{display:flex;align-items:center;gap:3px;margin-left:auto}
.hm-foot .scale i{width:12px;height:9px;display:inline-block;border-radius:1px}
