.app{display:flex;flex-direction:column;min-height:100%;background:var(--bg)}.app__body{flex:1;padding:0 var(--sp-4);padding-bottom:calc(var(--tabbar-h) + var(--safe-bottom) + var(--sp-6))}.topbar{position:sticky;top:0;z-index:20;padding:calc(var(--safe-top) + var(--sp-3)) var(--sp-4) var(--sp-3);background:color-mix(in oklab,var(--bg) 88%,transparent);backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid transparent;transition:border-color var(--dur-2) var(--ease)}.topbar--scrolled{border-bottom-color:var(--border)}.topbar__row{display:flex;align-items:center;gap:var(--sp-3)}.topbar__title{flex:1;font-size:var(--fs-2xl);font-weight:700;letter-spacing:-.022em;line-height:1.15}.topbar__subtitle{margin-top:2px;font-size:var(--fs-sm);color:var(--muted)}.topbar__action{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-full);color:var(--muted);transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}.topbar__action:active{background:var(--surface-2);color:var(--text)}.section{margin-top:var(--sp-5)}.section__head{display:flex;align-items:center;gap:var(--sp-2);padding:0 var(--sp-1) var(--sp-2)}.section__title{font-size:var(--fs-sm);font-weight:650;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}.section__count{font-size:var(--fs-xs);font-variant-numeric:tabular-nums;color:var(--faint);padding:1px 7px;border-radius:var(--r-full);background:var(--surface-2)}.section__head--danger .section__title{color:var(--danger)}.list{display:flex;flex-direction:column;gap:var(--sp-2)}.task{position:relative;display:flex;align-items:flex-start;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-sm);transition:transform var(--dur-1) var(--ease),opacity var(--dur-1) var(--ease);will-change:transform}.task--pressed{transform:scale(.985)}.task--done{opacity:.55}.task--done .task__title{text-decoration:line-through;text-decoration-color:var(--faint)}.task__check{flex:none;width:26px;height:26px;margin-top:1px;border-radius:var(--r-full);border:2px solid var(--border);display:grid;place-items:center;color:transparent;transition:background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}.task__check:active{transform:scale(.9)}.task__check--on{background:var(--success);border-color:var(--success);color:#050e07}.task__body{flex:1;min-width:0}.task__title{font-size:var(--fs-base);font-weight:500;color:var(--text);word-break:break-word}.task__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin-top:5px;font-size:var(--fs-sm);color:var(--muted)}.task__due{display:inline-flex;align-items:center;gap:4px;font-variant-numeric:tabular-nums}.task__due--today{color:var(--accent);font-weight:600}.task__due--overdue{color:var(--danger);font-weight:600}.task__qty{padding:1px 8px;border-radius:var(--r-full);background:var(--surface-2);font-size:var(--fs-xs);color:var(--muted)}.task__note{margin-top:4px;font-size:var(--fs-sm);color:var(--faint);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.task--high:before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--accent)}.task--low .task__title{color:var(--muted)}.task__steps{display:flex;align-items:center;gap:var(--sp-2);margin-top:7px}.task__steps-bar{flex:1;height:4px;border-radius:var(--r-full);background:var(--surface-2);overflow:hidden}.task__steps-fill{display:block;height:100%;border-radius:var(--r-full);background:var(--accent);transition:width .26s var(--ease)}.task__steps-text{font-size:var(--fs-xs);font-variant-numeric:tabular-nums;color:var(--muted)}.swipe{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--surface-2)}.swipe__bg{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:0 var(--sp-5);font-size:var(--fs-sm);font-weight:600}.swipe__bg-done{color:var(--success)}.swipe__bg-del{color:var(--danger)}.chip{display:inline-flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);border-radius:var(--r-full);background:var(--surface);font-size:var(--fs-sm);font-weight:500;white-space:nowrap;transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}.chip--active{background:var(--accent);color:var(--accent-fg);font-weight:600}.chip-row{display:flex;gap:var(--sp-2);overflow-x:auto;padding:var(--sp-1) var(--sp-4) var(--sp-3);margin:0 calc(var(--sp-4) * -1);scrollbar-width:none}.chip-row::-webkit-scrollbar{display:none}.chip__count{font-variant-numeric:tabular-nums;opacity:.7}.ctx{display:flex;align-items:center;gap:var(--sp-3);width:100%;padding:var(--sp-4);border-radius:var(--r-lg);background:var(--surface);text-align:left;box-shadow:var(--shadow-sm);transition:transform var(--dur-1) var(--ease)}.ctx:active{transform:scale(.985)}.ctx__emoji{display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:var(--r-md);background:var(--surface-2);font-size:20px}.ctx__name{flex:1;font-size:var(--fs-md);font-weight:550}.ctx__badges{display:flex;align-items:center;gap:var(--sp-2)}.ctx__count{font-size:var(--fs-sm);font-variant-numeric:tabular-nums;color:var(--muted)}.ctx__overdue{min-width:22px;height:22px;padding:0 7px;display:grid;place-items:center;border-radius:var(--r-full);background:var(--c-danger-soft);color:var(--danger);font-size:var(--fs-xs);font-weight:650;font-variant-numeric:tabular-nums}.ctx__chev{color:var(--faint)}.hero{position:relative;overflow:hidden;margin-top:var(--sp-4);padding:var(--sp-5);border-radius:var(--r-xl);background:linear-gradient(150deg,color-mix(in oklab,var(--accent) 26%,var(--surface)),var(--surface) 68%);box-shadow:var(--shadow-md)}.hero__label{font-size:var(--fs-sm);font-weight:600;color:color-mix(in oklab,var(--text) 78%,transparent)}.hero__nums{display:flex;align-items:baseline;gap:var(--sp-2);margin-top:var(--sp-1)}.hero__big{font-size:40px;font-weight:720;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}.hero__of{font-size:var(--fs-md);color:var(--muted);font-variant-numeric:tabular-nums}.hero__bar{margin-top:var(--sp-4);height:8px;border-radius:var(--r-full);background:color-mix(in oklab,var(--text) 12%,transparent);overflow:hidden}.hero__fill{height:100%;border-radius:var(--r-full);background:var(--accent);transition:width .42s var(--ease)}.hero__hint{margin-top:var(--sp-3);font-size:var(--fs-sm);color:color-mix(in oklab,var(--text) 70%,transparent)}.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;align-items:center;height:calc(var(--tabbar-h) + var(--safe-bottom));padding-bottom:var(--safe-bottom);padding-left:var(--safe-left);padding-right:var(--safe-right);background:color-mix(in oklab,var(--bg) 92%,transparent);backdrop-filter:saturate(160%) blur(18px);-webkit-backdrop-filter:saturate(160%) blur(18px);border-top:1px solid var(--border)}.tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:var(--tabbar-h);color:var(--faint);font-size:10.5px;font-weight:550;letter-spacing:.01em;transition:color var(--dur-1) var(--ease)}.tab--active{color:var(--accent)}.tab__badge{position:absolute;transform:translate(14px,-12px);min-width:17px;height:17px;padding:0 5px;border-radius:var(--r-full);background:var(--danger);color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center;font-variant-numeric:tabular-nums}.fab{position:fixed;right:calc(var(--sp-4) + var(--safe-right));bottom:calc(var(--tabbar-h) + var(--safe-bottom) + var(--sp-4));z-index:25;display:grid;place-items:center;width:56px;height:56px;border-radius:var(--r-full);background:var(--accent);color:var(--accent-fg);box-shadow:0 10px 26px color-mix(in oklab,var(--accent) 42%,transparent);transition:transform var(--dur-1) var(--ease),background var(--dur-1) var(--ease)}.fab:active{transform:scale(.92);background:var(--c-accent-hover)}.sheet-backdrop{position:fixed;inset:0;z-index:40;background:#00000073;backdrop-filter:blur(2px);animation:fade-in var(--dur-2) var(--ease)}.sheet{position:fixed;left:0;right:0;bottom:0;z-index:41;max-height:88vh;display:flex;flex-direction:column;padding:var(--sp-2) var(--sp-4) calc(var(--sp-4) + var(--safe-bottom));border-radius:var(--r-xl) var(--r-xl) 0 0;background:var(--surface);box-shadow:var(--shadow-lg);animation:sheet-up var(--dur-2) var(--ease)}.sheet__grip{width:38px;height:4px;margin:0 auto var(--sp-3);border-radius:var(--r-full);background:var(--border)}.sheet__title{font-size:var(--fs-lg);font-weight:660;letter-spacing:-.015em;margin-bottom:var(--sp-3)}.field{width:100%;min-height:104px;padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md);background:var(--surface-2);border:1.5px solid transparent;font-size:var(--fs-base);resize:none;transition:border-color var(--dur-1) var(--ease)}.field:focus{outline:none;border-color:var(--accent)}.field::placeholder{color:var(--faint)}.row{display:flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-3);flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:46px;padding:0 var(--sp-5);border-radius:var(--r-md);font-size:var(--fs-base);font-weight:600;background:var(--surface-2);color:var(--text);transition:transform var(--dur-1) var(--ease),opacity var(--dur-1) var(--ease)}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.45;pointer-events:none}.btn--primary{background:var(--accent);color:var(--accent-fg)}.btn--ghost{background:transparent;color:var(--muted)}.btn--danger{background:var(--c-danger-soft);color:var(--danger)}.btn--grow{flex:1}.btn--rec{background:var(--c-danger-soft);color:var(--danger)}.btn--rec-on{background:var(--danger);color:#fff}.sheet--tall{max-height:92vh;overflow-y:auto;-webkit-overflow-scrolling:touch}.field--title{min-height:auto;padding:12px 14px;font-size:var(--fs-md);font-weight:600;line-height:1.35;resize:none;overflow:hidden}.field--note{margin-top:var(--sp-2);min-height:72px;font-size:var(--fs-sm)}.field--inline{min-height:46px;padding:11px 14px;font-size:var(--fs-base);resize:none}.steps{display:flex;flex-direction:column;gap:2px}.step{display:flex;align-items:center;gap:var(--sp-3);padding:9px var(--sp-2);border-radius:var(--r-sm);transition:background var(--dur-1) var(--ease)}.step:active{background:var(--surface-2)}.step--done .step__text{color:var(--faint);text-decoration:line-through;text-decoration-color:var(--faint)}.step__text{flex:1;min-width:0;font-size:var(--fs-base);word-break:break-word}.step__remove{display:grid;place-items:center;width:30px;height:30px;border-radius:var(--r-full);color:var(--faint);transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}.step__remove:active{background:var(--c-danger-soft);color:var(--danger)}.task__check--small{width:22px;height:22px;margin-top:0;border-width:1.8px}.step--pick{width:100%;text-align:left;gap:var(--sp-2);color:var(--accent);background:var(--c-accent-soft)}.step--pick .step__text{font-size:var(--fs-sm)}.toast{position:fixed;left:var(--sp-4);right:var(--sp-4);bottom:calc(var(--tabbar-h) + var(--safe-bottom) + var(--sp-3));z-index:50;display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md);background:var(--surface-2);box-shadow:var(--shadow-lg);font-size:var(--fs-sm);animation:toast-in var(--dur-2) var(--ease)}.toast__text{flex:1;min-width:0}.toast__action{font-weight:650;color:var(--accent);padding:var(--sp-1) var(--sp-2)}.empty{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);padding:var(--sp-8) var(--sp-5);text-align:center}.empty__icon{font-size:34px;line-height:1;opacity:.85}.empty__title{font-size:var(--fs-md);font-weight:600}.empty__text{font-size:var(--fs-sm);color:var(--muted);max-width:30ch}.skeleton{height:66px;border-radius:var(--r-lg);background:linear-gradient(90deg,var(--surface) 25%,var(--surface-2) 50%,var(--surface) 75%);background-size:200% 100%;animation:shimmer 1.4s linear infinite}.muted{color:var(--muted)}.tabular{font-variant-numeric:tabular-nums}.spin{animation:spin .9s linear infinite}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes sheet-up{0%{transform:translateY(14px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes toast-in{0%{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes spin{to{transform:rotate(360deg)}}:root{color-scheme:dark light;--c-bg: oklch(.17 .012 278);--c-surface: oklch(.222 .014 278);--c-surface-2: oklch(.268 .016 278);--c-border: oklch(.32 .014 278);--c-text: oklch(.972 .004 278);--c-muted: oklch(.72 .012 278);--c-faint: oklch(.55 .012 278);--c-accent: oklch(.63 .196 277);--c-accent-hover: oklch(.68 .19 277);--c-accent-soft: oklch(.63 .196 277 / .16);--c-accent-fg: oklch(.99 .005 277);--c-success: oklch(.72 .166 152);--c-success-soft: oklch(.72 .166 152 / .16);--c-danger: oklch(.66 .203 25);--c-danger-soft: oklch(.66 .203 25 / .16);--c-warning: oklch(.8 .152 78);--r-sm: 10px;--r-md: 14px;--r-lg: 20px;--r-xl: 26px;--r-full: 999px;--font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable", "Segoe UI", Roboto, "Helvetica Neue", system-ui, sans-serif;--fs-xs: 12px;--fs-sm: 13px;--fs-base: 15px;--fs-md: 17px;--fs-lg: 20px;--fs-xl: 24px;--fs-2xl: 30px;--sp-1: 4px;--sp-2: 8px;--sp-3: 12px;--sp-4: 16px;--sp-5: 20px;--sp-6: 24px;--sp-8: 32px;--ease: cubic-bezier(.22, .8, .22, 1);--dur-1: .14s;--dur-2: .22s;--shadow-sm: 0 1px 2px oklch(0 0 0 / .18);--shadow-md: 0 6px 20px oklch(0 0 0 / .22);--shadow-lg: 0 18px 48px oklch(0 0 0 / .32);--bg: var(--tg-bg, var(--c-bg));--surface: var(--tg-section-bg, var(--c-surface));--surface-2: var(--tg-secondary-bg, var(--c-surface-2));--text: var(--tg-text, var(--c-text));--muted: var(--tg-hint, var(--c-muted));--border: var(--tg-separator, var(--c-border));--accent: var(--c-accent);--accent-fg: var(--c-accent-fg);--danger: var(--tg-destructive, var(--c-danger));--success: var(--c-success);--safe-top: max(var(--tg-safe-area-inset-top, 0px), env(safe-area-inset-top, 0px));--safe-bottom: max(var(--tg-safe-area-inset-bottom, 0px), env(safe-area-inset-bottom, 0px));--safe-left: max(var(--tg-safe-area-inset-left, 0px), env(safe-area-inset-left, 0px));--safe-right: max(var(--tg-safe-area-inset-right, 0px), env(safe-area-inset-right, 0px));--tabbar-h: 58px}:root[data-theme=light]{--c-bg: oklch(.977 .004 278);--c-surface: oklch(1 0 0);--c-surface-2: oklch(.955 .006 278);--c-border: oklch(.9 .008 278);--c-text: oklch(.22 .014 278);--c-muted: oklch(.52 .012 278);--c-faint: oklch(.66 .01 278);--c-accent: oklch(.55 .21 277);--c-accent-hover: oklch(.5 .21 277);--c-accent-soft: oklch(.55 .21 277 / .12);--c-success: oklch(.58 .15 152);--c-danger: oklch(.56 .21 25);--shadow-sm: 0 1px 2px oklch(.4 .02 278 / .1);--shadow-md: 0 6px 20px oklch(.4 .02 278 / .12);--shadow-lg: 0 18px 48px oklch(.4 .02 278 / .18)}@media(prefers-reduced-motion:reduce){:root{--dur-1: 1ms;--dur-2: 1ms}*,*:before,*:after{animation-duration:1ms!important;transition-duration:1ms!important;scroll-behavior:auto!important}}*,*:before,*:after{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:var(--font);font-size:var(--fs-base);line-height:1.45;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overscroll-behavior-y:none}button{font:inherit;color:inherit;border:none;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}input,textarea{font:inherit;color:inherit}ul,ol{margin:0;padding:0;list-style:none}h1,h2,h3,p{margin:0}:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm)}::selection{background:var(--c-accent-soft)}@media(pointer:fine){::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--border);border-radius:var(--r-full);border:3px solid transparent;background-clip:content-box}::-webkit-scrollbar-track{background:transparent}}