/* Reset e stili base */
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
       font-family: Arial, sans-serif;
       background-color: #000;
       color: #fff;
    }
    header {
       background-color: #111;
       padding: 1rem;
       border-bottom: 1px solid #333;
       display: flex;
       align-items: center;
       justify-content: left;
    }
    header img {
       height: 50px;
       margin-right: 10px;
    }
    /* Layout principale in flex: player e lista canali */
    .main-container {
       display: flex;
       height: calc(100vh - 240px); /* Spazio per header, file input e footer */
    }
    .player-container {
       flex: 3;
       /* Use sticky so the player can pin to the top when scrolling.
          Include -webkit- prefix and align-self to improve Safari behavior in flex layouts. */
       position: -webkit-sticky;
       position: sticky;
       top: 0;
       align-self: flex-start;
       -webkit-transform: translateZ(0); /* create a new stacking context for Safari */
       transform: translateZ(0);
       background-color: #000;
       display: flex;
       align-items: center;
       justify-content: center;
       z-index: 100;
    }
    .player-container video {
       width: 100%;
       height: 100%;
       background-color: #000;
       position: relative;
       z-index: 0;
    }
    /* Spinner overlay per il caricamento */
    .spinner-overlay {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: rgba(0,0,0,0.6);
       /* keep hidden by default; show by toggling .show class */
       display: none;
       align-items: center;
       justify-content: center;
       z-index: 110;
       pointer-events: none; /* avoid intercepting pointer when hidden */
    }
    .spinner-overlay.show {
       display: flex;
       pointer-events: auto;
    }
    .spinner {
       border: 8px solid #f3f3f3;
       border-top: 8px solid #3498db;
       border-radius: 50%;
       width: 60px;
       height: 60px;
       animation: spin 1s linear infinite;
    }
    @keyframes spin { 100% { transform: rotate(360deg); } }
    /* Aside della lista dei canali */
    .channel-list {
       flex: 1;
       background-color: #222;
       padding: 10px;
       overflow-y: auto;
    }
    /* #channelsContainer removed because it was an empty ruleset */
    .channel {
       padding: 10px;
       margin-bottom: 5px;
       border-bottom: 1px solid #444;
       cursor: pointer;
       transition: background 0.15s ease;
    }
    .channel:hover { background-color: #444; }
    .channel.selected { background-color: #666; }
    /* Footer */
    footer {
       background-color: #111;
       padding: 10px;
       text-align: center;
       border-top: 1px solid #333;
       font-size: 0.9rem;
    }
    /* Responsive: layout a colonna se la larghezza è bassa */
    @media (max-width: 768px) {
       .main-container { flex-direction: column; }
       .player-container, .channel-list { flex: none; width: 100%;}
    }