/* 錄音按鈕 / 懸浮窗 / 設定彈窗 */
        .room-icon-btn-recording {
            position: relative;
            overflow: visible;
        }
        .room-icon-btn-recording.is-active {
            color: #ef4444;
            border-color: rgba(239,68,68,.22);
            box-shadow: 0 12px 22px rgba(239,68,68,.12);
        }
        .room-icon-btn-recording.is-recording {
            color: #ef4444;
            border-color: rgba(239,68,68,.28);
            background: linear-gradient(180deg, rgba(254,242,242,.96), rgba(254,226,226,.94));
            box-shadow: 0 14px 26px rgba(239,68,68,.18), inset 0 1px 0 rgba(255,255,255,.72);
        }
        body.dark .room-icon-btn-recording.is-active {
            border-color: rgba(248,113,113,.3);
            box-shadow: 0 14px 26px rgba(239,68,68,.18);
        }
        body.dark .room-icon-btn-recording.is-recording {
            background: linear-gradient(180deg, rgba(69,10,10,.92), rgba(127,29,29,.82));
            border-color: rgba(248,113,113,.34);
            box-shadow: 0 16px 30px rgba(127,29,29,.32), inset 0 1px 0 rgba(255,255,255,.04);
        }
        .recording-toggle-dot {
            position: relative;
            display: inline-flex;
            width: 12px;
            height: 12px;
            border-radius: 999px;
            background: radial-gradient(circle at 30% 30%, #fca5a5, #ef4444 58%, #b91c1c 100%);
            box-shadow: 0 0 0 3px rgba(239,68,68,.16);
            transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
        }
        .recording-toggle-dot::after {
            content: '';
            position: absolute;
            inset: -6px;
            border-radius: inherit;
            background: radial-gradient(circle, rgba(239,68,68,.30), rgba(239,68,68,0) 72%);
            opacity: .8;
            transform: scale(.72);
            transition: transform .22s ease, opacity .22s ease;
        }
        .room-icon-btn-recording:hover .recording-toggle-dot {
            transform: scale(1.06);
            box-shadow: 0 0 0 4px rgba(239,68,68,.18);
        }
        .room-icon-btn-recording.is-recording .recording-toggle-dot,
        .room-icon-btn-recording.is-recording .recording-toggle-dot::after {
            animation: recording-dot-pulse 1.18s ease-in-out infinite;
        }
        .room-icon-btn-recording.is-recording .recording-toggle-dot::after {
            animation-delay: .08s;
        }

        .recording-floating-panel {
            position: fixed;
            right: 24px;
            bottom: 24px;
            z-index: 980;
            width: min(274px, calc(100vw - 32px));
            max-width: calc(100vw - 32px);
            pointer-events: none;
        }
        .recording-floating-panel.hidden {
            display: none;
        }
        .recording-floating-card {
            position: relative;
            display: flex;
            flex-direction: column;
            gap: 12px;
            padding: 14px;
            pointer-events: auto;
            border-radius: 20px;
            border: 1px solid rgba(148,163,184,.2);
            background:
                radial-gradient(circle at top right, rgba(var(--accent-rgb), .14), transparent 32%),
                linear-gradient(180deg, rgba(255,255,255,.88), rgba(248,250,252,.84));
            box-shadow: 0 22px 42px rgba(15,23,42,.16), inset 0 1px 0 rgba(255,255,255,.62);
            backdrop-filter: blur(18px) saturate(1.05);
            -webkit-backdrop-filter: blur(18px) saturate(1.05);
            color: var(--text-primary);
            overflow: hidden;
            isolation: isolate;
        }
        .recording-floating-card::before {
            content: '';
            position: absolute;
            left: 38%;
            right: -24%;
            top: -24%;
            height: 96px;
            pointer-events: none;
            background: radial-gradient(circle, rgba(var(--accent-rgb), .16), transparent 72%);
            opacity: .8;
        }
        .recording-floating-card > * {
            position: relative;
            z-index: 1;
        }
        body.dark .recording-floating-card {
            background:
                radial-gradient(circle at top right, rgba(var(--accent-rgb), .18), transparent 34%),
                linear-gradient(180deg, rgba(30,41,59,.88), rgba(15,23,42,.88));
            border-color: rgba(71,85,105,.42);
            box-shadow: 0 22px 44px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.04);
        }
        .recording-floating-status {
            min-height: 20px;
            display: flex;
            align-items: center;
            color: var(--text-secondary);
            font-size: 0.92rem;
            font-weight: 800;
            letter-spacing: .02em;
        }
        .recording-floating-status.is-recording {
            color: #ef4444;
        }
        .recording-floating-actions {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
        }
        .recording-floating-actions .mini-btn,
        .recording-download-btn {
            min-height: 38px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
        }
        #recording-panel-settings-btn,
        #recording-panel-action-btn,
        #recording-download-btn {
            border-color: rgba(var(--accent-rgb), .22);
            background: linear-gradient(180deg, rgba(var(--accent-rgb), .14), rgba(var(--accent-rgb), .08));
            color: var(--accent);
            box-shadow: 0 10px 20px rgba(var(--accent-rgb), .12);
        }
        body.dark #recording-panel-settings-btn,
        body.dark #recording-panel-action-btn,
        body.dark #recording-download-btn {
            background: linear-gradient(180deg, rgba(var(--accent-rgb), .22), rgba(255,255,255,.05));
            box-shadow: 0 12px 22px rgba(0,0,0,.22);
        }
        #recording-panel-settings-btn:hover:not(:disabled),
        #recording-panel-action-btn:hover:not(:disabled),
        #recording-download-btn:hover:not(:disabled) {
            border-color: var(--accent-outline);
            background: linear-gradient(180deg, rgba(var(--accent-rgb), .18), rgba(var(--accent-rgb), .10));
        }
        body.dark #recording-panel-settings-btn:hover:not(:disabled),
        body.dark #recording-panel-action-btn:hover:not(:disabled),
        body.dark #recording-download-btn:hover:not(:disabled) {
            background: linear-gradient(180deg, rgba(var(--accent-rgb), .28), rgba(255,255,255,.08));
        }
        #recording-panel-action-btn.is-recording,
        #recording-panel-action-btn.is-recording:hover:not(:disabled) {
            color: #ffffff;
            border-color: rgba(239,68,68,.26);
            background: linear-gradient(180deg, rgba(239,68,68,.94), rgba(220,38,38,.92));
            box-shadow: 0 16px 28px rgba(239,68,68,.26);
        }
        body.dark #recording-panel-action-btn.is-recording {
            color: #ffffff;
        }
        .recording-download-btn {
            width: 100%;
        }

        .recording-settings-modal {
            position: fixed;
            inset: 0;
            z-index: 1080;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            background: rgba(15,23,42,.48);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }
        .recording-settings-modal.hidden {
            display: none;
        }
        body.dark .recording-settings-modal {
            background: rgba(2,6,23,.78);
        }
        .recording-settings-dialog {
            position: relative;
            width: min(430px, 100%);
            padding: 22px;
            border-radius: 24px;
            border: 1px solid rgba(255,255,255,.28);
            background:
                radial-gradient(circle at top right, rgba(var(--accent-rgb), .16), transparent 36%),
                linear-gradient(180deg, rgba(255,255,255,.84), rgba(248,250,252,.80));
            box-shadow: 0 30px 60px rgba(15,23,42,.24), inset 0 1px 0 rgba(255,255,255,.64);
            backdrop-filter: blur(24px) saturate(1.06);
            -webkit-backdrop-filter: blur(24px) saturate(1.06);
            color: var(--text-primary);
            overflow: hidden;
            isolation: isolate;
        }
        .recording-settings-dialog > * {
            position: relative;
            z-index: 1;
        }
        body.dark .recording-settings-dialog {
            border-color: rgba(71,85,105,.42);
            background:
                radial-gradient(circle at top right, rgba(var(--accent-rgb), .18), transparent 38%),
                linear-gradient(180deg, rgba(30,41,59,.90), rgba(15,23,42,.88));
            box-shadow: 0 30px 58px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.04);
        }
        .recording-settings-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 16px;
            margin-bottom: 18px;
        }
        .recording-settings-header h3 {
            margin: 0 0 6px;
            font-size: 1.08rem;
        }
        .recording-settings-header p {
            margin: 0;
            color: var(--text-secondary);
            font-size: 0.88rem;
            line-height: 1.7;
        }
        .recording-settings-body {
            display: grid;
            gap: 14px;
        }
        .recording-settings-field {
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding: 12px 14px;
            border-radius: 18px;
            border: 1px solid rgba(148,163,184,.18);
            background: rgba(255,255,255,.48);
            box-shadow: inset 0 1px 0 rgba(255,255,255,.42);
        }
        body.dark .recording-settings-field {
            border-color: rgba(71,85,105,.36);
            background: rgba(30,41,59,.42);
            box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
        }
        .recording-settings-field > span {
            color: var(--text-primary);
            font-size: 0.9rem;
            font-weight: 700;
        }
        .recording-settings-field select {
            width: 100%;
            min-height: 44px;
            padding: 0 14px;
            border-radius: var(--radius-control);
            border: 1px solid var(--border-light);
            background: var(--bg-panel);
            color: var(--text-primary);
            box-shadow: 0 8px 18px rgba(15,23,42,.05), inset 0 1px 0 rgba(255,255,255,.55);
        }
        .recording-settings-field select:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .12), 0 12px 24px rgba(var(--accent-rgb), .10);
        }
        body.dark .recording-settings-field select {
            background: rgba(15,23,42,.78);
            box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
        }

        @keyframes recording-dot-pulse {
            0%, 100% {
                transform: scale(1);
                opacity: 1;
                filter: saturate(1);
            }
            50% {
                transform: scale(1.1);
                opacity: .86;
                filter: saturate(1.08);
            }
        }

        @media (max-width: 640px) {
            .recording-floating-panel {
                right: 12px;
                bottom: 12px;
                width: min(100vw - 24px, 300px);
                max-width: calc(100vw - 24px);
            }
            .recording-floating-card {
                padding: 12px;
                border-radius: 18px;
            }
            .recording-settings-modal {
                align-items: flex-end;
                padding: 12px;
            }
            .recording-settings-dialog {
                width: 100%;
                padding: 18px;
                border-radius: 22px;
            }

            .karaoke-rank-floating,
            .karaoke-floating-lyrics {
                display: none !important;
            }
        }