:root{--bg: #f6f9fc;--card: #ffffff;--muted: #6b7280;--text: #0f172a;--brand: #10b981;--brand-2: #3b82f6;--danger: #ef4444;--shadow: 0 12px 28px rgba(2, 8, 20, .06);--radius: 14px}[data-theme=dark]{--bg: #0d1117;--card: #111827;--muted: #9aa4b2;--text: #5188f8;--brand: #22c55e;--brand-2: #06b6d4;--danger: #ef4444;--shadow: 0 10px 25px rgba(0, 0, 0, .25);--radius: 14px}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;color:var(--text);background:radial-gradient(1200px 600px at 10% -10%,rgba(16,185,129,.12),transparent 50%),radial-gradient(900px 500px at 110% 10%,rgba(59,130,246,.12),transparent 50%),var(--bg)}.app{min-height:100%;display:flex;flex-direction:column;align-items:center;padding:40px 16px}.container,.main{width:min(780px,100%);display:grid;gap:16px}.todo-create{display:grid;grid-template-columns:1fr auto;gap:10px;background:var(--card);border:1px solid rgba(15,23,42,.06);padding:14px;border-radius:var(--radius);box-shadow:var(--shadow)}.todo-create input[type=text]{height:44px;border-radius:12px;border:1px solid #e5e7eb;outline:none;background:#fff;color:var(--text);padding:0 14px;font-size:15px;transition:border-color .2s,box-shadow .2s,transform .06s}.todo-create input::placeholder{color:#9aa4b2}.todo-create input:focus{border-color:#3b82f6a6;box-shadow:0 0 0 4px #3b82f626;transform:translateY(-1px)}.todo-create button{height:44px;padding:0 18px;border:none;border-radius:12px;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--brand),#34d399 60%,#86efac);cursor:pointer;transition:transform .06s ease,filter .2s ease}.todo-create button:hover{filter:brightness(1.04)}.todo-create button:active{transform:translateY(1px) scale(.99)}.todo-list{display:grid;gap:10px}.todo-item{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:var(--card);border:1px solid rgba(15,23,42,.06);box-shadow:var(--shadow);transition:transform .12s ease,box-shadow .2s ease,border-color .2s ease}.todo-item:hover{transform:translateY(-2px);box-shadow:0 16px 36px #0208141a;border-color:#3b82f640}.todo-text{display:flex;align-items:center;gap:10px;line-height:1.35;word-break:break-word}.todo-item.done .todo-text{text-decoration:line-through;color:#9ca3af}.todo-input{height:38px;width:100%;border-radius:10px;border:1px solid #e5e7eb;padding:0 12px;background:#fff;color:var(--text)}.todo-input:focus{border-color:#10b98199;box-shadow:0 0 0 4px #10b98126;outline:none}.todo-create,.todo-item{background:var(--card)}.todo-icons{display:flex;align-items:center;gap:8px}.todo-icons .icon-btn{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:#f3f4f6;border:1px solid #e5e7eb;cursor:pointer;transition:transform .06s,background .2s,border-color .2s,box-shadow .2s}.todo-icons .icon-btn:hover{transform:translateY(-1px);background:#eef6ff;border-color:#3b82f659;box-shadow:0 6px 14px #02081414}.todo-icons .icon-btn:active{transform:translateY(1px)}.icon-delete{color:var(--danger)}.icon-edit{color:var(--brand-2)}.empty{text-align:center;padding:28px 18px;border-radius:var(--radius);border:1px dashed #e5e7eb;color:var(--muted);background:#fff}.panel{background:var(--card);border:1px solid rgba(15,23,42,.08);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}.panel-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.panel-header h2{margin:0;font-size:18px;letter-spacing:.2px}.badge{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:28px;padding:0 8px;font-weight:700;font-size:14px;border-radius:999px;color:#fff;background:linear-gradient(135deg,var(--brand-2),#60a5fa)}.topbar{display:flex;justify-content:flex-end;margin-bottom:12px}.theme-toggle{display:inline-flex;align-items:center;gap:6px;background:var(--card);color:var(--text);border:1px solid rgba(15,23,42,.12);border-radius:12px;padding:8px 12px;cursor:pointer;box-shadow:var(--shadow);transition:transform .06s,filter .2s}.theme-toggle:hover{filter:brightness(1.03)}.theme-toggle:active{transform:translateY(1px)}.todo-text{cursor:pointer}.todo-item.done .todo-text{text-decoration:line-through;color:#9ca3af;opacity:.8}@media (max-width:560px){.todo-create{grid-template-columns:1fr}}