/* ==========================================================================
   中国化学电子招投标交易平台 · 外部专家入口
   共享样式（index.html 登录页 / register.html 注册页）
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design Tokens — 单一事实源
   -------------------------------------------------------------------------- */
:root {
  /* Brand / Primary（取自品牌渐变与主色） */
  --brand-indigo-700: #4a3fd6;
  --brand-indigo-500: #6758f3;
  --brand-blue-600:   #1665d8;

  --primary-50:  #eef2ff;
  --primary-100: #e0e6ff;
  --primary-300: #a5b4f5;
  --primary-500: #3d5bc9;
  --primary-600: #3450bb;
  --primary-700: #2b46b0;

  /* Neutral — 8 阶灰 */
  --gray-25:  #fafbfc;
  --gray-50:  #f5f7fa;
  --gray-100: #eef0f5;
  --gray-200: #e3e7ef;
  --gray-300: #c2c7d4;
  --gray-400: #9aa0b0;
  --gray-500: #7c8398;
  --gray-700: #4a5065;
  --gray-900: #1a1d29;

  /* Semantic */
  --success: #10b981;
  --warning: #f59e0b;
  --danger:  #ef4444;

  /* Surface */
  --surface-page:   #f0f2f5;
  --surface-card:   #ffffff;
  --surface-sunken: #f5f7fa;

  /* Typography */
  --font-sans: "Microsoft YaHei", "微软雅黑", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  --font-mono: Georgia, "Times New Roman", serif;

  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   16px;
  --text-xl:   20px;
  --text-2xl:  26px;
  --text-3xl:  30px;

  /* Spacing — 4px 基准 */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-full: 999px;

  /* Elevation */
  --shadow-xs: 0 1px 2px rgba(24, 32, 72, .05);
  --shadow-sm: 0 2px 6px rgba(24, 32, 72, .06);
  --shadow-md: 0 6px 16px rgba(61, 91, 201, .16);
  --shadow-lg: 0 10px 28px rgba(61, 91, 201, .24);
  --shadow-card: 0 4px 24px rgba(24, 32, 72, .06);

  /* Motion */
  --t-fast: 150ms cubic-bezier(.4, 0, .2, 1);
  --t-base: 250ms cubic-bezier(.4, 0, .2, 1);

  /* Layout */
  --brand-width: 40%;
  --form-width: 420px;

  /* ------ 表单控件尺寸（唯一调节点）------
     所有 Element 表单类控件的几何都由此驱动：
       --control-h      输入框 / 下拉框 / 按钮 / 验证码框 高度
       --control-pad-x  输入框内左右留白
       --control-pl     带前缀图标时的左内边距（预留出图标位）
       --control-font   控件内文字大小
       --control-icon   输入框内图标字号
       --control-gap    控件间距（form-item 下边距）
     改这一组即可整体缩放两页的全部表单控件。 */
  --control-h:     40px;
  --control-pad-x: 12px;
  --control-pl:    34px;
  --control-font:  13px;
  --control-icon:  15px;
  --control-gap:   var(--space-4);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--gray-900);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
#app { height: 100%; }

:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   3. 左 · 品牌区
   -------------------------------------------------------------------------- */
.auth-wrap { display: flex; height: 100vh; min-height: 640px; }

.brand {
  position: relative;
  flex: 0 0 var(--brand-width);
  min-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-10) 7% var(--space-12);
  overflow: hidden;
  color: #fff;
  background: linear-gradient(to top left, var(--brand-indigo-500) 0%, var(--brand-blue-600) 100%);
}
/* 装饰光斑：制造纵深，避免大面积平涂 */
.brand::before,
.brand::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.brand::before {
  width: 520px; height: 520px; top: -180px; left: -160px;
  background: radial-gradient(circle, rgba(255, 255, 255, .16) 0%, transparent 68%);
}
.brand::after {
  width: 620px; height: 620px; bottom: -260px; right: -220px;
  background: radial-gradient(circle, rgba(120, 200, 255, .20) 0%, transparent 66%);
}

.brand-illu { position: relative; z-index: 2; width: 88%; max-width: 540px; }
.brand-illu img { width: 100%; height: auto; display: block; }

.brand-copy {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 500px;
  margin-top: var(--space-8);
}
.brand-copy h2 {
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: .5px;
  text-align: center;
  color: #fff;
}
.brand-copy h2::after {
  content: "";
  display: block;
  width: 40px; height: 3px;
  margin: var(--space-4) auto 0;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, .6);
}
.brand-copy p {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  line-height: 2;
  letter-spacing: .2px;
  color: rgba(255, 255, 255, .82);
}

/* --------------------------------------------------------------------------
   4. 右 · 内容区（三段式：顶栏 / 主体 / 页脚）
   -------------------------------------------------------------------------- */
.panel {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: var(--space-8) var(--space-12) var(--space-5);
  background: var(--surface-card);
}

/* --- 顶栏：品牌标识居中，随卡片整组垂直居中 --- */
.panel-head {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-10);
}

/* --------------------------------------------------------------------------
   4.1 Logo 行 — 登录页顶栏与注册页顶部通栏共用同一套规格
   （字体尺寸/字重/间距/分隔线唯一来源，改这里两页同步）
   -------------------------------------------------------------------------- */
.logo-row { display: flex; align-items: center; gap: var(--space-2); }
.logo-row img { width: 64px; height: 38px; object-fit: contain; flex-shrink: 0; }
.logo-cnchemical {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--gray-900);
  white-space: nowrap;
}
.logo-divider {
  width: 1px;
  height: 24px;
  margin: 0 var(--space-3);
  background: var(--gray-200);
  flex-shrink: 0;
}
.logo-title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--gray-900);
  white-space: nowrap;
}

/* --- 主体：头部 + 卡片作为一整组，在视口内垂直居中 --- */
.panel-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) 0;
}

/* --- 登录卡片 --- */
.auth-card {
  width: 100%;
  max-width: var(--form-width);
}
.card-head { margin-bottom: var(--space-6); }
.card-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--gray-900);
}
.card-desc {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--gray-400);
}

/* --- 卡片底部：忘记密码在左、立即注册在右，位置固定 --- */
.card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-5);
}
/* 手机号登录无「忘记密码」时，注册链接仍固定在右侧 */
.card-foot .link-reg { margin-left: auto; }
.link-sub {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--primary-500);
  text-decoration: none;
  transition: color var(--t-fast);
}
.link-sub:hover { color: var(--primary-700); text-decoration: underline; }

/* --- 验证码并排 --- */
.field-inline { display: flex; gap: var(--space-3); align-items: center; }
.field-inline .el-input { flex: 1; }
.field-inline .captcha-box { flex: 0 0 92px; }

/* --------------------------------------------------------------------------
   5. Element 组件覆写
   -------------------------------------------------------------------------- */
.el-form-item { margin-bottom: var(--control-gap); }
.el-select { width: 100%; }

/* --- Tabs --- */
.el-tabs__header { margin-bottom: var(--space-5); }
.el-tabs__nav-wrap::after { height: 1px; background: var(--gray-100); }
.el-tabs__item {
  height: 36px;
  line-height: 36px;
  padding: 0 !important;
  margin-right: var(--space-8) !important;
  /* 字重与字号在激活/未激活间保持一致，下划线宽度才能与文字精确等宽 */
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--gray-400);
  transition: color var(--t-fast);
}
.el-tabs__item:hover { color: var(--primary-500); }
.el-tabs__item.is-active { font-weight: 700; color: var(--gray-900); }

/* --- 下划线：宽度 = 激活页签的文字宽度，左缘 = 文字左缘 ---
   Element 的 TabBar 会写 inline 的 width/transform 并做固定内缩
   （width 减 20px、非首位再右移 20px）。由于两个页签文字宽度不同
   （「账号登录」64px /「手机号登录」80px），静态 CSS 无法同时满足，
   因此宽度与位移由 AUTH.syncTabBar() 按实测布局重算并写回 inline style。
   此处只负责外观与过渡。 */
.el-tabs__active-bar {
  height: 2px;
  border-radius: var(--radius-full);
  background: var(--primary-500);
  transition: transform var(--t-base), width var(--t-base);
}

/* --- 输入框 --- */
.el-input__inner {
  height: var(--control-h) !important;
  line-height: var(--control-h) !important;
  padding-left: var(--control-pl);
  font-size: var(--control-font);
  color: var(--gray-900);
  border-radius: var(--radius-md);
  border-color: var(--gray-200);
  background: var(--surface-card);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.el-input__inner::placeholder { color: var(--gray-300); }
.el-input__inner:hover { border-color: var(--gray-300); }
.el-input__inner:focus,
.el-input.is-focus .el-input__inner {
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px hsla(228, 57%, 51%, .10);
}
.el-input__prefix { left: 4px; }
.el-input__icon {
  width: 20px;
  line-height: var(--control-h) !important;
  font-size: var(--control-icon);
  color: var(--gray-300);
  transition: color var(--t-fast);
}
.el-input.is-focus .el-input__icon { color: var(--primary-500); }

/* 校验失败：用语义红，与品牌蓝区分 */
.el-form-item.is-error .el-input__inner,
.el-form-item.is-error .el-select .el-input__inner { border-color: var(--danger); }
.el-form-item__error {
  padding-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--danger);
}

/* --- 下拉框与输入框等高 --- */
.el-select .el-input__inner { padding-left: var(--control-pl); }
.el-select .el-input .el-select__caret { line-height: var(--control-h); }

/* --- 主按钮 --- */
.btn-submit {
  width: 100%;
  height: var(--control-h);
  margin-top: var(--space-2);
  border: none !important;
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, var(--primary-500) 0%, #4a5fd6 55%, #5560dd 100%) !important;
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: 3px;
  color: #fff;
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--t-base), transform var(--t-fast), background var(--t-base);
}
.btn-submit:hover {
  background: linear-gradient(90deg, var(--primary-600) 0%, #4054c9 55%, #4b56d0 100%) !important;
  box-shadow: var(--shadow-lg);
  transform: translateY(-1px);
}
.btn-submit:active { transform: translateY(0); box-shadow: var(--shadow-sm); }

/* --- 图形验证码 --- */
.captcha-box {
  height: var(--control-h);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  font-family: var(--font-mono);
  font-style: italic;
  font-size: 18px;
  letter-spacing: 3px;
  color: #6ea83c;
  user-select: none;
  transition: border-color var(--t-fast);
}
.captcha-box:hover { border-color: var(--primary-300); }
.captcha-box::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(-18deg, rgba(90, 150, 90, .18) 0 1px, transparent 1px 7px);
}

/* --- 行内操作（获取验证码） --- */
.sendsms {
  padding: 0 var(--space-1);
  font-size: var(--text-sm);
  color: var(--primary-500);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--t-fast);
}
.sendsms:hover { color: var(--primary-700); text-decoration: underline; }
.sendsms.disabled { color: var(--gray-300); cursor: not-allowed; text-decoration: none; }

/* --- 文字链接 --- */
.link-blue {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--primary-500);
  text-decoration: none;
  transition: color var(--t-fast);
}
.link-blue:hover { color: var(--primary-700); }

/* --- 复选框 --- */
.el-checkbox__label { font-size: var(--text-xs); color: var(--gray-500); }
.el-checkbox__input.is-checked + .el-checkbox__label { color: var(--primary-500); }
.el-checkbox__input.is-focus .el-checkbox__inner { border-color: var(--primary-500); }
/* 复选框本体同步小一号（Element 默认 14×14 / 勾选标记 1px 偏移） */
.el-checkbox__inner { width: 13px; height: 13px; }
.el-checkbox__inner::after { height: 6px; left: 4px; top: 1px; }
.el-checkbox__label { padding-left: 6px; }

/* --- 表单分组标题（注册页） --- */
.form-legend {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-2) 0 var(--space-4);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--gray-900);
}
.form-legend::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--gray-100);
}
.form-legend .idx {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: var(--radius-full);
  background: var(--primary-50);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--primary-500);
}
.form-legend + .el-form-item,
.el-form-item.is-required-mark .el-form-item__label { margin-top: 0; }

/* 必填星号 */
.req { color: var(--danger); margin-left: 2px; }

/* --------------------------------------------------------------------------
   6. 页脚
   -------------------------------------------------------------------------- */
.page-foot {
  flex-shrink: 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--text-xs);
  line-height: 1.7;
  color: var(--gray-400);
}
.page-foot a { color: var(--gray-400); text-decoration: none; transition: color var(--t-fast); }
.page-foot a:hover { color: var(--primary-500); }
.foot-sep { color: var(--gray-200); }

/* --------------------------------------------------------------------------
   7. 动效
   -------------------------------------------------------------------------- */
.fade-in { animation: rise var(--t-base) both; }
@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --------------------------------------------------------------------------
   8. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .panel { padding-left: var(--space-8); padding-right: var(--space-8); }
}

@media (max-width: 1100px) {
  .brand { min-width: 340px; }
  .panel-head .logo-cnchemical,
  .panel-head .logo-title { font-size: var(--text-lg); }
  .panel-head .logo-row img { width: 50px; height: 30px; }
  .panel-head .logo-divider { height: 20px; }
}

/* 矮屏兜底：内容高于视口时改为顶部对齐，避免居中裁掉头部标识 */
@media (max-height: 700px) {
  .panel-body { justify-content: flex-start; padding-top: var(--space-4); }
  .panel-head { margin-bottom: var(--space-6); }
}

@media (max-width: 900px) {
  .auth-wrap { flex-direction: column; height: auto; min-height: 100vh; }
  .brand {
    flex: 0 0 auto;
    min-width: 0;
    padding: var(--space-8) 8% var(--space-6);
  }
  .brand-illu { width: 60%; max-width: 280px; }
  .brand-copy { margin-top: var(--space-6); }
  .brand-copy h2 { font-size: var(--text-lg); }
  .brand-copy p { font-size: var(--text-xs); line-height: 1.9; }
  .panel { padding: var(--space-6) 7% var(--space-4); }
  .auth-card { max-width: 100%; }
  .panel-head { margin-bottom: var(--space-6); }
}