/* ════════════════════════════════════════════════════════════
   MOIZ — Ultra-Premium Cinematic Streaming UI v3.0
   50x smoother • Ultra glass • Micro-interactions • Premium
   ════════════════════════════════════════════════════════════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg: #060608;
  --bg-card: #0e0e14;
  --bg-elevated: #16161f;
  --surface: #1e1e2a;
  --text: #eaeaf4;
  --text-muted: #7a7a96;
  --accent: #e50914;
  --accent-bright: #ff2d3a;
  --accent-dark: #9b0710;
  --accent-glow: rgba(229,9,20,.5);
  --accent-subtle: rgba(229,9,20,.08);
  --white: #fff;
  --black: #000;
  --green: #46d369;
  --gold: #f5c518;
  --gradient-hero: linear-gradient(180deg, transparent 0%, rgba(6,6,8,.4) 30%, rgba(6,6,8,.85) 65%, #060608 100%);
  --gradient-hero-left: linear-gradient(90deg, #060608 0%, rgba(6,6,8,.85) 25%, transparent 65%);
  --transition-fast: .18s cubic-bezier(.4,0,.2,1);
  --transition-med: .32s cubic-bezier(.25,.8,.25,1);
  --transition-slow: .5s cubic-bezier(.16,1,.3,1);
  --transition-bounce: .45s cubic-bezier(.34,1.56,.64,1);
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --navbar-h: 68px;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --glass-blur: 20px;
  --glass-bg: rgba(14,14,20,.78);
  --glass-border: rgba(255,255,255,.07);
  --shadow-card: 0 8px 32px rgba(0,0,0,.5);
  --shadow-elevated: 0 24px 80px rgba(0,0,0,.7);
  --shadow-glow: 0 0 50px var(--accent-glow);
  --shadow-soft: 0 2px 12px rgba(0,0,0,.3);
}

/* ── SETTINGS CLASSES ─────────────────────────────────────── */
body.glass-low  { --glass-blur: 6px; --glass-bg: rgba(14,14,20,.92); }
body.glass-med  { --glass-blur: 20px; --glass-bg: rgba(14,14,20,.78); }
body.glass-high { --glass-blur: 48px; --glass-bg: rgba(14,14,20,.35); }
body.glass-ultra { --glass-blur: 80px; --glass-bg: rgba(14,14,20,.2); }

body.anim-fast   { --transition-fast: .1s ease; --transition-med: .2s cubic-bezier(.4,0,.2,1); --transition-slow: .3s ease; }
body.anim-normal { --transition-fast: .2s cubic-bezier(.4,0,.2,1); --transition-med: .35s cubic-bezier(.25,.8,.25,1); --transition-slow: .55s cubic-bezier(.16,1,.3,1); }
body.anim-slow   { --transition-fast: .45s ease; --transition-med: .7s cubic-bezier(.16,1,.3,1); --transition-slow: 1s ease; }
body.anim-buttery { --transition-fast: .3s cubic-bezier(.16,1,.3,1); --transition-med: .5s cubic-bezier(.16,1,.3,1); --transition-slow: .8s cubic-bezier(.16,1,.3,1); }

.moiz-watermark.hidden { display: none !important; }

html{font-size:16px;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:var(--font);background:var(--bg);color:var(--text);overflow-x:hidden;min-height:100vh}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
ul{list-style:none}
img,video,iframe{display:block;max-width:100%}
.hidden{display:none!important}

/* ── Scrollbar ── */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:var(--accent)}

/* ── THEMES ──────────────────────────────────────────────── */
body.theme-cyberpunk {
  --bg:#03060f;--bg-card:#0a0e1e;--bg-elevated:#101630;--surface:#1a2045;
  --text:#c0f0ff;--text-muted:#5588aa;
  --accent:#00d4ff;--accent-bright:#40e8ff;--accent-dark:#0088aa;--accent-glow:rgba(0,212,255,.4);
  --accent-subtle:rgba(0,212,255,.1);
  --gradient-hero:linear-gradient(180deg,transparent 0%,rgba(3,6,15,.55) 40%,#03060f 100%);
  --gradient-hero-left:linear-gradient(90deg,#03060f 0%,rgba(3,6,15,.8) 30%,transparent 70%);
}
body.theme-netflix-chill {
  --bg:#060c18;--bg-card:#0c1424;--bg-elevated:#142036;--surface:#1e3050;
  --text:#d0daf0;--text-muted:#6080a8;
  --accent:#2680c8;--accent-bright:#3a9aee;--accent-dark:#1a5888;--accent-glow:rgba(42,133,214,.4);
  --accent-subtle:rgba(42,133,214,.1);
  --gradient-hero:linear-gradient(180deg,transparent 0%,rgba(6,12,24,.55) 40%,#060c18 100%);
  --gradient-hero-left:linear-gradient(90deg,#060c18 0%,rgba(6,12,24,.8) 30%,transparent 70%);
}
body.theme-dracula {
  --bg:#161622;--bg-card:#1e1e30;--bg-elevated:#282844;--surface:#363660;
  --text:#f0e8ff;--text-muted:#7070a0;
  --accent:#bd93f9;--accent-bright:#d8b4fe;--accent-dark:#8860d0;--accent-glow:rgba(189,147,249,.4);
  --accent-subtle:rgba(189,147,249,.1);
  --gradient-hero:linear-gradient(180deg,transparent 0%,rgba(22,22,34,.55) 40%,#161622 100%);
  --gradient-hero-left:linear-gradient(90deg,#161622 0%,rgba(22,22,34,.8) 30%,transparent 70%);
}
body.theme-forest {
  --bg:#040f08;--bg-card:#081a10;--bg-elevated:#0e2818;--surface:#163822;
  --text:#c0ecd0;--text-muted:#408860;
  --accent:#00e855;--accent-bright:#40ff80;--accent-dark:#008830;--accent-glow:rgba(0,232,85,.4);
  --accent-subtle:rgba(0,232,85,.1);
  --gradient-hero:linear-gradient(180deg,transparent 0%,rgba(4,15,8,.55) 40%,#040f08 100%);
  --gradient-hero-left:linear-gradient(90deg,#040f08 0%,rgba(4,15,8,.8) 30%,transparent 70%);
}
body.theme-gold {
  --bg:#050505;--bg-card:#0e0e08;--bg-elevated:#1a1a10;--surface:#2a2818;
  --text:#f0e8c8;--text-muted:#887850;
  --accent:#d4a520;--accent-bright:#ffc830;--accent-dark:#8a6b15;--accent-glow:rgba(212,165,32,.4);
  --accent-subtle:rgba(212,165,32,.1);
  --gradient-hero:linear-gradient(180deg,transparent 0%,rgba(5,5,5,.55) 40%,#050505 100%);
  --gradient-hero-left:linear-gradient(90deg,#050505 0%,rgba(5,5,5,.8) 30%,transparent 70%);
}

body.theme-ocean {
  --bg:#020a10;--bg-card:#061420;--bg-elevated:#0a1e30;--surface:#0e2840;
  --text:#c8e8f8;--text-muted:#4488aa;
  --accent:#00bcd4;--accent-bright:#26d6e8;--accent-dark:#008a9a;--accent-glow:rgba(0,188,212,.4);
  --accent-subtle:rgba(0,188,212,.1);
  --gradient-hero:linear-gradient(180deg,transparent 0%,rgba(2,10,16,.55) 40%,#020a10 100%);
  --gradient-hero-left:linear-gradient(90deg,#020a10 0%,rgba(2,10,16,.8) 30%,transparent 70%);
}
body.theme-sunset {
  --bg:#0a0506;--bg-card:#140a0c;--bg-elevated:#201014;--surface:#30181c;
  --text:#f8e0d0;--text-muted:#aa6050;
  --accent:#ff6b35;--accent-bright:#ff8f5c;--accent-dark:#cc4400;--accent-glow:rgba(255,107,53,.4);
  --accent-subtle:rgba(255,107,53,.1);
  --gradient-hero:linear-gradient(180deg,transparent 0%,rgba(10,5,6,.55) 40%,#0a0506 100%);
  --gradient-hero-left:linear-gradient(90deg,#0a0506 0%,rgba(10,5,6,.8) 30%,transparent 70%);
}

/* ── CANVAS & CURSOR ─────────────────────────────────────── */
.bg-canvas{position:fixed;inset:0;z-index:-1;pointer-events:none}
body.custom-cursor-active *{cursor:none!important}
.custom-cursor{position:fixed;top:0;left:0;width:20px;height:20px;pointer-events:none;z-index:999999;transform:translate(-50%,-50%);transition:transform .05s linear;border-radius:50%}
.cursor-neon-dot{background:var(--accent-bright);box-shadow:0 0 12px var(--accent-glow),0 0 24px rgba(255,255,255,.15);width:10px;height:10px}
.cursor-ring{border:2px solid rgba(255,255,255,.7);width:28px;height:28px;transition:transform .1s ease-out,width .2s,height .2s}
.cursor-ring.clicking{width:18px;height:18px;background:rgba(255,255,255,.2)}
.cursor-crosshair{width:20px;height:20px;background:transparent;border:2px solid var(--accent-bright);border-radius:0}
.cursor-crosshair::before{content:'';position:absolute;top:50%;left:-5px;right:-5px;height:1.5px;background:var(--accent-bright);transform:translateY(-50%)}
.cursor-crosshair::after{content:'';position:absolute;left:50%;top:-5px;bottom:-5px;width:1.5px;background:var(--accent-bright);transform:translateX(-50%)}
.cursor-hollow-dot{width:14px;height:14px;border:2px solid var(--accent-bright);background:transparent}
.cursor-sword{width:3px;height:28px;background:var(--white);position:relative;transform:translate(-50%,-100%) rotate(-45deg);border-radius:1px;box-shadow:0 0 8px var(--accent-glow)}
.cursor-sword::after{content:'';position:absolute;bottom:5px;left:50%;width:14px;height:3px;background:var(--white);transform:translateX(-50%);border-radius:1px}
.cursor-diamond{width:16px;height:16px;border:2px solid var(--white);background:var(--accent-glow);transform:translate(-50%,-50%) rotate(45deg);border-radius:2px}
.cursor-ghost{width:12px;height:12px;background:var(--white);opacity:.35;filter:blur(2px);box-shadow:0 0 10px var(--white)}
.cursor-pulse{width:8px;height:8px;background:var(--accent-bright);animation:cursorPulse 1s infinite alternate}
@keyframes cursorPulse{from{transform:translate(-50%,-50%) scale(1);box-shadow:0 0 5px var(--accent-glow)}to{transform:translate(-50%,-50%) scale(2.2);box-shadow:0 0 22px var(--accent-glow)}}
.cursor-fluid{width:12px;height:12px;background:var(--accent-bright);border-radius:50%;filter:blur(1px);transition:width .3s,height .3s,border-radius .3s}
.cursor-fluid.moving{width:28px;height:8px;border-radius:8px}

/* ══════════════════════ SPLASH SCREEN ══════════════════════ */
.splash-screen{
  position:fixed;inset:0;z-index:99999;
  background:radial-gradient(ellipse at center, #1a0a0f 0%, var(--black) 70%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:opacity 1s cubic-bezier(.4,0,.2,1),visibility 1s,transform .8s ease;
}
.splash-screen.hidden{opacity:0;visibility:hidden;transform:scale(1.05)}
.splash-logo{width:280px;animation:splashFloat 3s ease-in-out infinite alternate}
@keyframes splashFloat{
  0%{transform:scale(1) translateY(0);filter:brightness(1) drop-shadow(0 0 20px rgba(229,9,20,.3))}
  100%{transform:scale(1.03) translateY(-6px);filter:brightness(1.15) drop-shadow(0 0 40px rgba(229,9,20,.5))}
}
.splash-spinner{
  margin-top:48px;width:36px;height:36px;
  border:2.5px solid rgba(229,9,20,.15);border-top-color:var(--accent);
  border-radius:50%;animation:spin .7s linear infinite;
  box-shadow:0 0 20px var(--accent-glow);
}

/* ══════════════════════ PROFILE SCREEN ══════════════════════ */
.profile-screen{
  position:fixed;inset:0;z-index:9000;
  display:flex;align-items:center;justify-content:center;
  background:var(--black);
  animation:fadeInScreen .6s cubic-bezier(.4,0,.2,1) forwards;
  overflow:hidden;
}
@keyframes fadeInScreen{from{opacity:0}to{opacity:1}}

.profile-screen__inner{
  position:relative;z-index:10;text-align:center;
  max-width:1000px;width:100%;padding:0 40px;
  animation:contentReveal .9s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes contentReveal{
  from{opacity:0;transform:translateY(30px) scale(.97)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

.profile-logo{
  width:200px;margin-bottom:40px;
  filter:drop-shadow(0 0 30px rgba(229,9,20,.35));
}
.profile-screen__title{
  font-size:3rem;font-weight:300;color:rgba(255,255,255,.9);
  margin-bottom:56px;letter-spacing:.5px;
  text-shadow:0 4px 20px rgba(0,0,0,.6);
}
.profile-grid{
  display:flex;gap:36px;justify-content:center;flex-wrap:wrap;margin-bottom:64px;
}
.profile-card{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  cursor:pointer;position:relative;
  transition:transform .3s cubic-bezier(.25,.8,.25,1);
}
.profile-card:hover{transform:translateY(-5px)}

.profile-card__avatar-wrap{position:relative;width:140px;height:140px}
.profile-card__avatar{
  width:100%;height:100%;border-radius:var(--radius-lg);overflow:hidden;
  border:3px solid transparent;background:var(--surface);
  transition:all var(--transition-med);
  box-shadow:0 12px 40px rgba(0,0,0,.5);
}
.profile-card__avatar img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.profile-card:hover .profile-card__avatar{
  border-color:var(--accent);
  box-shadow:0 0 0 2px var(--accent-glow),0 20px 50px rgba(0,0,0,.7);
}
.profile-card:hover .profile-card__avatar img{transform:scale(1.08)}
.profile-card__name{
  font-size:1rem;font-weight:500;color:var(--text-muted);
  transition:color var(--transition-fast);letter-spacing:.3px;
}
.profile-card:hover .profile-card__name{color:var(--white)}

.profile-card__delete{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%) scale(0);
  width:48px;height:48px;border-radius:50%;
  background:rgba(0,0,0,.7);backdrop-filter:blur(10px);
  border:2px solid rgba(255,255,255,.3);color:var(--white);font-size:1.3rem;
  display:flex;align-items:center;justify-content:center;
  transition:all .35s cubic-bezier(.175,.885,.32,1.275);z-index:5;
}
.profile-screen.manage-mode .profile-card__delete{transform:translate(-50%,-50%) scale(1)}
.profile-card__delete:hover{background:var(--accent);border-color:var(--accent);transform:translate(-50%,-50%) scale(1.15)}

.profile-actions{display:flex;flex-direction:column;align-items:center;gap:28px}
.manage-profiles-btn{
  background:transparent;border:1px solid rgba(255,255,255,.2);
  color:var(--text-muted);padding:10px 36px;font-size:.85rem;font-weight:500;
  letter-spacing:2.5px;text-transform:uppercase;
  transition:all var(--transition-fast);border-radius:var(--radius);
}
.manage-profiles-btn:hover{border-color:var(--white);color:var(--white);background:rgba(255,255,255,.04)}
.profile-screen.manage-mode .manage-profiles-btn{background:var(--white);color:var(--black);border-color:var(--white);font-weight:700}

.profile-bg{position:absolute;inset:0;z-index:1}
.profile-bg video{width:100%;height:100%;object-fit:cover;opacity:.25;filter:blur(8px) saturate(.5)}
.profile-bg__overlay{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(0,0,0,.3) 0%,rgba(0,0,0,.85) 100%)}

.profile-add-btn{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--text-muted);transition:all var(--transition-fast)}
.profile-add-btn:hover{color:var(--white);transform:scale(1.05)}
.profile-add-btn__icon{
  width:56px;height:56px;border-radius:50%;
  border:2px solid rgba(255,255,255,.15);
  display:flex;align-items:center;justify-content:center;font-size:2rem;
  transition:all var(--transition-fast);
}
.profile-add-btn:hover .profile-add-btn__icon{border-color:var(--white);box-shadow:0 0 25px rgba(255,255,255,.12)}

/* Kids Badge */
.kids-badge{
  position:absolute;bottom:10px;left:50%;transform:translateX(-50%);
  background:linear-gradient(135deg,var(--accent),var(--accent-dark));
  color:var(--white);font-size:.6rem;font-weight:800;
  padding:3px 10px;border-radius:20px;text-transform:uppercase;
  box-shadow:0 4px 12px var(--accent-glow);z-index:2;letter-spacing:1.5px;
}

/* ══════════════════ MODAL OVERLAY (add-profile) ══════════════════ */
.modal-overlay{
  position:fixed;inset:0;z-index:9600;display:flex;align-items:center;justify-content:center;
  animation:fadeIn .2s ease;padding:20px;
}
.modal-overlay__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.78);backdrop-filter:blur(12px)}
.modal-box{
  position:relative;width:100%;max-width:440px;
  background:var(--bg-elevated);border:1px solid var(--glass-border);
  border-radius:var(--radius-xl);padding:36px;
  box-shadow:var(--shadow-elevated);animation:modalSlide .4s cubic-bezier(.16,1,.3,1);
  z-index:1;max-height:90vh;overflow-y:auto;
}
.modal-box--large{max-width:600px}
.modal-box__close{
  position:absolute;top:14px;right:16px;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.06);color:var(--text-muted);font-size:1.2rem;
  display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);
}
.modal-box__close:hover{background:var(--accent);color:var(--white)}
.modal-box__title{font-size:1.5rem;font-weight:700;color:var(--white);margin-bottom:20px}

.profile-form-header{display:flex;gap:24px;margin-bottom:20px;align-items:center}
.profile-form-inputs{flex:1;display:flex;flex-direction:column}
.avatar-preview-wrap{display:flex;justify-content:center;flex-shrink:0}
.avatar-preview{
  width:96px;height:96px;border-radius:var(--radius-lg);object-fit:cover;
  border:2px solid var(--accent);box-shadow:0 0 20px var(--accent-glow);background:var(--surface);
}
.modal-label{
  display:block;font-size:.72rem;font-weight:600;color:var(--text-muted);
  margin-bottom:6px;text-transform:uppercase;letter-spacing:1px;
}
.modal-input{
  width:100%;padding:12px 16px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius);color:var(--white);font-size:.95rem;
  margin-bottom:16px;outline:none;
  transition:border-color var(--transition-fast),box-shadow var(--transition-fast);
}
.modal-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-subtle)}

.checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:.88rem;color:var(--text);user-select:none;margin-bottom:10px}
.checkbox-label input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}
.checkbox-custom{
  width:20px;height:20px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);
  border-radius:5px;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);
}
.checkbox-label input:checked~.checkbox-custom{background:var(--accent);border-color:var(--accent)}
.checkbox-label input:checked~.checkbox-custom::after{content:'';width:5px;height:10px;border:solid var(--white);border-width:0 2px 2px 0;transform:rotate(45deg);margin-bottom:2px}

.avatar-picker{display:flex;flex-direction:column;gap:16px;margin-bottom:24px}
.avatar-category__title{font-size:.82rem;color:var(--white);font-weight:600;margin-bottom:8px;border-bottom:1px solid rgba(255,255,255,.06);padding-bottom:4px}
.avatar-category__grid{display:flex;gap:10px;flex-wrap:wrap}
.avatar-picker__opt{
  width:54px;height:54px;border-radius:var(--radius);overflow:hidden;cursor:pointer;
  border:2.5px solid transparent;transition:all var(--transition-fast);opacity:.5;background:var(--surface);
}
.avatar-picker__opt:hover,.avatar-picker__opt.selected{
  border-color:var(--accent);opacity:1;transform:scale(1.12);
  box-shadow:0 0 16px var(--accent-glow);z-index:2;
}
.avatar-picker__opt img{width:100%;height:100%;object-fit:cover}
.btn--full{width:100%;justify-content:center}

/* ══════════════════ LANGUAGE SELECTOR ══════════════════ */
.lang-selector{position:relative}
.lang-selector--profile{margin-bottom:32px;display:flex;justify-content:center}
.lang-selector__btn{
  display:inline-flex;align-items:center;gap:8px;padding:8px 16px;
  border-radius:20px;border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.03);color:var(--text-muted);
  font-size:.78rem;font-weight:600;letter-spacing:.5px;
  transition:all var(--transition-fast);box-shadow:0 4px 10px rgba(0,0,0,.15);
}
.lang-selector__btn:hover{
  border-color:rgba(255,255,255,.15);color:var(--white);
  background:rgba(255,255,255,.08);box-shadow:0 6px 18px rgba(0,0,0,.25);
  transform:translateY(-1px);
}
.lang-selector__btn:hover .lang-selector__globe{color:var(--accent-bright)}
.lang-selector__globe{transition:color var(--transition-fast)}
.lang-selector__chevron{transition:transform var(--transition-med);opacity:.6}
.lang-selector__btn:hover .lang-selector__chevron{opacity:1}
.lang-selector__menu{
  position:absolute;top:calc(100% + 16px);right:0;min-width:150px;
  background:rgba(12,12,18,.82);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
  border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.02) inset;
  z-index:100;animation:dropdownReveal .4s cubic-bezier(.16,1,.3,1) forwards;transform-origin:top right;
}
.lang-selector--profile .lang-selector__menu{left:50%;right:auto;transform:translateX(-50%)}
.lang-selector__menu li{padding:12px 20px;font-size:.86rem;color:var(--text-muted);cursor:pointer;transition:all var(--transition-fast)}
.lang-selector__menu li:hover{background:rgba(255,255,255,.05);color:var(--white);padding-left:24px}
.lang-selector__menu li.active{color:var(--accent-bright);font-weight:700;background:rgba(255,255,255,.03)}

/* ══════════════════ REDESIGNED PREMIUM NAVBAR ══════════════════ */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 8000;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 48px;
  background: linear-gradient(180deg, rgba(6, 6, 8, 0.92) 0%, rgba(6, 6, 8, 0.5) 50%, transparent 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: background .4s ease, backdrop-filter .4s ease, border-color .4s ease, box-shadow .4s ease, height .3s ease;
}

.navbar--scrolled {
  height: 64px;
  background: rgba(6, 6, 8, 0.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

.navbar__left {
  display: flex;
  align-items: center;
  gap: 40px;
}

/* Premium Brand Logo Glow Shimmer */
.navbar__logo {
  width: 110px;
  flex-shrink: 0;
  transition: transform var(--transition-med), filter var(--transition-med);
  cursor: pointer;
  filter: drop-shadow(0 0 10px rgba(229, 9, 20, 0.2));
}

.navbar__logo:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 0 16px var(--accent-glow)) drop-shadow(0 0 30px rgba(255, 255, 255, 0.1));
}

/* Dynamic Capsule Navigation Links */
.navbar__links {
  display: flex;
  gap: 8px;
  align-items: center;
}

.navbar__links li {
  position: relative;
}

.navbar__links a {
  position: relative;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--text-muted);
  padding: 8px 18px;
  border-radius: 20px;
  border: 1px solid transparent;
  transition: all var(--transition-slow);
  letter-spacing: 0.4px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.navbar__links a::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 20px;
  transform: scale(0.9);
  opacity: 0;
  transition: transform var(--transition-med), opacity var(--transition-med);
  z-index: -1;
}

.navbar__links a:hover {
  color: var(--white);
  transform: translateY(-1px);
}

.navbar__links a:hover::before {
  transform: scale(1);
  opacity: 1;
}

.navbar__links a.active {
  color: var(--white);
  font-weight: 700;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25), 0 0 12px var(--accent-subtle);
}

/* Centered dynamic glowing red accent underline */
.navbar__links a.active::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 3px;
  background: var(--accent-bright);
  border-radius: 2px;
  box-shadow: 0 0 10px var(--accent-glow);
  animation: linkLinePulse 2.5s infinite alternate;
}

@keyframes linkLinePulse {
  0% { width: 14px; box-shadow: 0 0 6px var(--accent-glow); }
  100% { width: 22px; box-shadow: 0 0 14px var(--accent-bright); }
}

.navbar__right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Premium Frosted Glass Action Buttons */
.navbar__icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.navbar__icon-btn:hover {
  color: var(--white);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.navbar__icon-btn svg {
  transition: transform var(--transition-med);
}

.navbar__icon-btn:hover svg {
  transform: scale(1.05);
}

#nav-settings-btn:hover svg {
  transform: rotate(45deg);
}

#notif-btn:hover svg {
  transform: rotate(-10deg) scale(1.05);
  animation: bellSwing 0.5s ease-in-out;
}

@keyframes bellSwing {
  0%, 100% { transform: rotate(0) scale(1.05); }
  25% { transform: rotate(-12deg) scale(1.05); }
  50% { transform: rotate(10deg) scale(1.05); }
  75% { transform: rotate(-5deg) scale(1.05); }
}

@keyframes notifSonar {
  0% { transform: scale(0.6); opacity: 0.8; }
  100% { transform: scale(2.8); opacity: 0; }
}

.navbar__dropdown-container {
  position: relative;
}

/* Redesigned Frosted Glass Dropdowns */
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 16px);
  right: -8px;
  background: rgba(12, 12, 18, 0.82);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
  min-width: 250px;
  z-index: 100;
  overflow: hidden;
  animation: dropdownReveal 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transform-origin: top right;
}

@keyframes dropdownReveal {
  from { opacity: 0; transform: translateY(-8px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.avatar-menu-list {
  padding: 8px 0;
}

.avatar-menu-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 22px;
  font-size: 0.88rem;
  color: var(--text);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.avatar-menu-list li:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--white);
  padding-left: 26px;
}

.avatar-menu-list li svg {
  color: var(--text-muted);
  flex-shrink: 0;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.avatar-menu-list li:hover svg {
  color: var(--accent-bright);
  transform: scale(1.1);
}

.nav-dropdown-header {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--white);
  padding: 16px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  letter-spacing: 0.5px;
}

.notif-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: background var(--transition-fast), padding-left var(--transition-fast);
}

.notif-item:hover {
  background: rgba(255, 255, 255, 0.04);
  padding-left: 26px;
}

.notif-item--unread {
  background: rgba(229, 9, 20, 0.03);
  border-left: 3px solid var(--accent);
}

.notif-item img {
  width: 56px;
  height: 56px;
  border-radius: var(--radius);
  object-fit: cover;
  background: var(--surface);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
}

.notif-item__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.notif-item__content strong {
  font-size: 0.8rem;
  color: var(--white);
  font-weight: 600;
}

.notif-item__content span {
  font-size: 0.74rem;
  color: var(--text-muted);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notif-item__time {
  font-size: 0.65rem !important;
  color: rgba(255,255,255,.3) !important;
  margin-top: 2px;
}

.notif-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.notif-header .nav-dropdown-header {
  border-bottom: none;
  padding-left: 0;
}

.notif-clear-btn {
  font-size: 0.7rem;
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 12px;
  transition: all var(--transition-fast);
}

.notif-clear-btn:hover {
  background: rgba(229, 9, 20, 0.1);
}

.notif-list {
  max-height: 320px;
  overflow-y: auto;
}

.notif-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.notif-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  min-width: 16px;
  height: 16px;
  background: var(--accent-bright);
  border-radius: 8px;
  font-size: 0.6rem;
  font-weight: 800;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  box-shadow: 0 0 10px var(--accent-glow);
  z-index: 2;
  pointer-events: none;
}

.notif-badge.hidden { display: none; }

.notif-badge::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid var(--accent-bright);
  opacity: 0;
  animation: notifSonar 2.2s infinite cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Theme-Synchronized Glowing User Profile Squircle Frame */
.navbar__avatar {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  transition: all var(--transition-med);
  background-size: cover;
  background-position: center;
  position: relative;
}

.navbar__avatar::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1) inset;
  pointer-events: none;
}

.navbar__avatar:hover {
  border-color: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow), 0 4px 12px rgba(0, 0, 0, 0.5);
  transform: scale(1.05);
}

.navbar__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--surface);
}

/* ══════════════════ SEARCH BAR OVERHAUL ══════════════════ */
.search-bar {
  display: flex;
  align-items: center;
  position: relative;
}

.search-bar__toggle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  z-index: 2;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.search-bar__toggle:hover {
  color: var(--white);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  transform: scale(1.08);
}

.search-bar__input {
  width: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--white);
  font-size: 0.86rem;
  outline: none;
  font-weight: 500;
  transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1), padding 0.45s, border-color 0.3s, box-shadow 0.3s;
  pointer-events: none;
}

.search-bar.open .search-bar__input {
  width: 270px;
  padding: 9px 36px 9px 46px;
  background: rgba(10, 10, 15, 0.88);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  margin-left: -40px;
  pointer-events: auto;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.45) inset, 0 0 12px rgba(255, 255, 255, 0.02);
}

.search-bar.open .search-bar__input:focus {
  border-color: var(--accent);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.45) inset, 0 0 15px var(--accent-subtle);
}

.search-bar__clear {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 1.15rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--transition-fast), transform var(--transition-fast);
  z-index: 3;
}

.search-bar__clear:hover {
  color: var(--white);
  transform: translateY(-50%) scale(1.15);
}

/* ══════════════════ HERO BANNER ══════════════════ */
.hero{
  position:relative;width:100%;height:90vh;min-height:560px;
  background-size:cover;background-position:center 15%;background-repeat:no-repeat;
  display:flex;align-items:flex-end;padding:0 48px 130px;
  transition:background-image .8s cubic-bezier(.4,0,.2,1);
}
.hero__overlay{position:absolute;inset:0;background:var(--gradient-hero-left),var(--gradient-hero);pointer-events:none}
.hero__content{position:relative;z-index:1;max-width:560px;animation:heroReveal .5s cubic-bezier(.25,.8,.25,1) .1s both}
@keyframes heroReveal{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes modalSlide{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}

.hero__title{
  font-size:3.4rem;font-weight:800;line-height:1.06;color:var(--white);
  margin-bottom:16px;letter-spacing:-.5px;
  text-shadow:0 4px 20px rgba(0,0,0,.5);
}
.hero__desc{
  font-size:.92rem;line-height:1.6;color:rgba(255,255,255,.75);margin-bottom:28px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.hero__actions{display:flex;gap:10px;flex-wrap:wrap}

/* ══════════════════ BUTTONS ══════════════════ */
.btn{
  display:inline-flex;align-items:center;gap:8px;padding:13px 30px;
  border-radius:var(--radius);font-size:.9rem;font-weight:600;
  transition:all .25s cubic-bezier(.25,.8,.25,1);letter-spacing:.3px;
  position:relative;overflow:hidden;
}
.btn::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.12),transparent);opacity:0;transition:opacity .25s}
.btn:hover::after{opacity:1}
.btn--play{
  background:var(--white);color:var(--black);
  box-shadow:0 4px 16px rgba(255,255,255,.15);
}
.btn--play:hover{background:#f0f0f0;transform:translateY(-2px);box-shadow:0 8px 24px rgba(255,255,255,.2)}
.btn--play:active{transform:translateY(0) scale(.97)}
.btn--info{
  background:rgba(255,255,255,.1);color:var(--white);
  backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);
}
.btn--info:hover{background:rgba(255,255,255,.16);transform:translateY(-2px);border-color:rgba(255,255,255,.2)}
.btn--list{
  background:rgba(255,255,255,.06);color:var(--white);padding:13px 24px;
  border:1px solid rgba(255,255,255,.08);
}
.btn--list:hover{background:rgba(255,255,255,.1);transform:translateY(-2px);border-color:rgba(255,255,255,.15)}
.btn--list-modal{
  background:transparent;border:2px solid rgba(255,255,255,.3);color:var(--white);
  border-radius:50%;width:44px;height:44px;padding:0;
  display:flex;align-items:center;justify-content:center;margin-top:16px;
}
.btn--list-modal:hover{border-color:var(--white);transform:scale(1.1);background:rgba(255,255,255,.06)}
.mylist-icon{font-size:1.4rem;line-height:1;font-weight:300}

.btn--play-modal{
  margin-top:16px;
  background:linear-gradient(135deg,var(--accent),var(--accent-dark));
  color:var(--white);border:none;
}
.btn--play-modal svg{fill:var(--white)}
.btn--play-modal:hover{
  box-shadow:var(--shadow-glow);transform:translateY(-2px);
  background:linear-gradient(135deg,var(--accent-bright),var(--accent));
}

/* ══════════════════ MOVIE ROWS ══════════════════ */
.rows-container{position:relative;z-index:1;margin-top:-100px;padding-bottom:80px}
.row{padding:0 48px;margin-bottom:40px}
.row__title{
  font-size:1.15rem;font-weight:700;color:var(--white);margin-bottom:14px;
  display:flex;align-items:center;gap:8px;
}
.row__title::after{
  content:'›';font-size:1.1rem;color:var(--accent);opacity:0;
  transform:translateX(-6px);transition:all var(--transition-fast);
}
.row:hover .row__title::after{opacity:1;transform:translateX(0)}
.row__track-wrapper{position:relative}
.row__track{
  display:flex;gap:12px;overflow-x:auto;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;padding:20px 4px;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
  will-change:scroll-position;
}
.row__track::-webkit-scrollbar{display:none}
.row__track .card{scroll-snap-align:start}
.row__arrow{
  position:absolute;top:0;bottom:0;width:56px;z-index:10;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(90deg,rgba(6,6,8,.95) 0%,rgba(6,6,8,.6) 50%,transparent 100%);
  color:var(--white);font-size:1.8rem;opacity:0;
  transition:opacity .35s ease, color .2s ease;border:none;cursor:pointer;
}
.row__arrow--right{background:linear-gradient(-90deg,rgba(6,6,8,.95) 0%,rgba(6,6,8,.6) 50%,transparent 100%)}
.row__track-wrapper:hover .row__arrow{opacity:1}
.row__arrow--left{left:0;border-radius:0 var(--radius) var(--radius) 0}
.row__arrow--right{right:0;border-radius:var(--radius) 0 0 var(--radius)}
.row__arrow:hover{color:var(--accent-bright);transform:scale(1.1)}

/* ══════════════════ MOVIE CARD ══════════════════ */
.card{
  flex:0 0 240px;height:140px;border-radius:var(--radius-lg);overflow:hidden;
  position:relative;cursor:pointer;background:var(--bg-card);
  transition:transform .3s cubic-bezier(.25,.8,.25,1),box-shadow .3s ease,border-color .2s ease;
  will-change:transform;border:2px solid transparent;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  transform:translate3d(0,0,0);
}
.card:hover{
  transform:translate3d(0,-5px,0) scale(1.05);z-index:20;
  box-shadow:0 12px 32px rgba(0,0,0,.6),0 0 12px var(--accent-subtle);
  border-color:var(--accent);
}
.card:active{transform:translate3d(0,-2px,0) scale(1.02)}
.card__img{
  width:100%;height:100%;object-fit:cover;
  transition:opacity .4s ease, filter .4s ease;background:var(--surface);border-radius:var(--radius-lg);
}
.card:hover .card__img{filter:brightness(.85)}
.card__rank{
  position:absolute;bottom:4px;left:6px;font-size:4rem;font-weight:900;
  color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.4);
  text-shadow:0 0 15px rgba(0,0,0,.8);z-index:2;line-height:1;
  pointer-events:none;letter-spacing:-3px;transition:transform var(--transition-med);
}
.card:hover .card__rank{transform:scale(1.05);-webkit-text-stroke-color:var(--accent)}
.card__play-icon{
  position:absolute;top:40%;left:50%;
  transform:translate(-50%,-50%) scale(.6);opacity:0;
  width:40px;height:40px;border-radius:50%;
  background:rgba(0,0,0,.5);backdrop-filter:blur(4px);
  border:2px solid rgba(255,255,255,.4);
  display:flex;align-items:center;justify-content:center;
  transition:all var(--transition-med);z-index:3;
}
.card:hover .card__play-icon{opacity:1;transform:translate(-50%,-50%) scale(1)}
.card:hover .card__play-icon:hover{background:var(--accent);border-color:var(--accent)}
.card:hover .card__play-icon:hover svg{fill:var(--white)}

.card__info{
  position:absolute;bottom:0;left:0;right:0;
  padding:24px 10px 8px;
  background:linear-gradient(transparent,rgba(0,0,0,.9));
  opacity:0;transform:translateY(4px);
  transition:all .3s cubic-bezier(.16,1,.3,1);z-index:2;
}
.card:hover .card__info{opacity:1;transform:translateY(0)}
.card__info-title{font-size:.7rem;font-weight:600;color:var(--white);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card__info-meta{font-size:.6rem;color:var(--green);font-weight:600;display:flex;align-items:center;justify-content:space-between}
.card__add-btn{
  width:20px;height:20px;border-radius:50%;
  border:1px solid rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;
  font-size:.85rem;color:var(--white);background:rgba(0,0,0,.4);
  transition:all var(--transition-fast);
}
.card__add-btn:hover{border-color:var(--accent);background:var(--accent)}

/* ══════════════════ SEARCH / MY LIST RESULTS ══════════════════ */
.search-results{padding:calc(var(--navbar-h) + 28px) 48px 80px}
.search-results__heading{font-size:1.3rem;font-weight:700;color:var(--white);margin-bottom:28px;letter-spacing:-.3px}
.search-results__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:18px}

.search-card{
  border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;
  background:var(--bg-card);border:1px solid transparent;
  transition:transform .3s cubic-bezier(.25,.8,.25,1),box-shadow .3s ease,border-color .2s ease;
  position:relative;box-shadow:0 4px 16px rgba(0,0,0,.3);
  transform:translate3d(0,0,0);
}
.search-card:hover{
  transform:translate3d(0,-5px,0);
  box-shadow:0 12px 32px rgba(0,0,0,.5),0 0 12px var(--accent-subtle);
  border-color:var(--accent);z-index:10;
}
.search-card__img{width:100%;aspect-ratio:2/3;object-fit:cover;background:var(--surface)}
.search-card__body{padding:12px 14px}
.search-card__title{font-size:.84rem;font-weight:600;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-card__year{font-size:.72rem;color:var(--text-muted);margin-top:3px}
.search-card__play{
  position:absolute;top:38%;left:50%;transform:translate(-50%,-50%) scale(.6);
  opacity:0;width:44px;height:44px;border-radius:50%;
  background:rgba(0,0,0,.5);backdrop-filter:blur(4px);
  border:2px solid rgba(255,255,255,.4);
  display:flex;align-items:center;justify-content:center;
  transition:all var(--transition-med);pointer-events:none;
}
.search-card:hover .search-card__play{opacity:1;transform:translate(-50%,-50%) scale(1)}
.search-card:hover .search-card__play svg{fill:var(--white)}

/* ══════════════════ LOADING SPINNER ══════════════════ */
.loading-spinner{
  position:fixed;inset:0;z-index:8500;
  display:flex;align-items:center;justify-content:center;
  background:rgba(6,6,8,.6);backdrop-filter:blur(8px);
  transition:opacity .2s ease;
}
.spinner-ring{
  width:40px;height:40px;
  border:2.5px solid rgba(229,9,20,.1);border-top-color:var(--accent);
  border-radius:50%;animation:spin .6s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ══════════════════ INFO MODAL ══════════════════ */
.info-modal{
  position:fixed;inset:0;z-index:9500;
  display:flex;align-items:center;justify-content:center;
  animation:fadeIn .2s ease;padding:20px;
}
.info-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.82);backdrop-filter:blur(12px)}
.info-modal__content{
  position:relative;width:100%;max-width:860px;
  background:var(--bg-elevated);border:1px solid var(--glass-border);
  border-radius:var(--radius-xl);overflow:hidden;
  box-shadow:var(--shadow-elevated),0 0 60px var(--accent-subtle);
  animation:modalSlide .4s cubic-bezier(.16,1,.3,1);
  max-height:90vh;overflow-y:auto;
  transition:transform .25s ease, opacity .25s ease;
}
.info-modal__close{
  position:absolute;top:14px;right:16px;z-index:10;
  width:38px;height:38px;border-radius:50%;
  background:rgba(0,0,0,.5);backdrop-filter:blur(8px);
  color:var(--white);font-size:1.3rem;
  display:flex;align-items:center;justify-content:center;
  transition:all var(--transition-fast);
}
.info-modal__close:hover{background:var(--accent);transform:scale(1.08)}
.info-modal__poster{
  width:100%;height:460px;
  background-size:cover;background-position:center 15%;
  position:relative;background-color:var(--surface);
}
.info-modal__poster::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(transparent 15%,rgba(26,26,38,.5) 55%,var(--bg-elevated) 100%);
}
.info-modal__body{padding:0 48px 48px;margin-top:-130px;position:relative;z-index:2}
.info-modal__body h2{
  font-size:2.8rem;font-weight:800;color:var(--white);margin-bottom:14px;
  letter-spacing:-.5px;text-shadow:0 4px 20px rgba(0,0,0,.6);
}
.info-modal__actions{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.info-modal__meta{font-size:.95rem;color:var(--green);font-weight:600;margin-bottom:14px;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.info-modal__overview{font-size:1rem;line-height:1.65;color:rgba(255,255,255,.8);max-width:88%}

.info-modal__tv-selection{
  margin-top:24px;display:flex;gap:20px;
  background:rgba(255,255,255,.03);padding:18px;
  border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,.06);
}
.selection-row{display:flex;flex-direction:column;gap:6px;flex:1}
.selection-row label{font-size:.7rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:1.5px}
.selection-select{
  background:var(--bg-card);color:var(--white);
  border:1px solid rgba(255,255,255,.1);padding:11px 14px;
  border-radius:var(--radius);font-size:.95rem;outline:none;cursor:pointer;
  transition:border-color var(--transition-fast);
}
.selection-select:focus{border-color:var(--accent)}

/* Episodes List */
.info-episodes-list{margin-top:32px;display:flex;flex-direction:column;gap:12px;padding-bottom:20px}
.episode-card{
  display:flex;gap:18px;padding:14px 16px;
  background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.04);
  border-radius:var(--radius-lg);cursor:pointer;
  transition:all var(--transition-fast);align-items:center;
}
.episode-card:hover{
  background:rgba(255,255,255,.05);border-color:var(--accent);
  transform:translateX(6px);box-shadow:0 4px 20px rgba(0,0,0,.3);
}
.episode-card__number{font-size:1.3rem;font-weight:800;color:var(--text-muted);min-width:36px;text-align:center}
.episode-card__thumb{
  width:150px;aspect-ratio:16/9;border-radius:var(--radius);
  background-size:cover;background-position:center;flex-shrink:0;
  position:relative;background-color:var(--surface);
  box-shadow:0 4px 16px rgba(0,0,0,.4);
}
.episode-card__thumb::after{
  content:'';position:absolute;inset:0;
  background:rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .3s ease;border-radius:var(--radius);
}
.episode-card:hover .episode-card__thumb::after{
  opacity:1;
  background:rgba(0,0,0,.4) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="white"><polygon points="5 3 19 12 5 21"/></svg>') no-repeat center;
}
.episode-card__info{flex:1}
.episode-card__title{font-size:1rem;font-weight:700;color:var(--white);margin-bottom:5px}
.episode-card__overview{
  font-size:.85rem;color:var(--text-muted);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* ══════════════════ BACK TO TOP ══════════════════ */
.back-to-top{
  position:fixed;bottom:28px;right:28px;
  width:46px;height:46px;border-radius:50%;
  background:var(--glass-bg);backdrop-filter:blur(12px);
  border:1px solid var(--glass-border);color:var(--white);
  display:flex;align-items:center;justify-content:center;
  z-index:8000;cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
  transition:all .35s cubic-bezier(.175,.885,.32,1.275);
  opacity:1;
}
.back-to-top.hidden{opacity:0;transform:translateY(16px) scale(.8);pointer-events:none}
.back-to-top:hover{
  background:var(--accent);border-color:var(--accent);
  transform:scale(1.08) translateY(-4px);
  box-shadow:0 8px 30px var(--accent-glow);
}

.moiz-watermark{opacity:.2;transition:opacity .3s}
.moiz-watermark:hover{opacity:.6}

/* ══════════════════ SETTINGS MODAL ══════════════════ */
.modal-backdrop{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.6);backdrop-filter:blur(8px)}
.modal{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  width:90%;max-width:420px;
  background:var(--bg-elevated);border:1px solid var(--glass-border);
  border-radius:var(--radius-xl);z-index:10000;overflow:hidden;
  box-shadow:var(--shadow-elevated);display:flex;flex-direction:column;
  animation:modalSlide .4s cubic-bezier(.16,1,.3,1) forwards;
}
.modal__header{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 28px;background:rgba(255,255,255,.02);
  border-bottom:1px solid rgba(255,255,255,.04);
}
.modal__close{font-size:1.8rem;color:var(--text-muted);cursor:pointer;background:none;border:none;transition:color var(--transition-fast)}
.modal__close:hover{color:var(--accent)}
.settings-group{margin-bottom:0}
.settings-select{
  width:100%;padding:11px 16px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  color:var(--white);border-radius:var(--radius);font-size:.92rem;cursor:pointer;outline:none;
  transition:border-color var(--transition-fast);
}
.settings-select:focus{border-color:var(--accent)}
.settings-select option{background:var(--bg-elevated);color:var(--white)}

/* ══════════════════ VIDEO PLAYER OVERLAY ══════════════════ */
.player-overlay{
  position:fixed;inset:0;z-index:10000;background:var(--black);
  display:flex;flex-direction:column;animation:playerFadeIn .4s cubic-bezier(.16,1,.3,1);
}
@keyframes playerFadeIn{from{opacity:0;transform:scale(1.02)}to{opacity:1;transform:scale(1)}}
.player-overlay__header{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 28px;
  background:linear-gradient(180deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.4) 60%,transparent 100%);
  position:absolute;top:0;left:0;right:0;z-index:10;pointer-events:none;
  transition:opacity .6s cubic-bezier(.4,0,.2,1), transform .5s ease;opacity:1;
}
.player-overlay.idle .player-overlay__header{opacity:0;transform:translateY(-12px)}
.player-overlay__title{font-size:1.15rem;font-weight:700;color:var(--white);text-shadow:0 2px 8px rgba(0,0,0,.6)}
.player-overlay__controls{display:flex;align-items:center;gap:8px}

.server-toggle-btn{
  background:rgba(255,255,255,.08);color:white;padding:8px 18px;
  border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,.08);
  font-size:.82rem;font-weight:600;cursor:pointer;
  display:flex;align-items:center;gap:8px;
  transition:all var(--transition-fast);pointer-events:auto;
}
.server-toggle-btn:hover{background:var(--accent);border-color:var(--accent);box-shadow:0 0 16px var(--accent-glow)}

.server-drawer{
  position:absolute;bottom:0;left:50%;
  transform:translateX(-50%) translateY(0);
  width:100%;max-width:800px;
  background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));
  border-top:1px solid var(--glass-border);
  border-radius:var(--radius-xl) var(--radius-xl) 0 0;
  z-index:100;transition:transform .4s cubic-bezier(.4,0,.2,1);
  padding:20px 28px 40px;
}
.server-drawer.hidden{display:block!important;transform:translateX(-50%) translateY(100%)}
.server-drawer__handle{width:40px;height:4px;background:rgba(255,255,255,.15);border-radius:2px;margin:0 auto 20px;cursor:pointer}
.server-drawer__title{font-size:.9rem;font-weight:700;color:var(--white);margin-bottom:20px;text-align:center;text-transform:uppercase;letter-spacing:1.5px}

.server-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.server-btn{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
  color:var(--text-muted);font-size:.82rem;font-weight:600;padding:12px;
  border-radius:var(--radius-lg);cursor:pointer;
  transition:all var(--transition-fast);text-align:center;
}
.server-btn:hover{background:rgba(255,255,255,.08);color:var(--white);border-color:rgba(255,255,255,.15)}
.server-btn.active{
  background:linear-gradient(135deg,var(--accent),var(--accent-dark));
  color:var(--white);border-color:var(--accent);
  box-shadow:0 4px 20px var(--accent-glow);
}

.auto-server-btn{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  color:var(--text-muted);padding:7px 14px;border-radius:20px;
  font-size:.72rem;font-weight:700;display:flex;align-items:center;gap:8px;
  cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:.5px;
}
.auto-server-btn__dot{width:7px;height:7px;background:var(--text-muted);border-radius:50%;transition:all .3s ease}
.auto-server-btn.active{background:rgba(70,211,105,.1);border-color:rgba(70,211,105,.3);color:var(--green)}
.auto-server-btn.active .auto-server-btn__dot{background:var(--green);box-shadow:0 0 10px var(--green);animation:pulseGreen 1.5s infinite}
@keyframes pulseGreen{0%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:.6}100%{transform:scale(1);opacity:1}}

.player-overlay__close{
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.08);color:var(--white);font-size:1.5rem;
  display:flex;align-items:center;justify-content:center;
  transition:all var(--transition-fast);pointer-events:auto;
}
.player-overlay__close:hover{background:var(--accent);transform:scale(1.08);box-shadow:0 0 16px var(--accent-glow)}

.player-overlay__iframe-container{width:100%;height:100%;flex:1;position:relative;background:var(--black)}
.player-overlay__video{width:100%;height:100%;border:none;background:var(--black);transition:transform .3s ease}
.player-overlay__video.cropped{transform:scale(1.35);transform-origin:center}

.player-loader{
  position:absolute;inset:0;z-index:5;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(0,0,0,.85);backdrop-filter:blur(6px);
}
.player-loader__text{margin-top:20px;font-size:.85rem;font-weight:500;color:var(--text-muted);letter-spacing:.5px}

/* ══════════════════ RESPONSIVE ══════════════════ */
@media(max-width:900px){
  .navbar{padding:0 24px}
  .navbar__links{display:none}
  .hero{padding:0 24px 80px;height:70vh}
  .hero__title{font-size:2.2rem}
  .row{padding:0 24px}
  .card{flex:0 0 170px;height:100px}
  .profile-card__avatar-wrap{width:100px;height:100px}
  .profile-screen__title{font-size:2rem}
  .search-results{padding-left:24px;padding-right:24px}
  .profile-form-header{flex-direction:column;align-items:center;text-align:center}
}
@media(max-width:600px){
  .navbar{padding:0 16px;height:56px}
  .navbar.navbar--scrolled{height:56px}
  .navbar__logo{width:75px}
  .hero{padding:0 16px 60px;height:60vh;min-height:400px}
  .hero__title{font-size:1.7rem;margin-bottom:10px}
  .hero__desc{font-size:.82rem;margin-bottom:16px}
  .hero__actions{flex-direction:column;gap:8px}
  .hero__actions .btn{width:100%;justify-content:center}
  .row{padding:0 16px;margin-bottom:24px}
  .row__title{font-size:1rem}
  .card{flex:0 0 140px;height:82px}
  .profile-grid{gap:16px}
  .profile-card__avatar-wrap{width:80px;height:80px}
  .search-results{padding-left:16px;padding-right:16px}
  .search-results__grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
  .search-bar.open .search-bar__input{width:150px}
  .modal-box{padding:24px}
  .info-modal__poster{height:260px}
  .info-modal__body{padding:16px 20px 24px}
  .info-modal__body h2{font-size:1.6rem}
  .nav-dropdown-menu{right:-50px}
  #player-back-btn span{display:none}
  #player-back-btn{padding:8px!important}
  .player-overlay__header{padding:12px 16px;flex-direction:column;align-items:flex-start;gap:10px}
  .player-overlay__controls{width:100%;justify-content:space-between}
  .player-overlay__title{position:static;font-size:1rem}
  .server-drawer{padding:20px 16px 40px}
  .server-grid{grid-template-columns:repeat(2,1fr)}
}

/* ══════════════════ LIVE SPORTS STYLING ══════════════════ */
.sports-screen {
  padding-top: 76px;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  animation: fadeIn 0.6s ease-in-out;
}

.sports-hero {
  position: relative;
  height: 65vh;
  min-height: 480px;
  background-size: cover;
  background-position: center;
  background-image: url('https://images.unsplash.com/photo-1502680390469-be75c86b636f?q=80&w=1200&auto=format&fit=crop');
  display: flex;
  align-items: flex-end;
  padding: 0 48px 60px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background-image 0.8s ease-in-out, opacity 0.4s ease;
}

.sports-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 15, 0.3) 0%, rgba(10, 10, 15, 0.6) 50%, var(--bg) 100%),
              linear-gradient(90deg, var(--bg) 0%, transparent 40%);
}

.sports-hero__content {
  position: relative;
  z-index: 2;
  max-width: 650px;
  animation: heroReveal .9s cubic-bezier(.16,1,.3,1) .2s both;
}

.sports-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(229, 9, 20, 0.15);
  border: 1px solid rgba(229, 9, 20, 0.4);
  color: #ff3344;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 16px;
  box-shadow: 0 0 12px rgba(229, 9, 20, 0.2);
  backdrop-filter: blur(8px);
}

.live-dot {
  width: 8px;
  height: 8px;
  background-color: var(--accent-bright);
  border-radius: 50%;
  display: inline-block;
  animation: pulseLive 1.5s infinite;
}

@keyframes pulseLive {
  0% { transform: scale(0.8); opacity: 0.5; box-shadow: 0 0 0 0 rgba(229, 9, 20, 0.7); }
  50% { transform: scale(1.1); opacity: 1; box-shadow: 0 0 0 6px rgba(229, 9, 20, 0); }
  100% { transform: scale(0.8); opacity: 0.5; box-shadow: 0 0 0 0 rgba(229, 9, 20, 0); }
}

.sports-hero__title {
  font-size: 2.8rem;
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 12px;
  color: var(--white);
  text-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.sports-hero__desc {
  font-size: 0.94rem;
  color: rgba(255,255,255,.7);
  line-height: 1.6;
  margin-bottom: 20px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sports-categories {
  display: flex;
  gap: 10px;
  padding: 0 48px;
  margin-bottom: 32px;
  flex-wrap: wrap;
  position: sticky;
  top: 76px;
  z-index: 100;
  background: linear-gradient(180deg, var(--bg) 60%, transparent 100%);
  padding-top: 16px;
  padding-bottom: 16px;
}

.sports-category-btn {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
  padding: 10px 22px;
  border-radius: 24px;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .3s cubic-bezier(.16,1,.3,1);
  backdrop-filter: blur(8px);
}

.sports-category-btn:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px) scale(1.02);
}

.sports-category-btn.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: var(--white);
  border-color: var(--accent);
  box-shadow: 0 4px 20px var(--accent-glow);
  transform: scale(1.02);
}

.sports-rows {
  padding: 0 48px 60px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.sports-row .row__title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sports-count {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-muted);
  background: rgba(255,255,255,.04);
  padding: 3px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.06);
}

.sports-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.sports-card {
  position: relative;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: transform .3s cubic-bezier(.25,.8,.25,1), box-shadow .3s ease, border-color .2s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.sports-card:hover {
  transform: translateY(-5px);
  border-color: var(--accent);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 12px var(--accent-glow);
  z-index: 10;
}

.sports-card__thumbnail-wrap {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--surface);
}

.sports-card__thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.25,.8,.25,1), filter .3s ease;
}

.sports-card:hover .sports-card__thumbnail {
  transform: scale(1.06);
  filter: brightness(0.75);
}

.sports-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .3s ease;
  background: rgba(0,0,0,.2);
}

.sports-card:hover .sports-card__overlay {
  opacity: 1;
}

.sports-card__play-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(229, 9, 20, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0.7);
  transition: transform .4s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 4px 20px rgba(229, 9, 20, 0.5);
}

.sports-card:hover .sports-card__play-btn {
  transform: scale(1);
}

.sports-card__live-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(229, 9, 20, 0.9);
  color: var(--white);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 4px 10px rgba(229, 9, 20, 0.4);
  backdrop-filter: blur(4px);
}

.sports-card__live-dot {
  width: 6px;
  height: 6px;
  background-color: var(--white);
  border-radius: 50%;
  animation: blinkFast 0.8s infinite alternate;
}

@keyframes blinkFast {
  from { opacity: 0.2; }
  to { opacity: 1; }
}

.sports-card__body {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.sports-card__title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.sports-card__category {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: rgba(255,255,255,.04);
  padding: 3px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
}

.sports-card__ripple {
  position: absolute;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(229, 9, 20, 0.3);
  transform: translate(-50%, -50%);
  animation: rippleOut 0.6s ease-out forwards;
  pointer-events: none;
  z-index: 100;
}

@keyframes rippleOut {
  to {
    width: 400px;
    height: 400px;
    opacity: 0;
  }
}

/* HLS Custom HTML5 Video Player inside Overlay */
.player-overlay__video {
  width: 100%;
  height: 100%;
  border: none;
  background: #000;
  display: block;
}

/* Responsive Overrides for Sports screen */
@media (max-width: 768px) {
  .sports-screen { padding-top: 56px; }
  .sports-hero { height: 50vh; padding: 0 24px 36px; min-height: 320px; }
  .sports-hero__title { font-size: 2rem; }
  .sports-hero__desc { font-size: 0.82rem; }
  .sports-categories { padding: 0 24px; margin-bottom: 24px; gap: 8px; top: 56px; }
  .sports-category-btn { padding: 8px 16px; font-size: 0.78rem; }
  .sports-rows { padding: 0 24px 40px; gap: 30px; }
  .sports-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
  .sports-card__play-btn { width: 40px; height: 40px; }
  .sports-card__play-btn svg { width: 18px; height: 18px; }
}



/* ══════════════════ CONTINUE WATCHING PROGRESS BAR ══════════════════ */
.card__progress{
  position:absolute;bottom:0;left:0;right:0;height:4px;
  background:rgba(255,255,255,.15);z-index:5;
  border-radius:0 0 var(--radius-lg) var(--radius-lg);overflow:hidden;
}
.card__progress-bar{
  height:100%;background:var(--accent-bright);
  border-radius:0 2px 2px 0;
  transition:width .3s ease;
  box-shadow:0 0 8px var(--accent-glow);
}

/* ══════════════════ TOP 10 ROW ══════════════════ */
.row--top10 .row__title{
  background:linear-gradient(90deg, var(--accent), var(--accent-dark));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  font-size:1.3rem;font-weight:900;letter-spacing:.5px;
}
.row--top10 .card{flex:0 0 260px;height:155px}
.row--top10 .card__rank{
  font-size:5rem;
  -webkit-text-stroke:2.5px var(--accent);
  text-shadow:0 0 20px var(--accent-glow), 0 4px 15px rgba(0,0,0,.9);
  bottom:6px;left:8px;
}
.row--top10 .card:hover .card__rank{
  -webkit-text-stroke-color:var(--accent-bright);
  transform:scale(1.1);
}

/* ══════════════════ TOAST NOTIFICATIONS ══════════════════ */
.toast-container{
  position:fixed;bottom:32px;left:50%;
  transform:translateX(-50%);
  z-index:99999;display:flex;flex-direction:column;
  align-items:center;gap:10px;pointer-events:none;
}
.toast{
  pointer-events:auto;
  background:var(--glass-bg);backdrop-filter:blur(20px);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  padding:14px 28px;min-width:260px;max-width:420px;
  box-shadow:0 12px 40px rgba(0,0,0,.6), 0 0 20px var(--accent-subtle);
  display:flex;align-items:center;gap:12px;
  animation:toastSlideIn .45s cubic-bezier(.16,1,.3,1) forwards;
  transition:all .3s ease;
}
.toast--success{border-left:4px solid var(--green)}
.toast--info{border-left:4px solid #3b82f6}
.toast--error{border-left:4px solid var(--accent)}
.toast--warning{border-left:4px solid #f59e0b}
.toast__icon{font-size:1.3rem;flex-shrink:0}
.toast__message{font-size:.88rem;font-weight:500;color:var(--white);line-height:1.4}
.toast.toast--exit{
  animation:toastSlideOut .35s cubic-bezier(.4,0,1,1) forwards;
}
@keyframes toastSlideIn{
  from{opacity:0;transform:translateY(20px) scale(.95)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes toastSlideOut{
  from{opacity:1;transform:translateY(0) scale(1)}
  to{opacity:0;transform:translateY(20px) scale(.9)}
}

/* ══════════════════ FOOTER ══════════════════ */
.site-footer{
  position:relative;z-index:1;
  background:linear-gradient(180deg, transparent 0%, rgba(10,10,15,.95) 20%, var(--bg) 100%);
  padding:80px 48px 40px;
  border-top:1px solid rgba(255,255,255,.03);
}
.footer__inner{
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;
}
.footer__brand{display:flex;flex-direction:column;gap:16px}
.footer__brand-name{
  font-size:1.6rem;font-weight:900;letter-spacing:2px;
  background:linear-gradient(135deg, var(--accent), var(--accent-bright));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.footer__brand-desc{font-size:.84rem;color:var(--text-muted);line-height:1.7;max-width:320px}
.footer__socials{display:flex;gap:12px;margin-top:8px}
.footer__social-link{
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
  display:flex;align-items:center;justify-content:center;
  color:var(--text-muted);transition:all var(--transition-fast);
}
.footer__social-link:hover{
  color:var(--white);background:var(--accent);border-color:var(--accent);
  transform:translateY(-3px);box-shadow:0 6px 20px var(--accent-glow);
}
.footer__column h4{
  font-size:.78rem;font-weight:700;text-transform:uppercase;
  letter-spacing:1.5px;color:var(--text-muted);margin-bottom:16px;
}
.footer__column ul{display:flex;flex-direction:column;gap:10px}
.footer__column ul li a{
  font-size:.85rem;color:rgba(255,255,255,.5);
  transition:color var(--transition-fast),padding-left var(--transition-fast);
}
.footer__column ul li a:hover{color:var(--white);padding-left:4px}
.footer__bottom{
  max-width:1200px;margin:40px auto 0;
  padding-top:24px;border-top:1px solid rgba(255,255,255,.04);
  display:flex;align-items:center;justify-content:space-between;
}
.footer__copy{font-size:.76rem;color:rgba(255,255,255,.3);letter-spacing:.3px}
.footer__badges{display:flex;gap:8px}
.footer__badge{
  padding:5px 12px;border-radius:4px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
  font-size:.68rem;font-weight:600;color:var(--text-muted);letter-spacing:.5px;
}

@media(max-width:900px){
  .footer__inner{grid-template-columns:1fr 1fr;gap:32px}
}
@media(max-width:600px){
  .site-footer{padding:60px 16px 32px}
  .footer__inner{grid-template-columns:1fr;gap:24px}
  .footer__bottom{flex-direction:column;gap:12px;text-align:center}
}

/* ══════════════════ IMPROVED BACK TO TOP ══════════════════ */
.back-to-top{
  position:fixed;bottom:28px;right:28px;
  width:48px;height:48px;border-radius:50%;
  background:var(--glass-bg);backdrop-filter:blur(16px);
  border:1px solid var(--glass-border);color:var(--white);
  display:flex;align-items:center;justify-content:center;
  z-index:8000;cursor:pointer;
  box-shadow:0 8px 28px rgba(0,0,0,.5);
  transition:all .4s cubic-bezier(.175,.885,.32,1.275);
  opacity:1;
}
.back-to-top::before{
  content:'';position:absolute;inset:-3px;border-radius:50%;
  background:conic-gradient(var(--accent), transparent 30%);
  opacity:0;transition:opacity .3s;animation:spin 2s linear infinite;
}
.back-to-top:hover::before{opacity:1}
.back-to-top svg{position:relative;z-index:1}
.back-to-top.hidden{opacity:0;transform:translateY(20px) scale(.7);pointer-events:none}
.back-to-top:hover{
  background:var(--accent);border-color:var(--accent);
  transform:scale(1.12) translateY(-4px);
  box-shadow:0 10px 35px var(--accent-glow);
}

/* ══════════════════ KEYBOARD SHORTCUTS HINT ══════════════════ */
.kbd-hint{
  position:fixed;bottom:28px;left:28px;z-index:7000;
  display:flex;align-items:center;gap:8px;
  background:var(--glass-bg);backdrop-filter:blur(12px);
  border:1px solid var(--glass-border);border-radius:var(--radius-lg);
  padding:8px 14px;opacity:0;transition:opacity .4s;pointer-events:none;
}
.kbd-hint.visible{opacity:1}
.kbd-hint kbd{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
  border-radius:4px;padding:2px 7px;font-size:.7rem;font-weight:700;
  color:var(--white);font-family:var(--font);
}
.kbd-hint span{font-size:.72rem;color:var(--text-muted)}



/* ══════════════════ V3 EXTRA PREMIUM POLISH ══════════════════ */

/* Smoother page transitions */
.app{animation:appFadeIn .35s ease forwards}
@keyframes appFadeIn{from{opacity:0}to{opacity:1}}

/* Ultra-smooth card play icon pulse */
.card:hover .card__play-icon{
  opacity:1;transform:translate(-50%,-50%) scale(1);
}

/* Better hover glow for cards */
.card::before{
  content:'';position:absolute;inset:0;border-radius:var(--radius-lg);
  background:linear-gradient(135deg,var(--accent-glow),transparent 60%);
  opacity:0;transition:opacity .3s ease;z-index:1;pointer-events:none;
}
.card:hover::before{opacity:.3}

/* Shimmer loading effect for images */
@keyframes shimmer{
  0%{background-position:-200% 0}
  100%{background-position:200% 0}
}
.card__img[src=""]{
  background:linear-gradient(90deg,var(--surface) 25%,rgba(255,255,255,.05) 50%,var(--surface) 75%);
  background-size:200% 100%;animation:shimmer 1.5s infinite;
}

/* Premium info modal transitions */
.info-modal__content{
  animation:modalSlide .45s cubic-bezier(.16,1,.3,1);
  transform-origin:center;
}

/* Smoother row arrow hover */
.row__arrow{
  transition:opacity .3s ease, color .2s ease, background .3s ease;
}
.row__arrow:hover{
  color:var(--accent-bright);
  background:linear-gradient(90deg,rgba(6,6,8,.95) 0%,transparent 100%);
}
.row__arrow--right:hover{
  background:linear-gradient(-90deg,rgba(6,6,8,.95) 0%,transparent 100%);
}

/* Premium notification badge glow */
.notif-badge:not(.hidden){
  animation:notifGlow 2s infinite alternate;
}
@keyframes notifGlow{
  from{box-shadow:0 0 6px var(--accent-glow)}
  to{box-shadow:0 0 14px var(--accent-bright),0 0 28px var(--accent-glow)}
}

/* Improved player loading - cinematic feel */
.player-loader{
  background:radial-gradient(ellipse at center, rgba(15,15,20,.95), rgba(0,0,0,.98));
}
.player-loader .spinner-ring{
  width:56px;height:56px;
  border-width:3px;
  box-shadow:0 0 30px var(--accent-glow), inset 0 0 20px var(--accent-subtle);
}

/* Ultra-smooth player video fade-in */
.player-overlay__video{
  transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .4s ease !important;
}

/* Settings modal - scrollable with fade edges */
.modal__body{
  max-height:70vh;overflow-y:auto;
  mask-image:linear-gradient(to bottom, transparent 0%, black 3%, black 97%, transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, black 3%, black 97%, transparent 100%);
}

/* Focus ring for accessibility */
.card:focus-visible,.search-card:focus-visible,.btn:focus-visible,.navbar__icon-btn:focus-visible{
  outline:2px solid var(--accent-bright);outline-offset:3px;
}

/* Smooth row title entrance */
.row{animation:rowSlideIn .4s cubic-bezier(.25,.8,.25,1) both}
.row:nth-child(1){animation-delay:0s}
.row:nth-child(2){animation-delay:.04s}
.row:nth-child(3){animation-delay:.08s}
.row:nth-child(4){animation-delay:.12s}
.row:nth-child(5){animation-delay:.16s}
.row:nth-child(6){animation-delay:.2s}
.row:nth-child(7){animation-delay:.24s}
.row:nth-child(8){animation-delay:.28s}
@keyframes rowSlideIn{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}

/* Genre rating badge colors */
.card__info-meta .rating-high{color:var(--green)}
.card__info-meta .rating-med{color:var(--gold)}
.card__info-meta .rating-low{color:var(--accent)}

/* Improved sports card glow on hover */
.sports-card::after{
  content:'';position:absolute;inset:0;
  border-radius:var(--radius-lg);
  background:radial-gradient(circle at 50% 0%, var(--accent-glow), transparent 70%);
  opacity:0;transition:opacity .4s ease;pointer-events:none;
}
.sports-card:hover::after{opacity:.3}

/* Netflix-style profile hover glow */
.profile-card__avatar{
  position:relative;
}
.profile-card__avatar::before{
  content:'';position:absolute;inset:-3px;border-radius:calc(var(--radius-lg) + 3px);
  background:var(--accent);
  opacity:0;transition:opacity .4s ease;z-index:-1;
}
.profile-card:hover .profile-card__avatar::before{opacity:.6}

/* Toast improvements */
.toast{
  animation:toastSlideIn .35s cubic-bezier(.25,.8,.25,1) forwards !important;
}
@keyframes toastSpringIn{
  from{opacity:0;transform:translateY(16px) scale(.95)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* Improved back-to-top with rotation on hover */
.back-to-top svg{transition:transform .25s ease}
.back-to-top:hover svg{transform:translateY(-1px)}

/* Hero title text styling */
.hero__title{
  color: var(--white);
  text-shadow: 0 4px 20px rgba(0,0,0,.6);
}

/* Ultra-smooth navbar transition on scroll */
.navbar{
  transition:all .5s cubic-bezier(.16,1,.3,1),backdrop-filter .3s ease;
}

/* Improved server button active state */
.server-btn.active{
  background:linear-gradient(135deg,var(--accent),var(--accent-dark));
  color:var(--white);border-color:var(--accent);
  box-shadow:0 4px 16px var(--accent-glow);
}
.server-btn{transition:all .2s cubic-bezier(.25,.8,.25,1)}
.server-btn:hover{transform:translateY(-1px)}

/* Episode card smooth interactions */
.episode-card{transition:all .25s cubic-bezier(.25,.8,.25,1)}
.episode-card:hover{
  transform:translateX(4px);
  box-shadow:0 4px 16px rgba(0,0,0,.3);
}

/* Player idle mode - super smooth fade */
.player-overlay__header{
  transition:opacity .8s cubic-bezier(.4,0,.2,1), transform .6s ease;
}
.player-overlay.idle .player-overlay__header{
  opacity:0;transform:translateY(-10px);
}

/* ══════════════════ SMOOTH SCROLL MOMENTUM ══════════════════ */
html {
  scroll-behavior: smooth;
  overscroll-behavior: none;
}

/* GPU acceleration for animated elements */
.card, .search-card, .sports-card, .profile-card, .btn, .navbar__icon-btn {
  transform: translateZ(0);
  -webkit-font-smoothing: subpixel-antialiased;
}

/* Smoother image loading */
img {
  transition: opacity .3s ease;
}

/* Better focus states for keyboard navigation */
*:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 3px;
  border-radius: var(--radius);
}

/* Smooth page content transitions */
.rows-container {
  animation: contentFadeUp .35s cubic-bezier(.25,.8,.25,1) forwards;
}
@keyframes contentFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Enhanced server drawer animation */
.server-drawer {
  transition: transform .5s cubic-bezier(.16,1,.3,1) !important;
}

/* Smoother profile selection transition */
.profile-screen {
  transition: opacity .5s cubic-bezier(.4,0,.2,1), transform .5s ease;
}

/* Better hover feedback for interactive elements */
button, a, [role="button"] {
  -webkit-tap-highlight-color: transparent;
}

/* Smooth color transitions for theme changes */
body {
  transition: background-color .5s ease, color .3s ease;
}

/* Improved scrollbar for sports grid */
.sports-grid {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.1) transparent;
}

/* Sports row stagger animation */
.sports-row {
  animation: rowSlideIn .6s cubic-bezier(.16,1,.3,1) both;
}
.sports-row:nth-child(1) { animation-delay: .05s; }
.sports-row:nth-child(2) { animation-delay: .12s; }
.sports-row:nth-child(3) { animation-delay: .19s; }
.sports-row:nth-child(4) { animation-delay: .26s; }
.sports-row:nth-child(5) { animation-delay: .33s; }

/* Smoother navbar brand interaction */
.navbar__logo {
  transition: transform .4s cubic-bezier(.16,1,.3,1), filter .4s ease;
}

/* Better modal backdrop blur */
.info-modal__backdrop, .modal-overlay__backdrop {
  animation: backdropFadeIn .3s ease forwards;
}
@keyframes backdropFadeIn {
  from { opacity: 0; backdrop-filter: blur(0); }
  to { opacity: 1; backdrop-filter: blur(12px); }
}

/* ══════════════════ REELS SCREEN ══════════════════ */
.reels-screen{position:fixed;inset:0;z-index:9100;background:var(--black);display:flex;align-items:center;justify-content:center;padding-top:64px}
.reels-container{position:relative;width:100%;max-width:480px;height:calc(100vh - 84px);border-radius:var(--radius-xl);overflow:hidden;background:var(--bg-card);box-shadow:0 20px 60px rgba(0,0,0,.8);border:1px solid rgba(255,255,255,.05)}
.reels-card{position:relative;width:100%;height:100%}
.reels-video-wrap{width:100%;height:100%;background:var(--black);display:flex;align-items:center;justify-content:center;overflow:hidden}
.reels-video-wrap iframe,.reels-video-wrap video{width:100%;height:100%;border:none;object-fit:cover}
.reels-video-wrap img{width:100%;height:100%;object-fit:cover;transition:opacity .3s ease}
.reels-placeholder{display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--text-muted);font-size:.85rem}
.reels-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:28px;background:linear-gradient(transparent 30%,rgba(0,0,0,.4) 60%,rgba(0,0,0,.9) 100%);pointer-events:none}
.reels-info{margin-bottom:18px}
.reels-info__title{font-size:1.5rem;font-weight:800;color:var(--white);margin-bottom:8px;text-shadow:0 2px 12px rgba(0,0,0,.9);line-height:1.2}
.reels-info__desc{font-size:.82rem;color:rgba(255,255,255,.75);line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 1px 4px rgba(0,0,0,.8)}
.reels-info__meta{font-size:.75rem;color:var(--green);font-weight:600;margin-top:8px;text-shadow:0 1px 4px rgba(0,0,0,.8)}
.reels-actions{display:flex;gap:10px;pointer-events:auto}
.reels-action-btn{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--white);padding:10px 14px;border-radius:var(--radius-lg);background:rgba(255,255,255,.1);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.12);transition:all .2s ease;font-size:.65rem;font-weight:600;letter-spacing:.3px}
.reels-action-btn:hover{background:var(--accent);border-color:var(--accent);transform:translateY(-2px)}
.reels-action-btn:active{transform:scale(.95)}
.reels-progress{position:absolute;top:0;left:0;right:0;height:3px;background:rgba(255,255,255,.12);z-index:10}
.reels-progress__bar{height:100%;background:var(--accent-bright);border-radius:2px;width:0;box-shadow:0 0 6px var(--accent-glow)}
.reels-nav{position:absolute;top:50%;right:-56px;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px;align-items:center}
.reels-nav__btn{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:var(--white);display:flex;align-items:center;justify-content:center;transition:all .2s ease}
.reels-nav__btn:hover{background:var(--accent);border-color:var(--accent)}
.reels-nav__counter{font-size:.68rem;color:var(--text-muted);font-weight:600;letter-spacing:.5px}

@media(max-width:600px){
  .reels-screen{padding-top:56px}
  .reels-container{max-width:100%;height:calc(100vh - 56px);border-radius:0;border:none}
  .reels-nav{right:12px;top:auto;bottom:140px;transform:none}
  .reels-overlay{padding:20px}
  .reels-info__title{font-size:1.2rem}
}

/* ══════════════════ MUSIC SCREEN ══════════════════ */
.music-screen{padding:calc(76px + 32px) 48px 120px;min-height:100vh;animation:fadeIn .4s ease}
.music-header{margin-bottom:32px}
.music-header__title{font-size:2rem;font-weight:800;color:var(--white);margin-bottom:6px}
.music-header__subtitle{font-size:.88rem;color:var(--text-muted)}
.music-player{background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);border-radius:var(--radius-xl);padding:24px;display:flex;flex-direction:column;gap:16px;box-shadow:0 12px 40px rgba(0,0,0,.4);margin-bottom:24px}
.music-player__top{display:flex;gap:20px;align-items:center}
.music-player__artwork{width:90px;height:90px;border-radius:var(--radius-lg);background:var(--surface);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.music-player__artwork img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.music-player__artwork.playing{animation:artworkSpin 8s linear infinite}
@keyframes artworkSpin{to{transform:rotate(360deg)}}
.music-player__details{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.music-player__title{font-size:1rem;font-weight:700;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.music-player__artist{font-size:.78rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.music-player__progress{display:flex;flex-direction:column;gap:4px;margin-top:4px}
.music-progress-slider{width:100%;height:4px;-webkit-appearance:none;appearance:none;background:rgba(255,255,255,.12);border-radius:2px;outline:none;cursor:pointer}
.music-progress-slider::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--accent-bright);box-shadow:0 0 8px var(--accent-glow);cursor:pointer}
.music-player__times{display:flex;justify-content:space-between;font-size:.7rem;color:var(--text-muted)}
.music-player__controls{display:flex;align-items:center;justify-content:center;gap:16px}
.music-ctrl-btn{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:var(--text-muted);display:flex;align-items:center;justify-content:center;transition:all .25s ease}
.music-ctrl-btn:hover{color:var(--white);background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)}
.music-ctrl-btn.active{color:var(--accent-bright);border-color:var(--accent)}
.music-ctrl-btn--play{width:52px;height:52px;background:var(--accent);border-color:var(--accent);color:var(--white)}
.music-ctrl-btn--play:hover{background:var(--accent-bright);transform:scale(1.08);box-shadow:0 4px 20px var(--accent-glow)}
.music-volume{display:flex;align-items:center;gap:8px;color:var(--text-muted);margin-left:12px}
.music-volume-slider{width:80px;height:3px;-webkit-appearance:none;appearance:none;background:rgba(255,255,255,.12);border-radius:2px;outline:none;cursor:pointer}
.music-volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;border-radius:50%;background:var(--white);cursor:pointer}
.music-add-section{display:flex;align-items:center;gap:12px;margin-bottom:28px;flex-wrap:wrap}
.music-add-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;background:rgba(255,255,255,.04);border:1px dashed rgba(255,255,255,.15);border-radius:var(--radius-lg);color:var(--text);font-size:.85rem;font-weight:600;cursor:pointer;transition:all .25s ease;flex-shrink:0}
.music-add-btn:hover{background:rgba(255,255,255,.08);border-color:var(--accent);color:var(--white)}
.music-url-input-wrap{display:flex;gap:8px;flex:1;min-width:240px}
.music-url-input{flex:1;padding:11px 16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);color:var(--white);font-size:.85rem;outline:none;transition:border-color .2s ease}
.music-url-input:focus{border-color:var(--accent)}
.music-url-input::placeholder{color:var(--text-muted)}
.music-url-add-btn{padding:11px 20px;background:var(--accent);color:var(--white);border-radius:var(--radius);font-size:.82rem;font-weight:700;cursor:pointer;transition:all .2s ease;border:none}
.music-url-add-btn:hover{background:var(--accent-bright);transform:translateY(-1px)}
.music-add-hint{font-size:.72rem;color:var(--text-muted);width:100%;margin-top:4px}
.music-playlist{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.04);border-radius:var(--radius-xl);padding:24px;overflow:hidden}
.music-playlist__title{font-size:1rem;font-weight:700;color:var(--white);margin-bottom:16px;display:flex;align-items:center;gap:8px}
.music-playlist__title span{font-size:.75rem;color:var(--text-muted);font-weight:500}
.music-playlist__list{display:flex;flex-direction:column;gap:4px;max-height:400px;overflow-y:auto}
.music-playlist__empty{display:flex;flex-direction:column;align-items:center;gap:12px;padding:40px 20px;color:var(--text-muted);font-size:.82rem;text-align:center}
.music-track{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:var(--radius);cursor:pointer;transition:all .2s ease;border:1px solid transparent}
.music-track:hover{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.06)}
.music-track.active{background:rgba(229,9,20,.08);border-color:rgba(229,9,20,.2)}
.music-track__num{font-size:.75rem;color:var(--text-muted);min-width:20px;text-align:center;font-weight:600}
.music-track.active .music-track__num{color:var(--accent-bright)}
.music-track__info{flex:1;min-width:0}
.music-track__name{font-size:.85rem;font-weight:600;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.music-track__duration{font-size:.7rem;color:var(--text-muted)}
.music-track__remove{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.04);color:var(--text-muted);display:flex;align-items:center;justify-content:center;font-size:1rem;opacity:0;transition:all .2s ease}
.music-track:hover .music-track__remove{opacity:1}
.music-track__remove:hover{background:var(--accent);color:var(--white)}

@media(max-width:600px){
  .music-screen{padding:calc(56px + 20px) 16px 100px}
  .music-player{padding:20px}
  .music-player__controls{gap:10px}
  .music-volume{display:none}
}


/* ══════════════════════════════════════════════════════════════════
   MOIZ SRC — MASSIVE UPGRADE v4.0
   Mini Player • Cinema Mode • Skeleton Loading • Reels Swipe
   Card Shine • Equalizer • Mobile Menu • Better Scrollbar
   ══════════════════════════════════════════════════════════════════ */

/* ── FLOATING MINI MUSIC PLAYER BAR ─────────────────────────── */
.mini-music-player {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 8500;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 24px;
  background: rgba(10, 10, 16, 0.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.6);
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.mini-music-player.visible {
  transform: translateY(0);
}
.mini-music-player__artwork {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.mini-music-player__artwork svg {
  width: 22px;
  height: 22px;
  color: var(--accent-bright);
}
.mini-music-player__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mini-music-player__title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mini-music-player__artist {
  font-size: 0.7rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mini-music-player__controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.mini-music-player__btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all var(--transition-fast);
}
.mini-music-player__btn:hover {
  color: var(--white);
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.1);
}
.mini-music-player__btn--play {
  width: 38px;
  height: 38px;
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
}
.mini-music-player__btn--play:hover {
  background: var(--accent-bright);
  box-shadow: 0 0 16px var(--accent-glow);
}
.mini-music-player__progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.06);
}
.mini-music-player__progress-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
  transition: width 0.3s linear;
  box-shadow: 0 0 8px var(--accent-glow);
}
.mini-music-player__close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 1.1rem;
  transition: all var(--transition-fast);
  margin-left: 8px;
}
.mini-music-player__close:hover {
  color: var(--white);
  background: rgba(255, 255, 255, 0.08);
}

/* ── REELS SWIPE UP INDICATOR ────────────────────────────────── */
.reels-swipe-indicator {
  position: absolute;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  animation: swipeUpFade 2.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 10;
}
.reels-swipe-indicator__arrow {
  width: 24px;
  height: 24px;
  animation: swipeUpBounce 1.5s ease-in-out infinite;
}
@keyframes swipeUpBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes swipeUpFade {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.9; }
}

/* ── CINEMA MODE ─────────────────────────────────────────────── */
.cinema-mode-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 7999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.cinema-mode-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
body.cinema-mode .navbar {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
body.cinema-mode .player-overlay {
  z-index: 8500;
}
.cinema-mode-btn {
  background: rgba(255, 255, 255, 0.06);
  color: white;
  padding: 7px 16px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.82rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
  transition: all 0.2s;
}
.cinema-mode-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.15);
}
.cinema-mode-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
}

/* ── CARD HOVER GRADIENT SHINE SWEEP ─────────────────────────── */
.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.06),
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0.06),
    transparent
  );
  transform: skewX(-20deg);
  transition: left 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
}
.card:hover::before {
  left: 130%;
}

/* ── MOBILE HAMBURGER MENU ───────────────────────────────────── */
.mobile-menu-btn {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  align-items: center;
  justify-content: center;
  color: var(--text);
  transition: all var(--transition-fast);
  cursor: pointer;
  flex-shrink: 0;
}
.mobile-menu-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
}
.mobile-menu-btn__bar {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: all 0.3s ease;
  position: relative;
}
.mobile-menu-btn__bar::before,
.mobile-menu-btn__bar::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: all 0.3s ease;
}
.mobile-menu-btn__bar::before { top: -6px; }
.mobile-menu-btn__bar::after { top: 6px; }
.mobile-menu-btn.open .mobile-menu-btn__bar {
  background: transparent;
}
.mobile-menu-btn.open .mobile-menu-btn__bar::before {
  top: 0;
  transform: rotate(45deg);
}
.mobile-menu-btn.open .mobile-menu-btn__bar::after {
  top: 0;
  transform: rotate(-45deg);
}

/* Mobile nav overlay */
.mobile-nav-overlay {
  position: fixed;
  inset: 0;
  top: 76px;
  z-index: 7900;
  background: rgba(6, 6, 8, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  padding: 32px 24px;
  gap: 8px;
  transform: translateX(-100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.mobile-nav-overlay.open {
  transform: translateX(0);
}
.mobile-nav-overlay a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text-muted);
  border-radius: var(--radius-lg);
  transition: all var(--transition-fast);
}
.mobile-nav-overlay a:hover,
.mobile-nav-overlay a.active {
  color: var(--white);
  background: rgba(255, 255, 255, 0.05);
}
.mobile-nav-overlay a.active {
  border-left: 3px solid var(--accent);
  color: var(--accent-bright);
}

@media (max-width: 900px) {
  .mobile-menu-btn { display: flex; }
  .navbar__links { display: none !important; }
  .navbar { padding: 0 16px; }
}

/* ── NOW PLAYING EQUALIZER ANIMATION ─────────────────────────── */
.now-playing-eq {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 16px;
  margin-right: 8px;
  vertical-align: middle;
}
.now-playing-eq__bar {
  width: 3px;
  background: var(--accent-bright);
  border-radius: 2px;
  animation: eqBounce 0.8s ease-in-out infinite alternate;
}
.now-playing-eq__bar:nth-child(1) { height: 60%; animation-delay: 0s; }
.now-playing-eq__bar:nth-child(2) { height: 100%; animation-delay: 0.15s; }
.now-playing-eq__bar:nth-child(3) { height: 40%; animation-delay: 0.3s; }
.now-playing-eq__bar:nth-child(4) { height: 80%; animation-delay: 0.45s; }
.now-playing-eq__bar:nth-child(5) { height: 50%; animation-delay: 0.6s; }
@keyframes eqBounce {
  0% { transform: scaleY(0.3); }
  100% { transform: scaleY(1); }
}
.now-playing-eq--paused .now-playing-eq__bar {
  animation-play-state: paused;
}

/* ── SKELETON LOADING PLACEHOLDERS ───────────────────────────── */
.skeleton-card {
  position: relative;
  width: 100%;
  aspect-ratio: 2/3;
  border-radius: var(--radius);
  background: var(--bg-card);
  overflow: hidden;
}
.skeleton-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.04) 20%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.04) 80%,
    transparent 100%
  );
  animation: skeletonShimmer 1.8s ease-in-out infinite;
}
@keyframes skeletonShimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.skeleton-row {
  display: flex;
  gap: 12px;
  padding: 0 48px;
  margin-bottom: 40px;
  overflow: hidden;
}
.skeleton-row__title {
  width: 180px;
  height: 22px;
  border-radius: 6px;
  background: var(--bg-card);
  margin-bottom: 14px;
  margin-left: 48px;
  position: relative;
  overflow: hidden;
}
.skeleton-row__title::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.06) 50%,
    transparent 100%
  );
  animation: skeletonShimmer 1.8s ease-in-out infinite;
}

/* ── IMPROVED SCROLLBAR (THEME-AWARE) ────────────────────────── */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--accent-dark), rgba(255, 255, 255, 0.1));
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--accent), var(--accent-dark));
  background-clip: padding-box;
}
::-webkit-scrollbar-corner {
  background: transparent;
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--accent-dark) rgba(255, 255, 255, 0.02);
}

/* ── CONTEXT MENU (Quick Play) ───────────────────────────────── */
.card-context-menu {
  position: fixed;
  z-index: 9999;
  min-width: 180px;
  background: rgba(12, 12, 18, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7);
  padding: 6px 0;
  animation: dropdownReveal 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.card-context-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: 0.82rem;
  color: var(--text);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.card-context-menu__item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--white);
  padding-left: 20px;
}
.card-context-menu__item svg {
  flex-shrink: 0;
  color: var(--text-muted);
  transition: color var(--transition-fast);
}
.card-context-menu__item:hover svg {
  color: var(--accent-bright);
}
.card-context-menu__divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  margin: 4px 0;
}

/* ── CONTINUE WATCHING ROW PROGRESS BAR ──────────────────────── */
.card__progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: rgba(255, 255, 255, 0.15);
  z-index: 3;
}
.card__progress-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 0 2px 0 0;
  box-shadow: 0 0 6px var(--accent-glow);
  transition: width 0.3s ease;
}

/* ── REELS AUTO-ADVANCE INDICATOR ────────────────────────────── */
.reels-auto-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--accent-bright);
  letter-spacing: 0.5px;
  border: 1px solid rgba(229, 9, 20, 0.2);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 6px;
}
.reels-auto-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-bright);
  animation: pulseDot 1.5s infinite;
}
@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.7); }
}

/* ── DOUBLE-TAP HEART ANIMATION (Reels) ──────────────────────── */
.reels-heart-anim {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  font-size: 80px;
  color: var(--accent-bright);
  pointer-events: none;
  z-index: 100;
  animation: heartPop 0.8s cubic-bezier(0.17, 0.89, 0.32, 1.49) forwards;
  text-shadow: 0 0 30px var(--accent-glow);
}
@keyframes heartPop {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
  50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* ── KEYBOARD SHORTCUTS TOAST ────────────────────────────────── */
.kbd-shortcuts-hint {
  position: fixed;
  bottom: 80px;
  right: 20px;
  background: rgba(12, 12, 18, 0.9);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  font-size: 0.72rem;
  color: var(--text-muted);
  z-index: 9000;
  display: flex;
  flex-direction: column;
  gap: 6px;
  animation: fadeIn 0.3s ease;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}
.kbd-shortcuts-hint kbd {
  display: inline-block;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--white);
  margin-right: 6px;
}

/* ══════════════════ MUSIC SEARCH RESULTS ══════════════════ */
.music-search-results{background:rgba(229,9,20,.03);border:1px solid rgba(229,9,20,.15);border-radius:var(--radius-xl);padding:16px;margin-bottom:16px;animation:fadeIn .3s ease}
.music-search-results__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.06)}
.music-search-results__header h4{font-size:.88rem;font-weight:700;color:var(--white)}
.music-search-results__close{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.06);color:var(--text-muted);display:flex;align-items:center;justify-content:center;font-size:1.1rem;cursor:pointer;transition:all .2s ease}
.music-search-results__close:hover{background:var(--accent);color:var(--white)}
.music-search-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--radius);cursor:pointer;transition:all .2s ease;border:1px solid transparent}
.music-search-item:hover{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)}
.music-search-item__img{width:44px;height:44px;border-radius:var(--radius);object-fit:cover;background:var(--surface);flex-shrink:0}
.music-search-item__info{flex:1;min-width:0}
.music-search-item__name{font-size:.84rem;font-weight:600;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.music-search-item__artist{font-size:.7rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.music-search-item__add{width:30px;height:30px;border-radius:50%;background:rgba(229,9,20,.15);border:1px solid rgba(229,9,20,.3);color:var(--accent-bright);display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:700;cursor:pointer;transition:all .2s ease;flex-shrink:0}
.music-search-item__add:hover{background:var(--accent);color:var(--white);border-color:var(--accent);transform:scale(1.1)}


/* ══════════════════ SMOOTHNESS & POLISH IMPROVEMENTS ══════════════════ */

/* ── Smoother Music Progress Slider ── */
.music-progress-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,.1);
  border-radius: 4px;
  outline: none;
  cursor: pointer;
  transition: height .2s ease;
}
.music-progress-slider:hover {
  height: 6px;
}
.music-progress-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent-bright);
  box-shadow: 0 0 8px var(--accent-glow);
  cursor: grab;
  transition: transform .15s ease, box-shadow .15s ease;
}
.music-progress-slider:hover::-webkit-slider-thumb {
  transform: scale(1.4);
  box-shadow: 0 0 14px var(--accent-glow), 0 0 24px rgba(229,9,20,.3);
}
.music-progress-slider:active::-webkit-slider-thumb {
  cursor: grabbing;
  transform: scale(1.6);
}
.music-progress-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent-bright);
  border: none;
  box-shadow: 0 0 8px var(--accent-glow);
  cursor: grab;
  transition: transform .15s ease, box-shadow .15s ease;
}
.music-progress-slider:hover::-moz-range-thumb {
  transform: scale(1.4);
  box-shadow: 0 0 14px var(--accent-glow);
}

/* ── Better Music Player Artwork Transition ── */
.music-player__artwork {
  transition: transform .4s cubic-bezier(.16,1,.3,1), opacity .3s ease, box-shadow .3s ease;
}
.music-player__artwork.track-changing {
  transform: scale(0.92) rotate(-2deg);
  opacity: 0.5;
}
.music-player__artwork img {
  transition: opacity .4s ease, transform .5s cubic-bezier(.16,1,.3,1);
}

/* ── Z-Index Fix: Modals Above Everything ── */
.modal-overlay { z-index: 9600; }
.modal-backdrop { z-index: 9500; }
#settings-modal-backdrop { z-index: 9500; }
#settings-modal { z-index: 9550; }
.info-modal { z-index: 9400; }
.player-overlay { z-index: 9200; }

/* ── Pulse Animation for Play Button When Paused ── */
@keyframes playBtnPulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); }
  50% { box-shadow: 0 0 0 8px rgba(229,9,20,0); }
}
.music-ctrl-btn--play.paused {
  animation: playBtnPulse 2s ease-in-out infinite;
}

/* ── Smooth Settings Modal Appearance ── */
#settings-modal {
  animation: settingsModalIn .35s cubic-bezier(.16,1,.3,1) forwards;
  transform-origin: top center;
}
@keyframes settingsModalIn {
  from {
    opacity: 0;
    transform: translateY(-12px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
#settings-modal-backdrop {
  transition: opacity .3s ease;
}

/* ── Smooth Volume Slider ── */
.music-volume-slider {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: rgba(255,255,255,.12);
  border-radius: 4px;
  outline: none;
  cursor: pointer;
}
.music-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 0 6px rgba(255,255,255,.3);
  transition: transform .15s ease;
}
.music-volume-slider:hover::-webkit-slider-thumb {
  transform: scale(1.3);
}

/* ── Smooth Track Fade Transition ── */
.music-player.track-transitioning .music-player__details {
  opacity: 0.6;
  transition: opacity .2s ease;
}
.music-player .music-player__details {
  transition: opacity .3s ease;
}

/* ── Playlist Active Track Highlight Smooth ── */
.music-track.active {
  transition: background .3s ease, border-color .3s ease, transform .2s ease;
}
.music-track.scroll-highlight {
  animation: trackHighlight .6s ease;
}
@keyframes trackHighlight {
  0%, 100% { background: inherit; }
  50% { background: rgba(229,9,20,.12); }
}


/* ══════════════════ MUSIC PLAYER ══════════════════ */
.music-screen {
  padding: calc(var(--navbar-h) + 32px) 48px 80px;
  max-width: 900px;
  margin: 0 auto;
  min-height: 100vh;
}
.music-header { margin-bottom: 32px; }
.music-header__title { font-size: 2rem; font-weight: 800; color: var(--white); margin-bottom: 8px; }
.music-header__subtitle { font-size: .88rem; color: var(--text-muted); }

.music-player {
  background: var(--bg-elevated);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: 28px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-elevated);
}
.music-player__top {
  display: flex;
  gap: 24px;
  align-items: center;
  margin-bottom: 24px;
}
.music-player__artwork {
  width: 100px;
  height: 100px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-card);
}
.music-player__details { flex: 1; min-width: 0; }
.music-player__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.music-player__artist { font-size: .82rem; color: var(--text-muted); margin-bottom: 14px; }
.music-player__progress { display: flex; flex-direction: column; gap: 6px; }
.music-progress-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 4px;
  background: rgba(255,255,255,.12);
  outline: none;
  cursor: pointer;
}
.music-progress-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent-bright);
  cursor: pointer;
  box-shadow: 0 0 8px var(--accent-glow);
}
.music-player__times {
  display: flex;
  justify-content: space-between;
  font-size: .72rem;
  color: var(--text-muted);
}

.music-player__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.music-ctrl-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.music-ctrl-btn:hover { background: rgba(255,255,255,.12); color: var(--white); transform: scale(1.1); }
.music-ctrl-btn--play {
  width: 52px;
  height: 52px;
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
  box-shadow: 0 0 20px var(--accent-glow);
}
.music-ctrl-btn--play:hover { background: var(--accent-bright); border-color: var(--accent-bright); transform: scale(1.1); }
.music-volume {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  margin-left: 12px;
}
.music-volume-slider {
  -webkit-appearance: none;
  width: 80px;
  height: 4px;
  border-radius: 4px;
  background: rgba(255,255,255,.12);
  outline: none;
  cursor: pointer;
}
.music-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--white);
  cursor: pointer;
}

.music-add-section {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.music-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-lg);
  color: var(--text);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}
.music-add-btn:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2); color: var(--white); }
.music-url-input-wrap { display: flex; gap: 0; flex: 1; min-width: 200px; }
.music-url-input {
  flex: 1;
  padding: 11px 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-right: none;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  color: var(--white);
  font-size: .88rem;
  outline: none;
  transition: border-color var(--transition-fast);
}
.music-url-input:focus { border-color: var(--accent); }
.music-url-add-btn {
  padding: 11px 22px;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  color: var(--white);
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--transition-fast);
  white-space: nowrap;
}
.music-url-add-btn:hover { background: var(--accent-bright); }

.music-playlist { }
.music-playlist__title {
  font-size: .9rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
}
.music-playlist__title span { font-weight: 400; }
.music-playlist__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 48px 20px;
  color: var(--text-muted);
  font-size: .85rem;
  text-align: center;
  border: 1px dashed rgba(255,255,255,.06);
  border-radius: var(--radius-lg);
}

.music-track {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.02);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
  margin-bottom: 6px;
}
.music-track:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.06); }
.music-track--active { background: rgba(229,9,20,.08); border-color: rgba(229,9,20,.2); }
.music-track--active .music-track__name { color: var(--accent-bright); }
.music-track__num {
  width: 24px;
  text-align: center;
  font-size: .78rem;
  color: var(--text-muted);
  flex-shrink: 0;
}
.music-track__info { flex: 1; min-width: 0; }
.music-track__name {
  font-size: .9rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.music-track__artist { font-size: .76rem; color: var(--text-muted); }
.music-track__remove {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}
.music-track:hover .music-track__remove { opacity: 1; }
.music-track__remove:hover { background: rgba(229,9,20,.2); color: var(--accent-bright); }

@media (max-width: 600px) {
  .music-screen { padding: calc(var(--navbar-h) + 16px) 16px 60px; }
  .music-player__top { flex-direction: column; text-align: center; }
  .music-add-section { flex-direction: column; }
  .music-url-input-wrap { width: 100%; }
  .music-player__controls { gap: 12px; }
  .music-volume { display: none; }
}