*{
    box-sizing:border-box;
}

html,body{
    margin:0;
    padding:0;
    width:1920px;
    height:1080px;
    overflow:hidden;
    background:#000;
    font-family:Arial, sans-serif;
    color:#fff;
}

/* SAFE ZONE */
#app{
    position:absolute;
    top:30px;
    left:100px;
    right:100px;
    bottom:60px;
}

.focusZone{
    box-shadow:0 0 25px rgba(31,42,255,0.8);
}
/* PLAYER */
#player{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    display:none;
    z-index:100;
}

/* ================= HEADER ================= */

#header{
    position:relative;
    height:80px;
}

#logo{
    position:absolute;
    left:0;
    height:55px;
}

#modePanel{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    top:10px;
    font-size:22px;
}

.modeItem{
    display:inline-block;
    margin:0 25px;
}

.lamp{
    display:inline-block;
    width:14px;
    height:14px;
    border-radius:50%;
    background:#444;
    margin-right:8px;
}

.lamp.activeVod{ background:#ff3b3b; }
.lamp.activeTv{ background:#00ff66; }

#clock{
    position:absolute;
    right:0;
    top:10px;
    font-size:24px;
}

/* ================= SEARCH ================= */

#searchBar{
    margin-top:15px;
    width:280px;
}

#searchInput{
    width:100%;
    padding:10px 14px;
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.25);
    border-radius:12px;
    color:#fff;
    font-size:18px;
    outline:none;
}

/* ================= MAIN ================= */

#main{
    position:absolute;
    top:140px;
    left:0;
    right:0;
    bottom:0;
}

/* ================= SIDEBAR ================= */

#sidebar{
    position:absolute;
    width:280px;
    top:0;
    bottom:0;
}

#categories{
    margin-top:20px;
}

.category{
    padding:16px;
    margin-bottom:16px;
    border-radius:14px;
    font-size:22px;
    font-weight:bold;
    background:#111;
}

.category.active{
    background:#1f2aff;
}

/* ================= CONTENT ================= */

#content{
    position:absolute;
    left:340px;
    right:0;
    top:0;
    bottom:0;
}

/* ================= CARDS ================= */

#cardsViewport{
    position:absolute;
    top:0;
    left:0;
    width:1000px;
    height:280px;
    overflow:hidden;
}

#cards{
    position:absolute;
    left:0;
    top:0;
    white-space:nowrap;
    will-change:transform;
}

.card{
    display:inline-block;
    width:180px;
    height:250px;
    margin-right:30px;
    border-radius:16px;
    overflow:hidden;
    border:3px solid transparent;
    transition:0.25s;
}

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

.card.active{
    border-color:#1f2aff;
    transform:scale(1.06);
}

/* ================= INFO ================= */

#info{
    position:absolute;
    top:320px;
    left:0;
    width:1000px;
}

#title{
    font-size:30px;
    margin:0 0 8px 0;
}

#description{
    font-size:20px;
    opacity:0.8;
}

#playBtn{
    margin-top:20px;
    padding:12px 30px;
    font-size:20px;
    border:none;
    border-radius:12px;
    background:#1f2aff;
    color:#fff;
}