:root {
  --surface-cream: #fbf8f1;
  --surface-paper: #ffffff;
  --ink: #0a0a0a;
  --ink-body: #1f1f1f;
  --ink-mute: #4a4a4a;
  --ink-fade: #7a7a7a;
  --gold: #b8861b;
  --gold-deep: #6b4f12;
  --gold-dark: #3f2e09;
  --gold-light: #d4af37;
  --gold-pale: #f0dfa7;
  --gold-metal: linear-gradient(135deg, #8c6515 0%, #c99a2d 28%, #e0b94a 48%, #b8861b 68%, #6b4f12 100%);
  --gold-border: rgba(107, 79, 18, 0.22);
  --gold-border-strong: rgba(107, 79, 18, 0.5);
  --shadow-lg: 0 16px 48px rgba(10, 10, 10, 0.08), 0 4px 12px rgba(10, 10, 10, 0.04);
  --motion: 240ms cubic-bezier(.4,.0,.2,1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Inter', 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--surface-cream);
  color: var(--ink-body);
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(ellipse at 12% 8%, rgba(184, 134, 27, 0.06), transparent 60%),
    radial-gradient(ellipse at 88% 92%, rgba(10, 10, 10, 0.03), transparent 60%);
  background-attachment: fixed;
}
.login-wrapper { width: 100%; max-width: 460px; padding: 20px; }
.login-card {
  background: var(--surface-paper);
  border: 1px solid var(--gold-border);
  box-shadow: var(--shadow-lg);
  padding: 56px 48px 48px;
  position: relative; overflow: hidden;
}
.login-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: var(--gold-metal);
}
.login-card::after {
  content: ""; position: absolute; top: 40px; right: -60px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(201, 162, 74, 0.12), transparent 62%);
  pointer-events: none; z-index: 0;
}
.login-eyebrow {
  font-family: 'Fraunces', serif; font-style: italic; font-size: 11px;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold-deep);
  margin-bottom: 20px; display: inline-flex; align-items: center; gap: 12px;
  position: relative; z-index: 1;
}
.login-eyebrow::before {
  content: "❦"; color: var(--gold); font-style: normal; font-size: 14px;
}
.login-title {
  font-family: 'Fraunces', serif; font-weight: 300; font-size: 38px; line-height: 1.1;
  color: var(--ink); margin-bottom: 8px; letter-spacing: -0.01em;
  position: relative; z-index: 1;
}
.login-title em { font-style: italic; color: var(--gold-deep); font-weight: 250; }
.login-subtitle {
  font-family: 'Fraunces', serif; font-style: italic; font-size: 15px;
  color: var(--ink-mute); margin-bottom: 40px; font-weight: 300;
  position: relative; z-index: 1;
}
.form-group { margin-bottom: 22px; position: relative; z-index: 1; }
.form-label {
  display: block; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-deep); margin-bottom: 8px; font-weight: 600;
}
.form-input {
  width: 100%; padding: 14px 16px;
  font-family: inherit; font-size: 15px; color: var(--ink);
  background: var(--surface-cream);
  border: 1px solid var(--gold-border); outline: none;
  transition: all var(--motion);
}
.form-input:focus {
  border-color: var(--gold-border-strong);
  box-shadow: 0 0 0 3px rgba(184, 134, 27, 0.1);
}
.form-input::placeholder { color: var(--ink-fade); font-style: italic; }
.submit-btn {
  width: 100%; padding: 16px 24px;
  background: var(--gold-metal); color: #332100;
  border: 1px solid var(--gold-dark); border-radius: 999px;
  font-family: inherit; font-size: 13px; font-weight: 800;
  letter-spacing: 0.15em; text-transform: uppercase;
  cursor: pointer; box-shadow: 0 10px 20px rgba(119, 90, 25, 0.2);
  transition: all var(--motion); margin-top: 12px; position: relative; z-index: 1;
}
.submit-btn:hover { transform: translateY(-2px); box-shadow: 0 15px 30px rgba(119, 90, 25, 0.3); }
.submit-btn:active { transform: translateY(0); }
.submit-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.error-msg {
  color: #b44; font-size: 13px; text-align: center; margin-top: 16px;
  min-height: 20px; position: relative; z-index: 1;
}
.login-footer {
  text-align: center; margin-top: 32px; font-size: 11px;
  color: var(--ink-fade); letter-spacing: 0.08em; text-transform: uppercase;
  font-family: 'JetBrains Mono', monospace;
}
@media (max-width: 520px) {
  .login-card { padding: 40px 28px 36px; }
  .login-title { font-size: 30px; }
}