/* AI spend controls (#4122) — Docs banner + admin card. CSS variables only. */
.ai-spend-banner-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 10px 14px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--bg-card); color: var(--text-primary); font-size: 13px;
}
.ai-spend-banner-row.ai-spend-paused { border-left: 4px solid var(--color-amber); }
.ai-spend-banner-row.ai-spend-confirm { border-left: 4px solid var(--color-blue); }
.ai-spend-sub { color: var(--text-secondary); font-size: 12px; }
.ai-spend-mount { padding: 16px 24px 0; }
.ai-spend-card {
    border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card);
    padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; color: var(--text-primary);
}
.ai-spend-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ai-spend-head h3 { margin: 0; font-size: 15px; }
.ai-spend-stats { display: flex; gap: 24px; flex-wrap: wrap; }
.ai-spend-stats div { display: flex; flex-direction: column; gap: 2px; }
.ai-spend-stats span { color: var(--text-secondary); font-size: 12px; }
.ai-spend-stats strong { font-size: 16px; }
.ai-spend-toggle { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.ai-spend-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.ai-spend-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-secondary); }
.ai-spend-field input {
    padding: 6px 8px; border-radius: 6px; border: 1px solid var(--border);
    background: var(--input-bg); color: var(--text-primary); font-size: 13px;
}
.ai-spend-field small { color: var(--text-muted); }
.ai-spend-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }