html,body,#root{min-height:100%}:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--page-bg:radial-gradient(circle at top left, #60a5fa2e, transparent 24%), radial-gradient(circle at bottom right, #38bdf81f, transparent 22%), #eef2ff;--card-bg:#fffffff2;--text:#0f1724;--muted:#475569;--muted-soft:#64748b;--border:#94a3b82e;--surface:#fff;--surface-strong:#f8fafc;--button-primary:linear-gradient(135deg, #2563eb 0%, #38bdf8 100%);--button-text:#fff;--button-muted:#eff6ff;--danger:#b91c1c;--panel-border:#94a3b826;--shadow:0 30px 80px #0f172a1f}[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--page-bg:radial-gradient(circle at top left, #3b82f61f, transparent 22%), radial-gradient(circle at bottom right, #38bdf81a, transparent 20%), #020617;--card-bg:#0f172af0;--text:#e2e8f0;--muted:#cbd5e1;--muted-soft:#94a3b8;--border:#94a3b826;--surface:#0f172af5;--surface-strong:#1e293bf2;--button-primary:linear-gradient(135deg, #0ea5e9 0%, #22d3ee 100%);--button-text:#0f1724;--button-muted:#1e293b;--danger:#fca5a5;--panel-border:#94a3b82e;--shadow:0 30px 80px #00000059}body{color:var(--text);background:var(--page-bg);margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial}*{box-sizing:border-box}.App{text-align:center}.App-logo{pointer-events:none;height:40vmin}.App-header{color:#fff;background-color:#282c34;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;font-size:calc(10px + 2vmin);display:flex}.App-link{color:#61dafb}.heart{color:red}.small{font-size:.75rem}.app-container{background:var(--card-bg);border:1px solid var(--panel-border);max-width:760px;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-radius:32px;margin:40px auto;padding:32px;position:relative}.todo-header{gap:8px;margin-bottom:24px;display:grid}.header-main{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px;display:flex}.todo-header h1{letter-spacing:-.04em;margin:0;font-size:2.3rem}.subtitle{max-width:560px;color:var(--muted);margin:0;font-size:1rem;line-height:1.7}.theme-toggle{background:var(--surface-strong);color:var(--text);cursor:pointer;border:1px solid #94a3b852;border-radius:999px;align-self:start;padding:12px 18px;font-weight:600;transition:background .15s,transform .15s}.theme-toggle:hover{transform:translateY(-1px)}.todo-form{flex-wrap:wrap;align-items:center;gap:12px;margin:20px 0;display:flex}.form-fields{flex:1;gap:12px;min-width:0;display:flex}.todo-input{border:1px solid var(--border);background:var(--surface-strong);border-radius:16px;outline:none;flex:1;min-width:0;padding:14px 16px;font-size:1rem;transition:border-color .15s,box-shadow .15s}.todo-input:focus{border-color:#60a5fa;box-shadow:0 0 0 4px #3b82f61f}[data-theme=dark] .todo-input:focus{border-color:#38bdf8;box-shadow:0 0 0 4px #38bdf82e}.todo-add{color:#fff;cursor:pointer;background:linear-gradient(135deg,#2563eb 0%,#38bdf8 100%);border:none;border-radius:16px;padding:14px 22px;font-size:.98rem;font-weight:700;transition:transform .15s,box-shadow .15s;box-shadow:0 12px 30px #2563eb2e}.todo-add:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 16px 36px #2563eb38}.todo-add:disabled{opacity:.6;cursor:not-allowed;box-shadow:none;transform:none}.form-error,.error-banner{color:#b91c1c;margin:8px 0 0;font-size:.95rem}.todo-list{gap:14px;margin:0;padding:0;list-style:none;display:grid}.todo-item{background:var(--surface);border:1px solid var(--panel-border);border-radius:24px;justify-content:space-between;align-items:center;gap:16px;padding:18px 20px;transition:transform .15s,border-color .15s;display:flex;box-shadow:0 10px 30px #0f172a0a}.todo-item:hover{border-color:#60a5fa59;transform:translateY(-1px)}.edit-item{flex-direction:column;align-items:stretch}.todo-left{flex-direction:column;min-width:0;display:flex}.todo-title{font-size:1.05rem;font-weight:700}.todo-meta{color:#64748b;margin-top:5px;font-size:.9rem}.todo-actions{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.btn-delete,.btn-edit,.btn-save,.btn-cancel{background:var(--surface-strong);color:var(--text);cursor:pointer;border:1px solid #0000;border-radius:14px;padding:10px 14px;transition:transform .12s,box-shadow .12s}.btn-delete:hover,.btn-edit:hover,.btn-save:hover,.btn-cancel:hover{transform:translateY(-1px);box-shadow:0 10px 20px #0f172a14}.btn-edit{background:var(--button-muted);border-color:#60a5fa73}.btn-save{background:var(--button-primary);color:var(--button-text);border-color:#0000}.btn-cancel{border-color:var(--border);background:var(--surface-strong)}.btn-delete{background:var(--surface-strong);color:var(--danger);border-color:#f8717166}.btn-delete:disabled,.btn-save:disabled,.btn-cancel:disabled,.btn-edit:disabled{opacity:.65;cursor:not-allowed;box-shadow:none;transform:none}.raw-pre{background:var(--surface-strong);width:100%;max-width:100%;max-height:220px;color:var(--text);border:1px solid var(--panel-border);border-radius:16px;padding:12px;overflow:auto}.loading,.empty{color:var(--muted);font-size:1rem}.error{color:var(--danger)}.empty-card{border:1px dashed var(--panel-border);background:var(--surface-strong);color:var(--muted);text-align:center;border-radius:28px;padding:32px}.empty-card p{margin:0;line-height:1.8}.edit-title,.edit-age{width:100%}.todo-age{max-width:160px}