.account-panel-root { display: block; color: #292b2d; }
.account-panel-root[hidden] { display: none; }
.account-page-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 28px; }
.account-page-heading h1 { margin: 0 0 5px; font-size: 31px; letter-spacing: -.04em; }
.account-page-heading p { margin: 0; color: #73777a; font-size: 13px; }
.account-panel-root button { font: inherit; cursor: pointer; }
.account-panel-root button:disabled { cursor: wait; opacity: .55; }
.account-primary, .account-secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 8px 15px; border-radius: 10px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.account-primary { border: 1px solid #292b2d; background: #292b2d; color: #fff; }
.account-primary:hover:not(:disabled) { background: #44474a; }
.account-secondary { border: 1px solid #d4d7d9; background: #fff; color: #303335; }
.account-secondary:hover:not(:disabled) { background: #f1f2f2; }
.account-panel-root button:focus-visible, .account-panel-root input:focus-visible { outline: 2px solid #4b8064; outline-offset: 2px; }
.account-feedback { margin: 0 0 18px; padding: 11px 14px; border-radius: 9px; background: #edf5ef; color: #2f6845; font-size: 12px; line-height: 1.65; }
.account-feedback[data-kind="warning"] { background: #fff5df; color: #79571c; }
.account-feedback[data-kind="error"] { background: #fff0ee; color: #a53f37; }
.account-invite-card { padding: 25px; border: 1px solid #e2e3e4; border-radius: 14px; background: #fff; box-shadow: 0 4px 18px rgba(0,0,0,.025); margin-bottom: 29px; }
.account-card-heading h2, .account-list-heading h2 { margin: 0; font-size: 18px; }
.account-card-heading p { margin: 4px 0 0; color: #73777a; font-size: 12px; line-height: 1.65; }
.account-invite-form { display: grid; grid-template-columns: minmax(130px, .8fr) minmax(220px, 1.2fr) auto; gap: 12px; align-items: end; margin-top: 21px; }
.account-invite-form label, .account-dialog label { display: grid; gap: 7px; color: #46494c; font-size: 12px; font-weight: 700; }
.account-invite-form input, .account-dialog input { width: 100%; min-width: 0; min-height: 40px; padding: 8px 11px; border: 1px solid #d8dadd; border-radius: 9px; background: #fff; color: #292b2d; font-size: 13px; font-weight: 400; }
.account-invite-form input::placeholder { color: #a1a4a6; font-weight: 400; }
.account-invite-help { margin: 11px 0 0; color: #83878a; font-size: 11px; }
.account-list-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 13px; }
.account-list-heading span { color: #85898b; font-size: 12px; }
.account-list { display: grid; gap: 8px; }
.account-list-placeholder { margin: 0; padding: 35px 18px; border: 1px dashed #d6d8da; border-radius: 10px; background: #fff; color: #777b7d; text-align: center; font-size: 13px; }
.account-row { display: grid; grid-template-columns: minmax(180px, 1.25fr) minmax(140px, .75fr) minmax(140px, .75fr) minmax(140px, 1fr); align-items: center; gap: 14px; min-height: 76px; padding: 13px 17px; border: 1px solid #e3e4e5; border-radius: 10px; background: #fff; box-shadow: 0 4px 18px rgba(0,0,0,.025); }
.account-identity { display: grid; gap: 2px; min-width: 0; }
.account-identity strong { font-size: 14px; font-weight: 700; }
.account-identity span { overflow-wrap: anywhere; color: #75797c; font-size: 11px; }
.account-row-detail { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.account-role, .account-state { display: inline-flex; align-items: center; min-height: 25px; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.account-role { background: #f0f1f2; color: #55585b; }
.account-state.is-active { background: #e8f2e9; color: #34734d; }
.account-state.is-inactive { background: #eeeeef; color: #777a7d; }
.account-invitation { display: grid; gap: 2px; color: #4b4f51; font-size: 12px; font-weight: 700; }
.account-invitation small { color: #8a8d90; font-size: 10px; font-weight: 400; }
.account-row-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 4px 10px; }
.account-row-actions button { padding: 4px 0; border: 0; background: none; color: #45494b; font-size: 11px; font-weight: 700; white-space: nowrap; }
.account-row-actions button:hover { text-decoration: underline; }
.account-dialog { width: min(430px, calc(100vw - 28px)); padding: 24px; border: 0; border-radius: 15px; color: #292b2d; box-shadow: 0 24px 70px rgba(0,0,0,.2); }
.account-dialog::backdrop { background: rgba(31,33,35,.45); }
.account-dialog h2 { margin: 0; font-size: 19px; }
.account-dialog p { margin: 10px 0 17px; color: #686c6e; font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.account-dialog .account-dialog-error { color: #ad4239; }
.account-dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 9px; margin-top: 23px; }

@media (max-width: 900px) {
  .account-row { grid-template-columns: minmax(190px, 1fr) minmax(140px, .7fr) minmax(140px, .7fr); }
  .account-row-actions { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 680px) {
  .account-page-heading { align-items: flex-start; }
  .account-page-heading h1 { font-size: 26px; }
  .account-invite-card { padding: 18px; }
  .account-invite-form { grid-template-columns: 1fr; }
  .account-invite-form .account-primary { justify-self: start; }
  .account-row { grid-template-columns: 1fr 1fr; padding: 13px; }
  .account-identity { grid-column: 1 / -1; }
  .account-row-actions { grid-column: 1 / -1; }
}