.live-badge { display: inline-flex; align-items: center; gap: .4rem; border-radius: 4px; background: #bc2029; color: #fff; font-size: .75rem; font-weight: 700; padding: .25rem .5rem; letter-spacing: .04em; }
.live-badge::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; }
.live-card.panel { min-width: 0; border: 0; border-radius: 0; background: transparent; }
.live-card-art { display: flex; align-items: center; justify-content: center; position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; background: radial-gradient(ellipse at center, #42242d, #21181d 75%); }
.live-card-art > svg { width: 48px; height: 48px; color: #e77282; }
.live-card-art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.live-card-art .live-badge { position: absolute; top: 10px; left: 10px; padding: 4px 7px; font-size: 11px; }
.live-card-audience { position: absolute; bottom: 10px; left: 10px; padding: 3px 7px; border-radius: 4px; background: #000c; color: #fff; font-size: 12px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.live-card-details { display: flex; align-items: flex-start; gap: 11px; padding: 12px 0 0; }
.live-card-avatar { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; background:var(--avatar-background, #555); color:#fff; font-size: 16px; font-weight: 650; text-decoration: none; }
.live-card-copy { flex: 1; min-width: 0; }
.live-card-title { display: block; color: var(--ink); text-decoration: none; }
.live-card :is(h2, h3) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; font-size: 16px; font-weight: 600; line-height: 1.35; margin: 0 0 5px; }
.live-card-channel { display: block; width: fit-content; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #aaa; font-size: 13px; line-height: 1.5; text-decoration: none; }
.live-card-channel:hover, .live-card-title:hover { color: #fff; }
.live-card-language { display: block; margin: 2px 0 7px; color: #aaa; font-size: 13px; line-height: 1.4; }
.live-card a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.live-grid { margin-bottom: 1.5rem; }
.home-live { margin-bottom: 28px; }
.home-live-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 16px; }
.home-live-heading h2 { margin: 0; font-size: 1.15rem; }
.home-live-heading .text-link { font-size: .8rem; }
.home-live .live-grid { margin-bottom: 0; }
.channel-avatar-live { position: relative; display: grid; place-items: center; width: 100%; height: 100%; border-radius: inherit; box-shadow: 0 0 0 3px #ef3548; color: inherit; text-decoration: none; }
.channel-avatar-live .live-badge { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); border: 2px solid var(--panel, #1b1b1b); padding: 2px 6px; font-size: 11px; line-height: 1.3; white-space: nowrap; }
.channel-avatar-live .live-badge::before { display: none; }
.channel-avatar-live:hover { box-shadow: 0 0 0 4px #ff5364; }
.channel-avatar-live:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }
.video-avatar-live { position: relative; display: grid; place-items: center; border-radius: 50%; box-shadow: 0 0 0 2px #ef3548; color: inherit; text-decoration: none; }
.video-channel-avatar > .video-avatar-live { width: 100%; height: 100%; }
.video-avatar-live .live-badge { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); border: 2px solid #0f0f0f; padding: 1px 3px; font-size: 8px; line-height: 1.2; white-space: nowrap; }
.video-avatar-live .live-badge::before { display: none; }
.video-avatar-live:hover { box-shadow: 0 0 0 3px #ff5364; }
.video-avatar-live:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.live-watch { max-width: 1400px; margin: 0 auto; }
.live-viewers { width: fit-content; margin: 12px 0; padding: 6px 10px; border-radius: 7px; background: #ffffff0a; color: #ddd; font-size: .8rem; font-variant-numeric: tabular-nums; }
.live-viewers[hidden] { display: none; }
.live-player-anchor { width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 12px; }
.persistent-live-player { position: absolute; z-index: 35; margin: 0; color: #fff; }
.persistent-live-player[hidden] { display: none; }
.persistent-live-player > .live-video-shell { position: relative; top: auto; }
.live-mini-restore, .live-pip-notice { display: none; }
.persistent-live-player[data-mode='mini'] { position: fixed; z-index: 65; border: 0; border-radius: 12px; background: #000; box-shadow: 0 6px 28px #0008, 0 0 0 1px #ffffff18; overflow: hidden; }
body.sidebar-open .persistent-live-player[data-mode='mini'] { z-index: 20; }
.persistent-live-player[data-mode='mini'] .live-video-shell { height: 100%; border-radius: 0; cursor: pointer; }
.persistent-live-player[data-mode='mini'] .live-player-chrome { display: none; }
.persistent-live-player[data-mode='mini'] .live-mini-restore { display: block; position: absolute; z-index: 4; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; background: transparent; cursor: pointer; }
.live-mini-restore:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
.live-video-shell .live-mini-close { z-index: 5; }
.live-video-shell .live-mini-close[hidden] { display: none; }
.persistent-live-player[data-pip='true'] .live-pip-notice { display: grid; place-items: center; position: absolute; inset: 0; padding: 20px; background: #111; color: #bbb; font-size: 13px; text-align: center; pointer-events: none; }
.live-video-shell .live-pip-toggle[hidden] { display: none; }
.live-video-shell { position: relative; isolation: isolate; overflow: hidden; background: #000; aspect-ratio: 16 / 9; width: 100%; border-radius: 12px; }
.live-video-shell video { display: block; width: 100%; height: 100%; object-fit: contain; touch-action: manipulation; }
.live-video-shell video::-webkit-media-controls { display: none !important; }
.live-video-shell .live-player-chrome { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 1; transition: opacity .18s ease; color: #fff; }
.live-video-shell[data-controls='hidden'] { cursor: none; }
.live-video-shell[data-controls='hidden'] .live-player-chrome { opacity: 0; }
.live-video-shell[data-controls='hidden'] .live-player-chrome * { pointer-events: none !important; }
.live-video-shell .live-player-toolbar { position: absolute; inset: auto 0 0; display: flex; align-items: center; gap: 8px; min-height: 86px; padding: 28px 14px 12px; background: linear-gradient(transparent, #0009 45%, #000d); pointer-events: auto; }
.live-video-shell .live-control-button, .live-video-shell .live-quality-toggle { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 44px; height: 44px; min-height: 44px; padding: 10px; border: 0; border-radius: 10px; background: transparent; color: #fff; cursor: pointer; appearance: none; -webkit-appearance: none; transition: background .15s, opacity .15s; }
.live-video-shell .live-control-button svg, .live-video-shell .live-quality-toggle svg { display: block; width: 24px; height: 24px; flex: 0 0 auto; }
.live-video-shell button:disabled { cursor: default; opacity: .4; }
.live-video-shell button:focus-visible, .live-video-shell .live-volume:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.live-video-shell .live-quality-toggle { width: auto; gap: 7px; padding-inline: 10px; background: #ffffff14; font-size: 12px; font-weight: 650; line-height: 1; white-space: nowrap; }
.live-video-shell .live-quality-toggle svg { width: 19px; height: 19px; }
.live-video-shell .live-quality-label { display: inline-block; max-width: 72px; overflow: hidden; text-overflow: ellipsis; }
.live-video-shell .live-quality-toggle[aria-expanded='true'] { background: #ffffff2b; }
.live-video-shell .live-control-spacer { flex: 1 1 auto; min-width: 0; }
.live-video-shell .live-status-chip { display: inline-flex; align-items: center; flex: 0 0 auto; gap: 5px; padding: 5px 8px; border-radius: 5px; background: #e5212f; color: #fff; font-size: 11px; line-height: 1; font-weight: 750; letter-spacing: .04em; white-space: nowrap; }
.live-video-shell .live-status-chip::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.live-video-shell .live-volume { flex: 0 1 82px; width: 82px; min-width: 48px; height: 24px; margin: 0 8px 0 -2px; padding: 0; border: 0; border-radius: 2px; background: transparent; accent-color: #fff; cursor: pointer; }
.live-video-shell .live-center-toggle { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 72px; height: 72px; padding: 20px; border: 1px solid #ffffff26; border-radius: 50%; background: #121212b3; color: #fff; transform: translate(-50%, -50%); box-shadow: 0 8px 32px #0005; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); pointer-events: auto; cursor: pointer; }
.live-video-shell .live-center-toggle svg { width: 32px; height: 32px; }
.live-video-shell .live-player-spinner { position: absolute; top: 50%; left: 50%; width: 36px; height: 36px; margin: -18px; border: 3px solid #ffffff36; border-top-color: #fff; border-radius: 50%; animation: live-player-spin .8s linear infinite; }
.live-video-shell .live-quality-menu { position: absolute; right: 14px; bottom: 72px; width: min(210px, calc(100% - 28px)); max-height: calc(100% - 88px); overflow-y: auto; padding: 8px; border: 1px solid #ffffff24; border-radius: 14px; background: #181818f2; box-shadow: 0 10px 36px #0008; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); overscroll-behavior: contain; pointer-events: auto; }
.live-video-shell .live-quality-heading { display: block; margin: 0; padding: 5px 10px 8px; color: #aaa; font-size: 11px; font-weight: 650; line-height: 1.4; }
.live-video-shell .live-quality-options { display: grid; gap: 2px; }
.live-video-shell .live-quality-options button { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 44px; padding: 9px 11px; border: 0; border-radius: 8px; background: transparent; color: #ddd; text-align: left; font-size: 13px; line-height: 1.4; cursor: pointer; }
.live-video-shell .live-quality-options button::after { content: '✓'; color: transparent; font-size: 15px; }
.live-video-shell .live-quality-options button[aria-pressed='true'] { background: #ffffff14; color: #fff; font-weight: 650; }
.live-video-shell .live-quality-options button[aria-pressed='true']::after { color: #fff; }
.live-fullscreen-placeholder { width: 100%; aspect-ratio: 16 / 9; background: #000; }
.live-video-shell[data-fullscreen='true'] { position: fixed !important; z-index: 1000 !important; inset: 0; width: 100vw; height: 100dvh; max-width: none; margin: 0; aspect-ratio: auto; border-radius: 0; }
.live-video-shell[data-fullscreen-fallback='true'] { left: var(--player-viewport-left, 0px) !important; top: var(--player-viewport-top, 0px) !important; right: auto; bottom: auto; width: var(--player-viewport-width, 100vw) !important; height: var(--player-viewport-height, 100dvh) !important; }
.live-video-shell:fullscreen { inset: 0 !important; width: 100% !important; height: 100% !important; }
.live-video-shell[data-fullscreen='true'] .live-player-toolbar { padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)); padding-left: max(16px, env(safe-area-inset-left, 0px)); }
.live-video-shell[data-fullscreen='true'] .live-quality-menu { right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(60px + max(12px, env(safe-area-inset-bottom, 0px))); }
.live-video-shell[data-landscape-rotated='true'] > video, .live-video-shell[data-landscape-rotated='true'] > .live-player-chrome { position: absolute; inset: 0 auto auto 100%; width: var(--player-viewport-height, 100dvh); height: var(--player-viewport-width, 100dvw); transform: rotate(90deg); transform-origin: 0 0; }
.live-video-shell[data-landscape-rotated='true'] .live-player-toolbar { padding-right: max(16px, env(safe-area-inset-bottom, 0px)); padding-bottom: max(12px, env(safe-area-inset-right, 0px)); padding-left: max(16px, env(safe-area-inset-top, 0px)); }
.live-video-shell[data-landscape-rotated='true'] .live-quality-menu { right: max(16px, env(safe-area-inset-bottom, 0px)); bottom: calc(60px + max(12px, env(safe-area-inset-right, 0px))); }
@keyframes live-player-spin { to { transform: rotate(360deg); } }
@media (hover: hover) {
  .live-video-shell .live-control-button:hover:not(:disabled), .live-video-shell .live-quality-toggle:hover:not(:disabled), .live-video-shell .live-quality-options button:hover:not(:disabled) { background: #ffffff26; }
  .live-video-shell .live-center-toggle:hover:not(:disabled) { background: #242424dc; }
}
@media (prefers-reduced-motion: reduce) {
  .live-video-shell .live-player-chrome, .live-video-shell .live-control-button, .live-video-shell .live-quality-toggle { transition: none; }
  .live-video-shell .live-player-spinner { animation-duration: 1.6s; }
}
.live-watch-info { padding: 22px 0; }
.live-watch-info h1 { font-size: 1.5rem; margin: 12px 0; overflow-wrap: anywhere; }
.live-editor { max-width: 760px; }
.live-editor-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 24px; }
.live-rights { display: flex; align-items: start; gap: 10px; margin: 18px 0; line-height: 1.6; }
.live-rights input { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 4px; }
.live-admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 20px; }
.live-admin-grid form { margin-top: 20px; }
.live-ingest-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.live-obs-steps { padding-left: 1.3rem; line-height: 1.7; color: #aaa; }
.live-obs-steps li + li { margin-top: .6rem; }
.live-key-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.live-secret-panel { padding: 16px; margin-top: 16px; border: 1px solid #4b3434; border-radius: 8px; background: #211a1a; }
.live-secret-panel[hidden] { display: none; }
.live-secret-panel input, .live-obs-settings input[readonly] { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .8rem; }
#ingest-toggle { margin-top: 24px; }
#ingest-status { white-space: normal; }
.live-pool { margin-bottom: 28px; }
.live-pool h2 { margin: 0 0 8px; }
.live-pool-import { border-top: 1px solid #363636; padding-top: 16px; margin-top: 20px; }
.live-pool summary, .live-fixed-destination summary { cursor: pointer; padding: 12px 0; font-weight: 600; line-height: 1.5; }
.live-pool summary:focus-visible, .live-fixed-destination summary:focus-visible { outline: 2px solid #d54b56; outline-offset: 4px; border-radius: 4px; }
.live-pool-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; margin-top: 24px; }
.live-pool-item { padding: 16px; border: 1px solid #363636; border-radius: 8px; min-width: 0; }
.live-pool-item .live-editor-heading { margin-bottom: 12px; flex-wrap: wrap; }
.live-pool-item strong { overflow-wrap: anywhere; }
.live-pool textarea[name="destinationRows"] { font: .8rem/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre; }
.live-creator-heading { margin: 28px 0 18px; }
.live-fixed-destination { border-top: 1px solid #363636; margin-top: 16px; }
@media (max-width: 1000px) { .live-ingest-layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) {
  .live-player-anchor { position: sticky; top: var(--header-height); border-radius: 0; }
  .home-live-heading { margin-inline: 12px; }
  .live-card-details { padding: 12px 12px 4px; }
  .live-watch { margin-inline: -16px; }
  .live-watch-info { padding: 16px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .live-watch-info h1 { font-size: 1.15rem; }
  .live-video-shell { position: sticky; top: var(--header-height); z-index: 3; border-radius: 0; }
  .live-video-shell .live-player-toolbar { min-height: 72px; gap: 4px; padding: 20px 8px 8px; }
  .live-video-shell .live-volume { display: none; }
  .live-video-shell .live-quality-toggle { gap: 5px; padding-inline: 8px; font-size: 11px; }
  .live-video-shell .live-quality-toggle svg { width: 17px; height: 17px; }
  .live-video-shell .live-status-chip { padding-inline: 6px; font-size: 10px; }
  .live-video-shell .live-center-toggle { width: 64px; height: 64px; padding: 17px; }
  .live-video-shell .live-center-toggle svg { width: 28px; height: 28px; }
  .live-video-shell .live-quality-menu { right: 8px; bottom: 60px; max-height: calc(100% - 68px); padding: 5px; border-radius: 10px; }
  .live-video-shell .live-quality-heading { padding-block: 3px 5px; }
}
.live-viewer-formula { margin-top: 20px; }
.viewer-formula-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 16px; max-width: 560px; }
.viewer-formula-preview { font-variant-numeric: tabular-nums; }

@media (max-width: 700px) {
  .live-card-art { border-radius: 0; }
  .live-card-avatar { flex-basis: 36px; width: 36px; height: 36px; font-size: 15px; }
  .live-card :is(h2, h3) { font-size: 15px; }
}