.member-toggle {
  color: #cfe6ff;
  border-color: #3c5e86;
  background: #182942;
  white-space: nowrap;
}

dialog.member-dialog {
  width: min(620px, calc(100% - 32px));
  max-height: min(86dvh, 820px);
  border-radius: 18px;
  background: #101824;
  border-color: #304865;
  box-shadow: 0 26px 78px #0009;
}

.member-dialog::backdrop {
  background: #050a14c7;
  backdrop-filter: blur(5px);
}

.member-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--line);
  background: #111c2a;
}

.member-head h2 {
  margin: 0;
  font-size: 19px;
  line-height: 1.3;
}

.member-close {
  flex-shrink: 0;
  padding: 7px 11px;
}

.member-content {
  padding: 22px 24px 25px;
}

.member-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 14px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #0c1420;
}

.member-tabs button {
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  min-height: 37px;
  padding: 6px;
}

.member-tabs button[aria-pressed=true] {
  border-color: #385a84;
  background: #213550;
  color: #deeeff;
}

.member-hint,
.member-empty {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

.member-hint {
  margin: 0 0 14px;
}

.member-empty {
  text-align: center;
  padding: 24px 12px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  margin: 0;
}

.member-form {
  display: grid;
  gap: 12px;
}

.member-form label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 650;
}

.member-form input {
  min-height: 42px;
  background: #0b1420;
}

.member-submit {
  min-height: 44px;
}

.member-feedback {
  color: #ffd0a4;
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}

.member-feedback:empty {
  display: none;
}

.member-recovery {
  display: grid;
  gap: 14px;
}

.member-recovery p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.member-recovery-code {
  display: block;
  padding: 15px;
  border: 1px dashed #517dad;
  border-radius: 9px;
  background: #0b1625;
  color: #d4e9ff;
  overflow-wrap: anywhere;
  user-select: all;
  font-size: clamp(13px, 2.8vw, 16px);
  letter-spacing: .025em;
}

.member-actions,
.member-account,
.member-request-head,
.member-request-meta,
.member-progress-head,
.member-pagination {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}

.member-account,
.member-request-head,
.member-progress-head,
.member-pagination {
  justify-content: space-between;
}

.member-account {
  padding-bottom: 13px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 13px;
}

.member-identity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  color: #d8eaff;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.member-history {
  display: grid;
  gap: 11px;
}

.member-request {
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid #2b4058;
  border-radius: 11px;
  background: #131f2f;
}

.member-request-head code {
  color: #a9d3ff;
  font-size: 14px;
  font-weight: 700;
}

.member-state {
  padding: 3px 8px;
  border-radius: 6px;
  color: #b9ddff;
  background: #233e5c;
  font-size: 12px;
  font-weight: 650;
}

.member-state[data-closed=true] {
  color: #bac6d4;
  background: #283342;
}

.member-request-meta {
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
}

.member-request-selection,
.member-request-note {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.member-request-note {
  color: var(--muted);
  white-space: pre-wrap;
}

.member-request .member-hint {
  margin: 7px 0 0;
}

.member-progress {
  margin-top: 11px;
  padding: 9px 0 0;
  border-top: 1px solid var(--line);
  font-size: 12px;
}

.member-progress summary {
  cursor: pointer;
  color: var(--accent);
}

.member-progress ol {
  list-style: none;
  margin: 10px 0 3px;
  padding: 0 0 0 11px;
  border-left: 2px solid #3e628c;
}

.member-progress li + li {
  margin-top: 11px;
}

.member-progress-head span,
.member-progress p {
  color: var(--muted);
}

.member-progress p {
  margin: 3px 0 0;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.member-cancel {
  margin-top: 9px;
}

.member-cancel button {
  padding: 6px 10px;
  font-size: 12px;
}

.member-danger {
  color: #ffcecb;
  border-color: #75464d;
  background: #38252e;
}

.member-pagination {
  margin-top: 14px;
  font-size: 13px;
  color: var(--muted);
}

@media (max-width: 560px) {
  dialog.member-dialog {
    width: calc(100% - 18px);
    max-height: 92dvh;
    border-radius: 13px;
  }
  .member-head { padding: 15px; }
  .member-content { padding: 16px 15px 20px; }
  .member-form input { font-size: 16px; }
  .member-recovery .member-actions button { flex: 1; }
}
.member-role { padding:3px 7px; border:1px solid #41668e; border-radius:999px; color:#c2ddff; font-size:11px; font-weight:650; white-space:nowrap; }