/* CAQA QMS account experience. Artwork is conceptual, with no live record data. */
.auth-page { margin: 0; padding: 20px; background: #edf0f5; color: #18243f; -webkit-font-smoothing: antialiased; }
.auth-page *, .auth-page *::before, .auth-page *::after { box-sizing: border-box; }
.auth { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); max-width: 1920px; min-height: calc(100svh - 40px); margin: auto; background: #fff; border: 1px solid #fff; border-radius: 26px; overflow: hidden; box-shadow: 0 16px 60px #172b4910; }
.auth-brand { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; padding: 36px 46px 28px; color: #fff; background: #101d3e; }
.auth-brand::before { content: ''; position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse at 12% 5%, #374f8e66, transparent 55%), radial-gradient(ellipse at 85% 80%, #25476b88, transparent 60%), linear-gradient(145deg, #142442, #101931 55%, #172951); }
.auth-brand::after { content: ''; position: absolute; z-index: -1; width: 720px; height: 720px; border: 1px solid #a2baff0c; border-radius: 50%; right: -440px; top: -220px; box-shadow: 0 0 0 70px #a2baff04, 0 0 0 140px #a2baff03; pointer-events: none; }
.auth-light { position: absolute; inset: 15% -15% -35%; z-index: -1; background: radial-gradient(ellipse at 48% 58%, #4352c135, transparent 48%); animation: auth-light 14s ease-in-out infinite alternate; pointer-events: none; }
.auth-brand-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.auth-page .auth-mark { display: inline-flex; align-items: center; padding: 10px 15px; border: 1px solid #fff; border-radius: 16px; background: linear-gradient(135deg, #fff, #f0f5fb); box-shadow: 0 8px 30px #050c2520, 0 1px 0 #ffffff90 inset; text-decoration: none; flex-shrink: 0; }
.auth-mark > img { display: block; width: clamp(185px, 18vw, 250px); height: auto; }
.auth-edition { color: #c0cdeb; border: 1px solid #b4c5f02b; border-radius: 30px; padding: 8px 12px; font-size: 11px; white-space: nowrap; }
.auth-story { width: 100%; max-width: 760px; margin: auto; }
.auth-pitch { position: relative; z-index: 1; padding-top: 10px; }
.auth-eyebrow { display: flex; align-items: center; gap: 9px; color: #b8cbee; font-size: 10px; line-height: 1.5; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; margin: 0 0 18px; }
.auth-eyebrow span { width: 6px; height: 6px; border-radius: 50%; background: #9ce6dd; box-shadow: 0 0 14px #80e5d84d; }
.auth-pitch h2 { margin: 0; color: #fff; font-size: clamp(46px, 4.25vw, 78px); font-weight: 600; letter-spacing: -.065em; line-height: 1.02; }
.auth-pitch h2 em { color: #b6c8ff; font-style: normal; background: linear-gradient(110deg, #b6c8ff 10%, #acdcd9 80%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.auth-description { max-width: 385px; color: #b9c6e0; font-size: 14px; line-height: 1.65; margin: 20px 0 0; }
.auth-art { position: relative; max-width: 720px; width: 100%; margin: -12px auto -20px; }
.workspace-art { display: block; width: 100%; height: auto; overflow: hidden; }
.auth-brand-motion { display: none; position: absolute; width: 120%; height: 120%; left: -10%; top: -8%; object-fit: contain; pointer-events: none; opacity: .8; mask-image: radial-gradient(ellipse, #000 40%, transparent 72%); }
.auth-video-ready .auth-brand-motion { display: block; }
.auth-video-ready .workspace-art { position: relative; }
.auth-video-ready .art-orbits, .auth-video-ready .art-satellite { opacity: .28; }
@media (max-width: 760px), (prefers-reduced-motion: reduce), (forced-colors: active) { .auth-video-ready .auth-brand-motion { display: none; } }
.art-core { animation: auth-float 7s ease-in-out infinite; }
.art-document { animation: auth-document 8s ease-in-out infinite; }
.art-satellite { transform-origin: 363px 225px; animation: auth-orbit 26s linear infinite; }
.art-label { position: absolute; display: flex; align-items: center; gap: 10px; padding: 13px 15px; border: 1px solid #a4bdf638; border-radius: 13px; background: linear-gradient(125deg, #344a73ee, #233759d9); box-shadow: 0 15px 35px #040c2333, inset 0 1px #e1eaff0d; color: #f2f5ff; font-size: 12px; font-weight: 600; backdrop-filter: blur(12px); }
.art-label small { display: block; color: #bdcce7; font-size: 9px; font-weight: 400; margin-top: 3px; }
.art-label-students { top: 9%; left: 28%; transform: rotate(-4deg); }
.art-label-quality { bottom: 12%; right: -1%; transform: rotate(3deg); }
.art-dot { width: 28px; height: 28px; border: 7px solid #b9c9ff; border-radius: 50%; background: #4a669e; box-shadow: 0 0 0 4px #b9c9ff16; }
.art-check { display: grid; place-items: center; width: 28px; height: 28px; color: #b7f0df; border: 1px solid #98e7d257; border-radius: 9px; background: #8edcca18; font-size: 16px; }
.art-caption { position: absolute; bottom: 1%; left: 7%; color: #b0bfdc; font-size: 9px; letter-spacing: 1.1px; text-transform: uppercase; }
.auth-brand-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; color: #acbddc; font-size: 10px; border-top: 1px solid #bed2ff1c; padding-top: 19px; }
.motion-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 4px 5px; border: 0; background: transparent; color: #c0cdea; font: inherit; cursor: pointer; }
.motion-toggle svg { width: 12px; height: 12px; }
.auth-page [hidden] { display: none !important; }
.auth-form { display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 40px; padding: 36px clamp(28px, 4.5vw, 80px) 28px; background: radial-gradient(ellipse at 100% 0%, #eef3fc66, transparent 45%), #fff; }
.auth-form-top, .auth-form-foot { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 15px; color: #536079; font-size: 10px; }
.auth-workspace-label { color: #536079; letter-spacing: .25px; }
.auth-secure { display: inline-flex; align-items: center; gap: 5px; color: #526079; }
.auth-secure svg { width: 16px; height: 16px; }
.login-shell { width: 100%; max-width: var(--auth-form-width, 420px); margin: auto; animation: auth-enter .65s ease-out both; }
.login-symbol { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 22px; background: #f0f3fc; border: 1px solid #e2e8f8; border-radius: 14px; color: #3a58a0; box-shadow: 0 3px 6px #263d7210; }
.login-symbol svg { width: 24px; height: 24px; }
.login-symbol img { width: 28px; height: 32px; object-fit: contain; }
.auth-credit { display: block; margin-top: 5px; font-size: 8px; }
@media (max-width: 520px) { .auth-brand-header .auth-edition { display: none; } }
.login-brand { margin-bottom: 27px; }
.login-brand .login-eyebrow { color: #536079; font-size: 9px; font-weight: 650; letter-spacing: 1.6px; margin: 0 0 9px; }
.login-brand h1 { color: #17243f; font-size: clamp(30px, 2.6vw, 42px); letter-spacing: -.055em; font-weight: 600; line-height: 1.15; margin: 0; text-wrap: balance; }
.login-brand > p:last-child { color: #536079; font-size: 13px; line-height: 1.7; margin: 12px 0 0; overflow-wrap: anywhere; }
.login-card { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.login-card .form-group { margin-bottom: 21px; }
.login-card .form-label { color: #2c3954; font-size: 12px; font-weight: 600; margin-bottom: 8px; }
.login-card .form-input { height: 51px; border: 1px solid #cbd3e0; border-radius: 9px; background: #fcfdff; color: #18243f; font-size: 14px; padding: 12px 15px; transition: border-color .18s, box-shadow .18s, background .18s; }
.login-card .form-input::placeholder { color: #68758c; opacity: 1; font-size: 12px; }
.login-card .form-input:hover { border-color: #8e9eb9; }
.login-card .form-input:focus { background: #fff; border-color: #3f61bd; outline: 2px solid #3f61bd; outline-offset: 2px; box-shadow: 0 0 0 5px #536eca13; }
.login-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.auth-page a { text-underline-offset: 3px; }
.login-label-row a { color: #355596; font-size: 11px; font-weight: 500; text-decoration: none; }
.login-label-row a:hover, .login-links a:hover { text-decoration: underline; }
.password-field { position: relative; }
.password-field .form-input { padding-right: 52px; }
.password-toggle { position: absolute; right: 4px; top: 4px; display: grid; place-items: center; width: 43px; height: 43px; padding: 10px; background: transparent; border: 0; border-radius: 6px; color: #697992; cursor: pointer; }
.password-toggle:hover { color: #2c4989; background: #edf1fa; }
.password-toggle svg { width: 20px; height: 20px; }
.password-toggle .eye-slash { display: none; }
.password-toggle[aria-pressed="true"] .eye-slash { display: block; }
.login-card .btn-primary { width: 100%; min-height: 51px; margin-top: 5px; border: 1px solid #253e80; border-radius: 9px; background: linear-gradient(110deg, #243a72, #3557a0); color: #fff; box-shadow: 0 6px 14px #2f4b8526, inset 0 1px #ffffff20; font-size: 13px; font-weight: 600; transition: transform .2s, box-shadow .2s, background .2s; }
.login-card .btn-primary:hover { background: linear-gradient(110deg, #2c498b, #3d63b4); transform: translateY(-2px); box-shadow: 0 9px 18px #2f4b8535; }
.login-card .btn-primary:active { transform: translateY(0); }
.auth-submit { position: relative; display: flex; align-items: center; justify-content: center; }
.auth-submit svg { position: absolute; right: 17px; width: 18px; height: 18px; transition: transform .2s; }
.auth-submit:hover svg { transform: translateX(3px); }
.login-links { margin-top: 23px; text-align: center; color: #536079; font-size: 11px; line-height: 1.6; }
.login-links a { color: #355596; }
.login-links p { margin: 1px 0 0; color: #384964; font-size: 11px; }
.login-reassurance { display: flex; align-items: center; justify-content: center; gap: 10px; border-top: 1px solid #e9ecf2; margin-top: 28px; padding-top: 21px; }
.login-reassurance > svg { width: 23px; height: 23px; flex-shrink: 0; color: #637993; }
.login-reassurance p { margin: 0; color: #40516b; font-size: 10px; font-weight: 600; line-height: 1.6; }
.login-reassurance span { display: block; color: #536079; font-size: 9px; font-weight: 400; }
.auth-form-foot { font-size: 9px; color: #536079; }
.login-alert, .login-note { padding: 12px 14px; margin-bottom: 20px; border: 1px solid #fecaca; border-radius: 9px; color: #a32121; background: #fff2f2; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.login-note { color: #244376; border-color: #cfddf5; background: #f1f6ff; }
.otp-secret { padding: 12px; background: #f0f4fb; border: 1px dashed #bbc8e1; border-radius: 8px; font: 15px var(--font-mono); letter-spacing: .12em; overflow-wrap: anywhere; text-align: center; }
.login-card code { overflow-wrap: anywhere; }
.auth-page :focus-visible { outline: 2px solid #4765b1; outline-offset: 4px; }
.auth-brand :focus-visible { outline-color: #b2e9ed; }
.auth-page .skip-link { position: fixed; top: 8px; left: -9999px; z-index: 100; padding: 10px 14px; color: #17243f; background: #fff; border: 1px solid #abb8ce; border-radius: 6px; }
.auth-page .skip-link:focus { left: 10px; }
.auth-page #main:focus { outline: none; }
@keyframes auth-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes auth-document { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes auth-orbit { to { transform: rotate(360deg); } }
@keyframes auth-light { to { transform: translate(4%, -6%) scale(1.08); } }
@keyframes auth-enter { from { opacity: .65; transform: translateY(9px); } to { opacity: 1; transform: none; } }
.auth-motion-paused .auth-brand *, .auth-motion-paused .auth-brand::before, .auth-motion-paused .auth-brand::after { animation-play-state: paused !important; }
@media (min-width: 1600px) { .auth-art { max-width: 660px; margin-top: -20px; } .auth-description { max-width: 450px; } }
@media (max-width: 1150px) { .auth-brand { padding: 28px; } .auth-edition { display: none; } .auth-form { padding: 30px; } .auth-art { margin-top: 16px; margin-bottom: 0; } .art-label { padding: 10px; font-size: 10px; } .art-label small { font-size: 8px; } .art-label-quality { right: 0; bottom: 6%; } .art-caption { display: none; } .auth-form-top { font-size: 9px; } .auth-brand-foot > span { max-width: 140px; line-height: 1.6; } }
@media (max-width: 760px) { .auth-page { padding: 10px; } .auth { grid-template-columns: 1fr; min-height: calc(100svh - 20px); border-radius: 20px; } .auth-brand { padding: 23px 25px 26px; gap: 29px; } .auth-mark > svg { width: 37px; height: 37px; } .auth-mark > span { font-size: 21px; } .auth-mark small { font-size: 9px; } .auth-edition { display: inline; font-size: 9px; } .auth-story { position: relative; } .auth-pitch { padding-top: 0; } .auth-eyebrow { font-size: 8px; letter-spacing: 1.6px; margin-bottom: 12px; } .auth-pitch h2 { font-size: clamp(35px, 8vw, 48px); } .auth-description { max-width: 65%; font-size: 11px; margin-top: 13px; line-height: 1.6; } .auth-art { position: absolute; width: 260px; right: -72px; top: 1px; margin: 0; opacity: .55; pointer-events: none; } .art-label, .art-document { display: none; } .auth-brand-foot { display: none; } .auth-form { padding: 30px 25px 22px; gap: 27px; } .auth-form-top { display: none; } .login-symbol { display: none; } .login-brand h1 { font-size: 34px; } .login-brand { margin-bottom: 25px; } .login-brand > p:last-child { font-size: 12px; } .login-links { margin-top: 20px; } .login-reassurance { margin-top: 24px; } .auth-form-foot { font-size: 8px; justify-content: center; flex-wrap: wrap; gap: 6px 15px; } .auth-brand *, .auth-brand::before, .auth-brand::after { animation: none !important; } }
@media (max-width: 380px) { .auth-page { padding: 0; } .auth { border: 0; border-radius: 0; } .auth-brand, .auth-form { padding-left: 22px; padding-right: 22px; } .auth-edition { display: none; } .auth-art { right: -90px; } .auth-description { max-width: 75%; } }
@media (prefers-reduced-motion: reduce) { .auth-page *, .auth-page *::before, .auth-page *::after { animation: none !important; transition: none !important; } .motion-toggle { display: none; } }
@media (scripting: none) { .auth-page *, .auth-page *::before, .auth-page *::after { animation: none !important; } }
@media (forced-colors: active) { .auth-pitch h2 em { -webkit-text-fill-color: currentColor; } .auth-art, .auth-light { display: none; } .auth-brand { border: 1px solid; } .login-card .btn-primary { border: 2px solid ButtonText; } }

.auth-page:not(.auth-motion-ready) .auth-brand * { animation: none !important; }
@media (min-width: 761px) and (max-height: 850px) {
  .auth-form { padding-top: 28px; padding-bottom: 24px; gap: 22px; }
  .login-symbol { width: 38px; height: 38px; margin-bottom: 16px; border-radius: 11px; }
  .login-brand { margin-bottom: 21px; }
  .login-brand > p:last-child { margin-top: 9px; line-height: 1.55; }
  .login-card .form-group { margin-bottom: 17px; }
  .login-links { margin-top: 19px; }
  .login-reassurance { margin-top: 22px; padding-top: 17px; }
  .auth-brand { gap: 22px; padding-top: 28px; padding-bottom: 20px; }
  .auth-art { max-width: 590px; }
  .auth-pitch h2 { font-size: clamp(46px, 4vw, 68px); }
  .auth-description { margin-top: 16px; }
  .auth-brand-foot { padding-top: 12px; }
}
@media (max-width: 760px) { .login-card .form-input { font-size: 16px; } }

/* Pearl, glass and fine-line motion bring the account panel into the visual story. */
.auth-form { position: relative; isolation: isolate; overflow: hidden; background: #f9fbff; }
.auth-form-atmosphere { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; background: linear-gradient(145deg, #f5f8ff, #fff 48%, #f3faf9); }
.auth-panel-glow { position: absolute; width: 460px; height: 460px; border-radius: 50%; pointer-events: none; }
.auth-panel-glow-blue { top: -190px; right: -160px; background: radial-gradient(closest-side, #bdcdf399, #dbe7fc60 55%, transparent); animation: auth-panel-wash 16s ease-in-out infinite alternate; }
.auth-panel-glow-mint { bottom: -200px; left: -170px; background: radial-gradient(closest-side, #b6ddd8a6, #d9f0eb65 55%, transparent); animation: auth-panel-wash 20s ease-in-out infinite alternate-reverse; }
.auth-panel-orbits { position: absolute; top: -80px; right: -125px; width: 360px; height: 360px; transform-origin: center; animation: auth-panel-turn 28s ease-in-out infinite alternate; }
.auth-panel-ribbon { position: absolute; bottom: -75px; left: -145px; width: 440px; height: 275px; animation: auth-panel-ribbon 18s ease-in-out infinite alternate; }
.auth-form-top, .auth-form-foot { position: relative; z-index: 1; }
.login-shell { position: relative; isolation: isolate; }
.login-shell::before { content: ''; position: absolute; inset: -20px -24px; z-index: -1; pointer-events: none; border: 1px solid #ffffffd9; border-radius: 24px; background: linear-gradient(135deg, #ffffffbf, #ffffff85); box-shadow: 0 12px 45px #3557830b, inset 0 1px #fff; backdrop-filter: blur(8px); transition: border-color .3s, box-shadow .3s; }
.login-shell:focus-within::before { border-color: #d6e1f4; box-shadow: 0 16px 50px #35578312, 0 0 0 4px #ffffff66; }
.login-symbol { position: relative; background: linear-gradient(145deg, #fff, #e5ecfc); border-color: #d4def4; box-shadow: 0 5px 13px #3b58981a, inset 0 1px #fff; }
.login-symbol::after { content: ''; position: absolute; inset: -5px; border: 1px solid #8ca8d64d; border-radius: 17px; pointer-events: none; animation: auth-panel-halo 7s ease-in-out infinite; }
.auth-submit { overflow: hidden; }
.auth-submit::before { content: ''; position: absolute; top: -50%; bottom: -50%; left: -50%; width: 35%; transform: skewX(-22deg); background: linear-gradient(90deg, transparent, #ffffff20, transparent); pointer-events: none; transition: left .65s ease; }
.auth-submit:hover::before, .auth-submit:focus-visible::before { left: 120%; }
@keyframes auth-panel-wash { to { transform: translate(-35px, 45px) scale(1.18); } }
@keyframes auth-panel-turn { from { transform: rotate(-8deg); } to { transform: rotate(12deg); } }
@keyframes auth-panel-ribbon { to { transform: translate(18px, -14px) rotate(3deg); } }
@keyframes auth-panel-halo { 0%, 100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.16); opacity: .25; } }
.auth-motion-paused .auth-form-atmosphere *, .auth-motion-paused .login-symbol::after { animation-play-state: paused !important; }
.auth-page:not(.auth-motion-ready) .auth-form-atmosphere *, .auth-page:not(.auth-motion-ready) .login-symbol::after { animation: none !important; }
@media (max-width: 760px) {
  .auth-panel-orbits { width: 280px; height: 280px; top: -100px; right: -135px; opacity: .7; }
  .auth-panel-ribbon { width: 340px; bottom: -45px; left: -200px; opacity: .6; }
  .auth-panel-glow-blue { top: -220px; right: -210px; }
  .auth-panel-glow-mint { bottom: -260px; left: -200px; }
  .login-shell::before { inset: -18px -14px; border-radius: 19px; }
  .auth-form-atmosphere *, .login-symbol::after { animation: none !important; }
}
@media (prefers-reduced-motion: reduce) { .auth-form-atmosphere *, .login-symbol::after { animation: none !important; } .auth-submit::before, .login-shell::before { transition: none !important; } }
@media (forced-colors: active) { .auth-form-atmosphere, .login-symbol::after, .login-shell::before, .auth-submit::before { display: none; } }

/* One continuous backdrop follows a sculpted edge into the brand panel. */
.auth-seam { display: none; }
@supports (mask-image: linear-gradient(#000, #000)) {
  .auth-form { --auth-seam-width: clamp(70px, 8vw, 140px); --auth-seam-overlap: calc(var(--auth-seam-width) / 2); overflow: visible; background: transparent; }
  .auth-form-atmosphere {
    left: calc(-1 * var(--auth-seam-overlap));
    mask-image: url('/static/auth-seam-vertical.svg'), linear-gradient(#000, #000);
    mask-size: var(--auth-seam-width) 100%, calc(100% - var(--auth-seam-width) + 1px) 100%;
    mask-position: left top, right top;
    mask-repeat: no-repeat;
  }
  .auth-seam { display: block; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(-1 * var(--auth-seam-overlap)); width: var(--auth-seam-width); pointer-events: none; }
  .auth-seam-edge { display: block; width: 100%; height: 100%; overflow: visible; }
  .auth-seam-edge-horizontal { display: none; }
  .auth-seam-haze { opacity: .2; }
  .auth-seam-contour { opacity: .65; }
  .auth-seam-glint { opacity: .7; animation: auth-seam-flow 22s linear infinite; }
  @media (max-width: 760px) {
    .auth-form { --auth-seam-width: 66px; }
    .auth-form-atmosphere {
      left: 0; top: calc(-1 * var(--auth-seam-overlap));
      mask-image: url('/static/auth-seam-horizontal.svg'), linear-gradient(#000, #000);
      mask-size: 100% var(--auth-seam-width), 100% calc(100% - var(--auth-seam-width) + 1px);
      mask-position: left top, left bottom;
    }
    .auth-seam { left: 0; right: 0; top: calc(-1 * var(--auth-seam-overlap)); bottom: auto; width: 100%; height: var(--auth-seam-width); }
    .auth-seam-edge-vertical { display: none; }
    .auth-seam-edge-horizontal { display: block; }
    .auth-seam-glint { animation: none; opacity: .25; }
  }
}
@keyframes auth-seam-flow { from { stroke-dashoffset: 1245; } to { stroke-dashoffset: 0; } }
.auth-motion-paused .auth-seam * { animation-play-state: paused !important; }
.auth-page:not(.auth-motion-ready) .auth-seam * { animation: none !important; }
@media (forced-colors: active) { .auth-seam { display: none; } }

/* Transparent brand assets, with the full-colour wordmark on the light surface. */
.auth-page .auth-mark{padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.auth-mark>img{width:52px;height:58px}
.login-full-logo{display:block;width:225px;max-width:70%;margin-bottom:24px;background:transparent}
.login-full-logo img{display:block;width:100%;height:auto}