.web-app .web-live-room { overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#ffffff55 #101725; }
.web-app .web-live-room .web-live-video { width:100%; height:100%; object-fit:cover; background:#101725; }
.web-app .web-live-room .live-stage-space { min-height:calc(var(--web-live-controls-height,104px) + 16px); flex-shrink:0; }
.web-app .web-live-room .live-bottom { flex:0 0 auto; }
.web-app .web-live-room .web-live-player-controls { position:absolute; z-index:3; inset:var(--web-live-controls-top,120px) 12px auto; color:#fff; pointer-events:auto; }
.web-live-control-row { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.web-app .web-live-control { display:inline-flex; align-items:center; justify-content:center; gap:5px; min-height:48px; min-width:48px; padding:8px 10px; color:#fff; border:1px solid #ffffff2e; border-radius:12px; background:#101829ba; backdrop-filter:blur(10px); font-size:calc(12px * var(--font-scale,1)); line-height:1.4; white-space:normal; }
.web-app .web-live-control .icon { width:17px; height:17px; flex-shrink:0; }
.web-app .web-live-control:hover:not(:disabled) { background:#253853ed; border-color:#ffffff7d; }
.web-app .web-live-control:focus-visible,.web-app .web-live-seek:focus-visible,.web-app .web-live-retry:focus-visible { outline:3px solid #bfdbff; outline-offset:3px; }
.web-app .web-live-control:disabled { cursor:default; opacity:.75; }
.web-live-loop-note { width:fit-content; margin:6px 0 0; padding:4px 8px; border-radius:6px; background:#0e172699; color:#edf4ff; font-size:calc(11px * var(--font-scale,1)); line-height:1.5; }
.web-live-replay-progress { display:flex; align-items:center; gap:8px; min-height:48px; margin-top:6px; padding:0 9px; border:1px solid #ffffff20; border-radius:12px; background:#101829d9; }
.web-app .web-live-seek { display:block; flex:1; width:100%; min-width:0; min-height:48px; margin:0; padding:0; border:0; accent-color:#b4ceff; cursor:pointer; }
.web-live-time { flex-shrink:0; color:#fff; font-size:calc(11px * var(--font-scale,1)); font-variant-numeric:tabular-nums; white-space:nowrap; }
.web-live-status { position:relative; width:fit-content; max-width:100%; margin:8px 0 0; padding:10px 14px; border:1px solid #ffffff27; border-radius:14px; background:#0e142be6; color:#fff; font-size:calc(13px * var(--font-scale,1)); line-height:1.6; text-align:center; pointer-events:none; }
.web-live-status[hidden] { display:none; }
.web-live-status.has-error { pointer-events:auto; }
.web-live-status-text { display:block; }
.web-app .web-live-retry { min-height:48px; min-width:88px; margin-top:8px; padding:8px 16px; border-radius:10px; background:#e9f0ff; color:#163884; font-size:calc(13px * var(--font-scale,1)); font-weight:600; }
.web-live-retry[hidden] { display:none; }
.web-app .web-live-room.is-clean .web-live-player-controls { inset:auto 12px 16px; }
.web-app .web-live-room.is-clean { overflow:hidden; }
.web-app .web-live-room.is-clean .live-stage-space { min-height:0; }
.web-app .web-live-settings .web-live-control { min-height:76px; flex-direction:column; font-size:calc(14px * var(--font-scale,1)); }
.web-app .web-live-settings .web-live-control .icon { width:24px; height:24px; }
.web-app .web-live-room .live-room-demo { line-height:1.5; flex-wrap:wrap; }
.web-app.font-large .web-live-room .live-chat { max-height:80px; }
:root:fullscreen .web-app.live-room-mode .web-sidebar,:root:fullscreen .web-app.live-room-mode .web-topbar,:root:fullscreen .web-app.live-room-mode .web-mobile-nav { display:none; }
:root:fullscreen .web-app.live-room-mode .web-shell { display:block; height:100dvh; }
:root:fullscreen .web-app.live-room-mode .web-main { margin:0; width:100%; height:100dvh; }
:root:fullscreen .web-app.live-room-mode .phone.live-room-shell { height:100dvh; width:100%; border-radius:0; }
:root:fullscreen .web-app.live-room-mode .phone.live-room-shell .page[data-page="live-room"] { padding:0; }
:root:fullscreen .web-app.live-room-mode .phone.live-room-shell .web-live-room { height:100dvh; max-height:none; border-radius:0; aspect-ratio:9 / 16; width:auto; }
@media (max-width:480px) {
  .web-app .web-live-room .web-live-player-controls { left:10px; right:10px; }
  .web-app .web-live-control { padding:7px 8px; }
  .web-live-time { font-size:calc(10px * var(--font-scale,1)); }
  .web-app.font-large .web-live-room .web-live-control { padding:6px; font-size:calc(11px * var(--font-scale,1)); }
}