/* ══════════════════════════════════════
   JingJing — noisli-style · zone-based colors
   Top: light-purple background / bold white text
   Bottom: white background / dark-gray text / deep-purple icons
   ══════════════════════════════════════ */

/* ═══ Self-hosted web fonts ═══
   Manrope = headings, Inter = body. Both SIL Open Font License 1.1
   (free for commercial use). License texts ship alongside the binaries in
   /fonts/. Self-hosted rather than Google Fonts CDN on purpose: the CDN is
   unreachable from mainland China, which would stall first paint for our
   core audience. font-display:swap keeps text visible during the download.
   ══════════════════════════════════════ */
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/manrope-400.woff2') format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/manrope-500.woff2') format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/manrope-600.woff2') format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/manrope-700.woff2') format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/manrope-800.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/inter-400.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/inter-500.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/inter-600.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/inter-700.woff2') format('woff2');}

:root{
  /* ═══ RestHush palette — Dark Navy + Lavender + Teal ═══ */
  --bg:#0B1020;             /* page / hero / mixer / nav background */
  --bg-2:#0D1226;           /* slightly lifted background for layering */
  --card:#141A2E;           /* primary card surface */
  --card-2:#1B2238;         /* secondary card / hover / input */
  /* Sound-card surfaces — solid lifted navy, above the page bg so cards
     "float" instead of blending in. Only .card uses these (FAQ/Mixer/Feature
     cards keep --card/--card-2). */
  --sc:#1A2342;             /* sound card — lifted navy/blue-gray */
  --sc-hover:#232E54;       /* sound card hover — brighter */
  --sc-on:#2C3A6E;          /* sound card active/selected — brightest */
  --sc-ico:#28335C;         /* sound card icon-circle bg */
  --line:rgba(255,255,255,0.08);   /* subtle border on dark */
  --line-strong:rgba(255,255,255,0.14);
  --text:#F5F7FF;           /* primary text / headings (white) */
  --text-2:#AEB6D0;         /* body / secondary text — readable blue-gray */
  --text-3:#828AB0;         /* muted text (still legible) */
  --title-2:#D9D6FF;        /* secondary heading — light lavender */
  --primary:#8B7CFF;        /* lavender brand highlight */
  --primary-soft:rgba(139,124,255,0.14);
  --primary-deep:#6F5BD6;   /* pressed / deeper lavender */
  --teal:#5EEAD4;           /* playing / audio activity */
  --teal-soft:rgba(94,234,212,0.16);
  --grad:linear-gradient(135deg,#8B7CFF 0%,#5EEAD4 100%);
  --danger:#F06A8A;
  --radius-xl:24px;
  --radius-lg:18px;
  --radius-md:14px;

  /* Legacy token names repointed at the new palette so every var()-based rule
     flips automatically. Do not re-introduce old light values. */
  --lav-top:var(--bg);
  --lav-nav:var(--bg);
  --ink:var(--text);
  --ink-soft:var(--text-2);
  --purple:var(--primary);
  --purple-deep:var(--primary-deep);
  --card-bg:var(--card);
  --card-hover:var(--card-2);
  --card-on:var(--card-2);

  /* Typography — Manrope (headings) + Inter (body).
     CJK falls back to system fonts because these subsets are latin-only:
     that keeps Chinese sharp with zero extra download weight. */
  --font-heading:'Manrope',-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
}

/* ═══ Theme presets — applied via <html data-theme="..."> ═══
   Midnight Lavender (lavender) is the default and lives in :root above.
   The other four only override the same CSS variables, so the whole site
   re-skins instantly with zero JS reflow. Light themes (lilac, sand) also
   get a "flip hard-coded white text/icons to dark" block at the end of
   this file so nothing becomes invisible on a pale background. */
html[data-theme="lilac"]{
  --bg:#f3eeff; --bg-2:#ece4ff; --card:#ffffff; --card-2:#f1ebff;
  --sc:#ffffff; --sc-hover:#f3edff; --sc-on:#eadcff; --sc-ico:#efe7ff;
  --line:rgba(60,40,90,0.12); --line-strong:rgba(60,40,90,0.20);
  --text:#241a3d; --text-2:#5b5276; --text-3:#837aa0;
  --title-2:#4a3a78; --primary:#8a5cf0; --primary-soft:rgba(138,92,240,0.16); --primary-deep:#6f45c8;
  --teal:#8a5cf0; --teal-soft:rgba(138,92,240,0.14);
  --grad:linear-gradient(135deg,#8a5cf0 0%,#b794f6 100%);
  --lav-top:var(--bg); --lav-nav:var(--bg); --ink:var(--text); --ink-soft:var(--text-2);
  --purple:var(--primary); --purple-deep:var(--primary-deep); --card-bg:var(--card);
  --card-hover:var(--card-2); --card-on:var(--card-2);
}
html[data-theme="teal"]{
  --bg:#e8f8f6; --bg-2:#d8f0ec; --card:#ffffff; --card-2:#f1f9f8;
  --sc:#ffffff; --sc-hover:#f0faf9; --sc-on:#dff5f2; --sc-ico:#e6f6f4;
  --line:rgba(20,80,75,0.12); --line-strong:rgba(20,80,75,0.20);
  --text:#0a2c29; --text-2:#3c6b66; --text-3:#5d8f8a;
  --title-2:#0d4a44; --primary:#2DD4BF; --primary-soft:rgba(45,212,191,0.18); --primary-deep:#1FA593;
  --teal:#2DD4BF; --teal-soft:rgba(45,212,191,0.18);
  --grad:linear-gradient(135deg,#2DD4BF 0%,#5EEAD4 100%);
  --lav-top:var(--bg); --lav-nav:var(--bg); --ink:var(--text); --ink-soft:var(--text-2);
  --purple:var(--primary); --purple-deep:var(--primary-deep); --card-bg:var(--card);
  --card-hover:var(--card-2); --card-on:var(--card-2);
}
html[data-theme="sand"]{
  --bg:#fbf6ef; --bg-2:#f5ecdf; --card:#ffffff; --card-2:#f7efe2;
  --sc:#ffffff; --sc-hover:#faf2e6; --sc-on:#f3e6d2; --sc-ico:#f6ecdd;
  --line:rgba(90,70,40,0.12); --line-strong:rgba(90,70,40,0.20);
  --text:#2e261a; --text-2:#6b5d47; --text-3:#937f5f;
  --title-2:#7a5a2e; --primary:#E0924F; --primary-soft:rgba(224,146,79,0.16); --primary-deep:#C9762F;
  --teal:#E0924F; --teal-soft:rgba(224,146,79,0.14);
  --grad:linear-gradient(135deg,#E0924F 0%,#F0B873 100%);
  --lav-top:var(--bg); --lav-nav:var(--bg); --ink:var(--text); --ink-soft:var(--text-2);
  --purple:var(--primary); --purple-deep:var(--primary-deep); --card-bg:var(--card);
  --card-hover:var(--card-2); --card-on:var(--card-2);
}
html[data-theme="forest"]{
  --bg:#eef7f0; --bg-2:#dff0e4; --card:#ffffff; --card-2:#f1f8f3;
  --sc:#ffffff; --sc-hover:#f0f8f2; --sc-on:#dff5e4; --sc-ico:#e6f6ea;
  --line:rgba(30,80,45,0.12); --line-strong:rgba(30,80,45,0.20);
  --text:#122b1b; --text-2:#4a6b55; --text-3:#6e9179;
  --title-2:#1a4a2d; --primary:#4ADE80; --primary-soft:rgba(74,222,128,0.18); --primary-deep:#34C06A;
  --teal:#4ADE80; --teal-soft:rgba(74,222,128,0.18);
  --grad:linear-gradient(135deg,#4ADE80 0%,#86EFAC 100%);
  --lav-top:var(--bg); --lav-nav:var(--bg); --ink:var(--text); --ink-soft:var(--text-2);
  --purple:var(--primary); --purple-deep:var(--primary-deep); --card-bg:var(--card);
  --card-hover:var(--card-2); --card-on:var(--card-2);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{font-size:16px;-webkit-text-size-adjust:100%;}
body{
  font-family:var(--font-body);
  background:#fff; color:var(--ink); min-height:100vh;
  -webkit-font-smoothing:antialiased; line-height:1.6;
}
h1,h2,h3,h4,h5,h6,.nav-brand{ font-family:var(--font-heading); }


/* ═══ Top light-purple zone ═══ */
.top-zone{ background:var(--lav-top); }

.navbar{
  display:flex; justify-content:flex-start; align-items:center; gap:30px;
  padding:14px 36px;
}
.nav-brand{
  cursor:pointer; user-select:none; display:flex; align-items:center;
  padding:6px 10px; border-radius:12px; transition:background .15s;
  text-decoration:none; color:var(--text);
}
.nav-brand:hover{ background:rgba(255,255,255,0.14); }
.nav-brand.active{ background:rgba(255,255,255,0.22); }
.nav-logo-text{
  font-family:var(--font-heading); font-size:18px; font-weight:800;
  letter-spacing:-0.02em; color:var(--text); white-space:nowrap;
}
.nav-logo-mark{
  font-family:var(--font-heading); font-size:22px; font-weight:800;
  letter-spacing:-0.02em; color:var(--text); white-space:nowrap;
}
.logo{ height:34px; width:auto; display:block; }
.navbar .logo{ filter: brightness(0) invert(1); }
.nav-menu{
  display:flex; align-items:center; gap:16px; list-style:none; margin:0; padding:0;
  flex:1; position:relative; z-index:10;
}
.nav-item{
  color:#fff; font-size:16.5px; font-weight:700; cursor:pointer; letter-spacing:.3px;
  padding:10px 22px; border-radius:999px;
  text-decoration:none; display:inline-flex; align-items:center;
  transition:background .15s, color .15s;
}
.nav-right{
  margin-left:auto;
  display:flex; align-items:center; gap:10px;
  list-style:none;
}
/* Hamburger toggle — hidden on desktop, shown on mobile (see @media max-width:820px) */
.nav-toggle{ display:none; }
.nav-item:hover{ background:rgba(255,255,255,0.18); }
.nav-item.active{ background:#fff; color:var(--purple-deep); }

.hero{ text-align:center; padding:60px 30px 72px; min-height:240px; display:flex; flex-direction:column; justify-content:center; align-items:center; position:relative; overflow:hidden; }
.hero-default, .hero-sound{ position:relative; z-index:2; }
.hero h1{
  font-size:36px; font-weight:800; color:#fff;
  margin-bottom:14px; letter-spacing:.4px;
}
.hero-sub{
  font-size:19px; font-weight:800; color:#fff;
  margin-bottom:12px; letter-spacing:.3px;
}
.hero p{
  font-size:14.5px; font-weight:600; color:#fff;
  max-width:680px; margin:0 auto; opacity:0.92;
}

/* ── Hero audio decoration (subtle, non-interactive, behind content) ──
   Adds a faint sense of "sound / soundscape" without touching the
   background color, layout, typography or CTA. Unified across all pages;
   [data-hero] on .hero only nudges intensity / which element leads. */
.hero-deco{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }

/* faint full-width sound waveform along the hero base */
.hero-wave{ position:absolute; left:0; right:0; bottom:8px; width:100%; height:84px; opacity:.10; }
.hero-wave path{ stroke:var(--primary); stroke-width:2; fill:none; stroke-linecap:round; }
.hero-wave path:nth-child(2){ opacity:.6; }

/* small slow equalizer accent (bottom-left) */
.hero-eq{ position:absolute; left:7%; bottom:30px; display:flex; align-items:flex-end; gap:5px; height:40px; opacity:.22; }
.hero-eq i{ display:block; width:4px; height:100%; border-radius:3px; background:linear-gradient(180deg,var(--teal),var(--primary)); transform-origin:bottom center; animation:heroEq 1.9s ease-in-out infinite; }
.hero-eq i:nth-child(1){animation-duration:1.7s}
.hero-eq i:nth-child(2){animation-duration:2.2s}
.hero-eq i:nth-child(3){animation-duration:1.5s}
.hero-eq i:nth-child(4){animation-duration:2.0s}
.hero-eq i:nth-child(5){animation-duration:2.4s}
.hero-eq i:nth-child(6){animation-duration:1.6s}
.hero-eq i:nth-child(7){animation-duration:2.1s}
.hero-eq i:nth-child(8){animation-duration:1.8s}
.hero-eq i:nth-child(9){animation-duration:2.3s}
@keyframes heroEq{ 0%,100%{transform:scaleY(.32)} 50%{transform:scaleY(1)} }

/* concentric sound ripples (top-right), very faint */
.hero-ripple{ position:absolute; right:8%; top:30%; width:1px; height:1px; }
.hero-ripple span{ position:absolute; left:0; top:0; width:34px; height:34px; margin:-17px 0 0 -17px; border:1.5px solid var(--teal); border-radius:50%; opacity:0; animation:heroRipple 6.5s ease-out infinite; }
.hero-ripple span:nth-child(2){animation-delay:2.2s}
.hero-ripple span:nth-child(3){animation-delay:4.4s}
@keyframes heroRipple{ 0%{transform:scale(.25); opacity:.30} 70%{opacity:0} 100%{transform:scale(3.4); opacity:0} }

/* ── Per-theme nudge (same elements, different emphasis) ── */
/* Sleep / Relax — slower, softer, ripple-led */
.hero[data-hero="sleep"] .hero-eq, .hero[data-hero="relax"] .hero-eq{ opacity:.15; }
.hero[data-hero="sleep"] .hero-wave, .hero[data-hero="relax"] .hero-wave{ opacity:.085; }
.hero[data-hero="sleep"] .hero-ripple span, .hero[data-hero="relax"] .hero-ripple span{ border-color:var(--primary); opacity:.42; }
/* Focus / Work / Study — crisper, regular equalizer, fainter ripples */
.hero[data-hero="focus"] .hero-eq{ opacity:.30; }
.hero[data-hero="focus"] .hero-wave{ opacity:.12; }
.hero[data-hero="focus"] .hero-ripple{ opacity:0; }
/* Nature / Rain — water-ripple emphasis, slower */
.hero[data-hero="nature"] .hero-ripple span{ animation-duration:7.5s; opacity:.42; }
.hero[data-hero="nature"] .hero-eq{ opacity:.14; }
/* Sound detail — uniform, slow spectrum */
.hero[data-hero="sound"] .hero-wave{ opacity:.08; }
.hero[data-hero="sound"] .hero-ripple{ opacity:0; }
.hero[data-hero="sound"] .hero-eq i{ animation-name:heroEqUniform; animation-duration:2.6s; }
@keyframes heroEqUniform{ 0%,100%{transform:scaleY(.62)} 50%{transform:scaleY(.82)} }

@media (prefers-reduced-motion:reduce){
  .hero-eq i{ animation:none; transform:scaleY(.55); }
  .hero-ripple span{ animation:none; opacity:.22; }
}


/* ═══ Bottom white zone ═══ */
.content{
  max-width:1100px; margin:0 auto; padding:48px 30px 50px;
}
.view{display:none;}
.view.active{display:block;}
.placeholder-page{max-width:760px; margin:0 auto; padding:90px 24px 130px; text-align:center;}
.placeholder-page h2{font-size:34px; font-weight:800; color:#3a2d52; margin:0 0 14px; letter-spacing:.3px;}
.placeholder-page p{font-size:16px; color:#6b5f86; line-height:1.65;}

/* Static company / legal pages (About / Privacy / Terms / Contact) */
.legal-page{max-width:780px; margin:0 auto; padding:40px 24px 120px;}
.legal-page h1{font-size:38px; font-weight:800; color:#3a2d52; margin:18px 0 14px; letter-spacing:.3px;}
.legal-page .lead{font-size:18px; color:#4a3d66; line-height:1.7; margin:0 0 28px;}
.legal-page h2{font-size:23px; font-weight:800; color:#3a2d52; margin:34px 0 10px;}
.legal-page p{font-size:16.5px; color:#5a4f6e; line-height:1.85; margin:0 0 16px;}
.legal-page a{color:var(--purple); text-decoration:none;}
.legal-page a:hover{text-decoration:underline;}
.legal-page .updated{margin-top:36px; font-size:13.5px; color:#9a8fb0; border-top:1px solid var(--line); padding-top:16px;}

/* Scenario pages (Sleep/Relax/Focus/ASMR/Noise) */
.scenario{max-width:1180px; margin:0 auto; padding:8px 24px 120px;}
.scenario-intro{ text-align:center; color:#6b5f86; font-size:16px; margin:6px 0 26px; }

/* Sound detail / type-filter route */
.sound-route{max-width:1180px; margin:0 auto; padding:8px 24px 120px;}
.route-title{ font-size:30px; font-weight:800; color:#3a2d52; margin:26px 0 6px; }
.route-sub{ color:#6b5f86; font-size:15px; margin:0 0 22px; }
.hero-sound{ text-align:center; padding:0; }
.hero-sound h2{ font-size:32px; font-weight:800; color:#fff; margin:0 0 8px; }
.hero-sound .sd-desc{ color:#fff; font-size:16px; max-width:620px; margin:0 auto 18px; line-height:1.6; opacity:0.95; }
.hero-sound .sd-add{ display:inline-block; padding:11px 26px; border:none; border-radius:999px; background:var(--purple); color:#fff; font-weight:700; font-size:15px; cursor:pointer; transition:transform .12s, box-shadow .12s; }
.hero-sound .sd-add:hover{ transform:translateY(-1px); box-shadow:0 8px 20px rgba(0,0,0,.18); }
.hero-sound .sd-meta{ display:flex; flex-direction:column; align-items:center; gap:12px; justify-content:center; margin:22px auto 6px; max-width:720px; }
.hero-sound .sd-chips{ width:100%; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:7px; }
.hero-sound .sd-chips-label{ font-size:12px; font-weight:700; color:#fff; text-transform:uppercase; letter-spacing:.5px; margin-right:4px; opacity:0.92; }
.hero-sound .chip{ font-size:13px; padding:5px 12px; border-radius:999px; background:#fff; color:#5a4b7a; }
.card-details{ display:block; text-align:center; margin:2px 0 8px; font-size:12.5px; font-weight:700; color:var(--title-2); text-decoration:none; opacity:1; transition:transform .18s, color .18s; }
.card-details:hover{ opacity:1; text-decoration:none; transform:translateY(-1px); }
#view-library.active{
  display:grid;
  grid-template-columns:1fr 300px;
  grid-template-rows:auto auto 1fr;
  gap:0 34px;
  align-items:start;
}
#view-library > .sd-breadcrumb{grid-column:1 / -1; grid-row:1; padding-top:18px; margin-bottom:0;}
#view-library > .cat-pills{grid-column:1 / -1; grid-row:2;}
#view-library > .library-main{grid-column:1; grid-row:3; min-width:0;}
#view-library > #librarySide{grid-column:2; grid-row:3;}
/* Purpose pages (/sleep /work /study /focus /relax) reuse the same two-column
   left-sounds / right-mixer layout as /sounds. */
#view-purpose.active{
  display:grid;
  grid-template-columns:1fr 300px;
  grid-template-rows:auto 1fr;
  gap:0 34px;
  align-items:start;
}
#view-purpose > .purpose-header{grid-column:1 / -1; grid-row:1;}
#view-purpose > .purpose-main{grid-column:1; grid-row:2; min-width:0;}
#view-purpose > #purposeSide{grid-column:2; grid-row:2; justify-content:flex-start; height:auto; gap:0; align-self:start; position:sticky; top:20px;}
.mobile-purpose-mixer{display:none;}
.sounds-section{}
/* Inside the purpose left column, let content blocks span full width (not centered) */
#view-purpose > .purpose-main > .sd-block{max-width:none; margin:0 0 30px;}
#view-purpose > .purpose-header > .route-title,
#view-purpose > .purpose-header > .route-sub,
#view-purpose > .purpose-header > .sd-breadcrumb{margin-top:0;}

/* ── Top category filter (Spotify-style chips) ── */
.filters{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
  margin-bottom:28px;
}
.chip{
  background:#fff; border:1.5px solid var(--line);
  color:var(--ink); border-radius:999px;
  padding:8px 20px; font-size:13.5px; font-weight:800;
  cursor:pointer; transition:all .15s; white-space:nowrap;
}
.chip:hover{border-color:var(--purple); color:var(--purple);}
.chip.active{background:var(--purple); border-color:var(--purple); color:#fff;}

/* ── Sound cards (on white) ── */
.sounds{
  display:grid; grid-template-columns:repeat(4, minmax(0,180px));
  gap:18px; align-content:start; justify-content:center;
}
.card{
  border-radius:var(--radius-xl); padding:30px 18px 24px;
  background:var(--sc);
  display:flex; flex-direction:column; align-items:center; gap:13px;
  cursor:pointer; transition:background .2s, transform .15s, border-color .2s, box-shadow .2s;
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:0 8px 22px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.05);
  position:relative; user-select:none;
}
.card:hover{
  background:var(--sc-hover);
  transform:translateY(-3px);
  border-color:rgba(255,255,255,0.20);
  box-shadow:0 12px 30px rgba(0,0,0,0.46), inset 0 1px 0 rgba(255,255,255,0.07);
}
.card.on{
  background:var(--sc-on);
  border:1px solid var(--primary);
  box-shadow:0 8px 24px rgba(0,0,0,0.42), 0 0 0 1px rgba(139,124,255,0.30), 0 6px 22px rgba(139,124,255,0.18);
}
/* Real recording failed to load → fell back to synth: flag it so the user knows. */
.card.track-fallback{ outline:2px solid #e5484d; outline-offset:2px; }

.emoji-icon{
  width:58px; height:58px; border-radius:50%;
  background:var(--sc-ico);
  display:flex; align-items:center; justify-content:center;
  font-size:30px; line-height:1;
  transition:transform .2s, background .2s, box-shadow .2s;
  position:relative;
  isolation:isolate;
}
.card.on .emoji-icon{
  transform:scale(1.08);
  background:var(--purple);
  box-shadow:0 4px 16px color-mix(in srgb, var(--primary) 38%, transparent);
}
/* Spinning glow ring behind the icon when the sound is playing */
.card.on .emoji-icon::before{
  content:'';
  position:absolute;
  inset:-5px;
  border-radius:50%;
  background:conic-gradient(from 0deg, var(--primary), var(--teal), var(--primary), var(--teal), var(--primary));
  animation:icGlow 2.4s linear infinite;
  z-index:-1;
  opacity:.85;
}
/* Ripple rings on top of the icon when playing */
.ic-ripple{
  position:absolute; inset:0; border-radius:50%;
  border:2px solid color-mix(in srgb, var(--primary) 45%, transparent);
  opacity:0; transform:scale(1);
  pointer-events:none; z-index:1;
}
.card.on .ic-ripple{
  animation:icRipple 1.8s ease-out infinite;
}
.card.on .ic-ripple:nth-child(2){
  animation-delay:.9s;
}
.card.on .emoji-icon svg{ position:relative; z-index:2; }
.emoji-icon svg{ width:30px; height:30px; color:var(--purple); }
.card.on .emoji-icon svg{ color:#fff; }

@keyframes icGlow{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}
@keyframes icRipple{
  0%{ transform:scale(1); opacity:.55; }
  70%{ opacity:0; }
  100%{ transform:scale(1.7); opacity:0; }
}

.name{
  font-size:15px; font-weight:800; color:var(--text);
  width:100%; text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.card:not(.on) .name{color:var(--text-2);}

/* Small category tag under the name — only shown in the "All" library view
   (toggled via #libraryGrid.show-cat-tags). Hidden inside a single-category filter. */
.cat-tag{
  display:none;
  font-size:11px; font-weight:700; letter-spacing:.3px;
  color:var(--purple); background:color-mix(in srgb, var(--primary) 10%, transparent);
  border-radius:999px; padding:2px 10px; line-height:1.4;
}
.card.on .cat-tag{ background:rgba(255,255,255,0.25); color:#fff; }
#libraryGrid.show-cat-tags .cat-tag{ display:inline-block; }

.toggle{
  background:transparent; border:2px solid var(--purple);
  color:var(--purple); border-radius:999px;
  padding:5px 20px; font-size:12.5px; font-weight:800;
  cursor:pointer; transition:all .2s; position:relative;
}
.toggle:hover{background:var(--primary-soft);}
.card.on .toggle{
  background:var(--purple); border-color:var(--purple); color:#fff;
  box-shadow:0 4px 14px color-mix(in srgb, var(--primary) 42%, transparent);
  animation:togglePulse 2s ease-out infinite;
}
@keyframes togglePulse{
  0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--primary) 45%, transparent); }
  70%{ box-shadow:0 0 0 9px color-mix(in srgb, var(--primary) 0%, transparent); }
  100%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--primary) 0%, transparent); }
}

/* Slider (white zone) */
.card input[type=range]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:5px; border-radius:999px; outline:none; cursor:pointer;
  background:color-mix(in srgb, var(--primary) 34%, transparent);
}
.card input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:16px; height:16px;
  border-radius:50%; background:var(--purple); box-shadow:0 1px 6px rgba(0,0,0,0.15);
  transition:transform .12s;
}
.card input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2);}
.card input[type=range]::-moz-range-thumb{
  width:16px; height:16px; border-radius:50%; background:var(--purple); border:none;
}

/* ── Sidebar panels (on white) ── */
.side{display:flex; flex-direction:column; justify-content:space-between; height:100%;}
.panel{
  border-radius:var(--radius-lg); padding:24px;
  background:var(--card-bg);
}
.side > .panel{ margin-bottom:16px; }
.side > .panel:last-child{ margin-bottom:0; }
h2{ font-size:16px; font-weight:800; color:var(--ink); margin-bottom:16px; }

/* Now Playing panel */
.now-playing .panel-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.now-playing .panel-head h2{ margin-bottom:0; }
.now-master-vol{
  display:flex; align-items:center; gap:10px;
  margin-top:12px; padding-top:12px;
  border-top:1px solid rgba(107,95,134,0.12);
}
.now-master-label{ font-size:12px; color:#6b5f86; font-weight:700; white-space:nowrap; }
.now-master-vol input{ flex:1; min-width:0; accent-color:var(--purple); }
.now-master-pct{ font-size:12px; color:var(--purple); font-weight:800; min-width:32px; text-align:right; font-variant-numeric:tabular-nums; }
.now-close-all{
  flex-shrink:0; background:#fff; border:1.5px solid var(--purple);
  color:var(--purple); border-radius:999px; padding:5px 12px;
  font-size:11.5px; font-weight:800; cursor:pointer; transition:all .15s;
}
.now-close-all:hover{ background:var(--purple); color:#fff; }
.now-close-all:active{ transform:scale(.96); }
.now-list{ display:flex; flex-direction:column; gap:8px; }
.now-empty{ color:var(--ink-soft); font-size:13px; font-weight:600; text-align:center; padding:10px 0 4px; }
.now-item{
  display:flex; align-items:center; gap:8px;
  padding:7px 10px; border-radius:var(--radius-md);
  background:#f5f0ff; font-size:13px;
}
.now-icon{ font-size:16px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.now-icon svg{ width:18px; height:18px; color:var(--purple); }
.now-icon img{ width:18px; height:18px; object-fit:contain; }
.now-name{ flex:1; font-weight:700; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.now-pct{ font-weight:800; color:var(--purple); font-variant-numeric:tabular-nums; min-width:36px; text-align:right; }
.now-vol{ width:72px; height:4px; margin:0; accent-color:var(--purple); cursor:pointer; }

/* Favorites header + question-mark hint */
.preset-head{ display:flex; align-items:center; gap:8px; margin-bottom:16px; }
.preset-head h2{ margin-bottom:0; }
.help{ position:relative; display:inline-flex; }
.help-btn{
  width:20px; height:20px; border-radius:50%; border:none; padding:0;
  background:var(--purple); color:#fff; font-size:12px; font-weight:800;
  line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:transform .12s, background .12s;
}
.help-btn:hover{ transform:scale(1.12); background:var(--purple-deep); }
.help .tip{
  display:none; position:absolute; top:30px; left:0; z-index:60;
  width:266px; padding:13px 15px; border-radius:14px;
  background:var(--card-2); color:var(--text); font-size:12.5px; line-height:1.65;
  font-weight:500; text-align:left; white-space:normal;
  box-shadow:0 12px 30px rgba(0,0,0,.28);
}
.help .tip strong{ font-weight:800; }
.help:hover .tip, .help.help-open .tip{ display:block; }

.preset-add{display:flex; gap:8px; margin-bottom:14px;}
.preset-add input{
  flex:1; min-width:0;
  border-radius:var(--radius-md); border:1.5px solid var(--line);
  padding:10px 12px; font-size:13px; color:var(--ink);
  background:var(--card); font-weight:500;
}
.preset-add input::placeholder{color:var(--ink-soft);}
.preset-add input:focus{outline:none; border-color:var(--primary);}
.preset-add button{
  background:var(--primary); color:#fff; border:none;
  border-radius:var(--radius-md); padding:10px 18px;
  font-size:13px; font-weight:800; cursor:pointer; transition:opacity .15s, background .15s;
}
.preset-add button:hover{opacity:0.88;}
.preset-add button:disabled, .preset-add button.disabled{
  opacity:0.45; cursor:not-allowed; background:var(--text-3);
}

#presetList{list-style:none;}
#presetList li{
  display:flex; justify-content:space-between; align-items:center; gap:6px;
  font-size:13.5px; padding:11px 14px; margin-bottom:8px;
  border-radius:var(--radius-md); background:#fff;
  border:1px solid var(--line);
  color:var(--ink); font-weight:700; transition:background .15s, border-color .15s;
}
#presetList li:hover{background:var(--card-hover);}
#presetList li.active{
  background:var(--card-bg); border-color:var(--purple);
  box-shadow:0 4px 14px rgba(138,92,240,.12);
}
#presetList .load{cursor:pointer; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#presetList .load:hover{color:var(--purple);}
#presetList li.active .load{color:var(--purple);}
#presetList .stop{
  cursor:pointer; color:#fff; background:var(--purple); border-radius:999px;
  font-size:11px; font-weight:800; padding:4px 10px; white-space:nowrap;
  transition:background .12s;
}
#presetList .stop:hover{background:var(--purple-deep);}
#presetList .del{
  cursor:pointer; color:var(--ink-soft); font-size:16px;
  padding:0 2px; transition:color .12s;
}
#presetList .del:hover{color:#e05577;}

.timer-row{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;}
.timer-inputs{display:flex; align-items:center; gap:8px;}
.timer-actions{display:flex; align-items:center; gap:8px;}
.timer-row input{
  width:52px; border-radius:var(--radius-md);
  border:1.5px solid var(--line); padding:10px 4px;
  font-size:14px; color:var(--ink); text-align:center; background:#fff; font-weight:700;
  -moz-appearance:textfield;
}
.timer-row input::-webkit-outer-spin-button,
.timer-row input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.timer-row input:focus{outline:none; border-color:var(--purple);}
.timer-row span{font-size:13px; color:var(--ink-soft); white-space:nowrap; font-weight:600;}
.timer-row button{
  background:var(--purple-deep); color:#fff; border:none;
  border-radius:var(--radius-md); padding:10px 18px;
  font-size:13px; font-weight:800; cursor:pointer; transition:opacity .15s;
}
.timer-row button:hover{opacity:0.88;}
.timer-row button.ghost{
  background:#fff; color:var(--purple-deep); border:1.5px solid var(--line);
}
.timer-row button.ghost:hover{background:var(--card-hover); opacity:1;}
.timer-status{
  font-size:13px; color:var(--ink-soft); margin-top:12px;
  font-variant-numeric:tabular-nums; font-weight:600;
}
.pro-pill{
  display:inline-flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:800; letter-spacing:0.4px; text-transform:uppercase;
  padding:3px 7px; border-radius:999px; vertical-align:middle; margin-left:6px;
  background:var(--primary); color:#fff;
}
.timer-row input:disabled{
  background:var(--card-hover); color:var(--purple-deep);
  -webkit-text-fill-color:var(--purple-deep); opacity:1; cursor:default;
}
#timerBtn:disabled{
  background:#d6cdec; color:#fff; opacity:1; cursor:not-allowed;
}

.note{
  max-width:1100px; margin:0 auto 40px; padding:0 30px;
  font-size:11.5px; color:var(--ink-soft); line-height:1.7; font-weight:500;
}

/* ═══ Common view title ═══ */
.view-title{
  font-size:26px; font-weight:800; color:var(--ink); margin:4px 0 6px;
}
.view-desc{
  font-size:14px; color:var(--ink-soft); margin:0 0 28px; font-weight:600;
}

/* ═══ Profile ═══ */
.profile-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:24px;
}
.profile-grid .panel{ background:#fff; border:1.5px solid var(--line); border-radius:var(--radius-lg); padding:24px; }
.profile-grid .panel h3{ font-size:17px; font-weight:800; color:var(--ink); margin:0 0 16px; }
.about-text{ font-size:13.5px; color:var(--ink-soft); line-height:1.7; font-weight:500; margin:0 0 12px; }
.preset-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.preset-list li{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--card-hover); border-radius:var(--radius-md); padding:10px 14px;
}
.preset-list .load{ font-size:14px; font-weight:700; color:var(--ink); cursor:pointer; }
.preset-list .load:hover{ color:var(--purple-deep); }
.preset-list .del{ color:#c0392b; font-weight:800; cursor:pointer; padding:0 4px; }
.preset-list .del:hover{ opacity:.7; }
.preset-empty{ font-size:13px; color:var(--ink-soft); font-weight:600; margin:6px 0 0; }
.empty-hint{ font-size:13px; color:var(--ink-soft); font-weight:600; margin:6px 0 0; }

/* ═══ Why Choose RestHush Sound Mixer? (homepage 2x3 grid) ═══ */
.why-choose{
  padding:60px 0 20px;
}
.why-grid{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:22px;
}
.why-card{
  background:#fff; border:1.5px solid var(--line); border-radius:var(--radius-lg);
  padding:24px 22px;
  transition:transform .15s, box-shadow .15s, border-color .15s;
}
.why-card:hover{ transform:translateY(-2px); border-color:#d8c8ff; box-shadow:0 8px 20px rgba(138,92,240,.10); }
.why-card h4{
  font-size:16px; font-weight:800; color:var(--ink);
  margin:0 0 10px; line-height:1.35;
}
.why-ic{ font-size:20px; margin-right:7px; vertical-align:-2px; }
.why-ic svg{ vertical-align:-4px; }
.why-card p{
  font-size:13.5px; color:var(--ink-soft);
  line-height:1.7; margin:0; font-weight:500;
}

/* ═══ Home: Recently Post + FAQ ═══ */
.home-recent-posts{ padding:60px 0 20px; }
.home-posts-grid{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:22px;
}
.home-post-card{
  background:#fff; border:1.5px solid var(--line); border-radius:var(--radius-lg);
  cursor:pointer; transition:all .16s ease; display:flex; flex-direction:column;
  overflow:hidden;
}
.home-post-card:hover{ border-color:var(--purple); transform:translateY(-3px); box-shadow:0 12px 30px rgba(138,92,240,0.12); }
.home-post-thumb{ aspect-ratio:16/10; overflow:hidden; background:var(--card-hover); }
.home-post-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s ease; }
.home-post-card:hover .home-post-thumb img{ transform:scale(1.04); }
.home-post-body{ padding:20px; display:flex; flex-direction:column; flex:1; }
.home-post-meta{ margin-bottom:10px; }
.home-post-tag{
  background:#fff; color:var(--purple-deep); border:1.5px solid var(--line);
  border-radius:999px; padding:3px 12px; font-size:12px; font-weight:800;
}
.home-post-title{
  font-size:16px; font-weight:800; color:var(--ink); margin:0 0 10px;
  line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.home-post-excerpt{
  font-size:13px; color:var(--ink-soft); line-height:1.65; margin:0 0 14px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; flex:1;
}
.home-post-foot{
  display:flex; align-items:center; justify-content:space-between;
  font-size:12px; font-weight:700; margin-top:auto;
}
.home-post-date{ color:var(--ink-soft); }
.home-post-more{ color:var(--purple); }
.home-post-card:hover .home-post-more{ text-decoration:underline; }

.home-faq{ padding:40px 0 60px; }
.faq-list{ display:flex; flex-direction:column; gap:12px; }
.faq-item{
  background:#fff; border:1.5px solid var(--line); border-radius:var(--radius-md);
  overflow:hidden; transition:border-color .15s, box-shadow .15s;
}
.faq-item.open{ border-color:#d8c8ff; box-shadow:0 8px 20px rgba(138,92,240,.08); }
.faq-question{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 22px; background:transparent; border:none; cursor:pointer; text-align:left;
  font-size:15px; font-weight:800; color:var(--ink);
}
.faq-icon{
  width:24px; height:24px; border-radius:50%; background:var(--card-bg); color:var(--purple-deep);
  display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:400;
  flex:0 0 auto; transition:transform .2s;
}
.faq-item.open .faq-icon{ transform:rotate(45deg); }
.faq-answer{ border-top:1px solid var(--line); }
.faq-answer[hidden]{ display:none; }
.faq-answer p{
  padding:16px 22px; margin:0; font-size:13.5px; color:var(--ink-soft);
  line-height:1.7; font-weight:500;
}

@media (max-width:960px){
  .why-grid{ grid-template-columns:repeat(2, 1fr); }
  .home-posts-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:600px){
  .why-grid{ grid-template-columns:1fr; }
  .why-choose{ padding:40px 0 10px; }
  .hero{ padding:38px 18px 48px; min-height:auto; }
  .hero h1{ font-size:23px; }
  .hero-sub{ font-size:15px; }
  .hero p{ font-size:13px; }
  /* On phones, keep only the faint waveform — hide side accents to avoid clutter / horizontal scroll */
  .hero-eq, .hero-ripple{ display:none; }
  .hero-wave{ height:60px; bottom:10px; opacity:.09; }
  .content{ padding:34px 18px 40px; }
  .scenario,.sound-route,.route-page,.purpose-header{ padding-left:18px; padding-right:18px; }
  .sounds, #featureGrid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; justify-content:stretch; }
  .card{ padding:18px 10px 14px; gap:10px; }
  .name{ font-size:13px; }
  .emoji-icon{ width:46px; height:46px; font-size:22px; }
  .card.on .emoji-icon::before{ inset:-3px; }
  .ic-ripple{ border-width:1.5px; }
  .emoji-icon svg{ width:24px; height:24px; }
  .toggle{ padding:4px 14px; font-size:11px; }
  .card-details{ font-size:11px; }
  .fav-heart{ width:26px; height:26px; font-size:14px; top:6px; right:6px; }
  .section-head h2{ font-size:20px; }
  .section-head p{ font-size:12.5px; }
  .home-posts-grid{ grid-template-columns:1fr; gap:16px; }
  .home-recent-posts{ padding:40px 0 10px; }
  .home-faq{ padding:30px 0 40px; }
  .home-post-body{ padding:16px; }
  .home-post-title{ font-size:15px; }
  .home-post-excerpt{ -webkit-line-clamp:2; }
  .faq-question{ padding:14px 16px; font-size:14px; gap:12px; }
  .faq-answer p{ padding:14px 16px; font-size:13px; }
}

/* ═══ Home: popular ASMR sounds (mix) ═══ */
.feature-mixer{
  display:grid; grid-template-columns:1fr 300px; gap:34px;
  margin-bottom:6px;
}
.section-head{ margin-bottom:20px; }
.section-head h2{ font-size:22px; font-weight:800; color:var(--ink); margin-bottom:6px; }
.section-head p{ font-size:13.5px; color:var(--ink-soft); font-weight:600; }
#featureGrid{ grid-template-columns:repeat(4, minmax(0,180px)); justify-content:start; }
.more-wrap{ text-align:center; margin:26px 0 4px; }
.more-btn{
  background:var(--primary); color:#fff; border:none;
  border-radius:999px; padding:12px 40px; font-size:14px; font-weight:800; cursor:pointer;
  transition:background .15s, transform .12s;
}
.more-btn:hover{ background:var(--primary-deep); transform:translateY(-1px); }

/* ═══ Scene categories (home) ═══ */
.scene-categories{
  margin-top:50px;
  padding-bottom:30px;
}
.scene-cats{
  display:flex; flex-wrap:wrap; justify-content:start; gap:22px;
}
.scene-cat{
  flex:1 1 260px; max-width:320px;
  background:var(--card-bg); border-radius:var(--radius-xl);
  padding:28px 22px; text-align:center;
  transition:transform .2s, box-shadow .2s;
}
.scene-cat:hover{ transform:translateY(-4px); box-shadow:0 12px 36px rgba(138,92,240,.12); }
.scene-icon{ display:flex; justify-content:center; align-items:center; font-size:42px; line-height:1; margin-bottom:14px; }
.scene-cat h3{ font-size:18px; font-weight:800; color:var(--ink); margin-bottom:10px; }
.scene-cat p{ font-size:13.5px; color:var(--ink-soft); line-height:1.75; font-weight:500; }
.scene-categories .more-wrap{ margin-top:34px; }
/* sound-library entry + purpose entry cards act as links */
.cat-card, .moment-card{ text-decoration:none; color:inherit; cursor:pointer; }
.cat-count{ display:inline-block; margin-top:12px; font-size:12px; font-weight:700; color:var(--purple-deep); background:rgba(138,92,240,.1); padding:3px 10px; border-radius:999px; }
/* Static Sport card: visual placeholder only, keep hover lift like other cards */
.sport-card-static{ cursor:default; }
/* Mixer promo section on home */
.mixer-promo{
  margin-top:70px;
  padding-top:10px;
}

/* Mixer usage steps on home */
.mixer-steps{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:24px;
  margin:32px 0 10px;
}
.mixer-step{
  display:flex; gap:18px; align-items:flex-start;
  background:#fff; border-radius:20px; padding:26px;
  box-shadow:0 3px 14px rgba(0,0,0,.05);
}
.step-num{
  flex:0 0 38px; width:38px; height:38px; border-radius:50%;
  background:var(--purple); color:#fff; font-weight:800; font-size:15px;
  display:flex; align-items:center; justify-content:center;
}
.mixer-step h4{font-size:16px; font-weight:800; color:var(--ink); margin:0 0 8px;}
.mixer-step p{font-size:14px; color:var(--ink-soft); margin:0; line-height:1.6;}
@media (max-width:640px){
  .mixer-steps{grid-template-columns:1fr; gap:18px;}
  .mixer-step{padding:22px; gap:14px;}
  .step-num{flex:0 0 34px; width:34px; height:34px; font-size:14px;}
}

/* Mixer example row on home */
.mixer-example-row{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:center; margin:6px 0 22px; }
.mx-chip{ font-size:15px; font-weight:600; color:var(--ink); background:var(--card-bg); border:1px solid rgba(138,92,240,.18); padding:8px 16px; border-radius:999px; }
.mx-chip b{ color:var(--purple-deep); }
.mx-plus{ color:var(--purple); font-weight:800; font-size:18px; }
.sd-cta{ text-align:center; }

/* Favorites list (shown only in "Profile"; library/home sidebar no longer shows the list) */
.preset-list li.active{ background:var(--card-bg); border:1px solid var(--purple); }
.preset-list li.active .load{ color:var(--purple-deep); }
.preset-list .stop{
  cursor:pointer; color:#fff; background:var(--purple); border-radius:999px;
  font-size:11px; font-weight:800; padding:4px 10px; white-space:nowrap; transition:background .12s;
}
.preset-list .stop:hover{ background:var(--purple-deep); }

/* Save-success toast (between favorites and timer) */
.toast{
  margin-top:8px; padding:0 24px; border-radius:999px;
  background:#e8e0ff; color:var(--purple-deep);
  font-size:13.5px; font-weight:800; text-align:center;
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .3s, opacity .3s, padding .3s; pointer-events:none;
}
.toast.show{ max-height:50px; padding:12px 24px; opacity:1; margin-bottom:10px; }

/* ═══ Library: category pills + horizontal rows ═══ */
.library-main{ min-width:0; }
.cat-pills{
  display:flex; flex-wrap:wrap; gap:10px;
  justify-content:flex-start;
  padding:24px 0 10px;
  background:#fff;
}
.pill{
  flex:0 0 auto;
  background:#fff; border:1.5px solid var(--line);
  color:var(--ink); border-radius:999px; padding:9px 16px;
  font-size:11.5px; font-weight:800; cursor:pointer;
  display:flex; align-items:center; justify-content:center; text-align:center;
  white-space:nowrap; line-height:1.2; min-height:40px;
  transition:all .15s;
}
.pill:hover{ border-color:var(--purple); color:var(--purple); }
.pill.active{ background:var(--purple); border-color:var(--purple); color:#fff; }

.library-grid{ grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); }
.loading-ph{ padding:48px 16px; text-align:center; color:#9b8fb5; font-size:15px; font-weight:600; }
/* Library + home sidebars: each panel is a separate light card, top-aligned with
   compact vertical spacing (NOT stretched to fill the column height). */
#librarySide,
#homeSide{
  justify-content:flex-start; height:auto; gap:0;
  align-self:start; position:sticky; top:20px;
}

/* ═══ Blog ═══ */
.blog-wrap{ max-width:1100px; margin:0 auto; padding:36px 24px 64px; }
.blog-list{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px; }
.blog-card{
  background:#fff; border:1.5px solid var(--line); border-radius:var(--radius-lg);
  cursor:pointer; transition:all .16s ease; display:flex; flex-direction:column;
  overflow:hidden;
}
.blog-card:hover{ border-color:var(--purple); transform:translateY(-3px); box-shadow:0 12px 30px rgba(138,92,240,0.12); }
.blog-thumb{ aspect-ratio:16/10; overflow:hidden; background:var(--card-hover); }
.blog-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s ease; }
.blog-card:hover .blog-thumb img{ transform:scale(1.04); }
.blog-body{ padding:22px; display:flex; flex-direction:column; flex:1; }
.blog-meta{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.blog-tag{
  background:#fff; color:var(--purple-deep); border:1.5px solid var(--line);
  border-radius:999px; padding:3px 12px; font-size:12px; font-weight:800;
}
.blog-title{ font-size:18px; font-weight:800; color:var(--ink); margin:0 0 10px; line-height:1.4; }
.blog-excerpt{ color:var(--ink-soft); font-size:14px; margin:0 0 18px; flex:1; line-height:1.55; }
.blog-foot{ display:flex; align-items:center; gap:8px; color:var(--ink-soft); font-size:12.5px; font-weight:600; }
.blog-author{ color:var(--ink); font-weight:700; }
.blog-dot{ opacity:.5; }

.blog-article{ max-width:720px; margin:0 auto; }
.blog-article[hidden]{ display:none; }
.blog-list[hidden]{ display:none; }
.blog-article-hero{ border-radius:var(--radius-lg); overflow:hidden; margin-bottom:22px; aspect-ratio:16/9; }
.blog-article-hero img{ width:100%; height:100%; object-fit:cover; display:block; }
.blog-article h1.blog-article-title{ font-size:32px; font-weight:800; color:var(--ink); margin:14px 0 12px; line-height:1.25; }
.blog-byline{ display:flex; align-items:center; gap:8px; color:var(--ink-soft); font-size:14px; font-weight:600; margin-bottom:22px; }
.blog-article p{ color:var(--ink); font-size:16.5px; line-height:1.85; margin:0 0 20px; }
.blog-back{
  background:#fff; border:1.5px solid var(--line); color:var(--purple-deep);
  border-radius:999px; padding:8px 18px; font-size:13.5px; font-weight:800; cursor:pointer;
  transition:all .15s; margin:6px 0 26px;
}
.blog-back:hover{ background:var(--purple); color:#fff; border-color:var(--purple); }
#blogBackBottom{ margin-top:14px; }

@media (max-width:820px){
  .navbar{padding:12px 18px; flex-wrap:nowrap; justify-content:space-between; position:relative; gap:10px;}
  /* Hamburger button */
  .nav-toggle{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:42px; height:42px; padding:0; border:none;
    background:rgba(255,255,255,0.14); border-radius:12px; cursor:pointer; flex:0 0 auto;
  }
  .nav-toggle span{ display:block; width:20px; height:2px; border-radius:2px; background:#fff; margin:0 auto; transition:transform .2s, opacity .2s; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  /* Collapsed menu → dropdown sheet under the bar */
  .nav-menu{
    display:none; position:absolute; top:100%; left:0; right:0; z-index:100;
    flex-direction:column; gap:4px; background:var(--lav-nav);
    padding:12px 16px 18px; box-shadow:0 12px 30px rgba(0,0,0,.18); margin:0;
    border-radius:0 0 18px 18px;
  }
  .nav-menu.open{ display:flex; }
  .nav-menu .nav-item{ width:100%; justify-content:center; text-align:center; padding:12px; font-size:15px; }
  .nav-right{ margin-left:0; width:100%; justify-content:center; }
  .hero{padding:44px 20px 56px;}
  .hero h1{font-size:27px;}
  #view-library.active{grid-template-columns:1fr; gap:24px 0; padding:36px 20px 40px;}
  #view-library > .cat-pills,
  #view-library > .library-main,
  #view-library > #librarySide{grid-column:auto; grid-row:auto;}
  #view-purpose.active{grid-template-columns:1fr; gap:24px 0; padding:36px 20px 40px;}
  #view-purpose > .purpose-header,
  #view-purpose > .purpose-main,
  #view-purpose > #purposeSide{grid-column:auto; grid-row:auto;}
  #view-purpose > #purposeSide{display:none;}
  .mobile-purpose-mixer{display:block; margin:0 0 24px;}
  .profile-grid{grid-template-columns:1fr;}
  .sounds{grid-template-columns:repeat(auto-fill, minmax(130px,1fr));}
  .note{padding:0 20px;}
  .feature-mixer{grid-template-columns:1fr;}
  #featureGrid{grid-template-columns:repeat(2,1fr);}
  .scene-cats{flex-direction:column; align-items:center; gap:18px;}
  .scene-cat{flex:1 1 auto; width:100%; max-width:360px;}
  .scene-categories{padding:0;}
  .cat-pills{ padding:10px 0 12px; gap:8px; }
  .pill{ flex:0 0 auto; padding:7px 12px; font-size:11px; min-height:36px; }
}

@media (max-width:1020px){
  .blog-list{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:640px){
  .blog-list{ grid-template-columns:1fr; }
  .blog-wrap{ padding:28px 20px 48px; }
  .blog-article h1.blog-article-title{ font-size:24px; }
  .blog-article-hero{ aspect-ratio:16/10; }
}

/* Category drag-and-drop reordering in /admin */
.drag-handle{ cursor:grab; color:#b9a7d8; text-align:center; user-select:none; font-size:16px; width:30px; }
.drag-handle:active{ cursor:grabbing; }
#catBody tr.dragging{ opacity:.4; }
#catBody tr.drag-over{ box-shadow: inset 0 3px 0 #6f42c1; background:#faf7ff; }

/* Sound drag-and-drop reordering in /admin (same visual language as categories) */
#sndBody tr.dragging{ opacity:.4; }
#sndBody tr.drag-over{ box-shadow: inset 0 3px 0 #6f42c1; background:#faf7ff; }

/* Inline editable sound name in /admin */
.snd-name{ font-size:13px; color:var(--ink); background:#fff; transition:border-color .15s, box-shadow .15s; }
.snd-name:focus{ outline:none; border-color:var(--purple); box-shadow:0 0 0 3px rgba(138,92,240,.15); }

/* ============ Sound detail / SEO landing page ============ */
/* Hero zone (purple background) */
.sd-breadcrumb{ font-size:13px; color:rgba(255,255,255,.85); margin-bottom:14px; }
.sd-breadcrumb a{ color:#fff; text-decoration:none; }
.sd-breadcrumb a:hover{ text-decoration:underline; }
.sd-breadcrumb span{ margin:0 8px; opacity:.55; }
.sd-breadcrumb .sd-crumb-cur{ opacity:.92; }
/* Light variant for breadcrumbs placed on white/content backgrounds */
.sd-breadcrumb-light{ color:rgba(75,59,102,.75); }
.sd-breadcrumb-light a{ color:var(--ink); }
.sd-breadcrumb-light a:hover{ color:var(--purple); }
.sd-breadcrumb-light span{ opacity:.45; }
.sd-breadcrumb-light .sd-crumb-cur{ opacity:.9; }
/* Library breadcrumb sits at the top of #view-library, above cat-pills */
.sd-h1{ font-size:34px; font-weight:800; color:#fff; margin:0 0 10px; letter-spacing:.3px; }
/* Content zone (white) */
.sd-nowplaying{ background:var(--card-bg); border-radius:var(--radius-lg); padding:24px; margin:28px auto; max-width:820px; box-shadow:0 14px 36px rgba(75,59,102,.10); }
.sd-nowplaying .now-playing{ background:transparent; border-radius:0; padding:0; }
.sd-nowplaying .now-list{ margin-bottom:4px; }
.sd-nowplaying .sd-player{ background:transparent !important; border:none !important; border-radius:0 !important; box-shadow:none !important; padding:16px 0 0 !important; margin:0 !important; border-top:1px solid #ece6f7 !important; }
.sd-player{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; background:#fff; border:1px solid #ece6f7; border-radius:18px; padding:18px 22px; margin:28px auto; max-width:820px; box-shadow:0 14px 36px rgba(75,59,102,.10); }
.sd-play{ width:56px; height:56px; border-radius:50%; border:none; background:var(--primary); color:#fff; font-size:15px; cursor:pointer; flex:0 0 auto; transition:transform .12s, box-shadow .12s; }
.sd-play:hover{ transform:scale(1.04); }
.sd-play.on{ background:var(--primary-deep); }
.sd-vol{ display:flex; align-items:center; gap:8px; }
.sd-vol-label{ font-size:13px; color:var(--text-2); }
.sd-vol input{ width:120px; accent-color:var(--primary); }
.sd-vol-pct{ font-size:12px; color:var(--text-2); min-width:32px; text-align:right; font-variant-numeric:tabular-nums; }
.sd-progress{ flex:1 1 120px; height:6px; background:var(--card-2); border-radius:999px; overflow:hidden; min-width:80px; }
.sd-bar{ height:100%; width:0; background:var(--primary); border-radius:999px; }
.sd-time{ font-size:12px; color:var(--text-3); font-variant-numeric:tabular-nums; }
.sd-mixer{ border:none; border-radius:999px; background:var(--primary); color:#fff; font-weight:700; font-size:14px; padding:11px 20px; cursor:pointer; transition:transform .12s, box-shadow .12s; }
.sd-mixer:hover{ transform:translateY(-1px); box-shadow:0 8px 20px rgba(75,59,102,.25); }
.sd-mixer.on{ background:var(--primary-deep); }
.sd-block{ max-width:820px; margin:30px auto; }
.sd-block-sub{ margin-top:-12px; }
.sd-h2{ font-size:24px; font-weight:800; color:#3a2d52; margin:0 0 14px; }
.sd-h2-sub{ font-size:18px; font-weight:700; color:#6b5f86; margin:0 0 10px; }
.sd-p{ font-size:16px; line-height:1.7; color:#4a4060; margin:0 0 12px; }
.sd-sub{ color:#6b5f86; font-size:14px; }
.sd-howto{ list-style:none; margin:0; padding:0; counter-reset:howto; display:flex; flex-direction:column; gap:14px; }
.sd-howto-li{ position:relative; padding:14px 16px 14px 56px; background:#faf8fe; border:1px solid #efe9f8; border-radius:14px; }
.sd-howto-li::before{ counter-increment:howto; content:counter(howto); position:absolute; left:14px; top:14px; width:28px; height:28px; border-radius:50%; background:var(--purple); color:#fff; font-weight:800; font-size:14px; display:flex; align-items:center; justify-content:center; }
.sd-howto-t{ font-size:16px; font-weight:700; color:#3a2d52; margin:0 0 4px; }
.sd-howto-b{ font-size:15px; line-height:1.65; color:#4a4060; margin:0; }
.sd-chips-row{ display:flex; flex-wrap:wrap; gap:9px; }
.chip{ font-size:13px; padding:6px 14px; border-radius:999px; background:#f1ecfa; color:#5a4b7a; }
.chip-link{ background:var(--purple); color:#fff; text-decoration:none; cursor:pointer; font-weight:600; }
.chip-link:hover{ background:var(--primary-deep); }
.sd-char{ display:grid; border:1px solid #ece6f7; border-radius:14px; overflow:hidden; max-width:560px; }
.sd-char-row{ display:flex; justify-content:space-between; gap:16px; padding:12px 16px; border-bottom:1px solid #f1ecfa; }
.sd-char-row:last-child{ border-bottom:none; }
.sd-char-k{ color:#9b8fb5; font-weight:600; font-size:14px; }
.sd-char-v{ color:#3a2d52; font-weight:600; font-size:14px; text-align:right; }
.sd-pairgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; }
.sd-pair{ background:#fff; border:1px solid #ece6f7; border-radius:14px; padding:16px; text-align:center; }
.sd-pair-name{ font-weight:700; color:#3a2d52; margin-bottom:10px; font-size:15px; }
.sd-pair-add{ border:none; border-radius:999px; background:#f1ecfa; color:var(--purple); font-weight:700; padding:8px 14px; cursor:pointer; font-size:13px; transition:background .12s; }
.sd-pair-add:hover{ background:#e6dcf7; }
/* Purpose-page editorial modules */
.sd-combos{}
.sd-combo-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; }
.sd-combo-card{ background:#fff; border:1px solid #ece6f7; border-radius:18px; padding:18px; display:flex; flex-direction:column; align-items:flex-start; box-shadow:0 8px 24px rgba(75,59,102,.06); }
.sd-combo-icons{ display:flex; align-items:center; gap:6px; margin-bottom:10px; }
.sd-combo-icon{ width:38px; height:38px; border-radius:50%; background:#f5f3ff; border:1px solid #ece6f7; display:flex; align-items:center; justify-content:center; font-size:20px; line-height:1; overflow:hidden; }
.sd-combo-icon svg{ width:22px; height:22px; color:var(--purple); }
.sd-combo-icon img{ width:22px; height:22px; object-fit:contain; }
.sd-combo-name{ font-size:17px; font-weight:800; color:#3a2d52; margin:0 0 6px; }
.sd-combo-desc{ font-size:14px; color:#6b5f86; line-height:1.55; margin:0 0 12px; flex:1 1 auto; }
.sd-combo-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.sd-combo-tags .chip{ background:#f1ecfa; color:#5a4b7a; font-size:12px; padding:4px 10px; }
.sd-combo-btn{
  display:inline-flex; align-items:center; justify-content:flex-start; gap:8px;
  background:var(--primary); border:none; border-radius:999px;
  padding:4px 4px 4px 12px;
  color:#fff; font-size:13px; font-weight:700;
  cursor:pointer; box-shadow:0 5px 14px rgba(0,0,0,.18);
  transition:transform .15s, box-shadow .15s, background .15s;
}
.sd-combo-btn:hover{
  transform:translateY(-1px);
  background:var(--primary-deep);
  box-shadow:0 6px 18px rgba(0,0,0,.22);
}
.sd-combo-btn:active{ transform:translateY(0); }
.sd-combo-btn-arrow{
  width:26px; height:26px; border-radius:50%;
  background:#fff; color:var(--primary);
  display:flex; align-items:center; justify-content:center;
  flex:0 0 auto;
  transition:transform .2s;
}
.sd-combo-btn:hover .sd-combo-btn-arrow{ transform:translateX(3px); }
.sd-combo-btn-arrow svg{ width:14px; height:14px; }
.sd-subcats{}
.sd-subcat-group{ margin-bottom:18px; }
.sd-subcat-title{ font-size:16px; font-weight:700; color:#5a4b7a; margin:0 0 8px; }
.sd-howtobuild .feat-btn{ margin-top:10px; }
.sd-tips{ padding:18px 20px; background:#f6f2fc; border:1px solid #e7def7; border-left:4px solid var(--purple); border-radius:14px; }
.sd-tips .sd-h2{ font-size:19px; margin:0 0 8px; }
.sd-tips-b{ font-size:15px; line-height:1.7; color:#4a4060; margin:0; }
.sd-prefs{}
.sd-prefs-table{ border:1px solid #ece6f7; border-radius:14px; overflow:hidden; }
.sd-prefs-row{ display:flex; gap:16px; padding:13px 16px; border-bottom:1px solid #f1ecfa; align-items:center; }
.sd-prefs-row:last-child{ border-bottom:none; }
.sd-prefs-pref{ font-weight:700; color:#3a2d52; font-size:15px; min-width:140px; flex:0 0 auto; }
.sd-prefs-sounds{ display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; color:#4a4060; font-size:14px; }
.sd-prefs-plus{ color:#9b8fb5; font-weight:700; }
.sd-prefs-link{ color:var(--purple); text-decoration:none; font-weight:700; }
.sd-prefs-link:hover{ text-decoration:underline; }
.sd-faq{ display:grid; gap:10px; }
.sd-faq-item{ background:#fff; border:1px solid #ece6f7; border-radius:12px; padding:12px 16px; }
.sd-faq-item summary{ font-weight:700; color:#3a2d52; cursor:pointer; list-style:none; }
.sd-faq-item summary::-webkit-details-marker{ display:none; }
.sd-faq-item p{ margin:10px 0 0; color:#4a4060; line-height:1.6; font-size:15px; }
@media (max-width:768px){
  .sd-h1{ font-size:26px; }
  .sd-nowplaying{ margin:24px 16px; padding:18px; }
  .sd-player{ flex-direction:column; align-items:stretch; }
  .sd-play{ align-self:center; }
  .sd-progress{ width:100%; flex-basis:auto; }
  .sd-mixer{ width:100%; }
  .sd-block{ margin:24px 16px; }
  .sd-char{ max-width:none; }
  .sd-combo-grid{ grid-template-columns:1fr; }
  .sd-prefs-row{ flex-direction:column; align-items:flex-start; gap:8px; }
  .sd-prefs-pref{ min-width:auto; }
}

/* ============ Auth modal ============ */
.nav-login-btn{ border:none; background:var(--primary); color:#fff; font-weight:700; padding:8px 16px; border-radius:999px; cursor:pointer; font-size:14px; }
.nav-login-btn:hover{ background:var(--primary-deep); }
.fav-heart{ position:absolute; top:8px; right:8px; width:30px; height:30px; border-radius:50%; border:none; background:rgba(255,255,255,.85); color:#c25a7a; font-size:16px; line-height:1; cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,.12); }
.fav-heart.on{ background:#ffe3ec; color:#e0345c; }
.auth-modal{ position:fixed; inset:0; z-index:100000; display:none; }
.auth-modal.open{ display:block; }
.auth-backdrop{ position:absolute; inset:0; background:rgba(40,30,60,.45); }
.auth-card{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:min(380px,92vw); background:#fff; border-radius:18px; padding:26px 24px; box-shadow:0 18px 50px rgba(0,0,0,.25); font-family:system-ui,sans-serif; }
.auth-x{ position:absolute; top:12px; right:14px; border:none; background:none; font-size:18px; color:#9b8fb5; cursor:pointer; }
.auth-title{ margin:0 0 4px; color:#3a2d52; font-size:21px; }
.auth-sub{ margin:0 0 16px; color:#7a6f90; font-size:13px; line-height:1.5; }
.auth-google{ width:100%; display:flex; align-items:center; justify-content:center; gap:8px; border:1px solid #e3dcf0; background:#fff; border-radius:10px; padding:11px; font-weight:700; color:#3a2d52; cursor:pointer; }
.auth-google:hover{ background:#faf8ff; }
.g-ico{ display:inline-block; width:18px; height:18px; vertical-align:middle; }
.auth-divider{ display:flex; align-items:center; gap:10px; color:#b9aed0; font-size:12px; margin:14px 0; }
.auth-divider::before,.auth-divider::after{ content:''; flex:1; height:1px; background:#ece6f7; }
.auth-form input{ width:100%; box-sizing:border-box; margin-bottom:10px; padding:11px 12px; border:1px solid #e3dcf0; border-radius:10px; font-size:14px; }
.auth-submit{ width:100%; border:none; background:var(--primary); color:#fff; font-weight:700; padding:11px; border-radius:10px; cursor:pointer; }
.auth-submit:hover{ background:var(--primary-deep); }
.auth-switch{ width:100%; margin-top:8px; border:none; background:none; color:var(--primary); font-size:13px; cursor:pointer; }
.auth-msg{ margin-top:10px; font-size:13px; color:#3a2d52; }
.auth-msg.err{ color:#d23; }

/* ============ Account center ============ */
.account-shell{ display:grid; grid-template-columns:240px 1fr; gap:24px; max-width:1000px; margin:0 auto; padding:24px 16px; }
.account-side{ background:#fff; border:1px solid #ece6f7; border-radius:16px; padding:18px; align-self:start; }
.account-user{ display:flex; gap:12px; align-items:center; margin-bottom:16px; }
.au-avatar{ width:44px; height:44px; border-radius:50%; background:var(--primary); color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; }
.au-name{ font-weight:700; color:#3a2d52; }
.au-plan{ font-size:12px; color:#9b8fb5; }
.account-nav{ display:flex; flex-direction:column; gap:4px; }
.account-nav a{ padding:10px 12px; border-radius:10px; color:#4a4060; cursor:pointer; font-weight:600; font-size:14px; }
.account-nav a:hover{ background:#f6f2fd; }
.account-nav a.active{ background:#efe8fb; color:#5a3fa0; }
.acct-pane{ background:#fff; border:1px solid #ece6f7; border-radius:16px; padding:22px; min-height:300px; }
.acct-pane h2{ margin:0 0 6px; color:#3a2d52; }
.acct-pane h3{ margin:22px 0 10px; color:#3a2d52; }
.acct-hi{ color:#7a6f90; margin:0 0 16px; }
.acct-gate{ text-align:center; padding:40px 10px; }
.acct-gate p{ color:#7a6f90; margin:8px 0 18px; }
.acct-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; }
.acct-stat{ background:#faf8ff; border:1px solid #ece6f7; border-radius:14px; padding:16px; text-align:center; }
.acct-stat .num{ font-size:28px; font-weight:800; color:var(--primary); }
.acct-stat .lbl{ color:var(--text-2); font-size:13px; margin:4px 0 6px; }
.acct-stat .link{ color:var(--primary); font-size:13px; cursor:pointer; font-weight:600; }
.btn-primary{ border:none; background:var(--primary); color:#fff; font-weight:700; padding:10px 18px; border-radius:10px; cursor:pointer; }
.btn-primary:hover{ background:var(--primary-deep); }
.btn-ghost{ border:1px solid #e3dcf0; background:#fff; color:#4a4060; padding:9px 16px; border-radius:10px; cursor:pointer; }
.btn-danger{ border:1px solid #f3c2cd; background:#fff0f3; color:#d23; padding:9px 16px; border-radius:10px; cursor:pointer; }
.set-card{ border:1px solid #ece6f7; border-radius:14px; padding:16px; margin-top:14px; max-width:420px; }
.set-card h3{ margin:0 0 12px; }
.set-card label{ display:block; font-size:13px; color:#7a6f90; margin-bottom:10px; }
.set-card input{ width:100%; box-sizing:border-box; padding:10px; border:1px solid #e3dcf0; border-radius:9px; margin-top:4px; }
.set-msg{ color:#2a8; font-size:13px; margin-left:10px; }
.set-note{ color:#9b8fb5; font-size:12px; margin-top:8px; }
.mix-list{ display:grid; gap:12px; }
.mix-card{ border:1px solid #ece6f7; border-radius:14px; padding:14px 16px; background:#fff; }
.mc-name{ font-weight:700; color:#3a2d52; }
.mc-sounds{ color:#7a6f90; font-size:13px; margin:4px 0 10px; }
.mc-actions{ display:flex; gap:8px; }
.mc-actions button{ border:1px solid #e3dcf0; background:#fff; border-radius:8px; padding:7px 12px; cursor:pointer; font-weight:600; color:#4a4060; }
.mc-play{ background:#7a5cc0 !important; color:#fff !important; border:none !important; }
.mc-del{ color:#d23 !important; }
.fav-list{ display:grid; gap:10px; }
.fav-row{ display:flex; align-items:center; gap:12px; border:1px solid #ece6f7; border-radius:12px; padding:10px 14px; }
.fav-ico{ width:34px; height:34px; display:flex; align-items:center; justify-content:center; }
.fav-nm{ flex:1; font-weight:600; color:#3a2d52; }
.fav-rm{ border:1px solid #f3c2cd; background:#fff0f3; color:#d23; border-radius:8px; padding:6px 12px; cursor:pointer; }

/* ============ Admin (user management) ============ */
.admin-shell{ display:grid; grid-template-columns:220px 1fr; gap:24px; max-width:1000px; margin:0 auto; padding:24px 16px; }
.admin-side{ background:#fff; border:1px solid #ece6f7; border-radius:16px; padding:18px; align-self:start; }
.admin-brand{ font-weight:800; color:#3a2d52; margin-bottom:14px; }
.admin-nav{ display:flex; flex-direction:column; gap:4px; margin-bottom:14px; }
.admin-nav a{ padding:10px 12px; border-radius:10px; color:#4a4060; cursor:pointer; font-weight:600; font-size:14px; }
.admin-nav a:hover{ background:#f6f2fd; }
.admin-nav a.active{ background:#efe8fb; color:#5a3fa0; }
.admin-back{ color:#7a5cc0; font-size:13px; text-decoration:none; }
.admin-pane{ background:#fff; border:1px solid #ece6f7; border-radius:16px; padding:22px; min-height:300px; }
.admin-pane h2{ margin:0 0 14px; color:#3a2d52; }
.admin-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; }
.admin-stat{ background:#faf8ff; border:1px solid #ece6f7; border-radius:14px; padding:16px; text-align:center; }
.admin-stat .num{ font-size:26px; font-weight:800; color:#5a3fa0; }
.admin-stat .lbl{ color:#7a6f90; font-size:13px; margin-top:4px; }
.admin-tools{ display:flex; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.admin-tools input,.admin-tools select{ padding:9px 11px; border:1px solid #e3dcf0; border-radius:9px; }
.ad-table{ display:grid; gap:8px; }
.ad-row{ display:grid; grid-template-columns:2fr 1.2fr 1fr 1fr 1fr 1fr; gap:10px; align-items:center; background:#faf8ff; border:1px solid #ece6f7; border-radius:10px; padding:10px 12px; font-size:13px; color:#3a2d52; }
.ad-u{ font-weight:700; display:flex; flex-direction:column; }
.ad-e{ font-weight:400; color:#9b8fb5; font-size:12px; }
.badge{ background:#eee6fb; color:#5a3fa0; border-radius:999px; padding:2px 9px; font-size:12px; display:inline-block; }
.badge.disabled{ background:#f3e0e0; color:#c0392b; }
.ad-act button{ border:1px solid #e3dcf0; background:#fff; border-radius:8px; padding:6px 11px; cursor:pointer; color:#4a4060; }

/* ═══ Footer (same light-purple zone as the header) ═══ */
.site-footer{
  background:var(--lav-top);
  color:var(--text);
  padding:64px 36px 32px;
  font-size:14px;
}
.footer-inner{
  max-width:1100px;
  margin:0 auto;
}
.footer-columns{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:40px;
  margin-bottom:48px;
}
.footer-col h4{
  color:var(--text);
  font-size:18px;          /* deevid footer column title */
  font-weight:600;
  margin-bottom:16px;
}
.footer-col ul{
  list-style:none;
  display:grid;
  gap:13px;
  margin:0; padding:0;
}
.footer-col a{
  color:var(--text-2);
  font-size:16px;          /* deevid footer link size */
  font-weight:500;
  line-height:1.5;
  text-decoration:none;
  transition:color .15s;
}
.footer-col a:hover{ color:var(--text); text-decoration:underline; }
.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:16px;
  padding-top:28px;
  border-top:1px solid var(--line-strong);
  color:var(--text-3);
  font-size:12px;          /* deevid footer copyright/fine print */
}
.footer-brand strong{
  color:var(--text);
  font-size:18px;          /* brand name matches column-title size */
  font-weight:700;
  margin-right:6px;
}
.footer-brand span{
  color:var(--text-3);
  font-size:13px;
}
.footer-social{
  display:flex;
  align-items:center;
  gap:14px;
}
.footer-col .footer-social{
  margin-top:18px;
  justify-content:flex-start;
}
.social-link{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  background:var(--line);
  color:var(--text);
  transition:background .15s, transform .12s, box-shadow .15s;
}
.social-link:hover{
  background:var(--line-strong);
  transform:translateY(-2px);
  box-shadow:0 4px 10px rgba(0,0,0,.12);
}
.social-link svg{
  width:17px; height:17px;
  fill:currentColor;
}
@media (max-width:700px){
  .footer-columns{ grid-template-columns:repeat(3, 1fr); gap:14px; }
  .footer-col h4{ font-size:12.5px; margin-bottom:10px; }
  .footer-col ul{ gap:6px; }
  .footer-col a{ font-size:11px; line-height:1.45; }
  .site-footer{ padding:34px 18px 24px; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; gap:14px; }
  .footer-col .footer-social{ margin-top:14px; gap:10px; }
  .footer-social .social-link{ width:30px; height:30px; }
  .footer-social .social-link svg{ width:15px; height:15px; }
}

@media (max-width:900px){
  .account-shell,.admin-shell{ grid-template-columns:1fr; }
  .account-side,.admin-side{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
  .account-nav,.admin-nav{ flex-direction:row; flex-wrap:wrap; }
  .ad-row{ grid-template-columns:1.4fr 1fr; }
  .ad-row > div:nth-child(n+3){ display:none; }
}

/* ═══ Focus timer / flip-clock ═══ */
/* Small clock icon in the top-right nav, sitting just before theme picker. */
.nav-timer-btn{
  background:rgba(255,255,255,0.18); border:none; border-radius:50%;
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .15s, transform .12s, box-shadow .2s; flex:0 0 auto; color:#fff;
}
.nav-timer-btn:hover{ background:rgba(255,255,255,0.34); transform:translateY(-1px); box-shadow:0 0 16px rgba(230,220,255,0.9); }
.nav-timer-btn:active{ box-shadow:0 0 22px rgba(230,220,255,0.95); }
.nav-timer-btn svg{ width:22px; height:22px; color:#fff; }

@media (max-width:820px){
  .nav-timer-btn{ width:36px; height:36px; }
  .nav-timer-btn svg{ width:20px; height:20px; }
}

/* ===== Ambient homepage background: slow aurora blobs + film grain =====
   Fixed full-screen layer behind all content (z-index:-1). Pure CSS, no JS.
   Respects prefers-reduced-motion; mobile degrades blur + hides one blob. */
#aurora-bg{
  position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
  /* Aurora disabled — reverted to the original plain white background.
     Everything below is kept so the effect can be re-enabled by deleting this line. */
  display:none;
}
#aurora-bg .blob{
  position:absolute; display:block; border-radius:50%;
  filter:blur(80px); opacity:.8; will-change:transform;
  background:radial-gradient(circle at 50% 50%, rgba(150,105,245,.78), rgba(150,105,245,0) 66%);
}
/* Blobs sit INSIDE the viewport and overlap the centre. Modules carry their own
   opaque surface + shadow, so text contrast stays intact and only the gaps
   between modules pick up the colour. */
#aurora-bg .b1{ width:66vw; height:66vw; left:-14vw; top:-18vw;
  animation:aurora-1 7s ease-in-out infinite alternate; }
#aurora-bg .b2{ width:62vw; height:62vw; right:-16vw; top:2vh;
  background:radial-gradient(circle at 50% 50%, rgba(92,138,240,.72), rgba(92,138,240,0) 66%);
  animation:aurora-2 9s ease-in-out infinite alternate; }
#aurora-bg .b3{ width:74vw; height:74vw; left:6vw; top:32vh;
  background:radial-gradient(circle at 50% 50%, rgba(188,116,244,.7), rgba(188,116,244,0) 66%);
  animation:aurora-3 11s ease-in-out infinite alternate; }
#aurora-bg .grain{
  position:absolute; inset:-50%; opacity:.13; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}
@keyframes aurora-1{ from{ transform:translate3d(0,0,0) scale(1); } to{ transform:translate3d(24vw,18vh,0) scale(1.3); } }
@keyframes aurora-2{ from{ transform:translate3d(0,0,0) scale(1.1); } to{ transform:translate3d(-20vw,14vh,0) scale(.84); } }
@keyframes aurora-3{ from{ transform:translate3d(0,0,0) scale(1); } to{ transform:translate3d(18vw,-20vh,0) scale(1.26); } }
@media (prefers-reduced-motion: reduce){
  #aurora-bg .blob{ animation:none !important; }
}
@media (max-width:768px){
  #aurora-bg .blob{ filter:blur(56px); opacity:.72; }
  #aurora-bg .b3{ display:none; }
  #aurora-bg .b1{ width:80vw; height:80vw; }
  #aurora-bg .b2{ width:76vw; height:76vw; }
}

/* Audio-reactive particle background (canvas, behind all content, no readability impact) */

/* ════════════════════════════════════════════════════════════════════════════
   RestHush Dark Theme — appended override layer.
   Repoints the remaining hardcoded light-theme colors (card surfaces, light
   borders, dark-on-white text) to the Dark Navy + Lavender + Teal system.
   Layout, selectors, JS logic and routes are untouched; these rules only win
   over earlier same-specificity declarations by source order.
   Visual language: Lavender = selection/brand & playing/audio activity.
   ════════════════════════════════════════════════════════════════════════════ */

/* Subtle ambient glow behind all content (very low opacity, no readability hit) */
body::before{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(58vw 46vh at 10% -4%, rgba(139,124,255,0.10), transparent 60%),
    radial-gradient(48vw 42vh at 100% 102%, rgba(94,234,212,0.07), transparent 60%);
}
body{ background:var(--bg); color:var(--text); }

/* Nav / hero / footer zones become Dark Navy */
.top-zone{ background:var(--bg); }
.site-footer{ background:var(--bg); }
.nav-item:hover{ background:rgba(255,255,255,0.08); }
.nav-item.active{ background:var(--primary-soft); color:var(--primary); }
.nav-brand:hover, .nav-brand.active{ background:rgba(255,255,255,0.10); }
.navbar .logo{ filter:none; }   /* logo is already a light/colored mark */

/* ── Generic light surfaces → dark cards ── */
.card, .panel, .why-card, .home-post-card, .blog-card, .faq-item,
.sd-player, .sd-faq-item, .sd-pair, .sd-combo-card, .sd-howto-li,
.scene-cat, .profile-grid .panel, .account-side, .acct-pane,
.admin-side, .admin-pane, .mix-card, .preset-add input, #presetList li,
.timer-row input, .snd-name, .fav-row, .pill, .chip, .home-post-tag,
.blog-tag, .blog-back, .now-item, .now-close-all, .timer-row button.ghost,
.btn-ghost, .ad-act button, .mc-actions button, .auth-card, .auth-google,
.ad-row, .mixer-step, .cat-pills, .acct-stat, .admin-stat, .set-card{
  background:var(--card) !important;
}
/* chips that were pale lavender tints → secondary surface */
.sd-chips-row .chip, .sd-combo-tags .chip, .mx-chip{
  background:var(--card-2) !important; color:var(--text-2) !important;
}
.hero-sound .chip{ background:var(--card-2) !important; color:var(--text-2) !important; }
.cat-pills{ background:transparent !important; }

/* ── Light borders → subtle dark borders ── */
.card, .panel, .why-card, .home-post-card, .blog-card, .faq-item,
.sd-player, .sd-char, .sd-char-row, .sd-pair, .sd-combo-card, .sd-combo-icon,
.sd-prefs-table, .sd-prefs-row, .sd-faq-item, .sd-howto-li, .sd-tips,
.profile-grid .panel, .account-side, .acct-pane, .admin-side, .admin-pane,
.mix-card, .preset-add input, #presetList li, .timer-row input, .snd-name,
.fav-row, .pill, .chip, .home-post-tag, .blog-tag, .blog-back, .now-item,
.now-close-all, .timer-row button.ghost, .btn-ghost, .ad-act button, .mc-actions button,
.auth-card, .auth-google, .auth-form input, .auth-divider, .set-card,
.ad-row, .acct-stat, .admin-stat, .badge, .cat-count,
.account-nav a, .admin-nav a, .admin-tools input, .admin-tools select,
.set-card input{
  border-color:var(--line) !important;
}
/* keep the soft lavender hover border on interactive cards */
.home-post-card:hover, .blog-card:hover, .why-card:hover,
.scene-cat:hover, .faq-item.open, .sd-combo-card:hover{
  border-color:var(--primary) !important;
}

/* ── Dark-on-white text → light text ── */
.placeholder-page h2, .placeholder-page p,
.legal-page h1, .legal-page .lead, .legal-page h2, .legal-page p, .legal-page .updated,
.scenario-intro, .route-title, .route-sub,
.sd-h2, .sd-h2-sub, .sd-p, .sd-sub,
.sd-char-k, .sd-char-v, .sd-pair-name, .sd-combo-name, .sd-combo-desc,
.sd-subcat-title, .sd-tips .sd-h2, .sd-tips-b,
.sd-prefs-pref, .sd-prefs-sounds, .sd-faq-item summary, .sd-faq-item p,
.au-name, .au-plan, .acct-pane h2, .acct-pane h3, .acct-hi,
.acct-stat .lbl, .acct-stat .link, .mc-name, .mc-sounds,
.admin-brand, .admin-pane h2, .ad-e, .ad-row,
.account-nav a, .admin-nav a, .mix-card .mc-sounds, .fav-nm, .set-card label,
.home-post-title, .home-post-excerpt, .blog-title, .blog-excerpt, .blog-foot,
.sd-vol-label, .sd-vol-pct, .sd-progress,
.section-head h2, .section-head p, .view-title, .view-desc,
.now-master-label, .now-empty, .empty-hint, .preset-empty{
  color:var(--text-2) !important;
}
h1, h2, h3, .sd-h1, .route-title, .view-title, .placeholder-page h2,
.legal-page h1, .legal-page h2, .sd-h2, .blog-article-title, .home-post-title,
.blog-title, .sd-combo-name, .sd-pair-name, .acct-pane h2, .acct-pane h3,
.admin-pane h2, .admin-brand, .au-name, .why-card h4, .mixer-step h4,
.scene-cat h3, .about-text, .blog-article p, .legal-page a{
  color:var(--text) !important;
}
.sd-breadcrumb-light{ color:var(--text-2) !important; }
.sd-breadcrumb-light a{ color:var(--text) !important; }
.sd-breadcrumb-light a:hover{ color:var(--primary) !important; }
.sd-breadcrumb-light span{ opacity:.5; }
.legal-page a:hover, .sd-prefs-link:hover{ text-decoration:underline; }

/* ── Sound cards: Purple = selection & playing ── */
.card{ border:1.5px solid rgba(255,255,255,0.12); box-shadow:0 8px 22px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.05); }
.card:hover{ background:var(--sc-hover) !important; border-color:rgba(255,255,255,0.22) !important; box-shadow:0 12px 30px rgba(0,0,0,0.46), inset 0 1px 0 rgba(255,255,255,0.07) !important; }
.card.on{ background:var(--sc-on) !important; border:1.5px solid var(--primary) !important; box-shadow:0 8px 24px rgba(0,0,0,0.42), 0 0 0 1px color-mix(in srgb, var(--primary) 30%, transparent), 0 6px 22px color-mix(in srgb, var(--primary) 18%, transparent) !important; }
.name{ color:var(--text) !important; }
.card:not(.on) .name{ color:var(--text-2) !important; }
.emoji-icon{ background:var(--sc-ico) !important; }
.emoji-icon svg{ filter:brightness(0) invert(0.9); }      /* unify icons as light marks */
.card:hover .emoji-icon svg{ filter:brightness(0) invert(1); }
.card.on .emoji-icon{ background:var(--primary) !important; box-shadow:0 4px 16px color-mix(in srgb, var(--primary) 38%, transparent) !important; }
.card.on .emoji-icon svg{ filter:brightness(0) invert(1) !important; }  /* lavender tile + white silhouette = unified active icon */
/* playing animation → Lavender (theme) */
.card.on .emoji-icon::before{
  background:conic-gradient(from 0deg, var(--primary), var(--teal), var(--primary), var(--teal), var(--primary)) !important;
}
.ic-ripple{ border:2px solid color-mix(in srgb, var(--primary) 45%, transparent) !important; }
.card.on .ic-ripple{ border-color:color-mix(in srgb, var(--primary) 50%, transparent) !important; }
.cat-tag{ color:var(--primary) !important; background:var(--primary-soft) !important; }
.card.on .cat-tag{ background:rgba(255,255,255,0.16) !important; color:#fff !important; }
/* Library category pills: selected state = theme Lavender */
.pill.active{ background:var(--primary) !important; border-color:var(--primary) !important; color:#fff !important; box-shadow:0 4px 16px color-mix(in srgb, var(--primary) 32%, transparent) !important; }
.pill.active:hover{ background:var(--primary) !important; border-color:var(--primary) !important; color:#fff !important; }
.toggle{ border:2px solid var(--primary) !important; color:var(--primary) !important; }
.toggle:hover{ background:var(--primary-soft) !important; }
.card.on .toggle{ background:var(--primary) !important; border-color:var(--primary) !important; color:#fff !important; box-shadow:0 4px 14px color-mix(in srgb, var(--primary) 42%, transparent) !important; }
.card input[type=range]{ background:color-mix(in srgb, var(--primary) 34%, transparent) !important; }
.card input[type=range]::-webkit-slider-thumb{ background:var(--primary) !important; }
.card input[type=range]::-moz-range-thumb{ background:var(--primary) !important; }

/* ── Now Playing / mixer panels ── */
.now-item{ background:var(--card-2) !important; }
.now-master-vol{ border-top:1px solid var(--line) !important; }
.now-master-label{ color:var(--text-2) !important; }
.now-master-vol input, .now-vol{ accent-color:var(--primary) !important; }
.now-icon svg, .now-pct{ color:var(--primary) !important; }
.preset-add input{ color:var(--text) !important; }
.preset-add input::placeholder{ color:var(--text-2) !important; }
#presetList li:hover{ background:var(--card-2) !important; }
#presetList li.active{ background:var(--card-2) !important; border-color:var(--primary) !important; }
#presetList li.active .load{ color:var(--primary) !important; }

/* ── Sidebar inputs / timer ── */
.timer-row input{ color:var(--text) !important; }
.timer-row input:focus, .preset-add input:focus, .snd-name:focus{ border-color:var(--primary) !important; outline:none; }
.timer-row span, .timer-status{ color:var(--text-2) !important; }

/* ── Sound detail player ── */
.sd-player{ border:1px solid var(--line) !important; box-shadow:0 14px 36px rgba(0,0,0,0.35) !important; }
.sd-nowplaying{ box-shadow:0 14px 36px rgba(0,0,0,0.35) !important; }
.sd-vol-label, .sd-vol-pct, .sd-time{ color:var(--text-2) !important; }
.sd-progress{ background:var(--card-2) !important; }
.sd-bar{ background:var(--primary) !important; }     /* playback progress = audio activity (lavender) */
.sd-play.on, .sd-mixer.on{ background:var(--primary-deep) !important; }
.sd-vol input{ accent-color:var(--primary) !important; }
.sd-chips-row .chip-link{ background:var(--primary) !important; color:#fff !important; }
.sd-pair-add{ background:var(--card-2) !important; color:var(--primary) !important; }
.sd-tips{ background:var(--card-2) !important; border-color:var(--line) !important; border-left:4px solid var(--primary) !important; }
.sd-howto-li::before{ background:var(--primary) !important; color:#fff !important; }
.sd-howto-t{ color:var(--title-2) !important; }   /* step title: light lavender, clearly distinct from body */
.sd-howto-b{ color:var(--text-2) !important; }     /* step body: readable blue-gray, no low-alpha dimming */

/* Secondary buttons kept readable on dark cards */
.btn-ghost, .mc-actions button, .ad-act button{ color:var(--text) !important; }
.sd-combo-btn{ background:var(--primary) !important; }
.sd-combo-btn-arrow{ background:#fff; color:var(--primary); }
.sd-combo-icon{ background:var(--card-2) !important; border-color:var(--line) !important; }
.sd-combo-icon svg{ color:var(--primary) !important; }

/* ── Account / Admin ── */
.account-nav a, .admin-nav a{ color:var(--text-2) !important; }
.account-nav a:hover, .admin-nav a:hover{ background:var(--card-2) !important; }
.account-nav a.active, .admin-nav a.active{ background:var(--primary-soft) !important; color:var(--primary) !important; }
.acct-stat .num, .admin-stat .num{ color:var(--primary) !important; }
.badge{ background:var(--primary-soft) !important; color:var(--primary) !important; }
.badge.disabled{ background:rgba(240,106,138,0.16) !important; color:var(--danger) !important; }
.admin-tools input, .admin-tools select{ background:var(--card-2) !important; color:var(--text) !important; border:1px solid var(--line) !important; }
.ad-row{ color:var(--text) !important; }

/* ── Auth modal ── */
.auth-backdrop{ background:rgba(5,8,18,0.62) !important; }
.auth-card{ color:var(--text) !important; box-shadow:0 18px 50px rgba(0,0,0,0.5) !important; }
.auth-title, .auth-msg{ color:var(--text) !important; }
.auth-sub{ color:var(--text-2) !important; }
.auth-x{ color:var(--text-2) !important; }
.auth-switch{ color:var(--primary) !important; }
.auth-form input{ background:var(--card-2) !important; color:var(--text) !important; border:1px solid var(--line) !important; }
.auth-google{ color:var(--text) !important; }
.auth-divider{ color:var(--text-3) !important; }
.auth-divider::before, .auth-divider::after{ background:var(--line) !important; }

/* ── Drag-and-drop admin rows ── */
#catBody tr.drag-over, #sndBody tr.drag-over{ background:var(--card-2) !important; box-shadow:inset 0 3px 0 var(--primary) !important; }
.snd-name:focus{ box-shadow:0 0 0 3px var(--primary-soft) !important; }

/* ── Footer ── */
.footer-bottom{ border-top:1px solid var(--line-strong) !important; }
.footer-col a{ color:rgba(245,247,255,0.78) !important; }
.social-link{ background:rgba(255,255,255,0.08) !important; }

/* ── Timer button (match theme picker size & tint) ── */
.nav-timer-btn{ background:rgba(255,255,255,0.18) !important; }

/* ═══ Membership / Pricing ═══ */
.view#view-pricing{ padding:48px 20px 64px; }
.pricing-wrap{ max-width:1040px; margin:0 auto; }
.pricing-head{ text-align:center; margin-bottom:36px; }
.pricing-head h1{ font-size:clamp(28px,4vw,40px); margin:0 0 10px; color:var(--text); letter-spacing:-0.02em; }
.pricing-head p{ color:var(--text-2); font-size:16px; margin:0; }
.pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch; }
@media (max-width:820px){ .pricing-grid{ grid-template-columns:1fr; max-width:420px; margin:0 auto; } }
.price-card{
  position:relative; background:var(--card); border:1px solid var(--line);
  border-radius:18px; padding:28px 24px; display:flex; flex-direction:column;
  box-shadow:0 10px 30px rgba(0,0,0,0.18);
}
.price-card--best{ border:2px solid var(--primary); box-shadow:0 0 0 1px rgba(139,124,255,0.12), 0 14px 44px rgba(139,124,255,0.28); }
.price-card--current{ outline:2px solid var(--primary); outline-offset:2px; }
.price-badge--current{ background:#27ae60; }
.price-badge{
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:var(--primary); color:#fff; font-size:12px; font-weight:600;
  padding:5px 12px; border-radius:999px; white-space:nowrap;
}
.price-name{ font-size:15px; font-weight:600; color:var(--text-2); text-transform:uppercase; letter-spacing:0.06em; }
.price-amt{ font-size:36px; font-weight:700; color:var(--text); margin:8px 0 2px; }
.price-per{ font-size:15px; font-weight:500; color:var(--text-2); margin-left:4px; }
.price-feats{ list-style:none; padding:0; margin:18px 0 22px; display:flex; flex-direction:column; gap:10px; flex:1; }
.price-feats li{ position:relative; padding-left:24px; color:var(--text); font-size:14.5px; line-height:1.4; }
.price-feats li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--primary); font-weight:700; }
.price-cta{ width:100%; justify-content:center; }
.price-cta:disabled{ opacity:0.7; cursor:default; }
.pricing-note{ text-align:center; color:var(--text-2); font-size:13px; margin-top:28px; }

/* Membership pane (account) */
.mem-card{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:24px; max-width:560px; margin-top:8px; }
.mem-plan{ font-size:22px; font-weight:700; color:var(--text); }
.mem-status{ color:var(--text-2); margin:6px 0 18px; font-size:14.5px; }
.mem-mix{ display:inline-block; margin:0 0 18px; padding:6px 12px; border-radius:999px; font-size:13px; font-weight:600; color:#fff; background:var(--primary); }
.mem-actions .btn-primary{ width:100%; justify-content:center; }
.mem-billed{ color:var(--text-2); font-size:13.5px; margin:0 0 14px; }
.mem-renewal-state{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius:999px;
  background:rgba(239,68,68,.12); color:#ef4444;
  font-size:.9rem; font-weight:600; margin-bottom:10px;
}
.mem-renewal-state::before{
  content:""; width:8px; height:8px; border-radius:50%; background:#ef4444;
}

/* Premium upgrade modal */
.upgrade-modal{ position:fixed; inset:0; z-index:1000; display:none; }
.upgrade-modal.open{ display:block; }
.upgrade-backdrop{ position:absolute; inset:0; background:rgba(5,8,18,0.62); }
.upgrade-card{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(420px, calc(100% - 32px)); background:var(--card);
  border:1px solid var(--line); border-radius:20px; padding:28px 26px;
  box-shadow:0 24px 60px rgba(0,0,0,0.5); text-align:center; color:var(--text);
}
.upgrade-badge{ display:inline-block; background:var(--primary-soft); color:var(--primary); font-size:12px; font-weight:600; padding:4px 12px; border-radius:999px; margin-bottom:12px; }
.upgrade-title{ font-size:22px; margin:0 0 8px; color:var(--text); }
.upgrade-sub{ color:var(--text-2); font-size:14px; line-height:1.5; margin:0 0 20px; }
.upgrade-pp{ display:flex; flex-direction:column; gap:8px; margin-bottom:6px; }
.pp-plan{ text-align:left; font-size:14px; font-weight:600; color:var(--text); margin-top:6px; }
.pp-plan span{ font-size:12px; font-weight:500; opacity:0.8; margin-left:6px; color:var(--primary); }
.pp-btn{ min-height:42px; display:flex; align-items:center; justify-content:center; }
.pp-btn:empty::before{ content:'Loading PayPal…'; color:var(--text-2); font-size:13px; }
.upgrade-later{ margin-top:14px; background:none; border:none; color:var(--text-2); font-size:13px; cursor:pointer; text-decoration:underline; }
.upgrade-x{ position:absolute; top:12px; right:14px; background:none; border:none; color:var(--text-2); font-size:18px; cursor:pointer; }

/* Auth loading states — shown while Supabase session/users row is still resolving */
.nav-auth-loading{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; height:32px; border-radius:999px;
  color:var(--text-2); font-size:12px; font-weight:600; letter-spacing:1px;
}
/* Banner shown on /pricing when the user was bounced here by an exhausted mix quota */
.pricing-blocked{
  display:flex; align-items:center; gap:14px;
  max-width:720px; margin:0 auto 28px;
  padding:16px 20px; border-radius:14px;
  background:color-mix(in srgb, var(--primary) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--primary) 35%, transparent);
}
.pricing-blocked-icon{ font-size:22px; line-height:1; flex:none; }
.pricing-blocked-text{ display:flex; flex-direction:column; gap:4px; flex:1 1 auto; }
.pricing-blocked-text strong{ font-size:15.5px; color:var(--text); }
.pricing-blocked-text span{ font-size:14px; color:var(--text-2); }
.pricing-blocked-cta{ flex:none; white-space:nowrap; }
@media (max-width:600px){
  .pricing-blocked{ flex-wrap:wrap; margin-bottom:20px; padding:14px 16px; }
  .pricing-blocked-text{ flex:1 1 100%; }
  .pricing-blocked-cta{ flex:1 1 100%; justify-content:center; }
  .pricing-blocked-text strong{ font-size:14.5px; }
  .pricing-blocked-text span{ font-size:13px; }
}

/* Free-tier mix quota badge in the nav — makes the limit visible at all times */
.nav-mix-badge{
  display:inline-flex; align-items:center; justify-content:center;
  height:30px; padding:0 12px; margin-right:2px;
  border-radius:999px; border:1px solid color-mix(in srgb, var(--primary) 35%, transparent);
  background:color-mix(in srgb, var(--primary) 12%, transparent); color:var(--primary, #8b7cff);
  font-size:12px; font-weight:700; line-height:1; cursor:pointer;
  white-space:nowrap; transition:background .15s ease, border-color .15s ease;
}
.nav-mix-badge:hover{ background:color-mix(in srgb, var(--primary) 20%, transparent); border-color:color-mix(in srgb, var(--primary) 60%, transparent); }
.nav-mix-badge.out{
  background:rgba(232,90,90,0.12); border-color:rgba(232,90,90,0.4);
  color:#d9534f;
}
.nav-mix-badge.out:hover{ background:rgba(232,90,90,0.2); }
@media (max-width:760px){
  .nav-mix-badge{ height:26px; padding:0 9px; font-size:11px; }
}
.acct-loading{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:200px; color:var(--text-2); font-size:14px; gap:12px;
}

/* ═══ Light themes: flip hard-coded white text / white icons to dark ═══
   These elements paint directly on the (now pale) background, so the
   inherited #fff would be invisible. Everything that sits on a coloured
   button/card (which keeps its own dark background) is left untouched. */
html[data-theme="lilac"] .hero h1,
html[data-theme="lilac"] .hero-sub,
html[data-theme="lilac"] .hero p,
html[data-theme="lilac"] .hero-sound h2,
html[data-theme="lilac"] .hero-sound .sd-desc,
html[data-theme="lilac"] .hero-sound .sd-chips-label,
html[data-theme="lilac"] .sd-h1,
html[data-theme="lilac"] .sd-desc,
html[data-theme="lilac"] .sd-breadcrumb,
html[data-theme="lilac"] .sd-breadcrumb a,
html[data-theme="lilac"] .navbar .nav-item,
html[data-theme="lilac"] .nav-brand,
html[data-theme="lilac"] .nav-logo-text,
html[data-theme="lilac"] .nav-logo-mark,
html[data-theme="lilac"] .site-footer,
html[data-theme="lilac"] .footer,
html[data-theme="lilac"] .footer-col a,
html[data-theme="lilac"] .footer-col a:hover,
html[data-theme="lilac"] .footer-col h4,
html[data-theme="lilac"] .footer-bottom,
html[data-theme="lilac"] .footer-brand strong,
html[data-theme="lilac"] .footer-brand span{ color:#241a3d !important; }

html[data-theme="lilac"] .navbar .logo{ filter:none !important; }
html[data-theme="lilac"] .nav-item:hover,
html[data-theme="lilac"] .nav-brand:hover,
html[data-theme="lilac"] .nav-brand.active{ background:rgba(60,40,90,0.08) !important; }
html[data-theme="lilac"] .nav-item.active{ background:#fff !important; color:var(--purple-deep) !important; }
html[data-theme="lilac"] .nav-toggle span{ background:#241a3d !important; }
html[data-theme="lilac"] .nav-timer-btn{ background:rgba(60,40,90,0.14) !important; }
html[data-theme="lilac"] .nav-timer-btn svg{ color:#241a3d !important; }
html[data-theme="lilac"] .hero-sound .chip{ background:var(--card-2) !important; color:var(--text-2) !important; }
html[data-theme="lilac"] .card:hover .emoji-icon svg,
html[data-theme="lilac"] .card.on .emoji-icon svg{ filter:none !important; color:var(--primary) !important; }
html[data-theme="lilac"] .card.on{ background:var(--sc-on) !important; }
html[data-theme="lilac"] .card.on .cat-tag{ background:var(--primary) !important; color:#fff !important; }
html[data-theme="lilac"] .card.on .toggle{ background:var(--primary) !important; color:#fff !important; }

html[data-theme="sand"] .hero h1,
html[data-theme="sand"] .hero-sub,
html[data-theme="sand"] .hero p,
html[data-theme="sand"] .hero-sound h2,
html[data-theme="sand"] .hero-sound .sd-desc,
html[data-theme="sand"] .hero-sound .sd-chips-label,
html[data-theme="sand"] .sd-h1,
html[data-theme="sand"] .sd-desc,
html[data-theme="sand"] .sd-breadcrumb,
html[data-theme="sand"] .sd-breadcrumb a,
html[data-theme="sand"] .navbar .nav-item,
html[data-theme="sand"] .nav-brand,
html[data-theme="sand"] .nav-logo-text,
html[data-theme="sand"] .nav-logo-mark,
html[data-theme="sand"] .site-footer,
html[data-theme="sand"] .footer,
html[data-theme="sand"] .footer-col a,
html[data-theme="sand"] .footer-col a:hover,
html[data-theme="sand"] .footer-col h4,
html[data-theme="sand"] .footer-bottom,
html[data-theme="sand"] .footer-brand strong,
html[data-theme="sand"] .footer-brand span{ color:#2e261a !important; }

html[data-theme="sand"] .navbar .logo{ filter:none !important; }
html[data-theme="sand"] .nav-item:hover,
html[data-theme="sand"] .nav-brand:hover,
html[data-theme="sand"] .nav-brand.active{ background:rgba(90,70,40,0.08) !important; }
html[data-theme="sand"] .nav-item.active{ background:#fff !important; color:var(--purple-deep) !important; }
html[data-theme="sand"] .nav-toggle span{ background:#2e261a !important; }
html[data-theme="sand"] .nav-timer-btn{ background:rgba(90,70,40,0.14) !important; }
html[data-theme="sand"] .nav-timer-btn svg{ color:#2e261a !important; }
html[data-theme="sand"] .hero-sound .chip{ background:var(--card-2) !important; color:var(--text-2) !important; }
html[data-theme="sand"] .card:hover .emoji-icon svg,
html[data-theme="sand"] .card.on .emoji-icon svg{ filter:none !important; color:var(--primary) !important; }
html[data-theme="sand"] .card.on{ background:var(--sc-on) !important; }
html[data-theme="sand"] .card.on .cat-tag{ background:var(--primary) !important; color:#fff !important; }
html[data-theme="sand"] .card.on .toggle{ background:var(--primary) !important; color:#fff !important; }

/* ── Calm Teal light theme flips ── */
html[data-theme="teal"] .hero h1,
html[data-theme="teal"] .hero-sub,
html[data-theme="teal"] .hero p,
html[data-theme="teal"] .hero-sound h2,
html[data-theme="teal"] .hero-sound .sd-desc,
html[data-theme="teal"] .hero-sound .sd-chips-label,
html[data-theme="teal"] .sd-h1,
html[data-theme="teal"] .sd-desc,
html[data-theme="teal"] .sd-breadcrumb,
html[data-theme="teal"] .sd-breadcrumb a,
html[data-theme="teal"] .navbar .nav-item,
html[data-theme="teal"] .nav-brand,
html[data-theme="teal"] .nav-logo-text,
html[data-theme="teal"] .nav-logo-mark,
html[data-theme="teal"] .site-footer,
html[data-theme="teal"] .footer,
html[data-theme="teal"] .footer-col a,
html[data-theme="teal"] .footer-col a:hover,
html[data-theme="teal"] .footer-col h4,
html[data-theme="teal"] .footer-bottom,
html[data-theme="teal"] .footer-brand strong,
html[data-theme="teal"] .footer-brand span{ color:#0a2c29 !important; }
html[data-theme="teal"] .nav-item:hover,
html[data-theme="teal"] .nav-brand:hover,
html[data-theme="teal"] .nav-brand.active{ background:rgba(20,80,75,0.08) !important; }
html[data-theme="teal"] .nav-item.active{ background:#fff !important; color:var(--purple-deep) !important; }
html[data-theme="teal"] .nav-toggle span{ background:#0a2c29 !important; }
html[data-theme="teal"] .nav-timer-btn{ background:rgba(20,80,75,0.14) !important; }
html[data-theme="teal"] .nav-timer-btn svg{ color:#0a2c29 !important; }
html[data-theme="teal"] .nav-theme-btn{ background:rgba(20,80,75,0.08) !important; }
html[data-theme="teal"] .nav-theme-btn svg{ fill:#0a2c29 !important; }
html[data-theme="teal"] .hero-sound .chip{ background:var(--card-2) !important; color:var(--text-2) !important; }
html[data-theme="teal"] .card:hover .emoji-icon svg,
html[data-theme="teal"] .card.on .emoji-icon svg{ filter:none !important; color:var(--primary) !important; }
html[data-theme="teal"] .card.on{ background:var(--sc-on) !important; }
html[data-theme="teal"] .card.on .cat-tag{ background:var(--primary) !important; color:#fff !important; }
html[data-theme="teal"] .card.on .toggle{ background:var(--primary) !important; color:#fff !important; }

/* ── Forest Mist light theme flips ── */
html[data-theme="forest"] .hero h1,
html[data-theme="forest"] .hero-sub,
html[data-theme="forest"] .hero p,
html[data-theme="forest"] .hero-sound h2,
html[data-theme="forest"] .hero-sound .sd-desc,
html[data-theme="forest"] .hero-sound .sd-chips-label,
html[data-theme="forest"] .sd-h1,
html[data-theme="forest"] .sd-desc,
html[data-theme="forest"] .sd-breadcrumb,
html[data-theme="forest"] .sd-breadcrumb a,
html[data-theme="forest"] .navbar .nav-item,
html[data-theme="forest"] .nav-brand,
html[data-theme="forest"] .nav-logo-text,
html[data-theme="forest"] .nav-logo-mark,
html[data-theme="forest"] .site-footer,
html[data-theme="forest"] .footer,
html[data-theme="forest"] .footer-col a,
html[data-theme="forest"] .footer-col a:hover,
html[data-theme="forest"] .footer-col h4,
html[data-theme="forest"] .footer-bottom,
html[data-theme="forest"] .footer-brand strong,
html[data-theme="forest"] .footer-brand span{ color:#122b1b !important; }
html[data-theme="forest"] .nav-item:hover,
html[data-theme="forest"] .nav-brand:hover,
html[data-theme="forest"] .nav-brand.active{ background:rgba(30,80,45,0.08) !important; }
html[data-theme="forest"] .nav-item.active{ background:#fff !important; color:var(--purple-deep) !important; }
html[data-theme="forest"] .nav-toggle span{ background:#122b1b !important; }
html[data-theme="forest"] .nav-timer-btn{ background:rgba(30,80,45,0.14) !important; }
html[data-theme="forest"] .nav-timer-btn svg{ color:#122b1b !important; }
html[data-theme="forest"] .nav-theme-btn{ background:rgba(30,80,45,0.08) !important; }
html[data-theme="forest"] .nav-theme-btn svg{ fill:#122b1b !important; }
html[data-theme="forest"] .hero-sound .chip{ background:var(--card-2) !important; color:var(--text-2) !important; }
html[data-theme="forest"] .card:hover .emoji-icon svg,
html[data-theme="forest"] .card.on .emoji-icon svg{ filter:none !important; color:var(--primary) !important; }
html[data-theme="forest"] .card.on{ background:var(--sc-on) !important; }
html[data-theme="forest"] .card.on .cat-tag{ background:var(--primary) !important; color:#fff !important; }
html[data-theme="forest"] .card.on .toggle{ background:var(--primary) !important; color:#fff !important; }

/* ═══ Theme switcher button + popup (self-contained dark panel, always legible) ═══ */
.nav-theme-btn{
  width:40px; height:40px; border-radius:50%; border:none; cursor:pointer; margin-left:8px;
  background:rgba(255,255,255,0.18); display:inline-flex; align-items:center; justify-content:center;
  transition:background .15s, transform .12s, box-shadow .15s; color:#fff;
}
.nav-theme-btn:hover{ background:rgba(255,255,255,0.34); transform:translateY(-1px); box-shadow:0 0 16px rgba(230,220,255,0.9); }
.nav-theme-btn svg{ width:22px; height:22px; fill:currentColor; }
html[data-theme="lilac"] .nav-theme-btn{ background:rgba(60,40,90,0.14) !important; }
html[data-theme="lilac"] .nav-theme-btn svg{ fill:#241a3d !important; }
html[data-theme="sand"] .nav-theme-btn{ background:rgba(90,70,40,0.14) !important; }
html[data-theme="sand"] .nav-theme-btn svg{ fill:#2e261a !important; }
html[data-theme="teal"] .nav-theme-btn{ background:rgba(20,80,75,0.14) !important; }
html[data-theme="teal"] .nav-theme-btn svg{ fill:#0a2c29 !important; }
html[data-theme="forest"] .nav-theme-btn{ background:rgba(30,80,45,0.14) !important; }
html[data-theme="forest"] .nav-theme-btn svg{ fill:#122b1b !important; }
@media (max-width:820px){
  .nav-theme-btn{ width:36px; height:36px; }
  .nav-theme-btn svg{ width:20px; height:20px; }
}

.theme-pop{
  position:fixed; top:60px; right:18px; z-index:1300;
  background:rgba(18,18,28,0.97); border:1px solid rgba(255,255,255,0.12);
  border-radius:16px; padding:12px; display:none; box-shadow:0 18px 50px rgba(0,0,0,.45);
}
.theme-pop.open{ display:block; }
.theme-pop-title{ color:#fff; font-size:11px; font-weight:700; opacity:.65; margin:2px 4px 8px; text-transform:uppercase; letter-spacing:.6px; }
.theme-pop-dots{ display:flex; gap:4px; }
.theme-dot{
  position:relative; width:38px; height:38px; border-radius:11px; padding:0;
  border:2px solid rgba(255,255,255,0.14); cursor:pointer; overflow:hidden; background:#222;
  transition:transform .12s;
}
.theme-dot .theme-dot-bg{ position:absolute; inset:0; }
.theme-dot .theme-dot-sw{ position:absolute; right:5px; bottom:5px; width:13px; height:13px; border-radius:50%; box-shadow:0 0 0 2px rgba(255,255,255,.55); }
.theme-dot.active{ border-color:#fff; box-shadow:0 0 0 2px rgba(255,255,255,.55); }
.theme-dot:hover{ transform:translateY(-1px); }
.acct-spin{
  width:26px; height:26px; border:2px solid var(--line); border-top-color:var(--primary);
  border-radius:50%; animation:acctSpin 0.8s linear infinite;
}
@keyframes acctSpin{ to{ transform:rotate(360deg); } }

/* ═══ Focus timer overlay (fullscreen flip-clock) ═══ */
.focus-timer-overlay{
  position:fixed; inset:0; z-index:2000; display:none;
}
.focus-timer-overlay.open{ display:flex; }
.ft-backdrop{
  position:absolute; inset:0; background:rgba(5,8,18,0.78); backdrop-filter:blur(6px);
}
.ft-card{
  position:relative; width:100%; height:100%; max-width:none;
  background:var(--bg); border:none; border-radius:0;
  padding:max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; color:var(--text); gap:28px;
}
.ft-close{
  position:absolute; top:max(16px, env(safe-area-inset-top)); right:max(16px, env(safe-area-inset-right));
  background:none; border:none; color:var(--text-2); font-size:28px; cursor:pointer;
  width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:50%;
  transition:background .15s, color .15s;
}
.ft-close:hover{ background:var(--card-2); color:var(--text); }
.ft-clock{
  display:flex; align-items:center; justify-content:center; gap:14px;
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,sans-serif;
}
.ft-group{
  position:relative; width:min(22vw, 160px); height:min(28vw, 200px); min-width:72px; min-height:96px;
  border-radius:22px; background:var(--card); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; box-shadow:0 16px 40px rgba(0,0,0,0.25), inset 0 2px 6px rgba(0,0,0,.06);
  transform-style:preserve-3d;
}
.ft-val{
  font-size:min(12vw, 96px); font-weight:800; color:var(--text); line-height:1;
  font-variant-numeric:tabular-nums; letter-spacing:-0.02em;
  transform-origin:center center; backface-visibility:hidden;
}
.ft-sep{
  font-size:min(8vw, 64px); font-weight:700; color:var(--text-2); margin-top:-12px;
}
.ft-group.flip .ft-val{
  animation:ftFlip 0.45s ease-in-out;
}
@keyframes ftFlip{
  0%{ transform:rotateX(0deg); opacity:1; }
  50%{ transform:rotateX(-90deg) scale(0.92); opacity:0.55; }
  100%{ transform:rotateX(0deg); opacity:1; }
}
.ft-status{
  font-size:16px; font-weight:700; color:var(--text-2); text-transform:uppercase; letter-spacing:0.1em;
}
.ft-presets{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
}
.ft-presets button{
  border:1px solid var(--line); background:var(--card-2); color:var(--text);
  border-radius:999px; padding:10px 18px; font-size:14px; font-weight:700; cursor:pointer;
  transition:background .15s, transform .12s, color .15s;
}
.ft-presets button:hover{ background:var(--primary-soft); color:var(--primary); transform:translateY(-1px); }
.ft-set{
  display:flex; align-items:center; justify-content:center; gap:12px;
}
.ft-set label{ font-size:14px; color:var(--text-2); font-weight:600; }
.ft-set input{
  width:90px; padding:10px 12px; border-radius:12px; border:1px solid var(--line);
  background:var(--card-2); color:var(--text); font-size:15px; font-weight:700; text-align:center;
}
.ft-actions{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
.ft-actions .btn-ghost{ color:var(--text) !important; }
@media (max-width:560px){
  .ft-group{ border-radius:16px; }
  .ft-val{ font-size:min(18vw, 72px); }
  .ft-sep{ font-size:min(12vw, 48px); }
  .ft-presets button{ padding:8px 14px; font-size:13px; }
}

/* ── Light-theme fixes: progress bar track / sound-detail player / disabled save ── */
html[data-theme="lilac"] .sd-progress,
html[data-theme="sand"] .sd-progress,
html[data-theme="teal"] .sd-progress,
html[data-theme="forest"] .sd-progress{ background:var(--card-2) !important; }

html[data-theme="lilac"] .sd-player,
html[data-theme="sand"] .sd-player,
html[data-theme="teal"] .sd-player,
html[data-theme="forest"] .sd-player{ background:var(--card) !important; border-color:var(--line) !important; }

html[data-theme="lilac"] .sd-nowplaying .sd-player,
html[data-theme="sand"] .sd-nowplaying .sd-player,
html[data-theme="teal"] .sd-nowplaying .sd-player,
html[data-theme="forest"] .sd-nowplaying .sd-player{ background:transparent !important; border:none !important; border-top:1px solid var(--line) !important; box-shadow:none !important; }

html[data-theme="lilac"] .preset-add button:disabled,
html[data-theme="lilac"] .preset-add button.disabled,
html[data-theme="sand"] .preset-add button:disabled,
html[data-theme="sand"] .preset-add button.disabled,
html[data-theme="teal"] .preset-add button:disabled,
html[data-theme="teal"] .preset-add button.disabled,
html[data-theme="forest"] .preset-add button:disabled,
html[data-theme="forest"] .preset-add button.disabled{ background:var(--text-3) !important; color:#fff !important; }

/* Theme popover is always dark so its own text stays white regardless of page theme */
.theme-pop-title{ color:#fff !important; }