/**
 * Auth / login — first-party, token-based. Replaces Vuexy page-auth purple decor.
 */
.tt-auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--tt-space-4, 1rem);
  background: var(--tt-surface, #f4f6f8);
  color: var(--tt-ink, #1c2430);
}

.tt-auth-inner {
  width: 100%;
  max-width: 24rem;
}

.tt-auth-card {
  background: var(--tt-panel, #fff);
  border: 1px solid var(--tt-line, rgba(28, 36, 48, 0.1));
  border-radius: var(--tt-radius-lg, 14px);
  box-shadow: var(--tt-shadow-sm, 0 1px 2px rgba(28, 36, 48, 0.06));
  padding: var(--tt-space-5, 1.5rem) var(--tt-space-4, 1rem);
}

@media (min-width: 576px) {
  .tt-auth-card {
    padding: var(--tt-space-6, 2rem) var(--tt-space-5, 1.5rem);
  }
}

.tt-auth-brand {
  display: flex;
  justify-content: center;
  margin-bottom: var(--tt-space-4, 1rem);
}

.tt-auth-brand img {
  width: min(100%, 220px);
  height: auto;
  display: block;
}

.tt-auth-title {
  font-size: var(--tt-fs-title, 1.25rem);
  font-weight: 600;
  color: var(--tt-ink, #1c2430);
  margin: 0 0 var(--tt-space-2, 0.5rem);
  line-height: 1.35;
  text-align: center;
}

.tt-auth-subtitle {
  font-size: var(--tt-fs-label, 0.8125rem);
  color: var(--tt-muted, #6b7585);
  margin: 0 0 var(--tt-space-5, 1.5rem);
  line-height: 1.6;
  text-align: center;
}

.tt-auth-card .form-label {
  font-size: var(--tt-fs-label, 0.8125rem);
  font-weight: 600;
  color: var(--tt-ink, #1c2430);
}

.tt-auth-card .form-control {
  min-height: var(--tt-control-min, 2.5rem);
}

.tt-auth-card .input-group-text {
  cursor: pointer;
  background: var(--tt-panel, #fff);
  border-color: var(--tt-line-strong, rgba(28, 36, 48, 0.16));
  color: var(--tt-muted, #6b7585);
}

.tt-auth-card .input-group-text:hover,
.tt-auth-card .input-group-text:focus-visible {
  color: var(--tt-accent, var(--bs-primary));
}

.tt-auth-submit {
  min-height: var(--tt-touch-min, 2.75rem);
  font-weight: 600;
}

.tt-auth-card .alert {
  font-size: var(--tt-fs-label, 0.8125rem);
}