body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}:root{--bg:#f0f2f5;--surface:#fff;--border:#e5e7eb;--text:#111827;--text-muted:#6b7280;--primary:#4f46e5;--primary-hover:#4338ca;--primary-light:#ede9fe;--danger:#ef4444;--danger-hover:#dc2626;--success:#10b981;--priority-low:#10b981;--priority-medium:#f59e0b;--priority-high:#ef4444;--flag:#f97316;--shadow-sm:0 1px 2px #0000000f;--shadow:0 1px 3px #0000001a, 0 1px 2px #0000000f;--shadow-md:0 4px 6px #00000012, 0 2px 4px #0000000f;--radius:10px;--radius-sm:6px;--transition:.2s ease}body.dark{--bg:#0f172a;--surface:#1e293b;--border:#334155;--text:#f1f5f9;--text-muted:#94a3b8;--primary:#818cf8;--primary-hover:#6366f1;--primary-light:#1e1b4b;--danger:#f87171;--danger-hover:#ef4444;--flag:#fb923c;--shadow-sm:0 1px 2px #0000004d;--shadow:0 1px 3px #0006;--shadow-md:0 4px 6px #0006}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);min-height:100vh;transition:background var(--transition), color var(--transition);-webkit-font-smoothing:antialiased;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Inter,sans-serif;display:flex}.navbar{background:var(--primary);height:56px;box-shadow:var(--shadow-md);z-index:100;justify-content:space-between;align-items:center;padding:0 24px;display:flex;position:sticky;top:0}.navbar-brand{color:#fff;letter-spacing:.3px;align-items:center;gap:8px;font-size:1.2rem;font-weight:700;display:flex}.brand-check{background:#fff3;border-radius:8px;justify-content:center;align-items:center;width:28px;height:28px;font-size:.9rem;font-weight:800;display:inline-flex}.dark-toggle{color:#fff;cursor:pointer;width:36px;height:36px;transition:background var(--transition);background:#ffffff26;border:none;border-radius:50%;justify-content:center;align-items:center;font-size:1rem;display:flex}.dark-toggle:hover{background:#ffffff47}.todo-container{flex:1;width:100%;max-width:600px;margin:32px auto;padding:0 16px 48px}.todo-input-form{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-md);margin-bottom:20px;overflow:hidden}.todo-input-row{display:flex}.todo-input{color:var(--text);background:0 0;border:none;outline:none;flex:1;padding:14px 16px;font-size:.975rem}.todo-input::placeholder{color:var(--text-muted)}.todo-add-btn{background:var(--primary);color:#fff;cursor:pointer;transition:background var(--transition), opacity var(--transition);white-space:nowrap;border:none;padding:0 22px;font-size:.9rem;font-weight:600}.todo-add-btn:hover:not(:disabled){background:var(--primary-hover)}.todo-add-btn:disabled{opacity:.5;cursor:not-allowed}.todo-input-extras{border-top:1px solid var(--border);flex-direction:column;gap:10px;padding:10px 16px 14px;display:flex}.extras-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-right:4px;font-size:.75rem;font-weight:600}.priority-chip{border:1.5px solid var(--border);text-transform:capitalize;cursor:pointer;color:var(--text-muted);transition:all var(--transition);background:0 0;border-radius:20px;padding:4px 12px;font-size:.78rem;font-weight:600}.priority-chip.priority-low.selected{border-color:var(--priority-low);color:var(--priority-low);background:color-mix(in srgb, var(--priority-low) 12%, transparent)}.priority-chip.priority-medium.selected{border-color:var(--priority-medium);color:var(--priority-medium);background:color-mix(in srgb, var(--priority-medium) 12%, transparent)}.priority-chip.priority-high.selected{border-color:var(--priority-high);color:var(--priority-high);background:color-mix(in srgb, var(--priority-high) 12%, transparent)}.priority-chip:hover:not(.selected){border-color:var(--text-muted);color:var(--text)}.flag-chip{border:1.5px solid var(--border);cursor:pointer;color:var(--text-muted);transition:all var(--transition);background:0 0;border-radius:20px;padding:4px 12px;font-size:.78rem;font-weight:600}.flag-chip.selected{border-color:var(--flag);color:var(--flag);background:color-mix(in srgb, var(--flag) 12%, transparent)}.flag-chip:hover:not(.selected){border-color:var(--text-muted);color:var(--text)}.extras-hint{color:var(--text-muted);font-size:.75rem}.field-row{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.field-row .extras-label{flex-shrink:0;width:64px}.priority-chip.selected-plain{border-color:var(--primary);color:var(--primary);background:var(--primary-light)}.picker{flex-wrap:wrap;align-items:center;gap:4px;display:inline-flex}.picker-select{border:1.5px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);cursor:pointer;transition:border-color var(--transition);outline:none;padding:5px 8px;font-size:.83rem}.picker-select:focus{border-color:var(--primary)}.picker-sep{color:var(--text-muted);font-weight:600}.picker-weekday{color:var(--text-muted);margin:0 4px;font-size:.8rem}.todo-group+.todo-group{margin-top:18px}.group-title{text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);align-items:center;gap:8px;margin:0 2px 8px;font-size:.78rem;font-weight:700;display:flex}.group-title.overdue{color:var(--danger)}.group-count{background:var(--border);color:var(--text);border-radius:99px;padding:1px 7px;font-size:.7rem}.notice{background:var(--primary-light);color:var(--text);border:1.5px solid color-mix(in srgb, var(--primary) 35%, transparent);border-radius:var(--radius);justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;padding:10px 14px;font-size:.85rem;display:flex}.notice-warn{background:color-mix(in srgb, var(--danger) 10%, var(--surface));border-color:color-mix(in srgb, var(--danger) 40%, transparent)}.notice-btn{background:var(--primary);color:#fff;border-radius:var(--radius-sm);cursor:pointer;border:none;flex-shrink:0;padding:6px 14px;font-size:.82rem;font-weight:600}.notice-btn:hover{background:var(--primary-hover)}.reminders-panel{background:var(--surface);border:1.5px solid var(--priority-medium);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:16px;padding:12px 14px}.reminders-title{margin-bottom:8px;font-size:.9rem;font-weight:700}.reminders-list{flex-direction:column;list-style:none;display:flex}.reminder-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;padding:8px 0;display:flex}.reminder-row+.reminder-row{border-top:1px solid var(--border)}.reminder-info{flex-direction:column;gap:2px;min-width:0;display:flex}.reminder-text{word-break:break-word;font-size:.92rem;font-weight:600}.reminder-due{color:var(--danger);font-size:.75rem;font-weight:500}.reminder-actions{flex-wrap:wrap;gap:6px;display:flex}.reminder-btn{border-radius:var(--radius-sm);border:1.5px solid var(--border);color:var(--text);cursor:pointer;transition:all var(--transition);background:0 0;padding:4px 10px;font-size:.78rem;font-weight:600}.reminder-btn:hover{border-color:var(--primary);color:var(--primary)}.reminder-btn.done{background:var(--primary);border-color:var(--primary);color:#fff}.reminder-btn.done:hover{background:var(--primary-hover)}.flag-mark{color:var(--flag)}.todo-stats{margin-bottom:16px}.stats-row{justify-content:space-between;align-items:baseline;margin-bottom:6px;font-size:.83rem;display:flex}.stats-main{color:var(--text-muted);font-weight:500}.stats-high-priority{color:var(--priority-high);margin-left:4px;font-weight:600}.stats-pct{color:var(--primary);font-size:.85rem;font-weight:700}.progress-bar{background:var(--border);border-radius:99px;height:6px;overflow:hidden}.progress-fill{background:linear-gradient(90deg, var(--primary), var(--success));border-radius:99px;height:100%;transition:width .4s}.todo-filters{flex-direction:column;gap:10px;margin-bottom:16px;display:flex}.search-wrapper{align-items:center;display:flex;position:relative}.search-icon{pointer-events:none;opacity:.6;font-size:.85rem;position:absolute;left:12px}.search-input{border:1.5px solid var(--border);border-radius:var(--radius);background:var(--surface);width:100%;color:var(--text);transition:border-color var(--transition), box-shadow var(--transition);outline:none;padding:10px 36px;font-size:.9rem}.search-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent)}.search-input::placeholder{color:var(--text-muted)}.search-input::-webkit-search-cancel-button{display:none}.search-clear{color:var(--text-muted);cursor:pointer;transition:color var(--transition);background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:4px;font-size:.75rem;line-height:1;display:flex;position:absolute;right:10px}.search-clear:hover{color:var(--text)}.filter-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;display:flex}.view-selects{flex-wrap:wrap;gap:8px;display:flex}.filter-tabs{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius);display:flex;overflow:hidden}.filter-tab{color:var(--text-muted);cursor:pointer;transition:background var(--transition), color var(--transition);background:0 0;border:none;padding:7px 16px;font-size:.85rem;font-weight:500}.filter-tab:not(:last-child){border-right:1.5px solid var(--border)}.filter-tab.active{background:var(--primary);color:#fff}.filter-tab:hover:not(.active){background:var(--primary-light);color:var(--primary)}.sort-select{border:1.5px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);cursor:pointer;transition:border-color var(--transition);outline:none;padding:7px 10px;font-size:.85rem}.sort-select:focus{border-color:var(--primary)}.filter-actions{justify-content:flex-end;display:flex}.clear-completed-btn{color:var(--text-muted);cursor:pointer;transition:color var(--transition);text-underline-offset:2px;background:0 0;border:none;padding:4px 2px;font-size:.82rem;text-decoration:underline}.clear-completed-btn:hover{color:var(--danger)}.todo-list{flex-direction:column;gap:8px;list-style:none;display:flex}.todo-item{background:var(--surface);border-radius:var(--radius);border:1.5px solid var(--border);box-shadow:var(--shadow-sm);transition:opacity var(--transition), border-color var(--transition), box-shadow var(--transition);align-items:center;gap:10px;padding:13px 14px;animation:.18s slideIn;display:flex}.todo-item:hover{box-shadow:var(--shadow)}.todo-item.completed{opacity:.55}.todo-item.overdue{border-color:var(--danger)}@keyframes slideIn{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.priority-indicator{border-radius:99px;flex-shrink:0;width:4px;height:36px}.todo-checkbox{cursor:pointer;width:18px;height:18px;accent-color:var(--primary);flex-shrink:0}.todo-content{flex-direction:column;flex:1;gap:3px;min-width:0;display:flex}.todo-text{color:var(--text);word-break:break-word;cursor:default;font-size:.95rem;line-height:1.4}.todo-item.completed .todo-text{color:var(--text-muted);text-decoration:line-through}.todo-edit-input{border:none;border-bottom:2px solid var(--primary);width:100%;color:var(--text);background:0 0;outline:none;padding:2px 0;font-size:.95rem}.todo-meta{flex-wrap:wrap;align-items:center;gap:4px 8px;display:flex}.due-badge{color:var(--text-muted);text-align:left;cursor:pointer;background:0 0;border:none;padding:0;font-family:inherit;font-size:.75rem;font-weight:500}.due-badge:hover{text-decoration:underline}.todo-item.completed .due-badge{cursor:default;text-decoration:none}.tag{text-transform:capitalize;border:1px solid;border-radius:20px;padding:1px 8px;font-size:.68rem;font-weight:600}.tag-low{color:var(--priority-low)}.tag-medium{color:var(--priority-medium)}.tag-high{color:var(--priority-high)}.tag-flag{color:var(--flag);text-transform:none}.due-badge.overdue{color:var(--danger);font-weight:600}.due-badge.today{color:var(--priority-medium);font-weight:600}.todo-delete-btn{color:var(--border);cursor:pointer;border-radius:var(--radius-sm);transition:color var(--transition), background var(--transition);background:0 0;border:none;flex-shrink:0;padding:4px 6px;font-size:.8rem;line-height:1}.todo-delete-btn:hover{color:var(--danger);background:color-mix(in srgb, var(--danger) 10%, transparent)}.created-badge{color:var(--text-muted);opacity:.8;font-size:.72rem}.todo-item.editing{border-color:var(--primary);display:block}.task-editor{flex-direction:column;gap:4px;display:flex}.task-editor .todo-input-extras{border-top:none;padding:10px 0 4px}.task-editor-actions{gap:6px;display:flex}.clear-due-btn{color:var(--text-muted);cursor:pointer;border-radius:var(--radius-sm);background:0 0;border:none;padding:4px;font-size:.75rem}.clear-due-btn:hover{color:var(--danger)}.todo-icon-btn{color:var(--text-muted);cursor:pointer;border-radius:var(--radius-sm);opacity:.5;transition:opacity var(--transition), color var(--transition), background var(--transition);background:0 0;border:none;flex-shrink:0;padding:4px 6px;font-size:.9rem;line-height:1}.todo-icon-btn:hover{opacity:1;background:var(--primary-light)}.flag-btn.flagged{color:var(--flag);opacity:1}.todo-empty{text-align:center;color:var(--text-muted);padding:48px 24px}.empty-icon{opacity:.6;margin-bottom:12px;font-size:2.4rem}.todo-empty p{font-size:.95rem}.footer{background:var(--surface);border-top:1px solid var(--border);color:var(--text-muted);text-align:center;padding:16px;font-size:.82rem}@media (width<=480px){.todo-container{margin:16px auto}.filter-row{flex-direction:column;align-items:stretch}.filter-tabs{justify-content:center}.filter-tab{flex:1}.view-selects{flex-direction:column}.sort-select,.field-row .extras-label{width:100%}.notice{flex-direction:column;align-items:stretch}}