:root {
  --bg: #14110d;
  --panel: #1a1612;
  --panel-light: #221c16;
  --gold: #d4a853;
  --gold-bright: #f0c870;
  --gold-dim: rgba(212,168,83,0.55);
  --gold-faint: rgba(212,168,83,0.2);
  --text: #e8dcc8;
  --danger: #c92a2a;
  --success: #27ae60;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--bg);
  background-image:
    radial-gradient(circle at 20% 30%, rgba(212,168,83,0.05), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(212,168,83,0.03), transparent 50%);
  color: var(--text);
  font-family: 'Crimson Text', serif;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.login-shell {
  width: 100%; max-width: 440px;
  background: linear-gradient(160deg, var(--panel-light), var(--panel));
  border: 1px solid var(--gold-faint);
  border-radius: 12px; padding: 36px 28px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7);
}
.brand { text-align: center; margin-bottom: 24px; }
.brand-title {
  font-family: 'Cinzel', serif; font-size: 2.2rem; font-weight: 900;
  color: var(--gold); letter-spacing: 0.2em; text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(212,168,83,0.3);
}
.brand-tagline {
  font-style: italic; color: var(--gold-dim); font-size: 0.7rem;
  letter-spacing: 0.1em; margin-top: 4px;
}

.tabs {
  display: flex; gap: 0; margin-bottom: 22px; justify-content: center;
  border-bottom: 1px solid var(--gold-faint);
}
.tab {
  background: transparent; border: none; color: var(--gold-dim);
  padding: 10px 24px; font-family: 'Cinzel', serif; font-size: 0.7rem;
  letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.tab:hover { color: var(--gold); }
.tab.active { color: var(--gold); border-bottom-color: var(--gold); }

.form-row { margin-bottom: 14px; }
.form-row label {
  display: block; font-family: 'Cinzel', serif; font-size: 0.55rem;
  color: var(--gold-dim); text-transform: uppercase; letter-spacing: 0.1em;
  margin-bottom: 6px;
}
.form-row label .hint {
  text-transform: none; letter-spacing: 0; font-style: italic; opacity: 0.7;
  margin-left: 4px; font-size: 0.85em;
}
.form-row input {
  width: 100%;
  background: rgba(0,0,0,0.4); border: 1px solid var(--gold-faint);
  color: var(--text); padding: 10px 14px; border-radius: 6px;
  font-family: 'Crimson Text', serif; font-size: 0.85rem;
  transition: border-color 0.2s;
}
.form-row input:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212,168,83,0.1);
}
.username-status {
  font-size: 0.6rem; margin-top: 4px; min-height: 14px;
}
.username-status.checking { color: var(--gold-dim); }
.username-status.available { color: var(--success); }
.username-status.taken { color: var(--danger); }

.auth-btn {
  width: 100%; margin-top: 8px;
  background: linear-gradient(180deg, var(--gold), #8b6914);
  border: 1px solid var(--gold-bright); color: #1a1410;
  padding: 12px; border-radius: 6px;
  font-family: 'Cinzel', serif; font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  cursor: pointer; transition: filter 0.15s;
}
.auth-btn:hover { filter: brightness(1.15); }

.err-msg {
  margin-top: 14px; padding: 10px;
  background: rgba(201,42,42,0.1); border: 1px solid rgba(201,42,42,0.4);
  border-radius: 6px; color: #ff7b7b; font-size: 0.7rem; display: none;
}
.err-msg.show { display: block; }

.divider {
  text-align: center; margin: 22px 0 16px; color: var(--gold-dim);
  font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.15em;
  position: relative;
}
.divider::before, .divider::after {
  content: ''; position: absolute; top: 50%; width: 35%; height: 1px;
  background: var(--gold-faint);
}
.divider::before { left: 0; }
.divider::after { right: 0; }

.oauth-row { display: flex; flex-direction: column; gap: 8px; }
.oauth-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 10px; border: 1px solid var(--gold-faint); border-radius: 6px;
  text-decoration: none; color: var(--text); font-size: 0.75rem;
  transition: all 0.2s;
}
.oauth-btn:hover { border-color: var(--gold); background: rgba(212,168,83,0.05); }