:root { --ink:#1d2929; --muted:#6f7976; --paper:#f5f4ef; --card:#fff; --brand:#294f4a; --line:#dce1dc; --warm:#b6864d; }
* { box-sizing:border-box; } body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.55 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; } a { color:var(--brand); text-decoration:none; } h1,h2,p { margin-top:0; } .eyebrow { color:var(--warm); font-size:12px; font-weight:800; letter-spacing:.13em; }
[hidden] { display:none !important; }
.login-shell,.success-shell { min-height:100vh; display:grid; place-items:center; padding:24px; } .login-card,.success-card { background:var(--card); width:min(100%,420px); padding:36px; border-radius:18px; box-shadow:0 18px 70px #253b3120; }
label { display:grid; gap:6px; color:#43514e; font-size:14px; font-weight:700; } input,select,textarea { width:100%; border:1px solid #cbd4ce; border-radius:10px; padding:11px 12px; background:#fff; color:var(--ink); font:inherit; } textarea { min-height:105px; resize:vertical; } button,.submit-button { display:inline-flex; align-items:center; justify-content:center; min-height:46px; border:0; border-radius:10px; padding:10px 18px; background:var(--brand); color:#fff; font:inherit; font-weight:800; cursor:pointer; }
.login-card form { display:grid; gap:16px; margin-top:24px; } .notice { padding:10px 12px; border-radius:8px; } .error { background:#f9e3e0; color:#9a342a; }
.collect-header,.admin-header { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:22px max(18px,calc((100vw - 1180px)/2)); background:#fff; border-bottom:1px solid var(--line); } .collect-header h1,.admin-header h1 { margin-bottom:0; font-size:clamp(24px,3vw,34px); } .collect-header p:not(.eyebrow) { margin:6px 0 0; color:var(--muted); }
.collect-main,.admin-main { width:min(100% - 32px,1180px); margin:28px auto 60px; } .card,.item-card { background:var(--card); padding:24px; border:1px solid var(--line); border-radius:14px; margin-bottom:18px; box-shadow:0 5px 22px #21372b0a; } .field-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.item-heading,.section-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; font-size:18px; font-weight:800; } .text-button,.secondary-button { background:#e8efea; color:var(--brand); } .secondary-button { width:100%; margin-bottom:12px; } .submit-button { width:100%; font-size:17px; } .photo-input { border:1px dashed #a6b8ae; padding:14px; border-radius:10px; margin-top:18px; } .photo-input span,.muted { color:var(--muted); font-size:13px; font-weight:400; }
.number-list { display:grid; gap:10px; margin:22px 0; } code { padding:10px; background:#edf3ef; border-radius:8px; color:var(--brand); font-weight:800; } .link-button { width:auto; }
.admin-header nav { display:flex; gap:16px; font-weight:700; } .stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:18px; } .stat-grid article { background:var(--brand); color:#fff; padding:20px; border-radius:14px; } .stat-grid span { display:block; opacity:.75; font-size:13px; } .stat-grid strong { display:block; font-size:32px; margin-top:6px; }
.table-wrap { overflow:auto; } table { width:100%; border-collapse:collapse; min-width:850px; } th,td { text-align:left; padding:12px; border-bottom:1px solid var(--line); white-space:nowrap; } th { color:var(--muted); font-size:13px; } .toolbar { display:flex; align-items:center; gap:12px; } .toolbar-actions { display:flex; gap:10px; } .filters { flex:1; display:grid; grid-template-columns:2fr 1fr 1fr auto; gap:10px; } .secondary-link-button { display:inline-flex; align-items:center; justify-content:center; min-height:46px; border:0; border-radius:10px; padding:10px 18px; background:#e8efea; color:var(--brand); font:inherit; font-weight:800; white-space:nowrap; cursor:pointer; } .primary-link-button { background:var(--brand); color:#fff; } .danger-link-button { background:#f7e4df; color:#9a342a; } .status { font-size:12px; border-radius:999px; padding:4px 8px; background:#edf0ed; } .status.complete,.status.collected { background:#dcefe2; color:#24633d; } .status.supplementing,.status.scanning { background:#fff0d6; color:#925e12; } .status.pending { background:#edf0ed; color:#52615d; } .status.void { background:#f7e4df; color:#9a342a; }
.row-actions { display:flex; align-items:center; gap:8px; } .row-actions form { margin:0; } .mini-button { display:inline-flex; align-items:center; justify-content:center; min-height:32px; border:0; border-radius:8px; padding:5px 10px; background:#e8efea; color:var(--brand); font:inherit; font-size:13px; font-weight:800; cursor:pointer; } .mini-button.danger { background:#f7e4df; color:#9a342a; }
.ledger-card { padding-bottom:16px; } .ledger-pagination { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 4px 0; } .ledger-pagination p { margin:0; color:var(--muted); font-size:14px; } .pagination-links { display:flex; align-items:center; flex-wrap:wrap; gap:6px; } .pagination-page { display:inline-flex; min-width:36px; min-height:36px; align-items:center; justify-content:center; padding:5px 10px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--brand); font-size:14px; font-weight:800; } .pagination-page.current { border-color:var(--brand); background:var(--brand); color:#fff; } .pagination-page.disabled { color:#a7afac; background:#f1f2ef; } .pagination-gap { color:var(--muted); padding:0 2px; }
.is-loading { opacity:.75; cursor:progress; } .certificate-overlay { position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:24px; background:rgba(22,32,29,.34); backdrop-filter:blur(4px); opacity:0; pointer-events:none; transition:opacity .18s ease; } .certificate-overlay.visible { opacity:1; pointer-events:auto; } .certificate-progress { width:min(100%,360px); display:grid; justify-items:center; gap:10px; padding:28px 24px; border:1px solid #dfe7e1; border-radius:18px; background:rgba(255,255,255,.96); box-shadow:0 22px 80px #17271f40; text-align:center; } .certificate-progress strong { font-size:20px; } .certificate-progress span { color:var(--muted); font-size:14px; } .certificate-spinner { width:52px; height:52px; border-radius:50%; border:4px solid #dce8df; border-top-color:var(--brand); animation:certificate-spin .86s linear infinite; } @keyframes certificate-spin { to { transform:rotate(360deg); } }
.detail-grid { display:grid; grid-template-columns:270px 1fr; gap:18px; align-items:start; } dl { margin:0; } dt { color:var(--muted); font-size:12px; margin-top:13px; } dd { margin:2px 0 0; overflow-wrap:anywhere; } hr { border:0; border-top:1px solid var(--line); margin:22px 0; } .detail-form { display:grid; gap:16px; } .form-actions { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; } .secondary-button.compact { width:100%; margin-bottom:0; } .photo-grid,.certificate-grid { display:flex; flex-wrap:wrap; gap:12px; } .photo { width:150px; display:grid; gap:4px; color:var(--muted); font-size:12px; } .photo img { width:150px; height:112px; border-radius:8px; object-fit:cover; background:#eef0ed; } .managed-photo { width:150px; display:grid; gap:7px; align-content:start; } .managed-photo form { margin:0; } .photo-delete { width:100%; min-height:30px; } .certificate-card { width:190px; display:grid; gap:6px; padding:10px; border:1px solid var(--line); border-radius:10px; background:#fbfcfa; color:var(--ink); } .certificate-card span { color:var(--muted); font-size:12px; } .certificate-card img { width:100%; height:128px; object-fit:cover; border-radius:8px; background:#eef0ed; object-position:top; }
.label-admin-main { display:grid; gap:18px; } .label-admin-main .card { margin-bottom:0; } .label-hero { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:28px; } .label-hero-actions { display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end; } .label-hero-actions form { margin:0; } .label-hero h2,.label-form-head h2 { margin:0 0 10px; font-size:clamp(24px,3vw,34px); } .label-hero .muted,.label-form-head .muted { max-width:720px; font-size:15px; } .label-summary { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; } .label-summary article { padding:18px 20px; border:1px solid var(--line); border-radius:14px; background:#fff; box-shadow:0 5px 22px #21372b0a; } .label-summary span { display:block; color:var(--muted); font-size:13px; font-weight:700; } .label-summary strong { display:block; margin-top:4px; color:var(--brand); font-size:30px; line-height:1; } .label-form { max-width:920px; margin:0 auto; } .label-form-head { display:grid; gap:4px; margin-bottom:8px; } .label-table-card table { min-width:1120px; } .label-table-card .photo { width:74px; } .label-table-card .photo img { width:74px; height:56px; } .label-collect-main { max-width:520px; margin-top:14px; } .label-intake-card { display:grid; gap:16px; } .label-intake-card .field-grid { grid-template-columns:1fr; gap:14px; } .label-intake-card textarea { min-height:96px; } .label-title-block { display:grid; gap:4px; } .label-title-block h1 { margin:0; font-size:24px; line-height:1.25; } .label-title-block p { margin:0; color:var(--muted); font-weight:700; } .label-title-block strong { color:var(--brand); } .label-photo-box { display:grid; gap:10px; padding:12px; border:1px solid #d3ddd6; border-radius:14px; background:#fbfcfa; } .label-photo-box-title { color:#43514e; font-size:14px; font-weight:900; } .label-main-panel { display:grid; gap:10px; } .label-photo-empty { min-height:88px; border:1px dashed #bac9c0; border-radius:12px; background:linear-gradient(135deg,#f6f8f5,#edf2ee); } .label-main-preview .photo { width:100%; font-size:13px; } .label-main-preview .photo img { width:100%; height:220px; border-radius:12px; object-fit:contain; background:#eef0ed; } .label-upload-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; } .label-upload-button { display:flex; align-items:center; justify-content:center; min-height:38px; border:0; border-radius:9px; padding:7px 12px; background:var(--brand); color:#fff; font-size:14px; font-weight:800; cursor:pointer; } .label-upload-button.secondary-upload { background:#e8efea; color:var(--brand); } .file-button-input { position:absolute; inline-size:1px; block-size:1px; opacity:0; overflow:hidden; pointer-events:none; } .void-card { display:grid; gap:10px; text-align:center; justify-items:center; padding:34px; }
.label-save-success { display:flex; align-items:center; gap:14px; margin-bottom:14px; padding:16px 18px; border:2px solid #97c7a8; border-radius:14px; background:#eaf7ee; color:#184c32; box-shadow:0 8px 24px #184c3214; }
.label-save-success > span { display:grid; flex:0 0 42px; width:42px; height:42px; place-items:center; border-radius:50%; background:#2f8255; color:#fff; font-size:26px; font-weight:900; }
.label-save-success strong { display:block; font-size:19px; }
.label-save-success p { margin:3px 0 0; color:#4f725f; font-size:14px; }
.label-collect-actions { position:sticky; z-index:5; bottom:0; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:10px; margin-top:14px; padding:12px 0 max(12px,env(safe-area-inset-bottom)); background:linear-gradient(180deg,#f6f5f000,#f6f5f0 22%); }
.label-save-button,.label-next-button { min-height:56px; margin:0; border-radius:13px; font-size:17px; box-shadow:0 8px 22px #173b3120; }
.label-save-button { background:#174f43; }
.label-next-button { background:#dfece6; color:#174f43; }
.label-next-button:disabled { background:#edf0ed; color:#9aa49f; box-shadow:none; cursor:not-allowed; }
.label-scanner-modal { position:fixed; z-index:1000; inset:0; display:grid; align-items:end; padding:12px; background:#071411d9; backdrop-filter:blur(5px); }
.label-scanner-sheet { width:min(100%,520px); max-height:calc(100dvh - 24px); margin:0 auto; overflow:auto; border-radius:20px 20px 14px 14px; padding:18px; background:#fff; box-shadow:0 24px 80px #0007; }
.label-scanner-sheet header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }
.label-scanner-sheet h2 { margin:0; font-size:24px; }
.label-scanner-sheet header p { margin:4px 0 0; color:var(--muted); font-size:14px; }
.label-scanner-close { flex:0 0 40px; min-height:40px; border-radius:50%; padding:0; background:#edf2ef; color:#294f4a; font-size:27px; font-weight:500; }
.label-qr-reader { min-height:290px; overflow:hidden; border-radius:14px; background:#0b1714; }
.label-qr-reader video { width:100% !important; min-height:290px; object-fit:cover; }
.label-scanner-status { min-height:22px; margin:12px 0; color:#53645f; text-align:center; font-size:14px; }
.label-scanner-status.error { padding:9px 10px; border-radius:9px; background:#f9e3e0; color:#9a342a; }
.label-scanner-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.label-scanner-actions .secondary-button { min-height:46px; margin:0; }
.label-scanner-file { position:relative; display:flex; align-items:center; justify-content:center; min-height:46px; border-radius:10px; background:var(--brand); color:#fff; font-size:14px; font-weight:800; cursor:pointer; }
.label-scanner-file input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
body.label-scanner-open { overflow:hidden; }
.label-main-preview>img { display:block; width:100%; height:220px; border-radius:12px; object-fit:contain; background:#eef0ed; }
@media (max-width:720px) { .collect-header,.admin-header { align-items:flex-start; flex-direction:column; } .field-grid,.stat-grid,.detail-grid,.filters,.form-actions,.label-summary { grid-template-columns:1fr; } .toolbar,.label-hero,.ledger-pagination { align-items:stretch; flex-direction:column; } .toolbar-actions { display:grid; grid-template-columns:1fr 1fr; } .pagination-links { justify-content:center; } .collect-main,.admin-main { width:min(100% - 20px,1180px); margin-top:12px; } .card,.item-card { padding:18px; } .admin-header nav { font-size:14px; } }