.account-panel { margin-block: 2rem; padding: 1.5rem; border: 1px solid #536078; border-radius: 1rem; }
.account-panel form { display: flex; flex-wrap: wrap; align-items: end; gap: 1rem; margin-block: 1rem; }
.account-panel label { display: grid; gap: .4rem; }
.account-panel input,.account-panel select,.account-panel button { padding: .65rem; border-radius: .4rem; border: 1px solid #7d8799; background: #182132; color: #fff; }
.account-panel button { cursor: pointer; }
.admin-user { border-top: 1px solid #536078; padding-block: 1rem; }
.admin-user .set-options { display: flex; gap: 1rem; flex-wrap: wrap; }
.admin-user .set-options label { display: inline-flex; align-items: center; }
.account-panel pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.account-panel dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: .35rem 1rem; border-block-start: 1px solid #536078; padding-block: .8rem; }
.account-panel dt { font-weight: bold; }
.account-panel dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
html:not([data-authenticated]) [data-library-book] { display: none; }
.account-panel { min-width: 0; overflow-wrap: anywhere; }
.account-panel form > label { flex: 1 1 14rem; min-width: 0; }
.account-panel input:not([type=checkbox]) { width: 100%; min-width: 0; font-size: 1rem; }
.account-panel button { min-height: 44px; max-width: 100%; white-space: normal; }
.account-panel button:disabled { opacity: .6; cursor: wait; }
.account-panel input[type=checkbox] { width: 24px; height: 24px; flex-shrink: 0; }
.admin-user .set-options { flex-basis: 100%; }
.account-panel label:has(input[type=checkbox]) { display: flex; align-items: center; }
.account-panel :focus-visible { outline: 3px solid #c5d2ff; outline-offset: 3px; }
@media (max-width: 480px) {
  .account-panel { padding: 1rem; }
  .account-panel form > label { flex-basis: 100%; }
  .account-panel form > button { width: 100%; }
}