:root {
  --bg: var(--tg-theme-bg-color, #ffffff);
  --bg2: var(--tg-theme-secondary-bg-color, #f0f2f5);
  --text: var(--tg-theme-text-color, #111111);
  --hint: var(--tg-theme-hint-color, #8a8f98);
  --link: var(--tg-theme-link-color, #2a7ae2);
  --btn: var(--tg-theme-button-color, #2a7ae2);
  --btn-text: var(--tg-theme-button-text-color, #ffffff);
  --danger: var(--tg-theme-destructive-text-color, #e53935);
  --heat: 240, 110, 50;
  --plus: #2fae5f;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-scheme="light"]) {
    --bg: var(--tg-theme-bg-color, #17212b);
    --bg2: var(--tg-theme-secondary-bg-color, #0e1621);
    --text: var(--tg-theme-text-color, #e9edf1);
    --hint: var(--tg-theme-hint-color, #8b9aa8);
    --link: var(--tg-theme-link-color, #5ea1e0);
    --btn: var(--tg-theme-button-color, #2b5278);
  }
}
:root[data-scheme="dark"] { --plus: #5fd38d; }

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body { font: 15px/1.35 -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-tap-highlight-color: transparent; }
main { max-width: 520px; margin: 0 auto; padding: 12px 14px 32px; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:disabled { opacity: .3; cursor: default; }
.muted { color: var(--hint); font-size: 13px; }
.center { text-align: center; }
.top { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.seg { flex: 1; display: flex; background: var(--bg2); border-radius: 10px; padding: 3px; min-width: 0; }
.seg button { flex: 1; padding: 7px 4px; border-radius: 8px; color: var(--hint); font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seg .on { background: var(--btn); color: var(--btn-text); font-weight: 600; }
.btn { background: var(--btn); color: var(--btn-text); border-radius: 10px; padding: 8px 12px; font-size: 14px; white-space: nowrap; }
.link { color: var(--link); font-size: 14px; }
.danger { color: var(--danger); }
.invite { background: var(--bg2); border-radius: 10px; padding: 8px 10px; margin-bottom: 12px; }
.invite input { width: 100%; margin-top: 4px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--hint);
  background: var(--bg); color: var(--text); font-size: 13px; }
.month { display: flex; justify-content: space-between; align-items: center; margin: 2px 0 8px; }
.month b { font-size: 16px; }
.month button { font-size: 24px; line-height: 1; padding: 2px 12px; color: var(--link); }
.big { font-size: 30px; font-weight: 700; margin: 0 0 8px; }
.cat { display: flex; align-items: center; gap: 8px; margin: 7px 0; }
.cat .name { flex: 1; min-width: 0; }
.cat .name span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar { height: 6px; border-radius: 3px; background: var(--btn); margin-top: 3px; min-width: 2px; }
.cat b { white-space: nowrap; }
.more { margin: 2px 0 6px; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; margin-top: 10px; }
.cal .h { color: var(--hint); font-size: 11px; text-align: center; }
.d { background: var(--bg2); border-radius: 7px; padding: 4px 1px; text-align: center; min-height: 40px; overflow: hidden; }
.d b { display: block; font-size: 12px; }
.d span { display: block; font-size: 10px; color: var(--hint); white-space: nowrap; letter-spacing: -.2px; }
.d.l1 { background: rgba(var(--heat), .18); }
.d.l2 { background: rgba(var(--heat), .34); }
.d.l3 { background: rgba(var(--heat), .52); }
.d.l4 { background: rgba(var(--heat), .75); }
.d.l1 span, .d.l2 span, .d.l3 span, .d.l4 span { color: var(--text); }
.d.plus { background: rgba(47, 174, 95, .18); }
.d.plus span { color: var(--plus); font-weight: 600; }
.d.today { box-shadow: inset 0 0 0 1.5px var(--hint); }
.d.sel { box-shadow: inset 0 0 0 2px var(--link); }
.dayhead { margin: 14px 0 4px; }
.entry { border-bottom: 1px solid var(--bg2); padding: 8px 0; }
.entry > button { display: flex; width: 100%; gap: 8px; text-align: left; }
.entry .t { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.entry b { white-space: nowrap; }
.items { margin: 6px 0 0 22px; font-size: 13px; }
.items div { display: flex; gap: 8px; padding: 2px 0; }
.items div span:nth-child(2) { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.plus-text { color: var(--plus); }
.err { background: var(--bg2); border-radius: 10px; padding: 10px; margin: 10px 0; text-align: center; }
.err .btn { margin-top: 8px; }
.foot { margin-top: 24px; text-align: center; }