:root { color-scheme: light; font: 16px/1.5 system-ui, sans-serif; color: #1e2b28; background: #f5f7f8; }
body { margin: 0; }
main { --accent: #17664d; --wash: #eaf8ef; --edge: #9bc9af; max-width: 26rem; margin: auto; padding: 1rem; }
main[data-operation=issue] { --accent: #a83f0a; --wash: #fff3e9; --edge: #e8ac84; }
main[data-operation=count] { --accent: #175499; --wash: #edf5ff; --edge: #98bde5; }
h1 { font-size: 1.55rem; margin: 0; }
h2 { font-size: 1.12rem; margin: 0; }
[hidden] { display: none !important; }
.modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: .65rem 0; }
.modes button { padding-inline: .25rem; border-color: var(--tab); color: var(--tab); }
.modes [data-mode=receipt] { --tab: #17664d; }
.modes [data-mode=issue] { --tab: #a83f0a; }
.modes [data-mode=count] { --tab: #175499; }
.modes button[aria-pressed=true] { background: var(--tab); color: white; }
.viewfinder { position: relative; overflow: hidden; aspect-ratio: 1; max-height: 360px; background: #14201c; border-radius: .65rem; }
video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.aim { position: absolute; inset: 16%; border: 2px solid #fff; border-radius: .65rem; box-shadow: 0 0 0 2px #13291b80; pointer-events: none; }
.viewfinder.found .aim { border: 4px solid #38f39f; box-shadow: 0 0 0 3px #17664d; }
.buttons { display: flex; gap: .65rem; margin-top: 1rem; }
button { flex: 1; padding: .7rem; min-height: 48px; border: 1px solid var(--accent); border-radius: .5rem; color: var(--accent); background: white; font: inherit; font-weight: 650; }
#start, #save-entry, #material-form button { background: var(--accent); color: white; }
button:disabled { opacity: .48; }
section { background: white; border: 1px solid #d4e2dc; border-radius: .65rem; padding: 1rem; }
.feedback { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
#status { margin: .6rem 0; }
#sound-test { flex: none; border: 0; background: transparent; font-size: .85rem; padding: .35rem; }
#scan-result.found, #material-picker { background: var(--wash); border-color: var(--edge); }
.footnote { color: #456759; font-size: .85rem; margin: .55rem 0 0; }
.footnote:empty { display: none; }
#result-heading { font-size: 1.5rem; overflow-wrap: anywhere; }
#scan-result.found #result-heading { font-size: 2rem; line-height: 1.15; font-weight: 800; }
.brand { color: #456759; margin: .25rem 0; }
.slot { width: fit-content; font-size: 1.375rem; line-height: 1.25; font-weight: 750; margin: .5rem 0 .85rem; padding: .3rem .5rem; color: white; background: var(--accent); border-radius: .35rem; overflow-wrap: anywhere; }
.quantity-row { display: flex; gap: .5rem; margin-top: .35rem; }
input { box-sizing: border-box; min-height: 48px; padding: .5rem; border: 1px solid #8ba797; border-radius: .45rem; font: inherit; color: inherit; background: white; }
input { min-width: 0; flex: 1; }
#entry label, #quick-settings-form label { display: block; font-weight: 650; }
#occurred-at, #preset-values { display: block; width: 100%; max-width: 100%; margin-top: .3rem; }
.hint { display: block; font-size: .8rem; color: #456759; margin: .2rem 0 .8rem; }
.amount-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
main[data-operation=receipt] .amount-grid { grid-template-columns: minmax(0, 1fr); }
.amount-grid label { font-size: .94rem; }
.amount-grid .quantity-row { gap: .2rem; }
.amount-grid input { width: 100%; font-weight: 700; }
.amount-grid .amount-unit { padding-inline: .1rem; font-size: .85rem; }
.shortcut-controls { margin-top: .45rem; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.shortcut-controls .text-button { flex: 0 1 auto; }
.backup-field { border-top: 1px solid var(--edge); margin-top: .5rem; padding-top: .65rem; }
.backup-field .quantity-row { max-width: 10rem; }
.quick-amounts { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .3rem; }
.quick-amounts:empty { display: none; }
.quick-amounts button { flex: 0 1 auto; min-height: 44px; padding: .35rem .55rem; }
.comparison { margin: .55rem 0 0; background: white; border: 1px solid var(--edge); border-radius: .5rem; padding: .55rem .65rem; color: var(--accent); }
.comparison > div { display: flex; justify-content: space-between; gap: .5rem; }
.comparison dd { margin: 0; font-weight: 750; text-align: right; }
.comparison .shortage { color: #983b17; }
.amount-unit { align-self: center; font-weight: 700; padding-inline: .45rem; }
.text-button { min-height: 44px; padding: .3rem .15rem; border: 0; background: transparent; }
#quick-settings-form { margin-top: .45rem; }
#quick-settings-form button { margin-top: .4rem; }
#material-picker { margin-bottom: .65rem; }
#material-form label { display: block; margin-top: .55rem; font-weight: 650; }
#material-form input, #material-form select { display: block; width: 100%; box-sizing: border-box; margin: .2rem 0 .4rem; }
#material-form select { min-height: 48px; padding: .5rem; border: 1px solid #8ba797; border-radius: .45rem; font: inherit; color: inherit; background: white; }
#material-form button { width: 100%; margin-top: .3rem; }
#duplicate { background: #fff4da; border-radius: .45rem; padding: .65rem; }
#duplicate-message { font-weight: 650; margin: 0; }
#duplicate .buttons { margin-top: .5rem; }
details { margin-top: .65rem; }
summary { cursor: pointer; color: #456759; }
#draft-panel { margin-top: .65rem; }
#draft-list { list-style: none; padding: 0; margin: .4rem 0; max-height: 15rem; overflow-y: auto; }
#draft-list li { padding: .45rem 0; border-bottom: 1px solid #d4e2dc; overflow-wrap: anywhere; }
#draft-list li button { min-height: 44px; padding: .25rem .5rem; margin-top: .25rem; }
.draft-meta { display: block; color: #456759; font-size: .85rem; }
#new-batch { width: 100%; }
pre, #kind { white-space: pre-wrap; overflow-wrap: anywhere; margin-bottom: 0; }