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

body{
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial;
background:#f3f6fb;
color:#111;
transition:.25s;
}

/* DARK MODE */

body.dark{
background:#0f1115;
color:#e6e6e6;
}

/* HEADER */

.header{
position:fixed;
top:0;
width:100%;
backdrop-filter:blur(12px);
background:rgba(255,255,255,.75);
border-bottom:1px solid rgba(0,0,0,.05);
z-index:100;
transition:.25s;
}

body.dark .header{
background:rgba(18,18,18,.7);
border-bottom:1px solid rgba(255,255,255,.08);
}

.header-inner{
max-width:1200px;
margin:auto;
padding:14px 18px;
display:flex;
justify-content:space-between;
align-items:center;
}

.logo{
font-weight:600;
}
.logo svg{
	width: 20px;
    height: 20px;
    position: relative;
    top: 4px;
    margin-right: 6px;
}

.header-buttons{
display:flex;
gap:14px;
align-items:center;
}

/* BUTTONS */

.icon-btn{
font-size:22px;
text-decoration:none;
color:inherit;
}
.icon-btn svg{
	width: 20px;
	height: 20px;
	position: relative;
	top: 2px;
}

.theme-btn{
border:none;
background:transparent;
font-size:20px;
cursor:pointer;
}

/* MAIN */

.main{
padding-top:80px;
max-width:1200px;
margin:auto;
}

/* GRID */

.grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
gap:22px;
padding:8px;
}

/* CARD */

.tv-card{
position:relative;
background:white;
border-radius:18px;
text-align:center;
padding:10px 12px;
text-decoration:none;
color:#222;
transition:.28s;
box-shadow:0 8px 22px rgba(0,0,0,.06);
}

body.dark .tv-card{
background:#1a1d23;
color:#e6e6e6;
box-shadow:0 8px 22px rgba(0,0,0,.4);
}

.tv-card:hover{
transform:translateY(-8px) scale(1.03);
}

/* LOGO */

.tv-card img{
width:70px;
height:70px;
object-fit:contain;
}

/* TITLE */

.tv-card span{
display:block;
font-size:14px;
}

/* LIVE */

.live{
position:absolute;
top:10px;
left:10px;
background:#ff2d2d;
color:white;
font-size:11px;
padding:4px 8px;
border-radius:8px;
font-weight:600;
}

/* MOBILE */

@media(max-width:600px){

.grid{
grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
gap:7px;
}

}