/* 相伯 H5 · 全屏响应式基础层 */

/* 字体全部走本地，避免 Google Fonts 被拦导致首屏白屏 */
@font-face {
  font-family: "Noto Serif SC";
  src: url("assets/fonts/noto-serif-sc-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Serif SC";
  src: url("assets/fonts/noto-serif-sc-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Serif SC";
  src: url("assets/fonts/noto-serif-sc-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Serif SC";
  src: url("assets/fonts/noto-serif-sc-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "ZCOOL XiaoWei";
  src: url("assets/fonts/noto-serif-sc-600.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Ma Shan Zheng";
  src: url("assets/fonts/LXGWSeal-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* 说文正篆：全字库《说文解字》小篆子集（相伯亲鉴、神形骨等印章用字）。网页 @font-face 下发，用户不用装字。勿当正文。出处：数位发展部，CNS11643 https://www.cns11643.gov.tw */
@font-face {
  font-family: "Shuowen Zhuan";
  src: url("assets/fonts/shuowen-zhuan-subset.ttf?v=20260914sxg") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/*
 * Global Design Tokens
 * 唯一的 :root 变量入口。组件不得新增同名主题变量，优先复用这里的 Token。
 */
:root {
  /* 色彩 Token */
  --color-bg-paper: #F7F1E6;
  --color-bg-paper-deep: #EDE2CF;
  --color-gold-primary: #B8914B;
  --color-gold-light: #D7B46E;
  --color-gold-deep: #7A5D2B;
  /* 主按钮渐变止于此色。禁止用 --color-gold-deep 或更深棕色当填充终点，否则右侧会出近黑色块 */
  --color-gold-cta-end: #8F6B31;
  --gradient-cta: linear-gradient(105deg, var(--color-gold-light) 0%, var(--color-gold-primary) 52%, var(--color-gold-cta-end) 100%);
  --color-text-main: #252019;
  --color-text-sub: #5F574C;
  --color-text-secondary: #5F574C;
  --color-text-muted: #746B60;
  --color-seal: #A63D2F;
  --color-line: rgba(122, 93, 43, 0.20);
  --color-border: rgba(178, 122, 36, 0.18);
  --color-white-soft: rgba(255, 255, 255, 0.60);
  --shadow: 0 12px 30px rgba(66, 47, 20, 0.10);

  /* 4px spacing grid */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --sp-1: var(--space-1);
  --sp-2: var(--space-2);
  --sp-3: var(--space-3);
  --sp-4: var(--space-4);
  --sp-5: var(--space-5);
  --sp-6: var(--space-6);
  --sp-7: var(--space-7);
  --sp-8: var(--space-8);

  /* Typography */
  --font-family-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "AR PL New Sung", serif;
  --font-family-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans SC", "Helvetica Neue", STHeiti, "Microsoft Yahei", Tahoma, sans-serif;
  --ls-normal: 0;
  --ls-ritual: 0.12em;
  --font-ui: var(--font-family-sans);
  --font-display: var(--font-family-serif);
  --text-h1: 32px;
  --text-h1-line-height: 1.4;
  --text-h1-weight: 700;
  --text-h2: 24px;
  --text-h2-line-height: 1.4;
  --text-h2-weight: 600;
  --text-body: 16px;
  --text-body-line-height: 1.65;
  --text-body-weight: 400;
  --text-caption: 12px;
  --text-caption-line-height: 1.5;
  --text-caption-weight: 400;
  --nav-title-size: 17px;
  --nav-title-weight: 500;

  /* Component */
  --radius: 16px;
  --radius-card: 16px;
  --radius-button: 26px;
  --radius-lg: 20px;
  --radius-sheet: 28px;
  --ui-radius-sm: 10px;
  --ui-radius-md: 14px;
  --nav-height: 56px;
  --ui-control-h: 52px;
  --ui-touch: 44px;
  --icon-size: 24px;
  --card-padding: 16px;
  --card-height: 64px;
  --pay-hero-top-space: calc(var(--nav-height) + var(--safe-t));
  --nav-glass-inset: calc(var(--nav-height) + var(--safe-t));
  --chip-icon-size: 28px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --phone-w: min(390px, 100vw);
  --page-tone: #F7F1E6;
  --color-white: #FFFFFF;
  --color-bg-warm: var(--color-bg-paper);
  --color-bg-report: var(--color-bg-paper);
  --color-on-seal: #FBF7EF;
  --color-on-dark: #F7F1E6;
  --color-success: #3D9B6A;
  --color-privacy: #465A33;
  --color-privacy-leaf: #71AF7D;
  --color-cinnabar-deep: #7E2B21;
  --color-clay: #9C7B3F;
  --color-report-tone: #F1EEE4;
  --color-report-tone-2: #EAE4D5;
  --color-surface: rgba(255, 253, 248, 0.94);
  --color-surface-mid: rgba(255, 253, 248, 0.72);
  --color-surface-low: rgba(255, 253, 248, 0.56);
  --color-overlay-ink: color-mix(in srgb, var(--color-text-main) 88%, transparent);
  --cinnabar: var(--color-seal);
  --cinnabar-deep: var(--color-cinnabar-deep);
  --cinnabar-wash: color-mix(in srgb, var(--color-seal) 7%, transparent);
  --clay: var(--color-clay);
  --ink-85: color-mix(in srgb, var(--color-text-main) 88%, transparent);
  --ink-62: color-mix(in srgb, var(--color-text-main) 62%, transparent);
  --ink-42: color-mix(in srgb, var(--color-text-main) 42%, transparent);
  --ink-25: color-mix(in srgb, var(--color-text-main) 25%, transparent);
  --line-soft: color-mix(in srgb, var(--color-text-main) 9%, transparent);
  --tone: var(--color-report-tone);
  --tone-2: var(--color-report-tone-2);
  --serif: var(--font-family-serif);
  --brush: "LXGW Seal", "Ma Shan Zheng", "Kaiti SC", "STKaiti", "KaiTi", var(--font-family-serif);
  --zhuan: "Shuowen Zhuan", "Ma Shan Zheng", var(--font-family-serif);

  /* 首页语义 Token：组件只引用这些变量，不再散落硬编码 */
  --color-home-bg-start: #F7F1E6;
  --color-home-bg-end: #F7F1E6;
  --color-tool-bg: rgba(255, 255, 255, .58);
  --color-tool-border: rgba(154, 118, 58, .22);
  --color-chip-text: #5F574C;
  --color-status: #7A5D2B;
  --color-status-dot: #B8914B;
  --color-status-dot-ring: rgba(184, 145, 75, .16);
  --color-gold-accent: #B27A24;
  --color-ink-solid: #1A1A1A;
  --color-ornament: rgba(198, 151, 77, .30);
  --color-ornament-dot: #C79B55;
  --color-orb-border: rgba(214, 177, 99, .48);
  --color-orb-bg-start: rgba(255, 255, 255, .55);
  --color-orb-bg-end: rgba(247, 236, 218, .64);
  --color-orb-shell: rgba(255, 255, 255, .95);
  --color-orb-shell-ring: rgba(255, 255, 255, .25);
  --color-orb-accent: rgba(207, 166, 78, .62);
  --color-orb-shadow: 0 18px 34px rgba(95, 74, 39, .10);
  --color-orb-glow: 0 0 26px rgba(197, 157, 76, .15);
  --color-orb-inset: rgba(255, 255, 255, .82);
  --color-album-border: rgba(178, 122, 36, .55);
  --color-album-bg: rgba(255, 255, 255, .46);
  --color-album-text: #7A5A29;
  --shadow-tool: 0 5px 16px rgba(86, 70, 45, .09);
  --shadow-chip: 0 8px 20px rgba(86, 70, 45, .08);
  --shadow-cta: 0 14px 30px rgba(154, 122, 53, .26);
  --shadow-gold-text: drop-shadow(0 2px 4px rgba(184, 138, 77, .30));
  --shadow-gold-soft: drop-shadow(0 2px 4px rgba(184, 138, 77, .25));
  --tracking-subtitle: .5px;
  --tracking-instrument: .12em;
  --tracking-title: .12em;
  --tracking-title-line: .22em;
  --tracking-title-second: .03em;
  --tracking-gold: .04em;
  --color-mask-opaque: #000000;
  --hero-title-svg-size: 64px;
  --text-subtitle: 15px;
  --text-subtitle-line-height: 1.55;
  /* 首页顶栏：标志为原 52 的 80%；工具还原 44/24/52 后再缩 10% */
  --home-topbar-height: 46.8px;
  --home-logo-height: 41.6px;
  --home-logo-max-width: 115.2px;
  --home-tools-height: 46.8px;
  --home-tool-size: 39.6px;
  --home-tool-icon: 21.6px;
  --home-cta-max-width: 340px;
  --home-orb-max-size: 240px;
  --home-orb-height-min: 140px;
  --home-orb-height-max: 240px;
  --home-scan-max-width: 351px;
  --home-chip-width-min: 118px;
  --home-chip-width-max: 148px;
  --home-section-gap: 12px;
  --home-block-gap: 16px;
  --home-module-in: 8px;
  --home-module-out: 24px;
  --home-social-shift: 0px;
  --home-hero-shift: 0px;
  --home-status-shift: 4px;
  --home-hook-title-size: 24px;
  --home-hook-title-weight: 400;
  --home-hook-title-line-height: 1.28;
  /* 首页标题贴纸：走查机 393×852，展示宽 188px = 188/393 ≈ 47.8% 屏宽（45%–50% 档），高随稿 658×397 等比。 */
  --home-hook-sticker-ref: 393;
  --home-hook-sticker-design: 188;
  --home-hook-sticker-aspect: 658 / 397;
  --home-proof-inset: 8px;
  --home-proof-filter: saturate(0.56) sepia(0.18) contrast(0.95);
  --home-orb-sweep-light: #D7B46E;
  --home-orb-orbit: #D7B46E;
  --home-orb-orbit-soft: #C9A45A;
  --home-orb-orbit-cool: #B8914B;
  --home-orb-face-fill: #DBBC99;

  /* Existing selector aliases retained during migration */
  --paper: var(--color-bg-paper);
  --paper-deep: var(--color-bg-paper-deep);
  --ink: var(--color-text-main);
  --ink-soft: var(--color-text-sub);
  --ink-mute: var(--color-text-muted);
  --gold: var(--color-gold-primary);
  --gold-bright: var(--color-gold-light);
  --gold-deep: var(--color-gold-deep);
  --gold-cta-end: var(--color-gold-cta-end);
  --seal: var(--color-seal);
  --line: var(--color-line);
  --chrome-paper: var(--color-bg-paper);
  --chrome-home: var(--color-bg-paper);
  --chrome-page: var(--color-bg-paper);
  --chrome-camera: #0F0D0B;
  --chrome-confirm: var(--color-bg-paper);
  --chrome-report: var(--color-bg-paper);
}

html,
body,
#app {
  width: 100%;
  min-width: 0;
  min-height: 100%;
  background-color: var(--color-bg-paper);
}

html {
  color-scheme: light;
}

body {
  display: block !important;
  padding: 0 !important;
  overflow: hidden !important;
  font-family: var(--font-family-sans);
  color: var(--color-text-main);
  background: var(--chrome-page) !important;
}

/* 页面本身铺满视口；不再把 H5 装进带圆角和阴影的“手机画布” */
#app.stage {
  width: 100% !important;
  max-width: none !important;
  height: 100dvh !important;
  min-height: 100svh !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.screen {
  min-height: 100%;
}

.scroll {
  width: 100%;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}

@supports not (height: 100dvh) {
  #app.stage { height: 100vh !important; }
}

@media (min-width: 720px) {
  .screen > .scroll {
    padding-left: clamp(28px, 6vw, 96px);
    padding-right: clamp(28px, 6vw, 96px);
  }

  .screen[data-screen="preview"] .scroll,
  .screen[data-screen="report"] .scroll {
    max-width: 1080px;
    margin-inline: auto;
  }
}

/* 相伯 H5 · 接 API 后的增量样式 */

.site-disclaimer {
  margin: 16px 20px 20px;
  font-size: 11px;
  line-height: 1.55;
  color: var(--color-text-muted);
  text-align: center;
  letter-spacing: 0.02em;
}
.home-a3 .site-disclaimer { margin-top: 8px; }

.consent-box {
  width: min(320px, 100%);
  margin: 8px auto 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.55;
}
.consent-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  text-align: left;
}
.consent-row input { margin-top: 3px; accent-color: var(--color-gold-deep); }
.consent-row a { color: var(--color-gold-deep); }

.quality-fail {
  width: min(320px, 100%);
  margin: 0 auto 12px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--color-seal) 28%, transparent);
  background: color-mix(in srgb, var(--color-seal) 6%, transparent);
  border-radius: var(--ui-radius-sm);
  font-size: 13px;
  color: var(--color-cinnabar-deep);
  line-height: 1.55;
}

.xb-toast {
  position: fixed;
  left: 50%;
  bottom: calc(28px + var(--safe-b));
  transform: translateX(-50%);
  z-index: 120;
  max-width: min(320px, 86vw);
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--color-overlay-ink);
  color: var(--color-on-dark);
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
}

.screen[data-screen="legal-terms"],
.screen[data-screen="legal-privacy"],
.screen[data-screen="legal-face"],
.screen[data-screen="paywait"] {
  background: var(--color-bg-paper);
}
.legal-body, .paywait-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 22px calc(28px + var(--safe-b));
  font-size: var(--text-body);
  line-height: 1.75;
  color: var(--ink-soft);
}
.legal-body h1, .paywait-body h1 {
  font-family: var(--font-display);
  font-size: 22px;
  margin: 8px 0 16px;
  color: var(--ink);
}
.legal-body h2 { font-size: 15px; margin: 18px 0 8px; color: var(--ink); }
.legal-body strong { font-weight: 600; color: var(--ink); }
.legal-body a, .legal-link { color: var(--color-gold-deep); text-decoration: none; }

.paywait-body { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; position: relative; }
.paywait-body p { max-width: 280px; }
a.btn.paywait-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-4);
  min-height: var(--ui-control-h);
  width: min(280px, 100%);
  text-decoration: none;
  box-sizing: border-box;
}
a.btn.paywait-open[hidden] {
  display: none;
}
.paywait-halo {
  position: relative;
  width: 150px;
  height: 150px;
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-bg-paper) 88%, var(--color-gold-light)) 55%, transparent 78%);
  border-radius: 50%;
}
.paywait-halo-spin {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, var(--color-gold-light) 40%, transparent 60%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  animation: paywait-spin 2.6s linear infinite;
}
.paywait-ico,
.xb-icon.paywait-ico {
  width: 52px;
  height: 52px;
  color: var(--color-gold-primary);
  filter: drop-shadow(0 4px 8px color-mix(in srgb, var(--color-gold-deep) 28%, transparent));
  animation: paywait-sand 2.6s ease-in-out infinite;
  z-index: 1;
  margin-bottom: 0;
}
.paywait-lead {
  margin: 16px 0 0;
  max-width: 280px;
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--color-text-main);
}
.paywait-dots::after {
  content: "";
  animation: paywait-dots 1.8s steps(4) infinite;
}
.paywait-sub {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--color-text-sub);
}
.paywait-sub strong {
  font-weight: 600;
  color: var(--color-gold-deep);
}
.paywait-fallback {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: calc(16px + var(--safe-b, 0px));
  padding: 22px 20px 16px;
  border-radius: 16px;
  background: var(--color-bg-paper);
  border: 1px solid color-mix(in srgb, var(--color-gold-primary) 42%, transparent);
  box-shadow: var(--shadow);
  text-align: center;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .5s ease, transform .5s ease;
}
.paywait-fallback.is-on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.paywait-fallback[hidden] { display: none; }
.paywait-fallback p {
  max-width: none;
}
.paywait-fb-q {
  margin: 0 0 16px;
  font-family: var(--font-ui);
  font-size: 18px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--color-text-main);
}
.paywait-fb-q::after {
  content: "";
  display: block;
  width: 48px;
  height: 1px;
  margin: 12px auto 0;
  background: color-mix(in srgb, var(--color-gold-primary) 55%, transparent);
}
.paywait-fb-retry {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0 24px;
  box-sizing: border-box;
  border: 1px solid rgba(178, 122, 36, 0.55);
  border-radius: 14px;
  background: color-mix(in srgb, var(--color-bg-paper) 48%, transparent);
  box-shadow: none;
  color: var(--color-gold-deep);
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
  cursor: pointer;
}
.paywait-fb-note {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 12px 0 0;
  padding: 0;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.35;
  font-weight: 400;
  color: var(--color-text-muted);
}
.paywait-fb-note-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  line-height: 1.35;
}
.paywait-fb-reload {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 15px;
  height: 15px;
  min-width: 15px;
  min-height: 15px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  line-height: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.paywait-fb-reload .xb-icon,
.paywait-fb-reload .xb-icon svg {
  width: 15px;
  height: 15px;
}
.paywait-fb-reload::after {
  content: "";
  position: absolute;
  inset: -14px;
}
.paywait-fb-cs {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-muted);
}
.paywait-fb-cs button {
  border: 0;
  padding: 0;
  background: transparent;
  font: inherit;
  color: var(--color-gold-deep);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
@keyframes paywait-spin { to { transform: rotate(360deg); } }
@keyframes paywait-sand {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(180deg); }
}
@keyframes paywait-dots {
  0% { content: ""; }
  25% { content: "·"; }
  50% { content: "··"; }
  75% { content: "···"; }
}
@media (prefers-reduced-motion: reduce) {
  .paywait-halo-spin,
  .paywait-ico,
  .paywait-dots::after { animation: none; }
  .paywait-fallback { transition: none; transform: none; }
}

.rec-geo {
  width: 64px;
  height: 80px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--color-bg-paper-deep);
  border: 1px solid color-mix(in srgb, var(--color-gold-deep) 22%, transparent);
}
.rec-thumb {
  position: relative;
  flex-shrink: 0;
  width: 64px;
  height: 80px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-bg-paper-deep);
  border: 0;
}
.rec-thumb canvas,
.rec-thumb img {
  display: block;
  width: 64px;
  height: 80px;
  object-fit: cover;
  object-position: 50% 18%;
}
.rec-thumb img[hidden],
.rec-thumb canvas[hidden] {
  display: none;
}
.rec-card { align-items: flex-start; }

/* 隐私保护角标：贴齐照片右上，左下切角；字/盾/翠虬跟确认稿 */
.privacy-badge {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 7;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 12px;
  border: 0;
  border-radius: 0;
  border-bottom-left-radius: 16px;
  min-width: 0;
  min-height: 0;
  height: auto;
  appearance: none;
  -webkit-appearance: none;
  background: #fffdf8;
  color: var(--color-privacy);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.privacy-badge.is-compact {
  top: 2px;
  right: 2px;
  gap: 2px;
  padding: 2px 5px;
  border-radius: 6px;
  border-bottom-left-radius: 6px;
  font-size: 11px;
}
.privacy-badge.is-icon-only {
  padding: 3px;
  border-radius: 6px;
  border-bottom-left-radius: 6px;
}
.xb-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--icon-size);
  height: var(--icon-size);
  line-height: 0;
  color: inherit;
}
.xb-icon svg,
[data-icon] > svg {
  width: inherit;
  height: inherit;
  display: block;
  fill: currentColor;
  stroke: none;
}
.privacy-badge-icon,
.privacy-badge .xb-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  flex-shrink: 0;
  display: block;
  color: var(--color-privacy);
  fill: currentColor;
  opacity: 1;
}
.privacy-badge.is-compact .privacy-badge-icon,
.privacy-badge.is-compact .xb-icon {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
}
.annotate,
.photo-frame,
.rec-thumb {
  position: relative;
}

.privacy-sheet-wrap {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.privacy-sheet-wrap[hidden] { display: none; }
.privacy-sheet-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: var(--color-overlay-ink);
  opacity: 0.46;
  cursor: pointer;
}
.privacy-sheet {
  position: relative;
  width: min(100%, var(--phone-w));
  max-height: min(86vh, 640px);
  overflow-y: auto;
  background: var(--color-bg-paper);
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  padding: 20px 20px calc(16px + var(--safe-b));
  box-shadow: var(--shadow);
}
.privacy-sheet-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.privacy-sheet-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--color-privacy);
}
.privacy-sheet h2,
#privacySheetTitle {
  font-family: var(--font-family-sans);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: 0;
  color: var(--color-text-main);
  margin: 0;
}
.privacy-sheet-lead,
.privacy-sheet-body {
  font-family: var(--font-family-sans);
  font-size: 14px;
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--color-text-sub);
  margin: 0 0 10px;
}
.privacy-sheet strong {
  font-weight: 700;
  color: var(--color-text-main);
}
.privacy-sheet-body a {
  color: var(--color-privacy);
  text-decoration: none;
}
#btnPrivacyOk.privacy-sheet-ok,
.privacy-sheet-ok {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 6px;
  min-height: 44px;
  height: 44px;
  padding: 0 24px;
  box-sizing: border-box;
  border: 1px solid rgba(178, 122, 36, 0.55);
  border-radius: 14px;
  background: color-mix(in srgb, var(--color-bg-paper) 48%, transparent);
  box-shadow: none;
  color: var(--color-gold-deep, #7A5D2B);
  font-family: var(--font-family-sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
}
#btnPrivacyOk.privacy-sheet-ok:hover,
#btnPrivacyOk.privacy-sheet-ok:active,
.privacy-sheet-ok:hover,
.privacy-sheet-ok:active {
  background: color-mix(in srgb, var(--color-bg-paper) 48%, transparent);
  filter: none;
  opacity: 0.85;
}

.ritual-fail {
  position: absolute;
  inset: auto 20px 72px;
  z-index: 4;
  text-align: center;
  background: color-mix(in srgb, var(--color-bg-paper) 94%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-gold-deep) 22%, transparent);
  border-radius: var(--radius);
  padding: 16px 14px;
}
.ritual-fail p { font-size: 15px; margin-bottom: 12px; color: var(--ink-soft); }

.ask-sys {
  margin: 8px 12px 0;
  padding: 10px 12px;
  border-radius: var(--ui-radius-sm);
  background: color-mix(in srgb, var(--color-gold-deep) 8%, transparent);
  font-size: 15px;
  color: var(--ink-soft);
  text-align: center;
}

.member-gate-note {
  margin: 12px 20px 0;
  font-size: 15px;
  color: var(--color-gold-deep);
  text-align: center;
}

.fate-geo { width: 100%; height: 100%; display: block; }

.login-legal { font-size: 12px; color: var(--ink-mute); text-align: center; margin-top: 12px; }
.login-legal a { color: var(--color-gold-deep); }

@keyframes xb-skeleton {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.media-skeleton,
.photo-frame:not(.has-photo) {
  background-color: var(--color-bg-paper-deep);
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--color-white) 55%, transparent) 48%,
    transparent 100%
  );
  background-size: 220% 100%;
  animation: xb-skeleton 1.35s ease-in-out infinite;
}

button:not(:disabled):active,
[role="button"]:active,
a.btn:active,
.me-row:active,
.rec-item:active,
.prompt-item:active,
.scan-chip:active,
.home-tool:active,
.cta-album:active,
.btn-reselect:active,
.login-send:active {
  opacity: 0.85;
}
@media (prefers-reduced-motion: no-preference) {
  button:not(:disabled):active,
  [role="button"]:active,
  a.btn:active,
  .me-row:active,
  .rec-item:active,
  .prompt-item:active,
  .scan-chip:active {
    transform: scale(0.98);
  }
}
@media (prefers-reduced-motion: reduce) {
  .media-skeleton,
  .photo-frame:not(.has-photo) {
    animation: none;
  }
}

.wx-pay-hint {
  margin-top: var(--space-2);
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-muted);
  text-align: center;
}

.wx-open {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.wx-open[hidden] {
  display: none;
}
.wx-open-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: var(--color-overlay-ink);
  opacity: 0.46;
  cursor: pointer;
}
.wx-open-sheet {
  position: relative;
  width: min(100%, var(--phone-w));
  max-height: min(92vh, 760px);
  overflow-y: auto;
  background: var(--color-bg-paper);
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  padding: 22px 20px calc(16px + var(--safe-b));
  box-shadow: var(--shadow);
}
.wx-open-sheet h2,
#wxOpenTitle {
  font-family: var(--font-family-sans);
  font-size: 18px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--color-text-main);
  margin: 0 0 12px;
  text-align: center;
}
.wx-open-sheet h2::after {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  margin: 10px auto 0;
  background: color-mix(in srgb, var(--color-gold-primary) 55%, transparent);
}
.wx-open-steps {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  gap: 12px;
}
.wx-open-steps > li {
  display: block;
  margin: 0;
  font-family: var(--font-family-sans);
  font-size: 15px;
  line-height: 1.65;
  font-weight: 400;
  color: var(--color-text-main);
}
.wx-open-steps p {
  margin: 0;
  font-family: var(--font-family-sans);
  font-size: 15px;
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--color-text-main);
}
.wx-open-steps strong {
  font-family: var(--font-family-sans);
  font-size: 15px;
  line-height: 1.65;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--color-gold-deep);
}
.wx-step-copy {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.wx-helper-sticker {
  display: grid;
  justify-items: start;
  gap: 8px;
  width: 100%;
}
.wx-helper-card {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  height: 44px;
  padding: 0 14px;
  box-sizing: border-box;
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-white) 70%, var(--color-bg-paper-deep));
  border: 0;
}
.wx-open-sheet .wx-helper-name,
.wx-helper-name {
  font-family: var(--font-family-sans);
  font-size: 15px;
  line-height: 1.35;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--color-text-main);
}
.wx-file-ico {
  display: block;
  width: 22px;
  height: 22px;
  flex: none;
}
.wx-open-sheet .wx-helper-hint,
.wx-helper-hint {
  margin: 0;
  width: 100%;
  font-family: var(--font-family-sans);
  font-size: 15px;
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--color-text-sub);
  text-align: left;
}
.wx-open-sheet #btnCopyWxLink,
.wx-open-sheet .btn.wx-copy,
.wx-open-sheet .wx-copy {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 4px 0 0;
  min-height: 44px;
  height: 44px;
  padding: 0 24px;
  box-sizing: border-box;
  border: 1px solid rgba(178, 122, 36, 0.55);
  border-radius: 14px;
  background: color-mix(in srgb, var(--color-bg-paper) 48%, transparent) !important;
  box-shadow: none;
  color: var(--color-gold-deep);
  font-family: var(--font-family-sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
}
.wx-open-sheet #btnCopyWxLink.is-copied {
  color: #07C160;
  border-color: color-mix(in srgb, #07C160 45%, transparent);
}
.wx-open-later,
#btnCloseWxOpen {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 4px 0 0;
  padding: 0;
  min-width: 0;
  min-height: 44px;
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-family: var(--font-family-sans);
  font-size: 15px;
  line-height: 1.35;
  font-weight: 400;
  letter-spacing: 0;
  color: #444241;
  cursor: pointer;
}
.wx-open-cs {
  margin: 4px 0 0;
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-muted);
}
.wx-open-cs button {
  border: 0;
  padding: 0;
  background: transparent;
  font: inherit;
  color: var(--color-gold-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.kefu-sheet-wrap {
  position: fixed;
  inset: 0;
  z-index: 96;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}
.kefu-sheet-wrap[hidden] {
  display: none;
}
.kefu-sheet-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: var(--color-overlay-ink);
  opacity: 0.46;
  cursor: pointer;
}
.kefu-sheet {
  position: relative;
  width: min(100%, 340px);
  padding: 28px 20px 16px;
  border-radius: 18px;
  background: var(--color-bg-paper);
  border: 1px solid color-mix(in srgb, var(--color-gold-primary) 42%, transparent);
  box-shadow: var(--shadow);
  text-align: center;
}
.kefu-qr {
  display: block;
  width: 180px;
  height: 180px;
  margin: 0 auto 14px;
  object-fit: contain;
  background: var(--color-bg-paper);
}
.kefu-title {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--color-text-main);
}
.kefu-flow {
  text-align: left;
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--color-bg-paper-deep);
}
.kefu-flow-h {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--color-text-main);
}
.kefu-flow ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}
.kefu-flow li {
  font-size: 15px;
  line-height: 1.65;
  font-weight: 400;
  color: var(--color-text-sub);
}
.kefu-flow li strong {
  font-weight: 700;
  color: var(--color-gold-deep);
}
.kefu-save {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: var(--color-text-main);
  color: var(--color-gold-light, #D7B46E);
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.12em;
  cursor: pointer;
}
.kefu-close {
  display: block;
  width: 100%;
  margin: 6px 0 0;
  padding: 10px 8px;
  min-height: 44px;
  border: 0;
  background: transparent;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.35;
  color: var(--color-text-muted);
  cursor: pointer;
}

#quotaLeftSheet.quota-left-sheet {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(24px + var(--safe-t, 0px)) 20px calc(24px + var(--safe-b, 0px));
  box-sizing: border-box;
}
#quotaLeftSheet.quota-left-sheet[hidden] { display: none !important; }
#quotaLeftSheet .quota-left-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  background: rgba(23, 19, 15, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
#quotaLeftSheet .quota-left-card {
  position: relative;
  z-index: 1;
  width: min(328px, 100%);
  padding: 28px 20px 24px;
  border: 1px solid rgba(215, 180, 110, 0.55);
  border-radius: 28px;
  background:
    radial-gradient(210px 140px at 50% 18%, rgba(215, 180, 110, 0.12), transparent 72%),
    linear-gradient(155deg, #30291f 0%, #211d18 48%, #181612 100%);
  color: #F7F1E6;
  text-align: center;
  box-shadow: 0 24px 64px rgba(15, 13, 11, 0.52), inset 0 1px 0 rgba(255,255,255,0.07);
}
#quotaLeftSheet .quota-left-card::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(215, 180, 110, 0.18);
  border-radius: 20px;
  pointer-events: none;
}
#quotaLeftSheet .quota-left-icon {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 18px;
  color: #D7B46E;
}
#quotaLeftSheet .quota-left-icon svg {
  display: block;
  width: 56px;
  height: 56px;
}
#quotaLeftSheet #quotaLeftTitle {
  position: relative;
  z-index: 1;
  margin: 0 0 10px;
  color: #F7F1E6;
  font-family: var(--font-ui);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
}
#quotaLeftSheet #quotaLeftCopy {
  position: relative;
  z-index: 1;
  margin: 0 0 22px;
  color: #C9B896;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;
}
#quotaLeftSheet #quotaLeftN {
  font-weight: 600;
  color: #F7F1E6;
}
#quotaLeftSheet .quota-left-ok {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  margin: 0 0 10px;
  padding: 0 24px;
  border: 0;
  border-radius: 26px;
  background: var(--gradient-cta, linear-gradient(105deg, #D7B46E 0%, #B8914B 52%, #8F6B31 100%));
  color: #F7F1E6;
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(143, 107, 49, 0.26);
}
#quotaLeftSheet .quota-left-cancel {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  margin: 2px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #C9B896;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0;
  cursor: pointer;
}