:root {
  --bg: var(--tg-theme-bg-color, #ffffff);
  --fg: var(--tg-theme-text-color, #111111);
  --hint: var(--tg-theme-hint-color, #6b7280);
  --card: var(--tg-theme-secondary-bg-color, #f1f2f5);
  --accent: var(--tg-theme-button-color, #2481cc);
  --accent-fg: var(--tg-theme-button-text-color, #ffffff);
  --pos: #15803d; --pos-bg: #dcf5e4;
  --neg: #c62828; --neg-bg: #fde3e1;
  --warn: #a16207; --warn-bg: #fdf0c8;
  --line: rgba(127, 127, 127, .25);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-scheme="light"]) { --pos: #4ade80; --pos-bg: #153d27; --neg: #ff7b72; --neg-bg: #4a1f1f; --warn: #facc15; --warn-bg: #4a3a10; }
  :root:not([data-scheme]) { --bg: var(--tg-theme-bg-color, #17212b); --fg: var(--tg-theme-text-color, #f5f5f5); --hint: var(--tg-theme-hint-color, #8b98a5); --card: var(--tg-theme-secondary-bg-color, #232e3c); }
}
:root[data-scheme="dark"] { --pos: #4ade80; --pos-bg: #153d27; --neg: #ff7b72; --neg-bg: #4a1f1f; --warn: #facc15; --warn-bg: #4a3a10; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 16px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding-bottom: calc(112px + env(safe-area-inset-bottom));
  overflow-x: hidden;
}
main { padding: 0 16px; max-width: 640px; margin: 0 auto; }
h1 { font-size: 24px; margin: 16px 0 2px; }
.g-sub, .g-upd, .g-label, .g-count, .g-legend, .g-kind, .g-pct, .g-reserve > span, .g-row > span, .g-dll { color: var(--hint); font-size: 14px; }
.g-upd { margin-bottom: 8px; }
.g-stale { color: var(--warn); background: var(--warn-bg); border-radius: 8px; padding: 1px 8px; margin-left: 4px; }
.g-note { font-size: 14px; color: var(--warn); }
.g-label { margin: 16px 0 6px; text-transform: none; }
.g-banner { position: sticky; top: 0; z-index: 5; background: var(--warn-bg); color: var(--warn); text-align: center; padding: 8px 16px; font-size: 14px; font-weight: 600; }
.g-fatal, .g-empty { text-align: center; color: var(--hint); padding: 96px 24px; font-size: 18px; }
.g-fatal { color: var(--fg); font-weight: 600; }

.g-money { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.g-pos { color: var(--pos); } .g-neg { color: var(--neg); }
.g-approx { opacity: .85; }
.g-mark { color: var(--hint); font-size: 14px; }

.g-totalbox { background: var(--card); border-radius: 18px; padding: 16px; text-align: center; margin: 8px 0 12px; }
.g-totalbox.g-pos { background: var(--pos-bg); } .g-totalbox.g-neg { background: var(--neg-bg); }
.g-totalbox .g-label { margin: 0; }
.g-total { font-size: 40px; line-height: 1.15; margin: 4px 0; }
.g-total .g-money { font-weight: 800; }

.g-cards { display: grid; gap: 12px; }
.g-card { background: var(--card); border-radius: 16px; padding: 14px 16px; cursor: pointer; }
.g-card:active { filter: brightness(.96); }
.g-card-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.g-mask { font-size: 17px; }
.g-today { font-size: 26px; margin: 4px 0 6px; }
.g-reserve, .g-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; }
.g-row { justify-content: space-between; }
.g-dll { margin-top: 8px; }
.g-dll span { color: var(--fg); }
.g-bar { height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; margin: 6px 0 2px; }
.g-bar i { display: block; height: 100%; border-radius: 4px; background: var(--pos); }
.g-bar.g-warn i { background: var(--warn); } .g-bar.g-breach i { background: var(--neg); } .g-bar.g-unknown i { background: var(--hint); }
.g-tag { display: inline-block; font-size: 14px; line-height: 20px; padding: 1px 10px; border-radius: 999px; background: var(--line); color: var(--fg); white-space: nowrap; }
.g-tag-ok { background: var(--pos-bg); color: var(--pos); }
.g-tag-warn { background: var(--warn-bg); color: var(--warn); }
.g-tag-breach { background: var(--neg-bg); color: var(--neg); }
.g-tag-pos { background: var(--accent); color: var(--accent-fg); margin-left: auto; }
.g-tag-none { color: var(--hint); }

.g-day { background: var(--card); border-radius: 14px; margin: 8px 0; }
.g-day-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; font-size: 16px; cursor: pointer; }
.g-since .g-day-row { cursor: default; }
.g-since .g-count { padding: 0 16px 12px; }
.g-cells, .g-rules, .g-days-list { list-style: none; margin: 0; padding: 0; }
.g-cells li { display: flex; justify-content: space-between; padding: 8px 16px; border-top: 1px solid var(--line); font-size: 15px; }
.g-days-list .g-day { display: flex; justify-content: space-between; padding: 12px 16px; }
.g-rules { background: var(--card); border-radius: 14px; }
.g-rule { display: grid; grid-template-columns: 20px 1fr auto; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 15px; }
.g-rule:first-child { border-top: 0; }
.g-live { background: var(--card); border-radius: 16px; padding: 14px 16px; margin-top: 8px; display: grid; gap: 4px; }
.g-live .g-label { margin: 0; }
.g-legend { margin: 12px 0; text-align: center; }

.g-bar-wrap { position: fixed; left: 0; right: 0; bottom: 0; background: var(--bg); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); z-index: 10; }
.g-sticky-total { text-align: center; padding: 8px 16px 2px; font-size: 15px; color: var(--hint); }
.g-sticky-total .g-money { font-size: 17px; }
.g-tabs { display: flex; }
.g-tabs button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0 8px; background: none; border: 0; color: var(--hint); font: inherit; font-size: 14px; cursor: pointer; }
.g-tabs button[aria-selected="true"] { color: var(--accent); font-weight: 600; }