/* Kinomos community illustration and login layout. */
.login-redesign .login-back-link { width: min(1160px, calc(100% - 40px)); margin-top: 20px; }
.login-redesign .login-bg { padding: 20px 20px 100px; }
.login-redesign .login-split-card { max-width: 1160px; grid-template-columns: 1.05fr 1fr; border-radius: 26px; }
.login-redesign .login-community { display: flex; justify-content: space-between; min-width: 0; padding: 30px 32px; background: radial-gradient(ellipse at 90% 0, #265d50 0, transparent 60%), #112d30; color: #fff; isolation: isolate; }
.login-community::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(#c7dec91f 1px, transparent 1px); background-size: 23px 23px; pointer-events: none; }
.login-community-brand { font-size: 14px; font-weight: 700; letter-spacing: .13em; display: flex; align-items: center; gap: 5px; }
.brand-hq { color: #a4cbbb; font-size: 10px; }
.connection-scene { position: relative; width: 100%; max-width: 460px; aspect-ratio: 1; align-self: center; margin: 15px 0 4px; }
.connection-ring { position: absolute; border: 1px solid #adcfbd24; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.ring-outer { width: 82%; height: 82%; }
.ring-middle { width: 62%; height: 62%; border-style: dashed; border-color: #ddc68b44; }
.ring-inner { width: 42%; height: 42%; }
.connection-core { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; width: 44%; }
.connection-core > span:first-child { font-size: 8px; letter-spacing: .12em; color: #b2cdbf; }
.connection-core strong { display: block; color: #f1e4c3; font-size: clamp(12px, 1.5vw, 18px); margin-top: 6px; }
.connection-core-dot { display: inline-block; margin-top: 15px; width: 7px; height: 7px; border-radius: 50%; background: #a0d3b8; box-shadow: 0 0 0 6px #a0d3b819; }
.connection-person { position: absolute; left: var(--person-x); top: var(--person-y); width: 12%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 3px solid #ffffffc4; background: var(--person-bg); overflow: hidden; box-shadow: 0 4px 18px #0002; animation: connection-glow 18s ease-in-out infinite; animation-delay: var(--person-delay); }
.connection-person svg { display: block; width: 100%; height: 100%; }
.connection-orbit { position: absolute; inset: 19%; border-radius: 50%; animation: connection-round 24s linear infinite; pointer-events: none; }
.connection-traveller { position: absolute; top: 50%; left: 0; width: 78px; height: 78px; margin: -39px 0 0 -39px; display: grid; place-items: center; border-radius: 50%; border: 2px solid #e5c88d; background: #fcf6e8; box-shadow: 0 0 0 7px #e5c88d16, 0 8px 24px #0003; animation: connection-round 24s linear infinite reverse; }
.connection-traveller img { width: 72px; height: 72px; object-fit: contain; }
.login-community .login-community-copy h2 { font-size: clamp(26px, 2.8vw, 36px); line-height: 1.2; color: #f4f7ed; letter-spacing: -.04em; margin: 12px 0; }
.login-community-copy h2 em { color: #e2c687; font-style: normal; }
.login-community .onboard-eyebrow { color: #b5d5c5; font-size: 9px; }
.login-community .login-community-copy p { color: #b7cec3; font-size: 13px; line-height: 1.75; max-width: 360px; margin: 0; }
.connection-pause { align-self: flex-start; color: #c2d9cd; border: 1px solid #a7c9b83d; background: transparent; border-radius: 999px; padding: 7px 12px; margin-top: 20px; font-size: 11px; min-height: 36px; cursor: pointer; }
.connection-pause:hover { background: #ffffff0d; }
.connection-pause:focus-visible { outline: 2px solid #e2c687; outline-offset: 4px; }
.login-community.is-paused :is(.connection-orbit, .connection-traveller, .connection-person) { animation-play-state: paused; }
.login-redesign .login-form-side { min-width: 0; margin-left: 0; padding: 48px; }
.login-redesign .login-title { font-size: 32px; }
.login-redesign .form-input { min-height: 52px; border: 1px solid #d7e3dc; background: #fbfdfb; font-size: 16px; }
.login-redesign .password-input-container .form-input { padding-right: 48px; }
.login-redesign .auth-button { min-height: 52px; background: #21574d; }
.login-redesign .login-support-note { margin-top: 12px; font-size: 12px; color: #687d73; }
[data-theme="dark"] .login-redesign :is(.form-label, .login-remember-label, .auth-footer) { color: #d6e5dc; }
[data-theme="dark"] .login-redesign :is(.login-forgot-link, .auth-link, .login-back-link, .password-toggle) { color: #a6d5bd; }
[data-theme="dark"] .login-redesign .login-support-note { color: #a7bdb0; }
[data-theme="dark"] .login-redesign .form-input { background: #13251e; border-color: #3a5245; color: #e5efe8; }
[data-theme="dark"] .login-redesign .form-input::placeholder { color: #9caf9f; }
@keyframes connection-round { to { transform: rotate(360deg); } }
@keyframes connection-glow { 0%, 75%, 100% { box-shadow: 0 4px 18px #0002; } 85% { box-shadow: 0 0 0 6px #ddc68b38, 0 0 24px #ddc68b26; } }
@media (max-width: 800px) {
    .login-redesign .login-split-card { display: flex; flex-direction: column; max-width: 560px; }
    .login-redesign .login-community { display: grid; grid-template-columns: 1fr 140px; padding: 22px; gap: 8px 12px; align-items: center; }
    .login-community-brand { grid-column: 1; font-size: 11px; }
    .connection-scene { grid-column: 2; grid-row: 1 / 4; width: 140px; margin: 0; }
    .login-community-copy { grid-column: 1; }
    .login-community .login-community-copy h2 { font-size: 23px; }
    .login-community .login-community-copy p, .login-community .onboard-eyebrow, .connection-core { display: none; }
    .connection-person { border-width: 1px; }
    .connection-traveller { width: 38px; height: 38px; margin: -19px 0 0 -19px; }
    .connection-traveller img { width: 34px; height: 34px; }
    .connection-pause { grid-column: 1; justify-self: start; margin-top: 4px; }
    .login-redesign .login-form-side { padding: 30px 24px; }
    .login-redesign .login-title { font-size: 28px; }
}
@media (max-width: 380px) {
    .login-redesign .login-community { grid-template-columns: 1fr 105px; padding: 20px 16px; }
    .connection-scene { width: 105px; }
    .login-community .login-community-copy h2 { font-size: 21px; }
    .login-redesign .login-options-row { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
    .connection-orbit, .connection-traveller, .connection-person { animation: none; }
    .connection-pause { display: none; }
}
/* Override the legacy auth stylesheet's mobile inline-priority spacing. */
@media (max-width: 700px) {
    .login-redesign .login-community { padding: 22px !important; }
    .login-redesign .login-form-side { padding: 30px 24px !important; }
    .login-redesign .login-title { font-size: 28px !important; }
}
@media (max-width: 380px) {
    .login-redesign .login-community { padding: 20px 16px !important; }
}

/* Registration shares the login panel and form rhythm. */
.signup-redesign .auth-form { display: block; width: 100%; max-width: none; }
.signup-redesign .form-group { gap: 6px; margin-bottom: 18px; }
.signup-redesign .form-label { margin: 0; font-size: 14px; }
.signup-redesign .form-input { width: 100%; margin: 0; }
.signup-redesign .password-field-container input { padding-right: 74px; }
.signup-redesign .password-field-container .password-toggle { right: 4px; width: 44px; height: 44px; }
.signup-redesign .password-field-container + .validation-indicator { right: 48px; }
.signup-redesign .auth-button { width: 100%; margin-top: 6px; }
.signup-redesign .login-community { justify-content: center; }
.signup-redesign .login-community-brand { align-self: flex-start; }
.signup-redesign #formMessages:empty { display: none; }
.signup-redesign .real-time-error { color: #a32e38; }
.signup-redesign .real-time-success { color: #216741; }
[data-theme="dark"] .signup-redesign .real-time-error { background: #40252b; color: #ffbbc1; }
[data-theme="dark"] .signup-redesign .real-time-success { background: #203c2d; color: #aae1bf; }
[data-theme="dark"] .signup-redesign :is(#verificationModal, #successModal) > div { background: #1a2b24 !important; color: #d6e5dc; }
[data-theme="dark"] .signup-redesign :is(#verificationModal, #successModal) :is(h3, p, strong) { color: #d6e5dc !important; }
[data-theme="dark"] .signup-redesign #verificationModal p + div { background: #34412a !important; }