:root{
  --ground:#F7F5FA; --surface:#FFFFFF; --ink:#241634; --ink-soft:#544266; --ink-mute:#8577A0;
  --rule:#E4DCF0; --rule-strong:#CCBEE2; --accent:#5D029F; --accent-soft:#5D029F14;
  --brick:#95412F; --brick-soft:#95412F12;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#130A1E; --surface:#1D1230; --ink:#F1EBF8; --ink-soft:#B0A0C4; --ink-mute:#7D6C92;
    --rule:#2F2044; --rule-strong:#402D59; --accent:#8140FF; --accent-soft:#8140FF1F;
    --brick:#D68268; --brick-soft:#D682681A;
  }
}
*{box-sizing:border-box}
body{
  margin:0; min-height:100dvh; background:var(--ground); color:var(--ink);
  font-family:"IBM Plex Sans Arabic",system-ui,sans-serif; font-size:15.5px; line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
.gate{min-height:100dvh;display:grid;place-items:center;padding:24px}
.card{
  width:100%;max-width:372px;background:var(--surface);border:1px solid var(--rule);
  border-radius:6px;padding:34px 32px 30px;display:flex;flex-direction:column;
  box-shadow:0 1px 2px rgba(0,0,0,.04), 0 20px 50px -34px rgba(0,0,0,.5);
}
.mark{
  width:46px;height:46px;border-radius:50%;background:var(--accent);color:#fff;
  display:grid;place-items:center;font-family:"Noto Kufi Arabic",sans-serif;
  font-size:20px;font-weight:700;margin-bottom:18px;
}
h1{font-family:"Noto Kufi Arabic",sans-serif;font-size:21px;margin:0}
.sub{margin:4px 0 26px;font-size:13.5px;color:var(--ink-mute)}
label{
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-mute);margin-bottom:6px;
}
input{
  font-family:"IBM Plex Mono",monospace;font-size:14.5px;padding:10px 12px;margin-bottom:18px;
  border:1px solid var(--rule-strong);border-radius:4px;background:var(--ground);
  color:var(--ink);outline:none;transition:border-color .15s;
}
input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
button{
  font-family:inherit;font-size:15px;font-weight:500;padding:11px;border:0;border-radius:4px;
  background:var(--accent);color:#fff;cursor:pointer;transition:opacity .15s;
}
button:hover{opacity:.9}
button:disabled{opacity:.55;cursor:progress}
button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.err{
  margin-top:14px;padding:10px 12px;border-radius:4px;font-size:13.5px;
  color:var(--brick);background:var(--brick-soft);border-inline-start:2px solid var(--brick);
}