body.view-live { height:100dvh; overflow:hidden; }
body.view-live #app { height:100%; min-height:0; }
body.view-live .app-body { flex:1; min-height:0; padding:0; overflow:hidden; }
.live-page { flex:1; width:100%; min-width:0; min-height:0; margin:0; background:var(--bg-color); color:var(--text-color); overflow:hidden; }
.live-page *, .live-settings * { box-sizing:border-box; }
.live-page [hidden], .live-settings [hidden] { display:none !important; }
.live-page a { color:var(--accent-color); text-decoration:none; }
.live-page button, .live-page input, .live-page textarea, .live-page select, .live-settings input { font:inherit; }
.live-page button, .live-page .live-primary { min-height:42px; cursor:pointer; }
.live-page button:disabled { opacity:.5; cursor:not-allowed; }
.live-page button:focus-visible, .live-page a:focus-visible, .live-page input:focus-visible, .live-page textarea:focus-visible, .live-page summary:focus-visible { outline:2px solid var(--accent-color); outline-offset:3px; }
.live-room-actions { display:flex; align-items:center; gap:14px; }
.live-shell { display:grid; grid-template-columns:260px minmax(0,1fr); height:100%; width:100%; }
.live-directory { min-height:0; overflow-y:auto; padding:20px 14px; border-right:1px solid var(--border-color); background:var(--panel-color); }
.live-directory-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 8px 16px; }
.live-directory h2 { font-size:17px; margin:0; }
.live-page .live-directory-toggle { display:inline-flex; align-items:center; justify-content:center; width:28px; min-height:28px; padding:0; border:1px solid transparent; border-radius:7px; background:transparent; color:var(--muted-color); font-size:24px; line-height:1; box-shadow:none; transform:none; }
.live-page .live-directory-toggle:hover { border-color:var(--border-color); background:var(--field-color); color:var(--text-color); transform:none; }
.live-my-room { width:100%; text-align:left; padding:11px 12px; border:1px solid var(--border-color); border-radius:9px; color:var(--text-color); background:transparent; font-weight:650 !important; }
.live-my-room.is-selected { color:var(--accent-color); border-color:var(--accent-color); background:#38bdf80d; }
.live-main { min-width:0; min-height:0; overflow-y:auto; padding:20px; }
.live-room-list { display:flex; flex-direction:column; gap:6px; }
.live-room-link { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:6px 8px; padding:12px 9px; border:1px solid transparent; border-radius:9px; }
.live-room-link:hover { background:var(--field-color); }
.live-room-link[aria-current="page"] { border-color:var(--accent-color); background:#38bdf80d; }
.live-room-link.is-official { border-color:#facc15; }
.live-room-label { min-width:0; }
.live-room-label strong { display:block; color:var(--text-color); font-size:13px; line-height:1.6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.live-room-label small { display:block; color:var(--muted-color); font-size:11px; margin-top:5px; overflow-wrap:anywhere; }
.live-room-elapsed { justify-self:end; font-size:11px; color:var(--muted-color); white-space:nowrap; }
.live-room-viewers { color:var(--muted-color); font-size:11px; white-space:nowrap; }
.live-room-owner { justify-self:end; min-width:0; max-width:100px; color:var(--muted-color); font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:right; }
.live-room-elapsed.is-live { color:var(--accent-color); font-variant-numeric:tabular-nums; }
.live-list-empty { font-size:12px; padding:16px 8px; color:var(--muted-color); }
.live-eyebrow { color:var(--accent-color); font-size:11px; letter-spacing:2px; font-weight:700; margin:0 0 12px; }
.live-muted { color:var(--muted-color); font-size:13px; line-height:1.7; }
.live-primary { background:var(--accent-color); color:#082032 !important; border:0; border-radius:10px; padding:11px 18px; font-weight:700 !important; display:inline-flex; justify-content:center; align-items:center; gap:8px; }
.live-danger { border:1px solid #f8717155; background:#f8717112; color:var(--danger-color); border-radius:9px; padding:9px 13px; }
.live-page input, .live-page textarea, .live-page select, .live-settings input { border:1px solid var(--border-color); border-radius:8px; padding:11px 12px; color:var(--text-color); background:var(--field-color); width:100%; min-width:0; }
.live-page label { display:flex; flex-direction:column; gap:8px; font-size:13px; margin:16px 0; }
.live-pill { display:inline-flex; width:fit-content; align-items:center; gap:6px; font-size:10px; font-weight:750; letter-spacing:.8px; padding:5px 9px; border:1px solid #94a3b83d; border-radius:6px; color:#cbd5e1; background:#0f172ab3; }
.live-pill.is-live { background:#f8717120; border-color:#f871714f; color:#fca5a5; }
.live-pill.is-live:before { content:''; width:5px; height:5px; background:currentColor; border-radius:50%; }
.live-empty { grid-column:1/-1; text-align:center; padding:80px 25px; border:1px dashed var(--border-color); border-radius:16px; }
.live-empty-icon { font-size:48px; color:var(--accent-color); }
.live-empty h1, .live-empty h2 { margin:18px 0 10px; font-size:24px; }
.live-empty p { color:var(--muted-color); font-size:14px; line-height:1.8; }
.live-empty .live-primary { margin:16px 5px; }
.live-room-heading { display:flex; justify-content:flex-end; gap:12px; margin-bottom:22px; }
.live-room-controls { display:contents; }
.live-mobile-heading, .live-mobile-title, .live-page .live-mobile-options { display:none; }
#live-preview-join { width:100%; margin:0; }
#live-room.is-preview .live-chat-compose { display:none; }
.live-chat-header, #live-chat-form { flex-shrink:0; }
.live-watch-layout { --live-chat-width:300px; display:grid; grid-template-columns:minmax(0,1fr) 18px minmax(260px,var(--live-chat-width)); gap:0; align-items:start; }
.live-layout-resizer { position:relative; min-width:18px; cursor:col-resize; touch-action:none; user-select:none; outline:none; }
.live-layout-resizer::before { content:''; position:absolute; top:0; bottom:0; left:8px; width:2px; border-radius:2px; background:var(--border-color); transition:background-color .15s,width .15s; }
.live-layout-resizer:hover::before, .live-layout-resizer:focus-visible::before { width:3px; background:var(--accent-color); }
.live-page.is-layout-resizing, .live-page.is-layout-resizing * { cursor:col-resize !important; user-select:none; }
.live-preview-hint { color:var(--muted-color); font-size:13px; line-height:1.7; margin:0 0 14px; }
.live-stage-column { min-width:0; }
.live-stage { aspect-ratio:16/9; position:relative; background:#050b14; border-radius:16px; overflow:hidden; border:1px solid #94a3b826; }
.live-stage video { display:block; width:100%; height:100%; object-fit:contain; }
.live-last-frame { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#050b14; pointer-events:none; }
.live-buffering { position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; }
.live-buffering-spinner { width:46px; height:46px; border:4px solid #ffffff40; border-top-color:#fff; border-radius:50%; background:#050b1433; box-shadow:0 0 0 8px #050b1433; animation:live-buffering-spin .85s linear infinite; }
@keyframes live-buffering-spin { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { .live-buffering-spinner { animation-duration:2.5s; } }
.live-player-controls { position:absolute; bottom:0; left:0; right:0; display:flex; align-items:center; gap:6px; padding:16px 10px 6px; background:linear-gradient(transparent,#000b); color:#fff; }
.live-page .live-player-controls button { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; min-height:38px; padding:0; border:0; border-radius:7px; background:transparent; color:#fff; box-shadow:none; transform:none; }
.live-page .live-player-controls button:hover { background:#ffffff20; transform:none; }
.live-page #live-volume { width:90px; height:30px; margin:0; padding:0; border:0; background:transparent; accent-color:#38bdf8; cursor:pointer; }
#live-fullscreen { margin-left:auto; }
.live-volume-off, .is-muted .live-volume-waves { display:none; }
.is-muted .live-volume-off { display:block; }
.live-stage:fullscreen { width:100vw; height:100dvh; max-height:none; border:0; border-radius:0; aspect-ratio:auto; }
.live-stage:-webkit-full-screen { width:100vw; height:100dvh; max-height:none; border:0; border-radius:0; aspect-ratio:auto; }
#live-video::-webkit-media-controls-timeline, #live-video::-webkit-media-controls-current-time-display,
#live-video::-webkit-media-controls-time-remaining-display, #live-video::-webkit-media-controls-play-button { display:none !important; }
.live-waiting { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; background:radial-gradient(ellipse at 50% 40%,#16354c70,transparent 62%) #050b14; color:#e2e8f0; padding:20px; text-align:center; }
.live-waiting-orbit { font-size:47px; color:#38bdf8; text-shadow:0 0 45px #38bdf855; margin-bottom:14px; }
.live-waiting h2 { font-size:23px; letter-spacing:-.5px; margin:16px 0 7px; }
.live-waiting p { color:#94a3b8; font-size:13px; line-height:1.8; margin:0; }
#live-play { position:absolute; inset:0; margin:auto; width:max-content; height:max-content; transform:none; background:#38bdf8; color:#082032; border:0; border-radius:30px; padding:12px 20px; transition:background-color .2s,box-shadow .2s; }
#live-play:hover, #live-play:focus-visible, #live-play:active { transform:none; }
.live-stream-info { padding:23px 0; }
.live-info-line { display:flex; align-items:center; gap:12px; }
.live-page #live-share { margin-left:auto; display:inline-flex; align-items:center; justify-content:center; gap:5px; flex-shrink:0; min-height:36px; padding:6px 9px; font-size:12px; }
#live-share svg { flex-shrink:0; }
.live-stream-info h1 { font-size:25px; line-height:1.4; margin:12px 0 8px; overflow-wrap:anywhere; }
.live-stream-info p { margin:4px 0; }
.live-page .live-official-label { display:block; color:#facc15; font-size:11px; font-weight:700; line-height:1.3; text-align:right; white-space:nowrap; }
.live-stream-info #live-owner.live-official-label { margin:-3px 0 4px; }
.live-card { border:1px solid var(--border-color); background:var(--panel-color); border-radius:14px; padding:24px; margin-bottom:20px; }
.live-card h2 { margin:0; font-size:21px; }
.live-card h3 { margin:0 0 14px; font-size:17px; }
.live-studio-heading { display:flex; align-items:center; gap:10px; }
.live-studio-heading > div { flex:1; }
.live-studio-heading .live-eyebrow { margin-bottom:7px; }
.live-copy-field { display:flex; gap:6px; }
.live-copy-field input { font-family:monospace; font-size:12px; }
.live-copy-field button { flex-shrink:0; }
.live-guide { margin-top:22px; border-top:1px solid var(--border-color); padding-top:19px; font-size:13px; line-height:1.8; }
.live-guide summary { cursor:pointer; font-weight:650; }
.live-guide ol { padding-left:23px; }
.live-guide li { padding:8px 0; }
.live-guide li::marker { color:var(--accent-color); font-weight:700; }
.live-guide p { color:var(--muted-color); margin:5px 0 8px; }
.live-chat { border:1px solid var(--border-color); border-radius:14px; background:var(--panel-color); height:min(760px,calc(100dvh - 140px)); min-height:430px; display:flex; flex-direction:column; overflow:hidden; position:sticky; top:20px; }
.live-chat-header { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; padding:12px; border-bottom:1px solid var(--border-color); gap:6px; }
.live-chat-header h2 { font-size:14px; margin:0; }
.live-chat-header span { font-size:11px; }
.live-messages { overflow-y:auto; flex:1; min-height:0; padding:10px 12px; overscroll-behavior:contain; }
.live-chat-welcome { font-size:12px; color:var(--muted-color); text-align:center; padding:15px 8px; background:var(--field-color); border-radius:8px; }
.live-message-item { position:relative; margin:0 0 4px; font-size:13px; line-height:1.5; overflow-wrap:anywhere; }
.live-message-name { font-size:12px !important; font-weight:650; color:var(--accent-color); }
.live-page .live-message-name { color:var(--live-name-color) !important; }
.live-message-name--nickname { --live-name-color:#9ca3af; --gift-name-highlight:#d1d5db; --gift-name-glow:#9ca3af66; font-weight:500; }
.live-message-name--character { --live-name-color:#38bdf8; --gift-name-highlight:#bae6fd; --gift-name-glow:#38bdf899; font-weight:800; }
.live-message-name--host { --live-name-color:#facc15; --gift-name-highlight:#fef08a; --gift-name-glow:#facc1599; font-weight:800; }
.live-message-name { --gift-name-color:var(--live-name-color); }
.live-host-medal { display:inline-block; margin-right:4px; font-size:14px; line-height:1; }
button.live-message-name { display:inline; min-height:0 !important; padding:0; border:0; border-radius:0; background:none; line-height:inherit; vertical-align:baseline; text-align:left; transition:none; }
button.live-message-name:hover, button.live-message-name:focus { transform:none; box-shadow:none; background:none; }
.live-message-item:not(.live-gift-message) > .live-message-name::after { content:':'; }
button.live-message-name:disabled { opacity:1; cursor:default; }
.live-managers-panel { margin-top:22px; border-top:1px solid var(--border-color); padding-top:18px; }
.live-chat-freeze-controls { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; border-top:1px solid var(--border-color); padding-top:16px; margin-top:16px; }
.live-chat-freeze-controls p { margin:0; font-size:13px; }
.live-chat-freeze-controls button { flex-shrink:0; }
.live-freeze-buttons { display:flex; gap:8px; flex-wrap:wrap; }
.live-page .live-chat-tabs { display:flex; align-items:center; gap:6px; }
.live-page .live-chat-tabs button { min-height:32px; padding:5px 10px; border:0; border-bottom:2px solid transparent; border-radius:0; background:transparent; color:var(--muted-color); font-size:13px; box-shadow:none; transform:none; }
.live-page .live-chat-tabs button[aria-selected="true"] { color:var(--text-color); border-bottom-color:var(--accent-color); font-weight:700; }
.live-ranking-panel { flex:1; min-height:0; padding:12px; overflow-y:auto; overscroll-behavior:contain; }
.live-ranking-panel p { margin:0 0 12px; font-size:11px; line-height:1.6; }
.live-ranking-table { width:100%; border-collapse:collapse; table-layout:fixed; font-size:13px; }
.live-ranking-table th { padding:0 0 8px; color:var(--muted-color); font-size:11px; font-weight:500; text-align:left; }
.live-ranking-table th:first-child { width:36px; }
.live-ranking-table th:last-child { width:90px; text-align:right; }
.live-ranking-table td { padding:12px 0; border-top:1px solid var(--border-color); }
.live-ranking-rank { color:var(--muted-color); font-weight:700; font-variant-numeric:tabular-nums; }
.live-ranking-table tr:nth-child(-n+3) .live-ranking-rank { color:var(--accent-color); }
.live-ranking-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.live-ranking-table .live-ranking-name { padding-right:8px; }
.live-ranking-minutes { text-align:right; white-space:nowrap; font-weight:650; font-variant-numeric:tabular-nums; }
.live-ranking-table .is-self { background:var(--field-color); }
#live-ranking-status { margin:12px 0 0; }
.live-viewer-tab-counts { display:inline-flex; align-items:center; gap:4px; margin-left:3px; font-size:10px; font-weight:700; font-variant-numeric:tabular-nums; vertical-align:middle; }
.live-viewer-tab-count { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 4px; border-radius:999px; color:currentColor; line-height:1; }
.live-viewer-tab-count--active { background:rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.16); }
.live-viewer-tab-count--total { background:rgba(2,6,23,.82); color:#e2e8f0; }
#live-send-enter, #live-send-lock { display:inline-flex; }
.live-page .live-chat #live-viewers-panel { flex:1; min-height:0; max-height:none; overflow-y:auto; }
.live-page .live-viewer-user { min-height:0; max-width:100%; margin:0; padding:0; border:0; border-radius:0; background:none; box-shadow:none; transform:none; color:var(--live-name-color); font-size:13px; line-height:1.6; text-align:left; overflow-wrap:anywhere; }
.live-page button.live-viewer-user:hover, .live-page button.live-viewer-user:focus { background:none; box-shadow:none; transform:none; text-decoration:underline; }
.live-page .live-viewer-user--departed { color:var(--muted-color); }
.live-manager-row, .live-restriction-row { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:13px; overflow-wrap:anywhere; }
.live-manager-row + .live-manager-row, .live-restriction-row + .live-restriction-row { border-top:1px solid var(--border-color); }
.live-user-actions { display:grid; gap:8px; }
#live-user-error:empty { display:none; }
.live-restrictions { padding:12px; border-top:1px solid var(--border-color); font-size:12px; max-height:180px; overflow:auto; flex-shrink:0; }
.live-restrictions summary { cursor:pointer; margin-bottom:8px; }
.live-restriction-row > div { display:flex; gap:4px; flex-wrap:wrap; justify-content:flex-end; }
.live-restriction-row button { font-size:11px; padding:6px; }
.live-message-item--deletable { padding-right:24px; }
.live-page .live-message-item > .live-message-delete { position:absolute; top:0; right:0; min-height:22px; height:22px; width:22px; line-height:22px; font-size:18px; }
.live-page .live-message-delete { min-height:32px; width:32px; flex-shrink:0; padding:0; border:0; border-radius:6px; background:transparent; color:var(--muted-color); font-size:22px; }
.live-page .live-message-delete:hover { color:var(--danger-color); background:#f8717120; }
.live-moderation-delete { border-top:1px solid var(--border-color); margin-top:24px; padding-top:18px; }
.live-moderation-delete h3 { font-size:16px; margin:0 0 8px; }
#live-mute-form { display:block; }
#live-mute-form > .live-muted { margin:14px 0; }
#live-mute-form label { margin:12px 0; }
#live-mute-form button[type='submit'], #live-delete-user { width:100%; }
#live-mute-error:empty, #live-delete-user-error:empty { display:none; }
.live-message-body { display:inline; margin:0; line-height:inherit; white-space:pre-wrap; }
#live-chat-form { display:block; position:relative; margin:0; gap:0; border-top:1px solid var(--border-color); padding:15px; }
.live-gift-popup { position:absolute; bottom:calc(100% + 8px); right:8px; left:8px; padding:14px; max-height:var(--live-gift-max-height,60dvh); overflow-y:auto; border:1px solid var(--border-color); border-radius:12px; background:var(--panel-color); box-shadow:0 12px 32px #0006; z-index:10; }
.live-gift-popup-heading { display:flex; align-items:center; justify-content:space-between; }
#live-gift-close { padding:0; width:30px; height:30px; min-height:30px; background:transparent; color:var(--text-color); font-size:22px; }
#live-gift-balance { display:flex; align-items:center; justify-content:flex-end; gap:5px; margin:10px 0 0; font-size:13px; font-weight:700; color:#facc15; }
#live-gift-balance img { width:18px; height:18px; flex:0 0 18px; object-fit:contain; }
#live-gift-balance-value { min-width:0; overflow-wrap:anywhere; }
.live-gift-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin-top:8px; }
.live-gift-option { padding:9px 3px; font-size:12px; background:transparent; border:1px solid var(--border-color); color:var(--text-color); }
.live-gift-option .live-gift-option-art { display:block; width:48px; height:48px; object-fit:contain; font-size:30px; line-height:48px; margin:0 auto 4px; }
.live-gift-option .live-gift-option-name { display:block; font-size:12px; line-height:1.4; }
.live-gift-option-cost { display:flex; align-items:center; justify-content:center; gap:4px; margin-top:4px; font-size:11px; font-weight:700; color:#facc15; }
.live-gift-option-cost img { width:14px; height:14px; flex-shrink:0; object-fit:contain; }
.live-gift-option[aria-pressed=true] { border-color:#facc15; background:#facc151a; }
#live-gift-send { width:100%; font-size:13px; margin-top:8px; padding:10px; }
#live-gift-error { font-size:12px; margin:8px 0; }
#live-gift-error:empty { display:none; }
.live-gift-message { border:1px solid #facc154d; border-radius:9px; background:#facc150b; padding:6px 8px; }
.live-gift-message.live-message-item--deletable { padding-right:28px; }
.live-gift-message .live-message-body { display:flex; align-items:center; gap:8px; white-space:normal; }
.live-gift-message-icon { font-size:26px; line-height:1.2; flex-shrink:0; }
img.live-gift-message-icon { width:44px; height:44px; object-fit:contain; }
.live-gift-message[data-gift="crown50"] img.live-gift-message-icon { width:64px; height:64px; }
.live-gift-message[data-gift="phoenix100"] img.live-gift-message-icon { width:88px; height:88px; }
.live-gift-name { color:#facc15; }
#live-chat-hint { margin:0 0 8px; font-size:11px; }
#live-chat-hint:empty { display:none; }
#live-message { resize:none; display:block; font-size:13px; }
.live-chat-compose { display:flex; align-items:center; gap:8px; }
.live-chat-compose #live-message { flex:1; min-width:0; min-height:40px; padding:10px; line-height:20px; }
.live-page .live-chat-send { width:34px; height:34px; min-height:34px; flex:0 0 34px; padding:0; border-radius:8px; }
.live-notice { position:fixed; top:var(--live-notice-top,12px); left:50%; transform:translateX(-50%); z-index:100; width:max-content; max-width:calc(100vw - 24px); margin:0; padding:10px 16px; border:1px solid #38bdf845; border-radius:9px; font-size:13px; line-height:1.5; overflow-wrap:anywhere; background:var(--panel-color); box-shadow:0 6px 24px #0005; pointer-events:none; }
.live-notice.is-error { border-color:#f8717180; }
.is-error { color:var(--danger-color) !important; }
.live-dialog { width:min(520px,calc(100vw - 28px)); max-height:90dvh; overflow:auto; border:1px solid var(--border-color); border-radius:18px; padding:28px; color:var(--text-color); background:var(--panel-color); }
.live-dialog::backdrop { background:#020617bb; backdrop-filter:blur(5px); }
.live-dialog-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.live-dialog h2 { font-size:22px; margin:0; }
.live-dialog fieldset { border:0; padding:0; margin:22px 0 0; }
.live-dialog legend { font-size:13px; }
#live-create-form { display:block; }
#live-create-form > label { margin-top:16px; }
#live-create-form fieldset { display:grid; gap:8px; margin-top:18px; }
#live-create-form legend { margin-bottom:8px; }
#live-create-form .live-choice { margin:0; padding:11px; }
#live-create-form .live-access-note { font-size:12px; line-height:1.7; margin:16px 0; }
#live-create-form button[type=submit] { width:100%; }
#live-create-error:empty { display:none; }
.live-choice:has(input:disabled) { opacity:.5; }
.live-choice { display:flex !important; flex-direction:row !important; gap:13px !important; align-items:center; border:1px solid var(--border-color); border-radius:10px; padding:14px; }
.live-choice:has(input:checked) { border-color:var(--accent-color); background:#38bdf809; }
.live-choice input { width:17px; height:17px; accent-color:var(--accent-color); flex-shrink:0; }
.live-choice small, .live-dialog label > small { display:block; color:var(--muted-color); font-size:11px; line-height:1.6; margin-top:4px; }
.live-settings { max-width:920px; }
.live-settings h2 { margin:0 0 8px; }
.live-settings-switches { padding:8px 22px; margin-top:25px; }
.live-switch-row, .live-level-setting, .live-mute-row { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:19px 0; border-bottom:1px solid var(--border-color); }
.live-settings .live-switch-row, .live-settings .live-level-setting { flex-direction:row; text-align:left; }
.live-settings .live-switch-row > span, .live-settings .live-level-setting > span { flex:1; }
.live-switch-row small, .live-level-setting small, .live-mute-row small { display:block; color:var(--muted-color); font-size:12px; line-height:1.7; margin-top:5px; }
.live-switch-row input { width:20px; height:20px; accent-color:var(--accent-color); flex-shrink:0; }
.live-level-setting { border:0; }
.live-level-setting input { width:80px; flex-shrink:0; }
.live-label-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.live-reward-grid > label:first-child { grid-column:1/-1; }
.live-label-grid label { display:flex; flex-direction:column; gap:8px; font-size:13px; }
.live-settings form > button { margin-bottom:28px; }
.live-mute-row button { flex-shrink:0; }
@media(min-width:1600px) { .live-watch-layout { --live-chat-width:360px; } }
/* Desktop chat fills the space remaining below the existing header. */
@media(min-width:901px) {
  body.view-live .app-header { flex-shrink:0; }
  .live-shell { grid-template-rows:minmax(0,1fr); }
  .live-main { display:flex; flex-direction:column; overflow:hidden; padding-bottom:max(12px,env(safe-area-inset-bottom)); }
  .live-room-heading:not(.has-controls) { display:none; }
  #live-room { display:flex; flex-direction:column; flex:1; min-height:0; }
  .live-room-heading, .live-preview-hint { flex-shrink:0; }
  .live-watch-layout { flex:1; min-height:0; grid-template-rows:minmax(0,1fr); align-items:stretch; }
  .live-stage-column { min-height:0; overflow-y:auto; overscroll-behavior:contain; }
  .live-chat { position:relative; top:auto; height:auto; min-height:0; max-height:100%; align-self:stretch; }
  .live-chat-header { padding:12px 16px; }
  #live-chat-form { padding:8px 10px; }
  #live-chat-hint:empty { display:none; }
  .live-chat .live-viewers-panel, .live-chat .live-restrictions { max-height:20%; }
  .live-shell.is-directory-collapsed { grid-template-columns:44px minmax(0,1fr); }
  .live-shell.is-directory-collapsed .live-directory { padding:12px 4px; overflow:hidden; }
  .live-shell.is-directory-collapsed .live-directory-heading { justify-content:center; margin:0; }
  .live-shell.is-directory-collapsed .live-directory h2,
  .live-shell.is-directory-collapsed .live-directory > :not(.live-directory-heading) { display:none; }
}
@media(min-width:901px) and (max-width:1100px) {
  .live-shell { grid-template-columns:180px minmax(0,1fr); }
  .live-watch-layout { --live-chat-width:280px; }
  .live-main { padding:12px 12px max(12px,env(safe-area-inset-bottom)); }
}
@media(max-width:900px) {
  .live-shell { grid-template-columns:220px minmax(0,1fr); }
  .live-watch-layout { display:flex; flex-direction:column; gap:20px; } .live-stage-column,.live-chat { width:100%; } .live-chat { position:static; height:470px; min-height:360px; }
  .live-layout-resizer, .live-directory-toggle { display:none !important; }
  .live-directory-heading { display:contents; }
  .live-stage-column { display:contents; }
  .live-stage { width:100%; order:0; flex-shrink:0; position:sticky; top:0; z-index:5; }
  .live-stream-info { order:1; padding:0; }
  .live-chat { order:2; }
  #live-studio { order:3; width:100%; scroll-margin-top:240px; }
  #live-room.is-preparing #live-studio { order:2; }
  #live-room.is-preparing .live-chat { order:3; }
  .live-stage { border-radius:11px; } .live-waiting-orbit { font-size:30px; margin-bottom:6px; } .live-waiting h2 { font-size:18px; margin:9px 0 4px; } .live-waiting p { font-size:11px; } .live-waiting .live-pill { font-size:9px; padding:3px 7px; }
  .live-stream-info h1 { font-size:21px; } .live-card { padding:19px; } .live-room-heading { margin-bottom:15px; } .live-room-actions { gap:7px; } .live-room-heading button { font-size:12px; padding:8px 10px; }
  .live-dialog { padding:22px; } .live-studio-heading { flex-wrap:wrap; } .live-studio-heading button { font-size:12px; } .live-label-grid { grid-template-columns:1fr; } .live-settings-switches { padding:0 16px; }
}
@media(max-width:760px) {
  .live-shell { grid-template-columns:112px minmax(0,1fr); }
  .live-directory { padding:14px 6px; }
  .live-directory h2 { margin:0 6px 12px; font-size:15px; }
  .live-my-room { padding:8px; font-size:12px !important; }
  .live-directory input { padding:9px 6px; font-size:11px; }
  .live-room-link { grid-template-columns:minmax(0,1fr) auto; padding:10px 6px; gap:5px; }
  .live-room-label strong { font-size:12px; }
  .live-room-label small { font-size:10px; }
  .live-room-elapsed { justify-self:end; }
  .live-main { padding:10px 8px max(20px,env(safe-area-inset-bottom)); }
  .live-room-heading, .live-room-actions { flex-wrap:wrap; }
  .live-watch-layout { gap:12px; }
  .live-waiting { padding:8px; }
  .live-waiting-orbit, .live-waiting .live-pill { display:none; }
  .live-waiting h2 { font-size:15px; margin:4px 0; }
  .live-waiting p { font-size:10px; line-height:1.5; }
  .live-stream-info h1 { font-size:18px; }
  .live-card { padding:12px; }
  .live-studio-heading > div { flex-basis:100%; }
  .live-copy-field { flex-wrap:wrap; }
  .live-copy-field input { flex-basis:100%; }
  .live-chat-header, .live-messages, #live-chat-form { padding:10px; }
  .live-empty { padding:32px 12px; }
  .live-empty h1 { font-size:18px; }
}

/* On phones and narrow tablets, watch and chat first; select another room below. */
@media(max-width:900px) {
  body.view-live { height:var(--live-viewport-height, 100dvh); }
  body.view-live .app-header { flex-shrink:0; }
  .live-shell { display:flex; flex-direction:column; overflow-y:auto; overscroll-behavior:contain; }
  .live-main { order:0; flex:0 0 auto; width:100%; overflow:visible; padding:6px 8px 12px; }
  .live-directory { order:1; flex:0 0 auto; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; width:100%; overflow:visible; padding:12px 10px max(16px,env(safe-area-inset-bottom)); border-right:0; border-top:1px solid var(--border-color); }
  .live-directory h2 { align-self:center; margin:0; font-size:14px; }
  .live-my-room { width:auto; padding:8px 12px; font-size:13px !important; }
  #live-lobby-hint, .live-directory .live-room-list { grid-column:1/-1; margin:0; }
  .live-directory .live-room-list { flex-direction:column; overflow:visible; padding:2px 0 0; }
  .live-directory .live-room-link { flex:0 0 auto; width:100%; grid-template-columns:minmax(0,1fr) auto; gap:8px; padding:10px; }
  .live-room-label strong { font-size:13px; }
  .live-room-label small { margin-top:2px; font-size:11px; }
  .live-room-heading { position:relative; display:flex; align-items:center; flex-wrap:nowrap; gap:8px; margin:0 0 6px; min-height:38px; }
  .live-mobile-heading { display:flex; align-items:center; gap:8px; flex:1; min-width:0; }
  .live-mobile-title { display:block; flex:1; min-width:0; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:16px; line-height:1.4; }
  .live-mobile-heading .live-official-label { flex-shrink:0; }
  .live-page .live-mobile-options { display:inline-flex; align-items:center; justify-content:center; flex:0 0 40px; width:40px; min-height:40px; padding:0; font-size:22px; }
  .live-room-controls { display:none; position:absolute; top:calc(100% + 4px); right:0; z-index:20; min-width:180px; padding:8px; border:1px solid var(--border-color); border-radius:10px; background:var(--panel-color); box-shadow:0 8px 24px #0006; }
  .live-room-heading.is-options-open .live-room-controls { display:flex; flex-direction:column; gap:6px; }
  .live-room-controls .live-room-actions { display:flex; flex-direction:column; align-items:stretch; gap:6px; }
  .live-room-controls button { width:100%; min-height:42px; }
  #live-preview-hint, .live-stream-info #live-title, .live-stream-info #live-owner, #live-scope { display:none; }
  .live-watch-layout { display:flex; flex-direction:column; gap:6px; }
  .live-stage-column { display:contents; }
  .live-stage { order:0; position:relative; top:auto; z-index:auto; width:100%; height:var(--live-stage-height, min(56.25vw,36dvh)); aspect-ratio:auto; flex-shrink:0; border-radius:9px; }
  .live-stream-info { order:1; padding:0; }
  .live-stream-info { width:100%; }
  .live-info-line { min-height:36px; gap:8px; }
  .live-info-line .live-pill { padding:3px 7px; }
  #live-audience { font-size:12px; }
  .live-chat, #live-room.is-preparing .live-chat { order:2; position:relative; top:auto; width:100%; height:var(--live-chat-height, 42dvh); min-height:0; flex-shrink:0; border-radius:10px; }
  .live-chat-header { min-height:30px; padding:5px 10px; }
  .live-chat-header h2 { font-size:13px; }
  .live-messages { padding:6px 10px; }
  .live-message-item { font-size:14px; }
  .live-page .live-message-name { font-size:13px !important; }
  #live-chat-form { padding:6px 8px max(6px,env(safe-area-inset-bottom)); }
  .live-chat-compose { gap:6px; }
  .live-page input, .live-page textarea, .live-page select { font-size:16px; }
  .live-chat-compose #live-message { font-size:16px; min-height:44px; line-height:22px; padding:10px; }
  .live-page .live-chat-send { width:44px; height:44px; min-height:44px; flex-basis:44px; }
  .live-gift-popup { position:fixed; left:8px; right:8px; bottom:calc(var(--live-viewport-bottom,0px) + env(safe-area-inset-bottom) + 8px); z-index:80; max-height:calc(var(--live-viewport-height,100dvh) - 24px); overflow-y:auto; overscroll-behavior:contain; }
  .live-gift-option { min-height:64px; }
  .live-page #live-gift-close { width:40px; height:40px; min-height:40px; }
  .live-restrictions { max-height:90px; }
  #live-studio, #live-room.is-preparing #live-studio { order:3; width:100%; margin:6px 0 0; scroll-margin-top:12px; }
  .live-empty { padding:22px 12px; }
  .live-empty h1 { font-size:18px; margin:0; }
  .live-notice { padding:8px 10px; }
}
.live-join-notice { padding:5px 0; text-align:center; color:#94a3b8; font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
.live-viewers-panel { flex-shrink:0; padding:8px 14px; border-bottom:1px solid #334155; font-size:13px; max-height:150px; overflow-y:auto; }
.live-viewers-panel summary { cursor:pointer; }
.live-viewers-panel p { margin:6px 0; font-size:11px; }
#live-viewers { display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:4px 0; }