* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #0a0a0f; color: #eee; height: 100vh; overflow: hidden;
}
.hidden { display: none !important; }

/* ── Login page ── */
#login-modal {
  position: fixed; inset: 0; background: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 100%);
  display: flex; align-items: center; justify-content: center; z-index: 2000;
}
#login-modal .box {
  background: rgba(26,26,46,.9); backdrop-filter: blur(12px);
  padding: 2.5rem 2rem 2rem; border-radius: 16px; width: 90%; max-width: 360px;
  text-align: center; border: 1px solid #2a2a4e;
}
.login-logo { width: 64px; height: 64px; border-radius: 50%; margin-bottom: .75rem; }
#login-modal .box h2 { font-size: 1.3rem; font-weight: 700; margin-bottom: .3rem; }
#login-modal .box p { color: #777; font-size: .85rem; margin-bottom: 1.25rem; }
#login-modal input {
  width: 100%; padding: .75rem; border-radius: 10px; border: 1px solid #333;
  background: #16213e; color: #eee; font-size: .95rem; text-align: center; margin-bottom: .75rem;
  transition: border-color .2s;
}
#login-modal input:focus { outline: none; border-color: #e94560; }
#login-modal button {
  width: 100%; padding: .75rem; border-radius: 10px; border: none;
  background: linear-gradient(135deg, #e94560, #c73650); color: #fff;
  font-weight: 600; font-size: 1rem; cursor: pointer; transition: opacity .2s;
}
#login-modal button:hover { opacity: .9; }
#login-modal .error { color: #e94560; font-size: .85rem; margin-top: .5rem; }

/* ── App layout ── */
#app { display: flex; flex-direction: column; height: 100dvh; }

/* ── Header ── */
header {
  display: flex; align-items: center; gap: .5rem;
  padding: .55rem 1rem; background: #12121e;
  border-bottom: 1px solid #1e1e32; flex-shrink: 0;
}
header h1 { font-size: 1.05rem; font-weight: 700; margin-right: auto; }
#menu-btn {
  display: none; background: none; border: none; color: #eee;
  font-size: 1.35rem; cursor: pointer; padding: 0; line-height: 1;
}
.header-info { display: flex; align-items: center; gap: .5rem; }
#reconnect-btn {
  background: none; border: 1px solid #333; color: #888; padding: .25rem .65rem;
  border-radius: 6px; cursor: pointer; font-size: .72rem; transition: border-color .2s, color .2s;
}
#reconnect-btn:hover { border-color: #e94560; color: #e94560; }

/* ── Main layout ── */
.main-layout { display: flex; flex: 1; overflow: hidden; min-height: 0; }

/* ── Sidebar ── */
#sidebar {
  width: 300px; min-width: 300px; background: #0e0e18;
  border-right: 1px solid #1e1e32; display: flex; flex-direction: column;
}
.search-box { padding: .65rem .75rem 0; }
#search {
  width: 100%; padding: .55rem .7rem; border-radius: 8px; border: 1px solid #222;
  background: #16162a; color: #ddd; font-size: .82rem; transition: border-color .2s;
}
#search:focus { outline: none; border-color: #e94560; }
#category-list {
  overflow-y: auto; flex: 1; padding: .35rem 0 .5rem; margin: 0;
  list-style: none;
}
#category-list > li {
  padding: .45rem .75rem; cursor: pointer; font-size: .82rem; color: #bbb;
  display: flex; align-items: center; gap: .5rem; transition: background .12s;
}
#category-list > li:hover { background: #1a1a2e; }
#category-list > li.active { background: #e94560; color: #fff; font-weight: 600; }
#category-list > li .count {
  margin-left: auto; font-size: .65rem; background: #1e1e32; padding: 0 6px;
  border-radius: 8px; color: #777; line-height: 1.5;
}
#category-list > li.active .count { background: rgba(255,255,255,.2); color: #fff; }
#category-list > li.cat-parent::before {
  content: '▸'; font-size: .7rem; color: #555; transition: transform .15s;
}
#category-list > li.cat-parent.expanded::before { transform: rotate(90deg); }
.cat-children { display: none; }
.cat-children.show { display: block; }
.channel-item {
  display: flex; align-items: center; gap: .5rem;
  padding: .3rem .75rem .3rem 1.75rem; cursor: pointer; font-size: .78rem;
  color: #888; transition: color .12s, background .12s;
}
.channel-item:hover { background: #1a1a2e; color: #ddd; }
.channel-item.active { color: #e94560; }
.channel-item .ch-icon { width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; }
.channel-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Player area ── */
main {
  flex: 1; display: flex; background: #07070a; min-height: 0;
}
#player-container {
  flex: 1; display: flex; flex-direction: column; background: #000; min-height: 0;
}
.player-wrap {
  flex: 1; display: flex; align-items: center; justify-content: center;
  min-height: 0; overflow: hidden;
}
#player {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  background: #000;
}
.now-playing {
  padding: .4rem .75rem; background: #12121e; font-size: .82rem; color: #999;
  width: 100%; text-align: center; flex-shrink: 0; border-bottom: 1px solid #1e1e32;
}

/* ── Placeholder ── */
.placeholder {
  display: flex; flex-direction: column; align-items: center; gap: .75rem;
  color: #444; font-size: 1rem;
}
.placeholder-logo { width: 20px; height: 20px; border-radius: 50%; opacity: .4; }

/* ── Footer ── */
footer {
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
  padding: .5rem .75rem; background: #12121e;
  border-top: 1px solid #2a2a4e; flex-shrink: 0;
}

.social-icons { display: flex; align-items: center; gap: .75rem; }
.social-icons a {
  color: #555; font-size: 1.1rem; transition: color .2s; text-decoration: none;
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
}
.social-icons a:hover { color: #e94560; }
.social-icons a img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
footer p { font-size: .65rem; color: #444; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #222; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #333; }

/* ═══════════════════════════════════════
   MOBILE (< 768px)
   ═══════════════════════════════════════ */
@media (max-width: 768px) {
  #menu-btn { display: block; }

  #sidebar {
    position: fixed; top: 0; left: -100%; width: 80%; min-width: 260px;
    height: 100%; z-index: 500; transition: left .25s ease;
    border-right: none; box-shadow: 4px 0 20px rgba(0,0,0,.5);
  }
  #sidebar.open { left: 0; }

  /* Overlay */
  .sidebar-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.5);
    z-index: 499; opacity: 0; pointer-events: none; transition: opacity .25s;
  }
  .sidebar-overlay.show { opacity: 1; pointer-events: auto; }

  main { min-height: 0; }
  .player-wrap { padding: .25rem; }
  #player { max-height: 45vh; }

  .channel-item { padding: .4rem .75rem .4rem 1.5rem; }
  .channel-item .ch-icon { width: 32px; height: 32px; }
  .channel-item span { font-size: .82rem; }
  #category-list > li { padding: .5rem .75rem; font-size: .86rem; }
}

@media (max-width: 480px) {
  header { padding: .45rem .7rem; }
  header h1 { font-size: .95rem; }
  #sidebar { width: 100%; min-width: 0; }
  .now-playing { font-size: .78rem; padding: .35rem .6rem; }
  #player { max-height: 40vh; }
}