:root {
    --bg-main: #060f23;
    --bg-deep: #030915;
    --bg-soft: #0a1a37;
    --ink-1: #e6f3ff;
    --ink-2: #92afd4;
    --primary: #2e7dff;
    --primary-2: #2acbff;
    --accent: #58e5ff;
    --success: #26c281;
    --danger: #df4f6f;
    --panel: rgba(9, 24, 52, 0.7);
    --panel-strong: rgba(8, 21, 46, 0.86);
    --panel-border: rgba(93, 157, 255, 0.22);
    --shadow: 0 24px 70px rgba(2, 9, 22, 0.45);
    --radius-xl: 20px;
    --radius-md: 14px;
    --transition: 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    --generation-progress: 0;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    font-family: "Outfit", "Noto Sans SC", "Microsoft YaHei", sans-serif;
    color: var(--ink-1);
    background:
        radial-gradient(circle at 12% 10%, rgba(35, 98, 209, 0.42), transparent 36%),
        radial-gradient(circle at 86% 8%, rgba(16, 174, 228, 0.26), transparent 32%),
        linear-gradient(140deg, #061229, #030815 56%, #091833);
    position: relative;
    overflow-x: hidden;
}

.bg-noise,
.bg-grid,
.music-lines {
    position: fixed;
    inset: 0;
    pointer-events: none;
}

.bg-noise {
    z-index: -4;
    background-image: radial-gradient(rgba(141, 195, 255, 0.06) 0.6px, transparent 0.6px);
    background-size: 3px 3px;
}

.bg-grid {
    z-index: -3;
    background-image:
        linear-gradient(to right, rgba(80, 136, 214, 0.14) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(80, 136, 214, 0.14) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(circle at 50% 46%, black 42%, transparent 100%);
    opacity: 0.25;
}

.music-lines {
    z-index: -2;
    opacity: 0.62;
}

.music-lines::before,
.music-lines::after {
    content: "";
    position: absolute;
    inset: 0;
    background-repeat: repeat-x;
    background-size: 1900px 220px;
    mix-blend-mode: screen;
    animation: waveDrift 24s linear infinite;
}

.music-lines::before {
    top: 16%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1900' height='220' viewBox='0 0 1900 220'%3E%3Cpath d='M0 112 C55 40 108 186 162 112 C214 40 268 186 322 112 C374 40 428 186 482 112 C534 40 588 186 642 112 C694 40 748 186 802 112 C854 40 908 186 962 112 C1014 40 1068 186 1122 112 C1174 40 1228 186 1282 112 C1334 40 1388 186 1442 112 C1494 40 1548 186 1602 112 C1654 40 1708 186 1762 112 C1814 40 1868 186 1900 112' fill='none' stroke='%2351cfff' stroke-width='1.5' stroke-opacity='0.52'/%3E%3C/svg%3E");
    animation-duration: 32s;
}

.music-lines::after {
    top: 58%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1900' height='220' viewBox='0 0 1900 220'%3E%3Cpath d='M0 110 C36 56 72 164 106 110 C140 56 176 164 210 110 C244 56 280 164 314 110 C348 56 384 164 418 110 C452 56 488 164 522 110 C556 56 592 164 626 110 C660 56 696 164 730 110 C764 56 800 164 834 110 C868 56 904 164 938 110 C972 56 1008 164 1042 110 C1076 56 1112 164 1146 110 C1180 56 1216 164 1250 110 C1284 56 1320 164 1354 110 C1388 56 1424 164 1458 110 C1492 56 1528 164 1562 110 C1596 56 1632 164 1666 110 C1700 56 1736 164 1770 110 C1804 56 1840 164 1874 110 C1888 86 1894 74 1900 68' fill='none' stroke='%23358bff' stroke-width='1.25' stroke-opacity='0.42'/%3E%3C/svg%3E");
    animation-duration: 20s;
    animation-direction: reverse;
}

.auth-glow,
.studio-glow {
    position: fixed;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(36px);
    z-index: -1;
    animation: glowFloat 8s ease-in-out infinite;
}

.glow-a {
    left: -160px;
    top: -180px;
    background: rgba(52, 126, 255, 0.38);
}

.glow-b {
    right: -120px;
    bottom: -170px;
    background: rgba(50, 203, 255, 0.24);
}

.glow-c {
    left: -140px;
    top: 16%;
    background: rgba(48, 121, 255, 0.24);
}

.glow-d {
    right: -140px;
    bottom: 4%;
    background: rgba(51, 206, 255, 0.22);
}

.btn {
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 10px 14px;
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: transform var(--transition), box-shadow var(--transition), opacity 0.22s ease, border-color var(--transition);
}

.btn:hover:not(:disabled) {
    transform: translateY(-1px);
}

.btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
    box-shadow: 0 14px 32px rgba(23, 121, 249, 0.34);
}

.btn-danger {
    background: linear-gradient(130deg, var(--danger), #c73f61);
}

.btn-subtle {
    background: linear-gradient(130deg, #2f7df4, #2d97ff);
}

.btn-download {
    background: linear-gradient(130deg, var(--success), #20b272);
}

.btn-ghost {
    border-color: rgba(96, 162, 255, 0.36);
    background: rgba(13, 33, 70, 0.84);
    color: #d8ebff;
}

.auth-page {
    padding: 34px 20px;
}

.auth-shell {
    max-width: 1240px;
    margin: 0 auto;
    min-height: calc(100vh - 68px);
    display: grid;
    grid-template-columns: 1.16fr 0.84fr;
    gap: 18px;
}

.auth-hero,
.auth-panel,
.studio-card,
.studio-topbar {
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-xl);
    background: var(--panel);
    box-shadow: var(--shadow);
    backdrop-filter: blur(14px);
}

.auth-hero {
    padding: 42px;
    display: grid;
    align-content: center;
    gap: 14px;
    background:
        linear-gradient(145deg, rgba(11, 32, 71, 0.92), rgba(14, 45, 92, 0.8)),
        radial-gradient(circle at 72% 18%, rgba(87, 224, 255, 0.3), transparent 36%);
    position: relative;
    overflow: hidden;
}

.auth-hero::after {
    content: "";
    position: absolute;
    inset: auto -30% -36% -20%;
    height: 250px;
    background: radial-gradient(ellipse at center, rgba(78, 167, 255, 0.3), transparent 70%);
    opacity: 0.7;
}

.auth-kicker {
    margin: 0;
    letter-spacing: 0.1em;
    font-size: clamp(30px, 5.1vw, 56px);
    font-weight: 800;
    line-height: 1;
    position: relative;
    z-index: 1;
}

.brand-name {
    position: relative;
    display: inline-block;
    color: #ffffff;
    background: linear-gradient(96deg, #f4fbff 0%, #7bc4ff 34%, #66f0ff 68%, #d8f8ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow:
        0 0 22px rgba(77, 172, 255, 0.52),
        0 0 42px rgba(78, 222, 255, 0.28);
    filter: drop-shadow(0 0 14px rgba(70, 176, 255, 0.42));
}

.brand-name::after {
    content: "";
    position: absolute;
    left: 6%;
    right: 6%;
    bottom: -7px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(89, 153, 255, 0), rgba(89, 153, 255, 0.86), rgba(101, 241, 255, 0.86), rgba(89, 153, 255, 0));
}

.brand-name-inline {
    font-weight: 700;
    letter-spacing: 0.04em;
}

.brand-name-inline::after {
    bottom: -4px;
    height: 1.5px;
}

.auth-hero h1 {
    margin: 0;
    font-size: clamp(32px, 4.2vw, 50px);
    line-height: 1.08;
    color: #f2f8ff;
}

.auth-hero p {
    margin: 0;
    color: rgba(208, 228, 253, 0.9);
    line-height: 1.65;
}

.auth-hero ul {
    margin: 8px 0 0;
    padding-left: 18px;
    display: grid;
    gap: 8px;
    color: rgba(208, 227, 255, 0.92);
}

.auth-hero-foot {
    margin-top: 14px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    position: relative;
    z-index: 1;
}

.auth-hero-foot span {
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(166, 202, 255, 0.82);
}

.auth-hero-foot strong {
    font-size: 14px;
    color: rgba(213, 236, 255, 0.95);
}

.auth-panel {
    padding: 28px;
    display: grid;
    gap: 14px;
    align-content: center;
    background: linear-gradient(155deg, rgba(8, 25, 55, 0.88), rgba(10, 33, 72, 0.76));
}

.auth-panel-head h2 {
    margin: 0;
    font-size: 25px;
    letter-spacing: 0.01em;
}

.auth-panel-head p {
    margin: 6px 0 0;
    font-size: 13px;
    color: #8fb1dd;
}

.auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: 12px;
    border: 1px solid rgba(93, 158, 255, 0.24);
    padding: 4px;
    background: rgba(7, 25, 56, 0.72);
}

.auth-tab {
    border: none;
    background: transparent;
    border-radius: 9px;
    padding: 10px 8px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: #a2c2e8;
    cursor: pointer;
}

.auth-tab.active {
    background: linear-gradient(130deg, rgba(46, 125, 255, 0.92), rgba(42, 205, 255, 0.92));
    color: #fff;
    box-shadow: 0 10px 20px rgba(30, 124, 240, 0.3);
}

.auth-form {
    display: none;
    gap: 8px;
}

.auth-form.active {
    display: grid;
}

.auth-form label {
    font-size: 13px;
    font-weight: 600;
    color: #b6d5ff;
}

.auth-form input {
    width: 100%;
    border-radius: 10px;
    border: 1px solid rgba(93, 152, 236, 0.28);
    background: rgba(4, 19, 45, 0.8);
    color: #e7f2ff;
    padding: 10px 12px;
    font: inherit;
}

.auth-form input::placeholder {
    color: #7c9ac2;
}

.auth-form input:focus {
    outline: none;
    border-color: rgba(79, 180, 255, 0.72);
    box-shadow: 0 0 0 3px rgba(46, 126, 255, 0.2);
}

.auth-form button {
    margin-top: 8px;
}

.auth-status {
    min-height: 20px;
    font-size: 13px;
    color: #9ebee6;
}

.auth-status.success {
    color: #70ebb4;
}

.auth-status.error {
    color: #ff7b98;
}

.studio-page {
    padding: 22px 16px 30px;
}

.studio-shell {
    max-width: 1340px;
    margin: 0 auto;
    display: grid;
    gap: 14px;
}

.studio-topbar {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: linear-gradient(125deg, rgba(8, 25, 55, 0.86), rgba(10, 34, 74, 0.75));
}

.brand-block {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 34%, #8deeff, #2b9dff 70%);
    box-shadow: 0 0 0 6px rgba(67, 154, 255, 0.2), 0 0 24px rgba(67, 154, 255, 0.65);
}

.top-kicker {
    margin: 0;
    font-size: clamp(19px, 2.2vw, 30px);
    letter-spacing: 0.08em;
    line-height: 1.05;
}

.brand-name-top {
    font-weight: 760;
}

.brand-name-top::after {
    bottom: -5px;
}

.studio-topbar h1 {
    margin: 4px 0 0;
    font-size: clamp(23px, 3vw, 32px);
    line-height: 1.2;
}

.user-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 11px;
    border: 1px solid rgba(82, 149, 243, 0.3);
    background: rgba(7, 24, 52, 0.72);
    padding: 8px;
}

.user-badge span {
    font-size: 13px;
    color: #cde4ff;
    font-weight: 600;
}

.studio-grid {
    display: grid;
    grid-template-columns: minmax(370px, 0.95fr) minmax(420px, 1.05fr);
    gap: 14px;
}

.studio-card {
    padding: 18px;
    background: linear-gradient(150deg, rgba(8, 24, 53, 0.86), rgba(8, 20, 42, 0.82));
}

.section-title h2 {
    margin: 0;
    font-size: 20px;
}

.section-title p {
    margin: 6px 0 0;
    color: #8eadcf;
    font-size: 13px;
}

.field-group {
    margin-top: 12px;
}

.field-group > label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 7px;
    color: #c3dcff;
}

.upload-surface {
    border-radius: var(--radius-md);
    border: 1px dashed rgba(100, 159, 240, 0.42);
    background: linear-gradient(145deg, rgba(10, 33, 73, 0.76), rgba(9, 26, 59, 0.7));
    padding: 10px;
    display: grid;
    grid-template-columns: 102px 1fr;
    gap: 10px;
    cursor: pointer;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.upload-surface:hover {
    transform: translateY(-1px);
    border-color: rgba(72, 190, 255, 0.68);
    box-shadow: 0 14px 28px rgba(7, 23, 52, 0.55);
}

.upload-thumb {
    width: 102px;
    height: 80px;
    border-radius: 10px;
    border: 1px solid rgba(94, 151, 231, 0.22);
    background: linear-gradient(130deg, #0a2552, #0c2e66);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #a5c8f2;
    overflow: hidden;
}

.upload-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.upload-desc {
    display: grid;
    gap: 4px;
    align-content: center;
}

.upload-desc strong {
    font-size: 13px;
}

.upload-desc span {
    font-size: 12px;
    color: #8db0d7;
    line-height: 1.4;
    word-break: break-all;
}

input[type="file"] {
    display: none;
}

select,
input[type="number"],
textarea,
input[type="text"],
input[type="password"] {
    width: 100%;
    border-radius: 10px;
    border: 1px solid rgba(95, 152, 232, 0.28);
    background: rgba(5, 21, 48, 0.84);
    padding: 10px 12px;
    font: inherit;
    color: #e2f0ff;
}

textarea {
    resize: vertical;
}

select:focus,
textarea:focus,
input:focus {
    outline: none;
    border-color: rgba(80, 185, 255, 0.72);
    box-shadow: 0 0 0 3px rgba(52, 136, 255, 0.2);
}

.fixed-metrics {
    margin-top: 14px;
}

.metrics-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(110px, 1fr));
    gap: 8px;
}

.metric-pill {
    border-radius: 11px;
    border: 1px solid rgba(82, 146, 236, 0.24);
    background: rgba(7, 24, 52, 0.72);
    padding: 8px 10px;
    display: grid;
    gap: 2px;
}

.metric-pill span {
    color: #86a8cf;
    font-size: 11px;
}

.metric-pill strong {
    font-size: 14px;
    color: #def0ff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.optional-controls {
    margin-top: 12px;
}

.toggle-line {
    margin-top: 12px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 12px;
    color: #a6c6ea;
}

.toggle-line label {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    padding: 8px;
    border-radius: 9px;
    border: 1px solid rgba(80, 144, 234, 0.24);
    background: rgba(7, 24, 52, 0.7);
}

.action-row {
    margin-top: 14px;
    display: flex;
    gap: 10px;
}

.action-row .btn-primary {
    flex: 1;
}

.progress-box {
    margin-top: 12px;
    border-radius: 12px;
    border: 1px solid rgba(73, 137, 229, 0.28);
    background: rgba(8, 23, 51, 0.78);
    padding: 10px;
}

.progress-track {
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: rgba(73, 108, 152, 0.6);
    overflow: hidden;
}

.progress-fill {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2f7ff4, #2db0ff, #5dd5b7);
    transition: width var(--transition);
    box-shadow: 0 0 18px rgba(60, 176, 255, 0.6);
}

.progress-box p {
    margin: 8px 0 0;
    font-size: 13px;
    color: #9dbde2;
}

.video-stage {
    margin-top: 12px;
    min-height: 330px;
    border-radius: 16px;
    border: 1px solid rgba(76, 139, 232, 0.34);
    background:
        radial-gradient(circle at 50% 15%, rgba(45, 103, 189, 0.46), rgba(5, 15, 32, 0.96)),
        linear-gradient(160deg, rgba(4, 17, 38, 0.95), rgba(7, 28, 56, 0.92));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.stage-spectrum {
    position: absolute;
    inset: auto 0 0;
    height: 44%;
    background:
        repeating-linear-gradient(
            90deg,
            rgba(70, 167, 255, 0.8) 0,
            rgba(70, 167, 255, 0.8) 2px,
            transparent 2px,
            transparent 9px
        );
    opacity: calc(0.18 + var(--generation-progress) * 0.45);
    transform-origin: bottom;
    transform: scaleY(calc(0.66 + var(--generation-progress) * 0.45));
    transition: opacity var(--transition), transform var(--transition);
    filter: drop-shadow(0 0 12px rgba(61, 190, 255, 0.55));
    mask-image: linear-gradient(to top, black 10%, transparent 92%);
    animation: spectrumPulse 2s ease-in-out infinite;
}

#generatedVideo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000;
    position: relative;
    z-index: 2;
}

.video-placeholder {
    color: rgba(220, 238, 255, 0.9);
    font-size: 15px;
    text-align: center;
    line-height: 1.6;
    padding: 0 24px;
    position: relative;
    z-index: 3;
}

.result-actions {
    margin-top: 10px;
    border-radius: 12px;
    border: 1px solid rgba(76, 139, 232, 0.28);
    background: rgba(8, 24, 52, 0.86);
    padding: 10px;
    display: none;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
    transform: translateY(6px);
    opacity: 0;
    transition: opacity var(--transition), transform var(--transition);
}

body.is-complete .result-actions {
    transform: translateY(0);
    opacity: 1;
}

.result-actions p {
    margin: 0;
    font-size: 12px;
    color: #a4c3e6;
}

.result-buttons {
    display: flex;
    gap: 8px;
}

.frame-info {
    margin: 10px 0 0;
    min-height: 16px;
    font-size: 12px;
    color: #98b8dd;
}

.status-list {
    margin-top: 8px;
    display: grid;
    gap: 7px;
}

.status-item {
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 12px;
    border: 1px solid transparent;
}

.status-info {
    background: rgba(39, 98, 176, 0.26);
    border-color: rgba(63, 148, 255, 0.33);
    color: #badaff;
}

.status-success {
    background: rgba(21, 121, 88, 0.27);
    border-color: rgba(50, 196, 130, 0.36);
    color: #8ee9c1;
}

.status-error {
    background: rgba(165, 47, 73, 0.28);
    border-color: rgba(221, 89, 119, 0.38);
    color: #ffb3c5;
}

.history-card {
    padding: 16px 18px;
}

.history-list {
    margin-top: 10px;
    display: grid;
    gap: 10px;
}

.history-item {
    border-radius: 12px;
    border: 1px solid rgba(80, 145, 236, 0.25);
    background: linear-gradient(120deg, rgba(8, 24, 53, 0.78), rgba(6, 20, 44, 0.74));
    padding: 10px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.history-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, #3e97ff, #4ad8ff);
}

.history-item h4 {
    margin: 0;
    padding-left: 10px;
    font-size: 14px;
}

.history-item p {
    margin: 4px 0 0;
    padding-left: 10px;
    font-size: 12px;
    color: #90b0d5;
}

.history-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.history-actions button {
    border: 1px solid rgba(87, 152, 243, 0.34);
    background: rgba(8, 28, 61, 0.84);
    border-radius: 9px;
    padding: 6px 10px;
    font: inherit;
    font-size: 12px;
    color: #d8ebff;
    cursor: pointer;
    transition: background var(--transition), transform var(--transition);
}

.history-actions button:hover {
    transform: translateY(-1px);
    background: rgba(19, 51, 102, 0.9);
}

.history-empty {
    margin: 12px 0 0;
    font-size: 13px;
    color: #8aacd3;
}

body.is-generating .music-lines {
    opacity: 0.85;
}

body.is-generating .music-lines::before,
body.is-generating .music-lines::after {
    animation-duration: 14s;
}

body.wave-active .stage-spectrum {
    opacity: calc(0.28 + var(--generation-progress) * 0.56);
}

@keyframes waveDrift {
    from {
        background-position-x: 0;
    }
    to {
        background-position-x: -1900px;
    }
}

@keyframes glowFloat {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(12px);
    }
}

@keyframes spectrumPulse {
    0%,
    100% {
        filter: drop-shadow(0 0 10px rgba(66, 185, 255, 0.48));
    }
    50% {
        filter: drop-shadow(0 0 18px rgba(66, 205, 255, 0.74));
    }
}

@media (max-width: 1120px) {
    .auth-shell,
    .studio-grid {
        grid-template-columns: 1fr;
    }

    .auth-hero {
        min-height: 340px;
    }

    .video-stage {
        min-height: 280px;
    }
}

@media (max-width: 760px) {
    .auth-page,
    .studio-page {
        padding: 12px 10px 20px;
    }

    .auth-hero,
    .auth-panel,
    .studio-card,
    .studio-topbar {
        border-radius: 16px;
    }

    .auth-hero,
    .auth-panel,
    .studio-card {
        padding: 14px;
    }

    .upload-surface {
        grid-template-columns: 1fr;
    }

    .upload-thumb {
        width: 100%;
        height: 130px;
    }

    .metrics-row {
        grid-template-columns: 1fr;
    }

    .toggle-line,
    .action-row,
    .result-buttons {
        flex-direction: column;
    }

    .result-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .history-item {
        grid-template-columns: 1fr;
    }

    .history-actions {
        justify-content: flex-start;
    }

    .studio-topbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .auth-kicker {
        font-size: clamp(24px, 10vw, 40px);
        letter-spacing: 0.08em;
    }

    .top-kicker {
        font-size: clamp(18px, 6.5vw, 26px);
    }

    .music-lines::before,
    .music-lines::after {
        background-size: 1200px 180px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .music-lines,
    .stage-spectrum {
        opacity: 0.2;
    }
}
/* Auth dual login additions */
.auth-mode-tabs {
    margin-top: 4px;
}

.verify-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
}

.verify-row .btn {
    margin-top: 0;
    min-width: 116px;
    white-space: nowrap;
}

.demo-hint {
    margin: 2px 0 0;
    font-size: 12px;
    color: #8eb4e3;
}

.btn-disabled {
    margin-top: 8px;
    background: rgba(108, 136, 174, 0.28);
    border-color: rgba(126, 155, 196, 0.24);
    color: #a4bddf;
    cursor: not-allowed;
}

/* Lite studio queue page */
.studio-shell-lite {
    max-width: 980px;
}

.queue-card {
    max-width: 980px;
    margin: 0 auto;
}

.queue-status-box {
    margin-top: 14px;
    border: 1px solid rgba(76, 139, 232, 0.28);
    border-radius: 12px;
    background: rgba(8, 24, 52, 0.82);
    padding: 12px;
}

.queue-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(120px, 1fr));
    gap: 8px;
}

.queue-hint {
    margin: 10px 0 0;
    font-size: 13px;
    color: #a4c3e6;
}

@media (max-width: 760px) {
    .verify-row {
        grid-template-columns: 1fr;
    }

    .queue-metrics {
        grid-template-columns: 1fr;
    }
}