.karaoke-layout {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 16px;
        }
        .karaoke-search-side,
        .karaoke-player-side {
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .karaoke-search-row {
            display: flex;
            gap: 10px;
            align-items: center;
        }
        #karaoke-search-input {
            flex: 1 1 auto;
            min-width: 0;
            height: 46px;
            padding: 0 14px;
            border-radius: var(--radius-control);
            border: 1px solid rgba(148,163,184,.22);
            background: var(--input-bg);
            color: var(--text-primary);
        }
        .karaoke-inline-status {
            min-height: 18px;
            font-size: 0.82rem;
            color: var(--text-secondary);
        }
        .karaoke-results,
        .karaoke-lyrics-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
            min-height: 120px;
            overflow: auto;
            padding-right: 4px;
        }
        .karaoke-results {
            height: var(--karaoke-results-height);
            min-height: var(--karaoke-results-height);
            max-height: var(--karaoke-results-height);
            padding-right: 6px;
        }
        .karaoke-empty {
            padding: 14px;
            border-radius: 14px;
            border: 1px dashed rgba(148,163,184,.24);
            background: rgba(148,163,184,.08);
            color: var(--text-secondary);
            font-size: 0.84rem;
            line-height: 1.7;
            text-align: center;
        }
        .karaoke-rank-picker-shell {
            position: relative;
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
        }
        .karaoke-rank-trigger {
            min-width: 132px;
        }
        .karaoke-rank-trigger.is-active {
            border-color: var(--accent-outline);
            color: var(--accent);
            box-shadow: 0 14px 28px rgba(var(--accent-rgb), .12);
        }
        .karaoke-rank-panel {
            position: absolute;
            left: 0;
            top: calc(100% + 12px);
            z-index: 48;
            width: min(420px, calc(100vw - 52px));
            max-height: min(460px, calc(100vh - 180px));
            padding: 14px;
            border-radius: 22px;
            border: 1px solid rgba(148,163,184,.18);
            background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.98));
            box-shadow: 0 26px 54px rgba(15,23,42,.16);
            display: flex;
            flex-direction: column;
            gap: 12px;
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
        }
        .karaoke-rank-panel-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }
        .karaoke-rank-panel-head strong {
            color: var(--text-primary);
            font-size: 0.94rem;
        }
        .karaoke-rank-status {
            min-height: 18px;
        }
        .karaoke-rank-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
            max-height: min(320px, calc(100vh - 280px));
            overflow: auto;
            padding-right: 4px;
            scrollbar-width: thin;
            scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
        }
        .karaoke-rank-list::-webkit-scrollbar {
            width: var(--scrollbar-size);
        }
        .karaoke-rank-list::-webkit-scrollbar-track {
            background: var(--scrollbar-track);
            border-radius: 999px;
        }
        .karaoke-rank-list::-webkit-scrollbar-thumb {
            background: var(--scrollbar-thumb);
            border: 2px solid transparent;
            border-radius: 999px;
            background-clip: padding-box;
        }
        .karaoke-rank-item {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr) auto;
            gap: 12px;
            align-items: center;
            padding: 12px 14px;
            border-radius: 16px;
            border: 1px solid rgba(148,163,184,.18);
            background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,250,252,.94));
            box-shadow: 0 12px 24px rgba(15,23,42,.05);
        }
        .karaoke-rank-item.is-active {
            border-color: var(--accent-outline);
            box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .14) inset, 0 16px 30px rgba(var(--accent-rgb), .14);
        }
        .karaoke-rank-cover {
            width: 56px;
            height: 56px;
            border-radius: 16px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(148,163,184,.18);
            background: linear-gradient(135deg, rgba(var(--accent-rgb), .14), rgba(255,255,255,.94));
            flex: 0 0 auto;
        }
        .karaoke-rank-cover img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .karaoke-cover-shell img,
        .karaoke-rank-cover img,
        .karaoke-rank-floating-cover-shell img {
            -webkit-user-drag: none;
            -webkit-user-select: none;
            user-select: none;
        }
        .karaoke-rank-cover.is-empty::before {
            content: '榜';
            color: var(--accent);
            font-size: 1rem;
            font-weight: 800;
        }
        .karaoke-rank-meta {
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        .karaoke-rank-meta strong,
        .karaoke-rank-meta span,
        .karaoke-rank-meta small {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .karaoke-rank-meta strong {
            color: var(--text-primary);
        }
        .karaoke-rank-meta span,
        .karaoke-rank-meta small {
            color: var(--text-secondary);
        }
        .karaoke-rank-meta span {
            font-size: 0.82rem;
        }
        .karaoke-rank-meta small {
            font-size: 0.76rem;
        }
        .karaoke-result-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 12px 14px;
            border-radius: 16px;
            border: 1px solid rgba(148,163,184,.18);
            background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,250,252,.92));
            box-shadow: 0 10px 24px rgba(15,23,42,.05);
        }
        .karaoke-result-item.is-active {
            border-color: var(--accent-outline);
            box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .14) inset, 0 14px 28px rgba(var(--accent-rgb), .12);
        }
        .karaoke-result-copy {
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        .karaoke-result-copy strong,
        .karaoke-result-copy span,
        .karaoke-now-meta strong,
        .karaoke-now-meta span {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .karaoke-result-copy strong,
        .karaoke-now-meta strong {
            color: var(--text-primary);
        }
        .karaoke-result-copy span,
        .karaoke-now-meta span {
            color: var(--text-secondary);
            font-size: 0.82rem;
        }
        .karaoke-now-playing,
        .karaoke-lyrics-card {
            padding: 14px;
            border-radius: 18px;
            border: 1px solid rgba(148,163,184,.18);
            background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,250,252,.94));
            box-shadow: 0 12px 24px rgba(15,23,42,.05);
        }
        .karaoke-now-playing {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .karaoke-lyrics-list.has-lyrics {
            gap: 8px;
            padding-right: 6px;
        }
        .karaoke-lyric-line {
            position: relative;
            padding: 12px 14px;
            border-radius: 16px;
            border: 1px solid rgba(148,163,184,.14);
            background: rgba(148,163,184,.05);
            color: var(--text-secondary);
            line-height: 1.72;
            transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
        }
        .karaoke-lyric-line.is-past {
            color: var(--text-primary);
            border-color: rgba(var(--accent-rgb), .12);
            background: rgba(var(--accent-rgb), .05);
        }
        .karaoke-lyric-line.is-active {
            color: var(--text-primary);
            border-color: var(--accent-outline);
            background: linear-gradient(180deg, rgba(var(--accent-rgb), .14), rgba(255,255,255,.96));
            box-shadow: 0 12px 24px rgba(var(--accent-rgb), .14);
            transform: translateY(-1px);
        }
        .karaoke-lyric-text {
            display: block;
            white-space: pre-wrap;
            word-break: break-word;
        }
        body.dark .karaoke-result-item,
        body.dark .karaoke-rank-item,
        body.dark .karaoke-now-playing,
        body.dark .karaoke-lyrics-card,
        body.dark .karaoke-volume-item,
        body.dark .karaoke-lyric-line {
            background: linear-gradient(180deg, rgba(30,41,59,.92), rgba(15,23,42,.94));
            border-color: rgba(71,85,105,.36);
            box-shadow: 0 14px 28px rgba(0,0,0,.18);
        }
        body.dark .karaoke-rank-panel {
            background: linear-gradient(180deg, rgba(27,35,53,.98), rgba(15,23,42,.98));
            border-color: rgba(71,85,105,.36);
            box-shadow: 0 28px 56px rgba(0,0,0,.26);
        }
        body.dark .karaoke-rank-cover {
            border-color: rgba(71,85,105,.38);
            background: linear-gradient(135deg, rgba(var(--accent-rgb), .24), rgba(15,23,42,.94));
        }
        body.dark .karaoke-empty {
            background: rgba(71,85,105,.16);
            border-color: rgba(71,85,105,.38);
        }
        body.dark .karaoke-lyric-line.is-past {
            background: rgba(var(--accent-rgb), .12);
            border-color: rgba(var(--accent-rgb), .22);
        }
        body.dark .karaoke-lyric-line.is-active {
            background: linear-gradient(180deg, rgba(var(--accent-rgb), .20), rgba(30,41,59,.96));
            border-color: rgba(var(--accent-rgb), .34);
            box-shadow: 0 14px 30px rgba(var(--accent-rgb), .18);
        }
        body.dark .karaoke-cover-shell {
            border-color: rgba(71,85,105,.42);
            background: linear-gradient(135deg, rgba(var(--accent-rgb), .24), rgba(15,23,42,.94));
        }
        .karaoke-control-row {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
        .karaoke-control-row .btn {
            flex: 1 1 140px;
            min-width: 0;
        }
        .karaoke-loop-row {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-top: -2px;
            flex-wrap: wrap;
        }
        .karaoke-loop-toggle {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 12px;
            border-radius: 14px;
            border: 1px solid rgba(148,163,184,.18);
            background: rgba(148,163,184,.06);
            color: var(--text-primary);
            font-size: 0.84rem;
            font-weight: 700;
            cursor: pointer;
            user-select: none;
        }
        .karaoke-loop-toggle input {
            width: 16px;
            height: 16px;
            accent-color: var(--accent);
            cursor: pointer;
        }
        .karaoke-loop-toggle input:disabled {
            cursor: not-allowed;
        }
        .karaoke-loop-toggle.is-disabled {
            opacity: .6;
            cursor: not-allowed;
        }
        .karaoke-vocal-reduction-strength {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: min(320px, 100%);
            flex: 1 1 240px;
            padding: 10px 12px;
            border-radius: 14px;
            border: 1px solid rgba(148,163,184,.18);
            background: rgba(148,163,184,.06);
            color: var(--text-primary);
            font-size: 0.84rem;
            font-weight: 700;
        }
        .karaoke-vocal-reduction-strength.is-disabled {
            opacity: .6;
            cursor: not-allowed;
        }
        .karaoke-vocal-reduction-strength-label {
            flex: 0 0 auto;
            white-space: nowrap;
        }
        .karaoke-vocal-reduction-strength-control {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
            flex: 1 1 auto;
        }
        .karaoke-vocal-reduction-strength-control input[type=range] {
            flex: 1 1 auto;
            min-width: 0;
        }
        .karaoke-vocal-reduction-strength-control strong {
            min-width: 48px;
            text-align: right;
            color: var(--text-secondary);
            font-size: 0.82rem;
            font-variant-numeric: tabular-nums;
        }
        .karaoke-vocal-reduction-note {
            display: none !important;
        }
        .karaoke-progress-row {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr) auto;
            gap: 10px;
            align-items: center;
        }
        .karaoke-progress-row span {
            color: var(--text-secondary);
            font-size: 0.82rem;
            font-variant-numeric: tabular-nums;
        }
        .karaoke-progress-row input[type=range],
        .karaoke-volume-control input[type=range],
        .karaoke-vocal-reduction-strength-control input[type=range] {
            width: 100%;
            margin: 0;
            -webkit-appearance: none;
            appearance: none;
            height: 8px;
            border-radius: 999px;
            border: 1px solid rgba(var(--accent-rgb), .18);
            background: linear-gradient(90deg, rgba(var(--accent-rgb), .28), rgba(var(--accent-rgb), .08));
            box-shadow: inset 0 1px 2px rgba(15,23,42,.08);
            outline: none;
        }
        .karaoke-progress-row input[type=range]:focus,
        .karaoke-volume-control input[type=range]:focus,
        .karaoke-vocal-reduction-strength-control input[type=range]:focus {
            box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .12), inset 0 1px 2px rgba(15,23,42,.08);
        }
        .karaoke-progress-row input[type=range]::-webkit-slider-runnable-track,
        .karaoke-volume-control input[type=range]::-webkit-slider-runnable-track,
        .karaoke-vocal-reduction-strength-control input[type=range]::-webkit-slider-runnable-track {
            height: 8px;
            border-radius: 999px;
            background: transparent;
        }
        .karaoke-progress-row input[type=range]::-moz-range-track,
        .karaoke-volume-control input[type=range]::-moz-range-track,
        .karaoke-vocal-reduction-strength-control input[type=range]::-moz-range-track {
            height: 8px;
            border-radius: 999px;
            background: transparent;
            border: none;
        }
        .karaoke-progress-row input[type=range]::-webkit-slider-thumb,
        .karaoke-volume-control input[type=range]::-webkit-slider-thumb,
        .karaoke-vocal-reduction-strength-control input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 18px;
            height: 18px;
            margin-top: -6px;
            border-radius: 50%;
            border: 2px solid var(--accent);
            background: linear-gradient(180deg, #ffffff, rgba(255,255,255,.92));
            box-shadow: 0 10px 18px rgba(var(--accent-rgb), .22);
            cursor: pointer;
        }
        .karaoke-progress-row input[type=range]::-moz-range-thumb,
        .karaoke-volume-control input[type=range]::-moz-range-thumb,
        .karaoke-vocal-reduction-strength-control input[type=range]::-moz-range-thumb {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            border: 2px solid var(--accent);
            background: linear-gradient(180deg, #ffffff, rgba(255,255,255,.92));
            box-shadow: 0 10px 18px rgba(var(--accent-rgb), .22);
            cursor: pointer;
        }
        .karaoke-volume-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 12px;
        }
        .karaoke-volume-item {
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding: 12px 14px;
            border-radius: 16px;
            border: 1px solid rgba(148,163,184,.18);
            background: rgba(148,163,184,.06);
        }
        .karaoke-volume-item > span {
            color: var(--text-primary);
            font-size: 0.84rem;
            font-weight: 700;
        }
        .karaoke-volume-control {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .karaoke-volume-control strong {
            min-width: 48px;
            text-align: right;
            color: var(--text-secondary);
            font-size: 0.82rem;
            font-variant-numeric: tabular-nums;
        }
        .karaoke-progress-row input:disabled,
        .karaoke-volume-control input:disabled,
        .karaoke-vocal-reduction-strength-control input:disabled {
            opacity: .55;
            cursor: not-allowed;
        }
        .karaoke-cover-shell {
            width: 76px;
            height: 76px;
            flex: 0 0 auto;
            border-radius: 18px;
            border: 1px solid rgba(148,163,184,.2);
            background: linear-gradient(135deg, rgba(var(--accent-rgb), .14), rgba(255,255,255,.92));
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
        .karaoke-cover-shell img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .karaoke-cover-shell.is-empty img {
            display: none;
        }
        .karaoke-cover-shell.is-empty::before {
            content: '♪';
            font-size: 1.4rem;
            font-weight: 800;
            color: var(--accent);
        }
        .karaoke-now-meta {
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        .karaoke-lyrics-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 10px;
        }
        #karaoke-lyric-status,
        .karaoke-lyrics-list .karaoke-empty {
            transition: color .24s ease, opacity .32s ease;
        }
        .karaoke-lyrics-card {
            display: none;
        }
        .karaoke-floating-lyrics {
            --karaoke-floating-z-content: 2;
            --karaoke-floating-z-head: 3;
            --karaoke-floating-z-resize: 4;
            position: fixed;
            left: 24px;
            top: 112px;
            z-index: 960;
            width: min(560px, calc(100vw - 28px));
            max-width: calc(100vw - 28px);
            padding: 14px 16px 16px;
            height: 176px;
            border-radius: 22px;
            border: 1px solid rgba(var(--accent-rgb), .16);
            background: linear-gradient(180deg, rgba(255,255,255,.50), rgba(255,255,255,.30));
            box-shadow: 0 24px 48px rgba(15,23,42,.20), inset 0 1px 0 rgba(255,255,255,.34), inset 0 0 28px rgba(255,255,255,.10);
            backdrop-filter: blur(24px) saturate(1.06);
            -webkit-backdrop-filter: blur(24px) saturate(1.06);
            color: var(--text-primary);
            cursor: grab;
            user-select: none;
            touch-action: none;
            overflow: hidden;
            isolation: isolate;
            display: flex;
            flex-direction: column;
        }
        .karaoke-floating-lyrics.is-dragging {
            cursor: grabbing;
            box-shadow: 0 30px 60px rgba(15,23,42,.24), inset 0 1px 0 rgba(255,255,255,.34);
        }
        .karaoke-floating-lyrics-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 12px;
        }
        .karaoke-floating-lyrics-song {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .karaoke-floating-lyrics-song {
            color: var(--accent);
            font-size: 0.82rem;
            font-weight: 800;
            text-align: right;
        }
        .karaoke-floating-lyrics-body {
            display: flex;
            flex: 1 1 auto;
            min-height: 0;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            gap: 8px;
            padding: 6px 0 0;
        }
        .karaoke-floating-line {
            text-align: center;
            white-space: pre-wrap;
            word-break: break-word;
            line-height: 1.65;
            transition: color .16s ease, opacity .16s ease, transform .16s ease;
        }
        .karaoke-floating-line.is-context {
            color: var(--text-secondary);
            font-size: 0.94rem;
            opacity: .86;
        }
        .karaoke-floating-line.is-current {
            color: var(--text-primary);
            font-size: clamp(1.08rem, 0.98rem + 0.58vw, 1.42rem);
            font-weight: 800;
            line-height: 1.4;
            text-shadow: 0 0 18px rgba(var(--accent-rgb), .18);
            transform: scale(1.01);
            transition: color .16s ease, opacity .16s ease, transform .16s ease, text-shadow .12s linear;
        }
        .karaoke-floating-line.is-empty {
            opacity: .22;
            min-height: 1.2em;
        }
        .karaoke-floating-lyrics-resize-handle {
            position: absolute;
            left: 16px;
            right: 16px;
            height: 12px;
            z-index: var(--karaoke-floating-z-resize, 6);
            cursor: ns-resize;
            touch-action: none;
        }
        .karaoke-floating-lyrics-resize-handle::before {
            content: '';
            position: absolute;
            left: 50%;
            top: 50%;
            width: 54px;
            height: 4px;
            border-radius: 999px;
            background: rgba(var(--accent-rgb), .34);
            transform: translate(-50%, -50%);
            opacity: .72;
        }
        .karaoke-floating-lyrics-resize-handle.is-top {
            top: 2px;
        }
        .karaoke-floating-lyrics-resize-handle.is-bottom {
            bottom: 2px;
        }
        .karaoke-floating-lyrics.is-loading .karaoke-floating-line.is-current {
            color: var(--accent);
        }
        .karaoke-floating-lyrics.is-error .karaoke-floating-line.is-current {
            color: #f87171;
            text-shadow: none;
        }
        body.dark .karaoke-progress-row input[type=range],
        body.dark .karaoke-volume-control input[type=range],
        body.dark .karaoke-vocal-reduction-strength-control input[type=range] {
            border-color: rgba(var(--accent-rgb), .26);
            background: linear-gradient(90deg, rgba(var(--accent-rgb), .34), rgba(255,255,255,.08));
            box-shadow: inset 0 1px 3px rgba(2,6,23,.22);
        }
        body.dark .karaoke-floating-lyrics {
            background: linear-gradient(180deg, rgba(15,23,42,.88), rgba(15,23,42,.70));
            border-color: rgba(var(--accent-rgb), .18);
            box-shadow: 0 24px 52px rgba(2,6,23,.42), inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 32px rgba(255,255,255,.04);
        }
        body.dark .karaoke-floating-lyrics.is-dragging {
            box-shadow: 0 28px 60px rgba(2,6,23,.48), inset 0 1px 0 rgba(255,255,255,.08);
        }
        body.dark .karaoke-loop-toggle {
            background: rgba(71,85,105,.18);
            border-color: rgba(71,85,105,.36);
        }
        body.dark .karaoke-vocal-reduction-strength {
            background: rgba(71,85,105,.18);
            border-color: rgba(71,85,105,.36);
        }
        body.dark .karaoke-floating-lyrics-resize-handle::before {
            background: rgba(var(--accent-rgb), .42);
        }
        @media (max-width: 820px) {
            .karaoke-layout {
                grid-template-columns: 1fr;
            }
            .karaoke-results {
                height: var(--karaoke-results-height);
                min-height: var(--karaoke-results-height);
                max-height: var(--karaoke-results-height);
            }
            .karaoke-floating-lyrics {
                width: calc(100vw - 24px);
                max-width: calc(100vw - 24px);
            }
        }
        @media (max-width: 640px) {
            .karaoke-search-row,
            .karaoke-now-playing {
                flex-direction: column;
                align-items: stretch;
            }
            .karaoke-search-row .btn {
                width: 100%;
            }
            .karaoke-progress-row,
            .karaoke-volume-grid {
                grid-template-columns: 1fr;
            }
            .karaoke-progress-row {
                gap: 8px;
            }
            .karaoke-loop-row {
                align-items: stretch;
            }
            .karaoke-volume-control {
                flex-wrap: wrap;
            }
            .karaoke-vocal-reduction-strength {
                min-width: 0;
                width: 100%;
            }
            .karaoke-vocal-reduction-note {
                min-width: 0;
                flex-basis: 100%;
            }
            .karaoke-cover-shell {
                width: 88px;
                height: 88px;
                margin: 0 auto;
            }
            .karaoke-floating-lyrics {
                left: 10px;
                top: 86px;
                width: calc(100vw - 20px);
                max-width: calc(100vw - 20px);
                padding: 12px 14px 14px;
                border-radius: 18px;
            }
            .karaoke-floating-lyrics-head {
                flex-direction: column;
                align-items: flex-start;
            }
            .karaoke-floating-lyrics-song {
                text-align: left;
            }
            .karaoke-floating-line.is-current {
                font-size: 1.06rem;
            }
            .karaoke-rank-picker-shell {
                width: 100%;
            }
            .karaoke-rank-trigger {
                width: 100%;
            }
            .karaoke-rank-panel {
                position: static;
                width: 100%;
                max-height: none;
                margin-top: 10px;
            }
            .karaoke-rank-list {
                max-height: 280px;
            }
            .karaoke-rank-item {
                grid-template-columns: auto minmax(0, 1fr);
                align-items: flex-start;
            }
            .karaoke-rank-item .mini-btn {
                grid-column: 1 / -1;
                width: 100%;
            }
        }

        .kugou-auth-card {
            margin: 16px 0 14px;
            padding: 16px;
            border-radius: 18px;
            border: 1px solid rgba(148,163,184,.18);
            background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,250,252,.94));
            box-shadow: 0 12px 24px rgba(15,23,42,.05);
            display: flex;
            flex-direction: column;
            gap: 14px;
        }
        body.dark .kugou-auth-card {
            background: linear-gradient(180deg, rgba(30,41,59,.92), rgba(15,23,42,.94));
            border-color: rgba(71,85,105,.36);
            box-shadow: 0 14px 28px rgba(0,0,0,.18);
        }
        .kugou-auth-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
            flex-wrap: wrap;
        }
        .kugou-auth-title {
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        .kugou-auth-title strong {
            color: var(--text-primary);
            font-size: 0.96rem;
        }
        .kugou-auth-title span {
            color: var(--text-secondary);
            font-size: 0.8rem;
            line-height: 1.6;
        }
        .kugou-auth-badge {
            font-weight: 800;
        }
        .kugou-auth-badge.is-success {
            background: rgba(34,197,94,.12);
            border-color: rgba(34,197,94,.24);
            color: #16a34a;
        }
        .kugou-auth-badge.is-warning {
            background: rgba(245,158,11,.12);
            border-color: rgba(245,158,11,.24);
            color: #d97706;
        }
        .kugou-auth-badge.is-danger {
            background: rgba(239,68,68,.12);
            border-color: rgba(239,68,68,.24);
            color: #dc2626;
        }
        .kugou-auth-badge.is-muted {
            background: rgba(148,163,184,.12);
            border-color: rgba(148,163,184,.24);
            color: var(--text-secondary);
        }
        .kugou-auth-summary {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .kugou-auth-summary-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
        }
        .kugou-auth-summary-item {
            display: flex;
            flex-direction: column;
            gap: 4px;
            padding: 12px 14px;
            border-radius: 14px;
            border: 1px solid rgba(148,163,184,.16);
            background: rgba(148,163,184,.06);
        }
        .kugou-auth-summary-item span {
            color: var(--text-secondary);
            font-size: 0.76rem;
            font-weight: 700;
        }
        .kugou-auth-summary-item strong {
            color: var(--text-primary);
            font-size: 0.84rem;
            line-height: 1.6;
            word-break: break-word;
        }
        .kugou-auth-summary-note {
            padding: 12px 14px;
            border-radius: 14px;
            border: 1px dashed rgba(148,163,184,.24);
            background: rgba(148,163,184,.08);
            color: var(--text-secondary);
            font-size: 0.82rem;
            line-height: 1.7;
        }
        .kugou-auth-qr-wrap {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .kugou-auth-qr-card {
            min-height: 164px;
            padding: 14px;
            border-radius: 18px;
            border: 1px dashed rgba(148,163,184,.24);
            background: rgba(148,163,184,.08);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
        .kugou-auth-qr-card img {
            width: min(220px, 100%);
            max-width: 100%;
            aspect-ratio: 1 / 1;
            object-fit: contain;
            border-radius: 16px;
            background: #ffffff;
            box-shadow: 0 12px 24px rgba(15,23,42,.08);
        }
        .kugou-auth-qr-placeholder {
            max-width: 360px;
            text-align: center;
            color: var(--text-secondary);
            font-size: 0.84rem;
            line-height: 1.7;
        }
        .kugou-auth-qr-meta {
            color: var(--text-secondary);
            font-size: 0.8rem;
            line-height: 1.7;
            word-break: break-word;
        }
        .kugou-auth-open-link {
            align-self: flex-start;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
        }
        .kugou-auth-actions {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }
        .kugou-auth-admin-actions {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }
        .kugou-auth-inline-status {
            min-height: 18px;
            color: var(--text-secondary);
            font-size: 0.82rem;
            line-height: 1.6;
        }
        @media (max-width: 640px) {
            .kugou-auth-summary-grid {
                grid-template-columns: 1fr;
            }
            .kugou-auth-actions,
            .kugou-auth-admin-actions {
                flex-direction: column;
                align-items: stretch;
            }
            .kugou-auth-actions .mini-btn,
            .kugou-auth-open-link {
                width: 100%;
                justify-content: center;
            }
        }

        body.modal-open {
            overflow: hidden;
        }

        .room-settings-modal,
        .karaoke-rank-modal,
        .room-image-preview-modal {
            position: fixed;
            inset: 0;
            z-index: 2200;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px;
            background: rgba(15, 23, 42, 0.52);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
        }

        .room-settings-modal.hidden,
        .karaoke-rank-modal.hidden,
        .room-image-preview-modal.hidden {
            display: none;
        }

        body.dark .room-settings-modal,
        body.dark .karaoke-rank-modal,
        body.dark .room-image-preview-modal {
            background: rgba(2, 6, 23, 0.7);
        }

        .room-settings-dialog,
        .karaoke-rank-modal-dialog,
        .room-image-preview-dialog {
            width: min(1180px, 100%);
            border-radius: 30px;
            border: 1px solid rgba(148, 163, 184, 0.22);
            background:
                linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(248, 250, 252, 0.94));
            box-shadow:
                0 26px 70px rgba(15, 23, 42, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.7);
            color: var(--text-primary);
        }

        body.dark .room-settings-dialog,
        body.dark .karaoke-rank-modal-dialog,
        body.dark .room-image-preview-dialog {
            border-color: rgba(100, 116, 139, 0.34);
            background:
                linear-gradient(180deg, rgba(30, 41, 59, 0.96), rgba(15, 23, 42, 0.94));
            box-shadow:
                0 32px 76px rgba(0, 0, 0, 0.42),
                inset 0 1px 0 rgba(255, 255, 255, 0.04);
        }

        .room-settings-dialog,
        .karaoke-rank-modal-dialog {
            max-height: min(88vh, 960px);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            gap: 18px;
            padding: 28px;
        }

        .karaoke-rank-modal-dialog {
            height: min(96vh, 1180px);
            max-height: min(96vh, 1180px);
            display: grid;
            grid-template-rows: auto auto minmax(0, 1fr);
            align-items: stretch;
            gap: 14px;
            padding: 22px;
        }

        .room-settings-dialog {
            width: min(1080px, 100%);
            overflow-y: auto;
        }

        .room-settings-header,
        .karaoke-rank-modal-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 16px;
        }

        .room-settings-header h3,
        .karaoke-rank-modal-header h3 {
            margin: 0;
            font-size: 1.18rem;
            color: var(--text-primary);
        }

        .room-settings-header p,
        .karaoke-rank-modal-header p {
            margin: 6px 0 0;
            color: var(--text-secondary);
            font-size: 0.88rem;
            line-height: 1.7;
        }

        .modal-close-btn {
            border: 1px solid rgba(148, 163, 184, 0.22);
            background: rgba(255, 255, 255, 0.64);
            color: var(--text-primary);
            width: 42px;
            height: 42px;
            min-width: 42px;
            border-radius: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1.12rem;
            cursor: pointer;
            transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
        }

        .modal-close-btn:hover {
            transform: translateY(-1px);
            border-color: rgba(var(--accent-rgb), 0.28);
            background: rgba(var(--accent-rgb), 0.12);
        }

        body.dark .modal-close-btn {
            background: rgba(30, 41, 59, 0.88);
            border-color: rgba(100, 116, 139, 0.32);
            box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
        }

        .room-image-preview-dialog {
            width: min(1240px, 100%);
            max-height: min(94vh, 1000px);
            display: flex;
            flex-direction: column;
            gap: 14px;
            padding: 20px;
            overflow: hidden;
        }

        .room-image-preview-toolbar {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 14px;
        }

        .room-image-preview-meta {
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 4px;
            color: var(--text-secondary);
            font-size: 0.88rem;
            line-height: 1.7;
        }

        .room-image-preview-meta strong {
            color: var(--text-primary);
        }

        .room-image-preview-actions {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }

        .room-image-preview-stage {
            flex: 1;
            min-height: min(70vh, 760px);
            border-radius: 22px;
            border: 1px solid rgba(148, 163, 184, 0.18);
            background: rgba(148, 163, 184, 0.08);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            padding: 16px;
        }

        body.dark .room-image-preview-stage {
            border-color: rgba(100, 116, 139, 0.28);
            background: rgba(15, 23, 42, 0.58);
        }

        .room-image-preview-stage img {
            max-width: none;
            max-height: none;
            user-select: none;
            touch-action: none;
            will-change: transform;
        }

        .karaoke-rank-picker-shell {
            margin-top: 6px;
        }

        .karaoke-rank-entry-actions {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }

        .karaoke-rank-entry-actions > .btn {
            min-width: 120px;
        }

        #karaoke-rank-play-btn.is-active,
        #karaoke-rank-floating-toggle-btn.is-active {
            background: rgba(var(--accent-rgb), 0.14);
            border-color: rgba(var(--accent-rgb), 0.26);
            color: var(--accent);
            box-shadow: 0 12px 24px rgba(var(--accent-rgb), 0.16);
        }

        .karaoke-rank-status {
            min-height: 20px;
        }

        .karaoke-rank-list {
            flex: 1;
            min-height: 0;
            height: 100%;
            max-height: none;
            display: grid;
            grid-template-columns: repeat(6, minmax(0, 1fr));
            gap: 40px;
            overflow: auto;
            padding-right: 4px;
            align-content: start;
        }

        .karaoke-rank-item {
            min-width: 0;
            min-height: 0;
            position: relative;
            z-index: 0;
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding: 12px;
            border-radius: 20px;
            border: 1px solid rgba(148, 163, 184, 0.2);
            background:
                linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(248, 250, 252, 0.74));
            box-shadow: 0 10px 22px rgba(15, 23, 42, 0.07);
            transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
        }

        .karaoke-rank-item:hover {
            z-index: 2;
            transform: translateY(-2px);
            box-shadow: 0 14px 28px rgba(15, 23, 42, 0.11);
            border-color: rgba(var(--accent-rgb), 0.22);
        }

        .karaoke-rank-item.is-active {
            border-color: rgba(var(--accent-rgb), 0.38);
            box-shadow:
                0 22px 42px rgba(var(--accent-rgb), 0.16),
                inset 0 0 0 1px rgba(var(--accent-rgb), 0.16);
            background:
                linear-gradient(180deg, rgba(var(--accent-rgb), 0.12), rgba(255, 255, 255, 0.88));
        }

        body.dark .karaoke-rank-item {
            border-color: rgba(100, 116, 139, 0.28);
            background:
                linear-gradient(180deg, rgba(30, 41, 59, 0.92), rgba(15, 23, 42, 0.84));
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22);
        }

        body.dark .karaoke-rank-item:hover {
            box-shadow: 0 16px 30px rgba(0, 0, 0, 0.26);
        }

        body.dark .karaoke-rank-item.is-active {
            background:
                linear-gradient(180deg, rgba(var(--accent-rgb), 0.18), rgba(15, 23, 42, 0.9));
        }

        .karaoke-rank-cover {
            position: relative;
            width: 100%;
            height: 88px;
            min-height: 88px;
            aspect-ratio: auto;
            border-radius: 16px;
            overflow: hidden;
            background: rgba(148, 163, 184, 0.12);
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
        }

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

        .karaoke-rank-cover.is-empty::before {
            content: '♪';
            font-size: 2rem;
            font-weight: 800;
            color: rgba(var(--accent-rgb), 0.62);
        }

        .karaoke-rank-meta {
            min-width: 0;
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .karaoke-rank-meta strong {
            color: var(--text-primary);
            font-size: 0.96rem;
            line-height: 1.45;
            word-break: break-word;
        }

        .karaoke-rank-meta span,
        .karaoke-rank-meta small {
            color: var(--text-secondary);
            line-height: 1.65;
            word-break: break-word;
        }

        .karaoke-rank-meta span {
            font-size: 0.8rem;
        }

        .karaoke-rank-meta small {
            font-size: 0.78rem;
            display: -webkit-box;
            -line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .karaoke-rank-item .mini-btn {
            width: 100%;
            justify-content: center;
            margin-top: auto;
            min-height: 30px;
            padding: 6px 8px;
            font-size: 0.76rem;
            position: relative;
            z-index: 3;
        }

        .karaoke-empty {
            width: 100%;
            min-height: 120px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 24px 18px;
            border-radius: 20px;
            border: 1px dashed rgba(148, 163, 184, 0.24);
            background: rgba(148, 163, 184, 0.07);
            color: var(--text-secondary);
            line-height: 1.8;
        }

        .karaoke-rank-floating {
            --karaoke-rank-floating-orbit-size: 118px;
            --karaoke-rank-floating-disc-size: 118px;
            --karaoke-rank-floating-orbit-btn-size: 30px;
            position: fixed;
            top: 148px;
            left: 24px;
            z-index: 2100;
            width: var(--karaoke-rank-floating-disc-size);
            height: var(--karaoke-rank-floating-disc-size);
            display: block;
            overflow: visible;
        }

        .karaoke-rank-floating.hidden {
            display: none;
        }

        .karaoke-rank-floating-orbit {
            position: relative;
            width: 100%;
            height: 100%;
        }

        .karaoke-rank-floating.is-dragging,
        .karaoke-rank-floating.is-dragging * {
            cursor: grabbing !important;
        }

        .karaoke-rank-floating-disc-btn {
            position: absolute;
            width: var(--karaoke-rank-floating-orbit-btn-size);
            height: var(--karaoke-rank-floating-orbit-btn-size);
            border-radius: 999px;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: none;
            background: transparent;
            color: rgba(255, 255, 255, 0.96);
            box-shadow: none;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            font-size: 1.08rem;
            font-weight: 800;
            cursor: pointer;
            line-height: 1;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.52);
            transition: transform 0.18s ease, color 0.18s ease, opacity 0.18s ease;
            z-index: 4;
        }

        .karaoke-rank-floating-disc-btn:hover:not(:disabled) {
            transform: scale(1.06);
            color: #ffffff;
        }

        .karaoke-rank-floating-disc-btn:disabled {
            opacity: 0.38;
            cursor: not-allowed;
        }

        .karaoke-rank-floating-disc-btn.is-top {
            left: 50%;
            top: var(--karaoke-rank-floating-disc-btn-outset);
            transform: translateX(-50%);
        }

        .karaoke-rank-floating-disc-btn.is-bottom {
            left: 50%;
            bottom: var(--karaoke-rank-floating-disc-btn-outset);
            transform: translateX(-50%);
        }

        .karaoke-rank-floating-disc-btn.is-left {
            left: var(--karaoke-rank-floating-disc-btn-outset);
            top: 50%;
            transform: translateY(-50%);
        }

        .karaoke-rank-floating-disc-btn.is-right {
            right: var(--karaoke-rank-floating-disc-btn-outset);
            top: 50%;
            transform: translateY(-50%);
        }

        .karaoke-rank-floating-disc-btn.is-top:hover:not(:disabled),
        .karaoke-rank-floating-disc-btn.is-bottom:hover:not(:disabled) {
            transform: translateX(-50%) scale(1.06);
        }

        .karaoke-rank-floating-disc-btn.is-left:hover:not(:disabled),
        .karaoke-rank-floating-disc-btn.is-right:hover:not(:disabled) {
            transform: translateY(-50%) scale(1.06);
        }

        body.dark .karaoke-rank-floating-disc-btn {
            color: rgba(255, 255, 255, 0.94);
        }

        body.dark .karaoke-rank-floating-disc-btn:hover:not(:disabled) {
            color: #ffffff;
        }

        .karaoke-rank-floating-disc {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            min-width: 0;
            border: 1.5px solid rgba(255, 255, 255, 0.12);
            border-radius: 999px;
            padding: 0;
            overflow: visible;
            cursor: grab;
            touch-action: none;
            background:
                radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.14), transparent 52%),
                radial-gradient(circle at 68% 74%, rgba(var(--karaoke-rank-accent-rgb, var(--accent-rgb)), 0.06), transparent 48%),
                linear-gradient(145deg, rgba(18, 24, 38, 0.84), rgba(8, 12, 24, 0.94));
            box-shadow:
                0 18px 42px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.12),
                inset 0 -6px 14px rgba(0, 0, 0, 0.18);
            backdrop-filter: blur(16px) saturate(1.2);
            -webkit-backdrop-filter: blur(16px) saturate(1.2);
            z-index: 2;
            user-select: none;
            transition: box-shadow 0.4s ease, border-color 0.4s ease;
        }

        .karaoke-rank-floating-disc:disabled {
            cursor: default;
            opacity: 0.82;
        }

        .karaoke-rank-floating-disc:focus-visible {
            outline: none;
            box-shadow:
                0 0 0 3px rgba(var(--karaoke-rank-accent-rgb, var(--accent-rgb)), 0.26),
                0 18px 42px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.12),
                inset 0 -6px 14px rgba(0, 0, 0, 0.18);
        }

        /* ── 玻璃拟态播放器：播放态外圈霓虹 ── */
        .karaoke-rank-floating.is-playing .karaoke-rank-floating-disc {
            border-color: rgba(var(--karaoke-rank-accent-rgb, var(--accent-rgb)), 0.26);
            box-shadow:
                0 18px 42px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.12),
                inset 0 -6px 14px rgba(0, 0, 0, 0.18),
                0 0 22px 3px rgba(var(--karaoke-rank-accent-rgb, var(--accent-rgb)), 0.18),
                0 0 48px 6px rgba(var(--karaoke-rank-accent-rgb, var(--accent-rgb)), 0.08);
        }

        .karaoke-rank-floating:not(.is-playing) .karaoke-rank-floating-disc {
            border-color: rgba(255, 255, 255, 0.08);
        }

        .karaoke-rank-floating:not(.is-playing) .karaoke-rank-floating-disc-grooves {
            opacity: 0.45;
        }

        .karaoke-rank-floating.is-playing .karaoke-rank-floating-cover-shell {
            border-color: rgba(var(--karaoke-rank-accent-rgb, var(--accent-rgb)), 0.38);
            box-shadow:
                0 6px 14px rgba(0, 0, 0, 0.22),
                0 0 0 1px rgba(var(--karaoke-rank-accent-rgb, var(--accent-rgb)), 0.12) inset,
                0 0 14px 1px rgba(var(--karaoke-rank-accent-rgb, var(--accent-rgb)), 0.12);
        }

        .karaoke-rank-floating-disc-grooves {
            display: none;
        }

        .karaoke-rank-floating-disc-grooves::after {
            display: none;
        }

        .karaoke-rank-floating-disc-label {
            position: absolute;
            left: 50%;
            bottom: 10px;
            transform: translateX(-50%);
            padding: 2px 8px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.12);
            color: rgba(255, 255, 255, 0.92);
            font-size: 0.72rem;
            letter-spacing: 0.08em;
            backdrop-filter: blur(8px);
        }

        .karaoke-rank-floating-cover-shell {
            position: absolute;
            inset: 50% auto auto 50%;
            transform: translate(-50%, -50%);
            width: 72%;
            height: 72%;
            border-radius: 999px;
            overflow: hidden;
            border: 2.5px solid rgba(255, 255, 255, 0.22);
            box-shadow:
                0 6px 14px rgba(0, 0, 0, 0.22),
                0 0 0 1px rgba(255, 255, 255, 0.06) inset;
            background: rgba(var(--karaoke-rank-accent-rgb, var(--accent-rgb)), 0.06);
            pointer-events: none;
            z-index: 2;
            transition: border-color 0.4s ease, box-shadow 0.4s ease;
        }

        .karaoke-rank-floating-cover-shell img:not([src]),
        .karaoke-rank-floating-cover-shell img[src=""] {
            display: none;
        }
        .karaoke-rank-floating-cover-shell:not(:has(img[src])):not(:has(img[src=""]))::after,
        .karaoke-rank-floating-cover-shell:has(img:not([src]))::after,
        .karaoke-rank-floating-cover-shell:has(img[src=""])::after {
            content: '♪';
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: var(--text-secondary);
            opacity: 0.5;
            background: rgba(var(--accent-rgb), 0.08);
            border-radius: 50%;
        }
        .karaoke-rank-floating-cover-shell img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .karaoke-rank-floating-panel {
            position: absolute;
            left: 112px;
            top: 0;
            min-width: 0;
            width: min(358px, calc(100vw - 28px));
            max-height: 420px;
            display: flex;
            flex-direction: column;
            gap: 12px;
            padding: 16px;
            border-radius: 24px;
            border: 1px solid rgba(148, 163, 184, 0.22);
            background: rgba(255, 255, 255, 0.88);
            box-shadow: 0 20px 42px rgba(15, 23, 42, 0.16);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
        }

        body.dark .karaoke-rank-floating-panel {
            border-color: rgba(100, 116, 139, 0.3);
            background: rgba(15, 23, 42, 0.88);
            box-shadow: 0 24px 48px rgba(0, 0, 0, 0.28);
        }

        .karaoke-rank-floating-panel-head {
            min-width: 0;
            display: flex;
            align-items: flex-start;
            gap: 10px;
        }

        .karaoke-rank-floating-panel-copy {
            min-width: 0;
            flex: 1 1 auto;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .karaoke-rank-floating-panel-copy strong {
            color: var(--text-primary);
            font-size: 0.94rem;
            line-height: 1.5;
            word-break: break-word;
        }

        .karaoke-rank-floating-panel-copy span {
            color: var(--text-secondary);
            font-size: 0.8rem;
            line-height: 1.7;
            word-break: break-word;
        }

        .karaoke-rank-floating-control-row,
        .karaoke-rank-floating-mode-row {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
        }

        .karaoke-rank-floating-mode-row .mini-btn.is-active {
            background: rgba(var(--accent-rgb), 0.16);
            border-color: rgba(var(--accent-rgb), 0.28);
            color: var(--accent);
            box-shadow: 0 10px 20px rgba(var(--accent-rgb), 0.12);
        }

        .karaoke-rank-floating-song-wrap {
            min-height: 0;
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding-top: 2px;
        }

        .karaoke-rank-floating-song-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            color: var(--text-secondary);
            font-size: 0.8rem;
        }

        .karaoke-rank-floating-song-head strong {
            color: var(--text-primary);
            font-size: 0.86rem;
        }

        .karaoke-rank-floating-song-list {
            min-height: 0;
            max-height: 228px;
            overflow: auto;
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding-right: 4px;
            scrollbar-width: thin;
            scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
        }

        .karaoke-rank-floating-song-item {
            display: block;
        }

        .karaoke-rank-floating-song-btn {
            width: 100%;
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            border-radius: 16px;
            border: 1px solid rgba(148, 163, 184, 0.18);
            background: rgba(148, 163, 184, 0.08);
            color: var(--text-primary);
            cursor: pointer;
            transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
            text-align: left;
        }

        .karaoke-rank-floating-song-btn:hover:not(:disabled) {
            transform: translateY(-1px);
            border-color: rgba(var(--accent-rgb), 0.26);
            background: rgba(var(--accent-rgb), 0.1);
        }

        .karaoke-rank-floating-song-item.is-active .karaoke-rank-floating-song-btn {
            border-color: rgba(var(--accent-rgb), 0.34);
            background: rgba(var(--accent-rgb), 0.16);
            box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.08);
        }

        .karaoke-rank-floating-song-index {
            flex: 0 0 28px;
            color: var(--text-secondary);
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 0.08em;
        }

        .karaoke-rank-floating-song-copy {
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 3px;
        }

        .karaoke-rank-floating-song-copy strong,
        .karaoke-rank-floating-song-copy small {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .karaoke-rank-floating-song-copy strong {
            color: var(--text-primary);
            font-size: 0.84rem;
        }

        .karaoke-rank-floating-song-copy small {
            color: var(--text-secondary);
            font-size: 0.74rem;
        }

        @media (max-width: 1280px) {
            .karaoke-rank-list {
                grid-template-columns: repeat(5, minmax(0, 1fr));
            }
        }

        @media (max-width: 960px) {
            .karaoke-rank-list {
                grid-template-columns: repeat(4, minmax(0, 1fr));
            }
        }

        @media (max-width: 720px) {
            .room-settings-modal,
            .karaoke-rank-modal,
            .room-image-preview-modal {
                padding: 14px;
            }

            .room-settings-dialog,
            .karaoke-rank-modal-dialog {
                padding: 22px 16px;
                border-radius: 24px;
            }

            .room-image-preview-dialog {
                padding: 14px;
                border-radius: 24px;
            }

            .room-settings-header,
            .karaoke-rank-modal-header,
            .room-image-preview-toolbar {
                flex-direction: column;
            }

            .room-image-preview-actions {
                width: 100%;
                justify-content: flex-end;
            }

            .karaoke-rank-floating {
                --karaoke-rank-floating-orbit-size: 112px;
                --karaoke-rank-floating-disc-size: 112px;
                --karaoke-rank-floating-orbit-btn-size: 28px;
                --karaoke-rank-floating-disc-btn-outset: -5px;
            }

            .karaoke-rank-floating-panel {
                width: min(320px, calc(100vw - 20px));
                max-height: 52vh;
            }
        }

        @media (max-width: 560px) {
            .karaoke-rank-entry-actions {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                width: 100%;
            }

            .karaoke-rank-entry-actions > .btn {
                width: 100%;
                min-width: 0;
            }

            .karaoke-rank-list {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 12px;
                min-height: 260px;
            }

            .karaoke-rank-item {
                min-height: 208px;
                padding: 14px;
                border-radius: 20px;
            }

            .karaoke-rank-meta strong {
                font-size: 0.9rem;
            }

            .karaoke-rank-floating {
                --karaoke-rank-floating-orbit-size: 106px;
                --karaoke-rank-floating-disc-size: 106px;
                --karaoke-rank-floating-orbit-btn-size: 26px;
                --karaoke-rank-floating-disc-btn-outset: -4px;
            }

            .karaoke-rank-floating-cover-shell {
                width: 40px;
                height: 40px;
            }

            .karaoke-rank-floating-panel {
                width: min(320px, calc(100vw - 20px));
                max-width: calc(100vw - 20px);
            }

            .karaoke-rank-floating-control-row,
            .karaoke-rank-floating-mode-row {
                grid-template-columns: 1fr;
            }
        }

        @keyframes karaoke-rank-cover-rotate {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }

        .karaoke-rank-item {
            min-height: 136px;
        }

        .karaoke-rank-meta {
            gap: 2px;
        }

        .karaoke-rank-meta strong,
        .karaoke-rank-meta span,
        .karaoke-rank-meta small {
            white-space: normal;
            overflow: hidden;
            text-overflow: clip;
            display: block;
        }

        .karaoke-rank-meta strong {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            line-height: 1.42;
            min-height: 0;
        }

        .karaoke-rank-meta span {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            line-height: 1.52;
        }

        .karaoke-rank-meta small {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            line-height: 1.52;
            min-height: 0;
        }

        .karaoke-rank-floating {
            --karaoke-rank-floating-song-list-height: 384px;
            --karaoke-rank-floating-disc-btn-outset: -6px;
        }

        /* ── 惯性旋转由 JS --karaoke-rank-rotation 变量驱动 ── */
        .karaoke-rank-floating .karaoke-rank-floating-cover-shell img[src] {
            transform: rotate(var(--karaoke-rank-rotation, 0deg));
            transform-origin: center center;
            will-change: transform;
        }

        /* ── 播放按钮居中主控 ── */
        #karaoke-rank-play-toggle-btn {
            left: 50% !important;
            top: 50% !important;
            bottom: auto !important;
            right: auto !important;
            transform: translate(-50%, -50%) !important;
            width: 36px;
            height: 36px;
            font-size: 1.12rem;
            background: rgba(0, 0, 0, 0.28);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.22s ease, transform 0.22s ease, background 0.18s ease, color 0.18s ease;
        }
        #karaoke-rank-play-toggle-btn:hover:not(:disabled) {
            transform: translate(-50%, -50%) scale(1.08) !important;
            opacity: 1;
            background: rgba(0, 0, 0, 0.38);
        }

        /* ── 其余按钮默认隐藏，hover / 展开时显示 ── */
        .karaoke-rank-floating-disc-btn.is-left,
        .karaoke-rank-floating-disc-btn.is-right,
        .karaoke-rank-floating-disc-btn.is-bottom {
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.22s ease, transform 0.22s ease, color 0.18s ease;
        }
        .karaoke-rank-floating:hover .karaoke-rank-floating-disc-btn.is-left,
        .karaoke-rank-floating:hover .karaoke-rank-floating-disc-btn.is-right,
        .karaoke-rank-floating:hover .karaoke-rank-floating-disc-btn.is-bottom,
        .karaoke-rank-floating.is-expanded .karaoke-rank-floating-disc-btn.is-left,
        .karaoke-rank-floating.is-expanded .karaoke-rank-floating-disc-btn.is-right,
        .karaoke-rank-floating.is-expanded .karaoke-rank-floating-disc-btn.is-bottom {
            opacity: 1;
            pointer-events: auto;
        }
        .karaoke-rank-floating:hover #karaoke-rank-play-toggle-btn,
        .karaoke-rank-floating.is-expanded #karaoke-rank-play-toggle-btn {
            opacity: 1;
            pointer-events: auto;
            background: rgba(0, 0, 0, 0.36);
        }
        .karaoke-rank-floating:not(.has-song) .karaoke-rank-floating-disc-grooves {
            opacity: 0.18;
        }

        /* ── 设置按钮(is-top)也默认隐藏，hover/展开时显示 ── */
        .karaoke-rank-floating-disc-btn.is-top:not(#karaoke-rank-play-toggle-btn) {
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.22s ease, transform 0.22s ease, color 0.18s ease;
        }
        .karaoke-rank-floating:hover .karaoke-rank-floating-disc-btn.is-top:not(#karaoke-rank-play-toggle-btn),
        .karaoke-rank-floating.is-expanded .karaoke-rank-floating-disc-btn.is-top:not(#karaoke-rank-play-toggle-btn) {
            opacity: 1;
            pointer-events: auto;
        }

        /* ── 亮色主题（非 body.dark）圆盘适配 ── */
        body:not(.dark) .karaoke-rank-floating-disc {
            background:
                radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.56), transparent 52%),
                radial-gradient(circle at 68% 74%, rgba(var(--karaoke-rank-accent-rgb, var(--accent-rgb)), 0.08), transparent 48%),
                linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(240, 242, 248, 0.88));
            border-color: rgba(148, 163, 184, 0.22);
            box-shadow:
                0 18px 42px rgba(15, 23, 42, 0.12),
                inset 0 1px 0 rgba(255, 255, 255, 0.72),
                inset 0 -6px 14px rgba(15, 23, 42, 0.06);
        }
        body:not(.dark) .karaoke-rank-floating-disc-btn {
            color: var(--text-primary);
            text-shadow: 0 1px 6px rgba(255, 255, 255, 0.72);
        }
        body:not(.dark) .karaoke-rank-floating-disc-btn:hover:not(:disabled) {
            color: var(--accent);
        }
        body:not(.dark) #karaoke-rank-play-toggle-btn {
            background: rgba(255, 255, 255, 0.52);
            color: var(--text-primary);
            text-shadow: none;
        }
        body:not(.dark) #karaoke-rank-play-toggle-btn:hover:not(:disabled) {
            background: rgba(255, 255, 255, 0.68);
            color: var(--accent);
        }
        body:not(.dark) .karaoke-rank-floating-cover-shell {
            border-color: rgba(148, 163, 184, 0.28);
            box-shadow:
                0 6px 14px rgba(15, 23, 42, 0.08),
                0 0 0 1px rgba(255, 255, 255, 0.42) inset;
        }
        body:not(.dark) .karaoke-rank-floating.is-playing .karaoke-rank-floating-disc {
            border-color: rgba(var(--karaoke-rank-accent-rgb, var(--accent-rgb)), 0.32);
            box-shadow:
                0 18px 42px rgba(15, 23, 42, 0.14),
                inset 0 1px 0 rgba(255, 255, 255, 0.72),
                inset 0 -6px 14px rgba(15, 23, 42, 0.06),
                0 0 18px 2px rgba(var(--karaoke-rank-accent-rgb, var(--accent-rgb)), 0.14),
                0 0 38px 4px rgba(var(--karaoke-rank-accent-rgb, var(--accent-rgb)), 0.06);
        }
        body:not(.dark) .karaoke-rank-floating:not(.is-playing) .karaoke-rank-floating-disc {
            border-color: rgba(148, 163, 184, 0.18);
        }
        body:not(.dark) .karaoke-rank-floating.is-playing .karaoke-rank-floating-cover-shell {
            border-color: rgba(var(--karaoke-rank-accent-rgb, var(--accent-rgb)), 0.34);
            box-shadow:
                0 6px 14px rgba(15, 23, 42, 0.1),
                0 0 0 1px rgba(var(--karaoke-rank-accent-rgb, var(--accent-rgb)), 0.12) inset,
                0 0 12px 1px rgba(var(--karaoke-rank-accent-rgb, var(--accent-rgb)), 0.10);
        }

        .karaoke-rank-floating-panel {
            max-height: min(82vh, calc(var(--karaoke-rank-floating-song-list-height, 384px) + 128px));
        }

        .karaoke-rank-floating-song-wrap {
            flex: 1 1 auto;
        }

        .karaoke-rank-floating-list-setting {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 10px 12px;
            border-radius: 16px;
            border: 1px solid rgba(148, 163, 184, 0.18);
            background: rgba(148, 163, 184, 0.08);
        }

        .karaoke-rank-floating-list-setting-label {
            color: var(--text-primary);
            font-size: 0.82rem;
            font-weight: 700;
            white-space: nowrap;
        }

        .karaoke-rank-floating-list-setting-control {
            min-width: 0;
            flex: 1 1 auto;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .karaoke-rank-floating-list-setting-control input[type=range] {
            flex: 1 1 auto;
            min-width: 0;
            margin: 0;
        }

        .karaoke-rank-floating-list-setting-control strong {
            flex: 0 0 auto;
            min-width: 42px;
            color: var(--accent);
            font-size: 0.78rem;
            text-align: right;
            font-variant-numeric: tabular-nums;
        }

        .karaoke-rank-floating-song-list {
            max-height: var(--karaoke-rank-floating-song-list-height, 216px);
        }

        .karaoke-rank-floating-resize-handle {
            position: relative;
            height: 14px;
            cursor: ns-resize;
            touch-action: none;
            flex: 0 0 auto;
            margin: -2px 0 -6px;
        }
        .karaoke-rank-floating-resize-handle::before {
            content: '';
            position: absolute;
            left: 50%;
            top: 50%;
            width: 48px;
            height: 4px;
            border-radius: 999px;
            background: rgba(var(--accent-rgb), .32);
            transform: translate(-50%, -50%);
            opacity: .72;
            transition: opacity .16s ease;
        }
        .karaoke-rank-floating-resize-handle:hover::before {
            opacity: 1;
            background: rgba(var(--accent-rgb), .48);
        }

        @media (max-width: 560px) {
            .karaoke-rank-item {
                min-height: 188px;
            }

            .karaoke-rank-cover {
                height: 120px;
                min-height: 120px;
            }

            .karaoke-rank-floating-list-setting {
                flex-direction: column;
                align-items: stretch;
            }

            .karaoke-rank-floating-list-setting-control {
                width: 100%;
            }
        }

        /* ══════════════════════════════════════════════════
           悬浮歌词 - 控制按钮 / 关灯模式 / 呼吸灯
           ══════════════════════════════════════════════════ */

        /* ── 歌词浮窗内按钮通用样式（复用圆盘按钮风格） ── */
        .karaoke-floating-lyrics-btn {
            width: 30px;
            height: 30px;
            border-radius: 999px;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: none;
            background: rgba(var(--accent-rgb), .12);
            color: var(--text-primary);
            font-size: 1rem;
            font-weight: 800;
            cursor: pointer;
            line-height: 1;
            transition: transform 0.18s ease, color 0.18s ease, opacity 0.22s ease, background 0.18s ease;
            flex: 0 0 auto;
        }
        .karaoke-floating-lyrics-btn:hover:not(:disabled) {
            transform: scale(1.12);
            color: var(--accent);
            background: rgba(var(--accent-rgb), .22);
        }
        .karaoke-floating-lyrics-btn:disabled {
            opacity: 0.38;
            cursor: not-allowed;
        }
        body.dark .karaoke-floating-lyrics-btn {
            background: rgba(255, 255, 255, .08);
            color: rgba(255, 255, 255, .88);
        }
        body.dark .karaoke-floating-lyrics-btn:hover:not(:disabled) {
            color: #fff;
            background: rgba(var(--accent-rgb), .28);
        }

        /* ── 关灯按钮 ── */
        .karaoke-floating-lyrics-lights-btn {
            margin-left: auto;
        }
        .karaoke-floating-lyrics-lights-btn.is-off {
            background: rgba(var(--accent-rgb), .28);
            color: var(--accent);
            box-shadow: 0 0 12px rgba(var(--accent-rgb), .28);
        }

        /* ── 歌词区域 wrapper（左按钮 + body + 右按钮） ── */
        .karaoke-floating-lyrics-wrapper {
            display: flex;
            align-items: center;
            gap: 6px;
            flex: 1 1 auto;
            min-height: 0;
        }
        .karaoke-floating-lyrics-wrapper > .karaoke-floating-lyrics-body {
            flex: 1 1 auto;
            min-width: 0;
        }
        /* 左右切歌按钮默认隐藏，hover 时显示 */
        .karaoke-floating-lyrics-prev-btn,
        .karaoke-floating-lyrics-next-btn {
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.22s ease, transform 0.18s ease, color 0.18s ease, background 0.18s ease;
        }
        .karaoke-floating-lyrics:hover .karaoke-floating-lyrics-prev-btn,
        .karaoke-floating-lyrics:hover .karaoke-floating-lyrics-next-btn,
        .karaoke-floating-lyrics.is-controls-visible .karaoke-floating-lyrics-prev-btn,
        .karaoke-floating-lyrics.is-controls-visible .karaoke-floating-lyrics-next-btn {
            opacity: 1;
            pointer-events: auto;
        }

        /* ── 关灯按钮也 hover 才显示 ── */
        .karaoke-floating-lyrics-lights-btn {
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.22s ease, transform 0.18s ease, color 0.18s ease, background 0.18s ease;
        }
        .karaoke-floating-lyrics:hover .karaoke-floating-lyrics-lights-btn,
        .karaoke-floating-lyrics.is-controls-visible .karaoke-floating-lyrics-lights-btn,
        .karaoke-floating-lyrics-lights-btn.is-off {
            opacity: 1;
            pointer-events: auto;
        }
        body:not(.dark) .karaoke-floating-lyrics-lights-btn {
            opacity: 1;
            pointer-events: auto;
        }

        /* ── 音量滑块 ── */
        .karaoke-floating-lyrics-volume-control {
            flex: 1 1 auto;
            min-width: 0;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .karaoke-floating-lyrics-volume-control input[type=range] {
            flex: 1 1 auto;
            min-width: 0;
            margin: 0;
            -webkit-appearance: none;
            appearance: none;
            height: 6px;
            border-radius: 999px;
            border: 1px solid rgba(var(--accent-rgb), .18);
            background: linear-gradient(90deg, rgba(var(--accent-rgb), .28), rgba(var(--accent-rgb), .08));
            box-shadow: inset 0 1px 2px rgba(15,23,42,.08);
            outline: none;
        }
        .karaoke-floating-lyrics-volume-control input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 16px;
            height: 16px;
            margin-top: -5px;
            border-radius: 50%;
            border: 2px solid var(--accent);
            background: linear-gradient(180deg, #ffffff, rgba(255,255,255,.92));
            box-shadow: 0 6px 14px rgba(var(--accent-rgb), .22);
            cursor: pointer;
        }
        .karaoke-floating-lyrics-volume-control input[type=range]::-moz-range-thumb {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            border: 2px solid var(--accent);
            background: linear-gradient(180deg, #ffffff, rgba(255,255,255,.92));
            box-shadow: 0 6px 14px rgba(var(--accent-rgb), .22);
            cursor: pointer;
        }
        body.dark .karaoke-floating-lyrics-volume-control input[type=range] {
            border-color: rgba(var(--accent-rgb), .26);
            background: linear-gradient(90deg, rgba(var(--accent-rgb), .34), rgba(255,255,255,.08));
            box-shadow: inset 0 1px 3px rgba(2,6,23,.22);
        }
        .karaoke-floating-lyrics-volume-value {
            min-width: 36px;
            text-align: right;
            color: var(--accent);
            font-size: 0.74rem;
            font-weight: 800;
            font-variant-numeric: tabular-nums;
        }

        /* ══════════════════════════════════════
           关灯模式 (lights-off)
           ══════════════════════════════════════ */

        /* 关灯遮罩层 */
        .karaoke-lights-off-overlay {
            position: fixed;
            inset: 0;
            z-index: 950;
            background: rgba(0, 0, 0, 0.82);
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.6s ease;
        }
        .karaoke-lights-off-overlay.is-active {
            opacity: 1;
        }
        body.dark .karaoke-lights-off-overlay.is-active {
            background: rgba(0, 0, 0, 0.88);
        }

        /* 关灯模式下歌词浮窗提升 z-index 且添加呼吸灯 */
        .karaoke-floating-lyrics.is-lights-off {
            z-index: 970;
            animation: none;
            /* 浅色主题下关灯时使用不透明背景，避免遮罩透出导致变灰 */
            background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,250,252,.88));
            backdrop-filter: blur(14px) saturate(1.08);
            -webkit-backdrop-filter: blur(14px) saturate(1.08);
            box-shadow:
                0 26px 54px rgba(15,23,42,.22),
                inset 0 1px 0 rgba(255,255,255,.28),
                0 0 28px rgba(var(--accent-rgb), .18);
        }

        @keyframes lyrics-breathing {
            0%, 100% {
                box-shadow:
                    0 24px 48px rgba(15,23,42,.20),
                    inset 0 1px 0 rgba(255,255,255,.28),
                    0 0 28px 4px rgba(var(--accent-rgb), .12),
                    0 0 56px 8px rgba(var(--accent-rgb), .06);
                border-color: rgba(var(--accent-rgb), .22);
            }
            50% {
                box-shadow:
                    0 24px 48px rgba(15,23,42,.24),
                    inset 0 1px 0 rgba(255,255,255,.34),
                    0 0 42px 8px rgba(var(--accent-rgb), .24),
                    0 0 80px 14px rgba(var(--accent-rgb), .12);
                border-color: rgba(var(--accent-rgb), .38);
            }
        }

        body.dark .karaoke-floating-lyrics.is-lights-off {
            animation: none;
            /* 深色主题下关灯时也使用不透明背景 */
            background: linear-gradient(180deg, rgba(15,23,42,.94), rgba(15,23,42,.88));
            box-shadow:
                0 28px 58px rgba(2,6,23,.46),
                inset 0 1px 0 rgba(255,255,255,.06),
                0 0 32px rgba(var(--accent-rgb), .22);
        }

        @keyframes lyrics-breathing-dark {
            0%, 100% {
                box-shadow:
                    0 24px 52px rgba(2,6,23,.42),
                    inset 0 1px 0 rgba(255,255,255,.06),
                    0 0 32px 6px rgba(var(--accent-rgb), .16),
                    0 0 64px 10px rgba(var(--accent-rgb), .08);
                border-color: rgba(var(--accent-rgb), .28);
            }
            50% {
                box-shadow:
                    0 24px 52px rgba(2,6,23,.48),
                    inset 0 1px 0 rgba(255,255,255,.08),
                    0 0 48px 10px rgba(var(--accent-rgb), .30),
                    0 0 96px 18px rgba(var(--accent-rgb), .14);
                border-color: rgba(var(--accent-rgb), .44);
            }
        }

        /* ── 关灯模式下歌词文字也有微弱呼吸效果 ── */
        .karaoke-floating-lyrics.is-lights-off .karaoke-floating-line.is-current {
            animation: none;
            text-shadow: 0 0 20px rgba(var(--accent-rgb), .26);
        }
        @keyframes lyrics-text-glow {
            0%, 100% {
                text-shadow: 0 6px 18px rgba(var(--accent-rgb), .18);
            }
            50% {
                text-shadow: 0 6px 24px rgba(var(--accent-rgb), .36), 0 0 42px rgba(var(--accent-rgb), .14);
            }
        }

        /* ── 音量提示 tooltip ── */
        .karaoke-floating-lyrics-volume-badge {
            display: none;
            flex-shrink: 0;
            font-size: 0.75rem;
            font-weight: 600;
            padding: 2px 8px;
            border-radius: 8px;
            background: var(--accent, #2563EB);
            color: #fff;
            opacity: 0;
            transition: opacity 0.3s ease;
            pointer-events: none;
            white-space: nowrap;
        }
        .karaoke-floating-lyrics-volume-badge.is-visible {
            display: inline-block;
            opacity: 1;
        }
        .karaoke-floating-lyrics-volume-badge.is-fading {
            opacity: 0;
        }
        .karaoke-floating-lyrics-volume-tooltip {
            position: fixed;
            left: 0;
            top: 0;
            padding: 6px 12px;
            border-radius: 8px;
            background: rgba(0, 0, 0, 0.72);
            color: #fff;
            font-size: 0.76rem;
            font-weight: 700;
            white-space: nowrap;
            pointer-events: none;
            z-index: 10;
            animation: volume-tooltip-fade-in 0.2s ease;
            transform: translate(-50%, -50%);
        }
        @keyframes volume-tooltip-fade-in {
            from {
                opacity: 0;
                transform: translateX(-50%) translateY(4px);
            }
            to {
                opacity: 1;
                transform: translateX(-50%) translateY(0);
            }
        }

        /* ── 移动端适配 ── */
        @media (max-width: 640px) {
            .karaoke-floating-lyrics-controls {
                gap: 6px;
                padding-top: 6px;
            }
            .karaoke-floating-lyrics-btn {
                width: 26px;
                height: 26px;
                font-size: 0.88rem;
            }
            .karaoke-floating-lyrics-volume-value {
                font-size: 0.68rem;
                min-width: 30px;
            }
        }

        /* ── 悬浮歌词布局修正：关灯按钮固定右上角且不再单独占一行 ── */
        .karaoke-floating-lyrics-song-row {
            display: flex;
            align-items: center;
            gap: 8px;
            min-width: 0;
            min-height: 30px;
            padding-right: 42px;
            margin-bottom: 6px;
        }
        .karaoke-floating-lyrics-song-row .karaoke-floating-lyrics-song {
            flex: 1 1 auto;
            min-width: 0;
            text-align: left;
        }
        .karaoke-floating-lyrics-song-row .karaoke-floating-lyrics-volume-badge {
            flex: 0 0 auto;
        }
        .karaoke-floating-lyrics-head {
            position: absolute;
            top: 12px;
            right: 14px;
            z-index: 4;
            margin: 0;
            pointer-events: none;
        }
        .karaoke-floating-lyrics-head > * {
            pointer-events: auto;
        }
        .karaoke-floating-lyrics-lights-btn {
            width: 30px;
            height: 30px;
            min-width: 30px;
            min-height: 30px;
            margin-left: 0;
            flex: 0 0 30px;
        }
        .karaoke-floating-lyrics-wrapper {
            align-items: stretch;
            gap: 8px;
        }
        .karaoke-floating-lyrics-prev-btn,
        .karaoke-floating-lyrics-next-btn {
            align-self: center;
        }
        .karaoke-floating-lyrics-body {
            justify-content: center;
            padding: 0;
        }
        .karaoke-floating-lyrics-song-row,
        .karaoke-floating-lyrics-wrapper,
        .karaoke-floating-lyrics-body {
            position: relative;
            z-index: var(--karaoke-floating-z-content, 4);
        }
        .karaoke-floating-lyrics-head {
            z-index: var(--karaoke-floating-z-head, 5);
        }
        .karaoke-floating-line {
            position: relative;
            z-index: 1;
            width: 100%;
        }
        .karaoke-floating-lyrics.is-lyric-not-found-soft .karaoke-floating-line.is-current {
            color: var(--text-secondary);
            opacity: .36;
            text-shadow: none;
            transform: none;
        }
        .karaoke-lyric-status.is-not-found-soft,
        #karaoke-lyric-status.is-not-found-soft {
            opacity: .42;
        }
        .karaoke-lyrics-list.is-not-found-soft .karaoke-empty {
            opacity: .4;
        }
        body.dark .karaoke-floating-lyrics.is-lyric-not-found-soft .karaoke-floating-line.is-current {
            opacity: .46;
        }
        body.dark #karaoke-lyric-status.is-not-found-soft,
        body.dark .karaoke-lyrics-list.is-not-found-soft .karaoke-empty {
            opacity: .5;
        }

        @media (max-width: 640px) {
            .karaoke-floating-lyrics-song-row {
                min-height: 26px;
                padding-right: 38px;
                margin-bottom: 4px;
            }
            .karaoke-floating-lyrics-head {
                top: 10px;
                right: 12px;
            }
            .karaoke-floating-lyrics-lights-btn {
                width: 26px;
                height: 26px;
                min-width: 26px;
                min-height: 26px;
                flex-basis: 26px;
            }
        }