.customer-auth { padding: 44px 28px 58px; min-height: calc(100vh - var(--topbar)); display: grid; align-items: center; background: radial-gradient(ellipse at 18% 30%, rgba(170, 24, 49, .09), transparent 52%); }
.customer-auth *, .customer-auth *::before, .customer-auth *::after { box-sizing: border-box; }
.customer-auth__layout { width: 100%; max-width: 460px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; }
.customer-auth__eyebrow { display: block; color: #ff6c87; font-size: 10px; font-weight: 750; letter-spacing: 1.6px; text-transform: uppercase; }
.customer-auth__card { min-width: 0; padding: 31px; border: 1px solid #37252d; border-radius: 18px; background: linear-gradient(150deg, #191318 0%, #111114 45%); box-shadow: 0 20px 65px rgba(0, 0, 0, .3); }
.customer-auth__heading { margin-bottom: 24px; }
.customer-auth__heading h1 { margin: 11px 0 10px; color: #f7f5f8; font-size: 27px; line-height: 1.18; letter-spacing: -.8px; }
.customer-auth__heading p { margin: 0; color: #aaa4b0; font-size: 12px; line-height: 1.65; }
.customer-auth__email { color: #eee7ed; overflow-wrap: anywhere; }
.customer-auth__google { display: flex; gap: 11px; align-items: center; justify-content: center; width: 100%; min-height: 48px; padding: 12px 16px; border: 1px solid #37333c; border-radius: 10px; background: #1b191e; color: #f3f0f5; font-size: 12px; font-weight: 650; transition: background-color .15s, border-color .15s; }
.customer-auth__google:hover { border-color: #75616a; background: #252127; }
.customer-auth__google > svg:first-child { width: 21px; height: 21px; flex: 0 0 21px; }
.customer-auth__google > svg:last-child { width: 15px; height: 15px; margin-left: auto; color: #8c8493; }
.customer-auth__google > span { flex: 1; text-align: center; }
.customer-auth__google-help { margin: 8px 0 0; text-align: center; color: #a39aa9; font-size: 10px; line-height: 1.5; }
.customer-auth__divider { display: flex; align-items: center; gap: 12px; margin: 23px 0; color: #aaa2b1; font-size: 10px; }
.customer-auth__divider::before, .customer-auth__divider::after { content: ''; height: 1px; background: #30262d; flex: 1; }
.customer-auth__form { display: grid; gap: 17px; }
.customer-auth__field { min-width: 0; }
.customer-auth__field label { display: flex; align-items: baseline; justify-content: space-between; gap: 9px; margin: 0 0 8px; color: #e7e3e9; font-size: 11px; font-weight: 650; }
.customer-auth__field label span { color: #a29aa8; font-size: 9px; font-weight: 400; }
.customer-auth__field label .customer-auth__required { color: #ed869b; }
.customer-auth__field input { width: 100%; min-width: 0; height: 47px; padding: 0 13px; border: 1px solid #393039; border-radius: 9px; outline: none; color: #f8f4f7; background: #0d0d10; font: inherit; font-size: 13px; transition: border-color .15s, box-shadow .15s; }
.customer-auth__field input::placeholder { color: #807685; opacity: 1; }
.customer-auth__field input:focus { border-color: #f44a6b; box-shadow: 0 0 0 3px rgba(255, 49, 85, .1); }
.customer-auth__field small { display: block; margin-top: 7px; color: #a098a7; font-size: 10px; line-height: 1.55; }
.customer-auth__optional { min-width: 0; display: grid; gap: 16px; padding: 16px 14px; border: 1px solid #30282f; border-radius: 10px; margin: 5px 0 0; }
.customer-auth__optional legend { padding: 0 7px; color: #c8bccb; font-size: 10px; font-weight: 650; }
.customer-auth__optional > p { margin: -4px 0 0; color: #a49baa; font-size: 10px; line-height: 1.5; }
.customer-auth__terms { display: flex; align-items: flex-start; gap: 9px; margin: 0; color: #c0b5c4; font-size: 11px; line-height: 1.7; cursor: pointer; }
.customer-auth__terms input { width: 16px; height: 16px; flex: 0 0 16px; margin: 2px 0 0; accent-color: #ff3155; cursor: pointer; }
.customer-auth__terms a { color: #ff8ca3; text-decoration: underline; text-underline-offset: 3px; }
.customer-auth__terms a:hover { color: #ffc0ce; }
.customer-auth__terms input:focus-visible { outline: 2px solid #ff7d98; outline-offset: 3px; }
.customer-auth__terms-help { margin: -10px 0 0 25px; color: #a69cab; font-size: 10px; line-height: 1.6; }
.customer-auth__terms-cancel { margin: 17px 0 0; }
.customer-auth__submit { width: 100%; min-height: 48px; padding: 12px 16px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid #ff4568; border-radius: 10px; background: linear-gradient(100deg, #ed234d, #ff3155); color: #fff; font-size: 12px; font-weight: 750; cursor: pointer; box-shadow: 0 7px 20px rgba(247, 40, 77, .12); transition: background-color .15s, box-shadow .15s; }
.customer-auth__submit svg { width: 17px; height: 17px; }
.customer-auth__submit:hover:not(:disabled) { box-shadow: 0 7px 25px rgba(247, 40, 77, .26); }
.customer-auth__submit:disabled { background: #34232a; border-color: #533440; color: #bfaab5; box-shadow: none; cursor: not-allowed; }
.customer-auth__access-note { display: flex; gap: 8px; margin: 0; padding: 11px 12px; border: 1px solid #32252e; border-radius: 9px; background: #1c131a; color: #b7a7b6; font-size: 10px; line-height: 1.6; }
.customer-auth__access-note svg { width: 15px; height: 15px; flex: 0 0 15px; margin-top: 2px; color: #e6829a; }
.customer-auth__switch { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; border-top: 1px solid #30262d; margin-top: 24px; padding-top: 19px; color: #b5aab9; font-size: 11px; line-height: 1.5; }
.customer-auth__switch a { display: inline-flex; align-items: center; gap: 3px; color: #ff8ca3; font-weight: 650; }
.customer-auth__switch svg { width: 13px; height: 13px; }
.customer-auth__switch a:hover { color: #ffc0ce; text-decoration: underline; }
.customer-auth__back { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 19px; color: #a69cab; font-size: 10px; }
.customer-auth__back svg { width: 13px; height: 13px; }
.customer-auth__back:hover { color: #e3d4e1; }
.customer-auth__notice { border-radius: 9px; padding: 12px; margin-bottom: 19px; font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }
.customer-auth__notice--error { border: 1px solid #813549; background: #391922; color: #ffb7c6; }
.customer-auth__notice--success { border: 1px solid #315c47; background: #182a21; color: #a5dfbe; }
.customer-auth__code-illustration { width: 58px; height: 58px; display: grid; place-items: center; margin: 0 auto 24px; border: 1px solid #753044; background: #341824; border-radius: 15px; color: #ff758f; }
.customer-auth__code-illustration svg { width: 29px; height: 29px; }
.customer-auth__field input.customer-auth__code { height: 59px; text-align: center; font-size: 28px; letter-spacing: .34em; padding-left: calc(13px + .34em); font-weight: 650; }
.customer-auth__code-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin: 17px 0; }
.customer-auth__secondary { display: flex; gap: 6px; align-items: center; justify-content: center; width: 100%; min-height: 43px; padding: 9px; border: 1px solid #3e303d; border-radius: 9px; color: #c7baca; background: #18131b; font-size: 10px; line-height: 1.4; cursor: pointer; }
.customer-auth__secondary svg { width: 14px; height: 14px; flex: 0 0 14px; }
.customer-auth__secondary:hover:not(:disabled) { border-color: #d2657e; color: #fff; }
.customer-auth__secondary:disabled { opacity: .58; cursor: not-allowed; }
.customer-auth__trap { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.customer-auth a:focus-visible, .customer-auth button:focus-visible, .customer-auth__notice:focus-visible { outline: 2px solid #ff7d98; outline-offset: 3px; }
@media (max-width: 1100px) { .customer-auth { padding: 33px 24px 45px; } .customer-auth__card { padding: 26px; } }
@media (max-width: 480px) { .customer-auth { padding: 25px 15px 35px; } .customer-auth__card { padding: 25px 20px; border-radius: 15px; } .customer-auth__heading h1 { font-size: 25px; } .customer-auth__field input { font-size: 16px; } .customer-auth__google { font-size: 12px; } .customer-auth__code-actions { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .customer-auth a, .customer-auth input, .customer-auth button { transition: none; } }