:root { --bg: #f6efe6; --panel: #fff; --ink: #2b211b; --muted: #8a7b70; --line: #e5dbd0; --brand: #3b2a20; --accent: #b86b2b; --ok: #2f9e5f; --warn: #e67e22; --late: #d63031; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--bg); color: var(--ink); font-family: -apple-system, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
button, input, select { font: inherit; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.error { color: var(--late); min-height: 1.2em; }
.spacer { flex: 1; }

.login { min-height: 100dvh; display: grid; place-items: center; padding: 16px; background: var(--brand); }
.login form { background: var(--panel); padding: 32px; border-radius: 16px; width: min(360px, 100%); text-align: center; }
.login h1 { margin: 0; }
.login input { width: 100%; font-size: 1.5rem; text-align: center; padding: 12px; margin: 16px 0 12px; border: 1px solid var(--line); border-radius: 10px; }
.login button { width: 100%; min-height: 54px; border: 0; border-radius: 12px; background: var(--accent); color: #fff; font-size: 1.1rem; font-weight: 700; }

.top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; background: var(--brand); color: #fff; }
.top h1 { margin: 0; font-size: 1.2rem; }
.who { opacity: .85; }
.pill { padding: 4px 12px; border-radius: 20px; background: var(--late); color: #fff; font-weight: 700; }
.btn { min-height: 44px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); cursor: pointer; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.btn.ok { background: var(--ok); border-color: var(--ok); color: #fff; font-weight: 700; }
.btn.sm { min-height: 36px; padding: 4px 10px; font-size: .9rem; }
.btn.danger { color: var(--late); border-color: #f0c8c2; }

.totals { margin: 12px; padding: 10px 14px; background: var(--panel); border-radius: 14px; }
.totals h2, .col h2 { margin: 0 0 8px; font-size: 1rem; }
#totals { display: flex; flex-wrap: wrap; gap: 8px; }
#totals b { background: #f3e6d6; padding: 6px 12px; border-radius: 8px; font-weight: 400; }
#totals b i { font-style: normal; font-weight: 800; color: var(--accent); margin-left: 6px; }

.cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 0 12px 12px; align-items: start; }
@media (max-width: 1100px) { .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cols { grid-template-columns: 1fr; } }
.col { background: #efe4d7; border-radius: 14px; padding: 10px; min-height: 80px; }
.col h2 b { background: var(--brand); color: #fff; border-radius: 10px; padding: 0 8px; margin-left: 4px; }

.card { background: var(--panel); border-radius: 12px; padding: 10px 12px; margin: 8px 0; line-height: 1.55; border-left: 6px solid var(--accent); box-shadow: 0 2px 6px rgba(0,0,0,.06); }
.card.due { border-left-color: var(--late); }
.card-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.src { padding: 0 8px; border-radius: 8px; background: var(--brand); color: #fff; font-size: .85rem; }
.src.s-台中館 { background: var(--accent); }
.due-tag { color: var(--late); font-weight: 700; }
.card ul { margin: 6px 0; padding-left: 20px; }
.card li b { font-size: 1.05rem; }
.acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; align-items: center; }
.history { margin: 0 12px 40px; }
.history summary { cursor: pointer; color: var(--muted); padding: 8px 0; }
.history .card { opacity: .75; }

dialog { border: 0; border-radius: 16px; padding: 0; width: min(760px, calc(100vw - 20px)); max-height: calc(100dvh - 20px); }
dialog::backdrop { background: rgba(0,0,0,.45); }
.dlg { padding: 18px; }
.dlg h2 { margin: 0 0 6px; }
.field { margin: 10px 0; }
.field label { display: block; font-weight: 700; margin-bottom: 4px; }
.field textarea { width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: 1rem; line-height: 1.6; }
.field input { width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 10px; font-size: 1rem; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button { min-height: 40px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 20px; background: #fff; cursor: pointer; }
.seg button.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.table-wrap { overflow-x: auto; }
.beans { border-collapse: collapse; width: 100%; }
.beans th, .beans td { border-bottom: 1px solid var(--line); padding: 6px; text-align: left; }
.beans input { width: 80px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; font-size: 1rem; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 600px) { .row2 { grid-template-columns: 1fr; } }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: #222; color: #fff; padding: 10px 18px; border-radius: 10px; z-index: 50; max-width: 90vw; }
.bean-form { display: grid; gap: 6px; margin: 8px 0; }
.bean-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.bean-row > b { flex: 1 1 160px; font-weight: 600; }
.bean-packs { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.bean-packs label { display: inline-flex; align-items: center; gap: 4px; font-size: .9rem; color: var(--muted); }
.bean-packs input { width: 70px; padding: 6px 8px; font-size: 1rem; border: 1px solid var(--line); border-radius: 8px; }

/* 自動登入中:先不顯示登入框(見各頁 head 的 has-pin) */
html.has-pin #login { display: none !important; }
html.has-pin body::after { content: '載入中…'; position: fixed; inset: 0; pointer-events: none; display: grid; place-items: center; color: #9a948c; font-size: 1.1rem; }
.split-items{display:grid;gap:8px;margin:8px 0}.split-row{display:flex;align-items:center;gap:8px}.split-row span{flex:1}.split-row input{width:80px;font-size:1.1rem;padding:6px}

.green-table{width:100%;border-collapse:collapse;font-size:.95rem}.green-table th,.green-table td{padding:6px 4px;border-bottom:1px solid #e6dccf;text-align:left;vertical-align:middle}
.green-table input{width:64px;padding:5px;font-size:1rem}.green-table .bags label{display:inline-flex;align-items:center;gap:2px;margin-right:6px;white-space:nowrap}
.green-table td.kg b{font-size:1.15rem}.green-table tr.low td{background:#fff5f5}.green-table tr.low td.kg b{color:#c62828}
.green-new{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}.green-new input{padding:8px;font-size:1rem}.green-new #green-new-name{flex:1;min-width:180px}
.green-log{margin-top:8px}.green-log div{font-size:.9rem;padding:2px 0;border-bottom:1px dashed #eee}
#dlg-green .dlg{width:min(1100px,96vw);max-width:none}
.btn .count{display:inline-block;min-width:20px;margin-left:6px;padding:0 6px;border-radius:10px;background:#e74c3c;color:#fff;font-size:.8rem}
.install-btn { position: fixed; left: 12px; bottom: 12px; z-index: 50; padding: 10px 16px; border-radius: 99px; border: 0; background: #3b2a20; color: #fff; font-size: 1rem; font-weight: 700; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.install-btn[hidden] { display: none; }
.shop-store{margin:10px 0 4px;font-size:1.05rem}.shop-table{width:100%;border-collapse:collapse;font-size:.95rem}.shop-table td{padding:6px 4px;border-bottom:1px solid #e6dccf}
.shop-table td.q{text-align:right;white-space:nowrap}.shop-table td.q b{font-size:1.1rem}.shop-table tr.low td{background:#fff5f5}.shop-table tr.low td.q b{color:#c62828}.shop-table small{color:#8a7f72}.shop-table .neg{color:#c62828}
.shop-table td.shop-grp{font-weight:700;color:#6b5a48;background:#f6efe6;padding-top:8px}