:root { --bg:#f4f4f8; --card:#fff; --ink:#2b2d42; --accent:#ef6f6c; --muted:#8d99ae; }
* { box-sizing:border-box; }
body { margin:0; font-family:-apple-system,Segoe UI,Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg); color:var(--ink); }
.hidden { display:none !important; }
main { max-width:480px; margin:0 auto; padding:16px; }
.brand { text-align:center; font-size:1.4rem; margin:8px 0 16px; }
.card { background:var(--card); border-radius:16px; padding:20px; margin-bottom:16px;
  box-shadow:0 2px 8px rgba(0,0,0,.06); }
.timer { font-size:3rem; font-weight:700; text-align:center; margin:8px 0; }
.hint { text-align:center; color:var(--muted); margin:8px 0 16px; }
.bar { height:12px; background:#e2e6ee; border-radius:999px; overflow:hidden; }
.bar-fill { height:100%; width:0; background:var(--accent); transition:width .4s; }
button { display:block; width:100%; padding:14px; border:none; border-radius:12px;
  font-size:1rem; font-weight:600; cursor:pointer; margin:8px 0; }
.primary { background:var(--accent); color:#fff; }
.secondary { background:#e7ecf3; color:var(--ink); }
.ghost { background:transparent; color:var(--muted); }
.overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); display:flex;
  align-items:center; justify-content:center; padding:16px; z-index:10; }
.card.calm { text-align:center; min-height:260px; display:flex; flex-direction:column;
  justify-content:center; }
select { width:100%; padding:12px; border:1px solid #d5dae2; border-radius:10px; margin:4px 0 12px; }
label { font-size:.85rem; color:var(--muted); }
.err { color:#d93636; font-size:.85rem; }