/**
 * Client brand portal — unique from studio admin.
 * Base is warm/editorial; JS overwrites CSS vars from site.theme.
 * Mobile uses the same tokens as desktop (no alternate mobile palette).
 */

/* Inside brand /account iframe: no second site header, fill the frame */
html.portal-embedded,
body.portal-embedded {
  background: transparent !important;
  min-height: 0 !important;
}
body.portal-embedded {
  background-image: none !important;
}
body.portal-embedded .wrap {
  max-width: none;
  padding: 0.75rem 0.5rem 1.5rem;
  margin: 0 auto;
}
body.portal-embedded .top.portal-embedded-top,
body.portal-embedded .top {
  display: none !important;
}
body.portal-embedded .client-welcome {
  margin-top: 0;
}
body.brand-portal,
body[data-studio="portal"]:not([data-page="admin"]) {
  --cb-radius: 18px;
  --cb-display: "Fraunces", "Georgia", "Times New Roman", serif;
  --cb-sans: "DM Sans", system-ui, sans-serif;
}

body.brand-portal {
  font-family: var(--cb-sans);
  /* Theme tokens from brand-theme.js / theme_json — neutral fallbacks (no forced dark FOUC). */
  background:
    radial-gradient(900px 480px at 100% 0%, color-mix(in srgb, var(--sky, #38bdf8) 14%, transparent), transparent 55%),
    radial-gradient(700px 400px at 0% 80%, color-mix(in srgb, var(--sky, #38bdf8) 7%, transparent), transparent 45%),
    var(--bg, var(--panel, #f8fafc)) !important;
  color: var(--text, var(--ink, #0f172a));
}
body.brand-portal.theme-dark {
  background:
    radial-gradient(900px 480px at 100% 0%, color-mix(in srgb, var(--sky, #38bdf8) 16%, transparent), transparent 55%),
    radial-gradient(700px 400px at 0% 80%, color-mix(in srgb, var(--sky, #38bdf8) 8%, transparent), transparent 45%),
    var(--bg, #0b1220) !important;
  color: var(--text, var(--ink, #f1f5f9));
}

/*
 * Liquid glass client portal — same brand-tinted stage as owner desk.
 * brand-theme.js sets --lg-void / --sky / --lg-brand-* from theme_json.
 */
body.brand-portal.lg-desk,
body.brand-portal.lg-desk.theme-dark,
body[data-studio="portal"].lg-desk {
  color: var(--text, var(--lg-text, #f5f8ff)) !important;
  background:
    radial-gradient(
      900px 480px at 100% 0%,
      var(--lg-brand-bright-tint, color-mix(in srgb, var(--sky, #38bdf8) 22%, transparent)),
      transparent 55%
    ),
    radial-gradient(
      700px 400px at 0% 80%,
      var(--lg-brand-tint-soft, color-mix(in srgb, var(--sky, #38bdf8) 14%, transparent)),
      transparent 45%
    ),
    var(--lg-void, var(--bg, #12141a)) !important;
}
body.brand-portal.lg-desk.theme-light,
body[data-studio="portal"].lg-desk.theme-light {
  color: var(--text, #0f172a) !important;
}
body.brand-portal.lg-desk .card,
body[data-studio="portal"].lg-desk .card {
  color: inherit !important;
  border-color: var(--lg-brand-border, color-mix(in srgb, var(--sky, #38bdf8) 28%, transparent)) !important;
  background:
    linear-gradient(
      155deg,
      color-mix(in srgb, var(--sky, #38bdf8) 12%, rgba(255, 255, 255, 0.08)) 0%,
      rgba(20, 24, 32, 0.42) 100%
    ) !important;
}
body.brand-portal.lg-desk.theme-light .card,
body[data-studio="portal"].lg-desk.theme-light .card {
  background:
    linear-gradient(
      155deg,
      color-mix(in srgb, var(--sky, #38bdf8) 10%, #fff) 0%,
      rgba(255, 255, 255, 0.88) 100%
    ) !important;
  color: var(--text, #0f172a) !important;
}
/* Widget strip — brand accent (matches desk KPI / module chrome) */
body.brand-portal .portal-widget {
  border-color: var(--lg-brand-border, color-mix(in srgb, var(--sky, #38bdf8) 32%, transparent));
  background:
    linear-gradient(
      155deg,
      color-mix(in srgb, var(--sky, #38bdf8) 16%, var(--panel, #fff)) 0%,
      color-mix(in srgb, var(--panel, #fff) 92%, transparent) 100%
    );
}
body.brand-portal .portal-widget__kicker {
  color: var(--sky, #38bdf8);
}
body.brand-portal .btn,
body.brand-portal button.btn {
  border-color: color-mix(in srgb, var(--sky, #38bdf8) 40%, transparent);
}
body.brand-portal .btn:not(.secondary),
body.brand-portal button.btn:not(.secondary) {
  background: linear-gradient(
    145deg,
    var(--sky3, var(--accent-bright, #7dd3fc)),
    var(--sky, #38bdf8)
  );
  color: #041018;
  border-color: transparent;
}

/* ========== Brand desk shell — paint matches each site theme ==========
   Tokens set by brand-theme.js: --bg --panel --text --muted --sky --border --cc-*
*/
body.brand-portal.cc-body {
  background: var(--bg, var(--cc-ink, #0a1220)) !important;
  color: var(--text, var(--cc-text, inherit));
}
body.brand-portal.cc-body .cc-rail {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--sky, #38bdf8) 16%, transparent) 0%, transparent 40%),
    var(--cc-rail, var(--bg, #0b1422)) !important;
  border-right-color: var(--border, var(--cc-line-soft, rgba(148, 163, 184, 0.12)));
  color: var(--text, #f1f5f9);
}
body.brand-portal.cc-body .cc-rail__brand h1 {
  color: var(--heading, var(--text, #fff));
}
body.brand-portal.cc-body .cc-rail__brand p,
body.brand-portal.cc-body .cc-rail__hint,
body.brand-portal.cc-body .cc-rail__item.is-quiet {
  color: var(--muted, #94a3b8);
}
body.brand-portal.cc-body .cc-rail__item {
  color: color-mix(in srgb, var(--text, #e2e8f0) 88%, transparent);
}
body.brand-portal.cc-body .cc-rail__item:hover {
  color: var(--text, #fff);
  background: color-mix(in srgb, var(--sky, #38bdf8) 10%, transparent);
}
body.brand-portal.cc-body .cc-rail__item.is-active {
  background: color-mix(in srgb, var(--sky, #38bdf8) 16%, transparent);
  color: var(--sky3, var(--sky, #7dd3fc));
  box-shadow: inset 3px 0 0 var(--sky, #38bdf8);
}
body.brand-portal.cc-body .cc-rail__sec {
  color: color-mix(in srgb, var(--sky, #38bdf8) 75%, var(--muted, #94a3b8));
}
body.brand-portal.cc-body .cc-main {
  background:
    radial-gradient(700px 280px at 90% -5%, color-mix(in srgb, var(--sky, #38bdf8) 12%, transparent), transparent 55%),
    var(--cc-main-bg, var(--bg, #0c1524)) !important;
  color: var(--text, var(--cc-text, #e2e8f0));
}
body.brand-portal.cc-body .cc-body-area {
  color: var(--text, inherit);
}
body.brand-portal.cc-body .cc-top {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--bg, #0a1220) 70%, #000) 0%,
    var(--bg, #0a1220) 100%
  ) !important;
  border-bottom-color: var(--border, rgba(148, 163, 184, 0.12));
  color: var(--text, #f1f5f9);
}
body.brand-portal.cc-body .cc-top__title {
  color: var(--heading, var(--text, #fff));
}
body.brand-portal.cc-body .cc-top__sub {
  color: var(--muted, #94a3b8);
}
body.brand-portal.cc-body .cc-panel-card {
  background: var(--panel, var(--surface, #151c27)) !important;
  border-color: var(--border, rgba(148, 163, 184, 0.14)) !important;
  color: var(--text, #e2e8f0) !important;
  box-shadow: 0 12px 36px color-mix(in srgb, #000 28%, transparent) !important;
}
body.brand-portal.cc-body .cc-panel-card h2 {
  color: var(--heading, var(--text, #f1f5f9)) !important;
  font-family: var(--cc-display, "Outfit", system-ui, sans-serif) !important;
}
body.brand-portal.cc-body .cc-hero {
  background:
    linear-gradient(125deg, color-mix(in srgb, var(--sky, #38bdf8) 14%, transparent) 0%, transparent 50%),
    var(--panel, var(--surface, #151c27)) !important;
  border-color: color-mix(in srgb, var(--sky, #38bdf8) 28%, transparent) !important;
  color: var(--text, #e2e8f0) !important;
}
body.brand-portal.cc-body .cc-hero h2 {
  color: var(--heading, var(--text, #f1f5f9)) !important;
  font-family: var(--cc-display, "Outfit", system-ui, sans-serif) !important;
  text-decoration-color: color-mix(in srgb, var(--sky, #38bdf8) 55%, transparent);
}
body.brand-portal.cc-body .cc-hero p,
body.brand-portal.cc-body .cc-body-area .muted,
body.brand-portal.cc-body .cc-panel-card .muted {
  color: var(--muted, #94a3b8) !important;
}
body.brand-portal.cc-body .cc-tile {
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--panel, #1a2a42) 88%, var(--sky, #38bdf8) 12%) 0%,
    var(--panel, #122033) 100%
  ) !important;
  color: var(--text, #e8eef7) !important;
  border-color: color-mix(in srgb, var(--sky, #38bdf8) 28%, transparent) !important;
}
body.brand-portal.cc-body .cc-tile__title {
  color: var(--heading, var(--text, #fff)) !important;
  font-family: var(--cc-display, "Outfit", system-ui, sans-serif) !important;
}
body.brand-portal.cc-body .cc-tile__desc {
  color: var(--muted, #94a3b8) !important;
}
body.brand-portal.cc-body .cc-tile__kicker {
  color: var(--sky, #38bdf8) !important;
}
body.brand-portal.cc-body .cc-btn:not(.cc-btn--ghost) {
  background: linear-gradient(
    145deg,
    var(--sky3, var(--sky, #7dd3fc)),
    var(--sky2, var(--sky, #0ea5e9))
  ) !important;
  color: #041018 !important;
}
body.brand-portal.cc-body .cc-btn--ghost {
  color: var(--text, #e2e8f0) !important;
  border-color: color-mix(in srgb, var(--sky, #38bdf8) 35%, transparent) !important;
  background: color-mix(in srgb, var(--panel, transparent) 60%, transparent) !important;
}
body.brand-portal.cc-body .cc-body-area input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):not([type="range"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]),
body.brand-portal.cc-body .cc-body-area select,
body.brand-portal.cc-body .cc-body-area textarea {
  background: var(--surface, var(--panel, #0f172a)) !important;
  color: var(--text, #f1f5f9) !important;
  border-color: var(--border, rgba(148, 163, 184, 0.22)) !important;
}
body.brand-portal.cc-body .cc-body-area input[type="checkbox"],
body.brand-portal.cc-body .cc-body-area input[type="radio"] {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  accent-color: var(--sky, var(--cc-accent, #38bdf8));
}

/* Light brands (KJ blush, Moose grey): paper desk end-to-end — no navy */
body.brand-portal.cc-body.theme-light {
  background: var(--bg, #f3f4f6) !important;
  color: var(--text, #0f172a) !important;
}
/* Kill residual navy from club-command / portal defaults on light desks */
body.brand-portal.cc-body.theme-light .cc-app,
body.brand-portal.cc-body.theme-light .cc-body-area,
body.brand-portal.cc-body.theme-light .cc-main {
  background-color: transparent;
}
body.brand-portal.cc-body.theme-light .card,
body.brand-portal.cc-body.theme-light .cc-panel-card,
body.brand-portal.cc-body.theme-light .cc-tile,
body.brand-portal.cc-body.theme-light .shop-toolbar,
body.brand-portal.cc-body.theme-light .shop-list-card,
body.brand-portal.cc-body.theme-light .shop-editor-card,
body.brand-portal.cc-body.theme-light .shop-orders-card {
  background: var(--panel, #ffffff) !important;
  color: var(--text, #0f172a) !important;
  border-color: color-mix(in srgb, var(--sky, #e89b0c) 18%, rgba(15, 23, 42, 0.1)) !important;
}
body.brand-portal.cc-body.theme-light .cc-rail {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--sky, #e89b0c) 12%, transparent) 0%, transparent 40%),
    var(--panel, #ffffff) !important;
  border-right: 1px solid var(--border, rgba(15, 23, 42, 0.1)) !important;
  color: var(--text, #0f172a) !important;
}
body.brand-portal.cc-body.theme-light .cc-rail__brand h1,
body.brand-portal.cc-body.theme-light .cc-rail__item {
  color: var(--heading, var(--text, #0f172a)) !important;
}
body.brand-portal.cc-body.theme-light .cc-rail__brand p,
body.brand-portal.cc-body.theme-light .cc-rail__hint,
body.brand-portal.cc-body.theme-light .cc-rail__item.is-quiet,
body.brand-portal.cc-body.theme-light .cc-rail__sec {
  color: var(--muted, #64748b) !important;
}
body.brand-portal.cc-body.theme-light .cc-rail__item:hover {
  color: var(--heading, #0f172a) !important;
  background: color-mix(in srgb, var(--sky, #e89b0c) 10%, transparent) !important;
}
body.brand-portal.cc-body.theme-light .cc-rail__item.is-active {
  background: color-mix(in srgb, var(--sky, #e89b0c) 14%, transparent) !important;
  color: var(--sky, #c47f0a) !important;
  box-shadow: inset 3px 0 0 var(--sky, #e89b0c) !important;
}
body.brand-portal.cc-body.theme-light .cc-main {
  background:
    radial-gradient(700px 280px at 90% -5%, color-mix(in srgb, var(--sky, #e89b0c) 10%, transparent), transparent 55%),
    var(--bg, #f4f7fb) !important;
  color: var(--text, #0f172a) !important;
}
body.brand-portal.cc-body.theme-light .cc-top {
  background: var(--panel, #ffffff) !important;
  border-bottom: 1px solid var(--border, rgba(15, 23, 42, 0.1)) !important;
  color: var(--text, #0f172a) !important;
}
body.brand-portal.cc-body.theme-light .cc-top__title {
  color: var(--heading, var(--text, #0f172a)) !important;
}
body.brand-portal.cc-body.theme-light .cc-top__sub {
  color: var(--muted, #64748b) !important;
}
body.brand-portal.cc-body.theme-light .cc-panel-card,
body.brand-portal.cc-body.theme-light .cc-hero {
  background: var(--panel, #fff) !important;
  color: var(--text, #0f172a) !important;
  border-color: color-mix(in srgb, var(--sky, #e89b0c) 18%, rgba(15, 23, 42, 0.08)) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06) !important;
}
body.brand-portal.cc-body.theme-light .cc-panel-card h2,
body.brand-portal.cc-body.theme-light .cc-hero h2 {
  color: var(--heading, var(--text, #0f172a)) !important;
}
body.brand-portal.cc-body.theme-light .cc-hero p,
body.brand-portal.cc-body.theme-light .cc-body-area .muted,
body.brand-portal.cc-body.theme-light .cc-panel-card .muted,
body.brand-portal.cc-body.theme-light .cc-tile__desc {
  color: var(--muted, #64748b) !important;
}
body.brand-portal.cc-body.theme-light .cc-tile {
  background: linear-gradient(
    145deg,
    color-mix(in srgb, #fff 88%, var(--sky, #e89b0c) 12%) 0%,
    #fff 100%
  ) !important;
  color: var(--text, #0f172a) !important;
  border-color: color-mix(in srgb, var(--sky, #e89b0c) 22%, transparent) !important;
}
body.brand-portal.cc-body.theme-light .cc-tile__title {
  color: var(--heading, #0f172a) !important;
}
body.brand-portal.cc-body.theme-light .cc-tile__kicker {
  color: var(--sky, #e89b0c) !important;
}
body.brand-portal.cc-body.theme-light .cc-body-area input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):not([type="range"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]),
body.brand-portal.cc-body.theme-light .cc-body-area select,
body.brand-portal.cc-body.theme-light .cc-body-area textarea {
  background: #fff !important;
  color: var(--text, #0f172a) !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
}
body.brand-portal.cc-body.theme-light .cc-body-area input[type="checkbox"],
body.brand-portal.cc-body.theme-light .cc-body-area input[type="radio"] {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  accent-color: var(--sky, var(--cc-accent, #e89b0c));
}
body.brand-portal.cc-body.theme-light .cc-btn--ghost {
  color: var(--text, #0f172a) !important;
  background: #fff !important;
  border-color: rgba(15, 23, 42, 0.14) !important;
}
body.brand-portal.cc-body.theme-light .cc-btn:not(.cc-btn--ghost) {
  color: #1a1408 !important;
}

/* Client portal (not Club Command desk): brand wash as before */
body.brand-portal:not(.cc-body) {
  /* uses body.brand-portal rules above with brand --bg/--text */
}

body.brand-portal .wrap {
  max-width: 720px;
  padding-top: 1.25rem;
}

/* Soft brand header — not the "100" studio mark */
body.brand-portal .top {
  padding: 0.35rem 0 1.1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--sky, #c23b22) 28%, transparent);
  margin-bottom: 1.35rem;
}

body.brand-portal .mark {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  font-family: var(--cb-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  background: linear-gradient(
    145deg,
    var(--sky, #c23b22),
    color-mix(in srgb, var(--sky, #c23b22) 55%, #1a1410)
  ) !important;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--sky, #c23b22) 35%, transparent);
}

body.brand-portal .brand h1 {
  font-family: var(--cb-display);
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

body.brand-portal .brand p {
  font-size: 0.9rem;
  opacity: 0.9;
}

body.brand-portal .card {
  background: var(--surface, var(--panel, #1e1916)) !important;
  border: 1px solid color-mix(in srgb, var(--sky, #c23b22) 22%, var(--border, transparent)) !important;
  border-radius: var(--cb-radius) !important;
  box-shadow: 0 18px 40px color-mix(in srgb, var(--text, #000) 10%, transparent);
  color: var(--text, inherit);
}

body.brand-portal .card h2 {
  font-family: var(--cb-display);
  font-size: 1.25rem;
  font-weight: 700;
}

/* Progress as soft pills */
body.brand-portal .steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 1.15rem;
  padding: 0;
  background: transparent;
  border: none;
}

body.brand-portal .step {
  flex: 1 1 auto;
  min-width: 5.5rem;
  text-align: center;
  padding: 0.55rem 0.65rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--surface, #fff) 70%, var(--bg, #eee));
  border: 1px solid color-mix(in srgb, var(--text, #000) 10%, transparent);
  color: var(--muted, #6b6468);
  opacity: 1;
}

body.brand-portal .step.on {
  background: color-mix(in srgb, var(--sky, #c23b22) 22%, var(--surface, #fff));
  border-color: color-mix(in srgb, var(--sky, #c23b22) 55%, transparent);
  color: var(--heading, var(--text, #1a100c));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--sky, #c23b22) 25%, transparent);
}

body.brand-portal .step.done {
  border-color: color-mix(in srgb, var(--ok, #34d399) 40%, transparent);
  color: var(--ok, #34d399);
}

/* Buttons: same shape everywhere — color from --sky only (portal.css base) */
body.brand-portal .btn {
  border-radius: 12px !important;
  font-weight: 700;
  letter-spacing: 0.01em;
}

body.brand-portal .btn:not(.secondary):not(.ghost):not(.danger) {
  background: var(--sky, #0ea5e9) !important;
  color: #0b1220 !important;
  border: 1.5px solid transparent !important;
}
body.theme-light.brand-portal .btn:not(.secondary):not(.ghost):not(.danger) {
  color: #1a1408 !important;
}

body.brand-portal input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):not([type="range"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]),
body.brand-portal select,
body.brand-portal textarea {
  background: var(--surface, #fff) !important;
  color: var(--text, #1c1c1e) !important;
  border-radius: 14px !important;
  border-color: color-mix(in srgb, var(--sky, #c23b22) 28%, var(--border, #ccc)) !important;
}

body.brand-portal input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):not([type="range"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):focus,
body.brand-portal select:focus,
body.brand-portal textarea:focus {
  border-color: var(--sky, #c23b22) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sky, #c23b22) 25%, transparent) !important;
}

body.brand-portal input[type="checkbox"],
body.brand-portal input[type="radio"] {
  appearance: auto !important;
  -webkit-appearance: auto !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  accent-color: var(--sky, var(--accent, #38bdf8));
  cursor: pointer;
}

body.brand-portal .intake-calc {
  border-radius: var(--cb-radius);
  border-color: color-mix(in srgb, var(--sky, #c23b22) 30%, transparent);
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--sky, #c23b22) 12%, transparent),
    rgba(0, 0, 0, 0.25)
  );
}

body.brand-portal .intake-referral {
  border-color: color-mix(in srgb, var(--sky, #c23b22) 28%, transparent);
  background: color-mix(in srgb, var(--sky, #c23b22) 8%, transparent);
}

body.brand-portal .foot,
body.brand-portal .foot a {
  color: var(--muted, #a89a8c);
}

/* Hide studio-looking home link text when branded */
body.brand-portal [data-studio-home] {
  border-radius: 999px;
  font-size: 0.82rem;
}

body.brand-portal .client-welcome {
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  background: color-mix(in srgb, var(--sky, #c23b22) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--sky, #c23b22) 22%, transparent);
  font-size: 0.9rem;
  color: var(--text, #faf7f2);
}

/* ===== Customer account login/register — brand paint (Moose light + Mikiki gold) ===== */
/* Liquid-glass desks keep frosted glass auth (liquid-glass.css); these paint non-lg pages */
body.brand-portal.theme-light:not(.lg-desk) {
  background:
    radial-gradient(900px 480px at 100% 0%, color-mix(in srgb, var(--sky, #e89b0c) 16%, transparent), transparent 55%),
    radial-gradient(700px 400px at 0% 80%, color-mix(in srgb, var(--sky, #e89b0c) 8%, transparent), transparent 45%),
    var(--bg, #f3f4f6) !important;
  color: var(--text, #1f2937) !important;
}
body.brand-portal.theme-light:not(.lg-desk) .card {
  background: var(--panel, #ffffff) !important;
  color: var(--text, #1f2937) !important;
  border-color: color-mix(in srgb, var(--sky, #e89b0c) 20%, rgba(17, 24, 39, 0.1)) !important;
  box-shadow: 0 12px 32px rgba(17, 24, 39, 0.08) !important;
}
body.brand-portal.theme-light:not(.lg-desk) .card h2,
body.brand-portal.theme-light:not(.lg-desk) .brand h1,
body.brand-portal.theme-light:not(.lg-desk) label {
  color: var(--heading, var(--text, #111827)) !important;
}
body.brand-portal.theme-light:not(.lg-desk) .muted,
body.brand-portal.theme-light:not(.lg-desk) .brand p,
body.brand-portal.theme-light:not(.lg-desk) .foot {
  color: var(--muted, #6b7280) !important;
}
body.brand-portal.theme-light:not(.lg-desk) input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):not([type="range"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]),
body.brand-portal.theme-light:not(.lg-desk) select,
body.brand-portal.theme-light:not(.lg-desk) textarea {
  background: #ffffff !important;
  color: var(--text, #1f2937) !important;
  border-color: rgba(17, 24, 39, 0.14) !important;
}
body.brand-portal.theme-light:not(.lg-desk) .btn:not(.secondary):not(.ghost):not(.danger) {
  background: linear-gradient(145deg, var(--sky3, var(--sky, #f5b53a)), var(--sky, #e89b0c)) !important;
  color: #1a1408 !important;
}
body.brand-portal.theme-light:not(.lg-desk) .btn.secondary,
body.brand-portal.theme-light:not(.lg-desk) .btn.ghost {
  background: #fff !important;
  color: var(--text, #1f2937) !important;
  border: 1.5px solid rgba(17, 24, 39, 0.14) !important;
}
body.brand-portal.theme-light:not(.lg-desk) .step {
  background: #fff !important;
  color: var(--muted, #6b7280) !important;
  border-color: rgba(17, 24, 39, 0.1) !important;
}
body.brand-portal.theme-light:not(.lg-desk) .step.on {
  background: color-mix(in srgb, var(--sky, #e89b0c) 18%, #fff) !important;
  color: var(--heading, #111827) !important;
  border-color: color-mix(in srgb, var(--sky, #e89b0c) 45%, transparent) !important;
}
body.brand-portal.theme-light:not(.lg-desk) .client-welcome {
  color: var(--text, #1f2937) !important;
  background: color-mix(in srgb, var(--sky, #e89b0c) 12%, #fff) !important;
}

/* Dark luxury brands (Mikiki): purple edge + gold accent on auth (skip when liquid-glass) */
body.brand-portal.theme-dark:not(.lg-desk),
body.brand-portal[data-brand-slug="mikiki"]:not(.lg-desk) {
  background:
    radial-gradient(ellipse 70% 40% at 50% -10%, color-mix(in srgb, var(--brand-purple, #7c3aed) 18%, transparent), transparent 55%),
    radial-gradient(ellipse 50% 35% at 90% 15%, color-mix(in srgb, var(--sky, #d4af37) 10%, transparent), transparent 45%),
    var(--bg, #050508) !important;
  color: var(--text, #eef1f6) !important;
}
body.brand-portal[data-brand-slug="mikiki"]:not(.lg-desk) .card,
body.brand-portal.theme-dark:not(.lg-desk) .card {
  background: var(--panel, #0e0e14) !important;
  border-color: color-mix(in srgb, var(--brand-purple, #7c3aed) 35%, var(--sky, #d4af37) 15%) !important;
  color: var(--text, #eef1f6) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45) !important;
}
body.brand-portal[data-brand-slug="mikiki"]:not(.lg-desk) .card h2,
body.brand-portal[data-brand-slug="mikiki"]:not(.lg-desk) .brand h1 {
  color: var(--heading, #f0d78c) !important;
  font-family: "Cinzel", "Times New Roman", Georgia, serif;
}
body.brand-portal[data-brand-slug="mikiki"]:not(.lg-desk) .btn:not(.secondary):not(.ghost):not(.danger) {
  background: linear-gradient(145deg, #f0d78c, #d4af37) !important;
  color: #050508 !important;
}
body.brand-portal[data-brand-slug="mikiki"]:not(.lg-desk) .btn.secondary,
body.brand-portal[data-brand-slug="mikiki"]:not(.lg-desk) .btn.ghost {
  background: transparent !important;
  color: var(--text, #eef1f6) !important;
  border: 1.5px solid color-mix(in srgb, var(--sky, #d4af37) 40%, transparent) !important;
}
body.brand-portal[data-brand-slug="mikiki"]:not(.lg-desk) input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):not([type="range"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]),
body.brand-portal[data-brand-slug="mikiki"]:not(.lg-desk) select,
body.brand-portal[data-brand-slug="mikiki"]:not(.lg-desk) textarea {
  background: var(--surface, #14141c) !important;
  color: var(--text, #eef1f6) !important;
  border-color: color-mix(in srgb, var(--sky, #d4af37) 28%, transparent) !important;
}
body.brand-portal[data-brand-slug="mikiki"]:not(.lg-desk) .muted {
  color: var(--muted, #c8cdd6) !important;
}
body.brand-portal[data-brand-slug="mikiki"]:not(.lg-desk) .mark {
  background: linear-gradient(145deg, #f0d78c, #d4af37) !important;
  color: #050508 !important;
}
body.brand-portal[data-brand-slug="mikiki"]:not(.lg-desk) .step.on {
  background: color-mix(in srgb, var(--sky, #d4af37) 18%, transparent) !important;
  border-color: color-mix(in srgb, var(--sky, #d4af37) 50%, transparent) !important;
  color: var(--heading, #f0d78c) !important;
}

/* Mobile brand portal — same tokens as desktop (stack only) */
@media (max-width: 900px) {
  body.brand-portal,
  body.brand-portal.cc-body {
    overflow-x: clip;
    max-width: 100%;
  }
  body.brand-portal .wrap {
    padding-left: max(0.75rem, env(safe-area-inset-left));
    padding-right: max(0.75rem, env(safe-area-inset-right));
    max-width: 100%;
    box-sizing: border-box;
  }
  body.brand-portal .btn,
  body.brand-portal button.btn {
    min-height: 44px;
  }
  body.brand-portal input,
  body.brand-portal select,
  body.brand-portal textarea {
    font-size: 16px !important;
    max-width: 100%;
    box-sizing: border-box;
  }
  body.brand-portal h1,
  body.brand-portal h2 {
    overflow-wrap: anywhere;
  }
  body.brand-portal .cc-app {
    grid-template-columns: 1fr !important;
  }
}