:root {
  --base: #0a0a0c;
  --side: #101012;
  --panel: #151517;
  --line: #37373c;
  --text: #f0f0f2;
  --muted: #a9a9b1;
  --accent: #91c8f6;
  --amber: #e5b578;
  --danger: #ff9e9f;
  --surface-raised: #202024;
  --surface-pressed: #2a2a2f;
  --display-font: "Barlow Semi Condensed", "Arial Narrow", sans-serif;
}

h1, h2, h3, .card-title, .stat strong, .fleet-directory-name strong {
  font-family: var(--display-font);
  letter-spacing: .015em;
}
h1, .dialog-head h2, .map-inspector-header h2, .section-title {
  text-transform: uppercase;
}
.nav-label, .eyebrow { color: var(--muted); }
.top, .map-tools { background: linear-gradient(110deg, #212124, #111113 66%); }
.mark { background: #202024; border-color: #55555e; color: var(--text); }
.nav-icon { color: var(--muted); }
.nav-item:hover, .nav-item[aria-current="page"] {
  background: var(--surface-raised);
  border-color: var(--line);
  color: var(--text);
}
.nav-item[aria-current="page"] .nav-icon { color: var(--accent); }

input, select, textarea { background: #101012; }
.quiet { background: #19191b; border-color: #46464b; }
.quiet:hover { background: var(--surface-pressed); }
.primary { background: #e3e3e7; color: #141417; border-color: #a6a6af; }
.primary:hover { background: #fafafa; }
.quiet, .primary, input, select, textarea { border-radius: 5px; }
.card, .stat, .fleet-directory-row, .empty, .galaxy-map, .map-index, .fleet-console, dialog, .login { border-radius: 6px; }
.card:hover, .stat:hover, .fleet-directory-row:hover, .fleet-directory-row:focus-visible { background: var(--surface-raised); }
.fleet-emblem, .tag { background: var(--surface-pressed); color: var(--text); }
.directory-symbol, .fleet-directory-arrow, .fleet-arrival { color: var(--accent); }
.tag.alert { background: #2d2419; color: var(--amber); }
.danger, .fleet-console #fleet-confirm .error { color: var(--danger); }
.cover { background: var(--surface-raised); }

dialog, .login { background: var(--panel); }
dialog::backdrop { background: #000c; }
.dialog-head { border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.intro {
  border-color: var(--line);
  border-radius: 6px;
  background: linear-gradient(90deg, #121214 7%, #121214df 36%, #11111333), url("assets/orbite.jpg") 65% center/cover, #161618;
}
.intro p:not(.eyebrow) { color: var(--text); }
.entrance { background: linear-gradient(90deg, #09090be8, #09090ba8), url("assets/orbite.jpg") center/cover; }

.map-scroll, .map-stage { background: #080809; }
.map-scroll { border-block: 1px solid var(--line); scrollbar-color: #626269 #161618; }
.map-tooltip { background: #141416; border-color: #64646f; color: var(--text); border-radius: 4px; }
.map-tooltip span { color: var(--muted); }
.map-selection { border-color: #f1f1f4; box-shadow: 0 0 0 3px #080809; }
.map-system-control { color: var(--accent); }
.map-system-metrics > div, .map-inspector-slots > li {
  background: #1b1b1e;
  border-radius: 4px;
}
.map-index h3 { text-transform: uppercase; }
.chart-system, .chart-system[data-record], .chart-system[data-destination^="rp:"] {
  background: #3b3b43;
  border-color: #bfc6d3;
  box-shadow: none;
}
.chart-system[data-record], .chart-system[data-destination^="rp:"] { border-color: #91c8f6; }
.chart-system:hover, .chart-system:focus-visible { background: #81818b; box-shadow: none; }
.fleet-marker, .fleet-key .venator-icon { background: #222225; }
.fleet-marker:hover, .fleet-marker:focus-visible { background: #3a3834; }

.map-filters { padding: 0 10px 10px; }
.map-filters > summary { width: fit-content; cursor: pointer; padding: 6px 9px; }
.map-filters form { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 12px; padding: 8px 0 0; }
.map-filters form > label { flex: 1 1 160px; min-width: 0; }
.map-filters select, .map-filters input[type="search"] { width: 100%; }
.map-filter-layers { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 8px 14px; }
.map-filter-layers label { display: inline-flex; align-items: center; gap: 6px; }
.map-filter-layers input { width: auto; }