:root {
    --canvas-dark: #05070A;
    --surface-1: #0A0F14;
    --surface-2: #0E1620;
    --cyan-primary: #00E6FF;
    --cyan-deep: #00B7C8;
    --text-strong: #E6F6FF;
    --text-normal: #C7D7E0;
}

/* Body */
body {
    background: var(--canvas-dark);
    color: var(--text-normal);
    font-family: Inter, system-ui, sans-serif;
}

/* Glass card */
.hud-card {
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(95,247,255,0.35);
    border-radius: 12px;
    padding: 16px;
    backdrop-filter: blur(10px) saturate(180%);
}

/* Hairline */
.hairline {
    height: 1px;
    background: rgba(95,247,255,0.12);
}

/* Primary-ish button */
.hud-btn-primary {
    border: 1px solid var(--cyan-primary);
    background: var(--surface-2);
    color: var(--text-strong);
    border-radius: 10px;
}

    .hud-btn-primary:hover {
        box-shadow: 0 0 24px rgba(0,230,255,0.16);
    }

/* Focus visible */
:focus-visible {
    outline: 2px solid var(--cyan-primary);
    outline-offset: 2px;
}

/* Clickable rows — MudTable zeigt sonst keinen Pointer trotz OnRowClick. */
.retrofit-row-clickable {
    cursor: pointer;
}

/* ---------- Mobile polish ------------------------------------------------- */

/* Seite-Padding: auf dem Phone brauchen wir jeden Pixel, deshalb weniger horizontal.
   Desktop bleibt bei 24px, Phone bekommt 12px. */
.retrofit-main-content {
    padding-left: 24px;
    padding-right: 24px;
}

/* Logo im AppBar: desktop 180px, phone 130px — frisst sonst den halben AppBar. */
.retrofit-logo img {
    width: 180px;
    height: auto;
}

@media (max-width: 599.95px) {
    .retrofit-main-content {
        padding-left: 12px;
        padding-right: 12px;
    }

    .retrofit-logo img {
        width: 130px;
    }

    /* Orbitron-Headlines sind auf dem Phone zu laut. Um ~15 % zurückschrauben, damit
       die Hero-Überschriften nicht das halbe Viewport fressen. */
    .mud-typography-h3 {
        font-size: 1.1rem !important;
    }

    .mud-typography-h5 {
        font-size: 0.85rem !important;
    }
}