:root { font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; }
body { margin: 0; background: #0b0f19; color: #e8eefc; }
.container { max-width: 820px; margin: 40px auto; padding: 0 16px; }
h1 { margin: 0 0 16px; font-size: 28px; }
.card { background: #121a2a; border: 1px solid #1f2b45; border-radius: 14px; padding: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.row { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
.space-between { justify-content: space-between; }
input { flex: 1; padding: 10px 12px; border-radius: 10px; border: 1px solid #263556; background: #0e1525; color: #e8eefc; }
input[type="date"] { max-width: 170px; }
button { padding: 10px 14px; border-radius: 10px; border: 1px solid #2a3a5f; background: #1d2b4a; color: #e8eefc; cursor: pointer; }
button:hover { filter: brightness(1.08); }
button.ghost { background: transparent; }
.hidden { display: none; }
.muted { color: #a9b6d3; }
.small { font-size: 12px; }
.msg { margin-top: 8px; color: #ffcf70; min-height: 18px; }

.list { list-style: none; padding: 0; margin: 14px 0 0; }
.item { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 12px; border: 1px solid #1f2b45; margin-bottom: 10px; background: #0e1525; }
.item.done { opacity: .65; }
.title { flex: 1; padding: 6px 8px; border-radius: 8px; }
.title[contenteditable="true"] { outline: 2px solid #3a62ff55; background: #0b1222; }

.badge {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid #2a3a5f;
  color: #a9b6d3;
  white-space: nowrap;
}

.badge.overdue { border-color: #6b2a2a; color: #ffb3b3; }
.badge.soon { border-color: #6b5a2a; color: #ffe3a8; }

.del { background: #2a1d1d; border-color: #5f2a2a; }
.del:hover { filter: brightness(1.1); }

.checkbox { display: inline-flex; gap: 8px; align-items: center; user-select: none; }
.checkbox input { flex: 0 0 auto; }