/* ============================================================
   إقرار — المشاهد الداكنة ثلاثية الأبعاد (الرئيسية · الدخول · بوابة المنسوبين)
   ============================================================ */
.dark {
  color: #e6f2f6;
  background:
    radial-gradient(900px 620px at 18% 8%, rgba(23,179,141,.34), transparent 60%),
    radial-gradient(760px 600px at 92% 96%, rgba(200,160,74,.26), transparent 60%),
    radial-gradient(500px 400px at 60% 40%, rgba(43,108,176,.16), transparent 60%),
    linear-gradient(160deg, #0c3549 0%, #061b27 70%);
}
.dark h1, .dark h2 { color: #fff; }
.dark .muted { color: #93b3c1; }

/* شبكة أرضية خفيفة تعطي عمقاً */
.gridfloor { position: absolute; inset: auto 0 0 0; height: 55%; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 46px 46px; transform: perspective(500px) rotateX(62deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 85%); mask-image: linear-gradient(to top, #000 10%, transparent 85%); }

/* ---------- المشهد: كومة أوراق متساوية القياس ---------- */
.scene { position: relative; height: 540px; perspective: 1700px; display: grid; place-items: center; }
.iso { position: relative; width: 290px; height: 390px; transform-style: preserve-3d;
  transform: rotateX(calc(56deg + var(--my, 0) * -7deg)) rotateZ(calc(-33deg + var(--mx, 0) * 9deg));
  transition: transform .25s ease-out; animation: isoIn 1.3s cubic-bezier(.2,.9,.2,1) backwards; }
@keyframes isoIn { from { opacity: 0; transform: rotateX(90deg) rotateZ(-90deg) scale(.6); } }
.iso .sheet { position: absolute; inset: 0; border-radius: 22px; transform: translateZ(calc(var(--z) * 1px));
  background: var(--bg, #fff); box-shadow: 0 0 0 1px rgba(255,255,255,.18) inset, 0 8px 0 var(--edge, rgba(0,0,0,.25)); animation: floaty 6s ease-in-out infinite; animation-delay: calc(var(--z) * -18ms); }
@keyframes floaty { 50% { transform: translateZ(calc(var(--z) * 1px + 12px)); } }
.iso .s0 { --z: 0;   --bg: #0d3b52; --edge: #04141d; }
.iso .s1 { --z: 30;  --bg: #146b5a; --edge: #06322a; }
.iso .s2 { --z: 60;  --bg: #e9d59a; --edge: #9d7a2a; }
.iso .s3 { --z: 92;  --bg: linear-gradient(180deg, #ffffff, #f2f7f8); --edge: #b9c9d1; padding: 20px 20px 0; overflow: hidden; }
.iso .ph { height: 62px; margin: -20px -20px 16px; background: linear-gradient(135deg, #0e7c66, #0a5a4a); display: flex; align-items: center; gap: 12px; padding: 0 20px; }
.iso .ph i { width: 30px; height: 30px; border-radius: 9px; background: rgba(255,255,255,.9); box-shadow: 0 3px 0 rgba(0,0,0,.2); }
.iso .ph b { display: block; height: 7px; width: 96px; border-radius: 4px; background: rgba(255,255,255,.85); }
.iso .ph b + b { width: 60px; margin-top: 7px; opacity: .55; }
.iso .ttl { font-family: var(--disp); color: #0b2230; font-size: 26px; text-align: center; margin: 4px 0 12px; }
.iso .ln { height: 8px; border-radius: 4px; background: #dfe8ec; margin: 10px 0; }
.iso .ln.g { background: linear-gradient(90deg, #cfe9e1, #e6f2ee); }
.iso .sigsvg { position: absolute; right: 26px; left: 26px; bottom: 82px; height: 74px; }
.iso .sigsvg path { fill: none; stroke: #0d2a44; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 420; stroke-dashoffset: 420; animation: draw 3.4s 1.1s ease-in-out infinite; }
@keyframes draw { 0% { stroke-dashoffset: 420; } 46%, 84% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.iso .sigline { position: absolute; right: 26px; left: 26px; bottom: 76px; border-top: 2px dashed #c9d6dd; }
.iso .seal { position: absolute; left: 24px; bottom: 26px; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 35% 30%, #f3d98f, #b98d31); box-shadow: inset 0 2px 3px rgba(255,255,255,.6), 0 5px 0 #7a5a10; }
.iso .seal svg { width: 30px; height: 30px; }
.iso .shadow { position: absolute; inset: 40px -40px -60px 40px; border-radius: 40px; background: rgba(0,0,0,.55); filter: blur(34px); transform: translateZ(-30px); }

/* عناصر عائمة تواجه المشاهد دائماً */
.iso .fl { position: absolute; transform-style: preserve-3d; animation: floaty2 5s ease-in-out infinite; animation-delay: var(--d, 0s); }
.iso .fl > div { transform: rotateZ(33deg) rotateX(-56deg); }
@keyframes floaty2 { 0%, 100% { translate: 0 0 var(--zz, 140px); } 50% { translate: 0 0 calc(var(--zz, 140px) + 20px); } }
.pill3d { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 14px; font-weight: 700; font-size: 14px; color: #fff; white-space: nowrap;
  background: linear-gradient(180deg, #1fc39c, #0e7c66); box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 5px 0 #063f33, 0 18px 24px -6px rgba(0,0,0,.6); }
.pill3d.gold { background: linear-gradient(180deg, #f3d98f, #c8a04a); color: #3a2806; box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 5px 0 #8f6d1e, 0 18px 24px -6px rgba(0,0,0,.6); }
.pill3d.glass { background: rgba(255,255,255,.14); backdrop-filter: blur(6px); color: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.3) inset, 0 5px 0 rgba(0,0,0,.25), 0 18px 24px -6px rgba(0,0,0,.5); }
.pill3d svg { width: 18px; height: 18px; }
.qr3d { width: 92px; height: 92px; padding: 8px; border-radius: 16px; background: #fff; box-shadow: 0 6px 0 #b9c9d1, 0 22px 28px -8px rgba(0,0,0,.6); }
.qr3d svg { width: 100%; height: 100%; display: block; }

/* ---------- الصفحة الرئيسية ---------- */
.landing { position: relative; min-height: 100vh; overflow: hidden; }
.lnav { position: relative; z-index: 5; display: flex; align-items: center; gap: 14px; padding: 22px clamp(18px, 5vw, 64px); }
.lnav .brand { padding: 0; }
.lnav .brand b { font-size: 30px; }
.lnav .brand small { color: #93b3c1; }
.hero { position: relative; z-index: 3; display: grid; grid-template-columns: 1.02fr 1fr; align-items: center; gap: 30px;
  padding: 10px clamp(18px, 5vw, 64px) 60px; max-width: 1380px; margin: 0 auto; }
.hero h1 { font-size: clamp(42px, 6vw, 80px); line-height: 1.38; margin: 26px 0 22px; text-shadow: 0 4px 0 rgba(0,0,0,.25), 0 24px 40px rgba(0,0,0,.35); }
.hero h1 em { font-style: normal; background: linear-gradient(180deg, #f6e3a4, #c8a04a); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
.hero p.lead { font-size: 18px; color: #b7d0da; max-width: 560px; line-height: 2; }
.hero .badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: 99px; font-size: 13.5px; color: #f3d98f;
  background: rgba(200,160,74,.14); box-shadow: 0 0 0 1px rgba(233,201,120,.35) inset; }
.hero .cta { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 34px; }
.steps { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1380px; margin: 0 auto; padding: 0 clamp(18px, 5vw, 64px) 70px; }
.step { position: relative; padding: 26px 22px; border-radius: 22px; color: #e6f2f6;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset, 0 6px 0 rgba(0,0,0,.25), 0 30px 40px -20px rgba(0,0,0,.6);
  transform-style: preserve-3d; }
.step .no { font-family: var(--disp); font-size: 54px; line-height: 1; color: rgba(233,201,120,.9); text-shadow: 0 4px 0 rgba(0,0,0,.3); }
.step h3 { font-family: var(--ui); font-size: 17px; margin: 8px 0 6px; color: #fff; }
.step p { margin: 0; font-size: 13.5px; color: #a9c5d0; line-height: 1.9; }
.foot { position: relative; z-index: 3; text-align: center; padding: 0 20px 34px; font-size: 13px; color: #6f95a5; }
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; }
  .scene { height: 430px; order: -1; transform: scale(.8); margin: -40px 0; }
  .steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } .scene { transform: scale(.66); margin: -80px 0; } }

/* ---------- الدخول ---------- */
.auth { display: grid; grid-template-columns: 1.1fr 1fr; min-height: 100vh; }
.auth .l { position: relative; overflow: hidden; padding: 28px clamp(22px, 4vw, 56px); display: flex; flex-direction: column; }
.auth .l .brand { padding: 0; }
.auth .l .scene { flex: 1; min-height: 480px; }
.auth .l .cap { position: relative; z-index: 2; max-width: 460px; }
.auth .l .cap h2 { font-size: 44px; line-height: 1.2; }
.auth .l .cap p { color: #a9c5d0; font-size: 16px; }
.auth .r { display: grid; place-items: center; padding: 30px 22px; background:
  radial-gradient(700px 400px at 100% 0, #d6efe8, transparent 60%), radial-gradient(600px 400px at 0 100%, #f1e7cf, transparent 60%), #eef3f5; }
.authcard { width: min(440px, 100%); }
.authcard h1 { font-size: 38px; }
.authcard .tabs { display: flex; }
@media (max-width: 900px) { .auth { grid-template-columns: 1fr; } .auth .l { display: none; } }

/* حقل رقم كبير للهوية / رمز */
.bigin { font-size: 24px !important; letter-spacing: 3px; text-align: center; padding: 16px !important; direction: ltr; font-weight: 600; }
.keybox { font-size: 26px; letter-spacing: 2px; direction: ltr; text-align: center; padding: 18px 10px; border-radius: 16px; font-weight: 700;
  background: linear-gradient(180deg, #fbf7ea, #f5eed6); border: 1px dashed #c8a04a; color: #4a3407; user-select: all; box-shadow: 0 4px 0 #e0cf94; }