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

/* =========================================
   MOZA MORPH — GLOBAL DESIGN SYSTEM CLEAN
   Elegant black / white premium theme
   Dark + light ready using body[data-theme]
   ========================================= */

:root,
body[data-theme="dark"] {
  color-scheme: dark;
  --bg: #060606;
  --bg-2: #0d0d0d;
  --bg-soft: #111111;
  --card: rgba(18, 18, 18, 0.94);
  --card-soft: rgba(24, 24, 24, 0.94);
  --card-strong: rgba(10, 10, 10, 0.98);
  --panel: rgba(16, 16, 16, 0.96);
  --panel-soft: rgba(22, 22, 22, 0.96);
  --surface: #121212;
  --surface-soft: #181818;
  --surface-2: #202020;
  --text: #f8f8f6;
  --text-soft: #dededb;
  --muted: #aaa8a4;
  --muted-soft: #d0cfcc;
  --primary: #ffffff;
  --primary-soft: rgba(255, 255, 255, 0.08);
  --primary-strong: #f5f5f5;
  --outline: rgba(255, 255, 255, 0.12);
  --outline-strong: rgba(255, 255, 255, 0.2);
  --border: var(--outline);
  --shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
  --shadow-soft: 0 12px 28px rgba(0, 0, 0, 0.24);
  --shadow-card: 0 22px 50px rgba(0, 0, 0, 0.34);
  --button-bg: #ffffff;
  --button-text: #0c0c0c;
  --ghost-bg: transparent;
  --ghost-text: #ffffff;
  --radius-xs: 10px;
  --radius-sm: 14px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 28px;
  --transition-fast: 0.22s ease;
  --moza-page: 1120px;
  --moza-player: 920px;
  --moza-gap: 20px;
}

body[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f5f3;
  --bg-2: #eeeeeb;
  --bg-soft: #ededeb;
  --card: rgba(255, 255, 255, 0.94);
  --card-soft: rgba(250, 250, 248, 0.96);
  --card-strong: rgba(255, 255, 255, 0.98);
  --panel: rgba(255, 255, 255, 0.98);
  --panel-soft: rgba(246, 246, 244, 0.96);
  --surface: #ffffff;
  --surface-soft: #f1f1ef;
  --surface-2: #e8e8e5;
  --text: #101010;
  --text-soft: #343434;
  --muted: #666666;
  --muted-soft: #4b4b4b;
  --primary: #111111;
  --primary-soft: rgba(0, 0, 0, 0.05);
  --primary-strong: #000000;
  --outline: rgba(0, 0, 0, 0.1);
  --outline-strong: rgba(0, 0, 0, 0.18);
  --border: var(--outline);
  --shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
  --shadow-soft: 0 10px 24px rgba(0, 0, 0, 0.06);
  --shadow-card: 0 18px 36px rgba(0, 0, 0, 0.08);
  --button-bg: #111111;
  --button-text: #ffffff;
  --ghost-bg: transparent;
  --ghost-text: #111111;
}

* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; color-scheme: light dark; }
body {
  min-height: 100vh;
  margin: 0;
  font-family: "Inter", "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
  transition: background-color .24s ease, color .24s ease, border-color .24s ease, box-shadow .24s ease;
}
body::before, body::after, .page-glow { display: none !important; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
button, input, textarea, select { font: inherit; }
::selection { background: var(--primary); color: var(--button-text); }
.muted, #who, .eyebrow, .section-label, .section-eyebrow, footer p { color: var(--muted); }
h1, h2, h3, h4, h5, h6, .brand, .cod-title { color: var(--text); }
button, .btn, .btn-back, .formula-library-btn, .play-pause-btn, .timer-btn, .paypal-like {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border-radius: 14px;
  border: 1px solid var(--outline);
  background: var(--button-bg);
  color: var(--button-text);
  box-shadow: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  transition: transform var(--transition-fast), opacity var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
button:hover, .btn:hover, .btn-back:hover, .formula-library-btn:hover, .play-pause-btn:hover, .timer-btn:hover, .paypal-like:hover { transform: translateY(-1px); opacity: .9; }
.ghost, button.ghost, .btn.ghost, a.ghost { background: var(--ghost-bg); color: var(--ghost-text); border: 1px solid var(--outline); }
.ghost:hover { border-color: var(--outline-strong); background: var(--primary-soft); }
input, textarea, select { width: 100%; color: var(--text); background: var(--surface-soft); border: 1px solid var(--outline); border-radius: var(--radius-sm); outline: none; }
input::placeholder, textarea::placeholder { color: var(--muted); }
input:focus, textarea:focus, select:focus { border-color: var(--outline-strong); box-shadow: 0 0 0 4px var(--primary-soft); }
.card, .notice, .hero-header, .formula-hero, .page-hero, .mainboard, .formula-grid, .content-grid, .soundscape-controls, .player-panel, .section-wrapper, .playlist-section, .continue-section, .membership-status, .membership-affirmation, .membership-calendar-wrap, .timer-wrapper, .benefit-side, footer { background: var(--card); color: var(--text); border: 1px solid var(--outline); box-shadow: var(--shadow-soft); }
.theme-toggle-btn { position: fixed; top: 18px; right: 18px; z-index: 9999; width: 46px; height: 46px; min-height: 46px; padding: 0; border-radius: 999px; background: var(--card); color: var(--text); border: 1px solid var(--outline); box-shadow: var(--shadow-soft); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.theme-toggle-btn:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
@media (max-width: 640px) { .theme-toggle-btn { top: 12px; right: 12px; width: 42px; height: 42px; min-height: 42px; } }