@font-face {
       font-family: Roboto;
       font-style: normal;
       font-weight: 400;
       font-display: swap;
       src: url('../fonts/Roboto/Roboto-Regular.woff2') format('woff2'),
           url('../fonts/Roboto/Roboto-Regular.woff') format('woff');
   }

   @font-face {
       font-family: Roboto;
       font-style: normal;
       font-weight: 500;
       font-display: swap;
       src: url('../fonts/Roboto/Roboto-Medium.woff2') format('woff2'),
           url('../fonts/Roboto/Roboto-Medium.woff') format('woff');
   }

   @font-face {
       font-family: Roboto;
       font-style: normal;
       font-weight: 700 900;
       font-display: swap;
       src: url('../fonts/Roboto/Roboto-Bold.woff2') format('woff2'),
           url('../fonts/Roboto/Roboto-Bold.woff') format('woff');
   }

   :root {
       --primary: #13599f;
       --primary-dark: #0d345c;
       --accent: #f19620;
   }

   html,
   body {
       min-height: 100%;
   }

   body {
       margin: 0;
       background: #fff;
       color: #1d2b36;
       font-family: Roboto, Arial, sans-serif;
   }

   .auth-shell {
       display: grid;
       grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
       min-height: 100vh;
   }

   .auth-visual {
       position: relative;
       display: flex;
       min-height: 100vh;
       flex-direction: column;
       justify-content: space-between;
       overflow: hidden;
       padding: clamp(28px, 5vw, 64px);
       background-color: var(--primary-dark);
       background-image: linear-gradient(180deg, rgba(13, 39, 59, .25) 0%, rgba(13, 39, 59, .25) 35%, rgba(13, 39, 59, .88) 100%), url('../images/auth/schoolmoo.jpg');
       background-position: center;
       background-repeat: no-repeat;
       background-size: cover;
       color: #fff;
   }

   .auth-visual::after {
       position: absolute;
       inset: 0;
       border: 1px solid rgba(255, 255, 255, .12);
       content: '';
       pointer-events: none;
   }

   .auth-visual-brand,
   .auth-visual-copy,
   .auth-visual-credit {
       position: relative;
       z-index: 1;
   }

   .auth-visual-brand {
       align-self: flex-start;
   }

   .auth-visual-brand img {
       width: min(230px, 75%);
       height: auto;
   }

   .auth-visual-copy {
       max-width: 550px;
       margin: auto 0;
       padding: 48px 0;
   }

   .auth-visual-eyebrow {
       display: inline-block;
       margin-bottom: 18px;
       color: #e7c56e;
       font-size: .72rem;
       font-weight: 700;
       letter-spacing: .14em;
   }

   .auth-visual-copy h1 {
       max-width: 520px;
       margin-bottom: 18px;
       color: #fff;
       font-size: clamp(2.2rem, 3.5vw, 3.7rem);
       font-weight: 700;
       letter-spacing: -.035em;
       line-height: 1.12;
   }

   .auth-visual-copy p {
       max-width: 440px;
       margin: 0;
       color: rgba(255, 255, 255, .82);
       font-size: 1.02rem;
       line-height: 1.7;
   }

   .auth-visual-credit {
       color: rgba(255, 255, 255, .76);
       font-size: .78rem;
   }

   .auth-main {
       display: flex;
       align-items: center;
       justify-content: center;
       min-width: 0;
       padding: clamp(28px, 6vw, 80px);
       background: #fff;
   }

   .auth-panel {
       width: 100%;
       max-width: 430px;
   }

   .auth-panel h4,
   .auth-panel h5 {
       color: var(--primary-dark);
       font-weight: 700;
   }

   .auth-panel .form-group,
   .auth-panel .mb-3 {
       margin-bottom: 1.15rem !important;
   }

   .auth-panel label {
       margin-bottom: .45rem;
       color: #344755;
       font-size: .9rem;
       font-weight: 600;
   }

   .btn {
       border-radius: 4px;
       font-weight: 600;
   }

   .btn-primary {
       background: #13599f;
       border-color: #13599f;
   }

   .btn-primary:hover {
       background: #0e437a;
       border-color: #0e437a;
   }

   .form-control {
       display: block;
       box-sizing: border-box;
       width: 100%;
       border: 1px solid #bdc9d2;
       border-radius: 4px !important;
       background-color: #fff !important;
       box-shadow: none !important;
       font-family: inherit;
       font-size: .95rem;
       font-weight: 400;
       color: #1d2b36;
       min-height: 46px;
       padding: .65rem .8rem;
       transition: box-shadow .15s, border-color .15s ease-in-out;
       -webkit-appearance: none;
       -moz-appearance: none;
       appearance: none;
   }

   .form-control:focus {
       border-color: #34749a;
       box-shadow: 0 0 0 .2rem rgba(52, 116, 154, .16) !important;
   }

   .auth-panel .btn-primary {
       min-height: 46px;
   }

   .otp-input {
       letter-spacing: .3em;
       font-size: 1.5rem;
       text-align: center;
   }

   @media (max-width: 767.98px) {
       .auth-shell {
           grid-template-columns: 1fr;
       }

       .auth-visual {
           min-height: 240px;
           padding: 24px;
       }

       .auth-visual-brand img {
           width: 170px;
       }

       .auth-visual-copy {
           max-width: 520px;
           margin: auto 0 0;
           padding: 26px 0 10px;
       }

       .auth-visual-eyebrow {
           margin-bottom: 9px;
           font-size: .62rem;
       }

       .auth-visual-copy h1 {
           max-width: 460px;
           margin-bottom: 8px;
           font-size: clamp(1.6rem, 6vw, 2.2rem);
       }

       .auth-visual-copy p {
           font-size: .87rem;
       }

       .auth-visual-credit {
           display: none;
       }

       .auth-main {
           align-items: flex-start;
           padding: 32px 24px 44px;
       }
   }