:root{
  --bg:#0f1418; --card:#161d24; --card2:#1b242d; --line:#26313c;
  --txt:#e8eef2; --dim:#93a4b1; --acc:#4dc3ff; --good:#59d98c; --warn:#ffb454; --bad:#ff6b6b;
}
*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{background:var(--bg); color:var(--txt); font:15px/1.5 "Segoe UI",system-ui,sans-serif;}
button{font:inherit; cursor:pointer;}
input{font:inherit;}

/* svg sprite strokes */
.bb{stroke:#dfe8ee; stroke-width:3; fill:none; stroke-linecap:round; stroke-linejoin:round;}
.q{stroke:#55687a; stroke-width:3; fill:none; stroke-linecap:round;}
.hh{stroke:#dfe8ee; stroke-width:2.6; fill:none;}
.gg{fill:#ffb454; stroke:none;}
.aa{stroke:#4dc3ff; stroke-width:2.6; fill:none; stroke-linecap:round;}

/* login */
.login-wrap{max-width:420px; margin:0 auto; min-height:100%; display:flex; flex-direction:column; justify-content:center; padding:24px;}
.logo{font-size:32px; font-weight:700; text-align:center; letter-spacing:1px; margin-bottom:34px;}
.logo span{color:var(--acc);}
.login-err{background:rgba(255,107,107,.12); border:1px solid rgba(255,107,107,.4); color:var(--bad); border-radius:12px; padding:10px 14px; margin-bottom:14px; font-size:14px; text-align:center;}
.inp{background:var(--card); border:1px solid var(--line); border-radius:12px; color:var(--txt); font-size:16px; padding:14px 16px; width:100%; margin-bottom:12px;}
.inp:focus{outline:none; border-color:var(--acc);}
.btn{background:var(--acc); border:none; border-radius:12px; color:#06202e; font-size:16px; font-weight:700; padding:14px; width:100%;}

/* layout */
#app{max-width:520px; margin:0 auto; min-height:100%;}
#view{padding:16px 14px calc(78px + env(safe-area-inset-bottom));}
.tabs{position:fixed; bottom:0; left:0; right:0; max-width:520px; margin:0 auto; height:calc(60px + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom); background:#121920; border-top:1px solid var(--line); display:flex; z-index:20;}
.tab{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:var(--dim); font-size:10.5px; background:none; border:none;}
.tab.on{color:var(--acc);}
.tab svg{width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}

/* header + week */
.hd{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:12px;}
.hd .day{font-size:20px; font-weight:700;}
.hd .date{color:var(--dim); font-size:13px;}
.week{display:flex; gap:6px; margin-bottom:14px;}
.wd{flex:1; text-align:center; padding:8px 0 6px; border-radius:12px; background:var(--card); border:1px solid var(--line); font-size:11px; color:var(--dim); cursor:pointer;}
.wd b{display:block; font-size:14px; color:var(--txt); margin-bottom:3px;}
.wd .dot{width:6px; height:6px; border-radius:50%; margin:4px auto 0; background:transparent;}
.wd.done .dot{background:var(--good);}
.wd.part .dot{background:var(--warn);}
.wd.sel{border-color:var(--acc); background:rgba(77,195,255,.08);}
.wd.off{opacity:.45;}

.pbar{height:6px; border-radius:3px; background:var(--card2); margin-bottom:6px; overflow:hidden;}
.pbar i{display:block; height:100%; background:var(--good); border-radius:3px; transition:width .3s;}
.ptxt{color:var(--dim); font-size:12px; margin-bottom:14px;}
.ptxt b{color:var(--good);}

/* weight */
.wq{display:flex; gap:10px; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px 14px; margin-bottom:6px;}
.wq svg{width:22px; height:22px; stroke:var(--acc); fill:none; stroke-width:2; stroke-linecap:round; flex:0 0 auto;}
.wq .t{flex:1; font-size:14px;}
.wq .t small{display:block; color:var(--dim); font-size:11.5px;}
.wq input{width:82px; background:var(--card2); border:1px solid var(--line); border-radius:10px; color:var(--txt); font-size:16px; font-weight:700; padding:8px 10px; text-align:center;}
.wq .ok{width:42px; height:42px; border-radius:10px; background:var(--acc); border:none; color:#06202e; font-weight:700; font-size:20px;}
.wq .ok.saved{background:var(--good);}

.sect{color:var(--dim); font-size:11.5px; text-transform:uppercase; letter-spacing:.6px; margin:16px 2px 8px;}

/* exercise card */
.exc{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px; margin-bottom:10px;}
.exc.done{border-color:rgba(89,217,140,.5); background:rgba(89,217,140,.05);}
.exc.open{border-color:var(--acc);}
.exc .top{display:flex; gap:12px; align-items:center;}
.exc .ic{flex:0 0 56px; height:46px; background:#0c1114; border:1px solid var(--line); border-radius:9px;}
.exc .ic svg{width:100%; height:100%;}
.exc .m{flex:1; min-width:0;}
.exc .nm{font-size:14px; font-weight:600;}
.exc .ds{font-size:12.5px; color:var(--acc); font-weight:600;}
.exc .ds .w{color:var(--warn);}
.exc .ds .fact{color:var(--good);}
.chk{flex:0 0 32px; height:32px; border-radius:9px; border:2px solid var(--line); background:none; display:flex; align-items:center; justify-content:center; padding:0;}
.exc.done .chk{background:var(--good); border-color:var(--good);}
.chk svg{width:18px; height:18px; stroke:#0b1a10; stroke-width:3; fill:none; stroke-linecap:round; stroke-linejoin:round; opacity:0;}
.exc.done .chk svg{opacity:1;}

.body{display:none; margin-top:10px;}
.exc.open .body{display:block;}
.how{color:var(--dim); font-size:12.5px; line-height:1.45; margin-bottom:10px;}
.sets{display:flex; gap:8px; margin-bottom:10px;}
.set{flex:1; text-align:center;}
.set small{display:block; color:var(--dim); font-size:10.5px; margin-bottom:4px;}
.set input{width:100%; background:var(--card2); border:1px solid var(--line); border-radius:10px; color:var(--txt); font-size:16px; font-weight:700; padding:8px 0; text-align:center;}
.set input.f{border-color:var(--good); color:var(--good);}

/* timers */
.twrap{display:flex; align-items:center; gap:12px; background:#0c1114; border-radius:12px; padding:10px 14px;}
.twrap .tt{font-size:28px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--warn); min-width:86px;}
.twrap .tt.work{color:var(--bad);}
.twrap .tt.easy{color:var(--good);}
.twrap .cap{flex:1; color:var(--dim); font-size:12px;}
.rbtn{background:var(--card2); border:1px solid var(--line); border-radius:10px; color:var(--txt); padding:9px 14px; font-size:13px;}
.rbtn.acc{border-color:var(--acc); color:var(--acc);}

/* finish */
.feel{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px 14px; margin-top:14px;}
.feel .cap{font-size:13.5px; margin-bottom:9px; color:var(--dim);}
.feel .btns{display:flex; gap:8px;}
.fbtn{flex:1; background:var(--card2); border:1px solid var(--line); border-radius:10px; padding:10px; font-size:13.5px; color:var(--txt);}
.fbtn.easy.sel{color:var(--good); border-color:var(--good); background:rgba(89,217,140,.1);}
.fbtn.normal.sel{color:var(--acc); border-color:var(--acc); background:rgba(77,195,255,.1);}
.fbtn.hard.sel{color:var(--warn); border-color:var(--warn); background:rgba(255,180,84,.1);}
.finish{background:var(--good); border:none; border-radius:14px; color:#07230f; font-size:16px; font-weight:700; padding:15px; width:100%; margin-top:12px;}
.finish:disabled{opacity:.45;}
.finish.done{background:var(--card); color:var(--good); border:1px solid rgba(89,217,140,.5);}
.changes{background:rgba(77,195,255,.08); border:1px solid rgba(77,195,255,.3); border-radius:12px; padding:10px 14px; margin-top:10px; font-size:13.5px;}
.changes b{color:var(--acc);}

/* progress */
.stat3{display:flex; gap:10px; margin-bottom:14px;}
.st{flex:1; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px 10px; text-align:center;}
.st .v{font-size:20px; font-weight:700;}
.st .v.g{color:var(--good);} .st .v.a{color:var(--acc);} .st .v.w{color:var(--warn);}
.st .k{font-size:11px; color:var(--dim); margin-top:2px;}
.chart{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; margin-bottom:14px;}
.chart h3{font-size:14px; margin-bottom:10px;}
.chart h3 small{color:var(--dim); font-weight:400; float:right;}
.hist{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:4px 14px;}
.hrow{display:flex; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid rgba(38,49,60,.55); font-size:13.5px;}
.hrow:last-child{border-bottom:none;}
.hrow .hd2{flex:1;}
.hrow small{color:var(--dim); display:block; font-size:11.5px;}
.badge{font-size:11px; padding:3px 8px; border-radius:20px;}
.bg{background:rgba(89,217,140,.15); color:var(--good);}
.bw{background:rgba(255,180,84,.15); color:var(--warn);}
.empty{color:var(--dim); text-align:center; padding:30px 10px; font-size:14px;}

/* timers tab */
.tcard{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; margin-bottom:12px;}
.tcard h3{font-size:15px; margin-bottom:4px;}
.tcard .sub{color:var(--dim); font-size:12.5px; margin-bottom:10px;}
.tbig{font-size:44px; font-weight:700; font-variant-numeric:tabular-nums; text-align:center; margin:8px 0;}
.tbig.work{color:var(--bad);} .tbig.easy{color:var(--good);} .tbig.idle{color:var(--txt);} .tbig.rest{color:var(--warn);}
.tphase{text-align:center; color:var(--dim); font-size:13px; margin-bottom:10px; min-height:18px;}
.trow{display:flex; gap:8px;}
.trow .rbtn{flex:1;}

.offday{color:var(--dim); text-align:center; padding:36px 16px; font-size:15px; line-height:1.7;}
.offday b{color:var(--good);}