* { box-sizing: border-box; }
:root { color-scheme: dark; font-family: Bahnschrift, "Segoe UI", sans-serif; color: #f9f5ff; }
body {
  min-height: 100vh; margin: 0;
  background: radial-gradient(ellipse at 15% 0, rgba(139, 105, 196, .46), transparent 38%),
    radial-gradient(ellipse at 95% 18%, rgba(95, 163, 193, .22), transparent 34%),
    linear-gradient(135deg, #191532, #252456 58%, #29375f);
}
main { width: min(1180px, 100%); margin: auto; padding: 30px 24px 48px; }
.page-header { margin-bottom: 22px; }
.eyebrow { margin: 0 0 6px; color: #bfeeff; font-size: 12px; font-weight: 800; letter-spacing: .2em; }
h1 { margin: 0; font-size: clamp(30px, 5vw, 44px); letter-spacing: .035em; }
.intro { max-width: 720px; color: #ddd7ef; line-height: 1.55; }
.live-panel {
  display: flex; min-height: min(720px, calc(100vh - 250px)); flex-direction: column; padding: 22px;
  border: 1px solid rgba(191, 238, 255, .28); border-radius: 18px;
  background: linear-gradient(155deg, rgba(54, 45, 91, .82), rgba(26, 25, 61, .84));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), 0 14px 36px rgba(8, 8, 26, .2);
}
.live-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.live-header .eyebrow { margin-bottom: 4px; }
.live-header h2 { margin: 0; font-size: 24px; }
.live-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 11px; border: 1px solid rgba(191, 238, 255, .26); border-radius: 999px; color: #c8f3ff; background: rgba(126, 216, 237, .09); font-size: 12px; font-weight: 700; white-space: nowrap; }
.live-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #b5a9d0; box-shadow: 0 0 8px currentColor; }
.live-badge[data-state="online"] { color: #b9ffe3; border-color: rgba(153, 255, 216, .4); }
.live-badge[data-state="online"]::before { background: #8cffcf; }
.live-badge[data-state="error"], .live-badge[data-state="authorization_required"] { color: #ffd0e4; }
.viewer-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 13px; padding: 16px 18px; border: 1px solid rgba(233, 196, 247, .24); border-radius: 14px; background: linear-gradient(100deg, rgba(245, 191, 223, .12), rgba(185, 234, 255, .10)); }
.viewer-card-label { color: #d9c4ff; font-weight: 700; }
#viewer-detail { margin: 5px 0 0; color: #beb6d2; font-size: 12px; }
#viewer-count { color: #f5eaff; font-size: 42px; font-weight: 800; line-height: 1; text-shadow: 0 0 18px rgba(216, 174, 255, .28); font-variant-numeric: tabular-nums; }
#chat-feed-state { margin: 0 0 10px; color: #bfeeff; font-size: 12px; }
.control-chat-log { display: flex; min-height: 0; flex: 1; flex-direction: column; gap: 9px; overflow: auto; padding: 2px 5px 2px 0; scrollbar-color: rgba(191, 238, 255, .35) transparent; }
.control-chat-message { padding: 10px 12px; border: 1px solid rgba(218, 198, 245, .22); border-radius: 12px; background: rgba(10, 10, 30, .28); }
.control-chat-message.is-follow { border-color: rgba(255, 195, 224, .44); background: linear-gradient(105deg, rgba(91, 56, 105, .56), rgba(54, 54, 100, .52)); }
.control-chat-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.control-chat-author { color: #e9c4f7; font-size: 14px; font-weight: 800; overflow-wrap: anywhere; }
.control-chat-time { flex: none; color: #aaa3c2; font-size: 11px; }
.control-chat-text { margin: 5px 0 0; color: #fbf8ff; font-size: 14px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-empty { margin: auto 0; color: #c4bdd7; font-size: 14px; text-align: center; }
.chat-footer { margin: 12px 0 0; color: #aaa3c2; font-size: 11px; }
.status { min-height: 1.5em; margin: 10px 0; color: #d8d0e8; }
.status.error { color: #ffd0e4; }
@media (max-width: 720px) {
  main { padding: 20px 14px 36px; }
  .live-panel { min-height: min(620px, calc(100vh - 220px)); padding: 17px; }
  .live-header h2 { font-size: 20px; }
  #viewer-count { font-size: 36px; }
}