:root{
  --bg:#0e1116; --panel:#161b22; --panel2:#1d242e; --line:#2b3441;
  --ink:#e8edf3; --muted:#8b97a7; --accent:#4cc2ff; --accent2:#ffd34c;
  --live:#2ec27e; --live-bg:#163a2a; --chanw:140px; --rowh:66px; --pxmin:5px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif;
  display:flex; flex-direction:column;
}

/* ---- top bar ---- */
.topbar{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:10px 16px; background:linear-gradient(180deg,#1b2330,#141a22);
  border-bottom:2px solid var(--line); position:sticky; top:0; z-index:40;
}
.brand{display:flex; align-items:center; gap:10px}
.brand h1{font-size:20px; margin:0; font-weight:600; letter-spacing:.3px}
.brand h1 b{color:var(--accent)}
.tag{font-size:11px; background:var(--accent2); color:#241c00; padding:2px 7px;
  border-radius:999px; vertical-align:middle; font-weight:700}
.dot{width:12px;height:12px;border-radius:50%;background:var(--live);
  box-shadow:0 0 10px var(--live); animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.4}}
.controls{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
#country{
  background:var(--panel2); border:1px solid var(--line); color:var(--ink);
  padding:8px 10px; border-radius:8px; font-size:14px; outline:none; cursor:pointer;
}
#country:focus{border-color:var(--accent)}
#search{
  background:var(--panel2); border:1px solid var(--line); color:var(--ink);
  padding:8px 12px; border-radius:8px; width:240px; font-size:14px; outline:none;
}
#search:focus{border-color:var(--accent)}
.chk{font-size:13px; color:var(--muted); display:flex; align-items:center; gap:5px; cursor:pointer}
#nowBtn{
  background:var(--accent); color:#04212f; border:none; padding:8px 14px;
  border-radius:8px; font-weight:700; cursor:pointer; font-size:14px;
}
#nowBtn:hover{filter:brightness(1.1)}
.meta{margin-left:auto; font-size:12px; color:var(--muted); text-align:right}

/* ---- epg grid ---- */
.epg{flex:1; overflow:auto; position:relative; background:var(--bg)}
.loading{padding:40px; color:var(--muted)}

.ruler{
  display:flex; position:sticky; top:0; z-index:30; height:34px;
  background:var(--panel); border-bottom:1px solid var(--line); width:max-content;
}
.corner{
  position:sticky; left:0; z-index:31; width:var(--chanw); min-width:var(--chanw);
  background:var(--panel); border-right:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; color:var(--muted); font-weight:700;
}
.ticks{position:relative; height:34px}
.tick{position:absolute; top:0; height:34px; border-left:1px solid var(--line);
  padding:8px 0 0 6px; font-size:12px; color:var(--muted); white-space:nowrap}
.tick.day{color:var(--accent2); font-weight:700}

.row{display:flex; height:var(--rowh); border-bottom:1px solid var(--line); width:max-content}
.row:nth-child(even) .track{background:rgba(255,255,255,.012)}
.chan{
  position:sticky; left:0; z-index:20; width:var(--chanw); min-width:var(--chanw);
  background:var(--panel); border-right:1px solid var(--line);
  display:flex; align-items:center; gap:9px; padding:0 8px;
}
.chan img{width:46px; height:34px; object-fit:contain; flex:0 0 auto;
  background:#fff1; border-radius:5px}
.chan .ci{min-width:0}
.chan .cn{font-size:12px; font-weight:700; color:var(--ink); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis}
.chan .cnum{font-size:11px; color:var(--muted)}

.track{position:relative; height:var(--rowh)}
.prog{
  position:absolute; top:5px; height:calc(var(--rowh) - 10px);
  background:var(--panel2); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:7px; padding:6px 8px; overflow:hidden; cursor:pointer;
  display:flex; flex-direction:column; gap:2px;
}
.prog:hover{background:#26303d; border-color:var(--accent)}
.prog.live{border-left-color:var(--live); background:var(--live-bg)}
.prog.live:hover{background:#1d4a35}
.prog .pt{font-size:13px; font-weight:600; line-height:1.15;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.prog .ph{font-size:11px; color:var(--muted); white-space:nowrap}
.prog .hd{display:inline-block; font-size:9px; font-weight:800; color:var(--accent2);
  border:1px solid var(--accent2); border-radius:3px; padding:0 3px; margin-left:5px}

.nowline{position:absolute; top:34px; bottom:0; width:2px; background:var(--live);
  z-index:25; pointer-events:none; box-shadow:0 0 8px var(--live)}
.nowline::before{content:""; position:absolute; top:0; left:-4px; width:10px; height:10px;
  border-radius:50%; background:var(--live)}

.empty{padding:30px; color:var(--muted)}

/* ---- modal ---- */
.modal{position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:60;
  display:flex; align-items:center; justify-content:center; padding:20px}
.modal.hidden{display:none}
.modal-card{background:var(--panel); border:1px solid var(--line); border-radius:14px;
  max-width:540px; width:100%; padding:22px; position:relative}
.close{position:absolute; top:10px; right:14px; background:none; border:none;
  color:var(--muted); font-size:26px; cursor:pointer; line-height:1}
.modal-head{display:flex; gap:14px; align-items:center; margin-bottom:12px}
.modal-head img{width:60px; height:46px; object-fit:contain; background:#fff1; border-radius:6px}
.m-chan{font-size:12px; color:var(--accent); font-weight:700}
.modal-head h2{margin:2px 0 0; font-size:20px}
.m-time{color:var(--muted); font-size:14px; margin-bottom:8px}
.m-badges{display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap}
.badge{font-size:11px; font-weight:700; padding:3px 8px; border-radius:999px;
  background:var(--panel2); border:1px solid var(--line); color:var(--muted)}
.badge.live{background:var(--live-bg); border-color:var(--live); color:var(--live)}
.badge.hd{color:var(--accent2); border-color:var(--accent2)}
.m-desc{color:var(--ink); line-height:1.5; font-size:14px; margin:0; white-space:pre-wrap}

@media (max-width:640px){
  :root{--chanw:104px; --pxmin:4px}
  .meta{width:100%; text-align:left; margin:0}
  #search{width:160px}
}