/* تسجيل الدخول — ثيم فاتح (أبيض وأزرق) */
html body.lg-body .lg-page:not(#fx) { min-height: 100dvh; padding: 0; }

.ls-shell { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); min-height: 100dvh; font-family: var(--gl-font); color: var(--gl-label); }

.ls-stage { display: flex; flex-direction: column; justify-content: space-between; padding: clamp(1.5rem, 4vw, 3.4rem) clamp(1.5rem, 4vw, 3.4rem) 0; overflow: hidden; }
.ls-copy { max-width: 34rem; }
.ls-title { margin: 0; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.ls-title-main { display: block; font-size: clamp(2.6rem, 6vw, 4.8rem); color: var(--gl-label); }
.ls-title-sub { display: block; margin-top: .5rem; font-size: clamp(1.2rem, 2.3vw, 1.8rem); font-weight: 600; color: var(--gl-tint); }
.ls-lead { margin: 1.1rem 0 0; max-width: 28rem; font-size: 1.05rem; line-height: 1.9; color: var(--gl-label-2); }

.ls-route { display: flex; align-items: center; gap: .7rem; margin-top: 1.5rem; }
.ls-node { padding: .4rem .9rem; border-radius: 999px; font-weight: 600; font-size: .9rem; background: #fff; color: var(--gl-label-2); box-shadow: var(--gl-rim); }
.ls-node--end { background: var(--gl-tint-soft); color: var(--gl-tint); }
.ls-wire { display: flex; gap: .3rem; }
.ls-wire i { width: .4rem; height: .4rem; border-radius: 50%; background: var(--gl-tint); animation: ls-flow 1.8s infinite; }
.ls-wire i:nth-child(2) { animation-delay: .25s; } .ls-wire i:nth-child(3) { animation-delay: .5s; }
@keyframes ls-flow { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

.ls-device { margin: 1.5rem 0 0; align-self: center; width: min(78%, 30rem, calc((100dvh - 24rem) * .9)); min-width: 12rem; }
.ls-device-box > img { filter: drop-shadow(0 22px 26px rgba(16,42,86,.28)); }

.ls-panel { display: grid; place-items: center; padding: clamp(1.2rem, 4vw, 3rem); }
.ls-card {
  width: min(100%, 25rem); padding: 2rem 1.8rem 1.8rem; border-radius: 28px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--gl-card-line), 0 24px 60px rgba(16,42,86,.16);
}
.ls-card-head { margin-bottom: 1.4rem; }
.ls-card-title { margin: 0; font-size: 1.7rem; font-weight: 700; letter-spacing: -.01em; color: var(--gl-label); }
.ls-card-sub { margin: .3rem 0 0; color: var(--gl-label-2); font-size: .95rem; }

.ls-field { margin-bottom: 1rem; }
.ls-field label { display: block; margin-bottom: .4rem; font-weight: 600; font-size: .9rem; color: var(--gl-label-2); }
.ls-field input {
  width: 100%; height: 3rem; padding: 0 1rem; box-sizing: border-box; font: inherit; font-size: 1rem; color: var(--gl-label);
  background: var(--gl-field); border: 0; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--gl-field-line);
  transition: background .2s, box-shadow .2s;
}
.ls-field input:focus { outline: 0; background: #fff; box-shadow: inset 0 0 0 1.5px var(--gl-tint), 0 0 0 4px rgba(10,99,224,.18); }

.ls-submit { width: 100%; height: 3.1rem; margin-top: .6rem; cursor: pointer; font: inherit; font-size: 1.05rem; font-weight: 600; color: #fff; background: var(--gl-tint); border: 0; border-radius: 999px; box-shadow: 0 6px 18px rgba(10,99,224,.35); transition: transform .2s var(--gl-ease), background .2s; }
.ls-submit:hover { background: var(--gl-tint-hover); }
.ls-submit:active { transform: scale(.98); }
.ls-submit:focus-visible { outline: 3px solid var(--gl-tint); outline-offset: 2px; }

.ls-error { margin-bottom: 1rem; padding: .7rem .9rem; border-radius: 14px; background: var(--gl-red-soft); color: var(--gl-red); font-weight: 600; font-size: .92rem; box-shadow: inset 0 0 0 1px #f1a5a1; }

@media (max-width: 900px) { .ls-shell { grid-template-columns: 1fr; } .ls-device { width: min(70%, 18rem); margin-top: 1rem; } .ls-panel { padding-top: 1.5rem; } }
@media (prefers-reduced-motion: reduce) { .ls-wire i { animation: none; opacity: 1; } }