:root{--bg:#F2F2F7;--card:#fff;--label:#000;--l2:rgba(60,60,67,.6);--l3:rgba(60,60,67,.3);--sep:rgba(60,60,67,.12);
--pri:#5E5CE6;--pri2:#7D7AFF;--green:#34C759;--orange:#FF9500;--teal:#30B0C7;--gray:#8E8E93;
--c-办公:#5E5CE6;--c-学习:#30B0C7;--c-生活:#FF9500;--c-其他:#8E8E93;
--r:18px;--sh:0 1px 2px rgba(0,0,0,.04),0 4px 16px rgba(0,0,0,.04);
--ease:cubic-bezier(.32,.72,0,1);--tab:calc(56px + env(safe-area-inset-bottom))}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0}
html,body{background:var(--bg)}
body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","PingFang SC","Helvetica Neue",sans-serif;color:var(--label);
 -webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;font-size:17px;letter-spacing:-.01em}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}
svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.press{transition:transform .18s var(--ease),opacity .18s}.press:active{transform:scale(.96);opacity:.85}
#app{padding:env(safe-area-inset-top) 16px calc(var(--tab) + 24px);max-width:560px;margin:0 auto}
.page{display:none;animation:fade .35s var(--ease)}.page.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}}
.hdr{display:flex;justify-content:space-between;align-items:flex-end;padding:14px 4px 6px}
.date{font-size:13px;color:var(--l2);font-weight:500}
h1{font-size:32px;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.fab{width:40px;height:40px;border-radius:50%;background:#fff;box-shadow:var(--sh);display:grid;place-items:center;color:var(--pri)}
.fab svg{width:20px;height:20px;stroke-width:2.4}
.kpis{display:flex;justify-content:space-between;padding:10px 4px 14px}
.k-l{font-size:13px;color:var(--l2)}.k-v{font-size:26px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.k-v small{font-size:15px;color:var(--l2);font-weight:600}.r{text-align:right}
/* 计时椭圆 */
.timer-wrap{display:flex;justify-content:center;padding:4px 0 8px}
.oval{width:100%;max-width:340px;height:172px;border-radius:50%/50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#fff;position:relative;overflow:hidden;
 background:radial-gradient(120% 90% at 30% 15%,#9A98FF 0%,#6E6CF0 45%,#5250D6 100%);
 box-shadow:0 18px 36px -14px rgba(82,80,214,.55),0 2px 6px rgba(82,80,214,.25),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .2s var(--ease),filter .3s,box-shadow .3s}
.oval::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.18),transparent 45%);pointer-events:none}
.oval.idle{background:radial-gradient(120% 90% at 30% 15%,#fff,#ECECF3);color:var(--label);box-shadow:var(--sh),inset 0 0 0 1px var(--sep)}
.oval.idle .o-status{background:rgba(120,120,128,.12);color:var(--l2)}
.oval.paused{filter:saturate(.55)}
.oval.done{background:radial-gradient(120% 90% at 30% 15%,#7BE39A,#34C759 55%,#239B43);box-shadow:0 18px 36px -14px rgba(52,199,89,.55)}
.oval.lp{transform:scale(.94)}
.o-status{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:3px 10px;border-radius:20px;background:rgba(255,255,255,.2)}
.o-status i{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.9}
.oval.running .o-status i{animation:blink 1.6s infinite}@keyframes blink{50%{opacity:.25}}
.o-name{font-size:19px;font-weight:600;max-width:78%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.o-time{font-size:38px;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums;line-height:1.1}
.o-hint{font-size:12px;opacity:.75}
/* 区块 */
.sec-h{display:flex;justify-content:space-between;align-items:center;margin:22px 4px 10px}
h2{font-size:20px;font-weight:700;letter-spacing:-.01em}
.muted{color:var(--l2);font-size:13px}.c{text-align:center}
.seg{display:flex;background:rgba(118,118,128,.12);border-radius:9px;padding:2px;gap:2px}
.seg button{font-size:12px;font-weight:500;padding:4px 9px;border-radius:7px;color:var(--label);transition:background .2s}
.seg button.on{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.12);font-weight:600}
.seg.big{margin:4px 0 14px}.seg.big button{flex:1;font-size:14px;padding:7px 0}
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);padding:14px;margin-bottom:12px}
.c-t{font-size:15px;font-weight:600;margin-bottom:12px}
/* 任务卡 */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.task{background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:12px 12px 14px;text-align:left;display:flex;flex-direction:column;gap:6px;min-height:112px;position:relative;border:2px solid transparent;transition:transform .18s var(--ease),border-color .2s,opacity .2s}
.task:active{transform:scale(.96)}
.task.sel{border-color:var(--pri)}
.chip{align-self:flex-start;font-size:11px;font-weight:600;padding:2px 8px;border-radius:6px;background:color-mix(in srgb,var(--cc) 14%,#fff);color:var(--cc)}
.t-n{font-size:16px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;flex:1}
.t-f{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--l2)}
.bar{height:5px;border-radius:3px;background:rgba(120,120,128,.14);overflow:hidden}
.bar i{display:block;height:100%;border-radius:3px;background:var(--cc,var(--pri));transition:width .5s var(--ease)}
.task .st{width:18px;height:18px;border-radius:50%;display:grid;place-items:center}
.task.run .st{background:var(--pri);color:#fff}.task.run .st svg{width:10px;height:10px;fill:#fff;stroke:none}
.task.run{border-color:var(--pri);box-shadow:0 8px 20px -10px rgba(94,92,230,.5)}
.task.done .t-n{color:var(--l2)}.task.done .bar i{background:var(--green)}
.task.done .st{background:var(--green);color:#fff}.task.done .st svg{width:11px;height:11px;stroke-width:3}
.task.done .t-f{color:var(--green);font-weight:600}
.task.add{border:1.5px dashed var(--l3);background:transparent;box-shadow:none;align-items:center;justify-content:center;color:var(--l2);font-size:14px;font-weight:500}
.task.add svg{width:26px;height:26px;color:var(--pri);stroke-width:1.8}
/* 时间轴 */
.tl{padding:10px 12px 10px 0;position:relative}
.axis{position:relative}
.hr{position:absolute;left:0;right:0;height:0;border-top:1px solid var(--sep)}
.hr span{position:absolute;left:0;width:46px;text-align:right;top:-8px;font-size:11px;color:var(--l2);font-variant-numeric:tabular-nums;background:#fff;padding-right:6px}
.blk{position:absolute;left:56px;right:0;border-radius:10px;padding:5px 10px;overflow:hidden;background:color-mix(in srgb,var(--cc) 15%,#fff);border-left:3px solid var(--cc);animation:fade .4s var(--ease)}
.blk b{display:block;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.blk small{font-size:11px;color:var(--l2)}
.blk.done{--cc:var(--green)!important}
.blk.live{background:repeating-linear-gradient(-45deg,color-mix(in srgb,var(--cc) 18%,#fff) 0 8px,color-mix(in srgb,var(--cc) 10%,#fff) 8px 16px)}
.gap{position:absolute;left:56px;right:0;border:1px dashed var(--l3);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--l3)}
.now{position:absolute;left:50px;right:0;border-top:1.5px solid #FF3B30;z-index:2}.now::before{content:"";position:absolute;left:-4px;top:-4.5px;width:7px;height:7px;border-radius:50%;background:#FF3B30}
.empty{text-align:center;padding:26px 0;color:var(--l2);font-size:14px}
/* 日志 */
.day{margin-bottom:18px}.day-h{display:flex;justify-content:space-between;padding:6px 4px 8px;font-size:13px;color:var(--l2);font-weight:600}
.list{background:#fff;border-radius:var(--r);box-shadow:var(--sh);overflow:hidden}
.row{display:flex;align-items:center;gap:12px;padding:11px 14px;position:relative}
.row+.row::before{content:"";position:absolute;top:0;left:40px;right:0;border-top:.5px solid var(--sep)}
.dot{width:12px;height:12px;border-radius:4px;background:var(--cc);flex-shrink:0}
.row .m{flex:1;min-width:0}.row b{font-size:15px;font-weight:500;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row small{font-size:12px;color:var(--l2);font-variant-numeric:tabular-nums}
.row .d{font-size:14px;color:var(--l2);font-variant-numeric:tabular-nums;text-align:right}
/* 统计 */
.donut-w{display:flex;align-items:center;gap:18px}
.donut{width:120px;height:120px;flex-shrink:0;transform:rotate(-90deg)}
.donut circle{fill:none;stroke-width:16}
.legend{flex:1;display:flex;flex-direction:column;gap:9px}
.lg{display:flex;align-items:center;gap:8px;font-size:14px}.lg .dot{width:10px;height:10px;border-radius:3px}.lg span{flex:1}.lg em{font-style:normal;color:var(--l2);font-variant-numeric:tabular-nums;font-size:13px}
.tp{margin-bottom:12px}.tp:last-child{margin:0}.tp-h{display:flex;justify-content:space-between;font-size:14px;margin-bottom:6px}.tp-h em{font-style:normal;color:var(--l2);font-size:12px}
/* 底部 Tab */
.tabbar{position:fixed;left:0;right:0;bottom:0;display:flex;padding:6px 0 env(safe-area-inset-bottom);height:var(--tab);
 background:rgba(249,249,249,.78);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-top:.5px solid rgba(0,0,0,.15);z-index:5}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--gray);font-size:10px;font-weight:500}
.tab svg{width:25px;height:25px;stroke-width:1.8}.tab.on{color:var(--pri)}
/* 弹层 */
.mask{position:fixed;inset:0;background:rgba(0,0,0,.28);opacity:0;pointer-events:none;transition:opacity .3s;z-index:8}
.mask.on{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:0;right:0;bottom:0;max-width:560px;margin:0 auto;background:#fff;border-radius:22px 22px 0 0;padding:8px 20px calc(20px + env(safe-area-inset-bottom));z-index:9;
 transform:translateY(105%);transition:transform .42s var(--ease);box-shadow:0 -8px 30px rgba(0,0,0,.08)}
.sheet.on{transform:none}
.grab{width:36px;height:5px;border-radius:3px;background:var(--l3);margin:0 auto 14px}
.sheet h3{font-size:20px;font-weight:700;text-align:center;margin-bottom:4px}
.field{width:100%;font:inherit;font-size:17px;padding:13px 14px;border-radius:12px;border:0;background:rgba(118,118,128,.12);margin:12px 0;outline:none;-webkit-user-select:text;user-select:text}
.lbl{font-size:13px;color:var(--l2);margin:4px 2px 6px}
.btns{display:flex;gap:10px;margin-top:16px}.btn{flex:1;height:50px;border-radius:14px;font-size:17px;font-weight:600}
.primary{background:var(--pri);color:#fff}.ghost{background:rgba(118,118,128,.12);color:var(--pri)}.danger{color:#FF3B30}
.ring-wrap{position:relative;width:150px;height:150px;margin:12px auto 4px}
.ring{width:100%;height:100%;transform:rotate(-90deg)}.ring circle{fill:none;stroke-width:10}.ring .bg{stroke:rgba(120,120,128,.14)}
.ring .fg{stroke:var(--pri);stroke-linecap:round;stroke-dasharray:326.7;transition:stroke-dashoffset .25s var(--ease),stroke .3s}
.ring-v{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:40px;font-weight:700;font-variant-numeric:tabular-nums}.ring-v small{font-size:18px;margin-left:2px;color:var(--l2)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;margin-top:8px}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--pri) var(--v,0%),rgba(120,120,128,.16) var(--v,0%))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:#fff;margin-top:-11px;box-shadow:0 0.5px 4px rgba(0,0,0,.12),0 6px 13px rgba(0,0,0,.12)}
.quick{display:flex;gap:8px;margin:10px 0 4px}.quick button{flex:1;padding:8px 0;border-radius:10px;background:rgba(118,118,128,.12);font-size:14px;font-weight:500;transition:transform .15s}
.quick button:active{transform:scale(.94)}
.msg{color:#FF3B30;font-size:13px;text-align:center;min-height:1em;margin-top:8px}
.toast{position:fixed;left:50%;top:calc(env(safe-area-inset-top) + 12px);transform:translate(-50%,-140%);background:rgba(30,30,30,.86);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);color:#fff;font-size:14px;padding:10px 16px;border-radius:14px;z-index:10;transition:transform .4s var(--ease);max-width:90%;text-align:center}
.toast.on{transform:translate(-50%,0)}