:root{--bg-page:#171923;--bg-card:#2A2B35;--text-primary:#E8E8E9;--text-secondary:#B9BABD;--border-light:#3E4048;--bg-panel:#31323B;--accent:#8B5CF6;--accent-hover:#9970F7;--accent-rgb:139,92,246;--accent-soft:rgba(139, 92, 246, 0.18);--accent-soft-strong:rgba(139, 92, 246, 0.25);--accent-outline:rgba(139, 92, 246, 0.34);--text-on-accent:#F8FAFC;--btn-secondary-bg:#2E3039;--btn-secondary-border:#41424B;--shadow:0 28px 60px -18px rgba(0, 0, 0, 0.56);--status-bg:#2A2B35;--status-border:#8B5CF6;--member-bg:#2C2E37;--member-border:#41424B;--input-bg:#373942;--download-btn-bg:#2E3039;--vu-bg:#45474F;--vu-fill:#8B5CF6;--radius-card:20px;--radius-panel:14px;--radius-control:12px;--radius-chat:14px;--radius-pill:22px;--scrollbar-size:10px;--scrollbar-track:rgba(148,163,184,.16);--scrollbar-thumb:rgba(var(--accent-rgb), .28);--scrollbar-thumb-hover:rgba(var(--accent-rgb), .42);--scrollbar-thumb-active:rgba(var(--accent-rgb), .56);--room-panel-base-height:396px;--room-panel-base-height-tablet:340px;--room-panel-base-height-mobile:296px;--karaoke-results-height:228px}@keyframes speaking-pulse{0%,100%{transform:translateY(calc(var(--speak-level,0) * -2px));box-shadow:0 0 0 1px var(--speaking-ring,rgba(59,130,246,.14)) inset,0 12px 24px var(--speaking-shadow,rgba(37,99,235,.12)),0 0 10px 0 var(--speaking-glow-soft,rgba(96,165,250,.08)),0 0 18px 0 var(--speaking-glow,rgba(59,130,246,.18))}50%{transform:translateY(calc(var(--speak-level,0) * -2px - 1px));box-shadow:0 0 0 1px var(--speaking-ring-strong,rgba(59,130,246,.24)) inset,0 16px 30px var(--speaking-shadow-strong,rgba(37,99,235,.18)),0 0 18px 0 var(--speaking-glow-soft,rgba(96,165,250,.08)),0 0 30px 2px var(--speaking-glow,rgba(59,130,246,.18))}}.member-list li.speaking{animation:none;font-weight:700;border-color:rgba(37,99,235,.34);box-shadow:0 0 0 1px rgba(59,130,246,.1) inset,0 12px 24px rgba(37,99,235,.1),0 0 12px rgba(59,130,246,.08);transform:none}body.dark .member-list li.speaking{border-color:rgba(96,165,250,.34);box-shadow:0 0 0 1px rgba(96,165,250,.12) inset,0 12px 26px rgba(37,99,235,.16),0 0 16px rgba(96,165,250,.1)}*{margin:0;padding:0;box-sizing:border-box;font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;transition:background-color .2s,border-color .2s}body{background:radial-gradient(circle at top left,rgba(var(--accent-rgb),.12),transparent 24%),radial-gradient(circle at right bottom,rgba(var(--accent-rgb),.08),transparent 26%),var(--bg-page);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px;color:var(--text-primary);transition:background .24s,color .2s}.app{max-width:1440px;width:100%}.card{background:var(--bg-card);border-radius:var(--radius-card);box-shadow:var(--shadow);padding:32px;margin-bottom:16px}.header{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:12px;margin-bottom:24px}.header-main-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;min-width:0}.header-title-cluster{display:flex;align-items:baseline;gap:12px;flex:1 1 auto;min-width:0;flex-wrap:wrap}.header h1{font-size:1.8rem;font-weight:600;display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}.header h1 span{background:var(--accent-soft);border:1px solid var(--accent-outline);color:var(--accent);font-size:.9rem;padding:4px 12px;border-radius:var(--radius-pill)}.header-room-inline{display:flex;align-items:center;gap:12px;min-width:0;flex:1 1 320px}.header-sub-row .header-room-inline{flex:0 1 auto;max-width:min(100%,460px);gap:0}.header-room-divider{color:var(--text-secondary);opacity:.45;font-size:1.1rem;font-weight:700;flex:0 0 auto}.header-room-title-block{min-width:0;display:flex;flex-direction:column;gap:8px}.header-sub-row .header-room-title-block{gap:6px}.header-room-title-block .room-name-display{font-size:clamp(1rem, .94rem + .42vw, 1.3rem);line-height:1.28}.header-room-title-block .room-title-edit input{width:min(420px,100%)}.header-tools{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap;margin-left:auto}.header-sub-row{display:block;width:100%}.room-meta-row{display:flex;align-items:center;gap:14px;min-width:0;flex-wrap:nowrap}body.room-active{align-items:flex-start}.theme-skin-shell{position:relative;display:flex;align-items:center;flex:0 1 auto}.theme-toggle{background:var(--bg-panel);border:1px solid var(--border-light);border-radius:18px;padding:10px 14px;cursor:pointer;display:flex;align-items:center;gap:12px;font-weight:500;color:var(--text-primary);min-height:54px;box-shadow:0 10px 24px rgba(15,23,42,.06);transition:transform .16s,border-color .18s,box-shadow .18s,background-color .18s}.theme-toggle:hover{background:var(--btn-secondary-bg);transform:translateY(-1px);border-color:var(--accent-outline);box-shadow:0 14px 28px rgba(var(--accent-rgb),.12)}.theme-toggle.is-open{border-color:var(--accent-outline);box-shadow:0 16px 30px rgba(var(--accent-rgb),.16)}.theme-toggle-icon{width:34px;height:34px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;font-size:1rem;background:linear-gradient(135deg,var(--accent-soft-strong),rgba(var(--accent-rgb),.08));box-shadow:inset 0 1px 0 rgba(255,255,255,.32);flex:0 0 auto}.theme-toggle-copy{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;text-align:left}.theme-toggle-copy strong{font-size:.92rem;line-height:1.1}.theme-toggle-copy small{color:var(--text-secondary);font-size:.74rem;line-height:1.2;white-space:nowrap}.theme-panel{position:absolute;top:calc(100% + 12px);right:0;z-index:1200;width:min(436px,calc(100vw - 28px));padding:18px;display:flex;flex-direction:column;gap:14px;border-radius:24px;border:1px solid rgba(148,163,184,.18);background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(248,250,252,.96));box-shadow:0 28px 60px rgba(15,23,42,.18);backdrop-filter:blur(18px)}body.dark .theme-panel{background:var(--bg-panel);border-color:var(--border-light);box-shadow:0 24px 56px rgba(0,0,0,.34)}.theme-panel-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.theme-panel-header h3{margin-bottom:6px;font-size:1.04rem}.theme-panel-header p{color:var(--text-secondary);font-size:.84rem;line-height:1.6}.theme-panel-section{padding:14px;border-radius:18px;border:1px solid rgba(148,163,184,.16);background:linear-gradient(180deg,rgba(255,255,255,.84),rgba(248,250,252,.92))}body.dark .theme-panel-section{background:var(--bg-card);border-color:var(--border-light)}.theme-panel-section-preview{padding:0;border:none;background:0 0}.theme-panel-label-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}.theme-panel-label{font-size:.9rem;font-weight:800;color:var(--text-primary)}.theme-panel-note,.theme-panel-note-block{color:var(--text-secondary);font-size:.79rem;line-height:1.6}.theme-panel-note-block{margin-top:2px}.theme-auto-contrast-tip{display:inline-flex;align-items:center;justify-content:center;padding:4px 10px;border-radius:999px;background:var(--accent-soft);border:1px solid var(--accent-outline);color:var(--accent);font-size:.74rem;font-weight:800}.theme-preset-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.theme-preset-btn{width:100%;display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;border:1px solid rgba(148,163,184,.18);background:rgba(255,255,255,.82);color:var(--text-primary);cursor:pointer;text-align:left;box-shadow:0 10px 20px rgba(15,23,42,.05);transition:transform .16s,border-color .18s,box-shadow .18s,background-color .18s}.theme-preset-btn:hover{transform:translateY(-1px);border-color:var(--accent-outline);box-shadow:0 16px 28px rgba(var(--accent-rgb),.12)}.theme-preset-btn.is-active{border-color:var(--accent);background:linear-gradient(180deg,rgba(var(--accent-rgb),.1),rgba(255,255,255,.96));box-shadow:0 0 0 1px var(--accent-outline) inset,0 18px 32px rgba(var(--accent-rgb),.16)}body.dark .theme-preset-btn{background:rgba(255,255,255,.04);border-color:rgba(71,85,105,.34);box-shadow:0 10px 18px rgba(0,0,0,.16)}body.dark .theme-preset-btn.is-active{background:linear-gradient(180deg,rgba(var(--accent-rgb),.18),rgba(15,23,42,.92))}.theme-preset-swatches{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto}.theme-preset-swatches i{width:18px;height:18px;border-radius:50%;background:var(--swatch);border:2px solid rgba(255,255,255,.78);box-shadow:0 4px 10px rgba(15,23,42,.1);display:inline-block}.theme-preset-meta{display:flex;flex-direction:column;gap:3px;min-width:0}.theme-preset-meta strong{font-size:.86rem;line-height:1.2}.theme-preset-meta small{color:var(--text-secondary);font-size:.74rem}.theme-color-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.theme-color-field{display:flex;flex-direction:column;gap:8px;min-width:0}.theme-color-field>span{font-size:.8rem;font-weight:700;color:var(--text-primary)}.theme-color-control{display:grid;grid-template-columns:62px minmax(0,1fr);gap:10px;align-items:center}.theme-color-control input[type=color]{width:100%;height:46px;padding:0;border:none;background:0 0;cursor:pointer;appearance:none;-webkit-appearance:none}.theme-color-control input[type=color]::-webkit-color-swatch-wrapper{padding:0}.theme-color-control input[type=color]::-moz-color-swatch,.theme-color-control input[type=color]::-webkit-color-swatch{border:1px solid rgba(148,163,184,.22);border-radius:14px;box-shadow:0 10px 18px rgba(15,23,42,.08)}.theme-color-control input[type=text]{width:100%;height:46px;padding:0 14px;border-radius:14px;border:1px solid rgba(148,163,184,.22);background:var(--input-bg);color:var(--text-primary);font-size:.88rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.theme-color-control input[type=text]:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 4px rgba(var(--accent-rgb),.12)}.theme-preview-card{padding:18px;border-radius:22px;border:1px solid rgba(148,163,184,.16);background:linear-gradient(145deg,rgba(var(--accent-rgb),.16),rgba(255,255,255,.88));box-shadow:0 20px 34px rgba(15,23,42,.08)}body.dark .theme-preview-card{background:linear-gradient(145deg,rgba(var(--accent-rgb),.22),rgba(15,23,42,.92));border-color:rgba(71,85,105,.36)}.theme-preview-topline{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:14px}.theme-preview-badge{display:inline-flex;align-items:center;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.48);color:var(--accent);font-size:.76rem;font-weight:800}body.dark .theme-preview-badge{background:rgba(15,23,42,.48);border-color:rgba(255,255,255,.08)}.theme-preview-subtitle{color:var(--text-secondary);font-size:.76rem}.theme-preview-surface{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px;border-radius:18px;background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.5);backdrop-filter:blur(10px)}body.dark .theme-preview-surface{background:rgba(15,23,42,.54);border-color:rgba(255,255,255,.06)}.theme-preview-chip{width:42px;height:42px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--accent),var(--accent-hover));color:var(--text-on-accent);font-weight:800;box-shadow:0 16px 24px rgba(var(--accent-rgb),.22)}.theme-preview-lines{display:flex;flex-direction:column;gap:4px;min-width:0}.theme-preview-lines strong{font-size:.92rem;line-height:1.35}.theme-preview-lines span{color:var(--text-secondary);font-size:.78rem;line-height:1.55}.theme-preview-btn{border:none;border-radius:14px;padding:10px 14px;background:linear-gradient(135deg,var(--accent),var(--accent-hover));color:var(--text-on-accent);font-weight:800;white-space:nowrap;box-shadow:0 16px 24px rgba(var(--accent-rgb),.22)}.header-desktop-download-btn{border:1px solid color-mix(in srgb,var(--border-light) 78%,var(--text-primary) 10%);border-radius:var(--radius-pill);padding:6px 12px;min-height:36px;display:inline-flex;align-items:center;justify-content:center;gap:7px;color:var(--text-primary);background:color-mix(in srgb,var(--btn-secondary-bg) 84%,var(--bg-card) 16%);font-size:.9rem;font-weight:800;cursor:pointer;text-decoration:none;white-space:nowrap;box-shadow:0 9px 20px rgba(15,23,42,.08),inset 0 1px 0 rgba(255,255,255,.34);transition:transform .18s,box-shadow .18s,border-color .18s,background .18s,color .18s}.header-desktop-download-btn:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--accent) 28%,var(--border-light));color:var(--text-primary);background:color-mix(in srgb,var(--btn-secondary-bg) 72%,var(--accent-soft) 28%);box-shadow:0 14px 26px rgba(var(--accent-rgb),.1),inset 0 1px 0 rgba(255,255,255,.46)}.header-desktop-download-btn .ui-svg{--icon-size:.92rem;opacity:.78}body.dark .header-desktop-download-btn{border-color:color-mix(in srgb,var(--border-light) 82%,#fff 8%);background:color-mix(in srgb,var(--btn-secondary-bg) 90%,#fff 5%);box-shadow:0 12px 24px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.06)}:root.audio-hut-desktop-frame .header-desktop-download-btn,body.mobile-layout .header-desktop-download-btn{display:none!important}@media (max-width:760px),(hover:none) and (pointer:coarse) and (max-width:980px){.header-desktop-download-btn{display:none!important}}.header-login-btn{border:1px solid rgba(var(--accent-rgb),.22);border-radius:var(--radius-pill);padding:8px 16px;min-height:42px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(var(--accent-rgb),.14),rgba(255,255,255,.92));color:var(--accent);font-weight:800;cursor:pointer;text-decoration:none;white-space:nowrap;box-shadow:0 9px 20px rgba(var(--accent-rgb),.1);transition:transform .18s,box-shadow .18s,border-color .18s,background .18s,color .18s}.header-login-btn:hover:not(:disabled){transform:translateY(-1px);border-color:rgba(var(--accent-rgb),.34);box-shadow:0 14px 26px rgba(var(--accent-rgb),.16),inset 0 1px 0 rgba(255,255,255,.72)}.header-login-btn.is-active{border-color:rgba(var(--accent-rgb),.4);box-shadow:0 16px 28px rgba(var(--accent-rgb),.2),inset 0 1px 0 rgba(255,255,255,.76)}body.dark .header-login-btn{background:linear-gradient(180deg,rgba(var(--accent-rgb),.24),rgba(30,41,59,.9));border-color:rgba(var(--accent-rgb),.28);box-shadow:0 12px 24px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.06)}.header-account-chip{background:var(--bg-panel);border:1px solid var(--border-light);border-radius:var(--radius-pill);padding:6px 12px 6px 8px;display:inline-flex;align-items:center;gap:8px;color:var(--text-primary);font-weight:700;cursor:pointer;box-shadow:0 7px 16px rgba(15,23,42,.05)}.header-account-chip:disabled{opacity:.58;cursor:not-allowed;box-shadow:none}.header-account-chip.is-active{border-color:rgba(var(--accent-rgb),.34);box-shadow:0 14px 28px rgba(var(--accent-rgb),.14),inset 0 1px 0 rgba(255,255,255,.72)}.header-account-icon{width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#60a5fa,#2563eb);color:#fff;font-size:.95rem;line-height:1;box-shadow:0 10px 20px rgba(37,99,235,.18);position:relative;isolation:isolate;overflow:visible;flex:0 0 auto}.header-account-image{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%;background:linear-gradient(135deg,#dbeafe,#bfdbfe)}.header-account-fallback{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%}.header-account-name{max-width:156px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.92rem}.header-account-chip[data-gift-package]:not([data-gift-package=""]){border-color:rgba(var(--accent-rgb),.24);box-shadow:0 8px 18px rgba(var(--accent-rgb),.1)}.header-account-chip[data-gift-package]:not([data-gift-package=""]) .header-account-icon{box-shadow:0 10px 20px rgba(37,99,235,.18),0 0 0 2px rgba(255,255,255,.9),0 0 0 5px rgba(255,255,255,.38),0 14px 28px var(--gift-frame-core-shadow,rgba(var(--accent-rgb),.18))}.header-account-chip[data-gift-package]:not([data-gift-package=""]) .header-account-icon::after,.header-account-chip[data-gift-package]:not([data-gift-package=""]) .header-account-icon::before{content:"";position:absolute;pointer-events:none;border-radius:inherit}.header-account-chip[data-gift-package]:not([data-gift-package=""]) .header-account-icon::before{inset:-5px;z-index:-2;background:var(--gift-frame-border-bg,linear-gradient(135deg,#fcd34d,#f59e0b));box-shadow:0 0 0 1px rgba(255,255,255,.56),0 0 0 3px rgba(255,255,255,.14),0 0 18px var(--gift-frame-core-shadow,rgba(var(--accent-rgb),.18));animation:var(--gift-frame-border-animation,none)}.header-account-chip[data-gift-package]:not([data-gift-package=""]) .header-account-icon::after{inset:-10px;z-index:-3;background:var(--gift-frame-halo-bg,radial-gradient(circle,rgba(var(--accent-rgb),.32),transparent 68%));filter:blur(10px);opacity:.74;animation:var(--gift-frame-halo-animation,none)}body.dark .header-account-chip{box-shadow:0 8px 18px rgba(0,0,0,.16)}body.dark .header-account-chip[data-gift-package]:not([data-gift-package=""]){box-shadow:0 10px 20px rgba(0,0,0,.22),0 0 0 1px rgba(var(--accent-rgb),.1) inset}.header-recharge-btn{border:1px solid rgba(var(--accent-rgb),.24);border-radius:var(--radius-pill);padding:8px 14px;min-height:42px;display:inline-flex;align-items:center;gap:8px;background:linear-gradient(180deg,rgba(var(--accent-rgb),.16),rgba(255,255,255,.94));color:var(--accent);font-weight:800;cursor:pointer;box-shadow:0 10px 22px rgba(var(--accent-rgb),.12),inset 0 1px 0 rgba(255,255,255,.68);transition:transform .18s,box-shadow .18s,border-color .18s,background .18s,color .18s}.header-recharge-btn:hover:not(:disabled){transform:translateY(-1px);border-color:rgba(var(--accent-rgb),.34);box-shadow:0 14px 26px rgba(var(--accent-rgb),.16),inset 0 1px 0 rgba(255,255,255,.74)}.header-recharge-btn.is-active{border-color:rgba(var(--accent-rgb),.4);box-shadow:0 16px 28px rgba(var(--accent-rgb),.2),inset 0 1px 0 rgba(255,255,255,.78)}.header-recharge-btn:disabled{opacity:.58;cursor:not-allowed;box-shadow:none}.header-recharge-icon{font-size:1rem;line-height:1;flex:0 0 auto}.header-recharge-copy{white-space:nowrap;line-height:1}body.dark .header-recharge-btn{background:linear-gradient(180deg,rgba(var(--accent-rgb),.24),rgba(30,41,59,.9));border-color:rgba(var(--accent-rgb),.28);box-shadow:0 12px 24px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.06)}