.auth-page { min-height: 100dvh; display: grid; place-items: center; padding: 30px 16px; }
.auth-card { width: min(100%, 470px); background: #ffffffed; border: 1px solid white; border-radius: 26px; padding: 32px; box-shadow: 0 20px 80px #30235e12; }
.auth-brand { display: block; width: 160px; padding: 12px 16px; border-radius: 12px; background: #182443; margin: 0 auto 24px; }
.auth-brand img { width: 100%; filter: brightness(0) invert(1); }
.auth-tabs { display: flex; gap: 6px; padding: 5px; background: #f0ecf7; border-radius: 12px; margin-bottom: 24px; }
.auth-tabs a { flex: 1; text-align: center; padding: 10px; color: #7a6c91; border-radius: 9px; }
.auth-tabs a[aria-current] { background: white; color: #5f40a0; box-shadow: 0 2px 10px #3724550c; }
.auth-card h1 { font-size: 27px; line-height: 1.25; margin-bottom: 10px; }
.auth-card p { font-size: 14px; color: #79718b; margin-bottom: 22px; }
.auth-card label { display: block; font-size: 14px; color: #504763; margin-bottom: 16px; }
.auth-card label[hidden] { display: none; }
.auth-card input:not([type=hidden]), .auth-card select { width: 100%; display: block; margin-top: 7px; padding: 12px 14px; border: 1px solid #dfd7ed; background: #fdfbff; border-radius: 10px; color: #302941; }
.auth-card small { display: block; color: #8d7e9c; margin-top: 6px; font-size: 12px; }
.auth-card .portal-btn { width: 100%; display: block; text-align: center; }
.auth-error { padding: 12px; border-radius: 10px; color: #a32f53; background: #fff0f3; margin: 10px 0 16px; font-size: 14px; }
.auth-divider { display: flex; align-items: center; gap: 14px; font-size: 13px; color: #9686a4; margin: 20px 0; }
.auth-divider::before, .auth-divider::after { content: ''; height: 1px; flex: 1; background: #e9e1f1; }
.auth-bottom { display: block; text-align: center; font-size: 13px; color: #7a638f; margin-top: 20px; }
.portal-header .portal-role-links { min-width: 0; align-items: center; }
.portal-header .portal-role-links a { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-header .portal-role-links .portal-btn { font-size: 13px; padding: 8px 12px; }
.portal-definition dd, .portal-profile-head h2, .portal-student strong, .portal-heading h1 { overflow-wrap: anywhere; }
@media(max-width:480px) { .portal-header .portal-role-links a { max-width: 80px; } }
@media(max-width:480px) { .auth-card { padding: 25px 22px; } }