/* ============================================
   Photo Editor — styles (integrates with the
   Socials design system variables).
   ============================================ */

.photo-editor-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  grid-template-rows: auto 1fr;
  gap: 14px;
  height: calc(100vh - 120px);
  min-height: 520px;
}

.photo-editor-header {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.photo-editor-header h2 {
  margin: 0;
  font-size: 20px;
}

.photo-editor-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
  align-items: center;
}

.pe-tier-badge {
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  background: var(--brand-500, #6366f1);
  color: #fff;
  white-space: nowrap;
}

/* Grid / gallery */
.pe-grid {
  grid-row: 2;
  overflow-y: auto;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 14px;
  background: #fff;
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  align-content: start;
}

.pe-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-3, #64748b);
  padding: 48px 20px;
  font-size: 14px;
}

.pe-card {
  background: #fff;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: box-shadow .15s, transform .15s;
}

.pe-card:hover { box-shadow: 0 4px 14px rgba(15,23,42,.1); }
/* A photo in the run wears a brand-purple HALO (ring + glow), not a 2px border:
   on a ~110px tile a hairline border was invisible, so a "selected" photo looked
   exactly like an unselected one. */
.pe-card.selected {
  border: 2px solid var(--brand-500, #6366f1);
  box-shadow: 0 0 0 3px rgba(99,102,241,.30), 0 0 16px 4px rgba(99,102,241,.40);
}

.pe-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.pe-check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(15,23,42,.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
}

.pe-card.selected .pe-check { background: var(--brand-500, #6366f1); }

/* Small explainer next to "N photos in this run" in Step ①. */
.pe-step1-hint { font-size: 11.5px; color: var(--text-3, #64748b); }
.pe-step1-hint b { color: #e11d48; }

/* Remove button overlaying a selected card/thumbnail */
.pe-card-remove {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: rgba(225,29,72,.92);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
  z-index: 2;
}
.pe-card-remove:hover { background: #be123c; }
.thumbnail-item .pe-card-remove { top: 4px; left: 4px; width: 18px; height: 18px; font-size: 11px; }

/* "From Media Library" picker modal (two classes beat the base .pe-finish-box) */
.pe-finish-box.pe-picker-box { max-width: 760px; width: 100%; }
.pe-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  max-height: 56vh;
  overflow: auto;
  padding: 4px 2px;
}
.pe-picker-item {
  position: relative;
  border: 2px solid var(--border, #e2e8f0);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  background: #fff;
  display: block;
  transition: border-color .15s;
}
.pe-picker-item img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.pe-picker-item .pe-picker-check {
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(15,23,42,.55); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
}
.pe-picker-item.selected { border-color: var(--brand-500, #6366f1); }
.pe-picker-item.selected .pe-picker-check { background: var(--brand-500, #6366f1); }
.pe-picker-item.selected .pe-picker-check::after { content: "✓"; }
.pe-picker-name { padding: 5px 7px; font-size: 11px; color: var(--text-2, #334155); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* List view with thumbnails (table-like rows) */
.pe-picker-grid.pe-picker-list {
  display: block;
  grid-template-columns: none;
}
.pe-picker-grid.pe-picker-list .pe-picker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  margin-bottom: 6px;
  overflow: hidden;
}
.pe-picker-grid.pe-picker-list .pe-picker-item img {
  width: 44px;
  height: 44px;
  aspect-ratio: auto;
  flex-shrink: 0;
  object-fit: cover;
}
.pe-picker-grid.pe-picker-list .pe-picker-name {
  padding: 0;
  flex: 1;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pe-picker-grid.pe-picker-list .pe-picker-check { position: static; margin-left: auto; margin-right: 8px; }

.pe-card .pe-name {
  padding: 6px 8px;
  font-size: 11px;
  color: var(--text-2, #334155);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sidebar */
.pe-sidebar {
  grid-row: 2;
  background: #fff;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 14px;
  overflow-y: auto;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
}

.pe-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border, #e2e8f0); padding-bottom: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.pe-tab { padding: 6px 12px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-3, #64748b); background: transparent; border: none; display: flex; align-items: center; gap: 5px; transition: all .15s; }
.pe-tab:hover { background: var(--bg-2, #f1f5f9); }
.pe-tab.active { background: var(--brand-500, #6366f1); color: #fff; }
.pe-tab .badge { font-size: 9px; padding: 1px 6px; border-radius: 10px; background: var(--brand-500, #6366f1); color: #fff; }
.pe-tab.ai-tab .badge { background: #8b5cf6; }

.pe-panel { display: none; flex: 1; overflow-y: auto; }
.pe-panel.active { display: block; }
.pe-panel h4 { font-size: 14px; font-weight: 700; color: var(--text, #0f172a); margin: 0 0 10px; }

/* Filter buttons */
.pe-filter-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pe-filter-btn { padding: 8px 4px; border: 2px solid var(--border, #e2e8f0); border-radius: 8px; background: #fff; cursor: pointer; font-size: 11px; color: var(--text-2, #334155); text-align: center; transition: all .15s; }
.pe-filter-btn:hover { border-color: var(--text-3, #64748b); }
.pe-filter-btn.active { border-color: var(--brand-500, #6366f1); background: rgba(99,102,241,.06); color: var(--brand-600, #4f46e5); }

/* Adjustments */
.pe-adj-group { margin-bottom: 10px; }
.pe-adj-group label { display: block; font-size: 12px; font-weight: 600; color: var(--text-2, #334155); margin-bottom: 2px; }
.pe-adj-group input[type="range"] { width: 100%; accent-color: var(--brand-500, #6366f1); }
.pe-adj-group .pe-adj-val { font-size: 11px; color: var(--text-3, #64748b); float: right; }

/* Crop */
.pe-crop-opts, .pe-rotate-opts { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.pe-crop-btn { padding: 4px 10px; border: 1px solid var(--border, #e2e8f0); border-radius: 5px; background: transparent; cursor: pointer; font-size: 12px; transition: all .15s; }
.pe-crop-btn:hover { background: var(--bg-2, #f1f5f9); }
.pe-crop-btn.active { background: var(--brand-500, #6366f1); color: #fff; border-color: var(--brand-500, #6366f1); }
.pe-rotate-btn { padding: 4px 8px; border: 1px solid var(--border, #e2e8f0); border-radius: 5px; background: transparent; cursor: pointer; font-size: 12px; }

/* AI features */
.pe-ai-feature { padding: 10px 12px; border: 1px solid var(--border, #e2e8f0); border-radius: 8px; margin-bottom: 8px; transition: border-color .15s; }
.pe-ai-feature:hover { border-color: var(--brand-500, #6366f1); }
.pe-ai-feature .pe-ai-btn { padding: 6px 12px; border: none; border-radius: 6px; font-size: 13px; font-weight: 700; cursor: pointer; background: var(--brand-500, #6366f1); color: #fff; transition: background .15s; }
.pe-ai-feature .pe-ai-btn:hover { background: var(--brand-600, #4f46e5); }
.pe-ai-feature .pe-ai-btn:disabled, .pe-ai-feature .pe-ai-btn.locked { opacity: .55; cursor: not-allowed; }
.pe-ai-cost { font-size: 11px; color: var(--text-3, #64748b); margin-left: 6px; }
.pe-ai-desc { font-size: 11px; color: var(--text-3, #64748b); margin: 3px 0 0; }
.pe-ai-feature.premium { border-color: #8b5cf6; background: rgba(139,92,246,.03); }
.pe-ai-feature.enterprise { border-color: #f59e0b; background: rgba(245,158,11,.03); }
.pe-ai-feature .pe-lock-note { font-size: 11px; color: var(--text-3, #64748b); margin-top: 4px; display: block; }
.pe-ai-feature input[type="file"] { margin-top: 6px; font-size: 11px; }

.pe-ai-credits { margin-top: 12px; padding: 10px; background: var(--bg-2, #f1f5f9); border-radius: 8px; text-align: center; }
.pe-ai-credits strong { color: var(--brand-500, #6366f1); font-size: 18px; }
.pe-ai-credits .pe-ai-limit-info { font-size: 11px; color: var(--text-3, #64748b); }

/* Locked overlay for non-pro AI tabs */
.pe-filters-locked { font-size: 12px; color: var(--text-3, #64748b); margin: 8px 0 4px; line-height: 1.5; }

/* Loading overlay */
.pe-loading { position: fixed; inset: 0; background: rgba(15,23,42,.55); display: flex; align-items: center; justify-content: center; z-index: 999; }
.pe-loading-box { background: #fff; padding: 28px 42px; border-radius: 16px; text-align: center; }
.pe-loading-box .spinner { font-size: 42px; animation: pe-spin 1s linear infinite; }
.pe-loading-box p { margin: 10px 0 0; font-weight: 600; }
@keyframes pe-spin { to { transform: rotate(360deg); } }

/* Canvas preview modal */
.pe-preview-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.6); display: flex; align-items: center; justify-content: center; z-index: 950; padding: 20px; }
.pe-preview-box { background: #fff; border-radius: 14px; max-width: 720px; width: 100%; max-height: 90vh; overflow: auto; padding: 16px; }
.pe-preview-box img { width: 100%; border-radius: 8px; }
.pe-preview-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }

@media (max-width: 860px) {
  .photo-editor-wrap { grid-template-columns: 1fr; grid-template-rows: auto auto auto; height: auto; }
  .pe-grid { grid-row: 2; }
  .pe-sidebar { grid-row: 3; }
  .pe-filter-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================
   Unified Photo Editor — 4-step workflow
   (mirrors Video Studio flowchart)
   ============================================ */
.photos-container { padding: 4px 2px 16px; max-width: 1400px; margin: 0 auto; }
.photos-panel { display: none; }
.photos-panel.photos-active { display: block; }

.photos-flowchart {
  display: flex; align-items: center; justify-content: center;
  gap: 6px;
  padding: 12px 14px; background: #fff; border-radius: 12px;
  margin-bottom: 16px; border: 1px solid var(--border, #e2e8f0);
  flex-wrap: wrap; width: 100%;
}
/* Full-width progress bar that sits ABOVE the step buttons. */
.photos-progress {
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: 10px; width: 100%; padding: 0 2px; margin-bottom: 8px;
}
.photos-fc-pct { font-size: 12px; font-weight: 700; color: var(--text-2, #334155); white-space: nowrap; }
.photos-fc-track { width: 100%; height: 6px; background: var(--bg-2, #f1f5f9); border-radius: 4px; overflow: hidden; }
.photos-fc-fill { height: 100%; background: var(--brand-500, #6366f1); border-radius: 4px; transition: width .3s; }

.photos-step {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 20px; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--text-3, #64748b);
  border: none; background: transparent; transition: all .2s;
  flex-wrap: nowrap; white-space: nowrap;
}
.photos-step-label { display: inline-flex; align-items: center; }
.photos-step:hover { background: var(--bg-2, #f1f5f9); }
.photos-step.active { background: var(--brand-500, #6366f1); color: #fff; }
.photos-step.done { background: rgba(34,197,94,.12); color: #22c55e; }
.photos-step .step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; background: var(--bg-2, #f1f5f9);
  font-size: 11px; font-weight: 800; color: var(--text-2, #334155);
}
.photos-step.active .step-num { background: rgba(255,255,255,.25); color: #fff; }
.photos-step.done .step-num { background: #22c55e; color: #fff; }
.photos-arrow { color: var(--text-3, #64748b); font-size: 15px; }

/* Two-panel editor */
.editor-panels { display: grid; grid-template-columns: 280px 1fr; gap: 16px; min-height: 480px; }
/* Right column: fixed preview on top + scrollable controls below. */
.pe-edit-right { display: flex; flex-direction: column; gap: 12px; min-height: 480px; max-height: 680px; }
.pe-preview-fixed { flex: none; background: #fff; border-radius: 10px; border: 1px solid var(--border, #e2e8f0); padding: 10px 12px; }
.thumbnail-panel { background: #fff; border-radius: 10px; border: 1px solid var(--border, #e2e8f0); padding: 12px; max-height: 640px; overflow-y: auto; }
.thumbnail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 12px; padding: 4px; }
.thumbnail-item { position: relative; border-radius: 8px; overflow: hidden; cursor: pointer; border: 2px solid transparent; transition: all .15s; }
.thumbnail-item:hover { transform: scale(1.03); }
.thumbnail-item.selected { border-color: var(--brand-500, #6366f1); }
.thumbnail-item img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.thumbnail-item .badge { position: absolute; top: 4px; right: 4px; font-size: 10px; background: rgba(0,0,0,.6); color: #fff; padding: 1px 6px; border-radius: 10px; }
/* ▶ = the photo currently open in the preview (NOT a selection mark). Kept dark
   slate on purpose so it can never be mistaken for the purple selection halo. */
.thumbnail-item .check { position: absolute; bottom: 5px; right: 5px; width: 24px; height: 24px; border-radius: 50%; background: rgba(15,23,42,.72); color: #fff; border: 1.5px solid rgba(255,255,255,.6); display: flex; align-items: center; justify-content: center; font-size: 12px; }
.thumbnail-item.selected .check { background: #0f172a; }

/* Tick: marks which photos an edit is applied to, so a batch can be split
   (tick 3 of 5 for B&W, tick the other 2 for Cinematic). BOTTOM-left corner is
   the free one: the "edited" badge is top-right, ✕ (remove) is top-left and the
   ▶ current marker is bottom-right. It is a 26px brand-outlined circle with a
   white fill while OFF, so an unticked photo still invites a click instead of
   hiding as a 20px dark square. */
.thumbnail-item .pe-pick-tick {
  position: absolute;
  bottom: 5px;
  left: 5px;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 2px solid var(--brand-500, #6366f1);
  border-radius: 50%;
  background: rgba(255,255,255,.94);
  color: var(--brand-600, #4f46e5);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(15,23,42,.3);
  z-index: 2;
  transition: transform .12s, background .12s, color .12s;
}
.thumbnail-item .pe-pick-tick:hover { transform: scale(1.1); background: #fff; }
.thumbnail-item.ticked .pe-pick-tick {
  background: var(--brand-500, #6366f1);
  color: #fff;
  border-color: #fff;
}
/* The selection halo — the ONE thing that means "edits apply to this photo".
   Ring + a soft outer glow, on top of the hairline border, so a ticked photo is
   obvious at a glance on any screen size. */
.thumbnail-item.ticked {
  border-color: var(--brand-500, #6366f1);
  box-shadow: 0 0 0 3px var(--brand-500, #6366f1),
              0 0 0 6px rgba(99,102,241,.28),
              0 0 18px 5px rgba(99,102,241,.45);
  z-index: 1;
}
.thumbnail-item.ticked img { filter: saturate(1.04); }
/* The previewed photo keeps its own (darker) ring so "previewing" and "in the
   batch" stay readable together. */
.thumbnail-item.selected.ticked {
  border-color: var(--brand-600, #4f46e5);
  box-shadow: 0 0 0 3px var(--brand-600, #4f46e5),
              0 0 0 6px rgba(79,70,229,.32),
              0 0 20px 6px rgba(79,70,229,.5);
}
.pe-tick-bar {
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--text-3, #64748b);
  line-height: 1.5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
}
#peTickCount { font-weight: 600; color: var(--text-2, #475569); }
/* Legend for the two marks: the purple halo (in the batch) and the dark ▶ (the
   photo currently shown in the preview). */
.pe-tick-legend { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; white-space: nowrap; }
.pe-lg-halo { width: 15px; height: 15px; border-radius: 4px; border: 2px solid var(--brand-500, #6366f1); box-shadow: 0 0 0 2px rgba(99,102,241,.3); display: inline-block; }
.pe-lg-tri { width: 18px; height: 18px; border-radius: 50%; background: #0f172a; color: #fff; font-size: 10px; display: inline-flex; align-items: center; justify-content: center; }
.pe-lg-sep { color: var(--border, #cbd5e1); }

/* "Include in batch" toggle next to the preview title: the obvious, full-size
   way to put the photo you are looking at into (or out of) the batch, so the
   batch never depends on spotting a small box on a thumbnail. */
.pe-batch-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 11px 3px 6px;
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 999px;
  background: #fff;
  color: var(--text-2, #475569);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: .12s;
}
.pe-batch-btn:hover { border-color: var(--brand-500, #6366f1); color: var(--brand-600, #4f46e5); }
.pe-batch-btn .pe-batch-box {
  width: 17px;
  height: 17px;
  border-radius: 5px;
  border: 1.5px solid var(--border, #cbd5e1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}
.pe-batch-btn.on {
  background: var(--brand-500, #6366f1);
  border-color: var(--brand-500, #6366f1);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(99,102,241,.25);
}
.pe-batch-btn.on .pe-batch-box { background: #fff; border-color: #fff; color: var(--brand-600, #4f46e5); }

.controls-panel { background: #fff; border-radius: 10px; border: 1px solid var(--border, #e2e8f0); padding: 16px; overflow-y: auto; flex: 1; min-height: 0; }
.controls-section { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border, #e2e8f0); }
.controls-section:last-child { border-bottom: none; margin-bottom: 0; }
.controls-section .section-title { font-size: 14px; font-weight: 700; color: var(--text, #0f172a); margin: 0 0 10px; display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.controls-section .section-title::after { content: "▾"; margin-left: auto; font-size: 12px; color: var(--text-3, #64748b); transition: transform .15s; }
.controls-section.collapsed .section-title::after { transform: rotate(-90deg); }
.controls-section.collapsed > .section-body { display: none; }
.controls-section .section-title .badge { font-size: 10px; font-weight: 700; padding: 1px 8px; border-radius: 10px; background: var(--brand-500, #6366f1); color: #fff; }
.controls-section .section-title .badge.pro { background: #8b5cf6; }
.controls-section .section-title .badge.enterprise { background: #f59e0b; }

.slider-group { margin-bottom: 10px; }
.slider-group label { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-2, #334155); }
.slider-group input[type="range"] { width: 100%; accent-color: var(--brand-500, #6366f1); }
.slider-group .value { font-weight: 700; color: var(--text, #0f172a); }

.filter-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.filter-btn { padding: 7px 4px; border: 2px solid var(--border, #e2e8f0); border-radius: 6px; background: var(--bg-field, #fff); cursor: pointer; font-size: 11px; text-align: center; transition: all .15s; }
.filter-btn:hover { border-color: var(--text-3, #64748b); }
.filter-btn.active { border-color: var(--brand-500, #6366f1); background: rgba(99,102,241,.06); }

.ai-features { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ai-feature { display: inline-flex; align-items: center; padding: 2px 2px 2px 2px; border: 1px solid var(--border, #e2e8f0); border-radius: 22px; transition: all .15s; }
.ai-feature:hover { border-color: var(--brand-500, #6366f1); }
.ai-feature .ai-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px 6px 12px; border: none; border-radius: 22px; font-size: 12px; font-weight: 700; cursor: pointer; background: var(--brand-500, #6366f1); color: #fff; transition: background .15s; white-space: nowrap; }
.ai-feature .ai-btn:hover { background: var(--brand-600, #4f46e5); }
.ai-feature .ai-btn:disabled { opacity: .5; cursor: not-allowed; }
.ai-feature .ai-cost { display: none; }
.ai-feature .ai-btn .ai-cost.show { display: inline-flex; font-size: 10px; line-height: 1; font-weight: 800; padding: 3px 7px; border-radius: 999px; background: #fff; color: var(--brand-600, #4f46e5); }
.ai-feature.locked { opacity: .6; }
.ai-feature.locked .ai-btn { background: var(--text-3, #64748b); cursor: not-allowed; }
.ai-feature.locked .ai-btn .ai-cost.show { color: #475569; }
.ai-feature.premium { border-color: #8b5cf6; background: rgba(139,92,246,.05); }
.ai-feature.enterprise { border-color: #f59e0b; background: rgba(245,158,11,.05); }
.ai-feature input[type="file"] { margin-top: 4px; font-size: 11px; }
.ai-sub { margin: 2px 6px 2px 0; }

.ai-credits { margin-top: 12px; padding: 10px 14px; background: var(--bg-2, #f1f5f9); border-radius: 8px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; flex-wrap: wrap; gap: 6px; }
.ai-credits .count { font-weight: 800; color: var(--brand-500, #6366f1); }
.ai-credits .upgrade-link { color: var(--brand-500, #6366f1); text-decoration: none; font-weight: 700; }

@media (max-width: 768px) {
  .editor-panels { grid-template-columns: 1fr; }
  .thumbnail-panel { max-height: 220px; }
  .controls-panel { max-height: 520px; }
  .filter-grid { grid-template-columns: repeat(3, 1fr); }
  /* Horizontal + swipeable thumbnail strip on tablets/phones */
  .thumbnail-grid { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 12px; padding-bottom: 8px; padding-right: 6px; }
  .thumbnail-item { flex: 0 0 104px; }
  .photos-flowchart { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; }
  .photos-step { flex: 0 0 auto; }
  /* The global `button { min-width: 44px }` mobile rule (see below) is meant for
     full-width action buttons, but it also hit these two overlay controls and
     blew them up to 44px — on an 80px thumbnail the ✕ and the tick covered most
     of the photo. Cap them here so the picture stays visible and the halo reads. */
  .thumbnail-item .pe-pick-tick,
  .thumbnail-item .pe-card-remove,
  .pe-card .pe-card-remove { min-width: 0; min-height: 0; flex: none; }
}

/* Mobile: larger touch targets + readable type (<480px) */
@media (max-width: 480px) {
  .editor-panels { min-height: 0; }
  .pe-edit-right { min-height: 0; max-height: none; }
  .controls-panel { max-height: none; }
  .slider-group input[type="range"] { height: 44px; }
  .slider-group label { font-size: 15px; }
  button, .btn, .pe-switch-opt, .filter-btn, .pe-crop-btn, .pe-rotate-btn, .photos-step { min-height: 44px; min-width: 44px; }
  .pe-switch-opt { padding: 10px 14px; font-size: 13px; }
  .filter-grid { grid-template-columns: repeat(2, 1fr); }
  .filter-btn { font-size: 12px; padding: 10px 4px; }
  .photos-fc-pct { font-size: 13px; }
  .photos-panel h3, .photos-panel .heading { font-size: 18px; }
  /* Bigger tiles on a phone so a 32px tick + the halo both fit comfortably. */
  .thumbnail-item { flex: 0 0 118px; }
  .thumbnail-item .pe-pick-tick { width: 32px; height: 32px; font-size: 17px; }
  .thumbnail-item .check { width: 28px; height: 28px; font-size: 14px; }
  .thumbnail-item .pe-card-remove { width: 26px; height: 26px; font-size: 13px; }
  .pe-batch-btn { min-height: 0; padding: 6px 12px 6px 7px; }
}

/* Segmented "halo switch" toggle */
.pe-switch { display: inline-flex; background: var(--bg-2, #f1f5f9); border-radius: 24px; padding: 3px; gap: 2px; border: 1px solid var(--border, #e2e8f0); }
.pe-switch-opt { border: none; background: transparent; color: var(--text-2, #334155); font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: 20px; cursor: pointer; transition: all .15s; }
.pe-switch-opt:hover { color: var(--brand-600, #4f46e5); }
.pe-switch-opt.active { background: var(--brand-500, #6366f1); color: #fff; box-shadow: 0 1px 3px rgba(99,102,241,.4); }

/* Export progress bar (indeterminate) */
.pe-export-bar { flex: 1; height: 8px; min-width: 120px; background: var(--bg-2, #f1f5f9); border-radius: 5px; overflow: hidden; position: relative; }
.pe-export-bar-fill { position: absolute; top: 0; left: 0; bottom: 0; width: 40%; background: linear-gradient(90deg, var(--brand-500, #6366f1), #8b5cf6); border-radius: 5px; animation: peExportSlide 1.2s infinite ease-in-out; }
@keyframes peExportSlide { 0% { left: -40%; } 100% { left: 100%; } }

/* Finish dialog overlay */
.pe-finish-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.55); display: flex; align-items: center; justify-content: center; z-index: 990; padding: 20px; }
.pe-finish-box { background: #fff; border-radius: 16px; max-width: 320px; width: 100%; padding: 24px; box-shadow: 0 20px 50px rgba(15,23,42,.25); position: relative; }
.pe-finish-box h3 { margin: 6px 0; }
/* Close button (top-right ✕) for finish + picker modals */
.pe-close-x {
  position: absolute; top: 10px; right: 10px;
  width: 28px; height: 28px; border: none; border-radius: 50%;
  background: rgba(15,23,42,.08); color: var(--text-2, #334155);
  font-size: 14px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.pe-close-x:hover { background: rgba(225,29,72,.15); color: #e11d48; }

/* --- Interactive crop overlay ---
   The base preview lets the viewport scroll (pan-y) so on mobile you can still
   scroll the page by swiping over the photo. Only dedicated drag/crop surfaces
   (watermark drag-to-place, an active crop box, or an in-progress freehand
   crop) opt back into touch-action:none so their gestures aren't hijacked. */
.pe-preview-stage { position: relative; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.pe-preview-stage img { -webkit-user-drag: none; user-select: none; pointer-events: none; }
/* Watermark stage: dragging to place the watermark must capture horizontal +
   vertical gestures, not scroll. */
#peWmPreviewStage.pe-wm-custom, #peWmPreviewStage.pe-wm-dragging { touch-action: none; }
/* Crop: box + handles lock the surface only while a box is visible/interactive. */
.pe-preview-stage:has(.pe-crop-box) { touch-action: none; }
.pe-preview-stage.pe-stage-cropping { touch-action: none; }
/* Freehand crop hint: cursor hint only (no longer forces touch-action:none by
   default, so the page can still scroll over the photo). */
.pe-stage-freedraw { cursor: crosshair; }
.pe-crop-layer { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.pe-crop-dim { position: absolute; background: rgba(0,0,0,.5); pointer-events: auto; }
.pe-crop-box { position: absolute; border: 2px solid var(--brand-500, #6366f1); box-sizing: border-box; cursor: move; pointer-events: auto; }
.pe-crop-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px); background-size: 33.33% 33.33%; }
.pe-crop-label { position: absolute; bottom: -22px; left: 0; font-size: 11px; font-weight: 700; color: #fff; background: rgba(15,23,42,.75); padding: 1px 6px; border-radius: 4px; white-space: nowrap; }
.pe-crop-handle {
  position: absolute; width: 12px; height: 12px; background: #fff; border: 2px solid var(--brand-500, #6366f1); border-radius: 3px; pointer-events: auto; box-sizing: border-box;
}
.pe-crop-handle.nw { top: -6px; left: -6px; cursor: nwse-resize; }
.pe-crop-handle.ne { top: -6px; right: -6px; cursor: nesw-resize; }
.pe-crop-handle.sw { bottom: -6px; left: -6px; cursor: nesw-resize; }
.pe-crop-handle.se { bottom: -6px; right: -6px; cursor: nwse-resize; }
.pe-crop-handle.n { top: -6px; left: 50%; margin-left: -6px; cursor: ns-resize; }
.pe-crop-handle.s { bottom: -6px; left: 50%; margin-left: -6px; cursor: ns-resize; }
.pe-crop-handle.e { right: -6px; top: 50%; margin-top: -6px; cursor: ew-resize; }
.pe-crop-handle.w { left: -6px; top: 50%; margin-top: -6px; cursor: ew-resize; }


/* ============================================
   Sticky preview + sticky bottom nav (page scroll)
   The editor panels let the PAGE scroll through tall
   option lists; the preview and the Previous/Next bar
   stay pinned to the viewport so the user always sees
   their image and can always navigate.
   ============================================ */
.photos-panel.photos-active { min-height: auto; }
.pe-edit-right { max-height: none; }
.controls-panel { max-height: none; overflow: visible; }
/* Keep the photo preview visible while scrolling the controls beneath it. */
.pe-preview-fixed { position: sticky; top: 70px; z-index: 20; }

/* ---- inside the pop-up --------------------------------------------------
   The preview used to pin itself (above) so it stayed visible while a tall list
   of options scrolled under it. That is exactly what makes it "block the ability
   to see any of the options" now that the same markup lives in the pop-up: the
   pop-up's body is its OWN scroll container, so a sticky block pins to the top
   of THAT and the controls pass underneath it, hidden. In the pop-up the preview
   is simply the first block of the step and scrolls away with the rest of it —
   and it is shorter, so the first sliders are on screen before any scrolling. */
.sw-veil .pe-preview-fixed { position: static; top: auto; z-index: auto; }
.sw-veil .pe-edit-right,
.sw-veil .editor-panels { min-height: 0; }
/* The editor is preview-beside-sliders, which needs room. Below the wide card's
   comfort point the thumbnails go ABOVE the editor instead of squeezing it. */
@media (max-width: 860px) {
  .sw-veil .editor-panels { grid-template-columns: 1fr; }
  .sw-veil .thumbnail-panel { max-height: 170px; }
}
/* Sticky Previous/Next bar pinned to the bottom of the viewport. */
.photos-navbar {
  position: sticky;
  bottom: 0;
  z-index: 30;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 10px 2px;
  background: linear-gradient(to top, rgba(248,250,252,.98), rgba(248,250,252,.6));
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-top: 1px solid var(--border, #e2e8f0);
}
/* Keep the nav buttons from shrinking to nothing when only arrows show. */
.photos-navbar .pe-nav-btn { min-width: 96px; }
.photos-navbar .pe-nav-arrow { display: none; }
.photos-navbar .pe-nav-next { margin-left: auto; }
.photos-navbar .pe-nav-prev { margin-right: auto; }

/* Reset / Restart icon buttons (shared across Edit, Branding, Export).
   Icon + label are separate spans so only the icon shows on small screens.
   Distinct glyphs keep the two actions from being mistaken for one another. */
.pe-run-btn {
  display: inline-flex; align-items: center; gap: 5px;
  white-space: nowrap; line-height: 1;
}
.pe-run-btn .pe-run-ico { font-size: 14px; line-height: 1; }
.pe-run-btn-restart .pe-run-ico { font-size: 13px; }
/* The two buttons must never be confused: re-affirm the restart one's tone is
   neutral/secondary while Reset keeps the plain .btn-mini look. */
.pe-run-btn:hover .pe-run-ico, .pe-run-btn:focus .pe-run-ico { transform: none; }

/* On small screens the labelled Previous/Next become discreet arrows. */
@media (max-width: 480px) {
  .photos-navbar .pe-nav-label { display: none; }
  .photos-navbar .pe-nav-arrow { display: inline-block; }
  .photos-navbar .pe-nav-btn {
    min-width: 44px;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* Reset / Restart: icon-only chips on phones (labels stay in the tooltips). */
  .pe-run-btn { padding: 0; width: 38px; height: 38px; border-radius: 50%; justify-content: center; gap: 0; }
  .pe-run-btn .pe-run-label { display: none; }
  .pe-run-btn .pe-run-ico { font-size: 18px; }
  .photos-navbar { padding: 6px 4px; }
  .pe-preview-fixed { top: 60px; }
  .controls-panel, .pe-edit-right, .editor-panels { min-height: 0; }
}

/* ============================================
   Watermark panel: type "None" disables options &
   drag-to-position on the live preview.
   ============================================ */
#peWmOptions { transition: opacity .15s ease; }
#peWmOptions.pe-wm-disabled {
  opacity: .45;
  pointer-events: none;               /* disables sliders/buttons/inputs */
  user-select: none;
  filter: grayscale(.4);
}
/* Keep the hint text legible even when the options are greyed. */
#peWmOptions.pe-wm-disabled .pe-wm-custom-hint { opacity: .6; }
.pe-wm-custom-hint {
  font-size: 12px;
  color: var(--brand-600, #4f46e5);
  background: rgba(99,102,241,.08);
  border: 1px dashed var(--brand-400, #818cf8);
  border-radius: 6px;
  padding: 6px 8px;
  margin: 0 0 10px;
}
/* Watermark stage becomes a drag surface in custom mode but must not show a
   stray crosshair when cropping isn't relevant; we only add subtle affordance. */
#peWmPreviewStage.pe-wm-dragging { cursor: move; }
#peWmPreviewStage { cursor: default; }
#peWmPreviewStage.pe-wm-custom { cursor: grab; }
#peWmPreviewStage.pe-wm-custom:active { cursor: grabbing; }

/* Draggable watermark copy shown while the user moves it with the cursor.
   The element mirrors the real watermark (logo / styled text), raised with a
   shadow and a small sizing gauge so it reads as "picked up" and drags smoothly. */
.pe-wm-drag-ghost {
  position: absolute; top: 0; left: 0; z-index: 8;
  pointer-events: none; will-change: transform;
  display: inline-flex; flex-direction: row; align-items: center; gap: 8px;
  background: transparent; line-height: 1;
  /* subtle lift + a faint grab affordance beneath */
  filter: drop-shadow(0 4px 10px rgba(15,23,42,.45));
  opacity: .95;
}
.pe-wm-drag-ghost img { max-width: 40vw; }
.pe-wm-drag-ghost .ghost-txt {
  white-space: nowrap; font-size: 11px; font-weight: 600;
  color: #fff; background: var(--brand-600, #4f46e5);
  padding: 4px 9px; border-radius: 10px; pointer-events: none;
  margin-left: 2px;
}
/* Compact, precise placement target shown while dragging the watermark — a
   small ring at the cursor instead of lifting a big watermark copy, so the
   watermark lands exactly where the finger is. */
.pe-wm-drag-ghost.pe-wm-drag-ring {
  width: 26px; height: 26px; border-radius: 50%; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  background: rgba(79,70,229,.12); border: 2px dashed var(--brand-500,#6366f1);
  box-shadow: 0 0 0 2px #fff, 0 4px 12px rgba(15,23,42,.25);
}
.pe-wm-drag-ghost.pe-wm-drag-ring b { font-size: 16px; line-height: 1; color: var(--brand-600,#4f46e5); }

/* Watermark resize frame + corner handles (shown when the watermark is tapped so
   the user can drag a corner to resize). Frame sits over the preview; corners are
   hit-targets for pointer-resize. */
.pe-wm-resize-frame { position: absolute; z-index: 9; pointer-events: none; }
.pe-wm-resize-frame.on {
  outline: 1.5px dashed var(--brand-500,#6366f1); outline-offset: 3px;
  border-radius: 2px;
}
.pe-wm-corner {
  position: absolute; width: 15px; height: 15px; border-radius: 50%;
  background: #fff; border: 2px solid var(--brand-500,#6366f1);
  box-sizing: border-box; pointer-events: auto; touch-action: none;
  z-index: 10; box-shadow: 0 1px 3px rgba(15,23,42,.3);
}
.pe-wm-corner.nw { top:-8px; left:-8px; cursor: nwse-resize; }
.pe-wm-corner.ne { top:-8px; right:-8px; cursor: nesw-resize; }
.pe-wm-corner.sw { bottom:-8px; left:-8px; cursor: nesw-resize; }
.pe-wm-corner.se { bottom:-8px; right:-8px; cursor: nwse-resize; }
#peWmPreviewStage.pe-wm-handles { cursor: default; }
#peWmPreviewStage.pe-wm-handles .pe-wm-corner { display: block; }

/* Watermark type halo switch: a bit roomier than the generic pe-switch so the
   four choices sit comfortably, and uses the same pill styling as network/rate
   toggles elsewhere (no dropdowns in the watermark panel). */
.pe-wm-type-switch { flex-wrap: wrap; }
.pe-wm-type-switch .pe-switch-opt {
  font-size: 13px; padding: 6px 12px;
  display: inline-flex; align-items: center; gap: 5px; justify-content: flex-start;
}
.pe-wm-type-switch .pe-switch-opt img { display: inline-block; flex: 0 0 auto; }
/* Type + Position sit side-by-side on desktop (Position to the right of the
   type pills); on mobile the Position matrix drops BELOW the type choices.
   The grid itself is only rendered when a real type (Logo/Text/Both) is
   active — when "None" is chosen it isn't part of the markup at all. */
.pe-wm-type-row {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: 12px 24px;
}
.pe-wm-type-col { flex: 1 1 200px; min-width: 0; }
.pe-wm-pos-block { flex: 0 0 auto; }
@media (max-width: 700px) {
  /* narrow / mobile: stack so Position appears below the type selector */
  .pe-wm-type-row { flex-direction: column; align-items: flex-start; gap: 14px 0; }
  .pe-wm-type-col { width: 100%; flex-basis: auto; }
  .pe-wm-pos-block { width: 100%; }
}
/* ai background-replacement pills (Edit -> AI -> Background Removal) */
.ai-bg-pillrow { flex-wrap: wrap; }
.ai-bg-pillrow .pe-switch-opt { padding: 4px 10px; font-size: 12px; }
/* Corners halo pills: a tight row that reads cleanly next to the swatch. */
.pe-wm-corner-switch .pe-switch-opt { padding: 5px 12px; font-size: 12px; }
.pe-wm-optlbl { font-size: 12px; color: var(--text-2, #334155); font-weight: 600; }
#peWmTextBgOpts label { flex: 0 0 auto; }
/* 3x3 watermark Position grid — matches the site's position keypad
   (.position-cell) instead of a heavy gradient button-matrix: rounded white
   "keys" on a faint tray; hover lifts the brand tint, and the active key is a
   solid brand fill with the direction arrows in white. */
.pe-wm-posgrid {
  display: grid !important; grid-template-columns: repeat(3, 1fr) !important;
  gap: 5px !important; width: 154px !important;
  background: var(--surface-2, #f1f5f9) !important;
  border: 1px solid var(--border-2, #cbd5e1) !important;
  border-radius: 12px !important; padding: 5px !important;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.5), 0 1px 2px rgba(15,23,42,.04);
}
.pe-wm-posgrid .pe-switch-opt {
  width: 100%; height: 40px; min-width: 0; padding: 0 !important;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1; border-radius: 8px;
  background: #fff; color: var(--text-3, #64748b);
  border: 1px solid var(--border-2, #e2e8f0);
  overflow: hidden; box-shadow: 0 1px 1px rgba(15,23,42,.05);
  transition: background .12s, color .12s, border-color .12s, box-shadow .12s, transform .08s;
}
.pe-wm-posgrid .pe-switch-opt:hover {
  background: var(--brand-50, #eef2ff); border-color: var(--brand-300, #a5b4fc);
  color: var(--brand-700, #4338ca); box-shadow: none;
}
.pe-wm-posgrid .pe-switch-opt:active { transform: scale(.94); }
.pe-wm-posgrid .pe-switch-opt.active {
  background: var(--brand-600, #4f46e5); border-color: var(--brand-700, #4338ca);
  color: #fff;
  box-shadow: 0 2px 6px rgba(79,70,229,.35);
}
@media (max-width: 480px) {
  .pe-wm-posgrid { width: 140px !important; gap: 4px !important; padding: 4px !important; }
  .pe-wm-posgrid .pe-switch-opt { height: 34px; font-size: 14px; }
}

/* "auto" live badge on the watermark preview heading. */
.pe-wm-live-badge {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--success, #059669);
  background: rgba(5,150,105,.1);
  padding: 2px 8px; border-radius: 20px;
}

/* Saved template halo chips (replaces the old dropdown). */
.pe-wm-tpl-label { font-size: 12px; color: var(--text-3, #64748b); }
.pe-wm-tpl-chip {
  border: 1px solid var(--border-2, #cbd5e1);
  background: var(--surface-2, #f1f5f9);
  color: var(--text-2, #334155);
  border-radius: 20px;
  padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer;
  transition: all .15s;
}
.pe-wm-tpl-chip:hover { border-color: var(--brand-500, #6366f1); color: var(--brand-600, #4f46e5); background: rgba(99,102,241,.06); }
#peWmSaveAsBtn.pe-wm-template-chip { border-style: dashed; }

/* Template manager rows (Select / Edit / Delete per saved template). */
.pe-wm-tpl-manage-row {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-2, #f8fafc);
  border: 1px solid var(--border-2, #e2e8f0);
  border-radius: 10px; padding: 6px 8px;
}
.pe-wm-tpl-manage-row:hover { border-color: var(--brand-500, #6366f1); }
.pe-wm-tpl-select { flex: 1; text-align: left; justify-content: flex-start; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pe-wm-tpl-actions { display: flex; gap: 4px; flex-shrink: 0; }
.pe-wm-tpl-action {
  border: 1px solid var(--border-2, #cbd5e1); background: #fff; color: var(--text-2, #475569);
  border-radius: 8px; width: 30px; height: 28px; font-size: 13px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all .15s;
}
.pe-wm-tpl-action:hover { background: var(--surface-1, #f1f5f9); border-color: var(--brand-500, #6366f1); }
.pe-wm-tpl-del:hover { border-color: #ef4444; color: #dc2626; background: rgba(239,68,68,.06); }

/* "Templates" pill that opens the manager overlay. */
.pe-wm-tpl-open {
  width: 100%; justify-content: flex-start;
  border: 1px dashed var(--brand-400, #818cf8);
  background: rgba(99,102,241,.06); color: var(--brand-700, #4338ca);
  font-weight: 700; font-size: 14px; padding: 10px 12px; border-radius: 10px;
}
.pe-wm-tpl-open:hover { background: rgba(99,102,241,.12); }

/* Template manager overlay (dark backdrop, centered card). */
.pe-wm-tpl-overlay {
  position: fixed; inset: 0; z-index: 1100;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15,23,42,.45); backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px); padding: 18px;
}
.pe-wm-tpl-card {
  position: relative; background: #fff; border-radius: 16px;
  width: 100%; max-width: 420px; padding: 20px;
  box-shadow: 0 24px 60px rgba(15,23,42,.35); max-height: 84vh; overflow-y: auto;
}
.pe-wm-tpl-head { font-size: 16px; font-weight: 800; margin-bottom: 12px; }
.pe-wm-tpl-save { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 10px; border: 1px solid var(--border, #e2e8f0); border-radius: 10px; background: var(--surface-1, #f8fafc); margin-bottom: 10px; }
.pe-wm-tpl-save > div { width: 100%; }
.pe-wm-tpl-list { display: flex; flex-direction: column; gap: 6px; }
.pe-wm-tpl-empty { font-size: 13px; color: var(--text-3, #64748b); padding: 6px 2px; }

/* Step-4 Process call-to-action button. */
.pe-process-cta { width: 100%; padding: 13px 16px; font-size: 15px; font-weight: 700; border-radius: 10px; }

/* ============================================
   Process overlay (blurs everything behind it)
   + download popup list
   ============================================ */
.pe-process-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15,23,42,.4);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  padding: 20px;
}
.pe-process-card {
  width: 100%; max-width: 420px;
  background: #fff; border-radius: 18px;
  padding: 22px 24px;
  box-shadow: 0 24px 60px rgba(15,23,42,.35);
}
.pe-process-head { display: flex; justify-content: space-between; align-items: center; font-size: 15px; font-weight: 700; margin-bottom: 12px; }
.pe-process-count { font-size: 13px; color: var(--brand-600, #4f46e5); font-weight: 700; }
.pe-process-track { height: 12px; background: var(--surface-2, #eef2f7); border-radius: 8px; overflow: hidden; position: relative; }
.pe-process-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--brand-500, #6366f1), var(--accent-500, #06b6d4));
  border-radius: 8px; transition: width .28s ease;
}
.pe-process-text { margin-top: 12px; font-size: 13px; color: var(--text-2, #475569); text-align: center; }

/* Download popup (individual rows + zip) */
/* Download popup (individual rows + zip). The sheet fills most of the viewport
   and scrolls to its very bottom so ALL processed images can be seen. */
.pe-finish-overlay.pe-dl-box-wrap { align-items: center; }
.pe-finish-box.pe-dl-box {
  max-width: 520px; width: 100%;
  display: flex; flex-direction: column;
  max-height: calc(100vh - 40px);
  padding: 0;
  overflow: hidden;
}
/* Header: sticky in effect (box is a flex column; header sits first), with an
   always-visible close button top-right so it's easy to dismiss. */
.pe-dl-head {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border, #e2e8f0);
  background: #fff; position: sticky; top: 0; z-index: 1;
}
.pe-dl-head .pe-dl-title { font-weight: 800; font-size: 15px; }
.pe-dl-head .pe-dl-count { font-size: 12px; color: var(--brand-600, #4f46e5); font-weight: 700; background: rgba(99,102,241,.1); padding: 2px 8px; border-radius: 20px; }
.pe-dl-close-top { margin-left: auto; padding: 6px 12px; border-radius: 8px; }
/* Scrollable body — scroll to the very bottom reveals all images. */
.pe-dl-scroll { overflow-y: auto; padding: 14px 18px 20px; }
.pe-dl-actions { display: flex; gap: 8px; margin: 0 0 10px; }
.pe-dl-box .btn-primary { margin-top: 0; }
.pe-dl-sec { margin-top: 8px; }
.pe-dl-lbl {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-2, #334155); margin: 10px 0 6px;
}
/* Preview strip — shows one/two images at a time and scrolls horizontally for
   the rest, so many edited images can be browsed without filling the sheet. */
.pe-dl-strip {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px;
  -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.pe-dl-strip-item {
  flex: 0 0 auto; width: 128px; height: 128px; scroll-snap-align: start;
  border-radius: 10px; overflow: hidden;
  border: 1px solid var(--border, #e2e8f0); background: #f8fafc;
}
.pe-dl-strip-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 520px) {
  .pe-dl-strip-item { width: 104px; height: 104px; }
}
.pe-dl-single { text-decoration: none; }
.pe-dl-list { display: grid; gap: 2px; border: 1px solid var(--border, #e2e8f0); border-radius: 10px; padding: 4px; overflow: hidden; }
.pe-dl-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--text, #0f172a);
}
.pe-dl-row:hover { background: var(--surface-2, #f1f5f9); }
.pe-dl-ico { font-size: 18px; }
.pe-dl-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; }
.pe-dl-go { color: var(--brand-600, #4f46e5); font-size: 14px; }
.pe-dl-foot { display: flex; padding: 12px 18px; border-top: 1px solid var(--border, #e2e8f0); background: #fff; }

/* ===================== Step 1 — Project name + Recent photo projects ===================== */
/* Step-1 toolbar: buttons on the left, project name input to the RIGHT of Upload New. */
.pe-step1-tools { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.pe-step1-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.pe-projname {
  flex: 1 1 220px; display: flex; flex-direction: column; gap: 4px; min-width: 200px;
}
.pe-projname-lbl {
  font-size: 12.5px; font-weight: 600; color: var(--text-2, #475569);
}
.pe-projname-lbl i { font-weight: 400; color: var(--text-3, #94a3b8); }
.pe-projname input {
  width: 100%; padding: 8px 11px; border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px; font-size: 13.5px; background: #fff; color: var(--text-1, #0f172a);
  box-sizing: border-box;
}
.pe-projname input:focus { outline: none; border-color: var(--brand-500, #6366f1); box-shadow: 0 0 0 3px rgba(99,102,241,.12); }
.pe-proj-hist {
  margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--border, #e2e8f0);
}
.pe-proj-hist-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.pe-proj-hist-count {
  font-size: 11.5px; font-weight: 700; color: var(--brand-600, #4f46e5);
  background: rgba(99, 102, 241, .09); padding: 2px 9px; border-radius: 20px;
}
.pe-proj-hist-empty {
  font-size: 13px; color: var(--text-3, #94a3b8); background: var(--surface-2, #f8fafc);
  border: 1px dashed var(--border, #e2e8f0); border-radius: 10px; padding: 14px 16px;
}
.pe-proj-grid { display: grid; gap: 12px; }

/* ---- the result page's summary ("what you asked for") ------------------- */
/* The popup asks the questions, so the page has to SAY what was asked: an
   invisible wrong answer (the wrong format, a watermark nobody wanted) is only
   discovered after a whole album has been processed. */
.pe-summary {
  background: #fff; border: 1px solid var(--border, #e2e8f0); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 18px;
}
.pe-summary-head { font-weight: 700; font-size: 14.5px; color: var(--text-1, #0f172a); margin-bottom: 8px; }
.pe-sum-row {
  display: flex; align-items: baseline; gap: 8px; font-size: 13px;
  color: var(--text-2, #475569); padding: 2px 0;
}
.pe-sum-row span { width: 20px; text-align: center; }
.pe-sum-row b { color: var(--text-1, #0f172a); }
.pe-summary-hint { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border, #e2e8f0); font-size: 12.5px; color: var(--text-3, #94a3b8); }
/* The ONE door left on the result page: back into the questions for a run that has
   NOT been processed yet (closing the popup would otherwise strand it here). It sits
   inside the receipt, about THAT run — never a bare header button that silently
   edits "whatever run happens to be in memory". */
.pe-sum-continue { display: block; width: 100%; margin-top: 10px; }

.pe-proj-card {
  display: flex; gap: 12px; align-items: flex-start;
  background: #fff; border: 1px solid var(--border, #e2e8f0); border-radius: 12px;
  padding: 10px; transition: box-shadow .15s ease, border-color .15s ease;
}
.pe-proj-card:hover { border-color: var(--brand-500, #6366f1); box-shadow: 0 4px 14px rgba(15,23,42,.06); }
.pe-proj-thumb {
  position: relative; width: 64px; height: 64px; flex: 0 0 64px; border-radius: 10px;
  overflow: hidden; border: 1px solid var(--border, #e2e8f0); background: #f1f5f9;
  display: flex; align-items: center; justify-content: center;
}
.pe-proj-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pe-proj-thumb-empty { font-size: 26px; }
.pe-proj-badge {
  position: absolute; right: 4px; bottom: 4px; background: rgba(15,23,42,.72); color: #fff;
  font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 20px;
}
.pe-proj-info { flex: 1; min-width: 0; }
.pe-proj-name-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pe-proj-name { font-weight: 700; font-size: 14px; color: var(--text-1, #0f172a); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.pe-proj-ren-inline {
  border: none; background: transparent; cursor: pointer; padding: 2px 4px;
  font-size: 14px; line-height: 1; border-radius: 6px; color: var(--text-3, #94a3b8);
  flex: 0 0 auto;
}
.pe-proj-ren-inline:hover { background: var(--surface-2, #f1f5f9); color: var(--brand-600, #4f46e5); }
.pe-proj-meta { font-size: 11.5px; color: var(--text-3, #94a3b8); margin: 2px 0 8px; }
.pe-proj-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.pe-proj-btn { font-size: 12px; }
.pe-proj-del { color: var(--danger, #dc2626); }
.pe-proj-expire {
  margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border, #e2e8f0);
  font-size: 11.5px; color: var(--danger, #dc2626); font-weight: 700;
}
@media (min-width: 700px) {
  .pe-proj-grid { grid-template-columns: 1fr 1fr; }
}

/* List view (the shared ▦/☰ toggle): one dense row per project instead of a tile,
   with a tick box in front once the user is in list mode. Same card markup — only
   the layout and the thumb size change, so no action is ever lost by switching. */
.pe-proj-grid.st-list { display: flex; flex-direction: column; gap: 8px; }
.pe-proj-grid.st-list .pe-proj-card { align-items: center; padding: 8px 12px; }
.pe-proj-grid.st-list .pe-proj-thumb { width: 44px; height: 44px; flex: 0 0 44px; }
.pe-proj-grid.st-list .pe-proj-actions { flex-wrap: nowrap; }