/* ============================================================
 * 组件.css — 公共组件层（类开发阶段0 2026-08-29）
 * 定义一次、处处引用：图标尺寸档位 / 用户头像
 * 依赖：设计令牌.css 的 --图标-* 变量
 * ============================================================ */

/* ---- 图标尺寸档位：img 引用类名替代 w-N/h-N 硬编码 ---- */
.图标-小   { width: var(--图标-小);   height: var(--图标-小); }
.图标-标准 { width: var(--图标-标准); height: var(--图标-标准); }
.图标-大   { width: var(--图标-大);   height: var(--图标-大); }
.图标-特大 { width: var(--图标-特大); height: var(--图标-特大); }

/* ---- 悬浮按钮（FAB）：直径54 主绿实心圆 + 淡绿投影 + 白图标居中 ----
   定位（fixed 坐标）/背景色/尺寸均可被使用处内联覆盖；
   内嵌 img 默认 图标-标准 档位，白色图标由使用处 filter 白色化 */
.悬浮按钮 {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--primary);
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(34, 160, 107, 0.35);
}
.悬浮按钮 img {
  width: var(--图标-标准);
  height: var(--图标-标准);
  display: block;
}

/* ---- 加载动画块（列表加载中通用形态：转圈 + 文字） ----
   替代各页私有的 .加载中 定义；用法 <div class="加载动画">加载中...</div> */
.加载动画 {
  text-align: center;
  padding: 48px 20px;
  color: var(--muted-2-foreground);
  font-size: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.加载动画::before {
  content: '';
  width: 28px;
  height: 28px;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: 组件层spinner .7s linear infinite;
}
@keyframes 组件层spinner { to { transform: rotate(360deg); } }

/* ---- 用户头像组件（配合 组件.js 的 渲染用户头像 使用，也可单独用类） ----
   尺寸由使用处传 --头像尺寸 内联变量覆盖，默认 40px */
.用户头像 {
  width: var(--头像尺寸, 40px);
  height: var(--头像尺寸, 40px);
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.用户头像 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.用户头像-首字 {
  font-weight: 700;
  color: #fff;
  font-size: calc(var(--头像尺寸, 40px) * 0.38);
  line-height: 1;
  user-select: none;
}

/* ===== 组件化阶段 2：返回按钮 / 提示条 / 加载态 / 空状态 ===== */
/* 顶栏返回按钮统一组件（2026-09-03 问题1：7页返回键各写各的 → 组件化统一行为，
   默认圆钮样式；复现原稿页传 样式:裸图标 + 图标/图标宽 保留原稿外观） */
.组件顶栏返回 {
  display: inline-flex; align-items: center; justify-content: center;
  border: none; cursor: pointer; padding: 0; flex-shrink: 0;
}
.组件顶栏返回-圆钮 {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--card, #FFFFFF);
  border: 1px solid var(--border, #E5E7EB);
  box-shadow: 0 1px 3px rgba(120, 100, 60, 0.08);
  transition: transform 0.15s;
}
.组件顶栏返回-圆钮:active { transform: scale(0.94); }
.组件顶栏返回-裸图标 { background: none; border: none; width: auto; height: auto; }
.组件顶栏返回 img { display: block; }
.组件返回按钮 {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: none; cursor: pointer;
  padding: 8px; margin-left: -8px;
  color: var(--foreground); font-size: 16px; line-height: 0;
}
.组件返回按钮 img { width: var(--图标-标准); height: var(--图标-标准); }
.组件提示条 {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 12%; z-index: 9999; max-width: 80vw;
  padding: 10px 18px; border-radius: var(--radius-md);
  background: rgba(32, 34, 33, 0.92); color: #FFFFFF;
  font-size: 14px; display: none; box-sizing: border-box;
}
.组件提示-success { background: rgba(34, 160, 107, 0.95); }
.组件提示-error { background: rgba(192, 57, 43, 0.95); }
.组件提示-warning { background: rgba(245, 158, 11, 0.95); }
.组件加载态 { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 0; gap: 10px; }
.组件加载圈 {
  width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid var(--muted); border-top-color: var(--primary);
  animation: 组件加载旋转 0.8s linear infinite;
}
@keyframes 组件加载旋转 { to { transform: rotate(360deg); } }
.组件加载文案 { font-size: 13px; color: var(--muted-2-foreground); }
/* ---- 组件页面加载遮罩（2026-09-04 收编 20 页内联 #页面加载中 全屏形态）----
   全屏外壳类；内部复用 组件加载圈/组件加载文案（作用域内覆写为全屏基准 32px/14px）。
   用法：<div id="页面加载中" class="组件页面加载遮罩"><div class="组件加载圈"></div><div class="组件加载文案">正在加载...</div></div>
   id 保留给各页既有移除 JS（getElementById('页面加载中')）；各页原 @keyframes 旋转 被遮罩外
   其他 spinner 复用，故收编不动各页 style 块，仅替换遮罩三个 div 的内联样式为组件类 */
.组件页面加载遮罩 {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; background: var(--background);
}
.组件页面加载遮罩 .组件加载圈 { width: 32px; height: 32px; border-color: var(--border); }
.组件页面加载遮罩 .组件加载文案 { font-size: 14px; }
.组件空状态 { display: flex; flex-direction: column; align-items: center; padding: 36px 0; gap: 10px; color: var(--muted-2-foreground); font-size: 13px; }
.组件空状态 img { width: 64px; opacity: 0.6; }

/* ===== 组件化：底部导航栏（2026-09-02 收编，此前 4 页各写各的：3 套图标 + 3 套定位 CSS，
   管理后台 left:20/right:20/max-width 三者冲突致宽屏贴左——统一用 left:50%+translateX 居中修复）
   定位：窄屏左右各留 20px、宽屏封顶 420px 居中、顶部圆角浮起、贴底带安全区 ===== */
.组件底部导航 {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 0; width: calc(100% - 40px); max-width: var(--容器宽度, 420px);
  height: calc(71px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--card, #FDFBF6);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -2px 12px rgba(120,100,60,0.08);
  display: flex; z-index: 50;
}
.组件导航项 {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; border: none; background: none; cursor: pointer;
  font-size: 10.5px; color: #868580; padding: 0;
}
.组件导航项 img { width: 26px; height: 26px; object-fit: contain; }
.组件导航项.激活 { color: var(--primary, #22A06B); font-weight: 600; }

/* ============ 空态展示（F1·2026-09-06 夜间组件化入仓）============ */
/* 视觉基准=新旧双站 A/B 实测的旧版**实际渲染值**（令牌 .空状态 与 tailwind 工具类同权冲突时令牌胜）：
   padding 48/16 + var(--muted-2-foreground) + 14px/20px + 图标48px下距10 + 文本行 1.625 */
.空态展示 {
  text-align: center;
  padding: 48px 16px;
  font-size: 14px;
  line-height: 20px;
  color: var(--muted-2-foreground);
}
.空态展示-图标 { width: 48px; height: 48px; margin: 0 auto 10px; display: block; }
.空态展示-副文 { font-size: 12px; margin-top: 6px; color: #d1d5db; }
/* 96px 大图标变体（原 习惯中心/AI监督报告 页内 .空状态图标 收编） */
.空态展示-大图标 { width: 96px; height: 96px; margin: 0 auto 12px; }
.空态展示-大图标 img { width: 100%; height: 100%; object-fit: contain; }
.空态展示-图标56 { width: 56px; height: 56px; margin: 0 auto 10px; display: block; }

/* ============ 弹窗（遮罩+卡片家族，F3·2026-09-06 夜间组件化入仓）============ */
/* 视觉基准=原 创建习惯/习惯详情 逐字节相同的页内定义；宽度三档制（2026-09-05 用户授权定案）：
   大=480（基档） / 中=400（.弹窗主体.中） / 小=320（.弹窗主体.小）；存量乱档 420/384/360/340 就近归并待用户逐页拍板 */
.弹窗遮罩 { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 200; display: none; align-items: center; justify-content: center; padding: 16px; }
.弹窗遮罩.显示 { display: flex; }
.弹窗主体 { background: white; border-radius: 16px; max-width: 480px; width: 100%; max-height: 85vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
.弹窗主体.中 { max-width: 400px; }
.弹窗主体.小 { max-width: 320px; }
.弹窗头 { padding: 16px; border-bottom: 1px solid #f3f4f6; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; background: white; border-radius: 16px 16px 0 0; z-index: 1; }
.弹窗标题 { font-size: 16px; font-weight: bold; color: #1f2937; }
.弹窗关闭 { background: none; border: none; font-size: 22px; color: #9ca3af; cursor: pointer; padding: 4px 8px; line-height: 1; }
.弹窗内容 { padding: 16px; }
.弹窗脚 { padding: 12px 16px; border-top: 1px solid #f3f4f6; display: flex; gap: 8px; position: sticky; bottom: 0; background: white; border-radius: 0 0 16px 16px; }
.弹窗按钮 { flex: 1; padding: 10px; border: none; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; }
.弹窗按钮.主 { background: var(--accent); color: white; }
.弹窗按钮.次 { background: #f3f4f6; color: #4b5563; }
.弹窗按钮:disabled { background: #d1d5db; color: white; cursor: not-allowed; }

/* ============ 状态标签 / 顶部栏 基壳（F8·2026-09-06 夜间组件化入仓）============ */
/* 基壳=5 页 .状态标签 共同声明（inline-flex 胶囊加粗）；字号/内边距/nowrap 等差异留在各页 <style>（后加载覆盖，渲染值零变化） */
.状态标签 { display: inline-flex; align-items: center; border-radius: 9999px; font-weight: 600; }
/* 顶部栏基壳=4 页共同声明（flex 居中轴）；高度/间距/定位差异留各页 */
.顶部栏 { display: flex; align-items: center; }
.空态展示-文本 { line-height: 1.625; }

/* ============ 像素宠物（V3.16 宠物2.0 · 2026-09-06 夜间批 C 批）============ */
.像素宠物 { display: inline-block; line-height: 0; }
.像素宠物 img { image-rendering: pixelated; }
/* 品质视觉标识（spec §3：白/蓝/紫+粒子/金光，CSS 光晕近似） */
.像素宠物.品质-优秀 img { filter: drop-shadow(0 0 6px rgba(96, 165, 250, .75)); }
.像素宠物.品质-稀有 img { filter: drop-shadow(0 0 8px rgba(168, 85, 247, .85)); }
.像素宠物.品质-传说 img { filter: drop-shadow(0 0 10px rgba(245, 188, 66, .95)); }

/* ============ 全局宠物浮窗（V3.16 · C 批 T21，文案§9）============ */
.宠物浮窗 { position: fixed; right: 14px; bottom: 92px; z-index: 900; cursor: pointer; line-height: 0; }
.宠物浮窗-气泡 {
  position: absolute; right: 60px; top: -6px; background: #fff; color: #374151;
  font-size: 12px; line-height: 1.4; padding: 6px 10px; border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,.12); white-space: nowrap; pointer-events: none;
}
.宠物浮窗-气泡::after {
  content: ''; position: absolute; right: -4px; top: 14px; width: 8px; height: 8px;
  background: #fff; transform: rotate(45deg);
}
.宠物浮窗.浮窗-没精神 img { filter: grayscale(.85) opacity(.8); }

/* ============ 循环轮播基壳（V3.16.1（2026-09-07 合并部署上线） · 配合 组件.js 创建循环轮播引擎，跨项目可复用）============ */
/* 引擎与皮分离：此处为零量取通用基壳；量取值/透视角度/卡尺寸各项目页面自定覆盖。
 * 契约：卡元素带 data-索引，引擎写 --轮播偏移/--轮播旋转 + toggle 当前/非当前；圆点 toggle 实心 */
.循环轮播视口 { position: relative; overflow: hidden; user-select: none; -webkit-user-select: none; }
.循环轮播视口 img { -webkit-user-drag: none; user-drag: none; }
.循环轮播轨道 { position: absolute; inset: 0; }
.循环轮播卡 { position: absolute; left: 50%; transform-origin: center; transition: transform .35s ease, box-shadow .35s ease; }
.循环轮播卡.非当前 { transform: perspective(900px) translateX(var(--轮播偏移)) scale(0.8) rotateY(var(--轮播旋转, 0deg)); z-index: 1; }
.循环轮播卡.当前 { transform: perspective(900px) translateX(var(--轮播偏移)) scale(1) rotateY(var(--轮播旋转, 0deg)); z-index: 2; }
.循环轮播圆点 { width: 8px; height: 8px; border-radius: 50%; border: 1.2px solid #B0B2B5; background: transparent; padding: 0; }
.循环轮播圆点.实心 { background: var(--primary, #22A06B); border-color: var(--primary, #22A06B); }