:root{--bg: #0f1114;--card: #14171c;--ink: #f3f4f6;--muted: #9aa3b2;--accent: #f97316;--accent-2: #fdba74;--danger: #f87171;--border: #23262c;--shadow: 0 20px 40px rgba(0, 0, 0, .4);font-family:Space Grotesk,IBM Plex Sans,system-ui,sans-serif;color:var(--ink);background:var(--bg)}*{box-sizing:border-box}body{margin:0}main{min-height:100vh;display:grid;place-items:center;padding:40px 16px;background:radial-gradient(circle at top left,#1a1f27 0%,transparent 55%),radial-gradient(circle at bottom right,#1c130c 0%,transparent 60%),var(--bg)}.card{width:min(560px,100%);background:var(--card);border:1px solid var(--border);border-radius:18px;padding:28px;box-shadow:var(--shadow)}h1{margin:0 0 8px;font-size:26px;letter-spacing:-.02em}p.sub{margin:0 0 20px;color:var(--muted);display:inline-flex;align-items:center;gap:8px}label{font-size:14px;color:var(--muted)}input[type=text],input[type=password]{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:10px;font-size:15px;margin-top:6px;background:#0f1115;color:var(--ink)}button{border:none;border-radius:10px;padding:10px 14px;font-size:14px;cursor:pointer;background:var(--accent);color:#fff;display:inline-flex;align-items:center;gap:8px}button.secondary{background:transparent;color:var(--muted);border:1px solid var(--border)}button.danger{background:var(--danger)}button.danger.icon-button{background:linear-gradient(135deg,#ef4444,#f97316);color:#0b0d10;box-shadow:0 10px 20px #ef444459}.row{display:flex;gap:10px;align-items:center}.row.space{justify-content:space-between}.avatar{width:32px;height:32px;border-radius:999px;object-fit:cover;border:1px solid var(--border);box-shadow:0 3px 8px #0000004d}.form{display:grid;gap:12px}.icon{width:16px;height:16px}.icon-button{padding:8px 12px}small.error{color:var(--danger)}small.muted{color:var(--muted)}.auth-input{height:46px;border-radius:999px;padding:12px 16px;border:1px solid #2a2f36;background:linear-gradient(180deg,#0e1116,#0b0d11);box-shadow:inset 0 0 0 1px #ffffff08,0 6px 18px #00000059}.auth-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #f973162e,inset 0 0 0 1px #ffffff08}.auth-button{border-radius:999px;padding:12px 18px;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 10px 24px #f9731640;font-weight:600;justify-content:center;color:#0b0d10}.auth-button:hover{box-shadow:0 12px 28px #f9731673,0 0 24px #f9731659}.todo-list{margin-top:18px;display:grid;gap:10px}.todo-item{border:1px solid var(--border);border-radius:12px;padding:10px 12px;display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;background:#14161a;cursor:grab;position:relative}.todo-item:active{cursor:grabbing}.todo-item.drop-before:before,.todo-item.drop-after:before{content:"";position:absolute;left:12px;right:12px;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent)}.todo-item.drop-before:before{top:-6px}.todo-item.drop-after:before{bottom:-6px}.todo-item.done{opacity:.6;text-decoration:line-through}.loader{display:inline-flex;align-items:center;gap:10px;padding:6px 0}.spinner{width:16px;height:16px;border:2px solid rgba(243,244,246,.2);border-top-color:var(--accent);border-radius:999px;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width: 480px){.todo-item{grid-template-columns:auto 1fr}.todo-item button{grid-column:1 / -1}}