/* Colours and type lifted from lib/theme.ts so the page reads as part of the app. */
:root{--bg:#0B0D10;--card:#15181C;--ink:#F5F6F7;--muted:#8A9099;--accent:#3E7BFA;--accent-soft:#152238;--accent-text:#9CC3FF;--track:#1F2328;--border:#2A2F36;--violet:#8C7CF0;--violet-soft:#2A2454;--violet-text:#C9BBFC;--green:#41C873;--green-soft:#163B24;--green-text:#95E4B2;--rose:#E467A2;--rose-soft:#45172C;--rose-text:#F2A6C9;--danger:#E0665A;--danger-soft:#3A1F1C;--danger-text:#F2948A;--amber-text:#F2C488}
*{box-sizing:border-box}
html{color-scheme:dark;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;-webkit-font-smoothing:antialiased}
main{max-width:480px;margin:0 auto;padding:20px 20px calc(40px + env(safe-area-inset-bottom))}
.brand{display:flex;align-items:center;gap:10px;margin-bottom:22px}
.brand svg{width:34px;height:34px;flex:none}
.brand-name{font-weight:800;font-size:17px}
.brand-sub{color:var(--muted);font-size:13px;margin-left:auto}
h1{font-size:22px;font-weight:800;margin:0 0 8px;letter-spacing:-.2px}
h2{font-size:13px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin:26px 0 10px}
p{margin:0 0 12px}
.muted{color:var(--muted);font-size:13.5px;line-height:1.45}
.card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:16px;margin-bottom:12px}
.hero{border-color:var(--accent);text-align:center;padding:22px 16px}
.hero .day{font-size:40px;font-weight:800;color:var(--accent-text);letter-spacing:-.5px;line-height:1}
.hero .of{color:var(--muted);font-size:13px;margin-top:6px}
.hero .phase{font-size:16px;font-weight:700;margin-top:16px}
.hero .phase-line{color:var(--muted);font-size:13.5px;margin-top:6px;line-height:1.45}
.stats{display:flex;gap:10px;margin-bottom:12px}
.stat{flex:1;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:14px 12px}
.stat .v{font-size:26px;font-weight:800;line-height:1.1}
.stat .l{color:var(--muted);font-size:12.5px;margin-top:4px;font-weight:600}
.stat .asof{color:var(--amber-text);font-size:11.5px;margin-top:6px;font-weight:600}
.stat.streak .v{color:var(--accent-text)}
.stat.perfect .v{color:var(--green-text)}
.today{display:flex;align-items:center;gap:12px}
.dot{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--border);background:var(--track);flex:none;display:flex;align-items:center;justify-content:center}
.dot.done{background:var(--green);border-color:var(--green)}
.dot svg{width:12px;height:12px}
.today .t{font-weight:700;font-size:14px}
.today .s{color:var(--muted);font-size:13px}
label{display:block;font-size:13px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin:0 0 8px}
input,select,textarea{width:100%;background:var(--card);color:var(--ink);border:1px solid var(--border);border-radius:14px;padding:13px 14px;font-size:16px;font-family:inherit;outline:none;-webkit-appearance:none;appearance:none}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
input.code{font-size:22px;font-weight:700;letter-spacing:6px;text-transform:uppercase;text-align:center}
textarea{resize:none;min-height:64px;line-height:1.4}
.field{margin-bottom:14px}
.counter{color:var(--muted);font-size:12px;text-align:right;margin-top:6px}
button{font-family:inherit;cursor:pointer}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border:0;border-radius:16px;padding:15px;font-size:16px;font-weight:700;color:#fff;background:var(--accent)}
.btn.rose{background:var(--rose)}
.btn.violet{background:var(--violet)}
.btn.ghost{background:transparent;color:var(--muted);border:1px solid var(--border);font-size:14px;padding:12px}
.btn.danger{background:transparent;color:var(--danger-text);border:1px solid var(--border);font-size:14px;padding:12px}
.btn:disabled{opacity:.4;cursor:default}
.error{color:var(--danger-text);font-weight:600;font-size:13.5px;margin:10px 0 0}
.ok{color:var(--green-text);font-weight:600;font-size:13.5px;margin:10px 0 0}
.chips{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.chip{display:block;width:100%;text-align:left;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px 14px;color:var(--ink);font-size:14px;line-height:1.35}
.chip.on{border-color:var(--rose);background:var(--rose-soft);color:var(--rose-text)}
.window{border-color:var(--violet)}
.window .range{font-size:20px;font-weight:800;color:var(--violet-text)}
.window .basis{color:var(--muted);font-size:13px;margin-top:6px}
.consent{background:var(--violet-soft);border:1px solid var(--violet);border-radius:14px;padding:12px 14px;font-size:13.5px;line-height:1.45;color:var(--violet-text);margin-bottom:14px}
.row{display:flex;gap:10px}
.row>*{flex:1}
.footer{margin-top:30px;padding-top:18px;border-top:1px solid var(--border)}
.footer p{font-size:12.5px;color:var(--muted);line-height:1.45}
.spinner{color:var(--muted);text-align:center;padding:60px 0}
.hidden{display:none !important}
.mt{margin-top:10px}