/* 额度查询页 · 页面骨架/查询卡/表格/切换/今日用量条（由 quota.css 拆分，按 page → flow → packages 顺序引入） */
body.quota-page {
  display: block;
  min-height: 100vh;
  padding: 40px 20px 64px;
  background: #f5f7fa;
}

.quota-shell {
  width: min(1240px, 100%);
  margin: 0 auto;
}

.quota-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 22px;
}

.quota-logo img {
  width: 141px;
  height: 24px;
}

.quota-card {
  width: min(560px, 100%);
  margin: 0 auto 20px;
  padding: 30px 34px;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(15, 20, 30, .04);
}

.quota-card h1 {
  margin: 0 0 6px;
  font-size: 22px;
}

.quota-card > p {
  margin: 0 0 18px;
  color: #8a919f;
  font-size: 13px;
}

.quota-form input {
  width: 100%;
  min-height: 44px;
  margin-bottom: 12px;
  padding: 10px 14px;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 14px;
}

.quota-form input:focus {
  outline: 2px solid rgba(43, 109, 232, .25);
  border-color: var(--brand-blue);
}

.quota-form button {
  width: 100%;
  min-height: 44px;
  padding: 10px;
  border: 0;
  border-radius: 6px;
  color: #fff;
  background: #1684fc;
  cursor: pointer;
  font-size: 14px;
  transition: background .15s ease;
}

.quota-form button:hover { background: #0d72e8; }
.quota-form button:disabled { cursor: wait; opacity: .7; }

.quota-error {
  margin-bottom: 10px;
  color: #e5484d;
  font-size: 13px;
}

.quota-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  width: min(1240px, 100%);
  margin: 0 auto 16px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 220px;
  padding: 12px 16px;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  font-size: 13px;
}

.meta-label {
  color: #8a919f;
  white-space: nowrap;
}

.meta-item b { color: #1f2329; }
.good { color: #1a7f37 !important; }
.bad { color: #e5484d !important; }

.quota-result {
  width: 100%;
  overflow: hidden;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(15, 20, 30, .05);
}

.quota-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.quota-table {
  width: 100%;
  min-width: 1020px;
  border-collapse: collapse;
  font-size: 13px;
}

.quota-table th,
.quota-table td {
  padding: 11px 14px;
  border: 1px solid #e4e7ec;
  text-align: left;
  vertical-align: middle;
  line-height: 1.55;
}

.quota-table thead th {
  position: sticky;
  top: 0;
  color: #303746;
  background: #f7f8fb;
  font-weight: 700;
  white-space: nowrap;
}

/* 整行高亮：row-hover 标记鼠标所在行；group-hover 让同组首行的跨行单元格（服务组/月配额）同步高亮 */
.quota-table tbody tr.row-hover td { background: #f7fbff; }
.quota-table tbody tr.group-hover .rowspan-cell { background: #f7fbff; }
.quota-table .quota-number { text-align: right; white-space: nowrap; }
.quota-table .service-name { text-align: center; }
.quota-table .service-group {
  min-width: 130px;
  color: #303746;
  background: #fafbfd;
  font-weight: 600;
  vertical-align: middle;
  text-align: center;
}

.shared-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 10px;
  color: #5b7da1;
  background: #e8f1fb;
  font-size: 11px;
  font-weight: 400;
  vertical-align: 1px;
}

.global-toast {
  position: fixed;
  left: 50%;
  bottom: 48px;
  z-index: 60;
  max-width: min(520px, calc(100vw - 32px));
  padding: 12px 18px;
  border-radius: 10px;
  color: #fff;
  background: rgba(31, 35, 41, .95);
  box-shadow: 0 8px 28px rgba(15, 20, 30, .3);
  font-size: 13px;
  line-height: 1.7;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, 0);
  transition: opacity .2s ease;
}

.global-toast.show {
  opacity: 1;
}
.quota-table .service-name { font-weight: 500; }

/* 表格已可横向滚动：服务/状态/服务组整词单行、按内容宽度显示，窄屏不再把文字挤扁换行 */
.quota-table .service-name,
.quota-table .service-group,
.quota-table .service-status { white-space: nowrap; }

/* 服务类型切换（基础服务 / 高级服务） */
.quota-viewbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid #e4e7ec;
  background: #fbfcfe;
}

.quota-viewbar label {
  color: #667085;
  font-size: 13px;
}

/* 统计更新时间（准实时说明在 help 提示里）：靠左，服务类型切换保持靠右 */
.quota-asof {
  display: inline-flex;
  align-items: center;
  margin-right: auto;
  color: #98a2b3;
  font-size: 12px;
}

.quota-kind {
  padding: 6px 10px;
  border: 1px solid #e3e6ea;
  border-radius: 8px;
  color: #303746;
  background: #fff;
  font-size: 13px;
  cursor: pointer;
}

.quota-kind:focus {
  outline: 2px solid rgba(43, 109, 232, .25);
  border-color: var(--brand-blue);
}

.quota-result .empty {
  padding: 44px 0;
  color: #8a919f;
  text-align: center;
}

/* 高级服务「今日调用量」：用量条 + 已用百分比（仿高德控制台） */
.quota-table .percent-td {
  min-width: 200px;
}

.day-usage {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 170px;
}

.day-usage-bar {
  width: 100%;
  height: 6px;
  border-radius: 4px;
  background: #edf0f3;
  overflow: hidden;
}

.day-usage-bar i {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: #29be7e;
  transition: width .3s ease;
}

.day-usage-bar i.full { background: #f5a623; }

.day-usage-text {
  color: #667085;
  font-size: 12px;
  white-space: nowrap;
}

.day-usage-text em {
  color: #29be7e;
  font-style: normal;
  font-weight: 600;
}

.day-usage-text em.warn { color: #f5a623; }

.usage-bar {
  width: 140px;
  height: 6px;
  margin-left: auto;
  border-radius: 4px;
  background: #edf0f3;
  overflow: hidden;
}

.usage-fill {
  height: 100%;
  border-radius: 4px;
  background: #35a865;
  transition: width .3s ease;
}

.usage-fill.warn { background: #f5a623; }
.usage-fill.danger { background: #e5484d; }

.usage-line {
  margin-top: 4px;
  color: #667085;
  font-size: 12px;
}

.usage-used { color: #1f2329; font-weight: 600; }
.usage-percent { color: #98a2b3; }
.quota-unlimited { color: #1a7f37; font-weight: 600; }

.quota-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 5px;
  padding: 0;
  border: 1px solid #9db6d3;
  border-radius: 50%;
  color: #5b7da1;
  background: transparent;
  cursor: help;
  font-size: 11px;
  vertical-align: 1px;
}

.service-status {
  display: inline-block;
  min-width: 52px;
  padding: 2px 9px;
  border-radius: 12px;
  color: #345;
  background: #eef2f6;
  text-align: center;
  font-size: 12px;
}

.service-status.good { color: #1a7f37 !important; background: #e6f6ee; }
.service-status.warn { color: #b25e09 !important; background: #fdf1df; }
.service-status.bad { color: #e5484d !important; background: #fbe9e9; }
.service-status.muted { color: #667085 !important; background: #f0f2f5; }

/* 服务 QPS 被激活码/管理端提升时的小标（悬停显示默认上限） */
.quota-table .qps-up {
  display: inline-block;
  margin-left: 5px;
  padding: 0 5px;
  border-radius: 999px;
  color: #157347;
  background: #e6f6ee;
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
  line-height: 15px;
  vertical-align: 1px;
  white-space: nowrap;
}