/* ============================================================
   友约 Web · 液态玻璃按钮体系（空白玻璃版）
   与小程序 miniprogram/styles/theme.wxss + common.wxss 同一套设计 token。

   统一形态：半透明玻璃底 + 1px 极淡描边 + 顶部高光 + 墨色文字。
   不再使用彩色渐变填充，也不做颜色流动动画。

   三类按钮：
     1) .btn / .submit / .btn-cta         主操作（玻璃更实、描边带一点紫）
     2) .btn-secondary / .btn.secondary   次级操作（玻璃更淡）
     3) .btn.small / .ym-pill             小尺寸胶囊

   引入方式：放在页面 <style> 之后（</head> 前），同特异性下后加载者覆盖。
   ============================================================ */

:root {
  --ym-ink: #24212c;
  --ym-ink-soft: #6f6a78;
  --ym-muted: #8f8b96;
  --ym-accent: #a86cff;
  --ym-danger: #c43f4d;

  /* 玻璃底与描边 */
  --ym-glass: rgba(255, 255, 255, 0.46);
  --ym-glass-strong: rgba(255, 255, 255, 0.52);
  --ym-glass-soft: rgba(255, 255, 255, 0.34);
  --ym-glass-stroke: rgba(255, 255, 255, 0.78);

  /* 主按钮的静态描边：白 → 白 → 淡紫（135deg，不做流动） */
  --ym-glass-edge: linear-gradient(135deg,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(255, 255, 255, 0.4) 46%,
      rgba(168, 108, 255, 0.34) 100%);

  --ym-active-bg: rgba(168, 108, 255, 0.14);
  --ym-active-stroke: rgba(168, 108, 255, 0.26);
}

/* ---------- 0) 公共骨架 ---------- */
.btn,
.submit,
.btn-cta,
.btn-secondary,
.btn.secondary,
.btn.btn-secondary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  min-height: 50px;
  margin: 0;
  padding: 0 32px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ym-ink);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  overflow: hidden;
  backdrop-filter: blur(22px) saturate(130%);
  -webkit-backdrop-filter: blur(22px) saturate(130%);
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

/* 屏蔽旧模板里的扫光伪元素 */
.btn::before,
.btn::after,
.submit::before,
.submit::after,
.btn-cta::before,
.btn-cta::after,
.btn-secondary::before,
.btn-secondary::after {
  content: none !important;
  animation: none !important;
}

/* ---------- 1) 主按钮：玻璃底 + 极淡渐变描边 ---------- */
/* 三层背景（自上而下）：顶部弧形高光 → 玻璃底 → 1px 描边。
   高光做在背景层而不是伪元素上，避免半透明白盖在文字上。 */
.btn,
.submit,
.btn-cta {
  --ym-btn-fill: rgba(255, 255, 255, 0.52);
  --ym-btn-shine: rgba(255, 255, 255, 0.55);
  border: 1px solid transparent;
  background-image:
    linear-gradient(180deg, var(--ym-btn-shine), rgba(255, 255, 255, 0) 58%),
    linear-gradient(var(--ym-btn-fill), var(--ym-btn-fill)),
    var(--ym-glass-edge);
  background-origin: padding-box, padding-box, border-box;
  background-clip: padding-box, padding-box, border-box;
  box-shadow:
    0 14px 34px rgba(50, 45, 60, 0.06),
    inset 0 1px 1px rgba(255, 255, 255, 0.95);
}

/* ---------- 2) 次级按钮：更淡的玻璃 + 纯白描边 ---------- */
.btn-secondary,
.btn.secondary,
.btn.btn-secondary {
  border: 1px solid var(--ym-glass-stroke);
  background-color: var(--ym-glass-soft);
  background-image: none;
  color: var(--ym-ink-soft);
  box-shadow:
    0 10px 26px rgba(50, 45, 60, 0.045),
    inset 0 1px 1px rgba(255, 255, 255, 0.9);
}

/* ---------- 交互态（主次共用） ---------- */
.btn:hover,
.submit:hover,
.btn-cta:hover,
.btn-secondary:hover,
.btn.secondary:hover,
.btn.btn-secondary:hover {
  transform: translateY(-2px);
}

.btn:hover,
.submit:hover,
.btn-cta:hover {
  --ym-btn-fill: rgba(255, 255, 255, 0.68);
  box-shadow:
    0 18px 40px rgba(50, 45, 60, 0.09),
    inset 0 1px 1px rgba(255, 255, 255, 0.95);
}

.btn-secondary:hover,
.btn.secondary:hover,
.btn.btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.56);
  box-shadow:
    0 14px 32px rgba(50, 45, 60, 0.07),
    inset 0 1px 1px rgba(255, 255, 255, 0.95);
}

.btn:active,
.submit:active,
.btn-cta:active,
.btn-secondary:active,
.btn.secondary:active,
.btn.btn-secondary:active {
  transform: translateY(0) scale(0.985);
}

.btn:disabled,
.submit:disabled,
.btn-cta:disabled,
.btn-secondary:disabled {
  opacity: 0.5;
  cursor: wait;
  transform: none;
}

.btn:focus-visible,
.submit:focus-visible,
.btn-cta:focus-visible,
.btn-secondary:focus-visible {
  outline: 2px solid rgba(168, 108, 255, 0.55);
  outline-offset: 3px;
}

/* 按钮里的 ✦ / → 装饰符 */
.btn .spark,
.btn .arrow,
.btn-cta .spark,
.btn-cta .arrow,
.btn-secondary .spark,
.btn-secondary .arrow,
.btn.secondary .spark,
.btn.secondary .arrow {
  color: var(--ym-accent);
  font-size: 1.05em;
}

/* ---------- 3) 小尺寸 ---------- */
.btn.small,
.btn-sm {
  min-height: 38px;
  padding: 0 20px;
  font-size: 13px;
}

.btn-cta {
  min-height: 56px;
  padding: 0 40px;
  font-size: 16px;
}

/* ---------- 危险操作：淡红玻璃 ---------- */
.btn.danger,
.btn-danger {
  border: 1px solid rgba(255, 59, 48, 0.26);
  background-color: rgba(255, 59, 48, 0.05);
  background-image: none;
  color: var(--ym-danger);
  box-shadow: 0 10px 26px rgba(50, 45, 60, 0.04);
}

.btn.danger:hover,
.btn-danger:hover {
  transform: translateY(-2px);
  background-color: rgba(255, 59, 48, 0.09);
}

/* ---------- 玻璃小胶囊（换一批 / 复制 / 刷新） ---------- */
.ym-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  min-height: 38px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid var(--ym-glass-stroke);
  background: var(--ym-glass);
  backdrop-filter: blur(16px) saturate(125%);
  -webkit-backdrop-filter: blur(16px) saturate(125%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.9);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--ym-accent);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease;
}

.ym-pill:hover {
  background: rgba(255, 255, 255, 0.66);
  transform: translateY(-1px);
}

/* ---------- 返回类文字按钮：hover 出玻璃底 ---------- */
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
  min-height: 34px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--ym-muted);
  cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.back-btn:hover {
  color: var(--ym-accent);
  background: rgba(255, 255, 255, 0.5);
  border-color: var(--ym-glass-stroke);
}

/* ---------- 分段选项卡：玻璃卡 + 选中淡紫 ---------- */
.mode-tab {
  box-sizing: border-box;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--ym-glass-stroke);
  background: rgba(255, 255, 255, 0.38);
  backdrop-filter: blur(16px) saturate(125%);
  -webkit-backdrop-filter: blur(16px) saturate(125%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.9);
  font-family: inherit;
  color: var(--ym-muted);
  text-align: left;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.mode-tab:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.55);
}

.mode-tab.active,
.tab.active {
  border: 1px solid var(--ym-active-stroke);
  background-color: var(--ym-active-bg);
  background-image: none;
  box-shadow:
    0 12px 28px rgba(111, 86, 177, 0.10),
    inset 0 1px 1px rgba(255, 255, 255, 0.95);
}

.mode-tab.active b,
.tab.active {
  color: var(--ym-ink);
}