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

a, .btn-link {
    color: #006bb7;
}

.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;
}

h1:focus {
    outline: none;
}

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

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.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."
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}
*/



#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

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

body {
    font-family: var(--rz-text-font-family);
    color: var(--rz-text-color);
    font-size: var(--rz-body-font-size);
    line-height: var(--rz-body-line-height);
    background-color: var(--rz-body-background-color);
}

.rz-body {
    --rz-body-padding: 0;
    background-image: url(../img/background.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
}

.rz-flat-bg {
    background-image: none;
}

@-moz-keyframes spin {
    100% {
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

a {
    color: var(--rz-link-color);
}

    a:hover,
    a:focus {
        color: var(--rz-link-hover-color);
    }

.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."
    }

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

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

.rz-markdown img {
    max-width: 100%;
    height: auto;
}

.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

    .embed-container iframe,
    .embed-container object,
    .embed-container embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

/* Component overrides */

.rz-link .rz-card {
    transition: var(--rz-transition-all);
}

.rz-link:hover .rz-card {
    box-shadow: var(--rz-shadow-4);
}

.rz-bento-grid {
    --rz-link-hover-text-decoration: none;
}


/* Blog post and Documentation articles */
.rz-article {
    img

{
    display: block;
    margin: 3rem auto;
    max-width: 100%;
}

p > img,
li > img {
    display: inline-block;
}

.rz-text-h1,
.rz-text-h2,
.rz-text-h3,
.rz-text-h4,
.rz-text-h5,
.rz-text-h6 {
    .rz-link

{
    margin-left: 0.75rem;
    opacity: 0;
    font-weight: 100;
}

.rz-link:hover {
    opacity: 1;
}

}

.rz-text-h1:hover,
.rz-text-h2:hover,
.rz-text-h3:hover,
.rz-text-h4:hover,
.rz-text-h5:hover,
.rz-text-h6:hover {
    .rz-link

{
    opacity: 0.5;
}

}

--rz-text-h1-font-weight: 500;
--rz-text-h1-line-height: 1.25;
--rz-text-overline-font-size: 0.75rem;
--rz-text-body1-line-height: 1.5;
--rz-text-body1-letter-spacing: initial;

--rz-text-h1-font-size: clamp(1.8rem, 2vw + 1rem, 2.4rem);
--rz-text-h2-font-size: clamp(1.5rem, 1.5vw + 0.8rem, 2rem);
--rz-text-h3-font-size: clamp(1.25rem, 1.2vw + 0.6rem, 1.6rem);
--rz-text-h4-font-size: clamp(1.125rem, 1vw + 0.5rem, 1.4rem);
--rz-text-h5-font-size: clamp(1rem, 0.8vw + 0.4rem, 1.2rem);
--rz-text-h6-font-size: clamp(0.95rem, 0.6vw + 0.3rem, 1rem);

--rz-text-h1-margin-block-start: 2rem;
--rz-text-h1-margin-block-end: 1rem;
--rz-text-h2-margin-block-start: 1.5rem;
--rz-text-h2-margin-block-end: 0.75rem;
--rz-text-h3-margin-block-start: 1.2rem;
--rz-text-h3-margin-block-end: 0.6rem;
--rz-text-h4-margin-block-start: 1rem;
--rz-text-h4-margin-block-end: 0.5rem;
--rz-text-h5-margin-block-start: 0.75rem;
--rz-text-h5-margin-block-end: 0.4rem;
--rz-text-h6-margin-block-start: 0.5rem;
--rz-text-h6-margin-block-end: 0.3rem;

.rz-text-h2:not(:first-child) {
    margin-top: 2.5rem;
}

.rz-text-h3 {
    margin-top: 2rem;
}

.rz-text-h4 {
    margin-top: 1.5rem;
}

.rz-text-body1 + .rz-text-body1 {
    --rz-text-body1-margin-block-start: 1rem;
}

ul, ol {
    font-family: var(--rz-text-font-family);
    font-size: var(--rz-text-body1-font-size);
    line-height: var(--rz-text-body1-line-height);
    font-weight: var(--rz-text-body1-font-weight);
    letter-spacing: var(--rz-text-body1-letter-spacing);
    color: var(--rz-text-body1-color);
    margin-block-start: var(--rz-text-body1-margin-block-start);
    margin-block-end: var(--rz-text-body1-margin-block-end);
}

li:not(:last-child) {
    margin-block-end: var(--rz-text-body1-margin-block-end);
}

pre {
    overflow-x: scroll;
    padding: 0.5rem;
    font-size: 0.8125em !important;
    line-height: 1.25rem;
    background: var(--rz-base);
    color: var(--rz-on-base);
    border-radius: var(--rz-card-border-radius);
    letter-spacing: -0.04em;
}

p code,
ul code {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    font-size: 0.8125em !important;
    line-height: 1.25rem;
    background: var(--rz-base);
    color: var(--rz-on-base);
    border-radius: var(--rz-card-border-radius);
    letter-spacing: -0.04em;
}

.rz-link .rzi {
    position: absolute;
}

blockquote {
    background-color: var(--rz-info-lighter);
    color: var(--rz-on-info-lighter);
    margin: 1rem 0;
    padding: 1rem;
    border-radius: var(--rz-alert-border-radius);
    --rz-text-body1-margin-block-end: 0;
}

}

.rz-markdown > .rz-text-h1 {
    margin-block-start: 0;
}

/* Solution pages */
.rz-solution-page,
.rz-homepage {
    --rz-text-display-h1-font-weight: 500;
    --rz-text-display-h1-line-height: 1em;
    --rz-text-overline-font-size: 0.75rem;
    --rz-text-body1-font-size: 1.25rem;
    --rz-text-body1-line-height: 1.5;
    --rz-text-body1-letter-spacing: initial;
}

.rz-default,
.rz-dark,
.rz-humanistic,
.rz-humanistic-dark,
.rz-software,
.rz-software-dark {
    --rz-accordion-item-padding-block: 0.75rem;
    --rz-accordion-item-padding-inline: 0.75rem;
}

/* Download Button in Main Site Navigation */
.rz-menu:not(.rz-menu-open) .main-nav-download-button {
    --rz-menu-top-item-color: var(--rz-base-background-color);
    --rz-menu-top-item-hover-color: var(--rz-base-background-color);
    --rz-menu-top-item-hover-background-color: transparent;
    --rz-menu-top-item-selected-color: var(--rz-base-background-color);
    --rz-menu-top-item-selected-background-color: var(--rz-text-color);
    --rz-menu-top-item-padding-inline: 1.5rem;
    background-color: var(--rz-text-color) !important;
    border-radius: var(--rz-button-border-radius) !important;
    overflow: hidden;
}

/* Main Site Navigation on Product pages */
.site-main-top-nav {
    --rz-menu-item-icon-margin-inline: 0;
    --rz-menu-item-icon-color: var(--rz-on-primary-darker);
    --rz-menu-item-icon-hover-color: var(--rz-white);
    --rz-menu-background-color: var(--rz-base-darker);
    --rz-menu-top-item-color: var(--rz-on-base-darker);
    --rz-menu-top-item-background-color: var(--rz-base-darker);
    --rz-menu-top-item-hover-color: var(--rz-on-base-darker);
    --rz-menu-top-item-selected-color: var(--rz-on-base-darker);
    --rz-menu-item-color: var(--rz-on-base-darker);
    --rz-menu-item-background-color: var(--rz-base-darker);
    --rz-menu-item-hover-color: var(--rz-on-base-dark);
    --rz-menu-item-hover-background-color: var(--rz-base-dark);
    --rz-menu-item-selected-color: var(--rz-on-base-darker);
    --rz-menu-item-selected-background-color: var(--rz-base-dark);
}

/* Logo */

.rz-fluent,
.rz-fluent-dark,
.rz-material3-dark,
.rz-material,
.rz-material-dark,
.rz-standard-dark,
.rz-dark,
.rz-humanistic-dark,
.rz-software-dark {
    .rz-theme-logo

{
    fill: #ffffff;
}

}

@media (min-width: 1440px) {
    .rz-logo-wrapper {
        width: 245px;
    }

    .rz-theme-picker-wrapper {
        width: 260px;
    }
}

@media (min-width: 1920px) {
    .rz-logo-wrapper {
        width: 365px;
    }

    .rz-theme-picker-wrapper {
        width: 375px;
    }
}

}

@media (max-width: 640px) {
    .rz-logo-wrapper {
        svg

{
    max-width: 200px;
}

}
}


@media (max-width: 768px) {
    .main-nav {
        position: absolute;
        z-index: 9999;
        inset-inline-end: 0;
        padding-inline-end: 1rem;
        background-color: var(--rz-header-background-color);
    }

    .site-main-top-nav {
        background-color: var(--rz-base-darker);
    }

    .rz-menu-open {
        max-height: 100vh;
        overflow-y: auto;
        padding: 0 0 1rem 1rem !important;
    }
}

.rbs-download-card,
.rbvs-download-card {
    background-image: none !important;
    background-position: calc(100% + 200px) 50% !important;
    background-repeat: no-repeat !important;
    background-size: auto 80% !important;
}

@media (min-width: 1280px) {
    .rbs-download-card {
        background-image: url('../images/radzen-blazor-studio-windows.png') !important;
        background-size: auto 50% !important;
    }

    .rbvs-download-card {
        background-image: url('../images/radzen-blazor-for-visual-studio-windows.png') !important;
        background-size: auto 50% !important;
    }
}

@media (min-width: 1560px) {
    .rbs-download-card,
    .rbvs-download-card {
        background-size: auto 60% !important;
    }
}

@media (min-width: 1920px) {
    .rbs-download-card,
    .rbvs-download-card {
        background-size: auto 80% !important;
    }
}




/* Theme Colors */

:root:has(.rz-material3) {
    --rz-white: #ffffff;
    --rz-black: #000000;
    --rz-primary: #e32b16;
    --rz-base: #ece0df;
    --rz-base-50: #fbf9f8;
    --rz-base-100: #f9f4f3;
    --rz-base-200: #f3e4e3;
    --rz-base-300: #ece0df;
    --rz-base-400: #e6dcdb;
    --rz-base-500: #e0d8d7;
    --rz-base-600: #d2c7c6;
    --rz-base-700: #7e7574;
    --rz-base-800: #4f4645;
    --rz-base-900: #201c1b;
    --rz-base-light: #f9f4f3;
    --rz-base-lighter: #fff;
    --rz-base-dark: #4f4645;
    --rz-base-darker: #201c1b;
    --rz-on-base: #201c1b;
    --rz-on-base-light: #201c1b;
    --rz-on-base-lighter: #201c1b;
    --rz-on-base-dark: #fff;
    --rz-on-base-darker: #fbf9f8;
    --rz-primary-light: #ffc4bc;
    --rz-primary-lighter: rgba(255,27,0,0.13);
    --rz-primary-dark: #8b4137;
    --rz-primary-darker: #5d1200;
    --rz-on-primary: #fff;
    --rz-on-primary-light: #5d1200;
    --rz-on-primary-lighter: #5d1200;
    --rz-on-primary-dark: #fff;
    --rz-on-primary-darker: #ffc4bc;
    --rz-secondary: #71605b;
    --rz-secondary-light: #dcc7c2;
    --rz-secondary-lighter: rgba(255, 53, 0, 0.13);
    --rz-secondary-dark: #584844;
    --rz-secondary-darker: #2b1d19;
    --rz-info: #085786;
    --rz-info-light: #aadaff;
    --rz-info-lighter: rgba(170, 218, 255, 0.5);
    --rz-info-dark: #086791;
    --rz-info-darker: #002d41;
    --rz-success: #386A20;
    --rz-success-light: #c0ffaa;
    --rz-success-lighter: rgba(192, 255, 170, 0.5);
    --rz-success-dark: #3e9108;
    --rz-success-darker: #194100;
    --rz-warning: #e8e971;
    --rz-warning-light: #f9ffaa;
    --rz-warning-lighter: rgba(249, 255, 170, 0.5);
    --rz-warning-dark: #918908;
    --rz-warning-darker: #413d00;
    --rz-danger: #b3261e;
    --rz-danger-light: #ffb4aa;
    --rz-danger-lighter: rgba(255, 180, 170, 0.5);
    --rz-danger-dark: #91080a;
    --rz-danger-darker: #410001;
    --rz-on-base: #201b1b;
    --rz-on-base-light: #201b1b;
    --rz-on-base-lighter: #201b1b;
    --rz-on-base-dark: #fff;
    --rz-on-base-darker: #fbf8f8;
    --rz-on-primary: #ffffff;
    --rz-on-primary-light: #5d0900;
    --rz-on-primary-lighter: #5d0900;
    --rz-on-primary-dark: #fff;
    --rz-on-primary-darker: #ffbebc;
    --rz-on-secondary: #ffffff;
    --rz-on-secondary-light: #2b1d19;
    --rz-on-secondary-lighter: #2b1d19;
    --rz-on-secondary-dark: #ffffff;
    --rz-on-secondary-darker: #dcc7c2;
    --rz-on-info: #ffffff;
    --rz-on-info-light: #002d41;
    --rz-on-info-lighter: #086791;
    --rz-on-info-dark: #ffffff;
    --rz-on-info-darker: #aadaff;
    --rz-on-success: #ffffff;
    --rz-on-success-light: #194100;
    --rz-on-success-lighter: #194100;
    --rz-on-success-dark: #ffffff;
    --rz-on-success-darker: #c0ffaa;
    --rz-on-warning: #201d1b;
    --rz-on-warning-light: #413d00;
    --rz-on-warning-lighter: #413d00;
    --rz-on-warning-dark: #ffffff;
    --rz-on-warning-darker: #f9ffaa;
    --rz-on-danger: #ffffff;
    --rz-on-danger-light: #410001;
    --rz-on-danger-lighter: #410001;
    --rz-on-danger-dark: #ffffff;
    --rz-on-danger-darker: #ffb4aa;
    --rz-series-1: #f08d75;
    --rz-series-2: #f0e975;
    --rz-series-3: #9bf075;
    --rz-series-4: #75f0ab;
    --rz-series-5: #75d8f0;
    --rz-series-6: #757cf0;
    --rz-series-7: #ca75f0;
    --rz-series-8: #f075ba;
    --rz-series-9: #eb6747;
    --rz-series-10: #ebe147;
    --rz-series-11: #7aeb47;
    --rz-series-12: #47eb8f;
    --rz-series-13: #47cbeb;
    --rz-series-14: #4751eb;
    --rz-series-15: #b847eb;
    --rz-series-16: #eb47a3;
    --rz-series-17: #b8553d;
    --rz-series-18: #b8b03d;
    --rz-series-19: #63b83d;
    --rz-series-20: #3db873;
    --rz-series-21: #3da0b8;
    --rz-series-22: #3d44b8;
    --rz-series-23: #923db8;
    --rz-series-24: #b83d82;
}

:root:has(.rz-material3-dark) {
    --rz-white: #ffffff;
    --rz-black: #000000;
    --rz-base: #4f4545;
    --rz-base-50: #e9e0e0;
    --rz-base-100: #d0c4c4;
    --rz-base-200: #998f8f;
    --rz-base-300: #4f4545;
    --rz-base-400: #3e3838;
    --rz-base-500: #3b3434;
    --rz-base-600: #302929;
    --rz-base-700: #261f1f;
    --rz-base-800: #201b1b;
    --rz-base-900: #181212;
    --rz-base-light: #998f8f;
    --rz-base-lighter: #fff;
    --rz-base-dark: #181212;
    --rz-base-darker: #000;
    --rz-primary: #ff504d;
    --rz-primary-light: #ffbebc;
    --rz-primary-lighter: rgba(255,4,0,0.24);
    --rz-primary-dark: #8b3a37;
    --rz-primary-darker: #5d0900;
    --rz-secondary: #dcc9c2;
    --rz-secondary-light: #dcc9c2;
    --rz-secondary-lighter: rgba(255, 174, 144, 0.28);
    --rz-secondary-dark: #584944;
    --rz-secondary-darker: #2b1e19;
    --rz-info: #085786;
    --rz-info-light: #aadaff;
    --rz-info-lighter: rgba(170, 218, 255, 0.24);
    --rz-info-dark: #086791;
    --rz-info-darker: #002d41;
    --rz-success: #386A20;
    --rz-success-light: #c0ffaa;
    --rz-success-lighter: rgba(192, 255, 170, 0.24);
    --rz-success-dark: #3e9108;
    --rz-success-darker: #194100;
    --rz-warning: #e8e971;
    --rz-warning-light: #f9ffaa;
    --rz-warning-lighter: rgba(249, 255, 170, 0.24);
    --rz-warning-dark: #918908;
    --rz-warning-darker: #413d00;
    --rz-danger: #b3261e;
    --rz-danger-light: #ffb4aa;
    --rz-danger-lighter: rgba(255, 180, 170, 0.24);
    --rz-danger-dark: #91080a;
    --rz-danger-darker: #410001;
    --rz-on-base: #fff;
    --rz-on-base-light: #181212;
    --rz-on-base-lighter: #181212;
    --rz-on-base-dark: #fff;
    --rz-on-base-darker: #fff;
    --rz-on-primary: #000;
    --rz-on-primary-light: #5d0900;
    --rz-on-primary-lighter: #ffbebc;
    --rz-on-primary-dark: #ffbebc;
    --rz-on-primary-darker: #ffbebc;
    --rz-on-secondary: #2b1e19;
    --rz-on-secondary-light: #2b1e19;
    --rz-on-secondary-lighter: #dcc9c2;
    --rz-on-secondary-dark: #dcc9c2;
    --rz-on-secondary-darker: #dcc9c2;
    --rz-on-info: #ffffff;
    --rz-on-info-light: #002d41;
    --rz-on-info-lighter: #aadaff;
    --rz-on-info-dark: #aadaff;
    --rz-on-info-darker: #aadaff;
    --rz-on-success: #ffffff;
    --rz-on-success-light: #194100;
    --rz-on-success-lighter: #c0ffaa;
    --rz-on-success-dark: #c0ffaa;
    --rz-on-success-darker: #c0ffaa;
    --rz-on-warning: #181312;
    --rz-on-warning-light: #413d00;
    --rz-on-warning-lighter: #f9ffaa;
    --rz-on-warning-dark: #f9ffaa;
    --rz-on-warning-darker: #f9ffaa;
    --rz-on-danger: #ffffff;
    --rz-on-danger-light: #410001;
    --rz-on-danger-lighter: #ffb4aa;
    --rz-on-danger-dark: #ffb4aa;
    --rz-on-danger-darker: #ffb4aa;
    --rz-series-1: #b8543d;
    --rz-series-2: #b8b03d;
    --rz-series-3: #64b83d;
    --rz-series-4: #3db872;
    --rz-series-5: #3da1b8;
    --rz-series-6: #3d45b8;
    --rz-series-7: #913db8;
    --rz-series-8: #b83d82;
    --rz-series-9: #eb6647;
    --rz-series-10: #ebe047;
    --rz-series-11: #7beb47;
    --rz-series-12: #47eb8e;
    --rz-series-13: #47cceb;
    --rz-series-14: #4752eb;
    --rz-series-15: #b747eb;
    --rz-series-16: #eb47a4;
    --rz-series-17: #f5b2a3;
    --rz-series-18: #f5efa3;
    --rz-series-19: #bdf5a3;
    --rz-series-20: #a3f5c7;
    --rz-series-21: #a3e6f5;
    --rz-series-22: #a3a9f5;
    --rz-series-23: #dba3f5;
    --rz-series-24: #f5a3d1;
}

:root:has(.rz-material) {
    --rz-white: #ffffff;
    --rz-black: #000000;
    --rz-base: #eeeeee;
    --rz-base-50: #fafafa;
    --rz-base-100: #f5f5f5;
    --rz-base-200: #eeeeee;
    --rz-base-300: #e0e0e0;
    --rz-base-400: #bdbdbd;
    --rz-base-500: #9e9e9e;
    --rz-base-600: #757575;
    --rz-base-700: #616161;
    --rz-base-800: #424242;
    --rz-base-900: #212121;
    --rz-base-light: #f5f5f5;
    --rz-base-lighter: #ffffff;
    --rz-base-dark: #757575;
    --rz-base-darker: #212121;
    --rz-primary: #ff504d;
    --rz-primary-light: #ff7370;
    --rz-primary-dark: #cc403d;
    --rz-primary-darker: #ad3634;
    --rz-primary-lighter: rgba(255,80,77,0.12);
    --rz-secondary: #00bcd4;
    --rz-secondary-light: #4dd0e1;
    --rz-secondary-lighter: rgba(0, 188, 212, 0.2);
    --rz-secondary-dark: #0097a7;
    --rz-secondary-darker: #006064;
    --rz-info: #2196f3;
    --rz-info-light: #64b5f6;
    --rz-info-lighter: rgba(30, 147, 243, 0.2);
    --rz-info-dark: #1565c0;
    --rz-info-darker: #0d47a1;
    --rz-success: #4caf50;
    --rz-success-light: #81c784;
    --rz-success-lighter: rgba(76, 175, 79, 0.2);
    --rz-success-dark: #2e7d31;
    --rz-success-darker: #1b5e20;
    --rz-warning: #ff9800;
    --rz-warning-light: #ffb74d;
    --rz-warning-lighter: rgba(255, 152, 0, 0.2);
    --rz-warning-dark: #f57c00;
    --rz-warning-darker: #e65100;
    --rz-danger: #f44336;
    --rz-danger-light: #e57272;
    --rz-danger-lighter: rgba(244, 67, 54, 0.2);
    --rz-danger-dark: #d32f2f;
    --rz-danger-darker: #b71b1b;
    --rz-on-base: #212121;
    --rz-on-base-light: #212121;
    --rz-on-base-lighter: #212121;
    --rz-on-base-dark: #ffffff;
    --rz-on-base-darker: #ffffff;
    --rz-on-primary: #ffffff;
    --rz-on-primary-lighter: #ff504d;
    --rz-on-primary-light: #ffffff;
    --rz-on-primary-dark: #ffffff;
    --rz-on-primary-darker: #ffffff;
    --rz-on-secondary: #ffffff;
    --rz-on-secondary-lighter: #00bcd4;
    --rz-on-secondary-light: #ffffff;
    --rz-on-secondary-dark: #ffffff;
    --rz-on-secondary-darker: #ffffff;
    --rz-on-info: #ffffff;
    --rz-on-info-lighter: #2196f3;
    --rz-on-info-light: #ffffff;
    --rz-on-info-dark: #ffffff;
    --rz-on-info-darker: #ffffff;
    --rz-on-success: #ffffff;
    --rz-on-success-lighter: #4caf50;
    --rz-on-success-light: #ffffff;
    --rz-on-success-dark: #ffffff;
    --rz-on-success-darker: #ffffff;
    --rz-on-warning: #ffffff;
    --rz-on-warning-lighter: #ff9800;
    --rz-on-warning-light: #ffffff;
    --rz-on-warning-dark: #ffffff;
    --rz-on-warning-darker: #ffffff;
    --rz-on-danger: #ffffff;
    --rz-on-danger-lighter: #f44336;
    --rz-on-danger-light: #ffffff;
    --rz-on-danger-dark: #ffffff;
    --rz-on-danger-darker: #ffffff;
}

:root:has(.rz-material-dark) {
    --rz-white: #ffffff;
    --rz-black: #000000;
    --rz-base: #8d6e63;
    --rz-base-50: #efebe9;
    --rz-base-100: #d7ccc8;
    --rz-base-200: #bcaaa4;
    --rz-base-300: #a1887f;
    --rz-base-400: #8d6e63;
    --rz-base-500: #795548;
    --rz-base-600: #6d4c41;
    --rz-base-700: #5d4037;
    --rz-base-800: #4e342e;
    --rz-base-900: #3e2723;
    --rz-base-light: #d7ccc8;
    --rz-base-lighter: #ffffff;
    --rz-base-dark: #5d4037;
    --rz-base-darker: #000000;
    --rz-primary: #ff504d;
    --rz-primary-light: #ff7370;
    --rz-primary-dark: #cc403d;
    --rz-primary-darker: #ad3634;
    --rz-primary-lighter: rgba(255,80,77,0.12);
    --rz-secondary: #00bcd4;
    --rz-secondary-light: #33c9dc;
    --rz-secondary-dark: #0096a9;
    --rz-secondary-darker: #007f90;
    --rz-secondary-lighter: rgba(0,188,212,0.12);
    --rz-info: #2196f3;
    --rz-info-light: #64b5f6;
    --rz-info-lighter: rgba(30, 147, 243, 0.2);
    --rz-info-dark: #1565c0;
    --rz-info-darker: #0d47a1;
    --rz-success: #4caf50;
    --rz-success-light: #81c784;
    --rz-success-lighter: rgba(76, 175, 79, 0.2);
    --rz-success-dark: #2e7d31;
    --rz-success-darker: #1b5e20;
    --rz-warning: #ff9800;
    --rz-warning-light: #ffb74d;
    --rz-warning-lighter: rgba(255, 152, 0, 0.2);
    --rz-warning-dark: #f57c00;
    --rz-warning-darker: #e65100;
    --rz-danger: #f44336;
    --rz-danger-light: #e57272;
    --rz-danger-lighter: rgba(244, 67, 54, 0.2);
    --rz-danger-dark: #d32f2f;
    --rz-danger-darker: #b71b1b;
    --rz-on-base: #ffffff;
    --rz-on-base-light: #3e2723;
    --rz-on-base-lighter: #3e2723;
    --rz-on-base-dark: #ffffff;
    --rz-on-base-darker: #ffffff;
    --rz-on-primary: #ffffff;
    --rz-on-primary-lighter: #ff504d;
    --rz-on-primary-light: #ffffff;
    --rz-on-primary-dark: #ffffff;
    --rz-on-primary-darker: #ffffff;
    --rz-on-secondary: #ffffff;
    --rz-on-secondary-lighter: #00bcd4;
    --rz-on-secondary-light: #ffffff;
    --rz-on-secondary-dark: #ffffff;
    --rz-on-secondary-darker: #ffffff;
    --rz-on-info: #ffffff;
    --rz-on-info-lighter: #2196f3;
    --rz-on-info-light: #ffffff;
    --rz-on-info-dark: #ffffff;
    --rz-on-info-darker: #ffffff;
    --rz-on-success: #ffffff;
    --rz-on-success-lighter: #4caf50;
    --rz-on-success-light: #ffffff;
    --rz-on-success-dark: #ffffff;
    --rz-on-success-darker: #ffffff;
    --rz-on-warning: #ffffff;
    --rz-on-warning-lighter: #ff9800;
    --rz-on-warning-light: #ffffff;
    --rz-on-warning-dark: #ffffff;
    --rz-on-warning-darker: #ffffff;
    --rz-on-danger: #ffffff;
    --rz-on-danger-lighter: #f44336;
    --rz-on-danger-light: #ffffff;
    --rz-on-danger-dark: #ffffff;
    --rz-on-danger-darker: #ffffff;
}

:root:has(.rz-blazor-studio.rz-material3) {
    --rz-primary: #534eeb;
    --rz-base: #e0dfec;
    --rz-base-50: #f8f8fb;
    --rz-base-100: #f4f3f9;
    --rz-base-200: #e3e3f3;
    --rz-base-300: #e0dfec;
    --rz-base-400: #dbdbe6;
    --rz-base-500: #d7d7e0;
    --rz-base-600: #c7c6d2;
    --rz-base-700: #75747e;
    --rz-base-800: #45454f;
    --rz-base-900: #1b1b20;
    --rz-base-light: #f4f3f9;
    --rz-base-lighter: #fff;
    --rz-base-dark: #45454f;
    --rz-base-darker: #1b1b20;
    --rz-on-base: #1b1b20;
    --rz-on-base-light: #1b1b20;
    --rz-on-base-lighter: #1b1b20;
    --rz-on-base-dark: #fff;
    --rz-on-base-darker: #f8f8fb;
    --rz-primary-light: #bfbcff;
    --rz-primary-lighter: rgba(8,0,255,0.13);
    --rz-primary-dark: #3b378b;
    --rz-primary-darker: #0b005d;
    --rz-on-primary: #fff;
    --rz-on-primary-light: #0b005d;
    --rz-on-primary-lighter: #0b005d;
    --rz-on-primary-dark: #fff;
    --rz-on-primary-darker: #bfbcff;
}

/* DK app shell themes */
:root {
    --dk-radius: 8px;
    --dk-bg: #f5f7fb;
    --dk-bg-strong: #eef2f8;
    --dk-sidebar: #ffffff;
    --dk-header: #ffffff;
    --dk-surface: #ffffff;
    --dk-surface-2: #f8fafc;
    --dk-surface-3: #f1f5f9;
    --dk-border: #d8e0ea;
    --dk-border-soft: #e6ebf2;
    --dk-text: #172033;
    --dk-muted: #5c6b80;
    --dk-muted-strong: #3e4b5f;
    --dk-accent: #336dca;
    --dk-accent-strong: #2559ad;
    --dk-accent-soft: #e7f0ff;
    --dk-success: #12805c;
    --dk-danger: #c23b3b;
    --dk-warning: #99680f;
    --dk-grid-header: #f3f6fa;
    --dk-grid-row: #ffffff;
    --dk-grid-row-alt: #fbfcfe;
    --dk-grid-hover: #eef5ff;
    --dk-focus: 0 0 0 3px rgba(51, 109, 202, 0.24);
    --rz-primary: var(--dk-accent);
    --rz-primary-dark: var(--dk-accent-strong);
    --rz-primary-lighter: var(--dk-accent-soft);
    --rz-body-background-color: var(--dk-bg);
    --rz-text-color: var(--dk-text);
    --rz-text-secondary-color: var(--dk-muted);
}

html[data-dk-theme="dark"] {
    color-scheme: dark;
    --dk-bg: #070b12;
    --dk-bg-strong: #0a111d;
    --dk-sidebar: #08101b;
    --dk-header: #0a111d;
    --dk-surface: #0d1624;
    --dk-surface-2: #111d2e;
    --dk-surface-3: #17263a;
    --dk-border: #26364c;
    --dk-border-soft: #1c2a3e;
    --dk-text: #e7edf7;
    --dk-muted: #9dabc0;
    --dk-muted-strong: #c0cad9;
    --dk-accent: #6ea0ff;
    --dk-accent-strong: #9bbcff;
    --dk-accent-soft: rgba(110, 160, 255, 0.16);
    --dk-success: #55d6a9;
    --dk-danger: #ff7b7b;
    --dk-warning: #ffd166;
    --dk-grid-header: #142033;
    --dk-grid-row: #0b1320;
    --dk-grid-row-alt: #0d1726;
    --dk-grid-hover: #13243a;
    --dk-focus: 0 0 0 3px rgba(110, 160, 255, 0.34);
    --rz-primary: var(--dk-accent);
    --rz-primary-light: #8db5ff;
    --rz-primary-lighter: var(--dk-accent-soft);
    --rz-primary-dark: #4c7fe2;
    --rz-link-color: #9bbcff;
    --rz-link-hover-color: #c5d6ff;
    --rz-body-background-color: var(--dk-bg);
    --rz-text-color: var(--dk-text);
    --rz-text-secondary-color: var(--dk-muted);
    --rz-text-disabled-color: #738197;
    --rz-base-50: #0b1320;
    --rz-base-100: #111d2e;
    --rz-base-200: #17263a;
    --rz-base-300: #26364c;
    --rz-base-400: #40536e;
    --rz-base-500: #6c7d94;
    --rz-base-600: #93a0b2;
    --rz-base-700: #bcc6d4;
    --rz-base-800: #dde5ef;
    --rz-base-900: #f3f7ff;
    --rz-on-base: var(--dk-text);
}

html[data-dk-theme="light"] {
    color-scheme: light;
}

html,
body {
    background: var(--dk-bg);
    color: var(--dk-text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
    overflow: hidden;
}

.dk-shell {
    --rz-panel-menu-item-padding: 0.625rem 0.875rem;
}

.dk-shell .rz-layout {
    background: var(--dk-bg);
}

.dk-shell .rz-header,
.dk-shell .rz-sidebar {
    background: var(--dk-header);
    border-color: var(--dk-border);
    box-shadow: none;
}

.dk-shell .rz-header {
    min-height: 56px;
    border-bottom: 1px solid var(--dk-border);
}

.dk-header-row {
    min-height: 56px;
    padding: 0 1.5rem;
}

.dk-header-title {
    color: var(--dk-muted-strong);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0;
}

.dk-top-actions {
    gap: 0.5rem;
}

.dk-shell .rz-sidebar {
    width: 216px;
    background: var(--dk-sidebar);
    border-right: 1px solid var(--dk-border);
}

.dk-sidebar-brand {
    padding: 1.25rem 1rem 1rem;
    border-bottom: 1px solid var(--dk-border-soft);
}

.dk-sidebar-footer {
    margin-top: auto;
    padding: 1.25rem 1rem;
    border-top: 1px solid var(--dk-border-soft);
}

.dk-body,
.dk-shell .rz-body {
    background: var(--dk-bg);
}

.dk-content {
    width: min(100%, 1600px);
    min-height: calc(100vh - 56px);
    padding: 1.25rem 1.5rem 2rem;
}

.dk-content > .rz-col {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.dk-page-title {
    margin: 0;
    color: var(--dk-text);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.2;
    text-wrap: balance;
}

.dk-section-title {
    margin: 0;
    color: var(--dk-text);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.25;
    text-wrap: balance;
}

.dk-section-note {
    margin: -0.5rem 0 0;
    color: var(--dk-muted);
    font-size: 0.875rem;
}

.dk-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.25rem;
}

.dk-status-row {
    display: grid;
    grid-template-columns: minmax(80px, max-content) minmax(180px, 420px);
    align-items: center;
    gap: 0.75rem;
    margin: 0;
}

.dk-status-row label,
.dk-toolbar .rz-label {
    margin: 0;
    color: var(--dk-muted);
    font-size: 0.875rem;
    font-weight: 600;
}

.dk-status-input,
.dk-status-input:read-only {
    height: 34px;
    background: var(--dk-surface-2);
    color: var(--dk-text);
    border: 1px solid var(--dk-border);
    border-radius: var(--dk-radius);
    box-shadow: none;
}

.dk-metrics {
    display: flex;
}

.dk-metric-card.rz-card {
    min-width: 132px;
    padding: 0.75rem 0.875rem;
    background: var(--dk-surface);
    border: 1px solid var(--dk-border);
    border-radius: var(--dk-radius);
    box-shadow: none;
}

.dk-metric-card .rz-text-caption {
    margin: 0 0 0.25rem;
    color: var(--dk-muted);
    font-size: 0.75rem;
    font-weight: 650;
    line-height: 1.2;
}

.dk-metric-card .rz-text-h6 {
    margin: 0;
    color: var(--dk-text);
    font-size: 1.125rem;
    font-weight: 750;
    line-height: 1.25;
}

.dk-grid.rz-data-grid {
    background: var(--dk-surface);
    border: 1px solid var(--dk-border);
    border-radius: var(--dk-radius);
    box-shadow: none;
    overflow: hidden;
}

.dk-grid .rz-grid-table,
.dk-grid .rz-datatable-scrollable,
.dk-grid .rz-datatable-data {
    background: var(--dk-surface);
    color: var(--dk-text);
}

.dk-grid .rz-grid-table thead th,
.dk-grid .rz-data-grid thead th,
.dk-grid .rz-column-title {
    background: var(--dk-grid-header);
    color: var(--dk-muted-strong);
    border-color: var(--dk-border);
    font-size: 0.78125rem;
    font-weight: 700;
    line-height: 1.2;
}

.dk-grid .rz-grid-table td,
.dk-grid .rz-grid-table th,
.dk-grid.rz-data-grid td,
.dk-grid.rz-data-grid th {
    height: 32px;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    border-color: var(--dk-border-soft);
    color: var(--dk-text);
    font-size: 0.8125rem;
}

.dk-grid .rz-grid-table tbody tr td,
.dk-grid.rz-data-grid tbody tr td {
    background: var(--dk-grid-row);
    background-color: var(--dk-grid-row);
}

.dk-grid .rz-grid-table tbody tr:nth-child(odd) td,
.dk-grid.rz-data-grid tbody tr:nth-child(odd) td {
    background: var(--dk-grid-row-alt);
    background-color: var(--dk-grid-row-alt);
}

.dk-grid .rz-grid-table tbody tr:hover td,
.dk-grid.rz-data-grid tbody tr:hover td {
    background: var(--dk-grid-hover);
    background-color: var(--dk-grid-hover);
}

html[data-dk-theme] .dk-grid .rz-grid-table tbody tr.rz-data-row td,
html[data-dk-theme] .dk-grid.rz-data-grid tbody tr.rz-data-row td {
    background-color: var(--dk-grid-row) !important;
}

html[data-dk-theme] .dk-grid .rz-grid-table tbody tr.rz-data-row:nth-child(odd) td,
html[data-dk-theme] .dk-grid.rz-data-grid tbody tr.rz-data-row:nth-child(odd) td {
    background-color: var(--dk-grid-row-alt) !important;
}

html[data-dk-theme] .dk-grid .rz-grid-table tbody tr.rz-data-row:hover td,
html[data-dk-theme] .dk-grid.rz-data-grid tbody tr.rz-data-row:hover td {
    background-color: var(--dk-grid-hover) !important;
}

.dk-grid .rz-cell-data {
    color: inherit;
}

.dk-toolbar {
    width: fit-content;
    padding: 0.625rem 0.75rem;
    background: var(--dk-surface);
    border: 1px solid var(--dk-border);
    border-radius: var(--dk-radius);
}

.dk-chart-panel {
    padding: 1rem;
    background: var(--dk-surface);
    border: 1px solid var(--dk-border);
    border-radius: var(--dk-radius);
}

.dk-runtime {
    margin: 0;
    color: var(--dk-muted);
    font-size: 0.875rem;
    font-weight: 600;
}

.dk-theme-toggle.rz-button,
.dk-action-button {
    min-height: 34px;
    border: 1px solid var(--dk-border);
    border-radius: var(--dk-radius);
    background: var(--dk-surface-2);
    color: var(--dk-text);
    box-shadow: none;
    font-weight: 650;
}

.dk-theme-toggle.rz-button:hover,
.dk-action-button:hover {
    background: var(--dk-accent-soft);
    border-color: var(--dk-accent);
    color: var(--dk-accent-strong);
}

.dk-action-button {
    padding: 0.375rem 0.75rem;
}

.dk-shell .rz-sidebar-toggle {
    color: var(--dk-muted-strong);
}

.dk-shell .rz-panel-menu,
.dk-shell .rz-panel-menu .rz-navigation-item,
.dk-shell .rz-panel-menu .rz-navigation-item-wrapper {
    background: transparent;
}

.dk-shell .rz-panel-menu {
    padding: 0.75rem;
}

.dk-shell .rz-panel-menu .rz-navigation-item-link {
    min-height: 42px;
    margin: 0.125rem 0;
    color: var(--dk-muted-strong);
    border-radius: var(--dk-radius);
    font-size: 0.875rem;
    font-weight: 650;
    transition: background-color 160ms ease-out, color 160ms ease-out;
}

.dk-shell .rz-panel-menu .rz-navigation-item-icon {
    color: currentColor;
    font-size: 1.25rem;
}

.dk-shell .rz-panel-menu .rz-navigation-item-link:hover {
    background: var(--dk-surface-3);
    color: var(--dk-text);
}

.dk-shell .rz-panel-menu .rz-navigation-item-active > .rz-navigation-item-wrapper .rz-navigation-item-link {
    background: var(--dk-accent-soft);
    color: var(--dk-accent-strong);
}

.rz-tabs {
    color: var(--dk-text);
}

.rz-tabview,
.rz-tabs-tabpanel {
    background: transparent;
    border-color: var(--dk-border);
}

.rz-tabview-nav {
    border-bottom-color: var(--dk-border);
    gap: 0.25rem;
}

.rz-tabview-nav li {
    margin: 0;
    border: 0;
    border-radius: var(--dk-radius) var(--dk-radius) 0 0;
    background: transparent;
}

.rz-tabview-nav li button,
.rz-tabview-nav li a,
.rz-tabview-nav li .rz-tabview-title {
    color: var(--dk-muted-strong);
    border: 0;
    background: transparent;
    font-weight: 650;
}

.rz-tabview-nav li button,
.rz-tabview-nav li a {
    padding: 0.625rem 0.875rem;
    color: var(--dk-muted-strong);
    border-radius: var(--dk-radius) var(--dk-radius) 0 0;
}

.rz-tabview-nav li:hover button,
.rz-tabview-nav li:hover a {
    background: var(--dk-surface-2);
}

.rz-tabview-nav li.rz-tabview-selected {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.rz-tabview-nav li.rz-state-focused {
    box-shadow: none;
}

.rz-tabview-nav li.rz-tabview-selected button,
.rz-tabview-nav li.rz-tabview-selected a {
    background: var(--dk-surface);
    border: 1px solid var(--dk-border);
    border-bottom-color: var(--dk-surface);
    color: var(--dk-accent-strong);
}

.rz-tabview-nav li.rz-state-focused button {
    box-shadow: inset 0 0 0 2px rgba(51, 109, 202, 0.28);
}

.rz-tabview-selected a,
.rz-tabview-selected button,
.rz-tabview-selected .rz-tabview-title {
    color: var(--dk-accent-strong);
}

.rz-badge {
    border-radius: 999px;
    font-weight: 700;
}

.rz-alert,
.rz-dialog,
.rz-profile-menu {
    background: var(--dk-surface);
    border-color: var(--dk-border);
    color: var(--dk-text);
}

.form-control,
.rz-inputtext,
.rz-dropdown,
input,
textarea,
select {
    background: var(--dk-surface);
    color: var(--dk-text);
    border-color: var(--dk-border);
    border-radius: var(--dk-radius);
}

.form-control:focus,
.rz-inputtext:focus,
.rz-state-focused,
.rz-button:focus-visible,
.btn:focus-visible {
    box-shadow: var(--dk-focus);
    outline: none;
}

@media (max-width: 900px) {
    .dk-header-title {
        display: none;
    }

    .dk-content {
        padding: 1rem;
    }

    .dk-status-row {
        grid-template-columns: 1fr;
    }

    .dk-metric-card.rz-card {
        min-width: calc(50% - 0.5rem);
    }
}

@media (max-width: 700px) {
    .dk-shell .rz-sidebar {
        width: 72px !important;
        min-width: 72px;
    }

    .dk-sidebar-brand {
        padding: 1rem 0.75rem;
    }

    .dk-sidebar-brand p,
    .dk-sidebar-brand span,
    .dk-sidebar-brand .rz-text,
    .dk-sidebar-footer,
    .dk-shell .rz-panel-menu .rz-navigation-item-text {
        display: none !important;
    }

    .dk-shell .rz-panel-menu {
        padding: 0.5rem;
    }

    .dk-shell .rz-panel-menu .rz-navigation-item-link {
        justify-content: center;
        min-height: 40px;
        padding: 0.625rem;
    }

    .dk-shell .rz-panel-menu .rz-navigation-item-icon {
        margin: 0;
    }
}

@media (max-width: 560px) {
    .dk-header-row {
        padding: 0 0.75rem;
    }

    .dk-theme-toggle.rz-button .rz-button-text {
        display: none;
    }

    .dk-metric-card.rz-card {
        min-width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dk-shell .rz-panel-menu .rz-navigation-item-link {
        transition: none;
    }
}

/* MLSCA appearance layer. This intentionally comes after the old DK theme block. */
:root {
    color-scheme: light;
    --font-sans: "Geist", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --radius: 8px;
    --background: oklch(0.982 0 0);
    --foreground: oklch(0.16 0 0);
    --card: oklch(1 0 0);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.16 0 0);
    --primary: oklch(0.18 0 0);
    --primary-foreground: oklch(0.985 0 0);
    --muted: oklch(0.955 0 0);
    --muted-foreground: oklch(0.48 0 0);
    --destructive: oklch(0.577 0.245 27.325);
    --success: oklch(0.66 0.18 153);
    --warning: oklch(0.73 0.16 72);
    --border: oklch(0.89 0 0);
    --ring: oklch(0.62 0 0);
    --app-bg-image: url("/backgrounds/theme-mono.svg");
    --app-bg-accent: linear-gradient(transparent, transparent);
    --app-shell-bg:
        var(--app-bg-accent),
        radial-gradient(circle at 88% 8%, color-mix(in oklab, var(--primary) 10%, transparent), transparent 34rem),
        linear-gradient(180deg, color-mix(in oklab, var(--background) 78%, transparent), color-mix(in oklab, var(--background) 70%, transparent)),
        var(--app-bg-image);
    --app-sidebar-bg: color-mix(in oklab, var(--card) 96%, var(--muted) 4%);
    --app-header-bg: color-mix(in oklab, var(--card) 96%, var(--muted) 4%);
    --app-card-bg: var(--card);
    --app-card-ring: color-mix(in oklab, var(--foreground) 10%, transparent);
    --app-card-shadow: 0 1px 2px color-mix(in oklab, var(--foreground) 12%, transparent);
    --app-control-bg: color-mix(in oklab, var(--muted) 46%, var(--card) 54%);
    --app-control-hover: color-mix(in oklab, var(--muted) 78%, var(--card) 22%);
    --app-panel-blur: none;
    --app-panel-edge: var(--border);
    --app-chart-surface-bg: color-mix(in oklab, var(--card) 96%, var(--background) 4%);
    --app-grid-header: color-mix(in oklab, var(--muted) 70%, var(--card) 30%);
    --app-grid-row: color-mix(in oklab, var(--card) 98%, var(--background) 2%);
    --app-grid-row-alt: color-mix(in oklab, var(--muted) 34%, var(--card) 66%);
    --app-grid-hover: color-mix(in oklab, var(--primary) 10%, var(--card) 90%);
    --app-focus-ring: 0 0 0 3px color-mix(in oklab, var(--ring) 46%, transparent);
    --dk-radius: var(--radius);
    --dk-bg: var(--background);
    --dk-sidebar: var(--app-sidebar-bg);
    --dk-header: var(--app-header-bg);
    --dk-surface: var(--app-card-bg);
    --dk-surface-2: var(--app-control-bg);
    --dk-surface-3: var(--app-control-hover);
    --dk-border: var(--border);
    --dk-border-soft: color-mix(in oklab, var(--border) 72%, transparent);
    --dk-text: var(--foreground);
    --dk-muted: var(--muted-foreground);
    --dk-muted-strong: color-mix(in oklab, var(--foreground) 72%, transparent);
    --dk-accent: var(--primary);
    --dk-accent-strong: var(--primary);
    --dk-accent-soft: color-mix(in oklab, var(--primary) 14%, transparent);
    --dk-grid-header: var(--app-grid-header);
    --dk-grid-row: var(--app-grid-row);
    --dk-grid-row-alt: var(--app-grid-row-alt);
    --dk-grid-hover: var(--app-grid-hover);
    --dk-focus: var(--app-focus-ring);
    --rz-primary: var(--primary);
    --rz-primary-dark: color-mix(in oklab, var(--primary) 88%, var(--foreground) 12%);
    --rz-primary-light: color-mix(in oklab, var(--primary) 74%, white 26%);
    --rz-primary-lighter: color-mix(in oklab, var(--primary) 14%, transparent);
    --rz-on-primary: var(--primary-foreground);
    --rz-body-background-color: var(--background);
    --rz-text-color: var(--foreground);
    --rz-text-secondary-color: var(--muted-foreground);
    --rz-border-color: var(--border);
    --rz-grid-header-background-color: var(--app-grid-header);
    --rz-grid-hover-background-color: var(--app-grid-hover);
    --rz-card-border-radius: var(--radius);
    --rz-button-border-radius: var(--radius);
    --rz-text-font-family: var(--font-sans);
    --rz-body-font-size: 13px;
    --rz-body-line-height: 1.45;
}

html[data-theme="pink-purple"] {
    color-scheme: dark;
    --app-bg-image: url("/backgrounds/theme-pink-purple.svg");
    --background: oklch(0.235 0.044 315);
    --foreground: oklch(0.988 0.024 325);
    --card: oklch(0.305 0.058 315);
    --popover: oklch(0.29 0.064 315);
    --popover-foreground: oklch(0.972 0.026 325);
    --primary: oklch(0.72 0.225 286);
    --primary-foreground: oklch(0.985 0.018 305);
    --muted: oklch(0.365 0.058 305);
    --muted-foreground: oklch(0.86 0.045 320);
    --destructive: oklch(0.69 0.22 22);
    --border: oklch(0.58 0.09 305 / 68%);
    --ring: oklch(0.72 0.225 286 / 82%);
}

html[data-theme="neon-green"] {
    color-scheme: dark;
    --app-bg-image: url("/backgrounds/theme-neon-green.svg");
    --background: oklch(0.195 0.028 158);
    --foreground: oklch(0.985 0.052 154);
    --card: oklch(0.255 0.04 158);
    --popover: oklch(0.235 0.045 158);
    --popover-foreground: oklch(0.985 0.052 154);
    --primary: oklch(0.92 0.245 153);
    --primary-foreground: oklch(0.11 0.03 158);
    --muted: oklch(0.365 0.052 158);
    --muted-foreground: oklch(0.875 0.062 154);
    --destructive: oklch(0.7 0.21 25);
    --border: oklch(0.62 0.13 154 / 64%);
    --ring: oklch(0.92 0.245 153 / 84%);
}

html[data-theme="cornflower-blue"] {
    color-scheme: dark;
    --app-bg-image: url("/backgrounds/theme-cornflower-blue.svg");
    --background: oklch(0.205 0.045 262);
    --foreground: oklch(0.982 0.025 245);
    --card: oklch(0.265 0.06 263);
    --popover: oklch(0.245 0.066 263);
    --popover-foreground: oklch(0.975 0.025 245);
    --primary: oklch(0.66 0.185 265);
    --primary-foreground: oklch(0.985 0.018 245);
    --muted: oklch(0.325 0.06 263);
    --muted-foreground: oklch(0.82 0.045 255);
    --destructive: oklch(0.7 0.21 25);
    --border: oklch(0.52 0.09 262 / 68%);
    --ring: oklch(0.66 0.185 265 / 84%);
}

html[data-background="season-spring"] {
    --app-bg-image: url("/backgrounds/bg-season-spring.svg");
    --app-bg-accent:
        radial-gradient(ellipse at 70% 24%, rgb(244 114 182 / 34%), transparent 26rem),
        radial-gradient(ellipse at 38% 72%, rgb(74 222 128 / 25%), transparent 28rem);
}

html[data-background="season-summer"] {
    --app-bg-image: url("/backgrounds/bg-season-summer.svg");
    --app-bg-accent:
        radial-gradient(ellipse at 72% 30%, rgb(251 191 36 / 32%), transparent 28rem),
        radial-gradient(ellipse at 30% 70%, rgb(6 182 212 / 28%), transparent 30rem);
}

html[data-background="season-autumn"] {
    --app-bg-image: url("/backgrounds/bg-season-autumn.svg");
    --app-bg-accent:
        radial-gradient(ellipse at 72% 28%, rgb(249 115 22 / 34%), transparent 28rem),
        radial-gradient(ellipse at 32% 76%, rgb(185 28 28 / 25%), transparent 30rem);
}

html[data-background="season-winter"] {
    --app-bg-image: url("/backgrounds/bg-season-winter.svg");
    --app-bg-accent:
        radial-gradient(ellipse at 70% 26%, rgb(147 197 253 / 32%), transparent 28rem),
        radial-gradient(ellipse at 34% 74%, rgb(226 232 240 / 22%), transparent 30rem);
}

html[data-background="landscape-alpine"] {
    --app-bg-image: url("/backgrounds/bg-landscape-alpine.svg");
    --app-bg-accent:
        radial-gradient(ellipse at 70% 30%, rgb(96 165 250 / 30%), transparent 28rem),
        radial-gradient(ellipse at 30% 76%, rgb(34 197 94 / 25%), transparent 30rem);
}

html[data-background="landscape-coast"] {
    --app-bg-image: url("/backgrounds/bg-landscape-coast.svg");
    --app-bg-accent:
        radial-gradient(ellipse at 68% 30%, rgb(45 212 191 / 32%), transparent 28rem),
        radial-gradient(ellipse at 32% 76%, rgb(14 165 233 / 25%), transparent 30rem);
}

html[data-background="landscape-desert"] {
    --app-bg-image: url("/backgrounds/bg-landscape-desert.svg");
    --app-bg-accent:
        radial-gradient(ellipse at 68% 30%, rgb(251 146 60 / 36%), transparent 28rem),
        radial-gradient(ellipse at 34% 76%, rgb(168 85 247 / 24%), transparent 30rem);
}

html[data-background="landscape-aurora"] {
    --app-bg-image: url("/backgrounds/bg-landscape-aurora.svg");
    --app-bg-accent:
        linear-gradient(118deg, transparent 8%, rgb(34 197 94 / 34%) 34%, rgb(56 189 248 / 25%) 50%, rgb(168 85 247 / 26%) 64%, transparent 86%),
        radial-gradient(ellipse at 70% 28%, rgb(34 197 94 / 42%), transparent 28rem),
        radial-gradient(ellipse at 36% 72%, rgb(168 85 247 / 28%), transparent 30rem);
}

html[data-surface="liquid-glass"] {
    --app-shell-bg:
        var(--app-bg-accent),
        radial-gradient(circle at 18% 8%, color-mix(in oklab, white 12%, transparent), transparent 28rem),
        radial-gradient(circle at 84% 14%, color-mix(in oklab, var(--primary) 18%, transparent), transparent 34rem),
        linear-gradient(180deg, color-mix(in oklab, var(--background) 8%, transparent), color-mix(in oklab, var(--background) 4%, transparent)),
        var(--app-bg-image);
    --app-sidebar-bg: color-mix(in oklab, var(--card) 10%, transparent);
    --app-header-bg: color-mix(in oklab, var(--card) 9%, transparent);
    --app-card-bg: color-mix(in oklab, var(--card) 10%, transparent);
    --app-card-ring: color-mix(in oklab, white 24%, var(--foreground) 8%);
    --app-card-shadow: 0 18px 46px color-mix(in oklab, black 18%, transparent);
    --app-control-bg: color-mix(in oklab, var(--card) 20%, transparent);
    --app-control-hover: color-mix(in oklab, white 12%, var(--muted) 18%);
    --app-panel-blur: blur(14px) saturate(1.28);
    --app-panel-edge: color-mix(in oklab, white 28%, var(--foreground) 8%);
    --app-chart-surface-bg: color-mix(in oklab, var(--card) 46%, transparent);
}

html,
body {
    background: var(--background);
    color: var(--foreground);
    font-family: var(--font-sans);
}

body {
    overflow: hidden;
}

button,
input,
select,
textarea {
    letter-spacing: 0;
}

.dk-shell.rz-layout,
.dk-shell {
    position: relative;
    display: grid;
    grid-template-areas: "rz-sidebar rz-header" "rz-sidebar rz-body" !important;
    grid-template-columns: var(--dk-sidebar-width, 236px) minmax(0, 1fr);
    grid-template-rows: 64px minmax(0, 1fr);
    min-height: 100vh;
    height: 100vh;
    overflow: hidden;
    color: var(--foreground);
    background: var(--app-shell-bg);
    background-position: center;
    background-size: cover;
}

.dk-shell .rz-header,
.dk-shell .rz-sidebar,
.dk-metric-card.rz-card,
.dk-toolbar,
.dk-chart-panel,
.dk-grid.rz-data-grid {
    border: 1px solid var(--app-panel-edge);
    background: var(--app-card-bg);
    backdrop-filter: var(--app-panel-blur);
    -webkit-backdrop-filter: var(--app-panel-blur);
    box-shadow: var(--app-card-shadow);
}

html[data-surface="liquid-glass"] .dk-shell .rz-header,
html[data-surface="liquid-glass"] .dk-shell .rz-sidebar,
html[data-surface="liquid-glass"] .dk-metric-card.rz-card,
html[data-surface="liquid-glass"] .dk-toolbar,
html[data-surface="liquid-glass"] .dk-chart-panel,
html[data-surface="liquid-glass"] .dk-grid.rz-data-grid {
    background-image:
        linear-gradient(135deg, color-mix(in oklab, white 16%, transparent), transparent 38%),
        radial-gradient(circle at 20% 0%, color-mix(in oklab, white 12%, transparent), transparent 18rem);
}

.dk-shell .rz-header {
    grid-area: rz-header;
    min-height: 64px;
    border-width: 0 0 1px;
    border-radius: 0;
    background-color: var(--app-header-bg);
}

.dk-header-row {
    min-height: 64px;
    padding: 0 20px;
}

.dk-header-title {
    overflow: hidden;
    color: var(--muted-foreground);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dk-top-actions {
    min-width: 0;
    gap: 10px;
}

.dk-appearance-select.rz-dropdown {
    width: 160px;
    min-height: 30px;
    border-color: color-mix(in oklab, var(--border) 70%, transparent);
    background: var(--app-control-bg);
    color: var(--foreground);
    font-size: 13px;
}

.dk-appearance-select-wide.rz-dropdown {
    width: 176px;
}

.dk-shell .rz-sidebar {
    grid-area: rz-sidebar;
    width: var(--dk-sidebar-width, 236px) !important;
    min-width: var(--dk-sidebar-width, 236px);
    max-height: 100vh;
    overflow: hidden;
    border-width: 0 1px 0 0;
    border-radius: 0;
    background-color: var(--app-sidebar-bg);
}

.dk-shell .rz-sidebar.dk-sidebar-collapsed {
    --dk-sidebar-width: 72px;
}

.dk-shell .rz-sidebar.dk-sidebar-collapsed .dk-sidebar-brand p,
.dk-shell .rz-sidebar.dk-sidebar-collapsed .dk-sidebar-brand span,
.dk-shell .rz-sidebar.dk-sidebar-collapsed .dk-sidebar-brand .rz-text,
.dk-shell .rz-sidebar.dk-sidebar-collapsed .dk-sidebar-footer,
.dk-shell .rz-sidebar.dk-sidebar-collapsed .rz-panel-menu .rz-navigation-item-text {
    display: none !important;
}

.dk-sidebar-brand,
.dk-sidebar-footer {
    border-color: color-mix(in oklab, var(--border) 72%, transparent);
}

.dk-shell .rz-body {
    grid-area: rz-body;
    min-width: 0;
    min-height: 0;
    background: transparent;
    overflow: auto;
}

.dk-content {
    width: min(100%, 1800px);
    min-height: calc(100vh - 64px);
    padding: 20px 20px 120px;
}

.dk-content > .rz-col {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1rem;
}

.dk-page-title,
.dk-section-title {
    margin: 0;
    color: var(--foreground);
    font-weight: 700;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.dk-page-title {
    font-size: 15px;
    line-height: 1.2;
}

.dk-section-title {
    font-size: 13px;
    line-height: 1.25;
}

.dk-section-note,
.dk-runtime {
    margin: 0;
    color: var(--muted-foreground);
    font-size: 12px;
    font-weight: 600;
}

.dk-section-note {
    margin-top: -0.5rem;
}

.dk-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.dk-status-row {
    display: grid;
    grid-template-columns: minmax(80px, max-content) minmax(180px, 420px);
    align-items: center;
    gap: 0.75rem;
    margin: 0;
}

.dk-status-row label,
.dk-toolbar .rz-label {
    margin: 0;
    color: var(--muted-foreground);
    font-size: 12px;
    font-weight: 700;
}

.dk-status-input,
.dk-status-input:read-only,
.form-control,
.rz-inputtext,
.rz-dropdown,
input,
textarea,
select {
    min-height: 32px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--app-control-bg);
    color: var(--foreground);
    box-shadow: none;
}

.dk-metric-card.rz-card {
    min-width: 132px;
    padding: 12px;
    border-radius: var(--radius);
}

.dk-metric-card .rz-text-caption {
    margin: 0 0 0.25rem;
    color: var(--muted-foreground);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

.dk-metric-card .rz-text-h6 {
    margin: 0;
    color: var(--foreground);
    font-size: 18px;
    font-weight: 750;
    line-height: 1.25;
}

.dk-toolbar {
    width: fit-content;
}

.dk-chart-panel {
    width: 100%;
    background: var(--app-chart-surface-bg);
}

.dk-action-button {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--app-control-bg);
    color: var(--foreground);
    box-shadow: var(--app-card-shadow);
    font-weight: 650;
}

.dk-action-button:hover {
    border-color: var(--primary);
    background: var(--app-control-hover);
    color: var(--foreground);
}

.dk-shell .rz-sidebar-toggle {
    color: var(--muted-foreground);
}

.dk-shell .rz-panel-menu,
.dk-shell .rz-panel-menu .rz-navigation-item,
.dk-shell .rz-panel-menu .rz-navigation-item-wrapper {
    background: transparent;
}

.dk-shell .rz-panel-menu .rz-navigation-item-link {
    min-height: 42px;
    margin: 0.125rem 0;
    border-radius: var(--radius);
    color: color-mix(in oklab, var(--foreground) 68%, transparent);
    font-size: 13px;
    font-weight: 700;
    transition: background-color 150ms ease, color 150ms ease;
}

.dk-shell .rz-panel-menu .rz-navigation-item-link:hover {
    background: var(--app-control-hover);
    color: var(--foreground);
}

.dk-shell .rz-panel-menu .rz-navigation-item-active > .rz-navigation-item-wrapper .rz-navigation-item-link {
    border: 1px solid color-mix(in oklab, var(--primary) 55%, transparent);
    background: var(--primary);
    color: var(--primary-foreground);
}

.dk-grid.rz-data-grid {
    border-radius: var(--radius);
    background: var(--app-chart-surface-bg);
    overflow: hidden;
}

.dk-grid .rz-grid-table,
.dk-grid .rz-datatable-scrollable,
.dk-grid .rz-datatable-data {
    background: transparent;
    color: var(--foreground);
}

.dk-grid .rz-grid-table thead th,
.dk-grid .rz-data-grid thead th,
.dk-grid .rz-column-title {
    background: var(--app-grid-header);
    color: var(--muted-foreground);
    border-color: color-mix(in oklab, var(--border) 72%, transparent);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
}

.dk-grid .rz-grid-table td,
.dk-grid .rz-grid-table th,
.dk-grid.rz-data-grid td,
.dk-grid.rz-data-grid th {
    height: 32px;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    border-color: color-mix(in oklab, var(--border) 72%, transparent);
    color: var(--foreground);
    font-size: 12px;
}

html[data-theme] .dk-grid .rz-grid-table tbody tr.rz-data-row td,
html[data-theme] .dk-grid.rz-data-grid tbody tr.rz-data-row td {
    background-color: var(--app-grid-row) !important;
}

html[data-theme] .dk-grid .rz-grid-table tbody tr.rz-data-row:nth-child(odd) td,
html[data-theme] .dk-grid.rz-data-grid tbody tr.rz-data-row:nth-child(odd) td {
    background-color: var(--app-grid-row-alt) !important;
}

html[data-theme] .dk-grid .rz-grid-table tbody tr.rz-data-row:hover td,
html[data-theme] .dk-grid.rz-data-grid tbody tr.rz-data-row:hover td {
    background-color: var(--app-grid-hover) !important;
}

.rz-tabview,
.rz-tabs-tabpanel {
    background: transparent;
    border-color: var(--border);
}

.rz-tabview-nav {
    gap: 0.25rem;
    border-bottom-color: var(--border);
}

.rz-tabview-nav li button,
.rz-tabview-nav li a,
.rz-tabview-nav li .rz-tabview-title {
    color: color-mix(in oklab, var(--foreground) 68%, transparent);
    font-weight: 700;
}

.rz-tabview-nav li:hover button,
.rz-tabview-nav li:hover a {
    background: var(--app-control-hover);
}

.rz-tabview-nav li.rz-tabview-selected button,
.rz-tabview-nav li.rz-tabview-selected a {
    border: 1px solid var(--border);
    border-bottom-color: var(--app-card-bg);
    background: var(--app-card-bg);
    color: var(--primary);
}

.rz-alert,
.rz-dialog,
.rz-profile-menu,
.rz-popup,
.rz-dropdown-panel,
.rz-context-menu {
    border-color: var(--border);
    background: var(--popover);
    color: var(--popover-foreground);
}

.form-control:focus,
.rz-inputtext:focus,
.rz-state-focused,
.rz-button:focus-visible,
.btn:focus-visible,
.rz-dropdown:focus-within {
    box-shadow: var(--app-focus-ring);
    outline: none;
}

@media (max-width: 980px) {
    body {
        overflow: auto;
    }

    .dk-shell.rz-layout,
    .dk-shell {
        grid-template-areas: "rz-sidebar" "rz-header" "rz-body" !important;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto minmax(0, 1fr);
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }

    .dk-shell .rz-sidebar {
        width: auto !important;
        min-width: 0;
        max-height: 45vh;
        border-width: 0 0 1px;
    }

    .dk-shell .rz-sidebar.dk-sidebar-collapsed .rz-panel-menu .rz-navigation-item-text {
        display: inline !important;
    }

    .dk-shell .rz-header {
        min-height: 96px;
    }

    .dk-header-row {
        min-height: 96px;
        padding: 12px 16px;
    }

    .dk-header-row > .rz-col:first-child,
    .dk-header-row > .rz-col:last-child,
    .dk-header-row > .rz-col-9,
    .dk-header-row > .rz-col-3 {
        width: 100%;
        flex-basis: 100%;
        max-width: 100%;
    }

    .dk-top-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .dk-appearance-select.rz-dropdown,
    .dk-appearance-select-wide.rz-dropdown {
        width: 100%;
    }

    .dk-shell .rz-body {
        overflow: visible;
    }

    .dk-content {
        min-height: auto;
        padding: 20px 14px 80px;
    }

    .dk-status-row {
        grid-template-columns: 1fr;
    }

    .dk-metric-card.rz-card {
        min-width: calc(50% - 0.5rem);
    }
}

@media (max-width: 560px) {
    .dk-header-title {
        display: none;
    }

    .dk-top-actions {
        grid-template-columns: 1fr;
    }

    .dk-metric-card.rz-card {
        min-width: 100%;
    }
}

@media (min-width: 981px) {
    .dk-header-row {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }

    .dk-header-row > .rz-col:first-child,
    .dk-header-row > .rz-col-9 {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
    }

    .dk-header-row > .rz-col:last-child,
    .dk-header-row > .rz-col-3 {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
    }

    .dk-top-actions {
        flex-wrap: nowrap;
    }
}

.rz-dropdown.dk-appearance-select {
    width: 160px !important;
    flex: 0 0 160px;
}

.rz-dropdown.dk-appearance-select-wide {
    width: 176px !important;
    flex-basis: 176px;
}

.dk-appearance-select .rz-dropdown-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Scratch shell rebuild. Keep this final so it owns the app chrome. */
html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: var(--background);
    color: var(--foreground);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
    line-height: 1.45;
    letter-spacing: 0;
}

body {
    background:
        radial-gradient(circle at 16% 12%, color-mix(in oklab, var(--primary) 12%, transparent), transparent 30rem),
        var(--app-shell-bg);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

button,
input,
select,
textarea {
    font: inherit;
}

.dk-app-shell {
    --dk-sidebar-width: 236px;
    display: grid;
    grid-template-columns: var(--dk-sidebar-width) minmax(0, 1fr);
    width: 100vw;
    height: 100vh;
    min-height: 0;
    color: var(--foreground);
    transition: grid-template-columns 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.dk-app-shell.is-collapsed {
    --dk-sidebar-width: 72px;
}

.dk-app-sidebar {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    padding: 14px 12px;
    border-right: 1px solid var(--app-panel-edge);
    background: color-mix(in oklab, var(--app-sidebar-bg) 92%, transparent);
    backdrop-filter: var(--app-panel-blur);
    -webkit-backdrop-filter: var(--app-panel-blur);
    box-shadow: inset -1px 0 0 color-mix(in oklab, white 8%, transparent);
}

.dk-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    margin-bottom: 18px;
    padding: 4px 6px;
}

.dk-brand img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex: 0 0 auto;
}

.dk-brand-copy {
    min-width: 0;
    display: grid;
    gap: 1px;
}

.dk-brand-copy strong {
    color: var(--foreground);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.1;
}

.dk-brand-copy span,
.dk-sidebar-footer span,
.dk-sidebar-footer small {
    color: color-mix(in oklab, var(--foreground) 58%, transparent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
}

.dk-nav {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.dk-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    height: 38px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: color-mix(in oklab, var(--foreground) 72%, transparent);
    text-decoration: none;
    transition:
        background-color 150ms ease,
        border-color 150ms ease,
        color 150ms ease;
}

.dk-nav-link .rzi {
    width: 20px;
    flex: 0 0 20px;
    font-size: 20px;
    text-align: center;
    color: color-mix(in oklab, var(--foreground) 62%, transparent);
}

.dk-nav-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 800;
}

.dk-nav-link:hover {
    background: color-mix(in oklab, var(--app-control-hover) 76%, transparent);
    color: var(--foreground);
}

.dk-nav-link.active {
    border-color: color-mix(in oklab, var(--primary) 48%, var(--app-panel-edge));
    background: color-mix(in oklab, var(--primary) 14%, var(--app-control-bg));
    color: var(--foreground);
}

.dk-nav-link.active .rzi {
    color: var(--primary);
}

.dk-sidebar-footer {
    margin-top: auto;
    display: grid;
    gap: 2px;
    padding: 12px 8px 4px;
    border-top: 1px solid color-mix(in oklab, var(--app-panel-edge) 74%, transparent);
}

.dk-app-shell.is-collapsed .dk-app-sidebar {
    padding-inline: 10px;
}

.dk-app-shell.is-collapsed .dk-brand {
    justify-content: center;
    padding-inline: 0;
}

.dk-app-shell.is-collapsed .dk-brand-copy,
.dk-app-shell.is-collapsed .dk-nav-text,
.dk-app-shell.is-collapsed .dk-sidebar-footer {
    display: none;
}

.dk-app-shell.is-collapsed .dk-nav-link {
    justify-content: center;
    padding-inline: 0;
}

.dk-app-workspace {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
}

.dk-app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    min-height: 62px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--app-panel-edge);
    background: color-mix(in oklab, var(--app-header-bg) 90%, transparent);
    backdrop-filter: var(--app-panel-blur);
    -webkit-backdrop-filter: var(--app-panel-blur);
}

.dk-header-left {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 12px;
}

.dk-header-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: color-mix(in oklab, var(--foreground) 78%, transparent);
    font-size: 13px;
    font-weight: 700;
}

.dk-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--app-panel-edge);
    border-radius: 8px;
    background: color-mix(in oklab, var(--app-control-bg) 84%, transparent);
    color: var(--foreground);
    cursor: pointer;
    transition:
        background-color 150ms ease,
        border-color 150ms ease,
        transform 150ms ease;
}

.dk-icon-button:hover {
    border-color: color-mix(in oklab, var(--primary) 40%, var(--app-panel-edge));
    background: var(--app-control-hover);
}

.dk-icon-button:active {
    transform: translateY(1px);
}

.dk-icon-button .rzi {
    font-size: 21px;
}

.dk-top-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
}

.dk-appearance-field {
    display: grid;
    grid-template-columns: auto minmax(108px, 132px);
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.dk-appearance-field-wide {
    grid-template-columns: auto minmax(126px, 152px);
}

.dk-appearance-field-theme {
    grid-template-columns: auto minmax(170px, 190px);
}

.dk-appearance-field > span {
    color: color-mix(in oklab, var(--foreground) 60%, transparent);
    font-size: 11px;
    font-weight: 800;
}

.dk-appearance-native {
    width: 100%;
    min-width: 0;
    height: 32px;
    padding: 0 28px 0 10px;
    border: 1px solid var(--app-panel-edge);
    border-radius: 8px;
    appearance: none;
    color: var(--foreground);
    background:
        linear-gradient(45deg, transparent 50%, color-mix(in oklab, var(--foreground) 72%, transparent) 50%) right 13px center / 5px 5px no-repeat,
        linear-gradient(135deg, color-mix(in oklab, var(--foreground) 72%, transparent) 50%, transparent 50%) right 8px center / 5px 5px no-repeat,
        color-mix(in oklab, var(--app-control-bg) 86%, transparent);
    box-shadow: none;
}

.dk-appearance-native:hover {
    border-color: color-mix(in oklab, var(--primary) 36%, var(--app-panel-edge));
    background-color: var(--app-control-hover);
}

.dk-appearance-native:focus-visible,
.dk-icon-button:focus-visible,
.dk-nav-link:focus-visible {
    outline: none;
    box-shadow: var(--app-focus-ring);
}

.dk-app-main {
    min-width: 0;
    min-height: 0;
    overflow: auto;
    padding: 20px;
}

.dk-app-main > * {
    max-width: 1800px;
}

.dk-page-title {
    margin: 0 0 14px;
    color: var(--foreground);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
}

.dk-section-title {
    margin: 18px 0 10px;
    color: var(--foreground);
    font-size: 15px;
    font-weight: 800;
}

.dk-section-note {
    margin: -4px 0 10px;
    color: color-mix(in oklab, var(--foreground) 64%, transparent);
    font-size: 12px;
}

.dk-status-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.dk-status-row label {
    color: color-mix(in oklab, var(--foreground) 66%, transparent);
    font-size: 12px;
    font-weight: 800;
}

.dk-status-input,
.dk-status-input:read-only,
.form-control.dk-status-input {
    min-height: 34px;
    border: 1px solid var(--app-panel-edge);
    border-radius: 8px;
    background: color-mix(in oklab, var(--app-control-bg) 78%, transparent);
    color: var(--foreground);
}

.dk-toolbar,
.dk-chart-panel,
.dk-metric-card.rz-card {
    border: 1px solid var(--app-panel-edge) !important;
    border-radius: 10px !important;
    background: color-mix(in oklab, var(--app-card-bg) 82%, transparent) !important;
    color: var(--foreground) !important;
    box-shadow: none !important;
    backdrop-filter: var(--app-panel-blur);
    -webkit-backdrop-filter: var(--app-panel-blur);
}

.dk-toolbar {
    padding: 8px 10px;
}

.dk-metric-card.rz-card {
    min-width: 152px;
    padding: 10px 12px !important;
}

.dk-metric-card .rz-text-caption {
    color: color-mix(in oklab, var(--foreground) 58%, transparent) !important;
    font-size: 11px;
    font-weight: 800;
}

.dk-metric-card .rz-text-h6 {
    color: var(--foreground) !important;
    font-size: 18px;
    font-weight: 850;
}

.dk-chart-panel {
    padding: 12px;
}

html[data-surface="liquid-glass"] .dk-app-sidebar,
html[data-surface="liquid-glass"] .dk-app-header,
html[data-surface="liquid-glass"] .dk-toolbar,
html[data-surface="liquid-glass"] .dk-chart-panel,
html[data-surface="liquid-glass"] .dk-metric-card.rz-card {
    background: color-mix(in oklab, var(--card) 24%, transparent) !important;
}

.dk-grid.rz-data-grid {
    border: 1px solid var(--app-panel-edge) !important;
    border-radius: 10px !important;
    background: color-mix(in oklab, var(--app-chart-surface-bg) 72%, transparent) !important;
    color: var(--foreground) !important;
    box-shadow: none !important;
    overflow: hidden;
    backdrop-filter: var(--app-panel-blur);
    -webkit-backdrop-filter: var(--app-panel-blur);
}

html[data-surface="liquid-glass"] .dk-grid.rz-data-grid {
    background: color-mix(in oklab, var(--card) 28%, transparent) !important;
}

.dk-grid .rz-datatable-scrollable-wrapper,
.dk-grid .rz-datatable-scrollable,
.dk-grid .rz-datatable-data,
.dk-grid .rz-grid-table,
.dk-grid .rz-grid-table colgroup,
.dk-grid .rz-data-grid-data {
    background: transparent !important;
}

.dk-grid .rz-grid-table {
    border-collapse: separate;
    border-spacing: 0;
}

.dk-grid .rz-grid-table thead th,
.dk-grid.rz-data-grid thead th {
    height: 34px;
    padding: 0 10px !important;
    border-color: color-mix(in oklab, var(--app-panel-edge) 78%, transparent) !important;
    background: color-mix(in oklab, var(--app-grid-header) 78%, transparent) !important;
    color: color-mix(in oklab, var(--foreground) 70%, transparent) !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
}

.dk-grid .rz-column-title {
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
}

.dk-grid .rz-grid-table tbody tr.rz-data-row td,
.dk-grid.rz-data-grid tbody tr.rz-data-row td,
.dk-grid .rz-grid-table tbody tr td {
    height: 32px;
    padding: 5px 10px !important;
    border-color: color-mix(in oklab, var(--app-panel-edge) 58%, transparent) !important;
    background-color: color-mix(in oklab, var(--card) 56%, transparent) !important;
    color: var(--foreground) !important;
    font-size: 12px !important;
    line-height: 1.25;
}

.dk-grid .rz-grid-table tbody tr.rz-data-row:nth-child(odd) td,
.dk-grid.rz-data-grid tbody tr.rz-data-row:nth-child(odd) td {
    background-color: color-mix(in oklab, var(--muted) 34%, transparent) !important;
}

.dk-grid .rz-grid-table tbody tr.rz-data-row:hover td,
.dk-grid.rz-data-grid tbody tr.rz-data-row:hover td {
    background-color: color-mix(in oklab, var(--primary) 16%, var(--card) 34%) !important;
}

html[data-surface="liquid-glass"] .dk-grid .rz-grid-table tbody tr.rz-data-row td,
html[data-surface="liquid-glass"] .dk-grid.rz-data-grid tbody tr.rz-data-row td,
html[data-surface="liquid-glass"] .dk-grid .rz-grid-table tbody tr td {
    background-color: color-mix(in oklab, var(--card) 30%, transparent) !important;
}

html[data-surface="liquid-glass"] .dk-grid .rz-grid-table tbody tr.rz-data-row:nth-child(odd) td,
html[data-surface="liquid-glass"] .dk-grid.rz-data-grid tbody tr.rz-data-row:nth-child(odd) td {
    background-color: color-mix(in oklab, var(--muted) 22%, transparent) !important;
}

.dk-grid .rz-sortable-column .rzi,
.dk-grid .rz-column-resizer {
    color: color-mix(in oklab, var(--foreground) 58%, transparent) !important;
}

.dk-grid .rz-column-resizer {
    width: 7px;
}

.rz-paginator {
    display: none !important;
}

.rz-tabview,
.rz-tabs,
.rz-tabs-tabpanel {
    border-color: var(--app-panel-edge) !important;
    background: transparent !important;
    color: var(--foreground) !important;
}

.rz-tabview-nav {
    gap: 4px;
    border-bottom-color: var(--app-panel-edge) !important;
}

.rz-tabview-nav li button,
.rz-tabview-nav li a {
    border-radius: 8px 8px 0 0;
    color: color-mix(in oklab, var(--foreground) 68%, transparent) !important;
    font-size: 12px;
    font-weight: 800;
}

.rz-tabview-nav li.rz-tabview-selected button,
.rz-tabview-nav li.rz-tabview-selected a {
    border-color: var(--app-panel-edge) !important;
    background: color-mix(in oklab, var(--app-card-bg) 84%, transparent) !important;
    color: var(--foreground) !important;
}

.rz-profile-menu,
.rz-profile-menu .rz-button,
.rz-profile-menu .rz-profile-menu-button {
    background: transparent !important;
    color: var(--foreground) !important;
    box-shadow: none !important;
}

.rz-profile-menu .rz-button {
    width: 34px;
    height: 34px;
    border: 1px solid var(--app-panel-edge) !important;
    border-radius: 8px !important;
    background: color-mix(in oklab, var(--app-control-bg) 84%, transparent) !important;
}

.rz-popup,
.rz-dropdown-panel,
.rz-context-menu,
.rz-menu {
    border: 1px solid var(--app-panel-edge) !important;
    border-radius: 10px !important;
    background: color-mix(in oklab, var(--popover) 92%, transparent) !important;
    color: var(--popover-foreground) !important;
    box-shadow: 0 12px 28px color-mix(in oklab, black 18%, transparent) !important;
    backdrop-filter: var(--app-panel-blur);
    -webkit-backdrop-filter: var(--app-panel-blur);
}

.btn,
.rz-button,
.rz-link-button {
    border-radius: 8px !important;
}

@media (max-width: 980px) {
    html,
    body {
        overflow: auto;
    }

    .dk-app-shell,
    .dk-app-shell.is-collapsed {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr);
        height: auto;
        min-height: 100vh;
    }

    .dk-app-sidebar {
        position: sticky;
        top: 0;
        z-index: 20;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 10px;
        padding: 10px 12px;
        border-right: 0;
        border-bottom: 1px solid var(--app-panel-edge);
    }

    .dk-brand {
        margin: 0;
    }

    .dk-sidebar-footer {
        display: none;
    }

    .dk-app-shell.is-collapsed .dk-app-sidebar {
        display: none;
    }

    .dk-nav {
        display: flex;
        align-items: center;
        gap: 6px;
        overflow-x: auto;
        padding-bottom: 2px;
    }

    .dk-nav-link {
        flex: 0 0 auto;
        height: 34px;
        padding-inline: 10px;
    }

    .dk-app-workspace {
        min-height: 0;
    }

    .dk-app-header {
        align-items: flex-start;
        flex-wrap: wrap;
        padding: 10px 12px;
    }

    .dk-top-actions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .dk-app-main {
        overflow: visible;
        padding: 14px 12px 44px;
    }
}

@media (max-width: 640px) {
    .dk-brand-copy,
    .dk-header-title {
        display: none;
    }

    .dk-app-sidebar {
        grid-template-columns: 1fr;
    }

    .dk-brand {
        display: none;
    }

    .dk-nav-link {
        padding-inline: 8px;
    }

    .dk-nav-text {
        font-size: 11px;
    }

    .dk-appearance-field,
    .dk-appearance-field-theme,
    .dk-appearance-field-wide {
        grid-template-columns: 1fr;
        gap: 3px;
        flex: 1 1 132px;
    }

    .dk-metric-card.rz-card {
        min-width: calc(50% - 6px);
    }
}

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

/* Final restraint pass: no large decorative ovals in the operations shell. */
html[data-theme] body {
    background:
        linear-gradient(
            180deg,
            color-mix(in oklab, var(--background) 96%, var(--primary) 4%) 0%,
            color-mix(in oklab, var(--background) 91%, var(--primary) 9%) 100%
        ) !important;
}

html[data-theme="mono"] body {
    background:
        linear-gradient(
            180deg,
            oklch(0.985 0 0) 0%,
            color-mix(in oklab, oklch(0.985 0 0) 88%, oklch(0.76 0.04 190) 12%) 100%
        ) !important;
}

html[data-surface="liquid-glass"] body {
    background:
        linear-gradient(
            180deg,
            color-mix(in oklab, var(--background) 84%, var(--primary) 16%) 0%,
            color-mix(in oklab, var(--background) 74%, var(--primary) 26%) 100%
        ) !important;
}

html[data-theme="mono"][data-surface="liquid-glass"] body {
    background:
        linear-gradient(
            180deg,
            oklch(0.97 0 0) 0%,
            color-mix(in oklab, oklch(0.97 0 0) 70%, oklch(0.72 0.055 190) 30%) 100%
        ) !important;
}

html[data-theme] .dk-app-sidebar,
html[data-theme] .dk-app-header {
    background: color-mix(in oklab, var(--card) 82%, transparent) !important;
}

html[data-theme] .dk-toolbar,
html[data-theme] .dk-chart-panel,
html[data-theme] .dk-metric-card.rz-card,
html[data-theme] .dk-grid.rz-data-grid {
    background: color-mix(in oklab, var(--card) 54%, transparent) !important;
}

html[data-theme] .dk-grid .rz-grid-table thead th,
html[data-theme] .dk-grid.rz-data-grid thead th {
    background: color-mix(in oklab, var(--card) 70%, transparent) !important;
}

html[data-theme] .dk-grid .rz-grid-table tbody tr.rz-data-row td,
html[data-theme] .dk-grid.rz-data-grid tbody tr.rz-data-row td,
html[data-theme] .dk-grid .rz-grid-table tbody tr td {
    background-color: color-mix(in oklab, var(--card) 36%, transparent) !important;
}

html[data-theme] .dk-grid .rz-grid-table tbody tr.rz-data-row:nth-child(odd) td,
html[data-theme] .dk-grid.rz-data-grid tbody tr.rz-data-row:nth-child(odd) td {
    background-color: color-mix(in oklab, var(--muted) 26%, transparent) !important;
}

html[data-surface="liquid-glass"] .dk-app-sidebar,
html[data-surface="liquid-glass"] .dk-app-header,
html[data-surface="liquid-glass"] .dk-toolbar,
html[data-surface="liquid-glass"] .dk-chart-panel,
html[data-surface="liquid-glass"] .dk-metric-card.rz-card,
html[data-surface="liquid-glass"] .dk-grid.rz-data-grid {
    background: color-mix(in oklab, var(--card) 22%, transparent) !important;
}

html[data-surface="liquid-glass"] .dk-grid .rz-grid-table thead th,
html[data-surface="liquid-glass"] .dk-grid.rz-data-grid thead th {
    background: color-mix(in oklab, var(--card) 34%, transparent) !important;
}

html[data-surface="liquid-glass"] .dk-grid .rz-grid-table tbody tr.rz-data-row td,
html[data-surface="liquid-glass"] .dk-grid.rz-data-grid tbody tr.rz-data-row td,
html[data-surface="liquid-glass"] .dk-grid .rz-grid-table tbody tr td {
    background-color: color-mix(in oklab, var(--card) 18%, transparent) !important;
}

html[data-surface="liquid-glass"] .dk-grid .rz-grid-table tbody tr.rz-data-row:nth-child(odd) td,
html[data-surface="liquid-glass"] .dk-grid.rz-data-grid tbody tr.rz-data-row:nth-child(odd) td {
    background-color: color-mix(in oklab, var(--muted) 14%, transparent) !important;
}

/* Popup, combo, and background visibility pass. */
.dk-app-header {
    position: relative;
    z-index: 1300;
    overflow: visible;
}

.dk-top-actions,
.dk-toolbar {
    position: relative;
    z-index: 1301;
    overflow: visible;
}

.dk-native-toolbar .dk-appearance-field {
    grid-template-columns: auto 180px;
}

.dk-grid.rz-data-grid,
.rz-data-grid {
    position: relative;
    z-index: 0;
}

.dk-combo {
    position: relative;
    width: 100%;
    min-width: 0;
}

.dk-combo-trigger {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    height: 32px;
    padding: 0 8px 0 10px;
    border: 1px solid var(--app-panel-edge);
    border-radius: 8px;
    background: color-mix(in oklab, var(--app-control-bg) 84%, transparent);
    color: var(--foreground);
    box-shadow: none;
    cursor: pointer;
    text-align: left;
    transition:
        background-color 150ms ease,
        border-color 150ms ease;
}

.dk-combo-trigger span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dk-combo-trigger .rzi {
    font-size: 18px;
    color: color-mix(in oklab, var(--foreground) 64%, transparent);
    transition: transform 150ms ease;
}

.dk-combo.is-open .dk-combo-trigger .rzi {
    transform: rotate(180deg);
}

.dk-combo-trigger:hover,
.dk-combo.is-open .dk-combo-trigger {
    border-color: color-mix(in oklab, var(--primary) 42%, var(--app-panel-edge));
    background: color-mix(in oklab, var(--app-control-hover) 82%, transparent);
}

.dk-combo-trigger:focus-visible,
.dk-combo-option:focus-visible {
    outline: none;
    box-shadow: var(--app-focus-ring);
}

.dk-combo-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 4200;
    display: grid;
    gap: 2px;
    width: max(100%, 176px);
    max-height: min(320px, 56vh);
    overflow: auto;
    padding: 6px;
    border: 1px solid var(--app-panel-edge);
    border-radius: 10px;
    background: color-mix(in oklab, var(--popover) 82%, transparent);
    color: var(--popover-foreground);
    box-shadow: 0 14px 34px color-mix(in oklab, black 18%, transparent);
    backdrop-filter: blur(16px) saturate(1.18);
    -webkit-backdrop-filter: blur(16px) saturate(1.18);
}

html[data-surface="liquid-glass"] .dk-combo-panel {
    background: color-mix(in oklab, var(--popover) 56%, transparent);
    border-color: color-mix(in oklab, white 30%, var(--app-panel-edge));
}

.dk-combo-option {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    padding: 0 8px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--popover-foreground);
    cursor: pointer;
    text-align: left;
}

.dk-combo-option span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dk-combo-option:hover {
    background: color-mix(in oklab, var(--primary) 13%, transparent);
}

.dk-combo-option.is-selected {
    background: color-mix(in oklab, var(--primary) 18%, transparent);
    color: var(--foreground);
    font-weight: 750;
}

.dk-combo-option .rzi {
    font-size: 17px;
    color: var(--primary);
}

.rz-popup,
.rz-dropdown-panel,
.rz-context-menu,
.rz-menu,
.rz-profile-menu-list,
.rz-profile-menu-items {
    z-index: 5000 !important;
    background: color-mix(in oklab, var(--popover) 82%, transparent) !important;
    border-color: var(--app-panel-edge) !important;
    color: var(--popover-foreground) !important;
    backdrop-filter: blur(16px) saturate(1.18);
    -webkit-backdrop-filter: blur(16px) saturate(1.18);
}

html[data-surface="liquid-glass"] .rz-popup,
html[data-surface="liquid-glass"] .rz-dropdown-panel,
html[data-surface="liquid-glass"] .rz-context-menu,
html[data-surface="liquid-glass"] .rz-menu,
html[data-surface="liquid-glass"] .rz-profile-menu-list,
html[data-surface="liquid-glass"] .rz-profile-menu-items {
    background: color-mix(in oklab, var(--popover) 56%, transparent) !important;
}

.rz-profile-menu .rz-button,
.rz-profile-menu .rz-profile-menu-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 40px !important;
    height: 34px !important;
    min-width: 40px !important;
    padding: 0 !important;
    border: 1px solid var(--app-panel-edge) !important;
    border-radius: 8px !important;
    background: color-mix(in oklab, var(--app-control-bg) 78%, transparent) !important;
    color: var(--foreground) !important;
    box-shadow: none !important;
}

.rz-profile-menu .rz-button:hover,
.rz-profile-menu .rz-profile-menu-button:hover,
.rz-profile-menu .rz-button:focus-visible,
.rz-profile-menu .rz-profile-menu-button:focus-visible {
    border-color: color-mix(in oklab, var(--primary) 42%, var(--app-panel-edge)) !important;
    background: color-mix(in oklab, var(--app-control-hover) 82%, transparent) !important;
    box-shadow: var(--app-focus-ring) !important;
}

.rz-profile-menu .rzi {
    font-size: 19px;
}

.rz-profile-menu {
    position: relative !important;
    z-index: 5000 !important;
    overflow: visible !important;
}

.rz-profile-menu > .rz-navigation-item > .rz-navigation-item-wrapper {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px !important;
    height: 34px !important;
    min-width: 44px !important;
    border: 1px solid var(--app-panel-edge) !important;
    border-radius: 8px !important;
    background: color-mix(in oklab, var(--app-control-bg) 78%, transparent) !important;
    color: var(--foreground) !important;
    box-shadow: none !important;
    cursor: pointer;
    transition:
        background-color 150ms ease,
        border-color 150ms ease;
}

.rz-profile-menu > .rz-navigation-item > .rz-navigation-item-wrapper:hover,
.rz-profile-menu > .rz-navigation-item > .rz-navigation-item-wrapper:focus-visible,
.rz-profile-menu > .rz-navigation-item > .rz-navigation-item-wrapper[aria-expanded="true"] {
    border-color: color-mix(in oklab, var(--primary) 42%, var(--app-panel-edge)) !important;
    background: color-mix(in oklab, var(--app-control-hover) 82%, transparent) !important;
}

.rz-profile-menu > .rz-navigation-item > .rz-navigation-item-wrapper .rz-navigation-item-link {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 100%;
    height: 100%;
    padding: 0 !important;
    color: var(--foreground) !important;
    background: transparent !important;
}

.rz-profile-menu > .rz-navigation-item > .rz-navigation-menu {
    z-index: 5001 !important;
    top: calc(100% + 6px) !important;
    right: 0 !important;
    left: auto !important;
    min-width: 188px;
    padding: 6px !important;
    border: 1px solid var(--app-panel-edge) !important;
    border-radius: 10px !important;
    background: color-mix(in oklab, var(--popover) 82%, transparent) !important;
    color: var(--popover-foreground) !important;
    box-shadow: 0 14px 34px color-mix(in oklab, black 18%, transparent) !important;
    backdrop-filter: blur(16px) saturate(1.18);
    -webkit-backdrop-filter: blur(16px) saturate(1.18);
}

html[data-surface="liquid-glass"] .rz-profile-menu > .rz-navigation-item > .rz-navigation-menu {
    background: color-mix(in oklab, var(--popover) 56%, transparent) !important;
}

.rz-profile-menu > .rz-navigation-item > .rz-navigation-menu .rz-navigation-item-link {
    min-height: 32px;
    padding: 0 9px !important;
    border-radius: 7px;
    color: var(--popover-foreground) !important;
    background: transparent !important;
}

.rz-profile-menu > .rz-navigation-item > .rz-navigation-menu .rz-navigation-item-link:hover {
    background: color-mix(in oklab, var(--primary) 13%, transparent) !important;
    color: var(--foreground) !important;
}

.rz-menuitem-link,
.rz-menuitem,
.rz-dropdown-item,
.rz-dropdown-items li,
.rz-profile-menu .rz-navigation-item-link {
    color: var(--popover-foreground) !important;
    background: transparent !important;
}

.rz-menuitem-link:hover,
.rz-dropdown-item:hover,
.rz-dropdown-items li:hover,
.rz-profile-menu .rz-navigation-item-link:hover {
    background: color-mix(in oklab, var(--primary) 13%, transparent) !important;
    color: var(--foreground) !important;
}

html[data-theme] body {
    background:
        linear-gradient(
            180deg,
            color-mix(in oklab, var(--background) 78%, transparent) 0%,
            color-mix(in oklab, var(--background) 68%, transparent) 100%
        ),
        var(--app-bg-image) !important;
    background-attachment: fixed !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

html[data-theme="mono"] body {
    background:
        linear-gradient(
            180deg,
            color-mix(in oklab, oklch(0.985 0 0) 78%, transparent) 0%,
            color-mix(in oklab, oklch(0.985 0 0) 68%, transparent) 100%
        ),
        var(--app-bg-image) !important;
}

html[data-surface="liquid-glass"] body {
    background:
        linear-gradient(
            180deg,
            color-mix(in oklab, var(--background) 66%, transparent) 0%,
            color-mix(in oklab, var(--background) 54%, transparent) 100%
        ),
        var(--app-bg-image) !important;
}

/* Final polish for custom account control, overview, and virtualized grid headers. */
.dk-sidebar-footer span:first-child {
    font-size: 15.4px;
    font-weight: 850;
    color: var(--foreground);
}

.dk-account-menu {
    position: relative;
    z-index: 5200;
}

.dk-account-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 46px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--app-panel-edge);
    border-radius: 8px;
    background: color-mix(in oklab, var(--app-control-bg) 72%, transparent);
    color: var(--foreground);
    box-shadow: none;
    cursor: pointer;
    transition:
        background-color 150ms ease,
        border-color 150ms ease,
        transform 150ms ease;
}

.dk-account-trigger:hover,
.dk-account-menu.is-open .dk-account-trigger {
    border-color: color-mix(in oklab, var(--primary) 46%, var(--app-panel-edge));
    background: color-mix(in oklab, var(--app-control-hover) 78%, transparent);
}

.dk-account-trigger:active {
    transform: translateY(1px);
}

.dk-account-trigger:focus-visible {
    outline: none;
    box-shadow: var(--app-focus-ring);
}

.dk-account-trigger .rzi {
    font-size: 19px;
    line-height: 1;
}

.dk-account-trigger .dk-account-chevron {
    font-size: 18px;
    color: color-mix(in oklab, var(--foreground) 64%, transparent);
    transition: transform 150ms ease;
}

.dk-account-menu.is-open .dk-account-chevron {
    transform: rotate(180deg);
}

.dk-account-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 5201;
    display: grid;
    gap: 2px;
    min-width: 196px;
    padding: 6px;
    border: 1px solid var(--app-panel-edge);
    border-radius: 10px;
    background: color-mix(in oklab, var(--popover) 82%, transparent);
    color: var(--popover-foreground);
    box-shadow: 0 14px 34px color-mix(in oklab, black 18%, transparent);
    backdrop-filter: blur(16px) saturate(1.18);
    -webkit-backdrop-filter: blur(16px) saturate(1.18);
}

html[data-surface="liquid-glass"] .dk-account-panel {
    background: color-mix(in oklab, var(--popover) 56%, transparent);
    border-color: color-mix(in oklab, white 30%, var(--app-panel-edge));
}

.dk-account-option {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 32px;
    padding: 0 9px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--popover-foreground);
    cursor: pointer;
    text-align: left;
    text-decoration: none;
}

.dk-account-form {
    margin: 0;
}

.dk-account-option:hover,
.dk-account-option:focus-visible {
    outline: none;
    background: color-mix(in oklab, var(--primary) 13%, transparent);
    color: var(--foreground);
}

.dk-account-option .rzi {
    font-size: 19px;
    color: color-mix(in oklab, var(--foreground) 72%, transparent);
}

.dk-grid.rz-data-grid {
    isolation: isolate;
}

.dk-grid .rz-datatable-scrollable-header,
.dk-grid .rz-frozen-cell,
.dk-grid .rz-grid-table thead,
.dk-grid.rz-data-grid thead {
    position: sticky;
    top: 0;
    z-index: 30 !important;
}

.dk-grid .rz-grid-table thead tr,
.dk-grid.rz-data-grid thead tr {
    position: relative;
    z-index: 31;
}

.dk-grid .rz-grid-table thead th,
.dk-grid.rz-data-grid thead th {
    position: relative;
    z-index: 32 !important;
    overflow: hidden;
    backdrop-filter: blur(18px) saturate(1.14);
    -webkit-backdrop-filter: blur(18px) saturate(1.14);
    background:
        linear-gradient(
            180deg,
            color-mix(in oklab, var(--card) 50%, transparent),
            color-mix(in oklab, var(--card) 32%, transparent)
        ) !important;
}

.dk-grid .rz-grid-table thead th::before,
.dk-grid.rz-data-grid thead th::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(
            180deg,
            color-mix(in oklab, var(--background) 54%, transparent),
            color-mix(in oklab, var(--background) 38%, transparent)
        );
    backdrop-filter: blur(18px) saturate(1.14);
    -webkit-backdrop-filter: blur(18px) saturate(1.14);
}

.dk-grid .rz-column-title,
.dk-grid .rz-column-title-content,
.dk-grid .rz-cell-data {
    background: transparent !important;
}

html[data-surface="liquid-glass"] .dk-grid .rz-grid-table thead th,
html[data-surface="liquid-glass"] .dk-grid.rz-data-grid thead th {
    background:
        linear-gradient(
            180deg,
            color-mix(in oklab, var(--card) 30%, transparent),
            color-mix(in oklab, var(--card) 18%, transparent)
        ) !important;
}

html[data-theme="cornflower-blue"][data-surface="liquid-glass"] .dk-grid .rz-grid-table thead th,
html[data-theme="cornflower-blue"][data-surface="liquid-glass"] .dk-grid.rz-data-grid thead th {
    background:
        linear-gradient(
            180deg,
            color-mix(in oklab, var(--primary) 20%, var(--card) 18%),
            color-mix(in oklab, var(--card) 20%, transparent)
        ) !important;
}

.dk-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px;
}

.dk-overview-card,
.dk-overview-panel {
    border: 1px solid var(--app-panel-edge);
    border-radius: 10px;
    background: color-mix(in oklab, var(--card) 42%, transparent);
    color: var(--foreground);
    backdrop-filter: var(--app-panel-blur);
    -webkit-backdrop-filter: var(--app-panel-blur);
}

.dk-overview-card {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 10px;
    min-height: 96px;
    padding: 12px;
}

.dk-overview-card > .rzi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: color-mix(in oklab, var(--primary) 13%, transparent);
    color: var(--primary);
    font-size: 20px;
}

.dk-overview-card small {
    display: block;
    margin-bottom: 4px;
    color: color-mix(in oklab, var(--foreground) 58%, transparent);
    font-size: 11px;
    font-weight: 850;
}

.dk-overview-card strong {
    display: block;
    color: var(--foreground);
    font-size: 20px;
    font-weight: 850;
    line-height: 1.1;
}

.dk-overview-card p {
    margin: 5px 0 0;
    color: color-mix(in oklab, var(--foreground) 62%, transparent);
    font-size: 12px;
    line-height: 1.25;
}

.dk-overview-panels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.dk-overview-panel {
    min-width: 0;
    padding: 12px;
}

.dk-overview-panel .dk-section-title {
    margin-top: 0;
}

/* Activity, chart, scrollbar, table, and combo reliability pass. */
html[data-theme] {
    --app-chart-series: color-mix(in oklab, var(--primary) 84%, var(--success) 16%);
    --app-chart-series-stroke: color-mix(in oklab, var(--primary) 72%, var(--foreground) 28%);
    --app-chart-axis: color-mix(in oklab, var(--foreground) 62%, transparent);
    --app-chart-grid: color-mix(in oklab, var(--foreground) 16%, transparent);
    --app-scrollbar-track: color-mix(in oklab, var(--card) 28%, transparent);
    --app-scrollbar-thumb: color-mix(in oklab, var(--primary) 38%, var(--foreground) 18%);
    --app-scrollbar-thumb-hover: color-mix(in oklab, var(--primary) 58%, var(--foreground) 18%);
    --activity-idle: oklch(0.72 0.16 292);
    --activity-success: oklch(0.82 0.28 142);
    --activity-warning: oklch(0.82 0.19 82);
    --activity-error: oklch(0.63 0.25 29);
    --activity-frame: color-mix(in oklab, var(--foreground) 12%, transparent);
}

html[data-theme="mono"] {
    --app-chart-series: oklch(0.52 0.15 218);
    --app-chart-series-stroke: oklch(0.42 0.12 218);
}

html,
body,
.dk-app-main,
.dk-nav,
.dk-combo-panel,
.dk-account-panel,
.rz-popup,
.rz-dropdown-panel,
.rz-data-grid-data,
.rz-datatable-scrollable {
    scrollbar-color: var(--app-scrollbar-thumb) var(--app-scrollbar-track);
    scrollbar-width: thin;
}

*::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

*::-webkit-scrollbar-track {
    background: var(--app-scrollbar-track);
}

*::-webkit-scrollbar-thumb {
    min-height: 36px;
    border: 3px solid transparent;
    border-radius: 999px;
    background: var(--app-scrollbar-thumb);
    background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--app-scrollbar-thumb-hover);
    background-clip: padding-box;
}

*::-webkit-scrollbar-corner {
    background: var(--app-scrollbar-track);
}

.dk-combo-panel {
    background: color-mix(in oklab, var(--popover) 88%, transparent) !important;
}

html[data-surface="liquid-glass"] .dk-combo-panel {
    background: color-mix(in oklab, var(--popover) 70%, transparent) !important;
}

.rz-popup,
.rz-dropdown-panel,
.rz-context-menu,
.rz-menu,
.rz-profile-menu-list,
.rz-profile-menu-items,
.dk-account-panel {
    background: color-mix(in oklab, var(--popover) 88%, transparent) !important;
}

html[data-surface="liquid-glass"] .rz-popup,
html[data-surface="liquid-glass"] .rz-dropdown-panel,
html[data-surface="liquid-glass"] .rz-context-menu,
html[data-surface="liquid-glass"] .rz-menu,
html[data-surface="liquid-glass"] .rz-profile-menu-list,
html[data-surface="liquid-glass"] .rz-profile-menu-items,
html[data-surface="liquid-glass"] .dk-account-panel {
    background: color-mix(in oklab, var(--popover) 70%, transparent) !important;
}

.dk-grid.rz-data-grid {
    isolation: isolate;
    overflow: hidden;
}

.dk-grid .rz-datatable-scrollable-header,
.dk-grid .rz-grid-table thead,
.dk-grid.rz-data-grid thead {
    position: sticky;
    top: 0;
    z-index: 80 !important;
    background: color-mix(in oklab, var(--card) 88%, var(--background) 12%) !important;
    box-shadow: 0 1px 0 var(--app-panel-edge), 0 8px 14px color-mix(in oklab, black 12%, transparent);
}

.dk-grid .rz-grid-table thead tr,
.dk-grid.rz-data-grid thead tr {
    position: relative;
    z-index: 81 !important;
    background: inherit !important;
}

.dk-grid .rz-grid-table thead th,
.dk-grid.rz-data-grid thead th,
html[data-theme] .dk-grid .rz-grid-table thead th,
html[data-theme] .dk-grid.rz-data-grid thead th,
html[data-surface="liquid-glass"] .dk-grid .rz-grid-table thead th,
html[data-surface="liquid-glass"] .dk-grid.rz-data-grid thead th {
    position: relative;
    z-index: 82 !important;
    background:
        linear-gradient(
            180deg,
            color-mix(in oklab, var(--card) 90%, var(--background) 10%),
            color-mix(in oklab, var(--card) 82%, var(--background) 18%)
        ) !important;
    box-shadow: inset 0 -1px 0 var(--app-panel-edge);
}

html[data-surface="liquid-glass"] .dk-grid .rz-grid-table thead th,
html[data-surface="liquid-glass"] .dk-grid.rz-data-grid thead th {
    background:
        linear-gradient(
            180deg,
            color-mix(in oklab, var(--card) 76%, var(--background) 24%),
            color-mix(in oklab, var(--card) 68%, var(--background) 32%)
        ) !important;
}

.dk-grid .rz-grid-table thead th::before,
.dk-grid.rz-data-grid thead th::before {
    background:
        linear-gradient(
            180deg,
            color-mix(in oklab, var(--card) 92%, var(--background) 8%),
            color-mix(in oklab, var(--card) 82%, var(--background) 18%)
        ) !important;
}

.dk-grid .rz-grid-table tbody tr.rz-data-row:hover td,
.dk-grid.rz-data-grid tbody tr.rz-data-row:hover td,
html[data-theme] .dk-grid .rz-grid-table tbody tr.rz-data-row:hover td,
html[data-theme] .dk-grid.rz-data-grid tbody tr.rz-data-row:hover td,
html[data-surface="liquid-glass"] .dk-grid .rz-grid-table tbody tr.rz-data-row:hover td,
html[data-surface="liquid-glass"] .dk-grid.rz-data-grid tbody tr.rz-data-row:hover td {
    background-color: color-mix(in oklab, var(--primary) 18%, var(--card) 48%) !important;
    color: var(--foreground) !important;
}

.dk-chart-panel .rz-chart,
.dk-chart-panel .rz-chart svg {
    color: var(--foreground);
}

.dk-chart-panel .rz-chart text {
    fill: var(--app-chart-axis) !important;
}

.dk-chart-panel .rz-chart line,
.dk-chart-panel .rz-chart path {
    stroke-color: var(--app-chart-grid);
}

.dk-overview-card {
    min-height: 126px;
}

.dk-overview-card > div {
    min-width: 0;
}

.dk-btop-activity {
    display: grid;
    grid-template-columns: repeat(60, minmax(2px, 1fr));
    align-items: end;
    gap: 2px;
    width: 100%;
    min-width: 0;
    height: 28px;
    margin-top: 9px;
    padding: 4px 5px;
    border: 1px solid var(--activity-frame);
    border-radius: 7px;
    background: color-mix(in oklab, black 24%, transparent);
    overflow: hidden;
}

.dk-btop-segment {
    --level: 1;
    position: relative;
    display: block;
    height: 20px;
    min-width: 2px;
}

.dk-btop-segment::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: calc(var(--level) * 2.5px);
    max-height: 20px;
    border-radius: 2px 2px 0 0;
    background:
        repeating-linear-gradient(
            to top,
            var(--bar-color) 0 3px,
            transparent 3px 5px
        );
}

.dk-btop-segment.is-idle {
    --bar-color: var(--activity-idle);
}

.dk-btop-segment.is-success {
    --bar-color: var(--activity-success);
}

.dk-btop-segment.is-warning {
    --bar-color: color-mix(in oklab, var(--activity-warning) 78%, oklch(0.72 0.18 55) 22%);
}

.dk-btop-segment.is-error {
    --bar-color: var(--activity-error);
}

@media (max-width: 640px) {
    .dk-overview-grid {
        grid-template-columns: 1fr;
    }

    .dk-btop-activity {
        grid-template-columns: repeat(60, 1fr);
        gap: 1px;
    }
}

html[data-theme="cornflower-blue"][data-surface="liquid-glass"] .dk-grid .rz-grid-table thead,
html[data-theme="cornflower-blue"][data-surface="liquid-glass"] .dk-grid.rz-data-grid thead {
    background: color-mix(in oklab, var(--card) 84%, var(--background) 16%) !important;
}

html[data-theme="cornflower-blue"][data-surface="liquid-glass"] .dk-grid .rz-grid-table thead th,
html[data-theme="cornflower-blue"][data-surface="liquid-glass"] .dk-grid.rz-data-grid thead th {
    background:
        linear-gradient(
            180deg,
            color-mix(in oklab, var(--card) 86%, var(--primary) 14%),
            color-mix(in oklab, var(--card) 78%, var(--background) 22%)
        ) !important;
}

html[data-theme="cornflower-blue"][data-surface="liquid-glass"] .dk-grid .rz-grid-table thead th::before,
html[data-theme="cornflower-blue"][data-surface="liquid-glass"] .dk-grid.rz-data-grid thead th::before {
    background:
        linear-gradient(
            180deg,
            color-mix(in oklab, var(--card) 88%, var(--primary) 12%),
            color-mix(in oklab, var(--card) 82%, var(--background) 18%)
        ) !important;
}

@media (max-width: 640px) {
    .dk-overview-grid,
    .dk-overview-panels {
        grid-template-columns: 1fr;
    }
}

/* Final table sorting contrast pass. Radzen uses different sort icon classes across versions. */
html[data-theme] {
    --app-grid-header-fg-strong: color-mix(in oklab, var(--foreground) 94%, var(--primary) 6%);
    --app-grid-sort-icon: color-mix(in oklab, var(--foreground) 88%, var(--primary) 12%);
    --app-grid-sort-icon-hover: color-mix(in oklab, var(--foreground) 58%, var(--primary) 42%);
    --app-grid-sort-icon-active: color-mix(in oklab, var(--primary) 64%, var(--foreground) 36%);
    --app-grid-sort-button-bg: color-mix(in oklab, var(--foreground) 9%, transparent);
    --app-grid-sort-button-border: color-mix(in oklab, var(--foreground) 28%, transparent);
}

html[data-theme="mono"] {
    --app-grid-header-fg-strong: oklch(0.16 0 0);
    --app-grid-sort-icon: oklch(0.22 0 0);
    --app-grid-sort-icon-hover: oklch(0.34 0.09 218);
    --app-grid-sort-icon-active: oklch(0.26 0.12 218);
    --app-grid-sort-button-bg: color-mix(in oklab, var(--foreground) 7%, transparent);
    --app-grid-sort-button-border: color-mix(in oklab, var(--foreground) 22%, transparent);
}

.dk-grid .rz-grid-table thead th,
.dk-grid.rz-data-grid thead th {
    color: var(--app-grid-header-fg-strong) !important;
}

.dk-grid .rz-column-title,
.dk-grid .rz-column-title-content,
.dk-grid .rz-sortable-column .rz-column-title,
.dk-grid .rz-sortable-column .rz-column-title-content {
    color: var(--app-grid-header-fg-strong) !important;
    opacity: 1 !important;
}

.dk-grid .rz-sortable-column,
.dk-grid .rz-sortable-column button,
.dk-grid .rz-sortable-column .rz-button,
.dk-grid .rz-sortable-column .rzi,
.dk-grid .rz-sortable-column-icon,
.dk-grid .rz-sort-icon,
.dk-grid .rz-sort,
.dk-grid .rz-sort-asc,
.dk-grid .rz-sort-desc,
.dk-grid .rz-grid-sort,
.dk-grid .rz-column-sort,
.dk-grid .rz-column-sorter,
.dk-grid .rz-column-sort-indicator,
.dk-grid .rz-sortable-column svg,
.dk-grid .rz-sortable-column path {
    color: var(--app-grid-sort-icon) !important;
    fill: currentColor !important;
    stroke: currentColor !important;
    opacity: 1 !important;
}

.dk-grid .rz-sortable-column:hover,
.dk-grid .rz-sortable-column:hover .rz-column-title,
.dk-grid .rz-sortable-column:hover .rz-column-title-content,
.dk-grid .rz-sortable-column:hover .rzi,
.dk-grid .rz-sortable-column:hover .rz-sortable-column-icon,
.dk-grid .rz-sortable-column:hover .rz-sort-icon,
.dk-grid .rz-sortable-column:hover .rz-column-sort-indicator {
    color: var(--app-grid-sort-icon-hover) !important;
    opacity: 1 !important;
}

.dk-grid .rz-sortable-column[aria-sort="ascending"],
.dk-grid .rz-sortable-column[aria-sort="descending"],
.dk-grid .rz-sortable-column.rz-state-active,
.dk-grid .rz-sortable-column.rz-column-active,
.dk-grid .rz-sortable-column .rz-sort-asc,
.dk-grid .rz-sortable-column .rz-sort-desc {
    color: var(--app-grid-sort-icon-active) !important;
    opacity: 1 !important;
}

.dk-grid .rz-sortable-column-icon,
.dk-grid .rz-sortable-column .rzi-grid-sort,
.dk-grid .rz-sortable-column .rzi-sort {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 5px;
    border: 1px solid var(--app-grid-sort-button-border);
    border-radius: 6px;
    background: var(--app-grid-sort-button-bg);
    line-height: 1 !important;
}

.dk-grid .rz-sortable-column:hover .rz-sortable-column-icon,
.dk-grid .rz-sortable-column:hover .rzi-grid-sort,
.dk-grid .rz-sortable-column:hover .rzi-sort {
    border-color: color-mix(in oklab, var(--primary) 54%, var(--app-grid-sort-button-border));
    background: color-mix(in oklab, var(--primary) 18%, var(--app-grid-sort-button-bg));
}

/* Final table text fit pass. Keep compact row height, give glyphs a safer line box. */
.dk-grid .rz-grid-table tbody tr.rz-data-row td,
.dk-grid.rz-data-grid tbody tr.rz-data-row td,
.dk-grid .rz-grid-table tbody tr td {
    height: 32px;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    line-height: 1.45 !important;
    vertical-align: middle !important;
}

.dk-grid .rz-grid-table thead th,
.dk-grid.rz-data-grid thead th {
    height: 34px;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    line-height: 1.35 !important;
    vertical-align: middle !important;
}

.dk-grid .rz-cell-data,
.dk-grid .rz-column-title,
.dk-grid .rz-column-title-content {
    line-height: inherit !important;
    overflow: visible;
}