/* 组件样式，数字来自设计规范 v1.2 第 3–8 节。只用 tokens.css 里的变量。 */
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:16px; line-height:1.5; }
body { overscroll-behavior-y:none; }
button { font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
input { font:inherit; color:inherit; }
svg.i { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; }
svg.i .f { fill:currentColor; stroke:none; opacity:.22; }
.tnum { font-variant-numeric:tabular-nums; }

#app { position:relative; height:100%; max-width:520px; margin:0 auto; overflow:hidden; }
.page { position:absolute; inset:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
        padding:calc(var(--safe-top) + 12px) var(--page-x) calc(var(--nav-h) + 8px + var(--safe-bottom) + 40px); animation:fadein .2s ease; }
@keyframes fadein { from { opacity:0 } to { opacity:1 } }
.fade-bottom { position:absolute; left:0; right:0; bottom:0; height:calc(var(--nav-h) + var(--safe-bottom) + 40px); background:linear-gradient(transparent, var(--bg) 70%); pointer-events:none; z-index:4; }

/* 页面头 */
.hd { display:flex; justify-content:space-between; align-items:flex-start; margin:8px 0 16px; }
.hd small { display:block; color:var(--muted); font-size:13px; line-height:1.45; font-weight:500; margin-bottom:2px; }
.hd h1 { margin:0; font-family:var(--font-display); font-size:34px; line-height:1.15; font-weight:800; letter-spacing:.3px; }
.ib { width:44px; height:44px; border-radius:50%; background:var(--card); display:grid; place-items:center; position:relative; flex:none; transition:transform .15s; }
.ib:active { transform:scale(.9); }

/* 小节标题 */
.sec { display:flex; justify-content:space-between; align-items:baseline; margin:20px 2px 10px; font-family:var(--font-display); font-weight:800; font-size:16px; line-height:1.3; }
.sec span { font-family:var(--font-body); font-weight:500; font-size:13px; color:var(--muted); }

/* 卡片 */
.card { background:var(--card); border-radius:var(--r-card); padding:var(--card-pad); margin-bottom:var(--card-gap); }
.card.flush { padding-top:2px; padding-bottom:2px; }
.hero { border-radius:var(--r-card); padding:var(--card-pad); margin-bottom:var(--card-gap); position:relative; }
.hero .lbl { font-size:13px; color:var(--ink2); font-weight:600; line-height:1.45; }
.hero .num { font-family:var(--font-display); font-weight:800; font-size:56px; line-height:1; letter-spacing:-1.5px; font-variant-numeric:tabular-nums; }
.hero .num small { font-size:18px; font-weight:700; letter-spacing:0; margin-left:3px; }
.hero .ttl { font-family:var(--font-display); font-size:20px; font-weight:800; line-height:1.3; }
.hero.row { display:flex; align-items:center; gap:14px; }
.hero.center { text-align:center; padding:24px var(--card-pad); }

/* 按钮 */
.btn { display:flex; justify-content:center; align-items:center; gap:6px; width:100%; height:52px; border-radius:var(--r-pill); background:var(--ink); color:#fff; font-family:var(--font-display); font-weight:800; font-size:16px; transition:transform .15s, background .2s; }
.btn:active { transform:scale(.97); }
.btn svg.i { width:18px; height:18px; }
.btn.off, .btn:disabled { opacity:.35; pointer-events:none; }
.btn.sec { background:var(--card); color:var(--ink); }
.sheet .btn.sec { background:var(--bg); }
.txt-btn { color:var(--muted); font-size:16px; font-weight:600; min-height:44px; padding:0 4px; }
.pill { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; line-height:1.4; background:var(--card); border-radius:var(--r-pill); padding:5px 12px; white-space:nowrap; }
.pill svg.i { width:14px; height:14px; }

/* 待办行 */
.srow { position:relative; overflow:hidden; touch-action:pan-y; }
.srow + .srow { border-top:1.5px dashed var(--line); }
.srow:not(.open):not(.dragging) .acts { visibility:hidden; }
.srow .acts { position:absolute; right:0; top:0; bottom:0; display:flex; gap:8px; align-items:center; padding-right:2px; }
.act { width:52px; height:52px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; font-size:11px; font-weight:800; line-height:1.1; color:var(--ink); transition:transform .15s; }
.act:active { transform:scale(.92); }
.act svg.i { width:17px; height:17px; }
.act.sun { background:var(--sun); }
.act.coral { background:var(--coral); color:#fff; }
.act.coral.armed { width:84px; border-radius:var(--r-pill); }
.todo { display:flex; gap:12px; align-items:flex-start; padding:14px 0; background:var(--card); position:relative; transition:transform .3s var(--e-spring); cursor:pointer; }
.srow.open .todo { transform:translateX(calc(-1 * var(--open-x, 122px))); }
.srow.open.armed { --open-x:156px; }
.srow.single { --open-x:62px; }                      /* 做完的行只有“删除”一个按钮 */
.srow.single.armed { --open-x:96px; }
.box { width:26px; height:26px; flex:none; border-radius:50%; border:2px solid var(--ink2); display:grid; place-items:center; color:var(--ink); position:relative; transition:background .2s, border-color .2s; margin-top:0; }
.box svg.i { width:15px; height:15px; stroke-width:3; opacity:0; }
.todo.done .box { background:var(--leaf); border-color:var(--leaf); }
.todo.done .box svg.i { opacity:1; }
.todo .tx { flex:1; min-width:0; font-size:16px; line-height:1.5; word-break:break-word; }
.todo.done .tx .ttl { color:var(--muted); text-decoration:line-through; text-decoration-thickness:1.5px; }
.todo .meta { display:block; font-size:13px; color:var(--muted); line-height:1.45; }
.flag { display:inline-block; font-size:12px; font-weight:700; background:var(--peach); color:var(--ink); border-radius:var(--r-pill); padding:0 8px; margin-left:6px; vertical-align:2px; line-height:1.5; }
.pop { animation:pop .38s var(--e-bounce); }
@keyframes pop { 0% { transform:scale(.6) } 100% { transform:scale(1) } }
.spark { position:absolute; width:7px; height:7px; border-radius:50%; left:50%; top:50%; margin:-3.5px 0 0 -3.5px; pointer-events:none; animation:spark .55s ease-out forwards; z-index:3; }
@keyframes spark { 0% { transform:translate(0,0) scale(1); opacity:1 } 100% { transform:translate(var(--dx), var(--dy)) scale(.3); opacity:0 } }

/* 每天固定：小方块 */
.tiles { display:flex; gap:10px; overflow-x:auto; scrollbar-width:none; margin:0 calc(var(--page-x) * -1) var(--card-gap); padding:0 var(--page-x); }
.tiles::-webkit-scrollbar { display:none; }
.tile { flex:0 0 136px; height:108px; border-radius:var(--r-mid); padding:12px; display:flex; flex-direction:column; justify-content:space-between; transition:transform .15s; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; touch-action:pan-x pan-y; }
.tile:active { transform:scale(.96); }
.tile .top { display:flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:800; font-size:15px; line-height:1.25; min-width:0; }
.tile .top i { width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.75); display:grid; place-items:center; flex:none; }
.tile .top span { overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.tile .bot { display:flex; justify-content:space-between; align-items:flex-end; font-size:13px; color:var(--ink2); line-height:1.2; }
.tile .bot b { font-family:var(--font-display); font-size:24px; color:var(--ink); }
.tile .go { width:32px; height:32px; border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center; position:relative; }
.tile .go svg.i { width:16px; height:16px; stroke-width:2.6; }
.tile.done .go { background:#fff; color:var(--leaf-deep); }
.tile.done .top span { text-decoration:line-through; opacity:.6; }
.tile.ghost { opacity:.55; pointer-events:none; }

/* 日期条 */
.week { display:flex; justify-content:space-between; gap:2px; margin:0 0 16px; touch-action:pan-y; user-select:none; -webkit-user-select:none; }
.week .d { flex:1 1 0; min-width:0; max-width:48px; text-align:center; font-size:12px; line-height:1.4; color:var(--muted); font-weight:700; }
.week .d i { display:grid; place-items:center; width:100%; max-width:40px; height:auto; aspect-ratio:1; margin:4px auto 0; border-radius:50%; background:var(--card); color:var(--ink); font-style:normal; font-size:16px; font-family:var(--font-display); font-weight:700; transition:background .2s, color .2s; }
.week .d.on i { background:var(--ink); color:#fff; }
.week .d.today:not(.on) i { box-shadow:inset 0 0 0 2px var(--ink); }
.week .d u { display:block; width:6px; height:6px; margin:4px auto 0; border-radius:50%; text-decoration:none; }
.week .d u.has { background:var(--berry-deep); }
.week.slide-l { animation:slidel .25s var(--e-spring); }
.week.slide-r { animation:slider .25s var(--e-spring); }
@keyframes slidel { from { transform:translateX(40px); opacity:.2 } to { transform:none; opacity:1 } }
@keyframes slider { from { transform:translateX(-40px); opacity:.2 } to { transform:none; opacity:1 } }

/* 完成环 */
.ring { position:relative; width:88px; height:88px; flex:none; }
.ring svg { width:88px; height:88px; transform:rotate(-90deg); }
.ring circle { fill:none; stroke-width:10; stroke-linecap:round; }
.ring .p { transition:stroke-dashoffset .5s var(--e-ring); }
.ring b { position:absolute; inset:0; display:grid; place-items:center; font-family:var(--font-display); font-size:18px; font-weight:800; }

/* 底部导航 */
.tabbar { position:absolute; left:16px; right:16px; bottom:calc(var(--safe-bottom) + 8px); height:var(--nav-h); background:var(--ink); border-radius:32px; display:flex; align-items:center; justify-content:space-around; padding:0 8px; z-index:30; }
.tabbar .t { width:44px; height:44px; border-radius:50%; display:grid; place-items:center; color:var(--nav-off); transition:background .2s, color .2s; }
.tabbar .t.on { color:var(--ink); }
.tabbar .t svg.i { width:24px; height:24px; }
.tabbar .plus { width:64px; height:64px; border-radius:50%; display:grid; place-items:center; color:var(--ink); box-shadow:0 0 0 6px var(--bg); margin-top:-44px; transition:transform .25s var(--e-spring), background .2s; }
.tabbar .plus svg.i { width:28px; height:28px; stroke-width:2.6; }
.tabbar .plus.open { transform:rotate(45deg); }

/* 加号菜单 */
.menu-dim { position:absolute; inset:0; z-index:25; }
.menu { position:absolute; left:28px; right:28px; bottom:calc(var(--safe-bottom) + var(--nav-h) + 28px); border-radius:var(--r-card); padding:14px; z-index:26; transform-origin:50% 100%; animation:menu .3s var(--e-spring); }
@keyframes menu { from { transform:scale(.6) translateY(40px); opacity:0 } to { transform:none; opacity:1 } }
.menu .mt { font-family:var(--font-display); font-weight:800; font-size:20px; line-height:1.3; margin:2px 4px 10px; }
.menu .mi { display:flex; align-items:center; gap:10px; width:100%; background:rgba(255,255,255,.7); border-radius:var(--r-pill); padding:8px; margin-bottom:8px; font-weight:700; font-size:16px; text-align:left; transition:transform .15s, background .2s; }
.menu .mi:last-child { margin-bottom:0; }
.menu .mi:active { transform:scale(.97); background:#fff; }
.menu .mi i { width:36px; height:36px; border-radius:50%; display:grid; place-items:center; flex:none; }
.menu .mi em { margin-left:auto; font-style:normal; padding-right:8px; color:var(--ink2); }

/* 弹出层 */
#layer { position:fixed; inset:0; z-index:50; pointer-events:none; }
#layer > * { pointer-events:auto; }
.dim { position:absolute; inset:0; background:rgba(27,27,27,.35); animation:fadein .22s ease; }
.sheet { position:absolute; left:0; right:0; bottom:0; max-width:520px; margin:0 auto; max-height:92%; overflow-y:auto; background:var(--card); border-radius:var(--r-sheet) var(--r-sheet) 0 0; padding:12px 20px calc(24px + var(--safe-bottom)); animation:sheetup .3s var(--e-spring); }
.sheet.closing { transition:transform .22s ease; transform:translateY(100%); }
@keyframes sheetup { from { transform:translateY(100%) } to { transform:none } }
.sheet .grab { width:40px; height:5px; border-radius:5px; background:var(--line); margin:0 auto 14px; touch-action:none; }
.sheet .topr { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; min-height:44px; }
.sheet .topr b { font-family:var(--font-display); font-weight:800; font-size:20px; line-height:1.3; }
.field { display:flex; align-items:center; gap:8px; border-radius:var(--r-sm); padding:6px 6px 6px 14px; background:var(--bg); margin-bottom:12px; }
.field { align-items:flex-end; }
.field input, .field textarea { flex:1; min-width:0; border:0; background:none; outline:0; resize:none; font-family:var(--font-display); font-weight:800; font-size:20px; padding:8px 0; line-height:1.3; max-height:132px; }
.field input::placeholder, .field textarea::placeholder { color:var(--muted); font-weight:500; font-family:var(--font-body); }
.field .go { margin-bottom:2px; }
.field .go { height:40px; padding:0 16px; border-radius:var(--r-pill); background:var(--ink); color:#fff; font-weight:800; font-size:14px; flex:none; transition:opacity .2s, transform .15s; }
.field .go:active { transform:scale(.95); }
.field .go:disabled { opacity:.3; }
.lab { display:flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--ink2); margin:14px 0 8px; line-height:1.45; }
.lab svg.i { width:16px; height:16px; }
.lab span { margin-left:auto; font-weight:500; color:var(--muted); font-size:12px; }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip { display:inline-flex; align-items:center; gap:5px; height:36px; padding:0 14px; border-radius:var(--r-pill); background:var(--bg); font-size:13px; font-weight:700; transition:background .2s, color .2s, transform .15s; }
.chip:active { transform:scale(.93); }
.chip.on { background:var(--ink); color:#fff; }
.chip.dash { background:transparent; box-shadow:inset 0 0 0 1.5px var(--muted); color:var(--muted); position:relative; overflow:hidden; }
.chip.dash svg.i { width:14px; height:14px; }
.chip.dash input { position:absolute; inset:0; opacity:0; width:100%; height:100%; }
.chip.on.dash { box-shadow:none; background:var(--ink); color:#fff; }
.icons { display:flex; flex-wrap:nowrap; gap:6px; justify-content:space-between; }
.icons button { width:44px; height:44px; border-radius:50%; display:grid; place-items:center; transition:box-shadow .15s, transform .15s; }
.icons button:active { transform:scale(.92); }
.icons button.on { box-shadow:0 0 0 2.5px var(--ink); }
.stepper { display:inline-flex; align-items:center; gap:4px; background:var(--bg); border-radius:var(--r-pill); padding:4px; }
.stepper button { width:36px; height:36px; border-radius:50%; background:var(--card); display:grid; place-items:center; transition:transform .15s; }
.stepper button:active { transform:scale(.9); }
.stepper b { min-width:34px; text-align:center; font-family:var(--font-display); font-size:18px; font-variant-numeric:tabular-nums; }
.mini-input { height:36px; width:72px; border-radius:var(--r-pill); border:0; background:var(--bg); padding:0 12px; font-size:14px; font-weight:700; outline:0; text-align:center; }
.optrow { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 0; font-size:16px; font-weight:700; color:var(--ink2); min-height:52px; }
.optrow > span:first-child { display:flex; align-items:center; gap:8px; }
.switch { width:50px; height:30px; border-radius:30px; background:var(--leaf); position:relative; transition:background .2s; flex:none; }
.switch::after { content:""; position:absolute; top:3px; left:23px; width:24px; height:24px; border-radius:50%; background:#fff; transition:left .25s var(--e-spring); }
.switch.off { background:var(--line); }
.switch.off::after { left:3px; }
.switch.locked { opacity:.45; pointer-events:none; }
.hint { font-size:13px; color:var(--muted); line-height:1.5; }

/* 提示条 */
.toast { position:fixed; left:50%; bottom:calc(var(--safe-bottom) + var(--nav-h) + 24px); transform:translateX(-50%); width:calc(100% - 32px); max-width:488px; background:var(--ink); color:#fff; border-radius:var(--r-pill); padding:12px 18px; font-size:14px; font-weight:700; display:flex; align-items:center; gap:10px; z-index:60; animation:toastin .3s var(--e-spring); }
.toast.err { background:var(--coral); color:var(--ink); }
.toast button { margin-left:auto; color:var(--sun); font-weight:800; min-height:28px; }
@keyframes toastin { from { transform:translate(-50%, 20px); opacity:0 } to { transform:translate(-50%, 0); opacity:1 } }

/* 添加到主屏幕的引导 */
.guide { background:var(--sky); border-radius:var(--r-card); padding:var(--card-pad); margin-bottom:var(--card-gap); }
.guide .g-ttl { font-family:var(--font-display); font-weight:800; font-size:20px; line-height:1.3; margin-bottom:4px; }
.guide .step { display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.75); border-radius:var(--r-pill); padding:6px; margin-top:8px; font-weight:700; font-size:14px; }
.guide .step b { width:28px; height:28px; border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center; font-size:13px; flex:none; }

.coming { opacity:.9; }

@media (prefers-reduced-motion: reduce) {
  .pop, .spark, .sheet, .menu, .toast, .page, .dim, .week.slide-l, .week.slide-r { animation:none !important; }
  * { transition-duration:0s !important; }
}