/* ==========================================================================
   page-login.css · 登录页（login.html）
   --------------------------------------------------------------------------
   作用域：body.page-login
   结构：左品牌区（1.05fr，深蓝）+ 右表单区（1fr，白）的对称双栏布局。
   设计取舍：登录页只有一件事——让考生把身份证号和密码填对。
             所以左区不是装饰，而是把三条最容易出错的规则前置说明。
   ========================================================================== */

/* 登录页整页白底：表单区在白底上才清晰 */
body.page-login { background: var(--paper); }

.auth {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  min-height: calc(100vh - var(--h-header) - 36px);  /* 扣掉顶栏与页头 */
}

/* --------------------------------------------------------------------------
   左：品牌区
   -------------------------------------------------------------------------- */

.auth-brand {
  background: linear-gradient(158deg, var(--navy-800) 0%, var(--navy-950) 62%);
  color: #DCE6F5;
  padding: var(--sp-9) var(--sp-8);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-8);
}
/* 两个同心圆：一冷（浅蓝）一暖（铜金），呼应全站的蓝/金双色体系 */
.auth-brand::before {
  content: "";
  position: absolute;
  right: -140px; top: -160px;
  width: 560px; height: 560px;
  border-radius: 50%;
  border: 1px solid rgba(191, 211, 236, .14);
}
.auth-brand::after {
  content: "";
  position: absolute;
  right: -40px; bottom: -190px;
  width: 430px; height: 430px;
  border-radius: 50%;
  border: 1px solid rgba(168, 124, 61, .3);
}
.auth-brand > * { position: relative; z-index: 1; }

/* 深底下的品牌文字反色覆盖（复用 components.css 的 .brand-txt） */
.auth-brand .brand-txt b { color: #fff; }
.auth-brand .brand-txt span { color: #8FA6C7; }
.auth-brand .brand-mark { background: linear-gradient(160deg, var(--gold-500), var(--gold-700)); }

/* --- 三条必读规则 --- */
.rule-list { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-6); }
.rule-list li { display: flex; gap: var(--sp-4); align-items: flex-start; }
.rule-list .n {
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: #BFD3EC;
  border: 1px solid rgba(191, 211, 236, .32);
  border-radius: var(--r-xs);
  padding: 2px 7px;
  flex: 0 0 auto;
  margin-top: 2px;
}
.rule-list b { display: block; color: #fff; font-size: var(--fs-sm); font-weight: 700; margin-bottom: 2px; }
.rule-list p { margin: 0; font-size: var(--fs-xs); color: #9FB4D4; line-height: 1.7; }

/* --- 迷你倒计时（报考期剩余天数）--- */
.mini-cd {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(191, 211, 236, .18);
  font-size: var(--fs-xs);
  color: #BFD3EC;
}
.mini-cd b { font-family: var(--ff-mono); font-size: var(--fs-sm); color: #fff; }

/* --------------------------------------------------------------------------
   右：表单区
   -------------------------------------------------------------------------- */

.auth-form { display: flex; align-items: center; justify-content: center; padding: var(--sp-8) var(--sp-6); }
.form-box { width: 100%; max-width: 408px; }

.form-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--sp-5);
  font-size: var(--fs-sm);
}

/* --- 演示账号提示块（上线前删除）--- */
.demo-hint {
  margin-top: var(--sp-6);
  padding: 14px 16px;
  border-radius: var(--r-sm);
  background: var(--navy-50);
  border: 1px dashed var(--navy-200);
}
.demo-hint b { font-size: var(--fs-xs); color: var(--navy-800); letter-spacing: .06em; }
.demo-hint p { margin: 6px 0 0; font-size: var(--fs-xs); color: var(--ink-500); line-height: 1.9; }
.demo-hint code {
  font-family: var(--ff-mono);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 1px 6px;
  color: var(--navy-800);
}

/* --- 底部版权条 --- */
.auth-cap {
  border-top: 1px solid var(--line);
  padding: var(--sp-4) var(--sp-6);
  font-size: var(--fs-xs);
  color: var(--ink-400);
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  background: var(--paper);
}

/* --------------------------------------------------------------------------
   响应式：窄屏折叠为单栏，品牌区缩为顶部说明条
   -------------------------------------------------------------------------- */

@media (max-width: 960px) {
  .auth { grid-template-columns: 1fr; }
  .auth-brand { padding: var(--sp-7) var(--sp-5); }
}