/* Quota dashboard layout; the shared theme continues to own colors and navigation. */
body { padding: 0; background: var(--bg); }

.wrap.quota-page {
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: 24px clamp(20px, 2.5vw, 48px) 64px;
  border: 0;
  border-radius: 0;
}

.quota-page .head { padding-bottom: 16px; }
.quota-page .section-title { margin: 24px 0 12px; }
.quota-page .overview-layout,
.quota-page .operations-layout,
.quota-page .history-grid { min-width: 0; }
.quota-page .overview-layout > *,
.quota-page .operations-layout > *,
.quota-page .history-grid > * { min-width: 0; }
.quota-page .quota-overview .section-title { margin-top: 0; }
.quota-page .grid { grid-template-columns: minmax(0, 1fr); }
.quota-page .summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 12px;
  margin-top: 16px;
}
.quota-page .card,
.quota-page .summary-card,
.quota-page .sampling-control,
.quota-page .traffic-card { border-radius: 8px; box-shadow: none; }
.quota-page .summary-card { padding: 16px 18px; }
.quota-page .score-value { font-size: 28px; }
.quota-page .line { flex-wrap: nowrap; }
.quota-page .track { flex: 1 1 120px; width: auto; max-width: 260px; min-width: 64px; }
.quota-page .metric-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.quota-page .metric-pill { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.quota-page .operations-layout { display: grid; gap: 16px; margin-top: 16px; }
.quota-page .sampling-control,
.quota-page .traffic-card { margin-top: 0; }
.quota-page .sampling-control-row > * { min-height: 44px; }
.quota-page .sampling-control-row input { flex: 1 1 150px; min-width: 0; }
.quota-page .history-grid { display: grid; gap: 16px; }
.quota-page .history-card { min-height: 430px; }
.quota-page .dual-history-card { margin-top: 0; }
.quota-page .chart-toolbar { justify-content: space-between; flex-wrap: wrap; }
.quota-page .chart-toolbar > div:first-child { min-width: 0; }
.quota-page .metric-tabs { margin-left: 0; }
.quota-page .cycle-tabs { max-width: 100%; margin-left: 0; padding: 4px 0; }
.quota-page .chart-scroll,
.quota-page .history-chart { height: 340px; }
.quota-page .traffic-group summary,
.quota-page .traffic-node-row { grid-template-columns: minmax(0, 1fr) repeat(3, minmax(90px, auto)); }
.quota-page .traffic-group summary span:first-child,
.quota-page .traffic-node-row span:first-child { min-width: 0; overflow-wrap: anywhere; }

@media (min-width: 1260px) {
  .quota-page .history-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1320px) {
  .quota-page .overview-layout { display: grid; grid-template-columns: minmax(440px, 0.85fr) minmax(0, 1.35fr); gap: 18px; align-items: stretch; }
  .quota-page .quota-overview { display: flex; flex-direction: column; }
  .quota-page #limit-grid { flex: 1; }
  .quota-page #limit-grid > .card { height: 100%; }
  .quota-page .summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); margin-top: 27px; }
  .quota-page .summary-grid > :first-child { grid-row: span 2; }
  .quota-page .sampling-control { display: flex; align-items: center; gap: 24px; }
  .quota-page .sampling-control-head { flex: 1 1 auto; justify-content: flex-start; gap: 24px; }
  .quota-page .sampling-control-row { flex: 0 1 auto; margin-top: 0; }
  .quota-page .sampling-control-row input { flex: 0 1 230px; }
}

@media (max-width: 759px) {
  .wrap.quota-page { padding: 16px max(14px, env(safe-area-inset-right)) 48px max(14px, env(safe-area-inset-left)); }
  .quota-page .monitor-toolbar { margin-bottom: 14px; }
  .quota-page .section-title { margin-top: 22px; }
  .quota-page .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quota-page .history-card { min-height: 0; padding: 14px; }
  .quota-page .chart-scroll,
  .quota-page .history-chart { height: 280px; }
  .quota-page .traffic-group summary,
  .quota-page .traffic-node-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 12px; }
  .quota-page .traffic-group summary span:first-child,
  .quota-page .traffic-node-row span:first-child { grid-column: 1 / -1; }
  .quota-page .traffic-group summary span:nth-child(4),
  .quota-page .traffic-node-row span:nth-child(4) { display: block; grid-column: 1 / -1; text-align: left; }
  .quota-page .traffic-node-row span:nth-child(2)::before { content: "上行 "; }
  .quota-page .traffic-node-row span:nth-child(3)::before { content: "下行 "; }
  .quota-page .traffic-group-nodes { padding-left: 10px; }
}

@media (max-width: 520px) {
  .quota-page .summary-grid { grid-template-columns: minmax(0, 1fr); }
  .quota-page .summary-card { padding: 14px 16px; }
  .quota-page .line { flex-wrap: wrap; }
  .quota-page .metric-row { grid-template-columns: minmax(0, 1fr); }
  .quota-page .sampling-control-row select,
  .quota-page .sampling-control-row input { flex: 1 1 100%; width: 100%; font-size: 16px; }
  .quota-page .sampling-control-row button { flex: 1 1 calc(50% - 4px); }
  .quota-page .chart-toolbar { display: block; }
  .quota-page .metric-tabs { margin-top: 12px; }
  .quota-page .plot-hint,
  .quota-page .axis-hint { flex-wrap: wrap; }
}