.birthday-auth-page { position: relative; isolation: isolate; min-height: calc(100vh - 70px); overflow: hidden; padding: clamp(18px, 3vw, 38px); border-radius: 26px; background: radial-gradient(circle at 7% 12%, #ffe4c3 0, transparent 25%), radial-gradient(circle at 93% 82%, #f3d8f1 0, transparent 32%), linear-gradient(145deg, #fff9f5, #f9f2fc 60%, #fff9ef); direction: ltr; }
.birthday-auth-page::before, .birthday-auth-page::after { content: ''; position: absolute; z-index: -1; width: 360px; height: 360px; border: 1px solid #d8a7cd55; border-radius: 38%; transform: rotate(28deg); pointer-events: none; }
.birthday-auth-page::before { top: -300px; right: 5%; }
.birthday-auth-page::after { bottom: -315px; left: -50px; }
.birthday-auth-page > .container { position: relative; z-index: 1; max-width: 1200px; padding: 0; }
.birthday-auth-confetti { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.birthday-auth-confetti span { position: absolute; top: -20px; left: var(--left); width: var(--size); height: calc(var(--size) * 1.8); border-radius: 2px; background: var(--color); opacity: .48; animation: birthday-confetti-fall var(--duration) linear infinite; animation-delay: var(--delay); }
.birthday-auth-confetti span:nth-child(1) { --left: 4%; --size: 5px; --color: #ee7390; --duration: 13s; --delay: -6s; }
.birthday-auth-confetti span:nth-child(2) { --left: 11%; --size: 7px; --color: #d8a14d; --duration: 16s; --delay: -13s; }
.birthday-auth-confetti span:nth-child(3) { --left: 18%; --size: 4px; --color: #9f6ac5; --duration: 18s; --delay: -3s; }
.birthday-auth-confetti span:nth-child(4) { --left: 27%; --size: 6px; --color: #ea8099; --duration: 15s; --delay: -9s; }
.birthday-auth-confetti span:nth-child(5) { --left: 35%; --size: 4px; --color: #efb966; --duration: 19s; --delay: -15s; }
.birthday-auth-confetti span:nth-child(6) { --left: 43%; --size: 6px; --color: #a26ac4; --duration: 17s; --delay: -4s; }
.birthday-auth-confetti span:nth-child(7) { --left: 51%; --size: 5px; --color: #e2749b; --duration: 20s; --delay: -11s; }
.birthday-auth-confetti span:nth-child(8) { --left: 58%; --size: 6px; --color: #d5a153; --duration: 14s; --delay: -2s; }
.birthday-auth-confetti span:nth-child(9) { --left: 65%; --size: 4px; --color: #a577d0; --duration: 19s; --delay: -10s; }
.birthday-auth-confetti span:nth-child(10) { --left: 72%; --size: 7px; --color: #ee8d95; --duration: 17s; --delay: -14s; }
.birthday-auth-confetti span:nth-child(11) { --left: 79%; --size: 5px; --color: #d59e58; --duration: 21s; --delay: -5s; }
.birthday-auth-confetti span:nth-child(12) { --left: 85%; --size: 5px; --color: #ab78c2; --duration: 16s; --delay: -12s; }
.birthday-auth-confetti span:nth-child(13) { --left: 92%; --size: 6px; --color: #eb7d9d; --duration: 18s; --delay: -7s; }
.birthday-auth-confetti span:nth-child(14) { --left: 97%; --size: 4px; --color: #e3b161; --duration: 20s; --delay: -16s; }
@keyframes birthday-confetti-fall { from { transform: translate3d(0, -15px, 0) rotate(0); } to { transform: translate3d(48px, 110vh, 0) rotate(600deg); } }
.birthday-auth-hero { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 410px; height: 100%; overflow: hidden; padding: clamp(25px, 4vw, 48px); border: 1px solid #ffffff55; border-radius: 28px; background: radial-gradient(circle at 85% 18%, #9e4f98 0, transparent 30%), radial-gradient(circle at 10% 90%, #db697e 0, transparent 31%), linear-gradient(145deg, #2a1647, #572052 55%, #2b153e); box-shadow: 0 20px 50px #4f244b35; color: #fff; text-align: left; }
.birthday-auth-hero::before { content: '✦'; position: absolute; top: 12%; left: 13%; color: #ffe1a6; font-size: 50px; text-shadow: 0 0 30px #ffe2aa; animation: birthday-sparkle 3.5s ease-in-out infinite; }
.birthday-auth-hero::after { content: ''; position: absolute; width: 220px; height: 220px; left: -115px; bottom: -105px; border: 1px solid #ffffff38; border-radius: 35%; transform: rotate(28deg); }
@keyframes birthday-sparkle { 50% { opacity: .45; transform: scale(.8) rotate(22deg); } }
.birthday-auth-hero > * { position: relative; z-index: 1; }
.birthday-auth-hero > .birthday-auth-hero-emoji { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.birthday-auth-hero-emoji span, .birthday-auth-page-emoji span { position: absolute; display: block; line-height: 1; filter: drop-shadow(0 8px 14px #210d3040); animation: birthday-emoji-float 5.5s ease-in-out infinite; }
.birthday-auth-hero-emoji span:nth-child(1) { top: 29%; left: 8%; opacity: .52; font-size: 58px; }
.birthday-auth-hero-emoji span:nth-child(2) { bottom: 10%; left: 20%; opacity: .55; font-size: 42px; animation-delay: -2s; }
.birthday-auth-hero-emoji span:nth-child(3) { top: 8%; right: 8%; opacity: .38; font-size: 34px; animation-delay: -3.5s; }
.birthday-auth-page-emoji { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.birthday-auth-page-emoji span:nth-child(1) { top: 12%; right: 8%; opacity: .65; font-size: 58px; }
.birthday-auth-page-emoji span:nth-child(2) { top: 27%; left: 10%; opacity: .62; font-size: 48px; animation-delay: -2s; }
.birthday-auth-page-emoji span:nth-child(3) { bottom: 10%; right: 15%; opacity: .55; font-size: 44px; animation-delay: -3.5s; }
@keyframes birthday-emoji-float { 50% { transform: translateY(-12px) rotate(8deg); } }
.birthday-auth-hero-top { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.birthday-auth-hero-logo, .birthday-auth-banner-logo { display: grid; flex: 0 0 auto; place-items: center; width: 126px; min-height: 45px; padding: 6px 10px; border-radius: 12px; background: #fff; box-shadow: 0 5px 16px #210d3036; }
.birthday-auth-hero-logo img, .birthday-auth-banner-logo img { display: block; width: 100%; max-height: 34px; object-fit: contain; }
.birthday-auth-kicker { padding: 8px 13px; border: 1px solid #ffe1aa66; border-radius: 50px; background: #ffffff16; color: #ffe2a3; font-size: 12px; font-weight: bold; }
.birthday-auth-hero h1 { margin: 0 0 15px; color: #fff; font-size: clamp(30px, 4vw, 50px); font-weight: 800; line-height: 1.45; }
.birthday-auth-hero-end { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.birthday-auth-hero p { margin: 0; color: #f8eaf5; font-size: clamp(15px, 2vw, 20px); line-height: 1.8; }
.birthday-auth-direction { display: grid; flex: 0 0 44px; place-items: center; width: 44px; height: 44px; border: 1px solid #fff4c7; border-radius: 50%; background: #ffdc93; color: #42204c; box-shadow: 0 7px 20px #1b0e2a50; font-size: 27px; line-height: 1; animation: birthday-arrow-side 1.7s ease-in-out infinite; }
.birthday-auth-direction-mobile { display: none; }
@keyframes birthday-arrow-side { 50% { transform: translateX(8px); } }
@keyframes birthday-arrow-down { 50% { transform: translateY(7px); } }
.birthday-auth-form { padding: clamp(17px, 3vw, 30px); border: 1px solid #ffffffd4; border-radius: 24px; background: #ffffffed; box-shadow: 0 15px 36px #69416a14; }
.birthday-auth-form .form-control:focus { border-color: #ba78a9; box-shadow: 0 0 0 3px #ce9abd2f; }
.birthday-auth-form .btn-secondary { border-color: #782d76; background: #782d76; color: #fff; }
.birthday-auth-form .btn-secondary:hover, .birthday-auth-form .btn-secondary:focus { border-color: #9f4994; background: #9f4994; }
.birthday-auth-page .promotion-block { border-color: #ead3e6; border-radius: 20px; background: #ffffffdf; box-shadow: 0 15px 36px #69416a14; }
.birthday-auth-banner { position: relative; display: flex; align-items: center; gap: 18px; margin: 0 0 20px; padding: 21px 25px; overflow: hidden; border-radius: 20px; background: linear-gradient(110deg, #3a184e, #7b326e 68%, #b55d76); box-shadow: 0 13px 32px #50215130; color: #fff; }
.birthday-auth-banner::after { content: '✦'; position: absolute; left: 20px; top: -23px; color: #ffda9b77; font-size: 110px; line-height: 1; }
.birthday-auth-banner-icon { display: grid; flex: 0 0 48px; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: #ffffff24; color: #ffdb99; font-size: 26px; }
.birthday-auth-banner-logo { width: 112px; min-height: 43px; }
.birthday-auth-banner h2 { margin: 0 0 3px; color: #fff; font-size: clamp(19px, 3vw, 25px); line-height: 1.5; }
.birthday-auth-banner p { margin: 0; color: #f7e7f1; font-size: 14px; line-height: 1.7; }
.birthday-auth-complete { max-width: 640px !important; margin: clamp(35px, 10vh, 95px) auto; padding: 36px 24px; border: 1px solid #fff; border-radius: 23px; background: #ffffffed; box-shadow: 0 18px 45px #5e2c6230; text-align: center; }
.birthday-auth-complete h1 { margin: 0 0 13px; color: #56235f; font-size: clamp(25px, 4vw, 36px); }
.birthday-auth-complete p { color: #765d75; }
.birthday-auth-complete .btn { margin-top: 12px; padding: 10px 23px; border-color: #782d76; border-radius: 12px; background: #782d76; color: #fff; }
@media (max-width: 991px) { .birthday-auth-hero { min-height: 0; height: auto; margin-bottom: 15px; padding: 23px; } .birthday-auth-hero h1 { font-size: clamp(24px, 4vw, 35px); } .birthday-auth-direction { animation-name: birthday-arrow-down; } .birthday-auth-direction-desktop { display: none; } .birthday-auth-direction-mobile { display: inline; } }
@media (max-width: 575px) { .birthday-auth-page { min-height: 100vh; padding: 13px; border-radius: 0; } .birthday-auth-hero { padding: 15px 18px; border-radius: 19px; } .birthday-auth-hero::before { display: none; } .birthday-auth-hero-emoji span:nth-child(1) { top: 5%; left: 5%; opacity: .4; font-size: 31px; } .birthday-auth-hero-emoji span:nth-child(2), .birthday-auth-hero-emoji span:nth-child(3), .birthday-auth-page-emoji span:nth-child(2), .birthday-auth-page-emoji span:nth-child(3) { display: none; } .birthday-auth-page-emoji span:nth-child(1) { top: 8px; right: 5px; opacity: .4; font-size: 35px; } .birthday-auth-hero-top { gap: 7px; margin-bottom: 10px; } .birthday-auth-hero-logo { width: 91px; min-height: 34px; padding: 4px 7px; border-radius: 9px; } .birthday-auth-hero-logo img { max-height: 26px; } .birthday-auth-kicker { padding: 5px 8px; font-size: 10px; } .birthday-auth-hero h1 { margin-bottom: 3px; font-size: 22px; } .birthday-auth-hero p { font-size: 13px; } .birthday-auth-direction { flex-basis: 35px; width: 35px; height: 35px; font-size: 23px; } .birthday-auth-form { padding: 17px 15px; border-radius: 18px; } .birthday-auth-form h2 { margin-bottom: 12px !important; } .birthday-auth-banner { gap: 10px; padding: 12px; } .birthday-auth-banner-icon { flex-basis: 38px; width: 38px; height: 38px; font-size: 21px; } .birthday-auth-banner-logo { width: 83px; min-height: 34px; padding: 4px 6px; } .birthday-auth-banner-logo img { max-height: 25px; } .birthday-auth-banner h2 { font-size: 17px; } .birthday-auth-banner p { font-size: 12px; } .birthday-auth-complete { margin: 30px auto; padding: 25px 16px; } }
@media (prefers-reduced-motion: reduce) { .birthday-auth-confetti span, .birthday-auth-hero::before, .birthday-auth-direction, .birthday-auth-hero-emoji span, .birthday-auth-page-emoji span { animation: none; } }