/* ============================================================================
   常熟市建筑行业从业人员信息系统 · 登录页族样式（2026-10-25）
   ----------------------------------------------------------------------------
   服务于三个视图：login/index.html（登录）、login/forgot.html（找回密码/账号）、
   login/signup.html（注册）。三页共用同一套左右分栏外壳，因此样式集中在这一个
   文件里维护，不要再往模板里塞 `<style>` 复制粘贴。

   【为什么不动 page.css】
   page.css 里的 `.login-card` / `.lg-*` 还被后台其它页面与旧浮层引用，
   直接改公共文件会连带影响。这里用 `.lg-split .lg-panel xxx`（3 个类）压过
   page.css 的 `.login-card .xxx`（2 个类），不依赖 CSS 加载顺序。

   【命名约定】
   .lg-split  = 双栏卡片本体（三页都加这个类）
   .lg-hero   = 左栏品牌区
   .lg-panel  = 右栏表单区
   ========================================================================== */

/* ---------- 页面底：深蓝 + 细网格 ---------- */
.login-wrap{
  background:
    radial-gradient(1100px 560px at 78% -12%, rgba(64,150,255,.26), transparent 62%),
    radial-gradient(760px 460px at -8% 108%, rgba(26,188,156,.12), transparent 62%),
    linear-gradient(150deg,#0a1f38 0%,#0f3157 52%,#164a80 100%);
  padding:24px;
  /* 用 flex-start + 卡片 margin:auto 做居中：
     内容比视口高时不会把顶部裁到滚不到的地方（align-items:center 会）。 */
  display:flex;
  align-items:flex-start;
  justify-content:center;
  min-height:100vh;
}
.login-wrap::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.032) 1px, transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(circle at 50% 45%, #000 30%, transparent 78%);
  -webkit-mask-image:radial-gradient(circle at 50% 45%, #000 30%, transparent 78%);
}
.login-wrap .login-card{position:relative;z-index:1}

/* ---------- 卡片外壳：双栏 ---------- */
.login-card.lg-split{
  width:min(1000px, 94vw);
  min-width:0;              /* flex item 默认 min-width:auto，input 固有宽度会撑破卡片 */
  min-height:600px;
  margin:auto;              /* 见 .login-wrap 注释 */
  padding:0;                /* 压掉 page.css 的 30px 内边距，改由左右栏各自控制 */
  display:flex;
  align-items:stretch;
  border-radius:18px;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 34px 74px rgba(3,16,36,.52), 0 2px 8px rgba(3,16,36,.28);
  animation:lgIn .4s cubic-bezier(.22,.7,.3,1);
}
@keyframes lgIn{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:none}
}

/* ---------- 左：品牌区 ---------- */
.lg-split .lg-hero{
  position:relative;flex:0 0 44%;min-width:0;
  padding:40px 38px 34px;
  display:flex;flex-direction:column;
  color:#fff;overflow:hidden;
  background:linear-gradient(158deg,#0b2643 0%,#123c68 46%,#1a5290 100%);
}
/* 网格纹理（只在左栏内，和整页网格同向但不连片，边界更干净） */
.lg-split .lg-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(120% 90% at 10% 0%, #000 20%, transparent 82%);
  -webkit-mask-image:radial-gradient(120% 90% at 10% 0%, #000 20%, transparent 82%);
}
/* 右上角高光 */
.lg-split .lg-hero::after{
  content:"";position:absolute;right:-90px;top:-120px;width:330px;height:330px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, rgba(96,176,255,.28), transparent 66%);
}
.lg-split .lg-hero > *{position:relative;z-index:1}

/* 品牌行：LOGO + 名称 */
.lg-split .hero-brand{display:flex;align-items:center;gap:12px}
.lg-split .hero-logo{
  width:50px;height:50px;flex:0 0 50px;border-radius:50%;
  background:#fff;padding:3px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(2,14,32,.4), 0 0 0 3px rgba(255,255,255,.1);
}
.lg-split .hero-logo img{width:100%;height:100%;object-fit:contain;border-radius:50%;display:block}
.lg-split .hero-name{min-width:0}
.lg-split .hero-name b{
  display:block;font-size:16.5px;font-weight:600;color:#fff;line-height:1.35;
  letter-spacing:.3px;white-space:nowrap;
}
.lg-split .hero-name i{
  display:block;font-style:normal;font-size:10px;color:rgba(255,255,255,.5);
  letter-spacing:1.3px;margin-top:4px;white-space:nowrap;
}

/* 中部文案 */
.lg-split .hero-main{margin:auto 0;padding:26px 0 22px}
.lg-split .hero-main h2{
  font-size:26px;font-weight:700;line-height:1.5;color:#fff;letter-spacing:.5px;
}
.lg-split .hero-main h2 em{
  font-style:normal;display:inline-block;color:#7dbcff;
  text-shadow:0 2px 18px rgba(70,150,255,.35);
}
.lg-split .hero-main p{
  margin-top:16px;font-size:12.5px;line-height:1.95;
  color:rgba(255,255,255,.62);max-width:320px;
}

/* 底部说明 */
.lg-split .hero-foot{
  display:flex;flex-direction:column;gap:5px;
  font-size:11.5px;color:rgba(255,255,255,.42);line-height:1.6;
}

/* ---------- 右：表单区 ---------- */
.lg-split .lg-panel{
  flex:1;min-width:0;
  background:#fff;
  padding:36px 52px 28px;
  display:flex;flex-direction:column;
  /* 不设 overflow-y:auto —— 有它就可能在卡片内部再套一条滚动条；
     卡片高度本来就由内容决定，整页滚动更自然。 */
}
.lg-split .lg-head h2{
  font-size:24px;font-weight:700;color:#16283d;letter-spacing:.5px;line-height:1.3;
}
.lg-split .lg-head p{
  margin-top:7px;font-size:12.5px;color:#93a3b6;letter-spacing:.2px;
}

/* ---------- Tab：胶囊滑块 ---------- */
.lg-split .lg-tabs{
  position:relative;display:flex;margin:18px 0 15px;
  padding:4px;height:44px;
  background:#f1f5fa;border:1px solid #e7eef7;border-radius:10px;
}
.lg-split .lg-tabs .tab{
  position:relative;z-index:1;flex:1;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0;height:100%;border:0;background:none;
  font-size:13.5px;font-weight:500;letter-spacing:.3px;
  color:#7d8ea3;cursor:pointer;transition:color .2s ease;
}
.lg-split .lg-tabs .tab.on{color:#1b6fe0;font-weight:600}
.lg-split .lg-tabs .tab-line{
  position:absolute;z-index:0;top:4px;bottom:4px;height:auto;
  border-radius:8px;background:#fff;
  box-shadow:0 1px 3px rgba(16,40,80,.1), 0 2px 8px rgba(16,40,80,.06);
  transition:left .26s cubic-bezier(.4,0,.2,1), width .26s cubic-bezier(.4,0,.2,1);
}

/* ---------- 表单 ---------- */
.lg-split .lg-panel .lg-form{margin-top:0}
.lg-split .lg-panel .fd{position:relative;margin-bottom:13px}
.lg-split .lg-panel .fd label{
  display:flex;align-items:center;gap:6px;
  font-size:12.5px;font-weight:500;color:#4d5f74;
  margin-bottom:6px;letter-spacing:.2px;white-space:nowrap;
}
/* label 前的内联小图标（老结构遗留的 <svg class="li">，保留兼容） */
.lg-split .lg-panel .fd label .li{
  width:14px;height:14px;flex:0 0 14px;color:#8fa0b4;margin:0;
}
/* 输入框内左侧的图标。
   注意 z-index：input 在 DOM 里排在图标之后，白底会把图标整个盖掉，
   必须把图标抬到 input 之上（否则现象是「文字左侧留了 41px 空白、但没图标」）。
   SVG 上写 padding 无效，尺寸只能靠 width/height 直接给。 */
.lg-split .lg-panel .fd .fi{
  position:absolute;left:13px;bottom:13px;width:18px;height:18px;z-index:2;
  color:#a3b2c4;pointer-events:none;transition:color .15s ease;
}
.lg-split .lg-panel .fd:focus-within .fi{color:#1b6fe0}
.lg-split .lg-panel .inp{
  width:100%;height:44px;border:1px solid #e2e9f2;border-radius:8px;
  padding:0 13px;font-size:14px;color:#16283d;background:#fff;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.lg-split .lg-panel .fd .inp{padding-left:41px}   /* 给图标留位 */
.lg-split .lg-panel .inp::placeholder{color:#b3c0cf;font-size:13.5px}
.lg-split .lg-panel .inp:hover{border-color:#cfdcea}
.lg-split .lg-panel .inp:focus{
  outline:none;border-color:#1b6fe0;
  box-shadow:0 0 0 3px rgba(27,111,224,.12);
}

/* 验证码行 */
.lg-split .lg-panel .cap-row{display:flex;gap:10px;align-items:center}
.lg-split .lg-panel .cap-row .inp{flex:1;min-width:0;width:auto}
/* 图码保持服务端 PNG 原始 132×40，绝不缩放（拉伸会让数字变形、放大则发虚），
   靠 cap-row 的 align-items:center 与 44px 输入框居中对齐 */
.lg-split .lg-panel .cap-row img{
  flex:0 0 132px;width:132px;height:40px;border-radius:8px;
  border:1px solid #e2e9f2;cursor:pointer;background:#fff;
  transition:border-color .15s ease;
}
.lg-split .lg-panel .cap-row img:hover{border-color:#b9cde4}
/* 行内次要按钮（获取验证码 / 查询手机） */
.lg-split .lg-panel .cap-row .btn{
  flex:0 0 auto;height:44px;padding:0 16px;border-radius:8px;
  border:1px solid #cbdcf1;background:#f4f8fe;color:#1b6fe0;
  font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap;
  transition:.15s ease;
}
.lg-split .lg-panel .cap-row .btn:hover:not(:disabled){background:#e8f2ff;border-color:#a9c8ec}
.lg-split .lg-panel .cap-row .btn:disabled{opacity:.62;cursor:not-allowed}

/* 主按钮 */
.lg-split .lg-panel .btn-login{
  width:100%;height:46px;margin-top:8px;border-radius:8px;
  font-size:15.5px;font-weight:600;letter-spacing:2px;color:#fff;
  background:linear-gradient(96deg,#1a6ee0 0%,#3489f2 100%);
  box-shadow:0 8px 20px rgba(28,111,224,.3);
  transition:filter .15s ease, box-shadow .15s ease, transform .1s ease;
}
.lg-split .lg-panel .btn-login:hover:not(:disabled){
  filter:brightness(1.05);box-shadow:0 10px 24px rgba(28,111,224,.36);
}
.lg-split .lg-panel .btn-login:active:not(:disabled){transform:translateY(1px)}
.lg-split .lg-panel .btn-login:disabled{opacity:.62;cursor:not-allowed;box-shadow:none}

/* 面板切换动画：只淡入、不做位移。
   page.css 原先是 translateX(6px)，实测切换后表单会稳定右偏 6px 超出内容区。 */
.lg-split .lg-panel .pane.on{animation:lgFade .22s ease}
@keyframes lgFade{from{opacity:0}to{opacity:1}}

/* 错误 / 成功提示条（index 用 .lg-err，forgot/signup 用 .fg-err，样式统一） */
.lg-split .lg-panel .lg-err,
.lg-split .lg-panel .fg-err{
  display:none;
  background:#fdeeee;border:1px solid #f5c9c9;color:#d63f3f;
  font-size:12.5px;line-height:1.7;padding:9px 12px;border-radius:8px;
  margin-bottom:14px;
}
.lg-split .lg-panel .lg-err.on,
.lg-split .lg-panel .fg-err.on{display:block}
.lg-split .lg-panel .fg-err.ok{
  background:#e9f9f0;border-color:#b9e8cd;color:#0a7a43;
}

/* 辅助链接：纯文字、右对齐 */
.lg-split .lg-panel .lg-aux{margin-top:14px;justify-content:flex-end;gap:0}
.lg-split .lg-panel .lg-aux a{
  font-size:13px;color:#7b8b9e;background:none;border:0;
  padding:2px 0;border-radius:0;gap:5px;
}
.lg-split .lg-panel .lg-aux a:hover{color:#1b6fe0;background:none;border:0}
.lg-split .lg-panel .lg-aux a svg{color:inherit}
.lg-split .lg-panel .lg-aux .aux-sep{
  width:1px;height:12px;background:#dde5ef;margin:0 14px;
}

/* 底部版权 */
.lg-split .lg-foot,
.lg-split .lg-panel .lg-foot{
  margin-top:auto;padding-top:20px;
  text-align:center;font-size:11.5px;line-height:1.85;color:#aab7c6;
}
.lg-split .lg-panel .lg-foot .lg-help{color:#aab7c6;display:inline-block;margin-top:3px}
.lg-split .lg-panel .lg-foot .lg-help a{color:#1b6fe0;font-weight:500}
.lg-split .lg-panel .lg-foot .lg-help a:hover{text-decoration:underline}

/* ---------- 找回密码：反查绑定手机（原生 details 折叠，默认收起） ---------- */
.lg-split .lg-panel .fg-find{
  border-radius:10px;background:#f7fafd;
  border:1px dashed #cfdff2;margin-bottom:14px;
}
.lg-split .lg-panel .fg-find > summary{
  list-style:none;cursor:pointer;user-select:none;
  display:flex;align-items:center;gap:6px;
  padding:9px 14px;font-size:12px;color:#5c6f85;
}
.lg-split .lg-panel .fg-find > summary::-webkit-details-marker{display:none}
.lg-split .lg-panel .fg-find > summary::after{
  content:"展开";margin-left:auto;color:#1b6fe0;font-size:11.5px;
}
.lg-split .lg-panel .fg-find[open] > summary{
  border-bottom:1px solid #e4eef9;color:#33475e;font-weight:500;
}
.lg-split .lg-panel .fg-find[open] > summary::after{content:"收起"}
.lg-split .lg-panel .fg-find > .fd{padding:12px 14px 0;margin-bottom:0}
.lg-split .lg-panel .fg-find > .fd .inp{background:#fff}
.lg-split .lg-panel .fg-find > .fd-rst{padding:7px 14px 11px}
/* 查询结果 / 账号找回结果 */
.lg-split .lg-panel .fd-rst{
  font-size:12px;color:#7b8b9e;line-height:1.7;min-height:14px;
}
.lg-split .lg-panel .fd-rst.ok{color:#0a7a43}
.lg-split .lg-panel .fd-rst.bad{color:#d63f3f}
.lg-split .lg-panel .fd-rst b{color:#16283d}

/* ---------- 短信发送结果弹窗（沿用 .modal-mask > .modal 规范，仅调窄） ---------- */
.lg-dlg{width:432px}
.lg-dlg-ic{width:30px;height:30px;flex:0 0 30px;border-radius:9px;display:flex;
  align-items:center;justify-content:center}
.lg-dlg-ic.ok{background:var(--ok-bg);color:var(--ok)}
.lg-dlg-ic.err{background:#fdecec;color:#c0392b}
.lg-dlg-b{padding:16px 18px 6px;font-size:13px;line-height:1.75;color:var(--t1)}
.lg-dlg-b p{margin:0 0 9px}
.lg-dlg-b .rs{padding:9px 11px;border-radius:8px;background:#fdf3f3;border:1px solid #f6d6d6;
  color:#b8332a;font-size:12.5px;line-height:1.65;margin:0 0 10px}
.lg-dlg-b .tp{font-size:12px;color:var(--t3);line-height:1.7;margin:0}
.lg-dlg-b .li{margin:0;padding-left:17px;font-size:12px;color:var(--t2);line-height:1.85}
.lg-dlg-b .li li{margin:0}
.lg-dlg-ok{height:34px;padding:0 18px;border-radius:8px;background:var(--primary);color:#fff;
  font-size:13px;font-weight:600;border:0;cursor:pointer}
.lg-dlg-ok:hover{filter:brightness(.96)}

/* ---------- 自适应 ---------- */
@media (max-width:1180px){
  .lg-split .lg-hero{flex:0 0 40%;padding:34px 30px 30px}
  .lg-split .lg-panel{padding:36px 38px 26px}
  .lg-split .hero-main h2{font-size:23px}
}
/* 窄屏 / 平板：上下堆叠，左栏压成品牌条 */
@media (max-width:880px){
  .login-card.lg-split{
    flex-direction:column;width:min(520px,94vw);min-height:0;border-radius:16px;
  }
  .lg-split .lg-hero{flex:0 0 auto;padding:22px 24px 20px}
  .lg-split .hero-main{padding:18px 0 0}
  .lg-split .hero-main h2{font-size:20px;line-height:1.45}
  .lg-split .hero-main h2 br{display:none}
  .lg-split .hero-main h2 em{display:inline;margin-left:6px}
  .lg-split .hero-main p,
  .lg-split .hero-foot{display:none}
  .lg-split .lg-panel{padding:26px 24px 20px;overflow:visible}
}
/* 手机 */
@media (max-width:560px){
  .login-wrap{padding:0}
  .login-card.lg-split{width:100%;min-height:100vh;border-radius:0;border:0}
  .lg-split .hero-brand{gap:10px}
  .lg-split .hero-logo{width:42px;height:42px;flex:0 0 42px;padding:2px}
  .lg-split .hero-name b{font-size:14.5px;white-space:normal}
  .lg-split .hero-name i{font-size:9px;letter-spacing:.9px}
  .lg-split .hero-main{padding-top:14px}
  .lg-split .hero-main h2{font-size:17px}
  .lg-split .lg-head h2{font-size:21px}
  .lg-split .lg-panel{padding:22px 20px 18px}
  .lg-split .lg-tabs{margin:18px 0 16px}
}
/* 矮屏（笔记本 768~860 高）：页面留白与控件高度一起收一档，
   目的是让「找回密码 / 注册」这类字段多的页面也尽量一屏放完。
   注意图码 img 保持 40px 不动 —— 那是服务端 PNG 原始高度，改了会拉伸变形。 */
@media (max-height:860px) and (min-width:881px){
  .login-wrap{padding:14px}
  .lg-split .lg-hero{padding:30px 34px 26px}
  .lg-split .lg-panel{padding:28px 46px 22px}
  .lg-split .lg-tabs{margin:14px 0 12px}
  .lg-split .lg-panel .fd{margin-bottom:10px}
  .lg-split .lg-panel .fd label{margin-bottom:5px}
  .lg-split .lg-panel .inp{height:42px}
  .lg-split .lg-panel .fd .fi{bottom:12px}
  .lg-split .lg-panel .cap-row .btn{height:42px}
  .lg-split .lg-panel .btn-login{height:44px}
  .lg-split .lg-panel .lg-foot{padding-top:12px}
}