/* =========================================
   Red Horizon Rebuild — Grundgeruest

   Palette, Schriften und die Rohstoffleiste sind aus dem Live-Spiel
   uebernommen: public/style/base.css (Abschnitt "REDESIGN V10 — ELITE
   FINISH") und public/style/ui.css (.res-item-hud).

   Was NICHT uebernommen ist: die 406 KB modules.css und die 185 KB
   ui.css im Ganzen. Das waere das Gegenteil von "den Code neu
   aufbauen". Hier steht die Designsprache - Farben, Schriften,
   Kartenform, Rasterschleier - und jedes Bauteil bringt sich den Rest
   selbst mit.
   ========================================= */

:root {
    /* ---------------------------------------------------------------
       Die Palette des Live-Spiels, Wert fuer Wert aus
       public/style/base.css uebernommen.

       Die Namen heissen wie dort (--ui-*), damit aus dem Live-CSS
       kopierte Regeln ohne Umschreiben funktionieren. Meine aelteren
       Regeln benutzen --rh-*; die stehen darunter als Aliase.

       Wichtig und von mir vorher falsch eingeschaetzt: der Leitton ist
       ein heisses Orangerot (#ff3d1f), nicht Cyan. Cyan ist die
       Zweitfarbe fuer Hinweise. Amber ist die Hervorhebung.
       --------------------------------------------------------------- */
    --ui-color: #ff3d1f;
    --ui-glow: rgba(255, 61, 31, 0.22);
    --ui-highlight: #fa604f;
    --ui-highlight-dark: #c82a18;
    --ui-highlight-dark-glow: rgba(250, 96, 79, 0.24);
    --ui-info: #dfe5ec;
    --ui-info-dark: #4f5864;
    --ui-info-dark-glow: rgba(223, 229, 236, 0.18);
    --ui-danger: #ff354f;
    --ui-danger-light: #ff526a;
    --ui-danger-light-glow: rgba(255, 82, 106, 0.24);
    --ui-bg: #08090a;
    --ui-bg-soft: #0f1215;
    --ui-panel: rgba(15, 17, 19, 0.78);
    --ui-panel-strong: rgba(17, 20, 23, 0.92);
    --ui-panel-line: rgba(255, 85, 50, 0.22);
    --ui-panel-line-soft: rgba(186, 191, 198, 0.12);
    --ui-text-muted: #8f9aaa;
    --ui-text-soft: #dee0e4;

    /* Aliase fuer die bestehenden Regeln. */
    --rh-bg: var(--ui-bg);
    --rh-bg-2: var(--ui-bg-soft);
    --rh-panel: var(--ui-panel-strong);
    --rh-panel-2: var(--ui-panel);
    --rh-line: var(--ui-panel-line-soft);
    --rh-line-strong: var(--ui-panel-line);
    --rh-amber: var(--ui-highlight);
    --rh-red: var(--ui-color);
    --rh-cyan: var(--ui-info);
    --rh-text: #eef4fb;
    --rh-muted: var(--ui-text-muted);

    --rh-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
    --rh-inset: inset 0 1px 0 rgba(255, 255, 255, 0.05);

    /* Rohstofffarben, je Art wie im Live-Spiel */
    --res-ore: #cd853f;
    --res-oil: #8888aa;
    --res-fuel: #f55;
    --res-food: #4caf50;
    --res-diamond: #0ff;
    --res-power: #87ff00;
}

* {
    box-sizing: border-box;
}

html {
    background: var(--rh-bg);
}

body {
    margin: 0;
    color: var(--rh-text);
    font-family: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0.01em;
    min-height: 100vh;

    background:
        radial-gradient(circle at 8% -8%, rgba(224, 77, 49, 0.16), transparent 32%),
        radial-gradient(circle at 90% 4%, rgba(194, 199, 205, 0.12), transparent 34%),
        radial-gradient(circle at 48% 120%, rgba(228, 82, 66, 0.075), transparent 42%),
        linear-gradient(145deg, #050607 0%, #0e1013 46%, #101215 72%, #060708 100%);
    background-attachment: fixed;
}

/* Der Rasterschleier. Liegt ueber dem Hintergrund und unter allem
   anderen, nimmt keine Klicks an. Die Werte sind aus dem Live-Spiel:
   64er Raster bei 0,36 Deckkraft. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.36;
    background:
        linear-gradient(rgba(255, 255, 255, 0.014) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.010) 1px, transparent 1px);
    background-size: 64px 64px;
}

/* Die Zeilenstruktur eines alten Monitors. Sehr schwach - 0,045 - und
   genau das ist der Punkt: man sieht sie nicht, man merkt sie. */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.045;
    mix-blend-mode: screen;
    background: repeating-linear-gradient(180deg,
        rgba(255, 255, 255, 0.22) 0px,
        rgba(255, 255, 255, 0.22) 1px,
        transparent 1px,
        transparent 4px);
}

/* Alles Sichtbare liegt ueber den beiden Schleiern. */
.rahmen {
    position: relative;
    z-index: 2;
}

/* Keine Breitenbegrenzung mehr.
   Hier stand max-width: 1280px mit margin: auto - richtig fuer eine
   Textseite, falsch fuer dieses Spiel. Das Live-Spiel nimmt die ganze
   Breite: links die feste Menuespalte, rechts alles andere. Mit der
   Begrenzung stand das Menue mitten im Bild. */

a {
    color: var(--rh-cyan);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* =========================================
   Kopf und Fuss
   ========================================= */

.kopf {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 14px 24px;
    border-bottom: 1px solid var(--ui-panel-line);
}

.marke {
    font-family: 'Orbitron', sans-serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--rh-text);
}

.marke:hover {
    text-decoration: none;
}

.marke-zusatz {
    color: var(--rh-muted);
    font-size: 13px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.fuss {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px 18px;
    padding: 12px 24px 20px;
    border-top: 1px solid var(--ui-panel-line);
    color: var(--rh-muted);
    font-size: 12px;
    letter-spacing: 0.04em;
}

.fuss-links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
}

.fuss-links a {
    color: var(--rh-muted);
    text-decoration: none;
    padding: 6px 0;
}

.fuss-links a:hover,
.fuss-links a:focus-visible {
    color: var(--rh-text, #e8e8ef);
    text-decoration: underline;
}

/* =========================================
   Ueberschriften

   Orbitron, gesperrt, in Grossbuchstaben - und mit dem Akzentbalken
   links, der im Live-Spiel jede Panel-Ueberschrift markiert.
   ========================================= */

h1, h2, h3 {
    font-family: 'Orbitron', sans-serif;
    text-transform: uppercase;
    letter-spacing: 2.4px;
    font-weight: 500;
}

h1 {
    font-size: 1.3rem;
    margin: 0 0 18px;
}

h2 {
    position: relative;
    font-size: 0.96rem;
    margin: 34px 0 14px;
    padding: 0 0 11px 14px;
    color: rgba(239, 247, 255, 0.94);
    border-bottom: 1px solid rgba(194, 199, 205, 0.14);
    text-shadow: 0 0 18px rgba(194, 199, 205, 0.13);
}

h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    bottom: 11px;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--rh-cyan), rgba(228, 82, 66, 0.82));
    box-shadow: 0 0 14px rgba(194, 199, 205, 0.26);
}

h2::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: -1px;
    width: 34%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(172, 178, 187, 0.42));
}

.klein {
    color: var(--rh-muted);
    font-size: 13px;
}

.gross {
    display: block;
    font-family: 'Orbitron', sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
}

.rechts {
    text-align: right;
}

.warn {
    color: var(--rh-amber);
}

::selection {
    color: #fff;
    background: rgba(194, 199, 205, 0.28);
}

/* =========================================
   Meldungen
   ========================================= */

.hinweis,
.meldung,
.warnung {
    padding: 11px 15px;
    margin: 0 0 18px;
    background: var(--rh-panel);
    border: 1px solid var(--rh-line);
    border-left: 3px solid var(--rh-cyan);
    border-radius: 9px;
    box-shadow: var(--rh-inset);
}

.warnung {
    border-left-color: var(--rh-red);
}

/* =========================================
   Rohstoffleiste

   Die Karte kommt aus ui.css: Verlauf von oben links, feine Kante,
   zwei Pixel Farbe oben - und der abgeschnittene Eckenschnitt per
   clip-path, der die Leiste von einer Reihe Kaestchen unterscheidet.
   ========================================= */

.res-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 22px;
}

.res-item-hud {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 150px;
    padding: 8px 12px;
    position: relative;

    background: linear-gradient(135deg,
        rgba(25, 29, 34, 0.92),
        rgba(9, 10, 11, 0.98));

    border: 1px solid rgba(255, 255, 255, 0.065);
    border-top: 2px solid #333;
    border-radius: 12px;

    box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.55),
                0 8px 20px rgba(0, 0, 0, 0.22);

    clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px),
        calc(100% - 9px) 100%, 0 100%, 0 9px);

    transition: filter 0.18s ease, border-color 0.18s ease;
}

.res-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--rh-muted);
}

.res-name {
    white-space: nowrap;
}

.res-rate {
    font-variant-numeric: tabular-nums;
    color: var(--rh-muted);
}

.res-values {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 2px 0 6px;
}

.res-values strong {
    font-family: 'Orbitron', sans-serif;
    font-size: 17px;
    font-weight: 500;
    /* Feste Zahlenbreite, damit die Zahl beim Hochlaufen nicht zuckt. */
    font-variant-numeric: tabular-nums;
}

.res-cap {
    font-size: 12px;
    color: var(--rh-muted);
    font-variant-numeric: tabular-nums;
}

.res-bar-container {
    height: 4px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    overflow: hidden;
}

.res-bar-fill {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: #666;
    transition: width 0.25s linear;
}

/* Am Deckel: die Kante leuchtet, damit es auffaellt, dass Produktion
   verfaellt. */
.res-item-hud.critical {
    border-color: rgba(255, 82, 106, 0.55);
    filter: saturate(1.15);
}

.res-item-hud.ore { border-top-color: var(--res-ore); }
.res-item-hud.ore .res-bar-fill {
    background: var(--res-ore);
    box-shadow: 0 0 10px var(--res-ore);
}

.res-item-hud.oil { border-top-color: var(--res-oil); }
.res-item-hud.oil .res-bar-fill {
    background: var(--res-oil);
    box-shadow: 0 0 10px var(--res-oil);
}

.res-item-hud.fuel { border-top-color: var(--res-fuel); }
.res-item-hud.fuel .res-bar-fill {
    background: var(--res-fuel);
    box-shadow: 0 0 10px var(--res-fuel);
}

.res-item-hud.food { border-top-color: var(--res-food); }
.res-item-hud.food .res-bar-fill {
    background: var(--res-food);
    box-shadow: 0 0 10px var(--res-food);
}

.res-item-hud.diamond { border-top-color: var(--res-diamond); }
.res-item-hud.diamond .res-bar-fill {
    background: var(--res-diamond);
    box-shadow: 0 0 10px var(--res-diamond);
}

.res-item-hud.power { border-top-color: var(--res-power); }
.res-item-hud.power .res-name {
    color: var(--res-power);
    text-shadow: 0 0 5px var(--res-power);
}
.res-item-hud.power .res-bar-fill {
    background: var(--res-power);
    box-shadow: 0 0 10px #aa0;
}
.res-item-hud.power.critical .res-bar-fill {
    background: #ff526a;
    box-shadow: 0 0 10px #ff526a;
}

/* =========================================
   Tabellen
   ========================================= */

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--rh-line);
    vertical-align: top;
}

th {
    color: var(--rh-muted);
    font-family: 'Orbitron', sans-serif;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    text-align: left;
}

tbody tr:hover {
    background: rgba(194, 199, 205, 0.035);
}

td.rechts {
    font-variant-numeric: tabular-nums;
}

/* =========================================
   Knoepfe

   Derselbe Eckenschnitt wie die Rohstoffkarten, nur kleiner. Das ist
   der Faden, der die Oberflaeche zusammenhaelt.
   ========================================= */

.knopf {
    padding: 6px 15px;
    border: 1px solid rgba(224, 77, 49, 0.55);
    background: linear-gradient(135deg,
        rgba(224, 77, 49, 0.22),
        rgba(224, 77, 49, 0.06));
    color: var(--rh-text);
    font: inherit;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px),
        calc(100% - 6px) 100%, 0 100%, 0 6px);
    transition: background 0.18s ease, border-color 0.18s ease;
}

.knopf:hover:not(:disabled) {
    background: linear-gradient(135deg,
        rgba(224, 77, 49, 0.42),
        rgba(224, 77, 49, 0.14));
    border-color: var(--rh-red);
}

.knopf:disabled {
    opacity: 0.35;
    cursor: default;
}

.knopf-still {
    border-color: var(--rh-line-strong);
    background: rgba(194, 199, 205, 0.07);
    color: var(--rh-muted);
}

.knopf-still:hover:not(:disabled) {
    background: rgba(194, 199, 205, 0.16);
    border-color: var(--rh-cyan);
}

/* =========================================
   Kommandorang
   ========================================= */

.rangkopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 26px;
    padding: 16px;
    margin-bottom: 20px;
    background: var(--rh-panel);
    border: 1px solid var(--rh-line);
    border-radius: 12px;
    box-shadow: var(--rh-inset);
    clip-path: polygon(11px 0, 100% 0, 100% calc(100% - 11px),
        calc(100% - 11px) 100%, 0 100%, 0 11px);
}

.rangzahl,
.rangpunkte {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 92px;
}

.rangzahl {
    align-items: center;
}

.rangzahl-abzeichen .rh-rangabzeichen {
    width: 128px;
    height: 102px;
}

.rangzahl .gross {
    color: var(--rh-cyan);
    text-shadow: 0 0 18px rgba(194, 199, 205, 0.3);
}

.rangpunkte .gross {
    color: var(--rh-amber);
    text-shadow: 0 0 18px rgba(228, 82, 66, 0.3);
}

.rangbalken {
    position: relative;
    flex: 1 1 240px;
}

.rangbalken::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 6px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
}

.rangbalken-fuellung {
    position: relative;
    height: 6px;
    margin-bottom: 7px;
    min-width: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--rh-cyan), var(--rh-amber));
    box-shadow: 0 0 12px rgba(97, 220, 255, 0.35);
}

@media (max-width: 720px) {
    .res-item-hud {
        min-width: 110px;
        padding: 7px 9px;
    }

    .res-values strong {
        font-size: 15px;
    }

    .gross {
        font-size: 24px;
    }

    h1 {
        font-size: 1.1rem;
    }
}

/* =========================================
   Reine Haken, absichtlich ohne Gestaltung

   .rh-wert und .rh-balken sucht ressourcen.js, um Zahl und
   Balkenbreite zu setzen. Sie stehen hier, damit niemand sie fuer
   einen Tippfehler haelt und loescht - was dazu fuehren wuerde, dass
   die Leiste stehenbleibt, ohne dass irgendetwas kaputt aussieht.

   .gebaeude, .basen und .zweige benennen die drei Tabellen. Gestaltet
   werden sie ueber die allgemeinen table-Regeln; die Klasse ist der
   Platz fuer spaetere Eigenheiten.
   ========================================= */

.rh-wert,
.rh-balken,
.gebaeude,
.basen,
.zweige {
    /* absichtlich leer */
}


/* =========================================
   Aufteilung und Kommando-Menue

   Uebernommen aus public/game.html: links eine feste Spalte von
   345 px mit dem Kommando-Menue, rechts der Inhalt. Die Klassennamen
   sind die des Live-Spiels (panel, command-nav-*, v-menu-btn,
   nav-ico, nav-copy, nav-badge), damit weitere Regeln von dort ohne
   Umschreiben uebernommen werden koennen.
   ========================================= */

body {
    background:
        radial-gradient(circle at 14% 12%,
            rgba(255, 61, 31, 0.16) 0%, rgba(255, 61, 31, 0.02) 28%, transparent 42%),
        radial-gradient(circle at 82% 8%,
            rgba(172, 178, 187, 0.12) 0%, rgba(172, 178, 187, 0.02) 24%, transparent 38%),
        linear-gradient(145deg, #070809 0%, #0e1013 42%, #12080a 74%, #07080a 100%);
    background-attachment: fixed;
}

.rahmen {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Die Buehne traegt die beiden Spalten. */
.buehne {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    align-items: flex-start;
}

/* 338 px, und ab 1280 px Fensterbreite 262 - beides sind die Masse
   des Originals (#vue-left-column.column-left in ui.css). */
.spalte-links {
    width: 338px;
    min-width: 338px;
    padding: 14px 10px 14px 14px;
    border-right: 1px solid rgba(255, 78, 45, 0.24);
    background: linear-gradient(180deg,
        rgba(13, 15, 17, 0.94), rgba(7, 8, 10, 0.96));
    box-shadow: inset -1px 0 0 rgba(172, 178, 187, 0.08),
                18px 0 50px rgba(0, 0, 0, 0.28);
}

@media (max-width: 1280px) {
    .spalte-links {
        width: 262px;
        min-width: 262px;
    }
}

.inhalt {
    flex: 1 1 auto;
    min-width: 0;
    padding: 16px 24px 32px;
}

/* Auf schmalen Geraeten wandert das Menue nach oben. Das Live-Spiel
   hat dafuer eine eigene mobile-fix.css mit 73 KB; hier genuegt der
   Umbruch, bis es jemand wirklich am Telefon spielt. */
@media (max-width: 1000px) {
    .buehne { flex-direction: column; }

    .spalte-links {
        width: auto;
        min-width: 0;
        border-right: 0;
        border-bottom: 1px solid var(--ui-panel-line);
        padding: 12px 16px;
    }

    .inhalt { padding: 16px; }
}

.panel {
    background: linear-gradient(180deg,
        rgba(19, 22, 26, 0.92), rgba(10, 12, 14, 0.96));
    border: 1px solid rgba(200, 204, 210, 0.14);
    border-radius: 18px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05),
                0 18px 42px rgba(0, 0, 0, 0.28);
    overflow: hidden;
}

/* Die Werte unten sind aus public/style/ui.css abgeschrieben, nicht
   nachempfunden. Vorher stand hier eine eigene Lesart in Rot - das
   Menue des Originals ist aber kuehl: zyanfarbene Kanten, und Gold
   ausschliesslich am aktiven Punkt. Das war der groesste verbliebene
   Unterschied zum Original, und er fiel erst im Bild nebeneinander
   auf. Die !important der Vorlage fehlen hier: dort kaempfen sie
   gegen aeltere Regeln in derselben Datei, hier gibt es die nicht. */

.command-nav-panel {
    padding: 12px;
    margin-top: 12px;
}

.command-nav-title {
    position: relative;
    padding: 11px 12px 12px;
    margin-bottom: 10px;
    border-radius: 14px;
    border: 1px solid rgba(200, 204, 210, 0.15);
    background:
        radial-gradient(circle at 12% 0%, rgba(200, 204, 210, 0.14), transparent 38%),
        linear-gradient(135deg, rgba(31, 33, 37, 0.92), rgba(12, 13, 15, 0.86));
}

/* Der goldene Strich rechts im Titelfeld. Reine Zier, aber es ist die
   Zier des Originals. */
.command-nav-title::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    width: 40px;
    height: 1px;
    transform: translateY(-50%);
    background: linear-gradient(90deg, transparent, rgba(228, 82, 66, 0.9));
    opacity: 0.8;
}

.command-nav-kicker {
    display: block;
    margin-bottom: 3px;
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 0.58rem;
    letter-spacing: 1.65px;
    line-height: 1.05;
    text-transform: uppercase;
    color: rgba(197, 202, 208, 0.72);
}

.command-nav-title strong {
    display: block;
    font-family: 'Orbitron', 'Rajdhani', sans-serif;
    font-size: 0.84rem;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: rgba(239, 248, 255, 0.96);
}

.command-nav-title small {
    display: block;
    margin-top: 4px;
    font-size: 0.58rem;
    letter-spacing: 1px;
    line-height: 1.05;
    text-transform: uppercase;
    color: rgba(175, 181, 190, 0.72);
}

/* Die Abschnitte sind durch eine Linie getrennt, nicht durch Abstand -
   und der erste bekommt keine, sonst klebt eine Linie direkt unter dem
   Titelfeld. */
.command-nav-section {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(200, 204, 210, 0.09);
}

.command-nav-section:first-of-type {
    margin-top: 12px;
    padding-top: 0;
    border-top: 0;
}

/* Achtung, Markup: die Ueberschrift ist ein FLEX-Kasten, der Text
   steht in einem <span> darin. Stand der Text frueher direkt im div,
   griff keine einzige Regel - er wurde in 16 px Weiss gesetzt statt in
   0,64 rem Grossbuchstaben. Genau so war es hier. */
.command-nav-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin: 0 2px 8px;
    padding: 0;
}

.command-nav-section-head span {
    font-family: 'Orbitron', 'Rajdhani', sans-serif;
    font-size: 0.64rem;
    letter-spacing: 1.75px;
    text-transform: uppercase;
    color: rgba(238, 246, 252, 0.88);
}

.command-nav-section-head small {
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 0.62rem;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    white-space: nowrap;
    color: rgba(179, 185, 193, 0.62);
}

/* Zwei Spalten. Ein Punkt, der allein in seinem Abschnitt steht,
   nimmt ueber command-nav-wide beide. */
.command-nav-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.command-nav-wide { grid-column: 1 / -1; }

/* command-nav-item traegt im Live-Spiel keine eigenen Regeln - es
   steht dort immer zusammen mit v-menu-btn und dient als Haken fuer
   spaetere Regeln. Uebernommen, damit von dort kopiertes CSS passt. */
.command-nav-item { }

.v-menu-btn {
    position: relative;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) max-content;
    align-items: center;
    column-gap: 9px;

    /* 62 px, und das ist nachgemessen, nicht geschaetzt: im Original
       steht `min-height: 44px` - aber dort OHNE border-box, die
       44 px sind also der reine Inhalt. Mit den 8 px Polster oben und
       unten und je einem Pixel Rahmen sind es 62. Hier gilt
       border-box fuer alles (Zeile 74), deshalb steht die Summe. */
    min-height: 62px;
    height: auto;
    margin: 0;
    padding: 8px 9px;
    border: 1px solid rgba(200, 204, 210, 0.13);
    border-radius: 12px;
    background: linear-gradient(180deg,
        rgba(25, 29, 34, 0.82), rgba(12, 13, 15, 0.88));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
    color: rgba(241, 242, 243, 0.9);
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 0.82rem;
    letter-spacing: 0;
    text-align: left;
    text-transform: none;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.16s ease, border-color 0.16s ease,
                background 0.16s ease, color 0.16s ease;
}

/* Der schmale Strich an der linken Kante. Im Original ist er ein
   Pseudoelement und keine border-left: eine Rahmenlinie waere an der
   abgerundeten Ecke mitgebogen. */
.v-menu-btn::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 2px;
    border-radius: 2px;
    background: rgba(200, 204, 210, 0.26);
    opacity: 0.8;
}

.v-menu-btn:hover {
    background:
        radial-gradient(circle at top left, rgba(200, 204, 210, 0.11), transparent 42%),
        linear-gradient(180deg, rgba(37, 41, 46, 0.95), rgba(15, 17, 19, 0.94));
    border-color: rgba(200, 204, 210, 0.33);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22),
                inset 0 1px 0 rgba(255, 255, 255, 0.06);
    text-decoration: none;
}

.v-menu-btn.active {
    background:
        radial-gradient(circle at top left, rgba(228, 82, 66, 0.19), transparent 46%),
        linear-gradient(180deg, rgba(37, 29, 19, 0.94), rgba(17, 19, 22, 0.96));
    border-color: rgba(228, 82, 66, 0.62);
    box-shadow: 0 0 0 1px rgba(228, 82, 66, 0.08),
                0 12px 24px rgba(0, 0, 0, 0.25);
}

.v-menu-btn.active::before {
    background: linear-gradient(180deg,
        rgba(252, 154, 143, 0.98), rgba(225, 64, 46, 0.95));
    box-shadow: 0 0 12px rgba(228, 82, 66, 0.44);
}

/* Noch nicht gebaut. Sichtbar vorhanden und nicht anklickbar - das ist
   ehrlicher als ein Menuepunkt, der ins Leere fuehrt, und es zeigt beim
   Hinsehen, was noch fehlt. */
.v-menu-btn.gesperrt {
    opacity: 0.4;
    cursor: not-allowed;
}

.v-menu-btn.gesperrt::before { background: var(--ui-text-muted); }

/* Der Weg zurueck zum Portal steht abgesetzt, nicht direkt unter dem
   letzten Abschnitt - im Original ueber ein clamp, damit der Abstand
   mit der Fensterhoehe waechst. */
.v-menu-btn.logout {
    margin-top: clamp(32px, 4vh, 50px);
    border-color: rgba(193, 197, 204, 0.2);
}

.nav-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    border: 1px solid rgba(200, 204, 210, 0.13);
    background: rgba(200, 204, 210, 0.075);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    color: rgba(212, 215, 220, 0.92);
    font-family: 'Orbitron', 'Rajdhani', sans-serif;
    font-size: 0.84rem;
    line-height: 1;
}

.v-menu-btn.active .nav-ico {
    border-color: rgba(228, 82, 66, 0.38);
    background: rgba(228, 82, 66, 0.12);
    color: rgba(252, 167, 158, 0.98);
}

.nav-copy {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    line-height: 1.04;
}

.nav-copy strong {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: inherit;
    font-size: 0.84rem;
    font-weight: 800;
    letter-spacing: 0.25px;
}

.nav-copy small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgba(143, 164, 177, 0.72);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.72px;
    text-transform: uppercase;
}

/* Der hervorgehobene Abschnitt.

   Im Original heisst er `command-nav-grid-main` und traegt dort das
   Lagebild: ein Punkt ueber die ganze Breite, groesser gesetzt als
   die uebrigen. Nachgemessen: 52 px Inhalt (also 70 mit Polster und
   Rahmen), Titel 0,9 rem statt 0,84, Unterzeile 0,62 statt 0,58.

   Es ist der einzige Groessenunterschied im Menue - und er ist der
   Grund, warum das Lagebild dort wie eine Ueberschrift wirkt und
   nicht wie ein Listeneintrag. */
.command-nav-grid-main .command-nav-wide {
    min-height: 70px;
}

.command-nav-grid-main .command-nav-wide .nav-copy strong {
    font-size: 0.9rem;
}

.command-nav-grid-main .command-nav-wide .nav-copy small {
    font-size: 0.62rem;
}

/* Unter 1180 px fallen die Unterzeilen weg.

   Das ist nicht ausgedacht, sondern die Antwort des Originals auf
   dasselbe Problem: ab dort ist das Menue 262 px schmal, und
   „Gebäude, Lager, Technik, Forschung" wird abgeschnitten. Lieber
   ganz weg als halb da - der fette Titel darueber sagt ohnehin, worum
   es geht. */
@media (max-width: 1180px) {
    .command-nav-title small,
    .command-nav-section-head small,
    .nav-copy small {
        display: none;
    }
}

.nav-badge {
    min-width: 18px;
    padding: 1px 5px;
    border-radius: 9px;
    font-size: 0.58rem;
    text-align: center;
    background: var(--ui-info-dark);
    color: #eaf8ff;
}

.nav-badge.danger { background: var(--ui-danger); color: #fff; }

/* =========================================
   Bewegung

   Alle Bildfolgen sind aus public/style/ui.css uebernommen, Prozent
   fuer Prozent, und sie sitzen an denselben Stellen wie dort. Das ist
   kein Beiwerk: die Leiste, die bei Mangel pulsiert, und der Strahl
   unter der Kopfzeile sind ein Teil davon, woran man dieses Spiel
   erkennt.

   Wer Bewegung abgeschaltet hat, bekommt sie nicht. Das steht am Ende
   dieses Abschnitts und gilt fuer alles darueber.
   ========================================= */

@keyframes topbar-scan {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes hud-critical-pulse {
    0% {
        box-shadow: inset 0 0 15px rgba(255, 85, 85, 0.1);
        filter: drop-shadow(0 0 2px rgba(255, 85, 85, 0.2));
    }
    100% {
        box-shadow: inset 0 0 30px rgba(255, 85, 85, 0.3);
        filter: drop-shadow(0 0 8px rgba(255, 85, 85, 0.6));
    }
}

@keyframes pulse-research {
    0% { opacity: 0.6; filter: none; }
    50% {
        opacity: 1;
        filter: drop-shadow(0 0 8px var(--ui-info));
        text-shadow: 0 0 5px var(--ui-info);
    }
    100% { opacity: 0.6; filter: none; }
}

@keyframes pulse-green {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 255, 0, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(0, 255, 0, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 255, 0, 0); }
}

@keyframes hq-pulse {
    0% { filter: drop-shadow(0 0 1px var(--ui-highlight)); }
    100% { filter: drop-shadow(0 0 8px var(--ui-highlight)); }
}

@keyframes cyber-sweep {
    0% { left: -50%; }
    20% { left: 150%; }
    100% { left: 150%; }
}

@keyframes crt-power-on {
    0% {
        opacity: 0;
        transform: scaleY(0.01) scaleX(0);
        filter: brightness(10) contrast(3);
    }
    20% {
        opacity: 1;
        transform: scaleY(0.01) scaleX(1);
        filter: brightness(5) contrast(2);
    }
    60% { transform: scaleY(1.05) scaleX(1); filter: brightness(1.5) contrast(1.2); }
    100% { transform: scaleY(1) scaleX(1); filter: brightness(1) contrast(1); }
}

/* Der Datenstrahl unter der Kopfzeile. Live sitzt er auf
   .top-bar-container::after - hier auf .kopf, weil das dieselbe Zeile
   ist. */
.kopf {
    position: relative;
}

.kopf::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 78, 45, 0.92),
        rgba(172, 178, 187, 0.72),
        transparent);
    background-size: 200% 100%;
    opacity: 0.88;
    animation: topbar-scan 4s linear infinite;
    pointer-events: none;
}

/* Mangel. Die Klasse setzt die Rohstoffleiste schon - jetzt pulsiert
   sie auch, wie im Live-Spiel. */
.res-item-hud.critical {
    animation: hud-critical-pulse 1.5s infinite alternate;
}

/* Der Lichtstreifen, der langsam ueber eine Flaeche wandert. Live auf
   .commander-container::before, hier auf den Menuepanels. */
.panel {
    position: relative;
}

.panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: -50%;
    width: 30%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent, rgba(255, 255, 255, 0.03), transparent);
    transform: skewX(-45deg);
    animation: cyber-sweep 8s infinite;
    pointer-events: none;
    z-index: 0;
}

.panel > * { position: relative; z-index: 1; }

/* Ein laufender Auftrag. Live: .btn-hq-upgrade.researching */
.knopf.laeuft,
.knopf:disabled.laeuft {
    background: #050505;
    color: var(--ui-info);
    border-color: var(--ui-info);
    cursor: not-allowed;
    animation: pulse-research 2s infinite;
}

/* Der kleine Statuspunkt. */
.pulse-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--ui-color);
    animation: pulse-green 1.5s infinite;
}

/* Das Einschalten des Bildschirms. Live auf dem Anmeldeterminal; hier
   auf dem Inhaltsbereich, damit ein Seitenwechsel sich anfuehlt wie
   ein Umschalten und nicht wie ein Nachladen. */
.inhalt > * {
    animation: crt-power-on 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) backwards;
}

/* Nicht für die schwebenden Teile: das Schnellmenü der Karte, die
   Schnellwahl-Presets und die Rückfrage hängen live direkt am Körper und
   haben keine Einschaltanimation. Mit ihr überschrieb das transform der
   Animation das translateX(-50%) des Schnellmenüs - es tauchte rechts
   der Mitte auf und rutschte dann zur Mitte. */
.inhalt > :is(#quickActionMapMenu, #quickSettingsOverlay, .rh-confirm-overlay) {
    animation: none;
}

/* Wer Bewegung abgeschaltet hat, bekommt keine.
   Das Live-Spiel hat diese Regel nicht - sie ist eine Ergaenzung und
   keine Abweichung am Spiel: Animationen, die man nicht abschalten
   kann, sind fuer manche Menschen ein Grund, eine Seite zu schliessen. */
@media (prefers-reduced-motion: reduce) {
    .kopf::after,
    .res-item-hud.critical,
    .panel::before,
    .knopf.laeuft,
    .pulse-dot,
    .inhalt > * {
        animation: none;
    }
}

/* Die Bereichsreiter (.rh-base-tabs) stehen seit dem 21.10.2026 unten
   im Abschnitt "Basisverwaltung und Forschung als Karten" - neu
   gemessen im richtigen Zusammenhang. */

/* Das Zahlenfeld der Ausbildung. */
.feld-zahl {
    width: 72px;
    padding: 5px 7px;
    border: 1px solid var(--ui-panel-line);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.34);
    color: var(--rh-text);
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    text-align: right;
}

.feld-zahl:focus {
    outline: none;
    border-color: var(--ui-info);
    box-shadow: 0 0 0 2px var(--ui-info-dark-glow);
}

/* =========================================
   Radar

   Die Kachelklassen sind die des Live-Spiels (.map-tile, .base,
   .enemy-base, .camp, .node-…), und die Werte stehen so in
   modules.css: quadratische Kacheln, Zahlen zentriert, beim
   Darueberfahren ein cyanfarbenes Aufleuchten.
   ========================================= */

.radar-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

/* ===================================================================
   Der Kartenrahmen

   Drei Lagen uebereinander, wie im Original (map.js baut dort einen
   #mapWrapper um die Karte):

     unten   die Landschaft als <canvas>
     darauf  das Kachelgitter, durchsichtig
     aussen  ein Quadrat, das sich mittig setzt

   Die drei Dinge, die vorher fehlten, haengen alle an diesem Block:
   die Karte stand links statt in der Mitte, sie war nicht quadratisch,
   und unter den Kacheln war nichts - deshalb wirkte sie farblos.

   Die 65vh sind aus dem Original: die Karte soll nie hoeher werden als
   zwei Drittel des Fensters, sonst muss man zum Zielkasten scrollen.
   =================================================================== */

.map-rahmen {
    position: relative;
    width: 100%;
    max-width: 65vh;
    margin: 0 auto 16px;
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    overflow: hidden;
}

.map-landschaft {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;

    /* Grobe Bildpunkte statt Weichzeichner: 512 x 512 werden auf die
       volle Breite gezogen, und das soll man sehen. Live steht
       dieselbe Zeile - es sieht nach Satellitenbild aus. */
    image-rendering: pixelated;

    box-shadow: inset 0 0 80px rgba(0, 0, 0, 1),
                0 0 25px rgba(194, 199, 205, 0.15);
}

.map-grid {
    position: relative;
    z-index: 2;
    display: grid;
    width: 100%;
    height: 100%;
    gap: 1px;
    padding: 0;
    border: 0;

    /* Durchsichtig - darunter liegt die Landschaft. Hier stand eine
       dunkle Fuellung und ein eigener Rahmen; beides hat die Welt
       zugedeckt, und die Karte sah dadurch aus wie ein leeres Gitter. */
    background: transparent;
    box-shadow: none;

    cursor: grab;

    /* Damit das Ziehen mit dem Finger die Seite nicht mitscrollt. */
    touch-action: none;
}

.map-grid:active { cursor: grabbing; }

/* Bewegungslinien (radar.js, live #vectorCanvas): über den Kacheln,
   aber durchklickbar. */
.map-vektoren {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
}

.map-rahmen.radar-offline .map-vektoren { display: none; }

/* Radarstrahl (Rebuild, Design): ein langsam kreisender Lichtkeil über
   der Landschaft, unter den Kacheln. Reine Optik, GPU-gedreht; bei
   „weniger Bewegung“ und ohne Radar aus. */
.map-sweep {
    position: absolute;
    inset: -25%;
    z-index: 1;
    pointer-events: none;
    background: conic-gradient(from 0deg,
        rgba(194, 199, 205, 0) 0deg,
        rgba(194, 199, 205, 0) 300deg,
        rgba(194, 199, 205, 0.05) 340deg,
        rgba(211, 214, 219, 0.16) 359deg,
        rgba(194, 199, 205, 0) 360deg);
    mix-blend-mode: screen;
    animation: rh-radar-sweep 7s linear infinite;
    will-change: transform;
}

@keyframes rh-radar-sweep {
    to { transform: rotate(360deg); }
}

.map-rahmen.radar-offline .map-sweep { display: none; }

@media (prefers-reduced-motion: reduce) {
    .map-sweep { animation: none; display: none; }
}

.map-tile {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border-radius: 3px;
    font-size: 13px;
    line-height: 1;
    user-select: none;
    contain: layout paint;
    /* Leere Felder sind DURCHSICHTIG. Vorher lag hier eine dunkle
       Fuellung - die Landschaft darunter war damit unsichtbar, und
       die Karte wirkte farblos. Sichtbar bleibt nur das feine
       Gitternetz aus der Luecke zwischen den Kacheln. */
    background: transparent;
    color: rgba(232, 246, 255, 0.86);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
    transition: background 0.12s ease, color 0.12s ease,
                box-shadow 0.12s ease;
}

.map-tile:hover {
    background: rgba(97, 220, 255, 0.14);
    box-shadow: inset 0 0 16px rgba(97, 220, 255, 0.22),
                0 0 14px rgba(217, 162, 77, 0.10);
}

/* ===================================================================
   Der Fehlerbalken von Blazor

   Blazor blendet `#blazor-error-ui` ein, wenn der Schaltkreis stirbt -
   per `style="display: block"` direkt am Element. Deshalb steht hier
   `display: none` und nicht `visibility` oder `opacity`: alles andere
   wuerde von dieser Zeile nicht ueberschrieben, und der Balken bliebe
   unsichtbar.

   Die Farben sind die der Warnung aus der Palette. Der Balken soll
   aussehen wie etwas, das zum Spiel gehoert, aber er soll auch nicht
   zu uebersehen sein.
   =================================================================== */

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;

    padding: 0.9rem 1.2rem;

    background: #2a0b06;
    border-top: 2px solid var(--ui-color);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.6);

    color: var(--ui-highlight);
    font-family: "Rajdhani", system-ui, sans-serif;
    font-weight: 600;
    letter-spacing: 0.02em;
}

#blazor-error-ui .reload {
    margin-left: 0.8rem;
    color: var(--ui-info);
    text-decoration: underline;
}

#blazor-error-ui .dismiss {
    float: right;
    cursor: pointer;
    padding: 0 0.3rem;
}

/* Der Grund, nicht zu bauen, direkt am Knopf. Gedaempft, damit er
   nicht wie eine Fehlermeldung aussieht - es ist eine Erklaerung. */
.kein-platz {
    display: block;
    color: var(--ui-text-muted);
    font-size: 0.78rem;
    line-height: 1.2;
    margin-bottom: 0.25rem;
}

/* Der Bedienbar-Hinweis. Unauffaellig, aber lesbar - er ist ein
   Werkzeug und kein Teil des Spiels, und er verschwindet mit Etappe 2
   zusammen mit den Entwicklungsendpunkten. */
.bedienbar {
    margin-left: 0.6rem;
    padding: 0.05rem 0.4rem;
    border: 1px solid var(--ui-info);
    border-radius: 2px;
    color: var(--ui-info);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ===================================================================
   Das Wiederverbindungsfenster

   Blazor setzt am Element eine von vier Klassen:

     components-reconnect-show      es versucht gerade
     components-reconnect-hide      alles wieder gut
     components-reconnect-failed    Versuche erschoepft
     components-reconnect-rejected  Server kennt den Schaltkreis nicht mehr

   Ohne diese Regeln waere das Fenster immer sichtbar - und ohne das
   Element im Dokument (siehe App.razor) waere es nie sichtbar. Beides
   ist falsch; der Unterschied zwischen "tut nichts" und "Verbindung
   weg" entscheidet, wo man sucht.
   =================================================================== */

#components-reconnect-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1001;

    background: rgba(7, 8, 9, 0.82);
    backdrop-filter: blur(2px);
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
    align-items: center;
    justify-content: center;
}

#components-reconnect-modal .verbindung-text {
    padding: 1.4rem 1.8rem;
    max-width: 32rem;
    text-align: center;

    background: #0f1215;
    border: 1px solid var(--ui-color);
    border-radius: 3px;

    color: var(--ui-highlight);
    font-family: "Rajdhani", system-ui, sans-serif;
    font-weight: 600;
}

/* Vorgabe: alle drei Saetze aus, dann je Zustand einer an. */
#components-reconnect-modal .wird-verbunden,
#components-reconnect-modal .verbunden,
#components-reconnect-modal .aufgegeben,
#components-reconnect-modal .neu-laden { display: none; }

#components-reconnect-modal.components-reconnect-show .wird-verbunden { display: block; }
#components-reconnect-modal.components-reconnect-hide .verbunden { display: block; }

#components-reconnect-modal.components-reconnect-failed .aufgegeben,
#components-reconnect-modal.components-reconnect-rejected .aufgegeben { display: block; }

/* Neustart erkannt (js/neustart.js): statt „aufgegeben" der Hinweis aufs
   automatische Neuladen, ohne Knopf. */
#components-reconnect-modal .neustart { display: none; }
#components-reconnect-modal.rh-neustart .neustart { display: block; }
#components-reconnect-modal.rh-neustart .aufgegeben,
#components-reconnect-modal.rh-neustart .wird-verbunden,
#components-reconnect-modal.rh-neustart .neu-laden { display: none !important; }

#components-reconnect-modal.components-reconnect-failed .neu-laden,
#components-reconnect-modal.components-reconnect-rejected .neu-laden {
    display: inline-block;
    margin-top: 0.7rem;
    color: var(--ui-info);
    text-decoration: underline;
}

/* ===================================================================
   Nachbesserung 21.10.2026: nichts darf aus einer Karte herauslaufen

   Gefunden mit der Optikvorschau (scripts/optik): in der
   Rohstoffleiste war „+75.000/h" abgeschnitten und stand als
   „+75.00C" im Bild. Die Rate ist jetzt gekuerzt (wie live), und
   zusaetzlich steht hier die Regel, die verhindert, dass es wieder
   passiert.

   min-width: 0 ist der entscheidende Teil. Ein Flex-Kind hat von sich
   aus min-width: auto und schrumpft deshalb NICHT unter seinen Inhalt -
   es laeuft stattdessen ueber. Ohne diese Zeile nuetzt kein
   text-overflow etwas.
   =================================================================== */

.res-item-hud { min-width: 0; }

.res-header {
    gap: 0.4rem;
    min-width: 0;
}

.res-header .res-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Die Rate wird NICHT gekuerzt, sondern behaelt ihren Platz: sie ist
   die Zahl, auf die man schaut. Gekuerzt wird der Name. */
.res-header .res-rate {
    flex: 0 0 auto;
    white-space: nowrap;
}

.res-values {
    min-width: 0;
    align-items: baseline;
}

.res-values .rh-wert,
.res-values strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.res-values .res-cap {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Dasselbe in der Gebaeudetabelle: eine lange Kostenzeile darf die
   Spalte breit machen, aber den Knopf nicht aus der Zeile schieben. */
table.gebaeude td:last-child {
    white-space: nowrap;
}

table.gebaeude td:last-child .kein-platz,
table.gebaeude td:last-child .klein {
    white-space: normal;
}

/* ===================================================================
   Die Rohstoffleiste bricht um, statt Namen abzuschneiden

   Nachgemessen in der Optikvorschau: die breiteste Karte braucht
   199 px, damit „⛽ Treibstoff" und „+75,0k/h" nebeneinander stehen.
   Sechs davon plus Abstaende sind 1.244 px. So viel hat die Inhalts-
   spalte erst ab etwa 1.700 px Fensterbreite.

   Live ist das Problem nicht da, weil der Rohstoff dort „Fuel" heisst.
   Bei uns heisst er Treibstoff (SPRACHEN.md) - und eine Leiste, die
   den Namen abschneidet, ist schlechter als eine, die umbricht.

   Darum ein Raster mit festen Spaltenzahlen statt eines flex, das
   alles gleichmaessig zusammenquetscht: sechs nebeneinander, wenn es
   passt, sonst zwei Reihen zu dritt, auf dem Telefon zu zweit.
   =================================================================== */

.res-bar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

@media (min-width: 1700px) {
    .res-bar { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .res-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Jetzt ist Platz: der Name darf wieder ganz dastehen. */
.res-header .res-name {
    overflow: visible;
    text-overflow: clip;
}

/* ===================================================================
   Der Inhalt steht in Panels, nicht auf dem nackten Hintergrund

   Im Live-Spiel sitzt jeder Block in einem `.panel` - Rahmen, dunkler
   Grund, der schraege Lichtstreifen darueber. Im Umbau lag die
   Gebaeudetabelle frei auf dem Hintergrund, und dadurch sah die Seite
   leerer aus als das Original, obwohl Farben und Schriften stimmten.

   Gemacht wird das hier ueber CSS und nicht ueber ein zusaetzliches
   div im Markup: die Tabelle ist schon ein Block, sie braucht nur den
   Rahmen. Ein Bauteil weniger, das jede Seite einzeln setzen muesste.
   =================================================================== */

table.gebaeude {
    position: relative;
    border-radius: 10px;
    border: 1px solid var(--rh-line, rgba(201, 206, 211, 0.14));
    background:
        linear-gradient(180deg, rgba(16, 19, 22, 0.72), rgba(8, 9, 11, 0.86));
    box-shadow: var(--rh-inset), 0 10px 26px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}

table.gebaeude thead th {
    background: rgba(255, 255, 255, 0.025);
    border-bottom: 1px solid var(--rh-line, rgba(201, 206, 211, 0.14));
}

table.gebaeude tbody tr:hover {
    background: rgba(201, 206, 211, 0.035);
}

/* Erste und letzte Spalte brauchen Luft zum Rahmen. */
table.gebaeude th:first-child,
table.gebaeude td:first-child { padding-left: 1rem; }

table.gebaeude th:last-child,
table.gebaeude td:last-child { padding-right: 1rem; }

/* Der Seitentitel bekommt dieselbe Kante wie die Zwischentitel, damit
   Kopf und Inhalt zusammengehoeren. */
h1 {
    position: relative;
    padding-left: 0.85rem;
}

h1::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.18em;
    bottom: 0.18em;
    width: 3px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--ui-color), transparent);
}

/* Die Buehne soll die Seite fuellen, damit unter kurzem Inhalt kein
   leerer Block steht. */
.rahmen {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.buehne { flex: 1 1 auto; }

/* ===================================================================
   Die Kopfleiste wie im Original

   Aufbau aus public/game.html uebernommen: `.top-bar-container` haelt
   zwei Zeilen - `.top-bar-header` mit Marke und Kommandant, darunter
   `.top-bar-resources` mit den Rohstoffkarten. Beide ueber die GANZE
   Breite, ueber dem Menue.

   Die Klassennamen sind die des Live-Spiels, damit ein Blick in
   ui.css weiter zur Sache passt.
   =================================================================== */

.kopf.top-bar-container {
    display: block;
    padding: 0;
    position: relative;
    z-index: 3;
    background: linear-gradient(180deg, rgba(15, 17, 19, 0.96), rgba(7, 8, 10, 0.98));
    border-bottom: 1px solid var(--rh-line, rgba(201, 206, 211, 0.14));
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

.top-bar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    padding: 0.55rem 1.1rem;
}

.kopf-marke {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    min-width: 0;
}

/* --- Die Basis neben dem Kommandanten ---------------------------- */

.commander-basis {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-left: 0.85rem;
    border-left: 1px solid var(--rh-line, rgba(201, 206, 211, 0.14));
    line-height: 1.15;
}

.commander-basis-name {
    font-weight: 600;
    color: var(--ui-highlight);
    white-space: nowrap;
}

.commander-basis small {
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ui-text-muted);
}

/* --- Die Rohstoffzeile --------------------------------------------- */

.top-bar-resources {
    padding: 0.5rem 1.1rem 0.65rem;
    background: rgba(6, 7, 9, 0.86);
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 10px 22px rgba(0, 0, 0, 0.55);
}

/* Die Leiste steht jetzt ueber die ganze Breite - damit passen sechs
   Karten schon ab etwa 1.300 px nebeneinander, nicht erst ab 1.700.
   Die Grenze aus der vorigen Nachbesserung wird hier ueberschrieben. */
.top-bar-resources .res-bar {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}

@media (max-width: 1300px) {
    .top-bar-resources .res-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .top-bar-resources .res-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .top-bar-header { flex-wrap: wrap; }
    .commander-basis { display: none; }
}

/* ===================================================================
   Der Balken, wie ihn das Live-Spiel am Ende wirklich zeigt

   Erster Versuch hier: die Rasterung in den FUELLSTAND legen. Das war
   falsch herum. Nachgemessen am Original (public/style/ui.css, letzte
   Fassung der Kaskade):

     .res-bar-container   7 px hoch, rgba(0,0,0,0.45), Radius 999,
                          Rahmen rgba(188,217,238,0.085)
     ::after              das CRT-Raster ueber die GANZE Breite -
                          also auch ueber den leeren Teil
     .res-bar-fill        ein Verlauf rot -> gold -> cyan, fuer ALLE
                          Rohstoffe derselbe

   Das letzte ist das ueberraschende Stueck: die Regeln weiter oben in
   ui.css geben jedem Rohstoff seine eigene Balkenfarbe (Erz bronze,
   Oel schiefer, ...), eine spaetere Regel mit !important ueberschreibt
   sie aber allesamt. Im Bild gewinnt der Verlauf. Die Rohstofffarbe
   bleibt sichtbar - oben an der Kante der Karte.

   Nachgebaut wird, was man sieht, nicht was weiter oben steht.
   =================================================================== */

.res-bar-container {
    height: 7px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(188, 217, 238, 0.085);
    overflow: hidden;
    position: relative;
}

/* Das Raster liegt ueber dem Fuellstand, nicht darin. */
.res-bar-container::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: repeating-linear-gradient(90deg,
        transparent 0 2px,
        rgba(0, 0, 0, 0.6) 2px 4px);
}

/* Die Rohstoffregeln weiter oben (`.res-item-hud.ore .res-bar-fill`)
   sind spezifischer als ein schlichtes `.res-bar-fill`. Live gewinnt
   der Verlauf trotzdem, weil dort ein !important steht. Hier reicht
   eine Selektorstufe mehr - dasselbe Ergebnis ohne !important. */
.res-bar .res-item-hud .res-bar-fill {
    position: relative;
    z-index: 1;
    border-radius: 999px;
    background: linear-gradient(90deg,
        rgba(224, 77, 49, 0.92),
        rgba(217, 162, 77, 0.92),
        rgba(97, 220, 255, 0.72));
    box-shadow: 0 0 14px rgba(217, 162, 77, 0.16);
}

/* ===================================================================
   Die Zahlen stehen rechts

   Live: `.res-values { text-align: right }`. Im Umbau standen sie
   links, und das war der zweite Grund, warum die Leiste trotz
   gleicher Farben anders aussah als das Original: der Blick findet
   die Zahl nicht an derselben Stelle.
   =================================================================== */

.res-values {
    justify-content: flex-end;
}

/* ===================================================================
   Der Kommandant steht in der MITTE der Kopfzeile

   Live stehen dort drei Dinge nebeneinander - Basiswahl, Kommandant,
   Boni - und `justify-content: space-between` setzt den Kommandanten
   damit in die Mitte. Hier gibt es nur zwei: Marke und Kommandant.
   Dieselbe Regel haette ihn an den rechten Rand geschoben.

   Darum ein Raster mit drei Spalten: die mittlere nimmt den
   Kommandanten, die rechte bleibt leer, bis dort etwas hinkommt.
   =================================================================== */

.top-bar-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    justify-content: initial;
}

@media (max-width: 1100px) {
    .top-bar-header {
        grid-template-columns: 1fr auto;
    }
}

/* ===================================================================
   Der Baustempel in der Fusszeile

   Eine Uhrzeit, mehr nicht - aber sie beantwortet die Frage, die sonst
   eine Stunde kostet: laeuft hier ueberhaupt die neue Fassung? Darum
   leise gesetzt (die Fusszeile ist kein Hinweiskasten), aber immer da.
   =================================================================== */

.bau-stempel {
    margin-left: 0.75rem;
    padding-left: 0.75rem;
    border-left: 1px solid var(--rh-line, rgba(201, 206, 211, 0.14));
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    opacity: 0.75;
    cursor: help;
}

@media (max-width: 760px) {
    .bau-stempel {
        display: block;
        margin-left: 0;
        padding-left: 0;
        border-left: 0;
    }
}

/* ===================================================================
   Radar: ein Feld anklicken und Truppen schicken

   Die Kacheln sind seit dem 21.10.2026 <button> und nicht mehr <div>.
   Die Karte ist eine Bedienfläche: mit einem div kommt man mit der
   Tastatur nicht hin, und ein Vorleseprogramm nennt es nicht. Der
   Preis ist dieser Block - ein Knopf bringt Rahmen, Polster, Schrift
   und Hintergrund des Betriebssystems mit, und das muss alles weg.
   =================================================================== */

.map-tile {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    cursor: pointer;
}

.map-tile.gewaehlt {
    box-shadow: inset 0 0 0 2px rgba(217, 162, 77, 0.9),
                0 0 16px rgba(217, 162, 77, 0.35);
}

/* Die Radaransicht in Spalten - live .game-layout-inner (ui.css):
   Karte, Kommandozentrale (#vue-dispatch-center, .column-right),
   Operationszentrale (.column-far-right), also
   minmax(520px, 1fr) 360px 360px. Wird es eng, rutscht die Karte
   allein in die erste Zeile, darunter Kommando- und
   Operationszentrale; auf einem Telefon steht alles untereinander. */
.radar-flaeche {
    display: block;
}

/* Rebuild (Basti): im Radarcontainer drei Spalten - Kommandozentrale,
   Karte, Operationszentrale. Die Seiten scrollen in sich, damit sie die
   Karte nicht in die Länge ziehen. Unter 1280 px steht die Karte oben
   und die beiden Zentralen nebeneinander darunter, auf dem Telefon alles
   untereinander. */
.radar-buehne {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr) 340px;
    gap: 16px;
    align-items: start;
    margin-top: 14px;
}

.radar-mitte {
    min-width: 0;
    position: relative;
}

/* Live .column-right/.column-far-right.scrollable-column. */
.radar-kommando,
.radar-ops {
    min-width: 0;
    max-height: calc(65vh + 80px);
    overflow-y: auto;
    padding-right: 6px;
    scrollbar-width: thin;
    scrollbar-color: rgba(195, 199, 206, 0.34) rgba(0, 0, 0, 0.18);
}

/* Bis 1700 px schmalere Seiten, damit die Karte groß genug bleibt. */
@media (max-width: 1700px) {
    .radar-buehne { grid-template-columns: 262px minmax(0, 1fr) 262px; gap: 12px; }
}

@media (max-width: 1280px) {
    .radar-buehne { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .radar-mitte { grid-column: 1 / -1; order: -1; }
    .radar-kommando,
    .radar-ops { max-height: none; overflow: visible; }
}

@media (max-width: 760px) {
    .radar-buehne { grid-template-columns: minmax(0, 1fr); }
}

/* ===================================================================
   Radar: Fadenkreuz, Zielerfassung, Chunkgrenzen

   Aus public/style/modules.css uebernommen. Drei Dinge, die der Karte
   vorher fehlten und die man erst merkt, wenn sie fehlen:

   - beim Ueberfahren ein Fadenkreuz aus vier Ecken, das sich von
     aussen heranzieht (lock-on-anim)
   - das angeklickte Feld in Orange, mit festem Fadenkreuz, auch
     wenn die Maus weiterzieht
   - alle 16 Felder eine gestrichelte Linie: die Chunkgrenzen, nach
     denen der Weltspawner die Karte einteilt
   =================================================================== */

.map-tile {
    position: relative;
    z-index: 1;
    font-size: 11px;
    transition: none;
}

.map-tile:hover {
    z-index: 90;
    cursor: crosshair;
    background: rgba(0, 255, 0, 0.15);
    color: #fff;
    box-shadow: inset 0 0 20px var(--ui-glow, rgba(0, 255, 0, 0.3));
}

.map-tile:hover::after {
    content: '';
    position: absolute;
    inset: -3px;
    pointer-events: none;
    z-index: 100;
    background:
        linear-gradient(to right, var(--ui-highlight) 2px, transparent 2px) 0 0,
        linear-gradient(to bottom, var(--ui-highlight) 2px, transparent 2px) 0 0,
        linear-gradient(to left, var(--ui-highlight) 2px, transparent 2px) 100% 0,
        linear-gradient(to bottom, var(--ui-highlight) 2px, transparent 2px) 100% 0,
        linear-gradient(to right, var(--ui-highlight) 2px, transparent 2px) 0 100%,
        linear-gradient(to top, var(--ui-highlight) 2px, transparent 2px) 0 100%,
        linear-gradient(to left, var(--ui-highlight) 2px, transparent 2px) 100% 100%,
        linear-gradient(to top, var(--ui-highlight) 2px, transparent 2px) 100% 100%;
    background-repeat: no-repeat;
    background-size: 8px 8px;
    animation: lock-on-anim 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes lock-on-anim {
    0% {
        transform: scale(1.6);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
        filter: drop-shadow(0 0 4px var(--ui-highlight));
    }
}

/* Das Ziel haelt, auch unter der Maus. */
.map-tile.target-locked,
.map-tile.target-locked:hover {
    z-index: 95;
    background: rgba(255, 80, 0, 0.25);
    box-shadow: inset 0 0 20px rgba(255, 80, 0, 0.5);
    color: #fff;
}

.map-tile.target-locked::after,
.map-tile.target-locked:hover::after {
    content: '';
    position: absolute;
    inset: -4px;
    pointer-events: none;
    z-index: 100;
    background:
        linear-gradient(to right, #ff5500 2px, transparent 2px) 0 0,
        linear-gradient(to bottom, #ff5500 2px, transparent 2px) 0 0,
        linear-gradient(to left, #ff5500 2px, transparent 2px) 100% 0,
        linear-gradient(to bottom, #ff5500 2px, transparent 2px) 100% 0,
        linear-gradient(to right, #ff5500 2px, transparent 2px) 0 100%,
        linear-gradient(to top, #ff5500 2px, transparent 2px) 0 100%,
        linear-gradient(to left, #ff5500 2px, transparent 2px) 100% 100%,
        linear-gradient(to top, #ff5500 2px, transparent 2px) 100% 100%;
    background-repeat: no-repeat;
    background-size: 8px 8px;
    animation: none;
}

/* Die eigene Basis: weisser Ring, wie der Inline-Stil in map.js. */
.map-tile.heimat {
    box-shadow: inset 0 0 0 1px #fff, 0 0 10px #fff;
    z-index: 5;
}

/* Chunkgrenzen. */
.map-tile.chunk-edge-r { border-right: 1px dashed rgba(0, 255, 0, 0.4); }
.map-tile.chunk-edge-b { border-bottom: 1px dashed rgba(0, 255, 0, 0.4); }
.map-tile.chunk-edge-l { border-left: 1px dashed rgba(0, 255, 0, 0.4); }
.map-tile.chunk-edge-u { border-top: 1px dashed rgba(0, 255, 0, 0.4); }

/* Felder ausserhalb des Geladenen - nur kurz sichtbar, waehrend der
   Server nachliefert. Ein Hauch dunkler, damit man es merkt. */
.map-tile.unbekannt { background: rgba(0, 0, 0, 0.35); }

/* Das alte „gewaehlt" ist durch target-locked ersetzt. */
.map-tile.gewaehlt { box-shadow: none; }

.radar-status {
    font-variant-numeric: tabular-nums;
}

/* ===================================================================
   RADAR 1:1 — Rahmen, Kopf, Statusleiste und Kacheln

   Diese Werte sind nicht aus den Stilblättern abgeschrieben, sondern
   GEMESSEN: das Original-Markup aus public/game.html mit base.css,
   ui.css, modules.css und system-menu.css im Browser aufgebaut, und
   dann die berechneten Werte abgelesen. Die Live-Stile haben für das
   Radar bis zu sechs Lagen, die sich gegenseitig mit !important
   überschreiben — von Hand aufgelöst kommt dabei etwas Falsches
   heraus. Ein Beispiel: .own-bg-base setzt einen Verlauf, aber eine
   spätere Regel überschreibt ihn. Die eigene Basis hat im Original
   also KEINEN Verlauf, sondern nur weißen Rand und Leuchten.

   Alles steht unter .map-container, damit es die älteren Radarregeln
   weiter oben in dieser Datei sicher schlägt.
   =================================================================== */

.map-container {
    position: relative;
    padding: 18px;
    border: 1px solid rgba(205, 209, 214, 0.18);
    border-radius: 22px;
    background:
        radial-gradient(circle at 14% 0%, rgba(205, 209, 214, 0.1), transparent 34%),
        radial-gradient(circle at 92% 12%, rgba(251, 103, 86, 0.06), transparent 30%),
        linear-gradient(rgba(21, 24, 28, 0.94), rgba(9, 10, 12, 0.97));
    box-shadow:
        0 24px 46px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        inset 0 0 42px rgba(205, 209, 214, 0.02);
    margin-bottom: 16px;
}

/* Die Pille „TACTICAL WORLD GRID" oben links. */
.map-container .radar-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: max-content;
    height: 34px;
    margin: 0 0 12px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(rgba(16, 18, 21, 0.74), rgba(7, 8, 9, 0.62));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 8px 20px rgba(0, 0, 0, 0.2);
    color: rgba(245, 246, 247, 0.94);
    font-family: 'Orbitron', monospace;
    font-size: 0.49rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    line-height: 1;
    text-transform: uppercase;
}

.map-container .radar-header::before,
.map-container .radar-header::after {
    content: none;
}

.map-container .live-dot {
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: rgba(194, 199, 205, 0.88);
    box-shadow: 0 0 7px rgba(194, 199, 205, 0.46);
}

/* Der HQ-Knopf oben rechts: zurück zur eigenen Basis. Er steht im
   Original - anders als die Pfeiltasten, die hier vorher standen. */
.map-container .map-hq-corner {
    position: absolute;
    top: 15px;
    right: 16px;
    z-index: 8;
    width: 48px;
    height: 34px;
    padding: 0;
    border: 1px solid rgba(251, 103, 86, 0.36);
    border-radius: 12px;
    background:
        radial-gradient(circle at 18% 0%, rgba(252, 143, 131, 0.22), transparent 54%),
        linear-gradient(rgba(44, 29, 13, 0.96), rgba(14, 16, 18, 0.98));
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.055);
    color: rgba(253, 185, 178, 0.96);
    font-family: 'Orbitron', monospace;
    font-size: 0.72rem;
    font-weight: 900;
    cursor: pointer;
    transition: transform 0.16s ease, border-color 0.16s ease;
}

.map-container .map-hq-corner:hover {
    border-color: rgba(251, 103, 86, 0.7);
    transform: translateY(-1px);
}

.map-container .map-hq-corner:active {
    transform: translateY(0);
}

/* Der Kartenrahmen: höchstens 720 px - gemessen, nicht die 65vh aus
   dem Skript, die eine spätere Regel überschreibt. */
.map-container .map-rahmen {
    max-width: 720px;
    margin: 0 auto;
    border-radius: 12px;
}

.map-container .map-grid {
    gap: 1px;
    padding: 1px;
    border: 1px solid rgba(205, 209, 214, 0.18);
    border-radius: 16px;
    box-shadow:
        0 18px 32px rgba(0, 0, 0, 0.36),
        inset 0 0 0 1px rgba(255, 255, 255, 0.024),
        inset 0 0 34px rgba(0, 0, 0, 0.32);
    overflow: hidden;
}

/* Die Statusleiste unter der Karte. */
.map-container .map-status-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 12px 0 0;
    padding: 9px 11px;
    border: 1px solid rgba(205, 209, 214, 0.12);
    border-radius: 13px;
    background: rgba(0, 0, 0, 0.24);
}

.map-container .map-status-strip span {
    color: rgba(232, 234, 236, 0.34);
    font-family: 'Rajdhani', monospace;
    font-size: 0.78rem;
    letter-spacing: 1.3px;
}

.map-container .map-status-strip .radar-status {
    margin: 0;
    color: rgba(228, 82, 66, 0.88);
    font-family: 'Rajdhani', monospace;
    font-size: 0.78rem;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    text-shadow: 0 0 12px rgba(228, 82, 66, 0.12);
}

/* ---------- Kacheln -------------------------------------------------- */

.map-container .map-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: rgba(9, 10, 12, 0.08);
    color: rgba(232, 246, 255, 0.76);
    font-size: 11px;
    text-shadow: none;
    box-shadow: none;
    cursor: grab;
    user-select: none;
    transition: background 0.12s, color 0.12s, box-shadow 0.12s;
}

.map-container .map-tile:hover {
    z-index: 90;
    cursor: crosshair;
    overflow: visible;
}

/* Eigene Basis: weißer Rand, Ecken zu 20 %, Leuchten in Cyan. */
.map-container .map-tile.base {
    z-index: 5;
    border: 1px solid #fff;
    border-radius: 20%;
    box-shadow: inset 0 0 15px rgba(0, 255, 255, 0.2), 0 0 5px rgba(0, 255, 255, 0.3);
    color: #000;
    font-weight: 700;
}

/* Die GEWÄHLTE Basis bekommt im Original zusätzlich ein Inline-Leuchten
   in Weiß (tileStyle bei baseX/baseY). */
.map-container .map-tile.heimat {
    z-index: 5;
    border: 1px solid #fff;
    box-shadow: 0 0 10px #fff;
}

/* Fremde, angreifbare Basis: bernsteinfarbener Rand. */
.map-container .map-tile.enemy-bg-attackable {
    border: 1px solid rgba(255, 170, 0, 0.7);
    border-radius: 4px;
}

.map-container .map-tag-own {
    color: rgb(75, 232, 255);
    text-shadow: 0 0 9px rgba(75, 232, 255, 0.84), 0 0 18px rgba(75, 232, 255, 0.35);
}

.map-container .map-tag-attackable {
    color: rgb(255, 204, 0);
    text-shadow: 0 0 8px rgb(255, 204, 0), 0 0 18px rgba(255, 78, 45, 0.26);
}

.map-container .rh-map-tag-label {
    font-family: 'Orbitron', monospace;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

/* Lager: schraffiert, heller Doppelrand, innen gestrichelt. */
.map-container .map-tile.camp.camp-guardian {
    z-index: 5;
    border: 2px solid rgba(255, 245, 205, 0.78);
    background:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0 2px, rgba(0, 0, 0, 0.12) 2px 5px),
        radial-gradient(circle at 50% 45%, rgba(255, 190, 92, 0.28), rgba(24, 10, 8, 0.94) 78%);
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.85),
        0 0 0 1px rgba(0, 0, 0, 0.9),
        0 0 12px rgba(255, 178, 74, 0.25);
    color: #fff;
    font-size: 0.85rem;
}

.map-container .map-tile.camp.camp-guardian::before {
    content: '';
    position: absolute;
    inset: 2px;
    border: 1px dashed rgba(255, 255, 255, 0.62);
    border-radius: 3px;
    pointer-events: none;
}

.map-container .map-tile.camp-guardian-low { border-style: dotted; }
.map-container .map-tile.camp-guardian-medium { border-style: dashed; }
.map-container .map-tile.camp-guardian-high { border-style: solid; }

.map-container .map-tile.camp-guardian-very-high {
    outline: 2px solid rgba(255, 255, 255, 0.62);
    outline-offset: -4px;
}

.map-container .map-tile.camp-guardian-warlord {
    outline: 2px double rgba(255, 255, 255, 0.9);
    outline-offset: -4px;
    background:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.22) 0 3px, rgba(0, 0, 0, 0.16) 3px 7px),
        radial-gradient(circle, rgba(255, 70, 70, 0.42), rgba(22, 0, 0, 0.96) 78%);
}

.map-container .map-guardian-marker {
    position: absolute;
    inset: 2px;
    display: grid;
    place-items: center;
    align-content: center;
    line-height: 1;
    pointer-events: none;
    text-align: center;
    text-shadow: 0 1px 2px #000, 0 0 6px #000;
}

.map-container .map-guardian-marker b {
    display: block;
    color: #fff;
    font: 900 clamp(9px, 1.1vw, 14px) 'Orbitron', monospace;
    letter-spacing: -0.03em;
}

.map-container .map-guardian-marker small {
    display: block;
    margin-top: -1px;
    color: rgba(255, 255, 255, 0.82);
    font: 900 6px 'Rajdhani', sans-serif;
    letter-spacing: 0.07em;
}

/* Bonusfelder: leuchtende Kreisverläufe je Rohstoff. Eckig - im
   Original bekommen sie nur node-<art>, nicht die runde .node. */
.map-container .map-tile.node-ore {
    background: radial-gradient(circle, #ffaa00 0%, #663300 80%);
    box-shadow: 0 0 15px #ffaa00, inset 0 0 8px #fff;
    color: #000;
}

.map-container .map-tile.node-oil {
    background: radial-gradient(circle, #777788 0%, #111 80%);
    box-shadow: 0 0 12px #8888aa, inset 0 0 5px #fff;
    color: #fff;
}

.map-container .map-tile.node-food {
    background: radial-gradient(circle, #88ff88 0%, #1e3f1e 80%);
    box-shadow: 0 0 15px #88ff88, inset 0 0 8px #fff;
    color: #000;
}

.map-container .map-tile.node-diamond {
    background: radial-gradient(circle, #00ffff 0%, #2c333a 80%);
    box-shadow: 0 0 15px #00ffff, inset 0 0 8px #fff;
    color: #000;
}

/* Koordinaten auf leeren Feldern und Bonusfeldern. */
.map-container .map-coord-label {
    display: block;
    max-width: 100%;
    padding: 0 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    color: rgba(232, 246, 255, 0.72);
    font-family: monospace;
    font-size: clamp(6px, 0.62vw, 9px);
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
    transform: scale(0.96);
    transform-origin: center;
}

.map-container .map-coord-label--empty { font-weight: 400; }
.map-container .map-coord-label--node { font-weight: 700; }

/* Chunkgrenzen - vor Nebel und Schwarz, damit die beiden sie
   überdecken, wie im Original. */
.map-container .map-tile.chunk-edge-r { border-right: 1px dashed rgba(0, 255, 0, 0.4); }
.map-container .map-tile.chunk-edge-b { border-bottom: 1px dashed rgba(0, 255, 0, 0.4); }
.map-container .map-tile.chunk-edge-l { border-left: 1px dashed rgba(0, 255, 0, 0.4); }
.map-container .map-tile.chunk-edge-u { border-top: 1px dashed rgba(0, 255, 0, 0.4); }

/* Nebel: in Radarreichweite, aber nicht aufgeklärt. Schraffur.
   Rebuild (Design): live war die Schraffur fast deckend (0,92) - ein
   neuer Spieler sah eine rot-graue Fläche ohne Welt. Jetzt liegt sie
   halbdurchsichtig über der Landschaft: Gelände bleibt erkennbar, der
   Inhalt der Felder (Basen, Lager, Felder) weiterhin nicht - den
   schickt der Server ohnehin nicht. */
.map-container .map-tile.fog,
.map-container .map-tile.fog:hover {
    background:
        repeating-linear-gradient(45deg, rgba(150, 170, 176, 0.13) 0 1px, transparent 1px 6px),
        rgba(9, 10, 11, 0.58);
    border: 1px solid rgba(74, 88, 92, 0.38);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.55);
    color: transparent;
}

.map-container .map-tile.fog:hover {
    background:
        repeating-linear-gradient(45deg, rgba(170, 200, 206, 0.2) 0 1px, transparent 1px 6px),
        rgba(15, 17, 19, 0.5);
    border-color: rgba(110, 135, 140, 0.7);
}

.map-container .map-tile.fog::after,
.map-container .map-tile.fog:hover::after {
    content: none;
    display: none;
}

/* Außerhalb jeder Reichweite: schwarz, ohne Inhalt, ohne Fadenkreuz. */
.map-container .map-tile.locked,
.map-container .map-tile.locked:hover {
    background: #000;
    border: 1px solid rgba(4, 4, 5, 0.98);
    box-shadow: inset 0 0 0 1px #000, inset 0 0 18px #000;
    color: transparent;
    text-shadow: none;
    filter: none;
    cursor: grab;
}

.map-container .map-tile.locked > * {
    visibility: hidden;
}

.map-container .map-tile.locked::before,
.map-container .map-tile.locked::after {
    content: none;
    display: none;
}

/* Das erfasste Ziel steht über allem - auch über Nebel. */
.map-container .map-tile.target-locked,
.map-container .map-tile.target-locked:hover {
    z-index: 95;
    background: rgba(255, 80, 0, 0.25);
    border: 0;
    box-shadow: inset 0 0 20px rgba(255, 80, 0, 0.5);
    color: #fff;
    filter: none;
}

/* Radar aus: kein Gelände, ein rotes Kreuz auf Schwarz - genau das
   Bild, das map.js bei fehlendem Radar oder Unterstrom setzt. */
.map-rahmen.radar-offline .map-landschaft {
    display: none;
}

.map-rahmen.radar-offline .map-grid {
    background:
        linear-gradient(to bottom right, transparent calc(50% - 2px), red calc(50% - 2px), red calc(50% + 2px), transparent calc(50% + 2px)),
        linear-gradient(to top right, transparent calc(50% - 2px), red calc(50% - 2px), red calc(50% + 2px), transparent calc(50% + 2px)),
        #000;
}

.map-rahmen.radar-offline .map-tile,
.map-rahmen.radar-offline .map-tile:hover {
    background: transparent;
    border: 0;
    box-shadow: none;
    pointer-events: none;
}

.map-rahmen.radar-offline .map-tile::after,
.map-rahmen.radar-offline .map-tile::before {
    content: none;
}

/* ===================================================================
   Basisverwaltung und Forschung als Karten

   Gemessen am Original am 21.10.2026: das Markup aus render.js mit
   allen Stylesheets des Live-Spiels in Chromium gerendert und die
   berechneten Werte ausgelesen (Werkzeug: scratchpad/karten/messen.py).
   Die Werte hier sind die, die am Ende der Kaskade wirklich gelten -
   nicht die erste Regel, die man in modules.css findet. Dort stehen
   147 Regeln fuer .tech-card, die sich gegenseitig ueberschreiben.

   EINE bewusste Abweichung: live ist die Karte content-box, mit
   width: 100% PLUS 13 px Innenabstand. Dadurch ist jede Karte 28 px
   breiter als ihre Rasterzelle, die Nachbarn ueberlappen sich um
   12 px, und Bild und Knopf werden rechts abgeschnitten. Hier ist die
   Karte border-box: gleiche Masse innen, aber sie passt in ihre Zelle.
   =================================================================== */

/* --- Das Panel im Mittelfeld (#centerActionPanel.panel) ---------- */

.rh-aktion-panel {
    box-sizing: border-box;
    width: 100%;
    max-width: min(1500px, 100%);
    margin: 0 auto 28px;
    padding: 18px;
    border: 1px solid rgba(205, 209, 214, 0.17);
    border-radius: 22px;
    background:
        radial-gradient(circle at 16% 0%, rgba(205, 209, 214, 0.075), transparent 34%),
        linear-gradient(180deg, rgba(18, 21, 24, 0.94), rgba(8, 9, 10, 0.96));
    box-shadow: 0 22px 46px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.035);
    color: rgb(237, 245, 255);
    font-family: 'Rajdhani', sans-serif;
    letter-spacing: 0.16px;
    backdrop-filter: blur(14px);
}

/* Live ist der wandernde Lichtstreifen auf diesem Panel abgeschaltet
   (opacity 0). */
.rh-aktion-panel::before { display: none; }

/* --- Der Kopf (.rh-submenu-header) -------------------------------- */

.rh-submenu-header {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    padding: 11px 13px;
    border: 1px solid rgba(205, 209, 214, 0.16);
    border-bottom-color: rgba(205, 209, 214, 0.18);
    border-radius: 14px;
    background: rgba(11, 12, 14, 0.74);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), inset 0 0 18px rgba(0, 0, 0, 0.24);
    overflow: hidden;
    line-height: 1.15;
}

/* Die allgemeine h2-Regel setzt einen Akzentbalken und eine
   Lichtkante. Live stehen beide auch an diesem Kopf - mit opacity 0. */
.rh-submenu-header::before,
.rh-submenu-header::after { opacity: 0; }

.rh-submenu-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(205, 209, 214, 0.18);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.26);
    color: rgba(205, 209, 214, 0.88);
    font: 900 18.4px 'Orbitron', monospace;
}

.rh-submenu-copy { min-width: 0; }

.rh-submenu-copy small,
.rh-submenu-copy strong,
.rh-submenu-copy em {
    display: block;
    font-family: 'Orbitron', monospace;
    font-weight: 900;
    font-style: normal;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.rh-submenu-copy small {
    color: rgba(251, 112, 96, 0.88);
    font-size: 10.88px;
    letter-spacing: 2.4px;
}

.rh-submenu-copy strong {
    color: rgb(246, 253, 255);
    font-size: 21.6px;
    letter-spacing: 1.4px;
}

.rh-submenu-copy em {
    color: rgba(242, 243, 244, 0.58);
    font-size: 14.4px;
    letter-spacing: 2.34px;
}

/* --- Das Raster (#centerActionContent.rh-action-grid) ------------- */

.rh-action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 292px), 1fr));
    align-items: stretch;
    gap: 16px;
    width: 100%;
    max-width: 1460px;
    margin: 0 auto 18px;
}

.rh-action-grid > .rh-base-tabs,
.rh-action-grid > .rh-base-command,
.rh-action-grid > .rh-research-command,
.rh-action-grid > .rh-keine-forschung {
    grid-column: 1 / -1;
}

.rh-keine-forschung {
    color: gray;
    font-size: 0.9em;
    text-align: center;
}

/* Die Antwort auf einen Klick. Live ein Toast oben rechts; hier eine
   Zeile unter dem Kopf, damit sie neben dem Knopf steht, der sie
   ausgeloest hat. */
.rh-meldung {
    margin: -4px 0 14px;
    padding: 9px 13px;
    border: 1px solid rgba(93, 255, 177, 0.22);
    border-radius: 12px;
    background: rgba(93, 255, 177, 0.06);
    color: rgba(211, 255, 229, 0.92);
    font: 800 0.86rem 'Rajdhani', sans-serif;
}

.rh-meldung.fehler {
    border-color: rgba(255, 92, 92, 0.3);
    background: rgba(255, 92, 92, 0.07);
    color: rgba(255, 168, 168, 0.95);
}

/* --- Die Reiter (.rh-base-tabs) ----------------------------------- */

.rh-base-tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: 10px;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: -2px 0 14px;
    padding: 8px 8px 3px;
    border: 1px solid rgba(193, 198, 205, 0.16);
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(10px);
    overflow-x: auto;
}

/* Live sind die Reiter <button> und erben dadurch die Knopfoptik aus
   ui.css (Verlauf, goldene Kante). Hier sind es Links - die Optik steht
   deshalb ausdruecklich da. */
.rh-base-tab {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 8px;
    min-height: 56px;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid rgba(228, 82, 66, 0.24);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(45, 49, 54, 0.96), rgba(13, 15, 18, 0.98));
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    color: rgba(243, 248, 255, 0.94);
    font: 700 13.33px 'Rajdhani', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: left;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: transform 0.14s, border-color 0.14s, box-shadow 0.14s, filter 0.14s;
}

.rh-base-tab:hover {
    border-color: rgba(194, 199, 205, 0.38);
    color: #fff;
    text-decoration: none;
}

.rh-base-tab.active {
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06),
                inset 0 -2px 0 rgba(208, 211, 216, 0.55),
                0 10px 26px rgba(0, 0, 0, 0.3);
}

.rh-base-tab span {
    grid-row: 1 / 3;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(182, 187, 195, 0.18);
    border-radius: 9px;
    background: rgba(182, 187, 195, 0.09);
    color: rgb(212, 215, 220);
    font-size: 14.4px;
    font-weight: 900;
}

.rh-base-tab.active span {
    border-color: transparent;
    background: linear-gradient(135deg, rgba(200, 204, 210, 0.92), rgba(228, 82, 66, 0.76));
    color: rgb(11, 13, 15);
}

.rh-base-tab strong,
.rh-base-tab small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rh-base-tab strong {
    color: rgb(247, 253, 255);
    font: 900 12.48px 'Orbitron', monospace;
    letter-spacing: 0.936px;
}

.rh-base-tab small {
    color: rgba(203, 207, 212, 0.72);
    font: 11.04px 'Courier New', monospace;
    letter-spacing: 0.33px;
}

/* --- Die Karte ---------------------------------------------------- */

.rh-building-card,
.rh-research-card {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    box-sizing: border-box;
    min-width: 0;
    padding: 13px;
    border: 1px solid rgba(195, 199, 206, 0.18);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(22, 26, 30, 0.96), rgba(11, 12, 14, 0.98));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.043), 0 14px 28px rgba(0, 0, 0, 0.26);
    color: rgb(237, 245, 255);
    overflow: hidden;
    backdrop-filter: blur(10px);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.3s;
}

.rh-research-card {
    border-color: rgba(193, 197, 204, 0.18);
    background:
        radial-gradient(circle at 10% 0%, rgba(183, 189, 196, 0.075), transparent 42%),
        linear-gradient(180deg, rgba(22, 25, 29, 0.965), rgba(11, 12, 14, 0.99));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.043), 0 14px 28px rgba(0, 0, 0, 0.25);
}

.rh-building-card::before,
.rh-research-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(205, 209, 214, 0.45), rgba(251, 103, 86, 0.28), transparent);
    opacity: 0.72;
    pointer-events: none;
    z-index: 2;
}

.rh-building-card:hover,
.rh-research-card:hover {
    border-color: rgba(205, 209, 214, 0.28);
    transform: translateY(-1px);
}

/* Das Bild */
.rh-building-media,
.rh-research-media {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    box-sizing: border-box;
    min-height: 146px;
    margin: 0 0 15px;
    padding: 10px;
    border: 1px solid rgba(195, 199, 206, 0.14);
    border-radius: 14px;
    background-color: #000;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.024), inset 0 -46px 52px rgba(0, 0, 0, 0.44);
    overflow: hidden;
}

.rh-research-media {
    min-height: 148px;
    border-color: rgba(193, 197, 204, 0.14);
    box-shadow: inset 0 -50px 54px rgba(0, 0, 0, 0.52), inset 0 0 0 1px rgba(255, 255, 255, 0.024);
}

.rh-building-media::after,
.rh-research-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(205, 209, 214, 0.08), transparent 34%, rgba(251, 103, 86, 0.067)),
        linear-gradient(0deg, rgba(0, 0, 0, 0.52), transparent 54%);
    pointer-events: none;
}

.rh-card-code,
.rh-card-level {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: 62%;
    padding: 5px 8px;
    border: 1px solid rgba(205, 209, 214, 0.18);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    color: rgba(242, 243, 244, 0.84);
    font: 900 10.56px/12px 'Orbitron', monospace;
    letter-spacing: 1px;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rh-card-level {
    border-color: rgba(251, 103, 86, 0.24);
    color: rgba(253, 177, 168, 0.92);
}

/* Live liegen beide Schildchen der Forschungskarte absolut unten
   rechts (.rh-research-media span) - das Stufenschild deckt das
   Codeschild zu. Zu sehen ist also nur "Stufe N", kleiner und blasser
   als bei den Gebaeuden. Uebernommen, wie es ist. */
.rh-research-media .rh-card-code,
.rh-research-media .rh-card-level {
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 4px 8px;
    border-color: rgba(193, 197, 204, 0.18);
    background: rgba(0, 0, 0, 0.58);
    color: rgba(240, 241, 242, 0.76);
    font-size: 9.92px;
    line-height: 11px;
    letter-spacing: 0.79px;
}

/* Name und Gruppe */
.rh-building-head,
.rh-research-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 14px 9px;
}

.rh-research-head { min-height: 72px; box-sizing: border-box; }

.rh-building-head > strong,
.rh-research-head > strong {
    min-width: 0;
    color: #f6fcff;
    font: 900 15.04px/18.8px 'Orbitron', monospace;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    overflow-wrap: anywhere;
    cursor: help;
}

.rh-research-head > strong {
    font-size: 14.72px;
    line-height: 17.37px;
    letter-spacing: 0.66px;
}

.rh-building-head small,
.rh-research-head small {
    flex: 0 0 auto;
    max-width: 44%;
    padding: 4px 7px;
    border: 1px solid rgba(205, 209, 214, 0.11);
    border-radius: 999px;
    background: rgba(205, 209, 214, 0.043);
    color: rgba(205, 209, 214, 0.72);
    font: 900 9.28px/11px 'Orbitron', monospace;
    letter-spacing: 1px;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Die Effektzeile */
.rh-building-effect,
.rh-research-effect {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    min-height: 56px;
    box-sizing: border-box;
    margin: 0 14px 10px;
    padding: 8px 10px;
    border: 1px solid rgba(93, 255, 177, 0.13);
    border-radius: 13px;
    background: rgba(93, 255, 177, 0.035);
    color: rgba(211, 255, 229, 0.84);
    font: 800 12.32px/15.4px 'Rajdhani', system-ui, sans-serif;
}

/* Die Kosten */
.rh-building-costs,
.rh-research-costs {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    margin-top: auto;
    padding: 10px 11px;
    border: 1px solid rgba(195, 199, 206, 0.1);
    border-radius: 13px;
    background: rgba(0, 0, 0, 0.18);
    box-shadow: inset 2px 2px 10px #000;
    color: rgba(238, 240, 241, 0.78);
    font: 12.48px/17.22px 'Courier New', monospace;
    text-align: left;
    overflow: hidden;
}

.rh-research-costs {
    border-color: rgba(193, 197, 204, 0.1);
    background: rgba(0, 0, 0, 0.2);
}

.rh-building-costs > strong {
    color: rgba(251, 98, 81, 0.82);
    font: 900 10.4px 'Orbitron', monospace;
    letter-spacing: 1.6px;
}

.rh-research-costs > strong {
    display: block;
    margin: 0 0 5px;
    color: rgba(203, 207, 212, 0.88);
    font: 900 10.24px 'Orbitron', monospace;
    letter-spacing: 1.6px;
}

/* Eine Zahl, die der Bestand nicht deckt - live inline
   color: var(--ui-danger-light). */
.rh-kosten-fehlt { color: var(--ui-danger-light); }

.rh-keine-kosten { color: #777; }

/* Der Hinweis unter den Kosten des Expansionsmoduls (render.js:
   prestigeCostHintFor, isExpansionModule). */
.rh-kosten-hinweis {
    color: #e34d3d;
    font-size: 0.78em;
}

/* Die Stromzeile */
.rh-building-power {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px dashed rgba(126, 222, 255, 0.11);
    color: rgba(221, 247, 255, 0.58);
    font: 800 12.48px 'Rajdhani', system-ui, sans-serif;
}

.rh-building-power strong {
    color: rgba(255, 183, 77, 0.82);
    font: 900 10.4px 'Courier New', monospace;
    letter-spacing: 1.6px;
}

.rh-building-power.positive strong { color: rgba(93, 255, 177, 0.94); }

.rh-building-power.negative strong {
    color: rgba(255, 112, 112, 0.96);
    text-shadow: 0 0 8px rgba(255, 68, 68, 0.28);
}

/* Der Knopf */
.tech-card-btn {
    position: relative;
    z-index: 1;
    display: block;
    box-sizing: border-box;
    width: calc(100% - 28px);
    min-height: 40px;
    margin: 0 14px 14px;
    padding: 10px;
    border: 1px solid rgba(228, 82, 66, 0.24);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(45, 49, 54, 0.96), rgba(13, 15, 18, 0.98));
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    color: rgba(243, 248, 255, 0.94);
    font: 600 14.4px/16.56px 'Rajdhani', sans-serif;
    letter-spacing: 0.792px;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    transition: 0.2s;
}

.tech-card-btn:hover:not(:disabled) {
    border-color: rgba(194, 199, 205, 0.38);
    color: #fff;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.30), 0 0 18px rgba(194, 199, 205, 0.07),
                inset 0 1px 0 rgba(255, 255, 255, 0.052);
}

.tech-card-btn:disabled {
    opacity: 0.52;
    filter: grayscale(0.45);
    cursor: not-allowed;
}

/* --- Das Labor (.rh-research-command) ----------------------------- */

.rh-research-command {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.72fr) minmax(230px, 0.58fr);
    gap: 13px;
    margin: 0 0 3px;
    padding: 14px;
    border: 1px solid rgba(190, 195, 201, 0.16);
    border-radius: 18px;
    background:
        radial-gradient(circle at 8% 0%, rgba(181, 187, 195, 0.105), transparent 42%),
        linear-gradient(180deg, rgba(21, 25, 28, 0.94), rgba(10, 12, 14, 0.98));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 16px 32px rgba(0, 0, 0, 0.24);
}

.rh-research-briefing,
.rh-research-slot-panel,
.rh-research-active-list {
    min-width: 0;
    padding: 12px 13px;
    border: 1px solid rgba(195, 199, 206, 0.106);
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.2);
}

.rh-research-briefing small,
.rh-research-active-list > span {
    display: block;
    margin: 0 0 5px;
    color: rgba(251, 98, 81, 0.84);
    font: 900 10.56px 'Orbitron', monospace;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.rh-research-briefing h3 {
    margin: 0 0 6px;
    color: rgb(242, 251, 255);
    font: 900 17.28px/20px 'Orbitron', monospace;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.rh-research-briefing p {
    margin: 0;
    color: rgba(233, 235, 237, 0.6);
    font-size: 14.08px;
    line-height: 20.42px;
}

.rh-research-slot-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: rgba(233, 235, 237, 0.74);
    font: 800 12px 'Orbitron', monospace;
    letter-spacing: 0.96px;
    text-transform: uppercase;
}

.rh-research-slot-top strong {
    color: rgba(208, 211, 216, 0.98);
    font-size: 15.2px;
    font-weight: 900;
}

.rh-research-slot-panel.is-full .rh-research-slot-top strong { color: var(--ui-danger-light); }

.rh-research-slot-bar {
    height: 7px;
    margin: 10px 0 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.055);
    overflow: hidden;
}

.rh-research-slot-bar i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(189, 194, 201, 0.32), rgba(203, 207, 213, 0.94));
    box-shadow: 0 0 14px rgba(193, 197, 204, 0.24);
}

.rh-research-slot-panel small {
    display: block;
    color: rgba(206, 209, 215, 0.64);
    font-size: 13.33px;
    line-height: 18px;
}

.rh-research-active-list {
    display: grid;
    align-content: start;
    gap: 7px;
}

.rh-research-active-list div,
.rh-research-active-list em {
    padding: 7px 9px;
    border: 1px solid rgba(195, 199, 206, 0.1);
    border-radius: 10px;
    background: rgba(7, 8, 9, 0.38);
    color: rgba(242, 243, 244, 0.82);
    font: 800 12.48px 'Rajdhani', system-ui, sans-serif;
    font-style: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rh-research-active-list div span {
    margin-left: 4px;
    color: rgba(196, 200, 206, 0.72);
    font-weight: 700;
}

@media (max-width: 980px) {
    .rh-research-command { grid-template-columns: minmax(0, 1fr); }
}

/* --- Die Uebersicht (.rh-base-command) ---------------------------- */

.rh-base-command {
    max-width: 100%;
    padding: 14px;
    border: 1px solid rgba(205, 209, 214, 0.16);
    border-radius: 18px;
    background:
        radial-gradient(circle at left top, rgba(156, 164, 174, 0.1), transparent 38%),
        linear-gradient(180deg, rgba(19, 22, 26, 0.86), rgba(10, 11, 13, 0.92));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 18px 34px rgba(0, 0, 0, 0.22);
}

.rh-base-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    margin: 4px 0 12px;
    padding: 14px;
    border: 1px solid rgba(186, 191, 198, 0.12);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(25, 28, 32, 0.88), rgba(12, 13, 15, 0.82));
}

.rh-base-hero > div:first-child {
    max-width: 980px;
    padding: 17px 18px;
    border: 1px solid rgba(200, 204, 210, 0.13);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(22, 25, 29, 0.94), rgba(11, 13, 15, 0.88));
}

.rh-base-hero small {
    color: rgba(200, 204, 210, 0.72);
    font: 800 10.88px 'Orbitron', monospace;
    letter-spacing: 1.7px;
    text-transform: uppercase;
}

.rh-base-hero h2 {
    position: relative;
    margin: 8px 0;
    padding: 0 0 11px 14px;
    border-bottom: 1px solid rgba(194, 199, 205, 0.14);
    color: rgba(239, 247, 255, 0.94);
    font: 900 15.36px/18px 'Orbitron', monospace;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    text-shadow: 0 0 18px rgba(194, 199, 205, 0.13);
}

/* Der Akzentbalken links und die Lichtkante rechts unten. */
.rh-base-hero h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    bottom: 11px;
    width: 3px;
    background: linear-gradient(180deg, rgb(194, 199, 205), rgba(228, 82, 66, 0.82));
    box-shadow: 0 0 14px rgba(194, 199, 205, 0.26);
}

.rh-base-hero h2::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: -1px;
    width: 34%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(172, 178, 187, 0.42));
}

.rh-base-hero p {
    max-width: 880px;
    margin: 0;
    color: rgba(242, 243, 244, 0.66);
    line-height: 1.45;
}

.rh-command-status-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: 10px;
    margin: 12px 0 14px;
}

.rh-command-status-card {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 76px;
    padding: 10px 11px;
    border: 1px solid rgba(205, 209, 214, 0.13);
    border-radius: 15px;
    background:
        radial-gradient(circle at 18% 0%, rgba(205, 209, 214, 0.08), transparent 52%),
        rgba(0, 0, 0, 0.25);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 12px 24px rgba(0, 0, 0, 0.16);
}

.rh-command-status-card > span {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(205, 209, 214, 0.18);
    border-radius: 12px;
    background: rgba(205, 209, 214, 0.055);
    color: rgba(205, 209, 214, 0.86);
    font-weight: 900;
}

.rh-command-status-card div,
.rh-command-status-card strong,
.rh-command-status-card em,
.rh-command-status-card small { min-width: 0; }

.rh-command-status-card small {
    display: block;
    color: rgba(205, 209, 214, 0.62);
    font: 900 9.6px 'Orbitron', monospace;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.rh-command-status-card strong {
    display: block;
    margin-top: 3px;
    color: rgba(246, 252, 255, 0.96);
    font: 900 16.32px 'Courier New', monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rh-command-status-card em {
    display: block;
    color: rgba(224, 227, 230, 0.6);
    font: 800 11.52px 'Rajdhani', system-ui, sans-serif;
    font-style: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rh-command-status-card.ready { border-color: rgba(93, 255, 177, 0.17); }
.rh-command-status-card.ready > span { color: rgba(93, 255, 177, 0.88); border-color: rgba(93, 255, 177, 0.2); background: rgba(93, 255, 177, 0.055); }
.rh-command-status-card.warn { border-color: rgba(255, 184, 82, 0.2); }
.rh-command-status-card.warn > span { color: rgba(255, 205, 132, 0.92); border-color: rgba(255, 184, 82, 0.22); background: rgba(255, 184, 82, 0.055); }
.rh-command-status-card.danger { border-color: rgba(255, 92, 92, 0.24); }
.rh-command-status-card.danger > span { color: rgba(255, 125, 125, 0.92); border-color: rgba(255, 92, 92, 0.24); background: rgba(255, 92, 92, 0.055); }
.rh-command-status-card.muted { opacity: 0.78; }

@media (max-width: 980px) {
    .rh-command-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Laufende Auftraege (.rh-ops-queue-card) */
.rh-ops-queue-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.rh-ops-queue-card {
    position: relative;
    border: 1px solid rgba(205, 209, 214, 0.16);
    border-radius: 18px;
    background:
        radial-gradient(circle at 12% 0%, rgba(182, 187, 195, 0.1), transparent 46%),
        linear-gradient(180deg, rgba(22, 25, 29, 0.92), rgba(12, 13, 15, 0.97));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 18px 34px rgba(0, 0, 0, 0.24);
    overflow: hidden;
}

.rh-ops-queue-card header {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    padding: 14px 15px 11px;
    border-bottom: 1px solid rgba(182, 188, 195, 0.1);
}

.rh-ops-queue-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(198, 202, 208, 0.16);
    border-radius: 13px;
    background: rgba(185, 190, 198, 0.08);
    box-shadow: inset 0 0 18px rgba(190, 195, 202, 0.06);
    color: rgba(209, 213, 218, 0.96);
    font-weight: 900;
}

.rh-ops-queue-card header small {
    display: block;
    margin: 0 0 2px;
    color: rgba(195, 199, 206, 0.7);
    font: 800 10.56px 'Rajdhani', system-ui, sans-serif;
    letter-spacing: 1.69px;
    text-transform: uppercase;
}

.rh-ops-queue-card header h3 {
    margin: 0;
    color: rgb(244, 251, 255);
    font: 900 15.36px/18px 'Orbitron', monospace;
    letter-spacing: 0.84px;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rh-ops-queue-card header em {
    display: grid;
    place-items: center;
    min-width: 30px;
    height: 26px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.043);
    color: rgb(246, 251, 255);
    font: 900 12.48px 'Orbitron', monospace;
    font-style: normal;
}

.rh-ops-queue-list {
    display: grid;
    gap: 8px;
    padding: 12px;
}

.rh-ops-queue-item {
    padding: 10px 10px 9px;
    border: 1px solid rgba(190, 195, 202, 0.12);
    border-radius: 13px;
    background: rgba(8, 9, 10, 0.42);
}

.rh-ops-queue-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.rh-ops-queue-name {
    min-width: 0;
    color: rgba(236, 248, 255, 0.96);
    font: 800 14.08px 'Rajdhani', system-ui, sans-serif;
    letter-spacing: 0.49px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rh-ops-queue-name span {
    margin-left: 4px;
    color: rgba(197, 202, 208, 0.72);
    font-weight: 700;
}

.rh-ops-queue-meta {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 7px;
}

.rh-ops-queue-meta strong {
    color: rgba(210, 214, 218, 0.96);
    font: 900 12.48px 'Orbitron', monospace;
    letter-spacing: 0.5px;
}

.rh-ops-queue-bar {
    height: 5px;
    margin: 8px 0 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.055);
    overflow: hidden;
}

.rh-ops-queue-bar i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(184, 189, 197, 0.2), rgba(196, 200, 206, 0.88));
}

.rh-ops-queue-card.build .rh-ops-queue-bar i {
    background: linear-gradient(90deg, rgba(250, 94, 77, 0.22), rgba(251, 131, 118, 0.9));
    box-shadow: 0 0 12px rgba(250, 96, 79, 0.22);
}

.rh-ops-queue-empty {
    display: grid;
    place-items: center;
    min-height: 58px;
    border: 1px dashed rgba(188, 193, 201, 0.16);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.024);
    color: rgba(204, 208, 213, 0.66);
    font: 700 13.12px 'Rajdhani', system-ui, sans-serif;
    letter-spacing: 0.59px;
    text-transform: uppercase;
}

/* --- Der Kommandant (game.html, .commander-container) ------------- */

.kopf-mitte {
    flex: 0 1 auto;
    display: flex;
    justify-content: center;
}

.commander-container {
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 8px 20px 8px 15px;
    border: 1px solid rgba(223, 225, 229, 0.085);
    border-top-color: rgba(194, 199, 205, 0.18);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(21, 24, 28, 0.915), rgba(9, 11, 13, 0.965));
    box-shadow: 0 18px 52px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.045),
                inset 0 0 0 1px rgba(255, 255, 255, 0.018);
    clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 15px 100%, 0 calc(100% - 15px));
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.9));
    backdrop-filter: blur(14px);
    overflow: hidden;
}

.commander-container::after {
    content: '';
    position: absolute;
    right: 10px;
    top: 10px;
    width: 34px;
    height: 10px;
    border-top: 1px solid rgba(194, 199, 205, 0.2);
    border-right: 1px solid rgba(194, 199, 205, 0.2);
    opacity: 0.48;
    pointer-events: none;
}

.commander-badge-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 0 4px var(--ui-highlight));
    animation: hq-pulse 2.5s infinite alternate ease-in-out;
    cursor: help;
}

.commander-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 50px;
    background: linear-gradient(180deg, #420802 0%, #111100 100%);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.commander-badge::before {
    content: '';
    position: absolute;
    width: 40px;
    height: 46px;
    background: #080808;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    z-index: 1;
}

.commander-badge span {
    position: relative;
    z-index: 2;
    color: var(--ui-highlight);
    font: 700 18.2px monospace;
    text-shadow: 0 0 10px var(--ui-highlight), 0 0 20px var(--ui-highlight);
}

.commander-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 15px;
    border-right: 1px dashed #333;
}

.commander-name {
    color: rgb(247, 251, 255);
    font: 700 19.2px 'Orbitron', sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0 0 16px rgba(172, 178, 187, 0.15);
    white-space: nowrap;
}

.commander-rank {
    margin-top: 2px;
    color: var(--ui-highlight);
    font-size: 12px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    opacity: 0.9;
}

/* Der Kommandorang auf dem Platz des Prestige-Abzeichens - in der
   Form des Legacy-Abzeichens (ui.css: .commander-path-display.legacy). */
.commander-path-display {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 62px;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.62));
    text-decoration: none;
}

.commander-path-display::before {
    content: '';
    position: absolute;
    inset: 6px;
    z-index: -2;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(184, 189, 197, 0.9), transparent 68%);
    opacity: 0.34;
    filter: blur(9px);
    pointer-events: none;
}

.commander-path-shape {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 58px;
    width: 58px;
    height: 62px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 24%),
        radial-gradient(circle at 50% 34%, #aab0b9 0%, #49505a 42%, #0d0f11 100%);
    clip-path: polygon(50% 0%, 90% 14%, 100% 46%, 82% 82%, 50% 100%, 18% 82%, 0% 46%, 10% 14%);
    box-shadow: 0 0 18px rgba(188, 193, 200, 0.3), inset 0 0 16px rgba(255, 255, 255, 0.07);
    font-family: 'Orbitron', monospace;
    isolation: isolate;
    overflow: hidden;
}

.commander-path-shape::before {
    content: '';
    position: absolute;
    inset: 4px;
    z-index: -1;
    background: linear-gradient(180deg, rgba(9, 10, 12, 0.98), rgba(0, 0, 0, 0.92));
    clip-path: polygon(50% 0%, 90% 14%, 100% 46%, 82% 82%, 50% 100%, 18% 82%, 0% 46%, 10% 14%);
}

.commander-path-level {
    position: relative;
    z-index: 2;
    color: #eaecee;
    font-size: 1.18em;
    font-weight: 900;
    text-shadow: 0 0 10px currentColor, 0 0 18px currentColor;
    transform: translateY(3px);
}

.commander-path-glyph {
    position: absolute;
    top: 6px;
    right: 9px;
    z-index: 3;
    color: #eaecee;
    font-size: 0.66em;
    line-height: 1;
    filter: drop-shadow(0 0 5px currentColor);
}

.commander-action {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.commander-cost {
    display: flex;
    gap: 6px;
    color: #666;
    font: 10.4px monospace;
    letter-spacing: 1px;
}

.commander-cost strong {
    color: #ddd;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
}

.commander-cost-note {
    max-width: 220px;
    color: var(--ui-danger-light);
    font-size: 11px;
    text-align: right;
}

.btn-hq-upgrade {
    min-height: 32px;
    padding: 6px 14px;
    border: 1px solid rgba(228, 82, 66, 0.24);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(45, 49, 54, 0.96), rgba(13, 15, 18, 0.98));
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    color: rgba(243, 248, 255, 0.94);
    font: 700 13.6px 'Rajdhani', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    transition: transform 0.14s, border-color 0.14s, box-shadow 0.14s, filter 0.14s;
}

.btn-hq-upgrade:hover:not(:disabled) {
    border-color: rgba(194, 199, 205, 0.38);
    color: #fff;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.30), 0 0 18px rgba(194, 199, 205, 0.07),
                inset 0 1px 0 rgba(255, 255, 255, 0.052);
}

.btn-hq-upgrade:disabled {
    opacity: 0.52;
    filter: grayscale(0.45);
    cursor: not-allowed;
}

.btn-hq-upgrade.researching {
    animation: pulse-research 2s infinite;
}

/* Rebuild-Anordnung (22.10.2026): links Level + Aufstieg, rechts
   Kommandorang + Name + Erfahrungsbalken. Prestige/Legacy entfallen. */
.commander-level-group {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-right: 16px;
    border-right: 1px dashed #333;
}

.commander-level-group .commander-action {
    align-items: flex-start;
}

.commander-rank-group {
    display: flex;
    align-items: center;
    gap: 10px;
    color: inherit;
    text-decoration: none;
}

.commander-rank-group .commander-path-display {
    width: 78px;
    height: 62px;
}

.commander-rank-group .commander-details {
    gap: 5px;
    padding-right: 0;
    border-right: 0;
}

/* Das Kommandorang-Abzeichen (Rangabzeichen.razor, 24.10.2026). */
.rh-rangabzeichen {
    display: block;
    width: 78px;
    height: 62px;
    overflow: visible;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 10px rgba(255, 61, 31, 0.18));
    transition: transform 0.18s ease, filter 0.18s ease;
}

.rh-rang-zahl {
    fill: #ffffff;
    font: 900 15px 'Orbitron', 'Rajdhani', monospace;
    letter-spacing: 0.02em;
}

.rh-rang-winkel {
    stroke: #3b4048;
}

.rh-rang-winkel.an {
    stroke: url(#rhRangRot);
    filter: url(#rhRangGlut);
}

.commander-rank-group:hover .rh-rangabzeichen,
.commander-rank-group:focus-visible .rh-rangabzeichen {
    transform: translateY(-1px) scale(1.04);
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.75)) drop-shadow(0 0 16px rgba(255, 61, 31, 0.38));
}

/* Rang 60: alles freigeschaltet - der Rand glüht. */
.rh-rangabzeichen.voll .rh-rang-feld {
    stroke-opacity: 1;
    stroke-width: 1.4;
    animation: rhRangVoll 2.8s ease-in-out infinite;
}

@keyframes rhRangVoll {
    50% { stroke: #ffb199; }
}

@media (prefers-reduced-motion: reduce) {
    .rh-rangabzeichen,
    .rh-rangabzeichen.voll .rh-rang-feld { transition: none; animation: none; }
}

.commander-xp {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 150px;
}

.commander-xp-track {
    position: relative;
    display: block;
    height: 6px;
    border: 1px solid rgba(194, 199, 205, 0.22);
    border-radius: 3px;
    background: rgba(8, 9, 10, 0.9);
    overflow: hidden;
}

.commander-xp-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #49505a, #aab0b9);
    box-shadow: 0 0 8px rgba(170, 176, 185, 0.55);
    transition: width 0.4s ease;
}

.commander-xp-text {
    color: #bfc4ca;
    font: 10.4px monospace;
    letter-spacing: 1px;
    white-space: nowrap;
}

@media (max-width: 1100px) {
    .commander-details { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .commander-badge-wrapper,
    .btn-hq-upgrade.researching { animation: none; }
}

/* --- Abbrechen: der Knopf am Auftrag und die Rueckfrage -----------
   Gemessen am Original (showCustomConfirm in ui.js, .rh-confirm-*).
   Der ✕ ist live ein gewoehnlicher Knopf: die rote Fassung aus
   modules.css verliert dort gegen die allgemeine Knopfregel. */

.rh-ops-queue-cancel {
    min-height: 32px;
    width: 24px;
    padding: 1px 6px;
    border: 1px solid rgba(228, 82, 66, 0.24);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(45, 49, 54, 0.96), rgba(13, 15, 18, 0.98));
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    color: rgba(243, 248, 255, 0.94);
    font: 900 13.33px/13.33px 'Rajdhani', sans-serif;
    cursor: pointer;
}

.rh-ops-queue-cancel:hover {
    border-color: rgba(194, 199, 205, 0.38);
    color: #fff;
}

.rh-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 22000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(circle at 50% 22%, rgba(194, 199, 205, 0.13), transparent 35%),
        radial-gradient(circle at 50% 90%, rgba(255, 77, 96, 0.08), transparent 42%),
        rgba(5, 5, 6, 0.88);
    backdrop-filter: blur(13px) saturate(1.18);
    outline: none;
}

.rh-confirm-box {
    position: relative;
    width: 440px;
    max-width: 100%;
    padding: 26px;
    border: 1px solid rgba(194, 199, 205, 0.24);
    border-top-color: rgba(218, 221, 225, 0.45);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(19, 22, 25, 0.98), rgba(7, 8, 10, 0.99));
    box-shadow: 0 34px 82px rgba(0, 0, 0, 0.66), 0 0 42px rgba(194, 199, 205, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.06);
    color: rgba(241, 242, 244, 0.94);
    text-align: left;
    overflow: hidden;
}

.rh-confirm-box::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(194, 199, 205, 0.82), rgba(255, 77, 96, 0.42), transparent);
    opacity: 0.9;
}

.rh-confirm-head {
    display: grid;
    gap: 7px;
    margin: 0 0 18px;
}

.rh-confirm-kicker {
    color: rgba(194, 199, 205, 0.7);
    font: 900 10.56px 'Orbitron', sans-serif;
    letter-spacing: 2.32px;
    text-transform: uppercase;
}

.rh-confirm-head strong {
    color: rgba(244, 250, 255, 0.98);
    font: 900 22.72px 'Orbitron', sans-serif;
    letter-spacing: 1.82px;
    text-transform: uppercase;
    text-shadow: 0 0 18px rgba(194, 199, 205, 0.18);
}

/* pre-wrap: der Satz hat einen Zeilenumbruch, wie live. */
.rh-confirm-message {
    margin: 0 0 22px;
    padding: 16px;
    border: 1px solid rgba(223, 225, 229, 0.11);
    border-radius: 14px;
    background: rgba(223, 225, 229, 0.043);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
    color: rgba(225, 228, 231, 0.88);
    line-height: 24.8px;
    white-space: pre-wrap;
}

.rh-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.rh-confirm-btn {
    min-width: 142px;
    min-height: 32px;
    padding: 11px 14px;
    border: 1px solid rgba(228, 82, 66, 0.24);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(45, 49, 54, 0.96), rgba(13, 15, 18, 0.98));
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    color: rgba(243, 248, 255, 0.94);
    font: 700 12.48px 'Rajdhani', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
}

.rh-confirm-btn:hover {
    border-color: rgba(194, 199, 205, 0.38);
    color: #fff;
}

/* ===================================================================
   Militaerkommando - gemessen am Original (render.js:
   renderMilitaryCommandOverview, renderMilitaryTabs, die
   Ausbildungsseiten und .rh-unit-card), scratchpad/karten/mache_mil.py.
   =================================================================== */

.rh-action-grid > .rh-military-command,
.rh-action-grid > .rh-military-training {
    grid-column: 1 / -1;
}

/* Beide Reiterleisten blenden an den Raendern aus - live eine Maske
   auf .rh-base-tabs und .rh-military-tabs. */
.rh-base-tabs,
.rh-military-tabs {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}

.rh-military-tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: 10px;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: -2px 0 14px;
    padding: 8px 8px 3px;
    border: 1px solid rgba(193, 198, 205, 0.16);
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(10px);
    overflow-x: auto;
}

/* Die Reiter selbst sehen aus wie die der Basis - nur das aktive
   Zeichen laeuft andersherum: Gold nach Cyan. */
.rh-military-tab {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 8px;
    min-height: 56px;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid rgba(228, 82, 66, 0.24);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(45, 49, 54, 0.96), rgba(13, 15, 18, 0.98));
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    color: rgba(243, 248, 255, 0.94);
    font: 700 13.33px 'Rajdhani', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: left;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: transform 0.14s, border-color 0.14s, box-shadow 0.14s, filter 0.14s;
}

.rh-military-tab:hover {
    border-color: rgba(194, 199, 205, 0.38);
    color: #fff;
    text-decoration: none;
}

.rh-military-tab.active {
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06),
                inset 0 -2px 0 rgba(208, 211, 216, 0.55),
                0 10px 26px rgba(0, 0, 0, 0.3);
}

.rh-military-tab span {
    grid-row: 1 / 3;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(182, 187, 195, 0.18);
    border-radius: 9px;
    background: rgba(182, 187, 195, 0.09);
    color: rgb(212, 215, 220);
    font-size: 14.4px;
    font-weight: 900;
}

.rh-military-tab.active span {
    border-color: transparent;
    background: linear-gradient(135deg, rgba(251, 103, 86, 0.95), rgba(157, 164, 175, 0.74));
    color: rgb(11, 13, 15);
}

.rh-military-tab strong,
.rh-military-tab small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rh-military-tab strong {
    color: rgb(247, 253, 255);
    font: 900 12.48px 'Orbitron', monospace;
    letter-spacing: 0.936px;
}

.rh-military-tab small {
    color: rgba(203, 207, 212, 0.72);
    font: 11.04px 'Courier New', monospace;
    letter-spacing: 0.33px;
}

/* --- Kommando und Ausbildungsrahmen ------------------------------- */

.rh-military-command,
.rh-military-training {
    max-width: 100%;
    padding: 14px;
    border: 1px solid rgba(205, 209, 214, 0.16);
    border-radius: 18px;
    background:
        radial-gradient(circle at 10% 0%, rgba(255, 94, 88, 0.055), transparent 38%),
        radial-gradient(circle at 90% 0%, rgba(183, 189, 196, 0.067), transparent 38%),
        linear-gradient(180deg, rgba(21, 25, 28, 0.95), rgba(10, 12, 14, 0.984));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 18px 34px rgba(0, 0, 0, 0.22);
}

.rh-military-hero,
.rh-military-training-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.78fr);
    align-items: stretch;
    gap: 14px;
    padding: 14px;
    border: 1px solid rgba(186, 191, 198, 0.12);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(25, 28, 32, 0.88), rgba(12, 13, 15, 0.82));
}

.rh-military-training-head {
    grid-template-columns: 58px minmax(0, 1fr) minmax(220px, 0.55fr);
    border-color: rgba(193, 197, 204, 0.13);
    background: linear-gradient(135deg, rgba(24, 28, 32, 0.94), rgba(12, 13, 15, 0.92));
}

.rh-military-hero > div:first-child,
.rh-military-training-head > div:nth-child(2) {
    padding: 14px;
    border: 1px solid rgba(157, 164, 175, 0.11);
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.2);
}

.rh-military-hero small,
.rh-military-training-head small {
    display: block;
    margin: 0 0 5px;
    color: rgba(251, 103, 86, 0.86);
    font: 900 10.88px 'Orbitron', monospace;
    letter-spacing: 2.2px;
    text-transform: uppercase;
}

.rh-military-hero h2,
.rh-military-training-head h2 {
    position: relative;
    margin: 0 0 6px;
    padding: 0 0 11px 14px;
    border-bottom: 1px solid rgba(194, 199, 205, 0.14);
    color: rgba(239, 247, 255, 0.94);
    font: 900 15.36px/18px 'Orbitron', monospace;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    text-shadow: 0 0 18px rgba(194, 199, 205, 0.13);
}

.rh-military-hero h2::before,
.rh-military-training-head h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    bottom: 11px;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgb(194, 199, 205), rgba(228, 82, 66, 0.82));
    box-shadow: 0 0 14px rgba(194, 199, 205, 0.26);
}

.rh-military-hero h2::after,
.rh-military-training-head h2::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: -1px;
    width: 34%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(172, 178, 187, 0.42));
}

.rh-military-hero p,
.rh-military-training-head p {
    max-width: 780px;
    margin: 0;
    color: rgba(242, 243, 244, 0.56);
    line-height: 1.5;
}

.rh-military-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.rh-military-training-status {
    display: grid;
    grid-template-columns: minmax(150px, 210px);
    justify-content: end;
    gap: 10px;
}

.rh-military-training-icon {
    display: grid;
    place-items: center;
    border: 1px solid rgba(157, 164, 175, 0.16);
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.25);
    color: rgba(157, 164, 175, 0.82);
    font: 900 24.8px 'Orbitron', monospace;
}

.rh-military-stat {
    min-width: 0;
    padding: 13px 12px;
    border: 1px solid rgba(157, 164, 175, 0.13);
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.25);
}

.rh-military-stat small {
    display: block;
    margin: 0 0 5px;
    color: rgba(251, 103, 86, 0.74);
    font: 800 10.24px 'Orbitron', monospace;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rh-military-stat strong {
    display: block;
    color: rgb(247, 253, 255);
    font: 900 20px/24px 'Orbitron', monospace;
    letter-spacing: 1px;
    white-space: nowrap;
}

.rh-military-stat.warn strong { color: rgba(255, 184, 82, 0.92); }
.rh-military-stat.info strong { color: rgba(157, 164, 175, 0.82); }
.rh-military-stat.danger strong { color: var(--ui-danger-light); }

.rh-military-stat em {
    display: block;
    color: rgba(242, 243, 244, 0.48);
    font-style: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rh-military-cap-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 12px 0 0;
}

.rh-military-cap {
    padding: 11px;
    border: 1px solid rgba(157, 164, 175, 0.1);
    border-radius: 13px;
    background: rgba(0, 0, 0, 0.22);
}

.rh-military-training > .rh-military-cap { margin-top: 10px; }

.rh-military-cap span {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 9px;
}

.rh-military-cap span strong {
    color: rgba(242, 243, 244, 0.84);
    font: 900 10.88px/18px 'Orbitron', monospace;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.rh-military-cap span em {
    color: rgba(242, 243, 244, 0.52);
    font: 16px/18px 'Courier New', monospace;
    font-style: normal;
    white-space: nowrap;
}

.rh-military-cap-bar {
    height: 7px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.055);
    overflow: hidden;
}

.rh-military-cap-bar i {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, rgba(157, 164, 175, 0.86), rgba(251, 103, 86, 0.82));
    box-shadow: 0 0 12px rgba(157, 164, 175, 0.18);
}

.rh-military-queue-grid { grid-template-columns: minmax(280px, 1fr); }

.rh-ops-queue-card.military .rh-ops-queue-bar i {
    background: linear-gradient(90deg, rgba(255, 76, 88, 0.22), rgba(255, 132, 112, 0.88));
    box-shadow: 0 0 12px rgba(255, 90, 78, 0.22);
}

@media (max-width: 980px) {
    .rh-military-hero,
    .rh-military-training-head { grid-template-columns: minmax(0, 1fr); }
    .rh-military-cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Die Einheitenkarte ------------------------------------------- */

.rh-unit-card {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    min-width: 0;
    border: 1px solid rgba(205, 209, 214, 0.14);
    border-radius: 19px;
    background: linear-gradient(145deg, rgba(25, 29, 34, 0.92), rgba(9, 11, 13, 0.96));
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.04),
                inset 0 0 28px rgba(205, 209, 214, 0.02);
    color: rgb(237, 245, 255);
    overflow: hidden;
    backdrop-filter: blur(10px);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.3s;
}

.rh-unit-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(205, 209, 214, 0.45), rgba(251, 103, 86, 0.28), transparent);
    opacity: 0.72;
    pointer-events: none;
    z-index: 2;
}

.rh-unit-card:hover {
    border-color: rgba(205, 209, 214, 0.28);
    transform: translateY(-1px);
}

.rh-unit-media {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 10px;
    min-height: 148px;
    height: clamp(138px, 10vw, 166px);
    padding: 10px;
    border-bottom: 1px solid rgba(205, 209, 214, 0.12);
    background-color: #000;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: inset 0 -76px 70px rgba(0, 0, 0, 0.78), inset 0 0 36px rgba(0, 0, 0, 0.38);
}

.rh-unit-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.16) 50%, rgba(0, 0, 0, 0.68)),
        radial-gradient(circle at 82% 16%, rgba(205, 209, 214, 0.1), transparent 34%);
    pointer-events: none;
}

.rh-unit-stock {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    max-width: 88%;
    padding: 5px 9px;
    border: 1px solid rgba(205, 209, 214, 0.18);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.62);
    color: rgba(233, 249, 255, 0.82);
    font: 800 10.88px/12px 'Courier New', monospace;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rh-unit-head {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 13px 8px;
}

.rh-unit-head > div { min-width: 0; }

.rh-unit-head small {
    display: inline-block;
    max-width: 44%;
    margin: 0 0 4px;
    padding: 4px 7px;
    border: 1px solid rgba(205, 209, 214, 0.11);
    border-radius: 999px;
    background: rgba(205, 209, 214, 0.043);
    color: rgba(205, 209, 214, 0.6);
    font: 800 9.44px/11px 'Orbitron', monospace;
    letter-spacing: 1.7px;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rh-unit-head strong {
    display: block;
    color: rgb(247, 253, 255);
    font: 900 14.08px/16.61px 'Orbitron', monospace;
    letter-spacing: 0.75px;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: help;
}

.rh-unit-time {
    align-self: flex-start;
    padding: 5px 7px;
    border: 1px solid rgba(251, 103, 86, 0.2);
    border-radius: 9px;
    background: rgba(251, 103, 86, 0.055);
    color: rgba(252, 138, 125, 0.88);
    font: 900 10.72px/12px 'Courier New', monospace;
    white-space: nowrap;
}

.rh-unit-costs {
    position: relative;
    z-index: 1;
    margin: 0 12px 10px;
    padding: 10px;
    border: 1px solid rgba(205, 209, 214, 0.11);
    border-radius: 13px;
    background: rgba(0, 0, 0, 0.28);
    box-shadow: inset 2px 2px 10px #000;
    color: rgba(242, 243, 244, 0.72);
    font: 13.6px/20.4px 'Courier New', monospace;
    text-align: left;
    overflow: hidden;
}

.rh-unit-costs > strong {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 8px;
    color: rgba(251, 103, 86, 0.84);
    font: 900 9.6px 'Orbitron', monospace;
    letter-spacing: 1.7px;
}

.rh-unit-cost-chipset {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.rh-unit-cost-chipset > span {
    max-width: 100%;
    padding: 6px 7px;
    border: 1px solid rgba(205, 209, 214, 0.09);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.027);
    color: rgba(242, 243, 244, 0.74);
    font: 800 11.52px/14px 'Courier New', monospace;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rh-unit-total-cost {
    margin: 8px 0 0;
    padding: 8px 0 0;
    border-top: 1px solid rgba(205, 209, 214, 0.1);
}

.rh-unit-total-cost b {
    display: block;
    margin: 0 0 6px;
    color: rgba(242, 243, 244, 0.48);
    font: 900 9.6px 'Orbitron', monospace;
    letter-spacing: 1.3px;
}

.rh-unit-power {
    margin: 8px 0 0;
    padding: 7px 0 0;
    border-top: 1px solid rgba(255, 92, 92, 0.13);
    color: rgba(255, 185, 185, 0.72);
    font: 800 11.36px 'Courier New', monospace;
}

.rh-unit-power strong {
    color: rgba(255, 92, 92, 0.92);
    font-weight: 900;
}

.rh-unit-order-row {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 8px;
    margin-top: auto;
    padding: 0 12px 9px;
}

.rh-unit-qty {
    box-sizing: border-box;
    width: 100%;
    min-height: 38px;
    padding: 1px 2px;
    border: 1px solid rgba(205, 209, 214, 0.19);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.42);
    box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.28);
    color: rgb(247, 253, 255);
    font: 900 14.4px 'Courier New', monospace;
    text-align: center;
}

.rh-unit-action {
    min-height: 38px;
    padding: 9px 10px;
    border: 1px solid rgba(157, 164, 175, 0.26);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(205, 209, 214, 0.92), rgba(251, 103, 86, 0.86));
    box-shadow: 0 8px 16px rgba(157, 164, 175, 0.08);
    color: rgb(12, 13, 15);
    font: 900 11.52px/13.25px 'Orbitron', monospace;
    letter-spacing: 0.63px;
    text-transform: uppercase;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.rh-unit-action.blocked,
.rh-unit-action:disabled {
    border-color: rgba(255, 92, 92, 0.24);
    color: rgba(255, 92, 92, 0.82);
    opacity: 0.52;
    filter: grayscale(0.45);
    cursor: not-allowed;
}

.rh-unit-batches {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    padding: 0 12px 12px;
}

.rh-unit-batch-btn {
    min-height: 30px;
    padding: 6px 8px;
    border: 1px solid rgba(205, 209, 214, 0.14);
    border-radius: 10px;
    background: rgba(205, 209, 214, 0.043);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    color: rgba(242, 243, 244, 0.74);
    font: 900 10.88px 'Orbitron', monospace;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
}

.rh-unit-batch-btn.blocked,
.rh-unit-batch-btn:disabled {
    opacity: 0.42;
    filter: grayscale(0.45);
    cursor: not-allowed;
}

/* ===================================================================
   Nachrichtenzentrale - die Regeln des Originals, nicht nachgebaut.

   Herausgezogen aus base.css, ui.css, modules.css, system-menu.css und
   mobile-fix.css des Live-Spiels: jede Regel, deren Selektor die
   Berichtskonsole betrifft (rh-report*, report-*, rh-system-*,
   rh-combat-log*, #reportList ...), in der Reihenfolge der Dateien und
   samt Medienabfragen. Dazu die allgemeinen Regeln des Originals fuer
   button, h1-h4 und .view-section h2 - aber nur innerhalb der Konsole
   (:where(#view-reports, #rhReportInfoWindow), Spezifitaet null wie im
   Original), damit sie den Rest des Rebuilds nicht beruehren.

   Zwei Anpassungen an den Rebuild, beide oben im Block: das Original
   rechnet mit content-box (der Rebuild sonst mit border-box), und zwei
   Farbvariablen fehlten.

   Nachgemessen im Browser gegen das Original-Markup mit den
   Original-Stilen: keine Abweichung in Groesse, Schrift und Farbe.
   Erzeugt mit scratchpad/berichte_css/zieh.py.
   =================================================================== */
:root { --rh-elite-cyan: #c2c7cd; --rh-orange: #fa604f; }
:where(#view-reports, #rhReportInfoWindow), :where(#view-reports, #rhReportInfoWindow) :where(*:not(button, input)), :where(#view-reports, #rhReportInfoWindow) *::before, :where(#view-reports, #rhReportInfoWindow) *::after { box-sizing: content-box; }
:where(#view-reports, #rhReportInfoWindow) { font-family: Rajdhani, sans-serif; line-height: normal; color: rgb(237, 245, 255); }
:where(#view-reports, #rhReportInfoWindow) h2::before, :where(#view-reports, #rhReportInfoWindow) h2::after { content: none; }
:where(#view-reports, #rhReportInfoWindow) h1, :where(#view-reports, #rhReportInfoWindow) h2, :where(#view-reports, #rhReportInfoWindow) h3, :where(#view-reports, #rhReportInfoWindow) h4 { font-family: "Orbitron", sans-serif;
    letter-spacing: 2px; }
.view-section h2 { margin-top: 0;
    font-size: 1.05em;
    border-bottom: 1px solid rgba(250, 96, 79, 0.18);
    padding-bottom: 11px;
    margin-bottom: 16px;
    color: var(--ui-highlight);
    text-shadow: 0 0 14px rgba(250, 66, 45, 0.18);
    text-transform: uppercase; }
:where(#view-reports, #rhReportInfoWindow) h1, :where(#view-reports, #rhReportInfoWindow) h2, :where(#view-reports, #rhReportInfoWindow) h3, :where(#view-reports, #rhReportInfoWindow) h4 { text-transform: uppercase; }
.view-section h2 { position: relative;
    padding-left: 14px;
    border-bottom-color: rgba(250, 96, 79, 0.18) !important; }
.view-section h2::before { content: "";
    position: absolute;
    left: 0;
    top: 3px;
    bottom: 11px;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--rh-red), var(--rh-orange));
    box-shadow: 0 0 14px rgba(255, 78, 45, 0.42); }
.view-section h2 { font-size: 0.96rem !important;
    letter-spacing: 2.4px !important;
    color: #fdaca3 !important; }
.view-section h2::after { content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    width: 34%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(172, 178, 187, 0.42)); }
.view-section h2 { color: rgba(239, 247, 255, 0.94) !important;
    border-bottom-color: rgba(194, 199, 205, 0.14) !important;
    text-shadow: 0 0 18px rgba(194, 199, 205, 0.13) !important; }
.view-section h2::before { background: linear-gradient(180deg, var(--rh-elite-cyan), rgba(228, 82, 66, 0.82)) !important;
    box-shadow: 0 0 14px rgba(194, 199, 205, 0.26) !important; }
@media (max-width: 900px) { #view-reports { width: 100%;
        max-width: 500px;
        margin: 0 auto;
        padding: 10px;
        box-sizing: border-box; } }
@media (max-width: 900px) { #view-reports > div { display: flex;
            flex-direction: column;
            width: 100%;
            box-sizing: border-box; } }
@media (max-width: 900px) { #reportCategories { display: flex;
        flex-wrap: wrap;
        gap: 5px;
        margin-bottom: 15px;
        justify-content: center; } }
@media (max-width: 900px) { .report-cat { flex-grow: 1;
        text-align: center;
        border: 1px solid #333; } }
@media (max-width: 900px) { .report-cat.active { border: 1px solid var(--ui-color);
            border-left: 1px solid var(--ui-color); } }
@media (max-width: 900px) { #reportList { width: 100%;
        max-height: 30vh;
        overflow-y: auto;
        border: 1px solid rgba(0, 255, 0, 0.3);
        background: #1a1a1a;
        margin-bottom: 15px;
        padding: 5px;
        box-sizing: border-box;
        border-radius: 8px;
        box-shadow: inset 4px 4px 10px rgba(0,0,0,0.8); } }
@media (max-width: 900px) { #reportDetail { width: 100%;
        height: auto;
        min-height: 250px;
        border: 1px solid rgba(0, 255, 0, 0.3);
        background: #0f0f0f;
        padding: 15px;
        box-sizing: border-box;
        border-radius: 8px;
        box-shadow: inset 4px 4px 10px rgba(0,0,0,0.8); } }
@media (max-width: 900px) { #reportDetail, #reportDetail div, #reportDetail p, #reportDetail pre { white-space: pre-wrap;
            word-wrap: break-word;
            word-break: break-word;
            overflow-wrap: break-word;
            max-width: 100%; } }
.v-menu-btn.reports-menu-live, button.reports-menu-live { position: relative; }
.v-menu-btn.reports-menu-live::after, button.reports-menu-live::after { content: attr(data-report-count);
    position: absolute;
    top: 5px;
    right: 7px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(252, 136, 123, 0.55);
    background: #fb7d6f;
    color: #111;
    font-size: 0.68rem;
    line-height: 1;
    font-family: monospace;
    font-weight: 900; }
.v-menu-btn.system-terminal-entry.reports-menu-live::after, .v-menu-btn[data-tutorial="menu-reports"].reports-menu-live::after { content: none !important;
    display: none !important; }
:where(#view-reports, #rhReportInfoWindow) button, :where(#view-reports, #rhReportInfoWindow) input { font-family: "Rajdhani", sans-serif; }
:where(#view-reports, #rhReportInfoWindow) input { border-radius: 10px !important;
    border: 1px solid rgba(250, 96, 79, 0.24) !important;
    background: linear-gradient(180deg, rgba(26, 30, 35, 0.98), rgba(9, 11, 13, 0.99)) !important;
    color: #f2f7ff !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.035), 0 8px 22px rgba(0,0,0,0.28) !important; }
:where(#view-reports, #rhReportInfoWindow) input:focus { outline: none !important;
    border-color: rgba(172, 178, 187, 0.56) !important;
    box-shadow: 0 0 0 2px rgba(172, 178, 187, 0.10), 0 0 20px rgba(172, 178, 187, 0.14) !important; }
:where(#view-reports, #rhReportInfoWindow) button, :where(#view-reports, #rhReportInfoWindow) button[type="button"], :where(#view-reports, #rhReportInfoWindow) input[type="button"], :where(#view-reports, #rhReportInfoWindow) input[type="submit"] { border-radius: 10px !important;
    border: 1px solid rgba(250, 96, 79, 0.26) !important;
    background:
        linear-gradient(180deg, rgba(255, 78, 45, 0.20), rgba(90, 18, 10, 0.24)),
        linear-gradient(180deg, rgba(32, 35, 40, 0.96), rgba(11, 12, 14, 0.98)) !important;
    color: #fff !important;
    font-family: "Rajdhani", sans-serif !important;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 10px 24px rgba(0,0,0,0.30), inset 0 0 0 1px rgba(255,255,255,0.035) !important;
    transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease, filter 0.14s ease; }
:where(#view-reports, #rhReportInfoWindow) button:hover, :where(#view-reports, #rhReportInfoWindow) button[type="button"]:hover, :where(#view-reports, #rhReportInfoWindow) input[type="button"]:hover, :where(#view-reports, #rhReportInfoWindow) input[type="submit"]:hover { transform: translateY(-1px);
    border-color: rgba(250, 96, 79, 0.52) !important;
    box-shadow: 0 14px 28px rgba(0,0,0,0.36), 0 0 22px rgba(255,78,45,0.12) !important; }
:where(#view-reports, #rhReportInfoWindow) button:disabled { opacity: 0.52 !important;
    filter: grayscale(0.45);
    cursor: not-allowed !important; }
.report-item { border-radius: 10px !important;
    background: rgba(9, 10, 12, 0.58) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.025), 0 10px 22px rgba(0,0,0,0.22) !important; }
.report-title { color: #f1f7ff !important; }
:where(#view-reports, #rhReportInfoWindow) button, :where(#view-reports, #rhReportInfoWindow) button[type="button"], :where(#view-reports, #rhReportInfoWindow) input[type="button"], :where(#view-reports, #rhReportInfoWindow) input[type="submit"] { min-height: 32px; }
:where(#view-reports, #rhReportInfoWindow) button, :where(#view-reports, #rhReportInfoWindow) button[type="button"], :where(#view-reports, #rhReportInfoWindow) input[type="button"], :where(#view-reports, #rhReportInfoWindow) input[type="submit"] { border-radius: 10px !important;
    border: 1px solid rgba(228, 82, 66, 0.24) !important;
    background:
        linear-gradient(180deg, rgba(45, 49, 54, 0.96), rgba(13, 15, 18, 0.98)) !important;
    color: rgba(243, 248, 255, 0.94) !important;
    box-shadow: 0 8px 18px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.04) !important; }
:where(#view-reports, #rhReportInfoWindow) button:hover, :where(#view-reports, #rhReportInfoWindow) button[type="button"]:hover, :where(#view-reports, #rhReportInfoWindow) input[type="button"]:hover, :where(#view-reports, #rhReportInfoWindow) input[type="submit"]:hover { border-color: rgba(194, 199, 205, 0.38) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 24px rgba(0,0,0,0.30), 0 0 18px rgba(194, 199, 205, 0.07), inset 0 1px 0 rgba(255,255,255,0.052) !important; }
:where(#view-reports, #rhReportInfoWindow) input { border-color: rgba(223, 225, 229, 0.12) !important;
    background: linear-gradient(180deg, rgba(16, 19, 22, 0.96), rgba(8, 9, 11, 0.98)) !important; }
.report-item { border-radius: 12px !important;
    border-color: rgba(223, 225, 229, 0.075) !important;
    background: linear-gradient(135deg, rgba(21, 24, 27, 0.70), rgba(8, 9, 11, 0.82)) !important; }
.system-unread-badge.nav-badge { min-width: 20px !important;
    height: 20px !important;
    padding: 0 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: rgba(228, 82, 66, 0.18) !important;
    border: 1px solid rgba(228, 82, 66, 0.45) !important;
    color: #fdaba2 !important;
    font-size: 0.68rem !important;
    font-weight: 900 !important;
    line-height: 1 !important; }
.report-cat { padding: 12px 15px;
    cursor: pointer;
    border-bottom: 1px solid #333;
    transition: all 0.2s;
    position: relative;
    font-weight: bold; }
.report-cat:hover { background: #222; }
.report-cat.active { background: #1a1a1a;
        color: var(--ui-color);
        box-shadow: inset 3px 0 0 var(--ui-color); }
.report-item { margin: 0;
    border-bottom: 1px solid #333;
    padding: 10px 15px;
    cursor: pointer;
    transition: background 0.2s; }
.report-item:hover { background-color: #222; }
#view-reports .panel { background: #0a0a0a;
    border: 2px solid #1a1a1a;
    box-shadow: inset 0 0 30px rgba(0,0,0,0.9), 0 10px 30px rgba(0,0,0,0.8);
    border-radius: 12px;
    overflow: hidden; }
#reportCategories { background: #050505; }
#reportCategories .report-cat { background: transparent;
        border-bottom: 1px dashed #222;
        color: gray;
        font-family: monospace;
        letter-spacing: 1px; }
#reportCategories .report-cat:hover { background: #111;
            color: #fff; }
#reportCategories .report-cat.active { background: #0a0a0a;
            border-right: 3px solid var(--ui-color);
            color: var(--ui-color);
            box-shadow: inset 10px 0 20px rgba(0,255,0,0.05);
            text-shadow: 0 0 5px var(--ui-glow); }
#reportList { background: rgba(5, 5, 5, 0.8);
    border-right: 1px solid #222; }
#reportList .report-item { background: transparent;
        border-bottom: 1px solid rgba(0, 255, 0, 0.1);
        padding: 15px;
        cursor: pointer;
        transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
        position: relative;
        font-family: "Orbitron", sans-serif;
        color: #aaa; }
#reportList .report-item:hover { background: linear-gradient(90deg, rgba(76, 84, 94, 0.15) 0%, transparent 100%);
            border-left: 4px solid var(--ui-info);
            color: #fff;
            padding-left: 20px;
            text-shadow: 0 0 8px var(--ui-info-dark-glow); }
.unread-badge { background: var(--ui-danger-light);
    color: #fff;
    border-radius: 2px;
    padding: 2px 8px;
    font-size: 0.85em;
    position: absolute;
    right: 10px;
    top: 12px;
    font-family: monospace;
    font-weight: bold;
    box-shadow: 0 0 10px var(--ui-danger-light);
    animation: pulse-danger 1.5s infinite; }
#reportDetail { width: 100%;
    height: auto;
    min-height: 250px;
    background: linear-gradient(180deg, rgba(9, 10, 11, 0.95) 0%, rgba(5, 5, 5, 0.98) 100%), repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(76, 84, 94, 0.03) 2px, rgba(76, 84, 94, 0.03) 4px), linear-gradient(90deg, rgba(76, 84, 94, 0.03) 1px, transparent 1px), linear-gradient(rgba(76, 84, 94, 0.03) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 30px 30px, 30px 30px;
    border: 1px solid rgba(76, 84, 94, 0.3);
    border-top: 3px solid var(--ui-info);
    padding: 25px;
    border-radius: 4px;
    box-sizing: border-box;
    box-shadow: inset 0 0 40px rgba(0,0,0,0.9), 0 0 20px rgba(76, 84, 94, 0.05);
    overflow: hidden;
    position: relative; }
#reportDetail, #reportDetail div, #reportDetail p, #reportDetail pre { font-family: "Courier New", monospace;
        color: #ddd;
        line-height: 1.6;
        text-shadow: 0 0 2px rgba(255, 255, 255, 0.2);
        white-space: pre-wrap;
        word-wrap: break-word;
        position: relative;
        z-index: 2; }
#reportDetail > * { animation: holo-boot 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) forwards; }
.report-detail { border-radius: 14px !important;
    background: linear-gradient(135deg, rgba(22, 26, 30, 0.90), rgba(9, 10, 11, 0.96)) !important;
    border: 1px solid rgba(255,255,255,0.075) !important;
    border-top-color: rgba(172, 178, 187, 0.24) !important;
    box-shadow: 0 18px 42px rgba(0,0,0,0.34), inset 0 0 0 1px rgba(255,255,255,0.028) !important; }
.report-detail { border-radius: 16px !important;
    background:
        linear-gradient(135deg, rgba(21, 24, 28, 0.88), rgba(9, 11, 13, 0.95)) !important;
    border: 1px solid rgba(223, 225, 229, 0.080) !important;
    border-top-color: rgba(194, 199, 205, 0.18) !important;
    box-shadow: 0 18px 48px rgba(0,0,0,0.36), inset 0 1px 0 rgba(255,255,255,0.035) !important; }
.rh-system-screen { width: min(1500px, calc(100vw - 72px));
    margin: 0 auto 22px !important;
    padding: 18px !important;
    border: 1px solid rgba(157, 164, 175, 0.16) !important;
    border-radius: 20px !important;
    background:
        radial-gradient(circle at 15% 0%, rgba(157, 164, 175, 0.08), transparent 34%),
        radial-gradient(circle at 90% 10%, rgba(250, 87, 69, 0.055), transparent 30%),
        linear-gradient(145deg, rgba(15, 17, 19, 0.96), rgba(5, 6, 7, 0.98)) !important;
    box-shadow: inset 0 0 36px rgba(157, 164, 175, 0.025), 0 18px 44px rgba(0, 0, 0, 0.45) !important; }
.rh-system-header { display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: stretch;
    margin: 0 0 18px;
    padding: 15px 16px;
    border: 1px solid rgba(157, 164, 175, 0.16);
    border-radius: 18px;
    background:
        linear-gradient(90deg, rgba(157, 164, 175, 0.075), rgba(250, 87, 69, 0.028), transparent),
        rgba(0, 0, 0, 0.28);
    box-shadow: inset 0 0 22px rgba(157, 164, 175, 0.035); }
.rh-system-header.economy { border-left: 3px solid rgba(93, 255, 177, 0.62); }
.rh-system-header.reports { border-left: 3px solid rgba(157, 164, 175, 0.66); }
.rh-system-title-block { min-width: 0; }
.rh-system-kicker { color: var(--ui-highlight, #fa5341);
    font: 900 0.68rem "Orbitron", monospace;
    letter-spacing: 2.7px;
    text-transform: uppercase; }
.rh-system-title-block h2 { margin: 5px 0 5px;
    color: #f6fdff;
    font: 900 clamp(1.25rem, 2vw, 1.85rem) "Orbitron", monospace;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    border: 0 !important;
    padding: 0 !important; }
.rh-system-title-block p { margin: 0;
    max-width: 780px;
    color: rgba(242, 243, 244, 0.62);
    line-height: 1.45; }
.rh-system-meta-grid { display: grid;
    grid-template-columns: repeat(3, minmax(82px, 1fr));
    gap: 8px;
    min-width: 285px; }
.rh-system-meta-grid span { display: grid;
    align-content: center;
    gap: 2px;
    padding: 9px 10px;
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.24); }
.rh-system-meta-grid strong { color: #f6fdff;
    font: 900 0.68rem "Orbitron", monospace;
    letter-spacing: 1.6px; }
.rh-system-meta-grid em { color: rgba(157, 164, 175, 0.72);
    font-style: normal;
    font-size: 0.76rem; }
.rh-muted-loader { color: rgba(242, 243, 244, 0.55) !important;
    text-align: center;
    margin: 36px auto !important;
    font-family: "Orbitron", monospace !important;
    letter-spacing: 1.2px; }
.rh-muted-loader.danger { color: var(--ui-danger-light) !important; }
.rh-system-screen table { width: 100%;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    overflow: hidden;
    border: 1px solid rgba(157, 164, 175, 0.11) !important;
    border-radius: 14px !important;
    background: rgba(0, 0, 0, 0.24) !important; }
.rh-system-screen table th { padding: 11px 12px !important;
    color: rgba(251, 112, 96, 0.92) !important;
    background: rgba(157, 164, 175, 0.065) !important;
    border-bottom: 1px solid rgba(157, 164, 175, 0.14) !important;
    font: 900 0.72rem "Orbitron", monospace !important;
    letter-spacing: 1.4px;
    text-transform: uppercase; }
.rh-system-screen table td { padding: 10px 12px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.045) !important;
    color: rgba(242, 243, 244, 0.8) !important; }
.rh-system-screen table tr:hover td { background: rgba(157, 164, 175, 0.045) !important; }
.rh-report-actions { display: flex;
    align-items: center;
    gap: 8px; }
.rh-report-actions button, .rh-report-action { border: 1px solid rgba(157, 164, 175, 0.22);
    border-radius: 10px;
    color: #eafdff;
    background: rgba(157, 164, 175, 0.075);
    padding: 9px 12px;
    font: 900 0.72rem "Orbitron", monospace;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer; }
.rh-report-actions button:hover, .rh-report-action:hover { border-color: rgba(251, 112, 96, 0.45);
    background: rgba(251, 112, 96, 0.09); }
.rh-report-actions .danger, .rh-report-action.danger { border-color: rgba(255, 92, 92, 0.32);
    color: #ffb7b7;
    background: rgba(255, 0, 0, 0.055); }
.rh-report-action.highlight { border-color: rgba(251, 112, 96, 0.42);
    color: #fdada4;
    background: rgba(251, 112, 96, 0.095); }
.rh-report-console { display: grid;
    grid-template-columns: 235px 360px minmax(0, 1fr);
    gap: 12px;
    min-height: 660px; }
.rh-report-column, .rh-report-detail { border: 1px solid rgba(157, 164, 175, 0.12);
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.24);
    overflow: hidden; }
.rh-column-label { padding: 11px 13px;
    color: rgba(251, 112, 96, 0.86);
    border-bottom: 1px solid rgba(157, 164, 175, 0.11);
    font: 900 0.68rem "Orbitron", monospace;
    text-transform: uppercase;
    letter-spacing: 2px; }
#reportCategories, #reportList { height: calc(660px - 43px);
    overflow: auto;
    background: transparent !important; }
#reportCategories .report-cat { width: 100%;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 9px;
    align-items: center;
    padding: 10px 11px;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.045);
    color: rgba(242, 243, 244, 0.68);
    background: transparent;
    text-align: left;
    cursor: pointer; }
.report-cat-icon { width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(157, 164, 175, 0.16);
    border-radius: 10px;
    color: var(--ui-highlight);
    background: rgba(0, 0, 0, 0.24); }
.report-cat-copy strong { display: block;
    color: #f6fdff;
    font: 900 0.78rem "Orbitron", monospace;
    text-transform: uppercase;
    letter-spacing: 0.8px; }
.report-cat-copy small { display: block;
    color: rgba(242, 243, 244, 0.42);
    margin-top: 2px;
    font-size: 0.74rem; }
#reportCategories .report-cat.active { background: linear-gradient(90deg, rgba(157, 164, 175, 0.10), transparent);
    box-shadow: inset 3px 0 0 var(--ui-info); }
#reportList .report-item { width: 100%;
    display: block;
    padding: 12px 13px;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.045);
    color: rgba(242, 243, 244, 0.62);
    background: transparent;
    text-align: left;
    cursor: pointer; }
#reportList .report-item.unread { color: #fff;
    background: rgba(157, 164, 175, 0.045);
    box-shadow: inset 3px 0 0 rgba(251, 112, 96, 0.72); }
.report-time { display: block;
    margin-bottom: 4px;
    color: rgba(157, 164, 175, 0.62);
    font-size: 0.72rem;
    font-family: "Courier New", monospace; }
.report-base-tag { display: inline-block;
    margin-right: 6px;
    color: var(--ui-info); }
.rh-report-detail { min-height: 660px;
    padding: 16px;
    overflow: auto; }
.rh-report-document { padding: 16px;
    border: 1px solid rgba(157, 164, 175, 0.14);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(157, 164, 175, 0.045), rgba(255, 255, 255, 0.015)), rgba(0, 0, 0, 0.30); }
.rh-report-document.combat { border-top: 3px solid rgba(255, 92, 92, 0.78); }
.rh-report-document.success { border-top: 3px solid rgba(93, 255, 177, 0.78); }
.rh-report-document.neutral { border-top: 3px solid rgba(157, 164, 175, 0.66); }
.rh-report-document-head { display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.065); }
.rh-report-decrypted { color: var(--ui-highlight);
    font: 900 0.66rem "Orbitron", monospace;
    letter-spacing: 2px; }
.rh-report-document h2 { margin: 5px 0 4px;
    border: 0 !important;
    padding: 0 !important;
    color: #f6fdff;
    font: 900 1.1rem "Orbitron", monospace;
    text-transform: uppercase; }
.rh-report-document small, .rh-report-location { color: rgba(242, 243, 244, 0.52);
    font-family: "Courier New", monospace; }
.rh-report-document-actions { display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end; }
.rh-report-body { padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    color: rgba(242, 243, 244, 0.82);
    background: rgba(0, 0, 0, 0.24);
    font: 0.95rem/1.62 "Courier New", monospace;
    white-space: pre-wrap; }
@media (max-width: 1200px) { .rh-system-header { grid-template-columns: 1fr; } }
@media (max-width: 1200px) { .rh-system-meta-grid { min-width: 0; } }
@media (max-width: 1200px) { .rh-report-console { grid-template-columns: 220px minmax(260px, 0.7fr) minmax(0, 1fr); } }
@media (max-width: 900px) { .rh-system-screen { width: calc(100vw - 24px);
        padding: 12px !important; } }
@media (max-width: 900px) { .rh-report-console { grid-template-columns: 1fr;
        min-height: auto; } }
@media (max-width: 900px) { #reportCategories, #reportList, .rh-report-detail { height: auto;
        min-height: 220px;
        max-height: 50vh; } }
#reportDetail.rh-report-detail, .rh-report-detail#reportDetail { width: auto !important;
    height: auto !important;
    background: rgba(0, 0, 0, 0.24) !important;
    border-top: 1px solid rgba(157, 164, 175, 0.12) !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    box-shadow: none !important; }
#reportDetail.rh-report-detail, #reportDetail.rh-report-detail div, #reportDetail.rh-report-detail p, #reportDetail.rh-report-detail pre, #reportDetail.rh-report-detail section, #reportDetail.rh-report-detail article { position: relative;
    z-index: auto;
    text-shadow: none;
    white-space: normal; }
#reportDetail.rh-report-detail .rh-report-body { white-space: pre-wrap !important; }
#reportDetail.rh-report-detail > * { animation: none !important; }
.rh-system-screen { isolation: isolate; }
.rh-system-header { overflow: hidden;
    border-radius: 18px !important;
    border: 1px solid rgba(193, 197, 204, 0.14) !important;
    background:
        radial-gradient(circle at 10% 0%, rgba(205, 209, 214, 0.075), transparent 32%),
        linear-gradient(135deg, rgba(18, 20, 23, 0.97), rgba(8, 9, 10, 0.985)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.035),
        0 18px 42px rgba(0, 0, 0, 0.34) !important; }
.rh-system-header::before, .rh-system-header::after { pointer-events: none !important; }
.rh-system-kicker, .rh-column-label { color: rgba(251, 103, 86, 0.86) !important;
    text-shadow: none !important; }
.rh-system-title h2, .rh-report-document h2 { letter-spacing: 1.05px !important; }
.rh-system-meta { border-radius: 13px !important;
    border: 1px solid rgba(193, 197, 204, 0.14) !important;
    background: rgba(0, 0, 0, 0.24) !important; }
.rh-report-console { grid-template-columns: 220px minmax(310px, 0.84fr) minmax(420px, 1.35fr) !important;
    gap: 14px !important;
    min-height: 640px !important; }
.rh-report-column, .rh-report-detail { border-radius: 17px !important;
    border-color: rgba(193, 197, 204, 0.13) !important;
    background:
        linear-gradient(180deg, rgba(193, 197, 204, 0.035), rgba(0,0,0,0.035)),
        rgba(0, 0, 0, 0.25) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.028) !important; }
#reportCategories .report-cat, #reportList .report-item { transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease; }
#reportCategories .report-cat:hover, #reportList .report-item:hover { background: rgba(193, 197, 204, 0.065) !important;
    transform: translateX(2px); }
#reportCategories .report-cat.active { background: linear-gradient(90deg, rgba(205, 209, 214, 0.13), rgba(205, 209, 214, 0.025)) !important;
    box-shadow: inset 3px 0 0 rgba(205, 209, 214, 0.82) !important; }
#reportList .report-item.unread { background: linear-gradient(90deg, rgba(251, 103, 86, 0.095), rgba(193, 197, 204, 0.035)) !important;
    box-shadow: inset 3px 0 0 rgba(251, 103, 86, 0.82) !important; }
.rh-report-document { border-radius: 17px !important;
    border-color: rgba(193, 197, 204, 0.14) !important;
    background:
        radial-gradient(circle at 13% 0%, rgba(205, 209, 214, 0.07), transparent 34%),
        linear-gradient(180deg, rgba(18, 21, 24, 0.96), rgba(6, 7, 9, 0.99)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.035), 0 12px 28px rgba(0,0,0,0.28) !important; }
.rh-report-document-head { align-items: center !important; }
.rh-report-body { border-radius: 14px !important;
    border-color: rgba(193, 197, 204, 0.10) !important;
    background: rgba(0, 0, 0, 0.26) !important;
    line-height: 1.58 !important; }
.rh-report-actions button, .rh-report-action { min-height: 36px !important;
    border-radius: 10px !important;
    white-space: nowrap !important; }
@media (max-width: 1280px) { .rh-report-console { grid-template-columns: 210px minmax(280px, 0.82fr) minmax(360px, 1.18fr) !important; } }
@media (max-width: 980px) { .rh-report-console { grid-template-columns: 1fr !important;
        min-height: auto !important; } }
@media (max-width: 980px) { #reportCategories, #reportList, .rh-report-detail { height: auto !important;
        max-height: 56vh !important; } }
.rh-system-screen { position: relative; }
.rh-system-tabs { display: grid;
    grid-template-columns: repeat(7, minmax(92px, 1fr));
    gap: 9px;
    margin: 0 0 15px;
    padding: 9px;
    border: 1px solid rgba(193, 197, 204, 0.15);
    border-radius: 17px;
    background:
        linear-gradient(180deg, rgba(24, 27, 31, 0.94), rgba(9, 10, 11, 0.96)),
        radial-gradient(circle at 12% 0%, rgba(157, 164, 175, 0.08), transparent 34%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.035),
        inset 0 -1px 0 rgba(0, 0, 0, 0.35),
        0 14px 32px rgba(0, 0, 0, 0.28); }
.rh-system-tab { min-width: 0;
    height: 58px;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    grid-template-rows: 1fr 1fr;
    align-items: center;
    column-gap: 8px;
    padding: 8px 10px;
    border: 1px solid rgba(193, 197, 204, 0.12);
    border-radius: 13px;
    color: rgba(239, 240, 242, 0.72);
    background: linear-gradient(135deg, rgba(17, 19, 22, 0.88), rgba(6, 7, 8, 0.92));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.018);
    cursor: pointer;
    text-align: left;
    transition: transform .14s ease, border-color .14s ease, background .14s ease, color .14s ease, box-shadow .14s ease; }
.rh-system-tab span { grid-row: 1 / 3;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    border: 1px solid rgba(157, 164, 175, 0.14);
    background: rgba(0, 0, 0, 0.26);
    color: rgba(200, 204, 210, 0.82);
    font: 900 0.86rem "Orbitron", monospace; }
.rh-system-tab strong, .rh-system-tab small { min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }
.rh-system-tab strong { align-self: end;
    color: rgba(245, 252, 255, 0.88);
    font: 900 0.76rem "Orbitron", monospace;
    letter-spacing: 0.9px;
    text-transform: uppercase; }
.rh-system-tab small { align-self: start;
    color: rgba(207, 211, 216, 0.58);
    font: 700 0.62rem "Rajdhani", sans-serif;
    letter-spacing: 0.8px;
    text-transform: uppercase; }
.rh-system-tab:hover { transform: translateY(-1px);
    border-color: rgba(157, 164, 175, 0.34);
    color: #f7fdff;
    background: linear-gradient(135deg, rgba(26, 30, 34, 0.94), rgba(9, 10, 12, 0.97));
    box-shadow: 0 0 18px rgba(157, 164, 175, 0.075), inset 0 0 18px rgba(157, 164, 175, 0.035); }
.rh-system-tab.active { border-color: rgba(251, 98, 81, 0.5);
    background:
        linear-gradient(135deg, rgba(250, 87, 69, 0.13), rgba(157, 164, 175, 0.065)),
        rgba(9, 11, 13, 0.98);
    box-shadow:
        0 0 22px rgba(250, 87, 69, 0.12),
        inset 0 0 20px rgba(157, 164, 175, 0.04); }
.rh-system-tab.active span { color: #0f1114;
    border-color: rgba(251, 115, 100, 0.72);
    background: linear-gradient(135deg, #fc988d, #fa4733);
    box-shadow: 0 0 16px rgba(250, 87, 69, 0.24); }
.rh-system-tab.active strong { color: #fee0dd; }
@media (max-width: 1280px) { .rh-system-tabs { grid-template-columns: repeat(4, minmax(112px, 1fr)); } }
@media (max-width: 820px) { .rh-system-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px) { .rh-system-tab { height: 54px; } }
#eventCenterDisplay .rh-muted-loader { display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 160px;
    padding: 22px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(205, 209, 214, 0.18) !important;
    background:
        linear-gradient(135deg, rgba(18, 21, 24, 0.92), rgba(9, 10, 11, 0.96)),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 56px) !important;
    color: rgba(229, 231, 234, 0.84) !important;
    letter-spacing: 0.03em; }
#view-reports[style*="display: block"] { min-width: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0 16px 20px !important;
    box-sizing: border-box !important; }
#view-reports .rh-system-screen { width: min(100%, 1500px) !important;
    max-width: 1500px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    min-width: 0 !important;
    box-sizing: border-box !important; }
.rh-system-tabs { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)) !important;
    align-items: stretch !important;
    min-width: 0 !important; }
.rh-system-tab { min-width: 0 !important; }
.rh-system-tab strong, .rh-system-tab small { max-width: 100% !important; }
@media (max-width: 720px) { #view-reports[style*="display: block"] { padding: 0 8px 16px !important; } }
@media (max-width: 720px) { .rh-system-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
        padding: 7px !important; } }
@media (max-width: 720px) { .rh-system-tab { height: 52px !important;
        grid-template-columns: 26px minmax(0, 1fr) !important;
        padding: 7px 8px !important; } }
.rh-system-tabs { min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(172, 178, 187, 0.25) rgba(255, 255, 255, 0.03); }
.rh-system-tabs::-webkit-scrollbar { height: 6px; }
.rh-system-tabs::-webkit-scrollbar-thumb { background: rgba(172, 178, 187, 0.22);
    border-radius: 999px; }
.rh-system-tab { min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important; }
.rh-system-tab strong, .rh-system-tab small { min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important; }
#view-reports .rh-reports-grid { min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important; }
@media (max-width: 760px) { .rh-system-tabs { grid-auto-flow: column !important;
        grid-auto-columns: minmax(142px, 176px) !important;
        grid-template-columns: none !important;
        padding-bottom: 8px !important;
        scroll-snap-type: x proximity; } }
@media (max-width: 760px) { .rh-system-tab { scroll-snap-align: start; } }
@media (max-width: 430px) { .rh-system-tabs { grid-auto-columns: minmax(132px, 78vw) !important; } }
#view-reports { min-width: 0 !important; }
.rh-system-tabs { grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)) !important;
    gap: 10px !important;
    align-items: stretch !important;
    overflow-x: auto !important;
    overflow-y: hidden !important; }
.rh-system-tab { min-width: 0 !important;
    height: auto !important;
    min-height: 56px !important; }
.rh-system-tab span { flex: 0 0 auto !important; }
.rh-system-screen { overflow-x: hidden !important; }
.rh-system-screen table { width: 100% !important;
    min-width: min(720px, 100%) !important; }
.rh-report-table, .rh-system-screen .table-shell { max-width: 100% !important;
    overflow-x: auto !important; }
@media (max-width: 900px) { .rh-system-tabs { grid-auto-flow: column !important;
        grid-auto-columns: minmax(150px, 190px) !important;
        grid-template-columns: none !important;
        padding-bottom: 8px !important;
        scroll-snap-type: x proximity; } }
@media (max-width: 900px) { .rh-system-header { grid-template-columns: 1fr !important; } }
#view-reports { min-width: 0 !important;
    box-sizing: border-box !important; }
.rh-system-screen { border-color: rgba(195, 199, 206, 0.14) !important;
    background:
        radial-gradient(circle at 8% 0%, rgba(199, 203, 209, 0.055), transparent 34%),
        radial-gradient(circle at 92% 8%, rgba(250, 94, 77, 0.035), transparent 26%),
        linear-gradient(180deg, rgba(15, 17, 19, 0.98), rgba(6, 7, 8, 0.99)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.035),
        0 22px 54px rgba(0, 0, 0, 0.34) !important; }
.rh-system-tabs { scrollbar-width: thin;
    scrollbar-color: rgba(195, 199, 206, 0.38) rgba(0, 0, 0, 0.16); }
.rh-system-tabs::-webkit-scrollbar, #reportCategories::-webkit-scrollbar, #reportList::-webkit-scrollbar, .rh-report-detail::-webkit-scrollbar, .rh-report-info-content::-webkit-scrollbar { height: 8px;
    width: 8px; }
.rh-system-tabs::-webkit-scrollbar-thumb, #reportCategories::-webkit-scrollbar-thumb, #reportList::-webkit-scrollbar-thumb, .rh-report-detail::-webkit-scrollbar-thumb, .rh-report-info-content::-webkit-scrollbar-thumb { border-radius: 999px;
    background: rgba(195, 199, 206, 0.34); }
.rh-system-tab { backdrop-filter: blur(10px); }
.rh-system-tab:hover { transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 10px 24px rgba(0, 0, 0, 0.25) !important; }
.rh-report-console { grid-template-columns: minmax(205px, 0.68fr) minmax(330px, 0.98fr) minmax(480px, 1.48fr) !important;
    min-height: clamp(620px, 72vh, 790px) !important;
    padding: 2px !important;
    border: 1px solid rgba(195, 199, 206, 0.10);
    border-radius: 20px;
    background:
        linear-gradient(90deg, rgba(195, 199, 206, 0.04), transparent 26%, rgba(251, 97, 80, 0.025)),
        rgba(0, 0, 0, 0.16); }
.rh-report-column, .rh-report-detail { min-width: 0 !important;
    border-radius: 18px !important;
    border-color: rgba(195, 199, 206, 0.14) !important;
    background:
        linear-gradient(180deg, rgba(24, 28, 32, 0.82), rgba(6, 7, 9, 0.92)),
        rgba(0, 0, 0, 0.34) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), inset 0 0 0 1px rgba(255, 255, 255, 0.012) !important; }
.rh-column-label { display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 43px;
    border-bottom-color: rgba(195, 199, 206, 0.12) !important;
    background: linear-gradient(90deg, rgba(195, 199, 206, 0.055), rgba(0, 0, 0, 0.08)); }
#reportCategories, #reportList { height: calc(clamp(620px, 72vh, 790px) - 48px) !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(195, 199, 206, 0.34) rgba(0, 0, 0, 0.18); }
#reportCategories .report-cat { position: relative;
    min-height: 68px;
    padding: 12px 12px !important;
    border-bottom-color: rgba(195, 199, 206, 0.065) !important;
    color: rgba(244, 245, 246, 0.72) !important; }
#reportCategories .report-cat::after, #reportList .report-item::after { content: "";
    position: absolute;
    inset: 7px auto 7px 0;
    width: 1px;
    background: transparent; }
#reportCategories .report-cat:hover, #reportCategories .report-cat.active { color: #f5fdff !important; }
#reportCategories .report-cat.active::after { background: rgba(195, 199, 206, 0.84);
    box-shadow: 0 0 12px rgba(195, 199, 206, 0.46); }
.report-cat-icon { width: 34px !important;
    height: 34px !important;
    color: rgba(208, 211, 216, 0.92) !important;
    border-color: rgba(195, 199, 206, 0.22) !important;
    background:
        radial-gradient(circle at 45% 20%, rgba(195, 199, 206, 0.18), transparent 54%),
        rgba(0, 0, 0, 0.26) !important; }
.report-cat-count, .unread-badge { min-width: 25px;
    height: 25px;
    padding: 0 7px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    border: 1px solid rgba(195, 199, 206, 0.24);
    color: rgba(243, 244, 245, 0.72);
    background: rgba(0, 0, 0, 0.28);
    font: 900 0.72rem "Orbitron", monospace; }
.unread-badge { border-color: rgba(251, 112, 96, 0.56) !important;
    color: #161000 !important;
    background: linear-gradient(180deg, #fca69d, #f05240) !important;
    box-shadow: 0 0 16px rgba(251, 103, 86, 0.22); }
#reportList .report-item { position: relative;
    display: grid !important;
    gap: 7px;
    padding: 13px 14px !important;
    border-bottom-color: rgba(195, 199, 206, 0.065) !important;
    color: rgba(244, 245, 246, 0.72) !important;
    background: transparent !important; }
#reportList .report-item.active, #reportList .report-item:hover { color: #f7fdff !important;
    background: linear-gradient(90deg, rgba(195, 199, 206, 0.10), rgba(195, 199, 206, 0.025)) !important; }
#reportList .report-item.active::after, #reportList .report-item.unread::after { background: rgba(251, 103, 86, 0.86);
    box-shadow: 0 0 12px rgba(251, 103, 86, 0.34); }
#reportList .report-item strong { display: block;
    color: #f6fdff;
    font: 900 0.88rem "Rajdhani", sans-serif;
    letter-spacing: 0.35px;
    line-height: 1.12;
    overflow-wrap: anywhere; }
#reportList .report-item small { display: -webkit-box;
    color: rgba(236, 238, 240, 0.50);
    font: 500 0.78rem/1.25 "Rajdhani", sans-serif;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; }
.report-item-topline { display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px; }
.report-time { margin: 0 !important;
    color: rgba(208, 211, 216, 0.68) !important;
    letter-spacing: 0.6px; }
.report-new-dot, .report-read-dot { flex: 0 0 auto;
    border-radius: 999px;
    padding: 3px 7px 2px;
    border: 1px solid rgba(195, 199, 206, 0.18);
    color: rgba(236, 238, 240, 0.54);
    background: rgba(0, 0, 0, 0.22);
    font: 900 0.61rem "Orbitron", monospace;
    letter-spacing: 0.8px; }
.report-new-dot { border-color: rgba(251, 103, 86, 0.48);
    color: #fc9e94;
    background: rgba(251, 103, 86, 0.10); }
.report-base-tag { margin-right: 7px !important;
    color: rgba(208, 211, 216, 0.90) !important; }
.rh-report-detail { min-height: clamp(620px, 72vh, 790px) !important;
    padding: 18px !important; }
.rh-report-document { position: relative;
    overflow: hidden;
    padding: 18px !important;
    border-radius: 20px !important;
    border-color: rgba(195, 199, 206, 0.16) !important; }
.rh-report-document::before { content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(195, 199, 206, 0.055), transparent 18%, transparent 82%, rgba(251, 103, 86, 0.035)),
        radial-gradient(circle at 4% 0%, rgba(195, 199, 206, 0.12), transparent 28%);
    opacity: 0.8; }
.rh-report-document > * { position: relative;
    z-index: 1; }
.rh-report-document.combat { border-top-color: rgba(255, 93, 93, 0.82) !important; }
.rh-report-document.espionage { border-top: 3px solid rgba(208, 211, 216, 0.76) !important; }
.rh-report-document.transport { border-top: 3px solid rgba(220, 223, 227, 0.76) !important; }
.rh-report-document.system { border-top: 3px solid rgba(251, 112, 96, 0.68) !important; }
.rh-report-document-head { display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start !important;
    gap: 16px !important;
    border-bottom-color: rgba(195, 199, 206, 0.12) !important; }
.rh-report-decrypted { color: rgba(251, 112, 96, 0.90) !important; }
.rh-report-document h2 { max-width: 100%;
    color: #f7fdff !important;
    font-size: clamp(1.04rem, 1.5vw, 1.34rem) !important;
    line-height: 1.12 !important;
    overflow-wrap: anywhere; }
.rh-report-document-actions { max-width: 100%; }
.rh-report-location { display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 12px;
    padding: 6px 10px;
    border: 1px solid rgba(195, 199, 206, 0.12);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.20); }
.rh-report-body { white-space: normal !important;
    padding: 16px !important;
    color: rgba(243, 244, 246, 0.82) !important;
    background:
        linear-gradient(180deg, rgba(195, 199, 206, 0.035), rgba(0, 0, 0, 0.06)),
        rgba(0, 0, 0, 0.28) !important; }
.rh-report-summary-grid { display: grid;
    grid-template-columns: repeat(auto-fit, minmax(142px, 1fr));
    gap: 9px;
    margin-bottom: 14px; }
.rh-report-summary-chip { min-width: 0;
    display: grid;
    gap: 3px;
    padding: 9px 10px;
    border: 1px solid rgba(195, 199, 206, 0.13);
    border-radius: 13px;
    background: rgba(0, 0, 0, 0.24); }
.rh-report-summary-chip small { color: rgba(236, 238, 240, 0.42);
    font: 900 0.62rem "Orbitron", monospace;
    text-transform: uppercase;
    letter-spacing: 1.25px; }
.rh-report-summary-chip strong { min-width: 0;
    color: #f7fdff;
    font: 800 0.86rem/1.2 "Rajdhani", sans-serif;
    overflow-wrap: anywhere; }
.rh-report-summary-chip.combat { border-color: rgba(255, 93, 93, 0.28); background: rgba(255, 93, 93, 0.065); }
.rh-report-summary-chip.intel { border-color: rgba(208, 211, 216, 0.28); background: rgba(208, 211, 216, 0.055); }
.rh-report-summary-chip.transport { border-color: rgba(220, 223, 227, 0.28); background: rgba(220, 223, 227, 0.055); }
.rh-report-summary-chip.loot, .rh-report-summary-chip.success { border-color: rgba(100, 255, 185, 0.24); background: rgba(100, 255, 185, 0.055); }
.rh-report-summary-chip.danger { border-color: rgba(255, 93, 93, 0.28); background: rgba(255, 93, 93, 0.055); }
.rh-report-summary-chip.coord { border-color: rgba(251, 112, 96, 0.24); background: rgba(251, 112, 96, 0.055); }
.rh-combat-log { display: grid;
    gap: 10px; }
.rh-combat-log-section { overflow: hidden;
    border: 1px solid rgba(195, 199, 206, 0.115);
    border-radius: 14px;
    background: rgba(6, 7, 8, 0.62); }
.rh-combat-log-section h3 { margin: 0 !important;
    padding: 9px 12px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(195, 199, 206, 0.09) !important;
    color: rgba(251, 112, 96, 0.90) !important;
    background: linear-gradient(90deg, rgba(195, 199, 206, 0.065), rgba(0, 0, 0, 0.06));
    font: 900 0.72rem "Orbitron", monospace !important;
    text-transform: uppercase;
    letter-spacing: 1.5px; }
.rh-combat-log-section.intel h3 { color: rgba(208, 211, 216, 0.92) !important; }
.rh-combat-log-section.result h3 { color: rgba(252, 145, 133, 0.94) !important; }
.rh-combat-log-section.units h3 { color: rgba(227, 229, 232, 0.94) !important; }
.rh-combat-log-section.round h3 { color: rgba(238, 248, 255, 0.76) !important; }
.rh-combat-log-lines { padding: 11px 12px 12px;
    color: rgba(243, 244, 246, 0.80);
    font: 500 0.9rem/1.52 "Rajdhani", sans-serif; }
.rh-combat-log-lines p { margin: 0 0 6px; }
.rh-combat-log-lines p:last-child { margin-bottom: 0; }
.rh-combat-log-lines ul { margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 4px; }
.rh-combat-log-lines li { padding: 5px 8px;
    border: 1px solid rgba(195, 199, 206, 0.08);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.18);
    color: rgba(243, 244, 246, 0.76); }
.rh-combat-log-lines blockquote { margin: 6px 0;
    padding: 8px 10px;
    border-left: 3px solid rgba(251, 112, 96, 0.62);
    border-radius: 0 10px 10px 0;
    background: rgba(251, 112, 96, 0.055);
    color: rgba(254, 205, 199, 0.88); }
.rh-report-keyline { display: grid;
    grid-template-columns: minmax(120px, 0.34fr) minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    padding: 7px 9px;
    border: 1px solid rgba(195, 199, 206, 0.08);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.18); }
.rh-report-keyline span { color: rgba(208, 211, 216, 0.72);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.7px; }
.rh-report-keyline strong { min-width: 0;
    color: rgba(247, 253, 255, 0.88);
    overflow-wrap: anywhere; }
.rh-report-preview-hint { margin-top: 12px;
    padding: 10px 12px;
    border: 1px dashed rgba(251, 112, 96, 0.28);
    border-radius: 12px;
    color: rgba(253, 182, 174, 0.82);
    background: rgba(251, 112, 96, 0.055);
    font: 700 0.82rem "Rajdhani", sans-serif; }
.rh-report-action.wide { width: 100%;
    justify-content: center;
    margin-top: 12px; }
.rh-report-info-window { position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 22px;
    background:
        radial-gradient(circle at 50% 0%, rgba(195, 199, 206, 0.12), transparent 42%),
        rgba(0, 0, 0, 0.84);
    backdrop-filter: blur(8px);
    overflow: auto; }
.rh-report-info-window.is-open { display: flex; }
body.rh-report-modal-open { overflow: hidden; }
.rh-report-info-card { width: min(1080px, 96vw);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(195, 199, 206, 0.18);
    border-radius: 20px;
    background:
        radial-gradient(circle at 10% 0%, rgba(195, 199, 206, 0.08), transparent 34%),
        linear-gradient(180deg, rgba(17, 20, 23, 0.98), rgba(6, 7, 8, 0.995));
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.04); }
.rh-report-info-head { display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(195, 199, 206, 0.13);
    background: rgba(0, 0, 0, 0.22); }
.rh-report-info-head span { display: block;
    margin-bottom: 3px;
    color: rgba(251, 112, 96, 0.86);
    font: 900 0.66rem "Orbitron", monospace;
    text-transform: uppercase;
    letter-spacing: 1.8px; }
.rh-report-info-head strong { display: block;
    min-width: 0;
    color: #f7fdff;
    font: 900 1.02rem "Orbitron", monospace;
    text-transform: uppercase;
    overflow-wrap: anywhere; }
.rh-report-info-head button { border: 1px solid rgba(255, 93, 93, 0.35);
    border-radius: 10px;
    color: #ffc0c0;
    background: rgba(255, 93, 93, 0.075);
    padding: 8px 12px;
    font: 900 0.72rem "Orbitron", monospace;
    text-transform: uppercase;
    cursor: pointer; }
.rh-report-info-content { padding: 16px;
    overflow: auto; }
@media (max-width: 1180px) { .rh-report-console { grid-template-columns: 210px minmax(300px, 0.96fr) minmax(0, 1.28fr) !important; } }
@media (max-width: 980px) { .rh-report-console { grid-template-columns: 1fr !important;
        min-height: auto !important; } }
@media (max-width: 980px) { #reportCategories, #reportList { height: auto !important;
        max-height: 260px !important; } }
@media (max-width: 980px) { .rh-report-detail { min-height: 360px !important; } }
@media (max-width: 980px) { .rh-report-document-head { grid-template-columns: 1fr !important; } }
@media (max-width: 980px) { .rh-report-document-actions { justify-content: flex-start !important; } }
@media (max-width: 560px) { .rh-report-console { border-radius: 15px;
        padding: 0 !important; } }
@media (max-width: 560px) { .rh-report-detail { padding: 10px !important; } }
@media (max-width: 560px) { .rh-report-document { padding: 13px !important;
        border-radius: 16px !important; } }
@media (max-width: 560px) { .rh-report-body { padding: 11px !important; } }
@media (max-width: 560px) { .rh-report-summary-grid, .rh-report-keyline { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .rh-report-info-window { padding: 10px; } }
@media (max-width: 560px) { .rh-report-info-card { width: 100%;
        max-height: 92vh;
        border-radius: 16px; } }
@media (max-width: 560px) { .rh-report-info-head { grid-template-columns: 1fr; } }
.rh-system-screen { box-sizing: border-box !important;
    min-width: 0 !important; }
.rh-system-screen::before { content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(120deg, rgba(255,255,255,0.035), transparent 18%, transparent 76%, rgba(205, 209, 214, 0.035)),
        radial-gradient(circle at 50% -10%, rgba(205, 209, 214, 0.08), transparent 34%);
    opacity: 0.78;
    z-index: -1; }
.rh-system-tabs { overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(205, 209, 214, 0.28) rgba(255,255,255,0.035); }
.rh-system-tab { min-width: 112px !important; }
.rh-system-header { min-width: 0 !important; }
.rh-system-title-block, .rh-system-title-block h2, .rh-system-title-block p { min-width: 0 !important;
    overflow-wrap: anywhere !important; }
.rh-system-meta-grid span { min-width: 0 !important;
    overflow: hidden !important; }
.rh-system-meta-grid strong, .rh-system-meta-grid em { min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important; }
@media (max-width: 980px) { .rh-system-tab { min-width: 132px !important; } }
@media (max-width: 980px) { .rh-system-meta-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        width: 100% !important; } }
@media (max-width: 560px) { .rh-system-meta-grid { grid-template-columns: 1fr !important; } }
.rh-report-actions button, .rh-report-action, .rh-system-tab, :where(#view-reports, #rhReportInfoWindow) button { -webkit-tap-highlight-color: transparent; }
.rh-report-actions button:focus-visible, .rh-report-action:focus-visible, .rh-system-tab:focus-visible, :where(#view-reports, #rhReportInfoWindow) button:focus-visible { outline: 2px solid rgba(205, 209, 214, 0.42) !important;
    outline-offset: 2px !important; }
.rh-report-info-card { border-radius: 20px !important;
    border-color: rgba(205, 209, 214, 0.18) !important;
    background:
        radial-gradient(circle at 12% 0%, rgba(205, 209, 214, 0.09), transparent 34%),
        linear-gradient(180deg, rgba(20, 23, 27, 0.96), rgba(9, 10, 11, 0.98)) !important;
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255,255,255,0.04) !important; }
.rh-report-table { border-collapse: separate !important;
    border-spacing: 0 6px !important; }
.rh-report-table tr { background: rgba(0, 0, 0, 0.18); }
.rh-report-table td { border-top: 1px solid rgba(205, 209, 214, 0.075) !important;
    border-bottom: 1px solid rgba(205, 209, 214, 0.075) !important; }
.rh-report-table td:first-child { border-left: 1px solid rgba(205, 209, 214, 0.075) !important;
    border-radius: 10px 0 0 10px; }
.rh-report-table td:last-child { border-right: 1px solid rgba(205, 209, 214, 0.075) !important;
    border-radius: 0 10px 10px 0; }
.rh-system-header, .rh-report-document, .rh-report-info-card { isolation: isolate; }
.rh-system-header::after { content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(120deg, rgba(255,255,255,0.035), transparent 22%, transparent 82%, rgba(205, 209, 214, 0.035));
    opacity: 0.72;
    z-index: 0; }
.rh-system-header > * { position: relative;
    z-index: 1; }
.rh-system-tabs { padding-bottom: 3px !important;
    mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%); }
.rh-system-tab { min-width: max-content; }
.rh-system-tab.active { box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        inset 0 -2px 0 rgba(208, 211, 216, 0.55),
        0 10px 26px rgba(0,0,0,0.30) !important; }
/* Rebuild: die Mindestbreiten (205 + 340 + 520 px) passten neben dem Menü
   erst ab ~1600 px Fenster - darunter lief der Lesebereich rechts aus dem Bild. */
.rh-report-console { grid-template-columns: minmax(230px, 0.62fr) minmax(240px, 0.9fr) minmax(0, 1.56fr) !important; }
#reportList .report-item.combat.unread::after, #reportList .report-item.combat.active::after { background: rgba(255, 116, 116, 0.90);
    box-shadow: 0 0 14px rgba(255, 93, 93, 0.32); }
#reportList .report-item.espionage.unread::after, #reportList .report-item.espionage.active::after { background: rgba(208, 211, 216, 0.88);
    box-shadow: 0 0 14px rgba(208, 211, 216, 0.28); }
#reportList .report-item.transport.unread::after, #reportList .report-item.transport.active::after { background: rgba(220, 223, 227, 0.88);
    box-shadow: 0 0 14px rgba(220, 223, 227, 0.26); }
.rh-report-summary-chip.round { border-color: rgba(227, 229, 232, 0.26); background: rgba(227, 229, 232, 0.055); }
.rh-report-summary-chip.target { border-color: rgba(208, 211, 216, 0.22); background: rgba(208, 211, 216, 0.045); }
.rh-report-summary-chip.neutral { border-color: rgba(236, 238, 240, 0.16); background: rgba(236, 238, 240, 0.035); }
.rh-combat-log-section.round { border-color: rgba(208, 211, 216, 0.13);
    background:
        linear-gradient(90deg, rgba(208, 211, 216, 0.035), transparent 46%),
        rgba(6, 7, 8, 0.68); }
.rh-combat-log-section.round h3::before { content: "◈";
    margin-right: 8px;
    color: rgba(208, 211, 216, 0.86); }
.rh-combat-log-section.result { border-color: rgba(252, 147, 135, 0.18); }
.rh-report-alert-line, .rh-report-omitted-line { padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(251, 112, 96, 0.18);
    background: rgba(251, 112, 96, 0.055);
    color: rgba(253, 182, 174, 0.90);
    font-weight: 800; }
.rh-report-alert-line { border-color: rgba(255, 93, 93, 0.24);
    background: rgba(255, 93, 93, 0.055);
    color: rgba(255, 196, 196, 0.92); }
.rh-report-omitted-line { text-align: center;
    letter-spacing: 0.2px; }
.rh-report-contact-line { border-color: rgba(208, 211, 216, 0.14);
    background: rgba(208, 211, 216, 0.04); }
.rh-report-keyline + .rh-report-keyline, .rh-report-alert-line + .rh-report-keyline, .rh-report-omitted-line + .rh-report-keyline { margin-top: 7px; }
.rh-combat-log-lines li::before { content: "•";
    margin-right: 6px;
    color: rgba(208, 211, 216, 0.70); }
.rh-report-action.wide { width: 100%;
    justify-content: center;
    margin-top: 14px;
    border-color: rgba(252, 147, 135, 0.32) !important;
    background: linear-gradient(90deg, rgba(252, 147, 135, 0.10), rgba(208, 211, 216, 0.055)) !important; }
.rh-report-info-window.is-open { backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px); }
.rh-report-info-content .rh-combat-log { gap: 12px; }
.rh-muted-loader { border: 1px dashed rgba(205, 209, 214, 0.15);
    border-radius: 14px;
    padding: 14px;
    background: rgba(0, 0, 0, 0.18);
    color: rgba(236, 238, 240, 0.55) !important; }
.rh-system-screen { scrollbar-width: thin;
    scrollbar-color: rgba(205, 209, 214, 0.34) rgba(0,0,0,0.20); }
@media (max-width: 1320px) { .rh-report-console { grid-template-columns: minmax(220px, 0.62fr) minmax(220px, 0.88fr) minmax(0, 1.34fr) !important; } }
@media (max-width: 980px) { .rh-system-tabs { mask-image: none; } }
@media (max-width: 980px) { .rh-report-console { grid-template-columns: 1fr !important; } }
@media (max-width: 980px) { #reportCategories .report-cat, #reportList .report-item { min-height: auto; } }
.command-nav-panel .command-nav-item.reports-menu-live::after, #vue-left-column.column-left .command-nav-item.reports-menu-live::after { content: none !important;
    display: none !important; }
.command-nav-panel .system-unread-badge.nav-badge, #vue-left-column.column-left .system-unread-badge.nav-badge { position: relative !important;
    z-index: 3 !important;
    grid-column: 3 !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
    margin: 0 0 0 6px !important;
    align-self: center !important;
    justify-self: end !important; }
.rh-system-tabs::before, .rh-system-tabs::after { content: none !important;
    display: none !important;
    background: none !important;
    box-shadow: none !important;
    border: 0 !important;
    opacity: 0 !important; }
.rh-system-tabs { isolation: isolate !important;
    background: rgba(0, 0, 0, 0.20) !important;
    box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.22) !important; }
.rh-system-screen { min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important; }
.rh-system-tab { min-width: 0 !important; }
.rh-system-tab strong, .rh-system-tab small { overflow: hidden;
    text-overflow: ellipsis; }
.system-unread-badge { min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ui-danger-light, #ff3c3c);
    color: #000;
    font-size: 0.8em;
    font-weight: 900;
    box-shadow: 0 0 12px rgba(255, 60, 60, 0.55); }
.system-terminal-entry .system-unread-badge { position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%); }
@media (max-width: 900px) { .view-section h2 { font-size: 0.98rem !important;
        letter-spacing: 1px !important;
        line-height: 1.25 !important;
        margin-bottom: 10px !important;
        padding-bottom: 8px !important; } }
@media (max-width: 900px) { :where(#view-reports, #rhReportInfoWindow) input, :where(#view-reports, #rhReportInfoWindow) button { font-size: 16px; } }
@media (max-width: 900px) { #view-reports[style*="display: block"] { display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;
        overflow: visible !important; } }
@media (max-width: 900px) { #view-reports > .panel { width: calc(100% - 12px) !important;
        max-width: calc(100% - 12px) !important;
        height: auto !important;
        min-height: 70dvh !important;
        margin: 0 auto 18px auto !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: visible !important; } }
@media (max-width: 900px) { #view-reports > .panel > div { width: 100% !important;
        max-width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid #222 !important;
        box-sizing: border-box !important; } }
@media (max-width: 900px) { #reportList { max-height: 42dvh !important; } }
@media (max-width: 900px) { #reportDetail { min-height: 180px !important;
        max-height: none !important; } }
@media (max-width: 900px) { #reportList { overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        touch-action: pan-y !important; } }
@media (max-width: 900px) { :where(#view-reports, #rhReportInfoWindow) input, :where(#view-reports, #rhReportInfoWindow) button { max-width: 100% !important;
        box-sizing: border-box !important; } }
@media (max-width: 900px) { .rh-system-tabs { display: flex !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        padding-bottom: 6px !important;
        scrollbar-width: thin; } }
@media (max-width: 900px) { .rh-system-tab { flex: 0 0 auto !important;
        min-width: max-content !important;
        white-space: nowrap !important; } }
@media (max-width: 900px) { .rh-system-meta-grid { grid-template-columns: 1fr !important; } }
@media (max-width: 520px) { .rh-report-info-card { width: calc(100vw - 18px) !important;
        max-width: calc(100vw - 18px) !important;
        border-radius: 16px !important; } }
@media (max-width: 900px) { .rh-system-tabs { display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        max-width: 100% !important;
        min-width: 0 !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-x: contain !important;
        overscroll-behavior-y: auto !important;
        touch-action: pan-x !important;
        pointer-events: auto !important; } }
@media (max-width: 900px) { .rh-system-tabs > * { flex: 0 0 auto !important;
        touch-action: manipulation !important; } }
@media (max-width: 900px) { .rh-system-tab { flex: 0 0 auto !important;
        min-width: max-content !important;
        white-space: nowrap !important; } }

/* Die Zahl am Menuepunkt "Systeme" - live ui.css und modules.css
   (.nav-badge, .command-nav-panel .nav-badge), gemessen 34 x 22 px. */
.command-nav-panel .nav-badge {
    box-sizing: content-box;
    position: relative;
    z-index: 3;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin: 0 0 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    justify-self: end;
    border-radius: 999px;
    background: rgba(228, 82, 66, 0.18);
    border: 1px solid rgba(228, 82, 66, 0.45);
    color: #fdaba2;
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1;
}

.command-nav-panel .nav-badge.danger {
    background: rgba(255, 82, 106, 0.18);
    border-color: rgba(255, 82, 106, 0.55);
    color: #ff9bab;
}

/* ===================================================================
   Rangliste - die Regeln des Originals, nicht nachgebaut.

   Herausgezogen aus base.css, ui.css, modules.css und mobile-fix.css
   des Live-Spiels: jede Regel, deren Selektor die Rangliste betrifft
   (ranking, podium, rh-table-shell, rh-data-table, rh-rank-*,
   rh-commander-cell, rh-rating-cell, #view-highscores), in der
   Reihenfolge der Dateien und samt Medienabfragen. Die allgemeinen
   Regeln fuer button, h1-h4 und Tabellen (auch .view-section table/th/td
   aus ui.css) gelten nur innerhalb der Rangliste (:where(#view-highscores),
   Spezifitaet wie im Original). Die Kopfzellen stehen live in der Mitte
   (Browservorgabe fuer th); der Rebuild setzt th sonst links. Die Regeln der Systemkonsole (rh-system-*) stehen schon im
   Block der Nachrichtenzentrale. Erzeugt mit scratchpad/rang_css/zieh.py.
   =================================================================== */
:where(#view-highscores), :where(#view-highscores) :where(*:not(button, input)), :where(#view-highscores) *::before, :where(#view-highscores) *::after { box-sizing: content-box; }
:where(#view-highscores) { font-family: Rajdhani, sans-serif; line-height: normal; color: rgb(237, 245, 255); }
:where(#view-highscores) h2::before, :where(#view-highscores) h2::after { content: none; }
:where(#view-highscores) th { text-align: center; }
:where(#view-highscores) h1, :where(#view-highscores) h2, :where(#view-highscores) h3, :where(#view-highscores) h4 { font-family: "Orbitron", sans-serif;
    letter-spacing: 2px; }
:where(#view-highscores) h1, :where(#view-highscores) h2, :where(#view-highscores) h3, :where(#view-highscores) h4 { text-transform: uppercase; }
.view-section:where(#view-highscores) table { width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    margin-bottom: 30px;
    background: #050505;
    border: 1px solid #222;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.9), 0 5px 15px rgba(0,0,0,0.5); }
.view-section:where(#view-highscores) th { background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
    color: var(--ui-highlight);
    text-transform: uppercase;
    letter-spacing: 2px;
    border: 1px solid #333;
    padding: 12px 15px;
    border-bottom: 2px solid var(--ui-color);
    font-family: "Courier New", monospace;
    text-shadow: 0 0 5px rgba(166, 20, 4, 0.3); }
.view-section:where(#view-highscores) td { border: 1px solid #1a1a1a;
    padding: 12px 15px;
    color: #ccc;
    background: rgba(255, 255, 255, 0.01); }
.view-section:where(#view-highscores) tr:nth-child(even) td { background: rgba(0, 0, 0, 0.4); }
.view-section:where(#view-highscores) tr:hover td { background: rgba(0, 255, 0, 0.05);
    color: #fff;
    border-color: #333; }
@media (max-width: 900px) { .view-section:where(#view-highscores) table { display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        border: 1px solid var(--ui-color);
        box-sizing: border-box; } }
@media (max-width: 900px) { .view-section:where(#view-highscores) th, .view-section:where(#view-highscores) td { padding: 5px 10px;
        font-size: 0.9em; } }
:where(#view-highscores) button, :where(#view-highscores) input { font-family: "Rajdhani", sans-serif; }
:where(#view-highscores) input { border-radius: 10px !important;
    border: 1px solid rgba(250, 96, 79, 0.24) !important;
    background: linear-gradient(180deg, rgba(26, 30, 35, 0.98), rgba(9, 11, 13, 0.99)) !important;
    color: #f2f7ff !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.035), 0 8px 22px rgba(0,0,0,0.28) !important; }
:where(#view-highscores) input:focus { outline: none !important;
    border-color: rgba(172, 178, 187, 0.56) !important;
    box-shadow: 0 0 0 2px rgba(172, 178, 187, 0.10), 0 0 20px rgba(172, 178, 187, 0.14) !important; }
:where(#view-highscores) button, :where(#view-highscores) button[type="button"], :where(#view-highscores) input[type="button"], :where(#view-highscores) input[type="submit"] { border-radius: 10px !important;
    border: 1px solid rgba(250, 96, 79, 0.26) !important;
    background:
        linear-gradient(180deg, rgba(255, 78, 45, 0.20), rgba(90, 18, 10, 0.24)),
        linear-gradient(180deg, rgba(32, 35, 40, 0.96), rgba(11, 12, 14, 0.98)) !important;
    color: #fff !important;
    font-family: "Rajdhani", sans-serif !important;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 10px 24px rgba(0,0,0,0.30), inset 0 0 0 1px rgba(255,255,255,0.035) !important;
    transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease, filter 0.14s ease; }
:where(#view-highscores) button:hover, :where(#view-highscores) button[type="button"]:hover, :where(#view-highscores) input[type="button"]:hover, :where(#view-highscores) input[type="submit"]:hover { transform: translateY(-1px);
    border-color: rgba(250, 96, 79, 0.52) !important;
    box-shadow: 0 14px 28px rgba(0,0,0,0.36), 0 0 22px rgba(255,78,45,0.12) !important; }
:where(#view-highscores) button:disabled { opacity: 0.52 !important;
    filter: grayscale(0.45);
    cursor: not-allowed !important; }
:where(#view-highscores) button, :where(#view-highscores) button[type="button"], :where(#view-highscores) input[type="button"], :where(#view-highscores) input[type="submit"] { min-height: 32px; }
:where(#view-highscores) button, :where(#view-highscores) button[type="button"], :where(#view-highscores) input[type="button"], :where(#view-highscores) input[type="submit"] { border-radius: 10px !important;
    border: 1px solid rgba(228, 82, 66, 0.24) !important;
    background:
        linear-gradient(180deg, rgba(45, 49, 54, 0.96), rgba(13, 15, 18, 0.98)) !important;
    color: rgba(243, 248, 255, 0.94) !important;
    box-shadow: 0 8px 18px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.04) !important; }
:where(#view-highscores) button:hover, :where(#view-highscores) button[type="button"]:hover, :where(#view-highscores) input[type="button"]:hover, :where(#view-highscores) input[type="submit"]:hover { border-color: rgba(194, 199, 205, 0.38) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 24px rgba(0,0,0,0.30), 0 0 18px rgba(194, 199, 205, 0.07), inset 0 1px 0 rgba(255,255,255,0.052) !important; }
:where(#view-highscores) input { border-color: rgba(223, 225, 229, 0.12) !important;
    background: linear-gradient(180deg, rgba(16, 19, 22, 0.96), rgba(8, 9, 11, 0.98)) !important; }
.highscore-name-cell { display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-right: 15px !important; }
.highscore-level { color: var(--ui-info);
    font-size: 0.95em;
    opacity: 0.8; }
.rh-system-header.ranking { border-left: 3px solid rgba(251, 106, 90, 0.72); }
.rh-data-table { width: 100%;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    overflow: hidden;
    border: 1px solid rgba(157, 164, 175, 0.11) !important;
    border-radius: 14px !important;
    background: rgba(0, 0, 0, 0.24) !important; }
.rh-data-table th { padding: 11px 12px !important;
    color: rgba(251, 112, 96, 0.92) !important;
    background: rgba(157, 164, 175, 0.065) !important;
    border-bottom: 1px solid rgba(157, 164, 175, 0.14) !important;
    font: 900 0.72rem "Orbitron", monospace !important;
    letter-spacing: 1.4px;
    text-transform: uppercase; }
.rh-data-table td { padding: 10px 12px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.045) !important;
    color: rgba(242, 243, 244, 0.8) !important; }
.rh-data-table tr:hover td { background: rgba(157, 164, 175, 0.045) !important; }
.rh-ranking-sync { margin-bottom: 14px;
    padding: 9px 12px;
    border: 1px solid rgba(93, 255, 177, 0.16);
    border-radius: 12px;
    color: rgba(93, 255, 177, 0.82);
    background: rgba(93, 255, 177, 0.045);
    font: 900 0.72rem "Orbitron", monospace;
    letter-spacing: 2px;
    text-align: center; }
.rh-podium-grid { display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px; }
.rh-podium-card { position: relative;
    min-height: 92px;
    padding: 14px;
    border: 1px solid rgba(251, 112, 96, 0.18);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(251, 112, 96, 0.07), rgba(157, 164, 175, 0.025)), rgba(0, 0, 0, 0.24);
    box-shadow: inset 0 0 20px rgba(251, 112, 96, 0.03), 0 10px 24px rgba(0, 0, 0, 0.28); }
.rh-podium-rank { color: var(--ui-highlight);
    font: 900 0.76rem "Orbitron", monospace;
    letter-spacing: 1.5px; }
.rh-podium-card strong { display: block;
    margin-top: 7px;
    color: #fff;
    font: 900 1rem "Orbitron", monospace;
    text-transform: uppercase; }
.rh-podium-card small, .rh-podium-card em { display: block;
    color: rgba(242, 243, 244, 0.58);
    font-style: normal;
    margin-top: 4px; }
.rh-table-shell { overflow: auto;
    border-radius: 16px; }
.rh-ranking-table .is-me td { background: rgba(93, 255, 177, 0.085) !important;
    box-shadow: inset 3px 0 0 rgba(93, 255, 177, 0.75); }
.rh-rank-cell { color: var(--ui-highlight) !important;
    font: 900 0.95rem "Orbitron", monospace; }
.rh-commander-cell strong { color: #f6fdff;
    text-transform: uppercase;
    letter-spacing: 0.8px; }
.rh-commander-cell small { display: block;
    color: rgba(242, 243, 244, 0.46);
    margin-top: 2px; }
.rh-rating-cell { color: #e0e2e5 !important;
    font-weight: 900; }
@media (max-width: 900px) { .rh-podium-grid { grid-template-columns: 1fr; } }
.rh-commander-cell strong { letter-spacing: 1.05px !important; }
.rh-podium-grid { gap: 12px !important; }
.rh-podium-card { border-radius: 16px !important;
    border-color: rgba(251, 103, 86, 0.18) !important;
    background:
        radial-gradient(circle at 18% 0%, rgba(251, 103, 86, 0.09), transparent 40%),
        linear-gradient(180deg, rgba(18, 21, 24, 0.96), rgba(6, 7, 9, 0.985)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 12px 30px rgba(0,0,0,0.30) !important; }
.rh-podium-card strong { font-size: 0.92rem !important;
    line-height: 1.25 !important; }
.rh-table-shell table { border-collapse: separate !important;
    border-spacing: 0 7px !important; }
.rh-table-shell table tr { background: transparent !important; }
.rh-table-shell table td, .rh-table-shell table th { border-top: 1px solid rgba(193, 197, 204, 0.07) !important;
    border-bottom: 1px solid rgba(193, 197, 204, 0.07) !important;
    background: rgba(0, 0, 0, 0.18) !important; }
.rh-table-shell table td:first-child, .rh-table-shell table th:first-child { border-left: 1px solid rgba(193, 197, 204, 0.07) !important;
    border-radius: 11px 0 0 11px !important; }
.rh-table-shell table td:last-child, .rh-table-shell table th:last-child { border-right: 1px solid rgba(193, 197, 204, 0.07) !important;
    border-radius: 0 11px 11px 0 !important; }
.rh-ranking-table .is-me td { background: rgba(93, 255, 177, 0.075) !important;
    border-color: rgba(93, 255, 177, 0.18) !important;
    box-shadow: inset 3px 0 0 rgba(93, 255, 177, 0.72) !important; }
@media (max-width: 980px) { .rh-table-shell table { border-spacing: 0 5px !important; } }
#view-highscores[style*="display: block"] { min-width: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0 16px 20px !important;
    box-sizing: border-box !important; }
#view-highscores .rh-system-screen { width: min(100%, 1500px) !important;
    max-width: 1500px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    min-width: 0 !important;
    box-sizing: border-box !important; }
@media (max-width: 720px) { #view-highscores[style*="display: block"] { padding: 0 8px 16px !important; } }
#view-highscores .rh-ranking-grid { min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important; }
#view-highscores { min-width: 0 !important; }
.rh-table-shell, .rh-ranking-table { max-width: 100% !important;
    overflow-x: auto !important; }
#view-highscores { min-width: 0 !important;
    box-sizing: border-box !important; }
.rh-podium-card { backdrop-filter: blur(10px); }
.rh-podium-card.gold, .rh-ranking-table tr.top-1 td { border-color: rgba(251, 112, 96, 0.24) !important; }
.rh-podium-card.silver, .rh-ranking-table tr.top-2 td { border-color: rgba(230, 232, 235, 0.18) !important; }
.rh-podium-card.bronze, .rh-ranking-table tr.top-3 td { border-color: rgba(251, 115, 100, 0.18) !important; }
.rh-rank-cell span { display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    min-height: 28px;
    border: 1px solid rgba(251, 103, 86, 0.18);
    border-radius: 999px;
    background: rgba(251, 103, 86, 0.045); }
.rh-commander-cell { min-width: 210px; }
.rh-commander-cell .rank-path-badge { margin-left: 7px;
    vertical-align: middle; }
.rh-ranking-display, .rh-ranking-display * { box-sizing: border-box; }
.rh-table-shell { overflow-x: auto !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(205, 209, 214, 0.30) rgba(255,255,255,0.035); }
@media (max-width: 560px) { .rh-commander-cell { min-width: 170px; } }
:where(#view-highscores) button { -webkit-tap-highlight-color: transparent; }
:where(#view-highscores) button:focus-visible { outline: 2px solid rgba(205, 209, 214, 0.42) !important;
    outline-offset: 2px !important; }
.rh-ranking-table { border-collapse: separate !important;
    border-spacing: 0 6px !important; }
.rh-ranking-table tr { background: rgba(0, 0, 0, 0.18); }
.rh-ranking-table td { border-top: 1px solid rgba(205, 209, 214, 0.075) !important;
    border-bottom: 1px solid rgba(205, 209, 214, 0.075) !important; }
.rh-ranking-table td:first-child { border-left: 1px solid rgba(205, 209, 214, 0.075) !important;
    border-radius: 10px 0 0 10px; }
.rh-ranking-table td:last-child { border-right: 1px solid rgba(205, 209, 214, 0.075) !important;
    border-radius: 0 10px 10px 0; }
@media (max-width: 900px) { :where(#view-highscores) table { font-size: 0.9rem !important; } }
@media (max-width: 900px) { :where(#view-highscores) input, :where(#view-highscores) button { font-size: 16px; } }
@media (max-width: 900px) { #view-highscores[style*="display: block"] { display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;
        overflow: visible !important; } }
@media (max-width: 900px) { #view-highscores .panel { width: calc(100% - 12px) !important;
        max-width: calc(100% - 12px) !important;
        margin: 0 auto 18px auto !important;
        box-sizing: border-box !important; } }
@media (max-width: 900px) { :where(#view-highscores) input, :where(#view-highscores) button { max-width: 100% !important;
        box-sizing: border-box !important; } }

/* ===================================================================
   Operationszentrale - die Regeln des Originals, nicht nachgebaut.

   Aus base.css, ui.css, modules.css und mobile-fix.css des Live-Spiels
   alles, was an #vue-active-operations haengt: die Kapazitaetspille,
   die Warnkarten (.attack-warning.enhanced, .rh-threat-*), die
   Akkordeons (.queue-accordion.ops-accordion samt Schalter offen/zu),
   die Flottenkarten (.fleet-card, .rh-fleet-*, Zeitbalken,
   RUECKZUG-Knopf) und die Bildfolgen blink-sync, cyber-progress und
   intense-pulse. Die Regeln fuer die Auftragslisten der linken Spalte,
   die live dieselben Klassen mitbenutzen (.rh-ops-queue-*,
   .queue-accordion-research/-units, .command-accordion-*), fehlen
   bewusst - die Spalte hat der Rebuild nicht.

   Allgemeine Regeln fuer button, h1-h4, input, details und summary
   gelten nur in der Zentrale (:where(#vue-active-operations), also
   ohne zusaetzliches Gewicht). Davor, wie bei den Nachrichten, die
   Grundschrift und content-box des Originals fuer den Kasten.

   Dazu der rote Radarpunkt im Menue (.v-menu-btn.alert, pulse-red-menu)
   und die Farbvariable --shadow-dark aus base.css.
   Erzeugt mit scratchpad/ops_css/zieh.py.
   =================================================================== */
:root { --shadow-dark: rgba(0, 0, 0, 0.88); }
/* Zwei Regeln des Originals, die live fuer jedes .panel gelten und im
   Rebuild fehlen: die !important-Werte der Panel-Ueberschrift aus
   base.css (sie schlagen dort .rh-terminal-heading), der Schimmer
   des Kastens (.panel::before aus ui.css statt des Lichtstreifens
   des Rebuilds), die Eckmarke oben rechts (.panel::after) und - umgekehrt - kein position: relative fuer die
   Kinder, das der Rebuild jedem .panel > * gibt. */
:where(#vue-active-operations).panel h2 { color: rgba(239, 247, 255, 0.94) !important;
    font-size: 0.96rem !important;
    letter-spacing: 2.4px !important;
    text-shadow: rgba(194, 199, 205, 0.13) 0px 0px 18px !important; }
:where(#vue-active-operations).panel > * { position: static; z-index: auto; }
:where(#vue-active-operations).panel > h2 { position: relative; }
:where(#vue-active-operations).panel::before { left: 0;
    width: auto;
    transform: none;
    animation: none;
    border-radius: inherit;
    z-index: -1;
    background: linear-gradient(90deg, rgba(224,77,49,0.08), transparent 24%, transparent 76%, rgba(194, 199, 205, 0.070)),
        linear-gradient(180deg, rgba(255,255,255,0.032), transparent 42%) !important;
    opacity: 0.58 !important; }
:where(#vue-active-operations).panel::after { content: '';
    position: absolute;
    right: 10px;
    top: 10px;
    width: 34px;
    height: 10px;
    pointer-events: none;
    border-top: 1px solid rgba(172, 178, 187, 0.32);
    border-right: 1px solid rgba(172, 178, 187, 0.32);
    border-color: rgba(194, 199, 205, 0.20) !important;
    opacity: 0.48 !important; }
.v-menu-btn.alert { background: linear-gradient(180deg, #550000 0%, #220000 100%);
        color: #fff;
        border-color: var(--ui-danger-light);
        animation: pulse-red-menu 2s infinite; }
.v-menu-btn.alert { background: linear-gradient(90deg, rgba(255, 53, 79, 0.28), rgba(70, 0, 0, 0.38)) !important;
    border-color: rgba(255, 82, 106, 0.64) !important; }
.v-menu-btn.alert { border-color: rgba(255, 82, 106, 0.66) !important;
    border-left-color: rgba(255, 82, 106, 0.88) !important;
    background: linear-gradient(90deg, rgba(255, 53, 79, 0.32), rgba(75, 0, 8, 0.32)) !important; }
.v-menu-btn.alert { border-color: rgba(255, 77, 96, 0.36) !important;
    background: linear-gradient(90deg, rgba(255,77,96,0.18), rgba(11, 13, 15, 0.88)) !important;
    color: rgba(255, 186, 195, 0.96) !important; }
.v-menu-btn.command-nav-item.alert, #vue-left-column.column-left .v-menu-btn.command-nav-item.alert { border-color: rgba(255, 82, 106, 0.52) !important; }
.v-menu-btn.command-nav-item.alert::before, #vue-left-column.column-left .v-menu-btn.command-nav-item.alert::before { background: rgba(255, 82, 106, 0.9) !important;
    box-shadow: 0 0 12px rgba(255, 82, 106, 0.38) !important; }
@keyframes pulse-red-menu { 0% {
        box-shadow: 3px 3px 6px var(--shadow-dark), 0 0 5px var(--ui-danger-light);
    }

    50% {
        box-shadow: 3px 3px 6px var(--shadow-dark), 0 0 15px var(--ui-danger-light);
    }

    100% {
        box-shadow: 3px 3px 6px var(--shadow-dark), 0 0 5px var(--ui-danger-light);
    } }
:where(#vue-active-operations), :where(#vue-active-operations) :where(*:not(button, input)), :where(#vue-active-operations) *::before, :where(#vue-active-operations) *::after { box-sizing: content-box; }
:where(#vue-active-operations) { font-family: Rajdhani, sans-serif; line-height: normal; color: rgb(237, 245, 255); }
:where(#vue-active-operations).panel h2::before { background: linear-gradient(180deg, var(--rh-elite-cyan), rgba(228, 82, 66, 0.82)) !important;
    box-shadow: 0 0 14px rgba(194, 199, 205, 0.26) !important; }
:where(#vue-active-operations) h1, :where(#vue-active-operations) h2, :where(#vue-active-operations) h3, :where(#vue-active-operations) h4 { font-family: "Orbitron", sans-serif;
    letter-spacing: 2px; }
:where(#vue-active-operations) h1, :where(#vue-active-operations) h2, :where(#vue-active-operations) h3, :where(#vue-active-operations) h4 { text-transform: uppercase; }
.queue-accordion { border-radius: 10px !important;
    background: rgba(7, 8, 10, 0.54) !important;
    border-color: rgba(255,255,255,0.075) !important; }
.queue-accordion summary { color: #f2f3f4 !important; }
.timeline-bar-container { border-radius: 999px !important;
    border-color: rgba(255,255,255,0.075) !important;
    background: rgba(0,0,0,0.46) !important; }
.timeline-bar-fill { border-radius: 999px; }
:where(#vue-active-operations) button, :where(#vue-active-operations) input { font-family: "Rajdhani", sans-serif; }
:where(#vue-active-operations) input { border-radius: 10px !important;
    border: 1px solid rgba(250, 96, 79, 0.24) !important;
    background: linear-gradient(180deg, rgba(26, 30, 35, 0.98), rgba(9, 11, 13, 0.99)) !important;
    color: #f2f7ff !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.035), 0 8px 22px rgba(0,0,0,0.28) !important; }
:where(#vue-active-operations) input:focus { outline: none !important;
    border-color: rgba(172, 178, 187, 0.56) !important;
    box-shadow: 0 0 0 2px rgba(172, 178, 187, 0.10), 0 0 20px rgba(172, 178, 187, 0.14) !important; }
.timeline-bar-container { height: 6px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    background: rgba(0,0,0,0.45) !important;
    overflow: hidden; }
.timeline-bar-fill { border-radius: 999px !important;
    box-shadow: 0 0 14px rgba(250, 96, 79, 0.22); }
:where(#vue-active-operations) button, :where(#vue-active-operations) button[type="button"], :where(#vue-active-operations) input[type="button"], :where(#vue-active-operations) input[type="submit"] { border-radius: 10px !important;
    border: 1px solid rgba(250, 96, 79, 0.26) !important;
    background:
        linear-gradient(180deg, rgba(255, 78, 45, 0.20), rgba(90, 18, 10, 0.24)),
        linear-gradient(180deg, rgba(32, 35, 40, 0.96), rgba(11, 12, 14, 0.98)) !important;
    color: #fff !important;
    font-family: "Rajdhani", sans-serif !important;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 10px 24px rgba(0,0,0,0.30), inset 0 0 0 1px rgba(255,255,255,0.035) !important;
    transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease, filter 0.14s ease; }
:where(#vue-active-operations) button:hover, :where(#vue-active-operations) button[type="button"]:hover, :where(#vue-active-operations) input[type="button"]:hover, :where(#vue-active-operations) input[type="submit"]:hover { transform: translateY(-1px);
    border-color: rgba(250, 96, 79, 0.52) !important;
    box-shadow: 0 14px 28px rgba(0,0,0,0.36), 0 0 22px rgba(255,78,45,0.12) !important; }
:where(#vue-active-operations) button:disabled { opacity: 0.52 !important;
    filter: grayscale(0.45);
    cursor: not-allowed !important; }
#vue-active-operations.panel { border-top-color: rgba(172, 178, 187, 0.35) !important; }
.queue-accordion, details.queue-accordion { border-radius: 12px !important;
    background: rgba(6, 7, 8, 0.46) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    overflow: hidden; }
.queue-accordion summary { padding: 10px 12px !important;
    background: linear-gradient(90deg, rgba(172, 178, 187, 0.07), transparent 55%) !important;
    color: #eaf4ff !important; }
#vue-active-operations.panel { background:
        linear-gradient(135deg, rgba(22, 26, 30, 0.90), rgba(8, 9, 10, 0.96)) !important;
    border: 1px solid rgba(255,255,255,0.075) !important;
    border-top-color: rgba(250, 96, 79, 0.24) !important;
    box-shadow: 0 18px 42px rgba(0,0,0,0.36), inset 0 0 0 1px rgba(255,255,255,0.024) !important; }
:where(#vue-active-operations) button, :where(#vue-active-operations) button[type="button"], :where(#vue-active-operations) input[type="button"], :where(#vue-active-operations) input[type="submit"] { min-height: 32px; }
#vue-active-operations.panel { border-radius: 16px !important;
    background:
        linear-gradient(135deg, rgba(21, 24, 28, 0.915), rgba(9, 11, 13, 0.965)) !important;
    border: 1px solid rgba(223, 225, 229, 0.085) !important;
    border-top-color: rgba(194, 199, 205, 0.18) !important;
    box-shadow:
        0 18px 52px rgba(0,0,0,0.42),
        inset 0 1px 0 rgba(255,255,255,0.045),
        inset 0 0 0 1px rgba(255,255,255,0.018) !important; }
:where(#vue-active-operations) button, :where(#vue-active-operations) button[type="button"], :where(#vue-active-operations) input[type="button"], :where(#vue-active-operations) input[type="submit"] { border-radius: 10px !important;
    border: 1px solid rgba(228, 82, 66, 0.24) !important;
    background:
        linear-gradient(180deg, rgba(45, 49, 54, 0.96), rgba(13, 15, 18, 0.98)) !important;
    color: rgba(243, 248, 255, 0.94) !important;
    box-shadow: 0 8px 18px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.04) !important; }
:where(#vue-active-operations) button:hover, :where(#vue-active-operations) button[type="button"]:hover, :where(#vue-active-operations) input[type="button"]:hover, :where(#vue-active-operations) input[type="submit"]:hover { border-color: rgba(194, 199, 205, 0.38) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 24px rgba(0,0,0,0.30), 0 0 18px rgba(194, 199, 205, 0.07), inset 0 1px 0 rgba(255,255,255,0.052) !important; }
:where(#vue-active-operations) input { border-color: rgba(223, 225, 229, 0.12) !important;
    background: linear-gradient(180deg, rgba(16, 19, 22, 0.96), rgba(8, 9, 11, 0.98)) !important; }
.queue-accordion { border-radius: 12px !important;
    border-color: rgba(223, 225, 229, 0.075) !important;
    background: linear-gradient(135deg, rgba(21, 24, 27, 0.70), rgba(8, 9, 11, 0.82)) !important; }
.queue-accordion summary { color: rgba(244, 245, 246, 0.92) !important; }
.timeline-bar-container { background: rgba(0, 0, 0, 0.45) !important;
    border-color: rgba(223, 225, 229, 0.085) !important; }
.timeline-bar-fill { background: linear-gradient(90deg, rgba(224,77,49,0.92), rgba(228, 82, 66, 0.92), rgba(194, 199, 205, 0.72)) !important;
    box-shadow: 0 0 14px rgba(228, 82, 66, 0.16) !important; }
#vue-active-operations.panel { background: linear-gradient(180deg, #161616 0%, #0a0a0a 100%);
    border: 2px solid var(--ui-info);
    border-radius: 12px;
    padding: 15px;
    box-shadow: inset 0 0 20px rgba(76, 84, 94, 0.1), 6px 6px 16px var(--shadow-dark), -2px -2px 10px var(--shadow-light);
    overflow: hidden;
    box-sizing: border-box; }
.timeline-bar-container { width: 100%;
    height: 10px;
    background-color: #050505;
    border-radius: 3px;
    overflow: hidden;
    margin-top: 8px;
    border: 1px solid #333;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.9); }
.timeline-bar-fill { height: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--ui-color) 0%, #aaffaa 100%);
    box-shadow: 0 0 10px var(--ui-glow), inset 0 0 5px rgba(255,255,255,0.4);
    transition: width 0.12s linear;
    position: relative;
    overflow: hidden; }
.timeline-bar-fill::after { content: "";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-image: repeating-linear-gradient( -45deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25) 8px, transparent 8px, transparent 16px );
        background-size: 22px 100%;
        animation: cyber-progress 1s linear infinite; }
.status-indicator-dot { width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;
    display: inline-block; }
.attack-warning.enhanced { background: linear-gradient(135deg, #440000 0%, #110000 100%);
    border: 2px solid var(--ui-danger-light);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 15px;
    position: relative;
    overflow: hidden;
    animation: intense-pulse 2s infinite; }
.attack-warning.enhanced::before { content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: repeating-linear-gradient(-45deg, rgba(255, 0, 0, 0.1), rgba(255, 0, 0, 0.1) 10px, rgba(0, 0, 0, 0.1) 10px, rgba(0, 0, 0, 0.1) 20px); }
.fleet-card { background: #080808;
    border: 1px solid #1a1a1a;
    padding: 12px;
    margin-bottom: 12px;
    border-radius: 6px;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.8);
    transition: border-color 0.3s; }
.fleet-card.is-processing { border-color: var(--ui-highlight);
        background: repeating-linear-gradient(45deg, #080808, #080808 10px, #111100 10px, #111100 20px); }
.processing-pulse { animation: blink-sync 1s infinite alternate; }
.fleet-card .retreat-btn { border: 1px solid;
    padding: 6px 12px;
    font-size: 0.95em;
    cursor: pointer;
    font-weight: bold;
    border-radius: 4px;
    font-family: monospace;
    transition: all 0.2s;
    letter-spacing: 1px; }
.fleet-card .retreat-btn:hover { filter: brightness(1.3);
        box-shadow: 0 0 10px currentColor; }
.fleet-card .retreat-btn:active { box-shadow: inset 2px 2px 4px rgba(0,0,0,0.5);
        transform: translateY(1px); }
.queue-accordion-count { min-width: 22px;
    height: 22px;
    padding: 0 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(170, 255, 170, 0.35);
    background: rgba(170, 255, 170, 0.08);
    color: var(--ui-highlight);
    font-size: 0.78em;
    font-family: monospace; }
.queue-accordion { border: 1px solid rgba(255,255,255,0.07);
    background: rgba(0,0,0,0.18);
    border-radius: 6px;
    overflow: hidden; }
.queue-accordion summary { list-style: none;
    cursor: pointer;
    user-select: none;
    padding: 8px 9px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #ddd;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px; }
.queue-accordion summary::-webkit-details-marker { display: none; }
.queue-accordion summary::before { content: "▸";
    color: var(--ui-highlight);
    margin-right: 2px;
    transition: transform 0.18s ease; }
.queue-accordion[open] summary::before { transform: rotate(90deg); }
.queue-accordion[open] summary { border-bottom: 1px solid rgba(255,255,255,0.07);
    background: rgba(255,255,255,0.03); }
.queue-accordion-body { padding: 3px 8px 8px;
    max-height: 260px;
    overflow-y: auto;
    overscroll-behavior-y: auto;
    overscroll-behavior-x: contain; }
@media (max-width: 768px) { .queue-accordion-body { max-height: 220px;
        -webkit-overflow-scrolling: touch; } }
.ops-accordion-wrap { display: flex;
    flex-direction: column;
    gap: 9px; }
.ops-accordion { border-color: rgba(76, 84, 94, 0.22);
    background: rgba(0, 0, 0, 0.18); }
.ops-accordion summary { text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: none; }
.ops-accordion[open] summary { border-bottom: 1px solid rgba(255,255,255,0.08); }
.ops-accordion-title { min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }
.ops-accordion-body { max-height: 430px;
    padding: 8px;
    overflow-y: auto;
    overscroll-behavior-y: auto;
    overscroll-behavior-x: contain; }
.ops-accordion .fleet-card { margin-bottom: 9px; }
.ops-accordion .fleet-card:last-child { margin-bottom: 0; }
@media (max-width: 768px) { .ops-accordion-body { max-height: 320px;
        -webkit-overflow-scrolling: touch; } }
.queue-accordion-tools { margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-shrink: 0;
    min-width: 0; }
.accordion-default-toggle { position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 3px 7px;
    min-height: 20px;
    border-radius: 999px;
    border: 1px solid rgba(166, 173, 183, 0.35);
    background: linear-gradient(180deg, rgba(15, 18, 21, 0.96) 0%, rgba(9, 10, 11, 0.96) 100%);
    color: #cbcfd4;
    font-size: 0.72em;
    line-height: 1;
    font-family: monospace;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03), 0 0 0 1px rgba(0,0,0,0.35), 0 4px 12px rgba(0,0,0,0.22);
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.14s ease, box-shadow 0.18s ease;
    user-select: none; }
.accordion-default-toggle::before { content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #597180;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.05), 0 0 6px rgba(89, 113, 128, 0.35);
    transition: background 0.18s ease, box-shadow 0.18s ease; }
.accordion-default-toggle:hover { color: #eaffff;
    border-color: rgba(94, 103, 116, 0.55);
    background: linear-gradient(180deg, rgba(26, 30, 34, 0.98) 0%, rgba(14, 16, 18, 0.98) 100%);
    box-shadow: inset 0 0 0 1px rgba(211, 214, 219, 0.05), 0 0 0 1px rgba(0,0,0,0.3), 0 0 14px rgba(90, 98, 110, 0.16);
    transform: translateY(-1px); }
.accordion-default-toggle:hover::before { background: var(--ui-info);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 0 10px rgba(76, 84, 94, 0.55); }
.accordion-default-toggle:active { transform: translateY(0); }
.accordion-default-toggle:focus, .accordion-default-toggle:focus-visible { outline: none;
    border-color: rgba(99, 108, 121, 0.7);
    box-shadow: 0 0 0 2px rgba(90, 98, 110, 0.18), 0 0 14px rgba(90, 98, 110, 0.18); }
.queue-accordion[open] > summary .accordion-default-toggle { color: #cbffd2;
    border-color: rgba(110, 220, 130, 0.4);
    background: linear-gradient(180deg, rgba(16, 32, 18, 0.97) 0%, rgba(7, 15, 9, 0.97) 100%); }
.queue-accordion[open] > summary .accordion-default-toggle::before { background: #73ff96;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 0 10px rgba(115,255,150,0.5); }
@media (max-width: 768px) { .queue-accordion summary { gap: 6px; } }
@media (max-width: 768px) { .queue-accordion-tools { gap: 4px; } }
@media (max-width: 768px) { .accordion-default-toggle { font-size: 0.62em;
        padding: 2px 6px;
        min-height: 19px;
        gap: 4px; } }
@media (max-width: 768px) { .accordion-default-toggle::before { width: 6px;
        height: 6px; } }
#vue-active-operations.panel { background: linear-gradient(180deg, rgba(20, 23, 26, 0.92), rgba(9, 11, 13, 0.92)) !important;
    border: 1px solid rgba(172, 178, 187, 0.22) !important;
    border-top: 1px solid rgba(172, 178, 187, 0.42) !important;
    border-radius: 14px !important;
    box-shadow: 0 18px 42px rgba(0,0,0,0.38), inset 0 0 24px rgba(172, 178, 187, 0.045) !important; }
#vue-active-operations .queue-accordion.ops-accordion { background:
        linear-gradient(135deg, rgba(18, 21, 24, 0.92), rgba(9, 10, 11, 0.96)) !important;
    border: 1px solid rgba(223, 225, 229, 0.075) !important;
    border-top-color: rgba(191, 196, 203, 0.18) !important;
    border-radius: 13px !important;
    box-shadow: 0 10px 26px rgba(0,0,0,0.26), inset 0 1px 0 rgba(255,255,255,0.030) !important;
    overflow: hidden; }
#vue-active-operations .queue-accordion.ops-accordion > summary { min-height: 38px;
    padding: 9px 11px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.045) !important;
    background:
        linear-gradient(90deg, rgba(191, 196, 203, 0.070), rgba(250, 96, 79, 0.035), rgba(191, 196, 203, 0.015)) !important;
    font-family: "Rajdhani", sans-serif !important;
    font-size: 0.92rem !important;
    letter-spacing: 0.8px !important; }
#vue-active-operations .ops-accordion-title { color: rgba(235, 247, 255, 0.94) !important;
    font-weight: 800;
    text-transform: uppercase; }
#vue-active-operations .queue-accordion-count { min-width: auto;
    padding: 3px 8px !important;
    border-radius: 999px !important;
    background: rgba(191, 196, 203, 0.08) !important;
    border: 1px solid rgba(191, 196, 203, 0.14) !important;
    color: rgba(217, 219, 224, 0.90) !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.8px; }
#vue-active-operations .queue-accordion-body { padding: 10px !important;
    background: rgba(0,0,0,0.12) !important; }
#vue-active-operations button.retreat-btn { border-radius: 9px !important;
    font-family: "Rajdhani", sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: 0.8px !important; }
#vue-active-operations .timeline-bar-container { height: 8px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,0.055) !important;
    overflow: hidden;
    box-shadow: inset 0 0 8px rgba(0,0,0,0.55) !important; }
#vue-active-operations .timeline-bar-fill { border-radius: 999px !important; }
#vue-active-operations.panel { background:
        radial-gradient(circle at 12% 0%, rgba(250, 96, 79, 0.08), transparent 34%),
        linear-gradient(180deg, rgba(18, 21, 25, 0.95), rgba(9, 10, 11, 0.98)) !important;
    border-color: rgba(250, 96, 79, 0.15) !important; }
#vue-active-operations .fleet-card { padding: 11px !important;
    border-radius: 12px !important;
    background:
        linear-gradient(135deg, rgba(17, 19, 22, 0.92), rgba(7, 8, 10, 0.96)) !important;
    border: 1px solid rgba(223, 225, 229, 0.070) !important;
    border-left: 2px solid rgba(191, 196, 203, 0.20) !important;
    box-shadow: 0 8px 22px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.025) !important; }
#vue-active-operations .fleet-card:hover { border-color: rgba(191, 196, 203, 0.22) !important;
    border-left-color: rgba(250, 96, 79, 0.60) !important;
    background: linear-gradient(135deg, rgba(22, 25, 29, 0.96), rgba(9, 10, 12, 0.98)) !important; }
#vue-active-operations .fleet-card.is-processing { background:
        linear-gradient(135deg, rgba(18, 21, 10, 0.94), rgba(8, 9, 10, 0.98)) !important;
    border-left-color: rgba(250, 96, 79, 0.78) !important; }
#vue-active-operations.panel { min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important; }
#vue-active-operations .queue-accordion-tools, #vue-active-operations .queue-accordion-count, #vue-active-operations .ops-accordion-title { min-width: 0 !important;
    max-width: 100% !important; }
#vue-active-operations .queue-accordion-count, #vue-active-operations .ops-accordion-title { overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important; }
#vue-active-operations .ops-accordion-body { max-width: 100% !important;
    overflow-x: hidden !important; }
#vue-active-operations.panel { border-color: rgba(195, 199, 206, 0.14) !important;
    background:
        radial-gradient(circle at 8% 0%, rgba(199, 203, 209, 0.055), transparent 34%),
        radial-gradient(circle at 92% 8%, rgba(250, 94, 77, 0.035), transparent 26%),
        linear-gradient(180deg, rgba(15, 17, 19, 0.98), rgba(6, 7, 8, 0.99)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.035),
        0 22px 54px rgba(0, 0, 0, 0.34) !important; }
:where(#vue-active-operations) button { -webkit-tap-highlight-color: transparent; }
:where(#vue-active-operations) button:focus-visible { outline: 2px solid rgba(205, 209, 214, 0.42) !important;
    outline-offset: 2px !important; }
#vue-active-operations { scrollbar-width: thin;
    scrollbar-color: rgba(205, 209, 214, 0.34) rgba(0,0,0,0.20); }
.rh-terminal-heading { margin: 0 0 16px !important;
    padding: 0 0 12px !important;
    border-bottom: 1px solid rgba(205, 209, 214, 0.16) !important;
    color: rgba(235, 249, 255, 0.95) !important;
    text-align: center !important;
    text-transform: uppercase !important;
    letter-spacing: 0.16em !important;
    font: 900 clamp(1rem, 1.8vw, 1.25rem) "Orbitron", "Rajdhani", monospace !important;
    text-shadow: none !important; }
.rh-terminal-heading-command { margin-bottom: 18px !important; }
.rh-ops-empty-state { border: 1px solid rgba(205, 209, 214, 0.13) !important;
    border-radius: 15px !important;
    background:
        radial-gradient(circle at 12% 0%, rgba(205, 209, 214, 0.055), transparent 38%),
        rgba(0, 0, 0, 0.24) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.025), 0 12px 26px rgba(0,0,0,0.16) !important; }
.active-ops-terminal { padding: 15px !important; }
.rh-ops-capacity-chip { width: fit-content;
    max-width: 100%;
    margin: 0 auto 16px;
    padding: 6px 12px;
    border: 1px solid rgba(205, 209, 214, 0.16);
    border-radius: 999px;
    background: rgba(205, 209, 214, 0.055);
    color: rgba(219, 222, 226, 0.88);
    font: 900 0.73rem "Orbitron", monospace;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    text-align: center; }
.rh-threat-list { margin-bottom: 18px; }
.rh-threat-body { position: relative;
    z-index: 1; }
.rh-threat-title { display: inline-flex;
    color: rgba(254, 228, 225, 0.96);
    font: 900 0.90rem "Orbitron", monospace;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-shadow: none; }
.rh-threat-grid { display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 9px;
    padding: 10px;
    border: 1px solid rgba(255, 92, 92, 0.18);
    border-left: 3px solid rgba(255, 92, 92, 0.55);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.30); }
.rh-threat-meta { min-width: 0;
    color: rgba(236, 237, 239, 0.84);
    font: 800 0.86rem/1.55 "Rajdhani", system-ui, sans-serif; }
.rh-threat-timer { min-width: 92px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-align: right; }
.rh-threat-timer span { color: rgba(255, 245, 245, 0.96);
    font: 900 1.22rem "Orbitron", monospace;
    letter-spacing: 0.02em; }
.rh-ops-empty-state { padding: 28px 18px;
    text-align: center;
    border-style: dashed !important; }
.rh-ops-empty-state p { margin: 0;
    color: rgba(192, 197, 203, 0.55);
    font: 900 0.84rem "Orbitron", monospace;
    letter-spacing: 0.12em;
    text-transform: uppercase; }
.rh-fleet-card-head, .rh-fleet-actions, .rh-fleet-upkeep-row { display: flex;
    justify-content: space-between;
    gap: 10px; }
.rh-fleet-card-head { align-items: flex-start;
    margin-bottom: 7px; }
.rh-fleet-card-titleblock { display: flex;
    flex-direction: column;
    min-width: 0; }
.rh-fleet-mission-name { min-width: 0;
    color: rgba(242, 249, 255, 0.96);
    font: 900 0.98rem "Rajdhani", system-ui, sans-serif;
    letter-spacing: 0.05em;
    overflow: hidden;
    text-overflow: ellipsis; }
.rh-fleet-mission-name > span { color: rgba(193, 198, 205, 0.68);
    font-size: 0.82em;
    font-weight: 800; }
.rh-fleet-timebox { min-width: 86px;
    text-align: right; }
.rh-fleet-time, .rh-fleet-sync { color: rgba(242, 249, 255, 0.96);
    font: 900 1.08rem "Orbitron", monospace; }
.rh-fleet-sync { color: rgba(252, 133, 119, 0.96);
    font-size: 0.88rem; }
.rh-fleet-stationed-box { margin-top: 9px;
    padding: 9px;
    border: 1px solid rgba(205, 209, 214, 0.10);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.24);
    font: 800 0.84rem "Rajdhani", system-ui, sans-serif;
    box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.20); }
.rh-fleet-upkeep-row { align-items: center;
    margin-bottom: 7px;
    padding-bottom: 7px;
    border-bottom: 1px dashed rgba(205, 209, 214, 0.12); }
.rh-fleet-lock-note { margin-top: 10px;
    padding: 9px 10px;
    border: 1px solid rgba(251, 112, 96, 0.28);
    border-radius: 12px;
    background: rgba(251, 112, 96, 0.055);
    color: rgba(252, 141, 128, 0.94);
    font: 900 0.80rem "Rajdhani", system-ui, sans-serif;
    letter-spacing: 0.05em; }
.rh-fleet-actions { margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid rgba(205, 209, 214, 0.10); }
.rh-fleet-actions .retreat-btn { flex: 1 1 0;
    min-width: 0;
    min-height: 34px; }
.rh-fleet-action-redeploy { background: rgba(205, 209, 214, 0.12) !important;
    color: rgba(240, 241, 243, 0.96) !important;
    border-color: rgba(205, 209, 214, 0.28) !important; }
.rh-fleet-action-retreat { background: rgba(255, 92, 92, 0.085) !important;
    color: rgba(255, 151, 151, 0.96) !important;
    border-color: rgba(255, 92, 92, 0.28) !important; }
#vue-active-operations.panel.active-ops-terminal { position: relative;
    overflow: hidden;
    box-sizing: border-box;
    padding: 15px !important;
    border: 1px solid rgba(205, 209, 214, 0.18) !important;
    border-radius: 18px !important;
    background:
        linear-gradient(145deg, rgba(23, 26, 30, 0.94), rgba(9, 10, 11, 0.98)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 0 28px rgba(205, 209, 214, 0.045),
        0 18px 48px rgba(0, 0, 0, 0.28) !important; }
#vue-active-operations.panel.active-ops-terminal::before { content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(205, 209, 214, 0.42), transparent);
    opacity: 0.85; }
#vue-active-operations .rh-threat-grid { display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch; }
#vue-active-operations .rh-threat-meta { display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    line-height: 1.25; }
.rh-threat-kv { min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 9px;
    border: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.025); }
.rh-threat-kv--wide { grid-column: 1 / -1; }
.rh-threat-kv em { color: rgba(203, 207, 212, 0.60);
    font-style: normal;
    font: 900 0.66rem var(--font-display, "Orbitron", monospace);
    letter-spacing: 0.12em;
    text-transform: uppercase; }
.rh-threat-kv strong { min-width: 0;
    color: rgba(240, 248, 255, 0.94);
    font: 900 0.88rem "Rajdhani", system-ui, sans-serif;
    overflow-wrap: anywhere; }
.rh-threat-kv .rh-threat-danger, .rh-threat-danger { color: rgba(255, 146, 146, 0.98) !important; }
.rh-threat-kv .rh-threat-origin, .rh-threat-origin { color: rgba(252, 152, 141, 0.95) !important; }
.rh-threat-kv .rh-threat-target, .rh-threat-target { color: rgba(211, 215, 219, 0.98) !important; }
#vue-active-operations .queue-accordion.ops-accordion > summary { box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.055),
        0 10px 20px rgba(0, 0, 0, 0.16); }
.rh-ops-accordion-label { display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0; }
.rh-fleet-status-line { display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 3px;
    color: var(--fleet-status-color, rgba(205, 209, 214, 0.92));
    font: 900 0.78rem var(--font-display, "Orbitron", monospace);
    letter-spacing: 0.09em;
    text-transform: uppercase; }
.rh-fleet-status-line b { padding: 2px 7px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.20);
    color: rgba(244, 245, 246, 0.78);
    font: inherit;
    font-size: 0.84em;
    letter-spacing: 0.07em; }
.rh-fleet-progress-fill { background: linear-gradient(90deg, rgba(205, 209, 214, 0.26), var(--fleet-status-color, rgba(205, 209, 214, 0.88))) !important;
    box-shadow: 0 0 11px var(--fleet-status-color, rgba(205, 209, 214, 0.88)) !important; }
.rh-fleet-provision-row { display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px; }
.rh-fleet-provision-label { color: rgba(201, 205, 211, 0.66);
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase; }
.rh-fleet-provision-time { color: rgba(208, 212, 217, 0.94);
    font: 900 1.02rem var(--font-display, "Orbitron", monospace);
    letter-spacing: 0.02em;
    white-space: nowrap; }
.rh-fleet-provision-row--stable .rh-fleet-provision-time { color: rgba(215, 218, 222, 0.66);
    font-size: 0.88rem;
    text-transform: uppercase; }
.rh-fleet-provision-row--critical { color: rgba(255, 137, 137, 0.98);
    font-weight: 900;
    animation: blink-sync 1s infinite alternate; }
.rh-fleet-provision-row--critical .rh-fleet-provision-time { color: rgba(255, 229, 229, 0.98); }
.rh-fleet-upkeep-food, .rh-fleet-upkeep-fuel { display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    padding: 2px 7px;
    border-radius: 999px;
    font: 900 0.78rem var(--font-display, "Orbitron", monospace);
    letter-spacing: 0.04em; }
.rh-fleet-upkeep-food { border: 1px solid rgba(126, 255, 178, 0.20);
    background: rgba(126, 255, 178, 0.055);
    color: rgba(147, 237, 183, 0.94); }
.rh-fleet-upkeep-fuel { border: 1px solid rgba(255, 108, 108, 0.22);
    background: rgba(255, 92, 92, 0.055);
    color: rgba(255, 158, 158, 0.95); }
@media (max-width: 900px) { #vue-active-operations { width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 10px 0 !important;
        padding: 12px !important;
        border-radius: 12px !important;
        box-sizing: border-box !important;
        overflow: hidden !important; } }
@media (max-width: 900px) { :where(#vue-active-operations) input, :where(#vue-active-operations) button { font-size: 16px; } }
@media (max-width: 900px) { #vue-active-operations .ops-group-container, .fleet-card { max-width: 100% !important;
        box-sizing: border-box !important; } }
@media (max-width: 900px) { .fleet-card { padding: 10px !important; } }
@media (max-width: 900px) { #vue-active-operations { min-width: 0 !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        overflow-y: visible !important; } }
@media (max-width: 900px) { .queue-accordion, .queue-accordion-body, .ops-accordion-wrap, .fleet-card { min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-wrap: anywhere; } }
@media (max-width: 900px) { .queue-accordion-body, .ops-accordion-body { overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: auto !important;
        overscroll-behavior-x: contain !important;
        touch-action: pan-y !important; } }
@media (max-width: 900px) { .ops-accordion-body { max-height: min(46dvh, 420px) !important; } }
@media (max-width: 900px) { :where(#vue-active-operations) input, :where(#vue-active-operations) button { max-width: 100% !important;
        box-sizing: border-box !important; } }
@keyframes blink-sync { 0% {
        opacity: 0.3;
    }

    100% {
        opacity: 1;
        text-shadow: 0 0 8px var(--ui-highlight);
    } }
@keyframes cyber-progress { 0% {
        background-position: 0 0;
    }

    100% {
        background-position: 22px 0;
    } }
@keyframes intense-pulse { 0% {
        box-shadow: 6px 6px 16px rgba(0,0,0,0.8), 0 0 5px var(--ui-danger-light);
    }

    50% {
        box-shadow: 6px 6px 16px rgba(0,0,0,0.8), 0 0 20px var(--ui-danger-light), inset 0 0 10px var(--ui-danger-light-glow);
    }

    100% {
        box-shadow: 6px 6px 16px rgba(0,0,0,0.8), 0 0 5px var(--ui-danger-light);
    } }


/* ===================================================================
   Warlord-Basis und Bergungslager auf der Karte - live modules.css
   (.map-tile.warlord-base, .rh-map-salvage-tag). Die zweite und vierte
   Regel tragen die Inline-Stile, die map.js live an die Kachel schreibt
   (tileStyle); der Rebuild setzt Kacheln nur ueber Klassen.
   Die Bildfolge warlord-alarm ist live nirgends definiert - die
   Kachel pulsiert dort nicht, hier auch nicht.
   =================================================================== */
.map-tile.warlord-base {
    background: radial-gradient(circle, #ff0000 0%, #330000 80%) !important;
    color: #fff !important;
    font-weight: bold;
    border: 2px solid #ff0000 !important;
    border-radius: 20%;
    z-index: 95 !important;
    box-shadow: 0 0 20px #ff0000, inset 0 0 15px #ff0000 !important;
    animation: warlord-alarm 1s infinite alternate ease-in-out;
}
.map-container .map-tile.warlord-base { text-align: center; font-size: 1.2em; }
.rh-map-salvage-tag {
    color: #fb7c6e;
    font-size: 0.56rem;
    text-shadow: 0 0 7px rgba(0, 0, 0, 0.95), 0 0 12px rgba(251, 124, 110, 0.35);
}
.map-container .map-tile.salvage-cache { text-align: center; font-size: 0.7em; box-shadow: inset 0 0 12px rgba(255,211,106,0.35); }

/* ===================================================================
   Verbandangriff - die Regeln des Originals, nicht nachgebaut.

   Aus siege.css, modules.css und mobile-fix.css des Live-Spiels: die
   Maske von combined-attack.js (.combined-*) und die Bausteine der
   Belagerungszentrale, die sie mitbenutzt (.siege-hero, .siege-card,
   .siege-input, .siege-ghost-btn, .siege-primary-btn, .siege-unit-row
   ...). Die Teile, die nur die Belagerung braucht, stehen im Block
   "Belagerungszentrale" am Ende.

   Der Rahmen heisst wie live #centerActionContent.rh-action-wide; die
   Regeln, die live an dieser Id haengen, gelten deshalb unveraendert.
   Allgemeine Regeln fuer button, h1-h4, input, label und p gelten nur in
   den beiden Masken (:where(#combinedAttackPanel, #vue-siege-center));
   davor content-box und die Zeilenhoehe des Originals.
   Erzeugt mit scratchpad/verband_css/zieh.py.
   =================================================================== */
:where(#combinedAttackPanel, #vue-siege-center), :where(#combinedAttackPanel, #vue-siege-center) :where(*:not(button)), :where(#combinedAttackPanel, #vue-siege-center) *::before, :where(#combinedAttackPanel, #vue-siege-center) *::after { box-sizing: content-box; }
:where(#combinedAttackPanel, #vue-siege-center) { line-height: normal; font-size: medium; }
:where(#combinedAttackPanel, #vue-siege-center) :is(h1, h2, h3, h4) { font-weight: bold; }
:root { --shadow-light: rgba(255, 255, 255, 0.055); }
/* Der Rahmen: live erbt er Zeilenhoehe und Schriftgroesse "normal" und
   "medium" - das zweite ist kein Zufall: eine Schrift, die nur
   "monospace" heisst, setzt der Browser dann auf 13 px (.siege-hero-status).
   Und kein position: relative, das der Rebuild jedem .panel > * gibt. */
.rh-aktion-panel > #centerActionContent.rh-action-wide { position: static; z-index: auto; line-height: normal; font-size: medium; }
/* Live .panel h2 (base.css) mit !important - es schlaegt .siege-hero h2. */
:where(#combinedAttackPanel, #vue-siege-center) h2 { color: rgba(239, 247, 255, 0.94) !important;
    font-size: 0.96rem !important;
    letter-spacing: 2.4px !important;
    text-shadow: rgba(97, 220, 255, 0.13) 0px 0px 18px !important; }
/* Live #centerActionPanel input (modules.css) - in beiden Masken. */
#combinedAttackPanel input, #vue-siege-center input, #vue-siege-center select { border-color: rgba(126, 222, 255, 0.15) !important;
    background: rgba(0, 0, 0, 0.36) !important;
    color: rgba(233, 248, 255, 0.94) !important;
    box-shadow: inset 0 0 14px rgba(0,0,0,0.28) !important; }
#combinedAttackPanel input:focus, #vue-siege-center input:focus, #vue-siege-center select:focus { outline: none !important;
    border-color: rgba(126, 222, 255, 0.42) !important;
    box-shadow: 0 0 0 2px rgba(126, 222, 255, 0.08), inset 0 0 14px rgba(0,0,0,0.30) !important; }
.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: #050505;
    border-left: 1px solid #1a1a1a; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #333; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--ui-color); }
:where(#combinedAttackPanel, #vue-siege-center) h1, :where(#combinedAttackPanel, #vue-siege-center) h2, :where(#combinedAttackPanel, #vue-siege-center) h3, :where(#combinedAttackPanel, #vue-siege-center) h4 { font-family: "Orbitron", sans-serif;
    letter-spacing: 2px; }
:where(#combinedAttackPanel, #vue-siege-center) h1, :where(#combinedAttackPanel, #vue-siege-center) h2, :where(#combinedAttackPanel, #vue-siege-center) h3, :where(#combinedAttackPanel, #vue-siege-center) h4 { text-transform: uppercase; }
@media (max-width: 900px) { #centerActionContent { display: flex;
        flex-direction: column;
        align-items: center; } }
@media (max-width: 900px) { #centerActionContent > div { width: 100%;
            max-width: 350px;
            margin: 0 auto 15px auto;
            box-sizing: border-box; } }
:where(#combinedAttackPanel, #vue-siege-center) button, :where(#combinedAttackPanel, #vue-siege-center) input { font-family: "Rajdhani", sans-serif; }
:where(#combinedAttackPanel, #vue-siege-center) input { border-radius: 10px !important;
    border: 1px solid rgba(255, 178, 74, 0.24) !important;
    background: linear-gradient(180deg, rgba(26, 30, 35, 0.98), rgba(9, 11, 13, 0.99)) !important;
    color: #f2f7ff !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.035), 0 8px 22px rgba(0,0,0,0.28) !important; }
:where(#combinedAttackPanel, #vue-siege-center) input:focus { outline: none !important;
    border-color: rgba(40, 216, 255, 0.56) !important;
    box-shadow: 0 0 0 2px rgba(40, 216, 255, 0.10), 0 0 20px rgba(40, 216, 255, 0.14) !important; }
:where(#combinedAttackPanel, #vue-siege-center) button, :where(#combinedAttackPanel, #vue-siege-center) button[type="button"], :where(#combinedAttackPanel, #vue-siege-center) input[type="button"], :where(#combinedAttackPanel, #vue-siege-center) input[type="submit"] { border-radius: 10px !important;
    border: 1px solid rgba(255, 178, 74, 0.26) !important;
    background:
        linear-gradient(180deg, rgba(255, 78, 45, 0.20), rgba(90, 18, 10, 0.24)),
        linear-gradient(180deg, rgba(31, 36, 41, 0.96), rgba(11, 12, 14, 0.98)) !important;
    color: #fff !important;
    font-family: "Rajdhani", sans-serif !important;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 10px 24px rgba(0,0,0,0.30), inset 0 0 0 1px rgba(255,255,255,0.035) !important;
    transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease, filter 0.14s ease; }
:where(#combinedAttackPanel, #vue-siege-center) button:hover, :where(#combinedAttackPanel, #vue-siege-center) button[type="button"]:hover, :where(#combinedAttackPanel, #vue-siege-center) input[type="button"]:hover, :where(#combinedAttackPanel, #vue-siege-center) input[type="submit"]:hover { transform: translateY(-1px);
    border-color: rgba(255, 178, 74, 0.52) !important;
    box-shadow: 0 14px 28px rgba(0,0,0,0.36), 0 0 22px rgba(255,78,45,0.12) !important; }
:where(#combinedAttackPanel, #vue-siege-center) button:disabled { opacity: 0.52 !important;
    filter: grayscale(0.45);
    cursor: not-allowed !important; }
:where(#combinedAttackPanel, #vue-siege-center) button, :where(#combinedAttackPanel, #vue-siege-center) button[type="button"], :where(#combinedAttackPanel, #vue-siege-center) input[type="button"], :where(#combinedAttackPanel, #vue-siege-center) input[type="submit"] { min-height: 32px; }
:where(#combinedAttackPanel, #vue-siege-center) button, :where(#combinedAttackPanel, #vue-siege-center) button[type="button"], :where(#combinedAttackPanel, #vue-siege-center) input[type="button"], :where(#combinedAttackPanel, #vue-siege-center) input[type="submit"] { border-radius: 10px !important;
    border: 1px solid rgba(217, 162, 77, 0.24) !important;
    background:
        linear-gradient(180deg, rgba(43, 49, 56, 0.96), rgba(13, 15, 18, 0.98)) !important;
    color: rgba(243, 248, 255, 0.94) !important;
    box-shadow: 0 8px 18px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.04) !important; }
:where(#combinedAttackPanel, #vue-siege-center) button:hover, :where(#combinedAttackPanel, #vue-siege-center) button[type="button"]:hover, :where(#combinedAttackPanel, #vue-siege-center) input[type="button"]:hover, :where(#combinedAttackPanel, #vue-siege-center) input[type="submit"]:hover { border-color: rgba(97, 220, 255, 0.38) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 24px rgba(0,0,0,0.30), 0 0 18px rgba(97,220,255,0.07), inset 0 1px 0 rgba(255,255,255,0.052) !important; }
:where(#combinedAttackPanel, #vue-siege-center) input { border-color: rgba(188, 217, 238, 0.12) !important;
    background: linear-gradient(180deg, rgba(16, 19, 22, 0.96), rgba(8, 9, 11, 0.98)) !important; }
#centerActionContent p { word-break: break-word;
    hyphens: auto; }
.siege-card { border-radius: 14px !important;
    background: linear-gradient(135deg, rgba(22, 26, 30, 0.90), rgba(9, 10, 11, 0.96)) !important;
    border: 1px solid rgba(255,255,255,0.075) !important;
    border-top-color: rgba(40, 216, 255, 0.24) !important;
    box-shadow: 0 18px 42px rgba(0,0,0,0.34), inset 0 0 0 1px rgba(255,255,255,0.028) !important; }
.siege-card { border-radius: 16px !important;
    background:
        linear-gradient(135deg, rgba(21, 24, 28, 0.88), rgba(9, 11, 13, 0.95)) !important;
    border: 1px solid rgba(188, 217, 238, 0.080) !important;
    border-top-color: rgba(97, 220, 255, 0.18) !important;
    box-shadow: 0 18px 48px rgba(0,0,0,0.36), inset 0 1px 0 rgba(255,255,255,0.035) !important; }
#centerActionContent.rh-action-wide { display: block !important;
    max-width: 1460px !important;
    margin: 0 auto 18px !important; }
#centerActionContent button:not(.combined-attack-tab):not(.tt-filter) { border-radius: 10px !important; }
#centerActionContent.rh-action-wide { min-width: 0 !important; }
#centerActionContent { min-width: 0 !important; }
#centerActionContent { min-width: 0 !important;
    box-sizing: border-box !important; }
#centerActionContent { min-width: 0 !important; }
:where(#combinedAttackPanel, #vue-siege-center) button { -webkit-tap-highlight-color: transparent; }
:where(#combinedAttackPanel, #vue-siege-center) button:focus-visible { outline: 2px solid rgba(126, 222, 255, 0.42) !important;
    outline-offset: 2px !important; }
#centerActionContent { scrollbar-width: thin;
    scrollbar-color: rgba(205, 209, 214, 0.34) rgba(0,0,0,0.20); }
.siege-command-screen { width: min(1480px, 100%);
    margin: 0 auto;
    padding: 4px 0 24px 0;
    color: #ddd;
    font-family: "Rajdhani", "Courier New", monospace; }
.siege-hero { display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
    padding: 22px;
    margin-bottom: 18px;
    border: 2px solid rgba(255, 100, 50, 0.62);
    border-radius: 16px;
    background:
        radial-gradient(circle at 12% 15%, rgba(255, 100, 50, 0.14), transparent 34%),
        linear-gradient(135deg, rgba(22, 10, 8, 0.96), rgba(4, 4, 4, 0.98));
    box-shadow:
        inset 0 0 26px rgba(255, 100, 50, 0.08),
        8px 8px 22px var(--shadow-dark),
        -2px -2px 10px var(--shadow-light); }
.siege-kicker { color: var(--ui-highlight);
    font-family: "Orbitron", monospace;
    font-size: 0.76em;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 8px;
    opacity: 0.9; }
.siege-hero h2 { margin: 0 0 8px 0;
    color: #fff;
    font-family: "Orbitron", monospace;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: clamp(1.4rem, 2vw, 2.1rem);
    text-shadow: 0 0 14px rgba(255, 100, 50, 0.42); }
.siege-hero p { max-width: 760px;
    margin: 0;
    color: #aaa;
    line-height: 1.45;
    font-size: 1.02em; }
.siege-hero-status { min-width: 260px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 14px;
    border: 1px solid rgba(255, 100, 50, 0.25);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.38);
    font-family: monospace; }
.siege-hero-status span { color: #777;
    text-transform: uppercase;
    font-size: 0.76em;
    letter-spacing: 1px; }
.siege-hero-status strong { color: var(--ui-highlight);
    font-size: 1.05em;
    margin-bottom: 8px; }
.siege-card { background: linear-gradient(180deg, #151515 0%, #080808 100%);
    border: 1px solid #2b211b;
    border-radius: 14px;
    padding: 16px;
    box-sizing: border-box;
    box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.72), 6px 6px 16px var(--shadow-dark); }
.siege-card-create { border-color: rgba(255, 100, 50, 0.36); }
.siege-card-ops { border-color: rgba(0, 170, 170, 0.32); }
.siege-card-join { margin-top: 18px;
    border-color: rgba(170, 170, 0, 0.30); }
.siege-card-head { display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 1px dashed #333; }
.siege-card-head h3 { margin: 0 0 4px 0;
    color: var(--ui-highlight);
    font-family: "Orbitron", monospace;
    font-size: 0.98em;
    letter-spacing: 1px;
    text-transform: uppercase; }
.siege-card-head p { margin: 0;
    color: #858585;
    font-family: monospace;
    font-size: 0.83em;
    line-height: 1.35; }
.siege-chip { color: #000;
    background: var(--ui-highlight);
    border-radius: 999px;
    padding: 5px 9px;
    font-size: 0.72em;
    font-weight: bold;
    font-family: monospace;
    white-space: nowrap;
    text-transform: uppercase; }
.siege-coord-grid { display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px; }
.siege-field label, .siege-unit-row label { display: block;
    color: #777;
    font-size: 0.75em;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
    font-family: monospace; }
.siege-input { width: 100%;
    box-sizing: border-box;
    background: #000;
    border: 1px solid #444;
    color: #fff;
    padding: 10px;
    font-family: monospace;
    border-radius: 6px;
    outline: none;
    font-size: 1em; }
.siege-input:focus { border-color: var(--ui-highlight);
    box-shadow: 0 0 10px rgba(255, 100, 50, 0.24); }
.siege-info-line { border: 1px solid #332216;
    background: rgba(255, 100, 50, 0.045);
    color: #bbb;
    padding: 10px;
    border-radius: 8px;
    font-family: monospace;
    font-size: 0.84em;
    line-height: 1.4;
    margin: 12px 0; }
.siege-details { border: 1px solid #242424;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 12px;
    background: rgba(0, 0, 0, 0.2); }
.siege-details summary { display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 10px;
    cursor: pointer;
    color: var(--ui-highlight);
    background: #111;
    font-family: "Orbitron", monospace;
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 1px; }
.siege-details summary span { color: #888;
    font-family: monospace;
    text-transform: none;
    letter-spacing: 0; }
.siege-unit-row { display: grid;
    grid-template-columns: 1fr 112px;
    gap: 10px;
    align-items: center;
    background: linear-gradient(90deg, #151515 0%, #0d0d0d 100%);
    border: 1px solid #222;
    border-radius: 8px;
    padding: 9px;
    margin-bottom: 7px; }
.siege-unit-row strong { display: block;
    color: var(--ui-info);
    font-size: 0.95em;
    line-height: 1.1; }
.siege-unit-row span { display: block;
    color: #777;
    font-size: 0.82em;
    font-family: monospace;
    margin-top: 2px; }
.siege-unit-controls { display: flex;
    gap: 5px;
    align-items: center; }
.siege-unit-controls input { width: 64px;
    background: #000;
    border: 1px solid #444;
    color: #fff;
    text-align: center;
    padding: 6px;
    font-family: monospace;
    border-radius: 5px; }
.siege-unit-controls button, .siege-ghost-btn { background: #161616;
    border: 1px solid #3a3a3a;
    color: #aaa;
    padding: 7px 8px;
    cursor: pointer;
    border-radius: 5px;
    font-size: 0.75em;
    font-family: monospace;
    transition: 0.18s; }
.siege-unit-controls button:hover, .siege-ghost-btn:hover { color: var(--ui-info);
    border-color: var(--ui-info);
    box-shadow: 0 0 8px rgba(0, 170, 170, 0.18); }
.siege-primary-btn { width: 100%;
    background: rgba(255, 100, 50, 0.07);
    color: var(--ui-highlight);
    border: 1px solid var(--ui-highlight);
    padding: 13px;
    font-family: "Orbitron", monospace;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    border-radius: 8px;
    transition: 0.2s; }
.siege-primary-btn:hover:not(:disabled) { background: var(--ui-highlight);
    color: #000;
    box-shadow: 0 0 20px rgba(255, 100, 50, 0.42); }
.siege-primary-btn:disabled { opacity: 0.35;
    cursor: not-allowed; }
.siege-empty { color: #666;
    text-align: center;
    border: 1px dashed #242424;
    padding: 16px;
    border-radius: 10px;
    font-family: monospace;
    background: rgba(0, 0, 0, 0.22); }
@media (max-width: 1100px) { .siege-hero { grid-template-columns: 1fr;
        flex-direction: column; } }
@media (max-width: 1100px) { .siege-hero-status { min-width: 0; } }
@media (max-width: 700px) { .siege-command-screen { padding: 0; } }
@media (max-width: 700px) { .siege-hero, .siege-card { border-radius: 10px;
        padding: 12px; } }
@media (max-width: 700px) { .siege-coord-grid, .siege-unit-row { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .siege-card-head { flex-direction: column; } }
.combined-attack-screen { display: grid;
    gap: 16px; }
.combined-hero .siege-hero-status { min-width: 240px; }
.combined-target-card, .combined-launch-card { grid-column: 1 / -1; }
.combined-coord-grid { grid-template-columns: minmax(120px, 180px) minmax(120px, 180px) minmax(220px, 1fr);
    align-items: end; }
.combined-target-actions { display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end; }
.combined-launch-btn { width: auto;
    min-width: 230px;
    margin: 0; }
.combined-base-grid { display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 12px; }
.combined-base-card { border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.24);
    padding: 12px;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2); }
.combined-base-card.active { border-color: rgba(255, 90, 90, 0.48);
    box-shadow: 0 0 18px rgba(255, 90, 90, 0.1), inset 0 0 20px rgba(255, 90, 90, 0.035); }
.combined-base-card header { display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: start;
    margin-bottom: 8px; }
.combined-base-card h4 { margin: 0 0 2px;
    color: var(--ui-color, #9da4af);
    font: 800 1rem "Orbitron", monospace;
    letter-spacing: 1px;
    text-transform: uppercase; }
.combined-base-card header span, .combined-base-meta { color: rgba(240, 241, 243, 0.62);
    font-size: 0.84rem; }
.combined-base-meta { margin-bottom: 8px;
    padding: 6px 8px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.035); }
.combined-unit-list { display: grid;
    gap: 6px;
    max-height: 320px;
    overflow: auto;
    padding-right: 4px; }
.combined-unit-row { grid-template-columns: minmax(0, 1fr) auto; }
@media (max-width: 760px) { .combined-coord-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .combined-target-actions, .combined-base-card header { justify-content: stretch;
        flex-direction: column; } }
@media (max-width: 760px) { .combined-launch-btn { width: 100%;
        min-width: 0; } }
@media (max-width: 760px) { .combined-base-grid { grid-template-columns: 1fr; } }
.combined-fleet-summary { margin-top: 12px;
    padding: 12px;
    border: 1px solid rgba(255, 90, 90, 0.22);
    background: linear-gradient(135deg, rgba(255, 90, 90, 0.08), rgba(157, 164, 175, 0.035)), rgba(0, 0, 0, 0.28);
    display: grid;
    gap: 10px; }
.combined-fleet-summary.empty { color: rgba(240, 241, 243, 0.58);
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.035); }
.combined-summary-head { display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    color: rgba(240, 241, 243, 0.76); }
.combined-summary-head strong { color: #ff7777;
    font-family: "Orbitron", monospace;
    text-transform: uppercase;
    letter-spacing: 1px; }
.combined-summary-units, .combined-summary-bases { display: flex;
    flex-wrap: wrap;
    gap: 6px; }
.combined-summary-units span, .combined-summary-bases span { padding: 5px 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.28);
    color: rgba(240, 241, 243, 0.82);
    font-size: 0.84rem; }
.combined-summary-units b { color: var(--ui-color, #9da4af);
    margin-left: 4px; }
.combined-summary-bases span { color: rgba(240, 241, 243, 0.66); }
.combined-unit-list { overscroll-behavior: contain;
    scroll-behavior: auto; }
.siege-command-screen select, .siege-command-screen select option, .siege-command-screen select optgroup, .siege-command-screen .siege-input:is(select), .siege-command-screen .siege-input:is(select) option, .siege-command-screen .siege-input:is(select) optgroup { background-color: #0a0b0d !important;
    color: #f4fbff !important;
    -webkit-text-fill-color: #f4fbff !important;
    color-scheme: dark !important; }
.siege-command-screen select option:checked, .siege-command-screen select option:hover, .siege-command-screen select option:focus { background-color: #22272c !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important; }
.siege-command-screen select:disabled, .siege-command-screen select:disabled option { background-color: #0f1215 !important;
    color: rgba(225, 238, 248, 0.68) !important;
    -webkit-text-fill-color: rgba(225, 238, 248, 0.68) !important; }
.siege-field select.siege-input { background: linear-gradient(180deg, #0f1215 0%, #060709 100%) !important;
    border-color: rgba(126, 222, 255, 0.22) !important;
    box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.72), 0 6px 14px rgba(0, 0, 0, 0.24) !important; }
.siege-field select.siege-input:focus { border-color: rgba(255, 178, 74, 0.52) !important;
    box-shadow: 0 0 0 2px rgba(255, 178, 74, 0.10), inset 0 0 14px rgba(0, 0, 0, 0.72) !important; }
@media (max-width: 900px) { #centerActionContent { display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        margin: 10px 0 0 0 !important;
        max-width: 100% !important; } }
@media (max-width: 900px) { #centerActionContent > div { width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important; } }
@media (max-width: 900px) { :where(#combinedAttackPanel, #vue-siege-center) input, :where(#combinedAttackPanel, #vue-siege-center) button { font-size: 16px; } }
@media (max-width: 900px) { .siege-command-screen { padding: 0 !important; } }
@media (max-width: 900px) { .siege-hero { padding: 14px !important;
        gap: 12px !important;
        border-radius: 14px !important;
        margin-bottom: 12px !important; } }
@media (max-width: 900px) { .siege-kicker { font-size: 0.68rem !important;
        letter-spacing: 1.4px !important; } }
@media (max-width: 900px) { .siege-hero h2 { font-size: 1.25rem !important;
        letter-spacing: 1px !important; } }
@media (max-width: 900px) { .siege-hero p { font-size: 0.92rem !important; } }
@media (max-width: 900px) { .siege-hero-status { min-width: 0 !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        padding: 10px !important;
        gap: 4px 8px !important; } }
@media (max-width: 900px) { .siege-hero-status span { font-size: 0.65rem !important; } }
@media (max-width: 900px) { .siege-hero-status strong { font-size: 0.88rem !important;
        margin-bottom: 5px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important; } }
@media (max-width: 900px) { .siege-card { padding: 12px !important;
        border-radius: 14px !important; } }
@media (max-width: 900px) { .siege-card-head { gap: 8px !important; } }
@media (max-width: 900px) { .siege-card-head h3 { font-size: 0.86rem !important; } }
@media (max-width: 900px) { .siege-card-head p { font-size: 0.76rem !important; } }
@media (max-width: 480px) { .siege-unit-row, .siege-card-head { display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important; } }
@media (max-width: 480px) { .siege-unit-controls { width: 100% !important; } }
@media (max-width: 480px) { .siege-unit-controls input { flex: 1 !important;
        width: auto !important; } }
@media (max-width: 480px) { .siege-hero-status { grid-template-columns: 1fr !important; } }
@media (max-width: 480px) { .siege-primary-btn { letter-spacing: 1px !important; } }
@media (max-width: 900px) { #centerActionContent { min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-wrap: anywhere; } }
@media (max-width: 900px) { #centerActionContent { padding-bottom: 8px !important; } }
@media (max-width: 900px) { :where(#combinedAttackPanel, #vue-siege-center) input, :where(#combinedAttackPanel, #vue-siege-center) button { max-width: 100% !important;
        box-sizing: border-box !important; } }

/* ===================================================================
   Belagerungszentrale - die Regeln des Originals, nicht nachgebaut.

   Was der Verband-Block oben noch nicht hat: die Operationsliste
   (.siege-op*), die Einladungsfelder, die Einheitenlisten, das Raster
   der Zentrale und die allgemeinen select-Regeln (nur in
   :where(#vue-siege-center)). Die gemeinsamen Bausteine und die
   allgemeinen Regeln fuer button, h1-h4, input stehen oben.
   Erzeugt mit scratchpad/belagerung_css/zieh.py.
   =================================================================== */
:where(#vue-siege-center) select { font-family: "Rajdhani", sans-serif; }
:where(#vue-siege-center) select { border-radius: 10px !important;
    border: 1px solid rgba(255, 178, 74, 0.24) !important;
    background: linear-gradient(180deg, rgba(26, 30, 35, 0.98), rgba(9, 11, 13, 0.99)) !important;
    color: #f2f7ff !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.035), 0 8px 22px rgba(0,0,0,0.28) !important; }
:where(#vue-siege-center) select:focus { outline: none !important;
    border-color: rgba(40, 216, 255, 0.56) !important;
    box-shadow: 0 0 0 2px rgba(40, 216, 255, 0.10), 0 0 20px rgba(40, 216, 255, 0.14) !important; }
:where(#vue-siege-center) select { border-color: rgba(188, 217, 238, 0.12) !important;
    background: linear-gradient(180deg, rgba(16, 19, 22, 0.96), rgba(8, 9, 11, 0.98)) !important; }
.siege-field--invite { margin: 10px 0; }
.siege-command-grid { display: grid;
    grid-template-columns: minmax(360px, 0.9fr) minmax(420px, 1.1fr);
    gap: 18px;
    align-items: start; }
.siege-card-create { border-color: rgba(255, 100, 50, 0.36); }
.siege-card-ops { border-color: rgba(0, 170, 170, 0.32); }
.siege-card-join { margin-top: 18px;
    border-color: rgba(170, 170, 0, 0.30); }
.siege-badge { color: #000;
    background: var(--ui-highlight);
    border-radius: 999px;
    padding: 5px 9px;
    font-size: 0.72em;
    font-weight: bold;
    font-family: monospace;
    white-space: nowrap;
    text-transform: uppercase; }
.siege-badge { background: var(--ui-info); }
.siege-details { border: 1px solid #242424;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 12px;
    background: rgba(0, 0, 0, 0.2); }
.siege-details summary { display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 10px;
    cursor: pointer;
    color: var(--ui-highlight);
    background: #111;
    font-family: "Orbitron", monospace;
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 1px; }
.siege-details summary span { color: #888;
    font-family: monospace;
    text-transform: none;
    letter-spacing: 0; }
.siege-unit-list { max-height: 310px;
    overflow-y: auto;
    padding: 10px;
    background: #070707;
    border: 1px solid #1f1f1f;
    border-radius: 10px; }
.siege-unit-list-wide { display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 8px;
    max-height: 255px;
    margin-bottom: 12px; }
.siege-unit-list-wide .siege-unit-row { margin-bottom: 0; }
.siege-op-actions button { background: #161616;
    border: 1px solid #3a3a3a;
    color: #aaa;
    padding: 7px 8px;
    cursor: pointer;
    border-radius: 5px;
    font-size: 0.75em;
    font-family: monospace;
    transition: 0.18s; }
.siege-op-actions button:hover:not(:disabled) { color: var(--ui-info);
    border-color: var(--ui-info);
    box-shadow: 0 0 8px rgba(0, 170, 170, 0.18); }
.siege-op-actions button:disabled { opacity: 0.35;
    cursor: not-allowed; }
.siege-ops-list { display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 515px;
    overflow-y: auto;
    padding-right: 4px; }
.siege-op-card { background: #080808;
    border: 1px solid #242424;
    border-radius: 10px;
    padding: 12px;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.75);
    cursor: pointer;
    transition: 0.18s; }
.siege-op-card:hover, .siege-op-card.selected { border-color: var(--ui-highlight);
    box-shadow: 0 0 14px rgba(255, 100, 50, 0.16), inset 0 0 10px rgba(0,0,0,0.75); }
.siege-op-header { display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 8px; }
.siege-op-title { color: var(--ui-highlight);
    font-weight: bold;
    font-family: "Orbitron", monospace;
    font-size: 0.9em;
    text-transform: uppercase; }
.siege-op-sub { color: #aaa;
    font-family: monospace;
    font-size: 0.82em;
    margin-top: 3px; }
.siege-op-meta { color: #999;
    font-size: 0.84em;
    font-family: monospace;
    line-height: 1.45; }
.siege-op-actions { display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 7px;
    margin-top: 10px; }
.siege-op-actions button.danger:hover:not(:disabled) { color: var(--ui-danger-light);
    border-color: var(--ui-danger-light);
    box-shadow: 0 0 8px rgba(255, 85, 85, 0.18); }
@media (max-width: 1100px) { .siege-command-grid { grid-template-columns: 1fr;
        flex-direction: column; } }
@media (max-width: 700px) { .siege-op-actions { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .siege-op-header { flex-direction: column; } }
.siege-invite-grid { display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px; }
@media (max-width: 780px) { .siege-invite-grid { grid-template-columns: 1fr; } }
.siege-invite-grid .siege-input { background: linear-gradient(180deg, #0f1215 0%, #060709 100%) !important;
    border-color: rgba(126, 222, 255, 0.22) !important;
    box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.72), 0 6px 14px rgba(0, 0, 0, 0.24) !important; }
.siege-invite-grid .siege-input:focus { border-color: rgba(255, 178, 74, 0.52) !important;
    box-shadow: 0 0 0 2px rgba(255, 178, 74, 0.10), inset 0 0 14px rgba(0, 0, 0, 0.72) !important; }
@media (max-width: 900px) { :where(#vue-siege-center) select { font-size: 16px; } }
@media (max-width: 900px) { .siege-command-grid { display: flex !important;
        flex-direction: column !important;
        gap: 12px !important; } }
@media (max-width: 900px) { .siege-unit-list, .siege-ops-list, .siege-unit-list-wide { max-height: 42dvh !important; } }
@media (max-width: 900px) { .siege-unit-list-wide { grid-template-columns: 1fr !important; } }
@media (max-width: 900px) { .siege-op-actions { grid-template-columns: 1fr 1fr 1fr !important; } }
@media (max-width: 480px) { .siege-op-header { display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important; } }
@media (max-width: 480px) { .siege-op-actions { grid-template-columns: 1fr !important; } }
@media (max-width: 900px) { .siege-unit-list, .siege-unit-list-wide, .siege-ops-list { overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        touch-action: pan-y !important; } }
@media (max-width: 900px) { :where(#vue-siege-center) select { max-width: 100% !important;
        box-sizing: border-box !important; } }

/* ===================================================================
   Kommandozentrale, Schnellmenü, Camp-Logistik, Feldlager auf der Karte

   Wörtlich aus public/style (ui.css, modules.css, mobile-fix.css …)
   gezogen: #vue-dispatch-center, #quickActionMapMenu und die
   Schnellwahl-Presets, #vue-redeploy-overlay sowie die Lager-Kacheln
   (camp-working / camp-idle). Reihenfolge wie live. Die allgemeinen
   Regeln für button, input, select … gelten live überall; hier sind sie
   wie beim Verband auf diese vier Masken begrenzt, samt content-box
   (außer button und select, die auch im Browser border-box sind) und
   font-size: medium - nur dann rechnet Chrome monospace-Felder wie
   live auf 13 px herunter.
   =================================================================== */

:where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay), :where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) :where(*:not(button, select)), :where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) *::before, :where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) *::after { box-sizing: content-box; }
:where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) { line-height: normal; font-size: medium; }
/* Kein position: relative, das der Rebuild jedem .panel > * gibt. */
:where(#vue-dispatch-center, .redeploy-panel).panel > * { position: static; z-index: auto; }
:where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) h1, :where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) h2, :where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) h3 { font-weight: bold; }
:where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) .tech-card-btn { position: static; z-index: auto; display: inline-block; margin: 0; box-sizing: border-box; line-height: normal; }
:where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) h1, :where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) h2, :where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) h3, :where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) h4 { font-family: "Orbitron", sans-serif;
    letter-spacing: 2px; }
:where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) h1, :where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) h2, :where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) h3, :where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) h4 { text-transform: uppercase; }
:where(#vue-dispatch-center) input[type=range] { -webkit-appearance: none;
    width: 100%;
    background: transparent; }
:where(#vue-dispatch-center) input[type=range]::-webkit-slider-thumb { -webkit-appearance: none;
        height: 24px;
        width: 12px;
        background: var(--ui-color);
        cursor: pointer;
        box-shadow: 0 0 10px var(--ui-glow);
        border-radius: 2px;
        margin-top: -10px; }
:where(#vue-dispatch-center) input[type=range]::-webkit-slider-runnable-track { width: 100%;
        height: 4px;
        cursor: pointer;
        background: #050505;
        border-radius: 2px;
        border: 1px solid #333;
        box-shadow: inset 1px 1px 3px rgba(0,0,0,0.9); }
:where(#vue-dispatch-center) input[type=range]:focus { outline: none; }
:where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) button, :where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) input, :where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) select { font-family: "Rajdhani", sans-serif; }
:where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) select, :where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) input, :where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) textarea { border-radius: 10px !important;
    border: 1px solid rgba(250, 96, 79, 0.24) !important;
    background: linear-gradient(180deg, rgba(26, 30, 35, 0.98), rgba(9, 11, 13, 0.99)) !important;
    color: #f2f7ff !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.035), 0 8px 22px rgba(0,0,0,0.28) !important; }
:where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) select:focus, :where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) input:focus, :where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) textarea:focus { outline: none !important;
    border-color: rgba(172, 178, 187, 0.56) !important;
    box-shadow: 0 0 0 2px rgba(172, 178, 187, 0.10), 0 0 20px rgba(172, 178, 187, 0.14) !important; }
:where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) button, :where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) button[type="button"], :where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) input[type="button"], :where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) input[type="submit"] { border-radius: 10px !important;
    border: 1px solid rgba(250, 96, 79, 0.26) !important;
    background:
        linear-gradient(180deg, rgba(255, 78, 45, 0.20), rgba(90, 18, 10, 0.24)),
        linear-gradient(180deg, rgba(32, 35, 40, 0.96), rgba(11, 12, 14, 0.98)) !important;
    color: #fff !important;
    font-family: "Rajdhani", sans-serif !important;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 10px 24px rgba(0,0,0,0.30), inset 0 0 0 1px rgba(255,255,255,0.035) !important;
    transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease, filter 0.14s ease; }
:where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) button:hover, :where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) button[type="button"]:hover, :where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) input[type="button"]:hover, :where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) input[type="submit"]:hover { transform: translateY(-1px);
    border-color: rgba(250, 96, 79, 0.52) !important;
    box-shadow: 0 14px 28px rgba(0,0,0,0.36), 0 0 22px rgba(255,78,45,0.12) !important; }
:where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) button:disabled { opacity: 0.52 !important;
    filter: grayscale(0.45);
    cursor: not-allowed !important; }
:where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) button, :where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) button[type="button"], :where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) input[type="button"], :where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) input[type="submit"] { min-height: 32px; }
:where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) button, :where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) button[type="button"], :where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) input[type="button"], :where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) input[type="submit"] { border-radius: 10px !important;
    border: 1px solid rgba(228, 82, 66, 0.24) !important;
    background:
        linear-gradient(180deg, rgba(45, 49, 54, 0.96), rgba(13, 15, 18, 0.98)) !important;
    color: rgba(243, 248, 255, 0.94) !important;
    box-shadow: 0 8px 18px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.04) !important; }
:where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) button:hover, :where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) button[type="button"]:hover, :where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) input[type="button"]:hover, :where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) input[type="submit"]:hover { border-color: rgba(194, 199, 205, 0.38) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 24px rgba(0,0,0,0.30), 0 0 18px rgba(194, 199, 205, 0.07), inset 0 1px 0 rgba(255,255,255,0.052) !important; }
:where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) input, :where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) select, :where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) textarea { border-color: rgba(223, 225, 229, 0.12) !important;
    background: linear-gradient(180deg, rgba(16, 19, 22, 0.96), rgba(8, 9, 11, 0.98)) !important; }
.camp-status-icon { position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    line-height: 1;
    pointer-events: none;
    z-index: 10;
    text-shadow: 0 0 5px rgba(0,0,0,0.8), 0 0 10px currentColor;
    opacity: 0.9; }
.camp-idle .camp-status-icon::after { content: "⚠️";
    color: #f91f06;
    filter: drop-shadow(0 0 2px #000);
    animation: idle-bounce 1s infinite alternate; }
.camp-working .camp-status-icon::after { content: "⛺";
    filter: drop-shadow(0 0 2px #000); }
.map-tile.camp-idle { box-shadow: inset 0 0 10px rgba(255, 170, 0, 0.4) !important;
    border: 1px solid rgba(255, 170, 0, 0.8) !important; }
.dispatch-terminal { display: flex;
    flex-direction: column;
    gap: 15px; }
.coord-display { background: #050505;
    border: 1px solid #333;
    padding: 10px;
    border-radius: 8px;
    box-shadow: inset 3px 3px 8px var(--shadow-dark);
    display: flex;
    justify-content: space-around;
    align-items: center; }
.coord-input-group { display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px; }
.coord-input-group label { font-size: 0.85em;
        color: gray;
        text-transform: uppercase; }
.coord-field { width: 60px;
    background: #111;
    border: 1px solid var(--ui-color);
    color: var(--ui-color);
    text-align: center;
    font-family: monospace;
    font-size: 1.1em;
    padding: 5px;
    border-radius: 4px;
    box-shadow: 0 0 5px var(--ui-glow); }
.dispatch-unit-item { background: linear-gradient(90deg, #1a1a1a 0%, #111 100%);
    border: 1px solid #222;
    margin-bottom: 5px;
    padding: 8px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: 0.2s; }
.dispatch-unit-item:hover { border-color: var(--ui-info);
        background: #1d1d1d; }
.unit-info-mini { display: flex;
    flex-direction: column;
    width: 60%; }
.unit-qty-input { width: 50px;
    background: #000;
    border: 1px solid #444;
    color: #fff;
    text-align: center;
    padding: 4px;
    font-family: monospace;
    border-radius: 4px; }
.auth-panel { background: #0a0a0a;
    border-top: 1px solid #333;
    padding-top: 15px;
    margin-top: 10px; }
.mission-select { width: 100%;
    padding: 10px;
    background: #1a1a1a;
    color: var(--ui-color);
    border: 1px solid var(--ui-color);
    border-radius: 4px;
    font-family: monospace;
    margin-bottom: 10px;
    font-size: 1.05em; }
:where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) .tech-card-btn { background: rgba(0, 255, 0, 0.05);
    color: var(--ui-color);
    border: 1px solid var(--ui-color);
    padding: 12px;
    font-family: "Orbitron", sans-serif;
    font-size: 0.9em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.2s ease;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    border-radius: 0; }
:where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) .tech-card-btn:hover:not(:disabled) { background: var(--ui-color);
        color: #000;
        box-shadow: 0 0 15px var(--ui-color);
        transform: scale(1.02); }
:where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) .tech-card-btn:disabled { background: repeating-linear-gradient( -45deg, rgba(76, 84, 94, 0.15), rgba(76, 84, 94, 0.15) 10px, transparent 10px, transparent 20px ), linear-gradient(90deg, #050505 0%, #1a1a1a 50%, #050505 100%);
        background-size: 28px 28px, 200% 100%;
        animation: button-processing 1.5s linear infinite;
        color: var(--ui-info);
        border-color: var(--ui-info);
        box-shadow: inset 0 0 15px rgba(76, 84, 94, 0.2), 0 0 10px rgba(76, 84, 94, 0.1);
        text-shadow: 0 0 8px var(--ui-info);
        cursor: not-allowed;
        position: relative; }
:where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) .tech-card-btn { background: rgba(0, 255, 0, 0.05);
    color: var(--ui-color);
    border: 1px solid var(--ui-color);
    padding: 10px;
    font-family: "Orbitron", sans-serif;
    font-size: 0.9em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.2s ease;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    width: 100%; }
:where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) .tech-card-btn:hover:not(:disabled) { background: var(--ui-color);
        color: #000;
        box-shadow: 0 0 15px var(--ui-color);
        transform: scale(1.02); }
:where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) .tech-card-btn:disabled { background: repeating-linear-gradient(-45deg, rgba(76, 84, 94, 0.1), rgba(76, 84, 94, 0.1) 5px, transparent 5px, transparent 10px), #050505;
        border-color: #333;
        color: #555;
        cursor: not-allowed;
        clip-path: none; }
:where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) .tech-input { width: 60px;
    background: #000;
    color: var(--ui-info);
    border: 1px solid #333;
    border-bottom: 2px solid var(--ui-info);
    text-align: center;
    font-family: monospace;
    font-weight: bold;
    font-size: 1.1em;
    border-radius: 0;
    box-shadow: inset 2px 2px 5px #000;
    transition: 0.2s; }
:where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) .tech-input:focus { outline: none;
        border-color: var(--ui-info);
        box-shadow: inset 2px 2px 5px #000, 0 0 10px var(--ui-info-dark-glow);
        transform: scale(1.05); }
.payload-container { background: linear-gradient(180deg, #0f0f11 0%, #050505 100%);
    padding: 15px;
    font-family: monospace;
    font-size: 0.95em;
    border: 1px solid #222;
    border-radius: 6px;
    margin-bottom: 20px;
    box-shadow: inset 0 0 15px rgba(76, 84, 94, 0.05); }
.payload-bar-bg { width: 100%;
    height: 8px;
    background: #000;
    border: 1px solid #333;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.9); }
.payload-bar-fill { height: 100%;
    background: linear-gradient(90deg, #1f2125 0%, var(--ui-info) 100%);
    box-shadow: 0 0 10px var(--ui-info);
    transition: width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background 0.3s;
    border-radius: 2px; }
.payload-critical { color: var(--ui-danger-light) !important;
    text-shadow: 0 0 8px var(--ui-danger-light);
    animation: pulse-danger 1s infinite alternate; }
.payload-bar-fill.overload { background: linear-gradient(90deg, #440000 0%, var(--ui-danger-light) 100%);
    box-shadow: 0 0 15px var(--ui-danger-light); }
.btn-launch { position: relative;
    background: rgba(76, 84, 94, 0.05);
    color: var(--ui-info);
    border: 1px solid var(--ui-info);
    padding: 15px;
    font-family: "Orbitron", sans-serif;
    font-size: 1em;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 3px;
    cursor: pointer;
    transition: all 0.3s ease;
    clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
    overflow: hidden; }
.btn-launch:hover:not(:disabled) { background: var(--ui-info);
        color: #000;
        box-shadow: 0 0 25px var(--ui-info-dark-glow);
        transform: scale(1.02);
        letter-spacing: 4px; }
.btn-launch::before { content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 50%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
        transform: skewX(-45deg);
        transition: 0.5s;
        pointer-events: none; }
.btn-launch:hover:not(:disabled)::before { left: 200%;
        transition: 0.7s ease-in-out; }
.btn-launch:active:not(:disabled) { transform: scale(0.98);
        background: #fff;
        color: #000;
        box-shadow: 0 0 40px #fff;
        border-color: #fff; }
.command-accordion { margin-bottom: 12px;
    border-color: rgba(76, 84, 94, 0.22);
    background: rgba(5, 5, 5, 0.65); }
.command-accordion summary { color: var(--ui-highlight);
    font-size: 0.95em; }
.command-accordion-body { max-height: 320px;
    padding: 10px;
    background: #080808;
    overflow-y: auto;
    overscroll-behavior-y: auto;
    overscroll-behavior-x: contain; }
.command-accordion-cargo summary { color: var(--ui-info); }
.command-accordion-cargo .queue-accordion-count { min-width: auto;
    height: auto;
    max-width: 150px;
    padding: 2px 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.66em;
    color: var(--ui-info);
    border-color: rgba(76, 84, 94, 0.35);
    background: rgba(76, 84, 94, 0.08); }
@media (max-width: 768px) { .command-accordion-body { max-height: 260px;
        -webkit-overflow-scrolling: touch; } }
@media (max-width: 768px) { .command-accordion-cargo .queue-accordion-count { max-width: 110px; } }
.dispatch-terminal { background: linear-gradient(180deg, rgba(20, 23, 26, 0.92), rgba(9, 11, 13, 0.92)) !important;
    border: 1px solid rgba(172, 178, 187, 0.22) !important;
    border-top: 1px solid rgba(172, 178, 187, 0.42) !important;
    border-radius: 14px !important;
    box-shadow: 0 18px 42px rgba(0,0,0,0.38), inset 0 0 24px rgba(172, 178, 187, 0.045) !important; }
.dispatch-terminal { border-radius: 14px !important;
    background: linear-gradient(135deg, rgba(22, 26, 30, 0.90), rgba(9, 10, 11, 0.96)) !important;
    border: 1px solid rgba(255,255,255,0.075) !important;
    border-top-color: rgba(172, 178, 187, 0.24) !important;
    box-shadow: 0 18px 42px rgba(0,0,0,0.34), inset 0 0 0 1px rgba(255,255,255,0.028) !important; }
.dispatch-terminal h3 { border-radius: 999px !important;
    background: linear-gradient(90deg, rgba(250, 96, 79, 0.12), rgba(172, 178, 187, 0.045), transparent) !important;
    border: 1px solid rgba(250, 96, 79, 0.22) !important;
    color: rgba(253, 168, 158, 0.96) !important;
    text-shadow: 0 0 12px rgba(255, 78, 45, 0.20); }
.dispatch-terminal { border-radius: 16px !important;
    background:
        linear-gradient(135deg, rgba(21, 24, 28, 0.88), rgba(9, 11, 13, 0.95)) !important;
    border: 1px solid rgba(223, 225, 229, 0.080) !important;
    border-top-color: rgba(194, 199, 205, 0.18) !important;
    box-shadow: 0 18px 48px rgba(0,0,0,0.36), inset 0 1px 0 rgba(255,255,255,0.035) !important; }
.dispatch-terminal h3 { border-radius: 999px !important;
    color: rgba(243, 244, 246, 0.90) !important;
    background: linear-gradient(90deg, rgba(194, 199, 205, 0.09), rgba(228, 82, 66, 0.055), transparent) !important;
    border: 1px solid rgba(223, 225, 229, 0.095) !important;
    text-shadow: 0 0 12px rgba(194, 199, 205, 0.10) !important; }
:where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) .tech-card-btn { border-radius: 10px !important; }
:where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) .tech-card-btn { min-height: 38px;
    border-radius: 11px !important;
    letter-spacing: .055em;
    text-transform: uppercase; }
#vue-dispatch-center.dispatch-terminal { padding: 14px !important;
    gap: 12px !important;
    overflow: visible !important;
    background:
        radial-gradient(circle at 18% 0%, rgba(172, 178, 187, 0.10), transparent 34%),
        linear-gradient(180deg, rgba(20, 23, 27, 0.96), rgba(9, 10, 11, 0.98)) !important;
    border: 1px solid rgba(191, 196, 203, 0.20) !important;
    border-top-color: rgba(191, 196, 203, 0.36) !important;
    box-shadow:
        0 20px 48px rgba(0, 0, 0, 0.42),
        inset 0 0 0 1px rgba(255,255,255,0.030),
        inset 0 18px 44px rgba(191, 196, 203, 0.030) !important; }
#vue-dispatch-center.dispatch-terminal > h2 { position: relative;
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    margin: 0 0 4px !important;
    padding: 8px 12px 10px !important;
    border: 1px solid rgba(191, 196, 203, 0.13) !important;
    border-bottom-color: rgba(250, 96, 79, 0.18) !important;
    border-radius: 12px !important;
    background:
        linear-gradient(90deg, rgba(191, 196, 203, 0.050), rgba(250, 96, 79, 0.045), rgba(191, 196, 203, 0.020)) !important;
    color: rgba(233, 246, 255, 0.96) !important;
    text-shadow: 0 0 14px rgba(191, 196, 203, 0.18) !important;
    font-family: "Orbitron", sans-serif !important;
    font-size: 0.88rem !important;
    letter-spacing: 2.1px !important;
    line-height: 1.1;
    overflow: hidden; }
#vue-dispatch-center.dispatch-terminal > h2::before, #vue-dispatch-center.dispatch-terminal > h2::after { content: "";
    position: absolute;
    top: 50%;
    width: 34px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(250, 96, 79, 0.55));
    transform: translateY(-50%);
    pointer-events: none; }
#vue-dispatch-center.dispatch-terminal > h2::before { left: 12px; }
#vue-dispatch-center.dispatch-terminal > h2::after { right: 12px;
    transform: translateY(-50%) scaleX(-1); }
#vue-dispatch-center .coord-display { justify-content: stretch !important;
    gap: 8px !important;
    padding: 10px !important;
    border-radius: 12px !important;
    background: rgba(5, 5, 6, 0.50) !important;
    border: 1px solid rgba(223, 225, 229, 0.070) !important;
    box-shadow: inset 0 0 16px rgba(0,0,0,0.48) !important; }
#vue-dispatch-center .coord-input-group { min-width: 0;
    flex: 1 1 0;
    align-items: stretch !important; }
#vue-dispatch-center .coord-input-group label { margin-bottom: 3px;
    color: rgba(203, 207, 212, 0.78) !important;
    font-family: "Rajdhani", sans-serif;
    font-size: 0.72rem !important;
    font-weight: 700;
    letter-spacing: 1.4px; }
#vue-dispatch-center .coord-field, #vue-dispatch-center .tech-input, #vue-dispatch-center select, #vue-dispatch-center .mission-select, #vue-dispatch-center .unit-qty-input { min-height: 32px;
    border-radius: 9px !important;
    background: rgba(6, 7, 9, 0.82) !important;
    border: 1px solid rgba(191, 196, 203, 0.16) !important;
    color: rgba(235, 249, 255, 0.94) !important;
    box-shadow: inset 0 0 12px rgba(0,0,0,0.42) !important;
    outline: none !important; }
#vue-dispatch-center .coord-field:focus, #vue-dispatch-center .tech-input:focus, #vue-dispatch-center select:focus, #vue-dispatch-center .mission-select:focus, #vue-dispatch-center .unit-qty-input:focus { border-color: rgba(191, 196, 203, 0.52) !important;
    box-shadow: 0 0 0 1px rgba(191, 196, 203, 0.08), inset 0 0 12px rgba(0,0,0,0.42) !important; }
#vue-dispatch-center .queue-accordion.command-accordion { background:
        linear-gradient(135deg, rgba(18, 21, 24, 0.92), rgba(9, 10, 11, 0.96)) !important;
    border: 1px solid rgba(223, 225, 229, 0.075) !important;
    border-top-color: rgba(191, 196, 203, 0.18) !important;
    border-radius: 13px !important;
    box-shadow: 0 10px 26px rgba(0,0,0,0.26), inset 0 1px 0 rgba(255,255,255,0.030) !important;
    overflow: hidden; }
#vue-dispatch-center .queue-accordion.command-accordion > summary { min-height: 38px;
    padding: 9px 11px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.045) !important;
    background:
        linear-gradient(90deg, rgba(191, 196, 203, 0.070), rgba(250, 96, 79, 0.035), rgba(191, 196, 203, 0.015)) !important;
    font-family: "Rajdhani", sans-serif !important;
    font-size: 0.92rem !important;
    letter-spacing: 0.8px !important; }
#vue-dispatch-center .queue-accordion.command-accordion > summary span:first-child { color: rgba(235, 247, 255, 0.94) !important;
    font-weight: 800;
    text-transform: uppercase; }
#vue-dispatch-center .queue-accordion-count { min-width: auto;
    padding: 3px 8px !important;
    border-radius: 999px !important;
    background: rgba(191, 196, 203, 0.08) !important;
    border: 1px solid rgba(191, 196, 203, 0.14) !important;
    color: rgba(217, 219, 224, 0.90) !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.8px; }
#vue-dispatch-center .queue-accordion-body { padding: 10px !important;
    background: rgba(0,0,0,0.12) !important; }
#vue-dispatch-center .dispatch-unit-item { margin-bottom: 7px !important;
    padding: 9px !important;
    border-radius: 10px !important;
    background: rgba(13, 15, 17, 0.86) !important;
    border: 1px solid rgba(223, 225, 229, 0.070) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.025) !important; }
#vue-dispatch-center .dispatch-unit-item:hover { background: rgba(18, 21, 24, 0.94) !important;
    border-color: rgba(191, 196, 203, 0.25) !important;
    transform: translateY(-1px); }
#vue-dispatch-center .unit-info-mini strong { color: rgba(235, 247, 255, 0.95) !important;
    font-family: "Rajdhani", sans-serif;
    font-size: 0.98rem !important;
    line-height: 1.05; }
#vue-dispatch-center .unit-info-mini span { color: rgba(189, 194, 201, 0.78) !important; }
#vue-dispatch-center button { border-radius: 9px !important;
    font-family: "Rajdhani", sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: 0.8px !important; }
#vue-dispatch-center .payload-container { border: 1px solid rgba(191, 196, 203, 0.10);
    border-radius: 12px;
    padding: 10px;
    background: rgba(7, 8, 10, 0.56); }
#vue-dispatch-center .payload-bar-bg { height: 8px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,0.055) !important;
    overflow: hidden;
    box-shadow: inset 0 0 8px rgba(0,0,0,0.55) !important; }
#vue-dispatch-center .payload-bar-fill { border-radius: 999px !important; }
#vue-dispatch-center .camp-provision-slider-panel, #vue-dispatch-center [style*="Gründungspaket erforderlich"] { border-radius: 12px !important;
    border-color: rgba(250, 96, 79, 0.22) !important;
    background: rgba(250, 96, 79, 0.060) !important;
    box-shadow: inset 0 0 18px rgba(250, 96, 79, 0.035) !important; }
#vue-dispatch-center input[type="range"] { accent-color: rgb(191, 196, 203); }
@media (max-width: 1350px) { #vue-dispatch-center.dispatch-terminal { padding: 12px !important; } }
@media (max-width: 1350px) { #vue-dispatch-center.dispatch-terminal > h2 { font-size: 0.80rem !important;
        letter-spacing: 1.6px !important; } }
@media (max-width: 1350px) { #vue-dispatch-center .coord-display { flex-wrap: wrap; } }
#vue-redeploy-overlay .redeploy-modal-overlay { background:
        radial-gradient(circle at 50% 0%, rgba(191, 196, 203, 0.12), transparent 36%),
        radial-gradient(circle at 92% 12%, rgba(250, 96, 79, 0.10), transparent 28%),
        rgba(0, 0, 0, 0.88) !important;
    backdrop-filter: blur(10px) saturate(120%); }
#vue-redeploy-overlay .redeploy-panel { width: min(560px, calc(100vw - 28px)) !important;
    border-radius: 18px !important;
    border: 1px solid rgba(191, 196, 203, 0.22) !important;
    background:
        linear-gradient(180deg, rgba(20, 23, 27, 0.98), rgba(8, 9, 10, 0.99)) !important;
    box-shadow:
        0 28px 80px rgba(0, 0, 0, 0.70),
        0 0 0 1px rgba(255, 255, 255, 0.025) inset,
        0 0 34px rgba(191, 196, 203, 0.10) !important;
    padding: 18px !important; }
#vue-redeploy-overlay .redeploy-panel > h2 { margin: -2px 0 16px !important;
    padding: 0 0 13px !important;
    border-bottom: 1px solid rgba(191, 196, 203, 0.16) !important;
    color: rgba(231, 246, 255, 0.94) !important;
    font-size: 0.88rem !important;
    letter-spacing: 2px !important;
    text-align: left !important;
    text-transform: uppercase !important;
    position: relative; }
#vue-redeploy-overlay .redeploy-panel > h2::before { content: "TRANSFER";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(191, 196, 203, 0.10);
    border: 1px solid rgba(191, 196, 203, 0.20);
    color: rgba(191, 196, 203, 0.92);
    font-size: 0.56rem;
    letter-spacing: 1.2px;
    vertical-align: middle; }
#vue-redeploy-overlay .redeploy-units-list { max-height: 210px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(223, 225, 229, 0.09) !important;
    background:
        linear-gradient(180deg, rgba(16, 18, 21, 0.88), rgba(6, 7, 9, 0.94)) !important;
    padding: 9px !important; }
#vue-redeploy-overlay .dispatch-unit-item { display: grid !important;
    grid-template-columns: minmax(0, 1fr) 78px;
    align-items: center;
    gap: 10px;
    margin: 0 0 7px !important;
    padding: 9px !important;
    border: 1px solid rgba(255, 255, 255, 0.055) !important;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.030); }
#vue-redeploy-overlay .dispatch-unit-item:last-child { margin-bottom: 0 !important; }
#vue-redeploy-overlay .unit-info-mini { display: grid;
    gap: 3px; }
#vue-redeploy-overlay .unit-info-mini strong { color: rgba(191, 196, 203, 0.92) !important;
    font-size: 0.82rem;
    letter-spacing: 0.35px; }
#vue-redeploy-overlay .unit-info-mini span { color: rgba(223, 225, 229, 0.56) !important;
    font-size: 0.72rem !important; }
#vue-redeploy-overlay .unit-qty-input, #vue-redeploy-overlay .coord-field, #vue-redeploy-overlay .tech-input, #vue-redeploy-overlay select { min-height: 34px;
    border-radius: 10px !important;
    border: 1px solid rgba(191, 196, 203, 0.14) !important;
    background: rgba(0, 0, 0, 0.42) !important;
    color: rgba(232, 247, 255, 0.92) !important;
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.40) !important; }
#vue-redeploy-overlay .unit-qty-input:focus, #vue-redeploy-overlay .coord-field:focus, #vue-redeploy-overlay .tech-input:focus, #vue-redeploy-overlay select:focus { outline: none !important;
    border-color: rgba(191, 196, 203, 0.42) !important;
    box-shadow: 0 0 0 3px rgba(191, 196, 203, 0.08), inset 0 0 12px rgba(0,0,0,0.44) !important; }
#vue-redeploy-overlay .redeploy-cargo-panel, #vue-redeploy-overlay .payload-container, #vue-redeploy-overlay .coord-display { border-radius: 14px !important;
    border: 1px solid rgba(223, 225, 229, 0.08) !important;
    background:
        linear-gradient(180deg, rgba(15, 17, 19, 0.80), rgba(6, 7, 9, 0.88)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025) !important; }
#vue-redeploy-overlay .redeploy-cargo-panel { padding: 12px !important; }
#vue-redeploy-overlay .coord-input-group label, #vue-redeploy-overlay label { color: rgba(250, 96, 79, 0.82) !important;
    font-size: 0.70rem !important;
    letter-spacing: 1px;
    text-transform: uppercase; }
#vue-redeploy-overlay .payload-bar-bg { height: 9px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.060) !important;
    overflow: hidden;
    box-shadow: inset 0 0 8px rgba(0,0,0,0.55) !important; }
#vue-redeploy-overlay .payload-bar-fill { border-radius: 999px !important;
    background: linear-gradient(90deg, rgba(191, 196, 203, 0.84), rgba(250, 96, 79, 0.88)) !important; }
#vue-redeploy-overlay .payload-bar-fill.overload { background: linear-gradient(90deg, rgba(255,92,92,0.90), rgba(250, 96, 79, 0.92)) !important; }
#vue-redeploy-overlay .redeploy-actions { display: grid !important;
    grid-template-columns: 0.85fr 1.4fr;
    gap: 10px !important; }
#vue-redeploy-overlay .redeploy-actions button { min-height: 42px;
    border-radius: 12px !important;
    font-weight: 900 !important;
    letter-spacing: 1.1px !important;
    text-transform: uppercase; }
#vue-redeploy-overlay .redeploy-actions .btn-launch { background:
        linear-gradient(135deg, rgba(250, 96, 79, 0.90), rgba(255, 96, 72, 0.88)) !important;
    border: 1px solid rgba(252, 149, 137, 0.56) !important;
    color: rgba(12, 7, 2, 0.96) !important;
    box-shadow: 0 10px 26px rgba(255, 120, 64, 0.16) !important; }
#vue-redeploy-overlay .redeploy-actions .btn-launch:disabled { opacity: 0.42 !important;
    filter: grayscale(0.7);
    cursor: not-allowed !important; }
#vue-redeploy-overlay .redeploy-actions .tech-card-btn { background: rgba(70, 10, 12, 0.42) !important;
    border-color: rgba(255, 96, 96, 0.30) !important;
    color: rgba(255, 140, 140, 0.92) !important; }
@media (max-width: 720px) { #vue-redeploy-overlay .redeploy-panel { padding: 14px !important; } }
@media (max-width: 720px) { #vue-redeploy-overlay .redeploy-cargo-panel > div { grid-template-columns: 1fr !important; } }
@media (max-width: 720px) { #vue-redeploy-overlay .coord-input-group[style*="grid-column"] { grid-column: auto !important; } }
@media (max-width: 720px) { #vue-redeploy-overlay .redeploy-actions { grid-template-columns: 1fr !important; } }
#vue-dispatch-center.dispatch-terminal { min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important; }
#vue-dispatch-center .queue-accordion-tools, #vue-dispatch-center .queue-accordion-count { min-width: 0 !important;
    max-width: 100% !important; }
#vue-dispatch-center .queue-accordion-count { overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important; }
#vue-dispatch-center .command-accordion-body { max-width: 100% !important;
    overflow-x: hidden !important; }
#vue-dispatch-center.dispatch-terminal { border-color: rgba(195, 199, 206, 0.14) !important;
    background:
        radial-gradient(circle at 8% 0%, rgba(199, 203, 209, 0.055), transparent 34%),
        radial-gradient(circle at 92% 8%, rgba(250, 94, 77, 0.035), transparent 26%),
        linear-gradient(180deg, rgba(15, 17, 19, 0.98), rgba(6, 7, 8, 0.99)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.035),
        0 22px 54px rgba(0, 0, 0, 0.34) !important; }
#vue-dispatch-center.dispatch-terminal { border-radius: 22px !important;
    border: 1px solid rgba(205, 209, 214, 0.16) !important;
    background:
        radial-gradient(circle at 12% 0%, rgba(205, 209, 214, 0.10), transparent 36%),
        linear-gradient(180deg, rgba(20, 23, 27, 0.94), rgba(9, 10, 11, 0.98)) !important;
    box-shadow:
        0 22px 46px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        inset 0 0 34px rgba(205, 209, 214, 0.018) !important; }
#vue-dispatch-center.dispatch-terminal > h2 { border-bottom-color: rgba(205, 209, 214, 0.16) !important;
    color: rgba(245, 246, 247, 0.94) !important;
    text-shadow: none !important;
    letter-spacing: 0.12em !important; }
#vue-dispatch-center .coord-display { border-radius: 16px !important;
    border: 1px solid rgba(205, 209, 214, 0.13) !important;
    background: rgba(0, 0, 0, 0.25) !important;
    padding: 12px !important; }
#vue-dispatch-center .coord-field, #vue-dispatch-center select, #vue-dispatch-center input[type="number"] { border-color: rgba(205, 209, 214, 0.15) !important;
    background: rgba(0, 0, 0, 0.36) !important;
    color: rgba(233, 248, 255, 0.94) !important;
    box-shadow: inset 0 0 14px rgba(0,0,0,0.28) !important; }
#vue-dispatch-center .coord-field:focus, #vue-dispatch-center select:focus, #vue-dispatch-center input[type="number"]:focus { outline: none !important;
    border-color: rgba(205, 209, 214, 0.42) !important;
    box-shadow: 0 0 0 2px rgba(205, 209, 214, 0.08), inset 0 0 14px rgba(0,0,0,0.30) !important; }
#vue-dispatch-center .queue-accordion.command-accordion { border-radius: 16px !important;
    border-color: rgba(205, 209, 214, 0.13) !important;
    background: rgba(0, 0, 0, 0.22) !important;
    overflow: hidden; }
#vue-dispatch-center .queue-accordion.command-accordion > summary { min-width: 0;
    background: linear-gradient(90deg, rgba(205, 209, 214, 0.055), rgba(255,255,255,0.01)) !important; }
.dispatch-unit-item { border-radius: 13px !important;
    border-color: rgba(205, 209, 214, 0.11) !important;
    background: rgba(0, 0, 0, 0.26) !important; }
:where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) .tech-card-btn, :where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) button { -webkit-tap-highlight-color: transparent; }
:where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) .tech-card-btn:focus-visible, :where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) button:focus-visible { outline: 2px solid rgba(205, 209, 214, 0.42) !important;
    outline-offset: 2px !important; }
#vue-dispatch-center { scrollbar-width: thin;
    scrollbar-color: rgba(205, 209, 214, 0.34) rgba(0,0,0,0.20); }
body.rh-quick-modal-open { overflow: hidden; }
.rh-quick-settings-overlay { position: fixed;
    inset: 0;
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(14px, 3vw, 28px);
    background:
        radial-gradient(circle at 50% 12%, rgba(174, 180, 189, 0.13), transparent 38%),
        rgba(4, 5, 6, 0.88);
    backdrop-filter: blur(12px) saturate(1.08); }
.rh-quick-settings-shell { width: min(560px, 100%);
    max-height: min(88vh, 860px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: #e9f7ff;
    font-family: var(--font-ui, "Rajdhani", "Courier New", monospace);
    border: 1px solid rgba(194, 199, 205, 0.34);
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(20, 23, 27, 0.98), rgba(9, 10, 11, 0.985)),
        rgba(12, 13, 15, 0.98);
    box-shadow:
        0 28px 90px rgba(0, 0, 0, 0.78),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 0 1px rgba(255, 255, 255, 0.02); }
.rh-quick-settings-head { display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid rgba(194, 199, 205, 0.18);
    background:
        linear-gradient(90deg, rgba(194, 199, 205, 0.10), transparent 56%),
        rgba(255, 255, 255, 0.025); }
.rh-quick-kicker { margin-bottom: 4px;
    color: rgba(218, 221, 225, 0.72);
    font: 700 0.7rem var(--font-display, "Orbitron", monospace);
    letter-spacing: 0.24em;
    text-transform: uppercase; }
.rh-quick-settings-head h3 { margin: 0;
    color: #f4fbff;
    font-size: clamp(1.12rem, 2.4vw, 1.42rem);
    letter-spacing: 0.06em;
    text-transform: uppercase; }
.rh-quick-close, .rh-quick-action-icon { appearance: none;
    border: 1px solid rgba(218, 221, 225, 0.18);
    color: rgba(230, 246, 255, 0.74);
    background: rgba(255, 255, 255, 0.045);
    cursor: pointer;
    transition: transform .16s ease, border-color .16s ease, color .16s ease, background .16s ease; }
.rh-quick-close { width: 34px;
    height: 34px;
    border-radius: 999px;
    font-size: 1.35rem;
    line-height: 1; }
.rh-quick-close:hover, .rh-quick-action-icon:hover { transform: translateY(-1px);
    border-color: rgba(194, 199, 205, 0.52);
    color: #fff;
    background: rgba(194, 199, 205, 0.12); }
.rh-quick-settings-body { overflow: auto;
    padding: 16px 18px 6px;
    scrollbar-width: thin;
    scrollbar-color: rgba(194, 199, 205, 0.5) rgba(0, 0, 0, 0.25); }
.rh-quick-accordion { margin: 0 0 10px;
    overflow: hidden;
    border: 1px solid rgba(206, 210, 215, 0.16);
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
        rgba(9, 10, 11, 0.72); }
.rh-quick-accordion-spacious { margin-top: 16px; }
.rh-quick-accordion summary { display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    cursor: pointer;
    user-select: none;
    list-style: none; }
.rh-quick-accordion summary::-webkit-details-marker { display: none; }
.rh-quick-accordion summary strong { min-width: 0;
    color: #f4fbff;
    letter-spacing: 0.035em;
    text-transform: uppercase; }
.rh-quick-accordion summary span { flex: 0 0 auto;
    color: rgba(228, 230, 233, 0.48);
    font-size: .75rem;
    letter-spacing: .08em;
    text-transform: uppercase; }
.rh-quick-accent-cyan summary strong { color: #cdd0d6; }
.rh-quick-accent-blue summary strong { color: #d4d7dc; }
.rh-quick-accent-red summary strong { color: #ff8e8e; }
.rh-quick-accent-gold summary strong { color: #fb7c6e; }
.rh-quick-accent-steel summary strong { color: #eaecee; }
.rh-quick-accordion[open] { border-color: rgba(194, 199, 205, 0.34);
    box-shadow: inset 0 0 0 1px rgba(194, 199, 205, 0.04); }
.rh-quick-accordion-body { padding: 12px 14px 14px;
    border-top: 1px solid rgba(206, 210, 215, 0.13);
    background: rgba(0, 0, 0, 0.12); }
.rh-quick-row { display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 34px;
    padding: 5px 0;
    font-size: .94rem;
    color: rgba(243, 244, 245, 0.88); }
.rh-quick-row + .rh-quick-row { border-top: 1px solid rgba(255, 255, 255, 0.045); }
.rh-quick-row-label { min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }
.rh-quick-field, .rh-quick-text-input, .rh-quick-select, .rh-quick-attack-send select { box-sizing: border-box;
    border: 1px solid rgba(129, 206, 255, 0.24);
    border-radius: 9px;
    color: #f6fbff;
    background: rgba(0, 0, 0, 0.34);
    font: 700 .9rem var(--font-ui, "Rajdhani", monospace);
    outline: none; }
.rh-quick-field { width: var(--qs-input-width, 54px);
    padding: 5px 7px;
    text-align: right; }
.rh-quick-select, .rh-quick-attack-send select { color-scheme: dark; }
.rh-quick-select option, .rh-quick-attack-send select option { color: #f6fbff;
    background: #14171b; }
.rh-quick-text-input, .rh-quick-select { display: block;
    width: 100%;
    margin-top: 5px;
    padding: 8px 9px; }
.rh-quick-field:focus, .rh-quick-text-input:focus, .rh-quick-select:focus, .rh-quick-attack-send select:focus { border-color: rgba(97, 214, 255, 0.68);
    box-shadow: 0 0 0 2px rgba(97, 214, 255, 0.12); }
.rh-quick-label { display: block;
    margin-top: 10px;
    color: rgba(232, 234, 236, 0.76);
    font-size: .84rem;
    letter-spacing: .04em;
    text-transform: uppercase; }
.rh-quick-hint, .rh-quick-empty { color: rgba(220, 222, 226, 0.58);
    font-size: .82rem;
    line-height: 1.42; }
.rh-quick-hint-compact { margin-top: 6px; }
.rh-quick-hint-indent { margin: 5px 0 0 26px; }
.rh-quick-subtitle { margin: 12px 0 5px;
    color: rgba(246, 251, 255, 0.78);
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase; }
.rh-quick-name-panel, .rh-quick-nested { margin-top: 12px;
    padding: 10px;
    border: 1px solid rgba(206, 210, 215, 0.14);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.025); }
.rh-quick-nested summary { cursor: pointer;
    color: #f2f7fb;
    font-weight: 800;
    letter-spacing: .05em; }
.rh-quick-group-stack { margin-top: 10px; }
.rh-quick-toggle, .rh-quick-toggle-stack label { display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(234, 246, 255, 0.82);
    cursor: pointer; }
.rh-quick-toggle input, .rh-quick-toggle-stack input { accent-color: #c3c7ce; }
.rh-quick-toggle-stack { margin: 10px 0 0 26px;
    gap: 5px;
    color: rgba(224, 227, 230, 0.70);
    font-size: .86rem; }
.rh-quick-manual { margin-top: 10px;
    transition: opacity .18s ease; }
.rh-quick-secondary-action, .rh-quick-primary, .rh-quick-secondary, .rh-quick-action-btn { appearance: none;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    transition: transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease; }
.rh-quick-secondary-action { width: 100%;
    margin-top: 10px;
    padding: 9px 10px;
    border: 1px solid rgba(206, 210, 215, 0.18);
    color: rgba(230, 246, 255, 0.82);
    background: rgba(255, 255, 255, 0.04); }
.rh-quick-actions { display: flex;
    gap: 10px;
    padding: 14px 18px 18px;
    border-top: 1px solid rgba(206, 210, 215, 0.14);
    background: rgba(255, 255, 255, 0.02); }
.rh-quick-primary, .rh-quick-secondary { flex: 1 1 0;
    padding: 11px 12px; }
.rh-quick-primary { border: 1px solid rgba(194, 199, 205, 0.54);
    color: #0c0e10;
    background: linear-gradient(135deg, #dadde1, #afb5be);
    box-shadow: 0 10px 26px rgba(175, 181, 190, 0.18); }
.rh-quick-secondary { border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(238, 246, 250, 0.84);
    background: rgba(255, 255, 255, 0.055); }
.rh-quick-secondary-action:hover, .rh-quick-primary:hover, .rh-quick-secondary:hover, .rh-quick-action-btn:hover { transform: translateY(-1px); }
.rh-quick-action-menu { position: fixed;
    left: 50%;
    bottom: 28px;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 9px;
    max-width: min(980px, calc(100vw - 28px));
    padding: 11px 13px;
    transform: translateX(-50%);
    border: 1px solid rgba(194, 199, 205, 0.34);
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(23, 27, 31, 0.98), rgba(8, 9, 11, 0.98));
    box-shadow:
        0 18px 48px rgba(0, 0, 0, 0.72),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px); }
.rh-quick-action-target { min-width: 82px;
    padding: 3px 12px 3px 4px;
    border-right: 1px solid rgba(206, 210, 215, 0.18);
    line-height: 1.05; }
.rh-quick-action-target span { display: block;
    color: rgba(220, 223, 227, 0.58);
    font: 800 .64rem var(--font-display, "Orbitron", monospace);
    letter-spacing: .18em; }
.rh-quick-action-target strong { display: block;
    margin-top: 3px;
    color: #fff;
    font-size: .98rem;
    letter-spacing: .08em; }
.rh-quick-action-btn { min-height: 36px;
    padding: 8px 13px;
    border: 1px solid rgba(194, 199, 205, 0.35);
    color: #f3f4f5;
    background: rgba(194, 199, 205, 0.075); }
.rh-quick-action-btn:hover { border-color: rgba(194, 199, 205, 0.70);
    background: rgba(194, 199, 205, 0.15);
    box-shadow: 0 8px 20px rgba(194, 199, 205, 0.10); }
.rh-quick-action-btn-blue { border-color: rgba(204, 208, 213, 0.46);
    color: #dee0e4;
    background: rgba(204, 208, 213, 0.10); }
.rh-quick-action-btn-gold { border-color: rgba(251, 124, 110, 0.50);
    color: #fb7c6e;
    background: rgba(251, 124, 110, 0.10); }
.rh-quick-action-btn-danger { border-color: rgba(255, 112, 112, 0.58);
    color: #ff9f9f;
    background: rgba(255, 78, 78, 0.105); }
.rh-quick-action-btn-combined { margin-left: 2px; }
.rh-quick-attack-send { display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px;
    border: 1px solid rgba(255, 112, 112, 0.28);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.22); }
.rh-quick-attack-send select { max-width: 190px;
    min-height: 36px;
    padding: 7px 9px; }
.rh-quick-action-icon { width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 1.05rem; }
.rh-quick-action-close { color: rgba(255, 180, 180, 0.64); }
.rh-coord-separator { align-self: end;
    padding-bottom: 9px;
    color: rgba(205, 209, 214, 0.56);
    font: 900 1.05rem "Orbitron", monospace;
    text-shadow: none; }
.rh-coord-target-select { margin-left: 0 !important; }
.rh-own-base-select { min-height: 34px;
    max-width: 126px;
    padding: 6px 8px;
    border-radius: 10px;
    font: 800 0.82rem "Rajdhani", system-ui, sans-serif;
    letter-spacing: 0.06em;
    cursor: pointer; }
.rh-unit-qty-control { display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0; }
.rh-mini-max-btn, .rh-foundation-btn { border-radius: 9px !important;
    border: 1px solid rgba(205, 209, 214, 0.18) !important;
    background: rgba(205, 209, 214, 0.075) !important;
    color: rgba(236, 238, 240, 0.92) !important;
    font: 900 0.75rem "Rajdhani", system-ui, sans-serif !important;
    letter-spacing: 0.08em !important;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.rh-mini-max-btn { min-height: 30px;
    padding: 4px 8px !important; }
.rh-mini-max-btn:hover, .rh-foundation-btn:hover { border-color: rgba(205, 209, 214, 0.38) !important;
    background: rgba(205, 209, 214, 0.12) !important;
    transform: translateY(-1px); }
.rh-command-cargo-grid { display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px; }
.rh-cargo-cell { align-items: stretch !important;
    min-width: 0;
    padding: 9px;
    border: 1px solid rgba(205, 209, 214, 0.105);
    border-radius: 13px;
    background: rgba(0, 0, 0, 0.18); }
.rh-cargo-cell-wide { grid-column: 1 / -1; }
.rh-cargo-cell-head, .rh-payload-head { display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 7px;
    min-width: 0; }
.rh-cargo-cell-head label, .rh-cargo-diamond-label { min-width: 0;
    color: rgba(222, 240, 248, 0.82) !important;
    font: 900 0.76rem "Rajdhani", system-ui, sans-serif;
    letter-spacing: 0.09em;
    text-transform: uppercase; }
.rh-cargo-diamond-label { color: rgba(126, 222, 255, 0.90) !important; }
.rh-max-link { display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    min-height: 24px;
    padding: 2px 7px;
    border: 1px solid rgba(205, 209, 214, 0.16);
    border-radius: 999px;
    background: rgba(205, 209, 214, 0.055);
    color: rgba(205, 209, 214, 0.92) !important;
    font: 900 0.68rem "Orbitron", monospace;
    letter-spacing: 0.08em;
    cursor: pointer;
    user-select: none; }
.rh-max-link:hover, .rh-max-link:focus-visible { border-color: rgba(205, 209, 214, 0.38);
    background: rgba(205, 209, 214, 0.11); }
.rh-cargo-input { width: 100% !important;
    min-height: 35px;
    box-sizing: border-box !important;
    padding: 7px 9px !important; }
.rh-foundation-package, .rh-camp-provision-card, .rh-travel-brief { border: 1px solid rgba(205, 209, 214, 0.13) !important;
    border-radius: 15px !important;
    background:
        radial-gradient(circle at 12% 0%, rgba(205, 209, 214, 0.055), transparent 38%),
        rgba(0, 0, 0, 0.24) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.025), 0 12px 26px rgba(0,0,0,0.16) !important; }
/* Live modules.css: das Gründungspaket in der Kommandozentrale. */
.rh-foundation-package { margin-top: 12px;
    padding: 12px;
    border-color: rgba(251, 112, 96, 0.22) !important;
    background:
        radial-gradient(circle at 0% 0%, rgba(251, 112, 96, 0.09), transparent 44%),
        rgba(0, 0, 0, 0.24) !important;
    color: rgba(236, 238, 240, 0.90);
    font-size: 0.88rem;
    line-height: 1.45; }
.rh-foundation-head { display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap; }
.rh-foundation-head strong { color: rgba(252, 141, 129, 0.95);
    font: 900 0.78rem "Orbitron", monospace;
    letter-spacing: 0.10em;
    text-transform: uppercase; }
.rh-foundation-text { margin-top: 4px;
    color: rgba(216, 219, 223, 0.68); }
.rh-foundation-detail { display: grid;
    gap: 5px;
    margin-top: 9px; }
.rh-payload-card { margin-top: 14px !important;
    padding: 11px !important; }
.rh-payload-head { margin-bottom: 8px;
    color: rgba(210, 214, 218, 0.70);
    font: 800 0.82rem "Rajdhani", system-ui, sans-serif;
    letter-spacing: 0.04em; }
.rh-payload-head strong { color: rgba(205, 209, 214, 0.95) !important;
    font-family: "Orbitron", monospace; }
.rh-payload-head strong span { color: rgba(143, 163, 177, 0.66) !important; }
.rh-camp-provision-card { margin: 12px 0 14px !important;
    padding: 13px !important;
    border-color: rgba(205, 209, 214, 0.18) !important; }
.rh-camp-provision-head { display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 9px; }
.rh-camp-provision-title { color: rgba(205, 209, 214, 0.92);
    font: 900 0.86rem "Orbitron", monospace;
    letter-spacing: 0.10em;
    text-transform: uppercase; }
.rh-camp-provision-desc, .rh-camp-provision-foot { color: rgba(205, 209, 214, 0.66);
    font: 700 0.82rem/1.35 "Rajdhani", system-ui, sans-serif; }
.rh-camp-provision-note { margin-top: 5px;
    color: rgba(251, 120, 106, 0.82);
    font: 800 0.80rem/1.35 "Rajdhani", system-ui, sans-serif; }
.rh-camp-provision-hours { white-space: nowrap;
    color: rgba(238, 247, 255, 0.94);
    font: 900 0.96rem "Orbitron", monospace; }
.rh-camp-range { width: 100%;
    display: block;
    margin: 9px 0;
    accent-color: rgb(205, 209, 214); }
.rh-camp-provision-values, .rh-camp-provision-extra { display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap; }
.rh-camp-provision-values { margin-top: 9px;
    color: rgba(237, 239, 241, 0.86);
    font: 800 0.88rem "Rajdhani", system-ui, sans-serif; }
.rh-camp-provision-extra, .rh-camp-provision-foot { margin-top: 5px;
    color: rgba(189, 194, 201, 0.62);
    font-size: 0.80rem; }
.rh-command-alert { margin-bottom: 10px;
    padding: 9px 10px;
    border-radius: 13px;
    text-align: center;
    font: 900 0.86rem "Rajdhani", system-ui, sans-serif;
    letter-spacing: 0.04em; }
.rh-command-alert-danger { border: 1px solid rgba(255, 92, 92, 0.36);
    background: rgba(255, 92, 92, 0.075);
    color: rgba(255, 142, 142, 0.96); }
.rh-command-alert-warn { border: 1px solid rgba(255, 190, 92, 0.32);
    background: rgba(255, 190, 92, 0.075);
    color: rgba(255, 210, 126, 0.95); }
.rh-travel-brief { margin-bottom: 11px;
    padding: 11px;
    font-family: "Rajdhani", system-ui, sans-serif; }
.rh-travel-brief-row { display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    min-width: 0;
    color: rgba(232, 234, 236, 0.82);
    font: 800 0.90rem "Rajdhani", system-ui, sans-serif; }
.rh-travel-brief-row + .rh-travel-brief-row { margin-top: 7px; }
.rh-travel-brief-main { padding-bottom: 8px;
    border-bottom: 1px solid rgba(205, 209, 214, 0.10);
    color: rgba(205, 209, 214, 0.92); }
.rh-travel-brief-row strong { min-width: 0;
    text-align: right;
    color: rgba(242, 249, 255, 0.95);
    font-family: "Orbitron", monospace;
    overflow-wrap: anywhere; }
.rh-travel-costs strong { color: rgba(255, 142, 142, 0.96); }
.rh-travel-camp strong { color: rgba(205, 209, 214, 0.96); }
.rh-travel-chip { display: inline-flex;
    align-items: center;
    margin-left: 5px;
    padding: 1px 5px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.10);
    font: 900 0.62rem "Rajdhani", system-ui, sans-serif;
    letter-spacing: 0.05em; }
.rh-travel-chip.cyan { color: #cdd0d6; border-color: rgba(205, 208, 214, 0.22); background: rgba(205, 208, 214, 0.055); }
.rh-travel-chip.green { color: #8df2bd; border-color: rgba(141, 242, 189, 0.20); background: rgba(141, 242, 189, 0.045); }
.rh-travel-chip.amber { color: #fc8b7e; border-color: rgba(252, 139, 126, 0.22); background: rgba(252, 139, 126, 0.055); }
.rh-travel-chip.violet { color: #dcdfe3; border-color: rgba(220, 223, 227, 0.22); background: rgba(220, 223, 227, 0.050); }
.rh-launch-button { width: 100% !important;
    display: block !important;
    box-sizing: border-box !important; }
.rh-fleet-action-redeploy { background: rgba(205, 209, 214, 0.12) !important;
    color: rgba(240, 241, 243, 0.96) !important;
    border-color: rgba(205, 209, 214, 0.28) !important; }
#vue-redeploy-overlay .redeploy-modal-overlay { position: fixed !important;
    inset: 0 !important;
    z-index: 11000 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100dvh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important; }
#vue-redeploy-overlay .redeploy-panel { max-width: 100% !important;
    max-height: calc(100dvh - 24px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    box-sizing: border-box !important; }
#vue-redeploy-overlay .redeploy-units-list { margin-bottom: 15px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important; }
#vue-redeploy-overlay .rh-unit-count-input { width: 70px !important;
    justify-self: end;
    text-align: center; }
#vue-redeploy-overlay .rh-travel-cost-row { display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 10px;
    padding: 0 0 9px;
    border-bottom: 1px solid rgba(205, 209, 214, 0.12);
    color: rgba(203, 207, 212, 0.82);
    font-size: 0.78rem;
    letter-spacing: 0.04em; }
#vue-redeploy-overlay .rh-travel-cost-row span { text-transform: uppercase; }
#vue-redeploy-overlay .rh-travel-cost-row strong { color: rgba(255, 142, 142, 0.95) !important;
    font: 900 0.82rem "Rajdhani", system-ui, sans-serif;
    white-space: nowrap; }
#vue-redeploy-overlay .rh-redeploy-target-grid { display: grid !important;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) !important;
    gap: 10px !important;
    margin: 0 0 15px !important;
    padding: 12px !important; }
#vue-redeploy-overlay .rh-redeploy-sector-group { min-width: 0; }
#vue-redeploy-overlay .rh-sector-input-row { display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 7px; }
#vue-redeploy-overlay .rh-sector-input-row > span { color: rgba(205, 209, 214, 0.75);
    font: 900 1rem "Orbitron", monospace; }
#vue-redeploy-overlay .rh-sector-input { width: 100% !important;
    text-align: center; }
#vue-redeploy-overlay .rh-redeploy-select { width: 100% !important;
    min-height: 37px;
    padding: 7px 9px !important;
    cursor: pointer; }
#vue-redeploy-overlay .rh-mission-type-block { display: grid;
    gap: 7px;
    margin-bottom: 15px; }
#vue-redeploy-overlay .rh-mission-type-block label { margin: 0 !important; }
#vue-redeploy-overlay .rh-redeploy-cancel, #vue-redeploy-overlay .rh-redeploy-confirm { min-width: 0; }
@media (max-width: 720px) { #vue-redeploy-overlay .rh-redeploy-target-grid { grid-template-columns: 1fr !important; } }
@media (max-width: 720px) { #vue-redeploy-overlay .rh-travel-cost-row { align-items: flex-start;
        flex-direction: column;
        gap: 5px; } }
@media (max-width: 720px) { #vue-redeploy-overlay .rh-travel-cost-row strong { white-space: normal; } }
@media (max-width: 720px) { #vue-redeploy-overlay .rh-cargo-cell-wide { grid-column: auto !important; } }
@media (max-width: 900px) { #vue-dispatch-center { width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 10px 0 !important;
        padding: 12px !important;
        border-radius: 12px !important;
        box-sizing: border-box !important;
        overflow: hidden !important; } }
@media (max-width: 900px) { :where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) input, :where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) select, :where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) button, :where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) textarea { font-size: 16px; } }
@media (max-width: 900px) { .coord-display { flex-wrap: wrap !important;
        gap: 8px !important; } }
@media (max-width: 900px) { .coord-input-group { min-width: 0 !important; } }
@media (max-width: 900px) { .coord-field, .unit-qty-input, :where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) .tech-input, .mission-select, .btn-launch { min-height: 38px !important;
        box-sizing: border-box !important; } }
@media (max-width: 900px) { .dispatch-terminal details > div { max-width: 100% !important;
        box-sizing: border-box !important; } }
@media (max-width: 900px) { .dispatch-unit-item { grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 8px !important; } }
@media (max-width: 900px) { .unit-qty-input { width: 76px !important; } }
@media (max-width: 900px) { .mission-select, .btn-launch { width: 100% !important; } }
@media (max-width: 480px) { .dispatch-unit-item { display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important; } }
@media (max-width: 480px) { .btn-launch { letter-spacing: 1px !important; } }
@media (max-width: 900px) { #vue-redeploy-overlay .redeploy-modal-overlay { align-items: flex-start !important;
        justify-content: center !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: calc(env(safe-area-inset-top, 0px) + 10px) 10px calc(env(safe-area-inset-bottom, 0px) + 10px) !important;
        box-sizing: border-box !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important; } }
@media (max-width: 900px) { #vue-redeploy-overlay .redeploy-panel { width: min(450px, 100%) !important;
        max-width: 100% !important;
        max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 20px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        box-sizing: border-box !important;
        padding: 14px !important;
        border-radius: 10px !important; } }
@media (max-width: 900px) { #vue-redeploy-overlay .redeploy-panel h2 { font-size: 1.05rem !important;
        line-height: 1.25 !important;
        margin-bottom: 12px !important;
        padding-bottom: 8px !important; } }
@media (max-width: 900px) { #vue-redeploy-overlay .redeploy-units-list { max-height: 32dvh !important;
        min-height: 96px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
        overscroll-behavior: contain !important; } }
@media (max-width: 900px) { #vue-redeploy-overlay .dispatch-unit-item { display: grid !important;
        grid-template-columns: minmax(0, 1fr) 78px !important;
        align-items: center !important;
        gap: 8px !important; } }
@media (max-width: 900px) { #vue-redeploy-overlay .unit-qty-input, #vue-redeploy-overlay .tech-input, #vue-redeploy-overlay .coord-field, #vue-redeploy-overlay select { min-height: 38px !important;
        font-size: 16px !important; } }
@media (max-width: 900px) { #vue-redeploy-overlay .redeploy-cargo-panel > div { grid-template-columns: 1fr !important;
        gap: 8px !important; } }
@media (max-width: 900px) { #vue-redeploy-overlay .redeploy-cargo-panel .coord-input-group[style*="grid-column"] { grid-column: auto !important; } }
@media (max-width: 900px) { #vue-redeploy-overlay .coord-display { display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important; } }
@media (max-width: 900px) { #vue-redeploy-overlay .coord-display > .coord-input-group { width: 100% !important; } }
@media (max-width: 900px) { #vue-redeploy-overlay .coord-display select { width: 100% !important; } }
@media (max-width: 900px) { #vue-redeploy-overlay .redeploy-actions { position: sticky !important;
        bottom: 0 !important;
        background: linear-gradient(to top, #0a0a0a 75%, rgba(10, 10, 10, 0)) !important;
        padding-top: 12px !important;
        margin-top: 4px !important;
        z-index: 2 !important; } }
@media (max-width: 420px) { #vue-redeploy-overlay .redeploy-panel { padding: 12px !important; } }
@media (max-width: 420px) { #vue-redeploy-overlay .redeploy-actions { flex-direction: column !important; } }
@media (max-width: 420px) { #vue-redeploy-overlay .redeploy-actions button { width: 100% !important;
        min-height: 42px !important; } }
@media (max-width: 900px) { #vue-dispatch-center { min-width: 0 !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        overflow-y: visible !important; } }
@media (max-width: 900px) { .dispatch-terminal { min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-wrap: anywhere; } }
@media (max-width: 900px) { .command-accordion-body { overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: auto !important;
        overscroll-behavior-x: contain !important;
        touch-action: pan-y !important; } }
@media (max-width: 900px) { .command-accordion-body { max-height: min(42dvh, 360px) !important; } }
@media (max-width: 900px) { :where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) input, :where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) select, :where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) textarea, :where(#vue-dispatch-center, #vue-redeploy-overlay, #quickActionMapMenu, #quickSettingsOverlay) button { max-width: 100% !important;
        box-sizing: border-box !important; } }
@media (max-width: 520px) { .rh-command-cargo-grid { grid-template-columns: 1fr !important; } }
@keyframes button-processing { 0% {
        background-position: 0 0, 200% 0;
    }

    100% {
        background-position: 28px 0, -200% 0;
    } }
@keyframes idle-bounce { 0% {
        transform: scale(0.9) translateY(1px);
    }

    100% {
        transform: scale(1.1) translateY(-1px);
    } }

/* Live setzt den Hover des Belagerungsknopfs im Schnellmenü per
   onmouseover; hier als Regel. */
#siegeQuickActionBtn:hover { background: var(--ui-highlight) !important; color: #000 !important; }

/* ===================================================================
   Konto: Zugriff verweigert, Sitzungsbildschirme, Toasts, Settings

   Wörtlich aus public/style gezogen: #authOverlay mit .auth-box
   (ZUGRIFF VERWEIGERT), .rh-session-screen (VERBINDUNG GETRENNT,
   ACCOUNT GELÖSCHT), #toastContainer mit .toast-message (live
   showToast) und #view-settings mit den Karten der Einstellungen. Die
   allgemeinen Regeln für button, input … sind wie beim Verband auf diese
   Bereiche begrenzt, samt content-box und font-size: medium.
   =================================================================== */

:where(#view-settings, #authOverlay, .rh-session-screen), :where(#view-settings, #authOverlay, .rh-session-screen) :where(*:not(button, select)), :where(#view-settings, #authOverlay, .rh-session-screen) *::before, :where(#view-settings, #authOverlay, .rh-session-screen) *::after { box-sizing: content-box; }
:where(#view-settings, #authOverlay, .rh-session-screen) { line-height: normal; font-size: medium; }
:where(#view-settings, #authOverlay, .rh-session-screen) h1, :where(#view-settings, #authOverlay, .rh-session-screen) h2, :where(#view-settings, #authOverlay, .rh-session-screen) h3 { font-weight: bold; }
:where(#view-settings) .panel > * { position: static; z-index: auto; }
/* Live hat h1 keinen Balken davor - der Rebuild gibt ihn jeder h1. */
:where(#authOverlay, .rh-session-screen) h1 { position: static; padding-left: 0; }
:where(#authOverlay, .rh-session-screen) h1::before { content: none; }
:where(#view-settings, #authOverlay, .rh-session-screen) h1, :where(#view-settings, #authOverlay, .rh-session-screen) h2, :where(#view-settings, #authOverlay, .rh-session-screen) h3, :where(#view-settings, #authOverlay, .rh-session-screen) h4 { font-family: "Orbitron", sans-serif;
    letter-spacing: 2px; }
.auth-box h2 { margin-top: 0;
    font-size: 1.05em;
    border-bottom: 1px solid rgba(250, 96, 79, 0.18);
    padding-bottom: 11px;
    margin-bottom: 16px;
    color: var(--ui-highlight);
    text-shadow: 0 0 14px rgba(250, 66, 45, 0.18);
    text-transform: uppercase; }
:where(#view-settings, #authOverlay, .rh-session-screen) h1, :where(#view-settings, #authOverlay, .rh-session-screen) h2, :where(#view-settings, #authOverlay, .rh-session-screen) h3, :where(#view-settings, #authOverlay, .rh-session-screen) h4 { text-transform: uppercase; }
.auth-box h2 { position: relative;
    padding-left: 14px;
    border-bottom-color: rgba(250, 96, 79, 0.18) !important; }
.auth-box h2::before { content: "";
    position: absolute;
    left: 0;
    top: 3px;
    bottom: 11px;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--rh-red), var(--rh-orange));
    box-shadow: 0 0 14px rgba(255, 78, 45, 0.42); }
.auth-box h2 { font-size: 0.96rem !important;
    letter-spacing: 2.4px !important;
    color: #fdaca3 !important; }
.auth-box h2::after { content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    width: 34%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(172, 178, 187, 0.42)); }
.auth-box h2 { color: rgba(239, 247, 255, 0.94) !important;
    border-bottom-color: rgba(194, 199, 205, 0.14) !important;
    text-shadow: 0 0 18px rgba(194, 199, 205, 0.13) !important; }
.auth-box h2::before { background: linear-gradient(180deg, var(--rh-elite-cyan), rgba(228, 82, 66, 0.82)) !important;
    box-shadow: 0 0 14px rgba(194, 199, 205, 0.26) !important; }
#toastContainer { position: fixed;
    top: 80px;
    right: 20px;
    left: auto;
    transform: none;
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    pointer-events: none;
    gap: 10px; }
.toast-message { background: linear-gradient(90deg, rgba(5,5,5,0.95) 0%, rgba(10,20,10,0.95) 100%);
    border: 1px solid rgba(0, 255, 0, 0.3);
    border-right: 4px solid var(--ui-color);
    color: var(--ui-color);
    padding: 12px 25px 12px 15px;
    font-weight: bold;
    font-family: "Courier New", monospace;
    font-size: 0.95em;
    text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
    box-shadow: -5px 5px 15px rgba(0,0,0,0.8), inset 0 0 10px rgba(0, 255, 0, 0.1);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 15px 100%, 0 calc(100% - 15px));
    opacity: 0;
    transform: translateX(120%) skewX(-10deg);
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1.2), opacity 0.3s; }
.toast-message.show { opacity: 1;
        transform: translateX(0) skewX(0); }
.toast-message.error { border-color: rgba(255, 85, 85, 0.4);
        border-right-color: var(--ui-danger-light);
        color: var(--ui-danger-light);
        text-shadow: 0 0 5px rgba(255, 85, 85, 0.5);
        background: linear-gradient(90deg, rgba(5,5,5,0.95) 0%, rgba(30,5,5,0.95) 100%);
        box-shadow: -5px 5px 15px rgba(0,0,0,0.8), inset 0 0 15px rgba(255, 0, 0, 0.15); }
#authOverlay { position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.9);
    z-index: var(--z-auth-overlay);
    display: flex;
    align-items: center;
    justify-content: center; }
.auth-box { background: #0a0a0a;
    border: 2px solid var(--ui-color);
    border-radius: 0;
    padding: 40px;
    width: 400px;
    position: relative;
    box-shadow: 0 0 20px var(--ui-glow), inset 0 0 30px rgba(0,0,0,0.8);
    overflow: hidden; }
.auth-box { animation: crt-power-on 1.2s cubic-bezier(0.25, 0.8, 0.25, 1) forwards; }
.auth-box > div:nth-child(1) { opacity: 0;
    animation: power-text 0.1s 0.8s forwards; }
.auth-box > div:nth-child(2) { opacity: 0;
    animation: power-text 0.1s 1.1s forwards; }
.auth-box > button { opacity: 0;
    animation: power-text 0.1s 1.4s forwards; }
.auth-box > div:nth-child(4) { opacity: 0;
    animation: power-text 0.1s 1.7s forwards; }
.auth-box::before { content: "UNAUTHORIZED ACCESS PROHIBITED";
        position: absolute;
        top: 5px;
        left: 10px;
        font-size: 0.8em;
        color: var(--ui-color);
        opacity: 0.5;
        letter-spacing: 2px; }
.auth-box::after { content: " ";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(157, 164, 175, 0.06));
        background-size: 100% 2px, 3px 100%;
        pointer-events: none;
        z-index: 10; }
.auth-box > * { position: relative;
        z-index: 20; }
.auth-btn { background: #222;
    color: var(--ui-color);
    border: 1px solid rgba(0, 255, 0, 0.2);
    border-radius: 6px;
    padding: 10px 20px;
    cursor: pointer;
    font-weight: bold;
    font-family: monospace;
    transition: all 0.2s ease;
    width: 85%;
    margin-bottom: 10px;
    box-shadow: 4px 4px 8px var(--shadow-dark), -4px -4px 8px var(--shadow-light); }
.auth-btn:hover { background: var(--ui-color);
        color: #000;
        text-shadow: none; }
.auth-btn:active { box-shadow: inset 3px 3px 6px var(--shadow-dark), inset -3px -3px 6px var(--shadow-light);
        transform: translateY(2px); }
@media (max-width: 900px) { .auth-box { width: 90%;
        max-width: 350px;
        padding: 20px;
        box-sizing: border-box;
        margin: 0 auto; } }
@media (max-width: 900px) { .auth-btn { width: 100%;
        max-width: 100%;
        box-sizing: border-box; } }
.toast-message.toast-neighbor, .toast-message.toast-easter { background: linear-gradient(135deg, rgba(44, 31, 14, 0.98), rgba(12, 10, 8, 0.98));
    color: #fc988d;
    border: 1px solid rgba(252, 152, 141, 0.7);
    box-shadow: 0 0 22px rgba(251, 101, 84, 0.28), inset 0 0 18px rgba(0,0,0,0.7);
    transform: rotate(-0.4deg) translateX(30px); }
.toast-message.toast-neighbor.show, .toast-message.toast-easter.show { transform: rotate(-0.4deg) translateX(0); }
.toast-message.toast-easter { color: #d3d6db;
    border-color: rgba(203, 207, 212, 0.85);
    box-shadow: 0 0 28px rgba(203, 207, 212, 0.35), inset 0 0 18px rgba(0,0,0,0.7); }
.toast-event-title { font-family: monospace;
    letter-spacing: 2px;
    font-weight: bold;
    font-size: 0.78em;
    margin-bottom: 4px;
    opacity: 0.88; }
.toast-event-body { font-family: "Rajdhani", sans-serif;
    font-size: 1.02em;
    line-height: 1.25; }
.toast-message.toast-neighbor, .toast-message.toast-easter { position: fixed;
    top: 50%;
    left: 50%;
    right: auto;
    width: min(560px, calc(100vw - 36px));
    text-align: center;
    justify-content: center;
    padding: 20px 24px;
    z-index: calc(var(--z-toast) + 5);
    transform: translate(-50%, -42%) scale(0.94) rotate(-0.6deg); }
.toast-message.toast-neighbor.show, .toast-message.toast-easter.show { transform: translate(-50%, -50%) scale(1) rotate(-0.6deg); }
.toast-message.toast-easter { animation: event-easter-pulse 1.2s ease-in-out infinite alternate; }
.base-rename-settings { display: flex;
    flex-direction: column;
    gap: 10px; }
.base-rename-row { display: grid;
    grid-template-columns: minmax(170px, 0.9fr) minmax(180px, 1.2fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid #222;
    border-radius: 6px; }
.base-rename-meta { display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    font-family: monospace; }
.base-rename-meta strong { color: var(--ui-color);
    letter-spacing: 1px; }
.base-rename-meta span, .settings-muted { color: #7d8b94;
    font-size: 0.85em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }
.base-rename-row input { min-width: 0;
    background: #000;
    color: var(--ui-color);
    border: 1px solid #333;
    padding: 10px;
    font-family: monospace;
    box-shadow: inset 2px 2px 5px #000; }
.base-rename-row button { background: #111;
    color: var(--ui-color);
    border: 1px solid var(--ui-color);
    cursor: pointer;
    padding: 10px 14px;
    font-weight: bold;
    font-family: monospace; }
.base-rename-row button:hover { background: rgba(0, 255, 128, 0.08); }
@media (max-width: 760px) { .base-rename-row { grid-template-columns: 1fr; } }
.toast-message.toast-event { background: linear-gradient(135deg, rgba(21, 32, 27, 0.98), rgba(7, 8, 10, 0.98));
    color: #dfeadd;
    border: 1px solid rgba(145, 169, 148, 0.62);
    box-shadow: 0 10px 28px rgba(0,0,0,0.38), inset 0 0 16px rgba(145,169,148,0.08); }
:where(#view-settings, #authOverlay, .rh-session-screen) button, :where(#view-settings, #authOverlay, .rh-session-screen) input, :where(#view-settings, #authOverlay, .rh-session-screen) select { font-family: "Rajdhani", sans-serif; }
.auth-box { position: relative;
    z-index: 2; }
:where(#view-settings, #authOverlay, .rh-session-screen) select, :where(#view-settings, #authOverlay, .rh-session-screen) input, :where(#view-settings, #authOverlay, .rh-session-screen) textarea { border-radius: 10px !important;
    border: 1px solid rgba(250, 96, 79, 0.24) !important;
    background: linear-gradient(180deg, rgba(26, 30, 35, 0.98), rgba(9, 11, 13, 0.99)) !important;
    color: #f2f7ff !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.035), 0 8px 22px rgba(0,0,0,0.28) !important; }
:where(#view-settings, #authOverlay, .rh-session-screen) select:focus, :where(#view-settings, #authOverlay, .rh-session-screen) input:focus, :where(#view-settings, #authOverlay, .rh-session-screen) textarea:focus { outline: none !important;
    border-color: rgba(172, 178, 187, 0.56) !important;
    box-shadow: 0 0 0 2px rgba(172, 178, 187, 0.10), 0 0 20px rgba(172, 178, 187, 0.14) !important; }
.auth-box { border-radius: var(--rh-radius) !important;
    background:
        linear-gradient(135deg, rgba(26, 30, 34, 0.90), rgba(9, 10, 11, 0.96)) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    border-top-color: rgba(250, 96, 79, 0.28) !important;
    box-shadow: var(--rh-shadow), var(--rh-inset) !important;
    backdrop-filter: blur(var(--rh-glass-blur));
    -webkit-backdrop-filter: blur(var(--rh-glass-blur)); }
.auth-box::before { content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
        linear-gradient(90deg, rgba(255, 78, 45, 0.14), transparent 22%, transparent 78%, rgba(172, 178, 187, 0.08)),
        linear-gradient(180deg, rgba(255,255,255,0.045), transparent 28%);
    opacity: 0.68; }
:where(#view-settings, #authOverlay, .rh-session-screen) button, .auth-btn, :where(#view-settings, #authOverlay, .rh-session-screen) button[type="button"], :where(#view-settings, #authOverlay, .rh-session-screen) input[type="button"], :where(#view-settings, #authOverlay, .rh-session-screen) input[type="submit"] { border-radius: 10px !important;
    border: 1px solid rgba(250, 96, 79, 0.26) !important;
    background:
        linear-gradient(180deg, rgba(255, 78, 45, 0.20), rgba(90, 18, 10, 0.24)),
        linear-gradient(180deg, rgba(32, 35, 40, 0.96), rgba(11, 12, 14, 0.98)) !important;
    color: #fff !important;
    font-family: "Rajdhani", sans-serif !important;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 10px 24px rgba(0,0,0,0.30), inset 0 0 0 1px rgba(255,255,255,0.035) !important;
    transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease, filter 0.14s ease; }
:where(#view-settings, #authOverlay, .rh-session-screen) button:hover, .auth-btn:hover, :where(#view-settings, #authOverlay, .rh-session-screen) button[type="button"]:hover, :where(#view-settings, #authOverlay, .rh-session-screen) input[type="button"]:hover, :where(#view-settings, #authOverlay, .rh-session-screen) input[type="submit"]:hover { transform: translateY(-1px);
    border-color: rgba(250, 96, 79, 0.52) !important;
    box-shadow: 0 14px 28px rgba(0,0,0,0.36), 0 0 22px rgba(255,78,45,0.12) !important; }
:where(#view-settings, #authOverlay, .rh-session-screen) button:disabled { opacity: 0.52 !important;
    filter: grayscale(0.45);
    cursor: not-allowed !important; }
#toastContainer .toast { border-radius: 12px !important;
    background: linear-gradient(135deg, rgba(23, 27, 31, 0.96), rgba(9, 10, 11, 0.98)) !important;
    border: 1px solid rgba(250, 96, 79, 0.24) !important;
    box-shadow: 0 18px 42px rgba(0,0,0,0.45), 0 0 28px rgba(255,78,45,0.08) !important; }
:where(#view-settings, #authOverlay, .rh-session-screen) button, .auth-btn, :where(#view-settings, #authOverlay, .rh-session-screen) button[type="button"], :where(#view-settings, #authOverlay, .rh-session-screen) input[type="button"], :where(#view-settings, #authOverlay, .rh-session-screen) input[type="submit"] { min-height: 32px; }
.auth-box { border-radius: 16px !important;
    background:
        linear-gradient(135deg, rgba(21, 24, 28, 0.915), rgba(9, 11, 13, 0.965)) !important;
    border: 1px solid rgba(223, 225, 229, 0.085) !important;
    border-top-color: rgba(194, 199, 205, 0.18) !important;
    box-shadow:
        0 18px 52px rgba(0,0,0,0.42),
        inset 0 1px 0 rgba(255,255,255,0.045),
        inset 0 0 0 1px rgba(255,255,255,0.018) !important; }
.auth-box::before { background:
        linear-gradient(90deg, rgba(224,77,49,0.08), transparent 24%, transparent 76%, rgba(194, 199, 205, 0.070)),
        linear-gradient(180deg, rgba(255,255,255,0.032), transparent 42%) !important;
    opacity: 0.58 !important; }
:where(#view-settings, #authOverlay, .rh-session-screen) button, .auth-btn, :where(#view-settings, #authOverlay, .rh-session-screen) button[type="button"], :where(#view-settings, #authOverlay, .rh-session-screen) input[type="button"], :where(#view-settings, #authOverlay, .rh-session-screen) input[type="submit"] { border-radius: 10px !important;
    border: 1px solid rgba(228, 82, 66, 0.24) !important;
    background:
        linear-gradient(180deg, rgba(45, 49, 54, 0.96), rgba(13, 15, 18, 0.98)) !important;
    color: rgba(243, 248, 255, 0.94) !important;
    box-shadow: 0 8px 18px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.04) !important; }
:where(#view-settings, #authOverlay, .rh-session-screen) button:hover, .auth-btn:hover, :where(#view-settings, #authOverlay, .rh-session-screen) button[type="button"]:hover, :where(#view-settings, #authOverlay, .rh-session-screen) input[type="button"]:hover, :where(#view-settings, #authOverlay, .rh-session-screen) input[type="submit"]:hover { border-color: rgba(194, 199, 205, 0.38) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 24px rgba(0,0,0,0.30), 0 0 18px rgba(194, 199, 205, 0.07), inset 0 1px 0 rgba(255,255,255,0.052) !important; }
:where(#view-settings, #authOverlay, .rh-session-screen) input, :where(#view-settings, #authOverlay, .rh-session-screen) select, :where(#view-settings, #authOverlay, .rh-session-screen) textarea { border-color: rgba(223, 225, 229, 0.12) !important;
    background: linear-gradient(180deg, rgba(16, 19, 22, 0.96), rgba(8, 9, 11, 0.98)) !important; }
.command-nav-portal, #vue-left-column.column-left .command-nav-portal { margin-top: 12px !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    border-color: rgba(255, 82, 106, 0.24) !important;
    background: linear-gradient(180deg, rgba(35, 11, 15, 0.72), rgba(12, 9, 12, 0.88)) !important; }
.command-nav-portal .nav-ico { color: rgba(255, 145, 160, 0.9);
    border-color: rgba(255, 82, 106, 0.24);
    background: rgba(255, 82, 106, 0.08); }
.command-nav-portal, #vue-left-column.column-left .command-nav-portal { margin-top: clamp(34px, 4.2vh, 54px) !important; }
.rh-system-header.settings { border-left: 3px solid rgba(208, 212, 217, 0.66); }
.rh-settings-row button { border: 1px solid rgba(157, 164, 175, 0.22);
    border-radius: 10px;
    color: #eafdff;
    background: rgba(157, 164, 175, 0.075);
    padding: 9px 12px;
    font: 900 0.72rem "Orbitron", monospace;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer; }
.rh-settings-row button:hover { border-color: rgba(251, 112, 96, 0.45);
    background: rgba(251, 112, 96, 0.09); }
.rh-settings-row button.danger { border-color: rgba(255, 92, 92, 0.32);
    color: #ffb7b7;
    background: rgba(255, 0, 0, 0.055); }
.rh-settings-screen { width: min(1320px, calc(100vw - 72px)); }
.rh-settings-grid { display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px; }
.rh-settings-card { padding: 16px;
    border: 1px solid rgba(157, 164, 175, 0.13);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(157, 164, 175, 0.045), rgba(255, 255, 255, 0.015)), rgba(0, 0, 0, 0.25);
    box-shadow: inset 0 0 20px rgba(157, 164, 175, 0.022), 0 10px 26px rgba(0, 0, 0, 0.28); }
.rh-settings-card.wide { grid-column: 1 / -1; }
.rh-settings-card.alert { border-color: rgba(251, 112, 96, 0.26); }
.rh-settings-card.danger { border-color: rgba(255, 92, 92, 0.30); }
.rh-settings-card-head { display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 11px;
    align-items: center;
    margin-bottom: 13px;
    padding-bottom: 11px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.rh-settings-card-head > span { width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(157, 164, 175, 0.18);
    border-radius: 12px;
    color: var(--ui-highlight);
    background: rgba(0, 0, 0, 0.24);
    font-weight: 900; }
.rh-settings-card-head strong { display: block;
    color: #f6fdff;
    font: 900 0.92rem "Orbitron", monospace;
    text-transform: uppercase;
    letter-spacing: 1px; }
.rh-settings-card-head small, .rh-settings-card p { color: rgba(242, 243, 244, 0.55);
    line-height: 1.45; }
.rh-settings-card label { display: grid;
    gap: 7px;
    margin: 0 0 12px;
    color: rgba(242, 243, 244, 0.72);
    font: 800 0.78rem "Orbitron", monospace;
    text-transform: uppercase;
    letter-spacing: 1px; }
.rh-settings-card input, .rh-settings-row input { min-width: 0;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(157, 164, 175, 0.16);
    border-radius: 10px;
    color: #eafdff;
    background: rgba(0, 0, 0, 0.32);
    padding: 10px 11px;
    font-family: "Courier New", monospace;
    outline: none; }
.rh-settings-card input:focus, .rh-settings-row input:focus { border-color: rgba(251, 112, 96, 0.44);
    box-shadow: 0 0 0 3px rgba(251, 112, 96, 0.06); }
.rh-settings-row { display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    margin-bottom: 10px; }
.rh-settings-row-three { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
@media (max-width: 900px) { .rh-settings-screen { width: calc(100vw - 24px);
        padding: 12px !important; } }
@media (max-width: 900px) { .rh-settings-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .rh-settings-row, .rh-settings-row-three { grid-template-columns: 1fr; } }
.rh-settings-screen { isolation: isolate; }
.rh-settings-card-head strong { letter-spacing: 1.05px !important; }
.rh-settings-row button { min-height: 36px !important;
    border-radius: 10px !important;
    white-space: nowrap !important; }
.rh-settings-grid { gap: 16px !important; }
.rh-settings-card { overflow: hidden;
    border-radius: 17px !important;
    border-color: rgba(193, 197, 204, 0.13) !important;
    background:
        radial-gradient(circle at 12% 0%, rgba(205, 209, 214, 0.055), transparent 34%),
        linear-gradient(180deg, rgba(17, 20, 23, 0.96), rgba(6, 7, 9, 0.985)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.035), 0 12px 30px rgba(0,0,0,0.28) !important; }
.rh-settings-card.alert { border-color: rgba(251, 103, 86, 0.22) !important;
    background:
        radial-gradient(circle at 12% 0%, rgba(251, 103, 86, 0.075), transparent 34%),
        linear-gradient(180deg, rgba(15, 17, 20, 0.96), rgba(7, 8, 9, 0.99)) !important; }
.rh-settings-card.danger { border-color: rgba(255, 92, 92, 0.24) !important;
    background:
        radial-gradient(circle at 12% 0%, rgba(255, 92, 92, 0.065), transparent 34%),
        linear-gradient(180deg, rgba(18, 10, 13, 0.96), rgba(7, 8, 9, 0.99)) !important; }
.rh-settings-card-head { grid-template-columns: 38px minmax(0, 1fr) !important;
    gap: 10px !important; }
.rh-settings-card-head > span { width: 34px !important;
    height: 34px !important;
    border-radius: 11px !important; }
.rh-settings-card input, .rh-settings-row input { min-height: 39px !important;
    border-radius: 11px !important;
    background: rgba(0, 0, 0, 0.32) !important; }
.command-nav-portal { margin-top: 24px !important;
    position: relative; }
.command-nav-portal::before { content: "";
    position: absolute;
    left: 6px;
    right: 6px;
    top: -13px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(193, 197, 204, 0.22), transparent);
    pointer-events: none; }
#vue-left-column.column-left .command-nav-portal, #vue-left-column.column-left .v-menu-btn.command-nav-item.command-nav-portal, .command-nav-panel .command-nav-portal { margin-top: 34px !important;
    padding-top: 10px !important; }
#vue-left-column.column-left .command-nav-portal::before, .command-nav-panel .command-nav-portal::before { content: "" !important;
    position: absolute !important;
    left: 10px !important;
    right: 10px !important;
    top: -17px !important;
    height: 1px !important;
    display: block !important;
    background: linear-gradient(90deg, transparent, rgba(193, 197, 204, 0.34), transparent) !important;
    pointer-events: none !important; }
#view-settings[style*="display: block"] { min-width: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0 16px 20px !important;
    box-sizing: border-box !important; }
#view-settings .rh-system-screen { width: min(100%, 1500px) !important;
    max-width: 1500px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    min-width: 0 !important;
    box-sizing: border-box !important; }
.command-nav-panel .command-nav-portal, #vue-left-column.column-left .command-nav-portal, #vue-left-column.column-left .v-menu-btn.command-nav-item.command-nav-portal { margin-top: clamp(32px, 4vh, 50px) !important;
    border-color: rgba(193, 197, 204, 0.20) !important; }
@media (max-width: 720px) { #view-settings[style*="display: block"] { padding: 0 8px 16px !important; } }
#view-settings .rh-settings-grid { min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important; }
#view-settings { min-width: 0 !important; }
#view-settings { min-width: 0 !important;
    box-sizing: border-box !important; }
.rh-settings-card { backdrop-filter: blur(10px); }
.base-rename-settings { display: grid;
    gap: 9px; }
.base-rename-row { border-radius: 14px !important;
    border-color: rgba(205, 209, 214, 0.13) !important;
    background: rgba(0, 0, 0, 0.24) !important; }
.base-rename-meta, .base-rename-meta strong, .base-rename-meta span { min-width: 0 !important;
    overflow-wrap: anywhere !important; }
.rh-settings-row button, .base-rename-row button { min-width: 112px; }
@media (max-width: 560px) { .rh-settings-row button, .base-rename-row button { width: 100%; } }
.rh-settings-card input, .rh-settings-card select, .rh-settings-card textarea { border-color: rgba(205, 209, 214, 0.15) !important;
    background: rgba(0, 0, 0, 0.36) !important;
    color: rgba(233, 248, 255, 0.94) !important;
    box-shadow: inset 0 0 14px rgba(0,0,0,0.28) !important; }
.rh-settings-card input:focus, .rh-settings-card select:focus, .rh-settings-card textarea:focus { outline: none !important;
    border-color: rgba(205, 209, 214, 0.42) !important;
    box-shadow: 0 0 0 2px rgba(205, 209, 214, 0.08), inset 0 0 14px rgba(0,0,0,0.30) !important; }
:where(#view-settings, #authOverlay, .rh-session-screen) button { -webkit-tap-highlight-color: transparent; }
:where(#view-settings, #authOverlay, .rh-session-screen) button:focus-visible { outline: 2px solid rgba(205, 209, 214, 0.42) !important;
    outline-offset: 2px !important; }
.rh-session-screen { position: fixed;
    inset: 0;
    z-index: 99999;
    display: grid;
    place-items: center;
    padding: clamp(18px, 5vw, 48px);
    color: rgba(232, 248, 255, 0.92);
    background:
        radial-gradient(circle at 50% 18%, rgba(193, 197, 204, 0.12), transparent 36%),
        linear-gradient(145deg, rgba(8, 9, 11, 0.98), rgba(3, 4, 5, 0.99)); }
.rh-session-screen::before { content: "";
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(205, 209, 214, 0.12);
    border-radius: 26px;
    pointer-events: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); }
.rh-session-card { position: relative;
    width: min(560px, 100%);
    padding: clamp(24px, 4.5vw, 42px);
    border: 1px solid rgba(205, 209, 214, 0.22);
    border-radius: 22px;
    text-align: center;
    background:
        linear-gradient(180deg, rgba(25, 29, 33, 0.94), rgba(8, 9, 11, 0.96));
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.72),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    overflow: hidden; }
.rh-session-card::after { content: "";
    position: absolute;
    inset: 0;
    border-top: 3px solid rgba(193, 197, 204, 0.35);
    pointer-events: none; }
.rh-session-kicker { display: inline-flex;
    margin-bottom: 10px;
    padding: 5px 11px;
    border: 1px solid rgba(205, 209, 214, 0.18);
    border-radius: 999px;
    color: rgba(215, 218, 223, 0.72);
    background: rgba(255, 255, 255, 0.04);
    font: 900 0.68rem var(--font-display, "Orbitron", monospace);
    letter-spacing: 0.16em;
    text-transform: uppercase; }
.rh-session-card h1 { margin: 0;
    color: #f7fcff;
    font: 900 clamp(1.45rem, 5vw, 2.25rem) var(--font-display, "Orbitron", monospace);
    letter-spacing: 0.12em;
    text-transform: uppercase; }
.rh-session-card p { max-width: 460px;
    margin: 18px auto 0;
    color: rgba(228, 230, 233, 0.78);
    line-height: 1.58; }
.rh-session-screen-danger .rh-session-card { border-color: rgba(255, 112, 112, 0.32); }
.rh-session-screen-danger .rh-session-card::after { border-top-color: rgba(255, 112, 112, 0.48); }
.rh-session-screen-danger .rh-session-card h1 { color: #ff9f9f; }
.rh-session-screen-warning .rh-session-card { border-color: rgba(255, 211, 106, 0.30); }
.rh-session-screen-warning .rh-session-card::after { border-top-color: rgba(255, 211, 106, 0.46); }
.rh-session-screen-warning .rh-session-card h1 { color: #ffd36a; }
.rh-session-button { appearance: none;
    margin-top: 26px;
    padding: 12px 18px;
    border: 1px solid rgba(193, 197, 204, 0.42);
    border-radius: 12px;
    color: #0d0f12;
    background: linear-gradient(135deg, #dadde1, #afb5be);
    box-shadow: 0 14px 34px rgba(175, 181, 190, 0.18);
    cursor: pointer;
    font: 900 0.82rem var(--font-display, "Orbitron", monospace);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: transform 0.16s ease, box-shadow 0.16s ease; }
.rh-session-button:hover, .rh-session-button:focus-visible { transform: translateY(-1px);
    box-shadow: 0 18px 42px rgba(175, 181, 190, 0.24);
    outline: none; }
.rh-auth-overlay { flex-direction: column;
    background:
        radial-gradient(circle at 50% 18%, rgba(194, 199, 205, 0.10), transparent 34%),
        radial-gradient(circle at 50% 100%, rgba(255, 77, 96, 0.08), transparent 42%),
        rgba(4, 4, 5, 0.965) !important;
    z-index: 20000 !important; }
.rh-auth-denied { width: min(430px, calc(100vw - 32px)) !important;
    padding: 34px !important;
    text-align: center;
    border-color: rgba(255, 77, 96, 0.24) !important;
    border-top-color: rgba(255, 116, 131, 0.50) !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 77, 96, 0.12), transparent 35%),
        linear-gradient(145deg, rgba(21, 14, 19, 0.96), rgba(9, 11, 13, 0.985)) !important;
    box-shadow:
        0 30px 76px rgba(0, 0, 0, 0.62),
        0 0 36px rgba(255, 77, 96, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.055) !important; }
.rh-auth-head { margin-bottom: 26px; }
.rh-auth-head h1 { margin: 0;
    color: rgba(255, 169, 178, 0.98);
    font: 900 clamp(1.28rem, 4.6vw, 1.72rem) var(--font-display, "Orbitron", sans-serif);
    letter-spacing: 0.20em;
    text-transform: uppercase;
    text-shadow: 0 0 18px rgba(255, 77, 96, 0.24); }
.rh-auth-head p, .rh-auth-foot p { margin: 7px 0 0;
    color: rgba(196, 200, 206, 0.62);
    font: 800 0.72rem var(--font-display, "Orbitron", sans-serif);
    letter-spacing: 0.18em;
    text-transform: uppercase; }
.rh-auth-message { margin-bottom: 24px;
    padding: 18px;
    text-align: left;
    border: 1px solid rgba(255, 77, 96, 0.18);
    border-radius: 14px;
    background: rgba(255, 77, 96, 0.045);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.035); }
.rh-auth-message p { margin: 0;
    color: rgba(239, 240, 242, 0.88);
    font-size: 0.98rem;
    line-height: 1.56; }
.rh-auth-message span { color: rgba(255, 169, 178, 0.98);
    font-weight: 900;
    letter-spacing: 0.04em; }
.rh-auth-return { width: 100%;
    letter-spacing: 0.14em !important;
    border-color: rgba(255, 77, 96, 0.32) !important;
    background: linear-gradient(180deg, rgba(92, 32, 40, 0.94), rgba(23, 7, 10, 0.98)) !important;
    color: rgba(255, 229, 232, 0.96) !important; }
.rh-auth-foot { margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(223, 225, 229, 0.10); }
@media (max-width: 900px) { #authOverlay[style*="display: none"] { pointer-events: none !important; } }
@media (max-width: 900px) { :where(#view-settings, #authOverlay, .rh-session-screen) input, :where(#view-settings, #authOverlay, .rh-session-screen) select, :where(#view-settings, #authOverlay, .rh-session-screen) button, :where(#view-settings, #authOverlay, .rh-session-screen) textarea { font-size: 16px; } }
@media (max-width: 900px) { #view-settings[style*="display: block"] { display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;
        overflow: visible !important; } }
@media (max-width: 900px) { #view-settings .panel { width: calc(100% - 12px) !important;
        max-width: calc(100% - 12px) !important;
        margin: 0 auto 18px auto !important;
        box-sizing: border-box !important; } }
@media (max-width: 900px) { :where(#view-settings, #authOverlay, .rh-session-screen) input, :where(#view-settings, #authOverlay, .rh-session-screen) select, :where(#view-settings, #authOverlay, .rh-session-screen) textarea, :where(#view-settings, #authOverlay, .rh-session-screen) button { max-width: 100% !important;
        box-sizing: border-box !important; } }
@keyframes event-easter-pulse { from { box-shadow: 0 0 28px rgba(203, 207, 212, 0.35), inset 0 0 18px rgba(0,0,0,0.7); }
    to { box-shadow: 0 0 42px rgba(203, 207, 212, 0.55), inset 0 0 24px rgba(0,0,0,0.7); } }
@keyframes power-text { to {
        opacity: 1;
    } }

/* --- Urlaubsmodus auf der Karte (live modules.css) -----------------
   Fremde Basis eines Kontos im Urlaub: cyan, gestrichelt, Kürzel mit
   " [UM]". */
.map-container .map-tile.enemy-bg-vacation {
    background: radial-gradient(circle, rgba(0, 217, 255, 0.14) 0%, rgba(9, 11, 13, 0.92) 100%);
    border: 1px dashed rgba(0, 217, 255, 0.75);
    border-radius: 4px;
    box-shadow: inset 0 0 12px rgba(0, 217, 255, 0.18);
}

.map-container .map-tag-vacation {
    color: #00d9ff;
    text-shadow: 0 0 5px #0077aa, 0 0 12px #00d9ff;
}

/* --- Einstellungen: HUD-Kalibrierung und Urlaubsmodus ---------------
   live ui.css (.cyber-switch, .view-section input[type=range]) und
   modules.css (.rh-full-action, .rh-toggle-row, #vacationStatusText). */
:where(#view-settings) input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    background: transparent;
}

:where(#view-settings) input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 24px;
    width: 12px;
    background: var(--ui-color);
    cursor: pointer;
    box-shadow: 0 0 10px var(--ui-glow);
    border-radius: 2px;
    margin-top: -10px;
}

:where(#view-settings) input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    background: #050505;
    border-radius: 2px;
    border: 1px solid #333;
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.9);
}

:where(#view-settings) input[type=range]:focus { outline: none; }

.cyber-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 30px;
    flex: 0 0 auto;
}

.cyber-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.cyber-switch .slider-switch {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #0f0f0f;
    border: 1px solid #333;
    transition: .4s;
    border-radius: 6px;
    box-shadow: inset 2px 2px 5px var(--shadow-dark);
}

.cyber-switch .slider-switch:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background-color: #222;
    border: 1px solid rgba(0, 255, 0, 0.4);
    transition: .4s;
    border-radius: 4px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8);
}

.cyber-switch input:checked + .slider-switch {
    background-color: #440000;
    border-color: var(--ui-danger-light);
}

.cyber-switch input:checked + .slider-switch:before {
    transform: translateX(30px);
    background-color: var(--ui-danger-light);
    box-shadow: 0 0 10px var(--ui-danger-light);
    border-color: transparent;
}

.rh-full-action {
    border: 1px solid rgba(157, 164, 175, 0.22);
    border-radius: 10px;
    color: #eafdff;
    background: rgba(157, 164, 175, 0.075);
    padding: 9px 12px;
    font: 900 0.72rem 'Orbitron', monospace;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    min-height: 36px !important;
    white-space: nowrap !important;
    min-width: 112px;
}

.rh-full-action:hover {
    border-color: rgba(251, 112, 96, 0.45);
    background: rgba(251, 112, 96, 0.09);
}

.rh-full-action.danger-soft {
    border-color: rgba(255, 92, 92, 0.32);
    color: #ffb7b7;
    background: rgba(255, 0, 0, 0.055);
}

@media (max-width: 560px) { .rh-full-action { width: 100%; } }

.rh-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border: 1px solid rgba(251, 112, 96, 0.18);
    border-radius: 14px !important;
    background: rgba(0, 0, 0, 0.24) !important;
}

.rh-toggle-row #vacationStatusText {
    color: rgba(93, 255, 177, 0.88);
    font: 900 0.82rem 'Orbitron', monospace;
    letter-spacing: 1.2px;
}

/* =====================================================================
   Techtree (#view-tech) - neues Design, 22.10.2026.
   Live: Pfad-Spalten ohne Linien (techtree-visual.css). Hier links ein
   Katalog nach Bereichen, rechts der Fokus: Akte, Stammbaum mit Linien
   (techtree.js), Voraussetzungen, Weg dorthin, Schaltet frei. Die
   Knöpfe werden mit einem gewichtslosen all: unset (:where) von den
   Browser-Vorgaben gelöst.
   ===================================================================== */
#view-tech[style*="display: block"] { min-width: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0 16px 20px !important;
    box-sizing: border-box !important; }
#view-tech .rh-system-screen { width: min(100%, 1500px) !important;
    max-width: 1500px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important; }
@media (max-width: 720px) { #view-tech[style*="display: block"] { padding: 0 8px 16px !important; } }

#view-tech {
    --tt-aktiv: #5dffb1;
    --tt-bereit: #ffc061;
    --tt-fast: #ff9b7a;
    --tt-fehlt: #ff9b5a;
    --tt-gesperrt: #8fa3b3;
    --tt-cyan: #cdd1d6;
    --tt-text: #eafdff;
    --tt-leise: rgba(242, 243, 244, 0.6);
    --tt-rand: rgba(193, 197, 204, 0.15);
    --tt-flaeche: linear-gradient(180deg, rgba(17, 20, 23, 0.97), rgba(7, 8, 10, 0.985));
}
#view-tech *, #view-tech *::before, #view-tech *::after { box-sizing: border-box; }
#view-tech .rh-system-header.tech { border-left: 3px solid rgba(205, 209, 214, 0.62) !important; }

:where(#view-tech .tt-zaehler, #view-tech .tt-leiste, #view-tech .tt-layout) button { all: unset; box-sizing: border-box; cursor: pointer; -webkit-tap-highlight-color: transparent; }
:where(#view-tech .tt-zaehler, #view-tech .tt-leiste, #view-tech .tt-layout) button:focus-visible { outline: 2px solid var(--tt-cyan); outline-offset: 2px; }

/* --- Kopf: Zähler, die filtern ------------------------------------ */
.tt-zaehler { display: grid;
    grid-template-columns: repeat(4, minmax(86px, 1fr));
    gap: 8px;
    min-width: 410px;
    align-self: center; }
#view-tech .tt-zaehler-knopf { display: grid;
    align-content: center;
    gap: 4px;
    padding: 11px 12px;
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.26);
    transition: border-color 0.15s, background 0.15s; }
#view-tech .tt-zaehler-knopf strong { color: var(--tt-farbe);
    font: 900 1.35rem/1 "Orbitron", monospace;
    letter-spacing: 1px; }
#view-tech .tt-zaehler-knopf em { color: var(--tt-leise);
    font: 700 0.7rem/1.1 "Rajdhani", sans-serif;
    font-style: normal;
    letter-spacing: 1.3px;
    text-transform: uppercase; }
#view-tech .tt-zaehler-knopf:hover { border-color: rgba(255, 255, 255, 0.2); }
#view-tech .tt-zaehler-knopf.aktiv { border-color: var(--tt-farbe);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 -2px 0 var(--tt-farbe); }
.tt-zaehler-knopf.filter-bereit { --tt-farbe: var(--tt-bereit); }
.tt-zaehler-knopf.filter-fast { --tt-farbe: var(--tt-fast); }
.tt-zaehler-knopf.filter-aktiv { --tt-farbe: var(--tt-aktiv); }
.tt-zaehler-knopf.filter-gesperrt { --tt-farbe: var(--tt-gesperrt); }

/* --- Leiste: Bereich, Suche, Legende ------------------------------- */
.tt-leiste { display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin: 0 0 14px;
    padding: 9px;
    border: 1px solid var(--tt-rand);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(24, 27, 31, 0.9), rgba(9, 10, 11, 0.94)); }
.tt-gruppen { display: inline-flex;
    gap: 3px;
    padding: 3px;
    border: 1px solid rgba(193, 197, 204, 0.12);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.34); }
#view-tech .tt-gruppe { padding: 10px 15px;
    border-radius: 9px;
    color: var(--tt-leise);
    font: 800 0.68rem/1 "Orbitron", monospace;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color 0.15s, background 0.15s; }
#view-tech .tt-gruppe:hover { color: var(--tt-text); }
#view-tech .tt-gruppe.aktiv { color: #f6fdff;
    background: linear-gradient(180deg, rgba(205, 209, 214, 0.22), rgba(205, 209, 214, 0.07));
    box-shadow: inset 0 0 0 1px rgba(205, 209, 214, 0.36); }
.tt-suche { flex: 1 1 240px;
    max-width: 440px;
    display: flex;
    align-items: center;
    gap: 9px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid rgba(205, 209, 214, 0.16);
    border-radius: 11px;
    background: rgba(0, 0, 0, 0.36);
    cursor: text; }
.tt-suche:focus-within { border-color: rgba(205, 209, 214, 0.45);
    box-shadow: 0 0 0 3px rgba(205, 209, 214, 0.08); }
.tt-suche-zeichen { color: rgba(205, 209, 214, 0.7);
    font-size: 1.15rem;
    line-height: 1; }
#view-tech .tt-suche input { all: unset;
    box-sizing: border-box;
    flex: 1;
    min-width: 0;
    height: 100%;
    color: var(--tt-text);
    font: 600 0.98rem "Rajdhani", sans-serif; }
#view-tech .tt-suche input::placeholder { color: rgba(242, 243, 244, 0.36); }
#view-tech .tt-suche input::-webkit-search-cancel-button { filter: invert(1) opacity(0.5); }
.tt-treffer { color: var(--tt-bereit);
    font: 800 0.62rem "Orbitron", monospace;
    font-style: normal;
    letter-spacing: 1px;
    white-space: nowrap; }
.tt-treffer.leer { color: var(--tt-fast); }
.tt-unsichtbar { position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap; }
.tt-legende { margin-left: auto;
    display: flex;
    gap: 14px;
    padding-right: 6px;
    color: var(--tt-leise);
    font: 700 0.7rem "Rajdhani", sans-serif;
    letter-spacing: 1.2px;
    text-transform: uppercase; }
.tt-legende span { display: inline-flex; align-items: center; gap: 6px; }
.tt-legende span::before { content: "";
    width: 9px; height: 9px;
    border-radius: 3px;
    background: var(--tt-farbe);
    box-shadow: 0 0 8px var(--tt-farbe); }
.tt-legende .aktiv { --tt-farbe: var(--tt-aktiv); }
.tt-legende .bereit { --tt-farbe: var(--tt-bereit); }
.tt-legende .fast { --tt-farbe: var(--tt-fast); }
.tt-legende .gesperrt { --tt-farbe: var(--tt-gesperrt); }

/* --- Aufteilung ------------------------------------------------------ */
.tt-layout { display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 14px;
    align-items: start; }

/* --- Katalog ---------------------------------------------------------- */
.tt-katalog { position: sticky;
    top: 12px;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    padding: 4px 8px 8px;
    border: 1px solid var(--tt-rand);
    border-radius: 18px;
    background: var(--tt-flaeche);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 18px 40px rgba(0, 0, 0, 0.32);
    scrollbar-width: thin;
    scrollbar-color: rgba(205, 209, 214, 0.24) transparent; }
.tt-katalog-leer { margin: 18px 10px;
    color: var(--tt-leise);
    font: 600 0.92rem "Rajdhani", sans-serif;
    text-align: center; }
#view-tech .tt-katalog-gruppe h4 { position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 0;
    padding: 12px 8px 7px;
    border: 0;
    background: rgba(15, 17, 19, 0.98);
    color: var(--tt-reihe);
    font: 800 0.6rem "Orbitron", monospace;
    letter-spacing: 2px;
    text-transform: uppercase; }
.tt-katalog-gruppe h4 em { color: var(--tt-leise);
    font: 700 0.7rem "Rajdhani", sans-serif;
    font-style: normal;
    letter-spacing: 1px; }
.tt-katalog-gruppe { --tt-reihe: rgba(205, 209, 214, 0.85); }
.tt-katalog-gruppe.reihe-4 { --tt-reihe: rgba(218, 221, 225, 0.92); }
.tt-katalog-gruppe.reihe-5, .tt-katalog-gruppe.reihe-6, .tt-katalog-gruppe.reihe-7, .tt-katalog-gruppe.reihe-8 { --tt-reihe: rgba(251, 103, 86, 0.9); }
.tt-katalog ul { display: grid;
    gap: 2px;
    margin: 0 0 4px;
    padding: 0;
    list-style: none; }
#view-tech .tt-eintrag { position: relative;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 5px 8px 5px 6px;
    border: 1px solid transparent;
    border-radius: 9px;
    transition: background 0.12s, border-color 0.12s; }
#view-tech .tt-eintrag::before { content: "";
    position: absolute;
    left: 0; top: 9px; bottom: 9px;
    width: 2px;
    border-radius: 2px;
    background: var(--tt-farbe);
    opacity: 0.8; }
#view-tech .tt-eintrag:hover { background: rgba(205, 209, 214, 0.06); }
#view-tech .tt-eintrag.gewaehlt { border-color: rgba(205, 209, 214, 0.42);
    background: linear-gradient(90deg, rgba(205, 209, 214, 0.17), rgba(205, 209, 214, 0.04)); }
.tt-eintrag.aktiv { --tt-farbe: var(--tt-aktiv); }
.tt-eintrag.bereit { --tt-farbe: var(--tt-bereit); }
.tt-eintrag.gesperrt { --tt-farbe: var(--tt-gesperrt); }
.tt-eintrag.gesperrt.fast { --tt-farbe: var(--tt-fast); }
.tt-eintrag-bild { display: grid;
    place-items: center;
    width: 30px; height: 30px;
    border-radius: 7px;
    background: rgba(205, 209, 214, 0.08) center / cover no-repeat;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    color: var(--tt-bereit); }
.tt-eintrag.gesperrt .tt-eintrag-bild { filter: grayscale(1) brightness(0.6); }
.tt-eintrag-name { overflow: hidden;
    color: var(--tt-text);
    font: 700 0.92rem/1.15 "Rajdhani", sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap; }
.tt-eintrag.gesperrt .tt-eintrag-name { color: rgba(221, 236, 247, 0.62); }
.tt-eintrag-stand { color: var(--tt-farbe);
    font: 700 0.64rem "Rajdhani", sans-serif;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    white-space: nowrap; }

/* --- Fokus ------------------------------------------------------------ */
.tt-fokus { container-type: inline-size;
    display: grid;
    gap: 14px;
    min-width: 0; }
.tt-fokus.aktiv { --tt-farbe: var(--tt-aktiv); }
.tt-fokus.bereit { --tt-farbe: var(--tt-bereit); }
.tt-fokus.gesperrt { --tt-farbe: var(--tt-fehlt); }
.tt-fokus.gesperrt.fast { --tt-farbe: var(--tt-fast); }
#view-tech .tt-fokus h4 { display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0 10px;
    padding: 0;
    border: 0;
    color: rgba(251, 103, 86, 0.9);
    font: 800 0.62rem "Orbitron", monospace;
    letter-spacing: 2px;
    text-transform: uppercase; }
#view-tech .tt-fokus h4::after { content: "";
    order: 1;
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(193, 197, 204, 0.22), transparent); }
#view-tech .tt-fokus :is(.tt-baum-rahmen, .tt-seite) > h4:first-child { margin-top: 2px; }

.tt-akte { position: relative;
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) 260px;
    gap: 18px;
    padding: 14px;
    overflow: hidden;
    border: 1px solid var(--tt-rand);
    border-radius: 18px;
    background:
        radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--tt-farbe) 14%, transparent), transparent 40%),
        var(--tt-flaeche);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 18px 40px rgba(0, 0, 0, 0.32); }
.tt-akte-bild { position: relative;
    display: grid;
    place-items: center;
    min-height: 160px;
    border-radius: 13px;
    background: radial-gradient(circle at 50% 40%, rgba(251, 116, 101, 0.2), transparent 62%), rgba(15, 17, 20, 1);
    background-position: center;
    background-size: cover;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tt-farbe) 40%, transparent), 0 10px 26px rgba(0, 0, 0, 0.45); }
.tt-fokus.gesperrt .tt-akte-bild { filter: grayscale(0.55) brightness(0.8); }
.tt-akte-zeichen { color: var(--tt-bereit);
    font-size: 3.4rem;
    text-shadow: 0 0 24px rgba(251, 116, 101, 0.5); }
.tt-akte-titel { min-width: 0; align-self: center; }
.tt-akte-art { color: rgba(251, 103, 86, 0.92);
    font: 800 0.6rem "Orbitron", monospace;
    letter-spacing: 2px;
    text-transform: uppercase; }
#view-tech .tt-akte-titel h3 { margin: 6px 0 9px;
    padding: 0;
    border: 0;
    color: #f6fdff;
    font: 900 clamp(1.05rem, 1.6vw, 1.4rem)/1.2 "Orbitron", monospace;
    letter-spacing: 1.3px;
    text-transform: uppercase; }
.tt-akte-status { display: inline-flex;
    padding: 4px 11px;
    border: 1px solid var(--tt-farbe);
    border-radius: 999px;
    background: color-mix(in srgb, var(--tt-farbe) 10%, rgba(0, 0, 0, 0.5));
    color: var(--tt-farbe);
    font: 800 0.74rem "Rajdhani", sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase; }
.tt-akte-text { margin: 12px 0 0;
    max-width: 640px;
    color: rgba(242, 243, 244, 0.74);
    font: 500 0.98rem/1.45 "Rajdhani", sans-serif; }
.tt-akte-hinweis { margin: 10px 0 0;
    padding: 8px 11px;
    border-left: 2px solid var(--tt-bereit);
    border-radius: 0 9px 9px 0;
    background: rgba(251, 116, 101, 0.06);
    color: rgba(253, 198, 192, 0.86);
    font: 600 0.9rem/1.4 "Rajdhani", sans-serif; }
.tt-akte-zahlen { display: grid;
    align-content: center;
    gap: 8px; }
.tt-akte-zahlen > div { padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.28); }
.tt-etikett { color: rgba(205, 209, 214, 0.75);
    font: 800 0.58rem "Orbitron", monospace;
    letter-spacing: 1.3px;
    text-transform: uppercase; }
.tt-akte-zahlen strong { display: block;
    margin-top: 6px;
    color: var(--tt-text);
    font: 700 0.95rem/1.5 "Rajdhani", sans-serif;
    white-space: nowrap; }
#view-tech .tt-akte-weiter { display: block;
    align-self: center;
    width: 100%;
    min-width: 0;
    text-align: center;
    text-decoration: none; }

.tt-fokus-raster { display: grid;
    grid-template-columns: minmax(0, 1fr) 350px;
    gap: 14px;
    align-items: start; }
.tt-baum-rahmen, .tt-seite { min-width: 0;
    padding: 14px 16px 16px;
    border: 1px solid var(--tt-rand);
    border-radius: 18px;
    background: var(--tt-flaeche);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 18px 40px rgba(0, 0, 0, 0.32); }
.tt-baum-rahmen { background:
        linear-gradient(rgba(205, 209, 214, 0.022) 1px, transparent 1px) 0 0 / 22px 22px,
        linear-gradient(90deg, rgba(205, 209, 214, 0.022) 1px, transparent 1px) 0 0 / 22px 22px,
        var(--tt-flaeche); }
.tt-baum-legende { order: 2;
    display: inline-flex;
    gap: 14px;
    color: var(--tt-leise);
    font: 700 0.66rem "Rajdhani", sans-serif;
    letter-spacing: 1px; }
.tt-baum-legende span { display: inline-flex; align-items: center; gap: 6px; }
.tt-baum-legende span::before { content: ""; width: 18px; border-top: 2px solid rgba(93, 255, 177, 0.7); }
.tt-baum-legende .fehlt::before { border-top: 2px dashed var(--tt-fehlt); }

/* --- Stammbaum ------------------------------------------------------- */
.tt-baum { position: relative;
    display: grid;
    gap: 44px;
    padding: 8px 0 4px; }
.tt-baum-linien { position: absolute;
    left: 0; top: 0;
    z-index: 0;
    overflow: visible;
    pointer-events: none; }
.tt-baum-ebene { position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 16px; }
#view-tech .tt-baum-karte { position: relative;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    width: 214px;
    min-height: 54px;
    padding: 7px 10px 7px 7px;
    border: 1px solid var(--tt-rahmen);
    border-radius: 11px;
    background: linear-gradient(180deg, rgba(24, 27, 31, 1), rgba(11, 13, 15, 1));
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; }
#view-tech .tt-baum-karte:hover { transform: translateY(-1px); border-color: rgba(205, 209, 214, 0.6); }
#view-tech .tt-baum-karte.erfuellt { --tt-farbe: var(--tt-aktiv); --tt-rahmen: rgba(93, 255, 177, 0.3); }
#view-tech .tt-baum-karte.fehlt { --tt-farbe: var(--tt-fehlt); --tt-rahmen: rgba(255, 155, 90, 0.5); }
#view-tech .tt-baum-karte.fehlt .tt-baum-bild { filter: grayscale(0.7) brightness(0.75); }
#view-tech .tt-baum-karte.ziel { --tt-farbe: var(--tt-cyan); --tt-rahmen: var(--tt-cyan);
    width: 240px;
    box-shadow: 0 0 0 2px rgba(205, 209, 214, 0.25), 0 0 26px rgba(205, 209, 214, 0.25), 0 6px 16px rgba(0, 0, 0, 0.4); }
.tt-baum-bild { display: grid;
    place-items: center;
    width: 38px; height: 38px;
    border-radius: 8px;
    background: rgba(205, 209, 214, 0.08) center / cover no-repeat;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    color: var(--tt-bereit); }
.tt-baum-text { min-width: 0; text-align: left; }
.tt-baum-text strong { display: -webkit-box;
    overflow: hidden;
    color: var(--tt-text);
    font: 700 0.9rem/1.1 "Rajdhani", sans-serif;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; }
.tt-baum-text small { display: block;
    margin-top: 3px;
    color: var(--tt-farbe);
    font: 700 0.66rem/1.1 "Rajdhani", sans-serif;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    white-space: nowrap; }
.tt-linie { fill: none;
    stroke-width: 1.9;
    stroke-linecap: round;
    transition: opacity 0.15s, stroke-width 0.15s; }
.tt-linie.ok { stroke: rgba(93, 255, 177, 0.55); }
.tt-linie.fehlt { stroke: rgba(255, 155, 90, 0.95);
    stroke-dasharray: 6 5;
    animation: tt-fluss 1.1s linear infinite; }
.tt-punkt { stroke: none; transition: opacity 0.15s; }
.tt-punkt.ok { fill: rgba(93, 255, 177, 0.85); }
.tt-punkt.fehlt { fill: var(--tt-fehlt); }
.tt-baum-linien.fokus .tt-linie:not(.hervor), .tt-baum-linien.fokus .tt-punkt:not(.hervor) { opacity: 0.12; }
.tt-baum-linien.fokus .tt-linie.hervor { stroke-width: 2.8; }
@keyframes tt-fluss { to { stroke-dashoffset: -11; } }
@media (prefers-reduced-motion: reduce) { .tt-linie.fehlt { animation: none; } }

/* --- Seite: Wirkung, Voraussetzungen, Weg, Folgen -------------------- */
.tt-akte-leer { margin: 0 0 6px;
    color: var(--tt-leise);
    font: 500 0.92rem/1.4 "Rajdhani", sans-serif; }
.tt-akte-wirkung { margin: 0; }
.tt-akte-wirkung dt { color: var(--tt-leise);
    font: 700 0.68rem "Rajdhani", sans-serif;
    letter-spacing: 1.1px;
    text-transform: uppercase; }
.tt-akte-wirkung dd { margin: 2px 0 9px;
    color: var(--tt-text);
    font: 600 0.96rem/1.4 "Rajdhani", sans-serif; }
.tt-akte-werte { display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin: 0; }
.tt-akte-werte div { padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.24); }
.tt-akte-werte dt { color: var(--tt-leise);
    font: 700 0.64rem "Rajdhani", sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase; }
.tt-akte-werte dd { margin: 1px 0 0;
    color: var(--tt-text);
    font: 800 1rem "Rajdhani", sans-serif; }

.tt-bedingungen { display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none; }
#view-tech .tt-bedingungen button { display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    grid-template-areas: "h n s" "b b b";
    align-items: center;
    gap: 5px 8px;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--tt-rahmen);
    border-radius: 10px;
    background: var(--tt-grund, rgba(0, 0, 0, 0.24));
    transition: border-color 0.15s; }
#view-tech .tt-bedingungen button:hover { border-color: rgba(205, 209, 214, 0.5); }
.tt-bedingungen .erfuellt { --tt-farbe: var(--tt-aktiv); --tt-rahmen: rgba(93, 255, 177, 0.16); }
.tt-bedingungen .fehlt { --tt-farbe: var(--tt-fehlt); --tt-rahmen: rgba(255, 155, 90, 0.32); --tt-grund: rgba(255, 120, 60, 0.05); }
.tt-haken { grid-area: h; color: var(--tt-farbe); font-weight: 900; text-align: center; }
.tt-bedingung-name { grid-area: n;
    overflow: hidden;
    color: var(--tt-text);
    font: 700 0.94rem "Rajdhani", sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap; }
.tt-bedingung-stufe { grid-area: s;
    color: var(--tt-farbe);
    font: 800 0.7rem "Orbitron", monospace;
    letter-spacing: 0.8px; }
.tt-balken { grid-area: b;
    height: 3px;
    overflow: hidden;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.07); }
.tt-balken i { display: block; height: 100%; border-radius: inherit; background: var(--tt-farbe); }

.tt-weg { position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: tt-schritt; }
.tt-weg li { position: relative;
    padding: 0 0 4px 32px;
    counter-increment: tt-schritt; }
.tt-weg li::before { content: counter(tt-schritt);
    position: absolute;
    left: 0; top: 7px;
    display: grid;
    place-items: center;
    width: 22px; height: 22px;
    border: 1px solid rgba(251, 110, 94, 0.6);
    border-radius: 50%;
    background: rgba(40, 18, 8, 0.95);
    color: #fc988d;
    font: 800 0.6rem "Orbitron", monospace; }
.tt-weg li:not(:last-child)::after { content: "";
    position: absolute;
    left: 10px; top: 30px; bottom: -2px;
    width: 2px;
    background: rgba(251, 110, 94, 0.22); }
#view-tech .tt-weg button { display: grid;
    gap: 1px;
    width: 100%;
    padding: 6px 10px;
    border-radius: 9px;
    transition: background 0.15s; }
#view-tech .tt-weg button:hover { background: rgba(251, 110, 94, 0.08); }
.tt-weg strong { color: var(--tt-text); font: 700 0.94rem "Rajdhani", sans-serif; }
.tt-weg small { color: #fc988d; font: 700 0.72rem "Rajdhani", sans-serif; letter-spacing: 0.8px; text-transform: uppercase; }

.tt-folgen { display: flex; flex-wrap: wrap; gap: 6px; }
#view-tech .tt-folgen button { display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--tt-rahmen);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.22);
    transition: border-color 0.15s, background 0.15s; }
#view-tech .tt-folgen button:hover { border-color: rgba(205, 209, 214, 0.55); background: rgba(205, 209, 214, 0.08); }
.tt-folgen .aktiv { --tt-rahmen: rgba(93, 255, 177, 0.32); --tt-farbe: var(--tt-aktiv); }
.tt-folgen .bereit { --tt-rahmen: rgba(255, 192, 97, 0.42); --tt-farbe: var(--tt-bereit); }
.tt-folgen .gesperrt { --tt-rahmen: rgba(143, 163, 179, 0.2); --tt-farbe: var(--tt-leise); }
.tt-folgen span { color: var(--tt-text); font: 700 0.88rem "Rajdhani", sans-serif; }
.tt-folgen em { color: var(--tt-farbe); font: 700 0.64rem "Rajdhani", sans-serif; font-style: normal; letter-spacing: 0.8px; text-transform: uppercase; }

/* --- Breiten --------------------------------------------------------- */
@container (max-width: 1020px) {
    .tt-fokus-raster { grid-template-columns: minmax(0, 1fr); }
}
@container (max-width: 860px) {
    .tt-akte { grid-template-columns: 170px minmax(0, 1fr); }
    .tt-akte-zahlen { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}
@container (max-width: 520px) {
    .tt-akte { grid-template-columns: minmax(0, 1fr); }
    .tt-akte-bild { min-height: 150px; }
    #view-tech .tt-baum-karte { width: calc(50% - 8px); min-width: 140px; }
    #view-tech .tt-baum-karte.ziel { width: 100%; }
}
@media (max-width: 1100px) {
    #view-tech .rh-system-header.tech { grid-template-columns: minmax(0, 1fr); }
    .tt-zaehler { min-width: 0; }
    .tt-legende { display: none; }
    .tt-layout { grid-template-columns: minmax(0, 1fr); }
    .tt-katalog { position: relative; top: 0; max-height: 46vh; }
}
@media (max-width: 560px) {
    .tt-zaehler { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tt-gruppen { width: 100%; overflow-x: auto; }
    #view-tech .tt-gruppe { padding: 10px 11px; }
    .tt-akte-zahlen strong { white-space: normal; }
}

/* =====================================================================
   Alien-Technologie (#view-aliens) - 22.10.2026.
   Live: der Alien-Teil von expansion.css (rh-exp-*), im Spiel aber
   nicht erreichbar. Hier eine eigene Seite im Stil der Systemansichten.
   Zustände der Freischaltungen wie live: done (mint), ready (amber),
   locked (gedämpft).
   ===================================================================== */
#view-aliens[style*="display: block"] { min-width: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0 16px 20px !important;
    box-sizing: border-box !important; }
#view-aliens .rh-system-screen { width: min(100%, 1500px) !important;
    max-width: 1500px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    min-width: 0 !important;
    box-sizing: border-box !important; }
@media (max-width: 720px) { #view-aliens[style*="display: block"] { padding: 0 8px 16px !important; } }

#view-aliens {
    --al-gruen: #9dffdc;
    --al-amber: #ffd08b;
    --al-text: #eafdff;
    --al-leise: rgba(242, 243, 244, 0.6);
    --al-rand: rgba(193, 197, 204, 0.15);
    --al-flaeche: linear-gradient(180deg, rgba(17, 20, 23, 0.97), rgba(7, 8, 10, 0.985));
    --al-base: #cdd1d6;
    --al-military: #fb7060;
    --al-research: #dadde1;
}
#view-aliens *, #view-aliens *::before, #view-aliens *::after { box-sizing: border-box; }
#view-aliens .rh-system-header.aliens { border-left: 3px solid rgba(157, 255, 220, 0.6) !important;
    background:
        radial-gradient(circle at 92% 10%, rgba(157, 255, 220, 0.08), transparent 38%),
        radial-gradient(circle at 10% 0%, rgba(205, 209, 214, 0.07), transparent 32%),
        linear-gradient(135deg, rgba(18, 20, 23, 0.97), rgba(8, 9, 10, 0.985)) !important; }

/* --- Artefakte im Kopf --------------------------------------------- */
.al-artefakte { display: grid;
    gap: 8px;
    min-width: 420px;
    align-self: center; }
.al-artefakte header { display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px; }
.al-artefakte header strong { color: #f6fdff;
    font: 800 0.66rem "Orbitron", monospace;
    letter-spacing: 1.8px;
    text-transform: uppercase; }
.al-artefakte header small { color: var(--al-leise);
    font: 600 0.78rem "Rajdhani", sans-serif;
    text-align: right; }
.al-artefakt-reihe { display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px; }
.al-artefakt { --al-farbe: var(--al-base);
    display: grid;
    gap: 3px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.26);
    box-shadow: inset 0 2px 0 color-mix(in srgb, var(--al-farbe) 55%, transparent); }
.al-artefakt.military { --al-farbe: var(--al-military); }
.al-artefakt.research { --al-farbe: var(--al-research); }
.al-artefakt small { color: var(--al-farbe);
    font: 800 0.6rem "Orbitron", monospace;
    letter-spacing: 1.4px;
    text-transform: uppercase; }
.al-artefakt strong { color: rgba(234, 253, 255, 0.55);
    font: 900 1.45rem/1.05 "Orbitron", monospace; }
.al-artefakt.hat strong { color: var(--al-text); text-shadow: 0 0 14px color-mix(in srgb, var(--al-farbe) 45%, transparent); }
.al-artefakt em { color: var(--al-leise);
    font: 600 0.72rem "Rajdhani", sans-serif;
    font-style: normal; }

/* --- Ablauf --------------------------------------------------------- */
.al-ablauf { margin: 0 0 18px;
    padding: 14px 16px;
    border: 1px solid var(--al-rand);
    border-radius: 18px;
    background: var(--al-flaeche); }
#view-aliens .al-ablauf h3, #view-aliens .al-abschnitt { display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    padding: 0;
    border: 0;
    color: rgba(251, 103, 86, 0.9);
    font: 800 0.64rem "Orbitron", monospace;
    letter-spacing: 2px;
    text-transform: uppercase; }
#view-aliens .al-ablauf h3::after, #view-aliens .al-abschnitt::after { content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(193, 197, 204, 0.22), transparent); }
#view-aliens .al-abschnitt { margin: 4px 2px 12px; }
.al-ablauf ol { display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: al-schritt; }
.al-ablauf li { position: relative;
    display: grid;
    align-content: start;
    gap: 4px;
    padding: 10px 12px 12px 44px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.22);
    counter-increment: al-schritt; }
.al-ablauf li::before { content: counter(al-schritt);
    position: absolute;
    left: 11px; top: 10px;
    display: grid;
    place-items: center;
    width: 24px; height: 24px;
    border: 1px solid rgba(157, 255, 220, 0.5);
    border-radius: 50%;
    background: rgba(10, 40, 32, 0.9);
    color: var(--al-gruen);
    font: 800 0.62rem "Orbitron", monospace; }
.al-ablauf strong { color: var(--al-text);
    font: 800 0.72rem "Orbitron", monospace;
    letter-spacing: 1.2px;
    text-transform: uppercase; }
.al-ablauf span { color: var(--al-leise);
    font: 500 0.9rem/1.4 "Rajdhani", sans-serif; }

/* --- Fraktionen ------------------------------------------------------ */
.al-fraktionen { display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 14px;
    align-items: start; }
.al-fraktion { display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--al-rand);
    border-radius: 18px;
    background:
        radial-gradient(circle at 0% 0%, rgba(157, 255, 220, 0.06), transparent 40%),
        var(--al-flaeche);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 18px 40px rgba(0, 0, 0, 0.32); }
.al-fraktion.fraktion-aether_remnants { background: radial-gradient(circle at 0% 0%, rgba(205, 209, 214, 0.07), transparent 40%), var(--al-flaeche); }
.al-fraktion.fraktion-null_swarm { background: radial-gradient(circle at 0% 0%, rgba(218, 221, 225, 0.07), transparent 40%), var(--al-flaeche); }
.al-fraktion header { display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px; }
.al-zeichen { display: grid;
    place-items: center;
    width: 42px; height: 42px;
    border: 1px solid rgba(157, 255, 220, 0.3);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.35);
    font-size: 1.35rem; }
.al-fraktion header strong { color: #f6fdff;
    font: 900 0.92rem "Orbitron", monospace;
    letter-spacing: 1.1px;
    text-transform: uppercase; }
.al-stufe { padding: 4px 10px;
    border: 1px solid rgba(157, 255, 220, 0.4);
    border-radius: 999px;
    background: rgba(157, 255, 220, 0.08);
    color: var(--al-gruen);
    font: 800 0.72rem "Rajdhani", sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap; }
.al-fraktion > p { margin: 0;
    color: rgba(242, 243, 244, 0.72);
    font: 500 0.95rem/1.45 "Rajdhani", sans-serif; }
.al-werte { display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px; }
.al-werte span { display: grid;
    gap: 1px;
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.24); }
.al-werte small { color: var(--al-leise);
    font: 700 0.62rem "Rajdhani", sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase; }
.al-werte strong { color: var(--al-text);
    font: 800 0.98rem "Rajdhani", sans-serif; }
.al-fortschritt { display: grid; gap: 5px; }
.al-balken { height: 5px;
    overflow: hidden;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.07); }
.al-balken i { display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(157, 255, 220, 0.6), var(--al-gruen));
    box-shadow: 0 0 10px rgba(157, 255, 220, 0.4); }
.al-fortschritt small { color: var(--al-leise);
    font: 600 0.78rem "Rajdhani", sans-serif; }

/* --- Freischaltungen ------------------------------------------------- */
.al-freischaltungen { display: grid; gap: 8px; }
.al-freischaltung { --al-zustand: rgba(242, 243, 245, 0.22);
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-left: 3px solid var(--al-zustand);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.24); }
.al-freischaltung.done { --al-zustand: var(--al-gruen); }
.al-freischaltung.ready { --al-zustand: var(--al-amber);
    background: rgba(255, 208, 139, 0.04);
    box-shadow: 0 0 18px rgba(255, 208, 139, 0.06); }
.al-freischaltung-kopf { display: flex; align-items: center; gap: 8px; }
.al-art { padding: 2px 7px;
    border-radius: 6px;
    background: rgba(205, 209, 214, 0.1);
    color: var(--al-base);
    font: 800 0.56rem "Orbitron", monospace;
    letter-spacing: 1.2px;
    text-transform: uppercase; }
.al-freischaltung.military .al-art { background: rgba(251, 112, 96, 0.1); color: var(--al-military); }
.al-freischaltung.research .al-art { background: rgba(218, 221, 225, 0.1); color: var(--al-research); }
.al-freischaltung strong { color: var(--al-text); font: 700 1rem "Rajdhani", sans-serif; }
.al-freischaltung small { color: var(--al-leise); font: 500 0.86rem/1.35 "Rajdhani", sans-serif; }
.al-freischaltung small.al-brut { color: rgba(251, 103, 86, 0.8); font-weight: 700; }
.al-freischaltung small.al-brut.ok { color: rgba(157, 255, 220, 0.8); }
.al-zustand { color: var(--al-zustand);
    font: 700 0.76rem "Rajdhani", sans-serif;
    letter-spacing: 0.8px;
    text-transform: uppercase; }
.al-freischaltung.locked .al-zustand { color: rgba(221, 247, 255, 0.55); }
#view-aliens .al-knopf { justify-self: start;
    margin-top: 4px;
    min-width: 0; }
#view-aliens .al-freischaltung.ready .al-knopf { border-color: rgba(255, 208, 139, 0.55);
    background: rgba(255, 208, 139, 0.12);
    color: #fff2dc; }
#view-aliens .al-knopf:disabled { opacity: 0.45; cursor: not-allowed; }

@media (max-width: 1100px) {
    #view-aliens .rh-system-header.aliens { grid-template-columns: minmax(0, 1fr); }
    .al-artefakte { min-width: 0; }
    .al-ablauf ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .al-ablauf ol { grid-template-columns: minmax(0, 1fr); }
    .al-fraktionen { grid-template-columns: minmax(0, 1fr); }
}

/* ===================================================================
   Forschungskarte: Name und „Aktueller Effekt" untereinander statt
   nebeneinander (Basti, 23.10.2026) - nebeneinander brach der Name
   mitten im Wort um ("overflow-wrap: anywhere"). Jetzt volle Breite,
   Umbruch nur zwischen Silben.
   =================================================================== */
.rh-research-head {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 7px;
    min-height: 0;
}

.rh-research-head > strong {
    width: 100%;
    overflow-wrap: break-word;
    hyphens: auto;
}

.rh-research-head small {
    max-width: none;
}

.rh-building-head > strong {
    overflow-wrap: break-word;
    hyphens: auto;
}

/* ===================================================================
   Kommando-Punkte rechts oben - live ui.css .score-module-container
   (Kante rechts, Schräge links unten), an der Stelle des früheren
   Basisnamens.
   =================================================================== */

.commander-basis.rh-kopf-rechts {
    border-left: 0;
    padding-left: 0;
    justify-self: end;
}

.score-module-container.rh-score-kopf {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    background: linear-gradient(135deg, rgba(20,20,20,0.95) 0%, rgba(5,5,5,0.98) 100%);
    border: 1px solid rgba(0, 170, 170, 0.2);
    border-right: 4px solid var(--ui-info);
    padding: 6px 16px;
    min-width: 150px;
    transition: all 0.3s ease;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 15px 100%, 0 calc(100% - 15px));
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.8));
}

.score-module-container.rh-score-kopf:hover {
    border-color: rgba(0, 170, 170, 0.5);
    filter: drop-shadow(0 0 10px rgba(0, 170, 170, 0.2));
}

.rh-score-kopf .score-details { display: flex; flex-direction: column; align-items: flex-end; width: 100%; }
.rh-score-kopf .score-display { display: flex; align-items: center; gap: 10px; cursor: help; }
.rh-score-kopf .score-icon { font-size: 1.25em; filter: drop-shadow(0 0 5px var(--ui-info)); }
.rh-score-kopf .score-value {
    color: var(--ui-info);
    font-size: 1.4em;
    font-weight: bold;
    font-family: monospace;
    text-shadow: 0 0 12px var(--ui-info-dark-glow);
    letter-spacing: 1px;
}

@media (max-width: 1100px) {
    .commander-basis.rh-kopf-rechts { display: flex; }
    .score-module-container.rh-score-kopf { min-width: 0; padding: 4px 12px; }
    .rh-score-kopf .score-value { font-size: 1.1em; }
}

/* ===================================================================
   Basiswahl links oben (live .base-switcher-topbar ‹ select ›, neu
   gestaltet): Kapsel mit Nummer, Name, Koordinaten; Ausklappfeld mit
   allen Basen, Lage-Marken und Alarm bei Angriff im Anflug.
   =================================================================== */

.kopf-marke {
    flex-wrap: wrap;
    row-gap: 6px;
}

.rh-basiswahl {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 4px;
    flex-basis: 100%;
    max-width: 360px;
    font-family: var(--font-ui, "Rajdhani", sans-serif);
}

.rh-basiswahl-pfeil {
    width: 30px;
    border: 1px solid rgba(201, 206, 211, 0.18);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(25, 29, 33, 0.9), rgba(12, 13, 15, 0.95));
    color: var(--ui-info);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease, color .2s ease;
}

.rh-basiswahl-pfeil:hover:not(:disabled) {
    border-color: rgba(201, 206, 211, 0.55);
    box-shadow: 0 0 12px rgba(172, 178, 187, 0.25);
    color: #fff;
}

.rh-basiswahl-pfeil:disabled { opacity: .3; cursor: default; }

.rh-basiswahl-kapsel {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 30px 5px 6px;
    border: 1px solid rgba(201, 206, 211, 0.22);
    border-radius: 10px;
    background:
        linear-gradient(90deg, rgba(172, 178, 187, 0.10), transparent 55%),
        linear-gradient(180deg, rgba(22, 25, 29, 0.96), rgba(10, 11, 13, 0.98));
    color: #eaf8ff;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.rh-basiswahl-kapsel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(205, 209, 214, 0.10) 48%, transparent 66%);
    transform: translateX(-120%);
    transition: transform .7s ease;
    pointer-events: none;
}

.rh-basiswahl-kapsel:hover,
.rh-basiswahl.offen .rh-basiswahl-kapsel {
    border-color: rgba(201, 206, 211, 0.6);
    box-shadow: 0 0 0 1px rgba(172, 178, 187, 0.12), 0 0 18px rgba(172, 178, 187, 0.18);
}

.rh-basiswahl-kapsel:hover::after { transform: translateX(120%); }

.rh-basiswahl-nummer {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
    background: linear-gradient(160deg, var(--ui-info), #484f58);
    color: #0b0d0f;
    font: 900 .85rem/1 'Orbitron', monospace;
}

.rh-basiswahl-nummer.bedroht {
    background: linear-gradient(160deg, #ff5a5a, #8a1010);
    color: #fff;
    animation: rh-basiswahl-puls 1.4s ease-in-out infinite;
}

.rh-basiswahl-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.15;
}

.rh-basiswahl-text strong {
    color: var(--ui-highlight, #fa5341);
    font: 800 .95rem/1.15 'Orbitron', monospace;
    letter-spacing: .04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rh-basiswahl-text small {
    color: rgba(226, 228, 231, 0.62);
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
}

.rh-basiswahl-chevron {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ui-info);
    transition: transform .25s ease;
}

.rh-basiswahl.offen .rh-basiswahl-chevron { transform: translateY(-50%) rotate(180deg); }

.rh-basiswahl-alarm {
    position: absolute;
    right: 28px;
    top: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff4a4a;
    box-shadow: 0 0 10px #ff4a4a;
    animation: rh-basiswahl-puls 1.2s ease-in-out infinite;
}

.rh-basiswahl-schleier {
    position: fixed;
    inset: 0;
    z-index: 60;
}

.rh-basiswahl-feld {
    position: absolute;
    left: 0;
    top: calc(100% + 8px);
    z-index: 61;
    width: max(100%, 360px);
    max-height: min(60vh, 460px);
    overflow-y: auto;
    padding: 8px;
    border: 1px solid rgba(201, 206, 211, 0.28);
    border-radius: 12px;
    background:
        radial-gradient(circle at 0 0, rgba(172, 178, 187, 0.10), transparent 45%),
        linear-gradient(180deg, rgba(18, 21, 24, 0.98), rgba(8, 9, 11, 0.99));
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6), 0 0 24px rgba(172, 178, 187, 0.10);
    backdrop-filter: blur(6px);
    animation: rh-basiswahl-auf .18s ease-out;
}

.rh-basiswahl-feldkopf {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 2px 6px 8px;
    border-bottom: 1px solid rgba(201, 206, 211, 0.12);
    margin-bottom: 6px;
    color: var(--ui-info);
    font: 800 .68rem/1 'Orbitron', monospace;
    letter-spacing: .18em;
}

.rh-basiswahl-feldkopf em {
    color: rgba(226, 228, 231, 0.55);
    font-style: normal;
    letter-spacing: .08em;
}

.rh-basiswahl-zeile {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 8px;
    margin-bottom: 3px;
    border: 1px solid transparent;
    border-left: 3px solid transparent;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    color: #f3f4f5;
    text-align: left;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

.rh-basiswahl-zeile:hover {
    background: rgba(172, 178, 187, 0.08);
    border-color: rgba(201, 206, 211, 0.25);
    transform: translateX(2px);
}

.rh-basiswahl-zeile.aktiv {
    border-left-color: var(--ui-info);
    background: linear-gradient(90deg, rgba(172, 178, 187, 0.14), rgba(172, 178, 187, 0.02));
}

.rh-basiswahl-zeile.bedroht { border-left-color: #ff4a4a; }

.rh-basiswahl-zeile .rh-basiswahl-nummer { width: 26px; height: 26px; font-size: .75rem; }

.rh-basiswahl-zeiletext {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    line-height: 1.2;
}

.rh-basiswahl-zeiletext strong {
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rh-basiswahl-zeiletext small {
    color: rgba(226, 228, 231, 0.55);
    font: 600 .7rem/1.2 monospace;
}

.rh-basiswahl-marken {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
    max-width: 50%;
}

.rh-basiswahl-marken i {
    padding: 2px 6px;
    border: 1px solid rgba(201, 206, 211, 0.18);
    border-radius: 999px;
    background: rgba(201, 206, 211, 0.05);
    color: rgba(226, 228, 231, 0.8);
    font: 800 .6rem/1.3 'Orbitron', monospace;
    font-style: normal;
    letter-spacing: .05em;
    white-space: nowrap;
}

.rh-basiswahl-marken i.haupt { color: var(--ui-highlight, #fa5341); border-color: rgba(250, 83, 65, 0.4); }
.rh-basiswahl-marken i.aktiv { color: #0b0d0f; background: var(--ui-info); border-color: var(--ui-info); }
.rh-basiswahl-marken i.alarm { color: #fff; background: #b31b1b; border-color: #ff4a4a; }

@keyframes rh-basiswahl-puls {
    0%, 100% { opacity: 1; filter: brightness(1); }
    50% { opacity: .65; filter: brightness(1.4); }
}

@keyframes rh-basiswahl-auf {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 700px) {
    .rh-basiswahl { max-width: none; }
    .rh-basiswahl-feld { width: calc(100vw - 24px); }
}

/* ===================================================================
   Auftragsleiste über dem Radar (neu): das Nächste vorne, der Rest
   klappt auf. Farben je Art: Bau gelb, Forschung cyan, Ausbildung rot.
   =================================================================== */

.rh-auftragsleiste {
    position: relative;
    z-index: 6;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 8px;
    font-family: var(--font-ui, "Rajdhani", sans-serif);
}

/* Je Gruppe eine Spalte, der Farbakzent oben. */
.rh-auftrag-spalte {
    --auftrag-farbe: var(--ui-info, #acb2bb);
    position: relative;
    min-width: 0;
    border: 1px solid rgba(201, 206, 211, 0.14);
    border-top: 2px solid var(--auftrag-farbe);
    border-radius: 8px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--auftrag-farbe) 10%, transparent), transparent 46px),
        linear-gradient(180deg, rgba(18, 21, 24, 0.94), rgba(8, 9, 11, 0.96));
    box-shadow: 0 -1px 12px -4px color-mix(in srgb, var(--auftrag-farbe) 60%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.rh-auftrag-spalte.bau { --auftrag-farbe: var(--ui-highlight, #fa5341); }
.rh-auftrag-spalte.forschung { --auftrag-farbe: var(--ui-info, #acb2bb); }
.rh-auftrag-spalte.ausbildung { --auftrag-farbe: #ff6b5a; }

.rh-auftrag-spalte.leer {
    border-top-color: color-mix(in srgb, var(--auftrag-farbe) 35%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.rh-auftrag-spaltenkopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 22px;
    padding: 5px 10px 0;
}

.rh-auftrag-art {
    color: var(--auftrag-farbe);
    font: 900 .6rem/1 'Orbitron', monospace;
    letter-spacing: .16em;
}

.rh-auftrag-spalte.leer .rh-auftrag-art { opacity: .55; }

.rh-auftrag-mehr {
    padding: 2px 7px;
    border: 1px solid color-mix(in srgb, var(--auftrag-farbe) 40%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--auftrag-farbe) 10%, transparent);
    color: var(--auftrag-farbe);
    font: 800 .62rem/1 'Orbitron', monospace;
    letter-spacing: .04em;
    cursor: pointer;
}

.rh-auftrag-mehr:hover { background: color-mix(in srgb, var(--auftrag-farbe) 22%, transparent); color: #fff; }

.rh-auftrag-zeile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name zeit" "balken balken";
    align-items: center;
    gap: 4px 10px;
    padding: 4px 10px 7px;
    color: #e6f6ff;
    text-decoration: none;
    transition: background .15s ease;
}

.rh-auftrag-zeile:hover { background: rgba(255, 255, 255, 0.03); }
.rh-auftrag-zeile.wartend { opacity: .6; }
.rh-auftrag-zeile.ruhe { grid-template-areas: "name"; grid-template-columns: 1fr; }

.rh-auftrag-name {
    grid-area: name;
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
}

.rh-auftrag-name strong { overflow: hidden; text-overflow: ellipsis; font-weight: 700; font-size: .9rem; }
.rh-auftrag-name small { flex: 0 0 auto; color: rgba(226, 228, 231, 0.6); font: 700 .7rem/1 monospace; }
.rh-auftrag-zeile.ruhe .rh-auftrag-name { color: rgba(226, 228, 231, 0.45); font-size: .8rem; }

.rh-auftrag-balken {
    grid-area: balken;
    height: 4px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.45);
    overflow: hidden;
}

.rh-auftrag-balken i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, color-mix(in srgb, var(--auftrag-farbe) 55%, transparent), var(--auftrag-farbe));
    box-shadow: 0 0 8px var(--auftrag-farbe);
    transition: width 1s linear;
}

.rh-auftrag-zeit {
    grid-area: zeit;
    text-align: right;
    color: #fff;
    font: 800 .76rem/1 monospace;
}

/* Die weiteren Aufträge einer Gruppe klappen über dem Radar auf. */
.rh-auftrag-liste {
    position: absolute;
    top: calc(100% + 4px);
    left: -1px;
    right: -1px;
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid color-mix(in srgb, var(--auftrag-farbe) 35%, rgba(201, 206, 211, 0.14));
    border-radius: 8px;
    background: rgba(10, 11, 13, 0.97);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.55);
}

.rh-auftrag-liste .rh-auftrag-zeile + .rh-auftrag-zeile { border-top: 1px solid rgba(201, 206, 211, 0.08); }
.rh-auftrag-liste .rh-auftrag-zeile { padding-top: 7px; }

@media (max-width: 700px) {
    .rh-auftragsleiste { gap: 5px; }
    .rh-auftrag-spaltenkopf { padding: 4px 6px 0; }
    .rh-auftrag-zeile { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "zeit" "balken"; padding: 3px 6px 6px; }
    .rh-auftrag-zeit { text-align: left; }
    .rh-auftrag-name small { display: none; }
    .rh-auftrag-art { font-size: .52rem; letter-spacing: .08em; }
}


/* ===================================================================
   Handy (Rebuild, 23.10.2026)

   Unter 1000 px steht das Menü über dem Inhalt (.buehne als Spalte).
   Mit align-items: flex-start nahm .inhalt dann die Breite seines
   breitesten Kindes an - die Reiterleisten liefen bis 1.400 px aus,
   statt in sich zu scrollen. Jetzt füllt der Inhalt genau die
   Bildschirmbreite, und die Leisten scrollen wie vorgesehen.
   =================================================================== */

@media (max-width: 1000px) {
    .buehne { align-items: stretch; }

    .buehne > .inhalt {
        width: 100%;
        max-width: 100vw;
        box-sizing: border-box;
    }

    .inhalt > *,
    .rh-action-grid > *,
    .rh-base-command,
    .rh-military-command,
    .rh-system-screen,
    .view-section {
        min-width: 0;
        max-width: 100%;
    }
}

/* Die Kopfleiste: Marke, darunter der Kommandant über die volle Breite,
   darunter die Punkte. Vorher ragte der Kommandant 20 - 90 px über den
   rechten Rand. */
@media (max-width: 640px) {
    .top-bar-header {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px;
        padding: 0.5rem 0.75rem;
    }

    .kopf-mitte {
        justify-content: stretch;
        min-width: 0;
    }

    .kopf-mitte .commander-container {
        width: 100%;
        box-sizing: border-box;
        gap: 10px;
        padding: 8px 12px;
        justify-content: space-between;
    }

    .rh-kopf-rechts {
        justify-self: start;
    }

    .inhalt { padding: 12px; }
}

/* Der Lichtstreifen (.panel::before, cyber-sweep) lief bei den
   System-Seiten über den Kasten hinaus - eine spätere Regel hatte
   deren overflow wieder auf visible gestellt. Auf dem Handy wurde die
   Seite dadurch bis zu 2.600 px breit. clip schneidet ab, ohne einen
   Scrollbereich anzulegen (Ausklappfelder nach unten bleiben frei). */
.rh-system-screen,
:is(#view-reports, #view-events, #view-tech, #view-highscores, #view-settings) .rh-system-screen,
:is(#view-reports, #view-events, #view-tech, #view-highscores, #view-settings).rh-system-screen {
    overflow-x: clip !important;
}

@media (max-width: 640px) {
    /* Kommandorang: die Zweigtabelle scrollt in sich. */
    table.zweige {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }
}

/* Das Kommando-Menü auf dem Handy: statt einer Bildschirmhöhe voller
   Kacheln über dem Inhalt eine Leiste, die seitlich scrollt - Zeichen und
   Name, ohne Unterzeile und Abschnittsköpfe. Der Inhalt beginnt damit
   direkt unter Kopf und Rohstoffen. */
@media (max-width: 1000px) {
    .spalte-links {
        padding: 8px 12px !important;
    }

    .command-nav-panel {
        display: flex !important;
        gap: 8px;
        margin-top: 0 !important;
        padding: 8px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: thin;
        scroll-snap-type: x proximity;
    }

    .command-nav-panel .command-nav-title,
    .command-nav-panel .command-nav-section-head {
        display: none !important;
    }

    .command-nav-panel .command-nav-section,
    .command-nav-panel .command-nav-grid {
        display: contents !important;
    }

    .command-nav-panel .command-nav-item {
        flex: 0 0 auto;
        width: auto !important;
        min-width: 0 !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 6px 12px 6px 8px !important;
        scroll-snap-align: start;
    }

    .command-nav-panel .nav-copy small {
        display: none !important;
    }

    .command-nav-panel .nav-copy strong {
        white-space: nowrap;
        font-size: 0.8rem !important;
    }
}

/* Rohstoffkarten: Name und Rate stoßen auf dem Handy aneinander
   („TREIBSTOFF−45,8K/H") - die Rate rückt unter den Namen. */
@media (max-width: 640px) {
    .top-bar-resources .res-header {
        flex-wrap: wrap;
        row-gap: 1px;
    }

    .top-bar-resources .res-name,
    .top-bar-resources .res-rate {
        min-width: 0;
        white-space: nowrap;
    }

    .top-bar-resources .res-rate {
        margin-left: auto;
        font-size: 0.62rem;
    }
}

/* Bereichsköpfe auf dem Handy: kleiner, Umbruch nur an Silben
   (vorher „BASISVERWALTUN / G"). */
@media (max-width: 640px) {
    .rh-submenu-header {
        gap: 10px !important;
        padding: 12px !important;
    }

    .rh-submenu-header .rh-submenu-copy strong {
        font-size: 1.2rem !important;
        letter-spacing: 0.04em !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
        hyphens: auto;
    }

    .rh-submenu-header .rh-submenu-copy em {
        font-size: 0.62rem !important;
        letter-spacing: 0.08em !important;
        line-height: 1.35 !important;
    }
}

/* Karten ohne Bild (Rebuild, 23.10.2026): statt eines leeren Kastens ein
   taktischer Platzhalter - Raster, Abtastlinie und der Name groß im
   Hintergrund. Sobald img/b_26.jpg usw. da ist, verschwindet er. */
.ohne-bild {
    background:
        linear-gradient(180deg, rgba(9, 10, 11, 0.2), rgba(9, 10, 11, 0.85)),
        repeating-linear-gradient(0deg, rgba(205, 209, 214, 0.05) 0 1px, transparent 1px 22px),
        repeating-linear-gradient(90deg, rgba(205, 209, 214, 0.05) 0 1px, transparent 1px 22px),
        radial-gradient(circle at 70% 35%, rgba(250, 92, 75, 0.16), transparent 55%),
        linear-gradient(135deg, #14171b, #08090b) !important;
    overflow: hidden;
}

.rh-bild-ersatz {
    position: absolute;
    left: 14px;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(242, 243, 244, 0.16);
    font: 900 clamp(1.1rem, 3.2vw, 1.9rem)/1 'Orbitron', monospace;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    pointer-events: none;
}

/* Abweichung von live: Vorschau des Proviants, den ein Rueckzug jetzt
   zurueckbraechte (Operationszentrale, Hinweg). */
.rh-fleet-provision-row--refund { margin-top: 9px;
    padding: 7px 9px;
    border: 1px dashed rgba(126, 255, 178, 0.18);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.20);
    font: 800 0.84rem "Rajdhani", system-ui, sans-serif;
    cursor: help; }
.rh-fleet-provision-row--refund b { font-weight: 900; }
@media (max-width: 420px) { .rh-fleet-provision-row--refund { flex-wrap: wrap; } }

/* Rebuild (Spieltest 23.10.2026): leerer Reiter der Basisverwaltung. */
.rh-reiter-leer { grid-column: 1 / -1; padding: 22px 18px; text-align: center; }
.rh-reiter-leer p { margin: 0 0 14px; color: rgba(229, 231, 234, 0.9); line-height: 1.5; }
.rh-reiter-leer .tech-card-btn { display: inline-block; width: auto; padding: 8px 16px; text-decoration: none; }

/* ===================================================================
   Rebuild-Design (23.10.2026): kleine Korrekturen am Feinschliff
   =================================================================== */

/* Nachrichten-Kanäle: die Untertitel brachen in der schmalen Spalte nach
   jedem Wort um („TRANSPORT / & / BEWEGUNG“). Eine Zeile, notfalls mit … */
#reportCategories .report-cat {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.report-cat-copy {
    min-width: 0;
}

.report-cat-copy strong {
    font-size: 0.72rem !important;
    letter-spacing: 0.5px !important;
    overflow-wrap: anywhere;
}

.report-cat-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-cat-copy small {
    letter-spacing: 0.04em !important;
}

/* Kommando- und Operationszentrale neben der Karte (Radar): die Spalten
   sind ab 1280 px nur 262-340 px breit. Sie richten sich nach IHRER
   Breite (Container-Abfrage), nicht nach dem Fenster. */
.radar-kommando,
.radar-ops {
    container-type: inline-size;
}

@container (max-width: 320px) {
    #vue-dispatch-center .coord-display {
        display: flex !important;
        flex-wrap: wrap !important;
    }

    #vue-dispatch-center .coord-input-group {
        flex: 1 1 40% !important;
    }

    #vue-dispatch-center .rh-coord-target-select {
        flex: 1 1 100% !important;
    }

    #vue-dispatch-center .rh-coord-separator {
        display: none;
    }

    #vue-dispatch-center .coord-input-group label {
        letter-spacing: 0.6px;
        white-space: nowrap;
    }

    #vue-dispatch-center.dispatch-terminal > h2,
    #vue-active-operations > h2 {
        font-size: 0.8rem !important;
        letter-spacing: 0.06em !important;
        flex-wrap: nowrap;
        white-space: nowrap;
        gap: 6px;
    }

    #vue-dispatch-center .queue-accordion summary,
    #vue-dispatch-center .queue-accordion-title {
        font-size: 0.82rem;
        letter-spacing: 0.04em;
    }
}

/* Wartungsmodus (24.10.2026): Band für Admins oben im Spiel. */
.rh-wartung-band {
    display: block;
    position: sticky;
    top: 0;
    z-index: 2000;
    padding: 6px 16px;
    background: repeating-linear-gradient(135deg, #b3261e 0 14px, #8f1d17 14px 28px);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}

.rh-wartung-band:hover {
    filter: brightness(1.12);
}

/* Handy-Durchgang (24.10.2026): zu kleine Schrift und Tippziele. */
@media (max-width: 760px) {
    .rh-auftrag-art { font-size: .62rem; }
    .map-container .radar-header { font-size: .62rem; }
    .tradepost-filter button { min-height: 34px; padding-left: 12px; padding-right: 12px; }
    .rh-tutorial-btn.collapse { min-width: 36px; min-height: 32px; }
}

/* Handy-Durchgang (24.10.2026): Der Kopf brauchte auf dem Telefon fast
   den ganzen ersten Bildschirm (Rohstoffe 2 x 3, Reiter untereinander).
   Rohstoffe jetzt 3 x 2 und schlanker, die Reiter als waagerechte
   Wischleiste. */
@media (max-width: 560px) {
    .top-bar-resources .res-bar {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        margin-bottom: 12px;
    }
    .top-bar-resources .res-item-hud {
        min-width: 0;
        padding: 5px 7px 6px;
        border-radius: 9px;
    }
    .top-bar-resources .res-header {
        flex-wrap: wrap;
        gap: 0 4px;
        font-size: 9.5px;
        letter-spacing: 0.04em;
    }
    .top-bar-resources .res-rate {
        font-size: 9px;
    }
    .top-bar-resources .res-values {
        flex-wrap: wrap;
        gap: 0 4px;
        margin: 1px 0 4px;
    }
    .top-bar-resources .res-values strong {
        font-size: 13px;
    }
    .top-bar-resources .res-cap {
        font-size: 9.5px;
    }

    .rh-base-tabs,
    .rh-military-tabs {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 6px 6px 4px;
    }
    .rh-base-tabs::-webkit-scrollbar,
    .rh-military-tabs::-webkit-scrollbar {
        display: none;
    }
    .rh-base-tabs > .rh-base-tab,
    .rh-military-tabs > .rh-military-tab {
        flex: 0 0 auto;
        grid-column: auto;
        min-width: 132px;
        min-height: 48px;
        scroll-snap-align: start;
    }
}

@media (max-width: 560px) {
    /* Militär-Kennzahlen: drei schmale Spalten schnitten „Einheitenbestand“
       und „gesamt stationiert“ ab - auf dem Telefon untereinander. */
    .rh-military-stat small,
    .rh-military-stat em {
        white-space: normal;
        overflow: visible;
    }
    .rh-military-cap-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }    .rh-military-hero-stats {
        grid-template-columns: 1fr;
    }
    .rh-military-hero-stats .rh-military-stat {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas: "titel wert" "text wert";
        align-items: center;
        column-gap: 10px;
    }
    .rh-military-hero-stats .rh-military-stat small { grid-area: titel; }
    .rh-military-hero-stats .rh-military-stat strong { grid-area: wert; }
    .rh-military-hero-stats .rh-military-stat em { grid-area: text; }
}