feat(quota): refine quota actions and usage metrics layout

src/components/AuthFileQuotaPanel.css

@@ -97,15 +97,46 @@
   min-width: 0;
   padding: 2px 5px;
   overflow: hidden;
-  border: 1px solid var(--border-color);
-  border-radius: 4px;
-  background: var(--bg-secondary);
+  padding: 2px 7px;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
   font-size: 10px;
   font-weight: 550;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+/* Dense quota cells follow the compact overview treatment: quiet labels and a
+   single visual weight for the remaining amount. */
+.credential-quota-dense .credential-quota-label span {
+  border-radius: 5px;
+  background: color-mix(in srgb, var(--text-tertiary) 8%, var(--bg-card));
+  color: var(--text-secondary);
+  font-weight: 600;
+}
+.credential-quota-dense .credential-quota-track {
+  height: 6px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--text-tertiary) 10%, var(--bg-card));
+}
+.credential-quota-dense .credential-quota-track i {
+  border-radius: inherit;
+  background: var(--quota-color, var(--success-color));
+}
+.credential-quota-dense .credential-quota-row.high { --quota-color: #20bf62; }
+.credential-quota-dense .credential-quota-row.medium { --quota-color: #e6a523; }
+.credential-quota-dense .credential-quota-row.low { --quota-color: #e25555; }
+.credential-quota-dense .credential-quota-row small {
+  color: var(--text-tertiary);
+  font-variant-numeric: tabular-nums;
+}
+.credential-quota-dense .credential-quota-empty {
+  margin: 0;
+  color: var(--text-tertiary);
+  font-size: 11px;
+}
+
 .credential-quota-dense .credential-quota-label strong {
   font-size: 12px;
   line-height: 1;

src/components/AuthFileUsageSummary.css

@@ -9,7 +9,8 @@
 .auth-file-usage-metrics {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 6px 10px;
+  gap: 8px 12px;
+  align-items: center;
 }
 
 .auth-file-usage-metric {
@@ -22,8 +23,8 @@
 .auth-file-usage-metric svg {
   box-sizing: content-box;
   flex-shrink: 0;
-  padding: 2px;
-  border-radius: 4px;
+  padding: 3px;
+  border-radius: 5px;
   color: var(--primary-color);
   background: color-mix(in srgb, var(--primary-color) 10%, transparent);
 }
@@ -34,6 +35,11 @@
   background: color-mix(in srgb, var(--success-color) 10%, transparent);
 }
 
+.auth-file-usage-metric.rate svg {
+  color: #8b5cf6;
+  background: color-mix(in srgb, #8b5cf6 10%, transparent);
+}
+
 .auth-file-usage-metric.failure svg {
   color: var(--failure-badge-text);
   background: color-mix(in srgb, var(--failure-badge-text) 10%, transparent);
@@ -48,10 +54,7 @@
 }
 
 .auth-file-usage-scope {
-  display: block;
-  margin-top: 5px;
-  color: var(--text-tertiary);
-  font-size: var(--font-size-meta);
+  display: none;
 }
 
 @container auth-file-usage (max-width: 130px) {

src/components/AuthFileUsageSummary.tsx

@@ -1,4 +1,4 @@
-import { Activity, Check, Send, X } from 'lucide-react';
+import { Check, Percent, Send, X } from 'lucide-react';
 import { useI18n } from '../i18n';
 import { authFileRequestStats } from '../services/authFileRequests';
 import { formatUsageNumber } from '../services/usageNumber';
@@ -16,7 +16,7 @@ export function AuthFileUsageSummary({ file }: { file: Record<string, unknown> }
   const rateText = rate === null ? '—' : formatNumber(rate, { style: 'percent', maximumFractionDigits: 1 });
   const metrics = [
     { key: 'total', Icon: Send, value: countText(total), label: `${t('usage.stat.requests')}: ${exactCount(total)}` },
-    { key: 'rate', Icon: Activity, value: rateText, label: t('authFiles.requests.rate', { rate: rateText }) },
+    { key: 'rate', Icon: Percent, value: rateText, label: t('authFiles.requests.rate', { rate: rateText }) },
     { key: 'success', Icon: Check, value: countText(success), label: t('authFiles.requests.success', { count: exactCount(success) }) },
     { key: 'failure', Icon: X, value: countText(failure), label: t('authFiles.requests.failure', { count: exactCount(failure) }) },
   ];
@@ -31,9 +31,6 @@ export function AuthFileUsageSummary({ file }: { file: Record<string, unknown> }
           </span>
         ))}
       </div>
-      <span className="auth-file-usage-scope" title={t('authFiles.requests.totalsHint')}>
-        {t('authFiles.usage.runtimeTotals')}
-      </span>
     </div>
   );
 }