@import "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap";.todo-app{background:var(--bg);min-height:100vh;display:flex}.todo__left{flex-shrink:0}.todo__main{flex-direction:column;flex:1;min-width:0;display:flex}.todo__right{flex-direction:column;align-self:flex-start;width:100%;min-width:0;max-width:720px;margin:0;padding:28px 40px 64px;display:flex}.mobile-header{background:var(--surface);border-bottom:1px solid var(--border-soft);z-index:20;align-items:center;gap:12px;padding:12px 16px;display:none;position:sticky;top:0}.mobile-brand-logo{object-fit:cover;border-radius:6px;flex-shrink:0;width:22px;height:22px}.mobile-brand{letter-spacing:-.02em;color:var(--text);font-size:16px;font-weight:700}.menu-toggle{border-radius:var(--radius-sm);width:36px;height:36px;color:var(--text);background:0 0;border:none;justify-content:center;align-items:center;transition:background .15s;display:inline-flex}.menu-toggle:hover{background:var(--sidebar-hover)}.sidebar-backdrop{z-index:40;background:#20202059;border:none;padding:0;display:none;position:fixed;inset:0}.sidebar{width:var(--sidebar-width);background:var(--sidebar);border-right:1px solid var(--border-soft);flex-direction:column;height:100vh;padding:20px 12px;display:flex;position:sticky;top:0;overflow-y:auto}.sidebar__brand{align-items:center;gap:10px;padding:8px 12px 24px;display:flex}.sidebar__logo{object-fit:cover;border-radius:8px;flex-shrink:0;width:32px;height:32px;box-shadow:0 0 0 1px #1a9bff33}.sidebar__name{letter-spacing:-.03em;color:var(--text);font-size:17px;font-weight:700}.sidebar nav{flex-direction:column;gap:2px;display:flex}.sidebar-link{border-radius:var(--radius-sm);width:100%;color:var(--text);text-align:left;background:0 0;border:none;align-items:center;gap:10px;padding:8px 12px;font-size:14px;font-weight:500;transition:background .12s,color .12s;display:flex}.sidebar-link:hover{background:var(--sidebar-hover)}.sidebar-link.is-active{background:var(--sidebar-active);font-weight:600}.sidebar-link__icon{flex-shrink:0;justify-content:center;align-items:center;width:22px;display:inline-flex}.sidebar-link[data-view=all] .sidebar-link__icon{color:var(--inbox)}.sidebar-link[data-view=today] .sidebar-link__icon{color:var(--today)}.sidebar-link[data-view=upcoming] .sidebar-link__icon{color:var(--upcoming)}.sidebar-link[data-view=completed] .sidebar-link__icon{color:var(--done)}.sidebar-link__label{flex:1}.sidebar-link__count{color:var(--text-muted);text-align:right;min-width:18px;font-size:12px;font-weight:500}.page-header{margin-bottom:20px}.page-title{letter-spacing:-.03em;color:var(--text);text-transform:capitalize;font-size:28px;font-weight:700}.page-meta{color:var(--text-muted);margin-top:4px;font-size:13px;font-weight:500}.todo-toolbar{flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:20px;display:flex}.todo-search-wrap{flex:1;min-width:180px;position:relative}.todo-search-wrap .search-icon{color:var(--text-muted);pointer-events:none;position:absolute;top:50%;left:12px;transform:translateY(-50%)}.todo-search{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);width:100%;height:38px;color:var(--text);outline:none;padding:0 12px 0 38px;font-size:14px;transition:border-color .15s,box-shadow .15s}.todo-search::placeholder{color:var(--text-muted)}.todo-search:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.todo-filters{background:var(--sidebar);border-radius:var(--radius);align-items:center;gap:4px;padding:3px;display:flex}.todo-filter-btn{border-radius:var(--radius-sm);color:var(--text-soft);background:0 0;border:none;padding:6px 12px;font-size:13px;font-weight:500;transition:background .12s,color .12s}.todo-filter-btn:hover{color:var(--text)}.todo-filter-btn.is-active{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm)}.todo-add{border-radius:var(--radius-sm);width:100%;color:var(--text-muted);text-align:left;background:0 0;border:none;align-items:center;gap:10px;margin-bottom:8px;padding:10px 8px;font-size:14px;font-weight:500;transition:color .15s,background .15s;display:flex}.todo-add:hover{color:var(--accent);background:0 0}.todo-add__icon{width:22px;height:22px;color:var(--accent);border-radius:50%;justify-content:center;align-items:center;transition:background .15s,color .15s;display:inline-flex}.todo-add:hover .todo-add__icon{background:var(--accent);color:#fff}.todo-form{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);flex-direction:column;gap:10px;margin:4px 0 12px;padding:14px;display:flex}.todo-form-input{border:none;border-bottom:1px solid var(--border-soft);width:100%;color:var(--text);background:0 0;outline:none;padding:8px 4px;font-size:15px;font-weight:500}.todo-form-input:focus{border-bottom-color:var(--accent)}.todo-form-due{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.todo-form-date{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);width:fit-content;color:var(--text-soft);outline:none;padding:6px 10px;font-size:13px}.todo-form-date:focus{border-color:var(--accent)}.priority-dropdown{position:relative}.priority-dropdown__trigger{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);height:32px;color:var(--text-soft);align-items:center;gap:6px;padding:0 10px;font-size:13px;font-weight:500;transition:border-color .15s,background .15s,color .15s;display:inline-flex}.priority-dropdown__trigger:hover{color:var(--text);border-color:#cfcfcf}.priority-dropdown.is-open .priority-dropdown__trigger{border-color:var(--accent);background:var(--surface);color:var(--text);box-shadow:0 0 0 3px var(--accent-soft)}.priority-dropdown__chevron{color:var(--text-muted);margin-left:2px;transition:transform .15s}.priority-dropdown.is-open .priority-dropdown__chevron{transform:rotate(180deg)}.priority-dropdown__menu{z-index:30;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);min-width:168px;margin:0;padding:4px;list-style:none;position:absolute;top:calc(100% + 6px);left:0;box-shadow:0 8px 24px #0000001a}.priority-dropdown__option{border-radius:var(--radius-sm);width:100%;color:var(--text);text-align:left;background:0 0;border:none;align-items:center;gap:8px;padding:8px 10px;font-size:13px;font-weight:500;transition:background .12s;display:flex}.priority-dropdown__option:hover{background:var(--sidebar-hover)}.priority-dropdown__option.is-selected{background:var(--accent-soft)}.todo-form-actions{justify-content:flex-end;gap:8px;padding-top:4px;display:flex}.todo-btn{border-radius:var(--radius-sm);border:none;padding:7px 14px;font-size:13px;font-weight:600;transition:background .12s,opacity .12s}.todo-btn-cancel{color:var(--text-soft);background:0 0}.todo-btn-cancel:hover{background:var(--sidebar-hover);color:var(--text)}.todo-btn-primary{background:var(--accent);color:#fff}.todo-btn-primary:hover{background:var(--accent-hover)}.todo-list{flex-direction:column;display:flex}.todo-item{border-bottom:1px solid var(--border-soft);background:0 0;border-radius:0;align-items:flex-start;gap:12px;padding:10px 8px;transition:background .12s;display:flex}.todo-item:hover{background:#00000005}.todo-item:last-child{border-bottom:none}.todo-checkbox{appearance:none;cursor:pointer;background:0 0;border:1.5px solid #b0b0b0;border-radius:50%;flex-shrink:0;place-items:center;width:20px;height:20px;margin-top:2px;transition:border-color .15s,background .15s;display:grid}.todo-checkbox:hover{border-color:var(--accent);background:var(--accent-soft)}.todo-checkbox:checked{border-color:var(--accent);background:var(--accent)}.todo-checkbox:checked:after{content:"";border:1.5px solid #fff;border-width:0 1.5px 1.5px 0;width:5px;height:9px;transform:rotate(45deg)translate(-1px,-1px)}.todo-item__body{flex:1;min-width:0;padding-top:1px}.todo-title{color:var(--text);word-break:break-word;font-size:14.5px;font-weight:500;line-height:1.4}.todo-title.completed{color:var(--text-muted);font-weight:400;text-decoration:line-through}.todo-due{color:var(--today);align-items:center;gap:4px;margin-top:4px;font-size:12px;font-weight:500;display:inline-flex}.todo-due.is-overdue{color:var(--accent)}.todo-due.is-upcoming{color:var(--upcoming)}.todo-actions{opacity:0;pointer-events:none;flex-shrink:0;align-items:center;gap:2px;margin-top:0;transition:opacity .15s;display:flex}.todo-item:hover .todo-actions,.todo-item:focus-within .todo-actions{opacity:1;pointer-events:auto}.todo-action-btn{border-radius:var(--radius-sm);width:32px;height:32px;color:var(--text-muted);background:0 0;border:none;justify-content:center;align-items:center;transition:background .12s,color .12s;display:inline-flex}.todo-action-btn:hover{background:var(--sidebar-hover);color:var(--text)}.todo-action-btn.is-danger:hover{background:var(--danger-soft);color:var(--danger)}.todo-empty{text-align:center;color:var(--text-muted);padding:48px 16px}.todo-empty__title{color:var(--text-soft);margin-bottom:4px;font-size:15px;font-weight:600}.todo-empty__text{font-size:13px}@media (width<=860px){.todo-app{flex-direction:column}.mobile-header{display:flex}.sidebar-backdrop.is-open{display:block}.todo__left{z-index:50;transition:transform .22s;position:fixed;inset:0 auto 0 0;transform:translate(-100%)}.todo__left.is-open{transform:translate(0)}.sidebar{height:100%;box-shadow:4px 0 24px #00000014}.todo__right{max-width:none;padding:20px 16px 48px}.page-title{font-size:24px}.todo-toolbar{flex-direction:column;align-items:stretch}.todo-filters{justify-content:stretch;width:100%}.todo-filter-btn{text-align:center;flex:1}.todo-actions{opacity:1;pointer-events:auto}}@media (width<=480px){.todo__right{padding:16px 12px 40px}.page-title{font-size:22px}.todo-item{padding:12px 4px}}@media (hover:none){.todo-actions{opacity:1;pointer-events:auto}}*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--font:"Plus Jakarta Sans", sans-serif;--bg:#faf9f8;--surface:#fff;--sidebar:#f5f4f2;--sidebar-hover:#ebeae8;--sidebar-active:#e8e6e3;--text:#202020;--text-muted:gray;--text-soft:#666;--border:#e5e5e5;--border-soft:#f0efed;--accent:#1a9bff;--accent-hover:#0f7fd9;--accent-soft:#1a9bff1f;--inbox:#246fe0;--today:#058527;--upcoming:#0f6cbd;--done:gray;--danger:#dc4c3e;--danger-soft:#dc4c3e14;--success:#058527;--shadow-sm:0 1px 2px #0000000a;--radius:8px;--radius-sm:5px;--sidebar-width:280px}html,body,#root{min-height:100%}body{font-family:var(--font);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.45}button,input{font-family:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}