:root {
    color-scheme: dark;
    --frog-blue: #00426f;
    --frog-green: #349f34;
    --frog-orange: #db5800;
    --frog-cream: #fef9f0;
    --frog-nvg: #1a1a1a;
    --stats-bg: var(--frog-nvg);
    --stats-bg-deep: #111413;
    --stats-surface: #202422;
    --stats-surface-raised: #262b28;
    --stats-surface-solid: #17201d;
    --stats-appbar-color: #0d3342;
    --stats-appbar: linear-gradient(105deg, var(--frog-blue) 0%, #0d3342 22%, #12221f 72%, #151d1b 100%);
    --stats-text: var(--frog-cream);
    --stats-muted: #abb3af;
    --stats-subtle: #7c8781;
    --stats-disabled: #656d69;
    --stats-accent: var(--frog-green);
    --stats-accent-bright: #72c972;
    --stats-accent-strong: #287f2a;
    --stats-accent-soft: rgba(52, 159, 52, 0.14);
    --stats-accent-contrast: var(--frog-cream);
    --stats-action: #2f8d38;
    --stats-info: #62a4c9;
    --stats-warning: var(--frog-orange);
    --stats-error: #d46b62;
    --stats-success: var(--frog-green);
    --stats-border: rgba(254, 249, 240, 0.14);
    --stats-border-soft: rgba(254, 249, 240, 0.075);
    --stats-border-accent: rgba(52, 159, 52, 0.42);
    --stats-radius-xs: 0.2rem;
    --stats-radius-sm: 0.35rem;
    --stats-radius: 0.5rem;
    --stats-radius-lg: 0.65rem;
    --stats-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
    --stats-shadow-hover: 0 16px 38px rgba(0, 0, 0, 0.26);
    --stats-glow: none;
    --stats-blur: 10px;
    --stats-space-1: 0.25rem;
    --stats-space-2: 0.5rem;
    --stats-space-3: 0.75rem;
    --stats-space-4: 1rem;
    --stats-space-5: 1.5rem;
    --stats-space-6: 2rem;
    --stats-space-7: 3rem;
    --stats-appbar-height: 72px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    background: var(--stats-bg);
    color: var(--stats-text);
    font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
    margin: 0;
    min-width: 320px;
    min-height: 100%;
}

body { overflow-x: hidden; }

body::before {
    background-image:
        linear-gradient(var(--stats-border-soft) 1px, transparent 1px),
        linear-gradient(90deg, var(--stats-border-soft) 1px, transparent 1px);
    background-size: 72px 72px;
    content: "";
    inset: 0;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.42), transparent 65%);
    opacity: 0.08;
    pointer-events: none;
    position: fixed;
    z-index: 0;
}

a, .btn-link { color: inherit; }

.stats-shell {
    background:
        radial-gradient(circle at 8% -12%, rgba(52, 159, 52, 0.12), transparent 38rem),
        radial-gradient(circle at 94% 5%, rgba(0, 66, 111, 0.14), transparent 32rem),
        linear-gradient(180deg, transparent, var(--stats-bg-deep));
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-top: var(--stats-appbar-height);
    position: relative;
    z-index: 1;
}

.stats-page {
    color: var(--stats-text);
    flex: 1;
    width: 100%;
}

.stats-page > .mud-stack:first-child,
.stats-page > h1:first-child {
    position: relative;
}

.stats-page h1 {
    font-size: clamp(1.65rem, 3.5vw, 2.15rem);
    line-height: 1.18;
    overflow-wrap: anywhere;
}

.stats-page h1:focus { outline: none; }

.stats-page h1::after {
    background: var(--stats-accent);
    content: "";
    display: block;
    height: 1px;
    margin-top: 0.7rem;
    opacity: 0.75;
    width: 1.65rem;
}

.stats-card, .stats-panel {
    background: linear-gradient(155deg, var(--stats-surface-raised), var(--stats-surface));
    border: 1px solid var(--stats-border);
    border-radius: var(--stats-radius);
    box-shadow: var(--stats-shadow);
    min-width: 0;
    overflow: hidden;
    position: relative;
}

.stats-card::before, .stats-panel::before {
    background: var(--stats-accent);
    content: "";
    height: 1px;
    left: 0;
    opacity: 0.35;
    position: absolute;
    top: 0;
    width: 2rem;
}

.stats-card {
    min-height: 7.5rem;
    padding: 1.15rem;
    transition: border-color 140ms ease, background-color 140ms ease;
}

.stats-card:hover {
    border-color: var(--stats-border-accent);
    background: var(--stats-surface-raised);
}

.stats-card .mud-typography-caption,
.stats-panel .mud-typography-caption {
    color: var(--stats-muted);
    font-size: 0.7rem;
    font-weight: 650;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.stats-card .mud-typography-h4,
.stats-panel .mud-typography-h4 {
    font-variant-numeric: tabular-nums;
    margin-top: 0.5rem;
    font-size: 2rem;
}

.stats-panel { padding: 1.25rem; }

.stats-list-row {
    align-items: center;
    border-top: 1px solid var(--stats-border-soft);
    gap: var(--stats-space-3);
    min-width: 0;
    padding: 0.85rem 0;
}

.stats-list-row:first-of-type { border-top: 0; }
.stats-list-row > * { min-width: 0; overflow-wrap: anywhere; }

.stats-filter-actions {
    align-items: center;
    display: flex;
    gap: var(--stats-space-3);
}

.stats-appbar { height: var(--stats-appbar-height); }

.stats-appbar__inner {
    align-items: center;
    display: flex;
    height: 100%;
    padding-inline: 1.5rem !important;
}

.stats-brand {
    align-items: center;
    color: var(--stats-text) !important;
    display: inline-flex;
    gap: 0.7rem;
    flex-shrink: 0;
}

.stats-brand__mark {
    align-items: center;
    background: linear-gradient(145deg, var(--stats-accent), var(--stats-accent-strong));
    border: 0;
    border-radius: 0.48rem 0.48rem 0.48rem 0.14rem;
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.22);
    color: var(--stats-accent-contrast);
    display: inline-flex;
    font-size: 1rem;
    font-weight: 900;
    height: 2rem;
    justify-content: center;
    letter-spacing: -0.06em;
    transform: skew(-4deg);
    width: 2rem;
}

.stats-brand__copy { display: flex; flex-direction: column; }
.stats-brand__name { font-family: "Space Grotesk", "IBM Plex Sans", sans-serif; font-size: 0.96rem; font-weight: 700; letter-spacing: 0.09em; line-height: 1; }
.stats-brand__name span { color: var(--stats-accent-bright); }
.stats-brand__tagline { color: rgba(254, 249, 240, 0.62); font-family: "IBM Plex Sans", "Segoe UI", sans-serif; font-size: 0.5rem; font-weight: 600; letter-spacing: 0.15em; margin-top: 0.3rem; }

.stats-desktop-nav { display: flex; gap: 0.1rem; margin-right: 1.5rem; }
.stats-desktop-nav .mud-nav-link { border-radius: var(--stats-radius-xs); color: rgba(254, 249, 240, 0.76); min-height: 2.5rem; padding: 0.5rem 0.75rem; }
.stats-desktop-nav .mud-nav-link:hover { background: rgba(254, 249, 240, 0.08); color: var(--stats-text); }
.stats-desktop-nav .mud-nav-link.active { background: rgba(0, 0, 0, 0.16); color: var(--frog-cream); }
.stats-desktop-nav .mud-nav-link.active::after { background: var(--stats-accent-bright); bottom: -0.96rem; content: ""; height: 2px; left: 0.75rem; position: absolute; right: 0.75rem; }
.stats-desktop-nav .mud-nav-link-icon { color: currentColor; margin-inline-end: 0.4rem; opacity: 0.72; }

.stats-system-status {
    align-items: center;
    background: rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(254, 249, 240, 0.16);
    border-radius: var(--stats-radius-xs);
    color: rgba(254, 249, 240, 0.68);
    display: flex;
    font-size: 0.61rem;
    font-weight: 650;
    gap: 0.5rem;
    letter-spacing: 0.1em;
    padding: 0.45rem 0.65rem;
}

.stats-system-status__pulse {
    background: var(--stats-accent);
    border-radius: 50%;
    box-shadow: 0 0 0 3px var(--stats-accent-soft);
    display: inline-block;
    height: 0.35rem;
    width: 0.35rem;
}

.stats-mobile-only { display: none !important; }
.stats-mobile-drawer { background: var(--stats-surface-solid) !important; }
.stats-drawer-header { align-items: center; border-bottom: 1px solid var(--stats-border-soft); display: flex; gap: 0.7rem; min-height: var(--stats-appbar-height); padding: 0.8rem 1rem; }
.stats-drawer-nav { padding: 1rem 0.65rem; }
.stats-drawer-nav .mud-nav-link { border-radius: var(--stats-radius-xs); margin-bottom: 0.2rem; }
.stats-drawer-nav .mud-nav-link.active { background: var(--stats-accent-soft); color: var(--stats-accent); }
.stats-drawer-footer { align-items: center; bottom: 1.5rem; color: var(--stats-subtle); display: flex; font-size: 0.65rem; font-weight: 800; gap: 0.6rem; left: 1.5rem; letter-spacing: 0.1em; position: absolute; }

.stats-footer { color: var(--stats-subtle); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; margin-top: auto; padding: 3rem 0 1.5rem; }
.stats-footer .mud-container { border-top: 1px solid var(--stats-border-soft); display: flex; justify-content: space-between; padding-top: 1.25rem; }

.stats-chart { min-height: 300px; width: 100%; }
.stats-chart-state { align-items: center; color: var(--stats-muted); display: flex; flex-direction: column; gap: 0.9rem; justify-content: center; min-height: 300px; text-align: center; }
.stats-chart-state .mud-icon-root { color: var(--stats-subtle); font-size: 2.6rem; }
.stats-chart-state--error .mud-icon-root { color: var(--stats-error); }

.mud-table { background: transparent !important; }
.mud-table-head .mud-table-cell { color: var(--stats-subtle); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; white-space: nowrap; }
.mud-table-body .mud-table-row { transition: background 120ms ease; }
.mud-table-body .mud-table-row:hover { background: var(--stats-accent-soft) !important; }
.mud-table-cell { border-color: var(--stats-border-soft) !important; overflow-wrap: anywhere; }
.mud-link { font-weight: 600; text-underline-offset: 0.2em; }
.mud-link:hover { color: var(--stats-accent) !important; }
.mud-input-control { min-width: 0; }
.mud-input-outlined-border { border-color: var(--stats-border) !important; }
.mud-button-root { border-radius: var(--stats-radius-sm); box-shadow: none !important; }
.mud-button-filled-primary { border: 1px solid var(--stats-border-accent); }
.mud-button-filled-primary:hover { filter: brightness(1.06); }
.mud-button-outlined { border-color: var(--stats-border) !important; }
.mud-alert { background: var(--stats-surface) !important; border-color: var(--stats-border) !important; border-radius: var(--stats-radius); }
.mud-progress-linear { border-radius: 999px; overflow: hidden; }

.loading-progress { display: block; height: 8rem; margin: 20vh auto 1rem; position: relative; width: 8rem; }
.loading-progress circle { fill: none; stroke: var(--stats-border); stroke-width: 0.35rem; transform: rotate(-90deg); transform-origin: 50% 50%; }
.loading-progress circle:last-child { stroke: var(--stats-accent); stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%; transition: stroke-dasharray 0.05s ease-in-out; }
.loading-progress-text { color: var(--stats-muted); font-size: 0.72rem; font-weight: 700; inset-inline-start: calc(50% - 1.5rem); letter-spacing: 0.08em; position: absolute; text-align: center; }
.loading-progress-text::after { content: var(--blazor-load-percentage-text, "LOADING"); }

#blazor-error-ui { background: var(--stats-error); bottom: 0; box-shadow: var(--stats-shadow); color: var(--stats-bg-deep); display: none; font-weight: 600; left: 0; padding: 0.75rem 1.25rem; position: fixed; width: 100%; z-index: 1000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

@media (max-width: 959.98px) {
    :root { --stats-appbar-height: 64px; }
    .stats-desktop-only, .stats-desktop-nav { display: none !important; }
    .stats-mobile-only { display: inline-flex !important; }
    .stats-menu-button { margin-left: -0.65rem; margin-right: 0.35rem; }
    .stats-appbar__inner { padding-inline: 1rem !important; }
    .stats-page { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
    .stats-panel { padding: 1rem; }
}

@media (max-width: 599.98px) {
    .stats-brand__tagline { display: none; }
    .stats-brand__copy { justify-content: center; }
    .stats-brand__mark { height: 1.9rem; width: 1.9rem; }
    .stats-page > .mud-stack.mud-stack-row:first-child { align-items: flex-start !important; flex-wrap: wrap !important; gap: 0.8rem; }
    .stats-page > .mud-stack.mud-stack-row:first-child > div { min-width: 0; width: 100%; }
    .stats-card { min-height: 7rem; padding: 1rem; }
    .stats-card .mud-typography-h4, .stats-panel .mud-typography-h4 { font-size: clamp(1.4rem, 8vw, 2rem); }
    .stats-filter-actions { flex-wrap: wrap; }
    .stats-filter-actions .mud-button-root { flex: 1; }
    .mud-table-root { overflow-x: auto; }
    .mud-table-cell { max-width: 15rem; }
    .mud-table-pagination-toolbar, .stats-panel > .mud-stack.mud-stack-row:last-child { align-items: flex-start !important; flex-wrap: wrap !important; gap: 0.8rem; }
    .stats-footer .mud-container { align-items: flex-start; flex-direction: column; gap: 0.45rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}