/* AI credits window (public/js/credits.js): today and the reserve side by
   side, then three packs, the middle one marked. Same modal shell as the
   rest of the app. */
.credits-modal { max-width: 32rem; width: 100%; }
.credits-body { display: flex; flex-direction: column; gap: 1rem; padding-top: 0.25rem; }

.credits-out {
  display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 0.875rem 1rem; border-radius: 0.875rem;
  background: color-mix(in srgb, var(--amber) 12%, transparent);
  color: var(--text);
}
.credits-out-icon {
  flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  color: var(--amber); background: color-mix(in srgb, var(--amber) 18%, transparent);
}
.credits-out-title { font-size: 0.9375rem; font-weight: 650; line-height: 1.3; }
.credits-out-body { margin-top: 0.125rem; font-size: 0.8125rem; line-height: 1.45; color: var(--text-muted); }

.credits-now { display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem; }
.credits-tile {
  display: flex; flex-direction: column; gap: 0.375rem; min-width: 0;
  padding: 0.875rem 1rem; border-radius: 0.875rem; background: var(--surface2);
}
.credits-tile-label { font-size: 0.6875rem; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.credits-tile-value { font-size: 1.5rem; font-weight: 700; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; }
.credits-tile-value > span { margin-left: 0.25rem; font-size: 0.8125rem; font-weight: 500; color: var(--text-muted); }
.credits-tile-bar { height: 0.25rem; border-radius: 62.4375rem; overflow: hidden; background: color-mix(in srgb, var(--text) 10%, transparent); }
.credits-tile-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.credits-tile.is-low .credits-tile-bar > span { background: var(--amber); }
.credits-tile.is-empty .credits-tile-bar > span { background: var(--red); }
.credits-tile.is-empty .credits-tile-value { color: var(--red); }
.credits-tile-sub { font-size: 0.75rem; line-height: 1.35; color: var(--text-muted); }
.credits-tile.is-extra .credits-tile-value { color: var(--accent-dim); }

.credits-packs-title { margin-bottom: -0.375rem; font-size: 0.8125rem; font-weight: 650; color: var(--text); }
.credits-packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.625rem; }
.credits-pack {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.125rem; min-width: 0;
  padding: 1.125rem 0.5rem 0.875rem; border: 1px solid var(--border); border-radius: 1rem;
  background: var(--surface); color: var(--text); font: inherit; text-align: center; cursor: pointer;
  transition: border-color 0.15s ease, transform 0.12s ease, background 0.15s ease;
}
.credits-pack:hover:not([disabled]) { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.credits-pack:active:not([disabled]) { transform: scale(0.97); }
.credits-pack[disabled] { cursor: default; opacity: 0.55; }
.credits-pack.is-going { opacity: 1; border-color: var(--accent); }
.credits-pack.is-best { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.credits-pack-tag {
  position: absolute; top: -0.5625rem; left: 50%; transform: translateX(-50%);
  padding: 0.125rem 0.5rem; border-radius: 62.4375rem; white-space: nowrap;
  font-size: 0.625rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  color: #fff; background: var(--accent);
}
.credits-pack-amount { font-size: 1.25rem; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.credits-pack-unit { font-size: 0.75rem; color: var(--text-muted); }
.credits-pack-price {
  margin-top: 0.625rem; padding: 0.3125rem 0.75rem; border-radius: 62.4375rem;
  font-size: 0.8125rem; font-weight: 650; font-variant-numeric: tabular-nums;
  color: var(--accent-dim); background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.credits-pack.is-best .credits-pack-price { color: #fff; background: var(--accent); }

/* Any amount: a quantity with − and +, and its price on the buy button. */
.credits-custom { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.875rem 1rem; border-radius: 1rem; background: var(--surface2); }
.credits-custom-label { font-size: 0.8125rem; font-weight: 650; color: var(--text); }
.credits-custom-row { display: flex; align-items: center; gap: 0.625rem; }
.credits-custom-field {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.25rem; height: 2.75rem; padding: 0 0.25rem;
  border-radius: 0.75rem; background: var(--surface); border: 1px solid var(--border);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.credits-custom-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.credits-custom-field input {
  flex: 1; min-width: 0; width: 100%; border: 0; background: none; outline: none; padding: 0;
  font: inherit; font-size: 1.125rem; font-weight: 700; text-align: right; color: var(--text); font-variant-numeric: tabular-nums;
  -moz-appearance: textfield; appearance: textfield;
}
.credits-custom-field input::-webkit-outer-spin-button, .credits-custom-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.credits-custom-unit { font-size: 0.8125rem; color: var(--text-muted); margin-right: 0.25rem; }
.credits-custom-step {
  flex: none; display: grid; place-items: center; width: 2.125rem; height: 2.125rem; border: 0; border-radius: 0.5rem;
  background: none; color: var(--text-muted); cursor: pointer; transition: background 0.15s ease, color 0.15s ease;
}
.credits-custom-step:hover { background: var(--surface2); color: var(--text); }
.credits-custom-buy {
  flex: none; display: inline-flex; align-items: center; gap: 0.5rem; height: 2.75rem; padding: 0 1rem; border: 0; border-radius: 0.75rem;
  background: var(--accent); color: #fff; font: inherit; font-size: 0.875rem; font-weight: 650; cursor: pointer;
  transition: opacity 0.15s ease, transform 0.12s ease;
}
.credits-custom-buy:active:not([disabled]) { transform: scale(0.97); }
.credits-custom-buy[disabled] { opacity: 0.45; cursor: default; }
.credits-custom-price { font-variant-numeric: tabular-nums; opacity: 0.92; }
.credits-custom-price:not(:empty)::before { content: ''; margin-left: 0.625rem; }
.credits-custom-hint { font-size: 0.75rem; color: var(--text-muted); }
.credits-custom-hint:empty { display: none; }

.credits-note { margin: 0; font-size: 0.75rem; line-height: 1.5; color: var(--text-muted); }
.credits-err { font-size: 0.8125rem; color: var(--red); }
.credits-err:empty { display: none; }
.credits-plans {
  align-self: flex-start; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 0.8125rem; font-weight: 600; color: var(--accent-dim);
}
.credits-plans:hover { text-decoration: underline; }

/* Settings > AI credits: the way to the window. */
.settings-credits-buy { align-self: flex-start; margin-top: 0.25rem; }

@media (max-width: 480px) {
  .credits-packs { grid-template-columns: 1fr; gap: 0.75rem; }
  .credits-pack { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; column-gap: 0.375rem; padding: 0.875rem 1rem; text-align: left; }
  .credits-pack-price { order: 2; margin: 0 0 0 auto; }
  .credits-pack-tag { left: 1rem; transform: none; }
  .credits-custom-row { flex-direction: column; align-items: stretch; }
  .credits-custom-buy { justify-content: center; }
}