:root { color-scheme: light; --login-blue: #4c5eef; }
* { box-sizing: border-box; }
.login-body { margin: 0; min-height: 100vh; min-height: 100svh; padding: 40px 20px; display: grid; place-items: center; font-family: Arial,"Segoe UI",sans-serif; color: #242936; background: #f0f2f7; }
.login-shell { display: grid; grid-template-columns: minmax(0,1.12fr) minmax(0,1fr); align-items: stretch; width: min(100%,1080px); padding: 18px; border: 1px solid #e4e8f0; border-radius: 24px; background: #fff; box-shadow: 0 20px 65px -30px #28385b28; }
.login-card { align-self: center; min-width: 0; width: 100%; padding: 44px 48px; background: #fff; }
.login-preview { position: relative; display: flex; align-items: center; margin: 0; min-width: 0; min-height: 580px; padding: 25px 0 20px 17px; isolation: isolate; }
.puzzle-backdrop { position: absolute; z-index: -1; inset: -5px -4px; width: 100%; height: 100%; }
.puzzle-perspective { width: 100%; perspective: 1100px; }
.puzzle-model { width: 100%; transform: rotateX(calc(12deg + var(--puzzle-x,0deg))) rotateY(calc(-16deg + var(--puzzle-y,0deg))) rotateZ(-4deg); transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2,.65,.3,1); }
.puzzle-assembled { filter: drop-shadow(9px 24px 16px #06132b4a); }
.login-brand { display: inline-flex; align-items: center; gap: 9px; color: inherit; text-decoration: none; }
.login-brand img { display: block; width: 46px; height: 46px; object-fit: contain; }
.login-brand>span { display: flex; flex-direction: column; gap: 3px; }
.login-brand-caption { font-size: 11px; font-weight: 400; color: #8a93a5; letter-spacing: .45px; line-height: 1; }
.login-brand-name { font-size: 23px; font-weight: 700; color: var(--login-blue); letter-spacing: -.7px; line-height: 1.1; }
.login-card h1 { margin: 34px 0 28px; font-size: 25px; font-weight: 600; letter-spacing: -.65px; line-height: 1.2; }
.login-field { margin-bottom: 20px; }
.login-field label { display: block; margin-bottom: 9px; color: #657084; font-size: 12px; font-weight: 400; line-height: 1.5; }
.login-field input { display: block; width: 100%; min-height: 46px; border: 1px solid #dfe4ef; border-radius: 8px; padding: 11px 13px; outline: none; color: #283246; background: #fff; font: 14px/1.5 Arial,"Segoe UI",sans-serif; transition: border-color .15s,box-shadow .15s; }
.login-field input:hover { border-color: #cbd3e3; }
.login-field input:focus { border-color: #8795f6; box-shadow: 0 0 0 3px #4c5eef0c; }
.login-password { position: relative; }
.login-password input { padding-right: 46px; }
.password-toggle { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #9aa4b6; cursor: pointer; }
.password-toggle:hover { background: #f4f6fc; color: #5867d6; }
.password-toggle span { display: flex; }
.password-toggle [hidden] { display: none; }
.login-field small { display: block; color: #97a0b1; font-size: 11px; margin-top: 7px; }
.login-submit { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 46px; margin-top: 28px; padding: 12px 16px; border: 1px solid var(--login-blue); border-radius: 8px; background: var(--login-blue); color: #fff; font: 600 13px/1.5 Arial,"Segoe UI",sans-serif; cursor: pointer; transition: background .15s,box-shadow .15s; }
.login-submit:hover { background: #4052dd; box-shadow: 0 5px 14px #4c5eef24; }
.login-submit:active { background: #3749cc; }
.login-brand:focus-visible,.password-toggle:focus-visible,.login-submit:focus-visible { outline: 2px solid var(--login-blue); outline-offset: 4px; }
.login-error { margin: -8px 0 24px; padding: 11px 13px; border: 1px solid #f0dce2; border-radius: 8px; background: #fff5f7; color: #b65c6f; font-size: 12px; line-height: 1.7; }
@media (max-width: 900px) and (min-width: 761px) {
    .login-card { padding: 34px 28px; }
    .login-preview { min-height: 540px; padding: 20px 0 20px 9px; }
}
@media (max-width: 760px) {
    .login-body { padding: 24px 18px; }
    .login-shell { display: block; width: min(100%,420px); padding: 0; border-radius: 17px; }
    .login-preview { display: none; }
    .login-card { padding: 30px 26px 32px; border-radius: 17px; }
    .login-card h1 { margin-top: 30px; }
}
@media (prefers-reduced-motion: reduce) { .login-field input,.login-submit { transition: none; } }

.puzzle-stage { display: block; width: 100%; height: auto; overflow: visible; }
.puzzle-detached { animation: puzzle-float 5.5s ease-in-out 900ms infinite; }
.login-ready .puzzle-stage { animation: puzzle-reveal 650ms cubic-bezier(.2,.65,.3,1) both; }
.login-ready .login-card { animation: form-reveal 420ms ease-out both; }
.login-intro .login-shell { opacity: 0; }
.login-loader { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: #f0f2f7; }
.login-loader[hidden] { display: none; }
.login-intro #login-loader { display: grid!important; }
.logo-loader-mark { position: relative; width: 116px; height: 116px; display: grid; place-items: center; }
.logo-loader-orbit { position: absolute; inset: 0; border: 1px solid #dfe4f0; border-top: 2px solid #6576ef; border-radius: 50%; animation: logo-orbit 1.1s linear infinite; }
.logo-loader-mark img { width: 78px; height: 78px; object-fit: contain; animation: logo-breathe 1.1s ease-in-out infinite; }
.submit-mark { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: #fff; }
.submit-mark img { object-fit: contain; animation: logo-breathe .7s ease-in-out infinite; }
.login-submit [hidden] { display: none; }
.login-submit.is-submitting { cursor: wait; background: #4052dd; }
.login-submit:disabled { opacity: 1; }
@keyframes logo-orbit { to { transform: rotate(360deg); } }
@keyframes logo-breathe { 0%,100% { transform: scale(.9); opacity: .72; } 50% { transform: scale(1.04); opacity: 1; } }
@keyframes puzzle-float { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-9px) rotate(-1deg); } }
@keyframes puzzle-reveal { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes form-reveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
    .puzzle-detached,.login-ready .puzzle-stage,.login-ready .login-card,.logo-loader-orbit,.logo-loader-mark img,.submit-mark img { animation: none; }
    .puzzle-model { transition: none; }
}