.diva-users { color: #6e6b7b; max-width: 1500px; margin-inline: auto; }
.diva-users h1, .diva-users h2 { color: #5e5873; }
.diva-users h2 { font-size: 1.12rem; margin: 0 0 10px; }
.diva-users p { line-height: 1.65; }
.diva-users__notice { border: 1px solid #d2b9ed; border-left: 4px solid #7d25cd; background: #f7f1ff; border-radius: 6px; padding: 16px 19px; margin-bottom: 22px; }
.diva-users__notice p { margin: 7px 0 0; }
.diva-users__notice strong { color: #5e367f; }
.diva-users__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-bottom: 22px; }
.diva-users__stat, .diva-users__panel { background: #fff; border-radius: 6px; box-shadow: 0 4px 24px #22292f0b; }
.diva-users__stat { padding: 20px; display: flex; flex-direction: column; gap: 13px; }
.diva-users__stat span { font-size: .85rem; }
.diva-users__stat strong { color: #7d25cd; font-size: 1.65rem; font-weight: 500; }
.diva-users__panel { padding: 23px; margin-bottom: 22px; }
.diva-users__panel-head { display: flex; justify-content: space-between; gap: 24px; align-items: center; }
.diva-users__panel-head p, .diva-users__directory header p { margin: 0; }
.diva-users__hint { font-size: .82rem; margin-bottom: 0; }
.diva-users__credentials { border: 2px solid #b86c10; background: #fffaf2; }
.diva-users__credentials h2 { color: #82500f; }
.diva-users__credential { display: grid; gap: 16px; margin: 20px 0; }
.diva-users__credential div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 12px; }
.diva-users__credential dt { font-weight: 600; }
.diva-users__credential dd { margin: 0; overflow-wrap: anywhere; }
.diva-users__credential code { color: #4d3168; background: #f1e6ff; padding: 5px 8px; border-radius: 3px; font-size: 1rem; user-select: all; }
.diva-users__message:empty, .diva-users__error:empty { display: none; }
.diva-users__message { border-radius: 6px; padding: 12px 16px; background: #f0e8fb; }
.diva-users__error { border-radius: 6px; padding: 12px 16px; color: #a12235; background: #fff0f2; }
.diva-users__directory { padding-inline: 0; padding-bottom: 0; }
.diva-users__directory > header { padding-inline: 23px; }
.diva-users__filter { display: grid; grid-template-columns: minmax(220px, 1fr) 185px auto; align-items: end; gap: 15px; padding: 23px; }
.diva-users__filter .field { margin: 0; }
.diva-users__table-wrap { overflow-x: auto; }
.diva-users .data-table { min-width: 900px; }
.diva-users .data-table th { text-align: left; }
.diva-users .data-table td small { display: block; margin-top: 5px; max-width: 230px; color: #767080; font-size: .74rem; }
.diva-users .data-table .diva-users__id { color: #5e5873; font-size: .85rem; text-transform: none; letter-spacing: normal; overflow-wrap: anywhere; max-width: 220px; background: transparent; }
.diva-users__status { display: inline-flex; background: #fff0de; color: #87520e; padding: 5px 9px; border-radius: 20px; font-size: .72rem; }
.diva-users__status--active { background: #e9f9ee; color: #25673b; }
.diva-users__actions, .diva-users__row-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.diva-users__row-actions { min-width: 150px; }
.diva-users__pagination { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 18px 23px; gap: 15px; font-size: .84rem; }
.diva-users__eyebrow { letter-spacing: .08em; font-size: .75rem; font-weight: 600; color: #7d25cd; }
.diva-users__access { max-width: 900px; }
.diva-users__access .diva-users__panel > h2 { font-size: 1.7rem; overflow-wrap: anywhere; }
.diva-users__access .diva-users__notice { margin-top: 24px; }
@media (max-width: 1000px) { .diva-users__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 650px) {
  .diva-users__panel-head { align-items: stretch; flex-direction: column; gap: 12px; }
  .diva-users__filter { grid-template-columns: minmax(0, 1fr); padding: 18px; }
  .diva-users__panel, .diva-users__stat { padding: 18px; }
  .diva-users__directory { padding-inline: 0; padding-bottom: 0; }
  .diva-users__directory > header { padding-inline: 18px; }
  .diva-users__credential div { grid-template-columns: minmax(0, 1fr); gap: 5px; }
  .diva-users__stats { gap: 12px; }
  .diva-users__stat strong { font-size: 1.4rem; }
  .diva-users__pagination { padding: 18px; }
}