/* 全局统一样式 - 如歌珠宝全站通用 */
/* 1. 基础重置 & 全局配置（新增宽度强制锁定） */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html, body {
  width: 100%;
  overflow-x: hidden !important; /* 禁止横向滚动，强制页面宽度不溢出 */
}
body {
  margin: 0;
  padding: 12px;
  background: #f8f5e6; /* 统一背景色 */
  font-family: Arial, "微软雅黑";
  line-height: 1.6;
  color: #333; /* 基础文字色 */
}
/* 页面主体容器 - 强制统一宽度+居中（最高优先级） */
.main {
  max-width: 600px !important; /* 核心宽度强制锁定，所有页面统一 */
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 15px !important; /* 统一左右内边距，避免内容贴边 */
  box-sizing: border-box !important;
}

/* 2. 核心UI组件样式 */
/* 卡片容器 */
.box {
  background: #fff;
  border: 1px solid #d4af37; /* 主色调：金色 */
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 12px;
}
/* 标题样式 */
.title {
  font-weight: bold;
  color: #b8860b; /* 深金色 */
  margin-bottom: 10px;
  text-align: center;
  font-size: 18px;
}
.page-title {
  font-size: 24px;
  color: #b8860b;
  font-weight: bold;
  text-align: center;
  margin: 10px 0 15px;
  text-shadow: 0 1px 3px rgba(184,134,11,0.2);
}
.sub-title {
  font-size: 16px;
  color: #666;
  text-align: center;
  margin-bottom: 10px;
}

/* 按钮样式（统一） */
.btn {
  display: block;
  width: 100%;
  background: #d4af37;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 14px;
  margin: 6px 0;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  font-size: 18px;
}
.btn:active {
  background: #b8860b;
}
/* 强调按钮（返回首页等） */
.btn-primary {
  max-width: 500px;
  margin: 20px auto 10px;
  padding: 16px;
  font-size: 20px;
  border-radius: 12px;
  background: linear-gradient(60deg,#d4af37,#b8860b);
  box-shadow: 0 4px 12px rgba(212,175,55,0.3);
}
.btn-primary:active {
  background: linear-gradient(60deg,#b8860b,#996600);
  transform: scale(0.98);
}

/* 3. 通用模块样式 */
/* 会员等级链接 */
.level-link {
  display: block;
  width: 100%;
  background: #fdfbf7;
  border: 1px solid #d4af37;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 8px;
  text-align: center;
  text-decoration: none;
  color: #333;
  transition: all 0.2s ease;
}
.level-link:hover, .level-link:active {
  background: #f8f0e1;
  box-shadow: 0 2px 8px rgba(212,175,55,0.1);
}
.level-title {
  color: #b8860b;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 4px;
}
.level-price {
  color: #333;
  font-size: 16px;
  margin-bottom: 3px;
}
.level-desc {
  font-size: 14px;
  color: #666;
}

/* 二维码模块 */
.qrcode-box {
  text-align: center;
  padding: 10px 0;
}
.qrcode-box img {
  width: 250px;
  max-width: 90%;
  height: auto;
  display: block;
  margin: 0 auto 10px;
  border-radius: 8px;
  border: 1px solid #d4af37;
}
.qrcode-tip {
  color: #b8860b;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}

/* 文本样式 */
.text-center {
  font-size: 15px;
  color: #666;
  text-align: center;
  line-height: 1.8;
}

/* 4. 响应式适配（全局通用） */
@media screen and (max-width: 375px) {
  .page-title { font-size: 22px; }
  .btn-primary { font-size: 18px; padding: 14px; }
  .level-title { font-size: 16px; }
  .btn { font-size: 16px; padding: 12px; }
  .main {
    padding: 0 10px !important; /* 小屏仅调整内边距，宽度仍强制600px上限 */
  }
}

/* 补充：折叠模块宽度强制对齐（适配会员体系页面） */
.fold-wrap {
  max-width: 600px !important;
  width: 100% !important;
  margin: 0 auto 15px !important;
}
/* global.css 中补充输入框全局样式 */
.input {
  width: 100%;
  padding: 14px 12px; /* 内边距上下14px，左右12px，保证输入舒适 */
  border: 1px solid #d4af37; /* 金色边框，与品牌风格统一 */
  border-radius: 10px; /* 圆角与按钮一致 */
  margin: 8px 0; /* 上下间距统一 */
  font-size: 15px; /* 字体大小适配移动端 */
  background: #fdfbf7; /* 浅金色背景，与页面底色呼应 */
  color: #333; /* 输入文字颜色 */
  box-sizing: border-box;
}
/* 聚焦状态：高亮边框+轻微阴影，提升交互反馈 */
.input:focus {
  outline: none; /* 清除默认聚焦边框 */
  border-color: #b8860b; /* 深金色边框，突出聚焦状态 */
  box-shadow: 0 0 0 2px rgba(184, 134, 11, 0.1); /* 浅金色外阴影，不刺眼 */
}
/* placeholder 样式：统一颜色，提升可读性 */
.input::placeholder {
  color: #999; /* 浅灰色，既不突兀又能看清 */
  font-size: 14px; /* 比输入文字小1px，区分度更高 */
}
/* 密码框特殊适配（与手机号框视觉一致） */
.input[type="password"] {
  font-family: "Microsoft Yahei", sans-serif; /* 统一字体，避免密码框字体异常 */
}