:root {
  --accent:#4c33e2;
  --accent2:#e8b12c;
  --green:#4ade80;
  --red:#e74c3c;
  --text2:#bfbfbf;
  --topbar-h:65px;
  --sidebar-w:240px;
  --bg:#080c12;
  --bg2:rgba(0,0,0,0.55);
  --border:rgba(255,255,255,0.1);
}
*{margin:0;padding:0;box-sizing:border-box;}
button,a,[onclick]{touch-action:manipulation;}
html,body{height:100%;font-family:'Open Sans',sans-serif;font-weight:300;}
body{background:#080c12;color:#fff;overflow:hidden;height:100vh;}

/* LOGIN */
#loginScreen{
  position:fixed;inset:0;z-index:2000;
  display:flex;align-items:center;justify-content:center;
  background:#151c2e;
  overflow:hidden;
}
#loginScreen::before{
  content:'';
  position:absolute;inset:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(0,180,220,.06) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 30%, rgba(0,220,200,.04) 0%, transparent 50%);
}
#loginCircuit{
  position:absolute;inset:0;
  width:100%;height:100%;
  pointer-events:none;
  z-index:0;
}
.login-box{
  position:relative;z-index:1;
  width:380px;
  padding:36px 36px 32px;
  background:rgba(18,24,42,0.85);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(0,220,255,0.15);
  border-radius:10px;
  box-shadow:
    0 0 0 1px rgba(0,180,255,0.08),
    0 8px 32px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.05);
  animation:fadeUp .5s ease;
}
.login-box::before{
  content:'';
  position:absolute;top:-4px;left:-4px;
  width:8px;height:8px;
  background:#00ccff;
  border-radius:50%;
  box-shadow:0 0 10px #00ccff;
}
.login-box::after{
  content:'';
  position:absolute;bottom:-4px;right:-4px;
  width:6px;height:6px;
  background:#00ccff;
  border-radius:50%;
  box-shadow:0 0 8px #00ccff;
  opacity:.6;
}
.login-logo-wrap{
  display:flex;align-items:center;gap:10px;
  margin-bottom:24px;
}
.login-logo-wrap img{height:36px;width:auto;object-fit:contain;}
.login-logo{
  font-size:15px;font-weight:700;color:#fff;
  letter-spacing:.5px;
}
.login-logo .login-logo-sub{
  display:block;font-size:10px;font-weight:400;
  color:rgba(255,255,255,.4);letter-spacing:1px;
}
.login-title{
  font-size:22px;font-weight:600;color:#fff;
  margin-bottom:28px;letter-spacing:.3px;
}
.login-subtitle{display:none;}
.fg{
  position:relative;
  margin-bottom:16px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  border-radius:4px;
  transition:border-color .2s;
}
.fg:focus-within{border-color:#00aaff;}
.fg label{
  display:block;
  font-size:11px;color:rgba(255,255,255,.45);
  padding:10px 14px 0;
  letter-spacing:.5px;
}
.fg input{
  display:block;
  width:100%;
  padding:4px 14px 10px;
  background:transparent;
  border:none;
  color:#fff;
  font-family:'Open Sans',sans-serif;
  font-size:15px;font-weight:300;
  outline:none;
}
.fg input::placeholder{color:rgba(255,255,255,.25);}
.fg::after{
  content:'';
  position:absolute;bottom:0;left:0;right:0;
  height:2px;
  background:linear-gradient(90deg,#00aaff,#00ffcc);
  border-radius:0 0 4px 4px;
  transform:scaleX(0);
  transition:transform .25s ease;
}
.fg:focus-within::after{transform:scaleX(1);}
.btn-login{
  width:100%;padding:15px;margin-top:8px;
  background:linear-gradient(90deg,#00b4d8,#00f5c8);
  border:none;border-radius:4px;
  color:#0a1628;
  font-family:'Open Sans',sans-serif;
  font-size:15px;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;
  cursor:pointer;
  transition:opacity .2s,transform .1s;
  box-shadow:0 4px 20px rgba(0,180,220,.35);
}
.btn-login:hover{opacity:.9;transform:translateY(-1px);box-shadow:0 6px 24px rgba(0,180,220,.5);}
.btn-login:active{transform:translateY(0);}
.btn-login:disabled{opacity:.5;cursor:not-allowed;transform:none;}
.login-error{color:#ff6b8a;font-size:13px;text-align:center;margin-top:12px;min-height:18px;font-weight:600;line-height:1.4;padding:0 4px;word-break:break-word;}
.login-dots{
  position:absolute;top:20px;right:20px;
  display:grid;grid-template-columns:repeat(4,6px);gap:4px;
  opacity:.35;
}
.login-dots span{
  width:4px;height:4px;border-radius:50%;
  background:#00ccff;
  display:block;
}

/* APP */
#app{display:none;height:100vh;flex-direction:column;}
#app.active{display:flex;}

/* TOPBAR */
.topbar{
  height:var(--topbar-h);flex-shrink:0;
  background:rgba(0,0,0,0.82);
  border-bottom:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;gap:8px;padding:0 10px 0 14px;
}
.topbar-logo-area{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-right:4px;}
.topbar-logo{font-size:14px;font-weight:700;color:#fff;white-space:nowrap;letter-spacing:1px;}
.cat-toggle-btn{
  width:36px;height:36px;background:transparent;border:1px solid rgba(255,255,255,.15);
  border-radius:4px;color:#fff;font-size:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:background .15s;
}
.cat-toggle-btn:hover{background:#4c33e2;border-color:#4c33e2;}
.topbar-search{flex:0 0 auto;width:200px;position:relative;}
.topbar-right-group{display:flex;align-items:center;margin-left:auto;flex-shrink:0;}
.topbar-nav{display:flex;align-items:center;gap:2px;flex:1;justify-content:center;}
.tnav-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding:6px 14px;height:var(--topbar-h);
  background:transparent;border:none;border-bottom:3px solid transparent;
  color:rgba(255,255,255,.55);cursor:pointer;
  transition:color .15s,border-color .15s,background .15s;
  white-space:nowrap;flex-shrink:0;
}
.tnav-btn:hover{color:#fff;background:rgba(255,255,255,.06);}
.tnav-btn.active{color:#fff;border-bottom-color:#4c33e2;background:rgba(76,51,226,.12);}
.tnav-icon{font-size:20px;line-height:1;}
.tnav-label{font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;}
.search-wrap{position:relative;width:100%;}
.search-wrap input{
  width:100%;padding:7px 14px 7px 34px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);
  border-radius:2px;color:#fff;font-family:'Open Sans',sans-serif;font-size:13px;outline:none;
}
.search-wrap input:focus{border-color:#4c33e2;}
.search-wrap input::placeholder{color:rgba(255,255,255,.3);}
.search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:rgba(255,255,255,.4);pointer-events:none;}
.search-results{position:absolute;top:calc(100% + 5px);left:0;right:0;background:#0d0d1a;border:1px solid rgba(255,255,255,.1);border-radius:3px;max-height:360px;overflow-y:auto;z-index:1000;display:none;}
.search-results.show{display:block;}
.search-item{padding:9px 12px;cursor:pointer;display:flex;align-items:center;gap:9px;border-bottom:1px solid rgba(255,255,255,.04);}
.search-item:hover{background:rgba(76,51,226,.15);}
.search-item:last-child{border-bottom:none;}
.search-item img{width:36px;height:27px;object-fit:contain;border-radius:2px;background:#111;flex-shrink:0;}
.si-name{font-size:12px;font-weight:600;color:#fff;}
.si-type{font-size:10px;color:var(--text2);}
.topbar-btn{
  height:var(--topbar-h);padding:0 13px;
  background:transparent;border:none;border-left:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.75);font-family:'Open Sans',sans-serif;
  font-size:12px;font-weight:600;cursor:pointer;
  display:flex;align-items:center;gap:5px;white-space:nowrap;
  text-transform:uppercase;letter-spacing:.5px;
}
.topbar-btn:hover{background:rgba(255,255,255,.07);color:#fff;}
.topbar-btn.danger:hover{background:rgba(231,76,60,.15);color:#e74c3c;}

/* BODY */
.app-body{display:flex;flex:1;overflow:hidden;}

/* SIDEBAR */
.sidebar{width:220px;background:#000;display:flex;flex-direction:column;overflow:hidden;flex-shrink:0;transition:width .25s,opacity .25s;}
.sidebar.collapsed{width:0;opacity:0;pointer-events:none;}
.cat-section-title{padding:12px 16px 8px;font-size:10px;color:rgba(255,255,255,.4);letter-spacing:2px;text-transform:uppercase;flex-shrink:0;white-space:nowrap;font-weight:700;}
.cat-list{flex:1;overflow-y:auto;}
.cat-item{padding:9px 16px;cursor:pointer;font-size:13px;font-weight:400;color:rgba(255,255,255,.65);transition:all .12s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:7px;border-left:3px solid transparent;}
.cat-item:hover{color:#fff;background:rgba(76,51,226,.15);}
.cat-item.active{color:#fff;background:rgba(76,51,226,.2);border-left-color:#4c33e2;padding-left:13px;}

/* CONTENT */
.content-area{flex:1;overflow:hidden;display:flex;flex-direction:column;}
.content-inner{flex:1;overflow:hidden;display:flex;}

/* FULLSCREEN CHANNEL PANEL */
.fs-channel-panel{
  position:absolute;top:0;left:0;width:280px;height:100%;
  background:rgba(0,0,0,.92);z-index:50;
  display:flex;flex-direction:column;
  border-right:1px solid rgba(255,255,255,.1);
  animation:slideInLeft .2s ease;
}
.fs-channel-panel.hidden{display:none;}
@keyframes slideInLeft{from{transform:translateX(-100%)}to{transform:translateX(0)}}
.fs-panel-header{
  padding:12px 14px;background:rgba(76,51,226,.3);
  border-bottom:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:space-between;
  font-size:12px;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:1px;
  flex-shrink:0;
}
.fs-channel-list{flex:1;overflow-y:auto;}
.fs-ch-item{
  padding:9px 12px;cursor:pointer;
  display:flex;align-items:center;gap:8px;
  border-bottom:1px solid rgba(255,255,255,.03);
  transition:background .12s;
}
.fs-ch-item:hover{background:rgba(76,51,226,.25);}
.fs-ch-item.active{background:#4c33e2;}
.fs-ch-item img{width:40px;height:28px;object-fit:contain;background:#111;border-radius:2px;flex-shrink:0;}
.fs-ch-item span{font-size:12px;font-weight:500;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* PLAYER CONTROLS BAR */
.player-controls-bar{
  position:absolute;bottom:0;left:0;right:0;
  background:linear-gradient(transparent,rgba(0,0,0,.88));
  padding:32px 14px 14px;
  display:none;
  align-items:center;gap:8px;
  opacity:0;transition:opacity .35s;
  z-index:30;pointer-events:none;
}
.player-controls-bar.fs-visible{display:flex;opacity:1;pointer-events:auto;}
.player-wrap:fullscreen,
.player-wrap:-webkit-full-screen,
.player-wrap:-moz-full-screen {
  width:100vw !important;height:100vh !important;background:#000;
}
.player-wrap:fullscreen video,
.player-wrap:-webkit-full-screen video,
.player-wrap:-moz-full-screen video {
  width:100% !important;height:100% !important;object-fit:contain;
}
.player-ctrl-btn{
  padding:6px 14px;border-radius:20px;
  border:1px solid rgba(255,255,255,.3);
  background:rgba(0,0,0,.6);color:#fff;
  font-size:12px;font-weight:600;cursor:pointer;
  font-family:'Open Sans',sans-serif;
  display:flex;align-items:center;gap:5px;
  transition:background .15s,border-color .15s;
}
.player-ctrl-btn:hover{background:#4c33e2;border-color:#4c33e2;}

/* LIVE TV */
.live-layout{display:flex;width:100%;height:100%;}
.channel-list{width:300px;flex-shrink:0;background:rgba(0,0,0,.5);display:flex;flex-direction:column;border-right:1px solid rgba(255,255,255,.06);}
.channel-list-scroll{flex:1;overflow-y:auto;}
.ch-list-header{padding:8px;background:rgba(0,0,0,.4);border-bottom:1px solid rgba(255,255,255,.06);display:flex;gap:6px;flex-shrink:0;}
.ch-search{flex:1;padding:6px 10px;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.12);border-radius:2px;color:#fff;font-family:'Open Sans',sans-serif;font-size:12px;outline:none;}
.ch-search:focus{border-color:#4c33e2;}
.ch-search::placeholder{color:rgba(255,255,255,.3);}
.fav-toggle{padding:6px 12px;border-radius:2px;border:1px solid rgba(255,255,255,.12);background:transparent;color:rgba(255,255,255,.5);cursor:pointer;font-size:12px;font-weight:600;flex-shrink:0;width:100%;text-align:left;}
.fav-toggle.on{border-color:#e8b12c;color:#e8b12c;background:rgba(232,177,44,.08);}
.channel-item{padding:9px 10px;cursor:pointer;display:flex;align-items:center;gap:8px;border-radius:4px;margin:3px 6px;background:rgba(0,0,0,.35);border:none;transition:background 0s;}
.channel-item:hover{background:#4c33e2;}
.channel-item:hover *{color:#fff !important;}
.channel-item.active{background:#4c33e2;}
.channel-item img{width:44px;height:30px;object-fit:contain;background:#111;border-radius:2px;flex-shrink:0;}
.ch-info{flex:1;min-width:0;}
.ch-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;text-transform:capitalize;}
.ch-prog{font-size:11px;color:rgba(255,255,255,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;}
.ch-num{background:#0c1015;padding:5px 7px;border-radius:3px;color:#fff;text-align:center;font-size:11px;font-weight:700;width:38px;flex-shrink:0;}
.channel-item.active .ch-num{background:rgba(0,0,0,.3);}
.channel-item .fav-star{font-size:11px;opacity:0;transition:opacity .15s;margin-left:auto;flex-shrink:0;cursor:pointer;padding:2px 4px;}
.channel-item:hover .fav-star,.channel-item.fav .fav-star{opacity:1;}
.channel-item.fav .fav-star{color:#e8b12c;}
.player-area{flex:1;display:flex;flex-direction:column;overflow:hidden;}
.player-wrap{flex:1;background:#000;position:relative;overflow:hidden;}
.player-wrap video{width:100%;height:100%;object-fit:contain;display:block;}
.player-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.85);flex-direction:column;gap:12px;z-index:10;}
.player-overlay.hidden{display:none;}
.player-logo{width:70px;height:70px;object-fit:contain;}
.player-ch-name{font-size:18px;font-weight:700;color:#fff;text-align:center;text-transform:uppercase;letter-spacing:2px;}
.player-spinner{width:40px;height:40px;border:3px solid rgba(76,51,226,.25);border-top-color:#4c33e2;border-radius:50%;animation:spin 1s linear infinite;}
.epg-strip{flex-shrink:0;background:rgba(0,0,0,.5);border-top:1px solid rgba(255,255,255,.06);}
.now-bar{display:flex;align-items:center;gap:10px;padding:6px 12px;border-bottom:1px solid rgba(255,255,255,.05);background:rgba(76,51,226,.1);}
.now-bar.hidden{display:none;}
.now-bar-dot{width:7px;height:7px;border-radius:50%;background:#4c33e2;box-shadow:0 0 6px #4c33e2;flex-shrink:0;animation:pulse 2s infinite;}
.now-bar-title{font-size:12px;font-weight:600;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;}
.now-bar-time{font-size:11px;color:var(--text2);flex-shrink:0;}
.epg-strip-inner{display:flex;height:66px;overflow-x:auto;padding:7px 12px;gap:7px;align-items:stretch;}
.epg-item{flex-shrink:0;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.08);border-radius:3px;padding:6px 10px;min-width:130px;max-width:200px;display:flex;flex-direction:column;justify-content:center;opacity:.6;}
.epg-item.now{border-color:#4c33e2;background:rgba(76,51,226,.15);opacity:1;}
.epg-item.future{opacity:.8;}
.epg-time{font-size:10px;color:var(--text2);}
.epg-title{font-size:11px;font-weight:600;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;}
.epg-progress{height:3px;background:rgba(255,255,255,.1);border-radius:2px;margin-top:5px;}
.epg-progress-bar{height:100%;background:#4c33e2;border-radius:2px;}
.kbd-toast{position:fixed;bottom:20px;right:20px;background:rgba(8,6,20,.97);border:1px solid rgba(255,255,255,.1);border-radius:4px;padding:13px 16px;z-index:900;font-size:12px;color:rgba(255,255,255,.7);opacity:0;pointer-events:none;transition:opacity .3s;}
.kbd-toast.show{opacity:1;}
.kbd-toast table{border-collapse:collapse;}
.kbd-toast td{padding:3px 10px 3px 0;}
.kbd-toast td:first-child{color:#4c33e2;font-family:monospace;font-size:13px;font-weight:700;white-space:nowrap;}
.kbd-hint{position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,.65);border:1px solid rgba(255,255,255,.15);border-radius:2px;color:rgba(255,255,255,.5);font-size:10px;padding:3px 7px;cursor:pointer;z-index:15;}
.kbd-hint:hover{color:#fff;border-color:#4c33e2;}

/* VOD / SERIES */
.vod-grid-area{flex:1;overflow-y:auto;padding:16px 20px;}
.grid-title{font-size:20px;font-weight:700;color:#fff;margin-bottom:14px;text-transform:uppercase;}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,130px);gap:8px;}
.card{width:130px;height:195px;position:relative;overflow:hidden;cursor:pointer;background:#1a1a2e;}
.card img{display:block;width:130px;height:195px;object-fit:cover;position:relative;transition:opacity 0s;}
.card-mask{position:absolute;inset:0;background:rgba(0,0,0,.29);opacity:0;display:flex;flex-direction:column;justify-content:flex-end;}
.card:hover img{opacity:0;}
.card:hover .card-mask{opacity:1;}
.card-name{position:absolute;top:0;left:0;right:0;font-size:13px;font-weight:700;color:#fff;text-transform:uppercase;text-align:center;padding:10px 8px;background:rgba(0,0,0,.91);transform:scale(0);opacity:0;transition:all 0s linear;word-wrap:break-word;}
.card:hover .card-name{transform:scale(1);opacity:1;}
.card-info{display:none;}
.card-rating{position:absolute;bottom:10px;left:50%;transform:translateX(-50%) scale(0);color:#fff;font-size:15px;opacity:0;transition:all 0s linear;white-space:nowrap;}
.card:hover .card-rating{transform:translateX(-50%) scale(1);opacity:1;}
.card.showEI .card-mask{opacity:1;}
.card.showEI img{opacity:0;}
.card.showEI .card-name{transform:scale(1);opacity:1;}
.card.showEI .card-rating{transform:translateX(-50%) scale(1);opacity:1;}
.genre-bar{display:flex;gap:5px;padding:10px 16px;overflow-x:auto;flex-shrink:0;border-bottom:1px solid rgba(255,255,255,.06);background:rgba(0,0,0,.3);}
.genre-pill{flex-shrink:0;padding:4px 13px;border-radius:2px;border:1px solid rgba(255,255,255,.2);background:transparent;color:rgba(255,255,255,.6);font-size:11px;cursor:pointer;font-family:'Open Sans',sans-serif;font-weight:600;white-space:nowrap;text-transform:uppercase;letter-spacing:.3px;}
.genre-pill:hover{color:#fff;border-color:rgba(255,255,255,.4);}
.genre-pill.active{background:#4c33e2;border-color:#4c33e2;color:#fff;}

/* MEDIA PLAYER */
.media-player-section{display:flex;flex-direction:column;width:100%;height:100%;background:#000;}
.media-player-wrap{flex:1;position:relative;overflow:hidden;}
.media-player-wrap video{width:100%;height:100%;object-fit:contain;display:block;}
.media-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.85);flex-direction:column;gap:12px;z-index:10;}
.media-overlay.hidden{display:none;}
.ep-bar{background:rgba(0,0,0,.7);border-top:1px solid rgba(255,255,255,.07);padding:8px 14px;display:flex;align-items:center;gap:8px;flex-shrink:0;}
.ep-bar-info{flex:1;min-width:0;}
.ep-bar-series{font-size:10px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase;letter-spacing:.5px;}
.ep-bar-title{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;margin-top:2px;}
.ep-btn{padding:7px 14px;border-radius:2px;border:1px solid rgba(255,255,255,.3);background:transparent;color:rgba(255,255,255,.7);font-family:'Open Sans',sans-serif;font-size:12px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:4px;white-space:nowrap;text-transform:uppercase;letter-spacing:.5px;}
.ep-btn:hover:not(:disabled){background:#4c33e2;border-color:#4c33e2;color:#fff;}
.ep-btn:disabled{opacity:.25;cursor:not-allowed;}
.autoplay-btn{padding:5px 11px;border-radius:20px;border:1px solid rgba(255,255,255,.2);background:transparent;color:rgba(255,255,255,.6);font-size:11px;cursor:pointer;font-family:'Open Sans',sans-serif;font-weight:600;}
.autoplay-btn.on{border-color:#4ade80;color:#4ade80;}
.ap-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,.92));padding:28px 16px 10px;display:flex;align-items:flex-end;justify-content:space-between;z-index:20;}
.ap-overlay.hidden{display:none;}
.ap-msg{font-size:13px;color:#fff;flex:1;min-width:0;}
.ap-msg strong{color:#e8b12c;display:block;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:380px;}
.ap-btns{display:flex;gap:7px;flex-shrink:0;margin-left:12px;}
.ap-mini-btn{padding:5px 12px;border-radius:2px;border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;font-size:11px;cursor:pointer;font-family:'Open Sans',sans-serif;font-weight:600;}
.ap-mini-btn.accent{background:#4c33e2;border-color:#4c33e2;color:#fff;}
.ap-mini-btn:hover{background:rgba(255,255,255,.15);}
.ap-bar{position:absolute;bottom:0;left:0;height:3px;background:#4c33e2;}

/* ACCOUNT */
.account-page{flex:1;overflow-y:auto;padding:24px;display:flex;flex-direction:column;gap:18px;}
.account-card{background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.1);border-radius:4px;padding:20px;max-width:560px;}
.account-card h3{font-size:13px;font-weight:700;color:#fff;margin-bottom:14px;text-transform:uppercase;letter-spacing:1px;}
.account-cards-row{display:flex;gap:18px;flex-wrap:wrap;}
.buf-options{display:flex;flex-direction:column;gap:7px;margin-top:4px;}
.buf-option{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:3px;border:1px solid rgba(255,255,255,.1);cursor:pointer;}
.buf-option:hover{border-color:#4c33e2;}
.buf-option.selected{border-color:#4c33e2;background:rgba(76,51,226,.1);}
.buf-option input[type=radio]{margin-top:2px;accent-color:#4c33e2;}
.buf-option-label{font-size:12px;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.5px;}
.buf-option-desc{font-size:11px;color:var(--text2);margin-top:2px;}
.info-row{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:13px;}
.info-row:last-child{border-bottom:none;}
.info-label{color:var(--text2);font-weight:300;}
.info-value{font-weight:600;color:#fff;}
.ok{color:#4ade80;}.warn{color:#e8b12c;}.bad{color:#e74c3c;}

/* MODALS */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:500;display:flex;align-items:center;justify-content:center;}
.modal-overlay.hidden{display:none;}
.modal{background:#0d0d1a;border:1px solid rgba(255,255,255,.1);border-radius:4px;width:720px;max-width:95vw;max-height:88vh;overflow-y:auto;}
.modal-header{padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.07);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:#0d0d1a;z-index:1;}
.modal-header h2{font-size:13px;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:1px;}
.modal-close{color:rgba(255,255,255,.6);background:none;border:2px solid rgba(255,255,255,.4);font-size:16px;cursor:pointer;padding:2px 9px;line-height:1;border-radius:50%;}
.modal-close:hover{color:#fff;border-color:#fff;}
.modal-body{padding:20px;}
.series-poster{width:120px;height:180px;object-fit:cover;border-radius:2px;float:left;margin:0 16px 10px 0;border:1px solid rgba(255,255,255,.2);}
.season-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0;clear:both;}
.season-tab{padding:5px 14px;border-radius:2px;border:1px solid rgba(255,255,255,.2);background:transparent;color:rgba(255,255,255,.6);cursor:pointer;font-size:12px;font-family:'Open Sans',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.5px;}
.season-tab.active,.season-tab:hover{background:#4c33e2;border-color:#4c33e2;color:#fff;}
.episode-list{display:flex;flex-direction:column;gap:3px;}
.episode-item{padding:9px 12px;background:rgba(255,255,255,.03);cursor:pointer;display:flex;align-items:center;gap:10px;border-left:3px solid transparent;}
.episode-item:hover{background:rgba(76,51,226,.15);border-left-color:#4c33e2;}
.episode-item.playing{border-left-color:#4c33e2;background:rgba(76,51,226,.15);}
.ep-num{font-size:12px;font-weight:700;color:#4c33e2;width:24px;flex-shrink:0;}
.ep-title-m{font-size:13px;font-weight:600;color:#fff;}
.ep-meta-m{font-size:11px;color:var(--text2);margin-top:1px;}
.ep-play-ico{margin-left:auto;color:#4c33e2;font-size:16px;}

/* EPG */
.epg-full-overlay{position:fixed;inset:0;background:rgba(0,0,0,.96);z-index:600;display:flex;flex-direction:column;}
.epg-full-overlay.hidden{display:none;}
.epg-full-header{padding:12px 18px;border-bottom:1px solid rgba(255,255,255,.07);display:flex;align-items:center;gap:12px;flex-shrink:0;background:rgba(0,0,0,.9);}
.epg-full-header h2{font-size:13px;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:1px;}
.epg-full-header input{padding:6px 12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:2px;color:#fff;font-family:'Open Sans',sans-serif;font-size:12px;width:200px;outline:none;}
.epg-full-header input:focus{border-color:#4c33e2;}
.epg-full-body{flex:1;overflow-y:auto;padding:14px 18px;}
.epg-channel-row{margin-bottom:16px;}
.epg-ch-name{font-size:12px;font-weight:700;margin-bottom:6px;color:#fff;text-transform:uppercase;letter-spacing:.5px;}
.epg-programs{display:flex;gap:5px;flex-wrap:wrap;}
.epg-prog-item{background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.08);border-radius:2px;padding:5px 9px;font-size:11px;}
.epg-prog-item.now{border-color:#4c33e2;background:rgba(76,51,226,.15);}
.epg-prog-time{color:#e8b12c;font-size:10px;}
.epg-prog-title{margin-top:2px;color:#fff;}

/* DASHBOARD */
.dash{flex:1;overflow-y:auto;padding:20px 22px 36px;}
.dash-hero{background:rgba(76,51,226,.1);border:1px solid rgba(76,51,226,.3);border-radius:4px;padding:22px 26px;margin-bottom:22px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.dash-hero-left h1{font-size:20px;font-weight:700;color:#fff;}
.dash-hero-left h1 span{color:#e8b12c;}
.dash-hero-left p{color:var(--text2);font-size:13px;margin-top:5px;font-weight:300;}
.dash-hero-stats{display:flex;gap:18px;flex-wrap:wrap;}
.dash-stat{text-align:center;}
.dash-stat-num{font-size:26px;font-weight:700;color:#fff;}
.dash-stat-lbl{font-size:10px;color:var(--text2);margin-top:2px;text-transform:uppercase;letter-spacing:1px;}
.dash-section{margin-bottom:22px;}
.dash-section-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px;}
.dash-section-title{font-size:20px;font-weight:700;color:#fff;text-transform:uppercase;}
.dash-see-all{font-size:12px;color:rgba(255,255,255,.5);cursor:pointer;border:none;background:none;padding:4px 8px;font-family:'Open Sans',sans-serif;font-weight:600;text-transform:uppercase;}
.dash-see-all:hover{color:#fff;}
.dash-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:5px;}
.dash-ch-card{flex-shrink:0;width:140px;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.08);border-radius:4px;padding:10px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:7px;}
.dash-ch-card:hover{border-color:#fff;background:rgba(76,51,226,.15);}
.dash-ch-card img{width:58px;height:40px;object-fit:contain;background:#111;border-radius:2px;}
.dash-ch-name{font-size:11px;font-weight:700;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:122px;color:#fff;}
.dash-ch-prog{font-size:10px;color:var(--text2);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:122px;}
.dash-vod-card{flex-shrink:0;width:130px;cursor:pointer;position:relative;overflow:hidden;}
.dash-vod-card img{width:130px;height:195px;object-fit:cover;display:block;background:#1a1a2e;}
.dash-vod-card .dash-vod-name{font-size:11px;font-weight:600;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px;color:#fff;}
.dash-vod-card .dash-vod-meta{font-size:10px;color:var(--text2);}
.dash-vod-badge{position:absolute;top:5px;left:5px;background:rgba(0,0,0,.85);color:#e8b12c;font-size:10px;padding:2px 5px;border-radius:2px;font-weight:700;}
.dash-cw-card{flex-shrink:0;width:185px;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.08);border-radius:4px;overflow:hidden;cursor:pointer;}
.dash-cw-card:hover{border-color:#fff;}
.dash-cw-thumb{width:100%;height:104px;object-fit:cover;background:#1a1a2e;display:block;}
.dash-cw-info{padding:8px 10px;}
.dash-cw-title{font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;}
.dash-cw-sub{font-size:11px;color:var(--text2);margin-top:2px;}
.dash-cw-bar{height:3px;background:rgba(255,255,255,.1);margin-top:5px;border-radius:2px;}
.dash-cw-bar-fill{height:100%;background:#4c33e2;border-radius:2px;}

/* SIMILAR */
.similar-section{margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,.08);}
.similar-title{font-size:11px;font-weight:700;color:#fff;letter-spacing:1px;text-transform:uppercase;margin-bottom:9px;}
.similar-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;}
.similar-card{flex-shrink:0;width:88px;cursor:pointer;overflow:hidden;}
.similar-card img{width:88px;height:132px;object-fit:cover;display:block;background:#1a1a2e;}
.similar-card-name{font-size:10px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:88px;color:#fefefe;}
.similar-card-year{font-size:9px;color:var(--text2);}
.play-btn{padding:10px 28px;background:transparent;border:1px solid #fff;color:#fff;font-family:'Open Sans',sans-serif;font-size:16px;font-weight:500;text-transform:uppercase;cursor:pointer;}
.play-btn:hover{background:#4c33e2;border-color:#4c33e2;}

/* UTILS */
::-webkit-scrollbar{width:4px;height:4px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:#041484;border-radius:53px;}
::-webkit-scrollbar-thumb:hover{background:#06069f;}
.spinner{width:32px;height:32px;border:3px solid rgba(76,51,226,.2);border-top-color:#4c33e2;border-radius:50%;animation:spin .8s linear infinite;}
.loading-center{display:flex;align-items:center;justify-content:center;padding:60px;flex-direction:column;gap:12px;}
.empty-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text2);gap:12px;}
.empty-state .es-icon{font-size:44px;}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.4;}}

/* PAGER */
.pager-bar{display:flex;align-items:center;gap:12px;padding:10px 4px 14px;flex-shrink:0;}
.pager-btn{padding:7px 18px;border-radius:2px;border:1px solid rgba(255,255,255,.25);background:transparent;color:rgba(255,255,255,.75);font-family:'Open Sans',sans-serif;font-size:12px;font-weight:700;cursor:pointer;text-transform:uppercase;letter-spacing:.5px;transition:background .15s;}
.pager-btn:hover:not(:disabled){background:#4c33e2;border-color:#4c33e2;color:#fff;}
.pager-btn:disabled{opacity:.25;cursor:not-allowed;}
.pager-info{font-size:12px;color:rgba(255,255,255,.45);font-weight:400;}

/* CATCH UP */
.catchup-ch-card{background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.08);border-radius:4px;padding:14px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;transition:border-color .15s,background .15s;}
.catchup-ch-card:hover{border-color:#fff;background:rgba(76,51,226,.15);}
.catchup-ch-card img{width:72px;height:50px;object-fit:contain;background:#111;border-radius:2px;}
.catchup-ch-name{font-size:12px;font-weight:700;color:#fff;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px;}
.catchup-ch-days{font-size:11px;color:rgba(255,255,255,.4);}
.catchup-prog-item{display:flex;align-items:center;gap:12px;padding:10px 14px;background:rgba(0,0,0,.3);border-radius:3px;border-left:3px solid transparent;cursor:pointer;transition:background .12s,border-color .12s;}
.catchup-prog-item:hover{background:rgba(76,51,226,.15);border-left-color:#4c33e2;}
.catchup-prog-time{font-size:11px;color:rgba(255,255,255,.5);white-space:nowrap;flex-shrink:0;width:130px;}
.catchup-prog-title{font-size:13px;font-weight:600;color:#fff;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.catchup-watch-btn{flex-shrink:0;padding:5px 12px;border-radius:2px;border:1px solid rgba(255,255,255,.25);background:transparent;color:rgba(255,255,255,.7);font-size:11px;font-weight:700;cursor:pointer;font-family:'Open Sans',sans-serif;text-transform:uppercase;letter-spacing:.5px;}
.catchup-watch-btn:hover{background:#4c33e2;border-color:#4c33e2;color:#fff;}

/* MOBILE BOTTOM NAV */
.mobile-nav{
  display:none;
  position:fixed;bottom:0;left:0;right:0;
  height:58px;z-index:300;
  background:rgba(0,0,0,.95);
  border-top:1px solid rgba(255,255,255,.1);
  flex-direction:row;align-items:stretch;
}
.mobile-nav-btn{
  flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;
  background:transparent;border:none;
  color:rgba(255,255,255,.45);cursor:pointer;
  font-family:'Open Sans',sans-serif;
  padding:6px 0;
  border-top:2px solid transparent;
  transition:color .15s,border-color .15s;
}
.mobile-nav-btn.active{color:#fff;border-top-color:#4c33e2;}
.mobile-nav-btn .mni{font-size:20px;line-height:1;}
.mobile-nav-btn .mnl{font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;}

/* MOBILE CHANNEL DRAWER */
.mob-ch-toggle{
  display:none;
  position:absolute;top:8px;left:8px;z-index:25;
  background:rgba(0,0,0,.7);border:1px solid rgba(255,255,255,.2);
  border-radius:4px;color:#fff;font-size:16px;
  width:36px;height:36px;cursor:pointer;
  align-items:center;justify-content:center;
}
.mob-ch-overlay{
  display:none;
  position:fixed;inset:0;z-index:200;
  background:rgba(0,0,0,.5);
}
.mob-ch-drawer{
  position:absolute;left:0;top:0;bottom:0;width:85%;max-width:320px;
  background:#0a0a14;
  display:flex;flex-direction:column;
  transform:translateX(-100%);
  transition:transform .25s ease;
  border-right:1px solid rgba(255,255,255,.1);
}
.mob-ch-overlay.open .mob-ch-drawer{transform:translateX(0);}

/* ═══════════════════ MOBILE BREAKPOINT ≤768px ═══════════════════ */
@media (max-width: 768px) {
  html,body{overflow-x:hidden;max-width:100vw;}
  body{overflow-y:auto;}
  #app,#app.active{overflow:hidden;max-width:100vw;width:100%;}
  .app-body{overflow:hidden;max-width:100vw;width:100%;}
  .content-area,.content-inner{max-width:100vw;width:100%;}
  .content-inner{overflow-y:auto;flex-direction:column;}
  /* Login screen */
  #loginScreen{align-items:flex-start;padding:40px 0 40px;overflow-y:auto;}
  .login-box{width:92vw;max-width:380px;padding:28px 22px 24px;margin:auto;}
  #loginCircuit circle[r="28"]{r:20}

  /* TOPBAR: hide search bar and desktop nav, keep logo + right buttons */
  .topbar{padding:0 8px 0 10px;gap:6px;}
  .topbar-nav{display:none;}
  .cat-toggle-btn{display:none !important;}
  /* Hide desktop search bar completely on mobile */
  .topbar-search{display:none !important;}
  /* Show search bar only when toggled */
  .topbar-search.mob-open{
    display:block !important;
    position:fixed;
    top:var(--topbar-h);
    left:0;right:0;
    padding:8px;
    background:rgba(0,0,0,.97);
    border-bottom:1px solid rgba(255,255,255,.1);
    z-index:400;
  }
  .topbar-search.mob-open .search-wrap input{font-size:15px;padding:10px 14px 10px 36px;}
  /* Always show magnifier on mobile */
  #mobSearchBtn{display:flex !important;}

  .sidebar{display:none !important;}
  .app-body{flex-direction:column;}
  .content-inner{overflow-y:auto;flex-direction:column;}
  .mobile-nav{display:flex;}
  .content-area{padding-bottom:58px;}
  .dash{padding-bottom:70px;}

  /* LIVE TV: video → cat bar → channel list */
  .live-layout{flex-direction:column;width:100%;}
  .player-area{order:1;flex:none;height:calc(56.25vw);min-height:180px;}
  .player-wrap{height:100%;}
  .player-wrap video{height:100%;}
  .epg-strip{display:none;}
  /* Live categories bar */
  .live-cat-bar{
    order:2;flex-shrink:0;
    display:flex;align-items:center;gap:8px;
    padding:6px 8px;
    background:rgba(0,0,0,.5);
    border-top:1px solid rgba(255,255,255,.06);
  }
  .live-cat-btn{
    display:flex;align-items:center;gap:5px;
    padding:7px 12px;background:#4c33e2;border:none;border-radius:4px;
    color:#fff;font-size:12px;font-weight:700;cursor:pointer;
    font-family:'Open Sans',sans-serif;white-space:nowrap;flex-shrink:0;
  }
  .live-cat-current{font-size:11px;color:rgba(255,255,255,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .channel-list{
    order:3;
    width:100% !important;
    height:calc(100vh - 56.25vw - var(--topbar-h) - 58px - 44px);
    min-height:240px;
    border-right:none;
    border-top:1px solid rgba(255,255,255,.06);
    flex-shrink:0;
  }
  .channel-list-scroll{flex:1;overflow-y:auto;}
  .fav-toggle{padding:10px 14px;font-size:13px;}
  .channel-item{padding:10px 10px;margin:2px 4px;}
  .channel-item img{width:38px;height:26px;}
  .ch-name{font-size:13px;}
  .mob-ch-toggle{display:none;}
  .kbd-hint{display:none;}
  #btnLogout span,#btnLogout{font-size:11px;}

  /* DASHBOARD */
  .dash{padding:12px 10px 70px;}
  .dash-hero{padding:14px 14px;flex-direction:column;gap:10px;}
  .dash-hero-stats{gap:10px;}
  .dash-stat-num{font-size:20px;}
  .dash-section-title{font-size:16px;}
  .dash-row{gap:6px;}
  .dash-ch-card{width:120px;padding:8px;}
  .dash-vod-card{width:110px;}
  .dash-vod-card img{width:110px;height:165px;}
  .dash-cw-card{width:155px;}
  .dash-cw-thumb{height:87px;}

  /* VOD/SERIES: 3-column grid filling full width */
  .card-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:6px;
  }
  .card{
    width:100%;
    height:0;
    padding-bottom:150%;
    position:relative;
    overflow:hidden;
  }
  .card img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
  }
  .card-name{position:absolute;top:0;left:0;right:0;}
  .card-rating{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);}
  .vod-grid-area{padding:8px 8px;}
  .genre-bar{padding:8px 10px;gap:4px;}
  .genre-pill{padding:4px 10px;font-size:10px;}

  /* MOVIES/SERIES: category button bar on mobile */
  .mob-cat-bar{
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 10px;
    background:rgba(0,0,0,.4);
    border-bottom:1px solid rgba(255,255,255,.06);
    flex-shrink:0;
  }
  .mob-cat-btn{
    display:flex;align-items:center;gap:6px;
    padding:8px 14px;
    background:#4c33e2;
    border:none;border-radius:4px;
    color:#fff;font-size:13px;font-weight:700;
    cursor:pointer;font-family:'Open Sans',sans-serif;
    white-space:nowrap;flex-shrink:0;
  }
  .mob-cat-current{
    font-size:12px;color:rgba(255,255,255,.6);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }

  /* CATCH UP: compact list on mobile */
  .catchup-prog-item{
    display:flex;
    flex-wrap:nowrap;
    gap:8px;
    padding:10px 10px;
    align-items:center;
  }
  .catchup-prog-time{width:auto;font-size:11px;flex-shrink:0;}
  .catchup-prog-title{font-size:12px;}
  .catchup-watch-btn{
    flex-shrink:0;
    padding:5px 10px;
    font-size:11px;
    white-space:nowrap;
  }
  #catchupContent{padding:8px 8px 70px !important;}

  /* MODALS */
  .modal{width:100vw;max-width:100vw;max-height:100vh;border-radius:0;margin:0;}
  .modal-overlay{align-items:flex-end;}
  .modal{border-radius:14px 14px 0 0;}
  .series-poster{width:90px;height:135px;}

  /* EPG */
  .epg-full-overlay{flex-direction:column;}
  .epg-full-header{flex-wrap:wrap;gap:8px;padding:10px 12px;}
  .epg-full-header input{width:100%;}

  /* ACCOUNT */
  .account-cards-row{flex-direction:column;}
  .account-card{max-width:100%;}
  .account-page{padding:12px 10px 70px;}

  .pager-bar{flex-wrap:wrap;gap:8px;justify-content:center;}
  .ep-bar{flex-wrap:wrap;gap:6px;padding:6px 8px;}
  .ep-bar-info{width:100%;order:-1;}
  .kbd-toast{left:8px;right:8px;bottom:66px;transform:none;}
}

/* Extra small phones */
@media (max-width: 400px) {
  .topbar-logo{display:none;}
  .card-grid{grid-template-columns:repeat(3,1fr);}
}

/* Mobile category overlay drawer */
.mob-cat-overlay{
  display:none;
  position:fixed;inset:0;z-index:600;
  background:rgba(0,0,0,.6);
}
.mob-cat-overlay.open{display:block;}
.mob-cat-drawer-inner{
  position:absolute;left:0;top:0;bottom:0;
  width:80%;max-width:300px;
  background:#0a0a14;
  display:flex;flex-direction:column;
  border-right:1px solid rgba(255,255,255,.1);
  overflow-y:auto;
}
.mob-cat-drawer-header{
  padding:14px 16px;
  border-bottom:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:space-between;
  flex-shrink:0;
  font-size:12px;font-weight:700;color:#fff;
  text-transform:uppercase;letter-spacing:1px;
}