@layer components {
  .sl-login-page {
    @apply h-full;
  }

  .sl-login-shell {
    @apply mx-auto w-full max-w-[1054px];
  }

  .sl-login-frame {
    @apply w-full overflow-hidden border border-[#edf0fa] bg-white p-[10px];
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 100px;
    box-shadow: 0 10px 28px rgba(95, 111, 149, 0.06);
  }

  .sl-login-card {
    @apply grid gap-[34px] bg-white px-[2px] py-[2px] xl:grid-cols-[430px_minmax(0,1fr)];
    margin-bottom: 48px;
  }

  .sl-login-welcome {
    @apply relative overflow-hidden px-[18px] py-[20px] text-white;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 100px;
    background:
      linear-gradient(180deg, #556dcc 0%, #586bc3 60%, #5e678f 100%);
    min-height: 486px;
  }

  .sl-login-welcome h1 {
    @apply m-0 text-[18px] font-extrabold leading-[1.2] text-white;
  }

  .sl-login-welcome__copy > p:last-child {
    @apply mt-10 max-w-[310px] text-[12px] font-semibold leading-[1.2];
    color: rgba(255, 255, 255, 0.94);
  }

  .sl-login-welcome__notice {
    @apply relative z-[1] ml-[22px] mt-[68px] flex max-w-[332px] gap-3 rounded-[6px] bg-white px-[20px] py-[18px] text-[#4b556d];
    box-shadow: 0 10px 18px rgba(27, 40, 79, 0.12);
  }

  .sl-login-welcome__notice-icon {
    @apply flex h-[25px] w-[25px] shrink-0 items-center justify-center rounded-full border border-[#1f2937] text-[13px] text-[#1f2937];
  }

  .sl-login-welcome__notice strong {
    @apply block text-[13px] font-extrabold text-[#1f2937];
  }

  .sl-login-welcome__notice p {
    @apply mb-0 mt-[4px] text-[12px] font-medium text-[#7c8597];
  }

  .sl-login-welcome__notice small {
    @apply mt-[6px] block text-[11px] leading-[1.55] text-[#7c8597];
  }

  .sl-login-welcome__footer {
    @apply absolute bottom-[24px] left-[24px] z-[1];
  }

  .sl-login-security-badge {
    @apply inline-flex items-center;
  }

  .sl-login-security-badge img {
    @apply h-auto w-[126px] object-contain;
  }

  .sl-login-form-panel {
    @apply flex flex-col rounded-[8px] bg-white px-0 py-0;
  }

  .sl-login-brand {
    @apply flex justify-center pb-[22px] pt-[4px];
  }

  .sl-login-brand img {
    @apply h-auto w-full max-w-[308px] object-contain;
  }

  .sl-login-form-shell {
    @apply mx-auto flex min-h-[382px] w-full max-w-[438px] flex-col justify-start rounded-[6px] border border-[#e5e8f1] px-[18px] py-[16px];
  }

  .sl-login-alert {
    @apply mb-5 flex flex-col gap-1 rounded-[16px] border border-[#f2c7c7] bg-[#fff4f4] px-4 py-3 text-[#a63e3e];
  }

  .sl-login-alert strong {
    @apply text-[13px] font-extrabold;
  }

  .sl-login-alert span {
    @apply text-[12px] leading-5;
  }

  .sl-login-form {
    @apply space-y-[18px];
  }

  .sl-login-field {
    @apply space-y-[8px];
  }

  .sl-login-field label {
    @apply block text-[14px] font-medium text-[#2d3442];
  }

  .sl-login-field input {
    @apply h-[34px] w-full rounded-[6px] border border-[#dde2ed] bg-white px-[12px] text-[12px] text-[#1f2937] outline-none transition placeholder:text-[#c2c7d2] focus:border-[var(--sl-primary)] focus:ring-2 focus:ring-[rgba(77,128,208,0.08)];
  }

  .sl-login-password {
    @apply relative;
  }

  .sl-login-password input {
    @apply pr-10;
  }

  .sl-login-password__toggle {
    @apply absolute right-2 top-1/2 flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-full border-0 bg-transparent p-0 text-[12px] text-[#8a95aa] transition hover:text-[var(--sl-primary)];
  }

  .sl-login-remember {
    @apply flex cursor-pointer items-start gap-2 px-0 py-0;
  }

  .sl-login-remember input {
    @apply mt-[3px] h-3.5 w-3.5 rounded border-[#bcc7de] text-[#111827] focus:ring-[#111827];
  }

  .sl-login-remember strong {
    @apply block text-[12px] font-medium text-[#1f2937];
  }

  .sl-login-remember small {
    @apply mt-[2px] block text-[12px] leading-[1.2] text-[#9aa3b2];
  }

  .sl-login-submit {
    @apply inline-flex h-[34px] w-full items-center justify-center rounded-[6px] border-0 bg-[#151e31] px-6 text-[13px] font-medium text-white transition hover:bg-[#1b2a44];
    box-shadow: none;
  }

  .sl-login-links {
    @apply mt-auto flex flex-wrap items-center justify-between gap-2 pt-[14px] text-[11px];
  }

  .sl-login-links a {
    @apply font-semibold text-[var(--sl-primary)] no-underline transition hover:text-[#2b59a8];
  }

  .sl-login-meta {
    @apply mt-[10px] flex min-w-0 flex-col gap-4 px-[8px] text-[10px] text-[#7e879a] md:flex-row md:items-center md:justify-between;
    padding-right: 56px;
  }

  .sl-login-meta p {
    @apply m-0 min-w-0 flex-1;
  }

  .sl-login-meta img {
    @apply h-auto w-auto shrink-0 self-end max-h-[30px] max-w-[88px] object-contain opacity-95;
    margin-right: 10px;
  }

  @media (max-width: 1279px) {
    .sl-login-card {
      @apply grid-cols-1 gap-6;
    }

    .sl-login-form-panel {
      @apply max-w-none;
    }
  }

  @media (max-width: 767px) {
    .sl-login-frame {
      @apply min-h-0 p-3;
      border-radius: 12px;
    }

    .sl-login-card {
      @apply gap-4 p-2;
    }

    .sl-login-welcome {
      @apply min-h-0 rounded-[12px] px-4 py-5;
    }

    .sl-login-welcome {
      border-bottom-left-radius: 12px;
      border-bottom-right-radius: 12px;
    }

    .sl-login-welcome__notice {
      @apply ml-0 mt-6 max-w-none;
    }

    .sl-login-welcome__footer {
      @apply static mt-6;
    }

    .sl-login-form-panel {
      @apply rounded-[12px] px-0 py-0;
    }

    .sl-login-form-shell {
      @apply max-w-none min-h-0 px-4 py-4;
    }

    .sl-login-links {
      @apply flex-col items-start;
    }

    .sl-login-meta {
      @apply gap-3 px-0;
      padding-right: 8px;
    }

    .sl-login-meta img {
      @apply self-start;
    }

    .sl-login-brand {
      @apply pb-4;
    }

    .sl-login-brand img {
      @apply max-w-[248px];
    }

    .sl-login-field input,
    .sl-login-submit {
      @apply h-10;
    }
  }
}