*,*:before,*:after{box-sizing:border-box}html,body{height:100%}body,h1,h2,h3,h4,p,ul,li{margin:0;padding:0}ul{list-style:none}:root{--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;--bg: #f9fafb;--surface: #ffffff;--text: #111827;--text-muted: #9ca3af;--border: #e5e7eb;--bg-dark: #0f172a;--surface-dark: #111827;--text-dark: #f9fafb;--text-muted-dark: #64748b;--border-dark: #1f2937;--accent-1: #5a7cf3;--accent-2: #8a5af3;--ring: #0284c7;--success: #16a34a;--danger: #dc2626;--dur: .22s;--ease: cubic-bezier(.2, .7, .3, 1)}html[data-theme=light]{--bg-current: var(--bg);--surface-current: var(--surface);--text-current: var(--text);--text-muted-current: var(--text-muted);--border-current: var(--border)}html[data-theme=dark]{--bg-current: var(--bg-dark);--surface-current: var(--surface-dark);--text-current: var(--text-dark);--text-muted-current: var(--text-muted-dark);--border-current: var(--border-dark)}@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}body{font-family:var(--font-sans);background:radial-gradient(1000px 600px at 10% 0%,rgba(79,70,229,.1),transparent 60%),radial-gradient(1000px 600px at 90% 20%,rgba(124,58,237,.08),transparent 60%),var(--bg-current);color:var(--text-current);line-height:1.5;-webkit-font-smoothing:antialiased}.container{max-width:960px;margin:0 auto;padding:clamp(16px,4vw,32px);min-height:calc(100vh - 140px)}.app-header{display:flex;align-items:center;justify-content:space-between;padding:16px clamp(16px,4vw,36px);border-bottom:1px solid var(--border-current);-webkit-backdrop-filter:saturate(120%) blur(8px);backdrop-filter:saturate(120%) blur(8px);position:sticky;top:0;z-index:10;background:color-mix(in oklab,var(--bg-current) 90%,transparent)}.brand{display:flex;align-items:center;gap:12px}.logo{height:40px;width:auto}.title{font-size:clamp(18px,2vw,22px);font-weight:600;letter-spacing:-.01em;text-decoration:none}.header-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.icon-button{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;background:var(--surface-current);color:var(--text-current);border:var(--border-current);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur)}.icon-button:hover{transform:translateY(-1px);box-shadow:0 10px 24px #0000002e}.icon-button:focus-visible{outline:3px solid var(--ring);outline-offset:2px}.filters{display:inline-flex;background:var(--surface-current);overflow:hidden;align-items:center;gap:4px}.segmented{padding:10px 14px;font-weight:500;color:var(--text-muted-current);background:transparent;border:none;cursor:pointer;transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}.segmented:hover{color:var(--text-current)}.segmented.active{color:var(--text-current);border:1px solid var(--border-current);border-radius:12px}.badge-all{background:linear-gradient(135deg,color-mix(in oklab,var(--accent-1) 60%,transparent),color-mix(in oklab,var(--accent-2) 80%,transparent))}.badge-pending{background-color:#f59e0b}.badge-completed{background-color:var(--success)}.badge{font-size:.75rem;margin-left:.5rem}.create{margin-top:16px}.task-title{color:var(--text-current);font-size:clamp(20px,2vw,24px);font-weight:700;letter-spacing:-.01em;margin-bottom:16px}.input-group{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;margin-bottom:8px}#task-input{width:100%;padding:14px 16px;border-radius:12px;border:1px solid var(--border-current);background:var(--surface-current);color:var(--text-current);font-size:16px;transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}#task-input::placeholder{color:var(--text-muted-current)}#task-input:focus{outline:none;border-color:color-mix(in oklab,var(--accent-1) 60%,var(--border-current));box-shadow:0 0 0 2px color-mix(in oklab,var(--accent-1) 45%,transparent)}.primary-btn{padding:12px 18px;border-radius:12px;background:linear-gradient(135deg,var(--accent-1),var(--accent-2));color:#fff;font-weight:600;border:none;cursor:pointer;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),filter var(--dur);box-shadow:0 12px 24px #4f46e559}.primary-btn:hover{transform:translateY(-1px);filter:brightness(1.05)}.primary-btn:active{transform:translateY(0)}.primary-btn:focus-visible{outline:3px solid var(--ring);outline-offset:2px}.help-text{margin-top:8px;color:var(--text-muted-current);font-size:1rem}.error-text{color:var(--danger);font-size:.9rem;margin-top:8px}.list-section{margin-top:24px}.task-list{display:grid;gap:10px;max-height:480px;overflow-y:auto;padding-right:4px}.task-list::-webkit-scrollbar{width:8px}.task-list::-webkit-scrollbar-track{background:var(--surface-current);border-radius:8px}.task-list::-webkit-scrollbar-thumb{background-color:var(--accent-1);border-radius:8px;border:2px solid var(--surface-current)}.task-item{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;border:1px solid var(--border-current);background:var(--surface-current);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur)}.checkbox{position:relative;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center}.checkbox input{position:absolute;opacity:0;width:22px;height:22px;cursor:pointer}.checkmark{width:20px;height:20px;border-radius:6px;border:2px solid color-mix(in oklab,#f59e0b 40%,var(--border-current));display:inline-block;transition:background var(--dur),border-color var(--dur);position:relative}.checkbox input:checked+.checkmark{background:var(--success);border-color:transparent;box-shadow:0 4px 12px #4f46e559}.checkbox input:checked+.checkmark:after{content:"";position:absolute;left:5px;top:1px;width:6px;height:12px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg)}.task-content{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.task-text{color:var(--text-current)}.task-item.completed .task-text{color:var(--text-muted-current);text-decoration:line-through}.status-chip{font-size:12px;font-weight:600;padding:4px 8px;border-radius:999px;border:1px solid var(--border-current);background:linear-gradient(135deg,color-mix(in oklab,#f59e0b 60%,var(--accent-2)),#f59e0b)}.task-item.completed .status-chip{color:#fff;border-color:transparent;background:linear-gradient(135deg,color-mix(in oklab,var(--success) 60%,var(--accent-1)),var(--success));box-shadow:0 4px 12px #10b98159}.delete-btn{background:transparent;color:var(--danger);border:1px solid var(--border-current);border-radius:8px;padding:6px 8px;cursor:pointer;transition:background var(--dur),color var(--dur),transform var(--dur)}.delete-btn:hover{background:color-mix(in oklab,var(--danger) 10%,var(--surface-current));color:color-mix(in oklab,var(--danger) 90%,var(--text-current));transform:scale(1.02)}.delete-btn:focus-visible{outline:3px solid var(--ring);outline-offset:2px}.empty-state{display:grid;place-items:center;text-align:center;padding:36px;border:2px dashed var(--border-current);border-radius:16px;color:var(--text-muted-current);background:color-mix(in oklab,var(--surface-current) 40%,transparent)}.empty-title{font-weight:600}.empty-subtitle{margin-top:4px}.app-footer{display:flex;align-items:center;justify-content:space-between;padding:16px clamp(16px,4vw,36px);border-top:1px solid var(--border-current);color:var(--text-muted-current);-webkit-backdrop-filter:saturate(120%) blur(8px);backdrop-filter:saturate(120%) blur(8px);background:color-mix(in oklab,var(--bg-current) 90%,transparent)}.footer-left{display:flex;align-items:center;gap:12px;font-size:.8rem}.logo-foo{height:32px;width:auto}.footer-right{display:flex;align-items:center;font-size:.8rem}.footer-link{color:inherit;text-decoration:none;border-bottom:1px dashed var(--border-current)}.footer-link:hover{color:var(--text-muted)}@media(max-width:640px){.input-group{grid-template-columns:1fr}.primary-btn{width:100%}.app-header{flex-direction:column;align-items:flex-start;gap:10px}.segmented{padding:10px 8px}}@media(min-width:1280px){.container{max-width:1120px}}@media(min-width:1600px){.container{max-width:1320px}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}