@font-face {
    font-family: 'Parade Nocturne';
    src: url('../fonts/ParadeNocturne-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Tongues Cutout';
    src: url('../fonts/TonguesCutout-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SST Noisecut';
    src: url('../fonts/SSTNoisecut-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SST Flyer Sans';
    src: url('../fonts/SSTFlyerSans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --vr-radius: 8px;
    --vr-panel: rgba(255, 248, 232, 0.95);
    --vr-panel-strong: #fff3d3;
    --vr-panel-border: rgba(64, 39, 22, 0.28);
    --vr-ink: #20160f;
    --vr-muted: #6f5a43;
    --vr-stage: #130f0b;
    --vr-stage-soft: #2a1d14;
    --vr-paper-line: rgba(65, 43, 25, 0.08);
    --vr-shadow: 0 24px 70px rgba(11, 8, 5, 0.36);
    --vr-hard-shadow: 8px 8px 0 rgba(0, 0, 0, 0.22);
    --vr-font-ui: Inter, "Segoe UI", Arial, sans-serif;
    --vr-font-display: "Libre Baskerville", Georgia, serif;
    --vr-font-code: "IBM Plex Mono", Consolas, monospace;
    --vr-texture:
        radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--mud-palette-tertiary) 22%, transparent), transparent 28rem),
        radial-gradient(circle at 92% 12%, rgba(255, 255, 255, 0.07), transparent 22rem),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 72px);
    --vr-stage-gradient: linear-gradient(135deg, var(--vr-stage) 0%, var(--vr-stage-soft) 52%, #0d0a08 100%);
}

html,
body,
#app {
    min-height: 100%;
}

body {
    margin: 0;
    font-family: var(--vr-font-ui);
    background: var(--vr-stage);
}

.vr-boot {
    min-height: 100vh;
    display: grid;
    place-items: center;
    align-content: center;
    background: #0a0806;
}

.vr-boot-splash {
    display: block;
    width: clamp(160px, 34vw, 320px);
    height: auto;
}

.vr-app {
    min-height: 100vh;
    color: var(--vr-ink);
    background:
        var(--vr-texture),
        var(--vr-stage-gradient);
    font-family: var(--vr-font-ui);
}

.vr-app .mud-typography,
.vr-app .mud-button-root,
.vr-app .mud-input,
.vr-app .mud-input-control,
.vr-app .mud-input-label,
.vr-app .mud-input-slot,
.vr-app .mud-select,
.vr-app .mud-select-input,
.vr-app .mud-table,
.vr-app .mud-table-cell,
.vr-app .mud-data-grid,
.vr-app .mud-list-item,
.vr-app .mud-dialog,
.vr-app .mud-dialog-content,
.vr-app .mud-dialog-title,
.vr-app .mud-card,
.vr-app .mud-paper {
    font-family: var(--vr-font-ui) !important;
}

.vr-app .vr-brand-title,
.vr-app .vr-page-title {
    font-family: var(--vr-font-display) !important;
}

.vr-app .vr-drawer-kicker,
.vr-app .vr-page-kicker,
.vr-app .vr-label-code,
.vr-app .vr-theme-chip,
.vr-app .vr-stat-label,
.vr-app .mud-table-head .mud-table-cell,
.vr-app .mud-data-grid-header {
    font-family: var(--vr-font-code) !important;
}

.vr-app::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.22;
    background:
        repeating-radial-gradient(circle at 88% 84%, transparent 0 9px, rgba(255,255,255,0.08) 10px 11px),
        linear-gradient(transparent, rgba(0,0,0,0.18));
}

.vr-theme-punk-flyer,
.vr-theme-sunset-strip,
.vr-theme-join-the-march,
.vr-theme-blue-note-dark {
    --vr-panel: rgba(18, 18, 18, 0.95);
    --vr-panel-strong: #111;
    --vr-panel-border: rgba(255, 255, 255, 0.24);
    --vr-ink: #f8f4e8;
    --vr-muted: #cfc7b8;
    --vr-paper-line: rgba(255, 255, 255, 0.07);
    --vr-hard-shadow: 8px 8px 0 rgba(255, 255, 255, 0.08);
}

.vr-theme-verve-records-dark {
    --vr-panel: rgba(20, 19, 18, 0.95);
    --vr-panel-strong: #171514;
    --vr-panel-border: rgba(255, 255, 255, 0.17);
    --vr-ink: #f7f1e8;
    --vr-muted: #cfc4b4;
    --vr-paper-line: rgba(255, 255, 255, 0.06);
}

.vr-theme-factory-records,
.vr-theme-college-radio,
.vr-theme-speaking-in-tongues,
.vr-theme-sst-hardcore,
.vr-theme-underground,
.vr-theme-used-record-bin {
    --vr-panel: rgba(255, 255, 255, 0.95);
    --vr-panel-strong: #fff;
    --vr-panel-border: rgba(10, 10, 10, 0.18);
    --vr-ink: #171717;
    --vr-muted: #555;
    --vr-paper-line: rgba(0, 0, 0, 0.07);
}

.vr-theme-punk-flyer {
    --vr-font-ui: "Space Grotesk", sans-serif;
    --vr-font-display: "Oswald", sans-serif;
    --vr-font-code: "IBM Plex Mono", monospace;
    --vr-stage: #050505;
    --vr-stage-soft: #0e140b;
    --vr-panel: rgba(20, 22, 18, 0.92);
    --vr-panel-strong: #141612;
    --vr-panel-border: rgba(57, 255, 20, 0.36);
    --vr-ink: #fff6dc;
    --vr-muted: #e4c9a1;
    --vr-hard-shadow: 6px 6px 0px #ff4fbf;
    --vr-radius: 6px;
    --vr-texture:
        radial-gradient(circle at 84% 8%, rgba(255, 79, 191, 0.15), transparent 25rem),
        radial-gradient(circle at 15% 15%, rgba(57, 255, 20, 0.15), transparent 30rem),
        radial-gradient(circle at 50% 85%, rgba(255, 220, 40, 0.08), transparent 35rem);
}

.vr-theme-punk-flyer .vr-appbar {
    border-bottom: 2px solid #39ff14 !important;
    background: rgba(5, 5, 5, 0.94) !important;
}

.vr-theme-punk-flyer .vr-brand-title {
    color: #ffdc28 !important;
    text-shadow: 2px 2px 0 #0e140b, 4px 4px 0 #39ff14;
}

.vr-theme-punk-flyer .vr-brand-mark {
    border: 2px solid #39ff14 !important;
    color: #39ff14 !important;
    background: #050505 !important;
    border-radius: 0 !important;
}

.vr-theme-punk-flyer .vr-drawer {
    border-right: 3px solid #ff4fbf !important;
    background: #39ff14 !important;
}

.vr-theme-punk-flyer .vr-drawer .mud-nav-link {
    color: #e4c9a1 !important;
}

.vr-theme-punk-flyer .vr-drawer .mud-nav-link.active,
.vr-theme-punk-flyer .vr-drawer .mud-nav-link:hover {
    color: #39ff14 !important;
    background: color-mix(in srgb, #39ff14 10%, transparent) !important;
    border-left: 4px solid #39ff14;
}

.vr-theme-punk-flyer .vr-page-kicker {
    color: #ff4fbf !important;
}

.vr-theme-punk-flyer .vr-page-title {
    color: #ffdc28 !important;
    text-shadow: 3px 3px 0px #050505, 5px 5px 0px #ff4fbf, 8px 8px 0px #39ff14;
}

.vr-theme-punk-flyer .mud-table-head .mud-table-cell {
    background: #050505 !important;
    color: #39ff14 !important;
    border-bottom: 2px solid #39ff14 !important;
}

.vr-theme-punk-flyer .mud-button-root.mud-button-filled {
    background: #39ff14 !important;
    color: #050505 !important;
    box-shadow: 4px 4px 0px #ff4fbf !important;
    border-radius: 0 !important;
}

.vr-theme-punk-flyer .mud-button-root.mud-button-filled:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0px #ff4fbf !important;
}

.vr-theme-minneapolis-underground {
    --vr-font-ui: "Special Elite", "Courier New", monospace;
    --vr-font-display: "Oswald", Impact, sans-serif;
    --vr-font-code: "IBM Plex Mono", Consolas, monospace;
    --vr-stage: #f4e7c5;
    --vr-stage-soft: #d9c6a1;
    --vr-texture:
        repeating-linear-gradient(0deg, rgba(0,0,0,0.08) 0 1px, transparent 1px 27px),
        repeating-linear-gradient(90deg, rgba(198,40,40,0.12) 0 2px, transparent 2px 88px);
}

.vr-theme-sst-hardcore {
    --vr-font-ui: Inter, "Space Grotesk", Arial, sans-serif;
    --vr-font-display: "Oswald", "Arial Narrow", Arial, sans-serif;
    --vr-font-code: "IBM Plex Mono", Consolas, monospace;
    --vr-stage: #060606;
    --vr-stage-soft: #1f1711;
    --vr-panel: rgba(255, 252, 242, 0.96);
    --vr-panel-strong: #fffaf0;
    --vr-panel-border: rgba(5, 5, 5, 0.86);
    --vr-ink: #050505;
    --vr-muted: #4d463b;
    --vr-paper-line: rgba(5, 5, 5, 0.11);
    --vr-hard-shadow: 7px 7px 0 rgba(0, 139, 181, 0.72);
    --vr-texture:
        repeating-linear-gradient(90deg, rgba(0, 139, 181, 0.10) 0 1px, transparent 1px 18px),
        repeating-linear-gradient(0deg, rgba(255,250,240,0.045) 0 1px, transparent 1px 9px),
        radial-gradient(circle at 8% 12%, rgba(0, 139, 181, 0.26), transparent 18rem),
        radial-gradient(circle at 92% 88%, rgba(214, 55, 43, 0.14), transparent 24rem);
}

.vr-theme-sst-hardcore,
.vr-theme-sst-hardcore .mud-typography,
.vr-theme-sst-hardcore .mud-button-root,
.vr-theme-sst-hardcore .mud-input,
.vr-theme-sst-hardcore .mud-input-control,
.vr-theme-sst-hardcore .mud-input-label,
.vr-theme-sst-hardcore .mud-input-slot,
.vr-theme-sst-hardcore .mud-select,
.vr-theme-sst-hardcore .mud-select-input,
.vr-theme-sst-hardcore .mud-table,
.vr-theme-sst-hardcore .mud-table-root,
.vr-theme-sst-hardcore .mud-table-cell,
.vr-theme-sst-hardcore .mud-table-pagination,
.vr-theme-sst-hardcore .mud-data-grid,
.vr-theme-sst-hardcore .mud-data-grid-cell,
.vr-theme-sst-hardcore .mud-list,
.vr-theme-sst-hardcore .mud-list-item,
.vr-theme-sst-hardcore .mud-dialog,
.vr-theme-sst-hardcore .mud-dialog-content,
.vr-theme-sst-hardcore .mud-card,
.vr-theme-sst-hardcore .mud-card-content,
.vr-theme-sst-hardcore .mud-paper,
.vr-theme-sst-hardcore .mud-form,
.vr-theme-sst-hardcore .mud-expansion-panel,
.vr-theme-sst-hardcore .mud-tabs,
.vr-theme-sst-hardcore .mud-tab,
.vr-theme-sst-hardcore .mud-alert,
.vr-theme-sst-hardcore .mud-chip,
.vr-theme-sst-hardcore .mud-menu,
.vr-theme-sst-hardcore .mud-popover,
.vr-theme-sst-hardcore .mud-popover-paper,
.vr-theme-sst-hardcore .mud-snackbar,
.vr-theme-sst-hardcore .vr-mobile-record-list,
.vr-theme-sst-hardcore .vr-mobile-record-list *,
.vr-theme-sst-hardcore .vr-help-page,
.vr-theme-sst-hardcore .vr-help-page *,
.vr-theme-sst-hardcore .vr-query-page,
.vr-theme-sst-hardcore .vr-query-page *,
.vr-theme-sst-hardcore .vr-add-page,
.vr-theme-sst-hardcore .vr-add-page *,
.vr-theme-sst-hardcore .vr-collection-grid,
.vr-theme-sst-hardcore .vr-collection-grid * {
    font-family: var(--vr-font-ui) !important;
}

.vr-theme-sst-hardcore .vr-brand-title,
.vr-theme-sst-hardcore .vr-page-title,
.vr-theme-sst-hardcore .vr-query-title,
.vr-theme-sst-hardcore .mud-dialog-title,
.vr-theme-sst-hardcore .mud-button-root,
.vr-theme-sst-hardcore .mud-table-head .mud-table-cell,
.vr-theme-sst-hardcore .mud-data-grid-header,
.vr-theme-sst-hardcore .vr-theme-menu-name,
.vr-theme-sst-hardcore .vr-theme-chip,
.vr-theme-sst-hardcore .vr-stat-value,
.vr-theme-sst-hardcore .vr-stat-label,
.vr-theme-sst-hardcore .vr-page-kicker,
.vr-theme-sst-hardcore .vr-drawer-kicker,
.vr-theme-sst-hardcore .vr-label-code {
    font-family: var(--vr-font-display) !important;
    text-transform: uppercase;
}

.vr-theme-sst-hardcore .vr-brand-title,
.vr-theme-sst-hardcore .vr-page-title {
    color: #050505 !important;
    text-shadow: 3px 2px 0 #008bb5, -2px -1px 0 rgba(214, 55, 43, 0.72);
}

.vr-theme-sst-hardcore .vr-appbar .vr-brand-title {
    color: #fffaf0 !important;
    text-shadow: 3px 2px 0 #050505, -2px -1px 0 rgba(214, 55, 43, 0.88);
}

.vr-theme-sst-hardcore .vr-appbar .mud-button-root,
.vr-theme-sst-hardcore .vr-appbar .mud-icon-button,
.vr-theme-sst-hardcore .vr-user-link {
    color: #fffaf0 !important;
}

.vr-theme-sst-hardcore .vr-appbar {
    color: #fffaf0 !important;
    background:
        repeating-linear-gradient(90deg, rgba(255,250,240,0.10) 0 1px, transparent 1px 16px),
        repeating-linear-gradient(0deg, rgba(5,5,5,0.16) 0 1px, transparent 1px 7px),
        #005f95 !important;
    border-bottom: 5px solid #050505;
    box-shadow: 0 5px 0 #d6372b;
}

.vr-theme-sst-hardcore .vr-main {
    margin: 0;
    border: 3px solid #050505;
    border-top: 0;
    background:
        linear-gradient(90deg, rgba(0,139,181,0.16) 0 1px, transparent 1px 28px),
        repeating-linear-gradient(0deg, rgba(5,5,5,0.055) 0 1px, transparent 1px 34px),
        #f7f2e6;
    box-shadow: 10px 10px 0 rgba(0,139,181,0.74);
}

.vr-theme-sst-hardcore .vr-shell-content {
    padding: 0;
}

.vr-theme-sst-hardcore .vr-drawer {
    background:
        repeating-linear-gradient(0deg, rgba(255,250,240,0.10) 0 1px, transparent 1px 10px),
        #050505 !important;
    border-right: 6px solid #008bb5;
    color: #fffaf0;
}

.vr-theme-sst-hardcore .vr-drawer .mud-nav-link {
    color: #fffaf0;
    border-radius: 0;
    border-bottom: 1px solid rgba(255,250,240,0.34);
}

.vr-theme-sst-hardcore .vr-drawer .mud-nav-link.active,
.vr-theme-sst-hardcore .vr-drawer .mud-nav-link:hover {
    color: #050505;
    background: #fffaf0;
    box-shadow: 4px 4px 0 #008bb5;
}

.vr-theme-sst-hardcore .vr-brand-mark,
.vr-theme-sst-hardcore .vr-login-mark {
    color: #fffaf0;
    border-radius: 0;
    border: 3px solid #050505;
    background:
        linear-gradient(135deg, transparent 0 42%, rgba(255,255,255,0.28) 42% 48%, transparent 48%),
        #008bb5;
    box-shadow: 4px 4px 0 #d6372b;
}

.vr-theme-sst-hardcore .mud-paper,
.vr-theme-sst-hardcore .mud-table,
.vr-theme-sst-hardcore .mud-data-grid,
.vr-theme-sst-hardcore .mud-dialog {
    color: #050505 !important;
    background:
        repeating-linear-gradient(0deg, rgba(5,5,5,0.04) 0 1px, transparent 1px 7px),
        #fffaf0 !important;
    border: 3px solid #050505 !important;
    border-radius: 0 !important;
    box-shadow: var(--vr-hard-shadow) !important;
}

.vr-theme-sst-hardcore .vr-page-header {
    border-width: 4px !important;
    box-shadow: 8px 8px 0 rgba(5,5,5,0.42) !important;
}

.vr-theme-sst-hardcore .mud-button-root,
.vr-theme-sst-hardcore .mud-nav-link {
    border-radius: 0 !important;
}

.vr-theme-sst-hardcore .mud-button-filled-primary {
    color: #fffaf0 !important;
    background: #d6372b !important;
    border: 3px solid #050505 !important;
    box-shadow: 4px 4px 0 #008bb5;
}

.vr-theme-sst-hardcore .mud-button-outlined-primary {
    color: #050505 !important;
    border: 3px solid #050505 !important;
    background: #fffaf0 !important;
    box-shadow: 4px 4px 0 rgba(214, 55, 43, 0.72);
}

.vr-theme-sst-hardcore .mud-table-head,
.vr-theme-sst-hardcore .mud-data-grid-header {
    background: #008bb5 !important;
}

.vr-theme-sst-hardcore .mud-table-head .mud-table-cell,
.vr-theme-sst-hardcore .mud-data-grid-header,
.vr-theme-sst-hardcore .mud-data-grid-header * {
    color: #fffaf0 !important;
}

.vr-theme-sst-hardcore .mud-input-outlined-border {
    border-color: #050505 !important;
    border-width: 2px !important;
}

.vr-theme-sst-hardcore .mud-input,
.vr-theme-sst-hardcore .mud-input-slot {
    color: #050505 !important;
}

.vr-theme-sst-hardcore .vr-page-header::before {
    background:
        linear-gradient(90deg, #008bb5 0 12%, transparent 12%),
        linear-gradient(0deg, #d6372b 0 8px, transparent 8px),
        repeating-linear-gradient(-8deg, rgba(5,5,5,0.10) 0 1px, transparent 1px 12px);
}

.vr-theme-sst-hardcore::after {
    content: "";
    position: fixed;
    inset: 18px;
    z-index: 0;
    pointer-events: none;
    border: 3px solid rgba(5, 5, 5, 0.76);
    outline: 7px solid rgba(0, 139, 181, 0.72);
    outline-offset: -16px;
    background:
        linear-gradient(#d6372b, #d6372b) 5% 9% / 116px 13px no-repeat,
        linear-gradient(#050505, #050505) 84% 14% / 82px 18px no-repeat,
        linear-gradient(#008bb5, #008bb5) 9% 87% / 148px 16px no-repeat,
        repeating-linear-gradient(90deg, transparent 0 44px, rgba(5,5,5,0.07) 44px 45px);
    opacity: 0.34;
    mix-blend-mode: multiply;
}

.vr-theme-black-parade {
    --vr-font-ui: 'Parade Nocturne', Georgia, serif;
    --vr-font-display: 'Parade Nocturne', Georgia, serif;
    --vr-font-code: "IBM Plex Mono", Consolas, monospace;
    --vr-stage: #070606;
    --vr-stage-soft: #1b1414;
    --vr-texture:
        radial-gradient(circle at 78% 14%, rgba(183,28,43,0.22), transparent 18rem),
        repeating-linear-gradient(90deg, rgba(232,220,198,0.08) 0 1px, transparent 1px 42px);
}

.vr-theme-speaking-in-tongues .vr-brand-title,
.vr-theme-speaking-in-tongues .vr-page-title,
.vr-theme-speaking-in-tongues .vr-query-title,
.vr-theme-speaking-in-tongues .vr-drawer .mud-nav-link,
.vr-theme-speaking-in-tongues .mud-button-root,
.vr-theme-speaking-in-tongues .mud-table-head .mud-table-cell,
.vr-theme-speaking-in-tongues .mud-data-grid-header,
.vr-theme-speaking-in-tongues .vr-theme-menu-name,
.vr-theme-speaking-in-tongues .vr-theme-chip,
.vr-theme-speaking-in-tongues .vr-stat-value,
.vr-theme-speaking-in-tongues .vr-stat-label,
.vr-theme-speaking-in-tongues .vr-page-kicker,
.vr-theme-speaking-in-tongues .vr-drawer-kicker,
.vr-theme-speaking-in-tongues .vr-label-code {
    font-family: var(--vr-font-display) !important;
}

.vr-theme-speaking-in-tongues .vr-drawer .mud-nav-link,
.vr-theme-speaking-in-tongues .mud-button-root,
.vr-theme-speaking-in-tongues .mud-table-head .mud-table-cell,
.vr-theme-speaking-in-tongues .mud-data-grid-header {
    font-size: 1.02rem;
    letter-spacing: 0 !important;
    text-transform: uppercase;
}

.vr-theme-verve-records {
    --vr-font-ui: "Montserrat", sans-serif;
    --vr-font-display: "Bodoni Moda", serif;
    --vr-font-code: "IBM Plex Mono", Consolas, monospace;
    --vr-stage: #1a1a1a;
    --vr-stage-soft: #111111;
    --vr-panel: rgba(0, 0, 0, 0.92);
    --vr-panel-strong: #000000;
    --vr-panel-border: rgba(192, 192, 192, 0.45);
    --vr-ink: #e8e8e8;
    --vr-muted: #c0c0c0;
    --vr-hard-shadow: 15px 15px 0px rgba(192, 192, 192, 0.2);
    --vr-radius: 0px;
    --vr-texture: none;
}

.vr-theme-verve-records .vr-appbar {
    border-bottom: 2px solid #c0c0c0 !important;
    background: #000000 !important;
}

.vr-theme-verve-records .vr-brand-title {
    color: #c0c0c0 !important;
    font-style: italic;
    letter-spacing: 0.05em !important;
}

.vr-theme-verve-records .vr-brand-mark {
    border: 2px solid #c0c0c0 !important;
    color: #c0c0c0 !important;
    background: #000000 !important;
    border-radius: 0 !important;
}

.vr-theme-verve-records .vr-drawer {
    border-right: 2px solid #c0c0c0 !important;
    background: #000000 !important;
}

.vr-theme-verve-records .vr-drawer .mud-nav-link {
    color: #e8e8e8 !important;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
}

.vr-theme-verve-records .vr-drawer .mud-nav-link.active,
.vr-theme-verve-records .vr-drawer .mud-nav-link:hover {
    color: #c0c0c0 !important;
    font-weight: bold;
    background: rgba(192, 192, 192, 0.1) !important;
}

.vr-theme-verve-records .vr-page-title {
    color: #c0c0c0 !important;
    font-style: italic;
}

.vr-theme-verve-records .mud-table-head .mud-table-cell {
    background: #000000 !important;
    color: #c0c0c0 !important;
    border-bottom: 1px solid #c0c0c0 !important;
    text-align: center;
}

.vr-theme-verve-records .mud-paper {
    border: 2px solid #c0c0c0 !important;
    background: #000000 !important;
    box-shadow: var(--vr-hard-shadow) !important;
    color: #e8e8e8 !important;
}

.vr-theme-verve-records .mud-button-root.mud-button-filled {
    background: #c0c0c0 !important;
    color: #000000 !important;
    border-radius: 0 !important;
    box-shadow: 4px 4px 0px #e8e8e8 !important;
}

.vr-theme-verve-records .mud-button-filled-primary,
.vr-theme-verve-records .mud-input,
.vr-theme-verve-records .mud-input-slot,
.vr-theme-verve-records .mud-table-cell,
.vr-theme-verve-records .mud-typography {
    color: #e8e8e8 !important;
}

.vr-theme-verve-records .mud-table-head .mud-table-cell {
    color: #c0c0c0 !important;
}

.vr-theme-jazz-club {
    --vr-font-ui: "Playfair Display", Georgia, serif;
    --vr-font-display: "Playfair Display", Georgia, serif;
    --vr-font-code: "IBM Plex Mono", Consolas, monospace;
    --vr-stage: #120d10;
    --vr-stage-soft: #321921;
    --vr-texture:
        radial-gradient(circle at 80% 4%, rgba(200,162,74,0.18), transparent 18rem),
        linear-gradient(120deg, rgba(122,31,43,0.28), transparent 48%);
}

.vr-theme-college-radio {
    --vr-font-ui: "Special Elite", "Courier New", monospace;
    --vr-font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
    --vr-font-code: "IBM Plex Mono", Consolas, monospace;
    --vr-stage: #f7f3e7;
    --vr-stage-soft: #d7e2e7;
    --vr-texture:
        repeating-linear-gradient(0deg, rgba(36,92,122,0.13) 0 1px, transparent 1px 29px),
        linear-gradient(90deg, rgba(198,90,46,0.12) 0 2px, transparent 2px 100%);
}

.vr-theme-sub-pop-records {
    --vr-font-ui: "Special Elite", "Courier New", monospace;
    --vr-font-display: "Bebas Neue", Impact, sans-serif;
    --vr-font-code: "IBM Plex Mono", Consolas, monospace;
    --vr-stage: #0b0b0b;
    --vr-stage-soft: #2a1a13;
    --vr-texture:
        repeating-linear-gradient(-6deg, rgba(255,255,255,0.10) 0 1px, transparent 1px 14px),
        radial-gradient(circle at 18% 8%, rgba(199,90,42,0.22), transparent 16rem),
        linear-gradient(90deg, rgba(244,232,208,0.08) 0 2px, transparent 2px 100%);
}

.vr-theme-used-record-bin {
    --vr-font-ui: "Libre Baskerville", Georgia, serif;
    --vr-font-display: "Special Elite", "Courier New", monospace;
    --vr-font-code: "IBM Plex Mono", Consolas, monospace;
    --vr-stage: #d9c49a;
    --vr-stage-soft: #7b6244;
    --vr-texture:
        radial-gradient(circle at 20% 18%, rgba(180,95,58,0.18), transparent 17rem),
        repeating-linear-gradient(-8deg, rgba(75,58,42,0.11) 0 1px, transparent 1px 24px);
}

.vr-theme-third-man-vault {
    --vr-font-ui: "Bungee", Impact, sans-serif;
    --vr-font-display: "Bungee", Impact, sans-serif;
    --vr-font-code: "IBM Plex Mono", Consolas, monospace;
    --vr-stage: #090909;
    --vr-stage-soft: #2b2608;
    --vr-texture:
        linear-gradient(90deg, rgba(246,211,45,0.16) 0 24%, transparent 24%),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.08) 0 1px, transparent 1px 18px);
}

.vr-theme-factory-records {
    --vr-font-ui:      "IBM Plex Mono", Consolas, monospace;
    --vr-font-display: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
    --vr-font-code:    "IBM Plex Mono", Consolas, monospace;
    --vr-stage:        #e0e0e0;
    --vr-stage-soft:   #c8c8c8;
    --vr-texture:
        repeating-linear-gradient(90deg, rgba(0,0,0,0.045) 0 1px, transparent 1px 72px),
        repeating-linear-gradient(0deg, rgba(0,0,0,0.035) 0 1px, transparent 1px 28px),
        linear-gradient(90deg, rgba(255,204,0,0.16) 0 16px, transparent 16px);
    --vr-hard-shadow:  12px 12px 0px rgba(0,0,0,0.20);
}

/* Appbar — white with black border */
.vr-theme-factory-records .vr-appbar {
    background: #ffffff !important;
    border-bottom: 3px solid #000000;
    box-shadow: none;
    color: #000000 !important;
}

.vr-theme-factory-records .vr-brand-title,
.vr-theme-factory-records .vr-appbar .mud-icon-button,
.vr-theme-factory-records .vr-appbar .mud-button-root,
.vr-theme-factory-records .vr-user-link {
    color: #000000 !important;
}

/* Brand mark */
.vr-theme-factory-records .vr-brand-mark {
    background: #000000 !important;
    color: #ffffff !important;
    border-radius: 0;
}

.vr-theme-factory-records .vr-brand-title {
    font-family: var(--vr-font-display) !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Drawer - white with black borders, terminal-style nav */
.vr-theme-factory-records .vr-drawer {
    background: #fcfcfc !important;
    border-right: 2px solid #000000;
}

.vr-theme-factory-records .vr-drawer .mud-nav-link {
    font-family: var(--vr-font-code) !important;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.05em;
    color: #000000;
    border-radius: 0;
    border-bottom: 1px solid #cccccc;
}

.vr-theme-factory-records .vr-drawer .mud-nav-link.active,
.vr-theme-factory-records .vr-drawer .mud-nav-link:hover {
    background: #ffcc00 !important;
    color: #000000 !important;
    font-weight: 700;
}

/* Cards/papers — heavy black border + offset shadow */
.vr-theme-factory-records .mud-paper:not(.mud-appbar):not(.mud-drawer) {
    border: 3px solid #000000 !important;
    border-radius: 0 !important;
    box-shadow: 12px 12px 0px rgba(0,0,0,0.20) !important;
}

/* Buttons — black fill, yellow offset shadow */
.vr-theme-factory-records .mud-button-root.mud-button-filled {
    background-color: #000000 !important;
    color: #ffffff !important;
    font-family: var(--vr-font-code) !important;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 0 !important;
    border: none;
    box-shadow: 5px 5px 0px #ffcc00 !important;
}

.vr-theme-factory-records .mud-button-root.mud-button-filled:hover {
    box-shadow: 7px 7px 0px #ffcc00 !important;
    transform: translate(-1px, -1px);
}

.vr-theme-factory-records .mud-button-root.mud-button-outlined {
    border: 2px solid #000000 !important;
    border-radius: 0 !important;
    color: #000000 !important;
    box-shadow: 3px 3px 0px rgba(0,0,0,0.25) !important;
}

/* Table headers */
.vr-theme-factory-records .mud-table-head .mud-table-cell {
    background: #000000 !important;
    color: #ffffff !important;
    font-family: var(--vr-font-code) !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-right: 1px solid rgba(255,255,255,0.2) !important;
}

/* Inputs */
.vr-theme-factory-records .mud-input-outlined .mud-input-outlined-border {
    border-radius: 0 !important;
    border-color: #000000 !important;
    border-width: 2px !important;
}

.vr-theme-factory-records .mud-input-outlined:hover .mud-input-outlined-border,
.vr-theme-factory-records .mud-focused .mud-input-outlined-border {
    border-color: #000000 !important;
    box-shadow: 3px 3px 0 #ffcc00 !important;
}

/* Page header */
.vr-theme-factory-records .vr-page-header {
    border-bottom: 3px solid #000000;
    background:
        linear-gradient(90deg, rgba(255,204,0,0.18) 0 16px, transparent 16px),
        repeating-linear-gradient(90deg, rgba(0,0,0,0.045) 0 1px, transparent 1px 72px),
        repeating-linear-gradient(0deg, rgba(0,0,0,0.035) 0 1px, transparent 1px 28px),
        linear-gradient(135deg, #ffffff 0%, #f3f3ee 100%);
}

/* Chips */
.vr-theme-factory-records .mud-chip {
    border-radius: 0 !important;
    border: 1.5px solid #000000 !important;
}

/* Dialogs */
.vr-theme-factory-records .mud-dialog {
    border-radius: 0 !important;
    border: 3px solid #000000;
    box-shadow: 12px 12px 0px rgba(0,0,0,0.20);
}

.vr-theme-factory-records .mud-dialog-title {
    font-family: var(--vr-font-display) !important;
    text-transform: uppercase;
    border-bottom: 2px solid #ffcc00;
}

/* Shell content padding */
.vr-theme-factory-records .vr-shell-content {
    padding: 0;
}


.vr-theme-new-wave-art-school {
    --vr-font-ui: "Space Grotesk", Inter, sans-serif;
    --vr-font-display: "Bungee", Impact, sans-serif;
    --vr-font-code: "IBM Plex Mono", Consolas, monospace;
    --vr-stage: #f5f3ea;
    --vr-stage-soft: #ced4da;
    --vr-texture:
        linear-gradient(135deg, rgba(27,58,138,0.18) 0 22%, transparent 22%),
        linear-gradient(45deg, transparent 0 70%, rgba(249,200,14,0.22) 70%);
}

.vr-theme-speaking-in-tongues {
    --vr-font-ui: "Tongues Cutout", "Space Grotesk", Inter, sans-serif;
    --vr-font-display: "Tongues Cutout", "Bungee", "Space Grotesk", Impact, sans-serif;
    --vr-font-code: "Tongues Cutout", "IBM Plex Mono", Consolas, monospace;
    --vr-stage: #efc43a;
    --vr-stage-soft: #d8a92c;
    --vr-panel: rgba(255, 243, 184, 0.94);
    --vr-panel-strong: #fff8d1;
    --vr-panel-border: rgba(29, 77, 57, 0.46);
    --vr-ink: #17120a;
    --vr-muted: #5f4b18;
    --vr-paper-line: rgba(47, 143, 210, 0.14);
    --vr-hard-shadow: 7px 7px 0 rgba(216, 58, 46, 0.34);
    --vr-texture:
        radial-gradient(circle at 50% 42%, rgba(47,143,210,0.88) 0 15.5rem, rgba(26,31,98,0.96) 15.7rem 16.2rem, rgba(255,243,184,0.95) 16.35rem 16.75rem, transparent 17rem),
        repeating-radial-gradient(circle at 50% 42%, rgba(255,255,255,0.15) 0 2px, transparent 2px 23px),
        linear-gradient(90deg, rgba(216,58,46,0.20) 0 7px, transparent 7px 34px),
        linear-gradient(0deg, rgba(59,164,107,0.18) 0 6px, transparent 6px 38px);
}

.vr-theme-speaking-in-tongues .vr-brand-mark,
.vr-theme-speaking-in-tongues .vr-login-mark {
    border-radius: 3px;
    color: #fff8d1;
    background:
        radial-gradient(circle, #2f8fd2 0 34%, #1a1f62 35% 43%, #fff8d1 44% 49%, #d83a2e 50% 100%),
        repeating-radial-gradient(circle, rgba(255,255,255,0.18) 0 1px, transparent 1px 5px);
    box-shadow: 5px 5px 0 rgba(59, 164, 107, 0.46);
}

.vr-theme-speaking-in-tongues .vr-page-header::before {
    background:
        radial-gradient(circle at 84% 34%, rgba(47,143,210,0.66) 0 64px, rgba(26,31,98,0.82) 66px 72px, transparent 74px),
        linear-gradient(90deg, rgba(216,58,46,0.22) 0 9%, transparent 9%),
        linear-gradient(135deg, transparent 0 65%, rgba(59,164,107,0.20) 65% 69%, transparent 69%),
        repeating-linear-gradient(0deg, transparent 0 27px, rgba(23,18,10,0.08) 27px 29px);
}

.vr-theme-speaking-in-tongues::after {
    content: "";
    position: fixed;
    inset: 18px;
    z-index: 0;
    pointer-events: none;
    border: 9px solid rgba(216, 58, 46, 0.88);
    outline: 6px solid rgba(59, 164, 107, 0.82);
    outline-offset: -22px;
    background:
        linear-gradient(135deg, #3ba46b 0 50%, transparent 50%) 34px 10px / 28px 16px repeat-x,
        linear-gradient(225deg, #d83a2e 0 50%, transparent 50%) 48px 10px / 28px 16px repeat-x,
        linear-gradient(#7ac47a, #7ac47a) 8% 12% / 112px 56px no-repeat,
        linear-gradient(#ee55a1, #ee55a1) 86% 12% / 112px 56px no-repeat,
        linear-gradient(#6e56a5, #6e56a5) 8% 84% / 112px 56px no-repeat,
        linear-gradient(#4fc3dc, #4fc3dc) 86% 84% / 112px 56px no-repeat;
    opacity: 0.62;
}

.vr-theme-speaking-in-tongues .mud-paper,
.vr-theme-speaking-in-tongues .mud-table,
.vr-theme-speaking-in-tongues .mud-data-grid {
    box-shadow: var(--vr-hard-shadow);
}

.vr-theme-speaking-in-tongues .mud-button-root,
.vr-theme-speaking-in-tongues .mud-nav-link {
    border-radius: 4px !important;
}

.vr-theme-speaking-in-tongues .mud-button-filled-primary {
    color: #fff8d1 !important;
}

.vr-theme-speaking-in-tongues .vr-page-title,
.vr-theme-speaking-in-tongues .vr-brand-title {
    text-shadow: 2px 2px 0 rgba(47, 143, 210, 0.26);
}

.vr-theme-speaking-in-tongues,
.vr-theme-speaking-in-tongues .mud-typography,
.vr-theme-speaking-in-tongues .mud-button-root,
.vr-theme-speaking-in-tongues .mud-input,
.vr-theme-speaking-in-tongues .mud-input-control,
.vr-theme-speaking-in-tongues .mud-input-label,
.vr-theme-speaking-in-tongues .mud-input-slot,
.vr-theme-speaking-in-tongues .mud-select,
.vr-theme-speaking-in-tongues .mud-select-input,
.vr-theme-speaking-in-tongues .mud-table,
.vr-theme-speaking-in-tongues .mud-table-root,
.vr-theme-speaking-in-tongues .mud-table-cell,
.vr-theme-speaking-in-tongues .mud-table-pagination,
.vr-theme-speaking-in-tongues .mud-data-grid,
.vr-theme-speaking-in-tongues .mud-data-grid-header,
.vr-theme-speaking-in-tongues .mud-data-grid-cell,
.vr-theme-speaking-in-tongues .mud-list,
.vr-theme-speaking-in-tongues .mud-list-item,
.vr-theme-speaking-in-tongues .mud-dialog,
.vr-theme-speaking-in-tongues .mud-dialog-content,
.vr-theme-speaking-in-tongues .mud-dialog-title,
.vr-theme-speaking-in-tongues .mud-card,
.vr-theme-speaking-in-tongues .mud-card-content,
.vr-theme-speaking-in-tongues .mud-paper,
.vr-theme-speaking-in-tongues .mud-form,
.vr-theme-speaking-in-tongues .mud-expansion-panel,
.vr-theme-speaking-in-tongues .mud-tabs,
.vr-theme-speaking-in-tongues .mud-tab,
.vr-theme-speaking-in-tongues .mud-alert,
.vr-theme-speaking-in-tongues .mud-chip,
.vr-theme-speaking-in-tongues .mud-menu,
.vr-theme-speaking-in-tongues .mud-popover,
.vr-theme-speaking-in-tongues .mud-popover-paper,
.vr-theme-speaking-in-tongues .mud-snackbar,
.vr-theme-speaking-in-tongues .vr-mobile-record-list,
.vr-theme-speaking-in-tongues .vr-mobile-record-list *,
.vr-theme-speaking-in-tongues .vr-help-page,
.vr-theme-speaking-in-tongues .vr-help-page *,
.vr-theme-speaking-in-tongues .vr-query-page,
.vr-theme-speaking-in-tongues .vr-query-page *,
.vr-theme-speaking-in-tongues .vr-collection-grid,
.vr-theme-speaking-in-tongues .vr-collection-grid * {
    font-family: var(--vr-font-display) !important;
}

/* ══ SST 2 ═══════════════════════════════════════════════════════════════ */

.vr-theme-sst-2 {
    --vr-font-ui: Inter, "Space Grotesk", Arial, sans-serif;
    --vr-font-display: "Oswald", "Arial Narrow", Arial, sans-serif;
    --vr-font-code: "IBM Plex Mono", Consolas, monospace;
    --vr-stage: #f2edd8;
    --vr-stage-soft: #ddd8c4;
    --vr-panel: rgba(250, 246, 232, 0.97);
    --vr-panel-strong: #faf6e8;
    --vr-panel-border: rgba(11, 11, 11, 0.88);
    --vr-ink: #0b0b0b;
    --vr-muted: #5c5245;
    --vr-paper-line: rgba(11, 11, 11, 0.06);
    --vr-hard-shadow: 4px 4px 0 rgba(11, 11, 11, 0.85);
    --vr-texture:
        repeating-linear-gradient(0deg, rgba(11,11,11,.04) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(90deg, rgba(26,95,168,.07) 0 1px, transparent 1px 20px),
        radial-gradient(circle at 6% 8%, rgba(26,95,168,.16), transparent 22rem),
        linear-gradient(135deg, rgba(201,59,26,.12) 0 8%, transparent 8%);
}

/* Font application — UI elements */
.vr-theme-sst-2,
.vr-theme-sst-2 .mud-typography,
.vr-theme-sst-2 .mud-button-root,
.vr-theme-sst-2 .mud-input,
.vr-theme-sst-2 .mud-input-control,
.vr-theme-sst-2 .mud-input-label,
.vr-theme-sst-2 .mud-input-slot,
.vr-theme-sst-2 .mud-select,
.vr-theme-sst-2 .mud-select-input,
.vr-theme-sst-2 .mud-table,
.vr-theme-sst-2 .mud-table-root,
.vr-theme-sst-2 .mud-table-cell,
.vr-theme-sst-2 .mud-table-pagination,
.vr-theme-sst-2 .mud-data-grid,
.vr-theme-sst-2 .mud-data-grid-cell,
.vr-theme-sst-2 .mud-list,
.vr-theme-sst-2 .mud-list-item,
.vr-theme-sst-2 .mud-dialog,
.vr-theme-sst-2 .mud-dialog-content,
.vr-theme-sst-2 .mud-card,
.vr-theme-sst-2 .mud-card-content,
.vr-theme-sst-2 .mud-paper,
.vr-theme-sst-2 .mud-popover,
.vr-theme-sst-2 .mud-popover-paper,
.vr-theme-sst-2 .vr-collection-grid,
.vr-theme-sst-2 .vr-collection-grid * {
    font-family: var(--vr-font-ui) !important;
}

/* Display font — headlines, nav brand, buttons, table headers */
.vr-theme-sst-2 .vr-brand-title,
.vr-theme-sst-2 .vr-page-title,
.vr-theme-sst-2 .vr-query-title,
.vr-theme-sst-2 .mud-dialog-title,
.vr-theme-sst-2 .mud-button-root,
.vr-theme-sst-2 .mud-table-head .mud-table-cell,
.vr-theme-sst-2 .mud-data-grid-header,
.vr-theme-sst-2 .vr-theme-menu-name,
.vr-theme-sst-2 .vr-stat-value,
.vr-theme-sst-2 .vr-stat-label,
.vr-theme-sst-2 .vr-page-kicker,
.vr-theme-sst-2 .vr-drawer-kicker {
    font-family: var(--vr-font-display) !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Brand — deeper cyan appbar with registration offset effect */
.vr-theme-sst-2 .vr-brand-title {
    color: #f2edd8 !important;
    text-shadow: 3px 0 0 #0b0b0b, 2px 2px 0 rgba(201, 59, 26, 0.55);
    letter-spacing: -0.02em;
}

.vr-theme-sst-2 .vr-appbar .mud-button-root,
.vr-theme-sst-2 .vr-appbar .mud-icon-button,
.vr-theme-sst-2 .vr-user-link {
    color: #f2edd8 !important;
}

.vr-theme-sst-2 .vr-appbar {
    color: #f2edd8 !important;
    background:
        repeating-linear-gradient(90deg, rgba(242,237,216,.08) 0 1px, transparent 1px 20px),
        #0d3e72 !important;
    border-bottom: 5px solid #0b0b0b;
    box-shadow: 0 5px 0 #c93b1a;
}

/* Main content area — hard ruled border */
.vr-theme-sst-2 .vr-main {
    margin: 0;
    border: 3px solid #0b0b0b;
    border-top: 0;
    background:
        repeating-linear-gradient(0deg, rgba(11,11,11,0.035) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(90deg, rgba(26,95,168,0.055) 0 1px, transparent 1px 20px),
        #f2edd8;
    box-shadow: 6px 6px 0 rgba(11,11,11,0.70);
}

/* Drawer — light paper, ink borders */
.vr-theme-sst-2 .vr-drawer {
    background:
        repeating-linear-gradient(0deg, rgba(11,11,11,0.04) 0 1px, transparent 1px 6px),
        #faf6e8 !important;
    border-right: 4px solid #0b0b0b;
    color: #0b0b0b;
}

.vr-theme-sst-2 .vr-drawer .mud-nav-link {
    color: #0b0b0b;
    font-family: var(--vr-font-ui) !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: 0;
    border-bottom: 1px solid rgba(11,11,11,0.12);
}

.vr-theme-sst-2 .vr-drawer .mud-nav-link.active,
.vr-theme-sst-2 .vr-drawer .mud-nav-link:hover {
    background: #1a5fa8 !important;
    color: #f2edd8 !important;
    border-left: 4px solid #0b0b0b;
}

/* Buttons — hard offset shadow */
.vr-theme-sst-2 .mud-button-root.mud-button-filled {
    border-radius: 0;
    border: 2px solid #0b0b0b;
    box-shadow: 3px 3px 0 #0b0b0b;
    font-family: var(--vr-font-display) !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.vr-theme-sst-2 .mud-button-root.mud-button-filled:hover {
    box-shadow: 5px 5px 0 #0b0b0b;
    transform: translate(-1px, -1px);
}

.vr-theme-sst-2 .mud-button-root.mud-button-outlined {
    border-radius: 0;
    border: 2px solid #0b0b0b;
    box-shadow: 3px 3px 0 rgba(11,11,11,0.35);
    font-family: var(--vr-font-display) !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Inputs — hard corners */
.vr-theme-sst-2 .mud-input-outlined .mud-input-outlined-border {
    border-radius: 0 !important;
    border-color: #0b0b0b !important;
    border-width: 2px !important;
}

.vr-theme-sst-2 .mud-input-outlined:hover .mud-input-outlined-border,
.vr-theme-sst-2 .mud-focused .mud-input-outlined-border {
    border-color: #1a5fa8 !important;
    box-shadow: 2px 2px 0 rgba(26,95,168,0.5) !important;
}

/* Paper / cards — hard border rule */
.vr-theme-sst-2 .mud-paper:not(.mud-appbar):not(.mud-drawer) {
    border-radius: 0 !important;
    border: 1.5px solid rgba(11,11,11,0.72);
}

/* Data grid headers */
.vr-theme-sst-2 .mud-table-head .mud-table-cell,
.vr-theme-sst-2 .mud-data-grid-header {
    background: #0b0b0b !important;
    color: #f2edd8 !important;
    font-family: var(--vr-font-display) !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-right: 1px solid rgba(242,237,216,0.2) !important;
}

/* Chips — outlined, hard corners */
.vr-theme-sst-2 .mud-chip {
    border-radius: 0 !important;
    border: 1.5px solid #0b0b0b !important;
}

/* Dialogs */
.vr-theme-sst-2 .mud-dialog {
    border-radius: 0 !important;
    border: 3px solid #0b0b0b;
    box-shadow: 6px 6px 0 rgba(11,11,11,0.6);
}

.vr-theme-sst-2 .mud-dialog-title {
    font-family: var(--vr-font-display) !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 2px solid #c93b1a;
}

/* Page header */
.vr-theme-sst-2 .vr-page-header {
    border-bottom: 3px solid #0b0b0b;
}

.vr-theme-sst-2 .vr-page-kicker {
    color: #1a5fa8 !important;
    letter-spacing: 0.18em;
}

.vr-theme-sst-2 .vr-stat-value {
    color: #1a5fa8 !important;
}

/* Shell content padding */
.vr-theme-sst-2 .vr-shell-content {
    padding: 0;
}

.vr-theme-hip-hop-classics {
    --vr-font-ui: "Bebas Neue", Impact, sans-serif;
    --vr-font-display: "Bungee", Impact, sans-serif;
    --vr-font-code: "IBM Plex Mono", Consolas, monospace;
    --vr-stage: #111;
    --vr-stage-soft: #2c2110;
    --vr-texture:
        radial-gradient(circle at 72% 12%, rgba(241,196,15,0.2), transparent 18rem),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.08) 0 2px, transparent 2px 22px);
}

.vr-theme-sunset-strip {
    --vr-font-ui: "Space Grotesk", sans-serif;
    --vr-font-display: "Oswald", sans-serif;
    --vr-font-code: "IBM Plex Mono", monospace;
    --vr-stage: #05020a;
    --vr-stage-soft: #15101a;
    --vr-panel: rgba(14, 6, 24, 0.88);
    --vr-panel-strong: #180b24;
    --vr-panel-border: rgba(255, 0, 127, 0.45);
    --vr-ink: #fff6fc;
    --vr-muted: #8d7da3;
    --vr-radius: 4px;
    --vr-texture:
        radial-gradient(circle at 75% 20%, rgba(255, 0, 127, 0.18), transparent 40rem),
        radial-gradient(circle at 25% 80%, rgba(57, 255, 20, 0.08), transparent 35rem),
        repeating-linear-gradient(0deg, rgba(5, 2, 10, 0.15) 0px, rgba(5, 2, 10, 0.15) 2px, transparent 2px, transparent 4px);
}

.vr-theme-sunset-strip .vr-appbar {
    border-bottom: 2px solid #ff007f !important;
    background: rgba(5, 2, 10, 0.94) !important;
    box-shadow: 0 4px 30px rgba(255, 0, 127, 0.25) !important;
}

.vr-theme-sunset-strip .vr-brand-title {
    color: #fff !important;
    text-shadow: 2px 2px 0 #ff007f, -1px -1px 0 #05020a;
}

.vr-theme-sunset-strip .vr-brand-mark {
    border: 2px solid #39ff14 !important;
    color: #39ff14 !important;
    background: #05020a !important;
    border-radius: 0 !important;
    box-shadow: 0 0 12px rgba(57, 255, 20, 0.3) !important;
}

.vr-theme-sunset-strip .vr-drawer {
    border-right: 3px solid #39ff14 !important;
    background: #ff007f !important;
}

.vr-theme-sunset-strip .vr-drawer .mud-nav-link {
    color: #8d7da3 !important;
}

.vr-theme-sunset-strip .vr-drawer .mud-nav-link.active,
.vr-theme-sunset-strip .vr-drawer .mud-nav-link:hover {
    color: #ff007f !important;
    background: linear-gradient(90deg, rgba(255, 0, 127, 0.12), transparent) !important;
    border-left: 4px solid #ff007f;
    text-shadow: 0 0 8px rgba(255, 0, 127, 0.6);
}

.vr-theme-sunset-strip .vr-page-kicker {
    color: #39ff14 !important;
}

.vr-theme-sunset-strip .vr-page-title {
    color: #fff6fc !important;
    text-shadow: 3px 3px 0 rgba(255, 0, 127, 0.4);
}

.vr-theme-sunset-strip .mud-table-head .mud-table-cell {
    background: #05020a !important;
    color: #ff007f !important;
    border-bottom: 2px solid #ff007f !important;
}

.vr-theme-sunset-strip .mud-button-root.mud-button-filled {
    background: transparent !important;
    color: #39ff14 !important;
    border: 2px solid #39ff14 !important;
    box-shadow: 0 0 15px rgba(57, 255, 20, 0.2) !important;
    border-radius: 0 !important;
}

.vr-theme-sunset-strip .mud-button-root.mud-button-filled:hover {
    background: #39ff14 !important;
    color: #05020a !important;
    box-shadow: 0 0 30px rgba(57, 255, 20, 0.6) !important;
}

/* ══ BLUE NOTE ══════════════════════════════════════════════════════════ */

.vr-theme-blue-note {
    --vr-font-ui: "Inter", "Space Grotesk", Arial, sans-serif;
    --vr-font-display: "Roboto Slab", Georgia, serif;
    --vr-font-code: "IBM Plex Mono", Consolas, monospace;
    --vr-stage: #08121f;
    --vr-stage-soft: #0d1b2e;
    --vr-panel: rgba(251, 248, 240, 0.97);
    --vr-panel-strong: #fffbf4;
    --vr-panel-border: rgba(16, 24, 38, 0.12);
    --vr-ink: #101826;
    --vr-muted: #596678;
    --vr-hard-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
    --vr-radius: 0px;
    --vr-texture: radial-gradient(circle at 90% 15%, rgba(47, 109, 179, 0.2), transparent 32rem);
}

.vr-theme-blue-note .vr-appbar {
    background: #2f6db3 !important;
    border-bottom: 4px solid #2f6db3 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

.vr-theme-blue-note .vr-brand-mark {
    background: radial-gradient(circle, #2f6db3 0 16%, #111 17% 30%, #10243b 31% 33%, #080706 34% 100%) !important;
    border-radius: 50% !important;
    box-shadow: inset 0 0 0 7px rgba(255,255,255,0.055), 0 10px 24px rgba(0,0,0,0.3) !important;
}

.vr-theme-blue-note .vr-brand-title {
    text-shadow: 2px 2px 0 #d96d28;
}

.vr-theme-blue-note .vr-drawer {
    background: #fff7e8 !important;
    border-right: 3px solid #2f6db3 !important;
    color: #101826 !important;
}

.vr-theme-blue-note .vr-drawer .mud-nav-link {
    color: #101826 !important;
    border-radius: 0 !important;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
}

.vr-theme-blue-note .vr-drawer .mud-nav-link.active,
.vr-theme-blue-note .vr-drawer .mud-nav-link:hover {
    background: rgba(47, 109, 179, 0.15) !important;
    color: #2f6db3 !important;
    border-left: 4px solid #2f6db3;
}

.vr-theme-blue-note .vr-page-header {
    position: sticky;
    top: 0;
    background: #2f6db3 !important;
    color: #fbf8f0 !important;
    padding-left: 42px !important;
    border-radius: 0 !important;
    box-shadow: var(--vr-hard-shadow) !important;
}

.vr-theme-blue-note .vr-page-header::before {
    background: #d96d28 !important;
    width: 16px;
    opacity: 1;
}

.vr-theme-blue-note .vr-page-header::after {
    display: none;
}

.vr-theme-blue-note .vr-page-kicker {
    color: #d96d28 !important;
}

.vr-theme-blue-note .vr-page-title {
    color: #fbf8f0 !important;
    text-shadow: none !important;
}

.vr-theme-blue-note .mud-paper:not(.mud-appbar):not(.mud-drawer) {
    background: var(--vr-panel) !important;
    color: #101826 !important;
    border: 2px solid #101826 !important;
    border-radius: 0 !important;
    box-shadow: var(--vr-hard-shadow) !important;
}

.vr-theme-blue-note .mud-table-head .mud-table-cell {
    background: #101826 !important;
    color: #fff7e8 !important;
    border-right: 1px solid rgba(255,255,255,0.2) !important;
}

.vr-theme-blue-note .mud-table,
.vr-theme-blue-note .mud-data-grid,
.vr-theme-blue-note .mud-table-cell,
.vr-theme-blue-note .mud-table-pagination,
.vr-theme-blue-note .mud-input,
.vr-theme-blue-note .mud-input-control,
.vr-theme-blue-note .mud-select {
    color: #101826 !important;
}

.vr-theme-blue-note .mud-table-body .mud-table-row {
    background: #fffaf0 !important;
}

.vr-theme-blue-note .mud-table-body .mud-table-row:nth-child(odd) {
    background: #f7f0e3 !important;
}

.vr-theme-blue-note .mud-button-root.mud-button-filled {
    background: #d96d28 !important;
    color: #fff7e8 !important;
    border: 2px solid #101826 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.vr-theme-blue-note .mud-button-root.mud-button-filled:hover {
    background: #101826 !important;
    color: #fff7e8 !important;
}

.vr-theme-blue-note .vr-user-admin-action,
.vr-theme-blue-note .vr-user-admin-action * {
    color: #101826 !important;
}

.vr-theme-blue-note .mud-input-outlined .mud-input-outlined-border {
    border-radius: 0 !important;
    border-color: #101826 !important;
    border-width: 2px !important;
}

/* ══ JOIN THE MARCH ════════════════════════════════════════════════════ */

.vr-theme-join-the-march {
    --vr-font-ui: "Inter", "Space Grotesk", Arial, sans-serif;
    --vr-font-display: "Pirata One", serif;
    --vr-font-code: "IBM Plex Mono", Consolas, monospace;
    --vr-stage: #5c0606;
    --vr-stage-soft: #060202;
    --vr-panel: rgba(244, 241, 234, 0.97);
    --vr-panel-strong: #f4f1ea;
    --vr-panel-border: rgba(17, 17, 19, 0.18);
    --vr-ink: #111113;
    --vr-muted: #5c5245;
    --vr-hard-shadow: 0 35px 75px rgba(0,0,0,0.85), 8px 8px 0px rgba(0,0,0,0.4);
    --vr-radius: 0px;
    --vr-texture:
        radial-gradient(circle at 50% 45%, transparent 20%, #060202 85rem),
        radial-gradient(circle at 15% 20%, rgba(0,0,0,0.65), transparent 45rem),
        repeating-linear-gradient(0deg, rgba(0,0,0,0.22) 0px, rgba(0,0,0,0.22) 1px, transparent 1px, transparent 4px);
}

.vr-theme-join-the-march .vr-appbar {
    background: #000000 !important;
    border-bottom: 3px solid #111113 !important;
    box-shadow: 0 4px 25px rgba(0,0,0,0.9) !important;
}

.vr-theme-join-the-march .vr-brand-title {
    font-family: "Pirata One", serif !important;
    color: #f4f1ea !important;
    text-shadow: 2px 2px 0px #000000;
    font-weight: 400 !important;
    letter-spacing: 0.05em !important;
}

.vr-theme-join-the-march .vr-brand-mark {
    border: 2px solid #f4f1ea !important;
    color: #f4f1ea !important;
    background: #000000 !important;
    border-radius: 0 !important;
}

.vr-theme-join-the-march .vr-drawer {
    background: #a71212 !important;
    border-right: 3px solid #df9a28 !important;
}

.vr-theme-join-the-march .vr-drawer .mud-nav-link {
    font-family: "Pirata One", serif !important;
    color: rgba(244,241,234,0.5) !important;
    font-size: 1.35rem;
    border-radius: 0 !important;
}

.vr-theme-join-the-march .vr-drawer .mud-nav-link.active,
.vr-theme-join-the-march .vr-drawer .mud-nav-link:hover {
    color: #f4f1ea !important;
    background: rgba(255,255,255,0.05) !important;
    border-left: 4px solid #f4f1ea;
}

.vr-theme-join-the-march .vr-page-title {
    font-family: "Pirata One", serif !important;
    color: #f4f1ea !important;
    font-weight: 400 !important;
    text-shadow: 3px 3px 0px rgba(0,0,0,0.8);
}

.vr-theme-join-the-march .vr-page-kicker {
    color: #111113 !important;
}

.vr-theme-join-the-march .mud-paper:not(.mud-appbar):not(.mud-drawer) {
    background: linear-gradient(180deg, #f4f1ea, #e6dec3) !important;
    color: #111113 !important;
    border: 4px solid #111113 !important;
    border-radius: 0 !important;
    box-shadow: var(--vr-hard-shadow) !important;
}

.vr-theme-join-the-march .mud-table-head .mud-table-cell {
    background: #111113 !important;
    color: #f4f1ea !important;
    font-family: "IBM Plex Mono", monospace !important;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
}

.vr-theme-join-the-march .mud-table,
.vr-theme-join-the-march .mud-data-grid,
.vr-theme-join-the-march .mud-table-cell,
.vr-theme-join-the-march .mud-table-pagination,
.vr-theme-join-the-march .mud-input,
.vr-theme-join-the-march .mud-input-control,
.vr-theme-join-the-march .mud-select {
    color: #111113 !important;
}

.vr-theme-join-the-march .mud-table-body .mud-table-row {
    background: #f4f1ea !important;
}

.vr-theme-join-the-march .mud-table-body .mud-table-row:nth-child(odd) {
    background: #e8dfc9 !important;
}

.vr-theme-join-the-march .mud-button-root.mud-button-filled {
    background: #111113 !important;
    color: #f4f1ea !important;
    border-radius: 0 !important;
    box-shadow: 4px 4px 0px #a71212 !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.vr-theme-join-the-march .mud-button-root.mud-button-filled:hover {
    background: #232329 !important;
    transform: translate(-1px, -1px);
    box-shadow: 5px 5px 0px #a71212 !important;
}

/* ══ UNDERGROUND ════════════════════════════════════════════════════════ */

.vr-theme-underground {
    --vr-font-ui: "Space Grotesk", sans-serif;
    --vr-font-display: "Oswald", sans-serif;
    --vr-font-code: "IBM Plex Mono", monospace;
    --vr-stage: #f6f3ea;
    --vr-stage-soft: #eae6d6;
    --vr-panel: rgba(246, 243, 234, 0.98);
    --vr-panel-strong: #f6f3ea;
    --vr-panel-border: rgba(0, 102, 178, 0.2);
    --vr-ink: #0066b2;
    --vr-muted: #596678;
    --vr-hard-shadow: none;
    --vr-radius: 0px;
    --vr-texture:
        radial-gradient(circle at 15% 20%, rgba(0,102,178,0.02), transparent 40rem),
        radial-gradient(circle at 85% 75%, rgba(0,102,178,0.03), transparent 35rem);
}

.vr-theme-underground .vr-appbar {
    background: #f6f3ea !important;
    border-bottom: 3px solid #0066b2 !important;
    box-shadow: none !important;
    color: #0066b2 !important;
}

.vr-theme-underground .vr-appbar .mud-icon-button,
.vr-theme-underground .vr-appbar .mud-button-root,
.vr-theme-underground .vr-user-link {
    color: #0066b2 !important;
}

.vr-theme-underground .vr-brand-title {
    color: #0066b2 !important;
    text-shadow: none;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.01em !important;
}

.vr-theme-underground .vr-brand-mark {
    border: 3px solid #0066b2 !important;
    color: #0066b2 !important;
    background: #f6f3ea !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
}

.vr-theme-underground .vr-drawer {
    background: #f6f3ea !important;
    border-right: 3px solid #0066b2 !important;
    color: #0066b2 !important;
}

.vr-theme-underground .vr-drawer .mud-nav-link {
    color: #0066b2 !important;
    border-radius: 0 !important;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 1.15rem;
    letter-spacing: 0.02em;
}

.vr-theme-underground .vr-drawer .mud-nav-link.active,
.vr-theme-underground .vr-drawer .mud-nav-link:hover {
    background: rgba(0,102,178,0.12) !important;
    color: #0066b2 !important;
    font-weight: 700;
    border-left: none;
}

.vr-theme-underground .vr-page-header {
    border-bottom: 3px solid #0066b2 !important;
    background: #ffffff !important;
}

.vr-theme-underground .vr-page-header::before,
.vr-theme-underground .vr-page-header::after {
    display: none;
}

.vr-theme-underground .vr-page-kicker {
    color: #0066b2 !important;
    opacity: 0.8;
}

.vr-theme-underground .vr-page-title {
    color: #0066b2 !important;
    text-shadow: none !important;
    letter-spacing: -0.02em !important;
}

.vr-theme-underground .mud-paper:not(.mud-appbar):not(.mud-drawer) {
    background: #ffffff !important;
    border: 3px solid #0066b2 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #0066b2 !important;
}

.vr-theme-underground .vr-pagination-bar {
    background: #ffffff !important;
}

.vr-theme-underground .mud-table-head .mud-table-cell {
    background: #f6f3ea !important;
    color: #0066b2 !important;
    border-bottom: 3px solid #0066b2 !important;
}

.vr-theme-underground .mud-button-root.mud-button-filled {
    background: #0066b2 !important;
    color: #f6f3ea !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.vr-theme-underground .mud-button-root.mud-button-filled:hover {
    opacity: 0.9;
}

.vr-theme-underground .mud-input-outlined .mud-input-outlined-border {
    border-radius: 0 !important;
    border-color: #0066b2 !important;
    border-width: 3px !important;
}

.vr-appbar {
    z-index: 4;
    border-bottom: 3px solid var(--mud-palette-tertiary);
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.08)),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.08) 0 1px, transparent 1px 16px),
        var(--mud-palette-primary) !important;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
}

.vr-user-link {
    position: relative;
}

.vr-user-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    margin-left: 8px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--mud-palette-error);
    color: var(--mud-palette-error-text);
    font-family: var(--vr-font-ui, inherit);
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.28), 0 0 10px var(--mud-palette-error);
}

.vr-brand {
    position: relative;
    display: inline-grid;
    align-items: center;
    min-height: 52px;
    margin-inline-start: 18px;
    padding: 0 0 0 46px;
    min-width: 0;
}

.vr-brand-mark,
.vr-login-mark {
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    font-family: var(--vr-font-code);
    font-weight: 900;
    background:
        radial-gradient(circle, var(--mud-palette-tertiary) 0 16%, #111 17% 30%, color-mix(in srgb, var(--mud-palette-primary) 72%, #000) 31% 33%, #080706 34% 100%),
        repeating-radial-gradient(circle, rgba(255,255,255,0.12) 0 1px, transparent 1px 5px);
    box-shadow: inset 0 0 0 7px rgba(255, 255, 255, 0.055), 0 10px 24px rgba(0, 0, 0, 0.3);
}

.vr-brand-mark {
    position: absolute;
    z-index: 0;
    left: -10px;
    top: 50%;
    width: 76px;
    height: 58px;
    transform: translateY(-50%);
    font-size: 0;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.vr-vinyl-icon {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.28));
}

.vr-vinyl-icon__shadow {
    fill: rgba(0, 0, 0, 0.38);
}

.vr-vinyl-icon__disc {
    stroke: color-mix(in srgb, var(--mud-palette-primary) 38%, #333);
    stroke-width: 1;
}

.vr-vinyl-icon__groove {
    fill: none;
    stroke: rgba(255, 255, 255, 0.13);
    stroke-width: 0.65;
}

.vr-vinyl-icon__label {
    stroke: color-mix(in srgb, var(--mud-palette-secondary) 70%, #fff);
    stroke-width: 0.75;
}

.vr-brand-title {
    position: relative;
    z-index: 1;
    line-height: 1.05;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase;
    font-family: var(--vr-font-display);
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.72);
}

.vr-brand-subtitle {
    display: block;
    color: rgba(255, 255, 255, 0.74);
    line-height: 1;
    font-family: var(--vr-font-code);
}

.vr-theme-chip {
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 999px;
    font-family: var(--vr-font-code);
    font-weight: 700;
    text-transform: uppercase;
}

.vr-theme-menu-item {
    display: grid;
    gap: 2px;
    min-width: 230px;
}

.vr-theme-menu-popover .mud-popover-paper,
.vr-theme-menu-popover .mud-list {
    max-height: min(68vh, 520px);
    overflow-y: auto;
}

.vr-theme-menu-name {
    font-weight: 850;
}

.vr-theme-menu-mood {
    color: var(--mud-palette-text-secondary);
    font-size: 0.76rem;
    line-height: 1.2;
}

.vr-drawer {
    border-right: 3px solid var(--mud-palette-tertiary);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--mud-palette-primary) 24%, transparent), transparent 12rem),
        repeating-linear-gradient(0deg, transparent 0 31px, var(--vr-paper-line) 32px 33px),
        var(--vr-panel-strong) !important;
}

.vr-drawer.mud-drawer-temporary {
    box-shadow: 18px 0 48px rgba(0, 0, 0, 0.38);
}

.vr-drawer .mud-drawer-header {
    min-height: 116px;
    border-bottom: 1px solid var(--vr-panel-border);
}

.vr-drawer-kicker,
.vr-page-kicker,
.vr-label-code {
    color: var(--mud-palette-primary);
    font-family: var(--vr-font-code);
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase;
}

.vr-drawer .mud-nav-link {
    position: relative;
    margin: 6px 12px;
    border: 1px solid transparent;
    border-radius: var(--vr-radius);
    color: var(--vr-ink);
    font-weight: 800;
}

.vr-drawer .mud-nav-link::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    width: 18px;
    height: 2px;
    background: color-mix(in srgb, var(--mud-palette-primary) 44%, transparent);
    transform: translateY(-50%);
}

.vr-drawer .mud-nav-link.active,
.vr-drawer .mud-nav-link:hover {
    border-color: var(--vr-panel-border);
    background: color-mix(in srgb, var(--mud-palette-primary) 18%, transparent);
    box-shadow: 4px 4px 0 color-mix(in srgb, var(--mud-palette-tertiary) 28%, transparent);
}

.vr-main {
    position: relative;
    z-index: 1;
    overflow-y: auto;
    height: calc(100vh - var(--mud-appbar-height));
}

.vr-shell-content {
    padding: 0;
    padding-top: 8px;
}

.vr-app .mud-paper {
    border: 1px solid var(--vr-panel-border);
    border-radius: var(--vr-radius);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent),
        repeating-linear-gradient(0deg, transparent 0 31px, var(--vr-paper-line) 32px 33px),
        var(--vr-panel);
    box-shadow: var(--vr-shadow);
    color: var(--vr-ink);
}

.vr-app .mud-table,
.vr-app .mud-data-grid {
    border: 1px solid var(--vr-panel-border);
    border-radius: var(--vr-radius);
    overflow: hidden;
    background: var(--vr-panel);
    box-shadow: var(--vr-shadow);
}

.vr-grid-wrap {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: var(--vr-radius);
}

.vr-mobile-record-list {
    display: none;
}

.vr-collection-grid {
    width: 100%;
    min-width: 700px;
}

.vr-collection-grid .mud-table-container {
    overflow-y: visible;
    max-height: none;
}

.vr-grid-wrap .mud-pagination {
    flex-wrap: wrap;
}

.vr-album-cover {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    overflow: hidden;
    border: 1px solid var(--vr-panel-border);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--mud-palette-primary) 18%, transparent), transparent 45%),
        var(--vr-panel-strong);
    box-shadow: 3px 3px 0 color-mix(in srgb, var(--mud-palette-tertiary) 32%, transparent);
}

.vr-album-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vr-album-cover-xs {
    width: 46px;
    height: 46px;
}

.vr-album-cover-sm {
    width: 58px;
    height: 58px;
}

.vr-album-cover-md {
    width: 92px;
    height: 92px;
}

.vr-album-cover-lg {
    width: min(100%, 220px);
    aspect-ratio: 1;
}

.vr-album-cover-xl {
    width: 100%;
    aspect-ratio: 1;
}

.vr-album-cover-fallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}

.vr-album-cover-disc {
    width: 74%;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle, var(--mud-palette-primary) 0 16%, transparent 17% 28%, rgba(0,0,0,.78) 29%),
        repeating-radial-gradient(circle, rgba(255,255,255,.16) 0 1px, transparent 2px 7px);
}

.vr-album-cover-initials {
    position: absolute;
    display: grid;
    place-items: center;
    width: 34%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-appbar-text);
    font-family: var(--vr-font-code);
    font-size: clamp(0.58rem, 1.2vw, 0.88rem);
    font-weight: 900;
    line-height: 1;
}

.vr-dialog-cover {
    width: 100%;
    max-width: 440px;
}

.vr-album-dialog-content {
    display: grid;
    gap: 20px;
}

.vr-album-dialog-main {
    display: grid;
    grid-template-columns: minmax(240px, 0.42fr) minmax(0, 1fr);
    gap: clamp(20px, 3vw, 36px);
    align-items: start;
}

.vr-album-dialog-cover {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.vr-album-dialog-fields {
    min-width: 0;
}

.vr-album-dialog-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 18px 20px;
    align-items: start;
}

.vr-field-span-12 {
    grid-column: span 12;
}

.vr-field-span-6 {
    grid-column: span 6;
}

.vr-field-span-year {
    grid-column: span 2;
}

.vr-field-span-condition {
    grid-column: span 7;
}

.vr-field-span-qty {
    grid-column: span 3;
}

.vr-album-dialog-meta,
.vr-album-dialog-track-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.vr-album-dialog-meta-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.vr-album-dialog-track-list {
    min-height: 96px;
}

@media (max-width: 900px) {
    .vr-album-dialog-main {
        grid-template-columns: 1fr;
    }

    .vr-dialog-cover {
        max-width: 360px;
    }

    .vr-field-span-12,
    .vr-field-span-6,
    .vr-field-span-year,
    .vr-field-span-condition,
    .vr-field-span-qty {
        grid-column: span 12;
    }

    .vr-album-dialog-meta,
    .vr-album-dialog-track-header {
        align-items: flex-start;
        flex-direction: column;
    }
}

.vr-collection-grid .mud-table-cell {
    padding-inline: 14px;
}

.vr-collection-grid .mud-table-head .mud-table-cell {
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--mud-palette-surface);
}

.vr-collection-grid .mud-table-head .mud-button-root,
.vr-collection-grid .mud-table-head button {
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
}

.vr-collection-grid .mud-table-sort-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
}

.vr-collection-grid .mud-table-sort-label:hover {
    background: transparent !important;
}

.vr-collection-grid .mud-table-sort-label-icon {
    opacity: 0.7;
    color: var(--mud-palette-tertiary) !important;
}

.vr-actions-cell {
    position: sticky;
    right: 0;
    z-index: 2;
    width: 200px;
    min-width: 200px;
    max-width: 200px;
    text-align: right !important;
}

.vr-collection-grid .mud-table-body .mud-table-row .vr-actions-cell {
    background: var(--vr-panel) !important;
}

.vr-collection-grid .mud-table-body .mud-table-row:nth-child(odd) .vr-actions-cell {
    background: color-mix(in srgb, var(--vr-panel) 84%, var(--mud-palette-primary) 16%) !important;
}

.vr-collection-grid .mud-table-body .mud-table-row:hover .vr-actions-cell {
    background: color-mix(in srgb, var(--vr-panel) 76%, var(--mud-palette-primary) 24%) !important;
}

.vr-collection-grid .mud-table-head .vr-actions-cell {
    z-index: 3;
    background: color-mix(in srgb, var(--mud-palette-primary) 28%, var(--vr-panel-strong));
}

.vr-row-actions {
    width: 100%;
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.vr-collection-grid .vr-row-actions .mud-icon-button {
    flex: 0 0 36px;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 30%, transparent) !important;
    border-radius: 6px !important;
    background: color-mix(in srgb, var(--vr-panel-strong) 86%, transparent) !important;
    box-shadow: none !important;
}

.vr-collection-grid .vr-row-actions .mud-icon-button:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, var(--vr-panel-strong)) !important;
}

.vr-collection-grid .vr-row-actions .mud-icon-button .mud-icon-root {
    font-size: 1.35rem !important;
}

.vr-app .mud-table-head .mud-table-cell,
.vr-app .mud-data-grid-header {
    border-bottom: 2px solid var(--mud-palette-tertiary);
    background: color-mix(in srgb, var(--mud-palette-primary) 18%, var(--vr-panel-strong));
    color: var(--vr-ink);
    font-weight: 800;
    text-transform: uppercase;
}

.vr-app .mud-button-root {
    border-radius: 6px;
    font-weight: 850;
    letter-spacing: 0;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.18);
}

.vr-app .mud-button-filled-primary {
    color: #14100a !important;
}

.vr-theme-used-record-bin .mud-button-filled-primary {
    color: #fff0c2 !important;
}

.vr-app .mud-input-outlined-border {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 36%, var(--vr-panel-border)) !important;
}

.vr-page-header {
    --vr-header-control-height: 56px;
    position: sticky;
    top: 0;
    z-index: 100;
    overflow: hidden;
    min-height: 160px;
    background: var(--mud-palette-surface);
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    border-radius: 0 0 8px 8px;
}

.vr-page-header::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--mud-palette-primary) 18%, transparent), transparent 46%),
        repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.05) 0 1px, transparent 1px 84px);
}

.vr-page-header::after {
    content: "";
    position: absolute;
    right: -86px;
    top: -104px;
    width: 270px;
    height: 270px;
    border-radius: 50%;
    background:
        radial-gradient(circle, var(--mud-palette-tertiary) 0 12%, transparent 13% 26%, rgba(0,0,0,0.62) 27% 100%),
        repeating-radial-gradient(circle, rgba(255,255,255,0.13) 0 1px, transparent 1px 7px);
    opacity: 0.42;
}

.vr-page-header > * {
    position: relative;
    z-index: 1;
}

.vr-collection-hero {
    display: grid;
    grid-template-columns: minmax(420px, 0.65fr) minmax(680px, 1.35fr);
    gap: 18px;
    align-items: center;
}

.vr-page-title {
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase;
    font-family: var(--vr-font-display);
}

.vr-collection-title {
    max-width: 540px;
}

.vr-stat-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.vr-stat {
    min-width: 112px;
    padding: 10px 12px;
    border: 1px solid var(--vr-panel-border);
    border-radius: 6px;
    background: color-mix(in srgb, var(--vr-panel-strong) 78%, transparent);
    box-shadow: var(--vr-hard-shadow);
}

.vr-stat-value {
    display: block;
    font-family: var(--vr-font-code);
    font-size: 1.45rem;
    font-weight: 900;
    line-height: 1;
}

.vr-stat-label {
    color: var(--vr-muted);
    font-family: var(--vr-font-code);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.vr-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-start;
    align-items: center;
}

.vr-query-page {
    --vr-query-chrome: #f8f1df;
    --vr-query-chrome-muted: rgba(248, 241, 223, 0.78);
    --vr-query-chrome-panel: rgba(8, 8, 8, 0.42);
    color: var(--vr-query-chrome);
}

.vr-query-title {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--vr-query-chrome) !important;
    font-family: var(--vr-font-display) !important;
    font-weight: 900 !important;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.86);
}

.vr-query-title::before {
    content: "";
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 62% 40%, var(--mud-palette-secondary) 0 12%, #111 13% 28%, var(--mud-palette-primary) 29% 31%, #050505 32% 100%),
        repeating-radial-gradient(circle, rgba(255,255,255,0.18) 0 1px, transparent 1px 5px);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mud-palette-tertiary) 52%, transparent), 0 10px 24px rgba(0,0,0,0.35);
}

.vr-query-toolbar {
    padding: 10px 0 12px;
}

.vr-query-toolbar .mud-input-control {
    min-width: 260px;
}

.vr-query-toolbar .mud-input,
.vr-query-toolbar .mud-input-slot,
.vr-query-toolbar .mud-input-label,
.vr-query-toolbar .mud-input-adornment,
.vr-query-toolbar .mud-icon-root {
    color: var(--vr-query-chrome) !important;
    opacity: 1 !important;
}

.vr-query-toolbar .mud-input {
    background: var(--vr-query-chrome-panel) !important;
    border-radius: 8px;
}

.vr-query-toolbar .mud-input-label,
.vr-query-toolbar .mud-input-label-outlined,
.vr-query-toolbar .mud-input-control > .mud-input-control-input-container > div.mud-input-label-inputcontrol {
    background: rgba(5, 5, 5, 0.82) !important;
    border-radius: 3px;
    box-shadow: 0 0 0 2px rgba(5, 5, 5, 0.82);
    padding-inline: 4px;
}

.vr-query-toolbar .mud-input-outlined-border {
    border-color: color-mix(in srgb, var(--vr-query-chrome) 50%, transparent) !important;
}

.vr-query-toggle {
    border: 1px solid color-mix(in srgb, var(--vr-query-chrome) 54%, transparent);
    border-radius: 8px;
    overflow: hidden;
    background: var(--vr-query-chrome-panel);
}

.vr-query-toggle .mud-toggle-item {
    color: var(--vr-query-chrome) !important;
    font-family: var(--vr-font-code) !important;
    font-weight: 900 !important;
}

.vr-query-toggle .mud-toggle-item.mud-selected-item {
    background: var(--mud-palette-primary) !important;
    color: #fff8e8 !important;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.72);
}

.vr-query-toolbar .mud-button-filled-primary {
    color: #fff8e8 !important;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.72);
}

.vr-form-surface {
    --vr-form-ink: #24180e;
    --vr-form-muted: #675640;
    --vr-form-border: rgba(61, 45, 28, 0.42);
    color: var(--vr-form-ink) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.62), transparent),
        repeating-linear-gradient(0deg, rgba(96, 70, 42, 0.05) 0 1px, transparent 1px 28px),
        #f7efe1 !important;
    border-color: rgba(54, 40, 25, 0.32) !important;
}

.vr-form-surface .mud-typography,
.vr-form-surface .mud-input,
.vr-form-surface .mud-input-slot,
.vr-form-surface input,
.vr-form-surface textarea,
.vr-form-surface .mud-select,
.vr-form-surface .mud-select-input,
.vr-form-surface .mud-input-adornment,
.vr-form-surface .mud-icon-root {
    color: var(--vr-form-ink) !important;
    opacity: 1 !important;
}

.vr-form-surface .mud-input-label,
.vr-form-surface .mud-input-label-outlined,
.vr-form-surface .mud-input-control > .mud-input-control-input-container > div.mud-input-label-inputcontrol {
    color: var(--vr-form-muted) !important;
    background: #f7efe1;
    padding-inline: 4px;
    opacity: 1 !important;
}

.vr-form-surface .mud-input-outlined-border {
    border-color: var(--vr-form-border) !important;
}

.vr-form-surface .mud-input:hover .mud-input-outlined-border,
.vr-form-surface .mud-input:focus-within .mud-input-outlined-border {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 62%, var(--vr-form-border)) !important;
}

.vr-form-surface ::placeholder {
    color: color-mix(in srgb, var(--vr-form-muted) 78%, transparent) !important;
    opacity: 1;
}


.vr-landing-shell {
    display: grid;
    gap: 28px;
    width: min(1180px, calc(100vw - 48px));
    margin: 0 auto;
    padding: clamp(24px, 4vw, 56px) 0 64px;
}

.vr-landing-hero,
.vr-landing-section,
.vr-landing-band {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--vr-panel-border);
    border-radius: var(--vr-radius);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(255, 248, 232, 0.96)),
        repeating-linear-gradient(0deg, transparent 0 31px, var(--vr-paper-line) 32px 33px),
        var(--vr-panel);
    box-shadow: var(--vr-shadow);
}

.vr-landing-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
    gap: clamp(24px, 5vw, 72px);
    align-items: center;
    min-height: 520px;
    padding: clamp(30px, 6vw, 76px);
}

.vr-landing-hero::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 10px;
    background: linear-gradient(90deg, var(--mud-palette-primary), var(--mud-palette-tertiary), var(--mud-palette-secondary));
}

.vr-landing-copy,
.vr-landing-record,
.vr-landing-section > *,
.vr-landing-band > * {
    position: relative;
    z-index: 1;
}

.vr-landing-kicker {
    color: var(--mud-palette-primary) !important;
}

.vr-landing-copy h1,
.vr-landing-section-heading h2,
.vr-landing-band h2 {
    margin: 0;
    color: var(--vr-ink);
    font-family: var(--vr-font-display);
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.vr-landing-copy h1 {
    max-width: 760px;
    font-size: clamp(3.2rem, 9vw, 7.2rem);
    line-height: 0.9;
}

.vr-landing-lede,
.vr-landing-card p,
.vr-landing-band p {
    color: var(--vr-muted);
    font-size: 1.04rem;
    line-height: 1.65;
}

.vr-landing-lede {
    max-width: 660px;
    margin: 24px 0 0;
    font-size: clamp(1.08rem, 2vw, 1.32rem);
}

.vr-landing-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 32px;
}

.vr-landing-actions .mud-button-root,
.vr-landing-band .mud-button-root {
    min-height: 52px;
    padding-inline: 26px;
}

.vr-landing-record {
    display: grid;
    place-items: center;
}

.vr-landing-record img {
    width: min(100%, 430px);
    height: auto;
    filter: drop-shadow(0 28px 42px rgba(0, 0, 0, 0.34));
}

.vr-landing-section {
    padding: clamp(26px, 4vw, 44px);
}

.vr-landing-section-heading {
    display: grid;
    gap: 8px;
    margin-bottom: 22px;
}

.vr-landing-section-heading h2,
.vr-landing-band h2 {
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1;
}

.vr-landing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.vr-landing-card {
    min-height: 220px;
    padding: 24px;
    border: 1px solid var(--vr-panel-border);
    border-radius: var(--vr-radius);
    background: color-mix(in srgb, var(--vr-panel-strong) 86%, transparent);
    box-shadow: var(--vr-hard-shadow);
}

.vr-landing-card .mud-icon-root {
    color: var(--mud-palette-primary);
    font-size: 2rem;
}

.vr-landing-card h3 {
    margin: 18px 0 8px;
    color: var(--vr-ink);
    font-family: var(--vr-font-code);
    font-size: 1rem;
    font-weight: 900;
    text-transform: uppercase;
}

.vr-landing-card p {
    margin: 0;
    font-size: 0.96rem;
}

.vr-landing-band {
    display: flex;
    gap: 24px;
    align-items: center;
    justify-content: space-between;
    padding: clamp(26px, 4vw, 42px);
}

.vr-landing-band p {
    max-width: 700px;
    margin: 12px 0 0;
}

@media (max-width: 980px) {
    .vr-landing-hero {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .vr-landing-record {
        order: -1;
    }

    .vr-landing-record img {
        width: min(66vw, 310px);
    }

    .vr-landing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vr-landing-band {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 620px) {
    .vr-landing-shell {
        width: min(100%, calc(100vw - 24px));
        padding-top: 14px;
    }

    .vr-landing-hero,
    .vr-landing-section,
    .vr-landing-band {
        padding: 20px;
    }

    .vr-landing-copy h1 {
        font-size: clamp(2.6rem, 16vw, 4.4rem);
    }

    .vr-landing-grid {
        grid-template-columns: 1fr;
    }

    .vr-landing-actions .mud-button-root,
    .vr-landing-band .mud-button-root {
        width: 100%;
    }
}
.vr-login-shell {
    min-height: calc(100vh - var(--mud-appbar-height) - 60px);
    display: grid;
    align-items: center;
}

.vr-login-card {
    position: relative;
    overflow: hidden;
}

.vr-login-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 10px;
    background: linear-gradient(180deg, var(--mud-palette-primary), var(--mud-palette-tertiary), var(--mud-palette-secondary));
}

.vr-login-card::after {
    content: "33 1/3 RPM";
    position: absolute;
    right: 20px;
    top: 18px;
    color: color-mix(in srgb, var(--vr-muted) 60%, transparent);
    font-family: var(--vr-font-code);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.vr-login-brand {
    display: grid;
    justify-items: center;
    gap: 10px;
}

.vr-login-mark {
    width: 112px;
    height: 112px;
}

.vr-login-copy {
    max-width: 22rem;
    margin-inline: auto;
}

@media (max-width: 980px) {
    .vr-appbar {
        min-height: 64px;
    }

    .vr-brand {
        min-height: 44px;
        margin-inline-start: 10px;
        padding-left: 39px;
    }

    .vr-brand-mark {
        left: -9px;
        width: 64px;
        height: 48px;
    }

    .vr-brand-title {
        max-width: 34vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 1.05rem !important;
    }

    .vr-user-link {
        min-width: 44px;
        max-width: 96px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .vr-user-badge {
        min-width: 18px;
        height: 18px;
        margin-left: 4px;
        padding-inline: 5px;
        font-size: 0.66rem;
    }
}

@media (max-width: 920px) {
    .vr-collection-hero {
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 14px;
        width: 100%;
        min-width: 0;
    }

    .vr-toolbar {
        position: static;
        top: auto;
        z-index: 3;
        display: grid;
        grid-template-columns: 1fr;
        justify-content: stretch;
        gap: 12px;
        width: 100%;
        min-width: 0;
        padding: 12px;
        border: 1px solid var(--vr-panel-border);
        border-radius: var(--vr-radius);
        background:
            linear-gradient(180deg, rgba(255,255,255,0.05), transparent),
            var(--vr-panel);
        box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
    }

    .vr-toolbar .mud-input-control,
    .vr-toolbar .mud-input-root,
    .vr-toolbar .mud-button-root {
        width: 100% !important;
        min-width: 0 !important;
    }

    .vr-toolbar > * {
        flex: 1 1 100%;
        min-width: 0 !important;
        width: 100%;
    }

    .vr-toolbar .mud-button-root {
        min-height: 48px;
    }

    .vr-grid-wrap {
        display: none;
    }

    .vr-mobile-record-list {
        display: grid;
        gap: 12px;
    }

    .vr-record-card {
        padding: 14px;
        border-radius: var(--vr-radius);
    }

    .vr-record-card-main {
        display: grid;
        grid-template-columns: 58px minmax(0, 1fr) auto;
        gap: 12px;
        align-items: start;
        cursor: pointer;
    }

    .vr-record-artist {
        color: var(--vr-muted);
        font-family: var(--vr-font-code);
        font-size: 0.78rem;
        font-weight: 900;
        text-transform: uppercase;
    }

    .vr-record-title {
        margin-top: 3px;
        color: var(--vr-ink);
        font-family: var(--vr-font-display);
        font-size: 1.05rem;
        font-weight: 900;
        line-height: 1.18;
    }

    .vr-record-year {
        padding: 5px 8px;
        border: 1px solid var(--vr-panel-border);
        border-radius: 999px;
        color: var(--vr-ink);
        font-family: var(--vr-font-code);
        font-size: 0.75rem;
        font-weight: 900;
        background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    }

    .vr-record-variant {
        margin-top: 10px;
        color: var(--vr-ink);
        font-size: 0.9rem;
        line-height: 1.28;
    }

    .vr-record-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        margin-top: 12px;
    }

    .vr-record-meta span {
        padding: 5px 8px;
        border: 1px solid var(--vr-panel-border);
        border-radius: 999px;
        color: var(--vr-muted);
        font-family: var(--vr-font-code);
        font-size: 0.72rem;
        font-weight: 800;
        background: color-mix(in srgb, var(--vr-panel-strong) 76%, transparent);
    }

    .vr-record-actions {
        display: flex;
        justify-content: flex-end;
        gap: 4px;
        margin-top: 10px;
    }

    .vr-record-actions .mud-icon-button {
        width: 44px;
        height: 44px;
    }

    .vr-query-toolbar {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 12px !important;
        align-items: stretch !important;
    }

    .vr-query-toolbar .mud-input-control,
    .vr-query-toolbar .mud-toggle-group,
    .vr-query-toolbar .mud-button-root {
        width: 100%;
        min-width: 0 !important;
    }

    .vr-query-toolbar .mud-button-root {
        min-height: 48px;
    }

    .vr-form-surface {
        padding: 14px !important;
    }

    .vr-add-card {
        padding: 16px !important;
    }

    .vr-add-search-row {
        flex-direction: column !important;
    }

    .vr-add-search-row .mud-button-root,
    .vr-save-record-button {
        width: 100%;
        min-height: 50px;
    }

    .vr-discogs-result {
        align-items: flex-start !important;
    }
}

@media (max-width: 720px) {
    .vr-shell-content {
        padding: 16px;
    }

    .vr-brand-subtitle,
    .vr-theme-menu,
    .vr-logout-button {
        display: none;
    }

    .vr-appbar .mud-toolbar {
        padding-inline: 8px;
    }

    .vr-user-link {
        max-width: 74px;
        padding-inline: 8px !important;
    }

    .vr-page-header {
        min-height: auto;
    }
}

@media (max-width: 520px) {
    html,
    body,
    #app,
    .vr-app {
        max-width: 100%;
        overflow-x: hidden;
    }

    .vr-shell-content {
        padding: 12px;
        max-width: 100vw;
        overflow-x: hidden;
    }

    .vr-page-header {
        margin-inline: 0 !important;
        padding: 12px !important;
        overflow: hidden;
        background:
            linear-gradient(180deg, rgba(255,255,255,0.08), transparent),
            repeating-linear-gradient(0deg, transparent 0 31px, var(--vr-paper-line) 32px 33px),
            var(--vr-panel) !important;
    }

    .vr-page-header::after {
        right: -158px;
        top: -116px;
        opacity: 0.22;
    }

    .vr-page-title {
        font-size: 1.75rem !important;
        line-height: 1.04 !important;
    }

    .vr-stat-strip {
        display: grid;
        grid-template-columns: repeat(3, minmax(82px, 1fr));
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 2px;
    }

    .vr-stat {
        display: grid;
        align-content: center;
        min-width: 0;
        min-height: 74px;
        padding: 9px 8px;
        text-align: center;
    }

    .vr-stat-value {
        font-size: 1.16rem;
    }

    .vr-stat-label {
        font-size: 0.62rem;
        overflow-wrap: normal;
        word-break: normal;
    }

    .vr-record-card {
        padding: 12px;
    }

    .vr-record-title {
        font-size: 1rem;
    }

    .vr-login-card,
    .vr-app .mud-paper {
        box-shadow: 0 16px 46px rgba(0, 0, 0, 0.32);
    }
}

@media (max-width: 480px) {
    .vr-appbar .mud-toolbar {
        min-width: 0;
        padding-inline: 4px;
    }

    .vr-appbar .mud-icon-button {
        width: 44px;
        min-width: 44px;
        height: 44px;
    }

    .vr-brand {
        flex: 1 1 auto;
        min-width: 0;
        margin-inline-start: 8px;
        padding-left: 39px;
    }

    .vr-brand-mark {
        left: -8px;
        width: 64px;
        min-width: 64px;
        height: 48px;
    }

    .vr-brand-title {
        max-width: calc(100vw - 190px);
        font-size: clamp(1.05rem, 7vw, 1.55rem) !important;
    }

    .vr-user-link {
        min-width: 0;
        max-width: 54px;
        padding-inline: 4px !important;
    }

    .vr-collection-title {
        max-width: none;
        width: 100%;
    }

    .vr-page-kicker {
        font-size: 0.78rem !important;
        letter-spacing: 0.12em !important;
    }

    .vr-page-title {
        max-width: 100%;
        font-size: clamp(2rem, 13vw, 3.15rem) !important;
        overflow-wrap: anywhere;
    }

    .vr-toolbar {
        position: static;
        top: auto;
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        min-width: 0;
        padding: 12px;
        margin-top: 0;
    }

    .vr-toolbar .mud-input-control,
    .vr-toolbar .mud-input-root,
    .vr-toolbar .mud-button-root {
        width: 100% !important;
        min-width: 0 !important;
    }

    .vr-toolbar .mud-button-root {
        justify-content: center;
        overflow: hidden;
        white-space: nowrap;
    }

    .vr-mobile-record-list {
        width: 100%;
        min-width: 0;
    }

    .vr-record-card {
        width: 100%;
        min-width: 0;
        overflow: hidden;
    }

    .vr-record-card-main {
        grid-template-columns: 58px minmax(0, 1fr) auto;
    }

    .vr-record-artist,
    .vr-record-title,
    .vr-record-variant {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .vr-record-meta span {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .vr-record-actions {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
        gap: 8px;
    }

    .vr-record-actions .mud-icon-button {
        justify-self: stretch;
        width: 100%;
        min-width: 44px;
    }
}

.vr-barcode-scanner {
    display: grid;
    gap: 12px;
    justify-items: center;
    width: 100%;
}

.vr-mobile-barcode-scanner {
    display: none;
}

@media (max-width: 767px) {
    .vr-mobile-barcode-scanner {
        display: block;
    }
}

.vr-barcode-scanner-actions {
    display: flex;
    justify-content: center;
    width: 100%;
}

.vr-barcode-viewfinder {
    position: relative;
    width: min(100%, 360px);
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--vr-border, rgba(255,255,255,0.22)) 70%, transparent);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(255,255,255,0.06), transparent 42%), rgba(0, 0, 0, 0.42);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

.vr-barcode-viewfinder.is-running {
    border-color: color-mix(in srgb, var(--vr-accent, #d7ff1e) 70%, white 10%);
}

.vr-barcode-reader,
.vr-barcode-reader > div,
.vr-barcode-reader video {
    width: 100% !important;
    height: 100% !important;
}

.vr-barcode-reader video {
    object-fit: cover;
}

.vr-barcode-reader img,
.vr-barcode-reader button,
.vr-barcode-reader select {
    display: none !important;
}

.vr-barcode-placeholder,
.vr-barcode-loading {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 10px;
    color: var(--vr-text, #f6f2e8);
    background: rgba(0, 0, 0, 0.34);
    font-size: 0.95rem;
    text-align: center;
}

.vr-barcode-loading {
    backdrop-filter: blur(6px);
}

.vr-barcode-hint,
.vr-barcode-success,
.vr-barcode-error {
    display: block;
    width: min(100%, 360px);
    min-height: 20px;
    text-align: center;
}

.vr-barcode-hint {
    color: var(--vr-muted, rgba(255,255,255,0.68));
}

.vr-barcode-success {
    color: #88f08a;
}

.vr-barcode-error {
    color: #ff8a8a;
}

.vr-add-page .mud-input-slot,
.vr-add-page input,
.vr-add-page textarea {
    font-size: 16px !important;
}

.vr-add-page .mud-input-root:focus-within {
    transition: border-color 160ms ease, box-shadow 160ms ease;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--vr-accent, #d7ff1e) 24%, transparent);
}

/* ── Help page ─────────────────────────────────────────────────────────────── */
.vr-help-layout {
    display: flex;
    gap: 0;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
}

.vr-help-toc {
    width: 220px;
    min-width: 220px;
    padding: 24px 0 24px 0;
    border-right: 1px solid var(--mud-palette-lines-default);
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: sticky;
    top: 0;
    height: 100%;
    overflow: hidden;
    background: var(--mud-palette-surface);
    flex-shrink: 0;
}

.vr-help-toc-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    padding: 0 20px 10px;
}

.vr-help-toc-link {
    display: block;
    padding: 6px 20px;
    font-size: 13px;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    border-radius: 0;
    transition: background .15s, color .15s;
}

.vr-help-toc-link:hover {
    background: var(--mud-palette-background-grey);
    color: var(--mud-palette-primary);
}

.vr-help-content {
    flex: 1;
    height: 100%;
    min-height: 0;
    padding: 32px 48px 64px;
    max-width: 820px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.vr-help-page > .vr-page-body {
    overflow: hidden !important;
}

.vr-help-h1-hero {
    font-size: 28px;
    font-weight: 700;
    color: var(--mud-palette-primary);
    margin: 0 0 4px;
}

.vr-help-subtitle {
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
    margin: 0 0 32px;
}

.vr-help-section {
    border-top: 1px solid var(--mud-palette-lines-default);
    padding-top: 28px;
    margin-top: 28px;
}

.vr-help-h1 {
    font-size: 22px;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    margin: 0 0 12px;
}

.vr-help-h2 {
    font-size: 14px;
    font-weight: 600;
    color: var(--mud-palette-primary);
    margin: 20px 0 6px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.vr-help-content p {
    font-size: 14px;
    line-height: 1.7;
    color: var(--mud-palette-text-primary);
    margin: 0 0 10px;
}

.vr-help-list {
    font-size: 14px;
    line-height: 1.8;
    color: var(--mud-palette-text-primary);
    padding-left: 20px;
    margin: 6px 0 10px;
}

.vr-help-content code {
    font-family: 'Consolas', monospace;
    font-size: 12px;
    color: var(--mud-palette-primary);
    background: var(--mud-palette-background-grey);
    padding: 2px 6px;
    border-radius: 4px;
}

.vr-help-callout {
    font-size: 13px;
    line-height: 1.6;
    border-radius: 0 6px 6px 0;
    padding: 12px 16px;
    margin: 12px 0 16px;
}

.vr-help-callout-info {
    background: var(--mud-palette-background-grey);
    border-left: 3px solid var(--mud-palette-primary);
    color: var(--mud-palette-text-primary);
}

.vr-help-callout-warn {
    background: rgba(251,191,36,.08);
    border-left: 3px solid #fbbf24;
    color: var(--mud-palette-text-primary);
}

@media (max-width: 700px) {
    .vr-help-layout { flex-direction: column; }
    .vr-help-toc { width: 100%; min-width: unset; position: static; height: auto; border-right: none; border-bottom: 1px solid var(--mud-palette-lines-default); flex-direction: row; flex-wrap: wrap; padding: 12px; gap: 4px; }
    .vr-help-toc-title { display: none; }
    .vr-help-toc-link { padding: 4px 10px; font-size: 12px; border-radius: 4px; }
    .vr-help-content { padding: 20px 16px 48px; }
}

.vr-theme-speaking-in-tongues,
.vr-theme-speaking-in-tongues *,
.vr-theme-speaking-in-tongues *::before,
.vr-theme-speaking-in-tongues *::after,
.vr-theme-speaking-in-tongues .vr-help-layout,
.vr-theme-speaking-in-tongues .vr-help-layout *,
.vr-theme-speaking-in-tongues .vr-add-page,
.vr-theme-speaking-in-tongues .vr-add-page *,
.vr-theme-speaking-in-tongues .vr-query-page,
.vr-theme-speaking-in-tongues .vr-query-page *,
.vr-theme-speaking-in-tongues .vr-collection-grid,
.vr-theme-speaking-in-tongues .vr-collection-grid *,
.vr-theme-speaking-in-tongues .mud-data-grid,
.vr-theme-speaking-in-tongues .mud-data-grid *,
.vr-theme-speaking-in-tongues .mud-table,
.vr-theme-speaking-in-tongues .mud-table *,
.vr-theme-speaking-in-tongues .mud-input,
.vr-theme-speaking-in-tongues .mud-input *,
.vr-theme-speaking-in-tongues .mud-select,
.vr-theme-speaking-in-tongues .mud-select *,
.vr-theme-speaking-in-tongues .mud-popover,
.vr-theme-speaking-in-tongues .mud-popover * {
    font-family: var(--vr-font-display) !important;
}

/* ── Discover page ─────────────────────────────────────────────────────── */
.vr-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.vr-card-title .mud-icon-root {
    color: var(--mud-palette-primary);
    flex: 0 0 auto;
}

.vr-random-pick {
    display: grid;
    grid-template-columns: minmax(96px, 38%) minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
    min-height: 180px;
}

.vr-random-pick-cover {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
    border-radius: var(--vr-radius, 8px);
    border: 1px solid var(--mud-palette-lines-default);
}

.vr-random-pick-cover-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mud-palette-background-grey);
}

.vr-random-pick-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.vr-random-pick-title {
    word-break: break-word;
    line-height: 1.1;
}

.vr-random-pick-link {
    margin-top: auto !important;
    margin-left: -8px !important;
}

@media (max-width: 600px) {
    .vr-random-pick {
        grid-template-columns: 104px minmax(0, 1fr);
        min-height: 124px;
    }
}

.vr-discover-card {
    cursor: pointer;
    border-radius: var(--vr-radius, 8px);
    overflow: hidden;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    transition: transform .15s, box-shadow .15s;
}
.vr-discover-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,.12);
}
.vr-discover-cover {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
}
.vr-discover-cover-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mud-palette-background-grey);
}
.vr-discover-info {
    padding: 10px 12px;
}
.vr-discover-title {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--vr-text, var(--mud-palette-text-primary));
}
.vr-discover-artist {
    font-size: 12px;
    color: var(--mud-palette-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}
.vr-discover-year {
    font-size: 11px;
    color: color-mix(in srgb, var(--vr-text, var(--mud-palette-text-secondary)) 80%, transparent);
    margin-top: 2px;
}
.vr-discover-date {
    font-size: 11px;
    color: color-mix(in srgb, var(--vr-text, var(--mud-palette-text-secondary)) 65%, transparent);
}

.vr-cover-collage-frame {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-height: 70vh;
    overflow: hidden;
    border-radius: var(--vr-radius, 8px);
    border: 1px solid var(--mud-palette-lines-default);
    background: #0a0806;
}

.vr-cover-collage-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity 160ms ease;
}

.vr-cover-collage-image.is-loading {
    opacity: 0;
}

.vr-cover-collage-loading {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #fff;
    background:
        radial-gradient(circle at 50% 40%, rgba(255,255,255,0.12), transparent 18rem),
        #0a0806;
}

/* ── Overlay loading spinner ──────────────────────────────────────────── */
.vr-overlay-loading {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* ── Back button on album detail ─────────────────────────────────────── */
.vr-back-btn .mud-icon-button-label,
.vr-back-btn svg {
    color: var(--mud-palette-primary) !important;
    fill: var(--mud-palette-primary) !important;
}

/* ── Sticky header spacing ────────────────────────────────────────────── */
.vr-page-header + * {
    margin-top: 16px;
}

/* WantList grid scrollable panel */
.vr-wantlist-grid {
    max-height: calc(100vh - 340px);
    overflow-y: auto;
}

@media (min-width: 921px) {
    .vr-wantlist-page > .vr-page-body {
        overflow: hidden !important;
    }

    .vr-wantlist-panel,
    .vr-wantlist-layout {
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    .vr-wantlist-layout > .mud-grid-item,
    .vr-wantlist-grid-column {
        min-height: 0;
    }

    .vr-wantlist-grid-column {
        display: flex;
        height: 100%;
    }

    .vr-wantlist-grid {
        flex: 1 1 auto;
        width: 100%;
        max-height: none;
        overflow: hidden;
    }

    .vr-wantlist-grid > .mud-table-root,
    .vr-wantlist-grid .mud-data-grid,
    .vr-wantlist-grid .mud-table,
    .vr-wantlist-grid .mud-table-container {
        height: 100%;
        min-height: 0;
    }

    .vr-wantlist-grid .mud-table {
        display: flex;
        flex-direction: column;
    }

    .vr-wantlist-grid .mud-table-container {
        flex: 1 1 auto;
        max-height: none !important;
        overflow: auto !important;
    }
}

/* ── Page container padding (replaces vr-shell-content padding) ────────── */
.vr-shell-content .mud-container {
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 8px;
}

/* ── Sticky pagination bar ───────────────────────────────────────────── */
.vr-pagination-bar {
    background: var(--mud-palette-surface) !important;
}

/* Final layout and theme readability corrections */
html,
body,
#app,
.vr-app,
.vr-app .mud-layout {
    height: 100%;
    overflow: hidden;
}

.vr-main {
    height: calc(100vh - var(--mud-appbar-height));
    overflow-y: hidden;
    overflow-x: hidden;
}

.vr-shell-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.vr-pagination-bar {
    color: var(--vr-ink) !important;
}

.vr-pagination-bar .mud-input-control,
.vr-pagination-bar .mud-input,
.vr-pagination-bar .mud-select,
.vr-pagination-bar .mud-typography,
.vr-pagination-bar .mud-button-root {
    color: var(--vr-ink) !important;
}

.vr-page-size-select {
    width: 112px;
    min-width: 112px;
}

.vr-page-size-select .mud-input-control-input-container {
    min-width: 112px;
}

.vr-page-size-select .mud-input-label {
    max-width: none;
    white-space: nowrap;
}

.vr-theme-blue-note .vr-appbar {
    background: #2f6db3 !important;
}

.vr-theme-blue-note .mud-table,
.vr-theme-blue-note .mud-data-grid,
.vr-theme-blue-note .mud-table-body,
.vr-theme-blue-note .mud-table-cell,
.vr-theme-blue-note .mud-table-pagination,
.vr-theme-blue-note .vr-pagination-bar,
.vr-theme-blue-note .vr-pagination-bar * {
    color: #101826 !important;
}

.vr-theme-blue-note .vr-pagination-bar,
.vr-theme-blue-note .mud-table {
    background: #fffaf0 !important;
}

.vr-theme-blue-note .mud-table-body .mud-table-row {
    background: #fffaf0 !important;
}

.vr-theme-blue-note .mud-table-body .mud-table-row:nth-child(odd) {
    background: #f2eadb !important;
}

.vr-theme-join-the-march .mud-table,
.vr-theme-join-the-march .mud-data-grid,
.vr-theme-join-the-march .mud-table-body,
.vr-theme-join-the-march .mud-table-cell,
.vr-theme-join-the-march .mud-table-pagination,
.vr-theme-join-the-march .vr-pagination-bar,
.vr-theme-join-the-march .vr-pagination-bar * {
    color: #111113 !important;
}

.vr-theme-join-the-march .vr-pagination-bar,
.vr-theme-join-the-march .mud-table {
    background: #f4f1ea !important;
}

.vr-theme-join-the-march .mud-table-body .mud-table-row {
    background: #f4f1ea !important;
}

.vr-theme-join-the-march .mud-table-body .mud-table-row:nth-child(odd) {
    background: #e8dfc9 !important;
}

.vr-theme-sst-hardcore,
.vr-theme-sst-2 {
    --vr-font-ui: Inter, "Space Grotesk", Arial, sans-serif;
    --vr-font-display: "Oswald", "Arial Narrow", Arial, sans-serif;
    --vr-font-code: "IBM Plex Mono", Consolas, monospace;
}

.vr-theme-sst-hardcore .mud-table,
.vr-theme-sst-hardcore .mud-data-grid,
.vr-theme-sst-hardcore .mud-table-cell,
.vr-theme-sst-hardcore .mud-input,
.vr-theme-sst-hardcore .mud-select,
.vr-theme-sst-hardcore .vr-pagination-bar,
.vr-theme-sst-hardcore .vr-pagination-bar *,
.vr-theme-sst-2 .mud-table,
.vr-theme-sst-2 .mud-data-grid,
.vr-theme-sst-2 .mud-table-cell,
.vr-theme-sst-2 .mud-input,
.vr-theme-sst-2 .mud-select,
.vr-theme-sst-2 .vr-pagination-bar,
.vr-theme-sst-2 .vr-pagination-bar * {
    color: #050505 !important;
    font-family: var(--vr-font-ui) !important;
}

.vr-theme-speaking-in-tongues {
    --vr-font-ui: "IBM Plex Mono", Consolas, monospace;
    --vr-font-display: Impact, "Arial Black", sans-serif;
    --vr-font-code: "IBM Plex Mono", Consolas, monospace;
}

.vr-theme-speaking-in-tongues .vr-brand-title,
.vr-theme-speaking-in-tongues .vr-page-title,
.vr-theme-speaking-in-tongues .vr-stat-value,
.vr-theme-speaking-in-tongues h1,
.vr-theme-speaking-in-tongues h2,
.vr-theme-speaking-in-tongues h3,
.vr-theme-speaking-in-tongues h4,
.vr-theme-speaking-in-tongues h5,
.vr-theme-speaking-in-tongues h6 {
    font-family: Impact, "Arial Black", sans-serif !important;
}

.vr-theme-speaking-in-tongues .mud-button-root,
.vr-theme-speaking-in-tongues .mud-input,
.vr-theme-speaking-in-tongues .mud-select,
.vr-theme-speaking-in-tongues .mud-table,
.vr-theme-speaking-in-tongues .mud-data-grid,
.vr-theme-speaking-in-tongues .mud-table-cell,
.vr-theme-speaking-in-tongues .vr-pagination-bar,
.vr-theme-speaking-in-tongues .vr-pagination-bar *,
.vr-theme-speaking-in-tongues .vr-page-kicker,
.vr-theme-speaking-in-tongues .vr-stat-label,
.vr-theme-speaking-in-tongues .vr-drawer,
.vr-theme-speaking-in-tongues .vr-drawer * {
    font-family: "IBM Plex Mono", Consolas, monospace !important;
}

.vr-theme-underground .vr-page-header,
.vr-theme-underground .vr-pagination-bar {
    background: #ffffff !important;
}

.vr-theme-underground .vr-pagination-bar,
.vr-theme-underground .vr-pagination-bar * {
    color: #0066b2 !important;
}

/* Collection viewport: fixed header/footer with a scrollable record grid */
.vr-collection-page {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 12px;
    height: calc(100dvh - var(--mud-appbar-height));
    min-height: 0;
    overflow: hidden;
}

.vr-collection-page .vr-page-header {
    position: relative;
    top: auto;
    z-index: 2;
    flex: 0 0 auto;
    min-height: 150px;
    margin: 0 !important;
}

.vr-collection-page .vr-page-header + * {
    margin-top: 0;
}

.vr-collection-grid-wrap {
    min-height: 0;
    overflow: hidden;
    border-radius: var(--vr-radius);
}

.vr-collection-grid-wrap .mud-data-grid,
.vr-collection-grid-wrap .mud-table,
.vr-collection-grid-wrap .mud-table-container {
    height: 100%;
}

.vr-collection-grid-wrap .mud-table-container {
    max-height: none !important;
    overflow: auto !important;
}

.vr-collection-page .vr-pagination-bar {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    margin: 0 !important;
    border-radius: 0 0 8px 8px;
}

.vr-theme-sunset-strip .vr-main {
    background:
        radial-gradient(circle at 20% 35%, rgba(57, 255, 20, 0.18), transparent 16rem),
        radial-gradient(circle at 78% 18%, rgba(255, 0, 127, 0.28), transparent 23rem),
        #05020a !important;
}

.vr-theme-sunset-strip .vr-main::before {
    content: "";
    position: fixed;
    inset: var(--mud-appbar-height) 0 0 0;
    pointer-events: none;
    z-index: 0;
    background:
        linear-gradient(8deg, transparent 0 48%, rgba(57,255,20,0.08) 48.6%, rgba(57,255,20,0.75) 49.2%, rgba(208,255,175,0.9) 49.45%, rgba(57,255,20,0.55) 49.8%, transparent 51.2%),
        linear-gradient(139deg, transparent 0 41%, rgba(255,0,127,0.08) 41.7%, rgba(255,0,127,0.55) 42.45%, rgba(255,255,255,0.38) 42.75%, rgba(255,0,127,0.35) 43.1%, transparent 44.6%),
        linear-gradient(124deg, transparent 0 55%, rgba(57,255,20,0.05) 55.8%, rgba(57,255,20,0.42) 56.35%, rgba(255,255,255,0.25) 56.55%, rgba(57,255,20,0.22) 56.85%, transparent 58%),
        linear-gradient(166deg, transparent 0 67%, rgba(255,0,127,0.05) 67.7%, rgba(255,0,127,0.45) 68.2%, rgba(255,255,255,0.24) 68.4%, rgba(255,0,127,0.28) 68.7%, transparent 70%),
        radial-gradient(circle at 42% 44%, rgba(255,0,127,0.22), transparent 18rem),
        radial-gradient(circle at 6% 83%, rgba(57,255,20,0.18), transparent 22rem);
    filter: blur(0.35px);
    opacity: 0.9;
}

.vr-theme-sunset-strip .vr-shell-content {
    position: relative;
    z-index: 1;
}

.vr-theme-sunset-strip .vr-collection-page .vr-page-header,
.vr-theme-sunset-strip .vr-collection-page .vr-pagination-bar,
.vr-theme-sunset-strip .vr-collection-grid-wrap {
    background: rgba(8, 2, 13, 0.72) !important;
    border: 1px solid rgba(255, 0, 127, 0.55);
    box-shadow: 0 0 30px rgba(255, 0, 127, 0.12), inset 0 0 0 1px rgba(255,255,255,0.04);
}

.vr-main:has(.vr-collection-page) {
    overflow: hidden !important;
}

.vr-shell-content:has(> .vr-collection-page) {
    display: flex;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    padding-bottom: 0;
}

.vr-shell-content > .vr-collection-page {
    box-sizing: border-box;
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
    height: 100%;
    min-height: 0;
    padding-bottom: 4px;
}

.vr-collection-page .vr-collection-grid-wrap {
    min-height: 0 !important;
    height: 100%;
    overflow: hidden !important;
}

.vr-collection-page .vr-collection-grid-wrap .mud-data-grid,
.vr-collection-page .vr-collection-grid-wrap .mud-table,
.vr-collection-page .vr-collection-grid-wrap .mud-table-container {
    min-height: 0;
}

.vr-collection-page .vr-collection-grid-wrap .mud-table-container {
    overflow: auto !important;
}

.vr-collection-page .vr-collection-grid-wrap .mud-table {
    display: flex;
    flex-direction: column;
}

.vr-collection-page .vr-collection-grid-wrap .mud-table-container {
    flex: 1 1 auto;
}

.vr-collection-page .vr-pagination-bar > .mud-stack-row {
    min-height: 62px;
    gap: 16px;
    flex-wrap: wrap;
}

.vr-collection-page .vr-pagination-bar .mud-pagination {
    display: inline-flex;
    align-items: center;
    gap: 8px !important;
}

.vr-collection-page .vr-pagination-bar .mud-pagination .mud-button-root,
.vr-collection-page .vr-pagination-bar .mud-pagination .mud-icon-button {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    line-height: 1 !important;
}

.vr-collection-page .vr-page-size-select {
    width: 150px !important;
    min-width: 150px !important;
}

.vr-collection-page .vr-page-size-select .mud-input-control-input-container,
.vr-collection-page .vr-page-size-select .mud-input-root {
    min-width: 150px !important;
}

.vr-collection-page .vr-page-size-select .mud-input-label,
.vr-collection-page .vr-page-size-select label {
    max-width: none !important;
    padding-inline: 5px !important;
    overflow: visible !important;
    white-space: nowrap !important;
    background: var(--vr-panel-strong) !important;
}

.vr-collection-page .vr-pagination-bar .mud-pagination .mud-selected,
.vr-collection-page .vr-pagination-bar .mud-pagination .mud-button-root.mud-selected,
.vr-collection-page .vr-pagination-bar .mud-pagination .mud-icon-button.mud-selected,
.vr-collection-page .vr-pagination-bar .mud-pagination .mud-pagination-item-selected,
.vr-collection-page .vr-pagination-bar .mud-pagination .mud-button-root.mud-pagination-item-selected,
.vr-collection-page .vr-pagination-bar .mud-pagination .mud-icon-button.mud-pagination-item-selected {
    background: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary-text) !important;
    border: 1px solid var(--mud-palette-primary) !important;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.18) !important;
}

.vr-collection-page .vr-pagination-bar .mud-pagination .mud-selected *,
.vr-collection-page .vr-pagination-bar .mud-pagination .mud-button-root.mud-selected *,
.vr-collection-page .vr-pagination-bar .mud-pagination .mud-icon-button.mud-selected *,
.vr-collection-page .vr-pagination-bar .mud-pagination .mud-pagination-item-selected *,
.vr-collection-page .vr-pagination-bar .mud-pagination .mud-button-root.mud-pagination-item-selected *,
.vr-collection-page .vr-pagination-bar .mud-pagination .mud-icon-button.mud-pagination-item-selected * {
    color: var(--mud-palette-primary-text) !important;
}

.vr-empty-collection {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 14px;
    min-height: 260px;
    padding: clamp(28px, 5vw, 54px);
    text-align: center;
    background: var(--vr-panel) !important;
    border: 1px solid var(--vr-panel-border) !important;
    border-radius: var(--vr-radius);
    box-shadow: var(--vr-shadow);
}

.vr-empty-title {
    color: var(--vr-ink) !important;
    font-family: var(--vr-font-display) !important;
}

.vr-empty-copy {
    max-width: 440px;
}

.vr-app.vr-theme-join-the-march .vr-collection-page .vr-pagination-bar .mud-pagination .mud-pagination-item-selected,
.vr-app.vr-theme-join-the-march .vr-collection-page .vr-pagination-bar .mud-pagination .mud-button-root.mud-pagination-item-selected,
.vr-app.vr-theme-join-the-march .vr-collection-page .vr-pagination-bar .mud-pagination .mud-icon-button.mud-pagination-item-selected,
.vr-app.vr-theme-join-the-march .vr-collection-page .vr-pagination-bar .mud-pagination .mud-selected,
.vr-app.vr-theme-join-the-march .vr-collection-page .vr-pagination-bar .mud-pagination .mud-button-root.mud-selected,
.vr-app.vr-theme-join-the-march .vr-collection-page .vr-pagination-bar .mud-pagination .mud-icon-button.mud-selected {
    background: #111113 !important;
    color: #ffffff !important;
    border-color: #c01822 !important;
}

.vr-app.vr-theme-join-the-march .vr-collection-page .vr-pagination-bar .mud-pagination .mud-pagination-item-selected *,
.vr-app.vr-theme-join-the-march .vr-collection-page .vr-pagination-bar .mud-pagination .mud-button-root.mud-pagination-item-selected *,
.vr-app.vr-theme-join-the-march .vr-collection-page .vr-pagination-bar .mud-pagination .mud-icon-button.mud-pagination-item-selected *,
.vr-app.vr-theme-join-the-march .vr-collection-page .vr-pagination-bar .mud-pagination .mud-selected *,
.vr-app.vr-theme-join-the-march .vr-collection-page .vr-pagination-bar .mud-pagination .mud-button-root.mud-selected *,
.vr-app.vr-theme-join-the-march .vr-collection-page .vr-pagination-bar .mud-pagination .mud-icon-button.mud-selected * {
    color: #ffffff !important;
}

.vr-app.vr-theme-blue-note .vr-collection-page .vr-pagination-bar .mud-pagination .mud-pagination-item-selected,
.vr-app.vr-theme-blue-note .vr-collection-page .vr-pagination-bar .mud-pagination .mud-button-root.mud-pagination-item-selected,
.vr-app.vr-theme-blue-note .vr-collection-page .vr-pagination-bar .mud-pagination .mud-icon-button.mud-pagination-item-selected,
.vr-app.vr-theme-blue-note .vr-collection-page .vr-pagination-bar .mud-pagination .mud-selected,
.vr-app.vr-theme-blue-note .vr-collection-page .vr-pagination-bar .mud-pagination .mud-button-root.mud-selected,
.vr-app.vr-theme-blue-note .vr-collection-page .vr-pagination-bar .mud-pagination .mud-icon-button.mud-selected {
    background: #db6a24 !important;
    color: #101826 !important;
    border-color: #101826 !important;
}

.vr-app.vr-theme-blue-note .vr-collection-page .vr-pagination-bar .mud-pagination .mud-pagination-item-selected *,
.vr-app.vr-theme-blue-note .vr-collection-page .vr-pagination-bar .mud-pagination .mud-button-root.mud-pagination-item-selected *,
.vr-app.vr-theme-blue-note .vr-collection-page .vr-pagination-bar .mud-pagination .mud-icon-button.mud-pagination-item-selected *,
.vr-app.vr-theme-blue-note .vr-collection-page .vr-pagination-bar .mud-pagination .mud-selected *,
.vr-app.vr-theme-blue-note .vr-collection-page .vr-pagination-bar .mud-pagination .mud-button-root.mud-selected *,
.vr-app.vr-theme-blue-note .vr-collection-page .vr-pagination-bar .mud-pagination .mud-icon-button.mud-selected * {
    color: #101826 !important;
}

.vr-theme-blue-note .vr-page-header,
.vr-theme-blue-note .vr-standard-page > .vr-page-header,
.vr-theme-blue-note .vr-collection-page > .vr-page-header {
    background: #2f6db3 !important;
    background-color: #2f6db3 !important;
    background-image: none !important;
    border-color: #101826 !important;
}

.vr-app.vr-theme-blue-note .mud-paper.vr-page-header,
.vr-app.vr-theme-blue-note .mud-paper.vr-page-header:not(.mud-appbar):not(.mud-drawer),
.vr-app.vr-theme-blue-note .vr-standard-page > .mud-paper.vr-page-header,
.vr-app.vr-theme-blue-note .vr-standard-page > .mud-paper.vr-page-header:not(.mud-appbar):not(.mud-drawer),
.vr-app.vr-theme-blue-note .vr-collection-page > .mud-paper.vr-page-header,
.vr-app.vr-theme-blue-note .vr-collection-page > .mud-paper.vr-page-header:not(.mud-appbar):not(.mud-drawer) {
    background: #2f6db3 !important;
    background-color: #2f6db3 !important;
    background-image: none !important;
    border-color: #101826 !important;
}

.vr-theme-blue-note .vr-page-header::before,
.vr-theme-blue-note .vr-page-header::after,
.vr-theme-blue-note .vr-standard-page > .vr-page-header::before,
.vr-theme-blue-note .vr-standard-page > .vr-page-header::after,
.vr-theme-blue-note .vr-collection-page > .vr-page-header::before,
.vr-theme-blue-note .vr-collection-page > .vr-page-header::after {
    display: none !important;
}

.vr-theme-blue-note .vr-page-header .vr-page-kicker,
.vr-theme-blue-note .vr-page-header .vr-page-title,
.vr-theme-blue-note .vr-page-header .vr-stat-value,
.vr-theme-blue-note .vr-page-header .vr-stat-label,
.vr-theme-blue-note .vr-collection-page .vr-page-kicker,
.vr-theme-blue-note .vr-collection-page .vr-page-title,
.vr-theme-blue-note .vr-collection-page .vr-stat-value,
.vr-theme-blue-note .vr-collection-page .vr-stat-label {
    color: #ffffff !important;
}

.vr-theme-blue-note .vr-page-header .vr-page-kicker,
.vr-theme-blue-note .vr-collection-page .vr-page-kicker {
    color: #ffcf8a !important;
}

.vr-theme-blue-note .vr-page-header .vr-stat,
.vr-theme-blue-note .vr-collection-page .vr-stat {
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(255, 255, 255, 0.38) !important;
}

.vr-theme-blue-note .vr-page-header .vr-control-label,
.vr-theme-blue-note .vr-page-header .vr-crate-select,
.vr-theme-blue-note .vr-page-header .vr-crate-select > select,
.vr-theme-blue-note .vr-page-header .mud-input,
.vr-theme-blue-note .vr-page-header .mud-select,
.vr-theme-blue-note .vr-page-header .mud-input-slot,
.vr-theme-blue-note .vr-page-header .mud-input-control,
.vr-theme-blue-note .vr-page-header .mud-input-label {
    color: #ffffff !important;
}

.vr-theme-blue-note .vr-page-header .vr-crate-select,
.vr-theme-blue-note .vr-page-header .mud-input-outlined-border {
    border-color: #ffffff !important;
}

.vr-theme-blue-note .vr-page-header .vr-crate-select > select option {
    background: #ffffff !important;
    color: #101826 !important;
}

.vr-collection-page .vr-toolbar .vr-header-control .mud-input-control-input-container,
.vr-collection-page .vr-toolbar .vr-header-control .mud-input-root {
    min-height: 56px !important;
}

.vr-collection-page .vr-toolbar .vr-header-control .mud-input-root {
    display: flex !important;
    align-items: center !important;
}

.vr-collection-page .vr-toolbar .vr-header-search .mud-input-slot,
.vr-collection-page .vr-toolbar .vr-header-search .mud-input-adornment {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    margin-top: 0 !important;
}

.vr-collection-page .vr-toolbar .vr-header-search input {
    height: 64px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 56px !important;
}

.vr-standard-page {
    width: 100%;
}

.vr-standard-page > .vr-page-header {
    min-height: 172px;
    margin-bottom: 18px;
}

.vr-discover-page > .vr-page-header {
    min-height: 190px;
}

.vr-page-content-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    gap: 18px;
    align-items: stretch;
}

.vr-page-content-grid > .mud-paper {
    height: 100%;
    margin-bottom: 0 !important;
}

.vr-wide-form-panel {
    width: 100%;
}

.vr-add-page .vr-add-card {
    max-width: none;
}

.vr-add-page .mud-tabs,
.vr-add-page .mud-tab-panels,
.vr-add-page .mud-tab-panel {
    width: 100%;
}

.vr-profile-page .vr-page-content-grid > .mud-paper:nth-child(5) {
    grid-column: 1 / -1;
}

.vr-theme-ad-astra {
    --vr-bg: #0b0d17;
    --vr-bg-2: #1b263b;
    --vr-surface: #ffffff;
    --vr-text: #0b0d17;
    --vr-muted: #415a77;
    --vr-accent: #0085ca;
    --vr-accent-2: #ff8500;
    --vr-accent-3: #ffffff;
    --vr-border: #0085ca;
    --vr-radius: 0;
    --vr-hard-shadow: 6px 6px 0 #ff8500;
    --vr-font-display: "Exo 2", Impact, "Arial Black", sans-serif;
    --vr-font-ui: Helvetica, Arial, sans-serif;
    --vr-font-code: "Courier New", monospace;
    background-color: var(--vr-bg);
    background-image:
        radial-gradient(circle at 84% 8%, rgba(0, 133, 202, 0.1), transparent 25rem),
        radial-gradient(circle at 15% 15%, rgba(255, 133, 0, 0.05), transparent 30rem),
        linear-gradient(135deg, var(--vr-bg), var(--vr-bg-2));
    color: var(--vr-text);
}

.vr-theme-ad-astra .vr-appbar {
    border-bottom: 2px solid var(--vr-accent);
    background: #000000 !important;
}

.vr-theme-ad-astra .vr-brand-mark {
    border: 2px solid var(--vr-accent);
    color: var(--vr-accent);
}

.vr-theme-ad-astra .vr-brand-title {
    color: #ffffff;
    text-shadow: 2px 2px 0 var(--vr-accent);
}

.vr-theme-ad-astra .vr-drawer {
    border-right: 1px solid var(--vr-accent);
    background: #0b0d17 !important;
}

.vr-theme-ad-astra .vr-drawer-kicker {
    color: var(--vr-accent);
}

.vr-theme-ad-astra .mud-nav-link {
    color: #b9c7d8;
}

.vr-theme-ad-astra .mud-nav-link.active,
.vr-theme-ad-astra .mud-nav-link:hover {
    color: #ffffff;
    background: var(--vr-accent);
    border-left: 4px solid var(--vr-accent-3);
}

.vr-theme-ad-astra .vr-page-header {
    border-bottom: 2px solid var(--vr-accent);
}

.vr-theme-ad-astra .vr-page-kicker {
    color: var(--vr-accent-2);
}

.vr-theme-ad-astra .vr-page-title {
    color: var(--vr-accent);
    text-shadow: 3px 3px 0 #000000, 5px 5px 0 var(--vr-accent-2);
}

.vr-theme-ad-astra .mud-paper:not(.mud-appbar):not(.mud-drawer) {
    border: 2px solid var(--vr-accent);
    background: var(--vr-surface);
    color: var(--vr-text);
    box-shadow: var(--vr-hard-shadow);
    border-radius: var(--vr-radius);
}

.vr-theme-ad-astra .mud-table,
.vr-theme-ad-astra .mud-data-grid,
.vr-theme-ad-astra .mud-table-body,
.vr-theme-ad-astra .mud-table-body .mud-table-row,
.vr-theme-ad-astra .mud-table-cell,
.vr-theme-ad-astra .vr-pagination-bar,
.vr-theme-ad-astra .vr-pagination-bar *,
.vr-theme-ad-astra .mud-popover,
.vr-theme-ad-astra .mud-popover *,
.vr-theme-ad-astra .mud-list,
.vr-theme-ad-astra .mud-list-item,
.vr-theme-ad-astra .mud-list-item *,
.vr-theme-ad-astra .mud-typography {
    color: #0b0d17 !important;
}

.vr-theme-ad-astra .mud-table-body .mud-table-row {
    background: #ffffff !important;
}

.vr-theme-ad-astra .mud-table-body .mud-table-row:nth-child(odd) {
    background: #eef6fb !important;
}

.vr-theme-ad-astra .mud-table-head .mud-table-cell,
.vr-theme-ad-astra th {
    border-bottom: 2px solid var(--vr-accent);
    color: var(--vr-accent);
}

.vr-theme-ad-astra .mud-button-filled-primary {
    background-color: var(--vr-accent) !important;
    color: #ffffff !important;
    box-shadow: 4px 4px 0 var(--vr-accent-2);
}

.vr-theme-ad-astra .mud-button-filled-primary *,
.vr-theme-ad-astra .mud-table-head .mud-table-cell,
.vr-theme-ad-astra .mud-table-head .mud-table-cell *,
.vr-theme-ad-astra th,
.vr-theme-ad-astra th * {
    color: #ffffff !important;
}

.vr-theme-ad-astra .mud-typography,
.vr-theme-ad-astra .mud-button-root,
.vr-theme-ad-astra .mud-input,
.vr-theme-ad-astra .mud-input-control,
.vr-theme-ad-astra .mud-input-label,
.vr-theme-ad-astra .mud-input-slot,
.vr-theme-ad-astra .mud-select,
.vr-theme-ad-astra .mud-table,
.vr-theme-ad-astra .mud-table-cell,
.vr-theme-ad-astra .mud-data-grid,
.vr-theme-ad-astra .mud-list-item,
.vr-theme-ad-astra .mud-paper {
    font-family: var(--vr-font-ui) !important;
}

.vr-theme-ad-astra .vr-brand-title,
.vr-theme-ad-astra .vr-page-title {
    font-family: var(--vr-font-display) !important;
}

.vr-theme-ad-astra .vr-page-kicker,
.vr-theme-ad-astra .vr-stat-label,
.vr-theme-ad-astra .mud-table-head .mud-table-cell,
.vr-theme-ad-astra .mud-data-grid-header {
    font-family: var(--vr-font-code) !important;
}

.vr-theme-iron-horse {
    --vr-bg: #121212;
    --vr-bg-2: #1e2124;
    --vr-surface: #2b2b2b;
    --vr-text: #e0e0e0;
    --vr-muted: #888888;
    --vr-accent: #6c757d;
    --vr-accent-2: #b7b7a4;
    --vr-accent-3: #ffffff;
    --vr-border: #444444;
    --vr-radius: 0;
    --vr-hard-shadow: 6px 6px 0 #1a1a1a;
    --vr-font-ui: "IBM Plex Mono", Consolas, monospace;
    --vr-font-display: "Oswald", Impact, "Arial Narrow", sans-serif;
    --vr-font-code: "IBM Plex Mono", Consolas, monospace;
    background-color: var(--vr-bg);
    background-image:
        linear-gradient(135deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 16px),
        linear-gradient(180deg, var(--vr-bg), var(--vr-bg-2));
    color: var(--vr-text);
}

.vr-theme-iron-horse .vr-appbar {
    border-bottom: 4px solid var(--vr-accent);
    background: #000000 !important;
}

.vr-theme-iron-horse .vr-brand-mark {
    border: 2px solid var(--vr-accent-2);
    color: var(--vr-accent-2);
}

.vr-theme-iron-horse .vr-brand-title {
    color: var(--vr-text);
    text-shadow: 2px 2px 0 #000000;
}

.vr-theme-iron-horse .vr-drawer {
    border-right: 1px solid var(--vr-border);
    background: #101010 !important;
}

.vr-theme-iron-horse .mud-paper:not(.mud-appbar):not(.mud-drawer) {
    border: 1px solid var(--vr-accent-2);
    background: var(--vr-surface);
    color: var(--vr-text);
    box-shadow: var(--vr-hard-shadow);
    border-radius: var(--vr-radius);
}

.vr-theme-iron-horse .vr-page-title,
.vr-theme-iron-horse .mud-table-head .mud-table-cell,
.vr-theme-iron-horse th {
    color: var(--vr-accent-2);
}

.vr-theme-iron-horse .mud-table-head .mud-table-cell,
.vr-theme-iron-horse th {
    border-bottom: 2px solid var(--vr-accent);
}

.vr-theme-iron-horse .mud-table,
.vr-theme-iron-horse .mud-data-grid,
.vr-theme-iron-horse .mud-table-body,
.vr-theme-iron-horse .mud-table-cell,
.vr-theme-iron-horse .mud-input,
.vr-theme-iron-horse .mud-select,
.vr-theme-iron-horse .mud-input-slot,
.vr-theme-iron-horse .mud-input-label,
.vr-theme-iron-horse .mud-typography {
    color: var(--vr-text) !important;
}

.vr-theme-iron-horse .mud-table,
.vr-theme-iron-horse .mud-data-grid,
.vr-theme-iron-horse .mud-table-body,
.vr-theme-iron-horse .mud-table-body .mud-table-row {
    background: #2b2b2b !important;
}

.vr-theme-iron-horse .mud-table-body .mud-table-row:nth-child(odd) {
    background: #242629 !important;
}

.vr-theme-iron-horse .mud-table-body .mud-table-row:hover {
    background: #35393d !important;
}

.vr-theme-iron-horse .mud-table-body .mud-table-row .vr-actions-cell {
    background: #333638 !important;
}

.vr-theme-iron-horse .mud-table-body .mud-table-row:nth-child(odd) .vr-actions-cell {
    background: #2d3033 !important;
}

.vr-theme-iron-horse .mud-button-filled-primary {
    background-color: var(--vr-accent) !important;
    color: #ffffff !important;
    box-shadow: 4px 4px 0 #000000;
}

.vr-theme-iron-horse .mud-typography,
.vr-theme-iron-horse .mud-button-root,
.vr-theme-iron-horse .mud-input,
.vr-theme-iron-horse .mud-input-control,
.vr-theme-iron-horse .mud-input-label,
.vr-theme-iron-horse .mud-input-slot,
.vr-theme-iron-horse .mud-select,
.vr-theme-iron-horse .mud-table,
.vr-theme-iron-horse .mud-table-cell,
.vr-theme-iron-horse .mud-data-grid,
.vr-theme-iron-horse .mud-list-item,
.vr-theme-iron-horse .mud-paper {
    font-family: var(--vr-font-ui) !important;
}

.vr-theme-iron-horse .vr-brand-title,
.vr-theme-iron-horse .vr-page-title {
    font-family: var(--vr-font-display) !important;
}

.vr-theme-iron-horse .vr-page-kicker,
.vr-theme-iron-horse .vr-stat-label,
.vr-theme-iron-horse .mud-table-head .mud-table-cell,
.vr-theme-iron-horse .mud-data-grid-header {
    font-family: var(--vr-font-code) !important;
}

/* Final theme normalization - keep agreed typography and high-contrast surfaces winning. */
.vr-theme-blue-note {
    --vr-font-ui: "Space Grotesk", Inter, sans-serif;
}

.vr-theme-join-the-march {
    --vr-font-ui: "Space Grotesk", sans-serif;
}

.vr-theme-speaking-in-tongues {
    --vr-font-display: Impact, "Arial Black", sans-serif;
    --vr-font-ui: "IBM Plex Mono", Consolas, monospace;
    --vr-font-code: "IBM Plex Mono", Consolas, monospace;
}

.vr-theme-speaking-in-tongues,
.vr-theme-speaking-in-tongues .mud-typography,
.vr-theme-speaking-in-tongues .mud-button-root,
.vr-theme-speaking-in-tongues .mud-input,
.vr-theme-speaking-in-tongues .mud-input-control,
.vr-theme-speaking-in-tongues .mud-input-label,
.vr-theme-speaking-in-tongues .mud-input-slot,
.vr-theme-speaking-in-tongues .mud-select,
.vr-theme-speaking-in-tongues .mud-select-input,
.vr-theme-speaking-in-tongues .mud-table,
.vr-theme-speaking-in-tongues .mud-table-root,
.vr-theme-speaking-in-tongues .mud-table-cell,
.vr-theme-speaking-in-tongues .mud-table-pagination,
.vr-theme-speaking-in-tongues .mud-data-grid,
.vr-theme-speaking-in-tongues .mud-data-grid-cell,
.vr-theme-speaking-in-tongues .mud-list,
.vr-theme-speaking-in-tongues .mud-list-item,
.vr-theme-speaking-in-tongues .mud-dialog,
.vr-theme-speaking-in-tongues .mud-dialog-content,
.vr-theme-speaking-in-tongues .mud-card,
.vr-theme-speaking-in-tongues .mud-card-content,
.vr-theme-speaking-in-tongues .mud-paper,
.vr-theme-speaking-in-tongues .mud-form,
.vr-theme-speaking-in-tongues .mud-expansion-panel,
.vr-theme-speaking-in-tongues .mud-tabs,
.vr-theme-speaking-in-tongues .mud-tab,
.vr-theme-speaking-in-tongues .mud-alert,
.vr-theme-speaking-in-tongues .mud-chip,
.vr-theme-speaking-in-tongues .mud-menu,
.vr-theme-speaking-in-tongues .mud-popover,
.vr-theme-speaking-in-tongues .mud-popover-paper,
.vr-theme-speaking-in-tongues .mud-snackbar,
.vr-theme-speaking-in-tongues .vr-mobile-record-list,
.vr-theme-speaking-in-tongues .vr-mobile-record-list *,
.vr-theme-speaking-in-tongues .vr-help-page,
.vr-theme-speaking-in-tongues .vr-help-page *,
.vr-theme-speaking-in-tongues .vr-query-page,
.vr-theme-speaking-in-tongues .vr-query-page *,
.vr-theme-speaking-in-tongues .vr-collection-grid,
.vr-theme-speaking-in-tongues .vr-collection-grid * {
    font-family: var(--vr-font-ui) !important;
}

.vr-theme-speaking-in-tongues .vr-brand-title,
.vr-theme-speaking-in-tongues .vr-page-title,
.vr-theme-speaking-in-tongues .vr-query-title,
.vr-theme-speaking-in-tongues .mud-dialog-title,
.vr-theme-speaking-in-tongues .vr-theme-menu-name,
.vr-theme-speaking-in-tongues .vr-stat-value,
.vr-theme-speaking-in-tongues h1,
.vr-theme-speaking-in-tongues h2,
.vr-theme-speaking-in-tongues h3,
.vr-theme-speaking-in-tongues h4,
.vr-theme-speaking-in-tongues h5,
.vr-theme-speaking-in-tongues h6 {
    font-family: var(--vr-font-display) !important;
}

.vr-theme-speaking-in-tongues .vr-page-kicker,
.vr-theme-speaking-in-tongues .vr-stat-label,
.vr-theme-speaking-in-tongues .vr-drawer-kicker,
.vr-theme-speaking-in-tongues .vr-label-code,
.vr-theme-speaking-in-tongues .mud-table-head .mud-table-cell,
.vr-theme-speaking-in-tongues .mud-data-grid-header {
    font-family: var(--vr-font-code) !important;
}

.vr-theme-ad-astra {
    --vr-font-display: "Exo 2", Impact, "Arial Black", sans-serif;
    --vr-font-ui: Helvetica, Arial, sans-serif;
    --vr-font-code: "Courier New", monospace;
    --vr-ink: #ffffff;
    --vr-muted: #a8bad1;
    --vr-panel: #ffffff;
    --vr-panel-strong: #ffffff;
    --vr-panel-border: #0085ca;
    --vr-stage: #0b0d17;
    --vr-stage-soft: #1b263b;
    background-color: #0b0d17 !important;
    background-image:
        radial-gradient(circle at 84% 8%, rgba(0, 133, 202, 0.16), transparent 25rem),
        radial-gradient(circle at 15% 15%, rgba(255, 133, 0, 0.08), transparent 30rem),
        linear-gradient(135deg, #0b0d17, #1b263b) !important;
    color: #ffffff;
}

.vr-theme-ad-astra .vr-main,
.vr-theme-ad-astra .vr-shell-content {
    background:
        radial-gradient(circle at 84% 8%, rgba(0, 133, 202, 0.12), transparent 25rem),
        radial-gradient(circle at 15% 15%, rgba(255, 133, 0, 0.07), transparent 30rem),
        linear-gradient(135deg, #0b0d17, #1b263b) !important;
}

.vr-theme-ad-astra .vr-appbar {
    background: #000000 !important;
    border-bottom: 2px solid #0085ca !important;
    box-shadow: none !important;
}

.vr-theme-ad-astra .vr-brand-title,
.vr-theme-ad-astra .vr-appbar .mud-button-root,
.vr-theme-ad-astra .vr-appbar .mud-icon-button,
.vr-theme-ad-astra .vr-user-link {
    color: #ffffff !important;
}

.vr-theme-ad-astra .vr-brand-title {
    text-shadow: 2px 2px 0 #0085ca !important;
}

.vr-theme-ad-astra .vr-brand-mark {
    background: #000000 !important;
    border: 2px solid #0085ca !important;
    color: #0085ca !important;
    border-radius: 0 !important;
}

.vr-theme-ad-astra .vr-drawer {
    background: #0b0d17 !important;
    border-right: 1px solid #0085ca !important;
}

.vr-theme-ad-astra .vr-drawer .mud-nav-link,
.vr-theme-ad-astra .vr-drawer .mud-nav-link * {
    color: #415a77 !important;
}

.vr-theme-ad-astra .vr-drawer .mud-nav-link.active,
.vr-theme-ad-astra .vr-drawer .mud-nav-link:hover {
    background: #0085ca !important;
    border-left: 4px solid #ffffff !important;
}

.vr-theme-ad-astra .vr-drawer .mud-nav-link.active,
.vr-theme-ad-astra .vr-drawer .mud-nav-link.active *,
.vr-theme-ad-astra .vr-drawer .mud-nav-link:hover,
.vr-theme-ad-astra .vr-drawer .mud-nav-link:hover * {
    color: #ffffff !important;
}

.vr-theme-ad-astra .vr-page-header,
.vr-app.vr-theme-ad-astra .vr-collection-page > .mud-paper.vr-page-header,
.vr-app.vr-theme-ad-astra .vr-collection-page > .mud-paper.vr-page-header:not(.mud-appbar):not(.mud-drawer) {
    background:
        radial-gradient(circle at 92% 18%, rgba(0, 133, 202, 0.18), transparent 22rem),
        linear-gradient(135deg, #0b0d17, #1b263b) !important;
    border: 2px solid #0085ca !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #ffffff !important;
}

.vr-theme-ad-astra .vr-page-header::before,
.vr-theme-ad-astra .vr-page-header::after {
    display: none !important;
}

.vr-theme-ad-astra .vr-page-kicker {
    color: #ff8500 !important;
}

.vr-theme-ad-astra .vr-page-title {
    color: #0085ca !important;
    text-shadow: 3px 3px 0 #000000, 5px 5px 0 #ff8500 !important;
}

.vr-theme-ad-astra .vr-stat {
    background: #ffffff !important;
    color: #0b0d17 !important;
}

.vr-theme-ad-astra .vr-stat-value,
.vr-theme-ad-astra .vr-stat-label {
    color: #0b0d17 !important;
}

.vr-theme-ad-astra .vr-page-header .mud-input-outlined-border {
    border-color: #0085ca !important;
}

.vr-theme-ad-astra .vr-theme-menu-name,
.vr-theme-ad-astra .vr-theme-menu-description,
.vr-theme-ad-astra .mud-popover,
.vr-theme-ad-astra .mud-popover *,
.vr-theme-ad-astra .mud-list,
.vr-theme-ad-astra .mud-list *,
.vr-theme-ad-astra .mud-list-item,
.vr-theme-ad-astra .mud-list-item * {
    color: #0b0d17 !important;
}

.vr-theme-ad-astra .mud-table-head .mud-table-cell,
.vr-theme-ad-astra .mud-table-head .mud-table-cell *,
.vr-theme-ad-astra th,
.vr-theme-ad-astra th * {
    background: #ffffff !important;
    color: #0085ca !important;
}

.vr-theme-ad-astra .vr-pagination-bar,
.vr-theme-ad-astra .vr-pagination-bar *,
.vr-theme-ad-astra .mud-table,
.vr-theme-ad-astra .mud-data-grid,
.vr-theme-ad-astra .mud-table-body,
.vr-theme-ad-astra .mud-table-cell,
.vr-theme-ad-astra .mud-table-cell * {
    color: #0b0d17 !important;
}

/* The blanket ink-color reset above (needed for plain table text) also swallows the
   action-button icon colors via its universal "*" selector — carve those back out. */
.vr-theme-ad-astra .vr-row-actions .mud-success-text,
.vr-theme-ad-astra .vr-row-actions .mud-success-text *,
.vr-theme-ad-astra .vr-record-actions .mud-success-text,
.vr-theme-ad-astra .vr-record-actions .mud-success-text * {
    color: var(--mud-palette-success) !important;
}

.vr-theme-ad-astra .vr-row-actions .mud-info-text,
.vr-theme-ad-astra .vr-row-actions .mud-info-text *,
.vr-theme-ad-astra .vr-record-actions .mud-info-text,
.vr-theme-ad-astra .vr-record-actions .mud-info-text * {
    color: var(--mud-palette-info) !important;
}

.vr-theme-ad-astra .vr-row-actions .mud-warning-text,
.vr-theme-ad-astra .vr-row-actions .mud-warning-text *,
.vr-theme-ad-astra .vr-record-actions .mud-warning-text,
.vr-theme-ad-astra .vr-record-actions .mud-warning-text * {
    color: var(--mud-palette-warning) !important;
}

.vr-theme-ad-astra .vr-row-actions .mud-error-text,
.vr-theme-ad-astra .vr-row-actions .mud-error-text *,
.vr-theme-ad-astra .vr-record-actions .mud-error-text,
.vr-theme-ad-astra .vr-record-actions .mud-error-text * {
    color: var(--mud-palette-error) !important;
}

.vr-app.vr-theme-ad-astra .vr-collection-page .vr-pagination-bar .mud-pagination .mud-pagination-item-selected,
.vr-app.vr-theme-ad-astra .vr-collection-page .vr-pagination-bar .mud-pagination .mud-button-root.mud-pagination-item-selected,
.vr-app.vr-theme-ad-astra .vr-collection-page .vr-pagination-bar .mud-pagination .mud-icon-button.mud-pagination-item-selected,
.vr-app.vr-theme-ad-astra .vr-collection-page .vr-pagination-bar .mud-pagination .mud-selected,
.vr-app.vr-theme-ad-astra .vr-collection-page .vr-pagination-bar .mud-pagination .mud-button-root.mud-selected,
.vr-app.vr-theme-ad-astra .vr-collection-page .vr-pagination-bar .mud-pagination .mud-icon-button.mud-selected {
    background: #0085ca !important;
    color: #ffffff !important;
    border-color: #0085ca !important;
    box-shadow: 4px 4px 0 #ff8500 !important;
}

.vr-app.vr-theme-ad-astra .vr-collection-page .vr-pagination-bar .mud-pagination .mud-pagination-item-selected *,
.vr-app.vr-theme-ad-astra .vr-collection-page .vr-pagination-bar .mud-pagination .mud-button-root.mud-pagination-item-selected *,
.vr-app.vr-theme-ad-astra .vr-collection-page .vr-pagination-bar .mud-pagination .mud-icon-button.mud-pagination-item-selected *,
.vr-app.vr-theme-ad-astra .vr-collection-page .vr-pagination-bar .mud-pagination .mud-selected *,
.vr-app.vr-theme-ad-astra .vr-collection-page .vr-pagination-bar .mud-pagination .mud-button-root.mud-selected *,
.vr-app.vr-theme-ad-astra .vr-collection-page .vr-pagination-bar .mud-pagination .mud-icon-button.mud-selected * {
    color: #ffffff !important;
}

.vr-theme-iron-horse .mud-popover,
.vr-theme-iron-horse .mud-popover *,
.vr-theme-iron-horse .mud-list,
.vr-theme-iron-horse .mud-list *,
.vr-theme-iron-horse .mud-list-item,
.vr-theme-iron-horse .mud-list-item * {
    background-color: #2b2b2b !important;
    color: #e0e0e0 !important;
}

.vr-theme-iron-horse .mud-table-cell,
.vr-theme-iron-horse .mud-table-cell *,
.vr-theme-iron-horse .mud-table-body,
.vr-theme-iron-horse .mud-table-body *,
.vr-theme-iron-horse .vr-pagination-bar,
.vr-theme-iron-horse .vr-pagination-bar * {
    color: #e0e0e0 !important;
}

.vr-theme-iron-horse .vr-row-actions .mud-success-text,
.vr-theme-iron-horse .vr-row-actions .mud-success-text *,
.vr-theme-iron-horse .vr-record-actions .mud-success-text,
.vr-theme-iron-horse .vr-record-actions .mud-success-text * {
    color: var(--mud-palette-success) !important;
}

.vr-theme-iron-horse .vr-row-actions .mud-info-text,
.vr-theme-iron-horse .vr-row-actions .mud-info-text *,
.vr-theme-iron-horse .vr-record-actions .mud-info-text,
.vr-theme-iron-horse .vr-record-actions .mud-info-text * {
    color: var(--mud-palette-info) !important;
}

.vr-theme-iron-horse .vr-row-actions .mud-warning-text,
.vr-theme-iron-horse .vr-row-actions .mud-warning-text *,
.vr-theme-iron-horse .vr-record-actions .mud-warning-text,
.vr-theme-iron-horse .vr-record-actions .mud-warning-text * {
    color: var(--mud-palette-warning) !important;
}

.vr-theme-iron-horse .vr-row-actions .mud-error-text,
.vr-theme-iron-horse .vr-row-actions .mud-error-text *,
.vr-theme-iron-horse .vr-record-actions .mud-error-text,
.vr-theme-iron-horse .vr-record-actions .mud-error-text * {
    color: var(--mud-palette-error) !important;
}

.vr-app.vr-theme-iron-horse .vr-collection-page .vr-pagination-bar .mud-pagination .mud-pagination-item-selected,
.vr-app.vr-theme-iron-horse .vr-collection-page .vr-pagination-bar .mud-pagination .mud-button-root.mud-pagination-item-selected,
.vr-app.vr-theme-iron-horse .vr-collection-page .vr-pagination-bar .mud-pagination .mud-icon-button.mud-pagination-item-selected,
.vr-app.vr-theme-iron-horse .vr-collection-page .vr-pagination-bar .mud-pagination .mud-selected,
.vr-app.vr-theme-iron-horse .vr-collection-page .vr-pagination-bar .mud-pagination .mud-button-root.mud-selected,
.vr-app.vr-theme-iron-horse .vr-collection-page .vr-pagination-bar .mud-pagination .mud-icon-button.mud-selected {
    background: #6c757d !important;
    color: #ffffff !important;
    border-color: #b7b7a4 !important;
}

.vr-app.vr-theme-iron-horse .vr-collection-page .vr-pagination-bar .mud-pagination .mud-pagination-item-selected *,
.vr-app.vr-theme-iron-horse .vr-collection-page .vr-pagination-bar .mud-pagination .mud-button-root.mud-pagination-item-selected *,
.vr-app.vr-theme-iron-horse .vr-collection-page .vr-pagination-bar .mud-pagination .mud-icon-button.mud-pagination-item-selected *,
.vr-app.vr-theme-iron-horse .vr-collection-page .vr-pagination-bar .mud-pagination .mud-selected *,
.vr-app.vr-theme-iron-horse .vr-collection-page .vr-pagination-bar .mud-pagination .mud-button-root.mud-selected *,
.vr-app.vr-theme-iron-horse .vr-collection-page .vr-pagination-bar .mud-pagination .mud-icon-button.mud-selected * {
    color: #ffffff !important;
}

.vr-theme-menu-popover,
.vr-theme-menu-popover .mud-popover-paper,
.vr-theme-menu-popover .mud-list,
.vr-theme-menu-popover .mud-list-item,
.vr-theme-menu-popover .mud-list-item *,
.vr-theme-menu-popover .vr-theme-menu-name,
.vr-theme-menu-popover .vr-theme-menu-mood {
    background-color: #ffffff !important;
    color: #0b0d17 !important;
}

.vr-theme-menu-popover .mud-list-item:hover,
.vr-theme-menu-popover .mud-list-item:hover * {
    background-color: #e8f4fb !important;
    color: #0b0d17 !important;
}

.vr-theme-ad-astra .vr-collection-page .vr-page-header .vr-header-control .mud-input,
.vr-theme-ad-astra .vr-collection-page .vr-page-header .vr-header-control .mud-input-root,
.vr-theme-ad-astra .vr-collection-page .vr-page-header .vr-header-control .mud-input-slot,
.vr-theme-ad-astra .vr-collection-page .vr-page-header .vr-header-control .mud-input-control,
.vr-theme-ad-astra .vr-collection-page .vr-page-header .vr-header-control .mud-select,
.vr-theme-ad-astra .vr-collection-page .vr-page-header .vr-header-control .mud-select-input {
    background: transparent !important;
    color: #ffffff !important;
}

.vr-theme-ad-astra .vr-collection-page .vr-page-header .vr-header-control .mud-input-label,
.vr-theme-ad-astra .vr-collection-page .vr-page-header .vr-header-control .mud-input-adornment,
.vr-theme-ad-astra .vr-collection-page .vr-page-header .vr-header-control .mud-icon-root,
.vr-theme-ad-astra .vr-collection-page .vr-page-header .vr-header-control input {
    color: #ffffff !important;
}

.vr-theme-ad-astra .vr-collection-page .vr-page-header .vr-header-control .mud-input-outlined-border {
    border-color: #0085ca !important;
}

.mud-dialog,
.mud-dialog .mud-dialog-title,
.mud-dialog .mud-dialog-content,
.mud-dialog .mud-typography,
.mud-dialog .mud-input,
.mud-dialog .mud-input-control,
.mud-dialog .mud-input-label,
.mud-dialog .mud-input-slot,
.mud-dialog .mud-select,
.mud-dialog .mud-select-input {
    color: #0b0d17 !important;
}

.mud-dialog .mud-input-outlined-border {
    border-color: rgba(11, 13, 23, 0.32) !important;
}

/* MudBlazor portals dialogs outside .vr-app, so carry each theme's dialog
   palette through the body instead of relying on descendant selectors. */
body:has(.vr-app.vr-theme-college-radio) .mud-dialog,
body:has(.vr-app.vr-theme-college-radio) .vr-discover-album-shell .vr-landing-hero {
    --vr-dialog-surface: #ffffff;
    --vr-dialog-ink: #17384a;
    --vr-dialog-muted: #526b78;
    --vr-dialog-border: #245c7a;
}

body:has(.vr-app.vr-theme-ad-astra) .mud-dialog,
body:has(.vr-app.vr-theme-ad-astra) .vr-discover-album-shell .vr-landing-hero {
    --vr-dialog-surface: #ff8500;
    --vr-dialog-ink: #0b0d17;
    --vr-dialog-muted: #3d2a16;
    --vr-dialog-border: #0b0d17;
}

body:has(.vr-app.vr-theme-factory-records) .mud-dialog,
body:has(.vr-app.vr-theme-factory-records) .vr-discover-album-shell .vr-landing-hero {
    --vr-dialog-surface: #ffcc00;
    --vr-dialog-ink: #000000;
    --vr-dialog-muted: #4d3d00;
    --vr-dialog-border: #000000;
}

body:has(.vr-app.vr-theme-sst-hardcore) .mud-dialog,
body:has(.vr-app.vr-theme-sst-hardcore) .vr-discover-album-shell .vr-landing-hero {
    --vr-dialog-surface: #d6372b;
    --vr-dialog-ink: #fffaf0;
    --vr-dialog-muted: #ffe0d8;
    --vr-dialog-border: #050505;
}

body:has(.vr-app.vr-theme-underground) .mud-dialog,
body:has(.vr-app.vr-theme-underground) .vr-discover-album-shell .vr-landing-hero {
    --vr-dialog-surface: #ffffff;
    --vr-dialog-ink: #12344d;
    --vr-dialog-muted: #596678;
    --vr-dialog-border: #0066b2;
}

body:has(.vr-app.vr-theme-blue-note) .mud-dialog,
body:has(.vr-app.vr-theme-blue-note) .vr-discover-album-shell .vr-landing-hero {
    --vr-dialog-surface: #f4ead8;
    --vr-dialog-ink: #101826;
    --vr-dialog-muted: #4e596b;
    --vr-dialog-border: #2f6db3;
}

body:has(.vr-app.vr-theme-join-the-march) .mud-dialog,
body:has(.vr-app.vr-theme-join-the-march) .vr-discover-album-shell .vr-landing-hero {
    --vr-dialog-surface: #f4f1ea;
    --vr-dialog-ink: #111113;
    --vr-dialog-muted: #5c5245;
    --vr-dialog-border: #a71212;
}

body:has(.vr-app.vr-theme-punk-flyer) .mud-dialog,
body:has(.vr-app.vr-theme-punk-flyer) .vr-discover-album-shell .vr-landing-hero {
    --vr-dialog-surface: #141612;
    --vr-dialog-ink: #fff6dc;
    --vr-dialog-muted: #e4c9a1;
    --vr-dialog-border: #39ff14;
}

body:has(.vr-app.vr-theme-sunset-strip) .mud-dialog,
body:has(.vr-app.vr-theme-sunset-strip) .vr-discover-album-shell .vr-landing-hero {
    --vr-dialog-surface: #180b24;
    --vr-dialog-ink: #fff6fc;
    --vr-dialog-muted: #c9b8d9;
    --vr-dialog-border: #ff007f;
}

body:has(.vr-app.vr-theme-verve-records) .mud-dialog,
body:has(.vr-app.vr-theme-verve-records) .vr-discover-album-shell .vr-landing-hero {
    --vr-dialog-surface: #000000;
    --vr-dialog-ink: #e8e8e8;
    --vr-dialog-muted: #c0c0c0;
    --vr-dialog-border: #c0c0c0;
}

body:has(.vr-app.vr-theme-college-radio) .mud-dialog,
body:has(.vr-app.vr-theme-ad-astra) .mud-dialog,
body:has(.vr-app.vr-theme-factory-records) .mud-dialog,
body:has(.vr-app.vr-theme-sst-hardcore) .mud-dialog,
body:has(.vr-app.vr-theme-underground) .mud-dialog,
body:has(.vr-app.vr-theme-blue-note) .mud-dialog,
body:has(.vr-app.vr-theme-join-the-march) .mud-dialog,
body:has(.vr-app.vr-theme-punk-flyer) .mud-dialog,
body:has(.vr-app.vr-theme-sunset-strip) .mud-dialog,
body:has(.vr-app.vr-theme-verve-records) .mud-dialog,
body:has(.vr-app.vr-theme-college-radio) .vr-discover-album-shell .vr-landing-hero,
body:has(.vr-app.vr-theme-ad-astra) .vr-discover-album-shell .vr-landing-hero,
body:has(.vr-app.vr-theme-factory-records) .vr-discover-album-shell .vr-landing-hero,
body:has(.vr-app.vr-theme-sst-hardcore) .vr-discover-album-shell .vr-landing-hero,
body:has(.vr-app.vr-theme-underground) .vr-discover-album-shell .vr-landing-hero,
body:has(.vr-app.vr-theme-blue-note) .vr-discover-album-shell .vr-landing-hero,
body:has(.vr-app.vr-theme-join-the-march) .vr-discover-album-shell .vr-landing-hero,
body:has(.vr-app.vr-theme-punk-flyer) .vr-discover-album-shell .vr-landing-hero,
body:has(.vr-app.vr-theme-sunset-strip) .vr-discover-album-shell .vr-landing-hero,
body:has(.vr-app.vr-theme-verve-records) .vr-discover-album-shell .vr-landing-hero {
    background: var(--vr-dialog-surface) !important;
    border-color: var(--vr-dialog-border) !important;
    color: var(--vr-dialog-ink) !important;
}

body:has(.vr-app.vr-theme-college-radio) .mud-dialog,
body:has(.vr-app.vr-theme-ad-astra) .mud-dialog,
body:has(.vr-app.vr-theme-factory-records) .mud-dialog,
body:has(.vr-app.vr-theme-sst-hardcore) .mud-dialog,
body:has(.vr-app.vr-theme-underground) .mud-dialog,
body:has(.vr-app.vr-theme-blue-note) .mud-dialog,
body:has(.vr-app.vr-theme-join-the-march) .mud-dialog,
body:has(.vr-app.vr-theme-punk-flyer) .mud-dialog,
body:has(.vr-app.vr-theme-sunset-strip) .mud-dialog,
body:has(.vr-app.vr-theme-verve-records) .mud-dialog {
    .mud-dialog-title,
    .mud-dialog-content,
    .mud-dialog-actions,
    .mud-typography,
    .mud-input,
    .mud-input-control,
    .mud-input-slot,
    .mud-select,
    .mud-select-input,
    .mud-input-adornment,
    .mud-icon-root,
    input,
    textarea {
        color: var(--vr-dialog-ink) !important;
    }

    .mud-input-label,
    .mud-input-label-outlined,
    .mud-input-control > .mud-input-control-input-container > div.mud-input-label-inputcontrol {
        background: var(--vr-dialog-surface) !important;
        color: var(--vr-dialog-muted) !important;
        opacity: 1 !important;
    }

    .mud-input-outlined-border {
        border-color: var(--vr-dialog-border) !important;
    }

    .mud-input:hover .mud-input-outlined-border,
    .mud-input:focus-within .mud-input-outlined-border {
        border-color: var(--vr-dialog-ink) !important;
    }

    .mud-divider {
        border-color: color-mix(in srgb, var(--vr-dialog-ink) 22%, transparent) !important;
    }

    ::placeholder {
        color: var(--vr-dialog-muted) !important;
        opacity: 1 !important;
    }
}

/* Page header controls: one height, one source of truth. */
.vr-page-header .vr-toolbar:has(.vr-toolbar-fields) {
    display: grid;
    grid-template-columns: minmax(520px, 1fr) auto;
    column-gap: 18px;
    row-gap: 12px;
    align-items: flex-start;
    justify-content: stretch;
}

.vr-page-header .vr-toolbar-fields {
    display: grid;
    gap: 10px;
    min-width: min(100%, 560px);
    max-width: 620px;
    justify-self: start;
}

.vr-page-header .vr-toolbar-actions {
    display: grid;
    gap: 12px;
    align-content: start;
    justify-self: end;
}

.vr-page-header .vr-toolbar-actions {
    --vr-header-button-bg: var(--mud-palette-primary);
    --vr-header-button-text: var(--mud-palette-primary-text);
    --vr-header-button-border: var(--mud-palette-primary);
    --vr-header-button-shadow: 4px 4px 0 rgba(0, 0, 0, 0.18);
}

.vr-theme-factory-records .vr-page-header .vr-toolbar-actions,
.vr-theme-ad-astra .vr-page-header .vr-toolbar-actions {
    --vr-header-button-shadow: 4px 4px 0 var(--mud-palette-secondary);
}

.vr-theme-punk-flyer .vr-page-header .vr-toolbar-actions {
    --vr-header-button-bg: #39ff14;
    --vr-header-button-text: #ffffff;
    --vr-header-button-border: #39ff14;
    --vr-header-button-shadow: 4px 4px 0 #ff4fbf;
}

.vr-theme-sst-hardcore .vr-page-header .vr-toolbar-actions {
    --vr-header-button-bg: #d6372b;
    --vr-header-button-text: #fffaf0;
    --vr-header-button-border: #050505;
    --vr-header-button-shadow: 4px 4px 0 #008bb5;
}

.vr-theme-join-the-march .vr-page-header .vr-toolbar-actions {
    --vr-header-button-bg: #111113;
    --vr-header-button-text: #ffffff;
    --vr-header-button-border: #c01822;
}

.vr-theme-blue-note .vr-page-header .vr-toolbar-actions {
    --vr-header-button-bg: #db6a24;
    --vr-header-button-text: #101826;
    --vr-header-button-border: #101826;
}

.vr-theme-iron-horse .vr-page-header .vr-toolbar-actions {
    --vr-header-button-bg: #6c757d;
    --vr-header-button-text: #ffffff;
    --vr-header-button-border: #b7b7a4;
}

.vr-page-header .vr-toolbar-actions .vr-header-action-button {
    box-sizing: border-box;
    min-height: var(--vr-header-control-height) !important;
    height: var(--vr-header-control-height) !important;
    width: 100%;
    border-width: 2px !important;
    border-color: var(--vr-header-button-border) !important;
    background: var(--vr-header-button-bg) !important;
    color: var(--vr-header-button-text) !important;
    box-shadow: var(--vr-header-button-shadow) !important;
    font-weight: 800 !important;
}

.vr-page-header .vr-toolbar-actions .vr-header-action-button *,
.vr-page-header .vr-toolbar-actions .vr-header-action-button .mud-icon-root {
    color: var(--vr-header-button-text) !important;
}

.vr-page-header .vr-toolbar-actions .vr-header-action-button:hover {
    filter: brightness(0.92);
}

.vr-page-header .vr-control-row {
    display: grid;
    grid-template-columns: 120px minmax(320px, 1fr);
    align-items: center;
    gap: 16px;
    margin: 0;
}

.vr-page-header .vr-control-label {
    color: inherit;
    font-family: var(--vr-font-code);
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1;
    text-align: right;
    text-transform: uppercase;
}

.vr-page-header .vr-toolbar .vr-header-control {
    box-sizing: border-box;
    min-height: var(--vr-header-control-height) !important;
    height: var(--vr-header-control-height) !important;
    width: 100% !important;
}

.vr-page-header .vr-toolbar .vr-header-search,
.vr-page-header .vr-toolbar .vr-header-search .mud-input-control,
.vr-page-header .vr-toolbar .vr-header-search .mud-input-control-input-container,
.vr-page-header .vr-toolbar .vr-header-search .mud-input-root {
    min-height: var(--vr-header-control-height) !important;
    height: var(--vr-header-control-height) !important;
}

.vr-page-header .vr-toolbar .vr-header-search .mud-input-root,
.vr-page-header .vr-toolbar .vr-header-search .mud-input-slot,
.vr-page-header .vr-toolbar .vr-header-search .mud-input-adornment {
    display: flex !important;
    align-items: center !important;
}

.vr-page-header .vr-toolbar .vr-header-search .mud-input-slot,
.vr-page-header .vr-toolbar .vr-header-search input {
    min-height: calc(var(--vr-header-control-height) - 2px) !important;
    height: calc(var(--vr-header-control-height) - 2px) !important;
    line-height: normal !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.vr-app.vr-theme-ad-astra .vr-collection-page .vr-page-header .vr-header-search,
.vr-app.vr-theme-ad-astra .vr-collection-page .vr-page-header .vr-header-search .mud-input-control,
.vr-app.vr-theme-ad-astra .vr-collection-page .vr-page-header .vr-header-search .mud-input-control-input-container,
.vr-app.vr-theme-ad-astra .vr-collection-page .vr-page-header .vr-header-search .mud-input-root,
.vr-app.vr-theme-ad-astra .vr-collection-page .vr-page-header .vr-header-search .mud-input-slot,
.vr-app.vr-theme-ad-astra .vr-collection-page .vr-page-header .vr-header-search input {
    background: transparent !important;
    background-color: transparent !important;
    color: #ffffff !important;
}

.vr-app.vr-theme-ad-astra .vr-collection-page .vr-page-header .vr-header-search .mud-input-label,
.vr-app.vr-theme-ad-astra .vr-collection-page .vr-page-header .vr-header-search .mud-input-label-outlined,
.vr-app.vr-theme-ad-astra .vr-collection-page .vr-page-header .vr-header-search .mud-input-control > .mud-input-control-input-container > div.mud-input-label-inputcontrol {
    background: #111b2b !important;
    color: #ffffff !important;
}

.vr-app.vr-theme-ad-astra .vr-collection-page .vr-page-header .vr-header-search .mud-input-outlined-border {
    border-color: #0085ca !important;
}

.vr-app.vr-theme-ad-astra .vr-collection-page .vr-page-header .vr-header-search .mud-input-adornment,
.vr-app.vr-theme-ad-astra .vr-collection-page .vr-page-header .vr-header-search .mud-icon-root {
    color: #ffffff !important;
    background: transparent !important;
    background-color: transparent !important;
}

.vr-page-header .vr-toolbar .vr-crate-select {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
    height: var(--vr-header-control-height) !important;
    min-height: var(--vr-header-control-height) !important;
    border: 1px solid currentColor;
    border-radius: 6px;
    color: inherit;
    background: transparent;
}

.vr-page-header .vr-toolbar .vr-crate-select > select {
    width: 100%;
    height: 100%;
    border: 0;
    outline: 0;
    padding: 0 2.6rem 0 1rem;
    background: transparent;
    color: inherit;
    font: inherit;
    appearance: auto;
}

.vr-page-header .vr-toolbar .vr-crate-select > select option {
    background: #ffffff !important;
    color: #0b0d17 !important;
}

.vr-page-header .vr-toolbar .vr-crate-select > select option:checked,
.vr-page-header .vr-toolbar .vr-crate-select > select option:hover {
    background: #e8f4fb !important;
    color: #0b0d17 !important;
}

.vr-theme-ad-astra .vr-page-header .vr-toolbar .vr-crate-select {
    border-color: #0085ca;
    color: #ffffff;
}

/* Standard page shell: keep the page header anchored and scroll only the body below it. */
.vr-main:has(.vr-shell-content > .mud-container > .vr-page-header + .vr-page-body):not(:has(.vr-collection-page)) {
    overflow: hidden !important;
}

.vr-main:has(.vr-shell-content > .mud-container > .vr-page-header + .vr-page-body):not(:has(.vr-collection-page)) > .vr-shell-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.vr-shell-content > .mud-container:has(> .vr-page-header + .vr-page-body):not(.vr-collection-page) {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    box-sizing: border-box;
    padding-top: 8px;
    padding-bottom: 8px;
}

.vr-shell-content > .mud-container:has(> .vr-page-header + .vr-page-body):not(.vr-collection-page) > .vr-page-header {
    position: relative !important;
    top: auto !important;
    z-index: 2;
    flex: 0 0 auto;
    margin-bottom: 0 !important;
}

.vr-shell-content > .mud-container:has(> .vr-page-header + .vr-page-body):not(.vr-collection-page) > .vr-page-body {
    min-height: 0;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    margin-top: 0 !important;
    padding-top: 12px;
    padding-bottom: 0;
}

.vr-shell-content > .mud-container:has(> .vr-page-header + .vr-page-body):not(.vr-collection-page) > .vr-page-body > :first-child {
    margin-top: 0 !important;
}

.vr-standard-page > .vr-page-body {
    display: flex;
    flex-direction: column;
}

.vr-standard-page > .vr-page-body > .mud-grid {
    flex: 1 1 auto;
    align-content: stretch;
}

.vr-want-discogs-result {
    width: 100%;
}

.vr-want-discogs-text {
    flex: 1 1 auto;
    min-width: 0;
}

.vr-want-cover-thumb {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    object-fit: cover;
    border-radius: 6px;
}

.vr-want-cover-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--vr-border, rgba(0, 0, 0, 0.2));
    background: color-mix(in srgb, var(--vr-surface, #ffffff), var(--vr-bg, #000000) 8%);
}

/* Iron Horse final contrast pass. */
.vr-app.vr-theme-iron-horse .vr-stat {
    background: #b7b7a4 !important;
    border-color: #f1f1e8 !important;
    color: #17191b !important;
    box-shadow: 6px 6px 0 #111111 !important;
}

.vr-app.vr-theme-iron-horse .vr-stat-value,
.vr-app.vr-theme-iron-horse .vr-stat-label {
    color: #17191b !important;
}

.vr-app.vr-theme-iron-horse .mud-table-head,
.vr-app.vr-theme-iron-horse .mud-data-grid-header,
.vr-app.vr-theme-iron-horse .mud-table-head .mud-table-cell,
.vr-app.vr-theme-iron-horse .mud-data-grid-header .mud-table-cell,
.vr-app.vr-theme-iron-horse th {
    background: #b7b7a4 !important;
    border-color: #444444 !important;
    color: #17191b !important;
}

.vr-app.vr-theme-iron-horse .mud-table-head .mud-table-cell *,
.vr-app.vr-theme-iron-horse .mud-data-grid-header *,
.vr-app.vr-theme-iron-horse th * {
    color: #17191b !important;
}

.vr-app.vr-theme-iron-horse .vr-pagination-bar,
.vr-app.vr-theme-iron-horse .vr-pagination-bar * {
    color: #e0e0e0 !important;
}

.vr-app.vr-theme-iron-horse .vr-pagination-bar .mud-input,
.vr-app.vr-theme-iron-horse .vr-pagination-bar .mud-input-root,
.vr-app.vr-theme-iron-horse .vr-pagination-bar .mud-input-slot,
.vr-app.vr-theme-iron-horse .vr-pagination-bar .mud-select-input {
    background: #2b2b2b !important;
    color: #f1f1e8 !important;
}

.vr-app.vr-theme-iron-horse .vr-album-cover {
    border-color: #b7b7a4 !important;
    background:
        linear-gradient(135deg, rgba(183, 183, 164, 0.28), transparent 55%),
        #2b2b2b !important;
    box-shadow: 3px 3px 0 #111111 !important;
}

.vr-app.vr-theme-iron-horse .vr-album-cover-initials {
    background: #6c757d !important;
    color: #ffffff !important;
}

body:has(.vr-app.vr-theme-iron-horse) .mud-dialog,
body:has(.vr-app.vr-theme-iron-horse) .vr-discover-album-shell .vr-landing-hero {
    background: #2b2b2b !important;
    border: 2px solid #b7b7a4 !important;
    border-radius: 0 !important;
    box-shadow: 8px 8px 0 #111111 !important;
    color: #e0e0e0 !important;
}

body:has(.vr-app.vr-theme-iron-horse) .mud-dialog-title,
body:has(.vr-app.vr-theme-iron-horse) .mud-dialog-content,
body:has(.vr-app.vr-theme-iron-horse) .mud-dialog-actions,
body:has(.vr-app.vr-theme-iron-horse) .mud-dialog .mud-typography,
body:has(.vr-app.vr-theme-iron-horse) .mud-dialog .mud-input,
body:has(.vr-app.vr-theme-iron-horse) .mud-dialog .mud-input-control,
body:has(.vr-app.vr-theme-iron-horse) .mud-dialog .mud-input-slot,
body:has(.vr-app.vr-theme-iron-horse) .mud-dialog .mud-select,
body:has(.vr-app.vr-theme-iron-horse) .mud-dialog .mud-select-input,
body:has(.vr-app.vr-theme-iron-horse) .mud-dialog input,
body:has(.vr-app.vr-theme-iron-horse) .mud-dialog textarea {
    background: transparent !important;
    color: #e0e0e0 !important;
}

body:has(.vr-app.vr-theme-iron-horse) .mud-dialog .mud-input-label,
body:has(.vr-app.vr-theme-iron-horse) .mud-dialog .mud-input-label-outlined,
body:has(.vr-app.vr-theme-iron-horse) .mud-dialog .mud-input-control > .mud-input-control-input-container > div.mud-input-label-inputcontrol {
    background: #2b2b2b !important;
    color: #b7b7a4 !important;
    opacity: 1 !important;
}

body:has(.vr-app.vr-theme-iron-horse) .mud-dialog .mud-input-outlined-border {
    border-color: #888888 !important;
}

body:has(.vr-app.vr-theme-iron-horse) .mud-dialog .mud-input:hover .mud-input-outlined-border,
body:has(.vr-app.vr-theme-iron-horse) .mud-dialog .mud-input:focus-within .mud-input-outlined-border {
    border-color: #b7b7a4 !important;
}

body:has(.vr-app.vr-theme-iron-horse) .mud-dialog .mud-chip,
body:has(.vr-app.vr-theme-iron-horse) .mud-dialog .mud-chip * {
    border-color: #b7b7a4 !important;
    color: #e0e0e0 !important;
}

body:has(.vr-app.vr-theme-iron-horse) .mud-dialog .mud-button-filled-primary,
body:has(.vr-app.vr-theme-iron-horse) .vr-discover-album-shell .vr-landing-hero .mud-button-filled-primary {
    background: #6c757d !important;
    color: #ffffff !important;
}

body:has(.vr-app.vr-theme-iron-horse) .mud-dialog .mud-button-text,
body:has(.vr-app.vr-theme-iron-horse) .mud-dialog .mud-button-outlined,
body:has(.vr-app.vr-theme-iron-horse) .mud-dialog .mud-button-outlined *,
body:has(.vr-app.vr-theme-iron-horse) .vr-discover-album-shell .vr-landing-hero .mud-button-text,
body:has(.vr-app.vr-theme-iron-horse) .vr-discover-album-shell .vr-landing-hero .mud-button-outlined,
body:has(.vr-app.vr-theme-iron-horse) .vr-discover-album-shell .vr-landing-hero .mud-button-outlined * {
    color: #f1f1e8 !important;
}

body:has(.vr-app.vr-theme-iron-horse) .vr-discover-album-shell .vr-landing-copy h1 {
    color: #e0e0e0 !important;
}

body:has(.vr-app.vr-theme-iron-horse) .vr-discover-album-shell .vr-landing-lede {
    color: #b7b7a4 !important;
}

body:has(.vr-app.vr-theme-iron-horse) .vr-discover-album-shell .vr-landing-kicker {
    color: #b7b7a4 !important;
}

body:has(.vr-app.vr-theme-iron-horse) .mud-dialog ::placeholder {
    color: #9a9a91 !important;
    opacity: 1 !important;
}

/* Opaque, high-contrast temporary navigation drawers. */
.vr-theme-join-the-march .vr-drawer,
.vr-theme-join-the-march .vr-drawer .mud-typography,
.vr-theme-join-the-march .vr-drawer .mud-nav-link,
.vr-theme-join-the-march .vr-drawer .mud-nav-link * {
    color: #f4f1ea !important;
}

.vr-theme-ad-astra .vr-drawer,
.vr-theme-ad-astra .vr-drawer .mud-typography,
.vr-theme-ad-astra .vr-drawer .mud-nav-link,
.vr-theme-ad-astra .vr-drawer .mud-nav-link * {
    color: #b9c7d8 !important;
}

.vr-theme-punk-flyer .vr-drawer,
.vr-theme-punk-flyer .vr-drawer .mud-typography,
.vr-theme-punk-flyer .vr-drawer .mud-nav-link,
.vr-theme-punk-flyer .vr-drawer .mud-nav-link * {
    color: #050505 !important;
}

.vr-theme-sunset-strip .vr-drawer,
.vr-theme-sunset-strip .vr-drawer .mud-typography,
.vr-theme-sunset-strip .vr-drawer .mud-nav-link,
.vr-theme-sunset-strip .vr-drawer .mud-nav-link * {
    color: #05020a !important;
}

.vr-theme-iron-horse .vr-drawer,
.vr-theme-iron-horse .vr-drawer .mud-typography,
.vr-theme-iron-horse .vr-drawer .mud-nav-link,
.vr-theme-iron-horse .vr-drawer .mud-nav-link * {
    color: #e0e0e0 !important;
}

.vr-theme-join-the-march .vr-drawer .vr-drawer-kicker {
    color: #df9a28 !important;
}

.vr-theme-ad-astra .vr-drawer .vr-drawer-kicker {
    color: #0085ca !important;
}

.vr-theme-punk-flyer .vr-drawer .vr-drawer-kicker {
    color: #ff4fbf !important;
}

.vr-theme-sunset-strip .vr-drawer .vr-drawer-kicker {
    color: #05020a !important;
}

.vr-theme-iron-horse .vr-drawer .vr-drawer-kicker {
    color: #b7b7a4 !important;
}

.vr-theme-join-the-march .vr-drawer .mud-nav-link.active,
.vr-theme-join-the-march .vr-drawer .mud-nav-link:hover {
    border-color: #df9a28 !important;
    background: #111113 !important;
}

.vr-theme-join-the-march .vr-drawer .mud-nav-link.active *,
.vr-theme-join-the-march .vr-drawer .mud-nav-link:hover * {
    color: #ffffff !important;
}

.vr-theme-punk-flyer .vr-drawer .mud-nav-link.active,
.vr-theme-punk-flyer .vr-drawer .mud-nav-link:hover {
    border-color: #ff4fbf !important;
    background: #050505 !important;
}

.vr-theme-punk-flyer .vr-drawer .mud-nav-link.active *,
.vr-theme-punk-flyer .vr-drawer .mud-nav-link:hover * {
    color: #ff4fbf !important;
}

.vr-theme-sunset-strip .vr-drawer .mud-nav-link.active,
.vr-theme-sunset-strip .vr-drawer .mud-nav-link:hover {
    border-color: #39ff14 !important;
    background: #05020a !important;
}

.vr-theme-sunset-strip .vr-drawer .mud-nav-link.active *,
.vr-theme-sunset-strip .vr-drawer .mud-nav-link:hover * {
    color: #39ff14 !important;
}

.vr-theme-iron-horse .vr-drawer .mud-nav-link.active,
.vr-theme-iron-horse .vr-drawer .mud-nav-link:hover {
    border-color: #b7b7a4 !important;
    background: #2b2b2b !important;
    color: #ffffff !important;
}

.vr-theme-iron-horse .vr-drawer .mud-nav-link.active *,
.vr-theme-iron-horse .vr-drawer .mud-nav-link:hover * {
    color: #ffffff !important;
}

/* MudCheckBox uses an internal icon button; it must not inherit command-button chrome. */
.vr-app .mud-checkbox .mud-icon-button,
.mud-dialog .mud-checkbox .mud-icon-button {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    filter: none !important;
}

@media (max-width: 900px) {
    .vr-main:has(.vr-collection-page),
    .vr-shell-content:has(> .vr-collection-page) {
        overflow-y: auto !important;
        overflow-x: hidden;
    }

    .vr-shell-content:has(> .vr-collection-page) {
        display: block;
        height: auto;
    }

    .vr-collection-page {
        display: block;
        height: auto;
        overflow: visible;
    }

    .vr-collection-grid-wrap {
        overflow-x: auto;
    }

    .vr-mobile-record-list {
        display: grid;
    }
}

/* Header brand lockup normalization.
   Theme rules above predate the SVG record and must not add badge chrome. */
.vr-app .vr-appbar .vr-brand-mark,
.vr-app[class*="vr-theme-"] .vr-appbar .vr-brand-mark {
    border: 0 !important;
    outline: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
}

.vr-app .vr-appbar .vr-brand-title,
.vr-app[class*="vr-theme-"] .vr-appbar .vr-brand-title {
    text-shadow: none !important;
}

.vr-app .vr-appbar .vr-vinyl-icon__label {
    stroke: color-mix(in srgb, var(--mud-palette-secondary) 52%, #fff) !important;
    stroke-width: 1.25;
}

.vr-app .vr-appbar .vr-vinyl-icon__disc {
    stroke: rgba(255, 255, 255, 0.24) !important;
}

/* ── Recommendations (Phase 1) ──────────────────────────────────────────── */

.vr-inbox-card {
    border-radius: 14px;
    height: 100%;
}

.vr-inbox-note {
    font-style: italic;
    opacity: 0.85;
}

.vr-inbox-status-new {
    color: var(--mud-palette-primary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.vr-inbox-status-done {
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.vr-discover-album-cover img {
    border-radius: 16px;
    object-fit: cover;
}

.vr-label-release-owned {
    opacity: 0.55;
    position: relative;
}

/* Era/Geography cluster chips. First attempt used --vr-ink + --vr-panel-strong, but those
   two variables are NOT a reliably matched pair across themes — Ad Astra's second
   .vr-theme-ad-astra block (line ~4638) sets both to #ffffff, so that pairing produced
   white-on-white regardless of theme. Using currentColor sidesteps the whole variable
   system: it inherits whatever text color already renders correctly in this MudPaper
   context (proven correct since the surrounding card title/stats already read fine),
   so the tint is guaranteed to contrast against itself by construction. */
.vr-cluster-chip,
.vr-cluster-chip * {
    color: inherit !important;
}

.vr-cluster-chip {
    background: color-mix(in srgb, currentColor 12%, transparent) !important;
    border: 1px solid color-mix(in srgb, currentColor 30%, transparent) !important;
}

.vr-cluster-chip-selected,
.vr-cluster-chip-selected * {
    color: var(--mud-palette-primary-text, #ffffff) !important;
}

.vr-cluster-chip-selected {
    background: var(--mud-palette-primary) !important;
    border-color: transparent !important;
}

/* MudTabs' default inactive-tab text color is still low-contrast in some themes even
   after forcing --mud-palette-text-primary — that variable may itself be light in themes
   that are technically "dark mode" under the hood (Ad Astra) despite rendering light
   panels via CSS overrides. --vr-text is confirmed correctly dark for those specific
   themes (set directly in their own theme block), so prefer it with a fallback for
   themes that don't define it. No opacity reduction this time — that was compounding
   the contrast problem rather than just adding visual hierarchy. */
.mud-tabs .mud-tab,
.mud-tabs .mud-tab * {
    color: var(--vr-text, var(--mud-palette-text-primary)) !important;
}

.mud-tabs .mud-tab.mud-tab-active,
.mud-tabs .mud-tab.mud-tab-active * {
    color: var(--mud-palette-primary) !important;
}

/* Same root cause, wider net: Ad Astra and Iron Horse are both "dark mode" under
   MudBlazor's own palette even though their panels render light via CSS overrides, so
   any component that inherits --mud-palette-text-primary directly (rather than picking
   up the app's own forced-dark body text some other way) ends up low-contrast. This has
   now hit MudTabs, MudChip, and MudSelect's displayed value — covering the general input/
   select/list/menu family in one pass rather than patching each component as it's found. */
.vr-theme-ad-astra .mud-select,
.vr-theme-ad-astra .mud-select *,
.vr-theme-ad-astra .mud-input-control,
.vr-theme-ad-astra .mud-input-control *,
.vr-theme-ad-astra .mud-list-item,
.vr-theme-ad-astra .mud-list-item *,
.vr-theme-ad-astra .mud-menu,
.vr-theme-ad-astra .mud-menu *,
.vr-theme-iron-horse .mud-select,
.vr-theme-iron-horse .mud-select *,
.vr-theme-iron-horse .mud-input-control,
.vr-theme-iron-horse .mud-input-control *,
.vr-theme-iron-horse .mud-list-item,
.vr-theme-iron-horse .mud-list-item *,
.vr-theme-iron-horse .mud-menu,
.vr-theme-iron-horse .mud-menu * {
    color: var(--vr-text, var(--mud-palette-text-primary)) !important;
}

/* The broad fix above is theme-wide, but the appbar/header (theme switcher dropdown,
   "LANCE" username) sits on a dark background in Ad Astra/Iron Horse specifically — it
   needs to keep its light text there, not get swept into the light-panel correction
   above. Scoped to just those two themes: some other themes (Underground, Factory
   Records) deliberately use a LIGHT appbar with their own correct dark button-text
   overrides already — an earlier unscoped version of this rule forced white text onto
   those too and broke them (white-on-white/cream). Includes .mud-menu specifically since
   the theme switcher's always-visible activator button lives inside a .mud-menu wrapper,
   not just its popover — the broad .mud-menu rule above was catching it too. */
.vr-app.vr-theme-ad-astra .vr-appbar .mud-select,
.vr-app.vr-theme-ad-astra .vr-appbar .mud-select *,
.vr-app.vr-theme-ad-astra .vr-appbar .mud-input-control,
.vr-app.vr-theme-ad-astra .vr-appbar .mud-input-control *,
.vr-app.vr-theme-ad-astra .vr-appbar .mud-menu,
.vr-app.vr-theme-ad-astra .vr-appbar .mud-menu *,
.vr-app.vr-theme-ad-astra .vr-appbar .vr-theme-chip,
.vr-app.vr-theme-ad-astra .vr-appbar .vr-theme-chip *,
.vr-app.vr-theme-iron-horse .vr-appbar .mud-select,
.vr-app.vr-theme-iron-horse .vr-appbar .mud-select *,
.vr-app.vr-theme-iron-horse .vr-appbar .mud-input-control,
.vr-app.vr-theme-iron-horse .vr-appbar .mud-input-control *,
.vr-app.vr-theme-iron-horse .vr-appbar .mud-menu,
.vr-app.vr-theme-iron-horse .vr-appbar .mud-menu *,
.vr-app.vr-theme-iron-horse .vr-appbar .vr-theme-chip,
.vr-app.vr-theme-iron-horse .vr-appbar .vr-theme-chip * {
    color: var(--mud-palette-appbar-text, #ffffff) !important;
}

/* The hero panel now shares the same per-theme --vr-dialog-* colors as the
   album edit dialog. h1/lede/kicker have their own more-specific color rules
   elsewhere that would otherwise win over the inherited dialog ink color. */
.vr-discover-album-shell .vr-landing-copy h1 {
    color: var(--vr-dialog-ink, var(--vr-ink)) !important;
}

.vr-discover-album-shell .vr-landing-lede {
    color: var(--vr-dialog-muted, var(--vr-muted)) !important;
}

.vr-discover-album-shell .vr-landing-kicker {
    color: var(--vr-dialog-border, var(--mud-palette-primary)) !important;
}

/* Shrink-wraps to row 1's natural width (2 buttons), so row 2 can center
   against that width instead of the much wider hero copy column. */
.vr-landing-actions-group {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-top: 32px;
}

.vr-landing-actions-group .vr-landing-actions {
    margin-top: 0;
}

.vr-landing-actions-secondary {
    align-self: center;
}