/* Reset and Global Styles */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: sans-serif; background: #0d1117; color: white; }
header { display: flex; align-items: center; justify-content: space-between; padding: 15px 5%; background: #161b22; }
.logo img { height: 40px; width: auto; }
nav ul { display: flex; list-style: none; gap: 20px; }
nav a { color: white; text-decoration: none; }

/* Grid for Radios/Movies */
.channel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 20px; }
.card { background: #1f242d; border-radius: 8px; padding: 10px; position: relative; }
.card img { width: 100%; height: 120px; object-fit: cover; border-radius: 4px; }
.heart-icon { position: absolute; top: 10px; right: 10px; color: #ff4d4d; cursor: pointer; font-size: 20px; }
#sticky-player { position: fixed; bottom: 0; width: 100%; background: #161b22; display: flex; align-items: center; padding: 10px; }
.round-btn { 
    width: 50px; height: 50px; border-radius: 50%; 
    background: #238636; display: flex; align-items: center; justify-content: center;
    cursor: pointer; 
}
/* This ensures your layout is Sidebar (Left) + Content (Right) */
body { 
    margin: 0; 
    display: flex; 
    flex-direction: row; /* Ensures Sidebar is left, Content is right */
    background: #0d1117; 
    color: #c9d1d9; 
    font-family: sans-serif; 
    height: 100vh; /* Keeps the body height fixed */
}

#sidebar { 
    width: 250px; 
    background: #161b22; 
    height: 100vh; 
    border-right: 1px solid #30363d; 
    padding: 20px; 
    flex-shrink: 0; /* Prevents sidebar from squishing */
}

#main-content { 
    flex: 1; 
    padding: 30px; 
    overflow-y: auto; /* Allows content to scroll if it gets too long */
}

.volume-container { margin: 0 20px; }
#volume { width: 100px; transform: rotate(-90deg); } /* Basic vertical slider */