:root {
  --bg:       #0c0c0c;
  --surface:  #161616;
  --card:     #1f1f1f;
  --hover:    #2a2a2a;
  --border:   #2e2e2e;
  --accent:   #3b82f6;
  --text:     #efefef;
  --muted:    #777;
  --header:   52px;
}
* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; }
body { background:var(--bg); color:var(--text); font:14px/1.4 system-ui,-apple-system,sans-serif; overflow:hidden; }

/* ── Header ── */
#header {
  height: var(--header);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  position: fixed; top:0; left:0; right:0; z-index:100;
}
.logo { font-size:17px; font-weight:700; white-space:nowrap; }
#search {
  flex:1; max-width:380px;
  background:var(--card); border:1px solid var(--border); border-radius:6px;
  padding:6px 11px; color:var(--text); font-size:13px; outline:none;
}
#search:focus { border-color:var(--accent); }
.status-text { font-size:12px; color:var(--muted); white-space:nowrap; margin-left:auto; }
.btn-sm {
  background:var(--card); border:1px solid var(--border); border-radius:5px;
  color:var(--text); cursor:pointer; padding:5px 10px; font-size:12px; white-space:nowrap;
}
.btn-sm:hover { background:var(--hover); }

/* ── Layout ── */
#app { height:100%; display:flex; flex-direction:column; }
#layout {
  margin-top: var(--header);
  flex:1; display:grid;
  grid-template-columns: max-content 1fr;
  overflow:hidden;
}

/* ── Sidebar ── */
#sidebar {
  background:var(--surface);
  border-right:1px solid var(--border);
  overflow-y:auto; overflow-x:hidden;
  width: max-content;
}
.sb-section { padding:6px 0; }
.sb-label {
  font-size:10px; letter-spacing:.8px; color:var(--muted);
  padding:8px 14px 4px; text-transform:uppercase; white-space:nowrap;
}
#sidebar ul { list-style:none; }
#sidebar li {
  display:flex; align-items:center;
  padding:6px 14px; cursor:pointer; gap:8px;
  white-space:nowrap;
}
#sidebar li:hover { background:var(--hover); }
#sidebar li.active { background:var(--accent); color:#fff; }
#sidebar li .lname { font-size:13px; }
#sidebar li .cnt {
  font-size:10px; color:var(--muted);
  background:var(--bg); padding:1px 5px; border-radius:8px;
}
#sidebar li.active .cnt { background:rgba(255,255,255,.2); color:#fff; }

/* ── Content ── */
#content { display:flex; flex-direction:column; overflow:hidden; }

/* ── Player ── */
#player-panel {
  flex-shrink:0;
  background:#000;
  border-bottom:1px solid var(--border);
}
#player-bar {
  background:var(--surface);
  display:flex; align-items:center; gap:10px;
  padding:7px 14px;
  border-bottom:1px solid var(--border);
}
#pl-logo { width:34px; height:34px; object-fit:contain; background:var(--card); border-radius:4px; flex-shrink:0; }
#pl-info { flex:1; min-width:0; }
#pl-name { font-weight:600; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#pl-cat  { font-size:11px; color:var(--muted); }
#player-video { width:100%; max-height:320px; display:block; background:#000; }

/* ── Channels ── */
#channels-wrap { flex:1; overflow-y:auto; padding:12px; }
#channels-meta { font-size:12px; color:var(--muted); margin-bottom:10px; }

#channel-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(145px,1fr));
  gap:7px;
}
#channel-grid.view-list {
  display:flex; flex-direction:column; gap:2px;
}

/* ── List view rows ── */
.ch-row {
  display:flex; align-items:center; gap:10px;
  padding:5px 8px 8px; border-radius:5px; cursor:pointer;
  border:1px solid transparent; min-height:40px;
  position:relative;
}
.ch-row:hover { background:var(--hover); border-color:var(--border); }
.ch-row.playing { border-color:var(--accent); }
.ch-row-logo {
  width:28px; height:28px; flex-shrink:0;
  background:#111; border-radius:3px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.ch-row-logo img { max-width:100%; max-height:100%; object-fit:contain; }
.ch-row-name {
  font-size:13px; font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  flex: 0 0 160px;
}
.ch-row-epg {
  flex:1; min-width:0; display:flex; align-items:center; gap:6px; overflow:hidden;
}
.ch-row-now {
  flex:1; min-width:0; font-size:12px; color:#4ade80;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ch-row-time {
  font-size:11px; color:var(--muted); white-space:nowrap; flex-shrink:0;
}
.ch-row-next {
  font-size:11px; color:var(--muted); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; flex-shrink:0; max-width:200px;
}
.ch-epg-bar {
  position:absolute; bottom:3px; left:48px; right:8px;
  height:2px; background:var(--border); border-radius:1px; overflow:hidden;
}
.ch-epg-fill { height:100%; background:var(--accent); opacity:.6; }

/* ── Schedule panel ── */
#schedule-panel {
  position:fixed; top:var(--header); right:0; bottom:0; width:300px;
  background:var(--surface); border-left:1px solid var(--border);
  display:flex; flex-direction:column; z-index:60;
  transform:translateX(100%); transition:transform .2s ease;
}
#schedule-panel.open { transform:translateX(0); }
#sch-header {
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; border-bottom:1px solid var(--border); flex-shrink:0;
}
#sch-ch-logo {
  width:28px; height:28px; object-fit:contain; background:var(--card);
  border-radius:3px; flex-shrink:0;
}
#sch-ch-name { flex:1; font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#sch-list { flex:1; overflow-y:auto; padding:6px 0; }
.sch-item {
  display:flex; gap:10px; align-items:baseline;
  padding:6px 14px; font-size:12px;
}
.sch-item:hover { background:var(--hover); }
.sch-item.now { background:rgba(59,130,246,.12); }
.sch-item.now .sch-prog { color:var(--text); font-weight:500; }
.sch-time { color:var(--muted); white-space:nowrap; flex-shrink:0; width:40px; }
.sch-prog { color:var(--muted); }

.ch-card {
  background:var(--card); border:1px solid transparent;
  border-radius:6px; cursor:pointer; overflow:hidden;
}
.ch-card:hover { background:var(--hover); border-color:var(--border); }
.ch-card.playing { border-color:var(--accent); }

.ch-logo {
  height:72px; display:flex; align-items:center; justify-content:center;
  background:#111; overflow:hidden;
}
.ch-logo img { max-width:100%; max-height:100%; object-fit:contain; }
.ch-fallback {
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  font-size:22px; font-weight:700; color:rgba(255,255,255,.7);
}
.ch-info { padding:6px 8px; }
.ch-name { font-size:12px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ch-cat  { font-size:10px; color:var(--muted); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ch-now  { font-size:10px; color:#4ade80; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── Endless scroll sentinel ── */
#pagination { padding:8px 0 16px; }

.loading, .empty { text-align:center; padding:50px 20px; color:var(--muted); }