/* ===== Login screen ===== */
:root{
  --accent:#3f7ff5;
  --accent-2:#6aa0ff;
  --accent-deep:#1f4fcb;
  --ink:#0f1422;
  --ink-soft:#5a6380;
  --paper:#f4f6fb;
  --paper-raised:#ffffff;
  --line:#e1e6f0;
  --danger:#e5484d;
  --ok:#22a861;
  --stage-1:#050b1d;
  --stage-2:#0a1d4d;
}
@media (prefers-color-scheme: dark){
  :root{
    --ink:#eef1fa;
    --ink-soft:#9aa4c0;
    --paper:#080c17;
    --paper-raised:#0f1524;
    --line:#1f2840;
  }
}

*{box-sizing:border-box;}
html,body{height:100%;}
body.login-page{
  margin:0; min-height:100vh;
  background:var(--paper); color:var(--ink);
  font-family:'Tajawal',system-ui,sans-serif; direction:rtl;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.login-shell{
  min-height:100vh;
  display:grid; grid-template-columns:minmax(380px, 5fr) 7fr;
}

/* ---------- form side ---------- */
.form-side{
  position:relative;
  display:flex; flex-direction:column;
  padding:36px clamp(24px, 5vw, 72px);
  background:var(--paper-raised);
}
.form-side::before{ /* soft glow behind the form */
  content:""; position:absolute; inset:auto -20% 10% auto; width:420px; height:420px;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%);
  pointer-events:none;
}

.brand-row{display:flex; align-items:center; gap:12px; position:relative;}
.brand-logo{
  position:relative; width:46px; height:46px; flex:none; border-radius:13px;
}
.brand-logo img{width:100%; height:100%; border-radius:13px; object-fit:cover; display:block; position:relative; z-index:1;}
.brand-logo::after{
  content:""; position:absolute; inset:-5px; border-radius:17px;
  background:conic-gradient(from 0deg, var(--accent), transparent 40%, var(--accent-2) 60%, transparent 85%, var(--accent));
  filter:blur(6px); opacity:.55; animation:spin 6s linear infinite;
}
.brand-text{display:flex; flex-direction:column; line-height:1.15;}
.brand-text strong{font-family:'Cairo',sans-serif; font-weight:800; font-size:16px;}
.brand-text span{font-size:11.5px; letter-spacing:.14em; color:var(--ink-soft); direction:ltr; text-align:right;}

.form-wrap{
  position:relative; flex:1;
  display:flex; flex-direction:column; justify-content:center;
  width:100%; max-width:400px; margin:0 auto; padding:40px 0;
}

.hello-badge{
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px; border-radius:999px;
  background:color-mix(in srgb, var(--accent) 10%, transparent);
  color:var(--accent); font-family:'Cairo',sans-serif; font-weight:700; font-size:12px;
  margin-bottom:18px;
}
.hello-badge .pulse{width:7px; height:7px; border-radius:50%; background:var(--accent); position:relative;}
.hello-badge .pulse::after{
  content:""; position:absolute; inset:0; border-radius:50%; background:var(--accent);
  animation:ping 1.8s cubic-bezier(0,0,.2,1) infinite;
}

.form-wrap h1{
  font-family:'Cairo',sans-serif; font-weight:900; margin:0;
  font-size:clamp(28px, 3vw, 36px); line-height:1.25; letter-spacing:-.01em;
}
.form-wrap h1 .grad{
  background:linear-gradient(90deg, var(--accent-deep), var(--accent), var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.form-wrap .sub{color:var(--ink-soft); font-size:15px; margin:10px 0 32px;}

.login-form label{
  display:block; font-family:'Cairo',sans-serif; font-weight:700; font-size:13px;
  color:var(--ink-soft); margin-bottom:8px;
}
.input-box{
  position:relative; display:flex; align-items:center;
  border:1.5px solid var(--line); border-radius:14px;
  background:var(--paper);
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.input-box:focus-within{
  border-color:var(--accent); background:var(--paper-raised);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
}
.input-box .ico{width:20px; height:20px; margin:0 16px 0 4px; color:var(--ink-soft); flex:none; transition:color .2s ease;}
.input-box:focus-within .ico{color:var(--accent);}
.input-box input{
  flex:1; min-width:0; border:none; outline:none; background:transparent;
  color:var(--ink); font-family:'Tajawal',sans-serif; font-size:16px;
  padding:15px 0; letter-spacing:.04em;
}
.eye-btn{
  border:none; background:transparent; color:var(--ink-soft); cursor:pointer;
  width:44px; height:44px; margin-left:4px; border-radius:10px;
  display:flex; align-items:center; justify-content:center; flex:none;
}
.eye-btn:hover{color:var(--accent);}
.eye-btn:focus-visible{outline:2px solid var(--accent); outline-offset:-2px;}
.eye-btn svg{width:19px; height:19px;}
.eye-btn .eye-off{display:none;}
.eye-btn.on .eye-on{display:none;}
.eye-btn.on .eye-off{display:block;}

.caps-hint{font-size:12.5px; color:#c98a12; margin-top:8px; display:none;}
.caps-hint.show{display:block;}

.err{
  display:flex; align-items:center; gap:8px;
  max-height:0; opacity:0; overflow:hidden; margin:0;
  color:var(--danger); font-size:13.5px; font-weight:500;
  transition:max-height .25s ease, opacity .25s ease, margin .25s ease;
}
.err svg{width:16px; height:16px; flex:none;}
.err.show{max-height:40px; opacity:1; margin-top:12px;}
.input-box.invalid{border-color:var(--danger); box-shadow:0 0 0 4px color-mix(in srgb, var(--danger) 14%, transparent);}
.shake{animation:shake .45s cubic-bezier(.36,.07,.19,.97);}

.submit-btn{
  position:relative; overflow:hidden;
  width:100%; margin-top:24px; height:54px;
  border:none; border-radius:14px; cursor:pointer;
  background:linear-gradient(135deg, var(--accent), var(--accent-deep));
  color:#fff; font-family:'Cairo',sans-serif; font-weight:800; font-size:16px;
  display:flex; align-items:center; justify-content:center; gap:10px;
  box-shadow:0 14px 30px -12px color-mix(in srgb, var(--accent) 70%, transparent);
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.submit-btn::before{ /* light sweep */
  content:""; position:absolute; top:0; bottom:0; width:40%; left:-60%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform:skewX(-20deg);
}
.submit-btn:hover{transform:translateY(-2px); box-shadow:0 20px 36px -14px color-mix(in srgb, var(--accent) 80%, transparent);}
.submit-btn:hover::before{animation:sweep .9s ease;}
.submit-btn:active{transform:translateY(0) scale(.99);}
.submit-btn:focus-visible{outline:3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset:3px;}
.submit-btn:disabled{cursor:default; filter:saturate(.8);}
.submit-btn .arrow{width:18px; height:18px; transition:transform .2s ease;}
.submit-btn:hover .arrow{transform:translateX(-4px);}
.submit-btn .spinner{
  width:20px; height:20px; border-radius:50%;
  border:2.5px solid rgba(255,255,255,.35); border-top-color:#fff;
  animation:spin .7s linear infinite; display:none;
}
.submit-btn .check{width:22px; height:22px; display:none;}
.submit-btn.loading .spinner{display:block;}
.submit-btn.loading .arrow, .submit-btn.success .arrow, .submit-btn.success .spinner{display:none;}
.submit-btn.success{background:linear-gradient(135deg, #2fbf71, var(--ok));}
.submit-btn.success .check{display:block; animation:pop .35s cubic-bezier(.2,1.6,.4,1);}
.submit-btn.success .check path{stroke-dasharray:24; stroke-dashoffset:24; animation:draw .4s .1s ease forwards;}

.form-foot{
  position:relative;
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  font-size:12.5px; color:var(--ink-soft);
}
.form-foot .secure{display:inline-flex; align-items:center; gap:6px;}
.form-foot .secure svg{width:15px; height:15px; color:var(--ok);}

/* ---------- brand stage ---------- */
.stage{
  position:relative; overflow:hidden; isolation:isolate;
  background:radial-gradient(120% 90% at 20% 10%, var(--stage-2), var(--stage-1) 65%);
  color:#fff;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:44px clamp(28px, 4vw, 64px);
  perspective:1400px;
}
.stage .grid{
  position:absolute; inset:0; z-index:-1;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 45%, #000 30%, transparent 75%);
          mask-image:radial-gradient(ellipse 70% 60% at 50% 45%, #000 30%, transparent 75%);
  animation:gridMove 18s linear infinite;
}
.blob{position:absolute; border-radius:50%; filter:blur(70px); z-index:-1; opacity:.75;}
.blob.b1{width:460px; height:460px; background:#2b6cf6; top:-140px; left:-100px; animation:float1 16s ease-in-out infinite;}
.blob.b2{width:380px; height:380px; background:#5b3df5; bottom:-120px; right:-80px; opacity:.5; animation:float2 19s ease-in-out infinite;}
.blob.b3{width:260px; height:260px; background:#18b4e8; top:40%; left:45%; opacity:.35; animation:float1 22s ease-in-out infinite reverse;}

.particles{position:absolute; inset:0; z-index:-1; pointer-events:none;}
.particles i{
  position:absolute; bottom:-10px; width:3px; height:3px; border-radius:50%;
  background:rgba(170,200,255,.8); box-shadow:0 0 8px rgba(120,170,255,.9);
  animation:rise linear infinite;
}

.stage-top{display:flex; justify-content:flex-start;}
.stage-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:999px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  font-family:'Cairo',sans-serif; font-weight:700; font-size:12.5px; color:#d6e2ff;
}
.stage-chip svg{width:15px; height:15px; color:#7fb0ff;}

/* the card deck */
.deck{
  position:relative; flex:1; min-height:360px;
  display:flex; align-items:center; justify-content:center;
  transform-style:preserve-3d;
  transform:rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition:transform .4s cubic-bezier(.16,.8,.24,1);
}
.kcard{
  position:absolute; width:min(360px, 78%); aspect-ratio:1.586;
  border-radius:20px; padding:22px 24px;
  display:flex; flex-direction:column; justify-content:space-between;
  color:#fff; overflow:hidden; direction:ltr;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.25);
  transform-style:preserve-3d;
}
.kcard::before{ /* sheen */
  content:""; position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.28) 45%, transparent 60%);
  transform:translateX(-120%); animation:sheen 6s ease-in-out infinite;
}
.kcard::after{ /* curved wave */
  content:""; position:absolute; width:140%; height:140%; right:-70%; bottom:-80%;
  border-radius:50%; border:28px solid rgba(255,255,255,.06);
}
.kcard.c1{
  background:linear-gradient(135deg, #4c8dff 0%, #2556d8 55%, #16328f 100%);
  z-index:3; animation:deck1 7s ease-in-out infinite;
}
.kcard.c2{
  background:linear-gradient(135deg, #22304f 0%, #121a2e 100%);
  border:1px solid rgba(255,255,255,.1);
  z-index:2; animation:deck2 7s ease-in-out infinite;
}
.kcard.c3{
  background:linear-gradient(135deg, #6a4dff 0%, #3a2bb3 100%);
  z-index:1; animation:deck3 7s ease-in-out infinite;
}
.kcard.c2::before{animation-delay:2s;}
.kcard.c3::before{animation-delay:4s;}

.k-top{display:flex; align-items:center; justify-content:space-between; position:relative; z-index:1;}
.k-logo{width:42px; height:42px; border-radius:11px; overflow:hidden; box-shadow:0 6px 14px rgba(0,0,0,.25);}
.k-logo img{width:100%; height:100%; object-fit:cover; display:block;}
.k-nfc{width:26px; height:26px; opacity:.85;}
.k-chip{
  width:46px; height:34px; border-radius:7px; position:relative; z-index:1;
  background:linear-gradient(135deg, #f6d98b, #c99a3b);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);
}
.k-chip::before{
  content:""; position:absolute; inset:7px 0; border-top:1px solid rgba(0,0,0,.25); border-bottom:1px solid rgba(0,0,0,.25);
}
.k-chip::after{
  content:""; position:absolute; inset:0 15px; border-left:1px solid rgba(0,0,0,.25); border-right:1px solid rgba(0,0,0,.25);
}
.k-num{font-family:'Courier New',monospace; font-size:clamp(14px,1.6vw,18px); letter-spacing:.18em; opacity:.92; position:relative; z-index:1;}
.k-bot{display:flex; align-items:flex-end; justify-content:space-between; position:relative; z-index:1;}
.k-bot small{display:block; font-size:9.5px; letter-spacing:.16em; opacity:.65; margin-bottom:3px;}
.k-bot strong{font-family:'Cairo',sans-serif; font-weight:800; font-size:13.5px; letter-spacing:.08em;}
.k-brand{font-family:'Cairo',sans-serif; font-weight:900; font-size:15px; letter-spacing:.12em; opacity:.95;}

.stage-copy{position:relative; max-width:520px;}
.stage-copy h2{
  font-family:'Cairo',sans-serif; font-weight:900; margin:0;
  font-size:clamp(24px, 2.4vw, 34px); line-height:1.35;
}
.stage-copy h2 span{color:#8fb6ff;}
.stage-copy p{color:#b4c2e4; font-size:15px; margin:10px 0 22px; line-height:1.8;}
.features{display:flex; gap:10px; flex-wrap:wrap;}
.feature{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 14px; border-radius:12px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  font-size:13px; color:#dfe7ff;
  transition:transform .25s ease, background .25s ease, border-color .25s ease;
}
.feature:hover{transform:translateY(-3px); background:rgba(255,255,255,.1); border-color:rgba(143,182,255,.5);}
.feature svg{width:16px; height:16px; color:#8fb6ff;}

/* ---------- entrance ---------- */
.reveal{opacity:0; transform:translateY(16px); animation:reveal .8s cubic-bezier(.16,.8,.24,1) forwards; animation-delay:var(--d, 0s);}
.deck-in{opacity:0; animation:deckIn 1.1s cubic-bezier(.16,.8,.24,1) .25s forwards;}

/* ---------- keyframes ---------- */
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes ping{75%,100%{transform:scale(2.6); opacity:0;}}
@keyframes shake{
  10%,90%{transform:translateX(-1px);} 20%,80%{transform:translateX(3px);}
  30%,50%,70%{transform:translateX(-6px);} 40%,60%{transform:translateX(6px);}
}
@keyframes sweep{to{left:130%;}}
@keyframes pop{from{transform:scale(.3);} to{transform:scale(1);}}
@keyframes draw{to{stroke-dashoffset:0;}}
@keyframes reveal{to{opacity:1; transform:none;}}
@keyframes deckIn{from{opacity:0; transform:translateY(40px) scale(.92);} to{opacity:1; transform:none;}}
@keyframes gridMove{to{background-position:46px 46px;}}
@keyframes float1{0%,100%{transform:translate(0,0);} 50%{transform:translate(60px,40px);}}
@keyframes float2{0%,100%{transform:translate(0,0);} 50%{transform:translate(-50px,-30px);}}
@keyframes rise{
  0%{transform:translateY(0); opacity:0;}
  10%{opacity:1;} 90%{opacity:.8;}
  100%{transform:translateY(-110vh); opacity:0;}
}
@keyframes sheen{0%,55%{transform:translateX(-120%);} 80%,100%{transform:translateX(120%);}}
@keyframes deck1{
  0%,100%{transform:translate3d(0,0,60px) rotate(-8deg);}
  50%{transform:translate3d(0,-14px,60px) rotate(-6deg);}
}
@keyframes deck2{
  0%,100%{transform:translate3d(-70px,-46px,0) rotate(-18deg);}
  50%{transform:translate3d(-78px,-58px,0) rotate(-20deg);}
}
@keyframes deck3{
  0%,100%{transform:translate3d(70px,52px,-60px) rotate(4deg);}
  50%{transform:translate3d(78px,62px,-60px) rotate(6deg);}
}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .login-shell{grid-template-columns:1fr;}
  .stage{order:-1; min-height:340px; padding:26px 20px 30px;}
  .stage-top{display:none;}
  .deck{min-height:250px;}
  .kcard{width:min(290px, 74%); padding:16px 18px; border-radius:16px;}
  .k-logo{width:34px; height:34px;}
  .k-chip{width:38px; height:28px;}
  .stage-copy{display:none;}
  .form-side{padding:26px 20px 24px;}
  .form-wrap{padding:28px 0 36px;}
}
@media (max-width:420px){
  .deck{min-height:210px;}
  .kcard{width:76%;}
  @keyframes deck2{0%,100%{transform:translate3d(-40px,-30px,0) rotate(-16deg);} 50%{transform:translate3d(-44px,-38px,0) rotate(-18deg);}}
  @keyframes deck3{0%,100%{transform:translate3d(40px,34px,-60px) rotate(4deg);} 50%{transform:translate3d(44px,40px,-60px) rotate(6deg);}}
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition:none !important;}
  .reveal, .deck-in{opacity:1; transform:none;}
  .particles{display:none;}
}

.login-form label.mt{margin-top:18px;}