/*
 * 小傢伙 PetPal 產品覆寫。共用 tokens 與元件在 ../bluebox/bluebox.css，這裡只放：
 * 1. 產品主色與 App 畫面色 tokens
 * 2. PetPal 專屬元件（首屏、模擬畫面），class 前綴 pp-
 * 模擬畫面依原生 App 實際排版（PetPalApp/Views、Widgets/WalkLiveActivity.swift、Shared/Theme.swift 淺色）。
 */

:root {
  /* 產品主色：取自 App icon 的品牌橘（Theme.swift brand #E8823C；深色版 #F09A5A 對 #121110 對比較足） */
  --bb-accent: #f09a5a;
  --bb-accent-ink: #17120e;
  --bb-accent-soft: rgba(240, 154, 90, 0.14);

  /* App 畫面色（Theme.swift 淺色） */
  --pp-brand: #e8823c;
  --pp-green: #2e5e52;
  --pp-gold: #f0b449;
  --pp-cream: #fff4e4;
  --pp-ink: #3d362e;
  --pp-muted: #8a7f72;
  --pp-glass-muted: #6e6357;
  --pp-pale: #fbe3cf;
  --pp-avatar: #f8e7cf;
  --pp-surface-muted: #f1e8d9;
}

.pp-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.pp-line { display: inline-block; }
.pp-nb { white-space: nowrap; }

/* ---------- 導覽列 ---------- */
@media (max-width: 480px) { .pp-nav-soon { display: none; } }

/* ---------- 首屏 ---------- */
.pp-hero { padding-block: clamp(24px, 4vw, 56px) clamp(56px, 6vw, 96px); overflow: clip; }
.pp-hero__grid {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(32px, 5vw, 80px);
}
:lang(zh) .pp-hero__copy .bb-h1 { max-width: 11em; }
.pp-hero__sub {
  margin: var(--bb-space-4) 0 0; font-size: clamp(1.25rem, 2.1vw, 1.75rem); line-height: 1.3;
  font-weight: 600; letter-spacing: -0.01em; color: var(--bb-text); text-wrap: balance;
}
.pp-hero__sub + .bb-lede { margin-top: var(--bb-space-3); }
.pp-hero__cta { display: flex; flex-wrap: wrap; gap: var(--bb-space-3); margin-top: var(--bb-space-6); }
.pp-hero__req { margin-top: var(--bb-space-4); }
/* 桌面：整支手機都在首屏內（依視窗高度縮放），資料字不小於 16px */
.pp-hero__device {
  display: grid; justify-items: center;
  --phone-w: clamp(300px, min(32vw, calc((100vh - 150px) * 0.4615)), 390px);
  --phone-w: clamp(300px, min(32vw, calc((100svh - 150px) * 0.4615)), 390px);
}
.pp-phone--hero { --phone-w: inherit; }

@media (max-width: 960px) {
  .pp-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--bb-space-6); }
  .pp-hero__device { --phone-w: min(400px, calc(100vw - 2 * var(--bb-gutter))); }
  /* 窄螢幕：只露出上半（距離列＋腳印），下緣淡出 */
  .pp-hero__crop {
    height: calc(var(--phone-w) * 1.55); overflow: hidden;
    padding: 0 var(--bb-gutter); margin: 0 calc(-1 * var(--bb-gutter));
    -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent);
    mask-image: linear-gradient(to bottom, #000 82%, transparent);
  }
}
@media (max-width: 520px) {
  .pp-hero { padding-bottom: var(--bb-space-5); }
  .pp-hero .bb-h1 { font-size: 2.125rem; }
  .pp-hero .bb-lede { margin-top: var(--bb-space-4); font-size: 1.0625rem; }
  .pp-hero__cta { margin-top: var(--bb-space-5); }
  .pp-hero__cta .bb-btn { padding: 0 16px; }
  .pp-hero__device { --phone-w: min(440px, calc(100vw * 1.08)); justify-items: stretch; }
  .pp-hero__crop { display: flex; justify-content: center; align-items: flex-start; padding: 0; height: calc(var(--phone-w) * 1.55); }
}

/* ---------- App 畫面共用：1pt = --u ---------- */
.pp-screen {
  --u: calc(var(--phone-w) * 0.93 / 390);
  background: var(--pp-cream); color: var(--pp-ink);
  font-family: var(--bb-font); line-height: 1.25;
  -webkit-font-smoothing: antialiased;
}
.pp-screen svg { max-width: none; }
.pp-map { position: absolute; inset: 0; width: 100%; height: 100%; }
.pp-land { fill: #f4efe6; }
.pp-block { fill: #efeae0; }
.pp-bld--a { fill: #e6dfd2; }
.pp-bld--b { fill: #e9e3d7; }
.pp-bld--c { fill: #e3dccd; }
.pp-park { fill: #d6e7c4; }
.pp-pond { fill: #bfdcef; }
.pp-road-c path { stroke: #e2dacb; fill: none; }
.pp-road path { stroke: #fff; fill: none; }
.pp-label { fill: #5f8a50; font-size: 15px; font-weight: 600; font-family: var(--bb-font); }
.pp-street { fill: #8a8174; font-size: 12px; font-weight: 600; font-family: var(--bb-font); paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
.pp-print { fill: var(--pp-ink); opacity: 0.9; transition: opacity 240ms var(--bb-ease-out); }
.pp-print.is-off { opacity: 0; }
.pp-ev circle { fill: #fff; stroke: rgba(61, 54, 46, 0.12); stroke-width: 1; }
.pp-ev text { font-size: 18px; text-anchor: middle; }
.pp-ev.is-off { opacity: 0; }
.pp-ev--sm text { font-size: 9px; }
.pp-walker__pulse { fill: rgba(232, 130, 60, 0.24); transform-box: fill-box; transform-origin: center; animation: pp-pulse 1.8s var(--bb-ease-out) infinite; }
.pp-walker__pulse--still { animation: none; }
.pp-walker__disc { fill: #fff; stroke: var(--pp-brand); stroke-width: 2.5; }
.pp-walker use { fill: var(--pp-brand); }
@keyframes pp-pulse { 0% { transform: scale(0.6); opacity: 1; } 100% { transform: scale(1.15); opacity: 0; } }

/* 狀態列與靈動島 */
.pp-sbar {
  position: absolute; top: calc(var(--u) * 17); left: calc(var(--u) * 34); right: calc(var(--u) * 26);
  display: flex; justify-content: space-between; align-items: center;
  font-size: calc(var(--u) * 16); font-weight: 600; color: #000; z-index: 2;
}
.pp-sbar__icons { display: inline-flex; align-items: center; gap: calc(var(--u) * 6); }
.pp-sig { width: calc(var(--u) * 17); height: calc(var(--u) * 11); fill: currentColor; }
.pp-bat { width: calc(var(--u) * 24); height: calc(var(--u) * 11.5); border-radius: calc(var(--u) * 3.5); background: #000; position: relative; }
.pp-bat::after { content: ""; position: absolute; right: calc(var(--u) * -2.5); top: 30%; height: 40%; width: calc(var(--u) * 1.5); background: rgba(0, 0, 0, 0.4); border-radius: 0 2px 2px 0; }
.pp-island {
  position: absolute; top: calc(var(--u) * 11); left: 50%; transform: translateX(-50%); z-index: 3;
  width: calc(var(--u) * 124); height: calc(var(--u) * 36); border-radius: 999px; background: #000;
}
.pp-homebar { position: absolute; bottom: calc(var(--u) * 8); left: 50%; transform: translateX(-50%); width: calc(var(--u) * 136); height: calc(var(--u) * 5); border-radius: 999px; background: rgba(0, 0, 0, 0.82); z-index: 3; }

/* App 的玻璃：淺色 controlSurface／glass（Theme.swift） */
.pp-glass {
  background: rgba(255, 252, 244, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 18) rgba(51, 44, 37, 0.14);
}

/* 散步中：上方距離列 */
.pp-stat {
  position: absolute; top: calc(var(--u) * 60); left: calc(var(--u) * 14); right: calc(var(--u) * 14); z-index: 2;
  display: flex; align-items: center; gap: calc(var(--u) * 10);
  min-height: calc(var(--u) * 54); padding: 0 calc(var(--u) * 16);
  border-radius: 999px;
  background: rgba(255, 252, 244, 0.86); border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 18) rgba(51, 44, 37, 0.14);
}
.pp-avatar {
  flex: none; display: grid; place-items: center;
  width: calc(var(--u) * 32); height: calc(var(--u) * 32); border-radius: 50%;
  background: var(--pp-brand); color: #fff;
}
.pp-avatar svg { width: 58%; height: 58%; fill: currentColor; }
.pp-stat__div { width: 1px; height: calc(var(--u) * 22); background: rgba(61, 54, 46, 0.14); }
.pp-stat__dist { font-size: max(16px, calc(var(--u) * 18)); font-weight: 900; white-space: nowrap; }
.pp-stat__time { font-size: max(13px, calc(var(--u) * 15)); font-weight: 700; color: var(--pp-glass-muted); }
.pp-stat__counts { margin-left: auto; display: inline-flex; gap: calc(var(--u) * 8); font-size: max(13px, calc(var(--u) * 15)); white-space: nowrap; }
.pp-stat__counts .is-zero { opacity: 0.35; }

/* 地圖控制鈕 */
.pp-ctrls { position: absolute; right: calc(var(--u) * 14); bottom: calc(var(--u) * 196); display: grid; gap: calc(var(--u) * 10); z-index: 2; }
.pp-ctl {
  position: absolute; display: grid; place-items: center;
  width: calc(var(--u) * 44); height: calc(var(--u) * 44); border-radius: 50%;
  background: rgba(255, 252, 244, 0.9); border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow: 0 calc(var(--u) * 4) calc(var(--u) * 12) rgba(51, 44, 37, 0.14); color: var(--pp-ink);
}
.pp-ctrls .pp-ctl { position: static; }
.pp-ctl--compass i { width: calc(var(--u) * 9); height: calc(var(--u) * 20); background: linear-gradient(#e0473b 50%, #b9b2a6 50%); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.pp-ctl--stop i { width: calc(var(--u) * 14); height: calc(var(--u) * 14); border-radius: calc(var(--u) * 3); background: var(--pp-green); }
.pp-ctl svg { width: 42%; height: 42%; }

/* 散步中：下方按鈕列與撤銷提示（提示在按鈕列正上方） */
.pp-dock { position: absolute; left: calc(var(--u) * 14); right: calc(var(--u) * 14); bottom: calc(var(--u) * 34); display: flex; flex-direction: column; gap: calc(var(--u) * 12); z-index: 2; }
.pp-dock__row { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 10); }
.pp-dbtn {
  display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 6);
  height: calc(var(--u) * 52); border-radius: 999px;
  background: var(--pp-pale); color: var(--pp-brand);
  font-size: calc(var(--u) * 16); font-weight: 800; white-space: nowrap;
}
.pp-dbtn--glass { background: rgba(255, 252, 244, 0.86); border: 1px solid rgba(255, 255, 255, 0.72); color: var(--pp-ink); box-shadow: 0 calc(var(--u) * 4) calc(var(--u) * 12) rgba(51, 44, 37, 0.12); }
.pp-dbtn[hidden] { display: none; }
.pp-toast {
  display: flex; align-items: center; justify-content: space-between;
  min-height: calc(var(--u) * 48); padding: 0 calc(var(--u) * 18); border-radius: calc(var(--u) * 16);
  background: rgba(255, 252, 244, 0.97); box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 18) rgba(51, 44, 37, 0.16);
  font-size: calc(var(--u) * 15); font-weight: 700;
}
.pp-toast b { color: var(--pp-brand); font-weight: 800; }
.pp-toast[hidden] { display: none; }
.pp-toast.is-new { animation: pp-toast-in 280ms var(--bb-ease-out); }
@keyframes pp-toast-in { from { opacity: 0; transform: translateY(calc(var(--u) * 8)); } to { opacity: 1; transform: none; } }

/* ---------- 運作方式：首頁畫面＋三步驟 ---------- */
.pp-how { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.pp-how__media {
  display: grid; justify-items: center;
  padding: clamp(24px, 3vw, 44px) clamp(16px, 2vw, 24px);
  border-radius: var(--bb-radius-xl); background: var(--bb-surface-1); border: 1px solid var(--bb-line);
}
.pp-phone--how { --phone-w: clamp(260px, 26vw, 330px); }
@media (max-width: 860px) {
  .pp-how { grid-template-columns: minmax(0, 1fr); gap: var(--bb-space-7); }
  .pp-phone--how { --phone-w: min(330px, calc(100vw - 2 * var(--bb-gutter) - 40px)); }
}

.pp-chips { position: absolute; top: calc(var(--u) * 60); left: calc(var(--u) * 16); right: calc(var(--u) * 16); display: flex; justify-content: space-between; z-index: 2; }
.pp-chip {
  position: relative; display: inline-flex; align-items: center; gap: calc(var(--u) * 8);
  height: calc(var(--u) * 46); padding: 0 calc(var(--u) * 16) 0 calc(var(--u) * 8); border-radius: 999px;
  background: rgba(255, 252, 244, 0.86); border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow: 0 calc(var(--u) * 4) calc(var(--u) * 12) rgba(51, 44, 37, 0.12);
  font-size: calc(var(--u) * 17); font-weight: 900;
}
.pp-avatar--sm { width: calc(var(--u) * 32); height: calc(var(--u) * 32); background: var(--pp-avatar); color: var(--pp-brand); }
.pp-chev { width: calc(var(--u) * 7); height: calc(var(--u) * 7); border: solid var(--pp-ink); border-width: 0 2px 2px 0; transform: translateY(-25%) rotate(45deg); margin-left: calc(var(--u) * 2); }
.pp-chip--streak { color: var(--pp-brand); padding-left: calc(var(--u) * 14); gap: calc(var(--u) * 5); }
.pp-chip--streak svg { width: calc(var(--u) * 16); height: calc(var(--u) * 16); }
.pp-chip--gps { position: absolute; top: calc(var(--u) * 118); right: calc(var(--u) * 16); height: calc(var(--u) * 28); padding: 0 calc(var(--u) * 10); gap: calc(var(--u) * 6); font-size: calc(var(--u) * 12); font-weight: 800; z-index: 2; }
.pp-chip--gps i { width: calc(var(--u) * 7); height: calc(var(--u) * 7); border-radius: 50%; background: var(--pp-green); }
.pp-ctl--locate { right: calc(var(--u) * 16); top: calc(var(--u) * 312); z-index: 2; color: var(--pp-brand); }
.pp-card {
  position: absolute; left: calc(var(--u) * 12); right: calc(var(--u) * 12); bottom: calc(var(--u) * 92); z-index: 2;
  padding: calc(var(--u) * 20) calc(var(--u) * 18) calc(var(--u) * 18);
  border-radius: calc(var(--u) * 28);
  background: rgba(255, 252, 244, 0.9); border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 28) rgba(51, 44, 37, 0.16);
}
.pp-card__title { font-size: calc(var(--u) * 24); font-weight: 900; }
.pp-card__sub { margin-top: calc(var(--u) * 4); font-size: calc(var(--u) * 14); font-weight: 700; color: var(--pp-glass-muted); }
.pp-wx { margin-top: calc(var(--u) * 14); padding: calc(var(--u) * 12); border-radius: calc(var(--u) * 18); background: rgba(255, 255, 255, 0.6); }
.pp-wx__head { display: flex; align-items: center; gap: calc(var(--u) * 8); font-size: calc(var(--u) * 13); }
.pp-wx__head b { font-weight: 800; }
.pp-wx__head span { margin-left: auto; font-size: calc(var(--u) * 11); color: var(--pp-glass-muted); }
.pp-wx__ico { width: calc(var(--u) * 26); height: calc(var(--u) * 26); flex: none; }
.pp-wx__grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: calc(var(--u) * 10); text-align: center; font-size: calc(var(--u) * 10); color: var(--pp-glass-muted); }
.pp-wx__grid b { display: block; font-size: calc(var(--u) * 16); font-weight: 800; color: var(--pp-ink); }
.pp-wx__src { margin-top: calc(var(--u) * 6); text-align: right; font-size: calc(var(--u) * 9); color: var(--pp-muted); }
.pp-stats { display: grid; grid-template-columns: 0.8fr 1.1fr 1.1fr; margin-top: calc(var(--u) * 14); font-size: calc(var(--u) * 11); color: var(--pp-glass-muted); font-weight: 700; }
.pp-stats > span + span { border-left: 1px solid rgba(61, 54, 46, 0.14); padding-left: calc(var(--u) * 10); }
.pp-stats b { display: block; font-size: calc(var(--u) * 21); font-weight: 900; color: var(--pp-ink); white-space: nowrap; }
.pp-stats small { font-size: calc(var(--u) * 12); margin-left: 2px; font-weight: 800; }
.pp-go {
  display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 8);
  margin-top: calc(var(--u) * 16); height: calc(var(--u) * 54); border-radius: 999px;
  background: var(--pp-brand); color: #fff; font-size: calc(var(--u) * 17); font-weight: 900;
  box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 16) rgba(232, 130, 60, 0.35);
}
.pp-go svg { width: calc(var(--u) * 18); height: calc(var(--u) * 18); fill: currentColor; }
.pp-tabs {
  position: absolute; left: calc(var(--u) * 18); right: calc(var(--u) * 18); bottom: calc(var(--u) * 22); z-index: 2;
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
  height: calc(var(--u) * 62); padding: 0 calc(var(--u) * 6); border-radius: 999px;
  background: rgba(255, 252, 244, 0.9); border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 18) rgba(51, 44, 37, 0.14);
}
.pp-tabs span { display: grid; justify-items: center; gap: calc(var(--u) * 2); font-size: calc(var(--u) * 10); font-weight: 700; color: var(--pp-ink); padding: calc(var(--u) * 6) 0; border-radius: 999px; }
.pp-tabs span.is-on { color: var(--pp-brand); background: rgba(232, 130, 60, 0.14); }
.pp-tabs svg { width: calc(var(--u) * 22); height: calc(var(--u) * 22); fill: currentColor; }

/* ---------- 功能列的畫面 ---------- */
.pp-fp { width: 100%; display: grid; justify-items: center; --phone-w: clamp(250px, 72cqi, 360px); }
.pp-fp__phone { --phone-w: inherit; }
.pp-crop { overflow: hidden; display: flex; justify-content: center; width: 100%; padding: 0 var(--bb-space-5); }
.pp-crop--top {
  height: calc(var(--phone-w) * 1.18); align-items: flex-start;
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent); mask-image: linear-gradient(to bottom, #000 80%, transparent);
}
.pp-crop--bottom {
  height: calc(var(--phone-w) * 1.12); align-items: flex-end;
  -webkit-mask-image: linear-gradient(to top, #000 80%, transparent); mask-image: linear-gradient(to top, #000 80%, transparent);
}
.pp-crop--sum { height: calc(var(--phone-w) * 1.8); -webkit-mask-image: linear-gradient(to bottom, #000 90%, transparent); mask-image: linear-gradient(to bottom, #000 90%, transparent); }

/* 鎖定畫面＋即時動態（Widgets/WalkLiveActivity.swift） */
.pp-lock { background: radial-gradient(120% 70% at 30% 18%, #6b4a33 0%, #3a2a20 45%, #1c1612 100%); color: #fff; }
.pp-island--live { width: calc(var(--u) * 210); display: flex; align-items: center; justify-content: space-between; padding: 0 calc(var(--u) * 16); font-size: calc(var(--u) * 14); }
.pp-island--live b { font-weight: 700; color: #fff; }
.pp-lock__date { position: absolute; top: calc(var(--u) * 92); width: 100%; text-align: center; font-size: calc(var(--u) * 19); font-weight: 600; color: rgba(255, 255, 255, 0.86); }
.pp-lock__time { position: absolute; top: calc(var(--u) * 112); width: 100%; text-align: center; font-size: calc(var(--u) * 92); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; color: rgba(255, 255, 255, 0.94); }
.pp-live {
  position: absolute; top: calc(var(--u) * 262); left: calc(var(--u) * 14); right: calc(var(--u) * 14);
  display: grid; grid-template-columns: auto 1fr 1fr; align-items: center; gap: calc(var(--u) * 12);
  padding: calc(var(--u) * 14) calc(var(--u) * 18);
  border-radius: calc(var(--u) * 24);
  background: rgba(30, 26, 23, 0.62); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.pp-live__paw { width: calc(var(--u) * 34); height: calc(var(--u) * 34); display: grid; place-items: center; color: #f0a35e; }
.pp-live__paw svg { width: calc(var(--u) * 22); height: calc(var(--u) * 22); fill: currentColor; }
.pp-live__cell { display: grid; justify-items: center; gap: calc(var(--u) * 2); }
.pp-live__cell b { font-size: max(16px, calc(var(--u) * 17)); font-weight: 700; }
.pp-live__cell small { font-size: calc(var(--u) * 11); color: #a89d92; }
.pp-lock__buttons { position: absolute; left: calc(var(--u) * 46); right: calc(var(--u) * 46); bottom: calc(var(--u) * 46); display: flex; justify-content: space-between; }
.pp-lock__buttons span { width: calc(var(--u) * 50); height: calc(var(--u) * 50); border-radius: 50%; background: rgba(0, 0, 0, 0.3); }

/* 摘要卡（SummaryView） */
.pp-sum {
  position: absolute; top: calc(var(--u) * 120); left: calc(var(--u) * 16); right: calc(var(--u) * 16); z-index: 2;
  padding: calc(var(--u) * 18);
  border-radius: calc(var(--u) * 28); background: rgba(255, 252, 244, 0.97); border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 28) rgba(51, 44, 37, 0.16);
}
.pp-sum__head { display: flex; align-items: flex-start; justify-content: space-between; }
.pp-sum__head b { display: block; font-size: calc(var(--u) * 24); font-weight: 900; }
.pp-sum__head span:not(.pp-avatar) { font-size: calc(var(--u) * 13); color: var(--pp-glass-muted); font-weight: 600; }
.pp-sum__head .pp-avatar { width: calc(var(--u) * 40); height: calc(var(--u) * 40); background: var(--pp-pale); color: var(--pp-brand); }
.pp-sum__stats { display: grid; grid-template-columns: 1fr 1fr 1fr; margin-top: calc(var(--u) * 18); font-size: calc(var(--u) * 12); color: var(--pp-glass-muted); font-weight: 700; text-align: center; }
.pp-sum__stats > span + span { border-left: 1px solid rgba(61, 54, 46, 0.14); }
.pp-sum__stats b { display: block; font-size: max(15px, calc(var(--u) * 22)); font-weight: 900; color: var(--pp-ink); }
.pp-sum__ev { display: grid; align-content: center; gap: calc(var(--u) * 2); font-size: calc(var(--u) * 15); color: var(--pp-ink); }
.pp-sum__ev i { font-style: normal; }
.pp-sum__map { margin-top: calc(var(--u) * 16); border-radius: calc(var(--u) * 18); overflow: hidden; aspect-ratio: 300 / 170; }
.pp-sum__map svg { width: 100%; height: 100%; display: block; }
.pp-sum__casing { fill: none; stroke: #fffcf4; stroke-width: 30; stroke-linejoin: round; stroke-linecap: round; }
.pp-sum__route { fill: none; stroke: var(--pp-brand); stroke-width: 17; stroke-linejoin: round; stroke-linecap: round; }
.pp-sum__start { fill: var(--pp-green); stroke: #fff; stroke-width: 2; }
.pp-sum__foot { display: flex; align-items: center; gap: calc(var(--u) * 6); margin-top: calc(var(--u) * 14); font-size: calc(var(--u) * 13); color: var(--pp-glass-muted); }
.pp-sum__foot svg { width: calc(var(--u) * 15); height: calc(var(--u) * 15); color: var(--pp-brand); }
.pp-sum__foot b { color: var(--pp-brand); font-weight: 900; }
.pp-share {
  position: absolute; left: calc(var(--u) * 16); right: calc(var(--u) * 16); top: calc(var(--u) * 586); z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 8);
  height: calc(var(--u) * 56); border-radius: 999px; background: var(--pp-brand); color: #fff;
  font-size: calc(var(--u) * 17); font-weight: 900; box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 16) rgba(232, 130, 60, 0.35);
}
.pp-share svg { width: calc(var(--u) * 18); height: calc(var(--u) * 18); }

/* 成就（AchievementsView） */
.pp-back { position: absolute; top: calc(var(--u) * 62); left: calc(var(--u) * 16); width: calc(var(--u) * 40); height: calc(var(--u) * 40); border-radius: 50%; display: grid; place-items: center; background: rgba(255, 252, 244, 0.9); border: 1px solid rgba(61, 54, 46, 0.12); }
.pp-back i { width: calc(var(--u) * 10); height: calc(var(--u) * 10); border: solid var(--pp-ink); border-width: 0 0 2px 2px; transform: translateX(20%) rotate(45deg); }
.pp-ach__head { position: absolute; top: calc(var(--u) * 116); left: calc(var(--u) * 18); right: calc(var(--u) * 18); display: flex; align-items: flex-end; justify-content: space-between; }
.pp-ach__head small { display: block; font-size: calc(var(--u) * 12); font-weight: 800; color: var(--pp-brand); }
.pp-ach__head b { display: block; font-size: calc(var(--u) * 28); font-weight: 900; }
.pp-ach__head span { font-size: calc(var(--u) * 13); color: var(--pp-glass-muted); }
.pp-ach__head em { font-style: normal; font-size: calc(var(--u) * 22); font-weight: 900; color: var(--pp-gold); }
.pp-ach__list { position: absolute; top: calc(var(--u) * 212); left: calc(var(--u) * 14); right: calc(var(--u) * 14); display: grid; gap: calc(var(--u) * 12); }
.pp-badge {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: calc(var(--u) * 14); align-items: center;
  padding: calc(var(--u) * 16) calc(var(--u) * 16) calc(var(--u) * 22);
  border-radius: calc(var(--u) * 22); background: var(--pp-surface-muted); border: 1.5px solid transparent;
}
.pp-badge.is-on { background: #fffcf4; border-color: rgba(240, 180, 73, 0.75); }
.pp-badge b { font-size: calc(var(--u) * 17); font-weight: 900; }
.pp-badge span { display: block; font-size: calc(var(--u) * 12); color: var(--pp-glass-muted); }
.pp-badge em { position: absolute; top: calc(var(--u) * 14); right: calc(var(--u) * 14); font-style: normal; font-size: calc(var(--u) * 11); font-weight: 800; color: #b9862a; background: rgba(240, 180, 73, 0.2); padding: calc(var(--u) * 3) calc(var(--u) * 9); border-radius: 999px; }
.pp-badge small { position: absolute; right: calc(var(--u) * 16); bottom: calc(var(--u) * 6); font-size: calc(var(--u) * 10); color: var(--pp-glass-muted); }
.pp-badge__ico { width: calc(var(--u) * 46); height: calc(var(--u) * 46); border-radius: 50%; display: grid; place-items: center; background: var(--pp-gold); color: #fff; }
.pp-badge__ico svg { width: 50%; height: 50%; fill: currentColor; }
.pp-badge__ico--lock { background: rgba(61, 54, 46, 0.06); }
.pp-badge__ico--lock i { width: calc(var(--u) * 13); height: calc(var(--u) * 11); border-radius: calc(var(--u) * 2.5); background: #9a8f82; position: relative; margin-top: calc(var(--u) * 6); }
.pp-badge__ico--lock i::before { content: ""; position: absolute; left: 50%; bottom: 80%; width: calc(var(--u) * 9); height: calc(var(--u) * 8); transform: translateX(-50%); border: calc(var(--u) * 2) solid #9a8f82; border-bottom: 0; border-radius: calc(var(--u) * 5) calc(var(--u) * 5) 0 0; }
.pp-bar { display: block; margin-top: calc(var(--u) * 8); height: calc(var(--u) * 6); border-radius: 999px; background: rgba(61, 54, 46, 0.1); overflow: hidden; }
.pp-bar i { display: block; height: 100%; width: calc(var(--p) * 1%); background: var(--pp-green); border-radius: inherit; }
.pp-badge.is-on .pp-bar i { background: var(--pp-gold); }

/* ---------- 信任 ---------- */
.pp-trust__link { margin-top: var(--bb-space-5); }
.pp-trust__link a { color: var(--bb-text); display: inline-block; padding-block: 12px; margin-block: -12px; }
.pp-feat-h { font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem); }

/* ---------- 文件頁（隱私權政策、404） ---------- */
.pp-doc { max-width: calc(44rem + var(--bb-gutter) * 2); padding-block: clamp(40px, 6vw, 80px) var(--bb-space-9); }
.pp-doc h1 { font-size: var(--bb-fs-h2); line-height: var(--bb-lh-heading); letter-spacing: var(--bb-tracking-heading); }
.pp-doc h2 { margin-top: var(--bb-space-8); font-size: 1.375rem; line-height: var(--bb-lh-heading); }
.pp-doc p, .pp-doc li { color: var(--bb-text-2); }
.pp-doc p { margin-top: var(--bb-space-3); }
.pp-doc ul { margin-top: var(--bb-space-3); padding-left: 1.25em; display: grid; gap: var(--bb-space-2); }
.pp-doc li::marker { color: var(--bb-text-3); }
.pp-doc strong { color: var(--bb-text); font-weight: 650; }
.pp-doc .pp-doc__meta { margin-top: var(--bb-space-4); font-size: var(--bb-fs-small); color: var(--bb-text-3); }
.pp-doc .pp-doc__lede { margin-top: var(--bb-space-5); font-size: var(--bb-fs-lede); color: var(--bb-text); }
.pp-doc a { color: var(--bb-text); display: inline-block; padding-block: 12px; margin-block: -12px; }
:lang(zh) .pp-doc li { overflow-wrap: anywhere; line-break: strict; }

@media (prefers-reduced-motion: reduce) {
  .pp-walker__pulse { animation: none; }
}