:root {
  --bg: #111;
  --surface: #222;
  --text: #f0f0f0;
  --muted: #777;
  --accent: #e67e22;
  --space: 1rem;
  --radius: .5rem;
  --font: 'Inter', sans-serif;
  --ease: .25s ease;
}

* { box-sizing: border-box; margin:0; padding:0; }
body, html { height:100%; overflow:hidden; }
body { font-family: var(--font); background: var(--bg); color: var(--text); }

.hidden { display: none !important; }

/* OVERLAYS */
.overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.8);
  display: flex; align-items: center; justify-content: center;
  z-index:100;
}
.modal {
  background: var(--surface);
  padding: var(--space);
  border-radius: var(--radius);
  width:90%; max-width:320px;
  text-align:center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.modal h2 { margin-bottom:.5rem; font-size:1.25rem; }
.modal p  { color: var(--muted); margin-bottom: var(--space); }
.modal input {
  width:100%; padding:.75rem; margin-bottom:.5rem;
  background: var(--bg); border:1px solid var(--muted); border-radius:var(--radius);
  color: var(--text);
}
.modal input:focus { outline:2px solid var(--accent); }
.modal button {
  width:100%; padding:.75rem; background:var(--accent);
  border:none; border-radius:var(--radius); color:var(--bg); cursor:pointer;
  transition: background var(--ease);
}
.modal button:hover { background:#cf711b; }
.error-message { color:#e74c3c; font-size:.875rem; min-height:1.2em; }
.actions { display:flex; gap:.5rem; }
.actions button {
  flex:1; padding:.75rem; border-radius:var(--radius);
}
.actions button:first-child {
  background:none; border:1px solid var(--muted); color:var(--text);
}
.actions button:first-child:hover { background:var(--surface); }

/* APP LAYOUT */
#app { display:flex; flex-direction:column; height:100%; }

/* HEADER */
.header {
  display:flex; align-items:center; justify-content:space-between;
  background:var(--surface); padding:var(--space); flex:0 0 auto;
}
.logo { font-size:1.125rem; }
.status {
  display:flex; align-items:center; gap:.5rem; color:var(--muted);
}
.status-dot {
  width:6px; height:6px; background:var(--accent); border-radius:50%;
  animation:pulse 2s infinite;
}
@keyframes pulse {0%,100%{opacity:1;}50%{opacity:0.5;}}
.channels-btn {
  background:none; border:none; color:var(--text); cursor:pointer;
}

/* CHANNEL MENU */
.channels-menu {
  background:var(--surface);
  max-height:30vh; overflow-y:auto; flex:0 0 auto;
}
.channel-btn {
  width:100%; text-align:left; padding:.75rem var(--space);
  background:none; border:none; color:var(--text); cursor:pointer;
  transition: background var(--ease), color var(--ease);
}
.channel-btn .num { display:inline-block; width:1.5rem; }
.channel-btn:hover,
.channel-btn.active {
  background:var(--accent); color:var(--bg);
}

/* CONTENT AREA */
.content {
  flex:1; display:flex; flex-direction:column; overflow:hidden;
}
.video-container {
  position:relative; flex:1; background:#000;
}
.video-container video {
  width:100%; height:100%; object-fit:contain;
}
.loader {
  position:absolute; inset:0; display:flex;
  align-items:center; justify-content:center;
  background: rgba(0,0,0,0.7);
}
.loader.hidden { display:none; }
.loader::after {
  content:''; width:32px; height:32px;
  border:3px solid var(--muted); border-top-color:var(--accent);
  border-radius:50%; animation:spin 1s linear infinite;
}
@keyframes spin { to{transform:rotate(360deg);} }
.play-overlay {
  position:absolute; inset:0; display:flex;
  align-items:center; justify-content:center;
  font-size:2rem; background:rgba(0,0,0,0.4);
  color:var(--text); opacity:0; transition:opacity var(--ease);
  cursor:pointer;
}
.play-overlay.visible { opacity:1; }

/* CONTROLS (STICKY BOTTOM) */
.controls {
  position: fixed; bottom:0; left:0; right:0;
  display:flex; align-items:center; justify-content:space-around;
  background:var(--surface); padding:var(--space); z-index:50;
}
.controls button,
.controls input[type="range"] {
  background:none; border:none; color:var(--text); cursor:pointer;
}
#volume { width:30%; }
.controls button:hover { color:var(--accent);}