/* ============================================================
   登录页样式 —— 1:1 移植自原型 _notes/login-preview.html
   ============================================================ */
:root{
  --brand-50:#EFF6FF;--brand-100:#DBEAFE;--brand-500:#3B82F6;--brand-600:#2563EB;--brand-700:#1D4ED8;
  --teal-600:#0D9488;
  --ink-900:#0F172A;--ink-700:#334155;--ink-500:#64748B;--ink-400:#94A3B8;
  --line:#E2E8F0;
  --err:#DC2626;--err-bg:#FEF2F2;
  --ok:#16A34A;--ok-bg:#F0FDF4;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{font-family:"PingFang SC","Microsoft YaHei","Segoe UI",system-ui,sans-serif;background:#fff;color:var(--ink-700);}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
input{font-family:inherit;}

.login-wrap{
  display:grid;
  grid-template-columns:minmax(400px,46%) 1fr;
  min-height:100vh;
  width:100%;
  background:#fff;
  animation:fadein .22s ease-out;
}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.login-wrap{animation:none}}

.brand-pane{
  background:var(--ink-900);color:#fff;position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;padding:64px 60px;
}
.brand-pane::after{content:"";position:absolute;right:-140px;top:-140px;width:420px;height:420px;border-radius:50%;background:rgba(37,99,235,.20);}
.brand-pane::before{content:"";position:absolute;left:-100px;bottom:-160px;width:340px;height:340px;border-radius:50%;background:rgba(13,148,136,.16);}
.brand-pane .bp-dot{position:absolute;right:60px;bottom:-60px;width:150px;height:150px;border-radius:50%;background:rgba(37,99,235,.08);}
.brand-pane>*{position:relative;z-index:1;}
.bp-logo{display:flex;align-items:center;gap:13px;margin-bottom:36px;}
.bp-logo .mk{width:44px;height:44px;border-radius:12px;background:var(--brand-600);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.bp-logo .mk svg{width:22px;height:22px;}
.bp-logo b{font-size:19px;letter-spacing:.02em;display:block;}
.bp-logo small{display:block;font-size:11px;color:#64748B;letter-spacing:.18em;margin-top:2px;}
.brand-pane h1{font-size:34px;font-weight:600;line-height:1.4;letter-spacing:.01em;}
.brand-pane h1 em{font-style:normal;color:var(--brand-500);}
.bp-sub{color:#94A3B8;font-size:14px;margin-top:12px;line-height:1.8;}
.bp-feats{margin-top:44px;display:flex;flex-direction:column;gap:18px;}
.bf{display:flex;gap:14px;align-items:flex-start;}
.bf .ic{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.bf .ic svg{width:17px;height:17px;}
.bf b{display:block;font-size:14.5px;font-weight:600;color:#E2E8F0;}
.bf span{font-size:12.5px;color:#94A3B8;line-height:1.7;}
.bp-foot{position:absolute;bottom:26px;left:60px;font-size:12px;color:#475569;z-index:1;}

.login-pane{display:flex;align-items:center;justify-content:center;padding:40px;background:#F1F5F9;}
.login-box{width:100%;max-width:440px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:40px;box-shadow:0 1px 2px rgba(15,23,42,.04),0 12px 32px rgba(15,23,42,.06);}
.login-box h2{font-size:23px;font-weight:600;color:var(--ink-900);}
.login-box .lg-sub{font-size:13.5px;color:var(--ink-500);margin:8px 0 28px;}
.login-err{display:none;margin-bottom:14px;font-size:13px;color:var(--err);background:var(--err-bg);border:1px solid #FECACA;border-radius:8px;padding:9px 13px;line-height:1.6;}
.login-err.show{display:block;}
.login-ok{display:none;margin-bottom:14px;font-size:13px;color:var(--ok);background:var(--ok-bg);border:1px solid #BBF7D0;border-radius:8px;padding:9px 13px;line-height:1.6;}
.login-ok.show{display:block;}
.fld-label{display:block;font-size:13.5px;font-weight:600;color:var(--ink-700);margin-bottom:8px;}
.fld{margin-bottom:18px;}
.ctl{display:flex;align-items:center;border:1px solid var(--line);border-radius:8px;background:#FAFBFC;transition:.15s;}
.ctl:focus-within{border-color:var(--brand-600);box-shadow:0 0 0 3px var(--brand-100);background:#fff;}
.ctl input{flex:1;border:none;outline:none;background:transparent;padding:12px 14px;font-size:15px;color:var(--ink-900);min-width:0;}
.ctl input::placeholder{color:var(--ink-400);}
.ctl svg{margin-right:13px;flex-shrink:0;}
.ctl.err-state{border-color:var(--err);box-shadow:0 0 0 3px #FECACA;}
.fld-err{display:none;margin-top:6px;font-size:12px;color:var(--err);}
.fld-err.show{display:block;}
.form-options{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;}
.remember{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--ink-500);cursor:pointer;}
.remember input{position:absolute;opacity:0;width:0;height:0;}
.remember .box{width:16px;height:16px;border-radius:4px;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;background:#fff;transition:.15s;}
.remember input:checked + .box{background:var(--brand-600);border-color:var(--brand-600);}
.remember .box svg{width:10px;height:10px;opacity:0;transition:.15s;}
.remember input:checked + .box svg{opacity:1;}
.forgot-link{font-size:13px;color:var(--brand-600);cursor:pointer;}
.forgot-link:hover{color:var(--brand-700);}
.login-submit{width:100%;height:46px;border-radius:8px;background:var(--brand-600);color:#fff;font-size:16px;font-weight:600;margin-top:4px;transition:.15s;}
.login-submit:hover{background:var(--brand-700);}
.login-submit:active{transform:scale(.98);}
.login-submit:disabled{background:var(--brand-100);cursor:not-allowed;}
.demo-hint{margin-top:16px;font-size:12px;color:var(--ink-400);text-align:center;}

/* —— 验证码行 —— */
.code-row{display:flex;gap:10px;}
.ctl-code{flex:1;min-width:0;}
.send-btn{height:auto;flex-shrink:0;padding:0 14px;border-radius:8px;border:1px solid var(--brand-600);color:var(--brand-600);background:#fff;font-size:13.5px;font-weight:600;transition:.15s;white-space:nowrap;}
.send-btn:hover{background:var(--brand-50);}
.send-btn:active{transform:scale(.97);}
.send-btn:disabled{border-color:var(--line);color:var(--ink-400);cursor:not-allowed;background:#FAFBFC;}
.login-sms{display:none;margin-bottom:14px;font-size:13px;color:var(--teal-700);background:#F0FDFA;border:1px solid #99F6E4;border-radius:8px;padding:9px 13px;line-height:1.6;word-break:break-all;}
.login-sms.show{display:block;}

.m-brand{display:none;}
@media (max-width: 960px){
  .login-wrap{grid-template-columns:1fr;}
  .brand-pane{display:none;}
  .login-pane{padding:24px;}
  .login-box{padding:28px;}
  .m-brand{display:flex;align-items:center;gap:10px;padding:0;}
  .m-brand .mk{width:40px;height:40px;border-radius:11px;background:var(--brand-600);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .m-brand .mk svg{width:20px;height:20px;}
  .m-brand b{font-size:17px;color:var(--ink-900);}
  .m-brand small{display:block;font-size:10.5px;color:var(--ink-400);letter-spacing:.18em;}
}