/* 登录页面样式 - 主题色与 logo 底色一致，无明显图片边界 */
@import "variables.css";

/* 页面主题色：与 logo 底色一致，可在此修改 --login-bg */
.login-container {
  --login-bg: #59392c;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--content-padding-lg);
  background: var(--login-bg);
}

.login-header {
  text-align: center;
  margin-bottom: 40px;
  background: var(--login-bg);
}

.logo-wrap {
  display: inline-block;
  margin-bottom: 20px;
  background: transparent;
}

.login-header .logo {
  display: block;
  width: 120px;
  height: 120px;
  max-width: 28vw;
  max-height: 28vw;
  margin: 0 auto;
  vertical-align: middle;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  object-fit: contain;
  outline: none;
}

.login-header h1 {
  font-size: 28px;
  color: #fff;
  margin-bottom: 10px;
}

.login-header p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
}

.login-tabs {
  display: flex;
  margin-bottom: 16px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 4px;
}
.login-tab {
  flex: 1;
  text-align: center;
  padding: 10px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  border-radius: 8px;
  cursor: pointer;
}
.login-tab.active {
  background: var(--bg-card);
  color: var(--primary);
  font-weight: 600;
}
.login-form {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  padding: 30px var(--content-padding-lg);
}
.login-links {
  margin-top: var(--gap-lg);
  text-align: center;
  font-size: var(--font-size-sm);
}
.login-links a {
  color: var(--primary);
}
.register-link { margin-top: 8px; }

.login-other {
  margin-top: var(--gap-lg);
  text-align: center;
}
.login-divider {
  display: block;
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 12px;
}
.btn-wechat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 280px;
  height: 48px;
  padding: 0 var(--content-padding-lg);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: var(--font-size-base);
  cursor: pointer;
}
.btn-wechat:active {
  background: rgba(255, 255, 255, 0.15);
}
.btn-wechat-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2307C160'%3E%3Cpath d='M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 0 1 .213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.328.328 0 0 0 .167-.054l1.903-1.114a.864.864 0 0 1 .717-.098 10.16 10.16 0 0 0 2.837.403c.276 0 .543-.027.811-.05-.857-2.578.157-4.972 1.932-6.446 1.703-1.415 3.987-1.98 5.721-1.838-.576-3.583-4.196-6.348-8.024-6.348zM5.785 5.991c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178A1.17 1.17 0 0 1 4.623 7.17c0-.651.52-1.18 1.162-1.18zm5.813 0c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178 1.17 1.17 0 0 1-1.162-1.178c0-.651.52-1.18 1.162-1.18zm5.34 2.867c-1.797 0-3.254 1.473-3.254 3.286 0 1.814 1.457 3.287 3.254 3.287 1.798 0 3.255-1.473 3.255-3.287 0-1.813-.457-3.286-3.255-3.286zm-1.957 4.669c-.235.333-.852.61-1.172.61-.333 0-.437-.212-.648-.61-.235-.432-.91-1.503-.91-2.896 0-1.394.71-2.106 1.044-2.106.333 0 .457.141.668.61.21.47.875 1.54.875 1.54.21-.375.71-1.54.944-1.54.333 0 .875.375.875 1.246 0 .47-.084.875-.168 1.246-.21.75-.42 1.54-.875 2.291z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.form-group {
  margin-bottom: 20px;
}

.form-group input {
  width: 100%;
  height: 50px;
  padding: 0 var(--content-padding);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
}

.password-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.password-row input {
  flex: 1;
  min-width: 0;
}
.btn-toggle-pwd {
  flex-shrink: 0;
  width: 48px;
  height: 50px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-toggle-pwd .pwd-icon {
  font-size: 20px;
  line-height: 1;
  opacity: 0.7;
}
.btn-toggle-pwd .pwd-icon--visible {
  opacity: 1;
}

.code-group {
  display: flex;
  gap: 10px;
}

.code-group input {
  flex: 1;
}

.btn-code {
  width: 120px;
  height: 50px;
  background: var(--primary);
  color: #fff;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
}

.btn-code:disabled {
  background: #ccc;
}

.login-tips {
  margin-top: var(--content-padding-lg);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  text-align: center;
}

.login-tips a {
  color: var(--primary);
}