.auth-body {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--space-5);
  background: radial-gradient(ellipse at top, var(--color-primary-soft), transparent 70%), var(--color-bg);
}

.auth-card {
  width: 100%;
  max-width: 32rem;
  padding: clamp(1.5rem, 5vw, 3rem);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.auth-header { margin-bottom: var(--space-8); }
.auth-brand { color: var(--color-primary); font-size: var(--text-lg); font-weight: 800; letter-spacing: .06em; margin-bottom: var(--space-6); }
.auth-brand span { font-size: var(--text-xs); background: var(--color-primary-soft); border-radius: var(--radius-sm); padding: .25rem .5rem; }
.auth-header h1 { font-size: clamp(1.5rem, 5vw, 1.9rem); line-height: 1.2; }
.auth-subtitle { margin-top: var(--space-3); color: var(--color-text-muted); }
.auth-form, .auth-companies { display: grid; gap: var(--space-5); }
.auth-field { display: grid; gap: var(--space-2); }
.auth-field label { font-size: var(--text-sm); font-weight: 600; }
.auth-field input { width: 100%; min-width: 0; min-height: 3rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); padding: .75rem; font: inherit; background: var(--color-surface); color: var(--color-text); }
.auth-primary { display: flex; justify-content: space-between; gap: var(--space-3); width: 100%; min-height: 3rem; padding: .8rem 1rem; color: white; background: var(--color-primary); border: 1px solid var(--color-primary); border-radius: var(--radius-sm); cursor: pointer; font-weight: 600; }
.auth-primary:hover { filter: brightness(1.1); }
.auth-note, .auth-footer { margin-top: var(--space-6); text-align: center; color: var(--color-text-muted); font-size: var(--text-sm); }
.auth-error { margin-bottom: var(--space-5); padding: var(--space-4); border: 1px solid var(--color-danger); border-radius: var(--radius-sm); color: var(--color-danger); background: #fff6f5; }
.auth-company { display: flex; align-items: center; gap: var(--space-4); width: 100%; padding: var(--space-4); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); text-align: left; color: var(--color-text); background: var(--color-surface); cursor: pointer; }
.auth-company:hover { border-color: var(--color-primary); background: var(--color-primary-soft); }
.auth-company__icon { display: grid; place-items: center; flex: 0 0 2.75rem; height: 2.75rem; font-weight: 700; border-radius: var(--radius-sm); color: var(--color-primary); background: var(--color-primary-soft); }
.auth-company__text { flex: 1; min-width: 0; }
.auth-company__text strong, .auth-company__text > span { display: block; }
.auth-company__text > span { margin-top: var(--space-1); font-size: var(--text-xs); color: var(--color-text-muted); }
.auth-link { display: inline-block; padding: .6rem; border: 0; background: transparent; color: var(--color-primary); text-decoration: underline; cursor: pointer; }
.auth-card :focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }

@media (max-width: 360px) {
  .auth-body { padding: var(--space-3); }
  .auth-card { padding: var(--space-5); }
  .auth-company { gap: var(--space-3); padding: var(--space-3); }
}