/* ═══════════════════════════════════════════════════════════════
   LAYOVER PASSPORT — styles (namespaced .passport-*)
   Token layer references existing theme variables in index_styles.css
   ═══════════════════════════════════════════════════════════════ */
:root {
  --passport-gold: var(--gold);
  --passport-gold-dark: #8f7409;
  --passport-gold-light: var(--gold-light);
  --passport-cream: #FDFBF4;
  --passport-surface: var(--surface);
  --passport-text: var(--text-primary);
  --passport-muted: var(--text-secondary);
  --passport-border: var(--border);
  --passport-success: var(--success);
  --passport-shadow-sm: var(--shadow);
  --passport-shadow-md: var(--shadow-hover);
  --passport-radius-card: 18px;
  --passport-radius-pill: 999px;
  --passport-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

.passport-body { padding-top: 14px; }

.passport-subtitle {
  font-size: 13px;
  color: var(--passport-muted);
  margin: 0 0 14px;
}

/* ── Segmented control — exact replica of the destination page's
      glass tab bar (.dest-tabs / .dest-tab / liquid bubble / underline) ── */
.passport-segments {
  position: relative;
  display: flex;
  gap: 4px;
  padding: 6px 10px;
  margin-bottom: 18px;
  background: rgba(255,255,255,0.57);
  border-radius: 999px;
  border: 1px solid rgba(184,150,12,0.18);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06), inset 0 0.5px 0 rgba(255,255,255,0.40);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.passport-segments::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.55), rgba(255,255,255,0.16));
  pointer-events: none;
  z-index: 0;
}
.passport-segments::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.015'/%3E%3C/svg%3E");
  opacity: 0.24;
  pointer-events: none;
  z-index: 0;
}
.passport-segment {
  flex: 1;
  padding: 8px 4px;
  border: none;
  border-radius: 10px;
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1), background 350ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 350ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms ease;
  position: relative;
  z-index: 2;
  white-space: nowrap;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  -webkit-tap-highlight-color: transparent;
}
.passport-segment:hover { color: var(--text-secondary); }
.passport-segment:active { transform: scale(0.96); }
.passport-segment.active { color: var(--gold); }
.passport-segment:focus-visible {
  outline: 2px solid var(--passport-gold);
  outline-offset: 2px;
}
@media (max-width: 380px) {
  .passport-segment { font-size: 11.5px; }
}

/* Liquid glass bubble — inner highlight simulating light through glass */
.passport-tab-bubble {
  z-index: 3;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.passport-tab-bubble::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.25), transparent 60%);
  pointer-events: none;
}
/* Active tab underline — slides via JS-controlled left/width */
.passport-segments-underline {
  position: absolute;
  bottom: 0;
  height: 2.5px;
  border-radius: 2px;
  background: var(--gold);
  transition: left 300ms cubic-bezier(0.4, 0, 0.2, 1), width 300ms cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 2;
}

/* ── Sections ── */
.passport-section { display: none; padding-bottom: 24px; }
.passport-section.active { display: block; }

.passport-section-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--passport-text);
  margin: 20px 0 10px;
}
.passport-card .passport-section-title { margin: 0 0 10px; }

/* ── Generic cards ── */
.passport-card {
  background: var(--passport-surface);
  border: 1px solid var(--passport-border);
  border-radius: var(--passport-radius-card);
  box-shadow: var(--passport-shadow-sm);
  padding: 16px;
  margin-bottom: 14px;
}

/* ═══════════════════════════════════════════════════════════════
   PASSPORT BOOKLET — bordeaux cover, swipeable pages, page-turn 3D
   ═══════════════════════════════════════════════════════════════ */
.passport-booklet {
  position: relative;
  height: 232px;
  margin-bottom: 18px;
  touch-action: pan-y;            /* horizontal drags = ours, vertical = page scroll */
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.passport-booklet:focus-visible { outline: 2px solid var(--passport-gold); outline-offset: 4px; border-radius: 18px; }

.passport-booklet-scene {
  position: absolute;
  inset: 0 0 18px 0;
  perspective: 1600px;
  perspective-origin: 20% 50%;   /* eye slightly toward the spine */
  border-radius: 16px;
  /* NOTE: no overflow hidden — the turning leaf must be able to lift
     out of the page area like a real page */
}
.passport-booklet-stack {
  position: relative;
  height: 100%;
  transform-style: preserve-3d;
}

/* ── Leaves: stacked two-sided pages flipping around the left spine ── */
.passport-leaf {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform-origin: left center;
  will-change: transform;
}
.passport-leaf.snapping {
  transition: transform 620ms cubic-bezier(0.3, 0.9, 0.32, 1);
}
.passport-leaf.leaf-hidden { visibility: hidden; }
.passport-booklet.dragging .passport-leaf { transition: none; }

/* Front face = the page itself */
.passport-page {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
/* WebKit: descendants with their OWN transforms (tilted stamps, visa
   marks, signature…) get separate compositor layers that ignore the
   ancestor's backface state and ghost-flicker through landed leaves.
   Backface-hide ONLY those — a blanket `*` rule forced every descendant
   into its own iOS layer, causing progressive left-to-right paint-in on
   the identity page and blank covers on reveal. */
.passport-pgstamp,
.passport-pgstamp-ring,
.passport-visa-mark,
.passport-back-sig-line,
.passport-cover-plane,
.passport-idpage-photo {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
/* Verso of a turned leaf — plain paper with a faint mark */
.passport-leaf-back {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  transform: rotateY(180deg);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background:
    repeating-linear-gradient(0deg, transparent 0 25px, rgba(140,110,50,0.04) 25px 26px),
    linear-gradient(200deg, #F3ECD8 0%, #EDE5CC 100%);
  box-shadow: inset 0 0 0 1px rgba(140,110,50,0.14), inset -12px 0 18px -12px rgba(80,50,10,0.25);
  display: grid;
  place-items: center;
}
/* Verso of the COVER leaf: inside of the bordeaux cover */
.passport-leaf-back-cover {
  background:
    radial-gradient(ellipse at 70% 30%, rgba(255,255,255,0.05), transparent 55%),
    linear-gradient(200deg, #5d1524 0%, #47101b 100%);
  box-shadow: inset 0 0 0 1px rgba(212,160,23,0.2);
}
.passport-leaf-back-mark {
  font-size: 26px;
  color: rgba(140,110,50,0.18);
  transform: rotate(-12deg);
}
.passport-leaf-back-cover .passport-leaf-back-mark { color: rgba(232,193,90,0.22); }

/* dynamic shading while turning (set via --pp-shade from JS) */
.passport-page::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #2a1016;
  opacity: var(--pp-shade, 0);
  pointer-events: none;
  border-radius: inherit;
  transition: opacity 620ms cubic-bezier(0.3, 0.9, 0.32, 1);
}
.passport-booklet.dragging .passport-page::after { transition: none; }
/* Turning leaf gets depth: soft edge shadow along its free edge */
.passport-leaf::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 26px;
  border-radius: 0 16px 16px 0;
  background: linear-gradient(270deg, rgba(40,24,6,0.18), transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.passport-booklet.dragging .passport-leaf::after { opacity: 1; }

/* ── Bordeaux cover ── */
.passport-page-cover {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.10), transparent 55%),
    radial-gradient(ellipse at 75% 90%, rgba(0,0,0,0.28), transparent 60%),
    repeating-linear-gradient(115deg, rgba(255,255,255,0.014) 0 2px, transparent 2px 4px),
    linear-gradient(160deg, #6d1a2b 0%, #57121f 45%, #430d18 100%);
  box-shadow:
    inset 0 0 0 1px rgba(212,160,23,0.25),
    inset 0 2px 6px rgba(255,255,255,0.08),
    0 16px 40px rgba(67,13,24,0.35);
  cursor: pointer;
}
/* spine highlight */
.passport-page-cover::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 14px;
  background: linear-gradient(90deg, rgba(0,0,0,0.35), rgba(255,255,255,0.06) 60%, transparent);
  pointer-events: none;
}
.passport-cover-frame {
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(212,160,23,0.55);
  border-radius: 11px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 12px;
  text-align: center;
}
.passport-cover-frame::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(212,160,23,0.28);
  border-radius: 8px;
  pointer-events: none;
}
.passport-cover-top {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.28em;
  color: rgba(232,193,90,0.85);
}
.passport-cover-emblem {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1.5px solid rgba(232,193,90,0.9);
  display: grid;
  place-items: center;
  position: relative;
  background:
    radial-gradient(circle at 38% 32%, rgba(255,235,170,0.22), transparent 55%);
  box-shadow: inset 0 0 0 4px rgba(232,193,90,0.14);
}
.passport-cover-emblem::before {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  border: 1px dashed rgba(232,193,90,0.55);
}
.passport-cover-plane {
  font-size: 21px;
  color: #E8C15A;
  transform: rotate(-12deg);
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.passport-cover-title {
  white-space: pre-line;
  font-size: 19px;
  line-height: 1.16;
  font-weight: 900;
  letter-spacing: 0.30em;
  padding-left: 0.30em; /* optical centering vs letter-spacing */
  color: #E8C15A;
  text-shadow: 0 1px 2px rgba(0,0,0,0.45), 0 0 18px rgba(232,193,90,0.18);
}
.passport-cover-level {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.24em;
  color: rgba(232,193,90,0.9);
  border-top: 1px solid rgba(212,160,23,0.4);
  border-bottom: 1px solid rgba(212,160,23,0.4);
  padding: 3px 12px;
}
.passport-cover-holder {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.5;              /* room for descenders (g, y, p…) */
  padding-bottom: 2px;
  color: rgba(255,244,214,0.75);
  max-width: 90%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Swipe affordance on the cover ── */
.passport-cover-swipe {
  position: absolute;
  right: 16px;
  bottom: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(232,193,90,0.85);
  pointer-events: none;
}
.passport-cover-swipe-label {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.passport-cover-swipe-chevrons { display: inline-flex; }
.passport-cover-swipe-chevrons i {
  font-style: normal;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  animation: passport-swipe-chev 1.8s ease-in-out infinite;
  opacity: 0.25;
}
.passport-cover-swipe-chevrons i:nth-child(2) { animation-delay: 0.18s; }
.passport-cover-swipe-chevrons i:nth-child(3) { animation-delay: 0.36s; }
@keyframes passport-swipe-chev {
  0%, 60%, 100% { opacity: 0.25; transform: translateX(0); }
  30% { opacity: 1; transform: translateX(-3px); }
}
/* gold foil sweep on the cover, on booklet tap/appear */
.passport-page-cover .passport-cover-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 42%, rgba(255,235,170,0.16) 50%, transparent 58%);
  transform: translateX(-130%);
  pointer-events: none;
}
.passport-booklet.on-cover .passport-page-cover .passport-cover-frame::after {
  animation: passport-foil 1400ms ease-out 600ms;
}
@keyframes passport-foil {
  from { transform: translateX(-130%); }
  to { transform: translateX(130%); }
}

/* ── Paper inner pages ── */
.passport-page-paper {
  background:
    radial-gradient(ellipse at 80% 8%, rgba(184,150,12,0.06), transparent 50%),
    repeating-linear-gradient(0deg, transparent 0 25px, rgba(140,110,50,0.05) 25px 26px),
    linear-gradient(180deg, #FBF7EA 0%, #F6F0DD 100%);
  box-shadow:
    inset 0 0 0 1px rgba(140,110,50,0.16),
    inset 12px 0 18px -12px rgba(80,50,10,0.28); /* spine shadow */
  padding: 14px 16px 12px 20px;
}
/* guilloche-ish security arcs */
.passport-page-paper::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 110%, transparent 58px, rgba(160,125,45,0.05) 59px, transparent 60px),
    radial-gradient(circle at 45% -10%, transparent 74px, rgba(160,125,45,0.05) 75px, transparent 76px),
    radial-gradient(circle at 85% 115%, transparent 66px, rgba(160,125,45,0.05) 67px, transparent 68px);
  pointer-events: none;
}
.passport-pg-heading {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: rgba(120,90,30,0.75);
  border-bottom: 1px solid rgba(140,110,50,0.25);
  padding-bottom: 5px;
  margin-bottom: 10px;
}
.passport-pg-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-16deg);
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0.24em;
  color: rgba(140,110,50,0.14);
  white-space: nowrap;
  pointer-events: none;
}
.passport-pg-empty-hint {
  position: absolute;
  left: 20px;
  right: 16px;
  bottom: 14px;
  font-size: 11px;
  color: rgba(120,90,30,0.65);
  line-height: 1.45;
  margin: 0;
}

/* ── Identity page ── */
.passport-idpage-row { display: flex; gap: 14px; position: relative; }
.passport-idpage-photo {
  width: 62px;
  height: 78px;
  flex-shrink: 0;
  border-radius: 6px;
  border: 1px solid rgba(140,110,50,0.4);
  background:
    repeating-linear-gradient(45deg, rgba(160,125,45,0.05) 0 3px, transparent 3px 6px),
    linear-gradient(150deg, #f4ecd4, #e9dfc0);
  display: grid;
  place-items: center;
  font-size: 26px;
  font-weight: 800;
  color: rgba(120,90,30,0.8);
  box-shadow: inset 0 0 10px rgba(120,90,30,0.10);
}
.passport-idpage-fields {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px 10px;
  align-content: start;
}
.passport-idpage-field span {
  display: block;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(120,90,30,0.6);
  margin-bottom: 2px;
}
.passport-idpage-field strong {
  display: block;
  font-size: 11.5px;
  font-weight: 800;
  color: #3d3222;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.passport-idpage-field:first-child { grid-column: 1 / -1; }
.passport-idpage-field:first-child strong { font-size: 13.5px; }
.passport-mrz {
  /* full-bleed like a real MRZ strip: runs edge to edge of the page */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 6px 8px 10px 12px;
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(60,48,25,0.82);
  border-top: 1px solid rgba(140,110,50,0.3);
  background: rgba(255,255,255,0.35);
  overflow: hidden;
  white-space: nowrap;
}
.passport-mrz div { overflow: hidden; }

/* ── Inner scroll areas (stamps + entries pages) ──
   NOTE: native touch scrolling dies inside 3D-transformed leaves on iOS
   Safari, so vertical drags here are driven manually by the booklet's
   touch controller (see passport.js). The CSS still declares overflow
   for desktop wheel/keyboard and for scrollTop to have effect. */
.passport-inner-scroll {
  position: absolute;
  top: 38px;                       /* below the heading */
  bottom: 8px;
  left: 20px;
  right: 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  padding-bottom: 16px;
}
/* Only lock native touch when there IS something to scroll — the JS
   controller then drives scrollTop manually (native scroll is broken
   inside 3D-transformed leaves on iOS). Non-overflowing pages keep
   pan-y so the overlay scrolls normally. */
.passport-inner-scroll.is-scrollable { touch-action: none; }
.passport-inner-scroll::-webkit-scrollbar { display: none; }
.passport-pg-fade {
  position: absolute;
  left: 1px;
  right: 1px;
  bottom: 1px;
  height: 26px;
  border-radius: 0 0 15px 15px;
  background: linear-gradient(180deg, rgba(246,240,221,0), rgba(246,240,221,0.95));
  pointer-events: none;
}

/* ── Stamps page: varied ink shapes ── */
.passport-stamp-field {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  align-content: flex-start;
}
.passport-pgstamp {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 6px;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  filter: contrast(1.07);
}
.passport-pgstamp-icon { font-size: 15px; line-height: 1; }
.passport-pgstamp-title {
  font-size: 6.4px;
  font-weight: 900;
  letter-spacing: 0.07em;
  line-height: 1.15;
  max-width: 72px;
}
.passport-pgstamp-date {
  font-size: 6px;
  font-weight: 700;
  letter-spacing: 0.1em;
  opacity: 0.85;
}
/* ink tones — like different border-control desks */
.passport-pgstamp.tone-0 { color: rgba(126,91,24,0.82); }
.passport-pgstamp.tone-1 { color: rgba(56,84,120,0.78); }
.passport-pgstamp.tone-2 { color: rgba(110,45,50,0.78); }
/* shapes */
.passport-pgstamp.shape-round {
  width: 76px;
  height: 76px;
  border: 2px solid currentColor;
  border-radius: 50%;
}
.passport-pgstamp.shape-round .passport-pgstamp-ring {
  position: absolute;
  inset: 4px;
  border: 1px dashed currentColor;
  border-radius: 50%;
  opacity: 0.65;
}
.passport-pgstamp.shape-rect {
  width: 86px;
  height: 58px;
  border: 2px solid currentColor;
  border-radius: 5px;
}
.passport-pgstamp.shape-rect .passport-pgstamp-ring {
  position: absolute;
  inset: 3px;
  border: 1px solid currentColor;
  border-radius: 3px;
  opacity: 0.55;
}
.passport-pgstamp.shape-oval {
  width: 90px;
  height: 60px;
  border: 2px solid currentColor;
  border-radius: 50%;
}
.passport-pgstamp.shape-oval .passport-pgstamp-ring {
  position: absolute;
  inset: 4px;
  border: 1px dashed currentColor;
  border-radius: 50%;
  opacity: 0.6;
}
.passport-pgstamp.shape-hex {
  width: 80px;
  height: 68px;
  border: none;
  clip-path: polygon(25% 3%, 75% 3%, 98% 50%, 75% 97%, 25% 97%, 2% 50%);
  background:
    linear-gradient(currentColor, currentColor) top / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) bottom / 100% 2px no-repeat;
}
.passport-pgstamp.shape-hex .passport-pgstamp-ring {
  position: absolute;
  inset: 0;
  clip-path: polygon(25% 3%, 75% 3%, 98% 50%, 75% 97%, 25% 97%, 2% 50%);
  border: 2px solid currentColor;
  opacity: 0.9;
}
.passport-pgstamp.shape-arch {
  width: 78px;
  height: 66px;
  border: 2px solid currentColor;
  border-radius: 40px 40px 6px 6px;
}
.passport-pgstamp.shape-arch .passport-pgstamp-ring {
  position: absolute;
  inset: 3px;
  border: 1px dashed currentColor;
  border-radius: 36px 36px 4px 4px;
  opacity: 0.6;
}
/* tilts + ink irregularity */
.passport-pgstamp.tilt-0 { transform: rotate(-6deg); }
.passport-pgstamp.tilt-1 { transform: rotate(4deg); }
.passport-pgstamp.tilt-2 { transform: rotate(-2deg); }
.passport-pgstamp.tilt-3 { transform: rotate(7deg); }
.passport-pgstamp.tilt-4 { transform: rotate(-4deg); }
.passport-pgstamp::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(-14deg, rgba(255,255,255,0) 0 4px, rgba(251,247,234,0.35) 4px 6px);
  border-radius: inherit;
  clip-path: inherit;
  pointer-events: none;
  mix-blend-mode: lighten;
}
.passport-pgstamp.ghost {
  border-style: dashed;
  color: rgba(120,120,120,0.4);
  filter: none;
  cursor: default;
}
.passport-pgstamp.ghost::after { display: none; }
.passport-pgstamp.stamping { animation: passport-pgstamp-in 460ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes passport-pgstamp-in {
  0% { transform: scale(1.45); opacity: 0.3; }
  55% { transform: scale(0.94); opacity: 1; }
  100% { transform: scale(1); }
}

/* ── Visa / entries page ── */
.passport-visa-fade {
  position: absolute;
  left: 1px;
  right: 1px;
  bottom: 1px;
  height: 26px;
  border-radius: 0 0 15px 15px;
  background: linear-gradient(180deg, rgba(246,240,221,0), rgba(246,240,221,0.95));
  pointer-events: none;
}
.passport-visa-entry {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px dashed rgba(140,110,50,0.25);
}
.passport-visa-entry:last-of-type { border-bottom: none; }
.passport-visa-mark {
  flex-shrink: 0;
  border: 1.6px solid rgba(56,84,120,0.7);
  color: rgba(56,84,120,0.8);
  border-radius: 4px;
  font-size: 6.5px;
  font-weight: 900;
  letter-spacing: 0.16em;
  padding: 4px 6px;
  filter: contrast(1.05);
}
.passport-visa-mark.tilt-0 { transform: rotate(-6deg); }
.passport-visa-mark.tilt-1 { transform: rotate(4deg); }
.passport-visa-mark.tilt-2 { transform: rotate(-3deg); }
.passport-visa-mark.tilt-3 { transform: rotate(6deg); }
.passport-visa-mark.tilt-4 { transform: rotate(-2deg); }
.passport-visa-info { flex: 1; min-width: 0; }
.passport-visa-city {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: #3d3222;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.passport-visa-meta {
  font-size: 9px;
  font-weight: 700;
  color: rgba(126,91,24,0.85);
  margin-top: 1px;
}
.passport-visa-detail {
  font-size: 9px;
  color: rgba(90,75,45,0.7);
  margin-top: 1px;
}


/* ── Back / record page ── */
.passport-back-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 6px;
}
.passport-back-cell { text-align: center; }
.passport-back-num {
  font-size: 21px;
  font-weight: 900;
  color: #3d3222;
  line-height: 1.1;
}
.passport-back-label {
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(120,90,30,0.6);
  margin-top: 2px;
}
.passport-back-track { margin-top: 14px; height: 6px; background: rgba(140,110,50,0.16); }
.passport-back-next {
  font-size: 10px;
  font-weight: 700;
  color: rgba(126,91,24,0.9);
  margin-top: 6px;
}
.passport-back-sig {
  position: absolute;
  left: 20px;
  right: 16px;
  bottom: 12px;
}
.passport-back-sig-line {
  display: block;
  font-family: 'Snell Roundhand', 'Segoe Script', cursive;
  font-size: 16px;
  color: rgba(60,48,25,0.75);
  border-bottom: 1px solid rgba(140,110,50,0.4);
  padding-bottom: 2px;
  transform: rotate(-1.2deg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.passport-back-sig-label {
  display: block;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(120,90,30,0.55);
  margin-top: 3px;
}

/* ── Gilded page edges (visible on the cover) ── */
.passport-booklet-gild {
  position: absolute;
  top: 6px;
  bottom: 24px;
  right: -3px;
  width: 5px;
  border-radius: 0 3px 3px 0;
  background:
    repeating-linear-gradient(180deg, #E8C15A 0 2px, #c9a23e 2px 3px, #f2d788 3px 5px);
  opacity: 1;
  transition: opacity 250ms ease;
  pointer-events: none;
}
.passport-booklet:not(.on-cover) .passport-booklet-gild { opacity: 0; }

/* ── Page dots ── */
.passport-booklet-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  gap: 6px;
}
.passport-booklet-dot {
  /* button reset + generous tap zone around a small visual dot */
  appearance: none;
  -webkit-appearance: none;
  border: none;
  margin: 0;
  cursor: pointer;
  width: 20px;
  height: 18px;
  background: transparent;
  position: relative;
  padding: 0;
}
.passport-booklet-dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: rgba(140,110,50,0.25);
  transition: background 200ms ease, transform 200ms ease;
}
.passport-booklet-dot.active::after {
  background: var(--passport-gold);
  transform: scale(1.3);
}

/* ── Stamp collection wall ── */
.passport-wall-counter {
  font-size: 12px;
  color: var(--passport-muted);
  margin: -4px 0 10px;
  font-weight: 600;
}
.passport-stamp-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 12px;
  padding: 14px 12px 18px;
  background:
    repeating-linear-gradient(0deg, transparent 0 26px, rgba(184,150,12,0.05) 26px 27px),
    var(--passport-cream);
  border: 1px solid rgba(184,150,12,0.3);
  border-radius: var(--passport-radius-card);
}
.passport-wall-stamp {
  position: relative;
  min-height: 84px;
  padding: 10px 6px;
  border: 2px solid rgba(156,119,42,0.62);
  border-radius: 10px;
  text-align: center;
  color: rgba(126,91,24,0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.passport-wall-stamp::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(156,119,42,0.4);
  border-radius: 7px;
  pointer-events: none;
}
.passport-wall-stamp.rot0 { transform: rotate(-4deg); }
.passport-wall-stamp.rot1 { transform: rotate(2.5deg); }
.passport-wall-stamp.rot2 { transform: rotate(-1.5deg); }
.passport-wall-stamp.rot3 { transform: rotate(3.5deg); }
.passport-wall-stamp.rot4 { transform: rotate(-2.5deg); }
.passport-wall-stamp.locked {
  border-style: dashed;
  border-color: rgba(120,120,120,0.35);
  color: rgba(120,120,120,0.55);
  cursor: default;
}
.passport-wall-stamp.earned { filter: contrast(1.06); background: rgba(184,150,12,0.045); }
.passport-wall-stamp-icon { font-size: 20px; line-height: 1; }
.passport-wall-stamp.locked .passport-wall-stamp-icon { font-size: 14px; }
.passport-wall-stamp-title {
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.2;
}
.passport-wall-stamp-date {
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.25;
  opacity: 0.8;
}
.passport-wall-stamp.stamping { animation: passport-wall-stamp-in 480ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes passport-wall-stamp-in {
  0% { transform: scale(1.35) rotate(0deg); opacity: 0.4; }
  60% { transform: scale(0.96); opacity: 1; }
  100% { transform: scale(1); }
}

/* ── Rival chase card ── */
.passport-chase-card {
  border-color: rgba(184,150,12,0.5);
  background: linear-gradient(160deg, #fffdf6, var(--passport-surface));
}
.passport-chase-title { font-size: 14px; font-weight: 800; color: var(--passport-text); }
.passport-chase-text { font-size: 12.5px; color: var(--passport-muted); line-height: 1.5; margin: 6px 0 0; }
.passport-chase-cta { margin-top: 12px; width: 100%; }
.passport-chase-slot:empty { display: none; }

/* ── Progress ── */
.passport-progress-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.passport-progress-level { font-size: 15px; font-weight: 700; color: var(--passport-text); }
.passport-progress-count { font-size: 12.5px; font-weight: 600; color: var(--passport-muted); }
.passport-progress-track {
  height: 8px;
  border-radius: 4px;
  background: #EFEBDD;
  overflow: hidden;
}
.passport-progress-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--passport-gold), var(--gold-muted));
  transition: width 650ms var(--passport-ease);
  position: relative;
}
.passport-progress-fill.passport-progress-animating::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
  animation: passport-progress-sheen 700ms ease-out;
}
@keyframes passport-progress-sheen {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}
.passport-progress-hint {
  font-size: 12px;
  color: var(--passport-muted);
  margin: 8px 0 0;
}

/* ── Streak ── */
.passport-streak-head { display: flex; align-items: center; gap: 8px; }
.passport-streak-flame { font-size: 20px; filter: grayscale(1); opacity: 0.5; }
.passport-streak-flame.lit { filter: none; opacity: 1; }
.passport-streak-flame.flicker { filter: none; opacity: 0.85; animation: passport-flame-flicker 1.6s ease-in-out infinite; }
@keyframes passport-flame-flicker {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  40% { opacity: 0.55; transform: scale(0.94); }
  60% { opacity: 0.95; transform: scale(1.03); }
}
.passport-streak-title { font-size: 14.5px; font-weight: 700; color: var(--passport-text); flex: 1; }
.passport-streak-badge {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(46,125,50,0.12);
  color: var(--passport-success);
  white-space: nowrap;
}
.passport-streak-badge.risk { background: rgba(192,57,43,0.1); color: var(--danger); }
.passport-streak-card.at-risk { border-color: rgba(192,57,43,0.35); }
.passport-streak-status { font-size: 12.5px; color: var(--passport-muted); margin: 8px 0 0; }
.passport-streak-status.done { color: var(--passport-success); font-weight: 600; }
.passport-streak-status.risk { color: var(--passport-text); font-weight: 600; }
.passport-streak-best { font-size: 11.5px; color: var(--passport-muted); margin: 4px 0 0; }
.passport-streak-cta { margin-top: 12px; width: 100%; }

/* ── Missions ── */
.passport-mission-card.completed { border-color: rgba(184,150,12,0.5); }
.passport-mission-head { display: flex; align-items: flex-start; gap: 10px; }
.passport-mission-icon { font-size: 20px; flex-shrink: 0; }
.passport-mission-info { flex: 1; min-width: 0; }
.passport-mission-title { font-size: 14px; font-weight: 700; color: var(--passport-text); }
.passport-mission-desc { font-size: 12px; color: var(--passport-muted); margin-top: 2px; line-height: 1.4; }
.passport-mission-reward {
  font-size: 13px;
  font-weight: 800;
  color: var(--passport-muted);
  flex-shrink: 0;
  padding: 3px 9px;
  border-radius: var(--passport-radius-pill);
  background: var(--bg);
}
.passport-mission-reward.earned { color: #fff; background: var(--passport-gold); }
.passport-mission-bar-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.passport-mission-track { flex: 1; height: 6px; }
.passport-mission-count { font-size: 11.5px; font-weight: 600; color: var(--passport-muted); flex-shrink: 0; }
.passport-mission-done { font-size: 12px; font-weight: 700; color: var(--passport-success); margin-top: 8px; }
.passport-mission-expiry { font-size: 11px; color: var(--text-muted); margin-top: 8px; }
.passport-view-all { width: 100%; margin-top: 2px; }

/* ── Impact feed ── */
.passport-impact-feed { display: flex; flex-direction: column; gap: 8px; }
.passport-impact-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--passport-surface);
  border: 1px solid var(--passport-border);
  border-radius: var(--radius);
  padding: 11px 12px;
}
.passport-impact-item.linkable { cursor: pointer; }
.passport-impact-item.linkable:hover { border-color: var(--passport-gold); }
.passport-impact-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.passport-impact-body { flex: 1; min-width: 0; }
.passport-impact-msg { font-size: 12.5px; color: var(--passport-text); line-height: 1.4; }
.passport-impact-meta { font-size: 11px; color: var(--passport-muted); margin-top: 3px; }

/* ── City expertise ── */
.passport-city-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.passport-city-card {
  background: var(--passport-surface);
  border: 1px solid var(--passport-border);
  border-radius: var(--radius);
  padding: 12px;
}
.passport-city-name { font-size: 13.5px; font-weight: 700; color: var(--passport-text); }
.passport-city-country { font-size: 10.5px; color: var(--passport-muted); }
.passport-city-level { font-size: 11.5px; font-weight: 700; color: var(--passport-gold-dark); margin-top: 6px; }
.passport-city-stats { font-size: 10.5px; color: var(--passport-muted); margin-top: 3px; }
.passport-city-track { height: 5px; margin-top: 8px; }
.passport-city-next { font-size: 10px; color: var(--text-muted); margin-top: 4px; }

/* ── Achievements ── */
.passport-achievements-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 0 8px;
  -webkit-overflow-scrolling: touch;
}
.passport-badge {
  flex: 0 0 auto;
  width: 88px;
  text-align: center;
  background: var(--passport-surface);
  border: 1px solid var(--passport-border);
  border-radius: var(--radius);
  padding: 12px 6px;
}
.passport-badge.earned { border-color: rgba(184,150,12,0.45); background: var(--passport-cream); }
.passport-badge.locked { opacity: 0.55; }
.passport-badge-icon { font-size: 22px; }
.passport-badge-title { font-size: 10px; font-weight: 600; color: var(--passport-text); margin-top: 6px; line-height: 1.3; }

/* ── Rankings ── */
.passport-rank-filters {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 12px;
  -webkit-overflow-scrolling: touch;
}
.passport-rank-filter {
  flex: 0 0 auto;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 14px;
  min-height: 36px;
  border-radius: var(--passport-radius-pill);
  border: 1px solid var(--passport-border);
  background: var(--passport-surface);
  color: var(--passport-muted);
  cursor: pointer;
}
.passport-rank-filter.active {
  background: var(--passport-gold);
  border-color: var(--passport-gold);
  color: #fff;
}
.passport-rank-list { display: flex; flex-direction: column; gap: 6px; }
.passport-rank-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--passport-surface);
  border: 1px solid var(--passport-border);
  border-radius: var(--radius);
  padding: 10px 12px;
  min-height: 44px;
}
.passport-rank-row.me { background: var(--passport-cream); border-color: rgba(184,150,12,0.5); }
.passport-rank-row.sticky { position: sticky; bottom: 8px; box-shadow: var(--passport-shadow-md); }
.passport-rank-pos { font-size: 12px; font-weight: 800; color: var(--passport-muted); width: 30px; flex-shrink: 0; }
.passport-rank-trend {
  font-size: 10px;
  font-weight: 800;
  width: 14px;
  text-align: center;
  flex-shrink: 0;
  line-height: 1;
}
.passport-rank-trend.up { color: var(--success); }
.passport-rank-trend.down { color: var(--danger); }
.passport-rank-trend.flat { color: var(--text-muted); opacity: 0.55; }
.passport-rank-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--passport-gold-light);
  color: var(--passport-gold-dark);
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.passport-rank-info { flex: 1; min-width: 0; }
.passport-rank-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--passport-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.passport-rank-level { font-size: 10.5px; color: var(--passport-muted); }
.passport-rank-score { font-size: 14px; font-weight: 800; color: var(--passport-gold); flex-shrink: 0; }

/* ── Profile ── */
.passport-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.passport-stat-cell { text-align: center; padding: 8px 2px; }
.passport-stat-icon { font-size: 18px; }
.passport-stat-num { font-size: 17px; font-weight: 800; color: var(--passport-text); margin-top: 4px; }
.passport-stat-label { font-size: 10px; color: var(--passport-muted); margin-top: 2px; }

.passport-ledger-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--passport-border);
}
.passport-ledger-row:last-child { border-bottom: none; }
.passport-ledger-icon { font-size: 15px; flex-shrink: 0; }
.passport-ledger-info { flex: 1; min-width: 0; }
.passport-ledger-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--passport-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.passport-ledger-time { font-size: 10.5px; color: var(--passport-muted); }
.passport-ledger-amount { font-size: 13px; font-weight: 800; color: var(--passport-gold); flex-shrink: 0; }

.passport-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  cursor: pointer;
}
.passport-toggle-label { font-size: 13.5px; color: var(--passport-text); }
.passport-toggle-input {
  appearance: none;
  -webkit-appearance: none;
  width: 44px;
  height: 26px;
  border-radius: 13px;
  background: #D9D4C5;
  position: relative;
  cursor: pointer;
  transition: background 180ms ease;
  flex-shrink: 0;
  margin: 0;
}
.passport-toggle-input:checked { background: var(--passport-gold); }
.passport-toggle-input::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  transition: transform 180ms var(--passport-ease);
}
.passport-toggle-input:checked::after { transform: translateX(18px); }
.passport-toggle-input:focus-visible { outline: 2px solid var(--passport-gold); outline-offset: 2px; }
.passport-toggle-input:disabled { opacity: 0.5; }

/* ── Buttons ── */
.passport-btn {
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  min-height: 44px;
  padding: 10px 22px;
  border-radius: var(--passport-radius-pill);
  border: 1px solid var(--passport-border);
  background: var(--passport-surface);
  color: var(--passport-text);
  cursor: pointer;
  transition: var(--transition);
}
.passport-btn-gold {
  background: var(--passport-gold);
  border-color: var(--passport-gold);
  color: #fff;
}
.passport-btn-gold:hover { background: var(--passport-gold-dark); }
.passport-btn:focus-visible { outline: 2px solid var(--passport-gold); outline-offset: 2px; }
.passport-btn:disabled { opacity: 0.5; cursor: default; }

/* ── Empty / error / footnotes ── */
.passport-empty {
  text-align: center;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.passport-empty-icon { font-size: 40px; line-height: 1; }
.passport-empty-title { font-size: 17px; font-weight: 700; color: var(--passport-text); margin: 0; }
.passport-empty-text {
  font-size: 13.5px;
  color: var(--passport-muted);
  margin: 0;
  max-width: 320px;
  line-height: 1.5;
}
.passport-inline-empty {
  font-size: 12.5px;
  color: var(--passport-muted);
  background: var(--passport-surface);
  border: 1px dashed var(--passport-border);
  border-radius: var(--radius);
  padding: 14px;
  text-align: center;
  line-height: 1.5;
  margin: 0 0 8px;
}
.passport-footnote { font-size: 11px; color: var(--text-muted); line-height: 1.5; margin: 10px 0 0; }

/* ── Skeleton loading ── */
.passport-skeleton-card {
  height: 110px;
  border-radius: var(--passport-radius-card);
  margin-bottom: 16px;
  background: linear-gradient(90deg, #EFEDE6 25%, #F7F5EE 50%, #EFEDE6 75%);
  background-size: 200% 100%;
  animation: passport-shimmer 1.4s ease infinite;
}
@keyframes passport-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Reward moment ── */
.passport-reward-overlay {
  position: fixed;
  inset: 0;
  z-index: 1300; /* above #tipSheet (1000) */
  background: rgba(20, 16, 4, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 200ms ease;
}
.passport-reward-overlay.visible { opacity: 1; }
.passport-reward-overlay.closing { opacity: 0; }
.passport-reward-card {
  position: relative;
  background: var(--passport-cream);
  border: 1px solid rgba(184,150,12,0.4);
  border-radius: 22px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.3);
  padding: 28px 24px 22px;
  max-width: 320px;
  width: 100%;
  text-align: center;
  transform: translateY(14px);
  transition: transform 260ms var(--passport-ease);
  overflow: hidden;
}
.passport-reward-overlay.visible .passport-reward-card { transform: translateY(0); }
.passport-reward-stamp {
  position: relative;
  width: 74px;
  height: 74px;
  margin: 0 auto 14px;
  border-radius: 50%;
  border: 3px solid var(--passport-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}
.passport-reward-overlay.visible .passport-reward-stamp {
  animation: passport-stamp-land 550ms var(--passport-ease);
}
@keyframes passport-stamp-land {
  0% { transform: scale(1.6) translateY(-16px); opacity: 0; }
  55% { transform: scale(0.94) translateY(0); opacity: 1; }
  75% { transform: scale(1.04); }
  100% { transform: scale(1); }
}
.passport-reward-stamp::after {
  /* ink impression ring */
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid rgba(184,150,12,0.5);
  opacity: 0;
}
.passport-reward-overlay.visible .passport-reward-stamp::after {
  animation: passport-ink 600ms ease-out 350ms;
}
@keyframes passport-ink {
  0% { opacity: 0.8; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.5); }
}
.passport-reward-stamp-inner { font-size: 32px; }
.passport-reward-type {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--passport-muted);
}
.passport-reward-amount {
  font-size: 21px;
  font-weight: 800;
  color: var(--passport-gold);
  margin-top: 6px;
}
.passport-reward-city {
  font-size: 12.5px;
  color: var(--passport-muted);
  margin-top: 8px;
  line-height: 1.4;
}
.passport-reward-cta { margin-top: 18px; width: 100%; }
.passport-reward-live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.passport-particle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--passport-gold);
  pointer-events: none;
  opacity: 0;
  animation: passport-particle-fly 650ms ease-out forwards;
}
@keyframes passport-particle-fly {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--px, 40px), var(--py, -60px)) scale(0.4); }
}

/* ── Level-up ── */
.passport-levelup .passport-reward-card { padding-top: 34px; }
.passport-levelup-halo {
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,160,23,0.28), transparent 65%);
  pointer-events: none;
}
.passport-levelup-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--passport-gold-dark);
  margin-top: 4px;
}
.passport-levelup-sub {
  font-size: 13px;
  color: var(--passport-muted);
  line-height: 1.5;
  margin: 10px 0 0;
}
.passport-levelup-btns {
  display: flex;
  gap: 8px;
  margin-top: 20px;
}
.passport-levelup-btns .passport-btn { flex: 1; padding-left: 10px; padding-right: 10px; }

/* ── Dev diagnostics (hidden segment, dev flag only) ── */
.passport-segment-dev { flex: 0 0 40px; font-size: 15px; }
.passport-diag-note {
  font-size: 11.5px;
  color: var(--passport-muted);
  background: rgba(184,150,12,0.07);
  border: 1px dashed rgba(184,150,12,0.4);
  border-radius: var(--radius);
  padding: 10px 12px;
  line-height: 1.5;
  margin: 0 0 12px;
}
.passport-diag-card { font-variant-numeric: tabular-nums; }
.passport-diag-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.passport-diag-row:last-child { border-bottom: none; }
.passport-diag-label { font-size: 11px; color: var(--passport-muted); flex-shrink: 0; }
.passport-diag-value {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--passport-text);
  text-align: right;
  word-break: break-all;
}
.passport-diag-log { margin-top: 8px; }
.passport-diag-logline {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 10px;
  color: var(--passport-muted);
  padding: 3px 0;
  border-bottom: 1px dotted rgba(0,0,0,0.05);
  word-break: break-all;
}
.passport-diag-place { padding: 6px 0; border-bottom: 1px solid rgba(0,0,0,0.05); }
.passport-diag-place:last-of-type { border-bottom: none; }
.passport-diag-place-name { font-size: 12.5px; font-weight: 700; color: var(--passport-text); }
.passport-diag-place-meta { font-size: 10.5px; color: var(--passport-muted); margin-top: 2px; }
.passport-diag-reload { width: 100%; margin-top: 4px; }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .passport-skeleton-card { animation: none; background: #EFEDE6; }
  .passport-segment, .passport-btn, .passport-progress-fill,
  .passport-reward-overlay, .passport-reward-card, .passport-toggle-input,
  .passport-toggle-input::after { transition: none; animation: none; }
  .passport-reward-overlay { opacity: 1; }
  .passport-reward-card { transform: none; }
  .passport-leaf, .passport-leaf.snapping { transition: none; transform: none !important; }
  .passport-page::after { display: none; }
  .passport-cover-swipe-chevrons i { animation: none; opacity: 0.8; }
  .passport-reward-overlay.visible .passport-reward-stamp,
  .passport-reward-overlay.visible .passport-reward-stamp::after,
  .passport-booklet.on-cover .passport-page-cover .passport-cover-frame::after,
  .passport-pgstamp.stamping,
  .passport-wall-stamp.stamping,
  .passport-streak-flame.flicker,
  .passport-particle,
  .passport-progress-fill.passport-progress-animating::after { animation: none; }
}

/* ── Small screens (320px safety) ── */
@media (max-width: 350px) {
  .passport-segment { font-size: 11px; }
  .passport-segment-dev { flex-basis: 34px; }
  .passport-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .passport-booklet { height: 216px; }
  .passport-cover-title { font-size: 16px; letter-spacing: 0.24em; }
  .passport-idpage-fields { grid-template-columns: 1fr; gap: 5px; }
  .passport-mrz { font-size: 8.5px; }
  .passport-pgstamp.shape-round { width: 66px; height: 66px; }
  .passport-pgstamp.shape-rect { width: 74px; height: 52px; }
  .passport-pgstamp.shape-oval { width: 76px; height: 54px; }
  .passport-pgstamp.shape-hex { width: 68px; height: 60px; }
  .passport-pgstamp.shape-arch { width: 66px; height: 58px; }
}