.page { max-width: 1100px; margin: 0 auto; padding: 16px; }
.header { display:flex; align-items:center; justify-content:center; padding:12px 0; }
.info { display:flex; flex-direction:column; gap:8px; align-items:center; text-align:center; }
.title { font-weight:700; font-size:18px; }
.meta { color: var(--muted); font-size:14px; }
.date-line { color: var(--text); font-weight:600; }
.countdown { color: var(--accent); font-weight:600; }
.player { position: relative; width: 100%; padding-top: 56.25%; border:1px solid var(--border); border-radius:12px; overflow:hidden; background: #000; }
.player > div { position: absolute; inset: 0; }
#player { position: absolute; inset: 0; display: block; }
#player > * { position: absolute; inset: 0; width: 100%; height: 100%; }
#player iframe { width: 100%; height: 100%; border: 0; display: block; background: transparent; }
.embed-fill { position: absolute; inset: 0; }
.overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding: 16px; }
.overlay .msg { font-size: 22px; font-weight: 700; }
.overlay.info .msg { color: var(--accent); }
.overlay.warn .msg { color: #f59e0b; }
.overlay.error .msg { color: #ef4444; }
@media (max-width: 640px){ .overlay .msg { font-size: 18px; } }

.related { padding-top: 18px; }
.related .section-title { font-weight: 600; margin: 12px 0 12px; color: var(--muted); text-align:center; }
.related-list { display: grid; gap: 8px; }
.related-item { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px; border:1px solid var(--border); border-radius:10px; background: var(--card); }
.related-item:hover { background: #1e232b; border-color: #39404c; }
.related-item .left { display:flex; align-items:center; gap:10px; }
.related-item .time { font-weight:600; }
.related-item .name { font-weight:600; }
.related-item .meta { color: var(--muted); font-size:13px; }

.line-switch { display:flex; align-items:center; justify-content:center; gap:8px; margin:10px 0 0; }
.line-switch .tag { cursor: pointer; }

.topbar .actions { flex-wrap: nowrap; }
@media (max-width: 640px){
  .related-item { flex-direction: column; align-items: flex-start; cursor: pointer; }
  .related-item .left { flex-wrap: wrap; gap:6px; }
  .line-switch { flex-wrap: wrap; }
}
@media (prefers-color-scheme: light) {
  .related-item:hover { background: #eef2f7; border-color: #d7dce5; }
}