.agent-page {
  min-height: min(100vh, var(--view-height, 100vh));
  background: var(--theme-app-backgroud-color, #f4f4f4);
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + min(4vw, 21.6px));
}

.agent-body {
  padding: min(2.933333vw, 15.84px);
}

.agent-hero {
  padding: min(5.333333vw, 28.8px);
  border-radius: min(3.555556vw, 19.2px);
  color: #f6d77f;
  background:
    radial-gradient(circle at 78% 24%, rgba(255, 218, 115, 0.2), transparent 38%),
    linear-gradient(135deg, #2a1900 0%, #6d4304 100%);
}

.agent-hero p,
.agent-hero span {
  margin: 0;
  color: #ead8ae;
  font-size: min(3.2vw, 17.28px);
}

.agent-hero h1 {
  margin: min(1.066667vw, 5.76px) 0 min(1.6vw, 8.64px);
  font-size: min(7.111111vw, 38.4px);
}

.agent-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: min(2.133333vw, 11.52px);
  margin: min(2.666667vw, 14.4px) 0;
}

.agent-stats div,
.agent-card,
.agent-detail-card,
.agent-base-grid div,
.agent-menu button {
  background: var(--theme-card-background, #fff);
  border-radius: min(2.666667vw, 14.4px);
  border: min(0.177778vw, 0.96px) solid rgba(0, 0, 0, 0.04);
}

.agent-stats div {
  padding: min(3.2vw, 17.28px) min(1.777778vw, 9.6px);
  text-align: center;
}

.agent-stats strong {
  display: block;
  color: #bd9534;
  font-size: min(3.733333vw, 20.16px);
}

.agent-stats span,
.agent-card p,
.agent-detail-card p,
.agent-base-grid span {
  color: var(--text-color-3, #777);
  font-size: min(3.022222vw, 16.32px);
}

.agent-menu {
  display: grid;
  gap: min(2.133333vw, 11.52px);
}

.agent-menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: min(3.555556vw, 19.2px);
  border: none;
  text-align: left;
}

.agent-menu strong,
.agent-card-head strong {
  display: block;
  color: var(--heading-color, #222);
  font-size: min(3.733333vw, 20.16px);
}

.agent-menu span {
  display: block;
  margin-top: min(0.711111vw, 3.84px);
  color: var(--text-color-3, #777);
  font-size: min(2.933333vw, 15.84px);
}

.agent-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: min(2.133333vw, 11.52px);
}

.agent-card {
  padding: min(3.555556vw, 19.2px);
}

.agent-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: min(2.133333vw, 11.52px);
}

.agent-card p,
.agent-detail-card p {
  margin: min(1.422222vw, 7.68px) 0 0;
}

.agent-card button,
.agent-load-more {
  margin-top: min(2.666667vw, 14.4px);
  border: none;
  border-radius: min(5.333333vw, 28.8px);
  background: #bd9534;
  color: #fff;
  padding: min(1.955556vw, 10.56px) min(4vw, 21.6px);
  font-size: min(3.2vw, 17.28px);
}

.agent-money {
  flex-shrink: 0;
  font-weight: 700;
  color: var(--heading-color, #222);
}

.agent-money.plus {
  color: #ef4444;
}

.agent-money.minus {
  color: #10b981;
}

.agent-empty {
  padding: min(10.666667vw, 57.6px) min(4vw, 21.6px);
  text-align: center;
  color: var(--text-color-3, #999);
  font-size: min(3.466667vw, 18.72px);
}

.agent-load-more {
  display: block;
  width: fit-content;
  margin: min(3.2vw, 17.28px) auto 0;
}

.agent-detail-card {
  padding: min(4vw, 21.6px);
}

.agent-detail-card h2 {
  margin: 0 0 min(2.666667vw, 14.4px);
  color: #bd9534;
  font-size: min(6.4vw, 34.56px);
}

.agent-base-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: min(2.133333vw, 11.52px);
  margin-top: min(2.666667vw, 14.4px);
}

.agent-base-grid div {
  padding: min(3.2vw, 17.28px);
}

.agent-base-grid strong {
  display: block;
  margin-top: min(1.066667vw, 5.76px);
  color: #bd9534;
  font-size: min(3.733333vw, 20.16px);
}

.agent-filter {
  margin-bottom: min(2.666667vw, 14.4px);
}

.agent-filter select {
  width: 100%;
  border: min(0.266667vw, 1.44px) solid rgba(0, 0, 0, 0.08);
  border-radius: min(2.133333vw, 11.52px);
  padding: min(2.133333vw, 11.52px) min(2.666667vw, 14.4px);
  background: #fff;
  font-size: min(3.2vw, 17.28px);
}