:root { color-scheme: dark; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: #000;
  color: #f4f4f4;
}

a { color: inherit; text-decoration: none; }

::selection {
  background: #9b1c2a;
  color: #fff;
}

.hidden { display: none !important; }

.lbl {
  display: block;
  margin-bottom: 8px;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #cfcfcf;
}

.field {
  width: 100%;
  border: 1px solid #2a2a2a;
  background: #000;
  color: #f4f4f4;
  border-radius: 0;
  padding: 12px 12px;
  font: 500 12px/1.4 "JetBrains Mono", ui-monospace, monospace;
  outline: none;
}

.field:focus {
  border-color: #f4f4f4;
}

.btn-brutal,
.btn-ghost {
  appearance: none;
  border-radius: 0;
  font: 800 12px/1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 16px 20px;
  cursor: pointer;
  transition: none;
}

.btn-brutal {
  background: #9b1c2a;
  color: #fff;
  border: 1px solid #9b1c2a;
}

.btn-brutal:hover {
  background: #f4f4f4;
  color: #000;
  border-color: #f4f4f4;
}

.btn-ghost {
  background: #000;
  color: #f4f4f4;
  border: 1px solid #2a2a2a;
}

.btn-ghost:hover {
  background: #f4f4f4;
  color: #000;
  border-color: #f4f4f4;
}

.btn-brutal:disabled,
.btn-ghost:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.status.ok { color: #f4f4f4; }
.status.err { color: #9b1c2a; }

.source-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid #2a2a2a;
  padding: 10px 12px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

summary { list-style: none; }
summary::-webkit-details-marker { display: none; }

.tabs {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #2a2a2a;
}

.tab-btn {
  appearance: none;
  background: #000;
  color: #cfcfcf;
  border: 0;
  border-right: 1px solid #2a2a2a;
  padding: 14px 18px;
  font: 800 11px/1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}

.tab-btn:last-child { border-right: 0; }

.tab-btn:hover { color: #f4f4f4; }

.tab-btn.is-on {
  background: #9b1c2a;
  color: #fff;
}

.hdr-profile {
  display: none;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.hdr-profile:not(.hidden) { display: flex; }

.avatar {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border: 1px solid #2a2a2a;
  background: #111;
  flex-shrink: 0;
}

#hdrAvatar,
#cabAvatar {
  filter: grayscale(0.2) sepia(0.85) hue-rotate(-22deg) saturate(4.2) contrast(1.28) brightness(0.82);
}

.avatar-lg {
  width: 72px;
  height: 72px;
}

.stat-cell,
.task-cell {
  background: #000;
  padding: 14px 16px;
}

.task-details {
  margin-top: 10px;
  display: grid;
  gap: 4px;
  color: #8a8a8a;
  font-size: 11px;
  line-height: 1.55;
}

.stat-num {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.dot {
  width: 8px;
  height: 8px;
  background: #2a2a2a;
  flex-shrink: 0;
}

.dot.on { background: #9b1c2a; }

.switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #cfcfcf;
  cursor: pointer;
}

.switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.switch-ui {
  width: 44px;
  height: 24px;
  border: 1px solid #2a2a2a;
  background: #000;
  position: relative;
  flex-shrink: 0;
}

.switch-ui::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: #2a2a2a;
}

.switch input:checked + .switch-ui {
  background: #9b1c2a;
  border-color: #9b1c2a;
}

.switch input:checked + .switch-ui::after {
  left: 22px;
  background: #fff;
}

.person-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}

.hero-banner {
  display: block;
  height: min(42vw, 420px);
  background: #000 url("/media/banner") center top / contain no-repeat;
  border-bottom: 1px solid #2a2a2a;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}