/* ============================================================================
   LUMEN — Editorial Luxe design system for YouWaves
   Direction: warm ivory canvas · ink text · vermilion signal + bottle-green
   Type: Bodoni Moda (display) · Sora (body/ui) · IBM Plex Mono (metadata)
   Loaded AFTER youwaves.css — this layer owns tokens, typography & components.
   ============================================================================ */

/* ---- 1. Design tokens ---------------------------------------------------- */
:root {
  /* Palette — canvas (Off-Air: warm near-black with a coral→amber signal) */
  --lm-paper:        #0F0A07;   /* app background (warm near-black)         */
  --lm-paper-2:      #17100A;   /* raised surface                          */
  --lm-surface:      #1B130D;   /* cards / sheets                          */
  --lm-ink:          #F4ECDD;   /* primary text (cream)                    */
  --lm-ink-2:        #C9BEB0;   /* secondary text                          */
  --lm-muted:        #9A8F82;   /* tertiary / meta text                    */
  --lm-faint:        #6E645A;   /* placeholder / disabled                  */
  --lm-line:         #2A2018;   /* hairline rule                           */
  --lm-line-strong:  #3D2F23;   /* stronger divider                        */

  /* Palette — signal (coral → amber) */
  --lm-accent:       #FF5A2C;   /* coral — primary action / signal         */
  --lm-accent-ink:   #FF7A45;   /* brighter coral for links/hover on dark  */
  --lm-accent-2:     #F9A825;   /* amber — gradient partner                */
  --lm-gradient:     linear-gradient(115deg, #F0562E 0%, #F77A2E 46%, #F9A825 100%);
  --lm-forest:       #3A2416;   /* deep warm brown — secondary surface     */
  --lm-gold:         #F9A825;   /* amber — premium / accents               */

  /* Semantic */
  --lm-success:      #3FB27F;
  --lm-danger:       #E23B26;
  --lm-info:         #F9A825;
  --lm-on-accent:    #1A0E06;   /* dark text on the coral→amber button     */
  --lm-on-forest:    #F1E8DA;   /* text on brown / dark surfaces           */

  /* Dark theater (player / immersive blocks) */
  --lm-theater:      #0B0704;
  --lm-theater-2:    #17100A;
  --lm-theater-ink:  #F4ECDD;

  /* Type families */
  --lm-font-display: "Bodoni Moda", "Times New Roman", Georgia, serif;
  --lm-font-body:    "Sora", "Helvetica Neue", Arial, system-ui, sans-serif;
  --lm-font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Modular type scale (1.25 major-third), rem-based */
  --lm-fs-3xs: .6875rem;   /* 11px  eyebrow / mono meta   */
  --lm-fs-2xs: .75rem;     /* 12px                        */
  --lm-fs-xs:  .8125rem;   /* 13px                        */
  --lm-fs-sm:  .9375rem;   /* 15px                        */
  --lm-fs-md:  1.0625rem;  /* 17px  body                  */
  --lm-fs-lg:  1.375rem;   /* 22px                        */
  --lm-fs-xl:  1.75rem;    /* 28px                        */
  --lm-fs-2xl: 2.5rem;     /* 40px                        */
  --lm-fs-3xl: 3.5rem;     /* 56px  section display       */
  --lm-fs-4xl: clamp(3rem, 8vw, 6.5rem); /* hero display  */

  /* Spacing scale (8px base) */
  --lm-1: .25rem;  --lm-2: .5rem;   --lm-3: .75rem;  --lm-4: 1rem;
  --lm-5: 1.5rem;  --lm-6: 2rem;    --lm-7: 3rem;    --lm-8: 4rem;
  --lm-9: 6rem;    --lm-10: 8rem;

  /* Radii — editorial = mostly sharp, subtle softening */
  --lm-r-0: 0;
  --lm-r-1: 2px;
  --lm-r-2: 4px;
  --lm-r-pill: 999px;

  /* Elevation */
  --lm-sh-1: 0 1px 2px rgba(22,19,14,.06);
  --lm-sh-2: 0 8px 24px -12px rgba(22,19,14,.20);
  --lm-sh-3: 0 24px 60px -24px rgba(22,19,14,.32);

  /* Motion */
  --lm-dur-1: .16s;
  --lm-dur-2: .32s;
  --lm-dur-3: .6s;
  --lm-ease:  cubic-bezier(.2, .7, .2, 1);
  --lm-ease-out: cubic-bezier(.16, 1, .3, 1);

  /* Layout */
  --lm-maxw: 1360px;
  --lm-gutter: clamp(1rem, 4vw, 4rem);
}

/* ---- 2. Base ------------------------------------------------------------- */
body {
  background:
    radial-gradient(115% 80% at 72% 8%, rgba(160, 62, 24, .38) 0%, rgba(120, 45, 18, .12) 34%, transparent 62%),
    var(--lm-paper);
  background-attachment: fixed;
  color: var(--lm-ink);
  font-family: var(--lm-font-body);
  font-size: var(--lm-fs-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: .002em;
}

h1, h2, h3, h4, .lm-display {
  font-family: var(--lm-font-display);
  color: var(--lm-ink);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.01em;
}

a { color: var(--lm-ink); text-decoration: none; }
a:hover { color: var(--lm-accent-ink); }

::selection { background: var(--lm-accent); color: var(--lm-on-accent); }

/* Accessible focus — visible everywhere */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--lm-accent);
  outline-offset: 3px;
  border-radius: var(--lm-r-1);
}

img { max-width: 100%; }

/* ---- 3. Type helpers ----------------------------------------------------- */
.lm-eyebrow {
  font-family: var(--lm-font-mono);
  font-size: var(--lm-fs-3xs);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--lm-accent-ink);
  font-weight: 600;
}
.lm-meta {
  font-family: var(--lm-font-mono);
  font-size: var(--lm-fs-2xs);
  letter-spacing: .06em;
  color: var(--lm-muted);
}
.lm-lede { font-size: var(--lm-fs-lg); color: var(--lm-ink-2); line-height: 1.4; }
.lm-serif { font-family: var(--lm-font-display); }
.lm-italic { font-style: italic; }
.lm-accent { color: var(--lm-accent); }
.lm-muted { color: var(--lm-muted); }

/* ---- 4. Layout scaffolding ---------------------------------------------- */
.lm-shell { max-width: var(--lm-maxw); margin-inline: auto; padding-inline: var(--lm-gutter); }
.lm-stack > * + * { margin-top: var(--lm-4); }
.lm-rule { height: 1px; background: var(--lm-line); border: 0; margin: var(--lm-6) 0; }
.lm-rule--ink { background: var(--lm-ink); height: 2px; }

/* Section header — magazine style with index numeral */
.lm-section-head {
  display: flex; align-items: baseline; gap: var(--lm-4);
  border-top: 2px solid var(--lm-ink);
  padding-top: var(--lm-3);
  margin-bottom: var(--lm-5);
}
.lm-section-head__index { font-family: var(--lm-font-mono); font-size: var(--lm-fs-2xs); color: var(--lm-accent-ink); }
.lm-section-head__title { font-family: var(--lm-font-display); font-size: var(--lm-fs-xl); font-weight: 700; }
.lm-section-head__more { margin-left: auto; }

/* ---- 5. Buttons ---------------------------------------------------------- */
.lm-btn {
  --_bg: var(--lm-ink); --_fg: var(--lm-paper); --_bd: var(--lm-ink);
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--lm-font-body); font-weight: 600;
  font-size: var(--lm-fs-sm); letter-spacing: .01em;
  padding: .8em 1.6em; border: 1.5px solid var(--_bd); background: var(--_bg); color: var(--_fg);
  border-radius: var(--lm-r-pill); cursor: pointer;
  transition: transform var(--lm-dur-1) var(--lm-ease), background var(--lm-dur-1) var(--lm-ease), color var(--lm-dur-1) var(--lm-ease), box-shadow var(--lm-dur-1) var(--lm-ease);
}
.lm-btn:hover { transform: translateY(-1px); box-shadow: var(--lm-sh-2); color: var(--_fg); }
.lm-btn:active { transform: translateY(0); }
.lm-btn--accent { --_bg: var(--lm-accent); --_bd: var(--lm-accent); --_fg: var(--lm-on-accent); }
.lm-btn--forest { --_bg: var(--lm-forest); --_bd: var(--lm-forest); --_fg: var(--lm-on-forest); }
.lm-btn--ghost  { --_bg: transparent; --_fg: var(--lm-ink); }
.lm-btn--ghost:hover { --_bg: var(--lm-ink); --_fg: var(--lm-paper); }
.lm-btn--lg { font-size: var(--lm-fs-md); padding: 1em 2em; }
.lm-btn--block { display: flex; width: 100%; }

/* ---- 6. Chips / tags ----------------------------------------------------- */
.lm-chip {
  display: inline-flex; align-items: center; gap: .4em;
  font-family: var(--lm-font-mono); font-size: var(--lm-fs-2xs);
  letter-spacing: .06em; text-transform: uppercase;
  padding: .35em .8em; border: 1px solid var(--lm-line-strong);
  border-radius: var(--lm-r-pill); color: var(--lm-ink-2); background: var(--lm-paper-2);
}
.lm-chip--active { background: var(--lm-ink); color: var(--lm-paper); border-color: var(--lm-ink); }
.lm-badge-kids { background: var(--lm-gold); color: var(--lm-ink); border-color: var(--lm-gold); }

/* ---- 7. Card shell ------------------------------------------------------- */
.lm-card {
  position: relative; background: var(--lm-surface);
  border: 1px solid var(--lm-line); border-radius: var(--lm-r-2); overflow: hidden;
  transition: transform var(--lm-dur-2) var(--lm-ease-out), box-shadow var(--lm-dur-2) var(--lm-ease-out), border-color var(--lm-dur-2) var(--lm-ease-out);
}
.lm-card:hover { transform: translateY(-4px); box-shadow: var(--lm-sh-3); border-color: var(--lm-line-strong); }
.lm-card__media { aspect-ratio: 2/3; background: var(--lm-paper-2); overflow: hidden; }
.lm-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--lm-dur-3) var(--lm-ease-out); }
.lm-card:hover .lm-card__media img { transform: scale(1.04); }
.lm-card__body { padding: var(--lm-3) var(--lm-4) var(--lm-4); }
.lm-card__title { font-family: var(--lm-font-display); font-size: var(--lm-fs-md); font-weight: 700; }
.lm-card__meta { margin-top: var(--lm-1); }

/* ---- 8. Form fields ------------------------------------------------------ */
.lm-field { margin-bottom: var(--lm-4); }
.lm-label {
  display: block; font-family: var(--lm-font-mono); font-size: var(--lm-fs-2xs);
  letter-spacing: .12em; text-transform: uppercase; color: var(--lm-muted);
  margin-bottom: var(--lm-2);
}
.lm-input, .lm-select, .lm-textarea {
  width: 100%; font-family: var(--lm-font-body); font-size: var(--lm-fs-md);
  color: var(--lm-ink); background: var(--lm-surface);
  border: 1.5px solid var(--lm-line-strong); border-radius: var(--lm-r-2);
  padding: .85em 1em; transition: border-color var(--lm-dur-1) var(--lm-ease), box-shadow var(--lm-dur-1) var(--lm-ease);
}
.lm-input::placeholder, .lm-textarea::placeholder { color: var(--lm-faint); }
.lm-input:focus, .lm-select:focus, .lm-textarea:focus {
  outline: none; border-color: var(--lm-ink);
  box-shadow: 0 0 0 3px rgba(229,64,30,.14);
}
.lm-input[aria-invalid="true"], .lm-input.is-invalid { border-color: var(--lm-danger); }
.lm-help { font-size: var(--lm-fs-xs); color: var(--lm-muted); margin-top: var(--lm-2); }
.lm-error { font-size: var(--lm-fs-xs); color: var(--lm-danger); margin-top: var(--lm-2); }

/* ---- 9. Theater / immersive (dark islands within a light theme) ---------- */
.lm-theater { background: var(--lm-theater); color: var(--lm-theater-ink); }
.lm-theater h1, .lm-theater h2, .lm-theater h3 { color: var(--lm-theater-ink); }

/* ---- 10. Motion, gated by reduced-motion -------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .lm-reveal { opacity: 0; transform: translateY(16px); animation: lm-rise var(--lm-dur-3) var(--lm-ease-out) forwards; }
  @keyframes lm-rise { to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ---- 11. Utilities ------------------------------------------------------- */
.lm-grid { display: grid; gap: var(--lm-5); }
.lm-cols-auto { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.lm-flex { display: flex; }
.lm-center { align-items: center; }
.lm-between { justify-content: space-between; }
.lm-gap-3 { gap: var(--lm-3); } .lm-gap-4 { gap: var(--lm-4); }
.lm-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* ============================================================================
   LUMEN — Phase 1: Onboarding & account flow
   Restyles the existing auth markup/Vue components without changing their hooks.
   ============================================================================ */

/* ---- Auth split layout (login / signup / forgot) ------------------------- */
.lm-auth {
  display: grid; grid-template-columns: 1.05fr .95fr;
  min-height: min(84vh, 760px);
  background: var(--lm-surface);
  border: 1px solid var(--lm-line);
  border-radius: var(--lm-r-2);
  overflow: hidden;
  box-shadow: var(--lm-sh-3);
  margin: var(--lm-4) auto var(--lm-8);
  max-width: 1120px;
}
.lm-auth__art {
  position: relative; overflow: hidden;
  background: radial-gradient(130% 130% at 28% 18%, #2a160c 0%, #160d07 48%, #0b0805 100%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--lm-7);
  color: var(--lm-on-forest);
}
/* Animated "On-Air aurora" — drifting coral→amber light, pure CSS */
.lm-auth__art--aurora::before {
  content: ""; position: absolute; inset: -35%; z-index: 0;
  background:
    radial-gradient(26% 30% at 26% 30%, rgba(255,90,44,.60) 0%, transparent 60%),
    radial-gradient(24% 28% at 72% 36%, rgba(249,168,37,.44) 0%, transparent 62%),
    radial-gradient(34% 36% at 52% 76%, rgba(200,72,28,.55) 0%, transparent 60%),
    radial-gradient(20% 24% at 84% 80%, rgba(255,122,60,.38) 0%, transparent 65%);
  filter: blur(42px) saturate(118%);
  animation: lm-aurora 24s ease-in-out infinite alternate;
  will-change: transform;
}
/* Readability veil + fine film grain (layered over the aurora, under content) */
.lm-auth__art::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(11,7,4,.10) 0%, rgba(11,7,4,.34) 45%, rgba(8,5,3,.88) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/></svg>");
  background-size: cover, 160px 160px;
  mix-blend-mode: normal;
}
.lm-auth__art > * { position: relative; z-index: 2; }
.lm-auth__art .lm-eyebrow { color: var(--lm-gold); }
@keyframes lm-aurora {
  0%   { transform: translate3d(-3%, -2%, 0) scale(1.10) rotate(0deg); }
  33%  { transform: translate3d(4%,  3%, 0) scale(1.22) rotate(7deg); }
  66%  { transform: translate3d(-2%, 5%, 0) scale(1.12) rotate(-5deg); }
  100% { transform: translate3d(3%, -3%, 0) scale(1.18) rotate(4deg); }
}
/* "On air" chip in the art panel */
.lm-onair {
  align-self: flex-start; display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--lm-font-mono); font-size: var(--lm-fs-3xs); letter-spacing: .24em;
  text-transform: uppercase; color: #FFE9D8;
  padding: .4em .9em; margin-bottom: auto; border-radius: var(--lm-r-pill);
  border: 1px solid rgba(255,120,60,.5); background: rgba(255,90,44,.10);
  backdrop-filter: blur(4px);
}
.lm-onair__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lm-accent); box-shadow: 0 0 0 0 rgba(255,90,44,.65); animation: lm-onair-pulse 2.4s ease-out infinite; }
@keyframes lm-onair-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,90,44,.6); }
  70%  { box-shadow: 0 0 0 10px rgba(255,90,44,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,90,44,0); }
}
@media (prefers-reduced-motion: reduce) {
  .lm-auth__art--aurora::before { animation: none; }
  .lm-onair__dot { animation: none; }
}
.lm-auth__art-title {
  font-family: var(--lm-font-display); color: #fff;
  font-size: clamp(2rem, 3.4vw, 3.25rem); line-height: 1.02;
  margin: var(--lm-3) 0 var(--lm-2); max-width: 15ch;
}
.lm-auth__art-sub { color: rgba(245,241,232,.82); max-width: 34ch; }
.lm-auth__panel {
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1.5rem, 4vw, var(--lm-8));
  background: var(--lm-paper);
}
.lm-auth__card { width: 100%; max-width: 380px; }

/* Single-column onboarding card (signup / wide forms) — reuses .lm-auth field styles */
.lm-auth--single {
  display: block; grid-template-columns: none; min-height: 0;
  max-width: 760px; margin: var(--lm-5) auto var(--lm-8);
  background: var(--lm-paper); padding: clamp(1.5rem, 4vw, var(--lm-7));
}
.lm-onboard-head { margin-bottom: var(--lm-5); }
.lm-onboard-head .lm-auth__title { margin: var(--lm-2) 0 0; }
.lm-auth--single .form-check-label { color: var(--lm-ink-2); font-size: var(--lm-fs-sm); }
.lm-auth--single .form-select { appearance: auto; }
.lm-auth--single .greyText a, .lm-auth--single a.whiteColor,
.lm-auth--single a.text-primary, .lm-auth--single a.blue--text { color: var(--lm-accent-ink) !important; font-weight: 600; }
/* Accent the terms/opt-in checkboxes */
.lm-auth .form-check-input, .lm-auth--single .form-check-input { accent-color: var(--lm-accent); }
.lm-auth__logo { max-width: 148px; margin-bottom: var(--lm-5); }
.lm-auth__title { font-size: var(--lm-fs-2xl); margin: var(--lm-2) 0 var(--lm-5); }

/* ---- Restyle the login/signup form internals (contract preserved) -------- */
.lm-auth #login-form .form-control,
.lm-auth .form-control {
  width: 100%; font-family: var(--lm-font-body); font-size: var(--lm-fs-md);
  color: var(--lm-ink); background: var(--lm-surface);
  border: 1.5px solid var(--lm-line-strong); border-radius: var(--lm-r-2);
  padding: .85em 1em; height: auto; box-shadow: none;
  transition: border-color var(--lm-dur-1) var(--lm-ease), box-shadow var(--lm-dur-1) var(--lm-ease);
}
.lm-auth .form-control::placeholder { color: var(--lm-faint); }
.lm-auth .form-control:focus {
  outline: none; border-color: var(--lm-ink); background: var(--lm-surface);
  box-shadow: 0 0 0 3px rgba(229,64,30,.14);
}
.lm-auth .passwordBlock { position: relative; }
.lm-auth .eyeIcon { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); cursor: pointer; color: var(--lm-muted); }
.lm-auth .eyeIcon .h4 { margin: 0; }
.lm-auth .messageDiv { font-size: var(--lm-fs-xs); color: var(--lm-danger); min-height: 1em; margin-bottom: .25rem; }
.lm-auth .forgotLink a, .lm-auth .forgotLink {
  font-family: var(--lm-font-mono); font-size: var(--lm-fs-2xs);
  letter-spacing: .06em; text-transform: uppercase; color: var(--lm-muted);
}
.lm-auth .forgotLink a:hover { color: var(--lm-accent-ink); }

/* Buttons inside auth — remap Bootstrap variants to the Lumen kit */
.lm-auth .btn {
  font-family: var(--lm-font-body); font-weight: 600; letter-spacing: .01em;
  border-radius: var(--lm-r-pill); border-width: 1.5px; box-shadow: none;
  transition: transform var(--lm-dur-1) var(--lm-ease), box-shadow var(--lm-dur-1) var(--lm-ease), background var(--lm-dur-1) var(--lm-ease), color var(--lm-dur-1) var(--lm-ease);
}
.lm-auth .btn-lg { padding: .95em 1.6em; font-size: var(--lm-fs-md); }
.lm-auth .btn:hover { transform: translateY(-1px); box-shadow: var(--lm-sh-2); }
.lm-auth .btn-primary, .lm-auth .submitBtn {
  background: var(--lm-accent) !important; border-color: var(--lm-accent) !important; color: var(--lm-on-accent) !important;
}
.lm-auth .btn-white, .lm-auth .submitBtnOTP {
  background: transparent !important; border-color: var(--lm-ink) !important; color: var(--lm-ink) !important;
}
.lm-auth .btn-white:hover, .lm-auth .submitBtnOTP:hover { background: var(--lm-ink) !important; color: var(--lm-paper) !important; }
.lm-auth .btn-secondary {
  background: var(--lm-paper-2) !important; border-color: var(--lm-line-strong) !important; color: var(--lm-ink) !important;
}
.lm-auth .btn-outline-secondary { background: transparent !important; border-color: var(--lm-line-strong) !important; color: var(--lm-ink) !important; }
.lm-auth .btn:disabled { opacity: .5; transform: none; box-shadow: none; }

.lm-auth h6 { font-family: var(--lm-font-mono); font-size: var(--lm-fs-2xs); letter-spacing: .18em; color: var(--lm-muted); }
.lm-auth .border-top, .lm-auth .border-bottom { border-color: var(--lm-line) !important; }
.lm-auth .greyText, .lm-auth .caption2 { color: var(--lm-muted); }
.lm-auth a.blue--text { color: var(--lm-accent-ink); font-weight: 600; }

/* ---- Login modal ---------------------------------------------------------- */
#loginModal .modal-content {
  background: var(--lm-paper); border: 1px solid var(--lm-line);
  border-radius: var(--lm-r-2); box-shadow: var(--lm-sh-3);
}
#loginModal .modal-body { padding: var(--lm-7) var(--lm-6); }
#loginModal .lm-auth__title, #loginModal h2 { font-family: var(--lm-font-display); font-size: var(--lm-fs-xl); color: var(--lm-ink); }
/* Login-modal form (previously inherited from .lm-auth; now scoped so the modal
   keeps its show/hide behaviour — .lm-auth's display:grid was overriding
   Bootstrap's .modal display:none and blocking the whole page). */
#loginModal .passwordBlock { position: relative; }
#loginModal .eyeIcon { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); cursor: pointer; color: var(--lm-muted); }
#loginModal .messageDiv { font-size: var(--lm-fs-xs); color: var(--lm-danger); min-height: 1em; }
#loginModal .forgotLink a, #loginModal .forgotLink { font-family: var(--lm-font-mono); font-size: var(--lm-fs-2xs); letter-spacing: .06em; text-transform: uppercase; color: var(--lm-muted); }
#loginModal .forgotLink a:hover { color: var(--lm-accent-ink); }
#loginModal .btn { font-family: var(--lm-font-body); font-weight: 600; border-radius: var(--lm-r-pill); border-width: 1.5px; box-shadow: none; }
#loginModal .btn-white, #loginModal .submitBtnOTP { background: transparent !important; border-color: var(--lm-line-strong) !important; color: var(--lm-ink) !important; }
#loginModal .btn-secondary { background: var(--lm-paper-2) !important; border-color: var(--lm-line-strong) !important; color: var(--lm-ink) !important; }
#loginModal .greyText, #loginModal .caption2 { color: var(--lm-muted); }
#loginModal a.blue--text { color: var(--lm-accent-ink); font-weight: 600; }
#loginModal .form-check-input { accent-color: var(--lm-accent); }

/* ---- Responsive ----------------------------------------------------------- */
@media (max-width: 820px) {
  .lm-auth { grid-template-columns: 1fr; min-height: 0; }
  .lm-auth__art { min-height: 220px; padding: var(--lm-5); }
  .lm-auth__art-title { font-size: 1.75rem; }
}

/* ---- Auth: admin login background photo + flow-wide split ------------------
   login / otp / forgot / change / activate all share the .lm-auth split. When
   the admin has uploaded a login background (Update Branding → get_branding_image(3)
   → $loginBg) the art panel renders it as a cover photo; otherwise it falls back
   to the animated aurora. The .lm-auth__art::after veil keeps the eyebrow/title
   readable over any uploaded image. */
.lm-auth__art--photo {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #160d07;
}
.lm-auth__card--wide { max-width: 460px; }

/* forgot-password step nav, rendered inside the auth panel */
.lm-auth .nav { border: 0; gap: .25rem; flex-wrap: nowrap; padding-left: 0; }
.lm-auth .nav .nav-item { list-style: none; }
.lm-auth .nav .nav-link {
  font-family: var(--lm-font-mono); font-size: var(--lm-fs-2xs);
  letter-spacing: .08em; text-transform: uppercase; color: var(--lm-muted);
  padding: .35rem 0; border: 0; border-bottom: 2px solid transparent;
}
.lm-auth .nav .nav-item.active .nav-link, .lm-auth .nav .nav-link.active {
  color: var(--lm-ink); border-bottom-color: var(--lm-accent);
}
.lm-auth .nav .nav-link.disabled { opacity: .4; }
.lm-auth .spinner-border { color: var(--lm-accent) !important; }
.lm-auth hr { border-color: var(--lm-line); }
.lm-auth .form-group label { font-size: var(--lm-fs-sm); color: var(--lm-ink-2); }

/* ============================================================================
   LUMEN — Phase 1: Plans / packages & checkout (#plansMain)
   Structural re-layout: a data-driven editorial pricing matrix — cycle toggle,
   auto-fit tier grid, a highlighted recommended tier, feature rows, then a
   clean step-2 payment selector. Data contract & Vue hooks preserved.
   ============================================================================ */
#plansMain { color: var(--lm-ink); }
/* Kill the dark-theme white text so it stays legible on the warm canvas */
#plansMain .text-white-50 { color: var(--lm-muted) !important; }
#plansMain .text-white     { color: var(--lm-ink) !important; }
#plansMain .text-info      { color: var(--lm-accent-ink) !important; }
#plansMain .text-success   { color: var(--lm-success) !important; }
#plansMain .text-danger    { color: var(--lm-line-strong) !important; }

#plansMain > .card,
#plansMain .card {
  background: transparent; border: 0; box-shadow: none;
}
#plansMain .stepperHolder { max-width: var(--lm-maxw); margin-inline: auto; }
#plansMain h2, #plansMain .h2, #plansMain .h3, #plansMain h3 { font-family: var(--lm-font-display); }
#plansMain .h2 { font-size: var(--lm-fs-2xl); }

/* Billing-cycle toggle (rendered only when the packages span >1 cycle) */
.lm-cycle-wrap { display: flex; justify-content: center; margin: 0 auto var(--lm-6); }
.lm-cycle {
  display: inline-flex; gap: 2px; padding: 4px;
  background: var(--lm-paper-2); border: 1px solid var(--lm-line);
  border-radius: var(--lm-r-pill);
}
.lm-cycle__opt {
  border: 0; background: transparent; color: var(--lm-ink-2);
  font-family: var(--lm-font-mono); font-size: var(--lm-fs-2xs);
  letter-spacing: .12em; text-transform: uppercase;
  padding: .55em 1.15em; border-radius: var(--lm-r-pill); cursor: pointer;
  transition: background var(--lm-dur-1) var(--lm-ease), color var(--lm-dur-1) var(--lm-ease);
}
.lm-cycle__opt:hover { color: var(--lm-ink); }
.lm-cycle__opt.is-active { background: var(--lm-accent); color: var(--lm-on-accent); }

/* Pricing matrix — auto-fit tier grid, always centred (1..N packages) */
.lm-pricing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 300px));
  gap: var(--lm-5);
  justify-content: center;
  align-items: stretch;
  max-width: 1120px;
  margin-inline: auto;
}

/* Tier card */
.lm-plan {
  position: relative; display: flex; flex-direction: column;
  background: var(--lm-surface);
  border: 1px solid var(--lm-line);
  border-radius: var(--lm-r-2);
  padding: var(--lm-6) var(--lm-5) var(--lm-5);
  transition: transform var(--lm-dur-2) var(--lm-ease-out), box-shadow var(--lm-dur-2) var(--lm-ease-out), border-color var(--lm-dur-2) var(--lm-ease-out);
}
.lm-plan:hover { transform: translateY(-4px); box-shadow: var(--lm-sh-3); border-color: var(--lm-line-strong); }
.lm-plan--featured { border-color: var(--lm-accent); box-shadow: 0 0 0 1px var(--lm-accent), var(--lm-sh-3); }
.lm-plan.is-selected { border-color: var(--lm-accent); }
.lm-plan__ribbon {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  font-family: var(--lm-font-mono); font-size: var(--lm-fs-2xs);
  letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  background: var(--lm-accent); color: var(--lm-on-accent);
  padding: .4em .95em; border-radius: var(--lm-r-pill);
}
.lm-plan__head { text-align: center; margin-bottom: var(--lm-3); }
.lm-plan__name { font-family: var(--lm-font-display); font-size: var(--lm-fs-xl); margin: 0 0 .3rem; }
.lm-plan__cycle {
  font-family: var(--lm-font-mono); font-size: var(--lm-fs-2xs);
  letter-spacing: .1em; text-transform: uppercase; color: var(--lm-muted); margin: 0;
}
.lm-plan__price {
  text-align: center; padding: var(--lm-3) 0 var(--lm-4);
  border-bottom: 1px solid var(--lm-line); margin-bottom: var(--lm-4);
}
.lm-plan__amount {
  font-family: var(--lm-font-display); font-size: var(--lm-fs-3xl);
  line-height: 1; color: var(--lm-ink);
}

/* Feature rows — icon + wrapping copy (never char-wraps) */
.lm-plan__features { list-style: none; margin: 0 0 var(--lm-5); padding: 0; display: flex; flex-direction: column; gap: .8rem; flex: 1 1 auto; }
.lm-feat { display: flex; align-items: flex-start; gap: .6rem; font-size: var(--lm-fs-sm); line-height: 1.35; color: var(--lm-ink-2); text-align: left; }
.lm-feat .mdi { flex: 0 0 auto; font-size: 1.15rem; line-height: 1.25; }
.lm-feat.is-on  .mdi { color: var(--lm-success); }
.lm-feat.is-off { color: var(--lm-muted); }
.lm-feat.is-off .mdi { color: var(--lm-line-strong); }
.lm-feat strong { color: var(--lm-accent-ink); font-family: var(--lm-font-mono); }

/* Tier CTA — colour driven by --vod-package-btn; featured tier uses the accent */
.lm-plan__cta { margin-top: auto; }
.lm-plan__btn {
  display: block; width: 100%; text-align: center; cursor: pointer;
  padding: .8rem 1rem; border-radius: var(--lm-r-pill);
  font-weight: 600; font-size: var(--lm-fs-sm);
  border: 1.5px solid var(--vod-package-btn, var(--lm-line-strong));
  background: var(--vod-package-btn, var(--lm-paper-2)); color: var(--lm-ink);
  transition: transform var(--lm-dur-1) var(--lm-ease), box-shadow var(--lm-dur-1) var(--lm-ease), background var(--lm-dur-1) var(--lm-ease);
}
.lm-plan__btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--lm-sh-2); }
.lm-plan__btn--featured { background: var(--lm-accent); border-color: var(--lm-accent); color: var(--lm-on-accent); }
.lm-plan__btn:disabled { opacity: .55; cursor: default; }
.lm-plan__trial { text-align: center; margin: var(--lm-3) 0 0; font-family: var(--lm-font-mono); font-size: var(--lm-fs-2xs); color: var(--lm-muted); }

/* Loading / empty states */
.lm-plans-loading, .lm-plans-empty { display: flex; align-items: center; justify-content: center; min-height: 240px; }
.lm-plans-loading .spinner-border { color: var(--lm-accent) !important; }
.lm-plans-empty span { font-family: var(--lm-font-mono); color: var(--lm-muted); }

@media (max-width: 575.98px) {
  .lm-pricing { grid-template-columns: minmax(0, 360px); }
  .lm-plan__amount { font-size: var(--lm-fs-2xl); }
}

/* Checkout / payment cards & radios */
#plansMain .card2 { background: var(--lm-surface); border: 1px solid var(--lm-line); border-radius: var(--lm-r-2); }
#plansMain .radioCard, #plansMain .paymentsRadio {
  background: var(--lm-surface); border: 1.5px solid var(--lm-line-strong); border-radius: var(--lm-r-2);
  transition: border-color var(--lm-dur-1) var(--lm-ease), box-shadow var(--lm-dur-1) var(--lm-ease);
}
#plansMain .radioCard.active, #plansMain .paymentsRadio.active,
#plansMain .radioCard:hover, #plansMain .paymentsRadio:hover { border-color: var(--lm-accent); box-shadow: 0 0 0 3px rgba(229,64,30,.10); }
#plansMain .form-check-input { accent-color: var(--lm-accent); }
#plansMain .form-control, #plansMain .form-controlBg {
  background: var(--lm-surface); color: var(--lm-ink);
  border: 1.5px solid var(--lm-line-strong); border-radius: var(--lm-r-2);
}
#plansMain .form-control:focus { border-color: var(--lm-ink); box-shadow: 0 0 0 3px rgba(229,64,30,.14); }
#plansMain .messageDiv { color: var(--lm-danger); font-size: var(--lm-fs-xs); }

/* Buttons */
#plansMain .btn { border-radius: var(--lm-r-pill); font-weight: 600; box-shadow: none; border-width: 1.5px;
  transition: transform var(--lm-dur-1) var(--lm-ease), box-shadow var(--lm-dur-1) var(--lm-ease); }
#plansMain .btn:hover { transform: translateY(-1px); box-shadow: var(--lm-sh-2); }
#plansMain .btn-primary { background: var(--lm-accent) !important; border-color: var(--lm-accent) !important; color: var(--lm-on-accent) !important; }
#plansMain .btn-primary:disabled { opacity: .5; transform: none; box-shadow: none; }
#plansMain .btn-secondary { background: var(--lm-paper-2) !important; border-color: var(--lm-line-strong) !important; color: var(--lm-ink) !important; }

/* Step 2 — payment-method selector */
#plansMain .paymentMethods h2, #plansMain .paymentMethods .h4 { font-family: var(--lm-font-display); }
#plansMain .paymentMethods .form-check-label { color: var(--lm-ink); }
#plansMain .paymentLogoImg svg { max-height: 26px; width: auto; }

/* iOS plans (informational — no in-app purchase) */
#iosPlans .lm-ios-plans { max-width: 520px; margin: var(--lm-7) auto; padding-inline: var(--lm-gutter); }
#iosPlans .lm-ios-plans__list { display: flex; flex-direction: column; gap: var(--lm-2); }
#iosPlans .lm-ios-plan {
  display: flex; align-items: center; justify-content: space-between; gap: var(--lm-4);
  padding: var(--lm-3) var(--lm-4);
  background: var(--lm-surface); border: 1px solid var(--lm-line); border-radius: var(--lm-r-2);
}
#iosPlans .lm-ios-plan__title { font-family: var(--lm-font-display); font-size: var(--lm-fs-md); }
#iosPlans .lm-ios-plan__price { font-family: var(--lm-font-mono); color: var(--lm-accent-ink); white-space: nowrap; }
#iosPlans .lm-ios-plans__note { margin: var(--lm-6) 0 0; text-align: center; color: var(--lm-muted); font-family: var(--lm-font-mono); font-size: var(--lm-fs-sm); }
#iosPlans .lm-ios-plans__link { color: var(--lm-accent-ink); word-break: break-all; }

/* Free-trial card */
#forgotPassword .lm-trial { max-width: 560px; margin: var(--lm-7) auto; padding-inline: var(--lm-gutter); }
#forgotPassword .lm-trial__card {
  background: var(--lm-surface); border: 1px solid var(--lm-line); border-radius: var(--lm-r-2);
  padding: var(--lm-7) var(--lm-6); text-align: center;
}
#forgotPassword .lm-trial__eyebrow { font-family: var(--lm-font-mono); font-size: var(--lm-fs-2xs); letter-spacing: .14em; text-transform: uppercase; color: var(--lm-accent-ink); margin: 0 0 var(--lm-3); }
#forgotPassword .lm-trial__title { font-family: var(--lm-font-display); font-size: var(--lm-fs-2xl); margin: 0 0 var(--lm-3); }
#forgotPassword .lm-trial__lede { color: var(--lm-ink-2); margin: 0 0 var(--lm-5); }
#forgotPassword .lm-trial__btn {
  border-radius: var(--lm-r-pill); font-weight: 600;
  background: var(--lm-accent) !important; border-color: var(--lm-accent) !important; color: var(--lm-on-accent) !important;
}

/* ============================================================================
   LUMEN — Phase 1: Profile select "Who's watching?" (CSS-only, #profilesHolder)
   ============================================================================ */
#profilesHolder { background: var(--lm-paper); }
#profilesHolder .profileHeading, #profilesHolder .display-4 {
  font-family: var(--lm-font-display) !important; color: var(--lm-ink);
  font-weight: 700; letter-spacing: -.01em;
  font-size: clamp(2.25rem, 5vw, 4rem) !important;
}
/* Avatar tiles */
#profilesHolder .profileBlock {
  border-radius: var(--lm-r-2) !important;
  box-shadow: var(--lm-sh-1);
  transition: transform var(--lm-dur-2) var(--lm-ease-out), box-shadow var(--lm-dur-2) var(--lm-ease-out), outline-color var(--lm-dur-1) var(--lm-ease);
  outline: 2px solid transparent; outline-offset: 3px;
}
#profilesHolder .profileBlock:hover,
#profilesHolder .profileBlock:focus-visible {
  transform: translateY(-4px) scale(1.02);
  box-shadow: var(--lm-sh-3);
  outline-color: var(--lm-accent);
}
/* Add-profile tile → dashed editorial outline on ivory */
#profilesHolder .profileBlock:has(.mdi-plus) {
  background-color: transparent !important;
  border: 1.5px dashed var(--lm-line-strong) !important;
  color: var(--lm-muted) !important;
  box-shadow: none;
}
#profilesHolder .profileBlock:has(.mdi-plus):hover { border-color: var(--lm-accent) !important; color: var(--lm-accent-ink) !important; }
#profilesHolder .profileText {
  font-family: var(--lm-font-body); color: var(--lm-ink-2);
  font-size: clamp(.9rem, 1.1vw, 1.05rem) !important; font-weight: 500;
}
#profilesHolder .profileText .mdi-lock-outline { color: var(--lm-muted); }
/* Manage button */
#profilesHolder .profileManageBtn {
  font-family: var(--lm-font-mono); text-transform: uppercase;
  font-size: clamp(.72rem, .95vw, .85rem) !important; letter-spacing: .18em !important;
  border-radius: var(--lm-r-pill) !important; border: 1.5px solid var(--lm-ink) !important;
  color: var(--lm-ink) !important; background: transparent !important; padding: .8em 2.2em !important;
  transition: background var(--lm-dur-1) var(--lm-ease), color var(--lm-dur-1) var(--lm-ease);
}
#profilesHolder .profileManageBtn:hover { background: var(--lm-ink) !important; color: var(--lm-paper) !important; }
/* Edit overlay actions (manage mode) */
#profilesHolder .editOptions { background-color: rgba(22,19,14,.55); }
#profilesHolder .editOptions .btn { border-color: rgba(255,255,255,.75); color: #fff; }

/* Add-profile modal (light) */
#addProfile .modal-content { background: var(--lm-paper); border: 1px solid var(--lm-line); border-radius: var(--lm-r-2); box-shadow: var(--lm-sh-3); }
#addProfile .modal-header, #addProfile .modal-footer { border-color: var(--lm-line); }
#addProfile .modal-title { font-family: var(--lm-font-display); color: var(--lm-ink); }
#addProfile .close { color: var(--lm-ink); opacity: .7; }
#addProfile .form-control, #addProfile .form-controlBg {
  background: var(--lm-surface); color: var(--lm-ink);
  border: 1.5px solid var(--lm-line-strong); border-radius: var(--lm-r-2);
}
#addProfile .form-control:focus { border-color: var(--lm-ink); box-shadow: 0 0 0 3px rgba(229,64,30,.14); }
#addProfile .messageDiv { color: var(--lm-danger); font-size: var(--lm-fs-xs); }
#addProfile .btn { border-radius: var(--lm-r-pill); font-weight: 600; box-shadow: none; }
#addProfile .btn-primary { background: var(--lm-accent) !important; border-color: var(--lm-accent) !important; color: var(--lm-on-accent) !important; }
#addProfile .btn-secondary { background: var(--lm-paper-2) !important; border-color: var(--lm-line-strong) !important; color: var(--lm-ink) !important; }

/* PIN / locked-profile modal — dark theater island so white text reads */
#staticBackdrop .modal-content { background: var(--lm-theater); color: var(--lm-theater-ink); border-radius: var(--lm-r-2); }
#staticBackdrop h1 { font-family: var(--lm-font-display); color: var(--lm-theater-ink); }
#staticBackdrop .otp-input {
  background: rgba(255,255,255,.06); color: var(--lm-theater-ink);
  border: 1.5px solid rgba(245,241,232,.35) !important; border-radius: var(--lm-r-2);
}
#staticBackdrop .otp-input:focus { outline: 2px solid var(--lm-accent); }

/* ============================================================================
   LUMEN — Phase 1: Add / edit profile (CSS-only, #editProfile)
   ============================================================================ */
#editProfile { max-width: 820px; margin-inline: auto; }
#editProfile .card {
  background: var(--lm-surface); border: 1px solid var(--lm-line);
  border-radius: var(--lm-r-2); box-shadow: var(--lm-sh-2); padding: clamp(1rem, 3vw, var(--lm-6)) !important;
}
#editProfile h2 { font-family: var(--lm-font-display); color: var(--lm-ink); font-weight: 700; }
#editProfile .divider { height: 1px; background: var(--lm-line); border: 0; }
#editProfile .backIcon { border-color: var(--lm-line-strong) !important; color: var(--lm-ink) !important; }
#editProfile .backIcon:hover { background: var(--lm-ink) !important; color: var(--lm-paper) !important; }
#editProfile .profileBlock { border-radius: var(--lm-r-2) !important; }
#editProfile .form-control, #editProfile .form-controlBg, #editProfile .form-select {
  background: var(--lm-surface); color: var(--lm-ink);
  border: 1.5px solid var(--lm-line-strong); border-radius: var(--lm-r-2);
}
#editProfile .form-control:focus, #editProfile .form-select:focus { border-color: var(--lm-ink); box-shadow: 0 0 0 3px rgba(229,64,30,.14); outline: none; }
#editProfile .passwordBlock { position: relative; }
#editProfile .eyeIcon { position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); color: var(--lm-muted); }
#editProfile .messageDiv { color: var(--lm-danger); font-size: var(--lm-fs-xs); }
#editProfile .form-check-input { accent-color: var(--lm-accent); }
#editProfile .btn { border-radius: var(--lm-r-pill); font-weight: 600; box-shadow: none; border-width: 1.5px;
  transition: transform var(--lm-dur-1) var(--lm-ease), box-shadow var(--lm-dur-1) var(--lm-ease); }
#editProfile .btn:hover { transform: translateY(-1px); box-shadow: var(--lm-sh-2); }
#editProfile .btn-primary { background: var(--lm-accent) !important; border-color: var(--lm-accent) !important; color: var(--lm-on-accent) !important; }
#editProfile .btn-secondary { background: var(--lm-paper-2) !important; border-color: var(--lm-line-strong) !important; color: var(--lm-ink) !important; }
#editProfile .btn-danger { background: var(--lm-danger) !important; border-color: var(--lm-danger) !important; color: #fff !important; }
#editProfile .btn-outline-secondary { background: transparent !important; border-color: var(--lm-line-strong) !important; color: var(--lm-ink) !important; }

/* ============================================================================
   LUMEN — override layer to beat youwaves.css !important declarations
   youwaves.css sets `.form-control { border-color: transparent !important }` and
   `.card { background: var(--vod-card-bg) !important }`. Load order alone can't beat
   !important, so these higher-specificity + !important rules restore the Lumen look
   for every re-skinned onboarding/account scope.
   ============================================================================ */
.lm-auth .form-control, .lm-auth .form-select, #loginModal .form-control,
#plansMain .form-control, #plansMain .form-controlBg,
#editProfile .form-control, #editProfile .form-controlBg, #editProfile .form-select,
#addProfile .form-control, #addProfile .form-controlBg,
#accountSettings .form-control, #accountSettings .form-controlBg, #accountSettings .form-select,
.videoDetails .form-control, .videoDetails .form-select {
  border: 1.5px solid var(--lm-line-strong) !important;
  color: var(--lm-ink) !important;
  border-radius: var(--lm-r-2) !important;
  height: auto;
}
.lm-auth .form-control:focus, .lm-auth .form-select:focus, #loginModal .form-control:focus,
#plansMain .form-control:focus,
#editProfile .form-control:focus, #editProfile .form-select:focus,
#addProfile .form-control:focus,
#accountSettings .form-control:focus, #accountSettings .form-select:focus {
  border-color: var(--lm-ink) !important;
  box-shadow: 0 0 0 3px rgba(229,64,30,.14) !important;
}
/* Plans outer wrapper card should be seamless on the ivory canvas */
#plansMain > .card, #plansMain .stepperHolder > .card { background: transparent !important; }

/* ============================================================================
   LUMEN — Phase 6: Series + episodes
   Series hero reuses .videoDetails (Phase 5). This adds the episode list chrome.
   ============================================================================ */
.videoDetails .seriesIndex {
  font-family: var(--lm-font-display); font-size: var(--lm-fs-xl); font-weight: 700;
  color: var(--lm-line-strong); line-height: 1.2;
}
.videoDetails > .insidePadding hr { border-top: 1px solid var(--lm-line); margin: var(--lm-3) 0; }
.videoDetails .loadMoreIcon .btn-outline-white { border-radius: var(--lm-r-pill) !important; width: 44px; height: 44px; }
.videoDetails .form-select:focus { border-color: var(--lm-ink) !important; box-shadow: 0 0 0 3px rgba(229,64,30,.14) !important; }

/* ============================================================================
   LUMEN — Phase 7: My-list & Person
   My-list toggle handled above; cards already skinned. This adds the person page.
   ============================================================================ */
#artistHolder h5 { font-family: var(--lm-font-display) !important; color: var(--lm-ink); font-weight: 700; font-size: var(--lm-fs-xl); }
#artistHolder .media-body p, #artistHolder .media-body span { color: var(--lm-ink-2); line-height: 1.7; }
#artistHolder img { border-radius: var(--lm-r-2); }
#artistHolder hr { border-top: 1px solid var(--lm-line); }
#artistHolder .spinner-border.text-primary { color: var(--lm-accent) !important; }
#artistHolder .btn-outline-white { border: 0 !important; background: transparent !important; color: var(--lm-accent-ink) !important; padding: 0 !important; text-transform: none; letter-spacing: 0; font-family: var(--lm-font-body); }
#artistHolder .btn-primary { background: var(--lm-accent) !important; border-color: var(--lm-accent) !important; color: var(--lm-on-accent) !important; border-radius: var(--lm-r-pill) !important; }
#artistHolder .text-center p { color: var(--lm-muted); }

/* ============================================================================
   LUMEN — Phase 8: Utility & system pages (404, blocked, message, password)
   ============================================================================ */
.lead { font-family: var(--lm-font-body); color: var(--lm-ink-2); }
#pageNotFound h2, #pageNotFound .h2 { font-family: var(--lm-font-display); font-weight: 700; }
#pageNotFound .nav-link.text-primary, #pageNotFound .text-primary {
  color: var(--lm-accent-ink) !important; font-family: var(--lm-font-mono);
  font-size: var(--lm-fs-xs); letter-spacing: .1em; text-transform: uppercase;
}
#pageNotFound .nav-link:hover { color: var(--lm-ink) !important; }
/* Password-protected gate */
#password_entered.form-control {
  background: var(--lm-surface) !important; color: var(--lm-ink) !important;
  border: 1.5px solid var(--lm-line-strong) !important; border-radius: var(--lm-r-2) !important;
}
#password_entered.form-control:focus { border-color: var(--lm-ink) !important; box-shadow: 0 0 0 3px rgba(229,64,30,.14) !important; }
/* Message / flash alerts → editorial surface cards with a semantic left rule */
.alert {
  border-radius: var(--lm-r-2); border: 1px solid var(--lm-line); border-left-width: 3px;
  background: var(--lm-surface); color: var(--lm-ink); font-family: var(--lm-font-body); box-shadow: var(--lm-sh-1);
}
.alert h5 { font-family: var(--lm-font-display); color: var(--lm-ink); }
.alert-danger { border-left-color: var(--lm-danger) !important; }
.alert-warning { border-left-color: var(--lm-gold) !important; }
.alert-success { border-left-color: var(--lm-success) !important; }
.alert-info { border-left-color: var(--lm-forest) !important; }
.alert .close { color: var(--lm-ink); opacity: .6; }

/* ============================================================================
   LUMEN — Phase 9: Motion, a11y, responsive & performance polish
   (Base already ships: global prefers-reduced-motion reduce block, :focus-visible
   rings, display=swap fonts. This layer adds the finishing touches.)
   ============================================================================ */
/* Sticky-header offset so in-page anchors aren't hidden behind the nav */
html { scroll-padding-top: 88px; }
/* Consistent, high-contrast focus ring on interactive media targets */
.videoBlock a:focus-visible, .slideBlock a:focus-visible, .swiperHolder a:focus-visible,
.headerMain a:focus-visible, .headerDropMenu a:focus-visible {
  outline: 2px solid var(--lm-accent) !important; outline-offset: 3px; border-radius: var(--lm-r-1);
}
/* Tasteful, reduced-motion-safe entrance for hero + rows */
@media (prefers-reduced-motion: no-preference) {
  .videoDetails .detailsThumb, .slideBlockHero, .hero { animation: lm-rise var(--lm-dur-3) var(--lm-ease-out) both; }
}
/* Large-TV / ultra-wide: cap line lengths & keep hero legible without breaking gutters */
@media (min-width: 1920px) {
  .popover-description p, .lead { max-width: 78ch; }
  :root { --lm-fs-md: 1.125rem; }
}
/* Perf: hint the browser for smoother card transforms without forcing layers everywhere */
.videoBlock .res-img, .swiperHolder .swiper-button-next, .swiperHolder .swiper-button-prev { will-change: transform; }
/* Reduced motion: also neutralise the entrance + transform hints */
@media (prefers-reduced-motion: reduce) {
  .videoDetails .detailsThumb, .slideBlockHero, .hero { animation: none !important; }
  .videoBlock .res-img { will-change: auto; }
}

/* ============================================================================
   LUMEN — Phase 1: Account settings (CSS-only, #accountSettings)
   ============================================================================ */
#accountSettings { max-width: var(--lm-maxw); margin-inline: auto; color: var(--lm-ink); }
#accountSettings > h2, #accountSettings .h2 { font-family: var(--lm-font-display); font-weight: 700; font-size: var(--lm-fs-2xl); }
#accountSettings hr { border-top: 1px solid var(--lm-line); }
/* Section labels → editorial mono eyebrow */
#accountSettings .h5.font-weight-lighter, #accountSettings h3.h5 {
  font-family: var(--lm-font-mono); font-size: var(--lm-fs-2xs) !important; letter-spacing: .18em;
  text-transform: uppercase; color: var(--lm-muted); font-weight: 500;
}
#accountSettings .subtitle-1 { font-family: var(--lm-font-body); color: var(--lm-ink); }
#accountSettings .grey--text, #accountSettings .grey-text { color: var(--lm-muted) !important; }
#accountSettings .text-danger { color: var(--lm-accent-ink) !important; }
/* White-on-dark links become ink with an accent underline (were invisible on ivory) */
#accountSettings .hoverUnderLineTextWhite {
  color: var(--lm-ink) !important; cursor: pointer;
  border-bottom: 1px solid transparent; transition: border-color var(--lm-dur-1) var(--lm-ease), color var(--lm-dur-1) var(--lm-ease);
}
#accountSettings .hoverUnderLineTextWhite:hover { color: var(--lm-accent-ink) !important; border-bottom-color: var(--lm-accent); }
#accountSettings .whiteColor { color: var(--lm-ink) !important; }
/* Badges → chips */
#accountSettings .badge { font-family: var(--lm-font-mono); font-weight: 500; letter-spacing: .06em;
  border-radius: var(--lm-r-pill); padding: .35em .7em; }
#accountSettings .badge-secondary { background: var(--lm-paper-2); color: var(--lm-ink); border: 1px solid var(--lm-line-strong); }
/* Accordion (profiles) as editorial rows */
#accountSettings #accordion .card { background: transparent !important; border: 0; border-top: 1px solid var(--lm-line); }
#accountSettings .card-header { background: transparent; border: 0; cursor: pointer; }
/* Buttons */
#accountSettings .btn { border-radius: var(--lm-r-pill); font-weight: 600; box-shadow: none; border-width: 1.5px;
  transition: transform var(--lm-dur-1) var(--lm-ease), box-shadow var(--lm-dur-1) var(--lm-ease); }
#accountSettings .btn:hover { transform: translateY(-1px); box-shadow: var(--lm-sh-2); }
#accountSettings .btn-secondary { background: var(--lm-paper-2) !important; border-color: var(--lm-line-strong) !important; color: var(--lm-ink) !important; }
#accountSettings .btn-primary { background: var(--lm-accent) !important; border-color: var(--lm-accent) !important; color: var(--lm-on-accent) !important; }
#accountSettings .btn.disabled, #accountSettings .btn:disabled { opacity: .5; transform: none; box-shadow: none; }
/* Change-email / password / language modals */
#accountSettings .modal-content { background: var(--lm-paper); border: 1px solid var(--lm-line); border-radius: var(--lm-r-2); box-shadow: var(--lm-sh-3); }
#accountSettings .modal-header, #accountSettings .modal-footer { border-color: var(--lm-line); }
#accountSettings .modal-title { font-family: var(--lm-font-display); color: var(--lm-ink); }
#accountSettings .modal .close { color: var(--lm-ink); opacity: .7; }
#accountSettings .messageDiv { color: var(--lm-danger); font-size: var(--lm-fs-xs); }
#accountSettings .form-check-input { accent-color: var(--lm-accent); }

/* ============================================================================
   LUMEN — Phase 2: Global shell (header nav, search, dropdowns, footer)
   CSS-only; every Vue mount (#searchMain), menu loop, dropdown hook preserved.
   ============================================================================ */
/* Header bar — solid ivory with a hairline, subtle shadow once scrolled */
.headerMain {
  background: var(--lm-paper) !important; background-color: var(--lm-paper) !important;
  border-bottom: 1px solid var(--lm-line);
  transition: box-shadow var(--lm-dur-2) var(--lm-ease), border-color var(--lm-dur-2) var(--lm-ease);
}
.appHeaderOpt .headerMain {
  background: var(--lm-paper) !important; background-color: var(--lm-paper) !important;
  box-shadow: 0 8px 28px -20px rgba(22,19,14,.55); border-bottom-color: var(--lm-line-strong);
}
.headerMain .logo img { max-height: 40px; width: auto; }
/* YouWaves brand lockup: wave mark + site name (sans wordmark, matches nav & mark) */
.headerMain .logo { width: auto; height: auto; }
.headerMain .logo .yw-brand { display: inline-flex; align-items: center; gap: .55rem; height: auto; }
.headerMain .logo .yw-brand .yw-logo { height: 42px; width: 42px; flex: 0 0 auto; }
.headerMain .logo .yw-brand__name {
  font-family: var(--lm-font-body);
  font-size: var(--lm-fs-lg);
  font-weight: 700;
  letter-spacing: -.01em;
  text-transform: none;
  line-height: 1;
  color: var(--lm-ink);
  white-space: nowrap;
}
@media (max-width: 575px) {
  .headerMain .logo .yw-brand .yw-logo { height: 34px; width: 34px; }
  .headerMain .logo .yw-brand__name { font-size: var(--lm-fs-md); }
}
/* Nav links → ink, accent hover, active underline */
.headerMain .whiteColor, .headerMain .btn.text-white { color: var(--lm-ink) !important; }
.headerMain .topNav .nav-link, .headerMain .navDropMenu .dropdown-toggle {
  font-family: var(--lm-font-body); font-weight: 500; letter-spacing: .01em;
  color: var(--lm-ink) !important; position: relative;
  transition: color var(--lm-dur-1) var(--lm-ease);
}
.headerMain .topNav .nav-link:hover { color: var(--lm-accent-ink) !important; }
.headerMain .topNav .nav-link.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--lm-accent);
}
/* Search */
.headerMain .searchInput {
  background: var(--lm-surface) !important; color: var(--lm-ink) !important;
  border: 1.5px solid var(--lm-line-strong) !important; border-radius: var(--lm-r-pill) !important;
}
.headerMain .searchInput::placeholder { color: var(--lm-faint) !important; }
.headerMain .searchBtn i, .headerMain .userMenu .mdi, .headerMain .langChange .mdi { color: var(--lm-ink) !important; }
.headerMain .userMenu .caption2 { color: var(--lm-ink) !important; }
/* Auth CTA buttons (youwaves sets .headBtn.btn-primary background:none!important) */
.headerMain .headBtn.btn-primary {
  background: var(--lm-accent) !important; border: 1.5px solid var(--lm-accent) !important;
  color: var(--lm-on-accent) !important; border-radius: var(--lm-r-pill) !important;
  padding: .5em 1.35em !important; font-weight: 600;
  transition: transform var(--lm-dur-1) var(--lm-ease), box-shadow var(--lm-dur-1) var(--lm-ease);
}
.headerMain .headBtn.btn-primary:hover { transform: translateY(-1px); box-shadow: var(--lm-sh-2); }
/* Dropdown menus (already light via --vod-menu-bg) — refine borders/hover */
.headerDropMenu {
  border: 1px solid var(--lm-line) !important; border-radius: var(--lm-r-2) !important;
  box-shadow: var(--lm-sh-3); padding: var(--lm-2) 0;
}
.headerDropMenu .dropdown-divider { border-top-color: var(--lm-line) !important; }
.headerDropMenu a, .headerDropMenu .dropdown-item {
  font-family: var(--lm-font-body); transition: background var(--lm-dur-1) var(--lm-ease), color var(--lm-dur-1) var(--lm-ease);
}
.headerDropMenu a:hover, .headerDropMenu .dropdown-item:hover { background: var(--lm-paper-2) !important; color: var(--lm-accent-ink) !important; }
.headerDropMenu a.text-danger { color: var(--lm-accent-ink) !important; }
.headerDropMenu a.langDropDown.active { color: var(--lm-accent-ink) !important; font-weight: 600; }

/* Footer — dark editorial band with an accent top rule */
.footerHolder { border-top: 3px solid var(--lm-accent); }
.footerHolder .ftLink, .footerHolder .ftLink a, .footerHolder span, .footerHolder .text-muted1 { color: #C9C2B4 !important; }
.footerHolder .ftLink.text-uppercase {
  font-family: var(--lm-font-mono); letter-spacing: .14em; font-size: var(--lm-fs-2xs);
  transition: color var(--lm-dur-1) var(--lm-ease);
}
.footerHolder .ftLink.text-uppercase:hover { color: #FBF9F3 !important; }
.footerHolder h2, .footerHolder .h5 { font-family: var(--lm-font-display); color: #F5F1E8; }
.footerHolder .socialIocns a { color: #C9C2B4; transition: color var(--lm-dur-1) var(--lm-ease); }
.footerHolder .socialIocns a:hover { color: var(--lm-accent); }
.footerHolder .socialIocns .svgIcon svg path { fill: currentColor; }

/* ============================================================================
   LUMEN — Phase 3: Home (content rows, cards, swiper, hero)
   CSS-only; Vue card/series/swiper components + mounts untouched. These card
   styles also carry into Browse / Search / Series (same components).
   ============================================================================ */
/* Row heading → editorial section header */
.headingMain h4 {
  font-family: var(--lm-font-display) !important; color: var(--lm-ink) !important;
  font-weight: 700; letter-spacing: -.01em; font-size: var(--lm-fs-lg);
}
.headingMain { position: relative; }
.headingMain .whiteColor, .exploreDiv .whiteColor, .exploreDiv { color: var(--lm-ink) !important; }
.headingMain .exploreDiv {
  font-family: var(--lm-font-mono); font-size: var(--lm-fs-2xs); letter-spacing: .12em;
  text-transform: uppercase; transition: color var(--lm-dur-1) var(--lm-ease);
}
.headingMain a:hover .exploreDiv { color: var(--lm-accent-ink) !important; }

/* Swiper arrows → ink discs on paper */
.swiperHolder .swiper-button-next, .swiperHolder .swiper-button-prev {
  color: var(--lm-paper) !important; background: var(--lm-ink);
  width: 40px; height: 40px; border-radius: var(--lm-r-pill);
  box-shadow: var(--lm-sh-2); transition: transform var(--lm-dur-1) var(--lm-ease), background var(--lm-dur-1) var(--lm-ease);
}
.swiperHolder .swiper-button-next:hover, .swiperHolder .swiper-button-prev:hover { background: var(--lm-accent); transform: scale(1.06); }
.swiperHolder .swiper-button-next::after, .swiperHolder .swiper-button-prev::after { font-size: 18px !important; font-weight: 700; }

/* Card — editorial poster tile */
.videoBlock .card { border-radius: var(--lm-r-2); overflow: hidden; }
.videoBlock .res-img { border-radius: var(--lm-r-2); transition: transform var(--lm-dur-3) var(--lm-ease-out); }
.videoBlock.hoverOnVideo .res-img { transform: scale(1.03); }
.videoBlock .videoInfo { background: var(--lm-surface); }
.videoBlock .videoInfo .textColor { color: var(--lm-muted) !important; font-family: var(--lm-font-mono); font-size: var(--lm-fs-2xs); }
.videoBlock .videoInfo .title { color: var(--lm-ink); }
.videoBlock .maturityTextBadge {
  font-family: var(--lm-font-mono); font-size: var(--lm-fs-3xs); letter-spacing: .04em;
  border: 1px solid var(--lm-line-strong); border-radius: var(--lm-r-1); padding: 0 .35em; color: var(--lm-muted);
}
/* Action circles */
.videoBlock .boxBtn.playBtn2 { background: var(--lm-accent) !important; color: var(--lm-on-accent) !important; }
.videoBlock .boxBtn:hover { transform: translateY(-1px); }
.videoBlock .card-img-overlay .btn-warning { background: var(--lm-gold) !important; border-color: var(--lm-gold) !important; color: var(--lm-ink) !important; font-family: var(--lm-font-mono); font-size: var(--lm-fs-3xs); letter-spacing: .06em; border-radius: var(--lm-r-pill); }
.videoBlock .card-img-overlay .btn-primary.rounded-circle { background: var(--lm-accent) !important; border-color: var(--lm-accent) !important; }

/* Hero (editorPicks) — cinematic full-bleed; text stays light over the image */
.slideTitle { font-family: var(--lm-font-display) !important; font-weight: 800; letter-spacing: -.01em; }
.sldieBtns .btn { border-radius: var(--lm-r-pill) !important; font-weight: 600; font-family: var(--lm-font-body); }
.sldieBtns .btn.btn-primary, .sldieBtns .btn-lg:first-child {
  background: var(--lm-accent) !important; border-color: var(--lm-accent) !important; color: var(--lm-on-accent) !important;
}
.sldieBtns .btn.btn-secondary {
  background: rgba(245,241,232,.14) !important; border: 1.5px solid rgba(245,241,232,.6) !important; color: #F5F1E8 !important;
  backdrop-filter: blur(6px);
}
.sldieBtns .btn.btn-secondary:hover { background: rgba(245,241,232,.24) !important; }

/* ============================================================================
   LUMEN — Phase 4: Browse / Category / Search
   Cards + grid already re-skinned (Phase 3). This covers titles, filter pills,
   and the search page chrome. CSS-only.
   ============================================================================ */
.page-title { font-family: var(--lm-font-display) !important; color: var(--lm-ink) !important; font-weight: 700 !important; letter-spacing: -.01em; }
/* Genre / Language filter pills */
.btn-outline-white {
  border: 1.5px solid var(--lm-line-strong) !important; color: var(--lm-ink) !important; background: transparent !important;
  border-radius: var(--lm-r-pill) !important; font-family: var(--lm-font-mono); font-size: var(--lm-fs-2xs);
  letter-spacing: .1em; text-transform: uppercase;
  transition: background var(--lm-dur-1) var(--lm-ease), color var(--lm-dur-1) var(--lm-ease);
}
.btn-outline-white:hover, .btn-outline-white:focus, .btn-outline-white.dropdown-toggle[aria-expanded="true"] {
  background: var(--lm-ink) !important; color: var(--lm-paper) !important;
}
.cateMenu .innerMenu { display: flex; flex-wrap: wrap; max-width: 460px; }

/* Search page */
#searchPage h2, #searchPage .h3 { font-family: var(--lm-font-display); font-weight: 700; color: var(--lm-ink); }
#searchPage .form-control {
  background: var(--lm-surface) !important; color: var(--lm-ink) !important;
  border: 1.5px solid var(--lm-line-strong) !important; border-radius: var(--lm-r-pill) !important;
}
#searchPage .form-control:focus { border-color: var(--lm-ink) !important; box-shadow: 0 0 0 3px rgba(229,64,30,.14) !important; }
#searchPage .form-control::placeholder { color: var(--lm-faint) !important; }
#searchPage .searchBtn1 i { color: var(--lm-ink) !important; }
/* Layout toggle (movies / series) as a segmented control — search + my-list */
#searchPage .btn-group .btn-secondary, #mylist .btn-group .btn-secondary {
  background: var(--lm-paper-2) !important; border: 1.5px solid var(--lm-line-strong) !important; color: var(--lm-ink) !important;
  font-family: var(--lm-font-body); font-weight: 500;
}
#searchPage .btn-group .btn-secondary:hover, #searchPage .btn-group .btn-secondary.active,
#mylist .btn-group .btn-secondary:hover, #mylist .btn-group .btn-secondary.active { background: var(--lm-ink) !important; color: var(--lm-paper) !important; border-color: var(--lm-ink) !important; }
#searchPage .btn-group > .btn-secondary:first-child, #mylist .btn-group > .btn-secondary:first-child { border-top-left-radius: var(--lm-r-pill) !important; border-bottom-left-radius: var(--lm-r-pill) !important; }
#searchPage .btn-group > .btn-secondary:last-child, #mylist .btn-group > .btn-secondary:last-child { border-top-right-radius: var(--lm-r-pill) !important; border-bottom-right-radius: var(--lm-r-pill) !important; }
/* Empty / no-content card */
.container > .card.p-5 { background: var(--lm-surface) !important; border: 1px solid var(--lm-line); border-radius: var(--lm-r-2); text-align: center; box-shadow: var(--lm-sh-2); }
.container > .card.p-5 h2 { font-family: var(--lm-font-display); }

/* ============================================================================
   LUMEN — Phase 5: Video detail + player surround (CSS-only, .videoDetails)
   The player mount (video-js / vidlixPlayer_skin) and its config are untouched.
   ============================================================================ */
/* Cinematic hero — title/meta/actions sit over the dark thumbnail, so keep light */
.videoDetails .popover-title, .videoDetails .videoLogo h1 {
  font-family: var(--lm-font-display) !important; letter-spacing: -.01em; font-weight: 800;
}
.videoDetails .innerShade { background: linear-gradient(0deg, rgba(15,13,10,.92) 0%, rgba(15,13,10,.35) 45%, rgba(15,13,10,.05) 100%) !important; }
.videoDetails .badge-secondary-outline {
  border: 1px solid rgba(245,241,232,.55); border-radius: var(--lm-r-pill); color: #F5F1E8;
  font-family: var(--lm-font-mono); font-size: var(--lm-fs-3xs); letter-spacing: .06em;
}
.videoDetails .textColor, .videoDetails .overlapData small { color: #DAD3C4 !important; }
/* Primary play / resume → accent pill; secondary action circles → glass */
.videoDetails .playResumeBtn {
  background: var(--lm-accent) !important; border: 1.5px solid var(--lm-accent) !important; color: var(--lm-on-accent) !important;
  border-radius: var(--lm-r-pill) !important; font-weight: 600; padding: .55em 1.4em !important;
  transition: transform var(--lm-dur-1) var(--lm-ease), box-shadow var(--lm-dur-1) var(--lm-ease);
}
.videoDetails .playResumeBtn:hover { transform: translateY(-1px); box-shadow: var(--lm-sh-2); }
.videoDetails .rundedBtn {
  background: rgba(245,241,232,.12) !important; border: 1.5px solid rgba(245,241,232,.5) !important; color: #F5F1E8 !important;
  border-radius: var(--lm-r-pill) !important; backdrop-filter: blur(6px);
  transition: background var(--lm-dur-1) var(--lm-ease), border-color var(--lm-dur-1) var(--lm-ease), transform var(--lm-dur-1) var(--lm-ease);
}
.videoDetails .rundedBtn:hover { background: var(--lm-accent) !important; border-color: var(--lm-accent) !important; color: var(--lm-on-accent) !important; transform: translateY(-1px); }
.videoDetails .progress { background: rgba(245,241,232,.25) !important; border-radius: var(--lm-r-pill); }
.videoDetails .progress-bar.bg-danger { background: var(--lm-accent) !important; }
/* Below the hero (on ivory): description, cast, related, about */
.videoDetails .popover-description p, .videoDetails .popover-description { color: var(--lm-ink-2); line-height: 1.75; max-width: 70ch; }
.videoDetails > .insidePadding h4 { font-family: var(--lm-font-display); color: var(--lm-ink); font-weight: 700; }
.videoDetails > .insidePadding h4 .font-weight-lighter { font-family: var(--lm-font-mono); font-size: var(--lm-fs-2xs); letter-spacing: .14em; text-transform: uppercase; color: var(--lm-muted); }

/* ============================================================================
   LUMEN — Off-Air re-tone: coral→amber gradient signal on warm near-black
   (Palette flip lives in :root above; this layer adds the gradient moments.)
   ============================================================================ */
/* Signature gradient text — for hero display lines (matches the off-air page) */
.lm-gradient-text, .slideTitle, .lm-auth__art-title {
  background: var(--lm-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--lm-accent);
}
/* Primary CTAs get the coral→amber gradient with dark text everywhere */
.lm-btn--accent,
.btn.btn-primary,
.headerMain .headBtn.btn-primary,
#plansMain .btn-primary,
#editProfile .btn-primary,
#accountSettings .btn-primary,
#artistHolder .btn-primary,
.lm-auth .btn-primary, .lm-auth .submitBtn,
#loginModal .btn-primary, #loginModal .submitBtn,
.videoDetails .playResumeBtn,
.sldieBtns .btn.btn-primary,
.container > .card.p-5 .btn-primary {
  background-image: var(--lm-gradient) !important;
  background-color: var(--lm-accent) !important;
  color: var(--lm-on-accent) !important;
  border-color: transparent !important;
}
/* Card hover overlay glow to echo the warm radial signal */
.videoBlock.hoverOnVideo .card-img-overlay { box-shadow: inset 0 -80px 60px -40px rgba(240,86,46,.35); }
/* Section-head index + eyebrow keep the coral signal; live/off-air dot pulses */
.lm-section-head { border-top-color: var(--lm-line); }
.lm-section-head__title { color: var(--lm-ink); }
.headingMain h4 { color: var(--lm-ink) !important; }

/* ============================================================================
   LUMEN — SweetAlert2 skin (Off-Air). Loads after the base swal css, so these
   win by order. Restyles the confirm/toast dialogs used across the viewer.
   ============================================================================ */
.swal2-container { padding: 1rem; }
.swal2-backdrop-show, .swal2-container.swal2-backdrop-show { background: rgba(8,5,3,.72) !important; backdrop-filter: blur(3px); }
.swal2-popup {
  background: var(--lm-surface) !important; color: var(--lm-ink) !important;
  border: 1px solid var(--lm-line); border-radius: 18px !important;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.75), 0 0 0 1px rgba(255,120,60,.06);
  padding: 2.25rem 2rem 1.75rem !important; width: 30rem; max-width: calc(100vw - 2rem);
  font-family: var(--lm-font-body);
}
/* subtle warm glow at the top of the card, echoing the on-air signal */
.swal2-popup::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 120px; pointer-events: none;
  background: radial-gradient(120% 100% at 50% 0%, rgba(255,90,44,.16), transparent 70%);
  border-radius: 18px 18px 0 0;
}
.swal2-title {
  font-family: var(--lm-font-display) !important; color: var(--lm-ink) !important;
  font-weight: 700; font-size: 1.9rem !important; letter-spacing: -.01em; padding-top: .25rem !important;
}
.swal2-html-container, .swal2-content {
  color: var(--lm-ink-2) !important; font-size: 1rem !important; line-height: 1.55; margin-top: .35rem !important;
}
.swal2-close { color: var(--lm-muted) !important; box-shadow: none !important; }
.swal2-close:hover { color: var(--lm-accent) !important; }

/* Icons — recolour rings/lines to the palette */
.swal2-icon { border-color: var(--lm-line-strong); margin: .5rem auto 1.25rem; }
.swal2-icon.swal2-warning { color: var(--lm-gold) !important; border-color: rgba(249,168,37,.5) !important; }
.swal2-icon.swal2-error { color: var(--lm-accent) !important; border-color: rgba(255,90,44,.45) !important; }
.swal2-icon.swal2-error [class^='swal2-x-mark-line'] { background-color: var(--lm-accent) !important; }
.swal2-icon.swal2-question { color: var(--lm-accent-ink) !important; border-color: rgba(255,122,60,.45) !important; }
.swal2-icon.swal2-info { color: var(--lm-gold) !important; border-color: rgba(249,168,37,.5) !important; }
.swal2-icon.swal2-success { color: var(--lm-success) !important; border-color: rgba(63,178,127,.45) !important; }
.swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: var(--lm-success) !important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(63,178,127,.35) !important; }

/* Buttons — pill kit; confirm = coral→amber gradient, deny/cancel = ghost */
.swal2-actions { gap: .75rem; margin-top: 1.5rem; }
.swal2-styled {
  font-family: var(--lm-font-body) !important; font-weight: 600 !important; font-size: .95rem !important;
  border-radius: 999px !important; padding: .7em 1.9em !important; margin: 0 !important;
  box-shadow: none !important; transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
}
.swal2-styled:focus { box-shadow: 0 0 0 3px rgba(255,90,44,.28) !important; }
.swal2-styled.swal2-confirm {
  background-image: var(--lm-gradient) !important; background-color: var(--lm-accent) !important;
  color: var(--lm-on-accent) !important; border: 0 !important;
}
.swal2-styled.swal2-confirm:hover { transform: translateY(-1px); box-shadow: 0 12px 26px -12px rgba(255,90,44,.6) !important; }
.swal2-styled.swal2-deny, .swal2-styled.swal2-cancel {
  background: transparent !important; color: var(--lm-ink) !important;
  border: 1.5px solid var(--lm-line-strong) !important;
}
.swal2-styled.swal2-deny:hover, .swal2-styled.swal2-cancel:hover { background: var(--lm-paper-2) !important; border-color: var(--lm-ink) !important; }
.swal2-timer-progress-bar { background: var(--lm-gradient) !important; }
.swal2-input, .swal2-textarea, .swal2-select {
  background: var(--lm-paper) !important; color: var(--lm-ink) !important;
  border: 1.5px solid var(--lm-line-strong) !important; border-radius: 10px !important; box-shadow: none !important;
}
.swal2-input:focus, .swal2-textarea:focus { border-color: var(--lm-ink) !important; box-shadow: 0 0 0 3px rgba(255,90,44,.18) !important; }
.swal2-validation-message { background: var(--lm-paper-2) !important; color: var(--lm-danger) !important; }

/* Toasts (top-end) */
.swal2-toast {
  background: var(--lm-surface) !important; color: var(--lm-ink) !important;
  border: 1px solid var(--lm-line); border-radius: 12px !important; box-shadow: var(--lm-sh-3) !important;
}
.swal2-toast .swal2-title { font-family: var(--lm-font-body) !important; font-size: .95rem !important; font-weight: 600; }
@media (max-width: 480px) { .swal2-popup { padding: 1.75rem 1.25rem 1.5rem !important; } .swal2-title { font-size: 1.55rem !important; } }

/* ============================================================================
   LUMEN — Cookie consent bar (cb_alerts extension markup, CSS-only redesign)
   Markup: <div class="alert alert-warning cookieConsentBar …"><span><i.mdi-cookie/>
   msg</span><button.acceptCookiesBtn.btn.btn-light>…</button></div>
   ============================================================================ */
.cookieConsentBar.alert {
  left: 24px; right: auto; bottom: 24px; margin: 0;
  width: min(460px, calc(100vw - 48px)) !important; max-width: 460px !important;
  display: flex; align-items: center; gap: 1rem;
  background: rgba(23,16,10,.90) !important; color: var(--lm-ink) !important;
  border: 1px solid var(--lm-line) !important; border-radius: 16px !important;
  padding: 1rem 1.1rem 1rem 1rem !important;
  box-shadow: 0 26px 60px -26px rgba(0,0,0,.85), 0 0 0 1px rgba(255,120,60,.06) !important;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  overflow: hidden; z-index: 1030;
  animation: lm-cookie-in .5s var(--lm-ease-out) both;
}
/* warm signal glow along the top edge */
.cookieConsentBar.alert::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 60%;
  background: radial-gradient(120% 100% at 12% 0%, rgba(255,90,44,.14), transparent 70%);
  pointer-events: none;
}
.cookieConsentBar.alert > * { position: relative; }
.cookieConsentBar span {
  display: flex; align-items: center; gap: .7rem; margin: 0;
  font-family: var(--lm-font-body); font-size: .875rem; line-height: 1.45; color: var(--lm-ink-2) !important;
}
.cookieConsentBar .mdi-cookie {
  flex: 0 0 auto; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(255,90,44,.14); color: var(--lm-accent);
  font-size: 20px; line-height: 1;
}
.acceptCookiesBtn.btn, .cookieConsentBar .acceptCookiesBtn {
  flex: 0 0 auto; align-self: center;
  background-image: var(--lm-gradient) !important; background-color: var(--lm-accent) !important;
  color: var(--lm-on-accent) !important; border: 0 !important; border-radius: 999px !important;
  font-family: var(--lm-font-body) !important; font-weight: 600 !important; font-size: .8rem !important;
  letter-spacing: .01em; line-height: 1.2; padding: .6em 1.15em !important; box-shadow: none !important;
  transition: transform .16s var(--lm-ease), box-shadow .16s var(--lm-ease);
}
.acceptCookiesBtn.btn:hover { transform: translateY(-1px); box-shadow: 0 12px 26px -12px rgba(255,90,44,.6) !important; }
.acceptCookiesBtn.btn:focus-visible { outline: 2px solid var(--lm-accent); outline-offset: 3px; }
@keyframes lm-cookie-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@media (max-width: 520px) {
  .cookieConsentBar.alert { left: 12px; right: 12px; bottom: 12px; width: auto !important; max-width: none !important; flex-wrap: wrap; }
  .cookieConsentBar span { flex: 1 1 100%; }
  .acceptCookiesBtn.btn { width: 100%; margin-top: .25rem; }
}
@media (prefers-reduced-motion: reduce) { .cookieConsentBar.alert { animation: none; } }