/* ── light.css · the light app shell ─────────────────────────────────────
   29.09 (UX3, the founder's from-zero test): UX2 made the CHART light by default,
   but the shell (header, rail, menus, dialogs) was dark-only — a white chart in a
   black frame. This file is the shell's light palette.

   HOW IT IS SWITCHED
   · `<html data-theme="light|dark">` is set by `paintShell()` in chart_style.js,
     from the chart theme's background (light / paper → light; dark / midnight /
     slate → dark). It follows every theme change in the style editor, and a tiny
     script in index.html sets it before first paint, so there is no dark flash.
   · Dark = no attribute rule matches → the app is EXACTLY as before (nothing in
     mirror.css or the JS-injected styles was changed).

   WHY EVERY RULE IS PREFIXED `html[data-theme="light"]`
   · Most components paint from the variables in mirror.css :root — overriding
     the variables covers them. But several modules inject their own <style> at
     runtime (toolbar.js, ticket.js, workspace.js, menu.js, coach.js, ladder.js,
     theme.js, mods/*.js) with hard-coded dark colours, and those <style> tags land
     AFTER this file. The prefix adds specificity so these overrides still win;
     theme.js uses !important on the Long/Short buttons, so those do too.

   CONTRAST (WCAG AA, measured): ink 16.8:1 · dim 8.8:1 · faint 5.1–5.9:1 on
   white/panel2/bg · purple 6.1:1 · white on purple 6.1:1, on purple-dim 4.6:1 ·
   buy 5.3:1 · sell 5.6:1 · amber 5.6:1 · cyan 5.4:1 (all on white).            */

html[data-theme="light"]{
  color-scheme:light;
  --bg:#eceef4; --panel:#ffffff; --panel2:#f4f5f9; --line:#d5d9e3;
  --ink:#1b1d27; --dim:#454a5c; --faint:#5f6477;
  --purple:#6d3fe0; --purple-dim:#7c5ce6; --cyan:#0e7490;
  --buy:#0b7a55; --sell:#c42840;
  --amber:#9a5800;
  --up:#0b7a55; --down:#c42840;
  --green:#0b7a55; --red:#c42840; --green-bg:#e3f4ec;
  --txt:#1b1d27;
  /*  helpers for this file only  */
  --l-hover:#a99be8; --l-sel:#efeaff; --l-glass:rgba(255,255,255,.94);
  --l-shade:0 10px 28px rgba(30,34,52,.16);
}

/* ══ scrollbars · native controls ═════════════════════════════════════ */
html[data-theme="light"] *{scrollbar-color:#bfc4d2 transparent}
html[data-theme="light"] ::-webkit-scrollbar-thumb{background:#bfc4d2 !important}
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover{background:#a3a9ba !important}
html[data-theme="light"] select option{background:#fff;color:#1b1d27}

/* ══ mirror.css — the few hard-coded colours ═════════════════════════ */
html[data-theme="light"] .srcchip{background:rgba(20,24,40,.04)}
html[data-theme="light"] .chip.ok .dot{box-shadow:none}
html[data-theme="light"] .mod-btn.danger{background:#fde8eb;border-color:#f0a7b3;color:#a3162c}
html[data-theme="light"] .mod-wall{background:rgba(236,238,244,.95)}
html[data-theme="light"] .mod-modal{background:rgba(24,27,42,.32)}
html[data-theme="light"] .mod-modal .box{box-shadow:0 22px 60px rgba(30,34,52,.22)}
html[data-theme="light"] #readout{background:var(--l-glass)}
html[data-theme="light"] .modal{background:rgba(24,27,42,.34)}
html[data-theme="light"] .sheet{box-shadow:0 22px 60px rgba(30,34,52,.22)}
html[data-theme="light"] .err,
html[data-theme="light"] .msg.bad{background:#fdecef;border-color:#f0a7b3;color:#a3162c}
html[data-theme="light"] .msg.ok{background:#e3f4ec;border-color:#9fd6bd;color:#0b6446}
html[data-theme="light"] .toast{box-shadow:var(--l-shade)}
html[data-theme="light"] .sig .acts button.take,
html[data-theme="light"] .rail-head .count{color:#fff}
html[data-theme="light"] .wz-acct:has(input:checked),
html[data-theme="light"] .sp-theme.on{background:var(--l-sel)}
html[data-theme="light"] #stypop{box-shadow:0 18px 48px rgba(30,34,52,.2)}
html[data-theme="light"] #ctools .grp,
html[data-theme="light"] #ctools .tfmin,
html[data-theme="light"] #ctools .lvkey{background:var(--l-glass);box-shadow:0 1px 2px rgba(30,34,52,.06)}
html[data-theme="light"] #ctools .grp button:hover{background:rgba(109,63,224,.09)}
html[data-theme="light"] #lvdens button.on{color:#fff}
html[data-theme="light"] .tk-calc.bad{color:#a3162c}
html[data-theme="light"] .tk-side button[data-side="BUY"].on{color:#fff}
html[data-theme="light"] .tk-px .s input{border-color:rgba(196,40,64,.4)}
html[data-theme="light"] .tk-px .t input{border-color:rgba(11,122,85,.4)}
html[data-theme="light"] .kv div,
html[data-theme="light"] .row-item{border-color:var(--line)}
/*  index.html: the «Pull update» box separator is an inline white-alpha line  */
html[data-theme="light"] #setup .tab[data-tab="vec"] > div[style*="border-top"]{border-top-color:var(--line) !important}

/* ══ theme.js — Long/Short, account frame ════════════════════════════ */
html[data-theme="light"] #ticket .tk-side button{background:#f4f5f9 !important;color:#454a5c !important;
  border:1px solid #d5d9e3 !important}
html[data-theme="light"] #ticket .tk-side button[data-side="BUY"].on{background:var(--l-sel) !important;
  border-color:#6d3fe0 !important;color:#3b1d9a !important}
html[data-theme="light"] #ticket .tk-side button[data-side="SELL"].on{background:#e2f3f6 !important;
  border-color:#0e7490 !important;color:#0b4f63 !important}
html[data-theme="light"] #ticket.acct-prac{box-shadow:inset 0 0 0 1px #0e7490}
html[data-theme="light"] #ticket.acct-live{box-shadow:inset 0 0 0 1px #c3c8d5}
html[data-theme="light"] #ticket::after{color:#5f6477}
html[data-theme="light"] #ticket.acct-prac::after{color:#0e7490}

/* ══ toolbar.js — chips + popovers ═══════════════════════════════════ */
html[data-theme="light"] .tb-chip{background:#fff;border-color:#d5d9e3;color:#2b2f3d}
html[data-theme="light"] .tb-chip:hover{border-color:var(--l-hover);color:#1b1d27}
html[data-theme="light"] .tb-chip.on{border-color:#6d3fe0;color:#1b1d27;background:var(--l-sel)}
html[data-theme="light"] .tb-chip.on-state{border-color:#0e7490}
html[data-theme="light"] .tb-pop{background:#fff;border-color:#d5d9e3;box-shadow:var(--l-shade)}
html[data-theme="light"] .tb-pop-h{border-bottom-color:#e3e6ee;color:#1b1d27}
html[data-theme="light"] .tb-x{color:#5f6477}
html[data-theme="light"] .tb-x:hover{color:#1b1d27}
html[data-theme="light"] .tb-lbl{color:#5f6477}
html[data-theme="light"] .tb-pop .grp button{background:#f4f5f9;border-color:#d5d9e3;color:#454a5c}
html[data-theme="light"] .tb-pop .grp button:hover{color:#1b1d27;background:rgba(109,63,224,.08);border-color:var(--l-hover)}
html[data-theme="light"] .tb-pop .grp button.on{background:#6d3fe0;color:#fff;border-color:#6d3fe0}
html[data-theme="light"] .tb-pop #lvkind button.on{background:#f4f5f9;color:#1b1d27;border-color:var(--l-hover)}
html[data-theme="light"] .tb-pop #lvsrc button.on{background:#0e7490;color:#fff;border-color:#0e7490}
html[data-theme="light"] .tb-pop .mv-chip{background:#f4f5f9;border-color:#d5d9e3;color:#2b2f3d}
html[data-theme="light"] .tb-pop .mv-chip:hover{border-color:var(--l-hover);color:#1b1d27}
html[data-theme="light"] .tb-pop .mv-chip.on{border-color:#6d3fe0;background:var(--l-sel);color:#1b1d27}
html[data-theme="light"] .tb-pop .mv-cfg{color:#5f6477}

/* ══ ticket.js — proposal box, state line, size options ══════════════ */
html[data-theme="light"] #tk-prop{border-color:#d5d9e3;background:#f7f8fb}
html[data-theme="light"] #tk-prop.has{border-color:#d9a441;background:#fff8e8}
html[data-theme="light"] #tk-prop-empty{color:#5f6477}
html[data-theme="light"] #tk-prop-modes{border-top-color:#e3e6ee}
html[data-theme="light"] #tk-prop-modes button{background:#fff;border-color:#d5d9e3;color:#454a5c}
html[data-theme="light"] #tk-prop-modes button.on{border-color:#6d3fe0;background:var(--l-sel);color:#1b1d27}
html[data-theme="light"] #tk-state{color:#454a5c;background:#f4f5f9;border-color:#d5d9e3}
html[data-theme="light"] #tk-state.in-pos{color:#1b1d27;border-color:#6d3fe0;background:var(--l-sel)}
html[data-theme="light"] #tk-state.working{color:#8a4f00;border-color:#e0b25c;background:#fff6e0}
html[data-theme="light"] .ts-hint,
html[data-theme="light"] .ts-note,
html[data-theme="light"] .ts-opt span{color:#5f6477}
html[data-theme="light"] .ts-head{color:#454a5c}
html[data-theme="light"] .ts-head b{color:#1b1d27}
html[data-theme="light"] .ts-opt{background:#f4f5f9;border-color:#d5d9e3;color:#2b2f3d}
html[data-theme="light"] .ts-opt b{color:#1b1d27}
html[data-theme="light"] .ts-opt:hover{border-color:var(--l-hover)}
html[data-theme="light"] .ts-opt.on{border-color:#6d3fe0;background:var(--l-sel)}
html[data-theme="light"] .ts-opt.on span{color:#0e7490}
html[data-theme="light"] .tk-more{border-top-color:#d5d9e3;color:#454a5c}
html[data-theme="light"] .tk-more:hover{color:#1b1d27}
html[data-theme="light"] .tk-more b{color:#2b2f3d}
html[data-theme="light"] .tk-more i{color:#5f6477}

/* ══ workspace.js — position strip, lock, drawer ═════════════════════ */
html[data-theme="light"] #ws-pos{background:rgba(255,255,255,.95);border-top-color:#d5d9e3}
html[data-theme="light"] #ws-pos.live{border-top-color:#6d3fe0}
html[data-theme="light"] .ws-empty,
html[data-theme="light"] .ws-none{color:#5f6477}
html[data-theme="light"] .ws-p b{color:#1b1d27}
html[data-theme="light"] .ws-p.l b{color:#5b34c9}
html[data-theme="light"] .ws-p.s b{color:#0e7490}
html[data-theme="light"] .ws-p i{color:#454a5c}
html[data-theme="light"] .ws-p u{color:#1b1d27}
html[data-theme="light"] #ws-flat-all{border-color:#c42840;color:#c42840}
html[data-theme="light"] #ws-flat-all:hover{background:#c42840;color:#fff}
html[data-theme="light"] #ws-lock-b{background:#fff;border-color:#d5d9e3}
html[data-theme="light"] #ws-lock-b.locked{border-color:#c42840;background:#fdecef}
html[data-theme="light"] #ws-lock-pop,
html[data-theme="light"] #ws-draw{background:#fff;border-color:#d5d9e3;box-shadow:var(--l-shade)}
html[data-theme="light"] #ws-lock-pop button,
html[data-theme="light"] #ws-draw-t button{background:#f4f5f9;border-color:#d5d9e3;color:#2b2f3d}
html[data-theme="light"] #ws-lock-pop button:hover{border-color:var(--l-hover);color:#1b1d27}
html[data-theme="light"] #ws-draw-h{background:#fff;border-color:#d5d9e3;color:#454a5c}
html[data-theme="light"] #ws-draw-h:hover,
html[data-theme="light"] #ws-draw-h.on{border-color:#6d3fe0;color:#1b1d27}
html[data-theme="light"] #ws-draw-t{border-bottom-color:#e3e6ee}
html[data-theme="light"] #ws-draw-t button.on{border-color:#6d3fe0;background:var(--l-sel);color:#1b1d27}
html[data-theme="light"] #ws-size-more{color:#0e7490}

/* ══ menu.js — right-click menu ══════════════════════════════════════ */
html[data-theme="light"] #vm-menu{background:#fff;border-color:#d5d9e3;box-shadow:var(--l-shade)}
html[data-theme="light"] .vm-head{color:#5f6477}
html[data-theme="light"] .vm-sep{background:#e3e6ee}
html[data-theme="light"] .vm-it{color:#2b2f3d}
html[data-theme="light"] .vm-it:hover{background:var(--l-sel);color:#1b1d27}
html[data-theme="light"] .vm-it.bad{color:#c42840}
html[data-theme="light"] .vm-it.bad:hover{background:#fdecef;color:#a3162c}

/* ══ ladder.js — price ladder ════════════════════════════════════════ */
html[data-theme="light"] #ladder{background:rgba(255,255,255,.96);border-color:#d5d9e3}
html[data-theme="light"] #ld-head{border-bottom-color:#e3e6ee;color:#2b2f3d}
html[data-theme="light"] #ld-step,
html[data-theme="light"] #ld-x,
html[data-theme="light"] #ld-foot,
html[data-theme="light"] .ld-lv,
html[data-theme="light"] .ld-row u.q.cap,
html[data-theme="light"] .ld-none{color:#5f6477}
html[data-theme="light"] #ld-x:hover{color:#1b1d27}
html[data-theme="light"] #ld-foot{border-top-color:#e3e6ee}
html[data-theme="light"] #ld-cols{border-bottom-color:#e3e6ee;color:#5f6477}
html[data-theme="light"] .ld-row b{color:#454a5c}
html[data-theme="light"] .ld-row u.q{color:#1b1d27}
html[data-theme="light"] .ld-row u.q.z{color:#b3b8c6}
html[data-theme="light"] .ld-row u.b,
html[data-theme="light"] .ld-row.tgt b{color:#0b7a55}
html[data-theme="light"] .ld-row u.a,
html[data-theme="light"] .ld-row.stop b{color:#c42840}
html[data-theme="light"] .ld-row.tgt{border-inline-start-color:#0b7a55}
html[data-theme="light"] .ld-row.stop{border-inline-start-color:#c42840}
html[data-theme="light"] .ld-row.now{background:var(--l-sel);border-inline-start-color:#6d3fe0}
html[data-theme="light"] .ld-row.now b{color:#1b1d27}
html[data-theme="light"] .ld-row.entry{border-inline-start-color:#0e7490}
html[data-theme="light"] .ld-row.entry b{color:#0e7490}

/* ══ coach.js — lesson bubble, screen map ════════════════════════════ */
html[data-theme="light"] .coach{background:#fff;border-color:#6d3fe0;color:#2b2f3d;box-shadow:var(--l-shade)}
html[data-theme="light"] .coach-h{border-bottom-color:#e3e6ee;color:#1b1d27}
html[data-theme="light"] .coach-x,
html[data-theme="light"] .coach-f{color:#5f6477}
html[data-theme="light"] .coach-target{outline-color:#6d3fe0}
html[data-theme="light"] .coach-area{border-color:#0e7490;background:rgba(14,116,144,.10)}
html[data-theme="light"] .ca-in{background:rgba(255,255,255,.96);border-color:#9fcfda}
html[data-theme="light"] .ca-in b{color:#0e7490}
html[data-theme="light"] .ca-in span{color:#2b2f3d}

/* ══ help.css — tooltip + tour ═══════════════════════════════════════ */
html[data-theme="light"] #help-tip,
html[data-theme="light"] #ht-card{box-shadow:0 16px 40px rgba(30,34,52,.22)}
html[data-theme="light"] #ht-spot{box-shadow:0 0 0 9999px rgba(24,27,42,.45),0 0 0 3px var(--purple),0 0 22px rgba(109,63,224,.45)}
html[data-theme="light"] #help-tip .ht-caution,
html[data-theme="light"] #help-tour .ht-caution{background:#fff6e0;border-color:#e0b25c;color:#8a4f00}
html[data-theme="light"] #help-tip.important{border-color:#e0b25c}
html[data-theme="light"] body.help-on .help-important{outline-color:rgba(154,88,0,.7)}

/* ══ mods — hard-coded panels and texts ══════════════════════════════ */
html[data-theme="light"] #mod-flow-ctl,
html[data-theme="light"] .mv-tfbar,
html[data-theme="light"] .mv-readout,
html[data-theme="light"] .mv-rbar,
html[data-theme="light"] #mod-game-pill,
html[data-theme="light"] #mod-tools-second{background:var(--l-glass);box-shadow:var(--l-shade)}
html[data-theme="light"] .mv-tfbar button.on,
html[data-theme="light"] .mv-rspeed button.on{color:#fff}
html[data-theme="light"] #ctools .grp .mv-chip.on,
html[data-theme="light"] #ctools .grp .mv-chip.on b{color:#1b1d27}
html[data-theme="light"] #quick-pop{background:#fff;box-shadow:var(--l-shade)}
html[data-theme="light"] #dca-float{box-shadow:var(--l-shade)}
html[data-theme="light"] #mod-dca .sum.bad,
html[data-theme="light"] .ms-gates .b,
html[data-theme="light"] .g-rule.bad .g-rl,
html[data-theme="light"] #mod-guard-ack ul,
html[data-theme="light"] #mod-locks .lk-pill.locked,
html[data-theme="light"] #mod-locks-wall .lk-err{color:#a3162c}
html[data-theme="light"] .g-banner.warn{background:#fff6e0;border-color:#e0b25c;color:#8a4f00}
html[data-theme="light"] .g-banner.bad{background:#fdecef;border-color:#f0a7b3;color:#a3162c}
html[data-theme="light"] #mod-locks button.arm{background:#fdecef;color:#a3162c}
html[data-theme="light"] #mod-tools-chips button.danger{color:#a3162c;border-color:#f0a7b3}
html[data-theme="light"] #mod-tools-chips button.danger:hover:not(:disabled){background:#fdecef;border-color:#c42840}
html[data-theme="light"] #mod-tools-ask.danger{border-color:#f0a7b3}
html[data-theme="light"] #mod-tools-second .flat{background:#fdecef;border-color:#f0a7b3;color:#a3162c}
html[data-theme="light"] #mod-tools-second .flat:hover:not(:disabled){background:#fad4db}
html[data-theme="light"] #mod-tools-near .k.poc,
html[data-theme="light"] #mod-entry-ready .route b.prac,
html[data-theme="light"] .j-synced.mid,
html[data-theme="light"] .j-moved,
html[data-theme="light"] #mod-game-pill.mid b{color:#9a5800}
html[data-theme="light"] #mod-tools-near .k.hvn{color:#0e7490}
html[data-theme="light"] #mod-tools-near .k.lvn{color:#6d3fe0}
html[data-theme="light"] #mod-entry-ready .route b.live,
html[data-theme="light"] #mod-entry-ready .route .bad,
html[data-theme="light"] #mod-entry-ready .route.off b{color:#c42840}
html[data-theme="light"] #mod-entry-ready .route .ok{color:#0b7a55}

/* ══ UX3 first-run cards (onboarding: plan card + tour invite) ═══════ */
html[data-theme="light"] .ob-card{box-shadow:0 22px 60px rgba(30,34,52,.22)}

/* ══ 30.09 (r11, testers #5) — trade buttons say what they do by colour ══════════
   «Long / Short and Buy / Sell must be clearly coloured (green / red, white bold text)». Before this
   they were grey chips (Long = selected purple, Short = selected cyan) — the UX2 rule «green/red only
   for money» lost to the testers: on a light screen a grey «Long» next to a grey «Short» read as one
   control. Both sides are now ALWAYS their colour; the chosen side gets a ring + ✓, the other steps
   back (still coloured, still readable). Contrast (white on): #0b7a55 5.3:1 · #c42840 5.6:1.       */
html[data-theme="light"] #ticket .tk-side button[data-side="BUY"],
html[data-theme="light"] #mod-dca .seg.side button.buy{background:#0b7a55 !important;border:1px solid #0b7a55 !important;
  color:#fff !important;font-weight:700 !important}
html[data-theme="light"] #ticket .tk-side button[data-side="SELL"],
html[data-theme="light"] #mod-dca .seg.side button.sell{background:#c42840 !important;border:1px solid #c42840 !important;
  color:#fff !important;font-weight:700 !important}
html[data-theme="light"] #ticket .tk-side button[data-side="BUY"]:hover,
html[data-theme="light"] #mod-dca .seg.side button.buy:hover{background:#09694a !important}
html[data-theme="light"] #ticket .tk-side button[data-side="SELL"]:hover,
html[data-theme="light"] #mod-dca .seg.side button.sell:hover{background:#a82236 !important}
html[data-theme="light"] #ticket .tk-side button[data-side="BUY"].on,
html[data-theme="light"] #mod-dca .seg.side button.buy.on{background:#0b7a55 !important;border-color:#0b7a55 !important;color:#fff !important}
html[data-theme="light"] #ticket .tk-side button[data-side="SELL"].on,
html[data-theme="light"] #mod-dca .seg.side button.sell.on{background:#c42840 !important;border-color:#c42840 !important;color:#fff !important}
html[data-theme="light"] #ticket .tk-side button.on,
html[data-theme="light"] #mod-dca .seg.side button.on{box-shadow:0 0 0 2px #fff inset,0 0 0 2px #1b1d27 !important;opacity:1 !important}
html[data-theme="light"] #ticket .tk-side button.on::before,
html[data-theme="light"] #mod-dca .seg.side button.on::before{content:"✓ "}
html[data-theme="light"] #ticket .tk-side:has(button.on) button:not(.on),
html[data-theme="light"] #mod-dca .seg.side:has(button.on) button:not(.on){opacity:.55 !important}
/*  quick trades (mods/quick.js): the side is the stripe AND the label colour  */
html[data-theme="light"] #mod-quick .go.BUY{border-inline-start:4px solid #0b7a55}
html[data-theme="light"] #mod-quick .go.SELL{border-inline-start:4px solid #c42840}
/*  the confirm sheet's side tag — solid, white, bold  */
html[data-theme="light"] .sheet-head .side.BUY{background:#0b7a55;color:#fff}
html[data-theme="light"] .sheet-head .side.SELL{background:#c42840;color:#fff}

/*  Market / Limit / Stop — dark bold text on white; the chosen one solid purple  */
html[data-theme="light"] #mod-entry-bar .seg button{background:#fff;border:1px solid #c3c8d5;color:#1b1d27}
html[data-theme="light"] #mod-entry-bar .seg.big button{font-weight:700}
html[data-theme="light"] #mod-entry-bar .seg button:hover:not(.on){border-color:#6d3fe0;color:#1b1d27}
html[data-theme="light"] #mod-entry-bar .seg button.on{background:#6d3fe0;border-color:#6d3fe0;color:#fff}

/*  «Check & send» — solid primary when it can go; when it cannot yet it is NOT a faded ghost (was
    opacity .4 on purple = unreadable), it is an outlined button whose words stay dark and legible  */
html[data-theme="light"] #tk-send{background:#6d3fe0;border:1px solid #6d3fe0;color:#fff;font-weight:700}
html[data-theme="light"] #tk-send:hover:not(:disabled){background:#5b31c9}
html[data-theme="light"] #tk-send:disabled{opacity:1;background:#f1edff;border:1.5px dashed #9c86e6;color:#4b2bb3}
html[data-theme="light"] #c-go{font-weight:700}

/*  a toolbar chip whose popup is open: solid purple, white text (was white text on pale lilac)  */
html[data-theme="light"] #ctools .tb-chip.on,
html[data-theme="light"] .tb-chip.on{background:#6d3fe0;border-color:#6d3fe0;color:#fff}

/*  toolbar.js — the density caption in the Levels popup  */
html[data-theme="light"] .tb-cap{background:#f3efff;border-color:#c9bdf3}
html[data-theme="light"] .tb-cap b{color:#1b1d27}
html[data-theme="light"] .tb-cap span,
html[data-theme="light"] .tb-foot{color:#5f6477}

/* 01.10 (parity M13 · GROUPING_SPEC §1): the group-box tokens on the light theme. Same structure as dark; every edge
   is at least 3:1 (measured): group border #7d8697 = 3.67 on white · 3.45 on the group bg #f7f8fb; control edge #6b7385 =
   4.48 on the group bg; label #4a5063 = 7.5; the red «Close» edge #c94a5e = 4.3.  */
html[data-theme="light"]{ --vx-bg-panel:#ffffff; --vx-bg-group:#f7f8fb; --vx-bg-control:#ffffff; --vx-frame:#6b7385;
  --vx-border-group:#7d8697; --vx-divider:#7d8697; --vx-border-control:#6b7385;
  --vx-sel-bg:#6d3fe0; --vx-sel-border:#4b2bb3; --vx-group-label:#4a5063; --vx-focus:#6d3fe0;
  --vx-danger-border:#c94a5e; --vx-danger-label:#a3162c; }