/* ============================
   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.has-logo{background:transparent;border-color:transparent;box-shadow:0 8px 40px rgba(0,0,0,0.3)}
.logo-icon-big.has-logo::before{display: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)}

/* ==========================================
   NETFLIX-STYLE LOGIN — New Design
   ========================================== */

/* Brand name top-left */
.nf-brand-top{position:fixed;top:28px;left:36px;z-index:10;animation:nfFadeIn .8s ease}
.nf-brand-top .brand-name-login{font-size:30px;font-weight:900;background:none;-webkit-background-clip:unset;-webkit-text-fill-color:#fff;background-clip:unset;color:#fff;letter-spacing:2px;filter:drop-shadow(0 2px 12px rgba(0,0,0,.6));text-transform:uppercase;cursor:default}

/* Wrapper centered */
.nf-login-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;min-height:100dvh;padding:80px 20px 30px;position:relative;z-index:5}

/* Card */
.nf-login-card{width:100%;max-width:460px;background:rgba(0,0,0,.78);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:10px;padding:48px 48px 40px;animation:nfCardAppear .7s cubic-bezier(.4,0,.2,1)}
@keyframes nfCardAppear{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes nfFadeIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}

/* Title */
.nf-login-title{font-size:32px;font-weight:700;color:#fff;margin:0 0 28px;letter-spacing:-.3px}

/* Form */
.nf-login-form{display:flex;flex-direction:column;gap:16px}

/* Input wrapper */
.nf-input-wrap{position:relative}

/* Input */
.nf-input{width:100%;padding:16px 18px;background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.12);border-radius:6px;color:#fff;font-size:15px;font-family:inherit;outline:none;transition:border-color .3s,background .3s;box-sizing:border-box}
.nf-input:focus{border-color:var(--purple,#7c3aed);background:rgba(255,255,255,.11);box-shadow:0 0 0 3px var(--purple-glow,rgba(124,58,237,.15))}
.nf-input::placeholder{color:rgba(255,255,255,.35);font-weight:400}

/* Password toggle */
.nf-toggle-pw{position:absolute;right:4px;top:50%;transform:translateY(-50%);background:none;border:none;color:rgba(255,255,255,.4);font-size:14px;cursor:pointer;padding:12px;transition:color .2s;z-index:2;line-height:1}
.nf-toggle-pw:hover{color:rgba(255,255,255,.8)}

/* Primary button (Entrar) */
.nf-btn-primary{width:100%;padding:16px;background:var(--btn-gradient,linear-gradient(135deg,#5b21b6,#7c3aed,#a855f7));border:none;border-radius:6px;color:#fff;font-size:16px;font-weight:700;font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:all .3s;letter-spacing:.3px;position:relative;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.3)}
.nf-btn-primary::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.1) 0%,transparent 50%);pointer-events:none;border-radius:inherit}
.nf-btn-primary:hover{filter:brightness(1.12);transform:translateY(-2px);box-shadow:0 8px 32px rgba(0,0,0,.4)}
.nf-btn-primary:active{transform:scale(.98)}
.nf-btn-primary:disabled{opacity:.45;cursor:not-allowed;transform:none;filter:none}
.nf-btn-primary .btn-loading{display:flex;align-items:center;gap:10px}

/* Options row */
.nf-login-options{display:flex;align-items:center;justify-content:space-between;margin-top:2px}

/* Remember checkbox */
.nf-remember{display:flex;align-items:center;gap:8px;font-size:13px;color:rgba(255,255,255,.55);cursor:pointer;user-select:none;transition:color .2s}
.nf-remember:hover{color:rgba(255,255,255,.8)}
.nf-remember input{display:none}
.nf-check{width:18px;height:18px;border:2px solid rgba(255,255,255,.25);border-radius:3px;display:flex;align-items:center;justify-content:center;transition:all .25s;flex-shrink:0}
.nf-remember input:checked+.nf-check{background:var(--purple,#7c3aed);border-color:var(--purple,#7c3aed)}
.nf-remember input:checked+.nf-check::after{content:'\2713';color:#fff;font-size:11px;font-weight:700;line-height:1}

/* Forgot link */
.nf-forgot{font-size:13px;color:rgba(255,255,255,.55);text-decoration:none;transition:color .2s}
.nf-forgot:hover{color:#fff}

/* Divider */
.nf-divider{display:flex;align-items:center;gap:16px;margin:26px 0;color:rgba(255,255,255,.25);font-size:13px;font-weight:500}
.nf-divider::before,.nf-divider::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.08)}

/* Secondary button (TV Connect) */
.nf-btn-secondary{width:100%;padding:14px;background:var(--btn-gradient,linear-gradient(135deg,#5b21b6,#7c3aed,#a855f7));border:none;border-radius:6px;color:#fff;font-size:15px;font-weight:600;font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:all .3s;opacity:.8;position:relative;overflow:hidden}
.nf-btn-secondary::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.08) 0%,transparent 50%);pointer-events:none;border-radius:inherit}
.nf-btn-secondary:hover{opacity:1;filter:brightness(1.1);transform:translateY(-1px)}
.nf-btn-secondary:active{transform:scale(.98)}

/* Hint text (TV) */
.nf-hint{text-align:center;font-size:12px;color:rgba(255,255,255,.3);margin-top:10px}

/* Signup text */
.nf-signup-text{text-align:center;font-size:14px;color:rgba(255,255,255,.45);margin-top:28px}
.nf-signup-text a{color:#fff;text-decoration:none;transition:opacity .2s}
.nf-signup-text a:hover{opacity:.8;text-decoration:underline}

/* WhatsApp help line */
.nf-help-line{display:flex;align-items:center;justify-content:center;gap:6px;font-size:13px;color:rgba(255,255,255,.3);margin-top:20px;transition:color .2s}
.nf-help-line:hover{color:rgba(255,255,255,.6)}
.nf-help-line .fa-whatsapp{color:#25d366;font-size:15px}

/* Login footer (Speed Test + Admin) */
.nf-login-footer{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:28px}
.nf-login-footer a{font-size:12px;color:rgba(255,255,255,.3);text-decoration:none;display:flex;align-items:center;gap:5px;padding:8px 14px;border-radius:8px;transition:all .25s}
.nf-login-footer a:hover{color:rgba(255,255,255,.7);background:rgba(255,255,255,.04)}
.nf-sep{color:rgba(255,255,255,.12);font-size:10px}

/* ===== Netflix Login Mobile ===== */
@media (max-width:768px){
    .nf-brand-top{top:20px;left:20px}
    .nf-brand-top .brand-name-login{font-size:24px;letter-spacing:1.5px}
    .nf-login-wrapper{padding:70px 16px 24px}
    .nf-login-card{padding:36px 28px 32px;border-radius:8px}
    .nf-login-title{font-size:26px;margin-bottom:22px}
    .nf-input{padding:14px 16px;font-size:14px}
    .nf-btn-primary{padding:14px;font-size:15px}
    .nf-btn-secondary{padding:12px;font-size:14px}
}
@media (max-width:400px){
    .nf-brand-top{top:16px;left:16px}
    .nf-brand-top .brand-name-login{font-size:20px}
    .nf-login-wrapper{padding:60px 12px 20px}
    .nf-login-card{padding:28px 20px 24px}
    .nf-login-title{font-size:22px;margin-bottom:18px}
    .nf-input{padding:13px 14px;font-size:13px}
    .nf-login-options{flex-direction:column;gap:10px;align-items:flex-start}
    .nf-btn-primary{padding:13px}
    .nf-divider{margin:20px 0}
}

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

/* ==========================================
   NETFLIX TOP NAVBAR
   ========================================== */
.nf-topnav{display:none;align-items:center;justify-content:space-between;position:fixed;top:0;left:0;right:0;height:64px;padding:0 48px;background:linear-gradient(180deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.6) 60%,transparent 100%);z-index:250;transition:background .4s}
.nf-topnav.scrolled{background:rgba(10,10,16,.98)}

/* Desktop: show topnav */
@media(min-width:769px){
    .nf-topnav{display:flex}
    .nav-sidebar{display:none !important}
    .mobile-topbar{display:none !important}
    .main-content{padding-top:0 !important}
    .app-container{flex-direction:column}
}

.nf-topnav-left{display:flex;align-items:center;gap:32px}
.nf-topnav-logo{display:flex;align-items:center;gap:12px;flex-shrink:0}
.nf-topnav-logo .nav-logo-icon{width:34px;height:34px;font-size:13px;border-radius:8px}
.nf-topnav-logo .brand-name-sidebar{font-size:22px;font-weight:900;letter-spacing:1px}

.nf-topnav-links{display:flex;align-items:center;gap:4px;list-style:none;padding:0;margin:0}
.nf-nav-link{display:flex;align-items:center;gap:6px;padding:8px 14px;font-size:14px;font-weight:500;color:rgba(255,255,255,.65);cursor:pointer;border-radius:8px;transition:all .25s;white-space:nowrap;user-select:none}
.nf-nav-link i{font-size:13px}
.nf-nav-link:hover{color:#fff;background:rgba(255,255,255,.06)}
.nf-nav-link.active{color:#fff;font-weight:700}

.nf-topnav-right{display:flex;align-items:center;gap:16px}

.nf-topnav-search{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:0 14px;height:38px;width:220px;transition:all .3s}
.nf-topnav-search:focus-within{border-color:var(--purple);background:rgba(255,255,255,.12);width:280px;box-shadow:0 0 0 3px var(--purple-glow)}
.nf-topnav-search i{color:rgba(255,255,255,.4);font-size:13px;flex-shrink:0}
.nf-topnav-search input{background:none;border:none;outline:none;color:#fff;font-size:13px;font-family:inherit;width:100%}
.nf-topnav-search input::placeholder{color:rgba(255,255,255,.3)}

.nf-topnav-icon{position:relative;background:none;border:none;color:rgba(255,255,255,.65);font-size:18px;cursor:pointer;padding:8px;border-radius:8px;transition:all .25s}
.nf-topnav-icon:hover{color:#fff;background:rgba(255,255,255,.08)}
.nf-topnav-icon .notif-badge{position:absolute;top:4px;right:4px;width:8px;height:8px;border-radius:50%;background:var(--red);border:2px solid rgba(10,10,16,1)}

/* Avatar Dropdown */
.nf-topnav-avatar{position:relative}
.nf-avatar-btn{cursor:pointer;display:flex;align-items:center}
.nf-avatar-sm{width:34px;height:34px;border-radius:8px;background:var(--gradient);display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff;border:2px solid transparent;transition:all .25s;overflow:hidden}
.nf-avatar-sm img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.nf-avatar-btn:hover .nf-avatar-sm{border-color:rgba(255,255,255,.5)}

.nf-avatar-dropdown{display:none;position:absolute;top:calc(100% + 10px);right:0;background:rgba(18,18,28,.96);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.08);border-radius:10px;min-width:200px;padding:8px 0;box-shadow:0 12px 48px rgba(0,0,0,.6);animation:nfDropFade .2s ease;z-index:300}
.nf-avatar-dropdown.open{display:block}
@keyframes nfDropFade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

.nf-avatar-profile-info{padding:12px 16px;display:flex;align-items:center;gap:10px}
.nf-avatar-profile-info .nf-avatar-sm{width:28px;height:28px;font-size:11px}
.nf-avatar-profile-info span{font-size:13px;font-weight:600;color:#fff}

.nf-avatar-sep{height:1px;background:rgba(255,255,255,.06);margin:4px 0}

.nf-avatar-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 16px;background:none;border:none;color:rgba(255,255,255,.65);font-size:13px;font-family:inherit;cursor:pointer;transition:all .2s}
.nf-avatar-item:hover{color:#fff;background:rgba(255,255,255,.06)}
.nf-avatar-item i{width:18px;text-align:center;font-size:14px}
.nf-avatar-logout{color:#fca5a5 !important}
.nf-avatar-logout:hover{color:#ef4444 !important;background:rgba(239,68,68,.08) !important}

/* ==========================================
   NETFLIX HERO BANNER
   ========================================== */
.nf-hero{position:relative;width:100%;height:70vh;min-height:420px;max-height:680px;overflow:hidden}
.nf-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center 20%;transition:opacity 1s ease;will-change:opacity}
.nf-hero-bg img{width:100%;height:100%;object-fit:cover}
.nf-hero-gradient{position:absolute;inset:0;background:linear-gradient(0deg,var(--bg-primary,#050509) 0%,rgba(5,5,9,.7) 30%,rgba(5,5,9,.2) 60%,rgba(0,0,0,.4) 100%);pointer-events:none}
.nf-hero-content{position:absolute;bottom:80px;left:48px;right:40%;z-index:2;animation:nfHeroFadeIn .8s ease}
@keyframes nfHeroFadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

.nf-hero-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;background:rgba(255,180,0,.15);border:1px solid rgba(255,180,0,.3);border-radius:6px;color:#ffb400;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:14px}

.nf-hero-title{font-size:clamp(28px,5vw,52px);font-weight:900;color:#fff;line-height:1.1;margin:0 0 14px;text-shadow:0 4px 20px rgba(0,0,0,.6);letter-spacing:-.5px}

.nf-hero-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;font-size:14px;color:rgba(255,255,255,.7)}
.nf-hero-meta .nf-meta-rating{color:#ffb400;font-weight:700;display:flex;align-items:center;gap:4px}
.nf-hero-meta .nf-meta-rating i{font-size:12px}
.nf-hero-meta .nf-meta-year,.nf-hero-meta .nf-meta-duration{color:rgba(255,255,255,.5)}
.nf-hero-meta .nf-meta-hd{display:inline-flex;padding:1px 6px;border:1px solid rgba(255,255,255,.3);border-radius:3px;font-size:11px;font-weight:700;color:rgba(255,255,255,.6)}
.nf-hero-meta .nf-meta-genre{color:rgba(255,255,255,.5);font-size:13px}
.nf-hero-meta .nf-meta-dot{color:rgba(255,255,255,.2)}

.nf-hero-desc{font-size:15px;color:rgba(255,255,255,.65);line-height:1.5;margin-bottom:22px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;max-width:600px}

.nf-hero-actions{display:flex;align-items:center;gap:12px}
.nf-hero-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;border:none;border-radius:6px;font-size:16px;font-weight:700;font-family:inherit;cursor:pointer;transition:all .3s;letter-spacing:.3px}
.nf-hero-btn-play{background:#fff;color:#000}
.nf-hero-btn-play:hover{background:rgba(255,255,255,.8);transform:scale(1.03)}
.nf-hero-btn-info{background:rgba(255,255,255,.15);color:#fff;backdrop-filter:blur(8px)}
.nf-hero-btn-info:hover{background:rgba(255,255,255,.25);transform:scale(1.03)}

/* Weather bar inside home */
.nf-weather-bar{padding:0 48px;margin-bottom:8px}

/* ===== Netflix Home Blocks ===== */
.home-block .home-block-header{display:flex;align-items:center;justify-content:space-between;padding-right:16px}
.home-block .home-block-header .home-block-see-all{font-size:13px;font-weight:600;color:var(--purple);cursor:pointer;display:flex;align-items:center;gap:4px;transition:all .2s;white-space:nowrap}
.home-block .home-block-header .home-block-see-all:hover{color:#fff}
.home-block .home-block-header .home-block-see-all i{font-size:10px;transition:transform .2s}
.home-block .home-block-header .home-block-see-all:hover i{transform:translateX(3px)}

/* Clear history button */
.home-block .home-block-header .home-block-clear{font-size:12px;font-weight:500;color:rgba(255,255,255,.35);cursor:pointer;display:flex;align-items:center;gap:5px;transition:all .2s}
.home-block .home-block-header .home-block-clear:hover{color:#ef4444}

/* Ranking badge on posters */
.hp-rank{position:absolute;top:6px;left:6px;background:var(--btn-gradient);color:#fff;font-size:11px;font-weight:800;padding:3px 8px;border-radius:4px;z-index:2;box-shadow:0 2px 8px rgba(0,0,0,.4)}

/* Continue watching card improvements */
.h-card-poster{position:relative;width:100%;aspect-ratio:2/3;border-radius:8px;overflow:hidden;background:var(--bg-card)}
.h-card-poster img{width:100%;height:100%;object-fit:cover}
.h-card-poster i{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:28px;color:rgba(255,255,255,.2)}

/* Netflix hero mobile */
@media(max-width:768px){
    .nf-hero{height:55vh;min-height:320px;max-height:500px}
    .nf-hero-bg{background-position:center 15%}
    .nf-hero-content{bottom:40px;left:20px;right:20px}
    .nf-hero-title{font-size:clamp(22px,6vw,32px)}
    .nf-hero-meta{font-size:12px;gap:6px}
    .nf-hero-desc{font-size:13px;-webkit-line-clamp:2;margin-bottom:16px}
    .nf-hero-btn{padding:10px 20px;font-size:14px}
    .nf-hero-badge{font-size:10px;padding:3px 10px}
    .nf-weather-bar{padding:0 16px;margin-bottom:4px}
}

@media(max-width:400px){
    .nf-hero{height:50vh;min-height:280px}
    .nf-hero-bg{background-position:center 10%}
    .nf-hero-content{bottom:30px;left:16px;right:16px}
    .nf-hero-actions{flex-wrap:wrap;gap:8px}
    .nf-hero-btn{padding:8px 16px;font-size:13px}
    .nf-hero-desc{display:none}
}

/* === 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;height:100dvh;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;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.has-logo{background:transparent;border-color:transparent;box-shadow:none}
.nav-logo-icon.has-logo::after{display: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;bottom:0;height:100%;height:100dvh;transform:translateX(-100%);box-shadow:4px 0 40px rgba(0,0,0,.6);overflow-y:auto;overflow-y:scroll;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
    .nav-sidebar.open{transform:translateX(0)}
    .nav-actions{flex:unset}
    .nav-user{margin-top:auto;padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px))}
    .sidebar-overlay.open{display:block}
    .mobile-topbar{display:flex}
    .content-section:not(#section-home){padding:16px !important;padding-top:8px !important}
    #section-home #homeContent{padding:12px 16px 30px}
    .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}
    .nf-modal-seasons{padding:0 4px}
    .settings-container{padding:0 !important}
}
@media(min-width:769px) and (max-width:1024px){
    .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;min-height:100%;opacity:0;transform:translateY(12px)}
.content-section.active{display:block;animation:sectionFadeIn .4s cubic-bezier(.16,1,.3,1) forwards}
.content-section.section-exiting{display:block;animation:sectionFadeOut .2s cubic-bezier(.4,0,.2,1) forwards}
@keyframes sectionFadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes sectionFadeOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-8px)}}
/* Home section: no padding (hero goes edge to edge) */
#section-home{padding:0}
#section-home #homeContent{padding:16px 48px 40px}
/* Other sections: normal padding */
.content-section:not(#section-home){padding:28px 48px}
/* Desktop: pad top for topnav */
@media(min-width:769px){
    .content-section:not(#section-home){padding-top:80px}
}
@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;-webkit-tap-highlight-color:rgba(124,58,237,.2);touch-action:manipulation}
.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)}
@media(hover:hover){.channel-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;-webkit-tap-highlight-color:rgba(124,58,237,.2);touch-action:manipulation}
.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}
@media(hover:hover){
.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)}
@media(hover:hover){.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}
@media(hover:hover){.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)}
@media(hover:hover){.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;-webkit-tap-highlight-color:rgba(124,58,237,.2);touch-action:manipulation}
@media(hover:hover){.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}

/* Radio card styling */
.h-card-radio{background:linear-gradient(135deg,rgba(124,58,237,.08),rgba(30,30,40,.95));border-color:rgba(124,58,237,.25);position:relative}
.h-card-radio:hover{border-color:rgba(124,58,237,.5);box-shadow:0 8px 30px rgba(124,58,237,.2)}
.h-card-radio .h-card-logo{background:linear-gradient(135deg,rgba(124,58,237,.15),rgba(124,58,237,.05));border-color:rgba(124,58,237,.2)}
.h-card-radio .h-card-logo i{color:#a78bfa}
.h-card-radio-badge{display:inline-flex;align-items:center;gap:4px;background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;font-size:9px;font-weight:800;padding:3px 10px;border-radius:12px;margin-top:8px;letter-spacing:.5px;text-transform:uppercase}
.h-card-radio-badge i{font-size:8px}

/* === Radio Page Grid === */
.radio-stations-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.radio-card{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,rgba(124,58,237,.06),rgba(20,20,28,.95));border:1px solid rgba(124,58,237,.18);border-radius:12px;padding:16px;cursor:pointer;transition:all .3s;position:relative;overflow:hidden}
.radio-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(124,58,237,.08),transparent);opacity:0;transition:opacity .3s}
.radio-card:hover{border-color:rgba(124,58,237,.45);transform:translateY(-2px);box-shadow:0 8px 32px rgba(124,58,237,.2)}
.radio-card:hover::before{opacity:1}
.radio-card-logo{width:52px;height:52px;min-width:52px;background:linear-gradient(135deg,rgba(124,58,237,.12),rgba(124,58,237,.04));border-radius:12px;display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid rgba(124,58,237,.15);position:relative;z-index:1}
.radio-card-logo img{width:100%;height:100%;object-fit:contain}
.radio-card-logo i{color:#a78bfa;font-size:20px}
.radio-card-info{flex:1;min-width:0;position:relative;z-index:1}
.radio-card-name{font-size:14px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.radio-card-cat{font-size:11px;color:rgba(255,255,255,.4);margin-top:3px}
.radio-card-badge{display:inline-flex;align-items:center;gap:4px;background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;font-size:9px;font-weight:800;padding:4px 10px;border-radius:12px;letter-spacing:.5px;text-transform:uppercase;position:relative;z-index:1;flex-shrink:0}
.radio-card-badge i{font-size:8px}
.radio-card-play{width:36px;height:36px;min-width:36px;border-radius:50%;background:rgba(124,58,237,.2);border:1.5px solid rgba(124,58,237,.3);display:flex;align-items:center;justify-content:center;color:#a78bfa;font-size:13px;transition:all .3s;position:relative;z-index:1;flex-shrink:0}
.radio-card:hover .radio-card-play{background:var(--btn-gradient);color:#fff;border-color:transparent;transform:scale(1.1)}

.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;-webkit-tap-highlight-color:rgba(124,58,237,.2);touch-action:manipulation}
@media(hover:hover){.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}
@media(hover:hover){.h-poster:hover .hp-img img{transform:scale(1.05)}}
.hp-img i{font-size:24px;color:var(--text-muted)}
.hp-img{position:relative}
.hp-info{padding:8px 10px}
.hp-title{font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp-rating{display:flex;align-items:center;gap:3px;font-size:10px;color:#ffb400;margin-top:3px}
.hp-rating i{font-size:8px}
.hp-sub{font-size:10px;color:var(--text-muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Netflix-style poster enhancements */
.nf-poster{min-width:150px;max-width:150px;border:none;border-radius:6px;background:transparent;overflow:hidden;transition:all .35s cubic-bezier(.4,0,.2,1);-webkit-tap-highlight-color:rgba(124,58,237,.2);touch-action:manipulation}
@media(hover:hover){
.nf-poster:hover{transform:scale(1.08) translateY(-6px);box-shadow:0 14px 40px rgba(0,0,0,.65);z-index:10}
}
.nf-poster .hp-img{border-radius:6px;overflow:hidden}
@media(hover:hover){.nf-poster:hover .hp-img img{transform:scale(1.08)}}
.nf-poster-rating{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.8);color:#f5c518;font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px;display:flex;align-items:center;gap:3px;backdrop-filter:blur(8px);z-index:3;border:1px solid rgba(245,197,24,.15)}
.nf-poster-rating i{font-size:9px}
.nf-poster-hover-overlay{position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(0,0,0,.85));opacity:0;transition:opacity .35s;display:flex;align-items:center;justify-content:center;z-index:2;pointer-events:none}
@media(hover:hover){.nf-poster:hover .nf-poster-hover-overlay{opacity:1}}
.nf-poster-hover-overlay i{font-size:36px;color:rgba(255,255,255,.9);filter:drop-shadow(0 2px 8px rgba(0,0,0,.5));transform:scale(.8);transition:transform .3s}
@media(hover:hover){.nf-poster:hover .nf-poster-hover-overlay i{transform:scale(1)}}
.nf-poster-year{font-size:10px;color:var(--text-muted);margin-top:2px}
.nf-poster .hp-info{padding:8px 6px 6px;background:#181818}
.nf-poster .hp-title{font-size:12px;font-weight:600}

/* Continue watching poster */
.h-poster-continue{position:relative}
.h-poster-continue .h-card-progress{position:absolute;bottom:0;left:0;right:0;height:3px;background:rgba(255,255,255,.1);z-index:2}
.h-poster-continue .h-card-progress-bar{height:100%;background:var(--red,#ef4444);border-radius:0 2px 0 0}

/* === 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}

/* === NETFLIX MODALS (Filme & Série) === */
.nf-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:2000;display:flex;align-items:center;justify-content:center;padding:0;overflow-y:auto;opacity:0;animation:nfOverlayIn .35s cubic-bezier(.4,0,.2,1) forwards;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.nf-modal-overlay.nf-closing{animation:nfOverlayOut .3s cubic-bezier(.4,0,.2,1) forwards}
@keyframes nfOverlayIn{from{opacity:0}to{opacity:1}}
@keyframes nfOverlayOut{from{opacity:1}to{opacity:0}}
.nf-modal-content{position:relative;width:100%;max-width:880px;max-height:95vh;background:#181818;border-radius:12px;overflow-y:auto;overflow-x:hidden;box-shadow:0 20px 80px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.05);margin:24px auto;animation:nfModalSlideUp .45s cubic-bezier(.16,1,.3,1) forwards;transform-origin:center bottom}
.nf-modal-overlay.nf-closing .nf-modal-content{animation:nfModalSlideDown .3s cubic-bezier(.4,0,.2,1) forwards}
@keyframes nfModalSlideUp{from{opacity:0;transform:translateY(60px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes nfModalSlideDown{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(40px) scale(.97)}}
.nf-modal-content::-webkit-scrollbar{width:5px}
.nf-modal-content::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:4px}
.nf-modal-close{position:absolute;top:14px;right:14px;background:rgba(20,20,20,.85);border:none;color:#fff;width:36px;height:36px;border-radius:50%;font-size:16px;display:flex;align-items:center;justify-content:center;z-index:10;cursor:pointer;transition:all .2s;backdrop-filter:blur(8px)}
@media(hover:hover){.nf-modal-close:hover{background:rgba(255,255,255,.2);transform:scale(1.1)}}
.nf-modal-backdrop{width:100%;aspect-ratio:16/9;background:#111;background-size:cover;background-position:center top;position:relative;transition:background-image .5s ease}
.nf-modal-backdrop img{width:100%;height:100%;object-fit:cover}
.nf-modal-backdrop-gradient{position:absolute;bottom:0;left:0;right:0;height:100%;background:linear-gradient(0deg,#181818 0%,rgba(24,24,24,.92) 20%,rgba(24,24,24,.5) 45%,transparent 70%);z-index:1;pointer-events:none}

/* Logo title on backdrop */
.nf-modal-logo-title{position:absolute;bottom:20%;left:40px;right:40px;z-index:4;font-size:38px;font-weight:900;color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.8),0 0 40px rgba(0,0,0,.4);line-height:1.1;letter-spacing:-.5px;pointer-events:none;opacity:0;animation:nfLogoTitleIn .6s .3s cubic-bezier(.16,1,.3,1) forwards}
@keyframes nfLogoTitleIn{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}

/* Trailer mute button */
.nf-trailer-mute-btn{position:absolute;bottom:16px;right:16px;z-index:5;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:rgba(0,0,0,.5);color:#fff;font-size:14px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;backdrop-filter:blur(4px)}
@media(hover:hover){.nf-trailer-mute-btn:hover{background:rgba(255,255,255,.15);border-color:#fff}}

.nf-modal-body{position:relative;z-index:2;margin-top:-100px;padding:0 40px 36px}
.nf-modal-title{font-size:32px;font-weight:900;color:#fff;margin:0 0 14px;line-height:1.15;text-shadow:0 2px 8px rgba(0,0,0,.6);letter-spacing:-.3px}

/* Action buttons (Play / Resume) */
.nf-modal-actions-top{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.nf-modal-btn-play{padding:11px 28px;background:#fff;color:#000;border:none;border-radius:6px;font-size:16px;font-weight:800;font-family:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:all .2s;letter-spacing:.3px}
@media(hover:hover){.nf-modal-btn-play:hover{background:rgba(255,255,255,.75);transform:scale(1.02)}}
.nf-modal-btn-play:active{transform:scale(.97)}
.nf-modal-btn-play i{font-size:15px}
.nf-modal-btn-resume{padding:11px 28px;background:rgba(255,255,255,.1);color:#fff;border:none;border-radius:6px;font-size:15px;font-weight:700;font-family:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:all .2s;backdrop-filter:blur(4px)}
@media(hover:hover){.nf-modal-btn-resume:hover{background:rgba(255,255,255,.2)}}
.nf-modal-btn-resume:active{transform:scale(.97)}

/* Circle action buttons (Minha Lista, Avaliar, Trailer, Compartilhar) */
.nf-modal-circle-actions{display:flex;align-items:flex-start;gap:20px;margin-bottom:20px}
.nf-circle-action{display:flex;flex-direction:column;align-items:center;gap:6px}
.nf-circle-action span{font-size:11px;color:rgba(255,255,255,.55);text-align:center;max-width:68px;line-height:1.2}
.nf-circle-btn{width:42px;height:42px;border-radius:50%;border:2px solid rgba(255,255,255,.4);background:rgba(30,30,30,.6);color:#fff;font-size:16px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .25s;backdrop-filter:blur(4px)}
@media(hover:hover){.nf-circle-btn:hover{border-color:#fff;background:rgba(255,255,255,.1);transform:scale(1.1)}}
.nf-circle-btn:active{transform:scale(.9)}
.nf-circle-btn.is-fav{color:#e50914;border-color:#e50914;background:rgba(229,9,20,.1)}
.nf-circle-btn.is-fav i::before{content:"\f00c"} /* check icon when faved */
.nf-circle-btn.is-liked{color:#46d369;border-color:#46d369}

/* Meta row */
.nf-modal-meta-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:16px;font-size:14px}
.nf-modal-meta-row .nfm-match{color:#46d369;font-weight:700}
.nf-modal-meta-row .nfm-year{color:#bcbcbc}
.nf-modal-meta-row .nfm-duration{color:#bcbcbc}
.nf-modal-meta-row .nfm-hd{border:1px solid rgba(255,255,255,.4);border-radius:3px;padding:0 6px;font-size:11px;color:rgba(255,255,255,.7);font-weight:600;line-height:20px}
.nf-modal-meta-row .nfm-maturity{background:#46d369;color:#000;font-size:11px;font-weight:800;padding:1px 8px;border-radius:3px;letter-spacing:.3px}
.nf-modal-meta-row .nfm-maturity.nfm-m14{background:#f0c040;color:#000}
.nf-modal-meta-row .nfm-maturity.nfm-m16{background:#e87c03;color:#000}
.nf-modal-meta-row .nfm-maturity.nfm-m18{background:#e50914;color:#fff}
.nf-modal-meta-row .nfm-genre{color:#bcbcbc}
.nf-modal-meta-row .nfm-dot{color:rgba(255,255,255,.25)}
.nf-modal-meta-row .nfm-rating-badge{display:inline-flex;align-items:center;gap:4px;background:rgba(33,33,33,.9);border:1px solid rgba(255,255,255,.15);border-radius:4px;padding:2px 10px;font-size:12px;font-weight:600}
.nf-modal-meta-row .nfm-rating-badge .nfm-tmdb{color:#01d277;font-weight:700;font-size:10px;letter-spacing:.5px}
.nf-modal-meta-row .nfm-rating-badge .nfm-score{color:#fff;font-weight:700}
.nf-modal-meta-row .nfm-rating-badge .nfm-votes{color:rgba(255,255,255,.4);font-size:10px}
.nf-modal-meta-row .nfm-star-badge{display:inline-flex;align-items:center;gap:5px;font-size:14px;font-weight:700;color:#f5c518}
.nf-modal-meta-row .nfm-star-badge i{font-size:12px}
.nf-modal-meta-row .nfm-star-badge .nfm-bar{width:40px;height:4px;border-radius:2px;background:rgba(255,255,255,.12);display:inline-block;position:relative;overflow:hidden;vertical-align:middle}
.nf-modal-meta-row .nfm-star-badge .nfm-bar-fill{position:absolute;top:0;left:0;height:100%;border-radius:2px;background:linear-gradient(90deg,#f5c518,#ff8c00)}

/* Progress bar (Continuar Assistindo) */
.nf-modal-progress-wrap{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.nf-modal-progress-bar{flex:1;height:4px;background:rgba(255,255,255,.15);border-radius:2px;overflow:hidden}
.nf-modal-progress-fill{height:100%;background:#e50914;border-radius:2px;transition:width .3s}
.nf-modal-progress-text{font-size:12px;color:rgba(255,255,255,.5);white-space:nowrap}

/* Description */
.nf-modal-desc{font-size:15px;color:#ddd;line-height:1.7;margin:0 0 18px}

/* Tags / Genre pills */
.nf-modal-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.nf-modal-tag{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:4px 14px;font-size:12px;color:rgba(255,255,255,.7);font-weight:500;transition:all .2s}
@media(hover:hover){.nf-modal-tag:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2)}}

/* Info grid (Director, Languages, etc) */
.nf-modal-info-grid{display:flex;flex-wrap:wrap;gap:6px 30px;margin-bottom:22px;font-size:13px;color:rgba(255,255,255,.4);line-height:1.8}
.nf-modal-info-grid strong{color:rgba(255,255,255,.7);font-weight:600}
.nf-modal-info-grid a{color:rgba(255,255,255,.7);text-decoration:none}

/* Cast section with horizontal scroll */
.nf-modal-cast-section{margin-bottom:24px}
.nf-modal-section-title{font-size:18px;font-weight:800;color:#fff;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.nf-modal-section-title i{color:var(--purple);font-size:16px}
.nf-modal-cast-scroll{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.nf-modal-cast-scroll::-webkit-scrollbar{display:none}
.nf-cast-card{min-width:100px;max-width:100px;flex-shrink:0;text-align:center;cursor:default}
.nf-cast-card-img{width:72px;height:72px;border-radius:50%;margin:0 auto 8px;overflow:hidden;background:rgba(255,255,255,.05);border:2px solid rgba(255,255,255,.08)}
.nf-cast-card-img img{width:100%;height:100%;object-fit:cover}
.nf-cast-card-img i{color:rgba(255,255,255,.15);font-size:28px;line-height:72px}
.nf-cast-card-name{font-size:11px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nf-cast-card-char{font-size:10px;color:rgba(255,255,255,.35);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}

/* Divider */
.nf-modal-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);margin:8px 0 24px}

/* About section (collapsible) */
.nf-modal-about{margin-bottom:24px}
.nf-modal-about-toggle{cursor:pointer;user-select:none;transition:color .2s}
@media(hover:hover){.nf-modal-about-toggle:hover{color:rgba(255,255,255,.8)}}
.nf-about-arrow{font-size:12px;margin-left:auto;transition:transform .3s;color:rgba(255,255,255,.4)}
.nf-modal-about.open .nf-about-arrow{transform:rotate(180deg)}
.nf-modal-about-content{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.16,1,.3,1),opacity .3s;opacity:0}
.nf-modal-about.open .nf-modal-about-content{max-height:600px;opacity:1}
.nf-modal-about-content-inner{padding:16px 0 0;font-size:13px;color:rgba(255,255,255,.6);line-height:1.8}
.nf-modal-about-content-inner strong{color:rgba(255,255,255,.85);font-weight:600}
.nf-modal-about-content-inner p{margin:0 0 8px}

/* Two-col layout (for series modal still) */
.nf-modal-two-col{display:flex;gap:32px}
.nf-modal-left{flex:1.5;min-width:0}
.nf-modal-right{flex:1;min-width:0;font-size:13px;color:#999;line-height:1.8}
.nf-modal-right strong{color:#fff;font-weight:600}

/* Seasons */
.nf-modal-seasons{margin-top:28px}
.nf-modal-seasons h3{font-size:18px;font-weight:800;margin-bottom:18px;display:flex;align-items:center;gap:8px;color:#fff}
.nf-modal-seasons h3 i{color:var(--purple)}

/* Netflix Modal Mobile */
@media(max-width:768px){
    .nf-modal-content{margin:0;max-height:100vh;max-height:100dvh;border-radius:0;max-width:100%}
    .nf-modal-backdrop{aspect-ratio:16/9;min-height:200px}
    .nf-modal-body{margin-top:-60px;padding:0 20px 28px}
    .nf-modal-title{font-size:24px}
    .nf-modal-two-col{flex-direction:column;gap:16px}
    .nf-modal-btn-play,.nf-modal-btn-resume{padding:10px 20px;font-size:14px}
    .nf-modal-meta-row{font-size:12px;gap:8px}
    .nf-modal-desc{font-size:13px}
    .nf-modal-circle-actions{gap:14px}
    .nf-circle-btn{width:38px;height:38px;font-size:14px}
    .nf-circle-action span{font-size:10px}
    .nf-modal-logo-title{font-size:26px;left:20px;right:20px}
    .nf-modal-info-grid{gap:4px 20px}
    .nf-cast-card{min-width:80px;max-width:80px}
    .nf-cast-card-img{width:56px;height:56px}
    .nf-cast-card-img i{line-height:56px;font-size:22px}
}
@media(max-width:480px){
    .nf-modal-backdrop{min-height:180px}
    .nf-modal-body{margin-top:-40px;padding:0 16px 24px}
    .nf-modal-title{font-size:20px}
    .nf-modal-actions-top{gap:8px}
    .nf-modal-desc{font-size:13px;-webkit-line-clamp:5;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
    .nf-modal-logo-title{font-size:20px;left:16px;right:16px;bottom:25%}
    .nf-modal-circle-actions{gap:10px}
    .nf-modal-section-title{font-size:16px}
}

/* === TRAILER EMBED === */
.nf-modal-trailer-wrap{position:absolute;inset:0;z-index:3;background:#000}
.nf-modal-trailer-wrap iframe{width:100%;height:100%;border:none}

/* === MORE LIKE THIS === */
.nf-modal-more{margin-top:28px}
.nf-modal-more-title{font-size:18px;font-weight:800;color:#fff;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.nf-modal-more-title i{color:var(--purple)}
.nf-modal-more-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.nf-more-card{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;overflow:hidden;cursor:pointer;transition:all .3s}
.nf-more-card:hover{border-color:var(--purple);transform:translateY(-4px);box-shadow:0 8px 30px rgba(0,0,0,.3)}
.nf-more-card img{width:100%;aspect-ratio:2/3;object-fit:cover}
.nf-more-card-fallback{width:100%;aspect-ratio:2/3;background:var(--bg-input);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.2);font-size:24px}
.nf-more-card-info{padding:8px 10px}
.nf-more-card-title{font-size:12px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nf-more-card-year{font-size:10px;color:var(--text-muted);margin-top:2px}
@media(max-width:480px){
    .nf-modal-more-grid{grid-template-columns:repeat(3,1fr);gap:8px}
    .nf-more-card-info{padding:6px 8px}
    .nf-more-card-title{font-size:11px}
}

/* === SEASONS & EPISODES === */
.nf-modal-seasons .seasons-tabs{display:flex;gap:8px;overflow-x:auto;margin-bottom:18px;scrollbar-width:none;padding-bottom:2px}
.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}
/* Vertical Netflix-style episodes list */
.episodes-list.episodes-vertical{display:flex;flex-direction:column;gap:0;overflow-x:hidden;overflow-y:visible;padding-bottom:8px;border-top:1px solid rgba(255,255,255,.08)}
.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}

/* === NETFLIX VERTICAL EPISODE ROWS === */
.episode-row-nf{display:flex;align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.06);cursor:pointer;transition:background .2s}
.episode-row-nf:hover{background:rgba(255,255,255,.04)}
.episode-row-nf:last-child{border-bottom:none}
.episode-row-nf.ep-last-watched{background:rgba(124,58,237,.05);border-left:3px solid var(--purple);padding-left:12px}
.ep-row-num{font-size:22px;font-weight:700;color:rgba(255,255,255,.3);min-width:36px;text-align:center;flex-shrink:0}
.ep-row-thumb{position:relative;width:130px;min-width:130px;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:var(--bg-input);flex-shrink:0}
.ep-row-thumb img{width:100%;height:100%;object-fit:cover}
.ep-row-thumb-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.3);opacity:0;transition:opacity .2s}
.ep-row-thumb-play i{font-size:28px;color:#fff;filter:drop-shadow(0 2px 8px rgba(0,0,0,.5))}
.episode-row-nf:hover .ep-row-thumb-play{opacity:1}
.ep-row-info{flex:1;min-width:0}
.ep-row-title{font-size:14px;font-weight:600;color:#fff;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ep-row-meta{display:flex;gap:10px;font-size:12px;color:rgba(255,255,255,.4);margin-bottom:4px}
.ep-row-plot{font-size:12px;color:rgba(255,255,255,.35);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ep-row-progress{height:3px;background:rgba(255,255,255,.1);border-radius:2px;margin-top:6px;overflow:hidden}
.ep-row-progress-bar{height:100%;background:var(--purple);border-radius:2px;transition:width .3s}
@media(max-width:768px){
    .episode-row-nf{padding:12px 0;gap:10px}
    .ep-row-num{font-size:16px;min-width:24px}
    .ep-row-thumb{width:100px;min-width:100px}
    .ep-row-title{font-size:13px}
    .ep-row-plot{-webkit-line-clamp:1;font-size:11px}
}
@media(max-width:480px){
    .ep-row-thumb{width:80px;min-width:80px}
    .ep-row-title{font-size:12px}
    .ep-row-plot{display:none}
}

/* === 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:8px 12px;font-size:12px;min-height:40px}
    .ctrl-btn-play{padding:10px 18px;font-size:16px;min-height:44px}
    .ctrl-time{font-size:11px}
    .ctrl-left,.ctrl-right{min-width:70px;gap:4px}
    .vol-slider-wrap{display:none}
    .ctrl-btn-vol{border-radius:10px;padding:8px 10px;min-height:40px}
}

/* === 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:10;opacity:0;transition:opacity .3s;pointer-events:auto}
.ch-modal-player:hover .ch-modal-player-controls,.ch-modal-player-controls:hover{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;pointer-events:auto;-webkit-tap-highlight-color:rgba(255,255,255,.15);touch-action:manipulation;position:relative;z-index:10}
.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}
.ch-modal-fullscreen-btn{background:rgba(124,58,237,.35)!important;border:1px solid rgba(124,58,237,.5)!important;font-size:17px!important}
.ch-modal-fullscreen-btn:hover,.ch-modal-fullscreen-btn:active{background:rgba(124,58,237,.6)!important;transform:scale(1.1)}

/* 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:44px;
        height:44px;
        font-size:16px;
    }
    /* 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}}

/* ============================================================
   MOBILE BOTTOM NAV BAR — Estilo app nativo
   ============================================================ */
.mobile-bottom-nav{display:none !important}
@media(max-width:768px){
    .mobile-bottom-nav.visible{
        display:flex !important;
        position:fixed;
        bottom:0;
        left:0;
        right:0;
        z-index:3000;
        background:rgba(8,8,13,.97);
        backdrop-filter:blur(20px);
        -webkit-backdrop-filter:blur(20px);
        border-top:1px solid rgba(255,255,255,.06);
        padding:6px 0 calc(6px + env(safe-area-inset-bottom, 0px));
        justify-content:space-around;
        align-items:center;
        box-shadow:0 -4px 30px rgba(0,0,0,.5);
    }
    .bottom-nav-item{
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:3px;
        padding:6px 12px;
        background:none;
        border:none;
        color:var(--text-muted);
        font-size:10px;
        font-weight:500;
        cursor:pointer;
        transition:all .25s;
        position:relative;
        min-width:48px;
        -webkit-tap-highlight-color:transparent;
    }
    .bottom-nav-item i{
        font-size:17px;
        transition:all .25s;
    }
    .bottom-nav-item span{
        font-size:10px;
        line-height:1;
        transition:all .25s;
    }
    .bottom-nav-item.active{
        color:var(--purple);
    }
    .bottom-nav-item.active i{
        text-shadow:0 0 15px rgba(124,58,237,.5);
        transform:scale(1.1);
    }
    .bottom-nav-item.active::before{
        content:'';
        position:absolute;
        top:0;
        left:50%;
        transform:translateX(-50%);
        width:24px;
        height:3px;
        background:var(--btn-gradient);
        border-radius:0 0 4px 4px;
    }
    /* Ajustar conteúdo principal p/ não ficar atrás do bottom nav */
    .main-content{
        padding-bottom:68px !important;
    }
    /* Esconder bottom nav quando modal de canal está aberto */
    body.channel-modal-open .mobile-bottom-nav{
        display:none !important;
    }
}

/* ============================================================
   STANDALONE / PWA — Ajustar botão fechar do vídeo
   Quando instalado como app, a status bar cobre o topo
   ============================================================ */
@media(display-mode:standalone){
    /* Botão fechar do modal de canal - descer para não ficar sob a status bar */
    #channelModal .ch-modal-close{
        top:calc(12px + env(safe-area-inset-top, 24px));
    }
    /* Fullscreen toggle também */
    .ch-modal-fullscreen-toggle{
        top:calc(12px + env(safe-area-inset-top, 24px)) !important;
    }
    /* Mobile topbar precisa de padding-top para safe area */
    .mobile-topbar{
        padding-top:env(safe-area-inset-top, 0px);
        height:calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
    }
    /* Bottom nav precisa de padding-bottom para safe area */
    .mobile-bottom-nav{
        padding-bottom:calc(6px + env(safe-area-inset-bottom, 0px)) !important;
    }
}
@media(display-mode:standalone) and (max-width:768px){
    /* No modal de canal mobile em modo standalone, dar mais espaço ao botão fechar */
    #channelModal .ch-modal-close{
        top:calc(8px + env(safe-area-inset-top, 28px));
        right:8px;
        width:44px;
        height:44px;
    }
    #channelModal .ch-modal-player{
        margin-top:env(safe-area-inset-top, 0px);
    }
}

/* 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 — Cinematográfica
   ======================================== */
.intro-overlay {
    position: fixed; inset: 0;
    background: radial-gradient(ellipse at center, #0a0015 0%, #000 70%);
    display: flex; align-items: center; justify-content: center;
    z-index: 99999; opacity: 0; pointer-events: none;
    transition: opacity 0.5s ease; overflow: hidden;
}
.intro-overlay.active { opacity: 1; pointer-events: auto; }
.intro-bg-particles {
    position: absolute; inset: 0; overflow: hidden; z-index: 0;
}
.intro-particle {
    position: absolute; width: 3px; height: 3px; border-radius: 50%;
    background: rgba(124,58,237,.5); animation: introParticleFloat linear infinite;
}
@keyframes introParticleFloat {
    0% { transform: translateY(100vh) scale(0); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(-20vh) scale(1); opacity: 0; }
}
.intro-glow {
    position: absolute; width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(124,58,237,.25), transparent 70%);
    border-radius: 50%; z-index: 1;
    animation: introGlowPulse 3s ease-in-out infinite;
}
@keyframes introGlowPulse {
    0%, 100% { transform: scale(1); opacity: .6; }
    50% { transform: scale(1.3); opacity: 1; }
}
.intro-content {
    display: flex; flex-direction: column; align-items: center;
    gap: 20px; z-index: 2; perspective: 800px;
}
.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), 0 0 80px rgba(124,58,237,0.2);
    transform-style: preserve-3d;
}
.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: 900; color: #fff;
    letter-spacing: 0.1em; text-transform: uppercase;
    text-shadow: 0 0 40px rgba(124,58,237,.5), 0 4px 20px rgba(0,0,0,.5);
}
.intro-tagline {
    font-size: 14px; color: rgba(255,255,255,.4);
    font-weight: 400; letter-spacing: 2px; text-transform: uppercase;
    opacity: 0; animation: introTaglineIn 1s ease-out 1.5s forwards;
}
@keyframes introTaglineIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.intro-skip {
    position: absolute; bottom: 40px; right: 40px;
    padding: 12px 24px;
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,.7); border-radius: 8px;
    font-size: 14px; font-weight: 500; cursor: pointer;
    transition: all 0.3s; display: flex; align-items: center; gap: 8px;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    z-index: 3;
}
.intro-skip:hover { background: rgba(255,255,255,0.15); color: #fff; }

/* Netflix Style Intro */
.intro-overlay.intro-netflix .intro-logo,
.intro-overlay.style-netflix .intro-logo {
    animation: nfIntroLogo 2s cubic-bezier(.16,1,.3,1) forwards;
}
.intro-overlay.intro-netflix .intro-name,
.intro-overlay.style-netflix .intro-name {
    animation: nfIntroName 1.2s cubic-bezier(.16,1,.3,1) 0.8s forwards;
    opacity: 0;
}
@keyframes nfIntroLogo {
    0% { transform: scale(0.2) rotateY(90deg); opacity: 0; }
    40% { transform: scale(1.15) rotateY(-5deg); opacity: 1; }
    60% { transform: scale(0.95) rotateY(2deg); }
    100% { transform: scale(1) rotateY(0); opacity: 1; }
}
@keyframes nfIntroName {
    0% { opacity: 0; letter-spacing: 0.6em; transform: translateY(10px); }
    100% { opacity: 1; letter-spacing: 0.15em; transform: translateY(0); }
}

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

/* Zoom Style Intro */
.intro-overlay.intro-zoom .intro-content,
.intro-overlay.style-zoom .intro-content {
    animation: introZoomIn 2s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes introZoomIn {
    0% { transform: scale(3) rotate(10deg); opacity: 0; }
    100% { transform: scale(1) rotate(0); 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-tagline { font-size: 11px; }
    .intro-skip { bottom: 24px; right: 24px; padding: 10px 18px; font-size: 12px; }
    .intro-glow { width: 200px; height: 200px; }
}

/* ========================================
   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:200px 1fr 1.6fr;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:8px 14px;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:10px;padding:6px 12px;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:12px;font-weight:700;color:rgba(255,255,255,.35);min-width:30px;text-align:center;flex-shrink:0}
.tv-ch-logo{width:30px;height:30px;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:15px;font-weight:600;color:rgba(255,255,255,.9);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:170px 1fr 1.5fr}
    .tv-cat-item{padding:7px 12px;font-size:12px}
    .tv-ch-item{padding:5px 10px;gap:8px}
    .tv-ch-name{font-size:14px}
}

/* ============================================================
   PROFESSIONAL POLISH — Mobile Touch UX
   ============================================================ */

/* Suppress default tap highlight on all interactive elements */
button, a, .nav-item, .channel-card, .poster-card, .h-card, .h-poster,
.category-chip, .season-tab, .fav-tab, .episode-card-nf, .epg-row,
.bottom-nav-item, .profile-selector-item, .profile-action-btn,
.ch-modal-ch-item, .ch-modal-tab, .ch-modal-epg-date,
.tv-cat-item, .tv-ch-item, .blocked-cat-chip, .display-mode-card {
    -webkit-tap-highlight-color: transparent;
}

/* Active/pressed states for touch feedback (mobile) */
@media (hover: none) and (pointer: coarse) {
    .nav-item:active { background: rgba(124,58,237,.2); transform: scale(.97); }
    .channel-card:active { transform: scale(.98); border-color: var(--purple); }
    .poster-card:active { transform: scale(.96); }
    .h-card:active, .h-poster:active { transform: scale(.96); }
    .category-chip:active { transform: scale(.95); opacity: .8; }
    .season-tab:active, .fav-tab:active { transform: scale(.95); }
    .episode-card-nf:active { transform: scale(.97); }
    .btn-play-modal:active { transform: scale(.95); }
    .btn-fav-modal:active { transform: scale(.95); }
    .btn-connect:active { transform: scale(.97) !important; }
    .btn-settings:active { transform: scale(.96); }
    .btn-load-more:active { transform: scale(.97); }
    .ctrl-btn:active { transform: scale(.9); background: rgba(255,255,255,.25); }
    .bottom-nav-item:active { transform: scale(.9); }
    .profile-selector-item:active { transform: scale(.95); }
    .profile-action-btn:active { transform: scale(.96); }
    .ch-modal-ch-item:active { background: rgba(124,58,237,.15); }
    .ch-modal-tab:active { background: rgba(124,58,237,.12); }
    .ch-modal-fav:active { transform: scale(.9); }
    .ch-modal-close:active { transform: scale(.9); background: rgba(239,68,68,.9); }
    .tv-cat-item:active { background: rgba(124,58,237,.2); }
    .tv-ch-item:active { background: rgba(124,58,237,.15); }
    .pin-keypad button:active { transform: scale(.9); background: rgba(124,58,237,.15); }
    .resume-btn:active { transform: scale(.96); }
    .cat-carousel-viewall:active { transform: scale(.95); }
    .expanded-back:active { transform: scale(.95); }
    .modal-close:active { transform: scale(.9) rotate(90deg); }
    .blocked-cat-chip:active { transform: scale(.95); }
    .display-mode-card:active { transform: scale(.97); }
    .whatsapp-float:active { transform: scale(.9); }
    .btn-switch-profile:active { transform: scale(.97); }
    .btn-logout:active { transform: scale(.97); }
    .footer-link:active { background: rgba(124,58,237,.1); }

    /* Remove hover transforms on touch (prevents sticky hover) */
    .channel-card:hover { transform: none; }
    .poster-card:hover { transform: none; }
    .h-card:hover, .h-poster:hover { transform: none; }
    .episode-card-nf:hover { transform: none; }
    .btn-connect:hover { transform: none; }
    .btn-load-more:hover { transform: none; }
    .btn-play-modal:hover { transform: none; }
}

/* Ensure minimum touch targets (44px) on mobile */
@media (max-width: 768px) {
    .btn-fav { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
    .footer-link { min-height: 44px; display: inline-flex; align-items: center; padding: 8px 12px; }
    .cat-carousel-viewall { min-height: 44px; }
    .toggle-password { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
    .install-close { min-width: 44px; min-height: 44px; }
    .install-btn { min-height: 44px; }
    .settings-toggle-row { min-height: 48px; }
    .btn-settings { min-height: 44px; }
    .modal-close { min-width: 44px; min-height: 44px; }
    .player-actions button { width: 44px; height: 44px; font-size: 16px; }
    .btn-back { min-height: 44px; padding: 10px 16px; }
    .player-epg-close { min-width: 44px; min-height: 44px; }
    .resume-btn { min-height: 44px; padding: 12px 24px; }
    .btn-skip-intro { min-height: 44px; padding: 12px 24px; }
    .season-tab { min-height: 40px; padding: 10px 20px; }
    .category-chip { min-height: 38px; padding: 9px 16px; }
    .nav-item { min-height: 48px; }
    .epg-row { min-height: 52px; }
}

/* Better text readability — no text below 10px */
@media (max-width: 400px) {
    .poster-year { font-size: 10px !important; }
    .poster-title { font-size: 11px !important; }
    .poster-rating { font-size: 9px !important; }
    .poster-badge { font-size: 8px !important; }
    .wc-date { font-size: 10px !important; }
    .weather-desc-inline { font-size: 10px !important; }
    .cat-carousel-count { font-size: 10px !important; }
}

/* Prevent text selection on interactive elements */
.nav-item, .channel-card, .poster-card, .category-chip, .bottom-nav-item,
.profile-selector-item, .ch-modal-ch-item, .tv-cat-item, .tv-ch-item,
.episode-card-nf, .h-card, .h-poster, .ctrl-btn, .pin-keypad button {
    -webkit-user-select: none;
    user-select: none;
}

/* Smooth scroll momentum for all scrollable containers */
.main-content, .tv-cat-list, .tv-channel-list, .tv-epg-list,
.ch-modal-tab-content, .categories-bar, .episodes-list,
.horizontal-list, .cat-carousel-track, .epg-programs, .seasons-tabs {
    -webkit-overflow-scrolling: touch;
}

/* ============================================================
   PROFESSIONAL POLISH — Performance & Reduced Motion
   ============================================================ */

/* Reduce animations for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .splash-screen { animation: none; opacity: 0; visibility: hidden; pointer-events: none; }
    .poster-card:hover .poster-img img { transform: none; }
    .episode-card-nf:hover .ep-thumb img { transform: none; }
    .logo-icon-big { animation: none; }
    .install-banner { animation: none; }
    .whatsapp-float { animation: none; }
    .notif-badge { animation: none; }
}

/* GPU acceleration hints for frequently animated elements */
.poster-card, .channel-card, .episode-card-nf, .h-card, .h-poster {
    will-change: transform;
}
.nav-sidebar {
    will-change: transform;
}
.modal-overlay {
    position:fixed;inset:0;background:rgba(0,0,0,.8);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:2000;display:flex;align-items:center;justify-content:center;animation:fadeIn .2s;padding:16px;
    will-change: opacity;
}

/* ============================================================
   PROFESSIONAL POLISH — Better Tablet/Medium Responsiveness
   ============================================================ */

/* Tablets (768-1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .poster-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; gap: 14px; }
    .channel-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
    .profile-selector-avatar { width: 100px; height: 100px; }
    .profile-selector-grid { gap: 20px; }
    .cat-carousel-track .h-poster { min-width: 130px; max-width: 130px; }
}

/* WhatsApp button above bottom nav on mobile */
@media (max-width: 768px) {
    .whatsapp-float {
        bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
        right: 16px !important;
        width: 52px !important;
        height: 52px !important;
        font-size: 26px !important;
    }
}

/* ============================================================
   PROFESSIONAL POLISH — Desktop Hover & Transitions
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
    /* Smooth scale transitions */
    .channel-card { transition: all .25s cubic-bezier(.4,0,.2,1); }
    .poster-card { transition: all .3s cubic-bezier(.4,0,.2,1); }
    .h-card, .h-poster { transition: all .25s cubic-bezier(.4,0,.2,1); }
    .episode-card-nf { transition: all .3s cubic-bezier(.4,0,.2,1); }
    
    /* Subtle glow on channel cards */
    .channel-card:hover {
        box-shadow: var(--shadow-md), 0 0 30px rgba(124,58,237,.1), 0 0 0 1px rgba(124,58,237,.15);
    }
    
    /* Poster lift effect */
    .poster-card:hover {
        box-shadow: var(--shadow-md), 0 20px 50px rgba(0,0,0,.25), 0 0 40px rgba(124,58,237,.12);
    }
}

/* ============================================================
   PROFESSIONAL POLISH — Better Loading & Skeleton States
   ============================================================ */
.skeleton-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
}
.skeleton-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.03), transparent);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
}
.skeleton-poster {
    aspect-ratio: 2/3;
    background: var(--bg-input);
}
.skeleton-text {
    height: 12px;
    background: var(--bg-input);
    border-radius: 6px;
    margin: 12px;
}
.skeleton-text-sm {
    height: 10px;
    width: 60%;
    background: var(--bg-input);
    border-radius: 4px;
    margin: 0 12px 12px;
}

/* ============================================================
   PROFESSIONAL POLISH — Enhanced Scrollbar Mobile
   ============================================================ */
@media (max-width: 768px) {
    /* Hide scrollbars cleanly on mobile for horizontal lists */
    .categories-bar, .episodes-list, .horizontal-list,
    .cat-carousel-track, .seasons-tabs, .epg-programs {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .categories-bar::-webkit-scrollbar, .episodes-list::-webkit-scrollbar,
    .horizontal-list::-webkit-scrollbar, .cat-carousel-track::-webkit-scrollbar,
    .seasons-tabs::-webkit-scrollbar, .epg-programs::-webkit-scrollbar {
        display: none;
    }
    /* Main content scrollbar thin */
    .main-content::-webkit-scrollbar { width: 3px; }
    .main-content::-webkit-scrollbar-thumb { background: rgba(124,58,237,.2); border-radius: 3px; }
}

/* ============================================================
   PROFESSIONAL POLISH — Print Styles
   ============================================================ */
@media print {
    .nav-sidebar, .mobile-topbar, .mobile-bottom-nav,
    .whatsapp-float, .install-banner, .sidebar-overlay { display: none !important; }
    .main-content { overflow: visible !important; height: auto !important; }
    body { overflow: visible !important; background: #fff !important; color: #000 !important; }
}

/* ============================================================
   ACCESSIBILITY — Reduced Motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .nf-modal-content, .nf-modal-overlay,
    .content-section, .ch-modal { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   SKELETON LOADING — Netflix shimmer
   ============================================================ */
.skeleton-home { padding: 16px 48px 40px; }
.skeleton-hero {
    width: 100%; height: 50vh; min-height: 300px; max-height: 500px;
    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-card));
    border-radius: 0; position: relative; overflow: hidden;
}
.skeleton-hero::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.03) 50%, transparent 100%);
    background-size: 200% 100%; animation: shimmer 1.8s ease-in-out infinite;
}
.skeleton-block { margin-bottom: 28px; }
.skeleton-block-title {
    height: 20px; width: 180px; background: var(--bg-card-hover);
    border-radius: 6px; margin-bottom: 16px;
}
.skeleton-row {
    display: flex; gap: 14px; overflow: hidden;
}
.skeleton-card-poster {
    min-width: 150px; max-width: 150px; aspect-ratio: 2/3;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-sm); position: relative; overflow: hidden;
}
.skeleton-card-poster::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.03) 50%, transparent 100%);
    background-size: 200% 100%; animation: shimmer 1.8s ease-in-out infinite;
}
.skeleton-card-channel {
    min-width: 150px; max-width: 150px; height: 100px;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-sm); position: relative; overflow: hidden;
}
.skeleton-card-channel::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.03) 50%, transparent 100%);
    background-size: 200% 100%; animation: shimmer 1.8s ease-in-out infinite;
}
@media (max-width: 768px) {
    .skeleton-home { padding: 10px 16px 20px; }
    .skeleton-hero { min-height: 200px; max-height: 320px; }
    .skeleton-card-poster { min-width: 110px; max-width: 110px; }
    .skeleton-card-channel { min-width: 110px; max-width: 110px; height: 80px; }
}

/* ============================================================
   CHANNEL MODAL — Slide Up Animation
   ============================================================ */
#channelModal .ch-modal { animation: nfModalSlideUp .4s cubic-bezier(.16,1,.3,1) forwards; }
#channelModal.nf-closing .ch-modal { animation: nfModalSlideDown .3s cubic-bezier(.4,0,.2,1) forwards; }
#channelModal.nf-closing { animation: nfOverlayOut .3s cubic-bezier(.4,0,.2,1) forwards; }

/* ============================================================
   HOME BLOCK ANIMATIONS — Staggered entrance
   ============================================================ */
.home-block {
    opacity: 0; transform: translateY(20px);
    animation: homeBlockIn .5s cubic-bezier(.16,1,.3,1) forwards;
}
.home-block:nth-child(1) { animation-delay: .05s; }
.home-block:nth-child(2) { animation-delay: .1s; }
.home-block:nth-child(3) { animation-delay: .15s; }
.home-block:nth-child(4) { animation-delay: .2s; }
.home-block:nth-child(5) { animation-delay: .25s; }
.home-block:nth-child(6) { animation-delay: .3s; }
@keyframes homeBlockIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* ============================================================
   HERO ROTATION — Dots & Crossfade
   ============================================================ */
.nf-hero-dots {
    position: absolute; bottom: 20px; right: 48px;
    display: flex; gap: 8px; z-index: 5;
}
.nf-hero-dot {
    width: 12px; height: 3px; border-radius: 2px;
    background: rgba(255,255,255,.3); cursor: pointer;
    transition: all .4s cubic-bezier(.4,0,.2,1);
}
.nf-hero-dot.active {
    width: 28px; background: #fff;
}
.nf-hero-bg.hero-fade-out { opacity: 0; }
.nf-hero-bg.hero-fade-in { opacity: 1; }
.nf-hero-content.hero-content-enter {
    animation: nfHeroContentIn .7s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes nfHeroContentIn{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:translateY(0)}}
@media (max-width: 768px) {
    .nf-hero-dots { right: 20px; bottom: 14px; }
}

/* ============================================================
   HOME CAROUSEL ARROWS
   ============================================================ */
.home-block { position: relative; }
.home-carousel-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 5; width: 40px; height: 40px; border-radius: 50%;
    background: rgba(0,0,0,.7); border: 1px solid rgba(255,255,255,.1);
    color: #fff; font-size: 15px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all .3s;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    opacity: 0;
}
.home-block:hover .home-carousel-arrow { opacity: 1; }
.home-carousel-arrow:hover { background: rgba(255,255,255,.15); transform: translateY(-50%) scale(1.1); }
.home-carousel-arrow.hca-left { left: 0; }
.home-carousel-arrow.hca-right { right: 0; }
.home-carousel-arrow.hca-hidden { opacity: 0 !important; pointer-events: none; }
@media (max-width: 768px) {
    .home-carousel-arrow { display: none; }
}

/* ============================================================
   TOP 10 LARGE NUMBERS
   ============================================================ */
.top10-number {
    position: absolute; left: -5px; bottom: -8px;
    font-size: 90px; font-weight: 900;
    font-style: italic; line-height: 1;
    color: transparent;
    -webkit-text-stroke: 2px rgba(255,255,255,.5);
    text-shadow: 0 0 20px rgba(0,0,0,.8);
    z-index: 2; pointer-events: none;
    font-family: 'Inter', sans-serif;
}
.h-poster.nf-poster.top10-poster {
    padding-left: 28px; overflow: visible;
}
.h-poster.nf-poster.top10-poster .hp-img {
    position: relative;
}
@media (max-width: 768px) {
    .top10-number { font-size: 64px; left: -3px; bottom: -5px; }
    .h-poster.nf-poster.top10-poster { padding-left: 18px; }
}

/* ============================================================
   POLISH FINAL — Micro-interactions & Ripple
   ============================================================ */
/* Button ripple effect */
.nf-hero-btn, .nf-modal-btn-play, .season-tab {
    position: relative; overflow: hidden;
}
.nf-hero-btn::after, .nf-modal-btn-play::after {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%), rgba(255,255,255,.3) 0%, transparent 60%);
    opacity: 0; transition: opacity .5s;
}
.nf-hero-btn:active::after, .nf-modal-btn-play:active::after {
    opacity: 1; transition: opacity 0s;
}

/* Smooth hover transitions for all interactive cards — only on pointer devices */
@media(hover:hover){
.h-poster, .h-card, .poster-card, .channel-card {
    transition: all .3s cubic-bezier(.16,1,.3,1);
}
.h-poster:hover, .nf-poster:hover {
    transform: scale(1.08);
    z-index: 3;
}
.h-card:hover {
    transform: scale(1.05);
    z-index: 3;
}
}

/* Toast enter/exit animation */
.toast-container .toast {
    animation: toastSlideIn .4s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes toastSlideIn {
    from { opacity: 0; transform: translateX(60px) scale(.9); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}

/* Focus-visible for accessibility */
button:focus-visible, a:focus-visible, .season-tab:focus-visible,
.nav-item:focus-visible, .h-card:focus-visible, .h-poster:focus-visible {
    outline: 2px solid var(--purple);
    outline-offset: 2px;
}

/* Smooth image load */
.hp-img img, .nf-modal-backdrop, .ep-row-thumb img {
    transition: opacity .4s ease;
}
.hp-img img[loading="lazy"] {
    opacity: 0;
}
.hp-img img.loaded, .hp-img img:not([loading="lazy"]) {
    opacity: 1;
}

/* Scroll snap for horizontal lists */
.horizontal-list {
    scroll-snap-type: x proximity;
}
.horizontal-list > * {
    scroll-snap-align: start;
}

/* Subtle text selection color */
::selection {
    background: rgba(124,58,237,.4);
    color: #fff;
}
::-moz-selection {
    background: rgba(124,58,237,.4);
    color: #fff;
}

/* Custom scrollbar for main content */
.main-content::-webkit-scrollbar { width: 6px; }
.main-content::-webkit-scrollbar-track { background: transparent; }
.main-content::-webkit-scrollbar-thumb { 
    background: linear-gradient(180deg, rgba(124,58,237,.3), rgba(124,58,237,.1));
    border-radius: 3px; 
}
.main-content::-webkit-scrollbar-thumb:hover { 
    background: linear-gradient(180deg, rgba(124,58,237,.5), rgba(124,58,237,.2));
}

/* Navbar active indicator glow */
.nav-item.active::after {
    content: ''; position: absolute; left: 0; top: 8px; bottom: 8px;
    width: 3px; border-radius: 0 3px 3px 0;
    background: var(--purple);
    box-shadow: 0 0 12px rgba(124,58,237,.5);
}