:root { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
body { margin: 0; background: #0b0c10; color: #e6e6e6; }
code { background: #14161d; padding: 2px 6px; border-radius: 6px; }

.top {
  display:flex; gap:16px; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid #222;
  position: sticky; top: 0; background: #0b0c10;
}
.brand { font-weight: 700; letter-spacing: 0.3px; }
.people { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.tab {
  text-decoration:none; color:#cfcfcf; padding:8px 10px; border:1px solid #2a2a2a;
  border-radius: 10px;
}
.tab.active { border-color:#7aa2ff; color:#fff; }

.wrap { max-width: 920px; margin: 18px auto; padding: 0 14px; }
.card { background:#0f1117; border:1px solid #222; border-radius: 14px; padding: 14px; margin-bottom: 14px; }
h2,h3 { margin: 0 0 10px 0; }

.add { display:flex; gap:10px; }
.add input {
  flex:1; padding:10px 12px; border-radius: 10px; border:1px solid #2a2a2a;
  background:#0b0c10; color:#e6e6e6;
}
.add button, .btn {
  padding:10px 12px; border-radius: 10px; border:1px solid #2a2a2a;
  background:#14161d; color:#fff; cursor:pointer;
}
.btn.danger { border-color:#7a2b2b; }

.list { list-style:none; padding:0; margin:0; }
.row {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px; border:1px solid #222; border-radius: 12px; margin: 10px 0;
}
.row.done { opacity: 0.6; }
.main { font-size: 16px; }
.meta { font-size: 12px; color:#a5a5a5; margin-top: 6px; }
.actions { display:flex; gap:8px; }

.flash { margin-bottom: 12px; }
.flash-item { padding:10px 12px; border-radius: 12px; border:1px solid #2a2a2a; margin: 8px 0; }
.flash-item.ok { border-color:#2f6f3a; }
.flash-item.error { border-color:#7a2b2b; }

.muted { color:#a5a5a5; }

.foot {
  padding: 16px; border-top:1px solid #222; color:#a5a5a5;
  text-align:center;
}