:root {
  --bg: #0d1114; --panel: #151a1e; --panel-2: #1b2126; --panel-3: #252d33;
  --text: #f4f7f8; --muted: #9ba8ad; --pink: #52c7b8; --pink-2: #91e1d5;
  --green: #62d39f; --red: #ff7582; --yellow: #e9bd68; --line: #d9eef015;
  --shadow: 0 22px 60px #0009; --radius: 8px;
}
* { box-sizing: border-box; }
html, body { width: 100%; max-width: 100%; height: 100%; }
body { margin: 0; overflow: hidden; color: var(--text); background: var(--bg); font-family: "Microsoft YaHei", Inter, system-ui, sans-serif; font-size: 13px; }
body.fullscreen-open { overflow: hidden; }
button, input, select { font: inherit; }
button { color: inherit; cursor: pointer; }
button:disabled { opacity: .38; cursor: not-allowed; }
input, select { width: 100%; color: var(--text); background: #0f1417; border: 1px solid #d9eef022; border-radius: 7px; padding: 10px 11px; outline: none; }
select { appearance: none; padding-right: 38px; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--pink-2) 50%), linear-gradient(135deg, var(--pink-2) 50%, transparent 50%), linear-gradient(to right, var(--line), var(--line)); background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%, calc(100% - 34px) 50%; background-size: 5px 5px, 5px 5px, 1px 20px; background-repeat: no-repeat; transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease; }
select:hover { border-color: color-mix(in srgb, var(--pink) 58%, transparent); background-color: color-mix(in srgb, var(--pink) 6%, #11181c); }
/* Keep the native select indicator available to accessibility tooling even
   when the enhanced trigger is disabled; the visible trigger remains muted. */
select:disabled { cursor: not-allowed; opacity: .48; }
select[multiple], select[size]:not([size="1"]) { padding-right: 11px; background-image: none; }
/* Chromium may serialize the enhanced, visually-hidden native control as
   `background-image: none` when custom properties are unresolved. Keep a
   deterministic indicator for UI/automation and high-contrast inspection. */
select[data-enhanced-select="1"] {
  background-image: linear-gradient(45deg, transparent 50%, #91e1d5 50%), linear-gradient(135deg, #91e1d5 50%, transparent 50%), linear-gradient(to right, #d9eef015, #d9eef015) !important;
}
select option, select optgroup { color: var(--text); background: var(--panel-2); }
select option:checked { color: var(--text); background: var(--panel-3); }
input:focus, select:focus { border-color: var(--pink); box-shadow: 0 0 0 3px #52c7b820; }
label { display: grid; gap: 6px; margin: 10px 0; color: #d8cbdc; }
.is-hidden { display: none !important; }
.visually-hidden { position: fixed; left: -99999px; opacity: 0; }
.mobile-only, .mobile-menu-button, .mobile-menu-backdrop { display: none; }
.muted { color: var(--muted); }
.eyebrow { margin: 0 0 4px; color: var(--pink); font-size: 9px; font-weight: 800; letter-spacing: .18em; }
.topbar { position: relative; z-index: 100; width: 100%; max-width: 100vw; min-width: 0; height: 58px; display: flex; align-items: center; gap: 24px; padding: 0 18px; overflow: visible; border-bottom: 1px solid var(--line); background: #11171bf2; backdrop-filter: blur(18px); }
.brand { display: flex; flex: 0 0 205px; align-items: center; min-width: 205px; gap: 10px; }
.brand-mark { display: grid; width: 34px; height: 34px; place-items: center; color: #08201c; background: var(--pink); border-radius: 8px; box-shadow: 0 8px 22px #52c7b82b; }
.brand div, .account-button span { display: grid; }
.brand strong { font-size: 15px; letter-spacing: 0; white-space: nowrap; }
.brand small, .account-button small { color: var(--muted); font-size: 9px; }
.room-header { display: grid; grid-template-columns: minmax(0, 1.35fr) repeat(4, minmax(0, 1fr)); flex: 0 1 min(540px, 42vw); min-width: 220px; max-width: 540px; gap: clamp(8px, 1.2vw, 18px); overflow: visible; }
.room-header span { display: grid; flex: 1 1 0; min-width: 0; text-align: center; }
.room-header span:first-child { flex-grow: 1.35; }
.room-header small { color: var(--muted); font-size: 9px; }
.room-header strong { display: block; width: 100%; min-width: 0; max-width: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-header b { font-weight: inherit; }
.healthy { color: var(--green); }
.topbar-actions { display: flex; flex: 0 1 auto; min-width: 0; min-height: 42px; align-items: center; gap: 8px; margin-left: auto; padding-block: 3px; overflow: visible; scrollbar-width: none; }
.topbar-actions::-webkit-scrollbar { display: none; }
.topbar-actions > * { flex: 0 0 auto; }
.topbar-menu { position: relative; flex: 0 0 auto; }
.topbar-menu-trigger { display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 7px 10px; color: var(--text); background: color-mix(in srgb, var(--panel-2) 88%, transparent); border: 1px solid var(--line); border-radius: 7px; cursor: pointer; list-style: none; white-space: nowrap; }
.topbar-menu-trigger::-webkit-details-marker { display: none; }
.topbar-menu-trigger::after { content: '⌄'; color: var(--muted); font-size: 12px; }
.topbar-menu[open] .topbar-menu-trigger { color: var(--theme-accent, var(--pink-2)); border-color: var(--theme-accent, var(--pink)); }
.topbar-menu-panel { position: absolute; z-index: 210; top: calc(100% + 7px); right: 0; display: grid; min-width: 170px; gap: 3px; padding: 7px; background: color-mix(in srgb, var(--panel-2) 98%, #000); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 14px 34px #0009; }
.topbar-menu:not([open]) > .topbar-menu-panel { display: none; }
/* Keep the hover path continuous: the bridge covers the small visual gap
   between the trigger and panel so a pointer can reach an item directly. */
.topbar-menu-panel::before { content: ""; position: absolute; top: -8px; left: 0; right: 0; height: 8px; }
@media (hover: hover) and (pointer: fine) {
  /* CSS fallback for browsers/WebViews that do not dispatch pointerenter on
     native <details> consistently. The panel remains clickable while hovered. */
  .topbar-menu:hover > .topbar-menu-panel { display: grid !important; }
}
.topbar-menu-panel .header-feature-button { width: 100%; min-width: 0; justify-content: flex-start; padding: 8px 9px; }
.topbar-menu-panel .header-feature-button .button-label { display: inline !important; min-width: 0; overflow-wrap: anywhere; white-space: normal; }
.header-feature-button { display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 6px 8px; white-space: nowrap; border: 1px solid transparent; border-radius: 8px; }
.topbar-context-action + .topbar-context-action { margin-left: -5px; }
.header-feature-button > span[aria-hidden="true"] { display: inline-grid; min-width: 16px; place-items: center; color: currentColor; font-size: 14px; font-weight: 800; line-height: 1; }
.header-feature-button:hover { border-color: var(--line); background: #ffffff0b; }
.link-button, .ghost-button, .text-button { border: 0; background: transparent; color: var(--muted); }
.share-link-button, .status-badge, .account-button { white-space: nowrap; }
.link-button:hover, .ghost-button:hover, .text-button:hover { color: var(--pink-2); }
.ghost-button { padding: 7px 9px; }
.status-badge { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; color: var(--muted); background: #ffffff09; border-radius: 20px; }
.status-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 8px currentColor; }
.status-badge.online i { background: var(--green); }
.status-badge.offline i { background: var(--red); }
.account-button { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: #ffffff08; border-radius: 11px; padding: 5px 9px; }
.account-button > span:first-child { display: grid; width: 30px; height: 30px; place-items: center; background: #ff72b522; border-radius: 50%; }
.account-button > span:first-child img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.account-dropdown { position: fixed; z-index: 130; top: 52px; right: 70px; display: grid; width: 170px; padding: 7px; background: #20282df8; border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }
.account-dropdown button { padding: 9px 11px; text-align: left; border: 0; background: transparent; border-radius: 7px; }
.account-dropdown button:hover { background: #ffffff0d; color: var(--pink-2); }
main { height: calc(100% - 58px); }
.login-page { position: relative; height: 100%; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(410px, .75fr); padding-top: 12px; box-sizing: border-box; overflow-y: auto; background: #0d1114; }
.login-visual { position: relative; display: grid; place-items: center; min-height: 100%; overflow: hidden; }
.login-visual::before, .login-visual::after { content: ""; position: absolute; inset-block: 8%; width: 1px; background: #52c7b81f; box-shadow: 78px 0 #52c7b812, 156px 0 #52c7b80d, 234px 0 #52c7b808; }
.login-visual::before { left: 8%; }.login-visual::after { right: 8%; transform: scaleX(-1); }
.cinema-card { position: relative; isolation: isolate; display: grid; gap: 10px; min-width: 400px; overflow: hidden; padding: 58px; text-align: center; background: #151b1f; border: 1px solid #52c7b842; border-radius: 8px; box-shadow: 0 24px 70px #000b, 0 0 0 1px #52c7b80c inset; animation: sync-frame-acquire 720ms cubic-bezier(.16,1,.3,1) both; }
.cinema-card::before, .cinema-card::after { content: ""; position: absolute; width: 34px; height: 34px; border-color: var(--pink); opacity: .72; }.cinema-card::before { left: 15px; top: 15px; border-left: 1px solid; border-top: 1px solid; }.cinema-card::after { right: 15px; bottom: 15px; border-right: 1px solid; border-bottom: 1px solid; }
.cinema-card > span, .cinema-card > strong, .cinema-card > small, .sync-frame-meter { animation: sync-content-lock 520ms 180ms cubic-bezier(.16,1,.3,1) both; }
.cinema-card > span { font-size: 70px; }.cinema-card strong { font-size: 27px; }.cinema-card small { color: var(--muted); }
.sync-scan-line { position: absolute; z-index: -1; left: 5%; right: 5%; top: 16%; height: 1px; background: var(--pink); box-shadow: 0 0 18px #52c7b8cc; opacity: 0; animation: sync-scan 780ms 80ms cubic-bezier(.16,1,.3,1) both; }
.sync-frame-meter { display: flex; justify-content: center; gap: 5px; height: 16px; margin-top: 10px; }.sync-frame-meter b { width: 24px; height: 3px; align-self: end; background: #52c7b840; transform-origin: center bottom; animation: sync-meter 560ms 250ms ease-out both; }.sync-frame-meter b:nth-child(2), .sync-frame-meter b:nth-child(4) { animation-delay: 300ms; }.sync-frame-meter b:nth-child(3) { animation-delay: 350ms; }
.auth-card { position: relative; align-self: center; width: min(410px, calc(100% - 40px)); justify-self: center; margin-block: 24px; padding: 28px 30px; background: #151a1e; border: 1px solid var(--line); border-radius: 8px; animation: auth-panel-arrive 520ms 140ms cubic-bezier(.16,1,.3,1) both; }
.auth-card h1 { margin: 6px 0; font-size: 28px; }.auth-card form { margin-top: 20px; }
.primary-button, .secondary-button, .danger-button, .send-button { display: inline-grid; place-items: center; min-height: 36px; border: 0; border-radius: 9px; padding: 8px 14px; font-weight: 700; }
.primary-button, .send-button { color: #08201c; background: var(--pink); }
.secondary-button { background: #ffffff12; border: 1px solid var(--line); }
.danger-button { color: #ffdce2; background: #ff66752b; border: 1px solid #ff667544; }
.primary-button:hover, .send-button:hover { filter: brightness(1.08); }
.auth-card .primary-button { width: 100%; margin-top: 8px; }
.auth-card .text-button { width: 100%; padding: 7px; }
.guest-login-button { margin-top: 6px; border-style: dashed; color: var(--theme-accent, var(--pink-2)); background: color-mix(in srgb, var(--theme-accent, var(--pink)) 8%, transparent); }
.room-join-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.required-mark { margin-left: 3px; color: var(--red); font-weight: 900; }
.room-join-fields label { min-width: 0; }
.field-label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.room-password-state { flex: 0 0 auto; padding: 2px 6px; color: var(--muted); background: #ffffff08; border: 1px solid var(--line); border-radius: 5px; font-size: 10px; font-weight: 700; }
.room-password-state.required { color: var(--yellow); border-color: color-mix(in srgb, var(--yellow) 58%, var(--line)); background: color-mix(in srgb, var(--yellow) 9%, transparent); }
.room-password-state.open { color: var(--green); border-color: color-mix(in srgb, var(--green) 54%, var(--line)); background: color-mix(in srgb, var(--green) 8%, transparent); }
.login-attention-field > input,
.login-attention-field > .password-field { border-radius: 8px; animation: login-field-attention 1.65s ease-in-out infinite; }
.login-attention-field > .password-field input { border-color: transparent; }
@keyframes login-field-attention {
  0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--theme-accent, var(--pink)) 44%, transparent), 0 0 0 0 transparent; }
  50% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-accent, var(--pink)) 92%, transparent), 0 0 16px color-mix(in srgb, var(--theme-accent, var(--pink)) 34%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .login-attention-field > input, .login-attention-field > .password-field { animation: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-accent, var(--pink)) 72%, transparent); } }
.auth-create-room { margin-top: 8px; }
#myRoomsLoginBtn { margin: 0; }
.device-ip-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 9px 10px; background: #52c7b808; border: 1px solid #52c7b824; border-radius: 7px; }.device-ip-row > span { min-width: 0; display: grid; gap: 2px; }.device-ip-row small { color: var(--muted); font-size: 9px; }.device-ip-row strong { overflow-wrap: anywhere; font-size: 12px; font-variant-numeric: tabular-nums; }.device-ip-row button { flex: 0 0 auto; min-height: 32px; padding: 5px 11px; }
.online-room-picker-row { display: grid; grid-template-columns: minmax(0, 1fr) 40px; align-items: end; gap: 8px; margin-top: 4px; }
.online-room-search { grid-column: 1 / -1; margin: 0; }
.online-room-search input, .room-discovery-search input { margin-top: 4px; }
.room-discovery-search { display: grid; gap: 2px; margin: 12px 0; }
.online-room-picker { min-width: 0; width: 100%; margin: 0; }.online-room-picker .select-shell, .online-room-picker select, .online-room-picker .select-trigger { width: 100%; min-width: 0; }
.online-room-refresh-button { width: 40px; height: 40px; min-width: 40px; min-height: 40px; display: grid; place-items: center; padding: 0; font-size: 18px; }
.online-room-refresh-button.is-loading span { animation: refresh-online-rooms .7s linear infinite; }
@keyframes refresh-online-rooms { to { transform: rotate(360deg); } }
.room-lookup-status { min-height: 18px; margin: -2px 0 6px; color: var(--muted); font-size: 10px; line-height: 1.5; overflow-wrap: anywhere; }.room-lookup-status.success { color: var(--green); }
#registerAccessGroup { display: none !important; }
.auth-check { display: flex; align-items: center; justify-content: center; }.auth-check input, .check-line input { width: auto; }
.form-status { min-width: 0; min-height: 20px; margin: 0; color: var(--red); text-align: left; line-height: 1.55; overflow-wrap: anywhere; }.form-status.success { color: var(--green); }
.login-status-banner { display: grid; grid-template-columns: minmax(0, 1fr) 30px; gap: 8px; align-items: center; margin: 10px 0 8px; padding: 9px 9px 9px 12px; color: var(--red); background: color-mix(in srgb, var(--red) 9%, var(--panel-2)); border: 1px solid color-mix(in srgb, var(--red) 55%, transparent); border-radius: 7px; box-shadow: 0 8px 24px #0003; }
.login-status-banner .secondary-button { grid-column: 1 / -1; width: 100%; min-width: 0; white-space: normal; overflow-wrap: anywhere; text-align: center; line-height: 1.35; }
.login-status-banner.success { background: color-mix(in srgb, var(--green) 9%, var(--panel-2)); border-color: color-mix(in srgb, var(--green) 55%, transparent); }
.login-status-banner button { display: grid; width: 30px; height: 30px; min-height: 30px; place-items: center; padding: 0; color: currentColor; background: transparent; border: 0; border-radius: 6px; font-size: 20px; line-height: 1; }
.login-status-banner button:hover { color: var(--text); background: #ffffff12; }
@keyframes sync-frame-acquire { 0% { opacity: 0; transform: scale(.96); clip-path: inset(45% 8%); } 45% { opacity: 1; } 100% { opacity: 1; transform: scale(1); clip-path: inset(0); } }
@keyframes sync-content-lock { from { opacity: 0; transform: translateY(8px); filter: blur(5px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
@keyframes sync-scan { 0% { top: 16%; opacity: 0; } 18% { opacity: .9; } 82% { opacity: .9; } 100% { top: 84%; opacity: 0; } }
@keyframes sync-meter { 0% { transform: scaleY(.25); background: #52c7b82b; } 55% { transform: scaleY(4); background: var(--pink); } 100% { transform: scaleY(1); background: #52c7b866; } }
@keyframes auth-panel-arrive { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } }
.main-page, .workspace { height: 100%; }
.workspace { display: grid; grid-template-columns: 285px minmax(480px, 1fr) 286px; transition: grid-template-columns .2s ease; }
.side-panel { min-width: 0; background: var(--panel); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--theme-accent, var(--pink)) transparent; }
.file-panel { border-right: 1px solid var(--line); padding: 15px; }.user-panel { position: relative; border-left: 1px solid var(--line); }
.user-panel-collapse-button { position: relative; z-index: 3; flex: 0 0 28px; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }.panel-heading h2, .tab-content > h2 { margin: 0; font-size: 17px; }
.panel-heading-actions { display: flex; align-items: center; gap: 6px; }
.panel-collapse-button { display: grid; width: 28px; height: 28px; place-items: center; padding: 0; color: var(--pink-2); background: #ffffff0a; border: 1px solid var(--line); border-radius: 8px; font-size: 22px; line-height: 1; transition: transform .2s ease, background .2s ease; }
.panel-collapse-button:hover { background: #ffffff15; }
.panel-collapse-button { animation: panel-collapse-pulse 2s ease-in-out infinite; }
@keyframes panel-collapse-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--theme-accent, var(--pink)) 0%, transparent); } 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-accent, var(--pink)) 24%, transparent); } }
@media (prefers-reduced-motion: reduce) { .panel-collapse-button { animation: none; } }
.count-pill { display: grid; min-width: 26px; height: 26px; place-items: center; color: var(--pink-2); background: #ff72b51a; border-radius: 13px; }
.panel-tabs { position: sticky; top: 0; z-index: 4; display: flex; background: var(--panel); border-bottom: 1px solid var(--line); }
.panel-tabs button { flex: 1; padding: 14px 8px 11px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); }
.panel-tabs button.active { color: var(--text); border-color: var(--pink); }
.media-tabs { position: static; margin-bottom: 10px; }
.upload-button { width: 100%; display: grid; gap: 2px; place-items: center; padding: 14px 8px; color: var(--pink-2); background: #52c7b80b; border: 1px dashed #52c7b855; border-radius: 8px; }
.wechat-upload-notice { display: grid; gap: 3px; margin-top: 7px; padding: 9px 10px; color: var(--text); background: color-mix(in srgb, #f0bd4f 12%, transparent); border: 1px solid color-mix(in srgb, #f0bd4f 48%, var(--line)); border-radius: 8px; }
.wechat-upload-notice strong { color: #ffd982; font-size: 11px; }
.wechat-upload-notice p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.upload-button span { font-size: 24px; }.upload-button small { color: var(--muted); font-size: 10px; }
.upload-button.needs-first-video { border-style: solid; animation: first-video-upload-attention 1.45s ease-in-out infinite; }
@keyframes first-video-upload-attention {
  0%, 100% { color: var(--pink-2); border-color: color-mix(in srgb, var(--pink) 58%, transparent); background: color-mix(in srgb, var(--pink) 7%, var(--theme-item, #ffffff08)); box-shadow: 0 8px 20px #0002; }
  50% { color: var(--text); border-color: var(--pink); background: color-mix(in srgb, var(--pink) 17%, var(--theme-item, #ffffff08)); box-shadow: 0 10px 28px #0005, inset 0 0 0 1px color-mix(in srgb, var(--pink-2) 42%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .upload-button.needs-first-video { animation: none; border-color: var(--pink); background: color-mix(in srgb, var(--pink) 13%, var(--theme-item, #ffffff08)); box-shadow: 0 8px 20px #0003; }
}
.folder-upload-button { width: 100%; display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; margin-top: 7px; padding: 9px 11px; text-align: left; color: var(--text); background: #ffffff08; border: 1px solid var(--line); border-radius: 10px; }
.folder-upload-button > span { grid-row: 1 / 3; font-size: 22px; }.folder-upload-button strong { font-size: 11px; }.folder-upload-button small { color: var(--muted); font-size: 9px; }
.folder-upload-button:hover { border-color: #52c7b855; background: #52c7b80b; }
.progress-wrap { margin: 10px 0; padding: 9px; background: #ffffff06; border: 1px solid var(--line); border-radius: 9px; }
.progress-track { height: 5px; overflow: hidden; background: #ffffff10; border-radius: 8px; }
.progress-track span { display: block; width: 0; height: 100%; background: var(--pink); }
.progress-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 7px; }.progress-wrap small { min-width: 0; color: var(--muted); overflow-wrap: anywhere; }
.danger-text-button { flex: 0 0 auto; padding: 3px 6px; color: #ffdce2; background: #ff66751d; border: 1px solid #ff667544; border-radius: 6px; font-size: 9px; }
.file-list { display: grid; gap: 9px; margin-top: 12px; }
.file-card { position: relative; overflow: hidden; background: #ffffff08; border: 1px solid transparent; border-radius: 8px; transition: .16s ease; }
.file-card:hover, .file-card.active { border-color: #52c7b866; transform: translateY(-1px); }.file-card.pending { border-color: #e9bd6866; }
.file-thumb { width: 100%; aspect-ratio: 16/8; display: grid; place-items: center; object-fit: cover; color: #ffffff77; font-size: 30px; background: #20282e; }
.file-body { padding: 9px; }.file-body strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-meta, .file-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; color: var(--muted); font-size: 9px; }.file-tags span { padding: 3px 5px; background: #ffffff0b; border-radius: 5px; }
.file-actions { display: flex; gap: 5px; padding: 0 9px 9px; }.file-actions button { flex: 1; padding: 5px; border: 0; color: var(--muted); background: #ffffff08; border-radius: 6px; font-size: 10px; }
.queue-title { display: grid; gap: 8px; }.queue-list { margin: 12px 0; padding: 0; list-style: none; counter-reset: queue; }
.queue-list li { counter-increment: queue; display: flex; align-items: center; gap: 7px; padding: 9px; margin-bottom: 6px; background: #ffffff07; border-radius: 8px; }
.queue-list li::before { content: counter(queue, decimal-leading-zero); color: var(--pink); }.queue-list li span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.queue-list button { border: 0; background: transparent; color: var(--muted); }
.theater { position: relative; min-width: 0; display: grid; grid-template-areas: "marquee" "status" "mobile-nav" "toolbar" "owner" "player" "chat"; grid-template-rows: auto auto auto auto auto minmax(250px, 1fr) minmax(180px, .55fr); background: #090c0e; transition: background .28s ease, box-shadow .28s ease; }
.room-marquee { grid-area: marquee; }
.status-card { grid-area: status; }
.mobile-module-nav { grid-area: mobile-nav; }
.theater-toolbar { grid-area: toolbar; }
.owner-controls { grid-area: owner; }
.player-container { grid-area: player; }
.chat-panel { grid-area: chat; }
.theater.lights-on { background: #15201e; box-shadow: inset 0 0 110px #62d39f12; }
.theater.lights-on .theater-toolbar, .theater.lights-on .owner-controls, .theater.lights-on .chat-panel, .theater.lights-on .status-card > div { background-color: #2a1b2d; }
.theater.lights-on .player-container { background: #160e18; box-shadow: 0 0 48px #ff84c244, inset 0 0 70px #ffb7dd10; }
body.ambient-light-on { --bg: #14201d; --panel: #18231f; --panel-2: #202a27; --panel-3: #293530; background: #14201d; }
body.ambient-light-on .topbar, body.ambient-light-on .side-panel { background-color: #18231ff2; }
.status-card { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); }
.status-card > div { min-width: 0; display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: #15101a; }.status-card > div > span { font-size: 17px; }.status-card p { min-width: 0; display: grid; margin: 0; }.status-card small { color: var(--muted); font-size: 9px; }.status-card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.theater-toolbar, .owner-controls { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; background: #17101e; border-bottom: 1px solid var(--line); }
.toolbar-buttons, .owner-controls { display: flex; align-items: center; flex-wrap: wrap; }.toolbar-buttons { gap: 5px; }
.compact-button, .icon-button { border: 1px solid var(--line); background: #ffffff09; border-radius: 8px; padding: 7px 9px; font-size: 11px; }.compact-button:hover { background: #ffffff12; }.compact-button.accent { color: var(--pink-2); }.control-button { min-width: 37px; }
.screen-share-hint { color: var(--muted); font-size: 9px; white-space: nowrap; }
.audio-share-room-status { position: absolute; z-index: 18; left: 12px; right: 12px; bottom: var(--audio-share-bottom, 58px); display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; padding: 9px 10px; color: var(--text); background: color-mix(in srgb, var(--panel) 94%, transparent); border: 1px solid var(--line); border-radius: 7px; box-shadow: var(--shadow); }
.audio-share-room-status span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.audio-share-room-status button { flex: 0 0 auto; min-height: 32px; padding: 6px 9px; color: var(--theme-accent-ink, var(--bg)); background: var(--theme-accent, var(--yellow)); border: 0; border-radius: 6px; font-weight: 700; }
.audio-share-room-status.audio-ready button { display: none; }
.volume-control { width: 144px; display: flex; align-items: center; gap: 5px; margin: 0; }.volume-control input { min-width: 0; padding: 0; }.volume-mute-button { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; padding: 0; color: var(--pink-2); background: #ffffff09; border: 1px solid var(--line); border-radius: 7px; }.volume-mute-button:hover, .volume-mute-button[aria-pressed="true"] { color: var(--text); background: color-mix(in srgb, var(--pink) 18%, transparent); border-color: color-mix(in srgb, var(--pink) 58%, transparent); }
.owner-controls { justify-content: flex-start; background: #17231f; color: #dfece8; }.owner-controls label { display: flex; align-items: center; gap: 5px; margin: 0; }.owner-controls input { width: auto; }
.player-container { position: relative; min-height: 0; overflow: hidden; display: grid; place-items: center; background: #060508; transition: background .28s ease, box-shadow .28s ease; }
.player-container:fullscreen, .player-container.fullscreen-active { width: 100vw; height: 100vh; background: #000; }
.player-container.fullscreen-active { position: fixed; z-index: 390; inset: 0; }
.player-container:fullscreen .media-view, .player-container.fullscreen-active .media-view { width: 100%; height: 100%; }
.player-container:fullscreen .danmaku-container, .player-container:fullscreen .reaction-layer, .player-container.fullscreen-active .danmaku-container, .player-container.fullscreen-active .reaction-layer { position: fixed; inset: 0; z-index: 2147483643; }
.player-container:fullscreen .resume-playback-button, .player-container.fullscreen-active .resume-playback-button { z-index: 2147483646; }
.media-view { width: 100%; height: 100%; object-fit: contain; border: 0; backface-visibility: hidden; transform: translateZ(0); }.document-view { background: #fff; }.screen-canvas, .screen-video { object-fit: contain; background: #000; }
.text-view { box-sizing: border-box; margin: 0; padding: 28px 32px 88px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; tab-size: 4; color: var(--text); background: var(--theme-stage, #090c0e); font-family: inherit; font-size: 15px; line-height: 1.8; letter-spacing: 0; scrollbar-color: color-mix(in srgb, var(--pink) 60%, transparent) color-mix(in srgb, var(--theme-stage, #090c0e) 88%, transparent); scrollbar-width: thin; }
.text-view::selection { color: var(--theme-stage, #090c0e); background: var(--pink-2); }
.text-reader-controls { position: absolute; z-index: 16; left: 50%; bottom: 12px; translate: -50% 0; width: min(620px, calc(100% - 24px)); display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--theme-panel, #171419) 94%, transparent); box-shadow: 0 8px 28px #0008; }
.text-reader-controls label { display: inline-flex; align-items: center; gap: 5px; margin: 0; color: var(--muted); white-space: nowrap; }
.text-reader-controls input { width: 70px; min-height: 36px; padding: 5px 7px; text-align: center; }
.text-reader-controls button { min-height: 36px; padding: 6px 12px; }
.text-reader-controls > output { min-width: 42px; color: var(--pink-2); text-align: right; font-variant-numeric: tabular-nums; }
.empty-stage { display: grid; gap: 8px; place-items: center; text-align: center; color: var(--muted); }.empty-stage span { font-size: 52px; filter: grayscale(.4); }.empty-stage strong { color: #ddd1e2; font-size: 17px; }.empty-stage small { max-width: 360px; }
.shared-web-empty { position: absolute; z-index: 11; inset: 0; display: grid; align-content: center; justify-items: center; gap: 8px; padding: 24px; text-align: center; color: var(--muted); background: var(--theme-stage, #090c0e); }.shared-web-empty strong { color: var(--text); }.shared-web-empty.is-hidden { display: none; }
.download-view { display: grid; gap: 12px; place-items: center; }.download-view span { font-size: 50px; }
.danmaku-container, .reaction-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 12; }
.danmaku-item { position: absolute; right: -30%; white-space: nowrap; font-weight: 800; font-size: clamp(15px, 1.5vw, 23px); text-shadow: 0 2px 5px #000, 0 0 2px #000; animation: danmaku 8s linear forwards; }
@keyframes danmaku { to { transform: translateX(-150vw); } }
.reaction-pop { position: absolute; right: 8%; bottom: 10%; font-size: 34px; animation: floatReaction 2.3s ease-out forwards; }
@keyframes floatReaction { 0%{opacity:0;transform:translateY(0) scale(.5)}20%{opacity:1;transform:translateY(-30px) scale(1.2)}100%{opacity:0;transform:translateY(-230px) scale(.8)} }
.share-status, .sync-notice { position: absolute; z-index: 15; top: 12px; padding: 7px 11px; border-radius: 20px; background: #110c16dd; }.share-status { left: 12px; }.sync-notice { right: 12px; color: var(--pink-2); display: inline-flex; align-items: center; gap: 6px; }.sync-notice > span { min-width: 0; }.sync-notice .notice-close-button { width: 22px; height: 22px; padding: 0; flex: 0 0 auto; }
.resume-playback-button { position: absolute; z-index: 16; left: 50%; top: 50%; max-width: calc(100% - 32px); padding: 11px 17px; color: #08201c; background: var(--pink); border: 0; border-radius: 8px; box-shadow: 0 12px 30px #0009; font-weight: 800; transform: translate(-50%, -50%); white-space: nowrap; }
.player-info { position: absolute; z-index: 15; left: 12px; bottom: 54px; display: flex; gap: 6px; transition: opacity .2s ease; }.player-info span { padding: 4px 7px; background: #0d0910dd; border: 1px solid var(--line); border-radius: 6px; font-size: 9px; }
.player-container.audio-share-active .player-info { bottom: var(--audio-share-info-bottom, 108px); }
.player-progress-bar { position: absolute; z-index: 17; left: 12px; right: 12px; bottom: 10px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 9px; color: #fff; background: color-mix(in srgb, var(--theme-player, #000) 78%, transparent); border: 1px solid #ffffff22; border-radius: 8px; box-shadow: 0 8px 24px #0008; backdrop-filter: blur(8px); opacity: .92; transition: opacity .2s ease, transform .2s ease; }
.player-progress-bar.is-hidden { display: none; }
.player-progress-bar span { min-width: 38px; font-size: 10px; font-variant-numeric: tabular-nums; text-align: center; }
.player-progress-bar input[type="range"] { width: 100%; min-width: 0; height: 18px; padding: 0; accent-color: var(--theme-accent, var(--pink)); cursor: pointer; }
.player-container:fullscreen .player-progress-bar, .player-container.fullscreen-active .player-progress-bar { left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); z-index: 2147483646; }
.player-container:fullscreen .audio-share-room-status, .player-container.fullscreen-active .audio-share-room-status { left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); bottom: var(--audio-share-bottom, max(60px, calc(env(safe-area-inset-bottom) + 58px))); z-index: 2147483646; }
.player-container:fullscreen:not(.controls-visible) .player-progress-bar, .player-container.fullscreen-active:not(.controls-visible) .player-progress-bar { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px); }
.fullscreen-overlay { display: none; }
.fullscreen-show-button { position: fixed; z-index: 2147483647; right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); min-height: 44px; padding: 9px 14px; color: #fff; background: #11171bea; border: 1px solid #ffffff2b; border-radius: 8px; box-shadow: 0 12px 32px #000a; }
.fullscreen-show-button.is-hidden { display: none; }
.fullscreen-lock-button { display: none; }
.player-container:fullscreen .fullscreen-lock-button, .player-container.fullscreen-active .fullscreen-lock-button { position: fixed; z-index: 2147483647; left: max(14px, env(safe-area-inset-left)); top: max(14px, env(safe-area-inset-top)); width: 48px; min-width: 48px; height: 48px; display: grid; place-items: center; gap: 0; padding: 4px; color: #fff; background: #11171bea; border: 1px solid #ffffff2b; border-radius: 8px; box-shadow: 0 12px 32px #000a; pointer-events: auto; }
.fullscreen-lock-button span:last-child { font-size: 9px; line-height: 1; }
.player-container.fullscreen-interaction-locked .fullscreen-lock-button { color: var(--pink-2); border-color: var(--pink); background: #151b1ff2; }
.player-container.fullscreen-interaction-locked .player-progress-bar { pointer-events: none; opacity: .45; }
.fullscreen-gesture-indicator { display: none; }
.player-container:fullscreen .fullscreen-gesture-indicator.is-visible, .player-container.fullscreen-active .fullscreen-gesture-indicator.is-visible { position: fixed; z-index: 2147483646; left: 50%; top: 50%; min-width: 120px; display: block; padding: 10px 14px; color: #fff; background: #0b1013dc; border: 1px solid #ffffff2b; border-radius: 8px; box-shadow: 0 12px 30px #0009; text-align: center; transform: translate(-50%, -50%); pointer-events: none; }
.fullscreen-shortcut-hint { display: none; }
.player-container:fullscreen .fullscreen-shortcut-hint, .player-container.fullscreen-active .fullscreen-shortcut-hint { position: fixed; z-index: 2147483647; left: 50%; top: max(76px, calc(env(safe-area-inset-top) + 62px)); width: min(540px, calc(100vw - 28px)); display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 10px 12px; color: #fff; background: #11171bf2; border: 1px solid #ffffff2b; border-radius: 8px; box-shadow: 0 16px 42px #000b; transform: translateX(-50%); pointer-events: auto; }
.fullscreen-shortcut-hint.is-hidden { display: none !important; }
.fullscreen-shortcut-hint > div { min-width: 0; display: grid; gap: 2px; }
.fullscreen-shortcut-hint small { color: #c7d0d4; line-height: 1.35; }
.fullscreen-shortcut-hint button { min-height: 36px; padding: 7px 10px; color: #fff; background: #ffffff0d; border: 1px solid #ffffff24; border-radius: 7px; white-space: nowrap; }
.player-container:fullscreen .fullscreen-overlay, .player-container.fullscreen-active .fullscreen-overlay { position: fixed; z-index: 2147483647; inset: 0; display: block; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility .2s ease; }
.player-container:fullscreen.controls-visible .fullscreen-overlay, .player-container.fullscreen-active.controls-visible .fullscreen-overlay { opacity: 1; visibility: visible; }
.fullscreen-actions { position: absolute; top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); display: flex; gap: 8px; pointer-events: auto; }
.fullscreen-actions button { min-height: 40px; padding: 8px 13px; color: #fff; background: #100b16df; border: 1px solid #ffffff2b; border-radius: 10px; box-shadow: 0 10px 30px #0007; }
.fullscreen-hide-button { color: var(--pink-2) !important; }
.fullscreen-chat-card { position: absolute; top: max(68px, calc(env(safe-area-inset-top) + 54px)); right: max(14px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); width: min(390px, 38vw); min-width: 300px; display: grid; grid-template-rows: auto minmax(90px, 1fr) auto auto; overflow: hidden; color: var(--text); background: #151b1fee; border: 1px solid #ffffff24; border-radius: 8px; box-shadow: 0 22px 70px #000b; backdrop-filter: blur(16px); pointer-events: auto; }
.fullscreen-chat-card > header { display: grid; grid-template-columns: 1fr minmax(105px, 145px); gap: 8px; align-items: center; padding: 10px 11px; border-bottom: 1px solid var(--line); }
.fullscreen-chat-card > header select { padding: 7px 9px; }
.fullscreen-chat-history { min-height: 0; overflow-y: auto; padding: 10px 12px; overscroll-behavior: contain; }
.fullscreen-chat-form { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 7px; padding: 9px 10px max(9px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.fullscreen-chat-form select { grid-column: 1 / -1; }.fullscreen-chat-form input { min-width: 0; }.fullscreen-chat-form .send-button { min-width: 64px; }
.input-with-action { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.switch-room-card { width: min(620px, 100%); }
.switch-room-heading, .switch-owned-room-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.switch-room-heading { padding-right: 38px; }
.switch-room-heading h2 { margin: 0 0 4px; }
.switch-room-heading p { margin: 0; }
.switch-owned-room-section { margin-top: 16px; padding-block: 12px; border-block: 1px solid var(--line); }
.switch-owned-room-title small { color: var(--muted); font-variant-numeric: tabular-nums; }
.switch-room-search-label { display: block; margin-top: 11px; color: var(--muted); font-size: 11px; }
.switch-room-search { width: 100%; min-height: 40px; margin-top: 5px; }
.switch-owned-room-list { display: grid; gap: 8px; max-height: min(560px, 60dvh); margin-top: 9px; overflow-y: auto; scrollbar-color: var(--theme-accent, var(--pink)) transparent; scrollbar-width: thin; }
.switch-owned-room { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 9px; padding: 10px; background: var(--theme-item, #ffffff07); border: 1px solid var(--line); border-radius: 7px; }
.switch-owned-room.current { border-color: color-mix(in srgb, var(--pink) 56%, var(--line)); background: color-mix(in srgb, var(--pink) 9%, var(--theme-item, #ffffff07)); }
.switch-owned-room > div { min-width: 0; display: grid; gap: 3px; }
.switch-owned-room strong, .switch-owned-room small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.switch-owned-room small, .switch-owned-room-empty { color: var(--muted); }
.switch-owned-room > .global-room-metrics, .switch-owned-room > .room-directory-playback, .switch-owned-room > .room-directory-members, .switch-owned-room > .actions { grid-column: 1 / -1; }
.switch-owned-room button { min-width: 88px; min-height: 36px; padding: 7px 10px; }
.switch-owned-room-empty { margin: 4px 0; padding: 12px; text-align: center; background: var(--theme-item, #ffffff05); border-radius: 7px; }
.switch-owned-room-empty p { margin: 0 0 9px; }
.room-directory-toolbar { position: sticky; z-index: 2; top: 0; display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 8px; background: color-mix(in srgb, var(--panel) 92%, transparent); border: 1px solid var(--line); border-radius: 7px; backdrop-filter: blur(12px); }
.room-directory-toolbar .room-quota-summary { margin-right: auto; }
.room-directory-card { display: grid !important; gap: 8px; align-items: stretch; }
.room-directory-card header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 9px; align-items: start; }
.room-directory-card header > div { display: grid; min-width: 0; gap: 3px; }
.room-directory-card header strong, .room-directory-card header small, .room-directory-playback { overflow-wrap: anywhere; }
.room-directory-card header small, .room-directory-playback, .room-directory-members small { color: var(--muted); font-size: 10px; }
.room-directory-playback { margin: 0; }
.room-directory-members { display: grid; gap: 4px; max-height: 128px; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.room-directory-members li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 7px; background: color-mix(in srgb, var(--theme-item, #00000018) 78%, transparent); border-radius: 5px; }
.room-directory-card .actions, .switch-owned-room .actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.room-directory-empty { display: grid; justify-items: center; gap: 10px; padding: 18px; border: 1px dashed var(--line); border-radius: 7px; }
.switch-room-divider { display: flex; align-items: center; gap: 10px; margin: 12px 0 2px; color: var(--muted); font-size: 10px; }
.switch-room-divider::before, .switch-room-divider::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.icon-only { width: 38px; min-width: 38px; padding-inline: 0 !important; display: inline-grid; place-items: center; }
.control-request-overlay { position: absolute; z-index: 28; left: 50%; top: 18px; width: min(720px, calc(100% - 28px)); display: grid; grid-template-columns: minmax(180px, 1fr) minmax(140px, 190px) auto auto; gap: 8px; align-items: center; padding: 10px; color: var(--text); background: #151b1ff2; border: 1px solid #e9bd6855; border-radius: 8px; box-shadow: 0 14px 40px #000a; transform: translateX(-50%); }
.control-request-overlay div { min-width: 0; display: grid; gap: 2px; }.control-request-overlay small { color: var(--muted); }.control-request-overlay button { min-height: 38px; }
.permission-notice { position: absolute; z-index: 2147483647; inset: 0; display: grid; place-items: center; padding: 18px; background: #050708c7; pointer-events: auto; }
.permission-notice-card { width: min(440px, 100%); padding: 22px; background: #1b2226; border: 1px solid #52c7b855; border-radius: 8px; box-shadow: var(--shadow); }.permission-notice-card strong { font-size: 18px; }.permission-notice-card p { color: var(--muted); line-height: 1.7; }.permission-notice-card button { width: 100%; }
.player-container:fullscreen .player-info, .player-container.fullscreen-active .player-info { z-index: 2147483646; opacity: 0; visibility: hidden; }
.player-container:fullscreen.controls-visible .player-info, .player-container.fullscreen-active.controls-visible .player-info { opacity: 1; visibility: visible; }
.player-container:fullscreen:not(.controls-visible) .share-status, .player-container:fullscreen:not(.controls-visible) .sync-notice, .player-container:fullscreen:not(.controls-visible) .resume-playback-button, .player-container.fullscreen-active:not(.controls-visible) .share-status, .player-container.fullscreen-active:not(.controls-visible) .sync-notice, .player-container.fullscreen-active:not(.controls-visible) .resume-playback-button { opacity: 0; visibility: hidden; pointer-events: none; }
.chat-panel { min-height: 0; display: grid; grid-template-rows: auto auto auto auto minmax(70px, 1fr) auto auto auto; background: #15101a; border-top: 1px solid var(--line); }
.chat-panel > .chat-head { grid-row: 1; }
.chat-panel > .chat-view-filters { grid-row: 2; }
.chat-panel > .danmaku-settings-panel { grid-row: 3; }
.chat-panel > .live-voice-bar { grid-row: 4; }
.chat-panel > .chat-history { grid-row: 5; }
.chat-panel > .chat-form { grid-row: 6; }
.chat-panel > .emoji-toolbar { grid-row: 7; }
.chat-panel > .reaction-bar { grid-row: 8; }
.theater.mobile-chat-collapsed { grid-template-rows: auto auto auto minmax(250px, 1fr) auto; }
.chat-panel.mobile-chat-collapsed { min-height: 42px; grid-template-rows: auto; }
.chat-panel.mobile-chat-collapsed > :not(.chat-head) { display: none; }
.chat-panel.mobile-chat-collapsed .chat-head { justify-content: flex-end; }
.chat-panel.mobile-chat-collapsed .chat-modes, .chat-panel.mobile-chat-collapsed #loadHistoryBtn { display: none; }
.chat-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--line); }.chat-modes, .chat-head-actions { display: flex; align-items: center; gap: 4px; }.chat-head-actions { flex: 0 0 auto; }
.chat-mode { border: 0; color: var(--muted); background: transparent; padding: 5px 7px; border-radius: 6px; font-size: 10px; }.chat-mode.active { color: var(--text); background: #ffffff0d; }
.chat-history { min-height: 0; overflow-y: auto; padding: 8px 11px; }
.chat-message { display: flex; gap: 7px; margin: 5px 0; }.chat-message .avatar { display: grid; flex: 0 0 25px; height: 25px; place-items: center; background: #ff72b51d; border-radius: 50%; }.chat-bubble { min-width: 0; }.chat-bubble small { color: var(--muted); font-size: 9px; }.chat-bubble p { display: inline; margin: 0 0 0 6px; word-break: break-word; }.chat-message.private .chat-bubble { color: #e3c8ff; }.chat-message.announcement { padding: 7px; background: #ff72b510; border: 1px solid #52c7b826; }.chat-message.system { align-items: center; padding: 6px 8px; background: color-mix(in srgb, var(--pink) 8%, transparent); border: 1px solid color-mix(in srgb, var(--pink) 34%, transparent); border-radius: 5px; }.chat-message.system .avatar { flex-basis: 34px; width: 34px; border-radius: 5px; color: var(--pink-2); font-size: 9px; font-weight: 700; }.chat-message.system .chat-bubble p { display: block; margin: 2px 0 0; }.chat-message audio { max-width: min(300px, 70vw); height: 27px; }
.chat-form { display: grid; grid-template-columns: minmax(90px, auto) minmax(0, 1fr) auto auto auto auto; gap: 6px; padding: 6px 10px; }.chat-form > input, .chat-form > select { padding: 8px; }.chat-form > select.is-hidden + input { grid-column: 1 / 3; }
.emoji-bar { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 4px; max-height: 150px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 7px 10px; border-top: 1px solid var(--line); background: #11171b; }.emoji-bar button { width: 34px; height: 32px; flex: 0 0 34px; padding: 0; font-size: 18px; background: transparent; border: 1px solid transparent; border-radius: 6px; }.emoji-bar button:hover { border-color: var(--line); background: #ffffff0a; }
.chat-image { display: block; max-width: min(320px, 68vw); max-height: 240px; margin-top: 6px; object-fit: contain; border: 1px solid var(--line); border-radius: 6px; cursor: zoom-in; }
.icon-button { min-width: 37px; }.reaction-bar { display: flex; align-items: center; gap: 5px; padding: 0 10px 6px; color: var(--muted); font-size: 9px; }.reaction-bar button { border: 0; background: transparent; font-size: 17px; transition: transform .15s; }.reaction-bar button:hover { transform: scale(1.25); }
.tab-content { padding: 15px; }.user-list { display: grid; gap: 8px; }
.user-card { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 10px; background: #ffffff07; border: 1px solid transparent; border-radius: 11px; }.user-card.owner { border-color: #f3c96a55; }.user-card.unstable { border-color: #f3c96a66; }.user-dot { display: grid; width: 34px; height: 34px; place-items: center; background: #ff72b51c; border-radius: 50%; }.user-info { min-width: 0; display: grid; }.user-info strong { overflow: hidden; text-overflow: ellipsis; }.user-info small { color: var(--muted); font-size: 9px; }.user-role { color: var(--yellow) !important; }.sync-bar { width: 100%; height: 3px; margin: 5px 0 2px; overflow: hidden; appearance: none; border: 0; background: #ffffff10; border-radius: 5px; }.sync-bar::-webkit-progress-bar { background: #ffffff10; }.sync-bar::-webkit-progress-value { background: var(--green); border-radius: 5px; }
.user-card.self { background: color-mix(in srgb, var(--theme-accent, var(--pink)) 13%, #ffffff07); border-color: color-mix(in srgb, var(--theme-accent, var(--pink)) 60%, transparent); }.self-member-label { display: inline-block; margin-left: 5px; padding: 1px 5px; color: var(--theme-accent-ink, #071715); background: var(--theme-accent, var(--pink)); border-radius: 4px; font-size: 9px; vertical-align: 1px; }
.user-actions { display: grid; gap: 3px; }.user-actions button { padding: 3px 5px; border: 0; background: #ffffff09; border-radius: 5px; font-size: 9px; }
.room-code-card { display: grid; gap: 7px; margin-top: 16px; padding: 12px; text-align: center; background: #ffffff06; border: 1px solid var(--line); border-radius: 8px; }.room-code-card strong { color: var(--pink-2); font-size: 24px; letter-spacing: .16em; }.room-code-card code { color: var(--muted); font-size: 10px; }.room-code-card input { text-align: center; font-size: 10px; }.qr-box { padding: 8px; background: white; border-radius: 7px; }.qr-box svg { display: block; width: 100%; height: auto; }
.current-room-banner { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0; padding: 11px 13px; color: var(--text); background: #52c7b810; border: 2px solid var(--pink); border-radius: 8px; }.current-room-banner strong { color: var(--pink-2); }.current-room-banner span { font-weight: 800; text-align: right; overflow-wrap: anywhere; }
.admin-search-field { margin: 10px 0; }.admin-search-field input { min-height: 36px; }
.share-address-label { display: grid; gap: 5px; color: var(--muted); font-size: 10px; text-align: left; }
.login-version-info { margin: 12px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; text-align: center; overflow-wrap: anywhere; }
.warning { padding: 9px; color: #ffe7ac; background: #e9bd6814; border-radius: 8px; }.full { width: 100%; }.settings-card { display: grid; gap: 7px; margin-top: 12px; padding: 11px; background: #ffffff06; border: 1px solid var(--line); border-radius: 8px; }.settings-card h3, .settings-card p { margin: 0; }.settings-card h3 { font-size: 12px; }.settings-card p { color: var(--muted); font-size: 9px; line-height: 1.5; }.settings-card label { margin: 2px 0; font-size: 10px; }.settings-title, .setting-actions { display: flex; align-items: center; justify-content: space-between; gap: 6px; }.setting-actions > * { flex: 1; }.setting-status { word-break: break-all; }.check-line { display: flex !important; align-items: center; gap: 7px; }.blacklist, .pending-list, .account-admin-list, .registration-request-list, .registration-whitelist-list, .permission-group-list { display: grid; gap: 6px; }.admin-row { padding: 8px; background: #ffffff07; border-radius: 7px; }.admin-row header { display: flex; justify-content: space-between; gap: 5px; }.admin-row small { color: var(--muted); }.admin-row .actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }.admin-row button { border: 0; padding: 4px 6px; background: #ffffff0c; border-radius: 5px; font-size: 9px; }
.credential-policy-section { display: grid; gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 7px; background: #ffffff05; }.credential-policy-section h4 { margin: 0; font-size: 10px; color: var(--pink-2); }
.registration-email-verification { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }.registration-email-verification button { min-height: 39px; white-space: nowrap; }
.mail-settings-card { gap: 16px; padding: 16px; }.mail-settings-heading { align-items: flex-start; }.mail-settings-card h4 { margin: 0; font-size: 12px; }.mail-settings-card .eyebrow { color: var(--pink-2); }.mail-status-badge { flex: 0 0 auto; padding: 5px 8px; color: var(--muted); background: #ffffff09; border: 1px solid var(--line); border-radius: 6px; font-size: 9px; font-weight: 800; }.mail-status-badge.is-active { color: var(--theme-accent-ink, #071715); background: var(--pink); border-color: transparent; }
.mail-settings-section { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }.mail-settings-section:first-of-type { padding-top: 0; border-top: 0; }.mail-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 12px; }.mail-toggle-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; padding: 8px 0; }.mail-toggle-grid .check-line { min-height: 34px; margin: 0; }
.mail-template-selectors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }.mail-template-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .9fr); gap: 14px; align-items: stretch; }.mail-template-editor { min-width: 0; display: grid; gap: 9px; }.mail-template-editor textarea { min-height: 390px; resize: vertical; font-family: Consolas, 'SFMono-Regular', monospace; font-size: 10px; line-height: 1.55; white-space: pre; overflow: auto; }.mail-placeholder-list { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }.mail-placeholder-list > span { margin-right: 3px; color: var(--muted); font-size: 9px; }.mail-placeholder-list button { min-height: 27px; padding: 4px 7px; color: var(--pink-2); background: #ffffff08; border: 1px solid var(--line); border-radius: 6px; font-family: Consolas, monospace; font-size: 8px; }
.mail-template-preview-wrap { min-width: 0; display: grid; grid-template-rows: auto minmax(390px, 1fr); overflow: hidden; background: #f3f4f6; border: 1px solid var(--line); border-radius: 8px; }.mail-template-preview-wrap > div { display: grid; gap: 2px; padding: 10px 12px; color: #18181b; background: #fff; border-bottom: 1px solid #d9dbe1; }.mail-template-preview-wrap small { color: #667085; overflow-wrap: anywhere; }.mail-template-preview-wrap iframe { width: 100%; height: 100%; min-height: 390px; border: 0; background: #f4f4f5; }.mail-test-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }.mail-test-row button { min-height: 39px; }.mail-save-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 11px; border-top: 1px solid var(--line); }.mail-save-bar .setting-status { margin-right: auto; }.mail-save-bar button { min-width: 150px; }
.mail-template-selectors { align-items: end; }
.mail-template-selectors > button { min-height: 39px; }
.mail-tutorial-panel { padding: 12px 14px; color: var(--muted); background: color-mix(in srgb, var(--theme-accent, var(--pink)) 7%, var(--theme-panel-2)); border: 1px solid color-mix(in srgb, var(--theme-accent, var(--pink)) 32%, var(--line)); border-radius: 7px; }
.mail-tutorial-panel h5 { margin: 0 0 8px; color: var(--text); font-size: 12px; }
.mail-tutorial-panel ol { display: grid; gap: 5px; margin: 0; padding-left: 20px; line-height: 1.55; }
.mail-tutorial-panel p { margin: 9px 0 0; }
.mail-tutorial-panel code { color: var(--theme-accent, var(--pink-2)); }
.verification-code-toolbar { grid-template-columns: repeat(2, minmax(120px, .3fr)) minmax(180px, 1fr) auto auto; }
.verification-code-row { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
.verification-code-row > .manage-select-row { display: flex; padding: 0; border: 0; background: transparent; }
.verification-code-row p, .verification-code-row small { margin: 3px 0 0; color: var(--muted); overflow-wrap: anywhere; }
.login-music-settings-card audio { width: 100%; min-height: 42px; margin-top: 8px; }
.login-music-controls { display: grid; grid-template-columns: minmax(220px, 1fr) auto; align-items: end; gap: 12px; }
.login-music-controls > label:first-child { display: grid; grid-template-columns: auto minmax(120px, 1fr) 48px; align-items: center; gap: 8px; }
.login-music-controls input[type="range"] { min-width: 0; padding: 0; }
#loginMusicAudio { display: none; }
.danger-zone { border-color: #ff75824a; background: #ff75820a; }.permission-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 10px; }.permission-group-editor { display: grid; gap: 7px; padding-top: 9px; border-top: 1px solid var(--line); }.management-auth { position: sticky; z-index: 5; top: -15px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; margin: 8px 0; padding: 10px; background: #1b2126f5; border: 1px solid var(--line); border-radius: 8px; }.management-auth label { margin: 0; }.management-auth button { min-height: 38px; }
.management-command-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }.management-command { min-height: 110px; display: grid; align-content: center; gap: 5px; text-align: left; padding: 16px; color: var(--text); background: #151b1f; border: 1px solid var(--line); border-radius: 8px; }.management-command:hover { border-color: #52c7b866; }.management-command small { color: var(--muted); }
.modal { position: fixed; z-index: 200; inset: 0; display: grid; place-items: center; padding: 18px; background: #06090acc; backdrop-filter: blur(8px); }.modal-card { position: relative; width: min(500px, 100%); max-height: calc(100vh - 36px); overflow-y: auto; padding: 28px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }.modal-close { position: absolute; z-index: 8; right: 13px; top: 10px; border: 0; background: transparent; color: var(--muted); font-size: 25px; }
.modal-form { display: grid; gap: 3px; margin-top: 16px; }
.management-editor-modal-card { width: min(680px, 100%); padding: 24px; border-top: 1px solid var(--line); }
.management-editor-modal-card h2 { margin: 2px 0 12px; }
.app-dialog { z-index: 500; }.player-container:fullscreen > .app-dialog, .player-container.fullscreen-active > .app-dialog { z-index: 2147483647; }.app-dialog-card { width: min(460px, 100%); overflow: visible; }.app-dialog-card h2 { margin: 4px 0 8px; }.app-dialog-card form { display: grid; gap: 8px; }.app-dialog-card label { margin: 4px 0 0; }.app-dialog-card .muted { margin: 0; line-height: 1.6; overflow-wrap: anywhere; white-space: pre-line; }.app-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 8px; }.app-dialog-actions button { min-width: 88px; }.app-dialog-actions #appDialogFillRiskBtn { margin-right: auto; color: var(--yellow); }.app-dialog-error { margin: 0; color: #ffb7c0; font-size: 11px; }
.app-dialog-actions #appDialogBackBtn:not(.is-hidden) { margin-right: auto; }.app-dialog-actions #appDialogFillRiskBtn:not(.is-hidden) + #appDialogBackBtn:not(.is-hidden) { margin-right: 0; }
.management-modal-card { width: min(820px, 100%); min-height: min(560px, calc(100dvh - 36px)); display: flex; flex-direction: column; }
.management-hub-card { width: min(1080px, 100%); height: min(760px, calc(100dvh - 36px)); overflow: hidden; padding: 0; }.management-hub-layout { height: 100%; display: grid; grid-template-columns: 210px minmax(0, 1fr); }.management-nav { display: grid; align-content: start; gap: 4px; padding: 22px 14px; background: #12171a; border-right: 1px solid var(--line); }.management-nav h2 { margin: 3px 0 16px; }.management-nav button { min-height: 40px; padding: 9px 11px; text-align: left; color: var(--muted); background: transparent; border: 0; border-radius: 7px; }.management-nav button.active { color: #09201c; background: var(--pink); font-weight: 800; }.management-content { min-width: 0; overflow-y: auto; padding: 18px 24px 28px; }.management-content #adminTab { padding: 0; }.management-content [data-management-panel].management-filtered { display: none !important; }
.management-content, .account-content { min-height: 0; scrollbar-color: var(--theme-accent, var(--pink)) color-mix(in srgb, var(--panel-2) 86%, transparent); scrollbar-width: thin; }
.management-theme-status { display: inline-block; margin-left: 8px; color: var(--theme-accent, var(--pink-2)); font-size: .55em; font-weight: 600; vertical-align: middle; white-space: nowrap; }
.management-content::-webkit-scrollbar, .account-content::-webkit-scrollbar { width: 9px; }.management-content::-webkit-scrollbar-track, .account-content::-webkit-scrollbar-track { background: color-mix(in srgb, var(--panel-2) 88%, transparent); }.management-content::-webkit-scrollbar-thumb, .account-content::-webkit-scrollbar-thumb { background: var(--theme-accent, var(--pink)); border: 2px solid color-mix(in srgb, var(--panel-2) 92%, transparent); border-radius: 6px; }
.live-voice-bar { display: flex; align-items: center; gap: 7px; padding: 8px 10px; background: #ffffff06; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.live-voice-bar > div { display: grid; min-width: 0; margin-right: auto; }.live-voice-bar strong { font-size: 11px; }.live-voice-bar small { color: var(--muted); font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.live-voice-bar button { flex: 0 0 auto; min-height: 30px; padding: 5px 8px; font-size: 9px; }.live-voice-bar.is-collapsed > :not(:first-child):not(.voice-fold-button) { display: none; }.live-voice-bar.is-collapsed .voice-fold-button { margin-left: auto; }.voice-fold-button { min-width: 82px; }.voice-audio-dock { position: fixed; width: 1px; height: 1px; overflow: hidden; opacity: .01; pointer-events: none; }
.user-card.super-admin { border-color: #6ad9f366; }.user-permissions { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-location-details { grid-column: 1 / -1; margin-top: 5px; padding-top: 5px; border-top: 1px solid var(--line); }.user-location-details summary { cursor: pointer; color: var(--pink-2); font-size: 10px; font-weight: 700; }.user-location-details small { display: block; margin-top: 3px; overflow-wrap: anywhere; }
.account-level-editor { display: grid; grid-template-columns: minmax(110px, .7fr) minmax(170px, 1.3fr) auto; gap: 7px; align-items: end; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }.account-level-editor label { display: grid; gap: 4px; }.account-level-editor button { min-height: 34px; }
.level-progress-card { display: grid; gap: 8px; margin: 12px 0; padding: 12px; background: #ffffff07; border: 1px solid var(--line); border-radius: 8px; }.level-progress-card > div { display: flex; justify-content: space-between; gap: 10px; }.level-progress-card small { color: var(--muted); }.level-progress-card progress { width: 100%; height: 7px; accent-color: var(--pink); }
.bulk-room-toolbar { position: sticky; z-index: 3; top: 66px; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 10px; background: #161d21f5; border: 1px solid var(--line); border-radius: 8px; }.bulk-room-toolbar label { margin: 0 auto 0 0; }.bulk-room-toolbar button { min-width: 118px; min-height: 34px; }
.global-room-list { display: grid; gap: 9px; }.global-room-item { display: grid; gap: 7px; padding: 11px; background: #ffffff07; border: 1px solid var(--line); border-radius: 8px; min-width: 0; }.global-room-item:has([data-global-room-select]:checked) { border-color: #52c7b86b; background: #52c7b80b; }.global-room-item header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start; }.global-room-item header > div { display: grid; min-width: 0; }.global-room-select { display: flex !important; align-items: center; gap: 5px; margin: 0; padding: 3px 6px; color: var(--muted); background: #00000018; border-radius: 5px; font-size: 9px; }.global-room-select input { width: auto; }.global-room-item header strong, .global-room-item header small, .global-room-item p { overflow-wrap: anywhere; }.global-room-item header small, .global-room-item p, .global-room-item li span { color: var(--muted); font-size: 10px; }.global-room-item p { margin: 0; }.global-room-item ul { display: grid; gap: 4px; max-height: 150px; margin: 0; padding: 0; overflow-y: auto; list-style: none; }.global-room-item li { display: flex; justify-content: space-between; gap: 8px; padding: 5px 7px; background: #00000018; border-radius: 5px; }.global-room-item .actions { display: flex; flex-wrap: wrap; gap: 6px; }.global-room-item .actions button { min-height: 32px; padding: 6px 9px; }
.global-room-item.is-current-room { border-color: var(--pink); background: color-mix(in srgb, var(--pink) 9%, transparent); animation: current-room-pulse 1.7s ease-in-out infinite; }
@keyframes current-room-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pink) 0%, transparent); } 50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--pink) 28%, transparent); } }
.file-panel.is-drop-target { outline: 2px dashed var(--pink); outline-offset: -6px; background: #52c7b810; }
.management-modal-card h2 { margin: 4px 0 10px; }
.manage-toolbar { display: grid; grid-template-columns: minmax(180px, 1fr) auto; gap: 12px; align-items: end; margin: 8px 0 12px; padding: 10px; background: #ffffff06; border: 1px solid var(--line); border-radius: 10px; }
.manage-toolbar label { margin: 0; }.manage-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.manage-list { flex: 1 1 auto; min-height: 180px; overflow: auto; padding: 8px; background: #100b16a6; border: 1px solid var(--line); border-radius: 11px; overscroll-behavior: contain; }
.manage-list > .muted { text-align: center; padding: 28px 8px; }
.operation-history-list { margin-top: 12px; }
.history-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px; margin-bottom: 7px; background: #ffffff07; border: 1px solid transparent; border-radius: 9px; }
.history-row:hover { border-color: #ff72b544; }.history-row.undone { opacity: .62; }.history-row > div { min-width: 0; }.history-row p { margin: 3px 0; overflow-wrap: anywhere; }.history-row small, .history-state { color: var(--muted); font-size: 9px; }.history-row button { min-width: 58px; padding: 6px 8px; color: var(--pink-2); background: #ff72b512; border: 1px solid #ff72b533; border-radius: 7px; }
.lan-room-row { grid-template-columns: minmax(0, 1fr) auto; }
.lan-room-row.is-selectable { grid-template-columns: auto minmax(0, 1fr) auto; }
.lan-room-row > .check-line { margin: 0; }
#lanRoomList { align-content: start; grid-auto-rows: max-content; }
.admin-action-note { color: var(--muted); font-size: 9px; line-height: 1.45; }
.admin-inline-editor { display: flex; flex-wrap: wrap; align-items: end; gap: 6px; margin-top: 7px; padding: 7px; background: #ff72b50a; border: 1px solid #ff72b52b; border-radius: 8px; }.admin-inline-editor label { flex: 1 1 180px; margin: 0; }.admin-inline-editor input { min-width: 0; }.admin-inline-editor button { min-height: 30px; padding: 6px 9px; }
.chat-context-menu { position: fixed; z-index: 420; min-width: 190px; padding: 6px; background: #2a1b32f5; border: 1px solid var(--line); border-radius: 9px; box-shadow: var(--shadow); }
.player-container:fullscreen > .chat-context-menu, .player-container.fullscreen-active > .chat-context-menu { z-index: 2147483647; }
.chat-context-menu button { width: 100%; padding: 9px 10px; text-align: left; color: #ffdce2; background: transparent; border: 0; border-radius: 6px; }
.chat-context-menu button:hover, .chat-context-menu button:focus-visible { background: #ff667522; outline: none; }
.account-modal-card { width: min(920px, 100%); height: min(680px, calc(100vh - 36px)); }.account-layout { height: 100%; display: grid; grid-template-columns: 170px 1fr; gap: 18px; }.account-nav { display: grid; align-content: start; gap: 4px; padding-right: 14px; border-right: 1px solid var(--line); }.account-nav button { padding: 9px 11px; text-align: left; border: 0; background: transparent; border-radius: 8px; }.account-nav button.active { color: var(--pink-2); background: #ff72b512; }.account-content { min-width: 0; overflow-y: auto; }.profile-hero { display: flex; gap: 15px; align-items: center; padding: 18px; background: linear-gradient(135deg, #ff72b51c, #7149ff14); border-radius: 14px; }.profile-avatar { display: grid; width: 62px; height: 62px; overflow: hidden; place-items: center; background: #ff72b522; border-radius: 50%; font-size: 30px; }.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }.profile-hero h2, .profile-hero p { margin: 2px 0; }.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }.stat { padding: 12px; background: #ffffff07; border-radius: 10px; }.stat strong { display: block; font-size: 19px; }.stat small { color: var(--muted); }.profile-list { display: grid; gap: 8px; }.profile-item { display: flex; gap: 10px; align-items: center; padding: 10px; background: #ffffff07; border-radius: 9px; }.profile-item > div { flex: 1; min-width: 0; }.profile-item p { margin: 2px 0; }.profile-item small { color: var(--muted); }.profile-item button { border: 0; background: #ffffff0c; border-radius: 6px; padding: 6px; }
.toast-region { position: fixed; z-index: 300; right: 15px; bottom: 15px; display: grid; gap: 8px; }.toast { max-width: 370px; padding: 10px 13px; background: #2b1e34f5; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); animation: toastIn .2s ease; }.toast.error { border-color: #ff6f8155; }.toast.success { border-color: #65e6aa55; }.toast.with-close { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; align-items: center; }.toast.with-action { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 9px; align-items: center; }.toast > span { min-width: 0; overflow-wrap: anywhere; line-height: 1.45; }.toast button { padding: 5px 7px; color: var(--pink-2); background: #ff72b516; border: 0; border-radius: 6px; }.toast .toast-close, .notice-close-button { width: 28px; height: 28px; padding: 0; color: var(--muted); background: transparent; border: 0; border-radius: 6px; font-size: 18px; line-height: 1; }.toast .toast-close:hover, .notice-close-button:hover { color: var(--text); background: #ffffff12; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }
.reconnect-overlay { position: fixed; z-index: 350; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 24px; text-align: center; background: #0b0710e8; }.reconnect-overlay span { font-size: 44px; }.reconnect-overlay strong { font-size: 20px; }.reconnect-overlay small { max-width: min(520px, 90vw); color: var(--muted); overflow-wrap: anywhere; }.reconnect-overlay button { margin-top: 8px; min-width: 120px; }.reconnect-overlay .reconnect-close-button { position: absolute; top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); min-width: 42px; min-height: 42px; margin: 0; color: var(--text); background: #ffffff0c; border: 1px solid #ffffff24; }

@media (min-width: 925px) {
  .workspace.files-collapsed .file-panel { position: relative; padding: 10px 5px; overflow: hidden; background: #11171b; }
  .workspace.files-collapsed .file-panel > :not(.panel-heading) { display: none; }
  .workspace.files-collapsed .file-panel .panel-heading { justify-content: center; margin: 0; }
  .workspace.files-collapsed .file-panel .panel-heading > div:first-child, .workspace.files-collapsed .file-panel .count-pill { display: none; }
  .workspace.files-collapsed .file-panel::after { content: "影片库"; position: absolute; left: 50%; top: 62px; color: var(--muted); font-size: 10px; writing-mode: vertical-rl; letter-spacing: 0; transform: translateX(-50%); }
  .workspace.members-panel-collapsed .user-panel { position: relative; padding: 10px 5px; overflow: hidden; background: #11171b; }
  .workspace.members-panel-collapsed .user-panel > :not(#usersTab) { display: none; }
  .workspace.members-panel-collapsed .user-panel #usersTab > :not(.panel-heading) { display: none; }
  .workspace.members-panel-collapsed .user-panel .panel-heading { justify-content: center; margin: 0; }
  .workspace.members-panel-collapsed .user-panel .panel-heading > div:first-child,
  .workspace.members-panel-collapsed .user-panel .member-heading-actions > :not(.user-panel-collapse-button) { display: none; }
  .workspace.members-panel-collapsed .user-panel-collapse-button { display: grid; margin: 0 auto; }
  .workspace.members-panel-collapsed .user-panel::after { content: "成员"; position: absolute; left: 50%; top: 62px; color: var(--muted); font-size: 10px; writing-mode: vertical-rl; letter-spacing: 0; transform: translateX(-50%); }
}
@media (min-width: 925px) and (max-width: 1450px) {
  .topbar { gap: 14px; padding-inline: 12px; }
  .brand { flex-basis: 185px; min-width: 185px; }
  .room-header { min-width: 200px; gap: 22px; }
  .topbar-actions { gap: 4px; }
  .header-feature-button { flex: 0 0 34px; width: 34px; padding: 6px; justify-content: center; }
  .header-feature-button .button-label { display: inline !important; }
}
@media (min-width: 925px) and (max-width: 1120px) { .workspace.files-collapsed { grid-template-columns: 48px minmax(430px, 1fr) 250px; } .workspace.members-panel-collapsed { grid-template-columns: 285px minmax(430px, 1fr) 48px; } .workspace.files-collapsed.members-panel-collapsed { grid-template-columns: 48px minmax(430px, 1fr) 48px; } }
@media (min-width: 1121px) and (max-width: 1699px) { .workspace.files-collapsed { grid-template-columns: 48px minmax(480px, 1fr) 286px; } .workspace.members-panel-collapsed { grid-template-columns: 285px minmax(480px, 1fr) 48px; } .workspace.files-collapsed.members-panel-collapsed { grid-template-columns: 48px minmax(480px, 1fr) 48px; } }
@media (min-width: 1700px) { .workspace.files-collapsed { grid-template-columns: 52px minmax(700px, 1fr) 340px; } .workspace.members-panel-collapsed { grid-template-columns: 340px minmax(700px, 1fr) 52px; } .workspace.files-collapsed.members-panel-collapsed { grid-template-columns: 52px minmax(700px, 1fr) 52px; } }

@media (min-width: 1700px) {
  body { font-size: 15px; }.workspace { grid-template-columns: 340px minmax(700px, 1fr) 340px; }.player-container { min-height: 420px; }
}
@media (max-width: 1120px) {
  .workspace { grid-template-columns: 245px minmax(430px, 1fr) 250px; }.room-header { display: none; }.status-card > div:nth-child(3) { display: none; }.status-card { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 925px) and (max-width: 1500px) {
  .topbar { gap: 10px; }
  .room-header { display: none; }
  .header-feature-button { min-width: 34px; justify-content: center; }
  .header-feature-button .button-label { display: inline !important; }
}
@media (max-width: 924px) {
  body { overflow: auto; overflow-x: hidden; }.topbar { position: sticky; top: 0; min-width: 0; }.brand { flex: 0 1 auto; min-width: 0; }.brand small, .link-button:not(.share-link-button), .status-badge span { display: none; }.share-link-button { flex: 0 0 auto; padding: 7px; font-size: 10px; }.account-button span:nth-child(2) { display: none; }
  .topbar-actions { min-width: 0; max-width: calc(100vw - 95px); overflow-x: auto; scrollbar-width: none; }.topbar-actions::-webkit-scrollbar { display: none; }.header-feature-button { flex: 0 0 auto; min-width: max-content; padding: 6px 8px; justify-content: center; }.header-feature-button .button-label { display: inline !important; }
  /* Keep mobile login scrolling on the document instead of a nested fixed-height scroller. */
  main { width: 100%; height: auto; min-height: calc(100dvh - 58px); overflow: visible; }.login-page { display: block; min-height: calc(100dvh - 58px); height: auto; overflow: visible; touch-action: pan-y; -webkit-overflow-scrolling: touch; }.auth-card { margin: 32px auto; }
  .workspace { display: block; position: relative; }.theater { height: 100%; grid-template-rows: auto auto auto auto auto minmax(260px, 48vh) minmax(220px, 1fr); }
  .side-panel { position: fixed; z-index: 120; top: 58px; bottom: 0; width: min(92vw, 380px); box-shadow: var(--shadow); transition: transform .22s ease; }.file-panel { left: 0; transform: translateX(-110%); }.user-panel { right: 0; transform: translateX(110%); }.side-panel.mobile-open { transform: translateX(0); }.user-panel-collapse-button { display: none; }
  .mobile-only { display: inline-block; }.mobile-panel-close { position: sticky; z-index: 10; top: 0; width: 100%; margin: -15px 0 12px; padding: 12px; border: 0; color: var(--pink-2); background: #24182df5; }.user-panel .mobile-panel-close { margin: 0; }
  .status-card > div:nth-child(2) { display: none; }.status-card { grid-template-columns: 1fr 1fr; }.theater-toolbar { min-width: 0; align-items: flex-start; }.toolbar-buttons { min-width: 0; max-width: calc(50% - 4px); }.volume-control { width: 95px; }
  .chat-form { grid-template-columns: 105px minmax(0, 1fr) repeat(4, auto); }#chatToggleBtn { white-space: nowrap; }.theater.mobile-chat-collapsed { grid-template-rows: auto auto auto auto auto minmax(260px, 1fr) auto; }.chat-panel.mobile-chat-collapsed { min-height: 42px; grid-template-rows: auto; }.chat-panel.mobile-chat-collapsed > :not(.chat-head) { display: none; }.chat-panel.mobile-chat-collapsed .chat-head { justify-content: flex-end; }.chat-panel.mobile-chat-collapsed .chat-modes, .chat-panel.mobile-chat-collapsed #loadHistoryBtn { display: none; }.account-modal-card { height: calc(100dvh - 24px); padding: 20px 14px; }.account-layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }.account-nav { display: flex; overflow-x: auto; padding: 0 24px 8px 0; border-right: 0; border-bottom: 1px solid var(--line); }.account-nav button { white-space: nowrap; }.stats-grid { grid-template-columns: 1fr 1fr; }
  .management-modal-card { min-height: calc(100dvh - 36px); }.manage-toolbar { grid-template-columns: 1fr; }.manage-actions > * { flex: 1; }.management-hub-card { height: calc(100dvh - 14px); }.management-hub-layout { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }.management-nav { display: flex; align-items: center; overflow-x: auto; padding: 12px 42px 10px 10px; border-right: 0; border-bottom: 1px solid var(--line); }.management-nav > div { display: none; }.management-nav button { flex: 0 0 auto; white-space: nowrap; }.management-content { padding: 10px 12px 20px; }.management-auth { top: -10px; }
  .control-request-overlay { top: 8px; grid-template-columns: 1fr auto auto; }.control-request-overlay div { grid-column: 1 / -1; }.control-request-overlay select { min-width: 0; }
}

@media (max-width: 760px) {
  .tunnel-progress { top: max(68px, calc(env(safe-area-inset-top) + 62px)); left: 8px; right: 8px; grid-template-columns: minmax(0, 1fr) auto; gap: 7px 10px; padding: 9px 10px; }
  .tunnel-progress-heading, .tunnel-progress > progress, .tunnel-progress-meta { grid-column: 1 / -1; }
  .tunnel-progress-meta { justify-content: space-between; white-space: normal; }
  body.tunnel-task-visible .global-upload-progress { top: max(194px, calc(env(safe-area-inset-top) + 188px)); }
}

@media (max-width: 720px) {
  .live-voice-bar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }.live-voice-bar > div { grid-column: 1 / -1; margin: 0; }.live-voice-bar button { min-width: 0; min-height: 44px; padding: 7px 6px; font-size: 10px; }.live-voice-bar .voice-fold-button { grid-column: 1 / -1; }.live-voice-bar.is-collapsed { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }.live-voice-bar.is-collapsed > div { grid-column: auto; }.live-voice-bar.is-collapsed .voice-fold-button { grid-column: auto; min-width: 92px; }.live-voice-floating { display: none !important; }
  .account-level-editor { grid-template-columns: 1fr; }.global-room-item header, .global-room-item li { display: grid; }.global-room-item .actions button { flex: 1 1 calc(50% - 4px); }.bulk-room-toolbar { top: 58px; align-items: stretch; display: grid; }.bulk-room-toolbar button { width: 100%; min-width: 0; }
}

/* Keep the desktop action strip readable when the room header and account
   controls share a narrow window. Labels remain available, but their visual
   weight and intrinsic width no longer force neighboring controls together. */
@media (min-width: 925px) {
  .topbar { gap: clamp(10px, 1.2vw, 18px); }
  .topbar-actions, .topbar-scroll-actions { gap: 5px; }
  .topbar-menu-trigger { gap: 4px; min-height: 32px; padding: 6px 8px; font-size: 12px; }
  .topbar-menu-trigger::after { font-size: 11px; }
  .topbar-scroll-actions .header-feature-button,
  .topbar-fixed-actions .header-feature-button { gap: 4px; min-height: 32px; padding-block: 5px; font-size: 11px; }
  .topbar-scroll-actions .header-feature-button > span[aria-hidden="true"],
  .topbar-fixed-actions .header-feature-button > span[aria-hidden="true"] { min-width: 14px; font-size: 12px; }
  .server-endpoint-badge { max-width: min(162px, 15vw); min-width: 0; gap: 5px; padding: 6px 8px; }
  .server-endpoint-badge > span { min-width: 0; }
  .server-endpoint-badge strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
  .server-endpoint-badge b { font-size: 10px; white-space: nowrap; }
}

/* Android WebView uses a distinct, touch-first composition instead of a compressed desktop canvas. */
body.android-client { background: #0b1113; overflow-x: hidden; overflow-y: auto; }
body.android-client .topbar { height: 64px; padding: 0 12px; background: #10191cf7; }
body.android-client main { height: auto; min-height: calc(100dvh - 64px); overflow: visible; }
body.android-client .brand { flex: 1 1 auto; min-width: 0; }
body.android-client .brand small, body.android-client .room-header { display: none; }
body.android-client .topbar-actions { gap: 4px; }
body.android-client .header-feature-button .button-label, body.android-client .share-link-button { display: none; }
body.android-client .header-feature-button { width: 38px; min-width: 38px; min-height: 38px; padding: 0; place-content: center; }
body.android-client .login-page { min-height: calc(100dvh - 64px); height: auto; align-content: start; overflow: visible; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
body.android-client .auth-card { width: min(100% - 22px, 440px); margin: 16px auto 28px; padding: 24px 18px; border-radius: 18px; box-shadow: 0 20px 48px #0008; }
body.android-client .primary-button, body.android-client .secondary-button { min-height: 44px; }
body.android-client .theater { grid-template-rows: auto auto auto minmax(230px, 43vh) minmax(200px, 1fr); }
body.android-client .player-container { border-radius: 0; }
body.android-client .chat-panel { border-radius: 16px 16px 0 0; overflow: hidden; }
body.android-client .chat-panel.mobile-chat-collapsed { min-height: 48px; }
body.android-client .chat-head { min-height: 48px; padding-inline: 14px; }
body.android-client .side-panel { top: 64px; width: min(94vw, 420px); border-radius: 0 18px 18px 0; }
body.android-client .user-panel { border-radius: 18px 0 0 18px; }
@media (max-width: 540px) {
  .topbar { padding: 0 8px; gap: 7px; }.brand strong { font-size: 12px; }.brand-mark { width: 30px; height: 30px; }.topbar-actions { gap: 2px; }.account-dropdown { right: 8px; }
  .theater { grid-template-rows: auto auto auto auto auto minmax(220px, 42vh) minmax(250px, 1fr); }.theater.mobile-chat-collapsed { grid-template-rows: auto auto auto auto auto minmax(220px, 1fr) auto; }.status-card > div { padding: 7px; }
  .theater-toolbar { display: grid; gap: 6px; padding: 6px; }.toolbar-buttons { width: 100%; max-width: none; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }.toolbar-buttons::-webkit-scrollbar, .owner-controls::-webkit-scrollbar { display: none; }
  .compact-button { min-height: 40px; padding: 8px 10px; font-size: 11px; flex: 0 0 auto; }.toolbar-select { min-height: 40px; flex: 0 0 auto; }.toolbar-select select { min-height: 34px; }.toolbar-check { min-height: 40px; flex: 0 0 auto; }.volume-control { display: none; }
  .owner-controls { min-height: 46px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }.owner-controls > * { white-space: nowrap; }.owner-controls button { min-height: 38px; }
  .chat-head { align-items: flex-start; }.chat-modes { overflow-x: auto; }.chat-mode { white-space: nowrap; }.chat-form { grid-template-columns: minmax(0, 1fr) repeat(4, auto); }.chat-form select { grid-column: 1 / -1; }.chat-form > select.is-hidden + input { grid-column: 1; }.reaction-bar { overflow-x: auto; }.player-info { display: none !important; }.permission-grid { grid-template-columns: 1fr; }.management-command-grid { grid-template-columns: 1fr; }
  .room-join-fields { grid-template-columns: 1fr; gap: 0; }
  .online-room-picker-row { grid-template-columns: minmax(0, 1fr) 44px; }
  .online-room-picker .select-trigger { min-height: 46px; padding-right: 34px; white-space: normal; line-height: 1.35; }
  .player-container:fullscreen.controls-visible .player-info, .player-container.fullscreen-active.controls-visible .player-info { display: flex !important; }
  .modal { padding: 7px; }.modal-card { max-height: calc(100dvh - 14px); padding: 24px 15px; }.stats-grid { grid-template-columns: 1fr; }.device-ip-row { align-items: stretch; }.device-ip-row button { min-height: 42px; }.auth-card { width: min(100% - 18px, 420px); margin: 14px auto; padding: 22px 16px; }.owner-exit-actions > button { min-height: 68px; }
}
@media (max-width: 720px) {
  .fullscreen-actions { left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); justify-content: flex-end; }.fullscreen-actions button { min-height: 44px; }
  .fullscreen-chat-card { top: auto; left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); bottom: max(8px, env(safe-area-inset-bottom)); width: auto; min-width: 0; height: min(48dvh, 390px); border-radius: 14px; }
  .fullscreen-chat-card > header { grid-template-columns: 1fr 120px; padding: 8px; }.fullscreen-chat-history { padding: 8px; }.fullscreen-chat-form { padding: 7px; }
  .fullscreen-chat-form { grid-template-columns: minmax(0, 1fr) auto auto auto; }.fullscreen-chat-form input, .fullscreen-chat-form select, .fullscreen-chat-form button { min-height: 42px; }
  .chat-context-menu { left: 8px !important; right: 8px; bottom: max(8px, env(safe-area-inset-bottom)); top: auto !important; width: auto; }.chat-context-menu button { min-height: 44px; }
}
@media (orientation: landscape) and (max-height: 560px) and (max-width: 1000px) {
  main, .workspace, .theater { min-width: 0; overflow: hidden; }
  .theater { position: relative; grid-template-columns: minmax(0, 1fr) minmax(260px, 38vw); grid-template-areas: "marquee marquee" "toolbar toolbar" "owner owner" "player chat"; grid-template-rows: auto auto auto minmax(0, 1fr); }
  .theater-toolbar { grid-area: toolbar; }
  .owner-controls { grid-area: owner; overflow-x: auto; flex-wrap: nowrap; }
  .owner-controls > * { white-space: nowrap; }
  .player-container { grid-area: player; width: 100%; height: 100%; min-width: 0; }
  .chat-panel { position: static; grid-area: chat; width: auto; max-width: 100%; height: auto; min-width: 0; opacity: 1; }
  .theater.mobile-chat-collapsed { grid-template-columns: minmax(0, 1fr) 88px; grid-template-rows: auto auto auto minmax(0, 1fr); }.chat-panel.mobile-chat-collapsed { grid-area: chat; }
  .status-card { display: none; }
}
@media (orientation: landscape) and (max-height: 650px) and (min-width: 1001px) {
  body { overflow-y: auto; }
  .topbar { position: sticky; top: 0; }
  main, .main-page, .workspace { height: auto; min-height: calc(100dvh - 58px); }
  .theater { min-height: 430px; grid-template-rows: auto auto auto auto auto minmax(160px, 1fr) minmax(130px, .55fr); }
}

/* Added controls keep the original visual language when no optional theme is selected. */
.toolbar-select, .toolbar-check { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--muted); font-size: 10px; white-space: nowrap; }
.toolbar-select select { width: 102px; min-height: 31px; padding: 5px 8px; border-radius: 8px; }
.toolbar-check input { width: auto; margin: 0; accent-color: var(--pink); }
.queue-mode-controls { display: grid; grid-template-columns: 1fr; gap: 5px; margin: 10px 0; padding: 9px; background: #ffffff06; border: 1px solid var(--line); border-radius: 8px; }
.queue-mode-controls label { margin: 0; font-size: 10px; }
.permission-blocked { opacity: .72; border-style: dashed; }
.web-share-card { width: min(1440px, 100%); height: min(940px, calc(100dvh - 20px)); display: grid; grid-template-rows: auto auto auto auto auto minmax(320px, 1fr); gap: 10px; overflow: hidden; padding: 22px; }
.web-share-heading, .theme-modal-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.web-share-heading { min-width: 0; padding-right: 54px; }
.theme-modal-heading { min-width: 0; padding-right: 54px; }
.web-share-heading h2, .theme-modal-heading h2 { margin: 0 0 5px; }.web-share-heading p, .theme-modal-heading p { margin: 0; }
.web-share-actions, .web-address-actions, .theme-modal-actions, .tunnel-address-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.web-share-actions { justify-content: flex-start; }
.web-share-actions button { flex: 0 1 220px; min-width: 150px; }
.web-address-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.web-address-actions { min-width: 0; }
.web-address-actions button { flex: 1 1 112px; min-width: 96px; }
.web-address-bar input { min-width: 0; }
.theme-modal-actions button, .tunnel-address-actions button { flex: 1 1 132px; min-width: 0; }
.tunnel-address-actions { justify-content: flex-start; }
.web-frame { width: 100%; height: 100%; min-height: 0; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.web-probe-results { max-height: 170px; overflow: auto; display: grid; gap: 6px; padding: 9px; background: #ffffff06; border: 1px solid var(--line); border-radius: 8px; }
.web-probe-results > strong { font-size: 11px; }.web-probe-results button { min-width: 0; display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 8px; align-items: center; padding: 8px; text-align: left; color: var(--text); background: #ffffff08; border: 1px solid transparent; border-radius: 7px; }
.web-probe-results button:hover { border-color: var(--pink); }.web-probe-results small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.theme-modal-card { width: min(1180px, 100%); height: min(820px, calc(100dvh - 36px)); display: grid; grid-template-rows: auto auto auto minmax(0, 1fr); gap: 16px; overflow: hidden; padding: 22px; }
.theme-sync-targets { display: grid; gap: 10px; padding: 10px; background: #ffffff07; border: 1px solid var(--line); border-radius: 8px; }
.segmented-control { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; background: #080d10; border: 1px solid var(--line); border-radius: 8px; }
.segmented-control label { min-width: 0; margin: 0; cursor: pointer; }
.segmented-control input { position: absolute; opacity: 0; pointer-events: none; }
.segmented-control span { min-height: 38px; display: grid; place-items: center; padding: 7px 10px; color: var(--muted); border-radius: 6px; }
.segmented-control input:checked + span { color: #08201c; background: var(--pink); font-weight: 800; }
.theme-sync-member-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 7px; max-height: 156px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--pink) #ffffff0a; }
.theme-sync-member-list label { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; padding: 8px; background: #ffffff08; border: 1px solid var(--line); border-radius: 7px; }
.theme-sync-member-list input { flex: 0 0 auto; width: 20px; height: 20px; }
.theme-sync-member-list span { min-width: 0; display: grid; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.theme-sync-member-list small { color: var(--muted); font-size: 9px; }
.theme-grid { grid-row: 4; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: max-content; align-content: start; gap: 12px; padding-right: 4px; }
.theme-choice { min-width: 0; height: max-content; display: grid; grid-template-rows: auto auto; overflow: hidden; padding: 0; text-align: left; color: var(--text); background: #ffffff07; border: 1px solid var(--line); border-radius: 8px; }
.theme-choice:hover, .theme-choice.active { border-color: var(--pink); background: #ffffff0d; }.theme-choice.active { box-shadow: 0 0 0 2px #52c7b824; }
.theme-choice:last-child { order: -1; border-color: #e2b75d; box-shadow: 0 0 0 2px #e2b75d33; }.theme-choice:last-child::before { content: "推荐风格"; position: absolute; z-index: 2; margin: 8px; padding: 4px 7px; color: #2b1a04; background: #e2b75d; border-radius: 5px; font-size: 10px; font-weight: 800; }.theme-choice { position: relative; }
.room-entering { animation: room-enter 820ms cubic-bezier(.16,1,.3,1) both; }
@keyframes room-enter { from { opacity: 0; transform: scale(.985) translateY(14px); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }
.theme-choice img, .theme-original-preview { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #0b1013; border-bottom: 1px solid var(--line); }
.theme-choice > span { min-width: 0; display: grid; gap: 3px; padding: 10px; }.theme-choice small { color: var(--muted); overflow-wrap: anywhere; }
.theme-choice .theme-name { display: block; color: var(--text); font-size: 14px; line-height: 1.35; }
.theme-choice .theme-code { color: var(--pink-2); font-size: 10px; }
.theme-original-preview { display: grid; grid-template-columns: 28% 1fr 26%; gap: 4px; padding: 12px; }.theme-original-preview span { background: #151a1e; border: 1px solid #d9eef015; }.theme-original-preview span:nth-child(2) { background: #090c0e; }
select { min-height: 38px; border-color: #d9eef02b; background-color: #11181c; box-shadow: inset 0 1px 0 #ffffff08; }
.settings-card select, .chat-form select, .fullscreen-chat-form select { border-radius: 8px; }
select option, select optgroup { color: var(--text); background: var(--panel-2); }
select option:checked { color: var(--text); background: color-mix(in srgb, var(--pink) 24%, var(--panel-2)); }

textarea { width: 100%; min-height: 96px; resize: vertical; color: var(--text); background: #0f1417; border: 1px solid #d9eef022; border-radius: 7px; padding: 10px 11px; outline: none; font: inherit; line-height: 1.6; }
textarea:focus { border-color: var(--pink); box-shadow: 0 0 0 3px #52c7b820; }
.password-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; width: 100%; }
.password-field input { min-width: 0; border-radius: 7px 0 0 7px; }
.password-toggle { min-width: 52px; min-height: 38px; padding: 0 10px; color: var(--pink-2); background: #ffffff0b; border: 1px solid #d9eef022; border-left: 0; border-radius: 0 7px 7px 0; font-size: 11px; font-weight: 700; }
.password-toggle:hover, .password-toggle:focus-visible { color: var(--text); background: #ffffff14; outline: 2px solid #52c7b855; outline-offset: -2px; }
.registration-request-button { margin-top: 8px; border-color: #e9bd685d; color: #ffe7ac; background: #e9bd6812; }
.registration-request-button:hover { border-color: #e9bd68a8; background: #e9bd6820; }
.login-entry-actions, .login-account-actions, .login-download-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.login-entry-actions { margin-top: 8px; }
.login-entry-actions .secondary-button { width: 100%; min-width: 0; min-height: 44px; margin: 0; padding: 8px; font-size: 11px; line-height: 1.3; }
.login-account-actions { margin-top: 3px; }.login-account-actions .text-button { width: auto; min-height: 34px; padding: 6px 8px; }
.login-download-actions { margin-top: 7px; padding-top: 9px; border-top: 1px solid var(--line); }
.login-download-actions .secondary-button { min-width: 0; min-height: 40px; padding-inline: 9px; font-size: 11px; line-height: 1.35; }
.shared-web-view { background: #fff; }
.fullscreen-transform-controls { display: flex; align-items: center; gap: 4px; padding: 4px; background: #080b0dcc; border: 1px solid #ffffff20; border-radius: 8px; box-shadow: 0 10px 30px #0007; }
.fullscreen-transform-controls button { min-width: 40px; min-height: 34px; padding: 6px 9px; background: transparent; border: 0; box-shadow: none; }
.fullscreen-transform-controls button:hover, .fullscreen-transform-controls button:focus-visible { background: #ffffff15; outline: none; }
.fullscreen-transform-controls button.active { color: var(--pink-2, #ff8fbe); background: color-mix(in srgb, var(--pink, #ec6698) 22%, transparent); }
.fullscreen-transform-controls output { min-width: 48px; color: #fff; text-align: center; font-size: 11px; font-variant-numeric: tabular-nums; }
.notice-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; }
.notice-options label { min-width: 0; }
.notice-options input[type="color"] { min-height: 42px; padding: 4px; }
.screen-notice-overlay { position: fixed; z-index: 2147483647; inset: 0; display: grid; place-items: center; padding: clamp(18px, 5vw, 72px); background: #050708d9; }
.screen-notice-overlay > div { width: min(980px, 100%); display: grid; gap: 18px; justify-items: center; padding: clamp(26px, 6vw, 72px); text-align: center; background: #11181cf2; border: 1px solid #ffffff2c; border-radius: 8px; box-shadow: 0 28px 90px #000d; }
.screen-notice-overlay small { color: var(--pink-2); font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.screen-notice-overlay p { max-width: 30ch; margin: 0; line-height: 1.55; overflow-wrap: anywhere; white-space: pre-wrap; }
.screen-notice-overlay button { min-width: 96px; min-height: 40px; color: #fff; background: #ffffff12; border: 1px solid #ffffff2c; border-radius: 8px; }
.contact-list, .manage-list { min-width: 0; display: grid; gap: 8px; }
.contact-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; background: #ffffff07; border: 1px solid var(--line); border-radius: 8px; }
.contact-row > span { min-width: 0; display: grid; gap: 2px; }.contact-row small { color: var(--muted); }.contact-row strong { overflow-wrap: anywhere; }
.contact-row > div { display: flex; flex: 0 0 auto; gap: 6px; }.contact-row button { min-height: 34px; padding: 6px 10px; color: var(--pink-2); background: #ffffff0c; border: 1px solid var(--line); border-radius: 7px; }
.temporary-room-notice { position: absolute; z-index: 26; left: 50%; top: 50%; width: min(560px, calc(100% - 28px)); display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; color: var(--text); background: color-mix(in srgb, var(--yellow) 12%, #12191c 92%); border: 1px solid color-mix(in srgb, var(--yellow) 55%, transparent); border-radius: 8px; box-shadow: 0 18px 54px #000b; transform: translate(-50%, -50%); }
.temporary-room-notice > div { min-width: 0; display: grid; gap: 4px; }.temporary-room-notice small { color: var(--muted); line-height: 1.5; }.temporary-room-notice button { flex: 0 0 auto; min-width: 128px; }
.room-history-choice { width: 100%; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; text-align: left; color: var(--text); background: #ffffff07; border: 1px solid var(--line); border-radius: 8px; }
.room-history-choice:hover, .room-history-choice:focus-visible { border-color: var(--pink); background: #ffffff0d; outline: none; }.room-history-choice > span { min-width: 0; display: grid; gap: 4px; }.room-history-choice strong, .room-history-choice small { overflow-wrap: anywhere; }.room-history-choice small { color: var(--muted); }.room-history-choice b { flex: 0 0 auto; color: var(--pink-2); }
.room-quota-summary { margin: 0 0 2px; color: var(--muted); font-size: 11px; }
.conversion-row { min-width: 0; display: grid; gap: 7px; padding: 12px; background: #ffffff07; border: 1px solid var(--line); border-radius: 8px; }
.conversion-row header { min-width: 0; display: flex; justify-content: space-between; gap: 12px; }.conversion-row header strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.conversion-row header span, .conversion-row small { color: var(--muted); font-size: 10px; }.conversion-row progress { width: 100%; height: 8px; accent-color: var(--pink); }.conversion-row small { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.conversion-progress-card { width: min(840px, 100%); }
.conversion-summary, .profile-processing-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.conversion-summary > span, .profile-processing-summary > span { min-width: 0; display: grid; gap: 3px; padding: 10px 12px; background: color-mix(in srgb, var(--pink) 7%, var(--panel-2)); border: 1px solid var(--line); border-radius: 8px; }
.conversion-summary small, .profile-processing-summary small { color: var(--muted); font-size: 10px; }
.conversion-summary strong, .profile-processing-summary strong { color: var(--pink-2); font-size: 18px; font-variant-numeric: tabular-nums; }
.conversion-admin-controls { display: grid; grid-template-columns: minmax(190px, 1fr) auto auto; gap: 8px; align-items: end; padding: 11px; background: #ffffff06; border: 1px solid var(--line); border-radius: 8px; }
.conversion-admin-controls label { margin: 0; }
.conversion-admin-controls > small { grid-column: 1 / -1; color: var(--muted); }
.profile-processing-summary { margin: 10px 0; }
.agreement-modal { z-index: 480; }.agreement-card { width: min(720px, 100%); display: grid; gap: 12px; }.agreement-card h2 { margin: 0; }.agreement-card > small { color: var(--muted); }.agreement-text { max-height: min(52dvh, 480px); overflow-y: auto; padding: 16px; white-space: pre-wrap; line-height: 1.8; background: #0000001a; border: 1px solid var(--line); border-radius: 8px; overflow-wrap: anywhere; }.agreement-card .check-line { align-items: flex-start; margin: 0; line-height: 1.6; }
.owner-exit-card { width: min(590px, 100%); }.owner-exit-card h2 { margin: 5px 0 8px; font-size: 22px; }.owner-exit-actions { display: grid; gap: 9px; margin-top: 18px; }.owner-exit-actions > button { width: 100%; min-height: 62px; display: grid; justify-items: start; align-content: center; gap: 3px; padding: 11px 14px; text-align: left; }.owner-exit-actions > button small { color: var(--muted); font-weight: 400; line-height: 1.45; }.owner-exit-actions > .warning-button small { color: #f3dca9; }.owner-exit-actions > .danger-button small { color: #ffd0d6; }.owner-exit-actions > .text-button { min-height: 38px; place-items: center; text-align: center; }
.owner-exit-actions > .owner-exit-default { color: var(--primary-button-text, #07120e); box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-accent, var(--pink)) 34%, transparent), 0 12px 30px #0005; animation: recommended-action-breathe 1.8s ease-in-out infinite; }.owner-exit-actions > .owner-exit-default small { color: currentColor; opacity: .78; }
.desktop-close-modal { z-index: 520; background: #050504e8; backdrop-filter: blur(10px); }
.desktop-close-card { width: min(560px, 100%); overflow: hidden; padding: 26px; color: var(--text); background: linear-gradient(145deg, color-mix(in srgb, var(--panel-2) 94%, #050504), color-mix(in srgb, var(--panel) 96%, #000)) !important; border: 1px solid color-mix(in srgb, var(--pink) 64%, transparent); border-radius: min(8px, var(--radius)); box-shadow: 0 28px 90px #000d, inset 0 1px #ffffff0b; }
.desktop-close-heading { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid color-mix(in srgb, var(--pink) 30%, transparent); }
.desktop-close-heading > span { width: 46px; height: 46px; display: grid; flex: 0 0 46px; place-items: center; color: var(--theme-accent-ink, #251b08); background: var(--pink); border: 1px solid var(--pink-2); border-radius: 4px; box-shadow: 0 8px 22px color-mix(in srgb, var(--pink) 22%, transparent); font-size: 13px; font-weight: 900; }
.desktop-close-heading h2 { margin: 3px 0 0; color: var(--text); font-size: 21px; }.desktop-close-heading .eyebrow { margin: 0; color: var(--pink-2); }
.desktop-close-description { margin: 16px 0 18px; color: var(--muted); line-height: 1.7; }
.desktop-close-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.desktop-close-actions > button { min-width: 0; min-height: 72px; display: grid; justify-items: start; align-content: center; gap: 4px; padding: 12px 14px; text-align: left; border-radius: min(7px, var(--radius)); }
.desktop-close-actions > button strong { color: inherit; font-size: 13px; }.desktop-close-actions > button small { color: var(--muted); font-size: 10px; font-weight: 400; line-height: 1.45; }
.desktop-close-actions > .primary-button { color: var(--theme-accent-ink, #251b08); background: var(--pink); border: 1px solid var(--pink-2); }
.desktop-close-actions > [data-desktop-close="minimize"] { animation: recommended-action-breathe 1.8s ease-in-out infinite; }
.desktop-close-actions > .primary-button small { color: var(--theme-accent-ink, #251b08); font-weight: 600; }
.desktop-close-actions > .danger-button { color: var(--red); background: color-mix(in srgb, var(--red) 12%, var(--theme-button, #292721)); border-color: color-mix(in srgb, var(--red) 45%, transparent); }
.desktop-close-actions > .text-button { min-height: 40px; grid-column: 1 / -1; place-items: center; color: var(--muted); text-align: center; }
#desktopCloseModal .desktop-close-actions > button:hover, #desktopCloseModal .desktop-close-actions > button:focus { color: var(--theme-accent-ink, #251b08); background: var(--pink) !important; border-color: var(--pink-2); box-shadow: 0 0 0 2px color-mix(in srgb, var(--pink) 28%, transparent), 0 10px 24px color-mix(in srgb, var(--pink) 20%, transparent); filter: none; outline: none; transform: translateY(-1px); transition: none !important; }
#desktopCloseModal .desktop-close-actions > button:is(:hover, :focus) { color: var(--theme-accent-ink, #251b08); background: var(--pink) !important; border-color: var(--pink-2); box-shadow: 0 0 0 2px color-mix(in srgb, var(--pink) 28%, transparent), 0 10px 24px color-mix(in srgb, var(--pink) 20%, transparent); filter: none; outline: none; transform: translateY(-1px); transition: none !important; }
#desktopCloseModal .desktop-close-actions > button:hover strong, #desktopCloseModal .desktop-close-actions > button:focus strong, #desktopCloseModal .desktop-close-actions > button:hover small, #desktopCloseModal .desktop-close-actions > button:focus small { color: var(--theme-accent-ink, #251b08); }
#desktopCloseModal .desktop-close-actions > button:active { transform: translateY(0); }
.desktop-close-card .setting-status { min-height: 0; margin: 10px 0 0; color: var(--red); }
@keyframes recommended-action-breathe { 0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-accent, var(--pink)) 28%, transparent), 0 8px 22px color-mix(in srgb, var(--theme-accent, var(--pink)) 12%, transparent); } 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-accent, var(--pink)) 70%, transparent), 0 0 24px color-mix(in srgb, var(--theme-accent, var(--pink)) 38%, transparent); } }
@media (prefers-reduced-motion: reduce) { .owner-exit-actions > .owner-exit-default, .desktop-close-actions > [data-desktop-close="minimize"] { animation: none; } }

/* Keep grouped toolbar menus readable at laptop widths. Legacy single-row
   rules could shrink the panel until Chinese labels wrapped one character per
   line; the grouped controls need a stable readable width. */
.topbar-menu-trigger { min-width: 78px; justify-content: center; }
.topbar-menu-panel { min-width: 250px; width: max-content; max-width: min(360px, calc(100vw - 24px)); }
.topbar-menu-panel .header-feature-button { white-space: normal; }
.topbar-menu-panel .header-feature-button .button-label { overflow-wrap: break-word; word-break: keep-all; }
@media (min-width: 925px) and (max-width: 1450px) {
  .topbar { display: grid; grid-template-columns: max-content minmax(0, 1fr) minmax(0, auto); grid-template-areas: "brand room actions"; height: auto; min-height: 58px; padding-block: 6px; gap: 10px; }
  .topbar > .brand { grid-area: brand; }
  .topbar > .room-header { grid-area: room; width: auto; max-width: none; min-width: 0; }
  .topbar > .topbar-actions { grid-area: actions; max-width: min(52vw, 640px); min-width: 0; justify-self: end; }
  .topbar-scroll-actions { min-width: 0; max-width: 100%; overflow-x: auto; overflow-y: visible; scrollbar-width: none; }
  .topbar-scroll-actions::-webkit-scrollbar { display: none; }
  .topbar-fixed-actions { gap: 4px; }
  .server-endpoint-badge { max-width: clamp(112px, 12vw, 150px); }
}
@media (min-width: 925px) and (max-width: 1120px) {
  .topbar { grid-template-columns: max-content minmax(120px, 1fr) max-content; }
  .room-header { grid-template-columns: minmax(0, 1.4fr) minmax(52px, .8fr); gap: 8px; }
  .room-header > span:nth-child(n + 3) { display: none; }
  .topbar > .topbar-actions { max-width: min(56vw, 470px); }
  .topbar-scroll-actions .header-feature-button .button-label { display: inline !important; }
  .topbar-scroll-actions .header-feature-button { min-width: max-content; padding-inline: 6px; justify-content: center; }
}
.f11-prompt-card { width: min(450px, 100%); text-align: center; }.f11-prompt-card h2 { margin: 6px 0 8px; }.f11-prompt-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }.f11-prompt-preference { display: grid; gap: 6px; margin-top: 14px; text-align: left; color: var(--muted); font-size: 11px; }.f11-prompt-preference select { width: 100%; }.f11-prompt-card .text-button { width: 100%; margin-top: 8px; }
.shortcut-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
.shortcut-settings-grid input[readonly] { cursor: pointer; text-align: center; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-weight: 700; letter-spacing: .04em; }
.shortcut-settings-grid input[readonly]:focus { border-color: var(--theme-accent, var(--pink)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-accent, var(--pink)) 24%, transparent); }
@media (max-width: 560px) { .shortcut-settings-grid { grid-template-columns: 1fr; } }
.global-room-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.global-room-metrics > span { min-width: 0; display: grid; gap: 3px; padding: 8px; background: #00000018; border: 1px solid var(--line); border-radius: 6px; }.global-room-metrics small { color: var(--muted); font-size: 9px; }.global-room-metrics strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-variant-numeric: tabular-nums; }
.warning-button { display: inline-grid; place-items: center; min-height: 36px; padding: 8px 14px; color: #ffe7ac; background: #e9bd6815; border: 1px solid #e9bd6855; border-radius: 8px; font-weight: 700; }
.admin-account-detail { display: grid; gap: 6px; }.admin-account-detail > small { overflow-wrap: anywhere; line-height: 1.55; }.admin-account-detail details { padding: 8px; background: #00000016; border: 1px solid var(--line); border-radius: 7px; }.admin-account-detail summary { cursor: pointer; color: var(--pink-2); font-weight: 700; }.admin-account-detail h4 { margin: 10px 0 4px; font-size: 10px; }.admin-account-detail ul { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }.admin-account-detail li { min-width: 0; display: grid; gap: 2px; padding: 6px; background: #ffffff06; border-radius: 5px; }.admin-account-detail li span { color: var(--muted); font-size: 9px; overflow-wrap: anywhere; }
.online-indicator { display: inline-block; width: 8px; height: 8px; margin-right: 7px; background: #758087; border: 1px solid #ffffff44; border-radius: 50%; }.online-indicator.is-online { background: var(--green); box-shadow: 0 0 0 3px #65e6aa1f; }
.theme-code { color: var(--pink-2); font-size: 10px; font-variant-numeric: tabular-nums; }
.app-dialog-card input[aria-invalid="true"] { border-color: var(--red); box-shadow: 0 0 0 3px #ff66751f; }
.app-dialog-card select[aria-invalid="true"] + .select-trigger { border-color: var(--red); box-shadow: 0 0 0 3px #ff66751f; }
::selection { color: #071c18; background: var(--pink); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }

/* Keep dense login and fullscreen overlays readable on short windows. */
.auth-card { max-height: calc(100dvh - 28px); overflow-y: auto; scrollbar-color: var(--pink) #ffffff0a; scrollbar-width: thin; }
.auth-card form { gap: 6px; }.login-host-actions { display: flex; justify-content: center; gap: 12px; padding-top: 7px; border-top: 1px solid var(--line); }.login-host-actions .text-button { width: auto; }
.player-container:fullscreen, .player-container.fullscreen-active { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); overflow: hidden; }
.player-container:fullscreen .fullscreen-actions, .player-container.fullscreen-active .fullscreen-actions { top: max(18px, calc(env(safe-area-inset-top) + 12px)); left: max(14px, env(safe-area-inset-left)); right: max(14px, env(safe-area-inset-right)); max-width: none; flex-wrap: wrap; justify-content: flex-end; overflow: visible; }
.player-container:fullscreen .fullscreen-actions button, .player-container.fullscreen-active .fullscreen-actions button { height: auto; min-height: 40px; line-height: 1.35; white-space: nowrap; }
.player-container:fullscreen .share-status, .player-container:fullscreen .sync-notice, .player-container.fullscreen-active .share-status, .player-container.fullscreen-active .sync-notice { top: max(18px, calc(env(safe-area-inset-top) + 12px)); max-width: min(44vw, 520px); line-height: 1.45; overflow-wrap: anywhere; white-space: normal; }
.player-container:fullscreen .player-info, .player-container.fullscreen-active .player-info { bottom: max(66px, calc(env(safe-area-inset-bottom) + 54px)); }

@media (max-width: 924px) {
  .toolbar-select { order: 8; }.toolbar-check { width: auto; }
  .theater-toolbar { display: grid; align-items: center; gap: 6px; }
  .theater-toolbar .toolbar-buttons { width: 100%; max-width: none; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
  .theater-toolbar .toolbar-buttons > * { flex: 0 0 auto; }
  .web-share-card, .theme-modal-card { height: calc(100dvh - 14px); padding: 16px 12px; }
  .web-share-heading, .theme-modal-heading { align-items: flex-start; }
  .web-share-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .web-share-actions button { width: 100%; min-width: 0; }
  .web-address-bar { grid-template-columns: minmax(0, 1fr); }.web-address-bar input { grid-column: 1; }
  .web-address-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .web-address-actions button { width: 100%; min-width: 0; }
  .theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fullscreen-actions { left: max(8px, env(safe-area-inset-left)); flex-wrap: wrap; justify-content: flex-end; }.fullscreen-transform-controls { order: 3; width: 100%; justify-content: flex-end; overflow-x: auto; }
  .global-room-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
  .desktop-close-card { padding: 20px 14px; }.desktop-close-actions { grid-template-columns: 1fr; }.desktop-close-actions > .text-button { grid-column: 1; }
  .brand { flex: 0 0 auto; gap: 6px; }.brand strong { font-size: 12px; }.brand-mark { flex: 0 0 30px; }
  .topbar-actions { max-width: calc(100vw - 92px); }.header-feature-button { min-width: 36px; min-height: 36px; font-size: 14px; }
  .theater-toolbar .toolbar-buttons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; padding-bottom: 0; }
  .theater-toolbar .toolbar-buttons > * { width: 100%; min-width: 0; }
  .theater-toolbar .compact-button { min-height: 42px; padding: 7px 6px; font-size: 10px; white-space: normal; line-height: 1.2; }
  .theater-toolbar .screen-share-hint { display: none; }.toolbar-select, .toolbar-check { justify-content: center; min-height: 42px; padding-inline: 4px; font-size: 9px; }
  .audio-share-room-status { left: 8px; right: 8px; bottom: var(--audio-share-bottom, 8px); align-items: stretch; }
  .audio-share-room-status span { white-space: normal; overflow-wrap: anywhere; }
  .toolbar-select select { width: 70px; min-width: 0; }.owner-controls { min-height: 48px; padding: 7px 9px; gap: 8px; scrollbar-width: none; }.owner-controls::-webkit-scrollbar { width: 0; height: 0; }
  .web-share-heading, .theme-modal-heading { display: grid; }
  .web-share-actions, .web-address-actions, .theme-modal-actions, .tunnel-address-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
  .web-share-actions button, .web-address-actions button, .theme-modal-actions button, .tunnel-address-actions button { width: 100%; min-width: 0; min-height: 44px; }
  .theme-grid { grid-template-columns: 1fr; }.web-frame { min-height: 42dvh; }
  .password-toggle { min-width: 58px; min-height: 44px; }.registration-request-button, .login-entry-actions button, .login-account-actions button, .login-download-actions button { min-height: 44px; }
  .login-entry-actions, .login-download-actions { grid-template-columns: 1fr; }
  .notice-options, .global-room-metrics { grid-template-columns: 1fr; }.contact-row, .room-history-choice, .conversion-row header { align-items: stretch; display: grid; }.contact-row > div { width: 100%; }.contact-row button { flex: 1; min-height: 44px; }
  .temporary-room-notice { position: fixed; top: auto; left: 10px; right: 10px; bottom: max(12px, env(safe-area-inset-bottom)); width: auto; display: grid; transform: none; }.temporary-room-notice button { width: 100%; }
  .screen-notice-overlay { padding: 8px; }.screen-notice-overlay > div { padding: 24px 15px; }.agreement-text { max-height: 48dvh; padding: 12px; }.app-dialog-actions button { flex: 1; min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .cinema-card, .cinema-card > span, .cinema-card > strong, .cinema-card > small, .sync-frame-meter, .sync-scan-line, .sync-frame-meter b, .auth-card, .global-room-item.is-current-room { animation: none !important; }
}

/* Optional theme system. The absence of data-ui-theme is the untouched original. */
html[data-ui-theme] {
  --bg: var(--theme-bg); --panel: var(--theme-panel); --panel-2: var(--theme-panel-2); --panel-3: var(--theme-panel-3);
  --text: var(--theme-text); --muted: var(--theme-muted); --pink: var(--theme-accent); --pink-2: var(--theme-accent-2);
  --green: var(--theme-success); --red: var(--theme-danger); --yellow: var(--theme-warning); --line: var(--theme-line);
  --radius: var(--theme-radius); --shadow: var(--theme-shadow);
}
html[data-ui-theme] body, html[data-ui-theme] .login-page { color: var(--text); background: var(--bg); }
html[data-ui-theme] .topbar { background: var(--theme-topbar); border-color: var(--line); }
html[data-ui-theme] .side-panel, html[data-ui-theme] .panel-tabs { background: var(--panel); }
html[data-ui-theme] .theater { background: var(--theme-stage); }
html[data-ui-theme] .status-card > div, html[data-ui-theme] .theater-toolbar, html[data-ui-theme] .owner-controls, html[data-ui-theme] .chat-panel { background: var(--theme-toolbar); }
html[data-ui-theme] .player-container { background: var(--theme-player); }
html[data-ui-theme] .modal-card, html[data-ui-theme] .account-dropdown { background: var(--panel-2); }
html[data-ui-theme] input, html[data-ui-theme] select { color: var(--text); background-color: var(--theme-input); border-color: var(--line); }
html[data-ui-theme] select option { color: var(--text); background: var(--panel-2); }
html[data-ui-theme] .file-card, html[data-ui-theme] .user-card, html[data-ui-theme] .settings-card, html[data-ui-theme] .queue-list li { background: var(--theme-item); border-color: var(--line); }
html[data-ui-theme] .primary-button, html[data-ui-theme] .send-button, html[data-ui-theme] .management-nav button.active { color: var(--theme-accent-ink); background: var(--pink); }
html[data-ui-theme] .brand-mark { color: var(--theme-accent-ink); background: var(--pink); }
html[data-ui-theme] .compact-button, html[data-ui-theme] .secondary-button, html[data-ui-theme] .icon-button { background: var(--theme-button); border-color: var(--line); }
html[data-ui-theme] .owner-controls,
html[data-ui-theme] .owner-controls label {
  color: var(--text);
  opacity: 1;
}
html[data-ui-theme] .owner-controls label { font-weight: 600; }
html[data-ui-theme] .danger-button { color: var(--red); background: color-mix(in srgb, var(--red) 14%, transparent); border-color: color-mix(in srgb, var(--red) 36%, transparent); }
html[data-ui-theme] .owner-exit-actions > .danger-button small { color: var(--red); }
html[data-ui-theme] .topbar, html[data-ui-theme] .side-panel, html[data-ui-theme] .theater-toolbar, html[data-ui-theme] .chat-panel, html[data-ui-theme] .modal-card { transition: background-color .22s ease, border-color .22s ease, color .22s ease; }

html[data-ui-theme="cinema-deck"] { --theme-bg:#07090b;--theme-panel:#101418;--theme-panel-2:#171d22;--theme-panel-3:#222a30;--theme-text:#f6f2e9;--theme-muted:#a8b0b5;--theme-accent:#e2b75d;--theme-accent-2:#f6d98e;--theme-accent-ink:#211704;--theme-success:#66d49b;--theme-danger:#ef7880;--theme-warning:#e2b75d;--theme-line:#f6d98e24;--theme-radius:5px;--theme-shadow:0 24px 64px #000a;--theme-topbar:#0b0f12f5;--theme-stage:#050607;--theme-toolbar:#12171b;--theme-player:#000;--theme-input:#090d10;--theme-item:#ffffff08;--theme-button:#ffffff0b; }
html[data-ui-theme="command-orbit"] { --theme-bg:#071016;--theme-panel:#0c1a22;--theme-panel-2:#102630;--theme-panel-3:#17333d;--theme-text:#e9fbff;--theme-muted:#89aeb8;--theme-accent:#36d7b7;--theme-accent-2:#7debd4;--theme-accent-ink:#03251e;--theme-success:#72e4a8;--theme-danger:#ff718f;--theme-warning:#ffd166;--theme-line:#55d9c82b;--theme-radius:8px;--theme-shadow:0 22px 62px #001018b8;--theme-topbar:#08161df2;--theme-stage:#031016;--theme-toolbar:#0b2028;--theme-player:#01090d;--theme-input:#07171d;--theme-item:#0e2730;--theme-button:#12313a; }
html[data-ui-theme="living-room"] { color-scheme:light;--theme-bg:#eef2ef;--theme-panel:#f8faf8;--theme-panel-2:#ffffff;--theme-panel-3:#e4ebe7;--theme-text:#22302a;--theme-muted:#68776f;--theme-accent:#286c61;--theme-accent-2:#194f47;--theme-accent-ink:#fff;--theme-success:#24845a;--theme-danger:#b94652;--theme-warning:#9b6a16;--theme-line:#2c46351e;--theme-radius:8px;--theme-shadow:0 20px 50px #36473f24;--theme-topbar:#fffefcf2;--theme-stage:#dde5e0;--theme-toolbar:#f4f7f5;--theme-player:#17201c;--theme-input:#fff;--theme-item:#ffffff;--theme-button:#e8eeea; }
html[data-ui-theme="screening-journal"] { color-scheme:light;--theme-bg:#f1f0ec;--theme-panel:#faf9f6;--theme-panel-2:#fff;--theme-panel-3:#e6e4dd;--theme-text:#1c1d1f;--theme-muted:#696a6c;--theme-accent:#a62936;--theme-accent-2:#761c27;--theme-accent-ink:#fff;--theme-success:#39785a;--theme-danger:#a62936;--theme-warning:#8b641d;--theme-line:#14151624;--theme-radius:2px;--theme-shadow:0 18px 45px #2c2b2824;--theme-topbar:#f9f8f4f5;--theme-stage:#deddd8;--theme-toolbar:#f7f6f2;--theme-player:#111;--theme-input:#fff;--theme-item:#fff;--theme-button:#eceae4; }
html[data-ui-theme="screening-journal"] h1, html[data-ui-theme="screening-journal"] h2, html[data-ui-theme="screening-journal"] h3, html[data-ui-theme="screening-journal"] .brand strong { font-family: Georgia,"Microsoft YaHei",serif; }
html[data-ui-theme="director-console"] { --theme-bg:#080b0d;--theme-panel:#0e1317;--theme-panel-2:#151c21;--theme-panel-3:#1c272d;--theme-text:#edf1f3;--theme-muted:#7f929b;--theme-accent:#ffb23e;--theme-accent-2:#ffd18a;--theme-accent-ink:#2a1600;--theme-success:#59d491;--theme-danger:#ff626e;--theme-warning:#ffb23e;--theme-line:#c5d3d822;--theme-radius:3px;--theme-shadow:0 18px 46px #000b;--theme-topbar:#0b0f12f7;--theme-stage:#050708;--theme-toolbar:#11181c;--theme-player:#000;--theme-input:#070b0e;--theme-item:#12191d;--theme-button:#1a2429; }
html[data-ui-theme="timeline-room"] { --theme-bg:#101015;--theme-panel:#17171f;--theme-panel-2:#20202a;--theme-panel-3:#2a2a36;--theme-text:#f3f0ff;--theme-muted:#9d98b2;--theme-accent:#e76893;--theme-accent-2:#ff9fbe;--theme-accent-ink:#2c0715;--theme-success:#65d5a4;--theme-danger:#ff6d7d;--theme-warning:#e7bd63;--theme-line:#d8c7ff20;--theme-radius:6px;--theme-shadow:0 24px 60px #08070db3;--theme-topbar:#15151df2;--theme-stage:#0b0b10;--theme-toolbar:#1c1a25;--theme-player:#050507;--theme-input:#111118;--theme-item:#211f2a;--theme-button:#2a2734; }
html[data-ui-theme="poster-library"] { color-scheme:light;--theme-bg:#e8ecef;--theme-panel:#f6f8f9;--theme-panel-2:#fff;--theme-panel-3:#dce3e7;--theme-text:#182127;--theme-muted:#64747d;--theme-accent:#d44b36;--theme-accent-2:#9f2c1f;--theme-accent-ink:#fff;--theme-success:#287b58;--theme-danger:#bd3f4b;--theme-warning:#93631b;--theme-line:#20333d1f;--theme-radius:6px;--theme-shadow:0 20px 52px #30434d2a;--theme-topbar:#fcfdfdf2;--theme-stage:#dfe5e8;--theme-toolbar:#f7f9fa;--theme-player:#101416;--theme-input:#fff;--theme-item:#fff;--theme-button:#e9eef1; }
html[data-ui-theme="pure-screening"] { --theme-bg:#0a0a0a;--theme-panel:#101010;--theme-panel-2:#171717;--theme-panel-3:#202020;--theme-text:#f7f7f7;--theme-muted:#999;--theme-accent:#f0f0f0;--theme-accent-2:#fff;--theme-accent-ink:#111;--theme-success:#7fc89b;--theme-danger:#df7b82;--theme-warning:#d6b56b;--theme-line:#ffffff18;--theme-radius:4px;--theme-shadow:0 24px 70px #000c;--theme-topbar:#0d0d0df5;--theme-stage:#050505;--theme-toolbar:#121212;--theme-player:#000;--theme-input:#0b0b0b;--theme-item:#161616;--theme-button:#1d1d1d; }
html[data-ui-theme="conversation-first"] { --theme-bg:#111317;--theme-panel:#171c22;--theme-panel-2:#202832;--theme-panel-3:#293540;--theme-text:#f2f6f8;--theme-muted:#9aaab4;--theme-accent:#53c4ff;--theme-accent-2:#9bdcff;--theme-accent-ink:#05202d;--theme-success:#69d99b;--theme-danger:#ff7180;--theme-warning:#f0be62;--theme-line:#9bdcff22;--theme-radius:8px;--theme-shadow:0 24px 64px #03070bbd;--theme-topbar:#131920f2;--theme-stage:#0b0e12;--theme-toolbar:#1a222b;--theme-player:#05070a;--theme-input:#10161c;--theme-item:#202a34;--theme-button:#28343e; }
html[data-ui-theme="spatial-room"] { --theme-bg:#0d1018;--theme-panel:#151a26;--theme-panel-2:#1e2634;--theme-panel-3:#293446;--theme-text:#f4f6ff;--theme-muted:#949db5;--theme-accent:#8de08a;--theme-accent-2:#c6f2a9;--theme-accent-ink:#0e2810;--theme-success:#8de08a;--theme-danger:#ff7c8d;--theme-warning:#efc66a;--theme-line:#c7d0ff20;--theme-radius:8px;--theme-shadow:0 28px 76px #02040abf;--theme-topbar:#121723ed;--theme-stage:#080b12;--theme-toolbar:#1a202e;--theme-player:#03050a;--theme-input:#101521;--theme-item:#1c2432;--theme-button:#273143; }
html[data-ui-theme="browser-workspace"] { color-scheme:light;--theme-bg:#dfe5e9;--theme-panel:#f1f4f6;--theme-panel-2:#fff;--theme-panel-3:#d6dde2;--theme-text:#20282e;--theme-muted:#66757f;--theme-accent:#1769aa;--theme-accent-2:#0f4f83;--theme-accent-ink:#fff;--theme-success:#26775a;--theme-danger:#b8414e;--theme-warning:#93651b;--theme-line:#24343e20;--theme-radius:6px;--theme-shadow:0 18px 44px #2a3d4829;--theme-topbar:#f8fafbf5;--theme-stage:#d8dfe3;--theme-toolbar:#f5f7f8;--theme-player:#14191c;--theme-input:#fff;--theme-item:#fff;--theme-button:#e6ecef; }
html[data-ui-theme="ten-foot-tv"] { --theme-bg:#05080b;--theme-panel:#0b1015;--theme-panel-2:#121a21;--theme-panel-3:#1a2630;--theme-text:#f7fbff;--theme-muted:#a5b5c0;--theme-accent:#62d5c7;--theme-accent-2:#a1f0e6;--theme-accent-ink:#06231f;--theme-success:#76dc9e;--theme-danger:#ff7584;--theme-warning:#f3c764;--theme-line:#d8f4ff20;--theme-radius:8px;--theme-shadow:0 28px 80px #000c;--theme-topbar:#081018f4;--theme-stage:#020508;--theme-toolbar:#0e171e;--theme-player:#000;--theme-input:#081016;--theme-item:#111b22;--theme-button:#19262e; }
html[data-ui-theme="fluid-desktop"] { color-scheme:light;--theme-bg:#edf1f4;--theme-panel:#f8fafb;--theme-panel-2:#fff;--theme-panel-3:#dfe6eb;--theme-text:#202b33;--theme-muted:#6d7b84;--theme-accent:#167d73;--theme-accent-2:#0e5d56;--theme-accent-ink:#fff;--theme-success:#29805b;--theme-danger:#bd4653;--theme-warning:#9a6c1e;--theme-line:#263b4720;--theme-radius:8px;--theme-shadow:0 18px 44px #30465025;--theme-topbar:#ffffffed;--theme-stage:#e1e7ea;--theme-toolbar:#f8fafb;--theme-player:#151c20;--theme-input:#fff;--theme-item:#fff;--theme-button:#e9eef1; }
html[data-ui-theme="mono-screening"] { color-scheme:light;--theme-bg:#ededed;--theme-panel:#f8f8f8;--theme-panel-2:#fff;--theme-panel-3:#dedede;--theme-text:#111;--theme-muted:#666;--theme-accent:#111;--theme-accent-2:#333;--theme-accent-ink:#fff;--theme-success:#2f6d4a;--theme-danger:#9b2631;--theme-warning:#74551c;--theme-line:#00000024;--theme-radius:0px;--theme-shadow:0 16px 40px #0002;--theme-topbar:#fafafaf7;--theme-stage:#d8d8d8;--theme-toolbar:#f3f3f3;--theme-player:#000;--theme-input:#fff;--theme-item:#fff;--theme-button:#e6e6e6; }
html[data-ui-theme="friends-party"] { --theme-bg:#17141d;--theme-panel:#201b28;--theme-panel-2:#2b2435;--theme-panel-3:#382e43;--theme-text:#fff6fb;--theme-muted:#c1aeba;--theme-accent:#ff8e72;--theme-accent-2:#ffc089;--theme-accent-ink:#331006;--theme-success:#74dfa1;--theme-danger:#ff708f;--theme-warning:#ffd36d;--theme-line:#ffd1bc22;--theme-radius:8px;--theme-shadow:0 24px 66px #08040bb8;--theme-topbar:#1b1722f2;--theme-stage:#0f0c13;--theme-toolbar:#251f2e;--theme-player:#070609;--theme-input:#17121c;--theme-item:#2a2333;--theme-button:#392f43; }
html[data-ui-theme="arcade-room"] { --theme-bg:#06050b;--theme-panel:#0e0b18;--theme-panel-2:#171126;--theme-panel-3:#221936;--theme-text:#fbf7ff;--theme-muted:#a99abb;--theme-accent:#28e6c5;--theme-accent-2:#ffde59;--theme-accent-ink:#04201b;--theme-success:#55e69b;--theme-danger:#ff4f83;--theme-warning:#ffde59;--theme-line:#9d6cff38;--theme-radius:3px;--theme-shadow:0 24px 70px #000d;--theme-topbar:#0a0712f6;--theme-stage:#030206;--theme-toolbar:#120d1e;--theme-player:#000;--theme-input:#090610;--theme-item:#161022;--theme-button:#21172f; }
html[data-ui-theme="audio-stage"] { --theme-bg:#0a1112;--theme-panel:#101b1d;--theme-panel-2:#172629;--theme-panel-3:#203438;--theme-text:#edf9f7;--theme-muted:#91aaa6;--theme-accent:#f0c45b;--theme-accent-2:#ffe098;--theme-accent-ink:#281d03;--theme-success:#64d69a;--theme-danger:#f47780;--theme-warning:#f0c45b;--theme-line:#d8efe92a;--theme-radius:6px;--theme-shadow:0 24px 64px #010809bd;--theme-topbar:#0d1718f3;--theme-stage:#060c0d;--theme-toolbar:#152224;--theme-player:#020606;--theme-input:#0c1516;--theme-item:#19282a;--theme-button:#243638; }
html[data-ui-theme="city-watch"] { --theme-bg:#090e16;--theme-panel:#101827;--theme-panel-2:#172337;--theme-panel-3:#213149;--theme-text:#edf4ff;--theme-muted:#8fa2bd;--theme-accent:#58b7ff;--theme-accent-2:#9dd5ff;--theme-accent-ink:#062039;--theme-success:#5cd29b;--theme-danger:#ff6e82;--theme-warning:#eabf62;--theme-line:#8bc7ff24;--theme-radius:5px;--theme-shadow:0 26px 74px #02050bbf;--theme-topbar:#0d1522f3;--theme-stage:#050911;--theme-toolbar:#142033;--theme-player:#01040a;--theme-input:#0b1320;--theme-item:#19263a;--theme-button:#23344b; }
html[data-ui-theme="modular-windows"] { color-scheme:light;--theme-bg:#e7ebef;--theme-panel:#f3f5f7;--theme-panel-2:#fff;--theme-panel-3:#d9dfe4;--theme-text:#20272c;--theme-muted:#68757d;--theme-accent:#4c6a86;--theme-accent-2:#304b64;--theme-accent-ink:#fff;--theme-success:#2f7856;--theme-danger:#b4454e;--theme-warning:#8b621c;--theme-line:#28394328;--theme-radius:4px;--theme-shadow:0 16px 40px #34465022;--theme-topbar:#f8f9faf5;--theme-stage:#dce2e6;--theme-toolbar:#f5f7f8;--theme-player:#161b1e;--theme-input:#fff;--theme-item:#fff;--theme-button:#e5eaed; }
html[data-ui-theme="silver-screen"] { --theme-bg:#0e0e0d;--theme-panel:#171714;--theme-panel-2:#20201c;--theme-panel-3:#2a2924;--theme-text:#f2efe6;--theme-muted:#aaa598;--theme-accent:#c7a763;--theme-accent-2:#e3ce9c;--theme-accent-ink:#251b08;--theme-success:#7bc596;--theme-danger:#df777c;--theme-warning:#c7a763;--theme-line:#eadbb72a;--theme-radius:2px;--theme-shadow:0 26px 72px #000c;--theme-topbar:#121210f5;--theme-stage:#080807;--theme-toolbar:#1a1916;--theme-player:#000;--theme-input:#10100e;--theme-item:#1d1c19;--theme-button:#292721; }

@media (min-width: 925px) {
  html[data-ui-theme="cinema-deck"] .workspace { grid-template-columns:250px minmax(560px,1fr)250px; }
  html[data-ui-theme="command-orbit"] .workspace { grid-template-columns:225px minmax(520px,1fr)320px; }
  html[data-ui-theme="poster-library"] .workspace { grid-template-columns:360px minmax(500px,1fr)270px; }
  html[data-ui-theme="poster-library"] .file-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  html[data-ui-theme="conversation-first"] .theater { grid-template-rows:auto auto auto auto auto minmax(220px,.72fr) minmax(280px,1fr); }
  html[data-ui-theme="ten-foot-tv"] .compact-button { min-height:42px; padding:10px 13px; font-size:13px; }
  html[data-ui-theme="ten-foot-tv"] .workspace { grid-template-columns:260px minmax(620px,1fr)290px; }
  html[data-ui-theme="director-console"] body { font-size:12px; }
  html[data-ui-theme="director-console"] .workspace { grid-template-columns:300px minmax(520px,1fr)330px; }
  html[data-ui-theme="audio-stage"] .theater-toolbar { padding-block:12px; border-bottom-color:var(--pink); }
  html[data-ui-theme="modular-windows"] .workspace { gap:8px; padding:8px; background:var(--bg); }
  html[data-ui-theme="modular-windows"] .side-panel, html[data-ui-theme="modular-windows"] .theater { border:1px solid var(--line); }
  html[data-ui-theme="spatial-room"] .side-panel { margin:8px 0 8px 8px; border:1px solid var(--line); }
  html[data-ui-theme="spatial-room"] .user-panel { margin:8px 8px 8px 0; }
  html[data-ui-theme="spatial-room"] .theater { margin:0 8px; }
}

:root { --marquee-color: #f3c96a; --marquee-speed: 70s; }

.room-marquee { position: relative; overflow: hidden; margin: 0 0 12px; min-height: 34px; border: 1px solid color-mix(in srgb, var(--marquee-color) 55%, transparent); background: color-mix(in srgb, var(--marquee-color) 10%, transparent); color: var(--marquee-color); display: flex; align-items: center; white-space: nowrap; border-radius: 8px; }
.room-marquee.is-hidden { display: none; }
.room-marquee span { display: inline-block; padding-left: 100%; animation: syncwatch-marquee var(--marquee-speed) linear infinite; }
@keyframes syncwatch-marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.temporary-room-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.media-category-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin: 10px 0; }
.media-category-toolbar label { flex: 1 1 150px; min-width: 0; }
.media-category-toolbar button { flex: 0 1 auto; min-height: 40px; white-space: nowrap; }
.tunnel-primary-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.tunnel-primary-actions > * { width: 100%; min-width: 0; min-height: 42px; white-space: normal; line-height: 1.3; }
.tunnel-tutorial-card { width: min(860px, 100%); }
.tunnel-tutorial-card h2 { margin: 4px 0 16px; }
.tunnel-tutorial-content { display: grid; gap: 12px; }
.tunnel-tutorial-content section { padding: 14px; background: var(--theme-item, #ffffff07); border: 1px solid var(--line); border-radius: 8px; }
.tunnel-tutorial-content h3 { margin: 0 0 8px; font-size: 13px; }
.tunnel-tutorial-content p, .tunnel-tutorial-content li { color: var(--muted); font-size: 11px; line-height: 1.7; }
.tunnel-tutorial-content ol, .tunnel-tutorial-content ul { margin: 0; padding-left: 22px; }
.tutorial-example { display: grid; gap: 5px; margin: 10px 0; padding: 10px; background: #0000001a; border: 1px solid var(--line); border-radius: 7px; }
.tutorial-example code { overflow-wrap: anywhere; color: var(--pink-2); }
.room-switch-success-overlay { position: fixed; z-index: 80; inset: 0; display: grid; place-items: center; pointer-events: none; }
.room-switch-success-overlay > div { position: relative; display: block; max-width: min(520px, calc(100vw - 32px)); padding: 18px 48px 18px 28px; text-align: center; border: 1px solid rgba(243,201,106,.65); border-radius: 8px; background: rgba(12,16,20,.94); box-shadow: 0 18px 60px rgba(0,0,0,.35); animation: room-switch-pop .28s ease-out; pointer-events: auto; }
.room-switch-success-overlay .notice-close-button { position: absolute; top: 7px; right: 7px; }
.room-switch-success-overlay strong { color: var(--marquee-color); font-size: 1.08rem; }
.room-switch-success-overlay span { margin-left: 10px; color: #fff; }
@keyframes room-switch-pop { from { opacity: 0; transform: scale(.92) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }

/* Responsive shell and the newly added operational states. */
body { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
.topbar { height: auto; min-height: 58px; padding-block: 6px; }
main { min-height: 0; height: auto; }
.main-page, .workspace, .theater { min-height: 0; }
::selection { color: #071715; background: var(--pink-2); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--pink-2); outline-offset: 2px; }

/* Collapsing chat must remove only the chat content, not the theater row itself. */
.theater.mobile-chat-collapsed { grid-template-rows: auto auto auto auto auto minmax(250px, 1fr) 44px; }
.chat-panel.mobile-chat-collapsed { min-height: 44px; height: 44px; }
@media (max-width: 924px) {
  .theater.mobile-chat-collapsed { grid-template-rows: auto auto auto auto auto minmax(260px, 1fr) 46px; }
}
@media (max-width: 540px) {
  .theater.mobile-chat-collapsed { grid-template-rows: auto auto auto auto auto minmax(220px, 1fr) 48px; }
}

.file-card.processing { filter: grayscale(.88); opacity: .7; cursor: wait; }
.file-card.processing:hover { border-color: transparent; transform: none; }
.file-processing, .profile-file-progress { display: grid; gap: 5px; margin-top: 8px; }
.file-processing > div, .profile-file-progress > div { height: 6px; overflow: hidden; background: #ffffff12; border-radius: 6px; }
.file-processing > div > span, .profile-file-progress > div > span { display: block; height: 100%; background: var(--pink); }
.file-processing small, .profile-file-progress small { color: var(--pink-2); font-size: 10px; font-variant-numeric: tabular-nums; }
.profile-file-item.processing { filter: grayscale(.85); opacity: .7; cursor: wait; }
.profile-file-item.processing button { pointer-events: none; }

.profile-room-toolbar { position: sticky; z-index: 2; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0; padding: 9px 10px; background: #171e22f5; border: 1px solid var(--line); border-radius: 8px; }
.profile-room-toolbar label { margin: 0; }
.profile-room-item { align-items: flex-start; border: 1px solid transparent; }
.profile-room-item.pinned { border-color: #e9bd685c; background: #e9bd680b; }
.profile-room-item.is-owned { border-color: color-mix(in srgb, var(--theme-accent, var(--pink)) 72%, var(--line)); background: color-mix(in srgb, var(--theme-accent, var(--pink)) 8%, transparent); animation: owned-room-pulse 2.2s ease-in-out infinite; }
@keyframes owned-room-pulse {
  0%, 100% { border-color: color-mix(in srgb, var(--theme-accent, var(--pink)) 54%, var(--line)); box-shadow: 0 0 0 0 color-mix(in srgb, var(--theme-accent, var(--pink)) 0%, transparent); }
  50% { border-color: var(--theme-accent, var(--pink)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-accent, var(--pink)) 27%, transparent), 0 8px 24px color-mix(in srgb, var(--theme-accent, var(--pink)) 12%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .profile-room-item.is-owned { animation: none; border-color: var(--theme-accent, var(--pink)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-accent, var(--pink)) 24%, transparent); }
}
.profile-room-select { display: flex; flex: 0 0 auto; align-items: center; gap: 5px; margin: 2px 0 0; font-size: 10px; }
.profile-room-select input { width: auto; }
.profile-room-actions { flex: 0 0 auto !important; display: grid; gap: 6px; }
.profile-room-actions button { min-width: 74px; }

.room-address-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.room-address-actions button { min-width: 0; min-height: 30px; padding: 5px 4px; border-radius: 6px; font-size: 9px; white-space: nowrap; }

.player-container:fullscreen .toast-region, .player-container.fullscreen-active .toast-region { position: absolute; z-index: 2147483647; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); }
.player-container:fullscreen .toast, .player-container.fullscreen-active .toast { color: #fff; background: #11181cf2; border-color: #ffffff38; }
.fullscreen-actions { max-width: calc(100vw - max(28px, env(safe-area-inset-left) + env(safe-area-inset-right))); }

@media (pointer: coarse) {
  button, input, select { min-height: 44px; }
  .icon-button, .control-button, .header-feature-button { min-width: 44px; }
}

@media (max-width: 924px) {
  main { height: auto; min-height: 0; }
  .toast-region {
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    bottom: calc(64px + env(safe-area-inset-bottom));
    width: auto;
    pointer-events: none;
  }
  .toast-region > .toast {
    width: 100%;
    max-width: none;
    color: var(--text);
    background: var(--theme-panel-2, #2b1e34f5);
    pointer-events: auto;
  }
  .toast.with-action {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }
  .toast.with-action > span { grid-column: 1 / -1; }
  .toast button { min-height: 44px; }
  .fullscreen-chat-card { top: max(118px, calc(env(safe-area-inset-top) + 108px)); }
  .profile-room-item { display: grid; grid-template-columns: auto minmax(0, 1fr); }
  .profile-room-actions { grid-column: 1 / -1; width: 100%; grid-template-columns: 1fr 1fr; }
  .profile-room-actions button { min-height: 44px; }
}

@media (max-width: 540px) {
  .room-address-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .room-address-actions button { min-height: 42px; font-size: 11px; }
  .profile-room-toolbar { align-items: stretch; }
  .profile-room-toolbar button { min-height: 44px; }
  .profile-file-item { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .profile-file-item > button { grid-column: 1 / -1; min-height: 44px; }
  .fullscreen-actions { max-height: 42dvh; overflow-y: auto; }
  .fullscreen-chat-card { top: auto; }
}

/* Android uses a compact app bar, a discoverable action sheet, and touch-first work areas. */
body.android-client { --android-appbar: 64px; overflow-x: hidden; overscroll-behavior-y: contain; }
body.android-client .topbar { position: sticky; top: 0; display: grid; grid-template-columns: minmax(0, 1fr) 48px; align-items: center; gap: 10px; min-height: calc(var(--android-appbar) + env(safe-area-inset-top)); padding: max(8px, env(safe-area-inset-top)) 10px 8px; overflow: visible; background: var(--theme-topbar, #10191cf7); }
body.android-client .brand { min-width: 0; min-height: 48px; padding-inline: 3px; }
body.android-client .brand-mark { width: 38px; height: 38px; }
body.android-client .brand strong { font-size: .94rem; }
body.android-client .brand small { display: block; font-size: .68rem; }
body.android-client .mobile-menu-button { display: grid; width: 48px; min-width: 48px; height: 48px; place-items: center; padding: 0; color: var(--text); background: var(--theme-button, #ffffff0b); border: 1px solid var(--line); border-radius: 8px; font-size: 1.4rem; }
body.android-client .mobile-menu-button[aria-expanded="true"] { color: var(--theme-accent-ink, #071715); background: var(--pink); border-color: var(--pink); }
body.android-client .mobile-menu-backdrop { position: fixed; z-index: 175; inset: calc(var(--android-appbar) + env(safe-area-inset-top)) 0 0; width: 100%; min-height: 0; padding: 0; background: #05090bbb; border: 0; border-radius: 0; }
body.android-client.mobile-actions-open .mobile-menu-backdrop { display: block; }
body.android-client .topbar-actions { position: fixed; z-index: 180; top: calc(var(--android-appbar) + env(safe-area-inset-top) + 8px); left: 8px; right: 8px; display: none; width: auto; max-width: none; max-height: calc(100dvh - var(--android-appbar) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 18px); grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 8px; margin: 0; padding: 10px; overflow-x: hidden; overflow-y: auto; background: var(--theme-panel-2, #171e22); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 18px 48px #0009; }
body.android-client.mobile-actions-open .topbar-actions { display: grid; }
body.android-client .topbar-actions > * { min-width: 0; width: 100%; margin: 0; }
body.android-client .header-feature-button, body.android-client .share-link-button, body.android-client .account-button, body.android-client .status-badge { min-width: 0; min-height: 48px; justify-content: flex-start; gap: 9px; padding: 9px 11px; background: var(--theme-button, #ffffff0b); border: 1px solid var(--line); border-radius: 8px; }
body.android-client .header-feature-button .button-label, body.android-client .share-link-button, body.android-client .status-badge span, body.android-client .account-button span:nth-child(2) { display: inline; min-width: 0; font-size: .76rem; overflow-wrap: anywhere; }
body.android-client .status-badge, body.android-client .account-button, body.android-client .account-dropdown { grid-column: 1 / -1; }
body.android-client .account-button > span:nth-child(2) { display: grid; text-align: left; }
body.android-client .account-dropdown { position: static; z-index: auto; width: 100%; padding: 6px; box-shadow: none; }
body.android-client .account-dropdown button { min-height: 48px; }
body.android-client .topbar-actions .topbar-menu { display: contents; }
body.android-client .topbar-actions .topbar-menu-trigger { width: 100%; justify-content: space-between; }
body.android-client .topbar-actions .topbar-menu-panel {
  position: static;
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  margin: -2px 0 2px;
  padding: 6px;
  background: color-mix(in srgb, var(--theme-panel-3, #20282d) 94%, #000);
  box-shadow: none;
}

/* Mobile web shares the Android action-sheet pattern instead of squeezing every action into one row. */
@media (max-width: 540px) {
  body:not(.android-client) { --mobile-web-appbar: 60px; }
  body:not(.android-client) .topbar {
    position: sticky;
    top: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: center;
    gap: 8px;
    height: var(--mobile-web-appbar);
    min-height: var(--mobile-web-appbar);
    padding: 7px 8px;
    overflow: visible;
  }
  body:not(.android-client) main { height: calc(100dvh - var(--mobile-web-appbar)); }
  body:not(.android-client) .brand { min-width: 0; }
  body:not(.android-client) .mobile-menu-button {
    display: grid;
    width: 44px;
    min-width: 44px;
    height: 44px;
    place-items: center;
    padding: 0;
    color: var(--text);
    background: var(--theme-button, #ffffff0b);
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 1.25rem;
  }
  body:not(.android-client) .mobile-menu-button[aria-expanded="true"] {
    color: var(--theme-accent-ink, #071715);
    background: var(--pink);
    border-color: var(--pink);
  }
  body:not(.android-client) .mobile-menu-backdrop {
    position: fixed;
    z-index: 175;
    inset: var(--mobile-web-appbar) 0 0;
    width: 100%;
    min-height: 0;
    padding: 0;
    background: #05090bbb;
    border: 0;
    border-radius: 0;
  }
  body:not(.android-client).mobile-actions-open .mobile-menu-backdrop { display: block; }
  body:not(.android-client) .topbar-actions {
    position: fixed;
    z-index: 180;
    top: calc(var(--mobile-web-appbar) + 8px);
    left: 8px;
    right: 8px;
    display: none;
    width: auto;
    max-width: none;
    max-height: calc(100dvh - var(--mobile-web-appbar) - 18px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 8px;
    margin: 0;
    padding: 10px;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--theme-panel-2, #171e22);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 18px 48px #0009;
  }
  body:not(.android-client).mobile-actions-open .topbar-actions { display: grid; }
  body:not(.android-client) .topbar-actions > * { width: 100%; min-width: 0; margin: 0; }
  body:not(.android-client) .topbar-actions .topbar-menu { display: contents; }
  body:not(.android-client) .topbar-actions .topbar-menu-trigger { width: 100%; justify-content: space-between; }
  body:not(.android-client) .topbar-actions .topbar-menu-panel {
    position: static;
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    margin: -2px 0 2px;
    padding: 6px;
    background: color-mix(in srgb, var(--theme-panel-3, #20282d) 94%, #000);
    box-shadow: none;
  }
  body:not(.android-client) .header-feature-button,
  body:not(.android-client) .share-link-button,
  body:not(.android-client) .account-button,
  body:not(.android-client) .status-badge {
    min-width: 0;
    min-height: 44px;
    justify-content: flex-start;
    gap: 8px;
    padding: 8px 10px;
    background: var(--theme-button, #ffffff0b);
    border: 1px solid var(--line);
    border-radius: 8px;
  }
  body:not(.android-client) .header-feature-button .button-label,
  body:not(.android-client) .share-link-button,
  body:not(.android-client) .status-badge span,
  body:not(.android-client) .account-button span:nth-child(2) {
    display: inline;
    min-width: 0;
    font-size: .74rem;
    overflow-wrap: anywhere;
  }
  body:not(.android-client) .status-badge,
  body:not(.android-client) .account-button,
  body:not(.android-client) .account-dropdown { grid-column: 1 / -1; }
  body:not(.android-client) .account-button > span:nth-child(2) { display: grid; text-align: left; }
  body:not(.android-client) .account-dropdown {
    position: static;
    z-index: auto;
    width: 100%;
    padding: 6px;
    box-shadow: none;
  }
  body:not(.android-client) .account-dropdown button { min-height: 44px; }
}

.player-container:fullscreen .fullscreen-show-button:not(.is-hidden),
.player-container.fullscreen-active .fullscreen-show-button:not(.is-hidden) {
  animation: fullscreen-show-affordance 3s ease forwards;
}
.player-container:fullscreen .fullscreen-show-button:not(.is-hidden):is(:hover, :focus-visible),
.player-container.fullscreen-active .fullscreen-show-button:not(.is-hidden):is(:hover, :focus-visible) {
  animation-play-state: paused;
}
@keyframes fullscreen-show-affordance {
  0%, 82% { opacity: 1; visibility: visible; pointer-events: auto; }
  100% { opacity: 0; visibility: hidden; pointer-events: none; }
}

.user-card.self-highlight {
  animation: self-member-highlight 1.8s ease-in-out infinite;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--theme-accent, var(--pink)) 28%, transparent);
}
@keyframes self-member-highlight {
  0%, 100% {
    border-color: color-mix(in srgb, var(--theme-accent, var(--pink)) 58%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--theme-accent, var(--pink)) 24%, transparent);
  }
  50% {
    border-color: var(--theme-accent, var(--pink));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-accent, var(--pink)) 22%, transparent), 0 0 22px color-mix(in srgb, var(--theme-accent, var(--pink)) 30%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .user-card.self-highlight { animation: none; }
}

/* Management controls and live room details share the active theme tokens. */
input[type="checkbox"] {
  width: 18px;
  min-width: 18px;
  height: 18px;
  margin: 0;
  appearance: none;
  background: color-mix(in srgb, var(--theme-input, #10171b) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 24%, transparent);
  border-radius: 4px;
  cursor: pointer;
}
input[type="checkbox"]:checked {
  background: var(--theme-accent, var(--pink));
  border-color: var(--theme-accent, var(--pink));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-accent, var(--pink)) 16%, transparent);
}
input[type="checkbox"]:checked::after {
  display: block;
  width: 8px;
  height: 4px;
  margin: 4px 0 0 4px;
  content: "";
  border-bottom: 2px solid var(--theme-accent-ink, #171006);
  border-left: 2px solid var(--theme-accent-ink, #171006);
  transform: rotate(-45deg);
}
input[type="checkbox"]:focus-visible { outline: 2px solid var(--theme-accent, var(--pink)); outline-offset: 2px; }
.permission-grid .check-line { min-height: 38px; padding: 7px 9px; background: color-mix(in srgb, var(--theme-item, #ffffff07) 84%, transparent); border: 1px solid var(--line); border-radius: 7px; }
.permission-group-bulk, .account-bulk-toolbar, .default-account-password { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin: 8px 0; padding: 9px; background: var(--theme-item, #ffffff07); border: 1px solid var(--line); border-radius: 7px; }
.permission-group-bulk .check-line, .account-bulk-toolbar .check-line { margin: 0 auto 0 0; }
.default-account-password label { flex: 1 1 220px; margin: 0; }
.account-filter-toolbar { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(130px, .32fr) minmax(140px, .36fr); align-items: end; gap: 9px; margin: 8px 0 12px; }
.account-filter-toolbar > label { min-width: 0; margin: 0; }
.account-filter-toolbar .admin-search-field { width: auto; }
.permission-group-select, .admin-account-select { display: inline-flex !important; align-items: center; gap: 5px; margin: 0; color: var(--muted); font-size: 9px; }
.account-profile-editor { grid-template-columns: repeat(2, minmax(130px, 1fr)); }
.account-profile-editor .wide { grid-column: 1 / -1; }
.account-profile-editor button { grid-column: 1 / -1; justify-self: end; }
.management-context-card strong { color: var(--theme-accent, var(--pink-2)); }
.location-member-row em { display: block; color: var(--theme-accent, var(--pink-2)); font-size: 9px; font-style: normal; }
.network-rate-icon { display: grid; width: 24px; height: 24px; place-items: center; color: var(--theme-accent-ink, #171006); background: var(--theme-accent, var(--pink)); border-radius: 50%; font-size: 14px !important; font-weight: 900; }
.network-rate-icon.download { color: #06180f; background: var(--green); }
.queue-list li span { display: grid; min-width: 0; }
.queue-list li span small { overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.queue-list li button[data-queue-action="mode"] { padding: 4px 7px; color: var(--theme-accent, var(--pink-2)); background: color-mix(in srgb, var(--theme-accent, var(--pink)) 12%, transparent); border: 1px solid color-mix(in srgb, var(--theme-accent, var(--pink)) 28%, transparent); border-radius: 5px; }
.member-details-collapsed .user-card { grid-template-columns: 34px minmax(0, 1fr); align-items: center; padding-block: 7px; }
.member-details-collapsed .user-card .user-info > :not(strong), .member-details-collapsed .user-card .user-actions { display: none !important; }
.level-progress-card.level-up-highlight { animation: level-up-highlight 1s ease-in-out 5; }
@keyframes level-up-highlight { 0%, 100% { border-color: var(--line); box-shadow: none; } 50% { border-color: var(--theme-accent, var(--pink)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-accent, var(--pink)) 24%, transparent); } }
.login-page > .login-marquee, .auth-card > .login-marquee { position: relative; z-index: 25; top: auto; right: auto; left: auto; width: 100%; max-width: none; overflow: hidden; margin: 0 0 12px; box-shadow: 0 8px 24px #0008; }

@media (max-width: 760px) {
  .login-page { padding-top: 18px; }
  .account-profile-editor { grid-template-columns: 1fr; }
  .account-profile-editor .wide, .account-profile-editor button { grid-column: 1; }
  .permission-group-bulk, .account-bulk-toolbar { align-items: stretch; }
  .permission-group-bulk button, .account-bulk-toolbar button { flex: 1 1 145px; min-height: 44px; }
  .login-page > .login-marquee, .auth-card > .login-marquee { margin-bottom: 10px; }
}

/* v2.1 workspace additions */
.media-category-toolbar, .video-management-toolbar, .profile-management-toolbar, .friend-search-form, .emoji-toolbar { display: flex; align-items: end; gap: 8px; flex-wrap: wrap; }
.media-category-toolbar > label, .video-management-toolbar > label, .profile-management-toolbar > label, .friend-search-form > input { min-width: 150px; flex: 1 1 160px; }
.friend-directory-body { display:grid; gap:10px; }.friend-directory-card.is-collapsed { padding-bottom:12px; }.friend-profile-item.is-pinned { border-color:color-mix(in srgb, var(--theme-accent) 56%, var(--line)); background:color-mix(in srgb, var(--theme-accent) 8%, var(--theme-item)); }.friend-pin-mark { display:inline-flex; align-items:center; min-height:20px; margin-right:7px; padding:1px 6px; color:var(--theme-accent); font-size:11px; border:1px solid color-mix(in srgb, var(--theme-accent) 48%, var(--line)); border-radius:5px; }
.media-batch-modal-card, .video-management-modal-card, .desktop-share-modal-card { width: min(980px, calc(100vw - 28px)); max-height: min(88vh, 900px); overflow: auto; }
.media-batch-list, .video-management-list { max-height: 52vh; overflow: auto; }
.manage-select-row, .video-management-row { display: grid; grid-template-columns: auto auto minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.manage-select-row:hover, .video-management-row:hover { background: color-mix(in srgb, var(--pink) 6%, transparent); }
.manage-select-row span:last-child, .video-management-row > div:not(.actions) { min-width: 0; }
.manage-select-row small, .video-management-row small { display:block; color: var(--muted); margin-top: 3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.media-batch-footer { display:flex; justify-content:flex-end; align-items:end; gap:10px; margin-top:14px; }
.media-batch-footer label { min-width: 220px; }
.video-management-row.processing { opacity: .58; filter: grayscale(.7); }
.video-management-row .actions { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.video-management-row .actions button { padding:6px 9px; font-size:.84rem; }
.video-management-rename-panel, .video-management-preview { display:grid; gap:10px; margin:10px 0; padding:12px; border:1px solid var(--line); border-radius:7px; background:color-mix(in srgb, var(--theme-panel-2) 88%, #000 12%); }
.video-management-rename-panel .settings-title, .video-management-preview .settings-title { align-items:start; margin:0; }
.video-management-rename-panel .settings-title > div, .video-management-preview .settings-title > div { display:grid; gap:3px; }
.video-management-rename-panel small, .video-management-preview small { color:var(--muted); line-height:1.45; }
.video-management-rename-grid { display:grid; grid-template-columns:minmax(220px,2fr) minmax(150px,1fr) minmax(150px,1fr) 110px 110px; gap:8px; align-items:end; }
.video-management-rename-grid label { display:grid; gap:5px; min-width:0; color:var(--muted); font-size:.84rem; }
.video-management-rename-grid input { width:100%; }
.video-management-rename-preview { max-height:150px; overflow:auto; border:1px solid var(--line); border-radius:6px; }
.video-management-rename-preview-row { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:8px; align-items:center; padding:7px 9px; border-bottom:1px solid var(--line); font-size:.84rem; }
.video-management-rename-preview-row:last-child { border-bottom:0; }
.video-management-rename-preview-row span, .video-management-rename-preview-row strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.video-management-rename-preview-row.invalid strong { color:var(--red); }
.video-management-preview video { width:100%; max-height:42vh; min-height:220px; object-fit:contain; background:#000; border:1px solid var(--line); border-radius:6px; }
.friend-chat-modal-card { width:min(820px, calc(100vw - 28px)); max-height:min(92vh, 920px); overflow:visible; }
.friend-chat-history { min-height: 320px; max-height: 58vh; overflow:auto; display:grid; gap:8px; padding:10px; background: color-mix(in srgb, var(--theme-panel-2) 88%, transparent); border-radius:8px; }
.friend-chat-message { position:relative; max-width: 82%; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--theme-panel); }
.friend-chat-message.mine { margin-left:auto; background: color-mix(in srgb, var(--pink) 14%, var(--theme-panel)); }
.friend-chat-message p { margin:3px 0; white-space:pre-wrap; overflow-wrap:anywhere; }
.friend-chat-message small { color:var(--muted); }
.friend-chat-message blockquote { display:grid; gap:2px; margin:4px 0 7px; padding:6px 8px; color:var(--muted); background:color-mix(in srgb, var(--theme-panel-2) 84%, transparent); border:1px solid var(--line); border-radius:6px; }
.friend-chat-message blockquote strong { color:var(--text); font-size:.82rem; }
.friend-chat-image { display:block; width:min(320px, 100%); margin:4px 0; }
.friend-chat-image img { display:block; width:100%; max-height:320px; object-fit:contain; background:#050607; border:1px solid var(--line); border-radius:6px; }
.friend-chat-form { grid-template-columns:minmax(0,1fr) auto auto auto; }
.friend-chat-emoji-bar { max-height:150px; overflow:auto; margin-top:8px; }
.friend-chat-batch-bar, .friend-chat-reply-preview { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:8px 0; padding:8px 10px; border:1px solid var(--line); border-radius:7px; background:color-mix(in srgb, var(--theme-panel-2) 90%, transparent); }
.friend-chat-reply-preview > div { min-width:0; display:grid; gap:2px; }.friend-chat-reply-preview span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); }
.friend-message-select { position:absolute; top:7px; left:-34px; }.friend-chat-message.mine .friend-message-select { left:auto; right:-34px; }
.friend-row-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; max-width:300px; }.friend-row-actions button { min-height:34px; padding:6px 9px; }
.friend-chat-context-menu { z-index:650; }
.friend-video-notice-layer { position:absolute; top:54px; right:12px; z-index:34; display:grid; width:min(340px, calc(100% - 24px)); gap:8px; pointer-events:none; }
.player-container:fullscreen .friend-video-notice-layer, .player-container.fullscreen-active .friend-video-notice-layer { position:fixed; top:max(60px, calc(env(safe-area-inset-top) + 48px)); right:max(12px, env(safe-area-inset-right)); z-index:2147483645; }
.friend-video-notice { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px; padding:10px 10px 10px 12px; color:var(--text); background:color-mix(in srgb, var(--theme-panel, #15171c) 94%, transparent); border:1px solid color-mix(in srgb, var(--pink) 42%, var(--line)); border-radius:7px; box-shadow:0 12px 28px #0007; pointer-events:auto; backdrop-filter:blur(12px); }
.friend-video-notice > div { min-width:0; display:grid; gap:2px; }.friend-video-notice strong, .friend-video-notice p, .friend-video-notice small { overflow:hidden; margin:0; text-overflow:ellipsis; white-space:nowrap; }.friend-video-notice p { font-size:.88rem; }.friend-video-notice small { color:var(--muted); font-size:.72rem; }
.friend-video-notice-open { min-height:32px; padding:5px 9px; color:var(--text); background:var(--theme-button, #ffffff12); border:1px solid var(--line); border-radius:6px; }.friend-video-notice-close { position:absolute; top:-8px; right:-8px; display:grid; width:24px; height:24px; padding:0; place-items:center; color:var(--text); background:var(--theme-panel, #15171c); border:1px solid var(--line); border-radius:50%; }
.device-management-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:10px 0; padding:9px 10px; border:1px solid var(--line); border-radius:7px; background:color-mix(in srgb, var(--theme-panel-2) 88%, transparent); }.device-management-toolbar .check-line { margin:0; }.device-select { flex:0 0 auto; }
.admin-account-detail.account-admin-focus { border-color:color-mix(in srgb, var(--pink) 72%, var(--line)); box-shadow:0 0 0 3px color-mix(in srgb, var(--pink) 18%, transparent); animation:accountAdminFocus 1s ease-in-out 2; }
@keyframes accountAdminFocus { 50% { box-shadow:0 0 0 5px color-mix(in srgb, var(--pink) 28%, transparent); } }
.desktop-share-modal-card .settings-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin:14px 0; }
.desktop-share-modal-card textarea { width:100%; resize:vertical; }
@media (min-width: 925px) { .desktop-share-modal-card { min-height: 0; } }
.emoji-toolbar { align-items:center; gap:6px; }
.emoji-toolbar > label { display:flex; align-items:center; gap:6px; font-size:.8rem; color:var(--muted); }
.emoji-toolbar .emoji-bar { flex:1; }
.profile-avatar.small { width:38px; height:38px; font-size:20px; }
.profile-avatar.small img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.qr-address-type { display:block; margin-bottom:7px; color:var(--pink-2); text-align:center; }
.qr-address-value { display:block; max-width:280px; margin-top:7px; overflow-wrap:anywhere; color:var(--muted); font-size:.72rem; }
.profile-management-toolbar { margin:10px 0; padding:8px; border:1px solid var(--line); border-radius:8px; background:color-mix(in srgb, var(--theme-panel-2) 82%, transparent); }
.profile-management-toolbar input, .profile-management-toolbar select { min-width:110px; }
@media (max-width: 700px) {
  .manage-select-row, .video-management-row { grid-template-columns:auto auto minmax(0,1fr); }
  .video-management-row .actions { grid-column:1 / -1; justify-content:flex-start; }
  .video-management-rename-grid { grid-template-columns:1fr 1fr; }
  .video-management-rename-grid label:first-child { grid-column:1 / -1; }
  .video-management-preview video { min-height:180px; }
  .media-batch-footer { flex-direction:column; align-items:stretch; }
  .media-batch-footer label { min-width:0; }
  .friend-chat-modal-card { width:calc(100vw - 12px); max-height:calc(100dvh - 12px); padding:14px 10px; }
  .friend-chat-history { min-height:240px; max-height:48dvh; padding-inline:38px; }
  .friend-chat-message { max-width:96%; }
  .friend-profile-item { align-items:flex-start; }.friend-row-actions { grid-column:1 / -1; max-width:none; justify-content:flex-start; }
  .friend-video-notice-layer { top:44px; right:7px; width:calc(100% - 14px); }.friend-video-notice { grid-template-columns:minmax(0,1fr); padding-right:12px; }.friend-video-notice-open { width:100%; }
  .device-management-toolbar { align-items:stretch; flex-direction:column; }
}

/* Shared task surfaces stay visible while the library or mobile drawers are closed. */
.global-upload-progress {
  position: fixed;
  z-index: 2147483638;
  top: 68px;
  right: 14px;
  width: min(460px, calc(100vw - 28px));
  margin: 0;
  padding: 12px;
  color: var(--text);
  background: color-mix(in srgb, var(--panel-2) 96%, transparent);
  border-color: color-mix(in srgb, var(--pink) 48%, var(--line));
  box-shadow: 0 18px 48px #0009;
  backdrop-filter: blur(18px);
}
.global-upload-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.global-upload-heading > span { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.global-upload-heading strong { font-size: 12px; }
.global-upload-heading small { color: var(--muted); font-size: 9px; text-align: right; }
.global-upload-heading button { min-height: 28px; padding: 4px 7px; color: var(--pink-2); border: 1px solid var(--line); border-radius: 6px; }
.global-upload-progress .progress-track { height: 7px; }
.global-upload-progress .progress-meta small { color: var(--text); font-size: 10px; line-height: 1.45; }
.global-upload-progress.backgrounded { width: min(270px, calc(100vw - 28px)); padding: 9px 10px; cursor: default; }
.global-upload-progress.backgrounded .global-upload-heading { margin: 0; }
.global-upload-progress.backgrounded .global-upload-heading small,
.global-upload-progress.backgrounded .progress-track,
.global-upload-progress.backgrounded .progress-meta { display: none; }

.tunnel-progress {
  position: fixed;
  z-index: 2147483639;
  top: 68px;
  left: 14px;
  right: 14px;
  display: grid;
  grid-template-columns: minmax(210px, .8fr) minmax(180px, 1fr) auto;
  align-items: center;
  gap: 8px 14px;
  padding: 10px 12px;
  color: var(--text);
  background: color-mix(in srgb, var(--panel-2) 97%, transparent);
  border: 1px solid color-mix(in srgb, var(--theme-accent, var(--pink)) 58%, var(--line));
  border-radius: 9px;
  box-shadow: 0 18px 48px #0009;
  backdrop-filter: blur(18px);
}
.tunnel-progress-heading { display: flex; min-width: 0; align-items: center; gap: 10px; }.tunnel-progress-heading > div { display: grid; min-width: 0; gap: 2px; }.tunnel-progress-heading small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.tunnel-progress-heading button { flex: 0 0 44px; width: 44px; height: 44px; margin-left: auto; padding: 0; }
.tunnel-progress > progress { width: 100%; height: 8px; accent-color: var(--theme-accent, var(--pink)); }
.tunnel-progress-meta { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tunnel-progress details { grid-column: 1 / -1; padding-top: 6px; border-top: 1px solid var(--line); }.tunnel-progress summary { cursor: pointer; color: var(--pink-2); font-size: 10px; }.tunnel-progress details p { margin: 5px 0 0; color: var(--muted); font-size: 10px; overflow-wrap: anywhere; }
body.tunnel-task-visible .global-upload-progress { top: 164px; }

.persistent-request-center {
  position: fixed;
  z-index: 2147483637;
  left: 14px;
  bottom: 14px;
  display: grid;
  gap: 8px;
  width: min(390px, calc(100vw - 28px));
  max-height: min(58vh, 520px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.persistent-request {
  position: relative;
  display: grid;
  gap: 7px;
  padding: 13px 42px 13px 13px;
  color: var(--text);
  background: color-mix(in srgb, var(--panel-2) 96%, transparent);
  border: 1px solid color-mix(in srgb, var(--yellow) 44%, var(--line));
  border-radius: 8px;
  box-shadow: 0 16px 40px #0009;
  backdrop-filter: blur(16px);
}
.persistent-request p { margin: 0; color: var(--muted); line-height: 1.5; overflow-wrap: anywhere; }
.persistent-request > div { display: flex; flex-wrap: wrap; gap: 7px; }
.persistent-request > div button { min-height: 34px; padding: 6px 10px; color: var(--text); background: #ffffff0c; border: 1px solid var(--line); border-radius: 7px; }
.persistent-request > div select { min-height:34px; max-width:180px; color:var(--text); background:var(--theme-panel-2); border:1px solid var(--line); border-radius:7px; }
.persistent-request-close { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; padding: 0; color: var(--muted); background: transparent; border: 0; border-radius: 6px; font-size: 18px; }
.persistent-request-close:hover { color: var(--text); background: #ffffff10; }

/* v2.3.1 keeps one readable text toolbar on every client. */
.topbar .button-label { display: inline !important; font-size: 10px; line-height: 1.2; white-space: nowrap; }
.room-header small { font-size: 8px; }
.room-header strong { font-size: 11px; }

.member-heading-actions { flex-wrap: wrap; justify-content: flex-end; }
.member-heading-actions .text-button { min-height: 30px; padding: 4px 6px; font-size: 9px; }
#usersTab > .panel-heading {
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px 10px;
}
#usersTab > .panel-heading > div:first-child {
  flex: 1 0 auto;
  min-width: max-content;
}
#usersTab > .panel-heading h2 {
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
}
#usersTab > .panel-heading .member-heading-actions {
  flex: 1 1 180px;
  min-width: 0;
}
@media (max-width: 440px) {
  #usersTab > .panel-heading .member-heading-actions {
    flex-basis: 100%;
    justify-content: flex-start;
  }
}
.member-avatar {
  position: relative;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  overflow: visible;
  padding: 0;
  color: var(--text);
  background: color-mix(in srgb, var(--pink) 15%, var(--panel-3));
  border: 1px solid var(--line);
  border-radius: 50%;
  font-weight: 800;
}
.member-avatar img, .member-profile-avatar img, .member-mini-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.member-avatar .user-dot { position: absolute; right: -4px; bottom: -4px; width: 18px; height: 18px; font-size: 9px; border: 2px solid var(--panel); }
.user-card { grid-template-columns: 40px minmax(0, 1fr) auto; }
.user-info[data-user-action="profile"] { cursor: pointer; }
.user-info[data-user-action="profile"]:hover > strong { color: var(--pink-2); }

.member-profile-card { width: min(560px, 100%); }
.member-profile-hero { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.member-profile-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.member-profile-actions button { min-height: 36px; padding: 7px 11px; color: var(--text); background: var(--theme-button, #ffffff0c); border: 1px solid var(--line); border-radius: 7px; white-space: nowrap; }
.member-profile-actions button:hover:not(:disabled), .member-profile-actions button:focus-visible:not(:disabled) { color: var(--pink-2); border-color: color-mix(in srgb, var(--pink) 58%, var(--line)); background: color-mix(in srgb, var(--pink) 10%, var(--theme-button, #ffffff0c)); }
.member-profile-hero h2, .member-profile-hero p { margin: 2px 0; }
.member-profile-avatar { display: grid; width: 72px; height: 72px; place-items: center; overflow: hidden; color: var(--theme-accent-ink, #071715); background: var(--pink); border-radius: 50%; font-size: 24px; font-weight: 900; }
.member-signature { margin: 16px 0; padding: 11px 12px; color: var(--muted); background: color-mix(in srgb, var(--pink) 6%, #ffffff07); border: 1px solid color-mix(in srgb, var(--pink) 24%, var(--line)); border-radius: 7px; overflow-wrap: anywhere; }
.member-profile-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.member-profile-stats > div { display: grid; gap: 3px; padding: 12px; text-align: center; background: #ffffff07; border: 1px solid var(--line); border-radius: 7px; }
.member-profile-stats strong { color: var(--pink-2); font-size: 17px; }
.member-profile-stats small { color: var(--muted); }
.member-profile-details { display: grid; gap: 1px; margin: 14px 0 0; background: var(--line); border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.member-profile-details > div { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 12px; padding: 10px 12px; background: var(--panel-2); }
.member-profile-details dt { color: var(--muted); }
.member-profile-details dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.location-authorizations-card { min-height: min(500px, calc(100dvh - 36px)); }
.location-member-row { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 11px; align-items: center; width: 100%; min-height: 62px; margin-bottom: 7px; padding: 9px 11px; color: var(--text); text-align: left; background: #ffffff07; border: 1px solid var(--line); border-radius: 7px; }
.location-member-row:hover { border-color: color-mix(in srgb, var(--pink) 52%, var(--line)); background: color-mix(in srgb, var(--pink) 7%, transparent); }
.location-member-row > span:last-child { display: grid; gap: 3px; min-width: 0; }
.location-member-row small { color: var(--muted); overflow-wrap: anywhere; }
.member-mini-avatar { display: grid; width: 42px; height: 42px; place-items: center; overflow: hidden; color: var(--theme-accent-ink, #071715); background: var(--pink); border-radius: 50%; font-weight: 800; }

.chat-management-card { width: min(1120px, 100%); }
.chat-management-title { padding-right: 44px; }
.chat-management-title h2 { margin-bottom: 0; }
.chat-filter-toolbar { grid-template-columns: minmax(170px, .8fr) minmax(140px, .6fr) minmax(145px, .55fr) minmax(145px, .55fr); align-items: end; }
.chat-filter-toolbar .chat-query-field { grid-column: span 2; }
.chat-filter-toolbar .manage-actions { grid-column: span 2; justify-content: flex-end; }
.multi-filter { position: relative; min-width: 0; }
.multi-filter summary { position: relative; min-height: 40px; display: flex; align-items: center; padding: 9px 36px 9px 11px; overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; background: var(--theme-input, #0f1417); border: 1px solid color-mix(in srgb, var(--text) 14%, transparent); border-radius: 7px; cursor: pointer; list-style: none; }
.multi-filter summary::-webkit-details-marker { display: none; }
.multi-filter summary::after { position: absolute; right: 14px; width: 10px; height: 6px; content: ""; background: var(--pink-2); clip-path: polygon(0 0, 50% 100%, 100% 0, 82% 0, 50% 66%, 18% 0); transform: translateY(1px); }
.multi-filter[open] summary { border-color: var(--pink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pink) 16%, transparent); }
.multi-filter[open] summary::after { transform: translateY(-1px) rotate(180deg); }
.multi-filter-options { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; display: grid; gap: 3px; width: max(100%, 260px); max-height: 280px; overflow-y: auto; padding: 6px; background: color-mix(in srgb, var(--panel-2) 98%, transparent); border: 1px solid var(--pink); border-radius: 8px; box-shadow: 0 16px 42px #000a; }
.multi-filter-options label { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px; align-items: center; min-height: 42px; margin: 0; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.multi-filter-options label:hover { background: color-mix(in srgb, var(--pink) 10%, transparent); }
.multi-filter-options input { width: 18px; height: 18px; margin: 0; accent-color: var(--pink); }
.multi-filter-options span { display: grid; min-width: 0; }
.multi-filter-options small { color: var(--muted); font-size: 9px; overflow: hidden; text-overflow: ellipsis; }
.chat-management-fullscreen { padding: 0; }
.chat-management-fullscreen .chat-management-card { width: 100vw; height: 100dvh; max-height: 100dvh; padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); border: 0; border-radius: 0; }
.chat-management-fullscreen .manage-list { min-height: 0; }

/* Fullscreen controls wrap inside safe areas instead of clipping their labels. */
.player-container:fullscreen .fullscreen-actions,
.player-container.fullscreen-active .fullscreen-actions {
  left: max(10px, env(safe-area-inset-left));
  right: max(10px, env(safe-area-inset-right));
  display: flex;
  max-width: none;
  max-height: min(40dvh, 260px);
  flex-wrap: wrap;
  justify-content: flex-end;
  overflow: auto;
  overscroll-behavior: contain;
}
.player-container:fullscreen .fullscreen-actions button,
.player-container.fullscreen-active .fullscreen-actions button { min-height: 36px; padding: 7px 9px; font-size: 10px; line-height: 1.25; white-space: normal; }
.player-container:fullscreen .fullscreen-transform-controls,
.player-container.fullscreen-active .fullscreen-transform-controls { max-width: 100%; flex-wrap: wrap; justify-content: flex-end; }
.player-container:fullscreen .share-status,
.player-container:fullscreen .sync-notice,
.player-container.fullscreen-active .share-status,
.player-container.fullscreen-active .sync-notice { font-size: 10px; }

@media (max-width: 924px) {
  .global-upload-progress { top: max(70px, calc(env(safe-area-inset-top) + 64px)); right: 8px; width: calc(100vw - 16px); }
  .persistent-request-center { left: 8px; bottom: max(8px, env(safe-area-inset-bottom)); width: calc(100vw - 16px); }
  .chat-filter-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chat-filter-toolbar .chat-query-field, .chat-filter-toolbar .manage-actions { grid-column: 1 / -1; }
  .multi-filter-options { position: fixed; z-index: 2147483641; top: 15dvh; left: 5vw; width: 90vw; max-height: 70dvh; }
}

@media (max-width: 540px) {
  .global-upload-heading small { display: none; }
  .global-upload-progress { padding: 10px; }
  .global-upload-progress .progress-meta { align-items: flex-start; }
  .conversion-summary, .profile-processing-summary { grid-template-columns: 1fr; }
  .conversion-admin-controls { grid-template-columns: 1fr; }
  .conversion-admin-controls > small { grid-column: 1; }
  .persistent-request { padding: 12px 42px 12px 12px; }
  .member-profile-stats { grid-template-columns: 1fr; }
  .member-profile-details > div { grid-template-columns: 82px minmax(0, 1fr); }
  .chat-filter-toolbar { grid-template-columns: 1fr; }
  .chat-filter-toolbar .chat-query-field, .chat-filter-toolbar .manage-actions { grid-column: 1; }
  .chat-management-title { align-items: flex-start; padding-right: 38px; }
  .chat-management-title #chatManageFullscreenBtn { min-width: 84px; }
  .player-container:fullscreen .fullscreen-actions,
  .player-container.fullscreen-active .fullscreen-actions { top: max(8px, env(safe-area-inset-top)); gap: 5px; max-height: min(44dvh, 250px); }
  .player-container:fullscreen .fullscreen-transform-controls,
  .player-container.fullscreen-active .fullscreen-transform-controls { order: 3; width: 100%; justify-content: center; }
  .player-container:fullscreen .fullscreen-transform-controls button,
  .player-container.fullscreen-active .fullscreen-transform-controls button { flex: 1 1 48px; }
}

/* Android keeps the same features with denser cards, readable type, and 44px targets. */
body.android-client { font-size: 14px; }
body.android-client .global-upload-progress { top: max(70px, calc(env(safe-area-inset-top) + var(--android-appbar))); }
body.android-client .topbar-actions .button-label { font-size: .76rem; }
body.android-client .status-card { margin-inline: 8px; border-radius: 8px; }
body.android-client .status-card > div { padding: 7px 8px; }
body.android-client .status-card small { font-size: .7rem; }
body.android-client .status-card strong { font-size: .82rem; }
body.android-client .player-container { border-radius: 8px; }
body.android-client .theater-toolbar { gap: 7px; padding-inline: 8px; }
body.android-client .theater-toolbar .toolbar-module { gap: 6px; padding: 36px 7px 7px; border-radius: 8px; }
body.android-client .toolbar-module::before { top: 8px; left: 9px; font-size: .78rem; }
body.android-client .theater-toolbar .compact-button,
body.android-client .theater-toolbar select,
body.android-client .toolbar-check { min-height: 44px; padding: 8px 7px; font-size: .8rem; }
body.android-client .owner-controls { gap: 6px; margin-inline: 8px; padding: 8px; border-radius: 8px; }
body.android-client .owner-controls > *, body.android-client .owner-controls button { min-height: 44px; }
body.android-client .chat-panel { margin-inline: 8px; border-radius: 8px; }
body.android-client .chat-mode { min-height: 44px; font-size: .78rem; }
body.android-client .live-voice-bar button { min-height: 44px; font-size: .76rem; }
body.android-client .chat-form { grid-template-columns: minmax(0, 1fr) repeat(4, 44px); gap: 6px; padding: 8px; }
body.android-client .chat-form > input:not(.visually-hidden),
body.android-client .chat-form > select,
body.android-client .chat-form button { min-height: 44px; }
body.android-client .user-card { padding: 9px; border-radius: 8px; }
body.android-client .user-info small { font-size: .72rem; line-height: 1.4; }
body.android-client .user-actions button { min-height: 44px; padding: 7px 9px; font-size: .75rem; }
body.android-client .persistent-request > div button,
body.android-client .persistent-request-close { min-height: 44px; }
body.android-client .chat-filter-toolbar label,
body.android-client .multi-filter summary { font-size: .8rem; }
body.android-client main { height: auto; min-height: 0; }
body.android-client .main-page, body.android-client .workspace { min-height: calc(100dvh - var(--android-appbar) - env(safe-area-inset-top)); height: auto; }
body.android-client .theater { height: auto; min-height: calc(100dvh - var(--android-appbar) - env(safe-area-inset-top)); grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(260px, 43dvh) auto auto auto; }
body.android-client .room-marquee { grid-row: 1; }
body.android-client .status-card { grid-row: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.android-client .status-card > div { min-width: 0; padding: 9px 10px; }
body.android-client .status-card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.android-client .player-container { grid-row: 3; min-height: 260px; border-radius: 0; }
body.android-client .theater-toolbar { grid-row: 4; display: grid; gap: 10px; padding: 10px; }
body.android-client .theater-toolbar .toolbar-buttons { display: grid; width: 100%; max-width: none; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 0; overflow: visible; }
body.android-client .theater-toolbar .compact-button, body.android-client .theater-toolbar select { width: 100%; min-width: 0; min-height: 48px; padding: 9px 7px; font-size: .75rem; line-height: 1.25; white-space: normal; }
body.android-client .toolbar-select, body.android-client .toolbar-check { grid-column: span 2; min-width: 0; min-height: 48px; justify-content: center; white-space: normal; }
body.android-client .toolbar-select select { width: 100%; }
body.android-client .volume-control { width: 30px; }.android-client .volume-control input { display: none; }.android-client .screen-share-hint { display: none; }
body.android-client .owner-controls { grid-row: 5; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px; overflow: visible; }
body.android-client .owner-controls > strong { grid-column: 1 / -1; }
body.android-client .owner-controls > *, body.android-client .owner-controls button { min-width: 0; min-height: 48px; white-space: normal; }
body.android-client .chat-panel { grid-row: 6; min-height: 0; border-radius: 0; }
body.android-client .theater.mobile-chat-collapsed { grid-template-rows: auto auto minmax(300px, 1fr) auto auto auto; }
body.android-client .chat-panel.mobile-chat-collapsed { min-height: 56px; }
body.android-client .chat-head { min-height: 56px; align-items: center; padding: 7px 10px; }
body.android-client .chat-modes { min-width: 0; overflow-x: auto; }
body.android-client .chat-mode, body.android-client .chat-head button { min-width: max-content; min-height: 48px; padding: 9px 11px; font-size: .75rem; }
body.android-client .live-voice-bar { gap: 8px; padding: 10px; }
body.android-client .live-voice-bar button { min-height: 48px; }
body.android-client .chat-form { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 10px 10px max(10px, env(safe-area-inset-bottom)); }
body.android-client .chat-form > input:not(.visually-hidden), body.android-client .chat-form > select { grid-column: 1 / -1; }
body.android-client .chat-form > select.is-hidden + input { grid-column: 1 / -1; }
body.android-client .chat-form input, body.android-client .chat-form select, body.android-client .chat-form button { min-width: 0; min-height: 48px; }
body.android-client .reaction-bar { min-height: 56px; gap: 8px; overflow-x: auto; }
body.android-client .reaction-bar button { min-width: 48px; min-height: 48px; }
body.android-client .side-panel { top: 0; bottom: 0; width: 100vw; max-width: none; padding-top: max(12px, env(safe-area-inset-top)); border-radius: 0; }
body.android-client .mobile-panel-close { min-height: 52px; font-size: .86rem; }
body.android-client .modal { padding: 0; }
body.android-client .modal-card { width: 100%; max-width: none; max-height: 100dvh; min-height: 100dvh; padding: max(64px, calc(env(safe-area-inset-top) + 54px)) 14px max(18px, env(safe-area-inset-bottom)); border: 0; border-radius: 0; }
body.android-client .modal-close { top: max(10px, env(safe-area-inset-top)); right: 10px; width: 48px; height: 48px; font-size: 1.8rem; }
body.android-client .management-hub-card, body.android-client .account-modal-card { height: 100dvh; padding: 0; }
body.android-client .management-hub-layout, body.android-client .account-layout { height: 100%; grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 0; }
body.android-client .management-nav, body.android-client .account-nav { position: sticky; z-index: 4; top: 0; display: flex; gap: 6px; padding: max(10px, env(safe-area-inset-top)) 58px 10px 10px; overflow-x: auto; background: var(--theme-panel, #12171a); border: 0; border-bottom: 1px solid var(--line); }
body.android-client .management-nav > div { display: none; }
body.android-client .management-nav button, body.android-client .account-nav button { flex: 0 0 auto; min-height: 48px; white-space: nowrap; }
body.android-client .management-content, body.android-client .account-content { padding: 14px 12px max(20px, env(safe-area-inset-bottom)); }
body.android-client .management-auth { position: static; grid-template-columns: 1fr; gap: 8px; }
body.android-client .management-auth button { width: 100%; }
body.android-client .settings-card { padding: 14px 12px; }
body.android-client .settings-card button, body.android-client .setting-actions button, body.android-client .contact-row button, body.android-client .profile-item button { min-height: 48px; }
@media (max-width: 820px) {
  .mail-settings-grid, .mail-toggle-grid, .mail-template-selectors, .mail-template-layout { grid-template-columns: 1fr; }
  .mail-template-preview-wrap { grid-template-rows: auto 360px; }.mail-template-preview-wrap iframe { min-height: 360px; }
  .mail-template-editor textarea { min-height: 300px; }.mail-save-bar { align-items: stretch; flex-direction: column; }.mail-save-bar button { width: 100%; }
}
@media (max-width: 480px) {
  .registration-email-verification, .mail-test-row { grid-template-columns: 1fr; }
  .mail-settings-card { padding: 12px; }.mail-settings-heading { gap: 10px; }.mail-settings-heading .mail-status-badge { margin-top: 2px; }
  .mail-template-preview-wrap { grid-template-rows: auto 300px; }.mail-template-preview-wrap iframe { min-height: 300px; }
}
body.android-client .setting-actions, body.android-client .manage-actions, body.android-client .web-address-bar, body.android-client .notice-options { display: grid; grid-template-columns: 1fr; align-items: stretch; }
body.android-client .setting-actions > *, body.android-client .web-address-bar > * { width: 100%; min-width: 0; }
body.android-client .web-share-actions, body.android-client .web-address-actions, body.android-client .theme-modal-actions, body.android-client .tunnel-address-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
body.android-client .web-share-actions button, body.android-client .web-address-actions button, body.android-client .theme-modal-actions button, body.android-client .tunnel-address-actions button { width: 100%; min-width: 0; min-height: 48px; }
body.android-client .web-share-card { grid-template-rows: auto auto auto auto auto minmax(260px, 1fr); }
body.android-client .web-share-heading { display: grid; align-items: stretch; }
body.android-client .web-share-heading .setting-actions { display: grid; }
body.android-client .player-container.fullscreen-active .danmaku-container,
body.android-client .player-container.fullscreen-active .reaction-layer { display: block !important; position: fixed; inset: 0; z-index: 2147483643; pointer-events: none; }
body.android-client .player-container.fullscreen-active .fullscreen-overlay,
body.android-client .player-container.fullscreen-active .fullscreen-show-button { z-index: 2147483647; }
body.android-client .player-container:fullscreen:not(.controls-visible) .player-progress-bar,
body.android-client .player-container.fullscreen-active:not(.controls-visible) .player-progress-bar {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
}
.backup-progress { display: grid; gap: 7px; margin-top: 10px; padding: 10px; background: color-mix(in srgb, var(--theme-accent, var(--pink)) 7%, transparent); border: 1px solid color-mix(in srgb, var(--theme-accent, var(--pink)) 32%, var(--line)); border-radius: 8px; }
.backup-progress > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.backup-progress output { color: var(--theme-accent, var(--pink-2)); font-variant-numeric: tabular-nums; }
.backup-progress progress { width: 100%; height: 9px; accent-color: var(--theme-accent, var(--pink)); }
.backup-progress small { color: var(--muted); overflow-wrap: anywhere; }
.toast.has-snooze.with-close { grid-template-columns: minmax(0, 1fr) auto auto; }
.toast.has-snooze.with-action { grid-template-columns: minmax(0, 1fr) repeat(3, auto); }
.toast-snooze { width: 28px; height: 28px; padding: 0 !important; color: var(--muted) !important; background: transparent !important; border: 0 !important; font-size: 15px; }
.toast-snooze:hover, .toast-snooze:focus-visible { color: var(--text) !important; background: #ffffff12 !important; }
.marquee-snooze-button { position: sticky; z-index: 2; right: 4px; flex: 0 0 28px; width: 28px; height: 28px; margin-left: 8px; padding: 0; color: currentColor; background: color-mix(in srgb, var(--marquee-color) 12%, #090c0e 88%); border: 1px solid currentColor; border-radius: 6px; line-height: 1; }
.notice-preference-hidden { display: none !important; }
.notice-snooze-card { width: min(520px, 100%); }
.notice-snooze-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.notice-snooze-presets button { min-height: 40px; }
.notice-snooze-custom { display: grid; grid-template-columns: minmax(130px, .65fr) minmax(220px, 1fr); gap: 9px; align-items: end; margin-top: 10px; }
.notice-snooze-custom label { margin: 0; }
.notice-suppression-list { display: grid; gap: 7px; margin: 9px 0; }
.notice-suppression-list > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 9px; background: #ffffff07; border: 1px solid var(--line); border-radius: 7px; }
.notice-suppression-list span { min-width: 0; display: grid; gap: 2px; }
.notice-suppression-list strong, .notice-suppression-list small { overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .notice-snooze-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .notice-snooze-custom { grid-template-columns: 1fr; }
  .toast.has-snooze.with-action { grid-template-columns: minmax(0, 1fr) repeat(2, auto); }
  .toast.has-snooze.with-action > span { grid-column: 1 / -1; }
}
body.android-client .toast-region { left: 10px; right: 10px; bottom: calc(64px + env(safe-area-inset-bottom)); }
body.android-client .toast { width: 100%; max-width: none; }

@media (orientation: landscape) and (max-height: 560px) and (max-width: 1000px) {
  body.android-client { --android-appbar: 56px; }
  body.android-client .topbar { min-height: calc(var(--android-appbar) + env(safe-area-inset-top)); padding-block: max(4px, env(safe-area-inset-top)) 4px; }
  body.android-client .topbar-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.android-client .status-badge, body.android-client .account-button, body.android-client .account-dropdown { grid-column: span 2; }
  body.android-client .theater { grid-template-columns: minmax(0, 1fr) minmax(280px, 39vw); grid-template-rows: auto minmax(220px, 1fr) auto auto; min-height: calc(100dvh - var(--android-appbar) - env(safe-area-inset-top)); }
  body.android-client .room-marquee { grid-row: 1; grid-column: 1 / -1; }
  body.android-client .status-card { display: none; }
  body.android-client .player-container { grid-row: 2; grid-column: 1; min-height: 220px; }
  body.android-client .theater-toolbar { grid-row: 3; grid-column: 1; }
  body.android-client .owner-controls { grid-row: 4; grid-column: 1; }
  body.android-client .chat-panel, body.android-client .chat-panel.mobile-chat-collapsed { grid-row: 2 / 5; grid-column: 2; min-height: 0; }
  body.android-client .theater.mobile-chat-collapsed { grid-template-columns: minmax(0, 1fr) 96px; grid-template-rows: auto minmax(220px, 1fr) auto auto; }
  body.android-client .theater-toolbar .toolbar-buttons { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  body.android-client .side-panel { width: min(58vw, 520px); }
}

/* Android room layout: keep the player primary and expose the rest as clear modules. */
body.android-client .theater {
  gap: 8px;
  padding: 8px 0 max(12px, env(safe-area-inset-bottom));
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
  background: var(--theme-stage, #090c0e);
  /* The room is part of the document flow on Android.  A nested scroll
     container makes scrollIntoView() move the module bar off-screen and
     leaves fixed fullscreen controls clipped behind the compositor. */
  overflow: visible;
  align-content: start;
  grid-template-rows: auto auto auto minmax(0, auto) auto auto auto;
}
body.android-client .theater.mobile-chat-collapsed {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto minmax(0, auto) auto auto auto;
}
body.android-client .room-marquee { grid-row: 1; margin: 0 10px; border-radius: 8px; }
body.android-client .mobile-module-nav {
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 0 10px;
  padding: 5px;
  background: var(--theme-toolbar, #151c20);
  border: 1px solid var(--line);
  border-radius: 10px;
  align-self: start;
  grid-auto-rows: max-content;
}
body.android-client .mobile-module-button {
  display: grid;
  min-width: 0;
  min-height: 48px;
  place-items: center;
  gap: 2px;
  padding: 6px 4px;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 7px;
  font-size: 1.05rem;
  align-self: start;
  height: 48px;
  box-sizing: border-box;
}
body.android-client .mobile-module-button small { font-size: .68rem; line-height: 1; }
body.android-client .mobile-module-button.active,
body.android-client .mobile-module-button:focus-visible {
  color: var(--theme-accent-ink, #071715);
  background: var(--pink);
  outline: none;
}
body.android-client .status-card {
  grid-row: 3;
  margin: 0 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
}
body.android-client .status-card > div { padding: 8px 9px; background: var(--theme-toolbar, #151c20); }
body.android-client .status-card > div > span { font-size: 15px; }
body.android-client .status-card p { gap: 2px; }
body.android-client .status-card small { font-size: .64rem; }
body.android-client .status-card strong {
  display: -webkit-box;
  max-height: 2.5em;
  overflow: hidden;
  color: var(--text);
  font-size: .74rem;
  line-height: 1.25;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
body.android-client .player-container {
  grid-row: 4;
  width: 100%;
  min-height: 0;
  height: min(56vw, 360px);
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #050607;
}
body.android-client .theater-toolbar {
  grid-row: 5;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  justify-content: stretch;
  gap: 8px;
  padding: 0 10px;
  background: transparent;
  border: 0;
}
body.android-client .theater-toolbar .toolbar-module {
  position: relative;
  display: grid;
  align-items: stretch;
  gap: 7px;
  min-width: 0;
  padding: 42px 8px 8px;
  overflow: visible;
  background: var(--theme-toolbar, #151c20);
  border: 1px solid var(--line);
  border-radius: 10px;
}
body.android-client .toolbar-module::before {
  position: absolute;
  top: 9px;
  left: 10px;
  color: var(--theme-accent-2, var(--pink-2));
  content: attr(data-module);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .02em;
}
body.android-client .playback-module { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.android-client .playback-module #clearPlaybackBtn,
body.android-client .playback-module .toolbar-select { grid-column: 1 / -1; }
body.android-client .playback-module .toolbar-select {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-height: 48px;
  padding-inline: 10px;
}
body.android-client .room-tools-module { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.android-client .room-tools-module .toolbar-check,
body.android-client .room-tools-module #screenShareBtn { grid-column: 1 / -1; }
body.android-client .room-tools-module .screen-share-hint { display: none; }
/* Keep Android controls compact and predictable: the native video controls
   own play/pause, while room actions use two-column rows on touch screens. */
body.android-client .playback-module #playPauseBtn,
body.android-client .live-voice-bar,
body.android-client #liveVoiceFloating { display: none !important; }
body.android-client .playback-module { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.android-client .playback-module #clearPlaybackBtn,
body.android-client .playback-module #customJumpBtn { grid-column: 1 / -1; }
body.android-client .playback-module #backBtn,
body.android-client .playback-module #forwardBtn,
body.android-client .playback-module .toolbar-select { grid-column: auto; }
body.android-client .room-tools-module #screenShareBtn,
body.android-client .room-tools-module #audioSourceBtn,
body.android-client .room-tools-module #fullscreenBtn,
body.android-client .room-tools-module .fullscreen-auto-lock-toolbar { grid-column: auto; }
body.android-client .room-tools-module .toolbar-check:first-of-type { grid-column: 1 / -1; }
body.android-client .theater-toolbar .compact-button,
body.android-client .theater-toolbar select,
body.android-client .toolbar-check {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 9px 8px;
  font-size: .76rem;
  line-height: 1.25;
  white-space: normal;
}
body.android-client .theater-toolbar .compact-button { overflow-wrap: anywhere; }
body.android-client .toolbar-check { display: flex; align-items: center; justify-content: flex-start; gap: 8px; }
body.android-client .toolbar-check input { flex: 0 0 auto; width: 22px; height: 22px; }
body.android-client .owner-controls {
  grid-row: 6;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 0 10px;
  padding: 10px;
  overflow: visible;
  background: color-mix(in srgb, var(--green) 8%, var(--theme-toolbar, #151c20));
  border: 1px solid color-mix(in srgb, var(--green) 28%, var(--line));
  border-radius: 10px;
}

/* Android clients do not expose live voice controls; hide the entire dock so
   its heading, collapse affordance and floating surface never reserve space. */
body.android-client .live-voice-bar,
body.android-client .live-voice-floating,
body.android-client #liveVoiceBar,
body.android-client #liveVoiceFloating { display: none !important; }

/* Keep the most important touch actions in a predictable first row. */
body.android-client .room-tools-module #fullscreenBtn { grid-column: 1; grid-row: 1; }
body.android-client .room-tools-module .fullscreen-auto-lock-toolbar { grid-column: 2; grid-row: 1; }
body.android-client .room-tools-module #screenShareBtn { grid-column: 1; grid-row: 2; }
body.android-client .room-tools-module #audioSourceBtn { grid-column: 2; grid-row: 2; }
body.android-client .room-tools-module #floatingPlayerBtn { grid-column: 1; grid-row: 3; }
body.android-client .owner-controls > strong { grid-column: 1 / -1; font-size: .78rem; }
body.android-client .owner-controls > *, body.android-client .owner-controls button { min-width: 0; min-height: 48px; white-space: normal; }
body.android-client .owner-controls label { justify-content: flex-start; gap: 8px; padding: 8px; background: #ffffff08; border-radius: 7px; }
body.android-client .owner-controls label input { flex: 0 0 auto; width: 22px; height: 22px; }
body.android-client .chat-panel {
  grid-row: 7;
  min-height: 0;
  margin: 0 10px;
  overflow: hidden;
  background: var(--theme-toolbar, #151c20);
  border: 1px solid var(--line);
  border-radius: 10px;
}
body.android-client .chat-panel.mobile-chat-collapsed { min-height: 58px; }
/* Expanded mobile chat must participate in normal document flow.  The old
   min-height/overflow combination let the emoji grid paint over the controls
   below it and clipped the last rows inside Android WebView. */
body.android-client .chat-panel:not(.mobile-chat-collapsed) {
  min-height: max-content;
  height: auto;
  overflow: visible;
  align-self: start;
  grid-template-rows: auto auto auto auto minmax(160px, 42dvh) auto auto auto;
}
body.android-client .chat-panel:not(.mobile-chat-collapsed) .chat-history {
  min-height: 160px;
  height: clamp(160px, 42dvh, 420px);
  max-height: 420px;
  overflow-y: auto;
}
body.android-client .chat-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  min-height: 58px;
  padding: 7px 8px;
}
body.android-client .chat-modes { min-width: 0; overflow-x: auto; scrollbar-width: none; }
body.android-client .chat-modes::-webkit-scrollbar { display: none; }
body.android-client .chat-mode { min-width: max-content; min-height: 44px; padding: 8px 10px; font-size: .72rem; }
body.android-client .chat-head-actions { min-width: 0; display: grid; }
body.android-client .chat-head-actions #loadHistoryBtn { display: none; }
body.android-client .chat-head-actions #chatToggleBtn { min-width: 74px; min-height: 44px; padding: 7px 9px; font-size: .7rem; }
body.android-client .live-voice-bar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding: 9px; }
body.android-client .live-voice-bar > div { grid-column: 1 / -1; margin: 0; }
body.android-client .live-voice-bar button { min-width: 0; min-height: 46px; padding: 8px 6px; font-size: .7rem; }
body.android-client .chat-form { grid-template-columns: minmax(0, 1fr) repeat(4, 48px); gap: 7px; padding: 9px; }
body.android-client .chat-form > input:not(.visually-hidden),
body.android-client .chat-form > select { grid-column: 1 / -1; min-height: 48px; }
body.android-client .chat-form > select.is-hidden + input { grid-column: 1 / -1; }
body.android-client .chat-form button { min-width: 0; min-height: 48px; padding-inline: 5px; }
body.android-client .reaction-bar { min-height: 54px; padding: 4px 9px 8px; gap: 7px; overflow-x: auto; }
body.android-client .reaction-bar button { min-width: 44px; min-height: 44px; }
body.android-client .emoji-toolbar { min-width: 0; align-items: center; padding-inline: 9px; }
body.android-client .emoji-toolbar > label { min-width: 0; flex: 0 0 auto; }
body.android-client .emoji-toolbar > .emoji-bar {
  flex: 1 1 100%;
  min-width: 0;
  height: min(44dvh, 340px);
  max-height: min(44dvh, 340px);
  box-sizing: border-box;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding-bottom: 18px;
}
body.android-client .side-panel { top: 0; bottom: 0; width: 100vw; max-width: none; padding-top: max(12px, env(safe-area-inset-top)); border-radius: 0; }

@media (orientation: landscape) and (max-height: 560px) and (max-width: 1000px) {
  body.android-client .theater {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 39vw);
    grid-template-areas: "marquee marquee" "mobile-nav ." "player chat" "toolbar chat" "owner chat";
    grid-template-rows: auto auto minmax(190px, 1fr) auto auto;
    min-height: calc(100dvh - var(--android-appbar) - env(safe-area-inset-top));
  }
  body.android-client .theater.mobile-chat-collapsed {
    grid-template-columns: minmax(0, 1fr) 96px;
    grid-template-areas: "marquee marquee" "mobile-nav ." "player chat" "toolbar chat" "owner chat";
    grid-template-rows: auto auto minmax(190px, 1fr) auto auto;
  }
  body.android-client .room-marquee { grid-row: 1; grid-column: 1 / -1; }
  body.android-client .mobile-module-nav { grid-row: 2; grid-column: 1; margin-inline: 8px; }
  body.android-client .status-card { display: none; }
  body.android-client .player-container { grid-row: 3; grid-column: 1; width: 100%; height: auto; min-height: 190px; }
  body.android-client .theater-toolbar { grid-row: 4; grid-column: 1; }
  body.android-client .owner-controls { grid-row: 5; grid-column: 1; }
  body.android-client .chat-panel, body.android-client .chat-panel.mobile-chat-collapsed { grid-row: 3 / 6; grid-column: 2; margin: 0 8px 0 0; min-height: 0; }
  body.android-client .theater-toolbar .toolbar-module { padding-top: 36px; }
}

/* Theme-consistent select controls use a body-level menu so modals cannot clip them. */
.select-shell { position: relative; display: block; min-width: 0; width: 100%; }
.select-shell > select[data-enhanced-select="1"] {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}
.select-trigger {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 40px;
  padding: 9px 38px 9px 11px;
  overflow: hidden;
  color: var(--text);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--theme-input, #0f1417);
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  border-radius: 7px;
}
.select-trigger::after {
  position: absolute;
  top: 50%;
  right: 14px;
  width: 8px;
  height: 8px;
  content: "";
  border-right: 2px solid var(--pink-2);
  border-bottom: 2px solid var(--pink-2);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .16s ease;
}
.select-trigger:hover,
.select-trigger:focus-visible,
.select-shell.is-open .select-trigger {
  background: color-mix(in srgb, var(--pink) 7%, var(--theme-input, #0f1417));
  border-color: var(--pink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pink) 16%, transparent);
  outline: none;
}
.select-shell.is-open .select-trigger::after { transform: translateY(-25%) rotate(225deg); }
.select-trigger:disabled { opacity: .48; cursor: not-allowed; }
.enhanced-select-menu {
  position: fixed;
  z-index: 2147483640;
  display: grid;
  gap: 3px;
  overflow-y: auto;
  padding: 6px;
  color: var(--text);
  background: color-mix(in srgb, var(--theme-panel-2, #182126) 96%, transparent);
  border: 1px solid var(--pink);
  border-radius: 8px;
  box-shadow: 0 18px 55px #000b, 0 0 0 1px #ffffff0b inset;
  backdrop-filter: blur(18px);
  overscroll-behavior: contain;
}
.enhanced-select-option {
  min-height: 40px;
  padding: 9px 10px;
  overflow: hidden;
  color: var(--text);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: transparent;
  border: 0;
  border-radius: 6px;
}
.enhanced-select-option:hover,
.enhanced-select-option:focus-visible,
.enhanced-select-option[aria-selected="true"] {
  color: var(--pink-2);
  background: color-mix(in srgb, var(--pink) 14%, transparent);
  outline: none;
}
.enhanced-select-option:disabled { opacity: .42; }
body.android-client .select-trigger,
body.android-client .enhanced-select-option { min-height: 48px; }

.topbar { overflow: visible; }
.topbar-actions { overflow-x: auto; overflow-y: visible; scrollbar-width: thin; scrollbar-color: var(--theme-accent, #c7a763) transparent; }
.topbar-actions::-webkit-scrollbar { height: 5px; }
.topbar-actions::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--theme-accent, #c7a763) 68%, transparent); border-radius: 8px; }
.topbar-actions > * { flex: 0 0 auto; }
.operation-history-toolbar { grid-template-columns: minmax(180px, 1fr) minmax(130px, .45fr) auto auto; }
.history-select { flex: 0 0 auto; align-self: center; }
.level-rule-help { width: 20px; min-width: 20px; height: 20px; min-height: 20px; padding: 0; margin-left: 3px; border-radius: 50%; font-size: 12px; line-height: 18px; vertical-align: middle; color: var(--theme-accent-ink, #211704); background: var(--theme-accent, #c7a763); border: 0; }
.room-media-preview-card { width: min(1040px, 94vw); }
.room-media-preview-layout { display: grid; grid-template-columns: minmax(250px, .42fr) minmax(0, 1fr); gap: 14px; min-height: 420px; }
.room-media-preview-layout video { width: 100%; min-height: 280px; max-height: 66vh; align-self: start; background: #000; border: 1px solid var(--line); border-radius: var(--theme-radius, 6px); }
.audio-source-card { width: min(720px, 94vw); }
.audio-source-grid { display: grid; grid-template-columns: minmax(190px, .8fr) minmax(240px, 1.2fr); gap: 12px; align-items: end; }
.audio-source-grid label { display: grid; gap: 7px; }
.audio-source-grid output { justify-self: end; color: var(--theme-accent, #c7a763); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .operation-history-toolbar, .room-media-preview-layout, .audio-source-grid { grid-template-columns: 1fr; }
  .room-media-preview-layout { min-height: 0; }
}
.account-dropdown,
body.android-client .account-dropdown {
  position: fixed;
  z-index: 2147483639;
  top: 0;
  left: 0;
  right: auto;
  width: 210px;
  padding: 7px;
  background: color-mix(in srgb, var(--theme-panel-2, #20282d) 96%, transparent);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 18px 48px #0009;
  backdrop-filter: blur(18px);
}
body.android-client .account-dropdown button { min-height: 48px; }

/* The account actions live inside the mobile sheet so sign-out remains reachable
   without shrinking the watch surface. Visual density is reduced while Android
   touch targets keep their 48px interaction height. */
body.android-client .topbar-actions > .account-dropdown {
  position: static;
  z-index: auto;
  inset: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-column: 1 / -1;
  gap: 4px;
  width: 100%;
  padding: 6px;
  box-shadow: none;
  backdrop-filter: none;
}
body.android-client .topbar-actions > .account-dropdown button {
  min-width: 0;
  min-height: 48px;
  padding: 7px 8px;
  font-size: .72rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
body.android-client .topbar-actions > .account-dropdown #logoutKeepCredentialsBtn,
body.android-client .topbar-actions > .account-dropdown #logoutBtn { order: -2; }

@media (min-width: 390px) {
  body.android-client .topbar-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 8px;
    max-height: calc(100dvh - var(--android-appbar) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px);
  }
  body.android-client .topbar-scroll-actions,
  body.android-client .topbar-fixed-actions { display: contents; }
}

@media (max-width: 540px) {
  body:not(.android-client) .topbar-actions > .account-dropdown {
    position: static;
    z-index: auto;
    inset: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-column: 1 / -1;
    gap: 4px;
    width: 100%;
    padding: 6px;
    box-shadow: none;
    backdrop-filter: none;
  }
  body:not(.android-client) .topbar-actions > .account-dropdown button {
    min-width: 0;
    min-height: 44px;
    padding: 7px 8px;
    font-size: .72rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }
  body:not(.android-client) .topbar-actions > .account-dropdown #logoutKeepCredentialsBtn,
  body:not(.android-client) .topbar-actions > .account-dropdown #logoutBtn { order: -2; }
}

@media (min-width: 390px) and (max-width: 540px) {
  body:not(.android-client) .topbar-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 8px;
    max-height: calc(100dvh - var(--mobile-web-appbar) - 24px);
  }
}

/* Final control cascade: legacy responsive rules above target the old
   single-row toolbar, so the split strip is finalized at the end. */
button { appearance: none; -webkit-appearance: none; color: var(--text); background: var(--theme-button, #ffffff0c); border: 1px solid var(--line); border-radius: 7px; }
input[type="checkbox"] { position: relative; display: inline-grid; place-items: center; width: 18px; min-width: 18px; max-width: 18px; height: 18px; min-height: 18px; margin: 0; padding: 0; flex: 0 0 18px; }
input[type="checkbox"]:checked::after { margin: 0; transform: translateY(-1px) rotate(-45deg); }
.profile-management-toolbar input[type="checkbox"], .video-management-toolbar input[type="checkbox"], .media-category-toolbar input[type="checkbox"] { width: 18px; min-width: 18px; max-width: 18px; flex-basis: 18px; }
.topbar-actions { display: flex; flex: 1 1 auto; min-width: 0; align-items: center; gap: 8px; overflow: visible; }
.topbar-scroll-actions { display: flex; flex: 1 1 auto; min-width: 0; align-items: center; gap: 8px; overflow: visible; scrollbar-width: thin; scrollbar-color: var(--theme-accent, #c7a763) transparent; }
.topbar-scroll-actions::-webkit-scrollbar { height: 7px; }
.topbar-scroll-actions::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--theme-accent, #c7a763) 70%, transparent); border-radius: 8px; }
.topbar-fixed-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; min-width: max-content; }
.room-header span:first-child { min-width: 0; flex: 1.35 1 0; }
.room-header span:first-child strong { max-width: none; }
.account-admin-list .admin-account-detail > header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.account-admin-list .admin-account-detail > header > strong { min-width: 0; justify-self: start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-admin-list .admin-account-detail > header > small { justify-self: end; white-space: nowrap; }
.member-profile-admin-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0; padding: 9px 11px; color: var(--muted); background: var(--theme-item, #ffffff07); border: 1px solid var(--line); border-radius: 7px; }
.member-profile-admin-actions span { min-width: 0; overflow-wrap: anywhere; }
.member-profile-admin-actions button, .profile-management-toolbar button, .video-management-row .actions button, .profile-room-actions button, .profile-file-item > button, .profile-item > button { min-height: 34px; padding: 7px 10px; color: var(--text); background: var(--theme-button, #ffffff0c); border: 1px solid var(--line); border-radius: 7px; line-height: 1.25; }
.member-profile-admin-actions button:hover, .profile-management-toolbar button:hover, .video-management-row .actions button:hover, .profile-room-actions button:hover, .profile-file-item > button:hover, .profile-item > button:hover { color: var(--pink-2); border-color: color-mix(in srgb, var(--pink) 58%, var(--line)); background: color-mix(in srgb, var(--pink) 10%, var(--theme-button, #ffffff0c)); }
.profile-management-toolbar .danger-button, .video-management-row .actions .danger-text-button, .profile-item .danger-text-button { color: var(--red); }
#memberProfileModal { z-index: 240; }
@media (min-width: 1121px) { .room-header:not(.is-hidden) { display: grid; grid-template-columns: minmax(0, 1.35fr) repeat(4, minmax(0, 1fr)); flex: 0 1 min(540px, 42vw); min-width: 220px; max-width: 540px; overflow: visible; } }
@media (min-width: 1451px) {
  .topbar-scroll-actions .header-feature-button, .topbar-fixed-actions .header-feature-button { width: auto; min-width: max-content; justify-content: flex-start; padding-inline: 8px; }
  .topbar-scroll-actions .header-feature-button .button-label, .topbar-fixed-actions .header-feature-button .button-label { display: inline !important; }
}
@media (max-width: 924px) { .topbar-scroll-actions, .topbar-fixed-actions { display: contents; } }
@media (max-width: 720px) {
  .tunnel-primary-actions { grid-template-columns: 1fr; }
  .account-admin-list .admin-account-detail > header { grid-template-columns: auto minmax(0, 1fr); }
  .account-admin-list .admin-account-detail > header > small { grid-column: 2; justify-self: start; }
  .member-profile-admin-actions { align-items: stretch; flex-direction: column; }
  .member-profile-hero { grid-template-columns: 56px minmax(0, 1fr); }
  .member-profile-actions { grid-column: 1 / -1; justify-content: flex-start; }
}
.primary-button, .send-button { color: var(--theme-accent-ink, #08201c); background: var(--pink); border-color: var(--pink); }
.secondary-button, .compact-button, .icon-button, .warning-button { color: var(--text); background: var(--theme-button, #ffffff0c); border-color: var(--line); }
.danger-button, .danger-text-button { color: var(--red); background: color-mix(in srgb, var(--red) 14%, var(--theme-button, #ffffff0c)); border-color: color-mix(in srgb, var(--red) 40%, var(--line)); }
.link-button, .ghost-button, .text-button, .account-dropdown button, .panel-tabs button, .queue-list button, .file-actions button, .user-actions button, .chat-mode, .reaction-bar button, .notice-close-button, .modal-close { color: var(--muted); background: transparent; border-color: transparent; }
.link-button:hover, .ghost-button:hover, .text-button:hover, .account-dropdown button:hover, .panel-tabs button:hover, .queue-list button:hover, .file-actions button:hover, .user-actions button:hover, .chat-mode:hover, .reaction-bar button:hover { color: var(--pink-2); background: color-mix(in srgb, var(--pink) 9%, transparent); }
@media (max-width: 540px) { body:not(.android-client) .topbar-actions, body.android-client .topbar-actions { overflow-x: hidden; } }

/* Phone actions stay as one readable accordion instead of splitting an open
   details panel across unrelated grid columns. */
@media (max-width: 540px) {
  body:not(.android-client) .topbar-actions,
  body.android-client .topbar-actions { grid-template-columns: minmax(0, 1fr); align-content: start; }
  body:not(.android-client) .topbar-scroll-actions,
  body:not(.android-client) .topbar-fixed-actions,
  body.android-client .topbar-scroll-actions,
  body.android-client .topbar-fixed-actions { display: grid; grid-template-columns: minmax(0, 1fr); grid-column: 1 / -1; gap: 8px; width: 100%; }
  body:not(.android-client) .topbar-actions .topbar-menu,
  body.android-client .topbar-actions .topbar-menu { display: block; grid-column: 1 / -1; width: 100%; }
  body:not(.android-client) .topbar-actions .topbar-menu-trigger,
  body.android-client .topbar-actions .topbar-menu-trigger { width: 100%; min-height: 48px; }
  body:not(.android-client) .topbar-actions .topbar-menu-panel,
  body.android-client .topbar-actions .topbar-menu-panel { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; max-height: min(52dvh, 440px); overflow-y: auto; }
  body:not(.android-client) .topbar-actions .topbar-menu-panel > .topbar-context-action,
  body.android-client .topbar-actions .topbar-menu-panel > .topbar-context-action { margin-left: 0; }
  body:not(.android-client) .topbar-actions .topbar-menu:not([open]) > .topbar-menu-panel,
  body.android-client .topbar-actions .topbar-menu:not([open]) > .topbar-menu-panel { display: none; }
  body:not(.android-client) .topbar-actions .header-feature-button .button-label,
  body:not(.android-client) .topbar-actions .share-link-button .button-label,
  body.android-client .topbar-actions .header-feature-button .button-label,
  body.android-client .topbar-actions .share-link-button .button-label { display: inline !important; }
  body:not(.android-client) .topbar-actions > :is(.share-link-button, .status-badge, .account-button),
  body.android-client .topbar-actions > :is(.share-link-button, .status-badge, .account-button) { grid-column: 1 / -1; width: 100%; }
  body:not(.android-client) .topbar-actions > .account-dropdown,
  body.android-client .topbar-actions > .account-dropdown { grid-template-columns: minmax(0, 1fr); }
}

.login-host-shortcuts { width: 100%; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 8px 0 0; padding: 7px; border: 1px solid color-mix(in srgb, var(--theme-accent, #c7a763) 36%, var(--line)); border-radius: 7px; background: color-mix(in srgb, var(--theme-accent, #c7a763) 5%, transparent); }
.login-host-shortcuts button { width: 100%; min-width: 0; height: 30px; min-height: 30px; margin: 0; padding: 3px 8px; font-size: 11px; line-height: 1.15; white-space: normal; overflow-wrap: anywhere; }
.login-host-shortcuts button:first-child { grid-column: 1 / -1; }
.login-host-shortcuts button.primary-button { width: 100%; }
body.android-client .login-host-shortcuts { display: none !important; }
@media (max-width: 540px) { .login-host-shortcuts { grid-template-columns: 1fr; } .login-host-shortcuts button:first-child { grid-column: auto; } }
body.middle-scroll-dragging, body.middle-scroll-dragging * { cursor: grabbing !important; user-select: none !important; }
.onboarding-settings-link { float: right; margin-top: -2px; }
.onboarding-guide-card { width: min(92vw, 680px); }
.onboarding-guide-progress { display: flex; align-items: center; gap: 8px; margin: 18px 0; }
.onboarding-guide-progress span { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); font-size: 12px; }
.onboarding-guide-progress span.active { border-color: var(--theme-accent, var(--pink)); background: var(--theme-accent, var(--pink)); color: var(--ink, #111); box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-accent, var(--pink)) 18%, transparent); }
.onboarding-guide-progress span.done { border-color: var(--theme-accent, var(--pink)); color: var(--theme-accent, var(--pink)); }
.onboarding-guide-step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; min-height: 150px; padding: 20px; border: 1px solid color-mix(in srgb, var(--theme-accent, var(--pink)) 32%, var(--line)); border-radius: 8px; background: color-mix(in srgb, var(--theme-accent, var(--pink)) 6%, var(--panel)); }
.onboarding-guide-step-number { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--theme-accent, var(--pink)); color: var(--ink, #111); font-size: 20px; font-weight: 800; }
.onboarding-guide-step h3 { margin: 0 0 8px; font-size: 20px; }
.onboarding-guide-step p { margin: 0; line-height: 1.8; color: var(--text-muted, #b9c2c9); }
.onboarding-guide-actions { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 8px; margin-top: 18px; }
@media (max-width: 540px) { .onboarding-guide-actions { grid-template-columns: 1fr 1fr; } .onboarding-guide-actions span { display: none; } .onboarding-guide-actions button:first-child { grid-column: 1 / -1; } .onboarding-guide-progress { overflow-x: auto; } }
@media (prefers-reduced-motion: reduce) { .onboarding-guide-progress span.active { box-shadow: none; } }
#defaultAdminLoginHint { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
#defaultAdminLoginHint .text-button { width: auto; min-height: 34px; margin-left: auto; padding: 5px 9px; color: var(--pink-2); border: 1px solid color-mix(in srgb, var(--theme-accent, var(--pink)) 38%, var(--line)); }
.login-more-actions, .external-login-providers { margin-top: 8px; }
.login-more-actions > summary, .external-login-providers > summary { min-height: 40px; display: grid; place-items: center; padding: 8px 10px; color: var(--muted); border: 1px solid var(--line); border-radius: 7px; cursor: pointer; list-style-position: inside; }
.login-more-actions[open] > summary, .external-login-providers[open] > summary { color: var(--text); border-color: color-mix(in srgb, var(--theme-accent, var(--pink)) 46%, var(--line)); }
.external-login-providers { display: block; }.external-login-providers .external-login-grid { margin-top: 9px; }
.lan-scan-toolbar { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.lan-scan-toolbar .check-line { margin: 0; }
.server-log-toolbar { grid-template-columns: minmax(170px, 1fr) 120px 120px minmax(180px, 1fr); }

@media (max-width: 520px) {
  .lan-room-row { grid-template-columns: minmax(0, 1fr); }
  .lan-room-row.is-selectable { grid-template-columns: auto minmax(0, 1fr); }
  .lan-room-row > button { grid-column: 1 / -1; width: 100%; }
  .management-editor-modal-card { padding: 20px 14px; }
}

@media (max-width: 760px), (max-width: 924px) and (max-height: 520px) {
  .login-page { overflow: visible; padding: max(10px, env(safe-area-inset-top)) 9px max(20px, env(safe-area-inset-bottom)); }
  .login-visual { display: none !important; }
  .auth-card { max-height: none; overflow: visible; margin: 8px auto; padding: 20px 15px 18px; }
  .auth-card h1 { font-size: 25px; }
  .auth-card form { margin-top: 12px; }
  .login-host-shortcuts { grid-template-columns: 1fr; }
  .login-host-shortcuts > * { grid-column: 1 !important; }
  .login-entry-actions, .login-download-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .server-log-toolbar { grid-template-columns: 1fr; }
}

@media (pointer: coarse) {
  .login-page button, .login-page summary, .login-page .check-line { min-height: 44px; }
  .login-status-banner button, .online-room-refresh-button { min-width: 44px; width: 44px; min-height: 44px; height: 44px; }
}
@media (min-width: 541px) and (max-width: 924px) {
  .topbar-actions { max-width: calc(100vw - 95px); overflow-x: auto; overflow-y: hidden; }
}

/* Expanded chat trades the upper control stack for a readable conversation area. */
.theater.chat-expanded {
  grid-template-areas: "marquee" "mobile-nav" "player" "chat";
  grid-template-rows: auto auto minmax(220px, .72fr) minmax(300px, 1.28fr);
}
.theater.chat-expanded > .status-card,
.theater.chat-expanded > .theater-toolbar,
.theater.chat-expanded > .owner-controls { display: none !important; }
.theater.chat-expanded .chat-panel { min-height: 300px; }
.theater.chat-expanded .chat-history { min-height: 150px; }
.theater.chat-expanded .emoji-toolbar:not(:has(.emoji-bar.is-hidden)) { min-height: 92px; }

/* The expanded conversation keeps a two-column stage in short landscape
   windows. Without this late override the compact mobile rule collapses the
   player and chat into one column and the chat panel covers the video edge. */
@media (orientation: landscape) and (max-height: 560px) and (max-width: 1000px) {
  .theater.chat-expanded {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 38vw);
    grid-template-areas: "marquee marquee" "mobile-nav ." "player chat";
    grid-template-rows: auto auto minmax(190px, 1fr);
  }
  .theater.chat-expanded .player-container { grid-area: player; min-width: 0; min-height: 190px; }
  .theater.chat-expanded .chat-panel { grid-area: chat; min-width: 0; min-height: 0; margin: 0 8px 0 20px; }
}

@media (max-width: 720px) {
  .theater.chat-expanded {
    grid-template-areas: "marquee" "mobile-nav" "player" "chat";
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(210px, 42dvh) minmax(320px, 1fr);
  }
  .theater.chat-expanded .chat-panel { min-height: 320px; margin: 0; }
  .theater.chat-expanded .chat-history { min-height: 180px; }
  .switch-room-heading { align-items: stretch; flex-direction: column; padding-right: 38px; }
  .switch-room-heading button { width: 100%; min-height: 44px; }
  .switch-owned-room { grid-template-columns: auto minmax(0, 1fr); }
  .switch-owned-room button { grid-column: 1 / -1; width: 100%; min-height: 44px; }
  .room-directory-toolbar { position: static; display: grid; grid-template-columns: 1fr; align-items: stretch; }
  .room-directory-toolbar .room-quota-summary { margin: 0; }
  .room-directory-card header, .room-directory-members li { grid-template-columns: 1fr; display: grid; }
}

/* Fullscreen controls are overlays. They must never reduce or offset the media viewport. */
body .player-container:fullscreen,
body .player-container.fullscreen-active,
body.android-client .player-container:fullscreen,
body.android-client .player-container.fullscreen-active {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  min-width: 100vw;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
  aspect-ratio: auto;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #000;
}
body .player-container:fullscreen > .media-view,
body .player-container.fullscreen-active > .media-view,
body.android-client .player-container:fullscreen > .media-view,
body.android-client .player-container.fullscreen-active > .media-view {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

/* Long server-provided labels stay inside their status/member tracks. */
.status-card > div {
  min-width: 0;
  background: var(--theme-toolbar, var(--panel-2, #151c20));
}
.status-card > div > p,
.status-card > div > p > strong,
.status-card > div > p > small {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.status-card > div > p > strong {
  display: -webkit-box;
  overflow: hidden;
  line-height: 1.25;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.room-header > span,
.room-header > span > strong {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: normal;
  word-break: normal;
}
.room-header > span > strong { display: block; width: 100%; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-heading > div:first-child,
.panel-heading h2,
.member-heading-actions,
.user-card,
.user-info,
.user-detail-content,
.user-detail-content > small { min-width: 0; }
.panel-heading h2 { overflow-wrap: anywhere; word-break: break-word; line-height: 1.25; }
.user-card {
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: start;
}
.user-info { overflow: hidden; }
.member-name-line {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
  line-height: 1.3;
}
.member-name-line > span:first-child {
  min-width: 0;
  flex: 1 1 100px;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.member-detail-toggle { flex: 0 0 auto; }
.user-detail-content > small,
.user-permissions,
.user-group,
.user-quality { overflow-wrap: anywhere; word-break: break-word; white-space: normal !important; }
.user-actions {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
  gap: 4px;
}
.user-actions button { min-width: 0; max-width: 100%; overflow-wrap: anywhere; white-space: normal; }
.profile-file-item.processing button[data-profile-action="processing-progress"] { pointer-events: auto; cursor: pointer; }
.conversion-progress-toolbar { grid-template-columns: minmax(180px, 1fr) auto auto; align-items: end; }
.conversion-progress-toolbar .search-field { margin: 0; }
.conversion-row { position: relative; min-width: 0; }
.conversion-row header { align-items: flex-start; flex-wrap: wrap; }
.conversion-row header strong { min-width: 0; flex: 1 1 160px; overflow-wrap: anywhere; white-space: normal; }
.conversion-row header > span { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.conversion-task-select { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 5px; margin: 0; color: var(--muted); font-size: 10px; }
.conversion-delete-button { justify-self: end; min-height: 30px; padding: 5px 9px; }
.conversion-row-actions { display: flex; justify-content: flex-end; gap: 7px; }.conversion-row-actions button { min-height: 34px; }
body.android-client .topbar-actions .header-feature-button,
body.android-client .topbar-actions .share-link-button {
  width: 100%;
  max-width: 100%;
  text-align: left;
  white-space: normal;
}
body.android-client .topbar-actions .header-feature-button .button-label,
body.android-client .topbar-actions .share-link-button .button-label { min-width: 0; overflow-wrap: anywhere; white-space: normal; }
@media (max-width: 760px) {
  .conversion-progress-toolbar { grid-template-columns: 1fr; }
  .conversion-progress-toolbar > * { width: 100%; }
  .conversion-row header { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px 8px; }
  .conversion-row header > span { grid-column: 2; }
  .conversion-row-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }.conversion-row-actions button, .conversion-delete-button { width: 100%; }
  .user-actions { grid-column: 1 / -1; }
}

/* Keep the online counter compact and single-line even when the room is full. */
.header-online-stat,
.header-online-stat > small,
.header-online-value {
  min-width: 0;
  white-space: nowrap !important;
}
.header-online-stat {
  flex: 0 1 clamp(64px, 9vw, 112px);
  overflow: hidden;
}
.header-online-value {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: clip;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.header-online-value i { font-style: normal; opacity: .7; }
.header-online-stat[data-density="compact"] .header-online-value { font-size: 10px; }
.header-online-stat[data-density="tight"] .header-online-value { font-size: 8px; }
.header-online-stat { cursor: pointer; }
.upload-size-limit-row { align-items: end; }
.upload-size-limit-row label { display: flex; flex-wrap: wrap; gap: 8px; }
.upload-size-limit-row label > input { flex: 1 1 10rem; }
.upload-size-limit-row input { min-width: 0; }
.upload-size-limit-row select { min-width: 72px; }

.account-audit-log-card { width: min(980px, 100%); }
.account-audit-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(130px, 180px) auto auto;
  align-items: end;
  gap: 8px;
  margin: 12px 0;
  padding: 10px;
  background: var(--theme-item, #ffffff07);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.account-audit-toolbar label { min-width: 0; margin: 0; }
.account-audit-toolbar .check-line { align-self: center; white-space: nowrap; }
.account-audit-log-list { display: grid; gap: 7px; max-height: min(62dvh, 640px); overflow: auto; }
.account-audit-log-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 10px 11px;
  background: var(--theme-item, #ffffff07);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.account-audit-log-row > div { min-width: 0; }
.account-audit-log-row strong,
.account-audit-log-row p,
.account-audit-log-row small { display: block; min-width: 0; overflow-wrap: anywhere; }
.account-audit-log-row p { margin: 3px 0; color: var(--text); }
.account-audit-log-row small { color: var(--muted); }
.account-audit-log-select { display: inline-flex; align-items: center; margin: 0; }
.account-audit-log-select input { width: 17px; height: 17px; }
.audit-event,
.audit-result { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; padding: 4px 7px; border: 1px solid var(--line); border-radius: 999px; font-size: 11px; white-space: nowrap; }
.audit-event { color: var(--pink-2); background: color-mix(in srgb, var(--pink) 10%, transparent); }
.audit-result { color: var(--muted); }
.audit-result.is-success { color: var(--green, #7ed9a3); }
.audit-result.is-failure { color: var(--red, #ff8497); }

.upload-limit-tutorial-card { width: min(760px, 100%); }
.upload-limit-guide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 14px 0; }
.upload-limit-guide section { min-width: 0; padding: 12px; background: var(--theme-item, #ffffff07); border: 1px solid var(--line); border-radius: 8px; }
.upload-limit-guide h3 { margin: 0 0 5px; color: var(--pink-2); font-size: 14px; }
.upload-limit-guide p { margin: 0; color: var(--muted); line-height: 1.65; overflow-wrap: anywhere; }
.profile-danger-zone { border-color: color-mix(in srgb, var(--red, #ff8497) 50%, var(--line)); }
.profile-danger-zone h3 { color: var(--red, #ff8497); }
.account-admin-email-actions { display: inline-flex; flex-wrap: wrap; gap: 6px; width: 100%; margin: 2px 0; }
.account-admin-email-actions button { min-height: 32px; }

@media (max-width: 760px) {
  .account-audit-toolbar { grid-template-columns: 1fr; align-items: stretch; }
  .account-audit-toolbar > * { width: 100%; }
  .account-audit-toolbar .check-line { justify-content: flex-start; }
  .account-audit-log-row { grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; }
  .account-audit-log-row .audit-event { grid-column: 2; justify-self: start; }
  .account-audit-log-row > div { grid-column: 2 / -1; }
  .account-audit-log-row .audit-result { grid-column: 3; grid-row: 1; }
  .upload-limit-guide { grid-template-columns: 1fr; }
}

/* Interactive login identity */
.login-cube-scene { --cube-size: min(360px, 42vw, max(220px, calc(100dvh - 180px))); position: relative; width: var(--cube-size); height: var(--cube-size); perspective: 1100px; cursor: grab; touch-action: none; user-select: none; contain: layout style; }
.login-visual { align-self: stretch; min-height: clamp(420px, calc(100dvh - 24px), 900px); align-items: center; justify-items: center; }
.login-cube-scene { margin: auto; }
.login-cube-scene.is-dragging { cursor: grabbing; }
.login-cube-model { position: absolute; inset: 0; z-index: 2; display: block; width: 100%; height: 100%; opacity: 0; pointer-events: none; transition: opacity 180ms ease; }
.login-cube-scene[data-display-mode="model"].has-loaded-model .login-cube-model { opacity: 1; }
.login-cube-scene[data-display-mode="model"].has-loaded-model .login-cube { visibility: hidden; }
.login-cube { position: absolute; inset: 0; transform: rotateX(-12deg) rotateY(28deg); transform-style: preserve-3d; will-change: transform; transition: none; }
.login-cube-face { position: absolute; isolation: isolate; inset: 0; display: grid; align-content: center; justify-items: center; gap: 12px; overflow: hidden; padding: 44px; text-align: center; color: var(--text); background: color-mix(in srgb, var(--panel-2, #151b1f) 94%, transparent); border: 1px solid color-mix(in srgb, var(--theme-accent, #c7a763) 58%, transparent); border-radius: 8px; box-shadow: inset 0 0 48px #0007, 0 0 28px color-mix(in srgb, var(--theme-accent, #c7a763) 12%, transparent); backface-visibility: hidden; }
.login-cube-face::after { content: ''; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(180deg, #0506074d, #050607b8); opacity: 0; }
.login-cube-face.has-image::after { opacity: 1; }
.login-cube-face > :not(.login-cube-face-image) { position: relative; z-index: 2; }
.login-cube-face-image { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.login-cube-face > span { font-size: 56px; line-height: 1; }
.login-cube-face > strong { font-size: 25px; }
.login-cube-face > small { max-width: 280px; color: var(--muted); line-height: 1.7; }
.login-cube-front { transform: rotateY(0deg) translateZ(calc(var(--cube-size) / 2)); }
.login-cube-back { transform: rotateY(180deg) translateZ(calc(var(--cube-size) / 2)); }
.login-cube-right { transform: rotateY(90deg) translateZ(calc(var(--cube-size) / 2)); }
.login-cube-left { transform: rotateY(-90deg) translateZ(calc(var(--cube-size) / 2)); }
.login-cube-top { transform: rotateX(90deg) translateZ(calc(var(--cube-size) / 2)); }
.login-cube-bottom { transform: rotateX(-90deg) translateZ(calc(var(--cube-size) / 2)); }

.video-management-cover { width: 84px; height: 58px; object-fit: cover; border: 1px solid var(--line); border-radius: 7px; background: #000; }

.login-cube-settings-card { overflow: visible; }
.login-cube-motion-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin: 14px 0; }
.login-cube-speed-control { grid-column: 1 / -1; display: grid; grid-template-columns: max-content minmax(120px, 1fr) 64px; align-items: center; gap: 12px; }
.login-cube-speed-control input { width: 100%; accent-color: var(--theme-accent, var(--pink)); }
.login-cube-speed-control output { color: var(--theme-accent, var(--pink-2)); font-variant-numeric: tabular-nums; text-align: right; }
.login-cube-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 14px 0; }
.login-cube-face-editor { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; min-width: 0; padding: 12px 0; border-top: 1px solid color-mix(in srgb, var(--border) 76%, transparent); }
.login-cube-face-editor > *, .login-cube-editor-fields input, .login-cube-editor-fields textarea { min-width: 0; max-width: 100%; }
.login-cube-editor-preview { position: relative; display: grid; place-items: center; align-content: center; gap: 7px; min-height: 112px; overflow: hidden; color: var(--text); background: color-mix(in srgb, var(--panel-2) 92%, transparent); border: 1px solid color-mix(in srgb, var(--theme-accent, var(--pink)) 42%, var(--border)); border-radius: 7px; text-align: center; }
.login-cube-editor-preview::after { content: ''; position: absolute; inset: 0; background: #0506078c; opacity: 0; }
.login-cube-editor-preview:has(img)::after { opacity: 1; }
.login-cube-editor-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.login-cube-editor-preview span, .login-cube-editor-preview strong { position: relative; z-index: 1; }
.login-cube-editor-preview span { font-size: 30px; }
.login-cube-editor-preview strong { width: 100%; padding: 0 7px; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.login-cube-editor-fields { display: grid; gap: 8px; min-width: 0; }
.login-cube-editor-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.login-cube-editor-heading small { color: var(--muted); }
.login-cube-editor-title-row { display: grid; grid-template-columns: minmax(72px, .35fr) minmax(0, 1fr); gap: 8px; }
.login-cube-image-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.login-cube-file-button { display: inline-flex; width: auto; cursor: pointer; }
.login-cube-file-button input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* Synchronized speed */
.playback-rate-prompt { position: absolute; z-index: 18; top: 12px; left: 50%; transform: translateX(-50%); display: grid; justify-items: center; gap: 6px; }
.playback-rate-prompt.is-hidden { display: none; }
.playback-rate-prompt .playback-rate-badge { position: relative; top: auto; left: auto; transform: none; min-width: 62px; padding: 6px 10px; color: var(--text); background: color-mix(in srgb, var(--panel-2) 90%, transparent); border: 1px solid color-mix(in srgb, var(--theme-accent, var(--pink)) 62%, transparent); border-radius: 7px; box-shadow: 0 8px 24px #0007; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; text-align: center; pointer-events: none; }
.playback-rate-prompt .playback-rate-badge.is-fast { color: var(--theme-accent, var(--pink-2)); }
.playback-rate-prompt .playback-rate-badge.is-slow { color: var(--yellow); }
.playback-rate-prompt-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.playback-rate-prompt-actions button { padding: 4px 8px; border: 1px solid var(--line); border-radius: 5px; color: var(--text); background: color-mix(in srgb, var(--panel-2) 94%, transparent); font-size: 10px; cursor: pointer; }
.playback-rate-prompt-actions button:hover { border-color: var(--theme-accent, var(--pink)); }
.player-container:fullscreen .playback-rate-prompt, .player-container.fullscreen-active .playback-rate-prompt { position: fixed; z-index: 2147483645; top: max(12px, env(safe-area-inset-top)); }

/* Voice controls stay reachable without obscuring the chat timeline. */
.live-voice-bar .voice-fold-button { width: 30px; min-width: 30px; padding: 0; color: var(--theme-accent, var(--pink-2)); }
.live-voice-bar.is-collapsed > :not(:first-child):not(.voice-fold-button) { display: none !important; }
.live-voice-bar.is-collapsed { min-height: 38px; padding-block: 5px; }
.live-voice-floating { position: fixed; z-index: 185; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); width: min(330px, calc(100vw - 24px)); overflow: hidden; color: var(--text); background: color-mix(in srgb, var(--panel-2) 96%, transparent); border: 1px solid color-mix(in srgb, var(--theme-accent, var(--pink)) 56%, var(--line)); border-radius: 8px; box-shadow: 0 18px 56px #0009; backdrop-filter: blur(14px); }
.live-voice-floating header { display: grid; grid-template-columns: auto minmax(0, 1fr) 32px; align-items: center; gap: 8px; min-height: 42px; padding: 6px 8px 6px 12px; background: color-mix(in srgb, var(--theme-accent, var(--pink)) 9%, transparent); border-bottom: 1px solid var(--line); }
.voice-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px currentColor; animation: voice-live-pulse 1.7s ease-in-out infinite; }
.live-voice-floating header button { width: 30px; height: 30px; padding: 0; }
.live-voice-floating-body { display: grid; gap: 9px; padding: 10px 12px 12px; }
.live-voice-floating-body small { color: var(--muted); }
.live-voice-floating-body > div { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.live-voice-floating-body .danger-button { grid-column: 1 / -1; }
.live-voice-floating.is-collapsed .live-voice-floating-body { display: none; }
.live-voice-floating.is-collapsed header { border-bottom: 0; }
.live-voice-floating.is-muted .voice-live-dot { background: var(--yellow); }
.live-voice-floating #voicePushToTalkBtn.is-talking { color: #061b16; background: var(--green); border-color: var(--green); }
@keyframes voice-live-pulse { 50% { opacity: .45; transform: scale(.75); } }

/* Room chat filters and emoji categories */
.chat-view-filters { display: grid; grid-template-columns: repeat(3, minmax(112px, .7fr)) minmax(180px, 1.4fr) auto; gap: 7px; align-items: end; padding: 8px 10px; background: color-mix(in srgb, var(--panel-2) 88%, transparent); border-bottom: 1px solid var(--line); }
.chat-view-filters label { min-width: 0; margin: 0; }
.chat-view-filters input, .chat-view-filters select { min-width: 0; }
.chat-view-filters button { min-height: 38px; }
.chat-head-actions #chatViewFilterBtn.active { color: var(--theme-accent, var(--pink-2)); }
.chat-head-actions #danmakuSettingsBtn.active { color: var(--theme-accent, var(--pink-2)); }
.danmaku-settings-panel { position: relative; z-index: 2; }
.emoji-toolbar > .emoji-bar { flex: 1 0 100%; width: 100%; color: var(--text); background: color-mix(in srgb, var(--panel-2) 94%, transparent); border: 1px solid var(--line); border-radius: 7px; }
.friend-chat-emoji-toolbar { margin-top: 8px; }

/* Friend directory and permission-aware media management */
.friend-directory-row { cursor: default; border: 1px solid transparent; }
.friend-directory-row:hover { border-color: color-mix(in srgb, var(--theme-accent, var(--pink)) 45%, transparent); }
.friend-pending-actions { display: flex; flex: 0 0 auto !important; gap: 6px; }
.permission-denied-view .video-management-modal-card .video-management-toolbar,
.permission-denied-view .video-management-modal-card > .manage-actions { opacity: .48; }
.video-management-denied { display: grid; min-height: 310px; align-content: center; justify-items: center; gap: 10px; padding: 32px; text-align: center; color: var(--muted); background: color-mix(in srgb, var(--panel-2) 72%, transparent); border: 1px dashed color-mix(in srgb, var(--theme-accent, var(--pink)) 48%, var(--line)); border-radius: 8px; }
.video-management-denied > span { font-size: 42px; }
.video-management-denied h3 { margin: 0; color: var(--text); }
.video-management-denied p { max-width: 520px; line-height: 1.7; }
.video-management-denied button { min-width: 190px; }

/* One theme-aware scrollbar treatment for desktop, web and Android WebView. */
:root { scrollbar-color: color-mix(in srgb, var(--theme-accent, var(--pink)) 72%, transparent) color-mix(in srgb, var(--panel-2) 86%, transparent); scrollbar-width: thin; }
*:not(.topbar-actions):not(.topbar-scroll-actions):not(.toolbar-buttons) { scrollbar-color: color-mix(in srgb, var(--theme-accent, var(--pink)) 72%, transparent) color-mix(in srgb, var(--panel-2) 86%, transparent); scrollbar-width: thin; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: color-mix(in srgb, var(--panel-2) 88%, transparent); }
*::-webkit-scrollbar-thumb { min-height: 34px; background: color-mix(in srgb, var(--theme-accent, var(--pink)) 68%, var(--panel-2)); border: 2px solid color-mix(in srgb, var(--panel-2) 92%, transparent); border-radius: 7px; }
*::-webkit-scrollbar-thumb:hover { background: var(--theme-accent, var(--pink)); }

@media (max-width: 900px) {
  .chat-view-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chat-view-query { grid-column: 1 / -1; }
  .chat-view-filters > button { grid-column: 1 / -1; }
  .live-voice-floating { right: 10px; bottom: max(72px, calc(env(safe-area-inset-bottom) + 64px)); }
}

@media (max-width: 1100px) and (min-width: 761px) {
  .login-cube-scene { --cube-size: 300px; }
  .login-cube-face { padding: 32px; }
  .login-cube-settings-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .login-cube-motion-settings, .login-cube-settings-grid { grid-template-columns: 1fr; }
  .login-cube-speed-control { grid-template-columns: 1fr 58px; }
  .login-cube-speed-control > span { grid-column: 1 / -1; }
  .login-cube-face-editor { grid-template-columns: 82px minmax(0, 1fr); gap: 10px; }
  .login-cube-editor-preview { min-height: 96px; }
  .login-cube-editor-title-row { grid-template-columns: 1fr; }
}

/* Keep the identity cube available on touch layouts while reserving a compact, scroll-safe stage. */
@media (max-width: 924px) {
  .login-visual { display: grid; min-height: clamp(240px, 42dvh, 340px); padding: 22px 0 42px; overflow: visible; }
}

/* Electron server login: keep the visual cube in view while allowing the
   complete authentication card to scroll in short/zoomed windows. */
body.electron-server .login-page {
  height: 100%;
  min-height: 0;
  align-items: start;
  overflow-y: auto;
  overscroll-behavior: auto;
}
body.electron-server .login-visual {
  align-self: start;
  height: min(680px, calc(100dvh - 78px));
  min-height: 320px;
  overflow: visible;
}
body.electron-server .login-cube-scene { --cube-size: min(360px, 34vw, 52dvh); }
body.electron-server .auth-card {
  align-self: start;
  max-height: none;
  overflow: visible;
  margin-block: 18px 48px;
}
/* Server-only shortcuts stay inside the login card and are not duplicated
   into the touch action sheet. */
body.android-client .login-host-shortcuts { display: none !important; }
/* Electron server shortcuts are desktop utility controls.  A coarse-pointer
   media rule also matches some Electron windows, so keep these controls
   compact instead of letting the general touch target size stretch them. */
body.electron-server .login-host-shortcuts button {
  width: 100% !important;
  min-width: 0;
  height: 30px !important;
  min-height: 30px !important;
  padding: 3px 8px;
  font-size: 11px;
  line-height: 1.1;
}

@media (max-width: 1100px) and (min-width: 761px) {
  .login-cube-scene { --cube-size: min(300px, 46vw, max(220px, calc(100dvh - 160px))); }
}

@media (max-width: 760px) {
  .login-cube-scene { --cube-size: min(260px, 74vw, max(210px, calc(100dvh - 520px))); }
  .login-cube-face { padding: 26px; gap: 8px; }
  .login-cube-face > span { font-size: 42px; }
  .login-cube-face > strong { font-size: 18px; }
  .login-cube-face > small { max-width: 210px; font-size: 11px; line-height: 1.5; }
}

@media (prefers-reduced-motion: reduce) {
  .login-cube, .voice-live-dot { transition: none !important; animation: none !important; }
}

/* v2.1.5 additions */
.mail-test-row { grid-template-columns: minmax(160px, .6fr) minmax(0, 1.4fr) auto; }
.view-mode-select { display: flex !important; align-items: center; gap: 6px; font-size: 10px; color: var(--muted); }
.account-admin-list.view-table, .registration-request-list.view-table { display: block; overflow-x: auto; }
.admin-account-table, .admin-request-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 10px; }
.admin-account-table th, .admin-account-table td, .admin-request-table th, .admin-request-table td { padding: 6px 8px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.admin-account-table th, .admin-request-table th { color: var(--muted); font-weight: 700; white-space: nowrap; }
.admin-account-table .admin-account-select, .admin-request-table .request-select { white-space: nowrap; }
.admin-account-table .actions, .admin-request-table .actions { display: flex; flex-wrap: wrap; gap: 4px; }
.admin-account-table .actions button, .admin-request-table .actions button { padding: 4px 6px; border: 0; border-radius: 5px; background: #ffffff0c; font-size: 9px; color: var(--text); cursor: pointer; }
.account-admin-list.view-compact { gap: 4px; }
.account-admin-list.view-compact .admin-account-detail { padding: 6px 8px; }
.account-admin-list.view-compact .admin-account-detail > header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.account-admin-list.view-compact .admin-account-detail > small, .account-admin-list.view-compact .admin-account-detail > details, .account-admin-list.view-compact .account-level-editor, .account-admin-list.view-compact .admin-inline-editor { display: none; }
.account-admin-list.view-compact .admin-account-detail > .actions { margin-top: 4px; grid-column: 1 / -1; }
.registration-request-list.view-compact { gap: 4px; }
.registration-request-list.view-compact .admin-row { padding: 6px 8px; }
.registration-request-list.view-compact .admin-row > small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 760px) { .mail-test-row { grid-template-columns: 1fr; } }

/* Round 29: login presentation, honest provider states, and operational controls. */
.login-background-video {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #050708;
  pointer-events: none;
}
.login-page:has(> .login-background-video:not(.is-hidden))::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(90deg, #07090bd9 0%, #07090b7d 52%, #07090be8 100%);
  pointer-events: none;
}
.login-page > .login-visual,
.login-page > .auth-card { z-index: 2; }
.login-page > .login-now-playing { z-index: 180; }

.login-now-playing {
  position: fixed;
  z-index: 180;
  left: max(18px, env(safe-area-inset-left));
  bottom: max(18px, env(safe-area-inset-bottom));
  width: min(360px, calc(100vw - 36px));
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 7px;
  padding: 8px;
  overflow: visible;
  color: var(--text);
  background: color-mix(in srgb, var(--panel-2, #151b1f) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--theme-accent, var(--pink)) 42%, var(--line));
  border-radius: 9px;
  box-shadow: 0 18px 54px #000a;
  backdrop-filter: blur(16px);
}
.login-now-playing-summary {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 38px;
  padding: 3px 2px;
  color: inherit;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
}
.login-now-playing-summary > span:nth-child(2) { display: grid; min-width: 0; gap: 2px; }
.login-now-playing-summary small { color: var(--muted); font-size: 9px; letter-spacing: .14em; }
.login-now-playing-summary strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.login-now-playing.is-title-hidden .login-now-playing-summary strong { visibility: hidden; }
.login-now-playing-summary > span:last-child { color: var(--theme-accent, var(--pink-2)); transition: transform .2s ease; }
.login-now-playing.is-expanded .login-now-playing-summary > span:last-child { transform: rotate(180deg); }
.login-music-icon-button { width: 34px; min-width: 34px; height: 34px; min-height: 34px; display: grid; place-items: center; padding: 0; color: var(--text); background: color-mix(in srgb, var(--theme-button, #ffffff0c) 86%, transparent); border: 1px solid var(--line); border-radius: 6px; }
.login-music-icon-button:hover, .login-music-icon-button:focus-visible { color: var(--theme-accent, var(--pink-2)); border-color: color-mix(in srgb, var(--theme-accent, var(--pink)) 58%, var(--line)); }
.login-music-state-icon { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.login-music-play-icon { display: none; fill: currentColor; stroke: none; }
.login-music-muted-icon { display: none; }
.login-now-playing.is-paused .login-music-play-icon, .login-now-playing.is-muted .login-music-muted-icon { display: block; }
.login-now-playing.is-paused .login-music-pause-icon, .login-now-playing.is-muted .login-music-volume-icon { display: none; }
.login-now-playing-pulse { display: flex; align-items: end; justify-content: center; gap: 2px; height: 22px; color: var(--theme-accent, var(--pink)); }
.login-now-playing-pulse i { width: 3px; height: 45%; background: currentColor; border-radius: 2px; animation: login-audio-pulse .95s ease-in-out infinite alternate; }
.login-now-playing-pulse i:nth-child(2) { height: 90%; animation-delay: -.38s; }
.login-now-playing-pulse i:nth-child(3) { height: 65%; animation-delay: -.7s; }
.login-now-playing.is-paused .login-now-playing-pulse i { height: 38%; animation-play-state: paused; opacity: .52; }
.login-now-playing.is-muted .login-now-playing-pulse { opacity: .48; }
@keyframes login-audio-pulse { to { height: 100%; opacity: .68; } }
.login-music-progress-popover {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  max-height: 0;
  padding: 0 3px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition: max-height .2s ease, padding .2s ease, opacity .16s ease;
}
.login-now-playing.is-expanded .login-music-progress-popover,
.login-now-playing:focus-within .login-music-progress-popover {
  max-height: 92px;
  padding: 5px 3px 3px;
  opacity: 1;
  pointer-events: auto;
}
.login-music-progress-popover input { width: 100%; min-width: 0; accent-color: var(--theme-accent, var(--pink)); }
.login-music-progress-popover output { color: var(--muted); font-size: 9px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.login-music-track-picker { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px; }
.login-music-track-picker select { min-width: 0; width: 100%; height: 26px; padding: 2px 6px; font-size: 11px; }
.login-music-nav-button { min-height: 26px; padding: 2px 7px; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 4px; font-size: 10px; white-space: nowrap; }
.login-music-nav-button:hover, .login-music-nav-button:focus-visible { color: var(--text); border-color: var(--theme-accent, var(--pink)); }
.login-music-volume-control { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) 34px; align-items: center; gap: 8px; margin: 0; color: var(--muted); font-size: 10px; }
.login-music-volume-control input { min-height: 20px; padding: 0; }
.login-music-volume-control output { text-align: right; }

@media (max-width: 760px) {
  .login-now-playing { grid-template-columns: 42px minmax(0, 1fr) 42px; }
  .login-music-icon-button { width: 42px; min-width: 42px; height: 42px; min-height: 42px; }
}

.external-login-providers { display: grid; gap: 9px; margin-top: 14px; }
.external-login-divider { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; color: var(--muted); }
.external-login-divider > span { height: 1px; background: var(--line); }
.external-login-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.external-login-grid button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 48px;
  padding: 7px 8px;
  color: var(--muted);
  background: color-mix(in srgb, var(--panel-2) 82%, transparent);
  border: 1px solid var(--line);
  border-radius: 7px;
  text-align: left;
}
.external-login-grid button > span:first-child { font-size: 18px; }
.external-login-grid button > span:last-child { display: grid; min-width: 0; gap: 2px; font-size: 9px; line-height: 1.25; }
.external-login-grid button small { color: color-mix(in srgb, var(--muted) 78%, transparent); font-size: 8px; }
.external-login-grid button:disabled { opacity: .62; cursor: not-allowed; }
.provider-login-note { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.55; }
.registration-email-verification + .form-hint { margin-top: -2px; }

/* The mode is set on #loginCubeScene; body classes remain a compatibility hook for clients. */
.login-cube-scene[data-display-mode="flat"] { perspective: none; cursor: default; touch-action: auto; }
.login-cube-scene[data-display-mode="flat"] .login-cube { transform: none !important; transform-style: flat; }
.login-cube-scene[data-display-mode="flat"] .login-cube-face:not(.login-cube-front) { display: none; }
.login-cube-scene[data-display-mode="flat"] .login-cube-front {
  transform: none;
  border-color: color-mix(in srgb, var(--theme-accent, var(--pink)) 68%, transparent);
  box-shadow: inset 0 0 52px #0006, 0 24px 72px #0007;
  backface-visibility: visible;
}
.login-cube-scene[data-display-mode="hidden"],
body.login-cube-hidden .login-cube-scene { display: none; }
body.login-cube-flat .login-cube-scene { perspective: none; cursor: default; touch-action: auto; }
body.login-cube-flat .login-cube { transform: none !important; transform-style: flat; }
body.login-cube-flat .login-cube-face:not(.login-cube-front) { display: none; }
body.login-cube-flat .login-cube-front { transform: none; backface-visibility: visible; }
.login-page:has(.login-cube-scene[data-display-mode="hidden"]),
body.login-cube-hidden .login-page { grid-template-columns: minmax(360px, 620px); justify-content: center; }
.login-page:has(.login-cube-scene[data-display-mode="hidden"]) .login-visual,
body.login-cube-hidden .login-visual { display: none; }

.login-cube-model-tutorial { margin: 14px 0; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--panel-2) 82%, transparent); }
.login-cube-model-tutorial summary { padding: 11px 13px; color: var(--theme-accent, var(--pink-2)); font-weight: 750; cursor: pointer; }
.login-cube-model-guide { display: grid; gap: 10px; padding: 0 13px 13px; border-top: 1px solid var(--line); }
.login-cube-model-guide p, .login-cube-model-guide ol { margin: 10px 0 0; color: var(--muted); line-height: 1.65; }
.login-cube-model-guide ol { padding-left: 20px; }
.login-cube-model-guide input[type="file"] { margin-top: 6px; }
.login-cube-model-guide small { color: var(--muted); }
.login-cube-model-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.login-cube-model-status { margin: 0 !important; min-height: 20px; color: var(--text) !important; overflow-wrap: anywhere; }

.login-video-settings-card video { width: 100%; max-height: 290px; margin-top: 8px; background: #050607; border: 1px solid var(--line); border-radius: 8px; }
.login-media-upload-progress { display: grid; grid-template-columns: minmax(140px, 1fr) auto; align-items: center; gap: 10px; margin-top: 9px; padding: 9px 11px; background: color-mix(in srgb, var(--panel-2) 78%, transparent); border: 1px solid var(--line); border-radius: 7px; }
.login-media-upload-progress progress { width: 100%; height: 8px; accent-color: var(--theme-accent, var(--pink)); }
.login-media-upload-progress span { color: var(--muted); font-size: 9px; font-variant-numeric: tabular-nums; white-space: nowrap; }

.guest-convert-button { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 7px 10px; color: var(--theme-accent, var(--pink-2)); background: color-mix(in srgb, var(--theme-accent, var(--pink)) 12%, transparent); border: 1px solid color-mix(in srgb, var(--theme-accent, var(--pink)) 44%, var(--line)); border-radius: 8px; white-space: nowrap; }
.guest-convert-card { width: min(520px, calc(100vw - 24px)); }
.guest-convert-card .modal-form { gap: 9px; }
.guest-convert-card .form-status:empty { display: none; }
.guest-convert-email-verification { align-items: end; }

.room-storage-bulk-control { display: grid; flex: 1 1 190px; min-width: 180px; max-width: 250px; gap: 4px; margin: 0 !important; color: var(--muted); font-size: 9px; }
.room-storage-bulk-control input { min-height: 34px; }
.room-media-preview-toolbar { grid-template-columns: auto auto auto; justify-content: start; margin-bottom: 12px; }
.room-media-preview-toolbar .check-line { margin: 0 8px 0 0; }
.destructive-option { color: #ffc1c8; }
.destructive-option-hint { margin: 7px 0 12px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.conversion-progress-toolbar { grid-template-columns: minmax(180px, 1fr) auto auto auto; }

.clear-all-toasts-button {
  position: fixed;
  z-index: 2147483647;
  top: max(72px, calc(env(safe-area-inset-top) + 58px));
  right: max(16px, env(safe-area-inset-right));
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 8px 12px;
  color: #fff;
  background: #11181cf2;
  border: 1px solid #ffffff33;
  border-radius: 8px;
  box-shadow: 0 14px 42px #000b;
  backdrop-filter: blur(14px);
  pointer-events: auto;
  touch-action: manipulation;
}
.clear-all-toasts-button:hover, .clear-all-toasts-button:focus-visible { color: var(--theme-accent, var(--pink-2)); border-color: currentColor; }
.player-container:fullscreen .clear-all-toasts-button,
.player-container.fullscreen-active .clear-all-toasts-button { top: max(14px, env(safe-area-inset-top)); }

/* Fullscreen controls remain above media and inside notches, including after chat is collapsed. */
.player-container:fullscreen .fullscreen-show-button,
.player-container.fullscreen-active .fullscreen-show-button {
  position: fixed;
  z-index: 2147483647;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  min-width: 148px;
  min-height: 48px;
  pointer-events: auto;
  touch-action: manipulation;
  isolation: isolate;
}
.player-container:fullscreen .fullscreen-overlay,
.player-container.fullscreen-active .fullscreen-overlay { z-index: 2147483646; pointer-events: none; }
.player-container:fullscreen .fullscreen-actions,
.player-container:fullscreen .fullscreen-chat-card,
.player-container.fullscreen-active .fullscreen-actions,
.player-container.fullscreen-active .fullscreen-chat-card { pointer-events: auto; touch-action: manipulation; }
.player-container:fullscreen .fullscreen-actions,
.player-container.fullscreen-active .fullscreen-actions {
  top: max(14px, calc(env(safe-area-inset-top) + 8px));
  right: max(14px, env(safe-area-inset-right));
  left: max(14px, env(safe-area-inset-left));
}

@media (max-width: 760px) {
  .login-page { display: flex; flex-direction: column; align-items: stretch; }
  .login-visual { order: 0; }
  .auth-card { order: 1; }
  .login-now-playing { position: static; order: 2; align-self: center; width: calc(100% - 20px); margin: 12px auto max(16px, env(safe-area-inset-bottom)); }
  .login-now-playing.is-expanded .login-music-progress-popover,
  .login-now-playing:focus-within .login-music-progress-popover { max-height: min(58dvh, 420px); }
  .external-login-grid { grid-template-columns: 1fr; }
  .external-login-grid button { min-height: 44px; }
  .login-media-upload-progress { grid-template-columns: 1fr; }
  .login-media-upload-progress span { white-space: normal; }
  .room-storage-bulk-control { width: 100%; max-width: none; }
  .room-media-preview-toolbar, .conversion-progress-toolbar { grid-template-columns: 1fr; }
  .room-media-preview-toolbar > *, .conversion-progress-toolbar > * { width: 100%; }
  .guest-convert-card { padding-top: 32px; }
  .clear-all-toasts-button { top: max(62px, calc(env(safe-area-inset-top) + 52px)); right: max(10px, env(safe-area-inset-right)); min-height: 44px; }
  .player-container:fullscreen .fullscreen-show-button,
  .player-container.fullscreen-active .fullscreen-show-button { right: max(10px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); min-height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .login-now-playing-pulse i { animation: none; }
  .login-music-progress-popover, .login-now-playing-summary > span:last-child { transition: none; }
}

/* Phone browsers do not expose F-key/Ctrl+0 hardware shortcuts reliably;
   use the visible touch controls instead of advertising unusable bindings. */
@media (max-width: 760px) {
  .shortcut-settings-card { display: none !important; }
  .f11-prompt-card .shortcut-list li:nth-child(1),
  .f11-prompt-card .shortcut-list li:nth-child(2),
  .f11-prompt-card .shortcut-list li:nth-child(3),
  .f11-prompt-card .shortcut-list li:nth-child(6),
  .f11-prompt-card .shortcut-list li:nth-child(7) { display: none; }
}

.login-room-reminder-controls {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: end;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 0 2px;
  background: var(--theme-panel, var(--panel));
  border-top: 1px solid var(--line);
}
.login-room-reminder-controls label { min-width: 190px; margin: 0; }
.login-room-reminder-controls button { min-height: 40px; }
.media-auto-convert-setting { grid-column: 1 / -1; justify-content: flex-start; min-height: 36px; margin: 0; }

body.android-client .side-panel {
  position: fixed;
  z-index: 220;
  top: 0;
  bottom: 0;
  width: 100vw;
  max-width: none;
  transition: transform .22s ease;
}
body.android-client .file-panel { left: 0; transform: translateX(-105%); }
body.android-client .user-panel { right: 0; transform: translateX(105%); }
body.android-client .side-panel:not(.mobile-open) { display: none; }
body.android-client .side-panel.mobile-open { display: block; }
body.android-client .side-panel.mobile-open { transform: translateX(0); }

@media (max-width: 924px) {
  main, .main-page, .workspace { height: auto; min-height: calc(100dvh - 58px); }
  body:not(.android-client) .theater { display: grid; height: auto; min-height: 0; grid-template-areas: "marquee" "status" "mobile-nav" "player" "toolbar" "owner" "chat"; grid-template-rows: auto auto auto minmax(220px, 43dvh) auto auto minmax(180px, .55fr); }
  .room-marquee, .temporary-room-notice { order: 0; }
  .status-card { order: 1; }
  .mobile-module-nav { position: static; order: 2; background: var(--theme-stage, #090c0e); }
  .player-container { order: 3; min-height: 220px; }
  .theater-toolbar { order: 4; }
  .owner-controls { order: 5; }
  .chat-panel { order: 6; }
  .theater[data-mobile-module-active="library"] .chat-panel,
  .theater[data-mobile-module-active="members"] .chat-panel { display: none; }
  .theater[data-mobile-module-active="chat"] .status-card,
  .theater[data-mobile-module-active="chat"] .player-container,
  .theater[data-mobile-module-active="chat"] .theater-toolbar,
  .theater[data-mobile-module-active="chat"] .owner-controls { display: none; }
  .theater[data-mobile-module-active="chat"] .chat-panel { display: grid; min-height: 0; }
  .chat-panel:not(.mobile-chat-collapsed) { grid-template-rows: auto auto auto auto clamp(160px, 42dvh, 420px) auto auto auto; }
  .chat-panel:not(.mobile-chat-collapsed) .chat-history {
    height: clamp(160px, 42dvh, 420px);
    max-height: 420px;
    margin-inline: 8px;
    overscroll-behavior: contain;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: color-mix(in srgb, var(--theme-panel-2) 88%, transparent);
  }
  /* Keep the mobile control stack below the player in document flow; never
     let an expanded chat or emoji picker cover the playback toolbar. */
  .theater:not(.chat-expanded) .theater-toolbar,
  .theater:not(.chat-expanded) .owner-controls,
  .theater:not(.chat-expanded) .chat-panel { position: relative; z-index: 1; }
  .theater:not(.chat-expanded) .player-container { z-index: 0; }
}

body.android-client .theater[data-mobile-module-active="library"] .chat-panel,
body.android-client .theater[data-mobile-module-active="members"] .chat-panel { display: none; }
body.android-client .theater[data-mobile-module-active="chat"] .status-card,
body.android-client .theater[data-mobile-module-active="chat"] .player-container,
body.android-client .theater[data-mobile-module-active="chat"] .theater-toolbar,
body.android-client .theater[data-mobile-module-active="chat"] .owner-controls { display: none; }
body.android-client .theater[data-mobile-module-active="chat"] .chat-panel { display: grid; min-height: 0; }
body.android-client .theater-toolbar { display: flex; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; }
body.android-client .theater-toolbar .toolbar-module { flex: 0 0 min(88vw, 420px); scroll-snap-align: start; }

@media (max-width: 560px) {
  .status-card > div:nth-child(3), .status-card > div:nth-child(5), .status-card > div:nth-child(6) { display: none; }
  .status-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .login-room-reminder-controls { align-items: stretch; flex-direction: column; }
  .login-room-reminder-controls label, .login-room-reminder-controls button { width: 100%; }
  .text-view { padding: 18px 16px 126px; font-size: 14px; line-height: 1.75; }
  .text-reader-controls { bottom: 8px; width: calc(100% - 16px); display: grid; grid-template-columns: 1fr minmax(130px, auto) 1fr; gap: 6px; }
  .text-reader-controls > output { grid-column: 1 / -1; min-width: 0; text-align: center; }
  .text-reader-controls input { width: 54px; }
}

.profile-hero > div { min-width: 0; overflow-wrap: anywhere; }

.ui-copy-settings-card { border-color: color-mix(in srgb, var(--theme-accent, var(--pink)) 42%, var(--line)); }
.ui-copy-search-field { display: grid; gap: 6px; margin-top: 12px; color: var(--muted); font-size: 13px; font-weight: 700; }
.ui-copy-search-field input { width: 100%; min-width: 0; }
.ui-copy-editor-list { display: grid; gap: 6px; max-height: min(52vh, 560px); margin-top: 10px; padding-right: 3px; overflow: auto; }
.ui-copy-editor-row {
  display: grid;
  grid-template-columns: minmax(150px, .7fr) minmax(220px, 1.3fr);
  align-items: center;
  gap: 12px;
  min-height: 42px;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--panel-2) 86%, transparent);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: text;
}
.ui-copy-editor-row:hover, .ui-copy-editor-row:focus, .ui-copy-editor-row:focus-within { border-color: var(--theme-accent, var(--pink)); }
.ui-copy-editor-row:focus-visible { outline: 3px solid var(--theme-accent, var(--pink)); outline-offset: 2px; }
.ui-copy-editor-key { display: grid; gap: 3px; min-width: 0; }
.ui-copy-editor-key small { color: var(--muted); font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }
.ui-copy-editor-row code { min-width: 0; color: var(--theme-accent, var(--pink-2)); overflow-wrap: anywhere; }
.ui-copy-editor-row span { min-width: 0; color: var(--text); line-height: 1.5; overflow-wrap: anywhere; }
[aria-pressed="true"]#uiCopyEditModeBtn { color: var(--button-text, #fff); background: var(--theme-accent, var(--pink)); border-color: var(--theme-accent, var(--pink)); }
.ui-copy-empty { margin: 0; padding: 16px; color: var(--muted); text-align: center; border: 1px dashed var(--line); border-radius: 6px; }
[data-copy-key] { --copy-edit-outline: transparent; }
[data-ui-copy-text-key], [data-ui-copy-attribute-keys] { --copy-edit-outline: transparent; }
body.ui-copy-editable [data-copy-key],
body.ui-copy-editable [data-ui-copy-text-key],
body.ui-copy-editable [data-ui-copy-attribute-keys] { outline: 1px dashed var(--copy-edit-outline); outline-offset: 3px; cursor: alias; }
body.ui-copy-editable [data-copy-key]:hover,
body.ui-copy-editable [data-ui-copy-text-key]:hover,
body.ui-copy-editable [data-ui-copy-attribute-keys]:hover { --copy-edit-outline: var(--theme-accent, var(--pink)); }

@media (max-width: 924px) {
  .theater[data-mobile-module-active="watch"] .chat-panel { display: grid; min-height: 220px; }
  .player-container { touch-action: manipulation; }
  .player-container:fullscreen .fullscreen-actions button,
  .player-container.fullscreen-active .fullscreen-actions button,
  .fullscreen-transform-controls button,
  .fullscreen-chat-form button,
  .live-voice-floating button { min-width: 44px; min-height: 44px; }
  .live-voice-bar button { min-height: 44px; padding-block: 6px; }
  .live-voice-bar:not(.is-collapsed) .voice-fold-button { grid-column: 1 / -1; width: 100%; min-width: 0; }
  .live-voice-bar.is-collapsed .voice-fold-button { width: auto; min-width: 92px; }
  .account-modal-card { width: 100vw; height: 100dvh; max-width: none; max-height: none; padding: max(58px, calc(env(safe-area-inset-top) + 50px)) 12px max(16px, env(safe-area-inset-bottom)); border: 0; border-radius: 0; }
  .account-layout { height: 100%; grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 0; }
  .account-nav { display: flex; gap: 6px; padding: 0 48px 10px 0; overflow-x: auto; border: 0; border-bottom: 1px solid var(--line); }
  .account-nav button { flex: 0 0 auto; min-height: 44px; white-space: nowrap; }
  .account-content { padding-top: 12px; }
  .topbar-actions, .toolbar-buttons, .owner-controls, .chat-modes { scrollbar-width: none !important; }
  .topbar-actions::-webkit-scrollbar, .toolbar-buttons::-webkit-scrollbar, .owner-controls::-webkit-scrollbar, .chat-modes::-webkit-scrollbar { display: none; }
}

@media (max-width: 560px) {
  .ui-copy-editor-row { grid-template-columns: 1fr; gap: 5px; }
}

/* v2.2.8: plain mobile browsers must scroll the document, not a fixed main/login pair. */
@media (max-width: 924px) {
  html, body { height: auto; min-height: 100%; overflow-y: auto; }
  body:not(.android-client) main {
    height: auto;
    min-height: calc(100dvh - var(--mobile-web-appbar, 58px));
    overflow: visible;
  }
  body:not(.android-client) .login-page {
    height: auto;
    min-height: calc(100dvh - var(--mobile-web-appbar, 58px));
    overflow: visible;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }
}

/* v2.2.8: keep the complete login card reachable in short or zoomed windows. */
.login-page {
  height: auto;
  min-height: calc(100dvh - var(--mobile-web-appbar, 58px));
  align-items: start;
  padding-bottom: max(36px, env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.login-page > .auth-card,
.login-page #authCard.auth-card {
  align-self: start;
  max-height: none;
  overflow: visible;
  margin-block: 18px 48px;
}
@media (max-width: 924px) {
  .login-page { min-height: calc(100dvh - var(--mobile-web-appbar, 58px)); }
  .login-page #authCard.auth-card { margin-block: 10px 48px; }
}

/* Browser login pages use the document as the single scroll container, just
   like the server login window; this prevents the card from being trapped in
   a clipped nested viewport on short or zoomed pages. */
body:not(.android-client):not(.electron-server) { overflow-y: auto; }
body:not(.android-client):not(.electron-server) main { height: auto; min-height: calc(100dvh - 58px); overflow: visible; }
body:not(.android-client):not(.electron-server) .login-page { height: auto; min-height: calc(100dvh - 58px); overflow: visible; touch-action: pan-y; }

/* Account-scoped distraction controls and fullscreen safety. */
.danmaku-item {
  color: var(--account-danmaku-color, #fff);
  font-size: var(--account-danmaku-size, 20px);
}
.danmaku-settings-panel,
.queue-bulk-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
}
.danmaku-settings-panel label { display: flex; align-items: center; gap: 8px; margin: 0; }
.danmaku-settings-panel input[type="range"] { min-width: 140px; }
.queue-bulk-toolbar { justify-content: space-between; margin: 10px 0; }
.queue-select,
.library-queue-select { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; }
.queue-select input,
.library-queue-select input { width: 18px; height: 18px; }

body.concise-mode .file-panel,
body.concise-mode .user-panel,
body.concise-mode .chat-panel,
body.concise-mode .mobile-module-switcher,
body.concise-mode .room-marquee,
body.concise-mode .owner-controls,
body.concise-mode #noticeCenterBtn,
body.concise-mode #conversionProgressBtn,
body.concise-mode #webShareBtn,
body.concise-mode #themeBtn,
body.concise-mode #downloadCenterBtn,
body.concise-mode #adminContactBtn,
body.concise-mode #copyrightBtn { display: none !important; }
body.concise-mode .workspace { grid-template-columns: minmax(0, 1fr); }
body.concise-mode .theater { grid-column: 1 / -1; width: 100%; max-width: none; margin-inline: 0; }
body.concise-mode #conciseModeBtn { color: var(--pink-2); border-color: color-mix(in srgb, var(--pink) 48%, transparent); background: color-mix(in srgb, var(--pink) 14%, transparent); }

body.fullscreen-open .modal,
body.fullscreen-open #screenNoticeOverlay,
body.fullscreen-open #controlRequestOverlay,
body.fullscreen-open #permissionNotice,
body.fullscreen-open #reconnectOverlay,
body.fullscreen-open #roomSwitchSuccessOverlay,
body.fullscreen-open .toast-region,
body.fullscreen-open #clearAllToastsBtn { display: none !important; }
.player-container:fullscreen .danmaku-container,
.player-container.fullscreen-active .danmaku-container { display: block !important; visibility: visible !important; opacity: 1 !important; }
.player-container:fullscreen:not(.controls-visible) .fullscreen-lock-button,
.player-container.fullscreen-active:not(.controls-visible) .fullscreen-lock-button { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px); }
.fullscreen-lock-button { transition: opacity .18s ease, visibility .18s ease, transform .18s ease; }
.room-ownership-meta { display: block; margin-top: 4px; color: var(--muted); font-size: .78rem; overflow-wrap: anywhere; }
.fullscreen-auto-lock-option { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: .76rem; color: var(--muted); }
.fullscreen-auto-lock-option input { accent-color: var(--pink); }
.fullscreen-chat-card { font-size: .86rem; }
.fullscreen-chat-history { font-size: .82rem; }
.chat-head { min-width: 0; }
.chat-head-actions { min-width: 0; flex-wrap: wrap; }
.chat-head-actions #chatToggleBtn { flex: 0 0 auto; white-space: nowrap; position: relative; z-index: 2; }
.chat-only-toggle { writing-mode: horizontal-tb !important; white-space: nowrap; display: inline-flex !important; align-items: center; gap: 5px; }
.fullscreen-chat-card {
  width: min(390px, 38vw);
  min-width: min(300px, calc(100vw - 28px));
  max-width: calc(100vw - 28px);
  max-height: calc(100dvh - 86px);
}
.player-container:fullscreen .fullscreen-actions,
.player-container.fullscreen-active .fullscreen-actions {
  max-width: calc(100vw - 28px);
  max-height: min(42dvh, 240px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
@media (max-width: 700px), (max-height: 560px) {
  .fullscreen-chat-card { min-width: 0; max-width: calc(100vw - 16px); max-height: min(54dvh, calc(100dvh - 76px)); }
  .player-container:fullscreen .fullscreen-shortcut-hint,
  .player-container.fullscreen-active .fullscreen-shortcut-hint { top: max(70px, calc(env(safe-area-inset-top) + 58px)); grid-template-columns: 1fr 1fr; }
  .fullscreen-shortcut-hint > div { grid-column: 1 / -1; }
  .player-container:fullscreen .fullscreen-actions,
  .player-container.fullscreen-active .fullscreen-actions { left: 8px; right: 8px; max-width: none; max-height: 38dvh; }
  .queue-bulk-toolbar { align-items: stretch; }
  .queue-bulk-toolbar > * { flex: 1 1 130px; }
  .chat-head-actions { width: 100%; justify-content: flex-end; gap: 5px; }
  .chat-head-actions > * { max-width: 100%; }
  .chat-only-toggle { order: -1; }
  .fullscreen-chat-card { font-size: .78rem; }
  .fullscreen-chat-history { font-size: .74rem; }
}
/* v2.3.7 mobile interaction hardening.  Android WebView can retain a
   compositor layer for a fixed overlay after the controls auto-hide.  Keep
   the small affordance alive on touch devices and make the interactive layer
   explicitly hit-testable while it is open. */
@media (max-width: 924px), (pointer: coarse) {
  .player-container:fullscreen,
  .player-container.fullscreen-active {
    background: var(--theme-stage, #090c0e);
  }
  .player-container:fullscreen .fullscreen-overlay,
  .player-container.fullscreen-active .fullscreen-overlay {
    touch-action: manipulation;
  }
  .player-container:fullscreen.controls-visible .fullscreen-overlay,
  .player-container.fullscreen-active.controls-visible .fullscreen-overlay {
    pointer-events: auto;
  }
  .player-container:fullscreen .fullscreen-show-button:not(.is-hidden),
  .player-container.fullscreen-active .fullscreen-show-button:not(.is-hidden) {
    animation: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    touch-action: manipulation;
  }
  .player-container:fullscreen .fullscreen-actions,
  .player-container.fullscreen-active .fullscreen-actions {
    max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px);
    overflow-y: auto;
    align-content: flex-start;
    -webkit-overflow-scrolling: touch;
  }
  .player-container:fullscreen .fullscreen-chat-card,
  .player-container.fullscreen-active .fullscreen-chat-card {
    max-width: calc(100vw - 16px);
    background: color-mix(in srgb, var(--theme-panel, #151b1f) 94%, transparent);
    -webkit-overflow-scrolling: touch;
  }
  .player-container:fullscreen .media-view,
  .player-container.fullscreen-active .media-view {
    background-color: transparent;
  }
}

/* Let the complete emoji catalog be browsed on a phone without clipping the
   last rows inside the chat grid or Android WebView viewport. */
@media (max-width: 924px), (pointer: coarse) {
  .emoji-toolbar > .emoji-bar {
    max-height: min(42dvh, 320px);
    min-height: 180px;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }
  body.android-client .emoji-toolbar > .emoji-bar {
    max-height: min(44dvh, 340px);
    min-height: 200px;
  }
}

/* The Android module switcher and chat view must stay inside the viewport when
   opening Chat repeatedly; long message content may not establish a wider
   grid track. */
body.android-client .theater,
body.android-client .mobile-module-nav,
body.android-client .chat-panel,
body.android-client .chat-panel > * {
  min-width: 0;
  max-width: 100%;
}
body.android-client .mobile-module-nav {
  width: calc(100% - 20px);
  box-sizing: border-box;
  overflow: hidden;
}
body.android-client .mobile-module-button {
  min-width: 0;
  width: 100%;
}
body.android-client .chat-panel {
  width: calc(100% - 20px);
  margin-inline: 10px;
  overflow-x: hidden;
}
body.android-client .chat-panel .chat-history,
body.android-client .chat-panel .chat-form,
body.android-client .chat-panel .emoji-toolbar,
body.android-client .chat-panel .reaction-bar {
  min-width: 0;
  max-width: 100%;
}
/* Native and pseudo fullscreen both live inside the room page.  Remove the
   surrounding app chrome from the hit-test/paint order so it cannot sit above
   the player on Android WebView. */
body.fullscreen-open > .topbar,
body.fullscreen-open .side-panel,
body.fullscreen-open .mobile-module-nav,
body.fullscreen-open .theater-toolbar,
body.fullscreen-open .owner-controls {
  visibility: hidden;
  pointer-events: none;
}

/* Final Android override: the legacy compact-mobile rule above changes the
   toolbar to a horizontal flex strip.  That rule is appropriate for browser
   phones but makes the Android room wider than the viewport and pushes the
   fullscreen button off-screen. */
body.android-client .theater-toolbar {
  display: grid;
  width: auto;
  max-width: 100%;
  overflow: visible;
  grid-template-columns: minmax(0, 1fr);
}
body.android-client .theater-toolbar .toolbar-module {
  flex: none;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
/* Final mobile contract: voice is not a mobile feature, and the two most
   important fullscreen actions always occupy row one in both Android WebView
   and narrow mobile browsers. */
@media (max-width: 924px) {
  /* Phone layouts never expose live voice or duplicate playback surfaces. */
  body.android-client #liveVoiceBar,
  body.android-client #liveVoiceFloating { display: none !important; visibility: hidden !important; }
  .live-voice-bar,
  #liveVoiceBar,
  .live-voice-floating,
  #liveVoiceFloating,
  #playPauseBtn,
  #floatingPlayerBtn { display: none !important; visibility: hidden !important; }
  .playback-module #clearPlaybackBtn { grid-column: 1 / -1; }
  .playback-module #backBtn { grid-column: 1; }
  .playback-module #forwardBtn { grid-column: 2; }
  body.android-client .room-tools-module { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .room-tools-module { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .room-tools-module #fullscreenBtn { grid-column: 1; grid-row: 1; }
  .room-tools-module .fullscreen-auto-lock-toolbar { grid-column: 2; grid-row: 1; }
  .room-tools-module #screenShareBtn { grid-column: 1; grid-row: 2; }
  .room-tools-module #audioSourceBtn { grid-column: 2; grid-row: 2; }
}
/* v2.2.8 usability refinements */
.management-hub-card.management-loading .management-content::before { content: "正在加载服务器设置…"; display: block; margin: 0 0 12px; padding: 9px 12px; color: var(--muted); background: color-mix(in srgb, var(--theme-accent, var(--pink)) 8%, transparent); border: 1px solid color-mix(in srgb, var(--theme-accent, var(--pink)) 24%, var(--line)); border-radius: 7px; }
.management-hub-card.management-loading .management-content { content-visibility: auto; contain: layout paint; }
.management-content .management-filtered { content-visibility: auto; contain-intrinsic-size: 220px; }
.room-card-main { gap: 6px !important; }
.room-card-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.room-card-title strong { color: var(--text); font-size: 1rem; line-height: 1.35; }
.room-card-title code { color: var(--theme-accent, var(--pink-2)); font-size: .82rem; letter-spacing: .08em; }
.room-card-badges { display: flex; flex-wrap: wrap; gap: 5px; }
.room-card-badges span { padding: 2px 7px; color: var(--theme-accent, var(--pink-2)); font-size: .72rem; line-height: 1.35; border: 1px solid color-mix(in srgb, var(--theme-accent, var(--pink)) 36%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--theme-accent, var(--pink)) 9%, transparent); }
.room-card-meta, .room-card-note { font-size: .78rem !important; line-height: 1.45; }
.room-card-note { color: var(--text-muted, var(--muted)); }
.download-recommended { outline: 2px solid color-mix(in srgb, var(--theme-accent, var(--pink)) 70%, transparent); outline-offset: -2px; background: color-mix(in srgb, var(--theme-accent, var(--pink)) 10%, transparent); }
.download-recommended-badge { display: inline-block; margin-right: 7px; padding: 2px 6px; color: #0b1c16; font-size: .72rem; font-weight: 800; border-radius: 999px; background: var(--theme-accent, var(--pink)); }
.fullscreen-lock-button[data-lock-state="locked"] span:last-child { color: var(--theme-accent, var(--pink-2)); font-weight: 800; }
.fullscreen-lock-button[data-lock-state="unlocked"] span:last-child { color: #fff; }