/*
 * Keluarga visual 3D untuk gerbang akses Siswa, Guru/Staff, dan Administrator.
 * Efek kedalaman dibangun dengan highlight, lapisan aksen, ekstrusi gelap,
 * dan respons tekan tanpa mengubah alur autentikasi masing-masing role.
 */

.access-role-page {
    --role-accent: 40, 187, 197;
    --role-secondary: 112, 79, 224;
    --role-gold: 234, 177, 72;
    --role-deep: 3, 42, 55;
    --role-ink: #15364b;
    --role-paper: rgba(255, 255, 255, .93);
    overflow-x: hidden;
    background:
        radial-gradient(circle at 8% 8%, rgba(var(--role-accent), .23), transparent 28%),
        radial-gradient(circle at 91% 88%, rgba(var(--role-secondary), .2), transparent 31%),
        linear-gradient(138deg, #e9f8f7 0%, #f5f8ff 52%, #faf4ff 100%);
}

.access-role-student {
    --role-accent: 38, 187, 197;
    --role-secondary: 111, 78, 224;
    --role-deep: 3, 49, 61;
}

.access-role-employee {
    --role-accent: 47, 189, 183;
    --role-secondary: 99, 102, 241;
    --role-deep: 4, 38, 56;
}

.access-role-admin {
    --role-accent: 26, 169, 158;
    --role-secondary: 63, 129, 194;
    --role-deep: 5, 39, 58;
    --role-paper: rgba(255, 255, 255, .95);
}

/* Satu konstruksi panel utama untuk seluruh role. */
.access-role-student .token-shell,
.access-role-employee .shell,
.access-role-admin .admin-login-shell {
    position: relative;
    isolation: isolate;
    border: 1px solid rgba(var(--role-accent), .34);
    background: var(--role-paper);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .96),
        inset 0 -14px 24px rgba(var(--role-deep), .07),
        0 4px 0 rgba(var(--role-accent), .34),
        0 11px 0 rgba(var(--role-deep), .94),
        0 26px 42px rgba(var(--role-deep), .24),
        0 49px 92px rgba(25, 66, 85, .2);
    transform: perspective(1500px) translateY(-4px) rotateX(.35deg);
    transform-origin: center bottom;
}

.access-role-student .token-shell::after,
.access-role-employee .shell::after,
.access-role-admin .admin-login-shell::after {
    content: "";
    position: absolute;
    z-index: 8;
    right: 12%;
    bottom: 0;
    left: 12%;
    height: 4px;
    border-radius: 999px 999px 0 0;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(var(--role-accent), .9) 26%, rgba(var(--role-gold), .86) 52%, rgba(var(--role-secondary), .8) 76%, transparent);
    box-shadow: 0 -2px 13px rgba(var(--role-accent), .32);
}

/* Panel berwarna dan panel formulir memakai lapisan cahaya yang sama. */
.access-role-student .token-visual,
.access-role-employee .visual,
.access-role-admin .admin-login-brand {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .2),
        inset -18px 0 28px rgba(var(--role-deep), .13),
        inset 0 -24px 38px rgba(var(--role-deep), .2),
        5px 0 0 rgba(var(--role-accent), .18),
        11px 0 24px rgba(var(--role-deep), .16);
}

.access-role-student .token-form-pane,
.access-role-employee .form-pane,
.access-role-admin .admin-login-card {
    position: relative;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .72), transparent 24%),
        radial-gradient(circle at 96% 3%, rgba(var(--role-secondary), .12), transparent 31%),
        radial-gradient(circle at 3% 96%, rgba(var(--role-accent), .11), transparent 32%),
        rgba(255, 255, 255, .84);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .98),
        inset 0 -18px 27px rgba(var(--role-deep), .055);
}

/* Logo dan identitas sekolah dibuat bertumpu, bukan melayang datar. */
.access-role-student .brand-logo,
.access-role-employee .brand-logo {
    perspective: 620px;
    transform-style: preserve-3d;
}

.access-role-student .brand-logo img,
.access-role-employee .brand-logo img,
.access-role-admin .admin-login-brand img {
    transform: perspective(620px) translateY(-3px) rotateY(-9deg) rotateX(4deg);
    filter:
        drop-shadow(0 1px 0 rgba(255, 255, 255, .5))
        drop-shadow(-4px 5px 0 rgba(var(--role-deep), .42))
        drop-shadow(0 12px 7px rgba(var(--role-deep), .48))
        drop-shadow(0 0 16px rgba(var(--role-accent), .24));
}

.access-role-admin .admin-login-brand img {
    border-color: rgba(255, 255, 255, .48);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .08)),
        rgba(var(--role-accent), .16);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .42),
        inset 0 -7px 10px rgba(var(--role-deep), .2),
        0 4px 0 rgba(var(--role-accent), .34),
        0 9px 0 rgba(var(--role-deep), .86),
        0 19px 28px rgba(var(--role-deep), .3);
}

.access-role-student .brand b,
.access-role-employee .brand strong,
.access-role-admin .admin-login-brand > small {
    color: #ffffff;
    font-weight: 680;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, .24),
        0 2px 0 rgba(var(--role-deep), .84),
        0 6px 8px rgba(var(--role-deep), .42);
}

.access-role-student .brand span,
.access-role-employee .brand small {
    color: rgba(235, 250, 248, .82);
    text-shadow: 0 1px 0 rgba(255, 255, 255, .1), 0 2px 3px rgba(var(--role-deep), .7);
}

/* Kicker dan judul: bahasa tipografi 3D yang konsisten. */
.access-role-student .visual-kicker,
.access-role-employee .kicker,
.access-role-admin .admin-login-kicker {
    border: 1px solid rgba(var(--role-accent), .48);
    color: #f5fffd;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .18), transparent 48%),
        linear-gradient(140deg, rgba(var(--role-accent), .72), rgba(var(--role-deep), .84));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .28),
        inset 0 -5px 8px rgba(var(--role-deep), .2),
        0 3px 0 rgba(var(--role-accent), .38),
        0 7px 0 rgba(var(--role-deep), .88),
        0 14px 22px rgba(var(--role-deep), .25);
    text-shadow: 0 1px 0 rgba(255, 255, 255, .24), 0 2px 3px rgba(var(--role-deep), .76);
    transform: perspective(760px) translateY(-2px) rotateX(1.4deg);
}

.access-role-student .visual-copy h1,
.access-role-employee .copy h1,
.access-role-admin .admin-login-brand h1 {
    color: #f9fffe;
    font-weight: 680;
    -webkit-text-stroke: .28px rgba(255, 255, 255, .4);
    filter:
        drop-shadow(0 1px 0 rgba(255, 255, 255, .34))
        drop-shadow(0 3px 0 rgba(var(--role-deep), .86))
        drop-shadow(0 7px 0 rgba(var(--role-deep), .5))
        drop-shadow(0 16px 18px rgba(var(--role-deep), .42));
}

.access-role-student .visual-copy p,
.access-role-employee .copy p,
.access-role-admin .admin-login-brand p {
    color: rgba(238, 250, 248, .88);
    font-weight: 520;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .1), 0 2px 3px rgba(var(--role-deep), .72), 0 7px 12px rgba(var(--role-deep), .24);
}

.access-role-student .visual-access-line,
.access-role-employee .copy h1 span {
    color: rgb(var(--role-gold));
    text-shadow: 0 1px 0 rgba(255, 255, 255, .26), 0 2px 0 rgba(var(--role-deep), .76), 0 6px 8px rgba(var(--role-deep), .38);
}

/* Kartu panduan role menggunakan tiga aksen tetapi satu konstruksi kedalaman. */
.access-role-student .step,
.access-role-employee .benefit {
    --role-card-rgb: var(--role-accent);
    position: relative;
    overflow: visible;
    border-color: rgba(var(--role-card-rgb), .52);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .17), transparent 32%),
        radial-gradient(circle at 8% 0, rgba(var(--role-card-rgb), .24), transparent 42%),
        linear-gradient(145deg, rgba(var(--role-deep), .16), rgba(255, 255, 255, .075));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .28),
        inset 0 -9px 14px rgba(var(--role-deep), .18),
        0 4px 0 rgba(var(--role-card-rgb), .34),
        0 9px 0 rgba(var(--role-deep), .88),
        0 19px 28px rgba(var(--role-deep), .25);
    transform: perspective(820px) translateY(-3px) rotateX(1.2deg);
    transform-origin: center bottom;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.access-role-student .step:nth-child(2),
.access-role-employee .benefit:nth-child(2) {
    --role-card-rgb: var(--role-secondary);
}

.access-role-student .step:nth-child(3),
.access-role-employee .benefit:nth-child(3) {
    --role-card-rgb: var(--role-gold);
}

.access-role-student .step:hover,
.access-role-employee .benefit:hover {
    border-color: rgba(var(--role-card-rgb), .74);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .34),
        inset 0 -9px 14px rgba(var(--role-deep), .17),
        0 5px 0 rgba(var(--role-card-rgb), .44),
        0 11px 0 rgba(var(--role-deep), .9),
        0 25px 34px rgba(var(--role-deep), .31);
    transform: perspective(820px) translateY(-6px) rotateX(1.8deg);
}

.access-role-student .step i,
.access-role-employee .benefit i {
    color: #f5fffd;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, .28),
        0 3px 0 rgba(var(--role-deep), .72),
        0 7px 8px rgba(var(--role-deep), .38);
}

.access-role-student .step b,
.access-role-employee .benefit b {
    color: #ffffff;
    font-weight: 720;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .18), 0 2px 0 rgba(var(--role-deep), .76), 0 6px 7px rgba(var(--role-deep), .34);
}

.access-role-student .step small,
.access-role-employee .benefit small {
    color: rgba(239, 251, 249, .84);
    font-weight: 520;
    text-shadow: 0 2px 3px rgba(var(--role-deep), .68);
}

.access-role-employee .step-number {
    border-color: rgba(var(--role-card-rgb), .48);
    background: linear-gradient(145deg, rgba(255, 255, 255, .18), rgba(var(--role-deep), .6));
    box-shadow: 0 2px 0 rgba(var(--role-card-rgb), .25), 0 5px 0 rgba(var(--role-deep), .7), inset 0 1px 0 rgba(255, 255, 255, .2);
}

/* Judul dan ikon formulir tampil tegas di seluruh gerbang. */
.access-role-student .form-icon,
.access-role-employee .form-icon {
    border-color: rgba(255, 255, 255, .72);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .24), transparent 42%),
        linear-gradient(135deg, rgb(var(--role-secondary)), rgb(var(--role-accent)));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .42),
        inset 0 -7px 10px rgba(var(--role-deep), .18),
        0 4px 0 rgba(var(--role-secondary), .38),
        0 9px 0 rgba(var(--role-deep), .88),
        0 19px 28px rgba(var(--role-deep), .24);
    text-shadow: 0 2px 3px rgba(var(--role-deep), .64);
    transform: perspective(680px) translateY(-3px) rotateX(1.4deg);
}

.access-role-student .token-form-pane h2,
.access-role-employee .form-head h2,
.access-role-admin .admin-login-card h2 {
    color: var(--role-ink);
    font-weight: 720;
    -webkit-text-stroke: .2px rgba(255, 255, 255, .56);
    text-shadow:
        0 1px 0 rgba(255, 255, 255, .9),
        0 2px 0 rgba(var(--role-accent), .25),
        0 6px 9px rgba(var(--role-deep), .18);
}

.access-role-student .form-lead,
.access-role-employee .lead,
.access-role-admin .admin-login-card > p {
    color: #617b8c;
    font-weight: 520;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .92);
}

.access-role-employee .form-wordmark {
    padding: 7px 14px;
    border: 1px solid rgba(var(--role-accent), .18);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .88), rgba(var(--role-accent), .055));
    box-shadow:
        inset 0 1px 0 #fff,
        0 3px 0 rgba(var(--role-accent), .2),
        0 7px 0 rgba(var(--role-deep), .12),
        0 15px 24px rgba(var(--role-deep), .09);
    filter: drop-shadow(0 5px 7px rgba(var(--role-deep), .12));
    transform: perspective(920px) translateY(-2px) rotateX(.7deg);
}

/* Input menjadi bidang cekung yang tetap memiliki dasar fisik. */
.access-role-student .token-input-wrap,
.access-role-employee .input-wrap,
.access-role-admin .admin-login-input {
    border-radius: 19px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .96),
        inset 0 -5px 9px rgba(var(--role-deep), .08),
        0 3px 0 rgba(var(--role-accent), .2),
        0 7px 0 rgba(var(--role-deep), .14),
        0 14px 22px rgba(var(--role-deep), .1);
    transform: perspective(820px) translateY(-2px) rotateX(.7deg);
    transform-origin: center bottom;
    transition: transform .2s ease, box-shadow .2s ease;
}

.access-role-student .token-input-wrap:focus-within,
.access-role-employee .input-wrap:focus-within,
.access-role-admin .admin-login-input:focus-within {
    box-shadow:
        inset 0 1px 0 #fff,
        0 0 0 4px rgba(var(--role-secondary), .1),
        0 4px 0 rgba(var(--role-secondary), .28),
        0 9px 0 rgba(var(--role-deep), .15),
        0 19px 28px rgba(var(--role-deep), .14);
    transform: perspective(820px) translateY(-4px) rotateX(1deg);
}

.access-role-student .token-input,
.access-role-employee .token-input,
.access-role-admin .admin-login-input {
    border-color: rgba(var(--role-accent), .25);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(247, 252, 253, .96));
}

.access-role-student .token-input-icon,
.access-role-employee .input-icon,
.access-role-admin .admin-login-input > i {
    color: rgb(var(--role-secondary));
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .9), rgba(var(--role-secondary), .14));
    box-shadow:
        inset 0 1px 0 #fff,
        0 2px 0 rgba(var(--role-secondary), .2),
        0 5px 0 rgba(var(--role-deep), .12),
        0 9px 14px rgba(var(--role-deep), .1);
    text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
}

/* Tombol sekunder dan callout mendapat kedalaman ringan. */
.access-role-student .scan-button,
.access-role-employee .token-qr-button,
.access-role-student .token-claim-open,
.access-role-employee .token-recovery-callout a,
.access-role-employee .recovery-prompt a,
.access-role-employee .back,
.access-role-student .back-link,
.access-role-student .mode-pill,
.access-role-employee .mode {
    border-color: rgba(var(--role-secondary), .3);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .95),
        inset 0 -5px 8px rgba(var(--role-deep), .07),
        0 3px 0 rgba(var(--role-secondary), .2),
        0 7px 0 rgba(var(--role-deep), .14),
        0 13px 20px rgba(var(--role-deep), .09);
    text-shadow: 0 1px 0 rgba(255, 255, 255, .9);
    transform: perspective(760px) translateY(-2px) rotateX(.8deg);
    transform-origin: center bottom;
}

.access-role-student .token-claim-callout,
.access-role-employee .token-recovery-callout,
.access-role-employee .qr-scan-guide,
.access-role-employee .recovery-prompt,
.access-role-admin .admin-login-links {
    border-color: rgba(var(--role-accent), .3);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .28),
        inset 0 -7px 11px rgba(var(--role-deep), .08),
        0 3px 0 rgba(var(--role-accent), .2),
        0 7px 0 rgba(var(--role-deep), .14),
        0 15px 23px rgba(var(--role-deep), .1);
    transform: perspective(880px) translateY(-2px) rotateX(.7deg);
    transform-origin: center bottom;
}

.access-role-student .token-claim-mark,
.access-role-employee .token-recovery-mark,
.access-role-employee .qr-scan-guide-icon,
.access-role-employee .recovery-prompt-icon {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .7),
        0 3px 0 rgba(var(--role-accent), .24),
        0 7px 0 rgba(var(--role-deep), .16),
        0 12px 18px rgba(var(--role-deep), .11);
    transform: translateY(-2px);
}

/* Tombol utama memiliki gerak angkat dan tekan yang identik. */
.access-role-student .login-button,
.access-role-employee .submit,
.access-role-employee .recovery-action,
.access-role-admin #adminDirectButton {
    border: 1px solid rgba(255, 255, 255, .52) !important;
    color: #ffffff !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .15), transparent 48%),
        linear-gradient(120deg, rgb(var(--role-accent)), rgb(var(--role-secondary))) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .42),
        inset 0 -7px 10px rgba(var(--role-deep), .2),
        0 4px 0 rgba(var(--role-accent), .42),
        0 9px 0 rgba(var(--role-deep), .9),
        0 20px 30px rgba(var(--role-deep), .24) !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .22), 0 2px 3px rgba(var(--role-deep), .7);
    transform: perspective(860px) translateY(-3px) rotateX(1.3deg);
    transform-origin: center bottom;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.access-role-student .login-button:hover,
.access-role-employee .submit:hover,
.access-role-employee .recovery-action:hover,
.access-role-admin #adminDirectButton:hover {
    filter: saturate(1.06) brightness(1.035);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .48),
        0 5px 0 rgba(var(--role-accent), .52),
        0 11px 0 rgba(var(--role-deep), .92),
        0 27px 38px rgba(var(--role-deep), .3) !important;
    transform: perspective(860px) translateY(-6px) rotateX(1.8deg);
}

.access-role-student .login-button:active,
.access-role-employee .submit:active,
.access-role-employee .recovery-action:active,
.access-role-admin #adminDirectButton:active {
    filter: none;
    box-shadow:
        inset 0 4px 9px rgba(var(--role-deep), .32),
        0 2px 0 rgba(var(--role-deep), .88) !important;
    transform: perspective(860px) translateY(2px) rotateX(.4deg) scale(.997);
}

.access-role-student .login-button:focus-visible,
.access-role-employee .submit:focus-visible,
.access-role-admin #adminDirectButton:focus-visible {
    outline: 3px solid rgba(var(--role-secondary), .35);
    outline-offset: 5px;
}

/* Administrator memakai struktur keluarga yang sama tanpa menyamarkan perannya. */
.access-role-admin .admin-login-brand {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 8%, rgba(83, 239, 220, .18), transparent 29%),
        radial-gradient(circle at 92% 88%, rgba(103, 138, 222, .22), transparent 33%),
        linear-gradient(145deg, #072f49 0%, #0a535a 56%, #0a7c73 100%);
}

.access-role-admin .admin-login-brand::before,
.access-role-admin .admin-login-brand::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.access-role-admin .admin-login-brand::before {
    width: 330px;
    height: 330px;
    right: -150px;
    top: -130px;
    border: 2px solid rgba(var(--role-accent), .22);
    box-shadow: 0 0 0 42px rgba(var(--role-accent), .06), 0 0 0 84px rgba(var(--role-secondary), .04), 0 0 32px rgba(var(--role-accent), .14);
}

.access-role-admin .admin-login-brand::after {
    right: -65px;
    bottom: -80px;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(var(--role-gold), .16), transparent 68%);
}

.access-role-admin .admin-login-brand > div,
.access-role-admin .admin-login-brand > small {
    position: relative;
    z-index: 1;
}

.access-role-admin .admin-login-brand h1 {
    letter-spacing: -.035em;
}

.access-role-admin .admin-login-card h2 {
    font-size: clamp(1.75rem, 3.2vw, 2.35rem);
    letter-spacing: -.035em;
}

.access-role-admin .admin-login-field label {
    color: #31556a;
    text-shadow: 0 1px 0 #fff;
}

.access-role-admin .admin-login-input {
    padding: 0 14px;
}

.access-role-admin .admin-login-input input {
    color: #17384c;
    background: transparent;
}

.access-role-admin .admin-login-links {
    padding: 12px 13px;
    border: 1px solid rgba(var(--role-accent), .22);
    border-radius: 15px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .9), rgba(var(--role-accent), .07));
    color: #577384;
}

.access-role-admin .admin-login-links a {
    color: #087d76;
    text-shadow: 0 1px 0 #fff;
}

/* Touch dan layar kecil mempertahankan kedalaman tanpa menambah lebar. */
@media (max-width: 850px) {
    .access-role-student .token-shell,
    .access-role-employee .shell,
    .access-role-admin .admin-login-shell {
        transform: none;
    }

    .access-role-student .token-shell,
    .access-role-employee .shell {
        border: 0;
        box-shadow: none;
    }

    .access-role-student .token-shell::after,
    .access-role-employee .shell::after {
        display: none;
    }

    .access-role-student .token-visual,
    .access-role-employee .visual,
    .access-role-admin .admin-login-brand {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .18),
            inset 0 -16px 26px rgba(var(--role-deep), .17),
            0 5px 0 rgba(var(--role-accent), .24),
            0 11px 22px rgba(var(--role-deep), .18);
    }

    .access-role-student .token-form-pane,
    .access-role-employee .form-pane,
    .access-role-admin .admin-login-card {
        box-shadow: inset 0 1px 0 #fff, inset 0 -14px 22px rgba(var(--role-deep), .05);
    }
}

@media (max-width: 520px) {
    .access-role-student .visual-copy h1,
    .access-role-employee .copy h1,
    .access-role-admin .admin-login-brand h1 {
        filter:
            drop-shadow(0 1px 0 rgba(255, 255, 255, .3))
            drop-shadow(0 2px 0 rgba(var(--role-deep), .82))
            drop-shadow(0 5px 0 rgba(var(--role-deep), .46))
            drop-shadow(0 11px 14px rgba(var(--role-deep), .38));
    }

    .access-role-student .step,
    .access-role-employee .benefit {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .25),
            inset 0 -7px 11px rgba(var(--role-deep), .16),
            0 3px 0 rgba(var(--role-card-rgb), .32),
            0 7px 0 rgba(var(--role-deep), .86),
            0 15px 23px rgba(var(--role-deep), .23);
        transform: perspective(760px) translateY(-2px) rotateX(.8deg);
    }

    .access-role-employee .benefits {
        row-gap: 20px;
    }

    .access-role-employee .visual-bottom-actions {
        gap: 18px;
        margin-top: 25px;
    }

    .access-role-employee .recovery-prompt {
        grid-template-columns: 46px minmax(0, 1fr);
        row-gap: 14px;
        padding: 15px;
    }

    .access-role-employee .recovery-prompt a {
        grid-column: 1 / -1;
        justify-self: stretch;
        width: 100%;
        min-height: 46px;
        margin-top: 2px;
    }

    .access-role-student .token-input-wrap,
    .access-role-employee .input-wrap,
    .access-role-admin .admin-login-input {
        max-width: 100%;
    }

    .access-role-admin {
        padding: 12px;
    }

    .access-role-admin .admin-login-shell {
        border-radius: 24px;
        box-shadow:
            inset 0 1px 0 #fff,
            0 3px 0 rgba(var(--role-accent), .28),
            0 8px 0 rgba(var(--role-deep), .9),
            0 21px 36px rgba(var(--role-deep), .22);
    }

    .access-role-admin .admin-login-brand,
    .access-role-admin .admin-login-card {
        padding: 24px 20px;
    }
}

@media (hover: none) {
    .access-role-student .step:hover,
    .access-role-employee .benefit:hover {
        transform: perspective(820px) translateY(-3px) rotateX(1.2deg);
    }

    .access-role-student .login-button:hover,
    .access-role-employee .submit:hover,
    .access-role-employee .recovery-action:hover,
    .access-role-admin #adminDirectButton:hover {
        transform: perspective(860px) translateY(-3px) rotateX(1.3deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .access-role-student .step,
    .access-role-employee .benefit,
    .access-role-student .token-input-wrap,
    .access-role-employee .input-wrap,
    .access-role-admin .admin-login-input,
    .access-role-student .login-button,
    .access-role-employee .submit,
    .access-role-employee .recovery-action,
    .access-role-admin #adminDirectButton {
        transition: none !important;
    }
}