/* ==========================================================================
   Base & Reset
   ========================================================================== */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --nex-bg: #08000f;
  --nex-surface: #0f0020;
  --nex-card: #130028;
  --nex-purple: #7c3aed;
  --nex-glow: #a855f7;
  --nex-muted: #9d8fc0;
  --nex-border: rgba(168, 85, 247, 0.2);
}

body {
  -webkit-tap-highlight-color: transparent;
}

/* Safe Area Utilities for Mobile */
.pt-safe { padding-top: calc(var(--safe-top) + 1rem); }
.pb-safe { padding-bottom: calc(var(--safe-bottom) + 1rem); }

/* Hide Scrollbars */
::-webkit-scrollbar { display: none; }
* { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* ==========================================================================
   Animations & Ambient Backgrounds
   ========================================================================== */
@keyframes float {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(20px, -30px); }
  66% { transform: translate(-20px, 20px); }
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  z-index: 0;
  pointer-events: none;
}
.orb-1 { top: -10%; left: -20%; width: 300px; height: 300px; background: rgba(124, 58, 237, 0.4); animation: float 10s ease-in-out infinite; }
.orb-2 { bottom: -10%; right: -10%; width: 250px; height: 250px; background: rgba(217, 70, 239, 0.3); animation: float 8s ease-in-out infinite reverse; }
.orb-3 { top: 40%; left: 50%; width: 200px; height: 200px; background: rgba(168, 85, 247, 0.2); animation: float 12s ease-in-out infinite; }

.grad-text {
  background: linear-gradient(to right, #a855f7, #d946ef);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ==========================================================================
   Components
   ========================================================================== */
.glass-card {
  background: rgba(19, 0, 40, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--nex-border);
  border-radius: 24px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

/* Inputs & Forms */
.form-label { display: block; font-size: 0.75rem; font-weight: 600; color: var(--nex-muted); margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.05em; }
.input-wrap { position: relative; display: flex; align-items: center; width: 100%; }
.input-icon { position: absolute; left: 1rem; color: var(--nex-muted); width: 1.25rem; height: 1.25rem; pointer-events: none;}
.input-icon-right { position: absolute; right: 1rem; color: var(--nex-muted); background: none; border: none; cursor: pointer; }
.nex-input { width: 100%; background: rgba(0,0,0,0.3); border: 1px solid var(--nex-border); border-radius: 12px; padding: 0.875rem 1rem 0.875rem 2.75rem; color: white; font-size: 0.875rem; outline: none; transition: all 0.3s ease; }
.nex-input:focus { border-color: var(--nex-glow); box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.2); }

/* Buttons */
.nex-btn-primary { display: flex; align-items: center; justify-content: center; gap: 0.5rem; background: linear-gradient(135deg, #7c3aed, #d946ef); padding: 0.875rem 1.5rem; border-radius: 12px; color: white; font-weight: 600; font-size: 0.875rem; transition: transform 0.2s, box-shadow 0.2s; box-shadow: 0 4px 15px rgba(168, 85, 247, 0.3); border: none; cursor: pointer; }
.nex-btn-primary:active { transform: scale(0.98); box-shadow: 0 2px 8px rgba(168, 85, 247, 0.3); }
.nex-btn-ghost { display: flex; align-items: center; justify-content: center; gap: 0.5rem; background: rgba(255,255,255,0.05); padding: 0.75rem 1rem; border-radius: 12px; color: white; border: 1px solid rgba(255,255,255,0.1); transition: background 0.2s; cursor: pointer; }
.nex-btn-ghost:active { background: rgba(255,255,255,0.1); }
.icon-btn { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: rgba(0,0,0,0.3); color: white; border: 1px solid rgba(255,255,255,0.1); cursor: pointer; transition: all 0.2s; backdrop-filter: blur(10px); }
.icon-btn:active { transform: scale(0.9); }
.social-btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; background: var(--nex-surface); border: 1px solid var(--nex-border); padding: 0.75rem; border-radius: 12px; font-size: 0.875rem; color: white; transition: background 0.2s; cursor: pointer; }

/* Splash Loader */
.loader-bar { width: 160px; height: 4px; background: rgba(255,255,255,0.1); border-radius: 4px; overflow: hidden; margin: 0 auto; }
.loader-fill { width: 0%; height: 100%; background: linear-gradient(90deg, #7c3aed, #d946ef); transition: width 0.3s ease; }

/* Tabs */
.auth-tab.active { background: var(--nex-card); box-shadow: 0 2px 8px rgba(0,0,0,0.2); color: white; }
.auth-tab:not(.active) { color: var(--nex-muted); }

/* Horizontal Scroll Rows */
.scroll-row { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: 0.5rem; scroll-snap-type: x mandatory; }
.movie-card { min-width: 130px; width: 130px; scroll-snap-align: start; cursor: pointer; transition: transform 0.2s; }
.movie-card:active { transform: scale(0.95); }
.movie-poster { width: 100%; height: 190px; border-radius: 12px; object-fit: cover; box-shadow: 0 4px 12px rgba(0,0,0,0.4); margin-bottom: 0.5rem; border: 1px solid rgba(255,255,255,0.05); }

/* Section Headers */
.section-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 1rem; }
.section-title { font-size: 1.125rem; font-weight: 700; font-family: 'Syne', sans-serif; }
.see-all { font-size: 0.75rem; color: var(--nex-glow); font-weight: 600; cursor: pointer; }

/* Badges & Tags */
.premium-badge { display: inline-flex; align-items: center; gap: 0.25rem; background: linear-gradient(135deg, #f59e0b, #d97706); padding: 0.15rem 0.5rem; border-radius: 99px; font-size: 0.65rem; font-weight: 700; color: white; }
.rating-badge { font-size: 0.75rem; font-weight: 600; background: rgba(0,0,0,0.5); padding: 0.25rem 0.5rem; border-radius: 6px; border: 1px solid rgba(255,255,255,0.1); }
.genre-tag { font-size: 0.7rem; color: var(--nex-muted); background: rgba(255,255,255,0.05); padding: 0.25rem 0.5rem; border-radius: 6px; }

/* Avatars */
.avatar-sm { width: 2rem; height: 2rem; border-radius: 50%; background: linear-gradient(135deg, #7c3aed, #d946ef); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.875rem; border: 2px solid var(--nex-bg); }
.avatar-lg { width: 4.5rem; height: 4.5rem; border-radius: 50%; background: linear-gradient(135deg, #7c3aed, #d946ef); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 2rem; border: 3px solid rgba(168, 85, 247, 0.3); }

/* Settings & Toggles */
.settings-item { display: flex; justify-content: space-between; align-items: center; padding: 1rem; cursor: pointer; transition: background 0.2s; }
.settings-item:active { background: rgba(255,255,255,0.05); }
.toggle { width: 44px; height: 24px; background: rgba(255,255,255,0.1); border-radius: 12px; position: relative; cursor: pointer; transition: background 0.3s; }
.toggle[data-on="true"] { background: var(--nex-purple); }
.toggle-thumb { width: 20px; height: 20px; background: white; border-radius: 50%; position: absolute; top: 2px; left: 2px; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.toggle[data-on="true"] .toggle-thumb { transform: translateX(20px); }

/* Bottom Nav */
.bottom-nav { background: linear-gradient(to top, rgba(8,0,15,1) 60%, rgba(8,0,15,0)); padding-top: 2rem; }
.nav-inner { background: rgba(19, 0, 40, 0.8); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); margin: 0 1rem 1rem 1rem; border-radius: 24px; padding: 0.5rem 0; border: 1px solid var(--nex-border); box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; color: var(--nex-muted); font-size: 0.65rem; font-weight: 500; cursor: pointer; transition: color 0.3s; }
.nav-item.active { color: white; }
.nav-item.active .nav-icon-wrap { color: var(--nex-glow); transform: translateY(-2px); }
.nav-icon-wrap { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.nav-play-btn { width: 3rem; height: 3rem; background: linear-gradient(135deg, #7c3aed, #d946ef); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; transform: translateY(-1rem); box-shadow: 0 4px 20px rgba(168, 85, 247, 0.5); border: 4px solid var(--nex-bg); transition: transform 0.2s; }
.nav-play-btn:active { transform: translateY(-1rem) scale(0.9); }

/* Video Player */
.player-header { background: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent); }
.progress-wrap { cursor: pointer; padding: 0.5rem 0; }
.progress-bar { height: 4px; background: rgba(255,255,255,0.2); border-radius: 2px; position: relative; }
.progress-fill { height: 100%; background: var(--nex-purple); border-radius: 2px; }
.progress-thumb { position: absolute; top: 50%; width: 12px; height: 12px; background: white; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 10px rgba(168, 85, 247, 0.8); }
.play-pause-btn { width: 4rem; height: 4rem; border-radius: 50%; background: white; color: black; display: flex; align-items: center; justify-content: center; transition: transform 0.2s; cursor: pointer; }
.play-pause-btn:active { transform: scale(0.9); }
.play-overlay { background: rgba(0,0,0,0.4); opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.play-overlay.active { opacity: 1; pointer-events: auto; }
.play-big-btn { width: 5rem; height: 5rem; border-radius: 50%; background: rgba(255,255,255,0.2); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; color: white; border: 1px solid rgba(255,255,255,0.3); }

/* Hero Slider */
.hero-slider { display: flex; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); height: 60vh; min-height: 400px; }
.hero-slide { min-width: 100%; height: 100%; position: relative; background-size: cover; background-position: center; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, var(--nex-bg) 0%, rgba(8,0,15,0.4) 50%, rgba(8,0,15,0.8) 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 2rem 1.5rem; }
.hero-dots { position: absolute; bottom: 1rem; left: 0; right: 0; display: flex; justify-content: center; gap: 0.5rem; z-index: 10; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.3); transition: all 0.3s; cursor: pointer; }
.dot.active { background: white; width: 16px; border-radius: 3px; }

/* Toast */
.toast { position: fixed; bottom: 6rem; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--nex-card); border: 1px solid var(--nex-border); padding: 0.75rem 1.25rem; border-radius: 99px; display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; box-shadow: 0 4px 20px rgba(0,0,0,0.5); opacity: 0; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 100; pointer-events: none; }
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }