:root { /* 定义主题变量 */
  --bg-start: #d8e9ff; /* 背景渐变起始色 */
  --bg-end: #f7fbff; /* 背景渐变结束色 */
  --glass: rgba(255, 255, 255, 0.55); /* 玻璃底色 */
  --shadow: 0 20px 60px rgba(31, 67, 135, 0.18); /* 统一阴影 */
  --blue: #0a84ff; /* iOS 蓝色主色 */
  --teal: #10b3a8; /* 青绿色辅色 */
  --orange: #ff7b4a; /* 橙色按钮色 */
  --text-main: #0f172a; /* 主文本色 */
  --text-sub: #4b5563; /* 次文本色 */
} /* 变量块结束 */

* { /* 全局通配选择器 */
  box-sizing: border-box; /* 边框盒模型 */
  margin: 0; /* 清除默认外边距 */
  padding: 0; /* 清除默认内边距 */
  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* 使用苹果风字体族 */
} /* 通配符设置结束 */

body { /* 页面主体样式 */
  min-height: 100vh; /* 最小高度铺满屏幕 */
  background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.7), transparent 40%), radial-gradient(circle at 75% 10%, rgba(10, 132, 255, 0.3), transparent 32%), radial-gradient(circle at 40% 80%, rgba(16, 179, 168, 0.28), transparent 38%), linear-gradient(150deg, var(--bg-start), var(--bg-end)); /* 叠加渐变模拟苹果磨玻璃光影 */
  color: var(--text-main); /* 设置文本主色 */
  overflow-y: auto; /* 允许整体纵向滚动，避免内容被裁剪 */
  padding: 27px; /* 页面留白（顶部增至原来1.5倍） */
  display: flex; /* 居中容器 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
} /* body 样式结束 */

.bg-fill { /* 背景纹理层 */
  position: fixed; /* 固定定位 */
  inset: 0; /* 全屏覆盖 */
  background: radial-gradient(circle at 15% 25%, rgba(255, 255, 255, 0.6), transparent 42%), radial-gradient(circle at 85% 10%, rgba(10, 132, 255, 0.25), transparent 35%), radial-gradient(circle at 60% 80%, rgba(16, 179, 168, 0.26), transparent 40%); /* 多重径向渐变营造玻璃光影 */
  filter: blur(24px); /* 模糊叠加柔和 */
  z-index: 0; /* 置于最底层 */
} /* 背景层结束 */

.app { /* 页面主体容器 */
  position: relative; /* 相对定位 */
  width: min(560px, 100%); /* 限制宽度，桌面端更舒展 */
  min-height: 92vh; /* 近似整屏高度 */
  display: flex; /* 布局 */
  flex-direction: column; /* 垂直排列 */
  gap: 12px; /* 区块间距 */
  z-index: 1; /* 高于背景 */
} /* 页面主体容器结束 */

.tab-switcher { /* 顶部 Tab 入口 */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 8px;
  margin: 0 4px 6px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 40px rgba(10, 20, 60, 0.12);
}
.tab-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 8px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.4);
  color: var(--text-sub);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.28s cubic-bezier(0.4, 0.0, 0.2, 1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.tab-btn .tab-icon { font-size: 16px; opacity: 0.78; transition: inherit; }
.tab-btn .ticket { color: #f6c343; }
.tab-btn .order { color: #7a3cf4; }
.tab-btn:hover { transform: translateY(-1px); }
.tab-btn:active { transform: translateY(0); }
.tab-btn.active { color: #fff; transform: translateY(-1px); }
.tab-btn.active .tab-icon { opacity: 1; transform: scale(1.08); }
.tab-btn.active[data-tab="coupon"] .tab-icon { color: #f6c343; }
.tab-btn.active:not([data-tab="coupon"]) .tab-icon { color: #fff; }
.tab-btn.active[data-tab="coupon"] { background: linear-gradient(120deg, #0a60ff, #0ab6ff); box-shadow: 0 14px 32px rgba(10, 132, 255, 0.25); }
.tab-btn.active[data-tab="order"] { background: linear-gradient(120deg, #6b2cf7, #b55bff); box-shadow: 0 14px 32px rgba(107, 44, 247, 0.22); }

.order-area { margin-top: 10px; display: none; flex-direction: column; gap: 12px; padding: 18px; }
.order-header { display: flex; flex-direction: column; gap: 4px; }
.order-title { font-size: 20px; font-weight: 800; }
.order-sub { color: var(--text-sub); font-size: 13px; }
.order-input-row { display: flex; gap: 10px; align-items: center; background: rgba(255,255,255,0.85); border-radius: 16px; padding: 8px 10px; border: 1px solid rgba(255,255,255,0.8); box-shadow: 0 10px 26px rgba(10, 132, 255, 0.12); }
.order-input { flex: 1; border: none; background: transparent; padding: 12px; font-size: 14px; font-weight: 400; outline: none; color: var(--text-main); } /* 对齐查券输入框字体样式 */
.order-btn { min-width: 88px; }
.order-status { display: none; border: 1px solid rgba(255,255,255,0.8); border-radius: 14px; padding: 14px; gap: 8px; align-items: center; background: rgba(255,255,255,0.9); box-shadow: inset 0 1px 0 rgba(255,255,255,0.6); }
.order-status-icon { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; }
.order-status--empty .order-status-icon { background: #e5f0ff; color: #3b82f6; }
.order-status--loading { background: rgba(255,255,255,0.95); color: #2563eb; }
.order-status--loading .order-status-icon { background: #dbeafe; color: #2563eb; }
.order-status--fail { background: #fff5f5; border-color: #ffdcdc; color: #d64545; }
.order-status--fail .order-status-icon { background: #ffdcdc; color: #d64545; }
.order-status--success { background: #f1fff5; border-color: #c9f3d6; color: #1fa366; }
.order-status--success .order-status-icon { background: #c9f3d6; color: #1fa366; }
.order-result-list { display: flex; flex-direction: column; gap: 12px; padding-right: 4px; max-height: 70vh; overflow-y: auto; }
.order-card { background: rgba(255,255,255,0.9); border: 1px solid rgba(255,255,255,0.85); border-radius: 16px; padding: 14px; box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12); animation: rise 0.5s ease forwards; opacity: 0; transform: translateY(12px); }
.order-card .order-meta { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-sub); margin-bottom: 6px; flex-wrap: wrap; }
.order-badge { padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; gap: 6px; }
.badge-success { background: #e8f9ef; color: #1fa366; border: 1px solid #c9f3d6; }
.badge-fail { background: #fff1f1; color: #d64545; border: 1px solid #ffd2d2; }
.order-parent { font-size: 12px; color: var(--text-sub); }
.order-body { display: grid; grid-template-columns: 92px 1fr; gap: 12px; align-items: center; margin-bottom: 10px; }
.order-thumb { width: 92px; height: 92px; border-radius: 12px; background: #e8ecf0; object-fit: cover; }
.order-title { font-size: 15px; font-weight: 800; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.order-shop { font-size: 12px; color: var(--text-sub); display: flex; gap: 6px; align-items: center; margin-top: 4px; }
.order-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; background: #f7f9ff; border-radius: 12px; padding: 10px; font-size: 13px; }
.order-grid .label { color: var(--text-sub); }
.order-grid .value { font-weight: 700; }
.status-red { color: #d64545; }
.status-green { color: #1fa366; }
.status-orange { color: #f08a24; }
.order-tips { background: linear-gradient(135deg, #eef7ff, #e8f9ff); border: 1px solid rgba(255,255,255,0.9); border-radius: 14px; padding: 12px 14px; color: var(--text-sub); font-size: 13px; box-shadow: 0 12px 26px rgba(10, 132, 255, 0.1); }
.order-tip-title { font-weight: 800; color: var(--text); margin-bottom: 6px; position: relative; padding-left: 10px; }
.order-tip-title::before { content: ''; position: absolute; left: 0; top: 4px; width: 3px; height: 14px; background: #0a84ff; border-radius: 6px; }
.order-tips ul { margin: 0; padding-left: 16px; display: flex; flex-direction: column; gap: 4px; }

@keyframes rise {
  to { opacity: 1; transform: translateY(0); }
}
.app-header { /* 应用头部 */
  display: flex; /* 横向布局 */
  align-items: center; /* 垂直居中 */
  padding: 12px 16px; /* 内边距 */
  margin: 0 4px 6px; /* 外边距 */
  border-radius: 18px; /* 圆角 */
  gap: 12px; /* 间距 */
  background: var(--glass); /* 玻璃底色 */
  backdrop-filter: blur(12px) saturate(1.2); /* 背景模糊 */
  border: 1px solid rgba(255, 255, 255, 0.5); /* 边框 */
} /* 头部结束 */

.logo-wrap { /* logo 包裹 */
  width: 48px; /* 宽度 */
  height: 48px; /* 高度 */
  border-radius: 14px; /* 圆角 */
  overflow: hidden; /* 裁剪溢出 */
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12); /* 阴影 */
} /* logo 包裹结束 */

.logo-img { /* logo 图片 */
  width: 100%; /* 占满容器 */
  height: 100%; /* 占满容器 */
  object-fit: cover; /* 等比填充 */
} /* logo 图片结束 */

.title-block { /* 标题容器 */
  flex: 1; /* 占据剩余空间 */
  display: flex; /* 垂直排列 */
  flex-direction: column; /* 方向改为竖 */
  gap: 2px; /* 间距 */
} /* 标题容器结束 */

.title-main { /* 主标题样式 */
  font-size: 18px; /* 字号 */
  font-weight: 800; /* 加粗 */
} /* 主标题结束 */

.title-sub { /* 副标题样式 */
  font-size: 12px; /* 字号 */
  color: var(--text-sub); /* 颜色 */
  letter-spacing: 0.4px; /* 字间距 */
} /* 副标题结束 */

.more-dots { /* 右侧占位符 */
  font-size: 20px; /* 字号 */
  color: #1f2937; /* 颜色 */
  letter-spacing: 2px; /* 点间距 */
  margin-left: 8px; /* 左外边距 */
} /* 占位符结束 */

.content { /* 主内容外层 */
  flex: 1; /* 占据剩余空间 */
  padding: 0 4px 18px; /* 内边距 */
  overflow-y: auto; /* 允许滚动 */
} /* 主内容结束 */

.glass { /* 通用玻璃风格 */
  background: var(--glass); /* 玻璃底色 */
  backdrop-filter: blur(14px) saturate(1.1); /* 背景模糊 */
  border: 1px solid rgba(255, 255, 255, 0.55); /* 边框 */
  box-shadow: var(--shadow); /* 阴影 */
} /* 玻璃类结束 */

.hero { /* 顶部英雄卡片 */
  padding: 18px; /* 内边距 */
  border-radius: 18px; /* 圆角 */
  margin-bottom: 14px; /* 下间距 */
  display: flex; /* 布局 */
  flex-direction: column; /* 垂直排列 */
  gap: 12px; /* 间距 */
} /* 英雄卡片结束 */

.hero-text { /* 文案区域 */
  display: flex; /* 布局 */
  flex-direction: column; /* 垂直排列 */
  gap: 6px; /* 间距 */
} /* 文案区域结束 */

.hero-title { /* 英雄主标题 */
  font-size: 20px; /* 字号 */
  font-weight: 800; /* 加粗 */
} /* 主标题结束 */

.hero-desc { /* 描述文本 */
  font-size: 13px; /* 字号 */
  color: var(--text-sub); /* 颜色 */
  line-height: 1.5; /* 行高 */
} /* 描述结束 */

.input-row { display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, 0.7); border-radius: 14px; padding: 8px; border: 1px solid rgba(255, 255, 255, 0.9); } /* 输入行样式 */

.input { flex: 1; border: none; background: transparent; padding: 12px; font-size: 14px; color: var(--text-main); outline: none; } /* 文本输入框 */

.pill-btn { border: none; background: linear-gradient(120deg, #0a84ff, #5ac8fa); color: #fff; padding: 12px 18px; border-radius: 999px; font-weight: 700; font-size: 14px; box-shadow: 0 12px 25px rgba(10, 132, 255, 0.35); cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease; width: 100%; max-width: 110px; text-align: center; } /* 胶囊按钮统一尺寸 */

.pill-btn:hover { /* 鼠标悬停 */
  transform: translateY(-1px); /* 轻微上移 */
  box-shadow: 0 16px 28px rgba(10, 132, 255, 0.45); /* 阴影增强 */
} /* 悬停结束 */

.cta-row { /* 次级按钮行 */
  display: flex; /* 横向布局 */
  gap: 10px; /* 间距 */
} /* 按钮行结束 */

.ghost-btn { /* 玻璃按钮 */
  flex: 1; /* 平分宽度 */
  border: 1px solid rgba(255, 255, 255, 0.7); /* 边框 */
  border-radius: 12px; /* 圆角 */
  padding: 12px; /* 内边距 */
  background: rgba(255, 255, 255, 0.45); /* 玻璃背景 */
  color: var(--text-main); /* 文字颜色 */
  font-weight: 600; /* 字重 */
  cursor: pointer; /* 指针 */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08); /* 阴影 */
  backdrop-filter: blur(10px); /* 模糊 */
  transition: transform 0.18s ease, box-shadow 0.18s ease; /* 过渡 */
} /* 玻璃按钮结束 */

.ghost-btn.alt { /* 备用配色按钮 */
  color: #0a84ff; /* 蓝色文字 */
  border-color: rgba(10, 132, 255, 0.4); /* 蓝色边框 */
} /* 备用按钮结束 */

.ghost-btn:hover { /* 悬停效果 */
  transform: translateY(-1px); /* 上移 */
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.1); /* 阴影增强 */
} /* 悬停结束 */

.result-area { /* 结果区域容器 */
  padding: 14px; /* 内边距 */
  border-radius: 16px; /* 圆角 */
  display: none; /* 初始隐藏 */
  flex-direction: column; /* 垂直排列 */
  gap: 12px; /* 间距 */
} /* 结果区域结束 */

.skeleton { /* 骨架屏容器 */
  display: none; /* 默认隐藏 */
  align-items: center; /* 垂直居中 */
  gap: 12px; /* 间距 */
} /* 骨架屏结束 */

.skeleton-img { /* 骨架图片块 */
  width: 92px; /* 宽度 */
  height: 92px; /* 高度 */
  border-radius: 14px; /* 圆角 */
  background: linear-gradient(90deg, #f3f4f6 0%, #e5e7eb 50%, #f3f4f6 100%); /* 渐变底色 */
  animation: shimmer 1.2s infinite; /* 闪动效果 */
} /* 骨架图片结束 */

.skeleton-lines { /* 骨架文字块 */
  flex: 1; /* 占满 */
  display: flex; /* 布局 */
  flex-direction: column; /* 垂直排列 */
  gap: 10px; /* 间距 */
} /* 骨架文字块结束 */

.skeleton-line { /* 骨架行 */
  height: 12px; /* 行高 */
  border-radius: 999px; /* 圆角 */
  background: linear-gradient(90deg, #f3f4f6 0%, #e5e7eb 50%, #f3f4f6 100%); /* 渐变底色 */
  animation: shimmer 1.2s infinite; /* 闪动效果 */
} /* 骨架行结束 */

.w-70 { width: 70%; } /* 宽度70% */
.w-90 { width: 90%; } /* 宽度90% */
.w-50 { width: 50%; } /* 宽度50% */

@keyframes shimmer { /* 闪动动画 */
  0% { background-position: -200px 0; } /* 初始位置 */
  100% { background-position: 200px 0; } /* 结束位置 */
} /* 动画结束 */

.result-header { /* 结果头部 */
  display: flex; /* 横向布局 */
  align-items: center; /* 垂直居中 */
  gap: 10px; /* 间距 */
} /* 结果头部结束 */

.tag { /* 标签到 */
  background: linear-gradient(120deg, #0a84ff, #5ac8fa); /* 渐变背景 */
  color: #fff; /* 白字 */
  padding: 6px 10px; /* 内边距 */
  border-radius: 10px; /* 圆角 */
  font-size: 12px; /* 字号 */
  font-weight: 700; /* 字重 */
} /* 标签结束 */

.result-title { /* 结果标题 */
  font-weight: 800; /* 加粗 */
} /* 标题结束 */

.result-extra { /* 状态描述 */
  margin-left: auto; /* 推到右侧 */
  color: var(--text-sub); /* 颜色 */
  font-size: 12px; /* 字号 */
} /* 状态结束 */

.product-card { /* 商品卡片容器 */
  display: flex; /* 横向布局 */
  gap: 14px; /* 间距 */
  align-items: center; /* 垂直居中 */
} /* 商品卡片结束 */

.product-img-wrap { /* 图片包裹 */
  width: 92px; /* 宽度 */
  height: 92px; /* 高度 */
  border-radius: 14px; /* 圆角 */
  overflow: hidden; /* 裁剪 */
  background: #e5e7eb; /* 背景占位 */
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08); /* 阴影 */
} /* 图片包裹结束 */

.product-img { /* 商品图片 */
  width: 100%; /* 全宽 */
  height: 100%; /* 全高 */
  object-fit: cover; /* 等比裁剪 */
} /* 商品图片结束 */

.product-info { /* 信息区域 */
  flex: 1; /* 占满 */
  display: flex; /* 布局 */
  flex-direction: column; /* 垂直 */
  gap: 6px; /* 间距 */
} /* 信息结束 */

.shop-line { /* 店铺行 */
  font-size: 12px; /* 字号 */
  color: var(--text-sub); /* 颜色 */
} /* 店铺行结束 */

.product-name { /* 商品名称 */
  font-weight: 700; /* 字重 */
  line-height: 1.4; /* 行高 */
} /* 商品名称结束 */

.price-line { /* 价格行 */
  display: flex; /* 布局 */
  gap: 10px; /* 间距 */
  align-items: baseline; /* 基线对齐 */
} /* 价格行结束 */

.price-now { /* 现价样式 */
  color: #e11d48; /* 粉红红色 */
  font-weight: 800; /* 加粗 */
  font-size: 20px; /* 字号 */
} /* 现价结束 */

.price-old { /* 原价样式 */
  color: var(--text-sub); /* 颜色 */
  text-decoration: line-through; /* 删除线 */
  font-size: 13px; /* 字号 */
} /* 原价结束 */

.meta-line { /* 元信息行 */
  display: flex; /* 布局 */
  gap: 12px; /* 间距 */
  color: var(--text-sub); /* 颜色 */
  font-size: 12px; /* 字号 */
} /* 元信息结束 */

.meta-icon { /* 元信息图标 */
  width: 14px; /* 宽度 */
  height: 14px; /* 高度 */
  fill: currentColor; /* 使用文本色 */
  margin-right: 4px; /* 右间距 */
  vertical-align: -2px; /* 对齐基线 */
} /* 图标结束 */

.coupon-row { /* 优惠券行 */
  display: grid; /* 网格布局 */
  grid-template-columns: repeat(2, 1fr); /* 两列等分 */
  gap: 10px; /* 间距 */
  margin-top: 12px; /* 与销量/评论留白 */
} /* 优惠券行结束 */

.coupon-btn { /* 优惠按钮 */
  padding: 14px 12px; /* 内边距 */
  border-radius: 14px; /* 圆角 */
  border: none; /* 无边框 */
  color: #fff; /* 白字 */
  font-weight: 700; /* 字重 */
  font-size: 14px; /* 字号 */
  cursor: pointer; /* 指针 */
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12); /* 阴影 */
  transition: transform 0.18s ease, box-shadow 0.18s ease; /* 过渡 */
} /* 优惠按钮结束 */

.coupon-btn.orange { /* 橙色按钮 */
  background: linear-gradient(135deg, #ff9f0a, var(--orange)); /* 渐变背景 */
} /* 橙色按钮结束 */

.coupon-btn.teal { /* 青色按钮 */
  background: linear-gradient(135deg, #30d158, var(--teal)); /* 渐变背景 */
} /* 青色按钮结束 */

.coupon-btn:hover { /* 悬停效果 */
  transform: translateY(-1px); /* 上移 */
  box-shadow: 0 16px 28px rgba(0, 0, 0, 0.16); /* 阴影增强 */
} /* 悬停结束 */

.toast { /* 提示气泡 */
  position: fixed; /* 固定定位 */
  left: 50%; /* 居中 */
  bottom: 48px; /* 底部距离 */
  transform: translateX(-50%) translateY(20px); /* 初始位移 */
  padding: 12px 18px; /* 内边距 */
  border-radius: 12px; /* 圆角 */
  color: #fff; /* 白字 */
  background: rgba(17, 17, 17, 0.85); /* 深色背景 */
  opacity: 0; /* 初始透明 */
  pointer-events: none; /* 禁止事件 */
  transition: opacity 0.25s ease, transform 0.25s ease; /* 过渡 */
  z-index: 10; /* 层级 */
  font-size: 14px; /* 字号 */
} /* 提示结束 */

.toast.show { /* 显示态 */
  opacity: 1; /* 变为不透明 */
  transform: translateX(-50%) translateY(0); /* 归位 */
} /* 显示态结束 */

.modal-mask { /* 弹窗遮罩 */
  position: fixed; /* 固定 */
  inset: 0; /* 覆盖全屏 */
  background: rgba(0, 0, 0, 0.35); /* 半透明黑 */
  display: none; /* 初始隐藏 */
  align-items: center; /* 居中 */
  justify-content: center; /* 居中 */
  z-index: 9; /* 层级 */
} /* 遮罩结束 */

.modal { /* 弹窗主体 */
  width: 88%; /* 宽度 */
  max-width: 420px; /* 最大宽度稍增 */
  border-radius: 20px; /* 圆角 */
  overflow: hidden; /* 裁剪 */
  max-height: 80vh; /* 限制高度以便可滚动 */
} /* 弹窗结束 */

.modal-header { /* 弹窗头 */
  display: flex; /* 布局 */
  align-items: center; /* 垂直居中 */
  justify-content: space-between; /* 两端对齐 */
  padding: 16px; /* 内边距 */
  border-bottom: 1px solid rgba(255, 255, 255, 0.5); /* 底边框 */
} /* 弹窗头结束 */

.modal-title { /* 弹窗标题 */
  font-weight: 800; /* 加粗 */
  font-size: 16px; /* 字号 */
} /* 弹窗标题结束 */

.close-btn { /* 关闭按钮 */
  border: none; /* 无边框 */
  background: rgba(255, 255, 255, 0.6); /* 背景 */
  width: 32px; /* 宽度 */
  height: 32px; /* 高度 */
  border-radius: 50%; /* 圆形 */
  font-size: 20px; /* 字号 */
  cursor: pointer; /* 指针 */
  color: #111; /* 颜色 */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12); /* 阴影 */
} /* 关闭按钮结束 */

.modal-body { /* 弹窗正文 */
  padding: 14px 16px 6px; /* 内边距 */
  color: var(--text-main); /* 文本色 */
  max-height: 52vh; /* 限制正文高度 */
  overflow-y: auto; /* 允许滚动 */
} /* 弹窗正文结束 */

.steps { /* 步骤列表 */
  display: flex; /* 布局 */
  flex-direction: column; /* 垂直排列 */
  gap: 10px; /* 间距 */
  padding-left: 20px; /* 左缩进 */
  margin-bottom: 12px; /* 下间距 */
  color: var(--text-main); /* 颜色 */
} /* 步骤结束 */

.support { /* 支持格式容器 */
  background: rgba(255, 255, 255, 0.6); /* 背景 */
  border-radius: 12px; /* 圆角 */
  padding: 12px; /* 内边距 */
  border: 1px solid rgba(255, 255, 255, 0.7); /* 边框 */
  color: var(--text-sub); /* 字色 */
  font-size: 13px; /* 字号 */
} /* 支持容器结束 */

.support-title { /* 支持标题 */
  font-weight: 700; /* 字重 */
  margin-bottom: 6px; /* 下间距 */
  color: var(--text-main); /* 颜色 */
} /* 支持标题结束 */

.support ul { /* 列表样式 */
  padding-left: 16px; /* 左缩进 */
  display: flex; /* 布局 */
  flex-direction: column; /* 垂直排列 */
  gap: 4px; /* 间距 */
} /* 列表结束 */

.support-img-wrap { /* 支持图容器 */
  margin-top: 8px; /* 上间距 */
  border: 1px solid rgba(255, 255, 255, 0.9); /* 细边框 */
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12); /* 阴影 */
  border-radius: 12px; /* 圆角 */
  overflow: hidden; /* 裁剪 */
  background: rgba(255, 255, 255, 0.85); /* 背景 */
} /* 容器结束 */

.support-img { /* 支持图样式 */
  width: 100%; /* 全宽 */
  display: block; /* 块级 */
} /* 支持图结束 */

.modal-footer { /* 弹窗底部 */
  padding: 12px 16px 16px; /* 内边距 */
} /* 底部结束 */

.pill-btn.full { /* 全宽按钮 */
  width: 100%; /* 宽度 100% */
  text-align: center; /* 居中 */
} /* 全宽结束 */

.copy-tip { /* 复制提示区域 */
  display: flex; /* 布局 */
  flex-direction: column; /* 竖向 */
  gap: 8px; /* 间距 */
  align-items: center; /* 居中 */
} /* 复制提示结束 */

.copy-tip-img { /* 提示图片占位 */
  width: 100%; /* 宽度 */
  border-radius: 12px; /* 圆角 */
  overflow: hidden; /* 裁剪 */
  min-height: 180px; /* 最小高度 */
  background: center/contain no-repeat url('copy-tip.png'), linear-gradient(135deg, #f8fbff, #e8f5ff); /* 背景 */
  border: 1px solid rgba(255,255,255,0.8); /* 边框 */
  box-shadow: 0 8px 18px rgba(0,0,0,0.08); /* 阴影 */
} /* 图片占位结束 */

.copy-tip-text { /* 提示文字 */
  font-size: 16px; /* 字号 */
  font-weight: 700; /* 加粗 */
  color: var(--text-main); /* 颜色 */
  text-align: center; /* 居中 */
  line-height: 1.5; /* 行高 */
  padding: 4px 8px; /* 内边距 */
} /* 提示文字结束 */

@media (max-width: 480px) { /* 小屏适配 */
  body { padding: 8px; } /* 缩小外边距 */
  .app { min-height: 96vh; } /* 拉长高度 */
  .hero { padding: 16px; } /* 缩小内边距 */
} /* 媒体查询结束 */

@media (min-width: 900px) { /* 桌面端适配 */
  .app { width: 640px; } /* 桌面更宽 */
  body { padding: 26px; } /* 桌面留白增大 */
} /* 桌面媒体查询结束 */