:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  background: #f3f6fb;
  color: #182235;
}

* { box-sizing: border-box; }
body { margin: 0; }
.container { width: min(860px, calc(100% - 32px)); margin: 48px auto; }
header { margin-bottom: 24px; }
.eyebrow { color: #2164d8; font-weight: 800; font-size: .78rem; letter-spacing: .12em; }
h1 { margin: 0; font-size: clamp(2rem, 5vw, 3rem); }
.subtitle { color: #566276; }
.card { background: #fff; border: 1px solid #dce3ef; border-radius: 14px; padding: 24px; margin: 18px 0; box-shadow: 0 6px 20px #15213a0c; }
h2 { margin-top: 0; font-size: 1.15rem; }
label { display: block; margin: 14px 0 6px; font-weight: 700; }
label span { font-weight: 400; color: #64748b; }
input, textarea { width: 100%; border: 1px solid #b9c5d8; border-radius: 8px; padding: 11px; font: inherit; }
textarea { min-height: 90px; resize: vertical; }
button { cursor: pointer; border: 0; border-radius: 8px; padding: 10px 14px; margin-top: 16px; background: #2164d8; color: #fff; font: inherit; font-weight: 700; }
button:hover { background: #174fae; }
button.secondary { background: #eaf0fa; color: #203c68; margin: 0; }
button.danger { background: #c43737; margin: 0; }
.section-title, .task, .actions { display: flex; align-items: center; }
.section-title { justify-content: space-between; }
.task-list { list-style: none; padding: 0; margin: 0; }
.task { justify-content: space-between; gap: 18px; padding: 16px 0; border-top: 1px solid #e5eaf2; }
.task p { margin: 6px 0 0; color: #667085; }
.task.completed strong { text-decoration: line-through; color: #718096; }
.actions { gap: 8px; flex-wrap: wrap; }
.status, .message, .empty { color: #566276; }
.status.ok, .message.success { color: #087443; font-weight: 700; }
.status.error, .message.error { color: #a52a2a; font-weight: 700; }
button:disabled { opacity: .6; cursor: progress; }
:is(button, input, textarea):focus-visible { outline: 3px solid #2164d8; outline-offset: 2px; }
@media (max-width: 600px) { .task { align-items: flex-start; flex-direction: column; } }