/* ═══════════════════════════════════════════════════════
   STILLNESS — DARK THEME  v2
   Using html[data-theme="dark"] for maximum specificity
   ═══════════════════════════════════════════════════════ */

/* ── Token overrides — midnight forest palette ───────── */
/* Deep dark with a very subtle cool-warm tension.        */
/* NOT flat black, NOT muddy grey — rich depth.           */
html[data-theme="dark"] {
  --bg-base:          #0A0C0F;
  --bg-warm:          #0F1115;
  --bg-section-alt:   #0D0E13;
  --bg-dark:          #060709;
  --bg-dark-2:        #08090C;

  --cream:            #0F1115;
  --ivory:            #131519;

  /* Accent — brighter, more luminous on dark */
  --accent:           #D4A574;
  --accent-dark:      #C8956C;
  --accent-light:     #E8C4A0;
  --accent-pale:      rgba(212, 165, 116, 0.12);
  --accent-glow:      rgba(212, 165, 116, 0.30);

  /* Text — warm off-white hierarchy */
  --text-primary:     #EDE8E0;
  --text-secondary:   #8C8478;
  --text-muted:       #7A7268;
  --text-inverse:     #0A0C0F;

  /* Glass — true dark glass morphism */
  --glass-bg:          rgba(255, 255, 255, 0.05);
  --glass-bg-medium:   rgba(255, 255, 255, 0.08);
  --glass-bg-heavy:    rgba(255, 255, 255, 0.11);
  --glass-bg-dark:     rgba(0, 0, 0, 0.55);

  --glass-border:      rgba(255, 255, 255, 0.10);
  --glass-border-soft: rgba(255, 255, 255, 0.06);
  --glass-border-warm: rgba(212, 165, 116, 0.22);

  --glass-shadow:
    0 8px 40px rgba(0, 0, 0, 0.50),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --glass-shadow-hover:
    0 20px 60px rgba(0, 0, 0, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.11);
  --glass-shadow-accent:
    0 12px 40px rgba(212, 165, 116, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

/* ── Body ────────────────────────────────────────────── */
html[data-theme="dark"] body {
  background: #0A0C0F;
  color: #EDE8E0;
}

/* ═══════════════════════════════════════════════════════
   HARDCODED BACKGROUND OVERRIDES
   Many pages have inline CSS with hardcoded rgba/hex.
   We must override these explicitly.
   ═══════════════════════════════════════════════════════ */

/* ── Blob scene backgrounds (all pages) ─────────────── */
html[data-theme="dark"] .blob-scene {
  background: #0A0C0F !important;
}

/* ── Blob colors — чуть ярче на тёмном фоне (+10%) ──── */
html[data-theme="dark"] .blob-1 { --blob-opacity: 0.085 !important; }
html[data-theme="dark"] .blob-2 { --blob-opacity: 0.072 !important; }
html[data-theme="dark"] .blob-3 { --blob-opacity: 0.072 !important; }
html[data-theme="dark"] .blob-4 { --blob-opacity: 0.058 !important; }

/* ── Navigation (subpages use hardcoded rgba) ────────── */
html[data-theme="dark"] .nav {
  background: rgba(10, 12, 15, 0.80) !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
  box-shadow:
    0 4px 28px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

/* ── Mobile nav drawer ───────────────────────────────── */
html[data-theme="dark"] .nav-drawer {
  background: rgba(10, 12, 15, 0.97) !important;
}

/* ── Topbar (legal pages) ────────────────────────────── */
html[data-theme="dark"] .topbar {
  background: rgba(10, 12, 15, 0.88) !important;
  border-bottom-color: rgba(255, 255, 255, 0.07) !important;
}

/* ── Nav back button (sounds/timer) ─────────────────── */
html[data-theme="dark"] .nav-back {
  border-color: rgba(255, 255, 255, 0.10) !important;
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] .nav-back:hover {
  background: rgba(212, 165, 116, 0.12) !important;
}

/* ── Sound cards ─────────────────────────────────────── */
html[data-theme="dark"] .sound-card {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
html[data-theme="dark"] .sound-card:hover:not(.unavailable),
html[data-theme="dark"] .sound-card.active {
  background: rgba(255, 255, 255, 0.09) !important;
  border-color: rgba(212, 165, 116, 0.30) !important;
  box-shadow:
    0 14px 50px rgba(0, 0, 0, 0.60),
    0 0 0 1px rgba(212, 165, 116, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}
html[data-theme="dark"] .sound-card::before {
  background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, transparent 70%) !important;
}

/* ── Timer page specific ─────────────────────────────── */
html[data-theme="dark"] .timer-section,
html[data-theme="dark"] .timer-wrap {
  background: transparent !important;
}
/* Timer glass panels */
html[data-theme="dark"] .timer-panel,
html[data-theme="dark"] .timer-card,
html[data-theme="dark"] .technique-card {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
}
html[data-theme="dark"] .technique-card.active {
  background: rgba(212, 165, 116, 0.14) !important;
  border-color: rgba(212, 165, 116, 0.30) !important;
}

/* Breath ring */
html[data-theme="dark"] .breath-ring {
  border-color: rgba(212, 165, 116, 0.25) !important;
  box-shadow:
    0 0 60px rgba(212, 165, 116, 0.12),
    inset 0 0 40px rgba(212, 165, 116, 0.06) !important;
}
html[data-theme="dark"] .breath-ring-fill {
  background: radial-gradient(
    circle,
    rgba(212, 165, 116, 0.14),
    rgba(212, 165, 116, 0.04) 60%,
    transparent
  ) !important;
}

/* ── Meditation page ─────────────────────────────────── */
html[data-theme="dark"] .player-card,
html[data-theme="dark"] .session-card {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
}
html[data-theme="dark"] .progress-bar-bg,
html[data-theme="dark"] .progress-track {
  background: rgba(255, 255, 255, 0.10) !important;
}

/* ── FAQ items ───────────────────────────────────────── */
html[data-theme="dark"] .faq-item {
  border-color: rgba(255, 255, 255, 0.07) !important;
}
html[data-theme="dark"] .faq-item.open,
html[data-theme="dark"] .faq-item:has(.faq-body:not([hidden])) {
  background: rgba(255, 255, 255, 0.03) !important;
}

/* ── Feature / benefit cards ─────────────────────────── */
html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .benefit-card,
html[data-theme="dark"] .stat-card {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
}
html[data-theme="dark"] .feature-card:hover,
html[data-theme="dark"] .benefit-card:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

/* ── Pricing cards ───────────────────────────────────── */
html[data-theme="dark"] .pricing-card {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
}
html[data-theme="dark"] .pricing-card.featured,
html[data-theme="dark"] .pricing-card--pro {
  background: linear-gradient(135deg,
    rgba(212, 165, 116, 0.14),
    rgba(212, 165, 116, 0.05)) !important;
  border-color: rgba(212, 165, 116, 0.28) !important;
}

/* ── Testimonial cards ───────────────────────────────── */
html[data-theme="dark"] .testimonial-card,
html[data-theme="dark"] .review-card {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
}

/* ── CTA section ─────────────────────────────────────── */
html[data-theme="dark"] .cta-section,
html[data-theme="dark"] .cta-glass {
  background: rgba(212, 165, 116, 0.08) !important;
  border-color: rgba(212, 165, 116, 0.18) !important;
}

/* ── Footer ──────────────────────────────────────────── */
html[data-theme="dark"] footer,
html[data-theme="dark"] .footer,
html[data-theme="dark"] .site-footer {
  background: rgba(6, 7, 9, 0.95) !important;
  border-top-color: rgba(255, 255, 255, 0.07) !important;
}

/* ── Locked overlay (premium content) ───────────────── */
/* Убираем белый блюр — делаем тёмное стекло */
html[data-theme="dark"] .locked-overlay {
  background: rgba(8, 10, 13, 0.84) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
html[data-theme="dark"] .locked-text {
  color: #8C8478 !important;
}
html[data-theme="dark"] .locked-icon {
  background: rgba(212, 165, 116, 0.14) !important;
  border-color: rgba(212, 165, 116, 0.28) !important;
}

/* ── Media cards (library section) ──────────────────── */
html[data-theme="dark"] .media-card {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
}
html[data-theme="dark"] .media-card:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="dark"] .media-title   { color: #EDE8E0 !important; }
html[data-theme="dark"] .media-desc    { color: #8C8478 !important; }
html[data-theme="dark"] .media-duration{ color: #4A4640 !important; }
html[data-theme="dark"] .media-author  { color: #4A4640 !important; }

/* ── Course cards ────────────────────────────────────── */
html[data-theme="dark"] .course-card {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
}
html[data-theme="dark"] .course-card-featured {
  background: linear-gradient(145deg,
    rgba(212, 165, 116, 0.14),
    rgba(255, 255, 255, 0.07)) !important;
  border-color: rgba(212, 165, 116, 0.28) !important;
}
html[data-theme="dark"] .course-title       { color: #EDE8E0 !important; }
html[data-theme="dark"] .course-desc        { color: #8C8478 !important; }
html[data-theme="dark"] .course-meta-item   { color: #8C8478 !important; }
html[data-theme="dark"] .course-price       { color: #EDE8E0 !important; }
html[data-theme="dark"] .course-price-orig  { color: #4A4640 !important; }
html[data-theme="dark"] .course-price-row   {
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="dark"] .course-duration-badge {
  background: rgba(255, 255, 255, 0.10) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #8C8478 !important;
}
html[data-theme="dark"] .courses-pro-inner {
  background: rgba(212, 165, 116, 0.08) !important;
  border-color: rgba(212, 165, 116, 0.20) !important;
}

/* ── Pricing ─────────────────────────────────────────── */
html[data-theme="dark"] .pricing-feature      { color: #8C8478 !important; }
html[data-theme="dark"] .pricing-feature.locked {
  color: rgba(255, 255, 255, 0.20) !important;
}
html[data-theme="dark"] .pricing-feature.locked svg {
  stroke: rgba(255, 255, 255, 0.18) !important;
}
html[data-theme="dark"] .pricing-billed  { color: #4A4640 !important; }
html[data-theme="dark"] .pricing-period  { color: #4A4640 !important; }
html[data-theme="dark"] .pricing-toggle {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
}
html[data-theme="dark"] .toggle-option   { color: #8C8478 !important; }

/* ── Misc text fixes ─────────────────────────────────── */
html[data-theme="dark"] .hero-social-proof {
  background: rgba(255, 255, 255, 0.07) !important;
}
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3 {
  color: #EDE8E0 !important;
}
html[data-theme="dark"] .label { color: #D4A574 !important; }
html[data-theme="dark"] .hero-subtitle,
html[data-theme="dark"] .section-subtitle,
html[data-theme="dark"] .body-lg {
  color: #8C8478 !important;
}
html[data-theme="dark"] .preview-cta-text { color: #8C8478 !important; }
html[data-theme="dark"] .preview-cta-text strong { color: #EDE8E0 !important; }

/* ── Modals ──────────────────────────────────────────── */
html[data-theme="dark"] .modal-overlay,
html[data-theme="dark"] .info-modal-overlay {
  background: rgba(0, 0, 0, 0.78) !important;
}
html[data-theme="dark"] .modal,
html[data-theme="dark"] .info-modal {
  background: #0F1115 !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.70),
    inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .info-modal-header {
  border-bottom-color: rgba(255, 255, 255, 0.07) !important;
}
html[data-theme="dark"] .about-value {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(212, 165, 116, 0.12) !important;
}
html[data-theme="dark"] .about-stats-row {
  background: rgba(212, 165, 116, 0.06) !important;
  border-color: rgba(212, 165, 116, 0.14) !important;
}
html[data-theme="dark"] .about-mission-card {
  background: linear-gradient(135deg,
    rgba(212, 165, 116, 0.10),
    rgba(212, 165, 116, 0.03)) !important;
  border-color: rgba(212, 165, 116, 0.22) !important;
}

/* ── Section alternating backgrounds ────────────────── */
html[data-theme="dark"] section[style*="background"],
html[data-theme="dark"] .section-cream,
html[data-theme="dark"] .section-warm {
  background: var(--bg-section-alt) !important;
}

/* ── Library preview section — remove near-black overlay ── */
html[data-theme="dark"] #preview[style*="background"] {
  background: transparent !important;
}

/* ── Help disclaimer ─────────────────────────────────── */
html[data-theme="dark"] .help-disclaimer {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
}
html[data-theme="dark"] .help-faq-item {
  border-bottom-color: rgba(255, 255, 255, 0.07) !important;
}

/* ── Inputs ──────────────────────────────────────────── */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  color: var(--text-primary) !important;
}
html[data-theme="dark"] input::placeholder { color: var(--text-muted) !important; }

/* ── Vol slider ──────────────────────────────────────── */
html[data-theme="dark"] .vol-slider::-webkit-slider-thumb {
  border-color: #0A0C0F !important;
}

/* ── Active bar (sounds page) ────────────────────────── */
html[data-theme="dark"] .active-bar {
  background: rgba(212, 165, 116, 0.10) !important;
}

/* ── Sleep timer ─────────────────────────────────────── */
html[data-theme="dark"] .sleep-timer {
  background: rgba(255, 255, 255, 0.05) !important;
}

/* ── Legal pages content blocks ──────────────────────── */
html[data-theme="dark"] .doc-content,
html[data-theme="dark"] .legal-block,
html[data-theme="dark"] .content-block {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
}
html[data-theme="dark"] th {
  background: rgba(212, 165, 116, 0.10) !important;
}
html[data-theme="dark"] td {
  border-color: rgba(255, 255, 255, 0.06) !important;
}
html[data-theme="dark"] tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.02) !important;
}

/* ── Scrollbar ───────────────────────────────────────── */
html[data-theme="dark"] ::-webkit-scrollbar { width: 5px; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg-base); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(212, 165, 116, 0.22);
  border-radius: 3px;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(212, 165, 116, 0.40);
}

/* ═══════════════════════════════════════════════════════
   SMOOTH THEME TRANSITION
   Applied only when switching — removed immediately after.
   Does NOT touch transforms/opacity/animation properties
   to avoid breaking any CSS/canvas animations.
   ═══════════════════════════════════════════════════════ */
html.theme-switching,
html.theme-switching * {
  transition:
    background-color 0.40s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    border-color     0.40s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow       0.40s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    color            0.40s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* Protect animations during switching */
html.theme-switching .blob,
html.theme-switching .sa-canvas-wrap,
html.theme-switching [style*="animation"],
html.theme-switching .reveal {
  transition: none !important;
}

/* ── Темная тема для Skeleton Loaders ────────────────── */
html[data-theme="dark"] .skeleton-card::after {
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.03) 50%, transparent 100%);
}
html[data-theme="dark"] .skeleton-box {
  background: rgba(255,255,255,0.05);
}