/* Sweet Dreams — standalone design (no Tailwind) */

/* Dreamy nighttime theme: deep indigo, violet, warm gold accents */

/* ── Variables ──────────────────────────────────────────────── */
:root {
  /* Brand palette */
  --sd-bg:            #0f0c29;
  --sd-bg-soft:       #1a1640;
  --sd-bg-header:     rgb(15 12 41 / 90%);
  --sd-bg-card:       #1e1b4b;
  --sd-bg-card-hover: #252159;
  --sd-bg-light:      #f5f3ff;
  --sd-bg-section:    #ede9fe;
  --sd-accent:        #a78bfa;
  --sd-accent-dark:   #7c3aed;
  --sd-accent-hover:  #8b5cf6;
  --sd-accent-muted:  rgb(167 139 250 / 15%);
  --sd-gold:          #fbbf24;
  --sd-gold-muted:    rgb(251 191 36 / 20%);
  --sd-text:          #f1f0ff;
  --sd-text-soft:     #c4b5fd;
  --sd-text-muted:    #8b84c4;
  --sd-text-dark:     #1e1b4b;
  --sd-border:        rgb(167 139 250 / 20%);
  --sd-border-strong: rgb(167 139 250 / 40%);

  /* Gradients */
  --sd-grad-hero:     linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
  --sd-grad-accent:   linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);
  --sd-grad-card:     linear-gradient(145deg, #1e1b4b, #252159);
  --sd-grad-cover:    linear-gradient(135deg, var(--sd-accent-dark), var(--sd-accent));

  /* Typography */
  --sd-font:          "Nunito", system-ui, sans-serif;

  /* Radii */
  --sd-radius-sm:     0.375rem;
  --sd-radius-md:     0.625rem;
  --sd-radius-lg:     1rem;
  --sd-radius-xl:     1.5rem;
  --sd-radius-pill:   9999px;

  /* Spacing */
  --sd-space-xs:      0.5rem;
  --sd-space-sm:      0.75rem;
  --sd-space-md:      1rem;
  --sd-space-lg:      1.5rem;
  --sd-space-xl:      2rem;
  --sd-space-2xl:     3rem;
  --sd-space-3xl:     4rem;

  /* Shadows */
  --sd-shadow:        0 4px 24px rgb(0 0 0 / 30%);
  --sd-shadow-card:   0 2px 12px rgb(0 0 0 / 25%);
  --sd-shadow-glow:   0 0 30px rgb(167 139 250 / 25%);

  /* Transitions */
  --sd-transition:    0.2s ease;

  /* App layout */
  --sd-sidebar-width:   220px;
  --sd-topbar-height:   56px;
  --sd-bottom-nav-h:    60px;
}

/* ── Base reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

.sd-public,
.sd-app {
  margin: 0;
  font-family: var(--sd-font);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--sd-text);
  background: var(--sd-bg);
  -webkit-font-smoothing: antialiased;
}

.sd-public {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.sd-public > main { flex: 1; }

/* ── Skip link ──────────────────────────────────────────────── */
.sd-skip-link {
  position: absolute;
  top: -100px;
  left: var(--sd-space-md);
  z-index: 9999;
  padding: 0.6rem 1.2rem;
  background: var(--sd-accent);
  color: #fff;
  font-weight: 700;
  font-family: var(--sd-font);
  border-radius: var(--sd-radius-md);
  text-decoration: none;
  transition: top 0.1s;
}
.sd-skip-link:focus-visible { top: var(--sd-space-md); }

/* ── Focus rings (accessibility) ───────────────────────────── */

/* Form inputs use box-shadow for focus — exclude them from the global rule */
.sd-app :focus-visible:not(.sd-input, .sd-select, .sd-textarea, .sd-auth-input),
.sd-public :focus-visible:not(.sd-input, .sd-select, .sd-textarea, .sd-auth-input) {
  outline: 2px solid var(--sd-accent);
  outline-offset: 2px;
}

/* ── Container ──────────────────────────────────────────────── */
.sd-container {
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: var(--sd-space-lg);
}

/* ── Typography helpers ─────────────────────────────────────── */
.sd-accent    { color: var(--sd-accent); }
.sd-muted     { color: var(--sd-text-muted); font-size: 0.9rem; }
.sd-dot       { color: var(--sd-text-muted); margin-inline: 0.2rem; }
.sd-link-muted { color: var(--sd-text-muted); font-size: 0.85rem; cursor: pointer; }
.sd-link-muted:hover { color: var(--sd-accent); }
.sd-link-accent { color: var(--sd-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.sd-link-accent:hover { color: var(--sd-text); }
.hidden       { display: none !important; }
.sd-sr-only   { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ── Buttons ────────────────────────────────────────────────── */
.sd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.6rem 1.25rem;
  border-radius: var(--sd-radius-pill);
  font-family: var(--sd-font);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background var(--sd-transition), border-color var(--sd-transition), color var(--sd-transition), transform var(--sd-transition);
}

.sd-btn:active { transform: scale(0.97); }

.sd-btn-primary {
  background: var(--sd-grad-accent);
  color: #fff;
  border-color: transparent;
}
.sd-btn-primary:hover { background: var(--sd-accent-dark); color: #fff; }

.sd-btn-secondary {
  background: transparent;
  color: var(--sd-accent);
  border-color: var(--sd-accent);
}
.sd-btn-secondary:hover { background: var(--sd-accent-muted); }

.sd-btn-ghost {
  background: transparent;
  color: var(--sd-text-soft);
  border-color: var(--sd-border-strong);
}
.sd-btn-ghost:hover { color: var(--sd-text); border-color: var(--sd-accent); }

.sd-btn-danger {
  background: transparent;
  color: #f87171;
  border-color: #f87171;
}
.sd-btn-danger:hover { background: rgb(248 113 113 / 15%); }

.sd-btn-lg { padding: 0.8rem 1.75rem; font-size: 1.05rem; }
.sd-btn-sm { padding: 0.35rem 0.85rem; font-size: 0.82rem; }
.sd-btn-full { width: 100%; }
.sd-btn-icon { padding: 0.6rem; }

.sd-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  color: var(--sd-text-soft);
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--sd-transition), color var(--sd-transition);
}
.sd-icon-btn:hover { background: var(--sd-accent-muted); color: var(--sd-accent); }

/* ── Badges ─────────────────────────────────────────────────── */
.sd-badge {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border-radius: var(--sd-radius-pill);
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--sd-accent-muted);
  color: var(--sd-accent);
}

.sd-badge-muted {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgb(139 132 196 / 15%);
  color: var(--sd-text-muted);
  padding: 0.45rem 1.25rem;
  font-size: 0.85rem;
  font-weight: 600;
  border: 2px solid transparent;
  border-radius: var(--sd-radius-pill);
}

/* Stars */
.sd-star { color: var(--sd-gold); }

/* Tags */
.sd-tag {
  display: inline-block;
  padding: 0.25rem 0.7rem;
  border-radius: var(--sd-radius-pill);
  font-size: 0.8rem;
  font-weight: 600;
  background: var(--sd-accent-muted);
  color: var(--sd-accent);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--sd-transition), border-color var(--sd-transition), color var(--sd-transition);
  font-family: var(--sd-font);
  line-height: 1.4;
}

.sd-tag:hover {
  background: rgb(167 139 250 / 25%);
  border-color: var(--sd-accent);
}

.sd-tag.selected {
  background: var(--sd-accent);
  color: #fff;
  border-color: var(--sd-accent);
  box-shadow: 0 0 0 2px rgb(167 139 250 / 35%), 0 2px 8px rgb(167 139 250 / 25%);
}

.sd-tag-sm { font-size: 0.72rem; padding: 0.15rem 0.45rem; }
.sd-tags-inline { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.4rem; }

.sd-tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.5rem;
  min-height: 48px;
  border: 1px solid var(--sd-border-strong);
  border-radius: var(--sd-radius-md);
  background: var(--sd-bg-soft);
}

.sd-input--tag-custom {
  font-size: 0.85rem;
  margin-top: 0.5rem;
  padding: 0.35rem 0.65rem;
}

.sd-tag-custom { display: inline-flex; align-items: center; gap: 0.25rem; }

.sd-tag-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  padding: 0 0 0 0.15rem;
  font-size: 0.68rem;
  line-height: 1;
  opacity: 0.75;
}
.sd-tag-remove:hover { opacity: 1; }

/* ── Alerts ─────────────────────────────────────────────────── */
.sd-alert {
  padding: var(--sd-space-md);
  border-radius: var(--sd-radius-md);
  margin-bottom: var(--sd-space-md);
  font-size: 0.9rem;
}

.sd-alert-error {
  background: rgb(239 68 68 / 12%);
  border: 1px solid rgb(239 68 68 / 30%);
  color: #fca5a5;
}
.sd-alert-error ul { margin: 0.4rem 0 0; padding-left: 1.2rem; }

/* ── Cards (generic) ────────────────────────────────────────── */
.sd-card {
  background: var(--sd-grad-card);
  border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius-xl);
  padding: var(--sd-space-lg);
}

.sd-card-premium {
  border-color: var(--sd-gold-muted);
  background: linear-gradient(145deg, #1e1b4b, #2d1a5e);
  position: relative;
  z-index: 0;
}

.sd-card-premium > *:not(.sd-onboarding-stars, .sd-onboarding-dots) {
  position: relative;
  z-index: 1;
}

/* Nighttime starfield card — same dreamy background as the onboarding hero */
.sd-card--night {
  background: linear-gradient(145deg, #1a1154 0%, #2d1a5e 100%);
  border-color: var(--sd-accent-muted);
  position: relative;
  z-index: 0;
}

/* Lift the card above siblings when one of its dropdowns is open */
.sd-card--night:has(.sd-select-dropdown--open) {
  z-index: 10;
}

/* Lift a direct-child field above its siblings when its dropdown is open */
.sd-card--night > .sd-field:has(.sd-select-dropdown--open) {
  z-index: 5;
}

/* Lift all direct content above the decorative layers */
.sd-card--night > *:not(.sd-onboarding-stars, .sd-onboarding-sparkles, .sd-onboarding-hearts, .sd-onboarding-dots) {
  position: relative;
  z-index: 1;
}

/* Constellation dots layer */
.sd-onboarding-dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}

.sd-deco-dot {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #f1f0ff;
  box-shadow: 0 0 4px 2px rgb(241 240 255 / 55%);
  animation: sd-twinkle 2.5s ease-in-out infinite;
}

/* Floating hearts layer */
.sd-onboarding-hearts {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}

.sd-heart-deco {
  position: absolute;
  font-size: 10px;
  color: #f472b6;
}

.sd-heart-deco:nth-child(even)  { color: #fb7185; }
.sd-heart-deco:nth-child(3n)    { color: #f9a8d4; }

.sd-star-deco {
  position: absolute;
  font-size: 10px;
  color: var(--sd-gold);
}

.sd-star-deco:nth-child(even)   { color: #fcd34d; }
.sd-star-deco:nth-child(3n)     { color: #fbbf24; }

.sd-card-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: var(--sd-space-md);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--sd-gold);
}

/* ── Feature list ────────────────────────────────────────────── */
.sd-feature-list {
  list-style: none;
  margin: var(--sd-space-md) 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.sd-feature-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}
.sd-feature-list .fa-check { color: #4ade80; }
.sd-feature-list .fa-xmark { color: var(--sd-text-muted); }
.sd-feature-muted { color: var(--sd-text-muted); }

/* ── Forms ──────────────────────────────────────────────────── */
.sd-field { margin-bottom: var(--sd-space-lg); }

.sd-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--sd-text-soft);
  margin-bottom: 0.4rem;
}

.sd-input,
.sd-select,
.sd-textarea {
  width: 100%;
  padding: 0.65rem 0.85rem;
  background: var(--sd-bg-soft);
  border: 1px solid var(--sd-border-strong);
  border-radius: var(--sd-radius-md);
  color: var(--sd-text);
  font-family: var(--sd-font);
  font-size: 0.95rem;
  transition: border-color var(--sd-transition);
}

.sd-input::placeholder,
.sd-textarea::placeholder { color: var(--sd-text-muted); }

.sd-input:focus,
.sd-select:focus,
.sd-textarea:focus {
  outline: none;
  border-color: var(--sd-accent);
  box-shadow: 0 0 0 3px var(--sd-accent-muted);
}
.sd-textarea { resize: vertical; min-height: 80px; }

/* ── Custom select dropdown ──────────────────────────────────── */
.sd-custom-select {
  position: relative;
  width: 100%;
}

.sd-select-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.65rem 0.85rem;
  background: var(--sd-bg-soft);
  border: 1px solid var(--sd-border-strong);
  border-radius: var(--sd-radius-md);
  color: var(--sd-text);
  font-family: var(--sd-font);
  font-size: 0.95rem;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--sd-transition), box-shadow var(--sd-transition);
}

.sd-select-trigger:focus,
.sd-select-trigger--open {
  outline: none;
  border-color: var(--sd-accent);
  box-shadow: 0 0 0 3px var(--sd-accent-muted);
}

.sd-select-trigger--placeholder span { color: var(--sd-text-muted); }

.sd-select-trigger i {
  font-size: 0.75rem;
  color: var(--sd-text-muted);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.sd-select-trigger--open i { transform: rotate(180deg); }

.sd-select-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--sd-bg-card);
  border: 1px solid var(--sd-border-strong);
  border-radius: var(--sd-radius-md);
  box-shadow: var(--sd-shadow);
  z-index: 50;
  max-height: 220px;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.sd-select-dropdown--open {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.sd-select-option {
  display: block;
  width: 100%;
  padding: 0.6rem 0.85rem;
  background: none;
  border: none;
  color: var(--sd-text);
  font-family: var(--sd-font);
  font-size: 0.95rem;
  text-align: left;
  cursor: pointer;
  transition: background var(--sd-transition), color var(--sd-transition);
}

.sd-select-option:hover,
.sd-select-option:focus {
  background: var(--sd-bg-card-hover);
  outline: none;
}

.sd-select-option--active {
  color: var(--sd-accent);
  background: var(--sd-accent-muted);
}

@media (prefers-reduced-motion: reduce) {
  .sd-select-dropdown { transition: none; }
}

.sd-field-hint {
  font-size: 0.78rem;
  color: var(--sd-text-muted);
  margin-top: 0.3rem;
}

.sd-language-details { border: none; }

.sd-language-summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-size: 0.9rem;
  color: var(--sd-text);
}
.sd-language-summary::-webkit-details-marker { display: none; }
.sd-language-select { margin-top: 0.5rem; }

.sd-form-actions {
  display: flex;
  gap: var(--sd-space-sm);
  flex-wrap: wrap;
  padding-top: var(--sd-space-md);
}

/* Mood / theme / voice grid selectors */
.sd-mood-grid,
.sd-theme-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.sd-voice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.5rem;
}

.sd-mood-option,
.sd-theme-option,
.sd-voice-option { cursor: pointer; }

.sd-mood-option input,
.sd-theme-option input,
.sd-voice-option input { display: none; }

.sd-mood-btn,
.sd-theme-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  border-radius: var(--sd-radius-pill);
  font-size: 0.85rem;
  font-weight: 600;
  border: 1.5px solid var(--sd-border-strong);
  color: var(--sd-text-soft);
  transition: background var(--sd-transition), border-color var(--sd-transition),
              color var(--sd-transition), box-shadow var(--sd-transition);
}

.sd-voice-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.75rem 0.5rem;
  border-radius: var(--sd-radius-lg);
  font-size: 0.85rem;
  font-weight: 600;
  border: 1.5px solid var(--sd-border-strong);
  color: var(--sd-text-soft);
  text-align: center;
  transition: background var(--sd-transition), border-color var(--sd-transition),
              color var(--sd-transition), box-shadow var(--sd-transition);
}

.sd-voice-btn i { font-size: 1.1rem; }
.sd-voice-btn strong { font-size: 0.85rem; line-height: 1.2; }

.sd-voice-btn small {
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--sd-text-muted);
  line-height: 1.2;
}

.sd-mood-option input:checked ~ .sd-mood-btn,
.sd-theme-option input:checked ~ .sd-theme-btn,
.sd-voice-option input:checked ~ .sd-voice-btn {
  background: var(--sd-accent);
  border-color: var(--sd-accent);
  color: #fff;
  box-shadow: 0 0 0 2px rgb(167 139 250 / 35%), 0 2px 8px rgb(167 139 250 / 25%);
}

.sd-voice-option input:checked ~ .sd-voice-btn small { color: rgb(255 255 255 / 70%); }

/* Maintain white text when hovering an already-selected option */
.sd-mood-option input:checked ~ .sd-mood-btn:hover,
.sd-theme-option input:checked ~ .sd-theme-btn:hover,
.sd-voice-option input:checked ~ .sd-voice-btn:hover { color: #fff; }

.sd-mood-btn:hover,
.sd-theme-btn:hover,
.sd-voice-btn:hover { border-color: var(--sd-accent); color: var(--sd-accent); }

.sd-mood-option:active .sd-mood-btn,
.sd-theme-option:active .sd-theme-btn,
.sd-voice-option:active .sd-voice-btn { transform: scale(0.96); }

/* ── Empty state ────────────────────────────────────────────── */
.sd-empty-state {
  text-align: center;
  padding: var(--sd-space-3xl) var(--sd-space-xl);
  color: var(--sd-text-muted);
}
.sd-empty-state i { font-size: 2.5rem; margin-bottom: var(--sd-space-md); display: block; opacity: 0.5; }
.sd-empty-state h2 { font-size: 1.1rem; margin: 0 0 0.5rem; color: var(--sd-text-soft); }
.sd-empty-state p { margin: 0 0 var(--sd-space-lg); }

/* ── Page structure (app) ───────────────────────────────────── */
.sd-page {
  padding: var(--sd-space-xl);
  max-width: 1000px;
  margin-inline: auto;
}

.sd-page-narrow {
  max-width: 640px;
}

.sd-page-header {
  display: flex;
  align-items: center;
  gap: var(--sd-space-sm);
  justify-content: space-between;
  margin-bottom: var(--sd-space-lg);
  flex-wrap: wrap;
}
.sd-page-header-actions { display: flex; gap: var(--sd-space-sm); flex-wrap: wrap; }

.sd-page-title {
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0;
  color: var(--sd-text);
}

.sd-section { margin-bottom: var(--sd-space-2xl); }

.sd-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sd-space-md);
}

.sd-section-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 var(--sd-space-lg);
  color: var(--sd-text-soft);
}

.sd-section-header .sd-section-title { margin-bottom: 0; }

/* ── Public header ──────────────────────────────────────────── */
.sd-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--sd-bg-header);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--sd-border);

  /* Needed for mobile nav dropdown positioning */
  isolation: isolate;
}

/* Match the logo's deep indigo-to-navy gradient — fades to transparent on the right */
.sd-public .sd-header {
  background: linear-gradient(
    to right,
    rgb(22 12 65 / 97%) 0%,
    rgb(15 10 45 / 93%) 40%,
    rgb(15 12 41 / 0%) 100%
  );
  border-bottom-color: transparent;
}

.sd-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.85rem;
}

.sd-header-right {
  display: flex;
  align-items: center;
  gap: var(--sd-space-lg);
}

/* Mobile nav burger — hidden on desktop */
.sd-nav-burger {
  display: none;
  background: none;
  border: none;
  color: var(--sd-text-soft);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0.4rem;
  line-height: 1;
}

.sd-brand {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.sd-brand-logo {
  height: 24px;
  width: auto;
}

/* Larger logo on the public landing page */
.sd-public .sd-brand-logo {
  height: 72px;
  width: auto;
}

@media (width <= 768px) {
  .sd-brand-logo { height: 20px; }
  .sd-public .sd-brand-logo { height: 48px; }
}

.sd-header-nav {
  display: flex;
  align-items: center;
  gap: var(--sd-space-lg);
}

.sd-nav-link {
  color: var(--sd-text-soft);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  transition: color var(--sd-transition);
}
.sd-nav-link:hover { color: var(--sd-accent); }

/* ── Public footer ──────────────────────────────────────────── */
.sd-footer {
  background: var(--sd-bg-soft);
  border-top: 1px solid var(--sd-border);
  padding: var(--sd-space-xl) 0;
}

.sd-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sd-space-md);
  flex-wrap: wrap;
}

.sd-footer-copy {
  color: var(--sd-text-muted);
  font-size: 0.85rem;
  margin: 0;
}

.sd-footer-legal {
  display: flex;
  gap: var(--sd-space-md);
  flex-wrap: wrap;
  justify-content: center;
}

.sd-footer-legal-link {
  color: var(--sd-text-muted);
  font-size: 0.8rem;
  text-decoration: none;
  transition: color 0.2s;
}

.sd-footer-legal-link:hover {
  color: var(--sd-accent);
}

/* ── Legal pages ────────────────────────────────────────────── */
.sd-legal-page {
  padding: var(--sd-space-3xl) 0;
  min-height: 60vh;
}

.sd-legal-content {
  max-width: 720px;
  margin: 0 auto;
  color: var(--sd-text);
  line-height: 1.75;
}

.sd-legal-content h1 {
  font-size: 1.75rem;
  font-weight: 800;
  margin-bottom: var(--sd-space-lg);
}

.sd-legal-content h2 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-top: var(--sd-space-xl);
  margin-bottom: var(--sd-space-sm);
}

.sd-legal-content p {
  margin-bottom: var(--sd-space-md);
  color: var(--sd-text-muted);
}

.sd-footer-social {
  display: flex;
  gap: var(--sd-space-md);
}

.sd-footer-social-link {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--sd-text-muted);
  font-size: 0.85rem;
  text-decoration: none;
  transition: color 0.2s;
}

.sd-footer-social-link:hover {
  color: var(--sd-accent);
}

/* ── Hero section ───────────────────────────────────────────── */
.sd-hero {
  background: var(--sd-grad-hero);
  padding: var(--sd-space-3xl) 0;
  min-height: 85vh;
  min-height: 85dvh;
  display: flex;
  align-items: center;
}

.sd-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sd-space-3xl);
  align-items: center;
}

.sd-hero-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 var(--sd-space-md);
}

.sd-hero-subtitle {
  font-size: 1.05rem;
  color: var(--sd-text-soft);
  margin: 0 0 var(--sd-space-xl);
  max-width: 480px;
}

.sd-hero-actions {
  display: flex;
  gap: var(--sd-space-md);
  flex-wrap: wrap;
}

/* Phone mockup */
.sd-hero-visual { display: flex; justify-content: center; }

.sd-phone-mockup {
  width: 260px;
  border-radius: 2.5rem;
  background: var(--sd-bg-card);
  border: 3px solid var(--sd-border-strong);
  box-shadow: var(--sd-shadow-glow);
  overflow: hidden;
  padding: 1.5rem 1rem;
}

.sd-phone-screen {
  background: var(--sd-bg-soft);
  border-radius: 1.5rem;
  padding: 1rem;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sd-mock-story {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.sd-mock-cover {
  width: 100%;
  height: 110px;
  border-radius: var(--sd-radius-lg);
  background: var(--sd-grad-cover);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.sd-mock-cover-icon {
  font-size: 2rem;
  color: rgb(255 255 255 / 35%);
  position: relative;
  z-index: 1;
}

.sd-mock-title {
  font-weight: 700;
  font-size: 0.9rem;
  margin: 0;
  text-align: center;
}

.sd-mock-subtitle {
  font-size: 0.72rem;
  color: var(--sd-text-muted);
  margin: -0.35rem 0 0;
  text-align: center;
}

.sd-mock-progress { width: 100%; display: flex; flex-direction: column; gap: 0.3rem; }

.sd-mock-progress-track {
  width: 100%;
  height: 5px;
  background: var(--sd-border-strong);
  border-radius: var(--sd-radius-pill);
  cursor: pointer;
  position: relative;
}

/* Extend tap area 10px above/below without collapsing the box model */
.sd-mock-progress-track::before {
  content: '';
  position: absolute;
  inset: -10px 0;
}

.sd-mock-progress-fill {
  width: 100%;
  height: 5px;
  background: var(--sd-grad-accent);
  border-radius: inherit;
  transform: scaleX(0.31);
  transform-origin: left center;
  transition: transform 0.1s linear;
}

.sd-mock-times {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: var(--sd-text-muted);
}

.sd-mock-controls { display: flex; justify-content: center; }

.sd-mock-play-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--sd-grad-accent);
  border: none;
  color: var(--sd-text);
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sd-shadow-glow);
  cursor: pointer;
  transition: transform var(--sd-transition);
}
.sd-mock-play-btn:hover { transform: scale(1.07); }
.sd-mock-play-btn:focus-visible { outline: 2px solid var(--sd-accent); outline-offset: 3px; }

/* ── Section styles (public) ────────────────────────────────── */
.sd-section-heading {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800;
  text-align: center;
  margin: 0 0 var(--sd-space-2xl);
  color: var(--sd-text);
}

.sd-section-dark {
  background: var(--sd-bg-soft);
  padding: var(--sd-space-3xl) 0;
  content-visibility: auto;
  contain-intrinsic-size: auto 380px;
}

/* Steps */
.sd-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sd-space-xl);
}
.sd-step { text-align: center; }

.sd-step-icon {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--sd-accent-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--sd-space-md);
  font-size: 1.5rem;
  color: var(--sd-accent);
}
.sd-step h3 { font-size: 1rem; font-weight: 700; margin: 0 0 0.4rem; color: var(--sd-text); }
.sd-step p { font-size: 0.9rem; color: var(--sd-text-muted); margin: 0; }

/* Highlights (replaces features grid) */
.sd-section-highlights { background: var(--sd-bg); padding: var(--sd-space-3xl) 0; content-visibility: auto; contain-intrinsic-size: auto 420px; }

.sd-highlights {
  display: flex;
  flex-direction: column;
  gap: var(--sd-space-lg);
  max-width: 620px;
  margin: 0 auto;
}

.sd-highlight {
  display: flex;
  align-items: flex-start;
  gap: var(--sd-space-lg);
  background: var(--sd-bg-card);
  border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius-xl);
  padding: var(--sd-space-lg);
}

.sd-highlight-icon {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: var(--sd-radius-lg);
  background: var(--sd-accent-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--sd-accent);
}

.sd-highlight-text { flex: 1; }
.sd-highlight-text h3 { font-size: 1rem; font-weight: 700; margin: 0 0 0.35rem; color: var(--sd-text); }
.sd-highlight-text p { font-size: 0.9rem; color: var(--sd-text-muted); margin: 0; line-height: 1.6; }

/* Trust quotes */
.sd-section-trust { background: var(--sd-bg-soft); padding: var(--sd-space-3xl) 0; content-visibility: auto; contain-intrinsic-size: auto 260px; }

.sd-trust-quotes {
  display: flex;
  gap: var(--sd-space-xl);
  flex-wrap: wrap;
  justify-content: center;
  max-width: 720px;
  margin: 0 auto;
}

.sd-trust-quote {
  flex: 1;
  min-width: 260px;
  margin: 0;
  padding: var(--sd-space-lg);
  border-left: 3px solid var(--sd-accent-muted);
}

.sd-trust-quote p {
  color: var(--sd-text-soft);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.65;
  margin: 0 0 var(--sd-space-sm);
}

.sd-trust-quote cite {
  color: var(--sd-text-muted);
  font-size: 0.8rem;
  font-style: normal;
}

/* Accent text utility */
.sd-accent-text { color: var(--sd-accent); }

/* CTA */
.sd-cta-section {
  background: var(--sd-bg);
  border-top: 1px solid var(--sd-border);
  padding: var(--sd-space-3xl) 0;
  text-align: center;
  content-visibility: auto;
  contain-intrinsic-size: auto 240px;
}

.sd-cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sd-space-md);
}
.sd-cta-inner h2 { font-size: clamp(1.4rem, 4vw, 1.8rem); font-weight: 800; margin: 0; }
.sd-cta-inner p { color: var(--sd-text-soft); margin: 0; }

/* ── Delight — Landing page animations ─────────────────────── */

/* Keyframes */
@keyframes sd-float {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-10px); }
}

@keyframes sd-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes sd-twinkle {
  0%, 100% { opacity: 0.08; }
  50%       { opacity: 0.18; }
}

@keyframes sd-moon-breathe {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50%       { opacity: 0.55; transform: scale(1.08); }
}

@keyframes sd-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes sd-glow-pulse {
  0%, 100% { box-shadow: var(--sd-shadow-glow); }
  50%       { box-shadow: 0 0 48px rgb(167 139 250 / 45%); }
}

/* Hero entrance — text left, phone right, staggered */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  .sd-hero-text {
    animation: sd-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .sd-hero-visual {
    animation: sd-fade-up 0.7s 0.18s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  /* Floating phone */
  .sd-phone-mockup {
    animation: sd-float 4s ease-in-out infinite alternate;
  }

  /* Twinkling stars in the mockup cover */
  .sd-stars {
    animation: sd-twinkle 6s ease-in-out infinite;
  }

  /* Moon icon breathes */
  .sd-mock-cover-icon {
    animation: sd-moon-breathe 5s ease-in-out infinite;
  }

  /* Scroll-reveal utility — applied by JS */
  .sd-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .sd-reveal.sd-reveal--in {
    opacity: 1;
    transform: translateY(0);
  }

  /* Stagger children of a reveal container */
  .sd-reveal-group > * {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .sd-reveal-group.sd-reveal--in > *:nth-child(1) { transition-delay: 0s;    opacity: 1; transform: none; }
  .sd-reveal-group.sd-reveal--in > *:nth-child(2) { transition-delay: 0.1s;  opacity: 1; transform: none; }
  .sd-reveal-group.sd-reveal--in > *:nth-child(3) { transition-delay: 0.2s;  opacity: 1; transform: none; }
  .sd-reveal-group.sd-reveal--in > *:nth-child(4) { transition-delay: 0.3s;  opacity: 1; transform: none; }
  .sd-reveal-group.sd-reveal--in > *:nth-child(5) { transition-delay: 0.4s;  opacity: 1; transform: none; }
  .sd-reveal-group.sd-reveal--in > *:nth-child(6) { transition-delay: 0.5s;  opacity: 1; transform: none; }

  /* Step icon hover glow */
  .sd-step-icon {
    transition: box-shadow 0.3s ease, transform 0.3s ease;
  }

  .sd-step:hover .sd-step-icon {
    box-shadow: 0 0 0 6px var(--sd-accent-muted), 0 0 20px var(--sd-accent-muted);
    transform: scale(1.07);
  }

  /* Highlight card hover lift */
  .sd-highlight {
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.25s ease,
                box-shadow 0.25s ease;
  }

  .sd-highlight:hover {
    transform: translateY(-3px);
    border-color: var(--sd-border-strong);
    box-shadow: 0 8px 32px rgb(0 0 0 / 25%);
  }

  /* Primary CTA button — slow shimmer sweep */
  .sd-btn-primary {
    background-size: 200% auto;
    background-image: linear-gradient(
      105deg,
      var(--sd-accent-dark) 0%,
      var(--sd-accent) 45%,
      #c4b5fd 55%,
      var(--sd-accent) 65%,
      var(--sd-accent-dark) 100%
    );
    animation: sd-shimmer 4s linear infinite;
  }

  /* Glow pulse on the hero CTA only (the most important button) */
  .sd-hero-actions .sd-btn-primary {
    animation: sd-shimmer 4s linear infinite, sd-glow-pulse 3s ease-in-out infinite;
  }

  /* Ghost button subtle lift */
  .sd-btn-ghost:hover {
    transform: translateY(-1px);
  }

  /* Burger icon rotates when nav is open */
  .sd-nav-burger i {
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    display: inline-block;
  }

  .sd-nav-burger[aria-expanded="true"] i {
    transform: rotate(90deg);
  }
}

/* Mobile nav slide-down — only animate when motion is OK */
@media (prefers-reduced-motion: no-preference) and (width <= 768px) {
  .sd-header-nav {
    transition: opacity 0.2s ease,
                transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0s linear 0.25s;
  }

  .sd-header-nav--open {
    transition: opacity 0.25s ease,
                transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0s linear 0s;
  }
}

/* Play button press feedback */
.sd-mock-play-btn:active { transform: scale(0.92); }

/* Reduced-motion fallback — instant reveal */
@media (prefers-reduced-motion: reduce) {
  .sd-reveal, .sd-reveal-group > * { opacity: 1; transform: none; }
}

/* ── Delight — App dashboard ─────────────────────────────── */

/* Keyframes unique to the app surface */
@keyframes sd-twinkle-star {
  0%, 100% { opacity: 1;    transform: scale(1); }
  50%       { opacity: 0.45; transform: scale(0.82); }
}

@keyframes sd-check-pop {
  from { opacity: 0; transform: scale(0.25) rotate(-15deg); }
  to   { opacity: 1; transform: scale(1)    rotate(0deg); }
}

@keyframes sd-sparkle {
  0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
  50%       { opacity: 1; transform: scale(1) rotate(45deg); }
}

@keyframes sd-heartbeat {
  0%, 100% { transform: scale(1);    opacity: 0.35; }
  30%       { transform: scale(1.4); opacity: 0.7; }
  50%       { transform: scale(1.1); opacity: 0.5; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Sections float in on load — staggered so the page settles gently */
  .sd-page > .sd-welcome-banner {
    animation: sd-fade-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .sd-page > .sd-section:nth-of-type(1) {
    animation: sd-fade-up 0.5s 0.10s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .sd-page > .sd-section:nth-of-type(2) {
    animation: sd-fade-up 0.5s 0.18s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .sd-page > .sd-section:nth-of-type(3) {
    animation: sd-fade-up 0.5s 0.26s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .sd-page > .sd-empty-state {
    animation: sd-fade-up 0.5s 0.10s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  /* Onboarding icon (moon) floats and breathes — the first screen feels enchanted */
  .sd-onboarding-moon-icon {
    display: block;
    animation: sd-float 4.5s ease-in-out infinite alternate, sd-moon-breathe 7s ease-in-out infinite;
  }

  /* Starfield background dots twinkle with staggered delays */
  .sd-star:nth-child(1) { animation: sd-twinkle 4s 0.0s ease-in-out infinite; }
  .sd-star:nth-child(2) { animation: sd-twinkle 6s 0.7s ease-in-out infinite; }
  .sd-star:nth-child(3) { animation: sd-twinkle 5s 1.4s ease-in-out infinite; }
  .sd-star:nth-child(4) { animation: sd-twinkle 7s 0.3s ease-in-out infinite; }
  .sd-star:nth-child(5) { animation: sd-twinkle 3s 1.9s ease-in-out infinite; }
  .sd-star:nth-child(6) { animation: sd-twinkle 5s 0.9s ease-in-out infinite; }
  .sd-star:nth-child(7) { animation: sd-twinkle 6s 2.1s ease-in-out infinite; }
  .sd-star:nth-child(8) { animation: sd-twinkle 4s 1.2s ease-in-out infinite; }

  /* Sparkles float in and out with staggered timing */
  .sd-sparkle:nth-child(1) { animation: sd-sparkle 3.5s 0.0s ease-in-out infinite; }
  .sd-sparkle:nth-child(2) { animation: sd-sparkle 4.5s 1.2s ease-in-out infinite; }
  .sd-sparkle:nth-child(3) { animation: sd-sparkle 3.0s 0.8s ease-in-out infinite; }
  .sd-sparkle:nth-child(4) { animation: sd-sparkle 5.0s 2.0s ease-in-out infinite; }

  /* Gold stars twinkle with staggered delays */
  .sd-star-deco:nth-child(1) { animation: sd-twinkle-star 1.6s 0.0s ease-in-out infinite; }
  .sd-star-deco:nth-child(2) { animation: sd-twinkle-star 2.0s 0.5s ease-in-out infinite; }
  .sd-star-deco:nth-child(3) { animation: sd-twinkle-star 1.8s 0.9s ease-in-out infinite; }

  /* Hearts pulse with staggered heartbeat rhythm */
  .sd-heart-deco:nth-child(1) { animation: sd-heartbeat 2.4s 0.0s ease-in-out infinite; }
  .sd-heart-deco:nth-child(2) { animation: sd-heartbeat 2.8s 0.5s ease-in-out infinite; }
  .sd-heart-deco:nth-child(3) { animation: sd-heartbeat 2.2s 1.1s ease-in-out infinite; }
  .sd-heart-deco:nth-child(4) { animation: sd-heartbeat 3.0s 0.3s ease-in-out infinite; }
  .sd-heart-deco:nth-child(5) { animation: sd-heartbeat 2.6s 1.6s ease-in-out infinite; }
  .sd-heart-deco:nth-child(6) { animation: sd-heartbeat 2.4s 0.8s ease-in-out infinite; }
  .sd-heart-deco:nth-child(7) { animation: sd-heartbeat 2.9s 1.3s ease-in-out infinite; }
  .sd-heart-deco:nth-child(8) { animation: sd-heartbeat 2.3s 2.0s ease-in-out infinite; }

  /* CTA button inside onboarding shimmers like the hero button */
  .sd-onboarding-hero .sd-btn-primary {
    animation: sd-shimmer 4s linear infinite, sd-glow-pulse 3s ease-in-out infinite;
  }

  /* Greeting moon in the welcome banner drifts slowly */
  .sd-welcome-text h1 i {
    display: inline-block;
    animation: sd-float 6s ease-in-out infinite alternate;
  }

  /* Empty-state icon floats — a quiet invitation to begin */
  .sd-empty-state i {
    animation: sd-float 5s ease-in-out infinite alternate;
  }

  /* Story placeholder cover — moon breathes in the dark while waiting for a cover image */
  .sd-story-cover-placeholder i {
    animation: sd-moon-breathe 7s ease-in-out infinite;
  }

  /* Credit badge star in the topbar — twinkles like a real star */
  .sd-credit-badge i {
    display: inline-block;
    animation: sd-twinkle-star 3.5s ease-in-out infinite;
  }

  /* Onboarding done-step checkmark — warm gold pop when the step completes */
  .sd-progress-dot--done i {
    animation: sd-check-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }

  /* Profile card hover — violet glow elevates the selected child's card */
  .sd-profile-card {
    transition: border-color var(--sd-transition), transform var(--sd-transition),
                box-shadow var(--sd-transition);
  }

  .sd-profile-card:hover {
    box-shadow: 0 8px 28px rgb(167 139 250 / 28%);
  }

  /* Avatar gets a soft violet ring when the card is hovered */
  .sd-profile-card:hover .sd-profile-avatar {
    box-shadow: 0 0 0 3px var(--sd-accent-muted), 0 0 18px rgb(167 139 250 / 35%);
    transition: box-shadow 0.25s ease;
  }

  /* Story card hover — matching dreamy glow */
  .sd-story-card {
    transition: border-color var(--sd-transition), transform var(--sd-transition),
                box-shadow var(--sd-transition);
  }

  .sd-story-card:hover {
    box-shadow: 0 8px 28px rgb(167 139 250 / 22%);
  }
}

/* ── Pricing ────────────────────────────────────────────────── */
.sd-pricing-page { padding: var(--sd-space-3xl) 0; }
.sd-pricing-header { text-align: center; margin-bottom: var(--sd-space-2xl); }

.sd-pricing-footer {
  text-align: center;
  color: var(--sd-text-muted);
  font-size: 0.85rem;
  margin-top: var(--sd-space-xl);
}

.sd-plans-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sd-space-xl);
  max-width: 760px;
  margin-inline: auto;
}

.sd-plan-card {
  background: var(--sd-bg-card);
  border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius-xl);
  padding: var(--sd-space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--sd-space-md);
  position: relative;
}

.sd-plan-card h2,
.sd-plan-card h3 { font-size: 1.1rem; font-weight: 800; margin: 0; color: var(--sd-text); }

.sd-plan-cta { margin-top: auto; }

.sd-plan-card-featured {
  border-color: var(--sd-accent);
  background: linear-gradient(145deg, #1e1b4b, #2a1f5e);
  box-shadow: 0 0 0 2px var(--sd-accent), var(--sd-shadow-glow);
  z-index: 0;
}

.sd-plan-card-featured > *:not(.sd-onboarding-stars, .sd-onboarding-dots, .sd-plan-badge-top) {
  position: relative;
  z-index: 1;
}

.sd-plan-badge-top {
  position: absolute;
  top: -1px;
  right: var(--sd-space-lg);
  background: var(--sd-grad-accent);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.25rem 0.65rem;
  border-radius: 0 0 var(--sd-radius-md) var(--sd-radius-md);
}

.sd-plan-pricing { display: flex; flex-direction: column; gap: 0.15rem; }

.sd-plan-price {
  font-size: 1.8rem;
  font-weight: 800;
  margin: 0;
  color: var(--sd-text);
}
.sd-plan-period { font-size: 1rem; color: var(--sd-text-muted); font-weight: 400; }
.sd-plan-price-yearly { font-size: 0.82rem; color: var(--sd-text-muted); margin: 0; }
.sd-savings { color: #4ade80; font-weight: 700; }

.sd-plan-actions { display: flex; flex-direction: column; gap: var(--sd-space-sm); margin-top: auto; }
.sd-plan-actions form { display: flex; }
.sd-plan-actions form .sd-btn { flex: 1; }

/* ── App layout ─────────────────────────────────────────────── */
.sd-app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Topbar */
.sd-app-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--sd-topbar-height);
  background: var(--sd-bg-card);
  border-bottom: 1px solid var(--sd-border);
  z-index: 200;
}

.sd-app-topbar-inner {
  height: 100%;
  padding-inline: var(--sd-space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sd-app-topbar-actions { display: flex; align-items: center; gap: var(--sd-space-sm); }

/* Credit badge */
.sd-credit-badge {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--sd-gold);
  background: var(--sd-gold-muted);
  padding: 0.25rem 0.65rem;
  border-radius: var(--sd-radius-pill);
}
.sd-credit-renewal {
  width: 100%;
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--sd-text-muted);
  line-height: 1;
  margin-top: -0.1rem;
}

/* App layout body */
.sd-app-layout {
  display: flex;
  margin-top: var(--sd-topbar-height);
  min-height: calc(100vh - var(--sd-topbar-height));
}

/* Sidebar (desktop) */
.sd-sidebar {
  width: var(--sd-sidebar-width);
  flex-shrink: 0;
  background: var(--sd-bg-soft);
  border-right: 1px solid var(--sd-border);
  padding: var(--sd-space-lg) 0;
  position: sticky;
  top: var(--sd-topbar-height);
  height: calc(100vh - var(--sd-topbar-height));
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.sd-sidebar-nav { display: flex; flex-direction: column; gap: 0.25rem; padding: 0 var(--sd-space-sm); }

.sd-sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem var(--sd-space-md);
  border-radius: var(--sd-radius-md);
  color: var(--sd-text-soft);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  width: 100%;
  transition: background var(--sd-transition), color var(--sd-transition);
}
.sd-sidebar-link:hover { background: var(--sd-accent-muted); color: var(--sd-accent); }
.sd-sidebar-link.active { background: var(--sd-accent-muted); color: var(--sd-accent); }
.sd-sidebar-link--muted { color: var(--sd-text-muted); }
.sd-sidebar-footer { padding: var(--sd-space-md) var(--sd-space-sm); }
.sd-sidebar-user { font-size: 0.8rem; color: var(--sd-text-muted); padding: 0 var(--sd-space-md); margin-bottom: 0.4rem; display: block; }

/* Main content */
.sd-app-main {
  flex: 1;
  overflow-y: auto;
  padding-bottom: var(--sd-bottom-nav-h);
}

/* Bottom nav (mobile) */
.sd-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--sd-bottom-nav-h);
  background: var(--sd-bg-card);
  border-top: 1px solid var(--sd-border);
  z-index: 200;
}

.sd-bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  flex: 1;
  color: var(--sd-text-muted);
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 600;
  transition: color var(--sd-transition);
}
.sd-bottom-nav-item i { font-size: 1.15rem; }

.sd-bottom-nav-item.active,
.sd-bottom-nav-item:hover { color: var(--sd-accent); }

/* ── Dashboard welcome ─────────────────────────────────────── */
.sd-welcome-banner {
  background: linear-gradient(135deg, var(--sd-bg-card), #2d1a5e);
  border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius-xl);
  padding: var(--sd-space-xl);
  margin-bottom: var(--sd-space-2xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sd-space-md);
  flex-wrap: wrap;
  position: relative;
}
.sd-welcome-text h1 { font-size: 1.4rem; font-weight: 800; margin: 0 0 0.3rem; word-break: break-word; }
.sd-welcome-text p { color: var(--sd-text-soft); margin: 0; font-size: 0.9rem; }

/* ── Onboarding hero ─────────────────────────────────────────── */
.sd-onboarding-hero {
  background: linear-gradient(150deg, var(--sd-bg) 0%, #1a1154 40%, #2d1a5e 70%, var(--sd-bg-card) 100%);
  border: 1px solid var(--sd-accent-muted);
  border-radius: var(--sd-radius-xl);
  padding: var(--sd-space-3xl) var(--sd-space-xl);
  margin-bottom: var(--sd-space-xl);
  text-align: center;
  position: relative;
  overflow: hidden;
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Starfield background layer */
.sd-onboarding-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}

.sd-onboarding-star-dot {
  position: absolute;
  border-radius: 50%;
  background: var(--sd-text);
}

/* Sparkle layer */
.sd-onboarding-sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}

.sd-sparkle {
  position: absolute;
  background: var(--sd-gold);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  opacity: 0;
}

/* Main content area */
.sd-onboarding-content {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Moon icon */
.sd-onboarding-moon-wrap {
  margin-bottom: var(--sd-space-md);
}

.sd-onboarding-moon-icon {
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  color: var(--sd-gold);
  filter: drop-shadow(0 0 20px rgb(251 191 36 / 40%));
}

.sd-onboarding-hero h1 {
  font-size: clamp(1.6rem, 4vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 var(--sd-space-xs);
  color: var(--sd-text);
}

.sd-onboarding-subtitle {
  color: var(--sd-text-soft);
  margin: 0 0 var(--sd-space-lg);
  font-size: clamp(0.95rem, 2.5vw, 1.05rem);
  max-width: 420px;
  line-height: 1.6;
}

/* Name form — stacked vertically, centered */
.sd-onboarding-name-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sd-space-sm);
  width: 100%;
  max-width: 320px;
  margin: 0 auto var(--sd-space-lg);
}

.sd-onboarding-name-form .sd-input {
  width: 100%;
  text-align: center;
  font-size: 1.05rem;
  border-radius: var(--sd-radius-pill);
  background: rgb(15 12 41 / 60%);
  border: 1.5px solid var(--sd-border-strong);
  padding: 0.75rem 1.2rem;
}

.sd-onboarding-name-form .sd-input:focus {
  border-color: var(--sd-accent);
  outline: none;
  box-shadow: 0 0 0 4px var(--sd-accent-muted), 0 0 20px rgb(167 139 250 / 20%);
}

/* CTA button inside the hero — larger, with room below */
.sd-onboarding-hero .sd-btn-primary {
  padding: 0.85rem 2rem;
  font-size: 1.05rem;
  margin-bottom: var(--sd-space-lg);
}

/* Progress stepper with connected track */
.sd-onboarding-progress {
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
  padding-top: var(--sd-space-lg);
  border-top: 1px solid var(--sd-border);
}

.sd-progress-track {
  position: relative;
  height: 2px;
  background: var(--sd-border);
  border-radius: 1px;
  margin: 0 14px;
}

.sd-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--sd-grad-accent);
  border-radius: 1px;
  width: 0%;
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.sd-progress--step-2 .sd-progress-fill { width: 100%; }

.sd-progress-dots {
  list-style: none;
  padding: 0;
  margin: -14px 0 0;
  display: flex;
  justify-content: space-between;
}

.sd-progress-dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sd-space-xs);
}

.sd-progress-dot-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--sd-border);
  background: var(--sd-bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  color: var(--sd-text-muted);
}

.sd-progress-dot-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--sd-text-muted);
}

.sd-progress-dot--active .sd-progress-dot-circle {
  border-color: var(--sd-accent);
  background: var(--sd-accent-muted);
  color: var(--sd-accent);
  box-shadow: 0 0 12px rgb(167 139 250 / 40%);
}

.sd-progress-dot--active .sd-progress-dot-label { color: var(--sd-accent); }

.sd-progress-dot--done .sd-progress-dot-circle {
  border-color: var(--sd-gold);
  background: var(--sd-gold-muted);
  color: var(--sd-gold);
}

.sd-progress-dot--done .sd-progress-dot-label { color: var(--sd-gold); }

/* Skip link — quiet, unobtrusive */
.sd-onboarding-skip {
  display: inline-block;
  margin-top: var(--sd-space-xl);
  font-size: 0.8rem;
  color: var(--sd-text-muted);
  opacity: 0.6;
  text-decoration: none;
}

.sd-onboarding-skip:hover {
  opacity: 0.85;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sd-field-hint--onboarding {
  color: var(--sd-accent);
  font-size: 0.82rem;
  font-style: italic;
  margin-top: var(--sd-space-xs);
}

.sd-field-hint--onboarding-interests {
  margin-bottom: var(--sd-space-sm);
}

@media (width <= 480px) {
  .sd-onboarding-hero {
    padding: var(--sd-space-xl) var(--sd-space-md);
    min-height: 320px;
  }
  .sd-onboarding-moon-icon { font-size: 2.5rem; }
  .sd-progress-dot-circle { width: 24px; height: 24px; font-size: 0.65rem; }
  .sd-progress-dots { margin-top: -12px; }
}

/* ── Profiles index header ──────────────────────────────────── */
.sd-profiles-header {
  display: flex;
  align-items: center;
  gap: var(--sd-space-md);
}

.sd-profiles-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--sd-radius-lg);
  background: var(--sd-accent-muted);
  border: 1px solid var(--sd-border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--sd-accent);
  flex-shrink: 0;
}

/* ── Profile form header ────────────────────────────────────── */
.sd-profile-form-header {
  display: flex;
  align-items: center;
  gap: var(--sd-space-md);
  margin-bottom: var(--sd-space-xl);
}

.sd-profile-form-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--sd-radius-lg);
  background: var(--sd-accent-muted);
  border: 1px solid var(--sd-border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--sd-accent);
  flex-shrink: 0;
  overflow: hidden;
}

.sd-profile-form-subtitle {
  font-size: 0.875rem;
  color: var(--sd-text-muted);
  margin: 0.2rem 0 0;
}

/* ── Profile form sections ──────────────────────────────────── */
.sd-form-section {
  margin-bottom: var(--sd-space-lg);
}

/* Strip trailing margin so it doesn't stack with card padding */
.sd-form-section > .sd-field:last-child { margin-bottom: 0; }

.sd-form-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--sd-text);
  margin: 0 0 var(--sd-space-lg);
  padding-bottom: var(--sd-space-sm);
  border-bottom: 1px solid var(--sd-border);
}

.sd-form-section-title i {
  color: var(--sd-accent);
  font-size: 1.1em;
}

/* ── Two-column field row ────────────────────────────────────── */
.sd-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sd-space-md);
  margin-bottom: var(--sd-space-lg);
}

/* Zero out child mb — the row itself owns the vertical rhythm */
.sd-field-row > .sd-field { margin-bottom: 0; }

/* Last row before card edge — no trailing margin */
.sd-field-row:last-child,
.sd-field-row:last-of-type { margin-bottom: 0; }

@media (width <= 480px) {
  /* Stack columns but restore field spacing between stacked items */
  .sd-field-row { grid-template-columns: 1fr; }
  .sd-field-row > .sd-field { margin-bottom: var(--sd-space-md); }
  .sd-field-row > .sd-field:last-child { margin-bottom: 0; }
}

/* ── Tag picker label row ────────────────────────────────────── */
.sd-tag-picker-label-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.sd-tag-picker-label-row .sd-label { margin-bottom: 0; }

/* ── Tag count badge ─────────────────────────────────────────── */
.sd-tag-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 0.35rem;
  border-radius: var(--sd-radius-pill);
  background: var(--sd-accent);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

/* ── Tag selection micro-animation ──────────────────────────── */

/* Use @keyframes (not transition) — innerHTML replacement creates fresh elements,
   so transitions can't detect a state change. Animations fire on class addition. */
@keyframes sd-tag-pop {
  0%   { transform: scale(1); }
  55%  { transform: scale(1.12); }
  100% { transform: scale(1.06); }
}

@media (prefers-reduced-motion: no-preference) {
  .sd-tag.selected {
    animation: sd-tag-pop 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  }
  .sd-tag:active { transform: scale(0.94); }
}

/* ── Custom tag hint ─────────────────────────────────────────── */
.sd-tag-custom-hint {
  font-size: 0.8rem;
  color: var(--sd-text-muted);
  margin-top: 0.3rem;
  font-style: italic;
}

/* ── Profile form actions ────────────────────────────────────── */
.sd-form-actions--profile {
  border-top: 1px solid var(--sd-border);
  padding-top: var(--sd-space-lg);
  margin-top: var(--sd-space-xs);
  align-items: center;
}

@media (width <= 480px) {
  .sd-form-actions--profile { flex-direction: column; }
  .sd-form-actions--profile .sd-btn { width: 100%; justify-content: center; }
}

/* ── Form section entrance animations ───────────────────────── */

/* Use adjacent sibling selector — reliable regardless of error alert presence */
@media (prefers-reduced-motion: no-preference) {
  .sd-form-section {
    animation: sd-fade-up 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .sd-form-section + .sd-form-section {
    animation-delay: 0.1s;
  }
}

/* ── Profile components ─────────────────────────────────────── */
.sd-profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--sd-space-md);
}

/* Manage-mode grid — larger minimum so cards have room to breathe */
.sd-profile-grid--manage {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sd-space-lg);
}

.sd-profile-card {
  background: var(--sd-bg-card);
  border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius-xl);
  padding: var(--sd-space-lg);
  position: relative;
  overflow: hidden;
  text-align: center;
  text-decoration: none;
  color: var(--sd-text);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  transition: border-color var(--sd-transition), transform var(--sd-transition);
}
.sd-profile-card:hover { border-color: var(--sd-accent); transform: translateY(-2px); }

.sd-profile-card > *:not(.sd-onboarding-dots) {
  position: relative;
  z-index: 1;
}

/* Manage cards — more padding, structured gap, no interactive hover */
.sd-profile-card--manage {
  cursor: default;
  padding: var(--sd-space-xl);
  gap: var(--sd-space-sm);
  position: relative;
  z-index: 0;
}

.sd-profile-card--manage > *:not(.sd-onboarding-stars, .sd-onboarding-hearts, .sd-onboarding-dots) {
  position: relative;
  z-index: 1;
}

.sd-profile-card--manage:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--sd-border);
}

.sd-profile-card--manage:hover .sd-profile-avatar {
  box-shadow: none;
}

/* Larger name in manage context */
.sd-profile-card--manage .sd-profile-name {
  font-size: 1.15rem;
}

/* Identity block: name + age stacked center-aligned */
.sd-profile-identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  width: 100%;
}

/* Stacked full-width actions with a separator */
.sd-profile-actions--stacked {
  flex-direction: column;
  width: 100%;
  margin-top: auto;
  padding-top: var(--sd-space-md);
  border-top: 1px solid var(--sd-border);
  gap: var(--sd-space-xs);
}

/* "+N more" interests overflow pill */
.sd-tag-more {
  background: var(--sd-bg-soft);
  color: var(--sd-text-muted);
  border: 1px solid var(--sd-border-strong);
}

.sd-profile-avatar {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--sd-grad-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  overflow: hidden;
}
.sd-profile-avatar-lg { width: 80px; height: 80px; font-size: 2rem; }
.sd-profile-avatar-sm { width: 40px; height: 40px; font-size: 1rem; }
.sd-profile-img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sd-profile-name { font-weight: 700; font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.sd-profile-age { font-size: 0.8rem; color: var(--sd-text-muted); }
.sd-profile-interests { margin-top: 0.4rem; }

.sd-profile-actions {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.sd-profile-hero {
  display: flex;
  align-items: center;
  gap: var(--sd-space-md);
}

.sd-profile-mini {
  display: flex;
  align-items: center;
  gap: var(--sd-space-sm);
}

.sd-profile-mini .sd-page-title { font-size: 1.25rem; }
.sd-profile-mini p { margin: 0; }

/* ── Story grid + cards ──────────────────────────────────────── */

/* ── Library page header ─────────────────────────────────────── */
.sd-library-header {
  display: flex;
  align-items: center;
  gap: var(--sd-space-md);
  margin-bottom: var(--sd-space-xl);
}

.sd-library-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--sd-radius-lg);
  background: var(--sd-accent-muted);
  border: 1px solid var(--sd-border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--sd-accent);
  flex-shrink: 0;
}

/* ── Profile filter chips ────────────────────────────────────── */
.sd-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem 0.3rem 0.35rem;
  border-radius: var(--sd-radius-pill);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--sd-text-soft);
  text-decoration: none;
  border: 1.5px solid var(--sd-border-strong);
  background: transparent;
  transition: background var(--sd-transition), border-color var(--sd-transition),
              color var(--sd-transition);
  white-space: nowrap;
}

.sd-filter-chip:hover,
.sd-filter-chip.active {
  background: var(--sd-accent-muted);
  border-color: var(--sd-accent);
  color: var(--sd-accent);
}

.sd-filter-chip-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--sd-bg-soft);
  border: 1px solid var(--sd-border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  color: var(--sd-text-muted);
  flex-shrink: 0;
  overflow: hidden;
  transition: background var(--sd-transition), border-color var(--sd-transition),
              color var(--sd-transition);
}

.sd-filter-chip.active .sd-filter-chip-avatar {
  background: var(--sd-accent);
  border-color: var(--sd-accent);
  color: #fff;
}

.sd-filter-chip-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Story grid + cards ──────────────────────────────────────── */
.sd-story-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sd-space-lg);
}

.sd-story-card {
  background: var(--sd-bg-card);
  border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--sd-transition), transform var(--sd-transition);
}
.sd-story-card:hover { border-color: var(--sd-accent); transform: translateY(-2px); }

/* Favorited stories get a warm gold border */
.sd-story-card--favorite { border-color: rgb(251 191 36 / 35%); }
.sd-story-card--favorite:hover { border-color: rgb(251 191 36 / 65%); }

.sd-story-cover {
  position: relative;
  width: 100%;
  height: 180px;
  overflow: hidden;
}
.sd-story-cover-img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sd-story-cover-placeholder {
  background: var(--sd-grad-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: rgb(255 255 255 / 40%);
}

/* Gradient overlay at cover bottom — profile pill + favorite star */
.sd-story-cover-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(0 0 0 / 65%) 0%, transparent 55%);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.4rem;
  padding: var(--sd-space-xs) var(--sd-space-sm);
}

/* Frosted glass pill — profile name */
.sd-story-cover-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: rgb(255 255 255 / 92%);
  background: rgb(0 0 0 / 30%);
  backdrop-filter: blur(6px);
  padding: 0.18rem 0.55rem;
  border-radius: var(--sd-radius-pill);
  max-width: 72%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sd-story-cover-pill i { font-size: 0.65rem; opacity: 0.85; }

/* Gold star badge — shown on favorited stories */
.sd-story-cover-star {
  color: var(--sd-gold);
  font-size: 0.9rem;
  filter: drop-shadow(0 1px 4px rgb(0 0 0 / 50%));
  flex-shrink: 0;
  line-height: 1;
}

.sd-story-body {
  padding: var(--sd-space-md);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sd-space-xs);
  min-width: 0;
}

.sd-story-title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}

.sd-story-date {
  font-size: 0.75rem;
  color: var(--sd-text-muted);
  margin: 0;
}

/* kept for story show page compatibility */
.sd-story-meta { font-size: 0.78rem; color: var(--sd-text-muted); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-story-summary { font-size: 0.82rem; color: var(--sd-text-soft); margin: 0; flex: 1; overflow-wrap: break-word; }

.sd-story-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sd-space-xs);
  margin-top: auto;
  padding-top: var(--sd-space-sm);
}

/* Story show */
.sd-story-hero-cover {
  width: 100%;
  height: 220px;
  border-radius: var(--sd-radius-xl);
  overflow: hidden;
  margin-bottom: var(--sd-space-lg);
}
.sd-story-header { margin-bottom: var(--sd-space-lg); }

.sd-story-heading-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sd-space-sm);
  margin-bottom: 0.4rem;
}
.sd-story-heading { font-size: 1.6rem; font-weight: 800; margin: 0; flex: 1; }

/* 3-dot menu */
.sd-story-menu-wrap { position: relative; flex-shrink: 0; padding-top: 0.3rem; }

.sd-story-menu-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: none;
  border: none;
  border-radius: 50%;
  color: var(--sd-text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.sd-story-menu-trigger:hover {
  background: var(--sd-surface-2);
  color: var(--sd-text);
}

.sd-story-menu {
  position: absolute;
  top: calc(100% + 0.25rem);
  right: 0;
  min-width: 11rem;
  background: var(--sd-surface-2);
  border: 1px solid var(--sd-border-strong);
  border-radius: 0.6rem;
  box-shadow: 0 8px 24px rgb(0 0 0 / 35%);
  overflow: hidden;
  display: none;
  z-index: 50;
}
.sd-story-menu--open { display: block; }

.sd-story-menu-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.65rem 1rem;
  background: none;
  border: none;
  font-size: 0.9rem;
  color: var(--sd-text-soft);
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
}
.sd-story-menu-item:hover { background: var(--sd-surface-3); }
.sd-story-menu-item--danger { color: #f87171; }
.sd-story-menu-item--danger:hover { background: rgb(248 113 113 / 10%); }
.sd-story-meta-line { font-size: 0.85rem; color: var(--sd-text-muted); margin: 0 0 var(--sd-space-md); }

.sd-story-actions-row {
  display: flex;
  gap: var(--sd-space-sm);
  flex-wrap: wrap;
  align-items: center;
}

@media (width <= 479px) {
  .sd-story-actions-row {
    flex-direction: column;
  }

  .sd-story-actions-row .sd-btn,
  .sd-story-actions-row .sd-badge-muted,
  .sd-story-actions-row form {
    width: 100%;
    justify-content: center;
  }

  .sd-story-actions-row form .sd-btn {
    width: 100%;
    justify-content: center;
  }
}

.sd-story-content {
  font-size: 1.15rem;
  line-height: 1.75;
  color: var(--sd-text-soft);
  white-space: pre-line;
  margin-bottom: var(--sd-space-xl);
}
.sd-story-content p { margin: -0.5em 0 0; }

.sd-story-footer {
  display: flex;
  gap: var(--sd-space-sm);
  flex-wrap: wrap;
  padding-top: var(--sd-space-lg);
  border-top: 1px solid var(--sd-border);
}

.sd-delete-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: none;
  padding: 0;
  font-size: 0.8rem;
  color: var(--sd-text-muted);
  cursor: pointer;
  opacity: 0.6;
  transition: color 0.2s, opacity 0.2s;
}

.sd-delete-btn:hover {
  color: #f87171;
  opacity: 1;
}

/* ── Playback view ──────────────────────────────────────────── */
.sd-playback-back {
  position: absolute;
  top: var(--sd-space-md);
  left: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  color: var(--sd-text-muted);
  background: var(--sd-surface-2);
  transition: background 0.15s, color 0.15s;
  z-index: 10;
}
.sd-playback-back:hover { background: var(--sd-surface-3); color: var(--sd-text); }

.sd-playback {
  position: relative;
  min-height: calc(100vh - var(--sd-topbar-height));
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--sd-space-xl);
  background: var(--sd-grad-hero);
}

.sd-playback-cover {
  width: 100%;
  max-width: 300px;
  aspect-ratio: 1;
  border-radius: var(--sd-radius-xl);
  overflow: hidden;
  margin-bottom: var(--sd-space-lg);
  box-shadow: var(--sd-shadow-glow);
  position: relative;
}
.sd-playback-cover img { width: 100%; height: 100%; object-fit: cover; }

.sd-playback-cover-placeholder {
  width: 100%;
  height: 100%;
  background: var(--sd-grad-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  color: rgb(255 255 255 / 50%);
}

.sd-stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, #fff 1px, transparent 1px),
    radial-gradient(circle, #fff 1px, transparent 1px);
  background-size: 50px 50px, 30px 30px;
  background-position: 0 0, 15px 15px;
  opacity: 0.08;
  border-radius: inherit;
}

.sd-playback-info {
  text-align: center;
  margin-bottom: var(--sd-space-lg);
  width: 100%;
  max-width: 400px;
}
.sd-playback-title { font-size: 1.3rem; font-weight: 800; margin: 0 0 0.3rem; }
.sd-playback-subtitle { font-size: 0.85rem; color: var(--sd-text-muted); margin: 0; }

.sd-playback-progress-track {
  width: 100%;
  max-width: 400px;
  height: 6px;
  background: var(--sd-border);
  border-radius: var(--sd-radius-pill);
  margin-bottom: 0.5rem;
  cursor: pointer;
  overflow: hidden;
}

.sd-playback-progress-fill {
  height: 100%;
  width: 100%;
  background: var(--sd-grad-accent);
  border-radius: inherit;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s linear;
}

.sd-playback-times {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 400px;
  font-size: 0.75rem;
  color: var(--sd-text-muted);
  margin-bottom: var(--sd-space-lg);
}

.sd-playback-controls {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sd-space-lg);
  margin-bottom: var(--sd-space-xl);
}

.sd-controls-left  { display: flex; align-items: center; justify-content: flex-end; gap: var(--sd-space-sm); }
.sd-controls-center { display: flex; align-items: center; justify-content: center; }
.sd-controls-right { display: flex; align-items: center; justify-content: flex-start; gap: var(--sd-space-sm); }

.sd-playback-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--sd-text-soft);
  font-size: 1.2rem;
  padding: 0.5rem;
  border-radius: 50%;
  transition: color var(--sd-transition), background var(--sd-transition);
}
.sd-playback-btn:focus { outline: none; }
.sd-playback-btn:focus-visible { outline: 2px solid var(--sd-accent); outline-offset: 2px; }

@media (hover: hover) {
  .sd-playback-btn:hover { color: var(--sd-accent); background: var(--sd-accent-muted); }
}

.sd-playback-btn-main {
  width: 68px; height: 68px;
  background: var(--sd-grad-accent);
  color: #fff !important;
  font-size: 1.5rem;
  box-shadow: var(--sd-shadow-glow);
}
.sd-playback-btn-main:hover { background: var(--sd-accent-dark); }

.sd-playback-btn-secondary {
  width: 44px;
  height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sd-surface-2);
  color: var(--sd-text) !important;
}

/* off: dimmed */
.sd-playback-btn[data-repeat-mode="off"] { opacity: 0.35; }

/* all: accent, full brightness */
.sd-playback-btn[data-repeat-mode="all"] { color: var(--sd-accent); opacity: 1; }

/* one: accent + solid pill badge */
.sd-playback-btn[data-repeat-mode="one"] { color: var(--sd-accent); opacity: 1; position: relative; }

.sd-playback-btn[data-repeat-mode="one"]::after {
  content: "1";
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.2rem;
  background: var(--sd-accent);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.sd-playback-btn:disabled { opacity: 0.3; cursor: default; }
.sd-playback-btn:disabled:hover { color: var(--sd-text-soft); background: none; }


.sd-playback-generating {
  text-align: center;
  color: var(--sd-text-muted);
  padding: var(--sd-space-lg);
  font-size: 0.9rem;
}

.sd-sleep-timer {
  margin-bottom: var(--sd-space-xl);
  text-align: center;
}
.sd-sleep-label { font-size: 1rem; color: var(--sd-text-muted); margin: 0 0 0.5rem; }
.sd-sleep-options { display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: center; }

.sd-sleep-btn {
  padding: 0.5rem 1.1rem;
  border: 1.5px solid var(--sd-border-strong);
  border-radius: var(--sd-radius-pill);
  background: none;
  color: var(--sd-text-soft);
  font-size: 0.95rem;
  font-family: var(--sd-font);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--sd-transition), border-color var(--sd-transition), color var(--sd-transition);
}

.sd-sleep-btn:focus { outline: none; }
.sd-sleep-btn:focus-visible { outline: 2px solid var(--sd-accent); outline-offset: 2px; }

.sd-sleep-btn--active {
  background: var(--sd-accent);
  color: #fff;
  border-color: var(--sd-accent);
  box-shadow: 0 0 10px rgb(124 58 237 / 50%);
}

@media (hover: hover) {
  .sd-sleep-btn:hover { background: var(--sd-accent-muted); border-color: var(--sd-accent); color: var(--sd-accent); }
}

.sd-story-text-detail { width: 100%; max-width: 600px; text-align: center; }
.sd-story-text-detail summary { cursor: pointer; font-size: 1rem; }

.sd-playback-story-text {
  font-size: 1.15rem;
  line-height: 1.75;
  color: var(--sd-text-soft);
  white-space: pre-line;
  margin-top: var(--sd-space-md);
  padding: var(--sd-space-md);
  background: var(--sd-bg-soft);
  border-radius: var(--sd-radius-md);
}
.sd-playback-story-text p { margin: -0.5em 0 0; }

.sd-playback-nav {
  display: flex;
  gap: var(--sd-space-sm);
  flex-wrap: wrap;
  justify-content: center;
  padding-top: var(--sd-space-lg);
}

/* ── Generator loading state ────────────────────────────────── */
.sd-generator-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sd-space-lg);
  padding: var(--sd-space-xl);
  text-align: center;
  min-height: calc(100dvh - 120px);
}
.sd-generator-spinner { font-size: 3rem; color: var(--sd-accent); }

.sd-spin-moon {
  display: inline-block;
  animation: sd-spin 2s linear infinite;
}

@keyframes sd-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.sd-generator-message { font-size: 1rem; color: var(--sd-text-soft); margin: 0; }

.sd-generator-track {
  width: 100%;
  max-width: 400px;
  height: 8px;
  background: var(--sd-border);
  border-radius: var(--sd-radius-pill);
  overflow: hidden;
}

.sd-generator-bar {
  height: 100%;
  width: 0%;
  background: var(--sd-grad-accent);
  border-radius: inherit;
  transition: width 0.5s ease;
}

/* ── Filter bar ─────────────────────────────────────────────── */
.sd-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: var(--sd-space-xl);
}

.sd-filter-btn {
  padding: 0.3rem 0.85rem;
  border-radius: var(--sd-radius-pill);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--sd-text-soft);
  text-decoration: none;
  border: 1.5px solid var(--sd-border-strong);
  transition: background var(--sd-transition), border-color var(--sd-transition), color var(--sd-transition);
}

.sd-filter-btn:hover,
.sd-filter-btn.active { background: var(--sd-accent-muted); border-color: var(--sd-accent); color: var(--sd-accent); }

/* ── Success page ───────────────────────────────────────────── */
.sd-success-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--sd-space-3xl) var(--sd-space-xl);
  gap: var(--sd-space-lg);
}

.sd-success-icon {
  font-size: 4rem;
  color: var(--sd-gold);
  animation: sd-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes sd-pop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.sd-success-title { font-size: 1.5rem; font-weight: 800; margin: 0; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (width <= 768px) {
  /* Sidebar hidden on mobile */
  .sd-sidebar { display: none; }
  .sd-bottom-nav { display: flex; }

  /* Mobile nav */
  .sd-nav-burger { display: flex; }

  .sd-header-nav {
    display: flex;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--sd-bg-card);
    border-bottom: 1px solid var(--sd-border);
    padding: var(--sd-space-sm) 0;
    z-index: 99;
  }

  .sd-header-nav--open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .sd-header-nav .sd-nav-link,
  .sd-header-nav .sd-btn {
    padding: 0.85rem var(--sd-space-lg);
    border-radius: 0;
    width: 100%;
    text-align: left;
    justify-content: flex-start;
    font-size: 1rem;
    border: none;
    background: none;
    color: var(--sd-text-soft);
  }

  .sd-header-nav .sd-btn-primary {
    background: var(--sd-grad-accent);
    color: #fff;
    margin: var(--sd-space-sm) var(--sd-space-lg);
    border-radius: var(--sd-radius-pill);
    width: calc(100% - var(--sd-space-lg) * 2);
    text-align: center;
    justify-content: center;
    animation: none; /* no shimmer in the dropdown — save battery on mobile */
  }

  .sd-header-nav .sd-lang-picker {
    padding: var(--sd-space-sm) var(--sd-space-lg);
    border-top: 1px solid var(--sd-border);
    margin-top: var(--sd-space-xs);
  }

  /* Hero stacks on mobile */
  .sd-hero { min-height: unset; padding: var(--sd-space-2xl) 0; }
  .sd-hero-inner { grid-template-columns: 1fr; text-align: center; }
  .sd-hero-text { order: 1; }
  .sd-hero-visual { order: 2; }
  .sd-hero-subtitle { margin-inline: auto; }
  .sd-hero-actions { justify-content: center; }
  .sd-phone-mockup { width: 200px; }

  /* Reduce section padding on mobile */
  .sd-section-dark,
  .sd-section-highlights,
  .sd-section-trust,
  .sd-cta-section { padding: var(--sd-space-2xl) 0; }

  /* Steps → single column */
  .sd-steps-grid { grid-template-columns: 1fr; }

  /* Trust quotes → single column */
  .sd-trust-quotes { flex-direction: column; }
  .sd-trust-quote { min-width: unset; }

  /* Plans → single column */
  .sd-plans-grid { grid-template-columns: 1fr; }

  /* Page padding reduced */
  .sd-page { padding: var(--sd-space-md); }

  /* Profile grid */
  .sd-profile-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .sd-profile-grid--manage { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--sd-space-md); }

  /* Story grid */
  .sd-story-grid { grid-template-columns: 1fr; }
}

/* ── Small phones (≤480px) ──────────────────────────────────── */
@media (width <= 480px) {
  /* Tighter container on very narrow viewports */
  .sd-container { padding-inline: var(--sd-space-md); }

  /* Stack hero buttons full-width for maximum tap targets */
  .sd-hero-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 320px;
    margin-inline: auto;
  }
}

/* ── Landscape phones ───────────────────────────────────────── */
@media (orientation: landscape) and (height <= 500px) {
  /* Remove min-height so hero doesn't demand a full viewport */
  .sd-hero { min-height: unset; padding: var(--sd-space-lg) 0; }

  /* Side-by-side layout fits landscape better than stacking */
  .sd-hero-inner {
    grid-template-columns: 1fr auto;
    text-align: left;
    gap: var(--sd-space-xl);
  }
  .sd-hero-text { order: unset; }
  .sd-hero-visual { order: unset; }
  .sd-hero-subtitle { margin-inline: unset; max-width: 380px; }
  .sd-hero-actions { justify-content: flex-start; }
  .sd-phone-mockup { width: 160px; }
}

/* ── Tablet (769–1024px) ────────────────────────────────────── */
@media (769px <= width <= 1024px) {
  /* Give the headline more room — mockup doesn't need equal space */
  .sd-hero-inner { grid-template-columns: 1.3fr 0.7fr; gap: var(--sd-space-2xl); }
}

@media (width >= 769px) {
  /* Hide mobile bottom nav on desktop */
  .sd-bottom-nav { display: none; }

  /* No bottom padding needed on desktop */
  .sd-app-main { padding-bottom: 0; }
}

/* ── Subscription page ───────────────────────────────────────── */
.sd-subscription-header {
  display: flex;
  align-items: center;
  gap: var(--sd-space-md);
  margin-bottom: var(--sd-space-xl);
}

.sd-subscription-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--sd-radius-lg);
  background: var(--sd-gold-muted);
  border: 1px solid rgb(251 191 36 / 30%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--sd-gold);
  flex-shrink: 0;
}

.sd-subscription-tagline {
  font-size: 0.875rem;
  color: var(--sd-text-muted);
  margin: 0.2rem 0 0;
}

/* Current (free) plan — recedes visually so Premium stands out */
.sd-plan-card-current {
  background: var(--sd-bg-soft);
  border-color: var(--sd-border);
}

.sd-plan-card-current .sd-plan-price {
  color: var(--sd-text-soft);
}

/* "Tu plan actual" indicator — centered, separated, not a badge */
.sd-plan-active-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--sd-text-muted);
  border-top: 1px solid var(--sd-border);
  padding-top: var(--sd-space-md);
  margin-top: auto;
}

.sd-plan-active-bar i {
  color: #4ade80;
  font-size: 1rem;
}

/* ── Settings page ───────────────────────────────────────────── */
.sd-settings-header {
  display: flex;
  align-items: center;
  gap: var(--sd-space-md);
  margin-bottom: var(--sd-space-xl);
}

.sd-settings-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--sd-radius-lg);
  background: var(--sd-accent-muted);
  border: 1px solid var(--sd-border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--sd-accent);
  flex-shrink: 0;
}

.sd-settings-email {
  font-size: 0.85rem;
  color: var(--sd-text-muted);
  margin: 0.2rem 0 0;
}

/* ── Auth / Registration ─────────────────────────────────────── */
.sd-auth-page {
  min-height: calc(100vh - 64px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sd-space-2xl) var(--sd-space-lg);
}

.sd-auth-inner {
  width: 100%;
  max-width: 880px;
  display: flex;
  flex-direction: column;
  gap: var(--sd-space-xl);
}

@media (width >= 768px) {
  .sd-auth-inner {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--sd-space-2xl);
  }

  .sd-auth-benefits-col { width: 340px; flex-shrink: 0; }
  .sd-auth-form-col { flex: 1; }
}

/* Benefits panel */
.sd-auth-benefits {
  background: linear-gradient(145deg, #1e1b4b, #2d2a6e);
  border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius-xl);
  padding: var(--sd-space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--sd-space-lg);
}

.sd-auth-benefits-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  border-radius: var(--sd-radius-pill);
  background: var(--sd-accent-muted);
  border: 1px solid var(--sd-border);
  color: var(--sd-accent);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  width: fit-content;
}

.sd-auth-benefits-heading h3 {
  margin: 0 0 0.4rem;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--sd-text);
  line-height: 1.3;
}

.sd-auth-benefits-heading p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--sd-text-soft);
  line-height: 1.5;
}

.sd-auth-benefits-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: rgb(255 255 255 / 5%);
  border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius-lg);
  overflow: hidden;
}

.sd-auth-benefit-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--sd-border);
}

.sd-auth-benefit-item:last-child { border-bottom: none; }

.sd-auth-benefit-icon {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--sd-accent-muted);
  color: var(--sd-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
}

.sd-auth-benefit-title {
  margin: 0 0 0.15rem;
  font-size: 0.825rem;
  font-weight: 700;
  color: var(--sd-text);
}

.sd-auth-benefit-desc {
  margin: 0;
  font-size: 0.775rem;
  color: var(--sd-text-muted);
  line-height: 1.4;
}

/* Auth card / form */
.sd-auth-card {
  background: var(--sd-bg-card);
  border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius-lg);
  padding: var(--sd-space-xl);
  width: 100%;
  max-width: 420px;
  box-shadow: 0 8px 32px rgb(88 28 235 / 8%);
}

.sd-auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--sd-accent);
  font-size: 1rem;
  font-weight: 800;
  margin-bottom: var(--sd-space-md);
}

.sd-auth-title {
  margin: 0 0 var(--sd-space-lg);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--sd-text);
  text-align: center;
}

.sd-auth-form { display: flex; flex-direction: column; gap: var(--sd-space-md); }

.sd-auth-field { display: flex; flex-direction: column; gap: 0.35rem; }

.sd-auth-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--sd-text-soft);
}

.sd-auth-input {
  width: 100%;
  padding: 0.6rem 0.875rem;
  background: var(--sd-bg-soft);
  border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius-md);
  color: var(--sd-text);
  font-family: var(--sd-font);
  font-size: 0.95rem;
  outline: none;
  transition: border-color var(--sd-transition), box-shadow var(--sd-transition);
}

.sd-auth-input::placeholder { color: var(--sd-text-muted); }

.sd-auth-input:focus {
  border-color: var(--sd-accent);
  box-shadow: 0 0 0 3px var(--sd-accent-muted);
}

.sd-auth-password-wrap { position: relative; }
.sd-auth-password-wrap .sd-auth-input { padding-right: 2.5rem; }

.sd-auth-eye-btn {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--sd-text-muted);
  cursor: pointer;
  padding: 0;
  font-size: 0.9rem;
}

.sd-auth-hint {
  margin: 0.2rem 0 0;
  font-size: 0.75rem;
  color: var(--sd-text-muted);
}

.sd-auth-submit {
  width: 100%;
  padding: 0.75rem;
  font-size: 1rem;
}

.sd-auth-links {
  margin-top: var(--sd-space-md);
  text-align: center;
  font-size: 0.85rem;
  color: var(--sd-text-muted);
}

.sd-auth-link {
  color: var(--sd-accent);
  text-decoration: none;
  font-weight: 600;
}

.sd-auth-link:hover { text-decoration: underline; }

/* ── Passwordless auth: card inner structure ─────────────────── */
.sd-auth-header { text-align: center; margin-bottom: var(--sd-space-lg); }
.sd-auth-icon { font-size: 2.5rem; color: var(--sd-accent); margin-bottom: var(--sd-space-sm); }

/* Override margin when title is inside the centered header (passwordless flow) */
.sd-auth-header .sd-auth-title { font-size: 1.4rem; font-weight: 800; margin: 0 0 0.4rem; color: var(--sd-text); }
.sd-auth-subtitle { color: var(--sd-text-muted); font-size: 0.9rem; margin: 0; }

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

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

.sd-google-btn-wrapper { min-height: 44px; }

.sd-auth-note {
  color: var(--sd-text-muted);
  font-size: 0.78rem;
  text-align: center;
  margin-top: var(--sd-space-md);
  line-height: 1.5;
}

.sd-input--code {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.5rem;
  text-align: center;
  font-family: monospace;
}

/* ── Flash messages (inside sd-app / sd-public) ─────────────── */
.sd-app .flash-message,
.sd-public .flash-message {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.875rem;
  border-radius: var(--sd-radius-md);
  font-size: 0.875rem;
  font-family: var(--sd-font);
  color: var(--sd-text);
  border: 1px solid var(--sd-border);
  background: var(--sd-bg-card);
}

.sd-app .flash-message > div,
.sd-public .flash-message > div {
  flex: 1;
  min-width: 0;
}

.sd-app .flash-message button,
.sd-public .flash-message button {
  background: none;
  border: none;
  padding: 0.2rem;
  margin: 0;
  cursor: pointer;
  color: currentcolor;
  opacity: 0.6;
  border-radius: var(--sd-radius-sm);
  line-height: 1;
  flex-shrink: 0;
}

.sd-app .flash-message button:hover,
.sd-public .flash-message button:hover {
  opacity: 1;
}

.sd-app .d-flash-success,
.sd-public .d-flash-success {
  background: #064e3b;
  border-color: #059669;
  color: #d1fae5;
}

.sd-app .d-flash-error,
.sd-public .d-flash-error {
  background: #7f1d1d;
  border-color: #dc2626;
  color: #fee2e2;
}

.sd-app .d-flash-warning,
.sd-public .d-flash-warning {
  background: #78350f;
  border-color: #d97706;
  color: #fef3c7;
}

.sd-app .d-flash-notice,
.sd-public .d-flash-notice {
  background: #2e1065;
  border-color: var(--sd-accent);
  color: #ede9fe;
}

.sd-app .flash-container,
.sd-public .flash-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 9999;
  width: 320px;
  max-width: calc(100vw - 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;

  /* Tailwind's `fixed right-4` etc. don't apply — sweetdreams.css has no Tailwind */
}

/* ── Language picker ─────────────────────────────────────────────── */
.sd-lang-picker {
  display: flex;
  gap: 0.25rem;
  align-items: center;
}

.sd-lang-option {
  position: relative; /* needed for ::after tap expansion */
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--sd-text-muted);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.2rem 0.35rem;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}

/* Expand tap area to 44px without affecting layout */
.sd-lang-option::after {
  content: '';
  position: absolute;
  inset: -10px -4px;
}
.sd-lang-option:hover { color: var(--sd-text); border-color: var(--sd-border); }
.sd-lang-option.active { color: var(--sd-accent); border-color: var(--sd-accent); }

.sd-lang-picker--sidebar {
  margin-bottom: 0.5rem;
}
.sd-lang-picker--sidebar form { display: inline; }
.sd-lang-picker--sidebar .sd-lang-option { font-size: 0.7rem; }

/* ── Error Pages ─────────────────────────────────────────────── */
.sd-error-page { min-height: 100vh; background: var(--sd-grad-hero); }
.sd-error-page .sd-header { background: transparent; border-bottom: none; }

.sd-error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 4rem);
  padding: 3rem 1.5rem;
  text-align: center;
}

.sd-error-sky {
  position: relative;
  height: 8rem;
  width: 8rem;
  margin-bottom: 2rem;
}

.sd-error-moon {
  font-size: 4rem;
  color: var(--sd-gold);
  filter: drop-shadow(0 0 20px rgb(251 191 36 / 40%));
  animation: sd-float 4s ease-in-out infinite;
}

.sd-error-cloud {
  position: absolute;
  bottom: 0;
  right: -1rem;
  font-size: 1.75rem;
  color: var(--sd-text-muted);
  opacity: 0.6;
}

.sd-error-star {
  position: absolute;
  font-size: 0.6rem;
  color: var(--sd-gold);
  animation: sd-twinkle 2s ease-in-out infinite;
}
.sd-error-star--1 { top: 0.25rem; right: 0.5rem; animation-delay: 0s; }
.sd-error-star--2 { top: 1.5rem; left: 0.25rem; animation-delay: 0.7s; font-size: 0.4rem; }
.sd-error-star--3 { bottom: 1.5rem; right: 1.5rem; animation-delay: 1.4s; font-size: 0.5rem; }

@keyframes sd-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

@keyframes sd-twinkle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.3; transform: scale(0.7); }
}

.sd-error-code {
  font-size: 5rem;
  font-weight: 800;
  line-height: 1;
  background: var(--sd-grad-accent);
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.5rem;
}

.sd-error-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--sd-text);
  margin-bottom: 0.75rem;
}

.sd-error-message {
  font-size: 1rem;
  color: var(--sd-text-soft);
  max-width: 28rem;
  margin: 0 auto 2rem;
  line-height: 1.6;
}

.sd-error-id-label {
  font-size: 0.8rem;
  color: var(--sd-text-muted);
  margin-bottom: 0.4rem;
}

.sd-error-id {
  display: inline-block;
  padding: 0.4rem 0.75rem;
  background: var(--sd-bg-card);
  border: 1px solid var(--sd-border);
  border-radius: 0.375rem;
  font-family: monospace;
  font-size: 0.8rem;
  color: var(--sd-text);
  margin-bottom: 2rem;
  user-select: all;
}

.sd-error-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
}

@media (width >= 480px) {
  .sd-error-actions { flex-direction: row; justify-content: center; }
}

/* ── iOS install banner ──────────────────────────────────────────── */
#sd-ios-install-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  padding: var(--sd-space-sm) var(--sd-space-md);
  background: var(--sd-bg-card);
  border-top: 1px solid var(--sd-border-strong);
  box-shadow: 0 -4px 24px rgb(0 0 0 / 40%);
}

.sd-ios-banner-inner {
  display: flex;
  align-items: center;
  gap: var(--sd-space-sm);
  max-width: 480px;
  margin: 0 auto;
}

.sd-ios-banner-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--sd-radius-md);
  flex-shrink: 0;
}

.sd-ios-banner-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-family: var(--sd-font);
  font-size: 0.85rem;
  color: var(--sd-text);
  line-height: 1.3;
}

.sd-ios-banner-text strong {
  font-weight: 700;
}

.sd-ios-banner-text span {
  color: var(--sd-text-soft);
  font-size: 0.8rem;
}

.sd-ios-banner-text em {
  font-style: normal;
  font-weight: 700;
  color: var(--sd-accent);
}

.sd-ios-banner-close {
  background: none;
  border: none;
  color: var(--sd-text-muted);
  padding: var(--sd-space-xs);
  cursor: pointer;
  flex-shrink: 0;
  font-size: 1rem;
  line-height: 1;
}