/* ========== MochiCam Styles ========== */

/* Display font for titles and headers */
@font-face {
  font-family: 'Starborn';
  src: url('../assets/fonts/Starborn.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Label font for grid and background selection (3x1, 2x2, 4x1, pink, red, star, etc.) */
@font-face {
  font-family: 'Baby Doll';
  src: url('../assets/fonts/BabyDoll.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Global CSS Variables */
:root {
  --app-bg-color: #FFFAF5; /* Off-white default */
  --text-vibe: #333;
  --text-vibe-muted: #666;
  --border-vibe: rgba(139, 0, 0, 0.3);
  --font-display: 'Starborn', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-labels: 'Baby Doll', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Titles and headers use display font */
.home-title,
.selection-title,
.reveal-title,
.auth-title,
.auth-subtitle,
.verification-header h3,
.delete-account-title,
.delete-success-title,
.delete-success-subtitle,
.upload-progress-title,
.delete-confirm-title,
.capacity-modal-title,
.gallery-title,
.strip-modal-name,
.overlay-title {
  font-family: var(--font-display);
}

/* Grid and background selection labels (3x1, 2x2, 4x1, pink, red, star, solid color, fun, etc.) */
.grid-label,
.background-label {
  font-family: var(--font-labels);
}

/* Dark mode overrides for light text on dark backgrounds */
body.dark-mode {
  --text-vibe: #FAF9F6;
  --text-vibe-muted: #E0E0E0;
  --border-vibe: rgba(255, 255, 255, 0.4);
}

* {
  box-sizing: border-box;
}

/* Remove gray tap-highlight / selection rectangle on click (iOS and Android) */
* {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
button,
a,
[role="button"],
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}
/* Remove default focus ring on tap (gray rectangle); show ring for keyboard focus */
button:focus,
a:focus,
[role="button"]:focus,
.edit-action-btn:focus,
.grid-option:focus,
.background-option:focus {
  outline: none;
}
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--accent-color, #8B0000);
  outline-offset: 2px;
}

body {
  margin: 0;
  padding: 0;
  padding-top: env(safe-area-inset-top, 0);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  background: var(--app-bg-color) !important;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  overflow: hidden;
}

/* ========== Mobile Screen Container ========== */
.mobile-screen {
  width: 100vw;
  height: 100vh;
  background: var(--app-bg-color) !important;
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 40px 30px;
  padding-top: calc(40px + env(safe-area-inset-top, 0));
  padding-left: calc(30px + env(safe-area-inset-left, 0));
  padding-right: calc(30px + env(safe-area-inset-right, 0));
  padding-bottom: calc(30px + env(safe-area-inset-bottom, 0));
}

/* ========== Selection Screens ========== */
.selection-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  justify-content: flex-start;
}

/* Grid selection: center title + 3 options in the entire viewport (true middle of phone) */
#grid-selection .selection-screen {
  position: fixed;
  inset: 0;
  z-index: 0;
  padding: 20px;
  gap: 12px;
  justify-content: center;
  align-items: center;
  flex: none;
  max-width: 100vw;
  box-sizing: border-box;
}

#grid-selection .selection-screen .grid-options {
  flex: none;
}

#grid-selection .selection-title {
  margin-bottom: 8px;
}

.selection-title {
  width: 100%;
  font-size: clamp(16px, 4vw, 20px);
  font-weight: 600;
  color: var(--text-vibe);
  text-align: center;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

/* ========== Grid Options Container (select your grid) — keep compact, no overlap ========== */
.grid-options {
  display: flex;
  flex-direction: row;
  gap: clamp(16px, 4vw, 32px);
  align-items: center;
  justify-content: center;
  flex: 1;
  flex-wrap: nowrap;
  padding: 0 20px;
  width: 100%;
  max-width: 100%;
}

.option-row {
  display: contents;
}

/* ========== Grid Option Cards ========== */
.grid-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: center;
  font-weight: 500;
  color: #333;
  padding: 0;
  flex-shrink: 1;
  min-width: 0;
}

.grid-option:hover {
  transform: translateY(-4px) scale(1.03);
}

.grid-option:hover .grid-preview {
  box-shadow: none;
}

.grid-option.selected .grid-preview {
  transform: scale(1.05);
}

body.dark-mode .grid-option.selected .grid-preview {
  transform: scale(1.05);
}

.grid-label {
  margin-top: clamp(18px, 5vw, 32px);
  font-size: clamp(11px, 3vw, 14px);
  color: var(--text-vibe);
}

/* 3x1 preview is shorter; add a bit more so label spacing feels consistent */
.grid-option[data-grid="3x1"] .grid-label {
  margin-top: clamp(22px, 5.5vw, 36px);
}

/* ========== Grid Preview - The Strip Frame (dusty pink, sharp corners) ========== */
.grid-preview {
  background: #D2B7B2;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 0.3s;
  border-radius: 0;
}

/* 3x1 Strip Preview — use Pink.png from Solid color (sized so 3 options don't overlap on select-grid page) */
.grid-preview.slot-3x1 {
  width: clamp(68px, 18vw, 100px);
  flex-shrink: 1;
  background-color: transparent;
  background-image: url('../assets/backgrounds/3x1/Solid%20color/Pink.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.grid-preview.slot-3x1 .preview-slot {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: transparent;
}

.grid-preview.slot-3x1 .branding-area {
  width: 100%;
  height: clamp(15px, 4vw, 30px);
  background: transparent;
}

/* 4x1 Strip Preview — use Pink.png from Solid color (sized so 3 options don't overlap on select-grid page) */
.grid-preview.slot-4x1 {
  width: clamp(68px, 18vw, 100px);
  flex-shrink: 1;
  background-color: transparent;
  background-image: url('../assets/backgrounds/4x1/Solid%20color/Pink.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.grid-preview.slot-4x1 .preview-slot {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: transparent;
}

.grid-preview.slot-4x1 .branding-area {
  width: 100%;
  height: clamp(15px, 4vw, 30px);
  background: transparent;
}

/* 2x2 Grid Preview — use Pink.png from Solid color (sized so 3 options don't overlap on select-grid page) */
.grid-preview.slot-2x2 {
  width: clamp(72px, 20vw, 110px);
  aspect-ratio: 2000 / 3200; /* 5:8 strip */
  padding-top: calc(3.2% + clamp(12px, 4vw, 25px));
  padding-right: 5%;
  padding-bottom: 27%;
  padding-left: 5%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: minmax(min-content, 1fr) minmax(min-content, 1fr) auto;
  column-gap: 5%;
  row-gap: 3.2%;
  box-sizing: border-box;
  flex-shrink: 1;
  background-color: transparent;
  background-image: url('../assets/backgrounds/2x2/Solid%20color/Pink.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.grid-preview.slot-2x2 .preview-slot {
  width: 100%;
  min-height: 0;
  aspect-ratio: 850 / 1000;
  background: transparent;
}

.grid-preview.slot-2x2 .branding-area {
  grid-column: 1 / -1;
  height: clamp(12px, 4vw, 25px);
  background: transparent;
}

/* ========== Back Button - Fixed Position ========== */
.back-btn {
  position: fixed;
  bottom: calc(20px + env(safe-area-inset-bottom, 0));
  left: calc(20px + env(safe-area-inset-left, 0));
  padding: 10px 16px;
  background: transparent;
  border: none;
  font-size: 24px;
  color: var(--text-vibe);
  cursor: pointer;
  transition: all 0.3s;
  z-index: 1000;
}

.back-btn:hover {
  transform: translateX(-3px);
}

/* ========== Background Selection Container ========== */
#background-selection .selection-screen {
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  padding: 20px;
  padding-top: 12px;
  padding-bottom: 100px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  overflow: hidden;
  align-items: center;
}

/* When showing solid color vs fun only: center that block in the entire viewport */
#background-selection .selection-screen:has(.background-options.category-view) {
  position: fixed;
  inset: 0;
  z-index: 0;
  height: auto;
  padding: 20px;
  padding-bottom: 100px;
  justify-content: center;
  overflow: visible;
}

#background-selection .selection-screen:has(.background-options.category-view) .background-options.category-view {
  flex: none;
}

#background-selection .background-options {
  width: 100%;
  max-width: 100%;
}

#background-selection .selection-title {
  text-align: center;
  margin-bottom: 8px;
  position: relative;
  z-index: 10;
}

/* Background Options - 3 per row (2 per row for 2x2 grid to avoid horizontal scroll) */
.background-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 16px 16px 32px 16px;
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 70vh;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  justify-items: center;
  align-items: start;
  align-content: start;
  justify-content: center;
  scrollbar-width: none;
  -ms-overflow-style: none;
  box-sizing: border-box;
}

/* 2x2 grid: only 2 options per row so they stay in bounds, vertical scroll only */
.background-options.grid-2x2 {
  grid-template-columns: repeat(2, 1fr);
}

/* Category picker (solid color / fun): center the two options horizontally */
.background-options.category-view {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
  align-content: center;
}

.background-options.category-view .background-option {
  width: clamp(100px, 28vw, 140px);
}

.background-options::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.background-options::-webkit-scrollbar-track {
  background: transparent;
}

.background-options::-webkit-scrollbar-thumb {
  background: transparent;
}

body.dark-mode .background-options::-webkit-scrollbar-thumb {
  background: transparent;
}

/* Fill grid cell so 3 per row stay in bounds (no horizontal scroll); cell is 1fr so already sized */
.background-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: center;
  font-weight: 500;
  color: #333;
  padding: 0;
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Custom preview - stable positioning, clean flat look */
.background-option.custom-preview {
  opacity: 1;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.background-option.custom-preview .background-preview {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.background-option.custom-preview.selected .background-preview {
  outline: none !important;
  box-shadow: none !important;
}

.background-option.custom-preview.entering {
  opacity: 0;
  transform: scale(0.9);
}

.background-option:hover {
  transform: translateY(-3px) scale(1.02);
}

.background-option:hover .background-preview {
  box-shadow: none;
}

.background-option.selected .background-preview {
  transform: scale(1.02);
  box-shadow: none;
}

body.dark-mode .background-option.selected .background-preview {
  transform: scale(1.02);
  box-shadow: none;
}

.background-label {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-vibe);
  font-weight: 500;
}

/* ========== Custom Color Picker Button ========== */
.custom-color-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: transform 0.2s ease;
  flex-shrink: 0;
  width: clamp(90px, 22vw, 120px);
}

.custom-color-btn:hover {
  transform: translateY(-3px) scale(1.02);
}

.custom-color-btn:active {
  transform: scale(0.98);
}

.custom-color-circle {
  width: clamp(70px, 18vw, 100px);
  height: clamp(70px, 18vw, 100px);
  border-radius: 50%;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.custom-color-circle:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.custom-color-circle svg {
  width: 36px;
  height: 36px;
  stroke: #8B0000;
  stroke-width: 3;
  fill: none;
  transition: stroke 0.3s ease;
}

/* Plus button stays styled like settings icon - no color changes */
.custom-color-btn.selected .custom-color-circle {
  transform: scale(1.05);
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);
}

body.dark-mode .custom-color-circle {
  background: rgba(255, 255, 255, 0.9);
}

/* ========== Dynamic Background Preview - Base Styles ========== */
.background-preview {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: all 0.3s;
  width: 100%;
}

.background-preview.cherry-red {
  background: #8B0000;
}

.background-preview.coquette {
  background: #FFFFFF;
  box-shadow: none;
}

.background-preview[class*="feeling-blue"] {
  background: #ADD8E6;
}

.background-preview.lucky-green {
  background: #90EE90;
}

/* ========== Background Preview - Accurate Aspect Ratios ========== */

/* 3x1 background preview with images */
/* Strip: 1200w x 3200h = ratio 0.375 */
.background-preview.grid-3x1 {
  display: block;
  width: 60px;
  height: 160px;
  box-sizing: border-box;
  margin: 0 auto;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border-radius: 0;
  overflow: hidden;
  image-rendering: crisp-edges;
}

/* Hide slots and branding for 3x1 image backgrounds */
.background-preview.grid-3x1 .preview-slot {
  display: none;
}

.background-preview.grid-3x1 .branding-area {
  display: none;
}

/* 4x1 background preview with images */
/* Strip: 1200w x 3200h = ratio 0.375 (same as 3x1) */
.background-preview.grid-4x1 {
  display: block;
  width: 60px;
  height: 160px;
  box-sizing: border-box;
  margin: 0 auto;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border-radius: 0;
  overflow: hidden;
  image-rendering: crisp-edges;
}

/* Hide slots and branding for 4x1 image backgrounds */
.background-preview.grid-4x1 .preview-slot {
  display: none;
}

.background-preview.grid-4x1 .branding-area {
  display: none;
}

/* 2x2 background preview with images */
/* Strip: 2000w x 3200h = ratio 0.625 */
.background-preview.grid-2x2 {
  display: block;
  width: 100px;
  height: 160px;
  box-sizing: border-box;
  margin: 0 auto;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border-radius: 0;
  overflow: hidden;
  image-rendering: crisp-edges;
}

/* Hide slots and branding for 2x2 image backgrounds */
.background-preview.grid-2x2 .preview-slot {
  display: none;
}

.background-preview.grid-2x2 .branding-area {
  display: none;
}

/* ========== Camera Screen ========== */
#camera-screen {
  width: 100vw;
  height: 100vh;
  background: var(--app-bg-color) !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 60px 15px 80px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Shown when camera access fails */
.camera-error {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px 80px;
  text-align: center;
  background: var(--app-bg-color);
  z-index: 5;
}
.camera-error.hidden {
  display: none;
}
.camera-error-message {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--text-color, #333);
  max-width: 320px;
}
.camera-error-hint {
  margin: 0 0 1.25rem;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--text-color, #666);
  max-width: 320px;
}
.camera-error-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
}
.camera-error-actions .btn {
  min-width: 160px;
}

#mochi-booth {
  position: relative;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* Container for 2x2 grid - let aspect ratio control sizing */
#mochi-booth.grid-2x2-active {
  width: 100%;
}

/* Strip backgrounds must never be reflected; only preview/captures are mirrored */
.photo-strip-container {
  overflow: hidden;
  width: 100%;
  transform: none;
}

/* Design overlay that sits ABOVE captures (for transparent-window designs) */
.strip-design-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: 100% 100% !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  pointer-events: none;
  z-index: 10;
}

/* 3x1 container - exact blueprint proportions: 1200:3200 = 3:8, scaled 0.25x */
.photo-strip-container.grid-3x1 {
  position: relative !important;
  display: block !important;
  width: 180px !important;
  height: 480px !important;
  max-width: 180px !important;
  max-height: 480px !important;
  min-width: 180px !important;
  min-height: 480px !important;
  margin: auto !important;
  padding: 0 !important;
  background-size: 100% 100% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

@media (max-width: 768px) {
  .photo-strip-container.grid-3x1,
  .photo-strip-container.grid-4x1 {
    width: 144px !important;
    height: 384px !important;
    max-width: 144px !important;
    max-height: 384px !important;
    min-width: 144px !important;
    min-height: 384px !important;
  }
}

@media (max-height: 700px) {
  .photo-strip-container.grid-3x1,
  .photo-strip-container.grid-4x1 {
    width: 144px !important;
    height: 384px !important;
    max-width: 144px !important;
    max-height: 384px !important;
    min-width: 144px !important;
    min-height: 384px !important;
  }
}

.photo-strip-container.grid-4x1 {
  position: relative !important;
  display: block !important;
  width: 180px !important;
  height: 480px !important;
  max-width: 180px !important;
  max-height: 480px !important;
  min-width: 180px !important;
  min-height: 480px !important;
  margin: auto !important;
  padding: 0 !important;
  background-size: 100% 100% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* 2x2 container - exact blueprint proportions: 2000:3200 = 5:8 */
.photo-strip-container.grid-2x2 {
  position: relative !important;
  display: block !important;
  width: 270px !important;
  height: 432px !important;
  max-width: 270px !important;
  max-height: 432px !important;
  min-width: 270px !important;
  min-height: 432px !important;
  margin: auto !important;
  padding: 0 !important;
  background-size: 100% 100% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

@media (max-width: 768px) {
  .photo-strip-container.grid-2x2 {
    width: 216px !important;
    height: 346px !important;
    max-width: 216px !important;
    max-height: 346px !important;
    min-width: 216px !important;
    min-height: 346px !important;
  }
}

@media (max-height: 700px) {
  .photo-strip-container.grid-2x2 {
    width: 216px !important;
    height: 346px !important;
    max-width: 216px !important;
    max-height: 346px !important;
    min-width: 216px !important;
    min-height: 346px !important;
  }
}

.photo-slot {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: white;
  box-sizing: border-box;
  overflow: hidden;
  margin: 0;
  flex-shrink: 1;
  min-height: 0;
}

/* Strip backgrounds and static img element: never reflect (static content is mirrored at capture time) */
.photo-slot img,
.photo-slot canvas,
.reveal-strip,
#static-strip-review,
#static-strip-edit {
  transform: none;
}

/* Ensure each slot acts as a strict boundary for the absolute children */
.photo-strip-container.grid-2x2 .photo-slot {
  position: absolute !important;
  width: 42.5% !important;
  height: 31.25% !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  background: rgba(255, 255, 255, 0.95) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  box-sizing: border-box !important;
  z-index: 1 !important;
}

/* Black fill for photo slots when white background is selected */
.photo-strip-container.grid-2x2[data-background*="white"] .photo-slot {
  background: black !important;
}

/* Position each slot based on blueprint coordinates:
   Blueprint: 2000x3200 canvas
   Photo 1: (100, 550) = (5%, 17.1875%)
   Photo 2: (1050, 550) = (52.5%, 17.1875%)
   Photo 3: (100, 1650) = (5%, 51.5625%)
   Photo 4: (1050, 1650) = (52.5%, 51.5625%)
*/
.photo-strip-container.grid-2x2 .photo-slot:nth-child(1) {
  left: 5% !important;
  top: 17.1875% !important;
}

.photo-strip-container.grid-2x2 .photo-slot:nth-child(2) {
  left: 52.5% !important;
  top: 17.1875% !important;
}

.photo-strip-container.grid-2x2 .photo-slot:nth-child(3) {
  left: 5% !important;
  top: 51.5625% !important;
}

.photo-strip-container.grid-2x2 .photo-slot:nth-child(4) {
  left: 52.5% !important;
  top: 51.5625% !important;
}

/* 3x1 photo slots with absolute positioning
   Blueprint: 1200x3200 canvas, scaling by 0.25x (300/1200)
   Photo 1: (100, 100) → (25px, 25px)
   Photo 2: (100, 950) → (25px, 237.5px)
   Photo 3: (100, 1800) → (25px, 450px)
   Photo size: 1000x750 → (250px, 187.5px)
*/
.photo-strip-container.grid-3x1 .photo-slot {
  position: absolute !important;
  width: 83.33% !important; /* 1000/1200 */
  height: 23.4375% !important; /* 750/3200 */
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  background: white !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  box-sizing: border-box !important;
  z-index: 1 !important;
}

/* Black fill for photo slots when white background is selected */
.photo-strip-container.grid-3x1[data-background*="white"] .photo-slot {
  background: black !important;
}

.photo-strip-container.grid-3x1 .photo-slot:nth-child(1) {
  left: 8.33% !important; /* 100/1200 */
  top: 3.125% !important; /* 100/3200 */
}

.photo-strip-container.grid-3x1 .photo-slot:nth-child(2) {
  left: 8.33% !important;
  top: 29.6875% !important; /* 950/3200 */
}

.photo-strip-container.grid-3x1 .photo-slot:nth-child(3) {
  left: 8.33% !important;
  top: 56.25% !important; /* 1800/3200 */
}

/* Ensure video and images fill 3x1 slots properly */
.photo-strip-container.grid-3x1 .photo-slot video,
.photo-strip-container.grid-3x1 .photo-slot img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* 4x1 photo slots - Blueprint: 1200x3200, Photos: 1000x600, Positions: (100,100), (100,800), (100,1500), (100,2200) */
.photo-strip-container.grid-4x1 .photo-slot {
  position: absolute !important;
  width: 83.33% !important; /* 1000/1200 */
  height: 18.75% !important; /* 600/3200 */
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  background: white !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  box-sizing: border-box !important;
  z-index: 1 !important;
}

/* Black fill for photo slots when white background is selected */
.photo-strip-container.grid-4x1[data-background*="white"] .photo-slot {
  background: black !important;
}

.photo-strip-container.grid-4x1 .photo-slot:nth-child(1) {
  left: 8.33% !important; /* 100/1200 */
  top: 3.125% !important; /* 100/3200 */
}

.photo-strip-container.grid-4x1 .photo-slot:nth-child(2) {
  left: 8.33% !important;
  top: 25% !important; /* 800/3200 */
}

.photo-strip-container.grid-4x1 .photo-slot:nth-child(3) {
  left: 8.33% !important;
  top: 46.875% !important; /* 1500/3200 */
}

.photo-strip-container.grid-4x1 .photo-slot:nth-child(4) {
  left: 8.33% !important;
  top: 68.75% !important; /* 2200/3200 */
}

/* Ensure video and images fill 4x1 slots properly */
.photo-strip-container.grid-4x1 .photo-slot video,
.photo-strip-container.grid-4x1 .photo-slot img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Fix the video/img to never bleed out of the slot */
.photo-slot video,
.photo-slot img.captured-photo,
.photo-slot .breather-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  box-sizing: border-box !important;
  z-index: 1;
}

#preview {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  background: #000;
}

.timer-display {
  position: fixed;
  top: 50%;
  left: calc(50% - 280px);
  transform: translateY(-50%);
  width: clamp(60px, 12vw, 100px);
  height: clamp(60px, 12vw, 100px);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  border: 4px solid var(--text-vibe);
  display: none;
  align-items: center;
  justify-content: center;
  font-size: clamp(28px, 6vw, 48px);
  font-weight: bold;
  color: var(--text-vibe);
  z-index: 1000;
  pointer-events: none;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

body.dark-mode .timer-display {
  background: rgba(0, 0, 0, 0.4);
}

/* On smaller screens, position timer above the strip */
@media (max-width: 600px) {
  .timer-display {
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
  }
}

#start-btn {
  width: 100%;
  padding: 16px;
  background: transparent;
  border: none;
  font-size: 18px;
  font-weight: 600;
  color: #333;
  cursor: pointer;
  transition: all 0.3s;
  flex-shrink: 0;
  text-align: center;
  margin-top: 16px;
}

#start-btn:hover:not(:disabled) {
  opacity: 0.7;
}

#start-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

#camera-screen .back-btn {
  position: fixed;
  bottom: calc(20px + env(safe-area-inset-bottom, 0));
  left: calc(20px + env(safe-area-inset-left, 0));
  z-index: 1000;
}

#smile-text {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-vibe);
  text-align: center;
  letter-spacing: 0.5px;
  margin-top: 20px;
  margin-bottom: 12px;
}

#pose-text {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-vibe);
  text-align: center;
  letter-spacing: 0.5px;
  margin-top: 12px;
  padding: 12px 40px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.9);
  border: 4px solid #D2B7B2;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

body.dark-mode #pose-text {
  background: rgba(0, 0, 0, 0.4);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

body.dark-mode #pose-text:hover {
  background: rgba(0, 0, 0, 0.6);
}

#pose-text:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: scale(1.05);
}

#pose-text.capturing {
  opacity: 0.5;
  pointer-events: none;
}

.breather-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 10;
  overflow: hidden !important;
}

.breather-overlay img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.hidden {
  display: none !important;
}

/* ========== HOME SCREEN ========== */
#home-screen {
  justify-content: center;
  align-items: center;
  gap: clamp(20px, 5vh, 40px);
  padding: 20px;
}

.home-title {
  font-size: clamp(28px, 8vw, 42px);
  font-weight: 700;
  color: var(--text-vibe);
  text-align: center;
  letter-spacing: 2px;
  text-transform: lowercase;
  margin-bottom: clamp(-12px, -2vh, -8px);
  animation: bounceIn 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3) translateY(-20px);
  }
  50% {
    transform: scale(1.05) translateY(0);
  }
  70% {
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.logo-container {
  width: clamp(120px, 30vw, 180px);
  aspect-ratio: 1 / 1;
  background: transparent;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: none;
  animation: float 3s ease-in-out infinite;
  position: relative;
  overflow: visible;
  flex-shrink: 0;
}

body.dark-mode .logo-container {
  background: transparent;
  box-shadow: none;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.camera-icon {
  width: 30%;
  height: 30%;
  position: relative;
  z-index: 2;
}

.camera-icon svg {
  width: 100%;
  height: 100%;
  fill: white;
  stroke: #B8B8B8;
  stroke-width: 0.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.camera-icon svg circle {
  fill: white;
  stroke: #B8B8B8;
  stroke-width: 0;
}

/* Decorative balls - same size as camera icon */
.deco-ball {
  position: absolute;
  border-radius: 50%;
  z-index: 1;
  width: 30%;
  height: 30%;
}

.deco-ball.pink {
  background: #ffd3dd;
  top: 20%;
  left: 20%;
}

.deco-ball.green {
  background: #90EE90;
  bottom: 20%;
  right: 20%;
}

.deco-stick {
  position: absolute;
  width: 6%;
  height: 18%;
  background: #8B6914;
  border-radius: 5px;
  bottom: 17%;
  right: 22%;
  z-index: 0;
  transform: rotate(-47deg);
}

.start-btn-home {
  padding: clamp(14px, 4vw, 18px) clamp(40px, 12vw, 60px);
  font-size: clamp(16px, 4vw, 20px);
  font-weight: 600;
  color: var(--text-vibe);
  background: rgba(255, 255, 255, 0.9);
  border: 4px solid var(--border-vibe);
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  letter-spacing: 1px;
  text-transform: lowercase;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.start-btn-home:hover {
  background: var(--text-vibe);
  color: var(--app-bg-color);
  transform: scale(1.08) translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.start-btn-home:active {
  transform: scale(1.02) translateY(0);
}

body.dark-mode .start-btn-home {
  background: rgba(0, 0, 0, 0.3);
}

body.dark-mode .start-btn-home:hover {
  background: var(--text-vibe);
  color: #333;
}

/* ========== REVEAL SCREEN ========== */
#reveal-screen {
  background: var(--app-bg-color) !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: clamp(10px, 2vh, 15px);
  padding-top: clamp(15px, 3vh, 25px);
  padding-bottom: clamp(20px, 4vh, 30px);
  gap: clamp(10px, 1.5vh, 16px);
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 100vh;
}

.reveal-header {
  text-align: center;
  width: 100%;
  flex-shrink: 0;
}

.reveal-strip-container-center {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  width: 100%;
  padding: 10px;
  margin-top: 10px;
}

.reveal-title {
  font-size: clamp(14px, 3.5vw, 20px);
  font-weight: 700;
  color: var(--text-vibe);
  margin: 0 0 clamp(12px, 2vh, 20px) 0;
  margin-bottom: 40px;
  letter-spacing: 1px;
  text-align: center;
  text-transform: lowercase;
}

/* Sliding Toggle Switch */
/* Toggle container hidden - both strips now shown side-by-side */
.toggle-container {
  display: none !important;
}

/* ========== Filter/Vibe Selection ========== */
.filter-selection {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.5vw, 12px);
  padding: clamp(10px, 1.5vh, 14px) clamp(8px, 1vw, 12px);
  background: rgba(255, 255, 255, 0.3);
  border-radius: 25px;
  flex-shrink: 0;
}

.filter-label {
  font-size: clamp(9px, 2vw, 11px);
  font-weight: 600;
  color: var(--text-vibe);
  text-transform: lowercase;
}

.filter-btn {
  padding: clamp(8px, 1.5vh, 10px) clamp(12px, 2vw, 16px);
  border: none;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.5);
  color: var(--text-vibe);
  font-family: 'Nunito', sans-serif;
  font-size: clamp(10px, 2vw, 12px);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 80px;
  text-align: center;
}

.filter-btn:hover {
  background: rgba(255, 255, 255, 0.8);
  transform: scale(1.05);
}

.filter-btn.active {
  background: #D2B7B2;
  color: white;
  box-shadow: 0 2px 8px rgba(210, 183, 178, 0.3);
}

body.dark-mode .filter-selection {
  background: rgba(0, 0, 0, 0.3);
}

body.dark-mode .filter-btn {
  background: rgba(255, 255, 255, 0.2);
}

body.dark-mode .filter-btn:hover {
  background: rgba(255, 255, 255, 0.4);
}

body.dark-mode .filter-btn.active {
  background: #FAF9F6;
  color: #333;
}

/* ========== Strip Display Container ========== */
.reveal-strip-container {
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: clamp(12px, 2vw, 20px);
  width: 100%;
  min-height: 0;
  overflow: visible;
  padding: 0 clamp(10px, 2vw, 20px);
}

/* Wrapper to ensure consistent sizing */
.strip-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  overflow: visible;
  margin: 0 auto;
}

/* Ensure only one strip shows at a time */
.strip-wrapper .reveal-strip,
.strip-wrapper .live-strip-container {
  flex-shrink: 0;
}

.reveal-strip {
  width: 300px !important;
  max-width: 90vw !important;
  height: auto !important;
  max-height: 70vh !important;
  aspect-ratio: 3/8 !important;
  object-fit: contain;
  border-radius: 0;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
  display: none;
}

/* Grid-specific reveal strip sizing */
.reveal-strip.grid-3x1,
.reveal-strip.grid-4x1 {
  width: 300px !important;
  aspect-ratio: 3/8 !important;
}

.reveal-strip.grid-2x2 {
  width: 450px !important;
  aspect-ratio: 5/8 !important;
}

@media (max-width: 768px) {
  .reveal-strip {
    width: 250px !important;
    max-height: 65vh !important;
  }
  
  .reveal-strip.grid-2x2 {
    width: 350px !important;
  }
}

@media (max-height: 700px) {
  .reveal-strip {
    max-height: 60vh !important;
  }
}

/* Live Strip Grid - matches static strip dimensions */
.live-strip-container {
  box-sizing: border-box;
  margin: 0 auto;
  position: relative;
}

/* Legacy live strip rules - kept for backward compatibility but overridden by dual-strip-container */

/* Live cell styling - dimensions handled by JavaScript */
.live-cell {
  position: relative;
  overflow: hidden;
  background: white;
  box-sizing: border-box;
  flex: 1;
  min-height: 0;
}

/* Live strip videos: show reflected (match preview and static captures) */
.live-cell video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scaleX(-1);
}

/* Live cells in dual strip container - fill proportionally within fixed container */
.dual-strip-container .live-cell {
  flex: 1 1 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
}

/* ========== Dual Strip Container (Side-by-Side) ========== */

.dual-strip-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex: 1;
  width: 100%;
  min-height: 0;
  padding: 10px 0;
  margin: 0 auto;
}

/* Both strips always visible side-by-side */
.dual-strip-container .reveal-strip,
.dual-strip-container .live-strip-container {
  flex-shrink: 0;
  box-shadow: none;
  border-radius: 0;
  margin: 0;
  padding: 0;
}

/* Static strip - flat against background, no padding - exact pixel dimensions */
.dual-strip-container .reveal-strip {
  display: block !important;
  object-fit: contain;
}

.dual-strip-container .reveal-strip.grid-3x1,
.dual-strip-container .reveal-strip.grid-4x1 {
  width: 180px !important;
  height: 480px !important;
  max-width: 180px !important;
  max-height: 480px !important;
  min-width: 180px !important;
  min-height: 480px !important;
}

.dual-strip-container .reveal-strip.grid-2x2 {
  width: 270px !important;
  height: 432px !important;
  max-width: 270px !important;
  max-height: 432px !important;
  min-width: 270px !important;
  min-height: 432px !important;
}

/* Live strip matches static dimensions - exact pixel dimensions */
.dual-strip-container .live-strip-container.grid-3x1,
.dual-strip-container .live-strip-container.grid-4x1 {
  display: flex !important;
  flex-direction: column;
  width: 180px !important;
  height: 480px !important;
  max-width: 180px !important;
  max-height: 480px !important;
  min-width: 180px !important;
  min-height: 480px !important;
  gap: 0;
  overflow: hidden;
}

.dual-strip-container .live-strip-container.grid-2x2 {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  width: 270px !important;
  height: 432px !important;
  max-width: 270px !important;
  max-height: 432px !important;
  min-width: 270px !important;
  min-height: 432px !important;
  gap: 0;
  overflow: hidden;
}

/* Mobile adjustments - scale down but maintain exact aspect ratio */
@media (max-width: 768px) {
  .dual-strip-container {
    gap: 6px;
  }
  
  .dual-strip-container .reveal-strip.grid-3x1,
  .dual-strip-container .reveal-strip.grid-4x1,
  .dual-strip-container .live-strip-container.grid-3x1,
  .dual-strip-container .live-strip-container.grid-4x1 {
    width: 120px !important;
    height: 320px !important;
    max-width: 120px !important;
    max-height: 320px !important;
    min-width: 120px !important;
    min-height: 320px !important;
  }
  
  .dual-strip-container .reveal-strip.grid-2x2,
  .dual-strip-container .live-strip-container.grid-2x2 {
    width: 180px !important;
    height: 288px !important;
    max-width: 180px !important;
    max-height: 288px !important;
    min-width: 180px !important;
    min-height: 288px !important;
  }
}

/* Very small screens */
@media (max-width: 480px) {
  .dual-strip-container {
    gap: 4px;
  }
  
  .dual-strip-container .reveal-strip.grid-3x1,
  .dual-strip-container .reveal-strip.grid-4x1,
  .dual-strip-container .live-strip-container.grid-3x1,
  .dual-strip-container .live-strip-container.grid-4x1 {
    width: 90px !important;
    height: 240px !important;
    max-width: 90px !important;
    max-height: 240px !important;
    min-width: 90px !important;
    min-height: 240px !important;
  }
  
  .dual-strip-container .reveal-strip.grid-2x2,
  .dual-strip-container .live-strip-container.grid-2x2 {
    width: 135px !important;
    height: 216px !important;
    max-width: 135px !important;
    max-height: 216px !important;
    min-width: 135px !important;
    min-height: 216px !important;
  }
}

/* ========== Reveal Buttons ========== */
.reveal-buttons {
  display: flex;
  gap: clamp(8px, 1.5vw, 12px);
  justify-content: center;
  width: 100%;
  padding: clamp(5px, 1vh, 8px) 0;
  flex-shrink: 0;
}

.reveal-btn {
  padding: clamp(8px, 1.5vh, 12px) clamp(16px, 3vw, 24px);
  font-size: clamp(12px, 2.5vw, 14px);
  font-weight: 600;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s;
  text-transform: lowercase;
}

.reveal-btn.download {
  background: var(--text-vibe);
  color: var(--app-bg-color);
  border: none;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.reveal-btn.download:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.reveal-btn.retake {
  background: rgba(255, 255, 255, 0.9);
  color: var(--text-vibe);
  border: 3px solid var(--border-vibe);
}

.reveal-btn.retake:hover {
  background: white;
  transform: scale(1.05);
}

body.dark-mode .reveal-btn.retake {
  background: rgba(0, 0, 0, 0.3);
}

body.dark-mode .reveal-btn.retake:hover {
  background: rgba(0, 0, 0, 0.5);
}

/* ========== GLOBAL SETTINGS ========== */
.settings-btn {
  position: fixed;
  /* Sit below Dynamic Island: use at least 56px when safe-area isn't provided (e.g. older WebView) */
  top: max(calc(20px + env(safe-area-inset-top, 0)), 56px);
  right: calc(20px + env(safe-area-inset-right, 0));
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

.settings-btn:hover {
  transform: scale(1.1) rotate(45deg);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.settings-btn svg {
  width: 22px;
  height: 22px;
  fill: var(--text-vibe);
}

body.dark-mode .settings-btn {
  background: rgba(0, 0, 0, 0.4);
}

.settings-popover {
  position: fixed;
  top: max(calc(75px + env(safe-area-inset-top, 0)), 111px);
  right: calc(20px + env(safe-area-inset-right, 0));
  background: white;
  padding: 20px;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
  z-index: 10000;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 180px;
  animation: popIn 0.3s ease;
}

.settings-popover.open {
  display: flex;
}

@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(0.9) translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.settings-label {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  text-align: center;
  letter-spacing: 0.5px;
}

.color-picker-wrapper {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}

.color-picker-wrapper input[type="color"] {
  position: absolute;
  top: -10px;
  left: -10px;
  width: 80px;
  height: 80px;
  border: none;
  cursor: pointer;
}

.settings-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: #999;
  line-height: 1;
}

.settings-close:hover {
  color: #8B0000;
}

.settings-divider {
  width: 100%;
  height: 1px;
  background: #eee;
  margin: 8px 0;
}

.settings-user-section {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.settings-user-section.visible {
  display: flex;
}

.settings-user-email {
  font-size: 12px;
  color: #666;
  text-align: center;
  word-break: break-all;
}

.settings-signout-btn {
  padding: 8px 20px;
  background: rgba(139, 0, 0, 0.1);
  border: 1px solid rgba(139, 0, 0, 0.2);
  border-radius: 20px;
  color: #8B0000;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.settings-signout-btn:hover {
  background: rgba(139, 0, 0, 0.2);
}

/* ========== AUTH STYLES ========== */

/* Auth Button */
.auth-btn {
  position: fixed;
  top: 20px;
  left: 20px;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

.auth-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.auth-btn svg {
  width: 22px;
  height: 22px;
  fill: var(--text-vibe);
}

.auth-btn.logged-in {
  background: #90EE90;
}

.auth-btn.logged-in svg {
  fill: #2d5a2d;
}

body.dark-mode .auth-btn {
  background: rgba(0, 0, 0, 0.4);
}

body.dark-mode .auth-btn.logged-in {
  background: rgba(144, 238, 144, 0.8);
}

/* User Popover */
.user-popover {
  position: fixed;
  top: 75px;
  left: 20px;
  background: white;
  padding: 15px;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
  z-index: 10000;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 180px;
  animation: popIn 0.3s ease;
}

.user-popover.open {
  display: flex;
}

.user-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.user-email {
  font-size: 13px;
  color: var(--text-vibe);
  font-weight: 500;
  text-align: center;
  word-break: break-all;
}

.logout-btn {
  padding: 8px 20px;
  background: rgba(139, 0, 0, 0.1);
  border: none;
  border-radius: 20px;
  color: #8B0000;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.logout-btn:hover {
  background: #8B0000;
  color: white;
}

/* Verification Banner */
.verification-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.7);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
  z-index: 9999;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.verification-banner span {
  color: #333;
  font-size: 14px;
  font-weight: 500;
}

.verification-actions {
  display: flex;
  gap: 10px;
}

.verification-btn {
  padding: 6px 14px;
  background: rgba(139, 0, 0, 0.1);
  border: 1px solid rgba(139, 0, 0, 0.2);
  border-radius: 15px;
  color: #8B0000;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.verification-btn:hover {
  background: white;
  transform: scale(1.05);
}

.verification-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.spam-hint {
  width: 100%;
  text-align: center;
  color: #666;
  font-size: 11px;
  margin-top: 4px;
  opacity: 0.9;
}

/* Auth Screen */
.auth-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10001;
  padding: 20px;
}

.auth-container {
  background: white;
  border-radius: 24px;
  padding: 30px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  position: relative;
  animation: popIn 0.3s ease;
}

.auth-close {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 24px;
  color: #999;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-close:hover {
  color: #8B0000;
}

.auth-header {
  text-align: center;
  margin-bottom: 20px;
}

.auth-title {
  font-size: 28px;
  font-weight: 700;
  color: #8B0000;
  margin: 0 0 8px 0;
}

.auth-subtitle {
  font-size: 14px;
  color: var(--text-vibe-muted);
  margin: 0;
}

.auth-message {
  background: linear-gradient(135deg, #FFE4B5, #FFA500);
  color: #5a3d00;
  padding: 12px 16px;
  border-radius: 12px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 20px;
}

/* Auth Tabs */
.auth-tabs {
  display: flex;
  background: #f5f5f5;
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 20px;
}

.auth-tab {
  flex: 1;
  padding: 10px;
  background: none;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-vibe-muted);
  cursor: pointer;
  transition: all 0.2s ease;
}

.auth-tab.active {
  background: white;
  color: #8B0000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Auth Form */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.auth-field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-vibe);
}

.auth-field input {
  padding: 12px 16px;
  border: 2px solid #eee;
  border-radius: 12px;
  font-size: 15px;
  transition: all 0.2s ease;
  outline: none;
}

.auth-field input:focus {
  border-color: #8B0000;
}

.auth-field input::placeholder {
  color: #bbb;
}

.auth-error {
  color: #e74c3c;
  font-size: 13px;
  text-align: center;
  min-height: 20px;
}

.auth-success {
  color: #27ae60;
  font-size: 13px;
  text-align: center;
  min-height: 20px;
}

.auth-submit {
  padding: 14px 24px;
  background: #8B0000;
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 8px;
}

.auth-submit:hover {
  background: #6d0000;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(139, 0, 0, 0.3);
}

.auth-submit:disabled {
  background: #ccc;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Verification Form Styles */
.verification-header {
  text-align: center;
  margin-bottom: 24px;
}

.verification-header h3 {
  font-size: 20px;
  margin: 0 0 16px 0;
  color: var(--text-vibe);
  font-weight: 600;
}

.verification-header p {
  font-size: 14px;
  color: var(--text-vibe-muted);
  margin: 0;
  line-height: 1.6;
}

.verification-header span {
  font-weight: 600;
  color: #8B0000;
  display: block;
  margin-top: 8px;
}

#verification-code {
  text-align: center;
  font-size: 24px;
  letter-spacing: 8px;
  font-weight: 600;
}

.auth-link {
  background: none;
  border: none;
  color: #8B0000;
  font-size: 14px;
  cursor: pointer;
  padding: 8px;
  text-decoration: underline;
  margin-top: -8px;
}

.auth-link:hover {
  color: #6d0000;
}

.auth-link:disabled {
  color: #ccc;
  cursor: not-allowed;
}

/* Dark mode auth styles */
body.dark-mode .auth-container {
  background: #2a2a2a;
}

body.dark-mode .auth-tabs {
  background: #1a1a1a;
}

body.dark-mode .auth-tab.active {
  background: #3a3a3a;
  color: #FFD1DC;
}

body.dark-mode .auth-field input {
  background: #1a1a1a;
  border-color: #3a3a3a;
  color: white;
}

body.dark-mode .auth-field input:focus {
  border-color: #FFD1DC;
}

body.dark-mode .user-popover {
  background: #2a2a2a;
}

/* Delete Account Button */
.settings-delete-btn {
  width: 100%;
  padding: 10px;
  background: rgba(231, 76, 60, 0.1);
  color: #e74c3c;
  border: 1px solid rgba(231, 76, 60, 0.3);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 8px;
}

.settings-delete-btn:hover {
  background: rgba(231, 76, 60, 0.2);
  border-color: #e74c3c;
}

.settings-delete-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Delete Account Modals */
.delete-account-modal,
.delete-success-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.delete-account-modal.hidden,
.delete-success-modal.hidden {
  display: none;
}

.delete-account-container,
.delete-success-container {
  background: white;
  border-radius: 20px;
  padding: 32px;
  max-width: 400px;
  width: 90%;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.delete-account-title,
.delete-success-title {
  font-size: 24px;
  font-weight: 700;
  color: #2c3e50;
  margin: 0 0 16px 0;
}

.delete-account-message {
  font-size: 15px;
  color: #7f8c8d;
  line-height: 1.6;
  margin: 0 0 24px 0;
}

.delete-success-message {
  font-size: 15px;
  color: #7f8c8d;
  line-height: 1.6;
  margin: 0 0 12px 0;
}

.delete-success-subtitle {
  font-size: 16px;
  color: #8B0000;
  font-weight: 600;
  margin: 0 0 24px 0;
}

.delete-account-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.delete-btn-cancel,
.delete-btn-confirm,
.delete-success-btn {
  padding: 12px 24px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.delete-btn-cancel {
  background: #ecf0f1;
  color: #2c3e50;
}

.delete-btn-cancel:hover {
  background: #d5dbdb;
}

.delete-btn-confirm {
  background: #e74c3c;
  color: white;
}

.delete-btn-confirm:hover {
  background: #c0392b;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);
}

.delete-btn-confirm:disabled,
.delete-success-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.delete-success-btn {
  background: #8B0000;
  color: white;
  width: 100%;
}

.delete-success-btn:hover {
  background: #6d0000;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(139, 0, 0, 0.3);
}

/* Upload Progress Modal */
.upload-progress-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.upload-progress-modal.hidden {
  display: none;
}

.upload-progress-container {
  background: white;
  border-radius: 20px;
  padding: 32px;
  max-width: 400px;
  width: 90%;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.upload-progress-title {
  font-size: 24px;
  font-weight: 700;
  color: #2c3e50;
  margin: 0 0 24px 0;
}

.upload-progress-bar-wrapper {
  width: 100%;
  height: 8px;
  background: #ecf0f1;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 16px;
}

.upload-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #8B0000, #ff6b6b);
  border-radius: 10px;
  width: 0%;
  transition: width 0.3s ease;
}

.upload-progress-text {
  font-size: 14px;
  color: #7f8c8d;
  margin: 0 0 16px 0;
}

.upload-retry-btn,
.upload-cancel-btn {
  padding: 12px 24px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  margin: 8px 4px;
}

.upload-retry-btn {
  background: #8B0000;
  color: white;
}

.upload-retry-btn:hover {
  background: #6d0000;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(139, 0, 0, 0.3);
}

.upload-cancel-btn {
  background: #ecf0f1;
  color: #2c3e50;
}

.upload-cancel-btn:hover {
  background: #d5dbdb;
}

.upload-retry-btn.hidden,
.upload-cancel-btn.hidden {
  display: none;
}

/* Delete Strip Confirmation Modal */
.delete-confirm-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
}

.delete-confirm-modal.hidden {
  display: none;
}

.delete-confirm-container {
  background: white;
  border-radius: 20px;
  padding: 32px;
  max-width: 400px;
  width: 90%;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.delete-confirm-title {
  font-size: 24px;
  font-weight: 700;
  color: #2c3e50;
  margin: 0 0 16px 0;
}

.delete-confirm-message {
  font-size: 15px;
  color: #7f8c8d;
  line-height: 1.6;
  margin: 0 0 24px 0;
}

.delete-confirm-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.delete-btn-cancel-strip,
.delete-btn-confirm-strip {
  padding: 12px 24px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.delete-btn-cancel-strip {
  background: #ecf0f1;
  color: #2c3e50;
}

.delete-btn-cancel-strip:hover {
  background: #d5dbdb;
}

.delete-btn-confirm-strip {
  background: #e74c3c;
  color: white;
}

.delete-btn-confirm-strip:hover {
  background: #c0392b;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);
}

/* Capacity modal (at 30 strips) */
.capacity-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  background: rgba(0, 0, 0, 0.4);
}

.capacity-modal.hidden {
  display: none;
}

.capacity-modal-container {
  background: white;
  border-radius: 20px;
  padding: 32px;
  max-width: 400px;
  width: 90%;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.capacity-modal-title {
  font-size: 24px;
  font-weight: 700;
  color: #2c3e50;
  margin: 0 0 16px 0;
}

.capacity-modal-message {
  font-size: 15px;
  color: #7f8c8d;
  line-height: 1.6;
  margin: 0 0 24px 0;
}

.capacity-modal-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
}

/* Storage status (X/30 strips) next to Save button */
.storage-status {
  font-size: 12px;
  color: #7f8c8d;
  margin-right: 8px;
}

.storage-status.at-capacity {
  color: #e74c3c;
  font-weight: 600;
}

/* Dark mode delete modals */
body.dark-mode .delete-account-container,
body.dark-mode .delete-success-container {
  background: #2a2a2a;
}

body.dark-mode .delete-account-title,
body.dark-mode .delete-success-title {
  color: #ecf0f1;
}

body.dark-mode .delete-btn-cancel {
  background: #34495e;
  color: #ecf0f1;
}

body.dark-mode .delete-btn-cancel:hover {
  background: #2c3e50;
}

/* ========== Profile/Gallery Button ========== */
/* Match start button outline color (dusty rose #D2B7B2) */
.profile-btn {
  position: fixed;
  /* Sit below Dynamic Island: use at least 56px when safe-area isn't provided */
  top: max(calc(20px + env(safe-area-inset-top, 0)), 56px);
  left: calc(20px + env(safe-area-inset-left, 0));
  z-index: 999;
  background: #D2B7B2;
  border: 2px solid #D2B7B2;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.profile-btn svg {
  width: 24px;
  height: 24px;
  fill: white;
}

.profile-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 15px rgba(210, 183, 178, 0.5);
}

.profile-btn.hidden {
  display: none;
}

/* ========== Gallery Screen ========== */
/* Single compact header block: minimal top padding so "Gallery" sits high and reads as one bar with icons */
#gallery-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0 16px;
  padding-top: max(52px, calc(12px + env(safe-area-inset-top, 0)));
  padding-bottom: max(100px, calc(80px + env(safe-area-inset-bottom, 0)));
  max-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
}

/* One solid block from top through "Gallery" — same bg as .gallery-header so no visible seam */
#gallery-screen::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: max(100px, calc(12px + env(safe-area-inset-top, 0)) + 88px);
  background: var(--app-bg-color);
  z-index: 5;
  pointer-events: none;
}

/* "Gallery" tight under the top bar; same bg = one cohesive block with ::before */
.gallery-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--app-bg-color);
  text-align: center;
  margin-top: 0;
  margin-bottom: 8px;
  padding: 2px 0 6px;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-title {
  font-size: clamp(24px, 5vw, 32px);
  font-weight: 700;
  color: var(--text-vibe);
  margin: 0;
  letter-spacing: 0.5px;
}

/* Gallery Loading State */
.gallery-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  gap: 20px;
}

.loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(139, 0, 0, 0.2);
  border-top-color: #8B0000;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.gallery-loading p {
  color: var(--text-vibe-muted);
  font-size: 16px;
}

/* Gallery Empty State */
.gallery-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  gap: 24px;
}

.empty-message {
  font-size: clamp(18px, 4vw, 24px);
  color: var(--text-vibe-muted);
  margin: 0;
}

.gallery-empty-state .btn {
  min-width: 200px;
}

/* Gallery storage status: same fixed position as edit screen for pixel-perfect match */
.gallery-storage-status-row {
  height: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
  order: -1; /* Keep row first in flex so layout order is unchanged */
}

#gallery-storage-status {
  position: fixed;
  left: calc(80px + env(safe-area-inset-left, 0));
  top: calc(44px + env(safe-area-inset-top, 0));
  transform: translateY(-50%);
  z-index: 9999;
}

.gallery-storage-status {
  font-size: 13px;
  color: #7f8c8d;
}

.gallery-storage-status.at-capacity {
  color: #e74c3c;
  font-weight: 600;
}

/* Gallery Grid — 3 cards per row, in bounds (no horizontal clip) */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 8px 0 20px;
  margin-bottom: 24px;
  max-width: 100%;
  box-sizing: border-box;
}

/* Responsive grid columns */
@media (min-width: 768px) {
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .gallery-grid {
    grid-template-columns: repeat(4, 1fr);
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Gallery Strip Card */
.gallery-strip-card {
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 0;
  overflow: hidden;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.gallery-strip-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(139, 0, 0, 0.2);
}

.gallery-strip-thumbnail {
  width: 100%;
  aspect-ratio: 1 / 3; /* Photo booth strip proportions */
  overflow: hidden;
  background: #f0f0f0;
  position: relative;
  border-radius: 0;
}

.gallery-strip-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

.gallery-strip-name {
  padding: 12px;
  font-size: 14px;
  color: #333;
  text-align: center;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Gallery Footer — solid bar so content never scrolls behind the camera button */
.gallery-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px 0;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0));
  background: var(--app-bg-color);
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: none;
  z-index: 100;
}

/* Gallery back arrow – icon only, no rectangle */
.gallery-back-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background: none;
  border: none;
  color: var(--text-color, #333);
  cursor: pointer;
  border-radius: 50%;
  transition: color 0.2s ease, transform 0.2s ease;
}

.gallery-back-arrow:hover {
  color: var(--accent-color, #8B0000);
  transform: translateX(-2px);
}

.gallery-back-arrow:focus {
  outline: 2px solid var(--accent-color, #8B0000);
  outline-offset: 2px;
}

body.dark-mode .gallery-back-arrow {
  color: #e0e0e0;
}

body.dark-mode .gallery-back-arrow:hover {
  color: #ff6b6b;
}

/* Gallery Load More */
.gallery-load-more {
  text-align: center;
  padding: 30px 20px;
  margin-bottom: 100px;
}

.gallery-load-more .btn {
  min-width: 200px;
  padding: 12px 30px;
  font-size: 16px;
}

/* Gallery Loading More Spinner */
.gallery-loading-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 20px;
  margin-bottom: 100px;
  gap: 15px;
}

.gallery-loading-more .loading-spinner {
  width: 40px;
  height: 40px;
}

.gallery-loading-more p {
  color: var(--text-color);
  opacity: 0.7;
  font-size: 14px;
}

/* Gallery Error State */
.gallery-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  gap: 20px;
  text-align: center;
}

.gallery-error p {
  font-size: 16px;
  color: var(--text-vibe);
}

/* ========== Expanded Strip Modal ========== */
/* Above header elements so when open, settings and storage are covered and not usable */
.strip-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10002;
  align-items: center;
  justify-content: center;
  padding-top: max(100px, calc(56px + 44px + env(safe-area-inset-top, 0)));
  padding-bottom: max(88px, calc(72px + env(safe-area-inset-bottom, 0)));
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}

.strip-modal.active {
  display: flex;
}

/* Full-screen gray overlay when card is open */
.strip-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
}

.strip-modal-content {
  position: relative;
  background: white;
  border-radius: 16px;
  width: 100%;
  max-width: 90vw;
  min-width: 280px;
  height: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  z-index: 1;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .strip-modal-content {
    width: 600px;
    max-width: 600px;
  }
}

@media (max-width: 500px) {
  .strip-modal-content {
    min-width: 320px;
    width: 95vw;
  }
}

/* Modal Header */
.strip-modal-header {
  padding: 20px;
  border-bottom: 2px solid #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.strip-modal-name-container {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.strip-modal-name {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.strip-modal-name-input {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  border: 2px solid #8B0000;
  border-radius: 4px;
  padding: 4px 8px;
  flex: 1;
  min-width: 0;
  font-family: inherit;
}

.strip-modal-name-input:focus {
  outline: none;
  border-color: #a52a2a;
}

/* Icon Buttons */
.icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  color: #666;
}

.icon-btn:hover {
  background: rgba(139, 0, 0, 0.1);
  color: #8B0000;
}

.icon-btn svg {
  fill: currentColor;
  display: block;
}

.icon-btn-danger:hover {
  background: rgba(231, 76, 60, 0.1);
  color: #e74c3c;
}

/* Modal Image — same fit rules as video so static and video match */
.strip-modal-image-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
  overflow-x: hidden;
  background: #fafafa;
  min-height: 160px;
  min-width: 0;
}

/* Video view: remove padding so video fills container width like photo strip */
.strip-modal-image-container:has(.strip-modal-video-wrapper:not(.hidden)) {
  padding: 0;
}


.strip-modal-image {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Video wrapper: fill full container width (no padding) to match photo strip edge-to-edge */
.strip-modal-video-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
}

.strip-modal-video-wrapper.hidden {
  display: none !important;
}

.strip-modal-video {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
  display: block;
}

/* No native controls — video plays continuously; hide any WebView/iOS controls */
.strip-modal-video::-webkit-media-controls,
.strip-modal-video::-webkit-media-controls-panel,
.strip-modal-video::-webkit-media-controls-play-button,
.strip-modal-video::-webkit-media-controls-start-playback-button {
  display: none !important;
  opacity: 0;
  pointer-events: none;
}
.strip-modal-video::-webkit-media-controls-enclosure {
  display: none !important;
}

/* Strip background overlay on top of video (same layering as edit screen: design over captures) */
.strip-modal-video-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: 100% 100% !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  pointer-events: none;
  z-index: 2;
}

.strip-modal-video-overlay.hidden {
  display: none !important;
}

.strip-modal-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.icon-btn.active {
  background: rgba(139, 0, 0, 0.15);
  color: #8B0000;
}

/* Modal Footer — back button attached to the card */
.strip-modal-footer {
  padding: 20px;
  border-top: 2px solid #f0f0f0;
  text-align: center;
  flex-shrink: 0;
}


/* ========== Buttons ========== */
.btn {
  padding: 12px 32px;
  border-radius: 24px;
  border: none;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: inherit;
}

.btn-primary {
  background: #D2B7B2;
  color: white;
  box-shadow: 0 2px 8px rgba(210, 183, 178, 0.3);
}

.btn-primary:hover {
  background: #c5a7a2;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(210, 183, 178, 0.4);
}

.btn-secondary {
  background: white;
  color: #8B0000;
  border: 2px solid #8B0000;
}

.btn-secondary:hover {
  background: #8B0000;
  color: white;
  transform: translateY(-2px);
}

/* Save to Gallery Button */
.save-gallery {
  background: #27ae60;
  color: white;
}

.save-gallery:hover {
  background: #229954;
  transform: translateY(-2px);
}

.save-gallery.hidden {
  display: none;
}

/* ========== Toast Notifications ========== */
.toast-container {
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}

.toast {
  background: white;
  color: #333;
  padding: 16px 24px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  font-size: 14px;
  font-weight: 500;
  min-width: 250px;
  max-width: 350px;
  opacity: 0;
  transform: translateX(400px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: auto;
}

.toast-show {
  opacity: 1;
  transform: translateX(0);
}

.toast-success {
  border-left: 4px solid #27ae60;
}

.toast-error {
  border-left: 4px solid #e74c3c;
}

.toast-info {
  border-left: 4px solid #3498db;
}

/* Mobile responsiveness for toast */
@media (max-width: 768px) {
  .toast-container {
    top: 60px;
    right: 10px;
    left: 10px;
  }
  
  .toast {
    min-width: auto;
    max-width: none;
  }
}

/* Dark mode support for gallery */
body.dark-mode .gallery-strip-card {
  background: #2a2a2a;
}

body.dark-mode .gallery-strip-name {
  color: #ecf0f1;
}

body.dark-mode .strip-modal-content {
  background: #2a2a2a;
}

body.dark-mode .strip-modal-header,
body.dark-mode .strip-modal-footer {
  border-color: #444;
}

body.dark-mode .strip-modal-name {
  color: #ecf0f1;
}

body.dark-mode .strip-modal-name-input {
  background: #1a1a1a;
  color: #ecf0f1;
  border-color: #8B0000;
}

body.dark-mode .strip-modal-image-container {
  background: #1a1a1a;
}

body.dark-mode .icon-btn {
  color: #bbb;
}

body.dark-mode .icon-btn:hover {
  background: rgba(139, 0, 0, 0.2);
  color: #ff6b6b;
}

body.dark-mode .toast {
  background: #2a2a2a;
  color: #ecf0f1;
}

body.dark-mode .btn-secondary {
  background: transparent;
  color: #ff6b6b;
  border-color: #ff6b6b;
}

body.dark-mode .btn-secondary:hover {
  background: #ff6b6b;
  color: white;
}

/* ========== EDIT SCREEN REDESIGN ========== */

/* Edit bar: Storage (#/30) is left of screen, right of gallery icon. Download | Save | Filters remain top-right. */
.edit-top-actions {
  position: fixed;
  top: calc(20px + env(safe-area-inset-top, 0));
  right: calc(80px + env(safe-area-inset-right, 0));
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  z-index: 9999;
}

/* Storage status on edit screen: positioned to the right of the profile/gallery icon, vertically centered with button */
#edit-screen .edit-top-actions #storage-status {
  position: fixed;
  left: calc(80px + env(safe-area-inset-left, 0));
  top: calc(44px + env(safe-area-inset-top, 0));
  transform: translateY(-50%);
  z-index: 9999;
}

.edit-top-actions .download-menu-container { order: 1; }
.edit-top-actions #save-icon-btn { order: 2; }
.edit-top-actions #filters-icon-btn { order: 3; }

.edit-action-btn {
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

#snap-another-btn {
  width: 60px;
  height: 60px;
}

#snap-another-btn svg,
#gallery-camera-btn svg {
  width: 28px;
  height: 28px;
}

/* Gallery footer: camera button is the main CTA — bigger than other action buttons */
#gallery-camera-btn {
  width: 56px;
  height: 56px;
}

#gallery-camera-btn svg {
  width: 30px;
  height: 30px;
}

.edit-action-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.edit-action-btn svg {
  width: 22px;
  height: 22px;
  stroke: var(--text-vibe);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

body.dark-mode .edit-action-btn {
  background: rgba(0, 0, 0, 0.4);
}

body.dark-mode .edit-action-btn svg {
  stroke: #FAF9F6;
}

/* Download Dropdown Menu */
.download-menu-container {
  position: relative;
}

.download-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  padding: 8px;
  min-width: 140px;
  z-index: 10000;
  animation: dropdownSlideIn 0.2s ease;
}

@keyframes dropdownSlideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.download-dropdown.hidden {
  display: none;
}

.download-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-vibe);
  text-align: left;
  transition: all 0.2s ease;
  text-transform: lowercase;
}

.download-option:hover {
  background: rgba(139, 0, 0, 0.1);
}

.download-option svg {
  stroke: var(--text-vibe);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  flex-shrink: 0;
}

body.dark-mode .download-dropdown {
  background: #2a2a2a;
  border: 1px solid #444;
}

body.dark-mode .download-option {
  color: #FAF9F6;
}

body.dark-mode .download-option:hover {
  background: rgba(255, 255, 255, 0.1);
}

body.dark-mode .download-option svg {
  stroke: #FAF9F6;
}


/* Centered Strip Wrapper on Edit Screen */
.edit-strip-wrapper {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 20px;
  overflow: visible;
}

/* Hide old filter sidebar (filters now in overlay) */
#edit-screen .filter-selection {
  display: none !important;
}

/* Update edit screen layout */
#edit-screen {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  gap: 10px;
}

/* Bottom Center Tool Buttons (Filters) */
.edit-tool-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
  padding: 15px 0;
  flex-shrink: 0;
}

.tool-icon-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 70px;
  height: 70px;
  background: rgba(255, 255, 255, 0.9);
  border: 3px solid var(--border-vibe);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.tool-icon-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 1);
}

.tool-icon-btn svg {
  width: 26px;
  height: 26px;
  stroke: var(--text-vibe);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.tool-icon-btn span {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-vibe);
  text-transform: lowercase;
  letter-spacing: 0.5px;
}

body.dark-mode .tool-icon-btn {
  background: rgba(0, 0, 0, 0.3);
}

body.dark-mode .tool-icon-btn:hover {
  background: rgba(0, 0, 0, 0.5);
}

body.dark-mode .tool-icon-btn svg {
  stroke: #FAF9F6;
}

body.dark-mode .tool-icon-btn span {
  color: #FAF9F6;
}

/* Edit Overlay (Filters & Stickers) */
.edit-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  z-index: 10001;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: opacity 0.3s ease;
  opacity: 1;
  animation: overlayFadeIn 0.3s ease;
}

@keyframes overlayFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.edit-overlay.hidden {
  display: none;
  opacity: 0;
}

.overlay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  background: transparent;
  border-bottom: none;
}

.overlay-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-vibe);
  text-transform: lowercase;
  letter-spacing: 1px;
  margin: 0;
  flex: 1;
  text-align: center;
}

.overlay-close {
  width: 32px;
  height: 32px;
  background: rgba(139, 0, 0, 0.1);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
  color: var(--text-vibe);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.overlay-close:hover {
  background: var(--text-vibe);
  color: white;
  transform: scale(1.1);
}

.overlay-content {
  background: rgba(255, 255, 255, 0.98);
  padding: 20px;
  max-height: 50vh;
  overflow-y: auto;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
  animation: slideUpContent 0.3s ease;
}

@keyframes slideUpContent {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

/* Horizontal Filter Options */
.filter-options-horizontal {
  display: flex;
  justify-content: center;
  gap: 12px;
  overflow-x: auto;
  padding: 10px 0;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.filter-options-horizontal::-webkit-scrollbar {
  height: 6px;
}

.filter-options-horizontal::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 3px;
}

.filter-options-horizontal::-webkit-scrollbar-thumb {
  background: var(--border-vibe);
  border-radius: 3px;
}

.filter-options-horizontal .filter-btn {
  flex-shrink: 0;
  min-width: 100px;
}

body.dark-mode .overlay-header {
  background: transparent;
  border-bottom: none;
}

body.dark-mode .overlay-content {
  background: rgba(30, 30, 30, 0.98);
}

body.dark-mode .overlay-close {
  background: rgba(255, 255, 255, 0.1);
  color: #FAF9F6;
}

body.dark-mode .overlay-close:hover {
  background: #FAF9F6;
  color: #333;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .edit-top-actions {
    right: 70px;
    gap: 8px;
  }
  
  .edit-action-btn {
    width: 40px;
    height: 40px;
  }
  
  .edit-action-btn svg {
    width: 20px;
    height: 20px;
  }
  
  .tool-icon-btn {
    width: 65px;
    height: 65px;
  }
  
  .tool-icon-btn svg {
    width: 24px;
    height: 24px;
  }
  
  .overlay-content {
    max-height: 40vh;
  }
}

@media (max-width: 480px) {
  .edit-top-actions {
    top: 15px;
    right: 60px;
    gap: 6px;
  }
  
  .edit-action-btn {
    width: 36px;
    height: 36px;
  }
  
  .edit-action-btn svg {
    width: 18px;
    height: 18px;
  }
  
  .tool-icon-btn {
    width: 60px;
    height: 60px;
    gap: 4px;
  }
  
  .tool-icon-btn svg {
    width: 22px;
    height: 22px;
  }
  
  .tool-icon-btn span {
    font-size: 9px;
  }
  
  .edit-tool-buttons {
    gap: 15px;
  }
  
  .overlay-content {
    max-height: 35vh;
    padding: 15px;
  }
}