:root{
  /* brighter, friendly palette */
  --bg-0: #fbf8ff;
  --bg-1: #ffffff;
  --bg-2: #f2edff;
  --card: #ffffff;
  --text: #1f2330;
  --muted: #5c6175;

  --primary: #7a5cff;           /* bright violet */
  --primary-2: #ff8bd1;         /* pink accent */
  --accent: #26d0ce;            /* teal */
  --good: #21c888;
  --shadow: 0 10px 30px rgba(34, 16, 64, .12);
  --radius: 16px;

  /* mood-reactive accent pair (defaults, updated by JS) */
  --accent-a:#7a5cff;
  --accent-b:#ff8bd1;
}

html[data-theme="dark"]{
  --bg-0:#0d1020;
  --bg-1:#12142a;
  --bg-2:#181a34;
  --card:#171a33;
  --text:#eaeaf6;
  --muted:#9aa0b6;

  --primary:#8f7aff;
  --primary-2:#ff9ad9;
  --accent:#2ddbd7;
  --good:#2fd39a;
  --shadow:0 10px 30px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 10% -10%, #ffd8f1 0%, transparent 60%),
    radial-gradient(1200px 600px at 110% 0%, #d1f8ff 0%, transparent 55%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1));
  font:16px/1.5 "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  letter-spacing:.1px;
}

/* Background blobs */
.bg-blobs{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.blob{ position:absolute; filter:blur(60px); opacity:.35; border-radius:50% }
.blob.b1{ width:520px; height:520px; left:-120px; top:-120px; background:radial-gradient(circle at 30% 30%, #ff9ad9, #7a5cff) }
.blob.b2{ width:460px; height:460px; right:-120px; top:-80px; background:radial-gradient(circle at 30% 30%, #2ddbd7, #7a5cff) }
.blob.b3{ width:560px; height:560px; right:-160px; bottom:-160px; background:radial-gradient(circle at 30% 30%, #ffd68c, #ff8bd1) }
@media (prefers-reduced-motion:no-preference){
  .blob{ animation:float 18s ease-in-out infinite alternate }
  .blob.b2{ animation-duration:22s }
  .blob.b3{ animation-duration:26s }
}
@keyframes float{ from{ transform:translate3d(0,0,0) scale(1) } to{ transform:translate3d(20px,-30px,0) scale(1.05) } }

/* Top bar */
.topbar{
  position:sticky; top:0; z-index:5;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px clamp(16px, 4vw, 28px);
  background:linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.25));
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(100,100,200,.15);
}
html[data-theme="dark"] .topbar{
  background:linear-gradient(180deg, rgba(10,12,30,.75), rgba(10,12,30,.35));
  border-bottom:1px solid rgba(255,255,255,.06);
}
.brand{font-weight:700; letter-spacing:.2px}
.logo{margin-right:.5rem}

/* utility chips / pills */
.chip{
  border:0; border-radius:999px; padding:8px 14px; cursor:pointer;
  background:var(--bg-2); color:var(--text);
  position:relative; transition:transform .12s ease, box-shadow .12s ease;
}
.chip.tiny{padding:5px 8px; font-size:.85rem}
.pill{
  border:0; border-radius:999px; padding:10px 14px; cursor:pointer;
  background:#f4efff; color:#24175d; margin:6px 8px 0 0; box-shadow:var(--shadow);
  position:relative; transition:transform .12s ease, box-shadow .12s ease;
}
html[data-theme="dark"] .pill{background:#2a2550; color:#dcd8ff}
.pill.active{
  background:linear-gradient(135deg, var(--accent-a), var(--accent-b)); color:white
}
.btn-group{display:flex; flex-wrap:nowrap; gap:8px; overflow:auto; padding-bottom:4px}
.btn-group.wrap{flex-wrap:wrap}
.pill:active,.chip:active,.cta:active{ transform:translateY(1px) scale(.99) }

.cta{
  border:0; border-radius:14px; padding:12px 16px; cursor:pointer;
  color:white; font-weight:600; letter-spacing:.2px; margin-top:14px;
  background:linear-gradient(135deg, var(--accent-a), var(--accent-b));
  box-shadow:var(--shadow);
  transition:transform .12s ease, box-shadow .12s ease;
}
.cta.small{padding:10px 14px}

/* ===== Layout grid (3 columns) ===== */
.container{
  max-width:1320px; margin:28px auto 80px; padding:0 20px;
  display:grid; gap:28px; align-items:start;
  grid-template-columns: 340px minmax(0,1fr) 400px;  /* left / center / right */
}
.panel{
  background:color-mix(in srgb, var(--card) 94%, transparent);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
  border:1px solid rgba(120,120,200,.12);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
@media (hover:hover){ .panel:hover{ transform:translateY(-2px); box-shadow:0 10px 36px rgba(20,16,60,.16) } }
.panel.inner{padding:16px}
.panel-title{margin:0 0 12px; font-size:1.1rem}

/* Gradient headings */
.panel-title, #newReleases h3, #wellnessCard h3{
  background: linear-gradient(135deg,var(--accent-a),var(--accent-b));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Accessible focus */
:focus-visible{
  outline:3px solid color-mix(in srgb, var(--accent-a) 55%, transparent);
  outline-offset:2px; border-radius:12px;
}

/* Responsive: 2 columns, then 1 */
@media (max-width: 1200px){
  .container{grid-template-columns: 340px minmax(0,1fr);}
  .right{grid-column: 2 / 3;}
}
@media (max-width: 820px){
  .container{grid-template-columns: 1fr}
  .right{grid-column: 1 / -1;}
}

/* Left controls */
.subtle{color:var(--muted); font-size:.9rem}
.mt{margin-top:8px}
input[type="range"]{width:100%; margin:10px 0}

/* Quote card */
.quote-card{
  margin-top:16px; padding:14px; border-radius:14px;
  background:linear-gradient(135deg,#ffe6f5,#f0e7ff);
  color:#2a1a50; box-shadow:var(--shadow);
}
html[data-theme="dark"] .quote-card{
  background:linear-gradient(135deg,#3a2144,#1e234c); color:#eee5ff;
}
.quote-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px}
blockquote{margin:0; font-style:italic}

/* Embed card */
.embed-card{margin-top:16px}
.embed-row{display:flex; gap:8px}
.embed-row input{
  flex:1; border-radius:12px; border:1px solid rgba(120,120,200,.25);
  padding:10px 12px; background:var(--bg-1); color:var(--text)
}
.hint{color:var(--muted); margin:.25rem 0}
.hint.tiny{font-size:.85rem}

/* Player */
.player-wrap iframe{
  width:100%; min-height:352px; border:0; border-radius:14px; overflow:hidden;
  background:#0a0a0a;
}
.tip{color:var(--muted); margin:8px 2px 0}

/* New releases */
.genre-chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px}
.embed-wrap iframe{width:100%; border:0; border-radius:12px}

/* Wellness list */
#wellnessCard h3{margin:0 0 10px}
.wellness{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.wellness li{display:flex; gap:10px; align-items:center; padding:10px 12px; border-radius:12px; background:var(--bg-2)}
.ico{width:24px; text-align:center}

/* Modal */
.modal{border:0; padding:0; background:transparent}
.modal::backdrop{background:rgba(0,0,0,.45)}
.modal-card{background:var(--card); border-radius:18px; padding:16px; min-width:280px; max-width:520px; box-shadow:var(--shadow)}
textarea{width:100%; resize:vertical; border-radius:12px; border:1px solid rgba(120,120,200,.25); padding:10px}
.top-actions{display:flex; gap:8px}

/* --- Wellness upgrade --- */
.wellness-card{
  border:1px solid rgba(120,120,200,.18);
  border-radius:14px; padding:12px; margin:12px 0;
  background:var(--bg-1);
}
html[data-theme="dark"] .wellness-card{background:var(--bg-2)}
.wellness-head{display:flex; align-items:center; justify-content:space-between; gap:10px}
.w-title{font-weight:600; display:flex; align-items:center; gap:10px}
.w-controls{display:flex; gap:6px}
.chip.ghost{background:transparent; border:1px solid rgba(120,120,200,.25)}
.wellness-body{margin-top:10px}
.wellness-body.row{display:flex; align-items:center; gap:12px}

/* Breathing */
.breath-visual{display:grid; place-items:center; gap:6px}
.breath-circle{
  width:96px; height:96px; border-radius:50%;
  background: radial-gradient( circle at 30% 30%, var(--primary-2), var(--primary) );
  box-shadow: 0 8px 30px color-mix(in srgb, var(--accent-a) 35%, transparent);
  border: 2px solid color-mix(in srgb, var(--accent-b) 30%, transparent);
  transform: scale(1);
}
.breath-circle.animate-inhale{animation:breathIn 4s linear forwards}
.breath-circle.animate-hold{animation:breathHold 4s linear forwards}
.breath-circle.animate-exhale{animation:breathOut 4s linear forwards}
@keyframes breathIn { from{transform:scale(1)} to{transform:scale(1.25)} }
@keyframes breathHold { from{transform:scale(1.25)} to{transform:scale(1.25)} }
@keyframes breathOut { from{transform:scale(1.25)} to{transform:scale(1)} }
.breath-step{font-weight:600}
.breath-timer{font-variant-numeric:tabular-nums; color:var(--muted)}

/* Eye timer */
.eye-timer{
  width:64px; height:64px; border-radius:12px;
  display:grid; place-items:center; font-weight:700;
  color:#fff; background:linear-gradient(135deg,var(--accent),var(--primary));
  box-shadow:var(--shadow); font-size:1.1rem;
}

/* Water */
.water-row{display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:center}
.water-count{font-weight:700}
.water-bar{height:12px; background:rgba(120,120,200,.18); border-radius:999px; overflow:hidden}
.water-fill{
  height:100%; background:linear-gradient(135deg,var(--good),var(--accent));
  position:relative; overflow:hidden;
}
@media (prefers-reduced-motion:no-preference){
  .water-fill::after{
    content:""; position:absolute; inset:0; translate:-100% 0;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
    animation:shine 2.6s linear infinite;
  }
  @keyframes shine{ to{ translate:100% 0 } }
}