/* Live overrides stay within its page; shared library screens keep their styles. */
html:has(.live-container), body:has(.live-container) { background: #f2f7ff; }
body:has(.live-container) { position: relative; min-height: calc(100dvh / var(--app-zoom)); }
body:has(.live-container)::after { content: ""; position: absolute; inset: auto 0 0; height: calc(4px / var(--app-zoom)); pointer-events: none; background: linear-gradient(90deg, #003c71, #bb33ff, #00eeff); }
.live-container { color: #000; font-family: "Inter", "Segoe UI", Arial, sans-serif; }
.live-container .library-divider { margin-block: 15px; }
.live-results { padding-top: 8px; }
.live-results-header { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.live-results-header h1 { flex: 1; font-size: 16px; line-height: 20px; font-weight: 700; }
.live-results-count { display: inline-flex; flex-shrink: 0; gap: 8px; align-items: center; margin-left: auto; color: #ff002e; font-size: 16px; font-style: italic; }
.live-container .live-list { gap: 16px; overflow: visible; background: transparent; border: 0; border-radius: 0; }
.live-container .live-card { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 16px; border: 0; border-radius: 12px; background: #fff; box-shadow: 0 2px 16px #0000001a; }
.live-container .live-card:hover { background: #fff; box-shadow: 0 2px 16px #003c7126; }
.live-card-header { display: flex; align-items: flex-start; gap: 16px; }
.live-card-title { flex: 1; min-width: 0; color: #000; font-size: 16px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.live-card-identity { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; max-width: 40%; min-width: 0; text-align: right; }
.live-card-id { color: #666; font-size: 12px; font-weight: 700; line-height: 14px; overflow-wrap: anywhere; }
.live-remaining { color: #666; font-size: 10px; font-style: italic; line-height: 14px; }
.live-status-badge { display: inline-flex; flex: none; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 16px; background: #ff002e; color: #fff; font-size: 16px; font-weight: 500; line-height: 19px; white-space: nowrap; }
.live-status-badge--ended { background: #66a8ff; }
.live-status-badge--waiting { background: #e5eeff; color: #003c71; }
.live-status-badge img { display: block; flex: none; }
.live-card-description { color: #61737b; font-size: 12px; line-height: 18px; overflow-wrap: anywhere; }
.live-card-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.live-card-tag { padding: 3px 4px; border-radius: 4px; background: #e5eeff; color: #003c71; font-size: 10px; font-weight: 500; line-height: 12px; overflow-wrap: anywhere; }
.live-card-footer { display: flex; align-items: center; gap: 16px; margin-top: -4px; }
.live-card-times { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; color: #777; font-size: 10px; font-weight: 500; line-height: 14px; }
.live-card-times > span { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.live-card-times img { flex: none; }
.live-card-actions { position: relative; z-index: 2; display: flex; flex: none; align-items: center; gap: 16px; }
.live-card-download { display: inline-flex; align-items: center; gap: 8px; padding: 8px; color: #003c71; font-size: 14px; line-height: 14px; border-radius: 4px; }
.live-card-download:hover { background: #f2f7ff; }
.live-card-play { display: inline-flex; align-items: center; justify-content: center; padding: 4px; border: 2px solid #0153cc; border-radius: 50%; background: #fff; cursor: pointer; }
.live-card-play:disabled { opacity: .4; cursor: not-allowed; }
.live-card-play:not(:disabled):hover { background: #e5eeff; }
.live-play-unavailable { display: inline-flex; cursor: not-allowed; }
.live-play-unavailable > button:disabled { pointer-events: none; }
.live-card > .stretched-link { border-radius: inherit; }
.live-card :is(a, button):focus-visible { outline: 2px solid #0153cc; outline-offset: 3px; }
.live-empty-state { margin: 0; background: #fff; border-radius: 12px; }
.live-container .pagination-input { background: #0153cc; color: #fff; border-color: #0153cc; }
.live-container .pagination-jump > span { display: none; }
@media (max-width: 1100px) {
  .live-card-header { flex-wrap: wrap; gap: 8px; }
  .live-card-title { flex-basis: calc(100% - 110px); order: 0; }
  .live-card-header .live-status-badge { order: 1; }
  .live-card-identity { order: 2; flex-basis: 100%; max-width: none; align-items: flex-start; text-align: left; }
  .live-results-header { align-items: flex-start; }
}
@media (max-width: 480px) {
  .live-container .live-card { padding: 12px; }
  .live-card-footer { flex-wrap: wrap; gap: 8px; }
  .live-card-times { flex-basis: 100%; }
  .live-card-actions { margin-left: auto; }
}