:root { --bg:#f6f3ec; --fg:#222; --mute:#777; --line:#ddd6c8; --card:#fff; --acc:#2d6a4f; --warn:#fff3b0; --danger:#b23a3a; }
* { box-sizing:border-box; }
html, body { margin:0; background:var(--bg); color:var(--fg); font-family:-apple-system,"Hiragino Sans","Noto Sans JP",sans-serif; font-size:16px; -webkit-text-size-adjust:100%; }
#app { max-width:560px; margin:0 auto; padding:16px 16px calc(96px + env(safe-area-inset-bottom)); }
h1 { font-size:20px; margin:8px 0 16px; display:flex; justify-content:space-between; align-items:baseline; }
h1 small { font-weight:normal; color:var(--mute); font-size:13px; }
h2 { font-size:16px; margin:20px 0 8px; color:var(--mute); font-weight:normal; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px; margin-bottom:12px; }
.row { display:flex; gap:8px; align-items:center; }
.row > * { flex:1; }
label { display:block; font-size:13px; color:var(--mute); margin:10px 0 4px; }
input, select, textarea { width:100%; font:inherit; padding:10px; border:1px solid var(--line); border-radius:8px; background:#fff; }
input.review, select.review { background:var(--warn); border-color:#e4c84a; }
button { font:inherit; padding:12px 16px; border-radius:10px; border:1px solid var(--line); background:#fff; color:var(--fg); }
button.primary { background:var(--acc); color:#fff; border-color:var(--acc); }
button.danger { color:var(--danger); }
button:disabled { opacity:.5; }
.bar { position:fixed; left:0; right:0; bottom:0; background:rgba(246,243,236,.96); border-top:1px solid var(--line); padding:12px 16px calc(12px + env(safe-area-inset-bottom)); display:flex; gap:8px; }
.bar button { flex:1; font-size:17px; }
.month { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.month b { font-size:18px; }
.list .item { display:flex; justify-content:space-between; gap:8px; padding:10px 0; border-bottom:1px solid var(--line); }
.list .item:last-child { border-bottom:none; }
.list .item .l { flex:1; min-width:0; }
.list .item .name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.list .item .sub { font-size:13px; color:var(--mute); }
.list .item .amt { white-space:nowrap; font-variant-numeric:tabular-nums; }
.totals div { display:flex; justify-content:space-between; padding:4px 0; font-variant-numeric:tabular-nums; }
.totals .sum { border-top:1px solid var(--line); margin-top:4px; padding-top:8px; font-weight:bold; }
.thumb { width:100%; max-height:260px; object-fit:contain; background:#eee; border-radius:8px; }
.items .it { display:grid; grid-template-columns:1fr 100px 32px; gap:6px; margin-bottom:6px; }
.items .it input[type=number] { text-align:right; }
.items button { padding:6px; }
.hint { font-size:13px; color:var(--mute); margin-top:4px; }
.badge { display:inline-block; font-size:12px; padding:2px 8px; border-radius:999px; background:#e9e4d6; margin-left:6px; }
.badge.low { background:var(--warn); }
.err { color:var(--danger); margin:8px 0; }
a { color:var(--acc); }
#overlay { position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; z-index:10; }
#overlay[hidden] { display:none; }
#overlay .box { background:#fff; border-radius:12px; padding:24px 32px; text-align:center; }
.spin { width:32px; height:32px; border:4px solid #ddd; border-top-color:var(--acc); border-radius:50%; margin:0 auto 12px; animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.login { margin-top:25vh; text-align:center; }
.login input { text-align:center; font-size:18px; margin:12px 0; }
.notice { background:#e3f1e8; border:1px solid #bcd9c6; color:#1f4d38; border-radius:10px; padding:10px 12px; margin-bottom:12px; font-size:14px; }
.notice[hidden] { display:none; }