:root {
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    color: #172033;
    background: #eef4fb;
    --access-blue: #2457c5;
    --access-blue-hover: #1d4eb5;
    --access-blue-active: #183f96;
    --access-cyan: #62b8df;
    --access-ink: #172033;
    --access-muted: #66758b;
    --access-line: #d8e3f0;
    --access-soft: #f6f9ff;
    --access-surface: rgba(255, 255, 255, 0.94);
    --access-shadow: 0 26px 70px rgba(27, 47, 84, 0.13);
    --access-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --ambient-x: 0px;
    --ambient-y: 0px;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    min-height: 100vh;
    margin: 0;
    color: var(--access-ink);
    background:
        radial-gradient(circle at 15% 10%, rgba(36, 87, 197, 0.12), transparent 29rem),
        radial-gradient(circle at 85% 0%, rgba(86, 176, 220, 0.12), transparent 25rem),
        linear-gradient(145deg, #edf4fb 0%, #fbfdff 47%, #e9f2fb 100%);
}

.access-ambient {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.ambient-orb {
    position: absolute;
    display: block;
    border-radius: 999px;
    filter: blur(44px);
    opacity: 0.24;
    will-change: transform, opacity;
}

.ambient-orb--one {
    width: clamp(520px, 48vw, 760px);
    height: clamp(520px, 48vw, 760px);
    top: -18%;
    right: -12%;
    background: radial-gradient(circle, rgba(36, 87, 197, 0.56), rgba(92, 174, 222, 0.22) 42%, transparent 70%);
    animation: ambientFloatOne 17s ease-in-out infinite alternate;
}

.ambient-orb--two {
    width: clamp(480px, 43vw, 680px);
    height: clamp(480px, 43vw, 680px);
    left: -16%;
    bottom: -18%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.94), rgba(87, 184, 223, 0.26) 44%, transparent 72%);
    animation: ambientFloatTwo 22s ease-in-out 600ms infinite alternate;
}

.ambient-orb--three {
    width: clamp(360px, 34vw, 540px);
    height: clamp(360px, 34vw, 540px);
    left: 38%;
    top: 48%;
    background: radial-gradient(circle, rgba(80, 156, 221, 0.26), rgba(255, 255, 255, 0.4) 52%, transparent 74%);
    animation: ambientFloatThree 19s ease-in-out 1.1s infinite alternate;
}

a {
    color: inherit;
}

button,
input {
    font: inherit;
}

body > .site-header,
body > .page-shell {
    position: relative;
    z-index: 1;
}

.site-header {
    min-height: 72px;
    padding: 14px clamp(18px, 4vw, 44px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    border-bottom: 1px solid rgba(214, 225, 240, 0.82);
    background: rgba(255, 255, 255, 0.76);
    backdrop-filter: blur(18px);
    animation: headerDrop 620ms var(--access-ease) both;
}

.brand {
    display: inline-flex;
    align-items: center;
    color: var(--access-blue);
    text-decoration: none;
    animation: productSettle 720ms var(--access-ease) both;
}

.product-lockup {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    line-height: 1;
}

.product-wordmark {
    width: auto;
    height: clamp(44px, 4.5vw, 58px);
    display: block;
    object-fit: contain;
}

.product-divider {
    width: 1px;
    height: 0.82em;
    display: inline-block;
    background: rgba(36, 87, 197, 0.3);
}

.product-name {
    color: #163f91;
    font-size: clamp(1.45rem, 2.2vw, 1.9rem);
    font-weight: 760;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.brand .product-wordmark {
    height: clamp(34px, 2.4vw, 40px);
}

.brand .product-name {
    font-size: clamp(1.02rem, 1.32vw, 1.2rem);
    letter-spacing: 0.1em;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn,
.primary-button,
.primary-link,
.secondary-button,
.nav-action {
    min-height: 46px;
    padding: 11px 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: 13px;
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.1;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition:
        transform 180ms var(--access-ease),
        box-shadow 180ms var(--access-ease),
        border-color 180ms var(--access-ease),
        color 180ms var(--access-ease),
        background 180ms var(--access-ease);
}

.site-nav .nav-action {
    font-weight: 550;
    box-shadow: 0 7px 16px rgba(27, 47, 84, 0.06);
}

.nav-action span {
    display: inline-flex;
    align-items: center;
}

.primary-button,
.primary-link,
.nav-action--primary {
    color: #ffffff;
    background: linear-gradient(135deg, var(--access-blue), #1d74c2);
    box-shadow: 0 14px 30px rgba(36, 87, 197, 0.21);
}

.primary-button,
.primary-link {
    width: 100%;
}

.secondary-button,
.nav-action--utility {
    color: #2f4462;
    border-color: #cbd9e9;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 8px 20px rgba(27, 47, 84, 0.06);
}

.nav-action--session {
    color: #8b3030;
    border-color: #edcaca;
    background: #fff8f8;
}

.primary-button::after,
.primary-link::after,
.nav-action--primary::after {
    content: "";
    width: 34px;
    height: 120%;
    position: absolute;
    top: -10%;
    left: -48px;
    transform: skewX(-18deg);
    background: rgba(255, 255, 255, 0.22);
    transition: left 420ms var(--access-ease);
}

.primary-button:hover,
.primary-link:hover,
.nav-action:hover {
    transform: translateY(-2px);
}

.primary-button:hover,
.primary-link:hover,
.nav-action--primary:hover {
    background: linear-gradient(135deg, var(--access-blue-hover), #176bb6);
    box-shadow: 0 18px 38px rgba(36, 87, 197, 0.26);
}

.primary-button:hover::after,
.primary-link:hover::after,
.nav-action--primary:hover::after {
    left: calc(100% + 44px);
}

.secondary-button:hover,
.nav-action--utility:hover {
    border-color: #aebfda;
    background: #f8fbff;
    box-shadow: 0 14px 28px rgba(27, 47, 84, 0.1);
}

.nav-action--hub-admin {
    color: #17395d;
    border-color: #a8d6e9;
    background: #eefaff;
    box-shadow: 0 7px 16px rgba(47, 153, 194, 0.08);
}

.nav-action--access-admin {
    color: #203453;
    border-color: #b8c5dd;
    background: #f3f6fb;
    box-shadow: 0 7px 16px rgba(31, 52, 83, 0.08);
}

.nav-action--hub-admin:hover {
    color: #123553;
    border-color: #73bedc;
    background: #e3f6ff;
    box-shadow: 0 10px 20px rgba(47, 153, 194, 0.11);
}

.nav-action--access-admin:hover {
    color: #172a47;
    border-color: #8fa2c4;
    background: #e9eef8;
    box-shadow: 0 10px 20px rgba(31, 52, 83, 0.11);
}

.nav-action--session:hover {
    color: #7d2424;
    border-color: #dfa7a7;
    background: #fff1f1;
    box-shadow: 0 14px 28px rgba(112, 35, 35, 0.09);
}

.primary-button:active,
.primary-link:active,
.secondary-button:active,
.nav-action:active {
    transform: translateY(0) scale(0.99);
    box-shadow: 0 7px 16px rgba(27, 47, 84, 0.1);
}

.nav-action svg {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    fill: currentColor;
    transition: transform 180ms var(--access-ease);
}

.nav-action:hover svg {
    transform: translateY(-1px) scale(1.06);
}

.nav-action--session:hover svg {
    transform: translateX(-2px);
}

.primary-button:focus-visible,
.primary-link:focus-visible,
.secondary-button:focus-visible,
.secondary-link:focus-visible,
.nav-action:focus-visible,
.form-field input:focus-visible,
.password-toggle:focus-visible {
    outline: 3px solid rgba(36, 87, 197, 0.24);
    outline-offset: 3px;
}

.page-shell {
    width: min(1220px, calc(100% - 40px));
    margin: 30px auto;
    display: grid;
    gap: 24px;
}

body.auth-page .site-header {
    display: none;
}

body.auth-page .page-shell {
    min-height: 100vh;
    width: min(530px, calc(100% - 32px));
    margin: 0 auto;
    padding: clamp(24px, 6vh, 56px) 0;
    align-items: center;
}

body.auth-page .page-shell::before {
    content: "";
    width: 24rem;
    height: 24rem;
    position: fixed;
    right: 20vw;
    bottom: 3vh;
    z-index: 0;
    pointer-events: none;
    border-radius: 999px;
    opacity: 0.42;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.9), rgba(110, 176, 220, 0.13) 48%, transparent 72%);
    animation: ambientBreathe 22s ease-in-out infinite alternate;
}

.auth-shell {
    width: 100%;
    display: grid;
    place-items: center;
    gap: clamp(22px, 3.2vh, 30px);
}

.auth-product {
    display: flex;
    justify-content: center;
}

.auth-product .product-lockup {
    opacity: 0;
    transform: translateY(-18px) scale(0.94);
    filter: blur(5px);
    padding: 12px 17px;
    border: 1px solid rgba(199, 216, 236, 0.72);
    border-radius: 20px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(246, 250, 255, 0.62)),
        rgba(255, 255, 255, 0.58);
    box-shadow:
        0 14px 38px rgba(27, 47, 84, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    animation: productLockupEnter 700ms var(--access-ease) 80ms both;
}

.auth-product .product-wordmark {
    height: clamp(52px, 5.4vw, 60px);
}

.auth-product .product-name {
    font-size: clamp(1.68rem, 2.8vw, 2rem);
}

.auth-card {
    padding: clamp(28px, 5vw, 34px);
    border: 1px solid rgba(198, 214, 234, 0.84);
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.97)),
        var(--access-surface);
    box-shadow:
        var(--access-shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.auth-card {
    width: min(450px, 100%);
    margin: 0;
    position: relative;
    overflow: hidden;
    transform-origin: center 70%;
    animation: cardRise 820ms var(--access-ease) 280ms both;
}

.auth-card::after {
    content: "";
    width: 11rem;
    height: 11rem;
    position: absolute;
    top: -7rem;
    right: -6rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(36, 87, 197, 0.08), transparent 68%);
}

.auth-card > * {
    position: relative;
    z-index: 1;
}

.reset-card {
    width: min(468px, 100%);
}

.reset-card--center,
.oidc-logout-card {
    text-align: center;
}

.oidc-logout-card {
    width: min(520px, 100%);
}

.eyebrow {
    margin: 0 0 10px;
    color: var(--access-blue);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

h1,
h2 {
    margin-top: 0;
    letter-spacing: -0.02em;
}

.auth-card .eyebrow {
    animation: contentLift 560ms var(--access-ease) 520ms both;
}

.auth-card h1 {
    margin-bottom: 10px;
    font-size: clamp(2rem, 4.6vw, 2.34rem);
    line-height: 1.04;
    animation: contentLift 620ms var(--access-ease) 500ms both;
}

.oidc-logout-card h1 {
    max-width: 24rem;
    margin-inline: auto;
    font-size: clamp(1.85rem, 4.2vw, 2.24rem);
}

.supporting-text {
    margin: 0 0 24px;
    color: var(--access-muted);
    line-height: 1.55;
}

.auth-card .supporting-text {
    animation: contentLift 620ms var(--access-ease) 590ms both;
}

.auth-form {
    display: grid;
    gap: 15px;
}

.form-field {
    margin: 0;
}

.auth-form .form-field {
    animation: contentLift 620ms var(--access-ease) both;
}

.auth-form .form-field:nth-child(2) {
    animation-delay: 690ms;
}

.auth-form .form-field:nth-child(3) {
    animation-delay: 780ms;
}

.auth-form .primary-button {
    margin-top: 2px;
    animation: contentLift 620ms var(--access-ease) 870ms both;
}

.form-field label {
    display: block;
    margin-bottom: 7px;
    color: #30415b;
    font-size: 0.86rem;
    font-weight: 800;
}

.form-field input {
    width: 100%;
    min-height: 50px;
    padding: 12px 14px;
    border: 1px solid #cfdbea;
    border-radius: 14px;
    color: var(--access-ink);
    background: linear-gradient(180deg, #ffffff, #fbfdff);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
    transition:
        border-color 180ms var(--access-ease),
        box-shadow 180ms var(--access-ease),
        transform 180ms var(--access-ease);
}

.form-field input:focus {
    border-color: var(--access-blue);
    outline: 0;
    box-shadow:
        0 0 0 4px rgba(36, 87, 197, 0.11),
        0 12px 30px rgba(36, 87, 197, 0.1);
    transform: translateY(-1px);
}

.form-field input:-webkit-autofill,
.form-field input:-webkit-autofill:hover,
.form-field input:-webkit-autofill:focus {
    border-color: #cfdbea;
    -webkit-text-fill-color: var(--access-ink);
    box-shadow:
        0 0 0 1000px #fbfdff inset,
        inset 0 1px 0 rgba(255, 255, 255, 0.86);
    transition: background-color 9999s ease-in-out 0s;
}

.form-field input:-moz-autofill {
    filter: none;
    box-shadow:
        0 0 0 1000px #fbfdff inset,
        inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.password-control {
    position: relative;
}

.password-control input {
    padding-right: 52px;
}

.password-toggle {
    width: 38px;
    height: 38px;
    padding: 0;
    display: grid;
    place-items: center;
    position: absolute;
    top: 50%;
    right: 7px;
    transform: translateY(-50%);
    border: 0;
    border-radius: 11px;
    color: #5c6c83;
    background: transparent;
    cursor: pointer;
    transition:
        transform 170ms var(--access-ease),
        color 170ms var(--access-ease),
        background 170ms var(--access-ease);
}

.password-toggle svg {
    width: 21px;
    height: 21px;
    fill: currentColor;
}

.password-toggle .icon-eye-off {
    display: none;
}

.password-toggle[aria-pressed="true"] {
    color: var(--access-blue);
    background: #edf4ff;
}

.password-toggle[aria-pressed="true"] .icon-eye {
    display: none;
}

.password-toggle[aria-pressed="true"] .icon-eye-off {
    display: block;
}

.password-toggle:hover {
    color: var(--access-blue);
    background: #f0f5ff;
    transform: translateY(-50%) scale(1.06);
}

.password-toggle:active {
    transform: translateY(-50%) scale(0.96);
}

.field-help {
    margin-top: 9px;
    color: var(--access-muted);
    font-size: 0.84rem;
    line-height: 1.5;
}

.field-help ul,
.field-errors ul,
.form-error ul {
    margin: 8px 0 0 18px;
    padding: 0;
}

.field-errors {
    margin-top: 9px;
    color: #8f1d1d;
    font-size: 0.85rem;
    line-height: 1.45;
    animation: errorEnter 180ms var(--access-ease) both;
}

.form-error,
.message {
    padding: 12px 14px;
    border: 1px solid #f1c7c7;
    border-radius: 12px;
    color: #8f1d1d;
    background: #fff2f2;
    animation: errorEnter 180ms var(--access-ease) both;
}

.secondary-link {
    display: inline-flex;
    color: var(--access-blue);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0 2px;
    transition:
        color 170ms var(--access-ease),
        background-size 170ms var(--access-ease);
}

.secondary-link:hover {
    color: var(--access-blue-hover);
    background-size: 100% 2px;
}

.auth-card-footer {
    margin-top: 22px;
    padding-top: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-top: 1px solid #e3eaf3;
    color: #748197;
    font-size: 0.88rem;
    font-weight: 400;
    animation: contentLift 620ms var(--access-ease) 980ms both;
}

.access-support-footer,
.account-support {
    color: #728197;
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.5;
}

.access-support-footer {
    display: grid;
    justify-items: center;
    gap: 2px;
    text-align: center;
    animation: contentLift 620ms var(--access-ease) 1.08s both;
}

.access-support-footer p,
.account-support span {
    margin: 0;
}

.access-support-footer a,
.account-support a {
    color: var(--access-blue);
    font-weight: 500;
    text-decoration: none;
}

.access-support-footer a:hover,
.account-support a:hover {
    text-decoration: underline;
}

.auth-card-actions {
    margin-top: 22px;
    display: grid;
    gap: 12px;
    animation: contentLift 620ms var(--access-ease) 820ms both;
}

.success-check {
    width: 54px;
    height: 54px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: #ecfbf1;
    position: relative;
    box-shadow:
        inset 0 0 0 8px #ffffff,
        0 14px 28px rgba(36, 120, 63, 0.12);
    animation: successPop 640ms var(--access-ease) 520ms both;
}

.success-check::after {
    content: "";
    width: 20px;
    height: 10px;
    position: absolute;
    left: 16px;
    top: 18px;
    border-left: 3px solid #24783f;
    border-bottom: 3px solid #24783f;
    transform: rotate(-45deg);
    animation: checkDraw 360ms var(--access-ease) 720ms both;
}

.oidc-logout-note {
    margin: 0 0 24px;
    padding: 12px 14px;
    border: 1px solid #dbe5f1;
    border-radius: 14px;
    color: #5f6d82;
    background: linear-gradient(180deg, #f8fbff, #f3f7fd);
    font-size: 0.9rem;
    line-height: 1.5;
}

.oidc-logout-form {
    margin: 0;
}

.oidc-logout-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: stretch;
}

.oidc-logout-actions .primary-button,
.oidc-logout-actions .secondary-button {
    width: 100%;
}

.oidc-logout-cancel {
    text-decoration: none;
}

.oidc-logout-error p:last-child {
    margin-bottom: 0;
    color: var(--access-muted);
    line-height: 1.55;
}

body.account-page .page-shell {
    width: min(1240px, calc(100% - 40px));
    margin: clamp(22px, 4vh, 38px) auto;
}

.access-portal {
    display: grid;
    grid-template-columns: minmax(300px, 0.8fr) minmax(620px, 1.45fr);
    align-items: start;
    gap: 24px;
}

.identity-panel,
.applications-panel {
    border: 1px solid rgba(203, 217, 236, 0.92);
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(248, 251, 255, 0.94)),
        #ffffff;
    box-shadow: 0 22px 58px rgba(27, 47, 84, 0.12);
}

.access-identity-panel {
    padding: 26px;
    overflow: hidden;
    position: relative;
    animation: cardRise 760ms var(--access-ease) 320ms both;
}

.access-identity-panel::after {
    content: "";
    width: 13rem;
    height: 13rem;
    position: absolute;
    top: -7rem;
    right: -6rem;
    border-radius: 50%;
    background: rgba(36, 87, 197, 0.08);
}

.identity-panel__top,
.identity-hero,
.identity-code,
.access-identity-facts,
.identity-note,
.applications-heading,
.access-badge {
    position: relative;
    z-index: 1;
}

.identity-panel__top,
.applications-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.account-status {
    padding: 7px 11px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid #cfe7d7;
    border-radius: 999px;
    color: #24683c;
    background: #f1fbf4;
    font-size: 0.78rem;
    font-weight: 850;
}

.account-status__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.identity-hero {
    margin-top: 22px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 16px;
    align-items: center;
}

.identity-avatar {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border: 1px solid #cddbef;
    border-radius: 20px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--access-blue), #57a8d7);
    font-size: 1.1rem;
    font-weight: 900;
    text-transform: uppercase;
    box-shadow: 0 14px 28px rgba(36, 87, 197, 0.18);
}

.access-identity-heading h1 {
    margin: 0;
    overflow-wrap: anywhere;
    font-size: clamp(1.65rem, 3vw, 2.1rem);
    line-height: 1.1;
}

.access-identity-heading p {
    margin: 8px 0 0;
    color: var(--access-muted);
    overflow-wrap: anywhere;
    font-weight: 650;
}

.identity-code {
    min-width: 150px;
    padding: 16px;
    border: 1px solid #cfdcf0;
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(36, 87, 197, 0.08), rgba(85, 169, 217, 0.08)),
        #f8fbff;
}

.access-identity-code {
    margin-top: 24px;
}

.identity-code span,
.access-identity-facts span {
    display: block;
    color: #728197;
    font-size: 0.74rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.identity-code strong {
    margin-top: 5px;
    display: block;
    color: #214fac;
    font-size: 1.12rem;
    letter-spacing: 0.03em;
}

.access-identity-facts {
    margin-top: 18px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.access-identity-facts div {
    padding: 14px;
    border: 1px solid #e2eaf4;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.66);
}

.access-identity-facts strong {
    margin-top: 4px;
    display: block;
    overflow-wrap: anywhere;
    font-size: 0.95rem;
}

.account-support {
    margin-top: 18px;
    padding-top: 16px;
    display: grid;
    gap: 3px;
    border-top: 1px solid #e3eaf3;
}

.access-overview-panel {
    padding: 26px;
    animation: cardRise 760ms var(--access-ease) 430ms both;
}

.applications-heading {
    padding-bottom: 18px;
    border-bottom: 1px solid #e3eaf3;
}

.applications-heading h2 {
    margin: 3px 0 0;
    font-size: clamp(1.5rem, 2.4vw, 1.95rem);
}

.application-count {
    padding: 7px 11px;
    border-radius: 999px;
    color: var(--access-blue);
    background: #eaf1ff;
    font-size: 0.78rem;
    font-weight: 850;
    animation: contentLift 540ms var(--access-ease) 620ms both;
}

.access-badge-grid {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.access-badge {
    min-height: 112px;
    padding: 15px;
    display: grid;
    align-content: space-between;
    gap: 10px;
    border: 1px solid #d8e1ed;
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.96)),
        #ffffff;
    box-shadow: 0 8px 20px rgba(27, 47, 84, 0.06);
    opacity: 0;
    transform: translateY(14px) scale(0.985);
    animation: tileWave 620ms var(--access-ease) both;
    transition:
        transform 170ms var(--access-ease),
        box-shadow 170ms var(--access-ease),
        border-color 170ms var(--access-ease);
}

.access-badge::before {
    content: "";
    width: 34px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--access-blue), var(--access-cyan));
}

.access-badge:hover {
    transform: translateY(-2px);
    border-color: #a9bde0;
    box-shadow: 0 12px 26px rgba(36, 87, 197, 0.1);
}

.access-badge strong {
    display: block;
    font-size: 0.96rem;
    line-height: 1.25;
}

.access-badge span {
    margin-top: 5px;
    display: -webkit-box;
    overflow: hidden;
    color: #6d7b90;
    font-size: 0.78rem;
    line-height: 1.35;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.access-badge em {
    justify-self: start;
    padding: 4px 8px;
    border-radius: 999px;
    color: #24683c;
    background: #f1fbf4;
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 850;
}

.access-badge__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.access-badge__footer > span {
    width: 24px;
    height: 24px;
    margin-top: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--access-blue);
    background: #eaf1ff;
    font-size: 0.8rem;
    font-weight: 900;
}

.access-badge:nth-child(1) { animation-delay: 560ms; }
.access-badge:nth-child(2) { animation-delay: 630ms; }
.access-badge:nth-child(3) { animation-delay: 700ms; }
.access-badge:nth-child(4) { animation-delay: 770ms; }
.access-badge:nth-child(5) { animation-delay: 840ms; }
.access-badge:nth-child(6) { animation-delay: 910ms; }
.access-badge:nth-child(7) { animation-delay: 980ms; }
.access-badge:nth-child(8) { animation-delay: 1050ms; }
.access-badge:nth-child(9) { animation-delay: 1120ms; }
.access-badge:nth-child(n + 10) { animation-delay: 1190ms; }

.empty-applications {
    margin-top: 18px;
    padding: 28px;
    border: 1px dashed #cad6e5;
    border-radius: 16px;
    text-align: center;
    background: #f8fbff;
}

.empty-applications p {
    margin: 8px auto 0;
    max-width: 440px;
    color: var(--access-muted);
    line-height: 1.55;
}

@keyframes headerDrop {
    from {
        opacity: 0;
        transform: translateY(-14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes productSettle {
    from {
        opacity: 0;
        filter: blur(7px);
        transform: translateY(-14px) scale(0.96);
    }

    to {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0) scale(1);
    }
}

@keyframes productLockupEnter {
    from {
        opacity: 0;
        filter: blur(5px);
        transform: translateY(-18px) scale(0.94);
    }

    to {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0) scale(1);
    }
}

@keyframes cardRise {
    from {
        opacity: 0;
        filter: blur(9px);
        transform: translateY(28px) scale(0.965);
    }

    to {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0) scale(1);
    }
}

@keyframes contentLift {
    from {
        opacity: 0;
        filter: blur(4px);
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0);
    }
}

@keyframes tileWave {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes errorEnter {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes successPop {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.82);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes checkDraw {
    from {
        opacity: 0;
        transform: rotate(-45deg) scale(0.72);
    }

    to {
        opacity: 1;
        transform: rotate(-45deg) scale(1);
    }
}

@keyframes ambientFloatOne {
    from {
        opacity: 0.18;
        transform: translate3d(calc(var(--ambient-x) * 0.45), calc(var(--ambient-y) * 0.35), 0) scale(0.94);
    }

    to {
        opacity: 0.32;
        transform: translate3d(calc(60px + var(--ambient-x)), calc(-35px + var(--ambient-y)), 0) scale(1.1);
    }
}

@keyframes ambientFloatTwo {
    from {
        opacity: 0.2;
        transform: translate3d(calc(var(--ambient-x) * -0.25), calc(var(--ambient-y) * -0.35), 0) scale(1.04);
    }

    to {
        opacity: 0.3;
        transform: translate3d(calc(-45px + var(--ambient-x) * -0.65), calc(50px + var(--ambient-y) * -0.55), 0) scale(0.94);
    }
}

@keyframes ambientFloatThree {
    from {
        opacity: 0.16;
        transform: translate3d(calc(var(--ambient-x) * 0.18), calc(var(--ambient-y) * -0.22), 0) scale(0.98);
    }

    to {
        opacity: 0.28;
        transform: translate3d(calc(38px + var(--ambient-x) * 0.5), calc(44px + var(--ambient-y) * -0.45), 0) scale(1.12);
    }
}

@keyframes ambientBreathe {
    from {
        opacity: 0.25;
        transform: translate3d(calc(-10px + var(--ambient-x) * 0.28), calc(12px + var(--ambient-y) * 0.28), 0) scale(0.94);
    }

    to {
        opacity: 0.48;
        transform: translate3d(calc(18px + var(--ambient-x) * 0.7), calc(-16px + var(--ambient-y) * 0.7), 0) scale(1.08);
    }
}

@media (max-width: 940px) {
    .access-portal {
        grid-template-columns: 1fr;
    }

    .access-badge-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .site-header {
        min-height: auto;
        align-items: flex-start;
        flex-direction: column;
    }

    .site-nav {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    }

    .nav-action {
        width: 100%;
        padding-inline: 10px;
    }
}

@media (max-width: 620px) {
    .page-shell {
        width: min(100% - 24px, 1220px);
        margin: 18px auto;
    }

    body.auth-page .page-shell {
        width: min(100% - 24px, 530px);
        min-height: 100vh;
        padding: 20px 0 28px;
    }

    .auth-shell {
        gap: 18px;
    }

    .auth-product .product-lockup {
        padding: 10px 12px;
        gap: 10px;
    }

    .auth-product .product-wordmark {
        height: clamp(30px, 9vw, 36px);
    }

    .product-wordmark {
        height: 24px;
    }

    .product-name {
        padding-left: 10px;
        font-size: 0.94rem;
    }

    .auth-card {
        padding: 24px 20px;
        border-radius: 20px;
    }

    .auth-card h1 {
        font-size: 1.82rem;
    }

    .identity-panel,
    .applications-panel {
        padding: 20px;
        border-radius: 18px;
    }

    .identity-hero,
    .access-identity-facts,
    .access-badge-grid {
        grid-template-columns: 1fr;
    }

    .identity-avatar {
        width: 56px;
        height: 56px;
    }

    .oidc-logout-actions {
        grid-template-columns: 1fr;
    }

    .auth-card-footer {
        align-items: center;
        flex-direction: column;
        gap: 6px;
    }
}

@media (max-width: 460px) {
    .site-nav {
        grid-template-columns: 1fr;
    }

    .brand .product-wordmark {
        height: 25px;
    }

    .brand .product-name {
        font-size: 0.92rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }

    .primary-button:hover,
    .primary-link:hover,
    .secondary-button:hover,
    .nav-action:hover,
    .access-badge:hover,
    .form-field input:focus,
    .password-toggle:hover {
        transform: none !important;
    }
}