/*
 * 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-surface-fieldset: #171717;
    --sg-color-border: #2A2A2A;
    --sg-color-text: #F2F2F2;
    --sg-color-text-muted: #B8B8BE;
    --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-surface-fieldset: #FCFCFA;
    --sg-color-border: #E5E7EB;
    --sg-color-text: #111111;
    --sg-color-text-muted: #5B6270;
    --sg-color-primary: #EFBA00;
    --sg-color-primary-hover: #E0AC00;
    --sg-color-primary-ui: #E0AC00;
    --sg-color-primary-ui-hover: #CE9C00;
    --sg-color-primary-ui-active: #BE8E00;
    --sg-color-link: #9A6E00;
    --sg-color-link-hover: #7A5600;
    --sg-color-primary-soft: rgba(239, 186, 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(239, 186, 0, 0.22);
    --sg-color-primary-rgb: 239, 186, 0;
    --sg-color-primary-contrast: #111111;
}

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

/* Tabler defaults form-fieldset to surface-secondary; use a lighter step so it doesn't look disabled.
   Also override UA fieldset min-inline-size:min-content so wide tables/inputs don't expand the page. */
.form-fieldset {
    background: var(--sg-color-surface-fieldset);
    min-width: 0;
    min-inline-size: 0;
    max-width: 100%;
}

.table-responsive {
    min-width: 0;
    max-width: 100%;
}

.bg-primary-soft {
    background-color: var(--sg-color-primary-soft) !important;
}

a,
.nav-link,
.dropdown-item,
.btn,
.page-title,
.page-subtitle,
.card-title,
.empty-title,
.h1
.h2
.h3
.h4
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);
    /* Removed backdrop-filter: causes significant lag on accordion/layout changes (Chromium) */
    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) 92%, var(--sg-color-surface-1));
    border-color: color-mix(in srgb, var(--sg-color-border) 82%, #ffffff 5%);
    /* Removed backdrop-filter: causes lag on accordion open (Chromium) */
}

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

.card.card-hover:hover,
.card.card-link:not(.sg-card-hover-border):hover,
a.card:not(.sg-card-hover-border):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);
}

.card.sg-card-hover-border:hover {
    border-color: color-mix(in srgb, #ffffff 34%, var(--sg-color-border));
}

[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:not(.sg-card-hover-border):hover,
[data-bs-theme="light"] a.card:not(.sg-card-hover-border):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="light"] .card.sg-card-hover-border:hover {
    border-color: color-mix(in srgb, #1f2937 42%, var(--sg-color-border));
}

.sg-messages .alert {
    --sg-alert-color: var(--tblr-info);

    color: var(--sg-color-text);
    border: 1px solid color-mix(in srgb, var(--sg-alert-color) 34%, var(--sg-color-border));
    border-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    background:
        linear-gradient(160deg,
            color-mix(in srgb, var(--sg-alert-color) 10%, var(--sg-color-surface-1) 90%) 0%,
            color-mix(in srgb, var(--sg-alert-color) 5%, var(--sg-color-surface-1) 95%) 68%,
            color-mix(in srgb, #000000 5%, transparent) 100%);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent),
        inset 0 -1px 0 color-mix(in srgb, #000000 12%, transparent),
        0 .5rem 1.2rem color-mix(in srgb, #000000 18%, transparent);
    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background-color .18s ease;
}

.sg-messages .alert:hover {
    border-color: color-mix(in srgb, var(--sg-alert-color) 46%, var(--sg-color-border));
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 10%, transparent),
        inset 0 -1px 0 color-mix(in srgb, #000000 12%, transparent),
        0 .65rem 1.35rem color-mix(in srgb, #000000 22%, transparent);
}

.sg-messages .alert-info {
    --sg-alert-color: var(--tblr-info);
}

.sg-messages .alert-success {
    --sg-alert-color: var(--tblr-success);
}

.sg-messages .alert-warning {
    --sg-alert-color: var(--tblr-warning);
}

.sg-messages .alert-danger {
    --sg-alert-color: var(--tblr-danger);
}

.sg-messages .alert-icon {
    color: color-mix(in srgb, var(--sg-alert-color) 86%, #ffffff 14%);
}

[data-bs-theme="light"] .sg-messages .alert {
    border-color: color-mix(in srgb, var(--sg-alert-color) 30%, var(--sg-color-border));
    background:
        linear-gradient(160deg,
            color-mix(in srgb, var(--sg-alert-color) 7%, #ffffff 93%) 0%,
            color-mix(in srgb, var(--sg-alert-color) 4%, #ffffff 96%) 68%,
            color-mix(in srgb, #d7dce3 4%, transparent) 100%);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 84%, 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"] .sg-messages .alert-icon {
    color: color-mix(in srgb, var(--sg-alert-color) 84%, #111111 16%);
}

[data-bs-theme="light"] .sg-messages .alert:hover {
    border-color: color-mix(in srgb, var(--sg-alert-color) 42%, var(--sg-color-border));
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 88%, transparent),
        inset 0 -1px 0 color-mix(in srgb, #d8dde5 10%, transparent),
        0 .5rem 1rem color-mix(in srgb, #3d4653 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_help_dropdown .dropdown-item:hover,
#menu_help_dropdown .dropdown-item:focus-visible,
#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_help_dropdown .dropdown-item.active {
    background: color-mix(in srgb, var(--sg-color-primary-soft) 48%, 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_help_dropdown .dropdown-item:hover,
[data-bs-theme="light"] #menu_help_dropdown .dropdown-item:focus-visible,
[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_help_dropdown .dropdown-item.active {
    background: color-mix(in srgb, var(--sg-color-primary-soft) 56%, transparent);
}

[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;
    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-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:focus-visible,
.btn-outline-secondary:active {
    color: var(--bs-btn-color);
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
}

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

.btn-floating-save {
    position: fixed;
    z-index: 1030;
    right: clamp(1rem, 8vw, 10rem);
    bottom: clamp(1rem, 3vh, 2rem);
}

#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,
.form-select {
    max-width: 100%;
    min-width: 0;
}

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

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

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

[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 .slot-detail-card {
    overflow: visible;
}

#slot_page .slot-detail-card > .card-body {
    overflow: hidden;
}

/*
 * Studio tab: pin the flex shell to the visual viewport without killing pull-to-refresh.
 * Do not set overflow/overscroll on html|body|.page — that disables browser PTR.
 * Clip only inside #page_wrapper so the zoom plane cannot grow document scroll.
 *
 * base.css uses min-height:100dvh on body/.page; in minimal-ui that is taller than
 * the visible area (bottom chrome), so the document scrolls until something
 * (e.g. a fullscreen cycle) resettles layout. Drive height from --studio-vv-height
 * (visualViewport.height) instead.
 */
html:has(#slot_page.studio-lock),
body:has(#slot_page.studio-lock) {
    min-height: 0;
    height: var(--studio-vv-height, 100svh);
    max-height: var(--studio-vv-height, 100svh);
}

body:has(#slot_page.studio-lock) > .page {
    min-height: 0;
    height: var(--studio-vv-height, 100svh);
    max-height: var(--studio-vv-height, 100svh);
}

body:has(#slot_page.studio-lock) #page_wrapper,
body:has(#slot_page.studio-lock) #page_wrapper > .page-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
}

#slot_page.studio-lock,
#slot_page.studio-lock .slot-detail-card,
#slot_page.studio-lock .slot-detail-card > .card-body {
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
}

#slot_page.studio-lock,
#slot_page.studio-lock .slot-detail-card {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

#slotTabBar,
#slotTabBar .nav-link {
    border-radius: 0;
}

[data-bs-theme="dark"] #slot_page .nav-tabs.slot-state-streaming {
    background-color: color-mix(in srgb, var(--tblr-purple, #ae3ec9) 34%, transparent) !important;
}

[data-bs-theme="dark"] #slot_page .nav-tabs.slot-state-recording {
    background-color: color-mix(in srgb, var(--tblr-orange, #f76707) 34%, transparent) !important;
}

#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);
}

/* Tabler datagrid min track is 15rem; long URLs/stream ids must shrink and wrap on phones. */
.datagrid {
    --tblr-datagrid-item-width: min(15rem, 100%);
}

.datagrid-item {
    min-width: 0;
}

.datagrid-content {
    overflow-wrap: anywhere;
    word-break: break-word;
}

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

#slot_page .studio-controls-dropdown {
    left: auto !important;
}

#slot_page .studio-controls-cluster {
    user-select: none;
}

#slot_page .studio-controls-bar {
    background-color: color-mix(in srgb, var(--sg-color-surface-1) 82%, transparent);
    backdrop-filter: blur(8px);
    width: fit-content;
    flex: 0 0 auto;
    align-self: flex-end;
}

#slot_page .studio-controls-dock {
    /* Re-apply body color from local theme tokens; inherited color from light-mode
       body stays black even when this dock sets data-bs-theme="dark". */
    color: var(--sg-color-text);
    /* Above desktop iframe + view-only capture; below toasts (6) / paste dialog (1060).
       translate3d in the template promotes a compositor layer so Chromium fullscreen
       does not let the iframe paint over earlier/lower siblings on multi-monitor. */
    z-index: 5;
    isolation: isolate;
    touch-action: none;
    user-select: none;
    cursor: default;
}

#slot_page .studio-controls-dock.is-dragging {
    cursor: default;
}

#slot_page .studio-controls-bar .btn,
#slot_page .studio-controls-bar .btn:focus,
#slot_page .studio-controls-bar .btn:active {
    background-color: transparent;
    background-image: none;
    box-shadow: none;
    color: var(--sg-color-text-muted);
}

/* Hover highlight only for real pointer hover — tap must not stick primary. */
@media (hover: hover) and (pointer: fine) {
    #slot_page .studio-controls-bar .btn:hover {
        background-color: transparent;
        background-image: none;
        box-shadow: none;
        color: var(--sg-color-primary);
    }
}

#slot_page .studio-controls-bar .btn:focus-visible {
    background-color: transparent;
    background-image: none;
    box-shadow: none;
    color: var(--sg-color-primary);
}

#slot_page .studio-stage {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

/* Studio zoom plane: logical desktop (often 1920×1080), CSS-scaled into the stage. */
#slot_page .studio-desktop-viewport {
    min-width: 0;
    min-height: 0;
    /* Defaults until JS pins to the visual (above minimal-ui chrome) box. */
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* Stronger than hidden where supported: no scroll container, just clip. */
    overflow: clip;
    /* Keep the logical (pre-scale) plane from expanding page scroll on mobile. */
    contain: paint;
    /* Letterbox bars (same deep dark as dark-theme navbar). */
    background-color: #0B0B0B;
}

#slot_page .studio-desktop-plane {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: 0 0;
    /* Abspos + explicit size; never contribute to ancestor scroll height. */
    max-width: none;
    max-height: none;
    background-color: #0B0B0B;
}

#slot_page .studio-desktop-plane iframe {
    background-color: #0B0B0B;
}

#slot_page .studio-participants-panel {
    width: fit-content;
    max-width: min(16rem, 55vw);
    overflow: hidden;
    background-color: color-mix(in srgb, var(--sg-color-surface-1) 82%, transparent);
    backdrop-filter: blur(8px);
    user-select: none;
    cursor: default;
    text-align: end;
}

#slot_page .studio-participants-panel,
#slot_page .studio-participants-panel * {
    user-select: none;
}

#slot_page .studio-participants-list {
    max-width: 100%;
    max-height: 12rem;
    overflow-x: hidden;
    overflow-y: auto;
}

#slot_page .studio-participants-list > li {
    max-width: 100%;
    min-width: 0;
}

#slot_page .studio-participants-name {
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
}

#slot_page .studio-participant-controlling {
    font-weight: 600;
}

#slot_page .studio-viewonly-capture {
    z-index: 1;
    cursor: default;
}

#slot_page .studio-toast-container {
    z-index: 6;
    pointer-events: none;
}

#slot_page .studio-toast-container .toast,
#slot_page .studio-toast {
    --sg-toast-bg: var(--tblr-secondary-bg, var(--bs-secondary-bg));
    pointer-events: auto;
    background-color: color-mix(
            in srgb,
            color-mix(in srgb, var(--sg-toast-bg) 82%, #ffffff 18%) 88%,
            transparent
    ) !important;
    border: 1px solid color-mix(in srgb, #ffffff 62%, transparent);
    box-shadow: 0 0.35rem 0.85rem color-mix(in srgb, #000000 28%, transparent);
}

#slot_page .studio-toast.text-bg-info {
    --sg-toast-bg: var(--tblr-info);
}

#slot_page .studio-toast.text-bg-success {
    --sg-toast-bg: var(--tblr-success);
}

#slot_page .studio-toast.text-bg-warning {
    --sg-toast-bg: var(--tblr-warning);
}

#slot_page .studio-toast.text-bg-danger {
    --sg-toast-bg: var(--tblr-danger);
}

#slot_page .studio-toast.text-bg-primary {
    --sg-toast-bg: var(--tblr-primary);
}

#slot_page .studio-toast .toast-body {
    font-weight: 600;
}

#slot_page .studio-take-control-btn.is-flashing {
    animation: studio-take-control-flash 0.5s ease-in-out 3;
}

@keyframes studio-take-control-flash {
    0%,
    100% {
        color: var(--tblr-primary);
        background-color: transparent;
        border-color: var(--tblr-primary);
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--tblr-primary) 45%, transparent);
    }

    50% {
        color: var(--tblr-primary-fg, #fff);
        background-color: var(--tblr-primary);
        border-color: var(--tblr-primary);
        box-shadow: 0 0 0 0.35rem color-mix(in srgb, var(--tblr-primary) 35%, transparent);
    }
}

#slot_page .studio-controls-bar .btn.studio-clipboard-btn.is-flashing {
    animation: studio-clipboard-flash 0.5s ease-in-out 3;
}

@keyframes studio-clipboard-flash {
    0%,
    100% {
        color: var(--sg-color-text-muted);
        background-color: transparent;
        box-shadow: none;
    }

    50% {
        color: var(--tblr-primary);
        background-color: transparent;
        box-shadow: 0 0 0 0.35rem color-mix(in srgb, var(--tblr-primary) 35%, transparent);
    }
}

#slot_page .slot-state-stack {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    --slot-fade-duration: 250ms;
    --slot-fade-easing: cubic-bezier(.7, 0, .84, 0);
}

#slot_page .slot-state-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    overflow: clip;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* Ease-in: slow start, accelerates into the end (suck-in). */
    transition: opacity var(--slot-fade-duration) var(--slot-fade-easing),
    visibility 0s linear var(--slot-fade-duration);
    will-change: opacity;
}

#slot_page .slot-state-layer.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity var(--slot-fade-duration) var(--slot-fade-easing),
    visibility 0s linear 0s;
}

#slot_page .slot-state-layer-studio {
    z-index: 1;
}

#slot_page .studio-connection-shell {
    min-width: 0;
    min-height: 0;
    isolation: isolate;
    overflow: hidden;
    overflow: clip;
    background: #0B0B0B;
}

#slot_page .studio-connect-layer {
    z-index: 2;
    overflow: hidden;
    background: #0B0B0B;
    transition: background-color 900ms cubic-bezier(.22, 1, .36, 1);
}

#slot_page .studio-connect-layer.is-joining {
    background: #0B0B0B;
}

#slot_page .studio-connect-form {
    z-index: 1;
}

#slot_page .studio-connect-morph {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 14rem;
    height: 3.75rem;
    border-radius: var(--tblr-border-radius, .4rem);
    background: 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%
    ),
    color-mix(in srgb, var(--sg-color-primary-ui) 34%, transparent);
    border: 1px solid color-mix(in srgb, var(--sg-color-primary) 30%, #ffffff 5%);
    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);
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    transition: transform 900ms cubic-bezier(.22, 1, .36, 1),
    border-radius 900ms cubic-bezier(.22, 1, .36, 1),
    background 900ms cubic-bezier(.22, 1, .36, 1),
    border-color 900ms cubic-bezier(.22, 1, .36, 1),
    box-shadow 900ms cubic-bezier(.22, 1, .36, 1),
    opacity 160ms ease;
    will-change: transform, opacity, border-radius, background;
}

#slot_page .studio-connect-layer.is-joining .studio-connect-morph {
    opacity: 1;
    border-radius: 0;
    border-color: transparent;
    box-shadow: none;
    background: #0B0B0B;
    transform: translate(-50%, -50%) scale(42);
}

#slot_page .studio-connect-layer.is-joining-instant,
#slot_page .studio-connect-layer.is-joining-instant .studio-connect-morph,
#slot_page .studio-connect-layer.is-joining-instant .studio-connect-btn,
#slot_page .studio-connect-layer.is-joining-instant .studio-connect-btn-label {
    transition: none !important;
}

#slot_page .studio-connect-btn {
    position: relative;
    z-index: 1;
    transition: color .18s ease,
    background-color .18s ease,
    background-image .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

#slot_page .studio-connect-btn-label {
    display: inline-flex;
    align-items: center;
    transition: opacity 180ms ease;
}

#slot_page .studio-connect-btn.is-fading {
    color: transparent;
    background-color: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

#slot_page .studio-connect-btn.is-fading .studio-connect-btn-label {
    opacity: 0;
}

#slot_page .studio-session-layer {
    z-index: 1;
    background: #0B0B0B;
}

/* Session reveal on connect: wait for resize, then fade in. */
#slot_page .studio-layer-transition-enter {
    transition: opacity 1000ms cubic-bezier(.22, 1, .36, 1) 600ms,
    transform 1000ms cubic-bezier(.22, 1, .36, 1) 600ms;
    will-change: opacity, transform;
}

/* Connect overlay fade-out on connect: stretch surface → black. */
#slot_page .studio-layer-transition-connect-leave {
    transition: opacity 1000ms cubic-bezier(.22, 1, .36, 1),
    transform 1000ms cubic-bezier(.22, 1, .36, 1);
    will-change: opacity, transform;
}

/* Disconnect / connect-overlay return: keep snappy. */
#slot_page .studio-layer-transition-leave,
#slot_page .studio-layer-transition-connect-enter {
    transition: opacity 140ms cubic-bezier(.4, 0, 1, 1),
    transform 140ms cubic-bezier(.4, 0, 1, 1);
    will-change: opacity, transform;
}

#slot_page .studio-layer-hidden {
    opacity: 0;
    transform: scale(.992);
}

#slot_page .studio-layer-visible {
    opacity: 1;
    transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
    #slot_page .slot-state-stack {
        --slot-fade-duration: .01ms;
    }

    #slot_page .studio-layer-transition-enter,
    #slot_page .studio-layer-transition-leave,
    #slot_page .studio-layer-transition-connect-enter,
    #slot_page .studio-layer-transition-connect-leave,
    #slot_page .studio-connect-layer,
    #slot_page .studio-connect-morph,
    #slot_page .studio-connect-btn,
    #slot_page .studio-connect-btn-label {
        transition-duration: .01ms;
        transition-delay: 0ms;
    }
}

/* Login hero: responsive sizing for mobile */
.login-hero-logo {
    width: 10rem;
    height: 10rem;
    max-width: 100%;
    object-fit: contain;
}
.login-hero-textmark {
    font-size: 2.5rem;
}
.login-hero-claim {
    font-size: 1.25rem;
}
@media (min-width: 576px) {
    .login-hero-logo {
        width: 16rem;
        height: 16rem;
    }
    .login-hero-textmark {
        font-size: 3.5rem;
    }
    .login-hero-claim {
        font-size: 1.5rem;
    }
}
@media (min-width: 992px) {
    .login-hero-logo {
        width: 32rem;
        height: 32rem;
    }
    .login-hero-textmark {
        font-size: 5rem;
    }
    .login-hero-claim {
        font-size: 2rem; /* h1 default */
    }
}

/* Landing page */
.landing-page {
    padding-bottom: 4rem;
}
.landing-hero {
    padding-top: 3rem;
    padding-bottom: 4rem;
}
.landing-hero-subline {
    font-size: 1.125rem;
}
.landing-section {
    padding-top: 3rem;
    padding-bottom: 3rem;
}
.landing-cta {
    padding-top: 4rem;
    padding-bottom: 4rem;
}
.landing-section-title {
    font-size: 1.5rem;
}