/* ===== TravelMate · base styles ===== */
:root { --accent: #7c3aed; }
* { -webkit-tap-highlight-color: transparent; }
body { margin: 0; }

/* the "book" stage */
.tm-stage {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(1200px 600px at 50% -10%, #e9e5f7 0%, #cdd2dc 45%, #aeb4c2 100%);
}

/* the mini-homepage "card" */
.tm-book {
  width: min(1080px, 96vw);
  height: min(720px, 88vh);
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(30, 27, 75, .35), 0 4px 14px rgba(0,0,0,.1);
  display: flex;
  overflow: hidden;
  position: relative;
}

/* vertical side tabs */
.tm-tabs {
  width: 116px;
  flex-shrink: 0;
  background: #f7f7fb;
  border-right: 1px solid #ecebf3;
  display: flex;
  flex-direction: column;
  padding: 18px 0;
  gap: 2px;
}
.tm-tab {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 12px 6px; cursor: pointer;
  color: #8b8ba0; font-size: 11px; font-weight: 600;
  border-radius: 12px; margin: 0 8px;
  transition: all .18s ease;
}
.tm-tab i { font-size: 17px; }
.tm-tab:hover { background: #efeefa; color: var(--accent); }
.tm-tab.active { background: var(--accent); color: #fff; box-shadow: 0 6px 16px rgba(124,58,237,.4); }

/* main pane */
.tm-main { flex: 1; overflow-y: auto; position: relative; }
.tm-main::-webkit-scrollbar { width: 8px; }
.tm-main::-webkit-scrollbar-thumb { background: #d6d6e2; border-radius: 8px; }

/* generic */
.chip { display:inline-flex; align-items:center; gap:5px; padding:4px 11px; border-radius:999px;
  font-size:11px; font-weight:600; background:#f1eefe; color:#6d28d9; }
.chip-outline { background:#fff; border:1px solid #e3e1f0; color:#7a7a90; }
.soft-card { background:#fff; border:1px solid #eeedf7; border-radius:16px; }

.btn { display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-radius:11px;
  font-weight:600;font-size:13px;cursor:pointer;border:none;transition:all .15s; }
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { filter:brightness(1.08); }
.btn-ghost { background:#f3f2fa; color:#5b5b72; }
.btn-ghost:hover { background:#e9e7f7; }

/* drag handle */
.drag-handle { cursor: grab; color:#c3c2d4; }
.wish-row.dragging { opacity:.4; }

/* scrapbook stickers */
.polaroid { background:#fff; padding:8px 8px 26px; border-radius:4px;
  box-shadow:0 8px 20px rgba(0,0,0,.18); }
.hand { font-family:'Caveat',cursive; }

/* modal */
.tm-modal-bg { position:absolute; inset:0; background:rgba(20,18,40,.45);
  display:flex; align-items:center; justify-content:center; z-index:50; padding:20px; }

/* fade */
.fade-in { animation: fade .25s ease; }
@keyframes fade { from { opacity:0; transform:translateY(6px);} to {opacity:1;transform:none;} }

/* music player equalizer */
.eq { display:flex; gap:2px; align-items:flex-end; height:14px; }
.eq span { width:3px; background:var(--accent); border-radius:2px; animation:eqb 1s infinite ease-in-out; }
.eq span:nth-child(2){animation-delay:.2s} .eq span:nth-child(3){animation-delay:.4s}
.eq span:nth-child(4){animation-delay:.1s}
@keyframes eqb { 0%,100%{height:4px} 50%{height:14px} }

/* responsive: stack tabs to bottom on small screens */
@media (max-width: 640px) {
  .tm-stage { padding: 0; }
  .tm-book { width:100vw; height:100vh; border-radius:0; flex-direction:column-reverse; }
  .tm-tabs { width:100%; flex-direction:row; justify-content:space-around; padding:6px 0;
    border-right:none; border-top:1px solid #ecebf3; overflow-x:auto; }
  .tm-tab { margin:0; font-size:9px; padding:6px 4px; }
}

/* ---------- image uploader component ---------- */
.tm-upload-btn { width:84px; height:84px; border:2px dashed #cbd5e1; border-radius:12px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  color:#94a3b8; font-size:11px; font-weight:600; background:#fafafa; cursor:pointer; transition:.15s; }
.tm-upload-btn:hover { border-color:var(--accent); color:var(--accent); background:#faf8ff; }
.tm-upload-btn i { font-size:18px; }
.tm-thumb { width:84px; height:84px; border-radius:12px; overflow:hidden; position:relative; box-shadow:0 1px 3px rgba(0,0,0,.12); }
.tm-thumb img { width:100%; height:100%; object-fit:cover; }
.tm-thumb-x { position:absolute; top:3px; right:3px; width:20px; height:20px; border-radius:50%;
  background:rgba(0,0,0,.6); color:#fff; font-size:10px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.tm-thumb-x:hover { background:#e11d48; }

/* leaflet inside modal needs explicit sizing */
.leaflet-container { font: inherit; }

/* =========================================================
   PROFILE — two-page open-book spread (matches mockup)
   Fits the fixed .tm-main height with NO vertical scroll:
   - left cover image grows to fill, BGM+Biography pinned bottom
   - right page is vertically compressed
========================================================= */
.pf-spread { display:flex; gap:0; height:100%; background:#fff; overflow:hidden; }
.pf-page { flex:1 1 50%; padding:16px 20px; min-width:0; display:flex; flex-direction:column; overflow:hidden; }
.pf-page--left  { border-right:1px solid #ececf1; }
.pf-page--right { }

/* generic flat card used across the right page */
.pf-card { background:#fff; border:1px solid #eef0f3; border-radius:12px; }
.pf-section-title { font-size:14px; font-weight:800; color:#2f2f2f; }
.pf-rule { border:0; border-top:1px solid #e7e7ec; margin:6px 0 8px; }

/* LEFT: cover photo grows to fill remaining height */
.pf-cover { position:relative; border-radius:14px; overflow:hidden;
  flex:1 1 auto; min-height:0;
  background:#3a3f48 center/cover no-repeat; box-shadow:0 8px 26px rgba(0,0,0,.16); }
.pf-cover-cam { position:absolute; top:10px; right:10px; width:32px; height:32px; border-radius:50%;
  background:rgba(0,0,0,.4); color:#fff; border:none; cursor:pointer; }
.pf-cover-cam:hover { background:rgba(0,0,0,.6); }
.pf-cover-bar { position:absolute; left:0; right:0; bottom:0; padding:9px 12px;
  background:linear-gradient(transparent, rgba(0,0,0,.6) 60%); color:#fff;
  display:flex; align-items:center; gap:10px; font-size:12px; }
.pf-cover-cap { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.pf-cover-date { color:#e8e8ea; white-space:nowrap; flex-shrink:0; }
.pf-cover-stats { margin-left:auto; display:flex; align-items:center; gap:12px; font-weight:600; }
.pf-cover-stats .s { display:inline-flex; align-items:center; gap:4px; }

/* LEFT: music + biography row pinned at the bottom */
.pf-leftrow { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; flex-shrink:0; }
.pf-music { display:flex; align-items:center; gap:11px; padding:11px; }
.pf-music-art { width:58px; height:58px; border-radius:8px; object-fit:cover; flex-shrink:0; }
.pf-music-meta { min-width:0; line-height:1.2; }
.pf-music-ctrls { display:flex; align-items:center; gap:13px; margin-top:5px; color:#2f2f2f; }
.pf-music-ctrls .play { width:28px; height:28px; border-radius:50%; background:#2f2f2f; color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer; border:none; }
.pf-music-ctrls .sk { background:none; border:none; cursor:pointer; color:#2f2f2f; font-size:13px; }
.pf-bio { padding:11px 14px; }

/* RIGHT: scrollable-free vertical column, compressed */
.pf-page--right > * { flex-shrink:0; }

/* RIGHT: traveler-info banner with avatar */
.pf-banner { position:relative; border-radius:12px; overflow:hidden; height:84px;
  background:#6b7280 center/cover no-repeat; }
.pf-banner-star { position:absolute; top:9px; right:11px; color:#FFB301; font-size:17px; }
.pf-banner-row { position:absolute; left:14px; bottom:-2px; display:flex; align-items:center; gap:11px; }
.pf-avatar { width:54px; height:54px; border-radius:50%; object-fit:cover;
  border:3px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,.25); }
.pf-banner-label { color:#fff; font-weight:600; font-size:12px; text-shadow:0 1px 3px rgba(0,0,0,.5); }

/* RIGHT: contact rows */
.pf-name { font-size:16px; font-weight:800; color:#2f2f2f; margin:8px 0 4px; }
.pf-contact { display:flex; align-items:center; justify-content:space-between; font-size:12.5px;
  color:#4b4b58; padding:1.5px 0; }
.pf-contact .val { display:flex; align-items:center; gap:8px; min-width:0; }
.pf-contact .val span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pf-ok { color:#4CAF50; font-size:13px; flex-shrink:0; }
.pf-link { color:#0078D4; font-weight:600; }

/* RIGHT: traveler index */
.pf-index { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.pf-seals { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pf-seal { padding:10px 6px; display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; }
.pf-seal-emblem { width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:19px; color:#fff; position:relative; }
.pf-seal-emblem.purple { background:radial-gradient(circle at 50% 35%, #8b5cf6, #610398); box-shadow:0 0 0 4px #ede9fe; }
.pf-seal-emblem.green  { background:radial-gradient(circle at 50% 35%, #66bb6a, #4C8900); box-shadow:0 0 0 4px #e6f4d8; }
.pf-seal-emblem::after { content:''; position:absolute; inset:-6px; border-radius:50%;
  border:2px dashed currentColor; opacity:.35; }
.pf-seal-label { font-size:10.5px; font-weight:700; color:#4b4b58; }
.pf-rings { display:flex; justify-content:space-around; align-items:center; padding:10px 6px; }

/* RIGHT: about-me table */
.pf-about { display:grid; grid-template-columns:1fr 1fr; gap:6px 11px; }
.pf-about-row { display:flex; align-items:center; justify-content:space-between;
  background:#f4f4f6; border-radius:8px; padding:6px 12px; font-size:12.5px; }
.pf-about-row .k { color:#8a8a96; font-weight:500; }
.pf-about-row .v { color:#2f2f2f; font-weight:700; }

/* RIGHT: chip variants for this page */
.pf-pill { display:inline-flex; align-items:center; gap:6px; padding:6px 13px; border-radius:10px;
  font-size:12.5px; font-weight:600; background:#f1f1f4; color:#3a3a45; }
.pf-pill-sm { display:inline-flex; align-items:center; padding:4px 11px; border-radius:8px;
  font-size:11.5px; font-weight:500; background:#fff; border:1px solid #e4e4ea; color:#5b5b66; }

/* responsive: on small screens, allow the page to scroll & stack */
@media (max-width: 820px) {
  .pf-spread { flex-direction:column; height:auto; overflow:visible; }
  .pf-page { overflow:visible; }
  .pf-cover { flex:none; aspect-ratio:4/3; }
  .pf-page--left { border-right:none; border-bottom:1px solid #ececf1; }
  .pf-index, .pf-about { grid-template-columns:1fr; }
}