/* 登录页样式 · 左右分栏 SaaS 风 (2026 改版)
   仅供 index.jsp 使用。配合 bootstrap.css / bootstrapValidator 一起加载,
   本文件在它们之后加载,负责覆盖默认外观。 */
:root{
  --brand-1:#4f46e5;      /* indigo */
  --brand-2:#7c3aed;      /* violet */
  --brand-3:#0ea5e9;      /* sky    */
  --ink:#0f172a;          /* slate-900 */
  --ink-soft:#475569;     /* slate-600 */
  --line:#e2e8f0;         /* slate-200 */
  --bg:#f8fafc;           /* slate-50  */
  --field:#ffffff;
  --focus:#6366f1;
  --danger:#dc2626;
  --radius:14px;
  --shadow:0 24px 60px -20px rgba(15,23,42,.28);
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.shell{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  min-height:100vh;
}

/* ---------- 左侧:品牌面板 ---------- */
.brand{
  position:relative;
  overflow:hidden;
  color:#fff;
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(14,165,233,.55), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(124,58,237,.65), transparent 55%),
    linear-gradient(135deg, var(--brand-1) 0%, var(--brand-2) 55%, #5b21b6 100%);
  padding:56px 60px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.brand::before,
.brand::after{
  content:"";
  position:absolute;
  border-radius:50%;
  filter:blur(2px);
  pointer-events:none;
}
.brand::before{
  width:340px;height:340px;
  right:-90px;top:-70px;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 70%);
}
.brand::after{
  width:420px;height:420px;
  left:-140px;bottom:-160px;
  background:radial-gradient(circle at 50% 50%, rgba(14,165,233,.45), rgba(14,165,233,0) 70%);
}

.brand-top{display:flex;align-items:center;gap:12px;position:relative;z-index:2;}
.mark{
  width:46px;height:46px;border-radius:12px;
  background:#fff;
  border:1px solid rgba(255,255,255,.55);
  display:grid;place-items:center;
  box-shadow:0 4px 12px rgba(0,0,0,.12);
}
.mark img{width:34px;height:34px;display:block;object-fit:contain;}
.mark svg{display:block;}
.wordmark{display:flex;flex-direction:column;line-height:1.25;}
.wordmark .wm-title{font-size:18px;font-weight:600;letter-spacing:1px;}
.wordmark .wm-sub{font-size:12px;font-weight:400;letter-spacing:2px;color:rgba(255,255,255,.72);margin-top:2px;}

.brand-mid{position:relative;z-index:2;max-width:480px;}
.brand-mid h1{
  font-size:42px;
  line-height:1.18;
  margin:0 0 18px;
  font-weight:700;
  letter-spacing:.5px;
}
.brand-mid p.tagline{
  font-size:17px;
  line-height:1.7;
  margin:0 0 34px;
  color:rgba(255,255,255,.86);
}

.features{list-style:none;padding:0;margin:0;display:grid;gap:14px;}
.features li{display:flex;align-items:center;gap:12px;font-size:15px;color:rgba(255,255,255,.92);}
.features .dot{
  flex:0 0 auto;
  width:26px;height:26px;border-radius:8px;
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.25);
  display:grid;place-items:center;
}

.illus{position:relative;z-index:2;margin-top:30px;}
.illus svg{width:100%;max-width:520px;height:auto;display:block;}

.brand-foot{position:relative;z-index:2;font-size:13px;color:rgba(255,255,255,.7);}

/* ---------- 右侧:登录表单 ---------- */
.auth{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:48px;
}
.auth-card{width:100%;max-width:400px;}

.auth-head{margin-bottom:30px;}
.auth-head .eyebrow{
  font-size:13px;font-weight:600;letter-spacing:.6px;
  color:var(--brand-1);text-transform:uppercase;
  margin:0 0 10px;
}
.auth-head h2{font-size:26px;margin:0 0 8px;font-weight:700;color:var(--ink);}
.auth-head p{margin:0;color:var(--ink-soft);font-size:14px;}

.form-signin{display:grid;gap:18px;}
.form-signin .form-group{margin:0;}

.form-signin label,
.field label{
  display:block;
  font-size:13px;font-weight:600;
  color:var(--ink);
  margin-bottom:7px;
}
.input-wrap{position:relative;}
.input-wrap .icn{
  position:absolute;left:13px;top:23px;transform:translateY(-50%);
  color:#94a3b8;pointer-events:none;display:flex;
}
.form-signin .form-control,
.form-signin input[type="text"],
.form-signin input[type="password"]{
  width:100%;
  height:46px;
  padding:0 14px 0 40px;
  font-size:15px;
  color:var(--ink);
  background:var(--field);
  border:1px solid var(--line);
  border-radius:10px;
  outline:none;
  box-shadow:none;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.form-signin input::-webkit-input-placeholder{color:#a3aec0;font-style:normal;}
.form-signin input::placeholder{color:#a3aec0;font-style:normal;}
.form-signin .form-control:hover,
.form-signin input:hover{border-color:#cbd5e1;}
.form-signin .form-control:focus,
.form-signin input:focus{
  border-color:var(--focus);
  box-shadow:0 0 0 4px rgba(99,102,241,.16);
  background:#fff;
}
.input-wrap:focus-within .icn{color:var(--focus);}

.btn-submit{
  width:100%;
  height:48px;
  border:none;border-radius:10px;
  background:linear-gradient(135deg, var(--brand-1), var(--brand-2));
  color:#fff;
  font-size:16px;font-weight:600;letter-spacing:4px;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .08s, box-shadow .2s, filter .2s;
  box-shadow:0 10px 24px -8px rgba(79,70,229,.6);
}
.btn-submit:hover{filter:brightness(1.06);box-shadow:0 14px 28px -8px rgba(79,70,229,.7);}
.btn-submit:active{transform:translateY(1px);}
.btn-submit:focus-visible{outline:3px solid rgba(99,102,241,.5);outline-offset:2px;}
.btn-submit svg{display:block;}

.auth-foot{
  margin-top:28px;text-align:center;
  font-size:12.5px;color:#94a3b8;
}
.auth-foot .beian{color:inherit;text-decoration:none;}
.auth-foot .beian:hover{color:var(--brand-1);text-decoration:underline;}
.brand-foot .beian{color:inherit;text-decoration:none;}
.brand-foot .beian:hover{color:#fff;text-decoration:underline;}

/* ---------- bootstrapValidator 校验态 ---------- */
.form-signin .help-block{
  color:var(--danger);
  font-size:12px;line-height:1.4;
  margin:6px 0 0;
}
.form-signin .has-error .form-control{
  border-color:var(--danger);
  box-shadow:0 0 0 4px rgba(220,38,38,.14);
}
.form-signin .has-error .icn{color:var(--danger);}
.form-signin .has-success .form-control{border-color:var(--line);}

/* ---------- 响应式 ---------- */
@media (max-width:900px){
  .shell{grid-template-columns:1fr;}
  .brand{padding:34px 26px 40px;min-height:auto;}
  .brand-mid h1{font-size:30px;}
  .brand-mid p.tagline{font-size:15px;margin-bottom:22px;}
  .features{display:none;}
  .illus{display:none;}
  .brand-foot{display:none;}
  .auth{padding:34px 24px 48px;align-items:flex-start;}
  .auth-card{max-width:440px;margin:0 auto;}
}
@media (max-width:420px){
  .brand{padding:28px 20px 32px;}
  .brand-mid h1{font-size:26px;}
  .auth{padding:28px 20px 40px;}
}