:root {
    --glass-surface: rgba(5, 12, 29, .08);
    --glass-surface-strong: rgba(5, 12, 29, .16);
    --glass-control: rgba(19, 35, 69, .14);
    --glass-control-hover: rgba(30, 54, 101, .28);
    --glass-input: rgba(5, 12, 29, .1);
    --glass-border: rgba(143, 177, 255, .18);
}

html,
body {
    background: #000 !important;
    background-image: none !important;
}

/* The star field supplies the depth; shadows make the glass layers feel heavy. */
body *,
body *::before,
body *::after {
    box-shadow: none !important;
    text-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Main cards, panels and dialogs */
.universe-hero,
.universe-card,
.universe-panel,
.portal-group,
.portal-list-card,
.portal-balance-card,
.workspace-help-modal > section,
.studio-live-modal > section,
.studio-hub-header,
.studio-hub-prompt,
.studio-hub-task,
.studio-hub-empty,
.guest-auth-card,
.guest-auth-section,
.auth-dialog,
.auth-panel,
.payment-panel,
.account-preferences,
.whisper-document-dialog > section {
    background: var(--glass-surface) !important;
    background-image: none !important;
    border-color: var(--glass-border) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Top-right player and Account dock */
.floating-dock-content {
    background: rgba(3, 8, 20, .78) !important;
    border-color: var(--glass-border) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
}

.floating-utility-dock .global-mini-player,
.floating-utility-dock .floating-full-player,
.floating-utility-dock .music-player-section,
.floating-utility-dock .music-now-playing,
.floating-utility-dock .music-track-panel,
.floating-utility-dock .music-control-bar,
.floating-utility-dock .music-secondary-controls,
.floating-utility-dock .floating-setting-row,
.floating-utility-dock .auth-panel,
.floating-utility-dock .auth-summary {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

.floating-utility-dock .auth-dialog {
    background: rgba(3, 8, 20, .8) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
}

.floating-utility-dock button:not(#global-transparency-exempt) {
    background: rgba(19, 35, 69, .62) !important;
}

.floating-utility-dock button:not(#global-transparency-exempt):hover:not(:disabled),
.floating-utility-dock button:not(#global-transparency-exempt)[aria-pressed="true"] {
    background: rgba(30, 54, 101, .76) !important;
}

.floating-utility-dock input:not(#global-transparency-exempt),
.floating-utility-dock select:not(#global-transparency-exempt),
.floating-utility-dock textarea:not(#global-transparency-exempt) {
    background: rgba(3, 8, 20, .64) !important;
}

.floating-dock-content :where(div, section, aside, form, header, footer, article),
.auth-dialog :where(div, section, aside, form, header, footer, article),
.payment-panel :where(div, section, aside, form, header, footer, article),
.account-preferences :where(div, section, aside, form, header, footer, article) {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* Whisper Well */
.whisper-chat {
    background: rgba(5, 12, 29, .06) !important;
    background-image: none !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.whisper-message.is-user {
    background: rgba(19, 35, 69, .14) !important;
    background-image: none !important;
    box-shadow: none !important;
}

.whisper-message.is-assistant,
.whisper-compose,
.whisper-messages {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.whisper-image-result,
.whisper-attachment-chip,
.whisper-message-attachment {
    background: rgba(19, 35, 69, .1) !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* Every interactive control, loaded last so component CSS cannot make it opaque. */
body button:not(#global-transparency-exempt):not(.lights-cell),
body input:not(#global-transparency-exempt):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
body textarea:not(#global-transparency-exempt),
body select:not(#global-transparency-exempt) {
    background: var(--glass-control) !important;
    background-image: none !important;
    border-color: var(--glass-border) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body textarea:not(#global-transparency-exempt),
body input:not(#global-transparency-exempt):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
body select:not(#global-transparency-exempt) {
    background: var(--glass-input) !important;
}

/* Native dropdown popups cannot reliably render translucent option rows.
   Give every browser-customisable menu one consistent opaque night-sky base. */
body select:not(#global-transparency-exempt) {
    color-scheme: dark;
}

body select:not(#global-transparency-exempt) option,
body select:not(#global-transparency-exempt) optgroup {
    color: #eef4ff !important;
    background-color: #0d1b34 !important;
}

body select:not(#global-transparency-exempt) option:checked {
    color: #fff !important;
    background-color: #263f6b !important;
}

body button:not(#global-transparency-exempt):not(.lights-cell):hover:not(:disabled),
body input:not(#global-transparency-exempt)[type="button"]:hover:not(:disabled),
body input:not(#global-transparency-exempt)[type="submit"]:hover:not(:disabled),
body input:not(#global-transparency-exempt)[type="reset"]:hover:not(:disabled),
body button:not(#global-transparency-exempt)[aria-pressed="true"] {
    background: var(--glass-control-hover) !important;
}

body button:focus-visible,
body input:focus-visible,
body textarea:focus-visible,
body select:focus-visible {
    outline: 2px solid rgba(151, 184, 255, .9) !important;
    outline-offset: 2px;
}

/* Preserve meaningful state colours while keeping them translucent. */
body button:disabled,
body input:disabled,
body textarea:disabled,
body select:disabled {
    opacity: .62;
}

/* Keep the Live DJ dialog consistent with the top-right player glass. */
.studio-live-modal > section {
    background: rgba(3, 8, 20, .78) !important;
    background-image: none !important;
    border-color: var(--glass-border) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
}

.studio-live-backdrop {
    background: rgba(0, 0, 0, .46) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
}