#xboox-read-quota-notice { position: fixed; inset: 0; z-index: 2147483001; }

.xb-read-quota-scrim {
  width: 100%; height: 100%; display: grid; place-items: center;
  padding: var(--xb-space-8);
  background: color-mix(in srgb, var(--xb-color-scrim) 55%, transparent);
}
.xb-read-quota-card {
  width: min(800px, 100%); max-height: min(90vh, 940px); overflow: auto;
  display: grid; gap: var(--xb-space-5); padding: var(--xb-space-10);
  border: 1px solid var(--xb-color-outline-variant);
  border-radius: var(--xb-shape-lg);
  background: var(--xb-color-surface-container-lowest);
  color: var(--xb-color-on-surface);
  box-shadow: var(--xb-elevation-3);
}
.xb-read-quota-card:focus { outline: none; }
.xb-read-quota-card { font-size: 12.5px; }
.xb-read-quota-card h2, .xb-read-quota-card h3, .xb-read-quota-card p { margin: 0; }
.xb-read-quota-card p { line-height: 1.5; }
.xb-read-quota-card h2 { font-size: 17px; font-weight: 650; }
.xb-read-quota-card h3 { font-size: 12.5px; font-weight: 650; }

.xb-quota-heading { display: flex; align-items: flex-start; gap: var(--xb-space-6); }
.xb-quota-heading-icon {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: var(--xb-shape-full); color: var(--xb-color-error);
  background: var(--xb-color-error-container);
}
.xb-quota-heading-icon svg { width: 22px; height: 22px; }
.xb-quota-heading-copy { flex: 1; min-width: 0; }
.xb-quota-heading p { margin-top: var(--xb-space-2); color: var(--xb-color-on-surface-variant); }
.xb-quota-close {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid var(--xb-color-outline); border-radius: var(--xb-shape-sm);
  background: var(--xb-color-surface-container-lowest); color: var(--xb-color-primary);
  cursor: pointer;
}
.xb-quota-close svg { width: 18px; height: 18px; }
.xb-quota-close:focus-visible { outline: 2px solid var(--xb-color-primary); outline-offset: 2px; }
.xb-quota-rule {
  color: var(--xb-color-on-surface-variant); font-size: 12px;
}
.xb-quota-metrics, .xb-quota-facts { display: grid; gap: var(--xb-space-5); }
.xb-quota-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.xb-quota-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.xb-quota-metrics > div, .xb-quota-facts > div {
  min-width: 0; padding: var(--xb-space-5);
  border: 1px solid var(--xb-color-outline-variant);
  border-radius: var(--xb-shape-sm);
  background: color-mix(in srgb, var(--xb-color-surface-container-lowest) 98%, var(--xb-color-on-surface) 2%);
}
.xb-quota-metrics span, .xb-quota-facts span, .xb-quota-facts small {
  display: block; color: var(--xb-color-on-surface-variant); font-size: var(--font-size-helper);
}
.xb-quota-metrics strong, .xb-quota-facts strong {
  display: block; margin-top: var(--xb-space-2);
  font-size: 13px; font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.xb-quota-facts strong { font-weight: 650; }
.xb-quota-metrics .xb-quota-error { color: var(--xb-color-error); }
.xb-quota-facts small { margin-top: var(--xb-space-2); }

.xb-quota-progress-head, .xb-quota-chart-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--xb-space-8);
}
.xb-quota-progress-head strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.xb-quota-progress {
  display: flex; height: 10px; margin-top: calc(-1 * var(--xb-space-3));
  border: 1px solid var(--xb-color-outline-variant); border-radius: 999px;
  background: var(--xb-color-surface-container-high); overflow: hidden;
}
.xb-quota-progress span { display: block; height: 100%; flex: none; }
.xb-quota-progress-base { background: color-mix(in srgb, var(--xb-color-on-surface) 26%, var(--xb-color-surface-container-lowest)); }
.xb-quota-progress-over { background: var(--xb-color-error); }

.xb-quota-chart {
  position: relative; padding: var(--xb-space-5);
  border: 1px solid var(--xb-color-outline-variant);
  border-radius: var(--xb-shape-sm);
  background: color-mix(in srgb, var(--xb-color-surface-container-lowest) 99%, var(--xb-color-on-surface) 1%);
}
.xb-quota-chart-head span, .xb-quota-legend {
  color: var(--xb-color-on-surface-variant); font-size: var(--font-size-helper);
}
.xb-quota-chart svg { display: block; width: 100%; height: auto; margin-top: var(--xb-space-2); }
.xb-quota-chart svg text { fill: var(--xb-chart-label); font-size: 11px; }
.xb-quota-chart .xb-quota-axis { stroke: var(--xb-chart-axis); }
.xb-quota-chart .xb-quota-limit { stroke: var(--xb-chart-axis); stroke-dasharray: 4 4; }
.xb-quota-chart .xb-quota-bar {
  fill: var(--xb-color-surface-container-lowest);
  stroke: color-mix(in srgb, var(--xb-color-on-surface) 35%, transparent);
  stroke-width: 1;
}
.xb-quota-chart .xb-quota-over { fill: var(--xb-color-error); stroke: var(--xb-color-error); stroke-width: 1; }
.xb-quota-hit { fill: transparent; stroke: none; }
.xb-quota-day { cursor: default; }
.xb-quota-day:focus-visible { outline: none; }
.xb-quota-day:focus-visible .xb-quota-bar { stroke: var(--xb-color-primary); stroke-width: 2; }
.xb-quota-tooltip {
  position: absolute; z-index: 1; max-width: 240px;
  padding: var(--xb-space-4) var(--xb-space-6);
  border: 1px solid var(--xb-color-outline-variant); border-radius: var(--xb-shape-sm);
  background: var(--xb-color-surface-container-lowest); box-shadow: var(--xb-elevation-2);
  color: var(--xb-color-on-surface); font-size: var(--font-size-helper); line-height: 1.4;
  pointer-events: none; white-space: nowrap;
}
.xb-quota-tooltip[hidden] { display: none; }
.xb-quota-legend { display: flex; gap: var(--xb-space-6); flex-wrap: wrap; padding-top: var(--xb-space-2); }
.xb-quota-legend span { display: inline-flex; align-items: center; gap: var(--xb-space-4); }
.xb-quota-legend span::before {
  content: ""; width: 10px; height: 10px; border: 1px solid var(--xb-color-outline);
  border-radius: 2px; background: var(--xb-color-surface-container-lowest);
}
.xb-quota-legend span:nth-child(2)::before { background: var(--xb-color-error); border-color: var(--xb-color-error); }

.xb-quota-summary { color: var(--xb-color-on-surface-variant); }
.xb-read-quota-feedback { color: var(--xb-color-error); }
.xb-read-quota-feedback:empty { display: none; }
.xb-read-quota-actions {
  display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap;
  gap: var(--xb-space-6);
}
.xb-read-quota-actions button, .xb-quota-help {
  height: var(--xb-button-height, 40px); min-height: var(--xb-button-height, 40px);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--xb-space-6);
  padding: 0 var(--xb-space-8); border: 1px solid var(--xb-color-outline);
  border-radius: var(--xb-shape-sm); background: var(--xb-color-surface-container-lowest);
  color: var(--xb-color-primary); font: inherit; font-size: var(--font-size-body);
  font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.xb-quota-help { margin-right: auto; }
.xb-quota-help svg { width: 16px; height: 16px; }
.xb-read-quota-actions [data-quota-grant] {
  background: var(--xb-color-primary); color: var(--xb-color-on-primary); border-color: var(--xb-color-primary);
}
.xb-read-quota-actions button:focus-visible, .xb-quota-help:focus-visible {
  outline: 2px solid var(--xb-color-primary); outline-offset: 2px;
}
.xb-read-quota-actions button:disabled {
  background: var(--xb-color-surface-container-low);
  color: var(--xb-color-on-surface-variant);
  border-color: var(--xb-color-outline-variant); cursor: not-allowed;
}
.xb-read-quota-actions [hidden] { display: none !important; }

@media (max-width: 600px) {
  .xb-read-quota-card { padding: var(--xb-space-8); gap: var(--xb-space-8); }
  .xb-quota-metrics, .xb-quota-facts { grid-template-columns: 1fr; }
  .xb-read-quota-actions > * { flex: 1 1 100%; }
}