* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif; }

.login-bg {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.home-back {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: #999;
  text-decoration: none;
  font-size: 13px;
  padding: 8px 20px;
  background: rgba(255,255,255,0.8);
  border-radius: 20px;
  backdrop-filter: blur(10px);
  transition: all 0.2s;
}
.home-back:hover { color: #ff9500; background: #fff; }

.login-modal {
  width: 860px;
  max-width: 95vw;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.1);
  display: flex;
  overflow: hidden;
  min-height: 520px;
}

.login-left {
  flex: 0 0 45%;
  background: linear-gradient(160deg, #fff5eb 0%, #ffe8d1 100%);
  padding: 40px 36px;
  display: flex;
  align-items: center;
}

.left-inner { width: 100%; text-align: center; }

.logo-big { font-size: 56px; margin-bottom: 12px; }

.login-left h2 { font-size: 24px; color: #333; margin-bottom: 32px; }

.feature-list { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; max-width: 260px; margin: 0 auto; }

.feature { display: flex; align-items: flex-start; gap: 12px; text-align: left; }

.f-ico {
  width: 36px; height: 36px;
  background: rgba(255,149,0,0.15);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}

.f-title { font-size: 15px; font-weight: 600; color: #333; margin-bottom: 2px; }
.f-desc { font-size: 13px; color: #888; }

.login-right { flex: 1; padding: 40px 44px; display: flex; flex-direction: column; }

.welcome { font-size: 22px; color: #333; text-align: center; margin-bottom: 24px; }

.tabs {
  display: flex; background: #f5f6f8; border-radius: 10px;
  padding: 4px; margin-bottom: 24px;
}

.tab {
  flex: 1; padding: 10px; border: none; background: transparent;
  border-radius: 8px; font-size: 14px; color: #666; cursor: pointer;
  transition: all 0.2s;
}

.tab.on { background: #fff; color: #333; font-weight: 600; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }

.tab-panel { display: none; }
.tab-panel.on { display: block; }

.ipt { margin-bottom: 16px; }

.ipt input {
  width: 100%; padding: 13px 16px;
  border: 1px solid #e5e7eb; border-radius: 10px;
  font-size: 14px; outline: none; background: #f9fafb;
}

.ipt input:focus { border-color: #ff9500; background: #fff; }

.code-row { display: flex; gap: 10px; }
.code-row input { flex: 1; }

.get-code {
  padding: 0 16px; border: none; background: #fff5eb; color: #ff9500;
  border-radius: 10px; font-size: 13px; cursor: pointer; white-space: nowrap;
}
.get-code:disabled { color: #aaa; background: #f5f5f5; }

.err-msg { color: #e74c3c; font-size: 13px; min-height: 18px; margin-bottom: 8px; }

.btn-primary {
  width: 100%; padding: 14px;
  background: linear-gradient(135deg, #ff9500, #ff6a00);
  color: #fff; border: none; border-radius: 10px;
  font-size: 16px; font-weight: 600; cursor: pointer; margin-top: 8px;
}
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary:hover:not(:disabled) { opacity: 0.9; }

.links { display: flex; justify-content: space-between; margin-top: 16px; font-size: 13px; }
.links a { color: #ff9500; text-decoration: none; }

.announce { background: #fff8e6; color: #b8860b; padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 16px; }

.third-login { margin-top: 20px; }
.divider { text-align: center; color: #999; font-size: 13px; margin: 16px 0; position: relative; }
.divider::before, .divider::after { content: ''; position: absolute; top: 50%; width: 30%; height: 1px; background: #eee; }
.divider::before { left: 0; }
.divider::after { right: 0; }
.third-btns { display: flex; gap: 12px; justify-content: center; }
.third-btn { padding: 8px 24px; border: 1px solid #ddd; border-radius: 20px; text-decoration: none; color: #333; font-size: 14px; }

.agree-row { margin-top: 20px; text-align: center; font-size: 12px; color: #999; }
.agree-row a { color: #ff9500; text-decoration: none; }

@media (max-width: 768px) {
  .login-modal { flex-direction: column; width: 95vw; }
  .login-left { display: none; }
  .login-right { padding: 30px 24px; }
}