/* Shared access shell: the same visual language as the public home. */
html.access-shell-page {
    background: #1b1440;
    overscroll-behavior: none;
}

body.access-shell {
    min-height: 100vh;
    background-color: #0a0b0e;
    overflow-x: hidden;
    overscroll-behavior: none;
    position: relative;
}

body.access-shell > * {
    position: relative;
    z-index: 1;
}

body.access-shell h1,
body.access-shell h2,
body.access-shell h3,
body.access-shell .display {
    font-family: 'Sora', 'Inter', system-ui, sans-serif;
}

body.access-shell .glass {
    background: linear-gradient(135deg, rgba(255,255,255,0.13), rgba(255,255,255,0.035));
    backdrop-filter: blur(24px) saturate(135%);
    -webkit-backdrop-filter: blur(24px) saturate(135%);
    border-color: rgba(255,255,255,0.18);
    box-shadow: 0 28px 70px -28px rgba(0,0,0,0.72), inset 0 1px 0 rgba(255,255,255,0.16);
}

body.access-shell .glass:hover {
    border-color: rgba(255,255,255,0.20);
}

body.access-shell .role-card {
    position: relative;
    overflow: hidden;
    min-height: 178px;
    padding: 1.1rem !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    border-radius: 1.25rem;
    transition: transform .25s ease;
}

body.access-shell .role-card::before {
    position: absolute;
    top: 1.8rem;
    left: 50%;
    width: 5.4rem;
    height: 5.4rem;
    content: "";
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 1.75rem;
    transform: translateX(-50%) rotate(45deg);
    opacity: .65;
    pointer-events: none;
}

body.access-shell .role-card::after {
    position: absolute;
    top: 2.55rem;
    left: 50%;
    width: 4rem;
    height: 4rem;
    content: "";
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 999px;
    transform: translateX(-50%);
    transition: transform .35s ease, opacity .35s ease;
    opacity: .45;
    pointer-events: none;
}

body.access-shell .role-card:hover::before { opacity: 1; transform: translateX(-50%) rotate(45deg) scale(1.08); }
body.access-shell .role-card:hover::after { transform: translateX(-50%) scale(1.25); opacity: .85; }

body.access-shell .role-card:hover {
    transform: translateY(-7px);
}

body.access-shell .role-card .card-icon {
    position: relative;
    z-index: 1;
    width: 4.5rem !important;
    height: 4.5rem !important;
    margin: 0 auto .2rem;
    border-radius: 1.5rem;
    background: rgba(255,255,255,0.13) !important;
    border: 1px solid rgba(255,255,255,0.20);
    color: rgba(255,255,255,0.90);
    box-shadow: 0 18px 30px -16px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.20);
    backdrop-filter: blur(18px) saturate(130%);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
    transition: transform .3s ease, box-shadow .3s ease;
}

body.access-shell .role-card:hover .card-icon { transform: translateY(-4px) scale(1.08) rotate(-3deg); box-shadow: 0 24px 38px -16px rgba(0,0,0,0.95), inset 0 1px 0 rgba(255,255,255,0.28); }

body.access-shell .role-card > div.flex-1 { position: relative; z-index: 1; text-align: center; }

body.access-shell .role-card > div:last-child {
    position: relative;
    z-index: 1;
    width: fit-content;
    margin: .15rem auto 0;
    padding: 0.45rem 0.75rem;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 0.75rem;
    background: rgba(255,255,255,0.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}

body.access-shell .role-card:hover > div:last-child {
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.26);
}

body.access-shell .role-card-portal {
    min-height: 180px;
    padding: 1.4rem !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

body.access-shell .role-card-portal::before,
body.access-shell .role-card-portal::after { display: none; }

body.access-shell .role-card-portal .card-icon {
    width: 4rem !important;
    height: 4rem !important;
    margin: 0;
    border-radius: 1.3rem;
}

body.access-shell .role-card-portal > div.flex-1 { text-align: center; }
body.access-shell .role-card-portal > div:last-child { margin: .25rem auto 0; }

body.access-shell .access-info-panel {
    position: relative;
    overflow: hidden;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    transition: transform .25s ease;
}

body.access-shell .access-info-panel::before {
    position: absolute;
    top: 2.5rem;
    right: 2rem;
    width: 6rem;
    height: 6rem;
    content: "";
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 1.5rem;
    transform: rotate(45deg);
    pointer-events: none;
}

body.access-shell .access-info-panel:hover { transform: translateY(-4px); }
body.access-shell .access-info-panel > * { position: relative; z-index: 1; }

body.access-shell .access-login-card::after { display: none; }

body.access-shell .access-login-card > * { position: relative; z-index: 1; }

body.access-shell .access-console-label {
    padding: 0.45rem 0.75rem;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 999px;
    background: rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.54);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

body.access-shell .access-console-dot {
    width: .45rem;
    height: .45rem;
    border-radius: 999px;
    background: #67e8f9;
    box-shadow: 0 0 0 .22rem rgba(103,232,249,.13), 0 0 16px rgba(103,232,249,.75);
}

body.access-shell .access-role-icon {
    background: rgba(255,255,255,0.13) !important;
    border: 1px solid rgba(255,255,255,0.20);
    color: rgba(255,255,255,0.90);
    box-shadow: 0 14px 28px -14px rgba(0,0,0,0.78);
}

body.access-shell .access-login-card {
    position: relative;
    overflow: hidden;
    background: transparent !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: transparent !important;
    box-shadow: none !important;
    border-radius: 0;
}

body.access-shell .access-login-card::before { display: none; }

body.access-shell .access-module-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin: -.25rem -.25rem 1.5rem;
    padding-bottom: .8rem;
    border-bottom: 1px solid rgba(255,255,255,0.10);
    color: rgba(255,255,255,0.42);
    font-size: .63rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

body.access-shell .access-module-bar i {
    margin-right: .35rem;
    color: rgba(255,255,255,0.72);
}

body.access-shell .access-login-card .gi {
    min-height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.045));
    backdrop-filter: blur(14px) saturate(125%);
    -webkit-backdrop-filter: blur(14px) saturate(125%);
    border-color: rgba(255,255,255,0.20);
}

body.access-shell .access-login-card .gi:focus {
    transform: translateY(-1px);
    box-shadow: 0 0 0 3px rgba(167,139,250,0.16), 0 12px 26px -18px rgba(0,0,0,0.8);
}

body.access-shell .access-login-card button[type="submit"] {
    min-height: 48px;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 14px 28px -14px rgba(0,0,0,0.8);
    background-image: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

body.access-shell .access-login-card button[type="submit"]:hover {
    transform: translateY(-2px);
    border-color: rgba(255,255,255,0.28);
    box-shadow: 0 20px 34px -18px rgba(0,0,0,0.9);
}

body.access-shell .access-login-card .text-center {
    position: relative;
    padding-bottom: 1.25rem;
    margin-bottom: 1.5rem;
}

body.access-shell .access-login-card .text-center::after {
    position: absolute;
    right: 18%;
    bottom: 0;
    left: 18%;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.24), transparent);
}