/* ======================================================================
   APP CANON — the dashboard's visual alignment with the cinematic site.
   Decision 2026-08-18 (founder + Codex council): do NOT restructure the
   dashboard. Zero subscription revenue, no dashboard complaints, the
   bottleneck is demand — a multi-day rewrite of a 5000-line live trading
   UI is the wrong trade. What IS justified: a returning visitor coming
   from the new cinematic landing must not land in a product that looks
   abandoned. So this file is a deliberate MINIMUM:

     - CSS only. No JS, no injected elements, no DOM/ids/classes touched.
     - No layout changes, no new components, no animation that costs the
       live pipelines a single frame (the accent rail is a static
       gradient, not a loop).
     - Light theme untouched: every rule is scoped away from
       body[data-qtheme="light"].

   Palette is the founder-approved "canon mix" (skin 8 of the review
   lab): rich navy grounds, cyan hairlines, a violet edge.

   Surfaces repainted here were chosen by MEASUREMENT, not by guessing —
   the dashboard paints most of its real estate with hardcoded values
   rather than the --q-s* tokens, so a token-only pass is invisible.
   Ranked by painted area in a sandboxed render of the real markup:
     .checkoutBox 2154kpx · .btSection 1270 · .qbkCard 702 · .card 472
     .lcChartWrap 456 · .btPlaceholder 451 · .appPanel 392 · .cpCapCard
     273 · .qbEquity 271 · .qSidebar 215 · .topbar · inputs
   ====================================================================== */

/* ---------------- palette ---------------- */
body[data-quantor-surface="app"]:not([data-qtheme="light"]){
  --qk-ground:linear-gradient(180deg,#05050B 0%,#091438 48%,#0A1845 100%);
  --qk-panel:rgba(14,22,54,.62);
  --qk-panel-2:rgba(19,30,72,.58);
  --qk-deep:rgba(7,11,32,.70);
  /* OPAQUE on purpose: below 640px .qSidebar is the off-canvas nav drawer
     that slides over the working area, and styles.css gave it a solid
     #060e1b→#040a14 plate. A translucent replacement would let the
     dashboard bleed through the open drawer on a phone.               */
  --qk-side:linear-gradient(180deg,#0A1845,#05050B);
  --qk-topbar:rgba(9,20,56,.60);
  --qk-input:rgba(15,25,64,.55);
  --qk-border:rgba(39,164,218,.34);
  --qk-border-soft:rgba(148,72,253,.22);
  --qk-accent:#27A4DA;
  --qk-radius:14px;
  --qk-glow:0 0 0 1px rgba(39,164,218,.10), 0 22px 58px rgba(0,0,0,.5);

  /* The ground rides the body itself — no injected layer, no JS.
     Deliberately NOT background-attachment:fixed: a fixed background on a
     scrolling document is repainted every frame, and this page is the one
     surface that must not lose frames.                                 */
  background:var(--qk-ground);

  /* the app's own token system, retargeted so everything token-driven
     follows along for free                                            */
  --q-s0:transparent;
  --q-s1-bg:var(--qk-panel);
  --q-s1-deep:var(--qk-deep);
  --q-s1-glass:var(--qk-panel);
  --q-s1-border:var(--qk-border);
  --q-s1-glass-border:var(--qk-border);
  --q-s1-divider:var(--qk-border-soft);
  --q-sidebar-bg:var(--qk-panel);
  --q-s2-bg:var(--qk-panel-2);
  --q-s2-border:var(--qk-border);
  --q-s2-border-hover:var(--qk-accent);
  --q-s3-bg:var(--qk-panel-2);
  --q-s3-border:var(--qk-border);
  --q-s3-bg-elev:var(--qk-panel);
  --q-s3-border-elev:var(--qk-border);
  --q-accent:var(--qk-accent);
}

/* ---------------- the surfaces that actually paint the page --------- */
body[data-quantor-surface="app"]:not([data-qtheme="light"]) .checkoutBox,
body[data-quantor-surface="app"]:not([data-qtheme="light"]) .btSection,
body[data-quantor-surface="app"]:not([data-qtheme="light"]) .qbkCard,
body[data-quantor-surface="app"]:not([data-qtheme="light"]) .card,
body[data-quantor-surface="app"]:not([data-qtheme="light"]) .appPanel,
body[data-quantor-surface="app"]:not([data-qtheme="light"]) .cpCapCard,
body[data-quantor-surface="app"]:not([data-qtheme="light"]) .qbEquity,
body[data-quantor-surface="app"]:not([data-qtheme="light"]) .consentBox,
body[data-quantor-surface="app"]:not([data-qtheme="light"]) .cpPanel{
  background:var(--qk-panel);
  border-color:var(--qk-border);
  border-radius:var(--qk-radius);
  box-shadow:var(--qk-glow);
}
body[data-quantor-surface="app"]:not([data-qtheme="light"]) .lcChartWrap,
body[data-quantor-surface="app"]:not([data-qtheme="light"]) .btPlaceholder,
body[data-quantor-surface="app"]:not([data-qtheme="light"]) .statusLine{
  background:var(--qk-deep);
  border-color:var(--qk-border-soft);
}
body[data-quantor-surface="app"]:not([data-qtheme="light"]) .qSidebar{
  background:var(--qk-side);
  border-color:var(--qk-border-soft);
}
/* The canon's cyan → violet edge, carried as the top 2px of the sticky
   topbar's own background. It deliberately does NOT live on body::before:
   styles.css already owns that pseudo-element as the ambient plate
   (z-index -8, bg-network.png, plus a brightness(.50) blur(.2px) filter),
   so claiming it would both delete that layer and inherit the stale
   filter. As a background layer there is no pseudo-element, no z-index,
   no fixed positioning and no per-frame repaint.                       */
body[data-quantor-surface="app"]:not([data-qtheme="light"]) .topbar{
  background:
    linear-gradient(90deg,
      rgba(39,164,218,0) 0%,#27A4DA 18%,#3576E8 45%,#6741F9 72%,#9448FD 88%,rgba(148,72,253,0) 100%)
      top left / 100% 2px no-repeat,
    var(--qk-topbar);
  border-bottom-color:var(--qk-border);
}
body[data-quantor-surface="app"]:not([data-qtheme="light"]) .input,
body[data-quantor-surface="app"]:not([data-qtheme="light"]) select.input,
body[data-quantor-surface="app"]:not([data-qtheme="light"]) textarea.input{
  background:var(--qk-input);
  border-color:var(--qk-border);
}