/* Memoroam — Profile Page: Digital Passport */

/* ── Profile page layout — flex column to center passport ── */
/* Override default 110px padding-bottom (meant for Tickets FAB) so passport centers correctly */
#pageProfile .page-scroll{display:flex;flex-direction:column;padding-bottom:16px;}

/* ── User Header (top bar: stat + settings) ── */
.prof-header{padding:54px 0 4px;flex-shrink:0;}
.prof-header-row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;}
.prof-header-left{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;}
.prof-kicker{
  font-family:'IBM Plex Mono',monospace;
  font-size:9px;letter-spacing:2px;
  text-transform:uppercase;color:var(--muted);
  opacity:.7;line-height:1;margin-bottom:6px;
}
.prof-name-row{display:flex;align-items:center;gap:6px;}
.prof-name{font-family:'Playfair Display',serif;font-size:26px;font-weight:700;color:var(--text);line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100% - 28px);}
.prof-edit-btn{background:none;border:none;cursor:pointer;padding:4px;color:var(--muted);display:flex;align-items:center;justify-content:center;opacity:.45;transition:opacity .15s;flex-shrink:0;}
.prof-edit-btn:hover{opacity:.85;}
.prof-settings-btn{
  background:none;border:none;cursor:pointer;padding:6px;
  color:var(--muted);display:flex;align-items:center;justify-content:center;
  opacity:.45;transition:opacity .15s;flex-shrink:0;
}
.prof-settings-btn:hover{opacity:.85;}
.prof-settings-btn:active{opacity:1;}
.prof-stat{font-family:'DM Sans',sans-serif;font-size:13px;color:var(--muted);margin-top:4px;}
.prof-stat-count{transition:transform .3s cubic-bezier(.32,.72,0,1);}
.prof-stat-count.pulse{animation:profPulse .3s cubic-bezier(.32,.72,0,1);}
@keyframes profPulse{0%{transform:scale(1);}50%{transform:scale(1.15);}100%{transform:scale(1);}}

/* ── Passport Book Wrapper — fills remaining vertical space, centers passport ── */
.passport-book{
  position:relative;
  perspective:1200px;
  flex:1 1 auto;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:12px 0 20px;
}

/* Frame: width-based sizing keeps cover/interior visible regardless of children's heights */
.passport-frame{
  position:relative;
  width:100%;
  aspect-ratio:3/4;
  max-height:100%;
}

/* Fullscreen state — JS sets inline top/left/width/height for FLIP animation */
.passport-frame.is-fullscreen{
  z-index:1001;
  aspect-ratio:auto;
  max-width:none;
  max-height:none;
}

/* Backdrop behind fullscreen passport — covers the whole viewport so clicking any
   area outside the passport (including outside .phone on desktop) dismisses it */
.passport-backdrop{
  position:fixed;inset:0;
  background:rgba(0,0,0,.6);
  opacity:0;pointer-events:none;
  transition:opacity .4s ease;
  z-index:1000;
  /* No backdrop-filter blur — the rgba dim already hides the underlying UI
     and the blur was forcing a per-frame GPU re-blur during the frame's
     open/close transition, which on mobile reads as jank. */
}
.passport-backdrop.show{opacity:1;pointer-events:auto;cursor:pointer;}

/* ── Passport Heading (inside book wrapper, above cover) ── */
.passport-heading{
  display:flex;align-items:center;gap:8px;
  justify-content:center;
  margin-bottom:14px;flex-shrink:0;
}

/* ── Passport Cover ── */
.passport-cover{
  width:100%;
  height:100%;
  background:linear-gradient(145deg,#1C2333 0%,#2A3142 40%,#1C2333 100%);
  border-radius:16px;
  box-shadow:0 8px 32px rgba(0,0,0,0.25);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;cursor:pointer;
  position:relative;z-index:2;
  user-select:none;
  -webkit-user-select:none;
  transform-origin:left center;
  backface-visibility:hidden;
}
.passport-cover:active{transform:scale(.98);}
/* Open / close states all share the same absolute layout so toggling between
   them never re-flows the cover, avoiding flashes on transition boundaries */
.passport-cover.book-open,
.passport-cover.book-open-final,
.passport-cover.book-close{
  position:absolute;top:0;left:0;width:100%;
  z-index:5;pointer-events:none;
}
/* Cover flips open like a book */
.passport-cover.book-open{
  animation:bookCoverOpen .7s cubic-bezier(.32,.72,0,1) forwards;
}
/* Resting state after open completes — kept rotated so close-flip starts smoothly */
.passport-cover.book-open-final{
  transform:rotateY(-180deg);
}
/* Cover flips closed */
.passport-cover.book-close{
  animation:bookCoverClose .7s cubic-bezier(.32,.72,0,1) forwards;
}
@keyframes bookCoverOpen{
  from{transform:rotateY(0deg);}
  to{transform:rotateY(-180deg);}
}
@keyframes bookCoverClose{
  from{transform:rotateY(-180deg);}
  to{transform:rotateY(0deg);}
}

/* Gold crest */
.passport-crest{
  width:64px;height:64px;
  color:#C8A96E;
  opacity:.85;
  transition:opacity .2s;
}
.passport-cover:active .passport-crest{opacity:1;}

/* Title */
.passport-title{
  font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;
  letter-spacing:3px;text-transform:uppercase;color:#C8A96E;
}
.passport-subtitle{
  font-family:'IBM Plex Mono',monospace;font-size:8px;
  letter-spacing:4px;text-transform:uppercase;color:rgba(200,169,110,.5);
  margin-top:-6px;
}

/* Stamp count badge */
.passport-badge{
  position:absolute;bottom:24px;
  background:rgba(200,169,110,.15);
  border-radius:20px;padding:5px 14px;
  font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:500;
  color:#C8A96E;
}

/* ── Passport Interior ── */
.passport-interior{
  width:100%;
  height:100%;
  display:none;position:relative;
}
.passport-interior.open{display:block;}

/* Page viewport — clips overflow */
.passport-viewport{
  width:100%;height:100%;
  border-radius:16px;overflow:hidden;
  position:relative;
  box-shadow:0 8px 32px rgba(0,0,0,0.25);
  touch-action:pan-y;
}

/* Pages container — perspective parent for 3D page flips */
.passport-pages{
  position:relative;width:100%;height:100%;
  perspective:1400px;
  transform-style:preserve-3d;
}

/* ── Passport ID Page ── */
/* ID / "Personal Record" page — layout matches the mockup without decorative background */
.ppid-page{display:flex;flex-direction:column;background:var(--card);padding:16px 18px 38px;}

/* Top brand strip */
.ppid-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.ppid-brandline{
  font-family:'IBM Plex Mono',monospace;
  font-size:10px;letter-spacing:1.8px;font-weight:500;
  text-transform:uppercase;color:rgba(60,48,34,.7);
}
.ppid-passno{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:2px;}
.ppid-passno-label{
  font-family:'IBM Plex Mono',monospace;
  font-size:7.5px;letter-spacing:2px;font-weight:600;
  text-transform:uppercase;color:rgba(60,48,34,.55);
}
.ppid-passno-value{
  font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;letter-spacing:1px;font-weight:600;
  color:rgba(43,34,24,.9);
}

/* Main portrait + fields row */
.ppid-main{display:flex;gap:18px;align-items:flex-start;margin-top:26px;}
.ppid-left{flex:0 0 auto;display:flex;flex-direction:column;gap:16px;width:116px;}
.ppid-right{flex:1 1 auto;display:flex;flex-direction:column;gap:12px;min-width:0;}

/* Portrait */
.ppid-portrait{
  width:116px;aspect-ratio:3/4;
  background:rgba(60,48,34,.1);
  border-radius:4px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  overflow:hidden;flex-shrink:0;
  cursor:pointer;
  transition:background .15s, transform .15s;
}
.ppid-portrait:hover{background:rgba(60,48,34,.14);}
.ppid-portrait:active{transform:scale(.98);}
.ppid-portrait-img{width:100%;height:100%;object-fit:cover;}
.ppid-portrait-placeholder{
  font-family:'IBM Plex Mono',monospace;
  font-size:9px;letter-spacing:2px;
  color:rgba(60,48,34,.45);
}
.ppid-portrait-hint{
  font-family:'IBM Plex Mono',monospace;
  font-size:7.5px;letter-spacing:1.5px;font-weight:500;
  color:rgba(60,48,34,.3);
}

/* Expanded portrait overlay — tap anywhere outside the image to dismiss */
.portrait-expand-overlay{
  position:fixed;inset:0;z-index:2000;
  background:rgba(0,0,0,.82);
  display:flex;align-items:center;justify-content:center;
  padding:28px;cursor:pointer;
  opacity:0;pointer-events:none;
  transition:opacity .28s ease;
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
}
.portrait-expand-overlay.open{opacity:1;pointer-events:auto;}
.portrait-expand-overlay img{
  max-width:100%;max-height:100%;
  border-radius:6px;
  box-shadow:0 14px 48px rgba(0,0,0,.5);
  transform:scale(.92);
  transition:transform .32s cubic-bezier(.32,.72,0,1);
}
.portrait-expand-overlay.open img{transform:scale(1);}

/* Signature block */
.ppid-sig-block{display:flex;flex-direction:column;gap:4px;}
.ppid-sig-area{
  min-height:32px;
  border-bottom:1px solid rgba(60,48,34,.2);
  font-family:'Playfair Display',serif;font-style:italic;
  font-size:16px;color:rgba(43,34,24,.85);
  display:flex;align-items:center;
}
.ppid-sig-img{height:32px;max-width:100%;object-fit:contain;opacity:.85;}
.ppid-sig-placeholder{color:rgba(60,48,34,.35);font-style:normal;font-family:'IBM Plex Mono',monospace;font-size:12px;}

/* Field label/value pairs on the right */
.ppid-field{display:flex;flex-direction:column;gap:2px;}
.ppid-field-label{
  font-family:'IBM Plex Mono',monospace;
  font-size:9px;letter-spacing:1.8px;font-weight:600;
  text-transform:uppercase;color:rgba(60,48,34,.55);
}
.ppid-field-value{
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;letter-spacing:.6px;font-weight:600;
  color:rgba(43,34,24,.92);
  word-break:break-word;
}

/* Travel ledger — pushed toward the bottom so the stats + MRZ cluster together
   above the footer line, like the lower section of a real passport.
   Equal padding top/bottom so the section is visually balanced. */
.ppid-ledger{margin-top:auto;padding:22px 0;}
.ppid-ledger-title{
  font-family:'IBM Plex Mono',monospace;
  font-size:9.5px;letter-spacing:3px;font-weight:600;
  text-transform:uppercase;color:rgba(60,48,34,.55);
  text-align:center;margin-bottom:14px;
}
.ppid-ledger-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.ppid-stat{
  padding:14px 6px 12px;
  border:1px solid rgba(60,48,34,.14);
  border-radius:5px;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  background:rgba(60,48,34,.025);
}
.ppid-stat-num{
  font-family:'Playfair Display',serif;font-weight:700;
  font-size:30px;line-height:1;color:#2b2218;
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:'tnum' 1,'lnum' 1;
  width:100%;text-align:center;
}
.ppid-stat-label{
  font-family:'IBM Plex Mono',monospace;
  font-size:8.5px;letter-spacing:1.6px;font-weight:600;
  text-transform:uppercase;color:rgba(60,48,34,.6);
}

/* MRZ — single line, sits directly below the stats and just above the footer.
   Tighter letter-spacing lets us bump the font size up while keeping the full
   88-char line on one row. If it ever clips, it's only the trailing '<' padding. */
.ppid-mrz{
  margin-top:0;
  font-family:'IBM Plex Mono',monospace;
  font-size:8.5px;letter-spacing:-.1px;line-height:1.2;font-weight:500;
  color:rgba(60,48,34,.7);
  white-space:nowrap;overflow:hidden;text-overflow:clip;
}

/* Dark-mode overrides */
[data-theme="dark"] .ppid-brandline,
[data-theme="dark"] .ppid-passno-label,
[data-theme="dark"] .ppid-field-label,
[data-theme="dark"] .ppid-ledger-title,
[data-theme="dark"] .ppid-stat-label{color:rgba(245,235,215,.6);}
[data-theme="dark"] .ppid-passno-value,
[data-theme="dark"] .ppid-field-value{color:rgba(245,235,215,.92);}
[data-theme="dark"] .ppid-stat-num{color:#f5ebd7;}
[data-theme="dark"] .ppid-portrait{background:rgba(245,235,215,.08);}
[data-theme="dark"] .ppid-portrait-placeholder{color:rgba(245,235,215,.4);}
[data-theme="dark"] .ppid-sig-area{border-bottom-color:rgba(245,235,215,.2);color:rgba(245,235,215,.85);}
[data-theme="dark"] .ppid-sig-placeholder{color:rgba(245,235,215,.35);}
[data-theme="dark"] .ppid-stat{border-color:rgba(245,235,215,.14);background:rgba(245,235,215,.04);}
[data-theme="dark"] .ppid-mrz{color:rgba(245,235,215,.55);}

/* ── Collection Log page ──
   Goal: every country fits on one static page (no scrolling) so the log is
   screenshot-shareable. Flags drive the composition; headers and recents are
   intentionally slim. Flag images come from flagcdn.com (SVG). Locked tiles
   reuse the same flag as a darkened silhouette via CSS filter. */
.ppcl-page{
  display:flex;flex-direction:column;
  background:var(--card);
  /* Bottom padding reserves space for the absolute footer AND keeps the
     recents block from sitting flush against it. */
  padding:16px 14px 48px;
}
.ppcl-title-block{
  text-align:center;
  display:flex;flex-direction:column;gap:2px;
}
.ppcl-title{
  font-family:'Playfair Display',serif;font-weight:700;
  font-size:22px;line-height:1.05;color:#2b2218;
}
.ppcl-subtitle{
  font-family:'Playfair Display',serif;font-style:italic;
  font-size:10.5px;color:rgba(60,48,34,.55);
  line-height:1.25;
}
.ppcl-progress{margin-top:8px;display:flex;flex-direction:column;gap:3px;}
.ppcl-progress-bar{
  position:relative;width:100%;height:2px;
  background:rgba(60,48,34,.12);
  border-radius:2px;overflow:hidden;
}
.ppcl-progress-fill{
  position:absolute;top:0;left:0;bottom:0;
  background:#C8A96E;
  border-radius:2px;
  transition:width .5s cubic-bezier(.32,.72,0,1);
}
.ppcl-progress-row{
  display:flex;justify-content:space-between;align-items:center;
  font-family:'IBM Plex Mono',monospace;
  font-size:7.5px;letter-spacing:1.4px;font-weight:600;
  text-transform:uppercase;color:rgba(60,48,34,.55);
}
.ppcl-section-title{
  display:flex;align-items:center;justify-content:center;
  font-family:'IBM Plex Mono',monospace;
  font-weight:600;text-transform:uppercase;
  color:rgba(60,48,34,.55);
}
.ppcl-section-title span{padding:0 10px;}
.ppcl-section-title::before,
.ppcl-section-title::after{
  content:'';flex:1 1 auto;
  height:1px;background:rgba(60,48,34,.14);
}
.ppcl-section-title--sm{
  margin-top:auto;padding-top:8px;
  font-size:7.5px;letter-spacing:2.2px;
}
.ppcl-section-title--sm span{padding:0 8px;}
/* Flag grid — columns set inline by the renderer. Tiles use a true 3:2 flag
   aspect ratio so every flag renders in its real proportions; rows flow
   naturally from that. `align-content:start` packs rows to the top so any
   leftover vertical space falls below the grid rather than stretching tiles.
   `contain:paint` + `isolation:isolate` keep the ~200 filtered flag images
   inside a single compositor layer so page rotations don't trigger per-image
   filter re-paints. Big win on the page-flip animation frame rate. */
.ppcl-grid{
  flex:0 0 auto;
  margin-top:10px;
  display:grid;
  gap:2px;
  align-content:start;
  contain:paint;
  isolation:isolate;
}
.ppcl-tile{
  aspect-ratio:3/2;
  border-radius:2px;
  overflow:hidden;
  background:rgba(60,48,34,.05);
  box-shadow:inset 0 0 0 1px rgba(60,48,34,.08);
}
.ppcl-tile.is-unlocked{
  box-shadow:inset 0 0 0 1px rgba(60,48,34,.22), 0 1px 2px rgba(60,48,34,.06);
  cursor:pointer;
  /* touch-action:manipulation skips the ~300ms mobile tap delay, and the
     transparent highlight kills the grey-box flash on iOS/Android. */
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  transition:transform .15s, box-shadow .15s;
}
.ppcl-tile.is-unlocked:active{
  transform:scale(.92);
  box-shadow:inset 0 0 0 1px rgba(60,48,34,.45), 0 2px 4px rgba(60,48,34,.12);
}
.ppcl-flag-img{
  width:100%;height:100%;
  display:block;
  /* `contain` (not `cover`) so flags with non-standard aspects render in
     their true proportions: Nepal's pennants, Switzerland's + Vatican's
     squares, Qatar's 28:11, USA's 19:10, etc. `cover` was cropping them. */
  object-fit:contain;
  /* Locked default: desaturated + dimmed so the flag reads as an "echo" of
     itself. Keeps some colour so Denmark vs. Japan is still distinguishable
     at 20px wide, unlike a pure black silhouette which flattens both. */
  filter:grayscale(.85) brightness(.7) opacity(.3);
  transition:filter .35s ease;
}
.ppcl-tile.is-unlocked .ppcl-flag-img{filter:none;}
/* Home country: highlighted like an unlocked tile but non-interactive — there's
   no passport entry for "home" so the tile must not look or act tappable. */
.ppcl-tile.is-home{
  box-shadow:inset 0 0 0 1px rgba(60,48,34,.22), 0 1px 2px rgba(60,48,34,.06);
}
.ppcl-tile.is-home .ppcl-flag-img{filter:none;}
.ppcl-recents{
  margin-top:4px;
  display:flex;flex-direction:column;gap:1px;
}
.ppcl-recent-row{
  display:flex;align-items:center;gap:8px;
  padding:1px 0;line-height:1.3;
  font-family:'IBM Plex Mono',monospace;
  font-size:8px;letter-spacing:1.1px;font-weight:600;
  text-transform:uppercase;
  cursor:pointer;transition:opacity .15s;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.ppcl-recent-row:active{opacity:.55;}
.ppcl-recent-flag{
  width:14px;height:10px;
  object-fit:contain;flex-shrink:0;
  border-radius:1px;
}
.ppcl-recent-name{flex:1 1 auto;color:rgba(43,34,24,.9);}
.ppcl-recent-date{color:rgba(60,48,34,.55);font-variant-numeric:tabular-nums;}
.ppcl-recents-empty{
  font-family:'IBM Plex Mono',monospace;
  font-size:8px;letter-spacing:1px;
  color:rgba(60,48,34,.4);
  text-align:center;padding:2px 0;
}
/* Dark-mode overrides */
[data-theme="dark"] .ppcl-progress-row,
[data-theme="dark"] .ppcl-section-title,
[data-theme="dark"] .ppcl-subtitle{color:rgba(245,235,215,.6);}
[data-theme="dark"] .ppcl-recent-name{color:rgba(245,235,215,.92);}
[data-theme="dark"] .ppcl-title{color:#f5ebd7;}
[data-theme="dark"] .ppcl-progress-bar{background:rgba(245,235,215,.12);}
[data-theme="dark"] .ppcl-section-title::before,
[data-theme="dark"] .ppcl-section-title::after{background:rgba(245,235,215,.14);}
[data-theme="dark"] .ppcl-tile{background:rgba(245,235,215,.06);box-shadow:inset 0 0 0 1px rgba(245,235,215,.1);}
[data-theme="dark"] .ppcl-tile.is-unlocked{box-shadow:inset 0 0 0 1px rgba(245,235,215,.28), 0 1px 2px rgba(0,0,0,.25);}
/* Dark mode echoes the same dimming; opacity drops a touch further so the
   locked flags sit back further on the darker paper. */
[data-theme="dark"] .ppcl-flag-img{filter:grayscale(.85) brightness(.85) opacity(.25);}
[data-theme="dark"] .ppcl-tile.is-unlocked .ppcl-flag-img{filter:none;}
[data-theme="dark"] .ppcl-tile.is-home{box-shadow:inset 0 0 0 1px rgba(245,235,215,.28), 0 1px 2px rgba(0,0,0,.25);}
[data-theme="dark"] .ppcl-tile.is-home .ppcl-flag-img{filter:none;}
[data-theme="dark"] .ppcl-recent-date{color:rgba(245,235,215,.55);}
[data-theme="dark"] .ppcl-recents-empty{color:rgba(245,235,215,.4);}

/* ── Stamp Collection page (page 3) ──
   Each tile reads as a stamp-album slot: aged cream paper "pocket" with a
   white stamp-paper backing inside, the stamp itself slightly tilted as if
   manually placed, and an inset shadow that suggests the stamp is set INTO
   the album page rather than floating above it. */
.ppsc-page{padding:14px 12px 28px;display:flex;flex-direction:column;}
/* Scatter stage — a fixed-aspect virtual canvas the JS layout math targets.
   Stamps are absolutely positioned via CSS custom props and rotated in
   place, so the page reads like a real passport spread instead of a grid.
   Capping width keeps the layout consistent on wider passport frames. */
.ppsc-stage{
  position:relative;
  width:100%;max-width:320px;
  aspect-ratio:320/440;
  margin:18px auto 0;
  flex:0 0 auto;
}
/* Stamp tile — absolutely positioned and rotated. The perforated postage-
   stamp paper IS the tile; the travel date sits handwritten beneath. */
.ppsc-tile{
  position:absolute;
  left:var(--sx,50%);
  top:var(--sy,50%);
  width:24%;
  display:flex;flex-direction:column;align-items:center;gap:0;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  transform:translate(-50%,-50%) rotate(var(--rot,0deg));
  transition:transform .2s ease;
}
.ppsc-tile:active{
  transform:translate(-50%,-50%) rotate(var(--rot,0deg)) scale(.94);
}

/* Postage-stamp paper with perforated edges. Shape comes from a shared
   SVG <clipPath id="stampShape"> defined once in index.html — 9 half-
   circle perforations bite into each edge. drop-shadow filter follows
   the clipped shape (box-shadow would ignore it). */
/* Wrapper sizes to the stamp art's natural height — no forced square box,
   so there's no whitespace between the art and the date label below.
   Locked placeholders override this with aspect-ratio:1/1 below. */
.ppsc-stamp{
  position:relative;
  width:100%;
  display:block;
}

.ppsc-stamp-art{
  width:100%;height:auto;
  display:block;
  /* Bare stamp on the page — soft shadow makes it read as "stuck on" rather
     than floating, since there's no paper frame to ground it. */
  filter:
    drop-shadow(0 1px 2px rgba(40,28,18,.28))
    drop-shadow(0 3px 6px rgba(40,28,18,.16));
}

/* Locked placeholder — keep the perforated postage-paper frame so it reads
   as "slot to be filled" against the bare earned stamps around it. */
.ppsc-stamp.is-locked{
  aspect-ratio:1/1;
  display:flex;align-items:center;justify-content:center;
  padding:13px 11px;
  background:
    radial-gradient(ellipse at 28% 22%, rgba(248,240,220,1) 0%, rgba(235,224,196,1) 55%, rgba(216,201,170,1) 100%);
  filter:
    drop-shadow(0 1px 1px rgba(60,48,34,.18))
    drop-shadow(0 3px 6px rgba(60,48,34,.14));
  -webkit-clip-path:url(#stampShape);
  clip-path:url(#stampShape);
}
.ppsc-stamp.is-locked::after{
  content:'';
  position:absolute;
  inset:6px;
  border:1px solid rgba(60,48,34,.14);
  pointer-events:none;
}

.ppsc-stamp-flag{
  width:55%;height:auto;
  display:block;
  filter:grayscale(.7) opacity(.42);
}

/* Cancellation overprint — diagonal banner like a real "TO BE ISSUED"
   philatelic stamp. Sits over the flag without obscuring it entirely. */
.ppsc-stamp-pending{
  position:absolute;
  inset:0;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
.ppsc-stamp-pending span{
  font-family:'Playfair Display',serif;
  font-size:9px;letter-spacing:1.4px;font-weight:600;
  color:rgba(60,48,34,.62);
  text-transform:uppercase;
  padding:3px 9px;
  border-top:1.4px solid rgba(60,48,34,.42);
  border-bottom:1.4px solid rgba(60,48,34,.42);
  transform:rotate(-10deg);
  background:rgba(253,250,242,.55);
  white-space:nowrap;
}

/* ── Focused-reveal flow ──
   When a freshly earned stamp is waiting, the passport opens to the Stamp
   Collection page and that tile blooms to the page center on a dim backdrop
   for the scratch ritual. After the foil clears, _stampIntoPlace runs a
   keyframe sequence that lands the tile back in its grid slot. */
.ppsc-page.has-focused-stamp::before{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(28,20,12,.55);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  z-index:40;
  animation:ppsc-backdrop-in .35s ease both;
  pointer-events:none;
}

/* Queued / already-placed tiles fade behind the dim backdrop so the user's
   eye lands on the active reveal at center — no competing foil shimmers. */
.ppsc-page.has-focused-stamp .ppsc-tile:not(.is-focused){
  opacity:.18;
  filter:blur(1px) saturate(.6);
  transition:opacity .35s ease, filter .35s ease;
  pointer-events:none;
}

/* Focused: z-index lift + transform-origin so scale grows from center.
   The transform itself is set inline by _startStampReveal so the bloom can
   compose with the per-tile rotation and the calc(-50% + Npx) translate. */
.ppsc-tile.is-focused{
  z-index:50;
  transform-origin:center;
}
/* Drag mode — cursor cues + slightly lifted shadow so the tile reads as
   "pickable" while the user repositions it. touch-action:none stops the
   browser hijacking the gesture as a page scroll on touch devices. */
.ppsc-tile.is-draggable{cursor:grab;touch-action:none;}
.ppsc-tile.is-dragging{
  cursor:grabbing;
  z-index:60;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.35));
}
/* The country caption on a focused tile would float awkwardly — fade it
   out for the duration of the reveal and bring it back as the tile lands. */
.ppsc-tile.is-focused .ppsc-tile-date{opacity:0;transition:opacity .25s ease;}

/* "Scratch to reveal" prompt above the focused tile */
.ppsc-stamp-reveal-hint{
  position:absolute;
  top:18%;
  left:0;right:0;
  text-align:center;
  z-index:51;
  pointer-events:none;
  animation:ppsc-hint-in .55s cubic-bezier(0.2,0.7,0.3,1) .25s both;
}
.ppsc-hint-line{
  font-family:'IBM Plex Mono',monospace;
  font-size:9px;letter-spacing:2.4px;font-weight:600;
  color:rgba(245,235,215,.62);
  text-transform:uppercase;
}
.ppsc-hint-cta{
  font-family:'Playfair Display',serif;
  font-size:18px;font-style:italic;font-weight:500;
  color:#f5ebd7;
  letter-spacing:.4px;
  margin-top:4px;
  text-shadow:0 1px 6px rgba(0,0,0,.45);
  animation:ppsc-hint-pulse 1.6s ease-in-out 1s infinite alternate;
}
.ppsc-stamp-reveal-hint.is-leaving{
  animation:ppsc-hint-out .25s ease forwards;
}

/* Stamp-press impact — brief shadow burst at the squash beat of
   _stampIntoPlace's keyframe sequence. */
.ppsc-stamp.is-impact{
  filter:
    drop-shadow(0 0 5px rgba(40,28,18,.65))
    drop-shadow(0 1px 2px rgba(40,28,18,.55));
}

@keyframes ppsc-backdrop-in{
  from{opacity:0;}
  to{opacity:1;}
}
@keyframes ppsc-hint-in{
  from{opacity:0;transform:translateY(8px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes ppsc-hint-out{
  from{opacity:1;transform:translateY(0);}
  to{opacity:0;transform:translateY(-6px);}
}
@keyframes ppsc-hint-pulse{
  from{opacity:.78;}
  to{opacity:1;}
}

/* Scratch-to-reveal overlay — gold-foil canvas the user drags across to
   uncover a newly earned stamp. Sits above all stamp content (.ppsc-stamp
   children); inherits the parent's clip-path so the foil takes the same
   perforated shape as the stamp paper. */
.ppsc-scratch{
  position:absolute;
  inset:0;
  z-index:5;
  cursor:grab;
  /* Soft pastel halo so the foil reads as glowing rather than flat-painted. */
  filter:drop-shadow(0 0 6px rgba(220,180,255,.45)) drop-shadow(0 0 14px rgba(255,200,220,.25));
  transition:opacity .42s ease, transform .42s ease, filter .42s ease;
}
.ppsc-scratch:active{cursor:grabbing;}
/* Armed but not yet scratchable — the foil is visible (no spoiler) but the
   user can't interact with it until the focus-zoom sequence promotes it. */
.ppsc-scratch.is-armed-no-touch{pointer-events:none;cursor:default;}
.ppsc-scratch.is-revealing{
  /* Tiny pulse the moment the threshold is hit — sells the "earned" beat. */
  filter:brightness(1.18) saturate(1.1);
  transform:scale(1.02);
}
.ppsc-scratch.is-gone{
  opacity:0;
  transform:scale(.98);
  pointer-events:none;
}
.ppsc-scratch-canvas{
  display:block;
  width:100%;height:100%;
  touch-action:none;
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;
}

/* Travel date stamped beneath each stamp — small handwritten Caveat in
   00.00.00 form, locale-aware. Negative margin pulls it in tight against
   the stamp's bottom edge so it reads as part of the same annotation. */
.ppsc-tile-date{
  font-family:'Caveat',cursive;
  font-size:11px;font-weight:600;
  color:rgba(43,34,24,.7);
  line-height:1;letter-spacing:.4px;
  white-space:nowrap;text-align:center;
  margin-top:-2px;
}
.ppsc-empty{
  flex:1 1 auto;
  display:flex;align-items:center;justify-content:center;
  font-family:'IBM Plex Mono',monospace;
  font-size:9px;letter-spacing:1.2px;
  color:rgba(60,48,34,.45);text-transform:uppercase;
  padding:0 24px;text-align:center;
}

/* Dark mode — locked placeholder paper stays light (real postage stamps stay
   light in dark album sleeves) with a deeper drop-shadow for separation.
   Earned stamps have no frame so no override needed. */
[data-theme="dark"] .ppsc-stamp.is-locked{
  background:
    radial-gradient(ellipse at 28% 22%, rgba(232,221,196,1) 0%, rgba(212,196,166,1) 55%, rgba(186,170,140,1) 100%);
  filter:
    drop-shadow(0 1px 1px rgba(0,0,0,.45))
    drop-shadow(0 3px 8px rgba(0,0,0,.5));
}
[data-theme="dark"] .ppsc-tile-date{color:rgba(245,235,215,.78);}
[data-theme="dark"] .ppsc-empty{color:rgba(245,235,215,.45);}

/* ── Stamp lightbox (full-screen view) ──
   Tap a stamp tile to expand. Dark backdrop, large stamp on white paper,
   country name + a link back to the country trip page.
   z-index 2500 keeps it above the fullscreen passport (1001) and the page
   backdrop (1000), but below app-level modals (9999+). */
.ppsl{
  position:fixed;inset:0;
  display:none;align-items:center;justify-content:center;
  z-index:2500;
  padding:20px;
}
.ppsl.open{display:flex;}
.ppsl-backdrop{
  position:absolute;inset:0;
  background:rgba(15,12,8,.78);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  animation:ppsl-fade .2s ease;
}
.ppsl-close{
  position:absolute;top:14px;right:14px;
  width:38px;height:38px;border-radius:50%;
  background:rgba(245,235,215,.12);
  border:none;color:#f5ebd7;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .15s;
  z-index:2;
}
.ppsl-close:active{background:rgba(245,235,215,.22);}
.ppsl-card{
  position:relative;
  display:flex;flex-direction:column;align-items:center;gap:18px;
  max-width:min(86vw, 380px);
  animation:ppsl-pop .25s cubic-bezier(.2,.7,.3,1.2);
  z-index:1;
}
.ppsl-mount{
  width:100%;aspect-ratio:1/1;
  background:#fdfaf2;
  padding:14px;
  border-radius:2px;
  box-shadow:
    0 4px 12px rgba(0,0,0,.35),
    0 14px 32px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(60,48,34,.08);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.ppsl-img{
  max-width:100%;max-height:100%;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 1px 1px rgba(60,48,34,.18));
}
.ppsl-meta{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  text-align:center;
}
.ppsl-country{
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;letter-spacing:2.4px;font-weight:600;
  color:#f5ebd7;
}
.ppsl-trip-link{
  font-family:'IBM Plex Mono',monospace;
  font-size:9px;letter-spacing:1.4px;font-weight:500;
  color:rgba(245,235,215,.6);
  text-decoration:none;text-transform:uppercase;
  padding:6px 12px;border-radius:14px;
  background:rgba(245,235,215,.08);
  transition:background .15s, color .15s;
  -webkit-tap-highlight-color:transparent;
}
.ppsl-trip-link:active{background:rgba(245,235,215,.18);color:#f5ebd7;}
@keyframes ppsl-fade{from{opacity:0;}to{opacity:1;}}
@keyframes ppsl-pop{from{opacity:0;transform:scale(.92);}to{opacity:1;transform:scale(1);}}

/* Single page — stacked, flips around left spine */
.passport-page{
  position:absolute;inset:0;
  overflow:hidden;
  background:#2A3142;
  transform-origin:left center;
  backface-visibility:hidden;
  /* Book-page feel: long enough to watch the page fall over onto the next,
     with a gradual acceleration and a long settled finish. */
  transition:transform 1.3s cubic-bezier(.4,.05,.2,1);
  will-change:transform;
  /* When the frame animates width/height on open/close, keep each page's
     internal layout + paint self-contained so reflow doesn't cascade through
     all 200 flag tiles on every animation frame. Big smoothness win. */
  contain:layout paint;
}
.passport-page.flipped{
  transform:rotateY(-180deg);
}
.passport-page.flipping{
  transition:none;
}
/* While the release animation plays, hold the flipping page above its
   neighbours so it doesn't pop behind them as it rotates. */
.passport-page.is-flipping-release{
  z-index:9999 !important;
}

/* Spine shadow — darker edge on left for depth */
.passport-page::before{
  content:'';position:absolute;top:0;left:0;bottom:0;width:24px;
  background:linear-gradient(to right,rgba(0,0,0,.12),transparent);
  z-index:20;pointer-events:none;
}

/* Page-turn shadow overlay — darkens underneath page during flip */
.passport-pages::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to right,rgba(0,0,0,.08) 0%,rgba(0,0,0,.02) 30%,transparent 60%);
  z-index:0;pointer-events:none;
  border-radius:16px;
}

/* Background image */
.pp-bg{
  position:absolute;inset:0;
  object-fit:cover;width:100%;height:100%;
  opacity:0;transition:opacity .4s;
}
.pp-bg.loaded{opacity:1;}

/* Fallback solid color */
.pp-bg-fallback{
  position:absolute;inset:0;
}

/* Plain neutral trip page — cream/paper tone matching the rest of the app.
   Used while watercolour backgrounds are paused. */
.passport-page.pp-plain{background:var(--card);}
/* Drop the paper-tint bands on plain pages so header/footer sit flush with the page */
.passport-page.pp-plain .pp-header,
.passport-page.pp-plain .pp-footer{background:transparent;}

/* Custom wallpaper background */
.pp-wallpaper{
  position:absolute;inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
/* Trip-page wallpapers sit as background art — low opacity + multiply so the
   watercolour bleeds into the cream paper instead of fighting it. */
.pp-wallpaper.pp-trip-wp{
  opacity:.28;
  mix-blend-mode:multiply;
}
[data-theme="dark"] .pp-wallpaper.pp-trip-wp{
  opacity:.22;
  mix-blend-mode:screen;
}
/* When wallpaper present on empty page, make bg transparent so it shows through */
.pp-wallpaper ~ .passport-page-empty{
  background:transparent;
}
.pp-wallpaper ~ .passport-page-empty .pp-watermark{
  color:rgba(180,165,140,.15);
}

/* Gradient overlay */
.pp-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.7) 0%,rgba(0,0,0,.3) 40%,rgba(0,0,0,.05) 70%,transparent 100%);
  pointer-events:none;
}

/* Passport-style header — title row on top (country/kicker left, entry/exit right),
   cities line spans the full width beneath so it can wrap naturally. */
.pp-header{
  position:absolute;top:0;left:0;right:0;
  padding:16px 18px 16px;
  display:flex;flex-direction:column;gap:8px;
  z-index:3;
  /* Subtle paper wash so dark text stays legible even on darker watercolours */
  background:linear-gradient(180deg, rgba(247,240,225,.55) 0%, rgba(247,240,225,.2) 70%, transparent 100%);
}
.pp-h-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.pp-h-left{flex:1 1 auto;min-width:0;}
.pp-h-right{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right;}
.pp-h-kicker{
  font-family:'IBM Plex Mono',monospace;
  font-size:8.5px;letter-spacing:1.6px;
  text-transform:uppercase;color:rgba(60,48,34,.7);
  margin-bottom:6px;
}
.pp-h-title{
  font-family:'Playfair Display',serif;font-weight:700;
  font-size:30px;line-height:1;
  color:#2b2218;
  margin-bottom:6px;
}
.pp-h-cities{
  font-family:'IBM Plex Mono',monospace;
  font-size:9px;letter-spacing:1.2px;
  text-transform:uppercase;color:rgba(60,48,34,.65);
}
.pp-h-cities-toggle{
  display:inline;
  margin-left:4px;padding:0;
  font:inherit;
  color:rgba(60,48,34,.4);
  background:transparent;
  border:0;
  cursor:pointer;user-select:none;
  transition:color .15s;
}
.pp-h-cities-toggle:hover{color:rgba(60,48,34,.75);}
[data-theme="dark"] .pp-h-cities-toggle{color:rgba(245,235,215,.35);}
[data-theme="dark"] .pp-h-cities-toggle:hover{color:rgba(245,235,215,.75);}
.pp-h-stamp-date{display:flex;flex-direction:column;align-items:flex-end;line-height:1.1;}
.pp-h-label{
  font-family:'IBM Plex Mono',monospace;
  font-size:7.5px;letter-spacing:2px;font-weight:600;
  text-transform:uppercase;color:rgba(60,48,34,.55);
  margin-bottom:1px;
}
.pp-h-date{
  font-family:'IBM Plex Mono',monospace;
  font-size:10px;letter-spacing:1px;font-weight:600;
  color:rgba(43,34,24,.9);
}

/* Dark mode — reinvert so text reads over a darker paper wash */
[data-theme="dark"] .pp-header{
  background:linear-gradient(180deg, rgba(30,25,18,.5) 0%, rgba(30,25,18,.2) 70%, transparent 100%);
}
[data-theme="dark"] .pp-h-kicker{color:rgba(245,235,215,.7);}
[data-theme="dark"] .pp-h-title{color:#f5ebd7;}
[data-theme="dark"] .pp-h-cities{color:rgba(245,235,215,.65);}
[data-theme="dark"] .pp-h-label{color:rgba(245,235,215,.55);}
[data-theme="dark"] .pp-h-date{color:rgba(245,235,215,.92);}

/* Passport-style footer: {ISO · doc-seq}   MEMOROAM · PASSPORT   {page / total} */
.pp-footer{
  position:absolute;bottom:0;left:0;right:0;
  padding:10px 18px 12px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-family:'IBM Plex Mono',monospace;
  font-size:9px;letter-spacing:1.6px;font-weight:500;
  text-transform:uppercase;color:rgba(60,48,34,.6);
  background:linear-gradient(0deg, rgba(247,240,225,.55) 0%, rgba(247,240,225,.2) 60%, transparent 100%);
  border-top:1px solid rgba(60,48,34,.1);
  z-index:3;pointer-events:none;
}
.pp-f-left, .pp-f-right{flex:0 0 auto;}
.pp-f-center{flex:1 1 auto;text-align:center;}

[data-theme="dark"] .pp-footer{
  color:rgba(245,235,215,.55);
  background:linear-gradient(0deg, rgba(30,25,18,.5) 0%, rgba(30,25,18,.2) 60%, transparent 100%);
  border-top-color:rgba(245,235,215,.1);
}

/* Stamp watermark */
.pp-stamp{
  position:absolute;bottom:18px;right:16px;z-index:1;
  font-family:'IBM Plex Mono',monospace;font-size:28px;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;
  color:rgba(255,255,255,.1);
  transform:rotate(-8deg);
  border:2px solid rgba(255,255,255,.08);
  border-radius:6px;padding:4px 10px;
  pointer-events:none;
}
.pp-stamp.pp-stamp-img{
  border:none;background:none;padding:0;
}
.pp-stamp-img img{
  max-width:120px;height:auto;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.3));
}

/* ── Pinned Polaroids Grid ── */
.pp-polaroids{
  position:absolute;bottom:0;left:0;right:0;
  z-index:3;padding:0 16px 20px;
  display:grid;grid-template-columns:1fr 1fr;
  gap:10px;justify-items:center;
}

/* Polaroid card */
.pp-pol{
  width:100%;max-width:130px;
  background:#FDFAF7;
  border-radius:4px;
  padding:6px 6px 6px;
  box-shadow:0 3px 12px rgba(0,0,0,.2);
  position:relative;
}
.pp-pol:nth-child(1){transform:rotate(-1.5deg);}
.pp-pol:nth-child(2){transform:rotate(1.2deg);}
.pp-pol:nth-child(3){transform:rotate(0.8deg);}
.pp-pol:nth-child(4){transform:rotate(-0.6deg);}

.pp-pol-photo{
  width:100%;aspect-ratio:1;
  border-radius:2px;overflow:hidden;
  background:#e8e0d4;
}
.pp-pol-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.pp-pol-caption{padding:4px 1px 0;}
.pp-pol-city{
  font-family:'DM Sans',sans-serif;font-size:9px;font-weight:600;
  color:var(--text);line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pp-pol-date{
  font-family:'IBM Plex Mono',monospace;font-size:8px;
  color:var(--muted);margin-top:1px;
}

/* Polaroid entrance animation */
.pp-pol.entering{
  opacity:0;transform:scale(.85);
}
.pp-pol.animate-in{
  transition:opacity .3s cubic-bezier(.32,.72,0,1),transform .3s cubic-bezier(.32,.72,0,1);
  opacity:1;
}

/* Empty polaroid slot */
.pp-pol-empty{
  width:100%;max-width:130px;
  aspect-ratio:auto;
  border:2px dashed rgba(255,255,255,.2);
  border-radius:4px;
  display:flex;align-items:center;justify-content:center;
  min-height:120px;
}
.pp-pol-empty-plus{
  font-size:16px;color:rgba(255,255,255,.25);
  font-weight:300;line-height:1;
}

/* ── Page Indicator ── */
.passport-indicator{
  display:flex;align-items:center;justify-content:center;gap:16px;
  margin-top:14px;
  font-family:'IBM Plex Mono',monospace;font-size:10px;
  color:var(--muted);
}
.pp-nav-btn{
  background:none;border:1px solid rgba(255,255,255,.15);color:#fff;
  width:32px;height:32px;border-radius:50%;font-size:18px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:opacity .2s, background .2s;
}
.pp-nav-btn:hover:not([disabled]){background:rgba(255,255,255,.1);}
.pp-nav-btn[disabled]{opacity:.25;cursor:not-allowed;}
.pp-nav-label{min-width:70px;text-align:center;}

/* ── Empty State ── */
.passport-empty{
  width:100%;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;
  background:#2A3142;
}
.passport-empty-icon{
  color:var(--muted);opacity:.25;
}
.passport-empty-title{
  font-family:'Playfair Display',serif;font-size:18px;font-weight:700;
  color:rgba(255,255,255,.7);
}
.passport-empty-sub{
  font-family:'DM Sans',sans-serif;font-size:13px;
  color:rgba(255,255,255,.35);
}

/* ── Empty Passport Page (blank placeholder) ── */
.passport-page-empty{
  width:100%;height:100%;
  background:linear-gradient(170deg,#F5F0E8 0%,#EDE6D8 100%);
  position:relative;
  display:flex;align-items:center;justify-content:center;
}
.passport-page-empty::before{
  content:'';position:absolute;inset:12px;
  border:1px solid rgba(180,165,140,.2);
  border-radius:4px;pointer-events:none;
}
.pp-page-number{
  position:absolute;bottom:16px;
  left:50%;transform:translateX(-50%);
  font-family:'IBM Plex Mono',monospace;font-size:10px;
  color:rgba(140,125,100,.35);
}
.pp-watermark{
  font-family:'Playfair Display',serif;font-size:48px;font-weight:700;
  color:rgba(180,165,140,.08);
  pointer-events:none;user-select:none;
  letter-spacing:2px;
}
/* (spine shadow handled by .passport-page::before) */

/* ── Settings Drawer (slide-out from right) ── */
.settings-overlay{
  position:absolute;inset:0;z-index:900;
  background:rgba(0,0,0,.35);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;
  transition:opacity .3s ease;
}
.settings-overlay.open{opacity:1;pointer-events:auto;}

.settings-drawer{
  position:absolute;top:0;right:0;bottom:0;z-index:901;
  width:72%;max-width:300px;
  background:var(--card);
  border-radius:20px 0 0 20px;
  box-shadow:-8px 0 32px rgba(0,0,0,.2);
  transform:translateX(100%);
  transition:transform .35s cubic-bezier(.32,.72,0,1);
  display:flex;flex-direction:column;
  padding:0;
  overflow-y:auto;
}
.settings-drawer.open{transform:translateX(0);}

.settings-drawer-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:56px 20px 16px;
}
.settings-drawer-title{
  font-family:'Playfair Display',serif;font-size:20px;font-weight:700;
  color:var(--text);
}
.settings-drawer-close{
  width:32px;height:32px;border-radius:50%;
  background:var(--bg);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--muted);
  transition:background .15s;
}
.settings-drawer-close:active{background:rgba(255,255,255,.06);}

.settings-drawer-section{padding:4px 12px;}

.settings-drawer-item{
  display:flex;align-items:center;gap:14px;
  width:100%;padding:14px 12px;
  background:none;border:none;border-radius:12px;
  font-family:'DM Sans',sans-serif;font-size:15px;font-weight:500;
  color:var(--text);cursor:pointer;
  transition:background .12s;
  text-align:left;
}
.settings-drawer-item:active{background:rgba(255,255,255,.05);}
.settings-drawer-item svg{color:var(--muted);flex-shrink:0;}

.settings-drawer-danger{color:#D94F4F;}
.settings-drawer-danger svg{color:#D94F4F;}

.settings-drawer-divider{
  height:1px;margin:6px 20px;
  background:var(--border);opacity:.5;
}

/* Scrollable body inside drawer */
.settings-drawer-scroll{
  flex:1;overflow-y:auto;padding-bottom:32px;
  -webkit-overflow-scrolling:touch;
}

/* Section labels */
.settings-section-label{
  font-family:'DM Sans',sans-serif;
  font-size:10px;font-weight:600;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:1.2px;
  padding:16px 24px 4px;
}

/* Info row (non-interactive item with value on the right) */
.settings-info-row{cursor:default !important;}
.settings-info-row:active{background:none !important;}
.settings-info-value{
  margin-left:auto;
  font-size:13px;font-weight:500;
  color:var(--muted);
  white-space:nowrap;
}
.settings-copyright{font-size:13px;color:var(--muted);}

/* Toggle switch */
.settings-toggle-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 12px;
  font-family:'DM Sans',sans-serif;font-size:15px;font-weight:500;
  color:var(--text);
}
.settings-toggle{
  position:relative;display:inline-block;
  width:44px;height:26px;flex-shrink:0;
}
.settings-toggle input{opacity:0;width:0;height:0;position:absolute;}
.settings-toggle-track{
  position:absolute;inset:0;
  background:var(--border);
  border-radius:13px;
  cursor:pointer;
  transition:background .25s ease;
}
.settings-toggle-track::after{
  content:'';position:absolute;
  left:3px;top:3px;
  width:20px;height:20px;
  background:#fff;border-radius:50%;
  box-shadow:0 1px 4px rgba(0,0,0,.15);
  transition:transform .25s cubic-bezier(.32,.72,0,1);
}
.settings-toggle input:checked+.settings-toggle-track{
  background:#4A90D9;
}
.settings-toggle input:checked+.settings-toggle-track::after{
  transform:translateX(18px);
}

/* Theme toggle (dark mode switch with sun/moon icons inside track) */
.settings-theme-switch{
  position:relative;display:inline-block;
  width:52px;height:30px;flex-shrink:0;
  cursor:pointer;
}
.settings-theme-switch input{opacity:0;width:0;height:0;position:absolute;}
.settings-theme-track{
  position:absolute;inset:0;
  background:var(--border);
  border-radius:15px;
  transition:background .3s ease;
}
.settings-theme-track::after{
  content:'';position:absolute;
  left:3px;top:3px;
  width:24px;height:24px;
  background:#fff;border-radius:50%;
  box-shadow:0 1px 4px rgba(0,0,0,.18);
  transition:transform .3s cubic-bezier(.32,.72,0,1);
  z-index:1;
}
.settings-theme-icon{
  position:absolute;top:50%;transform:translateY(-50%);
  transition:opacity .25s ease;
}
.settings-theme-sun{
  left:7px;color:#C8A96E;
  opacity:0;
}
.settings-theme-moon{
  right:7px;color:rgba(255,255,255,.7);
  opacity:0;
}
/* Light mode (unchecked): show sun behind the knob area — moon visible on right */
.settings-theme-switch input:not(:checked)~.settings-theme-track .settings-theme-moon{opacity:0;}
.settings-theme-switch input:not(:checked)~.settings-theme-track .settings-theme-sun{opacity:.5;}
/* Dark mode (checked): knob moves right, show moon, hide sun */
.settings-theme-switch input:checked+.settings-theme-track{
  background:#3B3B4F;
}
.settings-theme-switch input:checked+.settings-theme-track::after{
  transform:translateX(22px);
}
.settings-theme-switch input:checked+.settings-theme-track .settings-theme-sun{opacity:.4;}
.settings-theme-switch input:checked+.settings-theme-track .settings-theme-moon{opacity:1;}

/* Bottom sign-out spacing */
.settings-drawer-bottom{padding-bottom:12px;}

/* ── Legal Page Overlay ── */
.legal-overlay{
  position:fixed;inset:0;z-index:10001;
  background:var(--bg, #FAF8F5);
  transform:translateX(100%);
  transition:transform .32s cubic-bezier(.32,.72,0,1);
  display:flex;flex-direction:column;
}
.legal-overlay.legal-visible{
  transform:translateX(0);
}
.legal-page{
  display:flex;flex-direction:column;
  height:100%;
}
.legal-page-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;
  border-bottom:1px solid var(--border, #E8E4DF);
  flex-shrink:0;
}
.legal-page-back{
  background:none;border:none;cursor:pointer;
  color:var(--text, #2C2C2C);padding:4px;
  display:flex;align-items:center;
}
.legal-page-title{
  font-family:'Playfair Display',serif;
  font-size:18px;font-weight:600;
  color:var(--text, #2C2C2C);
}
.legal-page-body{
  flex:1;overflow-y:auto;
  padding:24px 24px 48px;
  -webkit-overflow-scrolling:touch;
}
.legal-page-body h3{
  font-family:'DM Sans',sans-serif;
  font-size:15px;font-weight:600;
  color:var(--text, #2C2C2C);
  margin:24px 0 8px;
}
.legal-page-body h3:first-child{margin-top:0;}
.legal-page-body p{
  font-family:'DM Sans',sans-serif;
  font-size:14px;line-height:1.7;
  color:var(--text-secondary, #6B6B6B);
  margin:0 0 12px;
}
.legal-page-body ul{
  padding-left:20px;margin:0 0 12px;
}
.legal-page-body li{
  font-family:'DM Sans',sans-serif;
  font-size:14px;line-height:1.7;
  color:var(--text-secondary, #6B6B6B);
  margin-bottom:4px;
}
.legal-last-updated{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  color:var(--muted, #999);
  margin-bottom:20px !important;
}

/* ── Subscription & Restore Pages ── */
.sub-current{
  text-align:center;
  padding:28px 20px;
  background:var(--card-bg, #fff);
  border:1.5px solid var(--border, #E8E4DF);
  border-radius:16px;
  margin-bottom:28px;
}
.sub-current-label{
  font-family:'DM Sans',sans-serif;
  font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:1px;
  color:var(--muted, #999);
  margin-bottom:6px;
}
.sub-current-plan{
  font-family:'Playfair Display',serif;
  font-size:24px;font-weight:700;
  color:var(--text, #2C2C2C);
}
.sub-current-price{
  font-family:'IBM Plex Mono',monospace;
  font-size:14px;
  color:var(--accent, #C8A96E);
  margin-top:4px;
}
.sub-section-title{
  font-family:'DM Sans',sans-serif;
  font-size:12px;font-weight:600;
  text-transform:uppercase;letter-spacing:.8px;
  color:var(--muted, #999);
  margin-bottom:16px;
}
.sub-empty{
  display:flex;flex-direction:column;
  align-items:center;text-align:center;
  padding:40px 20px;
  border:1.5px dashed var(--border, #E8E4DF);
  border-radius:16px;
}
.sub-empty svg{
  color:var(--border, #E8E4DF);
  margin-bottom:16px;
}
.sub-empty-title{
  font-family:'DM Sans',sans-serif;
  font-size:16px;font-weight:600;
  color:var(--text, #2C2C2C);
  margin:0 0 6px;
}
.sub-empty-desc{
  font-family:'DM Sans',sans-serif;
  font-size:14px;line-height:1.6;
  color:var(--muted, #999);
  margin:0;
  max-width:260px;
}

/* ── Feedback Form ── */
.fb-form{
  display:flex;flex-direction:column;gap:4px;
}
.fb-label{
  font-family:'DM Sans',sans-serif;
  font-size:12px;font-weight:600;
  color:var(--text, #2C2C2C);
  text-transform:uppercase;
  letter-spacing:.5px;
  margin-top:12px;
}
.fb-label:first-child{margin-top:0;}
.fb-optional{
  font-weight:400;text-transform:none;
  letter-spacing:0;color:var(--muted, #999);
}
.fb-input{
  font-family:'DM Sans',sans-serif;
  font-size:15px;color:var(--text, #2C2C2C);
  background:var(--card-bg, #fff);
  border:1.5px solid var(--border, #E8E4DF);
  border-radius:12px;
  padding:12px 14px;
  outline:none;
  transition:border-color .2s ease;
  -webkit-appearance:none;
}
.fb-input:focus{
  border-color:var(--accent, #C8A96E);
}
.fb-input::placeholder{
  color:var(--muted, #999);
}
.fb-select{
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:36px;
}
.fb-textarea{
  resize:vertical;
  min-height:100px;
  line-height:1.6;
}
.fb-file-area{
  display:flex;align-items:center;gap:10px;
  padding:14px 16px;
  border:1.5px dashed var(--border, #E8E4DF);
  border-radius:12px;
  cursor:pointer;
  font-family:'DM Sans',sans-serif;
  font-size:14px;color:var(--muted, #999);
  transition:border-color .2s ease, background .2s ease;
}
.fb-file-area:active{
  background:var(--hover, rgba(0,0,0,.02));
  border-color:var(--accent, #C8A96E);
}
.fb-file-area svg{
  color:var(--muted, #999);flex-shrink:0;
}
.fb-submit{
  margin-top:20px;
  font-family:'DM Sans',sans-serif;
  font-size:15px;font-weight:600;
  color:#fff;
  background:var(--accent, #C8A96E);
  border:none;border-radius:14px;
  padding:14px;
  cursor:pointer;
  transition:opacity .2s ease, transform .1s ease;
}
.fb-submit:active{
  transform:scale(.98);
  opacity:.85;
}
.fb-submit:disabled{
  opacity:.6;cursor:not-allowed;
}

/* ── Itinerary Preferences ── */
.prof-prefs-section{
  margin:24px 0 8px;
  padding:0 4px;
}
.prof-prefs-title{
  font-family:'DM Sans',sans-serif;
  font-size:10px;font-weight:600;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.5px;
  margin-bottom:12px;
}
.prof-pref-group{
  margin-bottom:16px;
}
.prof-pref-label{
  font-family:'DM Sans',sans-serif;
  font-size:12px;font-weight:500;
  color:var(--text);
  margin-bottom:6px;
}
.prof-pref-options{
  display:flex;gap:6px;flex-wrap:wrap;
}
.prof-pref-btn{
  padding:6px 14px;
  font-family:'DM Sans',sans-serif;
  font-size:11px;font-weight:500;
  color:var(--muted);
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:8px;
  cursor:pointer;
  transition:all .15s;
}
.prof-pref-btn.active{
  color:#4A8C8A;
  background:rgba(74,140,138,.08);
  border-color:rgba(74,140,138,.3);
  font-weight:600;
}
.prof-pref-btn:active{transform:scale(.97);}
.prof-dietary-options{
  display:flex;gap:6px;flex-wrap:wrap;
}
.prof-dietary-chip{
  padding:5px 12px;
  font-family:'DM Sans',sans-serif;
  font-size:11px;font-weight:500;
  color:var(--muted);
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:16px;
  cursor:pointer;
  transition:all .15s;
}
.prof-dietary-chip.active{
  color:#6B8F6B;
  background:rgba(107,143,107,.08);
  border-color:rgba(107,143,107,.3);
  font-weight:600;
}
.prof-dietary-chip:active{transform:scale(.97);}

/* ═══════════════════════════════════════════
   Highlight Rings
   ═══════════════════════════════════════════ */
.hl-section{
  flex-shrink:0;padding:20px 0 8px;
}
.hl-scroll{
  display:flex;gap:14px;
  overflow-x:auto;padding:0;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.hl-scroll::-webkit-scrollbar{display:none;}
.hl-item{
  display:flex;flex-direction:column;align-items:center;
  gap:6px;flex-shrink:0;cursor:pointer;
}
.hl-ring{
  width:64px;height:64px;border-radius:50%;
  border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;background:var(--card);
  box-shadow:0 1px 4px rgba(0,0,0,.04);
  transition:transform .15s;
}
.hl-ring:active{transform:scale(.94);}
.hl-ring img{
  width:100%;height:100%;object-fit:cover;border-radius:50%;
}
.hl-ring-new{
  border:1px solid var(--border);
  color:var(--muted);background:var(--card);
  box-shadow:none;opacity:.85;
}
.hl-ring-new:hover{opacity:1;}
.hl-label{
  font-family:'IBM Plex Mono',monospace;font-size:9px;font-weight:500;
  letter-spacing:.6px;text-transform:uppercase;
  color:var(--muted);max-width:64px;opacity:.75;
  text-align:center;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;
}

/* ═══════════════════════════════════════════
   Highlight Story Viewer
   ═══════════════════════════════════════════ */
.hl-viewer{
  position:absolute;inset:0;z-index:860;
  background:#000;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity .2s ease;
}
.hl-viewer.open{opacity:1;pointer-events:auto;}

/* Progress bars */
.hl-viewer-bars{
  position:absolute;top:44px;left:8px;right:8px;z-index:5;
  display:flex;gap:3px;
}
.hl-viewer-bar{
  flex:1;height:2.5px;border-radius:2px;
  background:rgba(255,255,255,.25);overflow:hidden;
}
.hl-viewer-bar-fill{
  height:100%;background:white;border-radius:2px;
  width:0%;
}
.hl-viewer-bar.viewed .hl-viewer-bar-fill{width:100%;}
.hl-viewer-bar.active .hl-viewer-bar-fill{
  animation:hlBarFill 5s linear forwards;
}
@keyframes hlBarFill{from{width:0%;}to{width:100%;}}

.hl-viewer-close{
  position:absolute;top:52px;right:12px;z-index:6;
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.1);border:none;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:white;
}
.hl-viewer-close:active{background:rgba(255,255,255,.2);}
.hl-viewer-edit{
  position:absolute;top:52px;right:54px;z-index:6;
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.1);border:none;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:white;
}
.hl-viewer-edit:active{background:rgba(255,255,255,.2);}

.hl-viewer-name{
  position:absolute;top:54px;left:14px;z-index:6;
  font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;
  color:white;
}

/* Blurred background fill (same image, zoomed + blurred) */
.hl-viewer-bg{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  filter:blur(30px) brightness(.4);
  transform:scale(1.2);
  z-index:0;
}
/* Sharp photo centered as square */
.hl-viewer-photo{
  position:absolute;
  left:50%;top:50%;transform:translate(-50%,-50%);
  width:92%;max-width:380px;aspect-ratio:1;
  object-fit:cover;border-radius:8px;
  z-index:1;
  box-shadow:0 8px 32px rgba(0,0,0,.4);
}

.hl-viewer-info{
  position:absolute;bottom:32px;left:0;right:0;z-index:5;
  text-align:center;
  font-family:'DM Sans',sans-serif;font-size:12px;
  color:rgba(255,255,255,.6);
}

/* Tap zones */
.hl-viewer-tap{
  position:absolute;top:0;bottom:0;z-index:4;
  cursor:pointer;
}
.hl-viewer-tap-left{left:0;width:35%;}
.hl-viewer-tap-right{right:0;width:65%;}

/* ═══════════════════════════════════════════
   Highlight Creator
   ═══════════════════════════════════════════ */
.hl-creator{
  position:absolute;inset:0;z-index:870;
  background:var(--bg);
  transform:translateY(100%);
  transition:transform .35s cubic-bezier(.32,.72,0,1);
  display:flex;flex-direction:column;
  overflow:hidden;
}
.hl-creator.open{transform:translateY(0);}

.hl-creator-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:52px 16px 16px;flex-shrink:0;gap:12px;
}
.hl-creator-title{
  font-family:'Playfair Display',serif;font-size:17px;font-weight:700;
  color:var(--text);flex:1;text-align:center;
}
.hl-creator-cancel{
  font-family:'DM Sans',sans-serif;font-size:14px;font-weight:500;
  background:none;border:none;cursor:pointer;padding:6px 2px;
  color:var(--muted);
}
.hl-creator-save{
  font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;
  background:#4A8C8A;color:#fff;border:none;cursor:pointer;
  padding:8px 16px;border-radius:999px;letter-spacing:.2px;
  transition:opacity .15s,transform .1s;
}
.hl-creator-save:hover{opacity:.9;}
.hl-creator-save:active{transform:scale(.97);}
.hl-creator-save:disabled{opacity:.3;pointer-events:none;}

/* Cover + name: one integrated block */
.hl-creator-cover-row{
  display:flex;align-items:center;gap:0;
  margin:0 16px 18px;padding:8px 8px 8px 8px;
  background:var(--card);border:1px solid var(--border);
  border-radius:16px;flex-shrink:0;
}
.hl-creator-cover{
  width:56px;height:56px;border-radius:50%;flex-shrink:0;
  border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;overflow:hidden;
  background:var(--bg);position:relative;
  transition:border-color .15s,background .15s;
}
.hl-creator-cover:hover{border-color:var(--muted);}
.hl-creator-cover:active{transform:scale(.97);}
.hl-creator-cover-icon{color:var(--muted);opacity:.55;}
.hl-creator-cover-img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;border-radius:50%;
}
.hl-creator-cover.has-img .hl-creator-cover-icon{display:none;}
.hl-creator-cover.has-img{border-color:var(--border);}

.hl-creator-name-wrap{
  flex:1;min-width:0;padding:0 4px 0 12px;
}
.hl-creator-name{
  width:100%;padding:6px 0;
  font-family:'DM Sans',sans-serif;font-size:15px;font-weight:500;
  color:var(--text);background:transparent;
  border:0;outline:none;box-sizing:border-box;
}
.hl-creator-name::placeholder{color:var(--muted);opacity:.6;}
.hl-creator-cover-hint{
  font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.8px;
  text-transform:uppercase;color:var(--muted);opacity:.55;margin-top:2px;
}

/* Delete button (edit mode) */
.hl-creator-delete{
  margin:12px 16px 24px;padding:12px;
  border-radius:12px;border:1.5px solid rgba(217,79,79,.2);
  background:none;
  font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;
  color:#D94F4F;cursor:pointer;text-align:center;
  flex-shrink:0;
}
.hl-creator-delete:active{background:rgba(217,79,79,.05);}

.hl-creator-subtitle{
  padding:0 18px 8px;
  font-family:'DM Sans',sans-serif;font-size:11px;font-weight:600;
  color:var(--muted);text-transform:uppercase;letter-spacing:.5px;
}

.hl-creator-grid{
  flex:1;overflow-y:auto;
  padding:0 10px 100px;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:3px;align-content:start;
  -webkit-overflow-scrolling:touch;
}
.hl-creator-tile{
  aspect-ratio:1;overflow:hidden;
  border-radius:6px;cursor:pointer;
  position:relative;background:rgba(0,0,0,.04);
}
.hl-creator-tile img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.hl-creator-tile .hl-check{
  position:absolute;top:6px;right:6px;
  width:20px;height:20px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.85);background:rgba(0,0,0,.15);
  display:flex;align-items:center;justify-content:center;
  transition:all .12s;
  box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.hl-creator-tile.selected .hl-check{
  background:#4A8C8A;border-color:#fff;
  box-shadow:0 2px 6px rgba(74,140,138,.4);
}
.hl-creator-tile.selected{
  outline:2px solid #4A8C8A;outline-offset:-2px;
}
.hl-check svg{opacity:0;}
.hl-creator-tile.selected .hl-check svg{opacity:1;}

/* ── Name Edit Modal ── */
.name-modal-overlay{
  display:none;
  position:absolute;inset:0;z-index:999;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  align-items:center;justify-content:center;
}
.name-modal-overlay.open{display:flex;}
.name-modal{
  width:calc(100% - 48px);max-width:320px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:24px 20px 20px;
  box-shadow:0 16px 48px rgba(0,0,0,.3);
  animation:nameModalIn .25s cubic-bezier(.32,.72,0,1);
}
@keyframes nameModalIn{
  from{opacity:0;transform:scale(.92) translateY(8px);}
  to{opacity:1;transform:scale(1) translateY(0);}
}
.name-modal-title{
  font-family:'DM Sans',sans-serif;font-size:15px;font-weight:600;
  color:var(--text);margin-bottom:16px;text-align:center;
}
.name-modal-input{
  width:100%;padding:12px 14px;
  font-family:'Playfair Display',serif;font-size:20px;font-weight:700;
  color:var(--text);
  background:var(--bg);
  border:1.5px solid var(--border);
  border-radius:10px;outline:none;
  text-align:center;
  transition:border-color .15s;
  box-sizing:border-box;
}
.name-modal-input:focus{border-color:rgba(200,169,110,.5);}
.name-modal-actions{
  display:flex;gap:10px;margin-top:16px;
}
.name-modal-cancel,.name-modal-save{
  flex:1;padding:10px 0;border-radius:10px;
  font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;
  cursor:pointer;border:none;transition:background .15s;
}
.name-modal-cancel{
  background:var(--bg);color:var(--muted);
  border:1px solid var(--border);
}
.name-modal-cancel:active{background:rgba(255,255,255,.04);}
.name-modal-save{
  background:#C8A96E;color:#1C2333;
}
.name-modal-save:active{background:#b8994e;}
.name-modal-save:disabled{
  background:rgba(60,48,34,.12);color:rgba(60,48,34,.4);cursor:not-allowed;
}

/* Small advisory line under name inputs — soft grey when unlocked, warmer
   tone when locked so the cooldown state reads at a glance. */
.name-modal-hint{
  margin-top:6px;
  font-family:'IBM Plex Mono',monospace;
  font-size:10px;letter-spacing:.4px;line-height:1.4;
  color:rgba(60,48,34,.55);
}
.name-modal-hint--locked{color:#8a6a38;}
[data-theme="dark"] .name-modal-hint{color:rgba(245,235,215,.55);}
[data-theme="dark"] .name-modal-hint--locked{color:#d9b678;}

/* ── Name-change cooldown warning dialog ──
   Sits on top of the Edit Passport Name / Personal Information modal, so
   we bump the z-index above those. Visual tone is amber/gold to match the
   app's premium palette — warning-y without looking like a system error. */
.name-warn-overlay{z-index:2100;}
.name-warn-modal{
  max-width:340px;
  text-align:center;
  padding:28px 24px 20px;
  animation:nameWarnIn .26s cubic-bezier(.32,.72,0,1);
}
@keyframes nameWarnIn{
  from{opacity:0;transform:scale(.92);}
  to{opacity:1;transform:scale(1);}
}
.name-warn-icon{
  width:48px;height:48px;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 14px;
  color:#C8A96E;
  background:rgba(200,169,110,.14);
  border-radius:50%;
}
.name-warn-title{
  font-family:'Playfair Display',serif;
  font-size:18px;font-weight:700;
  color:#2b2218;
  margin-bottom:8px;
  letter-spacing:.2px;
}
.name-warn-body{
  font-family:'DM Sans',sans-serif;
  font-size:13.5px;line-height:1.5;
  color:rgba(60,48,34,.75);
  margin-bottom:20px;
}
.name-warn-body #nameChangeWarnUnlockDate{
  font-family:'IBM Plex Mono',monospace;
  font-weight:600;color:#2b2218;
  letter-spacing:.2px;
}
.name-warn-actions{margin-top:0;}
[data-theme="dark"] .name-warn-title{color:#f5ebd7;}
[data-theme="dark"] .name-warn-body{color:rgba(245,235,215,.75);}
[data-theme="dark"] .name-warn-body #nameChangeWarnUnlockDate{color:#f5ebd7;}
[data-theme="dark"] .name-warn-icon{background:rgba(200,169,110,.2);}

/* ── Home Base modal extras ── */
.home-base-modal {
  max-width: 340px;
  /* Allow dropdowns to escape without the modal being clipped */
  overflow: visible;
}
.home-base-modal .hb-field { margin-bottom: 14px; }
.home-base-modal .hb-label {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.home-base-modal .name-modal-input {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  padding: 11px 14px;
}
.home-base-modal .name-modal-input:disabled {
  opacity: .55;
  cursor: not-allowed;
}
.home-base-modal .si-search-list {
  /* Keep the list visually tied to the modal's card */
  border-radius: 10px;
}

/* ── Dark Mode ── */
[data-theme="dark"] .pp-pol{background:var(--card);}
[data-theme="dark"] .passport-page-empty{background:linear-gradient(170deg,#242019 0%,#1E1B16 100%);}
[data-theme="dark"] .passport-page-empty::before{border-color:rgba(200,180,140,.08);}
[data-theme="dark"] .settings-drawer{background:var(--bg);}
[data-theme="dark"] .settings-row:active,
[data-theme="dark"] .settings-drawer-close:active{background:rgba(255,255,255,.05);}