.hjk-cpa-page {
  width: 100%;
  padding: 24px;
  color: var(--semi-color-text-0, #1c1f23);
  font-family: Inter, ui-sans-serif, system-ui, "Microsoft YaHei", sans-serif;
}

.hjk-cpa-page *,
.hjk-cpa-drawer * {
  box-sizing: border-box;
  letter-spacing: 0;
}

.hjk-cpa-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.hjk-cpa-page-head h1 {
  margin: 0;
  font-size: 22px;
  line-height: 30px;
}

.hjk-cpa-page-head p {
  margin: 4px 0 0;
  color: var(--semi-color-text-2, #6b7280);
  font-size: 12px;
}

.hjk-cpa-stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border: 1px solid var(--semi-color-border, #e5e7eb);
  border-radius: 8px;
  background: var(--semi-color-bg-2, #fff);
  overflow: hidden;
}

.hjk-cpa-stat {
  min-width: 0;
  padding: 14px 16px;
  border-right: 1px solid var(--semi-color-border, #e5e7eb);
}

.hjk-cpa-stat:last-child {
  border-right: 0;
}

.hjk-cpa-stat span,
.hjk-cpa-stat small {
  display: block;
  overflow: hidden;
  color: var(--semi-color-text-2, #6b7280);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hjk-cpa-stat strong {
  display: block;
  overflow: hidden;
  margin: 4px 0 2px;
  font-size: 19px;
  line-height: 26px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hjk-cpa-stat-blue strong { color: #2563eb; }
.hjk-cpa-stat-green strong,
.hjk-cpa-stat-ok strong { color: #059669; }
.hjk-cpa-stat-warn strong { color: #d97706; }
.hjk-cpa-stat-danger strong { color: #dc2626; }

.hjk-cpa-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) repeat(4, minmax(130px, .7fr)) auto;
  gap: 10px;
  align-items: center;
  margin: 14px 0 10px;
}

.hjk-cpa-input,
.hjk-cpa-select {
  width: 100%;
  height: 36px;
  border: 1px solid var(--semi-color-border, #dfe3e8);
  border-radius: 6px;
  background: var(--semi-color-bg-2, #fff);
  color: var(--semi-color-text-0, #1c1f23);
  padding: 0 11px;
  font-size: 13px;
}

.hjk-cpa-filter-count {
  color: var(--semi-color-text-2, #6b7280);
  font-size: 12px;
  white-space: nowrap;
}

.hjk-cpa-table-shell {
  border: 1px solid var(--semi-color-border, #e5e7eb);
  border-radius: 8px;
  background: var(--semi-color-bg-2, #fff);
  overflow: hidden;
}

.hjk-cpa-table-scroll {
  overflow: auto;
}

.hjk-cpa-table {
  width: 100%;
  min-width: 1480px;
  border-collapse: collapse;
  font-size: 12px;
}

.hjk-cpa-table th,
.hjk-cpa-table td {
  padding: 10px 11px;
  border-bottom: 1px solid var(--semi-color-border, #edf0f2);
  text-align: left;
  vertical-align: middle;
}

.hjk-cpa-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--semi-color-fill-0, #f7f8fa);
  color: var(--semi-color-text-2, #6b7280);
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}

.hjk-cpa-table tbody tr:hover {
  background: var(--semi-color-fill-0, rgba(15, 23, 42, .03));
}

.hjk-cpa-risk-row td:first-child {
  box-shadow: inset 3px 0 0 #dc2626;
}

.hjk-cpa-account,
.hjk-cpa-pool,
.hjk-cpa-metric,
.hjk-cpa-requests {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.hjk-cpa-account { width: 250px; }
.hjk-cpa-account strong,
.hjk-cpa-account span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hjk-cpa-account span,
.hjk-cpa-pool span,
.hjk-cpa-metric small,
.hjk-cpa-time {
  color: var(--semi-color-text-2, #6b7280);
  font-size: 11px;
}

.hjk-cpa-metric strong { font-size: 12px; }
.hjk-cpa-metric span { color: #059669; font-weight: 600; }
.hjk-cpa-requests strong { color: #059669; }
.hjk-cpa-requests span { color: #dc2626; }
.hjk-cpa-time { min-width: 125px; }

.hjk-cpa-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 8px;
  border: 1px solid var(--semi-color-border, #e5e7eb);
  border-radius: 6px;
  white-space: nowrap;
}

.hjk-cpa-badge i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #94a3b8;
}

.hjk-cpa-badge-ok i { background: #10b981; }
.hjk-cpa-badge-warn i { background: #f59e0b; }
.hjk-cpa-badge-danger i { background: #ef4444; }
.hjk-cpa-badge-muted i { background: #64748b; }

.hjk-cpa-quota { min-width: 120px; }
.hjk-cpa-quota > div:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.hjk-cpa-quota > div:first-child strong {
  font-size: 11px;
  white-space: nowrap;
}
.hjk-cpa-quota span,
.hjk-cpa-quota small,
.hjk-cpa-quota-empty {
  color: var(--semi-color-text-2, #6b7280);
  font-size: 10px;
}
.hjk-cpa-quota-track,
.hjk-cpa-detail-track {
  height: 5px;
  margin: 5px 0;
  border-radius: 3px;
  background: var(--semi-color-fill-1, #e7ebea);
  overflow: hidden;
}
.hjk-cpa-quota-track i,
.hjk-cpa-detail-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #10b981;
}
.hjk-cpa-quota-warn i { background: #f59e0b; }
.hjk-cpa-quota-danger i { background: #ef4444; }

.hjk-cpa-empty {
  padding: 38px !important;
  color: var(--semi-color-text-2, #6b7280);
  text-align: center !important;
}

.hjk-cpa-footnote {
  padding: 8px 2px;
  color: var(--semi-color-text-2, #6b7280);
  font-size: 11px;
}

.hjk-cpa-drawer-open { overflow: hidden; }
.hjk-cpa-drawer {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
}
.hjk-cpa-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .46);
}
.hjk-cpa-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(1120px, calc(100vw - 40px));
  overflow: auto;
  border-left: 1px solid var(--semi-color-border, #e5e7eb);
  background: var(--semi-color-bg-2, #fff);
  color: var(--semi-color-text-0, #1c1f23);
  box-shadow: -18px 0 60px rgba(15, 23, 42, .18);
  font-family: Inter, ui-sans-serif, system-ui, "Microsoft YaHei", sans-serif;
}
.hjk-cpa-drawer-loading,
.hjk-cpa-drawer-error {
  padding: 80px 24px;
  color: var(--semi-color-text-2, #6b7280);
  text-align: center;
}
.hjk-cpa-drawer-head {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--semi-color-border, #e5e7eb);
  background: var(--semi-color-bg-2, #fff);
}
.hjk-cpa-drawer-head h2 { margin: 0; font-size: 17px; }
.hjk-cpa-drawer-head p { margin: 3px 0 0; color: var(--semi-color-text-2, #6b7280); font-size: 11px; }
.hjk-cpa-close {
  width: 34px;
  height: 34px;
  border: 1px solid var(--semi-color-border, #e5e7eb);
  border-radius: 6px;
  background: var(--semi-color-bg-2, #fff);
  color: var(--semi-color-text-0, #1c1f23);
  font-size: 22px;
  cursor: pointer;
}

.hjk-cpa-detail-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--semi-color-border, #e5e7eb);
  background: var(--semi-color-fill-0, #f7f8fa);
  overflow-x: auto;
}
.hjk-cpa-auto-notice {
  padding: 10px 18px;
  border-bottom: 1px solid color-mix(in srgb, #f59e0b 35%, transparent);
  background: color-mix(in srgb, #f59e0b 12%, transparent);
  color: var(--semi-color-text-1, #374151);
  font-size: 12px;
}
.hjk-cpa-detail-actions button {
  min-height: 30px;
  border: 1px solid var(--semi-color-border, #dfe3e8);
  border-radius: 6px;
  background: var(--semi-color-bg-2, #fff);
  color: var(--semi-color-text-0, #1c1f23);
  padding: 0 9px;
  font-size: 11px;
  white-space: nowrap;
  cursor: pointer;
}
.hjk-cpa-detail-actions label {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--semi-color-text-2, #6b7280);
  font-size: 11px;
  white-space: nowrap;
}
.hjk-cpa-detail-actions input {
  width: 62px;
  height: 30px;
  border: 1px solid var(--semi-color-border, #dfe3e8);
  border-radius: 6px;
  background: var(--semi-color-bg-2, #fff);
  color: inherit;
  padding: 0 6px;
}

.hjk-cpa-detail-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-bottom: 1px solid var(--semi-color-border, #e5e7eb);
}
.hjk-cpa-detail-summary .hjk-cpa-stat { border-radius: 0; }
.hjk-cpa-detail-quota-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--semi-color-border, #e5e7eb);
  background: var(--semi-color-fill-0, #f7f8fa);
}
.hjk-cpa-detail-quota {
  padding: 12px 18px;
  border-right: 1px solid var(--semi-color-border, #e5e7eb);
}
.hjk-cpa-detail-quota:last-child { border-right: 0; }
.hjk-cpa-detail-quota > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
}
.hjk-cpa-detail-quota span,
.hjk-cpa-detail-quota small { color: var(--semi-color-text-2, #6b7280); }

.hjk-cpa-detail-section {
  padding: 15px 18px;
  border-bottom: 1px solid var(--semi-color-border, #e5e7eb);
}
.hjk-cpa-detail-section h3 { margin: 0 0 11px; font-size: 13px; }
.hjk-cpa-detail-columns { display: grid; grid-template-columns: 1fr 1fr; }
.hjk-cpa-detail-columns > section:first-child { border-right: 1px solid var(--semi-color-border, #e5e7eb); }

.hjk-cpa-hourly {
  display: grid;
  grid-template-columns: repeat(24, minmax(15px, 1fr));
  align-items: end;
  gap: 4px;
  height: 150px;
  overflow-x: auto;
}
.hjk-cpa-hour { display: grid; grid-template-rows: 120px 22px; align-items: end; min-width: 15px; }
.hjk-cpa-hour i { display: block; min-height: 3px; border-radius: 3px 3px 0 0; background: #2563eb; }
.hjk-cpa-hour.unavailable i { opacity: 0; }
.hjk-cpa-hour span { padding-top: 4px; color: var(--semi-color-text-2, #6b7280); font-size: 8px; text-align: center; white-space: nowrap; }

.hjk-cpa-daily {
  display: grid;
  grid-template-columns: repeat(7, minmax(72px, 1fr));
  align-items: end;
  gap: 9px;
  height: 175px;
  overflow-x: auto;
}
.hjk-cpa-day { display: grid; grid-template-rows: 34px 112px 20px; min-width: 72px; }
.hjk-cpa-day > div { display: flex; flex-direction: column; justify-content: flex-end; text-align: center; }
.hjk-cpa-day strong { font-size: 10px; }
.hjk-cpa-day small,
.hjk-cpa-day > span { color: var(--semi-color-text-2, #6b7280); font-size: 9px; text-align: center; }
.hjk-cpa-day section { display: flex; align-items: end; justify-content: center; border-bottom: 1px solid var(--semi-color-border, #e5e7eb); }
.hjk-cpa-day section i { display: block; width: min(44px, 70%); min-height: 3px; border-radius: 3px 3px 0 0; background: #059669; }
.hjk-cpa-day.unavailable section { border-bottom-style: dashed; }
.hjk-cpa-day.unavailable section i { opacity: 0; }
.hjk-cpa-day > span { padding-top: 4px; }

.hjk-cpa-detail-table-scroll { overflow: auto; }
.hjk-cpa-detail-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.hjk-cpa-detail-table th,
.hjk-cpa-detail-table td { padding: 7px 8px; border-bottom: 1px solid var(--semi-color-border, #edf0f2); text-align: left; white-space: nowrap; }
.hjk-cpa-detail-table th { color: var(--semi-color-text-2, #6b7280); background: var(--semi-color-fill-0, #f7f8fa); }
.hjk-cpa-success { color: #059669; }
.hjk-cpa-failed { color: #dc2626; }

@media (max-width: 1200px) {
  .hjk-cpa-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hjk-cpa-stat:nth-child(3) { border-right: 0; }
  .hjk-cpa-stat:nth-child(-n+3) { border-bottom: 1px solid var(--semi-color-border, #e5e7eb); }
  .hjk-cpa-toolbar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .hjk-cpa-page { padding: 14px; }
  .hjk-cpa-page-head { align-items: flex-start; flex-direction: column; }
  .hjk-cpa-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hjk-cpa-stat { border-bottom: 1px solid var(--semi-color-border, #e5e7eb); }
  .hjk-cpa-stat:nth-child(2n) { border-right: 0; }
  .hjk-cpa-toolbar { grid-template-columns: 1fr; }
  .hjk-cpa-drawer-panel { width: 100vw; }
  .hjk-cpa-detail-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hjk-cpa-detail-quota-grid,
  .hjk-cpa-detail-columns { grid-template-columns: 1fr; }
  .hjk-cpa-detail-quota,
  .hjk-cpa-detail-columns > section:first-child { border-right: 0; }
  .hjk-cpa-detail-quota:first-child { border-bottom: 1px solid var(--semi-color-border, #e5e7eb); }
}