/* ============================================================
 * 美团商城 · 统一设计基础样式 (ui-base.css)
 * 作用：定义全站设计 token + 基础重置 + 表单/组件归一化
 * 加载位置：各页面 <head> 内，放在页面自有 <style> 之前
 *         （页面内联样式优先级更高，可覆盖本文件，不会破坏既有布局）
 * ============================================================ */

:root {
  /* 品牌主色：美团金 */
  --brand: #ffd100;
  --brand-2: #ffb800;
  --brand-grad: linear-gradient(90deg, #ffd100 0%, #ffb800 100%);
  /* 强调色 */
  --accent: #ff8c00;
  --accent-2: #ff6b00;
  /* 中性色 */
  --bg: #f5f6f8;
  --card: #ffffff;
  --text: #1a1a1a;
  --text-2: #333333;
  --text-3: #666666;
  --text-4: #999999;
  --border: #f0f0f0;
  --border-2: #e5e5e5;
  /* 成功/警告 */
  --success: #52c41a;
  --warning: #fa8c16;
  --danger: #ff4d4f;
  /* 圆角 */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 14px;
  --r-pill: 999px;
  /* 阴影 */
  --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.05);
  --shadow-btn: 0 4px 12px rgba(255, 184, 0, 0.3);
  /* 字号 */
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-lg: 17px;
  --fs-xl: 20px;
  /* 间距 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  min-height: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue",
    "Microsoft YaHei", sans-serif;
  background-color: var(--bg);
  color: var(--text);
  font-size: var(--fs-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* 容器归一化（页面已定义则覆盖） */
.container {
  max-width: 600px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
}

/* 卡片归一化 */
.card {
  background: var(--card);
  border-radius: var(--r-lg);
}

/* 表单控件归一化 */
input,
select,
textarea,
button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

input[type="text"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input:not([type]),
select,
textarea {
  width: 100%;
  border: 1px solid var(--input-border, var(--border-2));
  border-radius: var(--r-sm);
  padding: 10px 12px;
  background: var(--input-bg, #fff);
  color: var(--input-color, inherit);
  outline: none;
  transition: border-color 0.2s;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--brand-2);
}

textarea {
  resize: vertical;
  min-height: 80px;
}

/* 主按钮归一化（页面未定义时生效） */
.btn-primary,
button.primary,
.submit-btn {
  border: none;
  border-radius: 22px;
  background: var(--brand-grad);
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s, opacity 0.15s;
  box-shadow: var(--shadow-btn);
}

.btn-primary:active,
.submit-btn:active {
  transform: scale(0.97);
}

/* 描边按钮 */
.btn-outline,
button.outline {
  border: 1.5px solid var(--border-2);
  background: #fff;
  border-radius: 22px;
  color: var(--text-2);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-outline:active {
  background: #fafafa;
}

/* 链接 */
a {
  color: var(--accent);
  text-decoration: none;
}

/* 图片自适应 */
img {
  max-width: 100%;
  display: block;
}

/* 隐藏滚动条（横向溢出保护） */
body {
  overflow-x: hidden;
}