/* Login — split screen: brand stage (school green + gold) and the form. */
body.lgpage { margin: 0; min-height: 100vh; background: #f7f4ec; }
.lg { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 100vh; }

/* ---------- brand stage ---------- */
.lg-brand { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; padding: 34px 40px 40px; color: #f3ecdc;
  background:
    radial-gradient(60% 45% at 85% 8%, rgba(215,175,118,.22), transparent 70%),
    radial-gradient(70% 60% at 10% 100%, rgba(26,120,85,.55), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220' fill='none' stroke='%23d7af76' stroke-opacity='.13' stroke-width='2'%3E%3Crect x='18' y='18' width='16' height='16' rx='3'/%3E%3Crect x='42' y='18' width='16' height='16' rx='3'/%3E%3Crect x='18' y='42' width='16' height='16' rx='3'/%3E%3Cpath d='M44 44h6v6h-6zM52 52h6v6h-6z'/%3E%3Ccircle cx='160' cy='40' r='15'/%3E%3Cpath d='M153 40l5 5 9-10'/%3E%3Cpath d='M40 200v-26c0-11 9-17 17-21 8 4 17 10 17 21v26'/%3E%3Ccircle cx='165' cy='160' r='14'/%3E%3Cpath d='M165 151v9l6 4'/%3E%3Cpath d='M100 108c8-5 16-5 24 0v18c-8-5-16-5-24 0zM124 108c8-5 16-5 24 0v18c-8-5-16-5-24 0z'/%3E%3Cpath d='M190 95l6 6M196 95l-6 6'/%3E%3C/svg%3E"),
    linear-gradient(160deg, #062a21 0%, #0a4231 55%, #0f5a41 100%); }
.lg-brand::after { content: ""; position: absolute; inset: auto -10% -30% -10%; height: 55%; background: radial-gradient(50% 60% at 50% 100%, rgba(215,175,118,.18), transparent 70%); pointer-events: none; }
.lg-brand-top { display: flex; align-items: center; gap: 14px; position: relative; z-index: 1; }
.lg-brand-top b { display: block; font-size: 21px; font-weight: 800; color: #fff; line-height: 1.2; }
.lg-brand-top small { display: block; font-size: 12px; color: var(--gold-3); font-weight: 700; letter-spacing: .02em; }
.lg-tile { width: 58px; height: 58px; border-radius: 16px; background: #fbf8f0; display: grid; place-items: center; padding: 6px; box-shadow: 0 10px 24px -10px rgba(0,0,0,.5), 0 0 0 1px rgba(215,175,118,.6); flex: none; }

.lg-stage { position: relative; flex: 1; display: grid; place-items: center; min-height: 0; z-index: 1; padding: 12px 0; }
.lg-arch { width: min(360px, 72%, 52vh); aspect-ratio: 1 / 1; display: grid; place-items: center; padding: 16% 5% 5%;
  background: linear-gradient(180deg, #fffdf6, #f3ead6); border-radius: 50% 50% 22px 22px / 42% 42% 22px 22px;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.65), 0 0 0 6px rgba(215,175,118,.22), 0 0 0 7px rgba(215,175,118,.55); animation: rise .8s ease-out both; }
.lg-arch img { width: 100%; filter: drop-shadow(0 8px 14px rgba(7,67,48,.18)); }
@keyframes rise { from { transform: translateY(18px); opacity: .001; } to { transform: none; opacity: 1; } }

.lg-float { position: absolute; top: 6%; inset-inline-end: 4%; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 12px 16px 20px 14px; border-radius: 20px; background: #fffdf8; color: var(--ink);
  box-shadow: 0 24px 48px -18px rgba(0,0,0,.6); min-width: 210px; animation: bob 5s ease-in-out infinite; }
.lf-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--ok); color: #fff; flex: none; transition: background .3s; }
.lf-ic .i { width: 24px; height: 24px; stroke-width: 2.6; }
.lf-t { line-height: 1.3; flex: 1; }
.lf-t b { display: block; font-size: 17px; font-weight: 800; }
.lf-t small { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.lf-dots { position: absolute; bottom: 7px; inset-inline-start: 50%; transform: translateX(50%); display: flex; gap: 4px; }
.lf-dots i { width: 5px; height: 5px; border-radius: 50%; background: #d8cfbd; transition: background .3s, width .3s; }
.lf-dots i.on { background: var(--gold); width: 12px; border-radius: 4px; }
.lg-float.swap .lf-t, .lg-float.swap .lf-ic .i { animation: swap .35s ease; }
@keyframes swap { from { transform: translateY(6px); } to { transform: none; } }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.lg-chip { position: absolute; bottom: 16%; inset-inline-start: 6%; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 99px; background: rgba(6,42,33,.75); border: 1px solid rgba(215,175,118,.45); color: #f3ecdc; font-weight: 700; font-size: 13.5px; backdrop-filter: blur(6px); animation: bob 6s ease-in-out infinite reverse; }
.lg-chip .i { width: 17px; height: 17px; color: var(--gold-3); }
.lg-chip-2 { bottom: auto; top: 46%; inset-inline-start: auto; inset-inline-end: 2%; animation-duration: 7s; }

.lg-tag { position: relative; z-index: 1; text-align: center; }
.lg-rule { display: inline-flex; align-items: center; gap: 14px; color: var(--gold-3); font-weight: 800; font-size: 14px; }
.lg-rule::before, .lg-rule::after { content: ""; width: 60px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-3)); }
.lg-rule::after { transform: scaleX(-1); }
.lg-tag h2 { font-size: clamp(24px, 2.6vw, 34px); font-weight: 800; color: #fff; margin: 6px 0 4px; }
.lg-tag p { margin: 0; color: #bccbc2; font-size: 14.5px; }

/* ---------- form side ---------- */
.lg-form { display: grid; place-items: center; padding: 40px 24px; background:
  radial-gradient(70% 50% at 100% 0%, rgba(215,175,118,.16), transparent 70%), radial-gradient(60% 50% at 0% 100%, rgba(18,85,62,.07), transparent 70%), #f7f4ec; }
.lg-in { width: min(430px, 100%); }
.lg-mtop { display: none; }
.lg-logo { width: 74px; height: 74px; border-radius: 22px; background: #fffdf8; display: grid; place-items: center; padding: 8px; margin-bottom: 22px; box-shadow: 0 16px 32px -16px rgba(6,42,33,.45), 0 0 0 1px var(--line); }
.lg-in h1 { font-size: 30px; font-weight: 800; color: var(--green-4); display: flex; align-items: center; gap: 10px; }
.wave { display: inline-block; transform-origin: 70% 70%; animation: wave 2.4s ease-in-out 1s 2; font-size: 28px; }
@keyframes wave { 0%, 60%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(14deg); } 20% { transform: rotate(-8deg); } 40% { transform: rotate(-4deg); } 50% { transform: rotate(10deg); } }
.lg-sub { margin: 4px 0 22px; color: var(--muted); font-size: 15px; }

.lg-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 22px; }
.lg-modes button { display: grid; justify-items: center; gap: 2px; padding: 14px 10px 12px; border-radius: 18px; border: 1.5px solid var(--line); background: #fffdf8; cursor: pointer; font-family: inherit; color: var(--ink); transition: border-color .15s, box-shadow .15s, transform .15s; }
.lg-modes button:hover { transform: translateY(-1px); }
.lg-modes button.on { border-color: var(--green); box-shadow: 0 0 0 4px rgba(18,85,62,.12); }
.lg-modes b { font-size: 14.5px; font-weight: 800; }
.lg-modes small { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.mic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: #fff; margin-bottom: 6px; }
.mic-green { background: linear-gradient(135deg, #1b7a57, #0b4a35); box-shadow: 0 8px 16px -8px rgba(11,74,53,.8); }
.mic-gold { background: linear-gradient(135deg, #d7af76, #a17c45); box-shadow: 0 8px 16px -8px rgba(161,124,69,.8); }

.pin-dots { display: flex; justify-content: center; gap: 18px; margin: 4px 0 22px; direction: ltr; }
.pin-dots i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-2); background: #fff; transition: background .12s, border-color .12s, transform .12s; }
.pin-dots i.on { background: var(--green); border-color: var(--green); transform: scale(1.1); }
.pin-dots.busy i { animation: pulse .8s ease-in-out infinite; background: var(--gold); border-color: var(--gold); }
.pin-dots.busy i:nth-child(2) { animation-delay: .1s; } .pin-dots.busy i:nth-child(3) { animation-delay: .2s; } .pin-dots.busy i:nth-child(4) { animation-delay: .3s; }
@keyframes pulse { 50% { transform: scale(.7); opacity: .5; } }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; direction: ltr; }
.keypad button { height: 64px; border-radius: 18px; border: 1px solid var(--line); background: #fffdf8; font: 700 26px/1 Cairo, sans-serif; color: var(--green-4); cursor: pointer; box-shadow: 0 2px 0 var(--line); transition: background .1s, transform .05s; display: grid; place-items: center; touch-action: manipulation; }
.keypad button:hover { background: #fff; border-color: var(--gold-3); }
.keypad button:active, .keypad button.hit { transform: translateY(2px); box-shadow: none; background: var(--gold-soft); }
.keypad .k-soft { font-size: 15px; color: var(--muted); background: transparent; box-shadow: none; }
.keypad .k-soft .i { width: 24px; height: 24px; transform: scaleX(-1); }
.lg-hint { text-align: center; color: var(--muted); font-size: 12.5px; margin: 16px 0 0; }
.shake { animation: shake .45s ease; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }

.lg-user .input { min-height: 52px; border-radius: 14px; background: #fff; }
.pw { position: relative; }
.pw .input { padding-left: 46px; }
.pw-eye { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--muted); cursor: pointer; padding: 6px; display: grid; border-radius: 8px; }
.pw-eye:hover { color: var(--green); background: var(--bg-2); }
.pw-eye .i { position: static; transform: none; }
.lg-submit { min-height: 54px; border-radius: 14px; font-size: 16.5px; margin-top: 4px; box-shadow: 0 14px 28px -14px rgba(7,67,48,.8); }
.lg-foot { text-align: center; color: var(--muted); font-size: 12px; margin-top: 26px; }

/* ---------- small screens: brand becomes a header band ---------- */
@media (max-width: 900px) {
  .lg { grid-template-columns: 1fr; }
  .lg-brand { display: none; position: relative; height: auto; }
  .lg-form { place-items: start center; padding: 0 0 32px; background: #f7f4ec; }
  .lg-in { width: 100%; }
  .lg-mtop { display: flex; align-items: center; gap: 12px; padding: max(18px, env(safe-area-inset-top)) 20px 64px; color: #fff; margin-bottom: -44px;
    background: radial-gradient(80% 90% at 100% 0%, rgba(215,175,118,.28), transparent 70%), linear-gradient(160deg, #062a21, #0d5a40); border-radius: 0 0 30px 30px; }
  .lg-mtop .lg-tile { width: 48px; height: 48px; border-radius: 14px; }
  .lg-mtop b { display: block; font-size: 17px; font-weight: 800; line-height: 1.25; }
  .lg-mtop small { color: var(--gold-3); font-size: 12px; font-weight: 700; }
  .lg-logo { display: none; }
  .lg-in > h1, .lg-in > .lg-sub, .lg-in > .flash, .lg-in > .lg-modes, .lg-in > form, .lg-in > .lg-foot { margin-inline: 18px; }
  .lg-in > h1 { margin-top: 0; background: #fffdf8; border-radius: 22px 22px 0 0; padding: 22px 20px 0; margin-bottom: 0; font-size: 25px; box-shadow: 0 -10px 30px -20px rgba(6,42,33,.4); }
  .lg-in > .lg-sub { background: #fffdf8; margin-top: 0; padding: 2px 20px 18px; border-radius: 0 0 22px 22px; margin-bottom: 18px; }
  .keypad button { height: 66px; }
}
@media (prefers-reduced-motion: reduce) { .lg-float, .lg-chip, .lg-arch, .wave { animation: none; } }