/* PWA 安裝引導的樣式。
   和主界面完全隔離（所有選擇器都帶 pwa- 前綴），改壞了不影響主功能。
   顏色用了主題的 CSS 變量，搬到別的項目時把 var(--x) 換成具體顏色即可。 */

#pwa-gate {
  position: fixed; inset: 0; z-index: 100;
  background: var(--bg, #f6f2e9);
  display: flex; align-items: center; justify-content: center;
  padding: 28px 24px calc(env(safe-area-inset-bottom) + 28px);
  animation: pwa-in .3s ease;
}
#pwa-gate.out { opacity: 0; transition: opacity .3s ease; pointer-events: none; }
@keyframes pwa-in { from { opacity: 0 } to { opacity: 1 } }

.pwa-card { width: 100%; max-width: 360px; text-align: center; }

.pwa-icon {
  width: 96px; height: 96px; border-radius: 22px; display: block; margin: 0 auto 20px;
  box-shadow: 0 8px 28px rgba(60, 50, 35, .16);
}
.pwa-name {
  font-size: 25px; font-weight: 680; margin: 0 0 7px;
  letter-spacing: .01em; color: var(--fg, #22201c);
}
.pwa-sub {
  font-size: 13.5px; color: var(--dim, #6b6459); margin: 0 0 30px; line-height: 1.6;
}

/* ── 安裝按鈕 + 進度圈 ── */
.pwa-action { display: flex; align-items: center; justify-content: center; gap: 14px; }
.pwa-btn {
  background: var(--go, #a33b2a); color: #fffaf2; border: 0; font-family: inherit;
  font-size: 16px; font-weight: 660; padding: 15px 34px; border-radius: 14px;
  letter-spacing: .02em;
}
.pwa-btn:active { opacity: .82; }
.pwa-btn:disabled { opacity: .55; }

.pwa-ring { position: relative; width: 52px; height: 52px; display: none; flex: none; }
.pwa-ring.on { display: block; }
.pwa-ring svg { transform: rotate(-90deg); }
.pwa-ring-bg { fill: none; stroke: #ded5c4; stroke-width: 4; }
/* ⚠️ 這裡絕對不許加 transition —— 圈是逐幀更新的，過渡會和它互相拖後腿 */
.pwa-ring-fg { fill: none; stroke: var(--go, #a33b2a); stroke-width: 4; stroke-linecap: round; }
.pwa-ring.done .pwa-ring-fg { stroke: var(--go, #a33b2a); }
.pwa-pct {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 660; color: var(--go, #a33b2a);
}

.pwa-status {
  font-size: 12.5px; color: var(--dim, #6b6459); margin: 18px 0 0;
  line-height: 1.65; min-height: 20px;
}

.pwa-skip {
  background: none; border: 0; font-family: inherit;
  color: var(--faint, #8a8071); font-size: 14px; margin-top: 26px; padding: 10px 18px;
}
.pwa-skip:active { color: var(--dim, #6b6459); }

/* ── 微信/小紅書內置瀏覽器的警告 ── */
.pwa-warn {
  background: #f4edd8; border: 1px solid #ddcb98;
  border-radius: 14px; padding: 18px 18px 16px; text-align: left;
}
.pwa-warn b { color: var(--warn, #8a6d1f); font-size: 15px; }
.pwa-warn p {
  margin: 9px 0 0; font-size: 13px; line-height: 1.75; color: var(--dim, #6b6459);
}
.pwa-warn p b { color: var(--fg, #22201c); font-size: inherit; }

/* ── iPhone 三步引導抽屜 ── */
.pwa-sheet { position: fixed; inset: 0; z-index: 110; display: none; }
.pwa-sheet.on { display: block; }
.pwa-mask {
  position: absolute; inset: 0; background: rgba(34, 32, 28, .42);
  backdrop-filter: blur(3px); animation: pwa-in .18s ease;
}
.pwa-sheet-body {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--surface-2, #efe9db);
  border-top-left-radius: 22px; border-top-right-radius: 22px;
  padding: 24px 20px calc(env(safe-area-inset-bottom) + 18px);
  max-height: 88vh; overflow-y: auto;
  animation: pwa-rise .24s cubic-bezier(.2, .8, .3, 1);
}
@keyframes pwa-rise { from { transform: translateY(100%) } to { transform: translateY(0) } }

.pwa-sheet-body h3 {
  margin: 0 0 18px; font-size: 17px; font-weight: 660; text-align: center;
  color: var(--fg, #22201c);
}
.pwa-step { display: flex; gap: 13px; margin-bottom: 17px; }
.pwa-num {
  flex: none; width: 25px; height: 25px; border-radius: 50%;
  background: var(--go, #a33b2a); color: #fffaf2;
  font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.pwa-step p {
  margin: 1px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--fg, #22201c);
}
.pwa-step p b { font-weight: 660; }
.pwa-step small {
  display: block; margin-top: 5px; font-size: 12px; line-height: 1.65;
  color: var(--dim, #6b6459); font-weight: 400;
}
.pwa-share {
  width: 15px; height: 17px; vertical-align: -3px; margin: 0 2px;
  color: var(--info, #3d5a80);
}
.pwa-sheet-close {
  width: 100%; background: var(--raised, #e6ddca); color: var(--fg, #22201c);
  border: 0; font-family: inherit; font-size: 15px; font-weight: 550;
  padding: 14px; border-radius: 13px; margin-top: 6px;
}
.pwa-sheet-close:active { opacity: .8; }