/* Login / setup / reset page (approved by AA 2026-11-03: the light version). */
:root{--ink:#0f172a;--muted:#64748b;--line:#e2e8f0;--a1:#10b981;--a2:#06b6d4;--good:#16a34a;--bad:#e11d48}
*{box-sizing:border-box}html,body{margin:0;min-height:100%}
body{color:var(--ink);font:15px/1.65 "Changa","IBM Plex Sans Arabic",system-ui,Tahoma,sans-serif;
background:linear-gradient(180deg,#ffffff 0%,#f0fdf7 55%,#dcfce7 100%) fixed;overflow-x:hidden}
/* live price tape */
.tape{position:fixed;top:0;right:0;left:0;height:40px;background:rgba(255,255,255,.85);border-bottom:1px solid #d1fae5;
overflow:hidden;z-index:4;direction:ltr;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.tape .mv{position:absolute;top:0;left:0;white-space:nowrap;line-height:40px;font:600 14px Poppins,system-ui,sans-serif;
color:#0f172a;animation:tape 60s linear infinite}
.tape:hover .mv{animation-play-state:paused}
.tape .it{margin:0 18px}.tape .px{color:#334155;font-weight:500;margin-left:7px}
.tape .up{color:var(--good);margin-left:7px}.tape .dn{color:var(--bad);margin-left:7px}.tape .sep{color:#cbd5e1}
@keyframes tape{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* the two drawings beside the card */
.scene{position:fixed;inset:0;pointer-events:none;z-index:1}
.zone{position:absolute;top:64px;bottom:16px;width:calc(50vw - 235px);max-width:620px}
.zone svg{width:100%;height:100%;display:block}
.zl{left:2vw}.zr{right:2vw}
svg text{font-family:"Changa","IBM Plex Sans Arabic",system-ui,sans-serif}
.dr{stroke-dasharray:1400;stroke-dashoffset:1400;animation:dr 7s ease-in-out infinite}
@keyframes dr{0%{stroke-dashoffset:1400}45%{stroke-dashoffset:0}85%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.gr{transform-box:fill-box;transform-origin:bottom;animation:gr 7s ease-out infinite}
@keyframes gr{0%{transform:scaleY(0);opacity:0}8%{opacity:1}85%{opacity:1}100%{opacity:0}}
.pop{transform-box:fill-box;transform-origin:center;animation:pop 7s ease-out infinite}
@keyframes pop{0%,44%{transform:scale(0);opacity:0}52%{transform:scale(1.25);opacity:1}58%{transform:scale(1)}85%{opacity:1}100%{opacity:0}}
.cf{animation:cf 7s ease-out infinite}
@keyframes cf{0%,46%{transform:translate(0,0);opacity:0}50%{opacity:1}80%{opacity:1}100%{transform:translate(var(--dx),var(--dy));opacity:0}}
/* the card */
main{position:relative;z-index:5;min-height:100vh;display:grid;place-items:center;padding:64px 16px 28px}
.lcard{width:100%;max-width:390px;background:rgba(255,255,255,.9);border:1px solid #fff;border-radius:22px;padding:28px 26px;
box-shadow:0 18px 44px rgba(15,23,42,.16);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.logo{width:72px;height:72px;margin:0 auto 10px;display:block;filter:drop-shadow(0 8px 14px rgba(16,185,129,.35));
animation:bob 4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-5px)}}
.wm{font-family:Poppins,system-ui,sans-serif;font-weight:700;letter-spacing:.4px;text-align:center;font-size:30px;margin:0 0 22px;
direction:ltr;unicode-bidi:isolate}
h2{font-size:16px;font-weight:600;margin:0 0 14px;text-align:center}
label{display:block;font-size:13px;color:var(--muted);margin:0 0 5px}
.en{direction:ltr;text-align:left}.en label{font-family:Poppins,system-ui,sans-serif;font-weight:500}
.in{position:relative;margin-bottom:13px}
.in svg{position:absolute;top:50%;transform:translateY(-50%);width:17px;height:17px;color:#94a3b8;pointer-events:none}
.en .in svg{left:13px}.in svg{right:13px}.en .in svg{right:auto}
input{width:100%;font:inherit;font-size:15.5px;background:#f1f5f9;color:var(--ink);border:1px solid var(--line);
border-radius:12px;padding:11px 40px 11px 12px;outline:none;transition:border-color .15s,box-shadow .15s,background .15s}
.en input{padding:11px 12px 11px 40px;font-family:Poppins,"Changa",system-ui,sans-serif}
input:focus{background:#fff;border-color:rgba(16,185,129,.6);box-shadow:0 0 0 3px rgba(16,185,129,.14)}
button{font:inherit;cursor:pointer;border:0}
.btn{display:block;width:100%;border-radius:12px;padding:11px;font-weight:700;color:#fff;margin-top:4px;
background:linear-gradient(90deg,var(--a2),var(--a1));box-shadow:0 8px 18px rgba(16,185,129,.32)}
.btn:hover{filter:brightness(1.06)}
.lnk{display:block;width:100%;background:none;color:var(--muted);font-size:13.5px;margin-top:12px;padding:4px}
.lnk:hover{color:var(--ink)}a{color:var(--muted);font-size:13.5px}
.msg{border-radius:12px;padding:9px 12px;font-size:13.5px;margin:0 0 14px;text-align:center}
.msg.bad{background:#fff1f2;color:#be123c;border:1px solid #fecdd3}
.msg.good{background:#f0fdf4;color:#15803d;border:1px solid #bbf7d0}
.center{text-align:center;margin-top:10px}
/* small screens: the card alone under the tape */
@media (max-width:1000px){.scene{display:none}}
@media (prefers-reduced-motion:reduce){.tape .mv,.dr,.gr,.pop,.cf,.logo{animation:none}.dr{stroke-dashoffset:0}}