:root {
  --bg: #071822;
  --bg2: #0b2532;
  --panel: rgba(16, 43, 58, .94);
  --panel2: rgba(24, 58, 76, .92);
  --text: #f4f8fa;
  --muted: #a9bec8;
  --accent: #56b9dc;
  --accent2: #8ed6ef;
  --gold: #ffd65a;
  --danger: #ff7373;
  --ok: #74db9a;
  --focus: #ffffff;
  --radius: 22px;
}
* { box-sizing: border-box; }
html, body { width:100%; height:100%; margin:0; padding:0; overflow:hidden; background:var(--bg); color:var(--text); font-family:Arial,Helvetica,sans-serif; }
body { background: radial-gradient(circle at 80% 0%, #14384a 0, #0a2330 35%, #061720 100%); }
button, input { font: inherit; }
button { color:inherit; }
.app-shell { width:100vw; height:100vh; overflow:hidden; }
.boot-screen, .auth-page { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; }
.brand-mark { width:90px; height:90px; border-radius:24px; display:flex; align-items:center; justify-content:center; font-size:38px; font-weight:800; letter-spacing:-2px; background:linear-gradient(145deg,#3f9fc5,#183f55); box-shadow:0 18px 60px rgba(0,0,0,.35); }
.boot-title { font-size:34px; font-weight:700; }
.boot-subtitle { font-size:18px; color:var(--muted); }
.auth-card { width:min(760px,82vw); background:var(--panel); border:1px solid rgba(255,255,255,.08); border-radius:30px; padding:36px; box-shadow:0 24px 80px rgba(0,0,0,.35); }
.auth-brand { display:flex; align-items:center; gap:18px; margin-bottom:28px; }
.auth-brand .brand-mark { width:68px; height:68px; font-size:28px; border-radius:18px; }
.auth-title { font-size:30px; font-weight:700; }
.auth-help { color:var(--muted); margin-top:4px; font-size:16px; }
.field-label { color:var(--muted); font-size:15px; margin:14px 0 7px; }
.tv-input { width:100%; height:58px; border-radius:16px; border:2px solid transparent; outline:none; padding:0 18px; color:white; background:#0d2937; font-size:20px; }
.tv-input:focus { border-color:var(--focus); background:#123448; }
.row { display:flex; align-items:center; }
.gap { gap:12px; }
.space-between { justify-content:space-between; }
.remember { display:flex; align-items:center; gap:10px; color:var(--muted); margin:16px 0 22px; }
.remember input { width:22px; height:22px; }
.btn { border:2px solid transparent; outline:none; border-radius:16px; min-height:56px; padding:0 24px; background:#244d61; cursor:pointer; font-weight:700; }
.btn.primary { background:#f5f7f8; color:#143044; }
.btn.secondary { background:#22495b; }
.btn.ghost { background:rgba(255,255,255,.05); }
.btn.danger { background:#67343a; }
.btn:focus, .focusable:focus { border-color:var(--focus)!important; box-shadow:0 0 0 4px rgba(255,255,255,.15); transform:scale(1.025); }
.feedback { min-height:24px; margin-top:16px; color:var(--danger); }
.feedback.ok { color:var(--ok); }
.activation-code { font-size:46px; letter-spacing:2px; color:var(--gold); font-weight:800; text-align:center; margin:24px 0 10px; }
.page { width:100%; height:100%; display:flex; flex-direction:column; padding:28px 36px 30px; }
.topbar { height:82px; display:flex; align-items:center; justify-content:space-between; flex:0 0 auto; }
.brand-small { display:flex; align-items:center; gap:14px; }
.brand-small .brand-mark { width:50px; height:50px; border-radius:14px; font-size:21px; }
.brand-name { font-size:25px; font-weight:800; }
.account { color:var(--muted); font-size:14px; text-align:right; }
.home-grid { flex:1; display:flex; align-items:center; justify-content:center; gap:24px; flex-wrap:wrap; padding:20px 0 54px; }
.home-card { width:260px; height:190px; border:3px solid transparent; outline:none; border-radius:28px; background:linear-gradient(145deg,#153f53,#0e2d3c); display:flex; flex-direction:column; justify-content:center; align-items:center; gap:14px; box-shadow:0 20px 50px rgba(0,0,0,.25); }
.home-card:focus { border-color:white; transform:scale(1.05); background:linear-gradient(145deg,#24719a,#15516c); }
.home-icon { font-size:54px; line-height:1; }
.home-label { font-size:22px; font-weight:800; }
.screen-title { font-size:30px; font-weight:800; margin:4px 0 4px; }
.screen-subtitle { color:var(--muted); margin-bottom:16px; }
.content { flex:1; min-height:0; }
.tv-layout { display:flex; gap:18px; height:100%; }
.side-panel { width:25%; min-width:260px; background:var(--panel); border-radius:22px; padding:14px; overflow:hidden; }
.channel-panel { width:31%; min-width:330px; background:var(--panel); border-radius:22px; padding:14px; overflow:hidden; }
.preview-panel { flex:1; min-width:0; display:flex; flex-direction:column; gap:14px; }
.list-scroll { height:100%; overflow-y:auto; padding-right:5px; }
.list-item { width:100%; min-height:60px; margin:5px 0; border:2px solid transparent; border-radius:14px; background:rgba(255,255,255,.04); display:flex; align-items:center; gap:12px; padding:8px 12px; outline:none; text-align:left; }
.list-item:focus { border-color:white; background:#1c526a; transform:none; }
.list-item.active { background:#164258; }
.list-num { width:42px; color:var(--muted); text-align:right; flex:0 0 auto; }
.list-logo { width:48px; height:42px; object-fit:contain; border-radius:8px; background:rgba(255,255,255,.06); flex:0 0 auto; }
.list-main { min-width:0; flex:1; }
.list-name { font-size:17px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.list-sub { color:var(--muted); font-size:13px; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.player-card { flex:1; min-height:0; background:#000; border-radius:22px; overflow:hidden; position:relative; }
.player-card video, .fullscreen-player video { width:100%; height:100%; object-fit:contain; background:#000; display:block; }
.fullscreen-video-host { position:absolute; inset:0; width:100%; height:100%; background:#000; }
.fullscreen-video-host video { width:100%; height:100%; object-fit:contain; }
.player-placeholder { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#72909f; font-size:18px; pointer-events:none; }
.epg-card { background:var(--panel); border-radius:18px; padding:14px 18px; min-height:112px; }
.epg-now { font-size:18px; font-weight:800; }
.epg-next { color:var(--muted); margin-top:6px; }
.preview-actions { display:flex; gap:10px; }
.preview-actions .btn { min-height:48px; padding:0 16px; }
.grid-wrap { height:100%; overflow-y:auto; padding:8px 4px 20px; }
.media-grid { display:flex; flex-wrap:wrap; gap:18px; }
.media-card { width:180px; height:285px; background:var(--panel); border-radius:18px; border:3px solid transparent; overflow:hidden; outline:none; position:relative; }
.media-card:focus { border-color:white; transform:scale(1.045); }
.poster { width:100%; height:225px; object-fit:cover; background:#102b39; }
.media-name { height:60px; padding:10px; display:flex; align-items:center; font-size:15px; font-weight:700; }
.category-grid { display:flex; flex-wrap:wrap; gap:14px; padding:10px 2px; }
.category-card { min-width:250px; max-width:350px; flex:1 1 250px; min-height:76px; border:3px solid transparent; outline:none; border-radius:18px; background:var(--panel); padding:0 20px; text-align:left; font-size:18px; font-weight:700; }
.category-card:focus { border-color:white; background:#1b526b; }
.detail-layout { height:100%; display:flex; gap:26px; }
.detail-poster { width:260px; height:390px; object-fit:cover; border-radius:22px; background:#102b39; flex:0 0 auto; }
.detail-body { min-width:0; flex:1; overflow-y:auto; }
.detail-title { font-size:32px; font-weight:800; margin-bottom:12px; }
.detail-meta { color:var(--muted); margin-bottom:14px; }
.detail-desc { color:#d6e1e6; font-size:17px; line-height:1.45; max-width:1000px; }
.season-row { display:flex; gap:12px; flex-wrap:wrap; margin:18px 0; }
.episode-list { max-width:980px; }
.fullscreen-player { position:fixed; inset:0; z-index:2000; background:#000; display:flex; align-items:center; justify-content:center; }
.player-osd { position:absolute; left:36px; right:36px; bottom:30px; padding:18px 22px; border-radius:18px; background:linear-gradient(transparent,rgba(0,0,0,.78)); pointer-events:none; }
.player-title { font-size:24px; font-weight:800; }
.player-hint { color:#b9c9d0; margin-top:4px; }
.modal { position:fixed; inset:0; z-index:3000; background:rgba(0,0,0,.74); display:flex; align-items:center; justify-content:center; }
.modal-card { width:min(920px,84vw); max-height:82vh; overflow:auto; background:#0c2634; border:1px solid rgba(255,255,255,.12); border-radius:26px; padding:26px; }
.modal-title { font-size:26px; font-weight:800; margin-bottom:14px; }
.diagnostic { font-family:Consolas,monospace; white-space:pre-wrap; font-size:14px; line-height:1.45; color:#d5e4ea; background:#06131b; padding:18px; border-radius:14px; }
.badge { display:inline-block; border-radius:999px; padding:5px 10px; background:#20495d; color:#cae4ef; font-size:12px; margin-right:8px; }
.hidden { display:none!important; }
.loading { color:var(--muted); padding:30px; text-align:center; }
.empty { color:var(--muted); padding:30px; text-align:center; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:#31586b; border-radius:10px; }
@media (max-width:1100px) {
  .page { padding:20px; }
  .home-card { width:220px; height:165px; }
  .side-panel { min-width:220px; }
  .channel-panel { min-width:290px; }
  .media-card { width:160px; height:260px; }
  .poster { height:202px; }
}

.logo-fallback { align-items:center; justify-content:center; color:#b9d3df; font-weight:800; font-size:12px; }
.poster.logo-fallback, .detail-poster.logo-fallback { display:flex; font-size:28px; }