/* ── Reset & Base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0a0a0f;
  --card-bg: rgba(22, 22, 36, 0.82);
  --card-border: rgba(255, 255, 255, 0.08);
  --text: #e8e8ed;
  --text-dim: #8b8b9e;
  --accent: #6366f1;
  --accent-glow: rgba(99, 102, 241, 0.35);
  --field-bg: rgba(255, 255, 255, 0.04);
  --field-border: rgba(255, 255, 255, 0.1);
  --field-focus: rgba(99, 102, 241, 0.45);
  --error: #f87171;
  --radius: 14px;
  --transition: 0.22s ease;
}

html, body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
               'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* ── Animated Background ─────────────────────────────────── */
.bg {
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
}
.bg::before {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(99,102,241,0.18) 0%, transparent 70%);
  top: -200px; left: -100px;
  animation: float1 18s ease-in-out infinite;
}
.bg::after {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(168,85,247,0.12) 0%, transparent 70%);
  bottom: -150px; right: -80px;
  animation: float2 22s ease-in-out infinite;
}

@keyframes float1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(60px, 40px) scale(1.08); }
  66% { transform: translate(-30px, -20px) scale(0.94); }
}
@keyframes float2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-50px, -30px) scale(1.1); }
  66% { transform: translate(40px, 20px) scale(0.92); }
}

/* ── Container ────────────────────────────────────────────── */
.container {
  position: relative; z-index: 1;
  min-height: 100vh; display: flex;
  flex-direction: column; align-items: center; justify-content: center;
  padding: 24px;
}

/* ── Card ─────────────────────────────────────────────────── */
.card {
  width: 100%; max-width: 400px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  padding: 44px 36px 36px;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 8px 40px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.06) inset;
  animation: cardIn 0.55s ease;
}

@keyframes cardIn {
  from { opacity: 0; transform: translateY(24px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.card.shake { animation: shake 0.45s ease; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(4px); }
}

/* ── Logo ─────────────────────────────────────────────────── */
.logo { text-align: center; margin-bottom: 32px; }
.logo-icon { font-size: 48px; margin-bottom: 8px; animation: bounce 2s ease-in-out infinite; }
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.logo h1 {
  font-size: 26px; font-weight: 700; letter-spacing: -0.5px;
  background: linear-gradient(135deg, #c7d2fe 0%, #a5b4fc 40%, #818cf8 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.logo .subtitle { font-size: 13px; color: var(--text-dim); margin-top: 4px; }

/* ── Form ─────────────────────────────────────────────────── */
.form { display: flex; flex-direction: column; gap: 20px; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-size: 13px; font-weight: 500; color: var(--text-dim);
  letter-spacing: 0.2px;
}

.input-wrap {
  position: relative; display: flex; align-items: center;
}
.input-icon {
  position: absolute; left: 14px; width: 18px; height: 18px;
  color: var(--text-dim); pointer-events: none; z-index: 1;
}
.input-wrap input {
  width: 100%; height: 46px;
  padding: 0 44px 0 42px;
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 15px; outline: none;
  transition: border var(--transition), box-shadow var(--transition);
}
.input-wrap input::placeholder { color: rgba(255,255,255,0.18); }
.input-wrap input:focus {
  border-color: var(--field-focus);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.toggle-pw {
  position: absolute; right: 4px;
  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; border-radius: 10px;
  color: var(--text-dim); transition: color var(--transition);
}
.toggle-pw:hover { color: var(--text); }
.toggle-pw svg { width: 18px; height: 18px; }
.toggle-pw .eye-closed { display: none; }
.toggle-pw.showing .eye-open { display: none; }
.toggle-pw.showing .eye-closed { display: block; }

/* ── Error ────────────────────────────────────────────────── */
.error-msg {
  min-height: 20px; font-size: 13px; color: var(--error);
  text-align: center; opacity: 0; transform: translateY(-4px);
  transition: all var(--transition);
}
.error-msg.visible { opacity: 1; transform: translateY(0); }

/* ── Button ───────────────────────────────────────────────── */
.btn {
  width: 100%; height: 48px;
  background: var(--accent);
  color: #fff; font-size: 15px; font-weight: 600;
  border: none; border-radius: var(--radius); cursor: pointer;
  position: relative; overflow: hidden;
  transition: background var(--transition), box-shadow var(--transition),
              transform 0.12s ease;
  letter-spacing: 1px;
}
.btn:hover {
  background: #5b5fe8;
  box-shadow: 0 4px 20px var(--accent-glow);
}
.btn:active { transform: scale(0.975); }
.btn.loading { pointer-events: none; opacity: 0.8; }
.btn.loading .btn-text { opacity: 0; }
.btn.loading .btn-spinner { opacity: 1; }

.btn-spinner {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.15s;
}
.btn-spinner::after {
  content: '';
  width: 22px; height: 22px;
  border: 2.5px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Footer ───────────────────────────────────────────────── */
.footer {
  margin-top: 28px; font-size: 12px; color: var(--text-dim);
  letter-spacing: 0.3px; opacity: 0.6;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 440px) {
  .card { padding: 32px 24px 28px; border-radius: 16px; }
}