:root {
  color-scheme: dark;
  --page: #0d0e10;
  --surface: #17191d;
  --surface-pressed: #202328;
  --line: #282b31;
  --text: #f5f5f4;
  --muted: #898d96;
  --accent: #c9ff7a;
  --accent-text: #17200c;
}

* { box-sizing: border-box; }
html { background: var(--page); }
body {
  min-width: 320px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; }
button { cursor: pointer; }
.app {
  width: 100%; max-width: 480px; min-height: 100dvh; margin: 0 auto;
  padding: max(54px, calc(env(safe-area-inset-top) + 30px)) 20px max(36px, calc(env(safe-area-inset-bottom) + 20px));
}
.header { margin-bottom: 32px; }
.kicker { margin: 0 0 7px; color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: .02em; }
h1 { margin: 0; font-size: 42px; font-weight: 700; letter-spacing: -.055em; line-height: .98; }
.new-task { display: flex; height: 56px; padding: 5px; gap: 7px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); }
.new-task:focus-within { border-color: #585d65; }
.new-task input { width: 100%; min-width: 0; padding: 0 11px; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 16px; }
.new-task input::placeholder { color: #757a83; }
.new-task button { flex: 0 0 auto; padding: 0 15px; border: 0; border-radius: 11px; background: var(--accent); color: var(--accent-text); font-size: 14px; font-weight: 750; transition: transform .18s ease, background .18s ease; }
.new-task button:active { transform: scale(.96); background: #b7eb66; }
.tabs { display: flex; gap: 22px; margin-top: 37px; border-bottom: 1px solid var(--line); }
.tab { position: relative; display: flex; align-items: center; gap: 7px; height: 42px; padding: 0 0 14px; border: 0; background: transparent; color: var(--muted); font-size: 14px; font-weight: 650; }
.tab span { color: inherit; font-size: 12px; }
.tab::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--accent); content: ""; opacity: 0; transform: scaleX(.45); transition: opacity .18s ease, transform .18s ease; }
.tab.active { color: var(--text); }
.tab.active::after { opacity: 1; transform: scaleX(1); }
.list-area { padding-top: 14px; }
.task-list { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.task { display: flex; align-items: center; min-height: 61px; padding: 10px 15px; gap: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); animation: task-enter .24s ease-out both; }
.complete { display: grid; place-items: center; width: 25px; height: 25px; flex: 0 0 25px; padding: 0; border: 1.5px solid #737984; border-radius: 50%; background: transparent; color: transparent; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.complete:active { transform: scale(.85); }
.complete svg { width: 15px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.5; }
.task-title { min-width: 0; overflow-wrap: anywhere; font-size: 16px; line-height: 1.35; }
.task.completed { opacity: .58; }
.task.completed .complete { border-color: var(--accent); background: var(--accent); color: var(--accent-text); }
.task.completed .task-title { text-decoration: line-through; text-decoration-thickness: 1.2px; }
.empty { padding: 77px 16px 24px; text-align: center; }
.empty[hidden] { display: none; }
.empty-icon { width: 34px; height: 34px; margin: 0 auto 15px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); }
.empty p { margin: 0; color: var(--muted); font-size: 15px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
@keyframes task-enter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@media (max-height: 700px) { .app { padding-top: max(34px, calc(env(safe-area-inset-top) + 16px)); } .header { margin-bottom: 23px; } .tabs { margin-top: 28px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }