* { margin: 0; padding: 0; box-sizing: border-box; }

/* MEDIA CHANNELS / TV GUIDE LAYOUT */
body {
    font-family: 'Trebuchet MS', Tahoma, sans-serif;
    background: #0e0e14;
    color: #e8e8f8;
    min-height: 100vh;
}

/* ─── CHANNEL HEADER ─── */
.channel-header {
    background: #14141e;
    border-bottom: 2px solid #e50914;
    padding: 0;
}

.ch-top {
    background: #e50914;
    padding: 10px 50px;
    display: flex;
    justify-content: space-between;
    font-size: 0.7em;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ffcccc;
    font-family: 'Trebuchet MS', sans-serif;
}

.ch-main {
    padding: 50px 50px 40px;
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 50px;
    align-items: center;
}

.chm-text h1 {
    font-size: 2.2em;
    color: #ffffff;
    line-height: 1.2;
    margin-bottom: 18px;
    font-weight: 700;
}

.chm-lead {
    font-size: 1.05em;
    color: #a0a0c0;
    line-height: 1.82;
}

a { color: #ff6b6b; font-weight: 700; text-decoration: none; border-bottom: 1px solid #ff6b6b; }
a:hover { color: #ffaaaa; }

/* TV Remote / Now Playing widget */
.now-playing {
    background: #1e1e2e;
    border-radius: 12px;
    padding: 24px 20px;
    border: 1px solid rgba(229,9,20,0.3);
}

.np-label {
    font-size: 0.65em;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #e50914;
    margin-bottom: 14px;
}

.np-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.np-item:last-child { border-bottom: none; }

.np-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dot-live { background: #e50914; box-shadow: 0 0 8px #e50914; }
.dot-up   { background: #555570; }

.np-info { flex: 1; }
.np-title { font-size: 0.88em; color: #ffffff; font-weight: 600; }
.np-time  { font-size: 0.72em; color: #6060a0; margin-top: 2px; }
.np-badge {
    font-size: 0.65em;
    padding: 3px 8px;
    border-radius: 3px;
    font-weight: 700;
}

.badge-live { background: #e50914; color: #fff; }
.badge-next { background: #333348; color: #a0a0c0; }

/* ─── CONTENT CHANNELS ─── */
.channels-area {
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 50px;
}

.ca-label {
    font-size: 0.65em;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #e50914;
    margin-bottom: 22px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(229,9,20,0.3);
}

/* Horizontal channel row */
.channel-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
    margin-bottom: 3px;
}

.channel-block {
    padding: 30px 26px;
    min-height: 180px;
}

.cb-stream { background: #1a0808; }
.cb-game   { background: #080818; }
.cb-mixed  { background: #081808; }
.cb-dark   { background: #14141e; }
.cb-red    { background: #e50914; }
.cb-wide   { grid-column: span 2; background: #12121c; }
.cb-tall   { background: #1a1428; }

.block-tag {
    font-size: 0.62em;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 10px;
    font-weight: 700;
}

.cb-stream .block-tag { color: #ff6060; }
.cb-game   .block-tag { color: #6080ff; }
.cb-mixed  .block-tag { color: #60c060; }
.cb-dark   .block-tag { color: #8080c0; }
.cb-red    .block-tag { color: #ffcccc; }
.cb-wide   .block-tag { color: #c0a0ff; }
.cb-tall   .block-tag { color: #a060ff; }

h2 {
    font-size: 1.3em;
    color: #ffffff;
    margin-bottom: 12px;
    font-weight: 700;
    line-height: 1.25;
}

.cb-red h2 { color: #ffffff; }

h3 { font-size: 1em; color: #c0c0e0; margin: 16px 0 8px; font-weight: 700; }
.cb-red h3 { color: #ffd0d0; }

p {
    font-size: 0.92em;
    line-height: 1.82;
    color: #8080a0;
    margin-bottom: 10px;
}

.cb-stream p { color: #c08080; }
.cb-game   p { color: #8090c0; }
.cb-mixed  p { color: #80a080; }
.cb-red    p { color: #ffd0d0; }
.cb-wide   p { color: #a090c8; }
.cb-tall   p { color: #9080b8; }

p:last-child { margin-bottom: 0; }

/* Viewing stats inside blocks */
.view-stats {
    display: flex;
    gap: 16px;
    margin: 14px 0;
    flex-wrap: wrap;
}

.vs-item { text-align: center; }
.vs-num { font-size: 1.5em; font-weight: 900; display: block; }
.vs-lbl { font-size: 0.7em; color: #555580; text-transform: uppercase; letter-spacing: 1px; margin-top: 2px; }

.cb-stream .vs-num { color: #ff6060; }
.cb-game   .vs-num { color: #6080ff; }

/* Bullet list */
ul { list-style: none; margin: 10px 0; }
li { padding: 6px 0 6px 16px; position: relative; font-size: 0.88em; color: #8080a0; }
li::before { content: '›'; position: absolute; left: 0; color: #e50914; font-weight: 700; }

.cb-red li { color: #ffd0d0; }
.cb-red li::before { color: #ffaaaa; }

/* ─── FULL-WIDTH LONG-FORM ─── */
.fullwidth-section {
    max-width: 1100px;
    margin: 3px auto 0;
    padding: 0 50px;
}

.fw-block {
    background: #12121c;
    padding: 45px 50px;
    border-top: 3px solid #e50914;
}

.fw-block .fw-tag {
    font-size: 0.65em;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #e50914;
    margin-bottom: 14px;
}

.fw-block h2 { font-size: 1.5em; color: #ffffff; margin-bottom: 18px; }

.fw-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.fw-cols p { color: #9090b8; font-size: 0.95em; line-height: 1.88; margin-bottom: 14px; }
.fw-cols h3 { color: #c0a0ff; margin: 20px 0 10px; }

footer {
    background: #0a0a10;
    text-align: center;
    padding: 28px;
    color: #2a2a4a;
    font-size: 0.85em;
    border-top: 1px solid rgba(229,9,20,0.1);
    margin-top: 3px;
}

@media (max-width: 900px) {
    .ch-main { grid-template-columns: 1fr; }
    .channel-row { grid-template-columns: 1fr; }
    .cb-wide { grid-column: span 1; }
    .fw-cols { grid-template-columns: 1fr; }
    .channels-area, .fullwidth-section { padding: 30px 24px; }
    .fw-block { padding: 30px 24px; }
    h1 { font-size: 1.8em; }
    .ch-top { flex-direction: column; gap: 4px; }
}