.fox-register-page {
    min-height: calc(100vh - 90px);
    padding: clamp(32px, 6vw, 86px) 20px clamp(48px, 7vw, 108px);
    background-color: #f3f4f5;
    background-image:
        linear-gradient(135deg, transparent 28%, rgba(255,255,255,.78) 29%, transparent 31%),
        linear-gradient(45deg, transparent 40%, rgba(126,137,148,.12) 41%, transparent 61%),
        linear-gradient(135deg, rgba(255,255,255,.62) 22%, transparent 22%, transparent 76%, rgba(255,255,255,.48) 76%),
        linear-gradient(120deg, #fafafa, #e6e8ea 52%, #fff);
}
.fox-register-shell { max-width: 1080px; margin: 0 auto; }
.fox-register-card {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
    min-height: 640px;
    overflow: hidden;
    border: 0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 26px 70px rgba(33, 39, 45, .11);
}
.fox-register-form-panel { position: relative; padding: clamp(28px, 4.5vw, 58px); color: #24262b; }
.fox-register-heading { margin-bottom: 32px; }
.fox-register-back { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 31px; color: #61666d; font-size: 13px; font-weight: 700; text-decoration: none; }
.fox-register-back:hover, .fox-register-back:focus-visible { color: #d9730d; text-decoration: none; }
.fox-register-heading h1 { margin: 0 0 8px; color: #202329; font-size: clamp(25px, 2.8vw, 35px); font-weight: 800; letter-spacing: -.045em; line-height: 1.15; }
.fox-register-heading h1 span { color: #e97b16; }
.fox-register-heading p { margin: 0; color: #66707a; font-size: 14px; line-height: 1.5; }
.fox-register-progress { display: flex; align-items: center; gap: 11px; margin: 0 0 29px; }
.fox-register-progress-step { display: inline-flex; align-items: center; gap: 8px; color: #818891; font-size: 12px; font-weight: 750; white-space: nowrap; }
.fox-register-progress-step > span { display: inline-grid; width: 25px; height: 25px; place-items: center; border: 1px solid #cdd3da; border-radius: 50%; color: #777e87; background: #f8f9fa; font-size: 11px; }
.fox-register-progress-step.is-active { color: #22262b; }
.fox-register-progress-step.is-active > span { border-color: #f49a32; color: #fff; background: #ee8d20; }
.fox-register-progress-line { flex: 1; max-width: 44px; height: 1px; background: #d4d9de; }
.fox-register-step[hidden], .fox-register-complete[hidden], .fox-register-verify[hidden], .fox-register-feedback[hidden], .fox-register-progress[hidden], .fox-register-signin[hidden], #fox-register-form[hidden] { display: none !important; }
.fox-register-field { margin-bottom: 18px; }
.fox-register-field label { display: block; margin-bottom: 7px; color: #393d43; font-size: 13px; font-weight: 750; }
.fox-register-field input, .fox-register-field select {
    display: block;
    width: 100%;
    height: 49px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid #cfd5db;
    border-radius: 8px;
    color: #25282d;
    background: #fff;
    box-shadow: none;
    font: inherit;
    font-size: 14px;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.fox-register-field input::placeholder { color: #9aa1aa; }
.fox-register-field input:focus, .fox-register-field select:focus { outline: none; border-color: #e98b29; box-shadow: 0 0 0 3px rgba(241, 148, 51, .14); }
.fox-register-field input[aria-invalid="true"], .fox-register-field select[aria-invalid="true"] { border-color: #c93535; }
.fox-register-field small { display: block; margin-top: 6px; color: #858c94; font-size: 11px; }
.fox-register-country-wrap select { appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23565f68' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; }
.fox-register-password-wrap { position: relative; }
.fox-register-password-wrap input { padding-right: 51px; }
.fox-register-reveal { position: absolute; top: 0; right: 0; display: grid; width: 48px; height: 49px; place-items: center; border: 0; border-radius: 0 8px 8px 0; color: #67707a; background: transparent; cursor: pointer; }
.fox-register-reveal:hover, .fox-register-reveal:focus-visible { color: #d9730d; }
.fox-register-primary, .fox-register-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 11px; min-height: 49px; padding: 0 22px; border-radius: 8px; font: inherit; font-size: 14px; font-weight: 800; text-decoration: none; cursor: pointer; transition: background-color .18s ease, border-color .18s ease, transform .18s ease; }
.fox-register-primary { width: 100%; margin-top: 10px; border: 1px solid #e9891f; color: #201a13; background: #f5a13c; }
.fox-register-primary:hover, .fox-register-primary:focus-visible { color: #201a13; background: #ffb25c; border-color: #ed8f22; text-decoration: none; transform: translateY(-1px); }
.fox-register-primary:disabled { opacity: .65; cursor: wait; transform: none; }
.fox-register-secondary { border: 1px solid #cfd5db; color: #333a42; background: #fff; }
.fox-register-secondary:hover, .fox-register-secondary:focus-visible { border-color: #e9891f; color: #c66c12; background: #fff9f1; text-decoration: none; }
.fox-register-actions { display: flex; gap: 12px; margin-top: 4px; }
.fox-register-actions > * { flex: 1; margin-top: 0; }
.fox-register-feedback, .fox-register-notice { margin: 17px 0 0; padding: 11px 13px; border: 1px solid #eab6b4; border-radius: 8px; color: #9b2325; background: #fff4f2; font-size: 13px; line-height: 1.45; }
.fox-register-feedback.is-success { border-color: #b7dac7; color: #236746; background: #effaf3; }
.fox-register-signin button, .fox-register-resend { border: 0; padding: 0; color: #ce7017; background: none; font: inherit; font-weight: 800; cursor: pointer; }
.fox-register-signin button:hover, .fox-register-resend:hover { text-decoration: underline; }
.fox-register-verify { padding: 18px 0 25px; }
.fox-register-verify h2 { margin: 0 0 9px; color: #25282d; font-size: 24px; font-weight: 800; }
.fox-register-verify > p { margin: 0 0 24px; color: #69727b; font-size: 14px; line-height: 1.6; }
.fox-register-verify #fox-verify-code { max-width: 210px; font-size: 23px; font-weight: 800; letter-spacing: .22em; text-align: center; }
.fox-register-verify .fox-register-primary { margin-top: 20px; }
.fox-register-resend { display: inline-block; margin-top: 20px; font-size: 13px; }
.fox-register-signin { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 27px; color: #7b838c; font-size: 13px; }
.fox-register-signin a { color: #ce7017; font-weight: 800; text-decoration: none; }
.fox-register-signin a:hover, .fox-register-signin a:focus-visible { text-decoration: underline; }
.fox-register-art-panel { position: relative; display: grid; place-items: center; overflow: hidden; background: linear-gradient(140deg, #f5f6f6 2%, #e7eaec 55%, #f8f9f9); }
.fox-register-art-panel::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 26%, rgba(255,255,255,.62) 26.2%, transparent 27.5%), linear-gradient(45deg, transparent 46%, rgba(163,173,184,.12) 46.2%, transparent 48%), linear-gradient(135deg, rgba(255,255,255,.3) 22%, transparent 22%, transparent 75%, rgba(255,255,255,.24) 75%); }
.fox-register-art-panel::after { content: ""; position: absolute; right: -25%; bottom: -55%; width: 120%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(247,156,59,.21), transparent 65%); pointer-events: none; }
.fox-register-art-grid { display: none; }
.fox-register-art-panel img { position: relative; z-index: 1; display: block; width: min(115%, 610px); max-width: none; height: auto; margin-top: auto; margin-left: -5%; filter: drop-shadow(0 22px 28px rgba(32,28,24,.14)); }
.fox-register-success, .fox-register-complete { padding: 37px 0 25px; text-align: left; }
.fox-register-success-icon { display: grid; width: 52px; height: 52px; margin-bottom: 18px; place-items: center; border-radius: 12px; color: #d97718; background: #fff0dc; font-size: 22px; }
.fox-register-success h2, .fox-register-complete h2 { margin: 0 0 9px; color: #25282d; font-size: 24px; font-weight: 800; }
.fox-register-success p, .fox-register-complete p { margin: 0 0 25px; color: #69727b; font-size: 14px; line-height: 1.6; }
.fox-register-success .fox-register-primary, .fox-register-complete .fox-register-primary { max-width: 240px; }
@media (max-width: 830px) {
    .fox-register-card { grid-template-columns: minmax(0, 1fr) minmax(250px, .7fr); }
    .fox-register-form-panel { padding: 30px; }
    .fox-register-art-panel img { width: 135%; margin-left: -18%; }
}
@media (max-width: 680px) {
    .fox-register-page { padding: 20px 14px 48px; }
    .fox-register-card { display: flex; flex-direction: column; min-height: 0; }
    .fox-register-form-panel { padding: 24px 22px 30px; }
    .fox-register-heading { margin-bottom: 24px; }
    .fox-register-back { margin-bottom: 22px; }
    .fox-register-art-panel { min-height: 170px; }
    .fox-register-art-panel img { width: min(100%, 240px); margin: -18px 0 -68px; }
    .fox-register-signin { flex-wrap: wrap; text-align: center; }
}
@media (max-width: 390px) {
    .fox-register-actions { gap: 8px; }
    .fox-register-primary, .fox-register-secondary { padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .fox-register-page *, .fox-register-page *::before, .fox-register-page *::after { transition: none !important; }
}