.fulfillment-page { height: 100vh; overflow: hidden; } .fulfillment-scroll { height: calc(100vh - 48px - var(--status-bar-height, 0px)); } .fulfillment-content { padding-bottom: 44px; } .fulfillment-heading { margin: 4px 2px 12px; } .fulfillment-title, .fulfillment-subtitle, .scan-help, .state-title, .fulfillment-error text, .fulfillment-success text, .task-meta, .card-title, .gate-note, .gate-warning, .gate-success, .offline-note { display: block; } .fulfillment-title { color: #14263d; font-size: 21px; font-weight: 800; } .fulfillment-subtitle { margin-top: 4px; color: #708197; font-size: 11px; line-height: 17px; } .fulfillment-card { box-sizing: border-box; margin-bottom: 10px; padding: 14px; border: 1px solid #dce5f0; border-radius: 13px; background: #fff; box-shadow: 0 4px 15px rgba(32,67,111,.06); } .secondary-button, .primary-button, .depart-button, .link-button { box-sizing: border-box; width: 100%; min-height: 44px; margin: 10px 0 0; border-radius: 8px; font-size: 13px; line-height: 44px; } .secondary-button { border: 1px solid #9dc0f4; color: #135ee8; background: #f8fbff; } .primary-button { color: #fff; font-weight: 800; background: #135ee8; } .depart-button { color: #fff; font-weight: 800; background: #0a8754; } .link-button { color: #5d6f84; background: #f1f4f8; } .secondary-button[disabled], .primary-button[disabled], .depart-button[disabled], .link-button[disabled] { color: #9aa7b5; background: #e8edf3; opacity: 1; } .scan-help, .gate-note { margin-top: 8px; color: #718095; font-size: 10px; line-height: 16px; } .fulfillment-state { margin-bottom: 10px; padding: 28px 16px; border-radius: 12px; color: #748399; font-size: 11px; line-height: 18px; text-align: center; background: #fff; } .state-title { margin-bottom: 4px; color: #263b55; font-size: 14px; font-weight: 800; } .fulfillment-error, .fulfillment-success { margin-bottom: 10px; padding: 12px; border-radius: 10px; font-size: 10px; line-height: 17px; } .fulfillment-error { color: #a62323; background: #fff0f0; } .fulfillment-success { color: #087443; background: #e8f8ef; } .offline-note { margin-top: 7px; color: #8a5a00; } .list-toolbar, .task-head, .count-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .list-toolbar { margin: 16px 2px 10px; color: #233951; font-size: 13px; font-weight: 800; } .list-title, .list-count, .detail-kicker, .detail-title, .task-enter { display: block; } .list-count { margin-top: 2px; color: #8795a7; font-size: 10px; font-weight: 500; } .list-toolbar button { min-height: 32px; margin: 0; padding: 0 12px; border-radius: 7px; color: #135ee8; font-size: 11px; line-height: 32px; background: #e9f2ff; } .task-list, .item-list { display: flex; flex-direction: column; gap: 9px; } .task-card { box-sizing: border-box; width: 100%; min-height: 76px; margin: 0; padding: 13px; border: 1px solid #dce5f0; border-radius: 11px; text-align: left; background: #fff; } .task-card::after { border: 0; } .task-code-row { display: flex; min-width: 0; align-items: center; gap: 7px; } .business-code { color: #16304d; font-size: 15px; font-weight: 800; overflow-wrap: anywhere; } .recent-badge { flex-shrink: 0; padding: 3px 6px; border-radius: 99px; color: #8a570c; font-size: 9px; line-height: 14px; background: #fff1dd; } .status-badge { flex-shrink: 0; padding: 4px 7px; border-radius: 99px; color: #165fbf; font-size: 10px; background: #e6f0ff; } .task-meta { margin-top: 6px; color: #718095; font-size: 10px; line-height: 16px; } .task-enter { margin-top: 8px; color: #135ee8; font-size: 10px; font-weight: 700; text-align: right; } .detail-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 10px; padding: 10px 12px; border: 1px solid #bed4f6; border-radius: 11px; background: #eef5ff; } .detail-kicker { color: #6580a4; font-size: 9px; } .detail-title { margin-top: 2px; color: #153d74; font-size: 14px; font-weight: 800; } .detail-toolbar button { flex-shrink: 0; min-height: 34px; margin: 0; padding: 0 11px; border-radius: 8px; color: #135ee8; font-size: 10px; line-height: 34px; background: #fff; } .summary-card { display: block; } .metrics { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); margin-top: 12px; padding: 10px 0; border-radius: 9px; background: #f5f8fc; } .metrics view { display: flex; align-items: center; flex-direction: column; gap: 3px; color: #718095; font-size: 9px; } .metrics view + view { border-left: 1px solid #dce5f0; } .metric-value { color: #135ee8; font-size: 20px; font-weight: 800; } .metric-value.success { color: #087443; } .metric-value.warning { color: #a56800; } .item-card { margin: 0; } .item-card.selected { border: 2px solid #135ee8; background: #f8fbff; } .progress { height: 6px; margin-top: 10px; overflow: hidden; border-radius: 99px; background: #e4eaf1; } .progress view { height: 100%; border-radius: 99px; background: #20a464; } .card-title { color: #17314f; font-size: 13px; font-weight: 800; } .count-row { margin-top: 12px; color: #65768b; font-size: 10px; } .count-row input { box-sizing: border-box; width: 78px; height: 42px; padding: 0 8px; border: 2px solid #135ee8; border-radius: 8px; color: #17314f; font-size: 17px; text-align: center; background: #fff; } .gate-card textarea { box-sizing: border-box; width: 100%; height: 76px; margin-top: 10px; padding: 9px; border: 1px solid #d3dde9; border-radius: 8px; color: #27384d; font-size: 12px; background: #fbfcfe; } .gate-warning { margin-top: 8px; color: #a56800; font-size: 11px; line-height: 17px; } .gate-success { margin-top: 8px; color: #087443; font-size: 11px; line-height: 17px; }