/* تصميم الدخول 11 «نفق البيانات» (اختيار المالك 2026/11/05 من design/login-motion.html): ألوان صفحة دخول الموافقات،
   مستندات تخرج من عمق النفق نحو الناظر بلا توقف، ولا اسم أي شركة. */
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:Cairo,system-ui,sans-serif;background:#071521;color:#E6EEF8;overflow:hidden;--a1:#2CC5D9;--a2:#7BE3EE;--g:44,197,217}
.ltr{direction:ltr;unicode-bidi:isolate}
.mono{font-family:Consolas,"Cascadia Mono",monospace;letter-spacing:.3px}
.lt-stage{position:fixed;inset:0;background:
  radial-gradient(55% 60% at 22% 42%,rgba(var(--g),.10),transparent 65%),
  radial-gradient(60% 60% at 80% 70%,rgba(var(--g),.08),transparent 60%),
  linear-gradient(160deg,#0D2230 0%,#0A1B27 45%,#06121C 100%)}
#lt-bg{position:absolute;inset:0;inline-size:100%;block-size:100%}
.lt-layout{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(360px,1fr);block-size:100%;padding:56px 5vw 36px;gap:3vw}
html[dir=ltr] .lt-layout{grid-template-columns:minmax(360px,1fr) minmax(0,1.5fr)}
html[dir=ltr] .lt-side{order:2}
.lt-side{display:flex;flex-direction:column;min-block-size:0}
.lt-tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--a2);border:1px solid rgba(var(--g),.5);background:rgba(var(--g),.08);border-radius:999px;padding:3px 12px}
.lt-hero h1{font-size:clamp(26px,2.6vw,40px);line-height:1.35;margin:14px 0 8px;font-weight:800;color:#fff}
.lt-hero h1 em{font-style:normal;background:linear-gradient(90deg,#1FB5CF,#86E8F2);-webkit-background-clip:text;background-clip:text;color:transparent}
.lt-hero p{margin:0;color:#A3B6C6;font-size:14.5px;line-height:1.9;max-inline-size:580px}
.lt-stats{display:flex;gap:44px;margin-block-start:18px}
.lt-stats b{display:block;font-size:24px;font-weight:800;color:#fff;line-height:1.2}
.lt-stats span{font-size:12.5px;color:#8FA6B8}
.lt-scene{flex:1;position:relative;min-block-size:320px;margin-block-start:8px;overflow:hidden;
  -webkit-mask-image:radial-gradient(75% 75% at 50% 50%,#000 60%,transparent);mask-image:radial-gradient(75% 75% at 50% 50%,#000 60%,transparent)}

/* بطاقة الدخول */
.lt-cardwrap{display:grid;place-items:center}
.lt-card{inline-size:min(430px,100%);border-radius:16px;padding:30px 30px 26px;background:linear-gradient(180deg,rgba(22,44,58,.75),rgba(11,27,38,.82));
  border:1px solid rgba(255,255,255,.09);box-shadow:0 30px 80px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.05);backdrop-filter:blur(14px)}
.lt-top{display:flex;justify-content:space-between;align-items:center;margin-block-end:22px}
.lt-top img{block-size:46px}
.lt-top form{margin:0}
.lt-flag{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:#C9D6E6;border-radius:7px;padding:4px 12px;font:600 12px Cairo;cursor:pointer}
.lt-card h2{margin:0;font-size:24px;font-weight:800;color:#fff}
.lt-sub{color:#8FA6B8;font-size:13px;margin:2px 0 18px}
.lt-err{display:flex;gap:8px;align-items:center;border:1px solid rgba(251,113,133,.45);background:rgba(225,29,72,.12);color:#FECDD3;border-radius:9px;padding:8px 12px;font-size:13px;margin-block-end:6px}
.lt-card label.f{display:block;font-size:12.5px;color:#B8C8D6;margin:14px 0 6px}
.lt-field{position:relative}
.lt-field input{inline-size:100%;block-size:48px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:rgba(3,13,20,.55);color:#fff;padding:0 14px;font:14px Cairo;outline:none;transition:border .15s,box-shadow .15s}
.lt-field input:focus{border-color:var(--a1);box-shadow:0 0 0 3px rgba(var(--g),.2)}
.lt-field .pw-eye,.lt-field button{color:#8FA6B8}
.lt-row{display:flex;justify-content:space-between;align-items:center;margin-block-start:14px;font-size:12.5px;color:#A3B6C6}
.lt-row label{display:inline-flex;gap:6px;align-items:center;cursor:pointer}
.lt-row input{accent-color:var(--a1)}
.lt-row a{color:var(--a2);text-decoration:none}
.lt-go{margin-block-start:20px;inline-size:100%;block-size:50px;border:0;border-radius:10px;cursor:pointer;font:800 15px Cairo;color:#04202A;
  background:linear-gradient(90deg,#3CCBDD,#8BE6EF);box-shadow:0 10px 30px rgba(var(--g),.28);display:flex;align-items:center;justify-content:center;gap:8px}
.lt-go:disabled{opacity:.6;cursor:not-allowed}
.lt-secure{margin-block-start:14px;text-align:center;font-size:12px;color:#7F97A9}

/* النفق: كل مستند يولد في العمق ويقترب ثم يتلاشى، وحركته مزاحة في الزمن فلا يفرغ النفق أبدا */
.glass{background:linear-gradient(180deg,rgba(24,52,68,.86),rgba(11,30,42,.9));border:1px solid rgba(123,227,238,.14);border-radius:14px;
  box-shadow:0 22px 50px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.06)}
.ico{display:inline-grid;place-items:center;inline-size:38px;block-size:38px;border-radius:10px;color:#fff;font-size:19px;flex:none;
  background:linear-gradient(135deg,var(--c1),var(--c2));box-shadow:0 6px 16px rgba(0,0,0,.3)}
.tunnel{position:absolute;inset:0;perspective:700px;direction:ltr}
.tunnel .hole{position:absolute;inset-block-start:50%;inset-inline-start:50%;inline-size:220px;block-size:220px;margin:-110px;border-radius:50%;background:radial-gradient(circle,rgba(var(--g),.28),transparent 70%)}
.tx{direction:rtl;inline-size:250px;padding:12px 14px;display:flex;gap:10px;align-items:center;position:absolute;inset-block-start:50%;inset-inline-start:50%;margin:-35px -125px;
  opacity:0;animation:fly var(--d) linear infinite;animation-delay:var(--dl);will-change:transform,opacity}
html[dir=ltr] .tx{direction:ltr}
.tx b{display:block;color:#fff;font-size:13.5px;white-space:nowrap}
.tx small{display:block;color:#8FA6B8;font-size:11px}
.tx .amt{margin-inline-start:auto;text-align:end;font-weight:800;color:#fff;font-size:13.5px;white-space:nowrap}
.tx .amt small{display:inline;font-weight:600;color:var(--a2)}
@keyframes fly{0%{opacity:0;transform:translate3d(var(--x),var(--y),-1600px)}12%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translate3d(calc(var(--x)*2.6),calc(var(--y)*2.6),420px)}}

.lt-preview{position:fixed;inset-block-end:14px;inset-inline:0;margin-inline:auto;inline-size:max-content;z-index:20;display:flex;gap:14px;align-items:center;
  background:rgba(4,14,22,.85);border:1px solid rgba(var(--g),.35);border-radius:10px;padding:8px 14px;font-size:13px}
.lt-preview a{color:var(--a2)}

@media (prefers-reduced-motion:reduce){.tx{animation-play-state:paused}}
@media (max-width:980px){body{overflow:auto}.lt-stage{position:relative;min-block-size:100vh}.lt-layout,html[dir=ltr] .lt-layout{grid-template-columns:1fr;padding:30px 18px}.lt-scene{display:none}.lt-cardwrap{order:-1}}