:root { --ink:#132a31; --muted:#6a7c81; --line:#e0e8e9; --bg:#f5f7f8; --surface:#fff; --brand:#087a73; --brand-dark:#06645e; --brand-soft:#e7f5f2; --orange:#ad630a; --orange-soft:#fff4e4; --yellow:#916a00; --yellow-soft:#fff8d9; --red:#b42318; --red-soft:#fff2f0; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; min-width:320px; background:var(--bg); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; }
button,input,textarea,select { font:inherit; } button { cursor:pointer; }
.purchase-shell { width:min(720px,100%); margin:0 auto; padding:18px clamp(14px,3vw,24px) calc(28px + env(safe-area-inset-bottom)); }
.page-header { display:grid; grid-template-columns:40px minmax(0,1fr) auto; align-items:center; gap:10px; margin-bottom:16px; }.page-header p,.sheet-head p { margin:0 0 2px; color:var(--brand); font-size:10px; font-weight:850; letter-spacing:.12em; }.page-header h1 { margin:0; font-size:22px; line-height:1.2; letter-spacing:0; }.page-header > span { color:var(--muted); font-size:12px; white-space:nowrap; }
.icon-button { width:40px; height:40px; display:grid; place-items:center; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--ink); font-size:23px; line-height:1; }.icon-button:active { transform:scale(.96); }
.notice { position:fixed; z-index:50; left:50%; bottom:calc(24px + env(safe-area-inset-bottom)); max-width:calc(100% - 32px); transform:translateX(-50%); padding:10px 14px; border:1px solid #abd8d2; border-radius:999px; background:#123c42; color:#fff; box-shadow:0 10px 28px rgba(19,42,49,.22); font-size:13px; font-weight:750; text-align:center; }.notice.warning { border-color:#edd397; background:#7d570a; }.notice.error { border-color:#f2b7af; background:#a72a20; }.notice.success { border-color:#0d847b; background:#087a73; }
.access-panel { display:grid; gap:10px; padding:28px; border:1px solid var(--line); border-radius:14px; background:var(--surface); text-align:center; }.access-panel a { color:var(--brand); font-weight:800; text-decoration:none; }
.summary-strip { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:12px; }.summary-card { min-height:70px; display:grid; align-content:center; gap:5px; padding:10px 11px; border:1px solid var(--line); border-radius:13px; background:var(--surface); color:var(--muted); text-align:left; }.summary-card span { font-size:12px; font-weight:750; }.summary-card strong { color:var(--ink); font-size:24px; line-height:1; }.summary-card.pending strong { color:var(--orange); }.summary-card.partial strong { color:var(--yellow); }.summary-card.completed strong { color:var(--brand); }.summary-card.is-active { border-color:var(--brand); box-shadow:0 0 0 2px rgba(8,122,115,.1); }
.purchase-toolbar { display:flex; gap:9px; margin:0 0 14px; }.purchase-search { min-width:0; flex:1; display:flex; align-items:center; gap:7px; height:46px; padding:0 12px; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--muted); }.purchase-search span { font-size:21px; line-height:1; transform:rotate(-20deg); }.purchase-search input { width:100%; min-width:0; border:0; outline:0; color:var(--ink); background:transparent; font-size:14px; }.purchase-search input::placeholder { color:#96a4a8; }.add-purchase-button { flex:0 0 auto; height:46px; padding:0 13px; border:1px solid var(--brand); border-radius:12px; background:var(--brand); color:#fff; font-size:13px; font-weight:800; }.add-purchase-button span { font-size:18px; vertical-align:-1px; }
.purchase-tabs { display:grid; grid-template-columns:1fr 1fr; margin-bottom:10px; padding:3px; border-radius:11px; background:#eaf0f1; }.purchase-tabs button { min-height:37px; border:0; border-radius:8px; background:transparent; color:#6d7d81; font-size:13px; font-weight:800; }.purchase-tabs button small { color:inherit; font-size:11px; }.purchase-tabs button.is-active { background:#fff; color:var(--brand-dark); box-shadow:0 1px 3px rgba(19,42,49,.09); }
.list-panel { padding:2px 0 0; }.list-title { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:2px 2px 9px; }.list-title h2 { margin:0; font-size:15px; }.list-title span { color:var(--muted); font-size:12px; }.order-list { display:grid; gap:9px; }.order-card { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; padding:8px 8px 8px 14px; border:1px solid var(--line); border-radius:14px; background:var(--surface); color:var(--ink); box-shadow:0 2px 7px rgba(19,42,49,.025); }.order-card-main { min-width:0; display:grid; gap:8px; padding:5px 0; border:0; background:transparent; color:inherit; text-align:left; }.order-card-main:active { transform:scale(.995); }.order-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }.order-card-head strong { min-width:0; overflow:hidden; font-size:16px; line-height:1.3; text-overflow:ellipsis; white-space:nowrap; }.status { display:inline-flex; min-height:22px; align-items:center; justify-content:center; flex:0 0 auto; padding:3px 8px; border-radius:999px; font-size:11px; font-style:normal; font-weight:850; white-space:nowrap; }.status.pending { background:var(--orange-soft); color:var(--orange); }.status.partial { background:var(--yellow-soft); color:var(--yellow); }.status.completed { background:var(--brand-soft); color:var(--brand-dark); }.order-preview { overflow:hidden; margin:0; color:#3e5358; font-size:13px; line-height:1.45; text-overflow:ellipsis; white-space:nowrap; }.order-card-foot { display:flex; justify-content:space-between; gap:10px; color:var(--muted); font-size:11px; }.order-card-foot span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.order-card-foot b { flex:0 0 auto; color:var(--brand); font-size:12px; }.order-thumbnail { width:76px; height:76px; align-self:center; overflow:hidden; padding:0; border:1px solid #d5e4e2; border-radius:10px; background:#edf4f3; }.order-thumbnail img { display:block; width:100%; height:100%; object-fit:cover; }
.empty-state { padding:34px 12px; border:1px dashed #ccd8da; border-radius:13px; color:var(--muted); background:#fafcfc; font-size:13px; text-align:center; }.empty-state.compact { padding:13px 4px; border:0; background:transparent; text-align:left; }
.purchase-form-dialog,.purchase-dialog { width:min(620px,calc(100% - 24px)); max-height:min(820px,calc(100% - 24px)); padding:0; overflow:hidden; border:0; border-radius:16px; color:var(--ink); background:var(--surface); box-shadow:0 24px 70px rgba(19,42,49,.28); }.purchase-form-dialog::backdrop,.purchase-dialog::backdrop,.image-dialog::backdrop { background:rgba(15,29,32,.48); }.purchase-form { display:grid; max-height:min(820px,calc(100vh - 24px)); grid-template-rows:auto minmax(0,1fr) auto; }.sheet-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 16px; border-bottom:1px solid var(--line); background:#fff; }.sheet-head h2 { margin:0; font-size:18px; }.sheet-body { display:grid; gap:14px; overflow:auto; padding:16px; background:var(--bg); }.purchase-form label { display:grid; gap:6px; }.purchase-form label > span { color:var(--muted); font-size:12px; font-weight:800; }.purchase-form input,.purchase-form textarea,.tracking-entry textarea,.receipt-status,.receipt-note { width:100%; border:1px solid var(--line); border-radius:10px; outline:0; background:#fff; color:var(--ink); }.purchase-form input { min-height:50px; padding:11px 12px; }.purchase-form textarea,.tracking-entry textarea,.receipt-note { padding:11px 12px; resize:vertical; line-height:1.5; }.purchase-form textarea#purchaseContent { min-height:130px; }.purchase-form textarea#purchaseNotes { min-height:88px; }.purchase-form textarea#initialTrackingNumbers { min-height:62px; }.purchase-form input:focus,.purchase-form textarea:focus,.tracking-entry textarea:focus,.receipt-status:focus,.receipt-note:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(8,122,115,.1); }.purchase-screenshot-field { padding:10px 12px; border:1px dashed #9fcfc8; border-radius:11px; background:#f4fbfa; }.purchase-screenshot-field input { min-height:32px; padding:5px 0 0; border:0; background:transparent; }.file-preview { display:flex; align-items:center; gap:10px; min-width:0; padding:8px; border:1px solid #cfe2df; border-radius:11px; background:#f7fbfa; }.file-preview > button:first-child { min-width:0; flex:1; display:flex; align-items:center; gap:10px; padding:0; border:0; background:transparent; text-align:left; color:var(--ink); }.file-preview img { width:62px; height:62px; flex:0 0 62px; border-radius:8px; object-fit:cover; }.file-preview span { min-width:0; display:grid; gap:3px; }.file-preview small { overflow:hidden; color:var(--muted); font-size:11px; text-overflow:ellipsis; white-space:nowrap; }.text-button { min-height:auto; padding:3px 0; border:0; background:transparent; color:var(--brand); font-size:13px; font-weight:800; }.sheet-footer { position:sticky; bottom:0; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:#fff; }.primary-button,.secondary-button { min-height:44px; border-radius:10px; font-weight:850; }.primary-button { width:100%; border:1px solid var(--brand); background:var(--brand); color:#fff; }.secondary-button { border:1px solid #b8d7d2; background:#f5fbfa; color:var(--brand-dark); }.compact-button { min-height:34px; padding:6px 10px; font-size:12px; }
.dialog-content { max-height:calc(min(820px,100vh - 24px) - 72px); overflow:auto; padding:14px; background:var(--bg); }.detail-summary,.detail-section { margin-bottom:10px; padding:13px; border:1px solid var(--line); border-radius:13px; background:#fff; }.detail-summary { display:grid; grid-template-columns:1fr 1fr auto; gap:10px; align-items:center; }.detail-summary div { min-width:0; display:grid; gap:3px; }.detail-summary span,.purchase-text-block > span { color:var(--muted); font-size:11px; font-weight:800; }.detail-summary strong { overflow:hidden; font-size:14px; text-overflow:ellipsis; white-space:nowrap; }.detail-summary small { grid-column:1 / -1; color:var(--muted); font-size:11px; }.detail-section h3 { margin:0; font-size:15px; }.detail-section-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }.detail-section-head p { margin:3px 0 0; color:var(--muted); font-size:12px; }.purchase-source-section { display:grid; gap:12px; }.purchase-text-block { display:grid; gap:5px; }.purchase-content { margin:0; color:#31454a; font:13px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; white-space:pre-wrap; word-break:break-word; }.purchase-source-image { display:grid; gap:6px; padding:0; overflow:hidden; border:1px solid #d4e5e2; border-radius:10px; background:#f7fbfa; color:var(--muted); text-align:left; font-size:11px; font-weight:800; }.purchase-source-image img { display:block; width:100%; max-height:260px; background:#eef3f3; object-fit:contain; }.purchase-source-image span { padding:0 9px 8px; }
.logistics-list { display:grid; gap:8px; margin-top:11px; }.logistics-row { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:10px; border:1px solid #e3eaeb; border-radius:10px; background:#fbfcfc; }.logistics-main { min-width:0; display:grid; gap:3px; }.logistics-main strong { font-size:13px; }.tracking-number { min-width:0; max-width:100%; overflow:hidden; color:var(--ink); font-size:15px; font-weight:850; letter-spacing:.02em; text-overflow:ellipsis; white-space:nowrap; }.logistics-main small { color:var(--muted); font-size:11px; }.logistics-actions { display:flex; align-items:center; gap:10px; flex:0 0 auto; }.label-image-button { display:flex; align-items:center; gap:6px; width:max-content; max-width:100%; margin-top:3px; padding:4px; border:1px solid #d8e5e4; border-radius:7px; background:#fff; color:var(--brand); font-size:11px; font-weight:800; }.label-image-button img { width:28px; height:28px; border-radius:4px; object-fit:cover; }.tracking-entry { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; margin-top:10px; padding-top:10px; border-top:1px dashed #c6d5d6; }.tracking-entry textarea { min-height:44px; resize:none; }.tracking-entry button { min-width:76px; align-self:stretch; }.task-section { background:#f8fdfc; }.task-meta { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; color:#64767b; font-size:12px; }.task-meta strong { color:var(--ink); }.receipt-lines { display:grid; gap:7px; margin-top:10px; }.receipt-line { display:flex; align-items:flex-start; gap:9px; padding:9px; border:1px solid var(--line); border-radius:9px; font-size:13px; line-height:1.45; }.receipt-line input { width:19px; height:19px; flex:0 0 auto; margin:0; accent-color:var(--brand); }.receipt-line:has(input:checked) { border-color:#a9d8d2; background:#f1fbf8; }.receipt-note { min-height:68px; margin-top:9px; }.receipt-status { min-height:42px; padding:8px 10px; margin-top:9px; }.saved-note,.notes,.stock-note { margin:9px 0 0; color:#52666b; font-size:12px; line-height:1.55; white-space:pre-wrap; }.admin-danger { background:#fffafa; }.danger-button { border:1px solid #eaa8a2; padding:7px 10px; border-radius:8px; background:#fff7f6; color:var(--red); font-weight:850; }
.image-dialog { width:min(960px,calc(100% - 20px)); max-height:calc(100dvh - 20px); padding:0; overflow:hidden; border:0; border-radius:14px; background:#111; }.image-dialog-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; color:#fff; }.image-dialog .icon-button { border-color:#52666c; background:#26363b; color:#fff; }.image-dialog img { display:block; max-width:100%; max-height:calc(100dvh - 82px); margin:0 auto; object-fit:contain; }
@media (max-width:560px) { .purchase-shell { padding:14px 12px calc(22px + env(safe-area-inset-bottom)); }.page-header { margin-bottom:14px; }.page-header h1 { font-size:20px; }.summary-card { min-height:66px; padding:9px; }.summary-card strong { font-size:22px; }.purchase-toolbar { gap:8px; }.add-purchase-button { width:46px; padding:0; font-size:0; }.add-purchase-button span { font-size:23px; }.purchase-form-dialog,.purchase-dialog { width:100%; max-height:91dvh; margin:0; border-radius:16px 16px 0 0; align-self:end; }.purchase-form { max-height:91dvh; }.dialog-content { max-height:calc(91dvh - 72px); padding:12px; }.sheet-body { padding:13px; gap:12px; }.detail-summary { grid-template-columns:1fr 1fr; }.detail-summary .status { justify-self:start; }.purchase-source-image img { max-height:210px; }.order-card { gap:8px; padding:8px 8px 8px 12px; }.order-thumbnail { width:68px; height:68px; border-radius:9px; }.tracking-entry { grid-template-columns:1fr; }.tracking-entry button { min-height:38px; }.notice { bottom:calc(16px + env(safe-area-inset-bottom)); } }
.supplier-suggestions { display:grid; gap:7px; margin-top:-5px; }.supplier-suggestions > span { color:var(--muted); font-size:11px; font-weight:800; }.supplier-suggestions > div { display:flex; gap:7px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none; }.supplier-suggestions > div::-webkit-scrollbar { display:none; }.supplier-suggestions button { min-height:32px; flex:0 0 auto; padding:6px 10px; border:1px solid #cfe1de; border-radius:999px; background:#f5fbfa; color:var(--brand-dark); font-size:12px; font-weight:750; white-space:nowrap; }
.form-logistics { display:grid; gap:8px; }.form-logistics > .detail-section-head > span { color:var(--muted); font-size:12px; font-weight:800; }.form-logistics textarea { width:100%; min-height:62px; padding:11px 12px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); line-height:1.5; resize:vertical; outline:0; }.form-logistics textarea:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(8,122,115,.1); }
.tracking-query-button { min-height:30px; padding:5px 9px; border:1px solid var(--brand); border-radius:8px; background:var(--brand); color:#fff; font-size:12px; font-weight:850; }.tracking-workspace { display:grid; gap:10px; margin-top:11px; padding-top:11px; border-top:1px dashed #c6d5d6; }.tracking-methods { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }.tracking-methods button { min-height:37px; border:1px solid var(--line); border-radius:9px; background:#fff; color:#5d7378; font-size:12px; font-weight:800; white-space:nowrap; }.tracking-methods button.is-active { border-color:var(--brand); background:var(--brand-soft); color:var(--brand-dark); }.scan-entry { display:grid; gap:8px; }.scan-entry-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }.scan-entry-actions button { min-height:40px; padding-inline:8px; white-space:nowrap; }.scan-entry p { margin:0; color:var(--orange); font-size:12px; line-height:1.5; }.tracking-entry input { width:100%; min-height:44px; padding:10px 11px; border:1px solid var(--line); border-radius:10px; outline:0; }.tracking-entry input:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(8,122,115,.1); }.tracking-candidates { display:grid; gap:7px; padding:10px; border:1px solid #b8dcd7; border-radius:10px; background:#f2fbf9; }.tracking-candidates > span { color:#46716d; font-size:11px; font-weight:800; }.tracking-candidates > div { display:flex; align-items:center; justify-content:space-between; gap:10px; }.tracking-candidates strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; }.tracking-candidates .primary-button { width:auto; min-height:32px; flex:0 0 auto; padding:5px 9px; }.visually-hidden { position:fixed; width:1px; height:1px; opacity:0; pointer-events:none; }

.purchase-replenishment-source { display:block; max-width:100%; margin-top:4px; padding:0; border:0; background:transparent; color:var(--brand-dark) !important; cursor:pointer; font-size:11px; font-weight:850; text-align:left; }
.receipt-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; }
.structured-receipt-list { display:grid; gap:8px; margin-top:10px; }
.structured-receipt-row { display:grid; grid-template-columns:minmax(0,1fr) 92px auto; gap:8px; align-items:center; padding:10px; border:1px solid #dbe8e6; border-radius:10px; background:#fbfefd; }
.structured-receipt-row > div { display:grid; gap:3px; min-width:0; }
.structured-receipt-row strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; }
.structured-receipt-row small { color:var(--muted); font-size:11px; }
.structured-receipt-row label { display:grid; gap:3px; color:var(--muted); font-size:10px; font-weight:800; }
.structured-receipt-row input { width:100%; min-height:38px; padding:7px; border:1px solid var(--line); border-radius:8px; color:var(--ink); font-weight:850; text-align:right; }
.receipt-ready,.receipt-muted { display:inline-flex; justify-content:center; min-width:70px; padding:5px 7px; border-radius:999px; font-size:11px; font-style:normal; font-weight:850; text-align:center; }
.receipt-ready { background:var(--brand-soft); color:var(--brand-dark); }.receipt-muted { background:#f0f3f3; color:#708187; }
@media (max-width:560px) { .structured-receipt-row { grid-template-columns:minmax(0,1fr) 78px; }.structured-receipt-row > em { grid-column:1 / -1; justify-self:start; }.receipt-actions { justify-content:flex-start; }.receipt-actions .compact-button { font-size:11px; } }