/* ================================================================
   BRANDING V8 — UP Sites Dark Theme
   upsites.digital design system replica

   Loads AFTER form.css — uses body.branding-active for specificity.
   Self-contained: overrides all CSS variables + adds dark-theme
   cosmetic layers, starfield, floating orbs, and astronaut system.
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* =============================================================
   1. CSS VARIABLES OVERRIDE
   ============================================================= */
body.branding-active {
  /* --- Core palette --- */
  --color-bg:               #002D54;
  --color-bg-darker:        #032037;
  --color-surface:          #ffffff;
  --color-surface-glass:    rgba(255, 255, 255, 0.97);
  --color-text-primary:     #1A1F47;
  --color-text-secondary:   #59608B;
  --color-text-tertiary:    #8C8C8C;
  --color-text-quaternary:  #aeaeb2;
  --color-border:           rgba(0, 0, 0, 0.10);
  --color-border-light:     rgba(0, 0, 0, 0.06);
  --color-accent:           #00B48F;
  --color-accent-light:     rgba(0, 180, 143, 0.08);
  --color-accent-medium:    rgba(0, 180, 143, 0.15);
  --color-focus:            rgba(0, 180, 143, 0.4);
  --color-focus-ring:       0 0 0 3px rgba(0, 180, 143, 0.25);
  --color-blue:             #008CFF;
  --color-error:            #de3730;
  --color-error-bg:         rgba(222, 55, 48, 0.06);
  --color-error-border:     rgba(222, 55, 48, 0.3);
  --color-success:          #00B48F;
  --color-success-bg:       rgba(0, 180, 143, 0.06);

  /* --- Legacy variable mappings (form.css compat) --- */
  --black:          #002D54;
  --dark:           #1A1F47;
  --text:           #1A1F47;
  --text-secondary: #59608B;
  --text-muted:     #8C8C8C;
  --border:         rgba(0, 0, 0, 0.10);
  --border-light:   rgba(0, 0, 0, 0.06);
  --bg:             #002D54;
  --card:           #ffffff;
  --input-bg:       #ffffff;
  --gold:           #00B48F;
  --gold-light:     #00CCA2;
  --gold-pale:      rgba(0, 180, 143, 0.08);
  --gold-border:    rgba(0, 180, 143, 0.3);
  --success:        #00B48F;
  --success-bg:     rgba(0, 180, 143, 0.06);
  --error:          #de3730;
  --error-bg:       rgba(222, 55, 48, 0.06);
  --radius:         12px;
  --radius-sm:      8px;
  --radius-lg:      16px;
  --shadow-sm:      0 1px 2px rgba(0, 0, 114, 0.03);
  --shadow:         0 1px 3px rgba(0, 0, 114, 0.04), 0 1px 2px rgba(0, 0, 114, 0.03);
  --shadow-md:      0 4px 12px rgba(0, 0, 114, 0.05);
  --shadow-lg:      rgba(0, 0, 114, 0.05) 0px 30px 80px;
  --transition:     0.2s cubic-bezier(0.4, 0, 0.2, 1);

  /* --- UP Sites specific tokens --- */
  --up-navy:        #002D54;
  --up-navy-deep:   #032037;
  --up-teal:        #00B48F;
  --up-teal-hover:  #00CCA2;
  --up-teal-dark:   #009B7A;
  --up-blue:        #008CFF;
  --up-heading:     #1A1F47;
  --up-heading-light: #FFFFFF;
  --up-card-title:  #371A45;
  --up-body:        #59608B;
  --up-muted:       #8C8C8C;
  --up-card-radius: 16px;
  --up-card-shadow: rgba(0, 0, 114, 0.05) 0px 30px 80px;
  --up-pill-radius: 60px;
  --up-wizard-radius: 24px;
}


/* =============================================================
   2. BODY & BACKGROUND
   ============================================================= */
body.branding-active {
  background: var(--up-navy) !important;
  color: var(--up-heading-light);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* Override the has-full-bg transparent bg — keep dark navy visible */
body.branding-active.has-full-bg,
body.branding-active {
  background: var(--up-navy) !important;
}

/* Starfield layer — pseudo-element on body */
body.branding-active::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 10% 15%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 25% 35%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 40% 8%, rgba(255,255,255,0.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 50%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 70% 20%, rgba(0,180,143,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 60%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 15% 70%, rgba(0,140,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 30% 85%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 65% 75%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 40%, rgba(0,180,143,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 48% 30%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 78% 90%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 5% 45%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 92% 12%, rgba(0,140,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 18% 92%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 60% 5%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 35% 55%, rgba(0,180,143,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 82% 78%, rgba(255,255,255,0.4) 0%, transparent 100%);
  animation: starfieldTwinkle 8s ease-in-out infinite alternate;
}

/* Secondary starfield layer with offset animation */
body.branding-active::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 33% 67%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 52% 18%, rgba(0,140,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 72% 44%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 88% 28%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 8% 80%, rgba(0,180,143,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 42% 92%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 62% 58%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 95% 72%, rgba(0,140,255,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 22% 48%, rgba(255,255,255,0.6) 0%, transparent 100%);
  animation: starfieldTwinkle 10s ease-in-out 3s infinite alternate-reverse;
}

@keyframes starfieldTwinkle {
  0%   { opacity: 0.6; }
  50%  { opacity: 1; }
  100% { opacity: 0.7; }
}


/* =============================================================
   3. WIZARD CONTAINER — White frosted card
   ============================================================= */
body.branding-active .wizard {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto;
  padding: 0;
  background: var(--color-surface-glass);
  border-radius: var(--up-wizard-radius);
  box-shadow: var(--up-card-shadow);
  min-height: auto;
  margin-top: 24px;
  margin-bottom: 40px;
  overflow: hidden;
}

/* Inner padding wrapper — achieved by padding on child elements */
body.branding-active .wizard > *:not(.journey-progress):not(.wizard-progress) {
  padding-left: 40px;
  padding-right: 40px;
}

/* Journey progress spans full width at top of card */
body.branding-active .journey-progress {
  padding: 16px 24px 8px;
  margin-bottom: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

/* The wizard-progress spans full width at top of the card */
body.branding-active .wizard-progress {
  margin: 0;
  padding-left: 40px;
  padding-right: 40px;
  border-radius: var(--up-wizard-radius) var(--up-wizard-radius) 0 0;
}

/* Brixi/character containers INSIDE wizard: size for welcome & submit */
body.branding-active .wizard .brixi-container .brixi-img {
  max-width: 240px;
  height: auto;
}
/* Step header: no character icon (UP Sites clean style) */
body.branding-active .wizard .step-header .brixi-container {
  display: none !important;
}

/* When full-page background is active, make wizard slightly transparent */
body.branding-active.has-full-bg .wizard {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}


/* =============================================================
   4. TYPOGRAPHY OVERRIDES
   ============================================================= */

body.branding-active .wizard-header {
  padding: 16px 0 8px;
}

/* --- Brand Mark --- */
body.branding-active .wizard-header .brand-mark {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--up-teal);
  margin-bottom: 8px;
}

body.branding-active .wizard-header .brand-mark .dot {
  width: 5px;
  height: 5px;
  background: var(--up-blue);
}

/* --- Wizard Header Title --- */
body.branding-active .wizard-header h1 {
  font-size: 36px;
  font-weight: 900;
  color: var(--up-heading);
  letter-spacing: -0.5px;
  text-transform: uppercase;
}

body.branding-active .wizard-header .subtitle {
  font-size: 15px;
  color: var(--up-body);
  font-weight: 400;
}

/* --- Step Header --- */
body.branding-active .step-counter {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--up-teal);
  margin-bottom: 8px;
}

body.branding-active .step-title {
  font-size: 30px;
  font-weight: 900;
  color: var(--up-heading);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1.2;
}

body.branding-active .step-subtitle {
  font-size: 14px;
  color: var(--up-body);
  margin-top: 4px;
}

body.branding-active .step-encouragement {
  display: inline-block;
  background: rgba(0, 180, 143, 0.10);
  color: var(--up-teal);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 16px;
  border-radius: 20px;
  margin-top: 12px;
  border: 1px solid rgba(0, 180, 143, 0.15);
}

/* --- Section Titles --- */

body.branding-active .section-title {
  font-weight: 800;
  color: var(--up-heading);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

body.branding-active .section-number {
  color: var(--up-teal);
  margin-bottom: 8px;
  font-weight: 700;
}

body.branding-active .section-subtitle {
  color: var(--up-body);
}


/* =============================================================
   5. FORM ELEMENTS
   ============================================================= */

/* --- Labels --- */
body.branding-active label.field-label {
  color: var(--up-heading);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

body.branding-active .required-mark {
  color: var(--up-teal);
}

/* --- Inputs, Textareas, Selects --- */
body.branding-active input[type="text"],
body.branding-active input[type="email"],
body.branding-active input[type="tel"],
body.branding-active input[type="url"],
body.branding-active textarea,
body.branding-active select {
  width: 100%;
  background: #ffffff;
  color: var(--up-heading);
  border: 1.5px solid rgba(0, 0, 0, 0.10);
  border-radius: 12px;
  padding: 13px 16px;
  font-size: 15px;
  font-family: 'Inter', sans-serif;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  outline: none;
}

body.branding-active input[type="text"]:focus,
body.branding-active input[type="email"]:focus,
body.branding-active input[type="tel"]:focus,
body.branding-active input[type="url"]:focus,
body.branding-active textarea:focus,
body.branding-active select:focus {
  border-color: var(--up-teal);
  box-shadow: 0 0 0 3px rgba(0, 180, 143, 0.15), 0 0 12px rgba(0, 180, 143, 0.08);
  background: #ffffff;
}

body.branding-active input::placeholder,
body.branding-active textarea::placeholder {
  color: var(--up-muted);
}

/* Autofill Override (Public Briefing Form) */
body.branding-active input:-webkit-autofill,
body.branding-active input:-webkit-autofill:hover,
body.branding-active input:-webkit-autofill:focus,
body.branding-active textarea:-webkit-autofill,
body.branding-active textarea:-webkit-autofill:hover,
body.branding-active textarea:-webkit-autofill:focus,
body.branding-active select:-webkit-autofill,
body.branding-active select:-webkit-autofill:hover,
body.branding-active select:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color: var(--up-heading) !important;
  border-color: rgba(0, 0, 0, 0.10) !important;
  transition: background-color 5000s ease-in-out 0s;
  caret-color: var(--up-heading);
}

body.branding-active .hint {
  color: var(--up-muted);
  font-size: 12px;
}

/* --- Select dropdown arrow (UP Sites teal-tinted) --- */
body.branding-active select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2359608B' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}


/* =============================================================
   5b. RADIO BUTTONS
   ============================================================= */
body.branding-active .radio-item {
  background: #ffffff;
  border: 1.5px solid rgba(0, 0, 0, 0.10);
  border-radius: 12px;
  transition: all 0.2s ease;
}

body.branding-active .radio-item:hover {
  border-color: rgba(0, 180, 143, 0.3);
  box-shadow: 0 0 0 2px rgba(0, 180, 143, 0.06);
}

body.branding-active .radio-item input[type="radio"] {
  accent-color: var(--up-teal);
}

body.branding-active .radio-item .radio-label {
  color: var(--up-heading);
  font-weight: 500;
}

body.branding-active .radio-item.selected {
  border-color: var(--up-teal);
  background: rgba(0, 180, 143, 0.04);
  box-shadow: 0 0 0 3px rgba(0, 180, 143, 0.08);
}


/* =============================================================
   5c. CHECKBOXES
   ============================================================= */
body.branding-active .checkbox-item {
  background: #ffffff;
  border: 1.5px solid rgba(0, 0, 0, 0.10);
  border-radius: 12px;
  transition: all 0.2s ease;
}

body.branding-active .checkbox-item:hover {
  border-color: rgba(0, 180, 143, 0.3);
}

body.branding-active .checkbox-item input[type="checkbox"] {
  accent-color: var(--up-teal);
}

body.branding-active .checkbox-item .cb-label {
  color: var(--up-heading);
}

body.branding-active .checkbox-item .cb-desc {
  color: var(--up-body);
}

body.branding-active .checkbox-item.checked {
  border-color: var(--up-teal);
  background: rgba(0, 180, 143, 0.04);
  box-shadow: 0 0 0 3px rgba(0, 180, 143, 0.08);
}
/* Fix: checkbox-item inside page-option should have no border/bg (higher specificity) */
body.branding-active .page-option .checkbox-item {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  display: block;
  padding: 0;
  margin: 0;
  border-radius: 0;
}

body.branding-active .page-option .checkbox-item:hover {
  border: none !important;
  background: transparent !important;
}

body.branding-active .page-option .checkbox-item.checked {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}



/* =============================================================
   6. BUTTONS
   ============================================================= */

/* --- Primary (Next) --- */
body.branding-active .btn-primary {
  background: var(--up-teal);
  color: #ffffff;
  border: none;
  border-radius: var(--up-pill-radius);
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 14px 36px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 14px rgba(0, 180, 143, 0.25);
}

body.branding-active .btn-primary:hover {
  background: var(--up-teal-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 180, 143, 0.35);
}

body.branding-active .btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 180, 143, 0.2);
}

/* --- Secondary (Prev) --- */
body.branding-active .btn-secondary {
  background: transparent;
  color: var(--up-body);
  border: 1.5px solid rgba(0, 0, 0, 0.12);
  border-radius: var(--up-pill-radius);
  font-weight: 600;
  font-size: 15px;
  padding: 14px 28px;
  transition: all 0.2s ease;
}

body.branding-active .btn-secondary:hover {
  border-color: rgba(0, 0, 0, 0.25);
  color: var(--up-heading);
  background: rgba(0, 0, 0, 0.02);
}

/* --- Submit --- */
body.branding-active .btn-submit {
  background: var(--up-teal);
  color: #ffffff;
  border: none;
  border-radius: var(--up-pill-radius);
  font-weight: 700;
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 18px 56px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 6px 20px rgba(0, 180, 143, 0.3);
}

body.branding-active .btn-submit:hover {
  background: var(--up-teal-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 180, 143, 0.4);
}

body.branding-active .btn-submit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

body.branding-active .btn-submit .spinner {
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
}

/* --- Add / Repeater Button --- */
body.branding-active .btn-add-item {
  border-color: rgba(0, 180, 143, 0.2);
  color: var(--up-body);
  border-radius: 12px;
}

body.branding-active .btn-add-item:hover {
  border-color: var(--up-teal);
  color: var(--up-teal);
  background: rgba(0, 180, 143, 0.04);
}


/* =============================================================
   7. WELCOME CARD & SUBMIT CARD
   ============================================================= */
body.branding-active .welcome-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--up-card-radius);
  box-shadow: 0 2px 8px rgba(0, 0, 114, 0.03);
  padding: 48px 40px;
}

body.branding-active .welcome-icon {
  background: rgba(0, 180, 143, 0.08);
  color: var(--up-teal);
  width: 68px;
  height: 68px;
  border-radius: 50%;
  font-size: 30px;
}

body.branding-active .welcome-card h2 {
  font-size: 24px;
  font-weight: 900;
  color: var(--up-heading);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

body.branding-active .welcome-card p {
  color: var(--up-body);
  font-size: 15px;
}

body.branding-active .welcome-features {
  gap: 12px;
  margin-top: 28px;
}

body.branding-active .welcome-feature {
  background: rgba(0, 45, 84, 0.03);
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.04);
  padding: 16px;
  transition: all 0.2s ease;
}

body.branding-active .welcome-feature:hover {
  background: rgba(0, 180, 143, 0.04);
  border-color: rgba(0, 180, 143, 0.1);
}

body.branding-active .welcome-feature .feat-text {
  color: var(--up-body);
  font-size: 13px;
}

body.branding-active .welcome-feature .feat-text strong {
  color: var(--up-heading);
  font-weight: 700;
}

/* Submit section text */
body.branding-active .submit-section p {
  color: var(--up-muted);
}


/* =============================================================
   7b. SECTION CARDS
   ============================================================= */
body.branding-active .section {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  margin-bottom: 24px;
  border-radius: 0;
}

body.branding-active .section:hover {
  box-shadow: none;
}


/* =============================================================
   8. PROGRESS BAR (top of wizard)
   ============================================================= */
body.branding-active .wizard-progress {
  background: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  padding-top: 20px;
  padding-bottom: 16px;
}

body.branding-active .progress-dot {
  background: rgba(0, 0, 0, 0.08);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

body.branding-active .progress-dot.active {
  background: var(--up-teal);
  box-shadow: 0 0 0 4px rgba(0, 180, 143, 0.15);
}

body.branding-active .progress-dot.completed {
  background: var(--up-teal);
}

body.branding-active .progress-line {
  background: rgba(0, 0, 0, 0.08);
}

body.branding-active .progress-line.completed {
  background: var(--up-teal);
}

body.branding-active .progress-label {
  color: var(--up-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

body.branding-active .progress-percentage {
  color: var(--up-teal);
  font-weight: 700;
}


/* =============================================================
   9. JOURNEY PROGRESS BAR (alternate progress visualization)
   ============================================================= */
body.branding-active .journey-progress {
  position: relative;
  padding: 16px 24px 8px;
  margin-bottom: 0;
}

body.branding-active .journey-track {
  position: absolute;
  top: 28px;
  left: 40px; right: 40px;
  height: 3px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 3px;
  z-index: 0;
}

body.branding-active .journey-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--up-teal), var(--up-blue));
  border-radius: 3px;
  transition: width 0.8s ease;
  box-shadow: 0 0 8px rgba(0, 180, 143, 0.3);
}

body.branding-active .journey-stops {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 1;
  position: relative;
  z-index: 1;
}

body.branding-active .journey-stop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
  transition: transform 0.3s ease;
}

/* Journey Stop Dots (UP Sites style: numbered circles) */
body.branding-active .journey-stop .stop-dot {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #8d94b8;
  background: #ffffff;
  border: 2px solid rgba(141, 148, 184, 0.25);
  transition: all 0.4s ease;
  position: relative;
  z-index: 2;
  box-shadow: 0 0 0 4px #ffffff;
}

body.branding-active .journey-stop.completed .stop-dot {
  background: var(--up-teal);
  border-color: var(--up-teal);
  color: #fff;
  box-shadow: 0 0 0 4px #ffffff, 0 2px 8px rgba(0, 180, 143, 0.3);
}

body.branding-active .journey-stop.active .stop-dot {
  background: var(--up-blue);
  border-color: var(--up-teal);
  margin-bottom: 8px;
  color: #fff;
  transform: scale(1.15);
  box-shadow: 0 0 0 4px #ffffff, 0 2px 12px rgba(0, 140, 255, 0.4);
}

/* Hide old planet/brixi elements if they still exist */
body.branding-active .journey-stop .stop-planet,
body.branding-active .journey-stop .stop-brixi,
body.branding-active .journey-stop .stop-check {
  display: none !important;
}

body.branding-active .journey-stop .stop-label {
  font-size: 9px;
  color: var(--up-body);
  font-weight: 600;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  transition: color 0.3s ease;
}

body.branding-active .journey-stop.completed .stop-label { color: var(--up-teal); }
body.branding-active .journey-stop.active .stop-label { color: var(--up-heading); font-weight: 700; }


/* =============================================================
   10. UPLOAD ZONE
   ============================================================= */
body.branding-active .upload-dropzone {
  border: 2px dashed rgba(0, 0, 0, 0.12);
  border-radius: 16px;
  background: rgba(0, 45, 84, 0.02);
  transition: all 0.25s ease;
}

body.branding-active .upload-dropzone:hover,
body.branding-active .upload-dropzone.dragover {
  border-color: var(--up-teal);
  background: rgba(0, 180, 143, 0.04);
}

body.branding-active .upload-dropzone p {
  color: var(--up-body);
}

body.branding-active .upload-browse {
  color: var(--up-teal);
  font-weight: 700;
}

body.branding-active .upload-item {
  background: rgba(0, 45, 84, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
}

body.branding-active .upload-name {
  color: var(--up-heading);
  font-weight: 500;
}

body.branding-active .upload-size {
  color: var(--up-muted);
}

body.branding-active .upload-percent {
  color: var(--up-teal);
  font-weight: 700;
}

body.branding-active .upload-progress-bar {
  background: linear-gradient(90deg, var(--up-teal), var(--up-blue));
}

body.branding-active .upload-or {
  color: var(--up-muted);
}

body.branding-active .upload-or::before,
body.branding-active .upload-or::after {
  background: rgba(0, 0, 0, 0.08);
}


/* =============================================================
   11. CALENDAR DATE PICKER
   ============================================================= */
body.branding-active .date-multi-picker {
  background: #ffffff;
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
}

body.branding-active .cal-month-year {
  color: var(--up-heading);
  font-weight: 700;
}

body.branding-active .cal-prev,
body.branding-active .cal-next {
  border-color: rgba(0, 0, 0, 0.10);
  border-radius: 10px;
  color: var(--up-heading);
}

body.branding-active .cal-prev:hover,
body.branding-active .cal-next:hover {
  border-color: var(--up-teal);
  color: var(--up-teal);
  background: rgba(0, 180, 143, 0.04);
}

body.branding-active .cal-header span {
  color: var(--up-muted);
  font-weight: 700;
}

body.branding-active .cal-day {
  color: var(--up-heading);
  border-radius: 10px;
}

body.branding-active .cal-day:hover:not(.disabled):not(.empty) {
  background: rgba(0, 180, 143, 0.08);
  color: var(--up-teal);
}

body.branding-active .cal-day.selected {
  background: var(--up-teal);
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 180, 143, 0.3);
}

body.branding-active .cal-day.today {
  border: 1.5px solid var(--up-teal);
}

body.branding-active .cal-day.disabled {
  color: rgba(0, 0, 0, 0.15);
}

body.branding-active .selected-date-tag {
  background: rgba(0, 180, 143, 0.08);
  border: 1px solid rgba(0, 180, 143, 0.2);
  color: var(--up-teal);
  font-weight: 600;
  border-radius: 20px;
}


/* =============================================================
   12. PAGE SELECTOR
   ============================================================= */
body.branding-active .page-option {
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  overflow: hidden;
}

body.branding-active .page-detail {
  background: rgba(0, 45, 84, 0.02);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}


/* =============================================================
   13. ERRORS
   ============================================================= */
body.branding-active .form-error {
  background: rgba(222, 55, 48, 0.05);
  border: 1px solid rgba(222, 55, 48, 0.2);
  color: var(--color-error);
  border-radius: 14px;
}

body.branding-active .field-error {
  border-color: var(--color-error) !important;
  box-shadow: 0 0 0 3px rgba(222, 55, 48, 0.08) !important;
}

body.branding-active .form-group.has-error label.field-label {
  color: var(--color-error);
}


/* =============================================================
   14. AUTOSAVE STATUS
   ============================================================= */
body.branding-active .autosave-status {
  color: var(--up-muted);
  font-size: 12px;
}

body.branding-active .autosave-status.saving {
  color: var(--up-teal);
  margin-bottom: 8px;
}

body.branding-active .autosave-status.saved {
  color: var(--up-teal);
}


/* =============================================================
   15. FOOTER
   ============================================================= */
body.branding-active .wizard-footer p {
  color: var(--up-muted) !important;
  font-size: 12px;
}

body.branding-active .wizard-footer strong {
  color: var(--up-body) !important;
}

body.branding-active .wizard-footer .divider-line {
  background: linear-gradient(90deg, var(--up-teal), var(--up-blue)) !important;
  width: 48px;
  height: 2px;
  border-radius: 1px;
}


/* =============================================================
   16. CONFIRM PAGE
   ============================================================= */
body.branding-active .confirm-page {
  position: relative;
  z-index: 2;
}

body.branding-active .confirm-icon {
  background: rgba(0, 180, 143, 0.08);
  color: var(--up-teal);
  width: 80px;
  height: 80px;
  font-size: 36px;
}

body.branding-active .confirm-page h1 {
  color: var(--up-heading-light);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

body.branding-active .confirm-name {
  color: rgba(255, 255, 255, 0.7);
}

body.branding-active .confirm-text {
  color: rgba(255, 255, 255, 0.85);
}

body.branding-active .confirm-info {
  background: rgba(0, 180, 143, 0.12);
  border: 1px solid rgba(0, 180, 143, 0.25);
  color: var(--up-teal);
  border-radius: 14px;
  font-weight: 600;
}


/* =============================================================
   17. REPEATERS
   ============================================================= */
body.branding-active .repeater-remove {
  border: 1.5px solid rgba(0, 0, 0, 0.10);
  border-radius: 10px;
  color: var(--up-muted);
}

body.branding-active .repeater-remove:hover {
  border-color: var(--color-error);
  color: var(--color-error);
  background: rgba(222, 55, 48, 0.04);
}


/* =============================================================
   18. FULL PAGE BACKGROUND SYSTEM (#pageBackground)
   ============================================================= */
body.branding-active #pageBackground {
  display: none !important;
}

body.branding-active .page-bg-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: opacity 1.5s ease-in-out;
  opacity: 0;
}

body.branding-active .page-bg-layer.active {
  opacity: 1;
}

body.branding-active .page-bg-layer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 45, 84, 0.6) 0%,
    rgba(0, 45, 84, 0.4) 40%,
    rgba(0, 45, 84, 0.7) 100%
  );
}

/* When full background is active, dim the starfield */
/* Starfield always full opacity — no Midjourney bg */
body.branding-active.has-full-bg::before,
body.branding-active.has-full-bg::after {
  opacity: 1;
}


/* =============================================================
   19. COSMIC BACKGROUND — Planets & Clouds (existing img-based HTML)
   ============================================================= */
/* v8.2 FIX: Hide all old planet/cloud decorations globally */
body.branding-active .cosmic-bg .planet,
body.branding-active .cosmic-bg .cloud {
  display: none !important;
  opacity: 0 !important;
}

body.branding-active .cosmic-bg {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

/* When full bg is active, hide planets/clouds */
/* Planets visible even when bg-step images exist on server */
body.branding-active.has-full-bg .cosmic-bg {
  opacity: 0 !important;
  transition: opacity 1s ease;
}

body.branding-active:not(.has-full-bg) .cosmic-bg {
  opacity: 1;
  transition: opacity 1s ease;
}

body.branding-active .cosmic-bg .planet {
  position: absolute;
  opacity: 0;
  transition: opacity 1.2s ease, top 1.5s ease, left 1.5s ease, right 1.5s ease, bottom 1.5s ease;
  will-change: opacity, transform;
}

body.branding-active .cosmic-bg .planet.visible { opacity: 0 !important; display: none !important; }

body.branding-active .cosmic-bg .planet img {
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(0, 180, 143, 0.3)) brightness(1.2) saturate(0.8);
}

body.branding-active .cosmic-bg .planet[data-pos="top-right"]    { top: 3%; right: -8px; width: 90px; height: 90px; animation: planetFloat1 10s ease-in-out infinite; }
body.branding-active .cosmic-bg .planet[data-pos="top-left"]     { top: 5%; left: -5px; width: 80px; height: 80px; animation: planetFloat2 12s ease-in-out infinite; }
body.branding-active .cosmic-bg .planet[data-pos="mid-right"]    { top: 40%; right: -5px; width: 70px; height: 70px; animation: planetFloat3 9s ease-in-out infinite; }
body.branding-active .cosmic-bg .planet[data-pos="mid-left"]     { top: 45%; left: -5px; width: 60px; height: 60px; animation: planetFloat1 11s ease-in-out infinite; }
body.branding-active .cosmic-bg .planet[data-pos="bottom-right"] { bottom: 8%; right: -8px; width: 85px; height: 85px; animation: planetFloat2 10s ease-in-out infinite; }
body.branding-active .cosmic-bg .planet[data-pos="bottom-left"]  { bottom: 10%; left: -6px; width: 75px; height: 75px; animation: planetFloat3 12s ease-in-out infinite; }

@keyframes planetFloat1 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes planetFloat2 { 0%,100% { transform: translateY(0); } 33% { transform: translateY(-8px); } 66% { transform: translateY(-4px); } }
@keyframes planetFloat3 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(5px,-10px); } }

body.branding-active .cosmic-bg .cloud {
  position: absolute;
  opacity: 0;
  transition: opacity 1.2s ease;
  will-change: opacity, transform;
}

body.branding-active .cosmic-bg .cloud.visible { opacity: 0 !important; display: none !important; }

body.branding-active .cosmic-bg .cloud img {
  width: 100%; height: 100%;
  object-fit: contain;
  filter: blur(1px) brightness(1.3) drop-shadow(0 0 20px rgba(0, 180, 143, 0.15));
}

body.branding-active .cosmic-bg .cloud[data-pos="top-wide"]     { top: 2%; left: 8%; width: 180px; height: 80px; animation: cloudDrift1 18s ease-in-out infinite; }
body.branding-active .cosmic-bg .cloud[data-pos="mid-right"]    { top: 30%; right: -15px; width: 150px; height: 70px; animation: cloudDrift2 20s ease-in-out infinite; }
body.branding-active .cosmic-bg .cloud[data-pos="bottom-wide"]  { bottom: 4%; left: 12%; width: 190px; height: 85px; animation: cloudDrift3 22s ease-in-out infinite; }
body.branding-active .cosmic-bg .cloud[data-pos="top-right"]    { top: 7%; right: 3%; width: 140px; height: 65px; animation: cloudDrift1 16s ease-in-out infinite; }
body.branding-active .cosmic-bg .cloud[data-pos="mid-left"]     { top: 50%; left: -10px; width: 160px; height: 75px; animation: cloudDrift2 19s ease-in-out infinite; }
body.branding-active .cosmic-bg .cloud[data-pos="bottom-right"] { bottom: 10%; right: 0; width: 170px; height: 80px; animation: cloudDrift3 17s ease-in-out infinite; }

@keyframes cloudDrift1 { 0%,100% { transform: translateX(0); } 50% { transform: translateX(15px); } }
@keyframes cloudDrift2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-10px,5px); } }
@keyframes cloudDrift3 { 0%,100% { transform: translateX(0); } 33% { transform: translateX(10px); } 66% { transform: translateX(-8px); } }


/* =============================================================
   20. LIGHT ORBS — Floating particles
   ============================================================= */
body.branding-active .light-orbs {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

body.branding-active .light-orb {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  animation: orbFloat linear infinite;
}

body.branding-active .light-orb:nth-child(1) {
  width: 4px; height: 4px;
  background: rgba(255, 255, 255, 0.6);
  left: 10%;
  animation-duration: 18s;
  animation-delay: 0s;
}
body.branding-active .light-orb:nth-child(2) {
  width: 3px; height: 3px;
  background: rgba(0, 180, 143, 0.7);
  left: 25%;
  animation-duration: 22s;
  animation-delay: 3s;
}
body.branding-active .light-orb:nth-child(3) {
  width: 5px; height: 5px;
  background: rgba(0, 140, 255, 0.5);
  left: 45%;
  animation-duration: 16s;
  animation-delay: 7s;
}
body.branding-active .light-orb:nth-child(4) {
  width: 3px; height: 3px;
  background: rgba(255, 255, 255, 0.5);
  left: 60%;
  animation-duration: 24s;
  animation-delay: 2s;
}
body.branding-active .light-orb:nth-child(5) {
  width: 4px; height: 4px;
  background: rgba(0, 180, 143, 0.5);
  left: 80%;
  animation-duration: 20s;
  animation-delay: 5s;
}
body.branding-active .light-orb:nth-child(6) {
  width: 3px; height: 3px;
  background: rgba(255, 255, 255, 0.4);
  left: 35%;
  animation-duration: 26s;
  animation-delay: 9s;
}
body.branding-active .light-orb:nth-child(7) {
  width: 6px; height: 6px;
  background: rgba(0, 140, 255, 0.4);
  left: 70%;
  animation-duration: 19s;
  animation-delay: 12s;
}
body.branding-active .light-orb:nth-child(8) {
  width: 3px; height: 3px;
  background: rgba(255, 255, 255, 0.5);
  left: 92%;
  animation-duration: 21s;
  animation-delay: 1s;
}
body.branding-active .light-orb:nth-child(9) {
  width: 4px; height: 4px;
  background: rgba(0, 180, 143, 0.6);
  left: 5%;
  animation-duration: 17s;
  animation-delay: 6s;
}
body.branding-active .light-orb:nth-child(10) {
  width: 3px; height: 3px;
  background: rgba(255, 255, 255, 0.3);
  left: 52%;
  animation-duration: 23s;
  animation-delay: 11s;
}

@keyframes orbFloat {
  0% {
    transform: translateY(110vh) scale(0);
    opacity: 0;
  }
  10% {
    opacity: 0.8;
    transform: translateY(90vh) scale(1);
  }
  90% {
    opacity: 0.6;
    transform: translateY(-5vh) scale(0.8);
  }
  100% {
    transform: translateY(-10vh) scale(0);
    opacity: 0;
  }
}


/* =============================================================
   21. SCENE BACKGROUND OVERLAY
   ============================================================= */
body.branding-active #sceneBackgroundOverlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

body.branding-active #sceneBackgroundOverlay .scene-bg-img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.5s ease;
  mix-blend-mode: screen;
  filter: saturate(0.5) brightness(0.6);
}

body.branding-active #sceneBackgroundOverlay .scene-bg-img.visible {
  opacity: 0.2;
}

/* When full bg is active, hide scene overlay */
body.branding-active.has-full-bg #sceneBackgroundOverlay {
  opacity: 0 !important;
  transition: opacity 1s ease;
}

body.branding-active:not(.has-full-bg) #sceneBackgroundOverlay {
  opacity: 1;
  transition: opacity 1s ease;
}

/* feat-text strong display block */
body.branding-active .feat-text strong { display: block; margin-bottom: 2px; }


/* =============================================================
   22. CHARACTER SYSTEM (#sceneBrixiOverlay)
   Works with existing scene-brixi HTML + supports astronaut SVGs
   ============================================================= */
body.branding-active #sceneBrixiOverlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}

/* Brixi/Astronaut containers */
body.branding-active .brixi-container { text-align: center; pointer-events: none; margin: 0 auto 12px; }

body.branding-active .brixi-img {
  max-width: 240px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 20px rgba(0, 180, 143, 0.15));
  animation: astronautFloat 5s ease-in-out infinite;
}

body.branding-active .welcome-card .brixi-container { margin-bottom: 4px; }
body.branding-active .welcome-card .brixi-img { max-width: 240px; }
body.branding-active .step-header .brixi-container { margin-bottom: 4px; }
body.branding-active .step-header .brixi-img { max-width: 100px; }

@keyframes astronautFloat {
  0%,100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-8px) rotate(1.5deg); }
  75% { transform: translateY(-4px) rotate(-1.5deg); }
}
/* ============ Alien Character Overrides ============ */
/* Alien images get a glow-pulse animation instead of float (background stays static) */
body.branding-active .brixi-img.brixi-alien {
  animation: astronautFloat 5s ease-in-out infinite;
  filter: drop-shadow(0 4px 24px rgba(0, 215, 237, 0.25));
}

/* Scene overlay alien: inherit original sizes, just override animation */

@keyframes alienGlowPulse {
  0%, 100% {
    filter: drop-shadow(0 4px 20px rgba(0, 215, 237, 0.2));
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 8px 32px rgba(0, 215, 237, 0.45)) drop-shadow(0 0 16px rgba(0, 232, 157, 0.2));
    transform: scale(1.015);
  }
}

/* Scene-positioned alien animations (no float/translate, just glow) */
body.branding-active .scene-brixi-left .brixi-img.brixi-alien {
  animation: astronautFloatLeft 6s ease-in-out infinite;
}
body.branding-active .scene-brixi-right .brixi-img.brixi-alien {
  animation: astronautFloatRight 6s ease-in-out infinite;
}
body.branding-active .scene-brixi-peek-left .brixi-img.brixi-alien {
  animation: astronautPeek 4s ease-in-out infinite;
}
body.branding-active .scene-brixi-peek-right .brixi-img.brixi-alien {
  animation: astronautPeekRight 4s ease-in-out infinite;
}

/* Admin/error/confirm alien: inherit original sizes, just override animation */


/* Scene Brixi positions (overlay characters) */
body.branding-active .scene-brixi-left {
  position: absolute; left: 3%; top: 50%;
  transform: translateY(-50%);
  transition: opacity 0.6s ease;
}
body.branding-active .scene-brixi-left .brixi-img {
  width: 160px; max-width: 160px;
  animation: astronautFloatLeft 6s ease-in-out infinite;
}
@keyframes astronautFloatLeft {
  0%,100% { transform: translateY(-50%) rotate(-2deg); }
  50% { transform: translateY(calc(-50% - 12px)) rotate(2deg); }
}

body.branding-active .scene-brixi-right {
  position: absolute; right: 3%; top: 50%;
  transform: translateY(-50%);
  transition: opacity 0.6s ease;
}
body.branding-active .scene-brixi-right .brixi-img {
  width: 160px; max-width: 160px;
  animation: astronautFloatRight 6s ease-in-out infinite;
}
@keyframes astronautFloatRight {
  0%,100% { transform: translateY(-50%) rotate(2deg); }
  50% { transform: translateY(calc(-50% - 12px)) rotate(-2deg); }
}

body.branding-active .scene-brixi-peek-left {
  position: absolute; left: -40px; bottom: 12%;
  transition: opacity 0.6s ease;
}
body.branding-active .scene-brixi-peek-left .brixi-img {
  width: 140px; max-width: 140px;
  animation: astronautPeek 4s ease-in-out infinite;
}
@keyframes astronautPeek {
  0%,100% { transform: translateX(-8px) rotate(-3deg); }
  50% { transform: translateX(20px) rotate(0deg); }
}

body.branding-active .scene-brixi-peek-right {
  position: absolute; right: -40px; bottom: 12%;
  transition: opacity 0.6s ease;
}
body.branding-active .scene-brixi-peek-right .brixi-img {
  width: 140px; max-width: 140px;
  animation: astronautPeekRight 4s ease-in-out infinite;
}
@keyframes astronautPeekRight {
  0%,100% { transform: translateX(8px) rotate(3deg); }
  50% { transform: translateX(-20px) rotate(0deg); }
}

/* Entrance animations */
body.branding-active .brixi-entering-center { animation: brixiEnterCenter 0.6s cubic-bezier(0.34,1.56,0.64,1) both !important; }
@keyframes brixiEnterCenter { from{opacity:0;transform:scale(0.5) translateY(20px)} to{opacity:1;transform:scale(1) translateY(0)} }

body.branding-active .brixi-entering-left { animation: brixiEnterLeft 0.7s cubic-bezier(0.25,0.46,0.45,0.94) both !important; }
@keyframes brixiEnterLeft { from{opacity:0;transform:translateX(-80px) translateY(-50%)} to{opacity:1;transform:translateX(0) translateY(-50%)} }

body.branding-active .brixi-entering-right { animation: brixiEnterRight 0.7s cubic-bezier(0.25,0.46,0.45,0.94) both !important; }
@keyframes brixiEnterRight { from{opacity:0;transform:translateX(80px) translateY(-50%)} to{opacity:1;transform:translateX(0) translateY(-50%)} }

body.branding-active .brixi-entering-peek-left { animation: brixiEnterPeekLeft 0.7s cubic-bezier(0.25,0.46,0.45,0.94) both !important; }
@keyframes brixiEnterPeekLeft { from{opacity:0;transform:translateX(-60px)} to{opacity:1;transform:translateX(0)} }

body.branding-active .brixi-entering-peek-right { animation: brixiEnterPeekRight 0.7s cubic-bezier(0.25,0.46,0.45,0.94) both !important; }
@keyframes brixiEnterPeekRight { from{opacity:0;transform:translateX(60px)} to{opacity:1;transform:translateX(0)} }


/* =============================================================
   STORYTELLING BRIXI — Per-Step Mascot (Static, no animation)
   ============================================================= */

/* Base container for all step Brixis */
body.branding-active .brixi-step-container {
  pointer-events: none;
  z-index: 2;
  line-height: 0;
}
body.branding-active .brixi-step-img {
  object-fit: contain;
  filter: drop-shadow(0 4px 16px rgba(0, 180, 143, 0.12));
  animation: none !important;
}

/* ── CENTER SMALL: idêntico ao welcome ── */
/* Welcome: wizard-header padding-bottom 8px + brixi margin -32px = -24px overlap.
   Steps:   step-header margin-bottom 48px.  To match: 48 + X = -24 → X = -72.
   Bottom margin: same as welcome (-40px). Size: same 280px. */
body.branding-active .brixi-center-small {
  text-align: center;
  pointer-events: none;
  margin: -32px auto 20px;
}
body.branding-active .brixi-center-small .brixi-step-img {
  max-width: 240px;
  height: auto;
}

/* ── All Brixi Responsive (unified for ALL Brixi types) ── */
@media (max-width: 768px) {
  body.branding-active .brixi-img,
  body.branding-active .wizard .brixi-container .brixi-img,
  body.branding-active .welcome-card .brixi-img,
  body.branding-active .brixi-center-small .brixi-step-img,
  body.branding-active .confirm-brixi .brixi-img {
    max-width: 180px !important;
  }
  body.branding-active .brixi-container,
  body.branding-active .brixi-center-small {
    margin: 0 auto 8px;
  }
  body.branding-active .brixi-center-small {
    margin: -16px auto 12px;
  }
}
@media (max-width: 480px) {
  body.branding-active .brixi-img,
  body.branding-active .wizard .brixi-container .brixi-img,
  body.branding-active .welcome-card .brixi-img,
  body.branding-active .brixi-center-small .brixi-step-img,
  body.branding-active .confirm-brixi .brixi-img {
    max-width: 150px !important;
  }
  body.branding-active .brixi-container,
  body.branding-active .brixi-center-small {
    margin: 0 auto 6px;
  }
  body.branding-active .brixi-center-small {
    margin: -12px auto 10px;
  }
  /* Fix button overflow on mobile */
  body.branding-active .wizard-nav {
    gap: 8px;
    padding: 16px 0 24px;
  }
  body.branding-active .wizard-nav .btn {
    font-size: 13px;
    padding: 10px 14px;
    white-space: nowrap;
    min-width: 0;
    flex-shrink: 1;
  }
  body.branding-active .wizard-nav .btn-primary {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60%;
  }
}
@media (max-width: 360px) {
  body.branding-active .brixi-img,
  body.branding-active .wizard .brixi-container .brixi-img,
  body.branding-active .welcome-card .brixi-img,
  body.branding-active .brixi-center-small .brixi-step-img,
  body.branding-active .confirm-brixi .brixi-img {
    max-width: 120px !important;
  }
  body.branding-active .brixi-center-small {
    margin: -8px auto 8px;
  }
  body.branding-active .wizard-nav .btn {
    font-size: 12px;
    padding: 10px 10px;
  }
}

/* =============================================================
   23. CONFETTI & CELEBRATION EFFECTS (matching stars.js)
   ============================================================= */
body.branding-active .confetti-container {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 1000; overflow: hidden;
}

body.branding-active .confetti {
  position: absolute; top: -10px; opacity: 0;
  animation: confettiFall var(--fall-duration,3s) var(--fall-delay,0s) ease-in forwards;
}
body.branding-active .confetti.star {
  clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
body.branding-active .confetti.circle { border-radius: 50%; }

@keyframes confettiFall {
  0% { opacity: 1; transform: translateY(0) rotate(0deg); }
  100% { opacity: 0; transform: translateY(100vh) rotate(var(--spin,720deg)); }
}

/* --- Transition Particles (from stars.js) --- */
body.branding-active .transition-particle {
  position: fixed;
  width: 5px; height: 5px;
  border-radius: 50%;
  pointer-events: none; z-index: 200;
  opacity: 0;
}

body.branding-active .transition-particle[data-dir="0"]{animation:pB0 .8s ease-out forwards}
body.branding-active .transition-particle[data-dir="1"]{animation:pB1 .8s ease-out forwards}
body.branding-active .transition-particle[data-dir="2"]{animation:pB2 .8s ease-out forwards}
body.branding-active .transition-particle[data-dir="3"]{animation:pB3 .8s ease-out forwards}
body.branding-active .transition-particle[data-dir="4"]{animation:pB4 .8s ease-out forwards}
body.branding-active .transition-particle[data-dir="5"]{animation:pB5 .8s ease-out forwards}
body.branding-active .transition-particle[data-dir="6"]{animation:pB6 .8s ease-out forwards}
body.branding-active .transition-particle[data-dir="7"]{animation:pB7 .8s ease-out forwards}

@keyframes pB0{from{opacity:.8;transform:translate(0,0) scale(1)}to{opacity:0;transform:translate(60px,-50px) scale(0)}}
@keyframes pB1{from{opacity:.8;transform:translate(0,0) scale(1)}to{opacity:0;transform:translate(45px,-65px) scale(0)}}
@keyframes pB2{from{opacity:.8;transform:translate(0,0) scale(1)}to{opacity:0;transform:translate(-45px,-65px) scale(0)}}
@keyframes pB3{from{opacity:.8;transform:translate(0,0) scale(1)}to{opacity:0;transform:translate(-60px,-50px) scale(0)}}
@keyframes pB4{from{opacity:.8;transform:translate(0,0) scale(1)}to{opacity:0;transform:translate(-60px,50px) scale(0)}}
@keyframes pB5{from{opacity:.8;transform:translate(0,0) scale(1)}to{opacity:0;transform:translate(-45px,65px) scale(0)}}
@keyframes pB6{from{opacity:.8;transform:translate(0,0) scale(1)}to{opacity:0;transform:translate(45px,65px) scale(0)}}
@keyframes pB7{from{opacity:.8;transform:translate(0,0) scale(1)}to{opacity:0;transform:translate(60px,50px) scale(0)}}

/* --- Sparkles --- */
body.branding-active .sparkle {
  position: fixed; width: 6px; height: 6px;
  border-radius: 50%; background: var(--up-teal);
  pointer-events: none; z-index: 200;
  animation: sparkleFloat 0.8s ease-out forwards;
}
@keyframes sparkleFloat { 0%{opacity:1;transform:scale(0) translateY(0)} 50%{opacity:1;transform:scale(1.5) translateY(-20px)} 100%{opacity:0;transform:scale(.5) translateY(-40px)} }

/* --- Cursor Sparkles --- */
body.branding-active .cursor-sparkle {
  position: fixed; width: 4px; height: 4px;
  border-radius: 50%; background: var(--up-teal);
  pointer-events: none; z-index: 150; opacity: 0.6;
  animation: cursorSparkle 0.6s ease-out forwards;
}
@keyframes cursorSparkle { 0%{opacity:.6;transform:scale(1)} 100%{opacity:0;transform:scale(0) translateY(-10px)} }

/* --- Welcome Card Stars --- */
body.branding-active .welcome-card { position: relative; overflow: hidden; }
body.branding-active .welcome-stars {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
}
body.branding-active .wstar {
  position: absolute; width: 3px; height: 3px;
  background: var(--up-teal); border-radius: 50%;
  opacity: 0; animation: wstarTwinkle 3s ease-in-out infinite;
}
@keyframes wstarTwinkle { 0%,100%{opacity:0;transform:scale(.5)} 50%{opacity:.4;transform:scale(1)} }

/* --- Section Reveal Stagger --- */
body.branding-active .wizard-step.active .section { animation: sectionReveal 0.5s ease-out both; }
@keyframes sectionReveal { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }

body.branding-active .wizard-step.active .form-group:nth-child(1){animation:fgFade .4s ease-out .1s both}
body.branding-active .wizard-step.active .form-group:nth-child(2){animation:fgFade .4s ease-out .15s both}
body.branding-active .wizard-step.active .form-group:nth-child(3){animation:fgFade .4s ease-out .2s both}
body.branding-active .wizard-step.active .form-group:nth-child(4){animation:fgFade .4s ease-out .25s both}
body.branding-active .wizard-step.active .form-group:nth-child(5){animation:fgFade .4s ease-out .3s both}
body.branding-active .wizard-step.active .form-group:nth-child(6){animation:fgFade .4s ease-out .35s both}
@keyframes fgFade { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }


/* =============================================================
   24. WIZARD NAV — ensure proper layering
   ============================================================= */
body.branding-active .wizard-nav {
  padding: 24px 0 40px;
}


/* =============================================================
   25. SCROLL / GLOBAL STYLING
   ============================================================= */

/* Custom scrollbar for webkit */
body.branding-active ::-webkit-scrollbar {
  width: 6px;
}

body.branding-active ::-webkit-scrollbar-track {
  background: rgba(0, 45, 84, 0.05);
}

body.branding-active ::-webkit-scrollbar-thumb {
  background: rgba(0, 180, 143, 0.3);
  border-radius: 3px;
}

body.branding-active ::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 180, 143, 0.5);
}

/* Selection color */
body.branding-active ::selection {
  background: rgba(0, 180, 143, 0.2);
  color: var(--up-heading);
}


/* =============================================================
   26. CSS-ONLY DECORATIVE STARFIELD (fallback if no .light-orbs)
   ============================================================= */

/* Creates a subtle animated star layer using box-shadow technique */
body.branding-active .wizard::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  background: transparent;
}

/* Teal gradient glow at top of page */
body.branding-active .wizard::after {
  content: '';
  position: fixed;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 400px;
  background: radial-gradient(ellipse, rgba(0, 180, 143, 0.08), transparent 70%);
  pointer-events: none;
  z-index: -1;
}


/* =============================================================
   26b. ADMIN / ERROR / CONFIRM BRIXI
   ============================================================= */
body.branding-active .admin-brixi-header { text-align:center; padding:20px 0; }
body.branding-active .admin-brixi-header .brixi-img { max-width:120px; animation:astronautFloat 4s ease-in-out infinite; filter:drop-shadow(0 4px 12px rgba(0,180,143,0.1)); }

body.branding-active .empty-state-brixi { text-align:center; padding:60px 20px; }
body.branding-active .empty-state-brixi .brixi-img { max-width:140px; margin-bottom:16px; animation:astronautFloat 4s ease-in-out infinite; }
body.branding-active .empty-state-brixi h3 { font-size:18px; font-weight:600; color:var(--up-heading-light); margin-bottom:8px; }
body.branding-active .empty-state-brixi p { font-size:14px; color:rgba(255,255,255,0.6); }

body.branding-active .error-page-brixi { text-align:center; padding:80px 20px 40px; }
body.branding-active .error-page-brixi .brixi-img { max-width:160px; margin-bottom:20px; animation:astronautFloat 4s ease-in-out infinite; }
body.branding-active .error-page-brixi h1 { font-size:28px; font-weight:900; color:var(--up-heading-light); margin-bottom:8px; text-transform:uppercase; }
body.branding-active .error-page-brixi p { font-size:15px; color:rgba(255,255,255,0.6); max-width:400px; margin:0 auto; }

body.branding-active .confirm-brixi { text-align:center; padding:8px 20px 0; }
body.branding-active .confirm-brixi .brixi-img { max-width:240px; animation:astronautFloat 4s ease-in-out infinite; }

/* Hide sceneBrixiOverlay on medium screens */
@media (max-width: 1100px) {
  body.branding-active #sceneBrixiOverlay { display: none !important; }
}

/* =============================================================
   27. RESPONSIVE OVERRIDES
   ============================================================= */
@media (max-width: 800px) {
  body.branding-active .wizard {
    margin-left: 12px;
    margin-right: 12px;
    border-radius: 20px;
  }
}

@media (max-width: 640px) {
  body.branding-active .wizard {
    margin-top: 12px;
    margin-bottom: 24px;
    margin-left: 8px;
    margin-right: 8px;
    border-radius: 18px;
  }

  body.branding-active .wizard > *:not(.wizard-progress) {
    padding-left: 20px;
    padding-right: 20px;
  }

  body.branding-active .wizard-progress {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 14px;
    padding-bottom: 12px;
    border-radius: 18px 18px 0 0;
  }

  /* Journey progress bar — mobile fix */
  body.branding-active .journey-progress {
    padding: 12px 10px 6px;
  }

  body.branding-active .journey-track {
    left: 20px;
    right: 20px;
    top: 22px;
  }

  body.branding-active .journey-stop .stop-dot {
    width: 22px;
    height: 22px;
    font-size: 9px;
    box-shadow: 0 0 0 3px #ffffff;
  }

  body.branding-active .journey-stop.active .stop-dot {
    transform: scale(1.1);
    margin-bottom: 4px;
  }

  body.branding-active .journey-stop .stop-label {
    font-size: 7px;
    letter-spacing: 0.1px;
  }

  body.branding-active .journey-stops {
    gap: 0;
  }

  body.branding-active .wizard-header {
    padding: 24px 0 16px;
  }

  body.branding-active .wizard-header h1 {
    font-size: 24px;
    letter-spacing: 0;
  }

  body.branding-active .step-title {
    font-size: 20px;
    letter-spacing: 0.3px;
  }

  body.branding-active .step-counter {
    font-size: 10px;
  }

  body.branding-active .step-encouragement {
    font-size: 12px;
    padding: 5px 12px;
  }

  body.branding-active .welcome-card {
    padding: 28px 20px;
    border-radius: 14px;
  }

  body.branding-active .welcome-card h2 {
    font-size: 20px;
  }

  body.branding-active .welcome-features {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  body.branding-active .brixi-container .brixi-img {
    max-width: 180px;
    height: auto;
  }

  body.branding-active .btn-primary {
    padding: 12px 24px;
    font-size: 14px;
  }

  body.branding-active .btn-secondary {
    padding: 12px 20px;
    font-size: 14px;
  }

  body.branding-active .btn-submit {
    padding: 14px 36px;
    font-size: 15px;
  }

  body.branding-active .checkbox-grid {
    grid-template-columns: 1fr;
  }

  /* Inputs: 16px on iOS to prevent zoom */
  body.branding-active input[type="text"],
  body.branding-active input[type="email"],
  body.branding-active input[type="tel"],
  body.branding-active input[type="url"],
  body.branding-active textarea,
  body.branding-active select {
    font-size: 16px;
    padding: 11px 14px;
  }

  body.branding-active .wizard-nav {
    padding: 20px 0 28px;
  }

  /* Upload dropzone — mobile */
  body.branding-active .upload-dropzone {
    padding: 20px 16px;
    min-height: 0;
  }

  /* Hide scene overlay on small screens */
  body.branding-active #sceneBrixiOverlay { display: none !important; }

  /* Reduce planet sizes */
  body.branding-active .cosmic-bg .planet[data-pos] { width: 50px !important; height: 50px !important; }
  body.branding-active .cosmic-bg .cloud[data-pos] { width: 90px !important; height: 45px !important; }
}

@media (max-width: 360px) {
  body.branding-active .wizard {
    margin-left: 4px;
    margin-right: 4px;
    border-radius: 14px;
  }

  body.branding-active .wizard > *:not(.wizard-progress) {
    padding-left: 14px;
    padding-right: 14px;
  }

  body.branding-active .wizard-progress {
    padding-left: 14px;
    padding-right: 14px;
    border-radius: 14px 14px 0 0;
  }

  /* Journey progress bar — extra small */
  body.branding-active .journey-progress {
    padding: 10px 6px 4px;
  }

  body.branding-active .journey-track {
    left: 14px;
    right: 14px;
    top: 20px;
  }

  body.branding-active .journey-stop .stop-dot {
    width: 20px;
    height: 20px;
    font-size: 8px;
    box-shadow: 0 0 0 2px #ffffff;
  }

  body.branding-active .journey-stop .stop-label {
    display: none;
  }

  body.branding-active .journey-stop.active .stop-label {
    display: block;
    font-size: 7px;
  }

  body.branding-active .brixi-container .brixi-img {
    max-width: 120px;
    height: auto;
  }

  body.branding-active .welcome-card {
    padding: 24px 14px;
  }

  body.branding-active .btn-primary {
    padding: 11px 18px;
    font-size: 13px;
  }

  body.branding-active .btn-secondary {
    padding: 11px 16px;
    font-size: 13px;
  }

  /* Planets and orbs hidden */
  body.branding-active .cosmic-bg { display: none !important; }
  body.branding-active .light-orbs { display: none !important; }
}


/* =============================================================
   28. TRANSITION EFFECTS — Step animations on dark theme
   ============================================================= */
body.branding-active .wizard-step.active {
  animation: upStepIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

body.branding-active .wizard-step.exiting {
  animation: upStepOut 0.3s cubic-bezier(0.4, 0, 1, 1) forwards;
}

@keyframes upStepIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes upStepOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-12px);
  }
}


/* =============================================================
   29. ADDITIONAL CSS-ONLY DECORATIVE ELEMENTS
   ============================================================= */

/* Gradient accent line at top of wizard card */
body.branding-active .wizard-progress::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--up-teal), var(--up-blue), var(--up-teal));
  background-size: 200% 100%;
  animation: gradientShift 4s ease-in-out infinite;
  border-radius: var(--up-wizard-radius) var(--up-wizard-radius) 0 0;
}

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Subtle inner glow on the wizard card */
body.branding-active .wizard {
  border: 1px solid rgba(255, 255, 255, 0.08);
}


/* =============================================================
   30. PRINT STYLES
   ============================================================= */
@media print {
  body.branding-active {
    background: #ffffff;
  }

  body.branding-active::before,
  body.branding-active::after {
    display: none;
  }

  body.branding-active .wizard {
    box-shadow: none;
    border: none;
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: #ffffff;
  }

  body.branding-active .wizard-progress::before {
    display: none;
  }

  body.branding-active .cosmic-bg,
  body.branding-active .light-orbs,
  body.branding-active #sceneBrixiOverlay,
  body.branding-active #pageBackground,
  body.branding-active #sceneBackgroundOverlay,
  body.branding-active .confetti-container {
    display: none !important;
  }

  body.branding-active .btn-primary,
  body.branding-active .btn-secondary,
  body.branding-active .btn-submit {
    box-shadow: none;
  }
}


/* =============================================================
   31. ACCESSIBILITY — Focus visible
   ============================================================= */
body.branding-active *:focus-visible {
  outline: 2px solid var(--up-teal);
  outline-offset: 2px;
}

body.branding-active .btn-primary:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(0, 180, 143, 0.3);
}

body.branding-active .btn-submit:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(0, 180, 143, 0.3);
}




/* =============================================================
   UP SITES DECORATIVE STARS (✦ ☆ •)
   ============================================================= */
body.branding-active .up-stars-deco {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

body.branding-active .up-star {
  position: absolute;
  color: rgba(255, 200, 50, 0.6);
  font-size: 16px;
  animation: upStarFloat 6s ease-in-out infinite;
}

body.branding-active .up-star-1 { top: 18%; left: 8%; font-size: 14px; color: rgba(255, 200, 50, 0.7); animation-delay: 0s; animation-duration: 7s; }
body.branding-active .up-star-2 { top: 35%; right: 12%; font-size: 10px; color: rgba(255, 200, 50, 0.5); animation-delay: 1.5s; animation-duration: 8s; }
body.branding-active .up-star-3 { top: 55%; left: 5%; font-size: 18px; color: rgba(200, 180, 255, 0.3); animation-delay: 0.8s; animation-duration: 9s; }
body.branding-active .up-star-4 { top: 70%; right: 6%; font-size: 12px; color: rgba(255, 200, 50, 0.6); animation-delay: 2.2s; animation-duration: 6s; }
body.branding-active .up-star-5 { top: 25%; right: 25%; font-size: 20px; color: rgba(200, 180, 255, 0.25); animation-delay: 3s; animation-duration: 10s; }
body.branding-active .up-star-6 { top: 82%; left: 15%; font-size: 8px; color: rgba(255, 200, 50, 0.5); animation-delay: 1s; animation-duration: 7s; }
body.branding-active .up-star-7 { top: 45%; left: 3%; font-size: 6px; color: rgba(0, 140, 255, 0.4); animation-delay: 0.5s; animation-duration: 5s; }
body.branding-active .up-star-8 { top: 15%; right: 18%; font-size: 8px; color: rgba(0, 140, 255, 0.35); animation-delay: 2.5s; animation-duration: 6s; }

@keyframes upStarFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.6; }
  25% { transform: translateY(-8px) rotate(5deg); opacity: 1; }
  50% { transform: translateY(-3px) rotate(-3deg); opacity: 0.8; }
  75% { transform: translateY(-10px) rotate(2deg); opacity: 0.9; }
}

@media (max-width: 800px) {
  body.branding-active .up-stars-deco { display: none; }
}

/* =============================================================
   32. REDUCED MOTION
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  body.branding-active::before,
  body.branding-active::after {
    animation: none;
    opacity: 0.7;
  }

  body.branding-active .light-orb {
    animation: none;
    opacity: 0.3;
    top: 50%;
  }

  body.branding-active .planet {
    animation: none;
  }

  body.branding-active .cloud {
    animation: none;
  }

  body.branding-active .brixi-img {
    animation: none;
  }

  body.branding-active .scene-brixi-left .brixi-img,
  body.branding-active .scene-brixi-right .brixi-img,
  body.branding-active .scene-brixi-peek-left .brixi-img,
  body.branding-active .scene-brixi-peek-right .brixi-img {
    animation: none;
  }

  body.branding-active .wizard-progress::before {
    animation: none;
    background-position: 0% 50%;
  }

  body.branding-active .wizard-step.active {
    animation: none;
    opacity: 1;
    transform: none;
  }

  body.branding-active .wizard-step.exiting {
    animation: none;
    opacity: 0;
    transform: none;
  }

  body.branding-active .confetti-piece {
    animation: none;
    display: none;
  }
}



/* =============================================================
   FIX: Form inputs inside wizard card need light --color-bg
   The global --color-bg is #002D54 (navy) for the body background,
   but form elements inside the white card need a light value
   ============================================================= */
body.branding-active .wizard {
  --color-bg: #f0f2f5;
  --color-bg-darker: #e5e7eb;
}

/* Ensure time inputs, file uploads, calendar elements are legible */
body.branding-active .bh-time {
  background: #f0f2f5 !important;
  color: #1A1F47 !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
}

body.branding-active .bh-time:focus {
  border-color: #00B48F !important;
  box-shadow: 0 0 0 2px rgba(0, 180, 143, 0.15) !important;
}

body.branding-active .bh-row {
  background: #ffffff;
}

body.branding-active .bh-day {
  color: #1A1F47;
}

body.branding-active .bh-separator {
  color: #6b7280;
}

body.branding-active .bh-status {
  color: #9ca3af;
}

/* =============================================================
   SECTION: ADMIN PANEL DARK THEME (UP Sites Style)
   Matches the client-facing briefing dark navy theme
   ============================================================= */

/* ─── Base & Background ──────────────────────────── */
body.admin-panel {
  background: #002D54 !important;
  color: #c8d6e5;
  min-height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* CSS Starfield for admin — matches briefing starfield */
body.admin-panel::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 10% 15%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 25% 35%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 40% 8%, rgba(255,255,255,0.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 50%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 70% 20%, rgba(0,180,143,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 60%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 15% 70%, rgba(0,140,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 30% 85%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 65% 75%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 40%, rgba(0,180,143,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 48% 30%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 78% 90%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 5% 45%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 92% 12%, rgba(0,140,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 18% 92%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 60% 5%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 35% 55%, rgba(0,180,143,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 82% 78%, rgba(255,255,255,0.4) 0%, transparent 100%);
  animation: starfieldTwinkle 8s ease-in-out infinite alternate;
}

/* Secondary starfield layer for admin */
body.admin-panel::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 33% 67%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 52% 18%, rgba(0,140,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 72% 44%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 88% 28%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 8% 80%, rgba(0,180,143,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 42% 92%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 62% 58%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 95% 72%, rgba(0,140,255,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 22% 48%, rgba(255,255,255,0.6) 0%, transparent 100%);
  animation: starfieldTwinkle 10s ease-in-out 3s infinite alternate-reverse;
}

body.admin-panel > *:not(.mo):not(.modal-overlay):not([class*="modal-overlay"]) {
  position: relative;
  z-index: 1;
}

/* ─── Topbar ─────────────────────────────────────── */
body.admin-panel .topbar {
  background: rgba(0, 20, 40, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* ─── Admin Container / Main Content ─────────────── */
body.admin-panel .admin-container {
  position: relative;
  z-index: 1;
  flex: 1 0 auto;
}

body.admin-panel .main-content {
  position: relative;
  z-index: 1;
}

body.admin-panel .admin-branding-footer {
  flex-shrink: 0;
  padding: 20px 20px 16px;
}

/* ─── Page Header ────────────────────────────────── */
body.admin-panel .page-header h1,
body.admin-panel .page-header h2 {
  color: #ffffff;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

body.admin-panel .subtitle {
  color: rgba(255, 255, 255, 0.5);
}

body.admin-panel .admin-brixi-header h1 {
  color: #ffffff;
}

/* ─── Back Link ──────────────────────────────────── */
body.admin-panel .back-link {
  color: rgba(255, 255, 255, 0.5);
}
body.admin-panel .back-link:hover {
  color: #00B48F;
}

/* ─── Stat Cards ─────────────────────────────────── */
body.admin-panel .stat-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

body.admin-panel .stat-card:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}

body.admin-panel .stat-number,
body.admin-panel .stat-value {
  color: #ffffff;
  font-weight: 800;
}

body.admin-panel .stat-label {
  color: rgba(255, 255, 255, 0.5);
}

/* ─── Filter Bar ─────────────────────────────────── */
body.admin-panel .filter-bar {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

body.admin-panel .filter-group label {
  color: rgba(255, 255, 255, 0.5);
}

body.admin-panel .filter-group select,
body.admin-panel .filter-group input[type=date] {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: #e0e6ed;
}

body.admin-panel .filter-group select:focus,
body.admin-panel .filter-group input[type=date]:focus {
  border-color: #00B48F;
  box-shadow: 0 0 0 2px rgba(0, 180, 143, 0.2);
  background: rgba(255, 255, 255, 0.08);
}

body.admin-panel .filter-group select option {
  background: #0a2e4e;
  color: #e0e6ed;
}

body.admin-panel .btn-clear-filters {
  background: rgba(255, 59, 48, 0.1);
  color: #ff6b6b;
  border-color: rgba(255, 59, 48, 0.2);
}

body.admin-panel .btn-clear-filters:hover {
  background: rgba(255, 59, 48, 0.18);
}

/* ─── Table Card ─────────────────────────────────── */
body.admin-panel .table-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

body.admin-panel .table-toolbar {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

body.admin-panel .table-info {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.8125rem;
}

body.admin-panel .table-info strong {
  color: #ffffff;
}

/* ─── Search Input ───────────────────────────────── */
body.admin-panel .search-input {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  color: #e0e6ed;
  background-image: url(data:image/svg+xml,%3Csvg xmlns=http://www.w3.org/2000/svg width=16 height=16 viewBox=0 0 24 24 fill=none stroke=%236b7a8d stroke-width=2 stroke-linecap=round stroke-linejoin=round%3E%3Ccircle cx=11 cy=11 r=8%3E%3C/circle%3E%3Cline x1=21 y1=21 x2=16.65 y2=16.65%3E%3C/line%3E%3C/svg%3E);
}

body.admin-panel .search-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

body.admin-panel .search-input:focus {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: #00B48F;
  box-shadow: 0 0 0 3px rgba(0, 180, 143, 0.15);
}

/* ─── Table ──────────────────────────────────────── */
body.admin-panel table {
  color: #c8d6e5;
}

body.admin-panel thead th {
  color: rgba(255, 255, 255, 0.4);
  border-bottom-color: rgba(255, 255, 255, 0.06);
  background: transparent;
}

body.admin-panel tbody td {
  color: #c8d6e5;
  border-bottom-color: rgba(255, 255, 255, 0.04);
}

body.admin-panel tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.03);
}

/* ─── Card layout overrides for dark theme (≤1024px) ─── */
@media (max-width: 1024px) {
  body.admin-panel table tr {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
  }
  body.admin-panel tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.06);
  }
  body.admin-panel table td.actions-cell {
    background: rgba(0, 0, 0, 0.15);
    border-top-color: rgba(255, 255, 255, 0.06);
  }
  body.admin-panel table td.cell-date::before {
    color: rgba(255, 255, 255, 0.4);
  }
}

/* ─── Type Badge ─────────────────────────────────── */
body.admin-panel .type-badge {
  background-color: rgba(0, 180, 143, 0.12);
  color: #00B48F;
  border: 1px solid rgba(0, 180, 143, 0.2);
}

/* ─── Status Select ──────────────────────────────── */
body.admin-panel .status-select.status-pendente {
  background-color: rgba(255, 149, 0, 0.12);
  border-color: rgba(255, 149, 0, 0.3);
  color: #ffb74d;
}

body.admin-panel .status-select.status-visto {
  background-color: rgba(0, 140, 255, 0.12);
  border-color: rgba(0, 140, 255, 0.3);
  color: #64b5f6;
}

body.admin-panel .status-select.status-em_andamento {
  background-color: rgba(0, 180, 143, 0.12);
  border-color: rgba(0, 180, 143, 0.3);
  color: #4dd8aa;
}

body.admin-panel .status-select.status-respondido {
  background-color: rgba(52, 199, 89, 0.12);
  border-color: rgba(52, 199, 89, 0.3);
  color: #66d98a;
}

/* ─── Buttons ────────────────────────────────────── */
body.admin-panel .btn-primary {
  background: #00B48F;
  color: #ffffff;
  font-weight: 700;
}

body.admin-panel .btn-primary:hover {
  background: #00c99f;
  box-shadow: 0 4px 16px rgba(0, 180, 143, 0.3);
}

body.admin-panel .btn-secondary {
  background: rgba(255, 255, 255, 0.06);
  color: #c8d6e5;
  border-color: rgba(255, 255, 255, 0.12);
}

body.admin-panel .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

body.admin-panel .btn-danger {
  background-color: rgba(255, 59, 48, 0.1);
  color: #ff6b6b;
}

body.admin-panel .btn-danger:hover {
  background-color: rgba(255, 59, 48, 0.18);
}

body.admin-panel .btn-copy {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  color: #8899a8;
}

body.admin-panel .btn-copy:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

/* ─── Link Cell ──────────────────────────────────── */
body.admin-panel .link-code {
  background: rgba(255, 255, 255, 0.06);
  color: #8899a8;
}

/* ─── Organization Badge ─────────────────────────── */
body.admin-panel .org-badge {
  color: #c8d6e5;
}

/* ─── Detail Card ────────────────────────────────── */
body.admin-panel .detail-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

body.admin-panel .detail-card-header {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

body.admin-panel .detail-card-header h2,
body.admin-panel .detail-card-header h3 {
  color: #ffffff;
}

body.admin-panel .detail-label {
  color: rgba(255, 255, 255, 0.4);
}

body.admin-panel .detail-value {
  color: #e0e6ed;
}

body.admin-panel .detail-value.empty {
  color: rgba(255, 255, 255, 0.2);
}

/* ─── Tags ───────────────────────────────────────── */
body.admin-panel .tag {
  background-color: rgba(0, 180, 143, 0.1);
  color: #4dd8aa;
  border: 1px solid rgba(0, 180, 143, 0.15);
}

/* ─── Forms (Admin) ──────────────────────────────── */
body.admin-panel .form-group label {
  color: #c8d6e5;
}

body.admin-panel .form-group input,
body.admin-panel .form-group textarea,
body.admin-panel .form-group select {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  color: #e0e6ed;
  box-shadow: none;
}

body.admin-panel .form-group input::placeholder,
body.admin-panel .form-group textarea::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

body.admin-panel .form-group input:focus,
body.admin-panel .form-group textarea:focus,
body.admin-panel .form-group select:focus {
  border-color: #00B48F;
  box-shadow: 0 0 0 3px rgba(0, 180, 143, 0.15);
  background-color: rgba(255, 255, 255, 0.08);
}

body.admin-panel .form-group select option {
  background: #0a2e4e;
  color: #e0e6ed;
}

/* ─── Autofill Override (Dark Theme) ─────────────── */
body.admin-panel input:-webkit-autofill,
body.admin-panel input:-webkit-autofill:hover,
body.admin-panel input:-webkit-autofill:focus,
body.admin-panel textarea:-webkit-autofill,
body.admin-panel textarea:-webkit-autofill:hover,
body.admin-panel textarea:-webkit-autofill:focus,
body.admin-panel select:-webkit-autofill,
body.admin-panel select:-webkit-autofill:hover,
body.admin-panel select:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #0a3660 inset !important;
  -webkit-text-fill-color: #e0e6ed !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  transition: background-color 5000s ease-in-out 0s;
  caret-color: #e0e6ed;
}

/* ─── Alerts ─────────────────────────────────────── */
body.admin-panel .alert-success {
  background-color: rgba(0, 180, 143, 0.1);
  color: #4dd8aa;
  border-color: rgba(0, 180, 143, 0.2);
}

body.admin-panel .alert-error {
  background-color: rgba(255, 59, 48, 0.1);
  color: #ff6b6b;
  border-color: rgba(255, 59, 48, 0.2);
}

/* ─── Modal ──────────────────────────────────────── */
body.admin-panel > .modal-overlay {
  position: fixed;
  z-index: 1000;
}

body.admin-panel .modal-overlay.show {
  background-color: rgba(0, 10, 25, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

body.admin-panel .modal {
  background: #0a3660;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

body.admin-panel .modal h2,
body.admin-panel .modal h3 {
  color: #ffffff;
}

body.admin-panel .modal p {
  color: rgba(255, 255, 255, 0.5);
}

body.admin-panel .modal-actions {
  border-top-color: rgba(255, 255, 255, 0.06);
}

/* Delete modal dark theme */
body.admin-panel .modal-close {
  color: rgba(255, 255, 255, 0.5);
}
body.admin-panel .modal-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

body.admin-panel .modal-delete-icon {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.2), rgba(239, 68, 68, 0.15));
  color: #f87171;
}

body.admin-panel .modal-delete-content h3 {
  color: #ffffff;
}

body.admin-panel .modal-delete-content p {
  color: rgba(255, 255, 255, 0.55);
}

body.admin-panel .modal-delete-content p strong {
  color: #f87171;
}

body.admin-panel .btn-modal-cancel {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}
body.admin-panel .btn-modal-cancel:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.25);
}

body.admin-panel .btn-modal-delete {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  box-shadow: 0 2px 12px rgba(239, 68, 68, 0.35);
}
body.admin-panel .btn-modal-delete:hover {
  background: linear-gradient(135deg, #f87171, #ef4444);
  box-shadow: 0 4px 20px rgba(239, 68, 68, 0.5);
}

/* ─── Login Page ─────────────────────────────────── */
body.login-page.admin-panel {
  background: #002D54 !important;
}

body.admin-panel .login-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

body.admin-panel .login-header h1,
body.admin-panel .login-header h2 {
  color: #ffffff;
}

body.admin-panel .login-header p {
  color: rgba(255, 255, 255, 0.5);
}

body.admin-panel .login-icon {
  background-color: rgba(0, 180, 143, 0.12);
  color: #00B48F;
}

/* ─── Empty State ────────────────────────────────── */
body.admin-panel .empty-state {
  color: rgba(255, 255, 255, 0.4);
}

body.admin-panel .empty-icon {
  opacity: 0.3;
}

/* ─── Scrollbar (dark) ───────────────────────────── */
body.admin-panel ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
}

body.admin-panel ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

body.admin-panel ::selection {
  background-color: rgba(0, 180, 143, 0.25);
}

/* ─── Page Header Actions Layout Fix ─────────────── */
body.admin-panel .page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

body.admin-panel .page-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ─── Search Form Layout ─────────────────────────── */
body.admin-panel .search-form {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ─── Status Badge (dark variants) ───────────────── */
body.admin-panel .status-badge.status-pendente {
  background-color: rgba(255, 149, 0, 0.1);
  border-color: rgba(255, 149, 0, 0.25);
  color: #ffb74d;
}

body.admin-panel .status-badge.status-visto {
  background-color: rgba(0, 140, 255, 0.1);
  border-color: rgba(0, 140, 255, 0.25);
  color: #64b5f6;
}

body.admin-panel .status-badge.status-em_andamento {
  background-color: rgba(0, 180, 143, 0.1);
  border-color: rgba(0, 180, 143, 0.25);
  color: #4dd8aa;
}

body.admin-panel .status-badge.status-respondido {
  background-color: rgba(52, 199, 89, 0.1);
  border-color: rgba(52, 199, 89, 0.25);
  color: #66d98a;
}

/* ─── Meetings Page specific ─────────────────────── */
body.admin-panel .meeting-card,
body.admin-panel .card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
}

/* ─── Checkbox / Radio ───────────────────────────── */
body.admin-panel .checkbox-list label,
body.admin-panel .radio-list label {
  color: #c8d6e5;
}

body.admin-panel .checkbox-list input[type=checkbox],
body.admin-panel .radio-list input[type=radio] {
  accent-color: #00B48F;
}

/* ─── Export Page ────────────────────────────────── */
body.admin-panel .export-section {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}

body.admin-panel .export-section h3 {
  color: #ffffff;
}

body.admin-panel .export-header h1,
body.admin-panel .export-header h2 {
  color: #ffffff;
}

body.admin-panel .export-header p {
  color: rgba(255, 255, 255, 0.5);
}

/* ─── Inline style overrides for common patterns ── */
body.admin-panel a {
  color: #c8d6e5;
}

body.admin-panel a:hover {
  color: #00B48F;
}

body.admin-panel .topbar-actions a {
  color: rgba(255, 255, 255, 0.7);
}

body.admin-panel .topbar-actions a:hover {
  color: #ffffff;
}

/* ─── Color input fix ────────────────────────────── */
body.admin-panel input[type=color] {
  border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}