.signup-page .register-container {
    position: relative;
    isolation: isolate;
    justify-content: center;
    gap: clamp(32px, 4vw, 64px);
    padding: 180px 4% 70px;
    background: radial-gradient(ellipse at 12% 35%, #873cf044, transparent 50%), linear-gradient(90deg, #090712c9, #090712a8), url('/images/background.png') center / cover;
}
.signup-page .register-container::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(ellipse at 70% 70%, #c77dff20, transparent 55%);
    animation: signup-light 8s ease-in-out infinite alternate;
}
.signup-story { flex: 1; max-width: 570px; animation: signup-enter .8s ease both; }
.signup-eyebrow { color: #d8b5ff; font-size: 11px; letter-spacing: 3px; font-weight: 800; }
.signup-story h2 { font-size: clamp(42px, 4.8vw, 74px); line-height: 1.05; letter-spacing: -3px; margin: 24px 0; }
.signup-story h2 span { color: #c99aff; text-shadow: 0 0 45px #a855f750; }
.signup-story p { color: #c6bfce; font-size: 18px; line-height: 1.8; max-width: 450px; }
.signup-rules { display: inline-block; margin-top: 28px; color: #e0c4ff; border-bottom: 1px solid #c99aff55; padding-bottom: 8px; }
.signup-page .register-card { flex: 1; max-width: 620px; padding: 38px; background: linear-gradient(145deg, #241a32e8, #100d19f2); border: 1px solid #c99aff44; box-shadow: 0 30px 80px #0008, 0 0 70px #a855f714; animation: signup-enter .8s .12s ease both; }
.signup-steps { display: flex; gap: 24px; margin-bottom: 32px; color: #9990a5; font-size: 18px; letter-spacing: 1px; }
.signup-steps span { padding-bottom: 12px; border-bottom: 2px solid #ffffff15; flex: 1; }
.signup-steps .current { color: #dfc4ff; border-color: #b774ff; }
.signup-page .register-card h1 { font-size: 36px; letter-spacing: -1px; }
.signup-page .register-card > p { color: #bfb5ca; line-height: 1.6; margin-bottom: 24px; }
.signup-page .register-card label { display: block; color: #e0d8e8; font-size: 18px; line-height: 1.4; margin: 18px 0 9px; }
.signup-page .input-group { margin-bottom: 18px; }
.signup-page .register-card input, .signup-page .register-card textarea { width: 100%; padding: 14px 16px; border: 1px solid #ffffff20; border-radius: 11px; background: #09071180; color: #fff; font: inherit; font-size: 15px; transition: border-color .2s, box-shadow .2s; }
.signup-page .register-card textarea { resize: vertical; min-height: 120px; }
.signup-page .register-card input:focus, .signup-page .register-card textarea:focus { outline: 2px solid #c99aff; outline-offset: 2px; box-shadow: 0 0 24px #a855f725; }
.signup-page .register-card button { margin-top: 16px; border-radius: 11px; font-size: 16px; background: linear-gradient(110deg, #8c46df, #b06cef); }
.signup-page .register-card .signup-login { font-size: 18px; text-align: center; margin: 24px 0 0; }
.signup-login a { color: #e0c4ff; }
.signup-page .password-error { color: #ff9aaa; font-size: 14px; margin: 8px 0 0; }
@keyframes signup-enter { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes signup-light { to { opacity: .35; } }
@media (max-width: 1000px) {
    .signup-page .register-container { flex-direction: column; justify-content: center; padding: 160px 24px 55px; gap: 36px; }
    .signup-story { width: 100%; max-width: 490px; }
    .signup-story h2 { font-size: 44px; }
    .signup-page .register-card { width: 100%; flex: auto; }
}
@media (max-width: 500px) { .signup-page .register-card { padding: 26px 22px; } .signup-story p { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .signup-story, .signup-page .register-card, .signup-page .register-container::before { animation: none; } }