.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,box-shadow .18s,filter .18s}.recording-toggle-dot::after{content:'';position:absolute;inset:-6px;border-radius:inherit;background:radial-gradient(circle,rgba(239,68,68,.3),rgba(239,68,68,0) 72%);opacity:.8;transform:scale(.72);transition:transform .22s,opacity .22s}.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:1.18s ease-in-out infinite recording-dot-pulse}.room-icon-btn-recording.is-recording .recording-toggle-dot::after{animation-delay:.08s}.recording-floating-panel{position:fixed;right:16px;bottom:16px;z-index:980;width:min(274px,calc(100vw - 32px));max-width:calc(100vw - 32px);pointer-events:none}.recording-floating-panel.is-positioned{right:auto;bottom:auto}.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;cursor:grab;touch-action:none}.recording-floating-panel.is-dragging .recording-floating-card{cursor:grabbing;user-select:none}.recording-floating-card a,.recording-floating-card button,.recording-floating-card input,.recording-floating-card select,.recording-floating-card textarea{cursor:pointer;touch-action:auto}.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,.3),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:.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-download-btn,.recording-floating-actions .mini-btn{min-height:38px;display:inline-flex;align-items:center;justify-content:center;font-weight:700}#recording-download-btn,#recording-panel-action-btn,#recording-panel-settings-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-download-btn,body.dark #recording-panel-action-btn,body.dark #recording-panel-settings-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-download-btn:hover:not(:disabled),#recording-panel-action-btn:hover:not(:disabled),#recording-panel-settings-btn:hover:not(:disabled){border-color:var(--accent-outline);background:linear-gradient(180deg,rgba(var(--accent-rgb),.18),rgba(var(--accent-rgb),.1))}body.dark #recording-download-btn:hover:not(:disabled),body.dark #recording-panel-action-btn:hover:not(:disabled),body.dark #recording-panel-settings-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:#fff;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:#fff}.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(0,0,0,.58)}.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,.8));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:var(--border-light);background:var(--bg-panel);box-shadow:0 24px 56px rgba(0,0,0,.34),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:.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:var(--border-light);background:var(--bg-card);box-shadow:none}.recording-settings-field>span{color:var(--text-primary);font-size:.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:0;border-color:var(--accent);box-shadow:0 0 0 4px rgba(var(--accent-rgb),.12),0 12px 24px rgba(var(--accent-rgb),.1)}body.dark .recording-settings-field select{background:var(--bg-panel);box-shadow:none}@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-floating-lyrics,.karaoke-rank-floating{display:none!important}}