:root {
  --bg-color: #141414;
  --sidebar-bg: #0a0a0a;
  --text-color: #e5e5e5;
  --hover-color: #2a2a2a;
  --border-color: #303030;
}
body, html { margin: 0; padding: 0; height: 100%; background-color: var(--bg-color); color: var(--text-color); font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; overflow: hidden; }
.hidden { display: none !important; }

/* Main App */
#app-container { display: flex; height: 100vh; }
#channel-list-container { width: 280px; background-color: var(--sidebar-bg); border-right: 1px solid var(--border-color); display: flex; flex-direction: column; }
#channel-list-container h2 { margin: 0; padding: 20px; border-bottom: 1px solid var(--border-color); text-align: center; }
#channel-list { overflow-y: auto; flex-grow: 1; }
.channel-item { padding: 15px 20px; cursor: pointer; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; gap: 15px; }
.channel-item:hover { background-color: var(--hover-color); }
.channel-logo { width: 40px; height: 40px; object-fit: contain; border-radius: 4px; background-color: var(--border-color); }
#video-player-container { flex-grow: 1; display: flex; justify-content: center; align-items: center; background-color: #000; }
video { width: 100%; height: 100%; }

/* Setup Screen */
#setup-container { display: flex; justify-content: center; align-items: center; height: 100vh; }
.setup-box { background-color: var(--sidebar-bg); padding: 40px; border-radius: 8px; text-align: center; max-width: 500px; }
.setup-box h1 { margin-top: 0; }
.setup-box p { color: #aaa; }
.setup-box a, .setup-box button { display: block; width: 100%; box-sizing: border-box; text-align: center; padding: 12px; background-color: #e50914; color: white; text-decoration: none; border-radius: 5px; border: none; cursor: pointer; font-size: 16px; margin-bottom: 15px; }
.setup-box input[type="file"] { display: block; width: 100%; margin: 20px 0; }
#clear-cache-button { background-color: #555; }