#app{width:100%;min-width:0;flex:1 1 100%;}:root{--radius-card:8px;--radius-control:6px;--radius-pill:999px;--text-primary:#1e2024;--text-secondary:#4b5058;--text-muted:#80848e;--color-success:#3ba55d;--color-warning:#d9a13b;--color-danger:#d83c3e;--bg-page:#eceef1;--bg-card:#ffffff;--border-light:#e0e2e6;--bg-panel:#f4f5f7;--accent:#5865f2;--accent-hover:#4752c4;--btn-secondary-bg:#e8eaed;--btn-secondary-border:#d4d7dc;--shadow:0 4px 12px rgba(15,23,42,0.08);--status-bg:#f0f1f3;--status-border:#5865f2;--member-bg:#ffffff;--member-border:#e0e2e6;--input-bg:#f4f5f7;--download-btn-bg:#eef0fe;--vu-bg:#d1d5db;--vu-fill:#5865f2;}body.dark{--text-primary:#f5f5f7;--text-secondary:rgba(235,235,245,.68);--text-muted:rgba(235,235,245,.46);--color-success:#3ba55d;--color-warning:#e0a948;--color-danger:#ed4245;--bg-page:#1c1c1e;--bg-card:#2c2c2e;--bg-elevated:#3a3a3c;--border-light:rgba(255,255,255,.12);--bg-panel:#242426;--accent:#5865f2;--accent-hover:#4752c4;--btn-secondary-bg:#3a3a3c;--btn-secondary-border:rgba(255,255,255,.18);--shadow:0 8px 24px rgba(0,0,0,.32);--status-bg:#242426;--status-border:#5865f2;--member-bg:#2c2c2e;--member-border:rgba(255,255,255,.12);--input-bg:#1c1c1e;--download-btn-bg:#2c2c2e;--vu-bg:#3a3a3c;--vu-fill:#5865f2;}body.dark{background:var(--bg-page);}body.dark::before,body.dark::after{content:none;display:none;}body.dark .card{background:var(--bg-card);border-color:var(--border-light);box-shadow:var(--shadow);}body.dark .header h1 span{background:rgba(88,101,242,.14);color:#c2c8ff;border-color:rgba(88,101,242,.32);}body.dark .theme-toggle,body.dark .tab-aux-btn,body.dark .btn-secondary,body.dark .logout-btn,body.dark .download-btn,body.dark .mini-btn,body.dark .switch-field,body.dark .mic-check-panel,body.dark .invite-actions-menu,body.dark .invite-dialog,body.dark .quick-join-choice-dialog,body.dark .announcement-dialog{background:var(--btn-secondary-bg);border-color:var(--btn-secondary-border);color:var(--text-primary);box-shadow:none;}body.dark .invite-actions-menu,body.dark .invite-dialog,body.dark .quick-join-choice-dialog,body.dark .announcement-dialog,body.dark .mic-check-panel{background:var(--bg-elevated);box-shadow:var(--shadow);}body.dark .theme-toggle:hover,body.dark .tab-aux-btn:hover,body.dark .btn-secondary:hover:not(:disabled),body.dark .logout-btn:hover,body.dark .download-btn:hover,body.dark .mini-btn:hover:not(:disabled){background:#363b45;border-color:#404652;}body.dark .login-section,body.dark .user-info,body.dark .room-tabs-wrap,body.dark .room-workspace,body.dark .room-header-row,body.dark .room-list,body.dark .search-card,body.dark .members-area,body.dark .create-form,body.dark .device-panel{background:var(--bg-card);border-color:var(--border-light);box-shadow:none;}body.dark .login-section,body.dark .user-info{border-color:var(--border-light);}#lobby.email-lock{opacity:.58;pointer-events:none;user-select:none;}body.dark .room-tabs-wrap,body.dark .room-workspace,body.dark .room-header-row{background:var(--bg-card);}body.dark .search-card,body.dark .room-title-actions,body.dark #room-chat-panel,body.dark #room-chat-messages,body.dark .room-chat-bubble,body.dark .form-row input,body.dark .lobby-toolbar input,body.dark .lobby-toolbar select,body.dark .room-rename-input-wrap input,body.dark .device-row select,body.dark .control-item select,body.dark .room-password-row input,body.dark #room-chat-input{background:var(--input-bg);border-color:var(--border-light);color:var(--text-primary);box-shadow:none;}body.dark #room-chat-panel,body.dark .search-card{background:var(--bg-card);}body.dark .lobby-toolbar input::placeholder,body.dark .room-rename-input-wrap input::placeholder,body.dark #room-chat-input::placeholder{color:var(--text-muted);}body.dark .room-list .room-item{background:var(--bg-panel);border-color:var(--border-light);}body.dark .room-list .room-item:hover{background:var(--bg-elevated);}body.dark .status-bar{background:var(--bg-panel);color:var(--text-secondary);border-left-color:var(--accent);}body.dark .member-list li{background:var(--member-bg);border-color:var(--member-border);box-shadow:none;}body.dark .member-list li.self{background:var(--bg-elevated);border-color:rgba(88,101,242,.55);}body.dark .room-chat-role{background:var(--bg-panel);border-color:var(--border-light);}body.dark .announcement-dialog .announcement-content,body.dark .quick-join-choice-desc,body.dark .invite-url-box,body.dark .mic-check-panel,body.dark .room-rename-hint,body.dark .footer,body.dark .room-chat-meta,body.dark .room-chat-item.system .room-chat-bubble{color:var(--text-secondary);}body.dark .qr-box{background:rgba(255,255,255,.04);border:1px solid var(--border-light);}body.dark .room-chat-item.system .room-chat-bubble{background:var(--bg-panel);border-color:var(--border-light);}body.dark .room-chat-item.self .room-chat-bubble{background:linear-gradient(135deg,rgba(248,250,252,.96),rgba(226,232,240,.9));color:#172033;border-color:rgba(148,163,184,.28);}body.dark .switch-field{background:var(--bg-panel);}body.dark .switch-slider{background:#4b5058;}body.dark .switch-slider:before{background:#e5e7eb;}@keyframes speaking-pulse{0%{box-shadow:0 0 0 0 var(--accent);}50%{box-shadow:0 0 12px 4px var(--accent);}100%{box-shadow:0 0 0 0 var(--accent);}}.member-list li.speaking{animation:none;border-color:transparent;background:rgba(88,101,242,.08);font-weight:700;box-shadow:inset 2px 0 0 var(--accent);}body.dark .member-list li.speaking{background:rgba(88,101,242,.10);box-shadow:inset 2px 0 0 var(--accent);}*{margin:0;padding:0;box-sizing:border-box;font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;transition:background-color 0.2s,border-color 0.2s;}body{background:var(--bg-page);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:12px;color:var(--text-primary);position:relative;overflow-x:hidden;}body::before,body::after{content:"";position:fixed;inset:auto;width:42vw;height:42vw;border-radius:50%;pointer-events:none;z-index:0;filter:blur(60px);opacity:.55;}body::before{top:-12vw;left:-10vw;background:radial-gradient(circle,rgba(37,99,235,.16),rgba(37,99,235,0) 68%);}body::after{right:-12vw;bottom:-14vw;background:radial-gradient(circle,rgba(16,185,129,.12),rgba(16,185,129,0) 68%);}.app{max-width:1700px;width:100%;position:relative;z-index:1;}.card{background:var(--bg-card);border:1px solid rgba(148,163,184,.14);border-radius:8px;box-shadow:0 18px 44px rgba(15,23,42,.08);padding:24px;margin-bottom:16px;backdrop-filter:none;}.header{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;gap:16px;}.header-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;margin-left:auto;}.header h1{font-size:2.05rem;font-weight:800;display:flex;align-items:center;gap:8px;letter-spacing:-0.03em;}.header h1 span{background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(241,245,249,.88));color:var(--accent);font-size:0.9rem;padding:6px 14px;border-radius:999px;border:1px solid rgba(37,99,235,.14);}.theme-toggle{background:var(--bg-panel);border:1px solid var(--border-light);border-radius:var(--radius-control);padding:9px 16px;cursor:pointer;display:flex;align-items:center;gap:8px;font:inherit;font-weight:600;color:var(--text-primary);box-shadow:none;}.theme-toggle:hover{background:var(--btn-secondary-bg);}.login-modal{position:fixed;inset:0;z-index:1400;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(15,23,42,0.62);backdrop-filter:none;}.login-modal.open{display:flex;}.login-section{width:min(420px,100%);background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,250,252,.99));border:1px solid rgba(148,163,184,.16);border-radius:8px;padding:22px 22px 18px;box-shadow:0 28px 70px rgba(15,23,42,.20);position:relative;}.login-section .login-close-btn{position:absolute;top:12px;right:12px;width:34px;height:34px;border:none;border-radius:999px;background:rgba(148,163,184,.14);color:var(--text-secondary);font-size:1rem;cursor:pointer;}.login-section .login-close-btn:hover{background:rgba(148,163,184,.22);color:var(--text-primary);}.login-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px;}.login-hero h3{margin-bottom:6px;color:var(--text-primary);font-size:1.12rem;font-weight:800;letter-spacing:-0.02em;}.login-hero p{font-size:0.92rem;color:var(--text-secondary);line-height:1.55;}.login-input{display:grid;grid-template-columns:1fr;gap:12px;flex-wrap:wrap;margin-bottom:12px;align-items:center;}.login-fields{display:grid;grid-template-columns:1fr;gap:12px;}.login-input input{width:100%;min-width:0;height:46px;padding:0 16px;border:1px solid var(--border-light);border-radius:6px;background:var(--input-bg);color:var(--text-primary);box-shadow:inset 0 1px 0 rgba(255,255,255,.4);}.login-password-wrap{position:relative;min-width:0;}.login-password-wrap input{padding-right:48px;}.login-eye-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:none;background:transparent;color:var(--text-secondary);font-size:1rem;cursor:pointer;padding:6px;border-radius:999px;}.login-eye-btn:hover{color:var(--text-primary);background:rgba(148,163,184,.14);}.login-actions{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;}.login-actions .guest-hint{font-size:0.86rem;color:var(--text-secondary);flex:1 1 auto;min-width:0;}.login-actions .btn{flex:0 0 auto;}.login-passwordless{display:grid;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border-light);}.login-passwordless.hidden{display:none;}.login-passwordless-toggle{appearance:none;border:0;background:transparent;color:var(--accent);font:inherit;font-weight:700;padding:0;cursor:pointer;}.login-passwordless-toggle.hidden{display:none;}.login-passwordless-toggle:hover{text-decoration:underline;}.login-passwordless-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;}.login-passwordless-captcha{display:grid;grid-template-columns:auto minmax(74px,100px) auto;gap:8px;align-items:center;color:var(--text-secondary);font-size:.9rem;}.login-account-select{display:grid;gap:8px;padding:10px;border:1px solid var(--border-light);border-radius:8px;background:rgba(248,250,252,.9);}.login-account-select.hidden{display:none;}.login-account-select-title{color:var(--text-secondary);font-size:.86rem;font-weight:700;}.login-account-option{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:center;padding:9px 10px;border:1px solid var(--border-light);border-radius:8px;background:#fff;cursor:pointer;}.login-account-option strong{display:block;color:var(--text-primary);line-height:1.35;}.login-account-option small{display:inline-flex;gap:6px;flex-wrap:wrap;color:var(--text-secondary);font-size:.78rem;}.login-account-option input{width:16px;height:16px;margin:0;}.public-id-badge{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:7px;border:1px solid rgba(99,102,241,.25);background:rgba(99,102,241,.08);color:#4f46e5;font-size:.76rem;font-weight:700;line-height:1.2;}.public-id-wrap{display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap;min-width:0;}.public-id-badge.vanity{position:relative;overflow:hidden;border-color:rgba(180,83,9,.32);background:linear-gradient(135deg,rgba(255,247,237,.96),rgba(254,215,170,.72));color:#92400e;box-shadow:inset 0 1px 0 rgba(255,255,255,.82),0 4px 12px rgba(180,83,9,.12);}.public-id-badge.vanity-id{position:relative;overflow:hidden;border-color:rgba(180,83,9,.42);background:linear-gradient(135deg,rgba(255,251,235,.98),rgba(253,230,138,.78) 48%,rgba(255,247,237,.96));color:#78350f;font-weight:900;box-shadow:inset 0 1px 0 rgba(255,255,255,.88),0 5px 14px rgba(180,83,9,.16);}.public-id-badge.vanity::after,.public-id-badge.vanity-id::after{content:"";position:absolute;inset:-35% auto -35% -55%;width:34%;pointer-events:none;transform:skewX(-18deg);background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.45),rgba(255,255,255,0));opacity:0;animation:vanity-badge-sheen 6.5s ease-in-out infinite;}.public-id-badge.vanity-id::after{animation-delay:.8s;}@keyframes vanity-badge-sheen{0%,58%{left:-55%;opacity:0;}66%{opacity:.42;}78%{left:125%;opacity:0;}100%{left:125%;opacity:0;}}@media (prefers-reduced-motion:reduce){.public-id-badge.vanity::after,.public-id-badge.vanity-id::after{animation:none;display:none;}}.public-id-badge.official{border-color:rgba(239,68,68,.34);background:rgba(239,68,68,.10);color:#dc2626;}.public-id-badge.custom{border-color:var(--custom-tag-border,rgba(20,184,166,.34));background:var(--custom-tag-bg,rgba(20,184,166,.11));color:var(--custom-tag-color,#0f766e);box-shadow:var(--custom-tag-shadow,none);}.profile-avatar-section{display:grid;gap:10px;margin-bottom:14px;}.profile-avatar-current{width:68px;height:68px;border-radius:50%;overflow:hidden;border:1px solid var(--border-light);background:var(--bg-panel);}.profile-avatar-current img{width:100%;height:100%;object-fit:cover;display:block;}.profile-avatar-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}.member-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;display:block;border:1px solid var(--border-light);background:var(--bg-panel);}.room-chat-avatar{width:22px;height:22px;border-radius:50%;object-fit:cover;display:inline-block;border:1px solid var(--border-light);background:var(--bg-panel);flex:0 0 auto;}.member-action-avatar{width:58px;height:58px;border-radius:50%;object-fit:cover;display:block;border:1px solid var(--border-light);background:var(--bg-panel);}.member-action-profile{display:flex;align-items:center;gap:12px;min-width:0;}.avatar-clickable{cursor:zoom-in;}.avatar-clickable:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}.room-chat-avatar.avatar-member-action{cursor:pointer;}.login-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:6px;}.login-meta .guest-hint{font-size:0.9rem;color:var(--text-secondary);}.login-sub-links{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}.login-sub-links a{color:var(--accent);text-decoration:none;font-weight:600;}.user-info{display:flex;gap:16px;align-items:center;margin-bottom:24px;flex-wrap:wrap;background:linear-gradient(180deg,rgba(248,250,252,.94),rgba(241,245,249,.92));padding:16px 22px;border-radius:8px;border:1px solid rgba(148,163,184,.14);}.user-info label{font-weight:500;color:var(--text-secondary);}.room-tabs-wrap,.room-workspace,.room-header-row{background:rgba(255,255,255,.22);border-radius:8px;}.room-tabs-wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:24px;flex-wrap:wrap;}.room-tabs{display:flex;gap:8px;margin-bottom:0;flex-wrap:wrap;}.tab-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-left:auto;flex-wrap:wrap;}.tab-aux-btn{padding:9px 18px;border:1px solid var(--btn-secondary-border);background:var(--btn-secondary-bg);border-radius:var(--radius-control);font-weight:600;color:var(--text-secondary);cursor:pointer;white-space:nowrap;box-shadow:none;}.invite-actions-group{position:relative;display:flex;justify-content:flex-end;}.invite-actions-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:220px;display:none;flex-direction:column;gap:8px;padding:12px;border-radius:6px;border:1px solid rgba(148,163,184,.22);background:var(--bg-card);box-shadow:0 12px 28px rgba(15,23,42,.12);z-index:20;}.invite-actions-group.open .invite-actions-menu{display:flex;}.invite-actions-menu .btn{width:100%;justify-content:center;}.tab-btn{padding:9px 20px;border:1px solid var(--border-light);background:transparent;border-radius:var(--radius-control);font-weight:600;color:var(--text-secondary);cursor:pointer;pointer-events:auto !important;}.tab-btn.active{background:var(--accent);color:white;border-color:var(--accent);box-shadow:none;}.tab-content{display:none;margin-top:20px;}.tab-content.active{display:block;}.room-list{background:linear-gradient(180deg,rgba(248,250,252,.96),rgba(241,245,249,.92));border:1px solid rgba(148,163,184,.16);border-radius:8px;padding:16px;max-height:300px;overflow-y:auto;}.lobby-toolbar{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:16px;align-items:stretch;margin-bottom:18px;}.search-card{background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(248,250,252,.94));border:1px solid rgba(148,163,184,.16);border-radius:8px;padding:14px 16px;box-shadow:0 10px 24px rgba(15,23,42,0.045);min-width:0;}.search-card.search-wide{flex:1 1 auto;min-width:0;}.search-card.search-narrow{flex:0 0 190px;}.search-card label{display:block;margin-bottom:8px;font-weight:700;color:var(--text-primary);}.lobby-toolbar input,.lobby-toolbar select{width:100%;height:48px;border-radius:6px;background:rgba(255,255,255,.96);border:1px solid rgba(148,163,184,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.6);padding:0 14px;font-size:0.98rem;}.lobby-toolbar input::placeholder{color:rgba(100,116,139,.55);}.search-card select{width:100%;min-width:0;}.toolbar-actions{display:none;}.toolbar-actions .btn{min-width:124px;height:48px;border-radius:6px;padding:0 16px;}.toolbar-actions .btn.btn-secondary{background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(241,245,249,.92));border:1px solid rgba(148,163,184,.24);}#load-more-rooms-btn{display:none;}.room-list-more-row{display:flex;justify-content:center;margin-top:14px;}.room-list-more-row .btn{min-width:148px;}.room-header-row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"title leave" "actions actions";gap:16px 18px;align-items:start;margin-bottom:18px;}.room-title-block{grid-area:title;min-width:0;}.room-title-actions{grid-area:actions;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:12px;width:100%;padding:14px 16px;border:1px solid rgba(148,163,184,.22);border-radius:6px;background:var(--bg-card);box-shadow:none;}.room-title-actions .btn{min-width:142px;border-radius:6px;}.room-rename-input-wrap{min-width:0;}.room-header-row>.room-exit-actions{grid-area:leave;display:flex;justify-content:flex-end;align-items:center;gap:10px;flex-wrap:wrap;}.room-exit-actions .btn{min-width:108px;}.room-rename-input-wrap input{width:100%;height:48px;border-radius:6px;background:rgba(255,255,255,.92);}.room-rename-hint{margin-top:7px;font-size:0.84rem;color:var(--text-secondary);}#call-interface{display:flex;flex-direction:column;gap:20px;}.room-workspace{display:grid;grid-template-columns:minmax(0,1fr) 360px;grid-template-areas:"controls chat" "members chat";gap:16px;align-items:start;}.room-left-column,.room-right-column{min-width:0;display:contents;}.room-left-column>.device-panel{grid-area:controls;margin-bottom:0;}.members-area.members-bottom{grid-area:members;display:flex;flex-direction:column;gap:10px;padding-top:16px;min-height:0;margin-bottom:0;}.room-right-column>#room-chat-panel{grid-area:chat;}.speaking-summary{display:none !important;}.member-list{max-height:220px;overflow-y:auto;overflow-x:visible;padding-top:4px;margin-top:0;padding-right:6px;align-content:flex-start;}#room-chat-panel{min-height:0;align-self:stretch;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:0;padding-bottom:16px;margin-bottom:0;height:100%;}#room-chat-messages{min-height:360px;height:auto;max-height:520px;}.status-bar{margin-top:0;}@media (max-width:980px){body{padding:10px;}.app{max-width:100%;}.card{padding:20px;}.lobby-toolbar{grid-template-columns:1fr;}.toolbar-actions{justify-content:stretch;}.toolbar-actions{flex-wrap:wrap;justify-content:stretch;}.toolbar-actions .btn{flex:1 1 150px;}.room-header-row{grid-template-columns:1fr;grid-template-areas:"title" "leave" "actions";}.room-title-actions{align-items:stretch;grid-template-columns:1fr;}.room-title-actions .btn{width:100%;min-width:0;}.room-header-row>.room-exit-actions{justify-content:stretch;}.room-exit-actions .btn{flex:1 1 140px;}.room-rename-input-wrap{min-width:100%;}.room-workspace{grid-template-columns:1fr;grid-template-areas:"controls" "chat" "members";}.member-list{max-height:none;}#room-chat-panel{grid-template-rows:auto minmax(0,260px) auto auto;}#room-chat-messages{min-height:260px;height:260px;max-height:260px;}}.room-item{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border-light);cursor:pointer;border-radius:6px;}.room-item:hover{background:var(--bg-card);}.room-item .info{display:flex;align-items:center;gap:12px;}.room-item .name{font-weight:500;}.room-item .badge{background:var(--bg-card);padding:2px 8px;border-radius:8px;font-size:0.8rem;color:var(--text-secondary);}.room-item .lock{color:var(--accent);margin-left:8px;}.create-form{background:var(--bg-panel);border-radius:8px;padding:24px;}.form-row{margin-bottom:16px;}.form-row label{display:block;margin-bottom:6px;font-weight:500;color:var(--text-secondary);}.form-row input{width:100%;padding:12px 16px;border:1px solid var(--border-light);border-radius:8px;background:var(--input-bg);color:var(--text-primary);}.btn{padding:10px 20px;border:none;border-radius:var(--radius-control);font-size:0.94rem;font-weight:600;cursor:pointer;background:var(--accent);color:white;transition:background 0.15s,border-color 0.15s;}.btn:hover:not(:disabled){background:var(--accent-hover);}.btn:disabled{opacity:0.5;cursor:not-allowed;pointer-events:none;}.btn-secondary{background:var(--btn-secondary-bg);border:1px solid var(--btn-secondary-border);color:var(--text-primary);}.btn-secondary:hover:not(:disabled){background:var(--border-light);}.call-panel{margin-top:24px;}.device-panel{background:var(--bg-panel);border-radius:8px;padding:22px;margin-bottom:20px;border:1px solid var(--border-light);}.device-row,.volume-row,.vu-row{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:16px;}.device-row label,.volume-row label,.vu-row label{font-weight:500;color:var(--text-secondary);width:100px;text-align:right;}.device-row select{flex:1;min-width:200px;padding:12px 16px;border-radius:8px;border:1px solid var(--border-light);background:var(--input-bg);color:var(--text-primary);}.volume-row input[type=range]{flex:0 1 360px;width:360px;max-width:100%;height:6px;background:linear-gradient(90deg,rgba(96,165,250,.22),rgba(34,197,94,.18));border-radius:999px;border:1px solid rgba(148,163,184,.18);-webkit-appearance:none;appearance:none;outline:none;}.volume-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#ffffff;border:2px solid var(--accent);box-shadow:0 2px 10px rgba(0,0,0,.18);cursor:pointer;}.volume-row input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#ffffff;border:2px solid var(--accent);box-shadow:0 2px 10px rgba(0,0,0,.18);cursor:pointer;}.volume-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;background:var(--accent);border-radius:50%;cursor:pointer;}.volume-value{min-width:60px;color:var(--accent);font-weight:600;text-align:right;cursor:text;padding:2px 4px;border-radius:4px;}.volume-value:hover{background:var(--bg-card);outline:1px solid var(--accent);}.vu-meter{flex:1;height:20px;background:var(--vu-bg);border-radius:6px;overflow:hidden;position:relative;}.vu-fill{height:100%;width:0%;background:linear-gradient(90deg,#22c55e,#eab308,#ef4444);transition:width 0.05s linear;border-radius:6px;}.members-area{background:var(--bg-panel);border-radius:8px;padding:20px 24px;margin-bottom:20px;border:1px solid var(--border-light);}.members-header{display:flex;align-items:center;gap:10px;margin-bottom:12px;}.members-header h3{font-weight:600;}.badge{background:rgba(37,99,235,.10);color:var(--accent);font-size:0.8rem;padding:4px 12px;border-radius:999px;border:1px solid rgba(37,99,235,.18);}.member-list{list-style:none;display:flex;flex-direction:column;gap:2px;}.member-list li{background:transparent;border:1px solid transparent;border-radius:var(--radius-control);padding:6px 8px;font-size:0.9rem;display:flex;align-items:center;gap:8px;transition:background-color 0.12s ease;cursor:default;}.member-list li:hover{background:var(--bg-elevated);}.member-list li::before{content:none;}.member-list .self{font-weight:600;color:var(--text-primary);}.status-bar{background:var(--status-bg);border-radius:8px;padding:14px 22px;border-left:4px solid var(--status-border);color:var(--text-secondary);}.connection-status-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}.connection-status-row .status-bar{flex:1 1 260px;}.download-buttons{display:flex;gap:16px;justify-content:center;margin-top:24px;flex-wrap:wrap;}.download-btn{background:var(--download-btn-bg);border:1px solid var(--border-light);border-radius:8px;padding:10px 24px;color:var(--text-primary);text-decoration:none;font-weight:500;transition:background 0.2s;}.download-btn:hover{background:var(--accent);color:white;border-color:var(--accent);}.hidden{display:none !important;}.footer{text-align:center;color:var(--text-secondary);font-size:0.85rem;margin-top:24px;}.footer-copyright{margin-top:6px;font-size:0.78rem;color:var(--text-muted);}.footer-copyright a{color:var(--text-secondary);text-decoration:none;}.footer-copyright a:hover{text-decoration:underline;}.footer-copyright-sub{margin-top:2px;opacity:.85;}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}.logout-btn{background:transparent;border:1px solid var(--border-light);color:var(--text-primary);padding:8px 16px;border-radius:8px;cursor:pointer;margin-left:16px;}#hidden-admin-create-row{display:flex;flex-direction:column;gap:6px;align-items:flex-start;}#hidden-admin-create-row .hidden-admin-option{display:inline-flex !important;align-items:center;justify-content:flex-start;gap:8px;margin-bottom:0 !important;width:auto;color:var(--text-primary);font-weight:600;}#hidden-admin-create-row .hidden-admin-option input{width:16px;height:16px;margin:0;padding:0;flex:0 0 auto;border:0;border-radius:4px;background:transparent;box-shadow:none;}#hidden-admin-create-row .hidden-admin-desc{font-size:12px;color:var(--text-secondary);line-height:1.5;}.quick-join-choice-overlay{position:fixed;inset:0;background:rgba(15,23,42,0.55);display:flex;align-items:center;justify-content:center;padding:20px;z-index:4000;}.quick-join-choice-dialog{width:min(92vw,420px);background:var(--card-bg);border:1px solid var(--border-light);border-radius:8px;box-shadow:0 28px 80px rgba(15,23,42,0.28);padding:20px;}.quick-join-choice-title{font-size:1.05rem;font-weight:700;color:var(--text-primary);margin-bottom:8px;}.quick-join-choice-desc{font-size:0.92rem;color:var(--text-secondary);line-height:1.6;margin-bottom:16px;}.quick-join-choice-actions{display:grid;grid-template-columns:1fr;gap:10px;}.quick-join-choice-actions .btn{width:100%;justify-content:center;}.quick-join-password-form{display:grid;gap:12px;margin:14px 0 16px;}.quick-join-password-form label{display:grid;gap:8px;color:var(--text-secondary);font-size:0.9rem;font-weight:700;}.quick-join-password-form input[type="password"]{width:100%;height:46px;padding:0 14px;border-radius:6px;border:1px solid var(--border-light);background:var(--input-bg);color:var(--text-primary);outline:none;}.quick-join-password-form input[type="password"]:focus{border-color:rgba(59,130,246,0.55);box-shadow:0 0 0 4px rgba(59,130,246,0.12);}.quick-join-hidden-row{display:flex;align-items:center;gap:8px;color:var(--text-primary);font-weight:700;font-size:0.92rem;}.quick-join-hidden-row input{width:16px;height:16px;margin:0;flex:0 0 auto;}.control-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-bottom:16px;}.control-item label{display:block;font-size:0.92rem;margin-bottom:8px;color:var(--text-secondary);}.control-item select,.room-password-row input{width:100%;padding:12px 14px;border-radius:6px;border:1px solid var(--border-light);background:var(--input-bg);color:var(--text-primary);box-shadow:none;}.control-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;}.control-actions .btn{flex:1 1 180px;}.local-audio-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-bottom:14px;}.audio-toggle-btn{justify-content:center;border:1px solid var(--btn-secondary-border);background:var(--btn-secondary-bg);color:var(--text-primary);}.audio-toggle-btn.is-on{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:none;}.audio-toggle-btn.is-off{opacity:.78;background:var(--btn-secondary-bg);color:var(--text-secondary);}.section-heading.room-chat-heading-main{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}.room-chat-audio-actions{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;}.room-chat-audio-toggle{flex:0 0 auto;width:38px;min-width:38px;height:30px;min-height:30px;padding:0;border-radius:6px;font-size:13px;font-weight:800;line-height:1;box-shadow:none;white-space:nowrap;}.room-chat-audio-toggle.is-on{background:var(--accent);border-color:var(--accent);color:#fff;}.room-chat-audio-toggle.is-off{background:var(--btn-secondary-bg);border-color:var(--btn-secondary-border);color:var(--text-secondary);opacity:1;}.room-chat-audio-toggle.mute-btn-forced{opacity:.62;cursor:not-allowed;}.room-chat-screen-toggle{min-width:0;padding:7px 9px;font-size:12px;}.room-chat-screen-toggle.is-active{background:#0f766e;border-color:#0f766e;color:#fff;}.room-chat-screen-toggle.is-disabled{opacity:.55;cursor:not-allowed;}#room-chat-panel.is-screen-focus #room-chat-messages,#room-chat-panel.is-screen-focus .room-chat-image-preview,#room-chat-panel.is-screen-focus .room-chat-input-row,#room-chat-panel.is-screen-focus .room-chat-toolbar{display:none;}.screen-share-panel{display:none;border:1px solid var(--border-light);border-radius:8px;background:var(--surface);margin:0 0 12px;overflow:hidden;}.screen-share-panel.is-visible{display:block;}.screen-share-panel:not(.is-focus){background:linear-gradient(135deg,rgba(248,250,252,.98),rgba(238,242,255,.7));overflow:visible;}.screen-share-panel:not(.is-focus) .screen-share-stage,.screen-share-panel:not(.is-focus) .screen-share-live-controls,.screen-share-panel:not(.is-focus) [data-screen-action="view-mode"],.screen-share-panel:not(.is-focus) [data-screen-action="fullscreen"],.screen-share-panel:not(.is-focus) [data-screen-action="reconnect"],.screen-share-panel:not(.is-focus) [data-screen-action="assist"],.screen-share-panel:not(.is-focus) [data-screen-action="revoke"]{display:none !important;}.screen-share-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border-bottom:1px solid var(--border-light);flex-wrap:wrap;}.screen-share-panel:not(.is-focus) .screen-share-head{min-height:46px;border-bottom:0;padding:10px 12px;gap:10px;}.screen-share-title{font-weight:800;font-size:13px;color:var(--text-primary);}.screen-share-panel:not(.is-focus) .screen-share-title{flex:1 1 260px;line-height:1.45;}.screen-share-title .screen-share-muted-note{margin-left:6px;font-size:12px;font-weight:700;color:var(--text-muted);}.screen-share-panel:not(.is-focus) .screen-share-status{display:none;}.screen-share-status{font-size:12px;color:var(--text-muted);white-space:nowrap;}.screen-share-live-controls{display:none;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;color:var(--text-secondary);}.screen-share-live-controls.is-visible{display:flex;}.screen-share-live-controls label{display:flex;align-items:center;gap:4px;margin:0;font-size:12px;white-space:nowrap;}.screen-share-live-controls select{min-height:28px;padding:3px 22px 3px 8px;font-size:12px;min-width:76px;}.screen-share-audio-option{display:flex;align-items:center;gap:8px;margin:10px 0 0;color:var(--text-secondary);font-size:13px;font-weight:700;}.screen-share-audio-option input{width:16px;height:16px;margin:0;}.screen-share-playback-controls{display:flex;align-items:center;gap:8px;padding:4px 6px;border:1px solid var(--border-light);border-radius:7px;background:var(--bg-panel);}.screen-share-playback-controls[hidden]{display:none !important;}.screen-share-playback-btn{width:30px;min-width:30px;height:28px;padding:0;border-radius:6px;font-size:13px;}.screen-share-playback-volume{width:92px;accent-color:var(--accent);}.screen-share-playback-value{min-width:36px;text-align:right;color:var(--text-secondary);font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;}.screen-share-panel:not(.is-focus) .screen-share-playback-controls{padding:3px 5px;}.screen-share-panel:not(.is-focus) .screen-share-playback-volume{width:78px;}.screen-share-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}.screen-share-actions .btn{padding:5px 8px;min-height:30px;font-size:12px;}.screen-share-panel:not(.is-focus) [data-screen-action="toggle-focus"]{background:var(--accent);border-color:var(--accent);color:#fff;min-width:86px;font-weight:800;}.screen-share-stage{position:relative;background:#0b1020;aspect-ratio:16/9;height:clamp(260px,42vh,540px);min-height:260px;max-height:min(58vh,540px);display:grid;place-items:center;overflow:hidden;}.screen-share-loading{position:absolute;inset:0;display:none;align-items:center;justify-content:center;flex-direction:column;gap:10px;color:rgba(255,255,255,.82);background:radial-gradient(circle at center,rgba(15,23,42,.18),rgba(15,23,42,.62));font-size:13px;font-weight:700;pointer-events:none;text-align:center;}.screen-share-loading::before{content:"";width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.28);border-top-color:rgba(255,255,255,.88);animation:screen-share-loading-spin .9s linear infinite;}.screen-share-stage.is-loading .screen-share-loading{display:flex;}@keyframes screen-share-loading-spin{to{transform:rotate(360deg);}}.screen-share-panel.is-focus .screen-share-stage{height:clamp(360px,58vh,720px);max-height:72vh;}.screen-share-stage:fullscreen{width:100vw;height:100vh;max-height:none;min-height:0;aspect-ratio:auto;background:#000;display:flex;align-items:center;justify-content:center;padding:0;box-sizing:border-box;}.screen-share-stage:-webkit-full-screen{width:100vw;height:100vh;max-height:none;min-height:0;aspect-ratio:auto;background:#000;display:flex;align-items:center;justify-content:center;padding:0;box-sizing:border-box;}.screen-share-stage video{display:block;width:100%;height:100%;object-fit:contain;object-position:center center;background:#0b1020;image-rendering:auto;}.screen-share-stage:fullscreen video,.screen-share-stage:-webkit-full-screen video{width:100%;height:100%;max-width:100vw;max-height:100vh;object-fit:contain;background:#000;}.screen-share-panel[data-view-mode="cover"] .screen-share-stage video{object-fit:cover;}.screen-share-panel[data-view-mode="original"] .screen-share-stage{overflow:auto;place-items:start;aspect-ratio:auto;}.screen-share-panel[data-view-mode="original"] .screen-share-stage video{width:auto;height:auto;min-width:100%;min-height:100%;max-width:none;max-height:none;object-fit:contain;}.screen-share-panel[data-view-mode="original"] .screen-share-stage:fullscreen,.screen-share-panel[data-view-mode="original"] .screen-share-stage:-webkit-full-screen{overflow:hidden;align-items:center;justify-content:center;}.screen-share-panel[data-view-mode="original"] .screen-share-stage:fullscreen video,.screen-share-panel[data-view-mode="original"] .screen-share-stage:-webkit-full-screen video{width:100%;height:100%;min-width:0;min-height:0;max-width:100vw;max-height:100vh;object-fit:contain;}.screen-share-cursor{position:absolute;left:0;top:0;width:14px;height:14px;border:2px solid #22c55e;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;display:none;box-shadow:0 0 0 3px rgba(34,197,94,.2);z-index:3;}.screen-share-cursor.is-visible{display:block;}.screen-share-cursor.is-clicking{animation:screenAssistClick .42s ease-out;}@keyframes screenAssistClick{0%{box-shadow:0 0 0 0 rgba(34,197,94,.48),0 0 0 3px rgba(34,197,94,.22);}100%{box-shadow:0 0 0 18px rgba(34,197,94,0),0 0 0 3px rgba(34,197,94,.14);}}.screen-share-key-hint{position:absolute;left:10px;bottom:10px;color:#fff;background:rgba(15,23,42,.82);border:1px solid rgba(255,255,255,.18);border-radius:6px;padding:5px 8px;font-size:12px;display:none;z-index:4;}.screen-share-key-hint.is-visible{display:block;}.screen-share-dialog{position:fixed;inset:0;z-index:10020;display:none;align-items:center;justify-content:center;background:rgba(15,23,42,.68);padding:18px;backdrop-filter:blur(8px);}.screen-share-dialog.is-visible{display:flex;}.screen-share-card{width:min(980px,96vw);max-height:92vh;overflow:auto;background:var(--bg-card);border:1px solid rgba(148,163,184,.34);border-radius:10px;box-shadow:0 28px 80px rgba(15,23,42,.34);padding:0;}.screen-share-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:18px 20px 14px;border-bottom:1px solid var(--border-light);background:var(--bg-card);}.screen-share-card-title{display:grid;gap:6px;min-width:0;}.screen-share-card-title h3{margin:0;font-size:18px;font-weight:850;color:var(--text-primary);}.screen-share-card-title p{margin:0;color:var(--text-secondary);font-size:13px;line-height:1.55;}.screen-share-card-body{display:grid;gap:14px;padding:16px 20px 20px;background:var(--bg-card);}.screen-share-config-grid{display:grid;grid-template-columns:repeat(3,minmax(160px,1fr));gap:12px;margin:0;}.screen-share-config-grid label{display:grid;gap:7px;margin:0;color:var(--text-secondary);font-size:13px;font-weight:800;}.screen-share-config-grid select{min-height:40px;border-radius:6px;background:var(--input-bg);border:1px solid var(--border-light);color:var(--text-primary);box-shadow:none;}.screen-share-audio-options{display:grid;gap:8px;padding:12px;border:1px solid var(--border-light);border-radius:8px;background:var(--bg-panel);}.screen-share-preview{position:relative;background:#0b1020;border:1px solid rgba(15,23,42,.22);border-radius:8px;aspect-ratio:16/9;min-height:280px;max-height:min(54vh,560px);overflow:hidden;display:grid;place-items:center;user-select:none;touch-action:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);}.screen-share-preview video{display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;object-position:center center;}.screen-share-preview-audio-btn{position:absolute;right:12px;bottom:12px;z-index:5;width:38px;height:34px;min-width:38px;min-height:34px;padding:0;border-radius:8px;border:1px solid rgba(255,255,255,.24);background:rgba(15,23,42,.78);color:#fff;font-size:16px;line-height:1;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 8px 18px rgba(15,23,42,.24);}.screen-share-preview-audio-btn:hover{background:rgba(15,23,42,.9);}.screen-share-preview-audio-btn.is-on{background:rgba(37,99,235,.92);border-color:rgba(255,255,255,.36);}.screen-share-crop{position:absolute;border:2px solid #5b5ff4;background:rgba(91,95,244,.16);box-shadow:0 0 0 9999px rgba(15,23,42,.34);display:none;pointer-events:none;}.screen-share-crop.is-visible{display:block;}.screen-share-modal-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:0;padding-top:2px;}.member-screen-badge{color:#0f766e;border-color:rgba(20,184,166,.36);background:rgba(20,184,166,.1);}@media (max-width:760px){.screen-share-config-grid{grid-template-columns:1fr;}.screen-share-stage{height:clamp(210px,38vh,380px);min-height:210px;}.screen-share-card-head{padding:16px;}.screen-share-card-body{padding:14px 16px 16px;}.screen-share-preview{min-height:210px;}}.level-control-list{display:grid;gap:12px;margin:12px 0 14px;}.level-control{display:grid;grid-template-columns:86px minmax(160px,1fr) 52px;gap:12px;align-items:center;}.level-control-label{color:var(--text-secondary);font-weight:700;font-size:.92rem;}.level-slider-wrap{position:relative;height:34px;border-radius:999px;border:1px solid var(--border-light);background:rgba(148,163,184,.12);overflow:hidden;}.level-slider-wrap .vu-meter{position:absolute;inset:0;height:100%;border:0;border-radius:999px;background:transparent;pointer-events:none;}.level-slider-wrap .vu-fill{height:100%;opacity:.44;}.level-slider-wrap input[type="range"]{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0 10px;background:transparent;appearance:none;cursor:pointer;}.level-slider-wrap input[type="range"]::-webkit-slider-runnable-track{height:4px;background:rgba(15,23,42,.14);border-radius:999px;}.level-slider-wrap input[type="range"]::-webkit-slider-thumb{appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--accent);box-shadow:0 2px 8px rgba(15,23,42,.22);margin-top:-7px;}.level-slider-wrap input[type="range"]::-moz-range-track{height:4px;background:rgba(15,23,42,.14);border-radius:999px;}.level-slider-wrap input[type="range"]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--accent);box-shadow:0 2px 8px rgba(15,23,42,.22);}.volume-value{color:var(--accent);font-weight:800;font-size:.9rem;text-align:right;}.audio-fx-group{margin-top:18px;padding-top:14px;border-top:1px solid rgba(148,163,184,.16);}.audio-fx-title{margin-bottom:10px;color:var(--text-secondary);font-size:.9rem;font-weight:800;}.audio-fx-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}.audio-fx-toggle{position:relative;min-height:36px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px 14px;border-radius:var(--radius-control);border:1px solid var(--btn-secondary-border);background:var(--btn-secondary-bg);color:var(--text-secondary);font-weight:600;font-size:.88rem;cursor:pointer;user-select:none;transition:border-color .16s ease,background .16s ease,color .16s ease;box-shadow:none;}.audio-fx-toggle input{position:absolute;opacity:0;pointer-events:none;}.audio-fx-toggle::before{content:'';width:9px;height:9px;flex:0 0 auto;border-radius:50%;background:var(--text-muted);box-shadow:none;transition:background .16s ease;}.audio-fx-toggle:hover{transform:none;border-color:var(--btn-secondary-border);background:var(--bg-elevated);box-shadow:none;}.audio-fx-toggle:active{transform:none;}.audio-fx-toggle.is-on,.audio-fx-toggle:has(input:checked){color:#fff;border-color:var(--accent);background:var(--accent);box-shadow:none;}.audio-fx-toggle.is-on::before,.audio-fx-toggle:has(input:checked)::before{background:#fff;box-shadow:none;transform:none;}.audio-fx-toggle:has(input:disabled){opacity:.55;cursor:not-allowed;filter:grayscale(.35);transform:none;box-shadow:none;}.audio-fx-hint{display:none !important;}.knock-volume-row{margin-top:10px;}.knock-volume-label{font-weight:600;font-size:.88rem;color:var(--text-secondary);flex:0 0 auto;}.knock-volume-slider{flex:1 1 140px;min-width:120px;max-width:240px;accent-color:var(--accent);cursor:pointer;}.btn-mini{min-height:32px;padding:5px 12px;font-size:.82rem;border-radius:var(--radius-control);flex:0 0 auto;}@media (max-width:640px){.knock-volume-row{display:flex;}.knock-volume-slider{flex:1 1 100%;max-width:none;}}@media (max-width:640px){.audio-fx-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}.audio-fx-toggle{width:100%;min-height:42px;padding:10px 12px;font-size:.88rem;}}.room-password-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;align-items:center;}.room-password-row input{flex:1 1 260px;}.mini-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;}.mini-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:7px;background:var(--bg-panel);border:1px solid var(--border-light);color:var(--text-secondary);font-size:0.85rem;}.member-list li{display:flex;align-items:center;justify-content:space-between;gap:10px;}.member-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0;}.member-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:260px;}.member-role-wrap{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}.member-role{font-size:0.78rem;padding:2px 8px;border-radius:7px;background:var(--bg-panel);color:var(--accent);border:1px solid var(--border-light);line-height:1.2;}.member-role.admin{color:#ef4444;border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.08);}.member-role.owner{color:#f59e0b;border-color:rgba(245,158,11,.35);background:rgba(245,158,11,.10);}.member-role.user{color:#38bdf8;border-color:rgba(56,189,248,.35);background:rgba(56,189,248,.08);}.member-role.room-admin{color:#16a34a;border-color:rgba(22,163,74,.35);background:rgba(22,163,74,.09);}.member-role.guest{color:#94a3b8;border-color:rgba(148,163,184,.35);background:rgba(148,163,184,.08);}body.dark .member-role.admin{color:#fca5a5;border-color:rgba(248,113,113,.44);background:rgba(248,113,113,.16);}body.dark .member-role.owner{color:#fbbf24;border-color:rgba(251,191,36,.46);background:rgba(251,191,36,.18);}body.dark .member-role.user{color:#7dd3fc;border-color:rgba(125,211,252,.44);background:rgba(14,165,233,.17);}body.dark .member-role.room-admin{color:#86efac;border-color:rgba(134,239,172,.44);background:rgba(34,197,94,.17);}body.dark .member-role.guest{color:#cbd5e1;border-color:rgba(203,213,225,.34);background:rgba(148,163,184,.14);}.member-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}.member-volume-control{position:relative;display:inline-flex;align-items:center;gap:0;width:132px;height:26px;overflow:visible;}.member-volume-control input[type="range"]{width:120px;flex:0 0 120px;}.member-volume-badge{position:absolute;top:-28px;left:50%;transform:translateX(-50%);padding:4px 8px;border-radius:6px;background:rgba(15,23,42,.92);color:#fff;font-size:12px;font-weight:800;line-height:1;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .12s ease,left .08s linear;box-shadow:0 8px 18px rgba(15,23,42,.18);z-index:50;}.member-volume-badge::after{content:'';position:absolute;left:50%;bottom:-4px;transform:translateX(-50%) rotate(45deg);width:8px;height:8px;background:rgba(15,23,42,.92);}.member-volume-control:hover .member-volume-badge,.member-volume-control:focus-within .member-volume-badge,.member-volume-control.is-dragging .member-volume-badge{opacity:1;}#room-chat-panel{background:var(--bg-card);border:1px solid rgba(148,163,184,.16);box-shadow:0 8px 24px rgba(15,23,42,.045);}body.dark #room-chat-panel{background:rgba(24,30,42,.96);border-color:rgba(71,85,105,.36);box-shadow:0 12px 28px rgba(0,0,0,.20);}.room-chat-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}#room-chat-messages{max-height:286px;overflow:auto;overflow-x:hidden;scrollbar-gutter:stable;background:var(--bg-panel);border:1px solid var(--border-light);border-radius:8px;padding:14px 16px 14px 14px;display:flex;flex-direction:column;gap:12px;scrollbar-width:thin;}body.dark #room-chat-messages{background:var(--bg-panel);border-color:var(--border-light);}.room-chat-empty{text-align:center;opacity:.75;padding:34px 0;color:var(--text-secondary);}.room-chat-item{display:flex;width:100%;padding-inline:2px 6px;box-sizing:border-box;}.room-chat-item.system{justify-content:center;}.room-chat-item.self{justify-content:flex-end;padding-right:8px;}.room-chat-line{display:flex;flex-direction:column;gap:6px;width:fit-content;max-width:min(74%,252px);min-width:0;}.room-chat-item:not(.self):not(.system) .room-chat-line{align-items:flex-start;}.room-chat-item.self .room-chat-line{margin-left:auto;align-items:flex-end;}.room-chat-item.system .room-chat-line{max-width:100%;align-items:center;}.room-chat-content{min-width:0;display:flex;flex-direction:column;gap:5px;}.room-chat-meta{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-secondary);padding:0 2px;flex-wrap:wrap;}.room-chat-item.self .room-chat-meta{justify-content:flex-end;}.room-chat-author{display:flex;align-items:center;gap:6px;min-width:0;font-weight:700;color:var(--text-primary);}.room-chat-role{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:7px;background:rgba(148,163,184,.12);border:1px solid rgba(148,163,184,.16);font-size:11px;font-weight:600;color:var(--text-secondary);}.room-chat-bubble{display:inline-block;width:fit-content;max-width:100%;padding:10px 14px;border-radius:6px;background:var(--bg-card);border:1px solid var(--border-light);box-shadow:none;line-height:1.55;white-space:pre-wrap;word-break:break-word;color:var(--text-primary);}body.dark .room-chat-bubble{background:var(--bg-elevated);border-color:var(--border-light);box-shadow:none;}.room-chat-item.self .room-chat-bubble{background:linear-gradient(135deg,#f8fafc,#eef2ff);color:#172033;border-color:rgba(99,102,241,.22);box-shadow:0 8px 20px rgba(99,102,241,.10);}.room-chat-item.system .room-chat-meta{display:none;}.room-chat-item.system .room-chat-bubble{padding:6px 12px;border-radius:999px;background:var(--bg-panel);border:1px solid var(--border-light);box-shadow:none;font-size:12px;color:var(--text-secondary);}body.dark .room-chat-item.system .room-chat-bubble{background:var(--bg-panel);border-color:var(--border-light);}.room-chat-item.system.danger .room-chat-line{width:100%;max-width:100%;align-items:stretch;}.room-chat-item.system.danger .room-chat-bubble{display:block;width:100%;box-sizing:border-box;border-radius:6px;border-color:rgba(239,68,68,.42);background:rgba(239,68,68,.10);color:#b91c1c;font-weight:800;text-align:center;box-shadow:none;}body.dark .room-chat-item.system.danger .room-chat-bubble{border-color:rgba(248,113,113,.42);background:rgba(127,29,29,.34);color:#fecaca;}.room-chat-input-row{display:flex;gap:12px;align-items:flex-end;margin-top:16px;flex-wrap:nowrap;}.room-chat-input-wrap{flex:1 1 auto;min-width:0;}.room-chat-input-wrap label{display:block;margin-bottom:8px;font-size:12px;color:var(--text-secondary);font-weight:700;}#room-chat-input{width:100%;height:52px;padding:0 18px;border-radius:6px;border:1px solid var(--border-light);background:var(--input-bg);color:var(--text-primary);box-shadow:none;}body.dark #room-chat-input{background:var(--input-bg);box-shadow:none;border-color:var(--border-light);}#room-chat-input:focus{outline:none;border-color:var(--accent);box-shadow:none;}#room-chat-send-btn{min-width:112px;height:52px;border-radius:6px;font-weight:800;box-shadow:0 8px 18px rgba(37,99,235,.14);white-space:nowrap;}#room-chat-status{margin-top:8px;font-size:12px;min-height:16px;max-height:16px;overflow:hidden;color:var(--text-secondary);}.mute-btn-forced{opacity:.72;cursor:not-allowed;}.room-lock-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;}.switch-field{display:inline-flex;align-items:center;justify-content:space-between;gap:12px;min-width:180px;padding:10px 14px;border-radius:6px;background:rgba(148,163,184,0.08);border:1px solid var(--border-light);}.switch-label{font-weight:600;color:var(--text-primary);}.switch{position:relative;width:48px;height:28px;display:inline-block;flex:0 0 auto;}.switch input{position:absolute;inset:0;opacity:0;cursor:pointer;}.switch-slider{position:absolute;inset:0;background:rgba(148,163,184,0.35);transition:.2s ease;border-radius:999px;pointer-events:none;}.switch-slider:before{content:'';position:absolute;width:22px;height:22px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s ease;box-shadow:0 2px 8px rgba(0,0,0,.22);}.switch input:checked + .switch-slider{background:linear-gradient(90deg,#22c55e,#16a34a);}.switch input:checked + .switch-slider:before{transform:translateX(20px);}.mini-btn{padding:6px 12px;border-radius:var(--radius-control);border:1px solid var(--btn-secondary-border);background:var(--btn-secondary-bg);color:var(--text-primary);cursor:pointer;font-size:0.82rem;}.mini-btn.danger{border-color:#ef4444;color:#ef4444;}.mini-btn.warn{border-color:#f59e0b;color:#f59e0b;}.mini-btn:disabled{opacity:.45;cursor:not-allowed;}.announcement-modal{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(15,23,42,0.64);backdrop-filter:none;}.announcement-dialog{width:min(560px,100%);background:var(--bg-card);border:1px solid rgba(148,163,184,.18);border-radius:8px;box-shadow:0 30px 70px rgba(15,23,42,.35);padding:28px;}.announcement-dialog h3{margin:0 0 14px;font-size:1.45rem;color:var(--text-primary);}.announcement-content{color:var(--text-secondary);font-size:0.98rem;line-height:1.7;white-space:pre-wrap;word-break:break-word;}.announcement-actions{display:flex;justify-content:flex-end;gap:12px;flex-wrap:wrap;margin-top:22px;}.announcement-btn{min-width:120px;padding:12px 20px;border-radius:6px;border:1px solid transparent;font-size:0.96rem;font-weight:700;cursor:pointer;color:#fff;background:var(--accent);}.announcement-btn:hover{background:var(--accent-hover);}.announcement-btn-secondary{color:var(--text-primary);background:var(--btn-secondary-bg);border-color:var(--btn-secondary-border);}.announcement-btn-secondary:hover{background:var(--border-light);}.announcement-btn-danger{background:#dc2626;}.announcement-btn-danger:hover{background:#b91c1c;}@media (max-width:640px){body{padding:8px;}.card{padding:18px;}.login-hero{flex-direction:column;}.announcement-dialog{padding:22px 18px;border-radius:8px;}.announcement-actions{justify-content:stretch;}.announcement-btn{width:100%;}}.network-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:7px;border:1px solid rgba(148,163,184,.26);background:rgba(148,163,184,.10);color:var(--text-secondary);font-size:0.76rem;line-height:1.2;}.network-badge.good{color:#16a34a;border-color:rgba(22,163,74,.32);background:rgba(22,163,74,.09);}.network-badge.fair{color:#d97706;border-color:rgba(217,119,6,.32);background:rgba(217,119,6,.09);}.network-badge.bad{color:#dc2626;border-color:rgba(220,38,38,.32);background:rgba(220,38,38,.09);}.mic-check-panel{margin-top:16px;margin-bottom:14px;padding:12px 14px;border:1px solid var(--border-light);border-radius:6px;background:rgba(148,163,184,.08);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;color:var(--text-secondary);font-size:.92rem;}.mic-check-status{display:flex;flex-direction:column;gap:4px;}.invite-modal{position:fixed;inset:0;z-index:1300;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(15,23,42,.64);}.invite-dialog{width:min(420px,100%);background:var(--bg-card);color:var(--text-primary);border:1px solid var(--border-light);border-radius:8px;padding:22px;box-shadow:0 28px 70px rgba(15,23,42,.28);}.invite-dialog h3{margin-bottom:10px;}.invite-url-box{word-break:break-all;border:1px solid var(--border-light);background:var(--bg-panel);border-radius:6px;padding:10px;margin:12px 0;color:var(--text-secondary);font-size:.9rem;}.qr-box{display:flex;justify-content:center;padding:12px;background:#fff;border-radius:6px;margin:12px auto;width:244px;max-width:100%;}.qr-box img{width:220px;height:220px;display:block;}.invite-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:14px;}.header-actions{gap:12px;}.user-menu{position:relative;padding:0;margin:0;border:0;background:transparent;box-shadow:none;}.user-menu-trigger{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 16px;border:1px solid var(--border-light);border-radius:6px;background:var(--input-bg);color:var(--text-primary);font-weight:700;cursor:pointer;}.user-menu-dropdown{position:absolute;top:calc(100% + 10px);right:0;z-index:50;display:none;min-width:190px;padding:10px;border:1px solid var(--border-light);border-radius:6px;background:var(--card-bg);box-shadow:var(--shadow);}.user-menu.open .user-menu-dropdown{display:grid;gap:8px;}.user-menu-dropdown .btn,.user-menu-dropdown .logout-btn{width:100%;justify-content:center;padding:9px 12px;}.settings-section{border:1px solid var(--border-light);border-radius:6px;background:var(--bg-panel);padding:12px 14px;margin-bottom:12px;}.settings-section>summary{cursor:pointer;font-weight:800;color:var(--text-primary);list-style:none;display:flex;align-items:center;justify-content:space-between;}.settings-section>summary::-webkit-details-marker{display:none;}.settings-section>summary::after{content:"展开";font-size:12px;color:var(--text-secondary);font-weight:600;}.settings-section[open]>summary{margin-bottom:12px;}.settings-section[open]>summary::after{content:"收起";}select,#create-room-max-members,#room-max-members-select{min-height:44px;border-radius:6px;border:1px solid var(--border-light);background-color:var(--input-bg);color:var(--text-primary);padding:0 42px 0 14px;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--text-secondary) 50%),linear-gradient(135deg,var(--text-secondary) 50%,transparent 50%);background-position:calc(100% - 18px) 19px,calc(100% - 12px) 19px;background-size:6px 6px,6px 6px;background-repeat:no-repeat;}.room-limit-row .grow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}.room-limit-row .grow label{margin:0;}.room-limit-row .grow select{width:auto;min-width:118px;}.create-mode-limit-row{display:grid;grid-template-columns:minmax(220px,max-content) minmax(110px,max-content);gap:28px;align-items:end;margin-bottom:16px;}.create-mode-limit-row .form-row{margin-bottom:0;}.create-mode-limit-row select{width:auto;min-width:118px;}#create-room-transport-mode{min-width:194px;}#hidden-admin-create-row{margin-top:0 !important;margin-bottom:18px;}#create-room-btn{margin-top:2px;}@media (max-width:720px){.user-menu-dropdown{right:auto;left:0;}.room-limit-row .grow,.room-password-row{align-items:stretch;}.room-limit-row .grow select{width:100%;}.create-mode-limit-row{grid-template-columns:1fr;}.create-mode-limit-row select,#create-room-transport-mode{width:100%;}.level-control{grid-template-columns:1fr;gap:8px;}.volume-value{text-align:left;}}:root{--bg-page:#eceef1;--bg-card:#ffffff;--bg-elevated:#ffffff;--bg-panel:#f4f5f7;--bg-panel-strong:#ffffff;--text-primary:#1e2024;--text-secondary:#4b5058;--text-tertiary:#80848e;--border-light:#e0e2e6;--border-strong:#d4d7dc;--accent:#5865f2;--accent-hover:#4752c4;--accent-soft:rgba(88,101,242,0.12);--success-soft:rgba(59,165,93,0.14);--danger-soft:rgba(216,60,62,0.14);--shadow:0 4px 12px rgba(15,23,42,0.08);--shadow-lg:0 8px 24px rgba(15,23,42,0.12);--glow:none;--radius-lg:8px;--radius-md:6px;--radius-sm:6px;}body.dark{--bg-page:#1c1c1e;--bg-card:#2c2c2e;--bg-elevated:#3a3a3c;--bg-panel:#242426;--bg-panel-strong:#3a3a3c;--text-primary:#f5f5f7;--text-secondary:rgba(235,235,245,.68);--text-tertiary:rgba(235,235,245,.46);--border-light:rgba(255,255,255,.12);--border-strong:rgba(255,255,255,.18);--accent:#5865f2;--accent-hover:#4752c4;--accent-soft:rgba(88,101,242,0.18);--success-soft:rgba(59,165,93,0.18);--danger-soft:rgba(237,66,69,0.18);--shadow:0 8px 24px rgba(0,0,0,0.32);--shadow-lg:0 12px 32px rgba(0,0,0,0.40);--glow:none;}*{transition:background-color 180ms ease,border-color 180ms ease,box-shadow 220ms ease,color 180ms ease,transform 220ms ease,opacity 180ms ease;}body{align-items:stretch;justify-content:center;padding:18px;background:var(--bg-page);color:var(--text-primary);}body.dark{background:var(--bg-page);}.app{width:min(1560px,100%);margin:0 auto;}.card{min-height:calc(100vh - 36px);padding:22px;border-radius:8px;border:1px solid var(--border-light);background:var(--bg-card);box-shadow:var(--shadow-lg);backdrop-filter:none;-webkit-backdrop-filter:none;}#main-interface{display:grid;gap:20px;}.hidden{display:none !important;}.app-nav{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 16px 20px;margin-bottom:8px;border-bottom:1px solid var(--border-light);}.brand-block{display:flex;align-items:center;gap:14px;min-width:0;}.brand-mark{width:10px;height:10px;border-radius:999px;display:inline-flex;flex:0 0 auto;background:var(--accent);border:none;box-shadow:none;}.brand-copy{min-width:0;}#site-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:clamp(1.25rem,1.4vw,1.7rem);font-weight:800;letter-spacing:0;}.brand-name{white-space:nowrap;}#site-subtitle-badge,.header h1 span{display:inline-flex;align-items:center;min-height:26px;padding:0 12px;border-radius:7px;background:var(--accent-soft);border:1px solid var(--border-light);color:var(--accent);font-size:0.78rem;font-weight:700;}.brand-caption{margin-top:6px;color:var(--text-tertiary);font-size:0.94rem;}.header-actions{gap:12px;flex-wrap:nowrap;}.nav-login-btn,.user-menu-trigger,.btn,.tab-btn,.tab-aux-btn,.mini-btn,.logout-btn,.download-btn{border-radius:6px;}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 18px;border:1px solid transparent;background:var(--accent);color:#fff;font-weight:600;box-shadow:none;}.btn:hover:not(:disabled),.tab-aux-btn:hover,.mini-btn:hover:not(:disabled),.logout-btn:hover,.user-menu-trigger:hover,.tab-btn:hover{filter:none;}.btn-secondary,.tab-btn,.tab-aux-btn,.mini-btn,.logout-btn,.user-menu-trigger{background:var(--btn-secondary-bg);color:var(--text-primary);border:1px solid var(--btn-secondary-border);box-shadow:none;}body.dark .btn-secondary,body.dark .tab-btn,body.dark .tab-aux-btn,body.dark .mini-btn,body.dark .logout-btn,body.dark .user-menu-trigger{background:var(--btn-secondary-bg);}.btn-secondary:hover:not(:disabled),.tab-btn:hover,.tab-aux-btn:hover,.mini-btn:hover:not(:disabled),.logout-btn:hover,.user-menu-trigger:hover{border-color:var(--btn-secondary-border);box-shadow:none;}.user-menu{position:relative;background:transparent;border:0;padding:0;margin:0;box-shadow:none;}.user-menu-trigger{min-height:48px;padding:0 14px 0 10px;gap:10px;}.user-menu-text{display:grid;gap:1px;text-align:left;min-width:0;}.user-menu-label{color:var(--text-tertiary);font-size:0.72rem;line-height:1.1;}#display-username{display:flex;align-items:center;gap:6px;max-width:260px;min-width:0;flex-wrap:wrap;}#display-username .account-name{display:inline-block;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}#display-username .public-id-badge{font-size:.72rem;padding:2px 6px;}.user-menu-dropdown{right:0;min-width:220px;padding:12px;border-radius:6px;border:1px solid var(--border-light);background:var(--bg-panel-strong);box-shadow:var(--shadow-lg);backdrop-filter:none;-webkit-backdrop-filter:none;}.user-menu.open .user-menu-dropdown{display:grid;gap:8px;}.user-menu-dropdown .btn,.user-menu-dropdown .logout-btn{display:inline-flex;align-items:center;width:100%;justify-content:flex-start;padding:0 14px;min-height:42px;margin-left:0;}.room-tabs-wrap,.room-header-row,.room-workspace,.members-area,.create-form,.search-card,.account-settings-panel,#account-settings-panel,#email-binding-banner{background:var(--bg-panel);border:1px solid var(--border-light);box-shadow:var(--shadow);backdrop-filter:none;-webkit-backdrop-filter:none;}.settings-modal-overlay{position:fixed;inset:0;z-index:8000;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(15,23,42,.55);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:settingsOverlayIn .18s ease;}.settings-modal-overlay.hidden{display:none;}.settings-modal-dialog{width:min(860px,100%);max-height:min(86vh,880px);display:flex;flex-direction:column;min-height:0;background:var(--card-bg,var(--bg-panel));color:var(--text-primary);border:1px solid var(--border-light);border-radius:14px;box-shadow:0 30px 90px rgba(15,23,42,.38);overflow:hidden;animation:settingsDialogIn .2s cubic-bezier(.2,.7,.3,1);}.settings-modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--border-light);background:linear-gradient(180deg,var(--card-bg,var(--bg-panel)),var(--bg-panel));flex:0 0 auto;}.settings-modal-header h3{margin:0;font-size:17px;font-weight:800;}.settings-modal-close{appearance:none;border:1px solid var(--border-light);background:var(--bg-card,transparent);color:var(--text-secondary);width:34px;height:34px;border-radius:8px;font-size:20px;line-height:1;cursor:pointer;flex:0 0 auto;}.settings-modal-close:hover{background:var(--bg-elevated);color:var(--text-primary);}.settings-modal-body{padding:18px 20px;overflow:auto;min-height:0;flex:1 1 auto;}.settings-modal-body #account-settings-panel{margin:0 !important;border:0 !important;box-shadow:none !important;background:transparent !important;padding:0 !important;}@keyframes settingsOverlayIn{from{opacity:0;}to{opacity:1;}}@keyframes settingsDialogIn{from{opacity:0;transform:translateY(14px) scale(.98);}to{opacity:1;transform:none;}}@media (max-width:640px){.settings-modal-overlay{padding:0;}.settings-modal-dialog{width:100%;height:100%;max-height:100%;border-radius:0;}}.settings-modal-dialog.settings-modal-wide{width:min(900px,100%);}.settings-layout{display:grid;grid-template-columns:192px minmax(0,1fr);min-height:0;flex:1 1 auto;}.settings-nav{border-right:1px solid var(--border-light);background:var(--bg-panel);padding:12px 10px;overflow:auto;display:flex;flex-direction:column;gap:4px;}.settings-nav-btn{appearance:none;text-align:left;border:1px solid transparent;background:transparent;color:var(--text-secondary);border-radius:8px;padding:9px 12px;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;}.settings-nav-btn:hover{background:rgba(88,101,242,.08);color:var(--text-primary);}.settings-nav-btn.active{background:var(--accent);color:#fff;border-color:var(--accent);}.settings-sections{padding:18px 20px;overflow:auto;min-height:0;}.settings-sections>.settings-section{display:none;}.settings-sections>.settings-section.active{display:block;animation:settingsSectionIn .16s ease;}@keyframes settingsSectionIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}.settings-sections>.settings-section h4{margin:0 0 4px;font-size:15px;font-weight:800;}.settings-sections>.settings-section .settings-section-hint{margin:0 0 14px;font-size:12px;color:var(--text-secondary);}.settings-field{display:grid;gap:4px;padding:10px 0;border-bottom:1px solid rgba(148,163,184,.14);}.settings-field:last-child{border-bottom:0;}.settings-field-label{font-size:13px;font-weight:700;}.settings-field-desc{font-size:12px;color:var(--text-secondary);}.settings-field-disabled-reason{font-size:12px;color:var(--color-danger);}.settings-inline-btn{justify-self:start;margin-top:4px;}body.ui-font-sm{font-size:14px;}body.ui-font-lg{font-size:17px;}body.ui-compact .settings-field{padding:6px 0;}body.ui-compact .form-row{margin-bottom:8px;}body.ui-compact .private-msg{padding:6px 8px;}@media (max-width:720px){.settings-layout{grid-template-columns:1fr;}.settings-nav{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--border-light);}.settings-nav-btn{flex:0 0 auto;}}.room-tabs-wrap,.room-header-row,.room-workspace{border-radius:var(--radius-lg);}.room-tabs-wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px;margin-bottom:22px;flex-wrap:wrap;}.room-tabs{display:inline-flex;align-items:center;gap:8px;padding:6px;border-radius:6px;background:rgba(148,163,184,0.10);border:1px solid rgba(148,163,184,0.16);}.tab-actions{display:inline-flex;align-items:center;justify-content:flex-end;gap:10px;margin-left:auto;flex-wrap:wrap;}.tab-btn{min-height:40px;padding:0 18px;font-weight:600;color:var(--text-secondary);background:transparent;border:1px solid transparent;}.tab-btn.active{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:none;}body.dark .tab-btn.active{background:var(--accent);color:#fff;}.tab-content.active,#call-interface:not(.hidden){animation:ui-fade-in 220ms ease;}.lobby-toolbar{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:14px;align-items:stretch;margin-bottom:18px;}.search-card,.create-form{border-radius:8px;}.search-card{padding:14px 16px;}.search-card label,.form-row label,.room-chat-input-wrap label,.control-item label{color:var(--text-tertiary);font-size:0.8rem;font-weight:700;letter-spacing:0;text-transform:uppercase;}input,select,.form-row input,.lobby-toolbar input,.lobby-toolbar select,.room-rename-input-wrap input,#room-chat-input,.control-item select,.room-password-row input{min-height:48px;border-radius:6px !important;border:1px solid var(--border-light);background:rgba(255,255,255,0.54);color:var(--text-primary);box-shadow:inset 0 1px 0 rgba(255,255,255,0.35);}body.dark input,body.dark select,body.dark .form-row input,body.dark .lobby-toolbar input,body.dark .lobby-toolbar select,body.dark .room-rename-input-wrap input,body.dark #room-chat-input,body.dark .control-item select,body.dark .room-password-row input{background:rgba(255,255,255,0.04);box-shadow:inset 0 1px 0 rgba(255,255,255,0.02);}input:focus,select:focus,.form-row input:focus,.lobby-toolbar input:focus,.lobby-toolbar select:focus,.room-rename-input-wrap input:focus,#room-chat-input:focus,.control-item select:focus,.room-password-row input:focus{outline:none;border-color:rgba(96,165,250,0.48);box-shadow:0 0 0 3px rgba(88,101,242,.22);}.room-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:4px;background:transparent;border:0;box-shadow:none;max-height:none;overflow:visible;}.room-item{display:grid;gap:12px;padding:16px;border:1px solid var(--border-light);border-radius:var(--radius-card);background:var(--bg-panel);box-shadow:none;cursor:pointer;transition:background 0.15s,border-color 0.15s;}body.dark .room-item{background:var(--bg-panel);}.room-item:hover,.room-item:focus-visible{transform:none;border-color:var(--accent);background:var(--bg-elevated);box-shadow:none;outline:none;}.room-card-head,.room-card-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;}.room-card-title-wrap{min-width:0;}.room-item .name{margin:0;font-size:1.06rem;font-weight:800;line-height:1.25;}.room-card-subtitle,.room-card-note{color:var(--text-tertiary);font-size:0.88rem;line-height:1.5;}.room-card-meta{display:flex;gap:8px;flex-wrap:wrap;}.room-meta-chip,.badge,.mini-badge,.network-badge{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:0 10px;border-radius:7px;border:1px solid var(--border-light);background:var(--bg-card);color:var(--text-secondary);font-size:0.76rem;font-weight:600;}.badge,.mini-badge{color:var(--accent);background:var(--accent-soft);border-color:transparent;}.room-card-flag{white-space:nowrap;}.quick-join{min-width:100px;min-height:36px;padding:0 16px;box-shadow:none;}.room-list-empty{grid-column:1 / -1;display:grid;place-items:center;min-height:180px;border-radius:8px;border:1px dashed var(--border-light);color:var(--text-secondary);background:rgba(148,163,184,0.06);}.room-list-more-row{margin-top:16px;}.room-header-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;padding:20px 22px;margin-bottom:18px;align-items:start;}.room-title-block h2{font-size:clamp(1.2rem,1.4vw,1.6rem);line-height:1.25;}.mini-badges{margin-top:10px;gap:8px;}.room-title-actions{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;padding:0;border:0;background:transparent;box-shadow:none;}.room-rename-input-wrap input{height:46px;}.room-workspace{display:grid;grid-template-columns:minmax(300px,360px) minmax(0,1fr);grid-template-areas:"members chat" "dock dock";gap:18px;padding:18px;align-items:stretch;min-height:min(76vh,900px);}.room-left-column,.room-right-column{min-width:0;min-height:0;}.room-left-column{grid-area:members;}.room-right-column{grid-area:chat;min-height:0;}.members-area{border-radius:8px;padding:18px;margin-bottom:0;min-height:0;}.members-bottom{height:100%;}.members-header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px;}.section-heading{display:grid;gap:5px;min-width:0;}.section-heading h3{margin:0;font-size:1rem;font-weight:800;}.section-heading p{margin:0;color:var(--text-tertiary);font-size:0.84rem;}.member-list{list-style:none;display:flex;flex-direction:column;gap:2px;max-height:none;margin:0;padding:0;overflow:auto;}.member-list li{display:grid;gap:0;padding:6px 8px;border-radius:var(--radius-control);border:1px solid transparent;background:transparent;box-shadow:none;transform-origin:center;}.member-list li:hover{background:var(--bg-elevated);}body.dark .member-list li{background:transparent;}body.dark .member-list li:hover{background:var(--bg-elevated);}.member-list li::before{display:none;}.member-list li.self{border-color:transparent;background:var(--accent-soft);}.member-list li.is-muted{border-color:transparent;opacity:.72;}.member-list li.speaking{border-color:transparent;box-shadow:inset 2px 0 0 var(--color-success);background:var(--bg-elevated);transform:none;animation:none;}.member-meta{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;}.member-primary{min-width:0;display:grid;gap:4px;}.member-heading{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap;}.member-name{max-width:none;min-width:0;font-weight:600;font-size:0.94rem;}.member-secondary{color:var(--text-tertiary);font-size:0.82rem;line-height:1.4;}.member-presence-dot{width:10px;height:10px;border-radius:50%;background:var(--color-success);box-shadow:none;}.member-presence-dot.self{background:var(--accent);box-shadow:none;}.member-presence-dot.connected{background:var(--color-success);box-shadow:none;}.member-presence-dot.connecting,.member-presence-dot.reconnecting,.member-presence-dot.unstable{background:var(--color-warning);box-shadow:none;}.member-presence-dot.failed,.member-presence-dot.disconnected{background:var(--color-danger);box-shadow:none;}.member-presence-dot.unknown{background:var(--text-muted);box-shadow:none;}.member-actions{display:grid;gap:10px;margin-top:0;max-height:0;opacity:0;overflow:hidden;transform:translateY(-4px);}.member-list li:hover .member-actions,.member-list li:focus-within .member-actions,.member-list li.speaking .member-actions{margin-top:12px;max-height:180px;opacity:1;transform:translateY(0);}.member-telemetry,.member-control-strip{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}.network-badge.good{color:#22c55e;border-color:rgba(34,197,94,0.24);background:var(--success-soft);}.network-badge.fair{color:#f59e0b;border-color:rgba(245,158,11,0.26);background:rgba(245,158,11,0.14);}.network-badge.bad,.network-badge.muted{color:#f87171;border-color:rgba(248,113,113,0.24);background:var(--danger-soft);}.member-volume-control{width:148px;height:30px;padding:0 10px;border-radius:8px;border:1px solid var(--border-light);background:rgba(148,163,184,0.10);}.member-volume-control input[type="range"]{width:100%;flex:1 1 auto;}.member-volume-badge{background:rgba(15,23,42,0.92);}.mini-btn{min-height:34px;padding:0 12px;font-size:0.78rem;font-weight:700;border-radius:8px;}.mini-btn.warn{color:#f59e0b;border-color:rgba(245,158,11,0.26);background:rgba(245,158,11,0.10);}.mini-btn.danger{color:#f87171;border-color:rgba(248,113,113,0.24);background:rgba(248,113,113,0.10);}#room-chat-panel{display:flex;flex-direction:column;min-height:0;height:100%;background:var(--bg-panel-strong);border:1px solid var(--border-light);box-shadow:var(--shadow);}#room-chat-messages{flex:1 1 auto;min-height:320px;height:auto;max-height:none;padding:16px;border-radius:8px;background:rgba(255,255,255,0.32);border:1px solid var(--border-light);}body.dark #room-chat-messages{background:rgba(255,255,255,0.03);}.room-chat-line{max-width:min(78%,560px);}.room-chat-bubble{border-radius:6px;background:rgba(255,255,255,0.58);border:1px solid rgba(148,163,184,0.16);box-shadow:0 8px 18px rgba(15,23,42,0.05);}body.dark .room-chat-bubble{background:rgba(255,255,255,0.05);}.room-chat-item.self .room-chat-bubble{background:linear-gradient(135deg,#f8fafc,#eef2ff);color:#172033;border-color:rgba(99,102,241,.22);box-shadow:0 8px 20px rgba(99,102,241,.10);}.room-chat-item.vanity-message .room-chat-bubble:not(.has-image){position:relative;overflow:hidden;background:linear-gradient(135deg,rgba(255,251,235,.98),rgba(254,243,199,.9) 42%,rgba(239,246,255,.96));color:#2b1a05;border:1px solid rgba(180,83,9,.30);box-shadow:0 10px 24px rgba(180,83,9,.14),inset 0 1px 0 rgba(255,255,255,.86);}.room-chat-item.vanity-message .room-chat-bubble:not(.has-image)::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,rgba(255,255,255,.42),rgba(255,255,255,0) 34%);opacity:.72;}body.dark .room-chat-item.vanity-message .room-chat-bubble:not(.has-image){background:linear-gradient(135deg,rgba(63,42,17,.96),rgba(88,60,20,.92) 44%,rgba(35,45,72,.94));color:#fff7ed;border-color:rgba(251,191,36,.32);box-shadow:0 10px 24px rgba(251,191,36,.12),inset 0 1px 0 rgba(255,255,255,.12);}.room-chat-item.vanity-message .room-chat-bubble.has-image .room-chat-image{box-shadow:0 8px 22px rgba(180,83,9,.18),0 0 0 1px rgba(180,83,9,.24);}.room-chat-input-row{margin-top:14px;align-items:stretch;}#room-chat-send-btn{min-width:104px;height:52px;}.audio-console-wrap{grid-area:dock;align-self:end;}.audio-console-shell{border-radius:8px;border:1px solid var(--border-light);background:var(--bg-panel);box-shadow:var(--shadow);overflow:hidden;}.audio-console-shell>summary{list-style:none;cursor:pointer;padding:16px 18px;background:rgba(148,163,184,0.08);}.audio-console-shell>summary::-webkit-details-marker{display:none;}.audio-console-summary{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}.audio-console-title-group{display:grid;gap:4px;}.audio-console-title-group strong{font-size:0.98rem;}.audio-console-kicker{color:var(--text-tertiary);font-size:0.76rem;font-weight:800;letter-spacing:0.02em;text-transform:uppercase;}.audio-console-chips{display:flex;gap:8px;flex-wrap:wrap;}.device-panel{padding:18px;margin-bottom:0;border:0;background:transparent;}.settings-section{border-radius:6px;background:rgba(255,255,255,0.24);border:1px solid var(--border-light);padding:14px;margin-bottom:12px;}body.dark .settings-section{background:rgba(255,255,255,0.03);}.settings-section>summary{color:var(--text-primary);font-size:0.94rem;font-weight:800;}.settings-section>summary::after{content:'展开';color:var(--text-tertiary);font-size:0.76rem;font-weight:700;}.settings-section[open]>summary::after{content:'收起';}.local-audio-actions,.control-grid{gap:12px;}.audio-toggle-btn{min-height:46px;background:rgba(148,163,184,0.12);color:var(--text-primary);border:1px solid var(--border-light);box-shadow:none;}.audio-toggle-btn.is-on{background:var(--accent);color:#fff;border-color:transparent;box-shadow:none;}.audio-toggle-btn.is-on:hover:not(:disabled){background:var(--accent-hover);}.level-control-list{gap:14px;}.level-slider-wrap{background:rgba(148,163,184,0.12);border:1px solid var(--border-light);}.switch-field{min-height:52px;border-radius:6px;background:rgba(148,163,184,0.08);border:1px solid var(--border-light);}.status-bar{border-radius:6px;border:1px solid var(--border-light);border-left-width:1px;background:rgba(148,163,184,0.08);color:var(--text-secondary);}.footer{margin-top:18px;color:var(--text-tertiary);}@keyframes ui-fade-in{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}@keyframes speaking-breathe{0%,100%{box-shadow:0 0 0 1px rgba(96,165,250,0.18) inset,0 14px 32px rgba(59,130,246,0.14);}50%{box-shadow:0 0 0 1px rgba(96,165,250,0.26) inset,0 0 0 6px rgba(96,165,250,0.06),0 18px 38px rgba(59,130,246,0.22);}}@media (max-width:1280px){.room-list{grid-template-columns:repeat(2,minmax(0,1fr));}}@media (max-width:980px){body{padding:12px;}.card{min-height:auto;padding:16px;border-radius:8px;}.app-nav,.room-tabs-wrap,.room-header-row{padding-left:0;padding-right:0;border-bottom:0;}.room-workspace{grid-template-columns:1fr;grid-template-areas:"members" "chat" "dock";min-height:auto;}.lobby-toolbar,.room-title-actions{grid-template-columns:1fr;}.room-list{grid-template-columns:1fr;}.audio-console-summary,.members-header,.room-card-head,.room-card-footer{align-items:flex-start;}#room-chat-messages{min-height:260px;}}@media (max-width:720px){.app-nav{flex-direction:column;align-items:stretch;}.brand-block,.header-actions{width:100%;}.header-actions{justify-content:space-between;}.user-menu-dropdown{left:0;right:auto;width:min(100%,280px);}.member-actions{margin-top:12px;max-height:200px;opacity:1;transform:none;}.member-meta{grid-template-columns:auto minmax(0,1fr);}.member-presence-dot{display:none;}.audio-console-shell>summary,.members-area,.room-tabs-wrap,.room-header-row{padding-left:14px;padding-right:14px;}}.room-header-row,.room-title-actions,.room-workspace,.card{overflow:visible;}.room-title-actions{grid-template-columns:minmax(0,1fr) auto auto auto;}.room-rename-input-wrap{display:flex;align-items:center;min-width:0;}.room-rename-input-wrap input{height:52px;min-height:52px;padding:0 18px;line-height:normal;box-sizing:border-box;font-size:15px;}.room-workspace{grid-template-columns:minmax(280px,0.82fr) minmax(0,1.18fr);grid-template-areas:"members chat";align-items:stretch;}.members-area.members-bottom{grid-area:members;min-height:420px;max-height:min(70vh,760px);}.room-left-column>.device-panel,.audio-console-wrap,.audio-console-shell{display:none;}.member-list{flex:1 1 auto;max-height:none;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;touch-action:pan-y;overscroll-behavior:contain;}.member-list::-webkit-scrollbar{display:none;}.member-list.dragging{cursor:grabbing;user-select:none;}.member-list li{max-width:100%;min-width:0;overflow:hidden;cursor:inherit;}.member-meta{grid-template-columns:minmax(0,1fr) auto;min-width:0;max-width:100%;}.member-primary,.member-heading,.member-role-wrap,.member-actions,.member-telemetry,.member-control-strip{min-width:0;max-width:100%;}.member-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.section-heading p,.members-header .section-heading p{display:none;}.audio-settings-modal{position:fixed;inset:0;z-index:3500;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(15,23,42,0.64);backdrop-filter:none;-webkit-backdrop-filter:none;}.audio-settings-modal.open{display:flex;}.audio-settings-dialog{width:min(900px,100%);max-height:82vh;background:var(--bg-card);color:var(--text-primary);border:1px solid var(--border-light);border-radius:8px;box-shadow:0 30px 70px rgba(15,23,42,0.35);display:flex;flex-direction:column;overflow:hidden;}.audio-settings-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 24px;border-bottom:1px solid var(--border-light);}.audio-settings-header h3{margin:0;font-size:1.12rem;font-weight:800;}.audio-settings-header p{margin-top:4px;color:var(--text-tertiary);font-size:0.9rem;}.audio-settings-header-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;}.audio-settings-body{padding:22px 24px;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;-ms-overflow-style:none;}.audio-settings-body::-webkit-scrollbar{display:none;}.audio-settings-body .device-panel{display:block;padding:0;margin:0;}.audio-settings-close{border:1px solid var(--border-light);border-radius:999px;width:36px;height:36px;cursor:pointer;background:var(--btn-secondary-bg);color:var(--text-primary);font-size:22px;line-height:1;display:inline-flex;align-items:center;justify-content:center;}body.modal-open{overflow:hidden;}body.dark .audio-settings-dialog{background:var(--bg-card);border-color:rgba(71,85,105,0.52);}body.dark .audio-settings-close{background:rgba(255,255,255,0.05);}body{min-height:100vh;}.app{min-height:calc(100vh - 24px);display:flex;flex-direction:column;}.card{min-height:calc(100vh - 24px);display:flex;flex-direction:column;}#main-interface{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;}#lobby:not(.hidden),#call-interface:not(.hidden){flex:1 1 auto;display:flex;flex-direction:column;min-height:0;}#main-interface{flex:1 1 auto;min-height:0;}#lobby:not(.hidden){flex:1 1 auto;min-height:0;}.footer{margin-top:auto;padding-top:18px;text-align:center;flex:0 0 auto;position:relative;z-index:1;}.room-item{display:flex;flex-direction:column;justify-content:space-between;gap:14px;min-height:170px;max-width:100%;overflow:hidden;}.room-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;min-width:0;}.room-card-title-wrap{min-width:0;flex:1 1 auto;}.room-item .name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.room-card-subtitle{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.room-card-flag{flex:0 0 auto;white-space:nowrap;}.room-card-meta{display:flex;flex-wrap:wrap;gap:8px;min-width:0;}.room-meta-chip{max-width:100%;}.room-card-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;margin-top:auto;}.room-card-note{color:var(--text-secondary);flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.room-card-footer .btn,.room-card-footer .quick-join{flex:0 0 auto;min-width:112px;}.room-title-block{display:flex;flex-direction:column;gap:10px;}.room-title-block h2{margin:0 0 2px;}.mini-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:0;margin-bottom:4px;}.room-title-actions{margin-top:8px;}.invite-actions-group{position:relative;z-index:3000;overflow:visible;}.invite-actions-menu{position:fixed;top:0;left:0;right:auto;z-index:5000;overflow:visible;display:none;}.invite-actions-menu.open{display:flex;}.member-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;padding:12px 14px;}.member-meta{min-width:0;max-width:100%;width:fit-content;justify-self:start;display:flex;align-items:center;gap:10px;}.member-primary{min-width:0;max-width:100%;flex:0 1 auto;}.member-heading{display:flex;align-items:center;gap:6px;min-width:0;max-width:100%;flex-wrap:nowrap;}.member-role-wrap{min-width:0;max-width:48%;display:flex;align-items:center;gap:6px;flex-wrap:wrap;flex:0 1 auto;}.member-name{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto;}.member-presence-dot{flex:0 0 auto;}.member-actions{justify-self:end;align-self:center;min-width:0;width:0;max-width:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;opacity:0;overflow:hidden;pointer-events:none;}.member-list li:hover .member-actions,.member-list li:focus-within .member-actions,.member-list li.speaking .member-actions{margin-top:0;width:auto;max-width:100%;opacity:1;pointer-events:auto;}.members-area,.member-list{overflow-x:hidden;}.member-list li{grid-template-columns:minmax(0,1fr) auto;overflow:visible;gap:12px;}.member-meta{width:100%;min-width:0;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;}.member-primary{min-width:0;overflow:hidden;}.member-heading{min-width:0;display:flex;align-items:center;gap:6px;flex-wrap:nowrap;}.member-role-wrap{min-width:0;max-width:none;display:flex;align-items:center;gap:6px;flex-wrap:nowrap;flex:0 0 auto;}.member-name{min-width:0;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto;}.member-secondary{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.member-role,.network-badge,.member-actions .mini-btn{flex:0 0 auto;white-space:nowrap;word-break:keep-all;}.member-actions{flex:0 0 auto;align-items:center;gap:8px;flex-wrap:nowrap;white-space:nowrap;overflow:visible;}.member-telemetry,.member-control-strip{flex:0 0 auto;display:flex;align-items:center;gap:8px;flex-wrap:nowrap;min-width:0;}.member-volume-control{position:relative;overflow:visible;z-index:5;flex:0 0 128px;width:128px;max-width:128px;}.member-volume-control:hover,.member-volume-control:focus-within,.member-volume-control.is-dragging{z-index:50;}.member-volume-control input[type="range"]{width:100%;min-width:0;flex:1 1 auto;}.member-volume-badge{display:none;}.member-volume-fixed-badge{position:fixed;z-index:6000;padding:4px 8px;border-radius:6px;background:rgba(15,23,42,0.94);color:#fff;font-size:12px;font-weight:800;line-height:1;white-space:nowrap;pointer-events:none;opacity:0;transform:translate(-50%,-100%);transition:opacity 0.12s ease;box-shadow:0 8px 18px rgba(15,23,42,0.22);}.member-volume-fixed-badge.show{opacity:1;}.member-volume-fixed-badge::after{content:'';position:absolute;left:50%;bottom:-4px;transform:translateX(-50%) rotate(45deg);width:8px;height:8px;background:rgba(15,23,42,0.94);}.audio-settings-body{padding-left:28px;padding-right:28px;}.audio-settings-dialog .level-control-list{display:grid;gap:16px;margin:16px 0 18px;padding:0 2px;}.audio-settings-dialog .level-control{display:grid;grid-template-columns:56px minmax(240px,1fr) 60px;align-items:center;gap:16px;min-height:48px;}.audio-settings-dialog .level-control-label{white-space:nowrap;color:var(--text-secondary);font-weight:700;}.audio-settings-dialog .level-slider-wrap{position:relative;height:40px;padding:0 8px;border-radius:999px;overflow:visible;}.audio-settings-dialog .level-slider-wrap input[type="range"]{width:100%;height:40px;margin:0;padding:0;}.audio-settings-dialog .level-slider-wrap input[type="range"]::-webkit-slider-thumb{width:18px;height:18px;border-radius:50%;margin-top:-7px;}.audio-settings-dialog .level-slider-wrap input[type="range"]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;}.audio-settings-dialog .volume-value{min-width:60px;text-align:right;white-space:nowrap;font-weight:700;}.members-header{align-items:center;margin-bottom:10px;min-height:auto;}.section-heading{gap:0;}.members-subtitle,.member-subtitle,.room-chat-subtitle,.panel-subtitle,.section-heading p{display:none !important;margin:0 !important;padding:0 !important;height:0 !important;min-height:0 !important;}.invite-actions-menu{background:#ffffff;color:var(--text-primary);border:1px solid var(--border-light);border-radius:6px;box-shadow:0 24px 60px rgba(15,23,42,0.24);overflow:hidden;}body.dark .invite-actions-menu{background:#172033;border-color:rgba(71,85,105,0.5);box-shadow:0 24px 70px rgba(0,0,0,0.45);}.members-area{min-height:auto;height:auto;}.members-area.members-bottom{min-height:240px;max-height:min(54vh,520px);align-self:start;}.member-list{max-height:min(42vh,430px);min-height:0;}.connection-status-row{margin-bottom:18px;}.footer{padding-top:6px;}@media (max-width:720px){.audio-settings-dialog .level-control{grid-template-columns:48px minmax(0,1fr) 54px;gap:10px;}.audio-settings-body{padding-left:18px;padding-right:18px;}.members-area.members-bottom{min-height:220px;max-height:48vh;}.member-volume-control{flex-basis:108px;width:108px;max-width:108px;}}@media (max-width:980px){.room-title-actions{grid-template-columns:1fr;}.room-workspace{grid-template-columns:1fr;grid-template-areas:"members" "chat";}.members-area.members-bottom{min-height:320px;max-height:52vh;}}@media (max-width:720px){.audio-settings-modal{padding:12px;align-items:stretch;}.audio-settings-dialog{max-height:88vh;border-radius:8px;}.audio-settings-header{align-items:flex-start;padding:18px;}.audio-settings-body{padding:18px;}}.room-workspace{align-items:start;}#room-chat-panel{display:flex;flex-direction:column;min-height:0;align-self:start;max-height:min(72vh,760px);}#room-chat-messages{flex:1 1 auto;min-height:320px;max-height:560px;height:auto;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior:contain;touch-action:pan-y;}#room-chat-messages::-webkit-scrollbar{display:none;}.room-list{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;}.room-item{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"head action" "meta action" "note action";align-items:center;gap:10px 18px;min-height:156px;padding:20px 22px;text-align:left;}.room-card-head{grid-area:head;min-width:0;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}.room-card-title-wrap{min-width:0;display:flex;flex-direction:column;gap:6px;}.room-card-meta{grid-area:meta;min-width:0;display:flex;flex-wrap:wrap;gap:8px;}.room-card-footer{display:contents;}.room-card-note{grid-area:note;justify-self:start;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.quick-join{grid-area:action;align-self:center;justify-self:end;min-width:112px;}.room-item .name,.room-card-subtitle{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}@media (max-width:1280px){.room-list{grid-template-columns:repeat(2,minmax(0,1fr));}}@media (max-width:720px){#room-chat-panel{max-height:none;}#room-chat-messages{min-height:260px;max-height:54vh;}.room-list{grid-template-columns:1fr;}.room-item{grid-template-columns:1fr;grid-template-areas:"head" "meta" "note" "action";align-items:stretch;}.quick-join{justify-self:stretch;width:100%;}}.member-list{padding:8px 10px 14px;}.member-list li{padding:14px 18px;border-radius:6px;gap:16px;}.member-list li:last-child{margin-bottom:6px;}.member-meta{column-gap:12px;}.member-actions{gap:10px;padding-right:8px;}.member-presence-dot{margin-right:4px;}.member-volume-control{flex-basis:132px;width:132px;max-width:132px;}.member-volume-fixed-badge{transform:translate(-50%,calc(-100% - 8px));}.audio-settings-dialog .level-slider-wrap{padding:0 6px;overflow:visible;background:transparent;border:none;box-shadow:none;}.audio-settings-dialog .level-slider-wrap .vu-meter,.audio-settings-dialog .level-slider-wrap .vu-fill{display:none !important;}.audio-settings-dialog .level-slider-wrap input[type="range"]{-webkit-appearance:none;appearance:none;position:relative;inset:auto;width:100%;height:36px;background:transparent;margin:0;padding:0;outline:none;cursor:pointer;}.audio-settings-dialog .level-slider-wrap input[type="range"]::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:#cbd5e1;border:none;box-shadow:none;}.audio-settings-dialog .level-slider-wrap input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--accent);border:3px solid #ffffff;box-shadow:0 2px 8px rgba(79,124,255,0.25);margin-top:-6px;}.audio-settings-dialog .level-slider-wrap input[type="range"]::-moz-range-track{height:6px;border-radius:999px;background:#cbd5e1;border:none;box-shadow:none;}.audio-settings-dialog .level-slider-wrap input[type="range"]::-moz-range-progress{height:6px;border-radius:999px;background:#cbd5e1;border:none;}.audio-settings-dialog .level-slider-wrap input[type="range"]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--accent);border:3px solid #ffffff;box-shadow:0 2px 8px rgba(79,124,255,0.25);}body.dark .audio-settings-dialog .level-slider-wrap input[type="range"]::-webkit-slider-runnable-track{background:#475569;}body.dark .audio-settings-dialog .level-slider-wrap input[type="range"]::-moz-range-track,body.dark .audio-settings-dialog .level-slider-wrap input[type="range"]::-moz-range-progress{background:#475569;}.member-list li{grid-template-columns:minmax(0,1fr) auto;align-items:center;}.member-list li.has-avatar{grid-template-columns:36px minmax(0,1fr) auto;}.member-list li::before{content:none !important;display:none !important;}.member-main{min-width:0;display:flex;flex-direction:column;gap:5px;}.member-title-row{min-width:0;display:flex;align-items:center;gap:8px;flex-wrap:nowrap;}.member-heading{justify-content:flex-start;}.member-heading .member-role-wrap{margin-left:auto;justify-content:flex-end;flex:0 0 auto;}.member-secondary{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-height:22px;}.member-secondary .member-status-text{color:var(--text-tertiary);flex:0 0 auto;}.member-secondary .public-id-wrap{display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap;min-width:0;}.member-side{display:flex;align-items:center;gap:10px;flex:0 0 auto;padding-right:4px;}.member-side .member-presence-dot{display:inline-block !important;width:10px;height:10px;border-radius:50%;margin-right:4px;flex:0 0 auto;}.member-side .member-presence-dot.self{background:var(--accent);box-shadow:none;}.member-side .member-presence-dot.connected,.member-side .member-presence-dot.ok{background:var(--color-success);box-shadow:none;}.member-side .member-presence-dot.connecting,.member-side .member-presence-dot.reconnecting,.member-side .member-presence-dot.unstable{background:var(--color-warning);box-shadow:none;}.member-side .member-presence-dot.failed,.member-side .member-presence-dot.disconnected{background:var(--color-danger);box-shadow:none;}.member-side .member-presence-dot.unknown{background:var(--text-muted);box-shadow:none;}.member-presence-dot{transition:transform .12s ease,box-shadow .12s ease,background-color .12s ease;}.member-list li.speaking{border-color:transparent;background:rgba(88,101,242,.08);box-shadow:inset 2px 0 0 var(--accent);}.member-list li.speaking .member-side .member-presence-dot,.member-list li.speaking .member-presence-dot{background:var(--accent);transform:scale(1.16);box-shadow:0 0 0 3px rgba(88,101,242,.16);}@media (prefers-reduced-motion:reduce){.member-presence-dot{transition:none !important;}.member-list li.speaking .member-presence-dot{transform:none;}}.member-action-btn{white-space:nowrap;min-width:58px;}.member-list .member-actions,.member-list .member-control-strip,.member-list .member-volume-control{display:none !important;}.member-list li:hover .member-actions,.member-list li:focus-within .member-actions,.member-list li.speaking .member-actions{margin-top:0 !important;max-height:0 !important;opacity:0 !important;pointer-events:none !important;}.member-action-modal{position:fixed;inset:0;z-index:4300;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(15,23,42,0.64);backdrop-filter:none;-webkit-backdrop-filter:none;}.member-action-modal.open{display:flex;}.member-action-dialog{width:min(560px,100%);max-height:82vh;background:var(--bg-card);color:var(--text-primary);border:1px solid var(--border-light);border-radius:8px;box-shadow:0 30px 70px rgba(15,23,42,0.35);display:flex;flex-direction:column;overflow:hidden;}.member-action-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 24px;border-bottom:1px solid var(--border-light);}.member-action-header h3{margin:0;font-size:1.08rem;font-weight:800;}.member-action-header p{margin:4px 0 0;color:var(--text-tertiary);font-size:0.9rem;}.member-action-close{border:none;border-radius:999px;width:36px;height:36px;cursor:pointer;background:var(--btn-secondary-bg);color:var(--text-primary);font-size:18px;line-height:1;}.member-action-body{padding:22px 24px;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;-ms-overflow-style:none;display:grid;gap:16px;}.member-action-body::-webkit-scrollbar{display:none;}.member-action-info{display:grid;gap:10px;padding:14px;border-radius:6px;background:rgba(148,163,184,0.08);border:1px solid var(--border-light);}.member-action-info-row{display:flex;justify-content:space-between;gap:12px;color:var(--text-secondary);font-size:0.92rem;}.member-action-info-row strong{color:var(--text-primary);font-weight:800;text-align:right;}.member-action-section{display:grid;gap:12px;padding-top:2px;}.member-action-section-title{color:var(--text-secondary);font-size:0.9rem;font-weight:800;}.member-modal-volume-row,.member-action-volume-row{display:grid;grid-template-columns:72px minmax(0,1fr);align-items:center;gap:14px;}.member-modal-volume-label{color:var(--text-secondary);font-weight:800;font-size:0.92rem;white-space:nowrap;}.member-modal-volume-control{position:relative;overflow:visible;padding:0 6px;}.member-modal-volume-control input[type="range"],.member-action-volume-row input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:36px;background:transparent;margin:0;padding:0;outline:none;cursor:pointer;}.member-modal-volume-badge{position:absolute;top:-30px;left:50%;transform:translateX(-50%);padding:4px 8px;border-radius:6px;background:rgba(15,23,42,0.92);color:#fff;font-size:12px;font-weight:800;line-height:1;white-space:nowrap;opacity:0;pointer-events:none;z-index:20;transition:opacity 0.12s ease,left 0.08s linear;}.member-modal-volume-badge::after{content:'';position:absolute;left:50%;bottom:-4px;transform:translateX(-50%) rotate(45deg);width:8px;height:8px;background:rgba(15,23,42,0.92);}.member-modal-volume-control:hover .member-modal-volume-badge,.member-modal-volume-control:focus-within .member-modal-volume-badge,.member-modal-volume-control.is-dragging .member-modal-volume-badge{opacity:1;}.member-action-volume-row input[type="range"]::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:#cbd5e1;border:none;}.member-action-volume-row input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--accent);border:3px solid #fff;box-shadow:0 2px 8px rgba(79,124,255,0.25);margin-top:-6px;}.member-action-volume-row input[type="range"]::-moz-range-track{height:6px;border-radius:999px;background:#cbd5e1;border:none;}.member-action-volume-row input[type="range"]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--accent);border:3px solid #fff;box-shadow:0 2px 8px rgba(79,124,255,0.25);}.member-action-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;}.member-action-actions .mini-btn{width:100%;justify-content:center;min-height:40px;}body.dark .member-action-dialog{background:#172033;border-color:rgba(71,85,105,0.5);box-shadow:0 30px 80px rgba(0,0,0,0.48);}body.dark .member-action-volume-row input[type="range"]::-webkit-slider-runnable-track{background:#475569;}body.dark .member-action-volume-row input[type="range"]::-moz-range-track{background:#475569;}.quick-join-choice-overlay{z-index:4600;background:rgba(15,23,42,0.58);backdrop-filter:none;-webkit-backdrop-filter:none;}.quick-join-choice-dialog{background:#ffffff !important;color:#0f172a;border:1px solid rgba(148,163,184,0.42);box-shadow:0 30px 80px rgba(15,23,42,0.34);}.quick-join-choice-title{color:#0f172a;}.quick-join-choice-desc,.quick-join-password-form label{color:#475569;}.quick-join-password-form input[type="password"]{background:#ffffff;color:#0f172a;border-color:rgba(96,165,250,0.58);box-shadow:inset 0 1px 0 rgba(255,255,255,0.78);}.quick-join-password-form input[type="password"]::placeholder{color:#64748b;}.quick-join-password-form .quick-join-hidden-row{display:flex;align-items:center;gap:8px;color:#334155;}.quick-join-password-form .quick-join-hidden-row.hidden{display:none !important;}.quick-join-password-form .quick-join-hidden-row input{width:16px;height:16px;margin:0;}.room-password-join-hidden-row{display:flex;align-items:center;gap:10px;margin:12px 0 16px;color:#334155;font-weight:700;}.room-password-join-hidden-row input[type="checkbox"]{width:18px;height:18px;margin:0;padding:0;flex:0 0 auto;-webkit-appearance:none;appearance:none;border:1px solid rgba(148,163,184,0.7);border-radius:5px;background:#ffffff;cursor:pointer;box-shadow:none;outline:none;display:grid;place-items:center;}.room-password-join-hidden-row input[type="checkbox"]:checked{background:var(--accent);border-color:var(--accent);}.room-password-join-hidden-row input[type="checkbox"]:checked::after{content:"✓";color:#fff;font-size:13px;line-height:1;font-weight:900;}.room-password-join-hidden-row input[type="checkbox"]:focus-visible{box-shadow:0 0 0 3px rgba(37,99,235,0.18);}body.dark .quick-join-choice-dialog{background:#172033 !important;color:#f8fafc;border-color:rgba(71,85,105,0.62);box-shadow:0 30px 90px rgba(0,0,0,0.52);}body.dark .quick-join-choice-title{color:#f8fafc;}body.dark .quick-join-choice-desc,body.dark .quick-join-password-form label{color:#cbd5e1;}body.dark .quick-join-password-form input[type="password"]{background:#0f172a;color:#f8fafc;border-color:rgba(96,165,250,0.52);}body.dark .quick-join-password-form input[type="password"]::placeholder{color:#94a3b8;}body.dark .quick-join-password-form .quick-join-hidden-row{color:#e2e8f0;}body.dark .room-password-join-hidden-row{color:#e2e8f0;}body.dark .room-password-join-hidden-row input[type="checkbox"]{background:#0f172a;border-color:rgba(148,163,184,0.55);}.room-workspace{grid-template-columns:minmax(360px,420px) minmax(0,1fr);align-items:start;min-height:auto;}.room-left-column,.room-right-column{min-width:0;min-height:0;display:flex;flex-direction:column;}.members-area.members-bottom{min-height:min(68vh,640px);max-height:min(72vh,760px);height:auto;align-self:stretch;display:flex;flex-direction:column;}.members-area.members-bottom .member-list{flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto;overflow-x:hidden;}.room-right-column #room-chat-panel{align-self:stretch;}.room-chat-image-preview{display:flex;align-items:center;gap:10px;min-height:58px;margin-top:12px;padding:8px;border:1px solid var(--border-light);border-radius:8px;background:rgba(255,255,255,0.52);}body.dark .room-chat-image-preview{background:rgba(255,255,255,0.05);}.room-chat-image-preview-thumb{width:46px;height:46px;flex:0 0 46px;border-radius:6px;object-fit:cover;background:var(--bg-panel);border:1px solid var(--border-light);}.room-chat-image-preview-info{min-width:0;flex:1 1 auto;display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--text-secondary);}.room-chat-image-preview-name{color:var(--text-primary);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.room-chat-image-remove{min-width:34px;height:34px;padding:0;justify-content:center;border-radius:6px;}.room-chat-action-btn{width:52px;min-width:52px;height:52px;padding:0;border-radius:6px;justify-content:center;font-weight:800;}.room-chat-input-row{display:grid;grid-template-columns:minmax(0,1fr) 52px 52px 104px;align-items:end;gap:10px;position:relative;}.room-chat-input-row #room-chat-send-btn{width:100%;min-width:0;}.room-chat-thumb-btn{position:relative;overflow:hidden;border-style:dashed;background:var(--bg-panel);color:var(--text-secondary);box-shadow:none;}.room-chat-thumb-icon{width:24px;height:24px;border:2px solid currentColor;border-radius:5px;position:relative;opacity:.72;}.room-chat-thumb-icon::before{content:'';position:absolute;width:5px;height:5px;right:4px;top:4px;border-radius:50%;background:currentColor;}.room-chat-thumb-icon::after{content:'';position:absolute;left:4px;right:4px;bottom:4px;height:8px;background:currentColor;clip-path:polygon(0 100%,36% 36%,52% 58%,72% 24%,100% 100%);opacity:.85;}.room-chat-thumb-img{position:absolute;inset:3px;width:calc(100% - 6px);height:calc(100% - 6px);object-fit:cover;border-radius:4px;display:none;background:var(--bg-card);}.room-chat-thumb-btn.has-image{border-style:solid;padding:0;}.room-chat-thumb-btn.has-image .room-chat-thumb-img{display:block;}.room-chat-thumb-btn.has-image .room-chat-thumb-icon{display:none;}.room-chat-emoji-btn{font-size:20px;line-height:1;}.room-chat-emoji-panel{position:absolute;right:166px;bottom:62px;z-index:8;width:min(320px,calc(100vw - 48px));max-height:210px;overflow:auto;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px;padding:10px;border:1px solid var(--border-light);border-radius:8px;background:var(--bg-elevated);box-shadow:var(--shadow);}.room-chat-emoji-panel.hidden{display:none;}.room-chat-emoji-item{width:34px;height:34px;border:0;border-radius:6px;background:transparent;color:var(--text-primary);font-size:21px;line-height:1;cursor:pointer;}.room-chat-emoji-item:hover,.room-chat-emoji-item:focus{outline:none;background:rgba(99,102,241,.12);}.room-chat-bubble.has-image,body.dark .room-chat-bubble.has-image,.room-chat-item.self .room-chat-bubble.has-image,body.dark .room-chat-item.self .room-chat-bubble.has-image{padding:0;border:0;background:transparent;color:var(--text-primary);overflow:visible;box-shadow:none;}.room-chat-image{display:block;width:auto;height:auto;max-width:min(260px,58vw);max-height:220px;border-radius:6px;object-fit:contain;background:transparent;border:0;box-shadow:0 4px 14px rgba(15,23,42,.12);cursor:zoom-in;}.room-chat-image-caption{max-width:min(260px,58vw);padding:8px 6px 4px;font-size:13px;line-height:1.45;white-space:pre-wrap;word-break:break-word;color:var(--text-primary);}.image-viewer-overlay{position:fixed;inset:0;z-index:30000;display:flex;flex-direction:column;background:rgba(15,23,42,0.88);opacity:1;}.image-viewer-overlay.hidden{display:none;}.image-viewer-toolbar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:56px;padding:10px 14px;color:#fff;background:rgba(15,23,42,0.78);border-bottom:1px solid rgba(255,255,255,0.12);}.image-viewer-title{min-width:0;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:700;}.image-viewer-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto;}.image-viewer-actions .btn{min-width:38px;height:36px;padding:0 10px;border-radius:6px;background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.18);color:#fff;box-shadow:none;}.image-viewer-zoom-label{min-width:54px;text-align:center;font-size:13px;font-weight:700;color:rgba(255,255,255,0.86);}.image-viewer-stage{flex:1 1 auto;min-height:0;overflow:hidden;display:flex;align-items:center;justify-content:center;cursor:grab;touch-action:none;}.image-viewer-stage.is-dragging{cursor:grabbing;}.image-viewer-img{max-width:92vw;max-height:calc(100vh - 92px);object-fit:contain;transform-origin:center center;user-select:none;-webkit-user-drag:none;will-change:transform;border-radius:6px;box-shadow:0 18px 60px rgba(0,0,0,0.42);}@media (max-width:980px){.room-workspace{grid-template-columns:1fr;min-height:auto;}.members-area.members-bottom{min-height:360px;max-height:52vh;}}@media (max-width:720px){.members-area.members-bottom{min-height:300px;max-height:50vh;}.room-chat-input-row{grid-template-columns:minmax(0,1fr) 44px 44px 76px;gap:8px;}.room-chat-action-btn,#room-chat-send-btn{min-width:44px;height:48px;}.room-chat-emoji-panel{right:0;bottom:58px;grid-template-columns:repeat(7,minmax(0,1fr));}}.login-modal,.announcement-modal,.audio-settings-modal,.quick-join-choice-overlay,.member-action-modal{background:rgba(0,0,0,0.6) !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;}.login-section,.announcement-dialog,.audio-settings-dialog,.quick-join-choice-dialog,.member-action-dialog,.invite-dialog,.mic-check-panel{background:var(--bg-elevated) !important;border:1px solid var(--border-light) !important;border-radius:var(--radius-card) !important;box-shadow:var(--shadow) !important;max-height:88vh;overflow-y:auto;}body.dark .login-section,body.dark .announcement-dialog,body.dark .audio-settings-dialog,body.dark .quick-join-choice-dialog,body.dark .member-action-dialog,body.dark .invite-dialog,body.dark .mic-check-panel{background:var(--bg-elevated) !important;border-color:var(--border-light) !important;box-shadow:var(--shadow) !important;}.invite-actions-menu,.user-menu-dropdown{background:var(--bg-elevated) !important;border:1px solid var(--border-light) !important;border-radius:var(--radius-card) !important;box-shadow:var(--shadow) !important;z-index:6000;}body.dark .invite-actions-menu,body.dark .user-menu-dropdown{background:var(--bg-elevated) !important;border-color:var(--border-light) !important;}.invite-actions-group,.room-title-actions,.room-header-row{overflow:visible;}#call-interface .room-title-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;width:100%;max-width:920px;margin-top:8px;padding:0;border:0;background:transparent;box-shadow:none;}#call-interface .room-rename-input-wrap{flex:0 1 360px;min-width:220px;max-width:min(360px,100%);}#call-interface .room-rename-input-wrap input{width:100%;height:42px;border-radius:7px;}#call-interface .room-title-actions .btn,#call-interface .invite-actions-group>.btn{min-width:112px;height:40px;padding:0 14px;border-radius:7px;white-space:nowrap;}#call-interface #dissolve-room-btn{min-width:92px;width:auto;padding-inline:12px;}#call-interface #audio-settings-open-btn{min-width:112px;}@media (max-width:760px){#call-interface .room-title-actions{max-width:none;}#call-interface .room-rename-input-wrap{flex:1 1 100%;max-width:none;}#call-interface .room-title-actions .btn,#call-interface .invite-actions-group{flex:1 1 calc(50% - 6px);}#call-interface .invite-actions-group>.btn{width:100%;}#call-interface #dissolve-room-btn{flex:0 0 auto;}}.login-section .login-close-btn,.audio-settings-close{background:var(--btn-secondary-bg) !important;color:var(--text-secondary) !important;border-radius:var(--radius-control) !important;}.login-section .login-close-btn:hover,.audio-settings-close:hover{background:var(--btn-secondary-border) !important;color:var(--text-primary) !important;}.btn:focus-visible,.tab-btn:focus-visible,.tab-aux-btn:focus-visible,.mini-btn:focus-visible,.theme-toggle:focus-visible,.audio-toggle-btn:focus-visible,input[type="checkbox"]:focus-visible,input[type="range"]:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(88,101,242,.42);}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;scroll-behavior:auto !important;transition-duration:0.01ms !important;}}

/* social page UX fix: more breathable search input, taller relationship list, avatar-enabled rows */
.social-search-row input{padding-left:14px !important;padding-right:14px !important;}
.social-search-row input::placeholder{color:var(--text-muted);}
.relationship-list{min-height:380px;max-height:min(62vh,720px);} 
.relationship-item{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;}
.relationship-avatar,.relationship-avatar-fallback{width:42px;height:42px;border-radius:50%;object-fit:cover;border:1px solid var(--border-light);background:var(--bg-panel);flex:0 0 auto;}
.relationship-avatar-fallback{display:grid;place-items:center;background:var(--accent);color:#fff;font-weight:800;font-size:16px;}
.relationship-main{display:grid;gap:4px;}
.relationship-main span{display:block;line-height:1.35;}
.relationship-actions{align-items:center;}
@media (max-width:900px){.relationship-list{min-height:320px;max-height:56vh;}.relationship-item{grid-template-columns:minmax(0,1fr);align-items:start;}.relationship-avatar,.relationship-avatar-fallback{display:none;}}

/* social relationship row layout + signature clarity fix */
.relationship-item{display:grid !important;grid-template-columns:auto minmax(0,1fr) auto !important;align-items:center !important;justify-content:initial !important;column-gap:14px !important;}
.relationship-main{min-width:0;display:grid;gap:4px;align-self:center;justify-self:start;width:100%;}
.relationship-main strong{font-size:15px;line-height:1.2;}
.relationship-meta{display:block;font-size:12px;color:var(--text-secondary);line-height:1.35;}
.relationship-signature{display:flex;align-items:center;gap:8px;min-width:0;margin-top:1px;}
.relationship-signature-label{flex:0 0 auto;font-size:12px;font-weight:800;color:var(--text-secondary);padding:1px 6px;border-radius:999px;background:var(--bg-panel);border:1px solid var(--border-light);}
.relationship-signature-value{min-width:0;font-size:13px;font-weight:700;color:var(--text-primary);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.92;}
.relationship-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;align-items:center;align-self:center;}
@media (max-width:900px){.relationship-item{grid-template-columns:minmax(0,1fr) !important;row-gap:8px !important;}.relationship-actions{justify-content:flex-start;}.relationship-signature-value{white-space:normal;overflow:visible;}}

/* v11: image viewer + private-message recall fixes */
.image-viewer-overlay{z-index:30000 !important;}
.private-msg{position:relative;}
.private-msg.has-media img,.private-msg-image{max-width:min(260px,58vw);max-height:220px;border-radius:6px;object-fit:contain;cursor:zoom-in;box-shadow:0 4px 14px rgba(15,23,42,.12);background:transparent;}
.private-msg-recall-btn{position:absolute;top:-18px;right:4px;border:1px solid var(--border-light);background:var(--bg-card);color:var(--text-secondary);border-radius:999px;padding:2px 8px;font-size:12px;line-height:18px;cursor:pointer;opacity:0;pointer-events:none;box-shadow:0 4px 12px rgba(15,23,42,.10);}
.private-msg.self:hover .private-msg-recall-btn,.private-msg.self:focus-within .private-msg-recall-btn{opacity:1;pointer-events:auto;}
.private-msg-recall-btn:hover{color:var(--color-danger);border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.08);}
.private-msg.recalled{justify-self:center;max-width:none;background:transparent!important;border:0!important;box-shadow:none!important;color:var(--text-muted)!important;padding:4px 8px!important;}
.private-msg-recalled-note{font-size:12px;color:var(--text-muted);background:rgba(148,163,184,.12);border:1px solid rgba(148,163,184,.20);border-radius:999px;padding:4px 10px;}
body.dark .private-msg-recalled-note{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);}

/* v28: audio-tool style report modal + points/exp card polish */
.report-modal-v28{z-index:18000!important;background:rgba(15,23,42,.58)!important;backdrop-filter:blur(6px)!important;-webkit-backdrop-filter:blur(6px)!important;}
.report-dialog-v28{width:min(560px,calc(100vw - 28px))!important;border-radius:14px!important;overflow:hidden!important;background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,250,252,.99))!important;border:1px solid rgba(148,163,184,.28)!important;box-shadow:0 28px 90px rgba(15,23,42,.28)!important;}
.report-header-v28{padding:20px 22px 14px!important;border-bottom:1px solid rgba(148,163,184,.18)!important;background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(248,250,252,.76))!important;}
.report-header-v28 h3{font-size:20px!important;font-weight:900!important;letter-spacing:-.03em!important;color:#111827!important;margin:0 0 4px!important;}
.report-header-v28 p{margin:0!important;font-size:13px!important;color:#64748b!important;}
.report-close-v28{width:34px!important;height:34px!important;border-radius:999px!important;border:1px solid rgba(148,163,184,.24)!important;background:#fff!important;color:#475569!important;font-weight:800!important;line-height:1!important;}
.report-close-v28:hover{background:#f1f5f9!important;color:#0f172a!important;}
.report-body-v28{padding:18px 22px 20px!important;background:#fff!important;}
.report-form-v28{display:grid;gap:14px;}
.report-target-card-v28{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid rgba(148,163,184,.25);border-radius:12px;background:linear-gradient(180deg,#fff,#f8fafc);box-shadow:inset 0 1px 0 rgba(255,255,255,.8);}
.report-target-avatar-v28{width:48px;height:48px;border-radius:50%;object-fit:cover;border:1px solid rgba(148,163,184,.28);background:#eef2ff;}
.report-target-meta-v28{display:grid;gap:3px;min-width:0;}
.report-target-meta-v28 strong{font-size:16px;line-height:1.2;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.report-target-meta-v28 span{font-size:13px;color:#64748b;font-weight:650;}
.report-field-v28{display:grid;gap:8px;margin:0!important;font-size:14px;font-weight:800;color:#1f2937;}
.report-field-v28>span b{color:#ef4444;}
.report-select-v28,.report-textarea-v28{width:100%;border:1px solid rgba(148,163,184,.35);border-radius:10px;background:#f8fafc;color:#111827;padding:12px 13px;font:inherit;font-weight:650;box-shadow:inset 0 1px 0 rgba(255,255,255,.75);outline:none;}
.report-select-v28:focus,.report-textarea-v28:focus{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.14),inset 0 1px 0 rgba(255,255,255,.75);background:#fff;}
.report-textarea-v28{min-height:102px;resize:vertical;line-height:1.55;font-weight:500;}
.report-counter-v28{justify-self:end;margin-top:-32px;margin-right:10px;font-size:12px;color:#94a3b8;pointer-events:none;}
.report-evidence-field-v28{gap:9px;}
.report-upload-zone-v28{width:100%;min-height:86px;border:1.5px dashed rgba(100,116,139,.36);border-radius:12px;background:linear-gradient(180deg,#f8fafc,#fff);display:grid;place-items:center;gap:4px;text-align:center;color:#334155;cursor:pointer;font:inherit;padding:14px;transition:border-color .18s,background .18s,transform .18s;}
.report-upload-zone-v28 strong{font-size:14px;font-weight:850;}
.report-upload-zone-v28 small{font-size:12px;color:#64748b;font-weight:600;}
.report-upload-icon{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#eef2ff;color:#2563eb;font-weight:900;font-size:18px;margin-bottom:2px;}
.report-upload-zone-v28:hover,.report-upload-zone-v28.is-dragover{border-color:#2563eb;background:#f5f8ff;transform:translateY(-1px);}
.report-upload-zone-v28.is-uploading{opacity:.72;cursor:wait;}
.report-upload-zone-v28.is-disabled{cursor:not-allowed;opacity:.68;background:#f1f5f9;border-color:rgba(148,163,184,.28);}
.report-upload-zone-v28.is-disabled .report-upload-icon{background:#e2e8f0;color:#64748b;}
.report-evidence-hint-v28{font-size:12px;color:#64748b;}
.report-evidence-grid-v28{display:flex;gap:10px;flex-wrap:wrap;min-height:24px;}
.report-evidence-empty{font-size:13px;color:#64748b;background:#f8fafc;border:1px solid rgba(148,163,184,.18);border-radius:999px;padding:6px 10px;}
.report-evidence-thumb{position:relative;width:92px;height:66px;border-radius:10px;overflow:hidden;border:1px solid rgba(148,163,184,.28);background:#0f172a;box-shadow:0 8px 18px rgba(15,23,42,.12);}
.report-evidence-thumb img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in;}
.report-evidence-remove{position:absolute;right:4px;top:4px;width:22px;height:22px;border:0;border-radius:999px;background:rgba(15,23,42,.82);color:#fff;font-weight:900;line-height:1;cursor:pointer;}
.report-rule-hint-v28{font-size:12px;color:#64748b;background:#f8fafc;border:1px solid rgba(148,163,184,.18);border-radius:10px;padding:9px 10px;}
.report-status-v28{min-height:20px;font-size:13px;}
.report-status-v28.err,.report-status-v28.error{color:#dc2626!important;}
.report-actions-v28{display:flex;justify-content:flex-end;gap:10px;padding-top:4px;}
.report-cancel-v28,.report-submit-v28{min-width:112px;height:42px;border-radius:10px;border:1px solid rgba(148,163,184,.32);font:inherit;font-weight:850;cursor:pointer;}
.report-cancel-v28{background:#fff;color:#334155;}
.report-cancel-v28:hover{background:#f8fafc;}
.report-submit-v28{border-color:#ef4444;background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;box-shadow:0 10px 22px rgba(239,68,68,.24);display:inline-flex;align-items:center;justify-content:center;gap:8px;}
.report-submit-v28:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 14px 28px rgba(239,68,68,.28);}
.report-submit-v28:disabled{opacity:.66;cursor:not-allowed;}
.profile-exp-meter{height:7px;width:100%;background:rgba(148,163,184,.22);border-radius:999px;margin-top:8px;overflow:hidden;}
.profile-exp-meter span{display:block;height:100%;width:0%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),#60a5fa);transition:width .2s ease;}
body.dark .report-dialog-v28,body.dark .report-body-v28{background:var(--bg-card)!important;color:var(--text-primary)!important;}
body.dark .report-header-v28{background:var(--bg-elevated)!important;border-color:var(--border-light)!important;}
body.dark .report-header-v28 h3,body.dark .report-target-meta-v28 strong{color:var(--text-primary)!important;}
body.dark .report-target-card-v28,body.dark .report-select-v28,body.dark .report-textarea-v28,body.dark .report-upload-zone-v28,body.dark .report-rule-hint-v28,body.dark .report-evidence-empty{background:var(--bg-panel)!important;border-color:var(--border-light)!important;color:var(--text-primary)!important;}
body.dark .report-cancel-v28{background:var(--btn-secondary-bg);color:var(--text-primary);border-color:var(--btn-secondary-border);}
.report-target-avatar-fallback-v28{display:grid;place-items:center;background:linear-gradient(135deg,#2563eb,#6366f1);color:#fff;font-weight:900;font-size:18px;}


/* v29: mobile frontend comfort layer for audio-room product */
@media (max-width: 820px){
  html{width:100%;min-height:100%;-webkit-text-size-adjust:100%;}
  body{align-items:flex-start!important;justify-content:flex-start!important;width:100%;min-height:100dvh;padding:0!important;overflow-x:hidden!important;background:var(--bg-page)!important;}
  #app{width:100%;min-width:0;}
  .app{width:100%;max-width:none!important;min-height:100dvh;padding:0!important;}
  .card{border-radius:0!important;margin:0 0 10px!important;padding:12px!important;box-shadow:none!important;border-left:0!important;border-right:0!important;}
  .header{position:sticky;top:0;z-index:120;display:grid!important;grid-template-columns:1fr auto;gap:10px!important;margin:-12px -12px 12px!important;padding:10px 12px!important;background:rgba(248,250,252,.96);border-bottom:1px solid var(--border-light);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
  .header h1{font-size:1.18rem!important;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .header h1 span{display:none!important;}
  .header-actions{grid-column:1/-1;width:100%;justify-content:flex-start!important;overflow-x:auto;flex-wrap:nowrap!important;padding-bottom:2px;-webkit-overflow-scrolling:touch;}
  .header-actions>*{flex:0 0 auto;}
  .theme-toggle,.tab-aux-btn,.btn,.btn-secondary,.logout-btn,.download-btn,.mini-btn{min-height:40px!important;border-radius:10px!important;}
  .login-modal,.settings-modal-overlay,.report-modal-v28,.audio-settings-modal,.invite-modal,.announcement-modal{padding:10px!important;align-items:flex-end!important;}
  .login-section,.settings-modal-dialog,.report-dialog-v28,.audio-settings-dialog,.invite-dialog,.announcement-dialog{width:100%!important;max-width:none!important;max-height:calc(100dvh - 20px)!important;border-radius:16px 16px 0 0!important;overflow:hidden!important;}
  .settings-modal-body,.report-body-v28,.audio-settings-body{max-height:calc(100dvh - 92px)!important;overflow:auto!important;-webkit-overflow-scrolling:touch;padding:14px!important;}
  .report-header-v28{padding:16px 16px 12px!important;}
  .report-header-v28 h3{font-size:18px!important;}
  .report-form-v28{gap:12px!important;}
  .report-target-card-v28{padding:12px!important;}
  .report-select-v28,.report-textarea-v28{font-size:16px!important;min-height:44px!important;border-radius:11px!important;}
  .report-textarea-v28{min-height:112px!important;}
  .report-upload-zone-v28{min-height:96px!important;}
  .report-evidence-thumb{width:86px!important;height:64px!important;}
  .report-actions-v28{position:sticky;bottom:0;margin:4px -14px -14px;padding:12px 14px;background:linear-gradient(180deg,rgba(255,255,255,.86),#fff);border-top:1px solid rgba(148,163,184,.18);}
  .report-cancel-v28,.report-submit-v28{flex:1 1 0;min-width:0!important;height:44px!important;}
  .lobby-toolbar{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;}
  .lobby-toolbar input,.lobby-toolbar select,.form-row input,.form-row select,.form-row textarea{font-size:16px!important;min-height:44px!important;}
  .toolbar-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;width:100%;}
  .toolbar-actions .btn{width:100%;min-width:0!important;}
  .room-list{display:grid;gap:8px;}
  .room-list .room-item{display:grid!important;grid-template-columns:1fr auto;align-items:center;gap:8px;border:1px solid var(--border-light)!important;border-radius:12px!important;padding:12px!important;background:var(--bg-card)!important;}
  .room-list .room-item .info{min-width:0;}
  .room-list .room-item .name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .room-header-row{display:grid!important;grid-template-columns:1fr!important;grid-template-areas:'title' 'actions' 'leave'!important;gap:10px!important;padding:12px!important;border-radius:12px!important;}
  .room-title-block{min-width:0;}
  .room-title-block h2,.room-title-block .room-name{font-size:1.08rem!important;white-space:normal!important;word-break:break-word;}
  .room-title-actions{display:grid!important;grid-template-columns:1fr!important;gap:8px!important;align-items:stretch!important;}
  .room-title-actions .btn,.room-exit-actions .btn{width:100%;min-width:0!important;}
  .room-exit-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;width:100%;}
  .room-workspace{display:grid!important;grid-template-columns:1fr!important;grid-template-areas:'chat' 'members' 'controls'!important;gap:10px!important;}
  .room-left-column,.room-right-column{display:contents!important;}
  .room-left-column>.device-panel{grid-area:controls!important;}
  .members-area.members-bottom{grid-area:members!important;}
  .room-right-column>#room-chat-panel{grid-area:chat!important;}
  .device-panel,.members-area,#room-chat-panel{border-radius:12px!important;padding:12px!important;margin:0!important;}
  .settings-section{border-radius:10px!important;}
  .settings-section summary{min-height:42px!important;padding:10px 8px!important;}
  .control-grid{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;}
  .control-item select,.room-password-row input{font-size:16px!important;min-height:44px!important;}
  .room-password-row{display:grid!important;grid-template-columns:1fr!important;gap:8px!important;}
  .switch-field{min-height:44px!important;width:100%;}
  .local-audio-actions,.audio-fx-row,.mic-check-panel{display:grid!important;grid-template-columns:1fr!important;gap:8px!important;align-items:stretch!important;}
  .level-control{display:grid!important;grid-template-columns:44px 1fr 52px!important;gap:8px!important;align-items:center!important;}
  .member-list{max-height:42dvh!important;overflow:auto!important;-webkit-overflow-scrolling:touch;padding-right:2px!important;}
  .member-list li{display:grid!important;grid-template-columns:auto 1fr auto!important;gap:8px!important;align-items:center!important;padding:10px!important;border-radius:12px!important;}
  #room-chat-panel{min-height:0!important;display:grid!important;grid-template-rows:auto minmax(240px,42dvh) auto auto!important;}
  #room-chat-messages{min-height:240px!important;height:42dvh!important;max-height:42dvh!important;overflow:auto!important;-webkit-overflow-scrolling:touch;}
  .room-chat-input-row{display:grid!important;grid-template-columns:1fr auto auto!important;gap:8px!important;align-items:end!important;}
  .room-chat-input-wrap{grid-column:1/-1!important;}
  #room-chat-input{font-size:16px!important;min-height:44px!important;}
  #room-chat-send-btn{grid-column:1/-1!important;width:100%;}
  .room-chat-action-btn{width:44px!important;height:44px!important;min-width:44px!important;padding:0!important;}
  .private-msg-image,.room-chat-thumb-img,.room-chat-image-preview img{max-width:78vw!important;max-height:48dvh!important;}
  .user-menu-dropdown,.invite-actions-menu,.room-chat-emoji-panel{position:fixed!important;left:10px!important;right:10px!important;top:auto!important;bottom:10px!important;max-height:62dvh!important;overflow:auto!important;border-radius:14px!important;z-index:9500!important;}
  .profile-card,.relationship-panel,.private-message-dialog{width:calc(100vw - 20px)!important;max-width:none!important;max-height:calc(100dvh - 20px)!important;border-radius:16px!important;}
  .profile-avatar-actions,.relationship-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;}
  .profile-avatar-actions .btn,.relationship-actions .btn{width:100%;min-width:0!important;}
  .status-bar{font-size:13px!important;line-height:1.45;}
}
@media (max-width:430px){
  .toolbar-actions{grid-template-columns:1fr!important;}
  .room-exit-actions{grid-template-columns:1fr!important;}
  .room-chat-input-row{grid-template-columns:1fr auto!important;}
  .room-chat-action-btn{width:42px!important;height:42px!important;min-width:42px!important;}
  .report-actions-v28{display:grid!important;grid-template-columns:1fr!important;}
  .profile-avatar-actions,.relationship-actions{grid-template-columns:1fr!important;}
}


/* v30: professional light audio-tool visual refresh + visible theme switch */
:root{
  --v30-ink:#162033;
  --v30-muted:#667085;
  --v30-soft:#f6f8fb;
  --v30-surface:#ffffff;
  --v30-line:#dfe5ef;
  --v30-accent:#4c63d9;
  --v30-accent-2:#6d5dfc;
  --v30-green:#16a46a;
  --v30-orange:#d88621;
  --v30-red:#e5484d;
  --v30-shadow:0 18px 48px rgba(31,41,55,.08);
  --v30-shadow-soft:0 8px 24px rgba(31,41,55,.06);
}
body:not(.dark){
  --radius-card:12px;
  --radius-control:10px;
  --text-primary:var(--v30-ink);
  --text-secondary:#475467;
  --text-muted:#8a94a6;
  --bg-page:#edf1f6;
  --bg-card:#ffffff;
  --bg-panel:#f7f9fc;
  --border-light:var(--v30-line);
  --input-bg:#f8fafc;
  --accent:var(--v30-accent);
  --accent-hover:#3d51bd;
  --btn-secondary-bg:#f6f8fb;
  --btn-secondary-border:#d8e0eb;
  --shadow:var(--v30-shadow-soft);
  background:
    radial-gradient(circle at 10% 8%,rgba(76,99,217,.10),transparent 34%),
    radial-gradient(circle at 86% 90%,rgba(22,164,106,.08),transparent 32%),
    linear-gradient(135deg,#f7f9fc,#edf1f6 48%,#f6f8fb);
}
body.dark{
  --bg-page:#20242b;
  --bg-card:#282d35;
  --bg-panel:#232831;
  --bg-elevated:#303641;
  --border-light:rgba(225,232,242,.14);
  --input-bg:#1f242c;
  --text-primary:#f3f6fb;
  --text-secondary:#c0c7d2;
  --text-muted:#8993a3;
  --accent:#7a88ff;
  --accent-hover:#6575f4;
  --btn-secondary-bg:#303641;
  --btn-secondary-border:rgba(225,232,242,.14);
  background:linear-gradient(135deg,#20242b,#252b34 54%,#20262e);
}
body::before,body::after{opacity:.32;filter:blur(72px);} 
body:not(.dark)::before{background:radial-gradient(circle,rgba(76,99,217,.18),rgba(76,99,217,0) 70%);} 
body:not(.dark)::after{background:radial-gradient(circle,rgba(22,164,106,.12),rgba(22,164,106,0) 70%);} 
.app{max-width:1500px;}
.card{border-radius:14px!important;border:1px solid rgba(145,158,178,.18)!important;box-shadow:var(--v30-shadow)!important;background:rgba(255,255,255,.90)!important;overflow:visible;}
body.dark .card{background:rgba(40,45,53,.94)!important;box-shadow:0 20px 60px rgba(0,0,0,.28)!important;}
.header.app-nav,.header{position:relative;align-items:center;padding:4px 2px 16px;border-bottom:1px solid rgba(145,158,178,.16);}
.brand-block{display:flex;align-items:center;gap:14px;min-width:0;}
.brand-mark{width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,#eef2ff,#fff);border:1px solid rgba(76,99,217,.20);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 8px 20px rgba(76,99,217,.10);position:relative;flex:0 0 auto;}
.brand-mark::before{content:'';position:absolute;inset:10px 8px;background:repeating-linear-gradient(90deg,var(--accent) 0 3px,transparent 3px 8px);border-radius:8px;opacity:.9;clip-path:polygon(0 40%,12% 20%,24% 60%,36% 10%,50% 74%,63% 28%,76% 64%,88% 18%,100% 48%,100% 100%,0 100%);} 
.brand-copy{min-width:0;display:grid;gap:2px;}
.header h1{margin:0!important;font-size:24px!important;line-height:1.15!important;font-weight:900!important;letter-spacing:-.04em!important;}
.header h1 .brand-name{background:none!important;color:var(--text-primary)!important;padding:0!important;border:0!important;font-size:24px!important;}
.header h1 #site-subtitle-badge{font-size:12px!important;font-weight:800!important;color:var(--accent)!important;background:#eef2ff!important;border:1px solid rgba(76,99,217,.20)!important;border-radius:999px!important;padding:4px 10px!important;vertical-align:middle!important;}
.brand-caption{margin:0;color:var(--text-secondary);font-size:13px;font-weight:650;}
.header-actions{gap:10px;}
.v30-theme-switch{height:38px;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border-light);background:linear-gradient(180deg,#fff,#f7f9fc);color:var(--text-secondary);border-radius:999px;padding:0 12px;font-weight:850;cursor:pointer;box-shadow:0 6px 16px rgba(31,41,55,.06);}
.v30-theme-switch:hover{border-color:rgba(76,99,217,.38);color:var(--accent);transform:translateY(-1px);} 
.v30-theme-switch-icon{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#eef2ff;color:var(--accent);font-size:13px;}
.v30-theme-switch.is-dark{background:linear-gradient(180deg,#323946,#252b34);color:#f3f6fb;border-color:rgba(225,232,242,.18);} 
.v30-theme-switch.is-dark .v30-theme-switch-icon{background:#20242b;color:#aeb7ff;}
.user-info,.user-menu-trigger{border-radius:12px!important;border-color:var(--border-light)!important;background:rgba(255,255,255,.72)!important;box-shadow:0 8px 20px rgba(31,41,55,.05)!important;}
body.dark .user-info,body.dark .user-menu-trigger{background:var(--bg-elevated)!important;}
#open-login-btn,.btn,.tab-aux-btn{border-radius:10px!important;font-weight:800!important;}
.btn:not(.btn-secondary):not(.logout-btn),.quick-join{background:linear-gradient(135deg,var(--accent),var(--v30-accent-2))!important;border-color:transparent!important;color:#fff!important;box-shadow:0 8px 18px rgba(76,99,217,.18)!important;}
.btn:not(.btn-secondary):not(.logout-btn):hover,.quick-join:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(76,99,217,.22)!important;}
.btn-secondary,.tab-aux-btn,.download-btn,.mini-btn,.logout-btn{background:#fff!important;border:1px solid var(--border-light)!important;color:var(--text-secondary)!important;box-shadow:0 4px 12px rgba(31,41,55,.04)!important;}
body.dark .btn-secondary,body.dark .tab-aux-btn,body.dark .download-btn,body.dark .mini-btn,body.dark .logout-btn{background:var(--btn-secondary-bg)!important;color:var(--text-secondary)!important;}
.room-tabs-wrap{border-radius:14px!important;background:rgba(255,255,255,.82)!important;border:1px solid rgba(145,158,178,.18)!important;box-shadow:0 12px 32px rgba(31,41,55,.06)!important;margin-bottom:16px!important;}
body.dark .room-tabs-wrap{background:var(--bg-card)!important;}
.room-tabs{gap:6px!important;}
.tab-btn{border-radius:10px!important;min-height:40px!important;color:var(--text-secondary)!important;font-weight:850!important;padding-inline:18px!important;}
.tab-btn.active{background:linear-gradient(135deg,var(--accent),var(--v30-accent-2))!important;color:#fff!important;box-shadow:0 10px 22px rgba(76,99,217,.18)!important;}
.lobby-toolbar{display:grid!important;grid-template-columns:minmax(260px,1fr) 170px auto!important;gap:14px!important;align-items:end!important;margin-bottom:14px!important;}
.search-card{border-radius:12px!important;background:rgba(255,255,255,.82)!important;border:1px solid rgba(145,158,178,.20)!important;box-shadow:0 8px 20px rgba(31,41,55,.04)!important;padding:12px!important;}
body.dark .search-card{background:var(--bg-card)!important;}
.search-card label{font-size:12px!important;font-weight:800!important;color:var(--text-secondary)!important;margin-bottom:7px!important;display:block!important;}
.lobby-toolbar input,.lobby-toolbar select,.form-row input,.form-row select,textarea{border-radius:10px!important;border:1px solid var(--border-light)!important;background:var(--input-bg)!important;color:var(--text-primary)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)!important;}
.room-list{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important;}
.room-list .room-item{position:relative;overflow:hidden;border-radius:14px!important;background:linear-gradient(180deg,#fff,#f9fbfe)!important;border:1px solid rgba(145,158,178,.22)!important;box-shadow:0 10px 26px rgba(31,41,55,.06)!important;padding:20px!important;min-height:172px!important;display:flex!important;flex-direction:column!important;gap:14px!important;transition:transform .18s,box-shadow .18s,border-color .18s!important;}
body.dark .room-list .room-item{background:linear-gradient(180deg,var(--bg-card),var(--bg-panel))!important;border-color:var(--border-light)!important;}
.room-list .room-item::before{content:'';position:absolute;left:0;top:0;right:0;height:3px;background:linear-gradient(90deg,rgba(76,99,217,.75),rgba(22,164,106,.55));opacity:.72;}
.room-list .room-item::after{content:'';position:absolute;right:22px;top:62px;width:120px;height:44px;opacity:.08;background:repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 8px);color:var(--accent);clip-path:polygon(0 60%,8% 30%,16% 70%,25% 22%,35% 84%,45% 36%,55% 78%,65% 20%,76% 66%,86% 34%,100% 56%,100% 100%,0 100%);} 
.room-list .room-item:hover{transform:translateY(-2px)!important;border-color:rgba(76,99,217,.34)!important;box-shadow:0 18px 38px rgba(31,41,55,.10)!important;}
.room-card-head{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:12px!important;position:relative!important;z-index:1!important;}
.room-card-title-wrap{min-width:0;}
.room-card-title-wrap .name,.room-item .name{font-size:18px!important;line-height:1.25!important;font-weight:900!important;color:var(--text-primary)!important;letter-spacing:-.02em!important;margin-bottom:6px!important;}
.room-card-subtitle{font-size:13px!important;color:var(--text-secondary)!important;font-weight:650!important;}
.room-card-flag,.badge{border-radius:999px!important;border:1px solid rgba(76,99,217,.14)!important;background:#eef2ff!important;color:var(--accent)!important;font-weight:850!important;}
.room-card-meta{display:flex!important;flex-wrap:wrap!important;gap:8px!important;position:relative!important;z-index:1!important;}
.room-meta-chip{font-size:12px!important;font-weight:850!important;color:#344054!important;background:#f4f7fb!important;border:1px solid rgba(145,158,178,.24)!important;border-radius:8px!important;padding:5px 9px!important;line-height:1!important;}
body.dark .room-meta-chip{color:#dbe4f0!important;background:rgba(255,255,255,.06)!important;border-color:rgba(255,255,255,.10)!important;}
.room-card-footer{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;margin-top:auto!important;position:relative!important;z-index:1!important;}
.room-card-note{font-size:13px!important;color:var(--text-secondary)!important;font-weight:700!important;}
.quick-join{min-width:104px!important;height:38px!important;padding-inline:14px!important;}
.room-list-empty{grid-column:1/-1;background:var(--bg-card);border:1px dashed var(--border-light);border-radius:14px;padding:36px;color:var(--text-secondary);font-weight:700;text-align:center;}
.footer{border-top:1px solid rgba(145,158,178,.16);padding-top:16px;color:var(--text-muted)!important;}
/* in-room surface */
.room-header-row,.room-workspace,.members-area,.device-panel,#room-chat-panel{border-radius:14px!important;border:1px solid rgba(145,158,178,.20)!important;background:rgba(255,255,255,.86)!important;box-shadow:0 10px 26px rgba(31,41,55,.05)!important;}
body.dark .room-header-row,body.dark .room-workspace,body.dark .members-area,body.dark .device-panel,body.dark #room-chat-panel{background:var(--bg-card)!important;border-color:var(--border-light)!important;}
.mini-badge{border-radius:999px!important;background:#f1f5ff!important;border:1px solid rgba(76,99,217,.18)!important;color:var(--accent)!important;font-weight:850!important;}
.member-list li{border-radius:12px!important;box-shadow:none!important;}
.status-bar{border-radius:12px!important;border-left-width:3px!important;background:#f7fafc!important;}
body.dark .status-bar{background:var(--bg-panel)!important;}
/* settings modal theme controls */
.settings-modal-dialog{border-radius:16px!important;box-shadow:0 28px 90px rgba(15,23,42,.24)!important;}
.settings-field{border-radius:12px!important;border:1px solid var(--border-light)!important;background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(248,250,252,.72))!important;padding:14px!important;margin-bottom:10px!important;}
body.dark .settings-field{background:var(--bg-panel)!important;}
.settings-field-label{font-weight:900!important;color:var(--text-primary)!important;}
.settings-field-desc{color:var(--text-secondary)!important;}
#ui-theme-select{min-height:40px;border-radius:10px;border:1px solid var(--border-light);background:var(--input-bg);color:var(--text-primary);font-weight:800;padding:0 12px;}
/* v30 mobile */
@media (max-width:1100px){.room-list{grid-template-columns:repeat(2,minmax(0,1fr))!important;}.lobby-toolbar{grid-template-columns:1fr 180px!important;}.toolbar-actions{grid-column:1/-1;}}
@media (max-width:720px){body{padding:8px!important;align-items:flex-start!important;}.app{max-width:none!important;}.card{padding:12px!important;border-radius:18px!important;}.header.app-nav,.header{gap:10px!important;align-items:flex-start!important;}.brand-mark{width:36px;height:36px;border-radius:12px;}.header h1 .brand-name{font-size:20px!important;}.brand-caption{font-size:12px;}.header-actions{width:100%;justify-content:space-between;margin-left:0!important;}.v30-theme-switch{height:36px;padding:0 10px;}.v30-theme-switch-text{display:none;}.room-tabs-wrap{border-radius:14px!important;}.room-tabs{width:100%;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px!important;}.tab-btn{padding:0 8px!important;font-size:13px!important;}.lobby-toolbar{grid-template-columns:1fr!important;}.room-list{grid-template-columns:1fr!important;gap:12px!important;}.room-list .room-item{min-height:154px!important;padding:16px!important;}.quick-join{min-width:96px!important;}.room-workspace{grid-template-columns:1fr!important;}.room-header-row{padding:14px!important;}.report-dialog-v28{border-radius:18px 18px 0 0!important;}.report-actions-v28{position:sticky;bottom:0;background:var(--bg-card);padding:10px 0 0;}}

/* v31 lobby alignment + voice dock controls */
:root{
  --v31-card-min-h: 190px;
  --v31-panel-gap: 18px;
  --v31-audio-dock-bg: rgba(255,255,255,.94);
  --v31-audio-dock-border: rgba(148,163,184,.24);
  --v31-audio-dock-shadow: 0 18px 46px rgba(15,23,42,.14);
}
body.dark{
  --v31-audio-dock-bg: rgba(38,43,52,.94);
  --v31-audio-dock-border: rgba(255,255,255,.12);
  --v31-audio-dock-shadow: 0 20px 60px rgba(0,0,0,.34);
}
.app{max-width:min(1560px,calc(100vw - 64px))!important;}
#lobby .tab-content.active{min-height:620px;}
#tab-list{display:flex!important;flex-direction:column!important;gap:16px!important;}
.lobby-toolbar{grid-template-columns:minmax(420px,1fr) 190px auto!important;align-items:stretch!important;margin:0!important;}
.search-card{display:flex!important;flex-direction:column!important;justify-content:center!important;min-height:74px!important;padding:13px 15px!important;}
.toolbar-actions{display:flex!important;align-items:end!important;justify-content:flex-end!important;min-width:0!important;}
.room-list{align-items:stretch!important;grid-auto-rows:1fr!important;gap:18px!important;}
.room-list .room-item{min-height:var(--v31-card-min-h)!important;height:100%!important;padding:22px!important;text-align:left!important;justify-content:space-between!important;display:grid!important;grid-template-rows:auto minmax(42px,auto) auto!important;}
.room-list .room-item *{text-align:left!important;}
.room-card-head{min-height:54px!important;align-items:flex-start!important;}
.room-card-title-wrap{display:grid!important;gap:5px!important;min-width:0!important;}
.room-card-title-wrap .name,.room-list .room-item .name{display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;min-height:44px!important;margin:0!important;}
.room-card-subtitle{min-height:20px!important;margin:0!important;}
.room-card-meta{min-height:30px!important;align-content:flex-start!important;align-items:flex-start!important;}
.room-meta-chip{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:26px!important;white-space:nowrap!important;}
.room-card-footer{min-height:42px!important;padding-top:4px!important;border-top:1px solid rgba(148,163,184,.14)!important;}
.quick-join{height:38px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;border-radius:10px!important;}
.quick-join::after{content:'›';font-size:18px;line-height:1;margin-left:8px;opacity:.9;}
.room-card-note{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;max-width:58%!important;}
.room-list .room-item[data-has-password="true"]::before{background:linear-gradient(90deg,rgba(216,134,33,.70),rgba(76,99,217,.55))!important;}
.room-list .room-item[data-allow-guest-join="false"]::before{background:linear-gradient(90deg,rgba(216,134,33,.72),rgba(229,72,77,.42))!important;}
.room-list-more-row{display:flex!important;justify-content:center!important;margin-top:4px!important;}

/* room layout: keep chat clean; audio controls live in a Discord/TT style dock */
#room{position:relative;}
.room-chat-heading-main .room-chat-audio-actions{display:none!important;}
.voice-control-dock{position:fixed;left:max(20px,calc((100vw - min(1560px,calc(100vw - 64px))) / 2 + 24px));bottom:24px;z-index:1180;display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--v31-audio-dock-border);border-radius:16px;background:var(--v31-audio-dock-bg);box-shadow:var(--v31-audio-dock-shadow);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);}
.voice-control-dock-label{font-size:12px;font-weight:900;color:var(--text-secondary);padding:0 6px;white-space:nowrap;}
.voice-control-dock-actions{display:flex;align-items:center;gap:8px;}
.voice-dock-btn{width:44px!important;height:44px!important;min-width:44px!important;padding:0!important;border-radius:14px!important;display:inline-grid!important;place-items:center!important;font-size:0!important;line-height:1!important;border:1px solid rgba(148,163,184,.24)!important;background:linear-gradient(180deg,#fff,#f3f6fb)!important;color:var(--text-primary)!important;box-shadow:0 8px 20px rgba(15,23,42,.08)!important;transition:transform .16s,box-shadow .16s,background .16s,border-color .16s!important;}
body.dark .voice-dock-btn{background:linear-gradient(180deg,#343b47,#282e38)!important;border-color:rgba(255,255,255,.12)!important;color:#f3f6fb!important;}
.voice-dock-btn:hover{transform:translateY(-2px)!important;box-shadow:0 14px 28px rgba(15,23,42,.14)!important;border-color:rgba(76,99,217,.35)!important;}
.voice-dock-btn::before{font-size:20px;line-height:1;}
.voice-dock-mic::before{content:'🎙';}
.voice-dock-speaker::before{content:'🔊';}
.voice-dock-screen::before{content:'⛶';font-size:18px;}
.voice-dock-assist::before{content:'🛠';font-size:18px;}
#mute-btn:is([aria-pressed="true"],.muted,.is-muted)::before,.voice-dock-mic[data-muted="true"]::before{content:'🔇';}
#speaker-toggle-btn:is([aria-pressed="true"],.muted,.is-muted)::before,.voice-dock-speaker[data-muted="true"]::before{content:'🔈';}
.voice-dock-mic,.voice-dock-speaker{background:linear-gradient(135deg,var(--accent),var(--v30-accent-2))!important;color:#fff!important;border-color:transparent!important;}
.voice-dock-screen,.voice-dock-assist{background:#fff!important;color:var(--text-secondary)!important;}
body.dark .voice-dock-screen,body.dark .voice-dock-assist{background:var(--bg-elevated)!important;color:var(--text-secondary)!important;}
.local-audio-actions{display:none!important;}
#room-chat-panel .members-header{align-items:center!important;}
#room-chat-panel .members-header h3{margin:0!important;}
#room-chat-panel .room-chat-toolbar{margin-left:auto!important;}
.room-workspace{grid-template-columns:minmax(300px,430px) minmax(0,1fr)!important;gap:18px!important;align-items:start!important;}
.room-left-column,.room-right-column{min-width:0!important;}
.members-area.members-bottom{min-height:480px!important;}
#room-chat-panel{min-height:520px!important;display:grid!important;grid-template-rows:auto minmax(360px,1fr) auto auto auto!important;}
#room-chat-messages{min-height:360px!important;}
.room-chat-input-row{align-items:end!important;gap:10px!important;}
.room-chat-input-wrap{min-width:0!important;}

@media (min-width:1280px){
  .room-list{grid-template-columns:repeat(3,minmax(280px,1fr))!important;}
}
@media (min-width:1580px){
  .room-list{grid-template-columns:repeat(3,minmax(320px,1fr))!important;}
}
@media (max-width:1100px){
  .app{max-width:calc(100vw - 28px)!important;}
  .lobby-toolbar{grid-template-columns:1fr 180px!important;}
  .room-list{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .room-workspace{grid-template-columns:1fr!important;}
  .voice-control-dock{left:18px;bottom:18px;}
}
@media (max-width:720px){
  .app{max-width:none!important;}
  #lobby .tab-content.active{min-height:auto;}
  .lobby-toolbar{grid-template-columns:1fr!important;}
  .search-card{min-height:64px!important;}
  .room-list{grid-template-columns:1fr!important;gap:12px!important;}
  .room-list .room-item{min-height:172px!important;padding:16px!important;}
  .room-card-title-wrap .name,.room-list .room-item .name{min-height:auto!important;-webkit-line-clamp:1!important;}
  .room-card-footer{gap:8px!important;}
  .quick-join{min-width:104px!important;}
  .voice-control-dock{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));justify-content:space-between;padding:10px;border-radius:18px;}
  .voice-control-dock-label{display:none;}
  .voice-control-dock-actions{width:100%;justify-content:space-between;gap:8px;}
  .voice-dock-btn{flex:1 1 0!important;width:auto!important;min-width:0!important;height:48px!important;border-radius:14px!important;}
  #room{padding-bottom:78px!important;}
  #room-chat-panel{grid-template-rows:auto minmax(240px,42dvh) auto auto auto!important;min-height:0!important;}
  #room-chat-messages{min-height:240px!important;height:42dvh!important;}
}

/* v32: 修复大厅 Tab 串屏：只有当前 Tab 才显示内容 */
#lobby .tab-content:not(.active){display:none!important;}
#lobby .tab-content.active{display:block!important;}
#lobby #tab-list.active{display:flex!important;flex-direction:column!important;gap:16px!important;}
#lobby #tab-list:not(.active){display:none!important;}
#lobby #tab-create.active,#lobby #tab-social.active,#lobby #tab-messages.active{display:block!important;}

/* v32: 语音控制条固定到房间左下区域，不再漂到聊天标题栏 */
@media (min-width: 721px){
  #call-interface .room-left-column{display:flex!important;flex-direction:column!important;min-height:560px!important;}
  #call-interface .members-area.members-bottom{flex:1 1 auto!important;}
  #call-interface .voice-control-dock{position:sticky!important;left:auto!important;right:auto!important;bottom:18px!important;width:100%!important;align-self:stretch!important;margin:14px 0 0!important;z-index:60!important;display:flex!important;justify-content:space-between!important;}
  #call-interface .voice-control-dock-actions{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;width:100%!important;gap:10px!important;}
  #call-interface .voice-control-dock-label{display:none!important;}
  #call-interface .voice-dock-btn{width:100%!important;min-width:0!important;height:48px!important;border-radius:14px!important;}
}

/* v34: left header cleanup + obvious floating voice dock + dissolve button alignment */
.header.app-nav,.header{
  padding:10px 16px 14px!important;
  gap:14px!important;
}
.brand-block{gap:10px!important;align-items:center!important;}
.brand-mark{
  width:36px!important;
  height:36px!important;
  border-radius:11px!important;
  background:linear-gradient(180deg,#f8fbff,#eef3ff)!important;
  border:1px solid rgba(76,99,217,.24)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.88),0 6px 14px rgba(76,99,217,.10)!important;
}
.brand-mark::before{
  content:''!important;
  position:absolute!important;
  inset:9px 7px!important;
  border-radius:7px!important;
  background:repeating-linear-gradient(90deg,var(--accent) 0 3px,transparent 3px 8px)!important;
  opacity:.95!important;
  clip-path:polygon(0 58%,10% 42%,20% 70%,32% 22%,44% 76%,56% 34%,68% 66%,80% 28%,92% 56%,100% 46%,100% 100%,0 100%)!important;
}
.brand-caption{display:none!important;}
#site-title{gap:8px!important;align-items:center!important;}
#site-title .brand-name{font-size:24px!important;font-weight:900!important;letter-spacing:-.035em!important;color:var(--text-primary)!important;}
#site-title #site-subtitle-badge{min-height:22px!important;padding:0 8px!important;font-size:11px!important;border-radius:999px!important;}

#room{position:relative!important;}
.room-chat-heading-main .room-chat-audio-actions{display:none!important;}
.voice-control-dock{
  position:fixed!important;
  left:max(22px,calc((100vw - min(1560px,calc(100vw - 64px))) / 2 + 22px))!important;
  bottom:24px!important;
  z-index:1180!important;
  display:grid!important;
  grid-template-columns:auto 1fr!important;
  grid-template-areas:"label status" "actions actions"!important;
  align-items:center!important;
  gap:9px 12px!important;
  min-width:324px!important;
  padding:12px 14px!important;
  border:1px solid rgba(76,99,217,.26)!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.94)!important;
  box-shadow:0 18px 46px rgba(31,41,55,.16),0 0 0 1px rgba(255,255,255,.78) inset!important;
  backdrop-filter:blur(16px)!important;
  -webkit-backdrop-filter:blur(16px)!important;
}
body.dark .voice-control-dock{
  background:rgba(39,45,55,.94)!important;
  border-color:rgba(122,136,255,.26)!important;
  box-shadow:0 20px 50px rgba(0,0,0,.34),0 0 0 1px rgba(255,255,255,.06) inset!important;
}
.voice-control-dock-label{
  grid-area:label!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  padding:0!important;
  color:var(--text-primary)!important;
  font-size:13px!important;
  font-weight:950!important;
  white-space:nowrap!important;
}
.voice-control-dock-label::before{
  content:'';
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--accent);
  box-shadow:0 0 0 4px rgba(76,99,217,.13);
}
.voice-control-dock-status{
  grid-area:status!important;
  display:flex!important;
  justify-content:flex-end!important;
  align-items:center!important;
  gap:6px!important;
  min-width:0!important;
}
.voice-dock-state-chip{
  display:inline-flex!important;
  align-items:center!important;
  height:24px!important;
  padding:0 8px!important;
  border-radius:999px!important;
  font-size:11px!important;
  font-weight:900!important;
  color:var(--text-secondary)!important;
  background:#f1f5f9!important;
  border:1px solid rgba(148,163,184,.24)!important;
  white-space:nowrap!important;
}
.voice-dock-state-chip.is-on{color:#057a55!important;background:#e9fbf2!important;border-color:rgba(22,164,106,.28)!important;}
.voice-dock-state-chip.is-off{color:#b42318!important;background:#fff1f0!important;border-color:rgba(229,72,77,.30)!important;}
.voice-dock-state-chip.is-forced{color:#92400e!important;background:#fff7ed!important;border-color:rgba(217,119,6,.28)!important;}
body.dark .voice-dock-state-chip{background:rgba(255,255,255,.06)!important;border-color:rgba(255,255,255,.10)!important;}
.voice-control-dock-actions{
  grid-area:actions!important;
  display:grid!important;
  grid-template-columns:repeat(4,1fr)!important;
  gap:8px!important;
}
.voice-dock-btn{
  width:100%!important;
  height:58px!important;
  min-width:0!important;
  padding:7px 8px!important;
  border-radius:14px!important;
  display:inline-flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:4px!important;
  font-size:13px!important;
  line-height:1.1!important;
  font-weight:950!important;
  letter-spacing:0!important;
  border:1px solid rgba(148,163,184,.28)!important;
  color:var(--text-primary)!important;
  background:linear-gradient(180deg,#ffffff,#f4f7fb)!important;
  box-shadow:0 8px 18px rgba(15,23,42,.08)!important;
}
.voice-dock-btn-icon{font-size:18px!important;line-height:1!important;display:block!important;}
.voice-dock-btn-text{font-size:13px!important;line-height:1!important;display:block!important;white-space:nowrap!important;}
.voice-dock-btn:hover:not(:disabled){transform:translateY(-1px)!important;box-shadow:0 12px 24px rgba(15,23,42,.12)!important;filter:none!important;}
.voice-dock-btn.voice-dock-mic.is-off,
.voice-dock-btn.voice-dock-speaker.is-off{
  background:linear-gradient(135deg,#16a46a,#0f8a58)!important;
  border-color:transparent!important;
  color:#fff!important;
  box-shadow:0 12px 26px rgba(22,164,106,.24)!important;
}
.voice-dock-btn.voice-dock-mic.is-on,
.voice-dock-btn.voice-dock-speaker.is-on{
  background:linear-gradient(135deg,#e5484d,#cc2f35)!important;
  border-color:transparent!important;
  color:#fff!important;
  box-shadow:0 12px 26px rgba(229,72,77,.22)!important;
}
.voice-dock-btn.mute-btn-forced{
  background:linear-gradient(135deg,#d88621,#b85f12)!important;
  color:#fff!important;
  border-color:transparent!important;
  opacity:1!important;
  cursor:not-allowed!important;
}
.voice-dock-screen,.voice-dock-assist{
  background:linear-gradient(180deg,#fff,#f4f7fb)!important;
  color:var(--text-primary)!important;
}
.voice-dock-screen.is-active{
  background:linear-gradient(135deg,#0f766e,#0d9488)!important;
  color:#fff!important;
  border-color:transparent!important;
}
body.dark .voice-dock-btn:not(.is-on):not(.is-off):not(.mute-btn-forced){
  background:linear-gradient(180deg,#343b47,#29303a)!important;
  color:#f3f6fb!important;
  border-color:rgba(255,255,255,.12)!important;
}

#call-interface .room-title-actions .btn,
#call-interface .invite-actions-group>.btn,
#call-interface #dissolve-room-btn{
  min-width:112px!important;
  height:40px!important;
  padding:0 14px!important;
  border-radius:7px!important;
  box-sizing:border-box!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  white-space:nowrap!important;
}
#call-interface #dissolve-room-btn{width:auto!important;}

@media (max-width:760px){
  .header.app-nav,.header{padding:8px 8px 12px!important;align-items:flex-start!important;}
  .brand-mark{width:32px!important;height:32px!important;border-radius:10px!important;}
  #site-title .brand-name{font-size:19px!important;}
  #site-title #site-subtitle-badge{font-size:10px!important;padding:0 7px!important;}
  .voice-control-dock{
    left:8px!important;
    right:8px!important;
    bottom:calc(8px + env(safe-area-inset-bottom))!important;
    min-width:0!important;
    width:auto!important;
    padding:10px!important;
    border-radius:16px!important;
  }
  .voice-control-dock-status{justify-content:flex-start!important;overflow:auto!important;}
  .voice-dock-state-chip{font-size:10px!important;padding:0 7px!important;}
  .voice-control-dock-actions{gap:7px!important;}
  .voice-dock-btn{height:54px!important;padding:6px 4px!important;}
  .voice-dock-btn-icon{font-size:17px!important;}
  .voice-dock-btn-text{font-size:12px!important;}
  #room{padding-bottom:96px!important;}
  #call-interface .room-title-actions .btn,
  #call-interface .invite-actions-group>.btn,
  #call-interface #dissolve-room-btn{min-width:0!important;width:100%!important;}
}


/* v35: UI bugfix after v34 inspection
   1) disable legacy pseudo icons so voice buttons do not show double icons
   2) show brand name on mobile; old v29 rule hid every span inside h1
   3) reserve bottom space on actual #call-interface because #room does not exist in template
*/
.voice-dock-btn::before{content:none!important;display:none!important;}
@media (max-width:820px){
  #site-title .brand-name{display:inline!important;}
  #site-title #site-subtitle-badge{display:none!important;}
}
@media (max-width:760px){
  #call-interface{padding-bottom:104px!important;}
}


/* v36: responsive fit polish
   Fixes:
   - room cards switch to single column earlier on narrow desktop/tablet so names do not get cut
   - room names wrap instead of ellipsis on mobile
   - voice dock is bounded to viewport and cannot overflow when the browser/mobile width is small
*/
html,body{max-width:100%!important;overflow-x:hidden!important;}
body{min-width:0!important;}
.app,.card,#lobby,#call-interface,.room-tabs-wrap,.room-workspace,.room-header-row,.room-list,.room-list .room-item,.room-card-head,.room-card-title-wrap,.room-card-footer,.voice-control-dock{min-width:0!important;box-sizing:border-box!important;}

/* Desktop dock should still be obvious, but never wider than the viewport. */
.voice-control-dock{
  max-width:calc(100vw - 24px)!important;
  box-sizing:border-box!important;
}
.voice-control-dock-actions,.voice-dock-btn{min-width:0!important;}
.voice-dock-btn-text{max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;}

@media (max-width: 960px){
  body{padding:6px!important;align-items:flex-start!important;}
  .app{width:100%!important;max-width:100%!important;}
  .card{width:100%!important;padding:12px!important;margin-bottom:12px!important;border-radius:16px!important;}

  /* Lobby list: two-column cards are the reason names get cut at tablet/narrow widths. */
  .room-list{grid-template-columns:1fr!important;gap:12px!important;align-items:stretch!important;grid-auto-rows:auto!important;}
  .room-list .room-item{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    display:flex!important;
    flex-direction:column!important;
    gap:12px!important;
    padding:16px!important;
    overflow:hidden!important;
  }
  .room-card-head{width:100%!important;min-height:0!important;display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:10px!important;}
  .room-card-title-wrap{flex:1 1 auto!important;width:auto!important;min-width:0!important;display:flex!important;flex-direction:column!important;gap:5px!important;}
  .room-card-title-wrap .name,
  .room-list .room-item .name{
    display:block!important;
    min-height:0!important;
    max-width:100%!important;
    margin:0!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    -webkit-line-clamp:unset!important;
    -webkit-box-orient:unset!important;
    overflow-wrap:anywhere!important;
    word-break:break-word!important;
    line-height:1.28!important;
  }
  .room-card-subtitle{
    max-width:100%!important;
    min-height:0!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    overflow-wrap:anywhere!important;
  }
  .room-card-meta{width:100%!important;min-height:0!important;display:flex!important;flex-wrap:wrap!important;gap:8px!important;}
  .room-meta-chip{max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;}
  .room-card-footer{
    width:100%!important;
    min-height:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:10px!important;
    padding-top:10px!important;
    margin-top:0!important;
  }
  .room-card-note{
    flex:1 1 auto!important;
    max-width:none!important;
    min-width:0!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }
  .quick-join{flex:0 0 auto!important;min-width:112px!important;white-space:nowrap!important;}

  /* Voice dock: bounded full-width mobile/tablet bar, no left/right overflow. */
  .voice-control-dock{
    position:fixed!important;
    left:8px!important;
    right:8px!important;
    bottom:calc(8px + env(safe-area-inset-bottom))!important;
    width:auto!important;
    min-width:0!important;
    max-width:calc(100vw - 16px)!important;
    padding:9px!important;
    border-radius:16px!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-areas:"status" "actions"!important;
    gap:7px!important;
    z-index:1180!important;
  }
  .voice-control-dock-label{display:none!important;}
  .voice-control-dock-status{
    grid-area:status!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    display:flex!important;
    justify-content:flex-start!important;
    align-items:center!important;
    gap:6px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
  }
  .voice-control-dock-status::-webkit-scrollbar{display:none!important;}
  .voice-dock-state-chip{
    flex:0 1 auto!important;
    min-width:0!important;
    max-width:calc(50% - 3px)!important;
    height:22px!important;
    padding:0 7px!important;
    font-size:10px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  .voice-control-dock-actions{
    grid-area:actions!important;
    width:100%!important;
    min-width:0!important;
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:6px!important;
  }
  .voice-dock-btn{
    width:100%!important;
    min-width:0!important;
    height:50px!important;
    padding:5px 2px!important;
    border-radius:13px!important;
    gap:3px!important;
  }
  .voice-dock-btn-icon{font-size:16px!important;}
  .voice-dock-btn-text{font-size:11px!important;line-height:1!important;white-space:nowrap!important;}
  #call-interface{padding-bottom:120px!important;}
}

@media (max-width: 560px){
  .room-tabs{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:5px!important;}
  .tab-btn{min-width:0!important;padding:0 6px!important;font-size:12px!important;}
  .lobby-toolbar{grid-template-columns:1fr!important;}
  .search-card{width:100%!important;min-width:0!important;}
  .room-list .room-item{padding:14px!important;}
  .room-card-footer{flex-direction:column!important;align-items:stretch!important;}
  .quick-join{width:100%!important;min-width:0!important;height:40px!important;}
}

@media (max-width: 380px){
  .voice-control-dock{left:6px!important;right:6px!important;max-width:calc(100vw - 12px)!important;padding:8px!important;gap:6px!important;}
  .voice-control-dock-actions{gap:5px!important;}
  .voice-dock-btn{height:48px!important;padding:4px 1px!important;border-radius:12px!important;}
  .voice-dock-btn-icon{font-size:15px!important;}
  .voice-dock-btn-text{font-size:10px!important;}
  .voice-dock-state-chip{font-size:9px!important;padding:0 5px!important;}
  #call-interface{padding-bottom:116px!important;}
}


/* v37: voice dock state buttons
   - remove the separate left/status chips entirely
   - buttons show current state directly: 麦已开/麦已关、声已开/声已关
   - colors represent current state: green = enabled, red = disabled, orange = forced mute
   - desktop/mobile use one compact, non-overflowing button strip
*/
.voice-control-dock-label,
.voice-control-dock-status,
.voice-dock-state-chip{display:none!important;}

.voice-control-dock{
  position:fixed!important;
  left:max(16px,calc((100vw - min(1560px,calc(100vw - 64px))) / 2 + 16px))!important;
  right:auto!important;
  bottom:22px!important;
  z-index:1180!important;
  width:auto!important;
  min-width:0!important;
  max-width:calc(100vw - 32px)!important;
  display:block!important;
  padding:10px!important;
  border-radius:20px!important;
  border:1px solid rgba(76,99,217,.24)!important;
  background:rgba(255,255,255,.96)!important;
  box-shadow:0 16px 42px rgba(15,23,42,.14),0 0 0 1px rgba(255,255,255,.72) inset!important;
  backdrop-filter:blur(16px)!important;
  -webkit-backdrop-filter:blur(16px)!important;
  box-sizing:border-box!important;
}
body.dark .voice-control-dock{
  background:rgba(38,45,56,.96)!important;
  border-color:rgba(122,136,255,.24)!important;
  box-shadow:0 18px 44px rgba(0,0,0,.34),0 0 0 1px rgba(255,255,255,.06) inset!important;
}
.voice-control-dock-actions{
  width:100%!important;
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
}
.voice-dock-btn{
  position:relative!important;
  width:auto!important;
  min-width:82px!important;
  height:54px!important;
  padding:0 14px!important;
  border-radius:16px!important;
  display:inline-flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  font-size:14px!important;
  line-height:1!important;
  font-weight:950!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
  border:1px solid rgba(148,163,184,.30)!important;
  color:var(--text-primary)!important;
  background:linear-gradient(180deg,#ffffff,#f5f7fb)!important;
  box-shadow:0 8px 18px rgba(15,23,42,.08)!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
.voice-dock-btn::before{content:none!important;display:none!important;}
.voice-dock-btn::after{
  content:''!important;
  position:absolute!important;
  top:8px!important;
  right:8px!important;
  width:8px!important;
  height:8px!important;
  border-radius:999px!important;
  background:rgba(148,163,184,.72)!important;
  box-shadow:0 0 0 3px rgba(148,163,184,.14)!important;
}
.voice-dock-btn-icon{font-size:17px!important;line-height:1!important;display:block!important;flex:0 0 auto!important;}
.voice-dock-btn-text{
  font-size:14px!important;
  line-height:1!important;
  display:block!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.voice-dock-btn:hover:not(:disabled){transform:translateY(-1px)!important;box-shadow:0 12px 24px rgba(15,23,42,.13)!important;filter:none!important;}

/* Current-state colors: green means it is ON, red means it is OFF. */
.voice-dock-btn.voice-dock-mic.is-on,
.voice-dock-btn.voice-dock-speaker.is-on{
  background:linear-gradient(135deg,#22b981,#129462)!important;
  border-color:transparent!important;
  color:#fff!important;
  box-shadow:0 14px 30px rgba(18,148,98,.24)!important;
}
.voice-dock-btn.voice-dock-mic.is-on::after,
.voice-dock-btn.voice-dock-speaker.is-on::after{background:#bbf7d0!important;box-shadow:0 0 0 3px rgba(187,247,208,.28)!important;}
.voice-dock-btn.voice-dock-mic.is-off,
.voice-dock-btn.voice-dock-speaker.is-off{
  background:linear-gradient(135deg,#ef4444,#cf2f35)!important;
  border-color:transparent!important;
  color:#fff!important;
  box-shadow:0 14px 30px rgba(239,68,68,.23)!important;
}
.voice-dock-btn.voice-dock-mic.is-off::after,
.voice-dock-btn.voice-dock-speaker.is-off::after{background:#fee2e2!important;box-shadow:0 0 0 3px rgba(254,226,226,.25)!important;}
.voice-dock-btn.mute-btn-forced{
  background:linear-gradient(135deg,#f59e0b,#c66a12)!important;
  color:#fff!important;
  border-color:transparent!important;
  opacity:1!important;
  cursor:not-allowed!important;
}
.voice-dock-btn.mute-btn-forced::after{background:#fed7aa!important;box-shadow:0 0 0 3px rgba(254,215,170,.28)!important;}
.voice-dock-screen,.voice-dock-assist{
  min-width:72px!important;
  background:linear-gradient(180deg,#fff,#f5f7fb)!important;
  color:var(--text-primary)!important;
}
.voice-dock-screen.is-active{
  background:linear-gradient(135deg,#0f766e,#0d9488)!important;
  color:#fff!important;
  border-color:transparent!important;
}
body.dark .voice-dock-screen,
body.dark .voice-dock-assist{
  background:linear-gradient(180deg,#343b47,#29303a)!important;
  color:#f3f6fb!important;
  border-color:rgba(255,255,255,.12)!important;
}

@media (max-width:960px){
  .voice-control-dock{
    left:8px!important;
    right:8px!important;
    bottom:calc(8px + env(safe-area-inset-bottom))!important;
    width:auto!important;
    max-width:calc(100vw - 16px)!important;
    padding:8px!important;
    border-radius:18px!important;
  }
  .voice-control-dock-actions{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:7px!important;
  }
  .voice-dock-btn{
    min-width:0!important;
    width:100%!important;
    height:52px!important;
    padding:0 5px!important;
    gap:5px!important;
    border-radius:15px!important;
  }
  .voice-dock-btn::after{top:7px!important;right:7px!important;width:7px!important;height:7px!important;}
  .voice-dock-btn-icon{font-size:16px!important;}
  .voice-dock-btn-text{font-size:12px!important;}
  #call-interface{padding-bottom:96px!important;}
}
@media (max-width:380px){
  .voice-control-dock{left:6px!important;right:6px!important;max-width:calc(100vw - 12px)!important;padding:7px!important;}
  .voice-control-dock-actions{gap:5px!important;}
  .voice-dock-btn{height:48px!important;padding:0 3px!important;gap:3px!important;border-radius:13px!important;}
  .voice-dock-btn-icon{font-size:14px!important;}
  .voice-dock-btn-text{font-size:10px!important;}
  #call-interface{padding-bottom:88px!important;}
}

/* v39 safe TT/DC style voice dock: state is shown by the buttons themselves. */
#voice-control-dock,
.voice-control-dock {
  position: fixed !important;
  left: max(18px, env(safe-area-inset-left)) !important;
  bottom: calc(18px + env(safe-area-inset-bottom)) !important;
  z-index: 80 !important;
  width: auto !important;
  max-width: calc(100vw - 36px) !important;
  min-width: 0 !important;
  padding: 8px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(78, 92, 132, .22) !important;
  background: linear-gradient(135deg, rgba(38, 41, 75, .96), rgba(31, 35, 69, .96)) !important;
  box-shadow: 0 16px 42px rgba(15, 23, 42, .22), inset 0 1px 0 rgba(255,255,255,.08) !important;
  backdrop-filter: blur(16px) !important;
  overflow: visible !important;
}
#voice-control-dock .voice-control-dock-label,
#voice-control-dock .voice-control-dock-status,
#voice-control-dock .voice-dock-screen,
#voice-control-dock .voice-dock-assist { display: none !important; }
#voice-control-dock .voice-control-dock-actions {
  display: grid !important;
  grid-template-columns: 44px 44px minmax(116px, 168px) 44px !important;
  align-items: center !important;
  gap: 8px !important;
  width: max-content !important;
  max-width: 100% !important;
}
.voice-dock-control {
  position: relative !important;
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}
#voice-control-dock .voice-dock-btn,
#voice-control-dock .voice-dock-circle-btn,
#voice-control-dock #mute-btn,
#voice-control-dock #speaker-toggle-btn,
#voice-control-dock .voice-audio-settings-btn {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  background: rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.92) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease !important;
}
#voice-control-dock .voice-dock-btn:hover,
#voice-control-dock .voice-audio-settings-btn:hover { transform: translateY(-1px) !important; background: rgba(255,255,255,.16) !important; }
#voice-control-dock .voice-dock-btn .voice-dock-btn-text { display: none !important; }
#voice-control-dock .voice-dock-btn .voice-dock-btn-icon { font-size: 19px !important; line-height: 1 !important; }
#voice-control-dock .voice-dock-btn.is-on {
  color: #eafff5 !important;
  border-color: rgba(81, 216, 150, .44) !important;
  background: rgba(70, 194, 132, .22) !important;
  box-shadow: 0 0 0 1px rgba(71, 214, 147, .16), 0 0 18px rgba(72, 214, 147, .24), inset 0 1px 0 rgba(255,255,255,.10) !important;
}
#voice-control-dock .voice-dock-btn.is-off {
  color: #ffe8ec !important;
  border-color: rgba(239, 83, 105, .44) !important;
  background: rgba(224, 61, 84, .20) !important;
}
#voice-control-dock .voice-dock-btn.mute-btn-forced {
  color: #fff5df !important;
  border-color: rgba(245, 158, 11, .50) !important;
  background: rgba(245, 158, 11, .20) !important;
}
.voice-talk-mode-btn {
  height: 44px !important;
  min-width: 116px !important;
  max-width: 168px !important;
  width: 100% !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 999px !important;
  padding: 0 14px !important;
  background: rgba(255,255,255,.10) !important;
  color: #62e7a8 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.voice-talk-mode-btn.is-ptt { color: #ff7687 !important; }
.voice-talk-mode-btn .voice-mode-sub { font-size: 11px !important; opacity: .78 !important; font-weight: 700 !important; }
.voice-talk-mode-btn .voice-mode-caret { font-size: 13px !important; opacity: .78 !important; }
.voice-audio-settings-btn { font-size: 19px !important; cursor: pointer !important; }
.voice-dock-control:hover .voice-volume-popover,
.voice-dock-control:focus-within .voice-volume-popover {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(-6px) !important;
}
.voice-volume-popover {
  position: absolute !important;
  left: 50% !important;
  bottom: 50px !important;
  width: 48px !important;
  height: 168px !important;
  border-radius: 20px !important;
  background: linear-gradient(180deg, rgba(37, 40, 72, .98), rgba(29, 33, 65, .98)) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 16px 36px rgba(15,23,42,.32) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(-50%) translateY(4px) !important;
  transition: opacity .14s ease, transform .14s ease !important;
  z-index: 12 !important;
}
.voice-volume-gear { color: rgba(255,255,255,.38) !important; font-size: 15px !important; line-height: 1 !important; }
.voice-volume-range {
  writing-mode: vertical-lr !important;
  direction: rtl !important;
  width: 26px !important;
  height: 104px !important;
  accent-color: #58e6c1 !important;
}
.voice-volume-tooltip {
  position: absolute !important;
  left: 50% !important;
  bottom: -34px !important;
  transform: translateX(-50%) !important;
  padding: 6px 9px !important;
  border-radius: 8px !important;
  background: rgba(15, 23, 42, .92) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  box-shadow: 0 10px 20px rgba(15,23,42,.22) !important;
}
.voice-mode-settings-card { display: grid !important; gap: 12px !important; }
.voice-mode-row, .voice-ptt-row { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; flex-wrap: wrap !important; }
.voice-mode-title { font-weight: 800 !important; color: #172033 !important; }
.voice-mode-desc { font-size: 12px !important; color: #64748b !important; line-height: 1.6 !important; }
.voice-mode-segment { display: inline-flex !important; padding: 4px !important; border-radius: 14px !important; background: #eef2ff !important; border: 1px solid #dbe3ff !important; }
.voice-mode-option, .ptt-hotkey-btn { border: 0 !important; border-radius: 11px !important; padding: 8px 12px !important; font-weight: 800 !important; cursor: pointer !important; background: transparent !important; color: #475569 !important; }
.voice-mode-option.active { color: #fff !important; background: #5b5cf6 !important; box-shadow: 0 8px 18px rgba(91,92,246,.22) !important; }
.ptt-hotkey-btn { border: 1px solid #dbe3f0 !important; background: #fff !important; color: #1e293b !important; min-width: 88px !important; }
.ptt-hotkey-btn.is-capturing { color: #5b5cf6 !important; border-color: #a5b4fc !important; box-shadow: 0 0 0 3px rgba(91,92,246,.12) !important; }
@media (max-width: 760px) {
  #voice-control-dock,
  .voice-control-dock {
    left: 8px !important;
    right: 8px !important;
    bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: none !important;
    border-radius: 22px !important;
  }
  #voice-control-dock .voice-control-dock-actions {
    width: 100% !important;
    grid-template-columns: 42px 42px minmax(0, 1fr) 42px !important;
    gap: 6px !important;
  }
  .voice-dock-control { width: 42px !important; height: 42px !important; }
  #voice-control-dock .voice-dock-btn,
  #voice-control-dock .voice-dock-circle-btn,
  #voice-control-dock #mute-btn,
  #voice-control-dock #speaker-toggle-btn,
  #voice-control-dock .voice-audio-settings-btn { width: 42px !important; height: 42px !important; min-width: 42px !important; }
  .voice-talk-mode-btn { min-width: 0 !important; max-width: none !important; padding: 0 10px !important; font-size: 13px !important; }
  .voice-talk-mode-btn .voice-mode-sub { display: none !important; }
  #call-interface { padding-bottom: 82px !important; }
}
@media (max-width: 390px) {
  .voice-talk-mode-btn { font-size: 12px !important; }
}

/* v40: white-background friendly audio dock
   Goal: replace the heavy dark blob with a compact light control bar.
   Audio controls live here only: speaker, mic, talk-mode, audio settings gear.
   Room settings in the room header are not touched. */
#voice-control-dock,
.voice-control-dock,
#voice-control-dock.tt-voice-dock{
  position: fixed !important;
  left: max(18px, env(safe-area-inset-left)) !important;
  right: auto !important;
  bottom: calc(18px + env(safe-area-inset-bottom)) !important;
  z-index: 1180 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: calc(100vw - 36px) !important;
  padding: 9px 11px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(204, 214, 229, .92) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,255,.96)) !important;
  box-shadow:
    0 18px 42px rgba(31, 42, 68, .13),
    0 4px 12px rgba(31, 42, 68, .07),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}
body.dark #voice-control-dock,
body.dark .voice-control-dock,
body.dark #voice-control-dock.tt-voice-dock{
  border-color: rgba(255,255,255,.12) !important;
  background: linear-gradient(180deg, rgba(44,50,64,.96), rgba(35,40,52,.96)) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.07) !important;
}

#voice-control-dock .voice-control-dock-label,
#voice-control-dock .voice-control-dock-status,
#voice-control-dock .voice-dock-state-chip,
#voice-control-dock .voice-dock-screen,
#voice-control-dock .voice-dock-assist,
#voice-control-dock #screen-share-btn,
#voice-control-dock #remote-assist-btn,
.voice-control-dock .voice-dock-screen,
.voice-control-dock .voice-dock-assist,
.voice-control-dock #screen-share-btn,
.voice-control-dock #remote-assist-btn{
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#voice-control-dock .voice-control-dock-actions,
.voice-control-dock .voice-control-dock-actions{
  display: grid !important;
  grid-template-columns: 56px 56px minmax(142px, 206px) 56px !important;
  grid-auto-rows: 56px !important;
  align-items: center !important;
  justify-items: center !important;
  gap: 10px !important;
  width: max-content !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#voice-control-dock .voice-dock-control,
.voice-control-dock .voice-dock-control{
  position: relative !important;
  width: 56px !important;
  height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  grid-row: 1 !important;
}
#voice-dock-control-output{grid-column:1!important;}
#voice-dock-control-input{grid-column:2!important;}
#voice-talk-mode-btn{grid-column:3!important;grid-row:1!important;}
#voice-audio-settings-btn{grid-column:4!important;grid-row:1!important;}

#voice-control-dock .voice-dock-btn,
#voice-control-dock .voice-dock-circle-btn,
#voice-control-dock #mute-btn,
#voice-control-dock #speaker-toggle-btn,
#voice-control-dock .voice-audio-settings-btn{
  position: relative !important;
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  border: 1px solid rgba(207, 218, 234, .95) !important;
  background: linear-gradient(180deg, #ffffff, #f5f8fc) !important;
  color: #64748b !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  box-shadow:
    0 6px 14px rgba(30, 41, 59, .07),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
  transform: none !important;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease, color .15s ease !important;
  cursor: pointer !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}
#voice-control-dock .voice-dock-btn:hover:not(:disabled),
#voice-control-dock .voice-audio-settings-btn:hover:not(:disabled){
  transform: translateY(-1px) !important;
  border-color: rgba(96, 165, 250, .55) !important;
  box-shadow: 0 10px 20px rgba(30, 41, 59, .11), inset 0 1px 0 rgba(255,255,255,.95) !important;
}
#voice-control-dock .voice-dock-btn::before,
#voice-control-dock .voice-dock-btn::after,
#voice-control-dock .voice-dock-circle-btn::before,
#voice-control-dock .voice-dock-circle-btn::after,
#voice-control-dock .voice-audio-settings-btn::before,
#voice-control-dock .voice-audio-settings-btn::after{
  content: none !important;
  display: none !important;
}
#voice-control-dock .voice-dock-btn .voice-dock-btn-text{display:none!important;}
#voice-control-dock .voice-dock-btn .voice-dock-btn-icon{
  width: 25px !important;
  height: 25px !important;
  display: inline-grid !important;
  place-items: center !important;
  font-size: 0 !important;
  line-height: 1 !important;
}
#voice-control-dock .voice-dock-svg{
  width: 25px !important;
  height: 25px !important;
  display: block !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2.15 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* Clear button states: blue/green = on, red = off/muted. */
#voice-control-dock #speaker-toggle-btn.is-on,
#voice-control-dock .voice-dock-speaker.is-on{
  color: #1677ff !important;
  border-color: rgba(22,119,255,.32) !important;
  background: linear-gradient(180deg, #ffffff, #eef6ff) !important;
  box-shadow: 0 0 0 4px rgba(22,119,255,.06), 0 8px 18px rgba(22,119,255,.12), inset 0 1px 0 rgba(255,255,255,.96) !important;
}
#voice-control-dock #mute-btn.is-on,
#voice-control-dock .voice-dock-mic.is-on{
  color: #16a36a !important;
  border-color: rgba(22,163,106,.34) !important;
  background: linear-gradient(180deg, #ffffff, #eefbf5) !important;
  box-shadow: 0 0 0 4px rgba(22,163,106,.07), 0 8px 18px rgba(22,163,106,.13), inset 0 1px 0 rgba(255,255,255,.96) !important;
}
#voice-control-dock #speaker-toggle-btn.is-off,
#voice-control-dock #mute-btn.is-off,
#voice-control-dock .voice-dock-speaker.is-off,
#voice-control-dock .voice-dock-mic.is-off{
  color: #ef4444 !important;
  border-color: rgba(239,68,68,.34) !important;
  background: linear-gradient(180deg, #fff, #fff2f2) !important;
  box-shadow: 0 0 0 4px rgba(239,68,68,.06), 0 8px 18px rgba(239,68,68,.12), inset 0 1px 0 rgba(255,255,255,.96) !important;
}
#voice-control-dock #mute-btn.mute-btn-forced,
#voice-control-dock .voice-dock-mic.mute-btn-forced{
  color: #d97706 !important;
  border-color: rgba(217,119,6,.36) !important;
  background: linear-gradient(180deg, #fff, #fff7ed) !important;
  box-shadow: 0 0 0 4px rgba(217,119,6,.07), 0 8px 18px rgba(217,119,6,.12), inset 0 1px 0 rgba(255,255,255,.96) !important;
  opacity: 1 !important;
}

/* Small state dot, not a text chip. */
#voice-control-dock #speaker-toggle-btn .voice-dock-state-dot,
#voice-control-dock #mute-btn .voice-dock-state-dot{
  position: absolute !important;
  right: 7px !important;
  top: 7px !important;
  width: 9px !important;
  height: 9px !important;
  border-radius: 999px !important;
  background: #94a3b8 !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 2px 5px rgba(15,23,42,.18) !important;
}
#voice-control-dock #speaker-toggle-btn.is-on .voice-dock-state-dot{background:#1677ff!important;}
#voice-control-dock #mute-btn.is-on .voice-dock-state-dot{background:#16a36a!important;}
#voice-control-dock #speaker-toggle-btn.is-off .voice-dock-state-dot,
#voice-control-dock #mute-btn.is-off .voice-dock-state-dot{background:#ef4444!important;}
#voice-control-dock #mute-btn.mute-btn-forced .voice-dock-state-dot{background:#d97706!important;}

#voice-control-dock .voice-talk-mode-btn{
  position: relative !important;
  width: 100% !important;
  min-width: 142px !important;
  max-width: 206px !important;
  height: 52px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(204, 214, 229, .92) !important;
  background: linear-gradient(180deg, #ffffff, #f6f9fd) !important;
  color: #1677ff !important;
  box-shadow: 0 6px 14px rgba(30, 41, 59, .07), inset 0 1px 0 rgba(255,255,255,.95) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}
#voice-control-dock .voice-talk-mode-btn:hover{border-color:rgba(96,165,250,.58)!important;box-shadow:0 10px 20px rgba(22,119,255,.10), inset 0 1px 0 rgba(255,255,255,.95)!important;}
#voice-control-dock .voice-talk-mode-btn.is-ptt{
  color: #ef4444 !important;
  background: linear-gradient(180deg, #fff, #fff5f5) !important;
  border-color: rgba(239,68,68,.26) !important;
}
#voice-control-dock .voice-talk-mode-btn .voice-mode-sub{font-size:11px!important;opacity:.68!important;font-weight:850!important;}
#voice-control-dock .voice-talk-mode-btn .voice-mode-caret{font-size:13px!important;opacity:.78!important;}
#voice-control-dock .voice-audio-settings-btn{
  color: #64748b !important;
  font-size: 0 !important;
}
#voice-control-dock .voice-audio-settings-btn span{display:none!important;}
#voice-control-dock .voice-audio-settings-btn .voice-dock-svg{width:24px!important;height:24px!important;}

/* Light hover volume slider. */
#voice-control-dock .voice-dock-control:hover .voice-volume-popover,
#voice-control-dock .voice-dock-control:focus-within .voice-volume-popover{
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(-7px) !important;
}
#voice-control-dock .voice-volume-popover{
  position: absolute !important;
  left: 50% !important;
  bottom: 62px !important;
  width: 58px !important;
  height: 176px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(204,214,229,.92) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,255,.96)) !important;
  box-shadow: 0 20px 42px rgba(30,41,59,.16), inset 0 1px 0 rgba(255,255,255,.95) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(-50%) translateY(4px) !important;
  transition: opacity .14s ease, transform .14s ease !important;
  z-index: 30 !important;
}
#voice-control-dock .voice-volume-gear{color:#94a3b8!important;font-size:0!important;width:17px!important;height:17px!important;position:relative!important;}
#voice-control-dock .voice-volume-gear::before{content:'⚙';font-size:16px!important;line-height:1!important;}
#voice-control-dock .voice-volume-range{
  writing-mode: vertical-lr !important;
  direction: rtl !important;
  width: 28px !important;
  height: 112px !important;
  accent-color: #1677ff !important;
  cursor: pointer !important;
}
#voice-control-dock .voice-volume-tooltip{
  position: absolute !important;
  left: 50% !important;
  bottom: -36px !important;
  transform: translateX(-50%) !important;
  padding: 7px 11px !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.98) !important;
  color: #334155 !important;
  border: 1px solid rgba(204,214,229,.92) !important;
  box-shadow: 0 12px 24px rgba(30,41,59,.14) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
}

@media (max-width: 760px){
  #voice-control-dock,
  .voice-control-dock,
  #voice-control-dock.tt-voice-dock{
    left: 8px !important;
    right: 8px !important;
    bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: none !important;
    border-radius: 24px !important;
    padding: 8px !important;
  }
  #voice-control-dock .voice-control-dock-actions,
  .voice-control-dock .voice-control-dock-actions{
    width: 100% !important;
    grid-template-columns: 48px 48px minmax(0, 1fr) 48px !important;
    grid-auto-rows: 48px !important;
    gap: 7px !important;
  }
  #voice-control-dock .voice-dock-control{width:48px!important;height:48px!important;}
  #voice-control-dock .voice-dock-btn,
  #voice-control-dock .voice-dock-circle-btn,
  #voice-control-dock #mute-btn,
  #voice-control-dock #speaker-toggle-btn,
  #voice-control-dock .voice-audio-settings-btn{
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
  }
  #voice-control-dock .voice-talk-mode-btn{
    min-width: 0 !important;
    max-width: none !important;
    height: 46px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
  }
  #voice-control-dock .voice-talk-mode-btn .voice-mode-sub{display:none!important;}
  #voice-control-dock .voice-volume-popover{bottom:56px!important;height:164px!important;}
  #call-interface{padding-bottom:82px!important;}
}
@media (max-width: 390px){
  #voice-control-dock .voice-control-dock-actions{grid-template-columns:44px 44px minmax(0,1fr) 44px!important;gap:5px!important;}
  #voice-control-dock .voice-dock-control{width:44px!important;height:44px!important;}
  #voice-control-dock .voice-dock-btn,
  #voice-control-dock .voice-dock-circle-btn,
  #voice-control-dock #mute-btn,
  #voice-control-dock #speaker-toggle-btn,
  #voice-control-dock .voice-audio-settings-btn{width:42px!important;height:42px!important;min-width:42px!important;max-width:42px!important;}
  #voice-control-dock .voice-dock-svg{width:22px!important;height:22px!important;}
  #voice-control-dock .voice-talk-mode-btn{height:42px!important;font-size:12px!important;padding:0 6px!important;}
  #voice-control-dock .voice-talk-mode-btn .voice-mode-caret{display:none!important;}
  #call-interface{padding-bottom:76px!important;}
}

/* v42: place the light audio dock inside the room's member panel on desktop.
   Fixes: old fixed bottom-left placement, hover-slider jumping, and v39/v40 observer fighting. */
#call-interface .members-area.members-bottom{
  display:flex!important;
  flex-direction:column!important;
  overflow:visible!important;
  position:relative!important;
}
#call-interface .members-area.members-bottom #members{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow:auto!important;
}
#call-interface.hidden #voice-control-dock.v42-voice-dock{display:none!important;}

#voice-control-dock.v42-voice-dock,
#voice-control-dock.v42-voice-dock.tt-voice-dock,
#voice-control-dock.v42-voice-dock.light-voice-dock{
  position:relative!important;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;
  top:auto!important;
  z-index:35!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  margin:14px 0 0!important;
  padding:8px!important;
  border-radius:18px!important;
  border:1px solid rgba(205,216,232,.96)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(247,250,255,.96))!important;
  box-shadow:0 12px 30px rgba(31,42,68,.10),0 3px 10px rgba(31,42,68,.06),inset 0 1px 0 rgba(255,255,255,.96)!important;
  backdrop-filter:blur(14px) saturate(1.06)!important;
  -webkit-backdrop-filter:blur(14px) saturate(1.06)!important;
  overflow:visible!important;
  box-sizing:border-box!important;
}
#voice-control-dock.v42-voice-dock .voice-control-dock-actions{
  display:grid!important;
  grid-template-columns:48px 48px minmax(112px,1fr) 48px!important;
  grid-auto-rows:48px!important;
  align-items:center!important;
  justify-items:center!important;
  gap:8px!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
}
#voice-control-dock.v42-voice-dock .voice-dock-control{
  position:relative!important;
  width:48px!important;
  height:48px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:visible!important;
  grid-row:1!important;
}
#voice-control-dock.v42-voice-dock #voice-dock-control-output{grid-column:1!important;}
#voice-control-dock.v42-voice-dock #voice-dock-control-input{grid-column:2!important;}
#voice-control-dock.v42-voice-dock #voice-talk-mode-btn{grid-column:3!important;grid-row:1!important;}
#voice-control-dock.v42-voice-dock #voice-audio-settings-btn{grid-column:4!important;grid-row:1!important;}

#voice-control-dock.v42-voice-dock .voice-dock-btn,
#voice-control-dock.v42-voice-dock .voice-dock-circle-btn,
#voice-control-dock.v42-voice-dock #mute-btn,
#voice-control-dock.v42-voice-dock #speaker-toggle-btn,
#voice-control-dock.v42-voice-dock .voice-audio-settings-btn{
  position:relative!important;
  width:46px!important;
  height:46px!important;
  min-width:46px!important;
  max-width:46px!important;
  padding:0!important;
  border-radius:999px!important;
  border:1px solid rgba(207,218,234,.98)!important;
  background:linear-gradient(180deg,#ffffff,#f5f8fc)!important;
  color:#64748b!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:0!important;
  box-shadow:0 5px 12px rgba(30,41,59,.07),inset 0 1px 0 rgba(255,255,255,.96)!important;
  transform:none!important;
  transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease,background .14s ease,color .14s ease!important;
  cursor:pointer!important;
  overflow:visible!important;
  box-sizing:border-box!important;
}
#voice-control-dock.v42-voice-dock .voice-dock-btn:hover:not(:disabled),
#voice-control-dock.v42-voice-dock .voice-audio-settings-btn:hover:not(:disabled){
  transform:translateY(-1px)!important;
  border-color:rgba(96,165,250,.55)!important;
  box-shadow:0 9px 18px rgba(30,41,59,.11),inset 0 1px 0 rgba(255,255,255,.96)!important;
}
#voice-control-dock.v42-voice-dock .voice-dock-btn::before,
#voice-control-dock.v42-voice-dock .voice-dock-btn::after,
#voice-control-dock.v42-voice-dock .voice-dock-circle-btn::before,
#voice-control-dock.v42-voice-dock .voice-dock-circle-btn::after,
#voice-control-dock.v42-voice-dock .voice-audio-settings-btn::before,
#voice-control-dock.v42-voice-dock .voice-audio-settings-btn::after{content:none!important;display:none!important;}
#voice-control-dock.v42-voice-dock .voice-dock-btn .voice-dock-btn-text{display:none!important;}
#voice-control-dock.v42-voice-dock .voice-dock-btn .voice-dock-btn-icon{
  width:24px!important;
  height:24px!important;
  display:inline-grid!important;
  place-items:center!important;
  font-size:0!important;
  line-height:1!important;
}
#voice-control-dock.v42-voice-dock .voice-dock-svg{
  width:24px!important;
  height:24px!important;
  display:block!important;
  stroke:currentColor!important;
  fill:none!important;
  stroke-width:2.15!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
#voice-control-dock.v42-voice-dock #speaker-toggle-btn.is-on{color:#1677ff!important;border-color:rgba(22,119,255,.34)!important;background:linear-gradient(180deg,#fff,#eef6ff)!important;box-shadow:0 0 0 4px rgba(22,119,255,.06),0 8px 16px rgba(22,119,255,.12),inset 0 1px 0 rgba(255,255,255,.96)!important;}
#voice-control-dock.v42-voice-dock #mute-btn.is-on{color:#16a36a!important;border-color:rgba(22,163,106,.34)!important;background:linear-gradient(180deg,#fff,#eefbf5)!important;box-shadow:0 0 0 4px rgba(22,163,106,.07),0 8px 16px rgba(22,163,106,.13),inset 0 1px 0 rgba(255,255,255,.96)!important;}
#voice-control-dock.v42-voice-dock #speaker-toggle-btn.is-off,
#voice-control-dock.v42-voice-dock #mute-btn.is-off{color:#ef4444!important;border-color:rgba(239,68,68,.34)!important;background:linear-gradient(180deg,#fff,#fff2f2)!important;box-shadow:0 0 0 4px rgba(239,68,68,.06),0 8px 16px rgba(239,68,68,.12),inset 0 1px 0 rgba(255,255,255,.96)!important;}
#voice-control-dock.v42-voice-dock #mute-btn.mute-btn-forced{color:#d97706!important;border-color:rgba(217,119,6,.36)!important;background:linear-gradient(180deg,#fff,#fff7ed)!important;opacity:1!important;}
#voice-control-dock.v42-voice-dock #speaker-toggle-btn .voice-dock-state-dot,
#voice-control-dock.v42-voice-dock #mute-btn .voice-dock-state-dot{
  position:absolute!important;
  right:6px!important;
  top:6px!important;
  width:8px!important;
  height:8px!important;
  border-radius:999px!important;
  background:#94a3b8!important;
  box-shadow:0 0 0 3px rgba(255,255,255,.9),0 2px 5px rgba(15,23,42,.16)!important;
}
#voice-control-dock.v42-voice-dock #speaker-toggle-btn.is-on .voice-dock-state-dot{background:#1677ff!important;}
#voice-control-dock.v42-voice-dock #mute-btn.is-on .voice-dock-state-dot{background:#16a36a!important;}
#voice-control-dock.v42-voice-dock #speaker-toggle-btn.is-off .voice-dock-state-dot,
#voice-control-dock.v42-voice-dock #mute-btn.is-off .voice-dock-state-dot{background:#ef4444!important;}
#voice-control-dock.v42-voice-dock #mute-btn.mute-btn-forced .voice-dock-state-dot{background:#d97706!important;}

#voice-control-dock.v42-voice-dock .voice-talk-mode-btn{
  position:relative!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  height:46px!important;
  padding:0 12px!important;
  border-radius:999px!important;
  border:1px solid rgba(204,214,229,.96)!important;
  background:linear-gradient(180deg,#fff,#f6f9fd)!important;
  color:#1677ff!important;
  box-shadow:0 5px 12px rgba(30,41,59,.07),inset 0 1px 0 rgba(255,255,255,.96)!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  font-size:14px!important;
  font-weight:900!important;
  white-space:nowrap!important;
  cursor:pointer!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#voice-control-dock.v42-voice-dock .voice-talk-mode-btn.is-ptt{color:#ef4444!important;background:linear-gradient(180deg,#fff,#fff5f5)!important;border-color:rgba(239,68,68,.28)!important;}
#voice-control-dock.v42-voice-dock .voice-talk-mode-btn.is-active-pressing{color:#16a36a!important;background:linear-gradient(180deg,#fff,#effbf6)!important;border-color:rgba(22,163,106,.34)!important;}
#voice-control-dock.v42-voice-dock .voice-talk-mode-btn .voice-mode-main{min-width:0;overflow:hidden;text-overflow:ellipsis;}
#voice-control-dock.v42-voice-dock .voice-talk-mode-btn .voice-mode-sub{font-size:11px!important;opacity:.68!important;font-weight:850!important;}
#voice-control-dock.v42-voice-dock .voice-talk-mode-btn .voice-mode-caret{font-size:12px!important;opacity:.78!important;}
#voice-control-dock.v42-voice-dock .voice-audio-settings-btn{color:#64748b!important;font-size:0!important;}
#voice-control-dock.v42-voice-dock .voice-audio-settings-btn span{display:none!important;}

/* Stable hover path: the invisible bridge prevents the vertical slider from flickering while moving the cursor upward. */
#voice-control-dock.v42-voice-dock .voice-dock-control::before{
  content:''!important;
  display:block!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:46px!important;
  height:22px!important;
  background:transparent!important;
  pointer-events:auto!important;
}
#voice-control-dock.v42-voice-dock .voice-dock-control:hover .voice-volume-popover,
#voice-control-dock.v42-voice-dock .voice-dock-control:focus-within .voice-volume-popover{
  opacity:1!important;
  pointer-events:auto!important;
  transform:translateX(-50%) translateY(-6px)!important;
}
#voice-control-dock.v42-voice-dock .voice-volume-popover{
  position:absolute!important;
  left:50%!important;
  bottom:60px!important;
  width:56px!important;
  height:166px!important;
  border-radius:20px!important;
  border:1px solid rgba(204,214,229,.96)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.99),rgba(248,251,255,.98))!important;
  box-shadow:0 18px 38px rgba(30,41,59,.16),inset 0 1px 0 rgba(255,255,255,.96)!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  opacity:0!important;
  pointer-events:none!important;
  transform:translateX(-50%) translateY(4px)!important;
  transition:opacity .12s ease,transform .12s ease!important;
  z-index:60!important;
}
#voice-control-dock.v42-voice-dock .voice-volume-gear{color:#94a3b8!important;font-size:0!important;width:16px!important;height:16px!important;position:relative!important;}
#voice-control-dock.v42-voice-dock .voice-volume-gear::before{content:'⚙';font-size:15px!important;line-height:1!important;}
#voice-control-dock.v42-voice-dock .voice-volume-range{
  writing-mode:vertical-lr!important;
  direction:rtl!important;
  width:28px!important;
  height:104px!important;
  accent-color:#1677ff!important;
  cursor:pointer!important;
}
#voice-control-dock.v42-voice-dock .voice-volume-tooltip{
  position:absolute!important;
  left:50%!important;
  bottom:-34px!important;
  transform:translateX(-50%)!important;
  padding:6px 10px!important;
  border-radius:10px!important;
  background:rgba(255,255,255,.99)!important;
  color:#334155!important;
  border:1px solid rgba(204,214,229,.96)!important;
  box-shadow:0 10px 22px rgba(30,41,59,.13)!important;
  font-size:12px!important;
  font-weight:850!important;
  white-space:nowrap!important;
}

/* Mobile: keep it reachable at the bottom, but not overflowing. */
@media (max-width:760px){
  #voice-control-dock.v42-voice-dock,
  #voice-control-dock.v42-voice-dock.tt-voice-dock,
  #voice-control-dock.v42-voice-dock.light-voice-dock{
    position:fixed!important;
    left:8px!important;
    right:8px!important;
    bottom:calc(8px + env(safe-area-inset-bottom))!important;
    width:auto!important;
    max-width:none!important;
    margin:0!important;
    padding:8px!important;
    border-radius:22px!important;
    z-index:1180!important;
  }
  #voice-control-dock.v42-voice-dock .voice-control-dock-actions{grid-template-columns:44px 44px minmax(0,1fr) 44px!important;grid-auto-rows:44px!important;gap:6px!important;}
  #voice-control-dock.v42-voice-dock .voice-dock-control{width:44px!important;height:44px!important;}
  #voice-control-dock.v42-voice-dock .voice-dock-btn,
  #voice-control-dock.v42-voice-dock .voice-dock-circle-btn,
  #voice-control-dock.v42-voice-dock #mute-btn,
  #voice-control-dock.v42-voice-dock #speaker-toggle-btn,
  #voice-control-dock.v42-voice-dock .voice-audio-settings-btn{width:42px!important;height:42px!important;min-width:42px!important;max-width:42px!important;}
  #voice-control-dock.v42-voice-dock .voice-dock-svg{width:22px!important;height:22px!important;}
  #voice-control-dock.v42-voice-dock .voice-talk-mode-btn{height:42px!important;font-size:13px!important;padding:0 8px!important;}
  #voice-control-dock.v42-voice-dock .voice-talk-mode-btn .voice-mode-sub{display:none!important;}
  #voice-control-dock.v42-voice-dock .voice-volume-popover{bottom:54px!important;height:158px!important;}
  #call-interface{padding-bottom:82px!important;}
}
@media (max-width:390px){
  #voice-control-dock.v42-voice-dock .voice-control-dock-actions{grid-template-columns:40px 40px minmax(0,1fr) 40px!important;gap:5px!important;}
  #voice-control-dock.v42-voice-dock .voice-dock-control{width:40px!important;height:40px!important;}
  #voice-control-dock.v42-voice-dock .voice-dock-btn,
  #voice-control-dock.v42-voice-dock .voice-dock-circle-btn,
  #voice-control-dock.v42-voice-dock #mute-btn,
  #voice-control-dock.v42-voice-dock #speaker-toggle-btn,
  #voice-control-dock.v42-voice-dock .voice-audio-settings-btn{width:38px!important;height:38px!important;min-width:38px!important;max-width:38px!important;}
  #voice-control-dock.v42-voice-dock .voice-talk-mode-btn{height:38px!important;font-size:12px!important;padding:0 6px!important;}
  #voice-control-dock.v42-voice-dock .voice-talk-mode-btn .voice-mode-caret{display:none!important;}
  #call-interface{padding-bottom:76px!important;}
}


/* v42: stable white audio dock, share button restored, no jumping hover. */
#voice-control-dock.v42-voice-dock,
#voice-control-dock.v42-voice-dock.tt-voice-dock,
#voice-control-dock.v42-voice-dock.light-voice-dock{
  position:static!important;
  left:auto!important;right:auto!important;bottom:auto!important;top:auto!important;
  width:100%!important;max-width:100%!important;min-width:0!important;
  margin-top:auto!important;padding:10px!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.92)!important;
  border:1px solid rgba(148,163,184,.26)!important;
  box-shadow:0 12px 28px rgba(15,23,42,.08),inset 0 1px 0 rgba(255,255,255,.95)!important;
  backdrop-filter:blur(12px)!important;-webkit-backdrop-filter:blur(12px)!important;
  z-index:4!important;overflow:visible!important;transform:none!important;
}
#voice-control-dock.v42-voice-dock .voice-control-dock-actions{
  display:grid!important;
  grid-template-columns:46px 46px minmax(112px,1fr) 50px 46px!important;
  grid-auto-rows:46px!important;
  gap:8px!important;
  align-items:center!important;
  width:100%!important;overflow:visible!important;
}
#voice-control-dock.v42-voice-dock #voice-dock-control-output{grid-column:1!important;grid-row:1!important;}
#voice-control-dock.v42-voice-dock #voice-dock-control-input{grid-column:2!important;grid-row:1!important;}
#voice-control-dock.v42-voice-dock #voice-talk-mode-btn{grid-column:3!important;grid-row:1!important;}
#voice-control-dock.v42-voice-dock #screen-share-btn{grid-column:4!important;grid-row:1!important;}
#voice-control-dock.v42-voice-dock #voice-audio-settings-btn{grid-column:5!important;grid-row:1!important;}
#voice-control-dock.v42-voice-dock .voice-dock-screen,
#voice-control-dock.v42-voice-dock #screen-share-btn.voice-dock-screen{
  display:flex!important;align-items:center!important;justify-content:center!important;
  width:50px!important;min-width:50px!important;max-width:50px!important;height:46px!important;
  padding:0!important;border-radius:14px!important;
  background:linear-gradient(180deg,#ffffff,#f8fbff)!important;
  color:#334155!important;border:1px solid rgba(148,163,184,.30)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 8px 18px rgba(15,23,42,.06)!important;
  font-size:13px!important;font-weight:850!important;letter-spacing:.01em!important;line-height:1!important;
  white-space:nowrap!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important;
}
#voice-control-dock.v42-voice-dock #screen-share-btn.voice-dock-screen:hover:not(:disabled){
  color:#1677ff!important;border-color:rgba(22,119,255,.38)!important;background:linear-gradient(180deg,#fff,#eef6ff)!important;
  transform:translateY(-1px)!important;box-shadow:0 10px 20px rgba(22,119,255,.10),inset 0 1px 0 rgba(255,255,255,.95)!important;
}
#voice-control-dock.v42-voice-dock #screen-share-btn.voice-dock-screen.is-active,
#voice-control-dock.v42-voice-dock #screen-share-btn.voice-dock-screen:not(:disabled).is-active{
  color:#16a36a!important;border-color:rgba(22,163,106,.36)!important;background:linear-gradient(180deg,#fff,#effbf6)!important;
}
#voice-control-dock.v42-voice-dock #screen-share-btn.voice-dock-screen:disabled,
#voice-control-dock.v42-voice-dock #screen-share-btn.voice-dock-screen.is-disabled{
  color:#94a3b8!important;background:linear-gradient(180deg,#fff,#f8fafc)!important;opacity:.72!important;cursor:not-allowed!important;
}
#voice-control-dock.v42-voice-dock #screen-share-btn.voice-dock-screen::before,
#voice-control-dock.v42-voice-dock #screen-share-btn.voice-dock-screen::after{content:none!important;display:none!important;}
#voice-control-dock.v42-voice-dock .voice-talk-mode-btn{
  min-width:112px!important;height:46px!important;padding:0 14px!important;cursor:pointer!important;
  user-select:none!important;touch-action:manipulation!important;pointer-events:auto!important;
}
#voice-control-dock.v42-voice-dock .voice-talk-mode-btn > *{pointer-events:none!important;}
#voice-control-dock.v42-voice-dock .voice-audio-settings-btn{cursor:pointer!important;pointer-events:auto!important;}
#voice-control-dock.v42-voice-dock .voice-audio-settings-btn > *{pointer-events:none!important;}
#voice-control-dock.v42-voice-dock .voice-dock-control::before{
  content:''!important;position:absolute!important;left:-8px!important;right:-8px!important;bottom:38px!important;height:34px!important;
  display:block!important;background:transparent!important;pointer-events:none!important;
}
#voice-control-dock.v42-voice-dock .voice-dock-control:hover::before,
#voice-control-dock.v42-voice-dock .voice-dock-control:focus-within::before{pointer-events:auto!important;}
#voice-control-dock.v42-voice-dock .voice-volume-popover{
  pointer-events:auto!important;bottom:54px!important;left:50%!important;transform:translateX(-50%) translateY(6px)!important;
  opacity:0!important;visibility:hidden!important;transition:opacity .12s ease,transform .12s ease,visibility .12s ease!important;
}
#voice-control-dock.v42-voice-dock .voice-dock-control:hover .voice-volume-popover,
#voice-control-dock.v42-voice-dock .voice-dock-control:focus-within .voice-volume-popover{
  opacity:1!important;visibility:visible!important;transform:translateX(-50%) translateY(0)!important;
}
@media (max-width:980px){
  #voice-control-dock.v42-voice-dock,
  #voice-control-dock.v42-voice-dock.tt-voice-dock,
  #voice-control-dock.v42-voice-dock.light-voice-dock{
    position:fixed!important;left:8px!important;right:8px!important;bottom:calc(8px + env(safe-area-inset-bottom))!important;
    width:auto!important;max-width:calc(100vw - 16px)!important;margin:0!important;z-index:900!important;
  }
  #voice-control-dock.v42-voice-dock .voice-control-dock-actions{
    grid-template-columns:44px 44px minmax(96px,1fr) 48px 44px!important;grid-auto-rows:44px!important;gap:6px!important;
  }
  #voice-control-dock.v42-voice-dock .voice-dock-control{width:44px!important;height:44px!important;}
  #voice-control-dock.v42-voice-dock .voice-dock-btn,
  #voice-control-dock.v42-voice-dock .voice-dock-circle-btn,
  #voice-control-dock.v42-voice-dock #mute-btn,
  #voice-control-dock.v42-voice-dock #speaker-toggle-btn,
  #voice-control-dock.v42-voice-dock .voice-audio-settings-btn{width:42px!important;height:42px!important;min-width:42px!important;max-width:42px!important;}
  #voice-control-dock.v42-voice-dock #screen-share-btn.voice-dock-screen{width:48px!important;min-width:48px!important;max-width:48px!important;height:42px!important;font-size:12px!important;}
  #voice-control-dock.v42-voice-dock .voice-talk-mode-btn{height:42px!important;font-size:12px!important;min-width:96px!important;padding:0 8px!important;}
  #voice-control-dock.v42-voice-dock .voice-talk-mode-btn .voice-mode-sub{display:none!important;}
  #call-interface{padding-bottom:74px!important;}
}
@media (max-width:420px){
  #voice-control-dock.v42-voice-dock .voice-control-dock-actions{grid-template-columns:40px 40px minmax(82px,1fr) 44px 40px!important;gap:5px!important;}
  #voice-control-dock.v42-voice-dock .voice-dock-control{width:40px!important;height:40px!important;}
  #voice-control-dock.v42-voice-dock .voice-dock-btn,
  #voice-control-dock.v42-voice-dock .voice-dock-circle-btn,
  #voice-control-dock.v42-voice-dock #mute-btn,
  #voice-control-dock.v42-voice-dock #speaker-toggle-btn,
  #voice-control-dock.v42-voice-dock .voice-audio-settings-btn{width:38px!important;height:38px!important;min-width:38px!important;max-width:38px!important;}
  #voice-control-dock.v42-voice-dock #screen-share-btn.voice-dock-screen{width:44px!important;min-width:44px!important;max-width:44px!important;height:38px!important;font-size:11px!important;}
  #voice-control-dock.v42-voice-dock .voice-talk-mode-btn{height:38px!important;font-size:11px!important;min-width:82px!important;padding:0 5px!important;}
  #voice-control-dock.v42-voice-dock .voice-talk-mode-btn .voice-mode-caret{display:none!important;}
}


/* v44: volume popover uses percentage only; remove text labels that caused hover jitter. */
#voice-control-dock.v42-voice-dock .voice-volume-popover{
  height:170px!important;
  gap:6px!important;
  padding:10px 0!important;
}
#voice-control-dock.v42-voice-dock .voice-volume-tooltip,
#voice-control-dock.v42-voice-dock [data-voice-volume-percent]{
  position:static!important;
  left:auto!important;
  bottom:auto!important;
  transform:none!important;
  padding:0!important;
  min-width:42px!important;
  height:18px!important;
  line-height:18px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#2563eb!important;
  font-size:12px!important;
  font-weight:900!important;
  text-align:center!important;
  white-space:nowrap!important;
  font-variant-numeric:tabular-nums!important;
  pointer-events:none!important;
}
#voice-control-dock.v42-voice-dock .voice-volume-popover-input [data-voice-volume-percent],
#voice-control-dock.v42-voice-dock .voice-volume-popover-input .voice-volume-tooltip{color:#16a36a!important;}
#voice-control-dock.v42-voice-dock .voice-volume-range{height:106px!important;}

/* v44: when returning to public chat, never leave the large screen-share stage as blank space. */
#room-chat-panel:not(.is-screen-focus) #screen-share-panel.is-visible,
#room-chat-panel:not(.is-screen-focus) #screen-share-panel.is-visible.is-focus{
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  margin:0 0 10px!important;
  overflow:visible!important;
  background:linear-gradient(135deg,rgba(248,250,252,.98),rgba(238,242,255,.72))!important;
}
#room-chat-panel:not(.is-screen-focus) #screen-share-panel.is-visible .screen-share-head{
  min-height:46px!important;
  padding:10px 12px!important;
  border-bottom:0!important;
  gap:10px!important;
}
#room-chat-panel:not(.is-screen-focus) #screen-share-panel.is-visible .screen-share-stage,
#room-chat-panel:not(.is-screen-focus) #screen-share-panel.is-visible .screen-share-live-controls,
#room-chat-panel:not(.is-screen-focus) #screen-share-panel.is-visible [data-screen-action="view-mode"],
#room-chat-panel:not(.is-screen-focus) #screen-share-panel.is-visible [data-screen-action="fullscreen"],
#room-chat-panel:not(.is-screen-focus) #screen-share-panel.is-visible [data-screen-action="reconnect"],
#room-chat-panel:not(.is-screen-focus) #screen-share-panel.is-visible [data-screen-action="assist"],
#room-chat-panel:not(.is-screen-focus) #screen-share-panel.is-visible [data-screen-action="revoke"]{
  display:none!important;
}
#room-chat-panel:not(.is-screen-focus) #screen-share-panel.is-visible .screen-share-title{
  flex:1 1 260px!important;
  line-height:1.45!important;
}
#room-chat-panel:not(.is-screen-focus) #screen-share-panel.is-visible .screen-share-status{display:none!important;}

/* v45: stronger volume interaction + compact public screen-share strip. */
#voice-control-dock.v42-voice-dock .voice-dock-control{
  -webkit-tap-highlight-color:transparent!important;
}
#voice-control-dock.v42-voice-dock .voice-dock-control.is-touch-open .voice-volume-popover{
  opacity:1!important;
  visibility:visible!important;
  transform:translateX(-50%) translateY(0)!important;
  pointer-events:auto!important;
}
#voice-control-dock.v42-voice-dock .voice-volume-popover,
#voice-control-dock.v42-voice-dock .voice-volume-range{
  touch-action:none!important;
  user-select:none!important;
  -webkit-user-select:none!important;
  cursor:ns-resize!important;
}
#voice-control-dock.v42-voice-dock .voice-volume-popover{
  min-height:170px!important;
}
#voice-control-dock.v42-voice-dock .voice-volume-tooltip,
#voice-control-dock.v42-voice-dock [data-voice-volume-percent]{
  min-width:46px!important;
  letter-spacing:.01em!important;
}
#voice-control-dock.v42-voice-dock .voice-volume-range:active + [data-voice-volume-percent],
#voice-control-dock.v42-voice-dock .voice-dock-control.is-dragging [data-voice-volume-percent]{
  color:#0f172a!important;
  transform:scale(1.04)!important;
}

/* v45: public chat must never keep the large empty screen-share stage. */
#screen-share-panel.is-visible:not(.is-focus),
#screen-share-panel.is-visible.v45-screen-compact{
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  margin:0 0 10px!important;
  overflow:visible!important;
  background:linear-gradient(135deg,rgba(248,250,252,.98),rgba(238,242,255,.72))!important;
}
#screen-share-panel.is-visible:not(.is-focus) .screen-share-head,
#screen-share-panel.is-visible.v45-screen-compact .screen-share-head{
  min-height:44px!important;
  padding:10px 12px!important;
  border-bottom:0!important;
}
#screen-share-panel.is-visible:not(.is-focus) .screen-share-stage,
#screen-share-panel.is-visible:not(.is-focus) .screen-share-live-controls,
#screen-share-panel.is-visible:not(.is-focus) [data-screen-action="view-mode"],
#screen-share-panel.is-visible:not(.is-focus) [data-screen-action="fullscreen"],
#screen-share-panel.is-visible:not(.is-focus) [data-screen-action="reconnect"],
#screen-share-panel.is-visible:not(.is-focus) [data-screen-action="assist"],
#screen-share-panel.is-visible:not(.is-focus) [data-screen-action="revoke"],
#screen-share-panel.is-visible.v45-screen-compact .screen-share-stage,
#screen-share-panel.is-visible.v45-screen-compact .screen-share-live-controls,
#screen-share-panel.is-visible.v45-screen-compact [data-screen-action="view-mode"],
#screen-share-panel.is-visible.v45-screen-compact [data-screen-action="fullscreen"],
#screen-share-panel.is-visible.v45-screen-compact [data-screen-action="reconnect"],
#screen-share-panel.is-visible.v45-screen-compact [data-screen-action="assist"],
#screen-share-panel.is-visible.v45-screen-compact [data-screen-action="revoke"]{
  display:none!important;
}
#screen-share-panel.is-visible:not(.is-focus) .screen-share-title,
#screen-share-panel.is-visible.v45-screen-compact .screen-share-title{
  flex:1 1 auto!important;
  min-width:0!important;
  line-height:1.45!important;
}
#screen-share-panel.is-visible:not(.is-focus) .screen-share-status,
#screen-share-panel.is-visible.v45-screen-compact .screen-share-status{
  display:none!important;
}


/* v46: return-to-public safety. Avoid JS loops; compact only by final state. */
#screen-share-panel.is-visible.v46-screen-compact,
#screen-share-panel.is-visible:not(.is-focus){
  min-height:0!important;
  height:auto!important;
  max-height:64px!important;
  overflow:hidden!important;
  margin-bottom:10px!important;
}
#screen-share-panel.is-visible.v46-screen-compact .screen-share-head,
#screen-share-panel.is-visible:not(.is-focus) .screen-share-head{
  min-height:42px!important;
  padding:10px 12px!important;
}
#screen-share-panel.is-visible.v46-screen-compact .screen-share-stage,
#screen-share-panel.is-visible.v46-screen-compact .screen-share-live-controls,
#screen-share-panel.is-visible.v46-screen-compact .screen-share-playback-controls,
#screen-share-panel.is-visible.v46-screen-compact [data-screen-action="view-mode"],
#screen-share-panel.is-visible.v46-screen-compact [data-screen-action="fullscreen"],
#screen-share-panel.is-visible.v46-screen-compact [data-screen-action="reconnect"],
#screen-share-panel.is-visible.v46-screen-compact [data-screen-action="assist"],
#screen-share-panel.is-visible.v46-screen-compact [data-screen-action="revoke"]{
  display:none!important;
}
#screen-share-panel.is-visible.v46-screen-compact .screen-share-title{
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#screen-share-panel.is-visible.is-focus{
  max-height:none!important;
  overflow:visible!important;
}
#screen-share-panel.is-visible.is-focus .screen-share-stage{
  display:block!important;
}


/* v47: public chat screen share should be a single horizontal strip only. */
#screen-share-panel.v47-public-strip,
#screen-share-panel[data-v47-public-strip="1"]{
  display:block!important;
  min-height:0!important;
  height:auto!important;
  max-height:52px!important;
  margin:0 0 10px!important;
  padding:0!important;
  overflow:hidden!important;
  border:1px solid rgba(145,158,178,.22)!important;
  border-radius:12px!important;
  background:linear-gradient(135deg,rgba(248,250,252,.98),rgba(239,246,255,.78))!important;
  box-shadow:none!important;
}
#screen-share-panel.v47-public-strip .screen-share-head,
#screen-share-panel[data-v47-public-strip="1"] .screen-share-head{
  display:flex!important;
  align-items:center!important;
  min-height:46px!important;
  height:46px!important;
  padding:7px 10px!important;
  gap:10px!important;
  border:0!important;
  overflow:hidden!important;
}
#screen-share-panel.v47-public-strip .screen-share-title,
#screen-share-panel[data-v47-public-strip="1"] .screen-share-title{
  flex:1 1 auto!important;
  min-width:0!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  font-size:13px!important;
  font-weight:800!important;
  color:#1f2a44!important;
}
#screen-share-panel.v47-public-strip .screen-share-muted-note,
#screen-share-panel[data-v47-public-strip="1"] .screen-share-muted-note{
  margin-left:8px!important;
  color:#64748b!important;
  font-weight:700!important;
}
#screen-share-panel.v47-public-strip .screen-share-stage,
#screen-share-panel.v47-public-strip .screen-share-live-controls,
#screen-share-panel.v47-public-strip .screen-share-playback-controls,
#screen-share-panel.v47-public-strip .screen-share-status,
#screen-share-panel.v47-public-strip [data-screen-action="view-mode"],
#screen-share-panel.v47-public-strip [data-screen-action="fullscreen"],
#screen-share-panel.v47-public-strip [data-screen-action="reconnect"],
#screen-share-panel.v47-public-strip [data-screen-action="assist"],
#screen-share-panel.v47-public-strip [data-screen-action="revoke"],
#screen-share-panel[data-v47-public-strip="1"] .screen-share-stage,
#screen-share-panel[data-v47-public-strip="1"] .screen-share-live-controls,
#screen-share-panel[data-v47-public-strip="1"] .screen-share-playback-controls,
#screen-share-panel[data-v47-public-strip="1"] .screen-share-status,
#screen-share-panel[data-v47-public-strip="1"] [data-screen-action="view-mode"],
#screen-share-panel[data-v47-public-strip="1"] [data-screen-action="fullscreen"],
#screen-share-panel[data-v47-public-strip="1"] [data-screen-action="reconnect"],
#screen-share-panel[data-v47-public-strip="1"] [data-screen-action="assist"],
#screen-share-panel[data-v47-public-strip="1"] [data-screen-action="revoke"]{
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
#screen-share-panel.v47-public-strip .screen-share-actions,
#screen-share-panel[data-v47-public-strip="1"] .screen-share-actions{
  flex:0 0 auto!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  margin-left:auto!important;
}
#screen-share-panel.v47-public-strip [data-screen-action="toggle-focus"],
#screen-share-panel[data-v47-public-strip="1"] [data-screen-action="toggle-focus"],
#screen-share-panel.v47-public-strip [data-screen-action="stop"],
#screen-share-panel[data-v47-public-strip="1"] [data-screen-action="stop"]{
  display:inline-flex!important;
  visibility:visible!important;
  pointer-events:auto!important;
  align-items:center!important;
  justify-content:center!important;
  height:32px!important;
  min-width:76px!important;
  padding:0 12px!important;
  border-radius:10px!important;
  white-space:nowrap!important;
  font-size:13px!important;
  font-weight:800!important;
}
#room-chat-panel.v47-has-public-share-strip{
  grid-template-rows:auto minmax(360px,1fr) auto auto auto!important;
}
@media (max-width:720px){
  #screen-share-panel.v47-public-strip,
  #screen-share-panel[data-v47-public-strip="1"]{max-height:88px!important;}
  #screen-share-panel.v47-public-strip .screen-share-head,
  #screen-share-panel[data-v47-public-strip="1"] .screen-share-head{height:auto!important;min-height:46px!important;flex-wrap:wrap!important;}
  #screen-share-panel.v47-public-strip .screen-share-title,
  #screen-share-panel[data-v47-public-strip="1"] .screen-share-title{flex-basis:100%!important;font-size:12px!important;}
}


/* v48: final strict screen-share public/focus layout.
   Public chat = one compact strip only. Focused share = big stage with an always-visible Return button. */
#screen-share-panel.v48-public-strip,
#screen-share-panel[data-v48-public-strip="1"]{
  display:block!important;
  height:46px!important;
  min-height:46px!important;
  max-height:46px!important;
  padding:0!important;
  margin:0 0 10px!important;
  overflow:hidden!important;
  border:1px solid rgba(145,158,178,.22)!important;
  border-radius:12px!important;
  background:linear-gradient(135deg,rgba(248,250,252,.98),rgba(239,246,255,.82))!important;
  box-shadow:none!important;
  position:relative!important;
}
#screen-share-panel.v48-public-strip .screen-share-head,
#screen-share-panel[data-v48-public-strip="1"] .screen-share-head{
  display:flex!important;
  align-items:center!important;
  flex-wrap:nowrap!important;
  height:44px!important;
  min-height:44px!important;
  max-height:44px!important;
  padding:6px 10px!important;
  gap:10px!important;
  overflow:hidden!important;
  border:0!important;
}
#screen-share-panel.v48-public-strip .screen-share-title,
#screen-share-panel[data-v48-public-strip="1"] .screen-share-title{
  flex:1 1 auto!important;
  min-width:0!important;
  max-width:none!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  font-size:13px!important;
  font-weight:800!important;
  line-height:1.35!important;
  color:#1f2a44!important;
}
#screen-share-panel.v48-public-strip .screen-share-muted-note,
#screen-share-panel[data-v48-public-strip="1"] .screen-share-muted-note{
  margin-left:8px!important;
  color:#64748b!important;
  font-size:12px!important;
  font-weight:700!important;
}
#screen-share-panel.v48-public-strip .screen-share-stage,
#screen-share-panel.v48-public-strip .screen-share-live-controls,
#screen-share-panel.v48-public-strip .screen-share-playback-controls,
#screen-share-panel.v48-public-strip .screen-share-status,
#screen-share-panel.v48-public-strip [data-screen-action="view-mode"],
#screen-share-panel.v48-public-strip [data-screen-action="fullscreen"],
#screen-share-panel.v48-public-strip [data-screen-action="reconnect"],
#screen-share-panel.v48-public-strip [data-screen-action="assist"],
#screen-share-panel.v48-public-strip [data-screen-action="revoke"],
#screen-share-panel[data-v48-public-strip="1"] .screen-share-stage,
#screen-share-panel[data-v48-public-strip="1"] .screen-share-live-controls,
#screen-share-panel[data-v48-public-strip="1"] .screen-share-playback-controls,
#screen-share-panel[data-v48-public-strip="1"] .screen-share-status,
#screen-share-panel[data-v48-public-strip="1"] [data-screen-action="view-mode"],
#screen-share-panel[data-v48-public-strip="1"] [data-screen-action="fullscreen"],
#screen-share-panel[data-v48-public-strip="1"] [data-screen-action="reconnect"],
#screen-share-panel[data-v48-public-strip="1"] [data-screen-action="assist"],
#screen-share-panel[data-v48-public-strip="1"] [data-screen-action="revoke"]{
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
  height:0!important;
  min-height:0!important;
  max-height:0!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
}
#screen-share-panel.v48-public-strip .screen-share-actions,
#screen-share-panel[data-v48-public-strip="1"] .screen-share-actions{
  flex:0 0 auto!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  margin-left:auto!important;
  position:static!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}
#screen-share-panel.v48-public-strip [data-screen-action="toggle-focus"],
#screen-share-panel[data-v48-public-strip="1"] [data-screen-action="toggle-focus"],
#screen-share-panel.v48-public-strip [data-screen-action="stop"],
#screen-share-panel[data-v48-public-strip="1"] [data-screen-action="stop"]{
  display:inline-flex!important;
  visibility:visible!important;
  pointer-events:auto!important;
  align-items:center!important;
  justify-content:center!important;
  height:32px!important;
  min-width:76px!important;
  padding:0 12px!important;
  border-radius:10px!important;
  white-space:nowrap!important;
  font-size:13px!important;
  font-weight:800!important;
}
#screen-share-panel.v48-screen-focused,
#screen-share-panel[data-v48-screen-focused="1"]{
  position:relative!important;
  display:block!important;
  max-height:none!important;
  height:auto!important;
  overflow:visible!important;
}
#screen-share-panel.v48-screen-focused .screen-share-stage,
#screen-share-panel[data-v48-screen-focused="1"] .screen-share-stage{
  display:block!important;
  visibility:visible!important;
  pointer-events:auto!important;
  height:auto!important;
  min-height:360px!important;
  max-height:none!important;
}
#screen-share-panel.v48-screen-focused .screen-share-actions,
#screen-share-panel[data-v48-screen-focused="1"] .screen-share-actions{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}
#screen-share-panel .v48-return-public-btn{
  display:none!important;
  position:absolute!important;
  right:12px!important;
  top:56px!important;
  z-index:18!important;
  height:34px!important;
  min-width:92px!important;
  padding:0 14px!important;
  border-radius:10px!important;
  border:1px solid rgba(145,158,178,.32)!important;
  background:rgba(255,255,255,.96)!important;
  color:#1f2a44!important;
  font-size:13px!important;
  font-weight:900!important;
  box-shadow:0 10px 24px rgba(15,23,42,.12)!important;
  cursor:pointer!important;
}
#screen-share-panel.v48-screen-focused .v48-return-public-btn,
#screen-share-panel[data-v48-screen-focused="1"] .v48-return-public-btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}
#screen-share-panel.v48-screen-focused .v48-return-public-btn:hover,
#screen-share-panel[data-v48-screen-focused="1"] .v48-return-public-btn:hover{
  transform:translateY(-1px)!important;
  border-color:rgba(88,101,242,.42)!important;
  box-shadow:0 14px 28px rgba(15,23,42,.16)!important;
}
#room-chat-panel.v48-public-share-mode,
#room-chat-panel.v47-has-public-share-strip.v48-public-share-mode{
  grid-template-rows:auto minmax(0,1fr) auto auto auto!important;
  min-height:0!important;
}
#room-chat-panel.v48-public-share-mode #room-chat-messages{
  min-height:260px!important;
  height:auto!important;
  max-height:none!important;
}
@media (max-width:720px){
  #screen-share-panel.v48-public-strip,
  #screen-share-panel[data-v48-public-strip="1"]{height:auto!important;min-height:46px!important;max-height:92px!important;}
  #screen-share-panel.v48-public-strip .screen-share-head,
  #screen-share-panel[data-v48-public-strip="1"] .screen-share-head{height:auto!important;min-height:44px!important;max-height:90px!important;flex-wrap:wrap!important;}
  #screen-share-panel.v48-public-strip .screen-share-title,
  #screen-share-panel[data-v48-public-strip="1"] .screen-share-title{flex:1 1 100%!important;font-size:12px!important;}
  #screen-share-panel .v48-return-public-btn{top:50px!important;right:8px!important;height:32px!important;min-width:84px!important;}
}


/* v49: deterministic screen share state cleanup. Public = strip only; Viewing = stage + guaranteed return button. */
#screen-share-panel.v49-public-strip,
#screen-share-panel[data-v49-public-strip="1"]{
  display:block!important;
  height:46px!important;
  min-height:46px!important;
  max-height:46px!important;
  padding:0!important;
  margin:0 0 10px!important;
  overflow:hidden!important;
  border:1px solid rgba(145,158,178,.22)!important;
  border-radius:12px!important;
  background:linear-gradient(135deg,rgba(248,250,252,.98),rgba(239,246,255,.82))!important;
  box-shadow:none!important;
  position:relative!important;
}
#screen-share-panel.v49-public-strip .screen-share-head,
#screen-share-panel[data-v49-public-strip="1"] .screen-share-head{
  display:flex!important;
  align-items:center!important;
  flex-wrap:nowrap!important;
  height:44px!important;
  min-height:44px!important;
  max-height:44px!important;
  padding:6px 10px!important;
  gap:10px!important;
  overflow:hidden!important;
  border:0!important;
}
#screen-share-panel.v49-public-strip .screen-share-title,
#screen-share-panel[data-v49-public-strip="1"] .screen-share-title{
  flex:1 1 auto!important;
  min-width:0!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  font-size:13px!important;
  font-weight:800!important;
  line-height:1.35!important;
  color:#1f2a44!important;
}
#screen-share-panel.v49-public-strip .screen-share-stage,
#screen-share-panel.v49-public-strip #screen-share-stage,
#screen-share-panel[data-v49-public-strip="1"] .screen-share-stage,
#screen-share-panel[data-v49-public-strip="1"] #screen-share-stage,
#screen-share-panel.v49-public-strip .screen-share-live-controls,
#screen-share-panel.v49-public-strip .screen-share-playback-controls,
#screen-share-panel.v49-public-strip .screen-share-status,
#screen-share-panel.v49-public-strip [data-screen-action="view-mode"],
#screen-share-panel.v49-public-strip [data-screen-action="fullscreen"],
#screen-share-panel.v49-public-strip [data-screen-action="reconnect"],
#screen-share-panel.v49-public-strip [data-screen-action="assist"],
#screen-share-panel.v49-public-strip [data-screen-action="revoke"],
#screen-share-panel.v49-public-strip [data-screen-action="return-public"],
#screen-share-panel[data-v49-public-strip="1"] .screen-share-live-controls,
#screen-share-panel[data-v49-public-strip="1"] .screen-share-playback-controls,
#screen-share-panel[data-v49-public-strip="1"] .screen-share-status,
#screen-share-panel[data-v49-public-strip="1"] [data-screen-action="view-mode"],
#screen-share-panel[data-v49-public-strip="1"] [data-screen-action="fullscreen"],
#screen-share-panel[data-v49-public-strip="1"] [data-screen-action="reconnect"],
#screen-share-panel[data-v49-public-strip="1"] [data-screen-action="assist"],
#screen-share-panel[data-v49-public-strip="1"] [data-screen-action="revoke"],
#screen-share-panel[data-v49-public-strip="1"] [data-screen-action="return-public"]{
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
  height:0!important;
  min-height:0!important;
  max-height:0!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  overflow:hidden!important;
}
#screen-share-panel.v49-public-strip .screen-share-actions,
#screen-share-panel[data-v49-public-strip="1"] .screen-share-actions{
  flex:0 0 auto!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  margin-left:auto!important;
  position:static!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}
#screen-share-panel.v49-public-strip [data-screen-action="toggle-focus"],
#screen-share-panel[data-v49-public-strip="1"] [data-screen-action="toggle-focus"],
#screen-share-panel.v49-public-strip [data-screen-action="stop"],
#screen-share-panel[data-v49-public-strip="1"] [data-screen-action="stop"]{
  display:inline-flex!important;
  visibility:visible!important;
  pointer-events:auto!important;
  align-items:center!important;
  justify-content:center!important;
  height:32px!important;
  min-width:76px!important;
  padding:0 12px!important;
  border-radius:10px!important;
  white-space:nowrap!important;
  font-size:13px!important;
  font-weight:800!important;
}
#screen-share-panel.v49-screen-focused,
#screen-share-panel[data-v49-screen-focused="1"]{
  position:relative!important;
  display:block!important;
  height:auto!important;
  max-height:none!important;
  overflow:visible!important;
}
#screen-share-panel.v49-screen-focused .screen-share-stage,
#screen-share-panel[data-v49-screen-focused="1"] .screen-share-stage{
  display:block!important;
  visibility:visible!important;
  pointer-events:auto!important;
  height:auto!important;
  min-height:360px!important;
  max-height:none!important;
  position:relative!important;
  overflow:hidden!important;
  padding:0!important;
  margin:0!important;
}
#screen-share-panel .screen-share-return-public{
  display:none!important;
  position:absolute!important;
  right:12px!important;
  top:12px!important;
  z-index:40!important;
  height:34px!important;
  min-width:92px!important;
  padding:0 14px!important;
  border-radius:10px!important;
  border:1px solid rgba(145,158,178,.36)!important;
  background:rgba(255,255,255,.96)!important;
  color:#1f2a44!important;
  font-size:13px!important;
  font-weight:900!important;
  box-shadow:0 10px 24px rgba(15,23,42,.16)!important;
  cursor:pointer!important;
}
#screen-share-panel.v49-screen-focused .screen-share-return-public,
#screen-share-panel[data-v49-screen-focused="1"] .screen-share-return-public{
  display:inline-flex!important;
  visibility:visible!important;
  pointer-events:auto!important;
  align-items:center!important;
  justify-content:center!important;
}
#room-chat-panel.v49-public-share-mode{
  grid-template-rows:auto minmax(0,1fr) auto auto auto!important;
  min-height:0!important;
}
#room-chat-panel.v49-public-share-mode #room-chat-messages{
  min-height:260px!important;
  height:auto!important;
  max-height:none!important;
}
@media (max-width:720px){
  #screen-share-panel.v49-public-strip,
  #screen-share-panel[data-v49-public-strip="1"]{height:auto!important;min-height:46px!important;max-height:92px!important;}
  #screen-share-panel.v49-public-strip .screen-share-head,
  #screen-share-panel[data-v49-public-strip="1"] .screen-share-head{height:auto!important;min-height:44px!important;max-height:90px!important;flex-wrap:wrap!important;}
  #screen-share-panel.v49-public-strip .screen-share-title,
  #screen-share-panel[data-v49-public-strip="1"] .screen-share-title{flex:1 1 100%!important;font-size:12px!important;}
  #screen-share-panel .screen-share-return-public{top:8px!important;right:8px!important;height:32px!important;min-width:84px!important;}
}

/* v50: 音量浮层关闭修复。
   拖动 range 后浏览器会保留 focus，旧的 :focus-within 会让浮层一直显示。
   这里改为：鼠标悬停/正在拖动/触摸临时打开时显示；离开后强制收起。 */
#voice-control-dock.v42-voice-dock .voice-dock-control:not(:hover):not(.is-dragging):not(.is-touch-open) .voice-volume-popover{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:translateX(-50%) translateY(8px)!important;
}
#voice-control-dock.v42-voice-dock .voice-dock-control:hover .voice-volume-popover,
#voice-control-dock.v42-voice-dock .voice-dock-control.is-dragging .voice-volume-popover,
#voice-control-dock.v42-voice-dock .voice-dock-control.is-touch-open .voice-volume-popover{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:translateX(-50%) translateY(0)!important;
}
#voice-control-dock.v42-voice-dock .voice-volume-popover[data-closing="1"]{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:translateX(-50%) translateY(8px)!important;
}

/* v52: mobile header/click target + site logo image from backend site_icon_url */
.brand-mark.has-site-logo{
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  background-color:#fff!important;
  border:1px solid rgba(148,163,184,.28)!important;
  box-shadow:0 6px 16px rgba(15,23,42,.10)!important;
}
.brand-mark.has-site-logo::before{content:none!important;display:none!important;}
.brand-mark.has-site-logo::after{content:none!important;display:none!important;}
@media (max-width:820px){
  html,body{width:100%!important;max-width:100%!important;overflow-x:hidden!important;-webkit-text-size-adjust:100%;}
  body{padding:0!important;align-items:flex-start!important;justify-content:flex-start!important;background:var(--bg-page)!important;}
  #app,.app{width:100%!important;max-width:none!important;min-width:0!important;}
  .card{width:100%!important;margin:0!important;padding:10px!important;border-radius:0!important;border-left:0!important;border-right:0!important;overflow:visible!important;}
  .header.app-nav,.header{
    position:sticky!important;
    top:0!important;
    z-index:9000!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:8px!important;
    min-height:56px!important;
    margin:-10px -10px 10px!important;
    padding:8px 10px calc(8px + env(safe-area-inset-top,0px))!important;
    background:rgba(248,250,252,.98)!important;
    border-bottom:1px solid var(--border-light)!important;
    box-shadow:0 8px 18px rgba(15,23,42,.05)!important;
    overflow:visible!important;
    transform:none!important;
  }
  .brand-block{flex:1 1 auto!important;min-width:0!important;max-width:calc(100% - 102px)!important;gap:8px!important;align-items:center!important;}
  .brand-mark{width:34px!important;height:34px!important;flex:0 0 34px!important;border-radius:10px!important;}
  .brand-copy{min-width:0!important;display:block!important;}
  #site-title{display:flex!important;align-items:center!important;gap:6px!important;min-width:0!important;max-width:100%!important;margin:0!important;overflow:hidden!important;line-height:1.15!important;}
  #site-title .brand-name{display:block!important;min-width:0!important;max-width:100%!important;font-size:18px!important;line-height:1.15!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
  #site-title #site-subtitle-badge{display:none!important;}
  .header-actions{position:relative!important;z-index:9010!important;flex:0 0 auto!important;width:auto!important;max-width:100px!important;margin:0!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:6px!important;overflow:visible!important;flex-wrap:nowrap!important;}
  .header-actions .v30-theme-switch{display:none!important;}
  #open-login-btn,.user-info,.user-menu-trigger{position:relative!important;top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;transform:none!important;pointer-events:auto!important;touch-action:manipulation!important;}
  .user-info{display:flex!important;align-items:center!important;justify-content:flex-end!important;margin:0!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;}
  #open-login-btn,.user-menu-trigger{min-width:76px!important;max-width:96px!important;height:40px!important;min-height:40px!important;padding:0 10px!important;border-radius:12px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;line-height:1.1!important;}
  .user-menu-text{min-width:0!important;display:grid!important;gap:1px!important;}
  .user-menu-label{font-size:10px!important;line-height:1!important;}
  #display-username{max-width:70px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}
  .user-menu-dropdown{position:fixed!important;left:10px!important;right:10px!important;top:calc(62px + env(safe-area-inset-top,0px))!important;bottom:auto!important;max-height:calc(100dvh - 82px - env(safe-area-inset-top,0px))!important;overflow:auto!important;-webkit-overflow-scrolling:touch!important;border-radius:14px!important;z-index:12000!important;}
  .user-menu-dropdown .btn,.user-menu-dropdown .logout-btn{width:100%!important;min-height:44px!important;justify-content:center!important;}
  .room-tabs-wrap{position:relative!important;z-index:30!important;overflow:visible!important;}
  .room-tabs{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px!important;width:100%!important;}
  .tab-btn{min-width:0!important;width:100%!important;min-height:42px!important;padding:0 6px!important;font-size:13px!important;}
  .lobby-toolbar{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;}
  #lobby .tab-content.active{min-height:auto!important;}
  .room-list{display:grid!important;grid-template-columns:1fr!important;gap:12px!important;}
  .room-list .room-item{min-height:0!important;height:auto!important;grid-template-rows:auto auto auto!important;}
}
@media (max-width:380px){
  .brand-block{max-width:calc(100% - 88px)!important;}
  #site-title .brand-name{font-size:16px!important;}
  .brand-mark{width:30px!important;height:30px!important;flex-basis:30px!important;}
  #open-login-btn,.user-menu-trigger{min-width:68px!important;max-width:86px!important;padding:0 8px!important;}
}

/* v52: account settings modal mobile touch/click fix */
@media (max-width:820px){
  .settings-modal-overlay{align-items:stretch!important;justify-content:center!important;padding:8px!important;padding-top:calc(8px + env(safe-area-inset-top,0px))!important;}
  .settings-modal-dialog{width:100%!important;max-width:none!important;max-height:calc(100dvh - 16px - env(safe-area-inset-top,0px))!important;border-radius:16px!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;}
  .settings-modal-header{position:sticky!important;top:0!important;z-index:40!important;min-height:54px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;padding:10px 12px!important;background:var(--bg-card)!important;border-bottom:1px solid var(--border-light)!important;}
  .settings-modal-close{position:relative!important;top:auto!important;right:auto!important;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;pointer-events:auto!important;touch-action:manipulation!important;z-index:45!important;}
  .settings-layout{display:flex!important;flex-direction:column!important;min-height:0!important;overflow:hidden!important;}
  .settings-nav{position:sticky!important;top:54px!important;z-index:35!important;display:flex!important;gap:8px!important;overflow-x:auto!important;overflow-y:hidden!important;padding:10px 12px!important;background:var(--bg-card)!important;border-bottom:1px solid var(--border-light)!important;-webkit-overflow-scrolling:touch!important;scrollbar-width:none!important;}
  .settings-nav::-webkit-scrollbar{display:none!important;}
  .settings-nav-btn{flex:0 0 auto!important;min-height:40px!important;padding:0 12px!important;border-radius:10px!important;white-space:nowrap!important;touch-action:manipulation!important;}
  .settings-sections{min-height:0!important;overflow:auto!important;-webkit-overflow-scrolling:touch!important;padding:12px!important;}
  .settings-section.active{min-width:0!important;}
}

/* v53: desktop admin scroll recovery + robust brand logo rendering */
.brand-mark.has-site-logo{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  background-image:none!important;
  background:#fff!important;
}
.brand-mark.has-site-logo .brand-logo-img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  border-radius:inherit!important;
  pointer-events:none!important;
}
.brand-mark:not(.has-site-logo) .brand-logo-img{display:none!important;}
/* v55: invite code field */
.invite-code-box{display:flex;gap:8px;align-items:center;max-width:520px}.invite-code-input{flex:1 1 auto;min-width:0;font-weight:800;letter-spacing:.04em;background:#f8fafc!important}.invite-code-meta{margin-top:6px}.settings-field.invite-code-settings-field{border:1px solid rgba(37,99,235,.16);background:rgba(239,246,255,.58);border-radius:12px;padding:12px}@media(max-width:640px){.invite-code-box{display:grid;grid-template-columns:1fr}.invite-code-box .settings-inline-btn{width:100%}}

/* v60: member action colors + TT-style level badges */
.mini-btn.action-message{background:#eef4ff!important;border-color:#bfdbfe!important;color:#1d4ed8!important;}
.mini-btn.action-message:hover:not(:disabled){background:#dbeafe!important;border-color:#93c5fd!important;color:#1e40af!important;}
.mini-btn.action-report{background:#fff7ed!important;border-color:#fed7aa!important;color:#c2410c!important;}
.mini-btn.action-report:hover:not(:disabled){background:#ffedd5!important;border-color:#fdba74!important;color:#9a3412!important;}
.mini-btn.action-neutral{background:#f8fafc!important;border-color:#cbd5e1!important;color:#475569!important;}
.mini-btn.action-neutral:hover:not(:disabled){background:#e2e8f0!important;border-color:#94a3b8!important;color:#334155!important;}
.mini-btn.action-follow{background:#ecfdf5!important;border-color:#bbf7d0!important;color:#047857!important;}
.mini-btn.action-follow:hover:not(:disabled){background:#dcfce7!important;border-color:#86efac!important;color:#065f46!important;}
.mini-btn.action-admin{background:#f5f3ff!important;border-color:#ddd6fe!important;color:#6d28d9!important;}
.mini-btn.action-admin:hover:not(:disabled){background:#ede9fe!important;border-color:#c4b5fd!important;color:#5b21b6!important;}
.mini-btn.action-mute,.mini-btn.warn.action-mute{background:#fef3c7!important;border-color:#fcd34d!important;color:#92400e!important;}
.mini-btn.action-mute:hover:not(:disabled),.mini-btn.warn.action-mute:hover:not(:disabled){background:#fde68a!important;border-color:#f59e0b!important;color:#78350f!important;}
.mini-btn.action-block,.mini-btn.action-kick,.mini-btn.danger.action-block,.mini-btn.danger.action-kick{background:#fef2f2!important;border-color:#fecaca!important;color:#b91c1c!important;}
.mini-btn.action-block:hover:not(:disabled),.mini-btn.action-kick:hover:not(:disabled),.mini-btn.danger.action-block:hover:not(:disabled),.mini-btn.danger.action-kick:hover:not(:disabled){background:#fee2e2!important;border-color:#fca5a5!important;color:#991b1b!important;}
.mini-btn:disabled,.mini-btn[disabled]{opacity:.48!important;cursor:not-allowed!important;filter:grayscale(.22);}
body.dark .mini-btn.action-message{background:rgba(37,99,235,.16)!important;border-color:rgba(96,165,250,.42)!important;color:#93c5fd!important;}
body.dark .mini-btn.action-report{background:rgba(234,88,12,.16)!important;border-color:rgba(251,146,60,.42)!important;color:#fdba74!important;}
body.dark .mini-btn.action-neutral{background:rgba(148,163,184,.12)!important;border-color:rgba(148,163,184,.32)!important;color:#cbd5e1!important;}
body.dark .mini-btn.action-follow{background:rgba(5,150,105,.16)!important;border-color:rgba(74,222,128,.36)!important;color:#86efac!important;}
body.dark .mini-btn.action-admin{background:rgba(109,40,217,.18)!important;border-color:rgba(167,139,250,.38)!important;color:#c4b5fd!important;}
body.dark .mini-btn.action-mute{background:rgba(217,119,6,.18)!important;border-color:rgba(245,158,11,.42)!important;color:#fcd34d!important;}
body.dark .mini-btn.action-block,body.dark .mini-btn.action-kick{background:rgba(185,28,28,.18)!important;border-color:rgba(248,113,113,.40)!important;color:#fca5a5!important;}
.member-profile-name-row,.relationship-name-row{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap;}.member-profile-name-row strong,.relationship-name-row strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.level-badge{--level-color:#94a3b8;display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:22px;padding:2px 8px;border-radius:6px;border:1px solid color-mix(in srgb,var(--level-color) 55%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--level-color) 18%,#fff),color-mix(in srgb,var(--level-color) 10%,#fff));color:var(--level-color);font-size:12px;font-weight:900;line-height:1;box-shadow:0 3px 10px color-mix(in srgb,var(--level-color) 16%,transparent);cursor:pointer;white-space:nowrap;vertical-align:middle;}.level-badge:hover{transform:translateY(-1px);box-shadow:0 6px 14px color-mix(in srgb,var(--level-color) 22%,transparent);}.level-badge-sm{min-height:18px;padding:2px 6px;font-size:10px;border-radius:5px;}.level-badge-lg{min-height:26px;padding:4px 10px;font-size:13px;border-radius:7px;}.level-badge-icon{font-size:.9em;line-height:1;}.member-title-row .level-badge{flex:0 0 auto;}.room-chat-author .level-badge{margin-left:2px;}.member-level-card{--level-color:#94a3b8;display:block;width:100%;margin:10px 0;padding:12px;border:1px solid color-mix(in srgb,var(--level-color) 25%,var(--border-light));border-radius:10px;background:linear-gradient(180deg,color-mix(in srgb,var(--level-color) 10%,#fff),rgba(255,255,255,.96));color:var(--text-primary);text-align:left;cursor:pointer;box-shadow:0 8px 22px color-mix(in srgb,var(--level-color) 10%,transparent);}.member-level-card:hover{border-color:color-mix(in srgb,var(--level-color) 46%,var(--border-light));}.member-level-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;}.member-level-title{font-weight:900;color:var(--level-color);}.member-level-icon{margin-right:4px;}.member-level-more{font-size:12px;color:var(--text-secondary);}.member-level-meter{height:8px;border-radius:999px;overflow:hidden;background:rgba(148,163,184,.24);margin-bottom:8px;}.member-level-meter span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--level-color),color-mix(in srgb,var(--level-color) 58%,#fff));}.member-level-meta{font-size:12px;line-height:1.55;color:var(--text-secondary);}.level-guide-dialog{width:min(560px,calc(100vw - 28px));}.level-guide-body{display:grid;gap:12px;padding:0;}.level-guide-desc{font-size:13px;line-height:1.65;color:var(--text-secondary);}.level-guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}.level-guide-item{--level-color:#94a3b8;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border:1px solid color-mix(in srgb,var(--level-color) 28%,var(--border-light));border-radius:8px;background:color-mix(in srgb,var(--level-color) 8%,#fff);}.level-guide-sample{display:inline-flex;align-items:center;gap:4px;min-width:82px;color:var(--level-color);font-weight:900;}.level-guide-item strong{color:var(--text-primary);font-size:13px;}body.dark .level-badge{background:linear-gradient(135deg,color-mix(in srgb,var(--level-color) 28%,#111827),color-mix(in srgb,var(--level-color) 16%,#111827));border-color:color-mix(in srgb,var(--level-color) 54%,rgba(255,255,255,.14));}body.dark .member-level-card{background:linear-gradient(180deg,color-mix(in srgb,var(--level-color) 16%,var(--bg-elevated)),var(--bg-elevated));border-color:color-mix(in srgb,var(--level-color) 34%,var(--border-light));}body.dark .level-guide-item{background:color-mix(in srgb,var(--level-color) 12%,var(--bg-elevated));border-color:color-mix(in srgb,var(--level-color) 30%,var(--border-light));}@media (max-width:620px){.level-guide-grid{grid-template-columns:1fr}.member-action-actions{grid-template-columns:repeat(2,minmax(0,1fr));}.member-action-actions .mini-btn{width:100%;}.level-badge-sm{font-size:10px;padding-inline:5px}.member-level-card{padding:10px}.member-level-head{align-items:flex-start;flex-direction:column;gap:3px}}

.member-action-avatar.relationship-avatar-fallback{display:grid;place-items:center;color:#fff;font-weight:800;font-size:20px;}

/* v60 backend sticky sidebar + invite settings polish */
@media (min-width:761px){.admin-shell .admin-sidebar{position:sticky!important;top:0!important;align-self:start!important;height:100dvh!important;max-height:100dvh!important;overflow-y:auto!important;overscroll-behavior:contain!important}.admin-shell .admin-main{min-width:0!important}}
.invite-code-settings-field .invite-code-box{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}.invite-code-settings-field .invite-code-box input{min-width:0}.invite-code-settings-field .invite-code-box button{white-space:nowrap}.invite-code-settings-field .invite-code-box input:nth-of-type(2){grid-column:1/2}.invite-code-settings-field .invite-code-box button:nth-of-type(2){grid-column:2/3}@media (max-width:720px){.invite-code-settings-field .invite-code-box{grid-template-columns:1fr}.invite-code-settings-field .invite-code-box input:nth-of-type(2),.invite-code-settings-field .invite-code-box button:nth-of-type(2){grid-column:auto}}


/* invite page alignment + invited users list */
.settings-section.active#settings-section-invite,
.settings-section.active[data-section="invite"]{padding:18px!important;}
.invite-code-settings-field{padding:18px!important;margin:0!important;display:grid!important;gap:12px!important;}
.invite-code-settings-field>.settings-field-label,
.invite-code-settings-field>.settings-field-desc{padding-left:0!important;margin-left:0!important;}
.invite-code-settings-field .invite-code-box{max-width:none!important;width:100%!important;}
.invite-code-settings-field .invite-code-input{height:46px!important;border-radius:8px!important;padding:0 14px!important;}
.invite-users-panel{margin-top:4px;padding-top:14px;border-top:1px solid var(--border-light);display:grid;gap:10px;}
.invite-users-head{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.invite-users-head strong{font-size:14px;font-weight:900;color:var(--text-primary);}
.invite-users-count{font-size:12px;color:var(--text-secondary);font-weight:700;}
.invite-users-list.relationship-list{min-height:0!important;max-height:360px!important;padding:0!important;display:grid;gap:8px;overflow:auto;}
.invite-user-item.relationship-item{grid-template-columns:auto minmax(0,1fr) auto!important;border-radius:10px!important;padding:10px!important;background:var(--bg-card)!important;}
.invite-user-main{gap:4px!important;}
.invite-user-meta{font-size:12px!important;color:var(--text-secondary)!important;}
.invite-user-actions .mini-btn{min-width:64px;}
.invite-users-pager{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding-top:2px;}
.invite-users-page-text{font-size:12px;color:var(--text-secondary);font-weight:700;min-width:78px;text-align:center;}
.invite-user-empty{padding:14px;border:1px dashed var(--border-light);border-radius:10px;background:var(--bg-panel);color:var(--text-secondary);font-size:13px;}
@media (max-width:720px){.invite-code-settings-field{padding:14px!important}.invite-user-item.relationship-item{grid-template-columns:auto minmax(0,1fr)!important}.invite-user-actions{grid-column:1/-1;justify-content:flex-start!important}.invite-users-pager{justify-content:space-between}.invite-users-page-text{flex:1}}

/* self-service invite code reset */
.invite-code-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:-4px;}
.invite-reset-btn{color:#b45309!important;border-color:rgba(180,83,9,.28)!important;background:rgba(255,247,237,.92)!important;}
.invite-reset-btn:hover:not(:disabled){background:rgba(254,215,170,.75)!important;}
.invite-reset-btn:disabled{opacity:.58;cursor:not-allowed;}
@media (max-width:720px){.invite-code-actions{justify-content:stretch}.invite-code-actions .invite-reset-btn{width:100%;}}


/* v76: about page / login welcome / footer cleanup */
.about-site-card{display:grid;gap:12px;padding:16px;border:1px solid var(--border-light);border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(248,250,252,.96));box-shadow:0 10px 28px rgba(15,23,42,.06)}
.about-site-image{display:block;width:100%;height:auto;max-width:var(--about-image-width,720px);max-height:var(--about-image-max-height,420px);object-fit:contain;border-radius:12px;border:1px solid var(--border-light);background:#fff}.about-site-card h5{margin:0;font-size:20px;line-height:1.25}.about-site-subtitle{font-size:14px;color:var(--text-secondary);font-weight:700}.about-site-desc{margin:0;white-space:pre-line;color:var(--text-secondary);line-height:1.75}.about-site-buttons{display:flex;gap:10px;flex-wrap:wrap}.about-site-buttons .btn{text-decoration:none}.about-site-meta{font-size:12px;color:var(--text-muted);border-top:1px solid var(--border-light);padding-top:10px}.about-site-footer-links{display:flex;gap:12px;flex-wrap:wrap;font-size:12px}.about-site-footer-links a{color:var(--accent);text-decoration:none;font-weight:700}.login-welcome-toast{position:fixed;z-index:8500;width:min(360px,calc(100vw - 28px));padding:14px 16px 14px 16px;border:1px solid rgba(99,102,241,.2);border-radius:16px;background:rgba(255,255,255,.96);box-shadow:0 22px 70px rgba(15,23,42,.22);display:grid;gap:8px;color:var(--text-primary);opacity:0;transform:translateY(12px) scale(.985);transition:opacity .22s ease,transform .22s ease;backdrop-filter:blur(10px)}.login-welcome-toast.show{opacity:1;transform:translateY(0) scale(1)}.login-welcome-right_bottom{right:18px;bottom:20px}.login-welcome-left_bottom{left:18px;bottom:20px}.login-welcome-top_center{left:50%;top:18px;transform:translate(-50%,-12px) scale(.985)}.login-welcome-top_center.show{transform:translate(-50%,0) scale(1)}.login-welcome-toast strong{font-size:15px;line-height:1.3}.login-welcome-toast p{margin:0;white-space:pre-line;font-size:13px;color:var(--text-secondary);line-height:1.55}.login-welcome-notice{display:grid;gap:3px;padding:10px;border-radius:12px;background:rgba(79,70,229,.07);font-size:13px;line-height:1.55}.login-welcome-notice b{color:var(--accent)}.login-welcome-notice span{color:var(--text-secondary);white-space:pre-line}.login-welcome-link{justify-self:start;color:var(--accent);font-weight:800;text-decoration:none;font-size:13px}.login-welcome-close{position:absolute;right:8px;top:8px;width:26px;height:26px;border:0;border-radius:999px;background:rgba(15,23,42,.06);color:var(--text-secondary);cursor:pointer;font-size:18px;line-height:1}#site-footer .footer-copyright-sub:empty{display:none!important}@media(max-width:700px){.login-welcome-right_bottom,.login-welcome-left_bottom{left:14px;right:14px;bottom:92px;width:auto}.login-welcome-top_center{left:14px;right:14px;top:14px;width:auto;transform:translateY(-12px) scale(.985)}.login-welcome-top_center.show{transform:translateY(0) scale(1)}}


/* v79: stabilize account settings modal size when switching left tabs */
#account-settings-modal.settings-modal-overlay:not(.hidden){
  align-items:center!important;
  justify-content:center!important;
}
#account-settings-modal .settings-modal-dialog.settings-modal-wide{
  width:min(940px, calc(100vw - 48px))!important;
  height:min(760px, calc(100dvh - 48px))!important;
  max-height:calc(100dvh - 48px)!important;
  min-height:560px!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
}
#account-settings-modal .settings-modal-header{
  flex:0 0 auto!important;
}
#account-settings-modal .settings-layout{
  flex:1 1 auto!important;
  width:100%!important;
  min-width:0!important;
  min-height:0!important;
  height:auto!important;
  overflow:hidden!important;
}
#account-settings-modal .settings-nav{
  min-width:0!important;
  min-height:0!important;
}
#account-settings-modal .settings-sections{
  width:100%!important;
  min-width:0!important;
  min-height:0!important;
  height:100%!important;
  overflow:auto!important;
  box-sizing:border-box!important;
}
#account-settings-modal .settings-sections>.settings-section{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  box-sizing:border-box!important;
}
#account-settings-modal .settings-sections>.settings-section.active{
  display:block!important;
  min-height:100%!important;
}
#account-settings-modal .settings-field,
#account-settings-modal .invite-code-settings-field,
#account-settings-modal .about-settings-card,
#account-settings-modal .login-welcome-toast,
#account-settings-modal input,
#account-settings-modal textarea,
#account-settings-modal select{
  max-width:100%!important;
}
@media (max-width:720px){
  #account-settings-modal.settings-modal-overlay:not(.hidden){
    align-items:stretch!important;
    justify-content:center!important;
    padding:8px!important;
    padding-top:calc(8px + env(safe-area-inset-top,0px))!important;
  }
  #account-settings-modal .settings-modal-dialog.settings-modal-wide{
    width:100%!important;
    height:calc(100dvh - 16px - env(safe-area-inset-top,0px))!important;
    min-height:0!important;
    max-height:calc(100dvh - 16px - env(safe-area-inset-top,0px))!important;
    border-radius:16px!important;
  }
  #account-settings-modal .settings-layout{
    display:flex!important;
    flex-direction:column!important;
  }
  #account-settings-modal .settings-nav{
    flex:0 0 auto!important;
  }
  #account-settings-modal .settings-sections{
    flex:1 1 auto!important;
    height:auto!important;
  }
}

/* ========================================================
   OVERRIDE CSS - Crisp Light & Deep Tech Dark (Constraints Met)
   ======================================================== */

:root {
  --radius-card: 6px;
  --radius-control: 4px;
  --radius-pill: 999px;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;
  --bg-page: #f8fafc;
  --bg-card: #ffffff;
  --border-light: #e2e8f0;
  --bg-panel: #f1f5f9;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --btn-secondary-bg: #ffffff;
  --btn-secondary-border: #cbd5e1;
  --shadow: 0 1px 3px rgba(15,23,42,0.06), 0 4px 12px rgba(15,23,42,0.04);
  --status-bg: #f8fafc;
  --status-border: #2563eb;
  --member-bg: #ffffff;
  --member-border: #e2e8f0;
  --input-bg: #ffffff;
  --download-btn-bg: #eff6ff;
  --vu-bg: #e2e8f0;
  --vu-fill: #2563eb;
}

body.dark {
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #64748b;
  --color-success: #10b981;
  --color-warning: #fbbf24;
  --color-danger: #ef4444;
  --bg-page: #080A0F;
  --bg-card: #0F141E;
  --bg-elevated: #151B27;
  --border-light: #1E293B;
  --bg-panel: #0B0F17;
  --accent: #3b82f6;
  --accent-hover: #60a5fa;
  --btn-secondary-bg: #0F141E;
  --btn-secondary-border: #1E293B;
  --shadow: 0 4px 12px rgba(0,0,0,0.6);
  --status-bg: #0B0F17;
  --status-border: #3b82f6;
  --member-bg: #0F141E;
  --member-border: #1E293B;
  --input-bg: #0B0F17;
  --download-btn-bg: #151B27;
  --vu-bg: #1E293B;
  --vu-fill: #3b82f6;
}

/* Base Body and Transitions */
body {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  transition: background-color 0.15s linear, color 0.15s linear;
}
body::before, body::after {
  display: none !important; /* Remove generic soft blur gradients for pure clean tech look */
}

/* Card, Inputs, Buttons */
.card, .login-section, .members-area, .device-panel, .room-chat-panel, .search-card, .create-form, .room-list {
  box-shadow: var(--shadow) !important;
  border: 1px solid var(--border-light) !important;
  background: var(--bg-card) !important;
  border-radius: var(--radius-card) !important;
}

.btn, .tab-btn, .btn-secondary, .logout-btn, .tab-aux-btn, .room-item, .audio-fx-toggle {
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.15s linear, border-color 0.15s linear !important;
  border-radius: var(--radius-control) !important;
}
.btn:hover:not(:disabled), .btn-secondary:hover:not(:disabled), .tab-aux-btn:hover, .logout-btn:hover {
  transform: translateY(-1px);
}
.btn:active:not(:disabled), .btn-secondary:active:not(:disabled), .tab-aux-btn:active, .logout-btn:active {
  transform: translateY(0);
}

/* Ensure Form Controls look crisp */
input, select, textarea {
  box-shadow: none !important;
  transition: border-color 0.15s linear, background-color 0.15s linear;
  border-radius: var(--radius-control) !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent) !important;
  outline: 1px solid var(--accent) !important;
}

/* Vanity IDs Restyling */
.public-id-badge.vanity {
  background: linear-gradient(135deg, #fef3c7, #fde68a) !important;
  color: #92400e !important;
  border-color: rgba(245, 158, 11, 0.4) !important;
}
body.dark .public-id-badge.vanity {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.1)) !important;
  color: #fcd34d !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
}
.public-id-badge.vanity-id {
  background: linear-gradient(135deg, #fef08a, #fbbf24, #f59e0b) !important;
  color: #78350f !important;
  border-color: rgba(217, 119, 6, 0.5) !important;
  font-weight: 900 !important;
}
body.dark .public-id-badge.vanity-id {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.3), rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.2)) !important;
  color: #fde68a !important;
  border-color: rgba(251, 191, 36, 0.4) !important;
}

/* Animations for vanity sheen */
.public-id-badge.vanity::after, .public-id-badge.vanity-id::after {
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.6), rgba(255,255,255,0)) !important;
  animation: tech-sheen 5.8s ease-in-out infinite !important;
  will-change: transform, opacity;
}
@keyframes tech-sheen {
  0%, 60% { transform: translateX(0) skewX(-20deg); opacity: 0; }
  66% { opacity: .72; }
  78% { transform: translateX(520%) skewX(-20deg); opacity: 0; }
  100% { transform: translateX(520%) skewX(-20deg); opacity: 0; }
}

/* Speaking Animation (Hardware Accelerated) */
.member-list li.speaking {
  position: relative;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  font-weight: 700;
  color: var(--accent);
}
.member-list li.speaking::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-control);
  background: var(--accent);
  opacity: 0.1;
  pointer-events: none;
}
.member-list li.speaking::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-control);
  box-shadow: 0 0 0 2px var(--accent);
  opacity: 1;
  animation: pulse-ring 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  pointer-events: none;
}
@keyframes pulse-ring {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.03); opacity: 0; }
}

/* Chat area styling */
.room-chat-bubble {
  border-radius: 6px !important;
  background: var(--bg-panel) !important;
  border: 1px solid var(--border-light) !important;
  color: var(--text-primary) !important;
}
.room-chat-item.self .room-chat-bubble {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #ffffff !important;
}
body.dark .room-chat-item.self .room-chat-bubble {
  background: var(--accent) !important;
  color: #ffffff !important;
}

/* Keep image messages transparent after the generic bubble override. */
.room-chat-bubble.has-image,
body.dark .room-chat-bubble.has-image,
.room-chat-item.self .room-chat-bubble.has-image,
body.dark .room-chat-item.self .room-chat-bubble.has-image {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--text-primary) !important;
  overflow: visible !important;
  box-shadow: none !important;
}
.room-chat-item.system .room-chat-bubble {
  background: var(--status-bg) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-light) !important;
}
.member-list li.speaking {
  border-color: rgba(37, 99, 235, 0.35) !important;
  background: rgba(37, 99, 235, 0.07) !important;
}
body.dark .member-list li.speaking {
  border-color: rgba(59, 130, 246, 0.36) !important;
  background: rgba(59, 130, 246, 0.12) !important;
}

/* Tabular Nums for VU meters and numbers */
.volume-value, .badge, #member-count, .vu-meter {
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
}

/* Mobile Optimizations - Constraint #6 */
@media (max-width: 980px) {
  .room-tabs-wrap { flex-wrap: nowrap !important; overflow-x: auto !important; padding-bottom: 8px !important; -webkit-overflow-scrolling: touch; }
  .room-tabs { flex-wrap: nowrap !important; min-width: max-content !important; }
  .device-row, .volume-row, .vu-row { flex-wrap: nowrap !important; }
  .device-row select, .volume-row input[type=range] { flex: 1 1 auto !important; min-width: 0 !important; }
  .control-grid { grid-template-columns: 1fr !important; }
  .room-password-row { flex-wrap: nowrap !important; overflow-x: auto !important; }
  .room-password-row input { flex: 1 1 100% !important; min-width: 0 !important; }
  .header-actions { flex-wrap: nowrap !important; overflow-x: auto !important; padding-bottom: 4px !important; -webkit-overflow-scrolling: touch; }
  .header-actions .btn, .header-actions .btn-secondary { white-space: nowrap !important; }
  .lobby-toolbar { grid-template-columns: 1fr !important; }
  .search-card { flex: 1 1 auto !important; min-width: 0 !important; overflow-x: auto !important; }
  
  /* Additional vertical scrollability for modals and tall elements */
  .login-section, .invite-dialog, .audio-settings-dialog, .announcement-dialog, .quick-join-choice-dialog {
    max-height: 90vh !important;
    overflow-y: auto !important;
  }
}
@media (max-width: 640px) {
  body { padding: 8px !important; }
  .card, .login-section, .device-panel, .members-area { padding: 14px !important; }
  .room-workspace { grid-template-areas: "controls" "chat" "members" !important; }
  input, select, textarea { font-size: 16px !important; /* Prevents iOS zoom */ }
  .room-exit-actions .btn, .room-title-actions .btn { flex: 1 1 auto !important; min-width: 0 !important; padding: 10px 8px !important; font-size: 13px !important; }
}

/* ========================================================
   v86 auditfix3: restore premium vanity badge contrast
   Scope: only public-id vanity / vanity-id badges.
   ======================================================== */
.public-id-badge.vanity,
.public-id-badge.vanity-id {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  transform: translateZ(0);
}
.public-id-badge.vanity {
  color: #8a3b00 !important;
  font-weight: 800 !important;
  letter-spacing: 0.015em !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) !important;
  background: linear-gradient(135deg, #fff7ed 0%, #fed7aa 46%, #fdba74 100%) !important;
  border-color: rgba(234, 88, 12, 0.58) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 -1px 0 rgba(154, 52, 18, 0.10),
    0 2px 6px rgba(234, 88, 12, 0.18) !important;
}
.public-id-badge.vanity-id {
  color: #5f2700 !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.58) !important;
  background: linear-gradient(135deg, #fff7ad 0%, #fde047 34%, #f59e0b 72%, #ea580c 100%) !important;
  border-color: rgba(180, 83, 9, 0.78) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    inset 0 -1px 0 rgba(120, 53, 15, 0.16),
    0 2px 7px rgba(217, 119, 6, 0.24),
    0 0 0 1px rgba(251, 191, 36, 0.20) !important;
}
.public-id-badge.vanity::after,
.public-id-badge.vanity-id::after {
  content: "" !important;
  position: absolute !important;
  inset: -45% auto -45% -70% !important;
  width: 42% !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: linear-gradient(105deg,
    transparent 0%,
    rgba(255,255,255,0) 30%,
    rgba(255,255,255,0.72) 50%,
    rgba(255,255,255,0) 70%,
    transparent 100%) !important;
  opacity: 0 !important;
  transform: translateX(-120%) skewX(-18deg) !important;
  animation: vanity-restore-sheen 4.8s ease-in-out infinite !important;
  will-change: transform, opacity;
}
.public-id-badge.vanity-id::after {
  animation-delay: 0.55s !important;
}
@keyframes vanity-restore-sheen {
  0%, 52% {
    transform: translateX(-130%) skewX(-18deg);
    opacity: 0;
  }
  62% {
    opacity: 0.62;
  }
  76%, 100% {
    transform: translateX(430%) skewX(-18deg);
    opacity: 0;
  }
}
body.dark .public-id-badge.vanity {
  color: #3b1d00 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.46) !important;
  background: linear-gradient(135deg, #ffedd5 0%, #fbbf24 48%, #d97706 100%) !important;
  border-color: rgba(251, 191, 36, 0.78) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -1px 0 rgba(120, 53, 15, 0.18),
    0 0 0 1px rgba(251, 191, 36, 0.20),
    0 0 12px rgba(251, 191, 36, 0.18) !important;
}
body.dark .public-id-badge.vanity-id {
  color: #271300 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) !important;
  background: linear-gradient(135deg, #fff0a3 0%, #facc15 36%, #f59e0b 72%, #c2410c 100%) !important;
  border-color: rgba(250, 204, 21, 0.86) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.70),
    inset 0 -1px 0 rgba(120, 53, 15, 0.20),
    0 0 0 1px rgba(250, 204, 21, 0.24),
    0 0 16px rgba(250, 204, 21, 0.22) !important;
}
@media (prefers-reduced-motion: reduce) {
  .public-id-badge.vanity::after,
  .public-id-badge.vanity-id::after {
    animation: none !important;
    opacity: 0 !important;
  }
}

/* ========================================================
   v86 auditfix4: light elevated surface variable fallback
   Prevent light-mode dialogs/dropdowns using var(--bg-elevated)
   from falling back to stale pre-v86 backgrounds.
   ======================================================== */
:root {
  --bg-elevated: #ffffff;
}

/* ========================================================
   v86 auditfix6: settings modal IA + social profile polish
   - Social profile belongs to Account/Profile.
   - Password and email binding belong to Security.
   ======================================================== */
#account-settings-modal .settings-account-profile-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:14px!important;
  margin-bottom:14px!important;
}
#account-settings-modal #profile-account-stats{
  grid-column:1/-1!important;
  border-radius:14px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(248,250,252,.78))!important;
  border:1px solid rgba(148,163,184,.22)!important;
  box-shadow:0 10px 26px rgba(15,23,42,.05)!important;
}
body.dark #account-settings-modal #profile-account-stats{
  background:linear-gradient(180deg,var(--bg-card),var(--bg-panel))!important;
  border-color:var(--border-light)!important;
  box-shadow:none!important;
}
#account-settings-modal .settings-account-profile-grid > div:not(#profile-account-stats){
  min-width:0!important;
  border:1px solid var(--border-light)!important;
  border-radius:14px!important;
  padding:16px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(248,250,252,.78))!important;
  box-shadow:0 10px 26px rgba(15,23,42,.05)!important;
}
body.dark #account-settings-modal .settings-account-profile-grid > div:not(#profile-account-stats){
  background:linear-gradient(180deg,var(--bg-card),var(--bg-panel))!important;
  box-shadow:none!important;
}
#account-settings-modal .settings-social-profile-card,
#account-settings-modal .social-account-box{
  margin-top:0!important;
  border-radius:14px!important;
  padding:18px!important;
  border:1px solid rgba(37,99,235,.18)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(248,250,252,.84))!important;
  box-shadow:0 14px 34px rgba(15,23,42,.06)!important;
}
body.dark #account-settings-modal .settings-social-profile-card,
body.dark #account-settings-modal .social-account-box{
  background:linear-gradient(180deg,var(--bg-card),var(--bg-panel))!important;
  border-color:rgba(96,165,250,.22)!important;
  box-shadow:none!important;
}
#account-settings-modal .social-account-box > strong{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  font-size:15px!important;
  font-weight:900!important;
  letter-spacing:-.01em!important;
  color:var(--text-primary)!important;
}
#account-settings-modal .social-account-box > strong::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--accent);
  box-shadow:0 0 0 4px rgba(37,99,235,.10);
}
#account-settings-modal .social-account-box .form-row{
  display:grid!important;
  gap:7px!important;
  margin:0!important;
}
#account-settings-modal .social-account-box textarea{
  width:100%!important;
  min-height:136px!important;
  resize:vertical!important;
  padding:13px 14px!important;
  line-height:1.65!important;
  border-radius:12px!important;
  background:var(--bg-card)!important;
}
body.dark #account-settings-modal .social-account-box textarea{
  background:var(--input-bg)!important;
}
#account-settings-modal .social-follow-box{
  border-radius:12px!important;
  padding:12px!important;
  background:var(--bg-card)!important;
}
body.dark #account-settings-modal .social-follow-box{
  background:var(--bg-panel)!important;
}
#account-settings-modal .settings-security-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:14px!important;
  margin-bottom:12px!important;
}
#account-settings-modal .settings-security-card{
  min-width:0!important;
  border-radius:14px!important;
  border:1px solid var(--border-light)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(248,250,252,.78))!important;
  box-shadow:0 10px 26px rgba(15,23,42,.05)!important;
  padding:16px!important;
}
body.dark #account-settings-modal .settings-security-card{
  background:linear-gradient(180deg,var(--bg-card),var(--bg-panel))!important;
  box-shadow:none!important;
}
#account-settings-modal .settings-security-card > div:not(.settings-field-label):not(.settings-field-desc){
  margin-top:12px!important;
}
#account-settings-modal .settings-security-card .form-row{
  margin-bottom:12px!important;
}
#account-settings-modal .settings-global-status{
  flex:0 0 auto!important;
  min-height:30px!important;
  margin:0!important;
  padding:8px 18px 12px!important;
  border-top:1px solid var(--border-light)!important;
  color:var(--text-secondary)!important;
  background:var(--bg-card)!important;
}
body.dark #account-settings-modal .settings-global-status{
  background:var(--bg-card)!important;
}
@media (max-width:820px){
  #account-settings-modal .settings-security-grid{
    grid-template-columns:1fr!important;
  }
  #account-settings-modal .settings-account-profile-grid > div:not(#profile-account-stats),
  #account-settings-modal .settings-security-card,
  #account-settings-modal .social-account-box{
    padding:14px!important;
  }
  #account-settings-modal .social-account-box textarea{
    min-height:124px!important;
  }
}

/* ========================================================
   v86 auditfix7: settings blacklist manager modal
   Keep blacklist management inside settings flow; no lobby/social tab jump.
   ======================================================== */
.blacklist-manager-modal.open{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:18px!important;
}
.blacklist-manager-dialog{
  width:min(680px,calc(100vw - 32px))!important;
  max-height:min(78vh,720px)!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  background:var(--bg-elevated)!important;
  border:1px solid var(--border-light)!important;
  border-radius:16px!important;
  box-shadow:0 26px 86px rgba(15,23,42,.22)!important;
}
.blacklist-manager-header{
  flex:0 0 auto!important;
  position:sticky!important;
  top:0!important;
  z-index:2!important;
  background:var(--bg-elevated)!important;
  border-bottom:1px solid var(--border-light)!important;
  padding:16px 18px!important;
}
.blacklist-manager-header h3{
  margin:0!important;
  font-size:18px!important;
  font-weight:850!important;
  letter-spacing:-.02em!important;
  color:var(--text-primary)!important;
}
.blacklist-manager-header p{
  margin:5px 0 0!important;
  font-size:13px!important;
  line-height:1.45!important;
  color:var(--text-secondary)!important;
}
.blacklist-manager-title-actions{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
}
.blacklist-manager-body{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow:auto!important;
  -webkit-overflow-scrolling:touch!important;
  padding:14px 16px 16px!important;
}
.blacklist-manager-status{
  min-height:20px!important;
  margin-bottom:10px!important;
  font-size:13px!important;
}
.blacklist-manager-status.error{
  color:var(--color-danger)!important;
}
.blacklist-manager-list.relationship-list{
  min-height:120px!important;
  max-height:none!important;
  display:grid!important;
  gap:10px!important;
  padding:0!important;
  overflow:visible!important;
}
.blacklist-manager-item.relationship-item{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:12px!important;
  padding:12px!important;
  border-radius:12px!important;
  background:var(--bg-card)!important;
  border:1px solid var(--border-light)!important;
  box-shadow:0 1px 3px rgba(15,23,42,.06)!important;
}
.blacklist-manager-signature{
  display:block!important;
  margin-top:4px!important;
  color:var(--text-secondary)!important;
}
.blacklist-empty{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:120px!important;
  border:1px dashed var(--border-light)!important;
  border-radius:12px!important;
  background:var(--bg-panel)!important;
}
body.dark .blacklist-manager-dialog,
body.dark .blacklist-manager-header{
  background:var(--bg-elevated)!important;
  border-color:var(--border-light)!important;
}
body.dark .blacklist-manager-item.relationship-item{
  background:var(--bg-card)!important;
  border-color:var(--border-light)!important;
  box-shadow:0 1px 3px rgba(0,0,0,.28)!important;
}
@media (max-width:760px){
  .blacklist-manager-modal.open{
    align-items:flex-end!important;
    padding:10px!important;
    padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))!important;
  }
  .blacklist-manager-dialog{
    width:100%!important;
    max-height:calc(88dvh - env(safe-area-inset-bottom,0px))!important;
    border-radius:18px 18px 0 0!important;
  }
  .blacklist-manager-header{
    padding:14px!important;
    align-items:flex-start!important;
  }
  .blacklist-manager-item.relationship-item{
    grid-template-columns:auto minmax(0,1fr)!important;
  }
  .blacklist-manager-item .relationship-actions{
    grid-column:1 / -1!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    width:100%!important;
  }
}

/* ========================================================
   v86 auditfix8: settings privacy IA polish
   Split signature/profile from online privacy controls.
   ======================================================== */
#account-settings-modal .settings-privacy-controls-card{
  display:grid!important;
  gap:12px!important;
  margin-bottom:12px!important;
  border-color:rgba(37,99,235,.16)!important;
}
#account-settings-modal .settings-privacy-controls-card > .settings-field-desc{
  margin-top:-4px!important;
  font-size:13px!important;
  line-height:1.55!important;
  color:var(--text-secondary)!important;
}
#account-settings-modal .settings-privacy-controls-card .form-row{
  display:grid!important;
  gap:7px!important;
  margin:0!important;
}
#account-settings-modal .settings-privacy-controls-card select{
  width:100%!important;
  min-height:42px!important;
  border-radius:10px!important;
}
#account-settings-modal .settings-privacy-controls-card .social-follow-box{
  margin:0!important;
  border-radius:12px!important;
}
#account-settings-modal .settings-privacy-controls-card .settings-privacy-save-btn,
#account-settings-modal .settings-social-profile-card .social-save-btn{
  justify-self:start!important;
  min-height:40px!important;
}
body.dark #account-settings-modal .settings-privacy-controls-card{
  border-color:rgba(96,165,250,.22)!important;
}
@media (max-width:760px){
  #account-settings-modal .settings-privacy-controls-card .settings-privacy-save-btn,
  #account-settings-modal .settings-social-profile-card .social-save-btn{
    width:100%!important;
    justify-self:stretch!important;
  }
}


/* ========================================================
   v86 auditfix17: current user card-level identity marker
   Keep the nickname clean; identify self without adding more badges.
   ======================================================== */
.member-list li.self {
  position: relative !important;
  border-color: rgba(88, 101, 242, 0.24) !important;
  background: linear-gradient(90deg, rgba(88, 101, 242, 0.13) 0%, rgba(88, 101, 242, 0.055) 54%, rgba(88, 101, 242, 0.035) 100%) !important;
  box-shadow:
    inset 3px 0 0 var(--accent),
    0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

.member-list li.self:hover {
  background: linear-gradient(90deg, rgba(88, 101, 242, 0.16) 0%, rgba(88, 101, 242, 0.075) 58%, rgba(88, 101, 242, 0.045) 100%) !important;
}

.member-list li.self .member-avatar {
  border-color: rgba(88, 101, 242, 0.54) !important;
  box-shadow:
    0 0 0 2px rgba(88, 101, 242, 0.14),
    0 1px 2px rgba(15, 23, 42, 0.08) !important;
}

body.dark .member-list li.self {
  border-color: rgba(99, 102, 241, 0.42) !important;
  background: linear-gradient(90deg, rgba(99, 102, 241, 0.22) 0%, rgba(99, 102, 241, 0.105) 58%, rgba(99, 102, 241, 0.065) 100%) !important;
  box-shadow:
    inset 3px 0 0 #818cf8,
    0 0 0 1px rgba(129, 140, 248, 0.08) !important;
}

body.dark .member-list li.self:hover {
  background: linear-gradient(90deg, rgba(99, 102, 241, 0.27) 0%, rgba(99, 102, 241, 0.13) 58%, rgba(99, 102, 241, 0.08) 100%) !important;
}

body.dark .member-list li.self .member-avatar {
  border-color: rgba(129, 140, 248, 0.76) !important;
  box-shadow:
    0 0 0 2px rgba(129, 140, 248, 0.18),
    0 0 12px rgba(129, 140, 248, 0.16) !important;
}


/* ========================================================
   v86 auditfix18: keep self marker and speaking state visible together
   ======================================================== */
.member-list li.self.speaking {
  border-color: rgba(37, 99, 235, 0.42) !important;
  background:
    linear-gradient(90deg, rgba(88, 101, 242, 0.16) 0%, rgba(37, 99, 235, 0.08) 54%, rgba(37, 99, 235, 0.045) 100%) !important;
  box-shadow:
    inset 3px 0 0 var(--accent),
    0 0 0 1px rgba(37, 99, 235, 0.08),
    0 1px 2px rgba(15, 23, 42, 0.04) !important;
}
.member-list li.self.speaking::after {
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.72) !important;
}
body.dark .member-list li.self.speaking {
  border-color: rgba(129, 140, 248, 0.62) !important;
  background:
    linear-gradient(90deg, rgba(129, 140, 248, 0.26) 0%, rgba(96, 165, 250, 0.14) 58%, rgba(96, 165, 250, 0.08) 100%) !important;
  box-shadow:
    inset 3px 0 0 #818cf8,
    0 0 0 1px rgba(129, 140, 248, 0.14),
    0 0 12px rgba(96, 165, 250, 0.12) !important;
}
body.dark .member-list li.self.speaking::after {
  box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.78) !important;
}


/* ========================================================
   v86 auditfix19: restore original vanity gold look
   Keep the original brighter gold + visible sheen feeling.
   Scope: public id vanity badges only.
   ======================================================== */
.public-id-badge.vanity,
.public-id-badge.vanity-id {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
}

.public-id-badge.vanity {
  color: #92400e !important;
  font-weight: 800 !important;
  letter-spacing: 0.015em !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.62) !important;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
  border-color: rgba(245, 158, 11, 0.48) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    inset 0 -1px 0 rgba(180, 83, 9, 0.10),
    0 2px 6px rgba(180, 83, 9, 0.14) !important;
}

.public-id-badge.vanity-id {
  color: #78350f !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.58) !important;
  background: linear-gradient(135deg, #fef08a 0%, #fbbf24 48%, #f59e0b 100%) !important;
  border-color: rgba(217, 119, 6, 0.62) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    inset 0 -1px 0 rgba(146, 64, 14, 0.18),
    0 2px 7px rgba(217, 119, 6, 0.22),
    0 0 0 1px rgba(251, 191, 36, 0.18) !important;
}

.public-id-badge.vanity::after,
.public-id-badge.vanity-id::after {
  content: "" !important;
  position: absolute !important;
  top: -42% !important;
  bottom: -42% !important;
  left: 0 !important;
  width: 42% !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.18) 28%,
    rgba(255, 255, 255, 0.88) 50%,
    rgba(255, 255, 255, 0.18) 72%,
    rgba(255, 255, 255, 0) 100%
  ) !important;
  transform: translateX(-230%) skewX(-18deg) !important;
  opacity: 0 !important;
  animation: vanity-original-gold-sheen 4.2s ease-in-out infinite !important;
  will-change: transform, opacity;
}

.public-id-badge.vanity-id::after {
  animation-delay: 0.55s !important;
}

@keyframes vanity-original-gold-sheen {
  0%, 44% {
    transform: translateX(-230%) skewX(-18deg);
    opacity: 0;
  }
  54% {
    opacity: 0.88;
  }
  66%, 100% {
    transform: translateX(340%) skewX(-18deg);
    opacity: 0;
  }
}

body.dark .public-id-badge.vanity {
  color: #3b1d00 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.42) !important;
  background: linear-gradient(135deg, #fff1b6 0%, #facc15 54%, #eab308 100%) !important;
  border-color: rgba(250, 204, 21, 0.72) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.66),
    0 0 0 1px rgba(250, 204, 21, 0.18),
    0 0 10px rgba(250, 204, 21, 0.16) !important;
}

body.dark .public-id-badge.vanity-id {
  color: #2b1600 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.40) !important;
  background: linear-gradient(135deg, #fff3a3 0%, #facc15 42%, #f59e0b 100%) !important;
  border-color: rgba(250, 204, 21, 0.82) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.66),
    inset 0 -1px 0 rgba(120, 53, 15, 0.20),
    0 0 0 1px rgba(250, 204, 21, 0.22),
    0 0 14px rgba(250, 204, 21, 0.26) !important;
}

@media (prefers-reduced-motion: reduce) {
  .public-id-badge.vanity::after,
  .public-id-badge.vanity-id::after {
    animation: none !important;
    opacity: 0 !important;
  }
}

/* ========================================================
   v86 auditfix20: original-style rich gold vanity restore
   Scope: only vanity / vanity-id public-id badges.
   Purpose: bring back the stronger old orange-gold member-badge feeling.
   ======================================================== */
.public-id-badge.vanity,
.public-id-badge.vanity-id {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  isolation: isolate !important;
  border-style: solid !important;
  border-width: 1px !important;
  border-radius: 7px !important;
  line-height: 1.15 !important;
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
}

.public-id-badge.vanity {
  color: #9a3412 !important;
  font-weight: 800 !important;
  letter-spacing: 0.012em !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) !important;
  background:
    linear-gradient(180deg, #fff1bf 0%, #ffd88a 46%, #ffbd63 100%) !important;
  border-color: rgba(249, 115, 22, 0.66) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    inset 0 -1px 0 rgba(154, 52, 18, 0.16),
    0 1px 2px rgba(180, 83, 9, 0.18) !important;
}

.public-id-badge.vanity-id {
  color: #7c2d12 !important;
  font-weight: 900 !important;
  letter-spacing: 0.018em !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.66) !important;
  background:
    linear-gradient(180deg, #fff7a8 0%, #ffe06a 28%, #ffc32f 58%, #f59e0b 100%) !important;
  border-color: rgba(234, 88, 12, 0.78) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    inset 0 -1px 0 rgba(146, 64, 14, 0.24),
    0 1px 2px rgba(180, 83, 9, 0.24),
    0 0 0 1px rgba(251, 191, 36, 0.24) !important;
}

.public-id-badge.vanity::before,
.public-id-badge.vanity-id::before {
  content: "" !important;
  position: absolute !important;
  left: 1px !important;
  right: 1px !important;
  top: 1px !important;
  height: 42% !important;
  z-index: 0 !important;
  pointer-events: none !important;
  border-radius: 6px 6px 4px 4px !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0)) !important;
  opacity: 0.78 !important;
}

.public-id-badge.vanity::after,
.public-id-badge.vanity-id::after {
  content: "" !important;
  position: absolute !important;
  top: -55% !important;
  bottom: -55% !important;
  left: -78% !important;
  width: 48% !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.10) 28%,
    rgba(255, 255, 255, 0.92) 50%,
    rgba(255, 255, 255, 0.14) 70%,
    rgba(255, 255, 255, 0) 100%
  ) !important;
  transform: translateX(0) skewX(-18deg) !important;
  opacity: 0 !important;
  animation: vanity-original-gold-sheen-v20 3.6s ease-in-out infinite !important;
  will-change: transform, opacity;
}

.public-id-badge.vanity-id::after {
  animation-delay: 0.42s !important;
}

@keyframes vanity-original-gold-sheen-v20 {
  0%, 42% {
    transform: translateX(0) skewX(-18deg);
    opacity: 0;
  }
  54% {
    opacity: 0.95;
  }
  68%, 100% {
    transform: translateX(440%) skewX(-18deg);
    opacity: 0;
  }
}

body.dark .public-id-badge.vanity {
  color: #3b1d00 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.50) !important;
  background:
    linear-gradient(180deg, #fff0a8 0%, #ffd052 48%, #f59e0b 100%) !important;
  border-color: rgba(250, 204, 21, 0.82) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.74),
    inset 0 -1px 0 rgba(120, 53, 15, 0.20),
    0 0 0 1px rgba(250, 204, 21, 0.22),
    0 0 10px rgba(250, 204, 21, 0.20) !important;
}

body.dark .public-id-badge.vanity-id {
  color: #2b1600 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.48) !important;
  background:
    linear-gradient(180deg, #fff6a6 0%, #ffdc55 30%, #ffc125 58%, #f59e0b 100%) !important;
  border-color: rgba(250, 204, 21, 0.90) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.76),
    inset 0 -1px 0 rgba(120, 53, 15, 0.24),
    0 0 0 1px rgba(250, 204, 21, 0.26),
    0 0 14px rgba(250, 204, 21, 0.28) !important;
}

@media (prefers-reduced-motion: reduce) {
  .public-id-badge.vanity::after,
  .public-id-badge.vanity-id::after {
    animation: none !important;
    opacity: 0 !important;
  }
}


/* ========================================================
   v86 auditfix21 lobby custom pages
   Dynamic admin-defined lobby navigation pages.
   ======================================================== */
.room-tabs-wrap {
  overflow: visible !important;
}
.room-tabs {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin !important;
}
.room-tabs .tab-btn {
  flex: 0 0 auto !important;
  width: auto !important;
  white-space: nowrap !important;
}
.lobby-custom-page-panel {
  min-height: 420px;
  padding: 18px;
  border: 1px solid var(--border-light);
  border-radius: 14px;
  background: var(--bg-card);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.lobby-custom-page-title {
  margin: 0 0 14px;
  color: var(--text-primary);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.lobby-custom-page-body {
  color: var(--text-primary);
  line-height: 1.7;
  overflow-x: auto;
}
.lobby-custom-page-body img,
.lobby-custom-page-body video,
.lobby-custom-page-body iframe {
  max-width: 100%;
}
.lobby-custom-page-frame {
  display: block;
  width: 100%;
  min-height: 620px;
  border: 0;
  border-radius: 12px;
  background: transparent;
}
body.dark .lobby-custom-page-panel {
  background: var(--bg-card);
  border-color: var(--border-light);
}
@media (max-width: 720px) {
  .room-tabs {
    display: flex !important;
    grid-template-columns: none !important;
    padding-bottom: 3px !important;
  }
  .room-tabs .tab-btn {
    min-width: max-content !important;
    padding-inline: 12px !important;
  }
  .lobby-custom-page-panel {
    min-height: 300px;
    padding: 12px;
    border-radius: 12px;
  }
  .lobby-custom-page-frame {
    min-height: 540px;
  }
}


/* ========================================================
   v86 auditfix23: vanity badge prestige gold restore
   Scope: ONLY front-end public-id vanity badges.
   Goal: stronger old orange-gold badge feeling with visible bevel + sheen.
   ======================================================== */
.public-id-badge.vanity,
.public-id-badge.vanity-id {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  overflow: hidden !important;
  isolation: isolate !important;
  border-style: solid !important;
  border-width: 1px !important;
  border-radius: 7px !important;
  line-height: 1.12 !important;
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
  font-variant-numeric: tabular-nums !important;
}

.public-id-badge.vanity {
  color: #a23a08 !important;
  font-weight: 900 !important;
  letter-spacing: 0.018em !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.82),
    0 0 1px rgba(120, 53, 15, 0.18) !important;
  background:
    linear-gradient(180deg, #fff7d5 0%, #ffe39a 30%, #ffc267 66%, #ff9f3f 100%) !important;
  border-color: rgba(234, 88, 12, 0.82) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    inset 0 0 0 1px rgba(255, 255, 255, 0.30),
    inset 0 -1px 0 rgba(154, 52, 18, 0.26),
    0 1px 2px rgba(180, 83, 9, 0.26),
    0 0 0 1px rgba(255, 190, 92, 0.22) !important;
}

.public-id-badge.vanity-id {
  color: #6f2506 !important;
  font-weight: 950 !important;
  letter-spacing: 0.022em !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.76),
    0 0 1px rgba(120, 53, 15, 0.28) !important;
  background:
    linear-gradient(180deg, #fff4a8 0%, #ffe064 24%, #ffc01f 52%, #f79400 78%, #dc7100 100%) !important;
  border-color: rgba(194, 65, 12, 0.88) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(120, 53, 15, 0.34),
    0 1px 2px rgba(180, 83, 9, 0.32),
    0 0 0 1px rgba(251, 191, 36, 0.34),
    0 0 9px rgba(251, 146, 60, 0.20) !important;
}

.public-id-badge.vanity::before,
.public-id-badge.vanity-id::before {
  content: "" !important;
  position: absolute !important;
  left: 1px !important;
  right: 1px !important;
  top: 1px !important;
  height: 46% !important;
  z-index: 0 !important;
  pointer-events: none !important;
  border-radius: 6px 6px 4px 4px !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0.08) 72%, rgba(255,255,255,0)) !important;
  opacity: 0.92 !important;
}

.public-id-badge.vanity::after,
.public-id-badge.vanity-id::after {
  content: "" !important;
  position: absolute !important;
  top: -65% !important;
  bottom: -65% !important;
  left: -86% !important;
  width: 44% !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: linear-gradient(
    105deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.08) 28%,
    rgba(255,255,255,0.96) 48%,
    rgba(255,246,196,0.56) 56%,
    rgba(255,255,255,0.10) 70%,
    rgba(255,255,255,0) 100%
  ) !important;
  transform: translateX(0) skewX(-18deg) !important;
  opacity: 0 !important;
  animation: vanity-prestige-gold-sheen-v23 3.15s ease-in-out infinite !important;
  will-change: transform, opacity;
}

.public-id-badge.vanity-id::after {
  animation-delay: .34s !important;
}

@keyframes vanity-prestige-gold-sheen-v23 {
  0%, 36% {
    transform: translateX(0) skewX(-18deg);
    opacity: 0;
  }
  47% {
    opacity: .98;
  }
  63%, 100% {
    transform: translateX(470%) skewX(-18deg);
    opacity: 0;
  }
}

body.dark .public-id-badge.vanity {
  color: #3b1600 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.58) !important;
  background:
    linear-gradient(180deg, #fff1ad 0%, #ffd767 34%, #ffae2b 72%, #e87500 100%) !important;
  border-color: rgba(251, 191, 36, 0.90) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    inset 0 -1px 0 rgba(120, 53, 15, 0.28),
    0 0 0 1px rgba(250, 204, 21, 0.28),
    0 0 12px rgba(251, 191, 36, 0.30) !important;
}

body.dark .public-id-badge.vanity-id {
  color: #2b1200 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.56) !important;
  background:
    linear-gradient(180deg, #fff6a1 0%, #ffdf4f 24%, #ffbd1e 54%, #f59e0b 78%, #d66b00 100%) !important;
  border-color: rgba(250, 204, 21, 0.95) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.80),
    inset 0 -1px 0 rgba(120, 53, 15, 0.34),
    0 0 0 1px rgba(250, 204, 21, 0.32),
    0 0 16px rgba(250, 204, 21, 0.36) !important;
}

@media (prefers-reduced-motion: reduce) {
  .public-id-badge.vanity::after,
  .public-id-badge.vanity-id::after {
    animation: none !important;
    opacity: 0 !important;
  }
}


/* ========================================================
   v86 auditfix24: vanity badge soft champagne gold restore
   Scope: ONLY front-end public-id vanity badges.
   Goal: restore the older light-gold / champagne badge feeling,
   not the heavy orange-gold look.
   ======================================================== */
.public-id-badge.vanity,
.public-id-badge.vanity-id {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  overflow: hidden !important;
  isolation: isolate !important;
  border-style: solid !important;
  border-width: 1px !important;
  border-radius: 7px !important;
  line-height: 1.12 !important;
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
  font-variant-numeric: tabular-nums !important;
}

.public-id-badge.vanity {
  color: #a45108 !important;
  font-weight: 800 !important;
  letter-spacing: 0.012em !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.72) !important;
  background:
    linear-gradient(180deg, #fffaf0 0%, #fff0bf 36%, #ffd98a 72%, #ffc56a 100%) !important;
  border-color: rgba(245, 158, 11, .52) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 -1px 0 rgba(180,83,9,.10),
    0 1px 1px rgba(180,83,9,.10),
    0 0 0 1px rgba(255,214,128,.16) !important;
}

.public-id-badge.vanity-id {
  color: #7a3a05 !important;
  font-weight: 900 !important;
  letter-spacing: 0.016em !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.68) !important;
  background:
    linear-gradient(180deg, #fff8cc 0%, #ffe990 32%, #ffd15c 68%, #f5a623 100%) !important;
  border-color: rgba(217, 119, 6, .58) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.90),
    inset 0 -1px 0 rgba(154,52,18,.14),
    0 1px 2px rgba(180,83,9,.14),
    0 0 0 1px rgba(251,191,36,.18) !important;
}

.public-id-badge.vanity::before,
.public-id-badge.vanity-id::before {
  content: "" !important;
  position: absolute !important;
  left: 1px !important;
  right: 1px !important;
  top: 1px !important;
  height: 44% !important;
  z-index: 0 !important;
  pointer-events: none !important;
  border-radius: 6px 6px 4px 4px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.76), rgba(255,255,255,.16) 72%, rgba(255,255,255,0)) !important;
  opacity: .86 !important;
}

.public-id-badge.vanity::after,
.public-id-badge.vanity-id::after {
  content: "" !important;
  position: absolute !important;
  top: -55% !important;
  bottom: -55% !important;
  left: -80% !important;
  width: 34% !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: linear-gradient(
    105deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.06) 30%,
    rgba(255,255,255,.62) 48%,
    rgba(255,246,199,.34) 58%,
    rgba(255,255,255,.06) 70%,
    rgba(255,255,255,0) 100%
  ) !important;
  transform: translateX(0) skewX(-18deg) !important;
  opacity: 0 !important;
  animation: vanity-soft-gold-sheen-v24 4.6s ease-in-out infinite !important;
  will-change: transform, opacity;
}

.public-id-badge.vanity-id::after {
  animation-delay: .42s !important;
}

@keyframes vanity-soft-gold-sheen-v24 {
  0%, 46% {
    transform: translateX(0) skewX(-18deg);
    opacity: 0;
  }
  56% {
    opacity: .74;
  }
  72%, 100% {
    transform: translateX(500%) skewX(-18deg);
    opacity: 0;
  }
}

body.dark .public-id-badge.vanity {
  color: #ffd989 !important;
  text-shadow: 0 1px 0 rgba(42,20,0,.70) !important;
  background:
    linear-gradient(180deg, rgba(255,244,196,.30) 0%, rgba(250,204,94,.25) 38%, rgba(217,119,6,.20) 100%) !important;
  border-color: rgba(251,191,36,.52) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 0 0 1px rgba(250,204,21,.14),
    0 0 10px rgba(250,204,21,.12) !important;
}

body.dark .public-id-badge.vanity-id {
  color: #3b1a00 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.50) !important;
  background:
    linear-gradient(180deg, #fff2b8 0%, #ffdf7a 34%, #f9bd43 70%, #e89320 100%) !important;
  border-color: rgba(250,204,21,.64) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.64),
    inset 0 -1px 0 rgba(120,53,15,.16),
    0 0 0 1px rgba(250,204,21,.18),
    0 0 12px rgba(250,204,21,.16) !important;
}

@media (prefers-reduced-motion: reduce) {
  .public-id-badge.vanity::after,
  .public-id-badge.vanity-id::after {
    animation: none !important;
    opacity: 0 !important;
  }
}

/* ========================================================
   v86 auditfix25: custom page external URL iframe polish
   ======================================================== */
.lobby-custom-page-url-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 12px;
  padding: 8px 10px;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: var(--bg-panel);
  color: var(--text-secondary);
  font-size: 12px;
}
.lobby-custom-page-url-hint a {
  flex: 0 0 auto;
  color: var(--accent);
  font-weight: 800;
  text-decoration: none;
}
.lobby-custom-page-url-hint a:hover {
  text-decoration: underline;
}
.lobby-custom-page-frame-url {
  min-height: 720px;
  background: #fff;
}
body.dark .lobby-custom-page-url-hint {
  background: var(--bg-panel);
  border-color: var(--border-light);
}
@media (max-width: 720px) {
  .lobby-custom-page-url-hint {
    align-items: flex-start;
    flex-direction: column;
  }
  .lobby-custom-page-frame-url {
    min-height: 620px;
  }
}

/* ========================================================
   v86 auditfix26: restore classic light-gold vanity badges
   Scope: ONLY front-end public-id vanity badges.
   Reference: user's older preferred soft-gold member-card style.
   ======================================================== */
.public-id-badge.vanity,
.public-id-badge.vanity-id {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  overflow: hidden !important;
  isolation: isolate !important;
  min-height: 22px !important;
  padding: 2px 9px !important;
  border-radius: 7px !important;
  border-style: solid !important;
  border-width: 1px !important;
  line-height: 1.1 !important;
  font-size: 12px !important;
  letter-spacing: 0.01em !important;
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
}

.public-id-badge.vanity {
  color: #b45309 !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .72) !important;
  background:
    linear-gradient(180deg, #fffdf7 0%, #fff2cf 46%, #ffe4aa 100%) !important;
  border-color: rgba(245, 158, 11, .68) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    inset 0 -1px 0 rgba(245, 158, 11, .12),
    0 1px 1px rgba(180, 83, 9, .10) !important;
}

.public-id-badge.vanity-id {
  color: #7c2d12 !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .62) !important;
  background:
    linear-gradient(180deg, #fff7c2 0%, #ffe28a 36%, #ffc44d 72%, #f6a11a 100%) !important;
  border-color: rgba(217, 119, 6, .78) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .94),
    inset 0 -1px 0 rgba(154, 52, 18, .20),
    0 1px 2px rgba(180, 83, 9, .18),
    0 0 0 1px rgba(255, 221, 138, .20) !important;
}

.public-id-badge.vanity::before,
.public-id-badge.vanity-id::before {
  content: "" !important;
  position: absolute !important;
  left: 1px !important;
  right: 1px !important;
  top: 1px !important;
  height: 45% !important;
  z-index: 0 !important;
  pointer-events: none !important;
  border-radius: 6px 6px 4px 4px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .22) 76%, rgba(255, 255, 255, 0)) !important;
  opacity: .82 !important;
}

.public-id-badge.vanity::after,
.public-id-badge.vanity-id::after {
  content: "" !important;
  position: absolute !important;
  top: -55% !important;
  bottom: -55% !important;
  left: -80% !important;
  width: 30% !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: linear-gradient(
    105deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, .06) 30%,
    rgba(255, 255, 255, .68) 48%,
    rgba(255, 248, 210, .35) 58%,
    rgba(255, 255, 255, .06) 70%,
    rgba(255, 255, 255, 0) 100%
  ) !important;
  transform: translateX(0) skewX(-18deg) !important;
  opacity: 0 !important;
  animation: vanity-classic-soft-sheen-v26 4.2s ease-in-out infinite !important;
  will-change: transform, opacity;
}

.public-id-badge.vanity-id::after {
  animation-delay: .36s !important;
}

@keyframes vanity-classic-soft-sheen-v26 {
  0%, 44% {
    transform: translateX(0) skewX(-18deg);
    opacity: 0;
  }
  56% {
    opacity: .76;
  }
  72%, 100% {
    transform: translateX(520%) skewX(-18deg);
    opacity: 0;
  }
}

body.dark .public-id-badge.vanity {
  color: #ffd98c !important;
  text-shadow: 0 1px 0 rgba(44, 20, 0, .68) !important;
  background:
    linear-gradient(180deg, rgba(255, 246, 211, .22) 0%, rgba(255, 226, 138, .18) 48%, rgba(245, 158, 11, .15) 100%) !important;
  border-color: rgba(245, 158, 11, .56) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 0 0 1px rgba(245, 158, 11, .12),
    0 0 8px rgba(245, 158, 11, .10) !important;
}

body.dark .public-id-badge.vanity-id {
  color: #4a2100 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.54) !important;
  background:
    linear-gradient(180deg, #fff4bd 0%, #ffdd7a 36%, #ffc04a 72%, #ee9a18 100%) !important;
  border-color: rgba(250, 204, 21, .72) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.68),
    inset 0 -1px 0 rgba(120,53,15,.18),
    0 0 0 1px rgba(250,204,21,.18),
    0 0 11px rgba(250,204,21,.16) !important;
}

@media (prefers-reduced-motion: reduce) {
  .public-id-badge.vanity::after,
  .public-id-badge.vanity-id::after {
    animation: none !important;
    opacity: 0 !important;
  }
}

/* ========================================================
   v86 f28: classic slim soft-gold vanity badges
   Goal: closer to the old clean light-gold look, not orange/retro.
   Scope: ONLY front-end vanity / vanity-id public-id badges.
   ======================================================== */
.public-id-badge.vanity,
.public-id-badge.vanity-id {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  overflow: hidden !important;
  isolation: isolate !important;
  min-height: 20px !important;
  height: 20px !important;
  padding: 1px 8px !important;
  border-radius: 7px !important;
  border: 1px solid rgba(245, 158, 11, .58) !important;
  line-height: 18px !important;
  font-size: 12px !important;
  font-family: inherit !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: 0 !important;
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
  filter: none !important;
}

/* Small "靓号" tag: pale champagne, clean orange-gold border. */
.public-id-badge.vanity {
  color: #b45309 !important;
  font-weight: 750 !important;
  text-shadow: none !important;
  background:
    linear-gradient(180deg, #fffdf7 0%, #fff6e7 46%, #ffedd0 100%) !important;
  border-color: rgba(249, 115, 22, .58) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .94),
    0 1px 1px rgba(180, 83, 9, .10) !important;
}

/* ID tag: old-style soft light gold, slightly brighter than the label. */
.public-id-badge.vanity-id {
  color: #7c3a08 !important;
  font-weight: 850 !important;
  text-shadow: none !important;
  background:
    linear-gradient(180deg, #fff9dc 0%, #ffeca8 45%, #ffd675 100%) !important;
  border-color: rgba(245, 158, 11, .72) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .90),
    inset 0 -1px 0 rgba(245, 158, 11, .10),
    0 1px 2px rgba(180, 83, 9, .13) !important;
}

/* Disable earlier chunky glossy cap; keep only a narrow clean sheen. */
.public-id-badge.vanity::before,
.public-id-badge.vanity-id::before {
  content: none !important;
  display: none !important;
}

.public-id-badge.vanity::after,
.public-id-badge.vanity-id::after {
  content: "" !important;
  position: absolute !important;
  top: -45% !important;
  bottom: -45% !important;
  left: -65% !important;
  width: 24% !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: linear-gradient(
    105deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, .05) 32%,
    rgba(255, 255, 255, .62) 50%,
    rgba(255, 250, 225, .18) 62%,
    rgba(255, 255, 255, 0) 100%
  ) !important;
  opacity: 0 !important;
  transform: translateX(-120%) skewX(-18deg) !important;
  animation: vanity-classic-slim-sheen-f28 4.8s ease-in-out infinite !important;
  will-change: transform, opacity;
}
.public-id-badge.vanity-id::after {
  animation-delay: .35s !important;
}

@keyframes vanity-classic-slim-sheen-f28 {
  0%, 50% {
    transform: translateX(-130%) skewX(-18deg);
    opacity: 0;
  }
  61% {
    opacity: .54;
  }
  76%, 100% {
    transform: translateX(540%) skewX(-18deg);
    opacity: 0;
  }
}

body.dark .public-id-badge.vanity {
  color: #ffd894 !important;
  text-shadow: none !important;
  background:
    linear-gradient(180deg, rgba(255, 248, 221, .20) 0%, rgba(255, 236, 168, .16) 48%, rgba(245, 158, 11, .13) 100%) !important;
  border-color: rgba(245, 158, 11, .52) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    0 0 0 1px rgba(245,158,11,.09),
    0 0 7px rgba(245,158,11,.10) !important;
}
body.dark .public-id-badge.vanity-id {
  color: #3d1d00 !important;
  text-shadow: none !important;
  background:
    linear-gradient(180deg, #fff7d4 0%, #ffe89f 45%, #ffd16b 100%) !important;
  border-color: rgba(250, 204, 21, .66) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.66),
    inset 0 -1px 0 rgba(120,53,15,.12),
    0 0 0 1px rgba(250,204,21,.14),
    0 0 9px rgba(250,204,21,.14) !important;
}

@media (prefers-reduced-motion: reduce) {
  .public-id-badge.vanity::after,
  .public-id-badge.vanity-id::after {
    animation: none !important;
    opacity: 0 !important;
  }
}

/* ========================================================
   v86 f31: restore visible vanity/id sheen only
   Scope: front-end vanity / vanity-id public-id badges.
   ======================================================== */
.public-id-badge.vanity,
.public-id-badge.vanity-id {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}
.public-id-badge.vanity::after,
.public-id-badge.vanity-id::after {
  content: "" !important;
  position: absolute !important;
  top: -46% !important;
  bottom: -46% !important;
  left: -72% !important;
  width: 44% !important;
  z-index: 3 !important;
  pointer-events: none !important;
  background: linear-gradient(
    105deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.10) 32%,
    rgba(255,255,255,.86) 49%,
    rgba(255,246,210,.30) 62%,
    rgba(255,255,255,0) 100%
  ) !important;
  opacity: 0 !important;
  transform: translate3d(-145%,0,0) skewX(-18deg) !important;
  animation: vanity-visible-sheen-f31 3.35s ease-in-out infinite !important;
  will-change: transform, opacity !important;
}
.public-id-badge.vanity-id::after {
  animation-delay: .28s !important;
}
@keyframes vanity-visible-sheen-f31 {
  0%, 34% {
    transform: translate3d(-150%,0,0) skewX(-18deg);
    opacity: 0;
  }
  45% {
    opacity: .78;
  }
  59%, 100% {
    transform: translate3d(430%,0,0) skewX(-18deg);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .public-id-badge.vanity::after,
  .public-id-badge.vanity-id::after {
    animation: none !important;
    opacity: 0 !important;
  }
}


/* f40: announcement style selector + about page layout cleanup */
.announcement-modal.announcement-style-plain .announcement-dialog{max-width:620px;border-radius:10px!important;box-shadow:0 18px 44px rgba(15,23,42,.18)!important}.announcement-modal.announcement-style-plain .announcement-content{padding:0;border:0;background:transparent;font-size:15px;line-height:1.82;white-space:pre-line}.announcement-modal.announcement-style-plain .announcement-actions{border-top:1px solid var(--border-light);padding-top:14px;margin-top:18px}.announcement-modal.announcement-style-compact .announcement-dialog{max-width:560px;border-radius:8px!important;padding:18px 20px!important}.announcement-modal.announcement-style-compact .announcement-content{font-size:14px;line-height:1.62;white-space:pre-line}.announcement-modal.announcement-style-compact .announcement-actions{gap:8px;margin-top:14px}.announcement-modal.announcement-style-compact .announcement-btn{min-height:38px;padding:0 16px}.announcement-modal.announcement-style-cards .announcement-dialog{max-width:720px;border-radius:14px!important}.announcement-modal.announcement-style-cards .announcement-content{display:grid;gap:10px;white-space:normal}.announcement-content-card{padding:12px 14px;border:1px solid var(--border-light);border-radius:10px;background:rgba(248,250,252,.86);line-height:1.7;color:var(--text-secondary);white-space:pre-line}.announcement-modal.announcement-style-classic .announcement-content{white-space:pre-line}.about-site-card{align-items:start}.about-site-image{width:100%;max-width:var(--about-image-width,720px);max-height:var(--about-image-max-height,420px);object-fit:contain;justify-self:start;border-radius:10px}.about-site-image-unlimited{max-height:none!important}.about-site-meta,.about-site-footer-links{display:none!important}
body.dark .announcement-content-card{background:rgba(255,255,255,.055);border-color:var(--border-light);color:var(--text-secondary)}

/* f44: official/backend invite code block */
.invite-code-official-box{margin-top:14px;padding:12px;border:1px solid rgba(148,163,184,.28);border-radius:14px;background:rgba(248,250,252,.72);}
.invite-code-official-title{display:block;margin-bottom:4px;font-size:13px;color:#0f172a;}
.invite-code-official-box .settings-field-desc{margin-bottom:8px;}

/* ========================================================
   f51: mobile front-end top bar polish
   Fixes the mobile header where the login/account button could be clipped.
   Scope: public front-end only.
   ======================================================== */
@media (max-width: 820px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body {
    padding: 0 !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }

  #app,
  .app {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    overflow: visible !important;
  }

  .header.app-nav,
  .header {
    position: sticky !important;
    top: 0 !important;
    z-index: 9200 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
    min-height: 54px !important;
    margin: -10px -10px 10px !important;
    padding: calc(8px + env(safe-area-inset-top, 0px)) 10px 8px !important;
    background: rgba(248, 250, 252, 0.98) !important;
    border-bottom: 1px solid var(--border-light) !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .06) !important;
    overflow: visible !important;
  }

  body.dark .header.app-nav,
  body.dark .header {
    background: rgba(28, 28, 30, 0.98) !important;
  }

  .brand-block,
  .header h1 {
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
    overflow: hidden !important;
  }

  #site-title {
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #site-title .brand-name {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 18px !important;
    line-height: 1.15 !important;
  }

  #site-title #site-subtitle-badge,
  .brand-caption {
    display: none !important;
  }

  .brand-mark {
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px !important;
    border-radius: 10px !important;
  }

  .header-actions {
    grid-column: 2 !important;
    justify-self: end !important;
    position: relative !important;
    z-index: 9210 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
    flex-wrap: nowrap !important;
  }

  .header-actions .v30-theme-switch {
    display: none !important;
  }

  #open-login-btn,
  .user-info,
  .user-menu-trigger {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    flex: 0 0 auto !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  #open-login-btn,
  .user-menu-trigger {
    width: auto !important;
    min-width: 66px !important;
    max-width: 96px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 10px !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.1 !important;
    font-size: 14px !important;
  }

  .user-info {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #display-username {
    max-width: 56px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .user-menu-dropdown {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    top: calc(60px + env(safe-area-inset-top, 0px)) !important;
    max-height: calc(100dvh - 80px - env(safe-area-inset-top, 0px)) !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 13000 !important;
  }

  .room-tabs-wrap {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    overflow: visible !important;
    padding: 10px !important;
  }

  .room-tabs {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    overflow: visible !important;
  }

  .tab-btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    padding: 0 4px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }

  .tab-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .tab-actions .tab-aux-btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    padding: 0 8px !important;
    white-space: nowrap !important;
  }

  .lobby-toolbar,
  .room-list {
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  .room-list .room-item {
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
}

@media (max-width: 380px) {
  #site-title .brand-name {
    font-size: 16px !important;
  }

  .brand-mark {
    width: 30px !important;
    height: 30px !important;
    flex-basis: 30px !important;
  }

  #open-login-btn,
  .user-menu-trigger {
    min-width: 58px !important;
    max-width: 82px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 8px !important;
    font-size: 13px !important;
  }

  .tab-btn {
    font-size: 12px !important;
    padding: 0 2px !important;
  }
}


.vip-red-name{font-weight:900!important;text-shadow:0 0 0 rgba(0,0,0,0);}
.vip-badge{display:inline-flex;align-items:center;justify-content:center;min-height:18px;padding:1px 7px;border:1px solid;border-radius:999px;font-size:11px;font-weight:900;line-height:1;margin-left:4px;vertical-align:middle;white-space:nowrap;}
.vip-badge-sm{min-height:16px;padding:1px 6px;font-size:10px;}
.vip-center-box{display:grid;gap:12px;}
.vip-center-status{padding:12px;border:1px solid var(--border-light);border-radius:12px;background:var(--surface-soft);}
.vip-package-list{display:grid;gap:10px;}
.vip-package-card{padding:12px;border:1px solid var(--border-light);border-radius:12px;background:var(--surface-card);display:grid;gap:8px;}
.vip-pay-actions{display:flex;gap:8px;flex-wrap:wrap;}
.vip-order-list{display:grid;gap:4px;}

/* v114 VIP 权益矩阵与会员特殊选项 */
.vip-special-options{margin-top:12px;padding:12px;border:1px solid var(--line,#dbe5f0);border-radius:12px;background:#fbfdff;display:grid;gap:8px;}
.vip-special-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border:1px solid #e5eaf0;border-radius:10px;background:#fff;font-weight:700;}
.vip-special-toggle input{width:auto!important;min-width:auto!important;}
#vip-management .vip-permission-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:8px 0 10px;}
#vip-management .vip-level-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;}
#vip-management .vip-level-editor h5{grid-column:1/-1;margin:8px 0 4px;color:#175cd3;font-size:13px;}
#vip-management .vip-settings-grid{grid-template-columns:1fr!important;}
#vip-management .vip-level-grid{grid-template-columns:repeat(auto-fit,minmax(360px,1fr))!important;}
@media (max-width:720px){#vip-management .vip-level-grid{grid-template-columns:1fr!important;}#vip-management .vip-permission-grid{grid-template-columns:1fr!important;}}

/* v120 会员中心 */
.vip-center-field{padding:0!important;border:0!important;background:transparent!important;}
.vip-center-box{display:grid;gap:18px;position:relative;}
.vip-center-status{padding:22px;border:1px solid var(--border-light);border-left:4px solid var(--vip-current-color,#5865f2);border-radius:14px;background:var(--bg-card);box-shadow:0 10px 26px rgba(15,23,42,.06);}
.vip-status-top{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;}
.vip-status-eyebrow{margin-bottom:5px;color:var(--text-muted);font-size:12px;font-weight:800;letter-spacing:.08em;}
.vip-status-title{display:block;color:var(--vip-current-color,#5865f2);font-size:25px;line-height:1.2;letter-spacing:-.02em;}
.vip-status-meta{margin-top:7px;color:var(--text-secondary);font-size:13px;line-height:1.5;}
.vip-status-badge{display:inline-flex;align-items:center;justify-content:center;min-width:58px;padding:7px 11px;border:1px solid color-mix(in srgb,var(--vip-current-color,#5865f2) 34%,transparent);border-radius:999px;background:color-mix(in srgb,var(--vip-current-color,#5865f2) 9%,var(--bg-card));color:var(--vip-current-color,#5865f2);font-size:12px;font-weight:900;white-space:nowrap;}
.vip-benefit-list,.vip-package-benefits{display:flex;gap:7px;flex-wrap:wrap;}
.vip-benefit-list{margin-top:16px;padding-top:15px;border-top:1px solid var(--border-light);}
.vip-benefit-chip{display:inline-flex;align-items:center;min-height:25px;padding:4px 9px;border:1px solid color-mix(in srgb,var(--vip-plan-color,#5865f2) 24%,var(--border-light));border-radius:999px;background:color-mix(in srgb,var(--vip-plan-color,#5865f2) 6%,var(--bg-card));color:var(--text-secondary);font-size:11px;font-weight:700;line-height:1.2;}
.vip-center-section{padding:18px;border:1px solid var(--border-light);border-radius:14px;background:var(--bg-card);}
.vip-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px;}
.vip-section-title{display:block;color:var(--text-primary);font-size:15px;line-height:1.35;}
.vip-section-desc{margin-top:4px;color:var(--text-muted);font-size:12px;line-height:1.5;}
.vip-package-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;}
.vip-package-card{position:relative;display:flex;flex-direction:column;gap:10px;min-width:0;padding:16px;border:1px solid var(--border-light);border-top:3px solid var(--vip-plan-color,#5865f2);border-radius:13px;background:var(--bg-card);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;}
.vip-package-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--vip-plan-color,#5865f2) 38%,var(--border-light));box-shadow:0 12px 28px rgba(15,23,42,.08);}
.vip-package-card.is-featured{border-color:color-mix(in srgb,var(--vip-plan-color,#5865f2) 58%,var(--border-light));box-shadow:0 12px 30px color-mix(in srgb,var(--vip-plan-color,#5865f2) 18%,transparent);background:color-mix(in srgb,var(--vip-plan-color,#5865f2) 3%,var(--bg-card));}
.vip-package-card.is-current{background:color-mix(in srgb,var(--vip-plan-color,#5865f2) 4%,var(--bg-card));}
.vip-package-top{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.vip-package-level{color:var(--vip-plan-color,#5865f2);font-size:12px;font-weight:900;}
.vip-package-flag{padding:3px 7px;border-radius:999px;background:var(--bg-panel);color:var(--text-muted);font-size:10px;font-weight:800;white-space:nowrap;}
.vip-package-card.is-featured .vip-package-flag,.vip-package-card.is-current .vip-package-flag{background:color-mix(in srgb,var(--vip-plan-color,#5865f2) 16%,var(--bg-card));color:var(--vip-plan-color,#5865f2);border:1px solid color-mix(in srgb,var(--vip-plan-color,#5865f2) 30%,var(--border-light));}
.vip-package-name{color:var(--text-primary);font-size:16px;line-height:1.35;}
.vip-package-price{display:flex;align-items:baseline;color:var(--vip-plan-color,#5865f2);}
.vip-package-price>span:first-child{font-size:13px;font-weight:800;}
.vip-package-price strong{font-size:28px;letter-spacing:-.04em;}
.vip-package-price>span:last-child{margin-left:5px;color:var(--text-muted);font-size:11px;font-weight:600;}
.vip-package-desc{min-height:36px;color:var(--text-secondary);font-size:12px;line-height:1.5;}
.vip-package-benefits{align-content:flex-start;min-height:32px;}
.vip-pay-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:7px;margin-top:auto;padding-top:4px;}
.vip-pay-btn,.vip-order-btn,.vip-refresh-btn{border:1px solid var(--border-light);border-radius:8px;background:var(--bg-card);color:var(--text-secondary);font:inherit;font-size:12px;font-weight:800;cursor:pointer;transition:background .16s ease,border-color .16s ease,color .16s ease,opacity .16s ease;}
.vip-pay-btn{min-height:38px;padding:8px 10px;}
.vip-pay-btn:hover:not(:disabled),.vip-order-btn:hover:not(:disabled),.vip-refresh-btn:hover:not(:disabled){border-color:var(--vip-plan-color,var(--accent));color:var(--vip-plan-color,var(--accent));}
.vip-pay-btn.is-primary{border-color:var(--vip-plan-color,#5865f2);background:var(--vip-plan-color,#5865f2);color:#fff;}
.vip-pay-btn.is-primary:hover:not(:disabled){color:#fff;filter:brightness(.96);}
.vip-pay-btn:disabled{cursor:not-allowed;opacity:.46;}
.vip-package-unavailable{grid-column:1/-1;color:var(--text-muted);font-size:11px;line-height:1.45;text-align:center;}
.vip-center-box.is-busy .vip-pay-btn:not(:disabled){pointer-events:none;opacity:.62;}
.vip-special-options{margin:0;padding:18px;border:1px solid var(--border-light);border-radius:14px;background:var(--bg-card);display:grid;gap:0;}
.vip-special-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px;}
.vip-special-toggle{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:76px;padding:14px;border:1px solid var(--border-light);border-radius:11px;background:var(--bg-panel);font-weight:400;cursor:pointer;}
.vip-special-copy{display:grid;gap:4px;min-width:0;}
.vip-special-copy strong{color:var(--text-primary);font-size:13px;}
.vip-special-copy>span{color:var(--text-muted);font-size:11px;line-height:1.45;}
.vip-special-toggle input{position:absolute;width:1px!important;height:1px!important;min-width:0!important;opacity:0;pointer-events:none;}
.vip-special-switch{position:relative;flex:0 0 42px;width:42px;height:24px;border-radius:999px;background:#aeb5c0;transition:background .18s ease;}
.vip-special-switch::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(15,23,42,.24);transition:transform .18s ease;}
.vip-special-toggle input:checked+.vip-special-switch{background:var(--accent);}
.vip-special-toggle input:checked+.vip-special-switch::after{transform:translateX(18px);}
.vip-special-toggle input:focus-visible+.vip-special-switch{outline:2px solid var(--accent);outline-offset:3px;}
.vip-special-toggle input:disabled+.vip-special-switch{opacity:.5;}
 .vip-invisible-summary-card{cursor:default;}
.vip-invisible-summary-card .vip-special-copy>span{font-size:11px;line-height:1.5;}
@media (min-width:761px){.vip-anti-mute-toggle{grid-column:1;}.vip-invisible-summary-card{grid-column:2;}}
.vip-special-save-state{min-height:17px;margin-top:8px;color:var(--text-muted);font-size:11px;text-align:right;}
.vip-special-save-state.is-success{color:var(--color-success);}
.vip-special-save-state.is-error{color:var(--color-danger);}
.vip-invisible-state-line{grid-column:1/-1;min-height:auto;margin-top:-2px;padding:8px 10px;border:1px dashed var(--border-light);border-radius:9px;background:rgba(79,101,224,.045);text-align:left;line-height:1.55;}
body.dark .vip-invisible-state-line{background:rgba(99,102,241,.10);}

.vip-order-list{display:grid;gap:0;}
.vip-order-rows{display:grid;gap:8px;}
.vip-order-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;align-items:center;gap:12px;padding:11px 12px;border:1px solid var(--border-light);border-radius:10px;background:var(--bg-panel);}
.vip-order-main{display:grid;gap:3px;min-width:0;}
.vip-order-main strong{overflow:hidden;color:var(--text-primary);font-size:12px;text-overflow:ellipsis;white-space:nowrap;}
.vip-order-meta{overflow:hidden;color:var(--text-muted);font-size:10px;text-overflow:ellipsis;white-space:nowrap;}
.vip-order-amount{color:var(--text-primary);font-size:12px;white-space:nowrap;}
.vip-order-status{padding:4px 8px;border-radius:999px;font-size:10px;font-weight:800;white-space:nowrap;}
.vip-order-status.is-paid{background:rgba(22,163,74,.10);color:#15803d;}
.vip-order-status.is-pending{background:rgba(217,161,59,.13);color:#a16207;}
.vip-order-status.is-closed{background:rgba(100,116,139,.12);color:var(--text-muted);}
.vip-order-actions{display:flex;gap:6px;}
.vip-order-btn{min-height:29px;padding:5px 8px;}
.vip-order-btn.is-primary{border-color:var(--accent);color:var(--accent);}
.vip-refresh-btn{justify-self:end;min-height:32px;padding:6px 10px;}
body.dark .vip-center-status,body.dark .vip-center-section,body.dark .vip-package-card,body.dark .vip-special-options{background:var(--bg-card);}
body.dark .vip-special-toggle,body.dark .vip-order-row{background:var(--bg-panel);}
body.dark .vip-order-status.is-paid{color:#4ade80;}body.dark .vip-order-status.is-pending{color:#facc15;}
@media (max-width:760px){.vip-center-status,.vip-center-section,.vip-special-options{padding:15px}.vip-package-list{grid-template-columns:1fr}.vip-special-controls{grid-template-columns:1fr}.vip-order-row{grid-template-columns:minmax(0,1fr) auto}.vip-order-status{justify-self:start}.vip-order-actions{justify-self:end}.vip-status-title{font-size:22px}}

/* v130 站内支付弹窗：金额兜底修复 */
/* v131 支付宝保存：空 returnUrl/notifyUrl 自动按前台域名生成 */
.vip-payment-modal{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(15,23,42,.52);backdrop-filter:blur(8px);}
.vip-payment-card{position:relative;width:min(430px,calc(100vw - 28px));max-height:calc(100vh - 28px);overflow:auto;padding:22px;border:1px solid rgba(226,232,240,.86);border-radius:20px;background:var(--bg-card,#fff);box-shadow:0 24px 80px rgba(15,23,42,.28);text-align:center;}
.vip-payment-close{position:absolute;top:12px;right:12px;width:32px;height:32px;border:1px solid var(--border-light,#dbe3ee);border-radius:50%;background:var(--bg-panel,#f8fafc);color:var(--text-muted,#64748b);font-size:20px;line-height:1;cursor:pointer;}
.vip-payment-close:hover{color:var(--text-primary,#111827);border-color:var(--accent,#5865f2);}
.vip-payment-head{display:flex;align-items:center;gap:12px;margin-right:28px;text-align:left;}
.vip-payment-icon{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,var(--accent,#5865f2),color-mix(in srgb,var(--accent,#5865f2) 68%,#22c55e));color:#fff;font-weight:900;font-size:18px;box-shadow:0 10px 28px color-mix(in srgb,var(--accent,#5865f2) 26%,transparent);}
.vip-payment-head strong{display:block;color:var(--text-primary,#111827);font-size:17px;line-height:1.3;}
.vip-payment-head span{display:block;margin-top:3px;color:var(--text-muted,#64748b);font-size:12px;line-height:1.4;}
.vip-payment-amount{display:flex;align-items:baseline;justify-content:center;margin:18px 0 14px;color:var(--text-primary,#111827);}
.vip-payment-amount span{font-size:18px;font-weight:900;}
.vip-payment-amount strong{font-size:42px;line-height:1;letter-spacing:-.05em;}
.vip-payment-qr-wrap{display:grid;place-items:center;min-height:246px;margin:0 auto 14px;padding:14px;border:1px solid var(--border-light,#dbe3ee);border-radius:18px;background:var(--bg-panel,#f8fafc);}
.vip-payment-qr{width:232px;height:232px;object-fit:contain;border-radius:10px;background:#fff;box-shadow:0 6px 20px rgba(15,23,42,.08);}
.vip-payment-frame{width:100%;height:260px;border:0;border-radius:12px;background:#fff;}
.vip-payment-fallback{padding:10px;color:var(--text-muted,#64748b);font-size:12px;line-height:1.5;}
.vip-payment-qr-wrap.is-cashier-link{min-height:150px;gap:10px;background:linear-gradient(180deg,var(--bg-panel,#f8fafc),color-mix(in srgb,var(--bg-panel,#f8fafc) 82%,#fff));}
.vip-payment-qr-wrap.is-cashier-link .vip-payment-fallback{display:block;padding:18px 12px;color:var(--text-secondary,#475569);font-size:13px;}

.vip-payment-tip{color:var(--text-secondary,#475569);font-size:13px;line-height:1.55;}
.vip-payment-order{margin-top:8px;color:var(--text-muted,#64748b);font-size:11px;word-break:break-all;}
.vip-payment-state{margin-top:10px;min-height:20px;color:var(--text-muted,#64748b);font-size:12px;font-weight:800;}
.vip-payment-state.is-success{color:var(--color-success,#16a34a);}
.vip-payment-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px;}
.vip-payment-actions button{min-height:38px;border:1px solid var(--border-light,#dbe3ee);border-radius:10px;background:var(--bg-card,#fff);color:var(--text-secondary,#475569);font:inherit;font-size:12px;font-weight:900;cursor:pointer;}
.vip-payment-actions button:first-child{border-color:var(--accent,#5865f2);background:var(--accent,#5865f2);color:#fff;}
.vip-payment-actions button:disabled{opacity:.45;cursor:not-allowed;}
body.dark .vip-payment-modal{background:rgba(2,6,23,.68);}body.dark .vip-payment-card{background:var(--bg-card);}body.dark .vip-payment-qr-wrap{background:var(--bg-panel);}
@media (max-width:520px){.vip-payment-card{padding:18px;border-radius:18px}.vip-payment-amount strong{font-size:36px}.vip-payment-qr{width:210px;height:210px}.vip-payment-qr-wrap{min-height:224px}.vip-payment-actions{grid-template-columns:1fr}}

/* v133 支付 notifyUrl 保存：历史相对路径按留空处理，避免支付宝开关保存被 /api 回调地址卡死 */

/* v137 右上角会员入口 */
.vip-header-entry{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 14px;border:1px solid #d9a441;border-radius:6px;background:#fff8e8;color:#8a5a00;font:inherit;font-size:13px;font-weight:800;cursor:pointer;white-space:nowrap;box-shadow:none}.vip-header-entry:hover{background:#ffefc2;border-color:#c88b20}.vip-header-entry.is-active{border-color:#dc2626;background:#fff1f2;color:#b91c1c}body.dark .vip-header-entry{border-color:rgba(245,190,72,.55);background:rgba(245,158,11,.12);color:#f8d477}body.dark .vip-header-entry.is-active{border-color:rgba(248,113,113,.55);background:rgba(239,68,68,.12);color:#fca5a5}@media(max-width:640px){.vip-header-entry{min-height:34px;padding:0 10px;font-size:12px}}

/* v204 - Redesigned Login Modal & Captcha Luxury Aesthetics */
.login-section {
  width: min(440px, 100%) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.98)) !important;
  border: 1px solid rgba(226, 232, 240, 0.8) !important;
  border-radius: 24px !important;
  padding: 34px 30px 28px !important;
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.7) inset, 0 10px 30px rgba(99, 102, 241, 0.08) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}
body.dark .login-section {
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.88), rgba(30, 41, 59, 0.95)) !important;
  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  box-shadow: 0 35px 90px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 10px 35px rgba(99, 102, 241, 0.15) !important;
}
.login-hero {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  margin-bottom: 26px !important;
}
.login-hero-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: linear-gradient(135deg, #6366f1 0%, #3b82f6 50%, #8b5cf6 100%);
  color: #fff;
  font-size: 30px;
  margin-bottom: 16px;
  box-shadow: 0 12px 28px rgba(99, 102, 241, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.25) inset;
  transform: rotate(-4deg) translateY(0);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.login-section:hover .login-hero-badge {
  transform: rotate(0deg) scale(1.08) translateY(-2px);
  box-shadow: 0 16px 36px rgba(99, 102, 241, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.4) inset;
}
.login-hero h3 {
  font-size: 1.6rem !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
  color: var(--text-primary) !important;
  margin: 0 0 8px !important;
}
body.dark .login-hero h3 {
  background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.login-hero p {
  font-size: 0.94rem !important;
  color: var(--text-secondary) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}
.login-input input:not(.captcha-card-box input):not(.captcha-box input) {
  height: 50px !important;
  padding: 0 18px !important;
  border: 1.5px solid var(--border-light, rgba(148, 163, 184, 0.28)) !important;
  border-radius: 14px !important;
  background: var(--input-bg, #fff) !important;
  color: var(--text-primary) !important;
  font-size: 0.98rem !important;
  font-weight: 500 !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.03) inset !important;
}
body.dark .login-input input:not(.captcha-card-box input):not(.captcha-box input) {
  background: rgba(15, 23, 42, 0.65) !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25) inset !important;
}
.login-input input:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.22), 0 2px 6px rgba(0,0,0,0.05) inset !important;
  outline: none !important;
  background: var(--input-bg, #fff) !important;
}
body.dark .login-input input:focus {
  background: rgba(15, 23, 42, 0.9) !important;
  border-color: #818cf8 !important;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.3), 0 2px 8px rgba(0,0,0,0.3) inset !important;
}
.login-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  align-items: stretch !important;
  margin-top: 16px !important;
}
.login-actions .guest-hint, #guest-hint {
  display: block !important;
  text-align: center !important;
  font-size: 0.86rem !important;
  color: var(--text-secondary, #94a3b8) !important;
  margin: 0 !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  order: 2 !important;
}
#login-btn, #login-email-code-login-btn {
  width: 100% !important;
  height: 50px !important;
  padding: 0 28px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #6366f1 0%, #3b82f6 50%, #4f46e5 100%) !important;
  background-size: 200% 200% !important;
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 1.05rem !important;
  letter-spacing: 0.04em !important;
  border: none !important;
  box-shadow: 0 10px 25px rgba(99, 102, 241, 0.38), 0 0 0 1px rgba(255, 255, 255, 0.2) inset !important;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  cursor: pointer !important;
  order: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#login-btn:hover, #login-email-code-login-btn:hover {
  transform: translateY(-2px) scale(1.01) !important;
  box-shadow: 0 15px 35px rgba(99, 102, 241, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.3) inset !important;
  background-position: 100% 0 !important;
}
#login-btn:active, #login-email-code-login-btn:active {
  transform: translateY(0) scale(0.99) !important;
  box-shadow: 0 6px 15px rgba(99, 102, 241, 0.4) !important;
}

/* Universal High-Tech Captcha Box Styling */
.captcha-card-box, .captcha-box {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 14px 18px !important;
  margin: 12px 0 16px !important;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(59, 130, 246, 0.04)) !important;
  border: 1px solid rgba(99, 102, 241, 0.25) !important;
  border-radius: 16px !important;
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.06), 0 0 0 1px rgba(255, 255, 255, 0.4) inset !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
body.dark .captcha-card-box, body.dark .captcha-box, body.dark .admin-login-card .captcha-box {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.75), rgba(15, 23, 42, 0.85)) !important;
  border-color: rgba(99, 102, 241, 0.35) !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.06) inset !important;
}
.captcha-card-box:hover, .captcha-box:hover {
  border-color: rgba(99, 102, 241, 0.55) !important;
  box-shadow: 0 10px 28px rgba(99, 102, 241, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.1) inset !important;
  transform: translateY(-1px);
}
.captcha-question-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif !important;
  color: #6366f1 !important;
  letter-spacing: 0.04em !important;
}
body.dark .captcha-question-pill {
  color: #818cf8 !important;
}
.captcha-badge-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(59, 130, 246, 0.15)) !important;
  border: 1px solid rgba(99, 102, 241, 0.35) !important;
  font-size: 16px !important;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2) !important;
}
.captcha-card-box input, .captcha-box input {
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
  border: 1.5px solid var(--border-light, rgba(148, 163, 184, 0.28)) !important;
  background: var(--input-bg, #fff) !important;
  color: var(--text-primary) !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  text-align: center !important;
  width: 110px !important;
  margin: 0 !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.03) inset !important;
}
body.dark .captcha-card-box input, body.dark .captcha-box input {
  background: rgba(15, 23, 42, 0.7) !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25) inset !important;
}
.captcha-card-box input:focus, .captcha-box input:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25), 0 2px 6px rgba(0,0,0,0.05) inset !important;
  outline: none !important;
}
body.dark .captcha-card-box input:focus, body.dark .captcha-box input:focus {
  border-color: #818cf8 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.35), 0 2px 8px rgba(0,0,0,0.3) inset !important;
}
.captcha-refresh-btn, .captcha-box button, #login-email-captcha-refresh, #profile-bind-captcha-refresh {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 40px !important;
  padding: 0 16px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(99, 102, 241, 0.35) !important;
  color: #4f46e5 !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
}
body.dark .captcha-refresh-btn, body.dark .captcha-box button, body.dark #login-email-captcha-refresh, body.dark #profile-bind-captcha-refresh {
  background: rgba(30, 41, 59, 0.85) !important;
  border-color: rgba(99, 102, 241, 0.45) !important;
  color: #818cf8 !important;
}
.captcha-refresh-btn:hover, .captcha-box button:hover, #login-email-captcha-refresh:hover, #profile-bind-captcha-refresh:hover {
  background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
  color: #fff !important;
  border-color: #6366f1 !important;
  transform: translateY(-1px) scale(1.03) !important;
  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.35) !important;
}
.captcha-refresh-btn:active, .captcha-box button:active {
  transform: scale(0.97) !important;
}
/* v204 fix: restore mobile bottom-sheet border-radius */
@media (max-width: 768px) {
  .login-section {
    border-radius: 24px 24px 0 0 !important;
    padding: 28px 20px 24px !important;
  }
}

/* v204 fix: admin login card dark mode & luxury styling */
body.dark .admin-login-card {
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.88), rgba(30, 41, 59, 0.95)) !important;
  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  border-radius: 24px !important;
  padding: 34px 30px 28px !important;
  box-shadow: 0 35px 90px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 10px 35px rgba(99, 102, 241, 0.15) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}
body.dark .admin-login-card h2 {
  font-size: 1.6rem !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
  background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 8px !important;
}
body.dark .admin-login-card label {
  color: #cbd5e1 !important;
  font-weight: 700 !important;
  font-size: 0.92rem !important;
  margin-top: 14px !important;
}
body.dark .admin-login-card p,
body.dark .admin-login-card .muted {
  color: #94a3b8 !important;
}
body.dark .admin-login-card input[type="text"],
body.dark .admin-login-card input[type="password"],
body.dark .admin-login-card input[type="number"] {
  height: 50px !important;
  padding: 0 18px !important;
  background: rgba(15, 23, 42, 0.65) !important;
  border: 1.5px solid rgba(148, 163, 184, 0.22) !important;
  border-radius: 14px !important;
  color: #fff !important;
  font-size: 0.98rem !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25) inset !important;
}
body.dark .admin-login-card input[type="text"]:focus,
body.dark .admin-login-card input[type="password"]:focus,
body.dark .admin-login-card input[type="number"]:focus {
  background: rgba(15, 23, 42, 0.9) !important;
  border-color: #818cf8 !important;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.3), 0 2px 8px rgba(0,0,0,0.3) inset !important;
  outline: none !important;
}
body.dark .admin-login-card button[type="submit"] {
  width: 100% !important;
  height: 50px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #6366f1 0%, #3b82f6 50%, #4f46e5 100%) !important;
  background-size: 200% 200% !important;
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 1.05rem !important;
  border: none !important;
  box-shadow: 0 10px 25px rgba(99, 102, 241, 0.38), 0 0 0 1px rgba(255, 255, 255, 0.2) inset !important;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  cursor: pointer !important;
  margin-top: 18px !important;
}
body.dark .admin-login-card button[type="submit"]:hover {
  transform: translateY(-2px) scale(1.01) !important;
  box-shadow: 0 15px 35px rgba(99, 102, 241, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.3) inset !important;
  background-position: 100% 0 !important;
}
body.dark .admin-login-card a {
  color: #818cf8 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
body.dark .admin-login-card a:hover {
  color: #a5b4fc !important;
  text-decoration: underline !important;
}

/* --- Aurora Glassmorphism Slider Captcha --- */
.slider-captcha-box {
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 16px;
  margin: 14px 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}
.slider-img-wrap {
  position: relative;
  width: 100%;
  max-width: 300px;
  height: 150px;
  margin: 0 auto;
  border-radius: 8px;
  overflow: hidden;
  background: #1e293b;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.slider-bg-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.slider-slice-img {
  position: absolute;
  left: 0;
  top: 0;
  width: 60px;
  height: 60px;
  z-index: 2;
  cursor: grab;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.65));
  will-change: left;
}
.slider-slice-img.resetting {
  transition: left 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.slider-track {
  position: relative;
  width: 100%;
  max-width: 300px;
  height: 40px;
  margin: 14px auto 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.2);
}
.slider-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.25), rgba(129, 140, 248, 0.45));
  border-radius: 20px 0 0 20px;
  will-change: width;
}
.slider-fill.resetting {
  transition: width 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.slider-thumb {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #38bdf8, #818cf8);
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  z-index: 3;
  will-change: left, transform;
  color: #fff;
  font-weight: bold;
}
.slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.08);
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.slider-thumb.resetting {
  transition: left 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.slider-text {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.65);
  font-size: 13px;
  pointer-events: none;
  user-select: none;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.slider-refresh {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.25s ease;
}
.slider-refresh:hover {
  background: rgba(30, 41, 59, 0.9);
  transform: rotate(180deg) scale(1.1);
  border-color: rgba(56, 189, 248, 0.6);
}
.slider-status {
  margin-top: 8px;
  font-size: 12px;
  text-align: center;
  min-height: 18px;
  transition: color 0.3s ease;
  color: var(--text-secondary);
}
.slider-status.success {
  color: #34d399;
  font-weight: 600;
  text-shadow: 0 0 10px rgba(52, 211, 153, 0.4);
}
.slider-status.error {
  color: #f87171;
  font-weight: 600;
  text-shadow: 0 0 10px rgba(248, 113, 113, 0.4);
}

/* ========================================================
   f60: Aurora Glassmorphism Announcement Redesign
   High-end, premium tech aesthetic with glowing borders,
   custom icon markers, glassmorphism filters, and polished buttons.
   ======================================================== */

/* Announcement Modal Backdrop */
.announcement-modal {
  background: rgba(11, 15, 25, 0.72) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  transition: opacity 0.4s ease !important;
}

/* Announcement Card Dialog */
.announcement-dialog {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.85) 0%, rgba(30, 41, 59, 0.8) 100%) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 24px !important;
  box-shadow: 
    0 25px 50px -12px rgba(0, 0, 0, 0.5),
    0 0 40px rgba(99, 102, 241, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  padding: 36px 30px !important;
  animation: announcementEntrance 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  position: relative !important;
  overflow: hidden !important;
}

@keyframes announcementEntrance {
  from {
    transform: scale(0.92) translateY(20px);
    opacity: 0;
  }
  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

/* Glowing background ambient element */
.announcement-dialog::before {
  content: "" !important;
  position: absolute !important;
  top: -60px !important;
  left: -60px !important;
  width: 150px !important;
  height: 150px !important;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.3) 0%, transparent 70%) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Announcement Header / Title */
.announcement-dialog h3 {
  position: relative !important;
  z-index: 1 !important;
  margin: 0 0 20px !important;
  font-size: 1.55rem !important;
  font-weight: 850 !important;
  letter-spacing: -0.5px !important;
  background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Beautiful Icon prefix in Title */
.announcement-dialog h3::before {
  content: "📢" !important;
  font-size: 1.45rem !important;
  filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.6)) !important;
  display: inline-block !important;
  animation: announcementShake 4s ease-in-out infinite !important;
}

@keyframes announcementShake {
  0%, 100% { transform: rotate(0); }
  5%, 15% { transform: rotate(-8deg); }
  10%, 20% { transform: rotate(8deg); }
  25% { transform: rotate(0); }
}

/* Content Box Wrapper */
.announcement-content {
  position: relative !important;
  z-index: 1 !important;
  color: #e2e8f0 !important;
  font-size: 0.98rem !important;
  line-height: 1.8 !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 16px !important;
  padding: 22px !important;
  max-height: 380px !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent !important;
}

.announcement-content::-webkit-scrollbar {
  width: 6px !important;
}
.announcement-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15) !important;
  border-radius: 99px !important;
}

/* Button Actions Layout */
.announcement-actions {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
  margin-top: 26px !important;
}

/* Polished Premium Buttons */
.announcement-btn {
  min-width: 120px !important;
  height: 44px !important;
  padding: 0 24px !important;
  border-radius: 12px !important;
  font-size: 0.94rem !important;
  font-weight: 750 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  border: 1px solid transparent !important;
  outline: none !important;
  user-select: none !important;
}

/* Primary Button Styling */
.announcement-btn:not(.announcement-btn-secondary):not(.announcement-btn-danger) {
  background: linear-gradient(135deg, #6366f1 0%, #3b82f6 100%) !important;
  color: #ffffff !important;
  box-shadow: 
    0 4px 14px rgba(99, 102, 241, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.announcement-btn:not(.announcement-btn-secondary):not(.announcement-btn-danger):hover {
  transform: translateY(-2px) !important;
  box-shadow: 
    0 8px 25px rgba(99, 102, 241, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  background: linear-gradient(135deg, #4f46e5 0%, #2563eb 100%) !important;
}

/* Secondary Button Styling */
.announcement-btn-secondary {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #e2e8f0 !important;
  box-shadow: none !important;
}

.announcement-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

/* Danger Button Styling */
.announcement-btn-danger {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.3) !important;
}

.announcement-btn-danger:hover {
  background: linear-gradient(135deg, #f87171 0%, #b91c1c 100%) !important;
  box-shadow: 0 8px 25px rgba(239, 68, 68, 0.45) !important;
  transform: translateY(-2px) !important;
}

/* Click feedback */
.announcement-btn:active {
  transform: translateY(0) !important;
  opacity: 0.9 !important;
}

/* Cards Layout Content Variant Support */
.announcement-modal.announcement-style-cards .announcement-content-card {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 12px !important;
  color: #cbd5e1 !important;
  padding: 16px !important;
  transition: background 0.3s ease !important;
}

.announcement-modal.announcement-style-cards .announcement-content-card:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

/* Mobile responsive fixes */
@media (max-width: 640px) {
  .announcement-dialog {
    padding: 28px 20px !important;
    border-radius: 20px 20px 0 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 0 !important;
  }
  
  .announcement-modal {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .announcement-actions {
    flex-direction: column !important;
    gap: 10px !important;
    justify-content: stretch !important;
  }

  .announcement-btn {
    width: 100% !important;
  }
}
/* v204 effective UI overrides: keep after the compact global modal reset */
#announcement-modal.announcement-modal {
  background: rgba(11, 15, 25, 0.72) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
#announcement-modal .announcement-dialog {
  width: min(560px, calc(100vw - 32px)) !important;
  max-height: min(88vh, 720px) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.94), rgba(248,250,252,0.88)) !important;
  color: #172033 !important;
  border: 1px solid rgba(148,163,184,0.22) !important;
  border-radius: 24px !important;
  box-shadow: 0 30px 80px rgba(15,23,42,0.34), 0 0 0 1px rgba(255,255,255,0.62) inset !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
}
body.dark #announcement-modal .announcement-dialog {
  background: linear-gradient(135deg, rgba(15,23,42,0.92), rgba(30,41,59,0.88)) !important;
  color: #f8fafc !important;
  border-color: rgba(148,163,184,0.22) !important;
  box-shadow: 0 35px 90px rgba(0,0,0,0.62), 0 0 40px rgba(99,102,241,0.14), 0 0 0 1px rgba(255,255,255,0.08) inset !important;
}
#announcement-modal .announcement-dialog h3 {
  flex: 0 0 auto !important;
  color: #0f172a !important;
  -webkit-text-fill-color: initial !important;
  background: none !important;
}
body.dark #announcement-modal .announcement-dialog h3 {
  color: #f8fafc !important;
}
#announcement-modal .announcement-content {
  min-height: 80px !important;
  max-height: min(46vh, 380px) !important;
  overflow-y: auto !important;
  color: #334155 !important;
  background: rgba(255,255,255,0.58) !important;
  border: 1px solid rgba(148,163,184,0.2) !important;
  border-radius: 16px !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(99,102,241,0.38) transparent !important;
}
body.dark #announcement-modal .announcement-content {
  color: #e2e8f0 !important;
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.07) !important;
}
#announcement-modal .announcement-content::-webkit-scrollbar { width: 6px !important; }
#announcement-modal .announcement-content::-webkit-scrollbar-thumb {
  background: rgba(99,102,241,0.38) !important;
  border-radius: 999px !important;
}
#announcement-modal .announcement-actions {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}
#announcement-modal .announcement-btn {
  appearance: none !important;
  min-width: 120px !important;
  min-height: 44px !important;
  border-radius: 12px !important;
  border: 1px solid transparent !important;
  font: inherit !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease !important;
}
#announcement-modal .announcement-btn-primary,
#announcement-modal .announcement-btn.primary,
#announcement-modal .announcement-btn:not(.announcement-btn-secondary):not(.announcement-btn-danger) {
  background: linear-gradient(135deg, #6366f1, #2563eb) !important;
  color: #fff !important;
  box-shadow: 0 8px 22px rgba(99,102,241,0.34) !important;
}
#announcement-modal .announcement-btn-secondary,
#announcement-modal .announcement-btn.secondary {
  background: rgba(255,255,255,0.72) !important;
  border-color: rgba(148,163,184,0.28) !important;
  color: #334155 !important;
  box-shadow: none !important;
}
body.dark #announcement-modal .announcement-btn-secondary,
body.dark #announcement-modal .announcement-btn.secondary {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.14) !important;
  color: #e2e8f0 !important;
}
#announcement-modal .announcement-btn-danger,
#announcement-modal .announcement-btn.danger {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  color: #fff !important;
  box-shadow: 0 8px 22px rgba(239,68,68,0.3) !important;
}
#announcement-modal .announcement-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 28px rgba(99,102,241,0.28) !important;
}
#announcement-modal .announcement-btn-danger:hover,
#announcement-modal .announcement-btn.danger:hover {
  box-shadow: 0 12px 28px rgba(239,68,68,0.38) !important;
}
#announcement-modal .announcement-btn:active {
  transform: translateY(0) scale(.99) !important;
}
.login-modal .login-section {
  width: min(440px, 100%) !important;
  background: linear-gradient(145deg, rgba(255,255,255,0.96), rgba(248,250,252,0.98)) !important;
  border: 1px solid rgba(226,232,240,0.82) !important;
  border-radius: 24px !important;
  box-shadow: 0 30px 80px rgba(15,23,42,0.22), 0 0 0 1px rgba(255,255,255,0.7) inset !important;
  max-height: 88vh !important;
  overflow-y: auto !important;
}
body.dark .login-modal .login-section {
  background: linear-gradient(145deg, rgba(15,23,42,0.9), rgba(30,41,59,0.96)) !important;
  border-color: rgba(148,163,184,0.22) !important;
  box-shadow: 0 35px 90px rgba(0,0,0,0.62), 0 0 0 1px rgba(255,255,255,0.08) inset !important;
}
.login-modal .login-input input:not(.captcha-card-box input):not(.captcha-box input),
.login-modal .login-passwordless-row input {
  height: 50px !important;
  border-radius: 14px !important;
  border: 1.5px solid var(--border-light, rgba(148,163,184,0.28)) !important;
}
.captcha-card-box input,
.captcha-box input {
  height: 34px !important;
  min-height: 34px !important;
}
body.dark .admin-login-card {
  background: linear-gradient(145deg, rgba(15,23,42,0.9), rgba(30,41,59,0.96)) !important;
  color: #f8fafc !important;
  border-color: rgba(148,163,184,0.24) !important;
}
body.dark .admin-login-card h2,
body.dark .admin-login-card label {
  color: #f8fafc !important;
}
body.dark .admin-login-card p,
body.dark .admin-login-card a {
  color: #cbd5e1 !important;
}
body.dark .admin-login-card input[type="text"],
body.dark .admin-login-card input[type="password"] {
  background: rgba(15,23,42,0.72) !important;
  color: #f8fafc !important;
  border-color: rgba(148,163,184,0.28) !important;
}
@media (max-width: 768px) {
  .login-modal {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .login-modal .login-section {
    width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    padding: 28px 20px 24px !important;
  }
}
@media (max-width: 640px) {
  #announcement-modal.announcement-modal {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  #announcement-modal .announcement-dialog {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    padding: 28px 20px !important;
  }
  #announcement-modal .announcement-actions {
    flex-direction: column !important;
  }
  #announcement-modal .announcement-btn {
    width: 100% !important;
  }
}

/* v205 shell auth UI: server.js shellPage() loads this after its internal shell CSS */
body:has(#register-form),
body:has(#forgot-password-form),
body:has(#admin-login-form) {
  display: block !important;
  min-height: 100vh !important;
  padding: 28px 16px !important;
  color: #172033 !important;
  background:
    radial-gradient(circle at top left, rgba(99, 102, 241, 0.16), transparent 34%),
    radial-gradient(circle at bottom right, rgba(14, 165, 233, 0.12), transparent 32%),
    #eef3f8 !important;
  overflow-x: hidden !important;
}

body:has(#register-form)::before,
body:has(#register-form)::after,
body:has(#forgot-password-form)::before,
body:has(#forgot-password-form)::after,
body:has(#admin-login-form)::before,
body:has(#admin-login-form)::after {
  display: none !important;
  content: none !important;
}

body:has(#register-form) .wrap,
body:has(#forgot-password-form) .wrap,
body:has(#admin-login-form) .wrap {
  width: 100% !important;
  max-width: 760px !important;
  margin: 0 auto !important;
}

body:has(#admin-login-form) .wrap {
  max-width: 560px !important;
}

body:has(#register-form) .card,
body:has(#forgot-password-form) .card,
body:has(#admin-login-form) .card,
body:has(#admin-login-form) .card.admin-login-card {
  width: 100% !important;
  margin: 42px auto !important;
  padding: 34px 32px !important;
  background: linear-gradient(145deg, rgba(255,255,255,0.96), rgba(248,250,252,0.94)) !important;
  color: #172033 !important;
  border: 1px solid rgba(148, 163, 184, 0.24) !important;
  border-radius: 22px !important;
  box-shadow: 0 28px 78px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(255,255,255,0.72) inset !important;
  backdrop-filter: blur(18px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(145%) !important;
  overflow: visible !important;
}

body:has(#register-form) .card h2,
body:has(#forgot-password-form) .card h2,
body:has(#admin-login-form) .card h2,
body:has(#admin-login-form) .card.admin-login-card h2 {
  margin: 0 0 12px !important;
  color: #0f172a !important;
  font-size: 1.5rem !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

body:has(#register-form) .muted,
body:has(#forgot-password-form) .muted,
body:has(#admin-login-form) .muted {
  color: #64748b !important;
}

#register-form,
#forgot-password-form,
#admin-login-form {
  display: grid !important;
  gap: 12px !important;
}

#register-form label,
#forgot-password-form label,
#admin-login-form label {
  margin: 0 0 -4px !important;
  color: #334155 !important;
  font-size: 0.9rem !important;
  font-weight: 800 !important;
}

body:has(#register-form) input[type="text"],
body:has(#register-form) input[type="password"],
body:has(#register-form) input[type="email"],
body:has(#forgot-password-form) input[type="text"],
body:has(#forgot-password-form) input[type="password"],
body:has(#forgot-password-form) input[type="email"],
body:has(#admin-login-form) input[type="text"],
body:has(#admin-login-form) input[type="password"],
body:has(#admin-login-form) input[type="email"] {
  width: 100% !important;
  height: 46px !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 0 15px !important;
  border-radius: 12px !important;
  border: 1.5px solid rgba(148, 163, 184, 0.42) !important;
  background: rgba(255,255,255,0.92) !important;
  color: #0f172a !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7) !important;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease !important;
}

body:has(#register-form) input::placeholder,
body:has(#forgot-password-form) input::placeholder,
body:has(#admin-login-form) input::placeholder {
  color: #94a3b8 !important;
}

body:has(#register-form) input[type="text"]:focus,
body:has(#register-form) input[type="password"]:focus,
body:has(#register-form) input[type="email"]:focus,
body:has(#forgot-password-form) input[type="text"]:focus,
body:has(#forgot-password-form) input[type="password"]:focus,
body:has(#forgot-password-form) input[type="email"]:focus,
body:has(#admin-login-form) input[type="text"]:focus,
body:has(#admin-login-form) input[type="password"]:focus,
body:has(#admin-login-form) input[type="email"]:focus {
  outline: none !important;
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.16), inset 0 1px 0 rgba(255,255,255,0.7) !important;
  background: #fff !important;
}

body:has(#register-form) .captcha-card-box,
body:has(#forgot-password-form) .captcha-card-box,
body:has(#admin-login-form) .captcha-box {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin: 4px 0 8px !important;
  padding: 12px 14px !important;
  background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(14,165,233,0.06)) !important;
  border: 1.5px solid rgba(99,102,241,0.24) !important;
  border-radius: 14px !important;
  color: #334155 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.62) !important;
}

body:has(#register-form) .captcha-card-box input,
body:has(#forgot-password-form) .captcha-card-box input,
body:has(#admin-login-form) .captcha-box input {
  width: 100px !important;
  height: 34px !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  border-radius: 8px !important;
  background: #fff !important;
  border: 1px solid rgba(148, 163, 184, 0.5) !important;
  color: #0f172a !important;
}

body:has(#register-form) button,
body:has(#register-form) .btn,
body:has(#forgot-password-form) button,
body:has(#forgot-password-form) .btn,
body:has(#admin-login-form) button,
body:has(#admin-login-form) .btn,
body:has(#admin-login-form) .admin-login-card button {
  appearance: none !important;
  min-height: 42px !important;
  border-radius: 12px !important;
  border: 1px solid transparent !important;
  padding: 0 16px !important;
  font: inherit !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease, border-color .14s ease !important;
}

body:has(#register-form) form > button[type="submit"],
body:has(#forgot-password-form) form > button[type="submit"],
body:has(#admin-login-form) form > button[type="submit"],
body:has(#admin-login-form) .admin-login-card button[type="submit"] {
  width: 100% !important;
  height: 48px !important;
  margin-top: 8px !important;
  background: linear-gradient(135deg, #6366f1, #2563eb) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 10px 26px rgba(99,102,241,0.32) !important;
}

body:has(#register-form) button.alt,
body:has(#register-form) .captcha-refresh-btn,
body:has(#forgot-password-form) button.alt,
body:has(#forgot-password-form) .captcha-refresh-btn,
body:has(#admin-login-form) button.alt,
body:has(#admin-login-form) .captcha-refresh-btn {
  min-height: 38px !important;
  background: rgba(255,255,255,0.78) !important;
  color: #4f46e5 !important;
  border-color: rgba(99,102,241,0.28) !important;
  box-shadow: 0 4px 12px rgba(15,23,42,0.06) !important;
}

body:has(#register-form) button:hover:not(:disabled),
body:has(#register-form) .btn:hover:not(:disabled),
body:has(#forgot-password-form) button:hover:not(:disabled),
body:has(#forgot-password-form) .btn:hover:not(:disabled),
body:has(#admin-login-form) button:hover:not(:disabled),
body:has(#admin-login-form) .btn:hover:not(:disabled) {
  transform: translateY(-1px) !important;
  box-shadow: 0 14px 30px rgba(99,102,241,0.25) !important;
}

body:has(#register-form) button:active:not(:disabled),
body:has(#register-form) .btn:active:not(:disabled),
body:has(#forgot-password-form) button:active:not(:disabled),
body:has(#forgot-password-form) .btn:active:not(:disabled),
body:has(#admin-login-form) button:active:not(:disabled),
body:has(#admin-login-form) .btn:active:not(:disabled) {
  transform: translateY(0) scale(.99) !important;
}

body:has(#register-form) button:disabled,
body:has(#forgot-password-form) button:disabled,
body:has(#admin-login-form) button:disabled {
  cursor: not-allowed !important;
  opacity: .58 !important;
  transform: none !important;
  box-shadow: none !important;
}

body:has(#register-form) a,
body:has(#forgot-password-form) a,
body:has(#admin-login-form) a {
  color: #4f46e5 !important;
  font-weight: 750 !important;
}

body:has(#register-form) .err,
body:has(#forgot-password-form) .err,
body:has(#admin-login-form) .err {
  color: #b42318 !important;
  background: rgba(254, 226, 226, 0.72) !important;
  border: 1px solid rgba(248, 113, 113, 0.28) !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
}

body:has(#register-form) .ok,
body:has(#forgot-password-form) .ok,
body:has(#admin-login-form) .ok {
  color: #047857 !important;
  background: rgba(209, 250, 229, 0.72) !important;
  border: 1px solid rgba(52, 211, 153, 0.3) !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
}

body.dark:has(#register-form),
body.dark:has(#forgot-password-form),
body.dark:has(#admin-login-form) {
  background:
    radial-gradient(circle at top left, rgba(99,102,241,0.18), transparent 34%),
    radial-gradient(circle at bottom right, rgba(14,165,233,0.14), transparent 32%),
    #0f172a !important;
  color: #f8fafc !important;
}

body.dark:has(#register-form) .card,
body.dark:has(#forgot-password-form) .card,
body.dark:has(#admin-login-form) .card,
body.dark:has(#admin-login-form) .card.admin-login-card {
  background: linear-gradient(145deg, rgba(15,23,42,0.92), rgba(30,41,59,0.9)) !important;
  color: #f8fafc !important;
  border-color: rgba(148,163,184,0.22) !important;
  box-shadow: 0 30px 86px rgba(0,0,0,0.54), 0 0 0 1px rgba(255,255,255,0.06) inset !important;
}

body.dark:has(#register-form) .card h2,
body.dark:has(#forgot-password-form) .card h2,
body.dark:has(#admin-login-form) .card h2,
body.dark:has(#register-form) label,
body.dark:has(#forgot-password-form) label,
body.dark:has(#admin-login-form) label {
  color: #f8fafc !important;
}

body.dark:has(#register-form) .muted,
body.dark:has(#forgot-password-form) .muted,
body.dark:has(#admin-login-form) .muted {
  color: #cbd5e1 !important;
}

body.dark:has(#register-form) input[type="text"],
body.dark:has(#register-form) input[type="password"],
body.dark:has(#register-form) input[type="email"],
body.dark:has(#forgot-password-form) input[type="text"],
body.dark:has(#forgot-password-form) input[type="password"],
body.dark:has(#forgot-password-form) input[type="email"],
body.dark:has(#admin-login-form) input[type="text"],
body.dark:has(#admin-login-form) input[type="password"],
body.dark:has(#admin-login-form) input[type="email"] {
  background: rgba(15,23,42,0.72) !important;
  color: #f8fafc !important;
  border-color: rgba(148,163,184,0.3) !important;
}

body.dark:has(#register-form) .captcha-card-box,
body.dark:has(#forgot-password-form) .captcha-card-box,
body.dark:has(#admin-login-form) .captcha-box {
  background: linear-gradient(135deg, rgba(99,102,241,0.16), rgba(14,165,233,0.1)) !important;
  border-color: rgba(129,140,248,0.34) !important;
  color: #e2e8f0 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

body.dark:has(#register-form) .captcha-card-box input,
body.dark:has(#forgot-password-form) .captcha-card-box input,
body.dark:has(#admin-login-form) .captcha-box input {
  background: rgba(15,23,42,0.82) !important;
  color: #f8fafc !important;
  border-color: rgba(148,163,184,0.36) !important;
}

@media (prefers-color-scheme: dark) {
  body:has(#register-form):not(.light),
  body:has(#forgot-password-form):not(.light),
  body:has(#admin-login-form):not(.light) {
    background:
      radial-gradient(circle at top left, rgba(99,102,241,0.18), transparent 34%),
      radial-gradient(circle at bottom right, rgba(14,165,233,0.14), transparent 32%),
      #0f172a !important;
    color: #f8fafc !important;
  }

  body:has(#register-form):not(.light) .card,
  body:has(#forgot-password-form):not(.light) .card,
  body:has(#admin-login-form):not(.light) .card,
  body:has(#admin-login-form):not(.light) .card.admin-login-card {
    background: linear-gradient(145deg, rgba(15,23,42,0.92), rgba(30,41,59,0.9)) !important;
    color: #f8fafc !important;
    border-color: rgba(148,163,184,0.22) !important;
    box-shadow: 0 30px 86px rgba(0,0,0,0.54), 0 0 0 1px rgba(255,255,255,0.06) inset !important;
  }

  body:has(#register-form):not(.light) .card h2,
  body:has(#forgot-password-form):not(.light) .card h2,
  body:has(#admin-login-form):not(.light) .card h2,
  body:has(#register-form):not(.light) label,
  body:has(#forgot-password-form):not(.light) label,
  body:has(#admin-login-form):not(.light) label {
    color: #f8fafc !important;
  }

  body:has(#register-form):not(.light) .muted,
  body:has(#forgot-password-form):not(.light) .muted,
  body:has(#admin-login-form):not(.light) .muted {
    color: #cbd5e1 !important;
  }

  body:has(#register-form):not(.light) input[type="text"],
  body:has(#register-form):not(.light) input[type="password"],
  body:has(#register-form):not(.light) input[type="email"],
  body:has(#forgot-password-form):not(.light) input[type="text"],
  body:has(#forgot-password-form):not(.light) input[type="password"],
  body:has(#forgot-password-form):not(.light) input[type="email"],
  body:has(#admin-login-form):not(.light) input[type="text"],
  body:has(#admin-login-form):not(.light) input[type="password"],
  body:has(#admin-login-form):not(.light) input[type="email"] {
    background: rgba(15,23,42,0.72) !important;
    color: #f8fafc !important;
    border-color: rgba(148,163,184,0.3) !important;
  }

  body:has(#register-form):not(.light) .captcha-card-box,
  body:has(#forgot-password-form):not(.light) .captcha-card-box,
  body:has(#admin-login-form):not(.light) .captcha-box {
    background: linear-gradient(135deg, rgba(99,102,241,0.16), rgba(14,165,233,0.1)) !important;
    border-color: rgba(129,140,248,0.34) !important;
    color: #e2e8f0 !important;
  }

  body:has(#register-form):not(.light) .captcha-card-box input,
  body:has(#forgot-password-form):not(.light) .captcha-card-box input,
  body:has(#admin-login-form):not(.light) .captcha-box input {
    background: rgba(15,23,42,0.82) !important;
    color: #f8fafc !important;
    border-color: rgba(148,163,184,0.36) !important;
  }
}

@media (max-width: 768px) {
  body:has(#register-form),
  body:has(#forgot-password-form),
  body:has(#admin-login-form) {
    padding: 0 !important;
    background: #eef3f8 !important;
  }

  body:has(#register-form) .wrap,
  body:has(#forgot-password-form) .wrap,
  body:has(#admin-login-form) .wrap {
    max-width: 100% !important;
    min-height: 100vh !important;
    display: flex !important;
    align-items: flex-end !important;
  }

  body:has(#register-form) .card,
  body:has(#forgot-password-form) .card,
  body:has(#admin-login-form) .card,
  body:has(#admin-login-form) .card.admin-login-card {
    margin: 24px 0 0 !important;
    padding: 28px 20px 24px !important;
    border-radius: 20px 20px 0 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    box-shadow: 0 -18px 54px rgba(15,23,42,0.18) !important;
  }

  body:has(#register-form) .row,
  body:has(#forgot-password-form) .row,
  body:has(#admin-login-form) .row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  body:has(#register-form) .row button,
  body:has(#forgot-password-form) .row button,
  body:has(#admin-login-form) .row button,
  body:has(#register-form) button,
  body:has(#forgot-password-form) button,
  body:has(#admin-login-form) button {
    width: 100% !important;
    min-height: 44px !important;
  }

  body:has(#register-form) .captcha-card-box,
  body:has(#forgot-password-form) .captcha-card-box,
  body:has(#admin-login-form) .captcha-box {
    align-items: stretch !important;
  }

  body:has(#register-form) .captcha-card-box input,
  body:has(#forgot-password-form) .captcha-card-box input,
  body:has(#admin-login-form) .captcha-box input {
    width: 100% !important;
  }
}

/* v206 create-room mode and quality guidance */
.create-mode-limit-row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(180px, 1fr)) !important;
  gap: 14px !important;
  align-items: end !important;
}

.create-mode-limit-row .form-row {
  min-width: 0 !important;
}

.create-mode-limit-row select,
#create-room-quality-preset {
  width: 100% !important;
  min-height: 46px !important;
}

.create-room-guidance {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 14px 0 2px !important;
}

.create-room-guide-card {
  position: relative !important;
  min-width: 0 !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(99, 102, 241, 0.18) !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(248,250,252,0.72)) !important;
  color: var(--text-secondary) !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
  box-shadow: 0 8px 20px rgba(15,23,42,0.05) !important;
}

.create-room-guide-card strong {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 5px !important;
  color: var(--text-primary) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

.create-room-guide-card strong::after {
  content: "?" !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 17px !important;
  height: 17px !important;
  border-radius: 999px !important;
  background: rgba(99,102,241,0.12) !important;
  color: var(--accent) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

.create-room-guide-card span {
  display: block !important;
  color: var(--text-secondary) !important;
}

.create-room-guide-card:hover::after,
.create-room-guide-card:focus-within::after {
  content: attr(title) !important;
  position: absolute !important;
  left: 12px !important;
  right: 12px !important;
  top: calc(100% + 8px) !important;
  z-index: 80 !important;
  padding: 10px 12px !important;
  border-radius: 8px !important;
  background: rgba(15, 23, 42, 0.94) !important;
  color: #fff !important;
  box-shadow: 0 18px 42px rgba(15,23,42,0.24) !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
  pointer-events: none !important;
}

body.dark .create-room-guide-card {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(148,163,184,0.18) !important;
  color: var(--text-secondary) !important;
  box-shadow: none !important;
}

body.dark .create-room-guide-card strong {
  color: var(--text-primary) !important;
}

body.dark .create-room-guide-card strong::after {
  background: rgba(99,102,241,0.2) !important;
  color: #c7d2fe !important;
}

@media (max-width: 900px) {
  .create-mode-limit-row {
    grid-template-columns: 1fr !important;
  }

  .create-room-guidance {
    grid-template-columns: 1fr !important;
  }
}

/* v214: lobby numeric room-number search keeps an exact join entry even when fuzzy results exist. */
.room-number-direct-bar{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border:1px solid rgba(88,101,242,.32);border-radius:14px;background:linear-gradient(135deg,rgba(88,101,242,.12),rgba(16,185,129,.06));box-shadow:0 8px 22px rgba(31,41,55,.06)}
.room-number-direct-text{display:grid;gap:4px;min-width:0}.room-number-direct-text strong{font-size:15px;font-weight:900;color:var(--text-primary)}.room-number-direct-text span{font-size:13px;line-height:1.45;color:var(--text-secondary)}.room-number-direct-bar .btn{flex:0 0 auto;white-space:nowrap;font-weight:900}.room-number-direct-bar+.room-list-empty{margin-top:0}@media(max-width:720px){.room-number-direct-bar{align-items:stretch;flex-direction:column}.room-number-direct-bar .btn{width:100%;justify-content:center}}
body.dark .room-number-direct-bar{background:linear-gradient(135deg,rgba(88,101,242,.18),rgba(16,185,129,.08));border-color:rgba(148,163,184,.24)}

/* v1.0.211-adminfix5: VIP custom room number + room red name */
.vip-room-number-section{display:flex;flex-direction:column;gap:12px}.vip-room-number-section[hidden]{display:none!important}.vip-room-number-card{border:1px solid rgba(148,163,184,.28);border-radius:14px;padding:14px;background:rgba(15,23,42,.035);display:flex;flex-direction:column;gap:12px}.vip-room-number-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px;color:var(--muted,#64748b);font-size:13px}.vip-room-number-form{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.vip-room-number-form input{min-width:180px;max-width:260px}.vip-room-number-state{font-size:13px;color:var(--muted,#64748b)}.vip-room-number-state.is-error{color:#dc2626}.vip-room-number-state.is-success{color:#16a34a}.vip-room-red-name{font-weight:900!important;letter-spacing:-.01em;text-shadow:0 0 14px rgba(220,38,38,.28),0 1px 0 rgba(255,255,255,.16)}

/* v1.0.218: 会员临时 ID / 靓号牌 / 标签设置 */
.vip-identity-section{display:flex;flex-direction:column;gap:12px}
.vip-identity-section[hidden]{display:none!important}
.vip-identity-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.vip-identity-card{min-width:0}
.vip-identity-card>.vip-special-toggle{margin-top:2px}
.vip-label-card{grid-column:1/-1!important;}
.vip-label-card .vip-label-editor{max-width:760px;width:100%;}
.vip-label-card .vip-label-form{grid-template-columns:minmax(240px,1fr) minmax(138px,auto)!important;}
.vip-label-card .vip-label-preview{max-width:760px;width:100%;}
.vip-identity-card .vip-room-number-form{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-items:stretch}
.vip-identity-card .vip-room-number-form input{width:100%;max-width:none;min-width:0}
.vip-identity-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.vip-identity-actions .btn{flex:1 1 148px;min-width:0;min-height:44px;padding:0 18px;border-radius:12px;font-size:14px;font-weight:800;justify-content:center;white-space:nowrap;box-shadow:0 8px 18px rgba(88,101,242,.10)}
.vip-identity-actions .btn.btn-secondary{box-shadow:none}
@media (max-width:760px){.vip-identity-cards{grid-template-columns:1fr}.vip-identity-card .vip-room-number-form input{width:100%;max-width:none}}

/* v1.0.228: VIP privacy alignment, live label preview, premium room title and moving retention timer */
.vip-special-controls{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-auto-flow:row!important;
  align-items:stretch!important;
  gap:12px!important;
}
.vip-special-controls>.vip-special-toggle{
  width:100%!important;
  min-height:96px!important;
  height:100%!important;
  margin:0!important;
  padding:15px 16px!important;
  align-items:center!important;
  grid-column:auto!important;
}
.vip-special-controls>.vip-special-toggle-wide,
.vip-special-controls>.vip-invisible-summary-card{
  grid-column:1/-1!important;
}
.vip-special-controls>.vip-invisible-summary-card{
  min-height:72px!important;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 8%,var(--bg-panel)),var(--bg-panel))!important;
  border-style:dashed!important;
}
.vip-special-copy{align-content:center!important;}
.vip-special-copy strong{font-size:14px!important;line-height:1.35!important;}
.vip-special-copy>span{font-size:12px!important;line-height:1.55!important;}
.vip-label-editor{display:grid;gap:12px;}
.vip-label-form{display:grid!important;grid-template-columns:minmax(180px,1fr) auto!important;gap:10px!important;align-items:center!important;}
.vip-label-form>input[type="text"]{width:100%!important;min-width:0!important;max-width:none!important;}
.vip-label-form>.vip-identity-actions{grid-column:1/-1!important;}
.vip-label-actions{justify-content:flex-start}.vip-label-actions .btn{flex:0 1 180px;min-width:150px;}
.vip-label-color-field{display:inline-flex!important;align-items:center!important;gap:8px!important;min-height:44px!important;padding:6px 12px!important;border:1px solid var(--border-light)!important;border-radius:12px!important;background:var(--bg-card)!important;color:var(--text-secondary)!important;font-size:12px!important;font-weight:800!important;white-space:nowrap!important;cursor:pointer!important;box-shadow:0 2px 8px rgba(15,23,42,.04)!important;}
.vip-label-color-field input[type="color"]{position:static!important;width:34px!important;height:28px!important;min-width:34px!important;padding:2px!important;opacity:1!important;pointer-events:auto!important;border:0!important;border-radius:7px!important;background:transparent!important;cursor:pointer!important;}
.vip-label-preview{display:flex;align-items:center;gap:12px;min-height:66px;padding:12px 14px;border:1px dashed color-mix(in srgb,var(--vip-label-preview-color,#D946EF) 32%,var(--border-light));border-radius:12px;background:linear-gradient(135deg,color-mix(in srgb,var(--vip-label-preview-color,#D946EF) 7%,var(--bg-card)),var(--bg-panel));}
.vip-label-preview-caption{color:var(--text-muted);font-size:12px;font-weight:700;white-space:nowrap;}
.vip-label-preview-badge{--tag-color:var(--vip-label-preview-color,#D946EF);display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:4px 11px;border:1px solid color-mix(in srgb,var(--vip-label-preview-color,#D946EF) 48%,transparent);border-radius:999px;background:color-mix(in srgb,var(--vip-label-preview-color,#D946EF) 13%,var(--bg-card));color:var(--vip-label-preview-color,#D946EF)!important;font-size:13px;font-weight:900;letter-spacing:.02em;box-shadow:0 6px 18px color-mix(in srgb,var(--vip-label-preview-color,#D946EF) 18%,transparent);}
.room-retention-countdown{font-variant-numeric:tabular-nums;min-width:112px;justify-content:center;background:linear-gradient(135deg,rgba(79,70,229,.10),rgba(14,165,233,.08))!important;border-color:rgba(79,70,229,.22)!important;color:#4338ca!important;font-weight:800!important;}
body.dark .room-retention-countdown{color:#c7d2fe!important;background:linear-gradient(135deg,rgba(99,102,241,.18),rgba(14,165,233,.12))!important;border-color:rgba(129,140,248,.32)!important;}
.vip-room-red-name{
  --vip-room-color:#B4234B;
  position:relative!important;
  display:inline-block!important;
  width:max-content!important;
  max-width:100%!important;
  font-weight:900!important;
  letter-spacing:-.02em!important;
  color:color-mix(in srgb,var(--vip-room-color) 72%,#6B102A)!important;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--vip-room-color) 74%,#8A1738) 0%,
    color-mix(in srgb,var(--vip-room-color) 82%,#4A0D20) 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  filter:none!important;
  animation:none!important;
  text-shadow:0 1px 0 rgba(255,255,255,.18),0 2px 5px rgba(83,18,42,.12)!important;
}
.vip-room-red-name::before,
.vip-room-red-name::after{
  content:none!important;
  display:none!important;
}
body.dark .vip-room-red-name{
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--vip-room-color) 72%,#FFD3DF) 0%,
    color-mix(in srgb,var(--vip-room-color) 88%,#9F1239) 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  text-shadow:0 1px 0 rgba(255,255,255,.06),0 2px 6px rgba(0,0,0,.22)!important;
}
@media (max-width:760px){
  .vip-special-controls{grid-template-columns:1fr!important;}
  .vip-special-controls>.vip-special-toggle-wide,.vip-special-controls>.vip-invisible-summary-card{grid-column:1!important;}
  .vip-label-card .vip-label-form,.vip-label-form{grid-template-columns:1fr!important;}
  .vip-label-form>input[type="text"]{grid-column:1!important;}
  .vip-label-color-field{justify-content:space-between!important;width:100%!important;}
  .vip-identity-actions{flex-direction:column!important;align-items:stretch!important;}
  .vip-identity-actions .btn{width:100%!important;min-width:0!important;flex:1 1 auto!important;}
  .vip-label-preview{align-items:flex-start;flex-direction:column;}
}

/* v1.0.229: lobby connection recovery */
.lobby-load-state{display:flex!important;align-items:center!important;justify-content:center!important;gap:12px!important;min-height:72px!important;padding:14px!important;border:1px dashed var(--border-light)!important;border-radius:10px!important;background:var(--bg-panel)!important;color:var(--text-secondary)!important;}
.lobby-load-state.is-error{border-color:rgba(220,38,38,.28)!important;background:rgba(220,38,38,.045)!important;color:var(--color-danger)!important;}
.lobby-load-state .btn{min-height:36px!important;flex:0 0 auto!important;}
@media(max-width:600px){.lobby-load-state{flex-direction:column!important;text-align:center!important;}}

/* v1.0.234: lobby card alignment, visible retention countdown and exact cache-busted layout. */
#lobby .tab-content.active{
  min-height:0!important;
}
#tab-list{
  display:flex!important;
  flex-direction:column!important;
  gap:16px!important;
  min-height:0!important;
}
#tab-list .lobby-toolbar{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 212px!important;
  gap:18px!important;
  align-items:end!important;
  margin:0!important;
  padding:14px 16px!important;
  border:1px solid #e3e8f0!important;
  border-radius:12px!important;
  background:#fff!important;
  box-shadow:0 8px 24px rgba(32,40,80,.045)!important;
}
#tab-list .search-card{
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  min-height:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
#tab-list .search-card label{
  display:block!important;
  margin:0 0 7px!important;
  color:#475467!important;
  font-size:12px!important;
  font-weight:800!important;
  line-height:16px!important;
}
#tab-list .lobby-toolbar input,
#tab-list .lobby-toolbar select{
  width:100%!important;
  height:44px!important;
  min-height:44px!important;
  margin:0!important;
  border:1px solid #dce3ed!important;
  border-radius:9px!important;
  background:#f9fbfe!important;
  color:#172033!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85)!important;
}
#tab-list .lobby-toolbar input:focus,
#tab-list .lobby-toolbar select:focus{
  border-color:rgba(79,70,229,.48)!important;
  outline:3px solid rgba(79,70,229,.10)!important;
  outline-offset:0!important;
}
#tab-list .toolbar-actions{
  display:none!important;
}
#room-list-container.room-list{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  grid-auto-rows:1fr!important;
  align-items:stretch!important;
  gap:18px!important;
  max-height:none!important;
  min-height:0!important;
  padding:0!important;
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
#room-list-container>.room-number-direct-bar,
#room-list-container>.room-list-empty{
  grid-column:1/-1!important;
}
#room-list-container.room-list>.room-item{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  width:100%!important;
  min-width:0!important;
  min-height:170px!important;
  height:100%!important;
  gap:0!important;
  padding:18px!important;
  overflow:hidden!important;
  cursor:pointer!important;
  text-align:left!important;
  border:1px solid #e3e8f0!important;
  border-radius:12px!important;
  background:#fff!important;
  box-shadow:0 7px 22px rgba(32,40,80,.055)!important;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease!important;
}
#room-list-container.room-list>.room-item::before,
#room-list-container.room-list>.room-item::after{
  content:none!important;
  display:none!important;
}
#room-list-container.room-list>.room-item:hover{
  transform:translateY(-2px)!important;
  border-color:rgba(79,70,229,.30)!important;
  box-shadow:0 13px 30px rgba(32,40,80,.09)!important;
}
#room-list-container .room-card-head{
  position:relative!important;
  z-index:1!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  width:100%!important;
  min-height:0!important;
  gap:10px!important;
  text-align:left!important;
}
#room-list-container .room-card-title-wrap{
  display:block!important;
  flex:1 1 auto!important;
  min-width:0!important;
  text-align:left!important;
}
#room-list-container .room-card-title-wrap .name,
#room-list-container .room-item .name{
  display:-webkit-box!important;
  width:100%!important;
  min-height:0!important;
  margin:0!important;
  overflow:hidden!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  text-align:left!important;
  color:#172033!important;
  font-size:18px!important;
  font-weight:850!important;
  line-height:1.32!important;
  letter-spacing:-.02em!important;
}
#room-list-container .room-card-flags{
  display:flex!important;
  flex:0 0 auto!important;
  flex-wrap:wrap!important;
  justify-content:flex-end!important;
  gap:6px!important;
  max-width:48%!important;
}
#room-list-container .room-card-flag{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:23px!important;
  padding:3px 8px!important;
  border:1px solid rgba(79,70,229,.16)!important;
  border-radius:7px!important;
  background:#eef2ff!important;
  color:#4f46e5!important;
  font-size:11px!important;
  font-weight:850!important;
  line-height:1.2!important;
  white-space:nowrap!important;
}
#room-list-container .room-card-summary{
  position:relative!important;
  z-index:1!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:space-between!important;
  flex-wrap:wrap!important;
  gap:7px 10px!important;
  width:100%!important;
  min-width:0!important;
  min-height:22px!important;
  margin-top:7px!important;
  text-align:left!important;
}
#room-list-container .room-card-summary-line{
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  min-width:0!important;
  text-align:left!important;
}
#room-list-container .room-card-subtitle{
  display:block!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  text-align:left!important;
  color:#667085!important;
  font-size:13px!important;
  font-weight:650!important;
  line-height:1.45!important;
}
#room-list-container .room-card-subtitle::before{
  content:none!important;
  display:none!important;
}
#room-list-container .room-card-policy{
  display:inline-flex!important;
  align-items:center!important;
  min-height:22px!important;
  padding:2px 7px!important;
  border:1px solid #fecdd3!important;
  border-radius:7px!important;
  background:#fff1f2!important;
  color:#be123c!important;
  font-size:11px!important;
  font-weight:800!important;
  white-space:nowrap!important;
}
#room-list-container .room-retention-countdown{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:max-content!important;
  max-width:100%!important;
  min-width:0!important;
  min-height:23px!important;
  padding:3px 8px!important;
  overflow:hidden!important;
  border:1px solid rgba(79,70,229,.18)!important;
  border-radius:7px!important;
  background:#f1f3ff!important;
  color:#4338ca!important;
  font-size:11px!important;
  font-weight:800!important;
  line-height:1.25!important;
  font-variant-numeric:tabular-nums!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
#room-list-container .room-card-footer{
  position:relative!important;
  z-index:1!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-end!important;
  width:100%!important;
  min-height:0!important;
  gap:10px!important;
  margin-top:12px!important;
  padding-top:11px!important;
  border-top:1px solid #edf0f5!important;
  text-align:left!important;
}
#room-list-container .room-card-meta{
  display:flex!important;
  flex:0 0 auto!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:8px 14px!important;
  width:100%!important;
  min-width:0!important;
  min-height:20px!important;
  text-align:left!important;
}
#room-list-container .room-meta-chip{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:5px!important;
  min-width:0!important;
  min-height:20px!important;
  max-width:100%!important;
  padding:0!important;
  overflow-wrap:anywhere!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#667085!important;
  font-size:12px!important;
  font-weight:700!important;
  line-height:1.4!important;
  white-space:normal!important;
  text-align:left!important;
}
#room-list-container .room-meta-chip::before{
  content:''!important;
  display:block!important;
  flex:0 0 12px!important;
  width:12px!important;
  height:12px!important;
  box-sizing:border-box!important;
  color:#7b8496!important;
}
#room-list-container .room-meta-chip--number::before{
  border:1.4px solid currentColor!important;
  border-radius:2px!important;
  background:linear-gradient(90deg,transparent 0 3px,currentColor 3px 4.2px,transparent 4.2px 100%)!important;
}
#room-list-container .room-meta-chip--capacity::before{
  border-radius:50%!important;
  background:
    radial-gradient(circle at 50% 28%,currentColor 0 2.2px,transparent 2.5px),
    radial-gradient(ellipse at 50% 92%,transparent 0 3.2px,currentColor 3.5px 4.6px,transparent 4.9px)!important;
}
#room-list-container .room-meta-chip--number{
  font-variant-numeric:tabular-nums!important;
  word-break:normal!important;
}
#room-list-container .quick-join{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  min-width:0!important;
  height:40px!important;
  min-height:40px!important;
  margin:0!important;
  padding:0 16px!important;
  border-radius:8px!important;
  background:linear-gradient(135deg,#514ff0,#6655ee)!important;
  box-shadow:0 7px 16px rgba(79,70,229,.18)!important;
  text-align:center!important;
  font-size:14px!important;
  font-weight:800!important;
  white-space:nowrap!important;
}
#room-list-container .quick-join::after{
  content:'›'!important;
  display:inline-block!important;
  margin-left:9px!important;
  font-size:18px!important;
  line-height:1!important;
  opacity:.9!important;
}
#room-list-container .quick-join:hover{
  transform:none!important;
  background:linear-gradient(135deg,#4744df,#5948df)!important;
  box-shadow:0 9px 20px rgba(79,70,229,.24)!important;
}
#room-list-container .quick-join:focus-visible{
  outline:3px solid rgba(79,70,229,.25)!important;
  outline-offset:3px!important;
  box-shadow:none!important;
}
body.dark #tab-list .lobby-toolbar{
  border-color:#2b3548!important;
  background:#151c2b!important;
  box-shadow:0 10px 26px rgba(0,0,0,.24)!important;
}
body.dark #tab-list .search-card label,
body.dark #room-list-container .room-card-subtitle,
body.dark #room-list-container .room-meta-chip{
  color:#aeb8cc!important;
}
body.dark #tab-list .lobby-toolbar input,
body.dark #tab-list .lobby-toolbar select{
  border-color:#2b3548!important;
  background:#192235!important;
  color:#f4f7ff!important;
  box-shadow:none!important;
}
body.dark #room-list-container.room-list>.room-item{
  border-color:#2b3548!important;
  background:#151c2b!important;
  box-shadow:0 10px 26px rgba(0,0,0,.22)!important;
}
body.dark #room-list-container.room-list>.room-item:hover{
  border-color:rgba(129,140,248,.46)!important;
  box-shadow:0 16px 36px rgba(0,0,0,.32)!important;
}
body.dark #room-list-container .room-card-title-wrap .name,
body.dark #room-list-container .room-item .name{
  color:#f4f7ff!important;
}
body.dark #room-list-container .room-card-flag,
body.dark #room-list-container .room-retention-countdown{
  border-color:rgba(129,140,248,.30)!important;
  background:rgba(99,102,241,.16)!important;
  color:#c7d2fe!important;
}
body.dark #room-list-container .room-card-policy{
  border-color:rgba(251,113,133,.26)!important;
  background:rgba(225,29,72,.13)!important;
  color:#fda4af!important;
}
body.dark #room-list-container .room-card-footer{
  border-top-color:rgba(148,163,184,.14)!important;
}
body.dark #room-list-container .room-meta-chip::before{
  color:#9aa8c0!important;
}
@media (min-width:760px) and (max-width:1199px){
  #room-list-container.room-list{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:15px!important;}
}
@media (max-width:759px){
  #tab-list .lobby-toolbar{grid-template-columns:1fr!important;gap:12px!important;padding:13px!important;}
  #room-list-container.room-list{grid-template-columns:1fr!important;grid-auto-rows:auto!important;gap:12px!important;}
  #room-list-container.room-list>.room-item{min-height:0!important;height:auto!important;padding:16px!important;}
  #room-list-container .room-card-flags{max-width:58%!important;}
}
@media (max-width:479px){
  #room-list-container .room-card-summary{align-items:flex-start!important;flex-direction:column!important;}
  #room-list-container .room-card-meta{gap:8px 11px!important;}
}
@media (prefers-reduced-motion:reduce){
  #room-list-container.room-list>.room-item{transition:none!important;}
  #room-list-container.room-list>.room-item:hover{transform:none!important;}
}

/* v1.0.237: secure TURN graceful-degradation and resource-abuse hardening release. */

/* v1.0.241 UI compatibility: keep unavailable transport modes visible as
   disabled choices and prevent the moved audio panel from retaining a wide
   multi-column minimum width inside the settings dialog. */
#audio-settings-modal .audio-settings-dialog{
  width:min(900px,calc(100vw - 40px));
  min-width:0;
}
#audio-settings-modal .audio-settings-header,
#audio-settings-modal .audio-settings-body{
  min-width:0;
  box-sizing:border-box;
}
#audio-settings-modal .audio-settings-body{
  width:100%;
  min-height:0;
}
#audio-settings-modal .audio-settings-body .device-panel,
#audio-settings-modal .audio-settings-body .settings-section,
#audio-settings-modal .audio-settings-body .control-item{
  width:100%;
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}
#audio-settings-modal .audio-settings-body .control-grid{
  grid-template-columns:minmax(0,1fr);
  min-width:0;
}
#audio-settings-modal .audio-settings-body select{
  width:100%;
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}
#audio-settings-modal .audio-settings-body .ui-v241-audio-settings-item{
  min-width:0;
}