:root{--navy:#142f59;--blue:#2457a6;--blue2:#3975d0;--ink:#203047;--muted:#8190a5;--line:#e7edf5}
*{box-sizing:border-box}
body.auth-page{margin:0;min-height:100vh;background:#f5f7fb;color:var(--ink);font-family:'Cairo',sans-serif}
.auth-shell{min-height:100vh;display:grid;grid-template-columns:minmax(360px, .92fr) minmax(480px,1.08fr);max-width:1500px;margin:auto;background:#fff;box-shadow:0 20px 70px #1d35570b}
.auth-brand-panel{position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:100vh;padding:42px 7%;color:#fff;background:radial-gradient(circle at 15% 80%,#3978c9 0,transparent 38%),linear-gradient(145deg,#112b50,#1d477f 65%,#285c9e)}
.auth-brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;width:max-content}
.auth-brand-icon{width:48px;height:48px;border-radius:15px;background:#ffffff20;border:1px solid #ffffff38;display:grid;place-items:center;font-size:27px;font-weight:800;color:#fff;box-shadow:0 8px 24px #061a3933}
.auth-brand strong,.auth-brand small{display:block}.auth-brand strong{font-size:22px;font-weight:800}.auth-brand small{font-size:10px;color:#d3e1f5}
.auth-visual{position:relative;display:grid;place-items:center;flex:1;min-height:280px}
.visual-orbit{position:absolute;border:1px solid #ffffff25;border-radius:50%;width:310px;height:310px}
.orbit-two{width:230px;height:230px;border-style:dashed;animation:spin 45s linear infinite}
.orbit-one{width:390px;height:390px}
.visual-safe{width:170px;height:170px;border-radius:45px;background:linear-gradient(145deg,#ffffff30,#ffffff0b);border:1px solid #ffffff4a;box-shadow:0 25px 65px #071a3b44;display:flex;flex-direction:column;align-items:center;justify-content:center;backdrop-filter:blur(12px);transform:rotate(-7deg)}
.visual-safe b{font-size:62px;line-height:1.1;color:white}.visual-safe span{font-size:22px;color:#d7e8ff}.visual-safe small{font-size:11px;color:#d7e8ff}
.brand-message{max-width:470px;margin:0 auto 28px;position:relative;z-index:1}
.auth-kicker{font-size:11px;font-weight:800;color:#83b4ff;letter-spacing:.3px}
.brand-message h1{font-size:clamp(26px,3vw,40px);line-height:1.55;margin:10px 0;font-weight:800}
.brand-message p{font-size:13px;line-height:2;color:#d0def0;max-width:420px}
.brand-footer{display:flex;justify-content:space-between;color:#b8cce6;font-size:10px;border-top:1px solid #ffffff24;padding-top:16px}
.auth-form-panel{display:flex;align-items:center;justify-content:center;padding:50px 8%;background:#fff}
.auth-form-wrap{width:100%;max-width:430px}
.auth-heading{margin-bottom:32px}
.auth-heading h2{font-size:29px;font-weight:800;margin:7px 0;color:#182c49}
.auth-heading p{font-size:12px;color:var(--muted);margin:0}
.auth-form{display:flex;flex-direction:column}
.auth-form>label{font-size:11px;font-weight:700;margin:0 0 8px;color:#34445a}
.auth-input{height:51px;border:1px solid var(--line);border-radius:12px;display:flex;align-items:center;gap:11px;padding:0 14px;margin-bottom:5px;background:#fbfcfe;transition:.2s}
.auth-input:focus-within{border-color:#7ba6e4;box-shadow:0 0 0 4px #2457a610;background:white}
.auth-input>span{color:#8b9bb1;font-size:17px}
.auth-input input{border:0;outline:0;background:transparent;flex:1;min-width:0;font:inherit;font-size:12px;color:#26364c}
.auth-input input::placeholder{color:#aab5c4}
.show-password{border:0;background:transparent;color:var(--blue);font:inherit;font-size:10px;cursor:pointer}
.field-error,.auth-validation{font-size:10px;color:#c84450;margin:2px 0 10px}
.auth-validation ul{margin:0;padding-right:18px}
.remember-row{display:flex;align-items:center;gap:8px;margin:13px 0 22px!important;font-size:10px!important;color:#6d7d91!important;font-weight:500!important}
.remember-row input{accent-color:var(--blue);width:15px;height:15px}
.auth-submit{width:100%;min-height:50px;border:0;border-radius:12px;background:linear-gradient(100deg,#2457a6,#3474cb);color:white;text-decoration:none;display:flex;align-items:center;justify-content:center;gap:12px;font:inherit;font-size:13px;font-weight:800;cursor:pointer;box-shadow:0 9px 22px #2457a626;transition:.2s}
.auth-submit:hover{filter:brightness(1.05);transform:translateY(-1px);color:#fff}
.auth-submit span{font-size:18px}
.auth-switch{text-align:center;font-size:11px;color:#7d8ba0;margin-top:24px}
.auth-switch a{color:var(--blue);font-weight:800;text-decoration:none}
.auth-security{margin-top:35px;padding:13px 15px;border-radius:10px;background:#f3f7fd;color:#74849a;font-size:10px;display:flex;align-items:center;gap:9px}
.auth-security span{font-size:18px;color:var(--blue)}
.auth-mobile-brand{display:none}
.simple-error{max-width:480px;margin:12vh auto;padding:45px;background:white;border:1px solid var(--line);border-radius:22px;text-align:center;box-shadow:0 15px 50px #1d35570d}
.simple-error .auth-brand-icon{margin:auto;background:var(--blue)}
.simple-error h1{font-size:22px}.simple-error p{color:var(--muted);font-size:12px;margin-bottom:25px}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:900px){.auth-shell{grid-template-columns:1fr}.auth-brand-panel{display:none}.auth-form-panel{min-height:100vh;padding:35px 22px}.auth-mobile-brand{display:flex;align-items:center;gap:10px;margin-bottom:45px;justify-content:center;color:var(--navy);font-size:20px;font-weight:800}.auth-mobile-brand .auth-brand-icon{background:linear-gradient(145deg,#2457a6,#17386c)}.auth-form-wrap{max-width:460px}}
@media(max-width:480px){.auth-heading h2{font-size:25px}.auth-form-panel{padding:25px 18px}.auth-security{margin-top:25px}}