:root {
   --primary: #5e5ce6;
   --primary-hover: #4e4cb3;
   --bg-color: #000;
   --text-color: #f5f5f7;
   --transition-speed: 0.4s;
   --glass-bg: rgba(0, 0, 0, 0.4);
   --glass-border: rgba(255, 255, 255, 0.1);
}

html,
body {
   margin: 0 !important;
   padding: 0 !important;
   width: 100vw;
   height: 100vh;
   overflow: hidden;
   background: #000 !important;
   color: var(--text-color);
   font-family:
      "Inter",
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      Roboto,
      Helvetica,
      Arial,
      sans-serif;
}

main {
   margin: 0 !important;
   padding: 0 !important;
   width: 100vw;
   height: 100vh;
   display: block;
}

.gallery-container {
   width: 100vw;
   height: 100vh;
   position: relative;
   margin: 0;
   padding: 0;
   background: #000;
}

.image-wrapper {
   position: absolute;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   background: #000;
   display: flex;
   justify-content: center;
   align-items: center;
   overflow: hidden;
}

.image-wrapper img {
   max-width: 100vw;
   max-height: 100vh;
   width: auto;
   height: auto;
   object-fit: contain;
   display: block;
   transition:
      opacity var(--transition-speed) ease-in-out,
      transform var(--transition-speed) ease-out;
   /* Aggressively remove all filters and shadows */
   filter: none !important;
   box-shadow: none !important;
}

.image-wrapper img.loading {
   opacity: 0;
   transform: scale(1.02);
}

.nav-controls {
   position: absolute;
   bottom: 0.8rem;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   justify-content: center;
   gap: 0.5rem;
   align-items: center;
   padding: 0.5rem;
   background: var(--glass-bg);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   border: 1px solid var(--glass-border);
   border-radius: 99px;
   /* Minimal shadow for depth, avoiding "blue glow" */
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
   z-index: 10;
}

.nav-controls button {
   padding: 0.5rem;
   border-radius: 50%;
   width: 40px;
   height: 40px;
   transition: all 0.2s ease;
   border: none;
   background: transparent;
   color: var(--text-color);
   cursor: pointer;
   display: flex;
   justify-content: center;
   align-items: center;
}

.nav-controls button:hover:not(:disabled) {
   background: var(--primary);
   color: white;
   transform: translateY(-2px);
}

.nav-controls button:disabled {
   opacity: 0.2;
   cursor: not-allowed;
}

.nav-controls .counter {
   font-size: 0.8rem;
   color: var(--text-color);
   margin: 0 0.75rem;
   font-weight: 500;
   font-variant-numeric: tabular-nums;
   white-space: nowrap;
}

.info-overlay {
   position: absolute;
   top: 1.5rem;
   left: 1.5rem;
   padding: 0.5rem 1rem;
   background: var(--glass-bg);
   backdrop-filter: blur(10px);
   border: 1px solid var(--glass-border);
   border-radius: 8px;
   color: white;
   pointer-events: none;
   z-index: 5;
}

.info-overlay h3 {
   margin: 0;
   font-size: 0.8rem;
   font-weight: 500;
   opacity: 0.7;
}

[x-cloak] {
   display: none !important;
}