/*
 * StarshipOS — Master Stylesheet
 * CC_029 (Frontend Architecture) + CC_030 (Alert State) + CC_031 (Session)
 * CC_119 (Design System): Reset & Theme-Variablen kommen aus dem
 * Design System unter assets/design-system/ (tokens/ + base.css).
 *
 * Dark-Space-Theme fuer alle Stationspanels.
 * Aufgebaut als: Design-System-Import → Layout → Komponenten
 */

@import url("../design-system/styles.css");

/* ═══════════════════════════════════════════════════════════════
   3. STATION SHELL LAYOUT (base.html)
   ═══════════════════════════════════════════════════════════════ */

.station-body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-mono);
}

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

.station-header {
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    padding: var(--space-sm) var(--space-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

.station-heading {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.station-code {
    font-size: 0.7rem;
    font-family: var(--font-mono);
    color: var(--station-accent);
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid var(--station-accent);
    padding: 2px 6px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.station-heading h1 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.05em;
}

.station-breadcrumb {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.station-main {
    flex: 1;
    padding: var(--space-lg);
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

/* ═══════════════════════════════════════════════════════════════
   4. PANEL COMPONENTS
   ═══════════════════════════════════════════════════════════════ */

.panel-section-title {
    font-size: 0.8rem;
    font-family: var(--font-mono);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: var(--space-xs);
}

/* ═══════════════════════════════════════════════════════════════
   5. PORTAL PAGE (CC_029)
   ═══════════════════════════════════════════════════════════════ */

.portal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-lg);
    padding: var(--space-lg) 0;
}

.station-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: var(--space-lg);
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.station-card:hover {
    border-color: var(--station-accent);
    background: rgba(59, 130, 246, 0.05);
}

.station-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    text-decoration: none;
    color: var(--text-primary);
}

.station-icon {
    font-size: 2rem;
    display: block;
}

.station-name {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-primary);
}

.station-status {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.station-status--online {
    color: var(--accent-green);
}

.portal-header {
    text-align: center;
    margin-bottom: var(--space-xl);
    padding: var(--space-xl) 0;
}

.portal-header h1 {
    font-size: 1.8rem;
    font-family: var(--font-mono);
    color: var(--accent-cyan);
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.portal-header p {
    color: var(--text-muted);
    margin-top: var(--space-sm);
    font-family: var(--font-mono);
    font-size: 0.85rem;
}

/* CC_103: Portal section titles for grouped station links */
.portal-section-title {
    font-family: var(--font-mono);
    font-size: 1.1rem;
    color: var(--accent-cyan, #67e8f9);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-top: var(--space-xl, 2rem);
    margin-bottom: var(--space-sm, 0.5rem);
    padding-bottom: var(--space-xs, 0.25rem);
    border-bottom: 1px solid var(--border-color, #334155);
}

/* ═══════════════════════════════════════════════════════════════
   6. ALERT BAR (CC_030)
   ═══════════════════════════════════════════════════════════════ */

.alert-bar {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-md);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-bottom: 2px solid transparent;
    transition: background var(--transition-base), border-color var(--transition-base);
}

.alert-bar--GREEN {
    background: rgba(16, 185, 129, 0.1);
    border-color: var(--alert-green);
    color: var(--alert-green);
}

.alert-bar--YELLOW {
    background: rgba(245, 158, 11, 0.15);
    border-color: var(--alert-yellow);
    color: var(--alert-yellow);
}

.alert-bar--RED {
    background: rgba(239, 68, 68, 0.15);
    border-color: var(--alert-red);
    color: var(--alert-red);
    animation: alert-pulse 2s ease-in-out infinite;
}

@keyframes alert-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.alert-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.alert-bar--RED .alert-indicator {
    animation: dot-blink 1s step-end infinite;
}

@keyframes dot-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   7. SESSION STATUS (CC_031)
   ═══════════════════════════════════════════════════════════════ */

.session-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 2px 8px;
    border-radius: 2px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.session-badge--LOBBY {
    background: rgba(107, 114, 128, 0.2);
    color: var(--text-muted);
    border: 1px solid var(--text-dim);
}

.session-badge--RUNNING {
    background: rgba(16, 185, 129, 0.15);
    color: var(--accent-green);
    border: 1px solid var(--accent-green);
}

.session-badge--PAUSED {
    background: rgba(245, 158, 11, 0.15);
    color: var(--accent-yellow);
    border: 1px solid var(--accent-yellow);
}

.session-badge--ENDED {
    background: rgba(107, 114, 128, 0.1);
    color: var(--text-muted);
    border: 1px solid var(--border-color);
}

/* ═══════════════════════════════════════════════════════════════
   8. HELM STATION (CC_010)
   ═══════════════════════════════════════════════════════════════ */

[data-station="bridge-helm"] {
    --station-accent: #4af;
}

.helm-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: var(--space-lg);
}

.helm-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    padding: var(--space-md);
    border-radius: 2px;
}

/* Compass */
.compass-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
}

.compass-svg {
    display: block;
}

.compass-error {
    color: var(--accent-red);
    font-size: 0.8rem;
    font-family: var(--font-mono);
}

/* Speed */
.speed-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
}

.speed-bar-wrap {
    width: 100%;
    max-width: 80px;
}

.speed-bar {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.speed-level {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    padding: 4px 8px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-align: center;
    color: var(--text-muted);
    transition: background var(--transition-fast);
}

.speed-level--active {
    background: rgba(74, 170, 255, 0.2);
    border-color: #4af;
    color: #4af;
}

.speed-level--stop {
    color: var(--text-muted);
}

.speed-current-label {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text-primary);
    font-weight: 600;
}

/* Maneuver */
.maneuver-container {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm);
}

.maneuver-active-label {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--accent-cyan);
    text-transform: uppercase;
}

.maneuver-active-label--running {
    color: var(--accent-yellow);
}

.maneuver-timer {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--accent-yellow);
    background: rgba(245, 158, 11, 0.1);
    padding: 1px 6px;
    border: 1px solid var(--accent-yellow);
    border-radius: 2px;
}

.maneuver-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

.maneuver-btn {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    padding: 6px 12px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all var(--transition-fast);
}

.maneuver-btn:hover {
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
}

.maneuver-btn--active {
    background: rgba(6, 182, 212, 0.15);
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
}

.maneuver-btn--evasive:hover,
.maneuver-btn--evasive.maneuver-btn--active {
    border-color: var(--accent-yellow);
    color: var(--accent-yellow);
    background: rgba(245, 158, 11, 0.1);
}

.maneuver-btn--attack:hover,
.maneuver-btn--attack.maneuver-btn--active {
    border-color: var(--accent-red);
    color: var(--accent-red);
    background: rgba(239, 68, 68, 0.1);
}

.maneuver-error {
    color: var(--accent-red);
    font-size: 0.8rem;
}

/* Telemetry */
.telemetry-panel {
    min-height: 80px;
}

.telemetry-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-mono);
    font-size: 0.8rem;
}

.telemetry-label {
    color: var(--text-muted);
    padding: 2px var(--space-sm);
    text-align: left;
    font-weight: 400;
    white-space: nowrap;
}

.telemetry-value {
    color: var(--accent-cyan);
    padding: 2px var(--space-sm);
    text-align: right;
    font-family: var(--font-mono);
}

.telemetry-placeholder,
.telemetry-error {
    color: var(--text-muted);
    font-size: 0.8rem;
    font-family: var(--font-mono);
    padding: var(--space-sm);
}

.telemetry-error {
    color: var(--accent-red);
}

/* Helm Forms */
.helm-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

.form-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.form-label {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.form-input,
.form-select {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 4px 8px;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    border-radius: 2px;
    transition: border-color var(--transition-fast);
}

.form-input:focus,
.form-select:focus {
    outline: none;
    border-color: var(--station-accent);
}

.helm-btn {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 6px 16px;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: all var(--transition-fast);
    margin-top: var(--space-xs);
}

.helm-btn--primary {
    border-color: var(--station-accent);
    color: var(--station-accent);
}

.helm-btn--primary:hover {
    background: rgba(74, 170, 255, 0.1);
}

/* HTMX Indicator */
.htmx-indicator {
    display: none;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
    padding: var(--space-xs) var(--space-sm);
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    display: block;
}

/* ═══════════════════════════════════════════════════════════════
   9. FORM BUTTONS (ALLGEMEIN)
   ═══════════════════════════════════════════════════════════════ */

.btn-action {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 8px 16px;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: all var(--transition-fast);
}

.btn-action:hover {
    border-color: var(--station-accent);
}

.btn-danger {
    border-color: var(--accent-red);
    color: var(--accent-red);
}

.btn-danger:hover {
    background: rgba(239, 68, 68, 0.1);
}

.btn-warning {
    border-color: var(--accent-yellow);
    color: var(--accent-yellow);
}

.btn-warning:hover {
    background: rgba(245, 158, 11, 0.1);
}

.btn-neutral {
    border-color: var(--border-color);
    color: var(--text-muted);
}

.btn-neutral:hover {
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
}

/* ═══════════════════════════════════════════════════════════════
   10. ENGINEERING REACTOR PANEL (CC_032)
   ═══════════════════════════════════════════════════════════════ */

/* Station-Akzentfarbe Engineering */
[data-station="engineering-reactor"] {
    --station-accent: var(--accent-yellow);
}

/* Layout */
.reactor-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: var(--space-lg);
    padding: var(--space-lg);
}

.reactor-section {
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: var(--space-md);
}

.reactor-section--gauge   { grid-column: 1 / 2; }
.reactor-section--target  { grid-column: 2 / 3; }
.reactor-section--coolant { grid-column: 1 / 3; }

/* Gauge */
.reactor-gauge {
    padding: var(--space-sm) 0;
}

.gauge-bar-wrap {
    margin-bottom: var(--space-md);
}

.gauge-bar-track {
    position: relative;
    height: 24px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    overflow: visible;
    margin-bottom: var(--space-xs);
}

.gauge-bar-fill {
    height: 100%;
    background: var(--accent-green);
    transition: width var(--transition-base);
    border-radius: 2px;
}

.gauge-bar-fill--overdrive {
    background: var(--accent-red);
}

.gauge-target-marker {
    position: absolute;
    top: -4px;
    width: 2px;
    height: 32px;
    background: var(--accent-yellow);
    transform: translateX(-50%);
    pointer-events: none;
}

.gauge-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.gauge-label--current {
    color: var(--accent-green);
    font-weight: bold;
}

.gauge-error {
    color: var(--accent-red);
    font-size: 0.9rem;
    padding: var(--space-sm);
    border: 1px solid var(--accent-red);
    border-radius: 3px;
}

.reactor-placeholder {
    color: var(--text-muted);
    font-style: italic;
    padding: var(--space-sm);
}

/* Temperaturanzeige */
.temp-display {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    margin-bottom: var(--space-md);
}

.temp-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.temp-value {
    font-size: 1.2rem;
    font-family: var(--font-mono);
    font-weight: bold;
}

.temp-nominal .temp-value { color: var(--accent-green); }
.temp-warn    .temp-value { color: var(--accent-yellow); }
.temp-danger  .temp-value {
    color: var(--accent-red);
    animation: pulse-red 1s infinite;
}

@keyframes pulse-red { 50% { opacity: 0.6; } }

/* Modus & Status */
.reactor-status-row {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
    flex-wrap: wrap;
}

.reactor-mode-badge {
    font-size: 0.75rem;
    padding: 2px 8px;
    border: 1px solid var(--accent-yellow);
    border-radius: 2px;
    color: var(--accent-yellow);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.reactor-status-label {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Slider */
.reactor-slider {
    width: 100%;
    accent-color: var(--accent-yellow);
    cursor: pointer;
}

.reactor-slider-value {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: var(--accent-yellow);
    min-width: 3.5rem;
    text-align: right;
}

.reactor-btn {
    cursor: pointer;
    padding: var(--space-xs) var(--space-md);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    background: transparent;
    color: var(--text-primary);
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.reactor-btn--primary {
    border-color: var(--accent-yellow);
    color: var(--accent-yellow);
}

.reactor-btn--primary:hover {
    background: rgba(245, 158, 11, 0.12);
}

/* Kuehlpumpen */
.coolant-panel {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-md);
}

.pump-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: var(--space-md);
}

.pump-name {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pump-btn {
    cursor: pointer;
    padding: var(--space-xs) var(--space-lg);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    font-weight: bold;
    border-radius: 3px;
    border: 2px solid;
    background: transparent;
    transition: background var(--transition-fast);
    min-width: 72px;
}

.pump-btn--on {
    border-color: var(--accent-green);
    color: var(--accent-green);
}

.pump-btn--on:hover {
    background: rgba(16, 185, 129, 0.15);
}

.pump-btn--off {
    border-color: var(--text-dim);
    color: var(--text-muted);
}

.pump-btn--off:hover {
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
}

.pump-temp {
    font-size: 0.8rem;
    font-family: var(--font-mono);
    color: var(--text-muted);
}

.coolant-error {
    grid-column: 1 / -1;
    color: var(--accent-red);
    font-size: 0.9rem;
}

.coolant-empty {
    grid-column: 1 / -1;
    color: var(--text-muted);
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════
   11. RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .helm-layout {
        grid-template-columns: 1fr;
    }

    .reactor-layout {
        grid-template-columns: 1fr;
    }

    .reactor-section--gauge,
    .reactor-section--target,
    .reactor-section--coolant {
        grid-column: 1;
    }

    .portal-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }

    .station-main {
        padding: var(--space-md);
    }
}

/* ═══════════════════════════════════════════════════════════════
   11. SCIENCE MANUAL ANALYSIS (CC_017)
   ═══════════════════════════════════════════════════════════════ */

.analysis-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    padding: var(--space-lg);
}

.analysis-instruction {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-md);
    background: rgba(0, 212, 255, 0.05);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: 4px;
}

.puzzle-type-badge {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--accent-cyan);
    border: 1px solid var(--accent-cyan);
    padding: 2px 8px;
    display: inline-block;
    border-radius: 2px;
}

.puzzle-instruction {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0;
}

/* ── Timer ──────────────────────────────────────────────────── */
.analysis-timer {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

.timer-label {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
}

.timer-value {
    font-family: var(--font-mono);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--accent-cyan);
    transition: color 0.3s;
}

.timer--critical .timer-value {
    color: var(--alert-red);
    animation: timer-pulse 0.5s ease-in-out infinite;
}

@keyframes timer-pulse {
    50% { opacity: 0.5; }
}

.timer-bar {
    height: 4px;
    background: rgba(0, 212, 255, 0.15);
    border-radius: 2px;
    overflow: hidden;
}

.timer-fill {
    height: 100%;
    background: var(--accent-cyan);
    transition: width 1s linear, background-color 0.3s;
    border-radius: 2px;
}

.timer--critical .timer-fill {
    background: var(--alert-red);
}

/* ── Puzzle Options ─────────────────────────────────────────── */
.puzzle-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

.puzzle-option-form {
    margin: 0;
}

.puzzle-option-btn {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    color: var(--text-primary);
    font-family: var(--font-mono);
}

.puzzle-option-btn:hover {
    border-color: var(--accent-cyan);
    background: rgba(0, 212, 255, 0.08);
}

.puzzle-option-btn:active {
    background: rgba(0, 212, 255, 0.15);
}

.option-svg-container {
    width: 120px;
    height: 120px;
}

.option-svg-container svg {
    width: 100%;
    height: 100%;
    border-radius: 4px;
}

.option-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

/* ── Result Display ─────────────────────────────────────────── */
.analysis-result {
    padding: var(--space-lg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    min-height: 120px;
    justify-content: center;
    transition: border-color 0.3s, background 0.3s;
}

.result-placeholder {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.result-quality-badge {
    font-family: var(--font-mono);
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    padding: var(--space-xs) var(--space-md);
    border-radius: 4px;
}

.badge--EXCELLENT { background: rgba(16, 185, 129, 0.2); color: var(--accent-green); border: 1px solid var(--accent-green); }
.badge--GOOD      { background: rgba(0, 212, 255, 0.1); color: var(--accent-cyan); border: 1px solid var(--accent-cyan); }
.badge--POOR      { background: rgba(245, 158, 11, 0.1); color: var(--accent-yellow); border: 1px solid var(--accent-yellow); }
.badge--FAILED    { background: rgba(239, 68, 68, 0.1); color: var(--alert-red); border: 1px solid var(--alert-red); }

.result--EXCELLENT { border-color: var(--accent-green); background: rgba(16, 185, 129, 0.05); }
.result--GOOD      { border-color: var(--accent-cyan); background: rgba(0, 212, 255, 0.05); }
.result--POOR      { border-color: var(--accent-yellow); background: rgba(245, 158, 11, 0.05); }
.result--FAILED    { border-color: var(--alert-red); background: rgba(239, 68, 68, 0.05); }

.result-message {
    font-size: 0.9rem;
    color: var(--text-secondary);
    text-align: center;
    margin: 0;
}

.result-retry-hint {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--accent-yellow);
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   CC_032 — ENGINEERING REACTOR UI
   Styles für Reaktorgauge, Temperaturanzeige, Kühlpumpen-Controls
   ═══════════════════════════════════════════════════════════════ */

/* Station-Akzent für Engineering */
[data-station="engineering"] {
    --station-accent: var(--accent-yellow);
}

/* Reactor Layout */
.reactor-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
}

@media (max-width: 768px) {
    .reactor-layout {
        grid-template-columns: 1fr;
    }
}

/* Gauge-Panel */
.reactor-gauge-panel {
    border-left: 3px solid var(--station-accent, var(--accent-yellow));
}

/* Leistungsbalken */
.gauge-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.gauge-bar-track {
    height: 1.5rem;
    background: var(--bg-secondary);
    border-radius: 2px;
    overflow: hidden;
    border: 1px solid var(--border-color, #1f2937);
}

.gauge-bar-fill {
    height: 100%;
    background: var(--accent-green);
    transition: width 400ms ease;
}

.gauge-bar-fill[data-tone="warning"] { background: var(--accent-yellow); }
.gauge-bar-fill[data-tone="danger"]  { background: var(--accent-red); }
.gauge-bar-fill[data-tone="success"] { background: var(--accent-green); }

.gauge-values {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.875rem;
}

.gauge-current {
    font-weight: bold;
    color: var(--text-primary);
}

.gauge-separator {
    color: var(--text-muted);
}

.gauge-target {
    color: var(--text-muted);
    font-size: 0.75rem;
}

/* Temperaturanzeige */
.temp-display {
    display: flex;
    align-items: baseline;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border-radius: 4px;
    background: var(--bg-secondary);
    transition: background-color 300ms;
}

.temp-value {
    font-size: 1.5rem;
    font-weight: bold;
    font-family: var(--font-mono);
}

.temp-label {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
}

.temp-nominal  { color: var(--accent-green); }
.temp-warning  { color: var(--accent-yellow); background: rgba(245, 158, 11, 0.1); }
.temp-danger   { color: var(--accent-red);    background: rgba(239, 68, 68, 0.12); animation: pulse-danger 1.5s infinite; }

@keyframes pulse-danger {
    50% { opacity: 0.75; }
}

/* Reactor Controls */
.reactor-controls {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.control-group {
    background: var(--bg-panel);
    border: 1px solid var(--border-color, #1f2937);
    border-radius: 4px;
    padding: var(--space-md);
}

.control-title {
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: var(--space-sm);
}

/* Target Slider */
.target-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.slider-label {
    font-size: 0.875rem;
    color: var(--text-primary);
}

.power-slider {
    width: 100%;
    height: 6px;
    accent-color: var(--station-accent, var(--accent-yellow));
    cursor: pointer;
}

/* Coolant Panel */
.coolant-panel {
    border-left: 3px solid var(--accent-cyan);
}

.pump-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--space-sm);
}

.pump-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color, #1f2937);
    border-radius: 4px;
    padding: var(--space-sm) var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.pump-card[data-tone="warning"] { border-color: var(--accent-yellow); }
.pump-card[data-tone="danger"]  { border-color: var(--accent-red); }

.pump-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pump-name {
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.pump-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-dim);
}

.pump-status-dot.pump-active   { background: var(--accent-green); box-shadow: 0 0 4px var(--accent-green); }
.pump-status-dot.pump-inactive { background: var(--text-dim); }

.pump-metrics {
    display: flex;
    gap: var(--space-sm);
}

.pump-metric {
    display: flex;
    flex-direction: column;
    font-size: 0.7rem;
}

.metric-label { color: var(--text-muted); }
.metric-value { font-weight: bold; font-family: var(--font-mono); }

/* Pump Toggle Buttons */
.btn-pump-toggle {
    margin-top: var(--space-xs);
    padding: 0.2rem 0.75rem;
    border: 1px solid var(--border-color, #1f2937);
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: bold;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: background 200ms;
}

.btn-pump-on  {
    background: var(--accent-green);
    color: #000;
    border-color: var(--accent-green);
}
.btn-pump-on:hover  { background: #0d9966; }

.btn-pump-off {
    background: var(--bg-secondary);
    color: var(--text-muted);
}
.btn-pump-off:hover { background: var(--bg-panel); color: var(--text-primary); }


/* ═══════════════════════════════════════════════════════════════
   CC_033 — BRIDGE COMMAND UI
   Styles für Kommandopult, Stationspräsenz, Schnellaktionen, Toast
   ═══════════════════════════════════════════════════════════════ */

/* Station-Akzent für Bridge/Command */
[data-station="command"] {
    --station-accent: var(--accent-blue);
}

/* Command Layout */
.command-layout {
    display: grid;
    grid-template-columns: 260px 1fr 240px;
    gap: var(--space-lg);
    align-items: start;
}

@media (max-width: 900px) {
    .command-layout {
        grid-template-columns: 1fr;
    }
    .command-right { order: 3; }
}

.command-left,
.command-center,
.command-right {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* Alert State Panel */
.command-alert-panel {
    border-left: 3px solid var(--station-accent, var(--accent-blue));
}

.command-alert-panel[data-tone="danger"] { border-color: var(--accent-red); }
.command-alert-panel[data-tone="warning"] { border-color: var(--accent-yellow); }
.command-alert-panel[data-tone="success"] { border-color: var(--accent-green); }

.alert-state-display {
    padding: var(--space-sm) var(--space-md);
    border-radius: 4px;
    text-align: center;
}

.alert-state-label {
    font-size: 1.5rem;
    font-weight: bold;
    font-family: var(--font-mono);
    letter-spacing: 0.2em;
}

.alert-state-display[data-tone="danger"]  .alert-state-label { color: var(--accent-red); }
.alert-state-display[data-tone="warning"] .alert-state-label { color: var(--accent-yellow); }
.alert-state-display[data-tone="success"] .alert-state-label { color: var(--accent-green); }

/* Station Presence Grid */
.presence-panel {
    border-left: 3px solid var(--accent-cyan);
}

.station-presence-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
}

.station-slot {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    border-radius: 3px;
    background: var(--bg-secondary);
    font-size: 0.8rem;
}

.station-slot--online  { background: rgba(16, 185, 129, 0.08); }
.station-slot--offline { opacity: 0.55; }

.presence-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.presence-dot--online  {
    background: var(--accent-green);
    box-shadow: 0 0 4px var(--accent-green);
}
.presence-dot--offline { background: var(--text-dim); }

.presence-name {
    flex: 1;
    font-weight: bold;
}

.presence-status {
    font-size: 0.65rem;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

/* Unstaffed station indicator */
.station-slot--unstaffed {
    border: 1px solid var(--accent-red);
    background: rgba(239, 68, 68, 0.1);
}
/* Besetzungsverhaeltnis "2/4" — bewusst ruhig, der Blick soll an KEINE CREW haengenbleiben. */
.presence-crew-ratio {
    font-size: 0.55rem;
    font-weight: bold;
    letter-spacing: 0.06em;
    color: var(--text-muted, #94a3b8);
    background: rgba(148, 163, 184, 0.12);
    padding: 1px 4px;
    border-radius: 2px;
    white-space: nowrap;
}

.presence-unstaffed-badge {
    font-size: 0.55rem;
    font-weight: bold;
    letter-spacing: 0.06em;
    color: var(--accent-red);
    background: rgba(239, 68, 68, 0.15);
    padding: 1px 4px;
    border-radius: 2px;
    white-space: nowrap;
}

/* Mission Panel */
.mission-panel {
    border-left: 3px solid var(--accent-teal);
}

.mission-name {
    font-size: 1rem;
    font-weight: bold;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.session-metrics {
    display: flex;
    gap: var(--space-md);
    margin-top: var(--space-sm);
}

.session-metric {
    display: flex;
    flex-direction: column;
    font-size: 0.75rem;
}

.mission-placeholder {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-style: italic;
}

/* Quick Actions Panel */
.quick-actions-panel {
    border-left: 3px solid var(--station-accent, var(--accent-blue));
}

.quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
}

.btn-action {
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--border-color, #1f2937);
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: bold;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: background 200ms;
    white-space: nowrap;
}

.btn-action.btn-primary  { background: var(--accent-blue);   color: #fff; border-color: var(--accent-blue); }
.btn-action.btn-danger   { background: var(--accent-red);    color: #fff; border-color: var(--accent-red); }
.btn-action.btn-warning  { background: var(--accent-yellow); color: #000; border-color: var(--accent-yellow); }
.btn-action.btn-success  { background: var(--accent-green);  color: #000; border-color: var(--accent-green); }
.btn-action.btn-neutral  { background: var(--bg-secondary);  color: var(--text-primary); }

.btn-action:hover { filter: brightness(1.2); }

/* Session Status Panel */
.session-status-panel {
    border-left: 3px solid var(--text-muted);
}

.session-info {
    padding: var(--space-sm) 0;
}

.session-mission {
    font-size: 0.9rem;
    color: var(--text-primary);
}

/* Action Toast */
.action-toast-container {
    min-height: 2.5rem;
}

.action-toast {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-radius: 4px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color, #1f2937);
    font-size: 0.85rem;
    margin-top: var(--space-sm);
    animation: slide-in-toast 200ms ease;
}

.action-toast--empty { display: none; }

.action-toast--danger  { background: rgba(239, 68, 68, 0.12);   border-color: var(--accent-red); }
.action-toast--warning { background: rgba(245, 158, 11, 0.12); border-color: var(--accent-yellow); }
.action-toast--success { background: rgba(16, 185, 129, 0.10); border-color: var(--accent-green); }

@keyframes slide-in-toast {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.toast-icon { font-size: 1rem; }
.toast-message { flex: 1; }

.toast-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0 0.2rem;
}
.toast-close:hover { color: var(--text-primary); }

/* ═══════════════════════════════════════════════════════════════
   GM DAMAGE OVERVIEW (CC_050 P3)
   ═══════════════════════════════════════════════════════════════ */

/* Station-Akzentfarbe GM Damage */
[data-station="gm-damage"] {
    --station-accent: var(--accent-red);
}

/* Layout */
.damage-overview-layout {
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.damage-header {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: var(--space-md);
}

.damage-title {
    font-size: 1.2rem;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.damage-subtitle {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: var(--space-xs);
}

/* Health Grid */
.system-health-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-md);
}

/* Einzelne System-Karte */
.system-health-card {
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    transition: border-color var(--transition-fast);
}

.system-health-card:hover {
    border-color: var(--accent-cyan);
}

/* Header: Name + Badge */
.system-health-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.system-health-name {
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* State-Badge */
.system-state-badge {
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: bold;
}

.system-state-badge.state-nominal {
    background: rgba(16, 185, 129, 0.15);
    color: var(--accent-green);
    border: 1px solid var(--accent-green);
}

.system-state-badge.state-degraded {
    background: rgba(245, 158, 11, 0.15);
    color: var(--accent-yellow);
    border: 1px solid var(--accent-yellow);
}

.system-state-badge.state-critical {
    background: rgba(239, 68, 68, 0.15);
    color: var(--accent-red);
    border: 1px solid var(--accent-red);
    animation: pulse-critical 1.5s ease-in-out infinite;
}

.system-state-badge.state-offline {
    background: rgba(107, 114, 128, 0.15);
    color: var(--text-muted);
    border: 1px solid var(--text-muted);
}

@keyframes pulse-critical {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.6; }
}

/* Health-Balken */
.system-health-bar-track {
    height: 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    overflow: hidden;
}

.system-health-bar-fill {
    height: 100%;
    transition: width var(--transition-base);
    border-radius: 2px;
}

.system-health-bar-fill.health-nominal  { background: var(--accent-green); }
.system-health-bar-fill.health-degraded { background: var(--accent-yellow); }
.system-health-bar-fill.health-critical { background: var(--accent-red); }
.system-health-bar-fill.health-offline  { background: var(--text-dim); }

/* Details */
.system-health-details {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.system-health-value {
    color: var(--text-primary);
    font-weight: bold;
}

.system-health-source {
    font-style: italic;
    font-size: 0.75rem;
}

/* GM-Aktionen */
.system-health-actions {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-xs);
}

.inline-form {
    display: inline;
}

.btn-sm {
    padding: 4px 10px;
    font-size: 0.75rem;
}

.btn-success {
    border-color: var(--accent-green);
    color: var(--accent-green);
}

.btn-success:hover {
    background: rgba(16, 185, 129, 0.1);
}

/* Error/Empty */
.damage-error {
    color: var(--accent-red);
    font-size: 0.9rem;
    padding: var(--space-sm);
    border: 1px solid var(--accent-red);
    border-radius: 3px;
    grid-column: 1 / -1;
}

.system-health-empty {
    color: var(--text-muted);
    font-style: italic;
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--space-lg);
}

/* Responsive */
@media (max-width: 640px) {
    .system-health-grid {
        grid-template-columns: 1fr;
    }
}


/* ═══ CC_034 — Navigation Station ═══ */
[data-station="navigation"] { --station-accent: var(--accent-cyan); }

/* nav layout */
.nav-layout { display: grid; grid-template-columns: 1fr 300px; gap: var(--space-md); }
.nav-layout--map { display: flex; flex-direction: column; gap: var(--space-md); }
.nav-layout--controls { display: flex; flex-direction: column; gap: var(--space-md); }

/* SVG map */
.sector-map { background: #000510; border: 1px solid var(--border-color); border-radius: 4px; width: 100%; height: auto; }
/* km-Raster in Sektor-km statt Radar-Entfernungsringen: die Karte ist Arbeitsfläche. */
.nav-grid { stroke: #16283a; stroke-width: 0.6; }
.nav-grid--axis { stroke: #25415c; stroke-width: 0.9; }
.nav-grid-label { fill: #3d5568; font-family: monospace; font-size: 9px; }
/* Sektorwand: harte Grenze, deutlich vom Raster abgesetzt. */
.nav-sector-wall { stroke: #ffc46e; stroke-width: 1; stroke-opacity: 0.45; stroke-dasharray: 10,5; }
.nav-scale-bar line { stroke: #8fa3b8; stroke-width: 1.2; }
.nav-scale-bar text { fill: #8fa3b8; font-family: monospace; font-size: 10px; }
.ship-icon { fill: var(--accent-cyan); }

/* Autopilot-Panel der Navigation — Betriebsart, Zielstatus und Koordinateneingabe.
   Ersetzt die frueheren Inline-Styles des Koordinatenformulars. */
.autopilot-badge {
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    border: 1px solid transparent;
}
.autopilot-badge--on {
    background: rgba(16, 185, 129, 0.16);
    border-color: rgba(16, 185, 129, 0.5);
    color: #6ee7b7;
}
.autopilot-badge--off {
    background: rgba(148, 163, 184, 0.14);
    border-color: rgba(148, 163, 184, 0.4);
    color: var(--text-muted);
}
.autopilot-section-label {
    display: block;
    margin: var(--space-sm) 0 4px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
}
.autopilot-modes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
    gap: 4px;
}
.autopilot-mode-btn {
    min-height: 40px;
    padding: 4px 6px;
    font-family: inherit;
    font-size: 0.78rem;
    color: var(--text-primary);
    background: rgba(0, 229, 255, 0.08);
    border: 1px solid rgba(0, 229, 255, 0.35);
    border-radius: 4px;
    cursor: pointer;
}
.autopilot-mode-btn:hover:not(:disabled) { background: rgba(0, 229, 255, 0.18); }
.autopilot-mode-btn--active {
    background: rgba(0, 229, 255, 0.3);
    border-color: var(--accent-cyan);
    font-weight: 600;
}
.autopilot-mode-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.autopilot-hint {
    margin: var(--space-xs) 0 0;
    font-size: 0.74rem;
    line-height: 1.4;
    color: var(--text-muted);
}
.autopilot-hint--warn { color: #fcd34d; }
.autopilot-form { display: flex; flex-direction: column; gap: 6px; }
.autopilot-submit { margin-top: 6px; width: 100%; min-height: 40px; }
.waypoint-marker { fill: none; stroke: var(--accent-yellow); stroke-width: 1.5; }
.waypoint-marker-label { fill: var(--text-muted); font-family: monospace; font-size: 10px; }
.course-line { stroke: var(--accent-cyan); stroke-width: 1; stroke-dasharray: 8,4; fill: none; }

/* CC_179 — Sektorkarte als Projektion der Galaxie-km.
   Die Karte zeigt jetzt mehrere Ebenen aus einer Quelle: Welt-Objekte, Kontakte,
   Gefahrenzonen und Sektorgrenzen. Sie brauchen unterscheidbare Symbole, sonst ist die
   zusaetzliche Information nur zusaetzliches Rauschen. */
.waypoint-marker--active { stroke: var(--accent-cyan); stroke-width: 2.5; }
.waypoint-marker--custom { stroke: #7cffd4; stroke-dasharray: 3,2; }
/* Hoehe ueber/unter der Flugebene — die Achse, die eine 2D-Karte nicht zeigen kann. */
.waypoint-marker-altitude { fill: #7f8ea3; font-family: monospace; font-size: 9px; }
/* Echte Ausdehnung durchflugbarer Objekte (Guertel, Nebel) statt Punktsymbol. */
.nav-object-extent { fill: none; stroke: rgba(138,122,92,0.45); stroke-width: 1; stroke-dasharray: 2,3; }
.nav-object-extent--nebula { stroke: rgba(160,92,255,0.35); }
.contact-marker { fill: rgba(160,180,200,0.65); stroke: #a0b4c8; stroke-width: 1; }
.contact-marker--hostile { fill: rgba(248,113,113,0.7); stroke: #f87171; }
/* Größenklassen (X4): kleine Schiffe leicht, große mit kräftigem Umriss. */
.contact-marker--S { stroke-width: 0.8; }
.contact-marker--L { stroke-width: 1.4; }
.contact-marker--XL { stroke-width: 1.8; fill-opacity: 0.85; }
.contact-marker-label { fill: #8fa3b8; font-family: monospace; font-size: 9px; }
.nav-map-scale { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.nav-map-scale__label { color: var(--text-muted); font-size: 0.7rem; letter-spacing: 0.05em; }
.nav-map-hint { font-size: 0.7rem; color: var(--text-muted); margin-top: 4px; line-height: 1.4; }
/* Verschiebbare Karte: Ziehen verschiebt den Ausschnitt statt die Seite zu scrollen. */
.sector-map--pannable { cursor: crosshair; touch-action: none; user-select: none; -webkit-user-select: none; }
.sector-map--dragging { cursor: grabbing; }
/* Kompakter Zoom: − Reichweite + (statt einer Taste je Stufe). Spezifität .nav-map-scale
   davor, damit die v2-Bedienelement-Mindesthöhe die Zeile nicht aufbläht. */
.nav-map-scale .nav-map-zoom__btn {
    min-width: 36px; min-height: 32px; height: 32px; padding: 0 10px; margin: 0;
    font-family: var(--font-mono); font-size: 1rem; line-height: 1;
    border: 1px solid var(--border-color); background: var(--bg-secondary);
    color: var(--text-primary); border-radius: 3px; cursor: pointer;
}
.nav-map-scale .nav-map-zoom__btn:hover:not(:disabled) { border-color: var(--accent-cyan); color: var(--accent-cyan); }
.nav-map-scale .nav-map-zoom__btn:disabled { opacity: 0.35; cursor: not-allowed; }
.nav-map-scale .nav-map-zoom__btn--recenter { margin-left: auto; font-size: 0.75rem; }
.nav-map-zoom__value { min-width: 64px; text-align: center; font-family: var(--font-mono); font-size: 0.85rem; color: var(--accent-cyan); }
/* Eigene Route: Linie und Richtungspfeil vom Wegpunkt zu seinem Nachfolger. */
.nav-route-line { stroke: #7cffd4; stroke-width: 1.2; stroke-opacity: 0.7; }
.nav-route-arrow { fill: #7cffd4; fill-opacity: 0.85; }
.nav-map-pending-ring { fill: none; stroke: #7cffd4; stroke-width: 1; stroke-dasharray: 2,2; }
.nav-map-name-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.nav-map-name-form__label { font-size: 0.7rem; color: var(--text-muted); letter-spacing: 0.05em; }
.nav-map-name-form__input {
    flex: 1 1 160px; min-width: 0; padding: 4px 8px; font-family: var(--font-mono);
    background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-primary); border-radius: 3px;
}
.nav-map-name-form__coords { font-size: 0.7rem; color: var(--text-muted); font-family: var(--font-mono); }
.nav-map-limit, .nav-map-error { font-size: 0.75rem; color: #fcd34d; margin-top: 4px; }
.nav-map-display-link { align-self: flex-end; font-size: 0.75rem; color: var(--accent-cyan); text-decoration: none; }
.nav-map-display-link:hover { text-decoration: underline; }

/* Eigene Kartenanzeige (/bridge/navigation/map-display): Karte füllt den Bildschirm,
   die Route liegt als einklappbare Leiste daneben (schmal: darüber). */
/* Die Kartenanzeige nutzt die volle Gerätebreite statt der Stations-Maximalbreite. */
.station-main:has(> .nav-display), .station-main:has(.nav-display) { max-width: 100%; width: 100%; }
.nav-display { position: relative; display: flex; gap: var(--space-md); height: calc(100dvh - 140px); min-height: 320px; }
.nav-display__map { flex: 1 1 auto; min-width: 0; height: 100%; }
.nav-display__map #nav-map-container { height: 100%; display: flex; flex-direction: column; box-sizing: border-box; margin: 0; }
.nav-display__map #nav-map-container > .panel-section:first-of-type { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.nav-display__map svg.sector-map { flex: 1 1 auto; min-height: 0; width: 100%; height: 100%; }
.nav-display__map .nav-map-hint { display: none; }
.nav-display__toggle { position: absolute; top: 8px; right: 8px; z-index: 2; }
.nav-display__route { display: none; flex: 0 0 400px; height: 100%; overflow: auto; }
/* Schmale Leiste: wie auf dem Handy — Koordinaten weichen, Kurs/Löschen untereinander. */
.nav-display__route .waypoint-col-coords { display: none; }
.nav-display__route .waypoint-actions { display: flex; flex-direction: column; gap: 4px; }
.nav-display__route .waypoint-table th, .nav-display__route .waypoint-table td { padding: 4px; }
/* Namensfeld als Einblendung über der Karte: es darf die Kartenfläche nicht verkleinern,
   sonst stimmt der Zuschnitt nicht mehr. */
.nav-display__map #nav-map-container > .panel-section:first-of-type { position: relative; }
.nav-display__map .nav-map-name-form {
    position: absolute; left: 50%; bottom: 48px; transform: translateX(-50%); z-index: 2;
    width: min(560px, calc(100% - 32px)); margin: 0; padding: 10px 12px;
    background: rgba(8, 14, 24, 0.94); border: 1px solid var(--accent-cyan); border-radius: 4px;
}
.nav-display__map .nav-map-limit, .nav-display__map .nav-map-error {
    position: absolute; left: 50%; top: 48px; transform: translateX(-50%); z-index: 2;
    padding: 4px 10px; background: rgba(8, 14, 24, 0.94); border-radius: 3px;
}
.nav-display--route-open .nav-display__route { display: block; }
@media (max-width: 800px) {
    .nav-display--route-open .nav-display__route {
        position: absolute; inset: 0; z-index: 1; background: var(--bg-primary, #05080f);
    }
}

/* Speed panel */
.speed-panel { display: flex; flex-direction: column; gap: var(--space-sm); }
.speed-buttons { display: flex; flex-direction: column; gap: var(--space-xs); }
.btn-speed { padding: var(--space-sm) var(--space-md); border: 1px solid var(--border-color); background: var(--bg-secondary); color: var(--text-muted); cursor: pointer; border-radius: 3px; font-family: var(--font-mono); letter-spacing: 0.05em; }
.btn-speed:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); }
.btn-speed--active { border-color: var(--accent-cyan); color: var(--accent-cyan); background: rgba(6, 182, 212, 0.1); font-weight: bold; }

/* Waypoint list */
.waypoint-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.waypoint-table th { color: var(--text-muted); font-weight: normal; text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--border-color); }
.waypoint-table td { padding: 4px 8px; border-bottom: 1px solid var(--bg-secondary); }
.waypoint-section-title { margin: 0 0 4px; font-size: 0.72rem; font-weight: normal; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.waypoint-actions { white-space: nowrap; }
.waypoint-table-wrap { overflow-x: auto; }
/* Schmale Bildschirme: Kurs/Löschen müssen sichtbar bleiben, die Koordinaten weichen. */
@media (max-width: 600px) {
    .waypoint-col-coords { display: none; }
    .waypoint-actions { display: flex; flex-direction: column; gap: 4px; }
    .waypoint-actions .waypoint-btn { letter-spacing: 0; }
    .waypoint-table th, .waypoint-table td { padding: 4px; }
}
.waypoint-btn { padding: 2px 8px; font-size: 0.75rem; }
.waypoint-btn--delete:hover { border-color: #f87171; color: #f87171; }

/* Wegpunkte: Reiter, sortierbare Spalten, Liste rollt in sich (/js/waypoint-list.js).
   Gefiltert wird über data-wp-tab am Panel. */
.wp-tabs { display: flex; flex-wrap: nowrap; gap: 4px; margin: 0; overflow-x: auto; scrollbar-width: thin; }
.wp-tabs > .wp-tab { flex: 0 0 auto; }
.wp-tab {
    padding: 4px 10px; border: 1px solid var(--border-color); background: var(--bg-secondary);
    color: var(--text-muted); border-radius: 3px; cursor: pointer; font-family: var(--font-mono);
    font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase;
}
.wp-tab:hover:not(:disabled) { border-color: var(--accent-cyan); color: var(--accent-cyan); }
.wp-tab:disabled { opacity: 0.4; cursor: default; }
.wp-tab[aria-selected="true"] { border-color: var(--accent-cyan); color: var(--accent-cyan); background: rgba(6, 182, 212, 0.1); }
.wp-tab__count { opacity: 0.7; margin-left: 2px; }
[data-wp-tab="route"] .wp-section--objects,
[data-wp-tab]:not([data-wp-tab="route"]) .wp-section--route { display: none; }
[data-wp-tab="station"] tr[data-cat]:not([data-cat="station"]),
[data-wp-tab="body"] tr[data-cat]:not([data-cat="body"]),
[data-wp-tab="nav"] tr[data-cat]:not([data-cat="nav"]),
[data-wp-tab="zone"] tr[data-cat]:not([data-cat="zone"]) { display: none; }
/* Höchstens die halbe Bildschirmhöhe, der Rest rollt; Kopfzeile bleibt stehen. */
.wp-scroll { max-height: 50vh; overflow-y: auto; }
.wp-scroll thead th { position: sticky; top: 0; z-index: 1; background: var(--bg-panel, var(--bg-primary, #0b1220)); }
.wp-sort {
    all: unset; cursor: pointer; color: inherit; font: inherit; white-space: nowrap;
}
.wp-sort:hover, .wp-sort:focus-visible { color: var(--accent-cyan); }
.wp-sort::after { content: ' \2195'; opacity: 0.35; }
th[aria-sort="ascending"] .wp-sort::after { content: ' \25B2'; opacity: 0.9; }
th[aria-sort="descending"] .wp-sort::after { content: ' \25BC'; opacity: 0.9; }
th[aria-sort="ascending"] .wp-sort, th[aria-sort="descending"] .wp-sort { color: var(--accent-cyan); }
/* Leiste der Kartenanzeige rollt selbst. */
.nav-display__route .wp-scroll { max-height: none; overflow: visible; }
.nav-display__route .wp-scroll thead th { position: static; }

/* ═══ CC_035 — Tactical Station ═══ */
[data-station="tactical"] { --station-accent: var(--accent-red); }

.tactical-layout { display: grid; grid-template-columns: 1fr 280px; gap: var(--space-md); }
.tactical-layout--radar { display: flex; flex-direction: column; gap: var(--space-md); }
.tactical-layout--info { display: flex; flex-direction: column; gap: var(--space-md); }

/* Radar SVG */
.radar-scope { background: #000a05; border: 1px solid #0a2a0a; border-radius: 50%; width: 100%; height: auto; }
.radar-ring { stroke: #0a3a0a; stroke-width: 0.5; fill: none; }
.radar-crosshair { stroke: #0a2a0a; stroke-width: 0.5; }
.own-ship { fill: var(--accent-cyan); }
.contact-friendly { fill: var(--accent-blue); }
.contact-hostile { fill: var(--accent-red); }
.contact-unknown { fill: var(--accent-yellow); }
.contact-neutral { fill: white; fill-opacity: 0.7; }
.contact-label { fill: var(--text-muted); font-family: monospace; font-size: 9px; }
.contact-marker { cursor: pointer; }
.contact-marker:hover .contact-friendly,
.contact-marker:hover .contact-hostile,
.contact-marker:hover .contact-unknown,
.contact-marker:hover .contact-neutral { opacity: 0.7; }

/* Weapon status */
.weapon-status-list { display: flex; flex-direction: column; gap: var(--space-xs); }
.weapon-item { display: flex; align-items: center; justify-content: space-between; padding: var(--space-xs) var(--space-sm); border: 1px solid var(--border-color); border-radius: 3px; }
.weapon-status-badge { font-size: 0.75rem; padding: 2px 8px; border-radius: 2px; }
.weapon-status-badge--ready    { background: rgba(16,185,129,0.15); color: var(--accent-green); border: 1px solid var(--accent-green); }
.weapon-status-badge--charging { background: rgba(245,158,11,0.15);  color: var(--accent-yellow); border: 1px solid var(--accent-yellow); }
.weapon-status-badge--offline  { background: rgba(107,114,128,0.15); color: var(--text-muted); border: 1px solid var(--text-muted); }

/* Target info */
.target-info-panel { padding: var(--space-md); }
.target-stat { display: flex; justify-content: space-between; margin-bottom: var(--space-xs); font-size: 0.9rem; }
.target-class-badge { display: inline-block; padding: 2px 8px; border-radius: 2px; font-size: 0.75rem; }
.target-class-badge--FRIENDLY { background: rgba(59,130,246,0.2); color: var(--accent-blue); }
.target-class-badge--HOSTILE  { background: rgba(239,68,68,0.2);   color: var(--accent-red); }
.target-class-badge--UNKNOWN  { background: rgba(245,158,11,0.2);  color: var(--accent-yellow); }
.target-class-badge--NEUTRAL  { background: rgba(224,231,255,0.1); color: var(--text-muted); }

/* ═══ CC_036 — Comms Station ═══ */
[data-station="comms"] { --station-accent: var(--accent-blue); }

.comms-layout { display: grid; grid-template-columns: 1fr 200px; gap: var(--space-md); }
.comms-layout--main { display: flex; flex-direction: column; gap: var(--space-md); }
.comms-layout--freq { display: flex; flex-direction: column; gap: var(--space-md); }

/* Message log */
.comms-log-scroll { max-height: 400px; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-xs); }
.comm-message { padding: var(--space-xs) var(--space-sm); border-left: 2px solid var(--border-color); font-size: 0.875rem; }
.comm-message--incoming { border-left-color: var(--accent-green); }
.comm-message--outgoing { border-left-color: var(--accent-blue); text-align: right; }
.comm-message--gm       { border-left-color: var(--accent-yellow); background: rgba(245,158,11,0.05); }
.gm-badge { font-size: 0.65rem; padding: 1px 5px; border-radius: 2px; background: rgba(245,158,11,0.2); color: var(--accent-yellow); border: 1px solid var(--accent-yellow); font-weight: bold; }
.comm-sender { font-weight: bold; color: var(--text-primary); }
.comm-timestamp { color: var(--text-muted); font-size: 0.75rem; }
.comm-channel-badge { font-size: 0.7rem; padding: 1px 5px; border: 1px solid var(--border-color); border-radius: 2px; color: var(--text-muted); }
.comm-content { color: var(--text-primary); margin-top: 2px; }

/* Frequency panel */
.freq-buttons { display: flex; flex-direction: column; gap: var(--space-xs); }
.btn-freq { width: 100%; padding: var(--space-xs) var(--space-sm); border: 1px solid var(--border-color); background: var(--bg-secondary); color: var(--text-muted); cursor: pointer; border-radius: 3px; font-family: var(--font-mono); font-size: 0.8rem; text-align: left; }
.btn-freq:hover { border-color: var(--accent-blue); color: var(--accent-blue); }
.btn-freq--active { border-color: var(--accent-blue); color: var(--accent-blue); background: rgba(59,130,246,0.1); font-weight: bold; }

/* Hailing form */
.hail-form { display: flex; flex-direction: column; gap: var(--space-sm); }
.hail-form input,
.hail-form select,
.hail-form textarea { background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-primary); padding: var(--space-xs) var(--space-sm); border-radius: 3px; font-family: var(--font-mono); font-size: 0.875rem; }
.hail-form textarea { resize: vertical; min-height: 60px; }
.hail-form input:focus,
.hail-form select:focus,
.hail-form textarea:focus { outline: none; border-color: var(--accent-blue); }

/* ═══════════════════════════════════════════════════════════════
   CC_029 P3 — PER-STATION ACCENT COLOURS & ACCESSIBILITY
   One --station-accent override per station panel; each page must
   set data-station="<id>" on <body> or the top-level wrapper.
   ═══════════════════════════════════════════════════════════════ */

/* Medical — teal (healing / life) */
[data-station="medical"]         { --station-accent: #14b8a6; }
/* Science — violet (research / discovery) */
[data-station="science"]         { --station-accent: #a78bfa; }
/* Science pipeline sub-page */
[data-station="science-pipeline"]{ --station-accent: #a78bfa; }
/* Security — amber-orange (alert / authority) */
[data-station="security"]        { --station-accent: #f97316; }
/* Operations (OTS) — sky blue (coordination) */
[data-station="operations"]      { --station-accent: #38bdf8; }
/* Life-support — emerald (environment / air) */
[data-station="life-support"]    { --station-accent: #34d399; }
/* Defense shields — indigo (protection) */
[data-station="defense"]         { --station-accent: #818cf8; }
/* Logistics / cargo — slate (supply) */
[data-station="logistics"]       { --station-accent: #94a3b8; }
/* Hangar — sky (flight ops) */
[data-station="hangar"]          { --station-accent: #7dd3fc; }
/* Dock — stone (heavy ops) */
[data-station="dock"]            { --station-accent: #a8a29e; }
/* CIC — crimson (combat information) */
[data-station="cic"]             { --station-accent: #f43f5e; }
/* GM console — gold (game master) */
[data-station="gm"]              { --station-accent: #fbbf24; }
/* Crew management */
[data-station="crew"]            { --station-accent: #60a5fa; }
/* Equipment catalog */
[data-station="equipment"]       { --station-accent: #34d399; }

/* ─── Accessibility: visible focus ring for keyboard navigation ── */
*:focus-visible {
    outline: 2px solid var(--station-accent, var(--accent-blue));
    outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   STATION PANEL KIT
   Shared chrome for HTMX station panels (.station-panel) such as the
   energy distributor (engineering systems) and the science anomaly
   pipeline. These primitives used to render as unstyled black/white
   markup — this gives them the StarshipOS instrument-panel look using
   the design tokens. Everything is scoped under .station-panel so it
   never leaks into page-specific stylesheets.
   ═══════════════════════════════════════════════════════════════ */

.station-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    /* Kein max-width/margin:auto hier: .station-main kappt bereits auf
       --shell-max und zentriert. Auto-Margins auf der Flex-Querachse heben
       sonst das stretch der in Flex-Layouts (Navigation/Taktik) eingebetteten
       Panels auf und lassen Radar/Sektorkarte auf die SVG-Intrinsicbreite
       kollabieren. */
    color: var(--text-primary);
}

/* ── Panel header ─────────────────────────────────────────────── */
.station-panel .panel-header {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-md);
    padding: var(--space-md) var(--space-md) var(--space-md) var(--space-lg);
    background: linear-gradient(90deg, var(--tint-brand), transparent 60%), var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-left: var(--accent-stripe) solid var(--station-accent, var(--accent-cyan));
    border-radius: var(--radius-md);
}

.station-panel .panel-title {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 1.15rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-primary);
}

.station-panel .panel-subtitle {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.station-panel .panel-status-badge {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.15rem 0.55rem;
    border-radius: var(--radius-xs);
    border: 1px solid var(--accent-cyan);
    color: var(--accent-cyan);
    background: var(--tint-cyan);
}
.station-panel .panel-status-badge[data-tone="stable"]   { border-color: var(--accent-green);  color: var(--accent-green);  background: var(--tint-green); }
.station-panel .panel-status-badge[data-tone="warning"]  { border-color: var(--accent-yellow); color: var(--accent-yellow); background: var(--tint-yellow); }
.station-panel .panel-status-badge[data-tone="unstable"] { border-color: var(--accent-yellow); color: var(--accent-yellow); background: var(--tint-yellow); }
.station-panel .panel-status-badge[data-tone="critical"] { border-color: var(--accent-red);    color: var(--accent-red);    background: var(--tint-red); animation: pulse-danger 1.6s infinite; }

/* ── Panel sections (card wells) ──────────────────────────────── */
.station-panel .panel-section {
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-lg);
}

/* ── Data tables ──────────────────────────────────────────────── */
.station-panel .data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.station-panel .data-table thead th {
    text-align: left;
    padding: var(--space-xs) var(--space-sm);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
}
.station-panel .data-table tbody td {
    padding: var(--space-sm);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}
.station-panel .data-table tbody tr:last-child td { border-bottom: none; }
.station-panel .data-table tbody tr:hover { background: var(--tint-brand); }
.station-panel .data-table td[data-tone="success"] { color: var(--accent-green); }
.station-panel .data-table td[data-tone="warning"] { color: var(--accent-yellow); }
.station-panel .data-table td[data-tone="danger"]  { color: var(--accent-red); }

/* ── Status badges (shared tones) ─────────────────────────────── */
.station-panel .status-badge {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.12rem 0.5rem;
    border-radius: var(--radius-xs);
    border: 1px solid var(--text-dim);
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.03);
    white-space: nowrap;
}
.station-panel .status-badge[data-tone="success"] { border-color: var(--accent-green);  color: var(--accent-green);  background: var(--tint-green); }
.station-panel .status-badge[data-tone="accent"]  { border-color: var(--accent-cyan);   color: var(--accent-cyan);   background: var(--tint-cyan); }
.station-panel .status-badge[data-tone="info"]    { border-color: var(--accent-blue);   color: var(--accent-blue);   background: var(--tint-blue); }
.station-panel .status-badge[data-tone="warning"] { border-color: var(--accent-yellow); color: var(--accent-yellow); background: var(--tint-yellow); }
.station-panel .status-badge[data-tone="danger"]  { border-color: var(--accent-red);    color: var(--accent-red);    background: var(--tint-red); }
.station-panel .status-badge[data-tone="ghost"]   { border-color: var(--text-dim);      color: var(--text-muted);    background: transparent; }

/* ── Transfer + alert + list rows ─────────────────────────────── */
.station-panel .transfer-list,
.station-panel .alert-list,
.station-panel .metrics-list,
.station-panel .project-list,
.station-panel .outcome-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}
.station-panel .transfer-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-left: var(--accent-stripe) solid var(--text-dim);
    border-radius: var(--radius-sm);
}
.station-panel .transfer-item[data-tone="success"] { border-left-color: var(--accent-green); }
.station-panel .transfer-item[data-tone="accent"]  { border-left-color: var(--accent-cyan); }
.station-panel .transfer-item[data-tone="info"]    { border-left-color: var(--accent-blue); }
.station-panel .transfer-item[data-tone="warning"] { border-left-color: var(--accent-yellow); }
.station-panel .transfer-item[data-tone="danger"]  { border-left-color: var(--accent-red); }
.station-panel .transfer-name { font-weight: 600; }
.station-panel .transfer-balance { margin-left: auto; font-family: var(--font-mono); }

.station-panel .alert-item {
    display: flex;
    align-items: baseline;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-left: var(--accent-stripe) solid var(--accent-yellow);
    border-radius: var(--radius-sm);
}
.station-panel .alert-item[data-tone="info"]    { border-left-color: var(--accent-blue); }
.station-panel .alert-item[data-tone="success"] { border-left-color: var(--accent-green); }
.station-panel .alert-item[data-tone="accent"]  { border-left-color: var(--accent-cyan); }
.station-panel .alert-item[data-tone="danger"]  { border-left-color: var(--accent-red); }
.station-panel .alert-code {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: var(--accent-cyan);
    white-space: nowrap;
}
.station-panel .alert-message { margin: 0; color: var(--text-primary); font-size: 0.85rem; }

/* ── Metric rows (science pipeline summary) ───────────────────── */
.station-panel .metrics-list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-md);
}
.station-panel .metric-item {
    flex: 1 1 9rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}
.station-panel .metric-label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.station-panel .metric-value { font-size: 1.5rem; font-weight: 700; color: var(--station-accent, var(--accent-cyan)); }
.station-panel .metric-total { font-size: 0.75rem; color: var(--text-muted); }

.station-panel .project-item,
.station-panel .outcome-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-left: var(--accent-stripe) solid var(--station-accent, var(--accent-violet));
    border-radius: var(--radius-sm);
}
.station-panel .project-header { display: flex; align-items: center; gap: var(--space-sm); }
.station-panel .project-id,
.station-panel .outcome-id { font-family: var(--font-mono); font-size: 0.72rem; color: var(--accent-cyan); }
.station-panel .project-title,
.station-panel .outcome-title { font-weight: 600; }
.station-panel .project-lead,
.station-panel .project-target,
.station-panel .outcome-station { font-size: 0.78rem; color: var(--text-muted); }

/* ── Panel buttons ────────────────────────────────────────────── */
.station-panel .panel-button {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    padding: 0.3rem 0.7rem;
    color: var(--text-primary);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
.station-panel .panel-button:hover {
    border-color: var(--station-accent, var(--accent-cyan));
    color: var(--station-accent, var(--accent-cyan));
    background: var(--tint-brand);
}
.station-panel .panel-button.is-active {
    border-color: var(--station-accent, var(--accent-cyan));
    color: var(--bg-primary);
    background: var(--station-accent, var(--accent-cyan));
}

.station-panel .panel-hint {
    font-size: 0.8rem;
    color: var(--accent-yellow);
    margin: 0 0 var(--space-sm);
}
.station-panel .preset-suggestion { font-size: 0.82rem; color: var(--text-muted); margin: var(--space-sm) 0 0; }
.station-panel .preset-auto-toggle { font-size: 0.82rem; color: var(--text-primary); cursor: pointer; }

/* ─── Responsive breakpoints (CC_029 P3) ─── */
@media (max-width: 1024px) {
    .station-grid           { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
    .portal-card-grid       { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
    .tactical-layout        { grid-template-columns: 1fr; }
    .comms-layout           { grid-template-columns: 1fr; }
    .nav-layout             { grid-template-columns: 1fr; }
    .engineering-layout     { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    html { font-size: 14px; }
    .station-header { flex-direction: column; gap: var(--space-sm); }
    .station-panel  { padding: var(--space-sm); }
    .station-grid   { grid-template-columns: 1fr; }
    .portal-card-grid { grid-template-columns: 1fr 1fr; }
    .alert-bar      { font-size: 0.8rem; }
}

@media (max-width: 480px) {
    .portal-card-grid { grid-template-columns: 1fr; }
    .btn, button      { min-height: 44px; }  /* touch target */
}

/* ─── Reduced-motion: disable CSS animations for a11y ─── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   CC_095 — Erstkontakt-Funkkanal (fragments/fc-channel.html)
   ═══════════════════════════════════════════════════════════════ */
.fc-channel { border-color: var(--accent-yellow); }
.fc-channel--locked { box-shadow: 0 0 10px rgba(59,130,246,0.35); }
.fc-channel--established { border-color: var(--accent-green); box-shadow: 0 0 10px rgba(52,211,153,0.35); }
.fc-target { font-family: var(--font-mono); margin-bottom: var(--space-xs); }
.fc-hints { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--space-sm); }
.fc-hint { font-size: 0.8rem; color: var(--accent-blue); }
.fc-hint--none { color: var(--text-muted); }
.fc-error { color: var(--accent-red); font-size: 0.85rem; margin-bottom: var(--space-sm); }
.fc-step { border-top: 1px solid var(--border-color); padding-top: var(--space-sm); margin-top: var(--space-sm); display: flex; flex-direction: column; gap: var(--space-xs); }
.fc-step--disabled { opacity: 0.55; }
.fc-step-title { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.fc-btn { align-self: flex-start; }
.fc-spectrum { display: grid; grid-template-columns: repeat(18, 1fr); gap: 2px; height: 72px; align-items: end; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 3px; padding: 3px; }
.fc-bin { height: 100%; display: flex; align-items: flex-end; padding: 0; border: none; background: transparent; cursor: pointer; min-height: 44px; }
.fc-bin:hover .fc-bin-bar { background: var(--accent-blue); }
.fc-bin-bar { display: block; width: 100%; min-height: 2px; background: linear-gradient(0deg, var(--accent-green), var(--accent-yellow)); border-radius: 1px; }
.fc-spectrum-axis { display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--text-muted); font-family: var(--font-mono); }
.fc-dial { font-family: var(--font-mono); display: flex; align-items: baseline; gap: 6px; }
.fc-dial-value { font-size: 2rem; color: var(--accent-blue); letter-spacing: 0.05em; }
.fc-dial-unit { color: var(--text-muted); }
.fc-strength { height: 14px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 7px; overflow: hidden; }
.fc-strength-fill { height: 100%; background: linear-gradient(90deg, var(--accent-yellow), var(--accent-green)); transition: width 0.2s; }
.fc-strength-label { font-size: 0.85rem; }
.fc-lock { color: var(--accent-green); font-weight: bold; margin-left: 6px; }
.fc-nudge { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-xs); }
.fc-nudge .btn-freq { text-align: center; min-height: 44px; }
.fc-tune-form { display: flex; gap: var(--space-xs); }
.fc-tune-form input { flex: 1; min-width: 0; background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-primary); padding: var(--space-xs) var(--space-sm); border-radius: 3px; font-family: var(--font-mono); }
.fc-protocols { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-xs); }
.fc-protocol { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 44px; padding: var(--space-xs) var(--space-sm); border: 1px solid var(--border-color); border-radius: 3px; background: var(--bg-secondary); color: var(--text-primary); font-family: var(--font-mono); font-size: 0.8rem; text-align: left; cursor: pointer; }
.fc-protocol:hover:not(:disabled) { border-color: var(--accent-blue); color: var(--accent-blue); }
.fc-protocol small { color: var(--text-muted); font-size: 0.7rem; }
.fc-protocol--tried { opacity: 0.6; text-decoration: line-through; }
.fc-protocol:disabled { cursor: not-allowed; }
.fc-reply { margin-top: var(--space-sm); padding: var(--space-xs) var(--space-sm); border-left: 3px solid var(--border-color); background: var(--bg-secondary); }
.fc-reply--ok { border-left-color: var(--accent-green); }
.fc-reply--miss { border-left-color: var(--accent-red); }
.fc-protocol--recommended { border-color: var(--accent-green); }
.fc-recommended { font-size: 0.65rem; color: var(--accent-green); font-style: normal; }
.fc-bin--jammed .fc-bin-bar { background: linear-gradient(0deg, var(--accent-red), var(--accent-yellow)); }
.fc-bin--current { outline: 1px solid var(--accent-blue); }

/* ═══════════════════════════════════════════════════════════════
   Funkgerät (fragments/radio-*.html)
   ═══════════════════════════════════════════════════════════════ */
.comms-layout--radio { grid-template-columns: minmax(0, 1fr) 300px; }
@media (max-width: 1024px) { .comms-layout--radio { grid-template-columns: 1fr; } }
.radio-sound-toggle { display: flex; justify-content: flex-end; }
.radio-dial { font-family: var(--font-mono); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.radio-dial-value { font-size: 2.4rem; color: var(--accent-blue); letter-spacing: 0.05em; }
.radio-dial-unit { color: var(--text-muted); }
.radio-dial-preset { color: var(--accent-green); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; }
.radio-meters { display: flex; flex-direction: column; gap: 4px; margin: var(--space-sm) 0; }
.radio-meter { display: grid; grid-template-columns: 70px 1fr 48px; gap: var(--space-xs); align-items: center; font-size: 0.8rem; }
.radio-meter-label { color: var(--text-muted); font-family: var(--font-mono); text-transform: uppercase; font-size: 0.7rem; }
.radio-meter-value { text-align: right; font-family: var(--font-mono); }
.radio-jam-fill { height: 100%; background: linear-gradient(90deg, var(--accent-yellow), var(--accent-red)); }
.radio-warn { color: var(--accent-red); }
.radio-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: var(--space-xs); margin-bottom: var(--space-xs); }
.radio-preset { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-height: 44px; padding: var(--space-xs) var(--space-sm); border: 1px solid var(--border-color); border-radius: 3px; background: var(--bg-secondary); color: var(--text-primary); font-family: var(--font-mono); font-size: 0.8rem; cursor: pointer; text-align: left; }
.radio-preset small { color: var(--text-muted); font-size: 0.7rem; }
.radio-preset:hover { border-color: var(--accent-blue); }
.radio-preset--active { border-color: var(--accent-blue); background: rgba(59,130,246,0.12); }
.radio-note { margin-top: var(--space-sm); padding: var(--space-xs) var(--space-sm); border-left: 3px solid var(--accent-yellow); background: var(--bg-secondary); font-size: 0.85rem; }
.radio-note--ok { border-left-color: var(--accent-green); }
.radio-hop { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); margin-top: var(--space-sm); }
.radio-hop .btn-freq { width: auto; min-height: 44px; }
.radio-hail { border-left: 3px solid var(--border-color); padding: var(--space-xs) var(--space-sm); margin-bottom: var(--space-sm); background: var(--bg-secondary); display: flex; flex-direction: column; gap: 4px; }
.radio-hail--tuned { border-left-color: var(--accent-blue); }
.radio-hail--readable { border-left-color: var(--accent-green); }
.radio-hail-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.radio-hail-freq { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-family: var(--font-mono); font-size: 0.85rem; }
.radio-hail-actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.radio-inline-btn { width: auto; min-height: 36px; }
.radio-key-form { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.radio-key-form select, .radio-upload-form input, .radio-beacon-form input { background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-primary); padding: var(--space-xs) var(--space-sm); border-radius: 3px; font-family: var(--font-mono); min-height: 40px; }
.radio-offer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-xs); padding: var(--space-xs) 0; border-bottom: 1px solid var(--border-color); }
.radio-transfer { display: flex; flex-direction: column; gap: 3px; margin-bottom: var(--space-xs); }
.radio-transfer-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 0.85rem; }
.radio-transfer--stalled .fc-strength-fill { background: var(--accent-yellow); }
.radio-transfer--aborted { opacity: 0.6; }
.radio-transfer--aborted .fc-strength-fill { background: var(--accent-red); }
.radio-upload-form { display: flex; flex-direction: column; gap: var(--space-xs); }
.radio-upload-kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-xs); }
.radio-upload-kinds .btn-freq { min-height: 44px; white-space: normal; }
.radio-status { display: flex; flex-direction: column; gap: var(--space-md); }
.radio-kv { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; }
.radio-kv > div { display: flex; justify-content: space-between; gap: var(--space-sm); }
.radio-kv > div span { color: var(--text-muted); }
.radio-beacon--on { border-color: var(--accent-red); box-shadow: 0 0 12px rgba(239,68,68,0.4); }
.radio-beacon-form { display: flex; flex-direction: column; gap: var(--space-xs); }
.radio-danger { border-color: var(--accent-red); color: var(--accent-red); }
.radio-key, .radio-matrix { display: flex; flex-direction: column; gap: 3px; padding: 4px 0; border-bottom: 1px solid var(--border-color); font-size: 0.85rem; }
.radio-encrypt { display: flex; align-items: center; gap: var(--space-xs); font-size: 0.8rem; color: var(--text-muted); }
.send-feedback { min-height: 1.2em; font-size: 0.85rem; }
.radio-sound-toggle .btn-freq { width: auto; min-height: 40px; }
.radio-key, .radio-matrix { align-items: flex-start; }
.radio-matrix .fc-strength { align-self: stretch; }