:root {
    --sb-bg: #0d0f14;
    --sb-surface: #151821;
    --sb-surface-elevated: #1d222d;
    --sb-surface-hover: #232936;
    --sb-border: #2b3240;
    --sb-text: #f8f9fa;
    --sb-text-muted: #a8b0bd;
    --sb-primary: #f5c542;
    --sb-primary-hover: #ffd761;
    --sb-primary-active: #d9aa28;
    --sb-primary-text: #17130a;
    --sb-accent: #ff6b9e;
    --sb-success: #22c55e;
    --sb-info: #4da3ff;
    --sb-warning: #f59e0b;
    --sb-danger: #ef4444;
    --sb-purple: #8b5cf6;
    --sb-radius-sm: 0.25rem;
    --sb-radius-md: 0.5rem;
    --sb-radius-lg: 0.75rem;
    --sb-radius-xl: 1rem;
    --sb-shadow-card: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.28);
    --sb-shadow-focus: 0 0 0 0.25rem rgba(245, 197, 66, 0.28);
}

[data-bs-theme="dark"] {
    --bs-body-bg: var(--sb-bg);
    --bs-body-color: var(--sb-text);
    --bs-secondary-color: var(--sb-text-muted);
    --bs-secondary-bg: var(--sb-surface-elevated);
    --bs-tertiary-bg: var(--sb-surface);
    --bs-border-color: var(--sb-border);
    --bs-emphasis-color: var(--sb-text);
    --bs-link-color: var(--sb-primary-hover);
    --bs-link-color-rgb: 255, 215, 97;
    --bs-link-hover-color: var(--sb-primary);
    --bs-link-hover-color-rgb: 245, 197, 66;
    --bs-card-bg: var(--sb-surface);
    --bs-card-border-color: var(--sb-border);
}

body {
    background-color: var(--sb-bg);
    color: var(--sb-text);
    font-family: Inter, system-ui, sans-serif;
    font-size: 1rem;
}

:where(main, .modal-content) h1 {
    font-size: 2rem;
    font-weight: 700;
}

:where(main, .modal-content) h2 {
    font-size: 1.5rem;
    font-weight: 700;
}

:where(main, .modal-content) h3 {
    font-size: 1.125rem;
    font-weight: 600;
}

.navbar-brand {
    color: var(--sb-primary);
}

.primary-navigation {
    gap: 0.5rem;
}

.primary-navigation__link.active {
    color: var(--sb-primary-hover);
    font-weight: 600;
}

@media (max-width: 575.98px) {
    .nav-link {
        padding: 0.375rem 0.625rem;
        font-size: 0.9375rem;
        white-space: nowrap;
    }
}

@media (max-width: 767.98px) {
    body.has-primary-navigation {
        padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
    }

    .primary-navigation {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1030;
        display: flex;
        flex-direction: row;
        gap: 0;
        padding: 0.25rem 0.25rem env(safe-area-inset-bottom, 0px);
        background-color: var(--sb-surface);
        border-top: 1px solid var(--sb-border);
        box-shadow: 0 -0.5rem 1.5rem rgba(0, 0, 0, 0.2);
    }

    .primary-navigation__link {
        flex: 1 1 0;
        min-width: 0;
        min-height: 3.5rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.15rem;
        padding: 0.35rem 0.25rem;
        color: var(--sb-text-muted);
        font-size: 0.75rem;
        line-height: 1.2;
        text-align: center;
    }

    .primary-navigation__link .bi {
        font-size: 1.25rem;
        line-height: 1;
    }
}

.card {
    background-color: var(--sb-surface);
    border-color: var(--sb-border);
    border-radius: var(--sb-radius-lg);
    box-shadow: var(--sb-shadow-card);
}

.nav-pills .nav-link {
    color: var(--sb-primary);
}

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

.nav-pills .nav-link.active {
    color: var(--sb-primary-text);
    background-color: var(--sb-primary);
}

.marketplace-epic-icon {
    color: var(--sb-primary);
    font-size: 1.25rem;
    line-height: 1;
}

.text-body-secondary {
    color: var(--sb-text-muted) !important;
}

.text-primary {
    color: var(--sb-primary) !important;
}

.btn-primary {
    --bs-btn-color: var(--sb-primary-text);
    --bs-btn-bg: var(--sb-primary);
    --bs-btn-border-color: var(--sb-primary);
    --bs-btn-hover-color: var(--sb-primary-text);
    --bs-btn-hover-bg: var(--sb-primary-hover);
    --bs-btn-hover-border-color: var(--sb-primary-hover);
    --bs-btn-focus-shadow-rgb: 245, 197, 66;
    --bs-btn-active-color: var(--sb-primary-text);
    --bs-btn-active-bg: var(--sb-primary-active);
    --bs-btn-active-border-color: var(--sb-primary-active);
    --bs-btn-disabled-color: var(--sb-primary-text);
    --bs-btn-disabled-bg: var(--sb-primary);
    --bs-btn-disabled-border-color: var(--sb-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--sb-primary);
    --bs-btn-border-color: var(--sb-primary);
    --bs-btn-hover-color: var(--sb-primary-text);
    --bs-btn-hover-bg: var(--sb-primary-hover);
    --bs-btn-hover-border-color: var(--sb-primary-hover);
    --bs-btn-focus-shadow-rgb: 245, 197, 66;
    --bs-btn-active-color: var(--sb-primary-text);
    --bs-btn-active-bg: var(--sb-primary-active);
    --bs-btn-active-border-color: var(--sb-primary-active);
    --bs-btn-disabled-color: var(--sb-primary);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--sb-primary);
}

.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-range:focus-visible {
    box-shadow: var(--sb-shadow-focus);
}

.btn-check-success:checked + .btn {
    --bs-btn-active-color: var(--sb-primary-text);
    --bs-btn-active-bg: var(--sb-success);
    --bs-btn-active-border-color: var(--sb-success);
    --bs-btn-hover-color: var(--sb-primary-text);
    --bs-btn-hover-bg: var(--sb-success);
    --bs-btn-hover-border-color: var(--sb-success);
}

.studio-preference-range {
    min-height: 2.75rem;
}

.performer-card__image { aspect-ratio: 1 / 1; object-fit: cover; }
.performer-detail__image { width: 100%; object-fit: contain; background: var(--sb-surface-elevated); border-radius: var(--sb-radius-lg); }
.performer-detail__image--profile { aspect-ratio: 1 / 1; }

.scene-title-card {
    aspect-ratio: 3 / 2;
    width: 100%;
    background: linear-gradient(135deg, var(--sb-surface-elevated), #34284a 55%, #6b3d55);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-lg);
    box-shadow: var(--sb-shadow-card);
    display: grid;
    overflow: hidden;
    place-items: end start;
    padding: clamp(1rem, 4vw, 2rem);
}

.scene-title-card__content { display: grid; gap: 0.35rem; max-width: 90%; }
.scene-title-card__studio { color: var(--sb-text-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; }
.scene-title-card__title { font-size: clamp(1.35rem, 4vw, 2.4rem); font-weight: 700; line-height: 1.1; }
.scene-title-card__content span:last-child { color: var(--sb-text-muted); }
.scene-image { position: relative; aspect-ratio: 3 / 2; width: 100%; overflow: hidden; border-radius: var(--sb-radius-lg); }
.scene-image__fallback { height: 100%; }
.scene-image__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }