/* Dozely — dark, calm, sleep-friendly. One stylesheet, no framework. */
:root {
  --bg: #0b0e14;
  --bg2: #11151f;
  --card: #161b27;
  --card2: #1c2230;
  --ink: #eef1f7;
  --muted: #8a93a6;
  --line: #232a3a;
  --accent: #7aa2ff;
  --accent2: #b79cff;
  --deep: #5b6cff;
  --light: #6fc3ff;
  --awake: #ffb86b;
  --gold: #ffd27a;
  --danger: #ff6b6b;
  --safe: env(safe-area-inset-top);
  --safeb: env(safe-area-inset-bottom);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(120% 80% at 50% -10%, #161d2e 0%, var(--bg) 55%);
  color: var(--ink);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
#app { min-height: 100%; }
.screen { padding: calc(18px + var(--safe)) 18px 96px; max-width: 560px; margin: 0 auto; }
h1 { font-size: 26px; margin: 0; letter-spacing: -0.02em; }
h3.sec { font-size: 15px; color: var(--muted); margin: 26px 0 10px; font-weight: 600; }
.muted { color: var(--muted); }
.fine { color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.lead { color: #c7cede; font-size: 17px; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }

/* header */
.hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.hd .muted { margin: 2px 0 0; font-size: 13.5px; }
.back { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--card); color: var(--ink); margin-right: 4px; }

/* pills + buttons */
.pill { background: var(--card2); color: var(--ink); border: 1px solid var(--line); padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.pill.gold { background: linear-gradient(120deg, #3a2f14, #2a2310); color: var(--gold); border-color: #4a3c1c; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(120deg, var(--accent), var(--accent2)); color: #0b0e14; font-weight: 700; padding: 14px 18px; border-radius: 14px; width: 100%; }
.btn:active { transform: scale(0.98); }
.btn.big { padding: 16px; font-size: 17px; margin-top: 8px; }
.btn.ghost { background: var(--card); color: var(--ink); border: 1px solid var(--line); font-weight: 600; }
.btn.stop { background: var(--card2); color: var(--ink); border: 1px solid var(--line); width: auto; padding: 14px 28px; }

/* onboarding */
.onboard { text-align: center; padding-top: calc(40px + var(--safe)); display: flex; flex-direction: column; min-height: 100vh; }
.ob-hero { color: var(--accent2); display: grid; place-items: center; margin-bottom: 8px; }
.onboard h1 { font-size: 34px; margin: 8px 0; }
.ob-list { list-style: none; padding: 0; margin: 22px 0; text-align: left; }
.ob-list li { display: flex; align-items: center; gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin-bottom: 10px; color: #c7cede; }
.ob-list li svg { color: var(--accent); flex: 0 0 auto; }
.ob-list b { color: var(--ink); }
.onboard .btn { margin-top: auto; }

/* home */
.lastcard { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px; }
.lc-meta { flex: 1; }
.lc-label { font-weight: 700; }
.lc-sub { color: var(--muted); font-size: 13px; margin-top: 2px; }
.chev { color: var(--muted); display: grid; place-items: center; }
.streak { background: var(--card2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; margin-top: 12px; font-size: 14px; color: var(--gold); }
.empty { text-align: center; background: var(--card); border: 1px dashed var(--line); border-radius: 18px; padding: 28px 18px; color: var(--muted); }
.empty .btn { margin-top: 14px; }
.start-wrap { text-align: center; margin-top: 34px; }
.startbtn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--ink); width: 184px; height: 184px; border-radius: 50%; background: radial-gradient(120% 120% at 50% 20%, #222c45, #141a28); border: 1px solid #2a3350; box-shadow: 0 0 0 1px #232a3a, 0 18px 50px -18px rgba(91,108,255,0.4); font-weight: 700; font-size: 17px; }
.startbtn svg { color: var(--accent2); }
.startbtn:active { transform: scale(0.98); }
.start-wrap .fine { margin-top: 16px; }

/* recording overlay */
.rec { position: fixed; inset: 0; background: #05070c; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: calc(24px + var(--safe)) 20px; text-align: center; }
.rec-top { color: var(--muted); font-size: 13px; display: flex; align-items: center; gap: 8px; position: absolute; top: calc(22px + var(--safe)); }
.rec-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--danger); animation: pulse 1.6s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.meter-wrap { position: relative; width: 240px; height: 240px; display: grid; place-items: center; }
.meter { position: absolute; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, #7aa2ff 0%, #5b6cff 60%, transparent 72%); opacity: 0.3; transition: transform 0.12s ease-out, opacity 0.12s; will-change: transform, opacity; }
.clock { position: relative; font-size: 46px; font-weight: 300; letter-spacing: 0.02em; color: #dde4f3; }
.rec-elapsed { color: var(--muted); font-size: 14px; }
.rec.waking { animation: dawn 4s ease forwards; }
@keyframes dawn { from { background-color: #05070c; } to { background-color: #1a2236; } }

/* report */
.report-hero { display: grid; place-items: center; margin: 6px 0 18px; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cell { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 10px; text-align: center; }
.cell b { display: block; font-size: 20px; }
.cell span { color: var(--muted); font-size: 12px; }
.hypno { position: relative; height: 30px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.hypno .seg { position: absolute; top: 0; bottom: 0; }
.seg.deep { background: var(--deep); }
.seg.light { background: var(--light); opacity: 0.8; }
.seg.awake { background: var(--awake); }
.legend { display: flex; gap: 16px; color: var(--muted); font-size: 12px; margin: 8px 2px 0; }
.legend .dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; vertical-align: middle; }
.dot.deep { background: var(--deep); } .dot.light { background: var(--light); } .dot.awake { background: var(--awake); }
.env { display: flex; align-items: flex-end; gap: 1px; height: 56px; margin-top: 14px; padding: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.env span { flex: 1; background: linear-gradient(var(--accent), var(--accent2)); border-radius: 2px; min-height: 2px; opacity: 0.85; }

/* clips */
.cliplist { display: flex; flex-direction: column; gap: 8px; }
.clip { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.play { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; background: var(--card2); color: var(--accent); display: grid; place-items: center; }
.clip-meta { display: flex; flex-direction: column; }
.clip-meta .muted { font-size: 12.5px; }
.lockmore { margin-top: 4px; }

/* history */
.hrow { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; margin-bottom: 8px; }
.hr-meta { flex: 1; }
.hr-meta .muted { font-size: 12.5px; }
.trends { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px; }
.trend-line { margin: 12px 2px 0; font-size: 14px; color: #c7cede; }
.trend-line .improving { color: #5ad6a0; } .trend-line .worsening { color: var(--awake); } .trend-line .flat { color: var(--muted); }
.locked-trends, .upsell { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: linear-gradient(120deg, #1a2030, #181d2a); border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
.locked-trends > svg:first-child, .upsell > svg:first-child { color: var(--accent2); flex: 0 0 auto; }
.locked-trends div, .upsell div { flex: 1; }
.locked-trends b, .upsell b { display: block; }
.locked-trends span, .upsell span { color: var(--muted); font-size: 13px; }

/* alarm */
.alarm-face { text-align: center; padding: 18px 0 6px; }
.timeinput { background: var(--card); border: 1px solid var(--line); color: var(--ink); font-size: 40px; padding: 10px 18px; border-radius: 16px; text-align: center; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin-top: 10px; width: 100%; text-align: left; }
.row.toggle.locked { opacity: 0.7; }
.row b { display: block; }
.row .muted { font-size: 12.5px; }
.row.link { color: var(--ink); }
.row input[type=checkbox] { width: 50px; height: 30px; appearance: none; -webkit-appearance: none; background: var(--card2); border: 1px solid var(--line); border-radius: 999px; position: relative; transition: 0.2s; flex: 0 0 auto; }
.row input[type=checkbox]::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #6b7488; transition: 0.2s; }
.row input[type=checkbox]:checked { background: linear-gradient(120deg, var(--accent), var(--accent2)); }
.row input[type=checkbox]:checked::after { left: 23px; background: #0b0e14; }

/* paywall */
.paywall { padding: calc(14px + var(--safe)) 18px 40px; max-width: 560px; margin: 0 auto; }
.pw-hero { text-align: center; color: var(--accent2); margin: 8px 0 18px; }
.pw-hero h1 { color: var(--ink); margin: 8px 0 4px; }
.pw-feats { list-style: none; padding: 0; margin: 0 0 20px; }
.pw-feats li { display: flex; align-items: center; gap: 10px; padding: 8px 4px; color: #c7cede; }
.pw-feats svg { color: #5ad6a0; flex: 0 0 auto; }
.plans { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.plan { display: flex; align-items: center; justify-content: space-between; background: var(--card); border: 2px solid var(--line); border-radius: 16px; padding: 16px; position: relative; }
.plan.best { border-color: var(--accent); }
.plan.sel { border-color: var(--accent2); background: var(--card2); }
.plan .tag { position: absolute; top: -10px; left: 16px; background: linear-gradient(120deg, var(--accent), var(--accent2)); color: #0b0e14; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.plan b { font-size: 16px; }
.plan .price { font-size: 20px; font-weight: 700; }
.plan .price small { font-size: 12px; color: var(--muted); font-weight: 500; margin-left: 2px; }
.restore { display: block; width: 100%; text-align: center; color: var(--muted); padding: 12px; margin-top: 4px; font-size: 14px; }

/* tab bar */
.tabs { position: fixed; bottom: 0; left: 0; right: 0; display: flex; background: rgba(11, 14, 20, 0.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); padding: 8px 0 calc(8px + var(--safeb)); z-index: 5; }
.tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--muted); font-size: 11px; padding: 4px 0; }
.tab.on { color: var(--accent); }
.about { margin-top: 24px; display: flex; flex-direction: column; gap: 8px; }

/* score ring */
.ring { display: block; }
.ring-bg { fill: none; stroke: var(--line); stroke-width: 8; }
.ring-fg { fill: none; stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset 0.6s ease; }
.ring-num { fill: var(--ink); text-anchor: middle; dominant-baseline: middle; font-weight: 700; }

@media (max-width: 360px) { .grid { grid-template-columns: repeat(2, 1fr); } }