:root{
  /* “app UI” light greys like your reference */
  --page: #f2f2f2;
  --app: #e9e9e9;
  --bar: #efefef;
  --bar2: #ececec;
  --panel: #f6f6f4;

  --ink: #15171b;
  --muted: rgba(0,0,0,.55);

  --line: rgba(0,0,0,.18);
  --line2: rgba(0,0,0,.28);

  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;

  --menu-h: 64px;

  --maxw: 1200px;
  --pad: 18px;
}

*{ box-sizing: border-box; }
html, body { height: 100%; }

body{
  margin: 0;
  font-family: var(--sans);
  background: var(--page);
  color: var(--ink);
}

/* centers the app like the screenshot (no black border) */
.shell{
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: 26px 18px;
}

.app{
  width: min(var(--maxw), 100%);
  background: var(--app);
  border: 1px solid var(--line2);
  box-shadow: 0 16px 40px rgba(0,0,0,.12);
  position: relative;
}

/* ===== Menu bar (tabs) ===== */
.menubar{
  position: sticky;
  top: 0;
  z-index: 25;

  height: var(--menu-h);
  background: var(--bar2);
  border-bottom: 1px solid var(--line);

  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;

  padding: 0 16px;
  font-family: var(--mono);
}

.brand{
  justify-self: start;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  padding-right: 14px;
}

.logo-img{
  width: 56px;
  height: 56px;
  display: block;
  object-fit: contain;
  opacity: .95;
}

.tabs{
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 22px;
}

.tab{
  font-size: 15px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;

  padding: 12px 10px;
  border: 1px solid transparent;
  background: transparent;
}

.tab:hover{
  border-color: var(--line);
  background: rgba(255,255,255,.6);
}

.tab.active{
  border-color: var(--line2);
  background: rgba(255,255,255,.9);
  font-weight: 700;
}

/* ===== Content panel ===== */
.stage{
  padding: var(--pad);
  background: var(--app);
}

.panel{
  border: 2px solid rgba(0,0,0,.55);
  background: var(--panel);
  overflow: hidden; /* prevent any iframe scrollbars bleeding */
}

.frame{
  width: 100%;
  height: calc(100vh - (26px*2 + var(--menu-h) + var(--pad)*2 + 4px));
  border: 0;
  display: block;
  background: var(--panel);
}

/* ===== Responsive ===== */
@media (max-width: 820px){
  :root{ --pad: 14px; }

  .menubar{
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .tab{ white-space: nowrap; }
}

/* ===== Global Lightbox (parent page, overlays EVERYTHING) ===== */
.site-lightbox{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 999999;
  background: rgba(0,0,0,.86);
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.site-lightbox.open{ display:flex; }

.slb{
  width: min(1200px, 100%);
  height: min(88vh, 980px);
  border: 2px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.35);
  display:flex;
  flex-direction: column;
  overflow: hidden;
}

.slb-top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border-bottom: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.25);
}
.slb-title{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.82);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 55%;
}
.slb-actions{ display:flex; gap: 8px; }
.slb-btn{
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.30);
  color: rgba(255,255,255,.92);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 8px 10px;
  cursor:pointer;
}

/* Default lightbox view: NO scrollbars, full image always visible */
.slb-view{
  position: relative;
  flex: 1;
  padding: 10px;
  overflow: hidden;                 /* <- no scrollbars */
  display: flex;
  align-items: center;
  justify-content: center;
}

.slb-img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;              /* <- always fit */
  display: block;
}
/* ===== Global Lightbox (parent page, overlays EVERYTHING) ===== */
.site-lightbox{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 999999;
  background: rgba(0,0,0,.86);
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.site-lightbox.open{ display:flex; }

/* lightbox window */
.slb{
  position: relative; /* arrow anchor */
  width: min(1200px, 100%);
  height: min(88vh, 980px);
  border: 2px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.35);
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
}

/* top bar */
.slb-top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border-bottom: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.25);
}
.slb-title{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.82);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 55%;
}
.slb-actions{ display:flex; gap: 8px; }
.slb-btn{
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.30);
  color: rgba(255,255,255,.92);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 8px 10px;
  cursor:pointer;
}

/* viewer (default: no scroll, always fit) */
.slb-view{
  position: relative;
  overflow: hidden;                 /* no scrollbars by default */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}
.slb-img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display:block;
}

/* Max mode: allow scroll/pan for detail */
.site-lightbox.max .slb-view{
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  align-items: flex-start;
  justify-content: center;
}
.site-lightbox.max .slb-img{
  max-width: none;
  max-height: none;
}

/* bottom thumbnail strip (always visible) */
.slb-strip{
  border-top: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.25);
  padding: 10px;
  display:flex;
  gap: 10px;
  justify-content: center;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.slb-strip::before,
.slb-strip::after{
  content:"";
  flex: 0 0 10px;
}

.slb-thumb{
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.06);
  overflow:hidden;
  cursor:pointer;
  padding: 0;
}
.slb-thumb img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  opacity:.9;
}
.slb-thumb.active{
  border-color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.10);
}

/* arrows anchored to the LIGHTBOX WINDOW, not the scrolling view */
.slb-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.30);
  color: rgba(255,255,255,.92);
  font-family: var(--mono);
  font-size: 18px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  user-select:none;
}
.slb-prev{ left: 10px; }
.slb-next{ right: 10px; }

/* Max mode: true overlay max (still keeps strip visible) */
.site-lightbox.max .slb{
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 560px){
  .slb-nav{ width: 40px; height: 40px; }
  .slb-thumb{ width: 64px; height: 64px; }
  .slb-title{ max-width: 45%; }
}