:root { --green:#173f2d; --green2:#246344; --mint:#dff3e7; --paper:#f5f3ec; --line:#dfe5df; --text:#17231b; --muted:#67746c; --danger:#a0443c; --shadow:0 14px 40px rgba(27,54,37,.09); }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
html { background:var(--paper); }
body { margin:0; color:var(--text); background:linear-gradient(180deg,#e8f1ea 0,#f5f3ec 260px); font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
.mobile-head { position:sticky; top:0; z-index:20; display:grid; grid-template-columns:auto 1fr auto; gap:11px; align-items:center; min-height:68px; padding:10px max(16px,env(safe-area-inset-left)); color:white; background:rgba(18,58,41,.96); backdrop-filter:blur(16px); box-shadow:0 8px 24px rgba(20,52,37,.16); }
.brand-mark { display:grid; width:42px; height:42px; place-items:center; border-radius:13px; color:var(--green); background:#f1d485; font-size:24px; font-weight:900; }
.mobile-head span { color:#9ed1b2; font-size:9px; letter-spacing:.16em; }
.mobile-head h1 { margin:2px 0 0; font-size:18px; }
.mobile-head a { padding:7px 9px; border:1px solid rgba(255,255,255,.22); border-radius:9px; color:#d9eee2; font-size:11px; text-decoration:none; }
main { width:min(720px,100%); margin:0 auto; padding:18px 14px calc(112px + env(safe-area-inset-bottom)); }
.wechat-exit-notice { display:grid; gap:11px; margin-bottom:14px; padding:15px 16px; border:1px solid #efc39e; border-radius:16px; color:#813b1e; background:#fff2e8; box-shadow:var(--shadow); }
.wechat-exit-notice b { font-size:13px; }.wechat-exit-notice p { margin:5px 0 0; font-size:10px; line-height:1.6; }
.wechat-exit-notice button { min-height:42px; border:0; border-radius:10px; color:#fff; background:#164f35; font-size:11px; font-weight:900; }
.intro-card { display:flex; justify-content:space-between; gap:12px; align-items:center; min-height:52px; padding:10px 13px 10px 15px; border-radius:14px; color:white; background:radial-gradient(circle at 84% 18%,rgba(137,221,171,.23),transparent 31%),linear-gradient(135deg,#173f2d,#0e271c); box-shadow:0 8px 22px rgba(27,54,37,.08); }
.intro-card h2 { margin:0; font-size:16px; line-height:1.2; }
.intro-badge { flex:0 0 auto; padding:6px 9px; border-radius:999px; color:#173f2d; background:#a8dfbc; font-size:10px; font-weight:900; }
.progress-strip { display:grid; grid-template-columns:auto 1fr auto 1fr auto 1fr auto; align-items:center; gap:7px; margin:17px 4px; color:#7d8981; font-size:10px; font-weight:800; }
.progress-strip span.is-active { color:var(--green); }
.progress-strip i { height:1px; background:#cfd8d1; }
.mobile-card { margin-top:14px; padding:18px; border:1px solid rgba(213,222,215,.8); border-radius:18px; background:rgba(255,255,255,.9); box-shadow:var(--shadow); }
.card-title { display:flex; gap:11px; align-items:center; margin-bottom:17px; }
.card-title b { display:grid; width:35px; height:35px; place-items:center; border-radius:50%; color:var(--green); background:var(--mint); font-size:12px; }
.card-title h3 { margin:0 0 3px; font-size:17px; }
.card-title p { margin:0; color:var(--muted); font-size:11px; }
.field { display:grid; gap:7px; margin-top:13px; }
.field:first-of-type { margin-top:0; }
.field label,.rating-grid label { color:#39483f; font-size:12px; font-weight:800; }
.field em { color:#c34d43; font-style:normal; }
input,select,textarea { width:100%; min-height:46px; padding:11px 12px; border:1px solid #d4ddd6; border-radius:11px; outline:0; color:var(--text); background:#fbfcfa; }
textarea { resize:vertical; line-height:1.55; }
input:focus,select:focus,textarea:focus { border-color:#5fa57c; box-shadow:0 0 0 3px #e2f1e8; }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.switch-row { display:flex; gap:11px; align-items:flex-start; margin-top:15px; padding:13px; border-radius:12px; background:#f2f6f3; }
.switch-row input { width:20px; min-height:auto; height:20px; margin:1px 0 0; accent-color:var(--green2); }
.switch-row span { display:grid; gap:3px; }
.switch-row strong { font-size:13px; }
.switch-row small { color:var(--muted); font-size:10px; line-height:1.5; }
.location-button { display:flex; width:100%; gap:13px; align-items:center; padding:15px; border:0; border-radius:14px; color:white; background:linear-gradient(135deg,#246344,#173f2d); text-align:left; }
.location-button > span { display:grid; width:42px; height:42px; place-items:center; border-radius:50%; background:rgba(255,255,255,.12); font-size:23px; }
.location-button div { display:grid; gap:3px; }
.location-button small { color:#bee0ca; font-size:10px; }
.location-button:disabled { opacity:.65; }
.location-result { margin-top:10px; padding:11px 12px; border-radius:10px; color:#7a6540; background:#fff3dc; font-size:11px; line-height:1.55; }
.location-result.is-ok { color:#1f6440; background:#e5f3e9; }
.location-result.is-error { color:#92463f; background:#f8e8e6; }
.camera-box { display:grid; min-height:155px; place-items:center; align-content:center; gap:5px; border:2px dashed #95b9a3; border-radius:15px; color:var(--green); background:#f1f8f3; text-align:center; cursor:pointer; }
.camera-box span { display:grid; width:45px; height:45px; place-items:center; border-radius:50%; color:white; background:var(--green2); font-size:28px; }
.camera-box small { color:var(--muted); font-size:10px; }
.photo-preview { overflow:hidden; border:1px solid var(--line); border-radius:14px; background:#edf4ef; }
.photo-preview img { display:block; width:100%; max-height:470px; object-fit:contain; background:#15241b; }
.photo-preview div { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:11px 13px; }
.photo-preview strong { color:#1f6942; font-size:12px; }
.photo-preview button { border:0; color:var(--green); background:transparent; font-size:12px; font-weight:800; }
.photo-guide { display:grid; gap:6px; margin:13px 0 0; padding-left:19px; color:var(--muted); font-size:11px; line-height:1.45; }
.rating-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.rating-grid label { display:grid; gap:7px; }
.rating-grid select { min-height:43px; padding:8px; font-size:12px; }
.submit-bar { position:fixed; z-index:18; right:0; bottom:0; left:0; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px max(16px,calc((100vw - 690px)/2)) calc(12px + env(safe-area-inset-bottom)); border-top:1px solid #d7e0d9; background:rgba(255,255,255,.96); backdrop-filter:blur(14px); box-shadow:0 -12px 35px rgba(24,48,33,.1); }
.submit-bar div { display:grid; gap:2px; }
.submit-bar small { color:#8a6531; font-size:10px; }
.submit-bar strong { font-size:12px; }
.submit-bar button,.success-card button { min-width:130px; min-height:47px; border:0; border-radius:12px; color:white; background:var(--green); font-weight:900; }
.submit-bar button:disabled { opacity:.55; }
.success-card { margin-top:30px; padding:35px 22px; border-radius:20px; background:white; box-shadow:var(--shadow); text-align:center; }
.success-icon { display:grid; width:64px; height:64px; margin:0 auto 14px; place-items:center; border-radius:50%; color:white; background:#3d9a61; font-size:32px; }
.success-card h2 { margin:0 0 8px; }
.success-card p { margin:0 0 20px; color:var(--muted); font-size:12px; line-height:1.6; }
.mobile-toast { position:fixed; z-index:50; right:16px; bottom:92px; left:16px; padding:13px 15px; border-radius:12px; color:white; background:#162e21; box-shadow:var(--shadow); opacity:0; transform:translateY(10px); pointer-events:none; transition:.2s; text-align:center; font-size:12px; }
.mobile-toast.show { opacity:1; transform:none; }
.scan-guide { text-align:center; padding:30px 22px; }
.scan-mode-switch { display:grid; grid-template-columns:1fr 1fr; gap:5px; max-width:360px; margin:0 auto 20px; padding:4px; border-radius:13px; background:#edf2ee; }
.scan-mode-switch button { min-height:39px; border:0; border-radius:10px; color:#66756b; background:transparent; font-size:11px; font-weight:900; }
.scan-mode-switch button.is-active { color:white; background:var(--green2); box-shadow:0 5px 14px rgba(27,80,52,.18); }
.scan-icon { display:grid; width:64px; height:64px; margin:0 auto 12px; place-items:center; border:1px solid #a8cbb4; border-radius:20px; color:var(--green2); background:#e9f5ed; font-size:42px; line-height:1; }
.scan-guide h3 { margin:0 0 8px; font-size:19px; }
.scan-guide p { margin:0 auto 16px; max-width:440px; color:var(--muted); font-size:12px; line-height:1.65; }
.scan-guide small { display:block; margin-top:14px; color:#87958b; font-size:10px; line-height:1.5; }
.scan-launch-card { padding:12px; }
.scan-mode-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.scan-mode-actions button { display:flex; min-height:60px; align-items:center; justify-content:center; gap:9px; border:1px solid #cbd9d0; border-radius:14px; color:#28563d; background:#f4f8f5; box-shadow:0 5px 14px rgba(23,63,45,.04); }
.scan-mode-actions button span { font-size:22px; line-height:1; }
.scan-mode-actions button b { font-size:14px; }
.scan-mode-actions button.is-active { border-color:#246344; color:#fff; background:linear-gradient(135deg,#2d7d53,#173f2d); box-shadow:0 9px 22px rgba(23,63,45,.18); }
.scan-launch-card .batch-panel { max-width:none; margin-top:12px; }
.compact-scan-message { width:min(692px,calc(100% - 28px)); margin:14px auto 0; }
.scan-input { display:grid; grid-template-columns:1fr auto; gap:8px; max-width:500px; margin:0 auto 12px; text-align:left; }
.scan-input input { min-width:0; }
.scan-input button { padding:0 15px; border:0; border-radius:11px; color:white; background:var(--green2); font-size:12px; font-weight:900; }
.demo-link { display:inline-flex; min-height:42px; align-items:center; padding:0 16px; border-radius:11px; color:white; background:var(--green); font-size:12px; font-weight:800; text-decoration:none; }
.order-card { padding:17px 18px; }
.quick-assign-card { padding:16px 18px; }
.quick-driver { display:flex; gap:12px; align-items:center; }
.driver-avatar { display:grid; width:44px; height:44px; flex:0 0 auto; place-items:center; border-radius:14px; color:#fff; background:var(--green2); font-size:16px; font-weight:900; }
.quick-driver small { color:#6b8976; font-size:10px; font-weight:800; }
.quick-driver h3 { margin:3px 0; font-size:17px; }
.quick-driver p { margin:0; color:var(--muted); font-size:10px; line-height:1.5; }
.quick-assign-card .primary-button { margin-top:14px; }
.text-button { width:100%; min-height:38px; margin-top:7px; border:0; color:#547060; background:transparent; font-size:11px; font-weight:800; }
.order-top { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.eyebrow { color:#6b8976; font-size:10px; font-weight:900; letter-spacing:.1em; }
.order-top h3 { margin:5px 0 0; font-size:21px; letter-spacing:.02em; }
.status-pill { display:inline-flex; align-items:center; min-height:28px; padding:0 10px; border-radius:999px; font-size:11px; font-weight:900; white-space:nowrap; }
.status-ready { color:#815c21; background:#fff0ce; }.status-moving { color:#155e3c; background:#dff3e7; }.status-done { color:#5c6570; background:#edf0f2; }
.order-grid,.readonly-summary { display:grid; grid-template-columns:1fr 1fr; gap:13px; margin-top:17px; }
.order-grid > div,.readonly-summary > div { display:grid; gap:4px; }.order-grid small,.readonly-summary small { color:#89958d; font-size:10px; }.order-grid strong,.readonly-summary strong { color:#29372f; font-size:12px; line-height:1.5; }.wide { grid-column:1 / -1; }
.primary-button { width:100%; min-height:48px; margin-top:16px; border:0; border-radius:12px; color:white; background:linear-gradient(135deg,#246344,#173f2d); font-weight:900; }.primary-button:disabled { opacity:.58; }
.inline-message { margin-top:10px; padding:10px; border-radius:9px; color:#28613f; background:#e7f4eb; font-size:11px; white-space:pre-line; }
.scan-lookup-message { color:#8a3a24; background:#fff0e8; border:1px solid #f3c9b7; line-height:1.55; text-align:left; }
.batch-panel { max-width:500px; margin:16px auto 0; padding:15px; border:1px solid #dbe6de; border-radius:15px; background:#f8fbf8; text-align:left; }
.batch-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.batch-head > div { display:flex; align-items:baseline; gap:7px; }.batch-head small { margin:0; color:#6d7c72; }.batch-head strong { color:var(--green); font-size:18px; }
.batch-head button { min-height:32px; padding:0 11px; border:1px solid #d3ded6; border-radius:9px; color:#79675b; background:#fff; font-size:10px; font-weight:800; }
.batch-queue { display:grid; gap:7px; max-height:230px; margin-top:12px; overflow:auto; }
.batch-queue > p { margin:0; padding:17px 10px; border:1px dashed #d4ded7; border-radius:10px; color:#87938b; font-size:10px; text-align:center; }
.batch-queue-item { display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:9px; align-items:center; padding:9px 10px; border-radius:10px; background:white; }
.batch-queue-item > span { display:grid; width:25px; height:25px; place-items:center; border-radius:8px; color:#246344; background:#e4f2e8; font-size:9px; font-weight:900; }
.batch-queue-item code { overflow:hidden; color:#34453a; font-family:inherit; font-size:11px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.batch-queue-item button { width:28px; height:28px; border:0; border-radius:8px; color:#9a554e; background:#fff0ee; font-size:15px; }
.batch-process-button { margin-top:13px; text-align:center; }
.batch-progress { margin-top:14px; padding:13px; border-radius:12px; background:#eaf4ed; }
.batch-progress > div { display:flex; justify-content:space-between; gap:10px; align-items:center; }.batch-progress strong { font-size:12px; }.batch-progress span { color:#36714c; font-size:11px; font-weight:900; }
.batch-progress i { display:block; overflow:hidden; height:7px; margin-top:10px; border-radius:999px; background:#cfdfd3; }.batch-progress i b { display:block; width:0; height:100%; border-radius:inherit; background:#2e8755; transition:width .25s; }
.batch-progress p { margin:9px 0 0; color:#5f7166; font-size:10px; }
.batch-results { display:grid; gap:7px; margin-top:12px; }
.batch-result-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }.batch-result-summary div { padding:9px 6px; border-radius:9px; background:#fff; text-align:center; }.batch-result-summary b { display:block; font-size:15px; }.batch-result-summary small { margin:2px 0 0; font-size:9px; }
.batch-result-item { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px 9px; padding:10px; border-radius:10px; background:white; }.batch-result-item strong { font-size:11px; }.batch-result-item span { padding:3px 6px; border-radius:999px; font-size:9px; font-weight:900; }.batch-result-item p { grid-column:1/-1; margin:0; color:#69766e; font-size:9px; line-height:1.45; }
.batch-result-item.is-success span { color:#216540; background:#e1f2e6; }.batch-result-item.is-skipped span { color:#7b641d; background:#fff2cf; }.batch-result-item.is-failed span { color:#963f38; background:#fde7e4; }
.delivery-state-card { display:flex; gap:12px; align-items:center; padding:15px 17px; }.state-check { display:grid; width:37px; height:37px; flex:0 0 auto; place-items:center; border-radius:50%; color:white; background:#3e9861; font-weight:900; }.delivery-state-card h3 { margin:0 0 4px; font-size:14px; }.delivery-state-card p { margin:0; color:var(--muted); font-size:11px; line-height:1.5; }.state-actions { display:flex; margin-left:auto; gap:7px; align-items:center; }.secondary-button { min-height:34px; padding:8px 9px; border:1px solid #bdd5c4; border-radius:9px; color:var(--green2); background:#fff; font-size:10px; font-weight:800; text-decoration:none; white-space:nowrap; }
@media (max-width:430px) { .delivery-state-card { align-items:flex-start; flex-wrap:wrap; }.state-actions { width:100%; margin-left:49px; }.order-grid,.readonly-summary { gap:11px; }.scan-input { grid-template-columns:1fr; }.scan-input button { min-height:44px; } }
@media (max-width:560px) { .two-col,.rating-grid { grid-template-columns:1fr; } .rating-grid { gap:12px; } .intro-card { padding:18px; } .intro-card h2 { font-size:20px; } }

.head-button { padding:7px 10px; border:1px solid rgba(255,255,255,.22); border-radius:9px; color:#d9eee2; background:transparent; font-size:11px; }
.login-card { padding:20px; }
.first-setup { margin-top:14px; border:1px solid #d9e3db; border-radius:12px; background:#f7faf7; }
.first-setup summary { padding:12px 13px; color:var(--green); font-size:12px; font-weight:900; cursor:pointer; }
.first-setup > .two-col { padding:0 13px 10px; }
.first-setup > p { margin:0; padding:0 13px 13px; color:var(--muted); font-size:10px; line-height:1.55; }
.identity-card { padding:17px 18px; }
.identity-main { display:flex; align-items:center; gap:12px; }
.identity-main > div:nth-child(2) { min-width:0; flex:1; }
.identity-main small { color:#6b8976; font-size:10px; font-weight:800; }
.identity-main h3 { margin:3px 0 2px; font-size:18px; }
.identity-main p { margin:0; overflow:hidden; color:var(--muted); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.route-chip { flex:0 0 auto; padding:7px 10px; border-radius:999px; color:#155e3c; background:#dff3e7; font-size:11px; font-weight:900; }
.stats-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:16px; }
.stats-grid > div { display:grid; gap:4px; padding:12px 9px; border-radius:12px; background:#f2f6f3; text-align:center; }
.stats-grid small { color:var(--muted); font-size:9px; }
.stats-grid strong { color:var(--green); font-size:14px; }
.performance-rule-tip { margin:8px 2px 0; color:#667269; font-size:9px; line-height:1.55; }
.performance-ranking { margin-top:10px; padding:11px 12px; border:1px solid #dfe7e1; border-radius:12px; background:#fbfcfb; }
.ranking-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ranking-head > div:first-child { display:grid; gap:2px; }
.ranking-head strong { font-size:11px; }
.ranking-head small { color:var(--muted); font-size:8px; }
.ranking-tabs { display:flex; padding:2px; border-radius:8px; background:#edf2ee; }
.ranking-tabs button { min-width:42px; min-height:26px; padding:4px 8px; border:0; border-radius:6px; color:#6b796f; background:transparent; font-size:9px; font-weight:900; }
.ranking-tabs button.is-active { color:#fff; background:var(--green2); }
.ranking-list { display:grid; gap:4px; margin-top:9px; }
.ranking-list article { display:grid; grid-template-columns:25px minmax(0,1fr) auto; gap:8px; align-items:center; min-height:32px; padding:5px 7px; border-radius:8px; }
.ranking-list article.is-current { background:#e7f4eb; }
.ranking-position { display:grid; width:22px; height:22px; place-items:center; border-radius:50%; color:#526159; background:#edf1ee; font-size:9px; font-weight:900; }
.ranking-list article:first-child .ranking-position { color:#6b4a05; background:#f7df98; }
.ranking-driver { display:grid; min-width:0; }
.ranking-driver strong { overflow:hidden; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.ranking-driver small { color:var(--muted); font-size:8px; }
.ranking-amount { display:grid; gap:1px; text-align:right; }
.ranking-amount strong { color:var(--green); font-size:11px; }
.ranking-amount small { color:var(--muted); font-size:8px; }
.ranking-list > p { margin:2px 0 0; color:var(--muted); font-size:9px; text-align:center; }
.target-line { display:grid; gap:7px; margin-top:13px; }
.target-line span { color:var(--muted); font-size:10px; }
.target-line i { overflow:hidden; height:6px; border-radius:999px; background:#e2e8e3; }
.target-line b { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#3c9960,#e3bb58); transition:width .35s; }
.driver-location-bar { display:flex; gap:10px; align-items:center; margin-top:13px; padding:10px 11px; border:1px solid #dbe5de; border-radius:11px; background:#f8faf8; }
.driver-location-status { flex:1; color:#67766c; font-size:9px; font-weight:750; line-height:1.45; }
.driver-location-status.is-ready { color:#17613c; }.driver-location-status.is-error { color:#9b421d; }.driver-location-status.is-loading { color:#806018; }
.driver-location-bar button { min-height:34px; padding:7px 10px; border:1px solid #1b7048; border-radius:9px; color:#17613c; background:#fff; font-size:9px; font-weight:900; white-space:nowrap; }
.driver-location-bar button:disabled { opacity:.72; }
.home-screen-tip { display:flex; gap:8px; align-items:center; justify-content:space-between; margin:8px 2px 0; color:#758279; font-size:9px; line-height:1.5; }
.home-screen-tip span { flex:1; }.home-screen-tip button { padding:5px 8px; border:0; border-radius:8px; color:#17613c; background:#e5f3e9; font-size:9px; font-weight:900; }
.install-guide { display:grid; grid-template-columns:52px 1fr; gap:7px 9px; margin-top:9px; padding:11px 12px; border-radius:10px; color:#5f6e64; background:#f0f5f1; font-size:9px; line-height:1.55; }
.install-guide[hidden] { display:none; }
.install-guide b { color:#174a34; }.install-guide small { grid-column:1/-1; padding-top:3px; color:#758279; }
.loading-card { display:flex; align-items:center; gap:13px; }
.loading-card strong { font-size:14px; }
.loading-card p { margin:4px 0 0; color:var(--muted); font-size:10px; }
.spinner { width:30px; height:30px; flex:0 0 auto; border:3px solid #d9e9df; border-top-color:var(--green2); border-radius:50%; animation:spin .75s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.route-result { display:flex; gap:10px; align-items:center; margin-top:15px; padding:11px 12px; border-radius:12px; color:#255d3e; background:#e8f4ec; }
.route-result span { flex:0 0 auto; padding:5px 8px; border-radius:999px; color:white; background:#3c8e5b; font-size:10px; font-weight:900; }
.route-result p { margin:0; font-size:10px; line-height:1.55; }
.route-result.is-delegated { color:#805923; background:#fff1d6; }
.route-result.is-delegated span { background:#c28731; }
.safety-note { display:flex; gap:9px; align-items:flex-start; padding:12px; border-radius:11px; color:#4d6657; background:#f2f6f3; }
.safety-note span { display:grid; width:20px; height:20px; flex:0 0 auto; place-items:center; border-radius:50%; color:white; background:#3d9460; font-size:11px; }
.safety-note p { margin:1px 0 0; font-size:10px; line-height:1.55; }
.sign-photo-panel { display:grid; gap:9px; margin:0 0 10px; padding:11px; border:1px solid #d5e3da; border-radius:14px; background:#f7faf8; }
.sign-order-step { display:grid; gap:11px; margin:0 0 10px; padding:11px 11px 70px; border:1px solid #d5e3da; border-radius:14px; background:#f7faf8; }
.sign-selection-intro { display:flex; align-items:center; gap:10px; padding:10px 11px; border-radius:11px; color:#fff; background:linear-gradient(135deg,#286b49,#173f2d); }
.sign-selection-intro > span { display:grid; width:28px; height:28px; flex:0 0 28px; place-items:center; border-radius:50%; color:#174a34; background:#dff3e7; font-size:12px; font-weight:900; }
.sign-selection-intro > div { display:grid; gap:2px; }.sign-selection-intro strong { font-size:12px; }.sign-selection-intro small { color:#d2e8da; font-size:9px; line-height:1.4; }
.sign-focus-summary { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 11px; border-radius:10px; color:#fff; background:linear-gradient(135deg,#286b49,#173f2d); }
.sign-focus-summary > div { display:grid; min-width:0; gap:1px; }
.sign-focus-summary small { color:#bfe1cc; font-size:8px; font-weight:800; }
.sign-focus-summary strong { overflow:hidden; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.sign-focus-summary span { overflow:hidden; color:#d8eadf; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.sign-focus-summary > b { flex:0 0 auto; font-size:13px; }
.sign-focus-actions { display:grid; flex:0 0 auto; justify-items:end; gap:4px; }.sign-focus-actions > b { font-size:13px; }
.sign-focus-actions button { min-height:0; padding:3px 7px; border:1px solid rgba(255,255,255,.45); border-radius:999px; color:#fff; background:transparent; font-size:8px; font-weight:800; }
.sign-photo-heading { display:flex; gap:10px; align-items:center; }
.sign-photo-heading > span { display:grid; min-width:52px; min-height:30px; place-items:center; border-radius:999px; color:#17613c; background:#dff3e7; font-size:10px; font-weight:900; }
.sign-photo-heading div { display:grid; gap:2px; }.sign-photo-heading strong { font-size:13px; }.sign-photo-heading small { color:var(--muted); font-size:10px; }
.related-sign-orders { padding:9px; border:1px solid #d8e5dc; border-radius:11px; background:#fff; }
.related-sign-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.related-sign-head > div { display:grid; gap:2px; }.related-sign-head strong { font-size:11px; }.related-sign-head small { color:var(--muted); font-size:8px; }
.related-sign-head > b { flex:0 0 auto; padding:4px 7px; border-radius:999px; color:#17613c; background:#e5f4ea; font-size:9px; }
.related-sign-loading { margin:7px 0 0; padding:7px 8px; border-radius:8px; color:#38674c; background:#edf6f0; font-size:8px; line-height:1.4; }
.related-sign-list { display:grid; gap:7px; max-height:min(50dvh,430px); margin-top:8px; overflow:auto; }
.related-sign-item { display:grid; grid-template-columns:22px minmax(0,1fr) auto; gap:7px; align-items:center; padding:7px; border-radius:8px; background:#f4f7f5; cursor:pointer; }
.related-sign-item input { width:18px; height:18px; min-height:0; margin:0; accent-color:var(--green2); }
.related-sign-item > span { display:grid; min-width:0; gap:2px; }
.related-sign-item strong { overflow:hidden; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.related-sign-item small { overflow:hidden; color:var(--muted); font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.related-sign-item > b { color:var(--green); font-size:10px; }
.related-select-all { width:100%; min-height:38px; margin-top:8px; border:1px solid #a9c9b5; border-radius:9px; color:#17613c; background:#fff; font-size:10px; font-weight:850; }
.sign-selection-next { position:sticky; z-index:4; bottom:76px; width:100%; min-height:50px; box-shadow:0 9px 24px rgba(23,63,45,.2); }
.sign-remark { display:grid; gap:5px; }
.sign-remark > span { color:#39483f; font-size:10px; font-weight:900; }
.sign-remark textarea { min-height:48px; max-height:72px; padding:8px 10px; font-size:10px; line-height:1.4; }
.sign-photo-capture { min-height:112px; }
.photo-backfill-panel { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 10px; border:1px solid #ebc59f; border-radius:10px; color:#75451e; background:#fff7ed; }
.photo-backfill-panel[hidden] { display:none; }
.photo-backfill-panel > div { display:grid; min-width:0; gap:2px; }.photo-backfill-panel strong { font-size:10px; }.photo-backfill-panel small { color:#8f6748; font-size:8px; line-height:1.4; }
.photo-backfill-panel label { flex:0 0 auto; padding:7px 9px; border:1px solid #c9884d; border-radius:8px; color:#80471c; background:#fff; font-size:9px; font-weight:900; cursor:pointer; }
.sign-photo-capture b { font-size:13px; }.sign-photo-preview img { max-height:360px; }
.sign-photo-preview img { max-height:190px; }
.sign-photo-preview div { padding:8px 10px; }
.save-sign-photo-tip[hidden] { display:none; }
.save-sign-photo-tip { margin:0; padding:7px 9px; border-radius:8px; color:#7d531e; background:#fff3dc; font-size:8px; line-height:1.45; }
.sign-submit-button { position:sticky; z-index:4; bottom:76px; width:100%; min-height:48px; margin-top:0; box-shadow:0 9px 24px rgba(23,63,45,.2); }
.sign-photo-help { margin:0; color:#6c7b72; font-size:10px; line-height:1.55; }
.sign-evidence-status { margin:0; padding:8px 10px; border-radius:9px; color:#17613c; background:#e9f6ee; font-size:9px; font-weight:750; line-height:1.45; }
.sign-evidence-status.is-warning { color:#9b421d; background:#fff0e8; }
.retry-location-button { min-height:42px; border:1px solid #1b7048; border-radius:10px; color:#17613c; background:#fff; font-size:11px; font-weight:850; }
.retry-location-button:active { background:#e9f6ee; }
.sign-scene-tip { display:flex; gap:9px; align-items:flex-start; padding:11px 12px; border:1px solid #d8e3dc; border-radius:11px; background:#fff; }
.sign-scene-tip > span { display:grid; width:20px; height:20px; flex:0 0 20px; place-items:center; border-radius:50%; color:#fff; background:#1d7048; font-size:11px; font-weight:900; }
.sign-scene-tip div { display:grid; gap:3px; }.sign-scene-tip strong { font-size:11px; }.sign-scene-tip small { color:var(--muted); font-size:9px; line-height:1.45; }
.sign-focus-mode main { padding:8px 8px calc(138px + env(safe-area-inset-bottom)); }
.sign-focus-mode main > *:not(#actionCard):not(#successCard) { display:none!important; }
.sign-focus-mode #actionCard { min-height:calc(100dvh - 68px - 92px - env(safe-area-inset-bottom)); margin-top:0; padding:12px; border-radius:15px; }
.sign-focus-mode #actionCard > .card-title { margin-bottom:9px; }
.sign-focus-mode #actionCard > .card-title b { width:32px; height:32px; }
.sign-focus-mode #actionCard > .card-title h3 { font-size:16px; }
.sign-focus-mode #actionCard > .card-title p { font-size:9px; }
.sign-focus-mode .sign-photo-panel { gap:8px; margin-bottom:0; padding:9px 9px 66px; }
.sign-focus-mode .sign-order-step { margin-bottom:0; }
.sign-focus-mode .sign-photo-preview img { max-height:min(28dvh,210px); }
.sign-focus-mode .sign-submit-button { position:fixed; z-index:29; right:auto; bottom:calc(72px + env(safe-area-inset-bottom)); left:50%; width:min(692px,calc(100% - 22px)); transform:translateX(-50%); }
.sign-selection-mode .sign-selection-next { position:fixed; z-index:29; right:auto; bottom:calc(72px + env(safe-area-inset-bottom)); left:50%; width:min(692px,calc(100% - 22px)); transform:translateX(-50%); }
.sign-focus-mode #actionCard > .safety-note,.sign-focus-mode #refreshOrderBtn { display:none; }
.sign-focus-mode .sign-photo-preview:not([hidden]) ~ .sign-scene-tip { display:none; }
.action-button { min-height:54px; font-size:15px; }
.recent-list { display:grid; gap:8px; }
.recent-list article { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:10px; align-items:center; padding:11px 0; border-top:1px solid #edf0ed; }
.recent-list article:first-child { border-top:0; }
.recent-list article > div { display:grid; gap:3px; min-width:0; }
.recent-list article > div:nth-child(2) { text-align:right; }
.recent-list strong { overflow:hidden; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.recent-list b { color:var(--green); font-size:12px; }
.recent-list small { overflow:hidden; color:var(--muted); font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.recent-list article > span { padding:5px 7px; border-radius:999px; color:#246344; background:#e4f1e8; font-size:9px; font-weight:900; }
.recent-list article > span.is-delegated { color:#895c1f; background:#fff0d1; }
.empty-text { margin:0; padding:18px 0; color:var(--muted); font-size:11px; text-align:center; }
@media (max-width:430px) { .stats-grid strong { font-size:12px; } .recent-list article { grid-template-columns:minmax(0,1fr) auto; } .recent-list article > span { grid-column:1 / -1; justify-self:start; } }

.visually-hidden { position:absolute!important; width:1px!important; height:1px!important; overflow:hidden!important; clip:rect(0 0 0 0)!important; white-space:nowrap!important; }
.camera-scan-button { display:grid; grid-template-columns:44px 1fr; grid-template-rows:auto auto; width:100%; max-width:500px; min-height:72px; margin:0 auto 10px; padding:12px 16px; border:0; border-radius:15px; color:#fff; background:linear-gradient(135deg,#2d7d53,#123a29); text-align:left; box-shadow:0 10px 24px rgba(23,63,45,.17); }
.camera-scan-button span { grid-row:1 / 3; align-self:center; font-size:29px; }
.camera-scan-button b { align-self:end; font-size:15px; }
.camera-scan-button small { margin:2px 0 0; color:#bfe2cb; font-size:10px; }
.photo-scan-button { display:inline-flex; min-height:38px; align-items:center; justify-content:center; padding:0 14px; border:1px solid #bad4c2; border-radius:10px; color:var(--green2); background:#f7fbf8; font-size:11px; font-weight:800; cursor:pointer; }
.manual-lookup { max-width:500px; margin:12px auto 0; border-top:1px solid #e6ebe7; text-align:left; }
.manual-lookup summary { padding:12px 2px 4px; color:#718077; font-size:10px; font-weight:800; cursor:pointer; text-align:center; }
.manual-lookup .scan-input { margin-top:8px; }
body.scanner-open { overflow:hidden; }
.scanner-modal { position:fixed; z-index:100; inset:0; display:flex; align-items:flex-end; justify-content:center; padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom)); background:rgba(7,18,12,.78); backdrop-filter:blur(6px); }
.scanner-modal[hidden] { display:none; }
.scanner-sheet { width:min(620px,100%); overflow:hidden; border-radius:21px; background:#fff; box-shadow:0 30px 80px rgba(0,0,0,.35); }
.scanner-title { display:flex; justify-content:space-between; align-items:center; padding:16px 17px; }
.scanner-title small { color:#5b806a; font-size:10px; font-weight:800; }
.scanner-title h3 { margin:2px 0 0; font-size:19px; }
.scanner-title button { min-height:36px; padding:0 13px; border:1px solid #d7e2da; border-radius:10px; color:#42584b; background:#f7faf8; font-size:11px; }
.scanner-viewport { position:relative; overflow:hidden; width:100%; aspect-ratio:3/4; max-height:68vh; background:#07110c; }
.scanner-viewport video { display:block; width:100%; height:100%; object-fit:cover; }
.scanner-frame { position:absolute; z-index:2; width:min(54vw,230px); aspect-ratio:1; top:52%; left:50%; border-radius:13px; box-shadow:0 0 0 999px rgba(2,12,7,.38); transform:translate(-50%,-50%); }
.scanner-frame i { position:absolute; width:34px; height:34px; border-color:#71e49b; border-style:solid; }
.scanner-frame i:nth-child(1) { top:0; left:0; border-width:4px 0 0 4px; border-radius:9px 0 0; }
.scanner-frame i:nth-child(2) { top:0; right:0; border-width:4px 4px 0 0; border-radius:0 9px 0 0; }
.scanner-frame i:nth-child(3) { right:0; bottom:0; border-width:0 4px 4px 0; border-radius:0 0 9px; }
.scanner-frame i:nth-child(4) { bottom:0; left:0; border-width:0 0 4px 4px; border-radius:0 0 0 9px; }
.scanner-frame b { position:absolute; right:5px; left:5px; height:2px; top:10%; background:linear-gradient(90deg,transparent,#7af0a5,transparent); box-shadow:0 0 10px #65e794; animation:scanline 2s ease-in-out infinite; }
@keyframes scanline { 50% { top:90%; } }
.scanner-batch-counter { position:absolute; z-index:4; top:14px; left:14px; display:flex; min-height:42px; align-items:center; gap:5px; padding:7px 12px; border:1px solid rgba(255,255,255,.45); border-radius:999px; color:white; background:rgba(5,39,23,.84); box-shadow:0 7px 20px rgba(0,0,0,.25); backdrop-filter:blur(8px); }
.scanner-batch-counter[hidden],.scanner-success[hidden] { display:none; }
.scanner-batch-counter small,.scanner-batch-counter span { font-size:10px; font-weight:800; }.scanner-batch-counter strong { color:#8ff4b3; font-size:22px; line-height:1; }
.scanner-aim-tip { position:absolute; z-index:3; top:calc(52% - min(27vw,115px) - 43px); left:50%; min-width:176px; padding:8px 13px; border-radius:999px; color:#fff; background:rgba(3,25,14,.78); font-size:11px; font-weight:900; text-align:center; transform:translateX(-50%); }
.scanner-success { position:absolute; z-index:6; top:50%; left:50%; display:grid; width:min(76vw,310px); gap:5px; padding:19px 16px; border:2px solid #83edaa; border-radius:18px; color:white; background:rgba(15,112,61,.95); box-shadow:0 14px 45px rgba(0,0,0,.4); text-align:center; transform:translate(-50%,-50%); animation:scanSuccess .48s ease-out; }
.scanner-success b { font-size:22px; }.scanner-success strong { font-size:15px; }.scanner-success span { overflow:hidden; font-size:11px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }.scanner-success small { margin-top:2px; color:#d8f9e4; font-size:10px; }
.scanner-success.is-duplicate { border-color:#ffd879; background:rgba(132,91,13,.96); }.scanner-success.is-duplicate small { color:#fff2c7; }
@keyframes scanSuccess { from { opacity:0; transform:translate(-50%,-50%) scale(.82); } 45% { opacity:1; transform:translate(-50%,-50%) scale(1.04); } to { transform:translate(-50%,-50%) scale(1); } }
.scanner-sheet > p { display:grid; gap:3px; margin:0; padding:12px 17px 15px; color:#607067; font-size:10px; line-height:1.45; text-align:center; }
.scanner-sheet > p b { color:#163f2b; font-size:13px; }.scanner-sheet > p span { color:#718077; }

.order-workspace { padding:17px 18px; }
.workspace-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.workspace-head small { color:#538269; font-size:9px; font-weight:900; letter-spacing:.09em; }
.workspace-head h3 { margin:4px 0 3px; font-size:19px; }
.workspace-head p { margin:0; max-width:460px; color:var(--muted); font-size:10px; line-height:1.5; }
.filter-toggle { flex:0 0 auto; min-height:36px; padding:0 13px; border:1px solid #bcd3c3; border-radius:10px; color:var(--green2); background:#f5faf6; font-size:11px; font-weight:900; }
.quick-filters { display:flex; gap:7px; margin-top:15px; overflow:auto; scrollbar-width:none; }
.quick-filters::-webkit-scrollbar { display:none; }
.quick-filters button { flex:0 0 auto; min-height:37px; padding:0 13px; border:1px solid #dce4de; border-radius:999px; color:#627168; background:#f6f8f6; font-size:11px; font-weight:800; }
.quick-filters button.is-active { border-color:var(--green2); color:#fff; background:var(--green2); }
.order-filters { margin-top:14px; padding:14px; border:1px solid #e0e7e1; border-radius:14px; background:#f7faf7; }
.filter-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 10px; }
.filter-actions { display:grid; grid-template-columns:1fr 2fr; gap:8px; margin-top:14px; }
.filter-actions button { min-height:44px; border-radius:11px; font-size:12px; font-weight:900; }
.secondary-action { border:1px solid #cbd9cf; color:#53655a; background:#fff; }
.primary-action { border:0; color:#fff; background:var(--green2); }
.list-state { display:flex; gap:10px; align-items:center; justify-content:center; min-height:100px; color:var(--muted); font-size:11px; }
.list-state .spinner { width:23px; height:23px; }
.list-state.is-background { min-height:0; margin-top:12px; padding:9px 11px; border-radius:10px; color:#47705a; background:#eef7f0; }
.list-state.is-background .spinner { width:16px; height:16px; border-width:2px; }
.driver-order-list { display:grid; gap:9px; margin-top:14px; }
.driver-order-item { display:grid; gap:10px; width:100%; padding:14px; border:1px solid #e0e7e2; border-radius:14px; color:var(--text); background:#fff; box-shadow:0 6px 16px rgba(24,57,38,.04); text-align:left; }
.driver-order-item:active { border-color:#7cb493; background:#f4faf6; transform:scale(.994); }
.list-order-top,.list-order-foot { display:flex; align-items:center; gap:8px; }
.list-order-top strong { min-width:0; flex:1; font-size:15px; }
.list-order-meta { display:grid; grid-template-columns:1fr 1fr; gap:7px; color:#6d7972; font-size:10px; }
.list-order-detail { display:grid; gap:6px; padding:10px; border-radius:10px; background:#f5f8f5; }
.list-order-detail p { display:grid; grid-template-columns:34px 1fr; gap:7px; margin:0; color:#4f5e55; font-size:10px; line-height:1.5; }
.list-order-detail b { color:#78857d; font-size:9px; }.list-order-detail .remark { color:#8a5b25; }
.list-order-foot { color:#66736b; font-size:10px; }
.list-order-foot b { margin-left:auto; color:var(--green); font-size:13px; }
.route-mini { padding:5px 7px; border-radius:999px; color:#246344; background:#e6f2e9; font-weight:900; }
.route-mini.is-delegated { color:#8b5e22; background:#fff0d3; }
.no-orders { padding:26px 14px; border:1px dashed #d7e0d9; border-radius:13px; color:#5f6e65; background:#fafcfa; text-align:center; }
.no-orders b { font-size:13px; }.no-orders p { margin:6px 0 0; font-size:10px; line-height:1.5; }.no-orders.is-error { color:#92463f; background:#fff7f6; }
.refresh-list { width:100%; min-height:39px; margin-top:10px; border:0; color:#5b7163; background:transparent; font-size:10px; font-weight:800; }
.lookup-retry-button { display:block; width:calc(100% - 28px); max-width:622px; min-height:43px; margin:9px auto 0; border:1px solid #8eb69d; border-radius:12px; color:#176b43; background:#f6fbf7; font-size:12px; font-weight:900; }
@media (max-width:430px) { .filter-grid { grid-template-columns:1fr; } .scanner-viewport { aspect-ratio:4/5; } }
.driver-tabbar { position:fixed; z-index:30; right:0; bottom:0; left:0; display:grid; grid-template-columns:1fr 1.15fr 1fr; align-items:end; padding:7px max(18px,calc((100vw - 650px)/2)) calc(7px + env(safe-area-inset-bottom)); border-top:1px solid #dbe3dd; background:rgba(255,255,255,.96); backdrop-filter:blur(16px); box-shadow:0 -10px 30px rgba(19,48,32,.11); }
.driver-tabbar button { display:grid; gap:2px; min-height:47px; place-items:center; border:0; color:#627168; background:transparent; }
.driver-tabbar button span { font-size:20px; line-height:1; }.driver-tabbar button b { font-size:10px; }
.driver-tabbar .scan-tab { width:92px; min-height:60px; justify-self:center; margin-top:-25px; border:5px solid #f5f3ec; border-radius:18px; color:#fff; background:linear-gradient(135deg,#2d7d53,#123a29); box-shadow:0 9px 24px rgba(23,63,45,.24); }
.driver-tabbar .scan-tab span { font-size:23px; }.driver-tabbar .scan-tab b { font-size:11px; }

.sign-task{margin-top:10px;padding:12px;border:1px solid #d7e5dc;border-radius:12px;background:#f7fbf8}.sign-task summary{cursor:pointer;color:#195d3d;font-size:13px;font-weight:800}.sign-task-item{display:grid;grid-template-columns:1fr auto;gap:5px 8px;margin-top:9px;padding-top:9px;border-top:1px solid #e1e9e3;font-size:12px}.sign-task-item small{grid-column:1/-1;color:#637268;line-height:1.5;overflow-wrap:anywhere}