@layer components {
  .quota-bar {
    background: var(--ink-100);
    border-radius: var(--r-full);
    height: 6px;
    overflow: hidden;
  }
  .quota-fill {
    height: 100%;
    border-radius: var(--r-full);
    background: var(--forest-500);
    transition: width var(--transition-md);
  }
  .quota-fill.warning { background: var(--amber-500); }
  .quota-fill.full { background: var(--success-500); }
  .quota-text {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
  }
  .quota-count { font-size: 15px; font-weight: 600; color: var(--ink-800); }
  .quota-max { font-size: 13px; color: var(--ink-400); }
  .quota-label { font-size: 12px; color: var(--ink-400); margin-top: 5px; }
}