:root{
  --b9:#0A0F1E;--b7:#1D4ED8;--b6:#2563EB;--b5:#06B6D4;--b50:#EFF5FF;
  --line:#E2E8F0;--bg:#F8FAFC;--t1:#131E36;--t2:#475569;--t3:#64748B;
  --red:#DC2626;--red-bg:#FEF2F2;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"Manrope","Noto Sans SC",-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--t1);font-size:14px;line-height:1.57;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:var(--b7)}
.page{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:55fr 45fr}

/* 左侧品牌叙事区 */
.brand-side{background:linear-gradient(155deg,#0A0F1E 0%,#131E36 55%,#1E3A8A 100%);color:#fff;padding:48px 56px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.brand-side::before{content:"";position:absolute;right:-120px;top:-120px;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(37,99,235,.32),transparent 70%)}
.brand-side::after{content:"";position:absolute;left:-80px;bottom:-80px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(6,182,212,.20),transparent 70%)}
.brand-top{display:flex;align-items:center;gap:12px;position:relative;z-index:1}
.brand-top .logo{width:42px;height:42px;flex:none}
.brand-top .logo svg,.brand-top .logo img{width:100%;height:100%;display:block;border-radius:10px}
.brand-top b{font-size:16px;font-weight:700;display:block}
.brand-top span{font-size:10px;letter-spacing:2.5px;color:rgba(255,255,255,.7)}
.brand-mid{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;justify-content:center;padding:28px 0}
.brand-mid h1{font-size:34px;font-weight:800;line-height:1.3;letter-spacing:.5px}
.brand-mid h1 em{font-style:normal;color:#67E8F9}
.brand-mid p{margin-top:14px;font-size:14px;color:rgba(255,255,255,.78);max-width:420px;line-height:1.8}
.feat{margin-top:36px;display:flex;flex-direction:column;gap:18px;position:relative;z-index:1}
.feat-item{display:flex;gap:14px;align-items:flex-start}
.feat-item .ic{width:38px;height:38px;border-radius:9px;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;flex:none}
.feat-item b{font-size:14px;font-weight:600;display:block;margin-bottom:3px}
.feat-item span{font-size:12.5px;color:rgba(255,255,255,.72)}
.brand-foot{position:relative;z-index:1;font-size:11px;color:rgba(255,255,255,.5);line-height:1.9;margin-top:40px}

/* 右侧表单区 */
.form-side{background:#fff;display:flex;align-items:center;justify-content:center;padding:32px}
.form-card{width:100%;max-width:380px}
.sec-title{text-align:center;font-size:20px;font-weight:700;margin-bottom:6px}
.sec-sub{text-align:center;color:var(--t3);font-size:13px;margin-bottom:24px}
.tabs{display:flex;border:1px solid var(--line);border-radius:8px;padding:3px;margin-bottom:20px;background:var(--bg)}
.tabs button{flex:1;padding:9px;border:none;background:transparent;font-size:13.5px;color:var(--t3);cursor:pointer;border-radius:6px;font-family:inherit;transition:.15s}
.tabs button.on{background:#fff;color:var(--b7);font-weight:600;box-shadow:0 1px 3px rgba(16,24,40,.08)}
.q{margin-bottom:15px}
.q label{display:block;font-size:13px;font-weight:500;margin-bottom:6px;color:var(--t1)}
.q input{width:100%;background:#fff;border:1px solid var(--line);border-radius:7px;padding:11px 13px;font-size:14px;font-family:inherit}
.q input:focus{outline:none;border-color:var(--b6);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.q .hint{font-size:11.5px;color:var(--t3);margin-top:5px}
.row2{display:flex;gap:10px}
.row2 input.code{flex:1}
.caprow{display:flex;gap:10px;align-items:stretch}
.cap-img{width:132px;height:44px;flex:none;border:1px solid var(--line);border-radius:7px;cursor:pointer;background:#F1F5F9;display:block;transition:opacity .15s}
.caprow input{flex:1;text-transform:uppercase;letter-spacing:1px}
.btn-code{flex:none;padding:0 16px;border:1px solid var(--b6);background:#fff;color:var(--b7);border-radius:7px;font-size:12.5px;cursor:pointer;font-family:inherit;white-space:nowrap}
.btn-code:disabled{border-color:var(--line);color:var(--t3);cursor:not-allowed}
.opts{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--t3);margin:4px 0 18px}
.opts label{display:flex;gap:6px;align-items:center;cursor:pointer}
.btn{display:block;width:100%;text-align:center;padding:12px;border-radius:7px;font-size:14.5px;border:none;background:linear-gradient(150deg,#1D4ED8,#2563EB);color:#fff;cursor:pointer;font-family:inherit;font-weight:600}
.btn:hover{background:linear-gradient(150deg,#1E40AF,#1D4ED8)}
.switch{text-align:center;font-size:13px;color:var(--t3);margin-top:18px}
.legal{text-align:center;font-size:11.5px;color:var(--t3);margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.legal a{margin:0 6px;color:var(--t3)}
.legal a:hover{color:var(--b7)}
.errbox{border:1px solid #FECACA;background:var(--red-bg);color:var(--red);border-radius:7px;padding:9px 12px;font-size:12.5px;margin-bottom:16px}
.agree{margin-bottom:15px;font-size:12.5px;color:var(--t2)}
.agree label{display:flex;gap:7px;align-items:flex-start;cursor:pointer}
.agree input{margin-top:3px;flex:none}

/* 弹层 */
.mask{display:none;position:fixed;inset:0;background:rgba(10,15,30,.5);z-index:50;align-items:center;justify-content:center;padding:20px}
.mask.show{display:flex}
.mask-card{background:#fff;border-radius:12px;max-width:340px;width:100%;padding:26px 24px;text-align:center;box-shadow:0 12px 40px -12px rgba(10,15,30,.3)}
.mask-card h4{font-size:15px;font-weight:700;margin-bottom:10px}
.mask-card p{font-size:13px;color:var(--t2);line-height:1.8}
.mask-card .phone{font-family:Manrope;font-size:18px;font-weight:800;color:var(--b7);display:block;margin:8px 0}
.mask-card button{margin-top:16px;width:100%;padding:10px;border:none;border-radius:7px;background:var(--b50);color:var(--b7);font-size:13.5px;cursor:pointer;font-family:inherit}

/* 移动端紧凑品牌头（桌面端隐藏，≤900px 显示） */
.brand-mobile{display:none;align-items:center;gap:10px;justify-content:center;margin-bottom:22px}
.brand-mobile .logo{width:38px;height:38px;flex:none}
.brand-mobile .logo svg,.brand-mobile .logo img{width:100%;height:100%;display:block;border-radius:9px}
.brand-mobile b{font-size:15px;display:block;line-height:1.2}
.brand-mobile span{font-size:9.5px;letter-spacing:2px;color:var(--b6);font-weight:600}

@media(max-width:900px){
  .page{grid-template-columns:1fr}
  .brand-side{display:none}
  .form-side{justify-content:flex-start;padding-top:38px}
  .brand-mobile{display:flex}
}