/* =====================================================================
   Sign-in screens (LMS login / register, Admin & Staff sign-in)
   Split screen: brand panel (left) + form (right). Colours and fonts
   come from brand.css; sizes are in rem so the layout scales on big screens.
   ===================================================================== */

html { font-size: max(16px, calc(.357vw + 10.86px)); }
*, *::before, *::after { box-sizing: border-box; }
body.au { margin: 0; min-height: 100vh; font-family: var(--brand-font-body); color: var(--brand-ink); background: #fff; -webkit-font-smoothing: antialiased; }
.au a { color: inherit; }
.au .au-ghost { color: var(--brand-blue); }
.au .au-links a { color: var(--brand-blue); }
.au .au-links a:hover { color: var(--brand-orange); }

.au-shell { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); min-height: 100vh; }

/* ---------------------------------------------------------------- brand panel */
.au-brand { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; padding: clamp(1.6rem, 3.2vw, 3.2rem) clamp(1.6rem, 4vw, 4.5rem); color: #fff;
  background: radial-gradient(70rem 40rem at 90% -10%, #12388a 0%, transparent 60%), linear-gradient(170deg, #06142f, #050f26 75%); }
.au-aurora { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.au-aurora i { position: absolute; border-radius: 50%; filter: blur(5.5rem); mix-blend-mode: screen; }
.au-aurora i:nth-child(1) { width: 34rem; height: 34rem; left: -9rem; top: -10rem; background: radial-gradient(circle, rgba(29, 111, 224, .85), transparent 66%); animation: au-a 19s ease-in-out infinite alternate; }
.au-aurora i:nth-child(2) { width: 30rem; height: 30rem; right: -9rem; bottom: -8rem; background: radial-gradient(circle, rgba(255, 122, 26, .55), transparent 66%); animation: au-b 23s ease-in-out infinite alternate; }
.au-aurora i:nth-child(3) { width: 22rem; height: 22rem; left: 35%; top: 38%; background: radial-gradient(circle, rgba(56, 189, 248, .35), transparent 66%); animation: au-c 27s ease-in-out infinite alternate; }
@keyframes au-a { to { transform: translate(12rem, 8rem) scale(1.18); } }
@keyframes au-b { to { transform: translate(-11rem, -7rem) scale(1.12); } }
@keyframes au-c { to { transform: translate(-8rem, 9rem) scale(.9); } }
.au-grid { position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 3.4rem 3.4rem; -webkit-mask-image: radial-gradient(ellipse 80% 70% at 40% 40%, #000 20%, transparent 78%); mask-image: radial-gradient(ellipse 80% 70% at 40% 40%, #000 20%, transparent 78%); }

.au-logo { display: inline-flex; align-self: flex-start; align-items: center; padding: .5rem .9rem; background: #fff; border-radius: .9rem; box-shadow: 0 .8rem 1.8rem -.9rem rgba(0, 0, 0, .6); transition: transform .3s; }
.au-logo:hover { transform: translateY(-2px); }
.au-logo img { display: block; height: 3.1rem; width: auto; }
.au-brand-body { max-width: 35rem; }
.au-pill { display: inline-flex; align-items: center; gap: .6rem; padding: .5rem 1rem; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; backdrop-filter: blur(10px); font: 600 .72rem/1 var(--brand-font-head); letter-spacing: .09em; text-transform: uppercase; color: #dbe7ff; }
.au-pill i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--brand-orange); animation: au-ping 2s infinite; }
@keyframes au-ping { 70% { box-shadow: 0 0 0 .6rem rgba(249, 115, 22, 0); } 100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0); } }
.au-brand h2 { margin: 1.3rem 0 1rem; font: 700 clamp(1.9rem, 3.1vw, 3rem)/1.14 var(--brand-font-head); letter-spacing: -.02em; color: #fff; }
.au-brand h2 em { font-style: normal; background: linear-gradient(90deg, #ffb347, var(--brand-orange) 60%, #ff4d6d); -webkit-background-clip: text; background-clip: text; color: transparent; }
.au-brand p.lead { margin: 0; font: 400 1.02rem/1.75 var(--brand-font-body); color: #b7c6e6; }
.au-feats { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: .9rem; }
.au-feats li { display: flex; gap: .9rem; align-items: center; padding: .85rem 1rem; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); border-radius: .9rem; backdrop-filter: blur(8px); transition: transform .3s, background .3s, border-color .3s; }
.au-feats li:hover { transform: translateX(.35rem); background: rgba(255, 255, 255, .09); border-color: rgba(251, 146, 60, .55); }
.au-feats i { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: .7rem; background: linear-gradient(135deg, var(--brand-blue-2), #1d6fe0); font-size: 1.1rem; color: #fff; }
.au-feats b { display: block; font: 600 .95rem/1.25 var(--brand-font-head); color: #fff; }
.au-feats span { display: block; margin-top: .15rem; font: 400 .8rem/1.4 var(--brand-font-body); color: #9fb2d8; }
.au-stats { display: flex; flex-wrap: wrap; gap: 1.2rem 2.6rem; padding-top: 1.4rem; border-top: 1px solid rgba(255, 255, 255, .12); }
.au-stats b { display: block; font: 700 1.7rem/1 var(--brand-font-head); color: var(--brand-orange-2); }
.au-stats span { display: block; margin-top: .4rem; font: 600 .68rem/1.2 var(--brand-font-head); letter-spacing: .1em; text-transform: uppercase; color: #8fa3cc; }
.au-note { display: inline-flex; align-items: center; gap: .6rem; font: 500 .85rem/1.4 var(--brand-font-body); color: #9fb2d8; }
.au-note i { color: var(--brand-orange-2); font-size: 1.05rem; }

/* ---------------------------------------------------------------- form panel */
.au-panel { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: clamp(1.6rem, 4vw, 3.5rem) clamp(1.2rem, 4vw, 4rem); background: linear-gradient(180deg, #fff, var(--brand-bg)); }
.au-card { width: min(100%, 29rem); animation: au-up .8s cubic-bezier(.2, .8, .2, 1) both; }
.au-card.is-wide { width: min(100%, 36rem); }
@keyframes au-up { from { opacity: 0; transform: translateY(1.6rem); } }
.au-eyebrow { margin: 0 0 .5rem; font: 600 .74rem/1 var(--brand-font-head); letter-spacing: .14em; text-transform: uppercase; color: var(--brand-orange); }
.au-card h1 { margin: 0 0 .5rem; font: 700 clamp(1.7rem, 2.4vw, 2.2rem)/1.15 var(--brand-font-head); letter-spacing: -.02em; color: var(--brand-ink); }
.au-card h1 em { font-style: normal; color: var(--brand-orange); }
.au-sub { margin: 0 0 1.8rem; font: 400 .98rem/1.6 var(--brand-font-body); color: var(--brand-muted); }

.au-alert { display: flex; gap: .7rem; align-items: flex-start; margin: 0 0 1.2rem; padding: .85rem 1rem; border-radius: .8rem; font: 500 .9rem/1.45 var(--brand-font-body); }
.au-alert i { margin-top: .12rem; }
.au-alert.err { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.au-alert.info { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
.au-alert.ok { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }

.au-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.au-field { display: block; margin: 0 0 1.15rem; }
.au-field > span { display: block; margin-bottom: .45rem; font: 600 .82rem/1 var(--brand-font-head); color: #2c3856; }
.au-field > span small { font: 500 .75rem/1 var(--brand-font-body); color: var(--brand-muted); }
.au-input { position: relative; display: block; }
.au-input > i.lead-ico { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); font-size: 1.05rem; color: #8a97b3; pointer-events: none; transition: color .2s; }
.au-input input { width: 100%; padding: .95rem 1rem .95rem 2.9rem; border: 1.5px solid #d9e2f0; border-radius: .8rem; background: #fff; font: 500 1rem/1.3 var(--brand-font-body); color: var(--brand-ink); outline: none; transition: border-color .2s, box-shadow .2s; }
.au-input input::placeholder { color: #a2adc4; font-weight: 400; }
.au-input input:hover { border-color: #c2cfe4; }
.au-input input:focus { border-color: var(--brand-blue); box-shadow: 0 0 0 .28rem rgba(10, 74, 138, .13); }
.au-input:focus-within > i.lead-ico { color: var(--brand-blue); }
.au-input .ra-password-toggle { position: absolute; right: .45rem; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border: 0; border-radius: 50%; background: transparent; color: #7b88a6; cursor: pointer; transition: background .2s, color .2s; }
.au-input .ra-password-toggle:hover { background: var(--brand-sky); color: var(--brand-blue); }
.au-input.has-toggle input { padding-right: 3.2rem; }

.au-btn { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: .6rem; width: 100%; margin-top: .4rem; padding: 1rem 1.4rem; border: 0; border-radius: .8rem; background: var(--brand-orange); color: #fff; font: 600 1rem/1 var(--brand-font-head); cursor: pointer; box-shadow: 0 1rem 1.8rem -.9rem rgba(249, 115, 22, .9); transition: transform .25s, box-shadow .25s, background .25s; }
.au-btn:hover { background: var(--brand-orange-deep); transform: translateY(-2px); box-shadow: 0 1.2rem 2rem -.9rem rgba(249, 115, 22, 1); }
.au-btn:active { transform: translateY(0); }
.au-btn::after { content: ""; position: absolute; top: 0; left: -80%; width: 50%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-20deg); }
.au-btn:hover::after { left: 130%; transition: left .7s; }
.au-btn i { transition: transform .25s; }
.au-btn:hover i { transform: translateX(.3rem); }
.au-btn[disabled] { opacity: .7; cursor: progress; }

.au-links { margin: 1.4rem 0 0; text-align: center; font: 400 .92rem/1.5 var(--brand-font-body); color: var(--brand-muted); }
.au-links a { color: var(--brand-blue); font-weight: 600; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s, color .2s; }
.au-links a:hover { color: var(--brand-orange); border-bottom-color: currentColor; }
.au-or { display: flex; align-items: center; gap: 1rem; margin: 1.5rem 0 1.1rem; font: 600 .72rem/1 var(--brand-font-head); letter-spacing: .12em; text-transform: uppercase; color: #9aa6c0; }
.au-or::before, .au-or::after { content: ""; flex: 1; height: 1px; background: #dde5f1; }
.au-ghost { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; padding: .9rem 1.2rem; border: 1.5px solid var(--brand-line); border-radius: .8rem; background: #fff; font: 600 .95rem/1 var(--brand-font-head); color: var(--brand-blue); text-decoration: none; transition: border-color .2s, background .2s, transform .2s; }
.au-ghost:hover { border-color: var(--brand-blue); background: var(--brand-sky); transform: translateY(-2px); }
.au-foot { margin: 2rem 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.4rem; font: 500 .85rem/1.4 var(--brand-font-body); color: var(--brand-muted); }
.au-foot a { text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; transition: color .2s; }
.au-foot a:hover { color: var(--brand-orange); }

/* ---------------------------------------------------------------- staggered entrance of the brand panel */
.au-brand-body > *, .au-feats li, .au-stats > * { animation: au-up .8s cubic-bezier(.2, .8, .2, 1) both; }
.au-brand-body > :nth-child(1) { animation-delay: .1s; } .au-brand-body > :nth-child(2) { animation-delay: .2s; } .au-brand-body > :nth-child(3) { animation-delay: .3s; }
.au-feats li:nth-child(1) { animation-delay: .4s; } .au-feats li:nth-child(2) { animation-delay: .5s; } .au-feats li:nth-child(3) { animation-delay: .6s; } .au-feats li:nth-child(4) { animation-delay: .7s; }
.au-stats > :nth-child(1) { animation-delay: .8s; } .au-stats > :nth-child(2) { animation-delay: .9s; } .au-stats > :nth-child(3) { animation-delay: 1s; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1000px) {
  .au-shell { grid-template-columns: 1fr; }
  .au-brand { padding: 1.3rem 1.4rem 1.8rem; gap: 1.2rem; }
  .au-brand-body { max-width: none; }
  .au-brand h2 { margin: 1rem 0 .6rem; font-size: 1.55rem; }
  .au-brand p.lead, .au-feats, .au-stats { display: none; }
  .au-panel { padding: 1.8rem 1.2rem 2.4rem; background: var(--brand-bg); }
  .au-card { background: #fff; padding: 1.6rem 1.3rem; border-radius: 1.2rem; box-shadow: 0 1.4rem 3rem -1.8rem rgba(11, 31, 74, .4); margin-top: -2.6rem; position: relative; }
}
@media (max-width: 520px) {
  .au-row { grid-template-columns: 1fr; }
  .au-logo img { height: 2.7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .au-aurora i, .au-pill i { animation: none; }
  .au-card, .au-brand-body > *, .au-feats li, .au-stats > * { animation: none; }
  .au-btn::after { display: none; }
}

/* shorter laptop screens: keep the whole brand panel in one screen */
@media (min-width: 1001px) and (max-height: 880px) {
  .au-brand { gap: 1.2rem; padding-top: 1.4rem; padding-bottom: 1.4rem; }
  .au-brand h2 { margin: 1rem 0 .7rem; font-size: clamp(1.7rem, 2.6vw, 2.5rem); }
  .au-feats { margin-top: 1.2rem; gap: .55rem; }
  .au-feats li { padding: .55rem .9rem; }
  .au-feats i { width: 2.2rem; height: 2.2rem; }
  .au-stats { padding-top: 1rem; }
  .au-stats b { font-size: 1.4rem; }
}
@media (min-width: 1001px) and (max-height: 720px) { .au-brand p.lead { display: none; } }