:root{
  --navy:#111d31;--navy2:#20375e;--maroon:#741a39;--gold:#c7a66a;--cream:#f7f3ed;
  --paper:#fffdfa;--ink:#151922;--muted:#747985;--line:#ddd5ca;--green:#2f6b57;--amber:#9b6b18;--red:#98404c;
  --shadow:0 24px 70px rgba(17,29,49,.12)
}
*{box-sizing:border-box}html{direction:rtl}body{margin:0;min-height:100vh;background:
radial-gradient(circle at 10% 10%,rgba(116,26,57,.06),transparent 28%),
linear-gradient(180deg,#faf7f3,#f1ece5);font-family:"IBM Plex Sans Arabic","Segoe UI",Tahoma,Arial,sans-serif;color:var(--ink)}
a{text-decoration:none}.shell{min-height:100vh;display:grid;place-items:center;padding:24px}.loginCard{width:min(930px,100%);display:grid;grid-template-columns:1fr .9fr;border:1px solid rgba(119,99,82,.12);border-radius:32px;overflow:hidden;box-shadow:var(--shadow);background:var(--paper)}
.loginBrand{background:linear-gradient(145deg,var(--navy),var(--navy2));color:#fff;padding:46px;display:flex;flex-direction:column;justify-content:space-between;min-height:590px}.brandTop{display:flex;align-items:center;gap:12px}.mark{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(145deg,var(--maroon),#501025);font-weight:800;font-size:22px}.brandTop b{font-size:25px}.brandTop small{display:block;color:#c6d0dc;font-size:11px}.brandHero h1{font-size:clamp(36px,5vw,58px);line-height:1.2;margin:0 0 12px}.brandHero p{color:#c9d2df;line-height:1.9;margin:0}.brandPoints{display:grid;gap:10px}.brandPoint{display:flex;gap:9px;align-items:center;color:#e1e6ed;font-size:12px}.brandPoint i{width:9px;height:9px;border-radius:50%;background:var(--gold)}
.loginForm{padding:46px;display:flex;flex-direction:column;justify-content:center}.overline{color:var(--maroon);font-size:10px;font-weight:800;letter-spacing:.06em}.loginForm h2{font-size:34px;color:var(--navy);margin:8px 0}.loginForm>p{color:var(--muted);line-height:1.8;margin:0 0 22px}.field{display:grid;gap:7px;margin-bottom:13px}.field label{font-size:11px;color:#5e5a55;font-weight:700}.field input,.field select{width:100%;border:1px solid #dcd2c7;background:#fff;border-radius:14px;padding:13px 14px;font:inherit;color:var(--ink);outline:0}.field input:focus,.field select:focus{border-color:#b78395;box-shadow:0 0 0 3px rgba(116,26,57,.08)}
.btn{border:0;border-radius:14px;padding:13px 17px;font:inherit;font-weight:800;cursor:pointer;display:inline-flex;justify-content:center;align-items:center;gap:8px}.primary{background:linear-gradient(145deg,var(--maroon),#5b132d);color:#fff;box-shadow:0 12px 28px rgba(116,26,57,.20)}.secondary{background:#fff;color:var(--navy);border:1px solid var(--line)}.dark{background:linear-gradient(145deg,var(--navy),var(--navy2));color:#fff}.actions{display:grid;gap:9px}.error{margin:10px 0;padding:11px 13px;border-radius:13px;background:#fbecef;color:var(--red);font-size:11px;display:none}.note{margin-top:16px;padding:12px 14px;border-radius:14px;background:#fff7e8;border:1px solid #ead7b5;color:#725a32;font-size:10px;line-height:1.75}.tiny{font-size:9px;color:#999;margin-top:14px;line-height:1.7}
@media(max-width:760px){.shell{padding:12px}.loginCard{grid-template-columns:1fr;border-radius:24px}.loginBrand{min-height:300px;padding:28px}.brandHero h1{font-size:36px}.brandPoints{display:none}.loginForm{padding:28px 22px}}

/* Approved LexLearn identity mark */
.mark{background:transparent!important;box-shadow:none!important;border-radius:0!important;padding:0!important;overflow:visible!important}
.mark img{display:block;width:100%;height:100%;object-fit:contain}


/* LexLearn approved brand palette */
:root{
  --navy:#101c38;
  --navy2:#203256;
  --navy-2:#203256;
  --maroon:#8a1f39;
  --maroon-2:#5b0d26;
}

/* LexLearn brand tokens — shared across public, student, demo and supervisor views */
:root{--maroon:#8F1D3F;--maroon-2:#6E1531;--navy:#142B5F;--navy2:#0D1E45}

/* Legible sign-in controls. Passwords are never saved by the checkbox. */
.passwordToggle{justify-self:start;border:1px solid #b7c5dd;background:#f5f7fc;color:#142B5F;border-radius:9px;padding:7px 17px;cursor:pointer;font:inherit;font-size:13px}
.rememberRow{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:#243756;cursor:pointer;margin:6px 0 14px}
.rememberRow input{width:18px;height:18px;margin:0;accent-color:#8F1D3F}