:root {
    --bg-dark: #0b0f19;
    --bg-surface: rgba(18, 25, 38, 0.7);
    --bg-surface-solid: #121926;
    --accent-primary: #00f2fe;
    --accent-secondary: #4facfe;
    --text-primary: #f8f9fa;
    --text-secondary: #adb5bd;
    --border-subtle: rgba(255, 255, 255, 0.1);
    --glow-primary: 0 0 15px rgba(0, 242, 254, 0.4);
    --glow-danger: 0 0 15px rgba(220, 53, 69, 0.4);
    --glow-success: 0 0 15px rgba(25, 135, 84, 0.4);
}

/* Fonts already on the machine, in preference order. Nothing is fetched from the internet:
   the previous Roboto stylesheet came from Google, which made rendering the administration
   interface both a third-party request and a dependency on outbound access. */
:root {
    --vault-font: 'Segoe UI Variable Text', 'Segoe UI', Inter, system-ui, -apple-system,
        'Helvetica Neue', Arial, sans-serif;

    /* MudBlazor reads these for its own typography. */
    --mud-typography-default-family: var(--vault-font);
    --mud-typography-body1-family: var(--vault-font);
    --mud-typography-body2-family: var(--vault-font);
    --mud-typography-button-family: var(--vault-font);
    --mud-typography-caption-family: var(--vault-font);
    --mud-typography-h1-family: var(--vault-font);
    --mud-typography-h2-family: var(--vault-font);
    --mud-typography-h3-family: var(--vault-font);
    --mud-typography-h4-family: var(--vault-font);
    --mud-typography-h5-family: var(--vault-font);
    --mud-typography-h6-family: var(--vault-font);
    --mud-typography-subtitle1-family: var(--vault-font);
    --mud-typography-subtitle2-family: var(--vault-font);
}

body {
    background-color: var(--bg-dark);
    color: var(--text-primary);
    font-family: var(--vault-font);
    min-height: 100vh;
    background-image:
        radial-gradient(circle at 15% 50%, rgba(0, 242, 254, 0.05), transparent 25%),
        radial-gradient(circle at 85% 30%, rgba(79, 172, 254, 0.05), transparent 25%);
}

/* ---------------------------------------------------------------------------
   Application shell

   Three rules with one shape: the header never moves, the main region is the
   only thing that scrolls, and nothing passes underneath the header.

   The last of those is the reason for the margin below. MudBlazor pads the top
   of the main content by seven eighths of the app bar's height, from inside the
   scroll box -- so as the page scrolls, content rises into that padding and
   shows through the translucent bar. Starting the box below the bar instead of
   padding down from behind it means the bar has nothing behind it to reveal.

   This assumes the app bar is fixed, which is both MudBlazor's default and
   stated explicitly in MainLayout.
   --------------------------------------------------------------------------- */

html,
body {
    height: 100%;
}

body {
    /* Without this the document scrolls as well as the main region, and the two
       scrollbars disagree about where you are. */
    overflow: hidden;
}

.mud-layout {
    height: 100dvh;
    overflow: hidden;
}

.mud-main-content {
    padding-top: 0;
    margin-top: var(--mud-appbar-height, 64px);
    height: calc(100dvh - var(--mud-appbar-height, 64px));
    overflow: auto;
    /* Reaching the end of this region should not start scrolling anything behind it. */
    overscroll-behavior: contain;
}

/* The one scrollbar in the application, so it may as well belong to it. */
.mud-main-content::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.mud-main-content::-webkit-scrollbar-track {
    background: transparent;
}

.mud-main-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.14);
    border: 2px solid transparent;
    border-radius: 6px;
    background-clip: content-box;
}

.mud-main-content::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 242, 254, 0.35);
    background-clip: content-box;
}

.mud-main-content {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    letter-spacing: -0.02em;
}

h1:focus {
    outline: none;
}

.glass-appbar {
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    /* The dividing line is drawn inside the bar rather than added to it. As a real
       border it made the bar 65px tall while the main content below was positioned
       against the 64px --mud-appbar-height, so the last pixel of the bar sat over
       the first pixel of the content. */
    box-shadow: inset 0 -1px 0 var(--border-subtle) !important;
}

/* Neon Panel for API Keys (keeping this as it's a specific visual effect) */
.neon-panel {
    background: rgba(0, 242, 254, 0.05);
    border: 1px solid var(--accent-primary);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: inset 0 0 20px rgba(0, 242, 254, 0.05), var(--glow-primary);
}

.neon-panel pre {
    color: var(--accent-primary);
    font-family: 'Courier New', Courier, monospace;
    font-weight: 700;
    margin: 0;
}