/* QI Identity surface — login, recovery, activation */
/* Loads after packages/qi-ui/tokens/tokens.css and qi-ui/styles/qi-base.css. */

body,
[data-surface="qi-identity"] {
  --qi-bg: #0b0c10;
  --qi-surface: #1f2833;
  --qi-surface-2: #2a3545;
  --qi-surface-3: #3a4556;
  --qi-border: #3a4556;

  --qi-gold: #d4af37;
  --qi-gold-light: #f3e6a7;
  --qi-gold-dark: #b8860b;
  --qi-gold-soft: rgba(212, 175, 55, .35);
  --qi-primary: #d4af37;

  --qi-text: #e6e8ea;
  --qi-text-muted: #8c96a6;
  --qi-text-inverse: #0b0c10;

  --qi-accent: #d4af37;
  --qi-accent-dim: rgba(212, 175, 55, 0.15);
  --qi-energy: #d4af37;
  --qi-energy-dim: rgba(212, 175, 55, 0.25);
  --qi-trust: #d4af37;
  --qi-trust-light: #f3e6a7;
  --qi-trust-dark: #b8860b;

  --qi-glass: rgba(255, 255, 255, 0.06);
  --qi-glass-light: rgba(255, 255, 255, 0.12);
  --qi-glass-border: rgba(255, 255, 255, 0.18);

  --qi-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.2);
  --qi-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.35);
  --qi-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.45);
}

body {
  min-height: 100vh;
  background: radial-gradient(circle at 20% 20%, #1a1f2b 0%, var(--qi-bg) 100%);
}

.qi-identity-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
}

.qi-identity-card {
  width: min(420px, 92vw);
  padding: 40px;
  background: var(--qi-surface);
  border: 1px solid var(--qi-border);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  text-align: center;
}

.qi-identity-card .qi-brand {
  margin-bottom: 24px;
}

.qi-identity-card .qi-logo {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  background: linear-gradient(135deg, var(--qi-gold), var(--qi-gold-dark));
  border-radius: 14px;
  color: #000;
  font-weight: 800;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qi-identity-card .qi-logo svg {
  display: none;
}

.qi-identity-card .qi-logo::after {
  content: "QI";
}

.qi-identity-card h1 {
  margin: 0 0 16px;
  font-size: 22px;
  color: var(--qi-text);
}

.qi-identity-card p {
  margin: 0 0 24px;
  color: var(--qi-text-muted);
}

.qi-identity-card a {
  color: var(--qi-gold-light);
  text-decoration: none;
  font-size: 13px;
}

.qi-identity-card a:hover {
  text-decoration: underline;
}

.qi-identity-form,
.qi-login-form,
.qi-recovery-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
  margin-bottom: 24px;
}

.qi-identity-form input,
.qi-identity-form button,
.qi-login-form input,
.qi-login-form button,
.qi-recovery-form input,
.qi-recovery-form button {
  width: 100%;
}