/* Scoped to the customer workspace; mirrors the existing red and charcoal palette. */
.member-management {
  --member-bg: #101010;
  --member-panel: #171717;
  --member-raised: #211d1d;
  --member-border: #403737;
  --member-text: #f4f2f2;
  --member-muted: #aaa6a6;
  --member-accent: #df1728;
  --member-highlight: #ffb8bf;
  min-width: 0;
  padding: 24px;
  color: var(--member-text);
  background: var(--member-bg);
  border: 1px solid var(--member-border);
  border-radius: 10px;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
}
.member-management .member-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 22px; }
.member-management .member-heading > div { flex: 1; min-width: 230px; }
.member-management h2 { color: var(--member-text); font-size: 25px; line-height: 1.4; letter-spacing: 0; }
.member-management h3 { color: var(--member-text); font-size: 18px; line-height: 1.5; }
.member-management .member-hint { margin: 8px 0 12px; color: var(--member-muted); font-size: 12px; line-height: 1.7; }
.member-management .member-count { padding: 7px 10px; border: 1px solid #59383e; border-radius: 6px; color: var(--member-highlight); font-variant-numeric: tabular-nums; white-space: nowrap; }
.member-management .member-toolbar, .member-management .member-selection, .member-management .member-panel-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.member-management .member-toolbar { padding-bottom: 18px; border-bottom: 1px solid var(--member-border); }
.member-management .member-filters { display: grid; grid-template-columns: minmax(180px, 2fr) repeat(4, minmax(110px, 1fr)) auto; align-items: end; gap: 12px; margin-top: 12px; }
.member-management .member-field { min-width: 0; }
.member-management label { margin: 8px 0 6px; color: #cbc4c4; font-size: 12px; }
.member-management input, .member-management select, .member-management textarea { min-width: 0; min-height: 44px; border: 1px solid #493d3d; padding: 10px 12px; background: #191717; color: var(--member-text); border-radius: 6px; font-size: 14px; }
.member-management textarea { min-height: 86px; resize: vertical; }
.member-management input[type="checkbox"] { width: 20px; height: 20px; min-height: 20px; accent-color: var(--member-accent); cursor: pointer; }
.member-management .member-select-all { display: inline-flex; align-items: center; gap: 6px; margin: 0; cursor: pointer; }
.member-management button { min-height: 44px; padding: 9px 12px; border: 1px solid #493d3d; background: var(--member-raised); color: var(--member-text); border-radius: 6px; font-size: 13px; }
.member-management button:hover { border-color: #866067; background: #302427; }
.member-management button.primary { border-color: var(--member-accent); background: var(--member-accent); color: #fff; }
.member-management button.primary:hover { background: #c91424; }
.member-management :is(button, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--member-highlight); outline-offset: 3px; }
.member-management .member-message { margin: 12px 0; min-height: 1.6em; color: var(--member-highlight); font-size: 13px; line-height: 1.6; }
.member-management .member-message[data-tone="error"] { color: #ff9ca8; }
.member-management .member-selection { padding: 12px 0; }
.member-management .member-selection > span { flex: 1 1 300px; color: var(--member-muted); font-size: 12px; line-height: 1.7; }
.member-management .member-table-scroll { width: 100%; overflow-x: auto; border: 1px solid var(--member-border); border-radius: 6px; overscroll-behavior-x: contain; }
.member-management .member-table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.6; font-variant-numeric: tabular-nums; }
.member-management .member-table th { padding: 11px 12px; color: #c8bebe; background: #221b1c; font-size: 12px; font-weight: 650; white-space: nowrap; text-align: left; }
.member-management .member-table td { min-width: 72px; max-width: 260px; padding: 12px; border-top: 1px solid #343131; overflow-wrap: anywhere; vertical-align: top; }
.member-management .member-customer-number { display: inline-block; min-width: 6ch; margin-right: 12px; color: #c8bebe; font-family: Consolas, monospace; font-size: 13px; letter-spacing: .04em; white-space: nowrap; }
.member-management .member-customer-name { display: block; min-width: 100px; }
.member-management #member-number, .member-management #member-mallPoints[readonly] { color: #c8bebe; font-variant-numeric: tabular-nums; background: #211d1d; }
.member-management .member-table tbody tr:hover { background: #1d1919; }
.member-management #members-table .member-table { min-width: 1500px; }
.member-management #members-table td:nth-child(11),
.member-management #members-table td:nth-child(15) { white-space: nowrap; overflow-wrap: normal; }
.member-management #members-table td:nth-child(11) { min-width: 132px; }
.member-management #members-table td:nth-child(15) { min-width: 172px; }
.member-management #members-table th:last-child,
.member-management #members-table td:last-child { position: sticky; right: 0; z-index: 1; min-width: 180px; background: var(--member-bg); box-shadow: -1px 0 var(--member-border); }
.member-management #members-table th:last-child { z-index: 2; background: #221b1c; }
.member-management #members-table tbody tr:hover td:last-child { background: #1d1919; }
.member-management .member-balance { white-space: nowrap; font-variant-numeric: tabular-nums; }
.member-management .member-registration-source { white-space: nowrap; }
.member-management .member-row-actions { display: flex; flex-wrap: wrap; gap: 6px; white-space: nowrap; }
.member-management .member-row-actions button { padding: 6px 9px; font-size: 12px; }
.member-management .member-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 16px; color: var(--member-muted); font-size: 12px; }
.member-management .member-pagination .member-field { display: flex; align-items: center; gap: 8px; }
.member-management .member-pagination label { margin: 0; white-space: nowrap; }
.member-management .member-pagination select { width: auto; }
.member-management .member-panel { margin: 8px 0 20px; padding: 20px; border: 1px solid #694047; border-left: 3px solid var(--member-accent); border-radius: 6px; background: var(--member-panel); }
.member-management .member-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.member-management .member-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 16px; margin-bottom: 18px; }
.member-management .member-panel-actions { margin-top: 20px; }
.member-management .member-panel-actions > .member-delete { margin-left: auto; border-color: var(--member-accent); color: var(--member-highlight); }
.member-management .member-panel-actions > .member-delete:hover { border-color: var(--member-accent); background: #3c1c22; }
.member-management .member-preview { margin-top: 16px; }
.member-management .member-preview > button { margin-top: 16px; }
.member-management .member-ranking-player { display: flex; align-items: center; gap: 10px; }
.member-management .member-ranking-avatar { display: flex; align-items: center; justify-content: center; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; background: #3c282b; color: #efc4bd; font-size: 14px; font-weight: 700; }
.member-management .member-ranking-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.member-management .member-ranking-avatar [hidden] { display: none; }
.member-management .member-ranking-avatar-fallback::before { content: attr(data-initial); }
.member-management .member-ranking-player-name { min-width: 0; overflow-wrap: anywhere; }
.member-management .member-ranking-columns { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin: 0 0 18px; padding: 12px 16px; border: 1px solid var(--member-border); border-radius: 6px; }
.member-management .member-ranking-columns legend { padding: 0 6px; color: #cbc4c4; font-size: 12px; }
.member-management .member-ranking-columns label { display: inline-flex; align-items: center; gap: 8px; margin: 0; min-height: 44px; cursor: pointer; }
.member-management .member-ranking-columns input { margin: 0; }
.member-management .member-ranking-required { color: var(--member-muted); font-size: 12px; }
.member-management .member-history-item { padding: 12px 0 20px; border-bottom: 1px solid var(--member-border); }
.member-management .member-history-item h4 { margin: 8px 0; font-size: 14px; }
.member-management .member-history-item > button { margin-top: 12px; }
@media (max-width: 1150px) {
  .member-management .member-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .member-management #members-table th:last-child, .member-management #members-table td:last-child { position: static; box-shadow: none; }
  .member-management { padding: 16px 0; border: 0; border-radius: 0; }
  .member-management .member-heading { gap: 10px; margin-bottom: 14px; }
  .member-management .member-heading > div { min-width: 190px; }
  .member-management .member-count { font-size: 12px; }
  .member-management .member-toolbar > button { flex: 1 1 140px; }
  .member-management .member-filters, .member-management .member-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .member-management .member-filters > .member-field:first-child { grid-column: 1 / -1; }
  .member-management input, .member-management select, .member-management textarea { min-height: 48px; font-size: 16px; }
  .member-management .member-selection > button { flex: 1 1 auto; }
  .member-management .member-panel { padding: 14px; }
  .member-management .member-panel-actions { position: sticky; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 2; padding: 10px 0; background: var(--member-panel); }
  .member-management .member-panel-actions > button { flex: 1; }
}
@media (max-width: 420px) {
  .member-management .member-form-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .member-management button, .member-management input, .member-management select { transition: none; }
}

/* Keep each customer's coupon and its removal controls on one aligned row. */
#member-coupon-inventory .member-table { width: max-content; min-width: 100%; }
#member-coupon-inventory .member-table td { max-width: none; white-space: nowrap; overflow-wrap: normal; vertical-align: middle; }
#member-coupon-inventory .member-panel-actions { flex-wrap: nowrap; margin: 0; padding: 0; position: static; }
#member-coupon-inventory .member-field { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
#member-coupon-inventory .member-field label { margin: 0; white-space: nowrap; }
#member-coupon-inventory .member-field input[type="number"] { width: 68px; }
#member-coupon-inventory .member-field input[type="text"] { width: 180px; }
#member-coupon-inventory .member-panel-actions > button { flex: none; white-space: nowrap; }

.member-management .member-customer-person { display: flex; align-items: center; gap: 10px; }
.member-management .member-avatar-button { flex: 0 0 40px; width: 40px; height: 40px; min-height: 40px; padding: 0; border-radius: 50%; overflow: hidden; }
.member-management .member-avatar-portrait { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: #3c282b; color: #efc4bd; }
.member-management .member-avatar-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }
.member-management .member-avatar-portrait [hidden] { display: none; }
.member-management .member-avatar-fallback::before { content: attr(data-initial); }
.member-management .member-avatar-editor { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 24px; margin-top: 16px; }
.member-management .member-avatar-editor > .member-avatar-portrait { flex: 0 0 160px; width: 160px; height: 160px; font-size: 40px; }
.member-management .member-avatar-controls { flex: 1 1 240px; min-width: 0; }