:root{--bg:#07101d;--panel:#0d1e32;--card:#132a45;--accent:#47da9c;--muted:#8fa3bb;--line:#28445f;--ticker-size:18px;--columns:4;color-scheme:dark;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--bg);color:#f7f9fc}button{font:inherit}button:focus-visible{outline:none}body{user-select:none}.page{height:100%;padding:2.5vh 3vw;display:flex;flex-direction:column;background:radial-gradient(circle at 55% -15%,#17304b 0,transparent 38%),var(--bg)}.page[hidden]{display:none!important}
header{height:12vh;min-height:78px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;min-width:0}.brand-logo{width:62px;height:62px;display:grid;place-items:center;margin-right:18px;border:1px solid var(--line);border-radius:13px;background:linear-gradient(145deg,#17395d,#0b1828);color:var(--accent);font-weight:900;font-size:20px;overflow:hidden}.brand-logo img{width:100%;height:100%;object-fit:cover}.brand h1{font-size:clamp(25px,3vw,46px);line-height:1;margin:0 0 8px}.brand p{margin:0;color:var(--accent);font-size:clamp(12px,1.3vw,20px)}.header-actions{display:flex;align-items:center;gap:18px}.clock{font:700 clamp(22px,2.6vw,42px) ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--accent);white-space:nowrap}.icon-button{width:64px;height:54px;border:1px solid var(--line);border-radius:12px;background:#172433;color:#fff;font-size:30px;cursor:pointer}.icon-button:focus,.icon-button:hover{border-color:var(--accent);box-shadow:0 0 0 4px rgba(71,218,156,.18)}
.groups{display:flex;gap:10px;padding:2vh 0;overflow-x:auto;scrollbar-width:none}.groups::-webkit-scrollbar{display:none}.group-button{flex:0 0 auto;min-width:130px;padding:12px 22px;border:1px solid var(--line);border-radius:999px;background:#102239;color:var(--muted);cursor:pointer}.group-button.active{background:var(--accent);border-color:var(--accent);color:#06120d}.group-button:focus{box-shadow:0 0 0 4px rgba(71,218,156,.28);color:#fff}.group-button.active:focus{color:#06120d}
.channel-grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(var(--columns),minmax(0,1fr));grid-auto-rows:minmax(145px,1fr);gap:14px;overflow-y:auto;padding:4px 5px 20px;scrollbar-color:var(--line) transparent}.channel-card{position:relative;min-width:0;border:2px solid transparent;border-radius:14px;background:var(--card);color:#fff;cursor:pointer;overflow:hidden;padding:0;text-align:left}.channel-card:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(71,218,156,.2);transform:scale(1.018);z-index:2}.channel-art{height:68%;min-height:95px;background:linear-gradient(145deg,#173c62,#0b2038);display:grid;place-items:center;overflow:hidden}.channel-art img{width:100%;height:100%;object-fit:cover}.channel-fallback{font-size:clamp(28px,3vw,54px);font-weight:900;color:rgba(255,255,255,.9)}.live-badge{position:absolute;left:12px;top:11px;padding:4px 8px;border-radius:5px;background:#e83f54;font-size:10px;font-weight:800;letter-spacing:1px}.channel-meta{height:32%;min-height:48px;padding:11px 14px;display:flex;flex-direction:column;justify-content:center}.channel-meta strong{font-size:clamp(14px,1.25vw,21px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.channel-meta span{margin-top:4px;color:var(--muted);font-size:clamp(10px,.85vw,14px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.state-card{grid-column:1/-1;align-self:center;justify-self:center;display:flex;flex-direction:column;align-items:center;color:var(--muted);font-size:18px}.state-card strong{color:#fff;font-size:26px;margin-bottom:8px}
.player-page{position:fixed;inset:0;background:#000;overflow:hidden}.player-page[hidden]{display:none}.player-page video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}.player-message{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-size:24px;pointer-events:none}.player-message.hidden{display:none}.player-info{position:absolute;left:0;right:0;bottom:0;background:rgba(10,27,46,.96);transition:transform .25s ease,opacity .25s ease}.player-info.hidden{transform:translateY(100%);opacity:0}.ticker-window{height:max(34px,calc(var(--ticker-size) + 16px));overflow:hidden;position:relative;border-bottom:1px solid rgba(143,163,187,.16)}.ticker{position:absolute;top:50%;left:100%;transform:translateY(-50%);font-size:var(--ticker-size);font-weight:800;color:var(--accent);white-space:nowrap;will-change:transform}.ticker.running{animation:ticker-move var(--ticker-duration,14s) linear infinite}@keyframes ticker-move{from{transform:translate(0,-50%)}to{transform:translate(calc(-100vw - 100%),-50%)}}
.player-back{position:absolute;z-index:5;left:22px;top:20px;padding:12px 18px;border:1px solid rgba(255,255,255,.3);border-radius:10px;background:rgba(10,27,46,.88);color:#fff;font-weight:750;cursor:pointer;box-shadow:0 5px 22px rgba(0,0,0,.35)}.player-back:hover,.player-back:focus{outline:none;border-color:var(--accent);background:var(--panel);box-shadow:0 0 0 4px rgba(71,218,156,.25)}
.info-row{min-height:58px;padding:8px 3vw;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:28px}.info-row .clock{font-size:clamp(18px,1.7vw,29px)}.info-row strong{font-size:clamp(18px,2vw,32px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.info-row span{color:#d0d7df;font-size:clamp(12px,1.15vw,18px);white-space:nowrap}
@media(max-width:1000px){:root{--columns:3}.page{padding:18px 22px}.channel-grid{gap:10px}.brand-logo{width:52px;height:52px}.group-button{min-width:105px;padding:10px 17px}.info-row{gap:14px}}
@media(max-width:700px){:root{--columns:2}.header-actions .clock{display:none}.icon-button{width:52px;height:48px}.groups{padding:12px 0}.channel-grid{grid-auto-rows:minmax(125px,1fr)}.info-row{grid-template-columns:auto minmax(0,1fr)}.info-row span{display:none}}
.channel-art img{object-fit:contain;padding:3%;background:rgba(5,13,23,.18)}
.channel-card{display:grid;grid-template-rows:minmax(90px,1fr) minmax(58px,auto)}
.channel-art{position:relative;height:auto;min-height:0}
.channel-art img{position:absolute;inset:4%;width:92%;height:92%;padding:0;object-fit:contain;background:transparent}
.channel-meta{height:auto;min-height:58px;padding:10px 14px;overflow:hidden}