/* ============================================================
   ANT APP OTT - User Web Theme
   Near-black background, gold accent, premium cinematic OTT
   ============================================================ */
:root{
  --primary:#FFB800;--secondary:#D99600;--bg:#050505;--bg2:#0D0D0D;
  --card:#151515;--input:#111111;--text:#FFFFFF;--muted:#B5B5B5;
  --muted2:#777777;--success:#22C55E;--error:#EF4444;--live:#FF2D2D;
  --radius:10px;--font:Inter,system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:var(--font);overflow-x:hidden;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* Touch-friendly tap targets (min 44px on mobile) */
@media(max-width:768px){
  button,a.btn-subscribe,a.btn-watch,a.btn-list,.nav-link,.bn-item,.quick-link,.chip,.mn-link{min-height:44px;min-width:44px}
  .bn-item{min-width:auto}
  .chip{min-height:36px;display:flex;align-items:center}
}

/* Prevent iOS zoom on input focus */
@media(max-width:768px){
  input,textarea,select{font-size:16px!important}
}

/* Desktop Nav */
.desktop-nav{display:flex;justify-content:space-between;align-items:center;padding:.8rem 2rem;background:rgba(5,5,5,.95);backdrop-filter:blur(10px);position:sticky;top:0;z-index:100;border-bottom:1px solid #1a1a1a}
.nav-left{display:flex;align-items:center;gap:1.5rem}
.nav-right{display:flex;align-items:center;gap:1rem}
.brand{font-size:1.4rem;font-weight:800;color:var(--primary)}
.brand-text{background:linear-gradient(135deg,var(--primary),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.nav-link{color:var(--muted);font-size:.95rem;font-weight:500;transition:.2s;padding:.3rem 0}
.nav-link:hover,.nav-link.active{color:var(--primary)}
.profile-link{display:flex;align-items:center;gap:.4rem}
.btn-subscribe{background:var(--primary);color:#000;padding:.4rem 1.2rem;border-radius:var(--radius);font-weight:600;font-size:.9rem;transition:.2s}
.btn-subscribe:hover{background:var(--secondary);transform:translateY(-1px)}

/* Page Content */
.page-content{min-height:calc(100vh - 60px);padding-bottom:70px}

/* Hero Banner */
.hero-banner{position:relative;height:60vh;min-height:400px;max-height:600px;overflow:hidden;border-radius:0}
.hero-banner img{width:100%;height:100%;object-fit:cover}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,5,5,.9) 0%,rgba(5,5,5,.5) 50%,transparent 100%);display:flex;align-items:center}
.hero-content{padding:0 3rem;max-width:600px}
.hero-content h1{font-size:2.5rem;font-weight:800;margin-bottom:.5rem}
.hero-content p{color:var(--muted);font-size:1rem;margin-bottom:1.5rem;line-height:1.5}
.hero-cta{display:flex;gap:.8rem}
.btn-watch{background:var(--primary);color:#000;padding:.7rem 1.8rem;border:none;border-radius:var(--radius);font-weight:700;font-size:1rem;cursor:pointer;transition:.2s}
.btn-watch:hover{background:var(--secondary)}
.btn-list{background:rgba(255,255,255,.15);color:#fff;padding:.7rem 1.8rem;border:1px solid #333;border-radius:var(--radius);font-weight:600;cursor:pointer;transition:.2s}
.btn-list:hover{background:rgba(255,255,255,.25)}

/* Quick Links */
.quick-links{display:flex;gap:1rem;padding:1.5rem 2rem;overflow-x:auto;scrollbar-width:none}
.quick-links::-webkit-scrollbar{display:none}
.quick-link{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:.8rem 1.2rem;background:var(--card);border:1px solid #222;border-radius:var(--radius);transition:.2s;min-width:100px}
.quick-link:hover{border-color:var(--primary);transform:translateY(-2px)}
.quick-link i{font-size:1.5rem;color:var(--primary)}
.quick-link span{font-size:.85rem;font-weight:500}

/* Content Rails */
.content-section{padding:1rem 2rem}
.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
.section-title{font-size:1.2rem;font-weight:700}
.section-title .gold{color:var(--primary)}
.see-all{color:var(--muted);font-size:.85rem}
.see-all:hover{color:var(--primary)}
.content-rail{display:flex;gap:.8rem;overflow-x:auto;scrollbar-width:none;padding-bottom:.5rem}
.content-rail::-webkit-scrollbar{display:none}
.content-rail.vertical{flex-direction:row;flex-wrap:wrap;justify-content:center}

/* Content Cards */
.content-card{flex-shrink:0;width:160px;cursor:pointer;transition:.2s}
.content-card:hover{transform:translateY(-4px)}
.content-card .poster{width:160px;height:240px;border-radius:var(--radius);overflow:hidden;background:var(--card);position:relative}
.content-card .poster img{width:100%;height:100%;object-fit:cover}
.content-card .badge{position:absolute;top:.4rem;right:.4rem;background:var(--primary);color:#000;padding:.15rem .4rem;border-radius:4px;font-size:.65rem;font-weight:700}
.content-card .badge.premium{background:var(--primary)}
.content-card .badge.free{background:var(--success)}
.content-card .badge.live{background:var(--live)}
.content-card .title{font-size:.85rem;font-weight:600;margin-top:.4rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.content-card .meta{font-size:.75rem;color:var(--muted2)}
.content-card.vertical{width:140px}
.content-card.vertical .poster{width:140px;height:250px}

/* Continue Watching Card */
.cw-card{flex-shrink:0;width:280px}
.cw-card .thumb{width:280px;height:158px;border-radius:var(--radius);overflow:hidden;position:relative;background:var(--card)}
.cw-card .thumb img{width:100%;height:100%;object-fit:cover}
.cw-card .play-overlay{position:absolute;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;opacity:0;transition:.2s}
.cw-card:hover .play-overlay{opacity:1}
.cw-card .play-overlay i{font-size:2rem;color:var(--primary)}
.cw-card .progress-bar{position:absolute;bottom:0;left:0;right:0;height:3px;background:#333}
.cw-card .progress-bar .fill{height:100%;background:var(--primary)}
.cw-card .title{font-size:.85rem;font-weight:600;margin-top:.4rem}
.cw-card .meta{font-size:.75rem;color:var(--muted2)}

/* Premium Banner */
.premium-banner{margin:1.5rem 2rem;padding:2rem;background:linear-gradient(135deg,#1a1a1a,#0D0D0D);border:1px solid var(--primary);border-radius:var(--radius);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.premium-banner h3{color:var(--primary);font-size:1.5rem}
.premium-banner p{color:var(--muted);margin:.5rem 0}
.premium-banner .btn-subscribe{padding:.7rem 2rem;font-size:1rem}

/* Search */
.search-page{padding:2rem;max-width:900px;margin:0 auto}
.search-bar{display:flex;align-items:center;gap:.8rem;background:var(--input);border:1px solid #333;border-radius:var(--radius);padding:.6rem 1rem;margin-bottom:1.5rem}
.search-bar input{flex:1;background:transparent;border:none;color:var(--text);font-size:1rem}
.search-bar input:focus{outline:none}
.search-bar i{font-size:1.2rem}
.search-bar input:focus{outline:none;border-color:var(--primary)}

/* Detail Page */
.detail-hero{position:relative;height:55vh;min-height:350px;overflow:hidden;border-radius:0 0 24px 24px}
.detail-back{position:absolute;top:1.2rem;left:1.2rem;width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.3rem;z-index:10;backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.1)}
.detail-back:hover{color:var(--primary)}
.detail-hero img{width:100%;height:100%;object-fit:cover}
.detail-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,5,5,.3) 0%,rgba(5,5,5,.9) 80%,var(--bg) 100%)}
.detail-content{position:relative;margin-top:-120px;padding:0 2rem;max-width:900px}
.detail-poster{width:180px;height:270px;border-radius:var(--radius);overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.5)}
.detail-info h1{font-size:2rem;font-weight:800;margin-bottom:.5rem}
.detail-meta{display:flex;gap:1rem;color:var(--muted);font-size:.9rem;margin-bottom:1rem}
.detail-meta .badge{padding:.2rem .5rem;border-radius:4px;font-size:.75rem}
.detail-actions{display:flex;gap:.8rem;margin-bottom:1.5rem}
.detail-desc{color:var(--muted);line-height:1.6;margin-bottom:1.5rem}
.cast-section{margin-top:1.5rem}
.cast-list{display:flex;gap:1rem;overflow-x:auto;scrollbar-width:none;padding-bottom:.5rem}
.cast-item{text-align:center;flex-shrink:0;width:100px}
.cast-item img{width:80px;height:80px;border-radius:50%;object-fit:cover;margin:0 auto .3rem}
.cast-item .name{font-size:.8rem;font-weight:600}
.cast-item .char{font-size:.7rem;color:var(--muted2)}

/* Player */
.player-page{background:#000;min-height:100vh;display:flex;flex-direction:column}
.player-container{flex:1;display:flex;align-items:center;justify-content:center}
.player-video{width:100%;max-height:80vh;background:#000}
.player-controls{padding:1rem 2rem;display:flex;align-items:center;gap:1rem;color:#fff}
.player-controls button{background:none;border:none;color:#fff;font-size:1.2rem;cursor:pointer;padding:.5rem}
.player-progress{flex:1;height:4px;background:#333;border-radius:2px;position:relative;cursor:pointer}
.player-progress .fill{height:100%;background:var(--primary);border-radius:2px}

/* Profile */
.profile-page{padding:2rem;max-width:800px;margin:0 auto}
.profile-header{display:flex;align-items:center;gap:1.5rem;margin-bottom:2rem}
.profile-header img{width:80px;height:80px;border-radius:50%}
.profile-header h2{font-size:1.5rem}
.profile-header .sub{color:var(--muted)}
.profile-menu a{display:flex;align-items:center;justify-content:space-between;padding:1rem;background:var(--card);border:1px solid #222;border-radius:var(--radius);margin-bottom:.5rem;color:var(--text);transition:.2s}
.profile-menu a:hover{border-color:var(--primary)}
.profile-menu a i{color:var(--muted)}

/* Subscription */
.plans-page{padding:2rem;max-width:1000px;margin:0 auto}
.plans-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;margin-top:1.5rem}
.plan-card{background:var(--card);border:1px solid #222;border-radius:var(--radius);padding:2rem;text-align:center;transition:.2s}
.plan-card:hover{border-color:var(--primary)}
.plan-card.featured{border-color:var(--primary)}
.plan-card h3{font-size:1.3rem;margin-bottom:.5rem}
.plan-card .price{font-size:2rem;font-weight:800;color:var(--primary);margin:1rem 0}
.plan-card .price small{font-size:.9rem;color:var(--muted);font-weight:400}
.plan-card ul{list-style:none;text-align:left;margin:1rem 0}
.plan-card ul li{padding:.3rem 0;color:var(--muted);font-size:.9rem}
.plan-card ul li::before{content:"✓";color:var(--success);margin-right:.5rem}

/* Login/Register */
.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem}
.auth-box{background:var(--card);border:1px solid #222;border-radius:var(--radius);padding:2.5rem;width:100%;max-width:400px}
.auth-box h1{color:var(--primary);text-align:center;margin-bottom:.5rem}
.auth-box p{text-align:center;color:var(--muted);margin-bottom:1.5rem}
.form-group{margin-bottom:1rem}
.form-group label{display:block;color:var(--muted);font-size:.85rem;margin-bottom:.3rem}
.form-group input{width:100%;background:var(--input);border:1px solid #333;color:var(--text);padding:.7rem;border-radius:var(--radius)}
.form-group input:focus{outline:none;border-color:var(--primary)}
.btn-submit{width:100%;background:var(--primary);color:#000;border:none;padding:.7rem;border-radius:var(--radius);font-weight:700;font-size:1rem;cursor:pointer;margin-top:.5rem}
.btn-submit:hover{background:var(--secondary)}

/* Placeholder color - dull white for dark backgrounds */
.form-control::placeholder,.form-group input::placeholder,.search-bar input::placeholder,input::placeholder,textarea::placeholder{color:#9a9a9a;opacity:1}
.form-control::-webkit-input-placeholder,.form-group input::-webkit-input-placeholder,.search-bar input::-webkit-input-placeholder,input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:#9a9a9a;opacity:1}
.form-control::-moz-placeholder,.form-group input::-moz-placeholder,.search-bar input::-moz-placeholder,input::-moz-placeholder,textarea::-moz-placeholder{color:#9a9a9a;opacity:1}
.form-control:-ms-input-placeholder,.form-group input:-ms-input-placeholder,.search-bar input:-ms-input-placeholder,input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:#9a9a9a;opacity:1}

/* Bottom Nav (Mobile) */
.bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;background:rgba(5,5,5,.98);backdrop-filter:blur(10px);border-top:1px solid #1a1a1a;justify-content:space-around;padding:.5rem 0;z-index:100}
.bn-item{display:flex;flex-direction:column;align-items:center;gap:.2rem;color:var(--muted2);font-size:.7rem;transition:.2s}
.bn-item.active,.bn-item:hover{color:var(--primary)}
.bn-item i{font-size:1.3rem}

/* Mobile menu button - hidden on desktop */
.mobile-menu-btn{display:none;background:none;border:none;color:#fff;font-size:1.5rem;cursor:pointer;padding:.3rem}

/* Mobile slide-out nav */
.mobile-nav{position:fixed;top:0;left:-280px;width:280px;height:100vh;background:#0A0A0A;border-right:1px solid #222;z-index:200;transition:left .3s ease;overflow-y:auto;padding:0}
body.nav-open .mobile-nav{left:0}
body.nav-open .mobile-nav-overlay{display:block}
.mobile-nav-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:150}
.mobile-nav-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.2rem;border-bottom:1px solid #222}
.mobile-nav-header .brand{font-size:1.2rem;font-weight:800;color:var(--primary)}
.mobile-nav-close{background:none;border:none;color:#fff;font-size:1.2rem;cursor:pointer;padding:.3rem}
.mobile-nav-links{display:flex;flex-direction:column;padding:.5rem 0}
.mn-link{display:flex;align-items:center;gap:.8rem;padding:.9rem 1.2rem;color:var(--text);font-size:.95rem;font-weight:500;transition:.2s;border-left:3px solid transparent}
.mn-link:hover,.mn-link.active{background:rgba(255,184,0,.08);color:var(--primary);border-left-color:var(--primary)}
.mn-link i{font-size:1.2rem;color:var(--muted);width:24px;text-align:center}
.mn-link.active i,.mn-link:hover i{color:var(--primary)}
.mn-cta{color:var(--primary);font-weight:700;margin-top:.5rem;border-top:1px solid #222;padding-top:1.2rem}

/* Responsive */
@media(max-width:768px){
  .desktop-nav{padding:.6rem 1rem;justify-content:space-between}
  .nav-left{gap:.8rem}
  .nav-left .nav-link{display:none}
  .nav-right .nav-link:not(:last-child),.nav-right .profile-link span,.nav-right .btn-subscribe{display:none}
  .mobile-menu-btn{display:block}
  .hero-content{padding:0 1rem}
  .hero-content h1{font-size:1.5rem}
  .content-section{padding:1rem}
  .content-card{width:130px}
  .content-card .poster{width:130px;height:195px}
  .premium-banner{margin:1rem;padding:1.5rem}
  .bottom-nav{display:flex}
  .page-content{padding-bottom:70px}
  .detail-content{margin-top:-80px;padding:0 1rem}
  .detail-poster{width:120px;height:180px}
  .search-page,.profile-page,.plans-page{padding:1rem}
}
@media(min-width:769px){.bottom-nav{display:none}}

/* ============================================================
   Image 1 / Image 2 - Premium OTT UI Enhancements
   ============================================================ */

/* Top nav bar */
.desktop-nav .brand{display:flex;align-items:center;gap:.5rem}
.desktop-nav .brand img{height:34px}

/* Hero banner - Image 1 style */
.hero-banner{position:relative;height:70vh;min-height:450px;max-height:700px;overflow:hidden;border-radius:0 0 24px 24px;margin-bottom:1rem}
.hero-banner img{width:100%;height:100%;object-fit:cover}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,5,5,.95) 0%,rgba(5,5,5,.6) 45%,transparent 100%),linear-gradient(0deg,rgba(5,5,5,1) 0%,transparent 40%);display:flex;align-items:center}
.hero-content{padding:0 3.5rem;max-width:550px;display:flex;flex-direction:column;justify-content:center;height:100%}
.hero-content .welcome-label{font-size:.9rem;font-weight:600;color:#fff;text-transform:uppercase;letter-spacing:.15em;margin-bottom:.6rem}
.hero-content h1{font-size:3.2rem;font-weight:900;color:var(--primary);line-height:1.1;margin-bottom:1rem;text-transform:uppercase}
.hero-content p{color:var(--muted);font-size:1.05rem;margin-bottom:2rem;line-height:1.5}
.hero-content .btn-watch{display:inline-flex;align-items:center;gap:.5rem;background:var(--primary);color:#000;padding:.85rem 2rem;border:none;border-radius:var(--radius);font-weight:700;font-size:1rem;cursor:pointer;transition:.2s;width:fit-content}
.hero-content .btn-watch:hover{background:var(--secondary)}

/* Hero dots */
.hero-dots{display:flex;gap:.4rem;position:absolute;bottom:2rem;left:50%;transform:translateX(-50%)}
.hero-dots span{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.3);cursor:pointer}
.hero-dots span.active{background:var(--primary)}

/* Quick links - Image 1 */
.quick-links{display:flex;gap:1rem;padding:1.2rem 1.5rem;overflow-x:auto;scrollbar-width:none;margin:0 0 .5rem;-webkit-overflow-scrolling:touch}
.quick-link{flex-shrink:0;display:flex;align-items:center;gap:.75rem;padding:.7rem 1rem;background:linear-gradient(135deg,#1a1a1a,#0f0f0f);border:1px solid #262626;border-radius:16px;transition:.2s;min-width:150px}
.quick-link:hover{border-color:var(--primary)}
.quick-link .ql-icon{width:40px;height:40px;border-radius:12px;background:rgba(255,184,0,.12);display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:var(--primary)}
.quick-link .ql-text{text-align:left}
.quick-link .ql-text strong{display:block;font-size:.9rem;font-weight:600;color:#fff}
.quick-link .ql-text small{display:block;font-size:.7rem;color:var(--muted2);margin-top:.1rem}

/* Section headers - Image 1 */
.content-section{padding:1.2rem 1.5rem}
.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
.section-title{display:flex;align-items:center;gap:.5rem;font-size:1.1rem;font-weight:700;color:#fff}
.section-title::before{content:"";width:4px;height:22px;background:var(--primary);border-radius:2px}
.see-all{display:flex;align-items:center;gap:.25rem;color:var(--muted);font-size:.8rem;font-weight:500}
.see-all:hover{color:var(--primary)}
.see-all i{font-size:.8rem}

/* Content cards */
.content-rail{display:flex;gap:.9rem;overflow-x:auto;scrollbar-width:none;padding-bottom:.5rem;-webkit-overflow-scrolling:touch}
.content-rail::-webkit-scrollbar{display:none}
.content-card{flex-shrink:0;width:150px;cursor:pointer;transition:.2s}
.content-card:hover{transform:scale(1.03)}
.content-card .poster{width:150px;height:225px;border-radius:14px;overflow:hidden;background:var(--card);position:relative;box-shadow:0 4px 15px rgba(0,0,0,.4)}
.content-card .poster img{width:100%;height:100%;object-fit:cover}
.content-card .badge{position:absolute;top:.5rem;right:.5rem;background:var(--primary);color:#000;padding:.15rem .45rem;border-radius:6px;font-size:.65rem;font-weight:700}
.content-card .title{font-size:.85rem;font-weight:600;margin-top:.6rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.content-card .meta{font-size:.75rem;color:var(--muted2);margin-top:.15rem}

/* Live TV rail */
.live-rail{display:flex;gap:1rem;overflow-x:auto;scrollbar-width:none;padding-bottom:.5rem;-webkit-overflow-scrolling:touch;white-space:nowrap}
.live-rail::-webkit-scrollbar{display:none}
.live-rail .live-card{flex-shrink:0}

/* Live TV channel cards */
.live-card{flex-shrink:0;width:110px;text-align:center;cursor:pointer;transition:.2s}
.live-card:hover{transform:scale(1.05)}
.live-card .logo-wrap{width:110px;height:110px;border-radius:18px;background:var(--card);border:1px solid #222;display:flex;align-items:center;justify-content:center;padding:1rem;position:relative;overflow:hidden}
.live-card .logo-wrap img{width:100%;height:100%;object-fit:contain}
.live-card .live-dot{position:absolute;bottom:.6rem;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:.35rem;background:rgba(0,0,0,.75);padding:.2rem .5rem;border-radius:10px;font-size:.65rem;font-weight:700;color:#fff}
.live-card .live-dot::before{content:"";width:7px;height:7px;background:#FF2D2D;border-radius:50%;animation:pulse 1.5s infinite}
.live-card .name{font-size:.8rem;font-weight:500;margin-top:.5rem}
@keyframes pulse{0%{opacity:1}50%{opacity:.5}100%{opacity:1}}

/* Continue watching cards */
.cw-card{flex-shrink:0;width:260px;cursor:pointer;transition:.2s}
.cw-card:hover{transform:scale(1.02)}
.cw-card .thumb{width:260px;height:150px;border-radius:14px;overflow:hidden;position:relative;background:var(--card)}
.cw-card .thumb img{width:100%;height:100%;object-fit:cover}
.cw-card .play-overlay{position:absolute;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;opacity:1}
.cw-card .play-overlay i{width:48px;height:48px;border-radius:50%;background:rgba(255,184,0,.9);color:#000;display:flex;align-items:center;justify-content:center;font-size:1.4rem}
.cw-card .progress-bar{position:absolute;bottom:0;left:0;right:0;height:4px;background:#333}
.cw-card .progress-bar .fill{height:100%;background:var(--primary)}
.cw-card .title{font-size:.85rem;font-weight:600;margin-top:.5rem}
.cw-card .meta{font-size:.75rem;color:var(--muted2);margin-top:.15rem}

/* Premium banner - Image 1 bottom */
.premium-banner{margin:1.2rem 1.5rem;padding:1.2rem 1.5rem;background:linear-gradient(135deg,var(--primary),#D99600);border-radius:18px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;color:#000}
.premium-banner .left{display:flex;align-items:center;gap:1rem}
.premium-banner .left i{font-size:2.2rem}
.premium-banner h3{color:#000;font-size:1.2rem;margin:0}
.premium-banner p{color:rgba(0,0,0,.7);font-size:.8rem;margin:.2rem 0 0}
.premium-banner .btn-subscribe{background:#000;color:var(--primary);padding:.65rem 1.5rem;border-radius:var(--radius);font-weight:700;font-size:.9rem}
.premium-banner .btn-subscribe:hover{background:#1a1a1a}

/* Category page hero (Image 2) */
.category-hero{height:55vh;min-height:350px;max-height:550px;background-size:cover;background-position:center;position:relative;border-radius:0 0 24px 24px;margin-bottom:1.5rem}
.category-hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,5,5,.95) 0%,rgba(5,5,5,.6) 50%,transparent 100%),linear-gradient(0deg,rgba(5,5,5,1) 0%,transparent 40%);display:flex;flex-direction:column;justify-content:center;padding:0 3rem;max-width:600px}
.category-hero-overlay .small-label{font-size:.8rem;font-weight:600;color:var(--primary);letter-spacing:.1em;margin-bottom:.5rem}
.category-hero-overlay h1{font-size:2.8rem;font-weight:900;color:#fff;line-height:1.1;margin-bottom:1rem}
.category-hero-overlay p{color:var(--muted);font-size:1rem;margin-bottom:1.5rem;max-width:400px}

/* Category chips (Image 2) */
.category-chips{display:flex;gap:.7rem;overflow-x:auto;scrollbar-width:none;padding-bottom:.5rem;-webkit-overflow-scrolling:touch}
.category-chips::-webkit-scrollbar{display:none}
.chip{flex-shrink:0;padding:.5rem 1.2rem;background:var(--card);border:1px solid #222;border-radius:20px;font-size:.85rem;color:var(--text);transition:.2s;white-space:nowrap}
.chip:hover,.chip.active{background:var(--primary);color:#000;border-color:var(--primary);font-weight:600}

/* Bottom nav - Image 1 */
.bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;background:#080808;border-top:1px solid #1a1a1a;justify-content:space-around;padding:.55rem 0 .5rem;z-index:100;padding-bottom:calc(.5rem + env(safe-area-inset-bottom,0))}
.bn-item{display:flex;flex-direction:column;align-items:center;gap:.2rem;color:var(--muted2);font-size:.65rem;transition:.2s;text-decoration:none;flex:1;min-width:0;padding:.2rem}
.bn-item.active,.bn-item:hover{color:var(--primary)}
.bn-item i{font-size:1.25rem}
.bn-item span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

/* ============================================================
   MOBILE OPTIMIZATION - All breakpoints
   ============================================================ */

/* Tablet (768px and below) */
@media(max-width:768px){
  /* Nav */
  .desktop-nav{padding:.6rem 1rem;justify-content:space-between;align-items:center}
  .nav-left{gap:.8rem;align-items:center}
  .nav-left .nav-link{display:none}
  .nav-right{gap:.5rem;align-items:center}
  .nav-right .nav-link:not(.profile-link){display:none}
  .nav-right .profile-link span{display:none}
  .nav-right .btn-subscribe{display:none}
  .mobile-menu-btn{display:block;font-size:1.4rem}
  .brand{font-size:1.1rem}

  /* Hero */
  .hero-banner{height:50vh;min-height:300px;border-radius:0 0 16px 16px;margin-bottom:.5rem}
  .hero-content{padding:0 1.2rem;max-width:100%}
  .hero-content .welcome-label{font-size:.75rem;letter-spacing:.1em}
  .hero-content h1{font-size:2rem;margin-bottom:.5rem}
  .hero-content p{font-size:.9rem;margin-bottom:1.2rem}
  .hero-content .btn-watch{padding:.7rem 1.5rem;font-size:.9rem}
  .hero-dots{bottom:1rem}

  /* Quick links */
  .quick-links{padding:1rem;gap:.7rem}
  .quick-link{min-width:130px;padding:.6rem .85rem;gap:.6rem}
  .quick-link .ql-icon{width:34px;height:34px;font-size:1rem}
  .quick-link .ql-text strong{font-size:.82rem}
  .quick-link .ql-text small{font-size:.65rem}

  /* Content sections */
  .content-section{padding:1rem}
  .section-header{margin-bottom:.8rem}
  .section-title{font-size:1rem}
  .section-title::before{height:18px}
  .see-all{font-size:.75rem}

  /* Content cards */
  .content-rail{gap:.7rem}
  .content-card{width:120px}
  .content-card .poster{width:120px;height:180px;border-radius:10px}
  .content-card .title{font-size:.8rem;margin-top:.4rem}
  .content-card .meta{font-size:.7rem}
  .content-card .badge{font-size:.6rem;padding:.1rem .35rem}

  /* Live cards */
  .live-card{width:90px}
  .live-card .logo-wrap{width:90px;height:90px;border-radius:14px;padding:.6rem}
  .live-card .name{font-size:.72rem;margin-top:.3rem}
  .live-card .live-dot{font-size:.58rem;padding:.15rem .4rem}

  /* Continue watching */
  .cw-card{width:200px}
  .cw-card .thumb{width:200px;height:115px;border-radius:10px}
  .cw-card .play-overlay i{width:40px;height:40px;font-size:1.1rem}
  .cw-card .title{font-size:.8rem}
  .cw-card .meta{font-size:.7rem}

  /* Premium banner */
  .premium-banner{margin:1rem;padding:1rem 1.2rem;border-radius:14px;gap:.8rem}
  .premium-banner .left{gap:.7rem}
  .premium-banner .left i{font-size:1.8rem}
  .premium-banner h3{font-size:1rem}
  .premium-banner p{font-size:.75rem}
  .premium-banner .btn-subscribe{padding:.55rem 1.2rem;font-size:.85rem}

  /* Category hero */
  .category-hero{height:40vh;min-height:260px;border-radius:0 0 16px 16px;margin-bottom:1rem}
  .category-hero-overlay{padding:0 1.2rem;max-width:100%}
  .category-hero-overlay .small-label{font-size:.72rem}
  .category-hero-overlay h1{font-size:1.8rem;margin-bottom:.5rem}
  .category-hero-overlay p{font-size:.85rem;margin-bottom:1rem;max-width:100%}

  /* Category chips */
  .category-chips{gap:.5rem}
  .chip{padding:.4rem 1rem;font-size:.8rem}

  /* Detail page */
  .detail-hero{height:40vh;min-height:240px;border-radius:0 0 16px 16px}
  .detail-back{top:.8rem;left:.8rem;width:36px;height:36px;font-size:1.1rem}
  .detail-content{margin-top:-60px;padding:0 1rem}
  .detail-poster{width:100px;height:150px;border-radius:10px}
  .detail-info h1{font-size:1.4rem}
  .detail-meta{gap:.5rem;font-size:.8rem;flex-wrap:wrap}
  .detail-actions{flex-wrap:wrap;gap:.5rem}
  .detail-actions .btn-watch,.detail-actions .btn-list{padding:.6rem 1.2rem;font-size:.9rem}
  .detail-desc{font-size:.9rem}
  .cast-item{width:80px}
  .cast-item img{width:64px;height:64px}

  /* Player */
  .player-controls{padding:.8rem 1rem;gap:.6rem;flex-wrap:wrap}
  .player-controls button{font-size:1rem;padding:.4rem}
  .player-progress{order:5;flex-basis:100%;margin-top:.5rem}
  .player-video{max-height:50vh}

  /* Search */
  .search-page{padding:1rem}
  .search-bar{padding:.5rem .8rem;margin-bottom:1rem}
  .search-bar input{font-size:.95rem}

  /* Profile */
  .profile-page{padding:1rem}
  .profile-header{flex-direction:column;text-align:center;gap:1rem}
  .profile-header img{width:64px;height:64px}
  .profile-header h2{font-size:1.3rem}
  .profile-menu a{padding:.9rem 1rem;font-size:.95rem}

  /* Plans */
  .plans-page{padding:1rem}
  .plans-grid{grid-template-columns:1fr;gap:1rem}
  .plan-card{padding:1.5rem}
  .plan-card .price{font-size:1.8rem}
  .plan-card.featured{max-width:100%!important;margin:0!important}

  /* Auth */
  .auth-page{padding:1rem}
  .auth-box{padding:1.5rem}
  .auth-box h1{font-size:1.5rem}
  .form-group input{padding:.7rem;font-size:.95rem}

  /* Bottom nav */
  .bottom-nav{display:flex}
  .page-content{padding-bottom:calc(65px + env(safe-area-inset-bottom,0))}

  /* Modals */
  .modal-dialog{margin:.5rem}
  .modal-body{padding:1rem}

  /* News breaking items - stack on mobile */
  .content-rail[style*="flex-direction:column"] > div{flex-direction:column!important;text-align:center;gap:.6rem!important}
  .content-rail[style*="flex-direction:column"] > div > div:first-child{width:100%!important;height:140px!important}
  .content-rail[style*="flex-direction:column"] > div > div:last-child{width:100%!important}

  /* Downloads list items - optimize for mobile */
  .content-section > div[style*="flex-direction:column"] > div[style*="display:flex"]{padding:.8rem!important;gap:.7rem!important}
  .content-section > div[style*="flex-direction:column"] > div[style*="display:flex"] > div:first-child{width:100px!important;height:65px!important}
  .content-section > div[style*="flex-direction:column"] > div[style*="display:flex"] > div:nth-child(2) > div:first-child{font-size:.9rem!important}
  .content-section > div[style*="flex-direction:column"] > div[style*="display:flex"] > i:last-child{font-size:1.2rem!important}
}

/* Small phones (480px and below) */

/* Small phones (480px and below) */
@media(max-width:480px){
  /* Hero */
  .hero-banner{height:45vh;min-height:260px}
  .hero-content h1{font-size:1.6rem}
  .hero-content p{font-size:.82rem;margin-bottom:1rem;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
  .hero-content .btn-watch{padding:.6rem 1.3rem;font-size:.85rem}

  /* Quick links */
  .quick-link{min-width:120px;padding:.5rem .7rem}
  .quick-link .ql-icon{width:30px;height:30px;font-size:.9rem}
  .quick-link .ql-text strong{font-size:.78rem}

  /* Content cards - smaller */
  .content-card{width:100px}
  .content-card .poster{width:100px;height:150px;border-radius:8px}
  .content-card .title{font-size:.75rem}
  .content-card .meta{font-size:.65rem}

  /* Live cards - smaller */
  .live-card{width:80px}
  .live-card .logo-wrap{width:80px;height:80px;border-radius:12px}

  /* CW cards */
  .cw-card{width:160px}
  .cw-card .thumb{width:160px;height:92px}

  /* Category hero */
  .category-hero{height:35vh;min-height:220px}
  .category-hero-overlay h1{font-size:1.5rem}

  /* Detail */
  .detail-info h1{font-size:1.2rem}
  .detail-poster{width:90px;height:135px}

  /* Premium banner - stack on small */
  .premium-banner{flex-direction:column;text-align:center}
  .premium-banner .left{flex-direction:column;text-align:center}

  /* Plans */
  .plan-card{padding:1.2rem}
  .plan-card .price{font-size:1.5rem}

  /* Auth */
  .auth-box{padding:1.2rem}
  .auth-box h1{font-size:1.3rem}

  /* Bottom nav - smaller text */
  .bn-item{font-size:.6rem}
  .bn-item i{font-size:1.1rem}

  /* Section headers */
  .section-title{font-size:.95rem}
  .see-all{font-size:.7rem}
}

/* Extra small phones (360px and below) */
@media(max-width:360px){
  .hero-content h1{font-size:1.4rem}
  .content-card{width:90px}
  .content-card .poster{width:90px;height:135px}
  .live-card{width:72px}
  .live-card .logo-wrap{width:72px;height:72px}
  .cw-card{width:140px}
  .cw-card .thumb{width:140px;height:80px}
  .category-hero-overlay h1{font-size:1.3rem}
  .bn-item span{font-size:.55rem}
}

/* Landscape phones - optimize height */
@media(max-width:768px) and (orientation:landscape){
  .hero-banner{height:60vh;min-height:200px}
  .category-hero{height:50vh;min-height:180px}
  .detail-hero{height:50vh;min-height:180px}
}

/* Touch device optimizations */
@media(hover:none) and (pointer:coarse){
  .content-card:hover,.live-card:hover,.cw-card:hover{transform:none}
  .quick-link:hover{border-color:#262626}
  .btn-watch:hover,.btn-subscribe:hover,.btn-submit:hover{transform:none}
}

/* Desktop - hide mobile elements */
@media(min-width:769px){
  .bottom-nav{display:none}
  .mobile-menu-btn{display:none}
  .mobile-nav,.mobile-nav-overlay{display:none!important}
  body.nav-open .mobile-nav{left:-280px}
}

/* Print */
@media print{
  .desktop-nav,.bottom-nav,.mobile-nav,.mobile-nav-overlay,.premium-banner{display:none!important}
  .hero-banner,.category-hero{height:auto;max-height:300px}
}