/* =========================================================
   auth.css — صفحات الدخول/التسجيل (شاشة مقسومة)
   ========================================================= */
:root{
  --mint:#2FBF9F; --mint-d:#1FA487; --mint-l:#EAFBF5;
  --ink:#0E3B34; --ink-2:#08261C;
  --text:#12241F; --muted:#5F7770; --line:#E1E9E6; --surface:#fff;
  --red:#C0392B; --red-l:#FDEDEB; --green:#1F7A44; --green-l:#E9F7EE; --amber:#C98A18; --amber-l:#FDF4E3;
  --f-disp:'Cairo',system-ui,sans-serif; --f-body:'Tajawal',system-ui,sans-serif;
}
*{ box-sizing:border-box; margin:0; padding:0; }
body{ font-family:var(--f-body); color:var(--text); background:var(--surface); line-height:1.85; }
a{ color:inherit; text-decoration:none; }
h1{ font-family:var(--f-disp); line-height:1.4; }
:focus-visible{ outline:2.5px solid var(--mint); outline-offset:2px; border-radius:8px; }

.split{ display:grid; grid-template-columns:minmax(420px,38%) 1fr; min-height:100dvh; }
/* النموذج في جهة البداية (يمين RTL) واللوحة في الجهة المقابلة */
.form-col{ order:1; } .pane{ order:2; }

/* ── لوحة الهوية ───────────────────────────────────────── */
.pane{ position:relative; overflow:hidden; background:linear-gradient(165deg,#14584A 0%,var(--ink) 46%,var(--ink-2) 100%);
       display:flex; flex-direction:column; align-items:center; justify-content:center; padding:44px; color:#CFE9E1; }
.pane-deco{ position:absolute; inset:0; pointer-events:none; color:#7FE3C6; }
.pane-deco .gear{ position:absolute; fill:currentColor; }
.pane-deco .g1{ width:120px; height:120px; top:8%; inset-inline-start:9%; opacity:.5; animation:spin 46s linear infinite; }
.pane-deco .g2{ width:96px; height:96px; top:16%; inset-inline-end:14%; opacity:.55; animation:spin 60s linear infinite reverse; }
.pane-deco .blob{ position:absolute; border-radius:50%; filter:blur(3px); }
.pane-deco .b1{ width:16px; height:16px; background:rgba(47,191,159,.5); bottom:22%; inset-inline-start:16%; }
.pane-deco .b2{ width:10px; height:10px; background:rgba(255,255,255,.35); top:30%; inset-inline-end:26%; }
@keyframes spin{ to{ transform:rotate(360deg); } }
/* ── الافتتاحية: اسم العلامة ─────────────────────────── */
.pane-brand{ position:relative; z-index:2; margin-bottom:22px; text-align:center;
             font-family:var(--f-disp); font-weight:800; color:#fff;
             font-size:clamp(28px,3.4vw,44px); letter-spacing:-.015em; line-height:1.3;
             display:flex; align-items:baseline; justify-content:center; gap:.32em; flex-wrap:wrap; }
.pane-brand .w{ display:inline-block; opacity:0; animation:brandWord .85s cubic-bezier(.2,.85,.25,1) both; }
.pane-brand .w1{ animation-delay:.15s; }
.pane-brand .w2{ animation-delay:.32s; color:var(--mint); }
.pane-brand .w3{ animation-delay:.49s; color:var(--mint); }
.pane-brand .rule{ position:absolute; bottom:-12px; inset-inline-start:50%; transform:translateX(50%) scaleX(0);
                   transform-origin:center; width:min(230px,60%); height:3px; border-radius:2px;
                   background:linear-gradient(90deg,transparent,var(--mint),transparent);
                   animation:brandRule .8s cubic-bezier(.2,.85,.25,1) .78s both; }
@keyframes brandWord{ from{ opacity:0; transform:translateY(16px) scale(.96); filter:blur(4px); }
                      to{ opacity:1; transform:none; filter:none; } }
@keyframes brandRule{ to{ transform:translateX(50%) scaleX(1); } }

.art{ width:min(560px,86%); position:relative; z-index:1; }
.art svg{ width:100%; height:auto; display:block; filter:drop-shadow(0 30px 46px rgba(0,0,0,.35)); }
.pane-tag{ position:relative; z-index:1; margin-top:26px; font-family:var(--f-disp); font-weight:700; font-size:16.5px;
           color:#EAF7F3; text-align:center; max-width:42ch; text-wrap:balance; }

/* ── عمود النموذج ──────────────────────────────────────── */
.form-col{ display:flex; align-items:center; justify-content:center; padding:40px 44px; background:var(--surface); }
.form-inner{ width:100%; max-width:400px; }
.head-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:34px; }
.logo{ display:flex; align-items:center; gap:9px; }
.logo .mark{ width:36px; height:36px; border-radius:11px; background:var(--ink); display:grid; place-items:center; }
.logo b{ font-family:var(--f-disp); font-size:19px; font-weight:800; letter-spacing:-.01em; }
.logo b span{ color:var(--mint-d); }
/* مبدّل اللغة */
.lang-pick{ position:relative; }
.lang{ display:inline-flex; align-items:center; gap:7px; font-family:var(--f-body); font-size:12.5px; font-weight:700;
       color:var(--muted); background:transparent; border:1px solid var(--line); border-radius:999px;
       padding:7px 13px; white-space:nowrap; cursor:pointer; transition:border-color .15s, color .15s; }
.lang:hover{ border-color:var(--mint); color:var(--text); }
.lang-menu{ position:absolute; top:calc(100% + 8px); inset-inline-end:0; min-width:150px; background:var(--surface);
            border:1px solid var(--line); border-radius:13px; padding:6px; z-index:30;
            box-shadow:0 18px 40px -22px rgba(14,59,52,.5);
            opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .16s, transform .16s, visibility .16s; }
.lang-menu.open{ opacity:1; visibility:visible; transform:none; }
.lang-menu a{ display:block; padding:9px 13px; border-radius:9px; font-size:14px; font-weight:600; color:var(--text); }
.lang-menu a:hover{ background:var(--mint-l); color:var(--mint-d); }
.lang-menu a.on{ background:var(--ink); color:#fff; }

/* اللغات اللاتينية والصينية: مقاسات أنسب */
html[lang="en"] body, html[lang="zh"] body{ line-height:1.75; }
html[lang="zh"] .pane-brand{ letter-spacing:.02em; }
html[lang="en"] .pane-brand .w1, html[lang="zh"] .pane-brand .w1{ margin-inline-end:-.18em; }
html:not([lang="ar"]) .fld input{ text-align:start; }

h1{ font-size:24px; font-weight:800; letter-spacing:-.01em; }
.lede{ color:var(--muted); font-size:14.5px; margin:6px 0 26px; }

.fld{ margin-bottom:15px; }
.fld label{ display:block; font-size:13px; font-weight:600; color:var(--muted); margin-bottom:6px; }
.fld label .req{ color:var(--red); }
.fld input, .fld select{
  font-family:var(--f-body); font-size:14.5px; color:var(--text); background:var(--surface);
  border:1px solid #D6DEDB; border-radius:11px; padding:12px 14px; width:100%;
  transition:border-color .15s, box-shadow .15s; }
.fld input:focus, .fld select:focus{ outline:none; border-color:var(--mint);
  box-shadow:0 0 0 3.5px color-mix(in srgb, var(--mint) 20%, transparent); }
.fld .hint{ font-size:12px; color:var(--muted); margin-top:5px; display:block; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }

.terms{ font-size:13px; color:var(--muted); margin:6px 0 18px; }
.agree{ display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--muted);
        line-height:1.8; margin:10px 0 20px; cursor:pointer; }
.agree input{ width:19px; height:19px; margin-top:5px; flex:none; accent-color:var(--mint-d); cursor:pointer; }
.agree a{ color:var(--mint-d); font-weight:700; }
.agree .v{ color:#9AACA7; font-size:12px; }
.agree:has(input:focus-visible){ outline:2.5px solid var(--mint); outline-offset:4px; border-radius:8px; }
.terms a{ color:var(--mint-d); font-weight:700; }

.btn{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
      font-family:var(--f-disp); font-weight:700; font-size:15.5px; padding:13px 20px; border-radius:12px;
      background:var(--ink); color:#fff; border:0; cursor:pointer; transition:background .18s, transform .12s; }
.btn:hover{ background:#0A2F29; }
.btn:active{ transform:translateY(1px); }
.btn.mint{ background:var(--mint); color:#04231C; }
.btn.mint:hover{ background:var(--mint-d); }

.or{ display:flex; align-items:center; gap:12px; margin:20px 0 14px; color:var(--muted); font-size:12.5px; }
.or::before,.or::after{ content:""; flex:1; height:1px; background:var(--line); }
.btn.face{ background:transparent; color:var(--text); border:1.5px solid var(--line); }
.btn.face:hover{ border-color:var(--mint); background:var(--mint-l); color:var(--mint-d); }
.btn.face svg{ flex:none; }

.alt{ text-align:center; font-size:14px; color:var(--muted); margin-top:20px; }
.alt a{ color:var(--mint-d); font-weight:700; }
.alt .sep{ display:block; margin-top:8px; font-size:13px; }
.copy{ margin-top:40px; text-align:center; font-size:12px; color:#8FA39D; }

.alert{ border-radius:11px; padding:12px 15px; font-size:13.5px; font-weight:600; margin-bottom:18px; }
.alert.err{ background:var(--red-l); color:var(--red); }
.alert.ok{ background:var(--green-l); color:var(--green); }
.alert.warn{ background:var(--amber-l); color:var(--amber); }

/* ── الجوال ────────────────────────────────────────────── */
@media (max-width:980px){
  .split{ grid-template-columns:1fr; }
  .form-col{ order:1; } .pane{ order:2; }
  .pane{ padding:30px 24px 26px; min-height:auto; }
  .art{ width:min(420px,80%); }
  .pane-tag{ font-size:14.5px; margin-top:16px; }
  .pane-brand{ font-size:26px; margin-bottom:16px; }
  .pane-deco .g1,.pane-deco .g2{ width:70px; height:70px; }
  .form-col{ padding:30px 22px 40px; }
}
@media (max-width:520px){
  .grid-2{ grid-template-columns:1fr; }
  .art{ display:none; }
  .pane{ padding:22px; }
}

/* ══ حركة لوحة الهوية ══════════════════════════════════════
   كلها transform/opacity فقط — لا تُعيد تخطيط الصفحة        */
.art svg{ overflow:visible; }

/* دخول المشهد */
.a-window{ transform-origin:260px 166px; animation:sceneIn .9s cubic-bezier(.2,.8,.25,1) .95s both, floatY 7s ease-in-out 2s infinite; }
@keyframes sceneIn{ from{ opacity:0; transform:translateY(18px) scale(.97); } to{ opacity:1; transform:none; } }
@keyframes floatY{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }

/* الظل يتنفّس مع طفو النافذة */
.a-shadow{ transform-origin:260px 336px; animation:shadowPulse 7s ease-in-out 2s infinite; }
@keyframes shadowPulse{ 0%,100%{ transform:scaleX(1); opacity:.45; } 50%{ transform:scaleX(.93); opacity:.3; } }

/* بطاقات الإحصاء تظهر تباعاً */
.a-stat{ opacity:0; animation:popIn .55s cubic-bezier(.2,.9,.3,1.2) both; }
.a-stat.s1{ animation-delay:1.4s; } .a-stat.s2{ animation-delay:1.55s; } .a-stat.s3{ animation-delay:1.7s; }
@keyframes popIn{ from{ opacity:0; transform:translateY(10px) scale(.92); } to{ opacity:1; transform:none; } }

/* صفوف الموظفين تنزلق من جهة البداية */
.a-row{ opacity:0; animation:rowIn .6s cubic-bezier(.2,.8,.25,1) both; }
.a-row.r1{ animation-delay:1.85s; } .a-row.r2{ animation-delay:2s; } .a-row.r3{ animation-delay:2.15s; }
@keyframes rowIn{ from{ opacity:0; transform:translateX(16px); } to{ opacity:1; transform:none; } }

/* ومضة ضوء تمسح اللوحة كل بضع ثوانٍ */
.a-sweep{ opacity:0; animation:sweep 6.5s ease-in-out 3.2s infinite; }
@keyframes sweep{
  0%{ opacity:0; transform:translateX(-40px); }
  8%{ opacity:.5; }
  28%{ opacity:0; transform:translateX(330px); }
  100%{ opacity:0; transform:translateX(330px); } }

/* البطاقتان العائمتان — طوران متعاكسان */
.a-float{ opacity:0; animation:cardIn .7s cubic-bezier(.2,.8,.25,1) both, bob 5.5s ease-in-out infinite; }
.a-float.f-alert{ animation-delay:2.3s, 3.1s; }
.a-float.f-ok{ animation-delay:2.5s, 3.9s; }
@keyframes cardIn{ from{ opacity:0; transform:translateY(14px) scale(.94); } to{ opacity:1; transform:none; } }
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }

/* نبض هالة التنبيه */
.a-pulse{ transform-origin:56px 222px; animation:pulse 2.6s ease-in-out 3s infinite; }
@keyframes pulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.16); opacity:.75; } }

/* علامة الاعتماد تُرسم */
.a-check{ stroke-dasharray:24; stroke-dashoffset:24; animation:draw .6s ease-out 3.1s forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }

/* تمايل النبتة */
.a-leaf{ transform-origin:64px 336px; animation:sway 6s ease-in-out infinite; }
@keyframes sway{ 0%,100%{ transform:rotate(-1.6deg); } 50%{ transform:rotate(2.2deg); } }

/* الجملة تصعد */
.a-tag{ opacity:0; animation:tagIn .8s cubic-bezier(.2,.8,.25,1) 2.5s both; }
@keyframes tagIn{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }

/* الفقاعات الزخرفية تسبح */
.pane-deco .b1{ animation:drift 9s ease-in-out infinite; }
.pane-deco .b2{ animation:drift 11s ease-in-out 1.5s infinite reverse; }
@keyframes drift{ 0%,100%{ transform:translate(0,0); opacity:.5; } 50%{ transform:translate(14px,-18px); opacity:1; } }

@media (prefers-reduced-motion: reduce){
  .pane-deco .gear, .pane-deco .blob, .a-window, .a-shadow, .a-stat, .a-row,
  .a-sweep, .a-float, .a-pulse, .a-check, .a-leaf, .a-tag,
  .pane-brand .w, .pane-brand .rule{ animation:none !important; opacity:1 !important; transform:none !important; }
  .a-check{ stroke-dashoffset:0; }
  .pane-brand .rule{ transform:translateX(50%) scaleX(1) !important; }
}

/* ── الوضع الليلي ──────────────────────────────────────── */
@media (prefers-color-scheme: dark){
  :root{ --surface:#0F1D1A; --text:#E7F0ED; --muted:#93A9A3; --line:#1E332E; }
  .fld input,.fld select{ background:#132622; border-color:#24403A; color:#E7F0ED; }
  .btn{ background:var(--mint); color:#04231C; }
  .btn:hover{ background:var(--mint-d); }
  .logo .mark{ background:#12312A; }
  .copy{ color:#6E837D; }
}