*{box-sizing:border-box}body.auth-page{min-height:100vh;display:flex;flex-direction:column;background:radial-gradient(circle at 75% 20%,#dcefff,transparent 45%),linear-gradient(115deg,#f9fcff,#edf7ff);color:#14253e;font-family:Inter,Arial,sans-serif}.auth-top{height:85px;display:flex;align-items:center;justify-content:space-between;max-width:1200px;width:calc(100% - 50px);margin:auto}.auth-home{display:grid;text-decoration:none;color:#0f2749}.auth-home b{font-size:29px;letter-spacing:-1px}.auth-home span{color:#168bfa}.auth-home small{font-size:11px;color:#6e7d93}.auth-back{color:#0e82f7;text-decoration:none;font-weight:700}.auth-main{width:min(900px,calc(100% - 36px));margin:70px auto 100px;display:grid;grid-template-columns:230px minmax(0,1fr);gap:35px;align-items:start;flex:1}.auth-side,.auth-panel{background:#fff;border:1px solid #e4edf8;border-radius:18px;box-shadow:0 18px 45px #1d5b9a14}.auth-side{padding:24px;display:grid;gap:12px}.auth-side h3{font-weight:500;color:#8291a6;margin:0 0 4px}.auth-side a,.auth-side span{display:block;text-decoration:none;color:#233955;padding:8px 0;font-size:14px}.auth-side p{color:#8291a6;margin:0}.auth-side hr{border:0;border-top:1px solid #e8eef5;width:100%}.auth-panel{max-width:480px;width:100%;justify-self:center;padding:38px 40px}.auth-avatar{display:grid;place-items:center;width:65px;height:65px;border-radius:100%;background:#e4f2ff;color:#0b7aef;font-size:36px;margin:0 auto 12px}.auth-panel h1{text-align:center;font-size:27px;margin:5px 0 8px}.auth-intro{text-align:center;color:#778ba3;font-size:13px;margin:0 0 24px}.auth-panel form{display:grid;gap:18px}.auth-panel label{font-size:14px;font-weight:700;color:#25354d;display:grid;gap:8px}.auth-panel input:not([type=checkbox]){height:48px;padding:0 14px;border:1px solid #d7e4f2;border-radius:8px;width:100%;outline:none;font:inherit;font-weight:400;background:#fff}.auth-panel input:focus{border-color:#0d84f6;box-shadow:0 0 0 3px #168bfa20}.password-input{display:flex;position:relative}.password-input input{padding-right:55px!important}.show-pass{position:absolute;right:8px;top:6px;border:0;background:transparent;color:#55728e;font-size:22px;padding:6px 12px;cursor:pointer}.auth-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px}.auth-row a{color:#087ded;text-decoration:none}.auth-panel label.keep-label{display:flex;align-items:center;font-size:12px;font-weight:400;color:#526278;gap:8px}.auth-submit{background:#096cf0;color:white;border:0;border-radius:8px;font-weight:750;font-size:17px;padding:15px;cursor:pointer}.auth-submit:hover{background:#005fd4}.auth-footer{text-align:center;padding:24px;color:#8694a7;font-size:12px}.auth-flash{padding:12px;border-radius:8px;background:#e4f8ee;color:#125b30;font-size:13px;margin-bottom:16px}.auth-flash.error{background:#fff0ed;color:#9b2525}@media(max-width:750px){.auth-main{grid-template-columns:1fr;gap:20px;margin:25px auto 50px}.auth-side{display:none}.auth-panel{padding:28px 22px}.auth-top{height:73px}}
/* v2.9: centered single authentication card */
.auth-main{display:flex!important;justify-content:center;align-items:flex-start;width:min(560px,calc(100% - 32px));margin:52px auto 80px}.auth-side{display:none!important}.auth-panel{max-width:485px;width:100%;border-radius:20px}.auth-submit{background:linear-gradient(105deg,#167ffa,#0758ed);box-shadow:0 9px 20px #0c74eb25}.show-pass{display:grid;place-items:center;width:42px;height:36px;padding:0;top:6px;right:6px;border-radius:8px}.show-pass:hover{background:#ebf5ff;color:#0768e7}.show-pass.revealed{color:#0866da;background:#eaf4ff}.eye-svg{display:block}@media(max-width:750px){.auth-main{margin:28px auto 50px}}

/* v3.0: reference-photo clean one-form auth pages */
body.auth-page{background:linear-gradient(115deg,#fcfdff 0%,#f4f8fd 60%,#eaf4ff 100%)}
.auth-main{display:flex!important;justify-content:center!important;align-items:flex-start!important;width:min(570px,calc(100% - 28px))!important;margin:52px auto 80px!important}
.auth-side{display:none!important}.auth-panel{width:100%!important;max-width:510px!important;padding:40px 42px!important;border-radius:15px!important;background:#fff!important}
.auth-panel h1{font-size:28px;font-weight:650;text-align:center;color:#202f44}
.auth-submit{background:#202f46!important;box-shadow:none!important;color:#fff!important;border-radius:7px!important}.auth-submit:hover{background:#12233a!important}
.auth-panel label{font-weight:650;color:#27364a}.auth-panel input:not([type=checkbox]){border:1px solid #dce5ee;border-radius:6px;min-height:46px}.show-pass{top:5px!important;right:5px!important}
@media(max-width:600px){.auth-main{margin:28px auto 55px!important}.auth-panel{padding:30px 24px!important}}

/* JKeyPro v5.5 approved warm orange authentication pages */
body.auth-page{font-family:Inter,system-ui,Arial,sans-serif!important;color:#101b35!important;background:radial-gradient(ellipse at 8% 75%,#ffdfc0 0,transparent 37%),radial-gradient(ellipse at 94% 12%,#ffe5ce 0,transparent 40%),linear-gradient(145deg,#fffdfa,#fff5eb)!important}
.auth-top{height:94px!important;max-width:none!important;width:calc(100% - 9%)!important;margin:0 auto!important;flex-shrink:0}
.auth-home b{font-size:30px!important;color:#121b35!important}.auth-home b span,.auth-brand b{color:#ff5b10!important}.auth-home small{color:#6c7382!important;font-size:12px!important}.auth-back{padding:13px 24px;border:1px solid #ffb87f;border-radius:14px;background:#fff!important;color:#ff6411!important;box-shadow:0 7px 20px #ff86341b;font-size:15px}
.auth-main{width:min(760px,calc(100% - 32px))!important;margin:30px auto 65px!important}
.auth-panel{max-width:690px!important;padding:35px 52px 36px!important;border:1px solid #ffdabb!important;border-radius:26px!important;box-shadow:0 25px 65px #a64b1020!important;background:rgba(255,255,255,.98)!important}
.auth-brand{text-align:center;margin:2px auto 26px}.auth-brand span{font-size:37px;font-weight:850;letter-spacing:-1.2px}.auth-brand small{display:none}
.auth-panel h1{font-size:33px!important;font-weight:800!important;color:#131a35!important;margin:5px 0 9px!important}
.auth-intro{color:#657087!important;font-size:16px!important;margin-bottom:30px!important}
.auth-panel form{gap:19px!important}.auth-panel label{color:#1d2942!important;font-size:14px!important;text-transform:none;font-weight:750!important}.auth-panel input:not([type=checkbox]){height:57px!important;min-height:57px!important;border:1px solid #d8dfe8!important;border-radius:11px!important;padding:0 17px!important;background:#fff!important;font-size:15px!important}.auth-panel input:focus{border-color:#ff721a!important;box-shadow:0 0 0 3px #ff721a20!important}
.show-pass{top:9px!important;right:9px!important;background:transparent!important;color:#606e84!important}.auth-submit{background:linear-gradient(100deg,#ff9d22,#ff490f)!important;border:0!important;border-radius:12px!important;min-height:60px!important;color:white!important;font-size:19px!important;box-shadow:0 12px 27px #ff650f32!important}.auth-submit:hover{filter:brightness(.96)}
.auth-row a,.auth-switch a{color:#ff5b0e!important;font-weight:750!important;text-decoration:none}.auth-row label.keep-label{display:flex!important;align-items:center!important;gap:9px!important;color:#657087!important;font-size:14px!important}.auth-row input[type=checkbox]{accent-color:#ff660c}.auth-switch{text-align:center;padding-top:25px;margin:0;color:#667187;font-size:14px}.auth-progress{display:flex;justify-content:space-around;position:relative;margin:5px auto 46px;max-width:500px}.auth-progress:before{content:"";position:absolute;top:19px;left:18%;right:18%;height:2px;background:#ece6e4}.auth-progress span{position:relative;display:grid;place-items:center;background:#e9e9ef;border-radius:50%;height:40px;width:40px;color:#6c7383;font-weight:750}.auth-progress span.current{background:#ff650d;color:white}.auth-progress span small{position:absolute;top:46px;white-space:nowrap;font-size:12px;font-weight:500;color:#6b7280}.auth-panel .auth-avatar{display:none!important}.auth-footer{color:#93949c!important}
@media(max-width:650px){.auth-top{height:82px!important;width:calc(100% - 30px)!important}.auth-home b{font-size:24px!important}.auth-home small{font-size:10px!important}.auth-back{padding:10px 14px!important}.auth-main{margin:15px auto 35px!important}.auth-panel{padding:28px 22px!important;border-radius:18px!important}.auth-brand span{font-size:28px!important}.auth-panel h1{font-size:26px!important}.auth-panel input:not([type=checkbox]){height:51px!important;min-height:51px!important}}

/* v5.6 compact registration: single heading, narrower layout and laptop fit */
body.auth-page:has(input[name="confirm_password"]) .auth-top{height:58px!important}
body.auth-page:has(input[name="confirm_password"]) .auth-main{width:min(580px,calc(100% - 24px))!important;margin:6px auto 20px!important;flex:0 0 auto!important}
body.auth-page:has(input[name="confirm_password"]) .auth-panel{max-width:525px!important;padding:17px 32px 18px!important;border-radius:20px!important}
body.auth-page:has(input[name="confirm_password"]) .auth-brand{margin:0 auto 5px!important}
body.auth-page:has(input[name="confirm_password"]) .auth-brand span{font-size:26px!important}
body.auth-page:has(input[name="confirm_password"]) .auth-panel h1{font-size:25px!important;margin:0 0 4px!important}
body.auth-page:has(input[name="confirm_password"]) .auth-intro{font-size:12px!important;margin-bottom:12px!important}
body.auth-page:has(input[name="confirm_password"]) .auth-panel form{gap:9px!important}
body.auth-page:has(input[name="confirm_password"]) .auth-panel label{font-size:12px!important;gap:4px!important}
body.auth-page:has(input[name="confirm_password"]) .auth-panel input:not([type=checkbox]){height:40px!important;min-height:40px!important;font-size:13px!important}
body.auth-page:has(input[name="confirm_password"]) .show-pass{top:2px!important;right:4px!important}
body.auth-page:has(input[name="confirm_password"]) .auth-submit{min-height:43px!important;font-size:15px!important;margin-top:2px!important}
body.auth-page:has(input[name="confirm_password"]) .auth-switch{padding-top:11px!important;font-size:12px!important}
body.auth-page:has(input[name="confirm_password"]) .auth-footer{padding:10px!important}
@media(max-width:600px){body.auth-page:has(input[name="confirm_password"]) .auth-top{height:66px!important}body.auth-page:has(input[name="confirm_password"]) .auth-panel{padding:17px 19px 20px!important}}

/* v5.7 Sign In: slimmer, slightly taller and icon-led fields */
body.auth-page:not(:has(input[name="confirm_password"])):has(input[autocomplete="current-password"]) .auth-main{width:min(590px,calc(100% - 28px))!important;margin:32px auto 55px!important}
body.auth-page:not(:has(input[name="confirm_password"])):has(input[autocomplete="current-password"]) .auth-panel{width:100%!important;max-width:540px!important;padding:38px 43px 45px!important;border-radius:24px!important}
body.auth-page:not(:has(input[name="confirm_password"])):has(input[autocomplete="current-password"]) .auth-brand{margin:0 auto 30px!important}
body.auth-page:not(:has(input[name="confirm_password"])):has(input[autocomplete="current-password"]) .auth-intro{margin-bottom:31px!important}
body.auth-page:not(:has(input[name="confirm_password"])):has(input[autocomplete="current-password"]) .auth-panel form{gap:20px!important}
body.auth-page:not(:has(input[name="confirm_password"])):has(input[autocomplete="current-password"]) .auth-switch{padding-top:32px!important;padding-bottom:8px!important;font-size:15px!important}
.auth-field-icon{display:block;position:relative;width:100%}
.auth-field-icon>svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);height:21px;width:21px;z-index:1;color:#667187;pointer-events:none}
.auth-panel .auth-field-icon>input:not([type=checkbox]){padding-left:49px!important}
.auth-panel .password-input.auth-field-icon>input{padding-right:55px!important}
@media(max-width:600px){body.auth-page:not(:has(input[name="confirm_password"])):has(input[autocomplete="current-password"]) .auth-main{margin:22px auto 35px!important}body.auth-page:not(:has(input[name="confirm_password"])):has(input[autocomplete="current-password"]) .auth-panel{padding:30px 23px 35px!important}}

/* v5.8: retain full landing header on authentication screens */
body.auth-page{min-height:100vh!important}body.auth-page .landing-header{flex-shrink:0;position:relative;z-index:20;background:rgba(255,255,255,.96);box-shadow:0 2px 16px #28344a0b}body.auth-page .landing-header .topbar{min-height:78px}body.auth-page .landing-header .auth-actions{display:flex}body.auth-page .auth-main{margin:14px auto 28px!important;align-items:center!important;flex:1 0 auto!important}
body.auth-page:not(:has(input[name="confirm_password"])):has(input[autocomplete="current-password"]) .auth-main{width:min(530px,calc(100% - 24px))!important;margin:14px auto 26px!important}body.auth-page:not(:has(input[name="confirm_password"])):has(input[autocomplete="current-password"]) .auth-panel{max-width:495px!important;padding:25px 35px 24px!important}body.auth-page:not(:has(input[name="confirm_password"])):has(input[autocomplete="current-password"]) .auth-brand{margin:0 auto 14px!important}body.auth-page:not(:has(input[name="confirm_password"])):has(input[autocomplete="current-password"]) .auth-intro{margin-bottom:17px!important}body.auth-page:not(:has(input[name="confirm_password"])):has(input[autocomplete="current-password"]) .auth-panel form{gap:14px!important}body.auth-page:not(:has(input[name="confirm_password"])):has(input[autocomplete="current-password"]) .auth-switch{padding-top:19px!important;padding-bottom:2px!important}
body.auth-page .auth-footer{padding:10px!important}body.auth-page .landing-header .hamburger{display:none}
@media(max-width:900px){body.auth-page .landing-header .hamburger{display:flex}body.auth-page .landing-header .auth-actions{display:none}body.auth-page .landing-header .topbar{min-height:70px}}
@media(max-width:600px){body.auth-page .auth-main{margin:18px auto 30px!important}body.auth-page:not(:has(input[name="confirm_password"])):has(input[autocomplete="current-password"]) .auth-panel{padding:23px 21px!important}}

/* v5.9: use the identical landing page icons on authentication pages */
.auth-landing-header .nav-icon{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;margin-right:5px}
.auth-landing-header .site-icon,.auth-submit .site-icon{width:19px;height:19px;display:block}
.auth-submit .signin-icon{display:inline-flex;align-items:center;vertical-align:middle;margin-right:8px}
.auth-submit{display:flex;justify-content:center;align-items:center;gap:3px}

/* v6.0: registration icons stay inside all five input fields */
body.auth-page:has(input[name="confirm_password"]) .auth-field-icon{display:block;position:relative;width:100%}
body.auth-page:has(input[name="confirm_password"]) .auth-field-icon>.auth-prefix-icon{position:absolute;display:block;left:14px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:#67748a;z-index:2;pointer-events:none}
body.auth-page:has(input[name="confirm_password"]) .auth-panel .auth-field-icon>input:not([type=checkbox]){padding-left:47px!important}
body.auth-page:has(input[name="confirm_password"]) .auth-panel .password-input.auth-field-icon>input{padding-right:49px!important}
body.auth-page:has(input[name="confirm_password"]) .password-input.auth-field-icon .show-pass{z-index:3}