@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;800&family=Source+Serif+4:opsz,wght@8..60,400;500;600&display=swap');

:root {
    color-scheme: dark;
    --ui-background: #02040b;
    --ui-surface: rgba(5, 9, 20, 0.86);
    --ui-text: #edf2ff;
    --ui-muted: rgba(237, 242, 255, 0.72);
    --ui-accent: #9db2ff;
}

html,
body {
    min-height: 100%;
    margin: 0;
    background:
        radial-gradient(circle at top, rgba(79, 120, 255, 0.18), transparent 28rem),
        linear-gradient(180deg, #060a16, #02040b 45%, #010205);
    color: var(--ui-text);
    font-family: 'Source Serif 4', Georgia, serif;
}

body {
    min-height: 100vh;
}

h1,
h2,
h3,
button,
select,
input {
    font-family: 'Orbitron', 'Segoe UI', sans-serif;
}

a {
    color: var(--ui-accent);
}

button,
input,
select,
textarea {
    box-sizing: border-box;
}

button {
    border: 0;
}

main {
    padding: 0;
}

#blazor-error-ui {
    display: none;
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(255, 208, 115, 0.35);
    border-radius: 0.75rem;
    background: rgba(39, 24, 3, 0.96);
    color: #fff2cf;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.45rem;
}

@media (min-width: 900px) {
    body::before {
        content: "";
        position: fixed;
        inset: 2rem;
        border-radius: 2.5rem;
        border: 1px solid rgba(157, 178, 255, 0.06);
        background:
            radial-gradient(circle at 20% 20%, rgba(157, 178, 255, 0.07), transparent 24rem),
            radial-gradient(circle at 80% 15%, rgba(92, 122, 255, 0.06), transparent 20rem);
        pointer-events: none;
        z-index: -1;
    }
}