/* 中华消化网（csg）用户体系样式表（2026-09-22 新增）
 *
 * 用途：登录 / 注册 / 个人中心 / 医师认证 四个页面的版式，
 *       以及页头「登录后」那一小块（头像 + 昵称 + 下拉菜单）。
 *
 * ⚠️ 为什么单开一个文件，而不是写进 site.css 或 site-extra.css：
 *    · site.css 是原站 53 套 CSS 的**保序合并产物**，要与复刻产物逐条可比对；
 *    · site-extra.css 是「原站有、但没进合并结果」的补丁，同属复刻资产。
 *    而这里是**原站根本没有的新功能**，单独一份，出问题可以整块摘掉。
 *    加载顺序 site.css → site-extra.css → auth.css，所以这里可以覆盖前两者的通用规则。
 *
 * 视觉口径全部取自 site.css，不新造颜色与尺寸：
 *   主色 #046fd6 ｜ 正文 #333333 ｜ 次要 #8893b5 ｜ 输入框底 #F1F2F5
 *   边框 #d9ddea / 分隔 #F1F2F5 ｜ 报错 #e65090 ｜ 字体 MicrosoftYaHei ｜ 版心 1200px
 * 输入框照抄原站登录弹窗那把尺子：44px 高、圆角 4、14px 内边距。
 *
 * 类名前缀 csg-auth- / csg-user- / csg-login-，不会命中 site.css 里的任何选择器。
 */

/* ═══ 1. 页面骨架 ═══════════════════════════════════════════════════════ */

.csg-auth-wrap {
  width: 1200px;
  margin: 0 auto;
  padding: 40px 15px 70px;
  font-family: "MicrosoftYaHei";
  font-size: 15px;
  color: #333333;
  box-sizing: border-box;
  min-height: 60vh;
}

/* 表单卡片。宽 720px 居中 —— 比登录弹窗（644px）略宽，
   因为注册资料有「省 / 市」「医院 / 级别」这类并排两列。 */
.csg-auth-card {
  width: 720px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #F1F2F5;
  /* #54 全站白容器圆角统一：4px → 10px（口径见 site.css 末尾 #54 段）。
     ⚠️ 只改「容器」这一处 —— 同一份 auth.css 里 .csg-auth-input /
        .csg-auth-select / .csg-auth-btn / .csg-auth-code-btn 的 4px 保持不动：
        那些是**控件**（输入框、按钮）不是容器，改成 10px 会显得很怪。 */
  border-radius: 10px;
  padding: 40px 60px 50px;
  box-sizing: border-box;
}

.csg-auth-title {
  font-size: 24px;
  font-weight: bold;
  color: #333333;
  text-align: center;
  padding-bottom: 10px;
}

.csg-auth-sub {
  font-size: 14px;
  color: #8893b5;
  text-align: center;
  padding-bottom: 26px;
}

.csg-auth-divider {
  height: 1px;
  background: #F1F2F5;
  margin: 0 0 28px;
}

/* 手机端「个人资料」页绿头：满幅消化医声绿 #1CBDB1，标题反白 + 左侧返回键，
   与「更换手机号」弹层 .m_sheet--green 同款。仅 base='/csg/m' 的 edit 页挂 --green 类，
   桌面端 edit 不挂，原蓝标题不受影响。负边距抵消卡片移动端 30/24 内边距以满幅铺开。 */
.csg-auth-card--green { border-color: #1CBDB1; }
.csg-auth-green_head {
  display: flex; align-items: center; justify-content: space-between;
  margin: -30px -24px 24px;
  padding: 16px 18px;
  background: #1CBDB1;
}
.csg-auth-green_title { flex: 1; font-size: 17px; font-weight: 600; color: #fff; text-align: center; }
.csg-auth-green_back {
  font-size: 24px; line-height: 1; color: #fff;
  background: none; border: 0; padding: 0 6px; cursor: pointer;
}
/* 绿头已起分隔作用，旧的灰分割线隐藏（否则绿头下又一条浅灰线） */
.csg-auth-card--green .csg-auth-divider { display: none; }

/* ═══ 2. 表单字段 ═══════════════════════════════════════════════════════ */

.csg-auth-row {
  margin-bottom: 22px;
}

/* 并排两列（省/市、医院/级别）。用 flex + min-width:0 防止长内容把列撑开 */
.csg-auth-cols {
  display: flex;
  gap: 20px;
}
.csg-auth-cols > * {
  flex: 1 1 0;
  min-width: 0;
}

.csg-auth-label {
  font-size: 15px;
  color: #333333;
  padding-bottom: 9px;
}
/* 必填星号：报错色，但不做成大红星，克制一点 */
.csg-auth-label em {
  font-style: normal;
  color: #e65090;
  padding-right: 4px;
}

.csg-auth-input,
.csg-auth-select {
  display: block;
  width: 100%;
  height: 44px;
  padding: 0 14px;
  font-size: 15px;
  font-family: "MicrosoftYaHei";
  color: #333333;
  background: #F1F2F5;
  border: 1px solid #d9ddea;
  border-radius: 4px;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.csg-auth-input::placeholder {
  color: #a8b0c5;
}
.csg-auth-input:focus,
.csg-auth-select:focus {
  border-color: #046fd6;
  background: #fff;
}
.csg-auth-input[disabled] {
  color: #8893b5;
  background: #f2f5fb;
  cursor: not-allowed;
}

/* 下拉：去掉原生外观，自己画一个与主题同色的箭头 */
.csg-auth-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238893b5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 10px 6px;
  cursor: pointer;
}
.csg-auth-select:disabled {
  color: #b0b6bd;
  background-color: #f2f5fb;
  cursor: not-allowed;
}

/* 验证码一行：输入框 + 右侧按钮 */
.csg-auth-code {
  display: flex;
  gap: 12px;
}
.csg-auth-code .csg-auth-input {
  flex: 1 1 auto;
  min-width: 0;
}
.csg-auth-code-btn {
  flex: 0 0 auto;
  height: 44px;
  padding: 0 20px;
  font-size: 15px;
  font-family: "MicrosoftYaHei";
  color: #046fd6;
  background: #fff;
  border: 1px solid #046fd6;
  border-radius: 4px;
  cursor: pointer;
}
.csg-auth-code-btn:hover:not([disabled]) {
  background: #f0f7ff;
}
.csg-auth-code-btn[disabled] {
  color: #b0b6bd;
  border-color: #dfe3ee;
  cursor: default;
}

/* ═══ 3. 按钮 ═══════════════════════════════════════════════════════════ */

.csg-auth-btn {
  display: block;
  width: 100%;
  height: 44px;
  line-height: 42px;
  font-size: 16px;
  font-weight: bold;
  font-family: "MicrosoftYaHei";
  color: #fff;
  background: #046fd6;
  border: none;
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
  box-sizing: border-box;
}
.csg-auth-btn:hover:not([disabled]) {
  background: #045cb2;
}
.csg-auth-btn[disabled] {
  background: #a8c8ea;
  cursor: default;
}

.csg-auth-btn-ghost {
  color: #046fd6;
  background: #fff;
  border: 1px solid #046fd6;
}
.csg-auth-btn-ghost:hover:not([disabled]) {
  background: #f0f7ff;
}

/* 小号按钮（卡片内的次级操作，如「更换手机号」） */
.csg-auth-btn-sm {
  display: inline-block;
  width: auto;
  height: 36px;
  line-height: 34px;
  padding: 0 20px;
  font-size: 14px;
  font-weight: normal;
}

/* flex-wrap：个人中心的「更换手机号」展开后是个 flex 1 1 100% 的整块，
   不换行就会把同一行的「提交医师认证 / 退出登录」挤成竖排单字（2026-10-06 线上错版）。
   手机端在 mobile.css §16 本来就有同一条覆盖，这里补上的是电脑端缺的那半。 */
.csg-auth-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  padding-top: 10px;
}
.csg-auth-actions .csg-auth-btn {
  flex: 1 1 0;
}

/* ═══ 4. 提示文案与状态徽标 ═════════════════════════════════════════════ */

.csg-auth-err {
  font-size: 14px;
  color: #e65090;
  line-height: 1.7;
  padding: 0 0 16px;
}
.csg-auth-tip {
  font-size: 13px;
  color: #8893b5;
  line-height: 1.9;
}
.csg-auth-dev {
  font-size: 13px;
  color: #8893b5;
  padding: 0 0 12px;
}
.csg-auth-dev b {
  color: #046fd6;
  padding: 0 2px;
}

.csg-auth-badge {
  display: inline-block;
  font-size: 13px;
  line-height: 20px;
  padding: 0 10px;
  border-radius: 10px;
  vertical-align: middle;
}
.csg-auth-badge-none {
  color: #8893b5;
  background: #f2f5fb;
}
.csg-auth-badge-pending {
  color: #854f0b;
  background: #faeeda;
}
.csg-auth-badge-approved {
  color: #0f6e56;
  background: #e1f5ee;
}
.csg-auth-badge-rejected {
  color: #a32d2d;
  background: #fcebeb;
}

/* 资料只读展示（个人中心上半部分） */
.csg-auth-info {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 0;
}
.csg-auth-info-item {
  flex: 0 0 50%;
  font-size: 15px;
  line-height: 2;
  box-sizing: border-box;
}
.csg-auth-info-item span {
  color: #8893b5;
  padding-right: 8px;
}

/* ═══ 5. 登录弹窗：页头那个按钮点开的样子（沿用 site.css 的原站样式） ═══
 *
 * 弹窗本体（.login_box / .login_model / 里面的表单）的样式**全在 site.css 里**，
 * 是第一阶段从原站复刻来的（作用域 data-v-9c00afe4）。这里只补两件事：
 *   ① 遮罩的定位兜底（原站固定在视口，页头是 sticky 时也一样）
 *   ② 「整页版登录」——直接访问 /csg/login 时，把同一个 .login_box 从
 *      固定居中改成文档流内居中（见 .csg-login-page），这样两处共用一套 DOM 与样式。
 */
.csg-login-page {
  position: relative;
  padding: 60px 0 90px;
}
.csg-login-page .login_box[data-v-9c00afe4] {
  position: relative;
  top: auto;
  left: auto;
  margin: 0 auto;
  height: auto;
  padding-bottom: 46px;
}
/* 静态版里没有遮罩，把原本压在遮罩上的层级让回去 */
.csg-login-page .login_box[data-v-9c00afe4] {
  z-index: 1;
}

/* 弹窗内我们自己加的几个元素（原站没有对应 class） */
.csg-modal-err {
  font-size: 14px;
  color: #e65090;
  line-height: 1.6;
  text-align: center;
  padding-bottom: 14px;
}
/* 「未注册 → 去填资料」的引导按钮：放在主按钮下面，描边样式不抢主按钮 */
.csg-modal-alt {
  margin-top: 16px;
  text-align: center;
}
.csg-modal-alt button {
  font-size: 14px;
  font-family: "MicrosoftYaHei";
  color: #046fd6;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
}
.csg-modal-alt button:hover {
  text-decoration: underline;
}

/* ═══ 6. 页头「登录后」那一块 ═══════════════════════════════════════════
 *
 * 结构由服务端渲染（见 lib/csg/header-auth.ts），原站顶栏那两把尺子直接复用：
 *   .login_avatar（30×30 圆形）与 .login_name（#bbc6dc 14px）都在 site.css 里，
 *   这里只加容器布局与下拉菜单。
 */
.csg-user-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  cursor: pointer;
}
.csg-user-menu {
  display: none;
  position: absolute;
  top: 34px;
  right: 0;
  z-index: 40;
  min-width: 136px;
  padding: 6px 0;
  background: #fff;
  border: 1px solid #F1F2F5;
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(20, 40, 80, 0.14);
  line-height: 1.5;
  text-align: left;
}
/* hover 展开 + 点击展开（.open 由前端加）—— 鼠标用户与触屏用户都要能用 */
.csg-user-wrap:hover .csg-user-menu,
.csg-user-menu.open {
  display: block;
}
.csg-user-menu-item {
  display: block;
  padding: 9px 16px;
  font-size: 14px;
  color: #333333;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}
.csg-user-menu-item:hover {
  color: #046fd6;
  background: #F1F2F5;
}
.csg-user-menu-split {
  height: 1px;
  background: #F1F2F5;
  margin: 5px 0;
}

/* ═══ 8. 小屏兜底 ═══════════════════════════════════════════════════════
 * 前台整体是 1200px 固定版心的电脑端（与原站一致），所以这里不做响应式改造，
 * 只保证窗口变窄时卡片不会横向溢出、内容仍能读。
 */
@media (max-width: 1240px) {
  .csg-auth-wrap {
    width: 100%;
    min-width: 0;
  }
  .csg-auth-card {
    width: 100%;
    max-width: 720px;
    padding: 30px 24px 40px;
  }
  .csg-auth-cols {
    flex-wrap: wrap;
    gap: 0;
  }
  .csg-auth-cols > * {
    flex: 1 1 100%;
  }
}