:root { --bg:#0b0f17; --bg2:#0a0c12; --panel:#111726; --border:rgba(255,255,255,.08); --text:#e6e9ef; --muted:#8b93a7; --accent:#2f7dff; --live:#e84a5f; }
* { box-sizing:border-box; }
html { scroll-behavior: smooth; }
body {   margin: 0; font-family: Inter,Segoe UI,Arial,sans-serif; color: var(--text); background: linear-gradient(180deg, var(--bg), var(--bg2)); background-repeat: no-repeat; background-attachment: scroll; background-size: 100% auto; min-height: 100vh; }

.header { top:0; z-index:30; background:rgba(0,0,0,.35); backdrop-filter:blur(8px); border-bottom:1px solid var(--border); }
.header__inner { max-width:1280px; margin:0 auto; display:flex; align-items:center; gap:16px; padding:12px 16px; }
.brand { display:flex; align-items:center; gap:10px; }
.brand__logo { width:32px; height:32px; border-radius:12px; background:linear-gradient(135deg,#4f75ff,#2f7dff); display:grid; place-items:center; color:#fff; font-weight:800; box-shadow:0 4px 16px rgba(47,125,255,.35); }
.brand__title { font-weight:700; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; }
.brand:hover { opacity:0.9; }

.container { max-width:1280px; margin:0 auto; padding:16px; display:grid; grid-template-columns:260px 1fr 340px; gap:16px; }
body.home .container { grid-template-columns:260px 1fr; }
@media(max-width:1100px) { .container { grid-template-columns:240px 1fr 340px; } }
@media(max-width:820px) { .container { display:flex; flex-direction:column; gap:16px; } .main{order:1;} .epg{order:2;} .sidebar{order:3;} }

.sidebar { background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:16px; overflow:hidden; max-height:60vh; display:flex; flex-direction:column; }
.sidebar h2 { margin:0; padding:14px 14px; background:rgba(255,255,255,.04); border-bottom:1px solid var(--border); font-size:15px; }
.sidebar .search { padding:10px 12px; border-bottom:1px solid var(--border); }
.sidebar input { width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:rgba(255,255,255,.05); color:var(--text); }
.channel-list { max-height:calc(60vh - 60px); overflow:auto; list-style:none; margin:0; padding:6px; }
.channel-list li { border-radius:12px; }
.channel-list a { display:flex; align-items:center; gap:10px; padding:10px 12px; color:var(--text); text-decoration:none; border:1px solid transparent; }
.channel-list a:hover { background:rgba(255,255,255,.05); border-color:var(--border); }
.channel-list li.active a { background:rgba(47,125,255,.12); border-color:#2f7dff; border-radius:12px; }


.channel-logo { width: 44px; height: 44px; border-radius: 12px; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 4px; box-sizing: border-box; flex-shrink: 0; }
.channel-logo img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 0; }

.channel-name { font-size:14px; }
.channel-cat { font-size:12px; color:var(--muted); }

.main { background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:16px; padding:12px; }

.catalog { display:block; }
.cat-block { margin-bottom:36px; }
.cat-title { margin:6px 6px 8px; font-weight:700; color:var(--text); opacity:.9; }
.tiles { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px,1fr)); gap:12px; padding:4px; }
.tile { display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border:1px solid var(--border); border-radius:12px; background:rgba(255,255,255,.02); text-decoration:none; color:var(--text); }
.tile:hover { background:rgba(255,255,255,.06); }
.tile-text { display:flex; flex-direction:column; }
.tile-name { font-weight:600; font-size:14px; }
.tile-cat { font-size:12px; color:var(--muted); }

.player { position:relative; border-radius:12px; overflow:hidden; background:black; }
.player video { width:100%; height:56vh; max-height:70vh; background:black; }
.badges { position:absolute; left:10px; top:10px; display:flex; gap:8px; }
.badge { font-size:12px; padding:4px 8px; border-radius:999px; background:rgba(255,255,255,.12); border:1px solid var(--border); }
.badge.live { background:var(--live); color:#fff; border-color:transparent; }

.meta { display:flex; flex-direction:column; justify-content:flex-start; padding:12px; gap:6px; }
.meta .title h1 { margin:0; font-size:1.25rem; font-weight:700; color:var(--text); }
.meta .muted { font-size:13px; color:var(--muted); }
.meta .text { margin-top:auto; font-size:14px; color:var(--text); line-height:1.4; }

h1 { font-size:100%; margin:0; padding:0; }

.mp { padding:5px 5px 25px 5px; }
.mp h1 { padding:0 0 5px 0; }
.mp .text { margin-top:auto; font-size:14px; color:var(--muted); line-height:1.2; }

.epg { background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:16px; overflow:hidden; max-height:60vh; }
.epg h2 { margin:0; padding:14px; background:rgba(255,255,255,.04); border-bottom:1px solid var(--border); font-size:15px; }
.epg-list { max-height:calc(60vh - 40px); overflow:auto; margin:0; padding:8px; list-style:none; }
.epg-item { display:grid; grid-template-columns:72px 1fr; gap:10px; padding:10px; border-radius:12px; }
.epg-item:hover { background:rgba(255,255,255,.05); }
.epg-time { font-weight:600; font-variant-numeric:tabular-nums; }
.epg-title { font-weight:600; }
.epg-desc { color:var(--muted); font-size:12px; }
.epg-item.now { outline:1px solid #2f7dff; background:rgba(47,125,255,.08); }
.epg-item.last { color:var(--muted); }

.notice { padding:10px 12px; color:var(--muted); font-size:13px; }
.footer { border-top:1px solid var(--border); margin-top:10px; padding:12px; color:var(--muted); font-size:12px; }
.footer a { color: var(--accent); text-decoration: underline; }
.footer-container { display: flex; justify-content: space-between; align-items: center; grid-template-columns: 1fr; gap: 12px; }
.footer-container a { color: var(--accent); text-decoration: none; }
.footer-container a:hover { text-decoration: underline; }


.channel-list::-webkit-scrollbar, .epg-list::-webkit-scrollbar { width:8px; }
.channel-list::-webkit-scrollbar-thumb, .epg-list::-webkit-scrollbar-thumb { background:rgba(47,125,255,0.3); border-radius:4px; }
.channel-list::-webkit-scrollbar-track, .epg-list::-webkit-scrollbar-track { background:rgba(255,255,255,0.05); }

.player.placeholder { display:flex; align-items:center; justify-content:center; height:56vh; background:rgba(0,0,0,.3); border-radius:12px; color:#fff; font-size:18px; font-weight:600; text-align:center; }

.channel-list .cat-title { padding:8px 12px; font-weight:700; font-size:13px; color:var(--accent); background:rgba(255,255,255,.02); border-bottom:1px solid var(--border); cursor:default; }

.channel-list li a { display:flex; align-items:center; gap:10px; padding:8px 12px; text-decoration:none; border-radius:10px; color:var(--text); border:1px solid transparent; transition:background .2s, border-color .2s; }
.channel-list li a:hover { background:rgba(255,255,255,.05); border-color:var(--border); }
.channel-list li.active a { background:rgba(47,125,255,.12); border-color:#2f7dff; }