/* ==================================================================
   KRON Admin · 商家后台（依赖 studio.css 的 shell / kpi / table）
   ================================================================== */

.chart-box { padding: 6px 4px 0; }
.cost-bars { display: flex; flex-direction: column; gap: 12px; }
.cb { display: grid; grid-template-columns: 58px 1fr 90px; align-items: center; gap: 10px; }
.cb-l { font-size: 11px; color: var(--mute); }
.cb-bar { height: 6px; background: rgba(255,255,255,.06); overflow: hidden; }
.cb-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan-dim), var(--cyan)); box-shadow: 0 0 10px rgba(45,226,255,.4); }
.cb-v { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); text-align: right; }
.legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 8px; font-size: 10.5px; color: var(--mute); }
.legend i { font-style: normal; margin-right: 5px; }

.rank-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.rank-row:last-child { border-bottom: 0; }
.rank-row .no { font-family: var(--font-mono); font-size: 11px; color: var(--mute-2); width: 20px; }
.rank-row .nm { font-size: 12.5px; flex: 1; }
.rank-row .sc { font-family: var(--font-mono); font-size: 11px; color: var(--warn); width: 42px; text-align: right; }
.rank-row .gm { font-family: var(--font-mono); font-size: 11.5px; color: var(--cyan); width: 84px; text-align: right; }

.donut-wrap { display: flex; align-items: center; gap: 18px; }
.donut-legend { display: flex; flex-direction: column; gap: 7px; flex: 1; }
.donut-legend .dl { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--mute); }
.donut-legend .dl i { width: 7px; height: 7px; flex: none; }
.donut-legend .dl b { margin-left: auto; font-family: var(--font-mono); color: var(--ink-2); font-weight: 500; }

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); }
.tabs button {
  border: 0; background: transparent; color: var(--mute);
  padding: 10px 16px; font-size: 12.5px; cursor: pointer; font-family: var(--font-body);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs button.active { color: var(--cyan); border-bottom-color: var(--cyan); }

.month-input { width: 150px; height: 36px; }

.stat-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.stat-strip .ss { background: #080d14; padding: 14px 16px; }
.stat-strip .ss .k { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .16em; color: var(--mute-2); }
.stat-strip .ss .v { font-family: var(--font-display); font-size: 21px; margin-top: 6px; }
.stat-strip .ss .v small { font-size: 10px; color: var(--mute); }

.form-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.form-grid .field label { font-size: 8.5px; }
.cfg-section { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 16px; }
.cfg-section:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.cfg-title { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .2em; color: var(--cyan); margin-bottom: 12px; }

.pay-preview { display: flex; gap: 8px; margin-top: 8px; }
.pay-preview .pp { flex: 1; border: 1px solid var(--line); padding: 8px; text-align: center; font-family: var(--font-mono); font-size: 10px; color: var(--mute); }

.user-row .tag { font-family: var(--font-mono); }

.audit-detail { max-width: 380px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.review-admin { border-bottom: 1px solid var(--line); padding: 14px 0; }
.review-admin:last-child { border-bottom: 0; }
.review-admin .ra-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.review-admin .ra-body { font-size: 12.5px; color: var(--ink-2); margin: 8px 0; line-height: 1.8; }
.review-admin .ra-reply { display: flex; gap: 8px; margin-top: 8px; }
.review-admin .ra-reply input { flex: 1; }

.empty-mini { padding: 22px; text-align: center; color: var(--mute-2); font-size: 11.5px; }

@media (max-width: 1200px) {
  .stat-strip { grid-template-columns: repeat(3, 1fr); }
  .form-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .donut-wrap { flex-direction: column; }
}