/* Вкладка «Тарифы»: баланс, что входит в доступ, тарифы, пополнение, операции, приглашение друга.
   Когда тарифы выключены (billing.enabled = false), показываем карточку «Тарифы скоро» и приглашение. */

/* ── Баланс и доступ ─────────────────────────────────────────── */
.balance { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); }
.balance-sum { font: 600 var(--fs-balance)/1.1 var(--font-display); letter-spacing: -.03em; }
.balance-sum small { margin-left: 6px; color: var(--ink-3); font: 500 14px var(--font-ui); letter-spacing: 0; }
.balance-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.balance-note { color: var(--ink-2); font-size: 13px; line-height: 1.5; }
.plan-big { font: 600 20px var(--font-display); letter-spacing: -.02em; margin-top: var(--sp-1); }
.ent-list { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-2); }
.ent-item { display: flex; align-items: flex-start; gap: var(--sp-2); color: var(--ink-2); font-size: 13.5px; line-height: 1.45; }
.ent-item svg { flex: none; margin-top: 2px; color: var(--ok); }

/* ── Тарифы ──────────────────────────────────────────────────── */
.plans { display: flex; flex-direction: column; gap: var(--sp-3); }
.plan-card {
  display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4);
  border: 1px solid var(--line); border-radius: var(--r-card); background: var(--s1);
}
.plan-card.featured { border-color: var(--accent); }
.plan-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); }
.plan-name { font: 600 16px var(--font-ui); letter-spacing: -.01em; }
.plan-price { font: 600 20px var(--font-display); letter-spacing: -.02em; white-space: nowrap; }
.plan-days { margin-top: 2px; color: var(--ink-3); font-size: 12.5px; }
.plan-features { display: flex; flex-direction: column; gap: 6px; }
.plan-features .ent-item { font-size: 13px; }
.plan-actions { display: flex; gap: var(--sp-2); }
.plan-actions .btn { flex: 1; }

/* ── Пополнение ──────────────────────────────────────────────── */
.topup { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); }
.amounts { display: flex; flex-wrap: wrap; gap: 6px; }
.amount {
  min-height: var(--tap); padding: 0 var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-chip);
  background: var(--s2); color: var(--ink-2); font: 600 14px var(--font-ui); cursor: pointer;
  transition: border-color var(--t-press) linear, color var(--t-press) linear;
}
.amount.on { border-color: var(--accent); color: var(--accent-text); background: var(--accent-dim); }

/* ── Операции ────────────────────────────────────────────────── */
.ops { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.op { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); }
.op:last-child { border-bottom: 0; }
.op-ico { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; background: var(--s2); color: var(--ink-2); }
.op-ico.in { color: var(--ok); }
.op-ico.out { color: var(--ink-2); }
.op-main { flex: 1; min-width: 0; }
.op-title { font: 600 13.5px var(--font-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-date { color: var(--ink-3); font-size: 12px; }
.op-sum { font: 500 14px var(--font-mono); white-space: nowrap; }
.op-sum.plus { color: var(--ok); }

/* ── Приглашение друга ───────────────────────────────────────── */
.ref { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); }
.ref-code { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line-2); border-radius: var(--r-block); background: var(--s2); }
.ref-code b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font: 500 17px var(--font-mono); letter-spacing: .08em; }
.ref-link-text { letter-spacing: .02em !important; font-size: 14px !important; }
.ref-copy { flex: none; }
.ref-counters { display: flex; flex-wrap: wrap; gap: 6px; }
.ref-text { color: var(--ink-2); font-size: 13.5px; line-height: 1.5; }

/* ── Детали тарифа в листе ───────────────────────────────────── */
.price-line { display: flex; align-items: baseline; gap: 8px; }
.price-big { font: 600 26px var(--font-display); letter-spacing: -.02em; }
.price-note { color: var(--ink-3); font-size: 12.5px; }
.plan-mine { margin-left: 8px; vertical-align: 2px; color: var(--accent-text); border-color: var(--accent); }