/* Black, red and white theme. */
:root {
  color-scheme: dark;
  --canvas: #09090b;
  --surface: #111114;
  --raised: #19191e;
  --border: #303036;
  --text: #ffffff;
  --muted: #b1b1bb;
  --accent: #e32636;
  --accent-soft: #301218;
  --accent-text: #ff9da7;
  background: var(--canvas);
  color: var(--text);
}
body { background: var(--canvas); }
aside, header { background: #0d0d10; border-color: var(--border); }
.brand { color: var(--text); }
.brand span { color: var(--accent); }
.side-label, .aside-bottom p, .heading p, .period-row > span,
.stat small, .list-head p, .sub, #empty p, .footer-note {
  color: var(--muted);
}
.nav { color: var(--muted); }
.nav.active { background: var(--accent-soft); color: var(--accent-text); }
.nav b { background: #2b2226; color: #eeeeef; }
.storage-dot, .footer-note span { color: #ff6878; }
.storage-dot span, .crumb { color: var(--muted); }
.text-btn { color: #eeeeef; }
.text-btn:hover { color: var(--accent-text); }
.crumb span { color: #777780; }
.avatar { background: var(--accent-soft); border-color: #242024; color: #ffffff; }
.eyebrow { color: var(--accent-text); }
.primary { background: var(--accent); border-color: var(--accent); color: #ffffff; }
.primary:hover { background: #c91c2c; border-color: #c91c2c; filter: none; }
.period button { background: var(--surface); border-color: var(--border); color: var(--text); }
.period input { color: var(--text); }
.stat { background: var(--surface); border-color: var(--border); }
.stat.received {
  background: linear-gradient(125deg, #321218, #191013);
  border-color: #74303a;
}
.stat-top { color: #d3d3d9; }
.stat-top span { color: var(--accent-text); }
.stat strong { color: var(--text); }
h2 span { background: #25252b; color: #eeeeef; }
.outline { background: var(--surface); border-color: #43434b; color: #eeeeef; }
.outline:hover, .period button:hover { background: #242429; filter: none; }
.tabs { background: #16161a; }
.tabs button { color: var(--muted); }
.tabs button.selected { background: var(--accent); color: #ffffff; box-shadow: none; }
.search { background: var(--surface); border-color: var(--border); }
.search span { color: var(--muted); }
.search input { background: transparent; color: var(--text); }
input::placeholder, textarea::placeholder { color: #9c9ca8; opacity: 1; }
.table-wrap { background: var(--surface); border-color: var(--border); }
th { background: #151518; color: #bcbcc7; border-color: var(--border); }
td { border-color: #27272d; color: #ededf1; }
tbody tr:hover { background: #18181d; }
.event-title { color: var(--text); }
.badge.paid { background: #29292f; color: #ffffff; }
.badge.unpaid { background: var(--accent-soft); color: #ffacb5; }
.actions button { color: #d1d1db; }
.actions .delete { color: #ff9da7; }
.empty-icon { background: var(--accent-soft); color: var(--accent-text); }
dialog { background: var(--surface); border-color: #45454e; color: var(--text); box-shadow: 0 25px 100px #00000099; }
dialog::backdrop { background: #000000b8; }
.close { background: #28282e; color: #ffffff; }
form input, form select, form textarea {
  background: #0c0c0f;
  border-color: #45454e;
  color: var(--text);
}
form input:focus, form textarea:focus, form select:focus {
  outline: 2px solid #ff6b7b;
  outline-offset: 2px;
}
button:focus-visible, a:focus-visible { outline-color: #ff6b7b; }
.search:focus-within { outline: 2px solid #ff6b7b; outline-offset: 2px; }
#toast { background: #2d1016; color: #ffffff; border: 1px solid #a53948; box-shadow: 0 5px 25px #00000060; }
.notice { color: #ffacb5; }
::selection { background: #a31727; color: #ffffff; }