@layer components {
  a.quota-pool {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: 8px 16px;
    margin: 0 -16px;
    border-radius: var(--r-md);
    transition: background var(--transition-md);
  }
  a.quota-pool:hover {
    background: var(--ink-50);
  }
  /* 4px gap + the anchor's 8px top padding ≈ the original 14px between pools */
  .quota-pool + .quota-pool {
    margin-top: 4px;
  }
  .quota-pool-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-800);
  }
  .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: 16px; font-weight: 600; color: var(--ink-800); }
  .quota-max { font-size: 14px; color: var(--ink-400); }
  .quota-label { font-size: 13px; color: var(--ink-400); margin-top: 5px; }
}