.aurora-login { margin: 0; background: #101021; color: #f6f5ff; font-family: "Trebuchet MS", "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
.aurora-login *, .aurora-login *::before, .aurora-login *::after { box-sizing: border-box; }
.aurora-login button, .aurora-login input { font-family: inherit; }
.aurora-login a { color: inherit; text-decoration: none; }
.aurora-login :focus-visible { outline: 3px solid #b6f4db; outline-offset: 5px; }
.aurora-background { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.aurora-background::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(#ffffff29 .6px, transparent .6px); background-size: 32px 32px; mask-image: linear-gradient(to bottom, #0008, transparent); }
.aurora-background > span { position: absolute; width: 65vw; height: 55vw; border-radius: 50%; filter: blur(85px); opacity: .22; animation: aurora-drift 18s ease-in-out infinite alternate; }
.aurora-background > span:nth-child(1) { background: #7653de; top: -40%; left: -18%; }
.aurora-background > span:nth-child(2) { background: #3ea69e; bottom: -55%; right: -16%; animation-delay: -7s; }
.aurora-background > span:nth-child(3) { width: 35vw; height: 35vw; background: #4b4f98; right: -20%; top: -10%; animation-delay: -12s; }
.aurora-page { width: min(1200px, 90%); min-height: 100vh; min-height: 100svh; margin: auto; display: flex; flex-direction: column; gap: 24px; padding: 28px 0 22px; }
.page-header, .page-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-shrink: 0; }
.aurora-brand { display: inline-flex; align-items: center; gap: 11px; font-size: 27px; font-weight: 700; letter-spacing: -.8px; }
.brand-symbol { display: grid; place-items: center; height: 38px; width: 38px; border-radius: 12px; background: #c5b6ff; color: #242038; font-size: 31px; padding-bottom: 5px; transition: transform .3s; }.aurora-brand:hover .brand-symbol { transform: rotate(-9deg); }
.brand-logo { background: #fff; padding: 7px 12px; border-radius: 10px; display: flex; }.brand-logo img { max-width: 190px; max-height: 38px; object-fit: contain; }
.header-note { display: flex; align-items: center; gap: 9px; color: #bcb8d1; font-size: 11px; letter-spacing: 1.5px; }.header-note > span { width: 6px; height: 6px; background: #a8edcf; border-radius: 50%; box-shadow: 0 0 12px #a8edcf88; }
.aurora-card { display: grid; grid-template-columns: 1.1fr 1fr; width: 100%; max-width: 1120px; margin: auto; border: 1px solid #ffffff25; border-radius: 26px; background: #202031a6; box-shadow: 0 25px 100px #0004, inset 0 1px #ffffff0a; backdrop-filter: blur(24px); animation: aurora-enter .65s both; }
.intro-panel { position: relative; overflow: hidden; padding: 38px 44px 26px; display: flex; flex-direction: column; border-radius: 26px 0 0 26px; background: linear-gradient(145deg, #66549532, #22213500 80%); }
.section-label { font-size: 10px; font-weight: 600; letter-spacing: 1.6px; color: #c7bfdc; line-height: 1.7; }.section-label > span { color: #cdbfff; font-size: 20px; vertical-align: middle; margin-right: 7px; }
.intro-panel h1 { margin: 18px 0 16px; font-size: clamp(40px, 4.6vw, 62px); font-weight: 500; line-height: 1.06; letter-spacing: -2.6px; }.intro-panel h1 > span { color: #c5b6ff; }
.intro-panel > p { margin: 0; color: #b3aec5; font-size: 15px; line-height: 1.65; }
.connection-art { position: relative; flex-shrink: 0; height: 222px; width: min(100%, 360px); margin: 18px auto 5px; }
.connection-ring { position: absolute; border: 1px solid #c1adff26; border-radius: 50%; left: 50%; top: 45%; transform: translate(-50%, -50%); }.ring-outer { width: 230px; height: 195px; rotate: -24deg; }.ring-inner { width: 155px; height: 145px; border-style: dashed; animation: ring-turn 35s linear infinite; }
.connection-core { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%) rotate(-10deg); display: grid; place-content: center; width: 88px; height: 88px; border-radius: 27px; background: linear-gradient(135deg, #d2c6ff, #9581cc); box-shadow: 0 0 65px #b09af83d, inset 0 1px 3px #fff9; color: #302646; font-size: 66px; font-weight: 700; line-height: 1; padding-bottom: 13px; transition: transform .5s; }.connection-core > span { position: absolute; color: #f7f2ff; bottom: 9px; right: 11px; font-size: 45px; }.connection-art:hover .connection-core { transform: translate(-50%, -50%) rotate(0) scale(1.08); }
.satellite { position: absolute; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid #ffffff21; border-radius: 12px; background: #333143; color: #e9e2fb; box-shadow: 0 8px 25px #0003; font-size: 12px; animation: satellite-float 6s ease-in-out infinite; }.satellite > span { display: grid; place-items: center; font-size: 19px; color: #c7b5ff; }.satellite-people { left: 6px; top: 23px; }.satellite-time { right: -5px; top: 78px; animation-delay: -2s; }.satellite-pay { bottom: 30px; left: 22px; animation-delay: -4s; }.satellite-pay > span { color: #b6f4db; }
.orbit-point { position: absolute; border-radius: 50%; background: #c2b0fa; width: 6px; height: 6px; box-shadow: 0 0 12px #c2b0fa66; }.point-one { right: 92px; top: 12px; }.point-two { bottom: 33px; right: 92px; background: #a8edcf; }
.art-caption { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; font-size: 8px; letter-spacing: 2px; color: #a7a0bd; }
.intro-footer { margin-top: auto; padding-top: 17px; font-size: 13px; color: #c1b9d5; }.tiny-star { color: #c5b6ff; margin-right: 8px; }
.form-panel { min-width: 0; padding: 38px 44px 28px; border-left: 1px solid #ffffff14; }
.form-heading { display: flex; align-items: center; gap: 10px; }.form-heading .section-label { font-size: 9px; letter-spacing: 1.1px; }.welcome-symbol { display: grid; place-items: center; width: 29px; height: 29px; flex-shrink: 0; border: 1px solid #c5b6ff40; border-radius: 9px; color: #c5b6ff; font-size: 22px; }
.form-panel h2 { margin: 21px 0 12px; font-size: clamp(30px, 3.3vw, 43px); line-height: 1.08; font-weight: 500; letter-spacing: -1.5px; }.form-panel h2 > span { color: #b6f4db; }.form-description { color: #b6b1c6; font-size: 13px; line-height: 1.6; margin: 0 0 26px; }
.form-field { margin-bottom: 19px; }.form-field label { display: block; margin-bottom: 8px; font-size: 13px; color: #e3dfee; }
.input-wrap { display: flex; align-items: center; min-height: 49px; border: 1px solid #ffffff27; border-radius: 10px; background: #11111e66; transition: border-color .25s, box-shadow .25s, background .25s; }.input-wrap:hover { border-color: #bca8f47a; }.input-wrap:focus-within { border-color: #bba7f1; background: #171624; box-shadow: 0 0 0 3px #bba7f117; }.input-wrap:has([aria-invalid="true"]) { border-color: #efa4b4; }
.input-wrap > svg { height: 18px; width: 18px; margin-left: 14px; flex-shrink: 0; color: #aaa0c0; }.input-wrap input { width: 100%; min-width: 0; border: 0; border-radius: 10px; background: transparent; color: #f3efff; padding: 14px 12px; font-size: 14px; outline: none; color-scheme: dark; }.input-wrap input:focus-visible { outline: none; }.input-wrap input::placeholder { color: #938aa7; }
.password-toggle { display: grid; place-items: center; align-self: stretch; flex: 0 0 42px; border: 0; border-radius: 9px; background: transparent; color: #bcb0d2; cursor: pointer; transition: background .2s; }.password-toggle:hover { background: #c5b6ff15; }.password-toggle[hidden] { display: none; }.password-toggle svg { width: 19px; height: 19px; }.eye-slash { display: none; }.password-toggle[aria-pressed="true"] .eye-slash { display: block; }
.form-options { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin: 2px 0 22px; }.remember-me { display: flex; align-items: center; gap: 7px; color: #c4bdd3; font-size: 12px; cursor: pointer; }.remember-me input { width: 15px; height: 15px; margin: 0; accent-color: #c5b6ff; color-scheme: dark; }.secure-note { color: #b4cdbf; font-size: 11px; }.secure-note > span { color: #a8edcf; margin-right: 3px; }
.signin-button { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 50px; width: 100%; padding: 13px 18px; border: 1px solid #d1c3ff; border-radius: 10px; background: #c5b6ff; color: #282039; font-size: 15px; font-weight: 700; cursor: pointer; transition: transform .25s, box-shadow .25s, background .25s; }.signin-button:hover { transform: translateY(-3px); background: #dacfff; box-shadow: 0 8px 30px #b79bf933; }.signin-button:active { transform: translateY(0); }.button-arrow { font-size: 23px; line-height: 1; transition: transform .25s; }.signin-button:hover .button-arrow { transform: translate(2px, -2px); }
.signin-help { text-align: center; color: #aba2bb; font-size: 12px; line-height: 1.7; margin: 22px 0 0; }.signin-help > span { color: #d6c9ee; }
.page-footer { color: #b0a7c0; font-size: 12px; }.page-footer > span:last-child { display: flex; align-items: center; gap: 10px; }.page-footer > span:last-child > span { color: #c5b6ff; font-size: 19px; }
.form-alert { margin-bottom: 15px; padding: 10px 13px; border: 1px solid; border-radius: 9px; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }.form-alert ul { margin: 0; padding-left: 17px; }.form-alert.error { border-color: #ef9db548; background: #66344855; color: #ffd3dd; }.form-alert.success { border-color: #a8edcf48; background: #2b655455; color: #bff5df; }
@keyframes aurora-drift { from { transform: translate(0, 0) rotate(-15deg); } to { transform: translate(10%, 12%) rotate(15deg); } }
@keyframes aurora-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes satellite-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes ring-turn { to { rotate: 360deg; } }
@media (min-width: 801px) { .aurora-page { height: 100vh; height: 100svh; min-height: 0; gap: clamp(12px, 2.5svh, 24px); padding-top: clamp(14px, 3svh, 28px); padding-bottom: clamp(12px, 2.5svh, 22px); }.aurora-card { min-height: 0; max-height: 100%; flex-shrink: 1; }.form-panel { overflow-y: auto; border-radius: 0 26px 26px 0; }.intro-panel h1 { font-size: clamp(36px, min(4.6vw, 7.5svh), 62px); } }
@media (min-width: 801px) and (max-height: 780px) { .intro-panel, .form-panel { padding-top: 26px; padding-bottom: 22px; }.connection-art { height: 195px; margin-top: 12px; }.intro-panel h1 { margin-top: 12px; }.form-panel h2 { margin-top: 14px; font-size: 35px; }.form-description { margin-bottom: 18px; }.form-field { margin-bottom: 15px; }.signin-help { margin-top: 16px; }.form-options { margin-bottom: 18px; } }
@media (min-width: 801px) and (max-height: 650px) { .aurora-page { gap: 12px; padding-top: 14px; padding-bottom: 12px; }.intro-panel, .form-panel { padding-top: 18px; padding-bottom: 18px; }.form-panel h2 { font-size: 30px; margin: 12px 0 8px; }.form-panel h2 br { display: none; }.form-description { margin-bottom: 14px; font-size: 12px; }.form-field { margin-bottom: 12px; }.input-wrap { min-height: 44px; }.input-wrap input { padding-top: 11px; padding-bottom: 11px; }.form-options { margin-bottom: 14px; }.signin-button { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }.signin-help { margin-top: 12px; }.signin-help br { display: none; }.connection-art { height: 155px; scale: .8; transform-origin: top center; margin: 6px auto -12px; }.intro-panel > p { font-size: 13px; }.intro-footer { padding-top: 10px; }.form-alert { padding: 7px 10px; margin-bottom: 10px; } }
@media (max-width: 1100px) { .intro-panel, .form-panel { padding-left: 28px; padding-right: 28px; }.header-note { font-size: 10px; }.section-label { font-size: 9px; letter-spacing: 1px; } }
@media (min-width: 801px) and (max-height: 540px) { .intro-panel h1 { font-size: 33px; }.intro-panel > p { display: none; }.connection-art { height: 130px; scale: .65; margin-bottom: -16px; }.intro-footer { font-size: 12px; }.form-heading { display: none; }.form-panel { padding-top: 14px; padding-bottom: 14px; }.form-panel h2 { margin-top: 0; font-size: 26px; }.form-panel h2 br { display: block; }.form-field { margin-bottom: 10px; }.form-field label { margin-bottom: 5px; }.signin-help { margin-top: 4px; font-size: 11px; } }
@media (max-width: 800px) { .aurora-page { width: min(520px, 90%); gap: 24px; padding-top: 24px; }.header-note { font-size: 8px; letter-spacing: .8px; }.aurora-brand { font-size: 24px; }.aurora-card { grid-template-columns: 1fr; }.intro-panel { padding: 28px 28px 24px; border-radius: 26px 26px 0 0; }.intro-panel h1 { font-size: clamp(35px, 7vw, 46px); letter-spacing: -1.5px; margin-bottom: 0; }.intro-panel h1 br:first-child { display: none; }.intro-panel h1 br:first-child::after { content: " "; }.intro-panel h1 > span { display: block; }.intro-panel > p, .connection-art, .intro-footer { display: none; }.form-panel { border-left: 0; border-top: 1px solid #ffffff14; padding: 26px 28px 28px; }.form-heading { display: none; }.form-panel h2 { margin-top: 0; font-size: 34px; }.form-panel h2 br { display: none; }.form-description { margin-bottom: 24px; }.page-footer { flex-direction: column; gap: 8px; text-align: center; font-size: 11px; }.aurora-background > span { width: 130vw; height: 120vw; }.aurora-background > span:nth-child(2) { bottom: -20%; } }
@media (max-width: 380px) { .header-note { max-width: 104px; font-size: 7px; line-height: 1.6; }.intro-panel, .form-panel { padding-left: 21px; padding-right: 21px; }.form-panel h2 { font-size: 30px; }.form-description { font-size: 12px; }.secure-note { font-size: 10px; }.remember-me { font-size: 11px; } }
@media (prefers-reduced-motion: reduce) { .aurora-login *, .aurora-login *::before, .aurora-login *::after { animation: none !important; transition: none !important; } }