:root{--brand:#5968f4;--brand-dark:#3f4bd1;--ink:#111831;--muted:#667085;--line:#e5e9f2;--surface:#fff;--soft:#f6f8fc}
body{
  font-family:'IBM Plex Sans Arabic',sans-serif!important;color:var(--ink)!important;
  background:
    radial-gradient(circle at 88% 12%,rgba(114,128,255,.32),transparent 25rem),
    radial-gradient(circle at 12% 86%,rgba(31,194,159,.20),transparent 24rem),
    linear-gradient(145deg,#111938,#222d5d)!important;
  min-height:100svh!important;padding:28px!important;position:relative;overflow-x:hidden
}
body::before{
  content:'اشرحلي';position:fixed;left:4vw;top:8vh;z-index:0;
  color:rgba(255,255,255,.045);font-size:clamp(120px,18vw,260px);font-weight:800;
  line-height:1;white-space:nowrap;pointer-events:none;will-change:transform;
}
.login-page::before{animation:authWatermarkOrbit 20s cubic-bezier(.45,.05,.55,.95) infinite}
@keyframes authWatermarkOrbit{
  0%,100%{transform:translate3d(0,0,0) rotate(-7deg) scale(.94)}
  25%{transform:translate3d(47vw,13vh,0) rotate(3deg) scale(1.04)}
  50%{transform:translate3d(48vw,61vh,0) rotate(8deg) scale(.96)}
  75%{transform:translate3d(2vw,64vh,0) rotate(-3deg) scale(1.03)}
}
.card{
  position:relative;z-index:1;background:rgba(255,255,255,.98)!important;color:var(--ink)!important;
  border:1px solid rgba(255,255,255,.5);border-radius:24px!important;padding:38px!important;
  box-shadow:0 36px 100px -30px rgba(0,0,0,.48)!important
}
.logo{font-family:'IBM Plex Sans Arabic',sans-serif!important;font-size:1.55rem!important;font-weight:800!important;letter-spacing:-.04em;margin-bottom:30px!important}
.logo .dot{width:12px!important;height:12px!important;background:linear-gradient(135deg,#5968f4,#8d98ff)!important;box-shadow:0 0 0 5px #eef0ff}
h1{font-family:'IBM Plex Sans Arabic',sans-serif!important;font-size:1.65rem!important;letter-spacing:-.035em;margin-bottom:8px!important}
p.sub{font-size:.92rem!important;line-height:1.8}
.role-toggle{background:#f3f5f9!important;border:0!important;border-radius:13px!important;padding:5px!important}
.role-toggle button{border-radius:9px!important;padding:11px!important}
.role-toggle button.active{background:#fff!important;color:var(--brand-dark)!important;box-shadow:0 3px 12px rgba(23,35,74,.10)}
label{color:#34405d;margin-bottom:7px!important}
input,select{
  border:1px solid var(--line)!important;border-radius:11px!important;background:#fbfcfe!important;
  min-height:47px;transition:border-color .18s,box-shadow .18s,background .18s
}
input:focus,select:focus{border-color:#9ea8ff!important;box-shadow:0 0 0 4px rgba(89,104,244,.10);background:#fff!important;outline:0!important}
.submit-btn{background:linear-gradient(135deg,var(--brand),var(--brand-dark))!important;border-radius:12px!important;min-height:49px;box-shadow:0 13px 28px rgba(89,104,244,.22);transition:transform .18s,box-shadow .18s!important}
.submit-btn:hover{transform:translateY(-2px);box-shadow:0 17px 32px rgba(89,104,244,.28)}
.switch-line a,.back a{color:var(--brand-dark)!important}
.note{background:#f4f6ff;border:1px solid #e0e4ff;border-radius:12px;padding:12px}
@media(max-width:560px){body{padding:0!important;background:#fff!important;align-items:flex-start!important}.login-page::before{display:none}.card{min-height:100svh;max-width:none!important;border-radius:0!important;padding:calc(30px + env(safe-area-inset-top)) 22px 36px!important;box-shadow:none!important}.row2{grid-template-columns:1fr!important;gap:0!important}}
@media(prefers-reduced-motion:reduce){.login-page::before{animation:none;transform:translate3d(18vw,42vh,0) rotate(-5deg)}}

/* Official Xplme logo */
.logo{margin-bottom:26px!important;line-height:0}
.logo img{display:block;width:190px;max-width:72%;height:auto;margin-inline:auto;object-fit:contain;mix-blend-mode:multiply}