/* ============================================================
 * restyle_global.css  ·  C组（家长中心 / 会员页 / 全局组件）
 * 全局组件呈现层重构 —— 设计令牌 / 字体 / .card / .btn / .tabbar
 * / .toast / 登录弹窗 .ld-* / 遮罩
 *
 * 范围纪律：
 *  - 本文件无页面前缀，但只允许写 :root 令牌 + 全站通用组件 class
 *    （.card / .btn / .tabbar / .toast / .ld-* ），
 *    不写任何业务页面专属选择器（如 .report-card / .plan-card / .pet-*）。
 *  - 不新增 JS、不改 DOM；所有规则为样式覆盖，源顺序需在 style.css 之后。
 *  - 配色 60-30-10：米白底 60% / 白卡 30% / 主橙强调 10%；
 *    主色仅 橙 #FF8C42 系 + 青绿 #2FA89E 系；无红色否定态。
 *  - 对比度按 WCAG AA：正文 ≥4.5:1、大字 ≥3:1。
 * ============================================================ */

/* ============ 1. 设计令牌微调（统一圆角 / 阴影 / 主色体系） ============ */
:root {
  /* 主色体系（60-30-10 中的 10% 强调） */
  --primary: #FF8C42;
  --primary-deep: #E8631A;        /* 大字/图标用深橙，橙底白字对比不足时改用此色做文字色 */
  --primary-soft: #FFF1E4;        /* 浅橙底：选中态/标签底 */
  --primary-line: #FFD9B8;        /* 浅橙描边 */
  /* 辅助色：青绿（成功/会员/对勾，唯一第二主色） */
  --secondary: #2FA89E;
  --secondary-deep: #1F8A81;
  --secondary-soft: #E4F5F3;
  /* 中性色 */
  --bg: #FFF8F0;
  --card: #FFFFFF;
  --text: #2D3436;
  --text-light: #5F6B6E;          /* 由 #636E72 微调，正文灰对比度 ≥4.5:1 */
  --text-faint: #8A9499;          /* 次要文字（≥14px 使用） */
  --line: #F0E6DA;
  /* 圆角统一 */
  --radius: 20px;
  --radius-sm: 14px;
  --radius-pill: 999px;
  /* 柔和阴影（橙色暖调，降低浓度更轻盈） */
  --shadow: 0 4px 16px rgba(255, 140, 66, 0.10);
  --shadow-lg: 0 10px 32px rgba(255, 140, 66, 0.16);
}

/* ============ 2. 全局字体栈（圆润无衬线 / 行高 1.5） ============ */
html, body {
  font-family: "Baloo 2", "Varela Round", -apple-system, "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, textarea, select {
  font-family: inherit;
  line-height: 1.5;
}
/* 英文学习内容（按钮/大字/标题）适当圆润字重 */
.btn, .tab-item, .card-title { font-weight: 700; }

/* ============ 3. 通用卡片 .card（圆角 20px + 柔和暖阴影） ============ */
.card {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid rgba(255, 217, 184, 0.35);
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.card-title {
  font-size: 17px;
  letter-spacing: 0.2px;
}

/* ============ 4. 通用主按钮 .btn（高 ≥56px / 圆角 20px / 按压反馈） ============ */
.btn {
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
  transition: transform 0.12s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.btn-primary {
  background: linear-gradient(135deg, #FF9A5C 0%, var(--primary) 45%, #F7731F 100%);
  color: #fff;
  box-shadow: 0 6px 18px rgba(255, 115, 31, 0.32);
}
.btn-primary:active {
  transform: scale(0.96);
  box-shadow: 0 3px 10px rgba(255, 115, 31, 0.28);
}
.btn-outline {
  background: #fff;
  color: var(--primary-deep);
  border: 2px solid var(--primary);
}
.btn-outline:active {
  transform: scale(0.96);
  background: var(--primary-soft);
}
.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

/* ============ 5. 底部导航 .tabbar（热区 ≥48px / safe-area / 高亮态） ============ */
.tabbar {
  background: rgba(255, 255, 255, 0.98);
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 24px rgba(45, 52, 54, 0.08);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  backdrop-filter: saturate(1.2) blur(8px);
  -webkit-backdrop-filter: saturate(1.2) blur(8px);
}
.tab-item {
  /* 整体可点区域 ≥48px 高（图标+文字整体，padding 撑热区而非放大图标） */
  min-height: 52px;
  min-width: 56px;
  justify-content: center;
  gap: 1px;
  padding: 6px 10px;
  border-radius: 14px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-faint);
  transition: color 0.2s ease, background 0.2s ease, transform 0.12s ease;
}
.tab-item .ticon {
  font-size: 22px;
  line-height: 1.1;
  filter: grayscale(0.35) opacity(0.75);
  transition: filter 0.2s ease, transform 0.2s ease;
}
.tab-item .ticon img,
.tabbar .ticon img {
  filter: grayscale(0.35) opacity(0.75);
  transition: filter 0.2s ease, transform 0.2s ease;
}
/* 当前 tab：橙色文字 + 浅橙胶囊底 + 图标回弹高亮（图标必配文字，不用裸图标） */
.tab-item.active {
  color: var(--primary-deep);
  background: var(--primary-soft);
  font-weight: 700;
}
.tab-item.active .ticon {
  filter: none;
  transform: translateY(-1px) scale(1.08);
}
.tab-item.active .ticon img,
.tabbar .tab-item.active .ticon img {
  filter: none;
  transform: translateY(-1px) scale(1.08);
}
.tab-item:active { transform: scale(0.94); }

/* ============ 6. 全局 Toast（暖黑圆角，统一提示风格） ============ */
.toast {
  background: rgba(45, 52, 54, 0.92);
  color: #fff;
  border-radius: 16px;
  padding: 13px 26px;
  font-size: 14px;
  font-weight: 600;
  max-width: 82%;
  text-align: center;
  line-height: 1.5;
  box-shadow: 0 8px 28px rgba(45, 52, 54, 0.28);
}

/* ============ 7. 全局遮罩/弹层风格统一（仅通用 overlay） ============ */
/* 登录弹窗遮罩：暖黑 + 轻微模糊，风格与全站弹窗一致 */
.ld-overlay {
  background: rgba(45, 40, 35, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* ============ 8. 登录弹窗 .ld-* 儿童化（圆润 / 暖橙 / 大按钮） ============ */
.ld-modal {
  border-radius: 24px;
  box-shadow: 0 16px 48px rgba(255, 120, 50, 0.22);
  overflow: hidden;
}
.ld-close {
  width: 34px;
  height: 34px;
  background: var(--primary-soft);
  color: var(--primary-deep);
  font-size: 17px;
  font-weight: 700;
}
.ld-header { padding: 30px 24px 18px; }
.ld-logo {
  width: 68px;
  height: 68px;
  border-radius: 22px;
  font-size: 30px;
  background: linear-gradient(135deg, #FF9A5C, #F7731F);
  box-shadow: 0 6px 18px rgba(255, 115, 31, 0.35);
}
.ld-title {
  font-size: 23px;
  font-weight: 800;
  background: linear-gradient(135deg, #FF9A5C, #F7731F);
  -webkit-background-clip: text;
  background-clip: text;
}
.ld-subtitle { font-size: 14px; color: var(--text-light); line-height: 1.6; }
.ld-tab { font-size: 15px; padding: 12px 0; }
.ld-tab.ld-tab-active { color: var(--primary-deep); font-weight: 700; }
.ld-tab.ld-tab-active::after {
  height: 4px;
  width: 32px;
  border-radius: 2px;
  background: linear-gradient(135deg, #FF9A5C, #F7731F);
}
/* 输入框：圆润大字号，聚焦橙色描边 */
.ld-input {
  height: 50px;
  border-radius: 16px;
  border: 2px solid #F0E6DA;
  background: #FFFCF8;
  font-size: 16px;
  padding: 0 16px;
}
.ld-input:focus {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255, 140, 66, 0.14);
}
.ld-pwd-toggle { width: 42px; height: 42px; }
/* 按钮：≥56px 高、胶囊圆角、按压反馈 */
.ld-btn {
  height: 56px;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.ld-btn-primary {
  background: linear-gradient(135deg, #FF9A5C 0%, var(--primary) 45%, #F7731F 100%);
  box-shadow: 0 6px 18px rgba(255, 115, 31, 0.32);
}
.ld-btn-primary:active { transform: scale(0.97); }
.ld-btn-outline {
  border: 2px solid var(--primary);
  color: var(--primary-deep);
  background: #fff;
}
.ld-btn-outline:active { transform: scale(0.97); background: var(--primary-soft); }
/* 错误提示：无红色否定态 —— 暖橙温和提示卡（配 ⚠ 语气，不使用红底红字） */
.ld-error {
  background: var(--primary-soft);
  border: 1px solid var(--primary-line);
  color: #B4500F;
  font-size: 14px;
  border-radius: 14px;
  padding: 10px 14px;
  line-height: 1.6;
}
.ld-switch-link { font-size: 14px; color: var(--text-light); }
.ld-switch-link a { color: var(--primary-deep); font-weight: 700; }
.ld-spinner { border-top-color: currentColor; }
.ld-btn .ld-spinner { border-top-color: #fff; }

/* 手机端底部弹层：圆角与安全区 */
@media screen and (max-width: 480px) {
  .ld-modal { border-radius: 24px 24px 0 0; padding-bottom: env(safe-area-inset-bottom); }
  .ld-btn { height: 56px; }
}

/* ============ P1全屏补丁：解除旧手机框 body 420px 帽（风 2026-09-02 17:32） ============
   css/style.css body{max-width:420px} 为旧手机居中框设计，与全屏自适应令冲突；
   pet.html 等引 style.css 的页面被压成420窄栏。此处统一解帽，margin:0 auto 居中失效后内容自然铺满。
   不引 style.css 的页面（pet_home/parent/town_map 等）本无此帽，零影响。 */
html, body {
  max-width: none !important;
  width: 100% !important;
}