/* واجهة الدخول «المدار»: خلفية WebGL ← جسيمات ← عناوين الخارطة ← واجهة زجاجية. كل الأصناف تبدأ بـ lx- حتى لا تتداخل مع النظام */
#login-root.login-root {
  --lx-bg: #020617; --lx-ink: #e0f2fe; --lx-muted: rgba(186, 230, 253, .64); --lx-acc: #38bdf8; --lx-acc2: #facc15;
  --lx-btn-a: #0ea5e9; --lx-btn-b: #22d3ee; --lx-btn-ink: #02101f; --lx-glass: rgba(3, 14, 36, .62); --lx-line: rgba(56, 189, 248, .26);
  --lx-field: rgba(255, 255, 255, .06); --lx-shadow: rgba(0, 0, 0, .6); --lx-err: #ff9b9b;
  --lx-font: "Noto Kufi Arabic", "Segoe UI", Tahoma, sans-serif; --lx-mono: "JetBrains Mono", Consolas, monospace;
  --lx-ease: cubic-bezier(.2, .8, .2, 1);
  background: var(--lx-bg); color: var(--lx-ink); overflow: hidden; font-family: var(--lx-font); direction: rtl; -webkit-tap-highlight-color: transparent;
}
.lx-gl, .lx-ov { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lx-ov { pointer-events: none; }
.lx-nogl .lx-gl { background: radial-gradient(120% 80% at 50% 35%, #0b2a5b, var(--lx-bg) 70%); }

.lx-ui { position: absolute; inset: 0; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(180px, 1fr) auto auto auto;
  grid-template-areas: "brand" "hello" "stage" "status" "action" "foot"; gap: 10px; justify-items: center; align-items: center; text-align: center;
  padding-top: calc(env(safe-area-inset-top, 0px) + 18px); padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); overflow-y: auto; overflow-x: hidden; pointer-events: none; box-sizing: border-box; }
.lx-ui > * { pointer-events: auto; min-width: 0; }
.lx-stage { grid-area: stage; width: 100%; height: 100%; min-height: 180px; pointer-events: none !important; }
@media (min-width: 960px) {
  .lx-ui { grid-template-columns: minmax(380px, 36rem) 1fr; grid-template-rows: 1fr auto auto auto auto 1fr auto;
    grid-template-areas: ". stage" "brand stage" "hello stage" "status stage" "action stage" ". stage" "foot foot"; justify-items: start; text-align: start; column-gap: 4vw; padding-top: 24px; padding-inline-start: max(5vw, 16px); }
  .lx-stage { min-height: 0; }
}

/* الشعار والوزارة */
.lx-brand { grid-area: brand; display: flex; align-items: center; gap: 14px; justify-content: center; }
.lx-emblem { position: relative; width: 72px; height: 72px; flex: none; display: grid; place-items: center; }
.lx-emblem img { width: 52px; height: 52px; object-fit: contain; border-radius: 50%; position: relative; z-index: 1; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .5)); }
.lx-emblem svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lx-emblem .lx-r1 { animation: lx-spin 14s linear infinite; transform-origin: 50% 50%; }
.lx-emblem .lx-r2 { animation: lx-spin 9s linear infinite reverse; transform-origin: 50% 50%; }
.lx-emblem::after { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: var(--lx-acc); filter: blur(18px); opacity: .35; animation: lx-breathe 3.6s ease-in-out infinite; }
.lx-ministry { display: grid; gap: 2px; text-align: start; text-shadow: 0 2px 16px var(--lx-shadow); }
.lx-ministry .m1 { font: 800 22px/1.35 var(--lx-font); background: linear-gradient(100deg, var(--lx-ink) 35%, var(--lx-acc) 50%, var(--lx-ink) 65%); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: lx-shimmer 5.5s ease-in-out infinite; }
.lx-ministry .m2 { font: 700 14.5px/1.5 var(--lx-font); color: var(--lx-ink); opacity: .92; }
.lx-ministry .m3 { font: 500 13px/1.5 var(--lx-font); color: var(--lx-acc2); }

.lx-hello { grid-area: hello; display: grid; gap: 2px; text-shadow: 0 2px 20px var(--lx-shadow); }
.lx-kicker { font: 500 14px var(--lx-font); color: var(--lx-muted); }
.lx-title { margin: 0; font: 800 clamp(23px, 6.4vw, 44px)/1.35 var(--lx-font); text-wrap: balance; perspective: 600px; color: var(--lx-ink); }
.lx-title .w { display: inline-block; opacity: 0; transform: translateY(26px) rotateX(-70deg); filter: blur(12px); transition: opacity .8s, transform 1s var(--lx-ease), filter .9s; transition-delay: calc(.35s + var(--i) * .11s); }
.lx-in .lx-title .w { opacity: 1; transform: none; filter: none; }
.lx-title .w:nth-child(2n) { color: var(--lx-acc); }
@media (min-width: 960px) { .lx-title { font-size: clamp(34px, 3.4vw, 52px); } .lx-brand { justify-content: flex-start; } }

/* الحالة */
.lx-status { grid-area: status; display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px; border-radius: 999px; background: var(--lx-glass); border: 1px solid var(--lx-line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font: 500 13px var(--lx-font); max-width: 100%; box-sizing: border-box; }
.lx-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--lx-acc); animation: lx-ping 2s infinite; flex: none; }
.lx-status span { display: inline-block; transition: transform .35s var(--lx-ease), opacity .3s, filter .3s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-status span.swap { transform: translateY(-10px); opacity: 0; filter: blur(4px); }

/* زر الدخول */
.lx-action { grid-area: action; position: relative; display: grid; justify-items: center; width: 100%; max-width: 400px; min-height: 64px; transition: min-height .6s var(--lx-ease); }
@media (min-width: 960px) { .lx-action { justify-items: start; } }
.lx-cta-wrap { position: relative; display: grid; justify-items: center; transition: opacity .4s, transform .5s var(--lx-ease), filter .4s; }
.lx-cta { position: relative; isolation: isolate; border: 0; cursor: pointer; padding: 16px 42px; border-radius: 999px; font: 700 17px var(--lx-font); color: var(--lx-btn-ink); background: linear-gradient(135deg, var(--lx-btn-a), var(--lx-btn-b)); box-shadow: 0 14px 44px -12px var(--lx-btn-a), inset 0 1px 0 rgba(255, 255, 255, .35); overflow: hidden; transition: transform .35s var(--lx-ease); }
.lx-cta::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; background: conic-gradient(from var(--lx-ang), transparent 0 62%, rgba(255, 255, 255, .95) 76%, transparent 88%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: lx-rot 2.8s linear infinite; }
.lx-cta::after { content: ""; position: absolute; top: 0; bottom: 0; width: 38%; inset-inline-start: -45%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent); transform: skewX(-20deg); animation: lx-shine 3.4s ease-in-out infinite; }
.lx-cta:hover { transform: translateY(-2px) scale(1.03); }
.lx-cta:active { transform: scale(.97); }
.lx-cta:focus-visible { outline: 2px solid var(--lx-ink); outline-offset: 3px; }
.lx-cta .lbl { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px; }
.lx-cta .lbl svg { width: 18px; height: 18px; transition: transform .4s var(--lx-ease); }
.lx-cta:hover .lbl svg { transform: translateX(-4px); }
.lx-aura { position: absolute; inset: 0; margin: auto; width: 230px; height: 60px; border-radius: 999px; pointer-events: none; }
.lx-aura::before, .lx-aura::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid var(--lx-acc); opacity: 0; animation: lx-aura 2.8s ease-out infinite; }
.lx-aura::after { animation-delay: 1.4s; }
@media (min-width: 960px) { .lx-aura { margin: 0; inset-inline-start: 0; } }
.lx-ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .55); transform: scale(0); animation: lx-ripple .7s ease-out forwards; pointer-events: none; }
.lx-form-open .lx-cta-wrap, .lx-done .lx-cta-wrap { opacity: 0; transform: scale(.6); filter: blur(10px); pointer-events: none; }

/* بطاقة الدخول */
.lx-card { position: absolute; bottom: 0; inset-inline: 0; margin-inline: auto; width: min(100%, 380px); box-sizing: border-box; padding: 18px 18px 14px; border-radius: 24px; background: var(--lx-glass); border: 1px solid var(--lx-line); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .7); display: grid; gap: 12px; clip-path: circle(0 at 50% 85%); opacity: 0; pointer-events: none; transition: clip-path .75s var(--lx-ease), opacity .3s; text-align: start; }
@media (min-width: 960px) { .lx-card { margin-inline: 0; } }
.lx-form-open .lx-card { clip-path: circle(150% at 50% 85%); opacity: 1; pointer-events: auto; }
.lx-card .f { opacity: 0; transform: translateY(14px); transition: opacity .5s, transform .6s var(--lx-ease); }
.lx-form-open .lx-card .f { opacity: 1; transform: none; transition-delay: calc(.18s + var(--i) * .08s); }
.lx-card h2 { margin: 0; font: 700 16px var(--lx-font); display: flex; align-items: center; gap: 8px; color: var(--lx-ink); }
.lx-card h2 b { width: 8px; height: 8px; border-radius: 50%; background: var(--lx-acc); box-shadow: 0 0 12px var(--lx-acc); }
.lx-fld { position: relative; }
.lx-fld input { width: 100%; box-sizing: border-box; height: 54px; padding: 20px 14px 4px; border-radius: 14px; border: 1px solid var(--lx-line); background: var(--lx-field); color: var(--lx-ink); font: 500 16px var(--lx-font); outline: none; transition: border-color .3s, box-shadow .3s; }
.lx-fld input:focus { border-color: var(--lx-acc); box-shadow: 0 0 0 4px rgba(56, 189, 248, .18); }
.lx-fld label { position: absolute; inset-inline-start: 14px; top: 16px; color: var(--lx-muted); font: 500 14px var(--lx-font); pointer-events: none; transition: transform .3s var(--lx-ease), color .3s; transform-origin: right top; }
.lx-fld input:focus + label, .lx-fld input:not(:placeholder-shown) + label { transform: translateY(-12px) scale(.78); color: var(--lx-acc); }
.lx-fld .bar { position: absolute; bottom: 0; inset-inline: 14px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--lx-btn-b), var(--lx-btn-a)); transform: scaleX(0); transition: transform .5s var(--lx-ease); }
.lx-fld input:focus ~ .bar { transform: scaleX(1); }
.lx-eye { position: absolute; inset-inline-end: 6px; top: 7px; width: 40px; height: 40px; border: 0; border-radius: 10px; background: none; color: var(--lx-muted); cursor: pointer; display: grid; place-items: center; }
.lx-eye:focus-visible { outline: 2px solid var(--lx-acc); }
.lx-eye svg { width: 20px; height: 20px; }
.lx-row { display: flex; gap: 10px; align-items: center; }
.lx-go { flex: 1; border: 0; border-radius: 14px; height: 50px; cursor: pointer; font: 700 16px var(--lx-font); color: var(--lx-btn-ink); background: linear-gradient(135deg, var(--lx-btn-a), var(--lx-btn-b)); position: relative; overflow: hidden; transition: transform .3s var(--lx-ease), filter .3s; }
.lx-go:hover { filter: brightness(1.08); }
.lx-go:active { transform: scale(.97); }
.lx-go.busy .t { opacity: 0; }
.lx-go .spin { position: absolute; inset: 0; margin: auto; width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid currentColor; border-top-color: transparent; opacity: 0; box-sizing: border-box; }
.lx-go.busy .spin { opacity: 1; animation: lx-rot2 .8s linear infinite; }
.lx-back { border: 1px solid var(--lx-line); background: none; color: var(--lx-ink); height: 50px; padding: 0 18px; border-radius: 14px; font: 500 14px var(--lx-font); cursor: pointer; }
.lx-back:focus-visible, .lx-go:focus-visible { outline: 2px solid var(--lx-ink); outline-offset: 2px; }
.lx-err { min-height: 20px; color: var(--lx-err); font: 500 13px/1.5 var(--lx-font); }
.lx-card.shake { animation: lx-shake .45s; }

/* بعد الدخول */
.lx-welcome { position: absolute; bottom: 0; inset-inline: 0; margin-inline: auto; width: min(100%, 380px); display: grid; justify-items: center; gap: 6px; opacity: 0; transform: scale(.85); filter: blur(10px); pointer-events: none; transition: opacity .6s .25s, transform .8s var(--lx-ease) .25s, filter .6s .25s; }
.lx-done .lx-welcome { opacity: 1; transform: none; filter: none; }
.lx-done .lx-card { clip-path: circle(0 at 50% 50%); opacity: 0; pointer-events: none; }
.lx-welcome svg { width: 58px; height: 58px; }
.lx-welcome .ck { stroke-dasharray: 60; stroke-dashoffset: 60; }
.lx-welcome .cc { stroke-dasharray: 160; stroke-dashoffset: 160; }
.lx-done .lx-welcome .cc { animation: lx-draw .6s var(--lx-ease) .3s forwards; }
.lx-done .lx-welcome .ck { animation: lx-draw .45s var(--lx-ease) .75s forwards; }
.lx-welcome strong { font: 800 23px var(--lx-font); text-shadow: 0 2px 18px var(--lx-shadow); }
.lx-welcome span { color: var(--lx-muted); font: 500 13px var(--lx-font); }
.lx-done .lx-brand, .lx-done .lx-hello { opacity: .25; filter: blur(3px); transition: opacity .6s, filter .6s; }
.lx-done .lx-status { opacity: 0; transition: opacity .3s; }

/* التذييل */
.lx-foot { grid-area: foot; display: grid; gap: 6px; justify-items: center; width: 100%; }
.lx-lock { display: inline-flex; align-items: center; gap: 7px; font: 500 12.5px var(--lx-font); color: var(--lx-muted); }
.lx-lock svg { width: 14px; height: 14px; }
.lx-credit { direction: ltr; font: 500 10.5px var(--lx-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--lx-muted); }
.lx-credit b { font-weight: 600; background: linear-gradient(90deg, var(--lx-acc), var(--lx-acc2), var(--lx-acc)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: lx-shimmer 4s linear infinite; }

/* دخول العناصر المتتابع */
.lx-rv { opacity: 0; transform: translateY(20px); filter: blur(10px); transition: opacity .7s, transform .9s var(--lx-ease), filter .8s; transition-delay: var(--d, 0s); }
.lx-in .lx-rv { opacity: 1; transform: none; filter: none; }

@property --lx-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes lx-rot { to { --lx-ang: 360deg; } }
@keyframes lx-rot2 { to { transform: rotate(360deg); } }
@keyframes lx-spin { to { transform: rotate(360deg); } }
@keyframes lx-draw { to { stroke-dashoffset: 0; } }
@keyframes lx-breathe { 50% { opacity: .6; transform: scale(1.15); } }
@keyframes lx-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -160% 0; } }
@keyframes lx-ping { 0% { box-shadow: 0 0 0 0 var(--lx-acc); } 80%, 100% { box-shadow: 0 0 0 10px transparent; } }
@keyframes lx-shine { 0%, 55% { inset-inline-start: -45%; } 100% { inset-inline-start: 120%; } }
@keyframes lx-aura { 0% { opacity: .55; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.35, 1.9); } }
@keyframes lx-ripple { to { transform: scale(4); opacity: 0; } }
@keyframes lx-shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
@media (prefers-reduced-motion: reduce) { .lx-cta::after, .lx-aura::before, .lx-aura::after, .lx-ministry .m1 { animation: none; } }
@media (max-height: 700px) and (max-width: 959px) { .lx-emblem { width: 56px; height: 56px; } .lx-emblem img { width: 40px; height: 40px; } .lx-ministry .m1 { font-size: 18px; } .lx-title { font-size: 23px; } .lx-ui { gap: 6px; } }