* { box-sizing: border-box; }
body { margin: 0; background: #161a1d; color: #edf0f2; font: 16px/1.6 system-ui, sans-serif; letter-spacing: 0; }
main { width: min(100% - 40px, 460px); margin: 12vh auto 40px; }
h1 { font-family: Georgia, serif; font-size: 30px; line-height: 1.25; overflow-wrap: anywhere; }
h2 { font-size: 22px; margin-top: 32px; }
p { color: #bcc7ce; }
form { display: grid; gap: 12px; margin-top: 24px; }
input { width: 100%; min-width: 0; padding: 12px; color: #edf0f2; background: #232a2f; border: 1px solid #82919a; border-radius: 4px; font: inherit; }
button { padding: 12px 16px; margin-top: 8px; color: #111719; background: #80c8b7; border: 0; border-radius: 4px; font: inherit; font-weight: 600; cursor: pointer; }
a { display: inline-block; color: #a9d9fa; margin-top: 16px; }
button:disabled { opacity: .6; cursor: wait; }
:focus-visible { outline: 3px solid #ffd27a; outline-offset: 4px; }
[hidden] { display: none !important; }
.account-page { width: min(100% - 40px, 1100px); margin-top: 40px; }
#passwordForm { max-width: 460px; }
#userManagement { margin-top: 40px; border-top: 1px solid #526069; padding-top: 16px; }
.section-heading, .action-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.section-heading { justify-content: space-between; }
.section-heading h2 { margin: 0; }
.create-user-form { grid-template-columns: minmax(180px, 1fr) minmax(160px, 220px) auto; align-items: end; margin-bottom: 24px; }
.create-user-form button { min-height: 51px; margin: 0; }
select { padding: 12px; width: 100%; min-width: 0; color: #edf0f2; background: #232a2f; border: 1px solid #82919a; border-radius: 4px; font: inherit; }
.table-scroll { overflow-x: auto; max-width: 100%; margin-top: 24px; }
table { width: 100%; border-collapse: collapse; text-align: left; font-size: 14px; }
th, td { border-bottom: 1px solid #526069; padding: 12px 10px; vertical-align: middle; }
td:first-child { overflow-wrap: anywhere; min-width: 140px; max-width: 220px; }
td select { min-width: 155px; }
td input[type="checkbox"] { width: 20px; height: 20px; accent-color: #80c8b7; }
td button { padding: 8px 12px; margin: 0; white-space: nowrap; }
.table-scroll td:last-child > .action-row { min-width: 380px; flex-wrap: nowrap; }
.secondary { background: #36434b; color: #edf0f2; }
#enrollmentResult { margin-top: 24px; max-width: 720px; }
details { margin-top: 32px; }
summary { cursor: pointer; font-weight: 600; }
dialog { width: min(100% - 40px, 460px); color: #edf0f2; background: #232a2f; border: 1px solid #82919a; border-radius: 4px; padding: 24px; }
dialog::backdrop { background: rgb(0 0 0 / 70%); }
dialog form, dialog h2 { margin-top: 0; }
@media (max-width: 680px) { .create-user-form { grid-template-columns: 1fr; } .account-page { width: calc(100% - 24px); } }