:root {
  --bg: #0b1020;
  --panel: #151b2f;
  --panel2: #1d2640;
  --text: #f4f7ff;
  --muted: #aeb9d4;
  --accent: #7c9cff;
  --warn: #ffd166;
  --line: #34405f;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: linear-gradient(180deg, #08101f, var(--bg));
  color: var(--text);
}
header {
  padding: 2.2rem 5vw 1.3rem;
  border-bottom: 1px solid var(--line);
}
.brand { font-weight: 800; letter-spacing: .04em; font-size: 1.8rem; }
.brand span { color: var(--accent); }
header p { color: var(--muted); max-width: 850px; line-height: 1.5; }
main { padding: 1.5rem 5vw 4rem; }
.toolbar {
  display:flex; gap:.7rem; flex-wrap:wrap; margin-bottom:1rem;
}
button {
  border: 1px solid var(--line);
  background: var(--panel2);
  color: var(--text);
  padding: .7rem 1rem;
  border-radius: .7rem;
  cursor: pointer;
}
button.active { outline: 2px solid var(--accent); }
.card {
  background: rgba(21,27,47,.96);
  border: 1px solid var(--line);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 12px 35px rgba(0,0,0,.22);
}
.card h2 { margin:0; padding:1rem 1.2rem .2rem; }
.card .intro { color:var(--muted); padding:0 1.2rem 1rem; margin:0; }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; min-width:900px; }
th, td {
  padding:.75rem .8rem;
  border-top:1px solid var(--line);
  text-align:left;
  vertical-align:top;
}
th { background:#10172a; position:sticky; top:0; }
tr:nth-child(even) td { background:rgba(255,255,255,.018); }
.empty { color:var(--warn); font-style:italic; }
.badge {
  display:inline-block; margin:.2rem .2rem 0 0; padding:.25rem .5rem;
  border:1px solid var(--line); border-radius:999px; color:var(--muted);
  font-size:.85rem;
}
.taskbox {
  margin-top:1.2rem;
  padding:1rem 1.2rem;
  background:#11182b;
  border-left:4px solid var(--accent);
  border-radius:.5rem;
}
.taskbox li { margin:.45rem 0; }
.note { color:var(--muted); font-size:.92rem; margin-top:1rem; }
.hidden { display:none; }