/* =========================================
   1. VARIABLES & THEME SETUP
   ========================================= */
:root {
   /* Colors - Premium Dark Theme */
   --bg-body: #121212;
   --bg-surface: #121212;
   --bg-surface-hover: #1e1e1e;

   --text-primary: #ffffff;
   --text-secondary: #a0a0a0;
   --text-muted: #666666;

   --accent-color: #e0e0e0;
   /* Minimalist white accent for premium feel */
   --accent-hover: #ffffff;
   --accent-active: #cccccc;
   --accent-red: #bb0a0a;
   /* RPG Red Accent */

   --border-color: #333333;
   --border-focus: #555555;

   /* Spacing */
   --space-xs: 0.5rem;
   --space-sm: 1rem;
   --space-md: 2rem;
   --space-lg: 4rem;
   --space-xl: 2rem;

   /* Typography */
   --font-main: 'Outfit', sans-serif;

   /* Animations */
   --transition-fast: 0.2s ease;
   --transition-smooth: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* =========================================
   2. RESET & BASE STYLES
   ========================================= */
*,
*::before,
*::after {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
   width: 12px;
}

::-webkit-scrollbar-track {
   background: transparent;
}

::-webkit-scrollbar-thumb {
   background: #444;
   border-radius: 6px;
   border: 3px solid var(--bg-body);
   /* Creates padding effect */
}

::-webkit-scrollbar-thumb:hover {
   background: #666;
}

html {
   background-color: #050505;
   /* Solid dark base to prevent white flashes */
}

body {
   background-color: var(--bg-body);
   color: var(--text-primary);
   font-family: var(--font-main);
   line-height: 1.6;
   overflow-x: hidden;
   -webkit-font-smoothing: antialiased;
   animation: pageFadeIn 1s ease-out;
}

body.has-morphing-bg {
   background-color: transparent !important;
}

body.has-morphing-bg .page-container {
   background-color: transparent !important;
}

/* Hero Section Specifics */
.hero-container {
   position: relative;
   width: 100vw;
   height: 100vh;
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   z-index: 2;
   /* Ensure it sits above the background */
   background: transparent;
}



.hero-video {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 100%;
   height: 100%;
   object-fit: cover;
   transform: translate(-50%, -50%);
   z-index: 0;
   /* Move to 0 to ensure it is treated as content, not background */
   filter: brightness(0.6);
   /* Darken video for text readability */
   -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
   mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
}

.hero-overlay {
   z-index: 2;
   padding: var(--space-md);
   opacity: 0;
   animation: fadeIn 1.5s ease-out forwards;
   animation-delay: 0.5s;
}

.text-accent-red {
   color: var(--accent-red);
}

@keyframes fadeIn {
   from {
      opacity: 0;
      transform: translateY(20px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}

h1,
h2,
h3,
h4,
h5,
h6 {
   font-weight: 600;
   line-height: 1.2;
   margin-bottom: var(--space-sm);
   letter-spacing: -0.02em;
}

h1 {
   font-size: 3.5rem;
}

h2 {
   font-size: 2.5rem;
}

h3 {
   font-size: 1.75rem;
}

p {
   color: var(--text-secondary);
   margin-bottom: var(--space-sm);
   max-width: 65ch;
}

a {
   color: inherit;
   text-decoration: none;
   transition: var(--transition-fast);
}

/* =========================================
   3. LAYOUT UTILITIES
   ========================================= */
.container {
   max-width: 1400px;
   margin: 0 auto;
   padding: 0 var(--space-md);
}

.grid {
   display: grid;
   gap: var(--space-md);
}

.grid-3 {
   grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}

.grid-2 {
   grid-template-columns: 1fr;
}

@media (min-width: 768px) {
   .grid-2 {
      grid-template-columns: 1fr 1fr;
   }
}

.section {
   padding: var(--space-lg) 0;
}

/* Helper Classes */
.text-center {
   text-align: center;
}

.text-left {
   text-align: left;
}

.text-right {
   text-align: right;
}

.hidden {
   display: none !important;
}

.block {
   display: block;
}

.inline-block {
   display: inline-block;
}

.relative {
   position: relative;
}

.absolute {
   position: absolute;
}

/* Spacing Helpers */
.mt-xs {
   margin-top: var(--space-xs);
}

.mt-sm {
   margin-top: var(--space-sm);
}

.mt-md {
   margin-top: var(--space-md);
}

.mt-lg {
   margin-top: var(--space-lg);
}

.mt-xl {
   margin-top: var(--space-xl);
}

.mb-xs {
   margin-bottom: var(--space-xs);
}

.mb-sm {
   margin-bottom: var(--space-sm);
}

.mb-md {
   margin-bottom: var(--space-md);
}

.mb-lg {
   margin-bottom: var(--space-lg);
}

.p-sm {
   padding: var(--space-sm);
}

.p-md {
   padding: var(--space-md);
}

.p-lg {
   padding: var(--space-lg);
}

.mx-auto {
   margin-left: auto;
   margin-right: auto;
}


/* =========================================
   4. COMPONENTS
   ========================================= */

/* Buttons */
.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 0.8rem 2rem;
   border-radius: 4px;
   /* Slightly boxy for modern architectural feel */
   font-weight: 500;
   cursor: pointer;
   transition: var(--transition-fast);
   border: 1px solid transparent;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   font-size: 0.9rem;
}

.btn-primary {
   background-color: var(--text-primary);
   color: var(--bg-body);
}

.btn-primary:hover {
   background-color: var(--accent-active);
   transform: translateY(-2px);
}

.btn-outline {
   background-color: transparent;
   border-color: var(--border-color);
   color: var(--text-primary);
}

.btn-outline:hover {
   border-color: var(--text-primary);
   transform: translateY(-2px);
}

/* Inputs */
.input-group {
   position: relative;
   margin-bottom: var(--space-sm);
}

input[type="text"],
input[type="email"],
textarea {
   width: 100%;
   padding: 1rem;
   background-color: var(--bg-surface);
   border: 1px solid var(--border-color);
   color: var(--text-primary);
   font-family: var(--font-main);
   border-radius: 4px;
   transition: var(--transition-fast);
}

input:focus,
textarea:focus {
   outline: none;
   border-color: var(--text-primary);
   background-color: var(--bg-surface-hover);
}

/* Cards (Video/Photo Showcase) */
.media-card {
   position: relative;
   background-color: var(--bg-surface);
   overflow: hidden;
   border-radius: 8px;
   transition: var(--transition-smooth);
   cursor: pointer;
   border: 1px solid var(--border-color);
}

.media-card img {
   width: 100%;
   height: 300px;
   object-fit: cover;
   transition: transform 0.6s ease;
   opacity: 0.8;
}

.media-card:hover {
   border-color: var(--text-muted);
}

.media-card:hover img {
   transform: scale(1.05);
   opacity: 1;
}

.media-info {
   padding: var(--space-sm);
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
   transform: translateY(20px);
   opacity: 0;
   transition: var(--transition-smooth);
}

.media-card:hover .media-info {
   transform: translateY(0);
   opacity: 1;
}

.media-title {
   font-size: 1.2rem;
   color: var(--text-primary);
   margin-bottom: 0.2rem;
}

.media-meta {
   font-size: 0.85rem;
   color: var(--text-secondary);
}

/* Header */
.site-header {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   padding: var(--space-sm) var(--space-md);
   display: flex;
   justify-content: space-between;
   align-items: center;
   z-index: 1000;
   background-color: rgba(5, 5, 5, 0.8);
   backdrop-filter: blur(10px);
   border-bottom: 1px solid rgba(255, 255, 255, 0.05);
   transition: transform 0.3s ease-in-out, top 0.3s ease-in-out;
}

.site-header.header-hidden {
   transform: translateY(-100%);
}

.logo {
   font-size: 1.5rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.1em;
}

.nav-link {
   margin-left: var(--space-md);
   font-size: 0.9rem;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: var(--text-secondary);
}

.nav-link:hover,
.nav-link.active {
   color: var(--text-primary);
}

/* Footer */
.site-footer {
   border-top: 1px solid var(--border-color);
   padding: var(--space-lg) 0;
   margin-top: var(--space-xl);
   text-align: center;
}

.copyright-text {
   margin: var(--space-md) auto 0;
   max-width: 100%;
   color: var(--text-muted);
   font-size: 0.85rem;
   letter-spacing: 0.05em;
}

.social-links {
   display: flex;
   justify-content: center;
   gap: var(--space-md);
   margin-bottom: var(--space-sm);
}

/* =========================================
   3. LAYOUT UTILITIES
   ========================================= */
.container {
   max-width: 1400px;
   margin: 0 auto;
   padding: 0 var(--space-md);
}

.grid {
   display: grid;
   gap: var(--space-md);
}

.grid-3 {
   grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}

.section {
   padding: var(--space-lg) 0;
}

/* =========================================
   4. COMPONENTS
   ========================================= */

/* Buttons */
.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 0.8rem 2rem;
   border-radius: 4px;
   /* Slightly boxy for modern architectural feel */
   font-weight: 500;
   cursor: pointer;
   transition: var(--transition-fast);
   border: 1px solid transparent;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   font-size: 0.9rem;
}

.btn-primary {
   background-color: var(--text-primary);
   color: var(--bg-body);
}

.btn-primary:hover {
   background-color: var(--accent-active);
   transform: translateY(-2px);
}

.btn-outline {
   background-color: transparent;
   border-color: var(--border-color);
   color: var(--text-primary);
}

.btn-outline:hover {
   border-color: var(--text-primary);
   transform: translateY(-2px);
}

/* Inputs */
.input-group {
   position: relative;
   margin-bottom: var(--space-sm);
}

input[type="text"],
input[type="email"],
textarea {
   width: 100%;
   padding: 1rem;
   background-color: var(--bg-surface);
   border: 1px solid var(--border-color);
   color: var(--text-primary);
   font-family: var(--font-main);
   border-radius: 4px;
   transition: var(--transition-fast);
}

input:focus,
textarea:focus {
   outline: none;
   border-color: var(--text-primary);
   background-color: var(--bg-surface-hover);
}

textarea {
   resize: vertical;
   /* Only allow vertical resizing */
}

/* Cards (Video/Photo Showcase) */
.media-card {
   position: relative;
   background-color: var(--bg-surface);
   overflow: hidden;
   border-radius: 8px;
   transition: var(--transition-smooth);
   cursor: pointer;
   border: 1px solid var(--border-color);
}

.media-card img {
   width: 100%;
   height: 300px;
   object-fit: cover;
   transition: transform 0.6s ease;
   opacity: 0.8;
}

.media-card:hover {
   border-color: var(--text-muted);
}

.media-card:hover img {
   transform: scale(1.05);
   opacity: 1;
}

.media-info {
   padding: var(--space-sm);
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
   transform: translateY(20px);
   opacity: 0;
   transition: var(--transition-smooth);
}

.media-card:hover .media-info {
   transform: translateY(0);
   opacity: 1;
}

.media-title {
   font-size: 1.2rem;
   color: var(--text-primary);
   margin-bottom: 0.2rem;
}

.media-meta {
   font-size: 0.85rem;
   color: var(--text-secondary);
}

/* Header */
.site-header {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   padding: var(--space-sm) var(--space-md);
   display: flex;
   justify-content: space-between;
   align-items: center;
   z-index: 1000;
   background-color: rgba(5, 5, 5, 0.8);
   backdrop-filter: blur(10px);
   border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Offset header when admin bar is present */
body.admin-active .site-header {
   top: 40px;
}

.logo {
   font-size: 1.5rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.1em;
   display: flex;
   align-items: center;
   white-space: nowrap;
   /* Prevent wrapping */
}

.logo span {
   display: inline-block;
   color: var(--text-primary);
   transition: color var(--transition-fast);
}

.logo span:not(.logo-hide) {
   color: var(--accent-red);
}


.logo-hide {
   color: rgba(187, 10, 10, 0.6) !important;
   max-width: 0;
   /* Start collapsed */
   opacity: 0;
   overflow: hidden;
   white-space: nowrap;
   animation: introSequence 2.5s cubic-bezier(0.65, 0, 0.35, 1) forwards;
   animation-delay: 0.2s;
}

@keyframes collapseLogo {
   to {
      max-width: 0;
      opacity: 0;
   }
}

@keyframes expandLogo {
   from {
      max-width: 0;
      opacity: 0;
   }

   to {
      max-width: 200px;
      opacity: 1;
   }
}

@keyframes introSequence {
   0% {
      max-width: 0;
      opacity: 0;
   }

   30% {
      max-width: 200px;
      opacity: 1;
   }

   70% {
      max-width: 200px;
      opacity: 1;
   }

   100% {
      max-width: 0;
      opacity: 0;
   }
}

/* Desktop Hover Interaction (Transition based) */
@media (min-width: 1024px) {

   /* When interactive mode is active (set by JS) */
   .logo.interactive .logo-hide {
      /* Disable animation so it doesn't fight with transition */
      animation: none;
      /* Ensure it matches the "end state" of the animation (collapsed) */
      max-width: 0;
      opacity: 0;
      /* Enable smooth reversible transition */
      transition: max-width 0.8s cubic-bezier(0.65, 0, 0.35, 1),
         opacity 0.8s cubic-bezier(0.65, 0, 0.35, 1);
   }

   /* On Hover */
   .logo.interactive:hover .logo-hide {
      max-width: 200px;
      opacity: 1;
   }
}

.nav-link {
   margin-left: var(--space-md);
   font-size: 0.9rem;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: var(--text-secondary);
}

.nav-link:hover,
.nav-link.active {
   color: var(--text-primary);
}

/* Footer */
.site-footer {
   border-top: 1px solid var(--border-color);
   padding: var(--space-lg) 0;
   margin-top: var(--space-xl);
   text-align: center;
   background: linear-gradient(to right, rgb(16, 24, 34), rgb(42, 17, 17));
}

.social-links {
   display: flex;
   justify-content: center;
   gap: var(--space-md);
   margin-bottom: var(--space-sm);
   align-items: center;
}

.social-icon {
   width: 40px;
   height: 40px;
   object-fit: contain;
   transition: var(--transition-fast);
   /* Assuming logos might be black/colored, forcing white for dark theme consistency */
   filter: brightness(0) invert(1);
   opacity: 0.7;
}

.social-icon:hover {
   transform: scale(1.1);
   opacity: 1;
}

/* Reset margin for nav links in footer to ensure true centering */
.site-footer .nav-link {
   margin-left: 0;
   margin: 0 var(--space-xs);
   /* Optional: small side margin if not using gap, but social-links uses gap */
}

/* Specific reset for social links since they use gap */
.social-links .nav-link {
   margin: 0;
}

.legal-text {
   font-size: 0.7rem;
   color: var(--text-muted);
   text-transform: uppercase;
   letter-spacing: 0.1em;
   opacity: 0.8;
}

.legal-text:hover {
   color: var(--text-primary);
   opacity: 1;
}

/* Color Palette Section for Test Page */
.color-swatch {
   width: 100px;
   height: 100px;
   border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 0.5rem;
   border: 1px solid rgba(255, 255, 255, 0.1);
}

/* =========================================
   5. ABOUT ME SECTION
   ========================================= */
.about-section {
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: var(--space-xl) var(--space-md);
   background-color: transparent;
   text-align: center;
   position: relative;
   z-index: 10;
   /* Ensure it sits above fixed background if needed */
}

.video-circle {
   width: 150px;
   height: 150px;
   border-radius: 50%;
   overflow: hidden;
   margin: var(--space-md) 0;
   border: 3px solid var(--accent-red);
   /* Using branding color */
   box-shadow: 0 0 30px rgba(187, 10, 10, 0.3);
   /* Subtle glow */
   flex-shrink: 0;
}

.video-circle video {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.text-justify {
   text-align: justify;
   max-width: 600px;
   /* Optimal reading width */
   margin: 0 auto var(--space-md) auto;
   font-size: 1.1rem;
   line-height: 1.8;
}

/* =========================================
   6. WORK SECTION
   ========================================= */
.work-section {
   padding: var(--space-xl) 0;
   text-align: center;
}

.work-grid {
   margin-top: var(--space-md);
   gap: var(--space-md);
   padding: 0 var(--space-md);
   max-width: 900px;
   /* Restrict width to keep cards from being too wide */
   margin-left: auto;
   margin-right: auto;
}

.work-card {
   position: relative;
   height: auto;
   /* Let aspect-ratio determine height */
   /* Smaller height */
   background-color: var(--bg-surface);
   border-radius: 4px;
   /* Less rounded for more rectangular feel */
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
   transition: var(--transition-smooth);
   border: 1px solid var(--border-color);
   aspect-ratio: 16/9;
   /* Enforce rectangular shape if width varies */
}

.work-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-size: cover;
   background-position: center;
   opacity: 0.4;
   transition: transform 0.8s ease, opacity 0.5s ease;
   z-index: 1;
}

.video-card::before {
   background: url('../image/video.gif') center/cover no-repeat;
}

.photo-card::before {
   background: url('../image/photo.jpg') center/cover no-repeat;
}

.work-card:hover::before {
   transform: scale(1.1);
   opacity: 0.2;
}

.work-card-inner {
   z-index: 2;
   transition: var(--transition-fast);
}

.work-card h3 {
   font-size: 2rem;
   font-weight: 800;
   letter-spacing: 0.2em;
   color: var(--text-primary);
   text-shadow: 0 5px 15px rgba(0, 0, 0, 0.8);
   transition: var(--transition-fast);
}

.work-card:hover h3 {
   letter-spacing: 0.3em;
   color: var(--accent-red);
}

@media (max-width: 768px) {
   .work-card {
      aspect-ratio: 4/5;
      /* Taller on mobile */
   }
}

/* =========================================
   6. ANIMATIONS
   ========================================= */

@keyframes pageFadeIn {
   from {
      opacity: 0;
   }

   to {
      opacity: 1;
   }
}

/* Scroll Reveal Animation Classes */
.reveal-on-scroll {
   opacity: 0;
   transform: translateY(30px);
   transition: opacity 0.8s ease-out, transform 0.8s ease-out;
   will-change: opacity, transform;
}

.reveal-on-scroll.is-visible {
   opacity: 1;
   transform: translateY(0);
}

/* =========================================
   7. ADMIN BAR
   ========================================= */
.admin-bar {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 40px;
   background-color: #000;
   border-bottom: 1px solid var(--border-color);
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0 var(--space-md);
   z-index: 2000;
   /* Above everything including header */
   font-size: 0.8rem;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: var(--text-secondary);
}

.admin-logout {
   color: var(--accent-red);
   font-weight: 700;
   transition: var(--transition-fast);
}

.admin-logout:hover {
   color: #ff3333;
}

/* =========================================
   8. PAGE TITLES & COMMON
   ========================================= */
.page-container {
   padding-top: 80px;
   /* Space for fixed header */
   min-height: 100vh;
}

.page-title-section {
   text-align: center;
   padding: var(--space-xl) var(--space-md) var(--space-md);
}

.text-subtitle {
   color: var(--text-secondary);
   font-size: 1.1rem;
   max-width: 600px;
   margin: 0 auto;
}

/* =========================================
   9. VIDEO PAGE CONTROLS
   ========================================= */
.controls-section {
   padding: var(--space-md) 0;
   margin-bottom: var(--space-md);
   border-bottom: 1px solid var(--border-color);
   position: relative;
   z-index: 50;
   /* Ensure this section sits above the video grid */
}


.controls-wrapper {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   margin-bottom: var(--space-md);
   gap: var(--space-md);
   width: 100%;
}

/* Search Bar - Flexbox Refactor */
.search-container {
   position: relative;
   max-width: 300px;
   width: 100%;
   display: flex;
   align-items: center;
   background: rgba(255, 255, 255, 0.05);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 8px;
   padding: 0 0.8rem;
   transition: var(--transition-fast);
}

.search-container:focus-within {
   border-color: var(--accent-red);
   background-color: var(--bg-surface-hover);
}

.search-container input.search-input {
   width: 100%;
   border: none;
   background: transparent;
   padding: 0.8rem 0.5rem;
   color: var(--text-primary);
   font-family: var(--font-main);
   outline: none;
}

.search-container input.search-input:focus {
   outline: none;
   background-color: transparent;
   border-color: transparent;
}

.search-icon {
   position: static;
   transform: none;
   color: var(--text-secondary);
   font-size: 1.2rem;
   /* Ensure visibility */
   pointer-events: none;
   order: -1;
   /* Move to left */
   flex-shrink: 0;
}

/* View Toggles */
.view-toggles {
   display: flex;
   gap: var(--space-xs);
}

.view-btn {
   background: rgba(255, 255, 255, 0.05);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, 0.1);
   color: var(--text-secondary);
   width: 40px;
   height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 8px;
   cursor: pointer;
   transition: var(--transition-fast);
}

.view-btn:hover {
   color: var(--text-primary);
   border-color: var(--text-muted);
}

.view-btn.active {
   background: rgba(255, 255, 255, 0.2);
   color: #fff;
   border-color: rgba(255, 255, 255, 0.5);
}

/* Filter Buttons - Redesigned */
.filters-container {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: var(--space-md);
   flex-wrap: wrap;
   margin-top: var(--space-sm);
}

/* Secondary "All Videos" Link */
.filter-reset {
   background: transparent;
   border: none;
   color: var(--text-muted);
   font-family: var(--font-main);
   font-size: 0.85rem;
   text-transform: uppercase;
   letter-spacing: 0.1em;
   cursor: pointer;
   transition: var(--transition-fast);
   padding: 0.5rem;
}

.filter-reset:hover,
.filter-reset.active {
   color: var(--text-primary);
}

/* The Toggle Switcher Container */
.filter-switcher {
   display: inline-flex;
   justify-content: center;
   background: rgba(255, 255, 255, 0.05);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 50px;
   /* Pill shape */
   padding: 4px;
   gap: 4px;
}

/* Guest View - Fix "Hole" in padding when admin button is missing */
body:not(.admin-active) .filter-switcher {
   padding: 6px 12px;
   /* Add balanced padding to fill the visual gap */
}

/* The Toggle Buttons */
.filter-btn {
   padding: 0.6rem 1.5rem;
   background: transparent;
   border: none;
   color: var(--text-secondary);
   font-family: var(--font-main);
   font-weight: 600;
   text-transform: uppercase;
   font-size: 0.85rem;
   letter-spacing: 0.1em;
   cursor: pointer;
   transition: var(--transition-fast);
   gap: var(--space-sm);
   transition: all 0.5s ease;
   border-radius: 50px;
   /* Pill shape matches container */
}

.filter-btn:hover {
   color: var(--text-primary);
}

.filter-btn.active {
   background: rgba(187, 10, 10, 0.3);
   /* Translucent RPG Red */
   backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(5px);
   border: 1px solid rgba(187, 10, 10, 0.5);
   color: #fff;
   transform: scale(1.05);
   /* Text animation effect */
   font-weight: 700;
}

/* Animation Keyframes */
@keyframes popIn {
   0% {
      opacity: 0;
      transform: scale(0.9);
   }

   100% {
      opacity: 1;
      transform: scale(1);
   }
}

.video-item.animate-in {
   animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.animate-pop-in {
   animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* No Results Message */
.no-results-message {
   text-align: center;
   padding: var(--space-xl) 0;
   margin-top: var(--space-xl);
   width: 100%;
}

.no-results-icon {
   font-size: 3rem;
   margin-bottom: var(--space-sm);
   width: 200px;
   z-index: 2000;
}

/* Custom Dropdown */
.custom-dropdown {
   position: relative;
   width: 200px;
   z-index: 2002;
   /* Ensure higher than thumbnails */
}

.custom-dropdown.disabled {
   opacity: 0.5;
   pointer-events: none;
}

.dropdown-trigger {
   width: 100%;
   padding: 0.5rem 0.8rem;
   display: flex;
   justify-content: center;
   /* Center content */
   align-items: center;
   cursor: pointer;
   border: 1px solid rgba(255, 255, 255, 0.1);
   background: rgba(255, 255, 255, 0.05);
   backdrop-filter: blur(10px);
   border-radius: 8px;
   color: var(--text-primary);
   font-family: var(--font-main);
   font-size: 0.85rem;
   /* Not big */
   gap: 10px;
   /* Space between text and arrow */
}

.dropdown-trigger:hover {
   border-color: var(--text-muted);
}

.dropdown-arrow {
   font-size: 0.7rem;
   /* Smaller arrow */
   transition: transform 0.3s ease;
   opacity: 0.7;
}

.custom-dropdown.is-open .dropdown-arrow {
   transform: rotate(180deg);
}

.dropdown-options {
   position: absolute;
   top: 100%;
   /* Directly under */
   margin-top: 5px;
   /* Tiny gap */
   left: 0;
   width: 100%;
   background: #1a1a1a;
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 16px;
   overflow: hidden;
   opacity: 0;
   visibility: hidden;
   transform: translateY(-5px);
   /* Slide down effect */
   transition: all 0.3s ease;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
   z-index: 2003;
}

.custom-dropdown.is-open .dropdown-options {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
}

.dropdown-option {
   padding: 0.6rem 0.8rem;
   cursor: pointer;
   transition: background 0.2s, color 0.2s;
   color: var(--text-secondary);
   font-size: 0.9rem;
   border-radius: 8px;
   margin: 4px;
}

.dropdown-option:hover {
   background: rgba(255, 255, 255, 0.08);
   color: var(--text-primary);
}

.dropdown-option.active {
   background: var(--accent-red);
   color: white;
}

/* =========================================
   COOKIE CONSENT
   ========================================= */
body.modal-open {
   overflow: hidden !important;
   height: 100vh;
}

.cookie-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.3);
   /* More transparent as requested */
   backdrop-filter: blur(15px);
   /* Stronger blur for glass effect */
   z-index: 9999;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   pointer-events: none;
   transition: all 0.6s ease;
}

/* Active State (Visible) */
.cookie-overlay.active {
   opacity: 1;
   pointer-events: all;
}

.cookie-modal {
   background: #121212;
   padding: var(--space-md);
   border: 1px solid var(--border-color);
   border-radius: 16px;
   max-width: 450px;
   width: 90%;
   text-align: center;
   box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
   transform: scale(0.9);
   opacity: 0;
   transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Modal Active State */
.cookie-overlay.active .cookie-modal {
   transform: scale(1);
   opacity: 1;
}

.cookie-text {
   font-size: 0.95rem;
   color: var(--text-secondary);
   line-height: 1.6;
}

.hover-underline {
   text-decoration: underline;
   text-decoration-color: transparent;
   transition: text-decoration-color 0.2s;
}

.hover-underline:hover {
   text-decoration-color: currentColor;
}

.cookie-buttons {
   display: flex;
   gap: var(--space-sm);
   justify-content: center;
   margin-top: var(--space-md);
}

.cookie-buttons .btn {
   min-width: 100px;
}

/* =========================================
   10. VIDEO GRID SYSTEM
   ========================================= */
.video-grid {
   display: grid;
   gap: var(--space-sm);
   transition: all 0.5s ease;
}

/* Grid View Modifiers */
.grid-view-small {
   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.grid-view-medium {
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.grid-view-big {
   grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
}

/* Video Item */
.video-item {
   position: relative;
   aspect-ratio: 1/1;
   /* Square format */
   background-color: var(--bg-surface);
   overflow: hidden;
   cursor: pointer;
   border-radius: 4px;
   opacity: 0;
   transform: translateY(30px);
}

.video-item.animate-in {
   opacity: 1;
   transform: translateY(0);
   transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.video-thumb {
   width: 100%;
   height: 100%;
   position: relative;
}

.video-thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   opacity: 0;
   /* Hidden until loaded */
   transition: transform 0.6s ease, opacity 0.5s ease;
}

.video-thumb img.loaded {
   opacity: 1;
}

/* Skeleton Loading Effect */
@keyframes shimmer {
   0% {
      background-position: -200% 0;
   }

   100% {
      background-position: 200% 0;
   }
}

.video-thumb {
   width: 100%;
   height: 100%;
   position: relative;
   background: #1a1a1a;
   background: linear-gradient(90deg, #1a1a1a 8%, #2a2a2a 18%, #1a1a1a 33%);
   background-size: 200% 100%;
   animation: shimmer 1.5s infinite linear;
}

.video-item:hover .video-thumb img {
   transform: scale(1.05);
}

.thumb-placeholder {
   width: 100%;
   height: 100%;
   background-color: #222;
   transition: transform 0.6s ease;
}

.video-item:hover .thumb-placeholder {
   transform: scale(1.05);
}

.hover-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.4);
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   transition: var(--transition-fast);
}

.video-item:hover .hover-overlay {
   opacity: 1;
}

.play-icon {
   font-size: 2rem;
   color: var(--text-primary);
   transform: scale(0.8);
   transition: var(--transition-smooth);
}

.video-item:hover .play-icon {
   transform: scale(1);
}

/* Animation Utilities */
.fade-in {
   animation: fadeIn 0.8s ease-out forwards;
}

.delay-1 {
   animation-delay: 0.2s;
   opacity: 0;
}

/* =========================================
   11. VIDEO MODAL STYLES
   ========================================= */
.modal-overlay {
   overflow-y: auto;
   padding: 40px 20px;
   align-items: flex-start;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.95);
   z-index: 3000;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.3s ease, visibility 0.3s ease;
   backdrop-filter: blur(5px);
}

.modal-overlay.is-open {
   opacity: 1;
   visibility: visible;
}

.modal-content {
   position: relative;
   width: 90%;
   max-width: 1000px;
   background-color: var(--bg-surface);
   border-radius: 8px;

   box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
   border: 1px solid var(--border-color);
   transform: scale(0.95);
   transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);

   margin: auto;
}

.modal-content.admin-modal {
   max-width: 600px;
   padding: var(--space-lg);
   background-color: #111;
}

.modal-header h2 {
   color: var(--text-primary);
   margin-bottom: var(--space-md);
   text-align: center;
}

.admin-form .form-group {
   margin-bottom: var(--space-md);
   display: flex;
   flex-direction: column;
   gap: 8px;
}

.admin-form label {
   color: var(--text-secondary);
   font-size: 0.9rem;
   text-transform: uppercase;
   font-weight: 600;
}

.admin-form input[type="text"],
.admin-form textarea,
.admin-form select {
   width: 100%;
   padding: 10px;
   background: #222;
   border: 1px solid #333;
   color: #fff;
   border-radius: 4px;
}

.admin-form input[type="file"] {
   color: var(--text-secondary);
}

/* Admin Floating Action Buttons (FAB) */
.admin-add-btn {
   /* Main Add Button (Existing) */
   position: fixed;
   bottom: 30px;
   right: 30px;
   width: 60px;
   height: 60px;
   border-radius: 50%;
   background-color: var(--accent-red);
   color: #fff;
   font-size: 2rem;
   border: none;
   box-shadow: 0 4px 15px rgba(255, 0, 0, 0.4);
   cursor: pointer;
   z-index: 2500;
   transition: transform 0.2s ease;
   display: flex;
   align-items: center;
   justify-content: center;
}

.admin-add-btn:hover {
   transform: scale(1.1);
}

.admin-controls {
   position: fixed;
   bottom: 30px;
   right: 30px;
   z-index: 2500;
   display: flex;
   flex-direction: column;
   gap: 15px;
   align-items: flex-end;
}

.admin-fab-btn {
   width: 50px;
   height: 50px;
   border-radius: 50%;
   background: #444;
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   border: 1px solid #666;
   cursor: pointer;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
   font-size: 1.2rem;
   text-decoration: none;
   transition: all 0.3s ease;
}

.admin-fab-btn:hover {
   background: #555;
   transform: scale(1.05);
}

.admin-fab-btn.active {
   background-color: var(--accent-red);
   border-color: var(--accent-red);
   box-shadow: 0 0 15px rgba(255, 0, 0, 0.4);
   transform: scale(1.1);
}

/* History Button Specifics */
.admin-history-btn {
   background: #333;
   border-color: #555;
}


.archive-btn {
   position: absolute;
   top: 10px;
   right: 10px;
   background: rgba(0, 0, 0, 0.7);
   color: #fff;
   border: 1px solid var(--accent-red);
   width: 30px;
   height: 30px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   opacity: 0;
   transition: opacity 0.2s;
   z-index: 20;
}

.video-item:hover .archive-btn {
   opacity: 1;
}

.archive-btn:hover {
   background: var(--accent-red);
}

.modal-overlay.is-open .modal-content {
   transform: scale(1);
}

.modal-close {
   position: absolute;
   top: 15px;
   right: 20px;
   background: transparent;
   border: none;
   color: var(--text-primary);
   font-size: 2.5rem;
   cursor: pointer;
   z-index: 10;
   line-height: 1;
   transition: var(--transition-fast);
   text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.modal-close:hover {
   color: var(--accent-red);
   transform: scale(1.1);
}

.modal-video-container {
   width: 100%;
   background: #000;
   /* Aspect ratio is handled by video element itself usually, but we can enforce container */
   position: relative;
}

.modal-video-container video {
   width: 100%;
   max-height: 70vh;
   display: block;
}

.modal-info {
   padding: var(--space-md);
   text-align: left;
}

.modal-info h2 {
   margin-bottom: var(--space-xs);
   color: var(--text-primary);
   font-size: 1.5rem;
}

.modal-date {
   display: block;
   font-size: 0.9rem;
   color: var(--accent-red);
   margin-bottom: var(--space-sm);
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.05em;
}

.modal-desc {
   color: var(--text-secondary);
   font-size: 1rem;
   line-height: 1.6;
}



/* Reorder Mode */
/* Reorder Mode */
.video-item.reorder-active,
.photo-item.reorder-active,
.category-btn-wrapper.reorder-active {
   border: 2px dashed #666;
   cursor: grab;
   transition: transform 0.2s ease, border-color 0.2s ease;
}

.video-item.reorder-active *,
.photo-item.reorder-active * {
   pointer-events: none;
   /* Prevent clicking play/archive buttons while reordering */
}

.video-item.over-left,
.photo-item.over-left,
.category-btn-wrapper.over-left {
   border-left: 4px solid var(--accent-red);
   transform: translateX(5px);
   z-index: 10;
}

.video-item.over-right,
.photo-item.over-right,
.category-btn-wrapper.over-right {
   border-right: 4px solid var(--accent-red);
   transform: translateX(-5px);
   z-index: 10;
}

body.is-reordering .video-item:not(.reorder-active),
body.is-reordering-photos .photo-item:not(.reorder-active),
body.is-reordering-cats .category-btn-wrapper:not(.reorder-active) {
   opacity: 0.3;
   filter: grayscale(1);
}

.edit-btn {
   position: absolute;
   top: 10px;
   left: 10px;
   width: 30px;
   height: 30px;
   background: rgba(0, 0, 0, 0.7);
   color: #fff;
   border: 1px solid #fff;
   border-radius: 50%;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1rem;
   z-index: 20;
   transition: all 0.2s ease;
}

.edit-btn:hover {
   background: #fff;
   color: #000;
   transform: scale(1.1);
}

/* Side Panel (Drawer) */
.photo-item.selected {
   border: 3px solid var(--accent-red);
   transform: scale(0.95);
   opacity: 0.8;
}

.photo-item.selected::after {
   content: '✓';
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   color: var(--accent-red);
   font-size: 3rem;
   font-weight: bold;
   text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
   pointer-events: none;
}

/* Hide Archive button in select mode to avoid confusion */
body.select-mode-active .archive-btn {
   display: none !important;
}

.side-panel-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.5);
   z-index: 2900;
   opacity: 0;
   visibility: hidden;
   transition: all 0.3s ease;
}

.side-panel-overlay.active {
   opacity: 1;
   visibility: visible;
}

.side-panel {
   position: fixed;
   top: 0;
   right: -450px;
   /* Start off-screen */
   width: 400px;
   height: 100%;
   background: #1a1a1a;
   border-left: 1px solid #333;
   z-index: 3000;
   transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   box-shadow: -5px 0 20px rgba(0, 0, 0, 0.5);
   display: flex;
   flex-direction: column;
}

.side-panel.active {
   right: 0;
}

.side-panel-header {
   padding: 20px;
   border-bottom: 1px solid #333;
   display: flex;
   justify-content: space-between;
   align-items: center;
   background: #222;
}

.side-panel-header h2 {
   margin: 0;
   font-size: 1.2rem;
   color: #fff;
   letter-spacing: 1px;
}

.side-panel-close {
   background: none;
   border: none;
   color: #999;
   font-size: 1.5rem;
   cursor: pointer;
   transition: color 0.2s;
}

.side-panel-close:hover {
   color: #fff;
}

.side-panel-content {
   padding: 20px;
   overflow-y: auto;
   flex: 1;
}

/* Responsive Panel */
@media (max-width: 600px) {
   .side-panel {
      width: 100%;
      right: -100%;
   }
}

/* =========================================
   MOBILE MENU & RESPONSIVENESS
   ========================================= */

/* Mobile Menu Button (Hamburger) - Super Organic Animation */
.menu-btn {
   display: none;
   background: none;
   border: none;
   cursor: pointer;
   width: 40px;
   height: 40px;
   position: relative;
   z-index: 2000;
   /* Entrance Animation */
   opacity: 0;
   transform: translateX(20px);
   animation: slideInMenu 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
   animation-delay: 2.2s;
   /* Sync with end of 2.5s intro sequence (starts at 0.2s) */
}

@keyframes slideInMenu {
   to {
      opacity: 1;
      transform: translateX(0);
   }
}

@keyframes slideOutMenu {
   0% {
      opacity: 1;
      transform: translateX(0);
   }

   100% {
      opacity: 0;
      transform: translateX(20px);
   }
}

.menu-exit {
   /* Override any existing animation */
   animation: slideOutMenu 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards !important;
}

.menu-btn:active {
   transform: scale(0.9);
   /* Subtle click feedback */
}

.menu-btn span {
   display: block;
   width: 30px;
   /* Base width */
   height: 2px;
   background-color: var(--text-primary);
   position: absolute;
   left: 5px;
   /* Center in 40px button */
   border-radius: 4px;
   /* Soft edges */
   transition: all 0.5s cubic-bezier(0.68, -0.6, 0.32, 1.6);
   /* Elastic/Organic easing */
   transform-origin: center;
}

.menu-btn span:first-child {
   top: 12px;
   width: 30px;
}

.menu-btn span:nth-child(2) {
   top: 50%;
   transform: translateY(-50%);
   width: 20px;
   /* Staggered width for organic look */
   right: 5px;
   left: auto;
   transition-delay: 0.05s;
}

.menu-btn span:last-child {
   bottom: 12px;
   width: 15px;
   /* Staggered width for organic look */
   right: 5px;
   left: auto;
   /* Align right for flow */
   transition-delay: 0.1s;
}

/* Hover Effect (Desktop/interaction) */
.menu-btn:hover span:nth-child(2) {
   width: 25px;
}

.menu-btn:hover span:last-child {
   width: 25px;
}

/* Active State (X) - The Organic Morph */
.menu-btn.active span:first-child {
   top: 50%;
   transform: translateY(-50%) rotate(45deg);
   width: 30px;
   transition-delay: 0.1s;
}

.menu-btn.active span:nth-child(2) {
   transform: translateY(-50%) scale(0);
   opacity: 0;
   width: 0;
   transition-delay: 0s;
   /* Disappear first */
}

.menu-btn.active span:last-child {
   top: 50%;
   bottom: auto;
   /* Reset bottom positioning to animate top */
   transform: translateY(-50%) rotate(-45deg);
   width: 30px;
   /* Grow to full width */
   transition-delay: 0.1s;
}

/* Mobile Menu Overlay - with organic fade */
.mobile-menu {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100vh;
   background-color: rgba(5, 5, 5, 0.73);
   /* Deep dark background */
   backdrop-filter: blur(20px);
   /* Heavy premium blur */
   z-index: 1500;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.4s ease;
}

.mobile-menu.active {
   opacity: 1;
   pointer-events: all;
}

.mobile-menu nav {
   display: flex;
   flex-direction: column;
   gap: var(--space-md);
   text-align: center;
}

/* Organic Link Animations */
.mobile-menu a {
   font-size: 2.5rem;
   /* Larger for impact */
   font-weight: 800;
   text-transform: uppercase;
   color: var(--text-secondary);
   text-decoration: none;

   /* Initial State for Animation */
   opacity: 0;
   transform: translateY(30px);
   transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.5s ease;
   transition-delay: 0s;
   /* Reset delay on close */
}

/* Animated Entrance State */
.mobile-menu.active a {
   opacity: 1;
   transform: translateY(0);
}

/* Staggered Delays for Organic Cascade */
.mobile-menu.active a:nth-child(1) {
   transition-delay: 0.1s;
}

.mobile-menu.active a:nth-child(2) {
   transition-delay: 0.2s;
}

.mobile-menu.active a:nth-child(3) {
   transition-delay: 0.3s;
}

.mobile-menu.active a:nth-child(4) {
   transition-delay: 0.4s;
}

.mobile-menu.active a:nth-child(5) {
   transition-delay: 0.5s;
}

.mobile-menu a:hover,
.mobile-menu a.active {
   color: var(--text-primary);
   transform: scale(1.1) !important;
   /* Pop effect on hover */
}

.no-scroll {
   overflow: hidden;
}

/* Responsive Media Queries */
@media (max-width: 768px) {

   /* Header */
   .desktop-nav {
      display: none;
   }

   .menu-btn {
      display: block;
   }

   /* Layout */
   .site-header {
      padding: var(--space-sm);
   }

   .container {
      padding: 0 var(--space-sm);
   }

   /* Grids - Force 1 column for generic grids, but allow specific views */
   .grid-3,
   .grid-2 {
      grid-template-columns: 1fr;
   }

   /* Mobile Grid Overrides (Video & Photo) */
   .grid-view-small {
      grid-template-columns: repeat(4, 1fr) !important;
   }

   .grid-view-medium,
   .video-grid.grid-view-medium {
      /* Override the desktop specific rule */
      grid-template-columns: repeat(3, 1fr) !important;
   }

   .grid-view-big {
      grid-template-columns: repeat(2, 1fr) !important;
   }

   /* Typography */
   h1 {
      font-size: 2.5rem;
   }

   h2 {
      font-size: 2rem;
   }

   /* Admin Bar */
   .admin-bar {
      font-size: 0.7rem;
      padding: 0 var(--space-xs);
   }

   body.admin-active .site-header {
      top: 40px;
   }

   /* Filter Buttons - Fix wrapping/size */
   .filter-btn {
      padding: 0.5rem 1rem !important;
      font-size: 0.75rem !important;
      white-space: nowrap;
   }

   /* Hide Lightbox Arrows on Mobile */
   .lightbox-nav {
      display: none !important;
   }

   /* Edit Pencil Buttons - Always Visible on Mobile */
   .edit-btn {
      opacity: 1 !important;
      /* Force visible */
      width: 40px;
      /* Larger touch target */
      height: 40px;
      background: rgba(0, 0, 0, 0.8);
      /* Darker contrast */
   }

   /* Disable hover effects that might rely on mouse */
   .video-item:hover .archive-btn,
   .video-item:hover .edit-btn {
      opacity: 1 !important;
   }

   /* View Count Badge (Mobile Override) */
   .view-badge {
      font-size: 0.7rem;
      padding: 2px 6px;
   }

   /* SCROLLABLE CATEGORIES (Mobile) */
   .filters-container {
      width: 100%;
      overflow: hidden;
      /* Hide outer overflow */
   }

   .filter-switcher {
      display: inline-flex;
      /* Shrink to content */
      max-width: 95vw;
      /* allow scrolling if too wide */
      overflow-x: auto;
      /* Enable Horizontal Scroll */
      justify-content: flex-start;
      /* Items start from left inside scrollable area */
      white-space: nowrap;
      width: auto;
      /* Do NOT force 100% width, this causes the gap */
      padding: 5px;
      gap: 8px;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
   }

   .filter-switcher::-webkit-scrollbar {
      display: none;
      /* Chrome/Safari/Opera */
   }
}

/* View Count Badge (Global) */
.view-badge {
   position: absolute;
   bottom: 10px;
   right: 10px;
   background-color: rgba(0, 0, 0, 0.7);
   color: #fff;
   padding: 4px 8px;
   border-radius: 4px;
   font-size: 0.8rem;
   font-weight: 600;
   pointer-events: none;
   backdrop-filter: blur(4px);
   z-index: 5;
   display: flex;
   align-items: center;
   gap: 4px;
}

/* Ensure overlay is still on top or badge is visible */
.video-thumb {
   position: relative;
}

/* Grid View Toggles */
.grid-view-small {
   grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.grid-view-medium {
   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

/* Specific override for Video Grid Medium size */
.video-grid.grid-view-medium {
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.grid-view-big {
   grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
}

/* =========================================
   14. PHOTO GALLERY STYLES
   ========================================= */

.photo-grid {
   display: grid;
   gap: 30px;
   width: 100%;
}

/* Inherit grid columns from .grid-view-* classes (shared with video) */

.photo-item {
   position: relative;
   border-radius: 6px;
   overflow: hidden;
   background: #000;
   /* Aspect Ratio for Vertical Photos (9:16 like Instagram Stories/Mobile) */
   aspect-ratio: 9 / 16;
   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
   transition: transform 0.3s ease;
   cursor: pointer;
}

.photo-item:hover {
   transform: translateY(-5px);
}

.photo-thumb {
   width: 100%;
   height: 100%;
   position: relative;
}

.photo-thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.5s ease;
}

.photo-item:hover .photo-thumb img {
   transform: scale(1.05);
}

/* Overlay similar to video but simplified */
.photo-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.3);
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   transition: opacity 0.3s ease;
}

.photo-item:hover .photo-overlay {
   opacity: 1;
}

.expand-icon {
   color: #fff;
   font-size: 2rem;
   pointer-events: none;
   text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.admin-photo-actions {
   position: absolute;
   top: 10px;
   right: 10px;
   display: flex;
   gap: 5px;
   pointer-events: auto;
   /* Enable clicking buttons */
}

/* =========================================
   15. LIGHTBOX STYLES
   ========================================= */
.lightbox-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   background: rgba(0, 0, 0, 0.95);
   z-index: 3000;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.3s ease;
}

.lightbox-overlay.active {
   opacity: 1;
   pointer-events: auto;
}

.lightbox-content {
   max-width: 90%;
   max-height: 90vh;
   position: relative;
   display: flex;
   justify-content: center;
   align-content: center;
}

.lightbox-content img {
   max-width: 100%;
   max-height: 90vh;
   object-fit: contain;
   box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
}

.lightbox-close {
   position: absolute;
   top: 20px;
   right: 30px;
   background: none;
   border: none;
   color: #fff;
   font-size: 3rem;
   cursor: pointer;
   z-index: 3001;
}

.lightbox-nav {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   background: rgba(255, 255, 255, 0.1);
   border: none;
   color: #fff;
   font-size: 2rem;
   padding: 20px;
   cursor: pointer;
   transition: background 0.3s;
   user-select: none;
   z-index: 3001;
}

.lightbox-nav:hover {
   background: rgba(255, 255, 255, 0.2);
}

.lightbox-nav.prev {
   left: 20px;
}

.lightbox-nav.next {
   right: 20px;
}


/* Add Category Button Style */
.filter-btn.add-cat-btn {
   width: 30px;
   height: 30px;
   padding: 0;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.2rem;
   margin-left: 10px;
   background: #333;
   color: white;
}

/* Select Mode */
.photo-item.selected {
   border: 3px solid var(--accent-red);
   transform: scale(0.95);
}

.photo-item.selected .photo-thumb {
   opacity: 0.7;
}

body.select-mode-active .photo-item {
   cursor: cell;
   /* Indicate selection available */
}

/* Explicit Animation for Grid Items */
@keyframes fadeInUp {
   from {
      opacity: 0;
      transform: translateY(20px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}

.animate-in {
   animation: fadeInUp 0.5s ease forwards;
}

/* =========================================
   7. ANIMATIONS & EFFECTS
   ========================================= */

/* =========================================
   7. ANIMATIONS & EFFECTS
   ========================================= */

.morphing-bg {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: -10;
   /* Put it behind everything */
   background-color: #050505;
   overflow: hidden;
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.8s ease;
}

/* Ensure no background covers the morphing bg on pages where it's used */
body.has-morphing-bg .morphing-bg {
   opacity: 1;
   pointer-events: auto;
}

body.has-morphing-bg {
   background: transparent !important;
}

.blob {
   position: absolute;
   width: 800px;
   height: 800px;
   background: radial-gradient(circle, var(--accent-red) 0%, transparent 65%);
   filter: blur(100px);
   opacity: 0.6;
   border-radius: 50%;
   mix-blend-mode: screen;
}

.blob-1 {
   top: -10%;
   left: -10%;
   background: radial-gradient(circle, #ff0000 0%, transparent 70%);
   animation: move-1 25s infinite alternate ease-in-out;
}

.blob-2 {
   bottom: -10%;
   right: -10%;
   background: radial-gradient(circle, #800000 0%, transparent 70%);
   animation: move-2 30s infinite alternate ease-in-out;
}

.blob-3 {
   top: 30%;
   left: 40%;
   width: 500px;
   height: 500px;
   background: radial-gradient(circle, #ff3333 0%, transparent 70%);
   animation: move-3 20s infinite alternate ease-in-out;
}

@keyframes move-1 {
   0% {
      transform: translate(0, 0) rotate(0deg) scale(1.1);
   }

   33% {
      transform: translate(50vw, 20vh) rotate(120deg) scale(1.3);
   }

   66% {
      transform: translate(20vw, 50vh) rotate(240deg) scale(0.9);
   }

   100% {
      transform: translate(0, 0) rotate(360deg) scale(1.1);
   }
}

@keyframes move-2 {
   0% {
      transform: translate(0, 0) rotate(0deg) scale(1);
   }

   33% {
      transform: translate(-45vw, -35vh) rotate(-120deg) scale(1.4);
   }

   66% {
      transform: translate(-10vw, -50vh) rotate(-240deg) scale(1.1);
   }

   100% {
      transform: translate(0, 0) rotate(-360deg) scale(1);
   }
}

@keyframes move-3 {
   0% {
      transform: translate(0, 0) scale(1.2);
   }

   25% {
      transform: translate(-25vw, 15vh) scale(1.5);
   }

   50% {
      transform: translate(15vw, 35vh) scale(1);
   }

   75% {
      transform: translate(25vw, -15vh) scale(1.3);
   }

   100% {
      transform: translate(0, 0) scale(1.2);
   }
}

/* Static version of blobs (no animation) */
.static-blobs .blob {
   animation: none !important;
}

/* Glass panel utility */
.glass-panel {
   background: rgba(18, 18, 18, 0.4);
   backdrop-filter: blur(15px);
   -webkit-backdrop-filter: blur(15px);
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 12px;
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
   padding: var(--space-md);
}

.animated-bg-gradient {
   /* Kept for legacy if needed, but we prefer morphing-bg now */
   background: linear-gradient(-45deg, #101822, #0d0d0d, #2a1111, #1a0f0f);
   background-size: 400% 400%;
   animation: gradientBG 15s ease infinite;
   position: relative;
   overflow: hidden;
}

@keyframes gradientBG {
   0% {
      background-position: 0% 50%;
   }

   50% {
      background-position: 100% 50%;
   }

   100% {
      background-position: 0% 50%;
   }
}

/* =========================================
   15. UTILITY & HELPER CLASSES
   ========================================= */

.section-padding {
   padding: var(--space-lg) 0;
}

.panel-padding {
   padding: var(--space-lg) var(--space-md);
}

.max-w-800 {
   max-width: 800px;
}

.max-w-1000 {
   max-width: 1000px;
}

.mx-auto {
   margin-left: auto;
   margin-right: auto;
}

.text-center {
   text-align: center;
}

.text-left {
   text-align: left;
}

.text-justify {
   text-align: justify;
}

.mb-sm {
   margin-bottom: var(--space-sm);
}

.mb-md {
   margin-bottom: var(--space-md);
}

.mb-lg {
   margin-bottom: var(--space-lg);
}

.mt-sm {
   margin-top: var(--space-sm);
}

.mt-md {
   margin-top: var(--space-md);
}

.mt-lg {
   margin-top: var(--space-lg);
}

.full-width {
   width: 100%;
}

.inline-block {
   display: inline-block;
}

.text-shadow-heavy {
   text-shadow: 0 4px 15px rgba(0, 0, 0, 0.8);
}

.text-shadow-light {
   text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

/* Form Specials */
.glass-input {
   background: rgba(0, 0, 0, 0.3) !important;
   border-color: rgba(255, 255, 255, 0.1) !important;
}

.contact-panel {
   text-align: left;
   background: rgba(18, 18, 18, 0.4);
   backdrop-filter: blur(15px);
   -webkit-backdrop-filter: blur(15px);
   padding: var(--space-md);
   border-radius: 12px;
   border: 1px solid rgba(255, 255, 255, 0.08);
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.btn-contact {
   min-width: 200px;
   box-shadow: 0 4px 15px rgba(187, 10, 10, 0.3);
}

.label-sub {
   display: block;
   margin-bottom: 0.5rem;
   font-size: 0.9rem;
   color: var(--text-secondary);
}

.view-badge-admin {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   gap: 2px;
}

.view-unique {
   font-size: 0.8em;
   color: #ff6b6b;
   opacity: 0.9;
}

.admin-controls {
   position: fixed;
   bottom: 30px;
   right: 30px;
   z-index: 2500;
   display: flex;
   flex-direction: column;
   gap: 10px;
   align-items: flex-end;
}

.admin-fab {
   width: 50px;
   height: 50px;
   border-radius: 50%;
   background: #444;
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   border: 1px solid #666;
   cursor: pointer;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
   font-size: 1.2rem;
   text-decoration: none;
   transition: all 0.3s ease;
}

.admin-fab:hover {
   background: #555;
   transform: scale(1.05);
}

.admin-history-fab {
   background: #333;
   border: 1px solid #555;
}

.admin-hr {
   border: 0;
   border-top: 1px solid #444;
   margin: 20px 0;
}

.admin-optional-text {
   font-size: 0.9rem;
   color: #888;
   margin-bottom: 10px;
}

.thumb-placeholder-dark {
   background: #222;
}

.flex-center {
   display: flex;
   align-items: center;
   justify-content: center;
}

.relative {
   position: relative;
}

.cat-btn-wrapper {
   display: inline-block;
   position: relative;
}

.archive-cat-badge {
   display: none;
   position: absolute;
   top: -10px;
   right: -5px;
   width: 20px;
   height: 20px;
   border-radius: 50%;
   background: var(--accent-red);
   color: white;
   border: none;
   cursor: pointer;
   font-size: 12px;
   align-items: center;
   justify-content: center;
   z-index: 10;
}

.small-modal {
   max-width: 400px !important;
}

.hidden {
   display: none !important;
}

.relative {
   position: relative;
}

.z-2 {
   z-index: 2;
}

.text-white {
   color: var(--text-primary) !important;
}

/* Login Page */
.login-card {
   background-color: var(--bg-surface);
   padding: var(--space-lg) var(--space-md);
   border-radius: 8px;
   width: 100%;
   max-width: 400px;
   text-align: center;
   border: 1px solid var(--border-color);
   box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
   animation: fadeUp 0.5s ease-out;
}

.login-card h1 {
   font-size: 2rem;
   margin-bottom: var(--space-md);
   letter-spacing: 0.1em;
   color: var(--accent-red);
}

.login-form {
   display: flex;
   flex-direction: column;
   gap: var(--space-sm);
}

.error-message {
   color: var(--accent-red);
   font-size: 0.9rem;
   margin-bottom: var(--space-sm);
   text-transform: uppercase;
   font-weight: 600;
}

@keyframes fadeUp {
   from {
      opacity: 0;
      transform: translateY(20px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}


.archive-item-card {
   background: #111;
   padding: 20px;
   margin-bottom: 20px;
   border-radius: 8px;
   border: 1px solid #333;
}

.flex-between-center {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.grid-history-photos {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
   gap: 10px;
}

.photo-archive-box {
   aspect-ratio: 1;
   cursor: pointer;
   position: relative;
}

.img-fit {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.btn-text-inline {
   margin-top: 1rem;
   display: inline-block;
}

.flex-end-gap {
   display: flex;
   justify-content: flex-end;
   gap: 10px;
}

.gap-md {
   gap: 1rem;
}


.restore-badge {
   position: absolute;
   top: 10px;
   right: 10px;
   background: rgba(0, 0, 0, 0.7);
   color: #4CAF50;
   border: 1px solid #4CAF50;
   width: 30px;
   height: 30px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   z-index: 20;
   transition: all 0.2s ease;
}

.restore-badge:hover {
   background: #4CAF50;
   color: white;
   transform: scale(1.1);
}

.edit-badge-top {
   position: absolute;
   top: 10px;
   left: 10px;
}

.btn-secondary {
   background-color: #555 !important;
   color: white !important;
}

.btn-secondary:hover {
   background-color: #666 !important;
}

.bg-surface-padding {
   padding: 0.5rem;
   background: var(--bg-surface);
}

.font-09 {
   font-size: 0.9rem;
}

.font-08 {
   font-size: 0.8rem;
}


.restore-red {
   background-color: var(--accent-red) !important;
   color: white !important;
}

.text-muted-08 {
   font-size: 0.8rem;
   color: #888;
}

.text-muted-center {
   text-align: center;
   color: #888;
}


.admin-analytics-link {
   margin-right: 20px;
   color: white;
   text-decoration: none;
   font-weight: 700;
}

.logo-link {
   text-decoration: none;
}

/* Site Header Variants */
.site-header.transparent {
   background-color: transparent;
   border-bottom: none;
   backdrop-filter: none;
}

body:not(:has(.site-header.transparent)) .main-content {
   margin-top: 80px;
}


.footer-nav {
   margin-top: 1.5rem;
   display: flex;
   justify-content: center;
   gap: 2rem;
}

.ml-sm {
   margin-left: 10px;
}

.p-sm {
   padding: var(--space-sm);
}

.p-0 {
   padding: 0 !important;
}

.w-30 {
   width: 30px !important;
}

.h-30 {
   height: 30px !important;
}

.modal-cta-container {
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 100%;
   border-top: 1px solid rgba(255, 255, 255, 0.05);
   padding-top: var(--space-md);
   gap: var(--space-sm);
}

#modalCta {
   box-shadow: 0 4px 20px rgba(187, 10, 10, 0.2);
   transition: all 0.3s ease;
}

#modalCta:hover {
   transform: translateY(-3px);
   box-shadow: 0 6px 25px rgba(187, 10, 10, 0.4);
}

.btn-text {
   color: var(--text-secondary);
   text-decoration: none;
   font-size: 0.9rem;
   transition: color var(--transition-fast);
   cursor: pointer;
}

.btn-text:hover {
   color: var(--text-primary);
}

/* Dynamic Links Admin UI */
.link-input-row {
   display: flex;
   gap: 10px;
   align-items: center;
   margin-bottom: 8px;
}

.link-input-row input {
   flex: 1;
   padding: 8px;
   background: rgba(0, 0, 0, 0.2);
   border: 1px solid rgba(255, 255, 255, 0.1);
   color: white;
   border-radius: 4px;
}

.btn-remove-link {
   background: rgba(255, 0, 0, 0.2);
   color: #ff4444;
   border: 1px solid rgba(255, 0, 0, 0.3);
   border-radius: 4px;
   width: 30px;
   height: 30px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.2s;
}

.btn-remove-link:hover {
   background: #ff4444;
   color: white;
}

.mt-xs {
   margin-top: 5px;
}

.mb-xs {
   margin-bottom: 5px;
}

/* Modal Links Rendering */
.modal-links-container {
   display: flex;
   flex-wrap: wrap;
   gap: 15px;
   border-top: 1px solid rgba(255, 255, 255, 0.05);
   padding-top: 15px;
}

.modal-link-item {
   color: var(--accent-red);
   text-decoration: none;
   font-size: 0.9rem;
   font-weight: 600;
   display: inline-flex;
   align-items: center;
   gap: 5px;
   transition: all 0.2s ease;
}

.modal-link-item:hover {
   color: white;
   transform: translateX(3px);
}

.link-icon {
   font-size: 0.8rem;
   opacity: 0.8;
}

/* =========================================
   NEW VIDEO BADGE
   ========================================= */
.modal-lock {
   overflow: hidden !important;
}


/* Video modal description text alignment */
#modalTitle {
   text-align: center;
   margin-bottom: 5px;
}

.modal-date {
   display: block;
   /* Required for text-align on span */
   text-align: center;
   margin-bottom: 15px;
   color: var(--text-secondary);
   font-size: 0.9rem;
}

.modal-desc {
   text-align: justify;
   max-width: 90%;
   margin: 10px auto;
   /* Added top/bottom margin for spacing */
}

/* =========================================
   VIDEO NAVIGATION & TRANSITIONS
   ========================================= */

/* Fixed Video Stage (Prevents CLS/Jumping) */
.modal-video-container {
   width: 100%;
   height: 60vh;
   /* Fixed stage height */
   background: #000;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   overflow: hidden;
}

.modal-video-container video {
   max-width: 100%;
   max-height: 100%;
   width: 100%;
   height: 100%;
   box-shadow: none;
   object-fit: contain;
}

/* Mobile Optimization for Video Stage */
@media (max-width: 768px) {
   .modal-video-container {
      height: auto;
      /* Allow flexible height */
      aspect-ratio: 16 / 9;
      /* Perfect for landscape videos */
   }
}

.nav-btn {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   background: rgba(0, 0, 0, 0.5);
   color: white;
   border: none;
   font-size: 2rem;
   padding: 1rem 0.5rem;
   cursor: pointer;
   z-index: 10;
   transition: background 0.3s ease, transform 0.2s ease;
   border-radius: 4px;
   opacity: 0;
   /* Hidden by default, shown on hover */
}

.modal-video-container:hover .nav-btn {
   opacity: 1;
}

.nav-btn:hover {
   background: var(--accent-red);
   transform: translateY(-50%) scale(1.1);
}

.nav-btn.prev {
   left: 10px;
}

.nav-btn.next {
   right: 10px;
}

/* Smooth Switching transition */
.modal-content.switching .modal-video-container,
.modal-content.switching .modal-info {
   opacity: 0;
   transition: opacity 0.3s ease;
}

/* =========================================
   MINI PLAYER REPARENTING (FINAL FIX)
   ========================================= */

@keyframes slideUpMini {
   from {
      transform: translateY(100px);
      opacity: 0;
   }

   to {
      transform: translateY(0);
      opacity: 1;
   }
}

/* 1. Hide the Modal Overlay Completely (Since video is now in Body) */
body.mini-player-active .modal-overlay {
   display: none !important;
}

/* 2. Style the Video Container (Directly in Body now) */
body.mini-player-active .modal-video-container {
   display: block !important;
   position: fixed;
   bottom: 20px;
   right: 20px;
   width: 360px;
   height: auto;
   z-index: 99999 !important;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
   border: 2px solid var(--border-color);
   border-radius: 8px;
   overflow: hidden;
   pointer-events: auto;
   visibility: visible !important;
   opacity: 1 !important;
   animation: slideUpMini 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   background: #000 !important;
   touch-action: none;
   /* Prevent scroll interference */
   /* FIX for gaps/borders */
}

/* Mobile Mini-Player Sizing (Less Obtrusive) */
@media (max-width: 768px) {
   body.mini-player-active .modal-video-container {
      width: 250px;
      bottom: 15px;
      right: 15px;
   }
}

body.mini-player-active video {
   border-radius: 0;
   width: 100%;
   height: 100%;
   background: #000;
}

/* 3. Hide large Nav buttons in Mini Mode */
body.mini-player-active .nav-btn {
   display: none !important;
}

/* 4. Controls Positioning */
body.mini-player-active .mini-controls {
   display: flex !important;
   position: absolute;
   top: 5px;
   right: 5px;
   gap: 5px;
   z-index: 100000 !important;
}

body.mini-player-active .drag-indicator {
   display: flex !important;
}

.drag-indicator {
   display: none;
   position: absolute;
   top: 10px;
   left: 10px;
   color: rgba(255, 255, 255, 0.6);
   background: rgba(0, 0, 0, 0.3);
}

.mini-controls {
   display: none;
}

.mini-btn {
   background: rgba(0, 0, 0, 0.6);
   color: white;
   border: 1px solid rgba(255, 255, 255, 0.2);
   width: 28px;
   height: 28px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   font-size: 0.9rem;
   backdrop-filter: blur(4px);
   padding: 0;
}

.mini-btn:hover {
   background: var(--accent-red);
   color: white;
   border-color: var(--accent-red);
}

/* =========================================
   SMOOTH MODAL TRANSITIONS (FINAL)
   ========================================= */

/* Overwrite default display-based hiding with Visibility/Opacity */
.modal-overlay {
   display: flex !important;
   /* Always layout flex, toggle visibility instead */
   visibility: hidden;
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
      visibility 0.4s step-end,
      /* Delay hiding visibility until opacity is 0 */
      backdrop-filter 0.4s ease;

   /* Ensure positioning is robust */
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 10000;
   background: rgba(0, 0, 0, 0.85);
   backdrop-filter: blur(5px);
   align-items: center;
   justify-content: center;
}

.modal-overlay.is-open {
   visibility: visible;
   opacity: 1;
   pointer-events: auto;
   backdrop-filter: blur(12px);
   /* Stronger blur when open */
   transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
      visibility 0s step-start,
      /* Show visibility immediately */
      backdrop-filter 0.4s ease;
}

.modal-content {
   /* Initial State (Closed) */
   transform: scale(0.92) translateY(30px);
   opacity: 0;
   transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1),
      opacity 0.4s ease;
   will-change: transform, opacity;
}

.modal-overlay.is-open .modal-content {
   /* Active State (Open) */
   transform: scale(1) translateY(0);
   opacity: 1;
}

/* Enhanced Mini-Player Animation */
@keyframes slideUpMini {
   0% {
      transform: translateY(100px) scale(0.8);
      opacity: 0;
   }

   60% {
      transform: translateY(-10px) scale(1.05);
      /* Overshoot */
      opacity: 1;
   }

   100% {
      transform: translateY(0) scale(1);
      opacity: 1;
   }
}

body.mini-player-active .modal-video-container {
   animation: slideUpMini 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Mini-Player Exit Animation (Swipe Right) */
@keyframes slideOutRight {
   0% {
      transform: translateY(0) translateX(0) scale(1);
      opacity: 1;
   }

   100% {
      transform: translateY(0) translateX(150px) scale(0.95);
      opacity: 0;
   }
}

body.mini-player-active .modal-video-container.mini-closing {
   animation: slideOutRight 0.5s cubic-bezier(0.33, 1, 0.68, 1) forwards;
   pointer-events: none;
}

/* Switching Transition (Cross-fade) */
.modal-content.switching .modal-video-container,
.modal-content.switching .modal-info {
   opacity: 0;
   transform: scale(0.98);
   /* Slight shrink */
   transition: opacity 0.3s ease, transform 0.3s ease;
}

/* =========================================
   NEW VIDEO BADGE (PRO STYLE)
   ========================================= */
.new-badge {
   position: absolute;
   top: 12px;
   right: 12px;
   background: linear-gradient(135deg, rgba(220, 20, 20, 0.9) 0%, rgba(160, 0, 0, 0.95) 100%);
   color: white;
   font-size: 0.65rem;
   font-weight: 800;
   padding: 6px 12px;
   border-radius: 6px;
   z-index: 5;
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   border: 1px solid rgba(255, 255, 255, 0.15);
   text-transform: uppercase;
   letter-spacing: 1.5px;
   pointer-events: none;
   font-family: var(--font-main);
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
   transform: translateZ(0);
}

/* =========================================
   ADMIN CHECKBOX STYLE
   ========================================= */
.checkbox-group {
   display: flex;
   align-items: center;
   margin: 1rem 0;
}

.checkbox-label {
   display: flex;
   align-items: center;
   cursor: pointer;
   font-size: 0.9rem;
   color: var(--text-secondary);
   user-select: none;
}

.checkbox-label input {
   position: absolute;
   opacity: 0;
   cursor: pointer;
   height: 0;
   width: 0;
}

.custom-checkbox {
   height: 20px;
   width: 20px;
   background-color: rgba(255, 255, 255, 0.1);
   border: 1px solid rgba(255, 255, 255, 0.2);
   border-radius: 4px;
   margin-right: 10px;
   position: relative;
   transition: all 0.2s ease;
}

.checkbox-label:hover input~.custom-checkbox {
   background-color: rgba(255, 255, 255, 0.2);
   border-color: var(--accent-red);
}

.checkbox-label input:checked~.custom-checkbox {
   background-color: var(--accent-red);
   border-color: var(--accent-red);
   box-shadow: 0 0 10px rgba(187, 10, 10, 0.4);
}

.custom-checkbox:after {
   content: "";
   position: absolute;
   display: none;
   left: 7px;
   top: 3px;
   width: 5px;
   height: 10px;
   border: solid white;
   border-width: 0 2px 2px 0;
   transform: rotate(45deg);
}

.checkbox-label input:checked~.custom-checkbox:after {
   display: block;
}