/* =========================================================
 GHOSTBASE ALBUM ENGINE V4.2.0 — PREMIUM / PROFESSIONAL UI
 Centralizado: todos os álbuns usam o mesmo design
 ========================================================= */

:root{
  --gb42-bg:#05090c;
  --gb42-panel:#081216;
  --gb42-panel2:#0b171c;
  --gb42-line:#29424c;
  --gb42-line2:#385661;
  --gb42-text:#f7f9fa;
  --gb42-muted:#93a5ac;
  --gb42-orange:#ff6a00;
  --gb42-orange2:#ff992d;
  --gb42-green:#3ad181;
  --gb42-shadow:0 24px 65px rgba(0,0,0,.40);
}

.gb4-album{
  background:
    radial-gradient(circle at 12% -8%,rgba(255,106,0,.07),transparent 27%),
    linear-gradient(180deg,#071014 0%,#05090c 45%,#05090c 100%)!important;
  color:var(--gb42-text)!important;
  padding-bottom:128px!important;
}

.gb4-album .container{
  width:min(1380px,calc(100% - 44px))!important;
  margin-inline:auto!important;
}

/* HERO */
.gb4-hero{
  padding:34px 0 24px!important;
}

.gb4-back{
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  color:#8fa1a8!important;
  font:800 12px/1.2 Inter,Arial,sans-serif!important;
  text-decoration:none!important;
}

.gb4-kicker{
  display:inline-flex!important;
  align-items:center!important;
  gap:9px!important;
  margin-top:20px!important;
  color:var(--gb42-orange)!important;
  font:950 10px/1 Inter,Arial,sans-serif!important;
  letter-spacing:.15em!important;
  text-transform:uppercase!important;
}
.gb4-kicker:after{
  content:"";
  width:34px;height:1px;
  background:linear-gradient(90deg,var(--gb42-orange),transparent);
}

.gb4-hero h1{
  max-width:1240px!important;
  margin:10px 0 8px!important;
  color:#f8fafb!important;
  font-family:Inter,Arial,sans-serif!important;
  font-size:clamp(38px,4.8vw,68px)!important;
  line-height:.98!important;
  font-weight:950!important;
  letter-spacing:-.045em!important;
  text-wrap:balance!important;
}

/* FILTERS — menores e mais elegantes */
.gb4-filters{
  display:flex!important;
  gap:8px!important;
  margin-top:17px!important;
  flex-wrap:wrap!important;
}

.gb4-filters button{
  min-height:34px!important;
  padding:0 13px!important;
  border:1px solid #2b4650!important;
  border-radius:9px!important;
  background:linear-gradient(180deg,#0b171c,#081216)!important;
  color:#aebdc2!important;
  font-family:Inter,Arial,sans-serif!important;
  font-size:10px!important;
  font-weight:850!important;
  letter-spacing:.01em!important;
  cursor:pointer!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02)!important;
  transition:.18s ease!important;
}
.gb4-filters button:hover{
  border-color:#48646f!important;
  color:#fff!important;
}
.gb4-filters button.active{
  border-color:var(--gb42-orange)!important;
  background:linear-gradient(180deg,rgba(255,106,0,.10),rgba(255,106,0,.03)),#0a1519!important;
  color:#ff9b4f!important;
  box-shadow:0 0 0 1px rgba(255,106,0,.05)!important;
}

/* GRID */
.gb4-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:16px!important;
}

.gb4-card{
  position:relative!important;
  overflow:hidden!important;
  border:1px solid var(--gb42-line)!important;
  border-radius:15px!important;
  background:var(--gb42-panel)!important;
  box-shadow:0 12px 30px rgba(0,0,0,.17)!important;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease!important;
}
.gb4-card:hover{
  transform:translateY(-2px)!important;
  border-color:#3d5d68!important;
  box-shadow:0 20px 45px rgba(0,0,0,.28)!important;
}
.gb4-card:has(.gb4-select.selected){
  border-color:rgba(255,106,0,.85)!important;
  box-shadow:0 0 0 1px rgba(255,106,0,.12),0 20px 45px rgba(0,0,0,.25)!important;
}

.gb4-preview{
  position:relative!important;
  aspect-ratio:4/3!important;
  overflow:hidden!important;
  background:#071115!important;
  cursor:pointer!important;
}
.gb4-preview img,
.gb4-preview video{
  width:100%!important;height:100%!important;
  object-fit:cover!important;
  display:block!important;
  transition:transform .30s ease!important;
}
.gb4-card:hover .gb4-preview img{transform:scale(1.015)!important}

.gb4-preview:after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;height:29%;
  z-index:3;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.25));
}

/* WATERMARK */
.gb4-watermark{
  position:absolute!important;
  left:50%!important;top:50%!important;
  transform:translate(-50%,-50%) rotate(-12deg)!important;
  z-index:4!important;
  color:rgba(255,255,255,.67)!important;
  font:950 10px/1 Inter,Arial,sans-serif!important;
  letter-spacing:.09em!important;
  text-shadow:0 2px 7px rgba(0,0,0,.48)!important;
  pointer-events:none!important;
  white-space:nowrap!important;
}

/* VIDEO CARD */
.gb4-video{
  position:absolute!important;inset:0!important;
  display:grid!important;place-items:center!important;
  background:
    radial-gradient(circle,rgba(255,106,0,.06),transparent 33%),
    linear-gradient(180deg,#0b171c,#071115)!important;
  color:var(--gb42-orange)!important;
  font-size:44px!important;
}
.gb4-video:before{
  content:"";
  position:absolute;
  width:74px;height:74px;
  border:1px solid rgba(255,106,0,.17);
  border-radius:50%;
  box-shadow:0 0 0 12px rgba(255,106,0,.025);
}
.gb4-video small{
  position:absolute!important;
  left:14px!important;bottom:14px!important;z-index:5!important;
  color:#dbe3e6!important;
  font:900 8px/1 Inter,Arial,sans-serif!important;
  letter-spacing:.09em!important;
}

/* CARD ACTIONS — compactos */
.gb4-select,.gb4-action{
  position:absolute!important;
  top:11px!important;
  z-index:12!important;
  min-height:32px!important;
  padding:0 10px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  border-radius:8px!important;
  font-family:Inter,Arial,sans-serif!important;
  font-size:9px!important;
  line-height:1!important;
  font-weight:900!important;
  text-decoration:none!important;
  cursor:pointer!important;
  backdrop-filter:blur(9px)!important;
  box-shadow:0 8px 18px rgba(0,0,0,.25)!important;
  transition:.18s ease!important;
}
.gb4-select{
  left:11px!important;
  border:1px solid rgba(255,255,255,.16)!important;
  background:rgba(5,11,14,.92)!important;
  color:#fff!important;
}
.gb4-select i{
  width:15px!important;height:15px!important;
  display:grid!important;place-items:center!important;
  border:1px solid currentColor!important;
  border-radius:4px!important;
  font-style:normal!important;
  font-size:9px!important;
}
.gb4-select:hover{border-color:var(--gb42-orange)!important}
.gb4-select.selected{
  border-color:var(--gb42-orange)!important;
  background:linear-gradient(135deg,var(--gb42-orange),var(--gb42-orange2))!important;
  color:#111!important;
}
.gb4-action{right:11px!important}
.gb4-download{
  border:1px solid rgba(255,255,255,.15)!important;
  background:rgba(5,11,14,.92)!important;
  color:#fff!important;
}
.gb4-download:hover{border-color:var(--gb42-green)!important;color:#c6f4da!important}
.gb4-buy{
  border:1px solid var(--gb42-orange)!important;
  background:linear-gradient(135deg,var(--gb42-orange),var(--gb42-orange2))!important;
  color:#111!important;
}

.gb4-meta{
  min-height:54px!important;
  padding:11px 13px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:10px!important;
  align-items:center!important;
  border-top:1px solid rgba(255,255,255,.025)!important;
  background:#081216!important;
}
.gb4-meta strong{
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:#eef3f5!important;
  font:900 10px/1.2 Inter,Arial,sans-serif!important;
}
.gb4-meta span{
  color:var(--gb42-orange2)!important;
  font:950 8px/1 Inter,Arial,sans-serif!important;
}

/* BOTTOM BAR */
.gb4-bar{
  position:fixed!important;
  left:50%!important;bottom:18px!important;
  transform:translateX(-50%)!important;
  z-index:9990!important;
  width:min(980px,calc(100vw - 28px))!important;
  min-height:70px!important;
  padding:11px 13px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:16px!important;
  border:1px solid #35515c!important;
  border-radius:15px!important;
  background:rgba(7,17,21,.97)!important;
  backdrop-filter:blur(15px)!important;
  box-shadow:0 24px 65px rgba(0,0,0,.44)!important;
}
.gb4-bar small{
  display:block!important;
  margin-bottom:4px!important;
  color:var(--gb42-orange)!important;
  font:950 8px/1 Inter,Arial,sans-serif!important;
  letter-spacing:.14em!important;
}
.gb4-bar strong{
  font:850 12px/1.2 Inter,Arial,sans-serif!important;
  color:#f4f7f8!important;
}
.gb4-bar-actions{
  display:flex!important;gap:7px!important;flex-wrap:wrap!important;
}
.gb4-bar button,.gb4-bar a{
  min-height:38px!important;
  padding:0 13px!important;
  display:inline-flex!important;
  align-items:center!important;justify-content:center!important;
  border:1px solid #35515c!important;
  border-radius:9px!important;
  background:#0a171c!important;
  color:#fff!important;
  font:900 9px/1 Inter,Arial,sans-serif!important;
  text-decoration:none!important;
  cursor:pointer!important;
}
.gb4-bar .primary{
  border-color:var(--gb42-orange)!important;
  background:linear-gradient(135deg,var(--gb42-orange),var(--gb42-orange2))!important;
  color:#111!important;
}

/* =========================================================
   LIGHTBOX PREMIUM
   ========================================================= */

.gb4-lightbox{
  width:min(1380px,calc(100vw - 30px))!important;
  max-height:calc(100vh - 24px)!important;
  padding:0!important;
  overflow:hidden!important;
  border:1px solid #35515c!important;
  border-radius:18px!important;
  background:#061014!important;
  color:#fff!important;
  box-shadow:0 34px 90px rgba(0,0,0,.68)!important;
}
.gb4-lightbox::backdrop{
  background:rgba(0,0,0,.86)!important;
  backdrop-filter:blur(4px)!important;
}
.gb4-lightbox-shell{
  display:grid!important;
  grid-template-rows:auto minmax(0,1fr) auto!important;
  min-height:min(800px,calc(100vh - 42px))!important;
}
.gb4-lightbox-top{
  min-height:58px!important;
  padding:10px 14px 10px 18px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  border-bottom:1px solid #263f49!important;
  background:#081419!important;
}
.gb4-lightbox-title{
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
}
.gb4-lightbox-title strong{
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font:900 13px/1.2 Inter,Arial,sans-serif!important;
}
.gb4-lightbox-title span{
  color:#91a3aa!important;
  font:800 10px/1 Inter,Arial,sans-serif!important;
}
.gb4-lightbox-actions{
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
}
.gb4-lightbox-actions a,
.gb4-lightbox-actions button{
  min-height:34px!important;
  padding:0 11px!important;
  display:inline-flex!important;
  align-items:center!important;justify-content:center!important;
  gap:6px!important;
  border:1px solid #35515c!important;
  border-radius:8px!important;
  background:#091419!important;
  color:#fff!important;
  font:900 9px/1 Inter,Arial,sans-serif!important;
  text-decoration:none!important;
  cursor:pointer!important;
}
.gb4-lightbox-actions .buy{
  border-color:var(--gb42-orange)!important;
  background:linear-gradient(135deg,var(--gb42-orange),var(--gb42-orange2))!important;
  color:#111!important;
}

.gb4-close{
  position:static!important;
  width:36px!important;height:36px!important;
  flex:0 0 36px!important;
  display:grid!important;place-items:center!important;
  border:1px solid #48626d!important;
  border-radius:50%!important;
  background:#081318!important;
  color:#fff!important;
  font-size:20px!important;
  cursor:pointer!important;
}

/* corpo do modal */
.gb4-lightbox-main{
  position:relative!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 285px!important;
  min-height:0!important;
  overflow:hidden!important;
}
.gb4-stage{
  position:relative!important;
  min-width:0!important;
  min-height:0!important;
  display:grid!important;
  place-items:center!important;
  padding:18px 58px!important;
  background:
    radial-gradient(circle at center,rgba(255,255,255,.02),transparent 48%),
    #020607!important;
}
.gb4-stage img{
  max-width:100%!important;
  max-height:calc(100vh - 190px)!important;
  object-fit:contain!important;
  display:block!important;
  border-radius:5px!important;
  box-shadow:0 24px 70px rgba(0,0,0,.30)!important;
}
.gb4-stage .gb4-video{
  position:relative!important;
  width:100%!important;height:100%!important;
  min-height:500px!important;
}

/* setas */
.gb4-nav{
  position:absolute!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  z-index:15!important;
  width:42px!important;height:56px!important;
  display:grid!important;place-items:center!important;
  border:1px solid rgba(255,255,255,.18)!important;
  border-radius:11px!important;
  background:rgba(5,11,14,.86)!important;
  color:#fff!important;
  font-size:28px!important;
  cursor:pointer!important;
  backdrop-filter:blur(8px)!important;
  box-shadow:0 10px 26px rgba(0,0,0,.30)!important;
}
.gb4-nav:hover{
  border-color:var(--gb42-orange)!important;
  color:#ff9f57!important;
}
.gb4-prev{left:10px!important}
.gb4-next{right:10px!important}

.gb4-counter{
  position:absolute!important;
  left:50%!important;bottom:14px!important;
  transform:translateX(-50%)!important;
  z-index:15!important;
  min-height:28px!important;
  padding:0 10px!important;
  display:inline-flex!important;
  align-items:center!important;
  border:1px solid rgba(255,255,255,.13)!important;
  border-radius:999px!important;
  background:rgba(5,11,14,.83)!important;
  color:#fff!important;
  font:900 9px/1 Inter,Arial,sans-serif!important;
  backdrop-filter:blur(7px)!important;
}

/* lateral */
.gb4-side{
  min-width:0!important;
  padding:22px!important;
  border-left:1px solid #263f49!important;
  background:linear-gradient(180deg,rgba(255,255,255,.015),transparent),#081419!important;
}
.gb4-side .gb4-kicker{margin-top:0!important}
.gb4-side h2{
  margin:14px 0 8px!important;
  color:#f7f9fa!important;
  font:950 23px/1.1 Inter,Arial,sans-serif!important;
  word-break:break-word!important;
}
.gb4-side p{
  margin:0 0 18px!important;
  color:#93a5ac!important;
  font:600 13px/1.45 Inter,Arial,sans-serif!important;
}
.gb4-side-info{
  display:grid!important;
  gap:9px!important;
  margin-top:22px!important;
  padding-top:18px!important;
  border-top:1px solid #263f49!important;
}
.gb4-side-info div{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  color:#8ea0a7!important;
  font:750 9px/1.2 Inter,Arial,sans-serif!important;
}
.gb4-side-info b{color:#dce4e7!important;font-weight:900!important}

/* filmstrip */
.gb4-filmstrip{
  min-height:76px!important;
  padding:9px 14px!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  overflow-x:auto!important;
  border-top:1px solid #263f49!important;
  background:#071216!important;
  scrollbar-width:thin!important;
}
.gb4-filmstrip button{
  flex:0 0 82px!important;
  height:56px!important;
  padding:0!important;
  overflow:hidden!important;
  border:1px solid #2b4650!important;
  border-radius:8px!important;
  background:#071014!important;
  cursor:pointer!important;
  opacity:.72!important;
}
.gb4-filmstrip button.active{
  border-color:var(--gb42-orange)!important;
  opacity:1!important;
  box-shadow:0 0 0 1px rgba(255,106,0,.12)!important;
}
.gb4-filmstrip img{
  width:100%!important;height:100%!important;
  object-fit:cover!important;display:block!important;
}
.gb4-filmstrip .video-thumb{
  width:100%!important;height:100%!important;
  display:grid!important;place-items:center!important;
  color:var(--gb42-orange)!important;
  font-size:22px!important;
  background:#0a161b!important;
}

@media(max-width:1180px){
  .gb4-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:880px){
  .gb4-album .container{width:min(100% - 26px,1380px)!important}
  .gb4-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .gb4-lightbox-main{grid-template-columns:1fr!important}
  .gb4-side{display:none!important}
  .gb4-stage{padding:12px 48px!important}
}
@media(max-width:560px){
  .gb4-hero h1{font-size:clamp(33px,11vw,48px)!important}
  .gb4-grid{grid-template-columns:1fr!important}
  .gb4-bar{align-items:stretch!important;flex-direction:column!important}
  .gb4-bar-actions>*{flex:1 1 auto!important}
  .gb4-lightbox{width:calc(100vw - 10px)!important}
  .gb4-lightbox-actions .optional{display:none!important}
  .gb4-stage{padding:8px 42px!important}
  .gb4-nav{width:36px!important;height:48px!important}
}