:root{
  --bg:#16130f; --bg2:#1f1b16; --card:#241f1a; --line:#3a322a;
  --text:#f4ede6; --muted:#b5a89b; --dim:#857869;
  --accent:#976342; --accent-hi:#b87b55; --accent-soft:rgba(151,99,66,.18);
  --hold:#d9a066; --rest:#6f9a8d; --warn:#e0a63c; --danger:#d0644f;
  --r:18px; --tap:56px;
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
  font-synthesis:none;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);
  font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
body{min-height:100dvh;padding-top:var(--safe-t)}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
button:focus-visible,textarea:focus-visible,input:focus-visible{outline:3px solid var(--accent-hi);outline-offset:2px}
h1,h2,h3{line-height:1.15;margin:0}
b{font-weight:650}

.topbar{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;
  padding:10px 16px;background:rgba(22,19,15,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{display:flex;gap:10px;align-items:center;background:none;border:0;padding:6px 0;font-size:1.05rem;letter-spacing:.2px}
.brand b{color:var(--accent-hi)}
.safety-pill{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid rgba(224,166,60,.5);
  background:rgba(224,166,60,.12);color:#f2c46b;font-weight:600;font-size:.95rem}

main{max-width:560px;margin:0 auto;padding:16px 16px calc(96px + var(--safe-b))}
.screen{display:none;animation:fade .25s ease}
.screen.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.progress-strip{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--r);
  background:linear-gradient(135deg,var(--accent-soft),transparent 70%),var(--card);border:1px solid var(--line)}
.stat{display:flex;flex-direction:column;align-items:center;min-width:64px}
.stat.last{align-items:flex-start;flex:1;min-width:0}
.stat-num{font-size:2.2rem;font-weight:750;color:var(--accent-hi);font-variant-numeric:tabular-nums;line-height:1}
.stat-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.stat-text{font-size:.92rem;color:var(--text)}
.stat-divider{width:1px;align-self:stretch;background:var(--line)}

.hero{padding:28px 4px 20px;text-align:left}
.hero h1{font-size:2.1rem;font-weight:780;letter-spacing:-.5px}
.hero h1 span{color:var(--accent-hi)}
.sub{color:var(--muted);margin:12px 0 22px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap);
  padding:0 22px;border-radius:14px;border:1px solid transparent;font-weight:650;font-size:1.05rem;transition:transform .08s,background .2s}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 8px 24px -10px rgba(151,99,66,.8)}
.btn-primary:hover{background:var(--accent-hi)}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--text)}
.btn-danger-ghost{background:transparent;border:0;color:var(--danger);width:100%;margin-top:6px}
.btn-xl{width:100%;min-height:72px;font-size:1.3rem;border-radius:18px;margin-bottom:10px}
.hero .btn-ghost{width:100%}
.btn-grow{flex:1}
.btn-small{min-height:44px;padding:0 14px;font-size:.9rem}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;margin:14px 0}
.card h2{font-size:1.1rem;margin-bottom:10px}
.small-h{display:block;font-size:.78rem!important;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin:4px 0 10px!important;font-weight:650}
.small-h small{text-transform:none;letter-spacing:0}
.tips{margin:0;padding-left:1.1em;color:var(--muted)}
.tips li{margin:8px 0}
.tips b{color:var(--text)}
.option-grid{display:grid;gap:12px}
.option{background:var(--bg2);border-radius:14px;padding:14px;border:1px solid var(--line)}
.option h3{font-size:1rem;margin:8px 0 4px}
.option p{margin:0;color:var(--muted);font-size:.92rem}
.tag{display:inline-block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  padding:4px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent-hi)}
.tag-alt{background:rgba(111,154,141,.18);color:#9cc4b7}
.footnote{text-align:center;color:var(--dim);font-size:.9rem;margin-top:22px}
.linklike{background:none;border:0;color:var(--accent-hi);text-decoration:underline;padding:8px 2px}

.screen-title{font-size:1.6rem;font-weight:750;margin:6px 0 14px}
.title-row{display:flex;justify-content:space-between;align-items:center}
.mode-list{display:grid;gap:10px}
.mode{text-align:left;background:var(--card);border:2px solid var(--line);border-radius:var(--r);padding:16px;min-height:var(--tap)}
.mode[aria-checked=true]{border-color:var(--accent);background:linear-gradient(135deg,var(--accent-soft),transparent 80%),var(--card)}
.mode-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.mode h3{font-size:1.1rem}
.mode p{margin:6px 0 0;color:var(--muted);font-size:.93rem}
.badge{font-size:.75rem;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:2px 10px;white-space:nowrap}

.stepper{display:grid;grid-template-columns:1fr var(--tap) 64px var(--tap);align-items:center;gap:8px;padding:6px 0}
.stepper-label{color:var(--muted)}
.step{height:var(--tap);border-radius:14px;border:1px solid var(--line);background:var(--bg2);font-size:1.5rem}
.stepper output{text-align:center;font-size:1.4rem;font-weight:700;font-variant-numeric:tabular-nums}

.seg,.feel{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}
.feel{grid-template-columns:repeat(3,1fr);margin:12px 0 0}
.seg button,.feel button{min-height:52px;border-radius:12px;border:1px solid var(--line);background:var(--bg2);font-weight:600}
.seg button[aria-checked=true],.feel button[aria-checked=true]{background:var(--accent);border-color:var(--accent);color:#fff}
.toggle{display:flex;align-items:center;gap:12px;min-height:48px;cursor:pointer}
.toggle input{width:24px;height:24px;accent-color:var(--accent)}
.toggle small{color:var(--dim)}

.sticky-actions{position:sticky;bottom:calc(76px + var(--safe-b));display:flex;gap:10px;padding:12px 0;
  background:linear-gradient(transparent,var(--bg) 30%)}

/* Timer */
#screen-timer.active{display:flex;flex-direction:column;align-items:center}
.timer-top{width:100%;display:flex;justify-content:space-between;color:var(--muted);font-weight:600;font-size:.95rem;padding:4px 2px}
.ring-wrap{position:relative;width:min(84vw,360px);aspect-ratio:1;margin:12px auto 6px}
.ring{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:7}
.ring-bg{stroke:var(--line)}
.ring-fg{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:339.29;stroke-dashoffset:0;transition:stroke-dashoffset .25s linear,stroke .3s}
.ring-inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.phase{font-size:1.15rem;font-weight:750;text-transform:uppercase;letter-spacing:.14em;color:var(--accent-hi)}
.digits{font-size:clamp(4.5rem,24vw,7.5rem);font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-2px;line-height:1}
.next{color:var(--dim);font-size:.9rem;margin-top:6px}
body[data-phase=hold] .ring-fg{stroke:var(--hold)} body[data-phase=hold] .phase{color:var(--hold)}
body[data-phase=rest] .ring-fg{stroke:var(--rest)} body[data-phase=rest] .phase{color:var(--rest)}
body[data-phase=warmup] .ring-fg,body[data-phase=ready] .ring-fg{stroke:var(--muted)}
body[data-phase=warmup] .phase,body[data-phase=ready] .phase{color:var(--muted)}
body.paused .digits{opacity:.45}
.cue{min-height:3em;text-align:center;color:var(--text);font-size:1.05rem;margin:6px 8px;max-width:420px}
.dots{display:flex;gap:8px;justify-content:center;margin:4px 0 16px;flex-wrap:wrap}
.dot{width:12px;height:12px;border-radius:50%;background:var(--line)}
.dot.done{background:var(--accent)} .dot.partial{background:var(--warn)} .dot.now{outline:2px solid var(--accent-hi);outline-offset:2px}
.timer-actions{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:10px;width:100%;align-items:center}
.btn-round{min-height:64px;border-radius:20px;padding:0 10px;font-size:.98rem}
.btn-big{min-height:80px;font-size:1.25rem}
.safety-inline{font-size:.88rem;color:var(--muted);text-align:center;margin:12px 0 0;padding:10px 14px;border-radius:12px;background:rgba(224,166,60,.08);border:1px solid rgba(224,166,60,.25)}
body.in-session .tabbar{display:none}

/* Done */
.summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sum{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 8px;text-align:center}
.sum-num{display:block;font-size:1.7rem;font-weight:780;color:var(--accent-hi);font-variant-numeric:tabular-nums}
.sum-label{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
textarea{width:100%;background:var(--bg2);color:var(--text);border:1px solid var(--line);border-radius:12px;padding:12px;font:inherit;resize:vertical}

/* Log */
.log-stats{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.log-stats span{font-size:.85rem;color:var(--muted);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px 12px}
.log-stats b{color:var(--text)}
.log{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.entry{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;position:relative}
.entry-head{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.entry-date{font-weight:650}
.entry-mode{font-size:.8rem;color:var(--accent-hi);text-transform:uppercase;letter-spacing:.06em}
.entry-meta{color:var(--muted);font-size:.9rem;margin-top:4px}
.entry-notes{margin:8px 0 0;font-size:.93rem;white-space:pre-wrap;word-break:break-word}
.entry-del{position:absolute;right:6px;bottom:6px;background:none;border:0;color:var(--dim);min-width:44px;min-height:44px;font-size:1.1rem}
.empty{color:var(--dim);text-align:center;padding:30px 10px}

.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:6;display:grid;grid-template-columns:repeat(3,1fr);
  background:rgba(22,19,15,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line);padding-bottom:var(--safe-b)}
.tab{background:none;border:0;min-height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--dim);font-size:.78rem;font-weight:600}
.tab span{font-size:1.25rem;line-height:1}
.tab.active{color:var(--accent-hi)}

dialog{background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:22px;padding:22px;max-width:min(92vw,480px);max-height:86dvh}
dialog::backdrop{background:rgba(0,0,0,.65)}
dialog h2{font-size:1.4rem;color:#f2c46b;margin-bottom:8px}
dialog .btn{width:100%}
.disclaimer{color:var(--muted);font-size:.92rem;padding:12px;border-radius:12px;background:var(--bg2);margin:14px 0}

.toast{position:fixed;left:50%;bottom:calc(90px + var(--safe-b));transform:translateX(-50%) translateY(20px);opacity:0;pointer-events:none;
  background:var(--text);color:var(--bg);padding:10px 18px;border-radius:999px;font-weight:600;transition:.25s;z-index:20}
.toast.show{opacity:1;transform:translateX(-50%)}

@media (min-width:640px){.option-grid{grid-template-columns:1fr 1fr}.hero h1{font-size:2.6rem}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}