/* ============================================
   extraTV – Premium Netflix-Quality UI
   Font: Outfit  |  Base: #000  |  Accent: #e50914
   ============================================ */

:root {
  --bg: #000;
  --bg1: #0a0a0a;
  --bg2: #141414;
  --bg3: #1a1a1a;
  --bg4: #222;
  --card: #181818;
  --text: #fff;
  --text2: #b3b3b3;
  --text3: #777;
  --accent: #e50914;
  --accent2: #ff1a25;
  --glass: rgba(20,20,20,.75);
  --radius: 6px;
  --radius-lg: 12px;
  --shadow: 0 8px 30px rgba(0,0,0,.7);
  --font: 'Outfit', system-ui, -apple-system, sans-serif;
  --topbar-h: 60px;
  --transition: .25s cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:17px;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--text);overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit;text-decoration:none}
button{font-family:var(--font);cursor:pointer;border:0;background:none;color:var(--text)}
input{font-family:var(--font);color:var(--text)}
img{display:block;max-width:100%}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#333;border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:#555}

/* ─── HTTPS Warning ─── */
#https-warning{display:none;position:fixed;inset:0;z-index:9999;background:var(--bg);align-items:center;justify-content:center}
.https-card{text-align:center;max-width:380px;padding:40px}
.https-icon{margin:0 auto 20px}
.https-card h1{font-size:1.5rem;font-weight:700;margin-bottom:12px}
.https-card p{color:var(--text2);margin-bottom:24px;line-height:1.5}
.btn-accent{background:var(--accent);color:#fff;padding:12px 36px;border-radius:var(--radius);font-size:.95rem;font-weight:600;transition:background var(--transition)}
.btn-accent:hover{background:var(--accent2)}

/* ─── Login Screen ─── */
#login-screen{position:fixed;inset:0;z-index:1000;display:flex}
.login-scene{position:relative;width:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#000}
.login-ambient{position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(229,9,20,.15),transparent 70%);top:-100px;left:-100px;animation:ambFloat 12s ease-in-out infinite alternate;filter:blur(80px);pointer-events:none}
.login-ambient-2{position:absolute;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(229,9,20,.1),transparent 70%);bottom:-150px;right:-100px;animation:ambFloat 15s ease-in-out infinite alternate-reverse;filter:blur(100px);pointer-events:none}
@keyframes ambFloat{0%{transform:translate(0,0) scale(1)}100%{transform:translate(60px,40px) scale(1.15)}}
.login-center{position:relative;z-index:1;text-align:center;width:100%;max-width:380px;padding:20px}
.login-brand{margin-bottom:40px}
.brand-e{font-size:2.2rem;font-weight:800;color:#fff;letter-spacing:-.02em}
.brand-t{font-size:2.2rem;font-weight:800;color:var(--accent);letter-spacing:-.02em}
.login-box{background:rgba(20,20,20,.65);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius-lg);padding:36px 32px 28px;text-align:left}
.login-box h2{font-size:1.35rem;font-weight:700;margin-bottom:6px}
.login-sub{color:var(--text3);font-size:.85rem;margin-bottom:26px}
.field{position:relative;margin-bottom:20px}
.field input{width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:14px 16px;font-size:.95rem;color:#fff;outline:none;transition:all var(--transition)}
.field input:focus{border-color:var(--accent);background:rgba(255,255,255,.08)}
.field input::placeholder{color:#666}
.field-line{position:absolute;bottom:0;left:50%;width:0;height:2px;background:var(--accent);transition:all .35s ease;border-radius:1px}
.field input:focus ~ .field-line{left:0;width:100%}
.remember{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--text3);cursor:pointer;margin-bottom:24px;user-select:none}
.remember input{display:none}
.remember-check{width:16px;height:16px;border:1.5px solid #555;border-radius:3px;position:relative;flex-shrink:0;transition:all var(--transition)}
.remember input:checked ~ .remember-check{background:var(--accent);border-color:var(--accent)}
.remember input:checked ~ .remember-check::after{content:'';position:absolute;top:2px;left:5px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.btn-login{width:100%;padding:14px;background:var(--accent);color:#fff;font-size:.95rem;font-weight:600;border-radius:var(--radius);transition:all var(--transition);position:relative;overflow:hidden}
.btn-login:hover{background:var(--accent2);transform:translateY(-1px);box-shadow:0 6px 20px rgba(229,9,20,.35)}
.btn-login:active{transform:translateY(0)}
.btn-login.loading .btn-label{opacity:0}
.btn-login.loading .btn-spinner{opacity:1}
.btn-label{transition:opacity .2s}
.btn-spinner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s}
.btn-spinner::after{content:'';width:20px;height:20px;border:2.5px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.login-error{color:#ef4444;font-size:.82rem;margin-top:16px;min-height:20px;text-align:center;opacity:0;transition:opacity .3s}
.login-error.show{opacity:1}
.login-footer{margin-top:40px;font-size:.72rem;color:#444}

/* ─── Top Bar ─── */
#topbar{position:fixed;top:0;left:0;right:0;height:var(--topbar-h);z-index:100;display:flex;align-items:center;justify-content:space-between;padding:0 4%;background:linear-gradient(180deg,rgba(0,0,0,.85) 0%,transparent 100%);transition:background .4s}
#topbar.scrolled{background:rgba(10,10,10,.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.tb-left,.tb-right{display:flex;align-items:center;gap:24px}
.tb-brand{cursor:pointer;flex-shrink:0}
.tb-brand .brand-e{font-size:1.4rem}
.tb-brand .brand-t{font-size:1.4rem}
.tb-nav{display:flex;gap:4px}
.tb-link{padding:8px 14px;font-size:.85rem;font-weight:500;color:var(--text2);border-radius:var(--radius);transition:all var(--transition);position:relative}
.tb-link:hover{color:#fff}
.tb-link.active{color:#fff;font-weight:600}
.tb-link.active::after{content:'';position:absolute;bottom:2px;left:50%;transform:translateX(-50%);width:16px;height:2px;background:var(--accent);border-radius:1px}

/* Search */
.tb-search{position:relative;display:flex;align-items:center}
.tb-search-btn{color:var(--text2);transition:color var(--transition);padding:6px}
.tb-search-btn:hover{color:#fff}
.tb-search-input{width:0;opacity:0;padding:0;border:0;background:rgba(255,255,255,.08);border-radius:var(--radius);font-size:.88rem;transition:all .35s ease;outline:none}
.tb-search.open .tb-search-input{width:220px;opacity:1;padding:8px 34px 8px 12px;border:1px solid rgba(255,255,255,.12)}
.tb-search.open .tb-search-input:focus{border-color:var(--accent)}
.tb-search-x{position:absolute;right:4px;display:none;padding:4px;color:var(--text3)}
.tb-search.open .tb-search-x{display:flex}

/* Profile */
.tb-profile{position:relative}
.tb-avatar{width:32px;height:32px;border-radius:var(--radius);background:linear-gradient(135deg,var(--accent),#b20710);display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;cursor:pointer;transition:transform var(--transition)}
.tb-avatar:hover{transform:scale(1.08)}
.tb-dropdown{position:absolute;top:44px;right:0;width:180px;background:var(--bg2);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:10px 0;opacity:0;pointer-events:none;transform:translateY(-8px);transition:all .25s ease;box-shadow:var(--shadow)}
.tb-profile.open .tb-dropdown{opacity:1;pointer-events:auto;transform:translateY(0)}
.dd-user{padding:10px 16px;font-size:.82rem;color:var(--text2)}
.dd-sep{border:0;border-top:1px solid rgba(255,255,255,.06);margin:4px 0}
.dd-item{width:100%;text-align:left;padding:10px 16px;font-size:.85rem;color:var(--text2);transition:all var(--transition)}
.dd-item:hover{background:rgba(255,255,255,.06);color:#fff}

/* ─── Hero Section ─── */
#hero{position:relative;height:85vh;min-height:500px;max-height:800px;overflow:hidden}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease}
.hero-slide.active{opacity:1}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center top;transform:scale(1.03)}
.hero-vignette{position:absolute;inset:0;background:linear-gradient(0deg,var(--bg) 0%,rgba(0,0,0,.15) 40%,rgba(0,0,0,.4) 100%)}
.hero-info{position:absolute;bottom:20%;left:4%;max-width:540px;z-index:2}
.hero-logo{font-size:3.5rem;font-weight:900;line-height:1.05;margin-bottom:14px;text-shadow:0 2px 30px rgba(0,0,0,.6);letter-spacing:-.02em}
.hero-meta{display:flex;gap:10px;align-items:center;margin-bottom:14px;font-size:.82rem}
.hero-year,.hero-rating{color:var(--text2)}
.hero-rating{color:#46d369;font-weight:600}
.hero-desc{font-size:1rem;color:var(--text2);line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:20px;max-width:480px}
.hero-actions{display:flex;gap:10px}
.hero-btn{display:flex;align-items:center;gap:8px;padding:11px 26px;border-radius:var(--radius);font-size:.9rem;font-weight:600;transition:all var(--transition)}
.hero-play{background:rgba(255,255,255,.95);color:#000}
.hero-play:hover{background:#fff;transform:scale(1.03)}
.hero-more{background:rgba(255,255,255,.15);color:#fff;backdrop-filter:blur(4px)}
.hero-more:hover{background:rgba(255,255,255,.25)}
.hero-dots{position:absolute;bottom:10%;left:4%;display:flex;gap:6px;z-index:2}
.hero-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.3);cursor:pointer;transition:all var(--transition)}
.hero-dot.active{background:#fff;width:18px;border-radius:3px}

/* ─── Catalog Rows ─── */
#catalog{position:relative;z-index:5;margin-top:-80px;padding-bottom:60px}
#catalog.no-hero{margin-top:0;padding-top:calc(var(--topbar-h) + 20px)}
.cat-row{margin-bottom:32px;position:relative;content-visibility:auto;contain-intrinsic-size:auto 280px}
.cat-row-title{font-size:1.3rem;font-weight:700;padding:0 4% 14px;letter-spacing:-.01em}
.row-scroll-wrap{position:relative}
.row-scroll{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;padding:0 4%;-ms-overflow-style:none;scrollbar-width:none}
.row-scroll::-webkit-scrollbar{display:none}
.row-arrow{position:absolute;top:0;bottom:0;width:48px;z-index:3;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.5);cursor:pointer;opacity:0;transition:opacity .3s;border:0;color:#fff}
.row-scroll-wrap:hover .row-arrow{opacity:1}
.row-arrow:hover{background:rgba(0,0,0,.75)}
.row-arrow-l{left:0;border-radius:0 var(--radius) var(--radius) 0}
.row-arrow-r{right:0;border-radius:var(--radius) 0 0 var(--radius)}

/* Cards */
.card{flex-shrink:0;width:175px;border-radius:var(--radius);overflow:hidden;cursor:pointer;position:relative;transition:all .35s cubic-bezier(.4,0,.2,1);transform-origin:center bottom}
.card:hover{transform:scale(1.08);z-index:10}
.card:first-child:hover{transform-origin:left bottom}
.card:last-child:hover{transform-origin:right bottom}
.card-img{width:100%;aspect-ratio:2/3;object-fit:cover;background:var(--bg3);border-radius:var(--radius);transition:filter .3s}
.card:hover .card-img{filter:brightness(1.1)}
.card-overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.85) 0%,transparent 50%);opacity:0;transition:opacity .3s;border-radius:var(--radius);display:flex;flex-direction:column;justify-content:flex-end;padding:12px}
.card:hover .card-overlay{opacity:1}
.card-title{font-size:.88rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-sub{font-size:.68rem;color:var(--text3);margin-top:2px}

/* Wide cards for live */
.card-wide{width:280px;border-radius:var(--radius)}
.card-wide .card-img{aspect-ratio:16/9}

/* ─── Grid (search, categories) ─── */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:12px;padding:0 4%}
.sv-heading{font-size:1.3rem;font-weight:700;padding:calc(var(--topbar-h) + 20px) 4% 16px}
.empty-msg{text-align:center;padding:80px 20px;color:var(--text3);font-size:.95rem}

/* ─── Modal ─── */
.modal-wrap{position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s}
.modal-wrap.open{opacity:1;pointer-events:auto}
.modal-shade{position:absolute;inset:0;background:rgba(0,0,0,.7)}
.modal-panel{position:relative;z-index:1;width:94%;max-width:850px;max-height:90vh;background:var(--bg2);border-radius:var(--radius-lg);overflow:hidden;overflow-y:auto;transform:scale(.95) translateY(20px);transition:transform .35s cubic-bezier(.22,1,.36,1);box-shadow:0 20px 60px rgba(0,0,0,.6)}
.modal-wrap.open .modal-panel{transform:scale(1) translateY(0)}
.modal-hero{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden}
.modal-hero-img{width:100%;height:100%;object-fit:cover}
.modal-hero-grad{position:absolute;inset:0;background:linear-gradient(0deg,var(--bg2) 0%,transparent 60%)}
.modal-close{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;background:var(--bg2);display:flex;align-items:center;justify-content:center;z-index:5;transition:background var(--transition)}
.modal-close:hover{background:var(--bg4)}
.modal-body{padding:0 32px 32px}
.modal-title{font-size:1.85rem;font-weight:800;margin-bottom:12px;margin-top:-20px;position:relative;z-index:2}
.modal-meta{display:flex;gap:12px;font-size:.82rem;color:var(--text2);margin-bottom:14px;flex-wrap:wrap}
.modal-match{color:#46d369;font-weight:600}
.modal-desc{font-size:.95rem;color:var(--text2);line-height:1.65;margin-bottom:20px}
.modal-genres{font-size:.8rem;color:var(--text3);margin-bottom:20px}
.modal-cast{font-size:.8rem;color:var(--text3);margin-bottom:24px}
.modal-play{display:inline-flex;align-items:center;gap:8px;padding:12px 32px;background:#fff;color:#000;font-weight:700;font-size:.95rem;border-radius:var(--radius);transition:all var(--transition)}
.modal-play:hover{background:rgba(255,255,255,.85);transform:scale(1.03)}
.modal-episodes{margin-top:24px}
.modal-episodes h3{font-size:1rem;font-weight:700;margin-bottom:14px}
.ep-list{display:flex;flex-direction:column;gap:8px}
.ep-item{display:flex;gap:14px;padding:12px;border-radius:var(--radius);cursor:pointer;transition:background var(--transition)}
.ep-item:hover{background:rgba(255,255,255,.05)}
.ep-thumb{width:120px;aspect-ratio:16/9;flex-shrink:0;border-radius:4px;object-fit:cover;background:var(--bg3)}
.ep-info{flex:1;min-width:0}
.ep-name{font-size:.85rem;font-weight:600;margin-bottom:4px}
.ep-desc{font-size:.78rem;color:var(--text3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Season selector */
.season-sel{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
.season-btn{padding:6px 14px;font-size:.78rem;border-radius:var(--radius);background:rgba(255,255,255,.06);color:var(--text2);transition:all var(--transition)}
.season-btn:hover,.season-btn.active{background:var(--accent);color:#fff}

/* ─── Filter Bar ─── */
.filter-bar{display:flex;gap:12px;padding:0 4% 20px;flex-wrap:wrap}
.filter-select{background:var(--bg3);color:var(--text);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);padding:10px 16px;font-size:.88rem;font-family:var(--font);cursor:pointer;outline:none;transition:all var(--transition);min-width:160px;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.filter-select:hover{border-color:rgba(255,255,255,.2)}
.filter-select:focus{border-color:var(--accent)}
.filter-select option{background:var(--bg2);color:var(--text)}

/* ─── Trailer ─── */
.modal-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;align-items:center}
.modal-trailer{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;background:rgba(255,255,255,.1);color:#fff;font-weight:600;font-size:.92rem;border-radius:var(--radius);transition:all var(--transition);backdrop-filter:blur(4px)}
.modal-trailer:hover{background:rgba(255,255,255,.2);transform:scale(1.03)}
.modal-notavail{font-size:.82rem;color:var(--text3);font-style:italic;margin-top:8px}
.trailer-overlay{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center}
.trailer-wrap{position:relative;width:90%;max-width:960px;aspect-ratio:16/9}
.trailer-wrap iframe{width:100%;height:100%;border:0;border-radius:var(--radius-lg)}
.trailer-close-btn{position:absolute;top:-42px;right:0;background:none;border:0;cursor:pointer;padding:8px;color:#fff;opacity:.7;transition:opacity .2s}
.trailer-close-btn:hover{opacity:1}

/* ─── Player ─── */
#player{position:fixed;inset:0;z-index:999;background:#000;display:none;flex-direction:column}
#player.open{display:flex}
#vid{width:100%;height:100%;object-fit:contain}

.p-ui{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;opacity:0;transition:opacity .3s;cursor:default;background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,transparent 20%,transparent 60%,rgba(0,0,0,.7) 100%)}
#player:hover .p-ui,#player.show-ui .p-ui{opacity:1}

.p-top{display:flex;align-items:center;gap:12px;padding:16px 20px}
.p-title{font-size:.95rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-mid{display:flex;align-items:center;justify-content:center;gap:48px;flex:1}
.p-btn{color:#fff;padding:6px;transition:transform .15s,opacity .15s}
.p-btn:hover{transform:scale(1.1)}
.p-skip{opacity:.85}.p-skip:hover{opacity:1}
.p-playbig{width:72px;height:72px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.12);backdrop-filter:blur(8px);transition:background .2s,transform .15s}
.p-playbig:hover{background:rgba(255,255,255,.2);transform:scale(1.08)}

.p-bot{padding:0 20px 16px}
.p-progress{position:relative;height:20px;display:flex;align-items:center;cursor:pointer;margin-bottom:8px}
.p-bar{position:relative;width:100%;height:3px;background:rgba(255,255,255,.2);border-radius:2px;overflow:hidden;transition:height .15s}
.p-progress:hover .p-bar{height:5px}
.p-buf{position:absolute;height:100%;background:rgba(255,255,255,.25);border-radius:2px}
.p-fill{position:absolute;height:100%;background:var(--accent);border-radius:2px}
.p-dot{position:absolute;width:14px;height:14px;border-radius:50%;background:#fff;top:50%;transform:translate(-50%,-50%);left:0;opacity:0;transition:opacity .15s;box-shadow:0 0 6px rgba(0,0,0,.5)}
.p-progress:hover .p-dot{opacity:1}
.p-tip{position:absolute;bottom:24px;padding:4px 8px;background:var(--bg2);border-radius:3px;font-size:.72rem;font-weight:600;pointer-events:none;opacity:0;transform:translateX(-50%);white-space:nowrap}
.p-progress:hover .p-tip{opacity:1}

.p-controls{display:flex;align-items:center;justify-content:space-between}
.p-cl,.p-cr{display:flex;align-items:center;gap:14px}
.p-time{font-size:.78rem;color:var(--text2);font-variant-numeric:tabular-nums}
.p-vol{display:flex;align-items:center;gap:6px}
.vol-range{width:70px;height:3px;-webkit-appearance:none;appearance:none;background:rgba(255,255,255,.25);border-radius:2px;outline:none;cursor:pointer}
.vol-range::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer}
.vol-range::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;border:0}

/* ─── Loaders ─── */
.page-loader,.p-loader{display:flex;align-items:center;justify-content:center}
.page-loader{padding:60px 0}
.p-loader{position:absolute;inset:0;background:rgba(0,0,0,.5);z-index:2;display:none}
.p-loader.show{display:flex}
.loader-dot{width:40px;height:40px;border:3px solid rgba(255,255,255,.15);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}

/* Skeleton */
.skel{background:linear-gradient(90deg,var(--bg3) 25%,#252525 50%,var(--bg3) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--radius)}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skel-card{aspect-ratio:2/3}
.skel-wide{aspect-ratio:16/9}

/* ─── Responsive ─── */
@media(max-width:768px){
  .tb-nav{display:none}
  .hero-logo{font-size:2.2rem}
  .hero-info{bottom:15%;max-width:90%}
  .hero-desc{-webkit-line-clamp:2}
  .card{width:130px}
  .card-wide{width:220px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
  .modal-panel{width:100%;max-width:100%;border-radius:0;max-height:100vh}
  .modal-body{padding:0 20px 24px}
  .modal-title{font-size:1.5rem}
  .p-mid{gap:32px}
  .tb-search.open .tb-search-input{width:160px}
}

/* ─── Mobile nav drawer ─── */
@media(max-width:768px){
  .tb-left{gap:12px}
  #app::after{content:'';position:fixed;bottom:0;left:0;right:0;height:56px;background:rgba(10,10,10,.95);backdrop-filter:blur(8px);z-index:90;border-top:1px solid rgba(255,255,255,.05)}
  #mob-nav{position:fixed;bottom:0;left:0;right:0;height:56px;z-index:91;display:flex;justify-content:space-around;align-items:center}
  .mob-link{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:.65rem;color:var(--text3);padding:6px 12px;transition:color var(--transition)}
  .mob-link.active{color:#fff}
  .mob-link svg{width:22px;height:22px}
  #catalog{padding-bottom:80px}
}
@media(min-width:769px){
  #mob-nav{display:none !important}
}

/* ─── Live Cards ─── */
.card-live{width:240px;border-radius:var(--radius-lg);overflow:hidden;background:var(--bg3);transition:all .35s cubic-bezier(.4,0,.2,1)}
.card-live:hover{transform:scale(1.05);z-index:10;box-shadow:0 8px 25px rgba(0,0,0,.6)}
.live-card-inner{position:relative;display:flex;align-items:center;gap:14px;padding:14px 16px;min-height:72px}
.live-card-logo{width:48px;height:48px;border-radius:8px;object-fit:contain;background:var(--bg4);flex-shrink:0}
.live-card-info{flex:1;min-width:0}
.live-card-name{font-size:.88rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.live-card-epg{font-size:.72rem;color:var(--text3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.live-badge{position:absolute;top:8px;right:8px;background:var(--accent);color:#fff;font-size:.58rem;font-weight:700;padding:2px 7px;border-radius:3px;letter-spacing:.04em;text-transform:uppercase;line-height:1.3}

/* ─── Favorite Buttons ─── */
.fav-btn{position:absolute;z-index:5;padding:6px;border-radius:50%;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);transition:all var(--transition);opacity:0;display:flex;align-items:center;justify-content:center;color:#fff}
.fav-btn:hover{background:rgba(0,0,0,.7);transform:scale(1.15)}
.fav-btn.active{opacity:1}
.card:hover .fav-btn,.card-live:hover .fav-btn{opacity:1}
.card-fav{top:8px;right:8px}
.card-live .fav-btn{top:auto;bottom:8px;right:46px}
.modal-fav-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 22px;background:rgba(255,255,255,.08);color:#fff;font-weight:600;font-size:.88rem;border-radius:var(--radius);transition:all var(--transition);cursor:pointer;border:0}
.modal-fav-btn:hover{background:rgba(255,255,255,.15);transform:scale(1.03)}

/* ─── Transitions ─── */
/* fade-in removed for performance — lazy rows handle appearance */