:root {
  color-scheme: dark;

  --ink: #ececec;
  --muted: #8d8d96;
  --accent: #a78bfa;
  --rule: #2c2c33;
  --bg: #0d0d10;

  --surface: #16161a;
  --surface-raised: #1e1e24;
  --sunken: #0a0a0c;

  --radius: 8px;
  --radius-sm: 5px;

  --edge: rgba(255, 255, 255, 0.09);
  --lip: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);

  --label: 0.68rem;
  --control: 0.82rem;
  --control-tracking: 0.14em;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;

  --bs-body-bg: var(--bg);
  --bs-body-color: var(--ink);
  --bs-border-color: var(--edge);
  --bs-secondary-color: var(--muted);
  --bs-emphasis-color: var(--ink);
  --bs-heading-color: var(--ink);
  --bs-link-color: var(--accent);
  --bs-link-hover-color: var(--ink);
}

body {
  background: var(--bg);
  color: var(--ink);
}

.card,
.list-group-item {
  background: var(--surface);
  border-color: var(--edge);
  color: var(--ink);
}

.card {
  border-radius: var(--radius);
  box-shadow: var(--lip);
  overflow: hidden;
}

.card-header,
.list-group-item.bg-light,
.bg-light,
.bg-lightest {
  background: var(--surface-raised) !important;
  border-color: var(--edge) !important;
  box-shadow: var(--lip);
}

.card-header h4,
.list-group-item h4 {
  font-family: var(--mono);
  font-size: 1.1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
}

.list-group-item-action:hover,
.list-group-item-action:focus {
  background: var(--surface-raised);
  color: var(--ink);
}

.list-group-item .text-truncate[style*="font-weight"] {
  font-family: var(--mono);
  letter-spacing: 0.02em;
}

.text-muted {
  color: var(--muted) !important;
}

.status {
  box-shadow: 0 0 0 1px var(--edge), 0 0 10px -1px currentcolor;
}

.btn {
  font-size: var(--control);
  font-weight: 500;
  letter-spacing: var(--control-tracking);
  text-transform: uppercase;
}

.btn-primary,
.btn-light,
.btn-outline-secondary[data-bs-toggle="collapse"] {
  --bs-btn-bg: color-mix(in srgb, var(--accent) 22%, transparent);
  --bs-btn-border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  --bs-btn-color: var(--ink);
  --bs-btn-hover-bg: color-mix(in srgb, var(--accent) 38%, transparent);
  --bs-btn-hover-border-color: var(--accent);
  --bs-btn-hover-color: var(--ink);
  --bs-btn-active-bg: color-mix(in srgb, var(--accent) 38%, transparent);
  --bs-btn-active-border-color: var(--accent);
  --bs-btn-active-color: var(--ink);
}

.btn-outline-danger,
button[type="button"].btn-outline-secondary {
  --bs-btn-bg: color-mix(in srgb, #9b111e 22%, transparent);
  --bs-btn-border-color: color-mix(in srgb, #9b111e 70%, transparent);
  --bs-btn-color: var(--ink);
  --bs-btn-hover-bg: color-mix(in srgb, #9b111e 38%, transparent);
  --bs-btn-hover-border-color: #9b111e;
  --bs-btn-hover-color: var(--ink);
  --bs-btn-active-bg: color-mix(in srgb, #9b111e 38%, transparent);
  --bs-btn-active-border-color: #9b111e;
  --bs-btn-active-color: var(--ink);
}

.btn-outline-secondary {
  --bs-btn-bg: none;
  --bs-btn-border-color: var(--rule);
  --bs-btn-color: var(--ink);
  --bs-btn-hover-bg: rgba(255, 255, 255, 0.06);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--ink) 35%, transparent);
  --bs-btn-hover-color: var(--ink);
  --bs-btn-active-bg: rgba(255, 255, 255, 0.06);
  --bs-btn-active-border-color: color-mix(in srgb, var(--ink) 35%, transparent);
  --bs-btn-active-color: var(--ink);
}

.btn:focus-visible {
  box-shadow: var(--ring);
}

.form-control {
  background: var(--sunken);
  border-color: var(--edge);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: var(--mono);
}

.form-control:focus {
  background: var(--sunken);
  border-color: var(--accent);
  box-shadow: var(--ring);
  color: var(--ink);
}

.form-control::placeholder {
  color: var(--muted);
}

.form-control[type="file"]::file-selector-button {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: var(--bs-body-font-family);
  font-size: var(--control);
  font-weight: 500;
  letter-spacing: var(--control-tracking);
  text-transform: uppercase;
}

.form-control[type="file"]:hover:not(:disabled):not([readonly])::file-selector-button {
  background: color-mix(in srgb, var(--accent) 38%, transparent);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.card:has(form[action$="/settings/cloud"]),
.nav-underline .nav-item.ms-auto {
  display: none;
}

.nav-underline .nav-link {
  color: var(--muted);
  font-size: var(--control);
  font-weight: 500;
  letter-spacing: var(--control-tracking);
  text-transform: uppercase;
}

.nav-underline .nav-link:hover,
.nav-underline .nav-link.active {
  color: var(--accent);
}

a[href^="https://en.wikipedia.org"] {
  color: inherit;
  pointer-events: none;
  text-decoration: none;
}

.alert-danger {
  background: color-mix(in srgb, #f87171 12%, var(--surface));
  border-color: color-mix(in srgb, #f87171 40%, transparent);
  color: #fca5a5;
}