:root{--bg:#0f172a;--bg-soft:#16213a;--panel:#fff;--text:#1e293b;--muted:#64748b;--border:#e2e8f0;--accent:#4f46e5;--accent-dark:#4338ca;--danger:#dc2626;--low:#0ea5e9;--medium:#f59e0b;--high:#ef4444;--radius:12px;color:var(--text);background:#f1f5f9;font-family:Inter,Segoe UI,system-ui,-apple-system,Helvetica Neue,Arial,sans-serif}*{box-sizing:border-box}body{background:linear-gradient(#eef2ff 0%,#f8fafc 260px 100%);min-height:100vh;margin:0}h1,h2{letter-spacing:-.01em;margin:0;font-weight:650}.app{max-width:860px;margin:0 auto;padding:24px 20px 64px}.topbar{justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px;display:flex}.brand{align-items:center;gap:10px;font-size:20px;display:flex}.brand.large{justify-content:center;font-size:28px}.brand-mark{background:var(--accent);color:#fff;border-radius:10px;justify-content:center;align-items:center;width:32px;height:32px;font-size:18px;font-weight:700;display:inline-flex}.center .brand-mark,.brand.large .brand-mark{border-radius:12px;width:40px;height:40px;font-size:22px}.user-area{align-items:center;gap:12px;display:flex}.username{color:var(--muted);font-weight:600}.content{flex-direction:column;gap:20px;display:flex}.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:0 1px 2px #0f172a0a,0 12px 32px -24px #0f172a59}.panel-head{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.counter{color:var(--accent);background:#eef2ff;border-radius:999px;padding:4px 10px;font-size:13px;font-weight:600}.button{border:1px solid var(--border);color:var(--text);cursor:pointer;background:#fff;border-radius:9px;padding:9px 14px;font-family:inherit;font-size:14px;font-weight:600;transition:background .15s,border-color .15s,transform 50ms}.button:hover:not(:disabled){background:#f8fafc}.button:active:not(:disabled){transform:translateY(1px)}.button:disabled{opacity:.6;cursor:not-allowed}.button.primary{background:var(--accent);border-color:var(--accent);color:#fff}.button.primary:hover:not(:disabled){background:var(--accent-dark);border-color:var(--accent-dark)}.button.ghost{background:0 0}.button.danger{background:var(--danger);border-color:var(--danger);color:#fff}.button.small{padding:6px 10px;font-size:13px}.button.wide{width:100%;padding:11px}.danger-text{color:var(--danger)}.add-toggle{width:100%}.toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;display:flex}.tabs{background:#f1f5f9;border-radius:10px;gap:2px;padding:3px;display:inline-flex}.tab{color:var(--muted);cursor:pointer;background:0 0;border:none;border-radius:8px;padding:7px 14px;font-family:inherit;font-size:14px;font-weight:600}.tab.active{color:var(--accent);background:#fff;box-shadow:0 1px 3px #0f172a1f}.select-wrap{color:var(--muted);align-items:center;gap:8px;font-size:13px;font-weight:600;display:flex}select,input[type=text],input[type=password],input[type=date],textarea{border:1px solid var(--border);color:var(--text);background:#fff;border-radius:9px;width:100%;padding:9px 11px;font-family:inherit;font-size:14px}textarea{resize:vertical}input:focus,select:focus,textarea:focus{outline-offset:1px;border-color:var(--accent);outline:2px solid #4f46e559}[aria-invalid=true]{border-color:var(--danger)}.todo-form{flex-direction:column;gap:14px;display:flex}.field{color:var(--muted);flex-direction:column;flex:1;gap:6px;font-size:13px;font-weight:600;display:flex}.field.compact{gap:4px}.field-row{flex-wrap:wrap;gap:14px;display:flex}.field-error{color:var(--danger);font-size:12px;font-weight:500}.form-actions{gap:10px;display:flex}.alert{border-radius:9px;padding:10px 12px;font-size:13px;font-weight:500}.alert.error{color:#991b1b;background:#fef2f2;border:1px solid #fecaca}.alert.info{color:#1d4ed8;background:#eff6ff;border:1px solid #bfdbfe}.todo-list{flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.todo{border-top:1px solid var(--border);padding:14px 0}.todo:first-child{border-top:none}.todo-main{align-items:flex-start;gap:12px;display:flex}.todo-check{width:20px;height:20px;accent-color:var(--accent);cursor:pointer;flex:none;margin-top:3px}.todo-body{flex:1;min-width:0}.todo-title-row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.todo-title{word-break:break-word;font-size:15px;font-weight:600}.todo.done .todo-title{color:var(--muted);text-decoration:line-through}.todo-description{color:var(--muted);white-space:pre-wrap;word-break:break-word;margin:4px 0 0;font-size:14px}.todo-meta{color:var(--muted);align-items:center;gap:12px;margin-top:6px;font-size:12.5px;display:flex}.muted{color:var(--muted)}.due.overdue{color:var(--danger);background:#fef2f2;border-radius:6px;padding:2px 6px;font-weight:700}.badge{text-transform:uppercase;letter-spacing:.04em;color:#fff;border-radius:999px;padding:2px 8px;font-size:11px;font-weight:700}.priority-low{background:var(--low)}.priority-medium{background:var(--medium)}.priority-high{background:var(--high)}.todo-actions{flex:none;align-items:center;gap:6px;display:flex}.confirm{color:var(--danger);align-items:center;gap:6px;font-size:12px;font-weight:600;display:inline-flex}.inline-editor{flex-direction:column;gap:10px;padding:4px 0 2px;display:flex}.empty{text-align:center;color:var(--muted);margin:0;padding:32px 0;font-size:14px}.list-footer{border-top:1px solid var(--border);color:var(--muted);justify-content:space-between;align-items:center;gap:12px;margin-top:16px;padding-top:14px;font-size:13px;display:flex}.auth-page{justify-content:center;align-items:center;min-height:100vh;padding:24px;display:flex}.auth-card{border:1px solid var(--border);background:#fff;border-radius:16px;width:100%;max-width:400px;padding:28px;box-shadow:0 24px 60px -40px #0f172a99}.tagline{text-align:center;color:var(--muted);margin:8px 0 20px;font-size:13.5px}.auth-card .tabs{width:100%;margin-bottom:18px}.auth-card .tab{flex:1}@media (width<=560px){.todo-main{flex-wrap:wrap}.todo-actions{margin-left:32px}.toolbar{align-items:stretch}}
