html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: #2d2418;
    border-top: 1px solid #f0a020;
    color: #f0d9b5;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui a {
        color: #4fc3f7;
    }

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

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

/* Boot/loading splash shown before Blazor starts: dark background with the circuit
   texture, a glowing gradient spinner, and a percentage readout. */
#app {
    min-height: 100vh;
    background-color: #000000;
    background-image: url('/img/circuit-bg.svg?v=wide-1');
    background-size: 1320px 825px;
    background-position: center;
}

.loading-shell {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
}

.loading-progress {
    position: relative;
    display: block;
    width: 7rem;
    height: 7rem;
    animation: loading-spin 0.9s linear infinite;
    filter: drop-shadow(0 0 10px rgba(79,195,247,0.55)) drop-shadow(0 0 22px rgba(52,255,176,0.30));
}

    .loading-progress circle {
        fill: none;
        stroke-width: 0.5rem;
        stroke-linecap: round;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:first-child {
            stroke: rgba(255,255,255,0.08);
        }

        .loading-progress circle:last-child {
            stroke: url(#load-grad);
            stroke-dasharray: 200% 500%;
            stroke-dashoffset: 60%;
        }

@keyframes loading-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.loading-progress-text {
    position: relative;
    text-align: center;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #cfe9f7;
    text-shadow: 0 0 10px rgba(79,195,247,0.45);
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

/* Covers the app shell while auth state resolves or a sign-in redirect is in flight, so the
   app bar / nav never flash before the auth handoff. */
.auth-splash {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #000000;
    background-image: url('/img/circuit-bg.svg?v=wide-1');
    background-size: 1320px 825px;
    background-position: center;
}

.auth-route .auth-splash {
    left: 0;
    right: 0;
    width: 100vw;
    min-height: 100vh;
}

.auth-splash-shell {
    padding: 2rem;
    min-width: min(34rem, calc(100vw - 2rem));
}

.auth-splash-title {
    min-height: 1.25rem;
}

.auth-splash-detail {
    max-width: 30rem;
    margin-top: 1rem;
    color: var(--mud-palette-text-secondary);
    text-align: center;
}

code {
    color: #c02d76;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ===========================================================================
   App-wide ambient texture + translucent "glass" panels.
   The circuit texture sits fixed behind the content area; it only reads through
   the page gutters and the translucent panels, so it stays subtle by design.
   =========================================================================== */

/* Inverted circuit "veil": a semi-transparent black sheet with the traces cut
   out as transparent holes, sitting IN FRONT of the wandering orbs. The orbs are
   dimmed by the veil everywhere except along the traces, where they shine through
   at full strength — so the traces light up in an orb's colour as it passes under.
   Two dials: the veil's fill-opacity (in circuit-veil.svg) and the orb opacity. */
.app-fx::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image: url('/img/circuit-veil.svg?v=big-1');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    opacity: 1;
}

/* Five colour blobs that wander the screen, positioned each frame by JS
   (wwwroot/js/ambient.js). They sit BEHIND the veil on a black base, so they read
   as a glow seeping up through the board. CSS supplies static fallback positions
   for before JS starts and when reduced-motion is requested. */
.app-fx::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-color: #000000;
    background-image:
        radial-gradient(circle at center, rgba(52,255,176,calc(0.46 * var(--o0, 0.6))) 0, rgba(52,255,176,calc(0.184 * var(--o0, 0.6))) 10%, rgba(0,0,0,0) 24%),
        radial-gradient(circle at center, rgba(79,195,247,calc(0.46 * var(--o1, 0.6))) 0, rgba(79,195,247,calc(0.184 * var(--o1, 0.6))) 10%, rgba(0,0,0,0) 24%),
        radial-gradient(circle at center, rgba(192,132,252,calc(0.46 * var(--o2, 0.6))) 0, rgba(192,132,252,calc(0.184 * var(--o2, 0.6))) 10%, rgba(0,0,0,0) 24%),
        radial-gradient(circle at center, rgba(255,138,101,calc(0.46 * var(--o3, 0.6))) 0, rgba(255,138,101,calc(0.184 * var(--o3, 0.6))) 10%, rgba(0,0,0,0) 24%),
        radial-gradient(circle at center, rgba(255,82,182,calc(0.46 * var(--o4, 0.6))) 0, rgba(255,82,182,calc(0.184 * var(--o4, 0.6))) 10%, rgba(0,0,0,0) 24%);
    background-position:
        var(--p0, 16% 20%),
        var(--p1, 76% 30%),
        var(--p2, 44% 74%),
        var(--p3, 84% 76%),
        var(--p4, 9% 66%);
    background-repeat: no-repeat;
    background-size:
        var(--s0, 190%) var(--s0, 190%),
        var(--s1, 190%) var(--s1, 190%),
        var(--s2, 190%) var(--s2, 190%),
        var(--s3, 190%) var(--s3, 190%),
        var(--s4, 190%) var(--s4, 190%);
}

/* Page content rides above the texture. */
.app-fx > * {
    position: relative;
    z-index: 2;
}

.app-fx > .auth-splash,
.auth-splash {
    position: fixed;
    inset: 0;
    z-index: 2000;
    width: 100vw;
    min-height: 100vh;
}

/* Coloured LED junction nodes, revealed only where an orb is behind them. The
   node colours are fixed (circuit-nodes.svg); the orb gradients are used purely
   as an alpha MASK (positioned by the same per-frame --pN/--sN vars), so an orb
   decides WHETHER a node shows, never its hue. Sits just above the veil. */
.app-fx > .fx-nodes {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image: url('/img/circuit-nodes.svg?v=big-1');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    -webkit-mask-image:
        radial-gradient(circle at center, #000 0%, #000 3%, rgba(0,0,0,0) 11%),
        radial-gradient(circle at center, #000 0%, #000 3%, rgba(0,0,0,0) 11%),
        radial-gradient(circle at center, #000 0%, #000 3%, rgba(0,0,0,0) 11%),
        radial-gradient(circle at center, #000 0%, #000 3%, rgba(0,0,0,0) 11%),
        radial-gradient(circle at center, #000 0%, #000 3%, rgba(0,0,0,0) 11%);
    mask-image:
        radial-gradient(circle at center, #000 0%, #000 3%, rgba(0,0,0,0) 11%),
        radial-gradient(circle at center, #000 0%, #000 3%, rgba(0,0,0,0) 11%),
        radial-gradient(circle at center, #000 0%, #000 3%, rgba(0,0,0,0) 11%),
        radial-gradient(circle at center, #000 0%, #000 3%, rgba(0,0,0,0) 11%),
        radial-gradient(circle at center, #000 0%, #000 3%, rgba(0,0,0,0) 11%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position:
        var(--p0, 16% 20%), var(--p1, 76% 30%), var(--p2, 44% 74%), var(--p3, 84% 76%), var(--p4, 9% 66%);
    mask-position:
        var(--p0, 16% 20%), var(--p1, 76% 30%), var(--p2, 44% 74%), var(--p3, 84% 76%), var(--p4, 9% 66%);
    -webkit-mask-size:
        var(--s0, 190%) var(--s0, 190%), var(--s1, 190%) var(--s1, 190%), var(--s2, 190%) var(--s2, 190%),
        var(--s3, 190%) var(--s3, 190%), var(--s4, 190%) var(--s4, 190%);
    mask-size:
        var(--s0, 190%) var(--s0, 190%), var(--s1, 190%) var(--s1, 190%), var(--s2, 190%) var(--s2, 190%),
        var(--s3, 190%) var(--s3, 190%), var(--s4, 190%) var(--s4, 190%);
}

.build-info-overlay {
    position: fixed;
    top: 5.25rem;
    right: 1.25rem;
    opacity: 0.5;
    pointer-events: none;
    z-index: 10;
}

.brand-title-pop {
    display: inline-block;
    color: transparent;
    background: linear-gradient(90deg, #4FC3F7 0%, #4FC3F7 30%, #34ffb0 50%, #4FC3F7 70%, #4FC3F7 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: 0 1px 0 rgba(255,255,255,0.12), 0 2px 4px rgba(0,0,0,0.6);
    animation: brand-title-shift 14s linear infinite;
    will-change: background-position;
}

@keyframes brand-title-shift {
    from { background-position: 0% 50%; }
    to { background-position: 200% 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .brand-title-pop { animation: none; }
}

.mud-typography-h6.brand-title-pop {
    font-size: 25px;
    font-weight: 800;
    line-height: 1.1;
}

/* Page titles: no glow, just a subtle raised/embossed effect on the dark bg. */
.app-fx .mud-typography-h4 {
    text-shadow: 0 1px 0 rgba(255,255,255,0.10), 0 2px 3px rgba(0,0,0,0.55);
}

/* FxPanel emits `fx-panel fx-glass`: fx-panel is the semantic marker; fx-glass owns the visual treatment. */

/* ===========================================================================
   Left navigation drawer — glass treatment to match the panels.
   Translucent gradient surface, styled group headers, hover highlight, and an
   active item with a glowing left accent bar + gradient text/icon.
   =========================================================================== */
.mud-drawer {
    background: linear-gradient(180deg, rgba(22,25,31,0.92) 0%, rgba(13,15,19,0.94) 100%) !important;
    border-right: 1px solid rgba(79,195,247,0.10);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    overflow-x: hidden;
}

/* Drawer is a column: scrollable nav body + pinned footer. */
.mud-drawer .mud-drawer-content {
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

.drawer-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 12px;
}

/* Group headers (COST CONTROL, DATA TOOLS, …) read as quiet section labels,
   with a thin gradient divider beneath each. */
.mud-drawer .mud-nav-group .mud-nav-link.mud-nav-group-button {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    margin-top: 0.35rem;
    position: relative;
}

.mud-drawer .mud-nav-group .mud-nav-link.mud-nav-group-button::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 2px;
    height: 1px;
    background: linear-gradient(90deg, rgba(79,195,247,0.45) 0%, rgba(52,255,176,0.18) 55%, rgba(0,0,0,0) 100%);
}

/* All nav links: rounded, with room for the active accent bar. */
.mud-drawer .mud-nav-link {
    position: relative;
    border-radius: 8px;
    margin: 2px 8px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* Hover: subtle blue wash. */
.mud-drawer .mud-nav-link:hover {
    background: rgba(79,195,247,0.08);
}

/* Active item: gradient text + icon, faint gradient fill, glowing left accent. */
.mud-drawer .mud-nav-link.active {
    background: linear-gradient(90deg, rgba(79,195,247,0.16) 0%, rgba(52,255,176,0.06) 100%);
    color: #eaf6ff;
    font-weight: 600;
}

.mud-drawer .mud-nav-link.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, #4FC3F7 0%, #34ffb0 100%);
    box-shadow: 0 0 10px rgba(79,195,247,0.7);
}

.mud-drawer .mud-nav-link.active .mud-nav-link-icon {
    color: #4FC3F7;
    filter: drop-shadow(0 0 6px rgba(79,195,247,0.7));
}

/* Drawer footer: clickable Settings strip pinned to the bottom of the drawer. */
.drawer-footer {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid rgba(79,195,247,0.12);
    background: linear-gradient(90deg, rgba(79,195,247,0.06) 0%, rgba(52,255,176,0.03) 100%);
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease;
}

.drawer-footer:hover,
.drawer-footer:focus-visible {
    background: linear-gradient(90deg, rgba(79,195,247,0.14) 0%, rgba(52,255,176,0.07) 100%);
    outline: none;
}

.drawer-footer-mark {
    color: #4FC3F7;
    filter: drop-shadow(0 0 6px rgba(79,195,247,0.5));
}

.drawer-footer-name {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--mud-palette-text-secondary);
}

.drawer-footer:hover .drawer-footer-name {
    color: var(--mud-palette-text-primary);
}

.drawer-footer-chevron {
    color: #4FC3F7;
    opacity: 0.55;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.drawer-footer:hover .drawer-footer-chevron {
    opacity: 0.9;
    transform: translateX(2px);
}

.drawer-footer-build {
    font-size: 0.68rem;
    font-weight: 600;
    color: #4FC3F7;
    opacity: 0.85;
}

/* Settings sub-nav header strip (shown when the drawer is in Settings mode). */
.settings-nav-header {
    border-bottom: 1px solid rgba(79,195,247,0.12);
    letter-spacing: 0.08em;
}

/* ===========================================================================
   Seven-segment LCD numeric display (LcdNumber component).
   Every segment is drawn: unlit segments are a faint ghost so the 8 is always
   visible behind; lit segments are bright with an optional glow.
   =========================================================================== */
.lcd {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.08em;
    font-size: 2.4rem;
    line-height: 1;
    padding: 0.1em 0.18em;
    --lcd-front: #34ffb0;
    --lcd-ghost: color-mix(in srgb, var(--lcd-front) 20%, transparent);
}

/* Use on a wrapper when the digits should sit inline with other content. */
.lcd-inline {
    display: inline-flex;
}

.lcd.lcd-tiny {
    gap: 0.06em;
    font-size: 1rem;
    padding: 0.035em 0.08em;
}

.lcd.lcd-small,
.lcd.lcd-mini {
    gap: 0.06em;
    font-size: 1.25rem;
    padding: 0.04em 0.1em;
}

.lcd.lcd-medium {
    gap: 0.07em;
    font-size: 1.7rem;
    padding: 0.06em 0.13em;
}

.lcd.lcd-large {
    gap: 0.08em;
    font-size: 2.4rem;
    padding: 0.1em 0.18em;
}

.lcd .lcd-digit {
    width: 0.62em;
    height: 1.08em;
    display: block;
    flex: 0 0 auto;
    color: var(--lcd-front);
}

.lcd-separator {
    display: inline-block;
    flex: 0 0 auto;
    background: var(--lcd-front, #34ffb0);
    box-shadow: 0 0 2px color-mix(in srgb, var(--lcd-front, #34ffb0) 42%, transparent);
}

.lcd-symbol-glyph {
    display: block;
    flex: 0 0 auto;
    width: 0.52em;
    height: 1.08em;
    margin-right: 0.02em;
    overflow: visible;
}

.lcd-symbol-stroke {
    fill: none;
    stroke: var(--lcd-front, #34ffb0);
    stroke-linecap: square;
    stroke-linejoin: miter;
    stroke-width: 5;
}

.lcd-decimal {
    width: 0.16em;
    height: 0.16em;
    border-radius: 50%;
    align-self: flex-end;
    margin: 0 0.08em 0.18em;
}

.lcd-comma {
    width: 0.12em;
    height: 0.26em;
    border-radius: 999px;
    align-self: flex-end;
    margin: 0 0.08em 0.02em;
    transform: skew(-12deg);
}

/* Off segments = faint ghost (the 8 you always see behind). */
.lcd .lcd-digit .seg {
    fill: var(--lcd-ghost);
}

/* Lit segments on top. */
.lcd .lcd-digit .seg.on {
    fill: var(--lcd-front);
}

/* Soft bloom on the lit segments only. */
.lcd.lcd-glow .lcd-digit .seg.on {
    filter: drop-shadow(0 0 1px var(--lcd-front)) drop-shadow(0 0 6px color-mix(in srgb, var(--lcd-front) 42%, transparent));
}

.lcd.lcd-glow .lcd-separator {
    filter: drop-shadow(0 0 2px color-mix(in srgb, var(--lcd-front) 32%, transparent));
}

.lcd.lcd-glow .lcd-symbol-stroke {
    filter: drop-shadow(0 0 1px var(--lcd-front)) drop-shadow(0 0 5px color-mix(in srgb, var(--lcd-front) 40%, transparent));
}

/* Tables placed inside a glass panel should let the panel show through. */
.fx-panel .mud-table,
.fx-panel .mud-table-container,
.fx-panel .mud-table-root,
.fx-panel .fx-table {
    background: transparent;
}

/* ===========================================================================
   Segmented toggle groups (MudToggleGroup) — used for the Spend window/grain
   filters, TierPicker, the role dialog, etc. The MudBlazor default is cramped
   (tiny padding) with a hollow outlined selected state. Give the group a pill
   container with breathing room and a clearly filled selected segment. Applied
   app-wide (not scoped to .app-fx) so dialogs get it too.
   =========================================================================== */
.mud-toggle-group {
    display: inline-flex !important;
    width: max-content;
    border-radius: 20px !important;
    border: 1px solid rgba(0,0,0,0.6) !important;
    background: rgba(6,7,9,0.95);
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.8), 0 1px 0 rgba(255,255,255,0.06);
    padding: 4px !important;
    gap: 3px !important;
    overflow: hidden;
}

.mud-toggle-group .mud-toggle-item {
    margin: 0 !important;
    border: none !important;
    border-radius: 16px !important;
    min-width: 64px;
    height: 32px;
    padding: 0 16px !important;
    color: rgba(255,255,255,0.4) !important;
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: transparent !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.mud-toggle-group .mud-toggle-item:hover {
    background: rgba(255,255,255,0.06) !important;
    color: rgba(255,255,255,0.85) !important;
}

/* Selected segment: glowing game-style button */
.mud-toggle-group .mud-toggle-item.mud-toggle-item-selected {
    background: #4FC3F7 !important;
    color: #03141d !important;
    box-shadow: 0 0 12px rgba(79,195,247,0.4), inset 0 1px 1px rgba(255,255,255,0.5);
}

.mud-toggle-group .mud-toggle-item.mud-toggle-item-selected:hover {
    background: #60ccff !important;
    box-shadow: 0 0 16px rgba(79,195,247,0.6), inset 0 1px 1px rgba(255,255,255,0.6);
}

/* ===========================================================================
   Reusable glass-panel surface. Append `fx-glass` to any control (MudPaper,
   MudTabs, a plain div) to give it the same translucent gradient treatment as
   the page panels — works anywhere, independent of the .app-fx content wrapper.
   =========================================================================== */
.fx-glass {
    position: relative;
    background: linear-gradient(135deg, rgba(22,25,31,1) 0%, rgba(13,15,19,0.28) 100%) !important;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border: 1px solid rgba(79,195,247,0.32);
    border-radius: 0 !important;
    box-shadow: 0 0 8px rgba(0,0,0,0.42), 0 0 7px rgba(79,195,247,0.42), 0 0 13px rgba(79,195,247,0.26);
}

.fx-glass::before {
    display: none;
}

.fx-glass > * {
    position: relative;
    z-index: 2;
}

/* When the glass surface is a MudTabs, clear the solid surfaces MudBlazor paints
   on the toolbar and panel area so the gradient reads through the whole block. */
.fx-glass.mud-tabs .mud-tabs-toolbar,
.fx-glass.mud-tabs .mud-tabs-panels,
.fx-glass.mud-tabs .mud-tab-panel {
    background-color: transparent !important;
}

/* MudTabs uses overflow:hidden for its rounded container. That clips outside panel glows
   when an fx-glass/FxPanel table surface is placed inside a tab body. Opt in where tab
   content contains glass panels that need their shadow/glow to breathe. */
.fx-tabs,
.fx-tabs .mud-tabs-panels,
.fx-tabs .mud-tab-panel {
    overflow: visible !important;
}

.fx-tabs .mud-tabs-tabbar {
    position: relative;
    z-index: 5;
}

.fx-tabs .mud-tabs-panels {
    position: relative;
    z-index: 1;
}

/* Tables inside a glass surface let the panel show through. */
.fx-glass .mud-table,
.fx-glass .mud-table-container,
.fx-glass .mud-table-root,
.fx-glass table {
    background-color: transparent !important;
}

/* Table semantics inside glass panels: the panel owns the surface, while fx-table
   gives header/row/border treatment so the table does not read as raw markup. */
.fx-glass .fx-table,
.fx-glass .fx-table .mud-table-container,
.fx-glass .fx-table table {
    width: 100%;
    background: transparent !important;
}

.fx-glass .fx-table thead th {
    background: rgba(79,195,247,0.035);
    border-bottom: 1px solid rgba(79,195,247,0.16) !important;
    color: var(--mud-palette-text-secondary);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.fx-glass .fx-table tbody td {
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

.fx-glass .fx-table tbody tr {
    background: rgba(0,0,0,0.08);
}

.fx-glass .fx-table tbody tr:hover {
    background: rgba(79,195,247,0.08) !important;
}

.sandbox-spend-chart {
    height: 220px;
    display: grid;
    grid-template-columns: repeat(6, minmax(48px, 1fr));
    gap: 18px;
    align-items: end;
    padding: 18px 12px 28px;
    border-top: 1px solid rgba(79,195,247,0.10);
}

.sandbox-spend-chart .bar {
    position: relative;
    min-height: 24px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(180deg, rgba(79,195,247,0.75), rgba(79,195,247,0.22));
    box-shadow: 0 0 18px rgba(79,195,247,0.18);
}

.sandbox-spend-chart .bar.warn {
    background: linear-gradient(180deg, rgba(255,168,0,0.82), rgba(255,168,0,0.24));
    box-shadow: 0 0 18px rgba(255,168,0,0.18);
}

/* ==========================================================================
    Plain modes. Party keeps the ambient circuit/glass treatment above; light and
    dark trade it for flat operational surfaces.
    ========================================================================== */
html.maintenance-dark,
body.maintenance-dark,
body.maintenance-dark #app,
.maintenance-dark.mud-layout,
.maintenance-dark .mud-main-content,
.maintenance-dark .app-fx {
     background: #101820 !important;
     background-image: none !important;
}

html.maintenance-light,
body.maintenance-light,
body.maintenance-light #app,
.maintenance-light.mud-layout,
.maintenance-light .mud-main-content,
.maintenance-light .app-fx {
    background: var(--mud-palette-background) !important;
    background-image: none !important;
}

.maintenance-dark .app-fx::before,
.maintenance-dark .app-fx::after,
.maintenance-dark .app-fx > .fx-nodes,
.maintenance-light .app-fx::before,
.maintenance-light .app-fx::after,
.maintenance-light .app-fx > .fx-nodes {
    display: none !important;
}

.maintenance-dark .brand-title-pop {
    color: transparent;
    background: linear-gradient(90deg, #7DD3FC 0%, #00B5E2 100%);
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: none;
    animation: none;
}

.maintenance-light .brand-title-pop {
    color: transparent;
    background: linear-gradient(90deg, #00629B 0%, #00B5E2 100%);
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: none;
    animation: none;
}

.maintenance-dark .app-fx .mud-typography-h4,
.maintenance-light .app-fx .mud-typography-h4 {
    text-shadow: none;
}

body.maintenance-dark .mud-drawer {
    background: #111827 !important;
    border-right: 0 !important;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.maintenance-dark .mud-drawer .mud-nav-group .mud-nav-link.mud-nav-group-button::after {
    background: #243244;
}

body.maintenance-dark .mud-drawer .mud-nav-link:hover {
    background: #162437;
}

body.maintenance-dark .mud-drawer .mud-nav-link.active {
    background: #14324A;
    color: #EAF8FC;
}

body.maintenance-dark .mud-drawer .mud-nav-link.active::before {
    background: #00B5E2;
    box-shadow: none;
}

body.maintenance-dark .mud-drawer .mud-nav-link.active .mud-nav-link-icon,
body.maintenance-dark .drawer-footer-mark,
body.maintenance-dark .drawer-footer-chevron,
body.maintenance-dark .drawer-footer-build {
    color: #7DD3FC;
    filter: none;
}

body.maintenance-dark .drawer-footer,
body.maintenance-dark .drawer-footer:hover,
body.maintenance-dark .drawer-footer:focus-visible {
    background: #111827;
    border-top: 1px solid #243244;
}

body.maintenance-light .mud-drawer {
    background: #ffffff !important;
    border-right: 0 !important;
    box-shadow: 1px 0 6px rgba(15,23,42,0.08);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.maintenance-light .mud-drawer .mud-nav-group .mud-nav-link.mud-nav-group-button::after {
    background: #e3e8ef;
}

body.maintenance-light .mud-drawer .mud-nav-link:hover {
    background: #EAF8FC;
}

body.maintenance-light .mud-drawer .mud-nav-link.active {
    background: #EAF8FC;
    color: #00629B;
}

body.maintenance-light .mud-drawer .mud-nav-link.active::before {
    background: #00B5E2;
    box-shadow: none;
}

body.maintenance-light .mud-drawer .mud-nav-link.active .mud-nav-link-icon,
body.maintenance-light .drawer-footer-mark,
body.maintenance-light .drawer-footer-chevron,
body.maintenance-light .drawer-footer-build {
    color: var(--mud-palette-primary);
    filter: none;
}

body.maintenance-light .drawer-footer,
body.maintenance-light .drawer-footer:hover,
body.maintenance-light .drawer-footer:focus-visible {
    background: #F2FAFD;
    border-top: 1px solid #e3e8ef;
}

body.maintenance-dark .fx-glass,
body.maintenance-dark .fx-panel.fx-glass,
body.maintenance-dark .mud-paper.fx-glass,
body.maintenance-dark .fx-panel.fx-glass.mud-paper,
body.maintenance-dark .mud-paper-outlined.fx-glass {
    background: #18212D !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.maintenance-light .fx-glass,
body.maintenance-light .fx-panel.fx-glass,
body.maintenance-light .mud-paper.fx-glass,
body.maintenance-light .fx-panel.fx-glass.mud-paper,
body.maintenance-light .mud-paper-outlined.fx-glass {
    background: var(--mud-palette-surface) !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.maintenance-dark .fx-glass .fx-table thead th {
    background: #132638;
    border-bottom: 1px solid #263445 !important;
    color: #7DD3FC;
}

body.maintenance-light .fx-glass .fx-table thead th {
    background: #EAF8FC;
    border-bottom: 1px solid #BEEAF5 !important;
    color: #00629B;
}

body.maintenance-light .fx-glass .fx-table tbody td {
    border-bottom: 1px solid #edf1f6 !important;
}

body.maintenance-dark .fx-glass .fx-table tbody td {
    border-bottom: 1px solid #263445 !important;
}

body.maintenance-dark .fx-glass .fx-table tbody tr {
    background: transparent;
}

body.maintenance-light .fx-glass .fx-table tbody tr {
    background: transparent;
}

body.maintenance-dark .fx-glass .fx-table tbody tr:hover {
    background: #1E2D3F !important;
}

body.maintenance-light .fx-glass .fx-table tbody tr:hover {
    background: #F2FAFD !important;
}

body.maintenance-dark .mud-toggle-group {
    border: 0 !important;
    background: #132033;
    box-shadow: none;
}

body.maintenance-light .mud-toggle-group {
    border: 0 !important;
    background: #EAF8FC;
    box-shadow: none;
}

body.maintenance-dark .mud-toggle-group .mud-toggle-item {
    color: var(--mud-palette-text-secondary) !important;
}

body.maintenance-light .mud-toggle-group .mud-toggle-item {
    color: var(--mud-palette-text-secondary) !important;
}

body.maintenance-dark .mud-toggle-group .mud-toggle-item:hover {
    background: #1E2D3F !important;
    color: var(--mud-palette-text-primary) !important;
}

body.maintenance-light .mud-toggle-group .mud-toggle-item:hover {
    background: #e3edf7 !important;
    color: var(--mud-palette-text-primary) !important;
}

body.maintenance-dark .mud-toggle-group .mud-toggle-item.mud-toggle-item-selected,
body.maintenance-dark .mud-toggle-group .mud-toggle-item.mud-toggle-item-selected:hover,
body.maintenance-light .mud-toggle-group .mud-toggle-item.mud-toggle-item-selected,
body.maintenance-light .mud-toggle-group .mud-toggle-item.mud-toggle-item-selected:hover {
    background: var(--mud-palette-primary) !important;
    color: #ffffff !important;
    box-shadow: none;
}

.sandbox-spend-chart .bar.good {
    background: linear-gradient(180deg, rgba(52,255,176,0.70), rgba(52,255,176,0.18));
    box-shadow: 0 0 18px rgba(52,255,176,0.14);
}

.sandbox-spend-chart .bar span {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -24px;
    text-align: center;
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
}

/* ===========================================================================
   House dialog surface (MaintenanceDialog): a frosted dark-glass popup with a
   gradient border ring and a soft cyan outer glow so it lifts off the page.
   Kept fairly opaque (modal content must stay readable) with a backdrop blur
   that frosts the dimmed page behind it.
   =========================================================================== */
.fx-dialog {
    position: relative;
    overflow: visible !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, rgba(22,25,31,0.92) 0%, rgba(13,15,19,0.95) 100%) !important;
    box-shadow: 0 16px 50px rgba(0,0,0,0.65), 0 0 34px rgba(79,195,247,0.24) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.fx-dialog::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 14px;
    padding: 2px;
    background: linear-gradient(135deg, rgba(79,195,247,0.95) 0%, rgba(52,255,176,0.95) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
}

/* ===========================================================================
   Amber (warning) is a light surface, so filled warning chips need dark text.
   MudBlazor defaults --mud-palette-warning-text to white, which is unreadable
   on amber; override the label and icon with higher specificity than the
   framework's two-class rule.
   =========================================================================== */
.mud-chip.mud-chip-filled.mud-chip-color-warning,
.mud-chip.mud-chip-filled.mud-chip-color-warning .mud-icon-root {
    color: rgba(0, 0, 0, 0.87);
}

}