:root {
  --bg: #f4f5f7; --card: #ffffff; --ink: #14181f; --muted: #5b6573; --line: #dfe3e9;
  --accent: #2459d8; --accent-ink: #ffffff; --bar: #2459d8; --bar2: #8aa7ee; --bar3: #c5d3f6; --warn-bg: #fff4d6; --warn-ink: #5c4300;
  --radius: 12px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1218; --card: #181d26; --ink: #eef1f6; --muted: #9aa5b5; --line: #2a3140;
    --accent: #6c93f5; --accent-ink: #0b0f16; --bar: #6c93f5; --bar2: #4568b8; --bar3: #2d4272; --warn-bg: #3a2f10; --warn-ink: #f2d98a;
  }
}
:root[data-theme="dark"] {
  --bg: #0f1218; --card: #181d26; --ink: #eef1f6; --muted: #9aa5b5; --line: #2a3140;
  --accent: #6c93f5; --accent-ink: #0b0f16; --bar: #6c93f5; --bar2: #4568b8; --bar3: #2d4272; --warn-bg: #3a2f10; --warn-ink: #f2d98a;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); overflow-x: hidden;
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
main { max-width: 1100px; margin: 0 auto; padding: 16px; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
h1 { font-size: 1.5rem; margin: 0; }
h2 { font-size: 1rem; margin: 0 0 10px; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
button, .btn { font: inherit; min-height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
button[aria-pressed="true"], .btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
button:focus-visible, a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.banner { background: var(--warn-bg); color: var(--warn-ink); padding: 10px 12px; border-radius: var(--radius); margin-bottom: 12px; font-size: .9rem; }
.note { color: var(--muted); font-size: .88rem; margin: 0 0 12px; overflow-wrap: anywhere; }
.grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); margin-bottom: 12px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; min-width: 0; }
.totals { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr)); margin-bottom: 12px; }
.total { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; min-width: 0; }
.total b { display: block; font-size: 1.5rem; line-height: 1.15; }
.total span { color: var(--muted); font-size: .85rem; }
.days { display: flex; align-items: flex-end; gap: 2px; height: 96px; }
.days i { flex: 1 1 0; min-width: 0; background: var(--bar); border-radius: 2px 2px 0 0; display: block; }
.axis { display: flex; justify-content: space-between; color: var(--muted); font-size: .8rem; margin-top: 4px; }
ul.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
ul.bars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; font-size: .92rem; }
ul.bars li .k { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
ul.bars li .n { color: var(--muted); font-variant-numeric: tabular-nums; }
ul.bars li .track { grid-column: 1 / -1; height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; display: flex; }
ul.bars li .track i { display: block; height: 100%; background: var(--bar); }
ul.bars li .track i.b2 { background: var(--bar2); }
ul.bars li .track i.b3 { background: var(--bar3); }
.legend { display: flex; gap: 12px; font-size: .8rem; color: var(--muted); margin-bottom: 8px; flex-wrap: wrap; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; background: var(--bar); }
.legend i.b2 { background: var(--bar2); } .legend i.b3 { background: var(--bar3); }
.empty { color: var(--muted); font-size: .92rem; margin: 0; }
ol.recent { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
ol.recent li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px; font-size: .9rem; padding: 6px 0; border-top: 1px solid var(--line); }
ol.recent li:first-child { border-top: 0; }
ol.recent .what { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
ol.recent .who { grid-column: 1 / -1; color: var(--muted); font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
ol.recent .who.member { color: var(--ink); }
ol.recent .when { color: var(--muted); font-variant-numeric: tabular-nums; font-size: .82rem; }
.center { max-width: 420px; margin: 0 auto; padding: 24px 16px; }
.center .btn, .center button { width: 100%; margin-top: 12px; }
.msg { color: var(--muted); min-height: 1.4em; margin-top: 12px; overflow-wrap: anywhere; }

.row.tight{margin-bottom:8px}
.note.flat{margin:0}