.auth-page { position: relative; min-height: 100vh; display: grid; place-items: center; padding: 86px 20px 62px; overflow: hidden; background: #070708; }
.auth-page::before { content: ''; position: absolute; width: 620px; height: 380px; left: 50%; top: -210px; border-radius: 50%; background: #8a1422; filter: blur(125px); opacity: .36; transform: translateX(-50%); animation: auth-glow 7s ease-in-out infinite alternate; }
.auth-page::after { content: '✦   ·       ✧          ·       ✦'; position: absolute; inset: 20% 0 auto; color: #ff5964; font-size: 15px; letter-spacing: 5vw; opacity: .16; pointer-events: none; animation: auth-sparkle 5s ease-in-out infinite; }
.auth-logo { position: absolute; top: 27px; left: clamp(20px, 6vw, 88px); z-index: 1; }
.auth-card { position: relative; z-index: 1; width: min(440px, 100%); padding: 43px 40px 35px; background: linear-gradient(145deg, rgba(28, 19, 22, .97), rgba(13, 13, 16, .98)); border: 1px solid #493037; border-radius: 22px; box-shadow: 0 25px 100px rgba(0,0,0,.55), 0 0 0 1px rgba(241,39,53,.05) inset; }
.auth-card::before { content: ''; position: absolute; top: 0; left: 13%; right: 13%; height: 1px; background: linear-gradient(90deg, transparent, #ff4e5a, transparent); opacity: .8; }
.auth-kicker { color: var(--red); font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.auth-card h1 { margin: 12px 0 9px; font: 600 40px/1.02 'Space Grotesk', sans-serif; letter-spacing: -.035em; }
.auth-card h1 em { color: var(--red); font-style: normal; }
.auth-subtitle { margin: 0 0 29px; color: #a5a0a5; font-size: 13px; }
.auth-form { display: grid; gap: 17px; }.auth-form label { display: grid; gap: 8px; color: #d3cdd1; font-size: 11px; font-weight: 700; }.auth-form input { width: 100%; min-height: 49px; padding: 0 14px; color: #fff; background: #0a0a0c; border: 1px solid #393037; border-radius: 10px; outline: none; font-size: 13px; transition: border-color .2s, box-shadow .2s, background .2s; }.auth-form input:hover { background: #0e0d10; border-color: #5b4248; }.auth-form input:focus { border-color: var(--red); box-shadow: 0 0 0 4px rgba(241,39,53,.12), 0 0 24px rgba(241,39,53,.08); }
.two-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }.form-submit { width: 100%; min-height: 51px; margin-top: 7px; border: 0; cursor: pointer; }.auth-switch { margin: 26px 0 0; color: #8e8990; font-size: 12px; text-align: center; }.auth-switch a { color: #ff6871; font-weight: 800; }.form-error { margin: 0 0 18px; padding: 11px 13px; color: #ffadb2; background: #321217; border: 1px solid #75313a; border-radius: 10px; font-size: 11px; line-height: 1.6; }.auth-foot { position: absolute; bottom: 24px; z-index: 1; margin: 0; color: #716c73; font-size: 10px; }.register-page .auth-card { width: min(540px, 100%); }
@keyframes auth-glow { from { opacity: .25; transform: translateX(-50%) scale(.92); } to { opacity: .48; transform: translateX(-50%) scale(1.08); } } @keyframes auth-sparkle { 0%, 100% { opacity: .1; transform: translateY(0); } 50% { opacity: .3; transform: translateY(12px); } }
@media (max-width: 520px) { .auth-card { padding: 31px 23px 27px; }.auth-card h1 { font-size: 33px; }.two-fields { grid-template-columns: 1fr; gap: 16px; }.auth-foot { position: static; margin-top: 22px; text-align: center; } }