/* ITI EduAI — sign-in page. Same look as the ITI website's admin sign-in. */
:root { --navy: #002060; --navy2: #0b3a99; --acc: #bc460b; --accd: #9a3a09; --ink: #1d2b4f; --muted: #66718f; --line: #dfe4f1; }
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body.lg { font: 14px/1.55 Poppins, "Noto Sans Devanagari", system-ui, sans-serif; color: var(--ink); -webkit-font-smoothing: antialiased;
    background: radial-gradient(circle at 12% 12%, rgba(255, 255, 255, .10) 0 190px, transparent 191px), linear-gradient(160deg, #001a52 0%, var(--navy2) 100%) fixed; }
a { color: var(--navy); text-decoration: none; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--navy2); outline-offset: 2px; border-radius: 6px; }

.lg-wrap { min-height: 100vh; display: grid; place-items: center; padding: 28px 16px; }
.lg-card { width: min(940px, 100%); display: grid; grid-template-columns: 1fr 1.05fr; border-radius: 28px; overflow: hidden; box-shadow: 0 30px 70px rgba(0, 10, 40, .45); background: #fff; }

.lg-left { position: relative; overflow: hidden; color: #fff; padding: 30px 34px 26px; display: flex; flex-direction: column;
    background: radial-gradient(circle at 100% 0%, var(--acc) 0 70px, transparent 71px), radial-gradient(circle at 0% 100%, rgba(255, 255, 255, .08) 0 110px, transparent 111px), linear-gradient(175deg, var(--navy2), #061a44); }
.lg-logo { width: 88px; height: 88px; border-radius: 50%; background: #fff; display: grid; place-items: center; overflow: hidden; box-shadow: 0 0 0 8px rgba(255, 255, 255, .10); margin-bottom: 14px; }
.lg-logo img { width: 100%; height: 100%; object-fit: cover; }
.lg-badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; padding: 5px 14px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .10); font-size: 12px; font-weight: 600; }
.lg-left h1 { margin: 22px 0 2px; font-size: 27px; font-weight: 700; letter-spacing: .2px; }
.lg-sub { margin: 0 0 22px; color: #c6d3f2; font-size: 13px; }
.lg-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.lg-points li { display: flex; gap: 14px; align-items: center; }
.lg-points li > span { flex: none; width: 40px; height: 40px; border-radius: 11px; border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .10); display: grid; place-items: center; font-size: 18px; }
.lg-points b { display: block; font-size: 14px; font-weight: 600; }
.lg-points small { display: block; color: #c6d3f2; font-size: 12px; line-height: 1.35; }
.lg-foot { margin-top: auto; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .15); font-size: 12px; color: #b6c7ea; }
.lg-points + .lg-foot { margin-top: 28px; }

.lg-right { padding: 40px 46px 30px; display: flex; flex-direction: column; }
.lg-right h2 { margin: 0 0 4px; font-size: 27px; font-weight: 700; color: var(--navy); }
.lg-hint { margin: 0 0 26px; color: var(--muted); font-size: 13.5px; }
.lg-right label:not(.lg-check) { display: block; font-size: 12.5px; font-weight: 600; margin: 0 0 6px; }
.lg-field { position: relative; display: flex; align-items: center; margin-bottom: 18px; }
.lg-field > i { position: absolute; left: 14px; color: #8a94ad; font-size: 16px; pointer-events: none; }
.lg-field input { width: 100%; height: 48px; padding: 0 44px 0 42px; border: 1px solid var(--line); border-radius: 12px; background: #f4f6fb; font: inherit; color: var(--ink); transition: border-color .2s, box-shadow .2s, background .2s; }
.lg-field input:focus { outline: none; border-color: var(--navy2); background: #fff; box-shadow: 0 0 0 4px rgba(11, 58, 153, .12); }
.lg-field.bad input { border-color: #d64545; }
.lg-eye { position: absolute; right: 6px; width: 36px; height: 36px; border: 0; background: none; color: #8a94ad; border-radius: 9px; font-size: 16px; }
.lg-eye:hover { color: var(--navy2); background: #eaeffa; }
.lg-err { display: flex; align-items: center; gap: 6px; margin: -10px 0 14px; color: #b42323; font-size: 12.5px; }
.lg-check { display: flex; align-items: center; gap: 8px; margin: 2px 0 18px; font-size: 13px; color: var(--muted); cursor: pointer; }
.lg-check input { width: 16px; height: 16px; accent-color: var(--acc); }
.lg-btn { width: 100%; height: 50px; border: 0; border-radius: 99px; background: var(--acc); color: #fff; font-weight: 600; font-size: 15px; display: flex; align-items: center; justify-content: center; gap: 9px; transition: background .2s, transform .2s, box-shadow .2s; box-shadow: 0 10px 22px rgba(188, 70, 11, .28); }
.lg-btn:hover { background: var(--accd); transform: translateY(-1px); }
.lg-links { margin-top: auto; padding-top: 22px; border-top: 1px solid #e9edf6; font-size: 13px; }

@media (max-width: 820px) {
    .lg-card { grid-template-columns: minmax(0, 1fr); }
    .lg-left { padding: 24px 24px 22px; }
    .lg-logo { width: 68px; height: 68px; }
    .lg-left h1 { margin-top: 16px; font-size: 23px; }
    .lg-points, .lg-sub + .lg-points { gap: 10px; }
    .lg-right { padding: 28px 24px 24px; }
}
@media (max-width: 480px) { .lg-points small { display: none; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }