:root {
    --cyan: #22d3ee;
    --cyan-glow: rgba(34, 211, 238, 0.35);
    --amber: #fbbf24;
    --panel: #0c0e14;
}
body {
    font-family: "JetBrains Mono", ui-monospace, monospace;
}
.cockpit-bg {
    background-color: #000;
    background-image:
        linear-gradient(180deg, rgba(5, 8, 12, 0.92) 0%, rgba(0, 0, 0, 0.97) 45%, #000 100%),
        url("../assets/cockpit-ref.png");
    background-size: cover;
    background-position: center top;
    background-attachment: fixed;
}
.panel-border {
    border: 1px solid rgba(34, 211, 238, 0.35);
    box-shadow: 0 0 24px rgba(34, 211, 238, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.panel-angled {
    clip-path: polygon(0 10px, 10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px));
}
.text-glow-cyan {
    text-shadow: 0 0 24px var(--cyan-glow), 0 0 8px rgba(34, 211, 238, 0.4);
}
.scrollbar-thin::-webkit-scrollbar { width: 6px; }
.scrollbar-thin::-webkit-scrollbar-track { background: #0a0a0f; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: rgba(34, 211, 238, 0.35); border-radius: 3px; }
@keyframes pulse-soft {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.65; }
}
.pulse-soft { animation: pulse-soft 2.5s ease-in-out infinite; }
.grid-bg {
    background-image:
        linear-gradient(rgba(34, 211, 238, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(34, 211, 238, 0.06) 1px, transparent 1px);
    background-size: 24px 24px;
}
.stat-link {
    display: block;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.stat-link:hover {
    border-color: rgba(34, 211, 238, 0.55);
    box-shadow: 0 0 20px rgba(34, 211, 238, 0.12);
    background-color: rgba(34, 211, 238, 0.06);
}
.stat-link:focus-visible {
    outline: 2px solid rgba(34, 211, 238, 0.6);
    outline-offset: 2px;
}
.moonbase-graphic-ph {
    width: 3.5rem;
    height: 3.5rem;
    flex-shrink: 0;
    border: 1px dashed rgba(34, 211, 238, 0.45);
    background: rgba(0, 0, 0, 0.45);
    box-shadow: inset 0 0 12px rgba(34, 211, 238, 0.06);
}
@media (min-width: 640px) {
    .moonbase-graphic-ph { width: 4rem; height: 4rem; }
}
.logo-ph {
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    border: 1px dashed rgba(34, 211, 238, 0.35);
    background: rgba(0, 0, 0, 0.4);
    font-size: 8px;
    color: rgba(34, 211, 238, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}