/* 基礎 */
.cy-root { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.6 var(--font-sans); font-feature-settings: "palt"; font-variant-numeric: tabular-nums; letter-spacing: .02em; -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; }
/* :where 不增加優先權，元件的 class 一定蓋得過這裡 */
:where(.cy-root) *, :where(.cy-root) *::before, :where(.cy-root) *::after { box-sizing: border-box; }
:where(.cy-root) :where(h1, h2, h3, h4, p, ul, ol, table) { margin: 0; }
:where(.cy-root) :where(ul, ol) { padding: 0; list-style: none; }
:where(.cy-root) :where(h1, h2, h3) { text-wrap: balance; }
:where(.cy-root) p { text-wrap: pretty; }
:where(.cy-root) :where(button, input, select, textarea) { font: inherit; color: inherit; letter-spacing: inherit; }
:where(.cy-root) a { color: inherit; }
:where(.cy-root) a:hover { color: var(--shu); }
.cy-root :focus-visible, .cy-root .is-focus { outline: var(--stroke-focus) solid var(--focus); outline-offset: var(--focus-offset); }
.cy-root .cy-field :focus-visible, .cy-root .cy-digits input:focus-visible { outline: 0; }
.cy-root .cy-ledger--edit :focus-visible { outline-offset: -3px; }
:where(.cy-root) ::placeholder { color: var(--ink-muted); opacity: 1; }
.cy-figure { font-family: var(--font-sans); font-feature-settings: normal; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.cy-muted { color: var(--ink-muted); }
.cy-shu { color: var(--shu); }
.cy-label { display: block; font-size: 14px; line-height: 1.4; font-weight: 500; }
.cy-link { display: inline-flex; align-items: center; min-height: var(--control-h-sm); padding: 0; background: none; border: 0; color: inherit; text-decoration: underline; cursor: pointer; }
.cy-link:hover { color: var(--shu); }

/* 版面 */
.cy-page { width: 100%; max-width: var(--page-max); margin-inline: auto; padding: var(--space-5) var(--space-5) var(--space-10); display: flex; flex-direction: column; gap: var(--space-4); }
.cy-page--narrow { max-width: var(--page-narrow); }
.cy-stack { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.cy-stack--tight { gap: var(--space-1); }
.cy-narrow { width: 100%; max-width: var(--page-narrow); }
.cy-grow { flex: 1; min-width: 0; }
.cy-panel { padding: var(--space-3) var(--space-4); border: var(--stroke-hair) solid var(--rule); }
.cy-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.cy-row--end { justify-content: flex-end; }
.cy-row--between { justify-content: space-between; }
.cy-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, 520px); gap: var(--space-4); align-items: start; }
.cy-tablewrap { overflow-x: auto; }

/* 按鈕 */
.cy-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--control-h); padding: var(--space-2) var(--space-5); background: var(--paper); color: var(--ink); border: var(--stroke-rule) solid var(--rule); border-radius: var(--radius-none); font-weight: 700; text-decoration: none; cursor: pointer; }
.cy-btn:hover { background: var(--tint); color: var(--ink); }
.cy-btn--primary { background: var(--ink); color: var(--on-ink); }
.cy-btn--primary:hover { background: var(--ink-hover); color: var(--on-ink); }
.cy-btn--danger { border-color: var(--shu); color: var(--shu); }
.cy-btn--danger:hover { background: var(--shu); color: var(--on-shu); }
.cy-btn--text { background: transparent; border-color: transparent; text-decoration: underline; }
.cy-btn--text:hover { background: var(--tint); }
.cy-btn--sm { min-height: var(--control-h-sm); padding: var(--space-1) var(--space-3); font-size: 14px; }
.cy-btn--wide { width: 100%; }
.cy-btn:disabled, .cy-btn[aria-disabled="true"] { background: var(--tint); color: var(--ink-muted); border: var(--stroke-rule) dashed var(--ink-muted); cursor: not-allowed; }

/* 印章 */
.cy-stamp { flex: none; display: inline-grid; place-items: center; width: var(--stamp); height: var(--stamp); padding: 0; background: var(--paper); color: var(--shu); border: var(--stroke-stamp) solid var(--shu); border-radius: var(--radius-stamp); font: 900 22px/1 var(--font-sans); letter-spacing: 0; cursor: pointer; }
.cy-stamp:hover { background: var(--shu); color: var(--on-shu); }
.cy-stamp--sm { width: var(--stamp-sm); height: var(--stamp-sm); font-size: 18px; }
.cy-stamp.is-done { background: var(--shu); color: var(--on-shu); transform: rotate(-8deg); }
.cy-stamp.is-done:hover { background: var(--shu-deep); }
.cy-stamp:disabled { background: var(--paper); color: var(--ink-muted); border-color: var(--ink-muted); border-style: dashed; cursor: not-allowed; }

/* 分頁 */
.cy-apptabs { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 var(--space-5); padding: var(--space-3) var(--space-5) 0; background: var(--paper); border-bottom: var(--stroke-rule) solid var(--rule); }
.cy-apptabs__brand { padding-bottom: var(--space-2); font: 900 18px/1.4 var(--font-sans); text-decoration: none; white-space: nowrap; }
.cy-apptabs__meta { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding-bottom: var(--space-2); font-size: 14px; }
.cy-tabs { display: flex; flex-wrap: wrap; align-items: flex-end; }
.cy-tabs--line { border-bottom: var(--stroke-rule) solid var(--rule); }
.cy-tab { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-h); padding: 0 var(--space-4); margin-right: calc(var(--stroke-rule) * -1); background: var(--tint); color: var(--ink); border: var(--stroke-rule) solid var(--rule); border-bottom: 0; font-weight: 500; text-decoration: none; cursor: pointer; }
.cy-tab:hover { background: var(--paper); color: var(--ink); }
.cy-tab.is-on { position: relative; top: var(--stroke-rule); background: var(--paper); font-weight: 700; }
.cy-tab.is-off { color: var(--ink-muted); border-style: dashed; cursor: not-allowed; }
.cy-tab__no, .cy-tab__count { font: 600 14px/1 var(--font-sans); letter-spacing: 0; }

/* 欄位格 */
.cy-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: var(--stroke-hair) solid var(--rule); border-left: var(--stroke-hair) solid var(--rule); }
.cy-field { display: block; min-width: 0; padding: var(--space-1) var(--space-2); border-right: var(--stroke-hair) solid var(--rule); border-bottom: var(--stroke-hair) solid var(--rule); color: var(--ink-muted); font-size: 12px; line-height: 1.4; font-weight: 500; }
.cy-field input, .cy-field select, .cy-field textarea { display: block; width: 100%; min-width: 0; min-height: 30px; padding: 2px 0; background: transparent; color: var(--ink); border: 0; outline: 0; font: 600 16px/1.4 var(--font-sans); letter-spacing: 0; }
.cy-field--2 { grid-column: span 2; }
.cy-field--3 { grid-column: span 3; }
.cy-field--4 { grid-column: 1 / -1; }
.cy-field--big input { font-size: 24px; line-height: 1.2; }
.cy-field--prose input, .cy-field--prose select, .cy-field--prose textarea { font: 400 16px/1.5 var(--font-sans); letter-spacing: .02em; }
.cy-field--low { background: var(--shu-tint); }
.cy-field--error { background: var(--shu-tint); color: var(--shu); }
.cy-field:focus-within { position: relative; outline: var(--stroke-focus) solid var(--focus); outline-offset: -3px; }
.cy-field input:disabled, .cy-field select:disabled, .cy-field textarea:disabled { color: var(--ink-muted); }
.cy-field__help { display: block; padding-bottom: 2px; color: var(--shu); font-weight: 700; }
.cy-field__note { display: block; padding-bottom: 2px; color: var(--ink-muted); font-weight: 500; }

/* 五格數字 */
.cy-digits { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: var(--paper); border: var(--stroke-rule) solid var(--rule); }
.cy-digits input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: text; }
.cy-digits:focus-within { outline: var(--stroke-focus) solid var(--focus); outline-offset: var(--focus-offset); }
.cy-digit { display: grid; place-items: center; height: var(--digit-h); border-right: var(--stroke-hair) solid var(--rule); font: 600 28px/1 var(--font-sans); letter-spacing: 0; }
.cy-digit:last-child { border-right: 0; }
.cy-digit.is-filled::before { content: "•"; }
.cy-digits:focus-within .cy-digit.is-cursor { background: var(--tint); }

/* 二選一 */
.cy-choices { display: flex; flex-direction: column; gap: var(--space-2); }
.cy-choice { display: block; background: var(--paper); border: var(--stroke-hair) solid var(--rule); }
.cy-choice.is-on { outline: var(--stroke-hair) solid var(--rule); }
.cy-choice__head { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); cursor: pointer; }
.cy-choice__head input { flex: none; width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--ink); }
.cy-choice__head b { display: block; font-size: 17px; }
.cy-choice__head span span { display: block; color: var(--ink-muted); font-size: 14px; }
.cy-choice__body { display: flex; flex-direction: column; gap: var(--space-3); padding: 0 var(--space-4) var(--space-4) 48px; }

/* 上傳區 */
.cy-drop { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-10) var(--space-5); background: var(--paper); border: var(--stroke-rule) dashed var(--rule); text-align: center; }
.cy-drop.is-over { background: var(--tint); border-style: solid; }

/* 帳簿表格 */
.cy-ledger { width: 100%; border-collapse: collapse; }
.cy-ledger th { padding: var(--space-1) var(--space-3); background: var(--tint); border: var(--stroke-hair) solid var(--rule); font-size: 12px; line-height: 1.5; font-weight: 500; text-align: left; }
.cy-ledger td { padding: var(--space-2) var(--space-3); border: var(--stroke-hair) solid var(--rule); }
.cy-ledger .cy-num { font-family: var(--font-sans); font-feature-settings: normal; font-variant-numeric: tabular-nums; letter-spacing: 0; text-align: right; white-space: nowrap; }
.cy-ledger .is-total td { font-weight: 700; border-bottom: var(--stroke-double) double var(--rule); }
.cy-ledger .is-link:hover td { background: var(--tint); }
.cy-ledger--compact th, .cy-ledger--compact td { padding: var(--space-1) var(--space-2); font-size: 14px; }
.cy-ledger--edit td { padding: 0; }
.cy-ledger--edit input, .cy-ledger--edit select { display: block; width: 100%; min-width: 0; min-height: var(--control-h-sm); padding: var(--space-1) var(--space-2); background: transparent; border: 0; font: 400 14px/1.4 var(--font-sans); letter-spacing: 0; }
.cy-ledger--edit select { font-family: var(--font-sans); }
.cy-ledger--edit input:disabled, .cy-ledger--edit select:disabled { color: var(--ink-muted); }

/* 摘要格 */
.cy-tally { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--stroke-hair); background: var(--rule); border: var(--stroke-hair) solid var(--rule); }
.cy-tally__cell { padding: var(--space-2) var(--space-3); background: var(--paper); font-size: 14px; }
.cy-tally__cell b { display: block; font: 600 30px/1.1 var(--font-sans); letter-spacing: 0; }
.cy-tally__cell.is-alert b { color: var(--shu); }

/* 狀態標籤 */
.cy-chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0 var(--space-2); background: var(--paper); color: var(--ink); border: var(--stroke-rule) solid var(--rule); font-size: 13px; line-height: 22px; font-weight: 700; white-space: nowrap; }
.cy-chip--done { background: var(--ink); color: var(--on-ink); }
.cy-chip--flag { color: var(--shu); border-color: var(--shu); }
.cy-chip--block { background: var(--shu); color: var(--on-shu); border-color: var(--shu); }
.cy-chip--skip { color: var(--ink-muted); border: var(--stroke-rule) dashed var(--ink-muted); }
.cy-chip--wrap { white-space: normal; line-height: 1.5; padding-block: 1px; overflow-wrap: anywhere; }

/* 選擇格 */
.cy-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); padding: 0 var(--stroke-hair) var(--stroke-hair) 0; }
.cy-pick { display: block; min-width: 0; margin: 0 calc(var(--stroke-hair) * -1) calc(var(--stroke-hair) * -1) 0; padding: var(--space-2) var(--space-3); background: var(--paper); color: var(--ink); border: var(--stroke-hair) solid var(--rule); text-align: left; text-decoration: none; cursor: pointer; }
.cy-pick b { display: block; font-size: 18px; line-height: 1.4; }
.cy-pick small { display: block; font-size: 12px; color: var(--ink-muted); }
.cy-pick:hover { background: var(--tint); color: var(--ink); }
.cy-pick.is-on { background: var(--ink); color: var(--on-ink); }
.cy-pick.is-on small { color: var(--on-ink); }
.cy-pick.is-on:hover { background: var(--ink-hover); color: var(--on-ink); }
.cy-pick.is-off { background: var(--paper); color: var(--ink-muted); border-style: dashed; cursor: not-allowed; }

/* 檔案列 */
.cy-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-2); }
.cy-file { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--space-3); align-items: start; padding: var(--space-2); background: var(--paper); border: var(--stroke-hair) solid var(--rule); }
.cy-file__thumb { display: block; width: 64px; height: 84px; object-fit: cover; background: var(--tint); border: var(--stroke-hair) solid var(--rule-soft); }
.cy-file__name { font-weight: 700; overflow-wrap: anywhere; }
.cy-file__sub { color: var(--ink-muted); font-size: 14px; overflow-wrap: anywhere; }

/* 單據列 */
.cy-notes { display: flex; flex-direction: column; }
.cy-note { display: grid; grid-template-columns: 210px minmax(180px, 1.1fr) minmax(190px, 1.3fr) minmax(120px, .7fr) 120px; gap: var(--space-1) var(--space-4); align-items: center; margin-bottom: calc(var(--stroke-hair) * -1); padding: var(--space-2) var(--space-3); background: var(--paper); color: var(--ink); border: var(--stroke-hair) solid var(--rule); text-decoration: none; cursor: pointer; }
.cy-note--later { border-top-style: dashed; }
.cy-note:hover { background: var(--tint); color: var(--ink); }
.cy-note__crop { position: relative; grid-row: span 2; display: block; height: 78px; overflow: hidden; background: var(--tint); border: var(--stroke-hair) solid var(--rule-soft); }
.cy-note__crop img { position: absolute; top: 0; right: 0; width: 200%; max-width: none; }
.cy-note__receipt { font: 600 17px/1.3 var(--font-sans); letter-spacing: 0; text-decoration: none; }
.cy-note__sub { color: var(--ink-muted); font-size: 14px; overflow-wrap: anywhere; }
.cy-note__money { font: 600 16px/1.4 var(--font-sans); letter-spacing: 0; text-align: right; }
.cy-note__money ~ .cy-note__sub { text-align: right; }
.cy-note__acts { justify-self: end; }
.cy-note__reasons { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); }

/* 掃描件 */
.cy-scan { position: sticky; top: 72px; display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.cy-scan__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.cy-scan__stage { position: relative; height: calc(100vh - 210px); min-height: 360px; overflow: hidden; background: var(--tint); border: var(--stroke-hair) solid var(--rule); cursor: grab; touch-action: none; }
.cy-scan__stage.is-dragging { cursor: grabbing; }
.cy-scan__stage img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; user-select: none; -webkit-user-drag: none; }

/* 提示 */
.cy-notice { padding: var(--space-2) var(--space-3); background: var(--paper); color: var(--ink); border: var(--stroke-rule) solid var(--rule); }
.cy-notice--flag { background: var(--shu-tint); border-color: var(--shu); }
.cy-notice--block { background: var(--shu); color: var(--on-shu); border-color: var(--shu); font-weight: 700; }
.cy-notice__title { display: block; font-weight: 700; }
.cy-notice--flag .cy-notice__title { color: var(--shu); }
.cy-notice li { padding-top: var(--space-1); }

/* 通知 */
.cy-toast { position: fixed; left: 50%; bottom: var(--space-6); z-index: 50; transform: translateX(-50%); max-width: calc(100vw - 32px); padding: var(--space-2) var(--space-5); background: var(--ink); color: var(--on-ink); font-weight: 500; }
.cy-toast--error { background: var(--shu); color: var(--on-shu); }
.cy-toast--inline { position: static; display: inline-block; transform: none; }

/* 對話框 */
.cy-slip { width: min(500px, calc(100vw - 32px)); max-height: 85vh; overflow-y: auto; padding: 0; background: var(--paper); color: var(--ink); border: var(--stroke-rule) solid var(--rule); border-radius: var(--radius-none); }
.cy-slip::backdrop { background: var(--scrim); }
.cy-slip--wide { width: min(640px, calc(100vw - 32px)); }
.cy-slip__head { position: sticky; top: 0; z-index: 1; background: var(--paper); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 36px; padding: var(--space-1) var(--space-3); border-bottom: var(--stroke-rule) solid var(--rule); font-size: 14px; font-weight: 500; }
.cy-slip__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5) var(--space-6); }
.cy-slip__acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.cy-scrim { display: grid; place-items: center; padding: var(--space-4); background: var(--scrim); }

/* 操作列 */
.cy-actionbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-3); padding: var(--space-2) var(--space-5); background: var(--paper); border-top: var(--stroke-rule) solid var(--rule); }
.cy-actionbar__hint { flex: 1; min-width: 160px; color: var(--ink-muted); font-size: 14px; }
.cy-actionbar--static { position: static; }

/* 登入 */
.cy-login { display: grid; place-items: center; min-height: 100vh; padding: var(--space-4); background: var(--tint); }
.cy-login .cy-slip { width: min(420px, 100%); }

/* 空狀態 */
.cy-empty { padding: var(--space-10) var(--space-4); border: var(--stroke-hair) dashed var(--rule); color: var(--ink-muted); text-align: center; }

@media (prefers-reduced-motion: no-preference) {
  .cy-stamp { transition: transform 120ms ease-out, background-color 120ms ease-out, color 120ms ease-out; }
  .cy-stamp:active { transform: scale(.94); }
}

@media (max-width: 1040px) {
  .cy-detail { grid-template-columns: minmax(0, 1fr); }
  .cy-scan { position: static; }
  .cy-scan__stage { height: 46vh; }
  .cy-note { grid-template-columns: 210px minmax(0, 1fr) minmax(0, 1fr); }
  .cy-note__crop { grid-row: span 3; }
  .cy-note__acts { justify-self: start; }
}

@media (max-width: 640px) {
  .cy-apptabs { padding-inline: var(--space-4); }
  .cy-apptabs { gap: 0 var(--space-3); }
  .cy-apptabs__info { display: none; }
  .cy-apptabs > .cy-tabs { order: 3; width: 100%; }
  .cy-tabs { flex-wrap: nowrap; }
  .cy-tab__no { display: none; }
  .cy-tab { flex: 1 1 0; min-width: 0; justify-content: center; gap: var(--space-1); padding: 0 var(--space-1); font-size: 14px; text-align: center; }
  .cy-page { padding-inline: var(--space-4); padding-bottom: 72px; }
  .cy-fields, .cy-tally { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cy-field--3 { grid-column: 1 / -1; }
  .cy-note { grid-template-columns: minmax(0, 1fr); }
  .cy-note__crop { grid-row: auto; }
  .cy-note__reasons { grid-column: 1 / -1; }
  .cy-note__money { text-align: left; }
  .cy-note__money ~ .cy-note__sub { text-align: left; }
  .cy-choice__body { padding-left: var(--space-4); }
  .cy-actionbar { padding-inline: var(--space-4); }
  .cy-actionbar__hint { display: none; }
  .cy-actionbar .cy-btn { flex: 1; }
}

@media print {
  .cy-apptabs, .cy-actionbar, .cy-toast { position: static; }
  .cy-root { background: var(--paper); }
}