@layer components {
  .cx-auth-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: clamp(1rem, 3vw, 2.5rem);
    background:
      radial-gradient(circle at 18% 12%, rgba(15, 118, 110, .18), transparent 26rem),
      radial-gradient(circle at 86% 82%, rgba(212, 175, 55, .13), transparent 24rem),
      linear-gradient(135deg, #eefcf9, #f8fbff 48%, #ffffff);
  }

  .cx-auth-shell-inner {
    width: min(1120px, 100%);
    display: grid;
    grid-template-columns: minmax(320px, 440px) minmax(0, 1fr);
    gap: clamp(1rem, 3vw, 2rem);
    align-items: stretch;
  }

  .cx-auth-page {
    min-height: auto;
    display: contents;
  }

  .cx-auth-panel {
    align-self: center;
    border: 1px solid rgba(15, 118, 110, .14);
    box-shadow: 0 28px 70px rgba(15, 42, 45, .13);
    overflow: hidden;
  }

  .cx-auth-panel .cx-card-header {
    padding: 1.35rem 1.4rem;
    background: linear-gradient(135deg, rgba(236,253,245,.78), rgba(255,255,255,.96));
  }

  .cx-auth-hero {
    min-height: 440px;
    border-radius: calc(var(--cx-radius-lg) + .65rem);
    background:
      radial-gradient(circle at top right, rgba(15,118,110,.2), transparent 24rem),
      linear-gradient(135deg, rgba(236,253,245,.96), rgba(255,255,255,.82));
    border: 1px solid rgba(15,118,110,.14);
    box-shadow: var(--cx-shadow-soft);
    padding: clamp(1.5rem, 4vw, 3rem);
    display: grid;
    align-content: center;
    gap: 1rem;
  }

  .cx-auth-hero h1 {
    margin: 0;
    color: var(--cx-ink);
    font-size: clamp(2.2rem, 5vw, 4rem);
    letter-spacing: -.04em;
  }

  .cx-auth-hero p {
    margin: 0;
    color: var(--cx-muted);
    max-width: 52ch;
    line-height: 1.9;
    font-weight: 760;
  }

  .cx-auth-brand-mark {
    inline-size: 64px;
    block-size: 64px;
    font-size: 1.35rem;
  }

  .cx-auth-owner {
    color: var(--cx-brand-strong);
    background: rgba(15,118,110,.08);
    border-radius: 999px;
    padding: .28rem .65rem;
    font-size: .74rem;
    font-weight: 900;
  }

  .cx-auth-security-list {
    display: grid;
    gap: .55rem;
    margin: .5rem 0 0;
    padding: 0;
    list-style: none;
  }
  .cx-auth-security-list li {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--cx-muted);
    font-weight: 760;
  }
  .cx-auth-security-list li::before {
    content: '✓';
    display: inline-grid;
    place-items: center;
    inline-size: 1.35rem;
    block-size: 1.35rem;
    border-radius: 999px;
    background: rgba(15,118,110,.1);
    color: var(--cx-brand-strong);
    font-weight: 950;
  }

  .cx-auth-submit-row {
    display: grid;
    gap: .75rem;
  }

  .cx-password-field {
    position: relative;
    display: block;
  }
  .cx-password-field .cx-input { padding-inline-end: 4.9rem; }
  [dir="rtl"] .cx-password-field .cx-input { padding-inline-end: .85rem; padding-inline-start: 4.9rem; }
  .cx-password-toggle {
    position: absolute;
    inset-inline-end: .42rem;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    border-radius: 999px;
    background: rgba(15,118,110,.09);
    color: var(--cx-brand-strong);
    padding: .35rem .7rem;
    font-weight: 900;
    cursor: pointer;
  }
  [dir="rtl"] .cx-password-toggle { inset-inline-end: auto; inset-inline-start: .42rem; }
  .cx-password-toggle:hover { background: rgba(15,118,110,.16); }

  .cx-auth-form-note {
    border: 1px solid rgba(15, 118, 110, .12);
    background: rgba(236, 253, 245, .72);
    color: var(--cx-muted);
    border-radius: var(--cx-radius-md);
    padding: .8rem .9rem;
    line-height: 1.7;
    font-weight: 740;
  }

  @media (max-width: 980px) {
    .cx-auth-shell { place-items: start center; }
    .cx-auth-shell-inner { grid-template-columns: 1fr; }
    .cx-auth-hero { min-height: auto; order: -1; }
    .cx-auth-panel { align-self: stretch; }
  }

  @media (max-width: 620px) {
    .cx-auth-shell { padding: .85rem; }
    .cx-auth-shell-inner { gap: .85rem; }
    .cx-auth-hero, .cx-auth-panel { border-radius: var(--cx-radius-lg); }
    .cx-auth-hero { padding: 1.2rem; }
    .cx-auth-panel .cx-card-header, .cx-auth-panel .cx-card-body { padding-inline: 1rem; }
  }
}