@charset "UTF-8";
/* =============================================================================
   颜序智颌 · 公益合作邀请函 —— 设计系统 brand.css  V1（2026-11-11）
   维护：web-invite ｜ 复用：index / gift / claim / card / desk / admin
   只放「设计令牌 + 通用组件」，页面专属样式写在页面内联 <style> 或 ops.css。
   约束：无外链（不引 CDN / 在线字体 / 图标库）、移动优先、支持打印与减动效。
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. 设计令牌（契约 §3）
   -------------------------------------------------------------------------- */
:root {
  /* 文字与底色 */
  --ink: #0B1220;
  --navy: #0E1B3D;
  --blue: #002FA7;
  --blue-600: #0A45D6;
  --blue-050: #EDF2FF;
  --gold: #C8A05A;
  --gold-600: #A9823F;
  --gold-050: #F6EEDC;
  --orange: #FF6B1A;
  --orange-600: #E85C0D;
  --paper: #FBF8F1;
  --paper-2: #F3EEE2;
  --white: #FFFFFF;
  --muted: #5B6478;
  --line: #DED7C6;
  --ok: #0F7B4F;
  --warn: #B26B00;
  --err: #B42318;

  /* 圆角与阴影 */
  --r-1: 10px;
  --r-2: 16px;
  --r-3: 22px;
  --sh-1: 0 1px 2px #0b122014;
  --sh-2: 0 10px 30px -12px #0e1b3d40;
  --sh-3: 0 24px 60px -24px #0e1b3d55;

  /* 字体 */
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC",
    "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --serif: "Songti SC", "STSong", "SimSun", "Noto Serif CJK SC", "Source Han Serif SC", serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Courier New", monospace;

  /* 版式 */
  --maxw: 480px;
  --gutter: 16px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* -----------------------------------------------------------------------------
   2. 基础重置与排版
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* 防横向滚动：任何越界元素都不撑宽视口 */
  overflow-x: hidden;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100dvh;
  color: var(--ink);
  /* 底色兜底：整页截图 / 固定层失效时也不会露出白底 */
  background: var(--paper);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
}

/* 纸感底：柔和光斑 + 极细纹理，全部用 CSS 生成（不引图片） */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}
body::before {
  background:
    radial-gradient(120% 70% at 50% -12%, #ffffff 0%, #fdfaf4 38%, var(--paper) 66%, var(--paper-2) 100%),
    var(--paper);
}
body::after {
  z-index: -1;
  opacity: 0.55;
  background-image: radial-gradient(#0e1b3d10 0.6px, transparent 0.6px);
  background-size: 3px 3px;
}

img,
svg,
canvas,
video {
  max-width: 100%;
}

/* canvas 默认可缩放，避免二维码在窄屏撑破卡片 */
canvas {
  display: block;
  height: auto;
}

a {
  color: var(--blue);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
blockquote {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
}

::selection {
  background: #c8a05a55;
  color: var(--navy);
}

/* -----------------------------------------------------------------------------
   3. 布局：外壳 / 顶栏 / 页脚 / 工具类
   -------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 12px var(--gutter) calc(26px + env(safe-area-inset-bottom));
}

.stack > * + * {
  margin-top: 14px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  padding: 4px 2px 12px;
}

.topbar__brand,
.topbar__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--navy);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
}
.topbar__brand:hover,
.topbar__back:hover {
  text-decoration: none;
  color: var(--blue);
}

.brandmark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: var(--gold-600);
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  background: #fffdf8;
}

.topbar__meta {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.foot {
  margin-top: 22px;
  padding: 0 4px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.7;
  text-align: center;
}
.foot__line + .foot__line {
  margin-top: 4px;
}
.foot a {
  color: var(--muted);
  text-decoration: underline;
  text-decoration-color: #5b647844;
  text-underline-offset: 3px;
}

.center {
  text-align: center;
}
.muted {
  color: var(--muted);
}
.small {
  font-size: 12.5px;
  line-height: 1.65;
}
.nowrap {
  white-space: nowrap;
}
.mt-0 {
  margin-top: 0 !important;
}
.mt-2 {
  margin-top: 8px !important;
}
.mt-3 {
  margin-top: 14px !important;
}
.hidden,
[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 跳转到正文（键盘/读屏用户） */
.skip {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 200;
  padding: 10px 14px;
  border-radius: var(--r-1);
  background: var(--navy);
  color: #fff;
  font-size: 13px;
  transition: top 0.18s var(--ease);
}
.skip:focus {
  top: 8px;
}

/* -----------------------------------------------------------------------------
   4. 纸面卡（邀请函 / 核销码卡共用）
   -------------------------------------------------------------------------- */
.paper {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  box-shadow: var(--sh-2);
  overflow: hidden;
}

.paper__inner {
  position: relative;
  padding: 24px 20px;
}

/* 烫金内框 + 四角花 */
.paper--card::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid #c8a05a59;
  border-radius: calc(var(--r-3) - 8px);
  pointer-events: none;
  z-index: 0;
}

.corner {
  position: absolute;
  width: 13px;
  height: 13px;
  border: 1px solid var(--gold);
  opacity: 0.8;
  pointer-events: none;
  z-index: 1;
}
.corner--tl {
  top: 15px;
  left: 15px;
  border-right: 0;
  border-bottom: 0;
}
.corner--tr {
  top: 15px;
  right: 15px;
  border-left: 0;
  border-bottom: 0;
}
.corner--bl {
  bottom: 15px;
  left: 15px;
  border-right: 0;
  border-top: 0;
}
.corner--br {
  bottom: 15px;
  right: 15px;
  border-left: 0;
  border-top: 0;
}

/* 抬高卡片里的正文层，避免被内框压住 */
.paper__inner > * {
  position: relative;
  z-index: 1;
}

/* -----------------------------------------------------------------------------
   5. 文字与装饰：小标 / 主标题 / 金色分隔
   -------------------------------------------------------------------------- */
.eyebrow {
  color: var(--gold-600);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  line-height: 1.4;
}

.serif {
  font-family: var(--serif);
}

.orn {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 14px 0;
  color: var(--gold);
}
.orn::before,
.orn::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.65;
}
.orn i {
  width: 5px;
  height: 5px;
  background: var(--gold);
  transform: rotate(45deg);
  flex: none;
}
.orn--tight {
  margin: 10px 0;
}

.hero {
  padding: 2px 2px 4px;
}
.hero__title {
  margin: 6px 0 7px;
  font-family: var(--serif);
  font-size: clamp(23px, 7vw, 29px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: var(--navy);
}
.hero__desc {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.65;
}

/* -----------------------------------------------------------------------------
   6. 封套（启封前）
   -------------------------------------------------------------------------- */
.env {
  position: relative;
}

.env__paper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: min(74dvh, 540px);
  padding: 30px 22px 34px;
  text-align: center;
  background:
    linear-gradient(180deg, #fffdf8 0%, var(--paper) 58%, #f4efe3 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  box-shadow: var(--sh-3);
  overflow: hidden;
}

/* 信封盖：三角形，下沿一道金线 */
.env__flap {
  position: absolute;
  inset: 0 0 auto;
  height: 44%;
  background: linear-gradient(180deg, #ffffff 0%, #f7f2e6 100%);
  border-bottom: 1px solid #e3dcc9;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  pointer-events: none;
}

.env__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.env__brand {
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  color: var(--navy);
  line-height: 1.3;
}

.env__sub {
  color: var(--gold-600);
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
}

.env__to {
  color: var(--muted);
  font-size: 12.5px;
  letter-spacing: 0.06em;
}

.env__hint {
  color: var(--muted);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  opacity: 0.85;
}

/* 火漆印章按钮 */
.wax {
  position: relative;
  display: grid;
  place-items: center;
  width: 128px;
  height: 128px;
  margin: 6px 0 2px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 26%, #e9cd93 0%, var(--gold) 42%, #ab8342 74%, #8c672b 100%);
  color: #fffaf0;
  font-family: var(--serif);
  cursor: pointer;
  box-shadow:
    0 14px 28px -14px #a9823f cc,
    inset 0 1px 0 #ffffff70,
    inset 0 -8px 16px #6f512233;
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease);
}
.wax::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px dashed #fff6e09e;
  border-radius: 50%;
}
.wax:hover {
  transform: translateY(-2px) rotate(-1.5deg);
}
.wax:active {
  transform: scale(0.97);
}
.wax__txt {
  display: block;
  font-size: 17px;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  line-height: 1.4;
}
.wax__sub {
  display: block;
  margin-top: 2px;
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  opacity: 0.86;
}

/* 启封动效 */
.env.is-opening {
  animation: envUp 0.56s var(--ease) forwards;
}
@keyframes envUp {
  to {
    opacity: 0;
    transform: translateY(-26px) scale(0.965);
    filter: blur(2px);
  }
}

.reveal {
  animation: cardIn 0.6s var(--ease) both;
}
@keyframes cardIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.988);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* -----------------------------------------------------------------------------
   7. 邀请函卡面
   -------------------------------------------------------------------------- */
.invite__head {
  text-align: center;
}

.invite__title {
  margin: 9px 0 8px;
  font-family: var(--serif);
  font-size: clamp(29px, 9vw, 37px);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: 0.09em;
  text-indent: 0.09em;
  color: var(--navy);
}

.invite__sub {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.6;
  letter-spacing: 0.03em;
}

.invite__to {
  margin: 2px 0 10px;
  color: var(--navy);
  font-family: var(--serif);
  font-size: 16px;
  letter-spacing: 0.05em;
}
.invite__to strong {
  font-weight: 700;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 1px;
}

.invite__body {
  color: #2a3346;
  font-size: 13.5px;
  line-height: 1.9;
  letter-spacing: 0.015em;
  text-align: justify;
}
.invite__body + .invite__body {
  margin-top: 9px;
}

/* 权益主视觉 */
.giftbox {
  margin: 16px 0 12px;
  padding: 16px 14px;
  text-align: center;
  background: linear-gradient(180deg, #fffdf7, var(--gold-050));
  border: 1px solid #e2d3ac;
  border-radius: var(--r-2);
}
.giftbox__title {
  margin: 6px 0 6px;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--navy);
  line-height: 1.35;
}
.giftbox__sub {
  color: #5a4a2c;
  font-size: 12px;
  line-height: 1.65;
}
.giftbox__dur {
  display: inline-block;
  margin-top: 9px;
  padding: 3px 10px;
  border: 1px solid #c8a05a66;
  border-radius: 999px;
  color: var(--gold-600);
  font-size: 11px;
  letter-spacing: 0.06em;
}

/* 权益清单 */
.benefits {
  margin: 14px 0 4px;
}
.benefit {
  display: flex;
  gap: 10px;
  padding: 11px 0;
  border-top: 1px dashed #ded7c6;
}
.benefit:first-child {
  border-top: 0;
  padding-top: 4px;
}
.benefit__idx {
  flex: none;
  width: 22px;
  color: var(--gold-600);
  font-family: var(--serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding-top: 2px;
}
.benefit__body {
  min-width: 0;
}
.benefit__title {
  display: block;
  color: var(--navy);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.5;
}
.benefit__desc {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
}

.pill {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border: 1px solid #ded7c6;
  border-radius: 999px;
  background: #fffdf8;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  vertical-align: 1px;
}

/* 关键信息（有效期等） */
.metas {
  margin: 14px 0 4px;
  padding: 10px 12px;
  border: 1px solid #e6dfcf;
  border-radius: var(--r-1);
  background: #fffdf8cc;
}
.meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
  font-size: 12.5px;
}
.meta + .meta {
  border-top: 1px dotted #ded7c6;
}
.meta__k {
  flex: none;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.meta__v {
  color: var(--navy);
  font-weight: 600;
  text-align: right;
}

/* 门店折叠面板 */
.stores {
  margin-top: 14px;
  border: 1px solid #e6dfcf;
  border-radius: var(--r-2);
  background: #fffdf8;
  overflow: hidden;
}
.stores__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 48px;
  padding: 10px 13px;
  color: var(--navy);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.stores__head::-webkit-details-marker {
  display: none;
}
.stores__head::after {
  content: "";
  width: 8px;
  height: 8px;
  flex: none;
  border-right: 1.5px solid var(--gold-600);
  border-bottom: 1.5px solid var(--gold-600);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.24s var(--ease);
}
.stores[open] .stores__head::after {
  transform: rotate(225deg) translate(-2px, -2px);
}
.stores__body {
  padding: 0 13px 12px;
}
.store {
  padding: 10px 0;
  border-top: 1px dashed #e2dbc9;
}
.store__name {
  color: var(--navy);
  font-size: 13px;
  font-weight: 700;
}
.store__line {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}
.store__tel {
  color: var(--blue);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

/* 落款 + 圆章 */
.invite__foot {
  position: relative;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #e2dbc9;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.sign__name {
  color: var(--navy);
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.5;
}
.sign__sub {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.08em;
}
.sign__date {
  margin-top: 2px;
  color: var(--gold-600);
  font-family: var(--serif);
  font-size: 11.5px;
  letter-spacing: 0.14em;
}

.seal {
  width: 74px;
  height: 74px;
  flex: none;
  color: var(--gold);
  opacity: 0.82;
  transform: rotate(-8deg);
}
.seal text {
  fill: currentColor;
  font-family: var(--serif);
  font-size: 8.6px;
  letter-spacing: 1.2px;
}
.seal .seal-mid {
  font-size: 19px;
  letter-spacing: 2px;
  font-weight: 700;
}
.seal .seal-sub {
  font-size: 7.4px;
  letter-spacing: 2.4px;
}

/* 已领取 / 提示条 */
.banner {
  display: flex;
  gap: 9px;
  padding: 11px 12px;
  border-radius: var(--r-1);
  border: 1px solid #e6dfcf;
  background: #fffdf8;
  font-size: 12.5px;
  line-height: 1.6;
}
.banner svg {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 2px;
}
.banner__body {
  min-width: 0;
}
.banner__title {
  display: block;
  font-weight: 700;
  color: var(--navy);
}
.banner__desc {
  display: block;
  margin-top: 2px;
  color: var(--muted);
}
.banner--warn {
  border-color: #ecd9ae;
  background: #fff9ec;
  color: var(--warn);
}
.banner--warn svg {
  color: var(--warn);
}
.banner--info {
  border-color: #c9d6fb;
  background: var(--blue-050);
  color: var(--blue);
}
.banner--err {
  border-color: #f2c9c4;
  background: #fff6f5;
  color: var(--err);
}
.banner--ok {
  border-color: #bfe2d1;
  background: #f2fbf6;
  color: var(--ok);
}

.chain {
  color: var(--gold-600);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-align: center;
}
.chain strong {
  font-weight: 700;
  font-size: 12.5px;
}

/* -----------------------------------------------------------------------------
   8. 按钮（可点区域 ≥ 44px）
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: transform 0.16s var(--ease), box-shadow 0.2s var(--ease),
    background-color 0.2s var(--ease), border-color 0.2s var(--ease), opacity 0.2s;
}
.btn:hover {
  text-decoration: none;
}
.btn:active {
  transform: translateY(1px) scale(0.995);
}
.btn svg {
  width: 18px;
  height: 18px;
  flex: none;
}
.btn[disabled],
.btn.is-busy {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn--primary {
  background: linear-gradient(180deg, var(--orange) 0%, var(--orange-600) 100%);
  color: #fff;
  box-shadow: 0 12px 24px -14px #ff6b1acc, inset 0 1px 0 #ffffff40;
}
.btn--blue {
  background: linear-gradient(180deg, var(--blue-600) 0%, var(--blue) 100%);
  color: #fff;
  box-shadow: 0 12px 24px -14px #002fa7cc, inset 0 1px 0 #ffffff30;
}
.btn--ghost {
  background: #ffffffd9;
  border-color: var(--line);
  color: var(--navy);
  box-shadow: var(--sh-1);
}
.btn--quiet {
  background: transparent;
  border-color: #002fa733;
  color: var(--blue);
}
.btn--gold {
  background: linear-gradient(180deg, #d9b671, var(--gold));
  color: #3b2a10;
  box-shadow: 0 12px 24px -14px #a9823fcc, inset 0 1px 0 #ffffff55;
}
.btn--danger {
  background: #fff6f5;
  border-color: #f2c9c4;
  color: var(--err);
}
.btn--sm {
  min-height: 44px;
  padding: 0 13px;
  font-size: 13px;
}
.btn--block {
  display: flex;
  width: 100%;
}
.btn--wrap {
  white-space: normal;
  line-height: 1.35;
  padding-top: 9px;
  padding-bottom: 9px;
}

.btn-grid {
  display: grid;
  gap: 9px;
}
.btn-grid--2 {
  grid-template-columns: 1fr 1fr;
}
.btn-row {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}
.btn-row > .btn {
  flex: 1 1 auto;
}

.linkbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 16px;
  margin-top: 12px;
  font-size: 12.5px;
}
.linkbar .link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 44px;
  padding: 0 2px;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  text-decoration: underline;
  text-decoration-color: #5b647855;
  text-underline-offset: 3px;
  cursor: pointer;
}
.linkbar .link:hover {
  color: var(--blue);
}
.linkbar svg {
  width: 14px;
  height: 14px;
}

/* 操作区（卡片下方，不进打印） */
.actionbar {
  margin-top: 14px;
}
.actionbar__tip {
  margin-top: 9px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.6;
  text-align: center;
}

/* -----------------------------------------------------------------------------
   9. 表单
   -------------------------------------------------------------------------- */
.form-card {
  padding: 20px 18px 18px;
}

.form__intro {
  margin-bottom: 16px;
}

.field {
  margin-bottom: 15px;
}
.field:last-child {
  margin-bottom: 4px;
}

.label {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-bottom: 7px;
  color: var(--navy);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.req {
  color: var(--orange);
  font-size: 12px;
  line-height: 1;
}
.label__opt {
  margin-left: auto;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}

.input,
.select,
.textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  background: #fff;
  color: var(--ink);
  /* iOS Safari 小于 16px 会在聚焦时自动放大页面 */
  font-family: inherit;
  font-size: 16px;
  line-height: 1.4;
  box-shadow: inset 0 1px 1px #0b12200a;
  transition: border-color 0.18s, box-shadow 0.18s, background-color 0.18s;
  -webkit-appearance: none;
  appearance: none;
}
.input::placeholder,
.textarea::placeholder {
  color: #9aa1b1;
  font-size: 14px;
}
.textarea {
  min-height: 84px;
  resize: vertical;
  line-height: 1.6;
}
.select {
  padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, #6b7280 50%),
    linear-gradient(135deg, #6b7280 50%, transparent 50%);
  background-position: calc(100% - 17px) calc(50% + 1px), calc(100% - 12px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--blue-600);
  box-shadow: 0 0 0 3px #0a45d61f;
}
.field.is-error .input,
.field.is-error .select,
.field.is-error .textarea {
  border-color: var(--err);
  background: #fff8f7;
}
.field.is-error .input:focus,
.field.is-error .select:focus,
.field.is-error .textarea:focus {
  box-shadow: 0 0 0 3px #b423181f;
}

.hint {
  margin-top: 6px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.55;
}
.err {
  display: none;
  align-items: flex-start;
  gap: 4px;
  margin-top: 6px;
  color: var(--err);
  font-size: 12px;
  line-height: 1.5;
}
.err svg {
  width: 13px;
  height: 13px;
  flex: none;
  margin-top: 2px;
}
.field.is-error .err {
  display: flex;
}

.counter {
  float: right;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.counter.is-over {
  color: var(--err);
  font-weight: 700;
}

/* 身份 / 门店单选卡 */
.choices {
  display: grid;
  gap: 8px;
}
.choice {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-height: 48px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  background: #fff;
  cursor: pointer;
  transition: border-color 0.18s, box-shadow 0.18s, background-color 0.18s;
}
.choice:hover {
  border-color: #c9c1ad;
}
.choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.choice__dot {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border: 1.5px solid #bdb6a6;
  border-radius: 50%;
  background: #fff;
  transition: border-color 0.18s;
}
.choice__dot::after {
  content: "";
  position: absolute;
  inset: 3.5px;
  border-radius: 50%;
  background: var(--blue);
  transform: scale(0);
  transition: transform 0.18s var(--ease);
}
.choice__body {
  min-width: 0;
  flex: 1;
}
.choice__title {
  display: block;
  color: var(--navy);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.45;
}
.choice__desc {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.55;
}
.choice__tag {
  flex: none;
  align-self: center;
  color: var(--gold-600);
  font-size: 11px;
  white-space: nowrap;
}
.choice.is-checked,
.choice:has(input:checked) {
  border-color: var(--blue);
  background: var(--blue-050);
  box-shadow: 0 0 0 3px #002fa70f;
}
.choice.is-checked .choice__dot,
.choice:has(input:checked) .choice__dot {
  border-color: var(--blue);
}
.choice.is-checked .choice__dot::after,
.choice:has(input:checked) .choice__dot::after {
  transform: scale(1);
}
.choice.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.field.is-error .choice {
  border-color: #f2c9c4;
}

/* 勾选 */
.check {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  background: #fff;
  font-size: 12.5px;
  line-height: 1.6;
  color: #2a3346;
  cursor: pointer;
}
.check input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.check__box {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border: 1.5px solid #bdb6a6;
  border-radius: 5px;
  background: #fff;
  transition: background-color 0.16s, border-color 0.16s;
}
.check__box::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1.5px;
  width: 5px;
  height: 9px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(42deg) scale(0);
  transition: transform 0.16s var(--ease);
}
.check.is-checked,
.check:has(input:checked) {
  border-color: var(--blue);
  background: var(--blue-050);
}
.check.is-checked .check__box,
.check:has(input:checked) .check__box {
  background: var(--blue);
  border-color: var(--blue);
}
.check.is-checked .check__box::after,
.check:has(input:checked) .check__box::after {
  transform: rotate(42deg) scale(1);
}
.field.is-error .check {
  border-color: #f2c9c4;
}
.check__text strong {
  color: var(--navy);
}

.form__foot {
  margin-top: 16px;
}
.form__note {
  margin-top: 10px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.6;
  text-align: center;
}

/* -----------------------------------------------------------------------------
   10. 数据与结果：链接盒 / 分享指引 / 核销码 / 二维码
   -------------------------------------------------------------------------- */
.linkbox {
  display: flex;
  gap: 7px;
  align-items: stretch;
}
.linkbox .input {
  min-width: 0;
  flex: 1;
  /* 只读链接框同样是 input：iOS 聚焦不会缩放，统一 16px */
  font-size: 16px;
  color: var(--navy);
  background: #fffdf8;
  font-family: var(--mono);
}
.linkbox .btn {
  flex: none;
  min-width: 92px;
  padding: 0 13px;
  font-size: 13px;
}

.share__steps {
  margin-top: 10px;
  display: grid;
  gap: 8px;
}
.step {
  display: flex;
  gap: 9px;
  font-size: 12.5px;
  line-height: 1.6;
  color: #2a3346;
}
.step__no {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--blue-050);
  color: var(--blue);
  font-size: 11px;
  font-weight: 700;
}

.qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 16px 12px 12px;
  border: 1px dashed #d9cfb6;
  border-radius: var(--r-2);
  background: #fffdf8;
}
.qr__frame {
  position: relative;
  width: min(210px, 62vw);
  padding: 9px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 18px -12px #0e1b3d66;
}
.qr__frame::before {
  content: "";
  position: absolute;
  inset: -4px;
  border: 1px solid #c8a05a4d;
  border-radius: 15px;
  pointer-events: none;
}
.qr canvas,
.qr img {
  width: 100% !important;
  height: auto !important;
  display: block;
  border-radius: 3px;
}
.qr__tip {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.55;
  text-align: center;
}
.qr__brand {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--gold-600);
  font-size: 10.5px;
  letter-spacing: 0.2em;
}

/* 核销码大字 */
.codecard {
  margin: 2px 0 0;
  padding: 16px 12px 14px;
  border: 1px solid #e2d3ac;
  border-radius: var(--r-2);
  background: linear-gradient(180deg, #fffdf7, #f8f2e3);
  text-align: center;
}
.code-big {
  display: block;
  width: 100%;
  color: var(--navy);
  font-family: var(--mono);
  font-size: 26px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
.code-hint {
  margin-top: 6px;
  color: var(--gold-600);
  font-size: 11px;
  letter-spacing: 0.16em;
}

.info-grid {
  display: grid;
  gap: 0;
}
.info {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px dotted #ded7c6;
  font-size: 12.5px;
  line-height: 1.65;
}
.info:first-child {
  border-top: 0;
}
.info__k {
  flex: none;
  width: 84px;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.info__v {
  flex: 1;
  min-width: 0;
  color: var(--navy);
  font-weight: 600;
  text-align: right;
  word-break: break-word;
}
.info__v a {
  color: var(--blue);
  font-weight: 700;
}

.notices {
  margin-top: 4px;
}
.notice-item {
  display: flex;
  gap: 8px;
  padding: 7px 0;
  color: #3a4356;
  font-size: 12px;
  line-height: 1.7;
}
.notice-item__no {
  flex: none;
  color: var(--gold-600);
  font-family: var(--serif);
  font-weight: 700;
  font-size: 11.5px;
  padding-top: 1px;
}

/* 状态徽章 */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid #ded7c6;
  background: #fffdf8;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.badge--ok {
  border-color: #bfe2d1;
  background: #f2fbf6;
  color: var(--ok);
}
.badge--warn {
  border-color: #ecd9ae;
  background: #fff9ec;
  color: var(--warn);
}
.badge--err {
  border-color: #f2c9c4;
  background: #fff6f5;
  color: var(--err);
}
.badge--blue {
  border-color: #c9d6fb;
  background: var(--blue-050);
  color: var(--blue);
}

/* 已核销水印 */
.ticket {
  position: relative;
}
.wm-used {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  pointer-events: none;
  overflow: hidden;
}
.wm-used span {
  padding: 6px 16px;
  border: 5px double #b42318;
  border-radius: 12px;
  color: #b42318;
  font-family: var(--serif);
  font-size: clamp(30px, 11vw, 46px);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  opacity: 0.24;
  transform: rotate(-15deg);
  white-space: nowrap;
  mix-blend-mode: multiply;
}

/* -----------------------------------------------------------------------------
   11. 状态：骨架屏 / 空态 / 错误态 / 加载中
   -------------------------------------------------------------------------- */
.sk {
  position: relative;
  overflow: hidden;
  border-radius: 7px;
  background: #ece5d6;
  background-image: linear-gradient(90deg, #ece5d6 0%, #f8f3e7 45%, #ece5d6 90%);
  background-size: 220% 100%;
  animation: skShimmer 1.5s linear infinite;
}
.sk--line {
  height: 11px;
  margin: 10px 0;
}
.sk--line:first-child {
  margin-top: 0;
}
.sk--title {
  height: 26px;
  margin: 14px auto;
  width: 70%;
}
.sk--block {
  height: 120px;
  margin: 12px 0;
}
.sk--pill {
  height: 30px;
  width: 120px;
  margin: 14px auto;
  border-radius: 999px;
}
@keyframes skShimmer {
  from {
    background-position: 120% 0;
  }
  to {
    background-position: -20% 0;
  }
}

.state {
  padding: 30px 20px 26px;
  text-align: center;
}
.state__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--blue-050);
  color: var(--blue);
}
.state__icon svg {
  width: 26px;
  height: 26px;
}
.state__icon--warn {
  background: #fff9ec;
  color: var(--warn);
}
.state__icon--err {
  background: #fff6f5;
  color: var(--err);
}
.state__title {
  margin-bottom: 7px;
  color: var(--navy);
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
}
.state__desc {
  margin: 0 auto;
  max-width: 32em;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.75;
}
.state__actions {
  display: grid;
  gap: 9px;
  max-width: 300px;
  margin: 18px auto 0;
}
.state__code {
  display: inline-block;
  margin-top: 10px;
  padding: 2px 8px;
  border-radius: 6px;
  background: #f3eee2;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
}

.spin {
  display: inline-block;
  width: 15px;
  height: 15px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: -2px;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.toast-host {
  position: fixed;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(92vw, 420px);
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #0e1b3df2;
  color: #fff;
  font-size: 13.5px;
  line-height: 1.5;
  box-shadow: var(--sh-3);
  animation: toastIn 0.26s var(--ease);
  pointer-events: auto;
  word-break: break-word;
}
.toast svg {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 1px;
  opacity: 0.95;
}
.toast--ok {
  background: #0f7b4ff2;
}
.toast--err {
  background: #b42318f2;
}
.toast--warn {
  background: #b26b00f2;
}
.toast--info {
  background: #0e1b3df2;
}
.toast.is-out {
  animation: toastOut 0.22s var(--ease) forwards;
}
@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes toastOut {
  to {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* -----------------------------------------------------------------------------
   12. 可访问性：焦点环 / 减动效 / 高对比
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--blue-600);
  outline-offset: 2px;
  border-radius: 4px;
}
.paper :focus-visible,
.wax:focus-visible {
  outline-color: var(--gold-600);
}
/* 隐藏原生 radio/checkbox 后，用包裹元素给出焦点环 */
.choice:focus-within,
.check:focus-within {
  outline: 2px solid var(--blue-600);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .env.is-opening {
    opacity: 0;
  }
  .reveal {
    animation: none;
  }
}

@media (prefers-contrast: more) {
  .benefit__desc,
  .hint,
  .small,
  .muted {
    color: #333c4e;
  }
}

/* -----------------------------------------------------------------------------
   13. 响应式：窄屏收紧，桌面居中不拉伸
   -------------------------------------------------------------------------- */
@media (max-width: 359px) {
  :root {
    --gutter: 12px;
  }
  .paper__inner {
    padding: 20px 15px;
  }
  .benefit__idx {
    width: 18px;
  }
}

@media (min-width: 600px) {
  body {
    font-size: 15.5px;
  }
  .shell {
    padding-top: 26px;
    padding-bottom: calc(44px + env(safe-area-inset-bottom));
  }
  .paper__inner {
    padding: 30px 26px;
  }
  .env__paper {
    padding: 38px 30px 42px;
  }
  .code-big {
    font-size: 32px;
    letter-spacing: 0.12em;
  }
}

@media (min-width: 1024px) {
  .shell {
    padding-top: 40px;
  }
  body::before {
    background:
      radial-gradient(70% 50% at 50% 0%, #ffffff 0%, #fbf8f1 40%, #efe9dc 100%),
      var(--paper);
  }
}

/* -----------------------------------------------------------------------------
   13.5 V2：官方 Logo / 组合三选一 / 小程序入口 / 门店照片 / 弹窗 / 门户
   -------------------------------------------------------------------------- */
.logo {
  display: block;
  height: auto;
}
.logo--h {
  width: 156px;
  max-width: 62%;
}
.logo--v {
  width: 112px;
}
.topbar__logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.topbar__logo img {
  display: block;
  width: 142px;
  height: auto;
}
@media (max-width: 359px) {
  .topbar__logo img {
    width: 120px;
  }
}

/* 信封/卡面/门户上的品牌行 */
.brandline {
  display: flex;
  align-items: center;
  gap: 10px;
}
.brandline img {
  width: 150px;
  height: auto;
}
.brandline__meta {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.14em;
}

/* 邀请函抬头官方 Logo（竖版） */
.invite__logo {
  display: block;
  width: 104px;
  margin: 0 auto 10px;
  opacity: 0.95;
}

/* 组合权益：三项任选其一 */
.combo {
  margin: 14px 0 8px;
  padding: 13px 14px 10px;
  border: 1px solid #e2d3ac;
  border-radius: var(--r-2);
  background: linear-gradient(180deg, #fffdf7, var(--gold-050));
}
.combo__head {
  text-align: center;
}
.combo__title {
  margin: 5px 0 0;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: var(--navy);
}
.combo__label {
  display: inline-block;
  margin-top: 7px;
  padding: 2px 10px;
  border: 1px solid #c8a05a66;
  border-radius: 999px;
  color: var(--gold-600);
  font-size: 11px;
  letter-spacing: 0.08em;
}
.combo__list {
  margin-top: 8px;
}
.combo__item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 8px 0;
  border-top: 1px dashed #ded7c6;
}
.combo__list > .combo__item:first-child {
  border-top: 0;
}
.combo__idx {
  flex: none;
  width: 20px;
  padding-top: 1px;
  color: var(--gold-600);
  font-family: var(--serif);
  font-size: 12px;
  font-weight: 700;
}
.combo__body {
  flex: 1;
  min-width: 0;
}
.combo__name {
  display: block;
  color: var(--navy);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.5;
}
.combo__more {
  flex: none;
  align-self: center;
  /* 视觉仍是小字链接，但点击热区必须 ≥44px（契约 §9）：
     inline-flex + min-height 撑热区，负 margin 抵消多出的行高，外部留白不变 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: -4px 0;
  padding: 0 6px;
  border: 0;
  background: none;
  color: var(--blue);
  font: inherit;
  font-size: 11.5px;
  text-decoration: underline;
  text-decoration-color: #002fa755;
  text-underline-offset: 3px;
  cursor: pointer;
}
.combo__note {
  margin-top: 7px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.6;
  text-align: center;
}

/* 仅限本人使用 */
.onlyme {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #c9d6fb;
  border-radius: var(--r-1);
  background: var(--blue-050);
  color: #1b3a8f;
  font-size: 12px;
  line-height: 1.6;
}
.onlyme svg {
  width: 15px;
  height: 15px;
  flex: none;
  margin-top: 2px;
  color: var(--blue);
}
.onlyme strong {
  color: var(--navy);
}

/* ---------------------------------------------------------------------------
   V3：本卡包含三项（每项带核销状态）/ 剩余项 / 电话预约
   ------------------------------------------------------------------------ */
.usage {
  margin: 14px 0 8px;
  padding: 13px 14px 10px;
  border: 1px solid #e2d3ac;
  border-radius: var(--r-2);
  background: linear-gradient(180deg, #fffdf7, var(--gold-050));
}
.usage__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  text-align: center;
}
.usage__head .eyebrow {
  flex: none;
}
.usage__badge {
  flex: none;
  padding: 2px 9px;
  border: 1px solid #c8a05a66;
  border-radius: 999px;
  background: #fff;
  color: var(--gold-600);
  font-size: 11px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.usage__title {
  margin: 6px 0 0;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--navy);
  text-align: center;
}
.usage__list {
  margin-top: 9px;
}
.usage__item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 0;
  border-top: 1px dashed #ded7c6;
}
.usage__item:first-child {
  border-top: 0;
  padding-top: 4px;
}
.usage__idx {
  flex: none;
  width: 20px;
  padding-top: 1px;
  color: var(--gold-600);
  font-family: var(--serif);
  font-size: 12px;
  font-weight: 700;
}
.usage__body {
  flex: 1;
  min-width: 0;
}
.usage__name {
  display: block;
  color: var(--navy);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.5;
}
.usage__dur {
  display: inline-block;
  margin-top: 3px;
  padding: 1px 7px;
  border: 1px solid #ded7c6;
  border-radius: 999px;
  background: #fffdf8;
  color: var(--muted);
  font-size: 10.5px;
  white-space: nowrap;
}
.usage__meta {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.5;
}
.usage__state {
  flex: none;
  align-self: center;
  padding: 2px 8px;
  border: 1px solid #ded7c6;
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}
.usage__state--used {
  border-color: #ecd9ae;
  background: #fff9ec;
  color: var(--warn);
}
.usage__state--done {
  border-color: #bfe2d1;
  background: #f2fbf6;
  color: var(--ok);
}
.usage__note {
  margin-top: 8px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.6;
  text-align: center;
}
.usage__remaining {
  display: block;
  margin-top: 9px;
  padding: 8px 10px;
  border: 1px solid #e6dfcf;
  border-radius: var(--r-1);
  background: #fff;
  color: var(--navy);
  font-size: 12.5px;
  font-weight: 700;
  text-align: center;
}
.usage__remaining em {
  display: block;
  margin-top: 2px;
  font-style: normal;
  color: var(--muted);
  font-weight: 500;
  font-size: 11.5px;
  line-height: 1.5;
}

/* 剩余项小条（核销码卡用） */
.remain {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid #e6dfcf;
  border-radius: var(--r-1);
  background: #fffdf8;
  color: var(--navy);
  font-size: 12.5px;
  font-weight: 700;
  text-align: center;
}
.remain em {
  font-style: normal;
  color: var(--muted);
  font-weight: 500;
  font-size: 11.5px;
}

/* 电话预约条：小屏时按钮整行落下，热区 ≥44px */
.reserve {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 4px 10px;
  padding: 12px 13px;
  border: 1px solid #c9d6fb;
  border-radius: var(--r-2);
  background: var(--blue-050);
}
.reserve__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  color: var(--blue);
}
.reserve__icon svg {
  width: 17px;
  height: 17px;
}
.reserve__body {
  min-width: 0;
}
.reserve__t {
  display: block;
  color: var(--navy);
  font-size: 12.5px;
  font-weight: 700;
}
.reserve__d {
  display: block;
  margin-top: 1px;
  color: #3f4b63;
  font-size: 11.5px;
  line-height: 1.55;
}
.reserve__tel {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  margin-top: 8px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.reserve__tel:hover {
  text-decoration: none;
  background: var(--blue-600);
}
.reserve__tel svg {
  width: 15px;
  height: 15px;
}

/* 已完成水印（与「已核销」共用结构，颜色换成绿色） */
.wm-used--done span {
  border-color: var(--ok);
  color: var(--ok);
}

/* 门店卡（V3：名 → 地址 → 导航 → 电话；照片区整块不渲染） */
.store-card {
  margin: 14px 0 4px;
  padding: 13px 14px 12px;
  border: 1px solid #e6dfcf;
  border-radius: var(--r-2);
  background: #fffdf8;
}
.store-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.store-card__name {
  color: var(--navy);
  font-size: 14px;
  font-weight: 700;
}
.store-card__addr {
  margin-top: 6px;
  color: #2a3346;
  font-size: 12.5px;
  line-height: 1.7;
  word-break: break-word;
}
.store-card__meta {
  margin-top: 5px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.6;
}
/* 门店卡醒目提示：去之前先电话预约，避免跑空 */
.store-hint {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 9px;
  padding: 8px 10px;
  border: 1px solid #ecd9ae;
  border-radius: var(--r-1);
  background: #fff9ec;
  color: var(--warn);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.55;
}
.store-hint svg {
  width: 14px;
  height: 14px;
  flex: none;
  margin-top: 2px;
}
.store-card__btns {
  display: grid;
  gap: 8px;
  margin-top: 11px;
}
.store-card__btns .btn {
  width: 100%;
}

/* 小程序入口（不可用时不跳转，只弹提示） */
.mini {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: #fffdf8;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.mini:hover {
  border-color: #c9c1ad;
}
.mini svg {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--blue);
}
.mini__body {
  flex: 1;
  min-width: 0;
}
.mini__title {
  display: block;
  color: var(--navy);
  font-size: 13px;
  font-weight: 700;
}
.mini__tip {
  display: block;
  margin-top: 1px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}
.mini__state {
  flex: none;
  padding: 2px 7px;
  border: 1px solid #ecd9ae;
  border-radius: 999px;
  background: #fff9ec;
  color: var(--warn);
  font-size: 10px;
  white-space: nowrap;
}
.mini__state--on {
  border-color: #bfe2d1;
  background: #f2fbf6;
  color: var(--ok);
}

/* 门店照片 / 环境示意占位 */
.store-photo {
  margin: 10px 0 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  overflow: hidden;
  background: #fff;
}
.store-photo img {
  display: block;
  width: 100%;
  height: auto;
  /* 实拍图 3:2 容器，cover 裁切，避免把卡片撑太高 */
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.store-photo figcaption {
  padding: 7px 10px;
  border-top: 1px solid #f0ebdf;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

/* 门店信息行（核销码卡 / 门户 / 家长说明共用） */
.store-mini__line {
  display: flex;
  gap: 7px;
  color: #2a3346;
  font-size: 12px;
  line-height: 1.7;
}
.store-mini__k {
  flex: none;
  width: 52px;
  color: var(--muted);
}
.store-mini__v {
  flex: 1;
  min-width: 0;
}
.store-mini__tel {
  color: var(--blue);
  font-weight: 700;
  text-decoration: none;
}

/* 空值标签：待配置 */
.tbd {
  color: var(--muted);
}
.tbd-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border: 1px solid #e6dfcf;
  border-radius: 999px;
  background: #f8f3e7;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.02em;
  vertical-align: 1px;
}

/* 核销码卡：我选的那一项 */
.picked {
  margin: 12px 0 0;
  padding: 12px 14px;
  border: 1px solid #e2d3ac;
  border-radius: var(--r-2);
  background: linear-gradient(180deg, #fffdf7, #f8f2e3);
  text-align: center;
}
.picked__k {
  display: block;
  color: var(--gold-600);
  font-size: 10px;
  letter-spacing: 0.22em;
}
.picked__v {
  display: block;
  margin-top: 4px;
  color: var(--navy);
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.picked__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 同上：热区 44px，负 margin 让视觉位置几乎不动 */
  min-height: 44px;
  margin: -6px 0 -8px;
  padding: 0 10px;
  border: 0;
  background: none;
  color: var(--blue);
  font: inherit;
  font-size: 11.5px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* 领取页：三选一单选卡 */
.picks {
  display: grid;
  gap: 8px;
}
.pick {
  position: relative;
  display: flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  background: #fff;
  transition: border-color 0.18s, box-shadow 0.18s, background-color 0.18s;
}
.pick:hover {
  border-color: #c9c1ad;
}
.pick input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.pick__main {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding: 10px 12px;
  cursor: pointer;
}
.pick__dot {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid #bdb6a6;
  border-radius: 50%;
  background: #fff;
  transition: border-color 0.18s;
}
.pick__dot::after {
  content: "";
  position: absolute;
  inset: 3.5px;
  border-radius: 50%;
  background: var(--blue);
  transform: scale(0);
  transition: transform 0.18s var(--ease);
}
.pick__title {
  color: var(--navy);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.45;
}
.pick__desc {
  display: block;
  margin-top: 1px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.5;
}
.pick__more {
  flex: none;
  align-self: center;
  min-height: 44px;
  margin-right: 6px;
  padding: 0 8px;
  border: 0;
  background: none;
  color: var(--blue);
  font: inherit;
  font-size: 11.5px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.pick.is-checked {
  border-color: var(--blue);
  background: var(--blue-050);
  box-shadow: 0 0 0 3px #002fa70f;
}
.pick.is-checked .pick__dot {
  border-color: var(--blue);
}
.pick.is-checked .pick__dot::after {
  transform: scale(1);
}
.field.is-error .pick {
  border-color: #f2c9c4;
}

/* 门户 */
.hero-portal {
  padding: 4px 0 2px;
  text-align: center;
}
.hero-portal__logo {
  display: block;
  width: 132px;
  margin: 0 auto 14px;
}
.portal-grid {
  display: grid;
  gap: 10px;
}
@media (min-width: 600px) {
  .portal-grid--2 {
    grid-template-columns: 1fr 1fr;
  }
}
.portal-card {
  display: block;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: #fffdf8;
  color: inherit;
  text-decoration: none;
}
.portal-card:hover {
  border-color: var(--gold);
  text-decoration: none;
}
.portal-card__t {
  display: block;
  color: var(--navy);
  font-size: 14px;
  font-weight: 700;
}
.portal-card__d {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}
.flow {
  display: grid;
  gap: 11px;
}
.flow__item {
  display: flex;
  gap: 11px;
}
.flow__no {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--blue-050);
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
}
.flow__t {
  display: block;
  color: var(--navy);
  font-size: 13.5px;
  font-weight: 700;
}
.flow__d {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
}

/* 家长说明（长文） */
.article h2 {
  margin: 18px 0 8px;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--navy);
}
.article h3 {
  margin: 14px 0 5px;
  font-size: 14px;
  color: var(--navy);
}
.article p {
  color: #2a3346;
  font-size: 13.5px;
  line-height: 1.85;
  text-align: justify;
}
.article p + p {
  margin-top: 9px;
}
.article ul {
  margin: 6px 0 0;
  padding-left: 18px;
  list-style: disc;
  color: #2a3346;
  font-size: 13px;
  line-height: 1.8;
}
.article li + li {
  margin-top: 3px;
}
.article .quote {
  margin: 12px 0;
  padding: 11px 13px;
  border-left: 3px solid var(--gold);
  background: #fffdf8;
  color: #5a4a2c;
  font-size: 12.5px;
  line-height: 1.75;
}

/* 弹窗 */
.modal-mask {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 18px;
  background: #0b1220b8;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  animation: fadeIn 0.18s var(--ease);
}
.modal {
  display: flex;
  flex-direction: column;
  width: min(94vw, 420px);
  max-height: 82dvh;
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  background: var(--paper);
  box-shadow: 0 30px 70px -30px #00000099;
  animation: cardIn 0.22s var(--ease);
}
.modal--wide {
  width: min(94vw, 560px);
}
.modal__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid #e8e1d2;
}
.modal__title {
  flex: 1;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--navy);
}
.modal__close {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: -4px -6px -4px 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.modal__close:hover {
  background: #0000000a;
  color: var(--navy);
}
.modal__body {
  padding: 14px 16px;
  overflow: auto;
  color: #2a3346;
  font-size: 13px;
  line-height: 1.75;
}
.modal__body p + p {
  margin-top: 8px;
}
.modal__meta {
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
}
.modal__empty {
  padding: 14px 12px;
  border: 1px dashed #d9cfb6;
  border-radius: var(--r-1);
  background: #fffdf8;
  color: var(--muted);
  font-size: 12.5px;
  text-align: center;
}
.modal__steps {
  margin: 8px 0 0 18px;
  list-style: decimal;
  color: #3a4356;
  font-size: 12.5px;
  line-height: 1.8;
}
.modal__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 16px 16px;
  border-top: 1px solid #e8e1d2;
}
.modal__foot .btn {
  flex: 1 1 auto;
}

/* 小程序码弹层：二维码按原始 PNG 显示，不加圆角/边框/阴影/滤镜/遮罩 */
.mp-body {
  text-align: center;
}
.mp-qr {
  display: block;
  width: 220px;
  max-width: 100%;
  height: auto;
  margin: 2px auto 12px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: none;
  opacity: 1;
  object-fit: contain;
}
.mp-promo {
  margin: 0 auto 8px;
  max-width: 22em;
  color: var(--navy);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  word-break: break-word;
  text-wrap: pretty;
}
.mp-promo-sub {
  margin: 0 auto 8px;
  max-width: 24em;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
  word-break: break-word;
  text-wrap: pretty;
}
.mp-tap {
  margin: 8px auto 0;
  padding-top: 8px;
  max-width: 24em;
  border-top: 1px dashed #ded7c6;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
  word-break: break-word;
  text-wrap: pretty;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .modal-mask,
  .modal {
    animation: none !important;
  }
}

/* -----------------------------------------------------------------------------
   13.9 客户 9 条排版与字号规范（V4）
   -------------------------------------------------------------------------- */
:root {
  --fs-h1: 25px;
  --fs-h2: 16px;
  --fs-h3: 15px;
  --fs-body: 14px;
  --fs-aux: 12.5px;
}

body {
  font-size: var(--fs-body);
}

/* H1：24–26（卡片主标题） */
.invite__title {
  font-size: clamp(24px, 7.6vw, 26px);
  letter-spacing: 0.07em;
}
.hero__title {
  font-size: clamp(24px, 7.4vw, 26px);
}
.portal-hero__title {
  font-size: clamp(24px, 7.4vw, 26px);
}
.parents-head__title {
  font-size: clamp(24px, 7.2vw, 26px);
}

/* 副标题两行（客户第 1 条） */
.card-sub {
  margin: 8px 0 0;
  text-align: center;
}
.card-sub__l1 {
  display: block;
  color: #2a3346;
  font-size: 14px;
  line-height: 1.6;
}
.card-sub__l2 {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.6;
}
.invite__sub {
  font-size: 14px;
}

/* H2：16 */
.sec__title,
.article h2,
.giftbox__title,
.usage__title,
.combo__title,
.state__title {
  font-size: var(--fs-h2);
}

/* 正文 14 / 辅助 12–12.5 */
.invite__body {
  font-size: 14px;
  line-height: 1.85;
}
.invite__to {
  font-size: 14px;
  font-weight: 700;
}
.hero__desc,
.portal-hero__sub,
.article p,
.step,
.check-item,
.choice__title,
.pick__title,
.usage__name,
.combo__name,
.benefit__title,
.meta,
.info,
.label,
.reserve__t,
.store-card__addr,
.mini__title,
.portal-card__t,
.flow__t,
.sign__name {
  font-size: var(--fs-body);
}
.usage__remaining {
  font-size: var(--fs-body);
}
.usage__remaining em {
  font-size: var(--fs-aux);
}
.benefit__desc,
.choice__desc,
.pick__desc,
.combo__note,
.usage__note,
.flow__d,
.portal-card__d,
.reserve__d,
.store-card__meta,
.mini__tip,
.hint,
.notice-item,
.article .quote,
.quote-warn,
.giftbox__sub,
.usage__dur,
.pill,
.tbd,
.claim-steps__t {
  font-size: var(--fs-aux);
}
.usage__state,
.mini__state,
.store-hint,
.pill {
  font-size: 12px;
}
.foot,
.foot__line {
  font-size: 12px;
}
.sign__sub,
.sign__date {
  font-size: 12px;
}
.btn,
.btn--sm {
  font-size: 14px;
}
.reserve__tel {
  font-size: 14px;
}

/* 键值表：标签与数值同字号、同字重，数值不加粗（客户第 3、9 条） */
.meta__v,
.info__v,
.info__v a {
  font-weight: 400;
}
.info__k {
  width: 100px;
}

/* 「仅限本人使用」两行（客户第 4 条） */
.onlyme__line {
  display: block;
}
.onlyme__line + .onlyme__line {
  margin-top: 2px;
}

/* 门户「领取方式」3 步清单（客户第 7 条） */
.claim-steps {
  margin-top: 12px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: #fffdf8;
}
.claim-steps__t {
  margin: 0 0 6px;
  color: var(--navy);
  font-size: 14px;
  font-weight: 700;
}
.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: yxstep;
}
.steps li {
  position: relative;
  padding: 5px 0 5px 26px;
  color: #2a3346;
  font-size: 14px;
  line-height: 1.6;
}
.steps li::before {
  counter-increment: yxstep;
  content: counter(yxstep);
  position: absolute;
  left: 0;
  top: 6px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--blue-050);
  color: var(--blue);
  font-size: 11px;
  font-weight: 700;
}

/* 底部合规声明：12px / 1.6 / 三段（客户第 8 条） */
.compliance {
  margin-top: 16px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
  text-align: left;
}
.compliance p {
  margin: 0;
}
.compliance p + p {
  margin-top: 2px;
}

/* -----------------------------------------------------------------------------
   14. 打印：只输出卡面，单页、不断页、不用背景色铺满
   -------------------------------------------------------------------------- */
@media print {
  @page {
    size: A4 portrait;
    margin: 12mm;
  }

  html,
  body {
    background: #fff !important;
    color: #000;
    min-height: 0;
  }
  body::before,
  body::after {
    display: none !important;
  }

  .no-print,
  .topbar,
  .foot,
  .actionbar,
  .linkbar,
  .btn,
  .toast-host,
  .skip,
  /* 启封火漆印章是 <button class="wax">，不属于 .btn，必须单独隐藏 */
  .wax,
  .field,
  .form-card,
  .share,
  .hint,
  .stores__head::after {
    display: none !important;
  }

  .shell {
    max-width: none;
    padding: 0;
    margin: 0;
  }
  .stack > * + * {
    margin-top: 0;
  }

  .paper {
    box-shadow: none !important;
    border: 1px solid #b9b2a2;
    border-radius: 0;
    background: #fff !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .paper--card::before {
    border-color: #c8a05a;
  }
  .paper__inner {
    padding: 16px 16px 14px;
  }

  /* 打印时压缩留白，确保 A4 单页装得下 */
  .invite__title {
    font-size: 27px;
    margin: 4px 0 5px;
  }
  .invite__body {
    font-size: 11.5px;
    line-height: 1.6;
    text-align: left;
  }
  .giftbox {
    margin: 8px 0;
    padding: 9px 10px;
    break-inside: avoid;
  }
  .benefit {
    padding: 5px 0;
    break-inside: avoid;
  }
  .benefit__desc {
    font-size: 10.5px;
  }
  .metas,
  .stores,
  .codecard,
  .qr,
  .wm-used {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .code-big {
    font-size: 24px;
    letter-spacing: 0.08em;
  }
  .qr__frame {
    width: 138px;
    padding: 5px;
  }
  .qr__frame::before {
    display: none;
  }
  .seal {
    opacity: 0.75;
    width: 62px;
    height: 62px;
  }
  .wm-used span {
    opacity: 0.3;
    font-size: 40px;
  }

  /* V2/V3 打印：小程序入口 / 门店照片 / 详情按钮 / 门店操作按钮 / 预约提示条不上纸，省版面也省墨 */
  .mini,
  .store-photo,
  .combo__more,
  .picked__more,
  .store-card__btns,
  .reserve__tel,
  .store-hint,
  .sticky-cta,
  .modal-mask,
  .onlyme svg {
    display: none !important;
  }
  .combo {
    margin: 8px 0;
    padding: 8px 10px 6px;
    break-inside: avoid;
  }
  .combo__title {
    font-size: 15px;
  }
  .combo__item {
    padding: 3px 0;
  }
  .combo__name {
    font-size: 11px;
  }
  .combo__label {
    margin-top: 4px;
    font-size: 9.5px;
  }
  /* V3 三项清单 / 剩余项 / 电话预约 / 门店卡：压缩但保留信息 */
  .usage {
    margin: 7px 0;
    padding: 8px 10px 6px;
    break-inside: avoid;
  }
  .usage__title {
    font-size: 15px;
    margin-top: 4px;
  }
  .usage__badge {
    font-size: 9px;
    padding: 1px 7px;
  }
  .usage__item {
    padding: 3px 0;
  }
  .usage__name {
    font-size: 11px;
  }
  .usage__dur,
  .usage__state {
    font-size: 9px;
  }
  .usage__meta {
    font-size: 9px;
  }
  .usage__note,
  .usage__remaining {
    font-size: 10px;
    margin-top: 5px;
  }
  .remain {
    margin-top: 6px;
    padding: 5px 8px;
    font-size: 10.5px;
  }
  .reserve {
    padding: 8px 10px;
    grid-template-columns: 26px 1fr;
    break-inside: avoid;
  }
  .reserve__icon {
    width: 26px;
    height: 26px;
  }
  .reserve__t {
    font-size: 11px;
  }
  .reserve__d {
    font-size: 9.5px;
  }
  .store-card {
    margin: 7px 0;
    padding: 8px 10px;
    break-inside: avoid;
  }
  .store-card__name {
    font-size: 11.5px;
  }
  .store-card__addr {
    margin-top: 3px;
    font-size: 9.5px;
  }
  .store-card__meta {
    margin-top: 2px;
    font-size: 9px;
  }
  .onlyme {
    padding: 6px 9px;
    font-size: 10px;
    break-inside: avoid;
  }
  .picked {
    margin-top: 8px;
    padding: 8px 10px;
    break-inside: avoid;
  }
  .picked__v {
    font-size: 16px;
  }
  .invite__logo {
    width: 82px;
    margin-bottom: 6px;
  }

  /* ---- 核销码卡：A4 单页排版（先压到 748px，再放大到约 930px） ----
     原则：字号与二维码尽量大（前台/家长看得清），但绝不越过 A4 可打印高度 1033px。 */
  .ticket .paper__inner {
    padding: 14px 16px 9px;
  }
  .ticket .ticket-head .eyebrow {
    font-size: 9px;
    letter-spacing: 0.22em;
  }
  .ticket .invite__title {
    font-size: 26px !important;
    margin: 4px 0 3px !important;
    letter-spacing: 0.06em !important;
  }
  .ticket .invite__sub {
    font-size: 11.5px;
  }
  .ticket .orn {
    margin: 6px 0;
  }
  .ticket .orn i {
    width: 5px;
    height: 5px;
  }
  .ticket .from-banner {
    margin-bottom: 6px !important;
    padding: 6px 9px;
    font-size: 11px;
  }
  .ticket .status-row {
    margin: 4px 0 4px;
    gap: 6px;
  }
  .ticket .badge {
    padding: 2px 8px;
    font-size: 10.5px;
  }
  .ticket .codecard {
    padding: 6px 10px 4px;
  }
  .ticket .codecard .eyebrow {
    font-size: 9px;
  }
  .ticket .code-big {
    font-size: 26px !important;
    margin-top: 2px;
    letter-spacing: 0.12em;
  }
  .ticket .code-hint {
    margin-top: 3px;
    font-size: 10px;
    letter-spacing: 0.1em;
  }
  .ticket .qr {
    margin-top: 6px !important;
    padding: 6px 10px 5px;
    gap: 3px;
  }
  .ticket .qr__frame {
    width: 136px;
    padding: 4px;
  }
  .ticket .qr__tip,
  .ticket .qr__brand {
    display: none;
  }
  /* 打印时预约条与门店提示和「到店须知」重复，隐藏省版面（电话仍在须知与门店行里） */
  .ticket .reserve {
    display: none !important;
  }
  .ticket .store-card__meta {
    display: none !important;
  }
  /* 卡片的门店卡与「仅限本人」条在下方信息行/须知里已完整覆盖，打印时不再重复 */
  .ticket .store-card,
  .ticket .onlyme {
    display: none !important;
  }
  .ticket .usage__note {
    display: none;
  }
  .ticket .usage__remaining {
    margin-top: 5px;
    padding: 4px 8px;
  }
  /* 打印时把剩余说明收回同一行，省一行高度 */
  .ticket .usage__remaining em {
    display: inline;
    margin-left: 6px;
  }
  .ticket .info-grid {
    margin-top: 6px;
    padding: 0 10px;
  }
  .ticket .info {
    padding: 2.5px 0;
    font-size: 11px;
    line-height: 1.45;
  }
  .ticket .info__k {
    width: 74px;
  }
  .ticket .orn {
    margin: 4px 0;
  }
  .ticket .usage__item {
    padding: 2px 0;
  }
  .ticket .notice-list .notice-item {
    padding: 2px 0;
    font-size: 10px;
    line-height: 1.45;
  }
  .ticket .sec-title {
    margin: 10px 0 4px;
    font-size: 10.5px;
    letter-spacing: 0.14em;
  }
  .ticket .benefit-sm {
    padding: 3px 0;
    font-size: 11px;
    line-height: 1.45;
  }
  .ticket .benefit-sm__idx {
    font-size: 10px;
  }
  .ticket .benefit-sm__dur {
    font-size: 10px;
  }
  .ticket .notice-list .notice-item {
    padding: 2.5px 0;
    font-size: 10.5px;
    line-height: 1.5;
  }
  .ticket .notice-item__no {
    font-size: 10px;
    padding-top: 0;
  }
  .ticket .invite__foot {
    margin-top: 10px;
    padding-top: 8px;
    padding-bottom: 2px;
  }
  .ticket .sign__name {
    font-size: 12.5px;
  }
  .ticket .sign__sub,
  .ticket .sign__date {
    font-size: 10px;
  }
  .ticket .seal {
    width: 54px;
    height: 54px;
  }

  /* ---- V3.1 打印回归：390 宽 print 实测 docHeight 1206px → 压到 ≤1000px 单页 ----
     原则：只删重复信息（须知保留前 4 条、信息行只留门店/地址/电话/有效期），
     不删三项名称与状态；字号/行高/留白整体收 15–25%。 */
  .ticket .paper__inner {
    padding: 10px 12px 8px;
  }
  .ticket .ticket-head .eyebrow {
    font-size: 8px;
  }
  .ticket .invite__title {
    font-size: 22px !important;
    margin: 3px 0 2px !important;
  }
  .ticket .invite__sub {
    font-size: 10.5px;
  }
  .ticket .orn {
    margin: 2px 0;
  }
  .ticket .status-row {
    margin: 2px 0 3px;
    gap: 4px;
  }
  .ticket .badge {
    padding: 1px 6px;
    font-size: 9px;
  }
  .ticket .codecard {
    padding: 4px 8px 3px;
  }
  .ticket .code-big {
    font-size: 22px !important;
    margin-top: 1px;
  }
  .ticket .code-hint {
    font-size: 9px;
    margin-top: 2px;
  }
  .ticket .qr {
    padding: 4px 8px;
    margin-top: 4px !important;
  }
  .ticket .qr__frame {
    width: 110px;
    padding: 3px;
  }
  .ticket .usage {
    margin: 5px 0;
    padding: 6px 8px 4px;
  }
  .ticket .usage__title {
    display: none;
  }
  .ticket .usage__list {
    margin-top: 4px;
  }
  .ticket .usage__item {
    padding: 1px 0;
    line-height: 1.25;
  }
  .ticket .usage__idx {
    font-size: 9px;
    padding-top: 0;
  }
  .ticket .usage__name {
    display: inline;
    font-size: 10.5px;
    line-height: 1.3;
  }
  .ticket .usage__dur {
    display: inline;
    margin: 0 0 0 5px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 9px;
  }
  .ticket .usage__meta {
    display: none !important;
  }
  .ticket .usage__state {
    font-size: 8.5px;
    padding: 0 5px;
  }
  .ticket .usage__remaining {
    margin-top: 3px;
    padding: 3px 6px;
    font-size: 9px;
  }
  .ticket .usage__remaining em {
    font-size: 8.5px;
  }
  .ticket .info {
    padding: 1.5px 0;
    font-size: 9.5px;
    line-height: 1.3;
  }
  .ticket .info__k {
    width: 64px;
  }
  /* 打印只留 门店名 / 地址 / 预约电话 / 有效期 / 核销码；其余进屏幕版 */
  .ticket .info--opt {
    display: none !important;
  }
  .ticket .sec-title {
    margin: 5px 0 2px;
    font-size: 9px;
  }
  .ticket .notice-list .notice-item {
    padding: 1px 0;
    font-size: 9px;
    line-height: 1.35;
  }
  /* 到店须知打印只保留前 4 条（预约/有效期/出示/项目说明都在其中） */
  .ticket .notice-list .notice-item:nth-child(n + 5) {
    display: none !important;
  }
  .ticket .invite__foot {
    margin-top: 5px;
    padding-top: 4px;
  }
  .ticket .sign__name {
    font-size: 10.5px;
  }
  .ticket .sign__sub,
  .ticket .sign__date {
    font-size: 8.5px;
  }
  .ticket .seal {
    width: 38px;
    height: 38px;
  }

  /* 邀请函落款：底部留一条缝，避免圆章/日期贴到内框 */
  .invite .invite__foot {
    padding-bottom: 2px;
  }
  /* 打印版的「赠送项目体验店」标签由门店名本身承接，省一行高度 */
  .invite .store-label {
    display: none !important;
  }
  .invite .seal {
    width: 56px;
    height: 56px;
  }

  /* 强制打印背景（金线、水印、浅底） */
  .paper,
  .giftbox,
  .codecard,
  .qr,
  .badge,
  .banner,
  .stamp,
  .wm-used span {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  a[href]::after {
    content: "";
  }
  a {
    color: inherit;
    text-decoration: none;
  }
}