/* Tip: you can move this block into /assets/css/auth.css */
    .lms-auth {
      --brand: #2E5077;            /* EMND navy */
      --brand-dark: #234462;
      --brand-deep: #172f49;
      --teal: #4DA1A9;
      --mint: #79D7BE;
      --cream: #F4EDD3;
      --ink: #213b56;
      --muted: #506778;
      --line: #d8e2df;
      --surface: #F4EDD3;
      --bs-primary: #2E5077;
      --bs-primary-rgb: 46,80,119;
      font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
      color: var(--ink);
      background: var(--cream);
      -webkit-font-smoothing: antialiased;
    }

    /* ---------- Brand panel ---------- */
    .auth-brand {
      position: relative;
      overflow: hidden;
      color: #fff;
      /* Image is decorative, on the LEFT welcome panel only. */
      background-image:
        linear-gradient(145deg, rgba(23,47,73,.86), rgba(46,80,119,.81)),
        url('/assets/images/emnd-learning-pattern.png');
      background-color: #2E5077;
      background-position: center, center;
      background-size: cover, cover;
      background-repeat: no-repeat;
    }
    .auth-brand::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(800px 500px at 10% 100%, rgba(77,161,169,.18), transparent 80%);
      pointer-events: none;
    }
    .auth-brand-inner {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 560px;
      padding: 3rem;
    }
    .brand-mark {
      display: inline-flex; align-items: center; gap: .75rem;
      font-weight: 600; font-size: 1.05rem; letter-spacing: .01em;
    }
    .brand-mark .logo {
      width: 44px; height: 44px; border-radius: 12px;
      display: grid; place-items: center;
      background: rgba(121,215,190,.18);
      border: 1px solid rgba(255,255,255,.28);
      font-size: 1.4rem;
    }
    .auth-brand h1 {
      font-size: clamp(2rem, 2.6vw, 2.75rem);
      line-height: 1.15;
      font-weight: 700;
      letter-spacing: -.02em;
      margin: 3.5rem 0 1rem;
    }
    .auth-brand .lead {
      color: rgba(255,255,255,.93);
      font-size: 1.1rem;
      line-height: 1.6;
      max-width: 46ch;
      margin-bottom: 2.5rem;
    }
    .feature-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1rem 1.5rem;
      padding: 0; margin: 0; list-style: none;
    }
    .feature-grid li {
      display: flex; align-items: center; gap: .75rem;
      font-weight: 500; font-size: .95rem;
    }
    .feature-grid .ico {
      flex: none;
      width: 36px; height: 36px; border-radius: 10px;
      display: grid; place-items: center;
      background: rgba(121,215,190,.14);
      border: 1px solid rgba(255,255,255,.22);
    }
    .brand-foot {
      position: absolute; z-index: 1; left: 3rem; bottom: 2rem;
      font-size: .85rem; color: rgba(255,255,255,.7);
    }

    /* ---------- Form panel ---------- */
    .auth-form-wrap {
      background: var(--surface);
      background-image: radial-gradient(600px 350px at 50% 0%, rgba(77,161,169,.13), transparent 75%);
    }
    .auth-card {
      width: 100%;
      max-width: 440px;
      background: #fff;
      border: 1px solid rgba(46,80,119,.10);
      border-radius: 1.25rem;
      box-shadow: 0 1px 2px rgba(46,80,119,.04), 0 20px 40px -12px rgba(46,80,119,.15);
      padding: 2.5rem 2.25rem 2rem;
    }
    .auth-icon {
      width: 56px; height: 56px; border-radius: 16px;
      display: grid; place-items: center;
      font-size: 1.6rem;
      color: #276F77;
      background: rgba(121,215,190,.23);
      margin-bottom: 1.25rem;
    }
    .auth-card h2 { color: var(--brand); font-size: 1.65rem; font-weight: 700; letter-spacing: -.02em; margin-bottom: .35rem; }
    .auth-card .sub { color: var(--muted); margin-bottom: 1.75rem; }

    .auth-card .form-label { font-size: .875rem; font-weight: 600; margin-bottom: .4rem; }
    .auth-card .input-group-text {
      background: var(--surface);
      border-color: var(--line);
      color: var(--muted);
      padding-inline: .9rem;
    }
    .auth-card .form-control {
      border-color: var(--line);
      padding: .7rem .9rem;
      font-size: 1rem;
    }
    .auth-card .form-control::placeholder { color: #adb5bd; }
    .auth-card .input-group:focus-within .input-group-text,
    .auth-card .input-group:focus-within .btn-reveal,
    .auth-card .input-group:focus-within .form-control {
      border-color: var(--teal);
    }
    .auth-card .input-group:focus-within {
      border-radius: .375rem;
      box-shadow: 0 0 0 .22rem rgba(77,161,169,.2);
    }
    .auth-card .input-group .form-control:focus { box-shadow: none; }
    .btn-reveal {
      background: #fff;
      border: 1px solid var(--line);
      border-left: 0;
      color: var(--muted);
      padding-inline: .9rem;
    }
    .btn-reveal:hover { color: var(--brand); background: #fff; }
    .btn-reveal:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

    .btn-signin {
      background: var(--mint) !important;
      border-color: var(--mint) !important;
      color: #163a59 !important;
      padding: .8rem 1rem;
      font-weight: 600;
      border-radius: .6rem;
      box-shadow: 0 6px 14px -6px rgba(46,80,119,.28);
      transition: transform .12s ease, box-shadow .12s ease;
    }
    .btn-signin:hover { background: #9be3ce !important; border-color: #9be3ce !important; transform: translateY(-1px); box-shadow: 0 10px 18px -8px rgba(46,80,119,.35); }
    .btn-signin:active { transform: translateY(0); }
    .btn-signin[disabled] { opacity: .85; transform: none; }

    .auth-links a { color: #276F77; font-weight: 500; text-decoration: none; }
    .auth-links a:hover { text-decoration: underline; }

    .secure-note {
      display: flex; align-items: center; justify-content: center; gap: .4rem;
      color: var(--muted); font-size: .8rem;
      margin-top: 1.5rem; padding-top: 1.25rem;
      border-top: 1px solid var(--line);
    }
    .mobile-brand { display: none; }

    @media (max-width: 991.98px) {
      .mobile-brand {
        display: flex; align-items: center; gap: .6rem;
        justify-content: center; font-weight: 600; color: var(--brand-dark);
        margin-bottom: 1.25rem;
      }
      .mobile-brand .logo {
        width: 38px; height: 38px; border-radius: 10px;
        display: grid; place-items: center;
        background: var(--brand); color: var(--mint); font-size: 1.2rem;
      }
    }
    /* Keep inputs and buttons readable without affecting authentication logic. */
    .lms-auth .auth-card .form-control { background-color: #fff; color: var(--ink); }
    .lms-auth .auth-card .form-control::placeholder { color: #6a7d89; }
    .lms-auth .auth-card .btn-reveal { color: #276F77; }
    .lms-auth .feature-grid .ico i, .lms-auth .brand-mark .logo i { color: #a8f0dc; }
    .lms-auth .auth-brand .brand-foot { color: rgba(255,255,255,.82); }

    @media (max-width: 575.98px) {
      .auth-card { padding: 2rem 1.35rem 1.5rem; border-radius: 1rem; }
    }
    @media (prefers-reduced-motion: reduce) {
      .btn-signin { transition: none; }
    }
/* Shared authentication components: preserve accessible contrast and smooth scrolling. */
html, body { min-height: 100%; }
.lms-auth .auth-form-wrap { min-height: 100vh; }
.lms-auth .btn-primary {
  --bs-btn-color:#163a59; --bs-btn-bg:#79D7BE; --bs-btn-border-color:#79D7BE;
  --bs-btn-hover-color:#163a59; --bs-btn-hover-bg:#9be3ce; --bs-btn-hover-border-color:#9be3ce;
  --bs-btn-active-color:#163a59; --bs-btn-active-bg:#65c5ab; --bs-btn-active-border-color:#65c5ab;
  --bs-btn-focus-shadow-rgb:77,161,169;
}
.lms-auth .form-control:focus { border-color:#4DA1A9; }
.lms-auth .auth-icon { background:rgba(77,161,169,.14); color:#276F77; }
.lms-auth .auth-card .alert { border-radius:.75rem; }
.lms-auth .form-control.code-entry { letter-spacing:.3em; font-weight:700; font-size:1.4rem; }
.lms-auth .auth-back { color:#276F77; text-decoration:none; font-weight:600; }
.lms-auth .auth-back:hover { text-decoration:underline; }
@media (max-width:575.98px) { .lms-auth .auth-form-wrap { padding-block:1.5rem; } }