.expert-center-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  overflow-y: auto;
  background: #f4f6fb;
  color: #24262b;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
}

.expert-center-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 80px 1fr 80px;
  align-items: center;
  height: 50px;
  border-bottom: 1px solid #eee;
  background: #fff;
  text-align: center;
}

.expert-center-header button {
  border: 0;
  background: transparent;
  color: #333;
}

.expert-center-body {
  width: min(100% - 24px, 560px);
  margin: 14px auto 40px;
}

.expert-value-card,
.expert-center-card {
  margin-bottom: 14px;
  padding: 18px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 6px 24px rgba(28, 49, 91, .06);
}

.expert-value-card {
  background: linear-gradient(135deg, #4738b8, #6a5de5 55%, #2677da);
  color: #fff;
}

.expert-value-badge {
  display: inline-flex;
  padding: 5px 10px;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  font-size: 12px;
}

.expert-value-card h1 {
  margin: 14px 0 8px;
  font-size: 21px;
  line-height: 1.45;
}

.expert-value-card p {
  margin: 0;
  color: rgba(255,255,255,.86);
  font-size: 14px;
  line-height: 1.7;
}

.expert-value-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 16px;
  font-size: 12px;
}

.expert-value-flow span {
  padding: 6px 9px;
  border-radius: 10px;
  background: rgba(255,255,255,.16);
}

.expert-card-title {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.expert-center-card h2 {
  margin: 0 0 5px;
  font-size: 17px;
}

.expert-card-title p {
  margin: 0;
  color: #8a8f99;
  font-size: 12px;
  line-height: 1.5;
}

.expert-status,
.expert-entry-badge {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  background: #fff4de;
  color: #b36b00;
  font-size: 11px;
}

.expert-application-form {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.expert-application-form label {
  display: grid;
  gap: 6px;
  font-size: 13px;
}

.expert-application-form input,
.expert-application-form select,
.expert-application-form textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid #dfe3eb;
  border-radius: 11px;
  background: #fafbfe;
  font: inherit;
}

.expert-application-form textarea {
  min-height: 86px;
  resize: vertical;
}

.expert-application-form small {
  color: #969ba5;
}

.expert-primary-button,
.expert-online-toggle,
.expert-queue-item button {
  border: 0;
  border-radius: 12px;
  background: #5b57df;
  color: #fff;
  cursor: pointer;
}

.expert-primary-button {
  padding: 12px;
  font-size: 15px;
}

.expert-online-toggle {
  flex: 0 0 auto;
  padding: 8px 11px;
}

.expert-online-toggle.online {
  background: #07b86b;
}

.expert-queue {
  margin-top: 14px;
}

.expert-empty {
  padding: 18px 12px;
  border-radius: 12px;
  background: #f7f8fb;
  color: #8b909a;
  text-align: center;
  font-size: 12px;
}

.expert-queue-item {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
}

.expert-history-refresh {
  padding: 7px 10px;
  border: 1px solid #dddff0;
  border-radius: 10px;
  background: #f7f7ff;
  color: #514bd2;
}

.expert-history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
}

.expert-history-item div {
  display: grid;
  gap: 4px;
}

.expert-history-item small {
  color: #8b909a;
}

.expert-history-item button {
  padding: 7px 11px;
  border: 0;
  border-radius: 10px;
  background: #eeedff;
  color: #514bd2;
}

.expert-dialog {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: grid;
  place-items: end center;
  padding-top: 40px;
  background: rgba(17, 24, 39, .45);
}

.expert-dialog-card {
  box-sizing: border-box;
  width: min(100%, 560px);
  max-height: 92vh;
  overflow-y: auto;
  padding: 16px;
  border-radius: 20px 20px 0 0;
  background: #fff;
}

.expert-dialog-card header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.expert-dialog-card header div {
  display: grid;
  gap: 4px;
}

.expert-dialog-card header small {
  color: #8b909a;
}

.expert-dialog-card header button {
  border: 0;
  background: transparent;
  font-size: 24px;
}

.expert-message-list {
  display: grid;
  gap: 10px;
  margin: 16px 0;
}

.expert-message-list article {
  padding: 10px 12px;
  border-radius: 12px;
  background: #f5f6fa;
}

.expert-message-list article[data-sender="expert"],
.expert-message-list article[data-sender="card_owner"] {
  background: #edfff6;
}

.expert-message-list p {
  margin: 4px 0 0;
  line-height: 1.6;
}

.expert-dialog-actions {
  display: grid;
  gap: 9px;
}

.expert-dialog-actions textarea,
.expert-dialog-actions select {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 10px;
  border: 1px solid #dfe3eb;
  border-radius: 10px;
}

.expert-dialog-actions button {
  padding: 10px 12px;
  border: 0;
  border-radius: 11px;
  background: #5b57df;
  color: #fff;
}

.expert-rating-box {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 12px;
  background: #f8f8ff;
}

.expert-rating-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.expert-rating-tags label {
  padding: 6px 8px;
  border: 1px solid #dedff0;
  border-radius: 999px;
  font-size: 11px;
}

.expert-dialog-actions .expert-dispute-button {
  background: #fff3f3;
  color: #b42318;
}

.expert-review-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 8px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid #eee;
}

.expert-review-item div {
  display: grid;
  gap: 4px;
}

.expert-review-item small,
.expert-review-item > span {
  color: #8b909a;
  font-size: 11px;
}

.expert-review-item button {
  padding: 7px 9px;
  border: 0;
  border-radius: 9px;
  background: #edfff6;
  color: #087f5b;
}

.expert-review-item button[data-status="rejected"] {
  background: #fff3f3;
  color: #b42318;
}

.expert-queue-item div {
  display: grid;
  gap: 4px;
}

.expert-queue-item small {
  color: #8b909a;
}

.expert-queue-item button {
  padding: 8px 11px;
}

.expert-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 14px;
}

.expert-metric-grid div {
  display: grid;
  gap: 4px;
  padding: 12px 5px;
  border-radius: 12px;
  background: #f7f8fb;
  text-align: center;
}

.expert-metric-grid b {
  color: #544ed6;
}

.expert-metric-grid span {
  color: #8d929d;
  font-size: 10px;
}

.expert-safety-note {
  margin: 14px 0 0;
  padding: 10px;
  border-radius: 10px;
  background: #fff8e8;
  color: #87691f;
  font-size: 11px;
  line-height: 1.6;
}

.expert-split-grid { display: grid; grid-template-columns: minmax(130px,1fr) repeat(4,58px); gap: 7px; align-items: center; margin-top: 9px; }
.expert-split-grid input { width: 100%; box-sizing: border-box; padding: 8px 4px; border: 1px solid #dedff0; border-radius: 8px; text-align: center; }
.expert-split-head { color: #7d8290; font-size: 11px; text-align: center; }
.expert-split-head b:first-child { text-align: left; }
.expert-release-delay { display: grid; gap: 6px; margin-top: 14px; font-size: 12px; }
.expert-release-delay input { padding: 9px; border: 1px solid #dedff0; border-radius: 9px; }
.expert-split-actions { display: flex; gap: 9px; margin-top: 12px; }
.expert-split-actions button { flex: 1; padding: 10px; border: 0; border-radius: 10px; }
.expert-release-settlements { background: #eef0ff; color: #4d50bf; }
.expert-settlement-worker { margin: 10px 0; padding: 9px; border-radius: 9px; background: #f3f5ff; color: #555ca0; font-size: 11px; }
.expert-settlement-metrics { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; }
.expert-settlement-metrics div { display: grid; gap: 3px; padding: 9px 4px; border-radius: 9px; background: #f7f8fb; text-align: center; }
.expert-settlement-metrics span { color: #8d929d; font-size: 10px; }
.expert-settlement-list article { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 8px; align-items: center; padding: 10px 0; border-bottom: 1px solid #eee; }
.expert-settlement-list article div { display: grid; gap: 3px; min-width: 0; }
.expert-settlement-list small { color: #8d929d; font-size: 10px; overflow: hidden; text-overflow: ellipsis; }
.expert-settlement-list [class^="status-"] { padding: 3px 6px; border-radius: 8px; background: #f0f1f5; font-size: 10px; }
.expert-settlement-list .status-pending { background: #fff5d8; color: #906c00; }
.expert-settlement-list .status-released { background: #e8fff4; color: #087f5b; }
.expert-settlement-list .status-refunded { background: #fff0f0; color: #b42318; }

@media (max-width: 420px) {
  .expert-metric-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .expert-split-grid { grid-template-columns: minmax(110px,1fr) repeat(4,48px); gap: 4px; font-size: 10px; }
  .expert-settlement-metrics { grid-template-columns: repeat(2,1fr); }
}