/* Shared layout for login, signup and checkout templates */
.auth { min-height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 40px; align-items: center; padding-block: 24px 48px; }
.art { position: relative; height: 560px; perspective: 1200px; }
.art .layer { position: absolute; inset: 0; margin: auto; width: min(360px, 80%); height: 440px; border-radius: 34px; transform-style: preserve-3d; }
.art .phone { transform: rotateY(-22deg) rotateX(10deg) rotateZ(2deg); animation: drift 9s ease-in-out infinite; }
.art .phone::before { content: ""; position: absolute; inset: 12px; border-radius: 26px; border: 1px solid var(--line);
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 40%); }
.art .bubble { position: absolute; left: 36px; right: 36px; padding: 14px 16px; border-radius: 18px; transform: translateZ(60px); font-size: 14px; }
.art .bubble b { font-family: var(--f-mono); letter-spacing: .12em; }
.art .b1 { top: 90px; } .art .b2 { top: 200px; transform: translateZ(90px); } .art .b3 { top: 300px; transform: translateZ(40px); }
.art .shadow { position: absolute; left: 20%; right: 20%; bottom: 0; height: 40px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.45), transparent); filter: blur(6px); }
@keyframes drift { 0%,100% { transform: rotateY(-22deg) rotateX(10deg) rotateZ(2deg) translateY(0) } 50% { transform: rotateY(-14deg) rotateX(6deg) rotateZ(0) translateY(-12px) } }
.art-copy { position: absolute; left: 0; bottom: 6px; max-width: 42ch; }
.art-copy h1 { font-size: clamp(30px, 3.4vw, 44px); font-weight: 800; }
.art-copy p { color: var(--muted); margin: 10px 0 0; }
.card { padding: 30px; display: grid; gap: 20px; }
.card h2 { font-size: 26px; }
.card .sub { color: var(--muted); margin: -10px 0 0; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--faint); font-size: 12.5px; }
.divider::before, .divider::after { content: ""; height: 1px; background: var(--line); flex: 1; }
.alt { display: grid; gap: 10px; }
.legal { font-size: 12.5px; color: var(--faint); margin: 0; }
.token { font: 12px/1.5 var(--f-mono); word-break: break-all; background: color-mix(in srgb, var(--fg) 5%, transparent); border-radius: 10px; padding: 10px 12px; color: var(--muted); }
.fields { display: grid; gap: 14px; }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
@media (max-width: 960px) { .auth { grid-template-columns: minmax(0, 1fr); } .art { display: none; } }