:root {
  --ink: #152a3b;
  --ink-soft: #4f6170;
  --paper: #f5f1e7;
  --card: #fffdf7;
  --line: #d9d1c0;
  --blue: #1e6174;
  --blue-wash: #dcecef;
  --green: #1f7458;
  --green-wash: #dfeee6;
  --amber: #b76a16;
  --amber-wash: #f8ead2;
  --red: #a84232;
  --red-wash: #f7e0db;
  --shadow: 0 18px 42px rgba(21, 42, 59, 0.12);
  font-family: "Avenir Next", "PingFang SC", "Hiragino Sans GB", "Noto Serif CJK SC", sans-serif;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--paper); }
button, input, textarea { font: inherit; }
button { cursor: pointer; }

button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(30, 97, 116, 0.3);
  outline-offset: 2px;
}

.shell {
  width: min(100%, 660px);
  min-height: 100vh;
  margin: 0 auto;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(21,42,59,.03) 1px, transparent 1px) 0 0 / 20px 20px,
    var(--paper);
}

.hero {
  position: relative;
  padding: calc(24px + env(safe-area-inset-top)) 22px 24px;
  color: #f8f4e9;
  background: var(--ink);
  overflow: hidden;
}

.hero::after {
  content: "核";
  position: absolute;
  right: -20px;
  bottom: -70px;
  color: rgba(255,255,255,.06);
  font-family: "Songti SC", "STSong", serif;
  font-size: 220px;
  line-height: 1;
}

.eyebrow { margin: 0 0 9px; color: #9dc6cd; font-size: 12px; letter-spacing: .16em; font-weight: 700; }
.hero h1 { position: relative; margin: 0; font-family: "Songti SC", "STSong", serif; font-size: 34px; letter-spacing: .05em; }
.hero-copy { position: relative; max-width: 340px; margin: 8px 0 0; color: #d7e4e1; font-size: 14px; line-height: 1.6; }
.hero-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 23px; }

.mode-pill, .status, .source-tag, .counter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.mode-pill { padding: 8px 10px; color: #d8e8e4; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); }
.mode-pill.demo { color: #f7ddb6; }
.status, .source-tag, .counter-pill { padding: 7px 9px; }
.status.pending { color: var(--amber); background: var(--amber-wash); }
.status.done { color: var(--green); background: var(--green-wash); }
.status.issue { color: var(--red); background: var(--red-wash); }
.source-tag { color: var(--blue); background: var(--blue-wash); }
.counter-pill { color: var(--ink-soft); background: #ebe5d8; }

.content { padding: 20px 16px calc(102px + env(safe-area-inset-bottom)); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 18px 4px 10px; }
.section-head h2 { margin: 0; font-size: 18px; letter-spacing: .02em; }
.section-head p { margin: 0; color: var(--ink-soft); font-size: 12px; }

.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.metric {
  min-height: 94px;
  padding: 12px;
  border: 1px solid var(--line);
  background: rgba(255,253,247,.7);
}
.metric strong { display: block; margin-top: 9px; font-family: "Songti SC", "STSong", serif; font-size: 24px; font-weight: 700; }
.metric span { color: var(--ink-soft); font-size: 12px; }

.month-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 4px 0; }
.month-select { border: 0; border-bottom: 1px solid var(--ink); padding: 6px 0; color: var(--ink); background: transparent; font-weight: 700; }

.task-list { display: grid; gap: 10px; }
.task-card {
  width: 100%;
  display: block;
  padding: 17px 16px 16px;
  text-align: left;
  color: var(--ink);
  border: 1px solid var(--line);
  border-left: 5px solid var(--blue);
  background: var(--card);
  box-shadow: 0 7px 16px rgba(21,42,59,.05);
  transition: transform .18s ease, box-shadow .18s ease;
}
.task-card:active { transform: translateY(1px); box-shadow: none; }
.task-card.issue { border-left-color: var(--amber); }
.task-top, .task-meta, .invoice-top, .scan-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.task-no { font-size: 16px; letter-spacing: .02em; font-weight: 800; }
.task-meta { margin-top: 13px; color: var(--ink-soft); font-size: 13px; }
.task-amount { color: var(--ink); font-family: "Songti SC", "STSong", serif; font-size: 24px; font-weight: 700; }
.task-foot { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }

.back { display: inline-flex; align-items: center; gap: 7px; padding: 0; color: #d7e4e1; border: 0; background: transparent; font-weight: 700; }
.back::before { content: "←"; font-size: 19px; }
.record-hero { padding-bottom: 22px; }
.record-hero h1 { margin-top: 17px; font-size: 30px; }
.record-hero .hero-copy { margin-top: 5px; }

.summary-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1px; border: 1px solid var(--line); background: var(--line); }
.summary-cell { min-height: 82px; padding: 12px; background: var(--card); }
.summary-cell.wide { grid-column: 1 / -1; min-height: auto; }
.summary-label { display: block; color: var(--ink-soft); font-size: 12px; }
.summary-value { display: block; margin-top: 8px; font-family: "Songti SC", "STSong", serif; font-size: 21px; font-weight: 700; }
.summary-value.small { font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.5; }

.amount-strip { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 13px; border: 1px solid #b9ced0; background: var(--blue-wash); }
.amount-strip > div { padding: 12px 10px; border-right: 1px solid #b9ced0; }
.amount-strip > div:last-child { border-right: 0; }
.amount-strip span { display: block; color: var(--ink-soft); font-size: 11px; }
.amount-strip strong { display: block; margin-top: 7px; font-family: "Songti SC", "STSong", serif; font-size: 17px; }

.invoice-list, .scan-list { display: grid; gap: 9px; }
.invoice-card, .scan-card { padding: 14px; border: 1px solid var(--line); background: var(--card); }
.invoice-title { max-width: 76%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 750; }
.invoice-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 12px; color: var(--ink-soft); font-size: 12px; }
.invoice-detail strong { display: block; margin-top: 4px; color: var(--ink); font-size: 14px; }
.scan-card.match { border-left: 4px solid var(--green); }
.scan-card.issue { border-left: 4px solid var(--red); }
.scan-card p { margin: 8px 0 0; color: var(--ink-soft); font-size: 12px; }

.action-panel { padding: 14px; border: 1px solid #b9ced0; background: #e9f2f1; }
.action-panel h3 { margin: 0; font-size: 16px; }
.action-panel p { margin: 6px 0 13px; color: var(--ink-soft); font-size: 13px; line-height: 1.5; }
.action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.button {
  min-height: 46px;
  padding: 11px 14px;
  color: white;
  border: 1px solid var(--ink);
  background: var(--ink);
  font-weight: 800;
  letter-spacing: .02em;
}
.button.secondary { color: var(--ink); background: transparent; }
.button.warn { color: #743324; border-color: #d4a79c; background: var(--red-wash); }
.button:disabled { cursor: not-allowed; opacity: .42; }
.button.full { width: 100%; }

.scanner {
  margin-top: 11px;
  padding: 12px;
  color: #eef7f3;
  background: var(--ink);
}
.scanner video { display: block; width: 100%; max-height: 290px; object-fit: cover; background: #0c1822; }
.scanner-guide { position: relative; height: 0; }
.scanner-guide::after { content: ""; position: absolute; left: 15%; top: -210px; width: 70%; height: 150px; border: 2px solid #b4d7cf; box-shadow: 0 0 0 999px rgba(0,0,0,.1); }
.scanner-status { margin: 10px 0 0; color: #d5e9e4; font-size: 13px; }

.manual-form { display: grid; gap: 10px; margin-top: 11px; padding: 13px; border: 1px dashed #9eb2ad; background: #f7fbf8; }
.manual-form h4 { margin: 0; font-size: 14px; }
.field { display: grid; gap: 5px; }
.field label { color: var(--ink-soft); font-size: 12px; font-weight: 700; }
.field input, .field textarea { width: 100%; padding: 11px; color: var(--ink); border: 1px solid #b7c3bd; border-radius: 0; background: white; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }

.issue-box { margin: 12px 0; padding: 13px 14px; color: #7c3427; border: 1px solid #e1b9ae; background: var(--red-wash); }
.issue-box strong { display: block; font-size: 13px; }
.issue-box ul { margin: 8px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.55; }

.bottom-actions { position: sticky; bottom: 0; display: grid; grid-template-columns: 1fr 1.25fr; gap: 8px; margin: 20px -16px -102px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgba(245,241,231,.96); backdrop-filter: blur(12px); }

.dialog-backdrop { position: fixed; z-index: 5; inset: 0; display: grid; align-items: end; background: rgba(21,42,59,.46); }
.dialog { padding: 22px 18px calc(20px + env(safe-area-inset-bottom)); background: var(--card); box-shadow: var(--shadow); }
.dialog h3 { margin: 0; font-family: "Songti SC", "STSong", serif; font-size: 24px; }
.dialog p { margin: 8px 0 14px; color: var(--ink-soft); font-size: 13px; line-height: 1.5; }
.dialog textarea { min-height: 104px; resize: vertical; }
.dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }

.empty { padding: 30px 18px; text-align: center; border: 1px dashed var(--line); color: var(--ink-soft); }
.loading { padding: 64px 24px; text-align: center; color: var(--ink-soft); }
#toast { position: fixed; z-index: 20; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom)); width: min(90vw, 460px); padding: 12px 14px; color: white; background: var(--ink); box-shadow: var(--shadow); transform: translate(-50%, 140%); transition: transform .25s ease; font-size: 13px; }
#toast.show { transform: translate(-50%, 0); }

@media (min-width: 661px) {
  body { padding: 18px; }
  .shell { min-height: calc(100vh - 36px); border: 1px solid var(--line); box-shadow: var(--shadow); }
}