:root{--bg:#F5F0E6;--ink:#121B2E;--muted:#5D6375;--line:#DCD1BA;--navy:#16264A;--navy2:#0F1B33;--gold:#C9A24B;--hi:#E6C77A;--lo:#B8923A;--danger:#A8322A;color-scheme:light}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font-family:'Cairo','Segoe UI',Tahoma,sans-serif;font-size:15px;line-height:1.6}
[hidden]{display:none!important}
.lg{display:grid;grid-template-columns:minmax(380px,460px) 1fr;min-height:100%}
.pane{grid-column:1;grid-row:1;display:grid;place-items:center;padding:40px 28px;background:var(--bg);position:relative;z-index:1;box-shadow:-20px 0 60px rgb(5 7 9 / .25)}
.scene{grid-column:2;grid-row:1;position:relative;overflow:hidden;background:#0B1224;min-height:280px}
.scene canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.scene-copy{position:absolute;inset-inline:0;bottom:9%;text-align:center;color:#F1EBDD;pointer-events:none}
.scene-copy b{display:block;font-size:64px;font-weight:800;line-height:1.1;background:linear-gradient(180deg,#F6E3A6,#C9A24B 60%,#B8923A);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:.5px}
.scene-copy span{font-size:17px;color:#A9B3C6;letter-spacing:.3px}
.card{width:100%;max-width:360px}
.mark{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;color:var(--gold);background:var(--navy2);box-shadow:0 0 0 1px rgb(201 162 75 / .5),0 0 0 6px rgb(201 162 75 / .1);margin-bottom:18px}
.mark svg{width:30px;height:30px}
h1{font-size:26px;font-weight:800;margin:0;line-height:1.3}
.sub{color:var(--muted);margin:4px 0 26px;display:flex;flex-direction:column;gap:2px}
.sub b{color:var(--ink);font-size:15.5px;font-weight:700}
.sub b:empty{display:none}
form{display:flex;flex-direction:column;gap:14px}
label{display:flex;flex-direction:column;gap:6px;font-size:13.5px;font-weight:600;color:#3A4152}
input{font:inherit;font-size:15.5px;color:var(--ink);background:#FFFDF8;border:1px solid var(--line);border-radius:12px;padding:12px 14px;width:100%;transition:border-color .15s,box-shadow .15s}
input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgb(201 162 75 / .2)}
input::placeholder{color:#9AA0AE}
.pw{position:relative;display:block}
.pw input{padding-inline-start:70px}
.eye{position:absolute;inset-inline-start:6px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--navy);font:inherit;font-size:12.5px;font-weight:700;padding:6px 10px;border-radius:8px;cursor:pointer}
.eye:hover{background:#EDE6D6}
.go{margin-top:6px;font:inherit;font-size:16px;font-weight:800;border:0;border-radius:12px;padding:13px;cursor:pointer;color:var(--navy2);background:linear-gradient(135deg,var(--hi),var(--lo));box-shadow:0 8px 22px rgb(184 146 58 / .35);transition:transform .12s,box-shadow .12s}
.go:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgb(184 146 58 / .42)}
.go:disabled{opacity:.6;cursor:wait;transform:none}
.go:focus-visible,.eye:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.err{margin-top:14px;background:#F6DEDA;color:var(--danger);border-radius:10px;padding:10px 12px;font-size:14px;font-weight:600}
.caps{margin:-6px 0 0;color:#8A5A0B;font-size:12.5px}
.intro{margin:0 0 4px;color:#3A4152;background:#EDE6D6;border-radius:10px;padding:10px 12px;font-size:14px}
.foot{margin-top:26px;color:var(--muted);font-size:12.5px;border-top:1px solid var(--line);padding-top:14px}
@media (max-width:820px){
  .lg{grid-template-columns:1fr;grid-template-rows:42vh auto}
  .scene{grid-column:1;grid-row:1}
  .pane{grid-column:1;grid-row:2;box-shadow:0 -20px 50px rgb(5 7 9 / .3);border-radius:22px 22px 0 0;margin-top:-22px;padding:28px 16px 36px}
  .scene-copy{bottom:12%}.scene-copy b{font-size:44px}
}
@media (prefers-reduced-motion:reduce){.go{transition:none}}

/* ── إطار نيون ذهبي حي حول الحقول ── */
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes neonSpin{to{--ang:360deg}}
@keyframes neonBreath{0%,100%{box-shadow:0 0 6px rgb(246 227 166 / .7),0 0 16px rgb(230 199 122 / .45),0 0 34px rgb(201 162 75 / .22)}50%{box-shadow:0 0 9px rgb(255 244 200 / .95),0 0 24px rgb(230 199 122 / .7),0 0 52px rgb(201 162 75 / .38)}}
.nf{position:relative;display:block;border-radius:14px;padding:2px;
  background:conic-gradient(from var(--ang),#5C4516 0deg,#E6C77A 60deg,#FFF4C8 90deg,#C9A24B 120deg,#5C4516 180deg,#B8923A 240deg,#FFF4C8 270deg,#E6C77A 300deg,#5C4516 360deg);
  animation:neonSpin 5s linear infinite,neonBreath 3.2s ease-in-out infinite}
.nf input{border:0!important;border-radius:12.5px;background:#FFFDF8;box-shadow:inset 0 1px 2px rgb(18 27 46 / .06)}
.nf input:focus{box-shadow:inset 0 1px 2px rgb(18 27 46 / .06)!important}
.nf:focus-within{animation:neonSpin 1.6s linear infinite;box-shadow:0 0 4px #FFF4C8,0 0 14px rgb(246 227 166 / .85),0 0 34px rgb(230 199 122 / .6),0 0 64px rgb(201 162 75 / .35)}
.pw.nf .eye{z-index:1}
/* البطاقة: حافة ذهبية خافتة متوهجة */
.neon-card{position:relative;padding:28px 26px;border-radius:22px;background:linear-gradient(180deg,#FBF8F1,#F5F0E6);box-shadow:0 0 0 1px rgb(201 162 75 / .35),0 0 24px rgb(201 162 75 / .14),0 30px 60px rgb(15 27 51 / .12)}
.go{position:relative;overflow:hidden}
.go::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgb(255 255 255 / .55) 50%,transparent 70%);transform:translateX(120%);animation:sheen 4.5s ease-in-out infinite}
@keyframes sheen{0%,60%{transform:translateX(120%)}100%{transform:translateX(-120%)}}
.mark{animation:neonBreath 3.2s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.nf,.nf:focus-within,.mark,.go::after{animation:none}}
@media (max-width:820px){.neon-card{padding:22px 16px;box-shadow:0 0 0 1px rgb(201 162 75 / .3),0 0 18px rgb(201 162 75 / .12)}}