:root { --live-bg: #090a0c; --live-panel: #111318; --live-line: #282b31; --live-text: #f5f1e9; --live-muted: #9c9a96; --live-accent: #ff5d3a; }
body.live-room { min-height: 100vh; background: radial-gradient(circle at 35% 10%, #25201d 0, #0d0e11 34%, #07080a 80%); color: var(--live-text); }
.broadcast-shell { width: min(1480px, calc(100% - 40px)); margin: 0 auto; padding: 22px 0 48px; }
.broadcast-header, .brand-block, .broadcast-meta, .stage-footer, .operator-heading, .chat-heading { display: flex; align-items: center; }
.broadcast-header { justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.brand-block { gap: 14px; } .brand-kicker, .operator-heading p, .chat-heading p { margin: 0 0 4px; color: var(--live-muted); font: 700 11px/1.2 "DM Mono", monospace; letter-spacing: .14em; text-transform: uppercase; }
.brand-block h1 { font-size: clamp(20px, 2.5vw, 34px); } .live-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--live-accent); box-shadow: 0 0 0 6px rgb(255 93 58 / 12%), 0 0 24px var(--live-accent); animation: livePulse 1.8s infinite; }
.broadcast-meta { justify-content: flex-end; flex-wrap: wrap; gap: 10px; color: var(--live-muted); font-size: 12px; } .broadcast-meta a { color: #d7d4cd; }
.broadcast-meta .status-pill { border-color: #363a42; background: #15171c; color: #d8d5ce; }
.broadcast-notice { border-left-color: #72d69a; background: #14251e; color: #dff4e7; }
.broadcast-grid { display: grid; grid-template-columns: minmax(0, 1fr) 370px; gap: 16px; }
.stage-panel, .chat-panel, .operator-panel, .diagnostics { border: 1px solid var(--live-line); background: rgb(17 19 24 / 92%); }
.stage-frame { position: relative; min-height: 660px; overflow: hidden; background: #050607; }
.stage-frame #remoteVideo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 2; }
.stage-frame #remoteVideo:not(.has-stream) { opacity: .42; pointer-events: none; }
.stage-placeholder { position: absolute; z-index: 3; inset: 0; display: grid; place-content: center; gap: 8px; text-align: center; color: #777; background: linear-gradient(rgb(5 6 7 / 22%), rgb(5 6 7 / 76%)); }
.stage-placeholder span { color: var(--live-accent); font: 700 12px "DM Mono", monospace; letter-spacing: .18em; text-transform: uppercase; } .stage-placeholder strong { color: #f5f1e9; font-size: clamp(34px, 6vw, 82px); } .stage-placeholder small { color: var(--live-muted); }
.stage-live-badge { position: absolute; z-index: 4; top: 18px; left: 18px; padding: 7px 10px; background: var(--live-accent); color: white; font: 800 11px "DM Mono", monospace; letter-spacing: .12em; }
.stage-caption { position: absolute; z-index: 4; left: 50%; bottom: 24px; transform: translateX(-50%); max-width: 78%; padding: 10px 15px; background: rgb(0 0 0 / 72%); color: white; text-align: center; font-size: 16px; }
.local-preview { position: absolute; z-index: 4; right: 18px; bottom: 18px; width: 150px; aspect-ratio: 16/10; object-fit: cover; border: 1px solid #555; background: #111; }
.local-preview:not(.has-stream) { display: none; }
.stage-footer { justify-content: space-between; gap: 16px; min-height: 64px; padding: 0 18px; color: var(--live-muted); font-size: 13px; border-top: 1px solid var(--live-line); }
.chat-panel { min-height: 724px; display: grid; grid-template-rows: auto 1fr auto; } .chat-heading { justify-content: space-between; padding: 20px; border-bottom: 1px solid var(--live-line); } .chat-heading h2, .operator-heading h2 { margin: 0; font-size: 22px; } .viewer-count { color: #72d69a; font-size: 12px; }
.chat-messages { margin: 0; padding: 18px; overflow-y: auto; list-style: none; display: flex; flex-direction: column; gap: 14px; } .system-message { color: var(--live-muted); font-size: 13px; line-height: 1.6; }
.chat-message { display: grid; gap: 5px; animation: messageIn .24s ease-out both; } .chat-message strong { color: #d8d4ca; font-size: 12px; } .chat-message span { width: fit-content; max-width: 92%; padding: 10px 12px; background: #1c1f25; color: #e9e6df; line-height: 1.5; } .chat-message.avatar span { background: #2a1a16; border-left: 2px solid var(--live-accent); }
.chat-composer { padding: 14px; border-top: 1px solid var(--live-line); } .chat-composer fieldset { display: grid; grid-template-columns: 1fr auto; gap: 10px; } .chat-composer textarea { min-height: 48px; resize: none; background: #0c0e12; border-color: #33363d; color: white; } .send-button { min-width: 84px; background: var(--live-accent); border-color: var(--live-accent); }
.audience-name { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; margin-bottom: 10px; color: var(--live-muted); font-size: 12px; } .audience-name input { min-width: 0; background: #0c0e12; border-color: #33363d; color: white; }
.sound-button { position: absolute; z-index: 5; right: 18px; top: 18px; background: rgb(0 0 0 / 76%); border-color: #5b5e65; color: white; }
.audience-room .broadcast-shell { padding-top: 28px; } .audience-room .stage-frame { min-height: 724px; } .audience-room #watchVideo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 2; } .audience-room #watchVideo:not(.has-stream) { opacity: .42; pointer-events: none; }
.operator-panel { margin-top: 16px; padding: 20px; } .operator-heading { justify-content: space-between; gap: 20px; margin-bottom: 18px; } .operator-heading > span { color: var(--live-muted); font-size: 12px; }
.operator-grid { display: grid; grid-template-columns: 1.25fr 1fr .7fr .7fr; gap: 14px; align-items: end; } .operator-grid label, .voice-zone { color: #c6c3bc; } .operator-grid input, .operator-grid select, .operator-grid textarea { background: #0c0e12; border-color: #34373e; color: white; }
.upload-zone { grid-row: span 2; } .upload-zone img { width: 100%; height: 180px; object-fit: contain; background: #08090b; border: 1px solid var(--live-line); } .voice-zone { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .voice-zone label:first-child, .voice-zone button, .voice-zone small { grid-column: 1/-1; } .voice-zone small { color: var(--live-muted); }
.persona-field { grid-column: 2 / span 3; } .compact-check { align-self: center; } .start-live-button { min-height: 48px; background: var(--live-accent); border-color: var(--live-accent); } .ghost-button { background: transparent; }
.knowledge-field { display: grid; grid-template-columns: 1fr auto; gap: 6px 8px; } .knowledge-field > span, .knowledge-field > small { grid-column: 1/-1; } .knowledge-field small { color: var(--live-muted); }
.diagnostics { margin-top: 12px; padding: 12px 16px; color: var(--live-muted); } .diag-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
body[data-live-state="已连接"] .stage-placeholder, body[data-live-state="Live"] .stage-placeholder { opacity: 0; transition: opacity .5s; }
.stage-frame > video.has-stream + .stage-placeholder { opacity: 0; pointer-events: none; transition: opacity .25s; }
@keyframes livePulse { 50% { opacity: .45; transform: scale(.82); } } @keyframes messageIn { from { opacity: 0; transform: translateY(8px); } }
@media (max-width: 1050px) { .broadcast-grid { grid-template-columns: 1fr; } .chat-panel { min-height: 520px; } .operator-grid { grid-template-columns: 1fr 1fr; } .persona-field { grid-column: 1/-1; } }
@media (max-width: 680px) { .broadcast-shell { width: min(100% - 20px, 1480px); padding-top: 12px; } .broadcast-header, .operator-heading { align-items: flex-start; flex-direction: column; } .broadcast-grid { gap: 10px; } .stage-frame { min-height: 62vh; } .local-preview { width: 100px; } .operator-grid, .diag-grid { grid-template-columns: 1fr; } .persona-field { grid-column: auto; } .chat-composer fieldset { grid-template-columns: 1fr; } }