html{min-height:100%;background:#f4f7f6;--login-glow-x:50vw;--login-glow-y:42vh;} body{min-height:100vh;margin:0;background:radial-gradient(circle at 18% 16%,rgba(243,128,58,.24),transparent 30rem),radial-gradient(circle at 86% 12%,rgba(38,166,154,.22),transparent 28rem),linear-gradient(135deg,#f7faf9 0%,#e8eeec 48%,#f7f3ef 100%);background-size:120% 120%,120% 120%,100% 100%;animation:loginBackgroundDrift 18s ease-in-out infinite alternate;color:#17211f;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;} .loginGlow{position:fixed;left:0;top:0;width:1520px;height:1520px;z-index:1;pointer-events:none;background:radial-gradient(circle at 38% 38%,rgba(243,128,58,.14),transparent 34%),radial-gradient(circle at 62% 58%,rgba(38,166,154,.12),transparent 42%);border-radius:999px;filter:blur(8px);opacity:1;transform:translate3d(calc(50vw - 760px),calc(42vh - 760px),0);transition:transform .08s linear,opacity .18s ease;will-change:transform;} .loginGlow::after{content:"";position:absolute;inset:18%;border-radius:inherit;background:radial-gradient(circle,rgba(255,255,255,.18),transparent 62%);} a{color:#255e57;text-decoration:none;} a:hover{color:#f3803a;text-decoration:underline;} .loginPage{position:relative;z-index:2;min-height:100vh;display:flex;align-items:center;padding:36px 0;} .loginPanel,.mainSite .formContent{position:relative;} .loginBrand,.mainSite .formContainer .logo{display:flex;align-items:center;justify-content:flex-start;gap:16px;margin-bottom:22px;} .loginLogo,.mainSite .formContainer .logo>img{width:72px;max-width:72px;height:72px;max-height:72px;object-fit:contain;display:block;filter:drop-shadow(0 12px 18px rgba(23,33,31,.14));} .loginEyebrow{color:#64706d;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:0;} .loginBrand h1{margin:2px 0 0;color:#17211f;font-size:30px;line-height:1.1;font-weight:800;letter-spacing:0;} form.loginForm,.mainSite .formContainer{border:1px solid rgba(23,33,31,.08);background:rgba(255,255,255,.86);box-shadow:0 24px 70px rgba(23,33,31,.14);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);} form.loginForm{position:relative;overflow:hidden;padding:28px;display:block;border-radius:18px;} form.loginForm>*:not(.loginLoading){transition:opacity .18s ease,transform .18s ease,filter .18s ease;} form.loginForm.is-loading>*:not(.loginLoading){opacity:.18;transform:scale(.985);filter:blur(1px);pointer-events:none;} form .form-floating,form.loginForm .form-control,.mainSite .formContainer .form-control{color:#17211f;} form.loginForm .form-control,.mainSite .formContainer .form-control{border:1px solid #d8e0dd;border-radius:12px;background:#fff;font-size:16px;min-height:54px;box-shadow:none;} form.loginForm .form-control:focus,.mainSite .formContainer .form-control:focus{border-color:#26a69a;box-shadow:0 0 0 4px rgba(38,166,154,.14);} .form-text,.mainSite .formContainer label,.mainSite .formContainer a{color:#64706d;font-weight:600;} .btn-secondary,.btn-primary,.mainSite .formContainer .btn-primary{border:0;border-radius:12px;background:#1f6f66;color:#fff;font-weight:800;min-height:52px;box-shadow:0 14px 26px rgba(31,111,102,.22);} .btn-secondary:hover,.btn-primary:hover,.mainSite .formContainer .btn-primary:hover{background:#f3803a;color:#fff;} .alert{border:0;border-radius:12px;} .alert-danger{background:#fff1ed;color:#9b341c;} .alert-info{background:#eef8f6;color:#255e57;} .mfaHelp{margin-bottom:18px;padding:16px;border:1px solid #dce7e4;border-radius:14px;background:#f8fbfa;color:#42504d;} .mfaHelp strong{display:block;margin-bottom:6px;color:#17211f;font-size:16px;} .mfaHelp span,.mfaHelp li{color:#42504d;font-size:14px;line-height:1.5;} .mfaHelp ol{margin:8px 0 12px;padding-left:20px;} .mfaHelp code{display:block;margin-top:8px;padding:10px 12px;border-radius:10px;background:#17211f;color:#f8fbfa;font-size:13px;white-space:normal;word-break:break-all;} .mfaSetupGrid{display:grid;grid-template-columns:190px minmax(0,1fr);gap:18px;align-items:start;margin-bottom:18px;} .mfaMethodGrid{display:grid;gap:12px;} .mfaQrBox{padding:14px;border:1px solid #dce7e4;border-radius:14px;background:#fff;} .mfaQrBox img{display:block;width:100%;height:auto;} .mfaCodeInput{text-align:center;font-size:24px !important;font-weight:800;letter-spacing:0;} .loginTrustOption{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:-2px 0 18px;color:#42504d;font-size:14px;font-weight:700;line-height:1.35;} .loginTrustOption select{width:auto;min-width:150px;min-height:42px;margin:0;border:1px solid #d8e0dd;border-radius:10px;background-color:#fff;color:#17211f;font-size:14px;font-weight:700;box-shadow:none;} .loginLoading{display:none;align-items:center;justify-content:center;gap:10px;position:absolute;inset:0;z-index:4;margin:0;padding:22px;border-radius:12px;background:rgba(248,251,250,.74);color:#255e57;font-size:14px;font-weight:700;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);} .loginLoading.is-visible{display:flex;} .loginSpinner{width:18px;height:18px;border:3px solid rgba(37,94,87,.18);border-top-color:#1f6f66;border-radius:50%;animation:loginSpin .8s linear infinite !important;transform-origin:center;flex:0 0 auto;} @keyframes loginSpin{to{transform:rotate(360deg);}} body .mainSite{position:relative;z-index:2;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:linear-gradient(135deg,rgba(247,250,249,.76) 0%,rgba(232,238,236,.72) 48%,rgba(247,243,239,.76) 100%);background-size:120% 120%,120% 120%,100% 100%;animation:loginBackgroundDrift 18s ease-in-out infinite alternate;} @keyframes loginBackgroundDrift{0%{background-position:0% 0%,100% 0%,0 0;} 100%{background-position:8% 6%,92% 10%,0 0;}} @media (prefers-reduced-motion:reduce){body,body .mainSite,.loginSpinner,.loginGlow{animation:none;} .loginGlow{display:none;}} .mainSite .formContainer{width:min(100%,440px);height:auto;padding:28px;border-radius:18px;} .mainSite .formContent{width:100%;} .mainSite .formContainer .logo{justify-content:center;margin-bottom:26px;} .mainSite .formContainer .btnHolder{display:flex;flex-direction:column;gap:14px;margin-top:18px;} .mainSite .formContainer .btnHolder button{margin-top:0;} .toaster{top:15px;} @media (max-width:767px){.loginPage{padding:20px 0;} form.loginForm,.mainSite .formContainer{padding:22px;border-radius:16px;} .loginBrand{gap:12px;} .loginLogo,.mainSite .formContainer .logo>img{width:58px;max-width:58px;height:58px;max-height:58px;} .loginBrand h1{font-size:25px;} .mfaSetupGrid{grid-template-columns:1fr;} .mfaQrBox{max-width:240px;margin:0 auto;}}