:root { color: #202a25; background: #eff2eb; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; background: #eff2eb; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.collector-shell { min-height: 100dvh; background: #f7f8f4; box-shadow: 0 0 38px rgba(26, 56, 39, .12); overflow: hidden; }
.collector-shell .page { min-height: 100dvh; padding: max(14px, env(safe-area-inset-top)) 18px calc(94px + env(safe-area-inset-bottom)); }
.collector-shell .topbar { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0; }
.collector-shell .brand { color: #123f2e; font-size: 18px; font-weight: 800; letter-spacing: -.4px; }
.collector-shell .brand small { margin-left: 6px; color: #617067; font-size: 13px; font-weight: 500; }
.collector-shell .demo-badge { display: inline-flex; padding: 5px 8px; border-radius: 8px; background: #f8ebcf; color: #926516; font-size: 12px; font-weight: 700; white-space: nowrap; }
.collector-shell .date-row { display: flex; align-items: center; justify-content: space-between; margin: 8px 0 14px; }
.collector-shell .merchant-pill { background: #edf0e9; border: 0; border-radius: 10px; padding: 8px 10px; color: #26382e; font-weight: 700; }
.collector-shell h1 { margin: 14px 0 5px; font-size: clamp(26px, 7vw, 31px); line-height: 1.18; letter-spacing: -.8px; }
.collector-shell h2 { margin: 0; font-size: 19px; letter-spacing: -.3px; }
.collector-shell h3 { margin: 0; font-size: 16px; }
.collector-shell .lede { margin: 0 0 20px; color: #5d6b63; font-size: 14px; }
.collector-shell .task-card { padding: 14px; border: 1px solid #dfe7dd; border-radius: 14px; background: linear-gradient(145deg, #eff8f2 0%, #e7f2ea 100%); }
.collector-shell .task-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.collector-shell .task-head > div:first-child { flex: 1; min-width: 0; }
.collector-shell .task-head > img { flex: 0 0 86px; width: 86px; height: 86px; min-width: 86px; object-fit: cover; border-radius: 9px; }
.collector-shell .task-product { display: flex; gap: 12px; align-items: center; }
.collector-shell .task-product img { width: 86px; height: 86px; object-fit: cover; border-radius: 9px; }
.collector-shell .task-product > div { min-width: 0; }
.collector-shell .batch-code { color: #56675c; margin: 5px 0 0; }
.collector-shell .tag { display: inline-block; padding: 4px 9px; border-radius: 999px; background: #f8bf3e; color: #533b08; font-size: 12px; font-weight: 800; }
.collector-shell .tag.green { background: #d9eee1; color: #137a52; }
.collector-shell .tag.gray { background: #ecefeb; color: #56635b; }
.collector-shell .progress-title { margin: 14px 0 9px; font-weight: 750; }
.collector-shell .stage-track { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; }
.collector-shell .stage-track::before { position: absolute; content: ""; height: 2px; background: #1b805a; left: 9%; right: 9%; top: 11px; }
.collector-shell .stage-dot { position: relative; display: grid; justify-items: center; gap: 6px; color: #4f6157; font-size: 11px; text-align: center; z-index: 1; }
.collector-shell .stage-dot b { display: grid; place-items: center; width: 23px; height: 23px; border: 2px solid #17805a; border-radius: 50%; background: #f1f8f1; color: #137a52; font-size: 14px; }
.collector-shell .stage-dot.done b { background: #17805a; color: white; }
.collector-shell .stage-dot.stage-pending b { color: transparent; background: #f7f8f4; }
.collector-shell .notice { margin: 14px 0 10px; padding: 10px 11px; display: flex; align-items: center; gap: 8px; border-radius: 9px; background: #fcf0d8; color: #895d14; font-size: 14px; font-weight: 700; }
.collector-shell .btn { min-height: 46px; border-radius: 9px; font-weight: 750; }
.collector-shell .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 100%; border: 0; background: #137a52; color: white; box-shadow: 0 5px 12px rgba(19,122,82,.16); }
.collector-shell .btn-secondary { border: 1px solid #137a52; background: white; color: #137a52; }
.collector-shell .btn-quiet { border: 0; background: transparent; color: #137a52; }
.collector-shell .quick-link, .collector-shell .list-card { width: 100%; border: 1px solid #e0e6df; border-radius: 11px; background: white; color: inherit; text-align: left; }
.collector-shell .quick-link { display: flex; justify-content: space-between; align-items: center; padding: 13px; margin-top: 15px; font-weight: 700; }
.collector-shell .section-title { display: flex; align-items: center; justify-content: space-between; margin: 22px 0 10px; font-weight: 800; }
.collector-shell .record-row { display: flex; width: 100%; gap: 13px; padding: 12px 0; border: 0; border-top: 1px solid #e7eae6; background: transparent; color: inherit; text-align: left; }
.collector-shell .record-row time { min-width: 48px; font-weight: 800; }
.collector-shell .record-row p { margin: 3px 0 0; color: #68766e; font-size: 13px; }
.collector-shell .reservation-tease { display: flex; width: 100%; justify-content: space-between; align-items: center; margin-top: 16px; padding: 12px; border: 0; border-radius: 10px; background: #f1f3ef; color: #516057; font-size: 14px; text-align: left; }
.collector-shell .bottom-nav { position: fixed; left: 50%; bottom: 0; z-index: 4; width: min(100%, 430px); transform: translateX(-50%); display: grid; grid-template-columns: repeat(3, 1fr); padding: 7px 18px calc(7px + env(safe-area-inset-bottom)); border-top: 1px solid #e3e7e2; background: rgba(255,255,255,.97); backdrop-filter: blur(12px); }
.collector-shell .nav-item { display: grid; justify-items: center; gap: 2px; min-height: 48px; color: #657268; text-decoration: none; font-size: 12px; }
.collector-shell .nav-item.active { color: #137a52; font-weight: 800; }
.collector-shell .list-card { display: flex; align-items: center; gap: 12px; padding: 12px; margin-bottom: 10px; }
.collector-shell .list-card img { width: 62px; height: 62px; border-radius: 9px; object-fit: cover; }
.collector-shell .list-card .grow { flex: 1; min-width: 0; }
.collector-shell .list-card p { margin: 4px 0; color: #627168; font-size: 13px; }
.collector-shell .chev { color: #7c8a80; font-size: 22px; }
.collector-shell .filters { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 14px 0; }
.collector-shell .date-filter { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; margin: -5px 0 14px; }
.collector-shell .date-filter .btn { min-height: 44px; white-space: nowrap; }
.collector-shell .input, .collector-shell .select, .collector-shell .textarea { width: 100%; min-height: 45px; padding: 10px 11px; border: 1px solid #d7ddd8; border-radius: 9px; background: white; color: #202a25; }
.collector-shell .textarea { min-height: 100px; resize: vertical; }
.collector-shell .field { margin: 0 0 15px; }
.collector-shell .field label { display: block; margin: 0 0 7px; color: #36473d; font-size: 14px; font-weight: 750; }
.collector-shell .field .hint { margin: 5px 0 0; color: #718078; font-size: 12px; }
.collector-shell .form-error { margin: -7px 0 10px; color: #af3d2a; font-size: 13px; }
.collector-shell .top-title { display: flex; align-items: center; justify-content: center; position: relative; min-height: 45px; }
.collector-shell .top-title h1 { margin: 0; font-size: 20px; }
.collector-shell .top-title .demo-badge { position: absolute; right: 0; }
.collector-shell .back-button { position: absolute; left: 0; width: 44px; height: 44px; border: 0; background: transparent; color: #19372b; font-size: 27px; }
.collector-shell .info-head { display: flex; align-items: center; gap: 12px; padding: 12px; margin: 10px 0 18px; border-radius: 11px; background: #edf5ee; }
.collector-shell .info-head img { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; }
.collector-shell .info-head p { margin: 4px 0 0; color: #596a60; }
.collector-shell .archive-summary { padding: 13px; margin-bottom: 12px; border-radius: 12px; background: white; border: 1px solid #e0e5df; }
.collector-shell .archive-summary dl { display: grid; grid-template-columns: 80px 1fr; gap: 9px 5px; margin: 12px 0 0; font-size: 14px; }
.collector-shell .archive-summary dt { color: #6a786e; }
.collector-shell .archive-summary dd { margin: 0; }
.collector-shell .stage-list { display: grid; gap: 9px; }
.collector-shell .stage-item { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid #e0e6df; border-radius: 11px; background: white; }
.collector-shell .stage-index { flex: 0 0 30px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #e5f1e8; color: #137a52; font-weight: 800; }
.collector-shell .stage-item.pending .stage-index { background: #fff1d4; color: #956114; }
.collector-shell .stage-item .grow p { margin: 3px 0 0; color: #6f7c74; font-size: 13px; }
.collector-shell .doc-row { display: flex; align-items: center; gap: 10px; padding: 11px; margin: 8px 0; border: 1px solid #e2e6e1; border-radius: 10px; background: white; }
.collector-shell .doc-row .doc-icon { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 8px; background: #f2f4f0; color: #137a52; }
.collector-shell .fixed-actions { position: fixed; bottom: 0; left: 50%; z-index: 3; width: min(100%,430px); transform: translateX(-50%); display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px 18px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid #e1e6e0; background: rgba(247,248,244,.97); backdrop-filter: blur(12px); }
.collector-shell .photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.collector-shell .photo-choice { position: relative; border: 2px solid transparent; border-radius: 9px; overflow: hidden; background: white; min-height: 88px; }
.collector-shell .photo-choice.selected { border-color: #137a52; }
.collector-shell .photo-choice img { display: block; width: 100%; height: 88px; object-fit: cover; }
.collector-shell .photo-choice button { position: absolute; inset: 0; width: 100%; border: 0; opacity: 0; }
.collector-shell .upload-tile { display: grid; place-items: center; min-height: 88px; border: 1px dashed #b7c5ba; border-radius: 9px; background: white; color: #5c6b61; font-size: 12px; text-align: center; }
.collector-shell .upload-tile input { display: none; }
.collector-shell .local-photo-preview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 9px; }
.collector-shell .local-photo { position: relative; margin: 0; overflow: hidden; border: 1px solid #d7e1d8; border-radius: 9px; background: white; }
.collector-shell .local-photo img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.collector-shell .local-photo button { position: absolute; top: 5px; right: 5px; display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(32, 42, 37, .78); color: white; font-size: 19px; line-height: 1; }
.collector-shell .local-photo figcaption { padding: 4px 6px; color: #657268; font-size: 11px; }
.collector-shell .checkline { display: flex; align-items: center; gap: 9px; margin: 14px 0; font-size: 14px; }
.collector-shell .preview-strip { padding: 13px; border-radius: 11px; background: #e9f2eb; color: #335443; font-size: 13px; }
.collector-shell .issue { display: flex; align-items: center; gap: 9px; padding: 12px; border-radius: 10px; background: #fff1d8; color: #7c571a; margin: 9px 0; }
.collector-shell .issue button { margin-left: auto; border: 0; background: transparent; color: #137a52; font-weight: 800; }
.collector-shell .preview-card { padding: 14px; border: 1px solid #dce7dc; border-radius: 13px; background: linear-gradient(155deg, #edf7f0, #fff); }
.collector-shell .preview-card img { width: 100%; height: 144px; border-radius: 9px; object-fit: cover; }
.collector-shell .status-tabs { display: flex; gap: 7px; overflow-x: auto; padding: 4px 0 12px; }
.collector-shell .status-tabs button { white-space: nowrap; border: 1px solid #dce4dc; border-radius: 99px; background: white; padding: 7px 10px; color: #59675f; font-size: 13px; }
.collector-shell .status-tabs button.active { border-color: #137a52; background: #eaf5ed; color: #137a52; font-weight: 800; }
.collector-shell .reservation-card { padding: 13px; margin-bottom: 10px; border: 1px solid #e0e6df; border-radius: 12px; background: white; }
.collector-shell .reservation-card header { display: flex; justify-content: space-between; gap: 8px; }
.collector-shell .reservation-card p { margin: 7px 0; color: #596960; font-size: 14px; }
.collector-shell .reservation-actions { display: flex; gap: 8px; margin-top: 10px; }
.collector-shell .reservation-actions button { flex: 1; min-height: 40px; border-radius: 8px; }
.collector-shell .empty { padding: 30px 12px; color: #66746b; text-align: center; }
.app-dialog .preview-strip { padding: 13px; border-radius: 11px; background: #e9f2eb; color: #335443; font-size: 13px; }
.app-dialog .info-head { display: flex; align-items: center; gap: 12px; padding: 12px; margin: 14px 0 18px; border-radius: 11px; background: #edf5ee; }
.app-dialog .info-head img { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; }
.app-dialog .info-head p { margin: 4px 0 0; }
.app-dialog .section-title { display: flex; align-items: center; justify-content: space-between; margin: 18px 0 10px; font-size: 16px; }
.app-dialog .archive-summary { padding: 13px; margin-bottom: 10px; border: 1px solid #e0e5df; border-radius: 12px; background: white; }
.app-dialog .archive-summary h3 { margin: 0; font-size: 16px; }
.app-dialog .archive-summary p { margin: 7px 0; }
.app-dialog .photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.app-dialog .photo { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 9px; }
.app-dialog .doc-row { display: flex; align-items: center; gap: 10px; padding: 11px; margin: 8px 0; border: 1px solid #e2e6e1; border-radius: 10px; background: white; }
.app-dialog .doc-icon { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 8px; background: #f2f4f0; color: #137a52; }
.app-dialog .grow { flex: 1; min-width: 0; }
.app-dialog .candidate-doc-image { display: block; width: 112px; max-height: 112px; margin-top: 8px; border-radius: 7px; object-fit: cover; }
.app-dialog .doc-image-preview figure { position: relative; width: 128px; margin: 10px 0 0; overflow: hidden; border: 1px solid #d7e1d8; border-radius: 9px; background: white; }
.app-dialog .doc-image-preview img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.app-dialog .doc-image-preview button { width: 100%; min-height: 36px; border: 0; border-top: 1px solid #e1e7e1; background: white; color: #137a52; font-size: 13px; }
@media (max-width: 365px) { .collector-shell .page { padding-right: 14px; padding-left: 14px; } .collector-shell .task-product img { width: 72px; height: 72px; } .collector-shell .stage-dot { font-size: 10px; } }
@media (min-width: 900px) { .collector-shell .bottom-nav, .collector-shell .fixed-actions { bottom: 28px; } }