/* balance.css — стили вкладки «Баланс API», специфика поверх styles.css */

/* Hero-блок остатка */
.hero { display: flex; align-items: stretch; gap: 18px; flex-wrap: wrap; }
.hero .big {
  flex: 1; min-width: 300px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: 24px 26px;
  display: flex; align-items: center; gap: 24px;
}
.hero .big.warn-edge { border-color: #e8cf93; box-shadow: inset 4px 0 0 var(--warn); }
.hero .big.danger-edge { border-color: #e8a8a4; box-shadow: inset 4px 0 0 var(--danger); }
.bal-num { font-size: 48px; font-weight: 720; letter-spacing: -.03em; line-height: 1; }
.bal-num.warn { color: var(--warn); }
.bal-num.danger { color: var(--danger); }
.bal-side { display: flex; flex-direction: column; gap: 9px; font-size: 13px; }
.bal-side .row { display: flex; align-items: center; gap: 8px; color: var(--text-2); }
.bal-side .row b { font-weight: 650; color: var(--text); font-variant-numeric: tabular-nums; }
.acts-col { display: flex; flex-direction: column; gap: 9px; justify-content: center; }

/* TG preview */
.tg-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-2); flex-wrap: wrap; }
.tg-prev {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 13px 15px;
  font-size: 12.5px; line-height: 1.55; color: var(--text-2);
  white-space: pre-wrap; font-family: ui-monospace, Menlo, Consolas, monospace;
  margin-top: 10px;
}

/* Timeline журнала (аналог billing.css .tline) */
.tline { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--border); }
.tline li { position: relative; padding: 0 0 15px 18px; font-size: 13px; }
.tline li:last-child { padding-bottom: 0; }
.tline li::before {
  content: ""; position: absolute; left: -7px; top: 3px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--surface);
}
.tline li.base::before { background: var(--success); }
.tline li.topup::before { background: var(--accent); }
.tline .when { color: var(--muted); font-size: 11.5px; margin-top: 1px; }
.tline .amt { font-weight: 650; font-variant-numeric: tabular-nums; }

/* Bar-разбивка */
.bar { display: flex; align-items: center; gap: 14px; padding: 8px 0; }
.bar .bl { width: 150px; font-size: 13px; font-weight: 550; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt { flex: 1; height: 7px; background: var(--surface-3); border-radius: 999px; overflow: hidden; }
.bf { height: 100%; border-radius: 999px; background: var(--accent); transition: width .3s; }
.bv { width: 96px; text-align: right; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.bv small { color: var(--muted); font-weight: 500; }

/* Seg-переключатель */
.seg { display: inline-flex; background: var(--surface-3); border-radius: var(--r-sm); padding: 3px; gap: 2px; }
.seg button { border: none; background: none; font-family: inherit; font-size: 12.5px; font-weight: 550; color: var(--muted); padding: 6px 14px; border-radius: 7px; cursor: pointer; }
.seg button.on { background: var(--surface); color: var(--text); box-shadow: var(--sh-sm); }

/* Chart legend */
.clegend { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 14px; font-size: 12.5px; color: var(--text-2); }
.clegend span { display: inline-flex; align-items: center; gap: 8px; font-weight: 550; }
.clegend i { width: 13px; height: 9px; border-radius: 2px; display: inline-block; flex-shrink: 0; }

/* Modal */
.modal-bg { position: fixed; inset: 0; background: rgba(10,12,18,.45); display: none; place-items: center; z-index: 50; }
.modal-bg.on { display: grid; }
.modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 22px; width: 340px; box-shadow: 0 18px 50px rgba(9,30,66,.28); }
.modal h3 { font-size: 15px; font-weight: 650; margin: 0 0 4px; }
.modal .sub { font-size: 12px; color: var(--muted); margin-bottom: 16px; }
.modal label { font-size: 12px; color: var(--text-2); display: block; margin-bottom: 6px; margin-top: 12px; }
.modal input { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-sm); font-size: 14px; background: var(--surface-2); color: var(--text); font-family: inherit; }
.modal .acts { display: flex; gap: 9px; justify-content: flex-end; margin-top: 18px; }