/* ⭐ Prémium AI-hang kártya (Felolvasó oldal, 2026-10-13) — a régi és az új konzol közös rétege.
   A színek a konzol saját változóiból jönnek (--panel, --line, --text, --muted); az új felületen az uj.css
   ezeket a borostyán palettára állítja, így itt nincs külön változat. Az app.js rajzolja (renderAiVoiceCard). */
.aiv-card { --aiv-amber: var(--uj-amber, #f7af21); --aiv-green: var(--uj-green, #5ada89);
  background: var(--panel); border: 1px solid color-mix(in srgb, var(--aiv-amber) 45%, var(--line)); border-radius: 12px;
  padding: 18px 20px; margin: 0 0 18px; color: var(--text); }
.aiv-head { display: flex; align-items: center; gap: 12px; }
.aiv-star { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--aiv-amber) 16%, transparent); color: var(--aiv-amber); font-size: 22px; }
.aiv-title b { font-size: 17px; }
.aiv-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.aiv-pill { font-size: 12px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.aiv-pill.ok { color: var(--aiv-green); border-color: color-mix(in srgb, var(--aiv-green) 45%, transparent); }
.aiv-pill.free { color: var(--aiv-amber); border-color: color-mix(in srgb, var(--aiv-amber) 45%, transparent); }
.aiv-lead { margin: 12px 0 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
.aiv-lead b { color: var(--text); }
.aiv-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-top: 16px; }
.aiv-stats > div { background: color-mix(in srgb, var(--text) 4%, transparent); border-radius: 8px; padding: 10px 12px; }
.aiv-stats small { display: block; font-size: 12px; color: var(--muted); }
.aiv-stats b { font-size: 22px; font-weight: 700; }
.aiv-stats span { margin-left: 4px; font-size: 12px; color: var(--muted); }
.aiv-chart { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 4px; height: 96px; margin-top: 14px; }
.aiv-bar { display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; min-width: 0; }
.aiv-bar span { display: block; background: var(--aiv-amber); border-radius: 3px 3px 0 0; opacity: 0.9; }
.aiv-bar small { height: 16px; margin-top: 4px; font-size: 11px; color: var(--muted); text-align: center; white-space: nowrap; overflow: visible; }
.aiv-empty { margin: 14px 0 0; font-size: 14px; color: var(--muted); }
.aiv-sub { margin: 20px 0 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.aiv-packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.aiv-pack { position: relative; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.aiv-pack.is-fit { border: 2px solid var(--aiv-amber); padding: 11px 13px; }
.aiv-fit { position: absolute; top: -10px; right: 10px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: var(--aiv-amber); color: #1a1205; }
.aiv-pack-name { font-size: 13px; color: var(--muted); }
.aiv-pack-price { font-size: 24px; font-weight: 700; margin: 2px 0; }
.aiv-pack-cr { font-size: 14px; }
.aiv-pack-est { font-size: 12px; color: var(--muted); }
.aiv-note { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.aiv-note i { color: var(--aiv-amber); margin-top: 2px; }
@media (max-width: 520px) { .aiv-card { padding: 14px; } .aiv-bar small { font-size: 0; } }
.aiv-balance { margin-top: 16px; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.aiv-bal-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 8px; }
.aiv-bal-top small { display: block; font-size: 12px; color: var(--muted); }
.aiv-bal-top b { font-size: 30px; font-weight: 700; color: var(--aiv-amber); }
.aiv-bal-top span { margin-left: 6px; font-size: 13px; color: var(--muted); }
.aiv-bal-est { font-size: 14px; color: var(--text); }
.aiv-meter { height: 8px; border-radius: 4px; margin-top: 10px; background: color-mix(in srgb, var(--text) 8%, transparent); overflow: hidden; }
.aiv-meter span { display: block; height: 100%; background: var(--aiv-amber); }
.aiv-balance.is-low .aiv-meter span, .aiv-balance.is-low .aiv-bal-top b { color: #f55043; background: #f55043; }
.aiv-balance.is-low .aiv-bal-top b { background: none; }
.aiv-bal-foot { margin-top: 6px; font-size: 12px; color: var(--muted); }
.aiv-low { margin: 8px 0 0; font-size: 13px; color: #f55043; }
.aiv-hist { list-style: none; margin: 10px 0 0; padding: 0; font-size: 13px; }
.aiv-hist li { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 8px; padding: 4px 0; border-top: 1px solid var(--line); }
.aiv-hist li span:first-child { color: var(--muted); }
.aiv-hist b.plus { color: var(--aiv-green); }
.aiv-pack-price small { font-size: 12px; font-weight: 400; color: var(--muted); }
.aiv-buy { margin-top: 10px; width: 100%; padding: 8px 12px; border-radius: 8px; border: 0; cursor: pointer; font: inherit; font-weight: 700;
  background: var(--aiv-amber); color: #1a1205; }
.aiv-buy:hover { filter: brightness(1.08); }
.aiv-custom { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 10px; border: 1px dashed var(--line); border-radius: 10px; padding: 12px 14px; }
.aiv-custom > div { flex: 1 1 240px; }
.aiv-custom small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.aiv-custom-in { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.aiv-custom-in input { width: 72px; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--line); background: transparent; color: var(--text); font: inherit; }
.aiv-custom-sum { font-size: 14px; font-weight: 600; }
.aiv-custom .aiv-buy { width: auto; margin-top: 0; }
.aiv-pay-msg { margin-top: 8px; font-size: 13px; min-height: 0; }
.aiv-pay-msg.ok { color: var(--aiv-green); }
.aiv-pay-msg.err { color: #f55043; }
/* ⭐ katalógus-hang a hangválasztóban: ▶ ingyenes minta (a szerver fájlból adja). */
.vp-item .vp-play { margin-inline-start: auto; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--line); color: var(--uj-amber, #f7af21); cursor: pointer; flex: none; }
.vp-item .vp-play:hover { background: color-mix(in srgb, var(--uj-amber, #f7af21) 16%, transparent); }

/* A kredit-fék (2026-10-19): nincs kredit → az alap hang olvas; a kártya kimondja és a feltöltéshez irányít. */
.aiv-pill.warn { color: #f55043; border-color: color-mix(in srgb, #f55043 45%, transparent); }
.aiv-blocked { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; font-size: 13px; line-height: 1.45; color: #f55043; background: color-mix(in srgb, #f55043 10%, transparent); border: 1px solid color-mix(in srgb, #f55043 35%, transparent); }