body {
    font-family: Arial;
    background: #11111b;
    color: #cdd6f4;
    margin: 0;
    height: 100vh;
}

/* Main container: desktop default */
#main-container {
    display: flex;
    width: 100%;
    height: 100%;
    gap: 20px;
    padding: 20px;
    box-sizing: border-box;
}

/* Left column: desktop 3/4 width */
#left-column {
    flex: 3;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Video player container */
#player-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    background: #1e1e2e;
}

video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Input controls */
#controls {
    display: flex;
    gap: 10px;
}

#playlistUrl {
    flex: 1;
    padding: 10px;
    font-size: 16px;
    border-radius: 6px;
    border: none;
    color: #cdd6f4;
    background: #313244;
}

#playlistUrl::placeholder {
    color: #a6adc8; /* placeholder text color */
}

#loadBtn {
    padding: 10px 20px;
    border: none;
    background: #cba6f7;
    color: #1e1e2e;
    font-size: 16px;
    border-radius: 6px;
    cursor: pointer;
}

/* Right column: desktop 1/4 width */
#right-column {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    box-sizing: content-box;
}

/* Scrollbar */
#right-column::-webkit-scrollbar { width: 6px; }
#right-column::-webkit-scrollbar-thumb { background-color: #cba6f7; border-radius: 3px; }
#right-column { scrollbar-width: thin; scrollbar-color: #cba6f7 #1e1e2e; }

/* Playlist cards: desktop style */
.card {
    display: flex;
    align-items: center;
    background: #1e1e2e;
    border-radius: 8px;
    padding: 8px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.card:hover { transform: scale(1.03); }

.card img {
    width: 200px;
    height: auto;
    max-height: 120px;
    border-radius: 4px;
    margin-right: 12px;
}
.card .title {
    font-size: 14px;
    word-wrap: break-word;
    color: #cdd6f4;
}

/* ===== Mobile adjustments ===== */
@media (max-width: 1280px) {
    .card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .card img {
        width: 150px;   /* smaller image */
        margin: 0 0 6px 0;
    }
    .card .title {
        font-size: 12px; /* slightly smaller text */
    }
}

@media (max-width: 768px) {
    #main-container {
        flex-direction: column;
        height: auto;
        gap: 15px;
        padding: 10px;
    }

    #left-column, #right-column {
        flex: none;
        width: 100%;
    }

    /* Playlist cards: grid with image on top */
    #right-column {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 0;
        max-height: none;
    }

    .card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 6px;
    }

    .card img {
        width: 100%;
        max-width: 150px;
        margin: 0 0 6px 0;
        height: auto;
    }

    .card .title {
        font-size: 12px;
        word-wrap: break-word;
    }

    #controls {
        flex-direction: column;
        gap: 8px;
    }

    #playlistUrl {
        flex: none; /* desktop flex:1 still works in row, but overridden by width:100% in mobile */
    }
    
    #loadBtn {
        width: 100%;       /* full width */
        box-sizing: border-box; /* include padding in width */
    }
}