/* صفحة دخول لوحة الإدارة */
:root {
  --green: #07563D; --green-dark: #06432F; --green-deep: #04301F; --green-50: #E9F3ED;
  --gold: #D8B45A; --gold-deep: #A9862F; --ink: #19322A; --muted: #60736B; --paper: #F4F7F4;
  --red: #D64042; --flag-green: #00A95C; --line: rgba(25, 50, 42, .14);
  --font-display: "Amiri", "Cormorant Garamond", serif;
  --font-body: "IBM Plex Sans Arabic", "Inter", system-ui, sans-serif;
}
:lang(fr) { --font-display: "Cormorant Garamond", "Amiri", serif; --font-body: "Inter", "IBM Plex Sans Arabic", system-ui, sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--font-body); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; }

.lg { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }

/* اللوحة البصرية */
.lg__visual {
  position: relative; overflow: hidden; color: #E6EFE9;
  background: radial-gradient(900px 600px at 50% 55%, #0A6A4B 0%, var(--green-dark) 55%, var(--green-deep) 100%);
  display: flex; flex-direction: column; justify-content: space-between; padding: 44px 52px 40px;
}
.lg__pattern {
  position: absolute; inset: -20%;
  background: url("../img/pattern-gold.c805f14fd837.svg") center / 220px 220px repeat;
  opacity: .07; transform: rotate(8deg); pointer-events: none;
}
.lg__brand { position: relative; display: flex; align-items: center; gap: 14px; }
.lg__brand svg { width: 52px; height: 52px; flex: none; }
.lg__brand strong { display: block; font-family: var(--font-display); font-size: 1.6rem; color: #fff; line-height: 1.2; }
.lg__brand span { font-size: .8rem; color: var(--gold); }
.lg__object { position: relative; margin: 24px auto; width: min(78%, 520px); }
.lg__object::before { content: ""; position: absolute; inset: 12% 8% -6%; background: radial-gradient(closest-side, rgba(216, 180, 90, .28), transparent 70%); filter: blur(12px); }
.lg__object img { position: relative; width: 100%; height: auto; display: block; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .35)); animation: float 7s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .lg__object img { animation: none; } }
.lg__motto { position: relative; margin: 0; font-family: var(--font-display); font-size: 1.45rem; line-height: 1.6; color: var(--gold); max-width: 460px; }
.lg__flag { position: absolute; inset-inline: 0; bottom: 0; height: 6px; background: linear-gradient(180deg, var(--red) 0 33%, var(--flag-green) 33% 67%, var(--red) 67%); }

/* نموذج الدخول */
.lg__panel { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 28px; border-top: 3px solid var(--red); }
.lg__lang { position: absolute; top: 22px; inset-inline-end: 24px; display: flex; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: #fff; }
.lg__lang button { font: inherit; font-size: .8rem; border: 0; background: none; color: var(--muted); padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.lg__lang button[aria-current="true"] { background: var(--green); color: #fff; }
.lg__card { width: min(100%, 420px); }
.lg__eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: .82rem; font-weight: 600; color: var(--gold-deep); }
.lg__eyebrow::before { content: ""; width: 26px; height: 1.5px; background: var(--gold); }
.lg__card h1 { font-family: var(--font-display); font-size: 2.6rem; margin: 6px 0 6px; color: var(--ink); line-height: 1.2; }
.lg__lead { margin: 0 0 28px; color: var(--muted); }
.lg__field { display: block; margin-bottom: 18px; }
.lg__field > span:first-child { display: block; font-size: .86rem; font-weight: 600; margin-bottom: 7px; }
.lg__input { position: relative; display: flex; align-items: center; }
.lg__input > svg { position: absolute; inset-inline-start: 14px; width: 19px; height: 19px; fill: none; stroke: var(--muted); stroke-width: 1.8; pointer-events: none; }
.lg__input input {
  width: 100%; height: 52px; border-radius: 14px; border: 1px solid var(--line); background: #fff;
  font: inherit; font-size: 1rem; color: var(--ink); padding-inline: 46px 46px; transition: border-color .2s, box-shadow .2s;
}
.lg__input input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 4px rgba(7, 86, 61, .12); }
.lg__reveal { position: absolute; inset-inline-end: 8px; width: 36px; height: 36px; border: 0; background: none; border-radius: 10px; cursor: pointer; display: grid; place-items: center; }
.lg__reveal svg { width: 19px; height: 19px; fill: none; stroke: var(--muted); stroke-width: 1.8; }
.lg__reveal.is-on svg { stroke: var(--green); }
.lg__submit {
  width: 100%; height: 54px; margin-top: 8px; border: 0; border-radius: 14px; cursor: pointer;
  background: var(--green); color: #fff; font: inherit; font-size: 1.05rem; font-weight: 600;
  box-shadow: 0 12px 26px rgba(7, 86, 61, .25); transition: background .2s, transform .2s;
}
.lg__submit:hover { background: var(--green-dark); transform: translateY(-1px); }
.lg__error { margin-bottom: 18px; padding: 12px 16px; border-radius: 12px; background: #FDECEC; color: #8A1F21; font-size: .92rem; }
.lg__fielderr { display: block; margin-top: 6px; color: #8A1F21; font-size: .8rem; }
.lg__note { display: flex; gap: 10px; align-items: flex-start; margin: 26px 0 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: .82rem; color: var(--muted); line-height: 1.6; }
.lg__note svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--gold-deep); stroke-width: 1.8; margin-top: 2px; }
.lg__back { margin-top: 30px; font-size: .85rem; color: var(--green); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

@media (max-width: 900px) {
  .lg { grid-template-columns: 1fr; }
  .lg__visual { padding: 26px 24px 30px; min-height: 0; }
  .lg__object { width: 46%; margin: 10px auto 4px; }
  .lg__motto { font-size: 1.1rem; }
  .lg__panel { padding: 36px 22px 40px; border-top: 0; }
  .lg__lang { position: static; align-self: flex-end; margin-bottom: 22px; }
  .lg__brand svg { width: 42px; height: 42px; }
  .lg__brand strong { font-size: 1.35rem; }
}