/* ==========================================================================
 * 全局样式：设计令牌（Design Tokens）+ 基础样式 + 复用组件
 * --------------------------------------------------------------------------
 * 配色遵循根目录 DESIGN_lan.md（Lan 设计语言，单一真源）：
 * 唯一品牌强调 #0066FF（Tech Blue）+ 近黑墨 #0e0f0c / 正文 #454745 / 弱文本 #868685
 * + 冰蓝画布 #F0F7FF + 白卡 #ffffff + hairline #ebebeb 描边（网页表单风格，
 * 与邮件模板 email_service.py 同源）。
 * 令牌分两层：Palette 层 = DESIGN_lan.md colors 全量 24 色 + 网页实现层扩展功能色，
 * 为**全项目唯一定义色值处**（其余任何样式文件不得出现散列色值，一律引用令牌）；
 * Semantic 层（--color-*）为业务样式唯一引用层。
 *
 * 响应式单位：基于 375px 设计稿，无构建步骤采用 rem 等效方案：
 * html 根字号 = 100vw / 37.5，即 1rem = 10 设计px（375 基准），
 * 设计稿 px 值除以 10 写成 rem；≥768px 宽屏锁定 1rem = 10px。
 * ========================================================================== */

/* ===== 1) Palette 原始色板（DESIGN_lan.md colors 全量 24 色，值严格一致） ===== */
:root {
  /* 品牌与强调色 */
  --palette-primary: #0066ff;         /* Tech Blue：唯一品牌强调色（CTA/链接） */
  --palette-on-primary: #ffffff;      /* Tech Blue 之上的文字 */
  --palette-primary-active: #b3c5ff;  /* Tech Blue 悬停态 */
  --palette-primary-neutral: #9fb6ff; /* Tech Blue 中性色 */
  --palette-primary-pale: #d9e8ff;    /* Tech Blue 浅色（主蓝 15% 混白同色相）：柔和表层/徽章底/行悬停与选中 */
  /* 文本 */
  --palette-ink: #0e0f0c;             /* 墨色：主文本 */
  --palette-ink-deep: #001849;        /* 深墨色：深色强调文本 */
  --palette-body: #454745;            /* 正文色：次要文本 */
  --palette-mute: #868685;            /* 弱文本：占位、细则 */
  /* 表层 */
  --palette-canvas: #ffffff;          /* 卡片白 */
  --palette-canvas-soft: #f0f7ff;     /* 冰蓝画布：页面背景 */
  /* 语义色 */
  --palette-positive: #1e40af;        /* 正向：成功指示 */
  --palette-positive-deep: #1e3a8a;   /* 正向深：按下/正向徽章底 */
  --palette-warning: #ffd11a;         /* 警示黄：提醒指示 */
  --palette-warning-deep: #b86700;    /* 警示深：按下/白底警示文字 */
  --palette-warning-content: #4a3b1c; /* 警示内容色：警示表层上的文本 */
  --palette-negative: #d03238;        /* 负向红：破坏/错误 */
  --palette-negative-deep: #a72027;   /* 负向深：按下的破坏状态 */
  --palette-negative-darkest: #a7000d; /* 负向最深：最高强调破坏文本 */
  --palette-negative-bg: #320707;     /* 负向背景：破坏型提示框底 */
  /* 第三层级强调 */
  --palette-accent-orange: #ffc091;   /* 强调橙：插画/冷暖对比 */

  /* —— 网页实现层扩展（DESIGN_lan 未覆盖的 web 表单/覆盖层功能色）—— */
  --palette-hairline: #ebebeb;        /* hairline：输入框/复选框/分隔线描边（网页表单风格） */
  --palette-surface-soft: #f2f2f2;    /* 柔和面：次级表面/表单区底 */
  --palette-btn-cancel: #f0f0f0;      /* 取消按钮背景 */
  --palette-placeholder: #c0c0c0;     /* 输入框聚焦时的占位符 */
  --palette-scrim: rgba(0, 0, 0, 0.4);       /* 弹窗遮罩 */
  --palette-toast-bg: rgba(17, 17, 17, 0.8); /* 轻提示深色底 */
  --palette-shadow-rgb: 0, 0, 0;      /* 阴影基色（rgb 三元组，供 rgba() 组装） */
}

/* ===== 2) Semantic 语义令牌（业务样式唯一引用层） ===== */

/* ---- 2.1 用途型语义（按使用场景命名，业务优先引用） ---- */
:root {
  --page-bg-color: var(--palette-canvas-soft);
  --color-card-bg: var(--palette-canvas);
  --color-text-primary: var(--palette-ink);
  --color-label: var(--palette-ink);
  --color-text-secondary: var(--palette-body);
  --color-text-tertiary: var(--palette-mute);
  --color-border-input: var(--palette-hairline);
  --color-separator: var(--palette-hairline);
  --color-form-error: var(--palette-negative);
  --color-danger: var(--palette-negative);
  --color-brand: var(--palette-primary);
  --color-brand-bg: var(--palette-primary);
  --color-brand-pale: var(--palette-primary-pale);
  --color-text-inverse: var(--palette-on-primary);
  --color-surface-form: var(--palette-canvas-soft);
  --color-surface-soft: var(--palette-surface-soft);
  --color-surface-hover: var(--palette-canvas-soft);
  --color-btn-cancel-bg: var(--palette-btn-cancel);
  --color-placeholder: var(--palette-placeholder);
  --color-scrim: var(--palette-scrim);
  --color-toast-bg: var(--palette-toast-bg);

  /* 阴影（偏移与模糊保留 px，视觉效果不随缩放变化） */
  --shadow-card: 0 1px 2px 0 rgba(var(--palette-shadow-rgb), 0.05);
}

/* ---- 2.2 DESIGN_lan colors 全量语义直映（与 palette 同名，供业务按设计色名引用） ---- */
:root {
  --color-primary: var(--palette-primary);
  --color-on-primary: var(--palette-on-primary);
  --color-primary-active: var(--palette-primary-active);
  --color-primary-neutral: var(--palette-primary-neutral);
  --color-primary-pale: var(--palette-primary-pale);
  --color-ink: var(--palette-ink);
  --color-ink-deep: var(--palette-ink-deep);
  --color-body: var(--palette-body);
  --color-mute: var(--palette-mute);
  --color-canvas: var(--palette-canvas);
  --color-canvas-soft: var(--palette-canvas-soft);
  --color-positive: var(--palette-positive);
  --color-positive-deep: var(--palette-positive-deep);
  --color-warning: var(--palette-warning);
  --color-warning-deep: var(--palette-warning-deep);
  --color-warning-content: var(--palette-warning-content);
  --color-negative: var(--palette-negative);
  --color-negative-deep: var(--palette-negative-deep);
  --color-negative-darkest: var(--palette-negative-darkest);
  --color-negative-bg: var(--palette-negative-bg);
  --color-accent-orange: var(--palette-accent-orange);
}

/* ===== 3) 基础样式与 rem 缩放 ===== */
html {
  font-size: calc(100vw / 37.5);
  background-color: var(--page-bg-color);
}

body {
  margin: 0;
  font-family: Inter, "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  background-color: var(--page-bg-color);
  -webkit-font-smoothing: antialiased;
}

/* hidden 属性兜底：防止组件的 display:flex 等声明覆盖 UA 的 [hidden] 隐藏样式 */
[hidden] {
  display: none !important;
}

@media screen and (min-width: 768px) {
  html {
    /* 宽屏锁定根字号 */
    font-size: 10px;
  }

  /* 桌面端页面全宽展示（不限手机版式宽度、无页面级边框与阴影）：正文页面按桌面
     视觉铺满内容区，卡片/内容列的宽度与居中由各页样式自行约束（profile/doc 内容
     列限宽居中，auth 卡片定宽居中），页眉页脚仍全宽响应式（header-footer.css） */
}

/* ==========================================================================
 * 复用组件（三个认证页共用）
 * ========================================================================== */

/* ===== 密码显隐眼睛图标（纯 CSS 绘制，不依赖图片） ===== */
.pwd-eye {
  position: relative;
  width: 2.4rem;
  height: 1.6rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 睁眼：上平下圆的眼形轮廓 + 中心瞳孔（密码明文可见） */
.pwd-eye--open {
  width: 2.2rem;
  height: 1.4rem;
  border: 1.5px solid var(--color-text-secondary);
  border-radius: 50% / 58% 58% 42% 42%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pwd-eye__pupil {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--color-text-secondary);
}

/* 闭眼：向下弯曲的闭合弧线（仅下边框 + 下圆角，垂直半径 70% 使弧线平缓对称） */
.pwd-eye--closed {
  width: 2.2rem;
  height: 1.1rem;
  border: 1.5px solid var(--color-text-secondary);
  border-top: none;
  border-radius: 0 0 50% 50% / 0 0 70% 70%;
  box-sizing: border-box;
}

/* ===== 轻提示（对齐 uni.showToast：居中深色圆角块，success 态带白色对勾） ===== */
.auth-toast {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3000;
  max-width: 70vw;
  box-sizing: border-box;
  padding: 1.2rem 1.6rem;
  border-radius: 0.8rem;
  background: var(--color-toast-bg);
  color: var(--color-text-inverse);
  font-size: 1.4rem;
  line-height: 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  pointer-events: none;
}

/* 对勾比例须竖长（宽:高 ≈ 1:1.6，同 auth-checkmark）：横长矩形旋转 45°
   后长臂划向右下、短臂朝上翘，视觉上会变成方向朝下的反向箭头 */
.auth-toast__check {
  width: 1rem;
  height: 1.6rem;
  border-right: 2px solid var(--color-text-inverse);
  border-bottom: 2px solid var(--color-text-inverse);
  transform: rotate(45deg);
  margin-bottom: 0.4rem;
}

/* ===== 确认弹窗（对齐 uni.showModal：遮罩 + 白卡 + 取消/确定双按钮） ===== */
.auth-modal-mask {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--color-scrim);
  display: flex;
  justify-content: center;
  align-items: center;
}

.auth-modal {
  width: 300px;
  border-radius: 14px;
  background: var(--color-card-bg);
  overflow: hidden;
  text-align: center;
}

.auth-modal__title {
  padding: 24px 24px 0;
  color: var(--color-text-primary);
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
}

.auth-modal__content {
  padding: 8px 24px 24px;
  color: var(--color-text-secondary);
  font-size: 14px;
  line-height: 20px;
}

.auth-modal__actions {
  display: flex;
  border-top: 0.5px solid var(--color-separator);
}

.auth-modal__btn {
  flex: 1;
  height: 44px;
  border: none;
  background: var(--color-card-bg);
  font-size: 16px;
  cursor: pointer;
}

.auth-modal__btn--cancel {
  color: var(--color-text-secondary);
  border-right: 0.5px solid var(--color-separator);
}

.auth-modal__btn--confirm {
  color: var(--color-brand);
  font-weight: 600;
}