/* ===== SETUP OVERLAY ===== */
.setup-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  visibility: hidden;
  pointer-events: none;
  clip-path: inset(var(--clip-top, 50%) var(--clip-right, 50%) var(--clip-bottom, 50%) var(--clip-left, 50%) round 16px);
  transition: clip-path 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.setup-overlay::after {
  content: '';
  position: absolute; z-index: -1; inset: 0;
  border-radius: inherit;
  backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px);
  filter: url(#setup-glass); -webkit-filter: url(#setup-glass);
  overflow: hidden; isolation: isolate;
}
.setup-overlay::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden; border-radius: inherit;
  box-shadow: inset 1px 1px 0px -1px rgba(255,255,255,0.5), inset 0 0 2px 0.5px rgba(255,255,255,0.4);
  background-color: rgb(200 200 210 / 12%);
}

.setup-overlay.expanding {
  visibility: visible;
  pointer-events: auto;
}
.setup-overlay.active {
  clip-path: inset(0 0 0 0 round 0px);
}

/* ===== PAGE CONTENT HIDE ===== */
.scroll-layout,
.topbar {
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.scroll-layout.setup-open {
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
}
.topbar.setup-open {
  opacity: 0;
  transform: translateX(-50%) scale(0.95);
  pointer-events: none;
}

/* ===== OVERLAY CONTENT ===== */
.setup-overlay-content {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: clamp(24px, 4vw, 48px);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', sans-serif;
}

/* ===== INNER GLASS CONTAINER ===== */
.setup-inner-container {
  position: relative;
  display: flex;
  flex-direction: column;
  width: clamp(340px, 80vw, 1000px);
  height: clamp(400px, 75vh, 700px);
  border-radius: clamp(16px, 2vw, 24px);
  border: 1px solid rgba(200, 200, 210, 0.35);
  overflow: hidden;
  padding: clamp(20px, 3vw, 36px);
}
.setup-inner-container::after {
  content: '';
  position: absolute; z-index: -1; inset: 0;
  border-radius: inherit;
  backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px);
  filter: url(#setup-glass); -webkit-filter: url(#setup-glass);
  overflow: hidden; isolation: isolate;
}
.setup-inner-container::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden; border-radius: inherit;
  box-shadow: inset 1px 1px 0px -1px rgba(255,255,255,0.5), inset 0 0 2px 0.5px rgba(255,255,255,0.4);
  background-color: rgb(200 200 210 / 10%);
}

/* ===== CLOSE BUTTON ===== */
.setup-close-btn {
  position: absolute;
  top: clamp(12px, 1.5vw, 20px);
  right: clamp(12px, 1.5vw, 20px);
  z-index: 10;
  width: clamp(36px, 4vw, 44px);
  height: clamp(36px, 4vw, 44px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(200, 200, 210, 0.3);
  background: rgba(200, 200, 210, 0.1);
  color: #636e72;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  font: inherit;
  padding: 0;
}
.setup-close-btn:hover {
  transform: scale(1.08);
  border-color: rgba(200, 200, 210, 0.5);
  background: rgba(200, 200, 210, 0.18);
}
.setup-close-btn svg {
  width: 18px;
  height: 18px;
  stroke: #636e72;
}

/* ===== TAB BUTTONS ===== */
.setup-tabs {
  display: flex;
  gap: clamp(10px, 1.4vw, 18px);
  justify-content: center;
  flex-wrap: wrap;
  padding-bottom: clamp(16px, 2.5vw, 32px);
  position: relative;
  z-index: 5;
}
.setup-tab-btn {
  position: relative;
  z-index: 0;
  padding: clamp(12px, 1.6vw, 18px) clamp(20px, 3vw, 32px);
  border-radius: 9999px;
  border: none;
  outline: none;
  background: transparent;
  color: #636e72;
  font-family: inherit;
  font-size: clamp(0.82rem, 1.15vw, 0.98rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.6) translateY(12px);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.25s ease;
}
/* Liquid glass refraction layer — same as topbar buttons */
.setup-tab-btn::after {
  content: '';
  position: absolute; z-index: -1; inset: 0;
  border-radius: 9999px;
  backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px);
  filter: url(#btn-glass); -webkit-filter: url(#btn-glass);
  overflow: hidden; isolation: isolate;
}
/* Inner glow layer */
.setup-tab-btn::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden; border-radius: 9999px;
  box-shadow:
    inset 2px 2px 0px -2px rgba(255, 255, 255, 0.7),
    inset 0 0 3px 1px rgba(255, 255, 255, 0.7),
    inset 0 0 0px rgba(220, 160, 255, 0);
  background-color: rgb(200 200 210 / 12%);
  transition: box-shadow 0.35s ease, background-color 0.35s ease;
}
.setup-tab-btn.popped-in {
  opacity: 1;
  transform: scale(1) translateY(0);
}

@keyframes setupTabPopIn {
  0%   { opacity: 0; transform: scale(0.6) translateY(12px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.setup-tab-btn:hover {
  transform: scale(1.04);
}
.setup-tab-btn:active {
  transform: scale(0.97);
  transition-duration: 0.08s;
}
.setup-tab-btn.active {
  color: #2d3436;
  font-weight: 600;
}
.setup-tab-btn.active::before {
  background-color: rgb(200 200 210 / 16%);
  box-shadow:
    inset 2px 2px 0px -2px rgba(255, 255, 255, 0.7),
    inset 0 0 3px 1px rgba(255, 255, 255, 0.7),
    inset 0 0 22px rgba(220, 160, 255, 0.4),
    inset 0 0 9px rgba(240, 200, 255, 0.3);
}
.setup-tab-btn.active:hover {
  transform: scale(1.04);
}

/* Tab button icons */
.setup-tab-icon {
  width: clamp(14px, 1.4vw, 17px);
  height: clamp(14px, 1.4vw, 17px);
  flex-shrink: 0;
  vertical-align: middle;
  position: relative;
  top: -1px;
  margin-right: 2px;
}
.setup-tab-icon.os-icon {
  margin-right: 4px;
}

/* ===== VIDEO CONTAINER ===== */
.setup-video-container {
  flex: 1;
  min-height: 0;
  border-radius: clamp(12px, 1.5vw, 20px);
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(200, 200, 210, 0.2);
  background: rgba(0, 0, 0, 0.03);
}
.setup-video-container video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ===== BUTTON RESET for link-card used as <button> ===== */
button.link-card {
  text-align: left;
  outline: none;
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {
  .setup-tabs {
    flex-direction: column;
    align-items: stretch;
  }
  .setup-tab-btn {
    text-align: center;
  }
  .setup-overlay-content {
    padding: clamp(12px, 2vw, 20px);
  }
  .setup-inner-container {
    width: 95vw;
    height: 85vh;
    padding: clamp(14px, 2vw, 20px);
    padding-top: clamp(40px, 6vw, 56px);
  }
  .setup-inner-container::after {
    filter: none; -webkit-filter: none;
    backdrop-filter: blur(14px) saturate(1.3);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
  }
}