/* شاشة دخول واحدة تعرض البوّابتين جنبًا إلى جنب.
   العرض مشترك، أما الحسابات والتسجيل فمستقلّان تمامًا لكل بوّابة. */
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; padding: 26px 20px 34px;
  font-family: "Segoe UI", Tahoma, "Traditional Arabic", sans-serif;
  background: linear-gradient(160deg, #eef4fa 0%, #f8fbfd 55%, #eef7f4 100%);
  color: #23313d;
}

.lg-head { text-align: center; margin-bottom: 22px }
.lg-head h1 { margin: 0 0 6px; font-size: 1.5rem; color: #1F4E79 }
.lg-head p { margin: 0; color: #6a7885; font-size: .88rem; line-height: 1.7 }

.lg-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px; max-width: 900px; margin: 0 auto; align-items: start;
}
@media (max-width: 780px) { .lg-grid { grid-template-columns: 1fr } }

.lg-card {
  background: #fff; border: 1px solid #dde5ec; border-top: 4px solid var(--lg-accent);
  border-radius: 16px; box-shadow: 0 14px 36px rgba(20, 45, 70, .10);
  padding: 22px 22px 18px; transition: box-shadow .18s, transform .18s;
}
.lg-card:focus-within { box-shadow: 0 18px 44px rgba(20, 45, 70, .18); transform: translateY(-2px) }
.lg-teacher { --lg-accent: #1e6f5c; --lg-accent-dark: #165646; --lg-tint: #eef7f4 }
.lg-school  { --lg-accent: #1F4E79; --lg-accent-dark: #173e60; --lg-tint: #eef4fa }

.lg-brand { text-align: center; margin-bottom: 16px }
.lg-mark {
  display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
  border-radius: 14px; background: var(--lg-tint); font-size: 1.5rem; margin-bottom: 8px;
}
.lg-brand h2 { margin: 0 0 5px; font-size: 1.12rem; color: var(--lg-accent) }
.lg-brand p { margin: 0; color: #7c8b98; font-size: .78rem; line-height: 1.7; min-height: 2.7em }

.lg-field { display: block; margin-bottom: 12px }
.lg-field > span { display: block; font-size: .82rem; color: #41525f; margin-bottom: 5px; font-weight: 700 }
.lg-field input {
  width: 100%; padding: 10px 11px; border: 1px solid #cfd8e3; border-radius: 10px;
  font-family: inherit; font-size: .93rem; background: #fcfdfe;
}
.lg-field input:focus { outline: 0; border-color: var(--lg-accent); box-shadow: 0 0 0 3px rgba(31, 78, 121, .12) }
.lg-field small { display: block; color: #7c8b98; font-size: .74rem; margin-top: 4px }

.lg-row { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px }
.lg-remember { display: flex; align-items: center; gap: 7px; font-size: .82rem; color: #41525f; cursor: pointer }
.lg-remember input { width: 16px; height: 16px; margin: 0 }

.lg-submit {
  width: 100%; padding: 11px; border: 0; border-radius: 11px; background: var(--lg-accent); color: #fff;
  font-family: inherit; font-size: .96rem; font-weight: 700; cursor: pointer; transition: .15s;
}
.lg-submit:hover { background: var(--lg-accent-dark) }
.lg-submit:disabled { opacity: .6; cursor: progress }

.lg-link {
  background: 0; border: 0; color: var(--lg-accent); font-family: inherit; font-size: .83rem;
  font-weight: 700; cursor: pointer; text-decoration: underline; padding: 0;
}
.lg-switch { text-align: center; margin-top: 13px; font-size: .82rem; color: #6a7885; line-height: 1.9 }

.lg-msg { padding: 9px 11px; border-radius: 10px; font-size: .84rem; font-weight: 700; margin-bottom: 12px; display: none; line-height: 1.7 }
.lg-msg.error { background: #fdecea; color: #a5271b; display: block }
.lg-msg.ok { background: #e8f6ee; color: #1e7a48; display: block }
.lg-msg.info { background: var(--lg-tint); color: var(--lg-accent); display: block; font-weight: 400 }

.lg-hidden { display: none }
.lg-note {
  margin: 14px 0 0; padding-top: 12px; border-top: 1px solid #eef2f6; color: #94a2ad;
  font-size: .75rem; text-align: center; line-height: 1.8;
}