:root {
  --bg-0: #070a13;
  --bg-1: #0a0e1a;
  --surface: #0e1422;
  --surface-2: #121a2c;
  --border: #1c2740;
  --border-strong: #2a3a5c;
  --text-0: #f2f5fb;
  --text-1: #c3ccdc;
  --text-2: #7c89a3;
  --accent: #2dd4bf;
  --accent-2: #818cf8;
  --grad: linear-gradient(135deg, #2dd4bf, #818cf8);
  --radius: 16px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: radial-gradient(circle at 80% -10%, rgba(129,140,248,.12), transparent 30%), var(--bg-0);
  color: var(--text-1);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3 { color: var(--text-0); line-height: 1.1; letter-spacing: -.02em; }
button { font-family: inherit; cursor: pointer; }

#app { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }

/* ── Sidebar ── */
.sidebar {
  position: sticky; top: 0; height: 100vh;
  border-right: 1px solid var(--border);
  background: var(--bg-1);
  padding: 26px 18px;
  display: flex; flex-direction: column; gap: 26px;
}
.brand { display: flex; align-items: center; gap: 11px; font-size: 1.2rem; font-weight: 700; color: var(--text-0); }
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: var(--grad); color: #04141f; font-size: 1.1rem; }
.nav { display: flex; flex-direction: column; gap: 4px; }
.nav a { padding: 11px 13px; border-radius: 11px; color: var(--text-2); font-size: .92rem; font-weight: 500; transition: .15s; }
.nav a:hover { background: var(--surface); color: var(--text-0); }
.nav a.active { background: var(--surface-2); color: var(--text-0); box-shadow: inset 2px 0 0 var(--accent); }
.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.plan-pill { align-self: flex-start; padding: 5px 11px; border-radius: 99px; font-size: .72rem; font-weight: 700; background: rgba(45,212,191,.12); color: var(--accent); border: 1px solid rgba(45,212,191,.3); }
.link-btn { background: none; border: 0; color: var(--text-2); font-size: .85rem; text-align: left; padding: 0; }
.link-btn:hover { color: var(--text-0); }

/* ── Content ── */
.content { padding: 40px 48px 120px; max-width: 1100px; }
.eyebrow { color: var(--accent); font-size: .75rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 700; }
.lede { font-size: 1.12rem; color: var(--text-1); max-width: 620px; line-height: 1.7; }
.page-head { margin-bottom: 28px; }
.page-head h1 { font-size: clamp(2rem, 4vw, 3rem); margin: 10px 0 8px; }
.page-head p { color: var(--text-2); max-width: 560px; }

/* ── Hero ── */
.hero { padding: 30px 0 44px; }
.hero h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); margin: 16px 0 18px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 26px 0; }
.proof { display: flex; gap: 22px; flex-wrap: wrap; color: var(--text-2); font-size: .85rem; }
.proof span { display: flex; align-items: center; gap: 7px; }
.proof span:before { content: '✓'; color: var(--accent); }

.btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 12px; font-weight: 600; font-size: .92rem; border: 1px solid transparent; transition: .15s; }
.btn.primary { background: var(--grad); color: #04141f; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { background: var(--surface-2); color: var(--text-0); border-color: var(--border); }
.btn.ghost:hover { border-color: var(--border-strong); }

/* ── Rows / grids ── */
.row { margin-bottom: 40px; }
.row-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; }
.row-head h2 { font-size: 1.4rem; }
.row-head a { color: var(--accent); font-size: .85rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }

/* ── Cards ── */
.card { position: relative; padding: 22px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); transition: .18s; cursor: pointer; }
.card:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.card.fav { border-color: rgba(129,140,248,.4); }
.card-icon { font-size: 1.8rem; margin-bottom: 12px; }
.card h3 { font-size: 1.12rem; margin: 0 0 6px; }
.card p { font-size: .78rem; color: var(--text-2); margin: 0 0 16px; min-height: 34px; }
.card-foot { display: flex; justify-content: space-between; align-items: center; }
.play-btn { background: var(--grad); color: #04141f; border: 0; padding: 8px 16px; border-radius: 9px; font-weight: 600; font-size: .82rem; }
.badge { font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; padding: 3px 8px; border-radius: 99px; font-weight: 700; }
.badge.free { background: rgba(45,212,191,.13); color: var(--accent); }
.badge.calm { background: rgba(129,140,248,.15); color: var(--accent-2); }
.fav-btn { position: absolute; top: 14px; right: 14px; background: none; border: 0; font-size: 1.1rem; color: var(--text-2); }

/* ── Mixer ── */
.mixer { margin-top: 30px; padding: 24px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.mixer h3 { margin: 0 0 16px; }
.mixer-row { display: grid; grid-template-columns: 1fr 160px auto; gap: 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--border); }
.mixer-row span { font-size: .88rem; color: var(--text-0); }
.mixer-row input[type=range] { width: 100%; accent-color: var(--accent); }
.timer-row { margin-top: 18px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.timer-row label { font-size: .85rem; color: var(--text-2); }
.chips { display: flex; gap: 8px; }
.chip { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-1); padding: 7px 13px; border-radius: 9px; font-size: .8rem; }
.chip.active { background: rgba(45,212,191,.14); border-color: var(--accent); color: var(--accent); }

/* ── Library ── */
.sub { font-size: 1.05rem; color: var(--text-2); margin: 26px 0 14px; text-transform: uppercase; letter-spacing: .06em; font-size: .78rem; }
.history { display: flex; flex-wrap: wrap; gap: 10px; }
.history span { font-size: .82rem; color: var(--text-1); padding: 8px 13px; border: 1px solid var(--border); border-radius: 99px; background: var(--surface); }
.muted { color: var(--text-2); font-size: .9rem; }

/* ── Player bar ── */
.player { position: fixed; bottom: 0; left: 248px; right: 0; z-index: 40;
  display: flex; align-items: center; gap: 24px; padding: 16px 28px;
  background: rgba(10,14,26,.92); backdrop-filter: blur(14px); border-top: 1px solid var(--border); }
.player-info { display: flex; flex-direction: column; gap: 3px; min-width: 200px; }
.player-kind { font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); font-weight: 700; }
.player-info strong { color: var(--text-0); font-size: .98rem; }
.player-controls { display: flex; align-items: center; gap: 14px; }
.round { width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--grad); color: #04141f; font-size: 1rem; display: grid; place-items: center; }
.player-time { font-size: .82rem; color: var(--text-2); font-variant-numeric: tabular-nums; min-width: 48px; }
.player-extra { flex: 1; display: flex; justify-content: flex-end; }

/* ── Breathing ── */
.breath-wrap { display: flex; align-items: center; gap: 16px; }
.breath { width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle, var(--accent), var(--accent-2)); opacity: .85; transition: transform 4s ease, opacity 4s ease; }
.breath.in { transform: scale(1.5); opacity: 1; }
.breath.hold { transform: scale(1.5); opacity: .9; }
.breath.out { transform: scale(.7); opacity: .6; }
#breathLabel { font-size: .85rem; color: var(--text-1); max-width: 280px; }

/* ── Modal ── */
.modal-back { position: fixed; inset: 0; background: rgba(3,6,12,.72); display: grid; place-items: center; z-index: 100; padding: 20px; }
.modal { position: relative; width: min(440px, 92vw); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 18px; padding: 30px; color: var(--text-1); }
.modal h2 { margin: 0 0 14px; }
.modal h3 { margin: 22px 0 12px; font-size: 1rem; }
.modal hr { border: 0; border-top: 1px solid var(--border); margin: 22px 0; }
.modal-x { position: absolute; top: 16px; right: 18px; background: none; border: 0; color: var(--text-2); font-size: 1.5rem; }
.field { display: block; margin: 14px 0; font-size: .82rem; color: var(--text-2); }
.field input { width: 100%; margin-top: 7px; padding: 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-0); color: var(--text-0); font: inherit; }
.plan-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.plan-opt { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 14px 8px; color: var(--text-1); display: flex; flex-direction: column; gap: 4px; align-items: center; }
.plan-opt b { color: var(--text-0); font-size: .95rem; }
.plan-opt span { font-size: .72rem; color: var(--text-2); }
.plan-opt.sel { border-color: var(--accent); background: rgba(45,212,191,.1); }
.modal .btn.primary { width: 100%; justify-content: center; margin-top: 14px; }
.small { font-size: .73rem; }

/* ── Responsive ── */
@media (max-width: 860px) {
  #app { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; flex-direction: row; align-items: center; gap: 16px; overflow-x: auto; }
  .nav { flex-direction: row; }
  .sidebar-foot { margin: 0 0 0 auto; flex-direction: row; align-items: center; }
  .content { padding: 26px 20px 130px; }
  .player { left: 0; }
  .mixer-row { grid-template-columns: 1fr; }
}