.lsc-live { --lsc-bg: #0e0f13; --lsc-panel: #17191f; --lsc-line: #2a2d36; --lsc-text: #eceef2; --lsc-mute: #9aa0ad; --lsc-accent: #ff3b30; margin: 1.5em 0; font-family: inherit; container-type: inline-size; color: var(--lsc-text); }
.lsc-live * { box-sizing: border-box; }
.lsc-loading { padding: 2em; text-align: center; color: #888; }
.lsc-card { background: var(--lsc-bg); border-radius: 14px; padding: 2.5em 2em; max-width: 560px; }
.lsc-card h3 { color: #fff; margin: .6em 0 .3em; font-size: 1.6em; }
.lsc-card p { color: var(--lsc-mute); margin: .4em 0; }
.lsc-badge { display: inline-block; font-size: .72em; letter-spacing: .12em; text-transform: uppercase; border: 1px solid var(--lsc-line); padding: .35em .8em; border-radius: 99px; color: var(--lsc-mute); }
.lsc-gate-form { display: flex; gap: .6em; margin-top: 1.4em; flex-wrap: wrap; }
.lsc-gate-form input { flex: 1 1 220px; padding: .85em 1em; border-radius: 10px; border: 1px solid var(--lsc-line); background: var(--lsc-panel); color: #fff; font-size: 1.05em; letter-spacing: .15em; text-transform: uppercase; font-family: ui-monospace, Menlo, monospace; }
.lsc-live button { cursor: pointer; border: 0; border-radius: 10px; background: var(--lsc-accent); color: #fff; font-weight: 600; padding: .85em 1.3em; transition: transform .15s ease, opacity .15s ease; }
.lsc-live button:hover { transform: translateY(-1px); }
.lsc-live button:disabled { opacity: .5; }
.lsc-msg { color: #ff8a80 !important; min-height: 1.2em; font-size: .92em; }
.lsc-stage { display: grid; grid-template-columns: 1fr; gap: 0; align-items: stretch; background: var(--lsc-bg); border-radius: 14px; overflow: hidden; }
.lsc-stage.lsc-with-chat { grid-template-columns: minmax(0, 1fr) 320px; }
.lsc-screen { position: relative; align-self: start; background: #000; aspect-ratio: 16 / 9; }
.lsc-screen video { width: 100%; height: 100%; display: block; background: #000; }
.lsc-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1em; text-align: center; padding: 2em; background: rgba(14, 15, 19, .92); }
.lsc-overlay p { color: var(--lsc-mute); margin: 0; }
.lsc-pulse { width: 14px; height: 14px; border-radius: 50%; background: var(--lsc-accent); animation: lsc-pulse 1.4s ease-in-out infinite; }
@keyframes lsc-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,59,48,.6); } 50% { box-shadow: 0 0 0 14px rgba(255,59,48,0); } }
.lsc-live-badge { position: absolute; top: 14px; left: 14px; background: var(--lsc-accent); color: #fff; font-size: .72em; font-weight: 700; letter-spacing: .1em; padding: .3em .7em; border-radius: 6px; pointer-events: none; }
.lsc-chat { display: flex; flex-direction: column; border-left: 1px solid var(--lsc-line); background: var(--lsc-panel); min-height: 0; max-height: 100%; }
.lsc-chat-head { padding: .9em 1em; font-weight: 600; border-bottom: 1px solid var(--lsc-line); color: #fff; }
.lsc-chat-list { list-style: none; margin: 0; padding: .6em 1em; overflow-y: auto; flex: 1; min-height: 200px; max-height: 420px; font-size: .92em; }
.lsc-chat-list li { padding: .3em 0; line-height: 1.4; word-wrap: break-word; position: relative; padding-right: 1.4em; }
.lsc-chat-list strong { color: #8ab4ff; margin-right: .4em; }
.lsc-chat-list .lsc-staff strong { color: #ffcc00; }
.lsc-time { color: #5d6270; font-size: .8em; margin-right: .4em; }
.lsc-text { color: var(--lsc-text); }
.lsc-live .lsc-del { position: absolute; right: 0; top: .2em; padding: 0 .35em; background: transparent; color: #ff8a80; font-size: 1.1em; }
.lsc-chat-form { display: flex; flex-direction: column; gap: .4em; padding: .8em; border-top: 1px solid var(--lsc-line); }
.lsc-chat-form input { padding: .6em .8em; border-radius: 8px; border: 1px solid var(--lsc-line); background: var(--lsc-bg); color: #fff; }
.lsc-chat .lsc-msg { padding: 0 .8em .6em; margin: 0; }
.lsc-error { color: #c62828; }
@container (max-width: 820px) { .lsc-stage.lsc-with-chat { grid-template-columns: 1fr; } .lsc-chat { border-left: 0; border-top: 1px solid var(--lsc-line); } }