.portal-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.7rem;
    border: 1px solid #e0e7ff;
    border-radius: 999px;
    background: #eef2ff;
    color: #4338ca;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.portal-intro { margin-bottom: 1.5rem; text-align: center; }
.portal-intro h1 { margin: 0.9rem 0 0.45rem; font-size: 1.7rem; font-weight: 750; letter-spacing: -0.045em; color: #172036; line-height: 1.2; }
.portal-intro p { margin: 0 auto; max-width: 22rem; color: #64748b; font-size: 0.84rem; line-height: 1.65; }
.portal-help { color: #64748b; font-size: 0.75rem; line-height: 1.6; text-align: center; }
.portal-switch { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid #e8edf4; text-align: center; }
.portal-switch a { display: inline-flex; align-items: center; gap: 0.5rem; color: #64748b; font-size: 0.75rem; font-weight: 600; text-decoration: none; }
.portal-switch a:hover { color: #4338ca; }
.portal-switch a:focus-visible { outline: 3px solid #a5b4fc; outline-offset: 5px; border-radius: 3px; }
.portal-admin-note { display: flex; align-items: flex-start; gap: 0.7rem; padding: 1rem; border: 1px solid #e2e8f0; border-radius: 0.8rem; background: #f8fafc; color: #64748b; font-size: 0.75rem; line-height: 1.6; }
.portal-admin-note i { color: #6366f1; margin-top: 0.2rem; }
.auth-primary:disabled { opacity: 0.65; cursor: wait; transform: none; box-shadow: none; }
.auth-input:disabled { background: #f8fafc; color: #64748b; }
.auth-input:read-only { background: #f8fafc; color: #64748b; }
.portal-text-button { color: #4f46e5; font-size: 0.8rem; font-weight: 600; }
.portal-text-button:hover { color: #3730a3; }
.portal-text-button:disabled { color: #94a3b8; cursor: not-allowed; }
.portal-text-button:focus-visible { outline: 3px solid #a5b4fc; outline-offset: 4px; border-radius: 3px; }
.portal-reset-message { padding: 0.85rem; border: 1px solid #dbeafe; border-radius: 0.7rem; background: #eff6ff; color: #1e40af; font-size: 0.79rem; line-height: 1.65; }
.portal-reset-message.is-error { background: #fff1f2; border-color: #ffe4e6; color: #be123c; }
.portal-switch a[aria-disabled="true"] { pointer-events: none; opacity: 0.5; }
#login-message:not(.hidden) { padding: 0.75rem; background: #fff1f2; border: 1px solid #ffe4e6; border-radius: 0.7rem; line-height: 1.5; }
#login-message.portal-message-success:not(.hidden) { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
.portal-admin-only { display: none; }
.portal-switch .portal-admin-only { display: none; }
html[data-portal="admin"] .portal-user-only { display: none !important; }
html[data-portal="admin"] .portal-admin-only { display: block; }
html[data-portal="admin"] .portal-badge.portal-admin-only { display: inline-flex; }
html[data-portal="admin"] .portal-admin-note { display: flex; }
html[data-portal="admin"] .portal-switch .portal-admin-only { display: inline-flex; }
html[data-portal="admin"] .auth-backdrop {
    background: radial-gradient(ellipse at 10% 20%, #243769 0, transparent 45%), radial-gradient(ellipse at 95% 85%, #352a65 0, transparent 40%), #101a30;
}
html[data-portal="admin"] .auth-backdrop::before { opacity: 0.16; mask-image: none; background-image: radial-gradient(#a5b4fc 1px, transparent 1px); background-size: 24px 24px; }
html[data-portal="admin"] .auth-backdrop::after { border-color: #7487bb; opacity: 0.2; width: 36rem; height: 36rem; top: -16rem; left: -13rem; box-shadow: 0 0 0 4rem #7184b21a, 0 0 0 8rem #7184b20d; }
html[data-portal="admin"] .auth-store-scene { display: none; }
html[data-portal="admin"] .auth-card { background: #fff; border-color: #ffffff; box-shadow: 0 28px 90px #0000004d; }
html[data-portal="admin"] .auth-brand-icon { background: linear-gradient(145deg, #293956, #17243d); box-shadow: 0 8px 20px #17243d26; }
html[data-portal="admin"] .portal-badge { background: #f1f5f9; color: #34445f; border-color: #e2e8f0; }
html[data-portal="admin"] .auth-primary { background: #263654; }
html[data-portal="admin"] .auth-primary:hover { background: #17243d; }
html[data-portal="admin"] .auth-input:focus { border-color: #7183a7; box-shadow: 0 0 0 4px #7183a71f; }
@media (max-width: 420px) {
    .portal-intro h1 { font-size: 1.5rem; }
    .portal-intro p { font-size: 0.8rem; }
    .portal-switch { margin-top: 1.2rem; }
}