:root{--paper:#f3efe4;--card:#fbf8f0;--ink:#1d1b17;--sub:#6b665a;--line:#c9c2b0;--red:#b3261e;--hl:#e9dcb5}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"BIZ UDPGothic",sans-serif;font-size:15px;line-height:1.55}
.num{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}
button,input,select{font:inherit;color:inherit}
[hidden]{display:none!important}
.shell-doc{padding-bottom:80px}
.book,.howto{max-width:640px;margin:0 auto}
.book{padding-top:18px}

.head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid var(--ink);padding-bottom:6px;margin-bottom:14px}
h1{font-size:15px;letter-spacing:.2em;margin:0}
.today{font-size:12px;color:var(--sub)}
h2{font-size:14px;letter-spacing:.1em;margin:22px 0 8px;border-bottom:1px solid var(--ink);padding-bottom:4px}
.lbl{font-size:12px;color:var(--sub)}

.sum{display:flex;gap:12px;align-items:stretch;justify-content:space-between;flex-wrap:wrap}
.sum-main{min-width:0}
.big{font-size:46px;font-weight:700;line-height:1.05;letter-spacing:-.02em;transition:color .2s}
.big.bump{color:var(--red)}
.year{display:flex;gap:14px;color:var(--sub);font-size:13px;margin-top:4px}
.year b{color:var(--ink)}
.save{border:2px solid var(--red);color:var(--red);padding:6px 10px;align-self:center;min-width:150px}
.save .lbl{color:var(--red)}
.save-num{font-size:14px}
.save-num b{font-size:20px}

.next{margin:14px 0 0;padding:8px 10px;border-left:4px solid var(--red);background:var(--card);font-size:14px}
.next b{color:var(--red)}

.cards{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0 0}
.cards button{border:1px solid var(--ink);background:transparent;padding:5px 9px;cursor:pointer;font-size:13px;display:flex;gap:6px;align-items:baseline;max-width:100%}
.cards button .num{font-size:12px}
.cards button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.cards button .cn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:9em}

.tabs{display:flex;margin:16px 0 0;border-bottom:2px solid var(--ink)}
.tabs button{flex:1;border:none;background:transparent;padding:10px 4px 8px;cursor:pointer;font-weight:700;font-size:14px;color:var(--sub);border-bottom:4px solid transparent;margin-bottom:-2px}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.view{padding-top:12px}

.tpl-h{font-size:12px;color:var(--sub);margin-bottom:6px}
.tpl-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px}
.tpl-row button{border:1px dashed var(--ink);background:var(--card);padding:7px 6px;cursor:pointer;text-align:left;line-height:1.25}
.tpl-row button b{display:block;font-size:14px}
.tpl-row button span{font-size:12px;color:var(--sub)}
.tpl-row button:hover{border-style:solid}
.tpl-row button:active{background:var(--hl)}

.ledger{width:100%;border-collapse:collapse;margin-top:16px;table-layout:fixed}
.ledger th{font-size:11px;color:var(--sub);font-weight:400;text-align:left;border-bottom:1px solid var(--ink);padding:4px 2px}
.ledger th:nth-child(2){width:28%}.ledger th:nth-child(3){width:26%}
.ledger td{border-bottom:1px dashed var(--line);padding:9px 2px;vertical-align:top}
.ledger tr{cursor:pointer}
.ledger tr:hover td{background:var(--card)}
.ledger tr:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.r{text-align:right}
.nm{font-weight:700;overflow-wrap:anywhere}
.meta{font-size:11px;color:var(--sub);display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;margin-top:3px}
.mark{border:1px solid var(--line);background:transparent;color:var(--sub);font-size:11px;padding:1px 6px;cursor:pointer}
.mark[aria-pressed="true"]{border-color:var(--red);background:var(--red);color:var(--paper)}
tr.unused .nm,tr.unused td.amt{text-decoration:line-through;text-decoration-color:var(--red)}
.cyc{font-size:11px;color:var(--sub)}
tr.soon td.dt{color:var(--red);font-weight:700}
tr.flash td{animation:fl .9s}
@keyframes fl{from{background:var(--hl)}to{background:transparent}}
.empty{color:var(--sub);font-size:14px;padding:14px 0}
.list-foot{margin-top:14px}
.share-wrap{margin-top:20px;border-top:1px dashed var(--line);padding-top:10px}
.share-wrap .lbl{margin-bottom:6px}
.shell-share button{border-radius:0;border:1px solid var(--ink);background:var(--card);color:var(--ink);font-size:13px;padding:6px 12px}
.shell-share button:hover{background:var(--ink);color:var(--paper)}

.btn{border:1px solid var(--ink);background:var(--card);padding:9px 14px;cursor:pointer;font-weight:700;font-size:14px;display:inline-block;text-align:center}
.btn.ink{background:var(--ink);color:var(--paper)}
.btn.danger{border-color:var(--red);color:var(--red);background:transparent}
.btn:active{transform:translateY(1px)}
.btn:focus-visible,.tabs button:focus-visible,.cards button:focus-visible,.tpl-row button:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.row-btns{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.file{position:relative;overflow:hidden}
.file input{position:absolute;inset:0;opacity:0;cursor:pointer}
.note{font-size:13px;color:var(--sub);margin:6px 0}
.imp{border:1px solid var(--ink);background:var(--card);padding:8px 10px}
.imp p{margin:0 0 4px}
.set{display:grid;gap:10px}
.set label{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:14px}
select,input[type=text],input:not([type]),input[type=number],input[type=date]{padding:8px;border:1px solid var(--ink);background:#fff;border-radius:0;max-width:100%}
.chk{display:flex;gap:8px;align-items:center;cursor:pointer}
.chk input{width:18px;height:18px;accent-color:var(--ink)}

.cal-head{display:flex;align-items:center;gap:8px}
.cal-head .btn{padding:8px 12px}
.cal-title{flex:1;text-align:center;display:flex;flex-direction:column;font-size:15px}
.cal-title span{font-size:12px;color:var(--sub)}
.cal-title span b{color:var(--ink);font-size:15px}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));margin-top:10px;border-top:1px solid var(--ink);border-left:1px solid var(--line)}
.cal-grid .wd{font-size:11px;color:var(--sub);text-align:center;padding:3px 0;border-right:1px solid var(--line);border-bottom:1px solid var(--ink)}
.cal-grid .wd.sun{color:var(--red)}
.day{min-height:62px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:3px;background:transparent;border-top:none;border-left:none;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:1px;min-width:0;font-size:12px}
.day.out{background:transparent;cursor:default;visibility:hidden}
.day .dn{font-size:11px;color:var(--sub)}
.day.today .dn{background:var(--ink);color:var(--paper);padding:0 4px;align-self:flex-start}
.day .amt{font-size:12px;font-weight:700;color:var(--red);overflow:hidden;text-overflow:clip;white-space:nowrap}
.day .names{font-size:10px;color:var(--sub);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:none}
.day.has{background:var(--card)}
.day.sel{outline:2px solid var(--ink);outline-offset:-2px}
.day.past .amt{color:var(--sub)}
@media (min-width:560px){.day .names{display:block}.day{min-height:78px}}
.cal-detail{margin-top:10px;font-size:14px}
.cal-detail h3{font-size:13px;margin:0 0 4px}
.cal-detail ul{list-style:none;margin:0;padding:0}
.cal-detail li{display:flex;justify-content:space-between;gap:8px;border-bottom:1px dashed var(--line);padding:6px 0}

.howto{margin-top:40px;font-size:14px;color:var(--ink)}
.howto p{margin:8px 0}

dialog{border:2px solid var(--ink);background:var(--paper);color:var(--ink);padding:0;width:min(440px,calc(100vw - 24px));max-height:calc(100vh - 24px);overflow:auto}
dialog::backdrop{background:rgba(29,27,23,.45)}
#editForm{padding:14px 16px;display:grid;gap:10px}
#editForm h2{margin:0}
#editForm label{display:grid;gap:3px;font-size:13px;color:var(--sub)}
#editForm label input{color:var(--ink);width:100%}
#editForm .chk{display:flex;color:var(--ink)}
#editForm .chk input{width:18px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:end}
.seg{border:none;margin:0;padding:0;min-width:0}
.seg legend{font-size:13px;color:var(--sub);padding:0;margin-bottom:3px}
.seg{display:flex}
#editForm .seg label{flex:1;display:block;position:relative;color:var(--ink)}
.seg input{position:absolute;opacity:0}
.seg span{display:block;text-align:center;border:1px solid var(--ink);padding:8px 0;cursor:pointer;background:#fff}
.seg label+label span{border-left:none}
.seg input:checked+span{background:var(--ink);color:var(--paper)}
.seg input:focus-visible+span{outline:2px solid var(--red)}
.dlg-btns{display:flex;gap:8px;margin-top:6px}
.dlg-btns .sp{flex:1}

.toast{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:10px 12px;display:flex;gap:12px;align-items:center;font-size:14px;max-width:calc(100vw - 32px);z-index:10}
.toast button{background:transparent;border:1px solid var(--paper);color:var(--paper);padding:4px 10px;cursor:pointer;font-size:13px;white-space:nowrap}
.toast button:empty{display:none}

@media (max-width:400px){
  .big{font-size:38px}
  .save{min-width:0;width:100%}
  .tpl-row{grid-template-columns:repeat(3,minmax(0,1fr))}
  .day{min-height:52px;padding:2px}
  .day .amt{font-size:10px}
}