*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{--bg:#07090d;--panel:#0d1118;--line:#1d2430;--red:#e23b28;--red2:#ff5a45;--txt:#eef1f5;--mut:#9aa3b2;
  --st:env(safe-area-inset-top,0px);--sb:env(safe-area-inset-bottom,0px);--sl:env(safe-area-inset-left,0px);--sr:env(safe-area-inset-right,0px)}
html,body{height:100%;background:var(--bg);color:var(--txt);font-family:system-ui,-apple-system,"SF Pro Text",Segoe UI,Roboto,sans-serif;overflow:hidden;overscroll-behavior:none;-webkit-user-select:none;user-select:none;touch-action:manipulation}
#app{position:fixed;inset:0;max-width:600px;margin:0 auto}
.screen{position:absolute;inset:0;display:none;flex-direction:column;padding:calc(var(--st) + 12px) calc(var(--sr) + 16px) calc(var(--sb) + 12px) calc(var(--sl) + 16px)}
.screen.active{display:flex}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
/* home */
#home{background:radial-gradient(120% 70% at 50% 0%,#18233a 0%,#0b1220 45%,#06080c 100%);gap:14px;overflow-y:auto}
.home-head{padding:18px 4px 6px}
.kicker{font-size:12px;letter-spacing:.22em;font-weight:800;color:var(--red2)}
.home-head h1{font-size:38px;line-height:1.02;font-weight:850;margin:8px 0 10px;text-transform:uppercase}
.sub{color:var(--mut);font-size:15px;line-height:1.4}
.routine{display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:18px 18px 16px;border-radius:18px;background:linear-gradient(135deg,#2a1214,#17121a 60%,#111622);border:1px solid #3b1e22;box-shadow:0 8px 30px rgba(0,0,0,.35)}
.routine.cool{background:linear-gradient(135deg,#0f2030,#121826 60%,#111622);border-color:#1f3346}
.routine:active{transform:scale(.985)}
.r-kicker{font-size:11px;letter-spacing:.18em;font-weight:800;color:var(--red2)}
.routine.cool .r-kicker{color:#5fb3ff}
.r-title{font-size:30px;font-weight:850;text-transform:uppercase;margin-top:4px}
.r-meta{font-size:14px;color:var(--mut);margin-top:2px}
.r-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.r-list span{font-size:12px;padding:3px 9px;border-radius:20px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:#cfd5de}
.foot{margin-top:auto;text-align:center;font-size:12px;color:#6d7686;padding:6px}
/* player */
#player{padding:0;background:#0a0d13}
.topbar{display:flex;align-items:center;gap:10px;padding:calc(var(--st) + 8px) calc(var(--sr) + 12px) 8px calc(var(--sl) + 12px);background:linear-gradient(#0b1220,rgba(11,18,32,0));position:relative;z-index:2}
.icon{width:44px;height:44px;min-width:44px;min-height:44px;box-sizing:border-box;border-radius:12px;background:#1a2130;border:1px solid #2a3344;font-size:16px}
.tb-mid{flex:1;min-width:0}
#routine-label{font-size:12px;letter-spacing:.18em;font-weight:800;color:var(--red2);margin-bottom:6px}
.progress{display:flex;gap:4px}
.progress i{flex:1;height:5px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden;position:relative}
.progress i.done{background:var(--red)}
.progress i b{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--red)}
.count{font-variant-numeric:tabular-nums;font-weight:800;font-size:15px;min-width:40px;text-align:right}
#stage{position:relative;flex:1;min-height:0;margin-top:-56px}
#c{position:absolute;inset:0;width:100%;height:100%;display:block}
#loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#8a93a3;font-size:14px;pointer-events:none}
#paused-badge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:8px 16px;border-radius:30px;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.2);font-weight:800;letter-spacing:.2em;font-size:13px}
.info{padding:6px calc(var(--sr) + 18px) 4px calc(var(--sl) + 18px);text-shadow:0 2px 8px #000}
#ex-name{font-size:26px;font-weight:850;text-transform:uppercase;line-height:1.05}
#ex-cue{font-size:16px;line-height:1.35;color:#d6dbe3;margin-top:6px;min-height:2.7em}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.chips span{font-size:12px;font-weight:600;padding:3px 9px;border-radius:20px;background:rgba(255,60,40,.18);border:1px solid rgba(255,80,60,.6);color:#ffb3a8}
.controls{display:flex;align-items:center;justify-content:space-evenly;padding:8px calc(var(--sr) + 18px) calc(var(--sb) + 14px) calc(var(--sl) + 18px)}
.ctl{width:60px;height:60px;border-radius:50%;background:#1a2130;border:1px solid #2a3344;font-size:22px;display:flex;align-items:center;justify-content:center}
.ctl:active{background:#232c3e}
.ctl.main{position:relative;width:96px;height:96px;background:#141a26;flex-direction:column;border:0}
.ring{position:absolute;inset:0;transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:rgba(255,255,255,.12);stroke-width:7}
.ring-fg{fill:none;stroke:var(--red);stroke-width:7;stroke-linecap:round;stroke-dasharray:282.743;stroke-dashoffset:0}
.time{position:relative;font-size:34px;font-weight:850;font-variant-numeric:tabular-nums;line-height:1}
.plabel{position:relative;font-size:10px;letter-spacing:.16em;color:var(--mut);margin-top:3px;font-weight:700}
.is-paused .ring-fg{stroke:#7d8696}
/* done */
#done{justify-content:center;background:radial-gradient(100% 60% at 50% 30%,#1b2a1f 0%,#0b1220 55%,#06080c 100%)}
.done-box{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px}
.check{width:84px;height:84px;border-radius:50%;background:var(--red);display:flex;align-items:center;justify-content:center;font-size:44px;font-weight:900;box-shadow:0 0 40px rgba(226,59,40,.5)}
#done-title{font-size:30px;font-weight:850;text-transform:uppercase}
#done-sub{color:var(--mut);font-size:16px;max-width:22em;margin-bottom:10px}
.btn{width:100%;max-width:320px;padding:16px;border-radius:14px;background:var(--red);font-weight:800;font-size:17px}
.btn.secondary{background:#1a2130;border:1px solid #2a3344}