/* SteemLive page (/steemlive): live stream viewer, chat, directory and schedule in the WorldBites card style. Uses the
   page theme variables (--bg, --card, --text, --muted, --gold, --teal, --border), so every colour theme applies. */
.sl-app {
  --sl-radius: 16px;
  --sl-teal-soft: rgba(26,155,142,0.09);
  --sl-teal-line: rgba(26,155,142,0.22);
  --sl-red: #E5484D;
  --sl-shadow: 0 10px 30px rgba(28,45,43,0.06);
  max-width: 1280px; margin: 0 auto; padding: 28px 24px 120px; box-sizing: border-box;
}
.sl-app svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sl-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sl-app [hidden] { display: none !important; }

/* ---------- buttons ---------- */
.sl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 12px; border: 1.5px solid transparent; font: inherit; font-size: .92rem; font-weight: 700; cursor: pointer; transition: background .2s, border-color .2s, transform .15s, box-shadow .2s; white-space: nowrap; }
.sl-btn:disabled { opacity: .55; cursor: not-allowed; }
.sl-btn-primary { background: var(--teal); color: #fff; }
.sl-btn-primary:hover:not(:disabled) { background: #148176; }
.sl-btn-ghost { background: transparent; border-color: var(--teal); color: var(--teal); }
.sl-btn-ghost:hover:not(:disabled) { background: var(--sl-teal-soft); }
.sl-btn-danger { background: transparent; border-color: var(--border); color: var(--sl-red); }
.sl-btn-danger:hover:not(:disabled) { border-color: var(--sl-red); background: rgba(229,72,77,0.06); }
.sl-btn-live { background: linear-gradient(135deg, var(--teal), #0f6f66); color: #fff; box-shadow: 0 8px 20px rgba(26,155,142,0.32); }
.sl-btn-live:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(26,155,142,0.4); }
.sl-btn-sm { height: 36px; padding: 0 14px; font-size: .84rem; border-radius: 10px; }
.sl-btn-xs { height: 30px; padding: 0 12px; font-size: .78rem; border-radius: 8px; }
.sl-btn-wide { width: 100%; }
.sl-link-btn { border: 0; background: none; padding: 4px 2px; font: inherit; font-size: .84rem; font-weight: 700; color: var(--teal); cursor: pointer; }
.sl-link-btn:hover { text-decoration: underline; }
.sl-link-danger { color: var(--muted); }
.sl-link-danger:hover { color: var(--sl-red); }
.sl-rec { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,0.3); animation: sl-pulse 1.6s ease-in-out infinite; }
@keyframes sl-pulse { 50% { box-shadow: 0 0 0 6px rgba(255,255,255,0); } }

/* ---------- hero ---------- */
.sl-hero { display: flex; align-items: center; gap: 20px; padding: 24px 26px; margin-bottom: 18px; background: var(--card); border: 1px solid var(--border); border-radius: var(--sl-radius); box-shadow: var(--sl-shadow); position: relative; overflow: hidden; }
.sl-hero::after { content: ""; position: absolute; right: 120px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, var(--sl-teal-soft), transparent 70%); pointer-events: none; }
.sl-hero-mark { flex: 0 0 auto; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: linear-gradient(135deg, var(--teal), #0f6f66); color: #fff; box-shadow: 0 6px 18px rgba(26,155,142,0.32); }
.sl-hero-mark svg { width: 32px; height: 32px; }
.sl-hero-text { flex: 1; min-width: 0; }
.sl-eyebrow { margin: 0 0 4px; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.sl-hero h1 { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: 2.1rem; line-height: 1.1; color: var(--text); }
.sl-lead { margin: 8px 0 0; max-width: 640px; color: var(--muted); font-size: .95rem; line-height: 1.5; }
.sl-hero .sl-btn-live { position: relative; z-index: 1; height: 52px; padding: 0 26px; font-size: 1rem; border-radius: 14px; }

/* ---------- stage: player + chat ---------- */
.sl-stage { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; margin-bottom: 28px; scroll-margin-top: 90px; }
.sl-player-col { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.sl-player { position: relative; aspect-ratio: 16 / 9; width: 100%; border-radius: var(--sl-radius); overflow: hidden; background: #0c2e2b; box-shadow: var(--sl-shadow); }
.sl-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sl-player-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 24px; text-align: center; color: #fff; background: radial-gradient(circle at 30% 20%, rgba(26,155,142,0.55), transparent 60%), linear-gradient(135deg, #0f4f49, #0a2624); }
.sl-player-empty-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,0.12); margin-bottom: 6px; }
.sl-player-empty-icon svg { width: 30px; height: 30px; }
.sl-player-empty h2 { margin: 0; font-size: 1.25rem; }
.sl-player-empty p { margin: 0; max-width: 420px; color: rgba(255,255,255,0.78); font-size: .92rem; line-height: 1.5; }

.sl-info { padding: 16px 18px; background: var(--card); border: 1px solid var(--border); border-radius: var(--sl-radius); box-shadow: var(--sl-shadow); min-width: 0; }
.sl-info-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: .8rem; color: var(--muted); }
.sl-live-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 6px; background: var(--sl-red); color: #fff; font-size: .7rem; font-weight: 800; letter-spacing: .08em; }
.sl-live-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: sl-blink 1.4s ease-in-out infinite; }
.sl-live-pill.is-scheduled { background: var(--teal); }
.sl-live-pill.is-ended { background: var(--muted); }
.sl-live-pill.is-scheduled::before, .sl-live-pill.is-ended::before { display: none; }
@keyframes sl-blink { 50% { opacity: .35; } }
.sl-viewers { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: var(--text); }
.sl-viewers svg { width: 16px; height: 16px; color: var(--teal); }
.sl-category { padding: 3px 10px; border-radius: 999px; background: var(--sl-teal-soft); color: var(--teal); font-weight: 700; }
.sl-title { margin: 10px 0 12px; font-size: 1.3rem; line-height: 1.3; color: var(--text); overflow-wrap: anywhere; }
.sl-host-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sl-host { display: inline-flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; color: var(--text); font-weight: 700; }
.sl-host:hover .sl-host-name { color: var(--teal); }
.sl-host .sl-avatar { width: 40px; height: 40px; }
.sl-host-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-host-actions { display: flex; gap: 8px; }
.sl-description { margin: 12px 0 0; color: var(--muted); font-size: .92rem; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }

.sl-avatar { position: relative; flex: 0 0 auto; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; background: var(--sl-teal-soft); border: 1px solid var(--sl-teal-line); }
.sl-avatar::before { content: attr(data-initial); font-size: .8rem; font-weight: 800; color: var(--teal); }
.sl-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #fff; }

/* chat */
.sl-chat { display: flex; flex-direction: column; min-width: 0; height: 100%; max-height: 640px; min-height: 420px; background: var(--card); border: 1px solid var(--border); border-radius: var(--sl-radius); box-shadow: var(--sl-shadow); overflow: hidden; }
.sl-chat-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.sl-chat-title { font-weight: 800; font-size: .95rem; }
.sl-chat-status { font-size: .78rem; font-weight: 700; color: var(--teal); }
.sl-chat-feed { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.sl-chat-empty { margin: auto; padding: 20px; text-align: center; color: var(--muted); font-size: .88rem; }
.sl-msg { display: flex; gap: 9px; padding: 6px 4px; border-radius: 10px; }
.sl-msg:hover { background: var(--sl-teal-soft); }
.sl-msg .sl-avatar { width: 28px; height: 28px; margin-top: 2px; }
.sl-msg-body { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sl-msg-head { display: flex; align-items: center; gap: 6px; font-size: .78rem; }
.sl-msg-author { font-weight: 800; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-msg.is-me .sl-msg-author { color: var(--teal); }
.sl-msg-head time { color: var(--muted); font-size: .72rem; }
.sl-host-badge { padding: 1px 6px; border-radius: 4px; background: var(--gold); color: #fff; font-size: .62rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.sl-msg-text { font-size: .88rem; line-height: 1.45; color: var(--text); overflow-wrap: anywhere; }
.sl-msg-text a { color: var(--teal); }
.sl-mention { font-weight: 700; text-decoration: none; }
.sl-mention.is-me { background: rgba(184,150,15,0.15); border-radius: 4px; padding: 0 3px; }
.sl-chat-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border); }
.sl-chat-form input { flex: 1; min-width: 0; height: 36px; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text); font: inherit; font-size: .9rem; outline: none; }
.sl-chat-form input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px var(--sl-teal-soft); }
.sl-chat-login { margin: 12px; height: 40px; border-radius: 10px; border: 1.5px dashed var(--teal); background: var(--sl-teal-soft); color: var(--teal); font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer; }
.sl-chat-login:hover { border-style: solid; }
.sl-chat-msg { margin: 0; padding: 0 14px; font-size: .78rem; color: var(--sl-red); }
.sl-chat-msg:empty { display: none; }
.sl-chat-msg:not(:empty) { padding-bottom: 10px; }

/* ---------- directory + schedule ---------- */
.sl-lower { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.sl-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 2px 12px; }
.sl-section-head h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: 1.35rem; color: var(--text); }
.sl-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--sl-red); box-shadow: 0 0 0 4px rgba(229,72,77,0.15); }
.sl-count { font-size: .84rem; font-weight: 700; color: var(--muted); }
.sl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.sl-card { display: flex; flex-direction: column; min-width: 0; padding: 0; overflow: hidden; background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--sl-shadow); text-align: left; font: inherit; color: inherit; cursor: pointer; transition: border-color .2s, transform .2s, box-shadow .2s; }
.sl-card:hover { border-color: var(--teal); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(28,45,43,0.1); }
.sl-card.is-current { border-color: var(--teal); box-shadow: 0 0 0 2px var(--sl-teal-line), var(--sl-shadow); }
.sl-thumb { position: relative; display: block; aspect-ratio: 16 / 9; background: linear-gradient(135deg, #0f4f49, #0a2624); overflow: hidden; }
.sl-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sl-thumb.is-placeholder::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 30%, rgba(26,155,142,0.6), transparent 60%); }
.sl-thumb-provider { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; font-weight: 800; font-size: .95rem; letter-spacing: .04em; color: rgba(255,255,255,0.9); }
.sl-thumb:not(.is-placeholder) .sl-thumb-provider { display: none; }
.sl-live-pill-sm { position: absolute; left: 10px; top: 10px; z-index: 1; }
.sl-thumb-viewers { position: absolute; left: 10px; bottom: 10px; z-index: 1; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 6px; background: rgba(0,0,0,0.6); color: #fff; font-size: .74rem; font-weight: 700; }
.sl-thumb-viewers svg { width: 13px; height: 13px; }
.sl-card-body { display: flex; align-items: center; gap: 10px; padding: 12px; min-width: 0; }
.sl-card-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sl-card-title { display: block; font-weight: 700; font-size: .93rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-card-host { display: block; margin-top: 2px; font-size: .8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sl-empty-card { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 34px 20px; text-align: center; background: var(--card); border: 1px dashed var(--teal); border-radius: 14px; color: var(--muted); font-size: .92rem; line-height: 1.5; }
.sl-empty-card p { margin: 0; max-width: 440px; }
.sl-empty-card strong { color: var(--text); }
.sl-empty-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--sl-teal-soft); color: var(--teal); }
.sl-empty-icon svg { width: 24px; height: 24px; }
.sl-empty { margin: 0; padding: 16px; color: var(--muted); font-size: .88rem; line-height: 1.5; }

.sl-schedule { padding: 18px; background: var(--card); border: 1px solid var(--border); border-radius: var(--sl-radius); box-shadow: var(--sl-shadow); min-width: 0; }
.sl-schedule .sl-section-head h2 { font-size: 1.15rem; }
.sl-events { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sl-event { display: flex; flex-direction: column; gap: 6px; padding: 12px 12px 12px 14px; border-radius: 12px; background: var(--bg); border-left: 3px solid var(--teal); min-width: 0; }
.sl-event-when { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .76rem; font-weight: 800; }
.sl-event-time { color: var(--teal); text-transform: uppercase; letter-spacing: .04em; }
.sl-event-countdown { color: var(--gold); white-space: nowrap; }
.sl-event-title { font-weight: 700; font-size: .92rem; color: var(--text); overflow-wrap: anywhere; }
.sl-event-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .78rem; color: var(--muted); }
.sl-event-meta .sl-avatar { width: 20px; height: 20px; }
.sl-event-meta .sl-avatar::before { font-size: .6rem; }
.sl-event-meta a { color: var(--text); font-weight: 700; text-decoration: none; }
.sl-event-meta a:hover { color: var(--teal); }
.sl-event-actions { display: flex; align-items: center; gap: 10px; margin-top: 2px; }

/* ---------- modal ---------- */
body.sl-modal-open { overflow: hidden; }
.sl-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; background: rgba(12,30,28,0.55); backdrop-filter: blur(4px); }
.sl-modal-card { position: relative; width: 100%; max-width: 480px; max-height: calc(100vh - 40px); overflow-y: auto; padding: 28px 26px 22px; background: var(--card); border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 30px 70px rgba(0,0,0,0.25); box-sizing: border-box; }
.sl-modal-close { position: absolute; right: 14px; top: 12px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--bg); color: var(--muted); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.sl-modal-close:hover { color: var(--text); }
.sl-modal-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 12px; border-radius: 16px; background: var(--sl-teal-soft); color: var(--teal); }
.sl-modal-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sl-modal-icon.is-live { background: linear-gradient(135deg, var(--teal), #0f6f66); }
.sl-modal-card h2 { margin: 0 0 6px; font-size: 1.3rem; color: var(--text); }
.sl-modal-lead { margin: 0 0 16px; color: var(--muted); font-size: .9rem; line-height: 1.5; }
.sl-login, .sl-golive { display: flex; flex-direction: column; gap: 10px; }
.sl-login input, .sl-field input, .sl-field select, .sl-field textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text); font: inherit; font-size: .92rem; outline: none; }
.sl-login input { height: 44px; }
.sl-login input:focus, .sl-field input:focus, .sl-field select:focus, .sl-field textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px var(--sl-teal-soft); }
.sl-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
.sl-field > span { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sl-field > span em { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 600; }
.sl-field small { font-size: .76rem; color: var(--muted); }
.sl-field textarea { resize: vertical; min-height: 72px; }
.sl-field-row { display: flex; gap: 10px; }
.sl-when { display: flex; gap: 8px; padding: 4px; border-radius: 12px; background: var(--bg); }
.sl-when label { flex: 1; cursor: pointer; }
.sl-when input { position: absolute; opacity: 0; pointer-events: none; }
.sl-when span { display: block; padding: 8px 10px; border-radius: 9px; text-align: center; font-size: .86rem; font-weight: 700; color: var(--muted); transition: background .2s, color .2s; }
.sl-when input:checked + span { background: var(--card); color: var(--teal); box-shadow: 0 2px 8px rgba(28,45,43,0.08); }
.sl-when input:focus-visible + span { outline: 2px solid var(--teal); }
.sl-form-msg { margin: 0; min-height: 1em; font-size: .84rem; color: var(--muted); }
.sl-form-msg:empty { display: none; }
.sl-form-msg.is-error { color: var(--sl-red); }
.sl-fine { margin: 2px 0 0; font-size: .76rem; color: var(--muted); text-align: center; }
.sl-modal-links { display: flex; justify-content: center; gap: 8px; margin-top: 14px; font-size: .84rem; color: var(--muted); }
.sl-modal-links a { color: var(--teal); font-weight: 700; text-decoration: none; }

/* Go Live modal: link / direct camera tabs */
.sl-mode-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; margin: 6px 0 14px; border-radius: 14px; background: var(--bg); }
.sl-mode-tab { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font: inherit; text-align: left; cursor: pointer; transition: background .2s, color .2s; }
.sl-mode-tab svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sl-mode-tab span { display: flex; flex-direction: column; font-size: .84rem; font-weight: 800; line-height: 1.2; }
.sl-mode-tab small { font-size: .7rem; font-weight: 600; opacity: .85; }
.sl-mode-tab[aria-selected="true"] { background: var(--card); color: var(--teal); box-shadow: 0 2px 8px rgba(28,45,43,0.08); }
.sl-mode-tab:focus-visible { outline: 2px solid var(--teal); }
.sl-golive [hidden] { display: none !important; }
.sl-quota { display: flex; flex-direction: column; gap: 5px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--sl-teal-soft); font-size: .8rem; color: var(--muted); }
.sl-quota strong { color: var(--teal); }
.sl-quota.is-low strong { color: var(--sl-red); }
.sl-quota small { font-size: .72rem; }
.sl-quota-bar { height: 4px; border-radius: 4px; background: rgba(0,0,0,0.07); overflow: hidden; }
.sl-quota-bar span { display: block; height: 100%; width: 100%; background: var(--teal); transition: width .3s; }
.sl-quota.is-low .sl-quota-bar span { background: var(--sl-red); }
.sl-cam-preview { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #0c2e2b; }
.sl-cam-preview video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.sl-cam-hint { position: absolute; inset: 0; display: grid; place-items: center; padding: 12px; text-align: center; font-size: .82rem; color: rgba(255,255,255,0.8); }
.sl-cam-preview.is-on .sl-cam-hint { display: none; }
@media (max-width: 420px) { .sl-mode-tab small { display: none; } }

/* Direct camera stream in the player */
.sl-player video.sl-direct-video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; object-fit: contain; }
.sl-player video.sl-direct-video.is-self { transform: scaleX(-1); object-fit: cover; }
.sl-direct-badge { position: absolute; left: 12px; top: 12px; z-index: 2; padding: 4px 10px; border-radius: 999px; background: rgba(0,0,0,0.55); color: #fff; font-size: .74rem; font-weight: 700; pointer-events: none; }
.sl-direct-status { position: absolute; inset: auto 0 0 0; z-index: 2; padding: 10px; text-align: center; color: #fff; font-size: .84rem; background: linear-gradient(transparent, rgba(0,0,0,0.6)); pointer-events: none; }
.sl-direct-status:empty { display: none; }
.sl-direct-controls { position: absolute; right: 12px; top: 10px; z-index: 3; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.sl-direct-ctl { padding: 5px 11px; border: 0; border-radius: 999px; background: rgba(0,0,0,0.55); color: #fff; font: inherit; font-size: .74rem; font-weight: 700; cursor: pointer; transition: background .2s; }
.sl-direct-ctl:hover, .sl-direct-ctl[aria-pressed="true"] { background: rgba(0,0,0,0.78); }
.sl-direct-ctl.is-end { background: var(--sl-red); }
.sl-direct-ctl:focus-visible { outline: 2px solid #fff; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .sl-stage, .sl-lower { grid-template-columns: minmax(0, 1fr); }
  .sl-chat { height: 420px; }
}
@media (max-width: 640px) {
  .sl-app { padding: 16px 12px 110px; }
  .sl-hero { flex-wrap: wrap; padding: 18px; gap: 14px; }
  .sl-hero-mark { width: 52px; height: 52px; border-radius: 14px; }
  .sl-hero-mark svg { width: 26px; height: 26px; }
  .sl-hero h1 { font-size: 1.7rem; }
  .sl-hero .sl-btn-live { width: 100%; }
  .sl-player { border-radius: 12px; }
  .sl-field-row { flex-direction: column; }
}