/* =====================================================
   AUTH PAGE
===================================================== */

body.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 1rem;

  background-size: cover;
  background-position: center;

  font-size: 14px;

  font-family: "Inter", sans-serif;
}

/* =====================================================
   AUTH BOX
===================================================== */

.auth-box {
  width: 100%;
  max-width: 420px;
}

/* =====================================================
   AUTH CARD
===================================================== */

.auth-card {
  border: 0;

  border-radius: 22px;

  overflow: hidden;

  background: rgba(255, 255, 255, 0.96);

  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);

  box-shadow:
    0 10px 35px rgba(76, 29, 149, 0.12),
    0 2px 10px rgba(0, 0, 0, 0.05);
}

/* =====================================================
   HEADER
===================================================== */

.brand-header {
  display: flex;
  align-items: center;
}

/* =====================================================
   BRAND LOGO
===================================================== */

.brand-logo {
  width: 68px;
  height: 68px;

  object-fit: contain;

  flex-shrink: 0;
}

/* =====================================================
   BRAND WRAPPER
===================================================== */

.brand-wrapper {
  display: flex;
  flex-direction: column;
}

/* =====================================================
   BRAND TITLE
===================================================== */

.brand-title {
  font-size: 1.55rem;

  font-weight: 800;

  line-height: 1.15;

  letter-spacing: -0.7px;

  color: #4c1d95;

  margin-bottom: 4px;
}

/* =====================================================
   BRAND SUBTITLE
===================================================== */

.brand-subtitle {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.1px;
  color: #15803d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =====================================================
   INFO BOX
===================================================== */

.info-box-custom {
  border-radius: 16px;

  background: linear-gradient(
    135deg,
    rgba(76, 29, 149, 0.04),
    rgba(21, 128, 61, 0.04)
  );

  border: 1px solid rgba(76, 29, 149, 0.08);
}

/* =====================================================
   BUTTON AUTH
===================================================== */

.btn-auth {
  height: 46px;

  border: 0;

  border-radius: 14px;

  font-size: 0.9rem;

  font-weight: 600;

  background: linear-gradient(135deg, #4c1d95, #6d28d9);

  color: #fff;

  transition: 0.2s ease;
}

.btn-auth:hover {
  color: #fff;

  transform: translateY(-1px);

  box-shadow: 0 8px 18px rgba(76, 29, 149, 0.22);
}

/* =====================================================
   BUTTON RESET
===================================================== */

.btn-reset {
  height: 46px;

  border-radius: 14px;

  font-size: 0.9rem;

  font-weight: 600;
}

/* =====================================================
   DIVIDER
===================================================== */

.divider {
  position: relative;

  text-align: center;

  margin: 1.3rem 0;
}

.divider::before {
  content: "";

  position: absolute;

  top: 50%;
  left: 0;

  width: 100%;
  height: 1px;

  background: #e5e7eb;
}

.divider span {
  position: relative;

  padding: 0 0.75rem;

  font-size: 0.72rem;

  color: #94a3b8;

  background: #fff;
}

/* =====================================================
   AUTH LINK
===================================================== */

.auth-link {
  font-size: 0.82rem;

  color: #64748b;
}

.auth-link a {
  font-weight: 700;

  color: #4c1d95;

  text-decoration: none;
}

.auth-link a:hover {
  text-decoration: underline;
}

/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 576px) {
  .auth-box {
    max-width: 100%;
  }

  .card-body {
    padding: 1.3rem !important;
  }

  .brand-logo {
    width: 58px;
    height: 58px;
  }

  .brand-title {
    font-size: 1.35rem;
  }

  .brand-subtitle {
    font-size: 0.74rem;
  }
}