:root {
  --bg: var(--tg-theme-bg-color, #fff);
  --bg2: var(--tg-theme-secondary-bg-color, #f2f2f7);
  --text: var(--tg-theme-text-color, #111);
  --hint: var(--tg-theme-hint-color, #8e8e93);
  --link: var(--tg-theme-link-color, #2481cc);
  --btn: var(--tg-theme-button-color, #2481cc);
  --btn-text: var(--tg-theme-button-text-color, #fff);
  --ok: #34c759; --warn: #ff9f0a; --bad: #ff453a;
  --r: 14px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg2); color: var(--text);
  font: 15px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
body { padding-bottom: 32px; }
button, input, select, textarea { font: inherit; color: inherit; }
.tabs { position: sticky; top: 0; z-index: 5; display: flex; gap: 4px; padding: 8px 12px; background: var(--bg2); }
.tabs button { flex: 1; border: 0; padding: 8px; border-radius: 10px; background: transparent; color: var(--hint); font-weight: 600; }
.tabs button.active { background: var(--bg); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
main { padding: 4px 12px; max-width: 720px; margin: 0 auto; }
.loading, .empty { text-align: center; color: var(--hint); padding: 32px 0; }
.card { background: var(--bg); border-radius: var(--r); padding: 14px 16px; margin: 10px 0; }
.card h2 { margin: 0 0 8px; font-size: 17px; }
.card h3 { margin: 0 0 6px; font-size: 15px; color: var(--hint); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.hero { text-align: center; padding: 20px 16px; }
.hero .big { font-size: 34px; font-weight: 700; margin: 4px 0; }
.hero .sub { color: var(--hint); }
.ok { color: var(--ok); } .bad { color: var(--bad); } .warn { color: var(--warn); } .hint { color: var(--hint); font-size: 13px; }
.months { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; justify-content: center; }
.chip { padding: 4px 10px; border-radius: 999px; font-size: 13px; background: var(--bg2); }
.chip.paid { background: color-mix(in srgb, var(--ok) 18%, transparent); }
.chip.partial { background: color-mix(in srgb, var(--warn) 22%, transparent); }
.chip.unpaid { background: color-mix(in srgb, var(--bad) 18%, transparent); }
.row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--bg2); }
.row:first-of-type { border-top: 0; }
.row .grow { flex: 1; min-width: 0; }
.btn { display: block; width: 100%; border: 0; border-radius: 12px; padding: 12px; background: var(--btn); color: var(--btn-text); font-weight: 600; margin-top: 8px; }
.btn.secondary { background: var(--bg2); color: var(--link); }
.btn.small { display: inline-block; width: auto; padding: 6px 12px; margin: 0; font-size: 14px; }
.btn.danger { background: color-mix(in srgb, var(--bad) 15%, transparent); color: var(--bad); }
.btns { display: flex; gap: 8px; } .btns .btn { flex: 1; }
.copy { cursor: pointer; border-bottom: 1px dashed var(--hint); }
label { display: block; margin: 10px 0 4px; color: var(--hint); font-size: 13px; }
input, select, textarea { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid transparent; background: var(--bg2); outline: none; }
input:focus, textarea:focus { border-color: var(--btn); }
.quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.quick button { border: 0; padding: 6px 12px; border-radius: 999px; background: var(--bg2); }
.quick button.on { background: var(--btn); color: var(--btn-text); }
.scheme { width: 100%; border-radius: 10px; margin-top: 8px; }
.grid-wrap { overflow-x: auto; margin: 0 -16px; padding: 0 16px; }
table.grid { border-collapse: collapse; font-size: 13px; min-width: 100%; }
.grid th, .grid td { padding: 6px 4px; text-align: center; white-space: nowrap; }
.grid th:first-child, .grid td:first-child { text-align: left; position: sticky; left: 0; background: var(--bg); padding-right: 10px; }
.dot { display: inline-block; width: 18px; height: 18px; border-radius: 6px; background: var(--bg2); }
.dot.paid { background: var(--ok); } .dot.partial { background: var(--warn); } .dot.unpaid { background: var(--bad); }
.dot.future { background: var(--bg2); }
.bar { height: 10px; border-radius: 6px; background: var(--bg2); overflow: hidden; margin: 8px 0 4px; }
.bar > div { height: 100%; background: var(--ok); }
.badge { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--bg2); color: var(--hint); }
.sheet { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 20; display: flex; align-items: flex-end; }
.sheet-body { width: 100%; max-height: 90vh; overflow: auto; background: var(--bg); border-radius: 18px 18px 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); }
.sheet-body h2 { margin: 0 0 6px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: rgba(0,0,0,.82); color: #fff; padding: 10px 16px; border-radius: 12px; z-index: 30; max-width: 90vw; }