/* صفحة الدخول: دولاب طلبات المجموعة، اعتمده المالك من تصاميم docs/login-concepts (التصميم 1). البيانات المعروضة وهمية. */
.lx {
  --navy:#0B1C26; --steel:#2f6f8f; --cyan:#56CFE1; --sky:#8fe3ef;
  --ink:#EEF4F7; --muted:#8FA9B8; --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);
  position: fixed; inset: 0; overflow: hidden; color: var(--ink); font-family: Cairo, system-ui, sans-serif;
  background: radial-gradient(900px 600px at 25% 30%, rgba(47,111,143,.38), transparent 60%), radial-gradient(700px 500px at 80% 85%, rgba(86,207,225,.14), transparent 60%), #0B1C26;
}
.lx canvas { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; display: block; }
.lx .ltr { direction: ltr; unicode-bidi: isolate; }
.lx-grid { position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 65% 60%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 60% 70% at 65% 60%, #000 20%, transparent 75%); }

/* بطاقة الدخول */
.lx-card { position: absolute; top: 50%; transform: translateY(-50%); inset-inline-end: 6vw; inline-size: min(400px, calc(100vw - 32px));
  padding: 30px 28px 26px; border-radius: 14px; background: rgba(19,42,55,.82); border: 1px solid var(--line-2);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 30px 80px rgba(0,0,0,.45); z-index: 5; }
.lx-card .top { display: flex; justify-content: space-between; align-items: center; margin-block-end: 22px; }
.lx-card .logo { block-size: 40px; }
.lx-card .lang { block-size: 28px; padding: 0 12px; border-radius: 7px; border: 1px solid var(--line-2); background: rgba(255,255,255,.04); color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; }
.lx-card .lang:hover { color: var(--ink); }
.lx-card h2 { font-size: 24px; font-weight: 800; margin: 0 0 4px; color: var(--ink); }
.lx-card p.sub { color: var(--muted); font-size: 13px; margin: 0 0 18px; }
.lx-card label { display: block; font-size: 12.5px; color: var(--muted); margin: 12px 0 6px; font-weight: 600; }
/* الخانتان باتجاه LTR في اللغتين، فالعين ومسافتها في الجهة نفسها دائماً */
.lx-card .field { position: relative; direction: ltr; }
.lx-card input.lx-input { inline-size: 100%; block-size: 46px; border-radius: 9px; border: 1px solid var(--line-2); background: rgba(255,255,255,.05);
  color: var(--ink); font: inherit; font-size: 14.5px; padding: 0 14px; outline: none; direction: ltr; text-align: start; transition: border-color .2s, box-shadow .2s; }
.lx-card input.lx-input::placeholder { color: rgba(143,169,184,.7); }
.lx-card input.lx-input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(86,207,225,.22); }
.lx-card input.lx-input:-webkit-autofill { -webkit-text-fill-color: var(--ink); -webkit-box-shadow: 0 0 0 40px #1b3442 inset; caret-color: var(--ink); }
.lx-card input[type=password].lx-input, .lx-card input.lx-input[data-pw] { padding-inline-end: 40px; }
.lx-card .eye { position: absolute; inset-inline-end: 10px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--muted); font-size: 18px; cursor: pointer; }
.lx-card .caps { font-size: 12px; color: #ffb38a; margin-block-start: 6px; }
.lx-card .lx-errors { color: #ff9fae; font-size: 13px; }
.lx-card .lx-errors ul { margin: 0 0 6px; padding-inline-start: 18px; }
.lx-card .lx-errors.validation-summary-valid { display: none; }
.lx-card .btn-go { margin-block-start: 20px; inline-size: 100%; block-size: 48px; border: 0; border-radius: 10px; font: inherit; font-weight: 800; font-size: 15px; color: #06212c; cursor: pointer;
  background: linear-gradient(90deg, var(--cyan), var(--sky)); box-shadow: 0 10px 30px rgba(86,207,225,.30); transition: transform .15s, filter .2s; display: flex; align-items: center; justify-content: center; gap: 8px; }
.lx-card .btn-go:hover { transform: translateY(-1px); filter: brightness(1.06); }
.lx-card .btn-go:active { transform: translateY(1px); }

/* الوصف ومسرح الدولاب */
.lx-blurb { position: absolute; top: 6vh; inset-inline-start: 5vw; inline-size: min(560px, 48vw); z-index: 4; pointer-events: none; }
.lx-blurb .tag { display: inline-block; font-size: 12px; font-weight: 700; color: var(--sky); border: 1px solid rgba(86,207,225,.4);
  background: rgba(86,207,225,.10); padding: 3px 10px; border-radius: 999px; margin-block-end: 14px; }
.lx-blurb h1 { font-size: clamp(22px, 2.4vw, 34px); line-height: 1.3; font-weight: 800; margin: 0; color: var(--ink); }
.lx-blurb h1 em { font-style: normal; background: linear-gradient(90deg, var(--cyan), #c9f4fa); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lx-blurb p { color: var(--muted); margin: 8px 0 0; font-size: 13.5px; line-height: 1.7; max-inline-size: 520px; }
.lx-blurb .stat { display: flex; gap: 26px; margin-block-start: 12px; }
.lx-blurb .stat b { display: block; font-size: 22px; font-weight: 800; color: var(--ink); }
.lx-blurb .stat span { font-size: 12px; color: var(--muted); }
.lx-stage { position: absolute; top: 37vh; bottom: 40px; inset-inline-start: 4vw; inline-size: min(760px, 52vw); z-index: 3; }

.lx-ico { inline-size: 40px; block-size: 40px; border-radius: 11px; display: grid; place-items: center; color: #fff; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--a), var(--b)); box-shadow: 0 8px 22px -8px var(--b), inset 0 1px 0 rgba(255,255,255,.3); }
.lx-ico i { font-size: 21px; }

.lx-ring-wrap { position: absolute; inset: 0; perspective: 1500px; display: grid; place-items: center; }
.lx-ring { position: relative; inline-size: 210px; block-size: 262px; transform-style: preserve-3d; }
.lx-doc { position: absolute; inset: 0; border-radius: 14px; background: linear-gradient(180deg, #183847, #0d212c); border: 1px solid var(--line-2); padding: 12px;
  box-shadow: 0 20px 50px rgba(0,0,0,.5); display: flex; flex-direction: column; gap: 8px; backface-visibility: hidden; }
.lx-doc .hd { display: flex; gap: 10px; align-items: center; padding-block-end: 10px; border-block-end: 1px solid var(--line); }
.lx-doc .hd b { display: block; font-size: 13.5px; }
.lx-doc .hd div span { font-size: 11px; color: var(--muted); }
.lx-doc .no { font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: var(--sky); font-weight: 700; text-align: end; }
.lx-doc .kv { display: flex; justify-content: space-between; font-size: 11px; gap: 8px; margin: 0; }
.lx-doc .kv span { color: var(--muted); white-space: nowrap; }
.lx-doc .kv b { font-weight: 700; text-align: end; }
.lx-doc .ft { margin-block-start: auto; display: flex; align-items: center; justify-content: space-between; }
.lx-doc .chip { font-style: normal; font-size: 10.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: rgba(86,207,225,.18); color: #d9f6fb; border: 1px solid rgba(86,207,225,.5); }
.lx-doc .bc { inline-size: 72px; block-size: 22px; opacity: .55; background: repeating-linear-gradient(90deg, #cfe0ea 0 2px, transparent 2px 4px, #cfe0ea 4px 5px, transparent 5px 8px); }

@media (max-width: 1100px) {
  .lx-stage, .lx-blurb { display: none; }
  .lx-card { inset-inline: 0; margin-inline: auto; }
}
@media (max-height: 560px) {
  .lx { position: absolute; min-block-size: 100vh; overflow: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .lx-card .btn-go { transition: none; }
}