:root{--forest:#123f39;--forest-dark:#0b302c;--gold:#c8963e;--ivory:#fffdf8;--ink:#173c32;--muted:#52665f;--line:#d8e0d8}
*{box-sizing:border-box}
body.login-page{margin:0;min-height:100vh;min-height:100svh;font-family:'Tajawal','Segoe UI',Tahoma,sans-serif;color:var(--ink);background:linear-gradient(125deg,#0b302c,#194b40);line-height:1.55}
.login-page:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.1;background-image:linear-gradient(45deg,transparent 48.8%,#d6b76d 49.5%,#d6b76d 50.5%,transparent 51.2%),linear-gradient(-45deg,transparent 48.8%,#d6b76d 49.5%,#d6b76d 50.5%,transparent 51.2%);background-size:160px 160px}
.login-shell{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;padding:36px 24px}
.login-card{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);width:min(100%,980px);background:var(--ivory);border:1px solid #ffffff24;border-radius:12px;box-shadow:0 26px 70px #031e2252;overflow:hidden}
.login-brand{position:relative;min-height:600px;background:var(--forest-dark);color:#fff;overflow:hidden}
.brand-photo{position:absolute;width:100%;height:100%;inset:0;object-fit:cover;object-position:40% center;opacity:.65}
.login-brand:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0b302c33 0%,#0b302cba 45%,#0b302cf5 100%);pointer-events:none}
.brand-content{position:relative;z-index:1;min-height:600px;padding:34px 34px 28px;display:flex;flex-direction:column;align-items:flex-start}
.login-brand .login-logo{width:104px;height:104px;margin:0 0 auto;filter:drop-shadow(0 8px 16px #0005)}
.brand-eyebrow{display:flex;align-items:center;gap:11px;margin:32px 0 16px;color:#f2cf8e;font-size:.96rem;font-weight:700}
.brand-eyebrow:before{content:"";width:30px;height:2px;background:currentColor;flex-shrink:0}
.login-brand h2{margin:0;font-size:clamp(1.8rem,2.6vw,2.65rem);font-weight:800;line-height:1.45;text-wrap:balance}
.brand-motto{font-size:1.06rem;color:#e0eae4;margin:20px 0 32px;line-height:1.7}
.brand-note{display:flex;gap:10px;align-items:center;margin:0;padding-top:18px;border-top:1px solid #b0bda452;width:100%;color:#ecd4a5;font-size:.87rem}
.login-panel{display:flex;flex-direction:column;min-width:0;border-top:4px solid var(--gold)}
.login-topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:60px;padding:10px 24px;border-bottom:1px solid #e5e7dd;background:#f6f5ed;font-size:.88rem}
.login-back{display:inline-flex;align-items:center;gap:9px;min-height:38px;padding:4px 0;color:var(--forest);font-weight:700;text-decoration:none}
.login-back i{font-size:.8rem;transition:transform .16s ease}
.login-back:hover{text-decoration:underline;text-underline-offset:5px}
.portal-label{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-weight:500}
.portal-label i{color:#916721}
.login-header{text-align:start;padding:36px 34px 0}
.login-logo{display:block;object-fit:contain;margin:0 auto 13px;width:104px;height:104px}
.form-eyebrow{margin:0 0 10px;color:#8c621e;font-size:.87rem;font-weight:700}
.login-header h1{font-size:2.35rem;line-height:1.3;margin:0 0 12px;font-weight:800}
.login-subtitle{margin:0;color:var(--muted);font-size:.96rem;line-height:1.6}
.login-body{padding:24px 34px 30px}
.login-form{display:grid;gap:20px}
.login-field label{display:block;margin-bottom:8px;font-weight:700;font-size:.98rem}
.field-control{position:relative;display:flex;align-items:center;background:#fff;border:1px solid #b8c8be;border-radius:7px;transition:border-color .16s ease,box-shadow .16s ease}
.field-control:focus-within{border-color:var(--forest);box-shadow:0 0 0 3px #103e3518}
.field-icon{position:absolute;inset-inline-start:16px;color:#6b7f73;font-size:.95rem;pointer-events:none}
.field-control input{font:inherit;font-size:1rem;width:100%;min-width:0;min-height:52px;background:transparent;border:0;outline:0;color:var(--ink);padding:12px 16px;padding-inline-start:45px;border-radius:7px}
.field-control input::placeholder{color:#6c796f;opacity:1;font-size:.93rem}
.field-control input[dir=ltr]{text-align:start;direction:ltr}
[dir=rtl] .field-control input[dir=ltr]{padding-left:16px;padding-right:45px}
.password-control input{padding-inline-end:52px}
.toggle-password{position:absolute;inset-inline-end:3px;display:grid;place-items:center;width:44px;height:44px;background:transparent;border:0;border-radius:4px;color:var(--forest);cursor:pointer}
.toggle-password:hover{background:#edf2ec}
.btn-login{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:52px;margin-top:4px;border:1px solid var(--forest);border-radius:7px;font:inherit;font-size:1.06rem;font-weight:800;background:var(--forest);color:#fff;cursor:pointer;box-shadow:inset 0 -3px 0 var(--gold);transition:background .16s ease}
.btn-login:hover{background:#195144}
.btn-login:active{background:var(--forest-dark)}
.btn-login:disabled{opacity:.6;cursor:wait}
a:focus-visible,button:focus-visible{outline:3px solid #a87827;outline-offset:3px}
.login-footer{border-top:1px solid #e5e7dd;background:#f6f5ed;padding:18px 24px;display:grid;gap:3px;text-align:center;font-size:.8rem;color:var(--muted);margin-top:auto}
.login-alert{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;margin-bottom:18px;border:1px solid #bed2c5;border-radius:6px;background:#edf5ef;color:#224c34;font-size:.94rem}
.login-alert>i{margin-top:4px;flex-shrink:0}
.login-alert>span{flex:1;min-width:0;overflow-wrap:anywhere}
.login-alert.alert-danger,.login-alert.alert-error{background:#fff0ed;border-color:#eac4bd;color:#88362b}
.login-alert.alert-warning{background:#fff6dd;border-color:#dbc68c;color:#685018}
.alert-close{display:grid;place-items:center;flex-shrink:0;width:30px;height:30px;margin-top:-3px;background:transparent;border:0;border-radius:4px;color:inherit;cursor:pointer}
.alert-close:hover{background:#0000000b}
.member-registration{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin-top:24px;padding-top:17px;border-top:1px solid var(--line);font-size:.94rem}
.member-registration p{margin:0;color:var(--muted)}
.member-registration a{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--forest);font-weight:800;text-decoration:underline;text-underline-offset:5px}
.member-registration a:hover{color:#875e1d}
.register-page .login-card{width:min(100%,1040px);grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr)}
.register-page .login-header{padding-top:28px}
.register-page .login-header h1{font-size:2rem}
.register-page .login-body{padding-top:22px}
.registration-form{gap:16px}
.registration-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.registration-row .login-field{min-width:0}
.register-page .member-registration{margin-top:18px;padding-top:12px}
@media(max-width:850px){.login-shell{padding:28px 20px}.brand-content{padding-inline:28px}.login-header{padding:40px 30px 0}.login-body{padding:28px 30px 32px}.login-brand h2{font-size:1.85rem}}
@media(max-width:680px){.login-card,.register-page .login-card{grid-template-columns:1fr;max-width:510px}.login-shell{padding:20px 12px}.login-brand,.brand-content{min-height:0}.brand-content{padding:22px 24px;display:grid;grid-template-columns:72px minmax(0,1fr);column-gap:16px;align-items:center}.login-brand .login-logo{grid-row:1/4;width:72px;height:72px;margin:0}.brand-eyebrow{font-size:.75rem;margin:0 0 4px}.brand-eyebrow:before{display:none}.login-brand h2{font-size:1.08rem;line-height:1.55}.brand-motto,.brand-note{display:none}.brand-photo{object-position:center 45%;opacity:.4}.login-topbar{padding-inline:22px;gap:10px;font-size:.82rem}.login-header{padding:28px 26px 0}.login-body{padding:24px 26px 30px}.login-header h1{font-size:1.95rem}.portal-label{gap:5px}.login-footer{padding-inline:18px}.registration-row{grid-template-columns:1fr;gap:16px}}
@media(max-width:350px){.login-topbar{flex-wrap:wrap;gap:0}.login-body{padding-inline:18px}.login-header{padding-inline:18px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}