* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #0a0a0f; display: flex; justify-content: center; align-items: center; min-height: 100vh; font-family: 'Segoe UI', Arial, sans-serif; padding: 10px; }
.container { background: #14141c; border-radius: 24px; padding: 20px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8); max-width: 750px; width: 100%; text-align: center; border: 1px solid #2a2a3a; }

/* ===== БАННЕР-ШАПКА ===== */
.banner { background: linear-gradient(135deg, #1e2a2a, #0f1a1a); border: 1px solid #2a5a4a; border-radius: 16px; padding: 15px; margin-bottom: 20px; position: relative; overflow: hidden; }
.banner::before { content: '📺'; position: absolute; right: -10px; top: -20px; font-size: 80px; opacity: 0.06; transform: rotate(15deg); }
.banner h1 { color: #e0e8e0; font-size: 22px; font-weight: 700; letter-spacing: 1px; }
.banner h1 span { color: #7fcdd9; }
.banner p { color: #889999; font-size: 14px; margin-top: 8px; line-height: 1.6; }
.banner .highlight { color: #f0c060; font-weight: 600; }
.banner-tag { display: inline-block; background: #1a2a28; color: #ffecb2; font-size: 14px; margin-top: 3px; letter-spacing: 0.5px; }

/* ===== ВКЛАДКИ ===== */
.tabs { display: flex; gap: 8px; margin-bottom: 20px; justify-content: center; flex-wrap: wrap; }
.tabs a { background: #1a1a28; color: #666688; padding: 8px 22px; border-radius: 30px; text-decoration: none; font-size: 14px; font-weight: 600; border: 1px solid #2a2a3a; transition: all 0.3s; }
.tabs a:hover { background: #2a2a3a; color: #8888aa; }
.tabs a.active { background: #1a2a28; color: #7fcdd9; border-color: #2a5a4a; }

/* ===== НАЗВАНИЕ + ВРЕМЯ ===== */
.title-row { color: #f0f0f5; font-size: 20px; font-weight: 600; margin-bottom: 18px; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.title-row .duration { color: #8888aa; font-size: 16px; font-weight: 400; background: #1e1e2e; padding: 2px 14px; border-radius: 20px; border: 1px solid #2e2e44; }

/* ===== ПЛЕЕР ===== */
.player-wrapper { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; border-radius: 16px; overflow: hidden; background: #000; }
.player-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }

/* ===== КНОПКИ СОЦСЕТЕЙ ===== */
.social-buttons { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }
.social-buttons button { background: #1a1a28; color: #8888aa; border: 1px solid #2a2a3a; padding: 6px 14px; border-radius: 30px; font-size: 13px; cursor: pointer; transition: all 0.3s; font-family: inherit; }
.social-buttons button:hover { background: #2a2a3a; color: #f0f0f5; border-color: #3a3a5a; }
.social-buttons button.vk:hover { background: #2787F5; color: #fff; border-color: #2787F5; }
.social-buttons button.tg:hover { background: #26A5E4; color: #fff; border-color: #26A5E4; }
.social-buttons button.ok:hover { background: #F58220; color: #fff; border-color: #F58220; }
.social-buttons button.max:hover { background: #8539ff; color: #fff; border-color: #8539ff; }

/* ===== РЕКЛАМА ===== */
.ad-banner { margin-top: 16px; min-height: 60px; display: flex; align-items: center; justify-content: center; max-height: 250px; }

/* ===== ФУТЕР ===== */
.footer { margin-top: 16px; color: #555577; font-size: 13px; }
.bottom-row { display: flex; justify-content: center; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 10px; }
.bottom-row .viewers { color: #4a8a7a; font-size: 14px; background: #1a2a28; padding: 6px 16px; border-radius: 30px; border: 1px solid #2a5a4a; }
.bottom-row .viewers span { color: #7fcdd9; font-weight: bold; }
.bottom-row .db-count { color: #555577; font-size: 13px; }
.bottom-row .db-count span { color: #8888aa; }
.yesterday { margin-top: 6px; color: #555577; font-size: 13px; }
.yesterday span { color: #8888aa; }
.don { color: #f0c060; font-weight: 600; }
.footlite { padding: 10px; color: #8888aa; }

@media (max-width: 600px) {
    body { padding: 0; min-height: auto;}
    .container { padding: 15px; border-radius: 0; }
    .banner h1 { font-size: 20px; }
    .banner p { font-size: 13px; }
    .title-row { font-size: 17px; gap: 8px; }
    .title-row .duration { font-size: 14px; }
    .ad-banner { min-height: 50px; }
    .tabs a { font-size: 12px; padding: 6px 14px; }
    .bottom-row { gap: 10px; }
    .bottom-row .viewers { font-size: 13px; padding: 4px 12px; }
    .bottom-row .db-count { font-size: 12px; }
}