.creator-user-log-panel,
.creator-notification-panel,
.creator-complaint-center {
  display: grid;
  gap: 12px;
  color: #18212f;
}

.creator-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.creator-section-head div {
  display: grid;
  gap: 4px;
}

.creator-section-head b {
  font-size: 18px;
  line-height: 1.25;
}

.creator-section-head span {
  color: #6a7280;
  font-size: 13px;
  line-height: 1.45;
}

.creator-section-head em {
  flex: 0 0 auto;
  border: 1px solid #d7dde8;
  border-radius: 999px;
  color: #455064;
  font-size: 12px;
  font-style: normal;
  line-height: 1;
  padding: 7px 10px;
}

.creator-user-log-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.creator-user-log-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.creator-user-log-stats article {
  display: grid;
  gap: 4px;
  border: 1px solid #e2e7ef;
  border-radius: 8px;
  background: linear-gradient(180deg, #fff, #f8fbff);
  padding: 10px;
}

.creator-user-log-stats span {
  color: #6a7280;
  font-size: 12px;
  line-height: 1.2;
}

.creator-user-log-stats b {
  color: #172033;
  font-size: 22px;
  line-height: 1;
}

.creator-user-log-stats em {
  color: #b45309;
  font-size: 12px;
  font-style: normal;
}

.creator-user-log-tabs button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  border: 1px solid #d9e1ec;
  border-radius: 8px;
  background: #fff;
  color: #586273;
  font-size: 13px;
  padding: 0 10px;
}

.creator-user-log-tabs button.is-active {
  border-color: #1f7a5c;
  background: #eef8f3;
  color: #15523f;
}

.creator-user-log-tabs b {
  font-size: 15px;
}

.creator-user-log-list,
.creator-notification-list,
.creator-complaint-list {
  display: grid;
  gap: 10px;
}

.creator-user-log-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid #e2e7ef;
  border-left: 4px solid #d8e0eb;
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.creator-user-log-row.is-hot {
  border-left-color: #dc2626;
  background: #fffafa;
}

.creator-user-log-row.is-warm {
  border-left-color: #f59e0b;
  background: #fffdf7;
}

.creator-user-log-row.is-watch {
  border-left-color: #2563eb;
}

.creator-user-log-row.is-paid {
  border-left-color: #16a34a;
}

.creator-user-avatar {
  display: grid;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border-radius: 50%;
  background: #e9f2ff;
  color: #27517c;
  font-weight: 700;
  place-items: center;
}

.creator-user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.creator-user-log-main {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.creator-user-log-title,
.creator-complaint-title,
.creator-notification-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.creator-user-log-title b,
.creator-complaint-title b,
.creator-notification-card b {
  overflow: hidden;
  font-size: 15px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creator-pay-state,
.creator-complaint-status {
  flex: 0 0 auto;
  border-radius: 999px;
  font-size: 12px;
  font-style: normal;
  line-height: 1;
  padding: 5px 8px;
}

.creator-pay-state.is-paid {
  background: #eaf7ee;
  color: #24743e;
}

.creator-pay-state.is-unpaid {
  background: #fff4df;
  color: #9a6412;
}

.creator-user-log-meta,
.creator-user-log-recent,
.creator-complaint-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  color: #6a7280;
  font-size: 12px;
  line-height: 1.4;
}

.creator-user-intent-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.creator-user-intent-line strong {
  border-radius: 999px;
  background: #fee2e2;
  color: #b91c1c;
  font-size: 12px;
  line-height: 1;
  padding: 5px 8px;
}

.creator-user-log-row.is-warm .creator-user-intent-line strong {
  background: #fef3c7;
  color: #92400e;
}

.creator-user-log-row.is-watch .creator-user-intent-line strong {
  background: #dbeafe;
  color: #1d4ed8;
}

.creator-user-log-row.is-paid .creator-user-intent-line strong {
  background: #dcfce7;
  color: #166534;
}

.creator-user-intent-line span,
.creator-user-log-reason,
.creator-user-follow-suggest {
  color: #475569;
  font-size: 12px;
  line-height: 1.45;
}

.creator-user-follow-suggest {
  border-radius: 8px;
  background: #f5f7fb;
  padding: 7px 8px;
}

.creator-user-log-recent span {
  color: #334055;
}

.creator-user-log-actions {
  display: grid;
  gap: 6px;
  min-width: 76px;
}

.creator-notification-card,
.creator-complaint-card {
  display: grid;
  gap: 10px;
  border: 1px solid #e0e6ef;
  border-left: 4px solid #5f7c9d;
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.creator-notification-card.is-paid {
  border-left-color: #1f7a5c;
}

.creator-notification-card.is-verified {
  border-left-color: #2f6fce;
}

.creator-notification-card.is-refundPending {
  border-left-color: #c47a19;
}

.creator-notification-card.is-refunded {
  border-left-color: #24743e;
}

.creator-notification-card.is-refundRejected {
  border-left-color: #b64242;
}

.creator-notification-top span {
  border-radius: 999px;
  background: #eef3f8;
  color: #405067;
  font-size: 12px;
  line-height: 1;
  padding: 6px 9px;
}

.creator-notification-top time,
.creator-complaint-meta time {
  color: #788293;
  font-size: 12px;
}

.creator-notification-card p,
.creator-complaint-card p {
  margin: 0;
  color: #4b5565;
  font-size: 13px;
  line-height: 1.55;
}

.creator-notification-actions,
.creator-complaint-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.creator-complaint-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.creator-complaint-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.creator-complaint-status b {
  font-size: 15px;
}

.creator-complaint-status.is-pending,
.creator-complaint-card.is-pending .creator-complaint-status {
  background: #fff4df;
  color: #9a6412;
}

.creator-complaint-status.is-refunded,
.creator-complaint-card.is-refunded .creator-complaint-status {
  background: #eaf7ee;
  color: #24743e;
}

.creator-complaint-status.is-rejected,
.creator-complaint-card.is-rejected .creator-complaint-status {
  background: #fdecec;
  color: #b64242;
}

.creator-complaint-card.is-pending {
  border-left-color: #c47a19;
}

.creator-complaint-card.is-refunded {
  border-left-color: #24743e;
}

.creator-complaint-card.is-rejected {
  border-left-color: #b64242;
}

.creator-complaint-main {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
}

.creator-complaint-note {
  display: block;
  margin-top: 6px;
  color: #536174;
  font-size: 12px;
  line-height: 1.45;
}

.creator-complaint-actions input {
  min-width: 180px;
  flex: 1 1 180px;
  height: 34px;
  border: 1px solid #d9e1ec;
  border-radius: 8px;
  color: #273247;
  font-size: 13px;
  padding: 0 10px;
}

@media (max-width: 560px) {
  .creator-section-head {
    align-items: stretch;
  }

  .creator-user-log-row {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .creator-user-avatar {
    width: 40px;
    height: 40px;
  }

  .creator-user-log-actions {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .creator-notification-actions,
  .creator-complaint-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .creator-complaint-actions input {
    grid-column: 1 / -1;
    width: 100%;
  }
}