* { box-sizing: border-box; }
body { font-family: "Microsoft YaHei", Arial, sans-serif; background: #1a1a2e; color: #eee; margin: 0; padding: 20px; }

/* 列表页 */
.list-page { max-width: 800px; margin: 0 auto; }
.list-page h1 { color: #e94560; text-align: center; }
.channel-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.channel-card { background: #16213e; border-radius: 8px; padding: 20px; transition: transform 0.2s; }
.channel-card:hover { transform: translateY(-4px); }
.channel-card.live { border: 2px solid #e94560; }
.channel-card a { text-decoration: none; color: #eee; }
.channel-name { font-size: 18px; font-weight: bold; margin-bottom: 8px; }
.channel-status { margin-top: 8px; }
.empty-msg { text-align: center; color: #909399; padding: 40px; }

/* 状态徽章 */
.status-badge { display: inline-block; padding: 4px 12px; border-radius: 4px; font-size: 12px; color: #fff; }
.status-badge.live { background: #e94560; }
.status-badge.offline { background: #533483; }

/* 播放页 */
.play-page { max-width: 1100px; margin: 0 auto; }
.play-header { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.play-header h1 { margin: 0; font-size: 20px; }
.back-link { color: #0f3460; background: #e94560; padding: 6px 16px; border-radius: 4px; text-decoration: none; font-size: 14px; }
.back-link:hover { background: #c73e54; }

.play-layout { display: flex; gap: 16px; }

/* 播放器 */
.player-wrap { flex: 1; min-width: 0; background: #000; border-radius: 8px; position: relative; }
.player-wrap video { width: 100%; display: block; border-radius: 8px; }
.player-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #909399; font-size: 20px; pointer-events: none; }

/* 聊天区 */
.chat-wrap { width: 300px; background: #16213e; border-radius: 8px; display: flex; flex-direction: column; }
.chat-header { padding: 12px; font-weight: bold; border-bottom: 1px solid #0f3460; }
.chat-messages { flex: 1; overflow-y: auto; padding: 12px; max-height: 400px; }
.chat-msg { margin-bottom: 8px; line-height: 1.4; }
.chat-name { color: #e94560; font-weight: bold; }
.chat-input { display: flex; gap: 4px; padding: 12px; border-top: 1px solid #0f3460; }
.chat-input input { padding: 8px; border: 1px solid #0f3460; border-radius: 4px; background: #1a1a2e; color: #eee; }
.chat-input #chatUsername { width: 80px; }
.chat-input #chatMessage { flex: 1; }
.chat-input button { padding: 8px 16px; background: #e94560; color: #fff; border: none; border-radius: 4px; cursor: pointer; }
.chat-input button:hover { background: #c73e54; }

/* 流信息 */
.stream-info { margin-top: 16px; background: #16213e; border-radius: 8px; padding: 16px; font-size: 13px; }
.stream-info code { background: #1a1a2e; padding: 4px 8px; border-radius: 3px; color: #e94560; }

/* 响应式 */
@media (max-width: 768px) {
    .play-layout { flex-direction: column; }
    .chat-wrap { width: 100%; }
    .chat-messages { max-height: 200px; }
}