:root{--bg-primary:#0a0a0c;--bg-secondary:#121216;--bg-tertiary:#1b1b22;--glass-bg:#121216b3;--glass-border:#ffffff14;--primary:#6366f1;--primary-hover:#4f46e5;--primary-glow:#6366f126;--success:#10b981;--success-glow:#10b9811a;--danger:#ef4444;--danger-hover:#dc2626;--danger-glow:#ef44441a;--text-primary:#f3f4f6;--text-secondary:#9ca3af;--text-muted:#6b7280;--border-color:#27272a;--radius-sm:8px;--radius-md:14px;--radius-lg:20px;--radius-full:9999px;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -1px #0000000f;--shadow-lg:0 10px 15px -3px #0000001a, 0 4px 6px -2px #0000000d;--shadow-glow:0 0 20px 2px var(--primary-glow);--font-sans:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--transition-fast:.2s cubic-bezier(.4, 0, .2, 1);--transition-normal:.3s cubic-bezier(.4, 0, .2, 1)}@media (prefers-color-scheme:light){:root{--bg-primary:#f8fafc;--bg-secondary:#fff;--bg-tertiary:#f1f5f9;--glass-bg:#fffc;--glass-border:#0000000f;--primary:#4f46e5;--primary-hover:#4338ca;--primary-glow:#4f46e51a;--text-primary:#0f172a;--text-secondary:#475569;--text-muted:#94a3b8;--border-color:#e2e8f0;--shadow-glow:0 4px 20px 0 #4f46e514}}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{font-family:var(--font-sans);background-color:var(--bg-primary);color:var(--text-primary);scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}body{min-height:100vh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background-color:var(--bg-primary);flex-direction:column;display:flex;overflow-x:hidden}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}todo-app{flex-direction:column;width:100%;min-height:100vh;display:flex;position:relative}todo-app:not(:defined){background:var(--bg-primary);min-height:100dvh}#app-main-content{box-sizing:border-box;width:100%;max-width:800px;margin:0 auto;padding:1.5rem 1.5rem 3rem}header{margin-bottom:2rem;padding-top:1rem}h1{letter-spacing:-.025em;background:linear-gradient(135deg, var(--text-primary) 30%, var(--primary));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:2.25rem;font-weight:700}.subtitle{color:var(--text-secondary);margin-top:.25rem;font-size:.875rem;font-weight:400}todo-list{flex:1;margin-bottom:5rem;display:block}ul.todo-list{flex-direction:column;gap:.75rem;list-style:none;display:flex}.empty-state{text-align:center;color:var(--text-muted);background:var(--bg-secondary);border:1px dashed var(--border-color);border-radius:var(--radius-md);flex-direction:column;justify-content:center;align-items:center;margin-top:1rem;padding:3rem 1.5rem;display:flex}.empty-state svg{width:48px;height:48px;stroke:var(--text-muted);opacity:.7;margin-bottom:1rem}todo-item{view-transition-name:var(--item-transition-name);display:block}.todo-item-card{background:var(--glass-bg);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);transition:transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);will-change:transform;align-items:center;padding:1rem 1.25rem;display:flex}.todo-item-card:hover{border-color:var(--border-color);box-shadow:var(--shadow-md);transform:translateY(-1px)}.todo-checkbox{border-radius:var(--radius-sm);border:2px solid var(--text-muted);cursor:pointer;width:24px;height:24px;transition:all var(--transition-fast);background:0 0;flex-shrink:0;justify-content:center;align-items:center;margin-right:1rem;display:inline-flex;position:relative}.todo-checkbox:hover{border-color:var(--primary)}.todo-checkbox.checked{background:var(--success);border-color:var(--success)}.todo-checkbox svg{stroke:#fff;stroke-width:3px;fill:none;opacity:0;width:14px;height:14px;transition:transform var(--transition-fast), opacity var(--transition-fast);transform:scale(.6)}.todo-checkbox.checked svg{opacity:1;transform:scale(1)}.todo-text-span{color:var(--text-primary);border-radius:var(--radius-sm);transition:background var(--transition-fast);overflow-wrap:anywhere;border:1px solid #0000;flex:1;padding:.25rem .5rem;font-size:1rem;font-weight:400;line-height:1.5}.todo-text-span:focus{border-color:var(--primary);background:var(--bg-tertiary);outline:none}.todo-item-card.completed .todo-text-span{color:var(--text-muted);text-decoration:line-through}.icon-btn{border-radius:var(--radius-sm);width:40px;height:40px;color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;display:flex}.icon-btn:hover{background:var(--danger-glow);color:var(--danger)}.icon-btn svg{stroke:currentColor;stroke-width:2px;fill:none;width:20px;height:20px}.fab-container{bottom:calc(2rem + env(safe-area-inset-bottom));z-index:100;position:fixed;right:2rem}.fab-btn{border-radius:var(--radius-full);background:var(--primary);color:#fff;width:56px;height:56px;box-shadow:0 10px 25px -5px #6366f166, var(--shadow-lg);cursor:pointer;transition:transform var(--transition-fast), background var(--transition-fast);will-change:transform;border:none;justify-content:center;align-items:center;display:flex}.fab-btn:hover{background:var(--primary-hover);transform:scale(1.05)translateY(-2px)}.fab-btn:active{transform:scale(.95)}.fab-btn svg{stroke:currentColor;stroke-width:2.5px;fill:none;width:24px;height:24px;transition:transform var(--transition-normal)}.fab-btn.open svg{transform:rotate(45deg)}dialog.todo-dialog{border:1px solid var(--glass-border);border-radius:var(--radius-lg);background:var(--bg-secondary);color:var(--text-primary);width:90%;max-width:400px;box-shadow:0 25px 50px -12px #00000080, var(--shadow-lg);z-index:1000;opacity:0;pointer-events:none;padding:1.5rem;transition:opacity .25s ease-out,transform .25s cubic-bezier(.34,1.56,.64,1);display:block;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)scale(.9)}dialog.todo-dialog[open]{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)scale(1)}dialog.todo-dialog::backdrop{-webkit-backdrop-filter:blur(8px);opacity:0;background:#0009;transition:opacity .25s ease-out}dialog.todo-dialog[open]::backdrop{opacity:1}.dialog-header{justify-content:space-between;align-items:center;margin-bottom:1.25rem;display:flex}.dialog-header h3{font-size:1.25rem;font-weight:600}.close-dialog-btn{color:var(--text-secondary);cursor:pointer;border-radius:var(--radius-sm);transition:background var(--transition-fast);background:0 0;border:none;justify-content:center;align-items:center;padding:.25rem;display:flex}.close-dialog-btn:hover{background:var(--bg-tertiary);color:var(--text-primary)}.close-dialog-btn svg{stroke:currentColor;stroke-width:2px;fill:none;width:20px;height:20px}form.todo-form{flex-direction:column;gap:1rem;display:flex}.input-group{flex-direction:column;display:flex}.todo-text-input{width:100%;font-size:1rem;font-family:var(--font-sans);background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);transition:border-color var(--transition-fast);padding:.875rem 1rem}.todo-text-input:focus{border-color:var(--primary);outline:none}.form-submit-btn{background:var(--primary);color:#fff;border-radius:var(--radius-md);font-size:1rem;font-weight:600;font-family:var(--font-sans);cursor:pointer;transition:background var(--transition-fast);border:none;padding:.875rem}.form-submit-btn:hover{background:var(--primary-hover)}.install-banner{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);animation:slideDown var(--transition-normal);justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding:.875rem 1.25rem;display:flex}.install-info{align-items:center;gap:.75rem;display:flex}.install-icon{background:var(--primary-glow);border-radius:var(--radius-sm);width:36px;height:36px;color:var(--primary);flex-shrink:0;justify-content:center;align-items:center;display:flex}.install-icon svg{stroke:currentColor;stroke-width:2px;fill:none;width:22px;height:22px}.install-text h4{font-size:.875rem;font-weight:600}.install-text p{color:var(--text-secondary);font-size:.75rem}.install-action-btn{background:var(--primary);color:#fff;border-radius:var(--radius-sm);font-size:.75rem;font-weight:600;font-family:var(--font-sans);cursor:pointer;transition:background var(--transition-fast);border:none;padding:.5rem 1rem}.install-action-btn:hover{background:var(--primary-hover)}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}