/* lf-themes.css v2 — the terminal's card themes, made to match the Orbit Deck card skins (/levels/cards, gear → Card
 * theme). Injected on every door; no bundle rebuild.
 *
 * Why the themes looked alike (measured 7 Nov):
 *   1. The app ports each skin's card face to `.orbit-card`, but the trade screen has NO .orbit-card elements — the
 *      frames, glows and grids never render. Only a background tint differed, and Orbit/Tarot/Arcana/Focus/Minimal
 *      share the deck's navy, so they looked the same.
 *   2. No theme set --fill-brand-strong (buttons, sliders, Paper badge, focus rings), so every theme kept Orbit gold.
 *   3. lf-tradeform.css paints the trade form in fixed Bitunix greys, the same under every theme.
 *
 * What this does, per skin, with every value taken from the deck's own skin rules (levels_cards.html):
 *   · the page backdrop          = the skin's card face (radial glow, grid paper, stripes, window gradient)
 *   · the chart panel + trade area get the skin's frame (gold inset frame, double frame + star, red offset shadow …)
 *   · the form controls          take the skin's panel style (radius, border, fill) and its selected state
 *   · the big book price         takes the skin's type (serif, mono, italic, hard shadow)
 *   · the brand token set        is completed with the skin's own accent
 * Orbit (the LunaFlow house look) and Classic are left exactly as they were. Trading colours are never changed.
 */

/* ── 1 · brand completion: each skin's own accent on buttons, sliders, badges, focus rings ─────────────────── */
html.dark.tarot-theme, html.dark.arcana-theme, html.dark.minimal-theme {
  --fill-brand-strong: #d4a84b; --text-inverse-strong: #1c1404;
}
html.dark.focus-theme {
  --fill-brand-strong: #3b7fae; --bg-brand: #3b7fae; --text-brand: #f5b83d; --icon-brand: #3b7fae; --text-inverse-strong: #ffffff;
}
html.dark.blueprint-theme { --fill-brand-strong: #8fb6e8; --fill-brand-weak: #8fb6e81a; --icon-brand: #8fb6e8; --text-inverse-strong: #061733; }
html.dark.mono-theme { --fill-brand-strong: #ffffff; --fill-brand-weak: #ffffff12; --text-inverse-strong: #000000; }
html.dark.aureus-theme { --fill-brand-strong: #d4a84b; --text-inverse-strong: #1a1204; }
html.dark.bagdaddy-theme { --fill-brand-strong: #39ff88; --fill-brand-weak: #39ff8814; --text-inverse-strong: #04120a; }
html.dark.phantom-theme { --fill-brand-strong: #e60012; --fill-brand-weak: #e600121f; --text-inverse-strong: #ffffff; }
html.dark.crystal-theme { --fill-brand-strong: #9fd8ff; --fill-brand-weak: #9fd8ff1f; --text-inverse-strong: #06123a; }

/* ── 2 · the skins (values from the deck) ───────────────────────────────────────────────────────────────── */
html.dark.tarot-theme {
  --sk-page: radial-gradient(120% 70% at 50% 0%, #1b3164, #0b1736 60%);
  --sk-frame: 1px solid #d4a84b; --sk-radius: 16px;
  --sk-shadow: inset 0 0 0 5px #0b1736, inset 0 0 0 6px rgba(212, 168, 75, .5), 0 18px 44px rgba(0, 0, 0, .45);
  --sk-face: radial-gradient(120% 70% at 50% 0%, #1b3164, #0b1736 60%);
  --sk-ctl: rgba(0, 0, 0, .25); --sk-ctl-line: 1px solid rgba(212, 168, 75, .28); --sk-ctl-radius: 10px;
  --sk-sel: #d4a84b; --sk-sel-ink: #1c1404;
  --sk-price-font: 400 21px/1.1 "Instrument Serif", Georgia, serif; --sk-label: #f4dc9a;
}
html.dark.arcana-theme {
  --sk-page: radial-gradient(90% 50% at 50% 0%, rgba(212, 168, 75, .12), transparent 70%), #0a1430;
  --sk-frame: 2px solid #d4a84b; --sk-radius: 16px;
  --sk-shadow: inset 0 0 0 5px #0a1430, inset 0 0 0 6px rgba(212, 168, 75, .6), 0 30px 70px rgba(0, 0, 0, .55);
  --sk-face: radial-gradient(90% 50% at 50% 0%, rgba(212, 168, 75, .12), transparent 70%), #0a1430;
  --sk-ctl: rgba(0, 0, 0, .22); --sk-ctl-line: 1px solid rgba(212, 168, 75, .34); --sk-ctl-radius: 10px;
  --sk-sel: #d4a84b; --sk-sel-ink: #1c1404;
  --sk-price-font: 400 21px/1.1 "Instrument Serif", Georgia, serif; --sk-label: #f4dc9a;
}
html.dark.minimal-theme {
  --sk-page: #0b1430;
  --sk-frame: 1px solid #1d2a4f; --sk-radius: 10px; --sk-shadow: 0 18px 40px rgba(0, 0, 0, .4); --sk-face: #0b1430;
  --sk-ctl: rgba(255, 255, 255, .02); --sk-ctl-line: 1px solid #1d2a4f; --sk-ctl-radius: 8px;
  --sk-sel: #2a3a66; --sk-sel-ink: #eef3fc;
  --sk-price-font: 800 19px/1.1 Manrope, system-ui, sans-serif;
}
html.dark.focus-theme {
  --sk-page: #0b1430;
  --sk-frame: 1px solid #1e3d5c; --sk-radius: 12px; --sk-shadow: none; --sk-face: #0b1430;
  --sk-ctl: #0d1a36; --sk-ctl-line: 1px solid #1f3a5a; --sk-ctl-radius: 8px;
  --sk-sel: #3b7fae; --sk-sel-ink: #ffffff; --sk-label: #f5b83d;
  --sk-price-font: 700 19px/1.1 Manrope, system-ui, sans-serif;
}
html.dark.blueprint-theme {
  --sk-page: linear-gradient(rgba(120, 180, 255, .12) 1px, transparent 1px) 0 0 / 40px 40px,
             linear-gradient(90deg, rgba(120, 180, 255, .12) 1px, transparent 1px) 0 0 / 40px 40px,
             linear-gradient(rgba(120, 180, 255, .05) 1px, transparent 1px) 0 0 / 8px 8px,
             linear-gradient(90deg, rgba(120, 180, 255, .05) 1px, transparent 1px) 0 0 / 8px 8px, #0a2246;
  --sk-frame: 1px solid #2e6bb5; --sk-radius: 10px; --sk-shadow: none; --sk-face: rgba(10, 34, 70, .6);
  --sk-ctl: rgba(10, 34, 70, .6); --sk-ctl-line: 1px dashed rgba(143, 182, 232, .55); --sk-ctl-radius: 6px;
  --sk-sel: #8fb6e8; --sk-sel-ink: #061733; --sk-label: #8fb6e8;
  --sk-price-font: 700 18px/1.1 "JetBrains Mono Variable", ui-monospace, monospace;
}
html.dark.mono-theme {
  --sk-page: #000;
  --sk-frame: 1px solid #ffffff; --sk-radius: 6px; --sk-shadow: 0 30px 70px rgba(0, 0, 0, .6); --sk-face: #000;
  --sk-ctl: #000; --sk-ctl-line: 1px solid #444; --sk-ctl-radius: 4px;
  --sk-sel: #ffffff; --sk-sel-ink: #000000;
  --sk-price-font: italic 700 19px/1.1 system-ui, sans-serif;
}
html.dark.aureus-theme {
  --sk-page: radial-gradient(90% 50% at 50% 0%, #1d1a12 0%, #0b0b0c 55%), #0b0b0c;
  --sk-frame: 1px solid #2a2618; --sk-radius: 22px; --sk-shadow: inset 0 1px rgba(255, 255, 255, .05), 0 18px 44px rgba(0, 0, 0, .5);
  --sk-face: radial-gradient(90% 50% at 50% 0%, #1d1a12 0%, #0b0b0c 55%), #0b0b0c;
  --sk-ctl: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .01) 40%, rgba(0, 0, 0, .2));
  --sk-ctl-line: 1px solid rgba(212, 168, 75, .28); --sk-ctl-radius: 12px;
  --sk-sel: linear-gradient(180deg, #fff3c9, #d4a84b 70%, #8a6420); --sk-sel-ink: #1a1204; --sk-label: #b9a06a;
  --sk-price-font: 400 21px/1.1 "Instrument Serif", Georgia, serif;
}
html.dark.bagdaddy-theme {
  --sk-page: radial-gradient(90% 55% at 50% 0%, #0d2019 0%, #040806 58%), #040806;
  --sk-frame: 1px solid #16281f; --sk-radius: 22px; --sk-shadow: inset 0 1px rgba(57, 255, 136, .08), 0 18px 44px rgba(0, 0, 0, .55);
  --sk-face: radial-gradient(90% 55% at 50% 0%, #0d2019 0%, #040806 58%), #040806;
  --sk-ctl: rgba(57, 255, 136, .04); --sk-ctl-line: 1px solid #16281f; --sk-ctl-radius: 12px;
  --sk-sel: #39ff88; --sk-sel-ink: #04120a; --sk-label: #8fc7a6;
}
html.dark.phantom-theme {
  --sk-page: repeating-linear-gradient(-55deg, #0b0b0b 0 13px, #151515 13px 14px);
  --sk-frame: 3px solid #ffffff; --sk-radius: 3px; --sk-shadow: 8px 8px 0 #e60012, 0 30px 70px rgba(0, 0, 0, .6);
  --sk-face: #0b0b0b;
  --sk-ctl: #111111; --sk-ctl-line: 1px solid #ffffff; --sk-ctl-radius: 0px;
  --sk-sel: #e60012; --sk-sel-ink: #ffffff;
  --sk-price-font: 900 21px/1.05 Anton, Impact, "Arial Narrow", sans-serif; --sk-price-shadow: 3px 3px 0 #e60012;
}
html.dark.crystal-theme {
  --sk-page: linear-gradient(180deg, #1e2f86 0%, #0c1452 45%, #090f40 100%);
  --sk-frame: 2px solid #e8eef8; --sk-radius: 10px;
  --sk-shadow: inset 0 0 0 1px #0c1452, inset 0 0 0 3px rgba(232, 238, 248, .35), 0 30px 70px rgba(0, 0, 0, .55);
  --sk-face: linear-gradient(180deg, #3a5bc7 0%, #1e2f86 45%, #0c1452 100%);
  --sk-ctl: linear-gradient(180deg, rgba(58, 91, 199, .55), rgba(12, 20, 82, .7)); --sk-ctl-line: 1px solid rgba(232, 238, 248, .55); --sk-ctl-radius: 6px;
  --sk-sel: #e8eef8; --sk-sel-ink: #0c1452; --sk-label: #c5d0ee;
  --sk-price-shadow: 1px 1px 0 rgba(0, 0, 0, .75);
}

/* ── 3 · where the skin is painted (shared rules, driven by the variables above) ─────────────────────────── */
html.dark:is(.tarot-theme, .arcana-theme, .minimal-theme, .focus-theme, .blueprint-theme, .mono-theme, .aureus-theme, .bagdaddy-theme, .phantom-theme, .crystal-theme) .orbit-shell {
  background: var(--sk-page) !important; background-attachment: fixed !important;
}
/* the flat page layers step aside so the backdrop shows through */
html.dark:is(.tarot-theme, .arcana-theme, .minimal-theme, .focus-theme, .blueprint-theme, .mono-theme, .aureus-theme, .bagdaddy-theme, .phantom-theme, .crystal-theme) .orbit-shell [class~="bg-background"] {
  background-color: transparent !important;
}
/* the frames: the chart panel and the book + trade area are the two "cards" of the trade screen */
html.dark:is(.tarot-theme, .arcana-theme, .minimal-theme, .focus-theme, .blueprint-theme, .mono-theme, .aureus-theme, .bagdaddy-theme, .phantom-theme, .crystal-theme) .orbit-shell div[class*="bg-surface"][class*="border-b"][class*="shrink-0"],
html.dark:is(.tarot-theme, .arcana-theme, .minimal-theme, .focus-theme, .blueprint-theme, .mono-theme, .aureus-theme, .bagdaddy-theme, .phantom-theme, .crystal-theme) .orbit-shell div[class*="grid-cols-[minmax(0,1.15fr)_minmax(0,1fr)]"] {
  position: relative;
  margin: 8px 8px 10px;
  border: var(--sk-frame) !important;
  border-radius: var(--sk-radius) !important;
  box-shadow: var(--sk-shadow) !important;
  background: var(--sk-face) !important;
  overflow: hidden;
}
/* Phantom's hard offset shadow needs room outside the frame */
html.dark.phantom-theme .orbit-shell div[class*="bg-surface"][class*="border-b"][class*="shrink-0"],
html.dark.phantom-theme .orbit-shell div[class*="grid-cols-[minmax(0,1.15fr)_minmax(0,1fr)]"] { margin: 8px 16px 18px 8px; overflow: visible; }
/* Arcana: the star on top of the frame */
html.dark.arcana-theme .orbit-shell div[class*="grid-cols-[minmax(0,1.15fr)_minmax(0,1fr)]"]::after {
  content: "\2726"; position: absolute; top: 3px; left: 50%; transform: translateX(-50%);
  font: 400 14px/1 "Instrument Serif", Georgia, serif; color: #f4dc9a; pointer-events: none;
}
/* Crystal: the gem in the corner */
html.dark.crystal-theme .orbit-shell div[class*="grid-cols-[minmax(0,1.15fr)_minmax(0,1fr)]"]::after {
  content: ""; position: absolute; bottom: 10px; right: 12px; width: 9px; height: 14px; pointer-events: none;
  clip-path: polygon(50% 0, 100% 35%, 50% 100%, 0 35%); background: linear-gradient(180deg, #e9f7ff, #6cc4ff); filter: drop-shadow(0 0 6px #9fd8ff);
}

/* the trade form controls take the skin's panel style (lf-tradeform.css is Bitunix-neutral, so !important) */
html.dark:is(.tarot-theme, .arcana-theme, .minimal-theme, .focus-theme, .blueprint-theme, .mono-theme, .aureus-theme, .bagdaddy-theme, .phantom-theme, .crystal-theme) [data-lfform="1"] > [data-lfk="oc"] {
  background: var(--sk-ctl) !important; border: var(--sk-ctl-line) !important; border-radius: var(--sk-ctl-radius) !important;
}
html.dark:is(.tarot-theme, .arcana-theme, .minimal-theme, .focus-theme, .blueprint-theme, .mono-theme, .aureus-theme, .bagdaddy-theme, .phantom-theme, .crystal-theme) [data-lfform="1"] > [data-lfk="oc"] button { border-radius: var(--sk-ctl-radius) !important; }
html.dark:is(.tarot-theme, .arcana-theme, .minimal-theme, .focus-theme, .blueprint-theme, .mono-theme, .aureus-theme, .bagdaddy-theme, .phantom-theme, .crystal-theme) [data-lfform="1"] > [data-lfk="oc"] button[aria-selected="true"] {
  background: var(--sk-sel) !important; color: var(--sk-sel-ink) !important;
}
html.dark.phantom-theme [data-lfform="1"] > [data-lfk="oc"] button[aria-selected="true"] { transform: skewX(-10deg); }
html.dark:is(.tarot-theme, .arcana-theme, .minimal-theme, .focus-theme, .blueprint-theme, .mono-theme, .aureus-theme, .bagdaddy-theme, .phantom-theme, .crystal-theme) :is([data-lfform="1"] > [data-lfk="lev"] button, .lf-otsel .cur, .lf-mkt, [data-lfform="1"] > [data-lfk="amt"], [data-lfform="1"] > [data-lfk="px"] input) {
  background: var(--sk-ctl) !important; border: var(--sk-ctl-line) !important; border-radius: var(--sk-ctl-radius) !important;
}
html.dark:is(.tarot-theme, .arcana-theme, .minimal-theme, .focus-theme, .blueprint-theme, .mono-theme, .aureus-theme, .bagdaddy-theme, .phantom-theme, .crystal-theme) .lf-mkt.on {
  background: var(--sk-sel) !important; color: var(--sk-sel-ink) !important;
}
/* labels in the skin's label colour (Focus amber, Tarot/Arcana gold, Blueprint ink …) */
html.dark:is(.tarot-theme, .arcana-theme, .focus-theme, .blueprint-theme, .aureus-theme, .bagdaddy-theme, .crystal-theme) :is(.lf-avail .l, .lf-line .l) { color: var(--sk-label) !important; }
html.dark.blueprint-theme :is(.lf-avail .l, .lf-line .l) { font-family: "JetBrains Mono Variable", ui-monospace, monospace; text-transform: uppercase; letter-spacing: .04em; }

/* the big book price takes the skin's type; its up/down colour is never changed */
html.dark:is(.tarot-theme, .arcana-theme, .minimal-theme, .focus-theme, .blueprint-theme, .mono-theme, .aureus-theme, .phantom-theme, .crystal-theme) .orbit-shell div[class*="grid-cols-[minmax(0,1.15fr)_minmax(0,1fr)]"] .text-base.font-semibold.tabular-nums {
  font: var(--sk-price-font, inherit); text-shadow: var(--sk-price-shadow, none); letter-spacing: 0;
}
html.dark.crystal-theme .orbit-shell div[class*="grid-cols-[minmax(0,1.15fr)_minmax(0,1fr)]"] { text-shadow: 1px 1px 0 rgba(0, 0, 0, .6); }

/* ── 4 · small fixes that apply to every skin ──────────────────────────────────────────────────────────── */
/* the Paper badge outside Orbit: filled with the skin's accent, text in its ink */
html.dark:is(.tarot-theme, .arcana-theme, .focus-theme, .minimal-theme, .blueprint-theme, .mono-theme, .aureus-theme, .bagdaddy-theme, .phantom-theme, .crystal-theme) .orbit-paper-badge {
  border-color: color-mix(in srgb, var(--fill-brand-strong) 55%, transparent);
  background-color: var(--fill-brand-strong);
  color: var(--text-inverse-strong);
}
/* the Engine pill in the header follows the active skin's accent */
#lf-engine-btn { --lf-engine-accent: var(--fill-brand-strong, #d4a84b); }

/* ── 5 · the appearance menu (and other dropdowns) were capped at 256px (max-h-64) while the theme list is 518px:
   on a phone everything after BagDaddy (Phantom, Crystal, Classic, Dark/Light, layouts) sat hidden in an inner
   scroll with no hint. Let menus use the screen; fade the bottom edge when there is still more below. ── */
div[role="menu"][class*="max-h-64"] {
  max-height: min(80vh, 80dvh, 620px) !important;
  overscroll-behavior: contain;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 18px), rgba(0, 0, 0, .35));
          mask-image: linear-gradient(180deg, #000 calc(100% - 18px), rgba(0, 0, 0, .35));
}

/* ── 6 · Midnight (owner, 8 Nov): the Minimal slot becomes a midnight-black theme — near-black, a faint midnight-blue
   horizon, moonlight-silver accent. Minimal was the closest duplicate of the Orbit flat navy. The menu shows it as
   "Midnight" (relabelled by lf-engine.js). Trading colours unchanged. ── */
html.dark.minimal-theme {
  --bg-base: #030405; --bg-sunken: #000000; --bg-raised: #0a0b0f; --bg-overlay: #121420; --bg-alternate: #08090d;
  --text-strong: #f2f4f8; --text-weak: #8b93a7; --text-disabled: #4d5466;
  --text-brand: #b9c6ff; --bg-brand: #b9c6ff; --fill-brand-strong: #b9c6ff; --fill-brand-weak: #b9c6ff14;
  --fill-selected: #b9c6ff; --stroke-selected: #b9c6ff; --stroke-focus: #b9c6ff; --icon-brand: #b9c6ff;
  --stroke-weak: rgba(185, 198, 255, .1); --stroke-strong: rgba(185, 198, 255, .3);
  --stroke-brand-weak: rgba(185, 198, 255, .22); --stroke-brand-strong: #b9c6ffcc;
  --text-warning: #e7ecff; --text-info: #b9c6ff; --text-inverse-strong: #05060a;
  --sk-page: radial-gradient(120% 55% at 50% 0%, #0d1224 0%, #050609 45%, #030405 70%);
  --sk-frame: 1px solid rgba(185, 198, 255, .16); --sk-radius: 14px;
  --sk-shadow: inset 0 1px rgba(255, 255, 255, .04), 0 18px 44px rgba(0, 0, 0, .7);
  --sk-face: linear-gradient(180deg, #0a0c14 0%, #050609 100%);
  --sk-ctl: rgba(255, 255, 255, .03); --sk-ctl-line: 1px solid rgba(185, 198, 255, .12); --sk-ctl-radius: 10px;
  --sk-sel: #b9c6ff; --sk-sel-ink: #05060a; --sk-label: #8b93a7;
  --sk-price-font: 700 19px/1.1 system-ui, -apple-system, sans-serif; --sk-price-shadow: 0 0 14px rgba(185, 198, 255, .18);
}

/* ── 7 · Light mode (owner, 8 Nov: "choosing Light the screen almost shows nothing"). Our injected layers were built
   for dark only: bitunix.css keeps dark ink in --bx-* variables, lf-tradeform / lf-minibook / lf-bookview hardcode
   light-grey text (#eaecef), and chart-colors.js paints up-candles white. On a white page all of it vanished.
   Under html.light every one of those colours is re-pointed at the app's own light tokens. Dark is untouched. ── */
html.light {
  --bx-ink: #f2f3f5; --bx-ink-2: #e2e5ea; --bx-text: #14161a; --bx-text-dim: #6b707a;
  --lf-ask-fill: rgba(246, 70, 93, .14); --lf-bid-fill: rgba(46, 189, 133, .16);
}
/* bitunix.css fixed dark greys */
html.light input[data-size="default"]:focus { background: #ffffff !important; }
html.light div[class*="inline-flex"]:has(> button + button):not(:has(button[class*="rounded-full"])) > button[aria-pressed="true"],
html.light div[class*="items-center"][class*="justify-between"]:has(> button):has(> div > button) > div > button { background: #dfe2e8 !important; }
html.light div[class*="mb-2.5"][class*="flex"][class*="items-center"][class*="gap-1"] > button { background: rgba(0, 0, 0, .05) !important; }
html.light button[class*="rounded-full"][class*="py-2.5"]:hover { color: #000000 !important; }
html.light .bx-dot { background: #b8bcc4 !important; }

/* trade form (lf-tradeform.css) */
html.light [data-lfform="1"] > [data-lfk="oc"] { background: rgba(0, 0, 0, .05) !important; border-color: rgba(0, 0, 0, .08) !important; }
html.light :is([data-lfform="1"] > [data-lfk="lev"] button, .lf-otsel .cur, .lf-mkt, .lf-levstep) {
  background: rgba(0, 0, 0, .05) !important; color: var(--text-strong) !important;
}
html.light :is(.lf-avail .l, .lf-line .l, .lf-maxopen em) { color: var(--text-weak) !important; }
html.light :is(.lf-avail .v, .lf-line .v, .lf-otsel .menu button, [data-lfform="1"] > [data-lfk="amt"] > button, [data-lfform="1"] > [data-lfk="tif"] select) {
  color: var(--text-strong) !important;
}
html.light .lf-otsel .menu { background: #ffffff !important; border-color: rgba(0, 0, 0, .1) !important; box-shadow: 0 12px 30px rgba(0, 0, 0, .12); }
html.light .lf-otsel .menu button:hover { background: rgba(0, 0, 0, .05) !important; }
html.light [data-lfk="sl"] div[class*="rounded-32"][class*="bg-fill-weak"] { background: #dfe2e8 !important; }
html.light [data-lfk="sl"] div[class*="rounded-32"][class*="bg-fill-selected"] { background: #14161a !important; }
html.light [data-lfk="sl"] div[class*="rounded-full"][class*="border-2"] { border-color: #14161a !important; }
html.light :is([data-lfk="sl"] .bx-dot, .lf-stops i) { background: #b8bcc4 !important; }
html.light div:has(> div.text-base.font-semibold.tabular-nums):has(> div.text-3xs) > div.text-base { color: var(--text-strong) !important; }
html.light [role="dialog"]:has([role="group"]):has(h2) { background: #ffffff !important; }
html.light [role="dialog"]:has([role="group"]):has(h2)::before { background: rgba(0, 0, 0, .15) !important; }
html.light [role="dialog"] [role="group"] div[class*="rounded-32"][class*="bg-fill-weak"] { background: #dfe2e8 !important; }
html.light [role="dialog"] [role="group"] div[class*="bg-fill-selected"] { background: #14161a !important; }

/* order book (lf-minibook.css, lf-bookview.css): sizes and the mid price in dark ink; red/green prices kept */
html.light :is(button:has(> span.depth-bar-bid), button:has(> span.depth-bar-ask)) > span.text-fg-muted { color: var(--text-strong) !important; }
html.light [data-lfbook="1"] :is(.depth-bar-bid, .depth-bar-ask) + div > :not(:first-child) { color: var(--text-strong) !important; }
html.light :is([data-lfbook="1"] > div.grid.grid-cols-3, [data-lfbook="1"] span.tabular-nums.text-warning:not(.text-xl)) { color: var(--text-weak) !important; }
html.light [data-lfbook="1"] span.text-xl.font-bold.tabular-nums:not([data-lfdir]) { color: var(--text-strong) !important; }

/* Engine panel in light mode: the two pieces built on dark art keep their dark look so they stay readable —
   the stats card sits on the bull-vs-bear image, and the fighting bar is the battlefield original (dark by design). */
html.light #lf-engine-sheet .lfe-stats {
  --lfe-text: #eef3fc; --lfe-dim: rgba(238, 243, 252, .72); --lfe-line: rgba(255, 255, 255, .12);
  background: #0b0f19 !important;
}
html.light #lf-engine-sheet .lfe-bfx .bf-fight { background: linear-gradient(180deg, #0e1a3a, #0b1430) !important; border-color: rgba(255, 255, 255, .1) !important; }

/* ── 8 · Luna Light (owner, 8 Nov: "the light mode is too light, there is no edge in colours"). The app's light
   tokens put white panels on a white page with 4–10% hairlines, so nothing separated. Now: a grey canvas, white
   cards with a real border + soft shadow, darker ink, and the LunaFlow gold as the brand (it was a stray
   periwinkle). Trading red/green and the scope colours are untouched. Dark is untouched. §8 · Luna Light ── */
html.light {
  --bg-base: #eef0f4; --bg-sunken: #e6e9ee; --bg-raised: #ffffff; --bg-overlay: #ffffff; --bg-alternate: #f5f6f9;
  --text-strong: #0d1117; --text-weak: #4f5867; --text-disabled: #a3aab7;
  --stroke-weak: rgba(13, 17, 23, .12); --stroke-strong: rgba(13, 17, 23, .30); --fill-weak: rgba(13, 17, 23, .06);
  --fill-brand-strong: #c9962c; --fill-brand-weak: rgba(201, 150, 44, .13); --bg-brand: #c9962c;
  --text-brand: #8a6312; --icon-brand: #8a6312; --fill-selected: #c9962c; --stroke-selected: #c9962c; --stroke-focus: #c9962c;
  --stroke-brand-weak: rgba(201, 150, 44, .35); --stroke-brand-strong: #c9962c; --text-inverse-strong: #1a1204;
  --theme-card-bg: #ffffff; --theme-bg-secondary: #eef0f4; --theme-border: rgba(13, 17, 23, .12);
  --theme-text-primary: #0d1117; --theme-text-secondary: #4f5867;
}
html.light .orbit-arrive.bg-background, html.light .orbit-shell [class~="bg-background"] { background: #e9ecf1 !important; }
html.light [class~="bg-surface"] { background: #f6f7f9 !important; }
html.light .orbit-glass {
  background: #ffffff !important; border: 1px solid rgba(13, 17, 23, .14) !important;
  box-shadow: 0 1px 2px rgba(13, 17, 23, .06), 0 6px 18px rgba(13, 17, 23, .06) !important;
}
html.light .orbit-paper-badge { background: #d9a93c !important; border-color: #b8862a !important; color: #1a1204 !important; }
html.light #lf-engine-btn { color: #7a5510 !important; border-color: #c9962c !important; background: rgba(201, 150, 44, .14) !important; }