/* ===================== 途煊教育 · 高大上登录页 ===================== */
:root{
  --lx-primary:#2563eb;
  --lx-primary-2:#0ea5e9;
  --lx-deep:#0b1f4d;
  --lx-deep-2:#16357a;
  --lx-ink:#0f172a;
  --lx-muted:#64748b;
  --lx-line:#e2e8f0;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body.login-page{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  background:#eef2f7;color:var(--lx-ink);-webkit-font-smoothing:antialiased;
}
.lx-shell{display:flex;min-height:100vh;}

/* ---------- 左侧品牌区 ---------- */
.lx-aside{
  position:relative;flex:1 1 52%;max-width:640px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;padding:52px 56px;
  color:#fff;
  background:linear-gradient(135deg,#0b1f4d 0%,#16357a 40%,#2563eb 78%,#0ea5e9 100%);
}
.lx-aside::before,.lx-aside::after{content:"";position:absolute;border-radius:50%;filter:blur(6px);opacity:.5;}
.lx-aside::before{width:380px;height:380px;background:radial-gradient(circle,#38bdf8 0%,transparent 70%);top:-130px;right:-110px;}
.lx-aside::after{width:320px;height:320px;background:radial-gradient(circle,#818cf8 0%,transparent 70%);bottom:-120px;left:-90px;}
.lx-grid{position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(circle at 32% 28%,#000,transparent 78%);
          mask-image:radial-gradient(circle at 32% 28%,#000,transparent 78%);}

.lx-brand{position:relative;z-index:2;display:flex;align-items:center;gap:15px;}
.lx-logo{width:54px;height:54px;border-radius:15px;flex:0 0 auto;
  background:rgba(255,255,255,.16);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 28px rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.28);}
.lx-brand-text b{font-size:23px;letter-spacing:3px;font-weight:800;line-height:1.1;}
.lx-brand-text span{display:block;font-size:12px;letter-spacing:4px;opacity:.82;margin-top:3px;}

.lx-hero{position:relative;z-index:2;margin:auto 0;}
.lx-hero h1{font-size:36px;line-height:1.4;font-weight:800;letter-spacing:1px;margin:0 0 18px;}
.lx-hero p{font-size:15px;line-height:1.95;opacity:.86;margin:0;max-width:430px;}

.lx-feats{position:relative;z-index:2;display:flex;flex-direction:column;gap:16px;margin-top:38px;}
.lx-feat{display:flex;align-items:flex-start;gap:14px;}
.lx-feat .ic{width:42px;height:42px;border-radius:12px;flex:0 0 auto;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;}
.lx-feat b{font-size:15px;font-weight:600;line-height:1.4;}
.lx-feat small{display:block;opacity:.8;font-size:12.5px;margin-top:3px;}

.lx-foot{position:relative;z-index:2;font-size:12.5px;opacity:.7;letter-spacing:.5px;}

/* ---------- 右侧表单区 ---------- */
.lx-main{flex:1 1 48%;display:flex;align-items:center;justify-content:center;padding:44px 24px;background:#f8fafc;}
.lx-card{width:100%;max-width:388px;}
.lx-card h2{font-size:27px;font-weight:800;margin:0 0 7px;letter-spacing:.5px;}
.lx-card .lx-sub{color:var(--lx-muted);font-size:14px;margin:0 0 32px;}
.lx-alert{padding:11px 14px;border-radius:9px;margin-bottom:18px;font-size:13.5px;
  background:#fff5f5;color:#c53030;border:1px solid #fed7d7;}

.lx-field{position:relative;margin-bottom:18px;}
.lx-field .lf-ic{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:#94a3b8;pointer-events:none;}
.lx-field input{width:100%;padding:14px 14px 14px 46px;
  border:1.5px solid var(--lx-line);border-radius:12px;font-size:15px;
  background:#fff;color:var(--lx-ink);transition:border-color .15s,box-shadow .15s;}
.lx-field input::placeholder{color:#aab4c2;}
.lx-field input:focus{outline:none;border-color:var(--lx-primary);box-shadow:0 0 0 4px rgba(37,99,235,.13);}

.lx-row{display:flex;align-items:center;justify-content:space-between;margin:-2px 0 22px;font-size:13.5px;}
.lx-remember{display:flex;align-items:center;gap:7px;color:var(--lx-muted);cursor:pointer;user-select:none;}
.lx-remember input{accent-color:var(--lx-primary);width:15px;height:15px;}

.lx-btn{width:100%;padding:14px;border:none;border-radius:12px;font-size:15.5px;font-weight:700;color:#fff;cursor:pointer;
  background:linear-gradient(135deg,#2563eb 0%,#0ea5e9 100%);
  box-shadow:0 10px 24px rgba(37,99,235,.32);
  display:flex;align-items:center;justify-content:center;gap:9px;
  transition:transform .12s,box-shadow .12s,filter .12s;}
.lx-btn:hover{transform:translateY(-1px);filter:brightness(1.05);box-shadow:0 14px 30px rgba(37,99,235,.42);}
.lx-btn:active{transform:translateY(0);}

.lx-card .lx-install{text-align:center;margin-top:20px;font-size:13px;color:var(--lx-muted);}
.lx-card .lx-install a{color:var(--lx-primary);text-decoration:none;}
.lx-card .lx-install a:hover{text-decoration:underline;}

/* ---------- 响应式：窄屏隐藏品牌区，卡片居中浮层 ---------- */
@media(max-width:880px){
  .lx-aside{display:none;}
  .lx-main{background:linear-gradient(135deg,#0b1f4d 0%,#2563eb 100%);}
  .lx-card{background:#fff;border-radius:20px;padding:36px 30px;box-shadow:0 24px 60px rgba(0,0,0,.28);}
  .lx-card h2,.lx-card .lx-sub{text-align:center;}
  .lx-row{justify-content:center;gap:16px;}
}
@media(max-width:420px){
  .lx-card{padding:30px 22px;}
  .lx-hero h1{font-size:30px;}
}