/* ===== 辅理善邮箱登录页 · 对齐 mail.163.com ===== */
:root{
  --blue:#4573f6;
  --blue-dark:#3560e0;
  --navy:#0b2447;
  --ink:#333;
  --gray:#666;
  --light:#999;
  --line:#dcdfe6;
  --soft:#f7faff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:#fff;color:var(--ink);
  font:14px/1.6 -apple-system,"PingFang SC","Microsoft YaHei","Segoe UI",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100vh;
  background:linear-gradient(180deg,#f6f9ff 0%,#ffffff 34%,#ffffff 100%);
}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- 顶部导航 ---------- */
.hd{
  height:72px;display:flex;align-items:center;justify-content:space-between;
  padding:0 40px;flex:0 0 auto;
}
.hd-brand{display:flex;align-items:center;gap:10px;text-decoration:none!important}
.hd-logo{width:38px;height:38px;display:block}
.hd-logo svg{width:100%;height:100%;display:block}
.hd-name{display:flex;flex-direction:column;line-height:1.15}
.hd-name b{font-size:20px;color:#15305c;letter-spacing:.5px}
.hd-name i{font-style:normal;font-size:12px;color:#9aa4b2;letter-spacing:.3px}
.hd-sep{width:1px;height:26px;background:#e3e7ee;margin:0 14px}
.hd-tag{font-size:14px;color:#6b7a90;letter-spacing:.5px}
.hd-nav{display:flex;align-items:center;gap:22px;font-size:13px;color:#5d6b80}
.hd-nav a{color:#5d6b80}
.hd-nav a:hover{color:var(--blue)}

/* ---------- 主区域 ---------- */
.main{
  flex:1 1 auto;width:100%;max-width:1200px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:40px;
  padding:36px 40px 12px;
}
.hero{flex:1;min-width:0;position:relative;padding-bottom:8px}
.hero-kicker{
  display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;
  color:#e2622b;letter-spacing:.5px;margin-bottom:14px;
}
.k-dot{width:8px;height:8px;border-radius:2px;background:#e2622b;display:inline-block}
.hero h1{
  margin:0 0 20px;font-size:42px;line-height:1.28;font-weight:800;color:var(--navy);
  letter-spacing:.5px;
}
.hero-sub{margin:0 0 26px;font-size:15px;line-height:2;color:#5f6d82}
.hero-cta{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:150px;height:48px;padding:0 30px;border-radius:24px;
  background:linear-gradient(135deg,#ff8a3d,#ff5b3c);color:#fff!important;
  font-size:16px;font-weight:600;letter-spacing:1px;
  box-shadow:0 8px 20px rgba(255,110,60,.28);
  transition:transform .15s,box-shadow .15s;text-decoration:none!important;
}
.hero-cta:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(255,110,60,.36)}
.hero-art{margin-top:22px;max-width:600px}
.hero-art svg{width:100%;height:auto;display:block}

/* ---------- 登录卡片 ---------- */
.card{
  position:relative;flex:0 0 400px;width:400px;background:#fff;border-radius:12px;
  box-shadow:0 2px 6px rgba(0,0,0,.1);padding:44px 36px 26px;margin-bottom:10px;
}
.card-qr{position:absolute;top:16px;right:16px;width:34px;height:34px;opacity:.9}
.card-qr svg{width:100%;height:100%}
.card h2{
  margin:0 0 30px;text-align:center;font-size:22px;font-weight:700;color:#1b1f27;letter-spacing:1px;
}
.field{position:relative;margin-bottom:16px}
.field input{
  width:100%;height:52px;border:1px solid var(--line);border-radius:4px;
  padding:0 92px 0 16px;font:15px/1.5 inherit;color:#222;outline:none;background:#fff;
  transition:border-color .15s,box-shadow .15s;
}
.field input::placeholder{color:#b0b6c2}
.field input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(69,115,246,.1)}
.suffix{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  font-size:15px;color:#7d8794;pointer-events:none;
}
.eye{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  width:28px;height:28px;border:none;background:transparent;color:#b9c0cc;cursor:pointer;
  display:grid;place-items:center;padding:0;
}
.eye svg{width:20px;height:20px}
.eye:hover{color:#8e97a6}
.row{display:flex;align-items:center;justify-content:space-between;margin:2px 0 6px}
.check{display:flex;align-items:center;gap:6px;font-size:13.5px;color:#5d6b80;cursor:pointer;user-select:none}
.check input{width:14px;height:14px;margin:0;accent-color:var(--blue)}
.forgot{font-size:13.5px;color:#8e97a6}
.forgot:hover{color:var(--blue)}
.err{min-height:20px;font-size:13px;color:#e34d59;margin:2px 0 6px;line-height:20px}
.submit{
  width:100%;height:56px;border:none;border-radius:4px;cursor:pointer;
  background:var(--blue);color:#fff;font-size:20px;font-weight:600;letter-spacing:6px;
  transition:background .15s;margin-top:4px;
}
.submit:hover{background:var(--blue-dark)}
.submit:disabled{opacity:.72;cursor:default}
.sub-links{margin-top:16px;text-align:center;font-size:13.5px;color:#7d8794}
.sub-links a{color:#5d6b80}
.sub-links a:hover{color:var(--blue)}
.terms{margin-top:34px;text-align:center;font-size:13.5px;color:#7d8794}
.terms a{color:#5d6b80}
.terms a:hover{color:var(--blue)}

/* ---------- 页脚 ---------- */
.ft{flex:0 0 auto;padding:18px 20px 28px;text-align:center;color:#8b95a5;font-size:13px}
.ft-links{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.ft-links a{color:#8b95a5}
.ft-links a:hover{color:var(--blue)}
.ft-links i{font-style:normal;color:#d5dae2}
.ft-legal{margin-top:10px;color:#9aa4b2}
.ft-legal a{color:#9aa4b2}
.ft-legal a:hover{color:var(--blue)}

/* ---------- 响应式 ---------- */
@media (max-width: 1080px){
  .main{gap:28px;padding:24px 24px 8px}
  .hero h1{font-size:34px}
  .hero-art{max-width:460px}
}
@media (max-width: 900px){
  .hero{display:none}
  .main{justify-content:center;padding-top:16px}
  .card{flex:0 1 400px}
  .hd{padding:0 20px}
  .hd-tag,.hd-sep{display:none}
  .hd-nav{gap:14px}
}
@media (max-width: 520px){
  .card{width:100%;flex:1 1 auto;padding:32px 22px 22px;box-shadow:none}
  .sub{font-size:13px}
  .hd-nav{display:none}
}