:root {
  color-scheme: light dark;
  --bg: #f7f8fb;
  --panel: #ffffff;
  --text: #13161c;
  --muted: #626a7d;
  /* Same plum as the StylesStudio.ai landing/auth palette below (kept as a
     separate --landing-primary token too since that one is deliberately
     theme-locked -- see its comment) -- unifies every button, active tab,
     link, and focus ring app-wide with the landing page instead of the
     unrelated indigo this used to be, so the app doesn't feel like a
     different, older product once a user logs in. */
  --accent: #4c145c;
  --accent-hover: #3b0f48;
  --accent-contrast: #ffffff;
  --border: #e3e6ee;
  --error: #dc2626;
  --success: #16a34a;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 4px 10px rgba(16, 24, 40, 0.06), 0 8px 24px rgba(16, 24, 40, 0.08);
  --radius: 10px;
  --radius-lg: 16px;

  /* StylesStudio.ai palette -- used by the public landing page and the
     pre-login auth/forgot/reset screens it leads into (see showScreen()'s
     studio-active toggle in app.js). Deliberately separate names from the
     tokens above and never redefined in the dark-mode block below, so this
     palette stays put regardless of system theme. */
  --landing-bg: #ffffff;
  --landing-surface: #f7f2fa;
  --landing-primary: #4c145c;
  --landing-primary-hover: #3b0f48;
  --landing-text: #1f1a24;
  --landing-muted: #6b6274;
  --landing-mint-bg: #ddf4e8;
  --landing-mint-text: #1f6b45;
  --landing-border: #e8e0ee;
  --landing-shadow: 0 10px 28px rgba(76, 20, 92, 0.09), 0 2px 8px rgba(76, 20, 92, 0.06);
  --landing-radius: 18px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0d13;
    --panel: #12151d;
    --text: #e8eaf0;
    --muted: #8b93a7;
    /* Lighter tint of the same plum brand hue -- #4c145c itself is too dark
       to read clearly against this dark background. */
    --accent: #c77dd6;
    --accent-hover: #d199e0;
    --accent-contrast: #ffffff;
    --border: #262b38;
    --error: #f87171;
    --success: #4ade80;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.35), 0 8px 28px rgba(0, 0, 0, 0.4);
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

h1,
h2,
h3,
h4 {
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.app-shell {
  max-width: 720px;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
  transition: max-width 0.15s ease;
}

body.admin-console-active .app-shell {
  max-width: 1240px;
  padding: 1.5rem 1.5rem 3rem;
}

/* Read-only reference-photo gallery flanking the hairstyle-recommendation
   form once identity=="men"/"women" is picked (2026-08-20) -- purely
   visual (nothing here is clickable/selectable), so a person can see what
   a named style actually looks like. .hairstyle-guide-layout is plain
   block by default (a no-op on every other screen/identity); only becomes
   a 3-column grid once this body class is set, same widen-the-shell
   convention as admin-console-active above. */
body.hairstyle-guide-active .app-shell {
  max-width: 1400px;
  padding: 1.5rem 1.5rem 3rem;
}

body.hairstyle-guide-active .hairstyle-guide-layout {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(320px, 480px) minmax(220px, 300px);
  gap: 1.5rem;
  align-items: start;
  justify-content: center;
}

.app-header h1 {
  margin: 0 0 0.2rem;
  font-size: 1.5rem;
  color: var(--accent);
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 1.25rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.auth-status {
  font-size: 0.85rem;
  padding-top: 0.35rem;
}

.auth-link {
  color: var(--muted);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.12s ease;
}

.auth-link:hover {
  color: var(--accent);
}

.credits-badge {
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.subtitle {
  color: var(--muted);
  margin-top: 0;
}

.photo-guidelines {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0 0 1.25rem;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
}

.hairstyle-guide-layout {
  display: block;
}

/* Dense 2-across thumbnail grid rather than one item per row -- with
   haircuts and beard styles now sharing the same gallery (2026-08-20), a
   single-column stack would make the side rails absurdly tall. Shorter,
   4:3 (not 1:1) thumbnails compound that density without cropping away
   the hairline/silhouette that actually identifies the style. */
.hairstyle-guide-col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
  align-content: start;
}

.hairstyle-guide-heading {
  grid-column: 1 / -1;
  margin: 0.5rem 0 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.hairstyle-guide-heading:first-child {
  margin-top: 0;
}

.hairstyle-guide-card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.4rem;
}

.hairstyle-guide-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: top;
  border-radius: calc(var(--radius) - 4px);
  background: var(--bg);
}

.hairstyle-guide-card span {
  font-size: 0.72rem;
  color: var(--muted);
  text-align: center;
}

/* Both haircut and beard cards are select-only (see renderHairstyleGuide's
   buildCard) -- this highlights whichever is currently picked for the
   "Pick My Own Styles" control (see syncGalleryGenerateControl). */
.hairstyle-guide-card.selected {
  border-color: var(--accent);
  border-width: 2px;
}

/* Appears once a haircut is selected in the gallery (see
   syncGalleryGenerateControl) -- placed right after analyzeButton, same
   "near the action, not buried below the tall gallery" placement principle
   as statusMessage's fix. Real user feedback (2026-08-22): selecting a
   look and generating it needed to be two separate, deliberate steps
   rather than generating immediately on click. */
#galleryGenerateWrap {
  margin-top: 1rem;
}

.gallery-generate-summary {
  margin: 0 0 0.5rem;
  font-weight: 600;
  color: var(--text);
}

/* Result card for a gallery-triggered generation (see tryGalleryHaircut). */
#galleryTryCardWrap {
  margin-top: 1rem;
}

/* Mobile-only presentation of the same gallery data (populated by
   renderHairstyleGuide alongside the desktop rails, never both visible at
   once) -- real bug fixed 2026-08-20: earlier this width simply hid the
   flanking rails with nothing in their place, so phones -- most of this
   app's traffic -- never saw the gallery at all. A single full-width
   column in true reading order, not the rails' left/right-interleaved
   split, which would read oddly if the two rails were just stacked. */
.hairstyle-guide-mobile {
  display: none;
}

@media (max-width: 980px) {
  body.hairstyle-guide-active .hairstyle-guide-layout {
    grid-template-columns: 1fr;
  }

  .hairstyle-guide-col {
    display: none;
  }

  body.hairstyle-guide-active .hairstyle-guide-mobile {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.6rem;
    margin-top: 1.5rem;
  }
}

.capture-tabs {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
  background: var(--bg);
  padding: 0.3rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.tab-button {
  flex: 1;
  padding: 0.55rem 1rem;
  border: none;
  background: transparent;
  color: var(--muted);
  font-weight: 600;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.tab-button:hover {
  color: var(--text);
}

.tab-button.active {
  background: var(--panel);
  color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.pane.hidden,
.hidden {
  display: none !important;
}

.file-drop {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  border: 1.5px dashed var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: center;
  padding: 1rem;
  background: var(--bg);
  color: var(--muted);
  transition: border-color 0.12s ease, color 0.12s ease;
}

.file-drop:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.file-drop input {
  display: none;
}

#video {
  width: 100%;
  border-radius: var(--radius);
  background: #000;
}

.camera-controls {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.camera-readiness {
  margin: 0.6rem 0 0;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
}

.camera-readiness.not-ready {
  color: var(--error);
}

.camera-readiness.ready {
  color: var(--success);
}

button {
  font: inherit;
}

.camera-controls button,
#analyzeButton {
  padding: 0.65rem 1.1rem;
  border-radius: 8px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.05s ease;
}

.camera-controls button:hover,
#analyzeButton:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.camera-controls button:active,
#analyzeButton:active {
  transform: translateY(1px);
}

.camera-controls button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

#previewWrap {
  margin-top: 1.25rem;
  text-align: center;
}

#preview {
  max-width: 100%;
  max-height: 320px;
  border-radius: var(--radius);
  margin-bottom: 0.75rem;
  box-shadow: var(--shadow-sm);
}

.occasion-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.occasion-label {
  font-size: 0.9rem;
  color: var(--muted);
}

.sub-occasion-label {
  text-align: center;
  margin: 0 0 0.4rem;
}

.occasion-button {
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: 0.85rem;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.occasion-button:hover {
  border-color: var(--accent);
}

.occasion-button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}

.occasion-definition {
  text-align: center;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.5;
  margin: 0 0 0.75rem;
}

/* Copy of .occasion-toggle/.occasion-label/.occasion-button -- identical
   pattern, new class names since this is a separate, required selection
   (no default active button) rather than occasion's pre-selected one. */
.identity-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.identity-label {
  font-size: 0.9rem;
  color: var(--muted);
}

.identity-button {
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: 0.85rem;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.identity-button:hover {
  border-color: var(--accent);
}

.identity-button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}

/* Copy of .occasion-toggle/.occasion-label/.occasion-button -- identical
   pattern, new class names since this is a separate toggle group (haircut
   timing) from occasion. */
.timing-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.timing-label {
  font-size: 0.9rem;
  color: var(--muted);
}

.timing-button {
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: 0.85rem;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.timing-button:hover {
  border-color: var(--accent);
}

.timing-button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}

/* Copy of .occasion-toggle/.occasion-button's pattern -- the AI
   Recommended / Choose Myself mode switch, and the garment-type options
   grid that only appears in "Choose Myself" mode. */
.recommendation-mode-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.mode-button {
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: 0.85rem;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.mode-button:hover {
  border-color: var(--accent);
}

.mode-button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}

.garment-type-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.garment-type-button {
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: 0.85rem;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.garment-type-button:hover {
  border-color: var(--accent);
}

.garment-type-button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}

.color-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
  color: var(--muted);
  cursor: pointer;
}

.color-toggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

.credits-remaining-note {
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--success);
  margin: 0 0 0.75rem;
}

.credits-remaining-note.credits-remaining-low {
  color: var(--error);
}

.results-paywall-promo {
  margin-top: 1.75rem;
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg);
  text-align: center;
}

.results-paywall-heading {
  margin: 0 0 0.9rem;
  font-weight: 700;
  color: var(--text);
}

.results-paywall-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
}

.results-paywall-actions button {
  flex: 1 1 200px;
  max-width: 260px;
}

.back-link {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0;
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  transition: color 0.12s ease;
}

.back-link:hover {
  color: var(--accent);
}

.mode-selector {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.9rem;
}

.mode-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.4rem;
  padding: 1.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.08s ease;
}

.mode-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.mode-icon {
  font-size: 1.8rem;
}

.mode-title {
  font-weight: 700;
}

.mode-desc {
  font-size: 0.8rem;
  color: var(--muted);
}

.primary-button {
  padding: 0.65rem 1.1rem;
  border-radius: 8px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.05s ease;
}

.primary-button:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.primary-button:active {
  transform: translateY(1px);
}

.secondary-button {
  padding: 0.65rem 1.1rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  transition: border-color 0.12s ease, color 0.12s ease;
}

.secondary-button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

#retakePhotoButton {
  margin-top: 0.75rem;
}

.reference-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 0.4rem;
}

#referenceInputScreen input,
#authScreen input,
#forgotPasswordScreen input,
#resetPasswordScreen input,
#changePasswordScreen input {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font: inherit;
  margin-bottom: 0.75rem;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

#referenceInputScreen input:focus,
#authScreen input:focus,
#forgotPasswordScreen input:focus,
#resetPasswordScreen input:focus,
#changePasswordScreen input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}

#authScreen .capture-tabs {
  margin-bottom: 1.25rem;
}

.google-signin-wrap {
  margin-bottom: 1.25rem;
}

.google-signin-wrap #googleSignInButton {
  display: flex;
  justify-content: center;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.password-field {
  position: relative;
  margin-bottom: 0.75rem;
}

.password-field input {
  padding-right: 3.25rem !important;
  margin-bottom: 0 !important;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  border: none;
  background: none;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.3rem 0.4rem;
  line-height: 1;
}

.password-toggle:hover {
  color: var(--accent);
}

#referenceResultWrap {
  margin-top: 1rem;
}

.results {
  margin-top: 2rem;
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
}

.recommendation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}

.recommendation-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}

.recommendation-card h3 {
  margin: 0 0 0.4rem;
  font-size: 1rem;
}

.recommendation-card .why {
  color: var(--muted);
  font-size: 0.9rem;
}

.beard-pairing {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
  font-size: 0.9rem;
}

.style-details {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.style-details strong {
  color: var(--text);
}

.outfit-fit,
.outfit-why,
.outfit-score {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0 0 0.4rem;
}

.generated-image-wrap {
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 0.75rem;
  background: var(--bg);
}

.generated-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
  padding: 0.5rem;
}

.image-placeholder .generation-message {
  color: var(--text);
  font-weight: 600;
}

.image-placeholder .generation-message-note {
  font-size: 0.78rem;
}

.image-error {
  color: var(--error);
}

.spinner {
  width: 22px;
  height: 22px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.before-after {
  --pos: 50%;
  position: relative;
  width: 100%;
  height: 100%;
  /* Vertical page scroll still passes through; horizontal drag is captured
     by wireBeforeAfterSlider's own pointer handlers. */
  touch-action: pan-y;
  cursor: ew-resize;
  user-select: none;
}

.before-after-img {
  position: absolute;
  inset: 0;
  /* Dragging is handled at the container level (see wireBeforeAfterSlider),
     not per-image, so clicks/drags always reach the container. */
  pointer-events: none;
}

.before-after-before {
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

.before-after-labels {
  position: absolute;
  inset: 0.5rem 0.5rem auto 0.5rem;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.before-after-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
}

.before-after-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  background: #fff;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.before-after-handle-grip {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #fff;
  box-shadow: var(--shadow-md);
}

.before-after-handle:focus-visible {
  outline: none;
}

.before-after-handle:focus-visible .before-after-handle-grip {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.image-actions {
  margin-bottom: 0.6rem;
}

.save-button {
  width: 100%;
  padding: 0.45rem 0.75rem;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
  font-size: 0.85rem;
  transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}

.save-button:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(79, 70, 229, 0.06);
}

.color-section {
  margin-top: 2rem;
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
}

.color-swatch {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.color-hex {
  margin: 0 0 0.4rem;
  color: var(--muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.color-shade-hint {
  margin: 0;
  color: var(--success);
  font-size: 0.78rem;
  font-weight: 600;
}

.color-swatch-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.5rem 0 0.75rem;
}

.color-swatch-button {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--border);
  cursor: pointer;
  padding: 0;
}

.color-swatch-button.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
}

.color-avoid-list {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0;
}

.color-avoid-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border);
}

.color-avoid-list li:last-child {
  border-bottom: none;
}

.outfit-picker {
  margin-top: 0.9rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

.outfit-picker:empty {
  display: none;
}

.outfit-picker h4 {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--muted);
}

.outfit-picker p {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0 0 0.4rem;
}

.outfit-category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

.outfit-category-tab {
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-size: 0.78rem;
  cursor: pointer;
}

.outfit-category-tab.active {
  border-color: var(--accent);
  color: var(--accent);
}

.outfit-category-label {
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0 0 0.4rem;
}

.status-message {
  min-height: 1.2rem;
  margin-top: 1rem;
  color: var(--muted);
}

.status-error {
  color: var(--error);
}

#authProfileFields {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
}

.buy-credits-title {
  margin-bottom: 1.25rem;
}

.wallet-card {
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: var(--accent-contrast);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-md);
  text-align: center;
}

.wallet-balance {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.5rem;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
}

.wallet-balance-unit {
  font-size: 1.1rem;
  font-weight: 500;
  opacity: 0.9;
}

.buy-credits-section {
  margin-bottom: 2rem;
}

.buy-credits-section.hidden {
  display: none;
}

.section-heading {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.section-heading h3 {
  margin: 0 0 0.2rem;
  font-size: 1.05rem;
}

.section-heading .subtitle {
  margin: 0;
  font-size: 0.85rem;
}

.step-badge {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-contrast);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
}

.credit-package-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}

.credit-package-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  text-align: center;
  padding: 1.5rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.12s ease, transform 0.08s ease;
}

.credit-package-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.package-price {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}

.package-photos {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 1rem;
}

.package-qr {
  width: 160px;
  height: 160px;
  border-radius: 10px;
  border: 1px solid var(--border);
  padding: 0.5rem;
  background: #fff;
  margin-bottom: 0.9rem;
}

.pay-razorpay-button {
  margin-bottom: 0.9rem;
}

.manual-upi-details {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.manual-upi-details summary {
  text-align: center;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.3rem 0;
  list-style: none;
}

.manual-upi-details summary::-webkit-details-marker {
  display: none;
}

.manual-upi-details summary:hover {
  color: var(--accent);
}

.manual-upi-details[open] summary {
  margin-bottom: 0.9rem;
}

.pay-upi-button {
  display: block;
  width: 100%;
  text-align: center;
  text-decoration: none;
}

.pay-upi-hint {
  font-size: 0.75rem;
  color: var(--muted);
  text-align: center;
  margin: 0.5rem 0 0;
}

.generation-caveat {
  font-size: 0.78rem;
  color: var(--muted);
  margin: 0 0 0.5rem;
}

.generation-caveat .link-button {
  padding: 0;
  margin: 0;
  font-size: inherit;
}

.link-button {
  border: none;
  background: none;
  color: var(--accent);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0.4rem 0;
  margin-top: 0.2rem;
}

.link-button:hover {
  text-decoration: underline;
}

.admin-email-issue {
  display: block;
  color: #c0392b;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: capitalize;
}

.empty-state {
  padding: 1.25rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  text-align: center;
  color: var(--muted);
}

.payment-history-wrap {
  overflow-x: auto;
}

.payment-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.payment-history-table th {
  text-align: left;
  padding: 0.5rem 0.75rem;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.payment-history-table td {
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.payment-history-table tr:last-child td {
  border-bottom: none;
}

.utr-cell {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8rem;
}

.status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 0.4rem;
}

.status-dot-pending {
  background: var(--muted);
}

.status-dot-approved {
  background: var(--success);
}

.status-dot-rejected {
  background: var(--error);
}

.payment-request-list {
  margin: 0.75rem 0 1.5rem;
}

.payment-request-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}

.payment-request-row:last-child {
  border-bottom: none;
}

.payment-status {
  font-weight: 600;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
}

.payment-status-pending {
  color: var(--muted);
  background: var(--bg);
}

.payment-status-approved {
  color: var(--success);
  background: rgba(22, 163, 74, 0.12);
}

.payment-status-rejected {
  color: var(--error);
  background: rgba(220, 38, 38, 0.1);
}

.admin-actions {
  display: flex;
  gap: 0.5rem;
  margin-left: auto;
}

/* --- Admin console: sidebar + panel dashboard layout --- */

.admin-console {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
}

.admin-sidebar {
  flex: 0 0 220px;
  position: sticky;
  top: 1.5rem;
}

.admin-sidebar-brand {
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 1.25rem;
  padding: 0 0.25rem;
  color: var(--accent);
}

.admin-sidebar-brand span {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 0.1rem;
}

.admin-nav {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.admin-nav-item {
  text-align: left;
  padding: 0.6rem 0.75rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.admin-nav-item:hover {
  background: var(--panel);
  color: var(--text);
}

.admin-nav-item.active {
  background: var(--panel);
  color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.admin-content {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
}

.admin-panel.hidden {
  display: none;
}

.admin-panel h2 {
  margin-top: 0;
}

@media (max-width: 720px) {
  .admin-console {
    flex-direction: column;
    gap: 1rem;
  }

  .admin-sidebar {
    position: static;
    flex: 1 1 auto;
    width: 100%;
  }

  .admin-nav {
    flex-direction: row;
    overflow-x: auto;
    gap: 0.4rem;
    padding-bottom: 0.25rem;
  }

  .admin-nav-item {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .admin-content {
    padding: 1.25rem;
  }
}

.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.85rem;
  margin: 0 0 1.5rem;
}

.admin-stat-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  background: var(--bg);
}

.admin-stat-card strong {
  font-size: 1.5rem;
  letter-spacing: -0.01em;
}

.admin-stat-card span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.admin-query-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 0.75rem 0;
}

.admin-query-select,
.admin-query-days-field input {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  padding: 0.5rem 0.7rem;
  font-size: 0.85rem;
}

.admin-query-select {
  min-width: 220px;
}

.admin-query-days-field {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.admin-query-days-field input {
  width: 4.5rem;
}

.admin-query-error {
  color: var(--error);
}

.admin-behaviour-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin: 0.75rem 0 1.75rem;
}

.admin-chart-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  background: var(--bg);
}

.admin-chart-card h3 {
  margin: 0 0 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}

.admin-bar-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.admin-bar-row {
  display: grid;
  grid-template-columns: minmax(80px, 30%) 1fr auto;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.82rem;
}

.admin-bar-label {
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-bar-track {
  height: 10px;
  background: var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.admin-bar-fill {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 6px;
}

.admin-bar-value {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.admin-profile-purchases {
  border-top: 1px solid var(--border);
  padding-top: 1rem;
  margin-top: 1rem;
}

.admin-profile-purchases h4 {
  margin: 0 0 0.6rem;
  font-size: 0.85rem;
}

.admin-purchases-table {
  font-size: 0.8rem;
}

.admin-users-search {
  margin: 0.75rem 0 0;
  max-width: 320px;
  width: 100%;
}

.admin-users-wrap {
  overflow-x: auto;
  margin: 0.75rem 0 0;
}

.admin-users-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.admin-users-table th {
  text-align: left;
  padding: 0.55rem 0.6rem;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.admin-users-table td {
  text-align: left;
  padding: 0.6rem 0.6rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.temp-password code {
  background: var(--bg);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 13, 19, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  z-index: 100;
}

.modal-box {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  max-width: 380px;
  width: 100%;
  padding: 1.5rem;
}

.modal-box h3 {
  margin: 0 0 0.6rem;
  font-size: 1.05rem;
}

.modal-box p {
  margin: 0 0 1.25rem;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.modal-actions {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.modal-actions .primary-button {
  width: auto;
}

.modal-actions .modal-secondary-button {
  padding: 0.65rem 1.1rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
}

.modal-actions .modal-secondary-button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.modal-actions .modal-link-button {
  border: none;
  background: none;
  color: var(--muted);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0.3rem;
}

.modal-actions .modal-link-button:hover {
  color: var(--text);
}

.admin-user-profile-box {
  max-width: 460px;
}

.admin-profile-fields {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 1rem;
  margin: 0 0 1.25rem;
  font-size: 0.9rem;
}

.admin-profile-fields dt {
  color: var(--muted);
  font-weight: 600;
}

.admin-profile-fields dd {
  margin: 0;
}

.admin-profile-password {
  border-top: 1px solid var(--border);
  padding-top: 1rem;
}

.admin-profile-password label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.admin-profile-password-row {
  display: flex;
  gap: 0.5rem;
}

.admin-profile-password-row input {
  flex: 1;
}

.admin-profile-password #adminProfilePasswordStatus {
  margin: 0.5rem 0 0;
}

/* ==========================================================================
   Public landing page

   Scoped design tokens under #landingScreen -- deliberately NOT redefined
   inside the app's @media(prefers-color-scheme: dark) block above, so the
   marketing page always renders the light plum/lavender palette regardless
   of system theme, while every other screen keeps respecting dark mode as
   before. body.landing-active toggles the surrounding chrome (full-width
   header, hidden .panel wrapper) -- see showScreen() in app.js.
   ========================================================================== */

#landingScreen {
  background: var(--landing-bg);
  color: var(--landing-text);
}

body.landing-active .app-shell {
  max-width: none;
  padding: 0;
}

body.studio-active .app-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: #ffffff;
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid #ece3f0;
}

body.studio-active .header-top {
  max-width: 1180px;
  margin: 0 auto;
  padding-bottom: 0;
  border-bottom: none;
}

body.studio-active .app-header h1 {
  font-size: 1.2rem;
  color: var(--landing-primary, #4c145c);
}

body.studio-active .app-header .subtitle {
  display: none;
}

.header-brand-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.header-logomark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--landing-mint-bg, #ddf4e8);
  color: var(--landing-primary, #4c145c);
  flex: none;
}

body.studio-active .auth-status {
  padding-top: 0;
}

body.studio-active #authLink {
  border: 1px solid var(--landing-primary, #4c145c);
  color: var(--landing-primary, #4c145c);
  border-radius: 999px;
  padding: 0.45rem 1.1rem;
  font-weight: 600;
}

body.studio-active #authLink:hover {
  background: var(--landing-primary, #4c145c);
  color: #ffffff;
}

body.landing-active .panel {
  display: none;
}

/* Auth / forgot-password / reset-password screens -- the flow the landing
   page's CTAs lead a logged-out visitor into. Recolored to the same Style
   AI Studio palette so it doesn't feel like a different, older app once
   they click through. Scoped by screen id (not a global --accent swap) so
   every other screen -- capture, results, buy credits, admin, change
   password -- keeps its original indigo accent untouched. */
#authScreen .tab-button.active {
  color: var(--landing-primary, #4c145c);
}

#authScreen .primary-button,
#forgotPasswordScreen .primary-button,
#resetPasswordScreen .primary-button {
  background: var(--landing-primary, #4c145c);
  border-color: var(--landing-primary, #4c145c);
}

#authScreen .primary-button:hover,
#forgotPasswordScreen .primary-button:hover,
#resetPasswordScreen .primary-button:hover {
  background: var(--landing-primary-hover, #3b0f48);
  border-color: var(--landing-primary-hover, #3b0f48);
}

#authScreen .auth-link,
#authScreen .password-toggle:hover,
#forgotPasswordScreen a,
#resetPasswordScreen a {
  color: var(--landing-primary, #4c145c);
}

#authScreen input:focus,
#forgotPasswordScreen input:focus,
#resetPasswordScreen input:focus {
  border-color: var(--landing-primary, #4c145c);
  box-shadow: 0 0 0 3px rgba(76, 20, 92, 0.15);
}

#forgotPasswordScreen h2,
#resetPasswordScreen h2 {
  color: var(--landing-text, #1f1a24);
}

/* Decorative page backdrop for the studio-branded auth/forgot/reset/mode
   screens -- a faint, tiled pattern of styling tools (scissors, comb,
   sparkles, a hair wave) plus two soft blurred color blobs, echoing the
   same abstract decor used inside the landing hero panel. Line art only,
   no photos or real imagery (no model release on file); :not(.landing-active)
   keeps this off the landing page itself, which already has its own decor. */
body.studio-active:not(.landing-active) {
  position: relative;
  background-color: var(--landing-bg, #ffffff);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%23d3c0da' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(28,44) rotate(-18)'%3E%3Ccircle cx='0' cy='0' r='6'/%3E%3Ccircle cx='0' cy='22' r='6'/%3E%3Cpath d='M5 4L30 30M5 18L30 -8'/%3E%3C/g%3E%3Cg transform='translate(168,34) rotate(12)'%3E%3Crect x='0' y='0' width='34' height='9' rx='2'/%3E%3Cpath d='M3 9v13M9 9v13M15 9v13M21 9v13M27 9v13M33 9v13'/%3E%3C/g%3E%3Cpath d='M170 150c6-9 12-9 18 0s12 9 18 0'/%3E%3Cpath d='M30 176c6-9 12-9 18 0s12 9 18 0'/%3E%3Cpath d='M9 0l2.6 7 7 2.6-7 2.6-2.6 7-2.6-7-7-2.6 7-2.6z' fill='%23d3c0da' stroke='none' transform='translate(196,116)'/%3E%3Cpath d='M9 0l2.6 7 7 2.6-7 2.6-2.6 7-2.6-7-7-2.6 7-2.6z' fill='%23d3c0da' stroke='none' transform='translate(100,8)'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 260px 260px;
}

body.studio-active:not(.landing-active)::before,
body.studio-active:not(.landing-active)::after {
  content: "";
  position: fixed;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}

body.studio-active:not(.landing-active)::before {
  top: -130px;
  right: -110px;
  width: 340px;
  height: 340px;
  background: var(--landing-primary, #4c145c);
  opacity: 0.08;
}

body.studio-active:not(.landing-active)::after {
  bottom: -150px;
  left: -120px;
  width: 320px;
  height: 320px;
  background: var(--landing-mint-text, #1f6b45);
  opacity: 0.08;
}

body.studio-active .mode-card:hover {
  border-color: var(--landing-primary, #4c145c);
}

body.studio-active .mode-card:hover .mode-title {
  color: var(--landing-primary, #4c145c);
}

.marketing-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  order: 2;
}

.marketing-nav a {
  color: var(--landing-text, #1f1a24);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
  transition: color 0.12s ease;
}

.marketing-nav a:hover,
.marketing-nav a:focus-visible {
  color: var(--landing-primary, #4c145c);
}

.marketing-nav-toggle {
  order: 2;
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 36px;
  height: 36px;
  border: 1px solid var(--landing-border, #e8e0ee);
  border-radius: 8px;
  background: #ffffff;
  cursor: pointer;
  margin-left: auto;
}

.marketing-nav-toggle span {
  display: block;
  height: 2px;
  margin: 0 7px;
  background: var(--landing-primary, #4c145c);
  border-radius: 1px;
}

.header-brand {
  order: 1;
}

.auth-status {
  order: 3;
}

.landing-container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.landing-hero {
  padding: 3rem 0 3.5rem;
  scroll-margin-top: 4.5rem;
}

.landing-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}

.landing-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--landing-mint-bg, #ddf4e8);
  color: var(--landing-mint-text, #1f6b45);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
}

.pill-badge svg {
  width: 13px;
  height: 13px;
  flex: none;
}

.landing-headline {
  font-size: 2.1rem;
  line-height: 1.15;
  margin: 0;
  color: var(--landing-text, #1f1a24);
}

.landing-subcopy {
  font-size: 1.05rem;
  color: var(--landing-muted, #6b6274);
  margin: 0;
  max-width: 34ch;
}

.landing-primary-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  border: none;
  background: var(--landing-primary, #4c145c);
  color: #ffffff;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.05s ease;
}

.landing-primary-button svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.landing-primary-button:hover {
  background: var(--landing-primary-hover, #3b0f48);
}

.landing-primary-button:active {
  transform: translateY(1px);
}

.landing-secondary-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--landing-primary, #4c145c);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.landing-secondary-link svg {
  width: 14px;
  height: 14px;
  flex: none;
  transition: transform 0.12s ease;
}

.landing-secondary-link:hover {
  color: var(--landing-primary-hover, #3b0f48);
}

.landing-secondary-link:hover svg {
  transform: translateX(2px);
}

.landing-trust-points {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.25rem;
  margin: 0.5rem 0 0;
  padding: 0;
}

.landing-trust-points li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--landing-text, #1f1a24);
}

.landing-trust-icon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--landing-surface, #f7f2fa);
  color: var(--landing-primary, #4c145c);
  flex: none;
}

.landing-trust-icon-chip svg {
  width: 14px;
  height: 14px;
}

/* Studio panel -- intentionally no photographic or realistic human imagery
   anywhere (legal constraint: no model release on file). A dashed neutral
   face outline plus generic hair/beard silhouette illustrations inside a
   phone-style mock, styled like a stylist's mood board. */
.landing-hero-visual {
  scroll-margin-top: 4.5rem;
}

.studio-panel {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 1rem;
  background: var(--landing-surface, #f7f2fa);
  border-radius: calc(var(--landing-radius, 18px) + 6px);
  padding: 1.5rem;
}

.studio-decor {
  position: absolute;
  pointer-events: none;
}

.studio-decor-dots {
  top: 1rem;
  left: 1rem;
  width: 60px;
  height: 60px;
  background-image: radial-gradient(var(--landing-primary, #4c145c) 1.4px, transparent 1.4px);
  background-size: 12px 12px;
  opacity: 0.25;
}

.studio-decor-blob-a {
  top: -30px;
  right: -30px;
  width: 130px;
  height: 130px;
  border-radius: 62% 38% 55% 45% / 45% 55% 45% 55%;
  background: var(--landing-primary, #4c145c);
  opacity: 0.12;
}

.studio-decor-blob-b {
  bottom: -35px;
  left: -25px;
  width: 110px;
  height: 110px;
  border-radius: 45% 55% 40% 60% / 55% 45% 60% 40%;
  background: var(--landing-mint-text, #1f6b45);
  opacity: 0.12;
}

.studio-card {
  position: relative;
  z-index: 1;
  flex: 1 1 120px;
  min-width: 0;
  background: #ffffff;
  border-radius: var(--landing-radius, 18px);
  box-shadow: var(--landing-shadow);
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.studio-card-title {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--landing-text, #1f1a24);
  text-align: center;
  overflow-wrap: break-word;
}

.studio-illustration {
  background: var(--landing-surface, #f7f2fa);
  border-radius: 12px;
  padding: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.studio-illustration svg {
  width: 100%;
  height: auto;
  max-width: 110px;
  color: #2b2230;
}

.studio-swatch-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.3rem;
}

.studio-swatch {
  background: #ffffff;
  border: 1px solid var(--landing-border, #e8e0ee);
  border-radius: 8px;
  padding: 0.3rem;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--landing-primary, #4c145c);
}

.studio-swatch svg {
  width: 14px;
  height: 14px;
  flex: none;
}

.studio-swatch:nth-child(even) svg {
  transform: scaleX(-1);
}

.studio-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  align-self: flex-start;
  margin-top: auto;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--landing-mint-text, #1f6b45);
  background: var(--landing-mint-bg, #ddf4e8);
  border-radius: 999px;
  padding: 0.3rem 0.65rem;
}

.studio-tag svg {
  width: 13px;
  height: 13px;
  flex: none;
}

.studio-tag-sub {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--landing-muted, #6b6274);
  margin-top: 0.3rem;
}

.studio-phone {
  position: relative;
  z-index: 1;
  flex: 1.3 1 140px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.studio-phone-bezel {
  background: #211a26;
  border-radius: 22px;
  padding: 0.6rem 0.6rem 0.9rem;
}

.studio-phone-notch {
  width: 46px;
  height: 12px;
  background: #211a26;
  border: 2px solid #362a3d;
  border-radius: 999px;
  margin: 0 auto 0.5rem;
}

.studio-phone-screen {
  position: relative;
  background: var(--landing-surface, #f7f2fa);
  border-radius: 14px;
  padding: 0.9rem 0.7rem 0.7rem;
}

.studio-match-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--landing-primary, #4c145c);
}

.studio-match-badge svg {
  width: 14px;
  height: 14px;
}

.studio-face-svg {
  display: block;
  width: 100%;
  max-width: 130px;
  margin: 0.4rem auto;
  height: auto;
}

.studio-face-outline {
  fill: none;
  stroke: var(--landing-primary, #4c145c);
  stroke-width: 1.6;
  stroke-dasharray: 4 3;
}

.studio-slider-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-top: 1px solid var(--landing-border, #e8e0ee);
  padding-top: 0.5rem;
}

.studio-slider-arrow {
  color: var(--landing-primary, #4c145c);
  display: flex;
}

.studio-slider-arrow svg {
  width: 14px;
  height: 14px;
}

.studio-slider-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--landing-primary, #4c145c);
  box-shadow: var(--landing-shadow);
}

.studio-before-after-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--landing-muted, #6b6274);
  margin-top: 0.4rem;
}

.studio-feature-card {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: var(--landing-shadow);
  padding: 0.75rem 0.5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
}

.studio-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  text-align: center;
}

.studio-feature svg {
  width: 18px;
  height: 18px;
  color: var(--landing-primary, #4c145c);
}

.studio-feature span {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--landing-text, #1f1a24);
  line-height: 1.2;
}

@media (min-width: 640px) {
  .studio-panel {
    padding: 1.75rem;
  }

  .studio-illustration svg {
    max-width: 130px;
  }
}

.landing-section-heading {
  text-align: center;
  font-size: 1.6rem;
  margin: 0 0 1.75rem;
  color: var(--landing-text, #1f1a24);
}

.landing-pricing {
  background: var(--landing-surface, #f7f2fa);
  padding: 3rem 0;
  scroll-margin-top: 4.5rem;
}

.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
}

.pricing-card {
  background: #ffffff;
  border: 1px solid var(--landing-border, #e8e0ee);
  border-radius: var(--landing-radius, 18px);
  box-shadow: var(--landing-shadow);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
}

.pricing-card-icon {
  font-size: 1.6rem;
  line-height: 1;
  margin-bottom: 0.15rem;
}

.pricing-card-note {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--landing-muted, #6b6274);
  margin: -0.3rem 0 0;
}

.pricing-card-name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--landing-muted, #6b6274);
}

.pricing-card-price-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.pricing-card-price {
  font-size: 2rem;
  font-weight: 700;
  color: var(--landing-text, #1f1a24);
}

.pricing-card-original-price {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--landing-muted, #6b6274);
  text-decoration: line-through;
}

.pricing-card-tagline {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--landing-mint-text, #1f6b45);
  margin: 0;
}

.pricing-card-desc {
  font-size: 0.88rem;
  color: var(--landing-muted, #6b6274);
  margin: 0 0 0.2rem;
}

.pricing-card-features {
  list-style: none;
  margin: 0 0 0.2rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--landing-text, #1f1a24);
}

.pricing-card-features li {
  padding-left: 1.1rem;
  position: relative;
}

.pricing-card-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--landing-mint-text, #1f6b45);
}

.pricing-card-per-look {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--landing-mint-text, #1f6b45);
  margin: -0.2rem 0 0;
}

.pricing-card-cta {
  margin-top: auto;
  padding: 0.7rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--landing-primary, #4c145c);
  background: #ffffff;
  color: var(--landing-primary, #4c145c);
  font-weight: 700;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.pricing-card-cta:hover {
  background: var(--landing-primary, #4c145c);
  color: #ffffff;
}

.pricing-card-free .pricing-card-name {
  color: var(--landing-mint-text, #1f6b45);
}

.pricing-card-popular {
  border-color: var(--landing-primary, #4c145c);
  border-width: 2px;
}

.pricing-card-best {
  background: var(--landing-primary, #4c145c);
  border-color: var(--landing-primary, #4c145c);
  color: #ffffff;
}

.pricing-card-best .pricing-card-name,
.pricing-card-best .pricing-card-price,
.pricing-card-best .pricing-card-desc,
.pricing-card-best .pricing-card-features,
.pricing-card-best .pricing-card-original-price {
  color: #ffffff;
}

.pricing-card-best .pricing-card-desc {
  opacity: 0.85;
}

.pricing-card-best .pricing-card-features li::before {
  color: #ffffff;
}

.pricing-card-best .pricing-card-per-look,
.pricing-card-best .pricing-card-tagline {
  color: rgba(255, 255, 255, 0.85);
}

.pricing-card-best .pricing-card-original-price {
  opacity: 0.7;
}

.pricing-card-best .pricing-card-cta {
  background: #ffffff;
  color: var(--landing-primary, #4c145c);
  border-color: #ffffff;
}

.pricing-card-best .pricing-card-cta:hover {
  background: var(--landing-mint-bg, #ddf4e8);
}

.pricing-card-badge {
  position: absolute;
  top: -0.65rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--landing-mint-bg, #ddf4e8);
  color: var(--landing-mint-text, #1f6b45);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  box-shadow: var(--landing-shadow);
  white-space: nowrap;
}

.pricing-card-popular .pricing-card-badge {
  background: var(--landing-primary, #4c145c);
  color: #ffffff;
}

.landing-pricing-note {
  text-align: center;
  color: var(--landing-muted, #6b6274);
  font-size: 0.88rem;
  margin: 1.75rem 0 0;
}

.landing-how {
  padding: 3rem 0;
  scroll-margin-top: 4.5rem;
}

.how-steps {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  counter-reset: how-step;
}

.how-step {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
}

.how-step-icon {
  position: relative;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--landing-surface, #f7f2fa);
  color: var(--landing-primary, #4c145c);
  display: flex;
  align-items: center;
  justify-content: center;
}

.how-step-icon svg {
  width: 19px;
  height: 19px;
}

.how-step-number {
  position: absolute;
  top: -7px;
  left: -7px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--landing-primary, #4c145c);
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.how-connector {
  display: none;
}

.how-step-title {
  font-weight: 700;
  margin: 0 0 0.15rem;
  color: var(--landing-text, #1f1a24);
}

.how-step-desc {
  margin: 0;
  font-size: 0.88rem;
  color: var(--landing-muted, #6b6274);
}

.landing-trust {
  padding: 2.5rem 0 3.5rem;
  scroll-margin-top: 4.5rem;
}

.trust-strip {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  text-align: center;
  color: var(--landing-muted, #6b6274);
  font-size: 0.85rem;
}

.trust-strip p {
  margin: 0;
}

@media (min-width: 640px) {
  .landing-headline {
    font-size: 2.4rem;
  }

  .pricing-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .how-steps {
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
  }

  .how-connector {
    display: block;
    align-self: start;
    height: 0;
    margin-top: 21px;
    border-top: 2px dotted var(--landing-border, #e8e0ee);
    width: 2.5rem;
  }

  .trust-strip {
    flex-direction: row;
    justify-content: center;
    gap: 1.75rem;
  }
}

@media (min-width: 800px) {
  .pricing-grid {
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
  }

  .pricing-card-best,
  .pricing-card-popular {
    padding: 1.85rem 1.5rem;
    transform: translateY(-0.5rem);
  }
}

@media (min-width: 900px) {
  .landing-hero-grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 3rem;
  }

  .landing-headline {
    font-size: 2.75rem;
  }
}

@media (max-width: 720px) {
  .marketing-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    background: #ffffff;
    border-bottom: 1px solid var(--landing-border, #e8e0ee);
    padding: 0.75rem 1.25rem 1rem;
    box-shadow: var(--landing-shadow);
    display: none;
  }

  .marketing-nav:not(.hidden).open {
    display: flex;
  }

  .marketing-nav:not(.open) {
    display: none;
  }

  .marketing-nav-toggle:not(.hidden) {
    display: flex;
  }

  body.landing-active .header-top {
    position: relative;
  }
}