/* Edgematic Cloud v4 — shared design system, copied unchanged from v3 (which is v2 + quieter attribution marks).
   Extracted from Matt's own tools (read-only sources in the workspace):
     edgematic-companion.html  → variables, glass .card, topbar / logo / livepill, Orbitron headers, scrollbars
     edgematic-journal.css     → .jx tabs, chips, tags, inputs, tables, steps, toggles, KPI cards, calendar
     edgematic-live.html       → plane #040810, particle field, #border-glow edge, #order-drawer (op-*), btn-place,
                                 opgd group menu, opg tier card, pz/lo position + order lines, #pnl-float box
   Fonts (self-host in phase 2, all SIL OFL): Orbitron 600/800 · Chakra Petch 400/600/700 · Rajdhani 600/700.
   'Courier New' is the chart / companion base face (system font, not shipped). */

:root{
  --plane:#040810;
  --surface:rgba(13,12,30,0.44); --surface-2:rgba(20,16,44,0.52); --surface-solid:#0a1020;
  --ink:#e6edf6; --ink-2:#9fb0c3; --muted:#6a7f94;
  --gridline:#141d2e; --line:#1b2740; --line-2:rgba(27,39,64,.6);
  /* app accent = the companion's --bias in its NEUTRAL state (neon blue). body.pink switches to the bull pink. */
  --bias:#00b3ff; --bias-glow:rgba(0,179,255,0.42); --bias-soft:rgba(0,179,255,0.09); --bias-line:rgba(0,179,255,0.22);
  --green:#00ff88; --green-glow:rgba(0,255,136,0.40); --green-soft:rgba(0,255,136,0.09);
  --red:#ff3355; --red-glow:rgba(255,51,85,.45); --red-soft:rgba(255,51,85,0.12);
  --amber:#ffb020; --amber-soft:rgba(255,176,32,.12);
  --cyan:#25e2ff; --cyan-glow:rgba(37,226,255,0.5); --cyan-soft:rgba(37,226,255,0.10);
  --purple:#b45cff; --purple-soft:rgba(180,92,255,.13);
  --add:#00d4ff;
  --r:10px;
  --f-head:'Orbitron','Chakra Petch','Courier New',monospace;
  --f-ui:'Chakra Petch','Courier New',monospace;
  --f-num:'Rajdhani','Chakra Petch',monospace;
  --f-mono:'Courier New',Courier,monospace;
}
body.pink{--bias:#ff2d9c; --bias-glow:rgba(255,45,156,0.45); --bias-soft:rgba(255,45,156,0.09); --bias-line:rgba(255,45,156,0.22)}

*{box-sizing:border-box;margin:0;padding:0}
*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--bias) 35%,transparent) transparent}
html{background:var(--plane)}
body{background:radial-gradient(1200px 600px at 20% -10%,var(--bias-soft),transparent 60%),var(--plane);
  min-height:100vh;color:var(--ink);font-family:var(--f-ui);font-weight:600;font-size:13px;line-height:1.45;
  -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}

/* ── background: chart particle field + edge glow ───────────────────────── */
#bg-canvas{position:fixed;inset:0;z-index:0;opacity:.45;pointer-events:none}
#border-glow{position:fixed;inset:0;z-index:3;pointer-events:none;border:1px solid color-mix(in srgb,var(--bias) 14%,transparent);
  box-shadow:inset 0 0 18px 2px var(--bias-glow),inset 0 0 40px 1px var(--bias-soft)}

/* ── type helpers ────────────────────────────────────────────────────────── */
.num{font-family:var(--f-num);font-weight:700;font-variant-numeric:tabular-nums}
.mono{font-family:var(--f-mono);font-weight:400;letter-spacing:.02em}
.lbl{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600}
.muted{color:var(--muted)} .dim{color:var(--ink-2)}
.small{font-size:11px}
.pos{color:var(--green)} .neg{color:var(--red)} .amb{color:var(--amber)} .cy{color:var(--cyan)}
.glow-pos{text-shadow:0 0 12px var(--green-glow)} .glow-neg{text-shadow:0 0 12px var(--red-glow)}
.sp{margin-left:auto}
.hint{font-size:11px;color:var(--muted);font-weight:400;line-height:1.5}
.l{color:var(--cyan);cursor:pointer;font-weight:600}
.l:hover{text-shadow:0 0 10px var(--cyan-glow)}

/* ── logo (companion / chart #logo) ───────────────────────────────────── */
.logo{font-family:var(--f-mono);font-weight:400;font-size:19px;letter-spacing:.35em;text-transform:uppercase;
  color:rgba(255,255,255,.22);white-space:nowrap}
.logo span{color:var(--bias);text-shadow:0 0 14px var(--bias-glow)}
.logo.big{font-size:30px;letter-spacing:.38em}

/* ── glass window (companion .card) ───────────────────────────────────── */
.win{position:relative;background:var(--surface);border:1px solid var(--bias-line);border-radius:var(--r);padding:16px 18px;
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  box-shadow:0 0 24px color-mix(in srgb,var(--bias) 5%,transparent) inset,0 8px 30px rgba(0,0,0,.3)}
/* journal modal look: cyan rim, a bit denser */
.win.cyan{background:var(--surface-2);border-color:rgba(37,226,255,.22);box-shadow:0 0 40px rgba(37,226,255,.08),0 20px 60px rgba(0,0,0,.45)}
.win h2,.wh{display:flex;align-items:center;gap:10px;font-family:var(--f-head);font-size:11px;text-transform:uppercase;letter-spacing:.18em;
  color:var(--bias);font-weight:800;text-shadow:0 0 8px var(--bias-glow);margin-bottom:12px}
.win h2 .lbl,.win h2 .hint{font-family:var(--f-ui);text-shadow:none;letter-spacing:.12em}
.win .hnote{font-size:10.5px;color:var(--muted);margin:-8px 0 10px;font-weight:400}
.sec{font-family:var(--f-head);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--bias);font-weight:800;
  padding:8px 0 6px;border-bottom:1px solid var(--line);margin:14px 0 10px;display:flex;align-items:baseline;gap:10px}
.sec.tgt{color:var(--green);text-shadow:0 0 8px var(--green-glow)}
.title{font-family:var(--f-head);font-weight:800;font-size:18px;letter-spacing:.14em;text-transform:uppercase;color:#fff;
  text-shadow:0 0 12px var(--cyan-glow)}

/* ── top bar + nav (companion topbar + journal pill tabs) ─────────────────── */
.topbar{position:relative;z-index:5;display:flex;align-items:center;gap:26px;padding:16px 24px 14px;border-bottom:1px solid var(--bias-line)}
.tabs{display:flex;gap:4px}
.tab{font-family:var(--f-ui);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
  padding:6px 14px;border-radius:999px;border:1px solid transparent;background:none;cursor:pointer;white-space:nowrap}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--cyan);background:var(--cyan-soft);border-color:rgba(37,226,255,.4);box-shadow:0 0 10px var(--cyan-soft)}
.topright{display:flex;align-items:center;gap:14px;margin-left:auto}
.clock{color:var(--ink-2);font-family:var(--f-mono);font-weight:400;font-size:12.5px;white-space:nowrap}
.clock b{color:var(--ink);font-weight:700}
.livepill{display:flex;align-items:center;gap:7px;color:var(--green);font-size:11px;font-weight:700;letter-spacing:.06em;white-space:nowrap;
  border:1px solid rgba(0,255,136,.3);border-radius:999px;padding:4px 11px;background:var(--green-soft);
  box-shadow:0 0 12px rgba(0,255,136,.25),0 0 22px var(--green-soft)}
.livepill .dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px var(--green-soft),0 0 10px var(--green-glow);
  animation:pulse-dot 2.2s ease-in-out infinite}
.livepill.off{color:var(--muted);border-color:var(--line);background:rgba(255,255,255,.03);box-shadow:none}
.livepill.off .dot{background:var(--muted);box-shadow:none;animation:none}
.livepill.warn{color:var(--amber);border-color:rgba(255,176,32,.4);background:var(--amber-soft);box-shadow:0 0 12px rgba(255,176,32,.2)}
.livepill.warn .dot{background:var(--amber);box-shadow:0 0 8px var(--amber)}
@keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:.45}}
.avatar{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  font-family:var(--f-ui);font-size:13px;font-weight:700;color:var(--cyan);
  background:radial-gradient(circle at 50% 40%,rgba(37,226,255,.14),rgba(6,10,20,.92) 70%);border:1px solid rgba(37,226,255,.55);
  box-shadow:0 0 10px rgba(37,226,255,.35),inset 0 0 8px rgba(37,226,255,.18)}

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:var(--f-ui);font-size:11.5px;font-weight:600;
  color:var(--ink-2);background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:7px 12px;cursor:pointer;white-space:nowrap}
.btn:hover{color:var(--ink);border-color:rgba(37,226,255,.35)}
.btn.sm{padding:4px 10px;font-size:11px}
.btn.on{color:var(--cyan);background:var(--cyan-soft);border-color:rgba(37,226,255,.45)}
/* primary = neon outline (chart btn-place / companion jbtn) */
.btn.pri{color:var(--cyan);background:var(--cyan-soft);border-color:rgba(37,226,255,.55);letter-spacing:.12em;text-transform:uppercase;
  text-shadow:0 0 6px var(--cyan-glow);box-shadow:0 0 10px var(--cyan-soft)}
.btn.pri:hover{box-shadow:0 0 16px var(--cyan-glow);color:var(--cyan)}
.btn.go{color:var(--green);background:rgba(0,255,136,.08);border-color:var(--green);letter-spacing:.12em;text-transform:uppercase;text-shadow:0 0 6px var(--green)}
.btn.danger{color:#ff8fa0;border-color:rgba(255,51,85,.45);background:rgba(255,51,85,.06)}
.btn.block{width:100%;padding:11px}
.btn[disabled]{opacity:.35;cursor:default;box-shadow:none;text-shadow:none}

/* ── form controls (journal j-fg / jx-input) ──────────────────────────── */
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px;min-width:0}
.field > label,.field > .lbl{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.in,select.in,textarea.in{font-family:var(--f-ui);font-size:12.5px;font-weight:600;color:var(--ink);background:rgba(4,8,16,.5);
  border:1px solid var(--line);border-radius:6px;padding:8px 10px;color-scheme:dark;width:100%;min-width:0;outline:none}
.in:focus{border-color:rgba(37,226,255,.6);box-shadow:0 0 0 3px var(--cyan-soft),0 0 12px var(--cyan-soft)}
.in::placeholder{color:#4a5d70;font-weight:400}
.in.sm{padding:5px 8px;font-size:11.5px}
.in.mono{font-family:var(--f-mono);font-weight:700}
select.in option{background:#0d1520;color:var(--ink)}
.row{display:flex;gap:12px}
.row > .field{flex:1}
.check{display:flex;gap:9px;align-items:flex-start;font-size:12px;color:var(--ink-2);font-weight:400;line-height:1.5;margin:4px 0 14px;cursor:pointer}
/* checkbox (journal .jx-cb) — native input, CSP-safe, tri-state via data-state="part" */
.cb{appearance:none;-webkit-appearance:none;flex:0 0 auto;width:14px;height:14px;border:1px solid var(--muted);border-radius:3px;margin-top:2px;cursor:pointer;
  background:transparent;vertical-align:-2px}
.cb:checked{background:var(--cyan);border-color:var(--cyan);box-shadow:0 0 6px var(--cyan-glow)}
.cb.part{background:linear-gradient(var(--cyan),var(--cyan)) center/8px 2px no-repeat;border-color:var(--cyan)}
/* segmented (journal .jx-seg) */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.seg span,.seg button{font-family:var(--f-ui);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:6px 13px;
  color:var(--ink-2);cursor:pointer;background:none;border:none}
.seg .on{color:var(--cyan);background:var(--cyan-soft)}
/* toggle (journal .jx-toggle) */
.tg{display:inline-block;width:30px;height:16px;border-radius:999px;background:var(--line);position:relative;vertical-align:-3px;cursor:pointer;flex:0 0 auto}
.tg::after{content:'';position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;background:var(--muted);transition:left .12s}
.tg.on{background:rgba(0,255,136,.35)} .tg.on::after{left:16px;background:var(--green);box-shadow:0 0 6px var(--green)}

/* ── chips / tags / pills ───────────────────────────────────────────────── */
.chip{font-family:var(--f-ui);font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--ink-2);background:var(--surface);border:1px solid var(--line);
  border-radius:999px;padding:4px 11px;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.chip.on{color:var(--cyan);background:var(--cyan-soft);border-color:rgba(37,226,255,.4);box-shadow:0 0 9px var(--cyan-soft)}
.tag{font-size:9px;letter-spacing:.08em;text-transform:uppercase;padding:2px 6px;border-radius:4px;font-weight:700;white-space:nowrap;display:inline-block}
.tag.g{color:var(--green);background:var(--green-soft)} .tag.r{color:var(--red);background:var(--red-soft)}
.tag.a{color:var(--amber);background:var(--amber-soft)} .tag.c{color:var(--cyan);background:var(--cyan-soft)}
.tag.p{color:var(--purple);background:var(--purple-soft)} .tag.m{color:var(--muted);background:rgba(95,115,135,.15)}
.tag.b{color:var(--bias);background:var(--bias-soft)}
.tag.o{background:transparent;border:1px solid currentColor}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.dot.ok{background:var(--green);box-shadow:0 0 6px var(--green)} .dot.bad{background:var(--red);box-shadow:0 0 6px var(--red)}
.dot.warn{background:var(--amber);box-shadow:0 0 6px var(--amber)} .dot.idle{background:var(--muted)}

/* ── notes / alerts (companion nw-hero, journal jx-alert) ───────────────── */
.note{border:1px solid rgba(37,226,255,.25);background:rgba(37,226,255,.05);border-radius:8px;padding:9px 12px;font-size:11.5px;color:var(--ink-2);
  font-weight:400;line-height:1.55}
.note b{color:var(--ink);font-weight:700}
.note.warn{border-color:rgba(255,176,32,.38);background:rgba(255,176,32,.05)}
.note.warn b{color:var(--amber)}
.note.bad{border-color:rgba(255,51,85,.45);background:rgba(255,51,85,.07);color:#ffb3bf}
.note.ok{border-color:rgba(0,255,136,.32);background:rgba(0,255,136,.05)}
.note.ok b{color:var(--green)}

/* ── KPI tiles (journal .jx-sum / companion cohort) ──────────────────────── */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:11px 14px;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.kpi .v{font-family:var(--f-num);font-weight:700;font-size:26px;line-height:1.05;margin-top:4px;font-variant-numeric:tabular-nums}
.kpi .s{font-size:10.5px;color:var(--ink-2);margin-top:2px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi.dim{opacity:.45}

/* ── tables (journal .jx-table) ─────────────────────────────────────────── */
.tbl{width:100%;border-collapse:collapse;font-size:11.5px}
.tbl th{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:left;font-weight:600;padding:6px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:7px 8px;border-bottom:1px solid var(--line-2);white-space:nowrap}
.tbl .r{text-align:right}
.tbl td.c,.tbl th.c{text-align:center;width:34px}
.tbl tr.off td{opacity:.45}
.tbl tr.grp td{background:rgba(37,226,255,.05);padding:9px 8px;border-top:1px solid var(--line);cursor:pointer}
.tbl tr.grp.down td{background:rgba(255,51,85,.07)}
.tbl tr.tier td{background:rgba(180,92,255,.045)}
.tbl tr.ex td{background:rgba(255,176,32,.05)}
.tbl tr.ex td:first-child{box-shadow:inset 2px 0 0 var(--amber)}
.tbl tr.bad td:first-child{box-shadow:inset 2px 0 0 var(--red)}
.tbl tr.mem td:first-child{box-shadow:inset 2px 0 0 rgba(37,226,255,.35)}
.caret{color:var(--cyan);display:inline-block;width:12px}
.ind1{padding-left:26px!important} .ind2{padding-left:46px!important}

/* one tick per account (pz-strip): healthy / warning / problem */
.ticks{display:flex;gap:1px;height:4px;min-width:60px}
.ticks i{flex:1;background:rgba(0,255,136,.55);border-radius:1px}
.ticks i.w{background:var(--amber)} .ticks i.x{background:var(--red)} .ticks i.o{background:rgba(255,255,255,.14)}

/* steps (journal .jx-steps) */
.steps{display:flex;gap:10px}
.step{flex:1;display:flex;align-items:center;gap:10px;padding:9px 14px;border:1px solid var(--line);border-radius:8px;font-size:12px;color:var(--ink-2);
  background:rgba(4,8,16,.35);white-space:nowrap}
.step b{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);font-size:11px;flex:0 0 auto}
.step.done{color:var(--green);border-color:rgba(0,255,136,.3)} .step.done b{background:var(--green-soft);border-color:var(--green)}
.step.cur{color:var(--cyan);border-color:var(--cyan);box-shadow:0 0 12px var(--cyan-soft)} .step.cur b{background:var(--cyan-soft);border-color:var(--cyan)}

/* option tile (journal .jx-opt) */
.opt{flex:1;border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:10.5px;color:var(--ink-2);cursor:pointer;line-height:1.35;font-weight:400}
.opt b{display:block;color:var(--cyan);font-size:12px;letter-spacing:.08em;margin-bottom:2px;font-weight:700}
.opt.on{border-color:rgba(37,226,255,.5);background:var(--cyan-soft);color:var(--ink)} .opt.off{opacity:.4;cursor:default}

/* exception list (journal .jx-exc) */
.exc .r{display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:start;padding:8px 0;border-bottom:1px solid var(--line)}
.exc .r:last-child{border:none}
.exc .ico{width:22px;height:22px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px}
.exc .ico.a{color:var(--amber);background:var(--amber-soft)} .exc .ico.x{color:var(--red);background:var(--red-soft)} .exc .ico.c{color:var(--cyan);background:var(--cyan-soft)}
.exc .t1{font-weight:700;font-size:12px} .exc .t2{font-size:10.5px;color:var(--ink-2);margin-top:2px;line-height:1.4;font-weight:400}

/* feed rows (companion news calendar .nw-row) */
.feed .fr{display:grid;grid-template-columns:62px 10px 1fr auto;gap:9px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line-2)}
.feed .fr:last-child{border:none}
.feed .t{font-family:var(--f-num);font-weight:700;font-size:14px;color:var(--ink-2)}
.feed .tx{font-size:12px;font-weight:600;min-width:0}
.feed .tx span{display:block;font-size:10px;color:var(--muted);font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feed .v{font-family:var(--f-num);font-weight:700;font-size:14px;text-align:right;white-space:nowrap}

/* provider attribution (viafoot): page flow, never over content, only while connected */
.viafoot{display:flex;align-items:center;justify-content:center;gap:22px;padding:28px 0 8px;opacity:.38}
.viafoot img{height:14px;width:auto;filter:grayscale(1)}
.viafoot img.omne{height:11px}

/* ── order panel (chart #order-drawer) ───────────────────────────────────── */
.op{--opc:#00ff88;--opg:rgba(0,255,136,.4);--ops:rgba(0,255,136,.08);
  font-family:var(--f-mono);font-weight:400;font-size:12px;color:#e0e8f0;
  background:rgba(4,8,16,.82);border:1px solid var(--opc);border-radius:var(--r);padding:16px 16px 18px;
  box-shadow:0 8px 30px rgba(0,0,0,.45),inset -30px 0 40px -30px var(--ops),0 0 18px var(--ops);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.op.short{--opc:#ff3355;--opg:rgba(255,51,85,.4);--ops:rgba(255,51,85,.08)}
.op.add{--opc:#00d4ff;--opg:rgba(0,212,255,.4);--ops:rgba(0,212,255,.08)}
.op-title{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--opc);text-shadow:0 0 8px var(--opc);margin-bottom:10px;
  display:flex;justify-content:space-between;align-items:center}
.op-title .x{font-size:10px;letter-spacing:0;text-transform:none;color:rgba(224,232,240,.4);text-shadow:none}
.op-section{margin-bottom:14px;padding-bottom:13px;border-bottom:1px solid rgba(255,255,255,.06)}
.op-section:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.op-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px}
.op-label{color:rgba(224,232,240,.5);font-size:10px;text-transform:uppercase;letter-spacing:.06em}
.op-val{color:#e0e8f0}
.op-input{background:color-mix(in srgb,var(--opc) 4%,transparent);border:1px solid color-mix(in srgb,var(--opc) 28%,transparent);border-radius:2px;color:#e0e8f0;
  font-family:var(--f-mono);font-size:12px;padding:5px 8px;text-align:right;width:92px;outline:none}
.op-input:focus{border-color:var(--opc)}
.op-rr{font-size:11px;color:rgba(224,232,240,.6)}
.op-toggle{position:relative;display:inline-block;width:96px;height:26px;cursor:pointer;user-select:none;flex:0 0 auto}
.op-toggle .tr{position:absolute;inset:0;border-radius:13px;background:var(--ops);border:1px solid var(--opc)}
.op-toggle .th{position:absolute;top:2px;left:2px;width:44px;height:20px;border-radius:10px;background:var(--opc);display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;color:#04100a}
.op-toggle.r .th{transform:translateX(46px)}
.op-toggle.r.gray .th{background:#3f3f46;color:#e0e8f0}
.op-toggle.off{opacity:.4}
.btn-place{width:100%;padding:11px;background:color-mix(in srgb,var(--opc) 8%,transparent);border:1px solid var(--opc);border-radius:2px;color:var(--opc);
  font-family:var(--f-mono);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;text-shadow:0 0 6px var(--opc)}
.btn-place:hover{box-shadow:0 0 14px var(--ops)}
.btn-place.flat{--opc:#ff3355;box-shadow:0 0 10px rgba(255,51,85,.3),inset 0 0 8px rgba(255,51,85,.12)}
.btn-place.ghost{--opc:#9fb3c8;text-shadow:none}
/* group dropdown trigger + menu (opgd) */
.opgd{display:flex;align-items:center;gap:8px;border:1px solid color-mix(in srgb,var(--opc) 45%,transparent);padding:7px 10px;cursor:pointer;
  background:color-mix(in srgb,var(--opc) 3%,transparent);box-shadow:inset 0 0 10px color-mix(in srgb,var(--opc) 5%,transparent);min-height:34px}
.opgd .nm{font-size:12px;font-weight:700;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.opgd .pl{margin-left:auto;font-size:11px;font-weight:700}
.opgd .chev{color:var(--opc);font-size:11px;margin-left:6px}
.opgd-menu{background:#0a1018;border:1px solid var(--opc);box-shadow:0 12px 30px rgba(0,0,0,.7),0 0 16px color-mix(in srgb,var(--opc) 15%,transparent)}
.opgd-it{display:grid;grid-template-columns:14px 1fr auto;gap:8px;align-items:center;padding:8px 10px;border-top:1px solid rgba(255,255,255,.05)}
.opgd-it.hl{background:color-mix(in srgb,var(--opc) 7%,transparent)}
.opgd-it .ck{color:var(--opc);font-size:11px}
.opgd-it .nm{font-size:11.5px;font-weight:700;letter-spacing:.05em}
.opgd-it .sub{font-size:9px;color:rgba(224,232,240,.45);margin-top:3px}
.opgd-it .r{text-align:right;font-size:11px;white-space:nowrap}
/* selected-group card with one bar per tier (opg) */
.opg{margin-top:8px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02);padding:9px 10px;font-size:10px;color:rgba(224,232,240,.55)}
.opg-hd{display:flex;align-items:center;gap:8px}
.opg-mode{font-size:9px;letter-spacing:.12em;font-weight:700;padding:1px 6px;border:1px solid}
.opg-mode.waterfall{color:#25e2ff;border-color:rgba(37,226,255,.45)} .opg-mode.rotate{color:#b45cff;border-color:rgba(180,92,255,.5)}
.opg-big{display:flex;align-items:baseline;gap:5px;margin:7px 0 8px}
.opg-big b{font-size:20px;color:var(--opc);font-variant-numeric:tabular-nums}
.opg-big span{font-size:9px;letter-spacing:.1em;margin-right:8px}
.opg-tier{display:grid;grid-template-columns:22px 1fr auto 52px;align-items:center;gap:7px;padding:2px 0}
.opg-tier .t{letter-spacing:.06em} .opg-tier.on .t{color:var(--opc);font-weight:700}
.opg-tier .p{text-align:right}
.opg-bar{display:flex;gap:2px;height:7px}
.opg-bar i{flex:1;background:var(--opc);opacity:.28}
.opg-tier.on .opg-bar i{opacity:.9}
.opg-bar i.lk{background:#ffb020;opacity:.9} .opg-bar i.ar{background:rgba(255,255,255,.14);opacity:1}
/* positions + live orders lines (pz / lo) */
.pz-tot{display:flex;justify-content:space-between;align-items:baseline;font-size:10px;color:rgba(224,232,240,.45);letter-spacing:.06em;padding-bottom:5px;
  margin-bottom:2px;border-bottom:1px dashed rgba(255,255,255,.08)}
.pz-tot b{font-size:13px}
.pz-g{padding:6px 0 7px 8px;border-left:2px solid transparent}
.pz-g + .pz-g{border-top:1px solid rgba(255,255,255,.05)}
.pz-g.sel{border-left-color:var(--opc)}
.pz-l1{display:flex;align-items:baseline;gap:6px;white-space:nowrap;font-size:11px;font-variant-numeric:tabular-nums}
.pz-dir{font-weight:700} .pz-dir.short{color:#ff3355} .pz-dir.long{color:#00ff88}
.pz-q{font-weight:700} .pz-avg{color:rgba(224,232,240,.75)} .pz-nm{color:rgba(224,232,240,.45);font-size:10px;letter-spacing:.04em;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pz-pnl{margin-left:auto;font-weight:700;font-size:13px}
.pz-strip{display:flex;gap:1px;height:2px;margin-top:4px}
.pz-strip i{flex:1;background:rgba(0,255,136,.4)} .pz-strip i.w{background:#ffb020} .pz-strip i.x{background:#ff3355}
.pz-al{font-size:10px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pz-al.w{color:#ffb020} .pz-al.x{color:#ff6680}
.lo-leg{display:flex;align-items:center;gap:8px;height:24px;font-size:11px;font-variant-numeric:tabular-nums}
.lo-k{width:72px;font-weight:700;letter-spacing:.04em} .lo-k.t{color:#00ff88} .lo-k.s{color:#ff3355} .lo-k.e{color:#e0e8f0}
.lo-px{color:#e0e8f0} .lo-rg{color:rgba(224,232,240,.4);font-size:10px}
.lo-n{margin-left:auto;color:rgba(224,232,240,.45);font-size:10px} .lo-n.bad{color:#ff6680}
.lo-x{background:none;border:1px solid rgba(255,51,85,.35);border-radius:2px;color:#ff3355;font-size:10px;padding:0 5px;height:16px;line-height:14px;font-family:inherit;cursor:pointer}
/* floating group P&L box (#pnl-float) */
.pnlbox{position:relative;background:rgba(5,9,16,.88);border:1px solid rgba(0,255,136,.45);border-radius:7px;padding:10px 12px 9px;
  box-shadow:0 0 18px rgba(0,255,136,.18);font-family:var(--f-mono);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.pnlbox.neg{border-color:rgba(255,51,85,.5);box-shadow:0 0 18px rgba(255,51,85,.2)}
.pf-row{display:flex;align-items:baseline;gap:8px}
.pf-row + .pf-row{margin-top:7px;padding-top:7px;border-top:1px solid rgba(255,255,255,.07)}
.pf-dir{font-weight:700;font-size:11px} .pf-dir.s{color:#ff3355} .pf-dir.l{color:#00ff88}
.pf-nm{font-size:11px;color:#cfd8e3;font-weight:700;letter-spacing:.06em}
.pf-q{font-size:10.5px;color:#7f8ea0}
.pf-v{margin-left:auto;padding-left:10px;font-size:17px;font-weight:800}
.pf-v.pos{text-shadow:0 0 10px rgba(0,255,136,.5)} .pf-v.neg{text-shadow:0 0 10px rgba(255,51,85,.5)}
.pf-sub{font-size:10px;color:#7f8ea0;margin-top:1px}
.pf-trim{align-self:center;font:bold 9.5px var(--f-mono);letter-spacing:.06em;border-radius:4px;padding:2px 6px;margin-left:8px;cursor:pointer;white-space:nowrap;
  border:1px solid currentColor;background:rgba(255,255,255,.04);color:#cfd8e3}
.pf-trim.flat{color:#ffb4b4;border-color:rgba(255,51,85,.65);background:rgba(255,51,85,.10)}