/* ===========================================================
   登录页样式
   设计语言与「瞰略公司管理系统」保持一致：
   藏青 / 纸白 / 宋体标题 / 2px 直角
   —— 仅登录页使用，系统内页仍走 Element Plus + base.css
   =========================================================== */

:root{
  --navy:#0B2A47;
  --navy-deep:#08213A;
  --ink:#132539;
  --paper:#F6F4EF;
  --paper-2:#FFFFFF;
  --line:rgba(11,42,71,0.12);
  --blue:#0C447C;
  --teal:#1D9E75;
  --coral:#D85A30;
  --amber:#BA7517;
  --muted:#5B6B7C;
  /* SimSun 兜底：用户多为 Windows，Songti SC 在该平台不存在 */
  --font-display:"Songti SC","Noto Serif SC","STSong","SimSun",serif;
  --font-body:"PingFang SC","Source Han Sans SC","Microsoft YaHei",sans-serif;
  --font-en:"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:14px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
button,input{font-family:inherit; font-size:inherit; color:inherit;}
[hidden]{display:none !important;}

/* ── 通用控件 ─────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 18px; border-radius:2px; font-size:13.5px; font-weight:600;
  cursor:pointer; border:1px solid var(--navy); background:transparent;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--navy); color:#fff;}
.btn-primary:hover{background:var(--navy-deep);}
.btn-line{border-color:var(--line); color:var(--muted);}
.btn-line:hover{border-color:var(--navy); color:var(--navy);}
.btn-block{width:100%;}
.btn[disabled]{opacity:.55; cursor:not-allowed; transform:none;}

.field{display:flex; flex-direction:column; gap:7px;}
.field label{font-size:12.5px; font-weight:600; color:var(--navy); letter-spacing:.5px;}
.input{
  width:100%; padding:10px 13px; background:var(--paper-2);
  border:1px solid var(--line); border-radius:2px; line-height:1.5;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.input:focus{
  outline:none; border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(12,68,124,0.1);
}
.input::placeholder{color:#9AA8B4;}

/* ===========================================================
   登录页布局
   =========================================================== */
.login-page{
  min-height:100vh; display:grid; grid-template-columns:1.05fr 0.95fr;
  background:var(--paper);
}

/* ── 左：品牌区 ───────────────────────────────────────────── */
.login-brand{
  position:relative; overflow:hidden; padding:56px 64px;
  display:flex; flex-direction:column; justify-content:space-between;
  background:
    radial-gradient(720px 420px at 78% 6%, rgba(29,158,117,0.16), transparent 62%),
    radial-gradient(680px 460px at 6% 96%, rgba(12,68,124,0.28), transparent 60%),
    var(--navy-deep);
  color:#fff;
}
.login-brand::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(700px 520px at 30% 40%, #000, transparent 72%);
          mask-image:radial-gradient(700px 520px at 30% 40%, #000, transparent 72%);
}
.login-brand > *{position:relative; z-index:1;}

.login-logo{display:flex; align-items:center; gap:12px;}
.login-logo svg{width:44px; height:44px;}
/* 中文公司名为主，英文名作副行置于其下 */
.login-logo .brand-cn{font-size:16px; letter-spacing:1px; line-height:1.4;}
.login-logo .brand-en{
  font-family:var(--font-en); font-weight:700; font-size:10.5px; letter-spacing:1.6px;
  color:rgba(255,255,255,0.55); line-height:1.4;
}

.login-slogan{max-width:460px;}
.login-slogan h1{
  font-family:var(--font-display); font-size:38px; font-weight:700;
  line-height:1.45; letter-spacing:2px; margin-bottom:18px;
}
.login-slogan h1 em{
  font-style:normal;
  background:linear-gradient(90deg,#7FB6F0,#5FD3A8);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.login-slogan .hl-sm{font-size:.8em;}
.login-slogan p{color:rgba(255,255,255,0.68); font-size:15px;}

/* 固定每行 3 个（而非按宽度自动折行），保证 3+3 的排布 */
.login-chain{display:grid; grid-template-columns:repeat(3, max-content); gap:8px;
             margin-top:30px; font-size:12.5px;}
.login-chain .node{
  padding:6px 13px; border-radius:2px; background:rgba(255,255,255,0.09);
  color:rgba(255,255,255,0.85); font-weight:600;
}
.login-foot{font-size:12px; color:rgba(255,255,255,0.45);}

/* ── 右：登录表单 ─────────────────────────────────────────── */
.login-panel{display:flex; align-items:center; justify-content:center; padding:48px 32px;}
.login-card{width:100%; max-width:388px;}
.login-card h2{
  font-family:var(--font-display); font-size:27px; font-weight:700;
  color:var(--navy-deep); letter-spacing:1px;
}
.login-card .sub{color:var(--muted); font-size:14px; margin-top:8px; margin-bottom:30px;}
.login-form{display:flex; flex-direction:column; gap:18px;}

.input-icon{position:relative;}
.input-icon > svg{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; color:var(--muted); pointer-events:none;
}
.input-icon .input{padding-left:38px;}
.pw-toggle{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  border:none; background:transparent; cursor:pointer; padding:7px;
  color:var(--muted); display:flex; border-radius:2px;
}
.pw-toggle:hover{color:var(--navy); background:rgba(11,42,71,0.05);}
.pw-toggle svg{width:16px; height:16px;}

/* 短信验证码：输入框 + 重发按钮 */
.sms-row{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center;}
.sms-row .input-icon{min-width:0;}
.sms-resend{min-width:112px; padding:10px 12px;}
.sms-hint{font-size:12px; color:var(--muted); line-height:1.6;}
.sms-hint b{color:var(--navy); font-weight:700;}

/* 提示条：错误 / 成功 / 警告 三态 */
.login-alert{
  display:none; align-items:center; gap:9px; padding:10px 13px; border-radius:2px;
  background:rgba(216,90,48,0.08); border:1px solid rgba(216,90,48,0.28);
  color:var(--coral); font-size:13px;
}
.login-alert.show{display:flex;}
.login-alert svg{width:15px; height:15px; flex-shrink:0;}
.login-alert.is-ok{
  background:rgba(29,158,117,0.09); border-color:rgba(29,158,117,0.3); color:var(--teal);
}
.login-alert.is-warn{
  background:rgba(186,117,23,0.09); border-color:rgba(186,117,23,0.3); color:var(--amber);
}

.login-hint{
  margin-top:26px; padding:14px 16px; border:1px dashed var(--line);
  border-radius:2px; font-size:12.5px; color:var(--muted); line-height:1.9;
}
.login-hint b{color:var(--navy); font-weight:700;}

/* ── 窄屏 ─────────────────────────────────────────────────── */
@media(max-width:900px){
  .login-page{grid-template-columns:1fr;}
  .login-brand{padding:34px 28px; gap:30px;}
  .login-slogan h1{font-size:27px;}
  .login-chain{margin-top:22px;}
  .login-foot{display:none;}
  .login-panel{padding:36px 24px 56px;}
}
@media(max-width:420px){
  .login-brand{padding:28px 22px;}
  .login-slogan h1{font-size:23px; letter-spacing:1px;}
  .login-slogan p{font-size:14px;}
  .sms-row{grid-template-columns:1fr;}
  .sms-resend{width:100%;}
}