:root{--bg:#f6f5f1;--pane:#fbfaf7;--fg:#24231f;--sub:#7a786f;--line:#e1dfd6;--card:#fff;--accent:#c96442;--me:#eaf0fa;--hit:#ffe08a;--code:#efede6}
@media(prefers-color-scheme:dark){:root{--bg:#181816;--pane:#1f1f1c;--fg:#e9e8e2;--sub:#9a988e;--line:#35342f;--card:#262623;--accent:#e0805f;--me:#27344a;--hit:#7a5d00;--code:#2d2c28}}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--fg);font:14px/1.65 system-ui,"Hiragino Sans","Noto Sans JP",sans-serif;display:flex;flex-direction:column}
button,input{font:inherit;color:inherit}
.btn{border:1px solid var(--line);background:var(--card);border-radius:6px;padding:3px 10px;cursor:pointer}
.btn:hover{border-color:var(--accent)}
.lnk{border:0;background:none;color:var(--sub);cursor:pointer;padding:0;font-size:12px;text-decoration:underline}

#bar{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--line);background:var(--pane)}
#bar .sp{flex:1}
#err{display:none;background:#fdecea;color:#b3261e;padding:6px 12px;font-size:12px;white-space:pre-wrap}
#tabs{display:none;border-bottom:1px solid var(--line);background:var(--pane)}
#tabs button{flex:1;border:0;background:none;padding:8px;cursor:pointer;border-bottom:2px solid transparent}
body[data-pane="cal"] #tabs [data-pane="cal"],body[data-pane="list"] #tabs [data-pane="list"],body[data-pane="reader"] #tabs [data-pane="reader"]{border-bottom-color:var(--accent);font-weight:600}

#app{flex:1;min-height:0;display:grid;grid-template-columns:var(--w1,272px) var(--w2,360px) 1fr;transition:grid-template-columns .18s ease}
.pane{min-height:0;overflow:auto;border-right:1px solid var(--line);background:var(--pane)}
#reader{border-right:0;background:var(--bg)}
body.dragover #app{outline:3px dashed var(--accent);outline-offset:-6px}

/* calendar */
.cal-top{position:sticky;top:var(--rail,28px);z-index:1;background:var(--pane);border-bottom:1px solid var(--line)}
.cal-sub{display:flex;justify-content:space-between;align-items:center;padding:8px 12px 4px;color:var(--sub);font-size:12px}
.month{padding:8px 10px 2px}
.mtitle{display:flex;justify-content:space-between;align-items:baseline;width:100%;border:0;background:none;cursor:pointer;padding:0 2px 3px;font-weight:600;font-size:13px;text-align:left}
.mtitle small{font-weight:400;color:var(--sub);font-size:11px}
.mtitle.on{color:var(--accent);text-decoration:underline}
.grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dow{text-align:center;font-size:11px;color:var(--sub)}
.dow.sun{color:#d05a5a}.dow.sat{color:#5a7fd0}
.day{height:24px;border:1px solid transparent;border-radius:6px;background:color-mix(in srgb,var(--line) 45%,transparent);cursor:pointer;font-size:12px;padding:0}
.day:hover{border-color:var(--accent)}
.day.l1{background:color-mix(in srgb,var(--accent) 22%,transparent)}
.day.l2{background:color-mix(in srgb,var(--accent) 45%,transparent)}
.day.l3{background:color-mix(in srgb,var(--accent) 72%,transparent);color:#fff}
.day.l4{background:color-mix(in srgb,var(--accent) 95%,transparent);color:#fff}
.day.today{border:1px dotted var(--sub)}
.day.sel{border:2px solid var(--fg)}
.legend{display:flex;align-items:center;gap:3px;padding:10px 12px;color:var(--sub);font-size:11px}
.legend i{width:14px;height:14px;border-radius:3px;display:inline-block}

/* list */
.searchbox{position:sticky;top:var(--rail,28px);background:var(--pane);padding:10px;border-bottom:1px solid var(--line);z-index:2}
#q{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--card)}
#q:focus{outline:2px solid color-mix(in srgb,var(--accent) 50%,transparent);border-color:var(--accent)}
#filters{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
#filters:empty{display:none}
.hist-head{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:12px;color:var(--sub)}
#chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px;max-height:96px;overflow:auto}
.chip{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;background:var(--card);font-size:12px;overflow:hidden}
.chip button{border:0;background:none;cursor:pointer;padding:2px 8px}
.chip button:hover{color:var(--accent)}
.chip .x{padding:2px 7px 2px 0;color:var(--sub)}
#count{padding:6px 12px;color:var(--sub);font-size:12px}
.item{padding:9px 12px;border-bottom:1px solid var(--line);cursor:pointer}
.item:hover{background:color-mix(in srgb,var(--line) 40%,transparent)}
.item.sel{background:color-mix(in srgb,var(--accent) 14%,transparent);box-shadow:inset 3px 0 var(--accent)}
.it-top{display:flex;align-items:center;gap:6px}
.it-title{flex:1;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.star{border:0;background:none;cursor:pointer;color:var(--sub);font-size:17px;line-height:1;padding:0 2px}
.star:hover{color:#e0a100}
.star.on{color:#e0a100}
#rhead h1 .star{font-size:20px;vertical-align:-2px;margin-right:4px}
.favrow{margin-top:6px}
.btn.on{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.nohit{color:var(--sub);text-align:center;margin:28px 16px;font-size:13px}
.it-meta{color:var(--sub);font-size:11px}
.it-snip{color:var(--sub);font-size:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-all}
#more{display:block;margin:10px auto}

/* reader */
#rhead{padding:14px 18px 6px;max-width:860px;margin:0 auto}
#rhead h1{font-size:18px;margin:0 0 2px}
#rhead .meta{color:var(--sub);font-size:12px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
#rhead details{margin-top:6px}
#rhead summary{cursor:pointer;color:var(--sub);font-size:12px}
.sumbody{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:6px 12px;font-size:13px;margin-top:6px}
#msgs{max-width:860px;margin:0 auto;padding:0 18px 60px}
.msg{border:1px solid var(--line);border-radius:12px;padding:8px 14px;margin:12px 0;background:var(--card)}
.msg.human{background:var(--me);margin-left:10%}
.who{font-size:11px;color:var(--sub);display:flex;justify-content:space-between;gap:8px}
.md{word-break:break-word;overflow-wrap:anywhere}
.md>:first-child{margin-top:.3em}.md>:last-child{margin-bottom:.3em}
.md pre{background:var(--code);padding:10px;border-radius:8px;overflow:auto;font-size:12px}
.md code{background:var(--code);padding:1px 4px;border-radius:4px;font-size:.92em}
.md pre code{background:none;padding:0}
.md blockquote{margin:.5em 0;padding:0 12px;border-left:3px solid var(--line);color:var(--sub)}
.md table{border-collapse:collapse;display:block;overflow:auto}
.md th,.md td{border:1px solid var(--line);padding:4px 8px}
.md img{max-width:100%}
.md a{color:var(--accent)}
.blk{font-size:12px;margin:6px 0}
.blk summary{cursor:pointer;color:var(--sub)}
.blk pre{white-space:pre-wrap;background:var(--code);padding:8px;border-radius:6px;overflow:auto;margin:4px 0 0}
mark{background:var(--hit);color:inherit;border-radius:2px;padding:0 1px}
mark.cur{outline:2px solid var(--accent)}
.empty{color:var(--sub);text-align:center;margin:80px 20px}
.hitnav{display:inline-flex;align-items:center;gap:4px}
.hitnav button{border:1px solid var(--line);background:var(--card);border-radius:4px;cursor:pointer;padding:0 6px}

@media(max-width:900px){
  #tabs{display:flex}
  #app{grid-template-columns:1fr}
  .pane{display:none;border-right:0}
  body[data-pane="cal"] #p-cal,body[data-pane="list"] #p-list,body[data-pane="reader"] #reader{display:block}
  .msg.human{margin-left:4%}
}

/* auth */
#gate{position:fixed;inset:0;z-index:10;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:16px}
#gate[hidden]{display:none}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px;max-width:360px;width:100%}
.card h2{margin:0 0 4px}
.sub{color:var(--sub);font-size:12px}
.bad{color:#b3261e;font-size:12px;min-height:1em}
.btn.pri{background:var(--accent);border-color:var(--accent);color:#fff;padding:6px 14px}
.row{display:flex;gap:8px;align-items:center;margin-top:6px}
.row .sp{flex:1}
hr{border:0;border-top:1px solid var(--line);margin:14px 0}
#g-code{flex:1;min-width:0;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);font:20px/1 ui-monospace,monospace;letter-spacing:.3em}
dialog{border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--fg);max-width:340px;width:calc(100% - 32px)}
dialog::backdrop{background:rgba(0,0,0,.4)}
dialog h3{margin:0 0 10px}
#tf-box{text-align:center;margin-top:12px}
#tf-box.dead{opacity:.35}
#tf-qr svg{width:180px;height:180px;display:block;margin:0 auto;border-radius:6px}
#tf-code{font:700 32px/1.4 ui-monospace,monospace;letter-spacing:.15em}
dialog .btn{white-space:nowrap;padding:3px 8px;font-size:13px}

/* facets */
.sec{padding:8px 12px;border-bottom:1px solid var(--line)}
.sec h4{margin:0 0 4px;font-size:11px;color:var(--sub);font-weight:600}
.frow{display:flex;flex-wrap:wrap;gap:5px}
.fchip{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);border-radius:999px;background:var(--card);padding:1px 9px;font-size:12px;cursor:pointer}
.fchip:hover{border-color:var(--accent)}
.fchip.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent);font-weight:600}
.fchip small{color:var(--sub)}
.dot{width:11px;height:11px;border-radius:50%;display:inline-block;border:1px solid rgba(0,0,0,.2)}
.tag{border-radius:4px;padding:0 5px;font-size:10px;background:color-mix(in srgb,var(--line) 80%,transparent)}
.tag.warn{background:#f6d6d2;color:#8a2a20}
.it-meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.item{border-left:6px solid transparent}
.amt{font-variant-numeric:tabular-nums}
.amt.o{color:#c2410c}.amt.i{color:#15803d}
@media(prefers-color-scheme:dark){.amt.o{color:#fb923c}.amt.i{color:#4ade80}}
/* keep note */
.kcard,.pcard{border:1px solid var(--line);border-radius:12px;padding:14px 18px;background:var(--card);margin:12px 0}
.kbody{white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere}
.kbody a,.kli a{color:var(--accent)}
.kli{display:flex;gap:8px;padding:1px 0}.kli.done .t{text-decoration:line-through;color:var(--sub)}
.kann{display:block;margin-top:10px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;text-decoration:none;color:inherit;background:color-mix(in srgb,var(--line) 25%,transparent)}
.kann b{display:block;font-size:13px;color:var(--accent)}
.kann span{font-size:12px;color:var(--sub);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.katt{margin-top:10px;font-size:12px;color:var(--sub)}
/* paypay transaction */
.pamt{font-size:28px;font-weight:700;font-variant-numeric:tabular-nums}
.pamt.o{color:#c2410c}.pamt.i{color:#15803d}
@media(prefers-color-scheme:dark){.pamt.o{color:#fb923c}.pamt.i{color:#4ade80}}
.pdl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:10px 0 0;font-size:13px}
.pdl dt{color:var(--sub)}.pdl dd{margin:0;word-break:break-all}

/* progress banner (import / sync / local load) */
#progress{position:sticky;top:0;z-index:20;padding:8px 14px 0;background:color-mix(in srgb,var(--accent) 16%,var(--pane));border-bottom:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));font-size:13px}
#progress[hidden]{display:none}
#progress .pg-row{display:flex;align-items:center;gap:8px;min-height:24px}
#progress .sp{flex:1}
#progress b{font-weight:700}
#pg-detail{color:var(--sub);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.pg-spin{width:14px;height:14px;border-radius:50%;border:2px solid color-mix(in srgb,var(--accent) 30%,transparent);border-top-color:var(--accent);animation:pgspin .8s linear infinite;flex:none}
.pg-bar{height:5px;margin:6px -14px 0;background:color-mix(in srgb,var(--accent) 18%,transparent);overflow:hidden}
.pg-bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .25s}
#progress.indet .pg-bar i{width:35%;animation:pgslide 1.1s ease-in-out infinite}
#progress.ok{background:#e6f4ea;border-bottom-color:#8cc59a;color:#14532d}
#progress.warn{background:#fff4d6;border-bottom-color:#e5c04b;color:#6b4a00}
#progress.err{background:#fdecea;border-bottom-color:#e5948d;color:#8a1f16}
#progress.ok .pg-spin,#progress.warn .pg-spin,#progress.err .pg-spin{display:none}
#progress.ok #pg-detail,#progress.warn #pg-detail,#progress.err #pg-detail{color:inherit}
#progress.ok .pg-bar i{background:#2e9d57;width:100%}#progress.warn .pg-bar i{background:#d4a017;width:100%}#progress.err .pg-bar i{background:#d64636;width:100%}
@media(prefers-color-scheme:dark){
  #progress.ok{background:#16301f;color:#b6e6c4;border-bottom-color:#2e6b44}
  #progress.warn{background:#3a3010;color:#f3dc9a;border-bottom-color:#7a6320}
  #progress.err{background:#3a1a17;color:#f5b8b1;border-bottom-color:#7a2f29}
}
@keyframes pgspin{to{transform:rotate(360deg)}}
@keyframes pgslide{0%{margin-left:-35%}100%{margin-left:100%}}

/* hover preview / click-to-filter */
.mact{cursor:pointer;border-radius:3px}
.mact:hover{color:var(--accent);text-decoration:underline}
.tag.mact:hover{background:color-mix(in srgb,var(--accent) 22%,transparent);text-decoration:none}
.item:hover .star{color:var(--fg)}
#count.peekcnt{color:var(--accent);font-weight:600}
#reader.peek{box-shadow:inset 0 3px var(--accent)}
#reader.peek #rhead::before{content:"プレビュー — クリックで選択、右へ移動で開く";display:block;font-size:11px;color:var(--accent);margin-bottom:2px}
.day:hover,.mtitle:hover{border-color:var(--accent)}
.mtitle:hover{color:var(--accent)}

/* weekday filter */
.dow{cursor:pointer;border-radius:5px;user-select:none}
.dow:hover,.dow.hov{background:color-mix(in srgb,var(--accent) 20%,transparent)}
.dow.on{background:color-mix(in srgb,var(--accent) 32%,transparent);font-weight:700;color:var(--fg)}
.day.off{opacity:.2}

/* Keep images */
.thumb{position:relative;margin-top:6px}
.thumb img{width:100%;height:120px;object-fit:cover;border-radius:6px;display:block;background:var(--line)}
.thumb b{position:absolute;right:6px;bottom:6px;background:rgba(0,0,0,.6);color:#fff;font-size:11px;border-radius:999px;padding:0 7px}
a.katt{display:block}
a.katt img{max-width:100%;border-radius:8px;margin-top:10px;display:block}

/* recovery key */
body.dragover #gate .card{outline:3px dashed var(--accent);outline-offset:4px}
#rec{max-width:420px}
#rec p{margin:6px 0}
#rec label.row{cursor:pointer;margin-top:10px}
#rec-list .recrow{display:flex;align-items:center;gap:6px;padding:3px 0;border-bottom:1px dashed var(--line)}
#rec-list .recrow span{flex:1;min-width:0}
#rec-list .recrow .unsaved{color:#b3261e}

/* header menu */
#bar{position:relative}
#menu{position:absolute;right:12px;top:calc(100% + 4px);z-index:40;min-width:240px;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.18);padding:4px}
#menu[hidden]{display:none}
#menu hr{margin:4px 0}
#menu .mi{display:flex;align-items:center;gap:6px;width:100%;box-sizing:border-box;padding:7px 10px;border:0;border-radius:6px;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
#menu .mi:hover{background:color-mix(in srgb,var(--accent) 14%,transparent)}
#menu .mi[hidden]{display:none}
#menu .mi.danger{color:#b3261e}
#menu input[type=checkbox]{margin:0}

/* total of the amounts in the current list */
#sumbar{margin:0 0 8px;padding:6px 10px;border-radius:8px;background:color-mix(in srgb,var(--accent) 12%,var(--card));border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));font-size:12.5px;font-variant-numeric:tabular-nums}
#sumbar[hidden]{display:none}
#sumbar .sline{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 12px}
#sumbar .sline+.sline{margin-top:2px}
#sumbar .sname{font-weight:700}
#sumbar b.o{color:#c2410c}#sumbar b.i{color:#15803d}
#sumbar small{color:var(--sub)}
@media(prefers-color-scheme:dark){#sumbar b.o{color:#fb923c}#sumbar b.i{color:#4ade80}}

/* collapsible side panes (wide layout only; the narrow layout uses tabs) */
:root{--rail:28px}
.rail{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:6px;height:var(--rail);padding:0 6px;background:var(--pane);border-bottom:1px solid var(--line);font-size:11px;color:var(--sub)}
.rbtn{border:1px solid var(--line);background:var(--card);border-radius:5px;width:22px;height:20px;line-height:1;cursor:pointer;color:var(--fg);padding:0}
.rbtn:hover{border-color:var(--accent);color:var(--accent)}
.rlabel{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(min-width:901px){
  #app.c1-off{--w1:34px}
  #app.c2-off{--w2:34px}
  .pane.off{overflow:hidden}
  .pane.off>*:not(.rail){display:none}
  .pane.off .rail{position:static;flex-direction:column;height:100%;padding:6px 0;gap:10px;border-bottom:0;cursor:pointer}
  .pane.off .rlabel{writing-mode:vertical-rl;text-orientation:upright;letter-spacing:.05em;overflow:visible;font-size:12px}
}
@media(max-width:900px){.rail{display:none}:root{--rail:0px}}