/* ============================================================
 * 秋API 登录/注册页样式 —— 深色玻璃拟态（对标 aispeedapi 登录页）
 * ============================================================ */

:root {
  --ink: #070a0c;
  --ink-2: #0d1214;
  --green: #18a873;
  --green-2: #6df2b8;
  --green-ink: #087a50;
  --bg-a: rgba(24,168,115,0.16);
  --bg-b: rgba(24,168,115,0.08);
  --bg-base: #070a0c;
  --card-bg: rgba(255,255,255,0.055);
  --card-border: rgba(255,255,255,0.12);
  --input-bg: rgba(255,255,255,0.06);
  --input-border: rgba(255,255,255,0.14);
  --text-main: #fff;
  --text-sub: rgba(255,255,255,0.5);
  --text-faint: rgba(255,255,255,0.45);
  --text-very-faint: rgba(255,255,255,0.3);
  --text-hint: rgba(255,255,255,0.4);
  --text-placeholder: rgba(255,255,255,0.3);
  --text-foot: rgba(255,255,255,0.28);
  --text-back: rgba(255,255,255,0.4);
  --input-label: rgba(255,255,255,0.75);
  --eye-btn: rgba(255,255,255,0.4);
  --eye-btn-hover: rgba(255,255,255,0.8);
  --btn-shadow: rgba(24,168,115,0.28);
  --btn-shadow-hover: rgba(24,168,115,0.38);
  --font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
          "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

/* 浅色主题 */
:root[data-theme="light"] {
  --ink: #f5f7f6;
  --ink-2: #ffffff;
  --green: #18a873;
  --green-2: #0e8f5e;
  --green-ink: #087a50;
  --bg-a: rgba(24,168,115,0.10);
  --bg-b: rgba(24,168,115,0.05);
  --bg-base: #f0f3f1;
  --card-bg: rgba(255,255,255,0.85);
  --card-border: rgba(16,21,20,0.12);
  --input-bg: rgba(255,255,255,0.9);
  --input-border: rgba(16,21,20,0.16);
  --text-main: #101514;
  --text-sub: rgba(16,21,20,0.55);
  --text-faint: rgba(16,21,20,0.5);
  --text-very-faint: rgba(16,21,20,0.35);
  --text-hint: rgba(16,21,20,0.45);
  --text-placeholder: rgba(16,21,20,0.32);
  --text-foot: rgba(16,21,20,0.3);
  --text-back: rgba(16,21,20,0.45);
  --input-label: rgba(16,21,20,0.75);
  --eye-btn: rgba(16,21,20,0.4);
  --eye-btn-hover: rgba(16,21,20,0.75);
  --btn-shadow: rgba(24,168,115,0.2);
  --btn-shadow-hover: rgba(24,168,115,0.3);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* ============================================================
 * 主题切换过渡动画（与主页面 studio 一致）
 * 所有随主题变化的颜色属性都加过渡，实现平滑渐变
 * ============================================================ */
body,
body::before,
body::after,
.auth-logo,
.auth-title,
.auth-sub,
.card-glass,
.card-glass::before,
.card-glass::after,
.card-head h2,
.card-head p,
.field-label,
.input-label,
.input-wrap input,
.input-wrap input::placeholder,
.eye-btn,
.btn-primary,
.auth-alt,
.auth-alt a,
.auth-back a,
.auth-foot,
.qr-box,
.qr-box img,
.qr-box p,
.alert,
.theme-toggle {
  transition:
    background-color 0.4s ease,
    border-color 0.4s ease,
    color 0.4s ease,
    box-shadow 0.4s ease,
    opacity 0.4s ease;
}

body {
  font-family: var(--font);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  position: relative;
  background-color: var(--bg-base);
  color: var(--text-main);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* 渐变光晕层（独立于 body 背景色，保证背景色可平滑过渡） */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 560px at 85% -10%, var(--bg-a), transparent 60%),
    radial-gradient(700px 500px at -10% 110%, var(--bg-b), transparent 60%);
  transition: background 0.4s ease;
}

body > * {
  position: relative;
  z-index: 1;
}

/* ============ 头部 ============ */
.auth-head { text-align: center; margin-bottom: 32px; }

.auth-logo {
  display: inline-block;
  width: 72px;
  height: 72px;
  margin-bottom: 22px;
  border-radius: 20px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 16px 48px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.12);
}

.auth-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.auth-title {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.5px;
  background: linear-gradient(120deg, var(--text-main) 30%, var(--green-2) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 8px;
}

.auth-sub {
  color: var(--text-sub);
  font-size: 14px;
}

/* ============ 卡片 ============ */
.card-glass {
  width: 100%;
  max-width: 420px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 32px 34px 28px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 24px 80px rgba(0,0,0,0.5);
}

.card-head { text-align: center; margin-bottom: 26px; }

.card-head h2 { font-size: 21px; font-weight: 750; margin-bottom: 5px; }

.card-head p { color: var(--text-faint); font-size: 13.5px; }

/* 错误提示 */
.alert {
  display: none;
  background: rgba(255, 80, 80, 0.12);
  border: 1px solid rgba(255, 80, 80, 0.35);
  color: #ff9d9d;
  font-size: 13px;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 16px;
  line-height: 1.5;
}

.alert.show { display: block; }

.alert.success {
  background: rgba(24,168,115,0.12);
  border-color: rgba(24,168,115,0.4);
  color: #7fe0b5;
}

/* ============ 表单 ============ */
.field { margin-bottom: 18px; }

.input-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 550;
  color: var(--input-label);
  margin-bottom: 8px;
}

.input-label a {
  color: var(--green-2);
  font-size: 12.5px;
  font-weight: 550;
  text-decoration: none;
}

.input-label a:hover { text-decoration: underline; }

.input-wrap { position: relative; }

.input-wrap input {
  width: 100%;
  height: 46px;
  padding: 0 42px 0 14px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 9px;
  color: var(--text-main);
  font-size: 14.5px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.input-wrap input::placeholder { color: var(--text-very-faint); }

.input-wrap input:focus {
  border-color: var(--green);
  background: var(--card-bg);
  box-shadow: 0 0 0 3px rgba(24,168,115,0.18);
}

.input-wrap input.input-error {
  border-color: rgba(255,80,80,0.6);
}

/* 密码可见切换 */
.eye-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  color: var(--text-hint);
  font-size: 15px;
  cursor: pointer;
  border-radius: 6px;
  display: grid;
  place-items: center;
}

.eye-btn:hover { color: var(--eye-btn-hover); }

/* ============ 按钮 ============ */
.btn-primary {
  width: 100%;
  height: 46px;
  margin-top: 6px;
  border: none;
  border-radius: 9px;
  background: linear-gradient(135deg, #18a873, #0e8f5e);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s, box-shadow 0.15s;
  box-shadow: 0 8px 24px var(--btn-shadow);
}

.btn-primary:hover { opacity: 0.92; box-shadow: 0 10px 28px var(--btn-shadow-hover); }
.btn-primary:active { transform: translateY(1px); }

.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-primary .spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin: 0 auto;
}

@keyframes spin { to { transform: rotate(360deg); } }

.btn-primary.loading .spinner { display: block; }
.btn-primary.loading { font-size: 0; }

/* ============ 底部 ============ */
.auth-alt {
  text-align: center;
  margin-top: 22px;
  color: var(--text-faint);
  font-size: 13.5px;
}

.auth-alt a {
  color: var(--green-2);
  font-weight: 650;
  text-decoration: none;
}

.auth-alt a:hover { text-decoration: underline; }

.auth-back {
  margin-top: 24px;
  text-align: center;
}

.auth-back a {
  color: var(--text-hint);
  font-size: 13px;
  text-decoration: none;
}

.auth-back a:hover { color: var(--text-main); }

.auth-foot {
  margin-top: 26px;
  color: var(--text-foot);
  font-size: 12px;
  text-align: center;
}

/* ============ 主题切换按钮 ============ */
.theme-toggle {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 50;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  color: var(--text-main);
  font-size: 17px;
  cursor: pointer;
  display: grid;
  place-items: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  transition: transform 0.15s, background 0.15s;
}

.theme-toggle:hover { transform: scale(1.08); }

/* 二维码（忘记密码页用） */
.qr-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.qr-box img {
  width: 200px;
  height: 200px;
  border-radius: 10px;
  border: 1px solid var(--card-border);
  background: #fff;
  padding: 8px;
}

.qr-box p { color: var(--text-sub); font-size: 13px; text-align: center; line-height: 1.6; }

@media (max-width: 480px) {
  .card-glass { padding: 26px 22px 22px; }
  .auth-title { font-size: 29px; }
}