@import"https://fonts.googleapis.com/css2?family=Rubik:ital@0;1&display=swap";:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}body[data-theme=vibrant]{--color-background: #f0f2f5;--color-surface: #ffffff;--color-text-primary: #1f2937;--color-text-secondary: #6b7280;--color-accent: #3b82f6;--color-border: #e5e7eb;--shadow-color: rgba(0, 0, 0, .1);--font-family: "Rubik", sans-serif}body[data-theme=dark]{--color-background: #121212;--color-surface: #1e1e1e;--color-text-primary: #e5e7eb;--color-text-secondary: #9ca3af;--color-accent: #818cf8;--color-border: #374151;--shadow-color: rgba(0, 0, 0, .3);--font-family: "Rubik", sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-family);background-color:var(--color-background);color:var(--color-text-primary);display:flex;justify-content:center;padding-top:50px;transition:background-color .3s ease,color .3s ease;position:relative}.app{width:100%;max-width:500px;padding:2rem;background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:12px;box-shadow:0 8px 32px 0 var(--shadow-color);transition:background-color .3s ease,border-color .3s ease;font-family:var(--font-family)}h1{text-align:center;margin-bottom:2rem;font-weight:700;color:var(--color-text-primary);font-size:2.5rem}form{display:flex;gap:10px;margin-bottom:2rem}button,input,select{font-family:var(--font-family);font-size:1rem}input[type=text]{flex-grow:1;padding:.8rem;border:1px solid var(--color-border);background-color:var(--color-background);border-radius:5px;color:var(--color-text-primary)}button{padding:.8rem 1.2rem;border:none;background-color:var(--color-accent);color:#fff;font-weight:500;border-radius:5px;cursor:pointer;transition:background-color .2s ease}button:hover{filter:brightness(1.1)}.todo-list{list-style:none;padding:0}.todo-item{display:flex;align-items:center;gap:15px;padding:1rem;background-color:var(--color-background);border:1px solid var(--color-border);border-radius:5px;margin-bottom:10px;transition:background-color .2s ease}.todo-item.completed span{text-decoration:line-through;color:var(--color-text-secondary)}.todo-item span{flex-grow:1;color:var(--color-text-primary)}.todo-item input[type=checkbox]{width:20px;height:20px;accent-color:var(--color-accent)}.delete-btn{background-color:transparent;border:none;color:var(--color-text-secondary);cursor:pointer;padding:5px;line-height:1}.delete-btn svg{width:20px;height:20px;stroke:var(--color-text-secondary);transition:stroke .2s ease}.delete-btn:hover{stroke:#ff4d4d}.theme-selector{display:flex;justify-content:flex-end;align-items:center;margin-bottom:1rem}.theme-selector select{padding:.3rem;border-radius:5px;border:1px solid var(--color-border);background-color:var(--color-surface);color:var(--color-text-primary)}body:before{content:"";position:fixed;top:0;left:0;width:100vw;height:100vh;opacity:.3;z-index:-1;pointer-events:none}.theme-switch-wrapper{display:flex;align-items:center;gap:10px}.theme-switch{position:relative;display:inline-block;width:50px;height:26px}.theme-switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:26px}.slider:before{position:absolute;content:"";height:18px;width:18px;left:4px;bottom:4px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:var(--color-accent)}input:checked+.slider:before{transform:translate(24px)}.theme-switch-wrapper svg{width:20px;height:20px;fill:var(--color-text-secondary)}.empty-state{text-align:center;padding:3rem 1rem;color:var(--color-text-secondary);display:flex;flex-direction:column;align-items:center;gap:.5rem}.empty-state svg{width:50px;height:50px;stroke:var(--color-text-secondary);margin-bottom:1rem}.empty-state p{font-size:1.1rem;font-weight:500;color:var(--color-text-primary)}.empty-state span{font-size:.9rem}.todo-filter{display:flex;justify-content:center;gap:10px;margin-bottom:2rem;border:1px solid var(--color-border);border-radius:5px;padding:5px;background-color:var(--color-background)}.todo-filter button{background-color:transparent;color:var(--color-text-secondary);border:none;padding:.5rem 1rem;cursor:pointer;border-radius:5px;font-weight:500}.todo-filter button.active{background-color:var(--color-accent);color:#fff}.item-buttons{display:flex;gap:5px}.edit-btn{background:none;border:none;padding:5px;cursor:pointer;line-height:1}.edit-btn svg{width:20px;height:20px;stroke:var(--color-text-secondary);transition:stroke .2s ease}.edit-btn:hover svg{stroke:var(--color-accent)}.edit-form{flex-grow:1}.edit-form input{width:100%;padding:0;background:transparent;border:none;border-bottom:2px solid var(--color-accent);color:var(--color-text-primary);outline:none}