:root{
  --bg:#F3EEE5; --paper:#FBF8F2; --line:#E3D9C9; --ink:#2B2520; --muted:#8C8174;
  --tea:#B8957A; --tea-deep:#8E6E57; --tea-soft:#EADBCB; --red:#A8443A;
  --font:"LXGW WenKai TC","Noto Serif TC","Songti TC","PMingLiU",serif;
  --mono:"SF Mono","Consolas",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--tea-deep)}
.hidden{display:none!important}
.app{max-width:760px;margin:0 auto;min-height:100vh;padding-bottom:calc(40px + env(safe-area-inset-bottom))}

/* 頁首 */
header{position:sticky;top:0;z-index:10;background:var(--bg);border-bottom:1px solid var(--line);padding:calc(12px + env(safe-area-inset-top)) 16px 0}
.brand{display:flex;align-items:center;justify-content:space-between;gap:8px}
.brand h1{font-size:22px;font-weight:700;letter-spacing:.5px}
.brand h1 em{font-style:italic;color:var(--tea-deep);font-weight:400;margin-left:6px}
.brand .right{display:flex;align-items:center;gap:8px}
.gear{border:0;background:none;font-size:18px;color:var(--tea-deep);padding:2px 4px}
.switch{display:flex;border:1px solid var(--tea);border-radius:999px;overflow:hidden;font-size:13px}
.switch button{border:0;background:transparent;padding:3px 14px;color:var(--tea-deep)}
.switch button.on{background:var(--tea);color:#fff}
nav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;margin-top:10px}
nav::-webkit-scrollbar{display:none}
nav button{flex:0 0 auto;border:0;background:none;padding:4px 9px 8px;text-align:center;border-bottom:2px solid transparent}
nav button b{display:block;font-size:15px;font-weight:400}
nav button small{display:block;font-size:10px;color:var(--muted);letter-spacing:.3px}
nav button.on{border-bottom-color:var(--tea-deep)}
nav button.on small{color:var(--tea-deep)}
nav button .badge{display:inline-block;min-width:16px;padding:0 4px;margin-left:2px;border-radius:8px;background:var(--red);color:#fff;font-size:10px;line-height:16px;font-family:var(--mono)}

main{padding:18px 16px}
.quickadd{display:flex;gap:6px;margin-bottom:18px}
.quickadd input{flex:1;border:1px solid var(--line);background:var(--paper);padding:8px 10px;min-width:0}
.quickadd button{border:1px solid var(--ink);background:var(--ink);color:#fff;padding:0 14px}
.ptitle{font-size:28px;font-weight:700;letter-spacing:1px}
.psub{color:var(--muted);margin:2px 0 16px}
.psub i{font-style:normal;margin-right:10px}

.box{background:var(--paper);border:1px solid var(--line);padding:14px;margin-bottom:16px}
.sec{display:flex;align-items:baseline;gap:8px;margin:22px 0 10px;font-size:16px;font-weight:700}
.sec small{color:var(--muted);font-weight:400;font-size:12px}
.stats{display:grid;grid-template-columns:repeat(2,1fr);border:1px solid var(--line);background:var(--paper);margin-bottom:16px}
.stats.three{grid-template-columns:repeat(3,1fr)}
.stat{padding:12px 14px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat .k{font-size:12px;color:var(--muted)}
.stat .v{font-family:var(--mono);font-size:24px;color:var(--tea-deep)}
.stat .v.red{color:var(--red)}
.stat .n{font-size:11px;color:var(--muted)}
.bigmoney{display:flex;justify-content:space-between;align-items:center}
.bigmoney .v{font-family:var(--mono);font-size:24px;color:var(--red)}

.card{background:var(--paper);border:1px solid var(--line);padding:12px 14px;margin-bottom:10px;position:relative}
.card.done{opacity:.45}
.card.done .t{text-decoration:line-through}
.card .t{font-size:16px;font-weight:700;word-break:break-word;padding-right:52px}
.card .d{color:var(--muted);font-size:13px;margin-top:2px;white-space:pre-wrap;word-break:break-word}
.card .addr{font-size:13px;color:var(--tea-deep);margin-top:2px;word-break:break-word}
.card details.orig{margin-top:6px;font-size:13px}
.card details.orig summary{cursor:pointer;color:var(--muted);font-size:12px;list-style:none}
.card details.orig summary::before{content:"▸ "}
.card details.orig[open] summary::before{content:"▾ "}
.card details.orig .d{background:#fff;border:1px solid var(--line);padding:8px;margin-top:4px;max-height:50vh;overflow:auto}
.card .link{font-size:13px;display:block;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:6px;padding-right:52px}
.tag{font-size:11px;border:1px solid var(--line);padding:0 6px;color:var(--muted);background:#fff}
.tag.tea{border-color:var(--tea);color:var(--tea-deep);background:var(--tea-soft)}
.tag.red{border-color:var(--red);color:var(--red)}
.acts{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.acts button,.acts a{font-size:12px;border:1px solid var(--line);background:#fff;padding:3px 10px;color:var(--ink);text-decoration:none}
.acts .main{background:var(--ink);color:#fff;border-color:var(--ink)}
.acts .tea{background:var(--tea);color:#fff;border-color:var(--tea)}
.src{position:absolute;right:12px;top:10px;font-size:11px;color:var(--muted)}
.money-r{position:absolute;right:14px;bottom:12px;font-family:var(--mono);font-size:16px;color:var(--tea-deep)}
.thumb{display:block;width:100%;max-height:260px;object-fit:cover;object-position:top;margin:6px 0 2px;border:1px solid var(--line);background:var(--tea-soft);cursor:zoom-in}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid2 .card{margin:0}
.grid2 .thumb{max-height:220px}

.empty{border:1px dashed var(--tea);background:var(--paper);text-align:center;color:var(--muted);padding:20px 14px;font-size:14px}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.chips button{border:1px solid var(--line);background:var(--paper);font-size:13px;padding:2px 12px}
.chips button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.chips.sub button{font-size:12px;padding:1px 10px}
.chips.sub button.on{background:var(--tea);border-color:var(--tea)}
select,.field input,.field textarea{font-size:14px;padding:6px 8px;border:1px solid var(--line);background:#fff;width:100%}
.filters{display:flex;gap:8px;margin-bottom:12px}
.inbox{border-left:3px solid var(--tea)}
.clr{display:grid;grid-template-columns:76px 1fr;font-size:13px;row-gap:3px;margin-top:4px}
.clr dt{color:var(--muted)}
.due{color:var(--red);font-weight:700}

/* 月曆 */
.cal-h{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:16px;margin-bottom:8px}
.cal-h button{border:0;background:none;font-size:20px;color:var(--muted);padding:0 10px}
.cal{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-family:var(--mono);font-size:13px}
.cal .w{color:var(--muted);font-size:11px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.cal .c{padding:7px 0 9px;border-bottom:1px solid var(--line);position:relative;cursor:pointer}
.cal .c.o{color:#CFC5B8}
.cal .c.today span{background:var(--red);color:#fff;padding:1px 5px}
.cal .c.sel{background:var(--tea-soft)}
.cal .dots{position:absolute;left:0;right:0;bottom:2px;display:flex;justify-content:center;gap:2px}
.cal .dots i{width:4px;height:4px;border-radius:50%;background:var(--tea)}
.cal .dots i.co{background:var(--ink)}
.cal .dots i.g{background:#fff;border:1px solid var(--tea-deep);width:5px;height:5px;margin-top:-.5px}
.legend i.gdot{background:#fff;border:1px solid var(--tea-deep)}
.tag.g{border-color:var(--tea-deep);color:var(--tea-deep);background:#fff}
.gcard{border-left:3px solid var(--tea-deep);background:#fff}
.sync{font-size:12px;color:var(--tea-deep);margin-bottom:10px}
.legend{font-size:11px;color:var(--muted);margin-top:8px}
.legend i{display:inline-block;width:7px;height:7px;border-radius:50%;margin:0 3px 0 8px;vertical-align:middle}

/* 記帳鎖 */
.lock{text-align:center;padding:22px 14px}
.lock .pin{display:flex;justify-content:center;gap:12px;margin:14px 0}
.lock .pin i{width:12px;height:12px;border:1px solid var(--tea-deep);border-radius:50%}
.lock .pin i.f{background:var(--tea-deep)}
.pad{display:grid;grid-template-columns:repeat(3,64px);gap:10px;justify-content:center}
.pad button{height:44px;border:1px solid var(--line);background:#fff;font-family:var(--mono);font-size:18px}
.btn{border:1px solid var(--ink);background:var(--ink);color:#fff;padding:7px 16px;font-size:14px}
.btn.light{background:#fff;color:var(--ink);border-color:var(--line)}
.btn.tea{background:var(--tea);border-color:var(--tea)}
.masked{font-family:var(--mono);color:var(--muted);font-size:12px}
.bar{height:6px;background:var(--tea-soft);margin:6px 0}
.bar div{height:6px;background:var(--tea)}

/* 登入 */
.login{max-width:360px;margin:12vh auto 0;padding:0 20px}
.login h1{font-size:30px;margin-bottom:4px}
.login h1 em{font-style:italic;color:var(--tea-deep);font-weight:400;margin-left:6px}
.login .field{margin-top:12px}
.login .btn{width:100%;margin-top:18px;padding:10px}
.err{color:var(--red);font-size:13px;margin-top:10px;min-height:1.2em}

/* 對話框 */
dialog{border:1px solid var(--line);background:var(--paper);color:var(--ink);padding:18px;width:min(520px,94vw);max-height:88vh;margin:auto}
dialog::backdrop{background:rgba(43,37,32,.35)}
dialog h3{font-size:18px;margin-bottom:10px}
.field{margin-bottom:10px}
.field label{display:block;font-size:12px;color:var(--muted);margin-bottom:2px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dlg-acts{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}
.help{white-space:pre-wrap;font-size:13px;background:#fff;border:1px solid var(--line);padding:10px;max-height:40vh;overflow:auto}
.viewer{padding:0;background:#000;width:auto;max-width:96vw}
.viewer img{display:block;max-width:96vw;max-height:86vh}

.foot{text-align:center;color:var(--muted);font-size:12px;margin-top:30px}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--ink);color:#fff;font-size:13px;padding:7px 16px;opacity:0;transition:.25s;pointer-events:none;z-index:50}
.toast.show{opacity:.92}

@media (min-width:700px){
  .stats.four{grid-template-columns:repeat(4,1fr)}
  .grid2{grid-template-columns:repeat(3,1fr)}
}