.login-page { min-height:100vh; display:flex; position:relative; overflow:hidden; background:var(--bg-dark); }
.login-bg { position:absolute; inset:0; z-index:0; pointer-events:none; }
.login-orb { position:absolute; filter:blur(100px); opacity:0.4; }
.orb-a { top:-200px; left:-200px; width:600px; height:600px; background:var(--magenta); }
.orb-b { bottom:-200px; right:-200px; width:600px; height:600px; background:var(--cyan); }
.login-grid { position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,0.1) 1px, transparent 1px); background-size:32px 32px; opacity:0.3; }

.login-container { display:flex; width:100%; max-width:1200px; margin:0 auto; z-index:1; padding-top:var(--nav-height); align-items:center; justify-content:center; gap:80px; min-height:100vh; }

.login-brand { flex:1; color:white; padding:40px; }
.brand-tag { display:inline-block; font-size:12px; font-weight:800; letter-spacing:2px; padding:6px 12px; background:rgba(200,255,0,0.1); color:var(--acid); border:1px solid rgba(200,255,0,0.2); margin-bottom:24px; }
.login-brand h1 { font-size:48px; font-weight:800; line-height:1.2; margin-bottom:24px; }
.login-brand p { font-size:18px; color:var(--text-secondary); line-height:1.6; margin-bottom:48px; }
.brand-stats { display:flex; gap:32px; margin-bottom:64px; }
.bs-item { display:flex; flex-direction:column; gap:8px; }
.bs-num { font-size:24px; font-weight:800; color:white; }
.bs-label { font-size:13px; color:var(--text-muted); text-transform:uppercase; letter-spacing:1px; }
.bs-divider { width:1px; background:rgba(255,255,255,0.1); }
.brand-testimonial { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.05); padding:24px; border-left:4px solid var(--cyan); }
.test-quote { font-size:16px; font-style:italic; margin-bottom:16px; color:var(--text-secondary); }
.test-author { display:flex; align-items:center; gap:12px; }
.test-avatar { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--bg-dark); }
.test-name { font-weight:600; font-size:14px; }
.test-role { font-size:12px; color:var(--text-muted); }

.login-panel { width:480px; flex-shrink:0; }
.login-card { background:rgba(6,6,10,0.8); backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,0.1); padding:40px; box-shadow:0 24px 48px rgba(0,0,0,0.5); }
.identity-tabs { display:flex; gap:16px; margin-bottom:32px; }
.identity-tab { flex:1; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.1); padding:16px; display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer; transition:var(--transition); text-align:center; }
.identity-tab:hover { background:rgba(255,255,255,0.06); }
.identity-tab.active { background:rgba(200,255,0,0.1); border-color:var(--acid); }
.tab-icon { font-size:24px; }
.tab-label { font-weight:700; color:white; font-size:15px; }
.tab-sub { font-size:12px; color:var(--text-muted); }

.form-head { margin-bottom:32px; }
.form-head h2 { font-size:24px; margin-bottom:8px; }
.form-head p { font-size:14px; color:var(--text-secondary); }

.auth-mode-switch { display:flex; border-bottom:1px solid rgba(255,255,255,0.1); margin-bottom:32px; }
.auth-mode-btn { flex:1; background:none; border:none; color:var(--text-muted); padding:12px 0; font-size:16px; font-weight:600; cursor:pointer; border-bottom:2px solid transparent; transition:var(--transition); }
.auth-mode-btn.active { color:var(--acid); border-bottom-color:var(--acid); }

.field-group { margin-bottom:20px; }
.field-label { display:block; font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-secondary); margin-bottom:8px; }
.field-wrap { position:relative; display:flex; align-items:center; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); transition:var(--transition); }
.field-wrap:focus-within { border-color:var(--acid); background:rgba(200,255,0,0.02); }
.field-icon { color:var(--text-muted); margin-left:16px; }
.field-input { flex:1; background:none; border:none; padding:14px 16px; color:white; font-size:15px; outline:none; width:100%; }
.field-input::placeholder { color:rgba(255,255,255,0.3); }
.pwd-toggle { background:none; border:none; color:var(--text-muted); padding:0 16px; cursor:pointer; font-size:16px; }
.send-code-btn { background:var(--acid); color:var(--bg-dark); border:none; padding:0 20px; font-weight:700; font-size:13px; cursor:pointer; height:100%; align-self:stretch; }
.send-code-btn:disabled { background:rgba(255,255,255,0.2); color:rgba(255,255,255,0.5); cursor:not-allowed; }

.field-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:32px; font-size:13px; }
.remember-wrap { display:flex; align-items:center; gap:8px; cursor:pointer; color:var(--text-secondary); }
.remember-wrap input { display:none; }
.custom-check { width:16px; height:16px; border:1px solid rgba(255,255,255,0.2); display:flex; align-items:center; justify-content:center; }
.remember-wrap input:checked + .custom-check { background:var(--acid); border-color:var(--acid); }
.remember-wrap input:checked + .custom-check::after { content:'✓'; color:var(--bg-dark); font-size:12px; font-weight:900; }
.forgot-link { color:var(--acid); text-decoration:none; }
.forgot-link:hover { text-decoration:underline; }

.btn-submit { width:100%; background:var(--acid); color:var(--bg-dark); border:none; padding:16px; font-size:16px; font-weight:800; cursor:pointer; display:flex; justify-content:center; align-items:center; gap:8px; transition:var(--transition); box-shadow:0 0 20px rgba(200,255,0,0.2); }
.btn-submit:hover { background:white; box-shadow:0 0 30px rgba(255,255,255,0.3); }

.or-divider { margin:32px 0; text-align:center; position:relative; }
.or-divider::before { content:''; position:absolute; left:0; right:0; top:50%; height:1px; background:rgba(255,255,255,0.1); }
.or-divider span { position:relative; background:rgba(6,6,10,0.8); padding:0 16px; color:var(--text-muted); font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:1px; }

.social-logins { display:flex; gap:16px; }
.social-btn { flex:1; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); padding:12px; display:flex; justify-content:center; align-items:center; gap:8px; color:white; font-size:14px; font-weight:600; cursor:pointer; transition:var(--transition); }
.social-btn:hover { background:rgba(255,255,255,0.1); }
.social-btn.wechat { color:#07C160; }
.social-btn.wechat:hover { border-color:#07C160; background:rgba(7,193,96,0.1); }

.agree-row { margin-bottom:24px; display:flex; align-items:flex-start; gap:8px; }

@media (max-width:1024px) {
  .login-container { flex-direction:column; padding-top:120px; padding-bottom:60px; }
  .login-brand { text-align:center; padding:20px; }
  .brand-stats { justify-content:center; }
  .brand-testimonial { text-align:left; }
  .login-panel { width:100%; max-width:480px; padding:0 20px; }
}

.hidden { display: none !important; }