:root{--bg:#f5f0e8;--surface:#faf7f2;--surface-alt:#ede8dd;--border:#ddd5c4;--text-primary:#1a1612;--text-secondary:#6b6254;--text-muted:#a89f92;--accent:#c0622a;--accent-hover:#a04f20;--accent-soft:#c0622a1a;--check-done:#7dab76;--shadow-sm:0 1px 3px #1a16120f;--shadow-md:0 4px 16px #1a161217;--radius:10px;--transition:.18s ease}[data-theme=dark]{--bg:#18150f;--surface:#231e16;--surface-alt:#2e2720;--border:#3c3328;--text-primary:#f0ead8;--text-secondary:#b0a48e;--text-muted:#6b6050;--accent:#e07a45;--accent-hover:#f0905a;--accent-soft:#e07a451f;--check-done:#8dc487;--shadow-sm:0 1px 3px #00000040;--shadow-md:0 4px 20px #00000059}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased}body{background:var(--bg);color:var(--text-primary);min-height:100dvh;transition:background var(--transition), color var(--transition);justify-content:center;align-items:flex-start;padding:48px 16px 80px;font-family:DM Sans,sans-serif;font-weight:400;display:flex}body:before{content:"";opacity:.025;pointer-events:none;z-index:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");position:fixed;inset:0}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.app-shell{z-index:1;flex-direction:column;gap:0;width:100%;max-width:560px;display:flex;position:relative}.app-header{justify-content:space-between;align-items:center;margin-bottom:32px;display:flex}.header-left{align-items:center;gap:10px;display:flex}.logo-mark{color:var(--accent);font-size:1.1rem;line-height:1}.app-title{letter-spacing:-.02em;color:var(--text-primary);font-family:Playfair Display,serif;font-size:clamp(1.6rem,4vw,2rem);font-weight:600}.icon-btn{border:1.5px solid var(--border);background:var(--surface);width:38px;height:38px;color:var(--text-secondary);cursor:pointer;transition:background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);border-radius:50%;justify-content:center;align-items:center;font-size:1rem;display:flex;position:relative;overflow:hidden}.icon-btn:hover{border-color:var(--accent);color:var(--accent);transform:rotate(18deg)}.icon-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.theme-icon{transition:opacity var(--transition), transform var(--transition);position:absolute}.theme-icon--dark{opacity:0;transform:translateY(4px)}.theme-icon--light{opacity:1}[data-theme=dark] .theme-icon--light{opacity:0;transform:translateY(-4px)}[data-theme=dark] .theme-icon--dark{opacity:1;transform:translateY(0)}.input-section{margin-bottom:12px}.input-wrapper{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);transition:border-color var(--transition), box-shadow var(--transition);align-items:center;padding:0 6px 0 16px;display:flex}.input-wrapper:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft), var(--shadow-sm)}.input-prefix{color:var(--accent);-webkit-user-select:none;user-select:none;margin-right:8px;font-size:1.4rem;font-weight:300;line-height:1}.task-input{color:var(--text-primary);background:0 0;border:none;outline:none;flex:1;padding:14px 0;font-family:DM Sans,sans-serif;font-size:.95rem;font-weight:400}.task-input::placeholder{color:var(--text-muted)}.add-btn{background:var(--accent);color:#fff;letter-spacing:.02em;cursor:pointer;transition:background var(--transition), transform var(--transition);border:none;border-radius:7px;flex-shrink:0;padding:8px 18px;font-family:DM Sans,sans-serif;font-size:.85rem;font-weight:500}.add-btn:hover{background:var(--accent-hover)}.add-btn:active{transform:scale(.96)}.add-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.filter-nav{background:var(--surface-alt);border:1px solid var(--border);border-radius:8px;gap:4px;margin-bottom:16px;padding:4px;display:flex}.filter-btn{color:var(--text-secondary);letter-spacing:.03em;cursor:pointer;transition:background var(--transition), color var(--transition);background:0 0;border:none;border-radius:6px;flex:1;padding:7px 12px;font-family:DM Sans,sans-serif;font-size:.83rem;font-weight:500}.filter-btn:hover{color:var(--text-primary)}.filter-btn.active{background:var(--surface);color:var(--accent);box-shadow:var(--shadow-sm)}.filter-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.task-list{flex-direction:column;gap:6px;list-style:none;display:flex}.task-item{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);cursor:default;transition:border-color var(--transition), box-shadow var(--transition), opacity var(--transition), transform var(--transition), background var(--transition);align-items:center;gap:12px;padding:13px 16px;animation:.22s both slide-in;display:flex}@keyframes slide-in{0%{opacity:0;transform:translateY(-6px)scale(.99)}to{opacity:1;transform:translateY(0)scale(1)}}.task-item:hover{border-color:var(--accent);box-shadow:var(--shadow-md)}.task-item.is-leaving{animation:.2s forwards slide-out}@keyframes slide-out{to{opacity:0;border-width:0;max-height:0;margin:0;padding:0;transform:scale(.97)translate(12px)}}.task-check{appearance:none;border:1.5px solid var(--border);cursor:pointer;width:20px;height:20px;transition:border-color var(--transition), background var(--transition);border-radius:50%;flex-shrink:0;position:relative}.task-check:hover{border-color:var(--check-done)}.task-check:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.task-check:checked{background:var(--check-done);border-color:var(--check-done)}.task-check:checked:after{content:"";border-bottom:2px solid #fff;border-left:2px solid #fff;width:9px;height:5px;position:absolute;top:50%;left:50%;transform:translate(-50%,-58%)rotate(-45deg)}.task-text{color:var(--text-primary);word-break:break-word;transition:color var(--transition);flex:1;font-size:.93rem;font-weight:400;line-height:1.4}.task-item.is-done .task-text{color:var(--text-muted);text-decoration:line-through;-webkit-text-decoration-color:var(--text-muted);text-decoration-color:var(--text-muted)}.delete-btn{width:28px;height:28px;color:var(--text-muted);cursor:pointer;opacity:0;transition:opacity var(--transition), color var(--transition), background var(--transition);background:0 0;border:none;border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;font-size:1rem;display:flex}.task-item:hover .delete-btn,.delete-btn:focus-visible{opacity:1}.delete-btn:hover{color:#e05252;background:#e0525214}.delete-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.empty-state{color:var(--text-muted);text-align:center;flex-direction:column;align-items:center;gap:10px;padding:56px 24px;animation:.3s fade-in;display:flex}@keyframes fade-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.empty-illustration{color:var(--text-muted);opacity:.6;margin-bottom:6px}.empty-title{color:var(--text-secondary);font-family:Playfair Display,serif;font-size:1.15rem;font-style:italic}.empty-sub{max-width:220px;font-size:.86rem;font-weight:300;line-height:1.5}.app-footer{border-top:1px solid var(--border);justify-content:space-between;align-items:center;margin-top:20px;padding:10px 4px;display:flex}.tasks-left{color:var(--text-muted);letter-spacing:.01em;font-size:.83rem;font-weight:300}.ghost-btn{color:var(--text-secondary);cursor:pointer;transition:color var(--transition), background var(--transition);transition:text-decoration-color var(--transition), color var(--transition);background:0 0;border:none;border-radius:5px;padding:4px 8px;font-family:DM Sans,sans-serif;font-size:.83rem;font-weight:400;-webkit-text-decoration:underline #0000;text-decoration:underline #0000}.ghost-btn:hover{color:#e05252;text-decoration-color:#e05252}.ghost-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@media (width<=400px){body{padding:28px 12px 60px}.app-title{font-size:1.45rem}.task-item{gap:10px;padding:11px 12px}.delete-btn{opacity:1}}