:root {
      --bs-body-bg: #f8fafc;
      --card-bg: #ffffff;
      --ring: rgba(13, 110, 253, .18);
      /* ตามสี primary ของ BS5 */
      --radius: 1.25rem;
      /* ~20px */
  }

  /* พื้นหลังโทนขาวมินิมอล */
  body {
      background:
          radial-gradient(1100px 520px at 80% -10%, #fff 0%, #f8fafc 60%, #f1f5f9 100%) no-repeat,
          linear-gradient(#fff, #f8fafc);
  }

  /* การ์ดลอย + แอนิเมชัน */
  .login-card {
      max-width: 420px;
      border: 1px solid var(--bs-border-color);
      border-radius: var(--radius);
      background: var(--card-bg);
      box-shadow: 0 18px 40px -12px rgba(2, 6, 23, .16);
      animation: fade-in-up .6s cubic-bezier(.22, 1, .36, 1);
  }

  @keyframes fade-in-up {
      from {
          opacity: 0;
          transform: translate3d(0, 14px, 0) scale(.995)
      }

      to {
          opacity: 1;
          transform: translate3d(0, 0, 0) scale(1)
      }
  }

  @media (prefers-reduced-motion: reduce) {
      .login-card {
          animation: none
      }
  }

  /* ไอคอนนำหน้าใน form-floating */
  .field-wrap {
      position: relative;
  }

  .field-icon {
      position: absolute;
      top: 50%;
      left: .9rem;
      transform: translateY(-50%);
      color: var(--bs-secondary-color);
      pointer-events: none;
  }

  .ps-icon {
      padding-left: 2.4rem !important;
  }

  /* เผื่อที่ให้ไอคอน */

  /* ปุ่มหลัก ลื่นนิด ๆ */
  .btn-primary {
      transition: transform .06s ease, filter .2s ease, box-shadow .2s ease, opacity .2s ease;
      box-shadow: 0 12px 28px -12px rgba(13, 110, 253, .5);
  }

  .btn-primary:hover {
      transform: translateY(-1px);
      filter: saturate(1.05)
  }

  .btn-primary:active {
      transform: translateY(0)
  }

  /* โฟกัสฟิลด์เด่นขึ้นนิด */
  .form-control:focus {
      box-shadow: 0 0 0 .2rem var(--ring);
      border-color: var(--bs-primary);
  }

  /* fallback */
  .min-vh-80 {
      min-height: 80vh !important;
  }

  /* มือถือ/เบราว์เซอร์ใหม่ ใช้ dynamic viewport จะเป๊ะกว่า */
  @supports (min-height: 100dvh) {
      .min-vh-80 {
          min-height: 70dvh !important;
      }
  }