/* Reset e stili base */
 /* 全局禁止选中 */
#channelsContainer {
    -webkit-user-select: none; /* iOS/Safari */
    -webkit-touch-callout: none; /* 禁止长按弹出菜单 */
    user-select: none; /* 其他浏览器 */
}
    * { 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;
       text-align: center;
       border-bottom: 1px solid #333;
       display: flex;
       align-items: center;
       justify-content: center;
    }
    header img {
       height: 50px;
       margin-right: 10px;
    }
    /* Area file input (per caricare la lista .m3u) */
    .file-input {
       background-color: #111;
       padding: 10px;
       text-align: center;
       border-bottom: 1px solid #333;
    }
    .file-input p { margin-bottom: 5px; }
    .file-input input {
       margin: 0.5rem;
       padding: 0.5rem;
       font-size: 1rem;
    }
    /* Layout principale in flex: player e lista canali */
    .main-container {
       display: flex;
       height: calc(100vh - 10vh); /* Spazio per header, file input e footer */
    }
    .player-container {
       flex: 3;
       position: relative;
       background-color: #000;
       display: flex;
       align-items: center;
       justify-content: center;
    }
    .player-container video {
       width: 100%;
       height: 100%;
       background-color: #000;
    }
    /* Spinner overlay per il caricamento */
    .spinner-overlay {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: rgba(0,0,0,0.6);
       display: flex;
       align-items: center;
       justify-content: center;
       z-index: 10;
       display: none;
    }
    .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;
    }
   .channel-tools { position: sticky; top: 0; background:#222; padding-bottom:6px; z-index:2; }
   .channel-tools .tools-row { display:flex; gap:6px; margin-bottom:6px; }
   .channel-tools input { flex:1; padding:6px 8px; background:#111; border:1px solid #444; color:#fff; font-size:14px; }
   .channel-tools button { width:40px; background:#333; border:1px solid #555; color:#f7c500; font-size:18px; cursor:pointer; }
   .channel-tools button.active { background:#555; }
   .channel-tools small { display:block; font-size:11px; opacity:.6; line-height:1.3; }
    .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; }
   .channel .fav { color:#f7c500; margin-right:4px; display:none; }
   .channel.faved .fav { display:inline; }
   .channel { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    /* 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 { flex: none; width: 100%; height: 20vh; }
       .channel-list { flex: none; width: 100%; height: 80vh; }
    }