/* ============================================================
   auth.css — Authentication Screen Styles
   ============================================================ */

.auth-view {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--spacing-xl);
  background:
    radial-gradient(ellipse at 20% 20%, hsla(243,80%,25%,.35) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 80%, hsla(270,70%,25%,.3) 0%, transparent 55%),
    var(--surface-bg);
  overflow-y: auto;
}

/* ── Card ── */
.auth-card {
  width: 100%;
  max-width: 480px;
  background: var(--surface-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-xl);
  padding: var(--spacing-2xl);
  box-shadow: var(--shadow-lg), 0 0 0 1px hsla(243,80%,62%,.08) inset;
  animation: cardEntrance var(--duration-slow) var(--ease-default) both;
}

@keyframes cardEntrance {
  from { opacity: 0; transform: translateY(20px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   }
}

/* ── Logo ── */
.auth-card__logo {
  display: flex;
  justify-content: center;
  margin-bottom: var(--spacing-lg);
}

.auth-card__logo svg {
  width: 64px;
  height: 64px;
}

.auth-logo__fox {
  fill: url(#logoGrad);
}

.auth-card__logo svg { fill: var(--color-primary); }

/* Gradient trick using CSS filter */
.auth-card__logo svg {
  filter: drop-shadow(0 0 16px hsla(243,80%,62%,.6));
}

/* ── Header ── */
.auth-card__header {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.auth-card__title {
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -.02em;
  background: linear-gradient(135deg, var(--text-primary) 30%, var(--color-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.auth-card__subtitle {
  margin-top: .5rem;
  font-size: .875rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ── Form ── */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: .375rem;
}

.form-label {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon {
  position: absolute;
  left: .875rem;
  width: 16px;
  height: 16px;
  stroke: var(--text-muted);
  stroke-width: 2;
  fill: none;
  pointer-events: none;
  transition: stroke var(--duration-fast);
}

.form-input {
  width: 100%;
  height: 44px;
  padding: 0 .875rem 0 2.5rem;
  font-family: var(--font-sans);
  font-size: .9375rem;
  color: var(--text-primary);
  background: var(--surface-2);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  outline: none;
  transition:
    border-color var(--duration-fast),
    box-shadow   var(--duration-fast),
    background   var(--duration-fast);
}

.form-input::placeholder { color: var(--text-muted); }

.form-input:focus {
  border-color: var(--color-primary);
  background: var(--surface-1);
  box-shadow: 0 0 0 3px var(--color-primary-dim);
}

.form-input:focus + .input-icon,
.input-wrapper:focus-within .input-icon { stroke: var(--color-primary); }

.form-hint {
  font-size: .75rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.form-hint code {
  font-family: var(--font-mono);
  font-size: .7rem;
  background: var(--surface-2);
  padding: .1em .35em;
  border-radius: .25em;
  color: var(--color-accent);
}

/* ── Error ── */
.auth-error {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1rem;
  background: hsla(0,80%,60%,.1);
  border: 1px solid hsla(0,80%,60%,.3);
  border-radius: var(--radius-md);
  color: hsl(0,80%,72%);
  font-size: .875rem;
  animation: shake .3s ease-in-out;
}

@keyframes shake {
  0%,100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}

/* ── Footer ── */
.auth-card__footer {
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--surface-border);
  text-align: center;
  font-size: .75rem;
  color: var(--text-muted);
}

/* ── Callback state ── */
.auth-card--callback {
  align-items: center;
  justify-content: center;
  display: flex;
  min-height: 240px;
}

.auth-callback-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  color: var(--text-secondary);
}

.auth-callback-spinner p {
  font-size: .875rem;
  font-weight: 500;
}

/* ── Error state (callback) ── */
.auth-error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
  color: var(--text-secondary);
}

.auth-error-state svg {
  width: 48px;
  height: 48px;
  stroke: var(--color-danger);
  stroke-width: 1.5;
  fill: none;
}

.auth-error-state h2 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
}

.auth-error-state p { font-size: .875rem; }