/* A page-specific palette for the photographic sign-in scene. */
.login-experience {
    --login-ink: #f8fafc;
    --login-muted: #d0dbea;
    --login-gold: #f1d49b;
    --login-border: rgb(236 242 255 / 22%);
    --login-ease: cubic-bezier(.16, 1, .3, 1);
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding: 28px clamp(24px, 5vw, 88px) 24px;
    background: #0c203c;
    color: var(--login-ink);
    overflow: clip;
    font-size: 16px;
    line-height: 1.6;
    color-scheme: dark;
}
.login-scene, .login-shade, .login-ambient { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.login-scene img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; display: block; }
.login-shade { background: linear-gradient(90deg, rgb(4 15 34 / 70%) 0%, rgb(6 21 44 / 38%) 42%, rgb(5 20 41 / 9%) 75%), linear-gradient(180deg, rgb(7 24 47 / 44%), transparent 30%, transparent 76%, rgb(4 16 33 / 72%)); }
.login-ambient { background: radial-gradient(ellipse at 12% 26%, rgb(73 114 176 / 20%), transparent 45%); }
.login-identity { display: flex; align-items: center; gap: 14px; width: fit-content; text-shadow: 0 2px 16px #061a33; }
.login-emblem { width: 54px; height: 60px; display: grid; place-items: center; border: 1px solid rgb(243 218 173 / 46%); border-radius: 18px; background: linear-gradient(145deg, rgb(239 216 168 / 16%), rgb(11 34 62 / 38%)); box-shadow: inset 0 1px 0 #ffffff36, 0 10px 28px #03132840; backdrop-filter: blur(12px); color: var(--login-gold); }
.login-emblem .icon { position: relative; z-index: 1; width: 32px; height: 32px; }
.login-brand-name { display: block; font-size: 32px; line-height: 1.25; font-weight: 750; }
.login-institution { display: block; margin-top: 5px; font-size: 13px; color: #edf0f7; }
.login-content { width: 100%; max-width: none; min-height: 0; margin: 0; padding: 16px 0; display: flex; justify-content: flex-end; align-items: center; perspective: 1400px; }
.login-glass { position: relative; width: min(100%, 436px); padding: 34px 36px 28px; border: 1px solid var(--login-border); border-top-color: rgb(247 232 202 / 48%); border-radius: 28px; background: linear-gradient(145deg, rgb(33 53 83 / 80%), rgb(9 27 52 / 78%)); box-shadow: 0 28px 80px #03112380, 0 6px 18px #03112336, inset 0 1px 0 #ffffff24, inset 0 -1px 0 #ffffff08; transform: rotateX(var(--glass-rx, 0deg)) rotateY(var(--glass-ry, 0deg)); transform-style: preserve-3d; backdrop-filter: blur(22px) saturate(115%); -webkit-backdrop-filter: blur(22px) saturate(115%); transition: transform 240ms var(--login-ease), box-shadow 240ms; animation: login-enter 650ms var(--login-ease) backwards; }
.login-glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(ellipse at var(--glass-x, 20%) var(--glass-y, 0%), rgb(216 232 255 / 10%), transparent 64%); }
.login-card-heading { position: relative; margin-bottom: 27px; }
.login-key { position: absolute; top: 0; left: 0; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgb(242 214 168 / 26%); border-radius: 15px; background: linear-gradient(145deg, rgb(231 205 157 / 18%), rgb(231 205 157 / 5%)); color: var(--login-gold); box-shadow: inset 0 1px 0 #fff2, 0 8px 20px #04142a26; }
.login-welcome { color: var(--login-gold); font-size: 13px; font-weight: 600; }
.login-card-heading h1 { font-size: clamp(27px, 3vw, 32px); line-height: 1.4; margin: 6px 0 10px; font-weight: 700; }
.login-card-heading h1:focus { outline: none; }
.login-card-heading p { color: var(--login-muted); font-size: 14px; }
.login-access-form { position: relative; }
.login-field + .login-field { margin-top: 20px; }
.login-field label { display: block; margin-bottom: 9px; font-size: 14px; color: #f1f4fa; font-weight: 600; }
.login-input-wrap { position: relative; }
.login-experience .login-input-wrap input { width: 100%; min-width: 0; height: 54px; padding: 12px 46px 12px 16px; margin: 0; border-radius: 12px; border: 1px solid rgb(209 224 247 / 25%); background: rgb(5 19 41 / 56%); color: var(--login-ink); font-size: 16px; box-shadow: inset 0 2px 6px #04102430; transition: border-color 200ms, box-shadow 200ms, background 200ms; }
.login-experience .login-password-wrap input { padding-left: 52px; text-align: right; }
.login-input-wrap input::placeholder { color: #acbdd3; opacity: 1; font-size: 14px; }
.login-input-wrap input:hover { border-color: rgb(214 230 250 / 45%); }
.login-experience .login-input-wrap input:focus { outline: 2px solid var(--login-gold); outline-offset: 3px; border-color: #edd09b; background: rgb(5 19 41 / 76%); box-shadow: 0 0 0 4px #e4c5940b; }
.login-input-wrap input:autofill { box-shadow: 0 0 0 1000px #192f4d inset; -webkit-text-fill-color: #f8fafc; caret-color: #f8fafc; }
.login-input-icon { position: absolute; right: 15px; top: 0; bottom: 0; display: flex; align-items: center; color: #b8c8df; pointer-events: none; }
.login-password-toggle { position: absolute; top: 5px; left: 5px; width: 44px; height: 44px; padding: 0; display: grid; place-items: center; background: transparent; border: 0; border-radius: 9px; color: #c8d6e8; }
.login-password-toggle:hover { color: var(--login-gold); background: #e4eefc10; }
.login-password-toggle:focus-visible, .login-submit:focus-visible { outline: 3px solid var(--login-gold); outline-offset: 4px; }
.login-eye-slash { display: none; }
.login-password-toggle[aria-pressed=true] .login-eye-slash { display: block; }
.login-experience [hidden] { display: none !important; }
.login-caps-warning { color: #f8dfa9; font-size: 12px; margin: 9px 0 0; }
.login-submit { position: relative; display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; min-height: 54px; margin: 28px 0 0; padding: 13px 18px; border: 1px solid #f1d5a5; border-radius: 12px; background: linear-gradient(115deg, #e1bc7c, #f2d9ac 56%, #e7c48c); color: #14253b; font-size: 15px; font-weight: 750; box-shadow: 0 8px 24px #d7aa5a20, inset 0 1px 0 #fff7; transition: transform 200ms var(--login-ease), box-shadow 200ms, filter 200ms; }
.login-submit:hover { filter: brightness(1.07); box-shadow: 0 12px 28px #d7aa5a30, inset 0 1px 0 #fff7; transform: translateY(-2px); }
.login-submit:active { transform: translateY(0) scale(.99); }
.login-submit:disabled { opacity: .8; transform: none; cursor: wait; }
.login-submit > span, .login-submit > .icon { position: relative; z-index: 1; }
.login-progress { display: none; width: 18px; height: 18px; border: 2px solid #14253b33; border-top-color: #14253b; border-radius: 50%; animation: login-spin 700ms linear infinite; }
.login-access-form[aria-busy=true] .login-progress { display: block; }
.login-access-form[aria-busy=true] .login-submit-arrow { display: none; }
.login-account-help { display: flex; align-items: flex-start; justify-content: center; gap: 8px; margin-top: 23px; padding-top: 20px; border-top: 1px solid rgb(220 233 249 / 15%); color: var(--login-muted); }
.login-account-help p { font-size: 12px; line-height: 1.8; }
.login-account-help .icon { width: 16px; height: 16px; margin-top: 3px; }
.login-error { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 22px; padding: 13px 14px; border: 1px solid #ffc8bd66; border-radius: 12px; background: #512d38; color: #ffe4df; font-size: 13px; }
.login-error .icon { width: 18px; height: 18px; margin-top: 3px; }
.login-error:focus { outline: 2px solid #ffc8bd; outline-offset: 3px; }
.login-attribution { display: flex; gap: 9px; align-items: center; font-size: 12px; color: #e2e7ef; text-shadow: 0 2px 8px #07152a; padding-bottom: 8px; }
.login-attribution span { width: 20px; height: 1px; background: var(--login-gold); }
body:has(.login-experience) .setup-launcher { background: rgb(12 30 54 / 90%); border-color: rgb(237 216 181 / 35%); color: #f0d6aa; box-shadow: 0 4px 20px #07152a40; backdrop-filter: blur(14px); }
body:has(.login-experience) .setup-launcher:hover { background: #253f60; }
@keyframes login-enter { from { opacity: 0; transform: translateY(18px) rotateX(2deg); } to { opacity: 1; transform: rotateX(0) rotateY(0); } }
@keyframes login-spin { to { transform: rotate(360deg); } }
@media (min-width: 1600px) { .login-content { padding-left: 5vw; } .login-glass { width: 460px; padding: 40px; } }
@media (max-width: 800px) {
    .login-experience { padding: 24px 24px 80px; }
    .login-content { justify-content: center; padding: 30px 0; }
    .login-scene img { object-position: center 58%; }
    .login-shade { background: linear-gradient(180deg, #071a344d, #071a3426 60%, #071a345e); }
    .login-identity { margin-inline: auto; }
    .login-attribution { justify-content: center; }
}
@media (max-width: 480px) {
    .login-experience { padding: 24px 18px 80px; }
    .login-content { padding: 28px 0 22px; }
    .login-glass { padding: 26px 24px 24px; border-radius: 24px; }
    .login-key { width: 40px; height: 40px; border-radius: 13px; }
    .login-card-heading { margin-bottom: 24px; }
    .login-brand-name { font-size: 28px; }
    .login-emblem { width: 47px; height: 53px; border-radius: 15px; }
    .login-institution { font-size: 12px; }
    .login-account-help { margin-top: 20px; padding-top: 17px; }
}
@media (max-height: 600px) and (min-width: 801px) { .login-experience { padding-top: 20px; } .login-content { padding: 20px 0 36px; } }
@media (prefers-reduced-motion: reduce) {
    .login-experience *, .login-experience *::before, .login-experience *::after { animation: none !important; transition: none !important; }
    .login-glass, .login-submit { transform: none !important; }
}
@media (forced-colors: active) { .login-glass { background: Canvas; color: CanvasText; border: 1px solid CanvasText; } .login-experience input, .login-submit, .login-password-toggle { border: 1px solid ButtonText; } }

/* Open sign-in: only the controls sit over the photograph. */
.login-shade { background: linear-gradient(90deg, rgb(4 15 34 / 46%), rgb(6 21 44 / 15%) 48%, rgb(5 20 41 / 3%) 80%), linear-gradient(180deg, #07182f30, transparent 35%, transparent 80%, #0410214d); }
.login-content { padding: 40px 20px; }
.login-controls { width: min(100%, 370px); padding: 0; border: 0; background: transparent; box-shadow: none; animation: login-enter 400ms var(--login-ease) backwards; }
.login-controls h1:focus { outline: none; }
.login-controls .login-field + .login-field { margin-top: 26px; }
.login-controls .login-field label { font-size: 16px; font-weight: 650; text-shadow: 0 2px 10px #021025, 0 1px 3px #021025; margin-bottom: 12px; }
.login-experience .login-controls input { height: 58px; background: rgb(4 17 36 / 18%); border-color: #ffffff69; border-radius: 14px; box-shadow: inset 0 1px 0 #ffffff12; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); color: #fff; text-shadow: 0 1px 4px #07182f; }
.login-controls input::placeholder { color: #e4eaf4; text-shadow: 0 1px 4px #07182f; }
.login-experience .login-controls input:focus { background: rgb(4 17 36 / 28%); border-color: var(--login-gold); }
.login-controls .login-input-icon, .login-controls .login-password-toggle { z-index: 1; color: #f5f7fc; filter: drop-shadow(0 1px 3px #07182f); }
.login-controls #username { text-align: right; }
.login-controls .login-password-toggle { top: 7px; }
.login-controls .login-submit { min-height: 56px; margin-top: 32px; background: rgb(232 203 158 / 13%); border-color: #f1d49bb3; color: #fff4dd; border-radius: 14px; backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); box-shadow: inset 0 1px 0 #fff2, 0 8px 28px #02102526; text-shadow: 0 1px 4px #07182f; }
.login-controls .login-submit:hover { background: rgb(232 203 158 / 24%); filter: none; }
.login-controls .login-account-help { border: 0; padding-top: 0; margin-top: 24px; color: #fff5e3; text-shadow: 0 2px 8px #021025; }
.login-controls .login-account-help p { font-size: 14px; }
.login-controls .login-progress { border-color: #ffffff4d; border-top-color: #fff4dd; }
.login-auth-feedback { margin-top: 10px; color: #fff0eb; font-size: 13px; text-shadow: 0 1px 5px #07182f; }
.login-controls input[aria-invalid=true] { border-color: #ffd7b9; }
.login-controls .login-remember { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 16px; color: #f1f4fa; font-size: 14px; text-shadow: 0 2px 8px #021025; cursor: pointer; }
.login-experience .login-controls .login-remember input { flex: 0 0 20px; width: 20px; height: 20px; min-height: 0; padding: 0; margin: 0; accent-color: var(--login-gold); border-radius: 4px; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; cursor: pointer; }
.login-controls .login-remember + .login-submit { margin-top: 16px; }
@media (min-width: 1600px) { .login-content { padding-inline-end: 6vw; } }
@media (max-width: 800px) { .login-content { padding: 52px 16px; } .login-shade { background: linear-gradient(180deg, #071a3426, #071a341f 50%, #071a343d); } .login-controls { align-self: center; } }
@media (max-width: 480px) { .login-content { padding: 46px 8px; } .login-controls { width: 100%; max-width: 350px; } }
@media (prefers-reduced-motion: reduce) { .login-controls { animation: none !important; transform: none !important; } }