@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,600;0,700;0,800;0,900;1,400&family=Noto+Sans+KR:wght@400;500;700&display=swap');

/* ─── TOKENS ─── */
:root {
  --bg:           #fdf7ff;
  --bg-2:         #fff0f7;
  --surface:      #ffffff;
  --pink:         #ff6b9d;
  --pink-light:   #ffb3ce;
  --pink-dim:     rgba(255,107,157,.1);
  --pink-border:  rgba(255,107,157,.3);
  --purple:       #a855f7;
  --purple-dim:   rgba(168,85,247,.1);
  --mint:         #2dd4bf;
  --mint-dim:     rgba(45,212,191,.1);
  --yellow:       #fbbf24;
  --yellow-dim:   rgba(251,191,36,.12);
  --text:         #1e0a24;
  --text-muted:   #9d7aaa;
  --text-light:   #c4a8d0;
  --border:       rgba(168,85,247,.15);

  --radius:       14px;
  --radius-lg:    22px;
  --radius-xl:    30px;
  --shadow-sm:    0 2px 12px rgba(168,85,247,.08);
  --shadow:       0 8px 32px rgba(168,85,247,.12);
  --shadow-hover: 0 16px 48px rgba(255,107,157,.2);
  --shadow-card:  0 4px 20px rgba(168,85,247,.1);
  --transition:   0.25s cubic-bezier(.4,0,.2,1);

  --font-ui: 'Nunito', sans-serif;
  --font-kr: 'Noto Sans KR', sans-serif;
}

/* ─── RESET ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

body::before {
  content: '';
  position: fixed; top: -200px; right: -150px;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(255,107,157,.12) 0%, transparent 70%);
  pointer-events: none; z-index: 0;
}
body::after {
  content: '';
  position: fixed; bottom: -150px; left: -100px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(168,85,247,.1) 0%, transparent 70%);
  pointer-events: none; z-index: 0;
}

/* ─── PAGE WRAPPER ─── */
.page-wrapper {
  max-width: 1100px; margin: 0 auto;
  padding: 0 40px;
  position: relative; z-index: 1;
}

/* ─── HEADER ─── */
.site-header {
  padding: 36px 40px 0;
  display: flex; flex-direction: column;
  align-items: center; gap: 8px;
  position: relative; z-index: 1;
}
.site-header .eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--pink); font-weight: 800;
  background: var(--pink-dim); border: 1.5px solid var(--pink-border);
  padding: 5px 14px; border-radius: 20px;
}
.site-header h1 {
  font-size: clamp(2rem, 6vw, 3.6rem);
  font-weight: 900; line-height: 1;
  color: var(--text); letter-spacing: -0.02em;
}
.site-header h1 .highlight {
  background: linear-gradient(135deg, var(--pink) 0%, var(--purple) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.site-header .subtitle { font-size: 0.9rem; color: var(--text-muted); font-weight: 600; }
.site-header .kr-label {
  font-family: var(--font-kr);
  font-size: 0.72rem; color: var(--text-light); letter-spacing: 0.04em;
}

/* ─── TOP NAV BAR ─── */
.top-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px;
  height: 52px;
  border-bottom: 1.5px solid var(--border);
  position: relative; z-index: 10;
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(10px);
  flex-shrink: 0;
}
.top-bar-logo {
  font-size: 1.35rem; font-weight: 900; line-height: 1;
  background: linear-gradient(135deg, var(--pink) 0%, var(--purple) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  text-decoration: none;
  letter-spacing: -0.01em;
}
.top-bar-steps {
  display: flex; align-items: center; gap: 7px;
  font-size: 0.7rem; font-weight: 700; color: var(--text-light);
  position: absolute; left: 50%; transform: translateX(-50%);
}
.top-bar-steps .step { display: flex; align-items: center; gap: 5px; }
.top-bar-steps .step.active { color: var(--pink); }
.top-bar-steps .step.done   { color: var(--purple); }
.top-bar-steps .step-num {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid currentColor;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.6rem; font-weight: 900;
}
.top-bar-steps .step.active .step-num { background: var(--pink); border-color: var(--pink); color: white; }
.top-bar-steps .step.done   .step-num { background: var(--purple); border-color: var(--purple); color: white; font-size: 0.5rem; }
.top-bar-steps .divider { width: 20px; height: 1.5px; background: currentColor; opacity: .25; border-radius: 1px; }
.top-bar-right { display: flex; align-items: center; gap: 10px; }
.top-bar-back {
  font-size: 0.72rem; font-weight: 700; color: var(--text-muted);
  text-decoration: none; transition: color var(--transition);
  padding: 6px 12px; border-radius: 20px;
  border: 1.5px solid var(--border);
  background: rgba(255,255,255,.6);
}
.top-bar-back:hover { color: var(--pink); border-color: var(--pink-border); }

.header-rule {
  width: 100%; height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(255,107,157,.3), rgba(168,85,247,.2), transparent);
  margin: 20px 0 0;
}

/* ─── STEPS (index page) ─── */
.steps {
  display: flex; align-items: center; gap: 8px;
  justify-content: center; padding: 18px 0;
  font-size: 0.72rem; color: var(--text-light); font-weight: 700;
  position: relative; z-index: 1;
}
.steps .step { display: flex; align-items: center; gap: 7px; transition: color var(--transition); }
.steps .step.active { color: var(--pink); }
.steps .step.done   { color: var(--purple); }
.steps .step-num {
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid currentColor;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.65rem; font-weight: 900;
}
.steps .step.active .step-num {
  background: var(--pink); border-color: var(--pink); color: white;
  box-shadow: 0 2px 12px rgba(255,107,157,.4);
}
.steps .step.done .step-num { background: var(--purple); border-color: var(--purple); color: white; }
.steps .divider { width: 28px; height: 2px; background: currentColor; opacity: .25; border-radius: 1px; }

/* ─── SECTION HEADING ─── */
.section-head { text-align: center; margin: 26px 0 30px; }
.section-head h2 { font-size: clamp(1.2rem, 3vw, 1.8rem); font-weight: 900; color: var(--text); }
.section-head p  { font-size: 0.8rem; color: var(--text-muted); margin-top: 6px; font-weight: 600; }

/* ─── LAYOUT GRID ─── */
.layout-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 18px; margin: 0 auto 40px;
}

/* ─── LAYOUT CARD ─── */
.layout-card {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
  cursor: pointer; position: relative;
  box-shadow: var(--shadow-card);
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
  -webkit-tap-highlight-color: transparent;
}
.layout-card::before { display: none; }
.layout-card:hover   { border-color: var(--pink-border); transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.layout-card.selected {
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(255,107,157,.18), var(--shadow-hover);
}
.badge-selected {
  display: none; position: absolute; top: 10px; right: 10px;
  background: var(--pink); color: white;
  font-size: 0.6rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 20px;
  box-shadow: 0 2px 8px rgba(255,107,157,.4); z-index: 2;
}
.layout-card.selected .badge-selected { display: block; }

.layout-preview {
  background: linear-gradient(135deg, #fef0f6 0%, #f4efff 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 28px 20px; min-height: 200px;
  border-bottom: 1.5px solid var(--border);
  gap: 10px;
}
.layout-preview svg {
  max-height: 165px; width: auto;
  filter: drop-shadow(0 4px 16px rgba(168,85,247,.2));
  transition: transform var(--transition);
}
.layout-card:hover .layout-preview svg { transform: scale(1.05) translateY(-2px); }

.layout-info { padding: 14px 18px 18px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.layout-info .layout-name {
  font-size: 0.98rem; font-weight: 900; color: var(--text);
  display: block; text-align: center;
}
.layout-info .layout-name .kr { display: none; }
.layout-info .layout-meta { display: flex; gap: 6px; margin: 8px 0 12px; flex-wrap: wrap; justify-content: center; }
.meta-tag {
  font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 800; padding: 3px 8px; border-radius: 20px;
}
.layout-info .btn {
  padding: 7px 18px;
  font-size: 0.72rem;
  border-radius: 12px;
  width: auto;
}
.meta-tag.pink   { color: var(--pink);   background: var(--pink-dim);   border: 1.5px solid var(--pink-border); }
.meta-tag.purple { color: var(--purple); background: var(--purple-dim); border: 1.5px solid rgba(168,85,247,.25); }
.meta-tag.mint   { color: var(--mint);   background: var(--mint-dim);   border: 1.5px solid rgba(45,212,191,.25); }
.meta-tag.yellow { color: #b45309;       background: var(--yellow-dim); border: 1.5px solid rgba(251,191,36,.3); }

/* ─── BUTTONS ─── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 7px; font-family: var(--font-ui); font-size: 0.82rem;
  font-weight: 800; letter-spacing: 0.02em;
  border: none; border-radius: var(--radius); cursor: pointer;
  transition: all var(--transition); text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  padding: 11px 20px;
}
.btn:hover    { transform: translateY(-1px); }
.btn:active   { transform: scale(0.98); }
.btn:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
.btn-primary {
  background: linear-gradient(135deg, var(--pink), #e0378a);
  color: white;
  box-shadow: 0 4px 18px rgba(255,107,157,.35);
}
.btn-primary:hover { box-shadow: 0 6px 28px rgba(255,107,157,.5); }
.btn-primary:active { transform: scale(0.98); }
.btn-secondary {
  background: white; color: var(--text);
  padding: 11px 20px; border: 2px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.btn-secondary:hover { border-color: var(--pink-border); color: var(--pink); }
.btn-purple {
  background: linear-gradient(135deg, var(--purple), #7c3aed);
  color: white;
  box-shadow: 0 4px 16px rgba(168,85,247,.35);
}
.btn-purple:hover { box-shadow: 0 6px 24px rgba(168,85,247,.5); }
.btn-ghost {
  background: transparent; color: var(--text-muted);
  font-size: 0.72rem;
}
.btn-ghost:hover { color: var(--pink); }
.btn-lg { padding: 14px 28px; font-size: 0.85rem; border-radius: 16px; }

/* ─── MODE TOGGLE ─── */
.mode-toggle-wrap {
  display: flex; justify-content: center; align-items: center; gap: 6px;
  padding: 10px 0 8px; position: relative; z-index: 1;
  flex-shrink: 0;
}
.mode-toggle {
  display: flex; gap: 0;
  background: var(--surface); border: 2px solid var(--border);
  border-radius: 50px; padding: 4px;
  box-shadow: var(--shadow-sm);
  width: fit-content;   /* ← only as wide as the two buttons need */
}
.mode-btn {
  font-family: var(--font-ui); font-size: 0.78rem; font-weight: 800;
  padding: 9px 22px; border-radius: 50px; border: none;
  cursor: pointer; background: transparent; color: var(--text-muted);
  transition: all var(--transition); white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.mode-btn.active {
  background: linear-gradient(135deg, var(--pink), #e0378a);
  color: white; box-shadow: 0 3px 12px rgba(255,107,157,.35);
}

/* ─── CAMERA PAGE LAYOUT ─── */
.camera-layout {
  display: grid; grid-template-columns: 234px 1fr 210px; gap: 12px;
  max-width: 1180px; margin: 0 auto; padding: 0 18px 10px;
  align-items: stretch; height: 100%;
  box-sizing: border-box;
  position: relative; z-index: 1;
}
.camera-left-panel  { display: flex; flex-direction: column; gap: 10px; height: 100%; overflow: hidden; }
.camera-right-panel { display: flex; flex-direction: column; gap: 10px; height: 100%; overflow: hidden; }
.camera-left-panel  .sidebar-panel,
.camera-right-panel .sidebar-panel { margin-bottom: 0; }
.camera-right-panel .live-preview-wrap { flex: 1; min-height: 0; }
.camera-right-panel .live-preview-wrap canvas { width: 100% !important; height: auto !important; }

/* ─── CAMERA VIEWFINDER ─── */
.camera-viewfinder {
  position: relative; background: #1a0a24;
  border-radius: var(--radius-lg); overflow: hidden;
  border: 2px solid var(--border); aspect-ratio: 4/3; box-shadow: var(--shadow);
}
.camera-viewfinder video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
canvas#snapshot {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: none;
}
.vf-corner {
  position: absolute; width: 22px; height: 22px;
  border-color: var(--pink); border-style: solid; opacity: .85;
}
.vf-corner.tl { top: 12px; left: 12px; border-width: 2px 0 0 2px; border-radius: 4px 0 0 0; }
.vf-corner.tr { top: 12px; right: 12px; border-width: 2px 2px 0 0; border-radius: 0 4px 0 0; }
.vf-corner.bl { bottom: 12px; left: 12px; border-width: 0 0 2px 2px; border-radius: 0 0 0 4px; }
.vf-corner.br { bottom: 12px; right: 12px; border-width: 0 2px 2px 0; border-radius: 0 0 4px 0; }

/* ─── COUNTDOWN ─── */
.countdown-overlay {
  position: absolute; inset: 0;
  background: rgba(10,0,20,.75); backdrop-filter: blur(3px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  z-index: 10; opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.countdown-overlay.visible { opacity: 1; pointer-events: auto; }
.countdown-number {
  font-size: 9rem; font-weight: 900; line-height: 1;
  background: linear-gradient(135deg, var(--pink), var(--purple));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  filter: drop-shadow(0 0 24px rgba(255,107,157,.5));
  animation: countPulse 1s ease-in-out;
}
@keyframes countPulse {
  0%   { transform: scale(1.5); opacity: 0; }
  25%  { transform: scale(1);   opacity: 1; }
  80%  { transform: scale(1);   opacity: 1; }
  100% { transform: scale(.8);  opacity: 0; }
}
.countdown-label {
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(255,255,255,.6); margin-top: 14px;
}

/* ─── CAPTURED PAUSE STATE ─── */
.captured-state {
  position: absolute; inset: 0; z-index: 12;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px;
  background: rgba(10,0,20,.55);
  backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease;
}
.captured-state.visible { opacity: 1; }

.captured-check-ring {
  width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(135deg, var(--pink), var(--purple));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 8px rgba(255,107,157,.2), 0 8px 32px rgba(255,107,157,.45);
  animation: capturedPop 0.35s cubic-bezier(.4,0,.2,1);
}
@keyframes capturedPop {
  0%   { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}
.captured-check {
  font-size: 2rem; color: white; font-weight: 900; line-height: 1;
}
.captured-label {
  font-size: 1rem; font-weight: 900; color: white;
  letter-spacing: 0.02em;
}
.captured-sublabel {
  font-size: 0.72rem; font-weight: 600; color: rgba(255,255,255,.6);
  letter-spacing: 0.04em;
}

/* ─── FLASH ─── */
.flash-overlay {
  position: absolute; inset: 0; background: white; opacity: 0;
  pointer-events: none; z-index: 20; transition: opacity 0.05s;
}

/* ─── SHOT PROGRESS ─── */
.shot-progress { margin-top: 12px; }
.shot-bar-track { height: 5px; background: rgba(168,85,247,.12); border-radius: 3px; overflow: hidden; }
.shot-bar-fill {
  height: 100%; background: linear-gradient(90deg, var(--pink), var(--purple));
  border-radius: 3px; transition: width 0.4s cubic-bezier(.4,0,.2,1); width: 0%;
}
.shot-labels { display: flex; justify-content: space-between; margin-top: 8px; }
.shot-label-current { font-size: 0.72rem; font-weight: 800; color: var(--pink); }
.shot-label-total   { font-size: 0.72rem; color: var(--text-muted); font-weight: 600; }

.camera-controls { margin-top: 14px; display: flex; gap: 10px; align-items: center; }

/* ─── SIDEBAR PANEL ─── */
.sidebar-panel {
  background: var(--surface); border: 2px solid var(--border);
  border-radius: var(--radius-lg); padding: 16px;
  margin-bottom: 14px; box-shadow: var(--shadow-sm);
}
.sidebar-panel h3 {
  font-size: 0.6rem; font-weight: 900; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 12px;
}
.layout-badge { display: flex; align-items: center; gap: 12px; }
.layout-badge-icon {
  width: 46px; height: 46px;
  background: linear-gradient(135deg, var(--pink-dim), var(--purple-dim));
  border: 2px solid var(--pink-border); border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.65rem; font-weight: 900; color: var(--pink);
  text-align: center; line-height: 1.3; font-family: var(--font-kr);
}
.layout-badge-info .name { font-weight: 900; font-size: 0.9rem; color: var(--text); }
.layout-badge-info .sub  { font-size: 0.62rem; color: var(--text-light); font-weight: 700; margin-top: 2px; }

/* ─── THUMBNAILS ─── */
.thumbnails-grid { display: grid; gap: 7px; }
.thumbnails-grid.cols-1 { grid-template-columns: 1fr; }
.thumbnails-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.thumbnails-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

.thumb-slot {
  aspect-ratio: 1.55 / 1;
  background: linear-gradient(135deg, #fef0f6, #f4efff);
  border: 2px dashed rgba(168,85,247,.2);
  border-radius: 8px; overflow: hidden; position: relative;
  transition: border-color var(--transition);
}
.thumb-slot.captured { border-style: solid; border-color: var(--pink); box-shadow: 0 2px 8px rgba(255,107,157,.2); }
.thumb-slot img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 0.3s; }
.thumb-slot.captured img { opacity: 1; }
.thumb-slot .slot-num {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.62rem; color: var(--text-light); font-weight: 800; pointer-events: none;
}
.thumb-slot.captured .slot-num { display: none; }

/* ─── LIVE STRIP PREVIEW ─── */
.live-preview-wrap {
  width: 100%;
  background: #f8f4ff;
  border-radius: 10px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  min-height: 80px; padding: 6px; box-sizing: border-box;
}
.live-preview-wrap canvas {
  display: none; width: 100%; height: auto;
  border-radius: 4px; box-shadow: 0 2px 12px rgba(0,0,0,.10);
}
.live-preview-placeholder {
  display: flex; flex-direction: column;
  align-items: center; gap: 6px; padding: 18px 0;
  color: var(--text-light); font-size: 0.68rem; font-weight: 600; text-align: center;
}
.live-preview-placeholder span { font-size: 1.6rem; opacity: 0.5; }

/* ─── STATUS / READY / PERMISSION ─── */
.status-msg { text-align: center; padding: 10px; font-size: 0.75rem; font-weight: 700; color: var(--text-muted); }
.status-msg.active { color: var(--pink); }

.ready-state {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 16px; min-height: 300px; text-align: center;
}
.ready-state .big-icon { font-size: 3.5rem; animation: float 3s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.ready-state h2 { font-size: 1.4rem; font-weight: 900; color: white; }
.ready-state p  { font-size: 0.8rem; font-weight: 600; color: rgba(255,255,255,.55); max-width: 280px; line-height: 1.7; }
.pose-count-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,107,157,.2); border: 1.5px solid rgba(255,107,157,.4);
  color: var(--pink-light); font-size: 0.72rem; font-weight: 800;
  padding: 5px 14px; border-radius: 20px;
}
.permission-error {
  display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 40px; text-align: center; min-height: 300px;
}
.permission-error.visible { display: flex; }
.permission-error .icon { font-size: 3rem; }
.permission-error h3 { font-weight: 900; font-size: 1.1rem; color: #ff4444; }
.permission-error p  { font-size: 0.78rem; color: rgba(255,255,255,.4); max-width: 300px; line-height: 1.7; }

/* ─── UPLOAD MODE ─── */
.upload-mode-container {
  background: var(--surface); border: 2px solid var(--border);
  border-radius: var(--radius-lg); padding: 20px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
}
.upload-header { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; flex-shrink: 0; padding-right: 140px; }
.upload-header-icon { font-size: 2rem; }
.upload-header h3 { font-size: 1rem; font-weight: 900; color: var(--text); }
.upload-header p  { font-size: 0.72rem; color: var(--text-muted); font-weight: 600; margin-top: 3px; }

.upload-slots-grid {
  display: grid;
  gap: 10px;
  flex: 1;
  min-height: 0;
  align-content: stretch;
  justify-content: center;
  overflow: hidden;
}
.upload-slot {
  border-radius: var(--radius);
  border: 2px dashed rgba(168,85,247,.25);
  background: linear-gradient(135deg, #fef0f6, #f4efff);
  position: relative; overflow: hidden; cursor: pointer;
  transition: border-color var(--transition), transform var(--transition);
  -webkit-tap-highlight-color: transparent;
  /* Height fills its 1fr grid row; width is derived from aspect-ratio */
  height: 100%;
  width: auto;
  aspect-ratio: 1 / 0.6452;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.upload-slot:hover { border-color: var(--pink); transform: scale(1.01); }
.upload-slot:active { transform: scale(0.98); }
.upload-slot.filled { border-style: solid; border-color: var(--pink); }
.upload-slot-placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
}
.upload-slot-icon {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,107,157,.15); border: 2px dashed rgba(255,107,157,.4);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; font-weight: 900; color: var(--pink);
}
.upload-slot-num { font-size: 0.65rem; font-weight: 800; color: var(--text-muted); letter-spacing: 0.05em; }
.upload-slot-img { width: 100%; height: 100%; object-fit: cover; }
.upload-slot-remove {
  position: absolute; top: 6px; right: 6px;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,50,80,.85); border: none;
  color: white; font-size: 0.7rem; font-weight: 900;
  cursor: pointer; display: none; align-items: center; justify-content: center;
  z-index: 5; transition: background var(--transition);
  -webkit-tap-highlight-color: transparent;
}
.upload-slot-remove:hover { background: rgba(220,20,50,1); }
.upload-bulk-wrap { display: flex; justify-content: center; margin-bottom: 12px; flex-shrink: 0; }
.upload-bulk-btn {
  width: auto !important;
  font-size: 0.62rem !important;
  border-style: dashed !important;
  border-width: 1.5px !important;
  padding: 4px 9px !important;
  min-height: unset !important;
  height: auto !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  gap: 4px !important;
}
/* Position the bulk button in the upper-right corner of the upload modal */
.upload-mode-container > .upload-header .upload-bulk-btn,
.upload-header .upload-bulk-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
}
.upload-progress-wrap { margin-bottom: 4px; flex-shrink: 0; }
.upload-progress-bar { height: 6px; background: rgba(168,85,247,.12); border-radius: 3px; overflow: hidden; margin-bottom: 6px; }
.upload-progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--pink), var(--purple));
  border-radius: 3px; transition: width 0.4s cubic-bezier(.4,0,.2,1);
}
.upload-progress-label { font-size: 0.7rem; font-weight: 800; color: var(--text-muted); text-align: center; }
.upload-slot-reorder-hint { font-size: .63rem; color: var(--text-muted); font-weight: 600; text-align: center; padding: 4px 0 6px; display: none; flex-shrink: 0; }
.upload-slot-reorder-hint.visible { display: block; animation: fadeInUp .3s ease; }

/* ─── REARRANGE VIEW ─── */
.rearrange-container {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.rearrange-header-row {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 12px;
  flex-shrink: 0;
}
.rearrange-header-icon { font-size: 2rem; flex-shrink: 0; }
.rearrange-header-row h3 { font-size: 1rem; font-weight: 900; color: var(--text); }
.rearrange-header-row p  { font-size: 0.72rem; color: var(--text-muted); font-weight: 600; margin-top: 3px; }

.rearrange-grid {
  display: grid;
  gap: 10px;
  flex: 1;
  min-height: 0;
  align-content: stretch;
}
.rearrange-slot {
  border-radius: var(--radius);
  border: 2px dashed rgba(168,85,247,.25);
  background: linear-gradient(135deg, #fef0f6, #f4efff);
  position: relative; overflow: hidden;
  cursor: grab;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  min-height: 0;
}
.rearrange-slot.filled {
  border-style: solid;
  border-color: var(--pink);
  cursor: grab;
  touch-action: none; /* prevents browser scroll from stealing touchmove before our handlers run */
  user-select: none;
}
.rearrange-slot.filled:hover {
  border-color: var(--pink);
  transform: scale(1.01);
  box-shadow: 0 4px 20px rgba(255,107,157,.2);
}
.rearrange-slot img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  pointer-events: none;
}
.rearrange-slot-num {
  position: absolute; bottom: 4px; left: 4px;
  min-width: 18px; height: 18px; padding: 0 4px;
  font-size: 0.65rem; font-weight: 900; color: rgba(255,255,255,.95);
  background: rgba(0,0,0,.5); border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.rearrange-slot-remove {
  position: absolute; top: 6px; right: 6px;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,50,80,.85); border: none;
  color: white; font-size: 0.7rem; font-weight: 900;
  cursor: pointer; display: none; align-items: center; justify-content: center;
  z-index: 5; transition: background var(--transition);
  -webkit-tap-highlight-color: transparent;
}
.rearrange-slot.filled .rearrange-slot-remove { display: flex; }
.rearrange-slot-remove:hover { background: rgba(220,20,50,1); }
.rearrange-drag-handle {
  position: absolute; top: 4px; left: 4px;
  width: 22px; height: 22px; border-radius: 5px;
  background: rgba(0,0,0,.45); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; cursor: grab;
  opacity: 1;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  z-index: 10;
}
.rearrange-slot.filled:hover .rearrange-drag-handle { opacity: 1; }
@media (pointer: coarse) {
  .rearrange-drag-handle {
    width: 32px; height: 32px; font-size: 16px;
    background: rgba(255,107,157,.85);
    border-radius: 6px; top: 3px; left: 3px;
  }
}
.rearrange-slot.rearrange-dragging {
  opacity: .45; transform: scale(.95);
  border-style: dashed !important; border-color: var(--pink) !important;
  cursor: grabbing;
}
.rearrange-slot.rearrange-drag-over {
  border-color: var(--pink) !important; border-style: solid !important;
  background: rgba(255,107,157,.1);
  transform: scale(1.05);
  box-shadow: 0 0 0 3px rgba(255,107,157,.3);
}
/* Mobile long-press drag active state */
.rearrange-slot-empty {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.rearrange-empty-num {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(168,85,247,.1);
  border: 2px dashed rgba(168,85,247,.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 900; color: var(--text-light);
}
.rearrange-drag-hint {
  text-align: center; font-size: 0.63rem; font-weight: 700;
  color: var(--text-light); letter-spacing: 0.04em;
  padding: 4px 0 6px;
  flex-shrink: 0;
  transition: color .2s;
}
.rearrange-drag-hint.tap-active {
  color: var(--pink);
  font-weight: 800;
}
.rearrange-actions {
  display: flex; gap: 10px; align-items: center;
  flex-shrink: 0;
}
.rearrange-actions .btn-secondary { flex-shrink: 0; }
.rearrange-actions .btn-primary   { flex: 1; }

/* ─── RESULT PAGE ─── */
.result-layout {
  display: grid;
  grid-template-columns: 1fr 230px;
  grid-template-rows: auto 1fr;
  gap: 12px 24px;
  width: 100%; max-width: 960px;
  margin: 0 auto;
  padding: 16px 28px;
  box-sizing: border-box;
  height: 100%;
  align-items: start;
  position: relative; z-index: 1;
}
.result-layout .section-head {
  grid-column: 1 / -1; margin: 0; text-align: left;
}
.result-layout .section-head h2 { font-size: 1.2rem; }
.result-layout .section-head p  { font-size: 0.72rem; margin-top: 2px; }

.strip-frame {
  grid-column: 1; grid-row: 2;
  background: linear-gradient(135deg, #fef0f6, #f4efff);
  border: 2px solid var(--pink-border);
  border-radius: var(--radius-xl); padding: 14px;
  box-shadow: 0 20px 60px rgba(168,85,247,.15);
  display: flex; align-items: center; justify-content: center;
  height: 100%; max-height: calc(100vh - 130px);
  overflow: hidden; box-sizing: border-box;
}
.strip-frame canvas, .strip-frame img {
  max-width: 100%; max-height: calc(100vh - 162px);
  width: auto; height: auto; object-fit: contain;
  border-radius: 4px; display: block;
}

.result-sidebar {
  grid-column: 2; grid-row: 2;
  display: flex; flex-direction: column; gap: 10px;
  padding-top: 4px;
}
.confetti-msg { font-size: 0.78rem; font-weight: 700; color: var(--text-muted); }
.result-actions { display: flex; flex-direction: column; gap: 8px; }
.result-actions .btn { width: 100%; min-width: unset; flex: unset; text-align: center; font-size: 0.82rem; }

.result-rearrange-btn {
  border-color: var(--pink-border) !important;
  color: var(--pink) !important;
  background: var(--pink-dim) !important;
}
.result-rearrange-btn:hover {
  background: rgba(255,107,157,.15) !important;
}

.processing-state {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; height: 100%;
}
.spinner {
  width: 44px; height: 44px;
  border: 3px solid rgba(255,107,157,.15); border-top-color: var(--pink);
  border-radius: 50%; animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.processing-state p { font-size: 0.78rem; font-weight: 800; color: var(--text-muted); letter-spacing: 0.06em; }

/* ─── MISC UTILITIES ─── */
.hidden { display: none !important; }
.fade-in { animation: fadeIn 0.45s ease forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.stagger > * { opacity: 0; animation: fadeIn 0.4s cubic-bezier(.4,0,.2,1) forwards; }
.stagger > *:nth-child(1) { animation-delay: .05s; }
.stagger > *:nth-child(2) { animation-delay: .12s; }
.stagger > *:nth-child(3) { animation-delay: .19s; }
.stagger > *:nth-child(4) { animation-delay: .26s; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.preview-bar { height: 0; }

[data-tooltip] { position: relative; }
[data-tooltip]:hover::after {
  content: attr(data-tooltip); position: absolute;
  bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: var(--text); color: white; font-size: 0.62rem; font-weight: 700;
  white-space: nowrap; padding: 5px 10px; border-radius: 8px;
  pointer-events: none; z-index: 200; box-shadow: var(--shadow-sm);
}

.mobile-thumbs { display: none; }

/* ─── RESPONSIVE / MOBILE ─── */
@media (max-width: 768px) {
  /* ── Scale everything down ~40% by shrinking the rem base ── */
  /* All sizes in the app use rem/em so this proportionally reduces everything.
     16px → 9.6px gives ~40% reduction. index.html, camera.html, result.html
     all share this stylesheet so they stay consistent — no zoom jump on nav. */
  html { font-size: 9.6px !important; }

  .page-wrapper  { padding: 0 16px; }
  .site-header   { padding: 20px 16px 0; }

  .layout-grid   { grid-template-columns: 1fr; max-width: 400px; margin-bottom: 28px; }
  .layout-preview { min-height: 140px; padding: 18px 16px; }

  .camera-layout  { grid-template-columns: 1fr; padding: 0 16px 40px; }
  .camera-left-panel  { display: none; }
  .camera-right-panel { display: none; }
  .mode-toggle-wrap { padding: 10px 16px 0; }
  .mode-btn { padding: 10px 16px; font-size: 0.72rem; }

  .mobile-thumbs { display: flex !important; gap: 7px; justify-content: center; margin-top: 12px; }

  /* upload-slots-grid columns are set by JS per layout config — no override here */
  .upload-mode-container { padding: 16px; overflow-y: auto !important; flex: 1 1 auto !important; }

  .rearrange-container { padding: 16px; }
  .rearrange-actions { flex-direction: column; gap: 10px; padding: 12px 0 8px; margin-top: 4px; }
  .rearrange-actions .btn { width: 100%; min-height: 50px; }
  .rearrange-actions .btn-primary { order: -1; }

  .result-layout { grid-template-columns: 1fr; padding: 12px 16px; gap: 12px; height: auto; overflow-y: auto; }
  .result-layout .section-head { grid-column: 1; }
  .strip-frame { grid-column: 1; grid-row: auto; padding: 12px; max-height: 55vh; }
  .strip-frame canvas, .strip-frame img { max-height: 50vh; }
  .result-sidebar { grid-column: 1; grid-row: auto; }
  .confetti-msg { text-align: center; }
  .result-actions { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .result-actions .btn { min-width: 130px; flex: 1; }

  .camera-viewfinder { border-radius: 14px; }
  .top-bar { padding: 0 16px; }
  .top-bar-back { display: none; }
}

@media (max-width: 400px) {
  .mode-btn    { padding: 9px 12px; font-size: 0.68rem; }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  .layout-card:hover { transform: none; }
  .layout-card:active { transform: scale(0.98); }
  .btn:hover { transform: none; }
  .btn:active { transform: scale(0.97); }
  .upload-slot:hover { transform: none; border-color: rgba(168,85,247,.25); }
  .upload-slot:active { transform: scale(0.98); border-color: var(--pink); }
  .rearrange-slot.filled:hover { transform: none; box-shadow: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   P-BOOTH v4 PATCH — UI/UX FIXES
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Upload & Rearrange: flex column, fill height, no scroll on desktop ── */
#uploadModeView {
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
}
#rearrangeView {
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
}

/* Camera mode: flex column so viewfinder + controls stay inside bounds */
#cameraModeView {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ─── Pause button ─────────────────────────────────────────────── */
.btn-pause {
  background: rgba(255,107,157,.1);
  color: var(--pink);
  border: 2px solid var(--pink-border);
  flex-shrink: 0;
  font-size: 0.82rem;
}
.btn-pause:hover  { background: rgba(255,107,157,.2); }
.btn-pause:active { transform: scale(0.97); }
.btn-pause.is-paused {
  background: linear-gradient(135deg, #f97316, #ea580c);
  color: white;
  border-color: transparent;
  box-shadow: 0 4px 18px rgba(249,115,22,.45);
  animation: pausePulse 1.8s ease-in-out infinite;
}
@keyframes pausePulse {
  0%,100% { box-shadow: 0 4px 18px rgba(249,115,22,.4); }
  50%     { box-shadow: 0 6px 30px rgba(249,115,22,.7); }
}

/* ─── Paused overlay (sits inside .camera-viewfinder) ──────────── */
#pausedOverlay {
  position: absolute; inset: 0; z-index: 14;
  background: rgba(10,0,20,.85);
  backdrop-filter: blur(5px);
  display: none;
  flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px; text-align: center; padding: 20px;
}
#pausedOverlay.visible { display: flex; }

.paused-icon  { font-size: 3rem; animation: float 3s ease-in-out infinite; }
.paused-title {
  font-size: 1.2rem; font-weight: 900; color: white;
  background: linear-gradient(135deg, var(--pink), var(--purple));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.paused-sub {
  font-size: 0.73rem; font-weight: 600;
  color: rgba(255,255,255,.5);
  max-width: 220px; line-height: 1.65;
}
.paused-resume-btn {
  margin-top: 6px; padding: 12px 30px; border-radius: 50px;
  background: linear-gradient(135deg, var(--pink), #e0378a);
  color: white; border: none; font-weight: 800; font-size: 0.84rem;
  cursor: pointer; box-shadow: 0 4px 18px rgba(255,107,157,.4);
  font-family: var(--font-ui); transition: all .2s;
  -webkit-tap-highlight-color: transparent;
}
.paused-resume-btn:hover  { transform: translateY(-2px); box-shadow: 0 6px 28px rgba(255,107,157,.6); }
.paused-resume-btn:active { transform: scale(0.97); }

/* ─── Landscape orientation overlay ────────────────────────────── */
#landscapeOverlay {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(10,0,24,.97);
  backdrop-filter: blur(16px) saturate(1.2);
  display: none;
  flex-direction: column;
  align-items: center; justify-content: center;
  gap: 18px; text-align: center; padding: 40px;
}
#landscapeOverlay.visible { display: flex; }

.ls-phone-wrap {
  position: relative; width: 76px; height: 120px; margin-bottom: 6px;
}
.ls-phone {
  width: 100%; height: 100%;
  border: 3px solid rgba(255,107,157,.6);
  border-radius: 14px;
  background: rgba(255,107,157,.07);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
  animation: lsTilt 2.4s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes lsTilt {
  0%, 25%  { transform: rotate(0deg); }
  60%, 85% { transform: rotate(-90deg); }
  100%     { transform: rotate(0deg); }
}
.ls-arrow {
  position: absolute; top: 50%; right: -26px;
  font-size: 1.3rem; color: var(--pink-light);
  animation: lsArrow 2.4s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes lsArrow {
  0%,25%   { opacity: 0; transform: translateY(-50%) translateX(-5px); }
  60%,85%  { opacity: 1; transform: translateY(-50%) translateX(0); }
  100%     { opacity: 0; transform: translateY(-50%) translateX(-5px); }
}
.ls-title {
  font-size: 1.4rem; font-weight: 900;
  background: linear-gradient(135deg, var(--pink), var(--purple));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ls-sub {
  font-size: 0.82rem; font-weight: 600;
  color: rgba(255,255,255,.52);
  max-width: 260px; line-height: 1.7;
}
.ls-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,107,157,.14);
  border: 1.5px solid rgba(255,107,157,.3);
  color: var(--pink-light); font-size: 0.68rem; font-weight: 800;
  padding: 5px 14px; border-radius: 20px; letter-spacing: .05em;
}

/* ─── Camera controls: keep buttons from overflowing on small screens */
.camera-controls {
  flex-wrap: nowrap;
  gap: 8px;
}
.camera-controls .btn { min-width: 0; }

/* ─── Mobile: make upload & rearrange modes fill screen ─────────── */
@media (max-width: 768px) {
  #uploadModeView  { padding-bottom: 24px; }

  /* Pause button: shorter label on very small screens */
  #pauseBtn { font-size: 0; width: 48px; justify-content: center; }
  #pauseBtn::before { font-size: 1.1rem; content: '⏸'; }
  #pauseBtn.is-paused::before { content: '▶'; }

  .upload-mode-container { padding-bottom: 32px; }
}

/* ─── Shot-progress bar: always visible above controls ─────────── */
.shot-progress { flex-shrink: 0; margin-top: 10px; }

/* ─── Status message: clear minimum height so it's never hidden ─── */
.status-msg { flex-shrink: 0; min-height: 32px; display: flex; align-items: center; justify-content: center; }

/* ═══════════════════════════════════════════════════════════════════
   FULLSCREEN CAMERA OVERLAY — Professional mobile camera UI
   ═══════════════════════════════════════════════════════════════════ */

#fullscreenCameraOverlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: 9999;
  background: #000;
  display: none;
  flex-direction: column;
  overflow: hidden;
  /* GPU compositing layer for smooth animations */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: opacity;
}

#fullscreenCameraOverlay.fsc-open {
  display: flex;
  animation: fscSlideIn 0.3s cubic-bezier(.4,0,.2,1) forwards;
}

@keyframes fscSlideIn {
  from { opacity: 0; transform: scale(1.04); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── VIEWPORT — sized to exact strip photo ratio (1 : 0.6452) ──── */
#fscViewport {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  /* landscape: width : height = 1 : 0.6452 ≈ 1.55:1 */
  /* Fill as much screen as possible while keeping strip ratio */
  width:  min(100vw, calc(100vh / 0.6452));
  height: min(calc(100vw * 0.6452), 100vh);
  overflow: hidden;
  z-index: 1;
  border-radius: 3px;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.72); /* dim everything outside */
}

/* ── VIDEO FEED ────────────────────────────────────────────────── */
#fscVideo,
#fscCaptureCanvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 1;
}
#fscCaptureCanvas { display: none; z-index: 2; }

/* ── TOP CONTROLS ──────────────────────────────────────────────── */
.fsc-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  padding-top: max(14px, env(safe-area-inset-top, 14px));
  background: linear-gradient(to bottom,
    rgba(0,0,0,0.62) 0%,
    rgba(0,0,0,0.18) 70%,
    transparent 100%);
}

.fsc-icon-btn {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(0,0,0,0.38);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  border: 1.5px solid rgba(255,255,255,0.18);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.15s, transform 0.12s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  flex-shrink: 0;
}
.fsc-icon-btn:hover   { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.35); }
.fsc-icon-btn:active  { transform: scale(0.88); }
.fsc-icon-btn svg     { width: 20px; height: 20px; pointer-events: none; }

/* ── SHOT COUNTER (top center) ─────────────────────────────────── */
.fsc-shot-counter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.fsc-shot-dots {
  display: flex;
  gap: 7px;
  align-items: center;
}
.fsc-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.5);
  background: transparent;
  transition: background 0.3s, border-color 0.3s, transform 0.3s;
}
.fsc-dot.captured {
  background: rgba(255,255,255,0.9);
  border-color: white;
  transform: scale(1.1);
}
.fsc-dot.current {
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(255,107,157,0.3);
  animation: fscDotPulse 1.3s ease-in-out infinite;
}
@keyframes fscDotPulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(255,107,157,0.3); }
  50%     { box-shadow: 0 0 0 6px rgba(255,107,157,0); }
}
.fsc-shot-label {
  font-family: var(--font-ui);
  font-size: 0.6rem; font-weight: 800;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.1em; text-transform: uppercase;
}

/* ── FRAME GUIDE — corner brackets at viewport edges ───────────── */
.fsc-frame-guide {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  inset: 0; /* fills the viewport exactly */
}
.fsc-corner {
  position: absolute;
  width: 24px; height: 24px;
  border-color: rgba(255,255,255,0.7);
  border-style: solid;
  border-width: 0;
}
.fsc-tl { top: 0; left: 0;  border-top-width: 2.5px; border-left-width: 2.5px;   border-radius: 3px 0 0 0; }
.fsc-tr { top: 0; right: 0; border-top-width: 2.5px; border-right-width: 2.5px;  border-radius: 0 3px 0 0; }
.fsc-bl { bottom: 0; left: 0;  border-bottom-width: 2.5px; border-left-width: 2.5px;  border-radius: 0 0 0 3px; }
.fsc-br { bottom: 0; right: 0; border-bottom-width: 2.5px; border-right-width: 2.5px; border-radius: 0 0 3px 0; }

/* (vignette handled by #fscViewport box-shadow) */

/* ── COUNTDOWN ─────────────────────────────────────────────────── */
.fsc-countdown {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  gap: 8px;
}
.fsc-countdown.fsc-visible { opacity: 1; }

.fsc-countdown-number {
  font-family: var(--font-ui);
  font-size: clamp(110px, 28vw, 180px);
  font-weight: 900;
  color: white;
  line-height: 1;
  letter-spacing: -0.04em;
  text-shadow:
    0 0 60px rgba(255,255,255,0.4),
    0 4px 40px rgba(0,0,0,0.5);
  animation: fscNumPop 0.35s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes fscNumPop {
  from { transform: scale(1.5); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

.fsc-countdown-sublabel {
  font-size: 0.72rem; font-weight: 800;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}

/* ── WHITE FLASH ───────────────────────────────────────────────── */
.fsc-flash {
  position: absolute;
  inset: 0;
  background: white;
  z-index: 30;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}

/* ── CAPTURED FEEDBACK ─────────────────────────────────────────── */
.fsc-captured-feedback {
  position: absolute;
  inset: 0;
  z-index: 25;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.fsc-captured-feedback.fsc-visible { opacity: 1; }

.fsc-captured-check {
  width: 70px; height: 70px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pink), var(--purple));
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; color: white; line-height: 1;
  box-shadow: 0 8px 36px rgba(255,107,157,0.55);
  animation: fscCheckBounce 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes fscCheckBounce {
  from { transform: scale(0) rotate(-20deg); }
  to   { transform: scale(1) rotate(0deg); }
}

.fsc-captured-text {
  font-family: var(--font-ui);
  font-size: 1.05rem; font-weight: 900;
  color: white;
  text-shadow: 0 2px 16px rgba(0,0,0,0.4);
}
.fsc-captured-sub {
  font-size: 0.7rem; font-weight: 700;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.06em;
}

/* ── BOTTOM CONTROLS ───────────────────────────────────────────── */
.fsc-bottom {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 28px;
  padding-bottom: max(22px, env(safe-area-inset-bottom, 22px));
  background: linear-gradient(to top,
    rgba(0,0,0,0.72) 0%,
    rgba(0,0,0,0.22) 70%,
    transparent 100%);
}

.fsc-bottom-side {
  width: 64px;
  display: flex; align-items: center; justify-content: center;
}

/* ── THUMBNAIL STRIP ───────────────────────────────────────────── */
.fsc-thumb-strip {
  /* Layout set dynamically by fscBuildThumbs() via inline grid styles.
     These are the defaults / fallbacks. */
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  align-content: start;
  /* No max-height cap — all shots must be visible */
  overflow: visible;
}
.fsc-thumb {
  width: 50px; height: 50px;
  border-radius: 9px;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.07);
  transition: border-color 0.3s, transform 0.3s;
  position: relative;
  flex-shrink: 0;
}
.fsc-thumb.fsc-captured {
  border-color: rgba(255,255,255,0.75);
  transform: scale(1.04);
}
.fsc-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  display: block; opacity: 0;
  transition: opacity 0.35s;
}
.fsc-thumb.fsc-captured img { opacity: 1; }
.fsc-thumb-num {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.68rem; font-weight: 800;
  color: rgba(255,255,255,0.35);
  font-family: var(--font-ui);
}
.fsc-thumb.fsc-captured .fsc-thumb-num { display: none; }

/* ── SHUTTER BUTTON ────────────────────────────────────────────── */
.fsc-shutter-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.fsc-shutter {
  position: relative;
  width: 86px; height: 86px;
  border-radius: 50%;
  background: transparent;
  border: none; padding: 0;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  transition: transform 0.1s;
}
.fsc-shutter:active:not(:disabled) { transform: scale(0.91); }
.fsc-shutter:disabled {
  opacity: 0.45; cursor: not-allowed; pointer-events: none;
}
.fsc-shutter-ring {
  width: 86px; height: 86px;
  border-radius: 50%;
  border: 3.5px solid rgba(255,255,255,0.88);
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.15s, box-shadow 0.2s;
}
.fsc-shutter:hover:not(:disabled) .fsc-shutter-ring {
  border-color: white;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.12);
}
.fsc-shutter.fsc-capturing .fsc-shutter-ring {
  border-color: var(--pink);
  box-shadow: 0 0 0 4px rgba(255,107,157,0.25);
}
.fsc-shutter-inner {
  width: 68px; height: 68px;
  border-radius: 50%;
  background: white;
  transition: transform 0.1s, background 0.2s;
  box-shadow: 0 2px 16px rgba(0,0,0,0.32);
}
.fsc-shutter:active:not(:disabled) .fsc-shutter-inner {
  transform: scale(0.87);
  background: rgba(255,255,255,0.88);
}
.fsc-shutter.fsc-capturing .fsc-shutter-inner {
  background: linear-gradient(135deg, var(--pink), var(--purple));
}

/* Ripple ring animation */
.fsc-shutter::after {
  content: '';
  position: absolute;
  width: 86px; height: 86px;
  border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,0.7);
  opacity: 0;
  pointer-events: none;
}
.fsc-shutter.fsc-ripple::after {
  animation: fscRipple 0.55s ease-out forwards;
}
@keyframes fscRipple {
  from { transform: scale(1); opacity: 0.8; }
  to   { transform: scale(1.8); opacity: 0; }
}

/* ── RESPONSIVE TWEAKS ─────────────────────────────────────────── */
@media (max-height: 600px) {
  .fsc-countdown-number { font-size: 100px; }
  .fsc-shutter, .fsc-shutter-ring { width: 74px; height: 74px; }
  .fsc-shutter-inner { width: 58px; height: 58px; }
}
/* Desktop uses same full-fill rule — no override needed */

/* ═══════════════════════════════════════════════════════════════════
   CAPTURE MODE TOGGLE  (Auto / Manual)
   ═══════════════════════════════════════════════════════════════════ */

.fsc-mode-toggle {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-bottom: 10px;
}

.fsc-mode-btn {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1.5px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.55);
  font-size: 0.68rem;
  font-weight: 700;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: all 0.18s;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.fsc-mode-btn:hover {
  background: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.85);
}

.fsc-mode-btn.fsc-mode-active {
  background: linear-gradient(135deg, var(--pink), #c026d3);
  border-color: transparent;
  color: white;
  box-shadow: 0 3px 14px rgba(255,107,157,0.45);
}

/* ── Shutter meta: progress + mode indicator ── */
.fsc-shutter-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin-top: 10px;
}

.fsc-progress-label {
  font-size: 0.82rem;
  font-weight: 800;
  color: white;
  letter-spacing: 0.04em;
  min-height: 1.2em;
  text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}

.fsc-mode-indicator {
  font-size: 0.6rem;
  font-weight: 600;
  color: rgba(255,255,255,0.45);
  text-align: center;
  max-width: 200px;
  line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════════
   STICKER PANEL  (in rearrange view)
   ═══════════════════════════════════════════════════════════════════ */

#stickerPanel {
  margin: 12px 0 6px;
  background: linear-gradient(135deg, rgba(255,107,157,0.07), rgba(168,85,247,0.07));
  border: 1.5px solid rgba(168,85,247,0.18);
  border-radius: 14px;
  padding: 12px;
  overflow: hidden;
}

.sticker-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 10px;
}

.sticker-panel-title {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: 0.02em;
}

.sticker-panel-hint {
  font-size: 0.58rem;
  font-weight: 600;
  color: var(--text-muted);
}

.sticker-cat-tabs {
  display: flex;
  gap: 5px;
  margin-bottom: 9px;
  flex-wrap: wrap;
}

.sticker-cat-btn {
  padding: 4px 10px;
  border-radius: 20px;
  border: 1.5px solid rgba(168,85,247,0.2);
  background: rgba(168,85,247,0.06);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s;
  line-height: 1;
}

.sticker-cat-btn:hover { background: rgba(168,85,247,0.14); }

.sticker-cat-btn.active {
  background: linear-gradient(135deg, rgba(255,107,157,0.18), rgba(168,85,247,0.22));
  border-color: var(--pink);
  box-shadow: 0 2px 8px rgba(255,107,157,0.2);
}

.sticker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
  gap: 5px;
}

.sticker-item-btn {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 9px;
  border: 1.5px solid rgba(168,85,247,0.12);
  background: rgba(255,255,255,0.55);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.12s, box-shadow 0.12s, background 0.12s;
}

.sticker-item-btn:hover {
  transform: scale(1.22);
  background: rgba(255,255,255,0.9);
  box-shadow: 0 4px 14px rgba(168,85,247,0.25);
  border-color: var(--pink);
  z-index: 1;
}

.sticker-item-btn:active { transform: scale(0.94); }

/* ═══════════════════════════════════════════════════════════════════
   STICKER ELEMENTS  (on the preview layer)
   ═══════════════════════════════════════════════════════════════════ */

.sticker-el {
  z-index: 10;
}

.sticker-el .sticker-body {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}

/* Selection ring */
.sticker-el.sticker-selected .sticker-body::before {
  content: '';
  position: absolute;
  inset: -4px;
  border: 2px dashed rgba(255,107,157,0.85);
  border-radius: 10px;
  pointer-events: none;
  animation: stickerSelRing 1.2s linear infinite;
}

@keyframes stickerSelRing {
  to { border-color: rgba(168,85,247,0.85); }
}

/* Delete button */
.sticker-del-btn {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.8);
  background: linear-gradient(135deg, #f43f5e, #dc2626);
  color: white;
  font-size: 9px;
  font-weight: 900;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(244,63,94,0.5);
  z-index: 20;
}

.sticker-selected .sticker-del-btn { display: flex; }

/* Resize handle — bottom-right */
.sticker-resize-handle {
  position: absolute;
  bottom: -10px;
  right: -10px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: white;
  border: 2px solid var(--pink);
  cursor: se-resize;
  display: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  z-index: 20;
  touch-action: none;
}

.sticker-resize-handle::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-right: 2px solid var(--pink);
  border-bottom: 2px solid var(--pink);
}

.sticker-selected .sticker-resize-handle { display: block; }

/* Rotate handle — bottom-left */
.sticker-rotate-handle {
  position: absolute;
  bottom: -10px;
  left: -10px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: white;
  border: 2px solid #a855f7;
  cursor: grab;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #a855f7;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  z-index: 20;
  touch-action: none;
  user-select: none;
}

.sticker-selected .sticker-rotate-handle { display: flex; }
.sticker-rotate-handle:active { cursor: grabbing; }


/* ═══════════════════════════════════════════════════════════════════
   MOBILE OPTIMIZE — bottom sheet customize + layout fixes
   ═══════════════════════════════════════════════════════════════════ */

/* ── Show customize button on mobile, keep panels on desktop ── */
@media (max-width: 768px) {
  .mobile-customize-btn { display: inline-flex !important; padding: 14px 16px !important; }
}

/* ── Mobile bottom sheet overlay backdrop ── */
.mobile-sheet-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(10, 0, 24, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  align-items: flex-end;
  justify-content: center;
  animation: sheetBackdropIn 0.2s ease;
}
@keyframes sheetBackdropIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.mobile-sheet-overlay.open { display: flex; }

/* ── The sheet itself ── */
.mobile-sheet {
  width: 100%;
  max-width: 520px;
  background: var(--surface);
  border-radius: 26px 26px 0 0;
  padding: 0 0 env(safe-area-inset-bottom, 16px);
  box-shadow: 0 -8px 48px rgba(168,85,247,0.18);
  animation: sheetSlideUp 0.28s cubic-bezier(0.34,1.08,0.64,1);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@keyframes sheetSlideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* ── Sheet drag handle ── */
.mobile-sheet-handle {
  width: 36px; height: 4px;
  border-radius: 2px;
  background: var(--border);
  margin: 12px auto 0;
  flex-shrink: 0;
}

/* ── Sheet header ── */
.mobile-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px 14px;
  border-bottom: 1.5px solid var(--border);
  flex-shrink: 0;
}
.mobile-sheet-title {
  font-size: 0.95rem;
  font-weight: 900;
  color: var(--text);
}
.mobile-sheet-close {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: none;
  background: var(--pink-dim);
  color: var(--pink);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

/* ── Sheet scrollable body ── */
.mobile-sheet-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-height: 0;
}

/* ── Section label ── */
.ms-section { display: flex; flex-direction: column; gap: 8px; }
.ms-label {
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

/* ── Color swatches in sheet ── */
.ms-color-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
}
.ms-swatch {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2.5px solid transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s, border-color 0.15s;
  outline: none;
  touch-action: manipulation;
}
.ms-swatch:hover { transform: scale(1.15); }
.ms-swatch.selected {
  border-color: var(--pink) !important;
  transform: scale(1.18);
  box-shadow: 0 0 0 2.5px rgba(255,107,157,.3);
}
.ms-swatch[data-color="#ffffff"] { border-color: #ddd; }
.ms-color-name {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-muted);
  text-align: right;
}

/* ── Input ── */
.ms-input {
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: rgba(255,255,255,.7);
  font-size: 0.85rem;
  font-family: var(--font-ui);
  color: var(--text);
  outline: none;
  box-sizing: border-box;
  transition: border-color .2s;
  -webkit-appearance: none;
}
.ms-input:focus { border-color: var(--pink); }

/* ── Quick text buttons ── */
.ms-quick-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.ms-quick-btn {
  padding: 5px 12px;
  border-radius: 20px;
  border: 1.5px solid rgba(255,107,157,.3);
  background: rgba(255,107,157,.07);
  color: var(--pink);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-ui);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background .15s;
}
.ms-quick-btn:active { background: rgba(255,107,157,.18); }

/* ── Divider ── */
.ms-divider {
  border: none;
  border-top: 1px dashed rgba(168,85,247,.15);
  margin: 8px 0;
}

/* ── Mobile layout improvements for camera page ── */
@media (max-width: 768px) {

  /* Make the mode toggle more compact */
  .mode-toggle-wrap { padding: 8px 16px 0; }

  /* Ensure camera main area fills well */
  .camera-main { min-height: 0; }

  /* Taller viewfinder on mobile — fills more screen */
  .camera-viewfinder {
    flex: 1 1 0;
    min-height: 200px;
  }

  /* Status message smaller on mobile */
  .status-msg { font-size: 0.75rem; padding: 6px 12px; }

  /* Camera controls row — make sure all buttons fit */
  .camera-controls {
    flex-wrap: nowrap;
    gap: 8px;
    padding: 8px 12px;
  }
  .camera-controls .btn-lg {
    padding: 12px 14px;
    font-size: 0.78rem;
  }

  /* Shot progress compact */
  .shot-progress { padding: 6px 12px 0; }

  /* Top bar: hide steps text labels on very small screens */
  @media (max-width: 380px) {
    .top-bar-steps span { display: none; }
    .top-bar-steps .step-num { font-size: 0.55rem; }
  }
}

/* ── PWA safe-area support (notch / home bar) ── */
@supports (padding: max(0px)) {
  .top-bar {
    padding-top: max(0px, env(safe-area-inset-top));
  }
  .fsc-bottom {
    padding-bottom: max(22px, env(safe-area-inset-bottom, 22px));
  }
  .mobile-sheet {
    padding-bottom: max(20px, env(safe-area-inset-bottom, 16px));
  }
}

/* ── Touch action improvements for interactive elements ── */
.fsc-shutter,
.fsc-icon-btn,
.btn,
.ms-swatch,
.sidebar-swatch,
.layout-card {
  touch-action: manipulation;
}

/* Shutter: slightly larger tap target on mobile */
@media (max-width: 768px) {
  .fsc-shutter { width: 90px; height: 90px; }
  .fsc-shutter-ring { width: 90px; height: 90px; }
  .fsc-shutter-inner { width: 72px; height: 72px; }
  .fsc-shutter::after { width: 90px; height: 90px; }
}

/* ── Landscape overlay must NOT cover fsc overlay ── */
/* (z-index fix: fsc overlay is 9999, landscape is 99999 — we keep
   landscape higher but the JS now hides it when fsc is active) */


/* ═══════════════════════════════════════════════════════════════════
   MOBILE SCALE & FIT — ensure all content is visible on small screens
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── html/body: no horizontal scroll ── */
  html, body { max-width: 100vw; overflow-x: hidden; }

  /* ── Main camera layout: full-height flex column ── */
  .camera-layout {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 10px 16px !important;
    gap: 0 !important;
    height: auto !important;
    min-height: 0;
  }

  /* ── Center column fills available space ── */
  .camera-main {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
  }

  /* ── Mode toggle: compact pill, no overflow ── */
  .mode-toggle-wrap {
    padding: 8px 10px 0 !important;
  }
  .mode-toggle {
    width: 100%;
    justify-content: stretch;
  }
  .mode-btn {
    flex: 1;
    text-align: center;
    padding: 9px 10px !important;
    font-size: 0.72rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ── Viewfinder: 4:3 box, max height so controls are always visible ── */
  #cameraModeView {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }
  .camera-viewfinder {
    flex: 0 0 auto;
    width: 100% !important;
    aspect-ratio: 4/3 !important;
    max-height: 52vw; /* prevents viewfinder pushing controls off-screen */
    border-radius: 12px !important;
    overflow: hidden;
  }

  /* ── Shot progress bar ── */
  .shot-progress {
    padding: 6px 8px 0 !important;
    margin-top: 6px !important;
  }
  .shot-bar-track { height: 5px; border-radius: 3px; }
  .shot-labels { font-size: 0.68rem; margin-top: 3px; }

  /* ── Status message ── */
  .status-msg {
    font-size: 0.7rem !important;
    padding: 4px 8px !important;
    min-height: 26px !important;
  }

  /* ── Mobile thumbnails ── */
  .mobile-thumbs {
    margin-top: 6px !important;
  }
  .mobile-thumbs img {
    width: 44px !important;
    height: 44px !important;
    border-radius: 7px !important;
  }

  /* ── Camera controls row ── */
  .camera-controls {
    flex-wrap: nowrap !important;
    gap: 6px !important;
    padding: 6px 0 0 !important;
    margin-top: 6px !important;
    align-items: stretch;
  }
  .camera-controls .btn {
    padding: 11px 10px !important;
    font-size: 0.75rem !important;
    min-width: 0;
    flex-shrink: 1;
  }
  .camera-controls #startBtn {
    flex: 1 1 auto !important;
    min-width: 0;
  }
  /* Customize and layout buttons: fixed small size */
  .mobile-customize-btn,
  .camera-controls a.btn {
    flex: 0 0 44px !important;
    width: 44px !important;
    padding: 11px 0 !important;
    font-size: 1rem !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  /* ── Upload slots ── */
  .upload-mode-container { padding: 10px 8px !important; }
  /* Force 1fr columns on mobile so slots fill width (overrides JS inline auto) */
  .upload-slots-grid                    { grid-template-columns: repeat(1, 1fr) !important; }
  .upload-slots-grid[data-cols="2"]     { grid-template-columns: repeat(2, 1fr) !important; }
  .upload-slot { min-height: unset !important; font-size: 0.72rem !important; height: auto !important; width: 100% !important; aspect-ratio: 1 / 0.6452 !important; }

  /* ── Rearrange ── */
  .rearrange-container { padding: 10px 8px !important; }
  .rearrange-grid { gap: 8px !important; }
  .rearrange-slot img { object-fit: cover !important; }
  .rearrange-actions { flex-direction: column !important; gap: 10px !important; padding: 12px 0 10px !important; }
  .rearrange-actions .btn { font-size: 0.78rem !important; padding: 12px 14px !important; width: 100% !important; min-height: 50px !important; }

  /* ── Layout selection page ── */
  .layout-grid { gap: 12px !important; }
  .layout-preview { min-height: 200px !important; padding: 20px 16px !important; }
  .layout-preview svg { max-height: 170px !important; }
  .layout-info { padding: 10px 14px 14px !important; }
  .layout-info .layout-name { font-size: 0.88rem !important; }
  .layout-info .layout-desc { font-size: 0.68rem !important; }

  /* ── Site header ── */
  .site-header { padding: 16px 12px 0 !important; gap: 5px !important; }
  .site-header h1 { font-size: 2rem !important; }
  .site-header .subtitle { font-size: 0.78rem !important; }
  .site-header .kr-label { font-size: 0.65rem !important; }
  .header-rule { margin: 12px 0 0 !important; }

  /* ── Steps indicator ── */
  .steps { padding: 12px 0 !important; font-size: 0.65rem !important; gap: 5px !important; }
  .steps .step-num { width: 20px !important; height: 20px !important; font-size: 0.55rem !important; }

  /* ── Top nav ── */
  .top-bar { padding: 0 10px !important; height: 46px !important; }
  .top-bar-logo { font-size: 1.1rem !important; }
  .top-bar-steps { font-size: 0.6rem !important; gap: 4px !important; }
  .top-bar-steps .divider { width: 12px !important; }

  /* ── Ready state overlay (inside viewfinder) ── */
  .ready-state { gap: 8px !important; min-height: unset !important; padding: 12px !important; }
  .ready-state .big-icon { font-size: 2.2rem !important; }
  .ready-state h2 { font-size: 1rem !important; }
  .ready-state p  { font-size: 0.7rem !important; }
  .pose-count-badge { font-size: 0.62rem !important; padding: 4px 10px !important; }

  /* ── Section heading ── */
  .section-head { margin: 14px 0 18px !important; }
  .section-head h2 { font-size: 1.15rem !important; }
  .section-head p  { font-size: 0.72rem !important; }
  .page-wrapper { padding: 0 12px !important; }

  /* ── Sticker panel ── */
  #stickerPanel { padding: 8px !important; margin: 8px 0 4px !important; }
  .sticker-grid { grid-template-columns: repeat(6, 1fr) !important; gap: 4px !important; }
  .sticker-btn  { font-size: 1.3rem !important; padding: 4px !important; }
}

/* Very small phones (≤ 380px) */
@media (max-width: 380px) {
  .top-bar-steps span { display: none; }
  .camera-viewfinder { max-height: 48vw; }
  .mode-btn { font-size: 0.65rem !important; padding: 8px 7px !important; }
  .camera-controls .btn { padding: 10px 8px !important; font-size: 0.7rem !important; }
}

/* ── Fullscreen camera: scale shutter and controls for small screens ── */
@media (max-width: 400px) {
  .fsc-shutter, .fsc-shutter-ring { width: 78px !important; height: 78px !important; }
  .fsc-shutter-inner { width: 62px !important; height: 62px !important; }
  .fsc-bottom { padding: 14px 16px !important; padding-bottom: max(14px, env(safe-area-inset-bottom, 14px)) !important; }
  .fsc-icon-btn { width: 40px !important; height: 40px !important; }
  .fsc-mode-btn { padding: 5px 10px !important; font-size: 0.62rem !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   LANDSCAPE-ONLY MOBILE — strict landscape enforcement + fit-to-screen
   Targets touch devices in landscape orientation with short screens
   ═══════════════════════════════════════════════════════════════════ */

/* ── Landscape overlay for ALL pages ── */
.landscape-gate {
  position: fixed; inset: 0; z-index: 999999;
  background: rgba(10,0,24,.97);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px);
  display: none;
  flex-direction: column;
  align-items: center; justify-content: center;
  gap: 16px; text-align: center; padding: 30px;
}
.landscape-gate.visible { display: flex; }
.lg-phone-wrap { position: relative; width: 72px; height: 112px; margin-bottom: 4px; }
.lg-phone {
  width: 100%; height: 100%;
  border: 3px solid rgba(255,107,157,.6);
  border-radius: 14px;
  background: rgba(255,107,157,.07);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem;
  animation: lgTilt 2.4s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes lgTilt {
  0%,25%  { transform: rotate(0deg); }
  60%,85% { transform: rotate(-90deg); }
  100%    { transform: rotate(0deg); }
}
.lg-arrow {
  position: absolute; top: 50%; right: -28px;
  font-size: 1.3rem; color: #ffb3ce;
  animation: lgArrow 2.4s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes lgArrow {
  0%,25%   { opacity: 0; transform: translateY(-50%) translateX(-5px); }
  60%,85%  { opacity: 1; transform: translateY(-50%) translateX(0); }
  100%     { opacity: 0; transform: translateY(-50%) translateX(-5px); }
}
.lg-title {
  font-size: 1.35rem; font-weight: 900;
  background: linear-gradient(135deg, var(--pink), var(--purple));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.lg-sub {
  font-size: 0.8rem; font-weight: 600;
  color: rgba(255,255,255,.5); max-width: 250px; line-height: 1.7;
}
.lg-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,107,157,.14); border: 1.5px solid rgba(255,107,157,.3);
  color: #ffb3ce; font-size: 0.68rem; font-weight: 800;
  padding: 5px 14px; border-radius: 20px; letter-spacing: .05em;
  font-family: var(--font-ui);
}

/* ── Mobile landscape: entire layout must fit viewport height ── */
@media (orientation: landscape) and (max-height: 600px) and (pointer: coarse) {

  /* html/body: locked to viewport, no scroll */
  html, body {
    height: 100%;
    max-height: 100vh;
    overflow: hidden !important;
  }

  /* ── INDEX PAGE: compact layout grid ── */
  .site-header {
    padding: 8px 12px 0 !important;
    gap: 3px !important;
  }
  .site-header h1 { font-size: 1.4rem !important; }
  .site-header .eyebrow { font-size: 0.55rem !important; padding: 3px 10px !important; }
  .site-header .subtitle,
  .site-header .kr-label { display: none !important; }
  .header-rule { margin: 6px 0 0 !important; }
  .steps { padding: 6px 0 !important; font-size: 0.6rem !important; gap: 4px !important; }
  .steps .step-num { width: 18px !important; height: 18px !important; font-size: 0.52rem !important; }
  .section-head { margin: 6px 0 10px !important; }
  .section-head h2 { font-size: 1rem !important; }
  .section-head p  { display: none !important; }
  .layout-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
    max-width: 100% !important;
  }
  .page-wrapper { padding: 0 10px !important; }
  .layout-preview { min-height: 160px !important; padding: 14px 10px !important; }
  .layout-preview svg { max-height: 130px !important; }
  .layout-info { padding: 6px 10px 8px !important; }
  .layout-info .layout-name { font-size: 0.78rem !important; }
  .layout-info .layout-desc { font-size: 0.6rem !important; }
  .layout-info .layout-meta { display: none !important; }

  /* ── CAMERA PAGE: 2-column landscape layout ── */
  body.camera-page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
  }

  body.camera-page .top-bar {
    height: 40px !important;
    padding: 0 10px !important;
    flex-shrink: 0;
  }
  body.camera-page .top-bar-logo { font-size: 1rem !important; }
  body.camera-page .top-bar-steps { font-size: 0.55rem !important; gap: 3px !important; }
  body.camera-page .top-bar-steps span { display: none !important; }
  body.camera-page .top-bar-steps .step-num { width: 18px !important; height: 18px !important; }

  body.camera-page .mode-toggle-wrap {
    padding: 10px 8px 8px !important;
    flex-shrink: 0;
    justify-content: center;
  }
  body.camera-page .mode-toggle { width: fit-content; }
  body.camera-page .mode-btn {
    padding: 8px 18px !important;
    font-size: 0.75rem !important;
  }

  body.camera-page main {
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }

  /* 2-column: camera main | right preview panel */
  body.camera-page .camera-layout {
    display: flex !important;
    flex-direction: row !important;
    height: 100% !important;
    padding: 4px 6px !important;
    gap: 6px !important;
  }

  body.camera-page .camera-left-panel  { display: none !important; }

  /* Show right panel as visible strip preview */
  body.camera-page .camera-right-panel {
    display: flex !important;
    flex-direction: column;
    width: 200px !important;
    min-width: 180px !important;
    flex-shrink: 0;
    overflow: hidden;
  }
  body.camera-page .camera-right-panel .sidebar-panel {
    flex: 1;
    padding: 8px !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  body.camera-page .camera-right-panel .sidebar-panel h3 {
    font-size: 0.65rem !important;
    margin-bottom: 4px !important;
    flex-shrink: 0;
  }
  body.camera-page .camera-right-panel .live-preview-wrap {
    flex: 1;
    min-height: 0;
    align-items: flex-start !important;
  }
  body.camera-page .camera-right-panel .live-preview-wrap canvas {
    width: 100% !important;
    height: auto !important;
    max-height: 100% !important;
    display: block !important;
  }

  body.camera-page .camera-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
  }

  /* Camera mode view: viewfinder + slim controls */
  body.camera-page #cameraModeView {
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }
  body.camera-page .camera-viewfinder {
    flex: 1 !important;
    width: 100% !important;
    aspect-ratio: unset !important;
    max-height: none !important;
    height: auto !important;
  }
  body.camera-page .shot-progress {
    padding: 2px 6px 0 !important;
    margin-top: 2px !important;
    flex-shrink: 0;
  }
  body.camera-page .shot-bar-track { height: 3px !important; border-radius: 2px !important; }
  body.camera-page .shot-labels { font-size: 0.58rem !important; margin-top: 1px !important; }
  body.camera-page .status-msg {
    font-size: 0.62rem !important;
    padding: 2px 6px !important;
    min-height: 20px !important;
    flex-shrink: 0;
  }
  body.camera-page .mobile-thumbs {
    margin-top: 3px !important;
    gap: 4px !important;
  }
  body.camera-page .mobile-thumbs img {
    width: 32px !important;
    height: 32px !important;
    border-radius: 5px !important;
  }
  body.camera-page .camera-controls {
    padding: 3px 4px 0 !important;
    gap: 5px !important;
    flex-wrap: nowrap !important;
    flex-shrink: 0;
  }
  body.camera-page .camera-controls .btn-lg {
    padding: 8px 10px !important;
    font-size: 0.68rem !important;
  }
  body.camera-page .mobile-customize-btn,
  body.camera-page .camera-controls a.btn {
    flex: 0 0 36px !important;
    width: 36px !important;
    padding: 8px 0 !important;
    font-size: 0.9rem !important;
  }

  /* Upload mode: grid with more columns, compact */
  body.camera-page #uploadModeView {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  body.camera-page .upload-mode-container { padding: 6px !important; }
  body.camera-page .upload-header { margin-bottom: 8px !important; gap: 8px !important; }
  body.camera-page .upload-header-icon { font-size: 1.4rem !important; }
  body.camera-page .upload-header h3 { font-size: 0.82rem !important; }
  body.camera-page .upload-header p  { font-size: 0.62rem !important; }
  body.camera-page .upload-slots-grid {
    /* JS controls cols/rows — desktop override removed so strip layout is respected */
    gap: 4px !important;
  }
  body.camera-page .upload-slot { min-height: unset !important; aspect-ratio: 1 / 0.6452 !important; font-size: 0.62rem !important; }
  body.camera-page .upload-bulk-wrap { margin-bottom: 6px !important; }
  body.camera-page .upload-bulk-btn { font-size: 0.6rem !important; padding: 4px 8px !important; top: 12px !important; right: 12px !important; }
  body.camera-page #uploadContinueBtn { margin-top: 8px !important; padding: 10px !important; font-size: 0.75rem !important; }

  /* Rearrange mode: compact grid */
  body.camera-page #rearrangeView {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  body.camera-page .rearrange-container { padding: 6px !important; }
  body.camera-page .rearrange-header-row { margin-bottom: 8px !important; gap: 8px !important; }
  body.camera-page .rearrange-header-icon { font-size: 1.4rem !important; }
  body.camera-page .rearrange-container h3 { font-size: 0.82rem !important; }
  body.camera-page .rearrange-container p  { font-size: 0.62rem !important; }
  body.camera-page .rearrange-grid {
    gap: 6px !important;
  }
  body.camera-page .rearrange-slot img { object-fit: cover !important; }
  body.camera-page .rearrange-drag-hint { font-size: 0.58rem !important; padding: 4px 0 !important; }
  body.camera-page .rearrange-actions {
    gap: 8px !important;
    padding: 6px 0 !important;
    flex-direction: row !important;
  }
  body.camera-page .rearrange-actions .btn {
    width: auto !important;
    flex: 1 !important;
    padding: 8px 14px !important;
    font-size: 0.7rem !important;
    min-height: 44px !important;
  }

  /* Sticker panel compact */
  body.camera-page #stickerPanel { padding: 6px !important; margin: 4px 0 !important; }
  body.camera-page .sticker-grid { grid-template-columns: repeat(8, 1fr) !important; gap: 3px !important; }
  body.camera-page .sticker-btn  { font-size: 1.1rem !important; padding: 3px !important; }

  /* ── RESULT PAGE ── */
  body.result-page main {
    overflow-y: auto !important;
  }
  .result-layout {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto 1fr auto !important;
    gap: 8px !important;
    padding: 6px 10px !important;
    height: 100% !important;
    overflow: hidden !important;
    align-items: start;
  }
  .result-layout .section-head {
    grid-column: 1 / -1;
    margin: 0 0 4px !important;
  }
  .result-layout .section-head h2 { font-size: 0.95rem !important; }
  .result-layout .section-head p  { font-size: 0.65rem !important; margin-top: 2px !important; }
  .strip-frame {
    grid-column: 1;
    grid-row: 2;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: calc(100vh - 40px - 50px - 20px) !important;
  }
  .strip-frame canvas,
  .strip-frame img {
    max-height: calc(100vh - 40px - 50px - 20px) !important;
    max-width: 100% !important;
    width: auto !important;
  }
  .result-sidebar {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 150px;
    max-width: 180px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-height: calc(100vh - 50px - 20px);
  }
  /* Sticker panel: limit its height so it doesn't push buttons off screen */
  .sticker-panel-wrap {
    flex-shrink: 1;
    min-height: 0;
    overflow-y: auto;
  }
  /* Action buttons: never shrink, always fully visible */
  .result-actions {
    flex-shrink: 0 !important;
  }
  .confetti-msg { font-size: 0.68rem !important; }
  .result-actions {
    flex-direction: column !important;
    gap: 5px !important;
  }
  .result-actions .btn {
    padding: 8px 12px !important;
    font-size: 0.68rem !important;
    min-width: unset !important;
    flex: none !important;
    width: 100% !important;
  }
}

/* ── Touch-friendly upload slots ── */
@media (pointer: coarse) {
  /* Show tap-to-upload hint instead of drag hint on touch devices */
  .upload-slot-reorder-hint { display: none !important; }
  .touch-reorder-hint { display: block !important; }

  /* Make upload slots easier to tap */
  .upload-slot { min-height: unset; cursor: pointer; }

  /* Keep drag handle visible on mobile — style it pink and big for easy grabbing */
  .drag-handle {
    display: flex !important;
    width: 32px !important; height: 32px !important;
    font-size: 16px !important;
    background: rgba(255,107,157,.85) !important;
    border-radius: 6px !important;
    top: 3px !important; left: 3px !important;
  }
  .upload-slot:not(.filled) .drag-handle { display: none !important; }

  /* Prevent browser from stealing touchmove for scroll on filled slots */
  .upload-slot.filled { touch-action: none; user-select: none; }
}


/* ── Sticker panel on result page ── */
.sticker-panel-wrap {
  background: rgba(168,85,247,.05);
  border: 1.5px solid rgba(168,85,247,.15);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-bottom: 8px;
}
.sticker-panel-wrap .sticker-panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.sticker-panel-wrap .sticker-panel-title {
  font-size: 0.78rem;
  font-weight: 900;
  color: var(--text);
}
.sticker-panel-wrap .sticker-panel-hint {
  font-size: 0.62rem;
  color: var(--text-muted);
  font-weight: 600;
}
.sticker-panel-wrap .sticker-cat-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.sticker-panel-wrap .sticker-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}

/* Result page: strip-frame relative for sticker overlay */
#stripFrame {
  position: relative;
}
#stripFrame #stickerLayer {
  position: absolute;
  top: 0; left: 0;
  pointer-events: auto;
  overflow: hidden;
}

/* Result sidebar layout: sticker panel + actions in a column */
.result-sidebar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Landscape mobile: result sidebar sticker panel compact */
@media (orientation: landscape) and (max-height: 600px) and (pointer: coarse) {
  .sticker-panel-wrap { padding: 6px 8px !important; margin-bottom: 4px !important; }
  .sticker-panel-wrap .sticker-panel-hint { display: none !important; }
  .sticker-panel-wrap .sticker-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 3px !important; }
  .sticker-item-btn { font-size: 1.1rem !important; padding: 3px !important; }
  .sticker-cat-btn  { padding: 3px 7px !important; font-size: 0.65rem !important; }
}


/* ═══════════════════════════════════════════════════════════════════
   PORTRAIT MOBILE — Full portrait support, dismissable gates
   Supports 320px–480px screen widths (common phone portrait sizes)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Landscape gate: soft warning with dismiss button ── */
.landscape-gate-actions {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.landscape-gate-dismiss {
  padding: 11px 26px;
  border-radius: 50px;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-ui);
  letter-spacing: 0.02em;
  transition: background 0.18s, border-color 0.18s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.landscape-gate-dismiss:hover  { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.45); }
.landscape-gate-dismiss:active { background: rgba(255, 255, 255, 0.25); transform: scale(0.97); }

/* Camera page overlay dismiss uses same class */
#landscapeOverlay .landscape-gate-dismiss { margin-top: 4px; }


/* ═══════════════════════════════════════════════════════════════════
   PORTRAIT RESULT PAGE — single-column scrollable layout
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) and (orientation: portrait) {

  /* Allow full-page scroll in portrait */
  body.result-page {
    min-height: 100vh;
    overflow-y: auto !important;
    height: auto !important;
  }
  body.result-page main {
    overflow: visible !important;
    flex: none !important;
    min-height: 0 !important;
    display: block !important;
    height: auto !important;
  }

  /* Single-column result layout, scrollable */
  .result-layout {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    overflow: visible !important;
    padding: 12px 14px 32px !important;
    gap: 14px !important;
    max-width: 100% !important;
  }

  /* Strip fills most of the width, height-constrained to not dominate */
  .strip-frame {
    grid-column: unset !important;
    grid-row: unset !important;
    max-height: none !important;
    width: 100% !important;
    padding: 12px !important;
    border-radius: var(--radius-lg) !important;
    /* Center the canvas inside */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
  .strip-frame canvas,
  .strip-frame img {
    max-width: 100% !important;
    max-height: 50vh !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* Sidebar stacks below strip */
  .result-sidebar {
    grid-column: unset !important;
    grid-row: unset !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    overflow: visible !important;
    min-width: unset !important;
    max-width: unset !important;
    width: 100% !important;
  }

  /* Action buttons: 2-up grid on portrait */
  .result-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  /* Download button spans full width — most important action */
  .result-actions #downloadBtn {
    grid-column: 1 / -1 !important;
    min-height: 52px !important;
    font-size: 0.9rem !important;
  }
  .result-actions .btn {
    min-height: 46px !important;
    font-size: 0.78rem !important;
    padding: 12px 14px !important;
    text-align: center !important;
    width: auto !important;
    min-width: unset !important;
    flex: unset !important;
  }

  /* Confetti message */
  .confetti-msg { text-align: center !important; font-size: 0.8rem !important; }

  /* Sticker panel compact */
  #stickerPanel { margin: 4px 0 0 !important; }
  .sticker-panel-wrap { padding: 10px !important; }
  .sticker-grid { grid-template-columns: repeat(8, 1fr) !important; gap: 4px !important; }
  .sticker-item-btn { font-size: 1.25rem !important; }
}


/* ═══════════════════════════════════════════════════════════════════
   PORTRAIT CAMERA PAGE — viewfinder + controls fit in portrait
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) and (orientation: portrait) {

  body.camera-page {
    min-height: 100vh;
    overflow-y: auto !important;
    height: auto !important;
  }
  body.camera-page main {
    overflow: visible !important;
    flex: none !important;
    height: auto !important;
  }

  /* Camera layout: single column, auto height */
  .camera-layout {
    height: auto !important;
    overflow: visible !important;
  }

  /* Viewfinder: natural 4:3 aspect, no height cap */
  .camera-viewfinder {
    flex: none !important;
    aspect-ratio: 4 / 3 !important;
    max-height: none !important;
    width: 100% !important;
  }

  /* Camera mode view: natural column flow */
  #cameraModeView {
    overflow: visible !important;
    flex: none !important;
  }

  /* Upload / rearrange: always scrollable for upload, no scroll for rearrange */
  #uploadModeView {
    overflow-y: auto !important;
    max-height: calc(100vh - 110px) !important;
    -webkit-overflow-scrolling: touch !important;
  }
  #rearrangeView {
    overflow: hidden !important;
    max-height: calc(100vh - 110px) !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   PORTRAIT INDEX PAGE — layout grid in portrait
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) and (orientation: portrait) {

  /* Single-column layout grid, well sized */
  .layout-grid {
    grid-template-columns: 1fr !important;
    max-width: 440px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Taller preview for portrait cards */
  .layout-preview {
    min-height: 170px !important;
    padding: 20px 16px !important;
  }
  .layout-preview svg { max-height: 130px !important; }
}


/* ═══════════════════════════════════════════════════════════════════
   UNIVERSAL TOUCH TARGET IMPROVEMENTS (all mobile)
   ═══════════════════════════════════════════════════════════════════ */

@media (pointer: coarse) {

  /* All buttons: 44px minimum touch target */
  .btn {
    min-height: 44px !important;
    touch-action: manipulation;
  }
  .btn-lg {
    min-height: 50px !important;
    padding: 13px 24px !important;
  }

  /* Mode toggle buttons */
  .mode-btn { min-height: 44px !important; }

  /* Layout cards: active state */
  .layout-card { -webkit-tap-highlight-color: transparent; }

  /* Sidebar swatches: easier to tap */
  .sidebar-swatch, .ms-swatch {
    min-width: 32px !important;
    min-height: 32px !important;
  }

  /* Sticker buttons */
  .sticker-item-btn {
    min-height: 36px !important;
    min-width: 36px !important;
  }
  .sticker-cat-btn {
    min-height: 36px !important;
    padding: 6px 14px !important;
  }

  /* Top bar back button */
  .top-bar-back {
    min-height: 36px !important;
    padding: 8px 14px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* Upload bulk button */
  .upload-bulk-btn { min-height: unset !important; }

  /* Continue / build strip buttons */
  #uploadContinueBtn,
  #buildStripBtn {
    min-height: 50px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   SMALL PHONE PORTRAIT  (≤ 390px)
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 390px) and (orientation: portrait) {

  /* Tighter header */
  .site-header { padding: 14px 12px 0 !important; gap: 4px !important; }
  .site-header h1 { font-size: 1.75rem !important; }
  .site-header .subtitle { font-size: 0.72rem !important; }
  .site-header .kr-label { font-size: 0.62rem !important; }
  .header-rule { margin: 10px 0 0 !important; }

  /* Compact steps */
  .steps { font-size: 0.6rem !important; padding: 10px 0 !important; gap: 4px !important; }
  .steps .step-num { width: 20px !important; height: 20px !important; font-size: 0.52rem !important; }

  /* Section head */
  .section-head { margin: 12px 0 16px !important; }
  .section-head h2 { font-size: 1.05rem !important; }

  /* Mode toggle */
  .mode-btn { padding: 9px 8px !important; font-size: 0.68rem !important; }

  /* Camera controls cramped */
  .camera-controls { gap: 5px !important; }
  .camera-controls .btn { font-size: 0.72rem !important; padding: 10px 8px !important; }

  /* Result page action buttons */
  .result-actions { grid-template-columns: 1fr !important; }
  .result-actions .btn { grid-column: 1 / -1 !important; }

  /* Top bar */
  .top-bar-logo { font-size: 1rem !important; }
}


/* ═══════════════════════════════════════════════════════════════════
   BOTTOM CONTROL DOCK — camera page portrait
   Pins controls at bottom so they're always reachable with one hand
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) and (orientation: portrait) {

  /* Pin camera-controls to bottom of viewport */
  .camera-controls {
    position: sticky !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: rgba(253, 247, 255, 0.96) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-top: 1.5px solid var(--border) !important;
    padding: 10px 12px max(10px, env(safe-area-inset-bottom, 10px)) !important;
    margin: 0 -10px !important;  /* bleed past container padding */
    z-index: 50 !important;
    gap: 8px !important;
    align-items: center !important;
  }

  /* Start / main action button: flex-grow */
  .camera-controls #startBtn,
  .camera-controls #pauseBtn {
    flex: 1 1 auto !important;
    min-height: 50px !important;
    font-size: 0.82rem !important;
  }

  /* Icon-only secondary buttons: fixed size */
  .camera-controls a.btn,
  .mobile-only-btn {
    flex: 0 0 50px !important;
    width: 50px !important;
    height: 50px !important;
    padding: 0 !important;
    font-size: 1.15rem !important;
    border-radius: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Shot progress: don't get clipped by dock */
  #cameraModeView .shot-progress { padding-bottom: 4px !important; }
}


/* ═══════════════════════════════════════════════════════════════════
   MODE TOGGLE WRAP — portrait improvements
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) and (orientation: portrait) {

  .mode-toggle-wrap {
    padding: 8px 10px 0 !important;
    gap: 6px !important;
    align-items: center !important;
  }
  .mode-toggle {
    flex: 1 !important;
    border-radius: 12px !important;
  }
  .mode-btn {
    flex: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding: 0 8px !important;
    font-size: 0.76rem !important;
    height: 44px !important;
    border-radius: 10px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .mode-btn.active { border-radius: 10px !important; }

  /* Floating action buttons next to mode toggle — same height as mode-btn */
  .mobile-only-btn {
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    font-size: 1.1rem !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   TOP BAR — portrait mobile improvements
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) and (orientation: portrait) {

  .top-bar {
    padding: 0 12px !important;
    height: 50px !important;
    /* Add safe-area for notch phones */
    padding-top: env(safe-area-inset-top, 0px) !important;
    height: calc(50px + env(safe-area-inset-top, 0px)) !important;
  }
  .top-bar-logo { font-size: 1.15rem !important; }

  /* Steps: show numbers only on very small screens */
  .top-bar-steps { gap: 5px !important; font-size: 0.62rem !important; }
  .top-bar-steps .divider { width: 14px !important; }

  /* Back link: compact */
  .top-bar-back {
    font-size: 0.68rem !important;
    padding: 6px 10px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
}

/* Ultra-small: hide step labels */
@media (max-width: 360px) {
  .top-bar-steps span { display: none !important; }
  .top-bar-steps .step-num { font-size: 0.52rem !important; }
}


/* ═══════════════════════════════════════════════════════════════════
   UPLOAD & REARRANGE — portrait improvements
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) and (orientation: portrait) {

  .upload-mode-container,
  .rearrange-container {
    padding: 12px !important;
    border-radius: var(--radius-lg) !important;
  }

  /* Upload/rearrange grid: width-based slots, scrollable for many shots */
  .upload-slots-grid {
    grid-template-columns: repeat(1, 1fr) !important;
    grid-template-rows: auto !important;
    align-content: start !important;
    justify-content: stretch !important;
    gap: 8px !important;
    overflow-y: auto !important;
    height: auto !important;
    flex: 0 0 auto !important;
    width: 100% !important;
  }
  .upload-slots-grid[data-cols="2"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .rearrange-grid {
    gap: 8px !important;
  }

  /* Slots: fill column width, height from aspect-ratio — good visible size */
  .upload-slot {
    aspect-ratio: 1 / 0.6452 !important;
    min-height: unset !important;
    height: auto !important;
    width: 100% !important;
    justify-self: stretch !important;
  }

  /* Bulk upload button — compact, positioned top-right */
  .upload-bulk-wrap { width: auto !important; }
  .upload-bulk-wrap .upload-bulk-btn {
    width: auto !important;
    font-size: 0.62rem !important;
    padding: 4px 9px !important;
  }

  /* Upload continue button */
  #uploadContinueBtn {
    margin-top: 14px !important;
    width: 100% !important;
    min-height: 50px !important;
    font-size: 0.84rem !important;
  }

  /* Rearrange actions: full-width column */
  .rearrange-actions {
    flex-direction: column !important;
    gap: 10px !important;
    padding: 10px 0 !important;
  }
  .rearrange-actions .btn {
    width: 100% !important;
    min-height: 50px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   MOBILE THUMBS — portrait strip
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) and (orientation: portrait) {
  .mobile-thumbs {
    display: flex !important;
    gap: 6px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    margin: 8px 0 2px !important;
  }
  .mobile-thumbs img {
    width: 48px !important;
    height: 48px !important;
    border-radius: 8px !important;
    object-fit: cover !important;
    border: 2px solid var(--pink-border) !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   TYPOGRAPHY SCALING — clamp()-based responsive text
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* Fluid heading sizes */
  .section-head h2 {
    font-size: clamp(1rem, 4vw, 1.4rem) !important;
  }
  .section-head p {
    font-size: clamp(0.68rem, 2.5vw, 0.8rem) !important;
  }

  /* Status messages */
  .status-msg {
    font-size: clamp(0.65rem, 2.2vw, 0.78rem) !important;
  }

  /* Layout card names */
  .layout-info .layout-name {
    font-size: clamp(0.82rem, 3vw, 0.98rem) !important;
  }

  /* Button text */
  .btn-lg {
    font-size: clamp(0.75rem, 2.8vw, 0.88rem) !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   FSC OVERLAY — safe-area & portrait improvements
   ═══════════════════════════════════════════════════════════════════ */

/* Ensure FSC fills portrait screens correctly */
@media (orientation: portrait) {
  #fullscreenCameraOverlay {
    /* Portrait: use dvh for better mobile viewport handling */
    height: 100dvh;
  }
  /* Larger shutter in portrait for easy tapping */
  .fsc-shutter,
  .fsc-shutter-ring {
    width: 92px !important;
    height: 92px !important;
  }
  .fsc-shutter-inner { width: 74px !important; height: 74px !important; }
  .fsc-shutter::after { width: 92px !important; height: 92px !important; }

  /* Portrait shooting is blocked — no portrait overrides needed for fsc-thumb-strip.
     Thumb size is controlled inline by fscBuildThumbs(). */
}


/* ═══════════════════════════════════════════════════════════════════
   SAFE-AREA SUPPORT — notch + home indicator
   ═══════════════════════════════════════════════════════════════════ */

@supports (padding: env(safe-area-inset-bottom)) {
  /* Camera controls dock respects home indicator */
  .camera-controls {
    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
  }
  /* Bottom sheet */
  .mobile-sheet {
    padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
  }
  /* Result page actions at bottom */
  .result-actions {
    padding-bottom: max(4px, env(safe-area-inset-bottom)) !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   SCROLLBAR HIDING on mobile (aesthetics)
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .result-layout::-webkit-scrollbar,
  .mobile-sheet-body::-webkit-scrollbar,
  #uploadModeView::-webkit-scrollbar,
  #rearrangeView::-webkit-scrollbar,
  .camera-left-panel::-webkit-scrollbar {
    display: none;
  }
  .result-layout,
  .mobile-sheet-body,
  #uploadModeView,
  #rearrangeView,
  .camera-left-panel {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   NO HORIZONTAL SCROLL guard
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  html, body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  .page-wrapper,
  .camera-layout,
  .result-layout,
  .upload-mode-container,
  .rearrange-container {
    box-sizing: border-box !important;
    max-width: 100% !important;
  }
}

/* ─── SVG ICON SYSTEM ────────────────────────────────────────────── */
.ico {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  flex-shrink: 0;
}
/* Larger icon used standalone (ready state, error state, etc.) */
.ico-lg {
  width: 2.8rem;
  height: 2.8rem;
  display: block;
  margin: 0 auto 8px;
}
/* Icon inside a coloured circle badge */
.ico-badge {
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--pink-dim);
  color: var(--pink);
  flex-shrink: 0;
}
.ico-badge .ico { width: 1.2rem; height: 1.2rem; }

/* ══════════════════════════════════════════════════════════════════
   PWA INSTALL BANNER
   ══════════════════════════════════════════════════════════════════ */
#pwa-install-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 99990;
  padding: 0 0 env(safe-area-inset-bottom, 0);
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
#pwa-install-banner.pib-visible {
  transform: translateY(0);
  pointer-events: all;
}
.pib-inner {
  display: flex; align-items: center; gap: 12px;
  background: white;
  border-top: 1.5px solid var(--border);
  box-shadow: 0 -4px 24px rgba(168,85,247,.12);
  padding: 14px 16px;
  border-radius: 20px 20px 0 0;
}
.pib-icon { font-size: 1.6rem; flex-shrink: 0; }
.pib-text { flex: 1; min-width: 0; }
.pib-text strong { display: block; font-size: .82rem; font-weight: 800; color: var(--text); }
.pib-text span   { display: block; font-size: .72rem; color: var(--text-muted); font-weight: 600; }
.pib-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.pib-install {
  padding: 8px 16px; border-radius: 20px;
  background: linear-gradient(135deg, var(--pink), var(--purple));
  color: white; border: none; font-weight: 800; font-size: .78rem;
  cursor: pointer; font-family: var(--font-ui);
  white-space: nowrap;
}
.pib-dismiss {
  width: 30px; height: 30px; border-radius: 50%; border: none;
  background: var(--pink-dim); color: var(--text-muted);
  font-size: .8rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
}

/* iOS instructions modal */
.pib-ios-modal {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(10,0,24,.8); backdrop-filter: blur(8px);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; transition: opacity .3s;
}
.pib-ios-modal.visible { opacity: 1; }
.pib-ios-card {
  background: white; border-radius: 20px 20px 0 0;
  padding: 28px 24px calc(28px + env(safe-area-inset-bottom, 0));
  max-width: 480px; width: 100%;
}
.pib-ios-title { font-size: 1.1rem; font-weight: 900; color: var(--text); margin-bottom: 16px; text-align: center; }
.pib-ios-steps { list-style: decimal; padding-left: 20px; display: flex; flex-direction: column; gap: 12px; }
.pib-ios-steps li { font-size: .85rem; color: var(--text-muted); font-weight: 600; line-height: 1.5; }
.pib-ios-share { background: var(--pink-dim); color: var(--pink); padding: 2px 6px; border-radius: 6px; font-weight: 900; }
.pib-ios-close {
  margin-top: 22px; width: 100%; padding: 14px;
  background: linear-gradient(135deg, var(--pink), var(--purple));
  color: white; border: none; border-radius: 14px;
  font-weight: 800; font-size: .9rem; cursor: pointer; font-family: var(--font-ui);
}

/* SW Update toast */
#sw-update-toast {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%) translateY(20px);
  z-index: 99995; opacity: 0; transition: all .4s cubic-bezier(.4,0,.2,1);
  background: var(--text); color: white;
  padding: 10px 16px; border-radius: 50px;
  display: flex; align-items: center; gap: 10px;
  font-size: .78rem; font-weight: 700; white-space: nowrap;
  pointer-events: none;
}
#sw-update-toast.visible {
  opacity: 1; transform: translateX(-50%) translateY(0);
  pointer-events: all;
}
#sw-update-toast button {
  padding: 4px 12px; border-radius: 20px;
  background: var(--pink); color: white; border: none;
  font-weight: 800; font-size: .72rem; cursor: pointer; font-family: var(--font-ui);
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE CAMERA PAGE — SHOW LIVE VIEWFINDER (like desktop)
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Always hide the start-card placeholder — viewfinder shows directly */
  .camera-page .mobile-start-card {
    display: none !important;
  }

  /* Show the camera viewfinder on mobile */
  .camera-page .camera-viewfinder {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 4/3;
    max-height: 52vw;
    min-height: 160px;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
  }

  /* Camera mode view: column layout with viewfinder */
  .camera-page #cameraModeView {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    min-height: 0;
    padding: 12px 16px 0;
    overflow: hidden;
  }

  /* Show progress bar, status text, thumbnails on mobile */
  .camera-page .shot-progress { display: block !important; }
  .camera-page .status-msg    { display: block !important; }
  .camera-page .mobile-thumbs { display: flex !important; gap: 7px; justify-content: center; }

  /* Camera controls row — full width */
  .camera-page .camera-controls {
    width: 100%;
    padding: 0;
    gap: 10px;
  }
  .camera-page .camera-controls .btn-lg {
    min-height: 52px;
    font-size: .9rem;
  }
}

/* Show mobile-start-card only on mobile — see bottom of file */

/* ══════════════════════════════════════════════════════════════════
   MOBILE GENERAL LAYOUT CONSISTENCY
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Top bar: keep logo + steps + back visible */
  .top-bar {
    padding: 0 12px;
    height: 48px;
  }
  .top-bar-logo { font-size: 1.1rem; }
  .top-bar-steps { font-size: .62rem; gap: 5px; }
  .top-bar-steps .divider { width: 12px; }
  .top-bar-steps .step-num { width: 18px; height: 18px; font-size: .55rem; }
  .top-bar-back { font-size: .65rem; padding: 5px 8px; }

  /* Mode toggle row */
  .mode-toggle-wrap { padding: 8px 12px; gap: 6px; }
  .mode-toggle { border-radius: 12px; }
  .mode-btn { font-size: .78rem; padding: 10px 12px; min-height: 40px; }

  /* Index page layout cards — single column on very small screens */
  @media (max-width: 420px) {
    .layout-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  }

  /* Upload slots grid — columns follow JS layoutConfig */
  .upload-slot { min-height: unset; aspect-ratio: 1 / 0.6452; }

  /* Result page: stack vertically */
  .result-layout { flex-direction: column !important; }
  .strip-panel { max-height: 60vh; }
  .result-right-panel { overflow-y: auto; }

  /* Buttons: adequate tap targets */
  .btn { min-height: 44px; }
  .btn-lg { min-height: 52px; }

  /* Section header padding on index */
  .section-head { margin: 16px 0 18px; }
  .section-head h2 { font-size: 1.2rem; }
}

/* ── mobile-start-card: hidden everywhere ── */
.mobile-start-card { display: none !important; }

/* ══════════════════════════════════════════════════════════════════
   UPLOAD VIEW — STRIP-SHAPED LAYOUT (Desktop camera page)
   Slots arranged exactly like the output strip, fully visible on screen
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  body.camera-page #uploadModeView {
    overflow: hidden;       /* desktop: no scroll needed, slots fit */
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }

  body.camera-page .upload-mode-container {
    display: flex !important;
    flex-direction: column !important;
    padding: 10px 14px !important;
    height: 100%;
    min-height: 0;
    gap: 8px !important;
    overflow: hidden !important;
  }

  /* Compact one-line header */
  body.camera-page .upload-header {
    flex-shrink: 0;
    width: 100%;
    margin-bottom: 0 !important;
    gap: 10px !important;
  }
  body.camera-page .upload-header-icon { font-size: 1.3rem !important; }
  body.camera-page .upload-header h3   { font-size: 0.82rem !important; }
  body.camera-page .upload-header p    { font-size: 0.65rem !important; margin-top: 1px !important; }

  /* The strip grid: fills available height, slots auto-size from aspect-ratio */
  body.camera-page .upload-slots-grid {
    flex: 1 !important;
    min-height: 0 !important;
    height: 100% !important;
    width: 100% !important;
    margin: 0 auto !important;
    gap: 6px !important;
    justify-content: center !important;
    align-content: stretch !important;
    overflow: hidden !important;
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    border: none;
  }

  /* Slot: height fills 1fr row, width auto from aspect-ratio */
  body.camera-page .upload-slot {
    aspect-ratio: 1 / 0.6452 !important;
    height: 100% !important;
    width: auto !important;
    min-height: unset !important;
    min-width: 0 !important;
    max-width: 100% !important;
    border-radius: 6px !important;
    background: linear-gradient(135deg, #fef0f6, #f4efff) !important;
  }

  /* Slot image fills cell properly */
  body.camera-page .upload-slot .upload-slot-img {
    object-fit: cover;
    width: 100%; height: 100%;
  }

  /* Hint & bulk select: shrink, stay compact */
  body.camera-page .upload-slot-reorder-hint {
    flex-shrink: 0;
    font-size: 0.6rem !important;
    padding: 0 !important;
  }
  body.camera-page .upload-bulk-wrap {
    flex-shrink: 0 !important;
    margin-bottom: 0 !important;
  }
  body.camera-page #uploadContinueBtn {
    flex-shrink: 0 !important;
    margin-top: 0 !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   REARRANGE VIEW — STRIP-SHAPED LAYOUT (Desktop camera page)
   Matches the upload tab's centered strip look
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  body.camera-page #rearrangeView {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }

  body.camera-page .rearrange-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 10px 14px !important;
    height: 100%;
    min-height: 0;
    gap: 8px !important;
    overflow: hidden !important;
  }

  /* Compact one-line header — full width */
  body.camera-page .rearrange-header-row {
    flex-shrink: 0;
    width: 100% !important;
    margin-bottom: 0 !important;
    gap: 10px !important;
  }
  body.camera-page .rearrange-header-icon { font-size: 1.3rem !important; }
  body.camera-page .rearrange-header-row h3 { font-size: 0.82rem !important; }
  body.camera-page .rearrange-header-row p  { font-size: 0.65rem !important; margin-top: 1px !important; }

  /* The strip grid: centered, paper-white — height driven by slot aspect-ratio, not flex-fill */
  body.camera-page .rearrange-grid {
    flex: 0 0 auto !important;
    height: auto !important;
    width: auto !important;
    margin: auto !important;      /* center both horizontally AND vertically */
    gap: 4px !important;

    background: #fff;
    border-radius: 10px;
    padding: 8px;
    box-shadow: 0 6px 28px rgba(0,0,0,.13), 0 1px 4px rgba(0,0,0,.07);
    border: 1px solid rgba(0,0,0,.06);
    box-sizing: border-box;
  }

  /* Slots: natural 4:3 aspect-ratio so strip matches upload proportions */
  body.camera-page .rearrange-slot {
    aspect-ratio: 4/3 !important;
    min-height: unset !important;
    min-width: 0 !important;
    width: 100% !important;
    height: auto !important;
    border-radius: 6px !important;
  }

  /* Strip width: matches upload grid widths */
  body.camera-page .rearrange-grid[data-cols="1"] {
    width: 210px !important;
  }
  body.camera-page .rearrange-grid[data-cols="2"] {
    width: 340px !important;
  }

  /* Hint & actions: stay compact at bottom */
  body.camera-page .rearrange-drag-hint {
    flex-shrink: 0;
    font-size: 0.6rem !important;
    padding: 0 !important;
  }
  body.camera-page .rearrange-actions {
    flex-shrink: 0 !important;
    width: 100% !important;
    gap: 8px !important;
    padding-top: 0 !important;
  }
  body.camera-page .rearrange-actions .btn {
    font-size: 0.82rem !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   FSC CAMERA — LANDSCAPE MOBILE
   • Shutter button → right-side vertical strip (right thumb reach)
   • Thumbnail strip → left-side vertical strip
   Applies to touch devices in landscape only.
   ══════════════════════════════════════════════════════════════════ */
@media (orientation: landscape) and (pointer: coarse) {

  /* ── RIGHT STRIP: shutter only ──────────────────────────────── */
  .fsc-bottom {
    /* Reposition to right edge, full height */
    bottom: 0;
    top: 0;
    left: auto;
    right: 0;
    width: 110px;
    padding: 20px 14px;
    padding-right: max(14px, env(safe-area-inset-right, 14px));
    flex-direction: column;
    justify-content: center;   /* shutter vertically centered */
    align-items: center;
    background: linear-gradient(to left,
      rgba(0,0,0,0.72) 0%,
      rgba(0,0,0,0.22) 70%,
      transparent 100%);
  }

  /* Hide the side-slot placeholders inside the right strip —
     thumbnails live in their own left strip now */
  .fsc-bottom .fsc-bottom-side {
    display: none;
  }

  /* ── LEFT STRIP: thumbnails ─────────────────────────────────── */
  /* position:fixed inside a transformed ancestor → anchors to overlay */
  .fsc-bottom-side:first-child {
    display: flex !important;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 110px;
    padding: 20px 16px 36px max(20px, env(safe-area-inset-left, 20px));
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;  /* pin to bottom */
    background: linear-gradient(to right,
      rgba(0,0,0,0.65) 0%,
      rgba(0,0,0,0.18) 75%,
      transparent 100%);
    z-index: 11;
  }

  /* Thumb strip: stack vertically, aligned to bottom */
  .fsc-thumb-strip {
    align-content: end;
    justify-content: end;
  }

  /* ── SHUTTER WRAP ───────────────────────────────────────────── */
  .fsc-shutter-wrap {
    flex-shrink: 0;
  }

  /* Mode toggle: stack vertically to fit the narrow column */
  .fsc-mode-toggle {
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: 8px;
  }

  .fsc-mode-btn {
    font-size: 0.6rem;
    padding: 5px 10px;
    white-space: nowrap;
  }

  /* Shutter meta below button */
  .fsc-shutter-meta {
    margin-top: 8px;
    text-align: center;
  }
  .fsc-progress-label { font-size: 0.72rem; }
  .fsc-mode-indicator  { font-size: 0.52rem; max-width: 90px; text-align: center; }

  /* ── CAPTURED FEEDBACK: leave both side strips clear ────────── */
  .fsc-captured-feedback {
    inset: 0 110px 0 110px;
  }
}