@font-face {
    font-family: "Fira Sans";
    src: url("/fonts/Fira_Sans/FiraSans-Regular.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Fira Sans";
    src: url("/fonts/Fira_Sans/FiraSans-Italic.ttf") format("truetype");
    font-style: italic;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Fira Sans";
    src: url("/fonts/Fira_Sans/FiraSans-Medium.ttf") format("truetype");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "Fira Sans";
    src: url("/fonts/Fira_Sans/FiraSans-MediumItalic.ttf") format("truetype");
    font-style: italic;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "Fira Sans";
    src: url("/fonts/Fira_Sans/FiraSans-SemiBold.ttf") format("truetype");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "Fira Sans";
    src: url("/fonts/Fira_Sans/FiraSans-SemiBoldItalic.ttf") format("truetype");
    font-style: italic;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "Fira Sans";
    src: url("/fonts/Fira_Sans/FiraSans-Bold.ttf") format("truetype");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "Fira Sans";
    src: url("/fonts/Fira_Sans/FiraSans-BoldItalic.ttf") format("truetype");
    font-style: italic;
    font-weight: 700;
    font-display: swap;
}
:root {
    --ps-font-sans: "Fira Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    /* Color System Swatches */
    /* Misc */
    --kendo-color-app-surface: #151828;
    --kendo-color-surface: #2F344C;
    --kendo-color-surface-alt: #232739;
    --kendo-color-on-app-surface: #EFF0F5;
    --kendo-color-subtle: #8E95B9;
    --kendo-color-border: rgba(239, 240, 245, .16);
    --kendo-color-border-alt: rgba(239, 240, 245, .24);
    /*  Base */
    --kendo-color-base-subtle: #414762;
    --kendo-color-base-subtle-hover: #3E4565;
    --kendo-color-base-subtle-active: #464E72;
    --kendo-color-base: #4A506E;
    --kendo-color-base-hover: #4A506E;
    --kendo-color-base-active: #52587A;
    --kendo-color-base-emphasis: #6C749D;
    --kendo-color-on-base: #EFF0F5;
    --kendo-color-base-on-surface: #CDD0E0;
    --kendo-color-base-on-subtle: #EFF0F5;
    /* Primary */
    /* Primary (updated to new main color #00b0f0) */
    --kendo-color-primary-subtle: #11334C;
    --kendo-color-primary-subtle-hover: #10405C;
    --kendo-color-primary-subtle-active: #0E4C6C;
    --kendo-color-primary: #00B0F0;
    --kendo-color-primary-hover: #2EBEF3;
    --kendo-color-primary-active: #52C9F5;
    --kendo-color-primary-emphasis: #0089BB;
    --kendo-color-on-primary: white;
    --kendo-color-primary-on-surface: #00B0F0;
    --kendo-color-primary-on-subtle: #BFEBFB;
    /* Secondary */
    --kendo-color-secondary-subtle: #5E668D;
    --kendo-color-secondary-subtle-hover: #6C749D;
    --kendo-color-secondary-subtle-active: #7C84AC;
    --kendo-color-secondary: #7C84AC;
    --kendo-color-secondary-hover: #8F96B8;
    --kendo-color-secondary-active: #A7ACC8;
    --kendo-color-secondary-emphasis: #A7ACC8;
    --kendo-color-on-secondary: #151828;
    --kendo-color-secondary-on-surface: #A7ACC8;
    --kendo-color-secondary-on-subtle: #EFF0F5;
    /* Tertiary */
    --kendo-color-tertiary-subtle: #1F2F5C;
    --kendo-color-tertiary-subtle-hover: #263B73;
    --kendo-color-tertiary-subtle-active: #2E468A;
    --kendo-color-tertiary: #6681CC;
    --kendo-color-tertiary-hover: #7D94D4;
    --kendo-color-tertiary-active: #94A7DC;
    --kendo-color-tertiary-emphasis: #4665B9;
    --kendo-color-on-tertiary: #1C1D22;
    --kendo-color-tertiary-on-surface: #7D94D4;
    --kendo-color-tertiary-on-subtle: #D1D9F0;
    /* Error */
    --kendo-color-error-subtle: #5E1C1C;
    --kendo-color-error-subtle-hover: #6E2121;
    --kendo-color-error-subtle-active: #852828;
    --kendo-color-error: #DD7E7E;
    --kendo-color-error-hover: #E18E8E;
    --kendo-color-error-active: #E59E9E;
    --kendo-color-error-emphasis: #A53131;
    --kendo-color-on-error: #1C1D22;
    --kendo-color-error-on-surface: #E18E8E;
    --kendo-color-error-on-subtle: #F4D7D7;
    /* Success */
    --kendo-color-success-subtle: #1C5F38;
    --kendo-color-success-subtle-hover: #206E41;
    --kendo-color-success-subtle-active: #257E4A;
    --kendo-color-success: #6AD395;
    --kendo-color-success-hover: #89DCAB;
    --kendo-color-success-active: #A9E5C2;
    --kendo-color-success-emphasis: #2F9D5D;
    --kendo-color-on-success: #1C1D22;
    --kendo-color-success-on-surface: #89DCAB;
    --kendo-color-success-on-subtle: #E0F6E9;
    /* Warning */
    --kendo-color-warning-subtle: #474300;
    --kendo-color-warning-subtle-hover: #5C5600;
    --kendo-color-warning-subtle-active: #706900;
    --kendo-color-warning: #D1C975;
    --kendo-color-warning-hover: #D9D28C;
    --kendo-color-warning-active: #DED89C;
    --kendo-color-warning-emphasis: #9E9410;
    --kendo-color-on-warning: #1C1D22;
    --kendo-color-warning-on-surface: #D9D28C;
    --kendo-color-warning-on-subtle: #F2F0D9;
    /* Info */
    --kendo-color-info-subtle: #243A56;
    --kendo-color-info-subtle-hover: #2D486C;
    --kendo-color-info-subtle-active: #365681;
    --kendo-color-info: #5A82BA;
    --kendo-color-info-hover: #658CC3;
    --kendo-color-info-active: #6F96CD;
    --kendo-color-info-emphasis: #456DA5;
    --kendo-color-on-info: #1C1D22;
    --kendo-color-info-on-surface: #658CC3;
    --kendo-color-info-on-subtle: #D1DEEF;
    /* Light */
    --kendo-color-light-subtle: #A7ACC8;
    --kendo-color-light-subtle-hover: #BABED4;
    --kendo-color-light-subtle-active: #CDD0E0;
    --kendo-color-light: #BABED4;
    --kendo-color-light-hover: #CDD0E0;
    --kendo-color-light-active: #E0E1EB;
    --kendo-color-light-emphasis: #A7ACC8;
    --kendo-color-on-light: #2F344C;
    --kendo-color-light-on-surface: #CDD0E0;
    --kendo-color-light-on-subtle: #232739;
    /* Dark */
    --kendo-color-dark-subtle: #232739;
    --kendo-color-dark-subtle-hover: #2F344C;
    --kendo-color-dark-subtle-active: #414762;
    --kendo-color-dark: #2F344C;
    --kendo-color-dark-hover: #414762;
    --kendo-color-dark-active: #4A506E;
    --kendo-color-dark-emphasis: #5E668D;
    --kendo-color-on-dark: #E0E1EB;
    --kendo-color-dark-on-surface: #414762;
    --kendo-color-dark-on-subtle: #EFF0F5;
    /* Series A */
    --kendo-color-series-a-subtler: #68273A;
    --kendo-color-series-a: #B54A6A;
    --kendo-color-series-a-bold: #C4788F;
    --kendo-color-series-a-subtle: #953753;
    --kendo-color-series-a-bolder: #D095A6;
    /* Series B */
    --kendo-color-series-b-subtler: #42676B;
    --kendo-color-series-b: #6F9FA4;
    --kendo-color-series-b-bold: #88B0B4;
    --kendo-color-series-b-subtle: #5A8B90;
    --kendo-color-series-b-bolder: #A4C8CB;
    /* Series C */
    --kendo-color-series-c-subtler: #61451A;
    --kendo-color-series-c: #A9782D;
    --kendo-color-series-c-bold: #C18B49;
    --kendo-color-series-c-subtle: #896124;
    --kendo-color-series-c-bolder: #CEA36F;
    /* Series D */
    --kendo-color-series-d-subtler: #3B3F68;
    --kendo-color-series-d: #6269A7;
    --kendo-color-series-d-bold: #767DBC;
    --kendo-color-series-d-subtle: #515790;
    --kendo-color-series-d-bolder: #9197C9;
    /* Series E */
    --kendo-color-series-e-subtler: #51511F;
    --kendo-color-series-e: #9C9C3B;
    --kendo-color-series-e-bold: #BFBF55;
    --kendo-color-series-e-subtle: #7E7E2F;
    --kendo-color-series-e-bolder: #D2D288;
    /* Series F */
    --kendo-color-series-f-subtler: #2E486B;
    --kendo-color-series-f: #5479AB;
    --kendo-color-series-f-bold: #7D99BF;
    --kendo-color-series-f-subtle: #3D608F;
    --kendo-color-series-f-bolder: #A0B4D0;
    /* Typography */

    --kendo-font-family: var(--ps-font-sans);
    --kendo-font-size: 16px;
    --kendo-font-size-xs: 12px;
    --kendo-font-size-sm: 14px;
    --kendo-font-size-md: var(--kendo-font-size);
    --kendo-font-size-lg: 18px;
    --kendo-font-size-xl: 20px;
    --kendo-line-height: 1.42;
    --kendo-line-height-xs: 1.2;
    --kendo-line-height-sm: 1.25;
    --kendo-line-height-md: var(--kendo-line-height);
    --kendo-line-height-lg: 1.5;
    --kendo-h1-font-size: calc(var(--kendo-font-size) * 4);
    --kendo-h2-font-size: calc(var(--kendo-font-size) * 3.5);
    --kendo-h3-font-size: calc(var(--kendo-font-size) * 3);
    --kendo-h4-font-size: calc(var(--kendo-font-size) * 2.5);
    --kendo-h5-font-size: calc(var(--kendo-font-size) * 2);
    --kendo-h6-font-size: calc(var(--kendo-font-size) * 1.5);
    --kendo-h1-line-height: calc(var(--kendo-h1-font-size) * 1.25);
    --kendo-h2-line-height: calc(var(--kendo-h2-font-size) * 1.25);
    --kendo-h3-line-height: calc(var(--kendo-h3-font-size) * 1.25);
    --kendo-h4-line-height: calc(var(--kendo-h4-font-size) * 1.25);
    --kendo-h5-line-height: calc(var(--kendo-h5-font-size) * 1.25);
    --kendo-h6-line-height: calc(var(--kendo-h6-font-size) * 1.25);
    --kendo-h1-font-weight: 400;
    --kendo-h2-font-weight: 400;
    --kendo-h3-font-weight: 400;
    --kendo-h4-font-weight: 700;
    --kendo-h5-font-weight: 700;
    --kendo-h6-font-weight: 700;
    /* Border radius */
    --kendo-border-radius-xs: 1px;
    --kendo-border-radius-sm: 2px;
    --kendo-border-radius-md: 4px;
    --kendo-border-radius-lg: 8px;
    --kendo-border-radius-xl: 12px;
    --kendo-border-radius-xxl: 24px;
    --kendo-border-radius-xxxl: 48px;
    --kendo-border-radius-full: 9999px;
    /* Card Gradient */
    --card-gradient: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--kendo-color-on-app-surface) 10%, transparent) 0%, color-mix(in srgb, var(--kendo-color-surface-alt) 10%, transparent) 100%), var(--kendo-color-surface-alt);
}



html,
body {
    font-family: var(--ps-font-sans);
}

.font-sans {
    font-family: var(--ps-font-sans);
}

/* Keep reconnect feedback animated even when Blazor only preserves the modal shell. */
#components-reconnect-modal {
    overflow: hidden;
    padding: 1.35rem 1.45rem 1.2rem;
}

#components-reconnect-modal::before {
    content: "";
    display: block;
    width: 2.75rem;
    height: 2.75rem;
    margin: 0 auto .95rem;
    border: 3px solid rgba(245, 247, 251, .16);
    border-top-color: #20c5ff;
    border-right-color: #7a5cff;
    border-radius: 9999px;
    box-shadow: 0 0 1.1rem rgba(32, 197, 255, .24);
    animation: polyscript-reconnect-loader-spin .9s linear infinite;
}

#components-reconnect-modal::after {
    content: "";
    display: block;
    width: min(16rem, 70%);
    height: .35rem;
    margin: .95rem auto 0;
    border-radius: 9999px;
    background: linear-gradient(90deg, rgba(255, 255, 255, .08), rgba(32, 197, 255, .48), rgba(122, 92, 255, .48), rgba(255, 255, 255, .08));
    background-size: 220% 100%;
    animation: polyscript-reconnect-loader-shimmer 1.4s ease-in-out infinite;
}

#components-reconnect-modal .components-reconnect-spinner {
    display: none;
}

#components-reconnect-modal .components-reconnect-message {
    display: block;
}

#blazor-error-ui {
    width: min(38rem, calc(100vw - 1.5rem));
    padding: .85rem;
    border-color: rgba(255, 107, 107, .26);
    background:
        radial-gradient(circle at 12% 18%, rgba(255, 107, 107, .18), transparent 44%),
        radial-gradient(circle at 92% 10%, rgba(122, 92, 255, .13), transparent 42%),
        linear-gradient(180deg, rgba(28, 22, 36, .98), rgba(16, 20, 34, .98));
    box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .06);
    backdrop-filter: blur(1rem);
}

#blazor-error-ui .blazor-error-panel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: .85rem;
}

#blazor-error-ui .blazor-error-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid rgba(255, 107, 107, .34);
    border-radius: 9999px;
    background: rgba(255, 107, 107, .12);
    color: #ffd8d8;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 0 .9rem rgba(255, 107, 107, .16);
}

#blazor-error-ui .blazor-error-copy {
    display: grid;
    min-width: 0;
    gap: .1rem;
}

#blazor-error-ui .blazor-error-copy strong {
    color: #fff;
    font-size: .98rem;
    font-weight: 700;
}

#blazor-error-ui .blazor-error-copy span {
    color: var(--kendo-color-subtle);
    font-size: .9rem;
}

#blazor-error-ui .reload {
    min-height: 2.35rem;
    margin-left: 0;
    padding: .45rem .9rem;
    border-color: rgba(32, 197, 255, .42);
    border-radius: .75rem;
    background: linear-gradient(135deg, rgba(32, 197, 255, .92), rgba(122, 92, 255, .9));
}

#blazor-error-ui .dismiss {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 2.15rem;
    line-height: 1;
    color: rgba(245, 247, 251, .86);
}

#components-reconnect-modal.components-reconnect-failed::before,
#components-reconnect-modal.components-reconnect-rejected::before {
    border-top-color: #ff6b6b;
    border-right-color: #7a5cff;
}

#components-reconnect-modal.components-reconnect-failed::after,
#components-reconnect-modal.components-reconnect-rejected::after {
    background: linear-gradient(90deg, rgba(255, 255, 255, .08), rgba(255, 107, 107, .5), rgba(122, 92, 255, .44), rgba(255, 255, 255, .08));
    background-size: 220% 100%;
}

@keyframes polyscript-reconnect-loader-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes polyscript-reconnect-loader-shimmer {
    0% {
        background-position: 220% 0;
    }

    100% {
        background-position: -220% 0;
    }
}

@media (max-width: 40rem) {
    #blazor-error-ui {
        padding: .75rem;
    }

    #blazor-error-ui .blazor-error-panel {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: .7rem;
    }

    #blazor-error-ui .reload {
        grid-column: 2 / -1;
        justify-self: start;
    }

    #blazor-error-ui .dismiss {
        grid-column: 3;
        grid-row: 1;
    }
}