```css id="a9k3xz"
/* RESET */

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

/* BODY */

body{
font-family:'Segoe UI',sans-serif;
background:linear-gradient(135deg,#0a0a0a,#111827);
color:#fff;
}

/* GRID PRINCIPAL */

.main-container{
display:grid;
grid-template-columns:280px 1fr;
grid-template-areas:
"visitors header"
"visitors media"
"visitors populares"
"rss rss";
gap:6px;
}

/* PANEL IZQUIERDO */

.visitors-section{
grid-area:visitors;
background:#141a2f;
padding:10px;
overflow-y:auto;
}

.visitors-title{
color:#ff2e63;
font-weight:bold;
margin-bottom:10px;
font-size:14px;
}

/* TELEGRAM */

.telegram-links{
display:flex;
flex-direction:column;
gap:6px;
}

.telegram-links a{
display:flex;
align-items:center;
gap:8px;
background:#0f141d;
padding:6px;
border-radius:6px;
color:#fff;
text-decoration:none;
transition:.2s;
font-size:13px;
}

.telegram-links img{
width:16px;
}

.telegram-links a:hover{
background:#1c2338;
transform:translateX(3px);
}

/* CABECERA */

.header-section{
grid-area:header;
height:130px;
overflow:hidden;
}

.header-section img{
width:100%;
height:100%;
object-fit:cover;
}

/* MEDIA (GIF + VIDEO) */

.media-section{
grid-area:media;
display:grid;
grid-template-columns:120px 1fr 120px;
gap:5px;
padding:5px;
background:#0f141d;
}

/* GIFS */

.gif-side img{
width:100%;
border-radius:5px;
margin-bottom:3px;
}

/* VIDEO */

.video-center{
background:#000;
border-radius:10px;
padding:6px;
box-shadow:0 0 10px rgba(255,46,99,.25);
}

.video-center video{
width:100%;
border-radius:6px;
}

/* PLAYER */

.radio-player{
margin-top:8px;
background:#1c2338;
padding:8px;
border-radius:8px;
}

.radio-player audio{
width:100%;
margin-top:5px;
filter:invert(1);
}

.player-info{
display:flex;
align-items:center;
gap:6px;
font-weight:bold;
font-size:13px;
}

.live-dot{
width:8px;
height:8px;
background:red;
border-radius:50%;
animation:pulse 1s infinite;
}

@keyframes pulse{
0%{opacity:1}
50%{opacity:.3}
100%{opacity:1}
}

/* ULTIMOS VISITANTES */

.populares{
grid-area:populares;
background:#0f141d;
margin:5px;
padding:10px;
border-radius:8px;
}

.populares h3{
color:#ffd700;
margin-bottom:8px;
font-size:15px;
}

.populares a{
display:block;
color:#4cc9ff;
text-decoration:none;
font-size:13px;
margin-bottom:5px;
line-height:1.3;
}

.populares a:hover{
color:#ff2e63;
}



/* CONTENEDOR VISITANTES */

.latest-box{
background:#000;
border-radius:6px;
padding:6px;
max-height:180px;
overflow:auto;
font-size:13px;
line-height:1.4;
white-space:normal;
word-break:break-word;
}

/* RSS */

.rss-section{
grid-area:rss;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:10px;
padding:10px;
}

.rss-box{
background:#111;
padding:10px;
border-radius:8px;
}

.rss-title{
display:block;
color:yellow;
font-weight:bold;
margin-bottom:8px;
text-decoration:none;
border-bottom:2px solid yellow;
font-size:14px;
}

.rss-box a{
color:#fff;
text-decoration:none;
display:block;
margin-bottom:5px;
font-size:13px;
line-height:1.3;
}

.rss-box a:hover{
color:#ff2e63;
}

/* RESPONSIVE */

@media(max-width:1024px){

.main-container{
grid-template-columns:1fr;
grid-template-areas:
"visitors"
"header"
"media"
"latest"
"rss";
}

.media-section{
grid-template-columns:90px 1fr 90px;
}

.rss-section{
grid-template-columns:1fr;
}

}
```