@font-face { font-family: 'Mango California'; src: url('../../assets/fonts/mango-california.woff2') format('woff2'), url('../../assets/fonts/mango-california.woff') format('woff'); font-display: swap; }
/* ==========================================================================
 * theme.css — dark mode + animated theme toggle. Loaded after tokens.css / shell.css.
 * Dark values live ONLY here, keyed on html[data-theme="dark"] (higher specificity than any page's :root override).
 * Palette: neutral true-black greys (no blue/purple tint), brand red lifted slightly for contrast.
 * ========================================================================== */
html[data-theme="dark"] {
  color-scheme: dark;
  --vx-bg: #111111;
  --vx-page: #0a0a0a;
  --vx-card: #171717;
  --vx-hover: #1f1f1f;
  --vx-sel: #262626;
  --vx-sel-series: #1d1d1d;
  --vx-track: #222222;
  --vx-pill-bg: #262626;

  --vx-text: #ececec;
  --vx-title: #e0e0e0;
  --vx-title-2: #cfcfcf;
  --vx-pill-text: #bdbdbd;
  --vx-muted: #9b9b9b;
  --vx-muted-2: #7d7d7d;
  --vx-muted-3: #636363;

  --vx-border: #2a2a2a;
  --vx-border-btn: #363636;
  --vx-border-card: #303030;
  --vx-row-border: #262626;
  --vx-divider: #272727;
  --vx-bar: #3a3a3a;
  --vx-dot: #8d8d8d;

  --vx-red: #e0243a;
  --vx-red-dk: #b5122a;
  --vx-fill: #c2182f;
  --vx-green: #2fd197;
  --vx-att-bg: rgba(132, 214, 52, .14);
  --vx-att-bd: rgba(132, 214, 52, .32);
  --vx-att-tx: #a6e65f;

  /* locked / plan-gated: recessed, never brighter than the active control next to it */
  --vx-lock-title: #6a6a6a;
  --vx-lock-desc: #5c5c5c;
  --vx-lock-btn-fill: #0e0e0e;
  --vx-lock-btn-stroke: #222222;
  --vx-lock-btn-icon: #4a4a4a;
  --vx-lock-btn-icon-sect: #4a4a4a;
  --vx-lock-dl-fill: #0e0e0e;
  --vx-lock-dl-stroke: #262626;
  --vx-lock-card-stroke: #202020;
  --vx-lock-attempt-fill: #3a151c;
  --vx-lock-attempt-stroke-mock: #4d1f28;
  --vx-lock-attempt-stroke-sect: #4d1f28;
  --vx-lock-attempt-icon: #c9979f;
  --vx-lock-link: #6e444b;
  --vx-lock-badge-bg: #1f1f1f;
  --vx-lock-badge-icon: #5c5c5c;
}

/* res-pages.css (editorials, essays, caselets, results...) keeps its own --rp-* tokens with LIGHT values on :root — remap them here
   (html[data-theme] out-ranks :root, so this wins whatever order the stylesheets load in). Without this the cards stay white. */
html[data-theme="dark"] {
  --rp-page: var(--vx-page);
  --rp-card: var(--vx-card);
  --rp-line: #2a2a2a;
  --rp-body: #b4b4b4;
  --rp-grid: #262626;
  --rp-base: #4a4a4a;
  --rp-tint: #7a2a35;
  --vp-text: #ececec; --vp-body: #cfcfcf; --vp-muted: #9b9b9b; --vp-faint: #6e6e6e;
  --vp-line: #2e2e2e; --vp-head: #2a2a2a; --vp-red: #e0243a; --vp-bg: #111111;
}

/* smooth cross-fade when the user flips the switch (class is added/removed by theme.js for ~450ms only) */
html.vx-theme-anim, html.vx-theme-anim *:not(.vx-theme-btn):not(.vx-theme-btn *), html.vx-theme-anim *:not(.vx-theme-btn *)::before, html.vx-theme-anim *:not(.vx-theme-btn *)::after {
  transition: background-color .4s ease, border-color .4s ease, color .4s ease, fill .4s ease, stroke .4s ease, box-shadow .4s ease !important;
}

/* ---------- surfaces that hard-code light colours ---------- */
html[data-theme="dark"] body { background: var(--vx-page); }
html[data-theme="dark"] .vx-dock,
html[data-theme="dark"] #vx-sb .p { background: var(--vx-bg); color: var(--vx-text); box-shadow: 0 0 28px rgba(0,0,0,.55); }
html[data-theme="dark"] #vx-sb .wm,
html[data-theme="dark"] #vx-sb .nm .n { color: var(--vx-title); }
html[data-theme="dark"] #vx-sb .sr { border-color: var(--vx-border-btn); color: var(--vx-muted); }
html[data-theme="dark"] #vx-sb .k { background: var(--vx-card); color: var(--vx-text); }
html[data-theme="dark"] #vx-sb .it,
html[data-theme="dark"] #vx-sb .vxback,
html[data-theme="dark"] #vx-sb .cg { color: var(--vx-pill-text); }
html[data-theme="dark"] #vx-sb .it.a { background: var(--vx-sel); color: var(--vx-text); }
html[data-theme="dark"] #vx-sb .it .ch { color: var(--vx-muted); }
html[data-theme="dark"] #vx-sb .it:active,
html[data-theme="dark"] #vx-sb .vxback:active { background: var(--vx-hover); }
html[data-theme="dark"] #vx-sb .ln { background: var(--vx-divider); }
html[data-theme="dark"] .vx-dock .dk-sr { color: var(--vx-muted); }
html[data-theme="dark"] .vx-dock .dk-sr kbd { color: var(--vx-muted); border-color: var(--vx-border-btn); }
html[data-theme="dark"] .vx-dock .dk-cg { color: var(--vx-pill-text); }
html[data-theme="dark"] .vx-dock .dk-u,
html[data-theme="dark"] #vx-sb .nm .u { color: #9aa5ff; }
html[data-theme="dark"] .vx-dock .dk-wm { color: var(--vx-title); }

/* dashboard / shared cards */
html[data-theme="dark"] .db-greet { color: var(--vx-title); }
html[data-theme="dark"] .db-search,
html[data-theme="dark"] .pill { box-shadow: 0 2px 10px rgba(0,0,0,.45); }
html[data-theme="dark"] .nt-card { background: var(--vx-card); border-color: var(--vx-border-card); }
html[data-theme="dark"] .nt-title { color: var(--vx-title); }
html[data-theme="dark"] .nt-tag { background: rgba(224,36,58,.16); color: #ff6b7c; }
html[data-theme="dark"] .nt-desc { color: var(--vx-pill-text); }
html[data-theme="dark"] #vx-notif-stack .nt-card { box-shadow: 0 3px 12px rgba(0,0,0,.5); }
html[data-theme="dark"] #vx-notif-stack .nt-card:not(:first-child) { background: #131313; }
html[data-theme="dark"] .nt-x { color: #ff5a5a; }
@media (max-width: 1024px) {
  html[data-theme="dark"] .nt-card { border-color: var(--vx-border-card); box-shadow: 0 2px 12px rgba(0,0,0,.45); }
  html[data-theme="dark"] .nt-open { background: rgba(47,209,151,.14); }
  html[data-theme="dark"] .nt-x { background: rgba(255,90,90,.14); }
}

/* generic safety nets for common white / light-grey surfaces used across pages */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select { background-color: var(--vx-card); color: var(--vx-text); border-color: var(--vx-border-btn); }
html[data-theme="dark"] ::placeholder { color: var(--vx-muted-2); }
html[data-theme="dark"] hr { border-color: var(--vx-divider); }
html[data-theme="dark"] table { color: var(--vx-text); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #3a3a3a; border-radius: 8px; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: transparent; }
html[data-theme="dark"] ::selection { background: rgba(224,36,58,.35); }
/* logos / avatars drawn on light artwork keep their own colours; images get a faint dim so white PNGs don't glare */
html[data-theme="dark"] img:not([src$=".svg"]) { filter: brightness(.92); }
html[data-theme="dark"] img[src*="favicon"], html[data-theme="dark"] img[src*="vertex-logo"] { filter: none; }

/* ==========================================================================
 * THEME BUTTON — plain icon in the top bar (sun ⇄ moon), sits left of the bell. Sizing / colour match the other
 * .vx-icons glyphs; the swap is a rotate + scale morph with a small stagger on the rays.
 * ========================================================================== */
.vx-theme-btn {
  --tg-ease: cubic-bezier(.5, 0, .2, 1);
  position: relative; flex: none; display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; margin: 0 -8px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--vx-text, #2f2f2f); cursor: pointer; outline: none;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background-color .25s ease, transform .2s ease;
}
.vx-theme-btn svg { width: 20px; height: 20px; overflow: visible; display: block; }
@media (hover: hover) { .vx-theme-btn:hover { background: var(--vx-hover, #f3f3f3); } }
.vx-theme-btn:active { transform: scale(.88); }
.vx-theme-btn:focus-visible { box-shadow: 0 0 0 2px var(--vx-bg, #fff), 0 0 0 4px var(--vx-red, #bf0016); }

.vx-theme-btn .tg-sun, .vx-theme-btn .tg-moon, .vx-theme-btn .tg-star { transform-box: view-box; transform-origin: 12px 12px; }
.vx-theme-btn .tg-sun  { transition: transform .6s var(--tg-ease), opacity .35s ease; }
.vx-theme-btn .tg-moon { opacity: 0; transform: rotate(-70deg) scale(.4); transition: transform .6s var(--tg-ease), opacity .35s ease; }
.vx-theme-btn .tg-ray  { transform-box: view-box; transform-origin: 12px 12px; transition: transform .45s var(--tg-ease), opacity .3s ease; }
.vx-theme-btn .tg-core { transition: transform .5s var(--tg-ease); transform-box: view-box; transform-origin: 12px 12px; }
.vx-theme-btn .tg-star { opacity: 0; transform: scale(0); transition: opacity .3s ease, transform .5s cubic-bezier(.34,1.56,.64,1); }

/* day → night: rays pull in one after another, the sun spins away, the crescent turns in, stars pop */
html[data-theme="dark"] .vx-theme-btn .tg-sun  { transform: rotate(90deg) scale(.3); opacity: 0; }
html[data-theme="dark"] .vx-theme-btn .tg-ray  { transform: scale(.2); opacity: 0; }
html[data-theme="dark"] .vx-theme-btn .tg-core { transform: scale(1.1); }
html[data-theme="dark"] .vx-theme-btn .tg-moon { opacity: 1; transform: none; transition-delay: .08s; }
html[data-theme="dark"] .vx-theme-btn .tg-star { opacity: .95; transform: scale(1); transition-delay: .35s; }
html[data-theme="dark"] .vx-theme-btn .tg-s2 { transition-delay: .45s; }
/* night → day (default state): the sun returns with its rays unfolding in sequence */
.vx-theme-btn .tg-ray:nth-of-type(2) { transition-delay: .03s; }
.vx-theme-btn .tg-ray:nth-of-type(3) { transition-delay: .06s; }
.vx-theme-btn .tg-ray:nth-of-type(4) { transition-delay: .09s; }
.vx-theme-btn .tg-ray:nth-of-type(5) { transition-delay: .12s; }
.vx-theme-btn .tg-ray:nth-of-type(6) { transition-delay: .15s; }
.vx-theme-btn .tg-ray:nth-of-type(7) { transition-delay: .18s; }
.vx-theme-btn .tg-ray:nth-of-type(8) { transition-delay: .21s; }
html[data-theme="dark"] .vx-theme-btn .tg-ray { transition-delay: 0s; }
html[data-theme="dark"] .vx-theme-btn .tg-star { animation: vxTwinkle 3s ease-in-out 1s infinite; }
html[data-theme="dark"] .vx-theme-btn .tg-s2 { animation-duration: 3.7s; animation-delay: 1.6s; }
@keyframes vxTwinkle { 0%,100% { opacity: .95; } 50% { opacity: .25; } }

/* hover: a gentle hint of the other state (sun's rays turn a little / moon tilts) */
@media (hover: hover) {
  .vx-theme-btn:hover .tg-sun { transform: rotate(22deg); }
  html[data-theme="dark"] .vx-theme-btn:hover .tg-sun { transform: rotate(90deg) scale(.3); }
  html[data-theme="dark"] .vx-theme-btn:hover .tg-moon { transform: rotate(-14deg); }
}

/* compact: same 44px touch-target rhythm as the other top-bar icons */
@media (max-width: 1024px) {
  .vx-theme-btn { width: 44px; height: 44px; margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .vx-theme-btn, .vx-theme-btn *, html.vx-theme-anim, html.vx-theme-anim * { transition-duration: .01s !important; transition-delay: 0s !important; animation: none !important; }
}

/* ---- generated: neutral greys → matte dark equivalents (light values live as var() fallbacks in the source) ---- */
html[data-theme="dark"] {
  --vx-bd-bebebe: #565656;
  --vx-bd-cecece: #444444;
  --vx-bd-cfcfcf: #434343;
  --vx-bd-d6d9de: #383838;
  --vx-bd-dcdcdc: #343434;
  --vx-bd-dcdce0: #333333;
  --vx-bd-dedede: #323232;
  --vx-bd-e2e2e2: #2e2e2e;
  --vx-bd-e2e4e8: #2c2c2c;
  --vx-bd-e3e3e3: #2d2d2d;
  --vx-bd-e3e3e6: #2c2c2c;
  --vx-bd-e4e4e4: #2c2c2c;
  --vx-bd-e5e5e5: #2b2b2b;
  --vx-bd-e6e6e6: #2a2a2a;
  --vx-bd-e7e7ea: #272727;
  --vx-bd-e9e9e9: #262626;
  --vx-bd-eaeaea: #252525;
  --vx-bd-ececef: #222222;
  --vx-bd-eceef1: #212121;
  --vx-bd-eeeeee: #212121;
  --vx-bd-efefef: #202020;
  --vx-bd-ffffff: #0e0e0e;
  --vx-bg-cccccc: #454545;
  --vx-bg-cfcfcf: #424242;
  --vx-bg-d9dce1: #363636;
  --vx-bg-dadada: #383838;
  --vx-bg-e5e7eb: #2d2d2d;
  --vx-bg-e6e6e9: #2d2d2d;
  --vx-bg-e7e7ea: #2c2c2c;
  --vx-bg-ebebeb: #292929;
  --vx-bg-ececec: #282828;
  --vx-bg-ececee: #282828;
  --vx-bg-ececef: #272727;
  --vx-bg-eceef1: #262626;
  --vx-bg-ededed: #272727;
  --vx-bg-eef0f3: #242424;
  --vx-bg-efefef: #252525;
  --vx-bg-f0faf3: #212121;
  --vx-bg-f1f1f1: #242424;
  --vx-bg-f1f1f3: #242424;
  --vx-bg-f1f2f4: #232323;
  --vx-bg-f2f2f2: #232323;
  --vx-bg-f2f2f5: #222222;
  --vx-bg-f3f3f3: #222222;
  --vx-bg-f3f3f5: #222222;
  --vx-bg-f5f5f5: #202020;
  --vx-bg-f7f7f7: #1e1e1e;
  --vx-bg-f8f8f8: #1d1d1d;
  --vx-bg-fafafa: #1c1c1c;
  --vx-bg-ffffff: #171717;
  --vx-tx-0d0d0f: #f2f2f2;
  --vx-tx-111111: #f0f0f0;
  --vx-tx-1b1b1f: #eaeaea;
  --vx-tx-1f1f1f: #e8e8e8;
  --vx-tx-2f2f2f: #e0e0e0;
  --vx-tx-2f2f33: #e0e0e0;
  --vx-tx-303030: #e0e0e0;
  --vx-tx-3a3a3a: #dbdbdb;
  --vx-tx-3a3a3f: #dadada;
  --vx-tx-3e3e3e: #d9d9d9;
  --vx-tx-3f3f3f: #d8d8d8;
  --vx-tx-444444: #d6d6d6;
  --vx-tx-44444a: #d5d5d5;
  --vx-tx-4a4a4a: #d3d3d3;
  --vx-tx-4b4b4b: #d2d2d2;
  --vx-tx-4f4f4f: #d0d0d0;
  --vx-tx-555555: #cecece;
  --vx-tx-5a5a5a: #cbcbcb;
  --vx-tx-5a5a60: #cacaca;
  --vx-tx-5f5f5f: #c8c8c8;
  --vx-tx-6b6b6b: #c2c2c2;
  --vx-tx-6b6b70: #c2c2c2;
  --vx-tx-6f6f6f: #c0c0c0;
  --vx-tx-707070: #c0c0c0;
  --vx-tx-76767c: #bcbcbc;
  --vx-tx-7f7f7f: #b8b8b8;
  --vx-tx-8a8a8a: #969696;
  --vx-tx-8a8a92: #949494;
  --vx-tx-8f8f8f: #939393;
  --vx-tx-9a9a9a: #8d8d8d;
  --vx-tx-9a9aa0: #8c8c8c;
  --vx-tx-9a9aa2: #8c8c8c;
  --vx-tx-9f9f9f: #8a8a8a;
  --vx-tx-a0a0a0: #898989;
  --vx-tx-a9a9a9: #848484;
  --vx-tx-aaaaaa: #848484;
  --vx-tx-aeaeae: #828282;
  --vx-tx-bebebe: #797979;
  --vx-tx-c8c8c8: #737373;
  --vx-tx-c9c9c9: #737373;
  --vx-tx-cfcfcf: #707070;
  --vx-tx-d0d0d6: #6e6e6e;
}

/* ==========================================================================
 * MATTE FINISH (dark) — flat, non-reflective surfaces: no specular highlights, no glossy gradients,
 * low-sheen soft shadows, images/covers slightly de-glared, and a barely-there paper grain over everything.
 * ========================================================================== */
html[data-theme="dark"]::after {
  content: ""; position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
html[data-theme="dark"] img:not([src$=".svg"]) { filter: brightness(.9) contrast(.96) saturate(.92); }
html[data-theme="dark"] img[src*="favicon"], html[data-theme="dark"] img[src*="vertex-logo"] { filter: none; }
html[data-theme="dark"] .db-search, html[data-theme="dark"] .pill, html[data-theme="dark"] .nt-card { box-shadow: 0 1px 0 rgba(255,255,255,.025) inset, 0 6px 18px -8px rgba(0,0,0,.7); }

/* ---------- Booklets (dark): a real bookcase in a dim room — warm walnut planks, a back wall lit from above, shadows that fall
   from each plank onto the books and wall below it, paper that stays paper-coloured, and books that actually stand on the wood. ---------- */
html[data-theme="dark"] .bk-case { background: linear-gradient(180deg, #17110c, #231911); }
html[data-theme="dark"] .bk-back {
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255, 205, 150, .075), rgba(255, 205, 150, 0) 62%),          /* light from above */
    linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,0) 9%, rgba(0,0,0,0) 91%, rgba(0,0,0,.55)),         /* inner side walls of the case */
    linear-gradient(180deg, #1c1611, #14100c);                                                            /* back panel */
}
html[data-theme="dark"] .bk-base { background: linear-gradient(180deg, #2a2017, #120d09); border-top: 1px solid rgba(255, 220, 180, .07); }

/* the shadow of the plank above falls onto this shelf's wall and the tops of the books */
html[data-theme="dark"] .bk-books { background: linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,0) 54px, rgba(0,0,0,0) 64%, rgba(0,0,0,.34)); }
html[data-theme="dark"] .bk-shelf:first-child .bk-books { background: linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,0) 54px, rgba(0,0,0,0) 64%, rgba(0,0,0,.34)); }

/* plank: wood top face (light catches the front edge), darker front face with a bevel, and a soft shadow thrown onto the wall below */
html[data-theme="dark"] .bk-plank i {
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.07) 0 2px, rgba(0,0,0,0) 2px 9px),
    linear-gradient(180deg, #5c4634, #4b3a2b 48%, #382b20);
  box-shadow: inset 0 1px 0 rgba(255, 224, 190, .14);
}
html[data-theme="dark"] .bk-plank b {
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.08) 0 2px, rgba(0,0,0,0) 2px 11px),
    linear-gradient(180deg, #3b2d21, #1f1710);
  border-top: 1px solid rgba(255, 220, 180, .16);
  border-bottom: 1px solid rgba(0,0,0,.6);
  box-shadow: 0 16px 20px -8px rgba(0,0,0,.85);
}

/* books: warm contact shadow on the wood, a faint wall shadow behind, brighter spine edge on hover */
html[data-theme="dark"] .bk { filter: drop-shadow(5px 4px 5px rgba(0,0,0,.55)); }
@media (hover: hover) { html[data-theme="dark"] .bk:hover { filter: drop-shadow(8px 11px 10px rgba(0,0,0,.65)); } }
html[data-theme="dark"] .bk-gs { background: radial-gradient(ellipse at center, rgba(0,0,0,.78), rgba(0,0,0,0) 70%); }
html[data-theme="dark"] .bk-top  { background: repeating-linear-gradient(180deg, rgba(0,0,0,.14) 0 1px, transparent 1px 2.4px), linear-gradient(90deg, #d6d0c2, #bdb6a5); }                     /* page block seen from above: dim cream paper */
html[data-theme="dark"] .bk-side {
  background: linear-gradient(90deg, var(--cc) 0 1.6px, transparent 1.6px), repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 .8px, transparent .8px 2.2px), linear-gradient(90deg, #cfc9ba, #a39c8b 55%, #7c7566);   /* paper is still paper in a dim room: lighter than the wall, shaded away from the light */
}
html[data-theme="dark"] .bk-cv { background: #1c1815; filter: brightness(.86) contrast(.96) saturate(.88); }   /* printed cover, lit by a dim room */
html[data-theme="dark"] .bk-sh { background: linear-gradient(90deg, rgba(0,0,0,.4) 0, rgba(255,255,255,.04) 2.5%, rgba(0,0,0,0) 8%), rgba(0,0,0,.05); }

/* "coming soon": plain card-board cover */
html[data-theme="dark"] .bk-soonface { background: linear-gradient(160deg, #272019, #1d1812); border-color: #342b22; }
html[data-theme="dark"] .bk-soonface b { color: #8a7f70; }
html[data-theme="dark"] .bk-soonface em { color: #6a6054; }
html[data-theme="dark"] .bk-soonface::before { opacity: .8; }

/* ==========================================================================
 * TEST PORTAL (testportalnew.html + testportal-page.css) and the modals that hard-code light colours
 * (logout confirm, resume/launch, timer customise, subject menu). The question-number grid and the mark-tool icons set colours inline,
 * so they are themed from JS (testportal-sidebar-blocks.js / testportal-mark-tool.js listen for the 'vx:theme' event).
 * ========================================================================== */
html[data-theme="dark"] .tp-page, html[data-theme="dark"] .tp-rail { color: var(--vx-text); }
html[data-theme="dark"] .tp-card,
html[data-theme="dark"] .tp-btn,
html[data-theme="dark"] .tp-gear,
html[data-theme="dark"] .tp-timer,
html[data-theme="dark"] .tp-tools,
html[data-theme="dark"] .tp-tpanel { background: var(--vx-card); }
html[data-theme="dark"] .tp-gear, html[data-theme="dark"] .tp-timer, html[data-theme="dark"] .tp-btn { box-shadow: 0 0 0 1px var(--vx-border-card); }
html[data-theme="dark"] .tp-tools, html[data-theme="dark"] .tp-tpanel { box-shadow: 0 0 0 1px var(--vx-border-card), 0 14px 44px rgba(0,0,0,.7); }
html[data-theme="dark"] .tp-tags, html[data-theme="dark"] .tp-tags .tp-chev, html[data-theme="dark"] .tp-item-title,
html[data-theme="dark"] .tp-q, html[data-theme="dark"] .tp-opt, html[data-theme="dark"] .tp-qtext,
html[data-theme="dark"] .tp-timer, html[data-theme="dark"] .tp-trow, html[data-theme="dark"] .tp-subj { color: var(--vx-text); }
html[data-theme="dark"] .tp-block, html[data-theme="dark"] .tp-ptext { color: #d6d6d6; }
html[data-theme="dark"] .tp-gear, html[data-theme="dark"] .tp-btn { color: #cfcfcf; }
html[data-theme="dark"] .tp-btn:hover, html[data-theme="dark"] .tp-trow:hover { background: var(--vx-hover); }
html[data-theme="dark"] .tp-btn.vx-tp-nav-disabled { color: #5a5a5a; }
html[data-theme="dark"] .tp-tool { color: #8d8d8d; }
html[data-theme="dark"] .tp-g { color: #7d7d7d; }
html[data-theme="dark"] .tp-slot { background: var(--vx-card); border-color: #a8a8a8; color: #cfcfcf; }
html[data-theme="dark"] .tp-rail { background: var(--vx-page); }
html[data-theme="dark"] .tp-subj-list { border-bottom-color: var(--vx-divider); }
html[data-theme="dark"] .tp-subj.cur { color: #ff6b7c; }
html[data-theme="dark"] #vx-tp-tool-bookmark:not(.vx-bm-on) svg { stroke: #8d8d8d; color: #8d8d8d; }
html[data-theme="dark"] .tp-caselet-data { background: #1d1d1d; border-color: #2e2e2e; }
html[data-theme="dark"] .tp-caselet-data::before { color: #8d8d8d; }
html[data-theme="dark"] .tp-diagram { background: #1d1d1d; border-color: #2e2e2e; }
html[data-theme="dark"] .tp-diagram img, html[data-theme="dark"] .tp-diagram svg { filter: invert(.9) hue-rotate(180deg); }
html[data-theme="dark"] .tp-diagram-zoom-box { background: #1d1d1d; }
html[data-theme="dark"] body .vx-timer-cust-overlay { background: rgba(0,0,0,.62); }
/* selected-text marks */
html[data-theme="dark"] mark.vx-em-highlight { background: #7a6200; color: #fff; }
html[data-theme="dark"] mark.vx-em-highlight:hover { background: #8f7300; }
html[data-theme="dark"] mark.vx-em-strike { color: #7d7d7d; text-decoration-color: #7d7d7d; }
/* the loading splash is an inline-styled full-screen div */
html[data-theme="dark"] body > div[style*="z-index:99999"], html[data-theme="dark"] body > div[style*="z-index: 99999"] { background: var(--vx-page) !important; color: var(--vx-text) !important; }

/* injected modals with hard-coded light colours */
html[data-theme="dark"] .vx-logout-card, html[data-theme="dark"] .vx-launch-card, html[data-theme="dark"] .vx-timer-cust-card {
  background: #1a1a1a; border-top-color: #1a1a1a; color: var(--vx-text); box-shadow: 0 0 0 1px #2e2e2e, 0 24px 70px rgba(0,0,0,.75);
}
html[data-theme="dark"] .vx-logout-overlay, html[data-theme="dark"] .vx-launch-overlay { background: rgba(0,0,0,.66); }
html[data-theme="dark"] .vx-logout-close, html[data-theme="dark"] .vx-launch-close, html[data-theme="dark"] .vx-timer-cust-close { background: #262626; color: #a8a8a8; }
html[data-theme="dark"] .vx-logout-close:hover, html[data-theme="dark"] .vx-launch-close:hover, html[data-theme="dark"] .vx-timer-cust-close:hover { background: #333; color: #fff; }
html[data-theme="dark"] .vx-logout-title { color: var(--vx-title); }
html[data-theme="dark"] .vx-launch-title, html[data-theme="dark"] .vx-timer-cust-title { color: #e0243a; }
html[data-theme="dark"] .vx-logout-message, html[data-theme="dark"] .vx-launch-msg, html[data-theme="dark"] .vx-launch-stats { color: #d6d6d6; }
html[data-theme="dark"] .vx-launch-stats { background: #232323; }
html[data-theme="dark"] .vx-launch-sub, html[data-theme="dark"] .vx-timer-cust-sub, html[data-theme="dark"] .vx-timer-cust-hint, html[data-theme="dark"] .vx-logout-skip { color: #8d8d8d; }
html[data-theme="dark"] .vx-logout-skip:hover { color: #fff; }
html[data-theme="dark"] .vx-timer-cust-field label { color: #bdbdbd; }
html[data-theme="dark"] .vx-timer-cust-field input, html[data-theme="dark"] body .vx-timer-cust-field input { background: #111; border-color: #363636; color: #ececec; }
html[data-theme="dark"] .vx-timer-cust-field input:focus { border-color: #e0243a; }
html[data-theme="dark"] .vx-logout-return, html[data-theme="dark"] .vx-launch-resume, html[data-theme="dark"] .vx-timer-cust-save { background: #ececec; color: #111; }
html[data-theme="dark"] .vx-logout-return:hover, html[data-theme="dark"] .vx-launch-resume:hover, html[data-theme="dark"] .vx-timer-cust-save:hover { background: #fff; }
html[data-theme="dark"] .vx-launch-pill { background: #1a1a1a; color: #ececec; box-shadow: 0 0 0 1px #2e2e2e, 0 6px 24px rgba(0,0,0,.6); }
html[data-theme="dark"] .vx-launch-dot { border-color: #333; border-top-color: #e0243a; }
html[data-theme="dark"] .vx-subject-menu, html[data-theme="dark"] body .vx-subject-menu { background: #1a1a1a; border: 1px solid #2e2e2e; box-shadow: 0 16px 44px rgba(0,0,0,.7); }
html[data-theme="dark"] .vx-subject-item { color: var(--vx-text); }
html[data-theme="dark"] .vx-subject-item:hover, html[data-theme="dark"] body .vx-subject-item:hover { background: #262626; }
html[data-theme="dark"] .vx-subject-item .vx-subject-count { color: #8d8d8d; }
html[data-theme="dark"] .vx-subject-item.vx-current, html[data-theme="dark"] body .vx-subject-item.vx-current { color: #ff6b7c; }

/* not-synced.html (inline light colours) */
html[data-theme="dark"] body:has(.ns__bg), html[data-theme="dark"] .ns__bg { background: var(--vx-page); }
html[data-theme="dark"] .ns__icon-wrap { background: rgba(224,36,58,.16); }
html[data-theme="dark"] .ns__icon-wrap svg { stroke: #ff6b7c; }
html[data-theme="dark"] .ns__title { color: var(--vx-title); }
html[data-theme="dark"] .ns__subtitle { color: var(--vx-muted); }
html[data-theme="dark"] .ns__hint { background: var(--vx-card); border-color: var(--vx-border-card); color: var(--vx-muted); }
html[data-theme="dark"] .ns__btn { background: #ececec; color: #111; }

/* ==========================================================================
 * FULLSCREEN BUTTON — outline "maximize / minimize" icon (same glyph family as the Answer Keys analysis expand button),
 * sits right of the notification bell. Built by src/js/core/fullscreen.js. Same size/spacing as .vx-theme-btn.
 * ========================================================================== */
.vx-fs-btn {
  --fs-ease: cubic-bezier(.5, 0, .2, 1);
  position: relative; flex: none; display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; margin: 0 4px 0 -8px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--vx-text, #2f2f2f); cursor: pointer; outline: none;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background-color .25s ease, transform .2s ease;
}
.vx-fs-btn::after { content: ""; position: absolute; inset: -4px; }          /* 44px touch target */
.vx-fs-btn svg { width: 20px; height: 20px; overflow: visible; display: block; }
@media (hover: hover) { .vx-fs-btn:hover { background: var(--vx-hover, #f3f3f3); } }
.vx-fs-btn:active { transform: scale(.88); }
/* portrait / tablet (compact shell): same 44px box as the theme button and the bell, no negative margin,
 * so the three icons sit on an even 44px rhythm instead of 44 / 32 */
@media (max-width: 1024px) {
  .vx-fs-btn { width: 44px; height: 44px; margin: 0; }
  .vx-fs-btn::after { inset: 0; }
}
.vx-fs-btn:focus-visible { box-shadow: 0 0 0 2px var(--vx-bg, #fff), 0 0 0 4px var(--vx-red, #bf0016); }
.vx-fs-btn .fs-out, .vx-fs-btn .fs-in { transform-box: view-box; transform-origin: 12px 12px; transition: transform .45s var(--fs-ease), opacity .3s ease; }
.vx-fs-btn .fs-out { opacity: 1; transform: none; }
.vx-fs-btn .fs-in  { opacity: 0; transform: scale(1.35) rotate(-8deg); }
html.vx-is-fs .vx-fs-btn .fs-out { opacity: 0; transform: scale(.55) rotate(8deg); }
html.vx-is-fs .vx-fs-btn .fs-in  { opacity: 1; transform: none; transition-delay: .06s; }

/* smooth settle of the page while the browser enters / leaves fullscreen (viewport resizes underneath) */
html.vx-fs-anim .vx-main, html.vx-fs-anim .vx-content { animation: vxFsSettle .5s cubic-bezier(.22,.8,.24,1); }
@keyframes vxFsSettle { 0% { opacity: .55; transform: scale(.985); } 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html.vx-fs-anim .vx-main, html.vx-fs-anim .vx-content { animation: none; }
  .vx-fs-btn .fs-out, .vx-fs-btn .fs-in { transition: none; }
}
/* fallback tip (only used if the site toast isn't loaded on a page) */
.vx-fs-tip { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 99999; max-width: min(92vw, 420px);
  transform: translate(-50%, 12px); opacity: 0; transition: opacity .3s ease, transform .3s ease; padding: 12px 16px; border-radius: 12px;
  background: #2f2f2f; color: #fff; font: 500 14px/1.4 system-ui, sans-serif; text-align: center; }
.vx-fs-tip.on { opacity: 1; transform: translate(-50%, 0); }

/* ==========================================================================
 * PRICING + CHECKOUT + UPGRADE MODAL (dark, matte) — flat charcoal cards on near-black, hairline borders, no gloss.
 * Brand red stays the single accent; buttons that are black-on-white in light mode flip to a soft off-white pill.
 * ========================================================================== */
html[data-theme="dark"] .pr-page, html[data-theme="dark"] .ck-page { background: var(--vx-page); }
html[data-theme="dark"] .pr-page { --pr-red: #e0243a; }
html[data-theme="dark"] .ck-page { --ck-red: #e0243a; --ck-red-dk: #b5122a; --ck-green: #2fd197; }
html[data-theme="dark"] .pr-title, html[data-theme="dark"] .pr-h2, html[data-theme="dark"] .ck-title,
html[data-theme="dark"] .pr-name, html[data-theme="dark"] .pr-price, html[data-theme="dark"] .pr-fh,
html[data-theme="dark"] .pr-pt, html[data-theme="dark"] .pr-opt, html[data-theme="dark"] .pr-bar,
html[data-theme="dark"] .ck-h2, html[data-theme="dark"] .ck-sh, html[data-theme="dark"] .ck-tv b,
html[data-theme="dark"] .ck-msg h2 { color: var(--vx-title); }
html[data-theme="dark"] .ck-wrap, html[data-theme="dark"] .ck-un, html[data-theme="dark"] .ck-gt, html[data-theme="dark"] .ck-it b,
html[data-theme="dark"] .ck-up b, html[data-theme="dark"] .ck-pn, html[data-theme="dark"] .ck-tl, html[data-theme="dark"] .ck-ii b,
html[data-theme="dark"] .ck-step.is-on, html[data-theme="dark"] .ck-step.is-done, html[data-theme="dark"] .ck-help,
html[data-theme="dark"] .ck-help a, html[data-theme="dark"] .ck-agree a, html[data-theme="dark"] .ck-agree u,
html[data-theme="dark"] .ck-back:hover, html[data-theme="dark"] .ck-ap .ck-rm:hover { color: var(--vx-text); }
html[data-theme="dark"] .pr-fl li, html[data-theme="dark"] .pr-desc, html[data-theme="dark"] .pr-pn, html[data-theme="dark"] .pr-mrp,
html[data-theme="dark"] .pr-op s, html[data-theme="dark"] .ck-back, html[data-theme="dark"] .ck-steps, html[data-theme="dark"] .ck-dot,
html[data-theme="dark"] .ck-eyebrow, html[data-theme="dark"] .ck-us, html[data-theme="dark"] .ck-note, html[data-theme="dark"] .ck-count,
html[data-theme="dark"] .ck-gc, html[data-theme="dark"] .ck-it span, html[data-theme="dark"] .ck-up p, html[data-theme="dark"] .ck-ps,
html[data-theme="dark"] .ck-row s, html[data-theme="dark"] .ck-tv s, html[data-theme="dark"] .ck-agree, html[data-theme="dark"] .ck-secure,
html[data-theme="dark"] .ck-ii span, html[data-theme="dark"] .ck-load, html[data-theme="dark"] .ck-help small { color: var(--vx-muted); }
html[data-theme="dark"] .ck-f label, html[data-theme="dark"] .ck-row, html[data-theme="dark"] .ck-row.is-muted, html[data-theme="dark"] .ck-cl,
html[data-theme="dark"] .ck-chev, html[data-theme="dark"] .ck-msg p, html[data-theme="dark"] .ck-ap .ck-rm { color: var(--vx-pill-text); }
html[data-theme="dark"] .pr-op svg { color: var(--vx-text); }
html[data-theme="dark"] .pr-opt:hover .pr-op svg { color: var(--pr-red); }

/* surfaces */
html[data-theme="dark"] .pr-toggle { background: var(--vx-card); box-shadow: 0 0 0 1px var(--vx-border-card); }
html[data-theme="dark"] .pr-tab { color: var(--vx-muted); }
html[data-theme="dark"] .pr-tab:hover { color: var(--vx-text); }
html[data-theme="dark"] .pr-tab[aria-selected="true"] { color: #fff; }
html[data-theme="dark"] .pr-card, html[data-theme="dark"] .pr-pack, html[data-theme="dark"] .ck-card, html[data-theme="dark"] .ck-grp,
html[data-theme="dark"] .ck-up { background: var(--vx-card); border-color: var(--vx-border-card); box-shadow: 0 1px 0 rgba(255,255,255,.025) inset, 0 10px 28px -14px rgba(0,0,0,.75); }
html[data-theme="dark"] .pr-bar, html[data-theme="dark"] .pr-col, html[data-theme="dark"] .pr-feat, html[data-theme="dark"] .ck-gb,
html[data-theme="dark"] .ck-sep, html[data-theme="dark"] .ck-it + .ck-it { border-color: var(--vx-divider); }
@media (max-width: 1180px) { html[data-theme="dark"] .pr-col:nth-child(n+3) { border-top-color: var(--vx-divider); } }
@media (max-width: 640px) { html[data-theme="dark"] .pr-col:nth-child(n+2) { border-top-color: var(--vx-divider); } }
html[data-theme="dark"] .pr-badge { background: rgba(224,36,58,.16); color: #ff6b7c; }
html[data-theme="dark"] .pr-bar a { color: #ff6b7c; }

/* buttons: outline pills become off-white-on-charcoal; highlighted plan + pay stay brand red */
html[data-theme="dark"] .pr-buy { background: transparent; border-color: #5a5a5a; color: var(--vx-text); }
html[data-theme="dark"] .pr-buy:hover { background: var(--vx-hover); border-color: #8a8a8a; }
html[data-theme="dark"] .pr-col.is-hl .pr-buy { background: var(--pr-red); border-color: var(--pr-red); color: #fff; }
html[data-theme="dark"] .pr-col.is-hl .pr-buy:hover { background: var(--vx-red-dk); border-color: var(--vx-red-dk); }
html[data-theme="dark"] .ck-upb { background: transparent; border-color: #5a5a5a; color: var(--vx-text); }
html[data-theme="dark"] .ck-upb:hover { background: var(--vx-hover); }
html[data-theme="dark"] .ck-apply { background: #ececec; color: #111; }
html[data-theme="dark"] .ck-pay, html[data-theme="dark"] .ck-msg .ck-btn { background: var(--ck-red); color: #fff; }
html[data-theme="dark"] .ck-pay:hover, html[data-theme="dark"] .ck-msg .ck-btn:hover { background: var(--ck-red-dk); }

/* checkout form + states */
html[data-theme="dark"] .ck-user, html[data-theme="dark"] .ck-help { background: var(--vx-bg); }
html[data-theme="dark"] .ck-f input { background: var(--vx-bg); border-color: var(--vx-border-btn); color: var(--vx-text); }
html[data-theme="dark"] .ck-f input:focus { border-color: var(--ck-red); box-shadow: 0 0 0 3px rgba(224,36,58,.18); }
html[data-theme="dark"] .ck-f input[readonly] { background: #131313; color: var(--vx-muted); }
html[data-theme="dark"] .ck-f input[readonly]:focus { border-color: var(--vx-border-btn); box-shadow: none; }
html[data-theme="dark"] .ck-cp input { background: var(--vx-bg); border-color: #4a4a4a; color: var(--vx-text); }
html[data-theme="dark"] .ck-cp input:focus { border-color: var(--ck-red); }
html[data-theme="dark"] .ck-cp input::placeholder { color: var(--vx-muted-2); }
html[data-theme="dark"] .ck-dot { border-color: #444; }
html[data-theme="dark"] .ck-step.is-on .ck-dot { border-color: var(--ck-red); color: #fff; }
html[data-theme="dark"] .ck-step.is-done .ck-dot { border-color: var(--ck-green); color: #0a0a0a; }
html[data-theme="dark"] .ck-line { background: #3a3a3a; }
html[data-theme="dark"] .ck-ap { background: rgba(47,209,151,.12); color: #5eddb0; }
html[data-theme="dark"] .ck-err { background: rgba(224,36,58,.14); color: #ff8a98; }
html[data-theme="dark"] .ck-msg .ck-ico { background: rgba(47,209,151,.14); }
html[data-theme="dark"] .ck-msg .ck-ico.is-bad { background: rgba(224,36,58,.16); }
html[data-theme="dark"] .ck-spin { border-color: #2e2e2e; border-top-color: var(--ck-red); }
html[data-theme="dark"] .ck-help a { color: var(--vx-text); }
html[data-theme="dark"] .ck-cm { color: #ff6b7c; }

/* upgrade (plan-gate) modal — styles are injected from JS with light colours */
html[data-theme="dark"] .vx-upgrade-overlay { background: rgba(0,0,0,.66); }
html[data-theme="dark"] .vx-upgrade-card { background: #1a1a1a; box-shadow: 0 0 0 1px #2e2e2e, 0 24px 70px rgba(0,0,0,.75); }
html[data-theme="dark"] .vx-upgrade-title { color: #ff4d62; }
html[data-theme="dark"] .vx-upgrade-message { color: #cfcfcf; }
html[data-theme="dark"] .vx-upgrade-close { background: #262626; color: #a8a8a8; }
html[data-theme="dark"] .vx-upgrade-close:hover { background: #303030; color: #ececec; }
html[data-theme="dark"] .vx-upgrade-cta { background: #ececec; color: #111; }
html[data-theme="dark"] .vx-upgrade-cta:hover { background: var(--vx-red); color: #fff; }

/* ==========================================================================
 * VIDEO PLAYER, ONBOARDING, TEST GENERATOR (dark, matte)
 * ========================================================================== */
/* ---- video player ---- */
html[data-theme="dark"] body.vp-page { background: var(--vx-page); color: var(--vx-text); }
html[data-theme="dark"] .vp-head { background: var(--vx-bg); border-bottom-color: var(--vx-border); }
html[data-theme="dark"] .vp-back, html[data-theme="dark"] .vp-icons a, html[data-theme="dark"] .vp-title, html[data-theme="dark"] .vp-ls, html[data-theme="dark"] .vp-tx b { color: var(--vx-text); }
html[data-theme="dark"] .vp-practice, html[data-theme="dark"] .vp-note, html[data-theme="dark"] .vp-list, html[data-theme="dark"] .vp-row { background: var(--vx-card); border-color: var(--vx-border-card); color: var(--vx-text); }
html[data-theme="dark"] .vp-note { color: #ff6b7c; box-shadow: 0 6px 18px -8px rgba(0,0,0,.7); }
html[data-theme="dark"] .vp-row { border-top-color: var(--vx-divider); }
html[data-theme="dark"] .vp-row.on, html[data-theme="dark"] .vp-practice:not([disabled]):active, html[data-theme="dark"] .vp-note:not([disabled]):active { background: var(--vx-sel); }
@media (hover: hover) { html[data-theme="dark"] .vp-row:hover { background: var(--vx-hover); } }
html[data-theme="dark"] .vp-lc, html[data-theme="dark"] .vp-sub { color: var(--vx-muted); }
html[data-theme="dark"] .vp-sk { background: var(--vx-sel); }
html[data-theme="dark"] .vp-veil { background: rgba(10,10,10,.72); color: var(--vx-text); }
html[data-theme="dark"] .vp-frame { background: #000; box-shadow: 0 0 0 1px var(--vx-border-card); }
html[data-theme="dark"] .vp-ph-s { background: #1d1d1d; }
html[data-theme="dark"] .vp-ph-s b { color: var(--vx-text); }
html[data-theme="dark"] .vp-ph-s u { background: #333; }
html[data-theme="dark"] .vp-play { background: rgba(236,236,236,.92); }

/* ---- onboarding ---- */
html[data-theme="dark"] body, html[data-theme="dark"] html { background: var(--vx-page); }
html[data-theme="dark"] .ob-top button, html[data-theme="dark"] .ob-top span { color: var(--vx-pill-text); }
html[data-theme="dark"] .ob-bar { background: var(--vx-track); }
html[data-theme="dark"] .ob-bar i { background: #ececec; }
html[data-theme="dark"] .ob-card h1 { color: var(--vx-title); }
html[data-theme="dark"] .ob-sub, html[data-theme="dark"] .ob-lab, html[data-theme="dark"] .ob-skip { color: var(--vx-muted); }
html[data-theme="dark"] .ob-skip:hover { color: var(--vx-text); }
html[data-theme="dark"] .ob-in, html[data-theme="dark"] .ob-ph, html[data-theme="dark"] .ob-tile { background: var(--vx-card); border-color: var(--vx-border-btn); color: var(--vx-text); }
html[data-theme="dark"] .ob-in:focus, html[data-theme="dark"] .ob-ph:focus-within { border-color: var(--vx-red); }
html[data-theme="dark"] .ob-ph span { color: var(--vx-muted); border-right-color: var(--vx-border-btn); }
html[data-theme="dark"] .ob-ph input { color: var(--vx-text); background: transparent; }
html[data-theme="dark"] .ob-tile { color: var(--vx-pill-text); }
html[data-theme="dark"] .ob-tile:hover { background: var(--vx-hover); }
html[data-theme="dark"] .ob-tile.on { background: rgba(224,36,58,.14); border-color: var(--vx-red); color: #ff6b7c; }
html[data-theme="dark"] .ob-go { background: var(--vx-red); color: #fff; }
html[data-theme="dark"] .ob-hint { color: #ff6b7c; }

/* ---- test generator: dark rules live in src/css/test-generator.css ---- */

/* ---- generic dialog (vertx-dialog.js: coupon / confirm prompts) ---- */
html[data-theme="dark"] .vxd-overlay { background: rgba(0,0,0,.66); }
html[data-theme="dark"] .vxd-card { background: #1a1a1a; box-shadow: 0 0 0 1px #2e2e2e, 0 24px 70px rgba(0,0,0,.75); }
html[data-theme="dark"] .vxd-title { color: var(--vx-title); }
html[data-theme="dark"] .vxd-card.vxd-danger .vxd-title { color: #ff4d62; }
html[data-theme="dark"] .vxd-msg { color: #cfcfcf; }
html[data-theme="dark"] .vxd-label { color: var(--vx-muted); }
html[data-theme="dark"] .vxd-input { background: #111; border-color: #363636; color: var(--vx-text); }
html[data-theme="dark"] .vxd-input:focus { border-color: #8a8a8a; box-shadow: 0 0 0 3px rgba(255,255,255,.08); }
html[data-theme="dark"] .vxd-error { background: rgba(224,36,58,.14); color: #ff8a98; }
html[data-theme="dark"] .vxd-cancel { background: #262626; color: #d6d6d6; }
html[data-theme="dark"] .vxd-cancel:hover:not([disabled]) { background: #303030; }
html[data-theme="dark"] .vxd-ok { background: #ececec; color: #111; }
html[data-theme="dark"] .vxd-ok:hover:not([disabled]) { background: #fff; }
html[data-theme="dark"] .vxd-danger .vxd-ok { background: var(--vx-red); color: #fff; }
html[data-theme="dark"] .vxd-spin { border-color: rgba(0,0,0,.25); border-top-color: #111; }
html[data-theme="dark"] .vx-launch-btn.vx-launch-locked, html[data-theme="dark"] .vx-launch-btn.vx-launch-locked:hover { background: #3a3a3a; color: #bdbdbd; }
html[data-theme="dark"] .vx-logout-end, html[data-theme="dark"] .vx-launch-new { background: var(--vx-red); color: #fff; }

/* feature packs (dark) */
html[data-theme="dark"] .pr-fhd { border-color: var(--vx-divider); }
html[data-theme="dark"] .pr-fnote { color: var(--vx-muted); }
html[data-theme="dark"] .pr-fcard:hover { border-color: var(--vx-border-card); }