/* ════════════════════════════════════════════════════════════════
   auth.css — extracted by F8c from layouts/auth.blade.php (visual review approved)
   Loaded only by that view via an added <link>. Kept as a dedicated file
   because the page is standalone / uses generic element selectors that must
   NOT be globalized into common.css.
   ════════════════════════════════════════════════════════════════ */
    /* Auth-specific overrides */
    body {
      overflow: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: var(--sp-4);
    }

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

    .auth-logo {
      text-align: center;
      margin-bottom: var(--sp-6);
    }
    .auth-logo-icon {
      width: 48px;
      height: 48px;
      background: var(--brand-accent-solid);
      border-radius: var(--r-md);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: var(--fs-xl);
      color: white;
      margin-bottom: var(--sp-3);
    }
    .auth-logo-name {
      font-size: var(--fs-xl);
      font-weight: 700;
      color: var(--text-primary);
    }
    .auth-logo-sub {
      font-size: var(--fs-sm);
      color: var(--text-tertiary);
      margin-top: var(--sp-1);
    }

    .auth-card {
      background: var(--bg-surface);
      border: 1px solid var(--border-color);
      border-radius: var(--r-lg);
      box-shadow: var(--card-shadow);
      padding: var(--sp-6);
    }

    .auth-title {
      font-size: var(--fs-lg);
      font-weight: 600;
      margin-bottom: var(--sp-5);
      text-align: center;
    }

    .auth-footer {
      text-align: center;
      margin-top: var(--sp-4);
      font-size: var(--fs-sm);
      color: var(--text-secondary);
    }
    .auth-footer a {
      color: var(--text-link);
      font-weight: 500;
    }

    .auth-divider {
      display: flex;
      align-items: center;
      gap: var(--sp-3);
      margin: var(--sp-4) 0;
      color: var(--text-tertiary);
      font-size: var(--fs-xs);
    }
    .auth-divider::before,
    .auth-divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--border-color);
    }