/* ==========================
   Goa TV Live
   style.css
========================== */

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

body{
font-family:Arial,Helvetica,sans-serif;
background:#f5f7fb;
color:#222;
}

.header{
display:flex;
justify-content:space-between;
align-items:center;
padding:15px;
background:#1976d2;
color:#fff;
box-shadow:0 2px 8px rgba(0,0,0,.15);
}

.header-left{
display:flex;
align-items:center;
gap:12px;
}

.site-logo{
width:55px;
height:55px;
border-radius:12px;
object-fit:cover;
background:#fff;
}

.subtitle{
font-size:14px;
opacity:.9;
margin-top:3px;
}

#adminBtn{
width:48px;
height:48px;
border:none;
border-radius:12px;
background:#fff;
font-size:22px;
cursor:pointer;
}

.live-header{
display:flex;
align-items:center;
gap:10px;
padding:15px;
font-weight:bold;
}

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

@keyframes blink{

0%{opacity:1;}

50%{opacity:.2;}

100%{opacity:1;}

}

.channel-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
gap:16px;
padding:16px;
}

.channel-card{
position:relative;
background:#fff;
border-radius:16px;
padding:16px;
text-align:center;
cursor:pointer;
transition:.2s;
box-shadow:0 3px 10px rgba(0,0,0,.08);
}

.channel-card:hover{
transform:translateY(-4px);
}

.channel-card img{
width:80px;
height:80px;
object-fit:contain;
margin-bottom:12px;
}

.channel-card h3{
font-size:16px;
word-break:break-word;
}

.live-badge{
position:absolute;
top:10px;
right:10px;
background:red;
color:#fff;
padding:4px 8px;
font-size:12px;
border-radius:20px;
font-weight:bold;
}

footer{
margin-top:25px;
padding:18px;
text-align:center;
background:#fff;
box-shadow:0 -2px 8px rgba(0,0,0,.08);
}

@media(max-width:600px){

.channel-grid{

grid-template-columns:repeat(2,1fr);

}

.site-logo{

width:45px;

height:45px;

}

h1{

font-size:22px;

}

}