:root{
  --bg:#f5f6f4; --fg:#1d2321; --muted:#6a7571; --card:#fff; --line:#dfe4e1;
  --accent:#1f6f5c; --accent-fg:#fff; --danger:#b3261e;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#121614; --fg:#e8ede9; --muted:#93a09a; --card:#1b211e; --line:#2c3531; --accent:#3fb592; --accent-fg:#06231a; --danger:#f2867e; }
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans",sans-serif;font-size:16px;-webkit-text-size-adjust:100%}
[hidden]{display:none!important}
.view{padding:12px 16px calc(84px + env(safe-area-inset-bottom));max-width:640px;margin:0 auto}
#view-login{padding-top:20vh}
h1{font-size:28px;margin:0 0 20px}
h2{font-size:17px;margin:20px 0 8px}
label{display:block;font-size:13px;color:var(--muted);margin-bottom:12px}
input,select,textarea{display:block;width:100%;margin-top:4px;padding:11px 12px;font-size:16px;color:var(--fg);background:var(--card);border:1px solid var(--line);border-radius:10px;font-family:inherit}
textarea{resize:vertical}
button{font:inherit;border:0;border-radius:10px;padding:12px 16px;cursor:pointer;color:var(--fg);background:transparent}
button.primary{background:var(--accent);color:var(--accent-fg);font-weight:600}
button.secondary{background:var(--card);border:1px solid var(--line)}
button.ghost{color:var(--muted)}
button.danger{color:var(--danger)}
button.wide{width:100%}
button.recording{background:var(--danger);color:#fff;border-color:var(--danger)}
button:disabled{opacity:.5}
.row{display:flex;gap:8px;align-items:center}
.row>button{flex:1}
.topbar{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:calc(8px + env(safe-area-inset-top)) 16px 8px;background:var(--bg);border-bottom:1px solid var(--line);font-weight:600}
.topbar button{padding:6px 8px;font-size:13px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;margin:12px 0}
.msg{min-height:1.2em;margin:8px 0 0;font-size:13px;color:var(--muted)}
.msg.err{color:var(--danger)}
.note{font-size:13px;color:var(--muted);margin:0 0 8px;word-break:break-all}
.tabbar{position:fixed;left:0;right:0;bottom:0;display:flex;background:var(--card);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.tabbar button{flex:1;border-radius:0;padding:14px 0;color:var(--muted)}
.tabbar button.active{color:var(--accent);font-weight:700}
.monthbar{display:flex;justify-content:space-between;align-items:center;margin:4px 0}
.monthbar button{font-size:22px;padding:6px 16px}
.total{font-size:26px;font-weight:700;margin:4px 0 12px;text-align:center}
.list{list-style:none;margin:0;padding:0}
dialog{width:min(92vw,520px);border:1px solid var(--line);border-radius:16px;padding:16px;background:var(--bg);color:var(--fg)}
dialog::backdrop{background:rgba(0,0,0,.45)}
.item-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px;margin-bottom:10px}
.item-card .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 10px}
.item-card .full{grid-column:1/-1}
.item-card .rm{display:block;margin:-6px -6px 2px auto;padding:4px 8px;font-size:13px}
.demo-banner{margin:0;padding:6px 12px;background:#f3d27a;color:#3b2f00;font-size:12px;text-align:center}
.badge{margin-left:4px;color:var(--fg);font-weight:600}
.reason{margin:4px 0 0;font-size:12px;color:var(--muted)}
.reason.auto{color:var(--accent)}
.hint summary{cursor:pointer;font-weight:600;font-size:14px}
.hint .note{margin:8px 0}
.examples{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.examples li{font-size:13px;padding:6px 10px;border:1px solid var(--line);border-radius:999px;cursor:pointer;background:var(--bg)}
.examples li:active{background:var(--line)}
/* ───── 色（大分類） 検証済み：ライト/ダークそれぞれ色覚・明度チェック通過 ───── */
:root{
  --sat:#2463c7; --sun:#d0342c; --band:#ecefed;
  --c-food:#7cb82f; --c-supply:#2a9fc0; --c-travel:#7b5cd6; --c-med:#1f9e7a; --c-beauty:#d4a017; --c-cloth:#c05ac0; --c-edu:#e8892b; --c-social:#e0457b; --c-other:#9aa39e;
  --up:#c8372d; --down:#1f8a5b;
}
@media (prefers-color-scheme: dark){:root{
  --sat:#7aa7f0; --sun:#f08a80; --band:#232a26;
  --c-food:#6aa526; --c-supply:#2a9fc0; --c-travel:#8f74e6; --c-med:#1f9e7a; --c-beauty:#b38a12; --c-cloth:#c76cc6; --c-edu:#c96f17; --c-social:#e0457b; --c-other:#7b847f;
  --up:#f08a80; --down:#5fd09a;
}}
.c-food{--c:var(--c-food)} .c-supply{--c:var(--c-supply)} .c-travel{--c:var(--c-travel)}
.c-med{--c:var(--c-med)} .c-beauty{--c:var(--c-beauty)} .c-cloth{--c:var(--c-cloth)}
.c-edu{--c:var(--c-edu)} .c-social{--c:var(--c-social)} .c-other{--c:var(--c-other)}

/* 色付きの丸アイコン */
.cat-ico{flex:none;display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--c)}
.cat-ico svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chev{color:var(--muted);font-size:20px;line-height:1;width:10px;text-align:center}

/* ───── 履歴 ───── */
.month-card{display:flex;flex-direction:column;align-items:center;gap:2px;margin:4px 0 14px}
.mc-label{font-size:13px;color:var(--muted)}
.mc-total{font-size:30px;font-weight:800;font-variant-numeric:tabular-nums}
.mc-diff{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;margin:0}
.mc-diff.up{color:var(--up)} .mc-diff.down{color:var(--down)}
.mc-diff.center{text-align:center;margin-top:4px}
.list .day{margin:0 -16px 6px}
.day-head{display:flex;justify-content:space-between;align-items:center;padding:7px 16px;background:var(--band);font-size:14px;position:sticky;top:calc(45px + env(safe-area-inset-top));z-index:2}
.day-date{font-weight:700}
.day-date.sat{color:var(--sat)} .day-date.sun{color:var(--sun)}
.day-total{font-weight:700;font-variant-numeric:tabular-nums}
.day-items{list-style:none;margin:0;padding:0;background:var(--card)}
.item{display:flex;align-items:center;gap:12px;padding:10px 12px 10px 16px;cursor:pointer;position:relative}
.item+.item::before{content:"";position:absolute;top:0;left:64px;right:0;border-top:1px solid var(--line)}
.item:active{background:var(--line)}
.i-main{flex:1;min-width:0}
.i-cat{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;font-weight:600}
.mark{font-size:11px;font-weight:600;padding:1px 7px;border-radius:999px;background:var(--band);color:var(--muted)}
.i-sub{font-size:12px;color:var(--muted);margin-top:2px;min-height:1em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.i-amt{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}

/* ───── 集計 ───── */
.chart-card{display:flex;flex-direction:column;align-items:center;padding:12px 14px 14px}
.donut{width:min(68vw,240px)}
.donut-svg{display:block;width:100%;height:auto}
.donut-seg{stroke:var(--c);cursor:pointer;transition:stroke-width .15s,opacity .15s}
.donut-seg.dim{opacity:.35}
.donut-empty{stroke:var(--line)}
.donut-label{font-size:14px;fill:var(--muted);font-weight:600}
.donut-value{font-size:22px;fill:var(--fg);font-weight:800}
.cat-card{padding:0;overflow:hidden}
.cat-head{display:flex;justify-content:space-between;padding:12px 16px;font-weight:700;border-bottom:1px solid var(--line)}
.cat-head strong{font-variant-numeric:tabular-nums}
.cat-list{list-style:none;margin:0;padding:0}
.cat-item+.cat-item{border-top:1px solid var(--line)}
.cat-row{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px 10px 16px;border-radius:0;text-align:left}
.cat-row:active{background:var(--line)}
.cr-name{flex:1;font-weight:600}
.cr-pct{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.cr-amt{font-weight:700;font-variant-numeric:tabular-nums;min-width:80px;text-align:right}
.cat-item.zero .cr-name,.cat-item.zero .cr-amt{color:var(--muted);font-weight:400}
.cat-item.zero .cat-ico{opacity:.4}
.cat-item .chev{transition:transform .15s}
.cat-item.open .chev{transform:rotate(90deg)}
.minor-list{list-style:none;margin:0;padding:0 16px 10px 64px;display:none}
.cat-item.open .minor-list{display:block}
.minor-row{display:flex;justify-content:space-between;gap:10px;padding:6px 18px 6px 0;font-size:14px;color:var(--muted)}
.minor-row+.minor-row{border-top:1px dashed var(--line)}
.mr-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mr-amt{font-variant-numeric:tabular-nums;font-weight:600}
.daily-card{padding:12px 12px 8px}
.daily-head{display:flex;justify-content:space-between;align-items:baseline;font-weight:700;margin-bottom:6px;padding:0 4px}
.daily-readout{font-size:12px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.daily-svg{display:block;width:100%;height:auto}
.daily-svg .bar{fill:var(--accent);opacity:.75}
.daily-svg .bar.today{opacity:1}
.daily-svg .bar.picked{opacity:1;fill:var(--fg)}
.daily-svg .hit{fill:transparent;cursor:pointer}
.daily-svg .grid{stroke:var(--line);stroke-width:1;stroke-dasharray:2 3}
.daily-svg .baseline{stroke:var(--muted);stroke-width:1}
.daily-svg .axis{font-size:9px;fill:var(--muted)}
.daily-svg .axis.sat{fill:var(--sat)} .daily-svg .axis.sun{fill:var(--sun)}