/* 財務管理 — 設計規範（SPEC 視覺定案）
   字體定案：全站明體（Noto Serif TC），大數字用黑體細字 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@300;400;600;700&display=swap');
:root {
  --green: #3E4742;
  --green-deep: #343C38;
  --green-soft: #4A544E;
  --cream: #F1EBDF;
  --cream-dim: rgba(241, 235, 223, .55);
  --peach: #EFC796;
  --peach-deep: #E5B87E;
  --white: #FFFFFF;
  --ink: #3A3F3C;
  --ink-soft: #8D948F;
  --danger: #D96C57;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--green);
  color: var(--cream);
  font-family: "Noto Serif TC", Georgia, "Songti TC", serif;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
}
.wrap { max-width: 430px; margin: 0 auto; padding: max(1.1rem, env(safe-area-inset-top)) 1.1rem calc(2rem + env(safe-area-inset-bottom)); }

.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.1rem; }
.topbar .title { font-size: 1rem; font-weight: 600; letter-spacing: .05em; }
.dot {
  width: 2rem; height: 2rem; border-radius: 999px; background: var(--green-soft);
  display: flex; align-items: center; justify-content: center; font-size: .85rem;
  color: var(--cream); border: none; cursor: pointer; text-decoration: none;
}

.cap { font-size: .76rem; color: var(--cream-dim); letter-spacing: .06em; }
.big-num {
  font-size: 2.4rem; font-weight: 300; color: var(--white); letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  font-family: "Avenir Next", Avenir, "PingFang TC", system-ui, sans-serif; /* 大數字保留黑體細字（用戶定案） */
}

/* 白卡（純白為主、邊緣極淡漸層 — 定案配方） */
.wcard {
  background: radial-gradient(135% 135% at 50% 30%, #FFFFFF 0%, #FFFFFF 68%, rgba(255,255,255,.74) 100%);
  color: var(--ink); border-radius: 20px;
  border: 1px solid rgba(255, 253, 248, .45);
  box-shadow: 0 8px 18px rgba(20, 26, 23, .15), inset 0 1px 1px rgba(255, 255, 255, .8);
  padding: 1rem 1.15rem; margin-top: .9rem;
}

.peach-card {
  background: var(--peach); color: #4A3A22; border-radius: 20px;
  padding: .95rem 1.15rem; margin-top: .9rem;
}

.btn {
  display: block; width: 100%; text-align: center; background: var(--peach); color: #4A3A22;
  border-radius: 999px; padding: .85rem; font-weight: 700; font-size: .95rem;
  margin-top: 1rem; border: none; cursor: pointer; font-family: inherit;
}
.btn:disabled { opacity: .45; }
.btn.ghost {
  background: transparent; border: 1px solid var(--green-soft); color: var(--cream); font-weight: 500;
}
.btn.danger-text { background: transparent; border: none; color: var(--cream-dim); font-weight: 500; font-size: .85rem; }

.hidden { display: none !important; }

/* 上傳頁 */
.thumbs { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }
.thumbs img {
  width: 84px; height: 84px; object-fit: cover; border-radius: 14px;
  border: 1px solid rgba(255,255,255,.3);
}
.thumbs .add {
  width: 84px; height: 84px; border-radius: 14px; border: 1.5px dashed var(--green-soft);
  display: flex; align-items: center; justify-content: center; font-size: 1.6rem;
  color: var(--cream-dim); background: none; cursor: pointer;
}

.spin {
  width: 2.2rem; height: 2.2rem; margin: 2.2rem auto .8rem; border-radius: 999px;
  border: 3px solid var(--green-soft); border-top-color: var(--peach);
  animation: sp 1s linear infinite;
}
@keyframes sp { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 3s; } }

/* 辨識結果列 */
.tx-row { display: flex; align-items: center; gap: .6rem; padding: .55rem 0; border-top: 1px solid #F0EDE6; }
.tx-row:first-child { border-top: none; }
.tx-row .info { flex: 1; min-width: 0; }
.tx-row .m { font-size: .88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-row .d { font-size: .72rem; color: var(--ink-soft); }
.tx-row .amt { font-size: .95rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tx-row select {
  font-family: inherit; font-size: .78rem; color: var(--ink);
  border: 1px solid #E4DFD5; border-radius: 999px; padding: .2rem .5rem; background: #FAF7F1;
  max-width: 7.5rem;
}
.tx-row.review select { border-color: var(--peach-deep); background: #FBF0DF; }
.tx-row .del { border: none; background: none; color: var(--ink-soft); font-size: 1rem; cursor: pointer; padding: .2rem; }
.tx-row.dup { opacity: .45; }
.tx-row.dup .m::after { content: " · 已存在，略過"; color: var(--danger); font-weight: 400; font-size: .72rem; }

.banner { border-radius: 14px; padding: .7rem 1rem; margin-top: .9rem; font-size: .85rem; }
.banner.err { background: rgba(217, 108, 87, .18); color: #F4C7BD; }
.banner.ok { background: rgba(239, 199, 150, .16); color: var(--peach); }

.login-box { text-align: center; padding-top: 22vh; }
.login-box h1 { font-weight: 500; font-size: 1.3rem; }