:root {
    --mud-typography-default-family: "Manrope", "Segoe UI", Arial, sans-serif;
    --mud-typography-h1-family: "Fraunces", Georgia, serif;
    --mud-typography-h2-family: "Fraunces", Georgia, serif;
    --mud-typography-h3-family: "Fraunces", Georgia, serif;
    --mud-typography-h4-family: "Fraunces", Georgia, serif;
    --mud-typography-h5-family: "Fraunces", Georgia, serif;
    --mud-typography-h6-family: "Fraunces", Georgia, serif;

    --app-color-navy-980: #040b17;
    --app-color-navy-950: var(--mud-palette-drawer-background, #050f1f);
    --app-color-navy-900: #0f1f37;
    --app-color-sky-700: var(--mud-palette-primary, #2165ff);
    --app-color-sky-600: color-mix(in srgb, var(--mud-palette-primary, #2165ff) 78%, #9ec0ff);
    --app-color-sky-500: #4fc2ff;
    --app-color-lime-500: var(--mud-palette-secondary, #c8f208);
    --app-color-lime-600: color-mix(in srgb, var(--mud-palette-secondary, #c8f208) 88%, #93bd00);
    --app-color-text-strong: var(--mud-palette-text-primary, #e5eef8);
    --app-color-text-muted: var(--mud-palette-text-secondary, #a0b4ca);
    --app-color-paper: color-mix(in srgb, var(--mud-palette-surface, #0a1626) 85%, #0f223d);
    --app-color-panel: #0b1728;
    --app-color-bg: var(--mud-palette-background, #040b17);
    --app-color-border: var(--mud-palette-lines-default, #1c324a);
    --app-color-focus: color-mix(in srgb, var(--mud-palette-primary, #2165ff) 45%, white);
    --app-space-1: 0.25rem;
    --app-space-2: 0.5rem;
    --app-space-3: 0.75rem;
    --app-space-4: 1rem;
    --app-space-5: 1.25rem;
    --app-space-6: 1.5rem;
    --app-space-8: 2rem;
    --app-space-10: 2.5rem;
    --app-radius-sm: 10px;
    --app-radius-md: 14px;
    --app-radius-lg: 22px;
    --app-elevation-1: 0 6px 14px rgba(15, 34, 48, 0.08);
    --app-elevation-2: 0 18px 40px rgba(15, 34, 48, 0.12);
}

html,
body {
    background:
        radial-gradient(130% 90% at 100% -10%, rgba(33, 101, 255, 0.3), transparent 55%),
        radial-gradient(120% 90% at -5% 100%, rgba(80, 194, 255, 0.22), transparent 58%),
        var(--app-color-bg);
    color: var(--app-color-text-strong);
}

body {
    font-family: var(--mud-typography-default-family, "Manrope", "Segoe UI", Arial, sans-serif);
}

.app-shell {
    min-height: 100vh;
}

.app-topbar {
    backdrop-filter: blur(7px);
    background: color-mix(in srgb, var(--app-color-navy-950) 86%, #0f1f37);
    border-bottom: 1px solid var(--app-color-border);
    color: var(--app-color-text-strong);
}

.app-topbar__title {
    color: var(--app-color-text-strong);
    font-family: var(--mud-typography-h6-family, "Fraunces", Georgia, serif);
    font-size: clamp(1.1rem, 0.9rem + 1vw, 1.45rem);
    letter-spacing: 0.01em;
}

.app-main {
    padding: calc(64px + var(--app-space-4)) var(--app-space-4) var(--app-space-6);
}

.app-content-shell {
    margin-inline: auto;
    max-width: 1120px;
    padding: 0;
}

.app-page {
    display: grid;
    gap: var(--app-space-5);
}

.app-surface {
    background: var(--app-color-paper);
    border: 1px solid var(--app-color-border);
    border-radius: var(--app-radius-md);
    box-shadow: var(--app-elevation-1);
    padding: var(--app-space-6);
}

.app-surface--hero {
    background:
        radial-gradient(140% 100% at 0% 0%, rgba(76, 140, 167, 0.24), transparent 58%),
        linear-gradient(160deg, #0d1c31, #091425);
    border-radius: var(--app-radius-lg);
    box-shadow: var(--app-elevation-2);
}

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

.mud-paper.app-surface,
.mud-paper.app-surface--hero {
    color: var(--app-color-text-strong);
}

.mud-paper {
    border-radius: var(--app-radius-sm);
}

.mud-button-root {
    border-radius: 11px;
    min-height: 2.5rem;
}

.mud-button-filled.mud-button-filled-primary {
    background: linear-gradient(165deg, var(--app-color-sky-600), var(--app-color-sky-700));
    color: #ffffff;
}

.mud-button-filled.mud-button-filled-secondary {
    background: linear-gradient(165deg, var(--app-color-lime-500), var(--app-color-lime-600));
    color: #08101d;
}

.mud-button-filled.mud-button-filled-primary:hover {
    filter: brightness(0.95);
}

.mud-table {
    background-color: transparent;
}

.mud-table-head .mud-table-cell {
    color: var(--app-color-text-strong);
    font-weight: 700;
}

.mud-alert {
    border-radius: var(--app-radius-sm);
}

a,
.mud-link {
    color: var(--app-color-sky-500);
}

:where(button, a, .mud-button-root, .mud-nav-link, .mud-input-control):focus-visible {
    outline: 2px solid var(--app-color-focus);
    outline-offset: 2px;
}

@media (max-width: 960px) {
    .app-main {
        padding: calc(64px + var(--app-space-3)) var(--app-space-3) var(--app-space-4);
    }

    .app-surface,
    .app-surface--hero {
        padding: var(--app-space-5);
    }
}