:root{--ground-base:oklch(13% .015 260);--ground-abyss:oklch(8% .012 260);--surface-raised:oklch(17% .015 260);--surface-floating:oklch(21% .016 260);--surface-overlay:oklch(24% .016 260);--text-emphasis:oklch(93% .012 260);--text-primary:oklch(82% .008 260);--text-secondary:oklch(63% .004 260);--text-tertiary:oklch(52% .005 260);--text-faint:oklch(45% .006 260);--border-subtle:oklch(28% .012 260);--border-default:oklch(33% .01 260);--border-emphasis:oklch(40% .008 260);--arctic-functional:oklch(70% .16 220);--arctic-atmospheric:oklch(55% .08 220);--ember-functional:oklch(70% .16 15);--ember-atmospheric:oklch(50% .1 15);--forge-functional:oklch(72% .16 45);--forge-atmospheric:oklch(55% .08 45);--signal-functional:oklch(75% .16 150);--signal-atmospheric:oklch(55% .08 150);--error:oklch(70% .14 25);--warning:oklch(75% .14 80);--success:oklch(72% .14 155);--info:oklch(70% .12 240);--input-background:oklch(10% .012 260);--fresnel:oklch(100% 0 0/.06);--space-1:4px;--space-2:6px;--space-3:9px;--space-4:14px;--space-5:20px;--space-6:30px;--space-7:45px;--space-8:68px;--space-9:102px;--radius-none:0px;--radius-default:4px;--radius-elevated:8px;--radius-expressive:12px;--radius-full:9999px;--type-xs:.694rem;--type-sm:.833rem;--type-body:.875rem;--type-md:1rem;--type-lg:1.2rem;--type-xl:1.44rem;--type-display:1.728rem;--type-title:2.074rem;--font-instrument:"Inter Variable", "Inter", system-ui, -apple-system, sans-serif;--font-monument:"Space Grotesk", sans-serif;--font-truth:"JetBrains Mono", monospace;--weight-light:300;--weight-normal:450;--weight-medium:550;--shadow-card:0 1px 3px oklch(0% 0 0/.3), 0 4px 12px oklch(0% 0 0/.15);--shadow-floating:0 4px 16px oklch(0% 0 0/.4), 0 8px 32px oklch(0% 0 0/.2);--shadow-arctic-glow:0 0 40px oklch(55% .08 220/.4);--shadow-signal-glow:0 0 20px oklch(55% .08 150/.35);--shadow-ember-glow:0 0 20px oklch(50% .1 15/.35);--shadow-forge-glow:0 0 20px oklch(55% .08 45/.35);--vault-gradient:radial-gradient(ellipse 120% 50% at 50% 0%, oklch(8% .02 260/.5) 0%, oklch(8% .02 260/0) 100%);--focus-ring:0 0 0 2px var(--ground-base), 0 0 0 4px var(--arctic-functional);--transition-fast:.12s ease;--transition-normal:.2s ease}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility;font-size:16px}body{font-family:var(--font-instrument);font-size:var(--type-body);font-weight:var(--weight-normal);color:var(--text-primary);background-color:var(--ground-base);min-height:100vh;line-height:1.6}:focus{outline:none}:focus-visible{box-shadow:var(--focus-ring);border-radius:var(--radius-default)}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{box-shadow:var(--focus-ring)}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}@media (width<=1024px){:root{--space-8:56px;--space-9:80px}}@media (width<=768px){:root{--space-7:36px;--space-8:44px;--space-9:56px}}@media (width<=480px){:root{--space-6:24px;--space-7:30px;--space-8:36px;--space-9:44px}}.grain-viewport{pointer-events:none;z-index:9999;position:fixed;inset:0}.grain-viewport:before{content:"";filter:url(#grain-atmospheric);opacity:.015;mix-blend-mode:overlay;position:absolute;inset:0}.grain-surface{position:relative}.grain-surface:after{content:"";filter:url(#grain-surface);opacity:.025;mix-blend-mode:overlay;pointer-events:none;border-radius:inherit;z-index:1;position:absolute;inset:0}.fresnel-edge{border-top:1px solid var(--fresnel)}.todo-input{gap:var(--space-3);align-items:center;display:flex}.todo-input__field{min-height:44px;padding:var(--space-3) var(--space-4);background-color:var(--input-background);border:1px solid var(--border-subtle);border-radius:var(--radius-default);color:var(--text-primary);font-family:var(--font-instrument);font-size:var(--type-body);font-weight:var(--weight-normal);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);flex:1;line-height:1.6}.todo-input__field::placeholder{color:var(--text-faint)}.todo-input__field:hover{border-color:var(--border-default)}.todo-input__field:focus-visible{border-color:var(--arctic-functional);box-shadow:var(--focus-ring)}.todo-input__button{min-width:44px;min-height:44px;padding:var(--space-3);background-color:var(--arctic-functional);color:var(--ground-abyss);border-radius:var(--radius-default);cursor:pointer;box-shadow:var(--shadow-arctic-glow);transition:background-color var(--transition-fast), box-shadow var(--transition-fast);border:none;justify-content:center;align-items:center;display:flex}.todo-input__button:hover{box-shadow:var(--shadow-arctic-glow), 0 0 60px oklch(55% .08 220/.25);background-color:oklch(73% .16 220)}.todo-input__button:active{background-color:oklch(66% .16 220)}.todo-input__button:focus-visible{box-shadow:var(--focus-ring), var(--shadow-arctic-glow)}@media (width<=480px){.todo-input{flex-direction:column}.todo-input__field,.todo-input__button{width:100%}}.filter-tabs{gap:var(--space-1);padding:var(--space-1);background-color:var(--input-background);border-radius:var(--radius-default);border:1px solid var(--border-subtle);display:flex}.filter-tabs__tab{min-height:44px;padding:var(--space-2) var(--space-4);border-radius:var(--radius-default);color:var(--text-secondary);font-family:var(--font-instrument);font-size:var(--type-sm);font-weight:var(--weight-medium);letter-spacing:.01em;cursor:pointer;transition:color var(--transition-fast);z-index:1;background:0 0;border:none;flex:1;position:relative}.filter-tabs__tab:hover{color:var(--text-primary)}.filter-tabs__tab--active{color:var(--text-emphasis)}.filter-tabs__tab:focus-visible{box-shadow:var(--focus-ring);z-index:2}.filter-tabs__indicator{background-color:var(--surface-raised);border-radius:var(--radius-default);border:1px solid var(--border-subtle);z-index:-1;position:absolute;inset:0}@media (prefers-reduced-motion:reduce){.filter-tabs__indicator{transition:none!important}}.todo-item{align-items:flex-start;gap:var(--space-3);padding:var(--space-4);background-color:var(--surface-raised);border:1px solid var(--border-subtle);border-top-color:var(--fresnel);border-radius:var(--radius-default);box-shadow:var(--shadow-card);transition:background-color var(--transition-fast), box-shadow var(--transition-fast);display:flex;position:relative}.todo-item:hover{box-shadow:var(--shadow-card), 0 2px 8px oklch(0% 0 0/.1);background-color:oklch(20% .015 260)}.todo-item:after{content:"";filter:url(#grain-surface);opacity:.025;mix-blend-mode:overlay;pointer-events:none;border-radius:inherit;z-index:1;position:absolute;inset:0}.todo-item--completed{opacity:.65}.todo-item--completed:hover{opacity:.8}.todo-item__priority-dot{border-radius:var(--radius-full);width:8px;height:8px;transition:background-color var(--transition-fast), box-shadow var(--transition-fast);flex-shrink:0;margin-top:8px}.todo-item__priority-dot--normal{box-shadow:none;background-color:#0000}.todo-item__priority-dot--important{background-color:var(--arctic-functional);box-shadow:0 0 12px var(--arctic-atmospheric)}.todo-item__priority-dot--urgent{background-color:var(--forge-functional);box-shadow:0 0 12px var(--forge-atmospheric)}.todo-item__checkbox-wrapper{width:44px;height:44px;margin:calc(-1 * var(--space-3)) 0;cursor:pointer;background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:flex;position:relative}.todo-item__checkbox-wrapper:focus-visible{box-shadow:var(--focus-ring);border-radius:var(--radius-full)}.todo-item__checkbox-visual{border-radius:var(--radius-full);border:2px solid var(--border-emphasis);width:20px;height:20px;transition:background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);background-color:#0000;justify-content:center;align-items:center;display:flex}.todo-item__checkbox-wrapper:hover .todo-item__checkbox-visual{border-color:var(--signal-functional)}.todo-item__checkbox-visual--checked{background-color:var(--signal-functional);border-color:var(--signal-functional);box-shadow:var(--shadow-signal-glow)}.todo-item__checkbox-visual--checked svg{color:var(--ground-abyss)}.todo-item__content{gap:var(--space-1);flex-direction:column;flex:1;min-width:0;padding-top:2px;display:flex}.todo-item__text{font-family:var(--font-instrument);font-size:var(--type-body);font-weight:var(--weight-normal);color:var(--text-primary);cursor:text;word-break:break-word;transition:color var(--transition-fast), opacity var(--transition-fast);text-align:left;background:0 0;border:none;width:100%;padding:0;line-height:1.6}.todo-item__text:hover{color:var(--text-emphasis)}.todo-item__text--completed{color:var(--text-tertiary);text-decoration:line-through}.todo-item__text--completed:hover{color:var(--text-tertiary)}.todo-item__edit-input{width:100%;padding:var(--space-1) var(--space-2);background-color:var(--input-background);border:1px solid var(--arctic-functional);border-radius:var(--radius-default);color:var(--text-primary);font-family:var(--font-instrument);font-size:var(--type-body);font-weight:var(--weight-normal);box-shadow:var(--focus-ring);flex:1;line-height:1.6}.todo-item__actions{align-items:center;gap:var(--space-1);flex-shrink:0;margin-left:auto;display:flex}.todo-item__priority-button{border-radius:var(--radius-default);min-width:44px;min-height:44px;color:var(--text-tertiary);cursor:pointer;transition:color var(--transition-fast), background-color var(--transition-fast);background:0 0;border:none;justify-content:center;align-items:center;display:flex;position:relative}.todo-item__priority-button:hover{color:var(--text-secondary);background-color:var(--surface-raised)}.todo-item__priority-button:focus-visible{box-shadow:var(--focus-ring)}.todo-item__priority-dropdown{z-index:100;min-width:140px;padding:var(--space-1);background-color:var(--surface-floating);border:1px solid var(--border-default);border-top-color:var(--fresnel);border-radius:var(--radius-elevated);box-shadow:var(--shadow-floating);gap:var(--space-1);flex-direction:column;display:flex;position:absolute;top:100%;right:0}.todo-item__priority-option{align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);border-radius:var(--radius-default);color:var(--text-primary);font-family:var(--font-instrument);font-size:var(--type-sm);font-weight:var(--weight-normal);cursor:pointer;transition:background-color var(--transition-fast);text-align:left;background:0 0;border:none;width:100%;min-height:36px;display:flex}.todo-item__priority-option:hover{background-color:var(--surface-overlay)}.todo-item__priority-option:focus-visible{box-shadow:var(--focus-ring)}.todo-item__priority-option--active{color:var(--text-emphasis)}.todo-item__priority-option-dot{border-radius:var(--radius-full);flex-shrink:0;width:8px;height:8px}.todo-item__priority-option-dot--normal{background-color:var(--text-faint)}.todo-item__priority-option-dot--important{background-color:var(--arctic-functional)}.todo-item__priority-option-dot--urgent{background-color:var(--forge-functional)}.todo-item__delete{border-radius:var(--radius-default);min-width:44px;min-height:44px;color:var(--text-tertiary);cursor:pointer;transition:color var(--transition-fast), background-color var(--transition-fast);background:0 0;border:none;justify-content:center;align-items:center;display:flex}.todo-item__delete:hover{color:var(--ember-functional);background-color:var(--surface-raised)}.todo-item__delete:active{background-color:oklch(14% .015 260)}.todo-item__delete:focus-visible{box-shadow:var(--focus-ring)}.todo-item--editing{border-left:2px solid var(--arctic-functional)}.todo-list{gap:var(--space-3);flex-direction:column;display:flex}.empty-state{padding:var(--space-9) var(--space-5);justify-content:center;align-items:center;display:flex}.empty-state__text{font-family:var(--font-monument);font-size:var(--type-display);font-weight:var(--weight-light);color:var(--text-tertiary);letter-spacing:-.01em;text-align:center;line-height:1.2}.footer{padding-top:var(--space-4);border-top:1px solid var(--border-subtle);justify-content:space-between;align-items:center;display:flex}.footer__count{font-family:var(--font-instrument);font-size:var(--type-sm);font-weight:var(--weight-normal);color:var(--text-secondary);line-height:1.4}.footer__count-number{font-family:var(--font-truth);font-feature-settings:"tnum", "lnum";font-weight:var(--weight-medium);color:var(--text-primary)}.footer__clear{min-height:44px;padding:var(--space-2) var(--space-4);border:1px solid var(--border-subtle);border-radius:var(--radius-default);font-family:var(--font-instrument);font-size:var(--type-sm);font-weight:var(--weight-medium);color:var(--text-secondary);cursor:pointer;transition:color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);background:0 0}.footer__clear:hover{color:var(--text-primary);border-color:var(--border-default);background-color:var(--surface-raised)}.footer__clear:active{background-color:oklch(14% .015 260)}.footer__clear:focus-visible{box-shadow:var(--focus-ring)}.confirm-dialog__overlay{z-index:10000;padding:var(--space-5);background-color:oklch(8% .012 260/.6);justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.confirm-dialog__panel{width:100%;max-width:380px;padding:var(--space-6);background-color:var(--surface-floating);border:1px solid var(--border-default);border-top-color:var(--fresnel);border-radius:var(--radius-elevated);box-shadow:var(--shadow-floating);position:relative;overflow:hidden}.confirm-dialog__grain{filter:url(#grain-surface);opacity:.025;mix-blend-mode:overlay;pointer-events:none;border-radius:inherit;position:absolute;inset:0}.confirm-dialog__message{font-family:var(--font-instrument);font-size:var(--type-md);font-weight:var(--weight-normal);color:var(--text-primary);margin-bottom:var(--space-6);line-height:1.5}.confirm-dialog__actions{gap:var(--space-3);justify-content:flex-end;display:flex}.confirm-dialog__button{min-height:44px;padding:var(--space-2) var(--space-5);border-radius:var(--radius-default);font-family:var(--font-instrument);font-size:var(--type-sm);font-weight:var(--weight-medium);cursor:pointer;transition:background-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);border:none}.confirm-dialog__button:focus-visible{box-shadow:var(--focus-ring)}.confirm-dialog__button--cancel{background-color:var(--surface-raised);color:var(--text-primary);border:1px solid var(--border-default)}.confirm-dialog__button--cancel:hover{background-color:oklch(20% .015 260)}.confirm-dialog__button--cancel:active{background-color:oklch(14% .015 260)}.confirm-dialog__button--confirm{background-color:var(--ember-functional);color:var(--ground-abyss);box-shadow:var(--shadow-ember-glow)}.confirm-dialog__button--confirm:hover{box-shadow:var(--shadow-ember-glow), 0 0 40px oklch(50% .1 15/.2);background-color:oklch(73% .16 15)}.confirm-dialog__button--confirm:active{background-color:oklch(66% .16 15)}.app-viewport{background:var(--vault-gradient), var(--ground-base);min-height:100vh;position:relative}.grain-filters{pointer-events:none;width:0;height:0;position:absolute;overflow:hidden}.app-container{max-width:640px;padding:var(--space-9) var(--space-5) var(--space-8);margin:0 auto;position:relative}.app-title{font-family:var(--font-monument);font-size:var(--type-title);font-weight:var(--weight-light);color:var(--text-emphasis);letter-spacing:-.02em;margin-bottom:var(--space-8);line-height:1.1}.input-area{margin-bottom:var(--space-6)}.list-region{gap:var(--space-5);flex-direction:column;display:flex}@media (width<=768px){.app-container{padding-left:var(--space-4);padding-right:var(--space-4)}}@media (width<=480px){.app-container{padding-left:var(--space-3);padding-right:var(--space-3)}.app-title{font-size:var(--type-display)}}