/**
 * dopic.app [panorama-swipe] Mobile Stylesheet
 * Instagram Seamless Carousel Splitter - iOS Premium Design System
 */

/* =========================================================================
   1. TOP INSPIRATION PRESET TABS / SINGLE DEMO PILL
   ========================================================================= */
.demo-single-wrap {
  width: 100% !important;
  margin-bottom: 0.65rem !important;
}

.demo-single-pill {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0.55rem 0.85rem !important;
  background: linear-gradient(135deg, #ffffff 0%, #fdf4ff 100%) !important;
  border: 1.5px solid #f0abfc !important;
  border-radius: 14px !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(217, 70, 239, 0.08) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-sizing: border-box !important;
  text-align: left !important;
}

.demo-single-pill:active {
  transform: scale(0.98);
}

.demo-single-pill.active {
  background: linear-gradient(135deg, #fdf4ff 0%, #fae8ff 100%) !important;
  border-color: #d946ef !important;
  box-shadow: 0 3px 12px rgba(217, 70, 239, 0.18) !important;
}

.demo-single-left {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

.demo-single-icon {
  font-size: 1.15rem !important;
  flex-shrink: 0 !important;
}

.demo-single-text {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: #1e293b !important;
}

.demo-single-badge {
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  color: #c026d3 !important;
  background: #ffffff !important;
  padding: 3px 8px !important;
  border-radius: 8px !important;
  border: 1px solid #f5d0fe !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.demo-tabs-wrap {
  width: 100% !important;
  margin-bottom: 0.65rem !important;
}

.demo-tabs-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 0 0.2rem 0.35rem 0.2rem !important;
}

.demo-tabs-title {
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  color: #1e293b !important;
}

.demo-tabs-hint {
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  color: #c026d3 !important;
}

.demo-tabs-scroll {
  display: flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 2px 2px 6px 2px !important;
  scrollbar-width: none !important;
}
.demo-tabs-scroll::-webkit-scrollbar {
  display: none !important;
}

.demo-tab-pill {
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 0.42rem 0.8rem !important;
  background: #ffffff !important;
  border: 1px solid var(--border-light, #e2e8f0) !important;
  border-radius: 20px !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  color: #334155 !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04) !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  white-space: nowrap !important;
}

.demo-tab-pill:active {
  transform: scale(0.96);
}

.demo-tab-pill.active {
  background: #d946ef !important;
  border-color: #d946ef !important;
  color: #ffffff !important;
  box-shadow: 0 3px 10px rgba(217, 70, 239, 0.35) !important;
}

/* =========================================================================
   2. INSTAGRAM CAROUSEL SIMULATOR STAGE
   ========================================================================= */
.carousel-simulator-wrap {
  width: 100% !important;
  background: #ffffff !important;
  border: 1px solid var(--border-light, #e2e8f0) !important;
  border-radius: 18px !important;
  box-shadow: 0 6px 24px -4px rgba(15, 23, 42, 0.08) !important;
  padding: 0.75rem !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.65rem !important;
  margin-bottom: 0.75rem !important;
}

.carousel-stage-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 0 0.15rem !important;
  gap: 0.35rem !important;
  flex-wrap: nowrap !important;
}

.carousel-stage-left {
  display: flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  color: var(--text-dark, #0f172a) !important;
  white-space: nowrap !important;
  min-width: 0 !important;
  flex-shrink: 1 !important;
  overflow: hidden !important;
}

.carousel-stage-left span:first-child {
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
}

.carousel-stage-badge {
  font-size: 0.64rem !important;
  font-weight: 700 !important;
  color: #c026d3 !important;
  background: #fdf4ff !important;
  padding: 2px 5px !important;
  border-radius: 6px !important;
  border: 1px solid #f5d0fe !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.carousel-stage-counter {
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  color: #64748b !important;
  background: #f8fafc !important;
  padding: 2px 8px !important;
  border-radius: 12px !important;
  border: 1px solid #e2e8f0 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* View Toggle Switcher (Full Panorama vs Swipe Simulator) */
.view-toggle-pills {
  display: flex !important;
  align-items: center !important;
  background: #f1f5f9 !important;
  border-radius: 20px !important;
  padding: 2px !important;
  gap: 2px !important;
  flex-shrink: 0 !important;
}

.view-toggle-pill {
  border: none !important;
  background: transparent !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: #64748b !important;
  padding: 3px 8px !important;
  border-radius: 16px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
}

.view-toggle-pill.active {
  background: #ffffff !important;
  color: #c026d3 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
}

/* Full Panorama Viewport & Overlay Guides */
.pano-full-viewport {
  width: 100% !important;
  position: relative !important;
  background: #090d16 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 140px !important;
}

.pano-full-img {
  width: 100% !important;
  height: auto !important;
  max-height: 380px !important;
  display: block !important;
  object-fit: contain !important;
}

.pano-slice-guides {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
}

.pano-crop-box {
  position: absolute !important;
  display: flex !important;
  border: 2px solid #d946ef !important;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5) !important;
  box-sizing: border-box !important;
}

.pano-slice-guide-col {
  height: 100% !important;
  position: relative !important;
  border-right: 2px dashed rgba(255, 255, 255, 0.85) !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding-top: 6px !important;
}

.pano-slice-guide-col:last-child {
  border-right: none !important;
}

.guide-slice-num {
  background: rgba(217, 70, 239, 0.9) !important;
  color: #ffffff !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  padding: 1px 6px !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

.pano-full-hint {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.35rem 0.6rem !important;
  background: #fdf4ff !important;
  border: 1px dashed #f0abfc !important;
  border-radius: 10px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: #a21caf !important;
}

/* Seamless Carousel Viewport */
.carousel-viewport-box {
  width: 100% !important;
  position: relative !important;
  background: #090d16 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.35) !important;
  min-height: 160px !important;
}

.carousel-arrow-btn {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: rgba(15, 23, 42, 0.72) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 10 !important;
  transition: all 0.15s ease !important;
  padding: 0 !important;
  line-height: 1 !important;
  user-select: none !important;
}

.carousel-arrow-btn.prev {
  left: 8px !important;
}

.carousel-arrow-btn.next {
  right: 8px !important;
}

.carousel-arrow-btn:active {
  transform: translateY(-50%) scale(0.92) !important;
  background: rgba(217, 70, 239, 0.85) !important;
}

.carousel-arrow-btn:disabled,
.carousel-arrow-btn.disabled {
  opacity: 0.25 !important;
  pointer-events: none !important;
}

.carousel-track {
  display: flex !important;
  width: 100% !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  touch-action: pan-y !important;
  user-select: none !important;
  cursor: grab !important;
}
.carousel-track::-webkit-scrollbar {
  display: none !important;
}

.carousel-slide {
  flex: 0 0 100% !important;
  width: 100% !important;
  scroll-snap-align: start !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #000000 !important;
}

.carousel-slide-img {
  width: 100% !important;
  height: auto !important;
  max-height: 380px !important;
  display: block !important;
  object-fit: contain !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
  pointer-events: none !important;
}

.carousel-slide-badge {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  background: rgba(15, 23, 42, 0.78) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  color: #ffffff !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  padding: 3px 8px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  pointer-events: none !important;
}

/* Swipe Hint Bar */
.carousel-swipe-hint {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 0.35rem 0.6rem !important;
  background: #fdf4ff !important;
  border: 1px dashed #f0abfc !important;
  border-radius: 10px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: #a21caf !important;
}

/* Carousel Dots Indicator */
.carousel-dots-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 0.2rem 0 !important;
}

.carousel-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #cbd5e1 !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.carousel-dot.active {
  width: 18px !important;
  border-radius: 10px !important;
  background: #d946ef !important;
  box-shadow: 0 1px 4px rgba(217, 70, 239, 0.4) !important;
}

/* Canvas Action Bar */
.pano-action-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.5rem !important;
  padding-top: 0.2rem !important;
}

.btn-pano-upload {
  flex: 1 !important;
  min-height: 38px !important;
  background: #fdf4ff !important;
  border: 1.5px solid #f0abfc !important;
  border-radius: 10px !important;
  color: #a21caf !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.btn-pano-upload:active {
  background: #fae8ff !important;
  transform: scale(0.97);
}

.btn-pano-camera {
  min-height: 38px !important;
  padding: 0 0.85rem !important;
  background: #f8fafc !important;
  border: 1.5px solid var(--border-light, #e2e8f0) !important;
  border-radius: 10px !important;
  color: #475569 !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.btn-pano-camera:active {
  background: #f1f5f9 !important;
  transform: scale(0.97);
}

.btn-pano-cycle {
  min-height: 38px !important;
  padding: 0 0.75rem !important;
  background: #f8fafc !important;
  border: 1.5px solid var(--border-light, #e2e8f0) !important;
  border-radius: 10px !important;
  color: #475569 !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.btn-pano-cycle:active {
  background: #f1f5f9 !important;
  transform: scale(0.97);
}

/* =========================================================================
   3. HIGH-DENSITY CONTROL CARD
   ========================================================================= */
.config-card {
  width: 100% !important;
  background: #ffffff !important;
  border: 1px solid var(--border-light, #e2e8f0) !important;
  border-radius: 18px !important;
  padding: 0.85rem !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
  box-sizing: border-box !important;
  margin-bottom: 0.75rem !important;
}

.config-card-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  border-bottom: 1px solid #f1f5f9 !important;
  padding-bottom: 0.45rem !important;
}

.config-card-title {
  font-size: 0.86rem !important;
  font-weight: 800 !important;
  color: var(--text-dark, #0f172a) !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.config-badge {
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  color: #c026d3 !important;
  background: #fdf4ff !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
  border: 1px solid #f5d0fe !important;
}

.form-group-compact {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.35rem !important;
}

.form-label {
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  color: #334155 !important;
}

/* Slice Count 4-Pill Segmented Grid */
.slice-count-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0.35rem !important;
}

.slice-count-pill {
  padding: 0.45rem 0.2rem !important;
  background: #f8fafc !important;
  border: 1.5px solid var(--border-light, #e2e8f0) !important;
  border-radius: 10px !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  color: #475569 !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
}

.slice-count-pill:active {
  transform: scale(0.96);
}

.slice-count-pill.active {
  background: #fdf4ff !important;
  border-color: #d946ef !important;
  color: #c026d3 !important;
  box-shadow: 0 2px 6px rgba(217, 70, 239, 0.2) !important;
}

/* Aspect Ratio 3-Pill Segmented Grid */
.aspect-mode-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0.35rem !important;
}

.aspect-btn {
  padding: 0.42rem 0.25rem !important;
  background: #f8fafc !important;
  border: 1.5px solid var(--border-light, #e2e8f0) !important;
  border-radius: 10px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: #475569 !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
}

.aspect-btn:active {
  transform: scale(0.96);
}

.aspect-btn.active {
  background: #fdf4ff !important;
  border-color: #d946ef !important;
  color: #c026d3 !important;
  box-shadow: 0 2px 6px rgba(217, 70, 239, 0.2) !important;
}

/* =========================================================================
   4. SLICE CARDS BREAKDOWN GALLERY (FULL COMPLETE SLICES)
   ========================================================================= */
.slices-list-wrap {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.65rem !important;
}

.slices-list-scroll {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 0.65rem !important;
  width: 100% !important;
  padding: 4px 0 !important;
}

/* Small Sliced Part Card (小图分割的部分) */
.slice-item-card.slice-card-full {
  width: 100% !important;
  flex: none !important;
  background: #ffffff !important;
  border: 1.5px solid var(--border-light, #e2e8f0) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05) !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
}

.slice-card-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 0.35rem 0.5rem !important;
  background: #f8fafc !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

.slice-seq-badge-full {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
}

.slice-seq-badge-full .seq-num {
  background: linear-gradient(135deg, #d946ef, #c026d3) !important;
  color: #ffffff !important;
  font-size: 0.66rem !important;
  font-weight: 800 !important;
  padding: 1px 5px !important;
  border-radius: 4px !important;
}

.slice-dim-badge {
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  color: #64748b !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  padding: 1px 4px !important;
  border-radius: 4px !important;
}

/* Small Sliced Image */
.slice-full-img-box {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  max-height: 180px !important;
  background: #090d16 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: hidden !important;
}

.slice-full-img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: contain !important;
}

.slice-card-actions {
  padding: 0.45rem 0.5rem !important;
  background: #ffffff !important;
  border-top: 1px solid #f1f5f9 !important;
}

.btn-slice-dl {
  width: 100% !important;
  min-height: 34px !important;
  padding: 0.35rem 0.5rem !important;
  background: #fdf4ff !important;
  border: 1.5px solid #f5d0fe !important;
  border-radius: 8px !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  color: #c026d3 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.btn-slice-dl:active {
  background: #d946ef !important;
  color: #ffffff !important;
  border-color: #d946ef !important;
  transform: scale(0.97);
}

/* =========================================================================
   5. PRIMARY BATCH DOWNLOAD BUTTON
   ========================================================================= */
.btn-download-primary {
  width: 100% !important;
  min-height: 48px !important;
  background: linear-gradient(135deg, #d946ef 0%, #a21caf 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 14px !important;
  font-size: 0.9rem !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: 0 4px 16px rgba(217, 70, 239, 0.38) !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-sizing: border-box !important;
}

.btn-download-primary:active {
  transform: scale(0.97);
  box-shadow: 0 2px 8px rgba(217, 70, 239, 0.25) !important;
}