:root {
  color-scheme: light;
  --bg:#f7f5f2;
  --surface:#ffffff;
  --surface-2:#fbfaf8;
  --text:rgba(22,22,20,.95);
  --muted:#6f6a63;
  --faint:#a9a39b;
  --accent:#2563eb;
  --accent-2:#eff6ff;
  --danger:#dc2626;
  --danger-2:#fef2f2;
  --success:#16a34a;
  --border:rgba(20,20,18,.11);
  --shadow:0 16px 40px rgba(0,0,0,.07), 0 2px 8px rgba(0,0,0,.04);
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg:#13110f;
    --surface:#1d1a17;
    --surface-2:#25211d;
    --text:#f6f1ea;
    --muted:#b8afa5;
    --faint:#867d73;
    --accent:#60a5fa;
    --accent-2:rgba(96,165,250,.14);
    --danger:#f87171;
    --danger-2:rgba(248,113,113,.12);
    --success:#4ade80;
    --border:rgba(255,255,255,.12);
    --shadow:0 18px 46px rgba(0,0,0,.32), 0 2px 8px rgba(0,0,0,.24);
  }
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0;
  min-height:100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background:
    radial-gradient(circle at top left, rgba(37,99,235,.10), transparent 34rem),
    linear-gradient(180deg, var(--bg), color-mix(in srgb, var(--bg), var(--surface) 26%));
  color:var(--text);
}
.topbar {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:1rem;
  padding:1.25rem 1rem .75rem;
  max-width:760px;
  margin:0 auto;
}
h1 {
  margin:0;
  font-size:clamp(2rem, 7vw, 3.35rem);
  line-height:.96;
  letter-spacing:-.055em;
  font-weight:760;
}
h2 { margin:0; font-size:1.35rem; letter-spacing:-.025em; }
.topbar p { margin:.45rem 0 0; color:var(--muted); font-size:.98rem; }
.container { display:grid; gap:1rem; padding:0 1rem 2rem; max-width:760px; margin:0 auto; }
.card, .login-card {
  background:color-mix(in srgb, var(--surface), transparent 3%);
  border:1px solid var(--border);
  border-radius:24px;
  padding:1rem;
  box-shadow:var(--shadow);
  backdrop-filter: blur(10px);
}
.section-title { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; }
.section-title span {
  color:var(--accent);
  background:var(--accent-2);
  border:1px solid color-mix(in srgb, var(--accent), transparent 76%);
  border-radius:999px;
  padding:.25rem .55rem;
  font-size:.78rem;
  font-weight:700;
}
.add-form {
  display:grid;
  grid-template-columns:1fr auto;
  gap:.6rem;
  margin-bottom:1rem;
  padding:.6rem;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:18px;
}
.task-form { grid-template-columns:1fr 108px 142px auto; }
input:not([type="checkbox"]), select, button {
  font:inherit;
  border-radius:14px;
  border:1px solid var(--border);
  padding:.78rem .88rem;
  background:var(--surface);
  color:var(--text);
  outline:none;
}
input:not([type="checkbox"]):focus, select:focus, button:focus-visible {
  border-color:color-mix(in srgb, var(--accent), transparent 20%);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--accent), transparent 84%);
}
button {
  background:var(--text);
  color:var(--surface);
  border-color:var(--text);
  font-weight:720;
  cursor:pointer;
  transition:transform .12s ease, background .12s ease, border-color .12s ease, color .12s ease;
}
button:hover { transform:translateY(-1px); }
button:active { transform:translateY(0) scale(.98); }
button.secondary { background:var(--surface); color:var(--text); border-color:var(--border); }
button.saved { background:var(--success); color:white; border-color:var(--success); }
button.danger { background:var(--danger-2); color:var(--danger); border-color:color-mix(in srgb, var(--danger), transparent 62%); }
.section-switcher {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.45rem;
  max-width:760px;
  margin:0 auto 1rem;
  padding:.35rem 1rem;
}
.tab {
  background:color-mix(in srgb, var(--surface), transparent 8%);
  color:var(--muted);
  border-color:var(--border);
  border-radius:999px;
}
.tab.active {
  background:var(--text);
  color:var(--surface);
  border-color:var(--text);
  box-shadow:0 8px 18px rgba(0,0,0,.12);
}
.tab span { opacity:.72; font-weight:650; }
.single-section { grid-template-columns:1fr; }
.section-panel { display:none; }
.section-panel.active { display:block; }
.list { display:grid; gap:.7rem; }
.todo-item {
  border:1px solid var(--border);
  border-radius:18px;
  padding:.82rem;
  display:grid;
  gap:.7rem;
  background:linear-gradient(180deg, var(--surface), var(--surface-2));
}
.checkline { display:grid; grid-template-columns:auto 1fr; gap:.7rem; align-items:center; }
input.done { width:1.18rem; height:1.18rem; margin:0; padding:0; flex:0 0 auto; accent-color:var(--accent); }
.text { width:100%; border:none; border-bottom:1px solid transparent; border-radius:0; padding:.2rem 0; background:transparent !important; font-weight:590; }
.text:focus { border-bottom-color:var(--accent); box-shadow:none !important; }
.todo-item.done { opacity:.72; }
.todo-item.done .text { text-decoration:line-through; color:var(--muted); }
.meta { display:grid; grid-template-columns:1fr 1fr; gap:.55rem; }
.actions { display:flex; gap:.55rem; justify-content:flex-end; }
.actions button { padding:.68rem .85rem; }
.login-body { min-height:100vh; display:grid; place-items:center; padding:1rem; }
.login-card { width:min(420px, 100%); }
.login-card p { color:var(--muted); }
.login-card form { display:grid; gap:.75rem; }
.error { background:var(--danger-2); color:var(--danger); padding:.75rem; border-radius:14px; margin:.75rem 0; }
@media (min-width:850px) { .container:not(.single-section) { grid-template-columns:1fr 1fr; } }
@media (max-width:640px) {
  .topbar { align-items:flex-start; }
  .add-form, .task-form, .meta { grid-template-columns:1fr; }
  .actions button { flex:1; }
}