@import url("fonts/misans.css");

/* ============================================================
   胡闹工坊 · 众筹 H5 设计系统 v3「珍珠白 · Liquid Glass」
   参考 Apple 系统语言：珍珠白底 + 毛玻璃层 + 系统蓝
   所有页面共用；页面内只写「页面独有」的样式。
   ============================================================ */

:root {
  /* ---------- 底层：珍珠白 ---------- */
  --bg:          #F3F3F6;   /* 珍珠底 */
  --bg-2:        #E9E9EF;   /* 凹陷 / 轨道 */
  --surface:     #FFFFFF;   /* 不透明表面 */

  /* ---------- 玻璃层（Apple 风格核心） ---------- */
  --glass-bg:       rgba(255,255,255,.72);
  --glass-bg-strong:rgba(255,255,255,.86);   /* 需要高可读性的浮层 */
  --glass-bg-thin:  rgba(255,255,255,.58);
  --glass-brd:      rgba(255,255,255,.9);
  --glass-brd-soft: rgba(17,24,39,.06);
  --glass-blur:     22px;
  --glass-blur-lg:  34px;
  --glass-sat:      180%;
  /* 顶部高光 + 外投影，玻璃"厚度感"的来源 */
  --glass-lift: inset 0 1px 0 rgba(255,255,255,.92),
                0 1px 1.5px rgba(17,24,39,.04),
                0 8px 24px rgba(17,24,39,.06);
  --glass-lift-lg: inset 0 1px 0 rgba(255,255,255,.95),
                0 2px 6px rgba(17,24,39,.05),
                0 18px 46px rgba(17,24,39,.11);

  /* ---------- 文字（全部满足 4.5:1） ---------- */
  --ink:     #16181D;   /* 主文字 */
  --ink-2:   #3E434B;   /* 次级 */
  --muted:   #676D77;   /* 弱化（对 #F3F3F6 约 5.3:1） */
  --faint:   #9AA0AA;   /* 仅用于非信息性装饰 */
  --line:    rgba(17,24,39,.09);
  --line-2:  rgba(17,24,39,.16);

  /* ---------- 强调色：系统色 ---------- */
  --blue:      #0A72F5;   /* 主 CTA / 链接（比 007AFF 略深，保证白底对比） */
  --blue-deep: #0757C2;
  --blue-wash: rgba(10,114,245,.10);
  --amber:     #B26A00;   /* 解锁 / 权益达成（文字级对比达标） */
  --amber-lite:#FF9F0A;   /* 解锁的图形/光效 */
  --amber-wash:rgba(255,159,10,.12);
  --green:     #17803D;
  --green-wash:rgba(23,128,61,.10);
  --red:       #C1291D;
  --red-wash:  rgba(193,41,29,.09);

  /* ---------- 字体：系统栈（不外链，零加载成本） ---------- */
  --f-sans: "MiSans", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter",
            "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei",
            "Segoe UI", Roboto, sans-serif;
  --f-disp: "MiSans", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter",
            "PingFang SC", "HarmonyOS Sans SC", sans-serif;
  --f-num:  "SF Mono", ui-monospace, Menlo, monospace;

  /* 字阶（只有这 8 档） */
  --t-xs: 11px;  --t-sm: 13px;  --t-md: 14px;  --t-base: 16px;
  --t-lg: 18px;  --t-xl: 22px;  --t-2xl: 28px; --t-3xl: 40px;

  /* ---------- 间距：严格 4pt 网格 ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --gutter: 16px;            /* 全站左右安全边距，所有页面统一 */

  /* ---------- 连续圆角（Apple 比例） ---------- */
  --r-s: 12px; --r-m: 16px; --r-l: 22px; --r-xl: 28px; --r-pill: 999px;

  /* ---------- z-index 分层（写死，禁止随手 9999） ---------- */
  --z-dock: 30; --z-topbar: 40; --z-modal: 50; --z-fx: 60; --z-toast: 70;

  /* ---------- 动效 ---------- */
  --e-out:  cubic-bezier(.22,.86,.34,1);
  --e-soft: cubic-bezier(.4,0,.2,1);
  --e-back: cubic-bezier(.34,1.32,.64,1);
  --d-fast: 180ms; --d-mid: 260ms; --d-slow: 420ms;

  /* 最小可点区域 */
  --tap: 44px;

  /* ---------- 语义尺寸：跨页面统一 ---------- */
  --page-narrow: 680px;
  --page-reading: 800px;
  --page-gallery: 1040px;
  --r-card: 24px;
  --r-control: 14px;
  --shadow-card: 0 18px 48px rgba(31,38,48,.08), 0 2px 8px rgba(31,38,48,.04);
  --leading-tight: 1.22;
  --leading-body: 1.65;
  --tracking-body: .015em;
  --tracking-heading: .012em;
  --tracking-control: .02em;
  --tracking-eyebrow: .15em;

  /* ---------- 产品主题：默认「天青白瓷」 ---------- */
  --theme-bg:#EDF4F3; --theme-bg-rgb:237,244,243;
  --theme-accent:#42715F; --theme-accent-rgb:66,113,95; --theme-accent-text:#365E4F;
  --theme-accent-2:#A0C7B8;
  --theme-ink:#1E342B; --theme-ink-2:#40594F; --theme-muted:#62726B;
  --theme-glow:rgba(160,199,184,.34);
  --theme-glass:rgba(255,255,255,.66); --theme-border:rgba(255,255,255,.82);
}

/* ============================================================
   产品主题色板（跨首页 / 画册 / 订单页唯一事实源）
   accent 同时满足浅底文字与白字按钮的 WCAG AA 对比度。
   ============================================================ */
body[data-theme="porcelain"] { --theme-bg:#EDF4F3;--theme-bg-rgb:237,244,243;--theme-accent:#42715F;--theme-accent-rgb:66,113,95;--theme-accent-text:#365E4F;--theme-accent-2:#A0C7B8;--theme-ink:#1E342B;--theme-ink-2:#40594F;--theme-muted:#62726B;--theme-glow:rgba(160,199,184,.34); }
body[data-theme="graphite"] { --theme-bg:#F0F2F5;--theme-bg-rgb:240,242,245;--theme-accent:#46515F;--theme-accent-rgb:70,81,95;--theme-accent-text:#46515F;--theme-accent-2:#AEB8C6;--theme-ink:#18212B;--theme-ink-2:#3C4652;--theme-muted:#626D79;--theme-glow:rgba(174,184,198,.28); }
body[data-theme="amber"] { --theme-bg:#F7F1E8;--theme-bg-rgb:247,241,232;--theme-accent:#975817;--theme-accent-rgb:151,88,23;--theme-accent-text:#7D4812;--theme-accent-2:#DDB878;--theme-ink:#2B2117;--theme-ink-2:#534636;--theme-muted:#756555;--theme-glow:rgba(221,184,120,.32); }
body[data-theme="sakura"] { --theme-bg:#F8F0F2;--theme-bg-rgb:248,240,242;--theme-accent:#8D5C73;--theme-accent-rgb:141,92,115;--theme-accent-text:#7C4359;--theme-accent-2:#D8B8C5;--theme-ink:#33262E;--theme-ink-2:#5B4651;--theme-muted:#76636B;--theme-glow:rgba(216,184,197,.32); }
body[data-theme="ocean"] { --theme-bg:#EDF2F8;--theme-bg-rgb:237,242,248;--theme-accent:#286BAF;--theme-accent-rgb:40,107,175;--theme-accent-text:#205991;--theme-accent-2:#8DB8DF;--theme-ink:#152331;--theme-ink-2:#3B4D60;--theme-muted:#617080;--theme-glow:rgba(141,184,223,.34); }
body[data-theme="cyan"] { --theme-bg:#EDF7F6;--theme-bg-rgb:237,247,246;--theme-accent:#0E7078;--theme-accent-rgb:14,112,120;--theme-accent-text:#0E7078;--theme-accent-2:#7FD0D0;--theme-ink:#123B43;--theme-ink-2:#335D64;--theme-muted:#577177;--theme-glow:rgba(127,208,208,.34); }
body[data-theme="klein"] { --theme-bg:#EEF0FB;--theme-bg-rgb:238,240,251;--theme-accent:#002FA7;--theme-accent-rgb:0,47,167;--theme-accent-text:#002FA7;--theme-accent-2:#748FE0;--theme-ink:#10182F;--theme-ink-2:#394464;--theme-muted:#606A86;--theme-glow:rgba(80,110,215,.32); }
body[data-theme="ink"] { --theme-bg:#F1F2F2;--theme-bg-rgb:241,242,242;--theme-accent:#303537;--theme-accent-rgb:48,53,55;--theme-accent-text:#303537;--theme-accent-2:#9BA1A3;--theme-ink:#151718;--theme-ink-2:#3F4547;--theme-muted:#696E70;--theme-glow:rgba(120,128,130,.26); }
body[data-theme="dusk"] { --theme-bg:#F3EFF7;--theme-bg-rgb:243,239,247;--theme-accent:#72558E;--theme-accent-rgb:114,85,142;--theme-accent-text:#72558E;--theme-accent-2:#B8A2CC;--theme-ink:#261D2E;--theme-ink-2:#51425B;--theme-muted:#74667E;--theme-glow:rgba(184,162,204,.32); }
body[data-theme="peach"] { --theme-bg:#FAF0F0;--theme-bg-rgb:250,240,240;--theme-accent:#A64B51;--theme-accent-rgb:166,75,81;--theme-accent-text:#8D3F4A;--theme-accent-2:#E6B1AE;--theme-ink:#3A2022;--theme-ink-2:#654346;--theme-muted:#7A6267;--theme-glow:rgba(230,177,174,.32); }
body[data-theme="mint"] { --theme-bg:#EEF8F7;--theme-bg-rgb:238,248,247;--theme-accent:#326F93;--theme-accent-rgb:50,111,147;--theme-accent-text:#285F7C;--theme-accent-2:#9CCFDB;--theme-ink:#193240;--theme-ink-2:#3B5968;--theme-muted:#60727B;--theme-glow:rgba(156,207,219,.34); }

body[data-theme] {
  --ink:var(--theme-ink); --ink-2:var(--theme-ink-2); --muted:var(--theme-muted);
  --line:rgba(var(--theme-accent-rgb),.12);
  --line-2:rgba(var(--theme-accent-rgb),.20);
  --blue:var(--theme-accent-text); --blue-deep:var(--theme-accent-text);
  --blue-wash:rgba(var(--theme-accent-rgb),.10);
  --paper:var(--theme-bg); --accent:var(--theme-accent-text);
  --apple-ink:var(--theme-ink); --apple-muted:var(--theme-muted);
  --theme-border:rgba(255,255,255,.84);
}

/* ============================================================
   基础
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }

body {
  position: relative;
  min-height: 100svh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: var(--t-base);
  line-height: 1.55;
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

:where(h1,h2,h3,p,li,dd,dt,a,button,label,small,span) {
  overflow-wrap: anywhere;
}
:where(h1,h2,h3) { text-wrap: balance; }
:where(p,li) { text-wrap: pretty; }
:where(.card,.glass,.sheet,main,section,article,header,footer,div) > * { min-width: 0; }

/* 珍珠底：极淡的多色光晕，让毛玻璃有东西可折射。
   没有它，backdrop-filter 在纯色底上是看不出效果的。 */
body::before {
  content: ""; position: absolute; inset: 0; min-height: 100%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 30% at 12% 8%,  rgba(120,160,255,.16), transparent 70%),
    radial-gradient(34% 26% at 88% 14%, rgba(255,180,160,.14), transparent 70%),
    radial-gradient(40% 32% at 76% 82%, rgba(150,220,210,.13), transparent 72%),
    radial-gradient(30% 24% at 20% 92%, rgba(200,170,255,.12), transparent 70%);
  filter: blur(6px);
}

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: inherit; }
img { display: block; max-width: 100%; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 6px; }

/* ============================================================
   玻璃工具类
   ============================================================ */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-brd);
  box-shadow: var(--glass-lift);
}
.glass-strong {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-sat));
}
/* 不支持 backdrop-filter（部分安卓 webview）时退化为高不透明白 */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .glass, .glass-strong { background: rgba(255,255,255,.95); }
}

/* ============================================================
   排版
   ============================================================ */
.t-display { font-family: var(--f-disp); letter-spacing: var(--tracking-heading); font-weight: 700; }
.t-eyebrow {
  font-size: var(--t-xs); font-weight: 600; letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--muted);
}
.t-muted { color: var(--muted); font-size: var(--t-md); }
.t-num   { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

.t-section {
  font-family: var(--f-disp);
  font-size: var(--t-lg); font-weight: 650; letter-spacing: var(--tracking-heading);
  line-height: 1.3;
}

/* ============================================================
   容器 / 卡片
   ============================================================ */
.wrap {
  position: relative; z-index: 1;
  max-width: 640px; margin: 0 auto;
  padding-left: var(--gutter); padding-right: var(--gutter);
}

.card {
  position: relative;
  border-radius: var(--r-l);
  padding: var(--s-5);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-brd);
  box-shadow: var(--glass-lift);
}
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .card { background: rgba(255,255,255,.95); }
}
.card + .card { margin-top: var(--s-4); }

/* ============================================================
   按钮（最小 44px 可点高度）
   ============================================================ */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  width: 100%; min-height: var(--tap);
  padding: 13px var(--s-5);
  border-radius: var(--r-m);
  font-size: var(--t-base); font-weight: 600; letter-spacing: var(--tracking-control);
  transition: transform var(--d-fast) var(--e-out),
              box-shadow var(--d-mid) var(--e-out),
              background var(--d-mid) var(--e-soft), opacity var(--d-mid);
  -webkit-tap-highlight-color: transparent;
}
.btn:active:not(:disabled) { transform: scale(.975); }
.btn:disabled { opacity: .42; cursor: not-allowed; }

.btn-primary {
  background: linear-gradient(180deg, #2A85FF 0%, var(--blue) 100%);
  color: #fff;
  box-shadow: 0 1px 1px rgba(10,114,245,.2), 0 8px 22px rgba(10,114,245,.28);
}
.btn-primary:disabled { background: #B9BDC6; box-shadow: none; }

.btn-ink   { background: var(--ink); color: #fff; }
.btn-ghost {
  background: var(--glass-bg-strong); color: var(--ink);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  box-shadow: var(--glass-lift);
}
.btn-quiet { background: rgba(120,128,140,.11); color: var(--ink-2); }
.btn-sm    { width: auto; min-height: 36px; padding: 8px var(--s-4); font-size: var(--t-md); border-radius: var(--r-s); }

.ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: rgba(255,255,255,.4); transform: scale(0); opacity: 1;
  animation: rippleOut 560ms var(--e-out) forwards;
}
.btn-ghost .ripple, .btn-quiet .ripple { background: rgba(10,114,245,.16); }
@keyframes rippleOut { to { transform: scale(2.6); opacity: 0; } }

/* 纯文字型按钮：保证 44px 触达但视觉不变大 */
.tap-link {
  position: relative; display: inline-flex; align-items: center;
  font-size: var(--t-md); font-weight: 600; color: var(--blue);
  text-decoration: none; cursor: pointer;
}
.tap-link::after {
  content: ""; position: absolute; left: -8px; right: -8px;
  top: 50%; height: var(--tap); transform: translateY(-50%);
}

/* ============================================================
   表单（输入字号必须 ≥16px，否则 iOS Safari 会自动放大页面）
   ============================================================ */
.field { margin-bottom: var(--s-4); }
.field > label {
  display: block; margin-bottom: 6px;
  font-size: var(--t-md); font-weight: 600; color: var(--ink-2);
}
.field > label .req { color: var(--red); margin-left: 2px; }

.input {
  width: 100%; min-height: var(--tap);
  padding: 12px var(--s-3);
  background: rgba(255,255,255,.8);
  border: 1px solid var(--line-2);
  border-radius: var(--r-s);
  font-size: 16px;
  letter-spacing: .01em;
  outline: none;
  transition: border-color var(--d-fast), box-shadow var(--d-fast), background var(--d-fast);
}
.input::placeholder { color: var(--faint); }
.input:hover { border-color: rgba(17,24,39,.24); }
.input:focus {
  border-color: var(--blue);
  background: #fff;
}
.input.is-bad { border-color: var(--red); box-shadow: 0 0 0 3.5px var(--red-wash); }
textarea.input { min-height: 80px; resize: vertical; line-height: 1.55; }

.field-msg { display: none; margin-top: 5px; font-size: var(--t-sm); color: var(--red); }
.field.is-bad .field-msg { display: block; }
.field-hint { display: block; margin-top: 5px; font-size: var(--t-xs); line-height: 1.5; color: var(--muted); }

/* ============================================================
   标签
   ============================================================ */
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: var(--r-pill);
  font-size: var(--t-xs); font-weight: 600; line-height: 1.5;
  max-width: 100%; white-space: normal; text-align: center;
}
.chip-blue  { background: var(--blue-wash);  color: var(--blue-deep); }
.chip-amber { background: var(--amber-wash); color: var(--amber); }
.chip-green { background: var(--green-wash); color: var(--green); }
.chip-red   { background: var(--red-wash);   color: var(--red); }
.chip-quiet { background: rgba(120,128,140,.12); color: var(--muted); }

/* ============================================================
   骨架屏
   ============================================================ */
.sk {
  border-radius: var(--r-s);
  background: linear-gradient(100deg, rgba(160,168,180,.13) 28%,
              rgba(255,255,255,.5) 46%, rgba(160,168,180,.13) 64%);
  background-size: 240% 100%;
  animation: skSweep 1.5s ease-in-out infinite;
}
@keyframes skSweep { 0% { background-position: 180% 0; } 100% { background-position: -60% 0; } }

/* ============================================================
   Toast
   ============================================================ */
#toast-root {
  position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: var(--s-2);
  align-items: center; pointer-events: none; width: max-content; max-width: 86vw;
}
.toast {
  display: flex; align-items: center; gap: var(--s-2);
  padding: 11px var(--s-4);
  background: rgba(22,24,29,.82);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff; border-radius: var(--r-pill);
  font-size: var(--t-md); font-weight: 500;
  box-shadow: 0 12px 34px rgba(0,0,0,.24);
  animation: toastIn var(--d-mid) var(--e-back);
}
.toast.out { animation: toastOut var(--d-fast) var(--e-soft) forwards; }
.toast.ok  { background: rgba(23,128,61,.88); }
.toast.bad { background: rgba(193,41,29,.88); }
.toast svg { width: 15px; height: 15px; flex: 0 0 auto; }
@keyframes toastIn  { from { opacity: 0; transform: translateY(12px) scale(.94); } }
@keyframes toastOut { to   { opacity: 0; transform: translateY(6px)  scale(.96); } }

/* ============================================================
   滚动入场
   ============================================================ */
.rise {
  opacity: 0; transform: translateY(14px);
  transition: opacity var(--d-slow) var(--e-out), transform var(--d-slow) var(--e-out);
}
.rise.in { opacity: 1; transform: none; }

/* ============================================================
   弹层
   ============================================================ */
.modal {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: none; align-items: flex-end; justify-content: center;
  background: rgba(28,30,36,.28);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.modal.show { display: flex; animation: fadeIn var(--d-mid) var(--e-soft); }
@keyframes fadeIn { from { opacity: 0; } }

.sheet {
  width: min(640px, 100%); max-height: 92vh; overflow-y: auto;
  /* 抽屉内滚动条视觉隐藏（保留滚动能力）：桌面经典滚动条会占位 17px 并破坏抽屉观感，
     与 .seg/.gal-scroll 一致采用隐藏模式。 */
  scrollbar-width: none;
  background: rgba(248,248,251,.9);
  -webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-sat));
  border-top: 1px solid var(--glass-brd);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: var(--s-3) var(--gutter) calc(var(--s-8) + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -16px 50px rgba(17,24,39,.18);
  animation: sheetUp var(--d-slow) var(--e-out);
  -webkit-overflow-scrolling: touch;
}
.sheet::-webkit-scrollbar { display: none; }
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .sheet { background: #F8F8FB; }
  .modal { background: rgba(28,30,36,.44); }
}
@keyframes sheetUp { from { transform: translateY(5%); opacity: .5; } }

.sheet-grip {
  width: 36px; height: 5px; border-radius: 3px;
  background: rgba(17,24,39,.16); margin: 0 auto var(--s-3);
}
.sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); margin-bottom: var(--s-5);
}
.sheet-head h2, .sheet-head h3 {
  font-family: var(--f-disp);
  font-size: var(--t-xl); font-weight: 650; letter-spacing: -.02em;
}
.btn-close {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(120,128,140,.14); color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--d-fast), transform var(--d-fast) var(--e-out);
  position: relative;
}
.btn-close svg { width: 13px; height: 13px; }
/* 视觉 30px，实际触达 44px */
.btn-close::after { content: ""; position: absolute; inset: -7px; }
.btn-close:active { transform: scale(.9); background: rgba(120,128,140,.22); }

/* ============================================================
   减弱动效
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .rise { opacity: 1; transform: none; }
}

/* ============================================================
   响应式基线：所有前台页面共享
   ============================================================ */
@media (max-width: 359px) {
  :root { --gutter: 14px; --r-card: 20px; }
  .card { padding: var(--s-4); border-radius: var(--r-card); }
  .btn { padding-left: var(--s-4); padding-right: var(--s-4); }
}

@media (min-width: 768px) {
  :root { --gutter: 24px; }
  .card { padding: var(--s-6); }
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover:not(:disabled) { transform: translateY(-1px); }
  .tap-link:hover { text-decoration: underline; text-underline-offset: 3px; }
}