:root {
  --bg: #eef2f1; --card: #ffffff; --ink: #1d2b29; --sub: #5f706d; --line: #d6dfdd;
  --teal: #2f6f68; --teal-soft: #dcebe8; --warn: #b5523b; --track: #e3eae8;
  --c0: #2f6f68; --c1: #5b77a6; --c2: #c07a46; --c3: #7f6aa6; --c4: #7c8a87;
  --sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Meiryo", sans-serif;
  --num: "SF Mono", "Menlo", "Consolas", "Roboto Mono", ui-monospace, monospace;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #111917; --card: #1a2422; --ink: #e4ecea; --sub: #95a6a2; --line: #2b3835;
    --teal: #6fb8ad; --teal-soft: #22403b; --warn: #e88a72; --track: #26332f;
    --c0: #6fb8ad; --c1: #8ea6d4; --c2: #e0a073; --c3: #b3a1d8; --c4: #a3b0ad; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); line-height: 1.6; font-feature-settings: "palt"; }
.shell { max-width: 560px; margin: 0 auto; padding: calc(12px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left)); }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0 14px; }
.brand { margin: 0; display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; letter-spacing: .04em; }
.brand svg { width: 20px; height: 20px; fill: var(--teal); }
.month { display: flex; align-items: center; gap: 2px; }
.month h1 { margin: 0; font-size: 16px; font-weight: 600; min-width: 7.5em; text-align: center; font-variant-numeric: tabular-nums; }
.month button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; font-size: 24px; cursor: pointer; color: var(--sub); }
.month button:hover { background: var(--teal-soft); }

.summary { background: var(--card); border-radius: 20px; padding: 20px; border: 1px solid var(--line); }
.label { margin: 0; font-size: 13px; color: var(--sub); }
.total { margin: 2px 0 12px; font-family: var(--num); font-size: 42px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.yen { font-size: 24px; color: var(--sub); margin-right: 4px; }
.meter { height: 10px; background: var(--track); border-radius: 5px; overflow: hidden; }
.meter i { display: block; height: 100%; width: 0; background: var(--teal); border-radius: 5px; transition: width .4s ease; }
.meter i.over { background: var(--warn); }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 8px; }
.facts p { margin: 0; display: flex; flex-direction: column; }
.facts span { font-size: 11px; color: var(--sub); }
.facts b { font-family: var(--num); font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.facts b.neg { color: var(--warn); }
.ghost { border: 0; background: none; color: var(--teal); padding: 10px 0; cursor: pointer; font-size: 14px; font-weight: 600; }
.budget-form label { font-size: 13px; color: var(--sub); }
.inline { display: flex; gap: 8px; margin-top: 4px; }
.inline input { flex: 1; min-width: 0; }
input[type=text], input[type=date] { height: 46px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); padding: 0 12px; font-size: 16px; }
.solid { border: 0; background: var(--teal); color: var(--card); border-radius: 12px; padding: 0 18px; min-height: 46px; font-weight: 700; cursor: pointer; }

h2 { font-size: 13px; font-weight: 700; color: var(--sub); letter-spacing: .12em; margin: 28px 4px 10px; }
.entry { background: var(--card); border-radius: 20px; padding: 6px 20px 18px; border: 1px solid var(--line); margin-top: 16px; }
.entry h2 { margin: 14px 0 6px; }
.amount-row { display: flex; align-items: baseline; gap: 6px; border-bottom: 2px solid var(--teal); }
.yen-big { font-family: var(--num); font-size: 28px; color: var(--sub); }
#amount { flex: 1; min-width: 0; border: 0; background: transparent; height: 60px; font-family: var(--num); font-size: 38px; font-weight: 600; padding: 0; text-align: right; font-variant-numeric: tabular-nums; }
#amount:focus-visible { outline: none; }
.amount-row:focus-within { border-bottom-color: var(--ink); }
.sub-row { display: grid; grid-template-columns: auto 1fr; gap: 8px 10px; align-items: center; margin-top: 12px; font-size: 13px; color: var(--sub); }
.sub-row #memo { grid-column: 1 / -1; }
.sub-row input { width: 100%; min-width: 0; color: var(--ink); }
.hint { font-size: 12px; color: var(--sub); margin: 10px 0 8px; }
.cats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.cat { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 76px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); cursor: pointer; padding: 10px 2px; font-size: 13px; font-weight: 600; }
.cat svg { width: 26px; height: 26px; }
.c0 svg { color: var(--c0); } .c1 svg { color: var(--c1); } .c2 svg { color: var(--c2); } .c3 svg { color: var(--c3); } .c4 svg { color: var(--c4); }
.cat:hover { border-color: var(--teal); }
.cat:active { transform: scale(.96); }
.toast { min-height: 1.6em; margin: 10px 0 0; font-size: 13px; color: var(--teal); display: flex; gap: 10px; align-items: center; }
.toast button { border: 0; background: none; color: var(--teal); text-decoration: underline; cursor: pointer; padding: 6px; font-weight: 700; }
.toast.err { color: var(--warn); }

.bars { list-style: none; margin: 0; padding: 14px 18px; background: var(--card); border: 1px solid var(--line); border-radius: 20px; }
.bars li { display: grid; grid-template-columns: 4.5em 1fr auto; gap: 10px; align-items: center; padding: 7px 0; font-size: 14px; }
.bars .track { height: 12px; background: var(--track); border-radius: 6px; overflow: hidden; }
.bars .track i { display: block; height: 100%; border-radius: 6px; transition: width .4s ease; }
.bars .v { font-family: var(--num); font-size: 14px; text-align: right; min-width: 6.5em; font-variant-numeric: tabular-nums; }
.bars .pct { color: var(--sub); font-size: 11px; margin-left: 4px; }

.day { background: var(--card); border: 1px solid var(--line); border-radius: 16px; margin-bottom: 10px; overflow: hidden; }
.day h3 { margin: 0; padding: 10px 16px; display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; background: var(--teal-soft); }
.day h3 b { font-family: var(--num); }
.day ul { list-style: none; margin: 0; padding: 0; }
.day li { display: flex; align-items: center; gap: 10px; padding: 4px 6px 4px 16px; border-top: 1px solid var(--line); min-height: 52px; }
.day li:first-child { border-top: 0; }
.dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.day .what { flex: 1; min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
.day .what small { display: block; color: var(--sub); font-size: 12px; }
.day .amt { font-family: var(--num); font-variant-numeric: tabular-nums; }
.del { width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; cursor: pointer; color: var(--sub); font-size: 18px; }
.del:hover { background: var(--teal-soft); color: var(--warn); }
.empty { text-align: center; color: var(--sub); padding: 26px 16px; border: 1.5px dashed var(--line); border-radius: 16px; font-size: 14px; }

.foot { margin-top: 36px; text-align: center; font-size: 12px; color: var(--sub); }
.foot p { margin: 2px 0; }
.foot a { color: var(--teal); }

@media (max-width: 380px) { .cats { grid-template-columns: repeat(3, 1fr); } .total { font-size: 36px; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }