*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Roboto,sans-serif;
}

body{
    background:#f4f6f9;
    color:#222;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    padding:20px;
}

.wrapper{
    width:90vw;
    height:90vh;
    display:flex;
    gap:20px;
}

/* =======================
   VIDEO
======================= */

.video-area{
    flex:1;
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#fff;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 4px 16px rgba(0,0,0,.08);
}

video{
    width:100%;
    height:100%;
    object-fit:contain;
    background:#000;
}

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

.sidebar{
    width:300px;
    background:#fff;
    border-radius:12px;
    padding:15px;
    border:1px solid #e5e7eb;
    box-shadow:0 4px 16px rgba(0,0,0,.08);
    overflow-y:auto;
    overflow-x:hidden;
}

.sidebar h3{
    text-align:center;
    margin-bottom:15px;
}

/* =======================
   TAB
======================= */

.tabs{
    display:flex;
    margin-bottom:15px;
}

.tab{
    flex:1;
    border:none;
    padding:12px;
    background:#343a40;
    color:#fff;
    cursor:pointer;
    font-weight:bold;
    transition:.2s;
}

.tab:hover{
    background:#495057;
}

.tab.active{
    background:#ff9800;
}

.tab-content{
    display:none;
}

.tab-content.active{
    display:block;
}

/* =======================
   CHANNEL GRID
======================= */

.channel-list{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    width:100%;
}

/* =======================
   CHANNEL CARD
======================= */

.channel-card{
    width:100%;
    min-width:0;

    display:flex;
    flex-direction:column;

    border:none;
    border-radius:10px;
    overflow:hidden;

    background:#222;
    cursor:pointer;

    transition:.2s;
}

.channel-card:hover{
    opacity:.9;
}

.channel-card.active{
    outline:2px solid #0d6efd;
}

/* =======================
   THUMBNAIL
======================= */

.channel-thumb{
    display:block;
    width:100%;
    aspect-ratio:2/3;
    object-fit:cover;
    background:#333;
}

/* =======================
   TITLE
======================= */

.channel-title{
    display:none;
}

.channel-title.optional-ada-title{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    line-clamp:2;

    min-height:36px;

    padding:6px 4px;
    background:#222;
    color:#fff;

    font-size:12px;
    line-height:1.2;
    text-align:center;

    overflow:hidden;
    word-break:break-word;
}

/* =======================
   MOBILE
======================= */

@media (max-width:768px){

    body{
        padding:10px;
        align-items:flex-start;
    }

    .wrapper{
        width:100%;
        height:auto;
        flex-direction:column;
        gap:15px;
    }

    .video-area{
        width:100%;
        aspect-ratio:16/9;
    }

    .sidebar{
        width:100%;
    }

    .channel-list{
        grid-template-columns:repeat(4,minmax(0,1fr));
        gap:8px;
    }

    .channel-title{
        display:-webkit-box;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2;
        line-clamp:2;

        min-height:32px;
        padding:6px 4px;

        background:#222;
        color:#fff;

        font-size:11px;
        line-height:1.2;
        text-align:center;

        overflow:hidden;
        word-break:break-word;
    }
}