/* ============================================================
   认证页 — 蓝色背景 + 中间卡片（对齐组件库 dsd-* class）
   依赖：components.html 中定义的 .dsd-btn / .dsd-field / .dsd-check 等
   ============================================================ */

/* ---- 本页覆盖变量 ---- */
.dsu-page{
  --d-bg:#f6f7fb; --d-panel:#ffffff; --d-panel-2:#fbfbfe;
  --d-line:#e7e8ec; --d-line-strong:#dadce2;
  --d-ink:#1f2430; --d-ink-600:#454b57; --d-ink-400:#8a909c; --d-ink-200:#bcc0c8;
  --d-accent:#4F6EF7; --d-accent-2:#3a56d4; --d-accent-soft:#eef0ff;
  --d-ok:#0f9d58; --d-ok-bg:#ecfdf5; --d-ok-line:#a7f3d0;
  --d-bad:#e23b5a; --d-bad-bg:#fff5f5; --d-bad-line:#fecaca;
  --d-r3:8px; --d-r5:12px; --d-r6:14px; --d-r7:16px; --d-r-full:999px;
  --d-shadow-md:0 10px 30px rgba(20,24,40,.08);
  --d-shadow-xl:0 28px 60px rgba(20,24,40,.20);
  --d-fs-xs:11px; --d-fs-sm:13px; --d-fs-md:14px; --d-fs-lg:15px;
  --d-fw-semi:600; --d-fw-bold:700; --d-fw-xbold:800;
  --d-t-fast:.12s; --d-t-normal:.15s; --d-t-slow:.25s;
  --d-space-3:12px; --d-space-4:16px; --d-space-5:24px;

  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:var(--d-space-5) var(--d-space-4);
  background:linear-gradient(135deg, #4F6EF7 0%, #3a56d4 100%);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Roboto,sans-serif;
  color:var(--d-ink);
}
.dsu-page *{box-sizing:border-box}

/* ============================================================
   卡片容器（对齐 .dsd-modal-box 风格）
   ============================================================ */
.dsd-card{
  width:100%; max-width:420px;
  background:var(--d-panel);
  border:none; border-radius:var(--d-r6);
  box-shadow:var(--d-shadow-xl);
  overflow:hidden;
}

/* Logo 居中 */
.dsd-card-brand{
  display:flex; align-items:center; justify-content:center;
  padding:36px 0 0;
}
.dsd-card-logo{
  /* 使用组件库中已定义的 SVG 填充色 */
}

/* 表单区 */
.dsd-card-body{
  padding:28px 32px 32px;
}

/* ============================================================
   表单 — 对齐组件库 .dsd-field / .dsd-btn 规范
   ============================================================ */
.dsd-form{display:flex;flex-direction:column;gap:0}

/* 字段间距覆盖（组件库 .dsd-field 有 margin-bottom，这里收紧） */
.dsd-card-body .dsd-field{margin-bottom:var(--d-space-4)}
.dsd-card-body .dsd-field:last-of-type{margin-bottom:var(--d-space-4)}

/* 行内字段（记住我 + 用户协议） */
.dsd-inline{
  display:flex; align-items:center; justify-content:space-between;
}
.dsd-agreement{
  font-size:var(--d-fs-sm); font-weight:var(--d-fw-semi);
  color:var(--d-accent); transition:color var(--d-t-normal);
}
.dsd-agreement:hover{color:var(--d-accent-2); text-decoration:underline}

/* 验证码行 */
.dsd-field-code .dsd-code-row{display:flex; gap:8px}
.dsd-field-code .dsd-code-row input{flex:1; min-width:0}

/* 验证码按钮 */
.dsu-code-btn{
  flex:0 0 auto; white-space:nowrap;
  padding:0 16px; height:42px;
  border:1px solid var(--d-accent); border-radius:var(--d-r3);
  background:var(--d-panel); color:var(--d-accent);
  font-family:inherit; font-size:var(--d-fs-sm); font-weight:var(--d-fw-semi);
  cursor:pointer; transition:background var(--d-t-normal),color var(--d-t-normal);
  -webkit-appearance:none;
}
.dsu-code-btn:hover:not(:disabled){background:var(--d-accent); color:#fff}
.dsu-code-btn:disabled{opacity:.5; cursor:not-allowed; border-color:var(--d-line); color:var(--d-ink-400)}

/* 提交按钮上边距 */
.dsd-card-body .dsd-btn[type="submit"]{margin-top:4px}

/* ============================================================
   底部链接行
   ============================================================ */
.dsd-form-foot{
  display:flex; align-items:center; justify-content:center;
  gap:var(--d-space-3); margin-top:var(--d-space-5);
}
.dsd-link{
  font-size:var(--d-fs-sm); font-weight:var(--d-fw-semi);
  color:var(--d-ink-400); cursor:pointer;
  transition:color var(--d-t-normal);
}
.dsd-link:hover{color:var(--d-accent)}
.dsd-link-sep{color:var(--d-line-strong); pointer-events:none}

/* ============================================================
   消息提示（保留 dsu-msg 不变，DSD JS 依赖此类名）
   ============================================================ */
.dsu-msg{
  margin:0 0 var(--d-space-4); padding:10px 14px;
  border-radius:var(--d-r3); font-size:var(--d-fs-sm); line-height:1.5;
  display:none;
}
.dsu-msg.dsu-msg--err{background:var(--d-bad-bg); border:1px solid var(--d-bad-line); color:var(--d-bad)}
.dsu-msg.dsu-msg--ok{background:var(--d-ok-bg); border:1px solid var(--d-ok-line); color:var(--d-ok)}

/* 面板显示控制 */
.dsu-panel{display:none}
.dsu-panel.active{display:block}

/* ============================================================
   响应式
   ============================================================ */
@media(max-width:480px){
  .dsu-page{padding:var(--d-space-4) var(--d-space-3)}
  .dsd-card{max-width:100%; border-radius:var(--d-r5)}
  .dsd-card-brand{padding:28px 0 0}
  .dsd-card-body{padding:24px 20px 28px}
  .dsd-card-body .dsd-field{margin-bottom:var(--d-space-3)}
  .dsd-form-foot{margin-top:var(--d-space-4)}
}