/*
 * StreamGrid semantic theme tokens and Tabler/Bootstrap variable mapping.
 * Dark mode is the default baseline; light mode is activated via data-bs-theme.
 */
:root,
[data-bs-theme="dark"] {
    color-scheme: dark;

    --sg-color-bg: #0A0A0A;
    --sg-color-surface-1: #151515;
    --sg-color-surface-2: #1D1D1D;
    --sg-color-border: #2A2A2A;
    --sg-color-text: #EAEAEA;
    --sg-color-text-muted: #A1A1AA;
    --sg-color-primary: #F2BE2A;
    --sg-color-primary-hover: #F7CB4A;
    --sg-color-primary-ui: #A67F08;
    --sg-color-primary-ui-hover: #B48C10;
    --sg-color-primary-ui-active: #987306;
    --sg-color-link: var(--sg-color-primary);
    --sg-color-link-hover: var(--sg-color-primary-hover);
    --sg-color-primary-soft: rgba(242, 190, 42, 0.14);
    --sg-color-power-on: #5FBE63;
    --sg-color-toggle-knob: #121417;
    --sg-color-kbd-bg: #262017;
    --sg-color-kbd-border: #3B3224;
    --sg-color-kbd-text: #D7CFBF;
    --sg-font-accent: "Space Grotesk", "Inter Var", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --sg-color-focus-ring: rgba(242, 190, 42, 0.31);
    --sg-color-primary-rgb: 242, 190, 42;
    --sg-color-primary-contrast: #111111;

    /* Bootstrap */
    --bs-body-bg: var(--sg-color-bg);
    --bs-body-color: var(--sg-color-text);
    --bs-secondary-color: var(--sg-color-text-muted);
    --bs-border-color: var(--sg-color-border);
    --bs-emphasis-color: var(--sg-color-text);
    --bs-primary: var(--sg-color-primary);
    --bs-primary-rgb: var(--sg-color-primary-rgb);
    --bs-link-color: var(--sg-color-link);
    --bs-link-hover-color: var(--sg-color-link-hover);
    --bs-focus-ring-color: var(--sg-color-focus-ring);
    --bs-nav-link-color: var(--sg-color-text-muted);
    --bs-nav-link-hover-color: var(--sg-color-text);
    --bs-nav-underline-link-active-color: var(--sg-color-primary);
    --bs-nav-underline-link-active-border-color: var(--sg-color-primary);
    --bs-list-group-active-bg: var(--sg-color-primary);
    --bs-list-group-active-border-color: var(--sg-color-primary);
    --bs-list-group-active-color: var(--sg-color-primary-contrast);

    /* Tabler */
    --tblr-body-bg: var(--sg-color-bg);
    --tblr-body-color: var(--sg-color-text);
    --tblr-muted: var(--sg-color-text-muted);
    --tblr-border-color: var(--sg-color-border);
    --tblr-primary: var(--sg-color-primary);
    --tblr-primary-rgb: var(--sg-color-primary-rgb);
    --tblr-primary-fg: var(--sg-color-primary-contrast);
    --tblr-link-color: var(--sg-color-link);
    --tblr-link-hover-color: var(--sg-color-link-hover);
    --tblr-bg-surface: var(--sg-color-surface-1);
    --tblr-bg-surface-secondary: var(--sg-color-surface-2);
    --tblr-bg-surface-tertiary: var(--sg-color-surface-2);
    --tblr-bg-forms: var(--sg-color-surface-2);
    --tblr-code-bg: var(--sg-color-surface-2);
    --tblr-active-bg: var(--sg-color-primary-soft);
    --tblr-illustrations-primary: var(--sg-color-primary);
}

[data-bs-theme="light"] {
    color-scheme: light;

    --sg-color-bg: #FFFFFF;
    --sg-color-surface-1: #FFFFFF;
    --sg-color-surface-2: #F6F6F4;
    --sg-color-border: #E5E7EB;
    --sg-color-text: #111111;
    --sg-color-text-muted: #5B6270;
    --sg-color-primary: #D4A000;
    --sg-color-primary-hover: #C48E00;
    --sg-color-primary-ui: #C48E00;
    --sg-color-primary-ui-hover: #B88200;
    --sg-color-primary-ui-active: #A87400;
    --sg-color-link: #9A6E00;
    --sg-color-link-hover: #7A5600;
    --sg-color-primary-soft: rgba(212, 160, 0, 0.12);
    --sg-color-power-on: #58B85D;
    --sg-color-toggle-knob: #41474c;
    --sg-color-kbd-bg: #F7F2E6;
    --sg-color-kbd-border: #E4D9C3;
    --sg-color-kbd-text: #4A4031;
    --sg-color-focus-ring: rgba(212, 160, 0, 0.22);
    --sg-color-primary-rgb: 212, 160, 0;
    --sg-color-primary-contrast: #111111;
}

body {
    background-color: var(--sg-color-bg);
    color: var(--sg-color-text);
}

a,
.nav-link,
.dropdown-item,
.btn,
.page-title,
.page-subtitle,
.card-title,
h1,
h2,
h3,
h4 {
    font-family: var(--sg-font-accent);
}

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

a:hover {
    color: var(--sg-color-link-hover);
}

.streamslot-list-title {
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.2;
}

.navbar,
.dropdown-menu,
.card,
.modal-content {
    background-color: var(--sg-color-surface-1);
    border-color: var(--sg-color-border);
}

.card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--sg-color-border) 82%, #ffffff 7%);
    background:
        linear-gradient(160deg,
            color-mix(in srgb, var(--sg-color-surface-1) 97%, #ffffff 2%) 0%,
            color-mix(in srgb, var(--sg-color-surface-1) 97%, transparent) 60%,
            color-mix(in srgb, #000000 4%, transparent) 100%);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 6%, transparent),
        inset 0 -1px 0 color-mix(in srgb, #000000 14%, transparent),
        0 .55rem 1.2rem color-mix(in srgb, #000000 18%, transparent);
    backdrop-filter: blur(14px) saturate(126%);
    -webkit-backdrop-filter: blur(14px) saturate(126%);
    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

.card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(125deg,
            color-mix(in srgb, #ffffff 0.6%, transparent) 0%,
            transparent 64%,
            color-mix(in srgb, #000000 1%, transparent) 100%);
}

.card-header,
.card-footer {
    position: relative;
    z-index: 1;
    background-color: color-mix(in srgb, var(--sg-color-surface-2) 62%, transparent);
    border-color: color-mix(in srgb, var(--sg-color-border) 82%, #ffffff 5%);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
}

.card-body {
    position: relative;
    z-index: 1;
}

.card.card-hover:hover,
.card.card-link:hover,
a.card:hover {
    border-color: color-mix(in srgb, #ffffff 34%, var(--sg-color-border));
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent),
        inset 0 -1px 0 color-mix(in srgb, #000000 14%, transparent),
        0 .75rem 1.5rem color-mix(in srgb, #000000 24%, transparent);
    transform: translateY(-1px);
}

[data-bs-theme="light"] .card {
    border-color: color-mix(in srgb, var(--sg-color-border) 86%, #ffffff 7%);
    background:
        linear-gradient(165deg,
            color-mix(in srgb, #ffffff 98%, var(--sg-color-surface-2) 2%) 0%,
            color-mix(in srgb, #ffffff 97%, var(--sg-color-surface-2) 3%) 62%,
            color-mix(in srgb, #d7dce3 4%, transparent) 100%);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 82%, transparent),
        inset 0 -1px 0 color-mix(in srgb, #d8dde5 10%, transparent),
        0 .4rem .9rem color-mix(in srgb, #3d4653 7%, transparent);
}

[data-bs-theme="light"] .card-header,
[data-bs-theme="light"] .card-footer {
    background-color: color-mix(in srgb, #ffffff 90%, var(--sg-color-surface-2) 10%);
    border-color: color-mix(in srgb, var(--sg-color-border) 88%, #ffffff 6%);
}

[data-bs-theme="light"] .card.card-hover:hover,
[data-bs-theme="light"] .card.card-link:hover,
[data-bs-theme="light"] a.card:hover {
    border-color: color-mix(in srgb, #1f2937 42%, var(--sg-color-border));
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 86%, transparent),
        inset 0 -1px 0 color-mix(in srgb, #d8dde5 12%, transparent),
        0 .5rem 1rem color-mix(in srgb, #2d3643 9%, transparent);
}

[data-bs-theme="dark"] .navbar {
    background-color: #0B0B0B;
    border-color: #1D1D1D;
}

.nav-link {
    color: var(--sg-color-text-muted);
}

.nav-link:hover,
.nav-link:focus-visible,
.nav-link.active {
    color: var(--sg-color-primary);
}

.nav-link.text-reset {
    color: var(--sg-color-text-muted) !important;
}

.nav-link.text-reset:hover,
.nav-link.text-reset:focus-visible,
.nav-link.text-reset.active {
    color: var(--sg-color-primary) !important;
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--sg-color-primary);
    color: var(--sg-color-primary-contrast);
}

#themeToggle .dropdown-item:hover,
#themeToggle .dropdown-item:focus-visible {
    background:
        linear-gradient(150deg,
            color-mix(in srgb, var(--sg-color-surface-2) 78%, #ffffff 6%) 0%,
            color-mix(in srgb, var(--sg-color-surface-2) 62%, transparent) 100%);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 12%, transparent);
    color: var(--sg-color-text);
}

#themeToggle .dropdown-item.active,
#themeToggle .dropdown-item:active {
    background:
        linear-gradient(150deg,
            color-mix(in srgb, var(--sg-color-primary-soft) 86%, #ffffff 7%) 0%,
            color-mix(in srgb, var(--sg-color-primary-soft) 64%, transparent) 100%);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 18%, transparent);
    color: var(--sg-color-text);
}

[data-bs-theme="light"] #themeToggle .dropdown-item:hover,
[data-bs-theme="light"] #themeToggle .dropdown-item:focus-visible {
    background:
        linear-gradient(150deg,
            color-mix(in srgb, var(--sg-color-surface-2) 84%, #ffffff 12%) 0%,
            color-mix(in srgb, var(--sg-color-surface-2) 72%, #ffffff 6%) 100%);
}

[data-bs-theme="light"] #themeToggle .dropdown-item.active,
[data-bs-theme="light"] #themeToggle .dropdown-item:active {
    background:
        linear-gradient(150deg,
            color-mix(in srgb, var(--sg-color-primary-soft) 92%, #ffffff 14%) 0%,
            color-mix(in srgb, var(--sg-color-primary-soft) 76%, #ffffff 8%) 100%);
}

#menu_user_dropdown .dropdown-item:hover,
#menu_user_dropdown .dropdown-item:focus-visible {
    background:
        linear-gradient(150deg,
            color-mix(in srgb, var(--sg-color-surface-2) 78%, #ffffff 6%) 0%,
            color-mix(in srgb, var(--sg-color-surface-2) 62%, transparent) 100%);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 12%, transparent);
    color: var(--sg-color-text);
}

#menu_user_dropdown .dropdown-item.active,
#menu_user_dropdown .dropdown-item:active {
    background:
        linear-gradient(150deg,
            color-mix(in srgb, var(--sg-color-primary-soft) 86%, #ffffff 7%) 0%,
            color-mix(in srgb, var(--sg-color-primary-soft) 64%, transparent) 100%);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 18%, transparent);
    color: var(--sg-color-text);
}

[data-bs-theme="light"] #menu_user_dropdown .dropdown-item:hover,
[data-bs-theme="light"] #menu_user_dropdown .dropdown-item:focus-visible {
    background:
        linear-gradient(150deg,
            color-mix(in srgb, var(--sg-color-surface-2) 84%, #ffffff 12%) 0%,
            color-mix(in srgb, var(--sg-color-surface-2) 72%, #ffffff 6%) 100%);
}

[data-bs-theme="light"] #menu_user_dropdown .dropdown-item.active,
[data-bs-theme="light"] #menu_user_dropdown .dropdown-item:active {
    background:
        linear-gradient(150deg,
            color-mix(in srgb, var(--sg-color-primary-soft) 92%, #ffffff 14%) 0%,
            color-mix(in srgb, var(--sg-color-primary-soft) 76%, #ffffff 8%) 100%);
}

.btn {
    position: relative;
    isolation: isolate;
    backdrop-filter: blur(4px) saturate(106%);
    -webkit-backdrop-filter: blur(4px) saturate(106%);
    background-image: linear-gradient(
        160deg,
        color-mix(in srgb, #ffffff 6%, transparent) 0%,
        color-mix(in srgb, #000000 8%, transparent) 100%
    );
    border-color: color-mix(in srgb, var(--bs-btn-border-color) 88%, #ffffff 4%);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 10%, transparent),
        0 .12rem .35rem color-mix(in srgb, #000000 12%, transparent);
    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background-color .18s ease,
        background-image .18s ease,
        transform .18s ease;
}

.btn:hover {
    border-color: color-mix(in srgb, var(--bs-btn-border-color) 84%, #ffffff 8%);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 14%, transparent),
        0 .18rem .45rem color-mix(in srgb, #000000 14%, transparent);
    transform: translateY(0);
}

.btn:active,
.btn.active {
    transform: translateY(0);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent),
        0 .08rem .25rem color-mix(in srgb, #000000 10%, transparent);
}

.btn-primary {
    color: var(--sg-color-primary-contrast);
    font-size: 1.075rem;
    font-weight: 700;
    --bs-btn-color: var(--sg-color-primary-contrast);
    --bs-btn-bg: color-mix(in srgb, var(--sg-color-primary-ui) 34%, transparent);
    --bs-btn-border-color: color-mix(in srgb, var(--sg-color-primary) 30%, #ffffff 5%);
    --bs-btn-hover-color: var(--sg-color-primary-contrast);
    --bs-btn-hover-bg: color-mix(in srgb, var(--sg-color-primary-ui-hover) 39%, transparent);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--sg-color-primary) 33%, #ffffff 8%);
    --bs-btn-active-color: var(--sg-color-primary-contrast);
    --bs-btn-active-bg: color-mix(in srgb, var(--sg-color-primary-ui-active) 37%, transparent);
    --bs-btn-active-border-color: color-mix(in srgb, var(--sg-color-primary) 30%, #ffffff 4%);
    --bs-btn-focus-shadow-rgb: var(--sg-color-primary-rgb);
    border-color: color-mix(in srgb, var(--sg-color-primary) 30%, #ffffff 5%);
    backdrop-filter: blur(6px) saturate(102%);
    -webkit-backdrop-filter: blur(6px) saturate(102%);
    background-image: linear-gradient(
        155deg,
        color-mix(in srgb, #ffffff 10%, var(--sg-color-primary) 2%) 0%,
        color-mix(in srgb, var(--sg-color-primary) 6%, transparent) 48%,
        color-mix(in srgb, #000000 7%, transparent) 100%
    );
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 16%, transparent),
        inset 0 -1px 0 color-mix(in srgb, #000000 10%, transparent),
        0 .14rem .38rem color-mix(in srgb, #000000 13%, transparent);
}

.btn-primary::before {
    content: none;
}

.btn-primary:hover {
    border-color: color-mix(in srgb, var(--sg-color-primary) 34%, #ffffff 7%);
    background-image: linear-gradient(
        155deg,
        color-mix(in srgb, #ffffff 12%, var(--sg-color-primary) 3%) 0%,
        color-mix(in srgb, var(--sg-color-primary) 7%, transparent) 48%,
        color-mix(in srgb, #000000 8%, transparent) 100%
    );
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 18%, transparent),
        inset 0 -1px 0 color-mix(in srgb, #000000 10%, transparent),
        0 .18rem .45rem color-mix(in srgb, #000000 15%, transparent);
}

.btn-primary:active,
.btn-primary.active {
    background-image: linear-gradient(
        155deg,
        color-mix(in srgb, #ffffff 8%, var(--sg-color-primary) 2%) 0%,
        color-mix(in srgb, var(--sg-color-primary) 5%, transparent) 46%,
        color-mix(in srgb, #000000 8%, transparent) 100%
    );
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 12%, transparent),
        inset 0 -1px 0 color-mix(in srgb, #000000 12%, transparent),
        0 .1rem .3rem color-mix(in srgb, #000000 12%, transparent);
}

#slot_header_right_bar .ti-power.text-green,
#slot_header_right_bar .ti-power.text-success {
    color: var(--sg-color-power-on) !important;
}

.form-control,
.form-select,
.form-check-input {
    background-color: var(--sg-color-surface-2);
    border-color: var(--sg-color-border);
    color: var(--sg-color-text);
}

.form-control::placeholder {
    color: var(--sg-color-text-muted);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--sg-color-primary);
    box-shadow: 0 0 0 .25rem var(--sg-color-focus-ring);
}

.form-switch .form-check-input {
    border-color: color-mix(in srgb, var(--sg-color-border) 78%, #ffffff 10%);
    background-color: color-mix(in srgb, var(--sg-color-surface-2) 86%, transparent);
    background-image:
        radial-gradient(circle, var(--sg-color-toggle-knob) 0 54%, transparent 56%),
        linear-gradient(155deg,
            color-mix(in srgb, #ffffff 6%, transparent) 0%,
            color-mix(in srgb, #000000 8%, transparent) 100%);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 10%, transparent),
        inset 0 -1px 0 color-mix(in srgb, #000000 10%, transparent);
    backdrop-filter: blur(6px) saturate(112%);
    -webkit-backdrop-filter: blur(6px) saturate(112%);
}

.form-switch .form-check-input:checked {
    border-color: color-mix(in srgb, var(--sg-color-primary-hover) 72%, var(--sg-color-border));
    background-color: color-mix(in srgb, var(--sg-color-primary-hover) 54%, transparent);
    background-image:
        radial-gradient(circle, var(--sg-color-toggle-knob) 0 54%, transparent 56%),
        linear-gradient(155deg,
            color-mix(in srgb, var(--sg-color-primary-hover) 56%, #ffffff 8%) 0%,
            color-mix(in srgb, var(--sg-color-primary-soft) 50%, transparent) 100%);
}

[data-bs-theme="light"] .form-switch .form-check-input:checked {
    --sg-color-toggle-knob: #252a30;
}

.form-check-input:checked[type="checkbox"] {
    --tblr-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%2317191d' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.form-check-input:indeterminate {
    --tblr-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%2317191d' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus,
[data-bs-theme="dark"] .form-check-input:focus,
[data-bs-theme="dark"] .form-control:focus-visible,
[data-bs-theme="dark"] .form-select:focus-visible,
[data-bs-theme="dark"] .form-check-input:focus-visible {
    box-shadow: 0 0 0 .16rem color-mix(in srgb, var(--sg-color-focus-ring) 82%, transparent);
}

[data-bs-theme="dark"] .form-check-input:checked {
    background-color: var(--sg-color-primary-hover);
    border-color: color-mix(in srgb, var(--sg-color-primary-hover) 80%, #ffffff 10%);
}

[data-bs-theme="dark"] .form-switch .form-check-input:checked {
    --tblr-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2308090b'/%3e%3c/svg%3e");
    background-image:
        var(--tblr-form-switch-bg),
        linear-gradient(155deg,
            color-mix(in srgb, var(--sg-color-primary-hover) 56%, #ffffff 8%) 0%,
            color-mix(in srgb, var(--sg-color-primary-soft) 50%, transparent) 100%);
}

[data-bs-theme="dark"] .form-check-input:checked[type="checkbox"] {
    --tblr-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%2317191d' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

[data-bs-theme="dark"] .form-check-input:indeterminate {
    background-color: var(--sg-color-primary-hover);
    border-color: color-mix(in srgb, var(--sg-color-primary-hover) 80%, #ffffff 10%);
    --tblr-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%2317191d' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
}

.btn:focus-visible,
a:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible {
    outline: none;
    box-shadow: 0 0 0 .25rem var(--sg-color-focus-ring);
}

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--sg-color-text);
    --bs-table-border-color: var(--sg-color-border);
    --bs-table-striped-bg: var(--sg-color-surface-2);
    --bs-table-striped-color: var(--sg-color-text);
}

[data-bs-theme="dark"] .navbar-brand {
    position: relative;
    isolation: isolate;
}

[data-bs-theme="dark"] .navbar-brand::before {
    content: "";
    position: absolute;
    inset: 15%;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255, 196, 0, 0.23) 0%, rgba(255, 196, 0, 0) 74%);
    pointer-events: none;
    z-index: 0;
}

[data-bs-theme="dark"] .navbar-brand .navbar-brand-image {
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 0 .4rem rgba(255, 196, 0, 0.48)) drop-shadow(0 0 .14rem rgba(255, 196, 0, 0.34));
}

kbd {
    background-color: var(--sg-color-kbd-bg);
    color: var(--sg-color-kbd-text);
    border: 1px solid var(--sg-color-kbd-border);
}

.list-group-item.active {
    background-color: var(--sg-color-primary);
    border-color: var(--sg-color-primary);
    color: var(--sg-color-primary-contrast);
}

.list-group-transparent .list-group-item.active {
    background:
        linear-gradient(145deg,
            color-mix(in srgb, var(--sg-color-primary-soft) 82%, #ffffff 4%) 0%,
            color-mix(in srgb, var(--sg-color-primary-soft) 52%, transparent) 100%);
    color: var(--sg-color-text);
    font-weight: 600;
    border-color: color-mix(in srgb, var(--sg-color-primary) 36%, #ffffff 14%);
    border-left-color: var(--sg-color-primary);
    border-left-width: .2rem;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 24%, transparent),
        inset 0 -1px 0 color-mix(in srgb, #000000 16%, transparent),
        0 .35rem .85rem color-mix(in srgb, #000000 22%, transparent);
    backdrop-filter: blur(11px) saturate(128%);
    -webkit-backdrop-filter: blur(11px) saturate(128%);
}

.list-group-transparent .list-group-item.active:hover,
.list-group-transparent .list-group-item.active:focus-visible {
    color: var(--sg-color-text);
    background:
        linear-gradient(145deg,
            color-mix(in srgb, var(--sg-color-primary-soft) 92%, #ffffff 6%) 0%,
            color-mix(in srgb, var(--sg-color-primary-soft) 64%, transparent) 100%);
}

[data-bs-theme="light"] .list-group-transparent .list-group-item.active {
    background:
        linear-gradient(145deg,
            color-mix(in srgb, var(--sg-color-primary-soft) 92%, #ffffff 14%) 0%,
            color-mix(in srgb, var(--sg-color-primary-soft) 72%, #ffffff 10%) 100%);
    border-color: color-mix(in srgb, var(--sg-color-primary) 52%, var(--sg-color-border));
    border-left-color: color-mix(in srgb, var(--sg-color-primary) 88%, #7a5600);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 72%, transparent),
        inset 0 -1px 0 color-mix(in srgb, #d6dccf 12%, transparent),
        0 .25rem .65rem color-mix(in srgb, #5b6470 12%, transparent);
    backdrop-filter: blur(9px) saturate(116%);
    -webkit-backdrop-filter: blur(9px) saturate(116%);
}

[data-bs-theme="light"] .list-group-transparent .list-group-item.active:hover,
[data-bs-theme="light"] .list-group-transparent .list-group-item.active:focus-visible {
    background:
        linear-gradient(145deg,
            color-mix(in srgb, var(--sg-color-primary-soft) 98%, #ffffff 18%) 0%,
            color-mix(in srgb, var(--sg-color-primary-soft) 78%, #ffffff 12%) 100%);
}

#slot_page .nav-tabs .nav-link.active .icon,
#slot_page .nav-tabs .nav-link.active .nav-link-icon {
    color: var(--sg-color-primary);
}

#slot_page .nav-segmented .nav-link.active {
    background: var(--sg-color-primary-soft);
    border-color: color-mix(in srgb, var(--sg-color-primary) 45%, var(--sg-color-border));
    color: var(--sg-color-text);
}

.datagrid-title {
    color: var(--sg-color-text-muted);
}

#slot_page .datagrid .datagrid-title.text-info {
    color: color-mix(in srgb, var(--sg-color-primary) 34%, var(--sg-color-text)) !important;
}