:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--bg:#f5f5f6;--surface:#fff;--surface-2:#f2f3f5;--text:#17181c;--muted:#6b7280;--faint:#9aa1ac;--hairline:#e7e8ec;--hairline-strong:#d9dbe0;--accent:#4f46e5;--accent-weak:#eef0fe;--accent-text:#fff;--danger:#dc2626;--danger-weak:#fdecec;--success:#16a34a;--ink:#17181c;--ink-hover:#000;--ink-text:#fff;--r-sm:8px;--r-md:12px;--r-lg:16px;--r-pill:999px;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:40px;--shadow-sm:0 1px 2px #1112160d;--shadow-md:0 6px 20px -8px #1112162e, 0 2px 6px #1112160d;--shadow-pop:0 12px 32px -10px #11121647;--ring:0 0 0 2px var(--surface), 0 0 0 4px var(--accent);--font-stack:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif;--ease:cubic-bezier(.2, .7, .2, 1)}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--bg:#0b0c0e;--surface:#141619;--surface-2:#1b1e22;--text:#e8eaed;--muted:#9aa0aa;--faint:#6b7280;--hairline:#23262b;--hairline-strong:#2c3037;--accent:#7c85ff;--accent-weak:#1c1f36;--accent-text:#0b0c0e;--danger:#f87171;--danger-weak:#2a1719;--success:#4ade80;--ink:#e8eaed;--ink-hover:#fff;--ink-text:#0b0c0e;--shadow-sm:0 1px 2px #0006;--shadow-md:0 8px 24px -10px #000000b3, 0 2px 6px #0000004d;--shadow-pop:0 16px 36px -12px #000000bf;--ring:0 0 0 2px var(--surface), 0 0 0 4px var(--accent)}}*{box-sizing:border-box}html,body,#root{height:100%}body{font-family:var(--font-stack);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;margin:0}button,input{font-family:inherit}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}a:focus-visible,button:focus-visible,input:focus-visible,[role=tab]:focus-visible,[tabindex]:focus-visible{box-shadow:var(--ring);outline:none}.app-shell{min-height:100%;padding:var(--space-md);justify-content:center;display:flex}.panel{background:var(--surface);width:100%;max-width:560px;padding:var(--space-lg);margin-top:var(--space-md);margin-bottom:var(--space-lg);border:1px solid var(--hairline);border-radius:var(--r-lg);box-shadow:var(--shadow-md);align-self:flex-start}.panel__header{justify-content:space-between;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-lg);display:flex}.panel__header h1{letter-spacing:-.02em;margin:0;font-size:1.625rem;font-weight:680;line-height:1.1}.task-count{letter-spacing:.01em;color:var(--muted);background:var(--surface-2);border:1px solid var(--hairline);border-radius:var(--r-pill);font-variant-numeric:tabular-nums;white-space:nowrap;margin:0;padding:6px 10px;font-size:.75rem;font-weight:600;line-height:1}@media (width>=641px){.app-shell{padding:var(--space-lg) var(--space-md)}.panel{margin-top:var(--space-xl);padding:var(--space-xl) var(--space-lg) var(--space-lg)}}.add-form{margin-bottom:var(--space-lg)}.add-form__row{gap:var(--space-sm);display:flex}.input-title{min-width:0;color:var(--text);background:var(--surface-2);border:1px solid var(--hairline);border-radius:var(--r-md);min-height:46px;transition:border-color .15s var(--ease), background .15s var(--ease), box-shadow .15s var(--ease);flex:auto;padding:12px 14px;font-size:1rem;line-height:1.5}.input-title::placeholder{color:var(--faint)}.input-title:hover:not(:disabled){border-color:var(--hairline-strong)}.input-title:focus{background:var(--surface);border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak);outline:none}.input-title[aria-invalid=true]{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-weak)}.input-title:disabled{opacity:.6;cursor:not-allowed}.button-primary{letter-spacing:-.01em;background:var(--ink);min-width:46px;min-height:46px;color:var(--ink-text);border-radius:var(--r-md);cursor:pointer;box-shadow:var(--shadow-sm);transition:background .15s var(--ease), transform .1s var(--ease), opacity .15s var(--ease);border:none;flex:none;padding:12px 20px;font-size:.9375rem;font-weight:600}.button-primary:hover:not(:disabled){background:var(--ink-hover)}.button-primary:active:not(:disabled){transform:translateY(1px)}.button-primary:disabled{background:var(--surface-2);color:var(--faint);box-shadow:none;cursor:not-allowed}.field-error{margin:var(--space-sm) 0 0;color:var(--danger);font-size:.8125rem;font-weight:500}.filter-tabs{background:var(--surface-2);border:1px solid var(--hairline);border-radius:var(--r-md);margin-bottom:var(--space-lg);gap:2px;padding:3px;display:flex}.filter-tab{letter-spacing:.005em;min-height:38px;color:var(--muted);border-radius:calc(var(--r-md) - 4px);cursor:pointer;transition:color .15s var(--ease), background .15s var(--ease), box-shadow .15s var(--ease);background:0 0;border:none;flex:1 1 0;padding:8px;font-size:.8125rem;font-weight:600}.filter-tab:hover:not(.filter-tab-active){color:var(--text)}.filter-tab-active{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm)}.task-list{flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;display:flex}.task-row{align-items:center;gap:var(--space-sm);background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-md);transition:border-color .15s var(--ease), box-shadow .15s var(--ease), transform .1s var(--ease);padding:10px 12px;display:flex}.task-row:hover{border-color:var(--hairline-strong);box-shadow:var(--shadow-sm)}.task-row--pending{opacity:.55}.task-checkbox{appearance:none;border:2px solid var(--hairline-strong);background:var(--surface);cursor:pointer;width:22px;height:22px;transition:border-color .15s var(--ease), background .15s var(--ease);border-radius:7px;flex:none;margin:0 2px;position:relative}.task-checkbox:before{content:"";width:44px;height:44px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.task-checkbox:hover:not(:disabled){border-color:var(--accent)}.task-checkbox:checked{background:var(--accent);border-color:var(--accent)}.task-checkbox:checked:after{content:"";border:solid var(--accent-text);border-width:0 2px 2px 0;width:5px;height:9px;position:absolute;top:3px;left:6px;transform:rotate(45deg)}.task-checkbox:disabled{cursor:not-allowed;opacity:.6}.task-title{color:var(--text);word-break:break-word;transition:color .15s var(--ease);flex:auto;font-size:.9375rem;line-height:1.45}.task-title--completed{color:var(--faint);text-decoration:line-through;-webkit-text-decoration-color:var(--hairline-strong);text-decoration-color:var(--hairline-strong)}.button-danger{min-height:36px;color:var(--muted);border-radius:var(--r-sm);cursor:pointer;transition:color .15s var(--ease), background .15s var(--ease), border-color .15s var(--ease), opacity .15s var(--ease);background:0 0;border:1px solid #0000;flex:none;padding:7px 12px;font-size:.8125rem;font-weight:600}.button-danger:hover:not(:disabled){color:var(--danger);background:var(--danger-weak)}.button-danger--confirm{color:var(--danger);border-color:var(--danger);background:var(--danger-weak)}.button-danger--confirm:hover:not(:disabled){color:var(--accent-text);background:var(--danger)}.button-danger:disabled,.button-cancel:disabled{cursor:not-allowed;opacity:.5}.task-row__confirm{gap:var(--space-xs);flex:none;display:flex}.button-cancel{background:var(--surface-2);min-height:36px;color:var(--muted);border:1px solid var(--hairline);border-radius:var(--r-sm);cursor:pointer;transition:color .15s var(--ease), background .15s var(--ease);padding:7px 12px;font-size:.8125rem;font-weight:600}.button-cancel:hover:not(:disabled){color:var(--text);background:var(--hairline)}@media (width>=641px){.task-row .button-danger{opacity:0}.task-row:hover .button-danger,.task-row:focus-within .button-danger,.task-row .task-row__confirm,.task-row .button-danger--confirm{opacity:1}}.task-row--skeleton{box-shadow:none;pointer-events:none;border-color:#0000}.task-row--skeleton:hover{box-shadow:none;border-color:#0000}.skeleton-block{background:linear-gradient(90deg, var(--surface-2) 0%, var(--hairline) 50%, var(--surface-2) 100%);border-radius:var(--r-sm);background-size:200% 100%;animation:1.4s ease-in-out infinite shimmer;display:block}.skeleton-block--checkbox{border-radius:7px;flex:none;width:22px;height:22px}.skeleton-block--title{flex:auto;height:14px}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media (prefers-reduced-motion:reduce){.skeleton-block{animation:none}*{transition-duration:.01ms!important}}.empty-state{text-align:center;color:var(--muted);padding:var(--space-xl) var(--space-md);border:1px dashed var(--hairline-strong);border-radius:var(--r-md);margin:0;font-size:.9375rem}.load-error{text-align:center;padding:var(--space-lg) 0}.load-error p{color:var(--danger);margin:0 0 var(--space-md)}.error-banner{justify-content:space-between;align-items:center;gap:var(--space-sm);background:var(--danger-weak);border:1px solid var(--danger);color:var(--danger);border-radius:var(--r-md);padding:var(--space-sm) var(--space-md);margin-bottom:var(--space-md);box-shadow:var(--shadow-sm);font-size:.875rem;font-weight:500;display:flex}.error-banner__actions{align-items:center;gap:var(--space-sm);flex:none;display:flex}.error-banner__retry{border:1px solid var(--danger);color:var(--danger);border-radius:var(--r-sm);cursor:pointer;min-height:32px;transition:background .15s var(--ease), color .15s var(--ease);background:0 0;padding:6px 12px;font-size:.8125rem;font-weight:600}.error-banner__retry:hover{background:var(--danger);color:var(--accent-text)}.error-banner__dismiss{color:var(--danger);cursor:pointer;border-radius:var(--r-sm);opacity:.7;min-width:32px;min-height:32px;transition:opacity .15s var(--ease);background:0 0;border:none;font-size:1.25rem;line-height:1}.error-banner__dismiss:hover{opacity:1}@media (width<=640px){.app-shell{padding:0;display:block}.panel{max-width:none;min-height:100vh;box-shadow:none;padding:var(--space-lg) var(--space-md) var(--space-xl);border:none;border-radius:0;margin:0}.button-danger,.button-cancel{min-height:44px}}
