/* Login + signup split layout (templates/storefront/auth/*). Sea side + form card. */
body:has(.au) { background: var(--bg); }
.au { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; width: 100%; }

/* sea / brand side */
.au-sea { position: relative; isolation: isolate; overflow: hidden; margin: 12px 0 12px 12px; border-radius: 30px; color: var(--white); display: flex; flex-direction: column; justify-content: space-between; padding: clamp(24px, 3vw, 44px); min-height: calc(100vh - 24px);
  background: radial-gradient(120% 90% at 10% 0%, #3B8FFF 0%, #0B4FB8 45%, #061E52 100%); }
.au-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: .4; mix-blend-mode: luminosity; transform: scale(1.06); animation: auZoom 24s ease-in-out infinite alternate; }
@keyframes auZoom { to { transform: scale(1.16) translate(-1.5%, -1%); } }
.au-glow { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6,30,82,.15) 0%, rgba(6,30,82,.35) 45%, rgba(4,23,58,.92) 100%), radial-gradient(400px 300px at 85% 10%, rgba(255,212,59,.28), transparent 70%); }
.au-logo .logo-word { color: var(--white); }
.au-logo .logo-word small { color: var(--sun); }
.au-logo .logo-img { box-shadow: 0 0 0 3px var(--white), 0 0 0 6px var(--sun), 0 16px 34px -10px rgba(0,0,0,.6); }
.au-copy { max-width: 30rem; margin-bottom: clamp(60px, 9vw, 120px); animation: fadeUp .9s var(--ease) .1s both; }
.au-copy h1 { font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.6rem); font-weight: 800; letter-spacing: -.045em; line-height: 1; margin-top: 18px; color: var(--white); text-wrap: balance; }
.au-copy p { margin-top: 14px; font-size: 1.02rem; opacity: .9; max-width: 40ch; }
.au-points { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.au-points li { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: .92rem; animation: fadeUp .7s var(--ease) both; }
.au-points li:nth-child(1) { animation-delay: .35s; } .au-points li:nth-child(2) { animation-delay: .45s; } .au-points li:nth-child(3) { animation-delay: .55s; }
.au-points i { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: rgba(255,255,255,.14); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.au-points svg { width: 18px; color: var(--sun); }
.au-waves { position: absolute; left: 0; bottom: 0; width: 200%; height: 120px; aspect-ratio: auto; z-index: -1; }
.au-waves .w1 { fill: rgba(142,195,255,.22); animation: waveX 14s linear infinite; }
.au-waves .w2 { fill: rgba(4,23,58,.85); animation: waveX 9s linear infinite reverse; }
.au-boat { position: absolute; width: 90px; height: auto; aspect-ratio: auto; bottom: 46px; left: 12%; z-index: -1; animation: fsCross 40s ease-in-out infinite alternate, auBob 3.4s ease-in-out infinite; }
@keyframes auBob { 50% { translate: 0 5px; rotate: 2deg; } }

/* form side */
.au-side { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 84px clamp(16px, 4vw, 64px) 32px; position: relative; min-width: 0; }
.au-top { position: absolute; top: 20px; left: clamp(16px, 3vw, 40px); right: clamp(16px, 3vw, 40px); display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.au-mlogo { display: none; margin-right: auto; }
.au-switch { font-size: .86rem; color: var(--ink-2); margin-right: 8px; }
.au-switch a, .au-foot a, .au-legal a { color: var(--brand); font-weight: 800; }
.au-switch a:hover, .au-foot a:hover, .au-legal a:hover { text-decoration: underline; text-underline-offset: 3px; }
.au-card { width: 100%; max-width: 460px; background: var(--surface); color: var(--ink); border-radius: 28px; padding: clamp(22px, 3vw, 36px); box-shadow: var(--shadow-lg), 0 0 0 1px var(--line); animation: auIn .7s var(--spring) both; }
@keyframes auIn { from { opacity: 0; transform: translateY(24px) scale(.97); } }
.au-head { text-align: center; margin-bottom: 20px; }
.au-head h2 { font-size: clamp(1.7rem, 1.4rem + 1vw, 2.2rem); font-weight: 800; margin-top: 8px; }
.au-head p { color: var(--ink-2); margin-top: 8px; font-size: .92rem; }
.au-tabs { display: flex; width: 100%; margin-bottom: 18px; }
.au-tabs > button { flex: 1; justify-content: center; }
.au-google { height: 52px; gap: 10px; }
.au-google svg { width: 20px; height: 20px; aspect-ratio: auto; }
.au-google:hover svg { transform: none; }
.au-or { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.au-or::before, .au-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.au-form { display: grid; gap: 14px; }
.au-form .field input { min-height: 50px; }
.pw { position: relative; }
.pw-eye { position: absolute; right: 6px; top: 27px; width: 40px; height: 40px; border: 0; border-radius: 11px; background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.pw-eye:hover { color: var(--brand); background: var(--surface-2); }
.pw input { padding-right: 50px; }
.pw-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 4px; }
.pw-meter i { height: 5px; border-radius: 5px; background: var(--surface-2); transition: background .3s; }
.pw-meter i.on.weak { background: var(--hot); }
.pw-meter i.on.mid { background: var(--egg); }
.pw-meter i.on.strong { background: var(--veg); }
.au-row { display: flex; justify-content: flex-end; margin-top: -4px; }
.au-row .link { border: 0; background: none; cursor: pointer; font: inherit; font-weight: 800; font-size: .8rem; }
.au-go { height: 54px; border-radius: 16px; font-size: .98rem; box-shadow: var(--shadow-brand); margin-top: 4px; }
.au-go.busy { opacity: .75; }
.au-err { font-size: .82rem; font-weight: 700; color: var(--hot); background: color-mix(in srgb, var(--hot) 10%, var(--surface)); padding: 10px 12px; border-radius: 12px; }
.au-phone { display: flex; gap: 8px; }
.au-phone > span { display: grid; place-items: center; padding: 0 14px; border-radius: 13px; background: var(--surface-2); color: var(--ink-2); font-weight: 800; font-size: .9rem; flex-shrink: 0; }
.au-phone input { flex: 1; min-width: 0; }
.au-code { font-family: var(--f-display); font-size: 1.4rem !important; letter-spacing: .5em; text-align: center; font-weight: 800; }
.field small .link { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; font-weight: 800; color: var(--brand); }
.au-agree { font-size: .82rem; }
.au-form .picks .pick > span { min-height: 38px; font-size: .8rem; }
.au-legal { text-align: center; font-size: .76rem; color: var(--muted); margin-top: 18px; line-height: 1.5; }
.au-foot { display: none; margin-top: 18px; font-size: .88rem; color: var(--ink-2); }

@media (max-width: 1024px) {
  .au { grid-template-columns: 1fr; }
  .au-sea { display: none; }
  .au-mlogo { display: flex; }
  .au-mlogo .logo-img { width: 48px; height: 48px; }
  .au-mlogo .logo-word { font-size: 1.15rem; }
  .au-mlogo .logo-word small { font-size: .5rem; letter-spacing: .2em; }
  .au-side { justify-content: flex-start; padding-top: 96px;
    background: radial-gradient(90% 40% at 50% 0%, color-mix(in srgb, var(--brand) 18%, transparent), transparent 70%); }
}
@media (max-width: 640px) {
  .au-switch { display: none; }
  .au-foot { display: block; }
  .au-card { border-radius: 24px; }
  .au-side { padding-inline: 16px; }
  .au-top { left: 16px; right: 12px; top: 14px; }
}
@media (prefers-reduced-motion: reduce) { .au-photo, .au-waves path, .au-boat { animation: none; } }