/* ============================================================
   Creator Portal — SPATIAL UI (glassmorphism / visionOS) layer.
   Loads AFTER creator-portal.css and re-skins every surface as
   frosted glass floating over an ambient backdrop the user fills.
   Built as a token override (.cp-spatial) + per-surface blur, so
   it rides on top of the existing structural CSS without touching it.
   ============================================================ */

/* ---------- 1 · GLASS TOKENS ---------- */
/* Re-points the warm-paper token set to a cool dark-glass palette.
   Light text, translucent surfaces, hairline highlights. Wins over
   [data-theme] rules via body-prefixed specificity + load order.    */
body.cp-spatial,
body.cp-spatial[data-theme="dark"],
body.cp-spatial[data-theme="light"] {
  --paper:     oklch(0.20 0.02 265);          /* dark — text ON light fills */
  --paper-2:   oklch(1 0 0 / .07);            /* faint inner glass tint     */
  --surface:   oklch(1 0 0 / .10);            /* card glass fill            */
  --ink:       oklch(0.985 0.006 250);        /* primary text + light fills */
  --ink-2:     oklch(0.93 0.01 250 / .82);    /* secondary text             */
  --muted:     oklch(0.90 0.01 250 / .60);    /* labels                     */
  --faint:     oklch(0.90 0.01 250 / .42);    /* faintest                   */
  --line:      oklch(1 0 0 / .14);            /* hairline                   */
  --line-2:    oklch(1 0 0 / .24);            /* stronger border            */
  --signal:    oklch(0.84 0.14 162);          /* brighter green for dark    */
  --signal-bg: oklch(0.72 0.13 162 / .20);
  --pending:    oklch(0.86 0.11 80);
  --pending-bg: oklch(0.78 0.12 80 / .18);
  --danger:     oklch(0.78 0.13 25);
  --danger-bg:  oklch(0.70 0.14 25 / .18);

  /* reusable glass recipe knobs */
  --glass-tint:   oklch(0.22 0.018 265 / .42);
  --glass-tint-2: oklch(0.16 0.016 265 / .55);
  --glass-blur:   blur(30px) saturate(1.55);
  --glass-edge:   inset 0 1px 0 oklch(1 0 0 / .22), inset 0 0 0 1px oklch(1 0 0 / .06);
  --glass-shadow: 0 28px 60px -30px oklch(0 0 0 / .65), 0 4px 14px -8px oklch(0 0 0 / .5);
  --radius-lg: 24px;
  --radius-md: 16px;
  color-scheme: dark;
}

body.cp-spatial {
  background: transparent;
  color: var(--ink);
}

/* ---------- 2 · AMBIENT BACKDROP ---------- */
.cp-ambient {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  /* default aurora — looks intentional before the user drops a photo */
  background:
    radial-gradient(120% 90% at 12% 8%,  oklch(0.55 0.16 300 / .85), transparent 55%),
    radial-gradient(120% 110% at 88% 18%, oklch(0.55 0.15 230 / .80), transparent 55%),
    radial-gradient(130% 120% at 70% 95%, oklch(0.52 0.13 190 / .75), transparent 55%),
    radial-gradient(120% 120% at 25% 90%, oklch(0.42 0.14 320 / .70), transparent 55%),
    linear-gradient(160deg, oklch(0.26 0.05 285), oklch(0.16 0.03 250));
}
.cp-ambient .cp-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* legibility scrim over whatever sits in the ambient */
.cp-ambient::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(140% 100% at 50% 0%, transparent 50%, oklch(0.10 0.02 265 / .22) 100%),
    linear-gradient(180deg, oklch(0.10 0.02 265 / .10), oklch(0.08 0.02 265 / .24));
}
/* ---------- 3 · DEMO BAR (top switcher) ---------- */
body.cp-spatial .demo-bar {
  background: oklch(0.14 0.018 265 / .55);
  backdrop-filter: blur(26px) saturate(1.5);
  -webkit-backdrop-filter: blur(26px) saturate(1.5);
  border-bottom: 1px solid oklch(1 0 0 / .12);
  box-shadow: 0 8px 30px -18px oklch(0 0 0 / .7);
}
body.cp-spatial .db-switch { background: oklch(1 0 0 / .08); }
body.cp-spatial .db-switch button.active {
  background: oklch(1 0 0 / .92);
  color: oklch(0.18 0.02 265);
  box-shadow: 0 2px 10px -4px oklch(0 0 0 / .5);
}
body.cp-spatial .db-brand .mark { background: oklch(1 0 0 / .95); color: oklch(0.18 0.02 265); }
.db-actions { display: flex; align-items: center; gap: 10px; }
.db-bg {
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 13px; border-radius: 9px; cursor: pointer;
  background: oklch(1 0 0 / .1); border: 1px solid oklch(1 0 0 / .14);
  color: oklch(1 0 0 / .92); font-family: var(--ff-sans);
  font-size: 12.5px; font-weight: 600; transition: background .16s, border-color .16s;
}
.db-bg svg { width: 16px; height: 16px; }
.db-bg:hover { background: oklch(1 0 0 / .18); border-color: oklch(1 0 0 / .3); }
body.cp-spatial .db-theme { background: oklch(1 0 0 / .1); color: oklch(1 0 0 / .92); }
body.cp-spatial .db-theme:hover { background: oklch(1 0 0 / .18); }
@media (max-width: 640px) { .db-bg span { display: none; } .db-bg { padding: 0; width: 36px; justify-content: center; } }

/* ---------- 4 · SHARED GLASS PANELS ---------- */
/* one consistent frosted treatment for every floating surface */
body.cp-spatial .cp-stat,
body.cp-spatial .cp-panel,
body.cp-spatial .cp-brief,
body.cp-spatial .cp-brief-card,
body.cp-spatial .cp-card-form,
body.cp-spatial .cp-table,
body.cp-spatial .cp-verif,
body.cp-spatial .cp-pub-stat,
body.cp-spatial .cp-rate-pub,
body.cp-spatial .cm-budget-row > div,
body.cp-spatial .cr-consents {
  background: var(--glass-tint);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid oklch(1 0 0 / .16);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-edge), var(--glass-shadow);
}
body.cp-spatial .cp-brief:hover,
body.cp-spatial .cp-brief-card:hover {
  border-color: oklch(1 0 0 / .34);
  box-shadow: var(--glass-edge), 0 36px 70px -28px oklch(0 0 0 / .7);
  transform: translateY(-2px);
}
body.cp-spatial .cp-stat:hover,
body.cp-spatial .cp-pub-stat:hover { border-color: oklch(1 0 0 / .26); }

/* ---------- 5 · APP SHELL: floating sidebar ---------- */
body.cp-spatial .cp-shell { background: transparent; }
body.cp-spatial .cp-side {
  margin: var(--chrome-inset) 0 var(--chrome-inset) var(--chrome-inset);
  /* sticky `top` inherits the base --chrome-inset so it anchors to the exact
     same vertical level as the topbar (both read --chrome-inset). */
  height: calc(100vh - var(--chrome-inset) * 2);
  border-radius: var(--radius-lg);
  border: 1px solid oklch(1 0 0 / .16);
  background: var(--glass-tint-2);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-edge), var(--glass-shadow);
}
body.cp-spatial .cp-side-brand .mark { background: oklch(1 0 0 / .95); color: oklch(0.18 0.02 265); }
body.cp-spatial .cp-nav a { color: var(--ink-2); }
body.cp-spatial .cp-nav a:hover { background: oklch(1 0 0 / .08); color: #fff; }
body.cp-spatial .cp-nav a.active {
  background: oklch(1 0 0 / .16);
  color: #fff;
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / .22);
}
body.cp-spatial .cp-nav a.active .ic { color: #fff; }
body.cp-spatial .cp-nav a .badge { background: var(--signal); color: oklch(0.16 0.04 162); }
body.cp-spatial .cp-nav a.active .badge { background: #fff; color: oklch(0.2 0.02 265); }
body.cp-spatial .cp-side-card {
  border-color: oklch(1 0 0 / .14);
  background: oklch(1 0 0 / .06);
  border-radius: var(--radius-md);
}

/* ---------- 6 · TOPBAR (floating frosted bar) ---------- */
body.cp-spatial .cp-top {
  margin: var(--chrome-inset) var(--chrome-inset) 0;
  border: 1px solid oklch(1 0 0 / .16);
  border-radius: var(--radius-md);
  background: oklch(0.18 0.018 265 / .5);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-edge), 0 20px 44px -28px oklch(0 0 0 / .6);
}
body.cp-spatial .cp-icon-btn {
  background: oklch(1 0 0 / .08);
  border-color: oklch(1 0 0 / .16);
  color: var(--ink-2);
}
/* Theme toggle is hidden inside the spatial portal/admin chrome.
   The spatial skin is intentionally dark-only — the [data-theme] token blocks
   at the top of this file resolve light & dark to the same glass palette, so a
   light/dark toggle here is a promise the UI can't keep: clicking it flips the
   <html data-theme> attribute but produces no visible change, which reads as a
   broken button. Hide it at the source on every cp-spatial surface (portal
   /app/* + admin /admin/*). The landing site keeps its own working toggle
   (.theme-btn / .mm-theme in style.css) — different selectors, untouched. */
body.cp-spatial .js-theme-toggle { display: none; }

/* Theme-toggle surface nuance — retained but inert while the toggle is hidden
   above. Only the button surface (.cp-icon-btn) is tinted; glass tokens intact. */
body.cp-spatial[data-theme="light"] .cp-icon-btn {
  background: oklch(1 0 0 / .14);
  border-color: oklch(1 0 0 / .22);
}
body.cp-spatial[data-theme="dark"] .cp-icon-btn {
  background: oklch(1 0 0 / .05);
  border-color: oklch(1 0 0 / .13);
}
body.cp-spatial .cp-icon-btn:hover { background: oklch(1 0 0 / .16); border-color: oklch(1 0 0 / .3); color: #fff; }
body.cp-spatial .cp-icon-btn .dot { border-color: transparent; }

/* mobile sub-tabs */
body.cp-spatial .cp-mob-tabs button,
body.cp-spatial .cp-mob-tabs a {
  background: oklch(1 0 0 / .08);
  border-color: oklch(1 0 0 / .16);
  color: var(--ink-2);
}
body.cp-spatial .cp-mob-tabs button.active,
body.cp-spatial .cp-mob-tabs a.active { background: oklch(1 0 0 / .92); color: oklch(0.18 0.02 265); border-color: transparent; }

/* ---------- 7 · STAT / VERIF / PANELS internals ---------- */
body.cp-spatial .cp-verif.ok { background: oklch(0.6 0.12 162 / .18); border-color: oklch(0.7 0.12 162 / .4); }
body.cp-spatial .cp-verif.pend { background: oklch(0.7 0.1 80 / .16); border-color: oklch(0.78 0.12 80 / .4); }
body.cp-spatial .cp-verif .vic { background: oklch(1 0 0 / .1); }
body.cp-spatial .cp-progress { background: oklch(1 0 0 / .1); }
body.cp-spatial .cp-payrow,
body.cp-spatial .cp-toggle,
body.cp-spatial .cp-tr,
body.cp-spatial .cp-review-row,
body.cp-spatial .cp-login-alt,
body.cp-spatial .cm-stepper li,
body.cp-spatial .cp-check li { border-color: oklch(1 0 0 / .1); }
body.cp-spatial .cp-tr.head { background: oklch(1 0 0 / .05); }
body.cp-spatial .cp-review-row:hover,
body.cp-spatial .cp-tr:not(.head):hover { background: oklch(1 0 0 / .05); }
body.cp-spatial .cp-check .box { border-color: oklch(1 0 0 / .22); }
body.cp-spatial .cp-brief .blogo,
body.cp-spatial .cm-logo,
body.cp-spatial .ni-ic { background: oklch(1 0 0 / .1); border-color: oklch(1 0 0 / .16); color: #fff; }

/* ---------- 8 · TABS / FILTER PILLS ---------- */
body.cp-spatial .cp-tabs {
  background: oklch(1 0 0 / .06);
  border-color: oklch(1 0 0 / .14);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
body.cp-spatial .cp-tabs button { color: var(--ink-2); }
body.cp-spatial .cp-tabs button:hover { color: #fff; }
body.cp-spatial .cp-tabs button.active {
  background: oklch(1 0 0 / .92);
  color: oklch(0.18 0.02 265);
  box-shadow: 0 2px 10px -4px oklch(0 0 0 / .5);
}

/* ---------- 9 · BUTTONS ---------- */
body.cp-spatial .cp-btn-pri,
body.cp-spatial .ct-submit {
  background: oklch(1 0 0 / .95);
  color: oklch(0.16 0.02 265);
  box-shadow: 0 8px 22px -12px oklch(0 0 0 / .7);
}
body.cp-spatial .cp-btn-pri:hover,
body.cp-spatial .ct-submit:hover { background: #fff; box-shadow: 0 14px 30px -12px oklch(0 0 0 / .7); }
body.cp-spatial .cp-btn-ghost {
  background: oklch(1 0 0 / .08);
  color: var(--ink);
  border-color: oklch(1 0 0 / .22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
body.cp-spatial .cp-btn-ghost:hover { background: oklch(1 0 0 / .16); border-color: oklch(1 0 0 / .4); color: #fff; }
body.cp-spatial .cp-btn-ok { background: var(--signal); color: oklch(0.15 0.05 162); }
body.cp-spatial .cp-btn-rej { color: var(--danger); border-color: oklch(0.7 0.13 25 / .45); background: oklch(0.7 0.14 25 / .08); }
body.cp-spatial .cp-btn-rej:hover { background: oklch(0.7 0.14 25 / .18); }

/* ---------- 10 · INPUTS / SELECTS / CHIPS ---------- */
body.cp-spatial .ct-input,
body.cp-spatial .cp-sel,
body.cp-spatial .cp-find input,
body.cp-spatial .cp-rate .inp {
  background: oklch(1 0 0 / .08);
  border-color: oklch(1 0 0 / .18);
  color: var(--ink);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body.cp-spatial .ct-input::placeholder { color: var(--faint); }
/* Keep the frosted bg on hover and freeze any autofill background paint so
   Chrome's white preview box can never flash in over the glass inputs. */
body.cp-spatial .ct-input:hover,
body.cp-spatial .cp-sel:hover,
body.cp-spatial .cp-find input:hover {
  background: oklch(1 0 0 / .08) !important;
  transition: border-color .18s, background-color 100000s 0s !important;
}
/* ROOT CAUSE of the "white box on hover": the register form reuses the
   .ct-row/.ct-field table classes, so the light-theme comparison-table rule
   `.ct-row:hover > div { background: oklch(0.97 0.006 80) }` (creator-portal.css)
   bleeds in and paints opaque near-white boxes over the field WRAPPERS on hover.
   Not autofill, not the input — the .ct-field wrapper. Keep wrappers transparent
   so the glass inputs show through. (Recommendation: stop reusing .ct-* table
   classes for the form — give it its own .reg-row/.reg-field names.) */
body.cp-spatial .ct-form .ct-row:not(.ct-head):not(.ct-verdict):hover > div { background: transparent; }
body.cp-spatial .ct-input:focus,
body.cp-spatial .cp-sel:focus,
body.cp-spatial .cp-find input:focus { border-color: oklch(1 0 0 / .5); background: oklch(1 0 0 / .12); }
body.cp-spatial .cp-rate { border-color: oklch(1 0 0 / .12); }
body.cp-spatial .cp-rate .inp input { color: var(--ink); }
/* Native <option> popups need explicit colors — the glass theme can't style
   them, so without this they inherit the OS default (often dark-on-dark =
   unreadable). Covers EVERY portal select: .cp-sel (auth/register networks),
   select.cp-input (brief modal status), and select.ct-input (the profil
   platform network picker, which reuses the .ct-input class). */
body.cp-spatial .cp-sel option,
body.cp-spatial select.cp-input option,
body.cp-spatial select.ct-input option { background: oklch(0.2 0.02 265); color: #fff; }

/* Brief allocation list on the glass theme. */
body.cp-spatial .cp-alloc-list { border-color: oklch(1 0 0 / .14); background: oklch(1 0 0 / .04); }
body.cp-spatial .cp-alloc-item:hover { background: oklch(1 0 0 / .07); }
body.cp-spatial .cp-alloc-nm { color: var(--ink); }
body.cp-spatial .cp-alloc-ni { color: var(--ink-2); }

/* Brief logo controls on the glass theme. */
body.cp-spatial .cp-logo-preview { border-color: oklch(1 0 0 / .18); background: oklch(1 0 0 / .06); }
body.cp-spatial .cp-logo-ph { color: var(--ink-2); }

/* ---- Autofill: keep the glass look, never let Chrome's pale fill show through.
   The inset box-shadow MUST be opaque — a translucent one (e.g. /.55) lets
   Chrome's pale autofill background bleed through as a white box, including the
   hover/preview state. One opaque dark tone for every autofill pseudo. Each
   pseudo gets its OWN rule so an unknown one can't invalidate the whole list. */
body.cp-spatial input:-webkit-autofill,
body.cp-spatial input:-webkit-autofill:hover,
body.cp-spatial input:-webkit-autofill:focus,
body.cp-spatial input:-webkit-autofill:active,
body.cp-spatial textarea:-webkit-autofill,
body.cp-spatial textarea:-webkit-autofill:hover,
body.cp-spatial textarea:-webkit-autofill:focus,
body.cp-spatial select:-webkit-autofill,
body.cp-spatial select:-webkit-autofill:hover,
body.cp-spatial select:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink) !important;
  caret-color: var(--ink) !important;
  -webkit-box-shadow: 0 0 0 1000px oklch(0.23 0.02 265) inset !important;
  box-shadow: 0 0 0 1000px oklch(0.23 0.02 265) inset !important;
  border-color: oklch(1 0 0 / .18) !important;
  transition: background-color 100000s 0s, color 100000s 0s !important;
}
body.cp-spatial input:-webkit-autofill:focus { border-color: oklch(1 0 0 / .5) !important; }

/* Standard :autofill pseudo (modern Chrome / Safari) — own rule. */
body.cp-spatial input:autofill,
body.cp-spatial textarea:autofill,
body.cp-spatial select:autofill {
  -webkit-text-fill-color: var(--ink) !important;
  caret-color: var(--ink) !important;
  -webkit-box-shadow: 0 0 0 1000px oklch(0.23 0.02 265) inset !important;
  box-shadow: 0 0 0 1000px oklch(0.23 0.02 265) inset !important;
  border-color: oklch(1 0 0 / .18) !important;
  transition: background-color 100000s 0s, color 100000s 0s !important;
}

/* Chrome's preview/selected state (hovering an empty field Chrome can fill) —
   this is the one that flashed the pale box. Own rule, opaque fill. */
body.cp-spatial input:-internal-autofill-previewed,
body.cp-spatial input:-internal-autofill-selected,
body.cp-spatial textarea:-internal-autofill-previewed,
body.cp-spatial textarea:-internal-autofill-selected,
body.cp-spatial select:-internal-autofill-previewed,
body.cp-spatial select:-internal-autofill-selected {
  -webkit-text-fill-color: var(--ink) !important;
  caret-color: var(--ink) !important;
  -webkit-box-shadow: 0 0 0 1000px oklch(0.23 0.02 265) inset !important;
  box-shadow: 0 0 0 1000px oklch(0.23 0.02 265) inset !important;
  border-color: oklch(1 0 0 / .18) !important;
  transition: background-color 100000s 0s, color 100000s 0s !important;
}

/* service / niche chips */
body.cp-spatial .ct-svc span { border-color: oklch(1 0 0 / .2); color: var(--ink-2); }
body.cp-spatial .ct-svc label:hover span { border-color: oklch(1 0 0 / .4); color: #fff; }
body.cp-spatial .ct-svc input:checked + span { background: oklch(1 0 0 / .92); color: oklch(0.18 0.02 265); border-color: transparent; }

/* pricing mode segmented control */
body.cp-spatial .cp-price-modes span { border-color: oklch(1 0 0 / .2); }
body.cp-spatial .cp-price-modes label:hover span { border-color: oklch(1 0 0 / .4); }
body.cp-spatial .cp-price-modes input:checked + span {
  border-color: oklch(1 0 0 / .5);
  background: oklch(1 0 0 / .1);
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / .35);
}
body.cp-spatial .cp-price-note { border-color: oklch(1 0 0 / .2); }

/* toggles */
body.cp-spatial .cp-toggle i { background: oklch(1 0 0 / .18); }
body.cp-spatial .cp-toggle input:checked + i { background: var(--signal); }

/* ---------- 11 · STATUS PILLS / TAGS / BADGES ---------- */
body.cp-spatial .cp-status--new { color: var(--signal); background: var(--signal-bg); }
body.cp-spatial .cp-status--active { color: #fff; background: oklch(1 0 0 / .12); }
body.cp-spatial .cp-status--done { color: var(--muted); background: oklch(1 0 0 / .08); }
body.cp-spatial .cp-status--rej { color: var(--danger); background: var(--danger-bg); }
body.cp-spatial .cp-verbadge { color: var(--signal); background: var(--signal-bg); border-color: oklch(0.7 0.12 162 / .4); }
body.cp-spatial .cp-verbadge.pend { color: var(--pending); background: var(--pending-bg); border-color: oklch(0.78 0.12 80 / .4); }

/* ---------- 12 · AUTH SCREENS (floating glass slab) ---------- */
body.cp-spatial .cp-auth {
  min-height: auto;
  max-width: 1180px;
  margin: clamp(18px, 4vh, 44px) auto;
  border-radius: 30px;
  overflow: hidden;
  border: 1px solid oklch(1 0 0 / .18);
  box-shadow: var(--glass-edge), 0 60px 120px -50px oklch(0 0 0 / .75);
}
@media (max-width: 900px) {
  body.cp-spatial .cp-auth { margin: 14px; border-radius: 24px; }
}
body.cp-spatial .cp-auth-aside {
  background: oklch(0.14 0.02 280 / .5);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-right: 1px solid oklch(1 0 0 / .12);
}
body.cp-spatial .cp-auth-aside h1 em { color: oklch(1 0 0 / .5); }
body.cp-spatial .cp-auth-aside .ic { background: oklch(1 0 0 / .12); }
body.cp-spatial .cp-auth-main {
  /* More opaque than the showcase areas: the form must stay legible regardless of
     how bright the ambient photo is behind it (a bright sky was bleeding through the
     translucent inputs). The mountain still reads around the card + through the aside. */
  background: oklch(0.17 0.018 265 / .72);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
body.cp-spatial .cp-fset-h .n { background: oklch(1 0 0 / .92); color: oklch(0.18 0.02 265); }
body.cp-spatial .cp-done .seal { background: var(--signal-bg); color: var(--signal); border-color: oklch(0.7 0.12 162 / .45); }
body.cp-spatial .cp-done-steps .ord { border-color: oklch(1 0 0 / .22); color: var(--muted); }
body.cp-spatial .cr-consent a { color: #fff; }

/* ---------- 13 · DRAWERS ---------- */
body.cp-spatial .cp-drawer.open .cp-drawer-scrim { background: oklch(0.08 0.02 265 / .55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
body.cp-spatial .cp-drawer-panel {
  background: oklch(0.17 0.018 265 / .72);
  backdrop-filter: blur(40px) saturate(1.6);
  -webkit-backdrop-filter: blur(40px) saturate(1.6);
  border-left: 1px solid oklch(1 0 0 / .16);
  box-shadow: -40px 0 100px -50px oklch(0 0 0 / .8), var(--glass-edge);
}
body.cp-spatial .cp-drawer-top,
body.cp-spatial .cp-drawer-foot { border-color: oklch(1 0 0 / .12); }
body.cp-spatial .cp-drawer-foot { background: oklch(1 0 0 / .04); }
body.cp-spatial .rv-acc,
body.cp-spatial .cm-deliv-row,
body.cp-spatial .al-row { background: oklch(1 0 0 / .06); border-color: oklch(1 0 0 / .14); }
body.cp-spatial .cm-deliv-row.done { background: oklch(0.6 0.12 162 / .14); border-color: oklch(0.7 0.12 162 / .35); }
body.cp-spatial .al-row:has(input:checked) { background: oklch(0.6 0.12 162 / .14); border-color: var(--signal); }
body.cp-spatial .rv-pill { border-color: oklch(1 0 0 / .2); color: var(--ink-2); }
body.cp-spatial .rv-pill.ok { color: var(--signal); background: var(--signal-bg); border-color: oklch(0.7 0.12 162 / .35); }
body.cp-spatial .cm-note { background: oklch(1 0 0 / .05); border-color: oklch(1 0 0 / .12); }
body.cp-spatial .cm-stepper .dot { background: oklch(0.2 0.02 265 / .6); border-color: oklch(1 0 0 / .2); color: var(--muted); }
body.cp-spatial .cm-stepper li.done .dot,
body.cp-spatial .cm-stepper li.current .dot { border-color: var(--signal); }
body.cp-spatial .cm-stepper li.done .dot { background: var(--signal); color: oklch(0.15 0.05 162); }
body.cp-spatial .cm-deliv-check { background: oklch(1 0 0 / .08); border-color: oklch(1 0 0 / .18); }
body.cp-spatial .cm-deliv-up { background: oklch(1 0 0 / .08); border-color: oklch(1 0 0 / .2); color: #fff; }

/* ---------- 14 · NOTIFICATIONS DROPDOWN ---------- */
body.cp-spatial .cp-notif {
  background: oklch(0.17 0.018 265 / .8);
  backdrop-filter: blur(34px) saturate(1.6);
  -webkit-backdrop-filter: blur(34px) saturate(1.6);
  border-color: oklch(1 0 0 / .16);
  box-shadow: 0 40px 80px -34px oklch(0 0 0 / .8), var(--glass-edge);
}
body.cp-spatial .cp-notif-h,
body.cp-spatial .cp-notif-item,
body.cp-spatial .cp-notif-foot { border-color: oklch(1 0 0 / .1); }
body.cp-spatial .cp-notif-item.unread { background: oklch(0.6 0.12 162 / .12); }
body.cp-spatial .cp-notif-foot:hover { background: oklch(1 0 0 / .06); }

/* ---------- 15 · PUBLIC PROFILE ---------- */
body.cp-spatial .cp-public { color: var(--ink); }
body.cp-spatial .cp-pub-head { border-color: oklch(1 0 0 / .14); }
body.cp-spatial .cp-pub-av { background: oklch(1 0 0 / .12); color: #fff; }

/* ---------- 16 · AVATARS / MARKS (image-slot + initials) ----------
   Glass treatment for the initials/photo avatar chips that the DARK skin
   originally re-tinted (drawer / admin table / admin side-card / review row).
   These were .rv-av / .cp-cr-av / .al-row .av / .cp-side-card .av — now the
   .cp-ava primitive with --lg/--sm/--md/--rounded. The brief-logo (--soft) and
   alloc (--xs) avatars were intentionally NOT re-tinted in dark (they keep the
   base ink/paper fill = light-on-dark), so they stay excluded here. */
body.cp-spatial .cp-ava--lg,
body.cp-spatial .cp-ava--sm,
body.cp-spatial .cp-ava--md,
body.cp-spatial .cp-ava--rounded {
  background: oklch(1 0 0 / .14);
  color: #fff;
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / .12);
}
body.cp-spatial image-slot { box-shadow: inset 0 0 0 1px oklch(1 0 0 / .14); }
body.cp-spatial .cp-gallery .add-slot { border-color: oklch(1 0 0 / .25); color: var(--muted); }
body.cp-spatial .cp-gallery .add-slot:hover { border-color: oklch(1 0 0 / .5); color: #fff; }

/* ---------- 18 · SCROLLBARS ---------- */
body.cp-spatial *::-webkit-scrollbar { width: 10px; height: 10px; }
body.cp-spatial *::-webkit-scrollbar-thumb { background: oklch(1 0 0 / .18); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
body.cp-spatial *::-webkit-scrollbar-thumb:hover { background: oklch(1 0 0 / .3); background-clip: padding-box; }
body.cp-spatial *::-webkit-scrollbar-track { background: transparent; }

/* ---------- 19 · MISC TEXT FIXES ---------- */
body.cp-spatial ::selection { background: oklch(1 0 0 / .25); color: #fff; }
body.cp-spatial .cp-sec-h .more { color: var(--muted); }
body.cp-spatial .cp-sec-h .more:hover { color: #fff; }
body.cp-spatial .cp-pub-back:hover,
body.cp-spatial .cp-login-forgot { color: var(--signal); }
body.cp-spatial .cp-login-alt a { color: #fff; }
body.cp-spatial .cp-empty-row { color: var(--muted); }

/* ---------- 22 · DARK MODE: deeper scrim, mountains still visible ---------- */
/* light (default) = current look. dark = much moodier, photo still reads. */
[data-theme="dark"] .cp-ambient::after {
  background:
    radial-gradient(140% 100% at 50% 0%, oklch(0.10 0.02 265 / .15) 30%, oklch(0.07 0.02 265 / .45) 100%),
    linear-gradient(180deg, oklch(0.08 0.02 265 / .34), oklch(0.05 0.015 265 / .50));
}
[data-theme="dark"] .cp-ambient { filter: brightness(.85) saturate(.95); }
[data-theme="dark"] body.cp-spatial {
  --glass-tint:   oklch(0.16 0.016 265 / .50);
  --glass-tint-2: oklch(0.12 0.014 265 / .62);
}
[data-theme="dark"] body.cp-spatial .cp-top { background: oklch(0.13 0.014 265 / .58); }
[data-theme="dark"] body.cp-spatial .demo-bar { background: oklch(0.10 0.014 265 / .62); }

/* ---------- 23 · MOBILE POLISH (glass on phones) ---------- */
@media (max-width: 820px) {
  /* prototype switcher bar: let it scroll instead of squashing */
  body.cp-spatial .demo-bar {
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  body.cp-spatial .demo-bar::-webkit-scrollbar { display: none; }
  body.cp-spatial .db-brand .db-sep { display: none; }      /* keep just the logo */
  body.cp-spatial .db-switch { margin-left: 0; flex: none; }
  body.cp-spatial .db-actions { flex: none; }

  /* tighter floating margins so glass uses the width */
  body.cp-spatial .cp-top { margin: 10px 10px 0; }
  body.cp-spatial .cp-auth { margin: 10px; border-radius: 20px; }
}

@media (max-width: 600px) {
  /* registration / login hero: trim it so the form is reachable fast */
  body.cp-spatial .cp-auth-aside { padding: 22px 20px; }
  body.cp-spatial .cp-auth-aside h1 { font-size: clamp(26px, 8vw, 34px); }
  body.cp-spatial .cp-auth-aside .lead { font-size: 14px; }
  body.cp-spatial .cp-auth-main { padding: 22px 18px 30px; }

  /* accordion steps: a touch more compact */
  body.cp-spatial .cp-acc .cp-fset-h { padding: 14px 15px; }
  body.cp-spatial .cp-acc .cp-fset-inner { padding: 2px 15px 16px; }
  body.cp-spatial .cp-acc-done { padding: 3px 8px; }

  /* public profile + app cards: reduce big radii so they breathe */
  body.cp-spatial .cp-stat,
  body.cp-spatial .cp-brief,
  body.cp-spatial .cp-panel { border-radius: 18px; }

  /* niche/content chips: easier tap targets */
  body.cp-spatial .ct-svc span { padding: 9px 13px; }
}

/* ---------- 21 · TM WORDMARK LOGO ---------- */
.tm-logo { height: 17px; width: auto; display: inline-block; vertical-align: middle; }
body.cp-spatial .db-brand,
body.cp-spatial .cp-side-brand { display: flex; align-items: center; gap: 10px; }
.db-sep { position: relative; padding-left: 11px; font-weight: 600; }
.db-sep::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 15px; background: oklch(1 0 0 / .26);
}
body.cp-spatial .cp-side-brand .tm-logo { height: 16px; }

/* ---------- 20 · REGISTRATION ACCORDION (steps 1·2·3·4) ---------- */
body.cp-spatial .cp-acc .cp-fset {
  margin: 18px 0 0;
  border: 1px solid oklch(1 0 0 / .12);
  border-radius: var(--radius-md);
  background: oklch(1 0 0 / .04);
  padding: 0;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
body.cp-spatial .cp-acc .cp-fset.open {
  border-color: oklch(1 0 0 / .26);
  background: oklch(1 0 0 / .07);
  box-shadow: 0 18px 40px -28px oklch(0 0 0 / .6);
}
body.cp-spatial .cp-acc .cp-fset-h {
  display: flex; align-items: center; gap: 12px;
  margin: 0; padding: 16px 18px; cursor: pointer; user-select: none;
  border-radius: var(--radius-md);
}
body.cp-spatial .cp-acc .cp-fset-h h3 { margin: 0; }
body.cp-spatial .cp-acc .cp-fset-h:hover { background: oklch(1 0 0 / .03); }
body.cp-spatial .cp-acc .cp-fset.done .cp-fset-h .n {
  background: var(--signal); color: oklch(0.15 0.05 162); font-size: 0;
}
body.cp-spatial .cp-acc .cp-fset.done .cp-fset-h .n::after { content: "✓"; font-size: 12px; }

.cp-acc-edit { font-family: var(--ff-mono); font-size: 11px; letter-spacing: .04em; color: var(--muted); }
body.cp-spatial .cp-acc .cp-fset:not(.done) .cp-acc-edit { display: none; }
body.cp-spatial .cp-acc .cp-fset.done .cp-acc-edit { margin-left: 0; }

/* green "✓ Gata" badge on completed steps */
.cp-acc-done {
  display: none; align-items: center; gap: 5px;
  font-family: var(--ff-mono); font-size: 11px; font-weight: 600; letter-spacing: .04em;
  padding: 4px 10px 4px 8px; border-radius: 100px;
  color: var(--signal); background: var(--signal-bg);
  border: 1px solid oklch(0.7 0.12 162 / .45);
}
.cp-acc-done svg { width: 13px; height: 13px; }
body.cp-spatial .cp-acc .cp-fset.done .cp-acc-done { display: inline-flex; margin-left: auto; }

.cp-acc-chev { display: grid; place-items: center; width: 22px; height: 22px; color: var(--muted); flex: none; margin-left: auto; transition: transform .3s ease; }
body.cp-spatial .cp-acc .cp-fset.done .cp-acc-chev { margin-left: 8px; }
.cp-acc-chev svg { width: 16px; height: 16px; }
body.cp-spatial .cp-acc .cp-fset.open .cp-acc-chev { transform: rotate(180deg); color: #fff; }

body.cp-spatial .cp-acc .cp-fset-body { display: none; }
body.cp-spatial .cp-acc .cp-fset.open .cp-fset-body { display: block; }
@media (prefers-reduced-motion: no-preference) {
  body.cp-spatial .cp-acc .cp-fset.open .cp-fset-body { animation: cpAccIn .32s cubic-bezier(.2,.8,.2,1) both; }
  @keyframes cpAccIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
}
.cp-acc .cp-fset-inner { display: flex; flex-direction: column; gap: 16px; padding: 4px 18px 18px; }
.cp-acc-nav { margin-top: 2px; }
.cp-acc-next { align-self: flex-start; }

/* GDPR + submit revealed only after the last step */
body.cp-spatial .cp-acc .cp-acc-tail { display: none; }
.cp-nisa-other { margin-top: 8px; }
body.cp-spatial .cp-acc.cp-acc-complete .cr-consents.cp-acc-tail { display: flex; }
body.cp-spatial .cp-acc.cp-acc-complete .ct-submit.cp-acc-tail { display: inline-flex; }
@media (prefers-reduced-motion: no-preference) {
  body.cp-spatial .cp-acc.cp-acc-complete .cp-acc-tail { animation: cpAccIn .32s cubic-bezier(.2,.8,.2,1) both; }
}

/* ---------- photo image-slot: legible placeholder on dark glass ---------- */
/* The component defaults to dark text (rgba(0,0,0,.55)) which vanishes on the
   spatial backdrop. Outer host styles win over the shadow :host rule, and the
   empty-state cap/sub inherit color — so this lifts the whole "Foto / browse
   files" caption to a readable light tone. ::part(empty) bumps the icon too. */
body.cp-spatial image-slot.cp-av,
body.cp-spatial image-slot.cp-pub-av {
  color: rgba(255, 255, 255, .82);
}
body.cp-spatial image-slot.cp-av::part(empty),
body.cp-spatial image-slot.cp-pub-av::part(empty) {
  color: rgba(255, 255, 255, .82);
}
body.cp-spatial image-slot.cp-av::part(ring),
body.cp-spatial image-slot.cp-pub-av::part(ring) {
  border-color: rgba(255, 255, 255, .38);
}

/* ============================================================================
   LIGHT THEME for the SPATIAL portal + admin (fix/light-theme)
   ----------------------------------------------------------------------------
   The spatial skin (above) is built dark-only: its token block resolves both
   [data-theme] values to the same dark glass, every per-surface rule hardcodes
   white translucency (oklch(1 0 0 / .xx)) which only reads on a dark backdrop,
   and the toggle is hidden because flipping it changed nothing.

   This block delivers a REAL light glass theme. Everything is scoped to
   body.cp-spatial[data-theme="light"] so DARK MODE IS UNTOUCHED. Loaded after
   creator-portal.css, so these overrides also beat the base light tokens.

   Approach:
   1. Re-point the glass token set to a light palette (white-translucent
      surfaces, near-black ink, dark hairlines).
   2. Re-tune the ambient backdrop + scrim so the floating glass reads on a
      bright atmosphere instead of a dark one.
   3. Override every per-surface rule that hardcoded white translucency, mapping
      it to a dark-tinted equivalent so borders/fills/hover stay visible on light.
   4. Un-hide the toggle (it now does something).

   Contrast: body text uses --ink (oklch ~0.24) on white-ish glass ⇒ >7:1;
   --ink-2 (~0.40) ⇒ ~4.8:1; --muted (~0.50) reserved for non-essential labels.
   ============================================================================ */

/* ---------- L0 · UN-HIDE THE TOGGLE (both themes) ----------
   It is meaningful now, so it must be reachable in light AND dark to switch
   back. Restores the .cp-icon-btn display the base rule (line ~210) removed. */
body.cp-spatial .js-theme-toggle { display: grid; }
/* Icon swap — the portal toggle (.cp-icon-btn) never had one (it was hidden),
   so both SVGs would stack. Show the MOON in light (= "go dark"), the SUN in
   dark (= "go light"), matching the .db-theme / .theme-btn convention. */
body.cp-spatial .js-theme-toggle .ic-sun { display: none; }
body.cp-spatial .js-theme-toggle .ic-moon { display: block; }
body.cp-spatial[data-theme="dark"] .js-theme-toggle .ic-moon { display: none; }
body.cp-spatial[data-theme="dark"] .js-theme-toggle .ic-sun { display: block; }

/* ---------- L1 · LIGHT GLASS TOKENS ----------
   Overrides the dark token block for the light theme only. Higher specificity
   ([data-theme="light"] is already in the base selector, but we re-declare to
   win source order) — appended last, so it wins regardless. */
body.cp-spatial[data-theme="light"] {
  --paper:     oklch(0.22 0.02 265);          /* dark — text ON light/ink fills */
  --paper-2:   oklch(0.22 0.02 265 / .05);    /* faint inner tint               */
  --surface:   oklch(1 0 0 / .42);            /* card glass fill (light) — clear, not white */
  --ink:       oklch(0.24 0.018 265);         /* primary text (near-black)      */
  --ink-2:     oklch(0.40 0.016 265);         /* secondary text  ~4.8:1         */
  --muted:     oklch(0.50 0.014 265);         /* labels                         */
  --faint:     oklch(0.58 0.012 265);         /* faintest readable              */
  --line:      oklch(0.24 0.02 265 / .14);    /* hairline (dark on light)       */
  --line-2:    oklch(0.24 0.02 265 / .24);    /* stronger border                */
  --signal:    oklch(0.52 0.11 162);          /* green that pops on light       */
  --signal-bg: oklch(0.70 0.10 162 / .18);
  --pending:    oklch(0.58 0.12 70);
  --pending-bg: oklch(0.74 0.12 70 / .20);
  --danger:     oklch(0.55 0.16 25);
  --danger-bg:  oklch(0.70 0.15 25 / .14);

  /* light glass recipe knobs — lower opacity = transparent glass over the bright
     photo (not a white wash); blur stays high so text over it keeps legible. */
  --glass-tint:   oklch(1 0 0 / .42);
  --glass-tint-2: oklch(1 0 0 / .48);
  --glass-blur:   blur(34px) saturate(1.4);
  --glass-edge:   inset 0 1px 0 oklch(1 0 0 / .65), inset 0 0 0 1px oklch(0.24 0.02 265 / .06);
  --glass-shadow: 0 28px 60px -30px oklch(0.30 0.04 265 / .28), 0 4px 14px -8px oklch(0.30 0.04 265 / .18);
  color-scheme: light;
}

body.cp-spatial[data-theme="light"] { color: var(--ink); }

/* ---------- L2 · AMBIENT BACKDROP (bright atmosphere) ----------
   The dark mountain photo is brightened to a soft daylight wash, the aurora
   fallback turns pastel, and the legibility scrim flips to a faint LIGHT wash
   so the white glass keeps separation without a dark overlay fighting it. */
body.cp-spatial[data-theme="light"] .cp-ambient {
  /* Neutral light backdrop — clean off-white with only a faint cool tint.
     The old aurora used hue 285/320 (purple/magenta) and read as PINK. */
  background:
    radial-gradient(120% 100% at 50% 0%, oklch(0.985 0.004 250 / .9), transparent 60%),
    linear-gradient(180deg, oklch(0.975 0.004 250), oklch(0.945 0.005 250));
}
/* Show the photo essentially as-is — a hair of lift, NO white wash. The old
   brightness(1.55) blew it toward white and read as a "white film". */
body.cp-spatial[data-theme="light"] .cp-ambient .cp-bg-img {
  filter: brightness(1.08) saturate(1.02);
}
body.cp-spatial[data-theme="light"] .cp-ambient::after {
  /* WEAK black veil (not white) — much lighter than dark mode's scrim. Keeps the
     photo clean but adds a touch of depth/legibility. Dark mode uses ~.10–.24;
     this stays ~.04–.12. */
  background:
    radial-gradient(140% 100% at 50% 0%, transparent 58%, oklch(0.15 0.02 265 / .10) 100%),
    linear-gradient(180deg, oklch(0.15 0.02 265 / .04), oklch(0.12 0.02 265 / .12));
}
/* ---------- L3 · DEMO BAR (top switcher) ---------- */
body.cp-spatial[data-theme="light"] .demo-bar {
  background: oklch(1 0 0 / .62);
  border-bottom: 1px solid oklch(0.24 0.02 265 / .10);
  box-shadow: 0 8px 30px -18px oklch(0.30 0.04 265 / .35);
}
body.cp-spatial[data-theme="light"] .db-brand,
body.cp-spatial[data-theme="light"] .db-brand .db-sep { color: var(--ink); }
body.cp-spatial[data-theme="light"] .db-sep::before { background: oklch(0.24 0.02 265 / .22); }
body.cp-spatial[data-theme="light"] .db-tag { background: oklch(0.24 0.02 265 / .08); color: var(--ink-2); }
body.cp-spatial[data-theme="light"] .db-switch { background: oklch(0.24 0.02 265 / .07); }
body.cp-spatial[data-theme="light"] .db-switch button { color: var(--ink-2); }
body.cp-spatial[data-theme="light"] .db-switch button:hover { color: var(--ink); }
body.cp-spatial[data-theme="light"] .db-switch button.active {
  background: oklch(0.22 0.02 265);
  color: oklch(0.99 0.004 250);
  box-shadow: 0 2px 10px -4px oklch(0.30 0.04 265 / .35);
}
body.cp-spatial[data-theme="light"] .db-brand .mark { background: oklch(0.22 0.02 265); color: oklch(0.99 0.004 250); }
body.cp-spatial[data-theme="light"] .db-bg {
  background: oklch(0.24 0.02 265 / .07);
  border-color: oklch(0.24 0.02 265 / .14);
  color: var(--ink);
}
body.cp-spatial[data-theme="light"] .db-bg:hover { background: oklch(0.24 0.02 265 / .12); border-color: oklch(0.24 0.02 265 / .26); }
body.cp-spatial[data-theme="light"] .db-theme { background: oklch(0.24 0.02 265 / .07); color: var(--ink); }
body.cp-spatial[data-theme="light"] .db-theme:hover { background: oklch(0.24 0.02 265 / .12); }

/* ---------- L4 · SHARED GLASS PANELS ---------- */
body.cp-spatial[data-theme="light"] .cp-stat,
body.cp-spatial[data-theme="light"] .cp-panel,
body.cp-spatial[data-theme="light"] .cp-brief,
body.cp-spatial[data-theme="light"] .cp-brief-card,
body.cp-spatial[data-theme="light"] .cp-card-form,
body.cp-spatial[data-theme="light"] .cp-table,
body.cp-spatial[data-theme="light"] .cp-verif,
body.cp-spatial[data-theme="light"] .cp-pub-stat,
body.cp-spatial[data-theme="light"] .cp-rate-pub,
body.cp-spatial[data-theme="light"] .cm-budget-row > div,
body.cp-spatial[data-theme="light"] .cr-consents,
body.cp-spatial[data-theme="light"] .cp-empty {
  background: var(--glass-tint);
  border: 1px solid oklch(0.24 0.02 265 / .10);
  box-shadow: var(--glass-edge), var(--glass-shadow);
}
body.cp-spatial[data-theme="light"] .cp-brief:hover,
body.cp-spatial[data-theme="light"] .cp-brief-card:hover {
  border-color: oklch(0.24 0.02 265 / .26);
  box-shadow: var(--glass-edge), 0 36px 70px -28px oklch(0.30 0.04 265 / .30);
}
body.cp-spatial[data-theme="light"] .cp-stat:hover,
body.cp-spatial[data-theme="light"] .cp-pub-stat:hover { border-color: oklch(0.24 0.02 265 / .20); }

/* ---------- L5 · APP SHELL: floating sidebar ---------- */
body.cp-spatial[data-theme="light"] .cp-side {
  border: 1px solid oklch(0.24 0.02 265 / .10);
  background: var(--glass-tint-2);
  box-shadow: var(--glass-edge), var(--glass-shadow);
}
body.cp-spatial[data-theme="light"] .cp-side-brand,
body.cp-spatial[data-theme="light"] .cp-side-brand .db-sep { color: var(--ink); }
body.cp-spatial[data-theme="light"] .cp-side-brand .mark { background: oklch(0.22 0.02 265); color: oklch(0.99 0.004 250); }
body.cp-spatial[data-theme="light"] .cp-nav a { color: var(--ink-2); }
body.cp-spatial[data-theme="light"] .cp-nav a .ic { color: var(--muted); }
body.cp-spatial[data-theme="light"] .cp-nav a:hover { background: oklch(0.24 0.02 265 / .06); color: var(--ink); }
body.cp-spatial[data-theme="light"] .cp-nav a:hover .ic { color: var(--ink); }
body.cp-spatial[data-theme="light"] .cp-nav a.active {
  background: oklch(0.22 0.02 265);
  color: oklch(0.99 0.004 250);
  box-shadow: inset 0 0 0 1px oklch(0.24 0.02 265 / .3);
}
body.cp-spatial[data-theme="light"] .cp-nav a.active .ic { color: oklch(0.99 0.004 250); }
body.cp-spatial[data-theme="light"] .cp-nav a .badge { background: var(--signal); color: #fff; }
body.cp-spatial[data-theme="light"] .cp-nav a.active .badge { background: oklch(0.99 0.004 250); color: var(--ink); }
body.cp-spatial[data-theme="light"] .cp-nav-admin,
body.cp-spatial[data-theme="light"] .cp-nav-admin .ic { color: var(--signal) !important; }
body.cp-spatial[data-theme="light"] .cp-side-card {
  border-color: oklch(0.24 0.02 265 / .12);
  background: oklch(1 0 0 / .38);
}

/* ---------- L6 · TOPBAR (floating frosted bar) ---------- */
body.cp-spatial[data-theme="light"] .cp-top {
  border: 1px solid oklch(0.24 0.02 265 / .10);
  background: oklch(1 0 0 / .46);
  box-shadow: var(--glass-edge), 0 20px 44px -28px oklch(0.30 0.04 265 / .25);
}
body.cp-spatial[data-theme="light"] .cp-top h1 { color: var(--ink); }
body.cp-spatial[data-theme="light"] .cp-icon-btn {
  background: oklch(0.24 0.02 265 / .06);
  border-color: oklch(0.24 0.02 265 / .14);
  color: var(--ink-2);
}
body.cp-spatial[data-theme="light"] .cp-icon-btn:hover { background: oklch(0.24 0.02 265 / .10); border-color: oklch(0.24 0.02 265 / .28); color: var(--ink); }
body.cp-spatial[data-theme="light"] .cp-icon-btn .dot { border-color: oklch(1 0 0 / .85); }
body.cp-spatial[data-theme="light"] .cp-mob-tabs button,
body.cp-spatial[data-theme="light"] .cp-mob-tabs a {
  background: oklch(0.24 0.02 265 / .06);
  border-color: oklch(0.24 0.02 265 / .14);
  color: var(--ink-2);
}
body.cp-spatial[data-theme="light"] .cp-mob-tabs button.active,
body.cp-spatial[data-theme="light"] .cp-mob-tabs a.active { background: oklch(0.22 0.02 265); color: oklch(0.99 0.004 250); border-color: transparent; }

/* ---------- L7 · STAT / VERIF / PANELS internals ---------- */
body.cp-spatial[data-theme="light"] .cp-stat .l,
body.cp-spatial[data-theme="light"] .cp-stat .d { color: var(--muted); }
body.cp-spatial[data-theme="light"] .cp-verif.ok { background: oklch(0.70 0.10 162 / .15); border-color: oklch(0.55 0.11 162 / .35); }
body.cp-spatial[data-theme="light"] .cp-verif.pend { background: oklch(0.74 0.12 70 / .16); border-color: oklch(0.58 0.12 70 / .38); }
body.cp-spatial[data-theme="light"] .cp-verif .vic { background: oklch(0.24 0.02 265 / .08); }
body.cp-spatial[data-theme="light"] .cp-progress { background: oklch(0.24 0.02 265 / .10); }
body.cp-spatial[data-theme="light"] .cp-payrow,
body.cp-spatial[data-theme="light"] .cp-toggle,
body.cp-spatial[data-theme="light"] .cp-tr,
body.cp-spatial[data-theme="light"] .cp-review-row,
body.cp-spatial[data-theme="light"] .cp-login-alt,
body.cp-spatial[data-theme="light"] .cm-stepper li,
body.cp-spatial[data-theme="light"] .cp-check li { border-color: oklch(0.24 0.02 265 / .10); }
body.cp-spatial[data-theme="light"] .cp-tr.head { background: oklch(0.24 0.02 265 / .04); }
body.cp-spatial[data-theme="light"] .cp-review-row:hover,
body.cp-spatial[data-theme="light"] .cp-tr:not(.head):hover { background: oklch(0.24 0.02 265 / .04); }
body.cp-spatial[data-theme="light"] .cp-check .box { border-color: oklch(0.24 0.02 265 / .24); }
body.cp-spatial[data-theme="light"] .cp-brief .blogo,
body.cp-spatial[data-theme="light"] .cp-brief-card .cb-logo,
body.cp-spatial[data-theme="light"] .cm-logo,
body.cp-spatial[data-theme="light"] .ni-ic { background: oklch(0.24 0.02 265 / .06); border-color: oklch(0.24 0.02 265 / .12); color: var(--ink); }

/* ---------- L8 · TABS / FILTER PILLS ---------- */
body.cp-spatial[data-theme="light"] .cp-tabs {
  background: oklch(1 0 0 / .50);
  border-color: oklch(0.24 0.02 265 / .12);
}
body.cp-spatial[data-theme="light"] .cp-tabs button { color: var(--ink-2); }
body.cp-spatial[data-theme="light"] .cp-tabs button:hover { color: var(--ink); }
body.cp-spatial[data-theme="light"] .cp-tabs button.active {
  background: oklch(1 0 0 / .92);
  color: var(--ink);
  box-shadow: 0 2px 10px -4px oklch(0.30 0.04 265 / .30);
}

/* ---------- L9 · BUTTONS ---------- */
body.cp-spatial[data-theme="light"] .cp-btn-pri,
body.cp-spatial[data-theme="light"] .ct-submit {
  background: oklch(0.22 0.02 265);
  color: oklch(0.99 0.004 250);
  box-shadow: 0 8px 22px -12px oklch(0.30 0.04 265 / .45);
}
body.cp-spatial[data-theme="light"] .cp-btn-pri:hover,
body.cp-spatial[data-theme="light"] .ct-submit:hover { background: oklch(0.16 0.02 265); box-shadow: 0 14px 30px -12px oklch(0.30 0.04 265 / .45); }
body.cp-spatial[data-theme="light"] .cp-btn-ghost {
  background: oklch(1 0 0 / .55);
  color: var(--ink);
  border-color: oklch(0.24 0.02 265 / .18);
}
body.cp-spatial[data-theme="light"] .cp-btn-ghost:hover { background: oklch(1 0 0 / .80); border-color: oklch(0.24 0.02 265 / .4); color: var(--ink); }
body.cp-spatial[data-theme="light"] .cp-btn-ok { background: var(--signal); color: #fff; }
body.cp-spatial[data-theme="light"] .cp-btn-rej { color: var(--danger); border-color: oklch(0.55 0.16 25 / .4); background: oklch(0.70 0.15 25 / .06); }
body.cp-spatial[data-theme="light"] .cp-btn-rej:hover { background: oklch(0.70 0.15 25 / .14); }

/* ---------- L10 · INPUTS / SELECTS / CHIPS ---------- */
body.cp-spatial[data-theme="light"] .ct-input,
body.cp-spatial[data-theme="light"] .cp-sel,
body.cp-spatial[data-theme="light"] .cp-input,
body.cp-spatial[data-theme="light"] .cp-find input,
body.cp-spatial[data-theme="light"] .cp-rate .inp {
  background: oklch(1 0 0 / .70);
  border-color: oklch(0.24 0.02 265 / .18);
  color: var(--ink);
}
body.cp-spatial[data-theme="light"] .ct-input::placeholder,
body.cp-spatial[data-theme="light"] .cp-input::placeholder { color: var(--faint); }
body.cp-spatial[data-theme="light"] .ct-input:hover,
body.cp-spatial[data-theme="light"] .cp-sel:hover,
body.cp-spatial[data-theme="light"] .cp-find input:hover {
  background: oklch(1 0 0 / .70) !important;
  transition: border-color .18s, background-color 100000s 0s !important;
}
body.cp-spatial[data-theme="light"] .ct-input:focus,
body.cp-spatial[data-theme="light"] .cp-sel:focus,
body.cp-spatial[data-theme="light"] .cp-input:focus,
body.cp-spatial[data-theme="light"] .cp-find input:focus { border-color: oklch(0.24 0.02 265 / .5); background: oklch(1 0 0 / .88); }
body.cp-spatial[data-theme="light"] .cp-rate { border-color: oklch(0.24 0.02 265 / .12); }
body.cp-spatial[data-theme="light"] .cp-rate .inp input { color: var(--ink); }
/* native option popups: dark-on-light, readable on the light theme. Same three
   select classes as the dark rule (.cp-sel / select.cp-input / select.ct-input
   — the profil platform network picker). */
body.cp-spatial[data-theme="light"] .cp-sel option,
body.cp-spatial[data-theme="light"] select.cp-input option,
body.cp-spatial[data-theme="light"] select.ct-input option { background: #fff; color: #111; }

/* autofill: keep the light glass, opaque pale fill */
body.cp-spatial[data-theme="light"] input:-webkit-autofill,
body.cp-spatial[data-theme="light"] input:-webkit-autofill:hover,
body.cp-spatial[data-theme="light"] input:-webkit-autofill:focus,
body.cp-spatial[data-theme="light"] textarea:-webkit-autofill,
body.cp-spatial[data-theme="light"] select:-webkit-autofill,
body.cp-spatial[data-theme="light"] input:autofill,
body.cp-spatial[data-theme="light"] textarea:autofill,
body.cp-spatial[data-theme="light"] select:autofill,
body.cp-spatial[data-theme="light"] input:-internal-autofill-previewed,
body.cp-spatial[data-theme="light"] input:-internal-autofill-selected {
  -webkit-text-fill-color: var(--ink) !important;
  caret-color: var(--ink) !important;
  -webkit-box-shadow: 0 0 0 1000px oklch(0.99 0.004 250) inset !important;
  box-shadow: 0 0 0 1000px oklch(0.99 0.004 250) inset !important;
  border-color: oklch(0.24 0.02 265 / .18) !important;
  transition: background-color 100000s 0s, color 100000s 0s !important;
}

/* service / niche chips */
body.cp-spatial[data-theme="light"] .ct-svc span { border-color: oklch(0.24 0.02 265 / .2); color: var(--ink-2); }
body.cp-spatial[data-theme="light"] .ct-svc label:hover span { border-color: oklch(0.24 0.02 265 / .4); color: var(--ink); }
body.cp-spatial[data-theme="light"] .ct-svc input:checked + span { background: oklch(0.22 0.02 265); color: oklch(0.99 0.004 250); border-color: transparent; }

/* pricing mode segmented control */
body.cp-spatial[data-theme="light"] .cp-price-modes span { border-color: oklch(0.24 0.02 265 / .2); }
body.cp-spatial[data-theme="light"] .cp-price-modes label:hover span { border-color: oklch(0.24 0.02 265 / .4); }
body.cp-spatial[data-theme="light"] .cp-price-modes input:checked + span {
  border-color: oklch(0.24 0.02 265 / .5);
  background: oklch(0.24 0.02 265 / .05);
  box-shadow: inset 0 0 0 1px oklch(0.24 0.02 265 / .35);
}
body.cp-spatial[data-theme="light"] .cp-price-note { border-color: oklch(0.24 0.02 265 / .2); }

/* toggles */
body.cp-spatial[data-theme="light"] .cp-toggle i { background: oklch(0.24 0.02 265 / .18); }
body.cp-spatial[data-theme="light"] .cp-toggle input:checked + i { background: var(--signal); }

/* ---------- L11 · STATUS PILLS / TAGS / BADGES ---------- */
body.cp-spatial[data-theme="light"] .cp-status--new { color: var(--signal); background: var(--signal-bg); }
body.cp-spatial[data-theme="light"] .cp-status--active { color: var(--ink); background: oklch(0.24 0.02 265 / .08); }
body.cp-spatial[data-theme="light"] .cp-status--done { color: var(--muted); background: oklch(0.24 0.02 265 / .06); }
body.cp-spatial[data-theme="light"] .cp-status--rej { color: var(--danger); background: var(--danger-bg); }
body.cp-spatial[data-theme="light"] .cp-verbadge { color: var(--signal); background: var(--signal-bg); border-color: oklch(0.55 0.11 162 / .4); }
body.cp-spatial[data-theme="light"] .cp-verbadge.pend { color: var(--pending); background: var(--pending-bg); border-color: oklch(0.58 0.12 70 / .4); }

/* ---------- L12 · AUTH SCREENS (floating glass slab) ---------- */
body.cp-spatial[data-theme="light"] .cp-auth {
  border: 1px solid oklch(0.24 0.02 265 / .12);
  box-shadow: var(--glass-edge), 0 60px 120px -50px oklch(0.30 0.04 265 / .35);
}
body.cp-spatial[data-theme="light"] .cp-auth-aside {
  background: oklch(0.22 0.02 280 / .92);
  border-right: 1px solid oklch(1 0 0 / .12);
}
/* the aside stays a deep slab for contrast against its own white-on-dark copy;
   the form half is the light glass surface */
body.cp-spatial[data-theme="light"] .cp-auth-main {
  background: oklch(1 0 0 / .80);
}
body.cp-spatial[data-theme="light"] .cp-auth-form > h2,
body.cp-spatial[data-theme="light"] .cp-auth-form > .sub,
body.cp-spatial[data-theme="light"] .cp-fset-h h3 { color: var(--ink); }
body.cp-spatial[data-theme="light"] .cp-fset-h .n { background: oklch(0.22 0.02 265); color: oklch(0.99 0.004 250); }
body.cp-spatial[data-theme="light"] .cp-done .seal { background: var(--signal-bg); color: var(--signal); border-color: oklch(0.55 0.11 162 / .45); }
body.cp-spatial[data-theme="light"] .cp-done-steps .ord { border-color: oklch(0.24 0.02 265 / .22); color: var(--muted); }
body.cp-spatial[data-theme="light"] .cr-consent a { color: var(--ink); }
body.cp-spatial[data-theme="light"] .cr-consent { color: var(--ink-2); }

/* registration accordion (light glass) */
body.cp-spatial[data-theme="light"] .cp-acc .cp-fset {
  border: 1px solid oklch(0.24 0.02 265 / .12);
  background: oklch(1 0 0 / .55);
}
body.cp-spatial[data-theme="light"] .cp-acc .cp-fset.open {
  border-color: oklch(0.24 0.02 265 / .26);
  background: oklch(1 0 0 / .75);
  box-shadow: 0 18px 40px -28px oklch(0.30 0.04 265 / .30);
}
body.cp-spatial[data-theme="light"] .cp-acc .cp-fset-h:hover { background: oklch(0.24 0.02 265 / .03); }
body.cp-spatial[data-theme="light"] .cp-acc .cp-fset.done .cp-fset-h .n { background: var(--signal); color: #fff; }
body.cp-spatial[data-theme="light"] .cp-acc .cp-fset.open .cp-acc-chev { color: var(--ink); }
body.cp-spatial[data-theme="light"] .cp-acc-done { color: var(--signal); background: var(--signal-bg); border-color: oklch(0.55 0.11 162 / .45); }

/* ---------- L13 · DRAWERS ---------- */
body.cp-spatial[data-theme="light"] .cp-drawer.open .cp-drawer-scrim { background: oklch(0.30 0.04 265 / .28); }
body.cp-spatial[data-theme="light"] .cp-drawer-panel {
  background: oklch(1 0 0 / .82);
  border-left: 1px solid oklch(0.24 0.02 265 / .12);
  box-shadow: -40px 0 100px -50px oklch(0.30 0.04 265 / .35), var(--glass-edge);
}
body.cp-spatial[data-theme="light"] .cp-drawer-top,
body.cp-spatial[data-theme="light"] .cp-drawer-foot { border-color: oklch(0.24 0.02 265 / .12); }
body.cp-spatial[data-theme="light"] .cp-drawer-foot { background: oklch(0.24 0.02 265 / .03); }
body.cp-spatial[data-theme="light"] .rv-name h2 { color: var(--ink); }
body.cp-spatial[data-theme="light"] .rv-acc,
body.cp-spatial[data-theme="light"] .cm-deliv-row,
body.cp-spatial[data-theme="light"] .al-row { background: oklch(1 0 0 / .55); border-color: oklch(0.24 0.02 265 / .12); }
body.cp-spatial[data-theme="light"] .cm-deliv-row.done { background: oklch(0.70 0.10 162 / .14); border-color: oklch(0.55 0.11 162 / .35); }
body.cp-spatial[data-theme="light"] .al-row:hover { border-color: oklch(0.24 0.02 265 / .4); }
body.cp-spatial[data-theme="light"] .al-row:has(input:checked) { background: oklch(0.70 0.10 162 / .14); border-color: var(--signal); }
body.cp-spatial[data-theme="light"] .rv-pill { border-color: oklch(0.24 0.02 265 / .2); color: var(--ink-2); }
body.cp-spatial[data-theme="light"] .rv-pill.ok { color: var(--signal); background: var(--signal-bg); border-color: oklch(0.55 0.11 162 / .35); }
body.cp-spatial[data-theme="light"] .rv-pill.warn { color: var(--pending); background: var(--pending-bg); border-color: oklch(0.58 0.12 70 / .4); }
body.cp-spatial[data-theme="light"] .cm-note { background: oklch(0.24 0.02 265 / .04); border-color: oklch(0.24 0.02 265 / .12); }
body.cp-spatial[data-theme="light"] .cm-stepper .dot { background: oklch(1 0 0 / .80); border-color: oklch(0.24 0.02 265 / .2); color: var(--muted); }
body.cp-spatial[data-theme="light"] .cm-stepper li.done .dot { background: var(--signal); border-color: var(--signal); color: #fff; }
body.cp-spatial[data-theme="light"] .cm-stepper li.current .dot { border-color: var(--signal); color: var(--signal); }
body.cp-spatial[data-theme="light"] .cm-deliv-check { background: oklch(0.24 0.02 265 / .06); border-color: oklch(0.24 0.02 265 / .18); }
body.cp-spatial[data-theme="light"] .cm-deliv-row.done .cm-deliv-check { background: var(--signal); border-color: var(--signal); color: #fff; }
body.cp-spatial[data-theme="light"] .cm-deliv-up { background: oklch(1 0 0 / .60); border-color: oklch(0.24 0.02 265 / .2); color: var(--ink); }
body.cp-spatial[data-theme="light"] .cm-deliv-up:hover { border-color: var(--ink); }

/* brief drawer logo + allocation list (light glass) */
body.cp-spatial[data-theme="light"] .cp-alloc-list { border-color: oklch(0.24 0.02 265 / .12); background: oklch(1 0 0 / .45); }
body.cp-spatial[data-theme="light"] .cp-alloc-item:hover { background: oklch(0.24 0.02 265 / .05); }
body.cp-spatial[data-theme="light"] .cp-alloc-nm { color: var(--ink); }
body.cp-spatial[data-theme="light"] .cp-alloc-ni { color: var(--ink-2); }
body.cp-spatial[data-theme="light"] .cp-logo-preview { border-color: oklch(0.24 0.02 265 / .18); background: oklch(1 0 0 / .55); }
body.cp-spatial[data-theme="light"] .cp-logo-ph { color: var(--ink-2); }

/* ---------- L14 · NOTIFICATIONS DROPDOWN ---------- */
body.cp-spatial[data-theme="light"] .cp-notif {
  background: oklch(1 0 0 / .88);
  border-color: oklch(0.24 0.02 265 / .12);
  box-shadow: 0 40px 80px -34px oklch(0.30 0.04 265 / .35), var(--glass-edge);
}
body.cp-spatial[data-theme="light"] .cp-notif-h,
body.cp-spatial[data-theme="light"] .cp-notif-item,
body.cp-spatial[data-theme="light"] .cp-notif-foot { border-color: oklch(0.24 0.02 265 / .10); }
body.cp-spatial[data-theme="light"] .cp-notif-item.unread { background: oklch(0.70 0.10 162 / .12); }
body.cp-spatial[data-theme="light"] .cp-notif-foot:hover { background: oklch(0.24 0.02 265 / .05); }

/* ---------- L15 · PUBLIC PROFILE ---------- */
body.cp-spatial[data-theme="light"] .cp-public { color: var(--ink); }
body.cp-spatial[data-theme="light"] .cp-pub-name h1,
body.cp-spatial[data-theme="light"] .cp-pub-h2 { color: var(--ink); }
body.cp-spatial[data-theme="light"] .cp-pub-head { border-color: oklch(0.24 0.02 265 / .12); }
body.cp-spatial[data-theme="light"] .cp-pub-av { background: oklch(0.22 0.02 265); color: oklch(0.99 0.004 250); }

/* ---------- L16 · AVATARS / MARKS ----------
   The light skin re-tints EVERY initials/logo avatar to an ink slab with light
   text (drawer/admin/side-card/review row + brief-logo + alloc). All of them are
   now the single .cp-ava primitive, so one rule covers the whole family. */
body.cp-spatial[data-theme="light"] .cp-ava {
  background: oklch(0.22 0.02 265);
  color: oklch(0.99 0.004 250);
  box-shadow: inset 0 0 0 1px oklch(0.24 0.02 265 / .14);
}
body.cp-spatial[data-theme="light"] image-slot { box-shadow: inset 0 0 0 1px oklch(0.24 0.02 265 / .14); }
body.cp-spatial[data-theme="light"] .cp-gallery .add-slot { border-color: oklch(0.24 0.02 265 / .25); color: var(--muted); }
body.cp-spatial[data-theme="light"] .cp-gallery .add-slot:hover { border-color: oklch(0.24 0.02 265 / .5); color: var(--ink); }
/* image-slot placeholder caption: dark text reads on the light glass (revert the
   spatial dark-only white override) */
body.cp-spatial[data-theme="light"] image-slot.cp-av,
body.cp-spatial[data-theme="light"] image-slot.cp-pub-av { color: oklch(0.24 0.02 265 / .72); }
body.cp-spatial[data-theme="light"] image-slot.cp-av::part(empty),
body.cp-spatial[data-theme="light"] image-slot.cp-pub-av::part(empty) { color: oklch(0.24 0.02 265 / .72); }
body.cp-spatial[data-theme="light"] image-slot.cp-av::part(ring),
body.cp-spatial[data-theme="light"] image-slot.cp-pub-av::part(ring) { border-color: oklch(0.24 0.02 265 / .30); }

/* ---------- L17 · SCROLLBARS / SELECTION / MISC TEXT ---------- */
body.cp-spatial[data-theme="light"] *::-webkit-scrollbar-thumb { background: oklch(0.24 0.02 265 / .22); }
body.cp-spatial[data-theme="light"] *::-webkit-scrollbar-thumb:hover { background: oklch(0.24 0.02 265 / .34); }
body.cp-spatial[data-theme="light"] ::selection { background: oklch(0.22 0.02 265); color: #fff; }
body.cp-spatial[data-theme="light"] .cp-sec-h h2 { color: var(--ink); }
body.cp-spatial[data-theme="light"] .cp-sec-h .more { color: var(--muted); }
body.cp-spatial[data-theme="light"] .cp-sec-h .more:hover { color: var(--ink); }
body.cp-spatial[data-theme="light"] .cp-pub-back:hover,
body.cp-spatial[data-theme="light"] .cp-login-forgot { color: var(--signal); }
body.cp-spatial[data-theme="light"] .cp-login-alt a { color: var(--ink); }
body.cp-spatial[data-theme="light"] .cp-empty-row { color: var(--muted); }

/* ---------- L18 · DARK-ONLY AMBIENT TWEAK GUARD ----------
   The base rule `[data-theme="dark"] .cp-ambient { filter: brightness(.85) }`
   is scoped to dark and untouched. Our light brightness lives on the photo via
   L2, so the two never collide. (Documented for the next reader.) */

/* ---------- L19 · MOBILE BOTTOM TAB BAR (Variant C) ----------
   The mobile nav is a fixed bottom bar (icon + short label). Override the earlier
   pill treatment (L?/base) so tabs are transparent with an icon highlight; the
   bar itself is frosted glass. Appended last → wins on source order. */
@media (max-width: 820px) {
  body.cp-spatial .cp-mob-tabs {
    background: var(--glass-tint-2);
    backdrop-filter: blur(22px) saturate(1.4);
    -webkit-backdrop-filter: blur(22px) saturate(1.4);
    border-top: 1px solid var(--line);
  }
  body.cp-spatial .cp-mob-tabs a,
  body.cp-spatial .cp-mob-tabs a.active,
  body.cp-spatial[data-theme="light"] .cp-mob-tabs a,
  body.cp-spatial[data-theme="light"] .cp-mob-tabs a.active {
    background: transparent; border-color: transparent;
  }
  body.cp-spatial .cp-mob-tabs a { color: var(--muted); }
  body.cp-spatial .cp-mob-tabs a.active { color: var(--ink); }
  body.cp-spatial .cp-mob-tabs a.active .mt-ic { background: var(--signal-bg); color: var(--signal); }
}