/* KStudio - app-specific styles on top of Bootstrap 5.3.3.
   Motion follows the transitions.dev token scale (fast 150ms / base 250ms ease-out). */
:root {
  /* ----- design tokens: single source of truth for the site palette -----
     semantic vars (--bg/--text/...) switch per theme; palette tokens below are
     the fixed values they (and component rules) are built from. */
  --zinc-900: #18181b;   /* primary buttons, headings, body text */
  --zinc-700: #3f3f46;
  --zinc-500: #71717a;   /* muted text */
  --zinc-400: #a1a1aa;   /* muted on dark */
  --zinc-300: #d4d4d8;
  --zinc-200: #e4e4e7;   /* borders */
  --zinc-100: #f4f4f5;   /* text on dark */
  --dark-bg: #131316;
  --dark-panel: #1e1e22;
  --dark-border: #333339;
  --accent: #2563eb;        /* links, badges, active states */
  --accent-deep: #1d4ed8;   /* accent text on light chips */
  --accent-soft: #bfdbfe;   /* chip borders */
  --accent-bright: #7aa2ff; /* accent on dark */
  --blue-50: #eff6ff;
  --success: #16a34a;       /* privacy/safe accents only */
  --ink: #0f172a;           /* legacy watermark UI */
  --slate-500: #64748b;
  --slate-300: #cbd5e1;
  --slate-200: #e2e8f0;
  --slate-50: #f8fafc;
  --zinc-600: #52525b;
  --slate-100: #f1f5f9;
  --slate-700: #334155;
  --success-deep: #166534;
  --success-bs: #198754;
  --dark-raised: #1a1a1f;
}
  --bg: #fafafa; --panel: #ffffff; --border: var(--zinc-200); --text: var(--zinc-900); --muted: var(--zinc-500);
  --t-fast: 150ms ease-out; --t-base: 250ms ease-out;
}
html, body { height: 100%; }
body {
  background: var(--bg); color: var(--text);
  display: flex; flex-direction: column; overflow: hidden;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.brand { font-size: 19px; font-weight: 800; letter-spacing: .3px; }
.brand span { color: var(--zinc-600); }

/* pills: black active pill, quiet inactive */
.nav-pills { gap: 4px; }
.nav-pills .nav-link { color: var(--muted); padding: 6px 14px; font-size: 13px; border-radius: 8px; transition: background var(--t-fast), color var(--t-fast); }
.nav-pills .nav-link:hover { background: var(--zinc-100); color: var(--text); }
.nav-pills .nav-link.active { background: var(--zinc-900); color: #fff; }
.nav-pills-sm .nav-link { padding: 4px 10px; font-size: 12px; }

#layout { flex: 1; display: flex; min-height: 0; }

/* left icon rail */
#rail {
  width: 78px; min-width: 78px; border-right: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 4px; padding: 8px 6px; overflow-y: auto;
}
#rail button {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: none; border-radius: 10px; padding: 9px 2px;
  color: var(--muted); cursor: pointer; font-size: 10px; font-weight: 600;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
#rail button i { font-style: normal; font-size: 17px; line-height: 1; }
#rail button:hover { background: var(--zinc-100); }
#rail button.active { background: var(--zinc-900); color: #fff; }
#rail button:active { transform: scale(.94); }

/* filmstrip */
#filmBar { display: flex; align-items: center; gap: 12px; padding: 8px 14px; }
#thumbStrip { flex: 1; display: flex; gap: 8px; overflow-x: auto; }
.thumb {
  position: relative; width: 56px; height: 56px; border-radius: 8px; overflow: hidden;
  border: 2px solid var(--border); cursor: pointer; flex-shrink: 0; background: #000;
  transition: border-color var(--t-fast), transform var(--t-fast);
  animation: thumb-pop 250ms ease-out;
}
@keyframes thumb-pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.thumb.active { border-color: var(--zinc-900); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb .idx { position: absolute; bottom: 2px; right: 2px; background: rgba(0,0,0,.7); color: #fff; font-size: 9px; padding: 0 4px; border-radius: 4px; }
.thumb .dl { position: absolute; top: 2px; right: 2px; background: rgba(0,0,0,.7); color: #fff; border: none; border-radius: 4px; font-size: 10px; padding: 0 5px; cursor: pointer; }

/* stage */
#stage { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
#previewToolbar { display: flex; align-items: center; gap: 16px; padding: 8px 16px; }
.zoom { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); margin: 0; }
.zoom input { width: 140px; }
#previewWrap { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 16px; }
#preview { max-width: 100%; max-height: 100%; border-radius: 8px; box-shadow: 0 4px 24px rgba(0,0,0,.14); cursor: grab; }
#preview.crop-active { touch-action: none; }
#preview.dragging { cursor: grabbing; }
#emptyState { position: absolute; color: var(--muted); font-size: 15px; pointer-events: none; }
#ppStage { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 10px; gap: 10px; overflow-y: auto; }
#ppStageCanvas { max-width: 100%; max-height: 100%; border-radius: 8px; box-shadow: 0 4px 24px rgba(0,0,0,.14); }
#ppStageHint { position: absolute; color: var(--muted); font-size: 14px; text-align: center; padding: 0 24px; pointer-events: none; }

/* controls column */
#controls { width: 300px; min-width: 300px; overflow-y: auto; padding: 10px; border-left: 1px solid var(--border); position: relative; z-index: 2; background: #fff; flex: none; }
.card { border: 1px solid var(--border); border-radius: 12px; box-shadow: none; animation: panel-in 250ms ease-out; }
@keyframes panel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.card-title { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin: 0 0 10px; }
h3.card-title { margin-top: 14px; }
.form-label { font-size: 12.5px; color: var(--muted); display: block; margin-top: 8px; width: 100%; }
.form-label output { float: right; color: var(--text); }
.form-range { accent-color: var(--zinc-900); }
.form-range::-webkit-slider-thumb { background: var(--zinc-900); }
.form-range::-moz-range-thumb { background: var(--zinc-900); }
.form-check { font-size: 12.5px; color: var(--text); margin-top: 8px; display: flex; gap: 8px; align-items: center; }
.form-check-input:checked { background-color: var(--zinc-900); border-color: var(--zinc-900); }

#dropzone {
  border: 1.5px dashed var(--border); border-radius: 10px; padding: 14px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center; color: var(--muted); font-size: 13px;
  transition: border-color var(--t-fast), background var(--t-fast);
}
#dropzone.over { border-color: var(--zinc-900); background: var(--zinc-100); }
#dropzone strong { color: var(--text); font-size: 14px; }

.tpl { text-align: left; display: flex; flex-direction: column; gap: 2px; }
.tpl small { color: var(--muted); font-weight: 400; }

#presetButtons { display: flex; flex-direction: column; gap: 6px; }
.preset {
  display: flex; justify-content: space-between; gap: 8px; text-align: left;
  background: #fff; border: 1px solid var(--border); color: var(--muted);
  border-radius: 8px; padding: 8px 12px; font-size: 12.5px; cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.preset.active { border-color: var(--zinc-900); background: var(--zinc-100); color: var(--text); font-weight: 600; }

/* passport controls */
.swatches { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.swatch { width: 30px; height: 30px; border-radius: 8px; border: 2px solid #b6b6bd; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); cursor: pointer; padding: 0; transition: border-color var(--t-fast), transform var(--t-fast); }
.swatch.active { border-color: var(--zinc-900); transform: scale(1.12); }
.backdrops { display: flex; gap: 8px; margin-top: 8px; }
.backdrop { width: 52px; height: 66px; border-radius: 8px; border: 2px solid var(--border); cursor: pointer; object-fit: cover; padding: 0; background: #eee; transition: border-color var(--t-fast); }
.backdrop.active { border-color: var(--zinc-900); }
#ppPreviewWrap { margin-top: 10px; display: flex; justify-content: center; }
#ppPreview { max-width: 100%; border-radius: 8px; border: 1px solid var(--border); }
#ppStatus { font-size: 11.5px; color: var(--muted); margin-top: 8px; }
.country-list { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; margin-top: 6px; }
.country {
  display: flex; align-items: center; gap: 8px; text-align: left;
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 10px; font-size: 12px; cursor: pointer; color: var(--text);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.country small { color: var(--muted); margin-left: auto; }
.country.active { border-color: var(--zinc-900); background: var(--zinc-100); font-weight: 600; }

/* bottom action bar */
#actionBar { display: flex; align-items: center; gap: 10px; padding: 8px 14px; flex-wrap: wrap; }
#metaInfo { margin-right: auto; }

/* update consent popup */
#updatePopup { position: fixed; inset: 0; background: rgba(20,20,25,.35); display: flex; align-items: center; justify-content: center; z-index: 9999; animation: panel-in 250ms ease-out; }
#updatePopup[hidden] { display: none; }
#updatePopup .card { max-width: 380px; }

/* tool panels */
.toolPanel[hidden] { display: none; }

/* responsive: stack on phones/tablets */
@media (max-width: 991.98px) {
  body { overflow: auto; }
  #layout { flex-direction: column; }
  #rail {
    width: 100%; min-width: 0; flex-direction: row; overflow-x: auto; overflow-y: hidden;
    border-right: none; border-bottom: 1px solid var(--border); padding: 6px;
  }
  #rail button { min-width: 62px; }
  #layout { flex: none; overflow: visible; }
  #controls { width: 100%; min-width: 0; border-left: none; border-top: 1px solid var(--border); flex: none; overflow: visible; }
  #previewWrap { flex: none; height: auto; min-height: 0; overflow: visible; padding: 10px; }
  #preview { max-height: 62vh; }
  #metaInfo { width: 100%; order: 5; }
}

/* segmented full-width pill groups (mobile-friendly) */
.nav-pills.fill { display: flex; width: 100%; }
.nav-pills.fill .nav-item { flex: 1; display: flex; }
.nav-pills.fill .nav-link { flex: 1; text-align: center; }

/* passport 3-step flow */
.pp-step { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; margin: 14px 0 8px; }
.pp-stepnum { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--zinc-900); color: #fff; font-size: 12px; }
#ppSheetPreviewWrap { display: flex; justify-content: center; }
#ppSheetPreview { max-width: 100%; border: 1px solid var(--border); border-radius: 8px; }

.pp-checklist { border: 1px dashed var(--border); border-radius: 8px; padding: 8px 10px; }
.pp-checklist ul { margin: 4px 0 0; padding-left: 18px; }

/* ----- print pipeline ----- */
#printArea { display: none; }
@media print {
  body > *:not(#printArea) { display: none !important; }
  #printArea { display: block !important; margin: 0; padding: 0; }
  #printArea img { width: 100%; height: auto; display: block; }
  #printOverlay { display: none !important; }
}

/* ----- printer animation (screen only) - receipt style ----- */
#printOverlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(255,255,255,.94);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
}
.printer-anim { position: relative; width: 220px; }
.printer-bar {
  position: relative; z-index: 2;
  width: 220px; height: 30px;
  background: linear-gradient(#3a3f47, #22262c);
  border-radius: 15px;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.printer-slot {
  position: absolute; bottom: 4px; left: 24px; width: 172px; height: 5px;
  background: #0c0e11; border-radius: 3px;
}
.printer-light {
  position: absolute; top: 12px; right: 12px; width: 6px; height: 6px; border-radius: 50%;
  background: #4ade80; animation: blink 1s steps(2, start) infinite;
}
@keyframes blink { to { visibility: hidden; } }
.printer-sheet {
  position: relative; z-index: 1;
  width: 186px; margin: -4px auto 0;
  background: #fff; border: 1px solid #e2e2e2; border-top: none;
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
  overflow: hidden;
  max-height: 0;
  animation: sheet-feed 14s cubic-bezier(.4,0,.3,1) infinite;
}
@keyframes sheet-feed {
  0% { max-height: 0; }
  65% { max-height: 236px; }
  88% { max-height: 236px; opacity: 1; }
  100% { max-height: 236px; opacity: 0; }
}
.printer-photos {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px 10px 6px;
}
.printer-photos img {
  width: 100%; aspect-ratio: 35 / 45; object-fit: cover; display: block;
  border: 1px solid #d8d8d8; background: #f4f4f4;
}
.printer-tear {
  height: 8px; margin-top: 4px;
  background: repeating-linear-gradient(90deg, transparent 0 6px, #fff 6px 12px);
  border-top: 1px dashed #d0d0d0;
}
.printer-label { color: #2b2f36; font-size: 15px; }

/* ----- passport studio redesign (user mock, reproduced with local assets) ----- */
.ppTracker {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  box-sizing: border-box; width: 100%; padding: 10px 8px; margin-bottom: 10px;
  background: #fff; border: 1px solid var(--slate-200); border-radius: 14px;
}
.ppTrackStep { display: flex; align-items: center; gap: 5px; opacity: .45; }
.ppTrackStep.active { opacity: 1; }
.ppTrackStep.done { opacity: 1; }
.ppTrackDot {
  width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  background: var(--slate-100); border: 1px solid var(--slate-300); color: var(--slate-500);
}
/* transitions.dev checkbox-check (25): box fills first, check stroke draws in after */
:root {
  --check-box: 150ms; --check-draw: 350ms; --check-delay: 0ms; --check-uncheck: 150ms;
  --check-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
.ppTrackDot { transition: background var(--check-box) var(--check-ease), border-color var(--check-box) var(--check-ease), color var(--check-box) var(--check-ease); }
.ppTrackDot svg { width: 12px; height: 12px; display: none; }
.ppTrackDot svg path { stroke: #fff; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 15; stroke-dashoffset: 15; transition: stroke-dashoffset var(--check-uncheck) var(--check-ease); }
.ppTrackStep.done .ppTrackDot .ppTrackNum { display: none; }
.ppTrackStep.done .ppTrackDot svg { display: block; }
.ppTrackStep.done .ppTrackDot svg path { stroke-dashoffset: 0; transition: stroke-dashoffset var(--check-draw) var(--check-ease) var(--check-delay); }
@media (max-width: 720px) {
  .ppTracker { gap: 6px; padding: 8px 10px; }
  .ppTrackBar { min-width: 8px; }
  .ppTrackStep:not(.active) .ppTrackTxt { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ppTrackDot, .ppTrackDot svg path { transition: none !important; } }
.ppTrackStep.active .ppTrackDot { background: var(--accent); border-color: var(--accent); color: #fff; }
.ppTrackStep.done .ppTrackDot { background: var(--success); border-color: var(--success); color: #fff; }
.ppTrackTxt { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.ppTrackBar { width: 34px; height: 2px; background: var(--slate-200); border-radius: 2px; }

.ppCanvasCard {
  background: #fff; border: 1px solid var(--slate-200); border-radius: 16px;
  overflow: hidden; display: flex; flex-direction: column; flex: 1;
}
.ppCanvasHead {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; background: var(--slate-50); border-bottom: 1px solid var(--slate-200);
  font-size: 14px; font-weight: 600; color: var(--ink);
}
.ppCanvasHead button {
  border: 1px solid var(--accent-soft); background: #fff; color: var(--accent);
  font-size: 12px; font-weight: 600; border-radius: 8px; padding: 4px 10px;
}
.ppCanvasBody {
  position: relative; flex: 1; min-height: 340px;
  display: flex; align-items: center; justify-content: center;
  background: var(--slate-100);
}
#ppStageCanvas { max-width: 100%; max-height: 52vh; touch-action: none; cursor: grab; }
#ppSizeTag {
  background: #e0e7ff; color: #3730a3; font-size: 11px; font-weight: 600;
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
.ppHeadRight { display: flex; align-items: center; gap: 8px; }
.ppAdjustStrip {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; background: #fff; border-top: 1px solid var(--slate-200);
}
.ppAdjustLabel { font-size: 12px; font-weight: 600; color: var(--slate-500); }
.ppAdjustBtn {
  border: 1px solid var(--slate-300); background: #fff; color: var(--ink);
  font-size: 12px; font-weight: 600; border-radius: 8px; padding: 5px 12px;
}
.ppAdjustZoom { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--slate-500); flex: 1; min-width: 160px; }
.ppAdjustZoom .form-range { flex: 1; }
.ppCanvasFoot {
  padding: 8px 14px; background: var(--slate-50); border-top: 1px solid var(--slate-200);
  font-size: 12px; font-weight: 600; color: var(--success);
}

.ppSec {
  background: #fff; border: 1px solid var(--slate-200); border-radius: 16px;
  margin-bottom: 12px; box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.ppSecBody { padding: 14px; }
.ppSecHead { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ppSecHead h2 { font-size: 14px; font-weight: 700; color: var(--ink); margin: 0; flex: 1; }
.ppSecNum {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  background: #dbeafe; color: var(--accent-deep);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.ppSecTag {
  font-size: 11px; font-weight: 600; color: #15803d;
  background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 999px; padding: 2px 8px;
}
.ppHubPrimary {
  width: 100%; border: none; border-radius: 12px; padding: 13px 14px; margin-bottom: 8px;
  background: var(--zinc-900); color: #fff; font-size: 15px; font-weight: 700;
  box-shadow: 0 2px 6px rgba(24,24,27,.25);
}
.ppHubPrimary:disabled { background: var(--zinc-400); box-shadow: none; }
.ppHubBtn {
  width: 100%; border: 1px solid var(--slate-300); border-radius: 12px; padding: 9px 14px; margin-bottom: 8px;
  background: #fff; color: var(--ink); font-size: 13px; font-weight: 600;
}
.ppHubBtn:disabled { color: #94a3b8; }
.ppPrivacy {
  margin-top: 2px; padding: 9px 11px; border-radius: 12px;
  background: #f0fdf4; border: 1px solid #bbf7d0;
  font-size: 11px; color: var(--success-deep); line-height: 1.35;
}
/* country list as wrap pills */
.country-list { display: flex; flex-wrap: wrap; gap: 6px; }
.country-list .country {
  border: 1px solid var(--slate-200); background: var(--slate-50); color: var(--ink);
  border-radius: 9px; padding: 5px 10px; font-size: 12px; font-weight: 600;
}
.country-list .country.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ----- home hub (user mock, local assets) ----- */
#homeStage { flex: 1; overflow-y: auto; padding: 28px 18px; display: flex; flex-direction: column; align-items: center; }
.homeHero { margin: 12px 0 26px; }
.homeHero h1 { font-family: 'Newsreader', Georgia, 'Times New Roman', serif; font-size: clamp(26px, 2.6vw, 34px); font-weight: 400; letter-spacing: -.01em; color: var(--ink); }
.homeHero p { color: var(--slate-500); font-size: 15px; margin: 6px 0 0; }
.homeCards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; width: 100%; max-width: 860px; }
.homeCard {
  text-align: left; background: #fff; border: 1px solid var(--slate-200); border-radius: 16px;
  padding: 20px; display: flex; flex-direction: column; gap: 6px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04); transition: transform .15s, box-shadow .15s;
}
.homeCard:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15,23,42,.10); }
.homeCardTag {
  align-self: flex-start; font-size: 11px; font-weight: 600; color: var(--accent-deep);
  background: var(--blue-50); border: 1px solid var(--accent-soft); border-radius: 8px; padding: 2px 8px;
}
.homeCardVer { align-self: flex-start; font-size: 10.5px; font-weight: 600; color: var(--muted); margin-top: 4px; }

.homeCard h2 { font-size: 17px; font-weight: 700; color: var(--ink); margin: 6px 0 0; }
.homeCard p { font-size: 13px; color: var(--slate-500); margin: 0; line-height: 1.45; }
.homeCardGo { margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--accent); }
.homeFoot { margin-top: 26px; font-size: 12px; color: var(--slate-500); text-align: center; }

/* passport stage column layout fixes */
.ppTracker { flex: none; }
.ppCanvasCard { flex: none; }
@media (max-width: 480px) {
  .ppTrackTxt { font-size: 11px; }
  .ppTrackDot { width: 20px; height: 20px; font-size: 11px; }
  .ppTrackBar { width: 12px; }
  .ppTracker { gap: 5px; padding: 8px 6px; }
}
/* home card images (local stand-ins for the mock art) */
.homeCardImg {
  border-radius: 10px; overflow: hidden; position: relative;
  background: var(--slate-100); margin: -6px -6px 4px;
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;   /* uniform square grid */
}
.homeCardImg img { width: 100%; height: 100%; object-fit: contain; display: block; }   /* full image visible inside the square */

/* watermark preset chips */
.wmPresetChip { display: inline-flex; align-items: center; border: 1px solid var(--accent-soft); border-radius: 8px; overflow: hidden; background: var(--blue-50); }
.wmPresetApply { border: none; background: transparent; color: var(--accent-deep); font-size: 12px; font-weight: 600; padding: 4px 8px; }
.wmPresetDel { border: none; border-left: 1px solid var(--accent-soft); background: transparent; color: var(--slate-500); font-size: 13px; padding: 4px 7px; }

/* placement preset cards */
.wmPlaceGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 6px; }
.wmPlace { text-align: left; background: #fff; border: 1px solid var(--slate-200); border-radius: 12px; padding: 8px 10px; display: flex; flex-direction: column; gap: 1px; }
.wmPlace strong { font-size: 12px; color: var(--ink); }
.wmPlace span { font-size: 10px; color: var(--slate-500); }
.wmPlace.active { background: var(--blue-50); border-color: #93c5fd; }
.wmPlace.active strong { color: var(--accent-deep); }

/* watermark tracker + nav arrows */
.wmTracker { margin: 8px 12px 0; width: auto; }
.wmNav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 20;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.92); border: 1px solid var(--slate-200); color: var(--slate-700);
  font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(15,23,42,.12);
}
.wmNavL { left: 24px; } .wmNavR { right: 24px; }

/* hold-to-original pill */
#peekPill {
  position: absolute; top: 26px; left: 24px; z-index: 21;
  background: #fbbf24; color: var(--ink); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  padding: 4px 10px; border-radius: 999px; box-shadow: 0 2px 8px rgba(15,23,42,.18);
}

/* ----- passport transform/color panel ----- */
.ppPanel { border-top: 1px solid var(--zinc-200); }
.ppPanelTabs { display: flex; gap: 4px; padding: 6px 10px 0; }
.ppPanelTab { border: 1px solid var(--zinc-200); border-bottom: none; background: var(--zinc-100); color: var(--zinc-600); font-size: 12.5px; font-weight: 600; padding: 5px 14px; border-radius: 7px 7px 0 0; cursor: pointer; }
.ppPanelTab.active { background: #fff; color: var(--zinc-900); }
.ppPanelPane { border: 1px solid var(--zinc-200); border-radius: 0 8px 8px 8px; margin: 0 10px 8px; padding: 10px; background: #fff; }
.ppBtnRow { display: flex; flex-wrap: wrap; gap: 6px; }
.ppCtlBtn { min-width: 34px; height: 32px; border: 1px solid var(--zinc-300); background: #fff; color: var(--zinc-900); border-radius: 7px; font-size: 15px; line-height: 1; cursor: pointer; }
.ppCtlBtn:active { background: var(--zinc-200); }
.ppSliderRow { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--zinc-700); margin-top: 8px; }
.ppSliderRow .form-range { flex: 1; }
.ppActionRow { margin-top: 10px; }
#ppCheckOverlay { position: absolute; left: 10px; bottom: 10px; z-index: 5; background: rgba(255,255,255,.96); border: 1px solid var(--zinc-300); border-radius: 8px; padding: 8px 11px; font-size: 12px; line-height: 1.5; color: var(--zinc-900); box-shadow: 0 4px 14px rgba(0,0,0,.12); max-width: 260px; }
.ppCanvasBody { position: relative; }

/* merged feature components */
.topActions,.filterPresets,.exportActions,.exportPreviews{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.topActions select{padding:5px;border:1px solid #ccc;border-radius:6px;background:#fff;color:var(--zinc-900)}.filterPresets button{border:1px solid #bbb;background:#fff;color:var(--zinc-900);border-radius:6px;padding:5px 8px}.filterPresets button.active{background:var(--zinc-900);color:#fff}.outputChecks{position:absolute;right:24px;bottom:22px;background:#fff;padding:7px 10px;border-radius:8px;box-shadow:0 2px 12px #0002;font-size:12px;display:flex;gap:9px}.outputChecks .pass{color:var(--success-bs)}.outputChecks .fail{color:#b02a37}.guideLegend{position:absolute;left:10px;top:10px;z-index:5;background:#fff;padding:6px 9px;border-radius:6px;font-size:11px;box-shadow:0 2px 8px #0002}.templateVerification{font-size:12px;margin:8px 0;padding:7px;background:#eef7ff;border-radius:6px}.templateVerification a{color:#0b5ed7}.exportModal{position:fixed;z-index:3000;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;padding:16px}.exportModal[hidden]{display:none}.exportCard{background:#fff;color:var(--zinc-900);max-width:760px;width:100%;max-height:92vh;overflow:auto;padding:20px;border-radius:12px}.exportPreviews figure{flex:1;min-width:220px;text-align:center}.exportPreviews canvas{max-width:100%;max-height:45vh;background:#eee;box-shadow:0 2px 12px #0003}.exportActions{justify-content:flex-end;margin-top:14px}

/* ===== Motion tokens (transitions.dev token scale) ===== */
:root{
  --duration-stagger:40ms;--duration-micro:80ms;--duration-quick:150ms;--duration-fast:250ms;
  --duration-medium:350ms;--duration-slow:400ms;--duration-very-slow:500ms;
  --ease-smooth-out:cubic-bezier(0.22,1,0.36,1);--ease-in-out:ease-in-out;--ease-out:ease-out;--ease-linear:linear;
  --ease-bounce:cubic-bezier(0.34,1.36,0.64,1);--ease-bounce-strong:cubic-bezier(0.34,3.85,0.64,1);
  --distance-micro:4px;--distance-small:6px;--distance-base:8px;--distance-medium:12px;--distance-large:30px;
  --blur-small:2px;--blur-medium:3px;--blur-large:8px;
  --scale-large:.96;--scale-medium:.97;--scale-small:.98;--scale-tiny:.99;
}

/* ===== Page side-by-side (studio switching) ===== */
#stage.ks-page-out-left{opacity:0;transform:translateX(calc(var(--distance-base)*-1));transition:opacity var(--duration-quick) var(--ease-in-out),transform var(--duration-quick) var(--ease-in-out)}
#stage.ks-page-out-right{opacity:0;transform:translateX(var(--distance-base));transition:opacity var(--duration-quick) var(--ease-in-out),transform var(--duration-quick) var(--ease-in-out)}
#stage.ks-page-in-left{animation:ksPageInLeft var(--duration-fast) var(--ease-smooth-out)}
#stage.ks-page-in-right{animation:ksPageInRight var(--duration-fast) var(--ease-smooth-out)}
@keyframes ksPageInLeft{from{opacity:0;transform:translateX(calc(var(--distance-base)*-1))}to{opacity:1;transform:translateX(0)}}
@keyframes ksPageInRight{from{opacity:0;transform:translateX(var(--distance-base))}to{opacity:1;transform:translateX(0)}}

/* ===== Panel reveal (tool panels, passport panel) ===== */
.toolPanel:not([hidden]),#panel-passport:not([hidden]){animation:ksPanelIn var(--duration-slow) var(--ease-smooth-out)}
@keyframes ksPanelIn{from{opacity:0;transform:translateY(var(--distance-base))}to{opacity:1;transform:translateY(0)}}

/* ===== Modal open/close (export review) ===== */
#exportModal:not([hidden]){animation:ksFadeIn var(--duration-fast) var(--ease-smooth-out)}
#exportModal:not([hidden]) .exportCard{animation:ksModalIn var(--duration-fast) var(--ease-smooth-out)}
#exportModal.ks-closing{opacity:0;transition:opacity var(--duration-quick) var(--ease-in-out)}
#exportModal.ks-closing .exportCard{transform:scale(var(--scale-large));opacity:0;transition:transform var(--duration-quick) var(--ease-in-out),opacity var(--duration-quick) var(--ease-in-out)}
@keyframes ksFadeIn{from{opacity:0}to{opacity:1}}
@keyframes ksModalIn{from{opacity:0;transform:scale(var(--scale-large))}to{opacity:1;transform:scale(1)}}
.exportCard{will-change:transform,opacity}

/* ===== Menu dropdown (origin-aware popover menus) ===== */
.ks-dropdown{transform-origin:top right;transform:scale(var(--scale-medium));opacity:0;pointer-events:none;transition:transform var(--duration-fast) var(--ease-smooth-out),opacity var(--duration-fast) var(--ease-smooth-out);will-change:transform,opacity}
.ks-dropdown.is-open{transform:scale(1);opacity:1;pointer-events:auto}
.ks-dropdown.is-closing{transform:scale(var(--scale-tiny));opacity:0;pointer-events:none;transition:transform var(--duration-quick) var(--ease-in-out),opacity var(--duration-quick) var(--ease-in-out)}

/* ===== Tabs (studio tabs, panel tabs) ===== */
#studioTabs .nav-link,.ppPanelTab{transition:color var(--duration-fast) var(--ease-smooth-out),background-color var(--duration-fast) var(--ease-smooth-out),border-color var(--duration-fast) var(--ease-smooth-out)}

/* ===== Home cards stagger-in ===== */
.homeCard{animation:ksCardIn var(--duration-slow) var(--ease-smooth-out) backwards;transition:transform var(--duration-fast) var(--ease-smooth-out),box-shadow var(--duration-fast) var(--ease-smooth-out)}
.homeCard:nth-child(2){animation-delay:var(--duration-stagger)}
.homeCard:nth-child(3){animation-delay:calc(var(--duration-stagger)*2)}
.homeCard:hover{transform:translateY(calc(var(--distance-micro)*-1))}
@keyframes ksCardIn{from{opacity:0;transform:translateY(var(--distance-base))}to{opacity:1;transform:translateY(0)}}

/* ===== Small surfaces fade-in (pills, legends, hints) ===== */
.outputChecks:not([hidden]),.guideLegend:not([hidden]){animation:ksFadeIn var(--duration-fast) var(--ease-smooth-out)}

/* ===== Button press feedback ===== */
.btn,button{transition:transform var(--duration-micro) var(--ease-out)}
.btn:active,button:active{transform:scale(var(--scale-small))}

/* ===== Reduced motion: kill all decorative motion ===== */
@media (prefers-reduced-motion: reduce){
  #stage.ks-page-out-left,#stage.ks-page-out-right{transition:none}
  #stage.ks-page-in-left,#stage.ks-page-in-right,.toolPanel:not([hidden]),#panel-passport:not([hidden]),
  #exportModal:not([hidden]),#exportModal:not([hidden]) .exportCard,.homeCard,.outputChecks:not([hidden]),.guideLegend:not([hidden]){animation:none!important}
  #exportModal.ks-closing,#exportModal.ks-closing .exportCard,.ks-dropdown,.ks-dropdown.is-closing,
  #studioTabs .nav-link,.ppPanelTab,.btn,button,.homeCard{transition:none!important}
}

/* ===== transitions.dev free recipes - asset mapping (v54) ===== */

/* p16 Tabs sliding pill - studio tabs + passport panel tabs */
#studioTabs,.ppPanelTabs{position:relative}
#studioTabs .nav-link,.ppPanelTabs .nav-link,.ppPanelTab{position:relative;z-index:1;background:transparent!important;transition:color var(--duration-fast) var(--ease-smooth-out)}
.t-tabs-pill{position:absolute;left:0;top:0;width:0;height:30px;background:var(--zinc-900);border-radius:48px;transform:translateX(0);transition:transform var(--duration-fast) var(--ease-smooth-out),width var(--duration-fast) var(--ease-smooth-out);z-index:0;pointer-events:none}
.ppPanelTabs .t-tabs-pill{border-radius:8px}
#studioTabs .nav-link.active,.ppPanelTab.active{color:#fff!important}

/* p1 Notification badge - output-checks pill pop-in (diagonal slide + spring, small element) */
.outputChecks:not([hidden]){animation:ksBadgeIn var(--duration-very-slow) var(--ease-bounce) backwards}
@keyframes ksBadgeIn{from{opacity:0;transform:translate(-8px,8px) scale(.6)}to{opacity:1;transform:translate(0,0) scale(1)}}

/* p6 Text states swap - status lines */
.t-text-swap{display:inline-block;transform:translateY(0);opacity:1;transition:transform var(--duration-quick) var(--ease-in-out),opacity var(--duration-quick) var(--ease-in-out)}
.t-text-swap.is-exit{transform:translateY(calc(var(--distance-micro)*-1));opacity:0}
.t-text-swap.is-enter-start{transform:translateY(var(--distance-micro));opacity:0;transition:none}

/* p9 Number pop-in - output/readout value changes */
.ks-digit-pop{animation:ksDigitPop var(--duration-fast) var(--ease-smooth-out)}
@keyframes ksDigitPop{0%{transform:translateY(var(--distance-small));opacity:0}100%{transform:translateY(0);opacity:1}}

/* p10 Success check - export/save completion */
.t-success-check{display:inline-block;margin-left:6px;vertical-align:-2px;transform-origin:center;opacity:0;color:var(--success-bs);will-change:transform,opacity}
.t-success-check svg{display:block;overflow:visible}
.t-success-check[data-state="show"]{animation:ksCheckIn var(--duration-very-slow) var(--ease-bounce) forwards}
@keyframes ksCheckIn{0%{opacity:0;transform:scale(.3) rotate(-30deg)}60%{opacity:1;transform:scale(1.1) rotate(6deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
.t-success-check{transition:opacity var(--duration-fast) var(--ease-out)}

/* p12 Error state shake - validation/failure attention */
.ks-shake{animation:ksShake var(--duration-slow) cubic-bezier(.36,.07,.19,.97)}
@keyframes ksShake{10%,90%{transform:translateX(calc(var(--distance-small)*-1))}20%,80%{transform:translateX(var(--distance-base))}30%,50%,70%{transform:translateX(calc(var(--distance-base)*-1))}40%,60%{transform:translateX(var(--distance-base))}}

/* p14 Skeleton loader + reveal - processing states (opacity pulse, no blur) */
.t-skel{position:relative}
.t-skel-skeleton{position:absolute;inset:0;z-index:6;background:#e9e9ec;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:opacity var(--duration-slow) var(--ease-smooth-out)}
.t-skel-skeleton .t-skel-bar{width:55%;height:12px;border-radius:6px;background:#d7d7dc;animation:ksSkelPulse 1.1s var(--ease-in-out) infinite}
@keyframes ksSkelPulse{0%,100%{opacity:.45}50%{opacity:1}}
.t-skel.is-revealed .t-skel-skeleton{opacity:0;pointer-events:none}

/* p18 Texts reveal - home greeting lines */
.t-stagger-line{display:block;opacity:0;transform:translateY(var(--distance-medium));transition:opacity var(--duration-very-slow) var(--ease-smooth-out),transform var(--duration-very-slow) var(--ease-smooth-out)}
.t-stagger-line--2{transition-delay:var(--duration-micro)}
.t-stagger.is-shown .t-stagger-line{opacity:1;transform:translateY(0)}

/* p5 Icon swap - guides toggle (and any two-state icon) */
.t-icon-swap{position:relative;display:inline-grid;margin-right:5px;vertical-align:-1px}
.t-icon-swap .t-icon{grid-area:1/1;transition:opacity var(--duration-fast) var(--ease-in-out),transform var(--duration-fast) var(--ease-in-out)}
.t-icon-swap[data-state="on"] .t-icon[data-icon="on"],.t-icon-swap[data-state="off"] .t-icon[data-icon="off"]{opacity:1;transform:scale(1)}
.t-icon-swap[data-state="on"] .t-icon[data-icon="off"],.t-icon-swap[data-state="off"] .t-icon[data-icon="on"]{opacity:0;transform:scale(.7)}

@media (prefers-reduced-motion: reduce){
  .t-tabs-pill,.t-text-swap,.t-icon-swap .t-icon,.t-stagger-line{transition:none!important}
  .outputChecks:not([hidden]),.ks-digit-pop,.t-success-check[data-state="show"],.ks-shake,.t-skel-skeleton .t-skel-bar{animation:none!important}
  .t-success-check[data-state="show"]{opacity:1}
  .t-stagger-line{opacity:1;transform:none}
}

/* header layout: brand + tabs + actions, wrap-safe at every width */
#topbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
#topbar > .d-flex { flex: none; }
#studioTabs { flex: none; margin-bottom: 0; }
#topbar .topActions { margin-left: auto; flex-wrap: nowrap; }
@media (min-width: 992px) {
  #topbar { position: relative; }
  #studioTabs { position: absolute; left: 50%; transform: translateX(-50%); }
}
@media (max-width: 991.98px) {
  #topbar { gap: 8px; }
  #studioTabs { order: 5; flex: 1 1 100%; flex-wrap: nowrap; }
  #studioTabs .nav-item { flex: 1; }
  #studioTabs .nav-link { width: 100%; text-align: center; padding: 6px 4px; font-size: 13px; }
}
.ppTrackStep { cursor: pointer; }

/* public version stamp */
#appFooter { text-align: center; font-size: 11px; color: var(--muted, #71717a); padding: 14px 10px 18px; display: flex; align-items: center; justify-content: center; gap: 6px; }
#appFooter .indiaFlag { font-size: 13px; }
#appVersion { opacity: .65; font-size: 10px; }

/* passport stage-wise wizard */
.ppWizStep[hidden] { display: none; }
.ppWizHead { font-size: 15px; font-weight: 700; margin: 4px 0 10px; }
#ppWizNav { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 4px 2px; border-top: 1px solid var(--border); margin-top: 10px; background: #fff; position: sticky; bottom: 0; z-index: 5; }
#ppWizNav button { border: 1px solid var(--zinc-900); background: var(--zinc-900); color: #fff; border-radius: 8px; padding: 8px 18px; font-size: 13px; font-weight: 600; }
#ppWizBack { background: #fff; color: var(--zinc-900); }
#ppWizBack:disabled, #ppWizNext:disabled { opacity: .35; }
#ppWizStepLbl { font-size: 12px; color: var(--muted); font-weight: 600; }
.ppSingleHead { display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 15px; margin-bottom: 10px; }
.ppKbLive { font-size: 13px; color: var(--success-bs); font-weight: 700; }
.ppKbLive.ppKbOver { color: #b02a37; }
.ppPortalPresets { display: flex; gap: 8px; margin: 8px 0; }
.ppPortalPresets button { flex: 1; border: 1px solid var(--border); background: #fff; border-radius: 8px; padding: 8px 4px; font-size: 12px; font-weight: 600; line-height: 1.3; }
.ppPortalPresets button small { color: var(--muted); font-weight: 400; font-size: 10px; display: block; }
@media (min-width: 992px) { #ppStage { max-width: 640px; margin: 0 auto; width: 100%; } }

/* settings menu */
.setRow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.setRow select { padding: 5px; border: 1px solid #ccc; border-radius: 6px; }
.setLogView { max-height: 140px; overflow: auto; background: var(--zinc-100); border: 1px solid var(--border); border-radius: 8px; padding: 8px; font-family: ui-monospace, monospace; font-size: 10.5px; white-space: pre-wrap; word-break: break-all; color: var(--zinc-700); }

/* dark theme (first pass) */
[data-theme="dark"] body { --bg: var(--dark-bg); --panel: var(--dark-panel); --border: var(--dark-border); --text: var(--zinc-100); --muted: var(--zinc-400); }
[data-theme="dark"] .card, [data-theme="dark"] .bg-white, [data-theme="dark"] #topbar, [data-theme="dark"] #actionBar,
[data-theme="dark"] #rail, [data-theme="dark"] #filmBar, [data-theme="dark"] #previewToolbar, [data-theme="dark"] #controls,
[data-theme="dark"] .exportCard, [data-theme="dark"] #ppWizNav, [data-theme="dark"] .ppPortalPresets button { background: var(--dark-panel) !important; color: var(--zinc-100); }
[data-theme="dark"] .btn-outline-dark { color: var(--zinc-100); border-color: var(--zinc-400); }
[data-theme="dark"] .form-control, [data-theme="dark"] .form-select, [data-theme="dark"] .setRow select, [data-theme="dark"] .topActions select { background: var(--dark-bg); color: var(--zinc-100); border-color: var(--dark-border); }
[data-theme="dark"] .setLogView { background: var(--dark-bg); color: var(--zinc-400); }
[data-theme="dark"] .text-secondary, [data-theme="dark"] small { color: var(--zinc-400) !important; }
[data-theme="dark"] .nav-pills .nav-link { color: var(--zinc-400); }
[data-theme="dark"] .nav-pills .nav-link:hover { background: #2a2a30; color: var(--zinc-100); }

.footHeart { font-style: normal; }

/* passport: stage flows in the document (single natural page scroll) at every width, not an absolute overlay */
body[data-studio="passport"] #previewWrap { display: block; padding: 0; }
body[data-studio="passport"] #ppStage { position: static; overflow: visible; min-height: 40vh; }
@media (min-width: 992px) {
  /* desktop keeps a fixed app shell - let the passport page scroll as a document so wheel/scrollbar/keyboard all work */
  body[data-studio="passport"] { overflow: auto; }
  body[data-studio="passport"] #layout { flex: none; overflow: visible; }
  body[data-studio="passport"] #previewWrap { flex: none; height: auto; min-height: 0; overflow: visible; }
}

/* footer: pinned to viewport bottom, fluid sizing */
#appFooter { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--bg, #fafafa); border-top: 1px solid var(--border, #e4e4e7); font-size: clamp(10px, 2.8vw, 13px); padding: clamp(8px, 1.6vh, 14px) 10px calc(clamp(8px, 1.6vh, 14px) + env(safe-area-inset-bottom, 0px)); }
body { padding-bottom: calc(clamp(34px, 6vh, 54px) + env(safe-area-inset-bottom, 0px)); }

/* react-avatar-editor mount (wizard step 2 crop, demo-1 exact code) */
#ppRaeRoot { display: flex; justify-content: center; }
#ppRaeRoot canvas { border-radius: 8px; box-shadow: 0 4px 24px rgba(0,0,0,.14); touch-action: none; max-width: 100%; }

/* wizard nav: sticky above the fixed footer on passport (all widths - the fixed footer covers z-index<60 content pinned at bottom:0, which clipped the desktop nav at mid-scroll) */
body[data-studio="passport"] #ppWizNav { position: sticky; bottom: calc(clamp(34px, 6vh, 54px) + env(safe-area-inset-bottom, 0px)); z-index: 40; background: var(--bg); padding: 8px 6px; margin: 0 -6px; border-top: 1px solid var(--border); }
/* guide legend: never intercepts touch, never selectable, sits bottom-left off the face area */
.guideLegend { pointer-events: none !important; user-select: none !important; -webkit-user-select: none !important; top: auto !important; bottom: 10px; z-index: 3 !important; }
#ppCheckOverlay { z-index: 6 !important; }

/* RAE stage guide bands (A centerline, B hair/chin band, C ear boundaries) */
#ppRaeRoot { position: relative; }
.ppRaeGuides { position: absolute; inset: 0; pointer-events: none; user-select: none; -webkit-user-select: none; }
.ppRaeGuides .gLine { position: absolute; }
.ppRaeGuides .gLine span { position: absolute; left: 3px; top: -14px; font-size: 9px; color: #005eb8; white-space: nowrap; }
.ppRaeGuides .gV { top: 0; bottom: 0; width: 0; border-left: 1px dashed rgba(0,94,184,.75); }
.ppRaeGuides .gH { left: 0; right: 0; height: 0; border-top: 1px dashed rgba(0,94,184,.75); }
.ppRaeGuides .gBand { position: absolute; left: 0; right: 0; background: rgba(24,24,27,.08); }
/* before/after comparison slider overlay */
.ksCompareOverlay { position: absolute; inset: 0; z-index: 9; background: #fff; display: flex; flex-direction: column; }
.ksCompareSlider { flex: 1; min-height: 0; width: 100%; height: 100%; }
.ksCompareSlider img { width: 100%; height: 100%; object-fit: contain; }
.ksProcField { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 8; background: var(--panel, #fff); border-radius: 12px; }
[data-theme="dark"] .ksProcField { background: var(--dark-panel); }
.ppDpiCard { min-width: 110px; justify-content: center; padding: 10px 14px; gap: 2px; }
.ksCompareBar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; font-size: 12px; color: var(--zinc-600); border-top: 1px solid var(--zinc-200); background: #fff; }
/* visual option cards (passport copies + paper size) */
.ppOptCards { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 8px; margin-bottom: 8px; }
.ppOptCard { position: relative; flex: 0 0 auto; width: 118px; border: 2px solid var(--zinc-300); border-radius: 10px; background: #fff; padding: 8px 8px 6px; text-align: center; cursor: pointer; }
.ppOptCard.active { border-color: var(--zinc-900); box-shadow: 0 2px 10px rgba(0,0,0,.14); }
.ppOptCard canvas { width: 100%; border: 1px solid var(--zinc-200); border-radius: 4px; background: #fff; display: block; }
.ppOptGrid { position: absolute; top: 4px; right: 4px; background: rgba(24,24,27,.85); color: #fff; font-size: 10px; padding: 1px 6px; border-radius: 8px; }
.ppOptLbl { display: block; font-size: 12px; font-weight: 600; color: var(--zinc-900); margin-top: 5px; }
.ppOptDim { display: block; font-size: 10px; color: var(--zinc-500); }

/* --- crop step rework: clean stage, static legend, compact controls --- */
#guideLegend.guideLegend {
  position: static !important; margin: 8px 12px 10px; padding: 8px 12px;
  background: var(--slate-50); border: 1px solid var(--slate-200); border-radius: 10px;
  box-shadow: none; font-size: 12px; line-height: 1.5; color: var(--slate-700);
}
#guideLegend.guideLegend b { color: #005eb8; }
.ppZoomRow { display: flex; align-items: center; gap: 6px; }
.ppZoomRow .form-range { flex: 1; min-width: 0; }
.ppZoomLabelRow { font-size: 12px; color: var(--zinc-500); margin-top: 6px; }
.ppZoomLabelRow output { font-weight: 700; color: var(--zinc-700); }
#ppPaneTransform .ppCtlBtn { min-width: 42px; height: 42px; font-size: 17px; border-radius: 10px; }
#ppPaneTransform .ppAdjustBtn { min-height: 42px; padding: 8px 16px; font-size: 13px; border-radius: 10px; flex: 1; }
#ppPaneTransform .ppAdjustBtn.ppPrimaryAction { background: var(--zinc-900); color: #fff; border-color: var(--zinc-900); }
.ppMoreTools { margin-top: 10px; border-top: 1px dashed var(--zinc-200); padding-top: 4px; }
.ppMoreTools summary {
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--zinc-700);
  min-height: 44px; display: flex; align-items: center; gap: 8px; list-style: none;
}
.ppMoreTools summary::-webkit-details-marker { display: none; }
.ppMoreTools summary::after { content: '\25BE'; margin-left: auto; color: var(--zinc-400); transition: transform .15s; }
.ppMoreTools[open] summary::after { transform: rotate(180deg); }
.ppMoreHint { font-weight: 400; color: var(--zinc-400); font-size: 12px; }
.ppMoreTools .ppBtnRow { margin-top: 8px; }
.ppNudgeRow { justify-content: center; }
.ppNudgeRow .ppCtlBtn { min-width: 56px; }
.ppCanvasHead > span:first-child { white-space: nowrap; font-size: 13px; }
.ppCanvasHead button { padding: 4px 8px; white-space: nowrap; }
#ppSizeTag { font-size: 10.5px; padding: 3px 8px; }
/* --- dark theme: full pass (home cards, passport wizard, panels) --- */
[data-theme="dark"] .homeCard { background: var(--dark-panel); border-color: var(--dark-border); box-shadow: none; }
[data-theme="dark"] .homeCard h2 { color: var(--zinc-100); }
[data-theme="dark"] .homeHero h1 { color: var(--zinc-100); }
[data-theme="dark"] .homeCard p, [data-theme="dark"] .homeFoot { color: var(--zinc-400); }
[data-theme="dark"] .homeCardTag { background: #17233b; border-color: #29427a; color: var(--accent-bright); }
[data-theme="dark"] .homeCardGo { color: var(--accent-bright); }
[data-theme="dark"] .homeCardImg { background: #26262c; }
[data-theme="dark"] .ppTracker { background: var(--dark-panel); border-color: var(--dark-border); }
[data-theme="dark"] .ppTrackTxt { color: var(--zinc-200); }
[data-theme="dark"] .ppTrackDot { background: var(--dark-bg); border-color: var(--zinc-700); color: var(--zinc-400); }
[data-theme="dark"] .ppCanvasCard, [data-theme="dark"] .ppSec { background: var(--dark-panel); border-color: var(--dark-border); }
[data-theme="dark"] .ppCanvasHead { background: var(--dark-raised); border-color: var(--dark-border); color: var(--zinc-100); }
[data-theme="dark"] .ppCanvasHead button { background: var(--dark-bg); border-color: #29427a; color: var(--accent-bright); }
[data-theme="dark"] .ppCanvasBody { background: var(--dark-bg); }
[data-theme="dark"] #ppSizeTag { background: #26264a; color: #a5b4fc; }
[data-theme="dark"] .ppPanelTab { background: var(--dark-bg); border-color: var(--dark-border); color: var(--zinc-400); }
[data-theme="dark"] .ppPanelTab.active { background: var(--zinc-100); color: var(--zinc-900); border-color: var(--zinc-100); }
[data-theme="dark"] #ppPaneTransform .ppCtlBtn { background: var(--dark-panel); border-color: var(--zinc-700); color: var(--zinc-100); }
[data-theme="dark"] #ppPaneTransform .ppCtlBtn:active { background: #2a2a30; }
[data-theme="dark"] #ppPaneTransform .ppAdjustBtn { background: var(--dark-panel); border-color: var(--zinc-700); color: var(--zinc-100); }
[data-theme="dark"] #ppPaneTransform .ppAdjustBtn.ppPrimaryAction { background: var(--zinc-100); color: var(--zinc-900); border-color: var(--zinc-100); }
[data-theme="dark"] .ppZoomLabelRow { color: var(--zinc-400); }
[data-theme="dark"] .ppZoomLabelRow output { color: var(--zinc-200); }
[data-theme="dark"] .ppMoreTools { border-color: var(--dark-border); }
[data-theme="dark"] .ppMoreTools summary { color: var(--zinc-300); }
[data-theme="dark"] #guideLegend.guideLegend { background: var(--dark-raised); border-color: var(--dark-border); color: var(--zinc-400); }
[data-theme="dark"] #guideLegend.guideLegend b { color: var(--accent-bright); }
[data-theme="dark"] .ppOptCard { background: var(--dark-panel); border-color: var(--dark-border); }
[data-theme="dark"] .ppOptCard.active { border-color: var(--zinc-100); box-shadow: 0 2px 10px rgba(0,0,0,.5); }
[data-theme="dark"] .ppOptLbl { color: var(--zinc-100); }
[data-theme="dark"] .ppOptDim { color: var(--zinc-400); }
[data-theme="dark"] .ppOptCard canvas { border-color: var(--zinc-700); }
[data-theme="dark"] .ksProcField { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 8; background: var(--panel, #fff); border-radius: 12px; }
[data-theme="dark"] .ksProcField { background: var(--dark-panel); }
.ksCompareBar { background: var(--dark-panel); color: var(--zinc-400); border-color: var(--dark-border); }
[data-theme="dark"] .templateVerification { background: #17233b; color: var(--zinc-400); }
[data-theme="dark"] .ppAdjustStrip { background: var(--dark-panel); border-color: var(--dark-border); }
[data-theme="dark"] .ppAdjustLabel { color: var(--zinc-400); }
[data-theme="dark"] .ppCanvasFoot { background: var(--dark-raised); border-color: var(--dark-border); color: #4ade80; }
[data-theme="dark"] .ppPanel { color: var(--zinc-200); }
/* --- lettered guide overlay (passport crop, reference pattern) --- */
.ppRaeGuides .gZone { position: absolute; background: rgba(239,68,68,.20); }
.ppRaeGuides .gBandC2 { position: absolute; left: 0; right: 0; background: rgba(34,197,94,.30); }
.ppRaeGuides .gA { border-left: 2px solid rgba(250,204,21,.95) !important; }
.ppRaeGuides .gTag {
  position: absolute; z-index: 2; font-size: 10px; font-weight: 700; line-height: 1;
  color: #fff; padding: 3px 5px; border-radius: 4px; pointer-events: none;
}
.ppRaeGuides .gTagA { background: #ca8a04; margin-left: 4px; }
.ppRaeGuides .gTagB, .ppRaeGuides .gTagC { background: var(--success); }
.ppRaeGuides .gTagD, .ppRaeGuides .gTagE, .ppRaeGuides .gTagF, .ppRaeGuides .gTagG { background: #dc2626; }
/* legend sheet (below canvas) */
#guideLegend.guideLegend { display: grid; grid-template-columns: 1fr; gap: 4px 14px; }
@media (min-width: 560px) { #guideLegend.guideLegend { grid-template-columns: 1fr 1fr; } }
#guideLegend[hidden].guideLegend { display: none; }
.glRow { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.glChip {
  flex: none; width: 18px; height: 18px; border-radius: 5px; color: #fff;
  font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
.glChip.glA { background: #ca8a04; }
.glChip.glB, .glChip.glC { background: var(--success); }
.glChip.glD, .glChip.glE, .glChip.glF, .glChip.glG { background: #dc2626; }
/* 2x4 transform grid */
.ppGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ppGrid .ppCtlBtn { width: 100%; min-width: 0; height: 46px; font-size: 18px; border-radius: 10px; }
.ppZoomSliderRow { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; font-size: 12px; color: var(--zinc-500); }
.ppZoomSliderRow output { font-weight: 700; color: var(--zinc-700); }
[data-theme="dark"] .ppZoomSliderRow { color: var(--zinc-400); }
[data-theme="dark"] .ppZoomSliderRow output { color: var(--zinc-200); }
.ppRaeGuides .gTagB { margin-top: 2px; }

/* --- V2.04+b02 dark-mode defect batch: wizard text, panels, chips, hub --- */
[data-theme="dark"] .ppSecHead h2 { color: var(--zinc-100); }
[data-theme="dark"] .ppSecTag { background: #052e16; color: #86efac; border-color: var(--success-deep); }
[data-theme="dark"] .ppPanelPane { background: var(--dark-panel); border-color: var(--zinc-700); }
[data-theme="dark"] .ppPanelTab { background: #26262b; border-color: var(--zinc-700); color: var(--zinc-400); }
[data-theme="dark"] .ppPanelTab.active { background: var(--dark-panel); color: var(--zinc-100); border-bottom-color: var(--dark-panel); }
[data-theme="dark"] .ppSliderRow { color: var(--zinc-300); }
[data-theme="dark"] .country-list .country { background: var(--dark-panel); border-color: var(--zinc-700); color: var(--zinc-200); }
[data-theme="dark"] .country-list .country small { color: var(--zinc-400); }
[data-theme="dark"] .country-list .country.active { background: var(--accent); border-color: var(--accent); color: #fff; }
[data-theme="dark"] .country-list .country.active small { color: #dbeafe; }
[data-theme="dark"] .ppHubBtn { background: var(--dark-panel); border-color: var(--zinc-700); color: var(--zinc-200); }
[data-theme="dark"] .ppHubBtn:disabled { color: var(--zinc-500); }
[data-theme="dark"] .ppPrivacy { background: #052e16; border-color: var(--success-deep); color: #86efac; }

/* borders (for cutting) preset buttons */
.ppGapBtns { display: inline-flex; gap: 6px; margin-left: 8px; flex-wrap: wrap; }
.ppGapBtn { padding: 4px 10px; font-size: 12px; border: 1px solid var(--slate-300); border-radius: 8px; background: #fff; color: var(--slate-700); cursor: pointer; }
.ppGapBtn.active { border-color: var(--accent); color: var(--accent); font-weight: 600; }
[data-theme="dark"] .ppGapBtn { background: #1e2430; border-color: #3a4356; color: var(--slate-300); }
[data-theme="dark"] .ppGapBtn.active { border-color: #6ea8fe; color: #6ea8fe; }

/* bg step: live preview + real progress */
.ppBgLiveWrap { margin: 0 0 10px; text-align: center; position: relative; }
.ppBgLiveWrap canvas { max-width: 100%; border-radius: 10px; border: 1px solid var(--border); background: #fff; }
.ppBgLiveCap { font-size: 11px; color: var(--muted); margin-top: 4px; }
#ppBgProg { margin: 8px 0 4px; }
.ppBgProgTrack { height: 8px; border-radius: 6px; background: var(--border); overflow: hidden; }
#ppBgProgFill { height: 100%; width: 0%; border-radius: 6px; background: var(--text); transition: width .25s cubic-bezier(0.22, 1, 0.36, 1); }
.ppBgProgTxt { font-size: 12px; color: var(--muted); margin: 6px 0 0; text-align: center; }
/* hub: compact single-photo preview */
.ppHubThumb { display: block; width: 84px; height: auto; border-radius: 8px; border: 1px solid var(--border); background: #fff; margin: 8px auto; }

/* desktop home: fluid column that auto-scales with the display, square card grid clear of the fixed footer */
#homeStage { width: min(1800px, 92vw); margin: 0 auto; padding-bottom: 96px; }
@media (min-width: 768px) {
  /* square size tracks BOTH viewport width and height, so the grid auto-scales per display and never overflows */
  :root { --cardSq: clamp(180px, min(21vw, 40vh), 400px); }
  .homeCards { display: grid; grid-template-columns: repeat(4, var(--cardSq)); justify-content: center; gap: clamp(14px, 2vw, 28px); width: 100%; max-width: none; margin: 0 auto; }
  .homeCardImg img { object-fit: cover; }   /* uniform filled squares at desktop sizes */
  #homeGreetingWrap { width: 100%; margin: 0 auto; }
  #homeGreeting { font-size: clamp(26px, 2.6vw, 34px); overflow-wrap: break-word; }
}

/* FrameLab studio: isolated iframe tool, fills the studio stage like passport */
#flStage { position: absolute; inset: 0; display: flex; }
#flFrame { flex: 1; width: 100%; height: 100%; border: 0; background: #fff; }
body[data-studio="framelab"] #previewWrap { display: block; padding: 0; }
body[data-studio="framelab"] #flStage { position: static; height: calc(100vh - 64px); min-height: 480px; }

/* shell height: re-declared at file end so the orphaned variable block above
   (which swallows the original declaration at the top of this file during CSS
   error recovery) cannot break the fixed-viewport app shell */
html, body { height: 100%; }

/* passport crop step (b06): desktop two-column split - preview left, Transform/Color controls right; mobile/tablet stay stacked */
@media (min-width: 992px) {
  #ppStep2 .ppCanvasCard {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    grid-template-areas:
      "head head"
      "body panel"
      "legend panel";
    column-gap: 0;
    align-items: start;
  }
  #ppStep2 .ppCanvasHead { grid-area: head; }
  #ppStep2 .ppCanvasBody { grid-area: body; }
  #ppStep2 #guideLegend { grid-area: legend; }
  #ppStep2 .ppPanel { grid-area: panel; border-top: none; border-left: 1px solid var(--zinc-200); align-self: stretch; }
}