:root{
  --bg:#0b0f17;--panel:#111827;--panel2:#182033;--line:#243049;
  --text:#e8edf6;--muted:#8b97ad;--accent:#3b82f6;--accent2:#22d3ee;--danger:#ef4444;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);
  font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Georgian",sans-serif}
button,input,select{font:inherit;color:inherit}
.muted{color:var(--muted)}

.app{display:grid;grid-template-columns:380px 1fr;height:100vh;height:100dvh}
.side{display:flex;flex-direction:column;min-height:0;background:var(--panel);border-right:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;padding:14px 16px 6px}
.brand h1{margin:0;font-size:18px;letter-spacing:.3px}
.dot{width:10px;height:10px;border-radius:50%;background:var(--accent2);box-shadow:0 0 10px var(--accent2)}
.filters{display:grid;gap:8px;padding:8px 16px}
input[type=search],select{width:100%;padding:11px 12px;border-radius:10px;border:1px solid var(--line);
  background:var(--panel2);outline:none}
input[type=search]:focus,select:focus{border-color:var(--accent)}
.meta{padding:0 16px 6px;font-size:12px;color:var(--muted)}

.list{flex:1;overflow-y:auto;padding:4px 8px 16px;-webkit-overflow-scrolling:touch}
.ch{display:flex;align-items:center;gap:12px;width:100%;padding:8px 10px;margin:2px 0;border:2px solid transparent;
  border-radius:12px;background:transparent;text-align:left;cursor:pointer}
.ch:hover{background:var(--panel2)}
.ch.active{background:#1b2a4a;border-color:#27427a}
.ch:focus-visible{outline:none;border-color:var(--accent2);background:var(--panel2)}
.ch .lg{flex:0 0 46px;height:34px;display:flex;align-items:center;justify-content:center;background:#0d1320;border-radius:8px;overflow:hidden}
.ch .lg img{max-width:100%;max-height:100%;object-fit:contain}
.ch .tx{min-width:0;flex:1}
.ch .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.ch .pg{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch .mini{height:3px;background:#1f2a40;border-radius:3px;margin-top:5px;overflow:hidden}
.ch .mini i{display:block;height:100%;background:var(--accent)}
.more{display:block;margin:10px auto;padding:9px 18px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);cursor:pointer}
.empty{padding:24px;text-align:center;color:var(--muted)}

.stage{display:flex;flex-direction:column;min-width:0;min-height:0;overflow-y:auto}
.player{position:relative;background:#000;aspect-ratio:16/9;max-height:68vh;width:100%}
.player video{width:100%;height:100%;background:#000;display:block}
.unmute{position:absolute;top:10px;left:10px;z-index:3;padding:6px 12px;border:0;border-radius:999px;background:rgba(0,0,0,.65);color:#fff;font-size:13px;cursor:pointer}
.unmute[hidden]{display:none}
.msg{position:absolute;top:auto;left:12px;right:12px;bottom:60px;padding:10px 14px;border-radius:10px;background:rgba(239,68,68,.92);font-size:14px}

.info{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line)}
.logo{width:56px;height:56px;object-fit:contain;background:#0d1320;border-radius:10px;padding:4px}
.info-text{flex:1;min-width:0}
.info h2{margin:0;font-size:20px}
.now{margin-top:2px;display:flex;gap:10px;flex-wrap:wrap;font-weight:600}
.now .muted{font-weight:400}
.bar{height:4px;background:#1f2a40;border-radius:4px;margin:8px 0 4px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2))}
.desc{margin:4px 0 0;font-size:13px}
.btn{border:1px solid var(--line);background:var(--panel2);border-radius:10px;padding:8px 12px;cursor:pointer;font-size:18px}
.btn:focus-visible{outline:2px solid var(--accent2)}

.epg{padding:14px 18px 40px}
.epg h3{margin:0 0 10px;font-size:15px;color:var(--muted);text-transform:uppercase;letter-spacing:.8px}
.day{margin:14px 0 6px;font-size:12px;color:var(--accent2);font-weight:700}
.pr{display:grid;grid-template-columns:56px 1fr;gap:10px;padding:9px 10px;border-radius:10px;border:1px solid transparent}
.pr .t{color:var(--muted);font-variant-numeric:tabular-nums}
.pr .n{font-weight:600}
.pr .d{font-size:12.5px;color:var(--muted);margin-top:2px}
.pr.past{opacity:.45}
.pr.cur{background:#15233f;border-color:#27427a}
.pr.rec{cursor:pointer}
.pr.rec:hover,.pr.rec:focus-visible{background:var(--panel2);border-color:var(--line);outline:0}
.pr.rec .n::after{content:' ▶';color:var(--accent2);font-size:11px}
.pr.past.rec{opacity:.85}
.pr.rec-on{background:#15233f;border-color:var(--accent2)}
.past-toggle{display:block;width:100%;margin:0 0 6px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);text-align:left;cursor:pointer;font-size:14px}
.past-toggle:focus-visible{outline:2px solid var(--accent2)}
.past-box[hidden]{display:none}
.rec-bar{margin-top:6px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px}
.rec-bar[hidden]{display:none}
.rec-b{background:var(--accent2);color:#04121a;font-weight:700;border-radius:6px;padding:1px 7px;font-size:12px}
.rec-t{min-width:0;flex:1 1 120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.live-btn{border:1px solid var(--line);background:var(--panel2);border-radius:8px;padding:4px 10px;cursor:pointer;font-size:13px;color:var(--danger)}
.live-btn:focus-visible{outline:2px solid var(--accent2)}

/* ---------- Weather + exchange rates (fits inside the sidebar, never changes page height) ---------- */
.widgets{display:grid;gap:8px;padding:6px 16px 4px}
.widgets[hidden],.wx[hidden],.fx[hidden]{display:none}
.wx{position:relative;background:var(--panel2);border:1px solid var(--line);border-radius:12px}
.wx-head{display:flex;align-items:center;gap:8px;padding:6px 8px 6px 12px}
.wx-ico{font-size:22px;line-height:1}
.wx-temp{font-weight:700;font-size:17px;min-width:2ch}
.wx-city{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:6px;padding:6px 10px;border:1px solid var(--line);
  border-radius:8px;background:var(--bg);cursor:pointer;font-size:13px;text-align:left}
.wx-city span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wx-city i{font-style:normal;color:var(--muted);font-size:11px}
.wx-city:focus-visible,.wx-opt:focus-visible{outline:2px solid var(--accent2);outline-offset:-2px}
.wx-menu{position:absolute;z-index:30;left:8px;right:8px;top:44px;max-height:240px;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;padding:4px;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 28px rgba(0,0,0,.55)}
.wx-menu[hidden]{display:none}
.wx-opt{display:block;width:100%;padding:8px 10px;border:0;border-radius:8px;background:transparent;text-align:left;cursor:pointer;font-size:14px}
.wx-opt:hover,.wx-opt:focus-visible{background:var(--panel2)}
.wx-opt.sel{background:#1b2a4a;font-weight:600}
.wx-tg{border:0;background:transparent;color:var(--muted);cursor:pointer;padding:4px 8px;font-size:15px;line-height:1;transition:transform .2s}
.wx-tg:focus-visible{outline:2px solid var(--accent2);border-radius:6px}
.wx.closed .wx-tg{transform:rotate(-90deg)}
.wx.closed .wx-days{display:none}
.wx-days:empty{display:none}
.wx-days{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--line);border-radius:0 0 12px 12px;overflow:hidden}
.wx-d{padding:6px 2px;text-align:center;font-size:12px;line-height:1.35}
.wx-d .dn{color:var(--muted)}
.wx-d .di{font-size:18px;line-height:1.3}
.wx-d .dt{font-variant-numeric:tabular-nums}
.wx-d .dt b{font-weight:600}
.wx-d .dt span{color:var(--muted)}
.fx{display:grid;grid-template-columns:repeat(auto-fit,minmax(74px,1fr));gap:6px}
.fx-i{padding:5px 8px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);font-size:12px;line-height:1.3;min-width:0}
.fx-c{display:flex;justify-content:space-between;color:var(--muted);font-weight:600}
.fx-v{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.fx-d.up{color:#22c55e}
.fx-d.down{color:var(--danger)}

@media (max-width:820px){
  .app{display:flex;flex-direction:column;height:auto;min-height:100dvh}
  .stage{display:contents}
  .player{order:1;position:sticky;top:0;z-index:5;max-height:none}
  .info{order:2}
  .side{order:4;border-right:0;min-height:50vh}
  /* TV guide sits right under the player / now-playing info, compact and scrollable */
  .epg{order:3;padding:8px 12px 10px;border-bottom:1px solid var(--line)}
  .epg h3{margin:0 0 6px;font-size:13px}
  .epg-list{max-height:min(32vh,230px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .epg .pr{grid-template-columns:52px 1fr;gap:8px;padding:6px 8px;font-size:14px}
  .epg .pr .d{display:none}
  .epg .day{margin:8px 0 4px}
  .epg .past-toggle{padding:7px 10px;font-size:13px}
  .list{overflow:visible}
  .info h2{font-size:17px}
}
@media (min-width:1600px){
  body{font-size:17px}
  .app{grid-template-columns:460px 1fr}
}

/* ================= TV mode (Android TV / smart TV / ?tv=1) =================
   Fullscreen player; channel list and TV guide slide in as overlays; remote-control friendly. */
.chnum,.next,.tv-hint,.tv-toast,.epg-live{display:none}
html.tv{cursor:none}
html.tv,html.tv body{height:100%;overflow:hidden;background:#000}
html.tv body{font-size:20px}
html.tv .app{display:block;height:100vh;height:100dvh;min-height:0}
html.tv .stage{display:block;overflow:visible;min-height:0}
html.tv .player{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1;width:100%;height:100%;max-height:none;aspect-ratio:auto}
html.tv .player video{object-fit:contain}
html.tv video::-webkit-media-controls,html.tv video::-webkit-media-controls-enclosure{display:none!important}
html.tv #prevCh,html.tv #nextCh,html.tv #fs{display:none}
html.tv :focus{outline:3px solid var(--accent2);outline-offset:2px}
html.tv input:focus,html.tv select:focus{outline-offset:-2px}
html.tv .unmute{font-size:18px;padding:10px 18px}

/* now-playing banner (auto-hides) */
html.tv .info{position:fixed;left:0;right:0;bottom:0;z-index:10;padding:60px 56px 36px;border:0;
  background:linear-gradient(to top,rgba(0,0,0,.92),rgba(0,0,0,.6) 60%,transparent);
  opacity:0;transform:translateY(30px);transition:opacity .25s,transform .25s;pointer-events:none}
html.tv.show-info:not(.tv-open) .info{opacity:1;transform:none}
html.tv .logo{width:88px;height:88px}
html.tv .info h2{font-size:34px}
html.tv .chnum{display:block;color:var(--accent2);font-weight:700;font-size:18px}
html.tv .now{font-size:22px}
html.tv .next{display:block;color:var(--muted);font-size:18px;margin-top:2px}
html.tv .desc{display:none}
html.tv .tv-hint{display:block;margin-top:10px;color:var(--muted);font-size:15px}
html.tv .rec-bar{font-size:18px}
html.tv .live-btn{font-size:16px}

/* channel list (left) + guide (right) */
html.tv .side,html.tv .epg{position:fixed;top:0;bottom:0;z-index:20;margin:0;background:rgba(14,20,33,.97);
  transition:transform .25s ease;min-height:0}
html.tv .side{left:0;width:min(560px,44vw);order:0;border-right:1px solid var(--line);transform:translateX(-104%)}
html.tv .epg{right:0;width:min(620px,46vw);padding:18px 20px;border:0;border-left:1px solid var(--line);overflow-y:auto;transform:translateX(104%)}
html.tv.tv-open .side,html.tv.tv-open .epg{transform:none}
html.tv .list{overflow-y:auto;overflow-x:hidden}
html.tv .ch{padding:12px 14px}
html.tv .epg h3{font-size:16px;margin:0 0 10px}
html.tv .epg-list{max-height:none;overflow:visible}
html.tv .epg .pr{grid-template-columns:76px 1fr;gap:12px;padding:10px 12px;font-size:19px}
html.tv .epg .pr .d{display:block;font-size:15px}
html.tv .epg .day{margin:14px 0 6px;font-size:14px}
html.tv .epg .past-toggle{padding:12px 14px;font-size:18px}
html.tv .epg .epg-live:not([hidden]){display:block;color:var(--danger)}
html.tv .widgets{display:none}
html.tv .pr:focus{background:var(--panel2)}

.tv-toast{position:fixed;z-index:40;top:36px;right:44px;padding:12px 22px;border-radius:14px;background:rgba(0,0,0,.78);
  border:1px solid var(--line);font-size:26px;font-weight:700}
html.tv .tv-toast:not([hidden]){display:block}