/* واجهة الدخول.
   لا خط خارجي ولا مورد خارجي: الصفحة تعمل كاملةً من هذا الخادم، وهو ما يجعل
   CSP بلا unsafe-inline ممكنةً فعلاً لا شعاراً.

   ⚠️ وهذا الملف يُنزّله الزائر ويقرأه. ما يُكتب هنا يُقرأ — فلا اسم ولا وصف
      لما خلف البوّابة في أي تعليق. نظّفتُ الـHTML أولاً ونسيتُ أن الورقة
      والسكربت يُجرّان معها. */

:root {
  --bg:        #05060b;
  --ink:       #eef1f8;
  --ink-mute:  #8b93a8;
  --line:      #1b1f2e;
  --glass:     rgba(20, 24, 38, .62);
  --accent:    #6ea8ff;
  --accent-2:  #a578ff;
  --ok:        #3ddc97;
  --bad:       #ff6b7a;
  --r:         20px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "SF Arabic", "Noto Naskh Arabic", "Segoe UI", system-ui, sans-serif;
  display: grid;
  place-items: center;
  padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
  overflow: hidden;
}

/* ── الشفق ───────────────────────────────────────────────────────────────
   ثلاث بقع مموّهة تتحرّك ببطء شديد. الحركة أبطأ ممّا يُلاحَظ عن قصد: خلفيةٌ
   تسحب العين تنافس الشيء الذي جاء المستخدم لأجله. */
.aurora { position: fixed; inset: -30vmax; z-index: 0; filter: blur(90px); opacity: .55; }
.aurora span { position: absolute; border-radius: 50%; mix-blend-mode: screen; }
.aurora span:nth-child(1) {
  width: 52vmax; height: 52vmax; left: 6%;  top: 8%;
  background: radial-gradient(circle, #2b4fd6 0%, transparent 62%);
  animation: drift1 48s ease-in-out infinite;
}
.aurora span:nth-child(2) {
  width: 44vmax; height: 44vmax; right: 4%; top: 24%;
  background: radial-gradient(circle, #7a3ad6 0%, transparent 62%);
  animation: drift2 64s ease-in-out infinite;
}
.aurora span:nth-child(3) {
  width: 38vmax; height: 38vmax; left: 32%; bottom: 2%;
  background: radial-gradient(circle, #0f7f8f 0%, transparent 62%);
  animation: drift3 56s ease-in-out infinite;
}
@keyframes drift1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(8vmax,5vmax) scale(1.12)} }
@keyframes drift2 { 0%,100%{transform:translate(0,0) scale(1.06)} 50%{transform:translate(-7vmax,7vmax) scale(.94)} }
@keyframes drift3 { 0%,100%{transform:translate(0,0) scale(.96)} 50%{transform:translate(5vmax,-6vmax) scale(1.1)} }

/* ── البطاقة ──────────────────────────────────────────────────────────── */
.card {
  position: relative; z-index: 1;
  width: min(420px, 100%);
  padding: 38px 30px 24px;
  border-radius: var(--r);
  background: var(--glass);
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  border: 1px solid var(--line);
  box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
  text-align: center;
  animation: rise .7s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes rise { from { opacity:0; transform: translateY(14px) scale(.985) } }

h1 { margin: 18px 0 6px; font-size: 1.6rem; font-weight: 700; letter-spacing: -.01em; }
.sub { margin: 0 0 26px; color: var(--ink-mute); font-size: .93rem; }

/* ── الدرع ────────────────────────────────────────────────────────────────
   ثلاثة أقواس ساكنة تدور عند التحقّق بسرعات مختلفة — الحركة تقول «يجري شيء»
   بلا شريط تقدّمٍ يكذب بنسبة مئوية لا يعرفها. */
.shield { width: 96px; height: 96px; margin: 0 auto; }
.shield svg { width: 100%; height: 100%; overflow: visible; }
.ring { fill: none; stroke: var(--accent); stroke-width: 1.4; opacity: .34;
        transform-origin: 60px 60px; transition: stroke .35s, opacity .35s; }
.r1 { stroke-dasharray: 96 190; }
.r2 { stroke-dasharray: 62 152; opacity: .5; }
.r3 { stroke-dasharray: 40 98;  opacity: .66; }
.dotc { fill: var(--accent); opacity: .85; transition: fill .35s; }

.busy .r1 { animation: spin 3.4s linear infinite; }
.busy .r2 { animation: spin 2.4s linear infinite reverse; }
.busy .r3 { animation: spin 1.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.ok  .ring { stroke: var(--ok); }  .ok  .dotc { fill: var(--ok); }
.bad .ring { stroke: var(--bad); } .bad .dotc { fill: var(--bad); }
.bad { animation: shake .42s cubic-bezier(.36,.07,.19,.97); }
@keyframes shake { 10%,90%{transform:translateX(-2px)} 30%,70%{transform:translateX(4px)} 50%{transform:translateX(-5px)} }

/* ── الأزرار ─────────────────────────────────────────────────────────── */
.primary {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 18px; border: 0; border-radius: 14px; cursor: pointer;
  font: inherit; font-weight: 650; font-size: 1rem; color: #0a0d16;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 10px 26px rgba(110,168,255,.24);
  transition: transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .16s, filter .16s;
}
.primary:hover  { filter: brightness(1.07); box-shadow: 0 14px 34px rgba(110,168,255,.32); }
.primary:active { transform: scale(.977); }
.primary:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.primary.ghost {
  margin-top: 4px; color: var(--ink);
  background: rgba(255,255,255,.05); border: 1px solid var(--line); box-shadow: none;
}
.i { width: 19px; height: 19px; fill: currentColor; }

.link {
  margin: 14px 0 0; padding: 8px; width: 100%;
  background: none; border: 0; color: var(--ink-mute);
  font: inherit; font-size: .87rem; cursor: pointer; border-radius: 10px;
  transition: color .18s, background .18s;
}
.link:hover { color: var(--ink); background: rgba(255,255,255,.04); }

/* ── الطريقة الاحتياطية ──────────────────────────────────────────────── */
.fallback { margin-top: 26px; text-align: start; }
.fallback label { display: block; margin-bottom: 12px; }
.fallback span { display: block; margin-bottom: 6px; font-size: .82rem; color: var(--ink-mute); }
.fallback input {
  width: 100%; padding: 13px 14px; border-radius: 12px;
  background: rgba(0,0,0,.34); border: 1px solid var(--line);
  color: var(--ink); font: inherit; font-size: 1rem;
  transition: border-color .18s, box-shadow .18s;
}
.fallback input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(110,168,255,.16);
}
/* الرمز أرقام لاتينية دائماً ومن اليسار — حقلٌ من ستّ خانات في سياق RTL
   تُقلَب خاناته بصرياً فيقرأ المستخدم رمزه معكوساً ويظنّه خاطئاً. */
#totp { direction: ltr; text-align: center; letter-spacing: .5em; font-variant-numeric: tabular-nums; }

.msg { min-height: 1.2em; margin: 14px 0 0; font-size: .87rem; color: var(--ink-mute); }
.msg.bad { color: var(--bad); }
.msg.ok  { color: var(--ok); }

footer {
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: .76rem; color: var(--ink-mute);
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok);
       box-shadow: 0 0 0 0 rgba(61,220,151,.55); animation: pulse 2.6s ease-out infinite; }
@keyframes pulse { 70%{box-shadow:0 0 0 8px rgba(61,220,151,0)} 100%{box-shadow:0 0 0 0 rgba(61,220,151,0)} }

/* ── من يطلب سكوناً يحصل عليه ─────────────────────────────────────────
   ليست لباقة: الحركة المستمرّة تُسبّب دواراً لبعض الناس، والنظام يُبلّغنا
   بتفضيلهم صراحةً — فتجاهله عطلٌ في الوصولية لا اختيار جمالي. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media (max-width: 420px) {
  .card { padding: 30px 22px 20px; border-radius: 16px; }
  .shield { width: 78px; height: 78px; }
  h1 { font-size: 1.42rem; }
}


/* ── زرّ مفتاح المرور: أيقونة بلا كلمة ────────────────────────────────────
   يبقى الطريق السريع متاحاً لمن سجّل مفتاحاً، ولا يُضيف نصّاً يقرؤه غريب.
   وaria-label في الـHTML يجعله مفهوماً لقارئ الشاشة دون أن يظهر على الشاشة —
   الوصولية والكتمان لا يتعارضان هنا. */
.keybtn {
  margin: 18px auto 0; display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 12px; cursor: pointer;
  background: rgba(255,255,255,.05); border: 1px solid var(--line);
  color: var(--ink-mute); transition: color .18s, background .18s, transform .16s;
}
.keybtn svg { width: 19px; height: 19px; fill: currentColor; }
.keybtn:hover  { color: var(--ink); background: rgba(255,255,255,.09); }
.keybtn:active { transform: scale(.94); }
.keybtn:disabled { opacity: .45; cursor: not-allowed; }