@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes spinSlow {
    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse {

    0%,
    100% {
        height: 10px;
        opacity: 0.5;
    }

    50% {
        height: 24px;
        opacity: 1;
    }
}

body {
    background: #0c1324;
}

.anim-fade {
    animation: fadeIn .45s ease-out both;
}

.anim-slide {
    animation: slideDown .3s ease-out both;
}

.anim-spin {
    animation: spinSlow 1.1s linear infinite;
}

.waveform-bar {
    animation: pulse 1.2s infinite ease-in-out;
}

.glass-panel {
    background: rgba(21, 27, 45, 0.7);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.toast-box {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast {
    padding: 13px 20px;
    border-radius: 14px;
    color: #fff;
    font-size: .85rem;
    font-weight: 500;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
    animation: slideDown .3s ease-out both;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 370px;
}

.toast-ok {
    background: linear-gradient(135deg, #10b981, #059669);
}

.toast-err {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

.toast-info {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border-radius: 12px;
    color: rgba(222, 229, 255, 0.7);
    transition: all .25s ease;
}

.nav-link:hover {
    color: #dee5ff;
    background: rgba(23, 43, 84, 0.6);
    backdrop-filter: blur(12px);
}

.nav-link.active {
    background: #00293e;
    color: #89ceff;
    border-right: 2px solid #89ceff;
    box-shadow: 0 0 15px rgba(137, 206, 255, 0.3);
}

.main-scroll::-webkit-scrollbar,
.aura-sidebar-scroll::-webkit-scrollbar {
    width: 6px;
}

.main-scroll::-webkit-scrollbar-track,
.aura-sidebar-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.main-scroll::-webkit-scrollbar-thumb,
.aura-sidebar-scroll::-webkit-scrollbar-thumb {
    background: #2e3447;
    border-radius: 10px;
}

#voice-text:focus {
    outline: none;
    box-shadow: none;
}

#voice-card-list [data-select-voice] {
    outline: none;
}

#voice-card-list [data-select-voice]:focus-visible {
    box-shadow: 0 0 0 2px rgba(93, 230, 255, 0.45);
}

#result-info audio {
    width: 100%;
    max-width: 100%;
    border-radius: 999px;
}

#auth-modal .bg-white,
#auth-modal .bg-surface-50,
#auth-modal .bg-slate-50,
#auth-modal .border-slate-200 {
    color: #0f172a;
}

.glass-card {
    background: rgba(30, 36, 56, 0.45);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 
        0 15px 35px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 1px 0 0 rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    transform: translateZ(0);
    transition: all 0.3s ease;
}

.glass-card:hover {
    box-shadow: 
        0 25px 45px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(93, 230, 255, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border-color: rgba(93, 230, 255, 0.3);
    transform: translateY(-4px);
}

.icon-3d {
    filter: drop-shadow(0 4px 6px rgba(0, 203, 230, 0.4));
    transition: all 0.3s ease;
}

.icon-3d:hover {
    filter: drop-shadow(0 6px 10px rgba(0, 203, 230, 0.7));
    transform: scale(1.1) translateY(-2px);
}

.material-symbols-outlined {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

button:hover .material-symbols-outlined {
    filter: drop-shadow(0 4px 8px rgba(93, 230, 255, 0.5));
}

.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #4a4455;
    border-radius: 999px;
}

.aura-slider {
    position: relative;
    height: 20px;
    display: flex;
    align-items: center;
}

.aura-slider-track,
.aura-slider-fill {
    position: absolute;
    left: 0;
    top: 50%;
    height: 6px;
    transform: translateY(-50%);
    border-radius: 999px;
}

.aura-slider-track {
    width: 100%;
    background: #2e3447;
}

.aura-slider-fill {
    width: 0%;
    background: linear-gradient(90deg, #d2bbff 0%, #5de6ff 100%);
}

.aura-slider-thumb {
    position: absolute;
    top: 50%;
    left: 0%;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: #ffffff;
    transform: translate(-50%, -50%);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    border: 3px solid rgba(210, 187, 255, 0.25);
    pointer-events: none;
}

.aura-slider-input {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 20px;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    cursor: pointer;
}

.aura-slider-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: transparent;
    border: none;
}

.aura-slider-input::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: transparent;
    border: none;
}


.voice-card-hover {
    position: relative;
    overflow: hidden;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
}

.voice-card-hover:hover {
    transform: translate3d(0, -4px, 0) scale(1.02);
    box-shadow: 0 0 30px rgba(124, 58, 237, 0.15);
    background: rgba(35, 41, 60, 0.6);
    border-color: rgba(93, 230, 255, 0.3);
}

.voice-scroll-shell {
    scrollbar-gutter: stable both-edges;
}

.topup-popup-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: rgba(210, 187, 255, 0.42) transparent;
}

.topup-popup-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.topup-popup-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.topup-popup-scrollbar::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg,
            rgba(93, 230, 255, 0.38) 0%,
            rgba(124, 58, 237, 0.48) 100%);
    border-radius: 999px;
}

.topup-popup-scrollbar::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg,
            rgba(93, 230, 255, 0.55) 0%,
            rgba(124, 58, 237, 0.62) 100%);
}

.topup-popup-scrollbar::-webkit-scrollbar-corner {
    background: transparent;
}

/* Hide ads for paid-balance users */
body.is-vip .hidden-if-vip {
    display: none !important;
}

/* Hide scrollbar for elements with no-scrollbar */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* 3D Cyber-Glass Utilities */
.glass-panel-3d {
    background: rgba(21, 27, 45, 0.75);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transform: translateZ(0);
}

.card-3d {
    background: rgba(30, 36, 56, 0.45);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 
        0 15px 35px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform: translateZ(0);
}

.card-3d:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 
        0 25px 45px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(93, 230, 255, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border-color: rgba(93, 230, 255, 0.3);
}

.btn-3d {
    background: linear-gradient(135deg, #732ee4, #00cbe6);
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 
        0 8px 20px rgba(115, 46, 228, 0.4),
        inset 0 2px 4px rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}

.btn-3d:hover {
    transform: translateY(-3px);
    box-shadow: 
        0 12px 25px rgba(0, 203, 230, 0.5),
        0 0 15px rgba(115, 46, 228, 0.4),
        inset 0 2px 4px rgba(255, 255, 255, 0.3);
}

.btn-3d:active {
    transform: translateY(2px);
    box-shadow: 
        0 2px 10px rgba(115, 46, 228, 0.4),
        inset 0 4px 8px rgba(0, 0, 0, 0.3);
}

.btn-3d::after {
    content: '';
    position: absolute;
    top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg);
    transition: none;
}

.btn-3d:hover::after {
    animation: shine 0.75s;
}

@keyframes shine {
    100% { left: 200%; }
}

.input-3d {
    background: rgba(15, 20, 35, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
}

.input-3d:focus, .input-3d:focus-within {
    background: rgba(20, 25, 45, 0.9);
    border-color: #5de6ff;
    box-shadow: 
        inset 0 3px 6px rgba(0, 0, 0, 0.2),
        0 0 15px rgba(93, 230, 255, 0.3);
    outline: none;
}

/* 2026 Audio Console redesign: shared dark visual language for creator web UI */
:root {
    --studio-bg: #050607;
    --studio-panel: #101418;
    --studio-panel-soft: #0b0e11;
    --studio-panel-high: #171d22;
    --studio-ink: #f4f7f4;
    --studio-muted: #9aa59f;
    --studio-dim: #66716c;
    --studio-line: #263037;
    --studio-line-strong: #3a474f;
    --studio-action: #43f2c8;
    --studio-action-dark: #0da982;
    --studio-action-soft: rgba(67, 242, 200, 0.12);
    --studio-warn: #ffb84d;
    --studio-danger: #ff5c5c;
    --studio-radius: 14px;
    --studio-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
}

html,
body {
    background: var(--studio-bg) !important;
    color: var(--studio-ink) !important;
}

.bg-surface-dim,
.bg-background,
.bg-surface,
.bg-surface-container,
.bg-surface-container-low,
.bg-surface-container-high,
.bg-surface-container-highest,
.bg-surface-bright,
.bg-surface-container-lowest {
    background: var(--studio-bg) !important;
}

.aura-main-shell {
    background:
        linear-gradient(180deg, rgba(67, 242, 200, 0.08), transparent 34%),
        radial-gradient(circle at 12% 8%, rgba(231, 255, 90, 0.08), transparent 28%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 72px),
        var(--studio-bg) !important;
}

.glass-panel,
.glass-panel-3d,
.glass-card,
.panel,
#global-popup-modal,
#auth-modal > .relative,
#voice-picker-modal .relative {
    background: linear-gradient(180deg, rgba(23, 29, 34, 0.96), rgba(10, 13, 16, 0.98)) !important;
    border: 1px solid var(--studio-line) !important;
    border-radius: var(--studio-radius) !important;
    box-shadow: var(--studio-shadow) !important;
    color: var(--studio-ink) !important;
    backdrop-filter: none !important;
}

.text-on-surface,
.text-on-background,
.text-white {
    color: var(--studio-ink) !important;
}

.text-on-surface-variant,
.text-ink-muted,
.text-slate-400,
.text-gray-400 {
    color: var(--studio-muted) !important;
}

.text-primary,
.text-secondary,
.text-brand-400 {
    color: var(--studio-action) !important;
}

.border-white\/10,
.border-outline-variant\/20,
.border-outline-variant\/30,
.border-white\/5 {
    border-color: var(--studio-line) !important;
}

input,
textarea,
select,
.studio-textarea {
    background: #07090b !important;
    color: var(--studio-ink) !important;
    border-color: var(--studio-line) !important;
    border-radius: 12px !important;
}

input:focus,
textarea:focus,
select:focus,
.studio-textarea:focus {
    border-color: var(--studio-action) !important;
    box-shadow: 0 0 0 3px rgba(67, 242, 200, 0.12) !important;
}

input::placeholder,
textarea::placeholder {
    color: #5f6b66 !important;
}

.nav-link {
    border-radius: 12px;
    color: var(--studio-muted) !important;
    background: transparent !important;
    border: 1px solid transparent;
}

.nav-link:hover {
    background: #10161a !important;
    border-color: var(--studio-line) !important;
    color: var(--studio-ink) !important;
}

.nav-link.active {
    background: linear-gradient(135deg, rgba(67, 242, 200, 0.16), rgba(231, 255, 90, 0.10)) !important;
    color: var(--studio-action) !important;
    border: 1px solid rgba(67, 242, 200, 0.32) !important;
    border-right: 1px solid rgba(67, 242, 200, 0.32) !important;
    box-shadow: 0 14px 34px rgba(67, 242, 200, 0.08) !important;
}

.aura-sidebar,
aside[class*="w-[260px]"],
aside[class*="w-64"] {
    background: #07090b !important;
    border-right: 1px solid var(--studio-line) !important;
}

header,
.topbar,
nav {
    background: rgba(5, 6, 7, 0.84) !important;
    border-color: var(--studio-line) !important;
    backdrop-filter: blur(18px);
}

.studio-workspace {
    gap: 18px !important;
    max-width: 1480px;
}

.studio-editor-shell,
.studio-voice-panel,
.studio-settings-panel,
.studio-submit-panel,
.studio-output-panel {
    background: linear-gradient(180deg, var(--studio-panel-high), var(--studio-panel)) !important;
    border: 1px solid var(--studio-line) !important;
    border-radius: var(--studio-radius) !important;
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.34) !important;
    color: var(--studio-ink) !important;
}

.studio-editor-shell {
    min-height: min(680px, calc(100vh - 220px));
}

.studio-editor-topline,
.studio-editor-toolbar,
.studio-editor-footer,
.studio-section-head {
    border-color: var(--studio-line) !important;
}

.studio-editor-topline h2,
.studio-section-head h3 {
    color: var(--studio-ink) !important;
    letter-spacing: 0;
}

.studio-kicker {
    color: var(--studio-action) !important;
    letter-spacing: 0.16em;
}

.studio-mode-switch {
    background: #080b0d !important;
    border: 1px solid var(--studio-line) !important;
    border-radius: 12px !important;
}

.studio-mode-switch button.active,
.studio-mode-switch button.bg-primary-container {
    background: var(--studio-action) !important;
    color: #050607 !important;
    border-radius: 10px !important;
}

.studio-editor-tools button,
.studio-icon-action,
.studio-section-head button,
.studio-advanced-toggle,
#picker-load-more-btn {
    background: #0a0d10 !important;
    color: var(--studio-muted) !important;
    border: 1px solid var(--studio-line) !important;
    border-radius: 12px !important;
}

.studio-editor-tools button:hover,
.studio-icon-action:hover,
.studio-section-head button:hover,
.studio-advanced-toggle:hover,
#picker-load-more-btn:hover {
    background: var(--studio-action-soft) !important;
    color: var(--studio-action) !important;
    border-color: rgba(67, 242, 200, 0.36) !important;
}

.studio-textarea {
    min-height: 420px;
    font-size: 1.05rem !important;
    line-height: 1.75 !important;
}

.studio-editor-footer {
    background: #090c0f !important;
}

.studio-wave-strip span,
.waveform-bar {
    background: linear-gradient(180deg, var(--studio-action), #e7ff5a) !important;
    border-radius: 999px !important;
}

#char-count,
.studio-credit-preview,
.studio-output-meta,
.studio-output-hint,
.studio-submit-breakdown span,
.studio-voice-copy p {
    color: var(--studio-muted) !important;
}

.studio-credit-preview strong,
.studio-output-meta strong,
.studio-range-row strong,
.studio-voice-copy span {
    color: var(--studio-action) !important;
}

.studio-voice-card,
.studio-submit-breakdown > div {
    background: #090c0f !important;
    border: 1px solid var(--studio-line) !important;
    border-radius: 12px !important;
}

.studio-voice-card:hover {
    background: #111820 !important;
    border-color: rgba(67, 242, 200, 0.34) !important;
}

.studio-voice-avatar,
.studio-output-icon {
    background: linear-gradient(135deg, #43f2c8, #e7ff5a) !important;
    color: #050607 !important;
    border-radius: 12px !important;
}

.studio-range-row {
    border-color: var(--studio-line) !important;
}

.studio-range-row input {
    accent-color: var(--studio-action) !important;
}

.studio-generate-btn,
.bg-brand-600,
.bg-primary,
button[type="submit"] {
    background: linear-gradient(135deg, #43f2c8, #e7ff5a) !important;
    color: #050607 !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: 0 16px 38px rgba(67, 242, 200, 0.20) !important;
}

.studio-generate-btn:hover,
.bg-brand-600:hover,
.bg-primary:hover,
button[type="submit"]:hover {
    filter: brightness(1.04);
    transform: translateY(-1px);
}

.studio-progress-track {
    background: #07090b !important;
    border: 1px solid var(--studio-line);
}

.studio-progress-track > div,
#progress-bar {
    background: linear-gradient(90deg, #43f2c8, #e7ff5a) !important;
}

.picker-filter-btn {
    background: #0a0d10 !important;
    color: var(--studio-muted) !important;
    border-color: var(--studio-line) !important;
    border-radius: 12px !important;
}

.picker-filter-btn[data-active="true"],
.picker-filter-btn.bg-secondary\/10,
.picker-filter-btn.border-secondary\/50 {
    background: var(--studio-action-soft) !important;
    color: var(--studio-action) !important;
    border-color: rgba(67, 242, 200, 0.36) !important;
}

.toast {
    border-radius: 12px !important;
}

/* 2026 interface overhaul: quiet studio system */
:root {
    --studio-bg: #f4f1ea;
    --studio-panel: #fffdf8;
    --studio-panel-soft: #f8f5ee;
    --studio-ink: #171512;
    --studio-muted: #746f66;
    --studio-dim: #a19a8f;
    --studio-line: #ded8cc;
    --studio-line-strong: #c9c0b2;
    --studio-action: #0e5f55;
    --studio-action-dark: #093d38;
    --studio-action-soft: #dcebe7;
    --studio-warn: #ad5f00;
    --studio-danger: #b42318;
    --studio-radius: 10px;
    --studio-shadow: 0 18px 45px rgba(54, 47, 36, 0.12);
}

html.dark body,
body {
    background: var(--studio-bg) !important;
    color: var(--studio-ink) !important;
}

.aura-main-shell,
.bg-surface-dim,
.bg-background,
.bg-surface,
.bg-surface-container,
.bg-surface-container-low,
.bg-surface-container-high,
.bg-surface-container-highest,
.bg-surface-bright {
    background: var(--studio-bg) !important;
}

.main-scroll {
    background:
        linear-gradient(180deg, rgba(255, 253, 248, 0.78), rgba(244, 241, 234, 0.98)) !important;
}

.main-scroll::-webkit-scrollbar,
.aura-sidebar-scroll::-webkit-scrollbar,
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
}

.main-scroll::-webkit-scrollbar-thumb,
.aura-sidebar-scroll::-webkit-scrollbar-thumb,
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #c8bfb0;
    border-radius: 999px;
}

.card-3d,
.glass-card,
.glass-panel,
.glass-panel-3d,
.input-3d,
.neon-glow-cyan {
    background: var(--studio-panel) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid var(--studio-line) !important;
    border-radius: var(--studio-radius) !important;
    box-shadow: var(--studio-shadow) !important;
    color: var(--studio-ink) !important;
    transform: none !important;
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease !important;
}

.card-3d:hover,
.glass-card:hover,
.voice-card-hover:hover {
    background: #ffffff !important;
    border-color: var(--studio-line-strong) !important;
    box-shadow: 0 22px 55px rgba(54, 47, 36, 0.15) !important;
    transform: none !important;
}

.input-3d,
textarea,
input,
select {
    background: #fffdf8 !important;
    color: var(--studio-ink) !important;
    border-color: var(--studio-line) !important;
    box-shadow: none !important;
}

.input-3d:focus,
.input-3d:focus-within,
textarea:focus,
input:focus,
select:focus {
    border-color: var(--studio-action) !important;
    box-shadow: 0 0 0 3px rgba(14, 95, 85, 0.14) !important;
    outline: none !important;
}

.btn-3d,
button.bg-primary,
button.bg-primary-container,
a.bg-primary {
    background: var(--studio-action) !important;
    color: #fffdf8 !important;
    border: 1px solid var(--studio-action-dark) !important;
    border-radius: var(--studio-radius) !important;
    box-shadow: 0 10px 24px rgba(14, 95, 85, 0.22) !important;
    text-shadow: none !important;
    transform: none !important;
}

.btn-3d:hover,
button.bg-primary:hover,
button.bg-primary-container:hover,
a.bg-primary:hover {
    background: var(--studio-action-dark) !important;
    transform: none !important;
    box-shadow: 0 12px 28px rgba(14, 95, 85, 0.25) !important;
}

.btn-3d::after,
.page-hero::before,
.page-hero::after {
    display: none !important;
}

.text-on-surface,
.text-white,
.text-slate-200,
.text-slate-300,
.text-\[\#dee5ff\] {
    color: var(--studio-ink) !important;
}

.text-on-surface-variant,
.text-slate-400,
.text-slate-500,
.text-\[\#dee5ff\]\/40,
.text-\[\#dee5ff\]\/60,
.text-\[\#dee5ff\]\/80,
.text-\[\#dee5ff\]\/85 {
    color: var(--studio-muted) !important;
}

.text-primary,
.text-secondary,
.text-accent-violet,
.text-accent-emerald,
.text-brand-400 {
    color: var(--studio-action) !important;
}

.text-yellow-400,
.text-amber-400 {
    color: var(--studio-warn) !important;
}

.text-error,
.text-red-400 {
    color: var(--studio-danger) !important;
}

.border-white\/5,
.border-white\/10,
.border-outline-variant\/30,
.border-card-border {
    border-color: var(--studio-line) !important;
}

.bg-white\/5,
.bg-white\/10,
.bg-black\/20,
.bg-black\/40,
.bg-secondary\/10,
.bg-primary\/20,
.bg-primary-container\/20 {
    background: var(--studio-panel-soft) !important;
}

.rounded-3xl,
.rounded-\[2rem\],
.rounded-\[2\.5rem\],
.rounded-\[24px\],
.rounded-\[28px\],
.rounded-2xl {
    border-radius: var(--studio-radius) !important;
}

.material-symbols-outlined,
button:hover .material-symbols-outlined,
.icon-3d,
.icon-3d:hover {
    filter: none !important;
    transform: none !important;
}

.nav-link {
    border-radius: 8px !important;
    color: #4f493f !important;
    padding: 11px 12px !important;
    background: transparent !important;
    border: 1px solid transparent !important;
}

.nav-link:hover {
    color: var(--studio-ink) !important;
    background: #ede7dc !important;
    backdrop-filter: none !important;
}

.nav-link.active {
    background: #dfeeea !important;
    color: var(--studio-action-dark) !important;
    border: 1px solid #bfd7d0 !important;
    box-shadow: none !important;
}

#web-sidebar {
    background: #fffdf8 !important;
    border-right: 1px solid var(--studio-line) !important;
    box-shadow: 8px 0 28px rgba(54, 47, 36, 0.08) !important;
}

header {
    color: var(--studio-ink) !important;
}

header > .absolute {
    background: rgba(255, 253, 248, 0.92) !important;
    border-bottom: 1px solid var(--studio-line) !important;
    backdrop-filter: blur(12px) !important;
}

.toast {
    border-radius: 8px !important;
    box-shadow: 0 14px 35px rgba(54, 47, 36, 0.18) !important;
}

.toast-ok {
    background: #0e5f55 !important;
}

.toast-err {
    background: #b42318 !important;
}

.toast-info {
    background: #3d4a47 !important;
}

#voice-text {
    min-height: 320px;
    line-height: 1.7;
}

#selected-voice-preview,
#result-area,
#topup-config-state,
#topup-custom-summary {
    background: rgba(255, 255, 255, 0.03) !important;
    color: var(--md-sys-color-on-surface-variant) !important;
}

#result-info audio {
    border-radius: 8px !important;
}

.waveform-bar {
    animation: none !important;
    background: var(--studio-action) !important;
    opacity: 0.75;
}

#global-popup-overlay {
    background: rgba(23, 21, 18, 0.55) !important;
}

#global-popup-modal,
#auth-modal > [class*="rounded"],
#voice-picker-modal .relative {
    border-radius: 12px !important;
    background: #fffdf8 !important;
    color: var(--studio-ink) !important;
    border-color: var(--studio-line) !important;
}

.bg-gradient-to-r,
.bg-gradient-to-br,
.bg-gradient-to-b,
.bg-gradient-to-t {
    background-image: none !important;
}

.text-transparent,
.bg-clip-text {
    color: var(--studio-ink) !important;
    -webkit-text-fill-color: currentColor !important;
}

[class*="shadow-["],
.shadow-3d-button,
.shadow-3d-inset,
.drop-shadow-sm,
.drop-shadow-md {
    box-shadow: none !important;
    filter: none !important;
}

#mobile-mini-player {
    background: #fffdf8 !important;
    border-top: 1px solid var(--studio-line) !important;
    color: var(--studio-ink) !important;
    box-shadow: 0 -12px 28px rgba(54, 47, 36, 0.12) !important;
    backdrop-filter: none !important;
}

#mobile-mini-player .animate-pulse {
    animation: none !important;
    background: var(--studio-action) !important;
}

#mobile-mini-player button {
    background: var(--studio-panel-soft) !important;
    color: var(--studio-ink) !important;
}

#mobile-mini-player .text-secondary,
#mobile-mini-player .text-slate-400 {
    color: var(--studio-muted) !important;
}

#mobile-sidebar,
#mobile-topbar {
    color: var(--studio-ink) !important;
}

.fixed .backdrop-blur-xl,
.backdrop-blur-xl,
.backdrop-blur-md {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.studio-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    grid-template-areas:
        "editor controls"
        "output controls";
    gap: 18px;
    align-items: start;
}

.studio-editor-shell,
.studio-voice-panel,
.studio-settings-panel,
.studio-submit-panel,
.studio-output-panel {
    background: #fffdf8;
    border: 1px solid var(--studio-line);
    border-radius: 10px;
    box-shadow: 0 16px 34px rgba(54, 47, 36, 0.08);
}

.studio-editor-shell {
    grid-area: editor;
    min-height: 610px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.studio-control-rail {
    grid-area: controls;
    position: sticky;
    top: 96px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.studio-output-panel {
    grid-area: output;
    display: flex;
    gap: 16px;
    min-height: 118px;
    padding: 18px;
}

.studio-editor-topline,
.studio-editor-toolbar,
.studio-editor-footer,
.studio-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.studio-editor-topline {
    padding: 22px 24px 16px;
    border-bottom: 1px solid var(--studio-line);
}

.studio-editor-topline h2,
.studio-section-head h3 {
    margin: 0;
    color: var(--studio-ink);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0;
}

.studio-kicker {
    margin: 0 0 5px;
    color: var(--studio-action);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.studio-mode-switch {
    display: inline-flex;
    gap: 3px;
    padding: 4px;
    background: #f4f0e7;
    border: 1px solid var(--studio-line);
    border-radius: 9px;
}

.studio-mode-switch button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 13px;
    border-radius: 7px;
    color: var(--studio-muted);
    font-size: 13px;
    font-weight: 750;
}

.studio-mode-switch button.active,
.studio-mode-switch button.bg-primary-container {
    background: #171512 !important;
    color: #fffdf8 !important;
}

.studio-mode-switch .material-symbols-outlined {
    font-size: 18px;
}

.studio-editor-toolbar {
    min-height: 54px;
    padding: 8px 24px;
    border-bottom: 1px solid var(--studio-line);
}

.studio-editor-tools {
    display: inline-flex;
    gap: 6px;
}

.studio-editor-tools button,
.studio-icon-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--studio-line);
    border-radius: 8px;
    background: #f8f5ee;
    color: var(--studio-muted);
}

.studio-editor-tools button:hover,
.studio-icon-action:hover {
    background: #dcebe7;
    color: var(--studio-action-dark);
}

.studio-inline-status {
    align-items: center;
    gap: 9px;
    color: var(--studio-action);
    font-size: 12px;
}

.studio-inline-status span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--studio-action);
}

.studio-editor-panel {
    flex: 1;
    padding: 0;
}

.studio-textarea {
    display: block;
    width: 100%;
    min-height: 438px;
    height: 100%;
    padding: 26px 28px;
    resize: none;
    border: 0 !important;
    background: #fffdf8 !important;
    color: var(--studio-ink) !important;
    font-size: 18px;
    line-height: 1.72;
    outline: none;
    box-shadow: none !important;
}

.studio-textarea::placeholder,
.studio-srt-input::placeholder {
    color: #aaa296;
}

.studio-editor-footer {
    padding: 14px 24px;
    border-top: 1px solid var(--studio-line);
    background: #fbf8f1;
}

.studio-wave-strip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 24px;
}

.studio-wave-strip span {
    width: 4px;
    border-radius: 99px;
    background: var(--studio-action);
}

.studio-wave-strip span:nth-child(1) { height: 10px; }
.studio-wave-strip span:nth-child(2) { height: 18px; }
.studio-wave-strip span:nth-child(3) { height: 13px; }
.studio-wave-strip span:nth-child(4) { height: 22px; }
.studio-wave-strip span:nth-child(5) { height: 15px; }

#char-count {
    color: var(--studio-muted) !important;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.studio-voice-panel,
.studio-settings-panel,
.studio-submit-panel {
    padding: 16px;
}

.studio-section-head {
    margin-bottom: 14px;
}

.studio-section-head.compact {
    margin-bottom: 4px;
}

.studio-advanced-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.studio-advanced-toggle .material-symbols-outlined {
    font-size: 17px;
}

.studio-section-head button {
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid var(--studio-line);
    border-radius: 7px;
    color: var(--studio-action-dark);
    background: #f8f5ee;
    font-size: 12px;
    font-weight: 750;
}

.studio-voice-card {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 40px;
    gap: 12px;
    align-items: center;
    padding: 13px;
    border: 1px solid var(--studio-line);
    border-radius: 9px;
    background: #fbf8f1;
    cursor: pointer;
}

.studio-voice-card:hover {
    border-color: var(--studio-line-strong);
    background: #ffffff;
}

.studio-voice-avatar {
    position: relative;
    width: 58px;
    height: 58px;
    overflow: hidden;
    border-radius: 8px;
    background: #dcebe7;
    border: 1px solid #bfd7d0;
}

.studio-voice-avatar img,
.studio-voice-avatar > div {
    width: 100%;
    height: 100%;
}

.studio-voice-avatar img {
    object-fit: cover;
}

.studio-voice-avatar > div {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--studio-action-dark);
}

.studio-voice-copy {
    min-width: 0;
}

.studio-voice-copy p {
    margin: 0 0 3px;
    color: var(--studio-muted);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.12em;
}

.studio-voice-copy h3 {
    margin: 0;
    color: var(--studio-ink);
    font-size: 15px;
    font-weight: 850;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.studio-voice-copy span {
    display: block;
    margin-top: 3px;
    color: var(--studio-action);
    font-size: 11px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.studio-range-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 9px 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--studio-line);
}

.studio-range-row:last-child {
    border-bottom: 0;
}

.studio-range-row span {
    color: var(--studio-ink);
    font-size: 13px;
    font-weight: 760;
}

.studio-range-row strong {
    color: var(--studio-action);
    font-size: 12px;
    font-weight: 850;
}

.studio-range-row input {
    grid-column: 1 / -1;
    width: 100%;
    accent-color: var(--studio-action);
}

.studio-advanced-controls {
    margin-top: 2px;
    border-top: 1px dashed var(--studio-line);
}

.studio-credit-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    color: var(--studio-muted);
    font-size: 12px;
    font-weight: 760;
}

.studio-credit-preview strong {
    color: var(--studio-action);
}

.studio-submit-breakdown {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 12px;
}

.studio-submit-breakdown > div {
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid var(--studio-line);
    border-radius: 8px;
    background: #fbf8f1;
}

.studio-submit-breakdown span,
.studio-submit-breakdown strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.studio-submit-breakdown span {
    color: var(--studio-muted);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.studio-submit-breakdown strong {
    margin-top: 3px;
    color: var(--studio-ink);
    font-size: 13px;
    font-weight: 850;
}

.studio-generate-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 58px;
    border-radius: 8px;
    background: #171512 !important;
    color: #fffdf8 !important;
    font-size: 16px;
    font-weight: 900;
    border: 1px solid #171512;
}

.studio-generate-btn:hover {
    background: var(--studio-action-dark) !important;
}

.studio-generate-btn .material-symbols-outlined {
    color: #fffdf8 !important;
}

.studio-output-icon {
    display: flex;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #dcebe7;
    color: var(--studio-action-dark);
}

.studio-output-icon .material-symbols-outlined {
    font-size: 24px !important;
}

.studio-output-body {
    flex: 1;
    min-width: 0;
}

.studio-output-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--studio-muted);
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.studio-output-meta strong {
    color: var(--studio-action);
}

.studio-output-hint {
    margin: 10px 0 0;
    color: var(--studio-muted);
    font-size: 13px;
}

.studio-progress-track {
    height: 7px;
    overflow: hidden;
    border-radius: 99px;
    background: #ede7dc;
}

.studio-progress-track > div,
#progress-bar {
    height: 100%;
    width: 0;
    border-radius: 99px;
    background: var(--studio-action) !important;
}

.studio-error-title {
    margin: 0;
    color: var(--studio-danger);
    font-weight: 800;
}

#error-info {
    color: var(--studio-muted);
    font-size: 13px;
}

.studio-empty-line {
    border: 1px dashed var(--studio-line-strong);
    border-radius: 8px;
    padding: 18px;
    color: var(--studio-muted);
    font-size: 13px;
    text-align: center;
}

@media (max-width: 1180px) {
    .studio-workspace {
        grid-template-columns: 1fr;
        grid-template-areas:
            "controls"
            "editor"
            "output";
    }

    .studio-control-rail {
        position: static;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .studio-control-rail {
        display: flex;
    }

    .studio-editor-topline {
        flex-direction: column;
        align-items: stretch;
    }

    .studio-mode-switch {
        width: 100%;
    }

    .studio-mode-switch button {
        flex: 1;
        justify-content: center;
    }

    .studio-textarea {
        min-height: 320px;
        font-size: 16px;
        padding: 20px;
    }

    .studio-output-panel {
        flex-direction: column;
    }
}

@media (max-width: 1023px) {
    body {
        overflow: hidden !important;
    }

    #voice-text {
        min-height: 220px;
    }
}

/* Final Audio Console override. Keep this block last so it wins legacy themes. */
:root {
    --studio-bg: #050607;
    --studio-panel: #101418;
    --studio-panel-soft: #0b0e11;
    --studio-panel-high: #171d22;
    --studio-ink: #f4f7f4;
    --studio-muted: #9aa59f;
    --studio-dim: #66716c;
    --studio-line: #263037;
    --studio-line-strong: #3a474f;
    --studio-action: #43f2c8;
    --studio-action-dark: #0da982;
    --studio-action-soft: rgba(67, 242, 200, 0.12);
    --studio-warn: #ffb84d;
    --studio-danger: #ff5c5c;
    --studio-radius: 14px;
    --studio-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
}

html,
body,
.bg-surface-dim,
.bg-background,
.bg-surface,
.bg-surface-container,
.bg-surface-container-low,
.bg-surface-container-high,
.bg-surface-container-highest,
.bg-surface-bright,
.bg-surface-container-lowest {
    background: var(--studio-bg) !important;
    color: var(--studio-ink) !important;
}

.aura-main-shell {
    background:
        linear-gradient(180deg, rgba(67, 242, 200, 0.08), transparent 34%),
        radial-gradient(circle at 12% 8%, rgba(231, 255, 90, 0.08), transparent 28%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 72px),
        var(--studio-bg) !important;
}

.glass-panel,
.glass-panel-3d,
.glass-card,
.panel,
#global-popup-modal,
#auth-modal > .relative,
#voice-picker-modal .relative {
    background: linear-gradient(180deg, rgba(23, 29, 34, 0.96), rgba(10, 13, 16, 0.98)) !important;
    border: 1px solid var(--studio-line) !important;
    border-radius: var(--studio-radius) !important;
    box-shadow: var(--studio-shadow) !important;
    color: var(--studio-ink) !important;
    backdrop-filter: none !important;
}

.text-on-surface,
.text-on-background,
.text-white {
    color: var(--studio-ink) !important;
}

.text-on-surface-variant,
.text-ink-muted,
.text-slate-400,
.text-gray-400 {
    color: var(--studio-muted) !important;
}

.text-primary,
.text-secondary,
.text-brand-400 {
    color: var(--studio-action) !important;
}

.border-white\/10,
.border-outline-variant\/20,
.border-outline-variant\/30,
.border-white\/5 {
    border-color: var(--studio-line) !important;
}

input,
textarea,
select,
.studio-textarea {
    background: #07090b !important;
    color: var(--studio-ink) !important;
    border-color: var(--studio-line) !important;
    border-radius: 12px !important;
}

input:focus,
textarea:focus,
select:focus,
.studio-textarea:focus {
    border-color: var(--studio-action) !important;
    box-shadow: 0 0 0 3px rgba(67, 242, 200, 0.12) !important;
}

input::placeholder,
textarea::placeholder {
    color: #5f6b66 !important;
}

.nav-link {
    border-radius: 12px;
    color: var(--studio-muted) !important;
    background: transparent !important;
    border: 1px solid transparent;
}

.nav-link:hover {
    background: #10161a !important;
    border-color: var(--studio-line) !important;
    color: var(--studio-ink) !important;
}

.nav-link.active {
    background: linear-gradient(135deg, rgba(67, 242, 200, 0.16), rgba(231, 255, 90, 0.10)) !important;
    color: var(--studio-action) !important;
    border: 1px solid rgba(67, 242, 200, 0.32) !important;
    border-right: 1px solid rgba(67, 242, 200, 0.32) !important;
    box-shadow: 0 14px 34px rgba(67, 242, 200, 0.08) !important;
}

.aura-sidebar,
aside[class*="w-[260px]"],
aside[class*="w-64"] {
    background: #07090b !important;
    border-right: 1px solid var(--studio-line) !important;
}

header,
.topbar,
nav {
    background: rgba(5, 6, 7, 0.84) !important;
    border-color: var(--studio-line) !important;
    backdrop-filter: blur(18px);
}

.studio-workspace {
    gap: 18px !important;
    max-width: 1480px;
}

.studio-editor-shell,
.studio-voice-panel,
.studio-settings-panel,
.studio-submit-panel,
.studio-output-panel {
    background: linear-gradient(180deg, var(--studio-panel-high), var(--studio-panel)) !important;
    border: 1px solid var(--studio-line) !important;
    border-radius: var(--studio-radius) !important;
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.34) !important;
    color: var(--studio-ink) !important;
}

.studio-editor-shell {
    min-height: min(680px, calc(100vh - 220px));
}

.studio-editor-topline,
.studio-editor-toolbar,
.studio-editor-footer,
.studio-section-head {
    border-color: var(--studio-line) !important;
}

.studio-editor-topline h2,
.studio-section-head h3 {
    color: var(--studio-ink) !important;
    letter-spacing: 0;
}

.studio-kicker {
    color: var(--studio-action) !important;
    letter-spacing: 0.16em;
}

.studio-mode-switch {
    background: #080b0d !important;
    border: 1px solid var(--studio-line) !important;
    border-radius: 12px !important;
}

.studio-mode-switch button.active,
.studio-mode-switch button.bg-primary-container {
    background: var(--studio-action) !important;
    color: #050607 !important;
    border-radius: 10px !important;
}

.studio-editor-tools button,
.studio-icon-action,
.studio-section-head button,
.studio-advanced-toggle,
#picker-load-more-btn {
    background: #0a0d10 !important;
    color: var(--studio-muted) !important;
    border: 1px solid var(--studio-line) !important;
    border-radius: 12px !important;
}

.studio-editor-tools button:hover,
.studio-icon-action:hover,
.studio-section-head button:hover,
.studio-advanced-toggle:hover,
#picker-load-more-btn:hover {
    background: var(--studio-action-soft) !important;
    color: var(--studio-action) !important;
    border-color: rgba(67, 242, 200, 0.36) !important;
}

.studio-textarea {
    min-height: 420px;
    font-size: 1.05rem !important;
    line-height: 1.75 !important;
}

.studio-editor-footer {
    background: #090c0f !important;
}

.studio-wave-strip span,
.waveform-bar {
    background: linear-gradient(180deg, var(--studio-action), #e7ff5a) !important;
    border-radius: 999px !important;
}

#char-count,
.studio-credit-preview,
.studio-output-meta,
.studio-output-hint,
.studio-submit-breakdown span,
.studio-voice-copy p {
    color: var(--studio-muted) !important;
}

.studio-credit-preview strong,
.studio-output-meta strong,
.studio-range-row strong,
.studio-voice-copy span {
    color: var(--studio-action) !important;
}

.studio-voice-card,
.studio-submit-breakdown > div {
    background: #090c0f !important;
    border: 1px solid var(--studio-line) !important;
    border-radius: 12px !important;
}

.studio-voice-card:hover {
    background: #111820 !important;
    border-color: rgba(67, 242, 200, 0.34) !important;
}

.studio-voice-avatar,
.studio-output-icon {
    background: linear-gradient(135deg, #43f2c8, #e7ff5a) !important;
    color: #050607 !important;
    border-radius: 12px !important;
}

.studio-range-row {
    border-color: var(--studio-line) !important;
}

.studio-range-row input {
    accent-color: var(--studio-action) !important;
}

.studio-generate-btn,
.bg-brand-600,
.bg-primary,
button[type="submit"] {
    background: linear-gradient(135deg, #43f2c8, #e7ff5a) !important;
    color: #050607 !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: 0 16px 38px rgba(67, 242, 200, 0.20) !important;
}

.studio-generate-btn:hover,
.bg-brand-600:hover,
.bg-primary:hover,
button[type="submit"]:hover {
    filter: brightness(1.04);
    transform: translateY(-1px);
}

.studio-progress-track {
    background: #07090b !important;
    border: 1px solid var(--studio-line);
}

.studio-progress-track > div,
#progress-bar {
    background: linear-gradient(90deg, #43f2c8, #e7ff5a) !important;
}

.picker-filter-btn {
    background: #0a0d10 !important;
    color: var(--studio-muted) !important;
    border-color: var(--studio-line) !important;
    border-radius: 12px !important;
}

.picker-filter-btn[data-active="true"],
.picker-filter-btn.bg-secondary\/10,
.picker-filter-btn.border-secondary\/50 {
    background: var(--studio-action-soft) !important;
    color: var(--studio-action) !important;
    border-color: rgba(67, 242, 200, 0.36) !important;
}

.toast {
    border-radius: 12px !important;
}

/* TTS reference page: keep this last so the imported HTML wins legacy app styles. */
body.tts-reference-mode {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100vh;
    overflow-y: auto !important;
    overflow-x: hidden;
    overscroll-behavior: none;
    background-color: #0c0e14 !important;
    background-image:
        radial-gradient(circle at 30% 20%, rgba(0, 242, 255, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.08) 0%, transparent 40%) !important;
    color: #e2e1eb !important;
}

body.tts-reference-mode .glass-panel {
    background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%) !important;
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border: 1px solid rgba(255,255,255,0.05) !important;
    box-shadow: 0 30px 60px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1) !important;
    color: #e2e1eb !important;
}

body.tts-reference-mode #page-tts,
body.tts-reference-mode #page-library,
body.tts-reference-mode #page-history,
body.tts-reference-mode #page-clone,
body.tts-reference-mode #page-podcast {
    width: 100%;
    min-height: 100vh;
    background: transparent !important;
}

body.tts-reference-mode #page-tts > main {
    background: transparent !important;
}

body.tts-reference-mode .voice-shell-sidebar {
    top: 24px !important;
    left: 24px !important;
    bottom: 24px !important;
    width: 112px !important;
    align-items: center !important;
    gap: 18px !important;
    z-index: 80 !important;
    pointer-events: auto !important;
}

body.tts-reference-mode .voice-shell-logo {
    width: 112px !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    text-align: center !important;
}

body.tts-reference-mode .voice-shell-logo-title {
    font-size: 14px !important;
    line-height: 1.1 !important;
}

body.tts-reference-mode .voice-shell-logo-subtitle {
    font-size: 7px !important;
    letter-spacing: 0.22em !important;
}

body.tts-reference-mode .voice-shell-main {
    width: calc(100vw - 184px) !important;
    max-width: none !important;
    margin: 0 32px 0 152px !important;
    padding: 112px 0 32px 0 !important;
}

body.tts-reference-mode nav {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.tts-reference-mode .bg-surface-container-high\/80,
body.tts-reference-mode .bg-surface-container-lowest,
body.tts-reference-mode .bg-surface-container-highest,
body.tts-reference-mode .bg-surface-bright {
    background: rgba(30, 31, 38, 0.8) !important;
}

body.tts-reference-mode .text-on-surface,
body.tts-reference-mode .text-white {
    color: #e2e1eb !important;
}

body.tts-reference-mode .text-on-surface-variant,
body.tts-reference-mode .text-slate-400 {
    color: #b9cacb !important;
}

body.tts-reference-mode .pulse-border {
    position: relative;
}

body.tts-reference-mode .pulse-border::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(45deg, transparent, rgba(0, 242, 255, 0.5), transparent, rgba(139, 92, 246, 0.5), transparent);
    background-size: 200% 200%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: border-flow 4s linear infinite;
    opacity: 0.5;
    pointer-events: none;
}

body.tts-reference-mode .nav-node {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

body.tts-reference-mode .nav-node:hover {
    transform: scale(1.1) translateZ(20px);
    filter: drop-shadow(0 0 15px rgba(0, 242, 255, 0.4));
}

body.tts-reference-mode .voice-shell-nav-items {
    align-items: center;
    width: 100%;
    gap: 12px !important;
    margin-top: 10px !important;
}

body.tts-reference-mode .voice-shell-nav-item {
    width: 100% !important;
    min-height: 70px;
    justify-content: center;
    padding: 6px 4px;
    border-radius: 18px;
    text-decoration: none;
    pointer-events: auto !important;
    transition: color 0.2s ease, opacity 0.2s ease, background 0.2s ease;
}

body.tts-reference-mode .voice-shell-nav-item:hover {
    background: rgba(255, 255, 255, 0.03);
}

body.tts-reference-mode .voice-shell-nav-item:hover {
    color: #00f2ff !important;
}

body.tts-reference-mode .voice-shell-nav-item > span:last-child {
    display: block;
    max-width: 104px;
    overflow-wrap: normal;
    text-shadow: 0 0 10px rgba(0, 242, 255, 0.14);
}

@media (max-width: 900px) {
    body.tts-reference-mode .voice-shell-sidebar {
        left: 12px !important;
        width: 88px !important;
    }

    body.tts-reference-mode .voice-shell-logo {
        width: 88px !important;
    }

    body.tts-reference-mode .voice-shell-logo-title {
        font-size: 12px !important;
    }

    body.tts-reference-mode .voice-shell-nav-item > span:last-child {
        max-width: 80px;
        font-size: 8px !important;
    }

    body.tts-reference-mode .voice-shell-main {
        width: calc(100vw - 124px) !important;
        margin-left: 104px !important;
        margin-right: 20px !important;
        padding-top: 104px !important;
    }
}

body.tts-reference-mode textarea,
body.tts-reference-mode input,
body.tts-reference-mode select {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

body.tts-reference-mode #page-library select,
body.tts-reference-mode #page-history input,
body.tts-reference-mode #page-clone input[type="file"] + * {
    border-color: rgba(255,255,255,0.05) !important;
    border-radius: 9999px !important;
}

body.tts-reference-mode #page-library select {
    background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%) !important;
    color: #e2e1eb !important;
    box-shadow: 0 30px 60px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1) !important;
}

#auth-modal {
    color: #e8f7f7 !important;
}

#auth-modal > .relative {
    max-height: none !important;
    overflow: visible !important;
    background:
        radial-gradient(circle at 14% 0%, rgba(0, 242, 255, 0.12), transparent 28%),
        radial-gradient(circle at 90% 100%, rgba(139, 92, 246, 0.10), transparent 30%),
        linear-gradient(180deg, rgba(15, 20, 25, 0.98), rgba(5, 8, 11, 0.99)) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 28px !important;
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.68), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

#auth-modal form .relative,
#auth-modal form .group {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

#auth-modal input {
    background: rgba(5, 9, 12, 0.92) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 16px !important;
    color: #f3ffff !important;
    caret-color: #00f2ff !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

#auth-modal input:focus {
    border-color: rgba(0, 242, 255, 0.55) !important;
    box-shadow: 0 0 0 3px rgba(0, 242, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

#auth-modal input::placeholder {
    color: rgba(185, 202, 203, 0.48) !important;
}

#auth-modal label {
    color: rgba(0, 242, 255, 0.78) !important;
}

#auth-modal h2,
#auth-modal .text-on-background,
#auth-modal .text-on-surface,
#auth-modal .text-white {
    color: #f2fbfb !important;
}

#auth-modal p,
#auth-modal .text-on-surface-variant,
#auth-modal .text-outline,
#auth-modal .text-slate-400 {
    color: #a9bdbe !important;
}

#auth-modal .material-symbols-outlined {
    color: #7ddfe7 !important;
}

#auth-modal #tab-login,
#auth-modal #tab-register {
    border: 0 !important;
    color: #f2fbfb !important;
    background: transparent !important;
    box-shadow: none !important;
}

#auth-modal #auth-tab-switcher {
    background: rgba(3, 7, 10, 0.92) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 18px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

#auth-modal #tab-login,
#auth-modal #tab-register,
#auth-modal button[onclick="startGoogleOAuth()"] {
    border-radius: 14px !important;
}

#auth-modal #tab-login,
#auth-modal #tab-register {
    min-height: 44px;
}

#auth-modal #tab-login.text-on-primary-container,
#auth-modal #tab-register.text-on-primary-container {
    color: #041414 !important;
    background: linear-gradient(135deg, #00f2ff, #43f2c8) !important;
    box-shadow: 0 12px 28px rgba(0, 242, 255, 0.22) !important;
}

#auth-modal input:-webkit-autofill,
#auth-modal input:-webkit-autofill:hover,
#auth-modal input:-webkit-autofill:focus,
#auth-modal input:-webkit-autofill:active {
    -webkit-text-fill-color: #f3ffff !important;
    caret-color: #00f2ff !important;
    box-shadow: 0 0 0 1000px rgba(5, 9, 12, 0.98) inset !important;
    transition: background-color 9999s ease-out 0s !important;
}

#auth-modal button[onclick="startGoogleOAuth()"] {
    background: rgba(255, 255, 255, 0.045) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #eefafa !important;
}

#auth-modal button[onclick="startGoogleOAuth()"]:hover {
    background: rgba(255, 255, 255, 0.075) !important;
}

#auth-modal #login-btn,
#auth-modal #reg-btn,
#auth-modal #forgot-password-request-btn,
#auth-modal #forgot-password-confirm-btn,
#auth-modal #forgot-password-update-btn {
    color: #041414 !important;
    background: linear-gradient(135deg, #00f2ff, #43f2c8) !important;
    border: 0 !important;
    box-shadow: 0 16px 34px rgba(0, 242, 255, 0.22) !important;
}

body.tts-reference-mode #page-library option {
    background: #0c0e14;
    color: #e2e1eb;
}

body.tts-reference-mode #voice-text {
    min-height: 420px !important;
}

body.tts-reference-mode #selected-voice-preview {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #e2e1eb !important;
}

body.tts-reference-mode #result-area,
body.tts-reference-mode #selected-voice-preview > div:last-child {
    background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%) !important;
    color: #e2e1eb !important;
}

body.tts-reference-mode #selected-voice-preview > div:last-child,
body.tts-reference-mode #voice-picker-modal .relative.glass-panel {
    border-color: rgba(255,255,255,0.05) !important;
    box-shadow: 0 30px 60px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1) !important;
}

body.tts-reference-mode #generate-btn {
    border: 0 !important;
    box-shadow: none !important;
}

body.tts-reference-mode audio {
    filter: invert(1) hue-rotate(180deg);
}

/* The account menu belongs to the dark studio shell on desktop and mobile. */
#topbar-profile-menu {
    background: rgba(7, 11, 16, 0.98) !important;
    color: #e2e1eb !important;
    border-color: rgba(0, 242, 255, 0.18) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.58) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
}

#topbar-profile-menu > div:first-child {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

#topbar-profile-menu #profile-menu-email {
    color: #f3ffff !important;
}

#topbar-profile-menu #profile-menu-plan {
    color: #96a6ad !important;
}

#topbar-profile-menu button {
    color: #d8e5e8 !important;
}

#topbar-profile-menu button:hover {
    background: rgba(0, 242, 255, 0.07) !important;
    color: #f3ffff !important;
}

@keyframes border-flow {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}