* { box-sizing: border-box; }
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  margin: 0;
  background: #0b1220;
  color: #e8eefc;
}
.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
}
h1 { margin: 10px 0 20px; }
.card {
  background: #121b30;
  border: 1px solid #24314f;
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 14px;
}
label { display: block; margin: 10px 0 6px; color: #b8c6ea; }
input, select, button {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #2a3a60;
  background: #0f1730;
  color: #e8eefc;
}
.row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
}
.row > * { flex: 1; }
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 10px;
}
.primary {
  background: #2e6bff;
  border-color: #2e6bff;
  font-weight: 700;
}
button { cursor: pointer; }
button:hover { filter: brightness(1.08); }
.space-between { justify-content: space-between; }
.space-between h2 { margin: 0; }
.hint { color: #a7b6db; margin: 12px 0 0; font-size: 0.95rem; }

.list { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.item {
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #24314f;
  background: #0f1730;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}
.item .title { font-weight: 700; }
.item .meta { color: #a7b6db; font-size: 0.9rem; margin-top: 4px; }
.item.done .title { text-decoration: line-through; color: #95a3c5; }

.actions { display: flex; gap: 8px; }
.small { padding: 8px 10px; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  background: #111a31;
  border: 1px solid #2a3a60;
  padding: 10px 14px;
  border-radius: 12px;
  max-width: 90vw;
}
.hidden { display: none; }

@media (max-width: 800px) {
  .grid { grid-template-columns: 1fr; }
  .row { flex-direction: column; }
  .row > * { width: 100%; }
}