/* ══════════════════════════════════════════════════════════════════════════
   RustMetrics — Command-Center-Theme für die App (/app)
   Wird NACH style.css geladen und überschreibt nur Optik (Farben, Rahmen,
   Typo, Glow). Kein Layout-Eingriff, keine Klassen umbenannt, kein JS.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --red: #cd412a;
  --red-hi: #e85a3e;
  --yellow: #e8c428;
  --line: #333;
}

/* ─── Untergrund: Wellblech + Scanlines ──────────────────────────────── */
body {
  background-color: #111 !important;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 2px, transparent 2px 46px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.25) 0 1px, transparent 1px 46px),
    radial-gradient(1200px 600px at 70% -10%, rgba(205,65,42,.06), transparent 60%),
    radial-gradient(900px 500px at 10% 110%, rgba(232,196,40,.04), transparent 60%) !important;
  background-attachment: fixed;
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 99;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 1px, transparent 1px 3px);
  opacity: .32;
}

/* ─── Topbar: Blech, Nieten, roter Abschluss ─────────────────────────── */
.topbar {
  background: linear-gradient(180deg, #1d1d1d, #161616) !important;
  border-bottom: 2px solid var(--red) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
  position: relative;
}
.topbar::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle 4px at 12px 12px, #3d3d3d 55%, #0a0a0a 60%, transparent 65%),
    radial-gradient(circle 4px at calc(100% - 12px) 12px, #3d3d3d 55%, #0a0a0a 60%, transparent 65%),
    radial-gradient(circle 4px at 12px calc(100% - 12px), #3d3d3d 55%, #0a0a0a 60%, transparent 65%),
    radial-gradient(circle 4px at calc(100% - 12px) calc(100% - 12px), #3d3d3d 55%, #0a0a0a 60%, transparent 65%);
}
.brand-name { letter-spacing: .12em; text-shadow: 0 0 14px rgba(232,90,62,.45); }
.brand-name-accent { color: var(--red-hi) !important; }
.brand-mark { box-shadow: 0 0 0 2px #181818, 0 0 0 3px #3a3a3a, 0 0 20px rgba(205,65,42,.45) !important; }

.topbar-stats .stat-num,
.topbar-stats .v { text-shadow: 0 0 12px rgba(232,196,40,.35); }
.topbar-stats .stat-label,
.topbar-stats .k { letter-spacing: .2em; text-transform: uppercase; }

/* ─── Sidebar: dunkler Schacht, aktiver Eintrag mit Hazmat-Kante ─────── */
.sidebar {
  background: #0a0a0a !important;
  border-right: 1px solid var(--line) !important;
}
.nav-item {
  letter-spacing: .18em !important;
  text-transform: uppercase;
  border-left: 2px solid transparent;
  transition: color .15s, background .15s, border-color .15s;
}
.nav-item:hover { background: #1c1c1c !important; color: #e8e8e8 !important; }
.nav-item.is-active {
  background: linear-gradient(90deg, rgba(205,65,42,.16) 0%, transparent 100%) !important;
  color: var(--yellow) !important;
  border-left-color: var(--red) !important;
  text-shadow: 0 0 10px rgba(232,196,40,.4);
}
.nav-item.is-active .nav-icon { color: var(--red-hi) !important; }
.nav-soon {
  border: 1px solid var(--yellow) !important;
  color: var(--yellow) !important;
  letter-spacing: .12em;
}

/* ─── Überschriften ──────────────────────────────────────────────────── */
.view-title {
  letter-spacing: .1em !important;
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(232,90,62,.28);
}
.view-header { border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.stat-list-title,
.detail-section h3,
.settings-section > h3 {
  color: #9a9a9a !important;
  letter-spacing: .22em !important;
  text-transform: uppercase;
  display: flex; align-items: center; gap: 10px;
}
.stat-list-title::before,
.detail-section h3::before {
  content: ""; width: 20px; height: 2px; background: var(--red); flex: none;
}

/* ─── Karten/Panels: Blechverlauf + Ecknieten + Glow-Hover ───────────── */
.stat, .stat-card, .card-stat, .server-card, .settings-card, .about-card,
.play-side-section, .stat-list, .guest-cta-inner, .watched-player, .drawer-panel {
  background: linear-gradient(160deg, #282828, #232323 55%, #1e1e1e) !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
  position: relative;
}
.stat::after, .stat-card::after, .card-stat::after, .server-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle 3px at 9px 9px, #404040 55%, #090909 62%, transparent 68%),
    radial-gradient(circle 3px at calc(100% - 9px) 9px, #404040 55%, #090909 62%, transparent 68%),
    radial-gradient(circle 3px at 9px calc(100% - 9px), #404040 55%, #090909 62%, transparent 68%),
    radial-gradient(circle 3px at calc(100% - 9px) calc(100% - 9px), #404040 55%, #090909 62%, transparent 68%);
}
.stat:hover, .stat-card:hover, .card-stat:hover, .server-card:hover {
  border-color: var(--red) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.7), 0 0 20px rgba(205,65,42,.18), inset 0 1px 0 rgba(255,255,255,.08);
}

/* Grosse Zahlen mit Glut */
.stat-num, .card-stat-value, .stat-card .stat-num, .play-best-num {
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 16px rgba(232,90,62,.4);
}
.stat-label, .card-stat-label, .stat-card .stat-label {
  letter-spacing: .2em !important;
  text-transform: uppercase;
  color: #9a9a9a !important;
}
.stat-card .stat-sub { color: var(--yellow) !important; }

/* ─── Tabellen: gelbe Kopfzeile, rote Kante, roter Hover ─────────────── */
thead th {
  color: var(--yellow) !important;
  background: #1c1c1c !important;
  border-bottom: 2px solid var(--red) !important;
  letter-spacing: .18em !important;
  text-transform: uppercase;
}
table.sortable thead th:hover { background: #262626 !important; text-shadow: 0 0 8px rgba(232,196,40,.5); }
tbody td { border-bottom: 1px solid #2a2a2a !important; font-variant-numeric: tabular-nums; }
tbody tr:hover, .browse-row:hover { background: rgba(205,65,42,.07) !important; }
.sort-arrow { color: var(--red-hi) !important; }

/* Server-Browser-Zeilen */
.browse-row { border-bottom: 1px solid #2a2a2a !important; transition: background .15s; }
.browse-row.is-watched, tr.is-watched { background: rgba(205,65,42,.10) !important; }
.brow-pop { font-variant-numeric: tabular-nums; }
.brow-name { letter-spacing: .01em; }

/* ─── Chips/Tags: eckig, Versalien, Rahmenfarbe nach Bedeutung ───────── */
.tag, .steam-tag, .skins-chip, .region, .group {
  border-radius: 0 !important;
  border: 1px solid var(--line) !important;
  letter-spacing: .1em !important;
  text-transform: uppercase;
  font-size: 10px !important;
}
.tag.tier-vanilla { border-color: #4a7d3f !important; color: #8fd47c !important; }
.tag.tier-modded, .tag.tier-2x, .tag.tier-3x, .tag.tier-5x, .tag.tier-10x {
  border-color: var(--yellow) !important; color: var(--yellow) !important;
}

/* ─── Buttons: Rot mit Glut, Gelb als Ghost ──────────────────────────── */
.btn-primary, .btn-watch, .btn-small.btn-primary {
  border-radius: 0 !important;
  border: 1px solid var(--red) !important;
  background: linear-gradient(180deg, var(--red-hi), var(--red)) !important;
  color: #fff !important;
  letter-spacing: .18em !important;
  text-transform: uppercase;
  box-shadow: 0 0 16px rgba(205,65,42,.32), inset 0 1px 0 rgba(255,255,255,.15);
  transition: box-shadow .15s, transform .15s;
}
.btn-primary:hover, .btn-watch:hover { box-shadow: 0 0 26px rgba(232,90,62,.6) !important; transform: translateY(-1px); }
.btn-ghost, .btn-small, .btn-icon, .btn-logout, .view-btn, .chart-range-btn {
  border-radius: 0 !important;
  border: 1px solid var(--line) !important;
  letter-spacing: .16em !important;
  text-transform: uppercase;
  background: transparent !important;
}
.btn-ghost:hover, .btn-small:hover, .btn-icon:hover, .btn-logout:hover,
.view-btn:hover, .chart-range-btn:hover {
  border-color: var(--yellow) !important; color: var(--yellow) !important;
  background: rgba(232,196,40,.07) !important;
}
.view-btn.is-active, .chart-range-btn.is-active {
  border-color: var(--red) !important; color: var(--yellow) !important;
  background: rgba(205,65,42,.12) !important;
}
/* Steam-Button bleibt Steam-blau (Wiedererkennung), nur eckig wie der Rest */
.btn-steam {
  border-radius: 0 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase;
}
.btn-steam:hover { box-shadow: 0 0 18px rgba(58,107,143,.5) !important; }
.btn-remove { border-radius: 0 !important; border: 1px solid var(--line) !important; }
.btn-remove:hover { border-color: var(--red) !important; color: var(--red-hi) !important; }

/* ─── Eingaben ───────────────────────────────────────────────────────── */
input[type="text"], input[type="number"], input[type="search"], input[type="url"], select {
  border-radius: 0 !important;
  border: 1px solid var(--line) !important;
  background: #141414 !important;
}
input:focus, select:focus { border-color: var(--red) !important; outline: none !important; box-shadow: 0 0 0 1px rgba(205,65,42,.4); }

/* ─── Status/Fortschritt ─────────────────────────────────────────────── */
.fill-bar { border-radius: 0 !important; border: 1px solid var(--line) !important; background: #141414 !important; }
.fill-bar-inner {
  border-radius: 0 !important;
  background: linear-gradient(90deg, var(--red), var(--red-hi)) !important;
  box-shadow: 0 0 12px rgba(232,90,62,.5);
}
.online-dot, .player-dot { box-shadow: 0 0 10px currentColor; }

/* ─── Spieler-/Session-Listen ────────────────────────────────────────── */
.player-list .p, .session-list .sess, .stat-row {
  background: #1a1a1a !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
}
.player-name, .pname, .plink { color: var(--yellow) !important; }
.player-name:hover, .plink:hover { color: var(--red-hi) !important; }

/* ─── Drawer / Modal ─────────────────────────────────────────────────── */
.drawer-panel { border-left: 2px solid var(--red) !important; }
.drawer-header { background: linear-gradient(180deg, #1d1d1d, #161616) !important; border-bottom: 1px solid var(--line) !important; }
.rhythm-panel { border: 1px solid var(--line) !important; border-top: 2px solid var(--red) !important; border-radius: 0 !important; }

/* ─── Footer mit Warnstreifen ────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--line);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 11px;
}
.footer a:hover { color: var(--yellow) !important; }

/* ─── Guest-CTA hervorheben ──────────────────────────────────────────── */
.guest-cta-inner { border-left: 3px solid var(--yellow) !important; }

/* ─── Bewegung respektieren ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01s !important; transition-duration: .01s !important; }
  body::before { display: none; }
}

/* ─── Browser-Kopfzeile (kein <table>, sondern .browse-row.head) ─────── */
.browse-row.head {
  background: #1c1c1c !important;
  color: var(--yellow) !important;
  border-bottom: 2px solid var(--red) !important;
  letter-spacing: .18em !important;
}
.browse-row.head:hover { background: #1c1c1c !important; }
.browse-row:nth-child(even) { background: #191919 !important; }
.browse-row:hover { background: rgba(205,65,42,.07) !important; }
.browse-row.is-watched:hover { background: rgba(205,65,42,.15) !important; }
.browse-results { border: 1px solid var(--line); background: #161616; }

/* Weitere Listenköpfe im gleichen Stil */
.watchlist-header, .friends-head, .skins-picker-head, .stat-list-title {
  color: var(--yellow) !important;
  letter-spacing: .18em !important;
  text-transform: uppercase;
}
.watchlist-header { border-bottom: 2px solid var(--red) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   Stufe 2 — Übernahme aus servers.html / watchlist.html / alerts.html
   ══════════════════════════════════════════════════════════════════════════ */

/* ─── Crumb-Leiste (Design: .crumb) — hier auf .view-sub gelegt ──────── */
.view-sub {
  font-size: 12px !important;
  letter-spacing: .2em !important;
  text-transform: uppercase;
  color: #9a9a9a !important;
}

/* ─── Warnstreifen unter jeder View-Überschrift (Design: .hazline) ───── */
.view-header { position: relative; }
.view-header::after {
  content: ""; display: block; height: 8px; margin-top: 12px;
  background: repeating-linear-gradient(45deg, var(--yellow) 0 10px, #111 10px 20px);
  opacity: .35;
}

/* ─── Filterleiste als Chip-Reihe (Design: .chips/.chip) ─────────────── */
.browse-filter {
  background: linear-gradient(160deg, #282828, #232323 55%, #1e1e1e) !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  padding: 14px !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
}
.browse-filter select,
.browse-filter input[type="text"],
.browse-filter input[type="search"],
.browse-filter input[type="number"] {
  min-height: 36px !important;
  border-radius: 0 !important;
  border: 1px solid var(--line) !important;
  background: #1a1a1a !important;
  color: #9a9a9a !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase;
}
.browse-filter select:hover,
.browse-filter input:hover { color: #e8e8e8 !important; }
.browse-filter select:focus,
.browse-filter input:focus {
  border-color: var(--red) !important;
  color: var(--red-hi) !important;
  background: rgba(205,65,42,.10) !important;
  box-shadow: 0 0 10px rgba(205,65,42,.25) !important;
  outline: none !important;
}
/* Suchfeld bleibt lesbar in Normalschrift */
.browse-filter input[type="text"],
.browse-filter input[type="search"] { text-transform: none; letter-spacing: .04em !important; font-weight: 400 !important; }

/* ─── Hazmat-Kippschalter statt Standard-Checkbox (Design: .switch) ──── */
.check input[type="checkbox"] {
  appearance: none !important; -webkit-appearance: none !important;
  position: relative;
  width: 44px !important; height: 24px !important; flex: none !important;
  min-width: 44px !important; min-height: 24px !important;
  accent-color: var(--yellow);
  background: #1a1a1a;
  border: 1px solid var(--line);
  border-radius: 0;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
  vertical-align: middle;
  margin-right: 10px;
}
.check input[type="checkbox"]::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; background: #555;
  transition: left .2s, background .2s, box-shadow .2s;
}
.check input[type="checkbox"]:checked {
  border-color: var(--yellow);
  box-shadow: 0 0 12px rgba(232,196,40,.35);
}
.check input[type="checkbox"]:checked::after {
  left: 24px; background: var(--yellow); box-shadow: 0 0 8px var(--yellow);
}
.check input[type="checkbox"]:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.check { display: flex; align-items: center; gap: 4px; }

/* ─── Settings-Zeilen (Design: .setrow) ──────────────────────────────── */
.settings-row {
  border-bottom: 1px solid #2a2a2a;
  padding: 14px 0 !important;
}
.settings-row:last-child { border-bottom: none; }
.settings-section { border-radius: 0 !important; }
.settings-hint, .settings-status { font-size: 12px; color: #9a9a9a !important; }

/* Danger Zone: alles, was löscht/zurücksetzt, klar rot */
[id*="delete"], [id*="reset"], [class*="danger"],
button[data-danger], .btn-danger {
  border-color: var(--red) !important;
  color: var(--red-hi) !important;
}
[id*="delete"]:hover, [id*="reset"]:hover, [class*="danger"]:hover, .btn-danger:hover {
  background: rgba(205,65,42,.12) !important;
  box-shadow: 0 0 16px rgba(205,65,42,.35) !important;
}

/* ─── Watchlist: Karten im Blech-Look, Kopfzeile wie Tabellenkopf ────── */
.server-card { border-radius: 0 !important; }
.card-header {
  background: #1c1c1c !important;
  border-bottom: 2px solid var(--red) !important;
}
.card-title { letter-spacing: .06em; }
.card-host { font-family: "SF Mono", Menlo, monospace; color: #9a9a9a !important; }
.watched-player {
  border-radius: 0 !important;
  border-left: 2px solid transparent !important;
}
.watched-player.is-online { border-left-color: #7ddc6b !important; }
.watched-player.is-offline { border-left-color: #3a3a3a !important; }

/* ─── Tabellen-Container ─────────────────────────────────────────────── */
.tblwrap, .browse-results, .stat-list { overflow-x: auto; }

/* ══════════════════════════════════════════════════════════════════════════
   Stufe 3 — Durchgehende Kopfleiste: Navigation aus der Sidebar in die Topbar
   (Markup verschoben, .nav-item-Klassen unveraendert, app.js unberuehrt)
   ══════════════════════════════════════════════════════════════════════════ */

/* Sidebar-Spalte faellt weg — Inhalt nutzt die volle Breite */
.app { grid-template-columns: 1fr !important; }
.sidebar { display: none !important; }

/* Topbar wird zur Navigationsleiste */
.topbar { flex-wrap: wrap; gap: 10px; }
.topnav {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-left: 14px;
  align-items: center;
}
.topnav .nav-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 14px !important;
  width: auto !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-left: 1px solid transparent !important;
  color: #9a9a9a !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em !important;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}
.topnav .nav-item:hover {
  background: #222 !important;
  border-color: var(--line) !important;
  color: #e8e8e8 !important;
}
.topnav .nav-item.is-active {
  background: #181818 !important;
  border-color: var(--red) !important;
  color: var(--yellow) !important;
  text-shadow: 0 0 10px rgba(232,196,40,.4);
}
.topnav .nav-item.is-disabled,
.topnav .nav-item[disabled] { opacity: .55; cursor: not-allowed; }
.topnav .nav-icon { width: 16px; height: 16px; flex: none; }
.topnav .nav-label { display: inline !important; }
.topnav .nav-soon {
  margin-left: 6px;
  font-size: 9px;
  padding: 1px 6px;
}
.topbar-stats { margin-left: auto; }
.topbar-actions { margin-left: 12px; }

/* Schmale Schirme: Icons behalten, Beschriftung kompakter */
@media (max-width: 1100px) {
  .topnav .nav-item { padding: 0 10px !important; letter-spacing: .12em !important; font-size: 11px; }
  .topnav .nav-label { font-size: 11px; }
}
@media (max-width: 760px) {
  .topnav { width: 100%; margin-left: 0; overflow-x: auto; }
  .topbar-stats, .topbar-actions { margin-left: 0; }
}

/* Kopfleiste: alles in einer Zeile, Hoehe waechst statt umzubrechen.
   (.topbar hat in style.css height:56px + .brand margin-right:auto) */
.topbar {
  height: auto !important;
  min-height: 56px;
  flex-wrap: nowrap !important;
  gap: 12px !important;
  padding: 0 14px !important;
}
.brand { margin-right: 0 !important; flex: none; }
.topnav { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; margin-left: 10px; }
.topnav::-webkit-scrollbar { display: none; }
.topbar-stats { flex: none; margin-left: auto !important; }
.topbar-actions { flex: none; margin-left: 0 !important; }

@media (max-width: 900px) {
  .topbar { flex-wrap: wrap !important; padding-bottom: 8px !important; }
  .topnav { order: 3; width: 100%; margin-left: 0; }
  .topbar-stats { order: 2; }
  .topbar-actions { order: 2; }
}

/* Navigation strikt einzeilig; bei Platzmangel horizontal scrollen statt umbrechen */
.topnav { flex-wrap: nowrap !important; }
.topnav .nav-item {
  padding: 0 11px !important;
  letter-spacing: .14em !important;
  gap: 7px;
}
.topnav .nav-item .nav-label { font-size: 11.5px; }
@media (max-width: 1250px) {
  .topnav .nav-item { padding: 0 8px !important; letter-spacing: .1em !important; }
  .topnav .nav-item .nav-label { font-size: 11px; }
}

/* Steam-Button in der App: gleiche Typografie wie auf den anderen Seiten */
.btn-steam{
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .2em !important;
  gap: 10px !important;
  min-height: 40px;
  padding: 0 18px !important;
  color: #e6f0f8 !important;
  justify-content: center;
}
.btn-steam .steam-icon { width: 24px !important; height: 24px !important; opacity: 1; }

/* ══════════════════════════════════════════════════════════════════════════
   Stufe 4 — Breiten: Inhalt nutzt den Schirm, statt links zu kleben
   (style.css: .view { max-width: 1400px } bei voller Leistenbreite)
   ══════════════════════════════════════════════════════════════════════════ */
.view {
  max-width: 1800px !important;
  margin: 0 auto;
  padding: 26px clamp(18px, 3vw, 44px) 60px !important;
  width: 100%;
}
.topbar { padding-inline: clamp(14px, 2vw, 30px) !important; }

/* Zweispaltige Bereiche duerfen die gewonnene Breite auch nutzen */
.stat-cards, .card-stats { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important; }
.stat-lists { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important; }
.server-grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)) !important; }

/* Play-Ansicht: Spielfeld und Seitenleiste nebeneinander statt links gequetscht */
.play-layout { max-width: 1200px; margin: 0 auto; }

/* About/Settings: Karten nicht auf halber Strecke abbrechen lassen */
.about-card, .settings-card, .settings-section { max-width: 1100px; }

/* Server-Browser: Spalten verteilen sich sinnvoll ueber die neue Breite,
   statt Name links und Zahlen ganz rechts mit Loch dazwischen.
   (style.css: 1fr 90px 130px 80px 110px) */
.browse-row {
  grid-template-columns: minmax(280px, 2fr) 130px minmax(150px, 1fr) 110px 150px !important;
  gap: 16px !important;
}
@media (max-width: 900px) {
  .browse-row { grid-template-columns: minmax(0,1fr) 90px 110px !important; }
  .browse-row > :nth-child(4), .browse-row > :nth-child(5) { display: none; }
}

/* Passwortfelder (Kalender-URLs) waren browser-weiss auf dunklem Layout */
input[type="password"] {
  border-radius: 0 !important;
  border: 1px solid var(--line) !important;
  background: #141414 !important;
  color: #e8e8e8 !important;
}
input[type="password"]:focus {
  border-color: var(--red) !important; outline: none !important;
  box-shadow: 0 0 0 1px rgba(205,65,42,.4);
}

/* Schalter: Aus-Zustand deutlich vom Ein-Zustand unterscheiden */
.check input[type="checkbox"] { background: #101010 !important; border-color: #3a3a3a !important; }
.check input[type="checkbox"]::after { background: #4a4a4a; }
.check input[type="checkbox"]:checked { background: rgba(232,196,40,.12) !important; }

/* Ein Logo ueberall: das Favicon-Zeichen (rotes Quadrat) statt des
   CSS-Quadrats mit angedeutetem R — sonst stehen zwei Marken nebeneinander. */
.brand-mark {
  background: url('/favicon.svg') center / contain no-repeat !important;
  border-radius: 4px;
  box-shadow: 0 0 14px rgba(205,65,42,.45) !important;
}
.brand-mark::before { display: none !important; }