:root{--blur:18px;--g:rgba(255,255,255,.25);--b:rgba(255,255,255,.4);--brown:#4A3E35;--brown-light:#64564C;--green:#67735B;}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Inter',sans-serif;background:url('background.jpg') center bottom / cover no-repeat fixed;color:var(--brown);}
.top-bar{background:var(--g);backdrop-filter:blur(var(--blur));display:flex;align-items:center;justify-content:space-between;padding:0.8rem 2rem;position:sticky;top:0;z-index:10;}
.brand-name{font-family:'Grand Hotel',cursive;font-size:1.8rem;letter-spacing:1px;color:var(--brown);}
.portfolio-link{font-weight:700;font-family:'Inter',sans-serif;font-size:1rem;text-decoration:none;color:var(--brown);}
.portfolio-link:hover{opacity:.8;}
.linkedin{width:24px;height:24px;}
.grid{display:grid;grid-template-columns:repeat(2,minmax(280px,1fr));gap:1rem;padding:2rem;}
.card{background:var(--g);backdrop-filter:blur(var(--blur));border:1px solid var(--b);border-radius:20px;}
.pad-lg{padding:2.75rem;}
.profile{grid-column:1/3;display:flex;gap:1.5rem;align-items:center;}
.portrait{width:150px;border-radius:20px;}
.tags{display:flex;gap:.6rem;flex-wrap:wrap;margin:.8rem 0;}
.tags li{background:rgba(103,115,91,.15);padding:.3rem .8rem;border-radius:10px;font-size:.85rem;font-weight:500;list-style:none;color:var(--green);}
.email{display:inline-block;background:rgba(103,115,91,.15);padding:.3rem .8rem;border-radius:9999px;font-size:.85rem;font-weight:600;color:var(--brown);text-decoration:none;margin-bottom:.8rem;margin-left:0.6rem;}
/* experience two cards */
.exp-left{grid-column:1/2;}
.exp-right{grid-column:2/3;}
.exp-left ul,.exp-right ul{margin-left:1.2rem;margin-bottom:.6rem;}
/* Gallery */
.gallery-container{grid-column:1/3;margin-top:1rem;}
.carousel{overflow:hidden;border-radius:14px;width:100%;position:relative;}
.track{display:flex;animation:none;animation:scroll 20s linear infinite;}
@keyframes scroll{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}
.c-item{flex:0 0 25%;padding:8px;}
.c-item img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px;}
.controls{text-align:center;margin-top:.6rem;}
.nav-btn{background:var(--brown);border:none;color:#fff;width:34px;height:34px;border-radius:50%;font-size:18px;cursor:pointer;margin:0 6px;}
/* dock */
.dock{grid-column:1/3;}
.apps{display:flex;flex-wrap:wrap;gap:20px; /* increased gap for better breathing space */justify-content:center;align-items:flex-start;}
.app{display:flex;flex-direction:column;align-items:center;justify-content:center;width:72px;}
.app img{width:48px;height:48px;border-radius:12px;background:rgba(255,255,255,.35);padding:4px;margin-bottom:6px;}
.app p{font-size:.75rem;text-align:center;color:#222;margin:0;}
@media(max-width:700px){.grid{grid-template-columns:1fr}.profile{flex-direction:column;align-items:flex-start}.exp-left,.exp-right{grid-column:1/3}.c-item{flex:0 0 50%;}}

/* footer */
.site-footer{text-align:center;font-size:0.9rem;margin-top:2rem;color:#666;}

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


a[href^="mailto"]{
  color:var(--brown);
  text-decoration:none;
}
a[href^="mailto"]:hover{
  text-decoration:underline;
}


.site-footer{
  color:var(--brown-light);
  padding:1rem 1.5rem;
  margin:3rem auto 2rem auto;
  background:rgba(255,255,255,0.15);
  border:1px solid rgba(255,255,255,0.3);
  backdrop-filter:blur(14px);
  border-radius:9999px;
  width:fit-content;
}


ul li{
  list-style: disc inside;
  margin:0 0 .3rem 1rem;
  color:var(--brown);
}

/* Hidden signature */
.signature{display:none;}

/* Provide breathing room between heading and apps grid */
.dock h3{margin-bottom:1rem;}



.lightbox-overlay{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.8);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;

  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.lightbox-overlay.active{
  display:flex;
}
.lightbox-content img,.lightbox-content video{
  max-width:90vw;
  max-height:90vh;
  border-radius:12px;
}
.close-btn{
  position:absolute;
  top:20px;
  right:30px;
  font-size:32px;
  color:#fff;
  cursor:pointer;
  user-select:none;
}


/* ==== Carousel Gallery ==== */
.carousel{
  overflow:hidden;
  width:100%;
  margin-top:1rem;
}
.track{
  display:flex;
  gap:1rem;
  transition:transform 0.5s ease-in-out;
}
.g-item{
  flex:0 0 200px; /* square width, adjust here */
  aspect-ratio:1/1;
  position:relative;
}
.g-item img,
.g-item video{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:8px;
  cursor:pointer;
}
/* controls */
.controls{
  display:flex;
  justify-content:center;
  gap:2rem;
  margin-top:.5rem;
}
.nav-btn{
  background:transparent;
  border:none;
  font-size:2rem;
  cursor:pointer;
  color:var(--text-color,#333);
}
.nav-btn:hover{
  transform:scale(1.2);
}
/* Lightbox overlay styles reused */


/* Lightbox nav buttons */

}

/* Caption inside lightbox */
.lb-caption{
  margin-top:8px;
  color:#fff;
  text-align:center;
  font-size:1rem;
  max-width:90vw;
}

/* ---- Gallery smooth jump ---- */
.track.smooth{
  transition: transform 0.6s ease;
}

/* ---- Lightbox Glass Layout ---- */
.lightbox-overlay{
  position:fixed;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  background:rgba(0,0,0,0.6);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
}
.lightbox-overlay.active{display:flex;}

.lightbox-wrapper{
  width:80vw;
  max-width:1000px;
  height:80vh;
  background:rgba(255,255,255,0.55);
  backdrop-filter:blur(25px) saturate(140%);
  border-radius:24px;
  display:flex;
  overflow:visible;
  position:relative;
  box-shadow:0 8px 32px rgba(0,0,0,0.35);

  margin-bottom:6rem;
}

.lightbox-media{
  flex:1 1 60%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1rem;
}
.lightbox-media img,
.lightbox-media video{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  border-radius:16px;
}

.lightbox-info{
  flex:1 1 40%;
  padding:2rem;
  overflow-y:auto;
  color:#111;
  font-family: "Inter", sans-serif;
}
#lb-title{margin:0 0 .5rem 0; font-size:1.5rem; font-weight:600;}
#lb-sub{display:block; color:#666; margin-bottom:1rem;}
#lb-desc{white-space:pre-line; line-height:1.4;}

.close-btn{
  position:absolute;
  top:12px;
  right:20px;
  font-size:32px;
  color:#333;
  cursor:pointer;
}


}


/* Reset margin and enforce box sizing */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
}

html {
  overflow-x: hidden;
}

body {
  margin: 0;
}

/* Ensure media elements scale and block display */
img, video {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Lightbox navigation buttons */






.page-title{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  font-family:'Grand Hotel',cursive;
  font-size:1.8rem;
  color:var(--brown);
  pointer-events:none;
}


.pdf-container{
  max-width:none;
  width:calc(100% - 4rem);
}

.page-title { position: absolute; left: 50%; transform: translateX(-50%); font-family: "Cinzel", serif; font-size: 1.5rem; font-weight: 600; color: var(--brown); }
.pdf-container { width: calc(100% - 4rem); max-width: none; margin: 0 auto; padding: 1rem; }
.pdf-section { width: 100%; }

.pdf-container object { width: 100%; height: 90vh; aspect-ratio: 595 / 842; }
.pdf-container { display: flex; align-items: center; justify-content: center; }

.img-gallery{
  width:calc(100% - 4rem);
  max-width:none;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:2rem;
}
.img-gallery img{
  width:100%;
  height:auto;
  border-radius:20px;
  box-shadow:0 4px 10px rgba(0,0,0,.15);
}
.gallery-section{width:100%;display:flex;justify-content:center;padding:2rem 0;}

.site-footer{
  width:100%;
  padding:1rem 0;
  display:flex;
  justify-content:center;
}
.return-home{
  background:#4A3E35;
  color:#F9F4EE;
  font-family:'Inter',sans-serif;
  font-weight:600;
  text-decoration:none;
  padding:0.75rem 1.75rem;
  border-radius:9999px;
  transition:opacity .25s ease;
}
.return-home:hover{
  opacity:.85;
}

.return-home{
  background:rgba(74,62,53,.35);
  backdrop-filter:blur(var(--blur));
  border:1px solid rgba(255,255,255,.4);
  color:#F9F4EE;
  padding:0.75rem 2rem;
  border-radius:2rem;
  font-weight:600;
  transition:opacity .25s ease;
}
.return-home:hover{opacity:.9;}



.plain-footer{
  background:none !important;
  border:none !important;
  backdrop-filter:none !important;
  margin-top:2rem;
}

/* Ensure index footer capsule hugs text */
.site-footer:not(.plain-footer){
  width:fit-content !important;
  padding:1rem 1.5rem !important;
  margin:3rem auto 2rem auto !important;
  display:block !important;
}

/* Mute Toggle Button */
.mute-btn{
  position:absolute;
  top:1rem;
  right:1rem;
  width:40px;
  height:40px;
  border:none;
  border-radius:50%;
  background:rgba(255,255,255,.4);
  backdrop-filter:blur(10px);
  font-size:1.2rem;
  cursor:pointer;
}


/* Glass Glow Effect */
:root {
  --spot-size: 120px;
}

.glass {
  position: relative;
  overflow: hidden;
}

.glass::after{
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      circle var(--spot-size) at var(--x,50%) var(--y,50%),
      rgba(255,255,255,.35) 0%,
      rgba(255,255,255,0) 100%
    );
  opacity: 0;
  transition: opacity .2s linear;
}


.glass.active::after {
  opacity: 1;
}


/* Sparks animation */
.spark{
  position:absolute;
  width:5px;
  height:5px;
  background:rgba(255,255,255,0.9);
  border-radius:50%;
  pointer-events:none;
  animation:spark-fall var(--dur,1.4s) ease-out forwards;
}

@keyframes spark-fly{
  0%{transform:translate(0,0) scale(1);opacity:1;}
  100%{transform:translate(var(--dx,0px),var(--dy,0px)) scale(0.2);opacity:0;}
}


.spark{
  position:absolute;
  width:5px;
  height:5px;
  background:rgba(255,255,255,0.9);
  border-radius:50%;
  pointer-events:none;
  animation:spark-fall var(--dur,1.4s) ease-out forwards;
}

@keyframes spark-fall{
  0%   {transform:translate(0,0) scale(1); opacity:1;}
  35%  {transform:translate(var(--dx,0px), var(--dy0,0px)) scale(0.6); opacity:1;}
  100% {transform:translate(var(--dx,0px), var(--dy2,160px)) scale(0.1); opacity:0;}
}

/* Auto one-column on small screens */
@media (max-width:900px){
  .grid{grid-template-columns:1fr;}
}


/* ----- Mobile Lightbox Layout Improvements (2025-07-02) ----- */
@media (max-width: 600px) {
  .lightbox-wrapper {
    width: 90vw;
    max-width: 90vw;
    height: auto;
    flex-direction: column;
    padding: 1rem;
  }
  .lightbox-media {
    flex: 0 0 auto;
    width: 100%;
    padding: 0;
  }
  .lightbox-media img,
  .lightbox-media video {
    max-width: 100%;
    max-height: 60vh;
    border-radius: 20px;
  }
  .lightbox-info {
    flex: 0 0 auto;
    padding: 1rem 0 0;
    text-align: left;
  }
  
  
  
}

/* ----- Gallery Control Button Improvements (2025-07-02) ----- */
.gallery-container .controls .nav-btn {
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0,0,0,0.25);
  border-radius: 9999px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--brown);
}
.gallery-container .controls .nav-btn:active {
  transform: scale(0.95);
}


/* Glass capsule / circle button styles */
.lb-glass,
.nav-btn,

.nav-btn{
  width:72px;
  height:44px;
  border-radius:30px;
  font-size:24px;
}



/* Lightbox control positions */
@media (min-width:0px){
  #lightboxOverlay 
  #lightboxOverlay 
  #lightboxOverlay 
  #lightboxOverlay .lightbox-wrapper{
    padding-bottom:120px; /* space for controls */
    max-width:90vw;
    max-height:80vh;
  }
}

/* Mobile info scroll */
@media (max-width:600px){
  #lightboxOverlay .lightbox-info{
    max-height:30vh;
    overflow-y:auto;
  }
}

/* Hide original controls in gallery section if repositioned? Already styled */


/* === Patch v4: Gallery & Lightbox adjustments === */

:root{
  --cream:#F6F3EB;
}

/* Gallery controls capsule buttons */
.gallery-container .controls{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:1rem;
  margin-top:1rem;
}
.gallery-container .controls .nav-btn{
  width:88px;
  height:44px;
  border-radius:30px;
  background:rgba(255,255,255,0.25);
  border:1px solid rgba(255,255,255,0.4);
  backdrop-filter:blur(var(--blur));
  -webkit-backdrop-filter:blur(var(--blur));
  color:var(--cream);
  font-size:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 0 6px rgba(255,255,255,0.5) inset,
             0 2px 4px rgba(0,0,0,0.15);
}
.gallery-container .controls .nav-btn:hover{
  transform:scale(1.05);
}

/* Lightbox media fixed size */
.lightbox-media img,
.lightbox-media video{
  max-width:100%;
  max-height:60vh;
  object-fit:contain;
}

/* Lightbox info scroll mobile and padding */
.lightbox-info{
  padding:1.2rem;
}
@media(max-width:600px){
  .lightbox-info{
    max-height:35vh;
    overflow-y:auto;
  }
}

/* Center align description vertically on desktop */
@media(min-width:700px){
  .lightbox-info{
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
}

/* Bottom controls alignment & style */





/* Positioning bottom center */
#lightboxOverlay 
#lightboxOverlay 
#lightboxOverlay 

/* Ensure wrapper scroll for long content without resize */
.lightbox-wrapper{
  overflow-y:auto;
  padding-bottom:120px; /* space for controls */
}

/* ---- Lightbox header gap ---- */
:root {
  --topbar-height: 72px;
}
.top-bar{
  position: fixed;
  top:0;
  left:0;
  width:100%;
  z-index:10000;
}

/* offset overlay below header */
.lightbox-overlay{
  top:0;
  height: calc(100vh - var(--topbar-height));
}

/* footer container */



/* nav buttons inside footer */


/* size tweaks */


/* deep brown arrow color */


/* Desktop wrapper content align center */
@media (min-width: 992px){
  .lightbox-wrapper{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:2rem;
  }
  .lightbox-media{
    flex:0 0 auto;
    max-width:45%;
    max-height:60vh;
    object-fit:contain;
  }
  .lightbox-info{
    flex:1 1 auto;
    max-height:60vh;
    overflow-y:auto;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
}

/* Mobile (portrait) adjustments */
@media (max-width: 991px){
  .lightbox-wrapper{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    padding:1rem;
    gap:1rem;
  }
  .lightbox-media{
    width:auto;
    max-height:50vh;
    object-fit:contain;
  }
  .lightbox-info{
    max-height:40vh;
    overflow-y:auto;
    padding:1rem;
  }
}

/* Tablet landscape uses desktop layout by min-width rule above */

/* Gallery page nav arrow color */
.controls .nav-btn{
  color: var(--brown-light);
}


/* ---- Patch v7 (2025-07-02) -----------------------------------
   Addresses unresolved Lightbox & Gallery UI issues
-----------------------------------------------------------------*/

/* 1) Keep header always on top of Lightbox */
.top-bar{
  position: fixed;
  top:0;
  left:0;
  width:100%;
  z-index:10000 !important;
}

/* 2) Offset overlay to sit below header */
:root {
  --topbar-height: 72px;
  --cream: #F8F4F1;
}
.lightbox-overlay{
  top:0;
  height: calc(100vh - var(--topbar-height)) !important;
}

/* 3) Lightbox wrapper flex layout */
.lightbox-wrapper{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:3rem;
}

/* 3a) Media + description columns */
.lightbox-media{
  flex:1 1 50%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.lightbox-media img,
.lightbox-media video{
  max-height:50vh;
  width:auto;
  object-fit:contain;
}

/* 3b) Info column */
.lightbox-info{
  flex:1 1 50%;
  overflow-y:auto;
  max-height:50vh;
  padding:1.25rem 2rem;
}

/* 4) Mobile stack & smaller media */
@media(max-width: 700px){
  .lightbox-wrapper{flex-direction:column;gap:1.5rem;}
  .lightbox-media img,
  .lightbox-media video{max-height:40vh;}
  .lightbox-info{max-height:40vh;}
}

/* 5) Tablet rules */
@media(min-width:701px) and (max-width:1024px){
  /* portrait tablets mimic mobile stack */
  @media (orientation: portrait){
    .lightbox-wrapper{flex-direction:column;}
  }
  /* landscape tablets mimic desktop row */
}

/* 6) Lightbox footer controls */



/* 7) Gallery nav button capsule style */
.gallery-container .controls{
  display:flex;
  justify-content:center;
  margin-top:1rem;
}
.gallery-container .controls .nav-btn{
  width:88px;
  height:44px;
  border-radius:22px;
  background:rgba(255,255,255,0.25);
  border:1px solid rgba(255,255,255,0.4);
  backdrop-filter:blur(var(--blur));
  -webkit-backdrop-filter:blur(var(--blur));
  color:var(--brown-light);
  font-size:24px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Remove legacy circular button styles that cause misalignment */
.gallery-container .controls .nav-btn:not(:last-child){
  margin-right:1rem;
}

/* Patch v8 nav buttons alignment */
.lightbox-nav-container {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  align-items: center;
}
/* Ensure individual nav buttons share consistent height */
.lightbox-nav-container .nav-button {
  width: 44px;
  height: 44px;
}

/* Patch v9 - align nav buttons outside panel & fix panel sizing */
.lightbox-nav-container {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  z-index: 1002;
}
.lightbox-nav-container .nav-button {
  width: 88px;
  height: 44px;
  border-radius: 22px;
}

/* Force panel to fixed size, artwork fits inside */
.lightbox-panel {
  width: 90vw !important;
  max-width: 1200px;
  height: 90vh !important;
  max-height: 90vh;
  display: grid;
  place-items: center;
}

.lightbox-panel .media img,
.lightbox-panel .media video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Ensure description scroll but panel fixed */
.lightbox-panel .description {
  overflow-y: auto;
  max-height: 100%;
}

/* Patch v10 - robust centering and nav alignment */

@media (max-width: 768px) {
  /* ensure overlay uses flex to center panel */
  .lightbox-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* center panel in viewport */
.lightbox-panel {
  position: relative;
  display: grid;
  place-items: center;
  width: 90vw !important;
  max-width: 1200px;
  height: 90vh !important;
  max-height: 90vh;
  background: var(--panel-bg, rgba(30,30,30,0.85));
}

/* make media fit panel */
.lightbox-panel .media img,
.lightbox-panel .media video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* fixed nav buttons cluster */
.lightbox-nav-container {
  position: fixed !important;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 12px;
  z-index: 1003;
  pointer-events: auto;
}

/* even sizing */
.lightbox-nav-container .nav-button {
  flex: 0 0 88px;
  height: 44px;
  border-radius: 22px;
}



/* == Override Lightbox Mobile Centering and Footer Layout (v11) == */
.lightbox-overlay{
  position: fixed;
  top:0;
  left:0;
  width:100%;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10000;
}
.lightbox-wrapper{
  max-width:92vw;
  max-height:90vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  margin:auto;
}
@media(min-width:600px){
  .lightbox-wrapper{
    flex-direction:row;
    gap:2rem;
  }
}



/* ---- v13 quick fixes ---- */

/* Keep header fixed but avoid overlap */
body {  }

/* Lightbox hidden by default, shown only when active */
.lightbox-overlay { display: none; }
.lightbox-overlay.active { display: flex; }

/* Blur only when lightbox is active */
.lightbox-overlay.active::before {
  content: "";
  position: absolute;
  inset: 0;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Capsule back button styling & responsiveness */


/* Lift panel so its bottom edge clears the footer controls */
.lightbox-wrapper { margin-bottom: 6rem; }

/* Ensure footer itself ignores clicks except on controls */



/* Simple active feedback */


/* ---- v14 lightbox polish ---- */

/* Dim tint: warm dark brown with blur, fill full viewport */
.lightbox-overlay.active::before{
  background: rgba(55,35,25,0.6);      /* warm brown tint */
}

/* remove any unintended gap by letting overlay ignore body padding */
.lightbox-overlay{
  position: fixed;
  inset: 0;
  margin: 0;
}

/* Footer button bar align */


/* universal capsule style for back button for consistent centering */


/* ensure arrows share the same height */


/* ---- v15 final tweaks ---- */

/* Add top margin to Lightbox panel */
.lightbox-wrapper {
  margin-top: 2rem;
  /* preserves existing bottom margin */
}

/* Lighten the dim tint */
.lightbox-overlay.active::before {
  background: rgba(55,35,25,0.4);
}

/* Ensure footer bar and buttons align precisely */




/* === Lightbox footer realignment patch v16 === */





/* === end patch === */

/* === Lightbox footer alignment fix v18 === */





/* === end patch === */


/* ===== Integrated Lightbox Styles ===== */

/* Ensure overlay covers full viewport behind header */
.lightbox-overlay, .lightbox {
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 10000 !important;
}

/* Keep header above overlay */
.top-bar {
  position: relative !important;
  z-index: 10001 !important;
}

/* Lightbox container as positioning context */
.lightbox-wrapper {
  position: relative !important;
}

/* Position footer buttons outside bottom of panel */


/* Footer button styling preserved */


/* Arrow and back text specifics */



/* ===== end Integrated Lightbox Styles ===== */

/* ===== Integrated Lightbox Styles v27 ===== */

/* Overlay behind header */
.lightbox-overlay,
.lightbox {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.6) !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 9999 !important;
}
.lightbox-overlay.active,
.lightbox.open { display: flex !important; }

/* Header above overlay */
.top-bar { position: relative !important; z-index: 10000 !important; }

/* Wrapper positioning context & overflow visible */
.lightbox-wrapper {
  position: relative !important;
  overflow: visible !important;
}

/* Footer inside wrapper: below panel */


/* Buttons */




/* ===== end Integrated Lightbox Styles v27 ===== */

/* Glassmorphism buttons for lightbox controls */
.lightbox-overlay {
  position: fixed;
}
.lightbox-controls {
  display: flex;
  justify-content: center;
  gap: 1rem;
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1001;
}
.glass-button {
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 999px;
  padding: 0.75rem 1rem;
  font-size: 1.25rem;
  cursor: pointer;
  box-shadow: 0 4px 30px rgba(0,0,0,0.1);
  color: #fff;
}


/* Hide stray translation spans that are direct children of layout containers */
html > span.en, html > span.zh,
body > span.en, body > span.zh,
.grid > span.en, .grid > span.zh {
  display: none !important;
}