.login-card [hidden],
.portal-dashboard[hidden],
.portal-admin[hidden],
.invite-result[hidden],
.bulk-invite-preview[hidden],
.bulk-invite-result[hidden] { display: none !important; }

.login-card h2 { color: var(--navy-950); font-family: var(--font-display); font-size: 1.65rem; }
.login-card .lede { margin-bottom: 1.5rem; }
.login-form { display: grid; gap: 0.65rem; margin-top: 1.25rem; }
.login-form label,
.invite-result label { color: var(--navy-950); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; }
.login-form input,
.login-form select,
.invite-result input {
  width: 100%; min-height: 3rem; margin-bottom: 0.45rem; padding: 0.65rem 0.8rem;
  border: 1px solid var(--line-dark); border-radius: 0.2rem;
  background: var(--white); color: var(--navy-950); font: inherit;
}
.login-form input:focus-visible,
.login-form select:focus-visible,
.invite-result input:focus-visible { outline: 2px solid var(--warm-500); outline-offset: 2px; }
.login-form input[readonly] { background: var(--paper-warm); }
.login-form button:disabled { opacity: 0.6; cursor: wait; }
.login-google-button { width: 100%; margin-top: 1rem; cursor: pointer; }
.login-google-button:disabled { opacity: 0.6; cursor: wait; }
.login-text-button { display: inline-block; margin-top: 1rem; padding: 0; border: 0; background: none; color: var(--navy-700); font: inherit; font-size: 0.84rem; font-weight: 700; text-decoration: underline; text-underline-offset: 0.2rem; cursor: pointer; }
.login-message { margin: 1rem 0; padding: 0.85rem 1rem; border-left: 3px solid var(--navy-700); background: var(--paper-warm); color: var(--navy-950); font-size: 0.86rem; }
.login-message.is-error { border-left-color: #a94939; }
.login-invite { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--line-dark); }
.login-invite p { color: var(--muted); font-size: 0.9rem; }
.portal-heading h1 { max-width: 16ch; }
.portal-heading .button { cursor: pointer; }
.portal-account { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-dark); border-left: 1px solid var(--line-dark); }
.portal-account > div { min-width: 0; display: grid; gap: 0.55rem; padding: 1.4rem; border-right: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); overflow-wrap: anywhere; }
.portal-account span { color: var(--muted); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.portal-account strong { color: var(--navy-950); font-size: 1rem; }
.portal-admin { background: var(--paper-warm); }
.invite-form { width: min(100%, 32rem); }
.invite-result { width: min(100%, 40rem); display: grid; gap: 0.8rem; margin-top: 2rem; }
.invite-result input { margin: 0; }
.invite-result .button { width: fit-content; }
.bulk-invite { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--line-dark); }
.bulk-invite h3 { color: var(--navy-950); font-family: var(--font-display); font-size: 1.65rem; }
.bulk-invite-form { width: min(100%, 40rem); }
.bulk-invite-form input[type="file"],
.bulk-invite-form select,
.bulk-invite-result textarea {
  width: 100%; min-height: 3rem; padding: 0.65rem 0.8rem;
  border: 1px solid var(--line-dark); border-radius: 0.2rem;
  background: var(--white); color: var(--navy-950); font: inherit;
}
.bulk-invite-form label,
.bulk-invite-result label { color: var(--navy-950); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; }
.bulk-invite-form p,
.bulk-invite-preview p,
.bulk-invite-result p { color: var(--muted); font-size: 0.9rem; }
.bulk-invite-preview,
.bulk-invite-result { display: grid; gap: 1rem; width: min(100%, 45rem); margin-top: 2rem; }
.bulk-invite-list { max-height: 18rem; overflow: auto; padding: 0.75rem 1.25rem; border: 1px solid var(--line-dark); background: var(--white); }
.bulk-invite-list ol { margin: 0; padding-left: 1.25rem; }
.bulk-invite-list li { padding: 0.25rem 0; overflow-wrap: anywhere; }
.bulk-invite-result textarea { min-height: 11rem; resize: vertical; overflow-wrap: anywhere; }
.bulk-invite-preview .button,
.bulk-invite-result .button { width: fit-content; }
@media (max-width: 600px) { .portal-account { grid-template-columns: 1fr; } }