/* ============================
   WEBPLAY 2026 — Ultra Premium Design System
   Professional Streaming Platform UI
   ============================ */

/* === DESIGN TOKENS === */
:root {
    --bg-primary: #030305;
    --bg-secondary: #08080d;
    --bg-card: #0c0c14;
    --bg-card-hover: #121220;
    --bg-input: #08080f;
    --border: #18182a;
    --border-hover: rgba(124,58,237,0.5);
    --text: #f5f5fa;
    --text-sec: #9898a8;
    --text-muted: #505066;
    --purple: #7c3aed;
    --purple-glow: rgba(124,58,237,0.3);
    --blue: #a855f7;
    --cyan: #06b6d4;
    --gradient: linear-gradient(135deg,#6d28d9 0%,#7c3aed 100%);
    --btn-gradient: linear-gradient(135deg,#5b21b6 0%,#7c3aed 50%,#a855f7 100%);
    --glass-gradient: linear-gradient(135deg, rgba(124,58,237,0.08) 0%, rgba(168,85,247,0.04) 100%);
    --red: #ef4444;
    --green: #22c55e;
    --yellow: #f59e0b;
    --radius: 18px;
    --radius-sm: 14px;
    --radius-xs: 10px;
    --sidebar-w: 260px;
    --topbar-h: 62px;
    --transition: 0.3s cubic-bezier(.4,0,.2,1);
    --transition-fast: 0.15s cubic-bezier(.4,0,.2,1);
    --shadow-sm: 0 2px 10px rgba(0,0,0,.35);
    --shadow-md: 0 10px 40px rgba(0,0,0,.45);
    --shadow-lg: 0 25px 80px rgba(0,0,0,.6);
    --shadow-glow: 0 0 50px rgba(124,58,237,0.18);
    --shadow-glow-intense: 0 0 80px rgba(124,58,237,0.25);
}

/* === RESET === */
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg-primary);color:var(--text);min-height:100vh;overflow:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body.player-body::before{display:none}
img{max-width:100%;display:block}
button{font-family:'Inter',sans-serif;cursor:pointer;border:none;background:none}
input,select,textarea{font-family:'Inter',sans-serif}
a{color:var(--purple);text-decoration:none;transition:all var(--transition-fast)}
a:hover{text-decoration:none;color:var(--blue)}

/* Premium Scrollbar */
::-webkit-scrollbar{width:7px;height:7px}
::-webkit-scrollbar-track{background:rgba(0,0,0,0.2);border-radius:10px}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--purple),var(--blue));border-radius:10px;transition:background .3s}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--blue),var(--purple))}
*{scrollbar-width:thin;scrollbar-color:var(--purple) transparent}

/* === SKELETON LOADER === */
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.skeleton{background:linear-gradient(90deg,var(--bg-card) 25%,var(--bg-card-hover) 50%,var(--bg-card) 75%);background-size:200% 100%;animation:shimmer 1.5s ease infinite;border-radius:var(--radius-sm)}

/* === INSTALL BANNER === */
.install-banner{position:fixed;top:0;left:0;right:0;z-index:9999;background:var(--btn-gradient);padding:12px 16px;box-shadow:0 4px 30px rgba(0,0,0,.5);animation:slideDown .5s cubic-bezier(.4,0,.2,1)}
.install-banner-content{display:flex;align-items:center;gap:12px;max-width:900px;margin:0 auto}
.install-icon{width:40px;height:40px;border-radius:12px;flex-shrink:0}
.install-text{flex:1;min-width:0}
.install-text strong{display:block;font-size:13px;color:#fff}
.install-text span{font-size:11px;color:rgba(255,255,255,.8)}
.install-btn{padding:8px 18px;background:#fff;color:#333;border:none;border-radius:22px;font-size:12px;font-weight:700;white-space:nowrap;transition:all .3s}
.install-btn:hover{transform:scale(1.05);box-shadow:0 4px 15px rgba(255,255,255,.2)}
.install-close{background:rgba(255,255,255,.15);border:none;color:#fff;width:30px;height:30px;border-radius:50%;font-size:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .3s}
.install-close:hover{background:rgba(255,255,255,.3);transform:rotate(90deg)}
@keyframes slideDown{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}

/* ========================================
   LOGIN PAGE — Premium Design
   ======================================== */
/* Netflix-style Poster Wall */
.poster-wall{position:fixed;inset:0;z-index:0;overflow:hidden;background:#000}
.poster-wall-inner{position:absolute;inset:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-auto-rows:225px;gap:4px;opacity:0;transition:opacity 1.2s ease;padding:0}
.poster-wall.loaded .poster-wall-inner{opacity:1}
.poster-wall-overlay{position:absolute;inset:0;z-index:2;pointer-events:none;background:
    linear-gradient(to bottom, rgba(0,0,0,.65) 0%, rgba(0,0,0,.2) 20%, rgba(0,0,0,.1) 35%, rgba(0,0,0,.2) 65%, rgba(0,0,0,.75) 100%),
    radial-gradient(ellipse at center, rgba(0,0,0,.7) 0%, rgba(0,0,0,.3) 50%, rgba(0,0,0,.1) 100%)}
.poster-card{overflow:hidden;position:relative}
.poster-card img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.7) saturate(.85);transition:filter .3s}
@media(max-width:768px){.poster-wall-inner{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));grid-auto-rows:150px;gap:3px}}
@media(max-width:480px){.poster-wall-inner{grid-template-columns:repeat(auto-fill,minmax(80px,1fr));grid-auto-rows:120px;gap:2px}}
/* Legacy fallback */
.login-bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:#050509}
.login-bg-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(124,58,237,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(124,58,237,.03) 1px,transparent 1px);background-size:60px 60px}
.login-bg-orb{position:absolute;border-radius:50%;filter:blur(100px);pointer-events:none}
.login-bg-orb-1{width:600px;height:600px;top:-200px;left:-150px;background:radial-gradient(circle,rgba(124,58,237,.12),transparent 70%);animation:orbFloat1 20s ease-in-out infinite}
.login-bg-orb-2{width:500px;height:500px;bottom:-150px;right:-120px;background:radial-gradient(circle,rgba(168,85,247,.08),transparent 70%);animation:orbFloat2 25s ease-in-out infinite}
.login-bg-orb-3{width:300px;height:300px;top:50%;left:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(91,33,182,.06),transparent 70%);animation:orbFloat3 15s ease-in-out infinite}
@keyframes orbFloat1{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,20px)}}
@keyframes orbFloat2{0%,100%{transform:translate(0,0)}50%{transform:translate(-20px,-30px)}}
@keyframes orbFloat3{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.3)}}

.login-wrapper{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px;position:relative;z-index:1;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.login-container{width:100%;max-width:440px;padding:clamp(32px,5vw,48px) clamp(28px,4vw,40px);background:rgba(8,8,16,.92);border:1px solid rgba(124,58,237,.12);border-radius:24px;box-shadow:0 12px 60px rgba(0,0,0,.7),0 0 100px rgba(124,58,237,.08),inset 0 1px 0 rgba(255,255,255,.04);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);position:relative;z-index:1;animation:loginAppear .7s cubic-bezier(.4,0,.2,1);overflow:hidden}
.login-container::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(124,58,237,.4),transparent)}
.login-container::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at top, rgba(124,58,237,.06) 0%, transparent 60%);pointer-events:none}
@keyframes loginAppear{from{opacity:0;transform:translateY(30px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}

.logo-section{display:flex;justify-content:center;margin-bottom:28px;position:relative;z-index:1}
.logo{display:flex;align-items:center;gap:18px;flex-direction:column}
.logo-icon-big{width:80px;height:80px;background:var(--btn-gradient, linear-gradient(135deg,#5b21b6 0%,#7c3aed 50%,#a855f7 100%));border-radius:22px;display:flex;align-items:center;justify-content:center;font-size:32px;color:#fff;box-shadow:0 8px 40px rgba(124,58,237,0.5),0 0 80px var(--purple-glow, rgba(124,58,237,0.25)),inset 0 1px 0 rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.15);position:relative;animation:iconFloat 4s ease-in-out infinite;overflow:hidden}
.logo-icon-big::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.15) 0%,transparent 50%);border-radius:inherit;pointer-events:none}
.logo-icon-big img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
@keyframes iconFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-6px) rotate(1deg)}}
.logo-icon-ring{position:absolute;inset:-5px;border-radius:27px;border:2px solid var(--purple-glow, rgba(124,58,237,.2));animation:ringPulse 3s ease-in-out infinite}
@keyframes ringPulse{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
.logo-text-big{display:flex;flex-direction:column;align-items:center;gap:4px}
.brand-name-login{font-size:clamp(30px,7vw,42px);font-weight:900;background:linear-gradient(180deg,#ffffff 0%,rgba(255,255,255,.8) 30%,var(--purple, #c084fc) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:3px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5));text-transform:uppercase}
.brand-tagline{font-size:12px;font-weight:700;color:var(--purple);letter-spacing:4px;text-transform:uppercase;opacity:0.8}

.brand-name-sidebar,.brand-name-mobile{font-size:16px;font-weight:800;background:linear-gradient(180deg,#fff 0%,var(--purple, #c084fc) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:1px}
.brand-name-footer{color:var(--text-muted);font-weight:600}
.brand-name-install{color:#fff}

.title-section{text-align:center;margin-bottom:28px}
.title-section h1{font-size:clamp(18px,4vw,22px);font-weight:800;margin-bottom:6px;background:linear-gradient(180deg,#fff,#ccc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.title-section p{color:var(--text-sec);font-size:13px}

.login-form{display:flex;flex-direction:column;gap:16px}
.input-group{display:flex;flex-direction:column;gap:6px}
.input-group>label{font-size:12px;font-weight:600;color:var(--text-sec)}
.input-wrapper{position:relative;display:flex;align-items:center}
.input-icon{position:absolute;left:16px;color:var(--text-muted);font-size:14px;z-index:1;transition:all .3s}
.input-wrapper input{width:100%;padding:14px 16px 14px 46px;background:var(--bg-input);border:1.5px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:14px;outline:none;transition:all .3s}
.input-wrapper input::placeholder{color:transparent}
.input-wrapper input:focus{border-color:var(--purple);box-shadow:0 0 0 4px var(--purple-glow),var(--shadow-glow)}
.input-wrapper:has(input:focus) .input-icon{color:var(--purple);transform:scale(1.1)}

/* Floating Labels */
.floating-label{position:absolute;left:46px;top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:14px;font-weight:500;pointer-events:none;transition:all .3s cubic-bezier(.4,0,.2,1)}
.input-wrapper input:focus~.floating-label,
.input-wrapper input:not(:placeholder-shown)~.floating-label{top:6px;transform:translateY(0);font-size:10px;font-weight:600;color:var(--purple);left:46px}

.toggle-password{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text-muted);font-size:14px;padding:6px;transition:all .3s;border-radius:8px;cursor:pointer;z-index:5}
.toggle-password:hover{color:var(--text-sec);background:rgba(255,255,255,.05)}

.remember-group{margin-top:-4px}
.checkbox-container{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:12px;color:var(--text-sec);user-select:none;padding:4px 0}
.checkbox-container input[type="checkbox"]{display:none}
.checkmark{width:18px;height:18px;border:2px solid var(--border);border-radius:6px;display:flex;align-items:center;justify-content:center;transition:all .3s;flex-shrink:0}
.checkbox-container input:checked+.checkmark{background:var(--gradient);border-color:transparent;box-shadow:0 0 12px var(--purple-glow, rgba(124,58,237,.3))}
.checkbox-container input:checked+.checkmark::after{content:'\2713';color:#fff;font-size:11px;font-weight:700}

.btn-connect{width:100%;padding:16px;background:var(--btn-gradient);border:none;border-radius:var(--radius-sm);color:#fff;font-size:16px;font-weight:700;transition:all .3s;margin-top:6px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:10px;letter-spacing:.5px;box-shadow:0 6px 30px rgba(124,58,237,0.35)}
.btn-connect::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);transition:left .6s}
.btn-connect:hover{transform:translateY(-3px);box-shadow:0 12px 45px rgba(124,58,237,0.5),0 0 80px rgba(124,58,237,0.2)}
.btn-connect:hover::before{left:100%}
.btn-connect:active{transform:translateY(0) scale(.98)}
.btn-connect:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-connect .btn-loading{display:flex;align-items:center;gap:10px}
.btn-spinner{width:20px;height:20px;border:2.5px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Connection Progress */
.connection-progress{margin-top:8px;text-align:center}
.connection-progress-bar{height:3px;background:var(--border);border-radius:2px;overflow:hidden;margin-bottom:8px}
.connection-progress-bar::after{content:'';display:block;height:100%;width:30%;background:var(--btn-gradient);border-radius:2px;animation:progressSlide 1.5s ease-in-out infinite}
@keyframes progressSlide{0%{transform:translateX(-100%)}100%{transform:translateX(400%)}}
.connection-status{font-size:11px;color:var(--text-muted);font-weight:500}

.error-message{display:flex;align-items:center;gap:10px;padding:12px 16px;background:rgba(239,68,68,.06);border:1px solid rgba(239,68,68,.2);border-radius:var(--radius-sm);color:#fca5a5;font-size:12px;animation:shakeIn .4s ease}
.error-message i{color:var(--red);font-size:15px;flex-shrink:0}
@keyframes shakeIn{0%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}100%{transform:translateX(0)}}

.login-footer{text-align:center;margin-top:28px;padding-top:20px;border-top:1px solid rgba(26,26,46,.4)}
.login-footer-links{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:10px}
.footer-link{color:var(--text-muted);font-size:12px;display:flex;align-items:center;gap:5px;transition:all .3s;padding:4px 8px;border-radius:8px}
.footer-link:hover{color:var(--purple);background:rgba(255,255,255,.03)}
.footer-link i{font-size:11px}
.footer-sep{color:var(--border);font-size:10px}
.login-footer p{font-size:11px;color:var(--text-muted)}

/* === APP LAYOUT === */
.app-container{display:flex;height:100vh;width:100vw;overflow:hidden}

/* === SIDEBAR === */
.nav-sidebar{width:var(--sidebar-w);min-width:var(--sidebar-w);background:linear-gradient(180deg,var(--bg-secondary) 0%,var(--bg-primary) 100%);border-right:1px solid var(--border);display:flex;flex-direction:column;height:100vh;overflow-y:auto;overflow-x:hidden;z-index:200;transition:transform .3s cubic-bezier(.4,0,.2,1);position:relative}
.nav-sidebar::-webkit-scrollbar{width:4px}
.nav-sidebar::-webkit-scrollbar-track{background:transparent}
.nav-sidebar::-webkit-scrollbar-thumb{background:rgba(124,58,237,.3);border-radius:2px}
.nav-sidebar::-webkit-scrollbar-thumb:hover{background:rgba(124,58,237,.5)}
.nav-sidebar::before{content:'';position:absolute;right:0;top:0;bottom:0;width:1px;background:linear-gradient(180deg,rgba(124,58,237,.3) 0%,transparent 50%,rgba(124,58,237,.3) 100%)}
.nav-logo{display:flex;align-items:center;gap:14px;padding:24px 20px 20px}
.nav-logo-icon{width:42px;height:42px;background:var(--btn-gradient, linear-gradient(135deg,#5b21b6,#7c3aed));border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:16px;color:#fff;flex-shrink:0;border:1px solid rgba(255,255,255,.15);box-shadow:0 4px 20px var(--purple-glow, rgba(124,58,237,.3));overflow:hidden;position:relative}
.nav-logo-icon::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.15),transparent 50%);pointer-events:none}
.nav-logo-icon img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.nav-logo .logo-text{display:flex;align-items:baseline;gap:0}
.nav-menu{list-style:none;padding:8px 12px;display:flex;flex-direction:column;gap:4px}
.nav-item{display:flex;align-items:center;gap:14px;padding:13px 16px;border-radius:var(--radius-xs);color:var(--text-sec);font-size:14px;font-weight:500;cursor:pointer;transition:all .25s;user-select:none;position:relative;overflow:hidden}
.nav-item::before{content:'';position:absolute;inset:0;background:var(--glass-gradient);opacity:0;transition:opacity .25s}
.nav-item i{width:22px;text-align:center;font-size:16px;flex-shrink:0;transition:all .25s;position:relative;z-index:1}
.nav-item span{position:relative;z-index:1}
.nav-item:hover{color:var(--text)}
.nav-item:hover::before{opacity:1}
.nav-item.active{background:rgba(124,58,237,.12);color:var(--purple);font-weight:600}
.nav-item.active::before{opacity:0}
.nav-item.active::after{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:55%;background:var(--btn-gradient);border-radius:0 4px 4px 0;box-shadow:0 0 15px rgba(124,58,237,.5)}
.nav-item.active i{color:var(--purple);text-shadow:0 0 20px rgba(124,58,237,.5)}
.nav-separator{height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent);margin:10px 18px}
.nav-actions{flex:1}
.nav-user{padding:14px 14px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:10px}
.nav-user-info{display:flex;align-items:center;gap:10px}
.user-avatar{width:34px;height:34px;background:var(--gradient);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0;box-shadow:0 2px 10px var(--purple-glow, rgba(124,58,237,.2))}
.user-details{flex:1;min-width:0}
.user-name{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-expiry{font-size:10px;color:var(--text-muted);margin-top:2px}
.btn-switch-profile{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;background:rgba(124,58,237,.08);border:1px solid rgba(124,58,237,.2);border-radius:var(--radius-sm);color:rgba(255,255,255,.8);font-size:12px;font-weight:600;width:100%;cursor:pointer;transition:all .3s}
.btn-switch-profile:hover{background:rgba(124,58,237,.15);border-color:rgba(124,58,237,.4);color:#fff;transform:translateY(-1px)}
.btn-switch-profile i{font-size:14px;color:var(--purple)}
.btn-logout{display:flex;align-items:center;justify-content:center;gap:6px;padding:9px;background:rgba(239,68,68,.05);border:1px solid rgba(239,68,68,.1);border-radius:var(--radius-sm);color:#fca5a5;font-size:11px;width:100%;transition:all .3s}
.btn-logout:hover{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.25);transform:translateY(-1px)}

/* === MOBILE === */
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(4px);z-index:150}
.mobile-topbar{display:none;position:sticky;top:0;left:0;right:0;height:var(--topbar-h);background:rgba(10,10,16,.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:0 16px;align-items:center;justify-content:space-between;z-index:100}
.btn-menu{background:none;border:none;color:var(--text);font-size:22px;padding:8px;border-radius:10px;transition:all .3s}
.btn-menu:hover{background:rgba(255,255,255,.05)}
.mobile-logo{display:flex;align-items:center;gap:0}

@media(max-width:768px){
    .nav-sidebar{position:fixed;left:0;top:0;transform:translateX(-100%);box-shadow:4px 0 40px rgba(0,0,0,.6)}
    .nav-sidebar.open{transform:translateX(0)}
    .sidebar-overlay.open{display:block}
    .mobile-topbar{display:flex}
    .content-section{padding:16px !important;padding-top:8px !important}
    .section-header{flex-direction:column;align-items:stretch !important}
    .section-search{max-width:100% !important}
    .channel-grid{grid-template-columns:1fr !important}
    .poster-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr)) !important}
    .modal-overlay{padding:0;align-items:flex-end}
    .modal-content{max-width:100%;max-height:95vh;border-radius:20px 20px 0 0;border-bottom:none}
    .modal-detail-header{flex-direction:column;align-items:center;text-align:center;padding:20px 18px 14px;gap:14px}
    .modal-poster{width:130px !important;min-width:130px !important}
    .modal-info h2{padding-right:0 !important;font-size:18px}
    .modal-info{text-align:center}
    .modal-meta{justify-content:center}
    .modal-actions{justify-content:center}
    .modal-desc{font-size:12px;max-height:80px}
    .seasons-section{padding:0 16px 20px}
    .settings-container{padding:0 !important}
}
@media(min-width:769px) and (max-width:1024px){
    .modal-content{max-width:700px}
    .modal-poster{width:150px !important;min-width:150px !important}
    .episode-card-nf{min-width:210px;max-width:210px}
}
@media(max-width:400px){
    .poster-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr)) !important;gap:8px !important}
}

/* === POSTER CARD — MOBILE RESIZE === */
@media(max-width:768px){
    .poster-rating{
        top:4px;
        right:4px;
        font-size:9px;
        padding:2px 5px;
        border-radius:5px;
        gap:2px;
    }
    .poster-rating i{font-size:8px}
    .poster-fav{
        top:4px;
        left:4px;
        font-size:10px;
        padding:5px;
    }
    .poster-badge{
        top:4px;
        left:4px;
        font-size:8px;
        padding:2px 6px;
        border-radius:5px;
    }
    .poster-info{padding:8px 8px}
    .poster-title{font-size:11px}
    .poster-year{font-size:9px;margin-top:2px}
}
@media(max-width:400px){
    .poster-rating{
        top:3px;
        right:3px;
        font-size:8px;
        padding:2px 4px;
        gap:1px;
    }
    .poster-rating i{font-size:7px}
    .poster-fav{
        top:3px;
        left:3px;
        font-size:9px;
        padding:4px;
    }
    .poster-badge{
        top:3px;
        left:3px;
        font-size:7px;
        padding:2px 5px;
    }
    .poster-info{padding:6px 6px}
    .poster-title{font-size:10px}
    .poster-year{font-size:8px;margin-top:1px}
}

/* === MAIN CONTENT === */
.main-content{flex:1;overflow-y:auto;overflow-x:hidden;background:var(--bg-primary);scroll-behavior:smooth}
.content-section{display:none;padding:28px 32px;min-height:100%;animation:fadeIn .3s cubic-bezier(.4,0,.2,1)}
.content-section.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;gap:14px;flex-wrap:wrap}
.section-header h2{font-size:clamp(18px,3vw,22px);font-weight:800;display:flex;align-items:center;gap:10px;white-space:nowrap}
.section-header h2 i{color:var(--purple);font-size:18px}

/* === WEATHER WIDGET === */
.weather-widget{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,rgba(124,58,237,.08),rgba(168,85,247,.05));border:1px solid rgba(124,58,237,.15);border-radius:16px;padding:12px 20px;transition:all .3s;backdrop-filter:blur(10px)}
.weather-widget:hover{border-color:rgba(124,58,237,.3);box-shadow:var(--shadow-glow)}
.weather-loading{font-size:12px;color:var(--text-muted)}
.weather-icon{font-size:32px;flex-shrink:0;filter:drop-shadow(0 2px 8px rgba(245,158,11,.3))}
.weather-icon .fa-cloud-rain,.weather-icon .fa-bolt{color:#3b82f6}
.weather-icon .fa-cloud,.weather-icon .fa-cloud-sun{color:#94a3b8}
.weather-icon .fa-sun{color:#f59e0b}
.weather-icon .fa-snowflake{color:#93c5fd}
.weather-icon .fa-smog{color:#6b7280}
.weather-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.weather-temp{font-size:20px;font-weight:800;color:var(--text);line-height:1.2;display:flex;align-items:baseline;gap:8px}
.weather-desc-inline{font-size:11px;font-weight:500;color:var(--text-sec);text-transform:capitalize}
.weather-city{font-size:11px;color:var(--purple);display:flex;align-items:center;gap:4px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.weather-city i{font-size:9px}
.weather-divider{width:1px;height:40px;background:rgba(124,58,237,.2);flex-shrink:0}
.weather-clock{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:70px}
.wc-time{font-size:22px;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:1px;line-height:1.2}
.wc-date{font-size:10px;color:var(--text-sec);text-transform:capitalize;font-weight:500}
@media(max-width:768px){
    .weather-widget{padding:8px 12px;gap:8px;flex-wrap:nowrap}
    .weather-icon{font-size:22px}
    .weather-temp{font-size:15px}
    .weather-desc-inline{font-size:10px}
    .weather-city{font-size:10px}
    .wc-time{font-size:16px}
    .wc-date{font-size:9px}
    .weather-divider{height:28px}
}

/* === SEARCH === */
.section-search{position:relative;display:flex;align-items:center;max-width:340px;flex:1}
.section-search i{position:absolute;left:14px;color:var(--text-muted);font-size:13px;transition:color .3s}
.section-search input{width:100%;padding:10px 14px 10px 38px;background:var(--bg-input);border:1.5px solid var(--border);border-radius:24px;color:var(--text);font-size:13px;outline:none;transition:all .3s}
.section-search input:focus{border-color:var(--purple);box-shadow:0 0 0 4px var(--purple-glow)}
.section-search input:focus~i,.section-search:has(input:focus) i{color:var(--purple)}
.section-search input::placeholder{color:var(--text-muted)}

/* === CATEGORIES === */
.categories-wrap{position:relative;margin-bottom:14px}
.categories-bar{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;cursor:grab}
.categories-bar::-webkit-scrollbar{display:none}
.cat-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:34px;height:34px;border-radius:50%;background:rgba(15,15,23,.95);border:1px solid rgba(124,58,237,.3);color:var(--text);font-size:13px;display:none;align-items:center;justify-content:center;cursor:pointer;transition:all .25s;box-shadow:var(--shadow-sm);backdrop-filter:blur(8px)}
.cat-arrow:hover{background:rgba(124,58,237,.85);color:#fff;transform:translateY(-50%) scale(1.1);box-shadow:0 4px 20px rgba(124,58,237,.4)}
.cat-arrow.arr-left{left:0}
.cat-arrow.arr-right{right:0}
.cat-arrow.visible{display:flex}
.categories-wrap:hover .cat-arrow.visible{display:flex}
.categories-wrap .categories-bar{padding-left:0;padding-right:0;transition:padding .2s}
.categories-wrap.has-left .categories-bar{padding-left:36px}
.categories-wrap.has-right .categories-bar{padding-right:36px}
.category-chip{padding:7px 16px;background:var(--bg-input);border:1.5px solid var(--border);border-radius:20px;color:var(--text-sec);font-size:12px;cursor:pointer;white-space:nowrap;transition:all .25s;flex-shrink:0;font-weight:500}
.category-chip:hover{border-color:var(--border-hover);color:var(--text);background:var(--bg-card-hover)}
.category-chip.active{background:var(--gradient);border-color:transparent;color:#fff;font-weight:600;box-shadow:0 4px 15px var(--purple-glow, rgba(124,58,237,.25))}
.items-count{font-size:11px;color:var(--text-muted);margin-bottom:12px;font-weight:500}
@media(max-width:768px){.cat-arrow{display:none!important}}

/* === GRIDS === */
.items-grid{display:grid;gap:12px}
.channel-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.poster-grid{grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:16px}

/* Channel Card */
.channel-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;display:flex;align-items:center;gap:14px;cursor:pointer;transition:all var(--transition);position:relative;overflow:hidden}
.channel-card::before{content:'';position:absolute;left:0;top:0;width:4px;height:100%;background:var(--btn-gradient);opacity:0;transition:opacity var(--transition)}
.channel-card::after{content:'';position:absolute;inset:0;background:var(--glass-gradient);opacity:0;transition:opacity var(--transition)}
.channel-card:hover{border-color:var(--border-hover);background:var(--bg-card-hover);transform:translateY(-3px);box-shadow:var(--shadow-md),0 0 30px rgba(124,58,237,.1)}
.channel-card:hover::before,.channel-card.active::before{opacity:1}
.channel-card:hover::after{opacity:1}
.ch-logo{width:52px;height:52px;background:var(--bg-input);border-radius:var(--radius-xs);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;border:1px solid var(--border);position:relative;z-index:1}
.ch-logo img{width:100%;height:100%;object-fit:contain}
.ch-logo i{color:var(--purple);font-size:20px}
.ch-info{flex:1;min-width:0;position:relative;z-index:1}
.ch-name{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-cat{font-size:11px;color:var(--text-muted);margin-top:4px}
.ch-epg-now{font-size:11px;color:var(--purple);margin-top:5px;display:flex;align-items:center;gap:5px;font-weight:600}
.ch-epg-now .live-dot{width:6px;height:6px;background:var(--red);border-radius:50%;animation:pulse 2s infinite;flex-shrink:0;box-shadow:0 0 8px rgba(239,68,68,.5)}
.btn-fav{background:none;border:none;color:var(--text-muted);font-size:16px;padding:8px;transition:all .3s;flex-shrink:0;border-radius:10px;position:relative;z-index:1}
.btn-fav:hover{color:var(--red);transform:scale(1.2);background:rgba(239,68,68,.08)}
.btn-fav.is-fav{color:var(--red)}

/* Poster Card */
.poster-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:all var(--transition);position:relative}
.poster-card::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(124,58,237,.08) 100%);opacity:0;transition:opacity .3s;z-index:1;pointer-events:none;border-radius:inherit}
.poster-card:hover{border-color:var(--border-hover);transform:translateY(-6px) scale(1.02);box-shadow:var(--shadow-md),0 0 40px rgba(124,58,237,.12)}
.poster-card:hover::before{opacity:1}
.poster-img{width:100%;aspect-ratio:2/3;background:var(--bg-input);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.poster-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.poster-card:hover .poster-img img{transform:scale(1.12)}
.poster-img i{font-size:32px;color:var(--text-muted)}
.poster-overlay{position:absolute;inset:0;background:linear-gradient(transparent 30%,rgba(0,0,0,.9));opacity:0;transition:opacity .35s;display:flex;align-items:flex-end;justify-content:center;padding-bottom:22px;pointer-events:none;z-index:2}
.poster-card:hover .poster-overlay{opacity:1}
.poster-play-icon{width:52px;height:52px;background:var(--btn-gradient);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;box-shadow:0 6px 30px rgba(124,58,237,.5);transition:all .3s;transform:translateY(10px)}
.poster-card:hover .poster-play-icon{transform:translateY(0) scale(1.1)}
.poster-rating{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.85);color:var(--yellow);font-size:11px;font-weight:700;padding:5px 10px;border-radius:8px;display:flex;align-items:center;gap:4px;backdrop-filter:blur(10px);z-index:3;border:1px solid rgba(245,158,11,.2)}
.poster-badge{position:absolute;top:10px;left:10px;background:var(--btn-gradient);color:#fff;font-size:10px;font-weight:800;padding:4px 10px;border-radius:8px;letter-spacing:.5px;z-index:3;box-shadow:0 4px 15px rgba(124,58,237,.3)}
.poster-fav{position:absolute;top:10px;left:10px;background:rgba(0,0,0,.7);border:none;color:var(--text-muted);font-size:14px;padding:8px;border-radius:50%;cursor:pointer;transition:all .25s;line-height:1;backdrop-filter:blur(6px);z-index:3}
.poster-fav:hover{color:var(--red);background:rgba(0,0,0,.85);transform:scale(1.1)}
.poster-fav.is-fav{color:var(--red)}
.poster-info{padding:14px 14px;position:relative;z-index:2}
.poster-title{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.poster-year{font-size:11px;color:var(--text-muted);margin-top:4px}

/* Load More */
.load-more-wrapper{text-align:center;padding:20px 0}
.btn-load-more{padding:11px 30px;background:var(--bg-card);border:1.5px solid var(--border);border-radius:24px;color:var(--text-sec);font-size:13px;font-weight:600;transition:all .3s;display:inline-flex;align-items:center;gap:8px}
.btn-load-more:hover{border-color:var(--border-hover);color:var(--text);background:var(--bg-card-hover);transform:translateY(-2px);box-shadow:var(--shadow-sm)}

/* === HOME === */
.home-block{margin-bottom:28px}
.home-block-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.home-block-header h3{font-size:16px;font-weight:800;display:flex;align-items:center;gap:8px}
.home-block-header h3 i{color:var(--purple);font-size:15px}
.horizontal-list{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;scrollbar-width:none;scroll-snap-type:x mandatory}
.horizontal-list::-webkit-scrollbar{display:none}

.h-card{min-width:190px;max-width:190px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:14px;cursor:pointer;transition:all var(--transition);flex-shrink:0;scroll-snap-align:start}
.h-card:hover{border-color:var(--border-hover);transform:translateY(-3px);box-shadow:var(--shadow-md)}
.h-card-logo{width:44px;height:44px;background:var(--bg-input);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;margin-bottom:10px;overflow:hidden;border:1px solid var(--border)}
.h-card-logo img{width:100%;height:100%;object-fit:contain}
.h-card-logo i{color:var(--purple);font-size:18px}
.h-card-name{font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h-card-sub{font-size:10px;color:var(--text-muted);margin-top:3px}

.h-poster{min-width:140px;max-width:140px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:all var(--transition);flex-shrink:0;scroll-snap-align:start}
.h-poster:hover{border-color:var(--border-hover);transform:translateY(-3px);box-shadow:var(--shadow-md)}
.hp-img{width:100%;aspect-ratio:2/3;background:var(--bg-input);display:flex;align-items:center;justify-content:center;overflow:hidden}
.hp-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.h-poster:hover .hp-img img{transform:scale(1.05)}
.hp-img i{font-size:24px;color:var(--text-muted)}
.hp-info{padding:8px 10px}
.hp-title{font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* === CATEGORY CAROUSELS === */
.cat-carousels{display:flex;flex-direction:column;gap:6px}
.cat-carousel-block{margin-bottom:22px}
.cat-carousel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;padding:0 2px}
.cat-carousel-header h3{font-size:15px;font-weight:800;display:flex;align-items:center;gap:8px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70%}
.cat-carousel-header h3 i{color:var(--purple);font-size:14px;flex-shrink:0}
.cat-carousel-count{font-size:10px;font-weight:700;color:var(--purple);background:rgba(var(--purple-rgb,124,58,237),.12);padding:2px 8px;border-radius:10px;margin-left:8px;flex-shrink:0}
.cat-carousel-viewall{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--purple);background:none;border:none;cursor:pointer;padding:6px 12px;border-radius:20px;transition:all .2s;white-space:nowrap;flex-shrink:0}
.cat-carousel-viewall:hover{background:rgba(var(--purple-rgb,124,58,237),.1)}
.cat-carousel-viewall i{font-size:10px;transition:transform .2s}
.cat-carousel-viewall:hover i{transform:translateX(3px)}
.cat-carousel-track{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;scrollbar-width:none;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.cat-carousel-track::-webkit-scrollbar{display:none}
.cat-carousel-track .h-card,.cat-carousel-track .h-poster{scroll-snap-align:start}

/* Expanded Category Grid */
.expanded-grid-wrap{display:none}
.expanded-grid-wrap.active{display:block;animation:fadeIn .25s ease}
.expanded-grid-header{display:flex;align-items:center;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.expanded-back{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--purple);background:none;border:1.5px solid rgba(var(--purple-rgb,124,58,237),.25);padding:7px 16px;border-radius:22px;cursor:pointer;transition:all .2s;flex-shrink:0}
.expanded-back:hover{background:rgba(var(--purple-rgb,124,58,237),.1);border-color:var(--purple)}
.expanded-back i{font-size:11px}
.expanded-grid-header h3{font-size:18px;font-weight:800;margin:0;display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.expanded-grid-header h3 i{color:var(--purple);font-size:16px}
.expanded-count{font-size:11px;font-weight:700;color:var(--purple);background:rgba(var(--purple-rgb,124,58,237),.12);padding:3px 10px;border-radius:12px;flex-shrink:0}
.expanded-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:14px}
.expanded-grid .channel-card,.expanded-grid .poster-card{width:auto;min-width:0;max-width:none}

/* Section header right side (count + search) */
.section-header-right{display:flex;align-items:center;gap:10px}
.section-count{font-size:11px;font-weight:700;color:var(--purple);background:rgba(var(--purple-rgb,124,58,237),.12);padding:3px 10px;border-radius:12px;white-space:nowrap}

@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

@media(max-width:768px){
    .cat-carousel-header h3{font-size:13px;max-width:55%}
    .cat-carousel-viewall{font-size:11px;padding:5px 10px}
    .cat-carousel-count{font-size:9px;padding:2px 6px}
    .cat-carousel-track{gap:10px}
    .cat-carousel-track .h-card{min-width:160px;max-width:160px}
    .cat-carousel-track .h-poster{min-width:120px;max-width:120px}
    .expanded-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
    .expanded-grid-header{gap:10px;margin-bottom:14px}
    .expanded-grid-header h3{font-size:15px}
    .expanded-back{font-size:12px;padding:6px 12px}
    .section-header-right{gap:6px}
}

@media(max-width:480px){
    .cat-carousel-track .h-card{min-width:150px;max-width:150px;padding:10px}
    .cat-carousel-track .h-poster{min-width:110px;max-width:110px}
    .expanded-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
}

/* === GRID MODE (Accordion Categories) === */
.grid-mode .cat-carousel-block{display:none}
.cat-accordion-block{margin-bottom:12px;border-radius:12px;background:var(--bg-secondary,rgba(30,27,42,0.6));overflow:hidden;border:1px solid var(--border-color,rgba(255,255,255,0.06))}
.cat-accordion-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;cursor:pointer;transition:all .2s;user-select:none}
.cat-accordion-header:hover{background:rgba(124,58,237,.08)}
.cat-accordion-header.expanded{background:rgba(124,58,237,.1)}
.cat-accordion-header h3{font-size:15px;font-weight:800;display:flex;align-items:center;gap:8px;margin:0;flex:1}
.cat-accordion-header h3 i{color:var(--purple);font-size:14px}
.cat-accordion-count{font-size:10px;font-weight:700;color:var(--purple);background:rgba(var(--purple-rgb,124,58,237),.15);padding:3px 10px;border-radius:10px;margin-left:10px}
.cat-accordion-arrow{color:var(--text-muted,#8b8b8b);font-size:12px;transition:transform .3s ease}
.cat-accordion-header.expanded .cat-accordion-arrow{transform:rotate(180deg);color:var(--purple)}
.cat-accordion-content{padding:0 12px 12px;animation:accordionOpen .3s ease}
.cat-accordion-content.expanded{animation:accordionOpen .3s ease}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:12px;padding-top:8px}
.cat-grid .poster-card{width:auto;min-width:0}
@keyframes accordionOpen{from{opacity:0;max-height:0}to{opacity:1;max-height:none}}

@media(max-width:768px){
    .cat-accordion-header{padding:12px 14px}
    .cat-accordion-header h3{font-size:13px}
    .cat-accordion-count{font-size:9px;padding:2px 7px}
    .cat-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
}

@media(max-width:480px){
    .cat-accordion-header{padding:10px 12px}
    .cat-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px}
}

/* === FAVORITES === */
.favorites-tabs{display:flex;gap:8px;margin-bottom:18px}
.fav-tab{padding:8px 20px;background:var(--bg-input);border:1.5px solid var(--border);border-radius:24px;color:var(--text-sec);font-size:12px;font-weight:500;transition:all .25s}
.fav-tab:hover{border-color:var(--border-hover);color:var(--text)}
.fav-tab.active{background:var(--gradient);border-color:transparent;color:#fff;font-weight:700;box-shadow:0 4px 15px rgba(124,58,237,.25)}

/* === EPG === */
.epg-channel-list{display:flex;flex-direction:column;gap:8px}
.epg-row{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 16px;display:flex;align-items:center;gap:14px;cursor:pointer;transition:all .25s}
.epg-row:hover{border-color:var(--border-hover);background:var(--bg-card-hover)}
.epg-ch-logo{width:36px;height:36px;background:var(--bg-input);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
.epg-ch-logo img{width:100%;height:100%;object-fit:contain}
.epg-ch-logo i{color:var(--purple);font-size:13px}
.epg-ch-name{font-size:13px;font-weight:700;min-width:140px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.epg-programs{flex:1;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.epg-programs::-webkit-scrollbar{display:none}
.epg-program{background:var(--bg-input);border-radius:8px;padding:6px 10px;white-space:nowrap;flex-shrink:0}
.epg-program .epg-time{font-size:9px;color:var(--purple);font-weight:700}
.epg-program .epg-title{font-size:10px;color:var(--text-sec);margin-top:2px}
.epg-program.now{background:rgba(124,58,237,.1);border:1px solid rgba(124,58,237,.2);border-radius:8px}
.epg-program.now .epg-title{color:var(--text)}

/* === SETTINGS === */
.settings-container{max-width:700px}
.settings-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:24px;margin-bottom:18px;transition:border-color .3s}
.settings-card:hover{border-color:rgba(124,58,237,.15)}
.settings-card-header{display:flex;align-items:flex-start;gap:16px;margin-bottom:20px}
.settings-card-icon{width:46px;height:46px;background:var(--gradient);border-radius:14px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;flex-shrink:0;box-shadow:0 4px 15px rgba(124,58,237,.2)}
.settings-card-header h3{font-size:17px;font-weight:800;margin-bottom:3px}
.settings-card-header p{font-size:12px;color:var(--text-sec)}

/* Account Info Card in Settings */
.settings-account-info{padding:0}
.account-info-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.account-info-item{display:flex;flex-direction:column;gap:4px;padding:14px 16px;background:rgba(124,58,237,.04);border:1px solid rgba(124,58,237,.08);border-radius:12px;transition:all .3s}
.account-info-item:hover{background:rgba(124,58,237,.08);border-color:rgba(124,58,237,.15)}
.account-label{font-size:11px;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px;display:flex;align-items:center;gap:6px}
.account-label i{font-size:12px;color:var(--purple);opacity:.7}
.account-value{font-size:16px;font-weight:700;color:#fff}
.account-status.status-active{color:#22c55e}
.account-status.status-inactive{color:#ef4444}
@media(max-width:600px){.account-info-row{grid-template-columns:1fr 1fr}.account-info-item{padding:10px 12px}.account-value{font-size:14px}}
.settings-group{margin-bottom:18px}
.settings-group:last-child{margin-bottom:0}
.settings-label{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--text-sec);margin-bottom:10px}
.settings-label i{color:var(--purple);font-size:11px}
.settings-toggle-row{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm)}
.settings-toggle-row span{font-size:13px;font-weight:500}
.toggle-switch{position:relative;width:46px;height:26px;flex-shrink:0}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;inset:0;background:var(--border);border-radius:13px;cursor:pointer;transition:.3s}
.toggle-slider::before{content:'';position:absolute;left:3px;bottom:3px;width:20px;height:20px;background:#fff;border-radius:50%;transition:.3s}
.toggle-switch input:checked+.toggle-slider{background:var(--purple);box-shadow:0 0 12px rgba(124,58,237,.3)}
.toggle-switch input:checked+.toggle-slider::before{transform:translateX(20px)}
.pin-change-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pin-input{width:90px;padding:10px 10px;background:var(--bg-input);border:1.5px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:14px;text-align:center;outline:none;transition:all .3s}
.pin-input:focus{border-color:var(--purple);box-shadow:0 0 0 3px var(--purple-glow)}
.btn-settings{padding:9px 18px;background:var(--bg-input);border:1.5px solid var(--border);border-radius:var(--radius-sm);color:var(--text-sec);font-size:12px;font-weight:600;transition:all .25s;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.btn-settings:hover{border-color:var(--purple);color:var(--text);background:var(--bg-card-hover)}
.btn-settings.btn-danger{border-color:rgba(239,68,68,.2);color:rgba(239,68,68,.8)}
.btn-settings.btn-danger:hover{border-color:var(--red);color:var(--red);background:rgba(239,68,68,.06)}

.blocked-cats-list{display:flex;flex-wrap:wrap;gap:8px;max-height:200px;overflow-y:auto;padding:4px 0}
.blocked-cat-chip{display:flex;align-items:center;gap:5px;padding:6px 14px;background:var(--bg-input);border:1.5px solid var(--border);border-radius:18px;font-size:11px;color:var(--text-sec);cursor:pointer;transition:all .25s;user-select:none}

/* Display Mode Options */
.display-mode-options{display:flex;gap:16px;flex-wrap:wrap}
.display-mode-option{flex:1;min-width:140px}
.display-mode-option input{display:none}
.display-mode-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 16px;background:var(--bg-input);border:2px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:all .3s}
.display-mode-card i{font-size:28px;color:var(--text-sec);transition:all .3s}
.display-mode-card span{font-size:14px;font-weight:600;color:var(--text)}
.display-mode-card small{font-size:11px;color:var(--text-sec);text-align:center}
.display-mode-option input:checked+.display-mode-card{border-color:var(--purple);background:rgba(124,58,237,.08)}
.display-mode-option input:checked+.display-mode-card i{color:var(--purple)}
.display-mode-card:hover{border-color:var(--purple);transform:translateY(-2px)}
.blocked-cat-chip:hover{border-color:var(--border-hover)}
.blocked-cat-chip input[type="checkbox"]{display:none}
.blocked-cat-chip.blocked{background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.25);color:rgba(239,68,68,.9)}
.blocked-cat-chip .chip-icon{font-size:9px}
.loading-placeholder-sm{font-size:11px;color:var(--text-muted);padding:8px 0}
.loading-placeholder-sm i{margin-right:4px}

/* === PIN MODAL === */
.modal-pin{max-width:340px;text-align:center;padding:36px 28px}
.pin-modal-icon{width:64px;height:64px;background:var(--gradient);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:26px;margin:0 auto 18px;box-shadow:0 4px 25px rgba(124,58,237,.3)}
.modal-pin h3{font-size:20px;font-weight:800;margin-bottom:6px}
.modal-pin>p{font-size:13px;color:var(--text-sec);margin-bottom:24px}
.pin-dots{display:flex;gap:14px;justify-content:center;margin-bottom:28px}
.pin-dots span{width:18px;height:18px;border-radius:50%;border:2px solid var(--border);transition:all .25s}
.pin-dots span.filled{background:var(--purple);border-color:var(--purple);box-shadow:0 0 10px rgba(124,58,237,.3)}
.pin-keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:260px;margin:0 auto}
.pin-keypad button{height:52px;background:var(--bg-input);border:1.5px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:20px;font-weight:700;transition:all .2s}
.pin-keypad button:hover{background:var(--bg-card-hover);border-color:var(--border-hover)}
.pin-keypad button:active{transform:scale(.93)}
.pin-error{color:var(--red);font-size:12px;margin-top:14px;animation:shakeIn .4s}

/* === MODALS === */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:2000;display:flex;align-items:center;justify-content:center;animation:fadeIn .25s;padding:16px}
.modal-content{background:var(--bg-secondary);border:1px solid var(--border);border-radius:20px;width:100%;max-width:960px;max-height:92vh;overflow-y:auto;position:relative;box-shadow:var(--shadow-lg),var(--shadow-glow)}
.modal-content::-webkit-scrollbar{width:5px}
.modal-content::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
.modal-close{position:absolute;top:16px;right:16px;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.08);color:#fff;width:38px;height:38px;border-radius:50%;font-size:14px;display:flex;align-items:center;justify-content:center;z-index:5;transition:all .3s}
.modal-close:hover{background:rgba(255,255,255,.15);transform:scale(1.1) rotate(90deg)}

.modal-detail-header{display:flex;gap:24px;padding:28px 28px 22px}
.modal-poster{width:180px;min-width:180px;aspect-ratio:2/3;background:var(--bg-input);border-radius:16px;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid var(--border);box-shadow:var(--shadow-md)}
.modal-poster img{width:100%;height:100%;object-fit:cover}
.modal-poster i{font-size:40px;color:var(--text-muted)}
.modal-info{flex:1;min-width:0}
.modal-info h2{font-size:22px;font-weight:900;margin-bottom:12px;padding-right:36px;line-height:1.3}
.modal-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.modal-meta span{display:inline-flex;align-items:center;gap:5px;font-size:11px;padding:5px 12px;background:rgba(124,58,237,.06);border:1px solid rgba(124,58,237,.12);border-radius:22px;color:var(--text-sec);font-weight:500}
.modal-meta .meta-rating{color:var(--yellow)}
.modal-meta .meta-rating i{font-size:9px}
.modal-desc{font-size:13px;color:var(--text-sec);line-height:1.7;margin-bottom:20px;max-height:120px;overflow-y:auto}
.modal-actions{display:flex;gap:12px;flex-wrap:wrap}
.btn-play-modal{padding:12px 30px;background:var(--btn-gradient);border:none;border-radius:14px;color:#fff;font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px;transition:all .3s;box-shadow:0 4px 20px rgba(124,58,237,.3)}
.btn-play-modal:hover{transform:translateY(-2px);box-shadow:0 8px 30px var(--purple-glow)}
.btn-fav-modal{padding:12px 22px;background:var(--bg-input);border:1.5px solid var(--border);border-radius:14px;color:var(--text-sec);font-size:14px;display:flex;align-items:center;gap:8px;transition:all .3s}
.btn-fav-modal:hover{border-color:var(--red);color:var(--red)}
.btn-fav-modal.is-fav{color:var(--red);border-color:var(--red)}

/* === SEASONS & EPISODES === */
.seasons-section{padding:0 28px 28px}
.seasons-section h3{font-size:18px;font-weight:800;margin-bottom:18px;display:flex;align-items:center;gap:8px}
.seasons-section h3 i{color:var(--purple)}
.seasons-tabs{display:flex;gap:8px;overflow-x:auto;margin-bottom:18px;scrollbar-width:none;padding-bottom:2px}
.seasons-tabs::-webkit-scrollbar{display:none}
.season-tab{padding:8px 20px;background:var(--bg-input);border:1.5px solid var(--border);border-radius:22px;color:var(--text-sec);font-size:12px;cursor:pointer;white-space:nowrap;transition:all .25s;flex-shrink:0;font-weight:600}
.season-tab:hover{border-color:var(--border-hover);color:var(--text);background:var(--bg-card-hover)}
.season-tab.active{background:var(--gradient);border-color:transparent;color:#fff;font-weight:700;box-shadow:0 4px 15px rgba(124,58,237,.3)}
.episodes-list{display:flex;gap:16px;overflow-x:auto;overflow-y:hidden;padding-bottom:14px;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
.episodes-list::-webkit-scrollbar{height:4px}
.episodes-list::-webkit-scrollbar-track{background:transparent}
.episodes-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
.carousel-wrap{position:relative}
.carousel-arrow{position:absolute;top:50%;transform:translateY(-60%);z-index:5;width:42px;height:42px;border-radius:50%;background:rgba(124,58,237,.85);border:1px solid rgba(124,58,237,.5);color:#fff;font-size:16px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s;box-shadow:0 4px 20px rgba(0,0,0,.4);backdrop-filter:blur(8px)}
.carousel-arrow:hover{background:var(--purple);transform:translateY(-60%) scale(1.1);box-shadow:0 6px 25px rgba(124,58,237,.5)}
.carousel-arrow.arr-left{left:-8px}
.carousel-arrow.arr-right{right:-8px}
.carousel-arrow.arr-hidden{opacity:0;pointer-events:none}

/* NETFLIX-STYLE EPISODE CARDS */
.episode-card-nf{display:flex;flex-direction:column;min-width:250px;max-width:250px;background:var(--bg-card);border:1px solid var(--border);border-radius:16px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);overflow:hidden;position:relative;scroll-snap-align:start;flex-shrink:0}
.episode-card-nf:hover{border-color:var(--purple);background:var(--bg-card-hover);transform:translateY(-5px) scale(1.02);box-shadow:0 12px 40px rgba(124,58,237,.2)}
.ep-thumb{position:relative;width:100%;height:140px;overflow:hidden;background:var(--bg-input);flex-shrink:0}
.ep-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.episode-card-nf:hover .ep-thumb img{transform:scale(1.1)}
.ep-thumb-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;color:rgba(255,255,255,.5)}
.ep-ph-num{font-size:42px;font-weight:900;color:rgba(255,255,255,.15);letter-spacing:2px}
.ep-thumb-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,0,0,.6),rgba(124,58,237,.2));display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s}
.episode-card-nf:hover .ep-thumb-overlay{opacity:1}
.ep-thumb-overlay i{font-size:48px;color:#fff;filter:drop-shadow(0 4px 12px rgba(0,0,0,.6));transition:transform .3s}
.episode-card-nf:hover .ep-thumb-overlay i{transform:scale(1.1)}
.ep-number-badge{position:absolute;top:10px;left:10px;background:var(--btn-gradient);color:#fff;font-size:11px;font-weight:800;padding:5px 12px;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.4)}
.ep-thumb-gradient{position:absolute;bottom:0;left:0;right:0;height:40%;background:linear-gradient(transparent,rgba(0,0,0,.6));pointer-events:none}
.ep-details{flex:1;display:flex;flex-direction:column;gap:4px;padding:14px 16px}
.ep-title-nf{font-size:13px;font-weight:700;color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4}
.ep-meta-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ep-dur{font-size:12px;color:var(--text-sec);display:flex;align-items:center;gap:5px;font-weight:500}
.ep-dur i{font-size:10px;color:var(--purple)}
.ep-plot{font-size:11px;color:var(--text-muted);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:2px}
.ep-play-hint{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--purple);font-weight:600;margin-top:auto;padding-top:4px;opacity:0;transition:opacity .3s}
.episode-card-nf:hover .ep-play-hint{opacity:1}
@media(max-width:768px){
    .episode-card-nf{min-width:190px;max-width:190px}
    .ep-thumb{height:105px}
    .ep-details{padding:10px 12px}
    .ep-title-nf{font-size:12px;-webkit-line-clamp:1}
    .episodes-list{gap:10px}
    .carousel-arrow{width:36px;height:36px;font-size:14px}
}

/* Old episode items (keep for compat) */
.episode-item{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:all .2s}
.episode-item:hover{border-color:var(--border-hover);background:var(--bg-card-hover)}
.ep-number{width:30px;height:30px;background:var(--bg-input);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--purple);flex-shrink:0}
.ep-info{flex:1;min-width:0}
.ep-title{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ep-meta{font-size:10px;color:var(--text-muted);margin-top:1px}
.ep-play{color:var(--purple);font-size:14px;flex-shrink:0}

/* === PLAYER OVERLAY === */
.player-overlay{position:fixed;inset:0;background:#000;z-index:3000;display:flex;flex-direction:column;animation:fadeIn .2s}
.player-topbar{display:flex;align-items:center;padding:12px 18px;background:linear-gradient(rgba(0,0,0,.9),transparent);position:absolute;top:0;left:0;right:0;z-index:10;gap:14px;transition:opacity .4s}
.btn-back{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.08);border:none;color:#fff;padding:8px 16px;border-radius:var(--radius-sm);font-size:12px;font-weight:600;transition:all .3s;backdrop-filter:blur(8px)}
.btn-back:hover{background:rgba(255,255,255,.15)}
.player-ch-name{flex:1;font-size:15px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-actions{display:flex;gap:8px}
.player-actions button{background:rgba(255,255,255,.08);border:none;color:#fff;width:38px;height:38px;border-radius:var(--radius-sm);font-size:15px;transition:all .3s;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px)}
.player-actions button:hover{background:rgba(255,255,255,.18);transform:scale(1.05)}
.btn-fav-player.is-fav{color:var(--red)}
.btn-cast{position:relative}
.btn-cast.cast-active{color:#22c55e;background:rgba(34,197,94,.15);border:1px solid rgba(34,197,94,.3)}
.btn-cast.cast-connecting{color:var(--purple);animation:castPulse 1.5s ease infinite}
@keyframes castPulse{0%,100%{opacity:1}50%{opacity:.4}}
.btn-cast.cast-active::after{content:'';position:absolute;bottom:2px;right:2px;width:8px;height:8px;background:#22c55e;border-radius:50%;border:2px solid rgba(0,0,0,.5);animation:pulse 2s infinite}
.player-wrapper{flex:1;display:flex;align-items:center;justify-content:center;position:relative}
.player-wrapper video{width:100%;height:100%;object-fit:contain;background:#000}

/* === PLAYER LOADING SPINNER === */
.player-loader{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;z-index:8;background:rgba(0,0,0,.6)}
.loader-text{color:rgba(255,255,255,.7);font-size:13px;font-weight:600;letter-spacing:.5px}
.loader-spinner{display:inline-block;position:relative;width:56px;height:56px}
.loader-spinner div{box-sizing:border-box;display:block;position:absolute;width:48px;height:48px;margin:4px;border:4px solid transparent;border-radius:50%;animation:loaderSpin 1.2s cubic-bezier(.5,0,.5,1) infinite;border-top-color:#7c3aed}
.loader-spinner div:nth-child(1){animation-delay:-.45s;border-top-color:#7c3aed}
.loader-spinner div:nth-child(2){animation-delay:-.3s;border-top-color:#a855f7}
.loader-spinner div:nth-child(3){animation-delay:-.15s;border-top-color:#c084fc}
.loader-spinner div:nth-child(4){border-top-color:#e9d5ff}
@keyframes loaderSpin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
.now-bar{padding:12px 22px;background:linear-gradient(transparent,rgba(0,0,0,.9));position:absolute;bottom:0;left:0;right:0;z-index:10;display:flex;align-items:center;gap:14px;transition:opacity .4s}
.now-bar-vod{bottom:0;padding-bottom:8px}
.now-info h4{font-size:14px;font-weight:700;color:#fff}
.now-info p{font-size:11px;color:var(--text-muted);margin-top:2px}
.now-status{display:flex;align-items:center;gap:6px;margin-left:auto;font-size:12px;color:var(--green);font-weight:700}
.now-dot{width:8px;height:8px;background:var(--green);border-radius:50%;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* === PLAYER CONTROLS === */
.player-controls{position:absolute;bottom:50px;left:0;right:0;z-index:12;padding:0 18px 10px;background:linear-gradient(transparent,rgba(0,0,0,.85));transition:opacity .4s;pointer-events:auto}
.seek-bar-wrap{position:relative;height:24px;display:flex;align-items:center;cursor:pointer;margin-bottom:6px}
.seek-bar-bg{position:absolute;left:0;right:0;height:4px;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden;transition:height .2s}
.seek-bar-wrap:hover .seek-bar-bg{height:6px}
.seek-bar-buffered{height:100%;background:rgba(255,255,255,.18);border-radius:2px;position:absolute;left:0;top:0;transition:width .3s}
.seek-bar-fill{height:100%;background:var(--btn-gradient);border-radius:2px;position:absolute;left:0;top:0;z-index:1}
.seek-bar-input{position:absolute;left:0;right:0;width:100%;height:24px;opacity:0;cursor:pointer;z-index:2;margin:0;-webkit-appearance:none;appearance:none;background:transparent}
.seek-bar-input::-webkit-slider-runnable-track{background:transparent;height:4px}
.seek-bar-input::-moz-range-track{background:transparent;height:4px;border:none}
.seek-bar-input::-webkit-slider-thumb{-webkit-appearance:none;width:0;height:0;background:transparent;cursor:pointer;margin-top:0}
.seek-bar-wrap:hover .seek-bar-input::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 0 10px rgba(124,58,237,.6);cursor:pointer;margin-top:-6px}
.seek-bar-wrap:hover .seek-bar-input::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:none;box-shadow:0 0 10px rgba(124,58,237,.6);cursor:pointer}
.player-ctrl-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ctrl-left,.ctrl-right{display:flex;align-items:center;gap:6px;min-width:100px}
.ctrl-right{justify-content:flex-end}
.ctrl-center{display:flex;align-items:center;gap:10px}
.ctrl-time{font-size:12px;color:rgba(255,255,255,.85);font-weight:600;font-variant-numeric:tabular-nums}
.ctrl-sep{font-size:11px;color:rgba(255,255,255,.3)}
.ctrl-btn{background:rgba(255,255,255,.08);border:none;color:#fff;padding:8px 16px;border-radius:10px;font-size:12px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .25s;white-space:nowrap;backdrop-filter:blur(4px)}
.ctrl-btn:hover{background:rgba(255,255,255,.18);transform:scale(1.05)}
.ctrl-btn:active{transform:scale(.95)}
.ctrl-btn-play{padding:10px 22px;background:var(--btn-gradient);border-radius:12px;font-size:18px}
.ctrl-btn-play:hover{box-shadow:0 4px 20px rgba(124,58,237,.4)}
.ctrl-btn-sm{padding:6px 12px;font-size:11px;border-radius:8px}
.ctrl-btn-epg{background:rgba(124,58,237,.2);border:1px solid rgba(124,58,237,.35)}
.ctrl-btn-epg:hover{background:rgba(124,58,237,.35)}
.ctrl-live-badge{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#ef4444;text-transform:uppercase;letter-spacing:.5px}
.ctrl-live-dot{width:8px;height:8px;background:#ef4444;border-radius:50%;animation:pulse 1.5s infinite}

/* === VOLUME === */
.vol-wrap{display:flex;align-items:center;gap:0;position:relative}
.ctrl-btn-vol{padding:8px 10px;font-size:15px;border-radius:10px 0 0 10px;background:rgba(255,255,255,.06)}
.ctrl-btn-vol:hover{background:rgba(255,255,255,.15)}
.vol-slider-wrap{width:0;overflow:hidden;transition:width .3s ease;display:flex;align-items:center;position:relative;height:38px}
.vol-wrap:hover .vol-slider-wrap,.vol-slider-wrap:focus-within{width:95px}
.vol-slider-track{position:absolute;left:4px;right:8px;height:4px;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden;pointer-events:none}
.vol-slider-fill{height:100%;background:var(--btn-gradient);border-radius:2px;transition:width .1s}
.vol-slider-input{width:100%;height:38px;opacity:0;cursor:pointer;position:relative;z-index:2;-webkit-appearance:none;appearance:none;background:transparent;margin:0;padding:0 4px}
.vol-wrap:hover .vol-slider-input{opacity:1}
.vol-slider-input::-webkit-slider-runnable-track{background:transparent;height:4px}
.vol-slider-input::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;cursor:pointer;margin-top:-5px;box-shadow:0 0 8px rgba(124,58,237,.5)}
.vol-slider-input::-moz-range-track{background:transparent;height:4px;border:none}
.vol-slider-input::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:none;cursor:pointer;box-shadow:0 0 8px rgba(124,58,237,.5)}

/* === PLAYER EPG PANEL === */
.player-epg-panel{position:absolute;right:0;top:0;bottom:0;width:380px;max-width:85vw;background:rgba(10,10,20,.96);backdrop-filter:blur(16px);border-left:1px solid var(--border);z-index:20;display:flex;flex-direction:column;animation:slideInRight .3s cubic-bezier(.4,0,.2,1)}
@keyframes slideInRight{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
.player-epg-header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--border)}
.player-epg-header h4{font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px}
.player-epg-header h4 i{color:var(--purple)}
.player-epg-close{background:rgba(255,255,255,.06);border:none;color:#fff;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s}
.player-epg-close:hover{background:rgba(255,255,255,.15)}
.player-epg-list{flex:1;overflow-y:auto;padding:10px}
.player-epg-item{display:flex;gap:12px;padding:12px 14px;border-radius:10px;transition:all .25s;margin-bottom:4px}
.player-epg-item:hover{background:rgba(255,255,255,.04)}
.player-epg-item.epg-now{background:rgba(124,58,237,.08);border:1px solid rgba(124,58,237,.2);border-radius:10px}
.epg-item-time{font-size:11px;color:var(--purple);font-weight:700;min-width:90px;white-space:nowrap;padding-top:2px;font-variant-numeric:tabular-nums}
.epg-item-info{flex:1;min-width:0}
.epg-item-title{font-size:13px;font-weight:600;color:var(--text);margin-bottom:3px}
.epg-item-desc{font-size:11px;color:var(--text-muted);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.epg-now-badge{display:inline-block;background:var(--btn-gradient);color:#fff;font-size:9px;font-weight:800;padding:2px 8px;border-radius:5px;letter-spacing:.5px;vertical-align:middle;margin-right:4px}
@media(max-width:768px){
    .player-epg-panel{width:100%;max-width:100%;border-left:none;border-top:1px solid var(--border)}
    .player-controls{bottom:40px;padding:0 10px 4px}
    .ctrl-btn{padding:6px 10px;font-size:11px}
    .ctrl-btn-play{padding:8px 16px;font-size:15px}
    .ctrl-time{font-size:11px}
    .ctrl-left,.ctrl-right{min-width:70px}
    .vol-slider-wrap{display:none}
    .ctrl-btn-vol{border-radius:10px;padding:6px 10px}
}

/* === EMPTY / LOADING === */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;gap:12px;color:var(--text-muted);text-align:center;grid-column:1/-1}
.empty-state i{font-size:48px;color:var(--border)}
.empty-state p{font-size:14px;font-weight:600;color:var(--text-sec)}
.empty-state span{font-size:12px}
.loading-placeholder{display:flex;align-items:center;justify-content:center;gap:10px;padding:50px;color:var(--text-muted);font-size:13px;grid-column:1/-1}
.loading-placeholder i{color:var(--purple)}

/* === TOAST === */
.toast{position:fixed;bottom:24px;right:24px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:14px 20px;color:var(--text);font-size:13px;display:flex;align-items:center;gap:10px;z-index:9999;box-shadow:var(--shadow-lg);animation:toastIn .4s cubic-bezier(.4,0,.2,1)}
.toast i{font-size:16px}
.toast.success i{color:var(--green)}
.toast.error i{color:var(--red)}
.toast.info i{color:var(--blue)}
@keyframes toastIn{from{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}

/* === RESUME DIALOG === */
.resume-dialog{position:absolute;inset:0;background:rgba(0,0,0,.88);display:flex;align-items:center;justify-content:center;z-index:60;animation:fadeIn .3s}
.resume-content{background:var(--bg-card);border:1px solid var(--border);border-radius:18px;padding:32px 36px;text-align:center;max-width:380px;width:90%;box-shadow:var(--shadow-lg)}
.resume-content p{font-size:16px;color:var(--text);margin-bottom:16px;font-weight:600}
.resume-progress-bar{width:100%;height:5px;background:var(--bg-input);border-radius:3px;overflow:hidden;margin-bottom:20px}
.resume-progress-fill{height:100%;background:var(--btn-gradient);border-radius:3px}
.resume-btns{display:flex;gap:12px;justify-content:center}
.resume-btn{padding:11px 24px;border:none;border-radius:var(--radius-sm);font-size:13px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .3s}
.resume-btn-yes{background:var(--btn-gradient);color:#fff;box-shadow:0 4px 15px rgba(124,58,237,.3)}
.resume-btn-yes:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(124,58,237,.4)}
.resume-btn-no{background:var(--bg-input);color:var(--text-sec);border:1px solid var(--border)}
.resume-btn-no:hover{background:var(--bg-card-hover);color:var(--text)}

/* === SKIP INTRO === */
.btn-skip-intro{position:absolute;bottom:110px;right:30px;background:rgba(255,255,255,.12);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.25);color:#fff;padding:11px 26px;border-radius:var(--radius-sm);font-size:13px;font-weight:700;cursor:pointer;z-index:55;display:flex;align-items:center;gap:8px;transition:all .3s;animation:fadeIn .4s}
.btn-skip-intro:hover{background:rgba(255,255,255,.22);transform:translateY(-2px);box-shadow:0 4px 20px rgba(0,0,0,.3)}

/* === PROGRESS ON HISTORY CARDS === */
.h-card-progress{width:100%;height:3px;background:rgba(255,255,255,.08);border-radius:2px;margin-top:8px;overflow:hidden}
.h-card-progress-bar{height:100%;background:var(--btn-gradient);border-radius:2px}
.h-card-time{font-size:9px;color:var(--text-muted);margin-top:3px}

/* === SIDEBAR INSTALL BUTTON === */
.nav-install{position:relative;overflow:hidden}
.nav-install i{color:#22c55e}
.nav-install span{background:linear-gradient(90deg,#22c55e,#3b82f6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:700}
.nav-install::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(34,197,94,.06),transparent);animation:installShimmer 3s infinite}
@keyframes installShimmer{0%{left:-100%}100%{left:100%}}

/* ============================================================
   TV / SMART TV — REMOTE CONTROL FOCUS STYLES
   Samsung Tizen, LG webOS, Xbox, PlayStation, Fire TV, etc.
   ============================================================ */

/* TV/Xbox overscan compensation */
@media (display-mode: fullscreen), (display-mode: standalone) {
    body.tv-mode .app-container{padding:2vh 2vw}
    body.tv-mode .main-content{padding-right:2vw}
}

/* --- Focus-visible for modern browsers --- */
.nav-item:focus-visible,
.channel-card:focus-visible,
.poster-card:focus-visible,
.category-chip:focus-visible,
.h-card:focus-visible,
.h-poster:focus-visible,
.fav-tab:focus-visible,
.season-tab:focus-visible,
.episode-card-nf:focus-visible,
.epg-row:focus-visible,
.blocked-cat-chip:focus-visible,
.modal-close:focus-visible,
.btn-connect:focus-visible,
.btn-logout:focus-visible,
.btn-back:focus-visible,
.btn-settings:focus-visible,
.btn-menu:focus-visible,
.install-btn:focus-visible,
.ctrl-btn:focus-visible,
.pin-keypad button:focus-visible,
.resume-btn:focus-visible,
.cat-arrow:focus-visible,
.carousel-arrow:focus-visible,
.toggle-password:focus-visible,
.checkbox-container:focus-visible,
.btn-skip-intro:focus-visible,
.btn-cast:focus-visible,
.btn-load-more:focus-visible,
.btn-play-modal:focus-visible,
.btn-fav-modal:focus-visible,
.player-actions button:focus-visible,
.toggle-switch:focus-visible,
.server-select:focus-visible,
.footer-link:focus-visible {
    outline:3px solid rgba(124,58,237,0.9);
    outline-offset:3px;
    box-shadow:0 0 0 6px rgba(124,58,237,0.2),0 0 30px rgba(124,58,237,0.15);
    z-index:10;
    position:relative;
}
.channel-card:focus-visible,
.poster-card:focus-visible,
.h-card:focus-visible,
.h-poster:focus-visible,
.episode-card-nf:focus-visible,
.epg-row:focus-visible {
    border-color:rgba(124,58,237,0.7)!important;
    transform:scale(1.05);
    transition:all .15s ease;
}
.category-chip:focus-visible,
.season-tab:focus-visible,
.fav-tab:focus-visible {
    transform:scale(1.08);
    outline-color:#fff;
}
.nav-item:focus-visible {
    background:rgba(124,58,237,0.18)!important;
    outline-offset:-2px;
}

/* --- Fallback for older Smart TVs --- */
body.tv-mode .nav-item:focus,
body.tv-mode .channel-card:focus,
body.tv-mode .poster-card:focus,
body.tv-mode .category-chip:focus,
body.tv-mode .h-card:focus,
body.tv-mode .h-poster:focus,
body.tv-mode .fav-tab:focus,
body.tv-mode .season-tab:focus,
body.tv-mode .episode-card-nf:focus,
body.tv-mode .epg-row:focus,
body.tv-mode .blocked-cat-chip:focus,
body.tv-mode .modal-close:focus,
body.tv-mode .btn-connect:focus,
body.tv-mode .btn-logout:focus,
body.tv-mode .btn-back:focus,
body.tv-mode .btn-settings:focus,
body.tv-mode .btn-menu:focus,
body.tv-mode .install-btn:focus,
body.tv-mode .ctrl-btn:focus,
body.tv-mode .pin-keypad button:focus,
body.tv-mode .resume-btn:focus,
body.tv-mode .cat-arrow:focus,
body.tv-mode .carousel-arrow:focus,
body.tv-mode .toggle-password:focus,
body.tv-mode .checkbox-container:focus,
body.tv-mode .btn-skip-intro:focus,
body.tv-mode .btn-cast:focus,
body.tv-mode .btn-load-more:focus,
body.tv-mode .btn-play-modal:focus,
body.tv-mode .btn-fav-modal:focus,
body.tv-mode .player-actions button:focus,
body.tv-mode .toggle-switch:focus,
body.tv-mode .server-select:focus {
    outline:3px solid rgba(124,58,237,0.9);
    outline-offset:3px;
    box-shadow:0 0 0 6px rgba(124,58,237,0.2),0 0 30px rgba(124,58,237,0.15);
    z-index:10;
    position:relative;
}
body.tv-mode .channel-card:focus,
body.tv-mode .poster-card:focus,
body.tv-mode .h-card:focus,
body.tv-mode .h-poster:focus,
body.tv-mode .episode-card-nf:focus,
body.tv-mode .epg-row:focus {
    border-color:rgba(124,58,237,0.7)!important;
    transform:scale(1.05);
}
body.tv-mode .category-chip:focus,
body.tv-mode .season-tab:focus,
body.tv-mode .fav-tab:focus {
    transform:scale(1.08);
    outline-color:#fff;
}
body.tv-mode .nav-item:focus {
    background:rgba(124,58,237,0.18)!important;
    outline-offset:-2px;
}
body.tv-mode .poster-card .poster-fav,
body.tv-mode .poster-overlay {
    pointer-events:none;
}
*:focus:not(:focus-visible){outline:none}

/* === SAFE AREA (iPhone Notch) === */
@supports(padding:env(safe-area-inset-top)){
    .mobile-topbar{padding-top:env(safe-area-inset-top);height:calc(var(--topbar-h) + env(safe-area-inset-top))}
    .player-topbar{padding-top:env(safe-area-inset-top)}
}

/* === GAMEPAD INDICATOR === */
.gamepad-indicator{position:fixed;bottom:20px;left:20px;background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.25);border-radius:12px;padding:8px 14px;color:var(--green);font-size:11px;font-weight:600;z-index:9998;display:flex;align-items:center;gap:8px;animation:fadeIn .3s;backdrop-filter:blur(8px)}
.gamepad-indicator i{font-size:14px}

/* === SKELETON SHIMMER === */
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.skeleton-shimmer{position:relative;overflow:hidden}
.skeleton-shimmer::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.04),transparent);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite}

/* ============================================================
   CHANNEL MODAL — Modal de Canal ao Vivo
   ============================================================ */
#channelModal{z-index:4000;background:rgba(0,0,0,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
#channelModal .ch-modal{position:relative;width:100%;max-width:500px;height:100%;max-height:100vh;background:var(--bg, #0a0a12);display:flex;flex-direction:column;overflow:hidden;margin:0 auto}

/* Close Button */
.ch-modal-close{position:absolute;top:12px;right:12px;z-index:100;width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.6);border:none;color:#fff;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);transition:all .2s;-webkit-transform:translateZ(0);transform:translateZ(0);pointer-events:auto;-webkit-tap-highlight-color:rgba(255,255,255,.15);touch-action:manipulation}
.ch-modal-close:hover{background:rgba(239,68,68,.8);transform:scale(1.1)}

/* Player Embed */
.ch-modal-player{position:relative;z-index:1;width:100%;aspect-ratio:16/9;background:#000;flex-shrink:0;overflow:hidden}
.ch-modal-player video{width:100%;height:100%;object-fit:contain;background:#000}
.ch-modal-loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.4);z-index:2}
.ch-modal-player-controls{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;gap:10px;padding:10px 14px;background:linear-gradient(transparent,rgba(0,0,0,.8));z-index:3;opacity:0;transition:opacity .3s}
.ch-modal-player:hover .ch-modal-player-controls{opacity:1}
.ch-modal-ctrl-btn{background:none;border:none;color:#fff;font-size:16px;cursor:pointer;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .2s}
.ch-modal-ctrl-btn:hover{background:rgba(255,255,255,.15)}
.ch-modal-live-badge{font-size:11px;font-weight:700;color:#ef4444;display:flex;align-items:center;gap:5px;letter-spacing:.5px;flex:1}
.ch-modal-ctrl-right{display:flex;align-items:center;gap:4px;margin-left:auto}

/* Channel Info */
.ch-modal-info{display:flex;align-items:center;gap:14px;padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0}
.ch-modal-logo{width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;border:2px solid rgba(255,255,255,.1)}
.ch-modal-logo img{width:100%;height:100%;object-fit:contain;padding:4px}
.ch-modal-logo i{font-size:20px;color:var(--text-muted)}
.ch-modal-details{flex:1;min-width:0}
.ch-modal-details h3{font-size:16px;font-weight:700;color:#fff;margin:0 0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-modal-details p{font-size:12px;color:var(--text-muted);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-modal-fav{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.12);color:var(--text-muted);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}
.ch-modal-fav:hover{background:rgba(255,255,255,.1);color:#fff}
.ch-modal-fav.is-fav{color:#ef4444;border-color:rgba(239,68,68,.3);background:rgba(239,68,68,.08)}
.ch-modal-fav.is-fav i{animation:favPop .3s}
@keyframes favPop{0%{transform:scale(1)}50%{transform:scale(1.3)}100%{transform:scale(1)}}

/* Tabs */
.ch-modal-tabs{display:flex;border-bottom:1px solid rgba(255,255,255,.06);padding:0 8px;flex-shrink:0;background:rgba(0,0,0,.2)}
.ch-modal-tab{flex:1;padding:14px 8px;background:none;border:none;border-bottom:2.5px solid transparent;color:var(--text-muted);font-size:12px;font-weight:600;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
.ch-modal-tab i{font-size:11px}
.ch-modal-tab:hover{color:rgba(255,255,255,.8)}
.ch-modal-tab.active{color:var(--purple);border-bottom-color:var(--purple)}

/* Tab Content */
.ch-modal-tab-content{display:none;flex:1;overflow-y:auto;padding:16px 20px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) transparent;-webkit-overflow-scrolling:touch}
.ch-modal-tab-content.active{display:block}
#chTabEpg{padding:0}
.ch-modal-tab-content::-webkit-scrollbar{width:4px}
.ch-modal-tab-content::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:4px}

/* Tab: Informações */
.ch-modal-info-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:16px;margin-bottom:12px}
.ch-modal-now-playing{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:12px;font-weight:600;color:#22c55e;text-transform:uppercase;letter-spacing:.5px}
.ch-modal-now-dot{width:7px;height:7px;background:#22c55e;border-radius:50%;animation:fbLivePulse 1.5s ease-in-out infinite}
.ch-modal-info-card h4{font-size:15px;font-weight:700;color:#fff;margin:0 0 6px}
.ch-modal-now-desc{font-size:13px;color:var(--text-muted);line-height:1.5;margin:0 0 10px}
.ch-modal-now-time{font-size:12px;color:var(--text-muted);display:flex;align-items:center;gap:6px}
.ch-modal-now-time i{color:var(--purple);font-size:11px}

/* Tab: Guia de TV */
.ch-modal-epg-load-btn{width:100%;padding:14px;background:rgba(255,255,255,.06);border:none;border-bottom:1px solid rgba(255,255,255,.06);color:#fff;font-size:15px;font-weight:700;cursor:pointer;transition:background .2s;text-align:center;letter-spacing:.3px}
.ch-modal-epg-load-btn:hover{background:rgba(255,255,255,.1)}
.ch-modal-epg-list{display:flex;flex-direction:column}
.ch-modal-epg-date{display:flex;align-items:center;justify-content:space-between;padding:16px 14px;font-size:14px;color:var(--text-muted);font-weight:500;cursor:pointer;transition:all .2s;border-bottom:1px solid rgba(255,255,255,.04);user-select:none}
.ch-modal-epg-date:hover{background:rgba(255,255,255,.03);color:#fff}
.ch-modal-epg-date i{font-size:11px;color:var(--text-muted);transition:transform .25s}
.ch-modal-epg-date.expanded{color:var(--purple)}
.ch-modal-epg-date.expanded i{transform:rotate(180deg);color:var(--purple)}
.ch-modal-epg-progs{border-bottom:1px solid rgba(255,255,255,.04)}
.ch-modal-epg-empty{padding:30px 16px;text-align:center;color:var(--text-muted);font-size:13px}
.ch-modal-epg-item{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;transition:background .2s;cursor:default}
.ch-modal-epg-item:hover{background:rgba(255,255,255,.03)}
.ch-modal-epg-item.epg-current{background:rgba(var(--purple-rgb,124,58,237),.08);border-left:3px solid var(--purple)}
.ch-modal-epg-time{font-size:13px;color:var(--text-muted);font-weight:600;min-width:50px;flex-shrink:0;padding-top:1px}
.ch-modal-epg-title{font-size:14px;color:#fff;font-weight:500;flex:1}
.ch-modal-epg-desc{font-size:12px;color:var(--text-muted);margin-top:4px;line-height:1.4}
.ch-modal-epg-now-badge{display:inline-block;background:var(--purple);color:#fff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;margin-right:6px;vertical-align:middle;letter-spacing:.3px}

/* Tab: Lista dos canais */
.ch-modal-ch-search{position:relative;margin-bottom:12px}
.ch-modal-ch-search i{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:13px}
.ch-modal-ch-search input{width:100%;padding:10px 12px 10px 36px;border-radius:8px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);color:#fff;font-size:13px;outline:none;transition:border-color .2s;box-sizing:border-box}
.ch-modal-ch-search input:focus{border-color:var(--purple)}
.ch-modal-ch-list{display:flex;flex-direction:column;gap:4px}
.ch-modal-ch-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;cursor:pointer;transition:all .2s}
.ch-modal-ch-item:hover{background:rgba(255,255,255,.05)}
.ch-modal-ch-item.active{background:rgba(var(--purple-rgb,124,58,237),.1);border:1px solid rgba(var(--purple-rgb,124,58,237),.2)}
.ch-modal-ch-item-logo{width:38px;height:38px;border-radius:8px;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}
.ch-modal-ch-item-logo img{width:100%;height:100%;object-fit:contain;padding:3px}
.ch-modal-ch-item-logo i{font-size:14px;color:var(--text-muted)}
.ch-modal-ch-item-info{flex:1;min-width:0}
.ch-modal-ch-item-name{font-size:13px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-modal-ch-item-cat{font-size:11px;color:var(--text-muted)}
.ch-modal-ch-item-play{width:28px;height:28px;border-radius:50%;background:var(--btn-gradient);display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;transition:opacity .2s}
.ch-modal-ch-item-play i{font-size:9px;color:#fff;margin-left:1px}
.ch-modal-ch-item:hover .ch-modal-ch-item-play{opacity:1}

/* Desktop — modal centered */
@media(min-width:769px){
    #channelModal .ch-modal{max-height:92vh;border-radius:16px;margin:4vh auto;box-shadow:0 20px 60px rgba(0,0,0,.5)}
}

/* ============================================================
   CHANNEL MODAL — MOBILE FULLSCREEN PROFISSIONAL
   ============================================================ */
@media(max-width:768px){
    #channelModal.ch-modal-open{
        display:flex;
        align-items:stretch;
        justify-content:center;
        padding:0;
    }
    #channelModal .ch-modal{
        max-width:100%;
        width:100%;
        height:100vh;
        height:100dvh;
        max-height:100vh;
        max-height:100dvh;
        border-radius:0;
        margin:0;
        display:flex;
        flex-direction:column;
        animation:fadeInModal .25s ease;
    }
    /* Close button mobile - larger touch target */
    #channelModal .ch-modal-close{
        top:8px;
        right:8px;
        width:44px;
        height:44px;
        font-size:18px;
        background:rgba(0,0,0,.85);
        z-index:200;
        -webkit-transform:translateZ(0);
        transform:translateZ(0);
    }
    /* Fullscreen toggle mobile */
    .ch-modal-fullscreen-toggle{
        position:absolute;
        top:8px;
        left:8px;
        z-index:10;
        width:40px;
        height:40px;
        border-radius:50%;
        background:rgba(0,0,0,.7);
        border:none;
        color:#fff;
        font-size:15px;
        cursor:pointer;
        display:flex !important;
        align-items:center;
        justify-content:center;
        backdrop-filter:blur(4px);
        -webkit-backdrop-filter:blur(4px);
    }
    /* Player - fixed aspect ratio, never cut */
    #channelModal .ch-modal-player{
        width:100%;
        aspect-ratio:16/9;
        flex-shrink:0;
        position:relative;
    }
    /* Controls always visible on mobile */
    #channelModal .ch-modal-player-controls{
        opacity:1;
        padding:8px 12px;
    }
    #channelModal .ch-modal-ctrl-btn{
        width:32px;
        height:32px;
        font-size:14px;
    }
    /* EPG mobile strip below player */
    #channelModal .ch-modal-epg-mobile{
        display:block;
        flex-shrink:0;
        background:linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.3) 100%);
        padding:8px 14px;
        border-bottom:1px solid rgba(255,255,255,.06);
        max-height:none;
        overflow:visible;
    }
    .ch-modal-epg-mobile .epg-now-item{
        display:flex;
        align-items:center;
        gap:8px;
        flex-wrap:nowrap;
        overflow:hidden;
    }
    .ch-modal-epg-mobile .epg-now-badge{
        font-size:8px;
        padding:2px 6px;
        flex-shrink:0;
    }
    .ch-modal-epg-mobile .epg-now-time{
        font-size:10px;
        flex-shrink:0;
        white-space:nowrap;
    }
    .ch-modal-epg-mobile .epg-now-title{
        font-size:11px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        flex:1;
        min-width:0;
    }
    /* Channel Info - compact */
    #channelModal .ch-modal-info{
        padding:12px 16px;
        gap:10px;
        flex-shrink:0;
    }
    #channelModal .ch-modal-logo{
        width:42px;
        height:42px;
    }
    #channelModal .ch-modal-logo img{padding:3px}
    #channelModal .ch-modal-logo i{font-size:16px}
    #channelModal .ch-modal-details h3{font-size:14px}
    #channelModal .ch-modal-details p{font-size:11px}
    #channelModal .ch-modal-fav{
        width:36px;
        height:36px;
        font-size:14px;
    }
    /* Tabs - compact, equally distributed */
    #channelModal .ch-modal-tabs{
        padding:0 4px;
        flex-shrink:0;
        gap:0;
        background:rgba(0,0,0,.3);
    }
    #channelModal .ch-modal-tab{
        font-size:10px;
        padding:10px 4px;
        gap:4px;
        letter-spacing:-.2px;
    }
    #channelModal .ch-modal-tab i{font-size:10px}
    /* Tab content - fills remaining space with scroll */
    #channelModal .ch-modal-tab-content{
        padding:12px 14px;
        flex:1;
        min-height:0;
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
    }
    #channelModal #chTabEpg{padding:0}
    /* Info card compact */
    #channelModal .ch-modal-info-card{
        padding:12px;
        border-radius:10px;
    }
    #channelModal .ch-modal-info-card h4{font-size:14px}
    #channelModal .ch-modal-now-desc{font-size:12px;margin-bottom:8px}
    /* Channel list compact */
    #channelModal .ch-modal-ch-item{
        padding:8px 10px;
        gap:10px;
    }
    #channelModal .ch-modal-ch-item-logo{
        width:32px;
        height:32px;
        border-radius:6px;
    }
    #channelModal .ch-modal-ch-item-name{font-size:12px}
    #channelModal .ch-modal-ch-item-cat{font-size:10px}
    #channelModal .ch-modal-ch-item-play{
        opacity:1;
        width:26px;
        height:26px;
    }
    /* EPG list compact */
    #channelModal .ch-modal-epg-item{
        padding:10px 12px;
        gap:10px;
    }
    #channelModal .ch-modal-epg-time{
        font-size:12px;
        min-width:44px;
    }
    #channelModal .ch-modal-epg-title{font-size:13px}
    #channelModal .ch-modal-epg-date{
        padding:12px 12px;
        font-size:13px;
    }
    /* No drag handle - full screen */
    .ch-modal::before{display:none !important}
}

/* Extra small phones (< 375px) */
@media(max-width:374px){
    #channelModal .ch-modal-info{padding:10px 12px;gap:8px}
    #channelModal .ch-modal-logo{width:36px;height:36px}
    #channelModal .ch-modal-details h3{font-size:13px}
    #channelModal .ch-modal-tab{font-size:9px;padding:8px 3px}
    #channelModal .ch-modal-tab-content{padding:10px 12px}
    #channelModal .ch-modal-ch-item-logo{width:28px;height:28px}
}

/* Landscape mobile — player takes more room */
@media(max-width:768px) and (orientation:landscape){
    #channelModal .ch-modal{
        flex-direction:row;
        flex-wrap:wrap;
    }
    #channelModal .ch-modal-player{
        width:50%;
        aspect-ratio:16/9;
        height:auto;
        max-height:100vh;
        max-height:100dvh;
    }
    #channelModal .ch-modal-epg-mobile{display:none}
    #channelModal .ch-modal-info,
    #channelModal .ch-modal-tabs,
    #channelModal .ch-modal-tab-content{
        width:50%;
    }
    #channelModal .ch-modal-close{top:4px;right:4px}
}

@keyframes fadeInModal{from{opacity:0}to{opacity:1}}

/* EPG Mobile (below player) - base styles */
.ch-modal-epg-mobile{
    display:none;
    background:rgba(0,0,0,.6);
    padding:8px 14px;
    border-bottom:1px solid rgba(255,255,255,.06);
    flex-shrink:0;
}
.ch-modal-epg-mobile .epg-now-item{display:flex;align-items:center;gap:8px}
.ch-modal-epg-mobile .epg-now-time{font-size:11px;color:var(--purple);font-weight:600;white-space:nowrap}
.ch-modal-epg-mobile .epg-now-title{font-size:12px;color:#fff;font-weight:500;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-modal-epg-mobile .epg-now-badge{font-size:9px;background:var(--purple);color:#fff;padding:2px 6px;border-radius:4px;font-weight:700;flex-shrink:0}

/* ========================================
   WHATSAPP FLOATING BUTTON
   ======================================== */
.whatsapp-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 32px;
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
    z-index: 9999;
    transition: transform 0.3s, box-shadow 0.3s;
    animation: whatsappPulse 2s infinite;
    text-decoration: none;
}
.whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 30px rgba(37, 211, 102, 0.6);
}
.whatsapp-float .whatsapp-tooltip {
    position: absolute;
    right: 70px;
    background: #fff;
    color: #333;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    opacity: 0;
    transform: translateX(10px);
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
}
.whatsapp-float .whatsapp-tooltip::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-left-color: #fff;
}
.whatsapp-float:hover .whatsapp-tooltip {
    opacity: 1;
    transform: translateX(0);
}
@keyframes whatsappPulse {
    0%, 100% { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4), 0 0 0 0 rgba(37, 211, 102, 0.4); }
    50% { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4), 0 0 0 15px rgba(37, 211, 102, 0); }
}
@media (max-width: 480px) {
    .whatsapp-float { width: 52px; height: 52px; font-size: 26px; bottom: 16px; right: 16px; }
    .whatsapp-float .whatsapp-tooltip { display: none; }
}

/* ========================================
   INTRO OVERLAY ANIMATION
   ======================================== */
.intro-overlay {
    position: fixed;
    inset: 0;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}
.intro-overlay.active {
    opacity: 1;
    pointer-events: auto;
}
.intro-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}
.intro-logo {
    width: 120px;
    height: 120px;
    border-radius: 24px;
    background: var(--gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 20px 60px rgba(124,58,237,0.5);
}
.intro-logo i {
    font-size: 48px;
    color: #fff;
}
.intro-logo img {
    width: 80%;
    height: 80%;
    object-fit: contain;
}
.intro-name {
    font-size: 48px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.intro-skip {
    position: absolute;
    bottom: 40px;
    right: 40px;
    padding: 12px 24px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
}
.intro-skip:hover {
    background: rgba(255,255,255,0.2);
}

/* Netflix Style Intro */
.intro-overlay.style-netflix .intro-logo {
    animation: netflixZoom 2s ease-out forwards;
}
.intro-overlay.style-netflix .intro-name {
    animation: netflixName 1s ease-out 1.2s forwards;
    opacity: 0;
}
@keyframes netflixZoom {
    0% { transform: scale(0.3); opacity: 0; }
    30% { transform: scale(1.2); opacity: 1; }
    50% { transform: scale(1); }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes netflixName {
    0% { opacity: 0; letter-spacing: 0.5em; }
    100% { opacity: 1; letter-spacing: 0.15em; }
}

/* Fade Style Intro */
.intro-overlay.style-fade .intro-content {
    animation: fadeInUp 1.5s ease-out forwards;
}
@keyframes fadeInUp {
    0% { opacity: 0; transform: translateY(30px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Zoom Style Intro */
.intro-overlay.style-zoom .intro-content {
    animation: dramaticZoom 2s ease-out forwards;
}
@keyframes dramaticZoom {
    0% { transform: scale(3); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

@media (max-width: 768px) {
    .intro-logo { width: 80px; height: 80px; border-radius: 16px; }
    .intro-logo i { font-size: 32px; }
    .intro-name { font-size: 28px; }
    .intro-skip { bottom: 24px; right: 24px; padding: 10px 18px; font-size: 12px; }
}

/* ========================================
   PROFILE SELECTOR (Netflix Style)
   ======================================== */
.profile-selector {
    position: fixed;
    inset: 0;
    background: var(--bg-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9998;
    padding: 24px;
}
.profile-selector-title {
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 40px;
}
.profile-grid {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 800px;
}
.profile-card {
    width: 140px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.3s;
}
.profile-card:hover {
    transform: scale(1.08);
}
.profile-card:hover .profile-avatar {
    border-color: #fff;
}
.profile-avatar {
    width: 140px;
    height: 140px;
    border-radius: 8px;
    background: var(--gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 64px;
    color: #fff;
    margin-bottom: 12px;
    border: 3px solid transparent;
    transition: border-color 0.3s;
    overflow: hidden;
}
.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.profile-name {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-sec);
    transition: color 0.3s;
}
.profile-card:hover .profile-name {
    color: #fff;
}
.profile-card.add-profile .profile-avatar {
    background: transparent;
    border: 3px dashed var(--border);
}
.profile-card.add-profile .profile-avatar i {
    font-size: 48px;
    color: var(--text-muted);
}
.profile-card.add-profile:hover .profile-avatar {
    border-color: var(--text-sec);
}
.profile-manage-btn {
    margin-top: 48px;
    padding: 12px 24px;
    background: transparent;
    border: 1px solid var(--text-muted);
    color: var(--text-sec);
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
}
.profile-manage-btn:hover {
    border-color: #fff;
    color: #fff;
}

/* Profile Switcher in Topbar */
.profile-switcher {
    position: relative;
}
.profile-switcher-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
}
.profile-switcher-btn:hover {
    border-color: var(--purple);
}
.profile-switcher-avatar {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    background: var(--gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #fff;
    overflow: hidden;
}
.profile-switcher-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.profile-switcher-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
}
.profile-switcher-icon {
    font-size: 12px;
    color: var(--text-sec);
    transition: transform 0.3s;
}
.profile-switcher.open .profile-switcher-icon {
    transform: rotate(180deg);
}
/* Profile dropdown styles moved to sidebar section */

@media (max-width: 600px) {
    .profile-selector-title { font-size: 24px; }
    .profile-card { width: 100px; }
    .profile-avatar { width: 100px; height: 100px; font-size: 40px; }
    .profile-name { font-size: 13px; }
    .profile-grid { gap: 16px; }
}

/* === PROFILE SELECTOR SCREEN === */
/* Profile Selector Screen - estilo removido (duplicado em baixo) */
/* Profile selector item - estilo removido (duplicado em baixo) */

/* === PROFILE SWITCHER IN SIDEBAR === */
.profile-switcher {
    margin-bottom: 16px;
    position: relative;
}
.profile-current {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}
.profile-current:hover {
    background: rgba(255,255,255,0.08);
    border-color: var(--purple);
}
.profile-avatar-small {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #fff;
    flex-shrink: 0;
    overflow: hidden;
}
.profile-avatar-small img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}
.profile-avatar-small.add-avatar {
    background: rgba(255,255,255,0.08);
    border: 2px dashed rgba(255,255,255,0.2);
}
.kids-badge {
    font-size: 10px;
    padding: 2px 6px;
    background: var(--purple);
    border-radius: 10px;
    color: #fff;
}
.profile-name-small {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.profile-arrow {
    font-size: 11px;
    color: var(--text-muted);
    transition: transform 0.3s;
}
.profile-switcher.open .profile-arrow {
    transform: rotate(180deg);
}
.profile-dropdown {
    position: fixed;
    bottom: auto;
    left: auto;
    right: auto;
    background: var(--bg-secondary, #1a1a24);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.6), 0 0 60px rgba(124,58,237,0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(0.95);
    transition: all 0.3s cubic-bezier(.4,0,.2,1);
    z-index: 9999;
    pointer-events: none;
    min-width: 220px;
    max-width: 280px;
}
.profile-switcher.open .profile-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.profile-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.profile-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}
.profile-dropdown-item:hover {
    background: rgba(255,255,255,0.06);
}
.profile-dropdown-item.active {
    background: rgba(124,58,237,0.15);
}
.profile-dropdown-item.add-profile {
    border-top: 1px solid rgba(255,255,255,0.08);
    margin-top: 6px;
    padding-top: 12px;
}
.profile-dropdown-item.add-profile .profile-avatar-small {
    background: transparent;
    border: 2px dashed rgba(255,255,255,0.2);
}
.profile-dropdown-item.add-profile:hover .profile-avatar-small {
    border-color: var(--purple);
    color: var(--purple);
}
.profile-dropdown-item .profile-avatar-small {
    width: 32px;
    height: 32px;
    font-size: 14px;
}
.profile-dropdown-item .profile-name-small {
    font-size: 13px;
}
.profile-manage-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px;
    margin-top: 8px;
    background: transparent;
    border: 1px dashed rgba(255,255,255,0.2);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}
.profile-manage-btn:hover {
    border-color: var(--purple);
    color: var(--purple);
    background: rgba(124,58,237,0.05);
}

/* === PROFILE MANAGE MODAL === */
.profile-manage-content {
    background: var(--bg-secondary, #1a1a24);
    border-radius: 16px;
    max-width: 450px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    animation: fadeIn 0.3s ease;
}
.profile-manage-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.profile-manage-header h2 {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin: 0;
}
.profile-manage-form {
    padding: 24px;
}
.profile-manage-form .form-group {
    margin-bottom: 20px;
}
.profile-manage-form label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.profile-manage-form input[type="text"] {
    width: 100%;
    padding: 12px 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    color: #fff;
    font-size: 15px;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.profile-manage-form input[type="text"]:focus {
    border-color: var(--purple);
}
.profile-avatar-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
/* Avatar category tabs */
.avatar-category-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.avatar-cat-tab {
    padding: 8px 16px;
    background: rgba(255,255,255,0.08);
    border: none;
    border-radius: 20px;
    color: var(--text-sec);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.avatar-cat-tab:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
}
.avatar-cat-tab.active {
    background: var(--purple);
    color: #fff;
}
/* Avatar grid with images */
.avatar-category-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    max-height: 280px;
    overflow-y: auto;
    padding: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.avatar-category-grid::-webkit-scrollbar { width: 4px; }
.avatar-category-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }
.profile-avatar-option {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
    cursor: pointer;
    border: 3px solid transparent;
    transition: all 0.2s;
    opacity: 0.75;
    overflow: hidden;
    box-sizing: border-box;
    min-width: 0;
    min-height: 0;
}
.profile-avatar-option.img-avatar {
    background: transparent;
    padding: 0;
}
.profile-avatar-option img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 9px;
    display: block;
}
.profile-avatar-option:hover {
    opacity: 1;
    transform: scale(1.05);
}
.profile-avatar-option.selected {
    border-color: var(--purple);
    opacity: 1;
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.5);
}
.profile-manage-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.profile-manage-actions .btn {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    display: flex;
    align-items: center;
    gap: 8px;
}
.profile-manage-actions .btn-secondary {
    background: rgba(255,255,255,0.1);
    color: #fff;
}
.profile-manage-actions .btn-secondary:hover {
    background: rgba(255,255,255,0.15);
}
.profile-manage-actions .btn-primary {
    background: var(--purple);
    color: #fff;
}
.profile-manage-actions .btn-primary:hover {
    background: #6d28d9;
}
.profile-manage-actions .btn-danger {
    background: rgba(239,68,68,0.15);
    color: #ef4444;
}
.profile-manage-actions .btn-danger:hover {
    background: rgba(239,68,68,0.25);
}

@media (max-width: 600px) {
    .profile-selector-content h1 { font-size: 24px; }
    .profile-selector-avatar { width: 100px; height: 100px; font-size: 42px; }
}

/* ============================
   ANDROID TV & LEANBACK SUPPORT
   ============================ */
@media (min-width: 1280px) and (min-height: 720px) {
    /* TV-optimized sizes */
    .nav-sidebar { width: 280px; min-width: 280px; }
    .nav-logo-icon { width: 48px; height: 48px; }
    .nav-item { padding: 14px 18px; font-size: 15px; }
    .nav-item i { font-size: 18px; }
    .content-card { border-radius: 12px; }
    .content-card:focus { 
        transform: scale(1.08); 
        box-shadow: 0 0 0 4px var(--purple), 0 20px 60px rgba(0,0,0,0.6);
        z-index: 10;
    }
    .btn-connect { padding: 18px; font-size: 18px; }
    .input-wrapper input { padding: 18px 18px 18px 52px; font-size: 16px; }
    .logo-icon-big { width: 90px; height: 90px; font-size: 36px; }
}

/* D-Pad Navigation Focus States */
.nav-item:focus,
.content-card:focus,
.btn:focus,
button:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--purple), 0 0 30px var(--purple-glow);
}

/* TV Animation Optimization */
@media (prefers-reduced-motion: no-preference) and (min-width: 1280px) {
    .content-card {
        transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
    }
}

/* ============================
   MOBILE OPTIMIZATIONS
   ============================ */
@media (max-width: 480px) and (orientation: portrait) {
    .login-container { padding: 20px 16px; }
    .btn-connect { padding: 14px; font-size: 14px; }
    .logo-icon-big { width: 60px; height: 60px; font-size: 24px; }
}

/* Safe Area for Notch Devices */
@supports (padding: env(safe-area-inset-top)) {
    .app-container {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }
    .nav-sidebar {
        padding-top: env(safe-area-inset-top);
    }
}

/* ============================
   PROFESSIONAL GLASS EFFECTS
   ============================ */
.glass-effect {
    background: rgba(12, 12, 20, 0.88);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Premium Card Hover */
.content-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, transparent 50%, rgba(124, 58, 237, 0.12) 100%);
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
}
.content-card:hover::after {
    opacity: 1;
}

/* Glow Animation */
@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 25px rgba(124, 58, 237, 0.35); }
    50% { box-shadow: 0 0 50px rgba(124, 58, 237, 0.55); }
}
.glow-pulse {
    animation: pulseGlow 2.5s ease-in-out infinite;
}

/* Premium Shimmer Effect */
@keyframes premiumShimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.premium-shimmer {
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(124, 58, 237, 0.1) 25%, 
        rgba(168, 85, 247, 0.15) 50%, 
        rgba(124, 58, 237, 0.1) 75%, 
        transparent 100%);
    background-size: 200% 100%;
    animation: premiumShimmer 3s ease-in-out infinite;
}

/* Floating Animation */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
}
.float-animation {
    animation: float 4s ease-in-out infinite;
}

/* Gradient Border Animation */
@keyframes gradientBorder {
    0%, 100% { border-color: rgba(124, 58, 237, 0.3); }
    50% { border-color: rgba(168, 85, 247, 0.5); }
}
.animated-border {
    animation: gradientBorder 3s ease-in-out infinite;
}

/* Live Badge Animation */
@keyframes livePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.2); }
}
.live-badge::before {
    content: '';
    width: 7px;
    height: 7px;
    background: #ef4444;
    border-radius: 50%;
    margin-right: 7px;
    animation: livePulse 1.5s ease-in-out infinite;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.6);
}

/* Spotlight Effect */
@keyframes spotlight {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
}
.spotlight-bg::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.08) 0%, transparent 50%);
    animation: spotlight 6s ease-in-out infinite;
    pointer-events: none;
}

/* Premium Text Gradient */
.premium-text {
    background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.8) 30%, var(--purple) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Neon Glow Effect */
.neon-glow {
    text-shadow: 
        0 0 5px rgba(124, 58, 237, 0.5),
        0 0 10px rgba(124, 58, 237, 0.4),
        0 0 20px rgba(124, 58, 237, 0.3),
        0 0 40px rgba(124, 58, 237, 0.2);
}

/* Subtle Noise Texture */
.noise-texture::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 0.015;
    pointer-events: none;
    border-radius: inherit;
}

/* Card Tilt Effect on Hover */
.tilt-card {
    transform-style: preserve-3d;
    perspective: 1000px;
}
.tilt-card:hover {
    transform: rotateX(2deg) rotateY(-2deg) translateY(-5px);
}

/* ============================================
   SPLASH SCREEN - ESTILO NETFLIX
   ============================================ */
.splash-screen {
    position: fixed;
    inset: 0;
    background: #050509;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    animation: splashFadeOut 0.5s ease 2.5s forwards;
}
.splash-content {
    text-align: center;
    animation: splashLogoIn 1s ease forwards;
}
.splash-logo {
    display: flex;
    align-items: baseline;
    justify-content: center;
    font-family: 'Inter', sans-serif;
}
.brand-name-splash {
    font-size: clamp(48px, 12vw, 96px);
    font-weight: 900;
    color: #fff;
    letter-spacing: -2px;
    text-transform: uppercase;
}
.splash-plus {
    font-size: clamp(36px, 10vw, 72px);
    font-weight: 700;
    color: var(--purple, #7c3aed);
    margin-left: 4px;
}

@keyframes splashLogoIn {
    0% { opacity: 0; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.05); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes splashFadeOut {
    to { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* ============================================
   PROFILE SELECTOR SCREEN - ESTILO NETFLIX
   ============================================ */
.profile-selector-screen {
    position: fixed;
    inset: 0;
    background: linear-gradient(180deg, #0a0a12 0%, #050509 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    overflow-y: auto;
    padding: 40px 20px;
}
.profile-selector-content {
    text-align: center;
    padding: 24px;
    max-width: 1000px;
    width: 100%;
    margin: auto;
}
.profile-selector-logo {
    display: flex;
    align-items: baseline;
    justify-content: center;
    margin-bottom: 24px;
}
.brand-name-selector {
    font-size: clamp(32px, 8vw, 56px);
    font-weight: 900;
    color: #fff;
    letter-spacing: -1px;
    text-transform: uppercase;
}
.selector-plus {
    font-size: clamp(24px, 6vw, 42px);
    font-weight: 700;
    color: var(--purple, #7c3aed);
    margin-left: 2px;
}
.profile-selector-title {
    font-size: clamp(18px, 4vw, 28px);
    font-weight: 500;
    color: rgba(255,255,255,0.7);
    margin-bottom: 40px;
}
.profile-selector-grid {
    display: flex;
    gap: 28px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 48px;
}
.profile-selector-item {
    cursor: pointer;
    text-align: center;
    transition: transform 0.3s ease, opacity 0.3s ease;
    position: relative;
    min-width: 100px;
}
.profile-selector-item:hover {
    transform: scale(1.08);
}
.profile-selector-item.selected {
    animation: profileSelectZoom 0.5s ease forwards;
}
@keyframes profileSelectZoom {
    0% { transform: scale(1); }
    40% { transform: scale(1.15); }
    100% { transform: scale(1.05); opacity: 0.7; }
}
.profile-selector-avatar {
    width: 110px;
    height: 110px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 44px;
    color: #fff;
    margin: 0 auto 12px;
    border: 3px solid transparent;
    transition: all 0.3s ease;
    overflow: visible;
    position: relative;
}
.profile-selector-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}
.profile-selector-item:hover .profile-selector-avatar {
    border-color: #fff;
    box-shadow: 0 8px 30px rgba(255,255,255,0.15);
}
.profile-selector-item .profile-name {
    font-size: 15px;
    font-weight: 600;
    color: rgba(255,255,255,0.6);
    transition: color 0.3s;
}
.profile-selector-item:hover .profile-name {
    color: #fff;
}

/* Kids Avatar Badge */
.kids-avatar-badge {
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    font-weight: 800;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: 1px;
    box-shadow: 0 2px 8px rgba(34,197,94,0.4);
    white-space: nowrap;
    z-index: 2;
}
.profile-selector-item.kids .profile-selector-avatar {
    border-color: rgba(34,197,94,0.4);
}
.profile-selector-item.kids:hover .profile-selector-avatar {
    border-color: #22c55e;
    box-shadow: 0 8px 30px rgba(34,197,94,0.25);
}

/* Profile Edit Button */
.profile-edit-btn {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 32px;
    height: 32px;
    background: rgba(255,255,255,0.95);
    border: none;
    border-radius: 50%;
    color: #333;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0;
    transform: scale(0);
    z-index: 100;
    box-shadow: 0 2px 12px rgba(0,0,0,0.4);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.profile-selector-screen.edit-mode .profile-edit-btn {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}
.profile-selector-item:hover .profile-edit-btn {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}
.profile-edit-btn:hover {
    background: var(--purple);
    color: #fff;
    transform: scale(1.1) !important;
}

/* Add Profile Card */
.profile-selector-item.add-profile-card .profile-selector-avatar {
    background: transparent;
    border: 3px dashed rgba(255,255,255,0.2);
}
.profile-selector-item.add-profile-card:hover .profile-selector-avatar {
    border-color: var(--purple);
    background: rgba(124,58,237,0.08);
    box-shadow: 0 8px 30px rgba(124,58,237,0.15);
}
.profile-selector-item.add-profile-card .profile-selector-avatar i {
    font-size: 36px;
    color: rgba(255,255,255,0.3);
    transition: color 0.3s;
}
.profile-selector-item.add-profile-card:hover .profile-selector-avatar i {
    color: var(--purple);
}

/* Profile Action Buttons */
.profile-selector-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}
.profile-action-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    color: rgba(255,255,255,0.8);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    -webkit-user-select: none;
    user-select: none;
}
.profile-action-btn:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
    color: #fff;
    transform: translateY(-1px);
}
.profile-action-btn:active {
    transform: translateY(0);
}
.profile-action-btn.danger {
    border-color: rgba(239,68,68,0.2);
}
.profile-action-btn.danger:hover {
    background: rgba(239,68,68,0.12);
    border-color: rgba(239,68,68,0.4);
    color: #ef4444;
}
.profile-action-btn i {
    font-size: 16px;
}

/* ============================================
   PROFILE MANAGE MODAL - ESTILO NETFLIX
   ============================================ */
.profile-manage-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 11000;
    padding: 20px;
}
.profile-manage-content {
    background: linear-gradient(180deg, #1a1a28 0%, #12121a 100%);
    border-radius: 20px;
    max-width: 520px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 25px 80px rgba(0,0,0,0.7);
    animation: modalSlideUp 0.3s ease;
}
@keyframes modalSlideUp {
    from { opacity: 0; transform: translateY(30px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.profile-manage-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 24px 28px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    position: relative;
}
.profile-manage-header-icon {
    width: 44px;
    height: 44px;
    background: var(--purple, #7c3aed);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #fff;
}
.profile-manage-header h2 {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    flex: 1;
}
.profile-manage-header .modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.08);
    border: none;
    border-radius: 50%;
    color: rgba(255,255,255,0.6);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.profile-manage-header .modal-close:hover {
    background: rgba(255,255,255,0.15);
    color: #fff;
}
.profile-manage-form {
    padding: 24px 28px;
}
.profile-manage-form .form-group {
    margin-bottom: 24px;
}
.profile-manage-form .form-group > label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    margin-bottom: 10px;
}
.profile-manage-form input[type="text"] {
    width: 100%;
    padding: 14px 18px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    color: #fff;
    font-size: 15px;
    transition: all 0.2s;
    box-sizing: border-box;
}
.profile-manage-form input[type="text"]:focus {
    outline: none;
    border-color: var(--purple);
    background: rgba(124,58,237,0.08);
    box-shadow: 0 0 0 3px rgba(124,58,237,0.15);
}
.profile-manage-form input[type="text"]::placeholder {
    color: rgba(255,255,255,0.35);
}

/* Avatar Category Tabs */
.avatar-category-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.avatar-cat-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 24px;
    color: rgba(255,255,255,0.7);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.avatar-cat-tab:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}
.avatar-cat-tab.active {
    background: var(--purple);
    border-color: var(--purple);
    color: #fff;
}
.avatar-cat-tab i { font-size: 12px; }

/* Avatar Grid */
.avatar-category-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    max-height: 220px;
    overflow-y: auto;
    padding: 4px;
    padding-right: 8px;
}
.avatar-category-grid::-webkit-scrollbar { width: 6px; }
.avatar-category-grid::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); border-radius: 3px; }
.avatar-category-grid::-webkit-scrollbar-thumb { background: var(--purple); border-radius: 3px; }
.profile-avatar-option {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 3px solid transparent;
    transition: all 0.2s;
    overflow: hidden;
}
.profile-avatar-option img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.profile-avatar-option:hover {
    border-color: rgba(255,255,255,0.4);
    transform: scale(1.05);
}
.profile-avatar-option.selected {
    border-color: var(--purple);
    box-shadow: 0 0 0 2px rgba(124,58,237,0.3);
}

/* Kids Toggle Card */
.kids-toggle-group { margin-bottom: 0 !important; }
.kids-toggle-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: rgba(255,255,255,0.04);
    border: 1.5px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    gap: 14px;
}
.kids-toggle-card:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(34,197,94,0.25);
}
.kids-toggle-card.active {
    background: rgba(34,197,94,0.06);
    border-color: rgba(34,197,94,0.35);
}
.kids-toggle-left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
}
.kids-toggle-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(34,197,94,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.kids-toggle-icon i {
    font-size: 18px;
    color: #22c55e;
}
.kids-toggle-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.kids-toggle-title {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}
.kids-toggle-desc {
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    line-height: 1.3;
}

/* Switch Toggle */
.switch-toggle {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
    flex-shrink: 0;
}
.switch-toggle input { opacity: 0; width: 0; height: 0; }
.switch-slider {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.15);
    border-radius: 26px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.switch-slider::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 3px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.switch-toggle input:checked + .switch-slider {
    background: #22c55e;
}
.switch-toggle input:checked + .switch-slider::before {
    transform: translateX(22px);
}

/* Profile Action Buttons (Save / Delete) */
.profile-manage-actions {
    display: flex;
    gap: 12px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.btn-profile-save {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 24px;
    background: var(--purple, #7c3aed);
    border: none;
    border-radius: 14px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
}
.btn-profile-save:hover {
    background: #6d28d9;
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124,58,237,0.4);
}
.btn-profile-save:active {
    transform: translateY(0);
}
.btn-profile-delete {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    background: transparent;
    border: 1.5px solid rgba(239,68,68,0.3);
    border-radius: 14px;
    color: #ef4444;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}
.btn-profile-delete:hover {
    background: rgba(239,68,68,0.12);
    border-color: #ef4444;
    transform: translateY(-1px);
}

@media (max-width: 600px) {
    .profile-selector-grid { gap: 18px; }
    .profile-selector-avatar { width: 90px; height: 90px; }
    .profile-selector-item .profile-name { font-size: 13px; }
    .profile-action-btn { padding: 12px 20px; font-size: 13px; }
    .avatar-category-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; max-height: 240px; }
    .profile-avatar-option { border-radius: 10px; border-width: 2px; }
    .profile-avatar-option img { border-radius: 8px; }
    .profile-manage-content { width: 95%; border-radius: 16px; }
    .profile-manage-form { padding: 18px 16px; }
    .profile-manage-header { padding: 18px 20px; }
    .avatar-category-tabs { gap: 6px; margin-bottom: 10px; }
    .avatar-cat-tab { padding: 6px 12px; font-size: 12px; }
}
@media (max-width: 380px) {
    .avatar-category-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; max-height: 220px; }
    .profile-avatar-option { border-radius: 8px; }
    .profile-avatar-option img { border-radius: 6px; }
    .profile-manage-form { padding: 14px 14px; }
    .avatar-cat-tab { padding: 5px 10px; font-size: 11px; }
}

/* ============================================================
   TV LAYOUT — DESKTOP 3-PANEL (Canais ao Vivo)
   ============================================================ */
.tv-layout{display:grid;grid-template-columns:220px 1fr 1fr;gap:0;height:calc(100vh - 130px);min-height:500px;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.06);background:rgba(10,10,18,.6)}
.tv-panel{display:flex;flex-direction:column;overflow:hidden;position:relative}

/* — Categorias (esquerdo) — */
.tv-categories{background:rgba(20,15,40,.85);border-right:1px solid rgba(255,255,255,.06)}
.tv-panel-header{display:flex;align-items:center;gap:10px;padding:14px 16px;font-size:15px;font-weight:800;color:#fff;border-bottom:1px solid rgba(255,255,255,.08);flex-shrink:0;letter-spacing:.3px}
.tv-panel-header i{color:var(--purple,#7c3aed);font-size:14px}
.tv-panel-count{margin-left:auto;font-size:13px;font-weight:700;color:var(--purple,#7c3aed);background:rgba(124,58,237,.12);padding:2px 10px;border-radius:20px}
.tv-cat-list{overflow-y:auto;flex:1;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) transparent}
.tv-cat-list::-webkit-scrollbar{width:4px}
.tv-cat-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:4px}
.tv-cat-item{display:flex;align-items:center;justify-content:space-between;padding:11px 16px;font-size:13px;font-weight:600;color:rgba(255,255,255,.7);cursor:pointer;transition:all .15s;border-left:3px solid transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tv-cat-item:hover{background:rgba(124,58,237,.08);color:#fff}
.tv-cat-item.active{background:rgba(124,58,237,.15);color:#fff;border-left-color:var(--purple,#7c3aed)}
.tv-cat-item-name{overflow:hidden;text-overflow:ellipsis;flex:1;margin-right:8px}
.tv-cat-item-count{font-size:11px;font-weight:700;color:rgba(255,255,255,.4);flex-shrink:0}

/* — Lista de Canais (centro) — */
.tv-channels{background:rgba(12,10,25,.9);border-right:1px solid rgba(255,255,255,.06)}
.tv-channel-list{overflow-y:auto;flex:1;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) transparent}
.tv-channel-list::-webkit-scrollbar{width:4px}
.tv-channel-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:4px}
.tv-ch-item{display:flex;align-items:center;gap:12px;padding:10px 14px;cursor:pointer;transition:all .15s;border-bottom:1px solid rgba(255,255,255,.03)}
.tv-ch-item:hover{background:rgba(124,58,237,.08)}
.tv-ch-item.active{background:rgba(124,58,237,.18)}
.tv-ch-item.active .tv-ch-name{color:#fff;font-weight:700}
.tv-ch-num{font-size:13px;font-weight:700;color:rgba(255,255,255,.35);min-width:36px;text-align:center;flex-shrink:0}
.tv-ch-logo{width:32px;height:32px;border-radius:4px;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.04)}
.tv-ch-logo img{width:100%;height:100%;object-fit:contain}
.tv-ch-logo i{font-size:14px;color:rgba(255,255,255,.3)}
.tv-ch-name{font-size:13px;font-weight:600;color:rgba(255,255,255,.8);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}

/* — Preview + EPG (direito) — */
.tv-preview{background:rgba(8,6,18,.95)}
.tv-preview-player{position:relative;width:100%;aspect-ratio:16/9;background:#000;flex-shrink:0;overflow:hidden}
.tv-preview-player video{width:100%;height:100%;object-fit:contain;background:#000}
.tv-preview-loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.5);z-index:2}

/* TV Preview Controls Bar */
.tv-preview-controls{
    position:absolute;bottom:0;left:0;right:0;
    display:flex;align-items:center;gap:8px;
    padding:8px 12px;
    background:linear-gradient(transparent 0%,rgba(0,0,0,.85) 40%);
    z-index:5;
    opacity:0;transition:opacity .3s;
}
.tv-preview-player:hover .tv-preview-controls{opacity:1}
.tv-ctrl-btn{
    background:none;border:none;color:#fff;font-size:14px;cursor:pointer;
    width:32px;height:32px;display:flex;align-items:center;justify-content:center;
    border-radius:50%;transition:background .2s;flex-shrink:0;
}
.tv-ctrl-btn:hover{background:rgba(255,255,255,.15)}
.tv-ctrl-progress{
    flex:1;height:4px;background:rgba(255,255,255,.15);border-radius:2px;
    overflow:hidden;position:relative;
}
.tv-ctrl-progress-bar{
    height:100%;width:100%;background:var(--purple,#7c3aed);border-radius:2px;
    animation:tvProgressPulse 3s ease-in-out infinite;
}
@keyframes tvProgressPulse{0%,100%{opacity:.6}50%{opacity:1}}
.tv-ctrl-live-badge{
    font-size:11px;font-weight:700;color:#ef4444;
    display:flex;align-items:center;gap:5px;
    letter-spacing:.5px;flex-shrink:0;
}
.ctrl-live-dot{width:7px;height:7px;border-radius:50%;background:#ef4444;display:inline-block;animation:livePulse 1.5s ease-in-out infinite}
@keyframes livePulse{0%,100%{opacity:1}50%{opacity:.3}}

/* TV Preview Info Overlay (acima dos controles) */
.tv-preview-info{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:10px;padding:10px 14px;background:linear-gradient(rgba(0,0,0,.75),transparent);z-index:4;opacity:0;transition:opacity .3s}
.tv-preview-player:hover .tv-preview-info{opacity:1}
.tv-preview-num{font-size:14px;font-weight:800;color:rgba(255,255,255,.5);flex-shrink:0}
.tv-preview-logo{width:32px;height:32px;border-radius:4px;object-fit:contain;flex-shrink:0}
.tv-preview-name{font-size:14px;font-weight:700;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* EPG list */
.tv-epg-list{flex:1;overflow-y:auto;padding:0;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) transparent}
.tv-epg-list::-webkit-scrollbar{width:4px}
.tv-epg-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:4px}
.tv-epg-item{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.04);transition:background .15s}
.tv-epg-item:hover{background:rgba(255,255,255,.02)}
.tv-epg-item.now{background:rgba(124,58,237,.08)}
.tv-epg-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.15);flex-shrink:0;margin-top:5px}
.tv-epg-item.now .tv-epg-dot{background:#22c55e;box-shadow:0 0 6px rgba(34,197,94,.4)}
.tv-epg-title{font-size:13px;font-weight:600;color:rgba(255,255,255,.8);flex:1;line-height:1.3}
.tv-epg-item.now .tv-epg-title{color:#fff;font-weight:700}
.tv-epg-time{font-size:12px;font-weight:600;color:rgba(255,255,255,.35);flex-shrink:0;white-space:nowrap}
.tv-epg-item.now .tv-epg-time{color:rgba(124,58,237,.9)}
.tv-epg-empty{padding:30px 20px;text-align:center;color:rgba(255,255,255,.3);font-size:13px}

/* Double-click / Enter: abre fullscreen */
.tv-ch-item.playing{background:linear-gradient(90deg,rgba(124,58,237,.22),rgba(124,58,237,.08))}
.tv-ch-item.playing .tv-ch-num{color:var(--purple,#7c3aed)}
.tv-ch-item.playing .tv-ch-name{color:#fff}

/* Responsive — ocultar TV layout no mobile */
@media(max-width:900px){
    .tv-layout{display:none !important}
}

/* ====== NOTIFICATION BELL & MODAL ====== */
.btn-notif{position:relative;background:none;border:none;color:rgba(255,255,255,.7);font-size:18px;cursor:pointer;padding:8px;border-radius:50%;transition:all .3s}
.btn-notif:hover{color:#fff;background:rgba(124,58,237,.15)}
.notif-badge{position:absolute;top:2px;right:2px;width:18px;height:18px;background:#ef4444;border-radius:50%;font-size:10px;font-weight:800;color:#fff;display:flex;align-items:center;justify-content:center;border:2px solid var(--bg-primary,#050509);animation:notifPulse 2s infinite}
.notif-badge-sidebar{position:static;margin-left:auto;width:20px;height:20px;font-size:10px}
@keyframes notifPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
.nav-notif-item{position:relative;cursor:pointer}

/* Notification Modal */
.modal-notif{max-width:520px;width:95%;max-height:85vh;display:flex;flex-direction:column;border-radius:20px;overflow:hidden;background:var(--bg-secondary,#0c0c14);border:1px solid var(--border)}
.notif-modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px;border-bottom:1px solid var(--border)}
.notif-modal-header h3{font-size:18px;font-weight:800;display:flex;align-items:center;gap:10px;color:#fff}
.notif-modal-header h3 i{color:var(--purple);font-size:20px}
.notif-modal-tabs{display:flex;gap:6px;padding:12px 24px;border-bottom:1px solid var(--border);overflow-x:auto}
.notif-tab{padding:8px 14px;border-radius:20px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);color:rgba(255,255,255,.6);font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;transition:all .3s;display:flex;align-items:center;gap:6px}
.notif-tab:hover{background:rgba(124,58,237,.1);color:#fff}
.notif-tab.active{background:var(--gradient);color:#fff;border-color:transparent;box-shadow:0 2px 10px rgba(124,58,237,.3)}
.notif-tab i{font-size:12px}
.notif-modal-body{flex:1;overflow-y:auto;padding:16px 24px;min-height:200px;max-height:50vh;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) transparent}
.notif-modal-body::-webkit-scrollbar{width:4px}
.notif-modal-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:4px}
.notif-modal-footer{padding:14px 24px;border-top:1px solid var(--border);display:flex;justify-content:center}
.btn-clear-notif{padding:10px 24px;border-radius:12px;background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.15);color:#fca5a5;font-size:13px;font-weight:600;cursor:pointer;transition:all .3s;display:flex;align-items:center;gap:8px}
.btn-clear-notif:hover{background:rgba(239,68,68,.15);color:#fff;transform:translateY(-1px)}
.btn-clear-notif i{font-size:14px}

/* Notification Items */
.notif-list{display:flex;flex-direction:column;gap:8px}
.notif-item{display:flex;align-items:center;gap:12px;padding:12px 14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05);border-radius:14px;transition:all .3s;cursor:default}
.notif-item:hover{background:rgba(124,58,237,.06);border-color:rgba(124,58,237,.12)}
.notif-item.notif-new{border-left:3px solid var(--purple);background:rgba(124,58,237,.04)}
.notif-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px;color:#fff}
.notif-icon.notif-live{background:linear-gradient(135deg,#ef4444,#f97316)}
.notif-icon.notif-vod{background:linear-gradient(135deg,#8b5cf6,#6366f1)}
.notif-icon.notif-series{background:linear-gradient(135deg,#06b6d4,#3b82f6)}
.notif-info{flex:1;min-width:0}
.notif-name{font-size:13px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notif-category{font-size:11px;color:var(--text-muted);margin-top:2px;display:flex;align-items:center;gap:6px}
.notif-time{font-size:10px;color:rgba(255,255,255,.25);flex-shrink:0;white-space:nowrap}
.notif-empty{text-align:center;padding:40px 20px;color:rgba(255,255,255,.3)}
.notif-empty i{font-size:40px;margin-bottom:12px;display:block;opacity:.3}
.notif-empty p{font-size:14px;font-weight:600}
.notif-empty span{font-size:12px;margin-top:4px;display:block}
.notif-section-title{font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;padding:8px 0 6px;display:flex;align-items:center;gap:8px}
.notif-section-title::after{content:'';flex:1;height:1px;background:var(--border)}
@media(min-width:901px){
    /* No desktop, esconder carrosséis quando TV visível */
    #section-live .cat-carousels.tv-hidden,
    #section-live .expanded-grid-wrap.tv-hidden{display:none !important}
}
/* Ajustes para telas médias */
@media(min-width:901px) and (max-width:1200px){
    .tv-layout{grid-template-columns:180px 1fr 1fr}
    .tv-cat-item{padding:9px 12px;font-size:12px}
    .tv-ch-item{padding:8px 10px;gap:8px}
}