:root { --green:#137A52; --green-dark:#0c5c3c; --ink:#202A25; --cream:#F7F8F4; --wheat:#D6A15D; --line:#e4e9e3; --soft:#edf5ef; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:#edf0ed; font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif; }
button,input,select { font:inherit; }
button { cursor:pointer; }
.app-shell { min-height:100vh; margin:0 auto; background:var(--cream); overflow:hidden; position:relative; }
.consumer-page { padding:0 18px calc(96px + env(safe-area-inset-bottom)); }
.consumer-topbar { height:66px; display:flex; align-items:center; justify-content:space-between; padding:env(safe-area-inset-top) 18px 0; background:rgba(247,248,244,.97); position:sticky; top:0; z-index:8; }
.consumer-topbar h1 { margin:0; font-size:17px; font-weight:750; }
.topbar-spacer { width:44px; }
.consumer-topbar .brand { font-size:20px; font-weight:800; color:var(--ink); }
.consumer-topbar .brand svg { color:var(--green); }
.consumer-topbar .icon-button { border:0; background:none; width:44px; height:44px; color:var(--ink); display:grid; place-items:center; }
.consumer-home { padding:0 18px 100px; }
.consumer-hero { position:relative; overflow:hidden; min-height:292px; border-radius:22px; background:#d0b18a; box-shadow:0 8px 24px rgba(21,55,35,.08); }
.consumer-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,255,255,.82) 0%,rgba(255,255,255,.05) 33%,rgba(17,43,28,.20) 100%); pointer-events:none; }
.consumer-hero-copy { position:relative; z-index:2; padding:22px 20px 0; }
.consumer-hero-copy h1 { margin:0 0 6px; font-size:30px; letter-spacing:.02em; color:#123e2d; }
.consumer-hero-copy p { margin:0; color:#58645c; font-size:15px; }
.consumer-hero-photo { position:absolute; inset:108px 0 0; width:100%; height:184px; object-fit:cover; }
.consumer-hero-label { position:absolute; z-index:3; bottom:15px; left:15px; border-radius:11px; background:rgba(255,255,255,.86); padding:8px 12px; display:grid; gap:2px; }
.consumer-hero-label strong { font-size:16px; }.consumer-hero-label span { font-size:13px; color:#667068; }
.consumer-hero-note { position:absolute; z-index:3; top:79px; right:22px; color:#a76e36; font-family:KaiTi,STKaiti,serif; transform:rotate(-9deg); font-size:16px; line-height:1.35; text-align:center; text-shadow:0 1px 0 rgba(255,255,255,.72); }
.consumer-scan-panel { background:#fff; border-radius:0 0 18px 18px; margin:-2px 8px 26px; padding:11px 10px 12px; box-shadow:0 5px 16px rgba(22,53,34,.08); position:relative; z-index:4; }
.consumer-scan-button { width:100%; min-height:50px; font-size:17px; font-weight:700; display:flex; gap:9px; align-items:center; justify-content:center; }
.consumer-code-form { display:flex; align-items:center; gap:7px; margin:10px 4px 0; }
.consumer-code-form label { white-space:nowrap; color:var(--green); font-size:13px; }.consumer-code-form .input { min-width:0; border:0; border-bottom:1px solid #bed4c7; border-radius:0; padding:7px 2px; background:transparent; font-size:13px; }.consumer-code-form button { border:0; color:var(--green); background:transparent; white-space:nowrap; font-size:13px; }.consumer-scan-panel>.small { margin:7px 4px 0; }
.consumer-section { margin:0 0 22px; }.section-title { display:flex; align-items:center; justify-content:space-between; margin:0 0 11px; }.section-title h2 { margin:0; font-size:18px; }.section-title a { color:#6b746e; display:flex; align-items:center; gap:2px; font-size:13px; text-decoration:none; }
.consumer-product-card { display:flex; min-height:78px; border-radius:14px; background:#fff; padding:8px; align-items:center; gap:11px; color:inherit; text-decoration:none; box-shadow:0 4px 12px rgba(31,58,40,.05); }.consumer-product-photo { width:62px; height:62px; border-radius:9px; object-fit:cover; }.consumer-product-copy { flex:1; display:grid; gap:5px; }.consumer-product-copy strong { font-size:16px; }.consumer-product-copy small { color:#78817b; }
.consumer-shortcuts { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.consumer-shortcut { color:var(--ink); display:flex; align-items:center; padding:13px 10px; border-radius:13px; background:#fff; text-decoration:none; gap:9px; box-shadow:0 4px 12px rgba(31,58,40,.045); }.consumer-shortcut svg { color:var(--green); }.consumer-shortcut span { display:grid; gap:3px; }.consumer-shortcut b { font-size:14px; }.consumer-shortcut small { font-size:11px; color:#778078; white-space:nowrap; }
.consumer-project-intro { margin:22px 4px 0; color:#78817b; font-size:12px; line-height:1.65; text-align:center; }
.consumer-nav { position:fixed; z-index:20; bottom:0; left:50%; transform:translateX(-50%); width:min(100%,430px); min-height:65px; padding-bottom:env(safe-area-inset-bottom); background:rgba(255,255,255,.94); border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(3,1fr); }.consumer-nav .nav-item { text-decoration:none; color:#8d958f; min-height:62px; display:grid; align-content:center; justify-items:center; gap:2px; font-size:12px; }.consumer-nav .nav-item.active { color:var(--green); font-weight:700; }
.consumer-page-intro { color:#657069; margin:4px 0 16px; font-size:14px; }.consumer-merchant-card { display:flex; align-items:center; gap:12px; padding:10px; min-height:96px; background:#fff; border-radius:14px; text-decoration:none; color:var(--ink); box-shadow:0 4px 14px rgba(31,58,40,.05); }.consumer-merchant-photo { width:76px; height:76px; object-fit:cover; border-radius:10px; }.consumer-merchant-card>span { display:grid; flex:1; gap:5px; }.consumer-merchant-card strong { font-size:16px; }.consumer-merchant-card small { color:#6c756f; font-size:13px; }.consumer-merchant-card em { font-size:12px; font-style:normal; color:var(--green); }
.consumer-merchant-hero { border-radius:16px; background:#fff; overflow:hidden; box-shadow:0 4px 14px rgba(31,58,40,.05); margin:0 0 23px; }.consumer-merchant-hero>.photo { display:block; width:100%; height:150px; object-fit:cover; }.consumer-merchant-hero>div { padding:14px 15px; }.consumer-merchant-hero h2 { margin:0 0 5px; font-size:20px; }.consumer-merchant-hero p { margin:0 0 6px; color:#68726b; line-height:1.5; }.consumer-merchant-hero .small { font-size:12px; }.consumer-merchant-hero svg { color:var(--green); vertical-align:-3px; }
.consumer-batch-group { position:relative; padding:13px; background:#fff; border:0; border-radius:15px; box-shadow:0 4px 14px rgba(31,58,40,.05); }.consumer-batch-product { width:70px; height:70px; border-radius:10px; object-fit:cover; float:left; margin-right:11px; }.consumer-batch-title { min-height:76px; }.consumer-batch-title h3 { margin:0 0 5px; font-size:17px; }.consumer-batch-title p { margin:0 0 4px; font-size:13px; color:#69736c; }.consumer-batch-title span { color:var(--green); font-size:13px; }.consumer-batch-links { clear:both; border-top:1px solid var(--line); }.consumer-batch-links a { min-height:52px; display:flex; align-items:center; justify-content:space-between; text-decoration:none; color:var(--ink); }.consumer-batch-links span { display:grid; gap:3px; }.consumer-batch-links small { color:#78817a; }
.consumer-merchant-licenses { margin:22px 0 4px; }.consumer-merchant-licenses .consumer-doc { padding:10px 12px; background:#fff; border:0; border-radius:13px; box-shadow:0 4px 14px rgba(31,58,40,.05); }
.consumer-trace { padding-bottom:122px; }.consumer-trace-head { display:flex; gap:12px; align-items:center; padding:8px; border:0; border-radius:15px; box-shadow:0 4px 14px rgba(31,58,40,.05); background:#fff; }.consumer-trace-product { width:82px; height:82px; border-radius:10px; object-fit:cover; }.consumer-trace-head>div { flex:1; }.consumer-trace-head h2 { font-size:18px; margin:0; }.consumer-trace-head p { margin:6px 0 0; color:#68726d; font-size:13px; }.consumer-trace-head .row { justify-content:space-between; }.consumer-trace-head .demo-badge { font-size:10px; }
.consumer-published-at { margin:8px 4px 10px; color:#718078; font-size:12px; text-align:right; }
.consumer-facts { display:grid; grid-template-columns:repeat(3,1fr); margin:12px 0; background:#fff; border-radius:14px; padding:13px 8px; }.consumer-facts>div { padding:0 9px; border-right:1px solid var(--line); }.consumer-facts>div:last-child { border:0; }.consumer-facts dt { color:#778079; font-size:11px; white-space:nowrap; }.consumer-facts dd { margin:5px 0 0; font-size:13px; font-weight:650; }.consumer-trace-tabs { display:flex; border-radius:13px; background:#fff; padding:0 8px; margin:0 0 18px; height:50px; align-items:end; justify-content:space-around; }.consumer-trace-tabs button { border:0; background:transparent; font-size:14px; color:#777f7a; height:50px; padding:16px 4px 11px; }.consumer-trace-tabs .active { color:var(--green); font-weight:700; border-bottom:2px solid var(--green); }.is-hidden { display:none!important; }.consumer-focus-target { outline:2px solid rgba(19,122,82,.5); outline-offset:4px; border-radius:8px; }
.consumer-timeline>h2,.consumer-evidence>h2 { margin:0 0 13px; font-size:19px; }.consumer-stage { min-height:92px; display:flex; position:relative; gap:12px; }.consumer-stage:not(:last-child)::before { content:""; position:absolute; width:1px; background:#8db9a4; top:32px; bottom:2px; left:15px; border-left:1px dashed #66a988; }.consumer-stage-index { width:31px; height:31px; border-radius:50%; display:grid; place-items:center; flex:none; background:var(--green); color:#fff; font-size:11px; font-weight:700; z-index:1; }.consumer-stage-main { flex:1; padding:1px 0 13px; }.consumer-stage h3 { margin:0 0 4px; font-size:16px; }.consumer-stage p { margin:0; color:#69736d; font-size:13px; }.consumer-stage-note { margin-top:6px!important; line-height:1.45; }.consumer-stage-photo { align-self:start; padding:0; overflow:hidden; border:0; background:none; width:105px; height:74px; border-radius:8px; }.consumer-stage-photo img { width:100%; height:100%; object-fit:cover; }.consumer-evidence-link { border:0; padding:7px 0 0; color:var(--green); background:none; font-size:13px; display:flex; align-items:center; }.consumer-stage-missing .consumer-stage-index { background:#d7ddd8; color:#667069; }.consumer-stage-missing::before { border-color:#d1d7d2!important; }
.consumer-evidence { background:#fff; border-radius:15px; padding:15px; margin-top:8px; }.consumer-evidence>h2 { font-size:17px; }.consumer-doc { width:100%; min-height:55px; display:flex; align-items:center; text-align:left; gap:10px; padding:8px 0; border:0; border-top:1px solid var(--line); background:none; color:var(--ink); }.consumer-doc>svg:first-child { color:var(--green); }.consumer-doc>span { flex:1; display:grid; gap:3px; }.consumer-doc b { font-size:14px; }.consumer-doc small { color:#7a837d; }.consumer-doc-missing,.consumer-no-docs { color:#78817c; font-size:13px; margin:0; }.consumer-no-docs p { margin:0 0 4px; }.consumer-trace-actions { position:fixed; left:50%; transform:translateX(-50%); bottom:0; z-index:22; padding:10px 17px calc(10px + env(safe-area-inset-bottom)); width:min(100%,430px); background:rgba(247,248,244,.95); display:grid; grid-template-columns:1fr 1fr; gap:10px; box-shadow:0 -4px 14px rgba(30,59,41,.07); }.consumer-trace-actions .btn { min-height:48px; display:flex; justify-content:center; align-items:center; gap:6px; }
.consumer-ask { display:flex; min-height:calc(100vh - 66px); flex-direction:column; padding-bottom:18px; }.consumer-ask-intro { display:flex; gap:12px; align-items:center; background:#e9f3ec; border-radius:15px; padding:14px; }.consumer-ask-intro>span { color:var(--green); width:48px; height:48px; display:grid; place-items:center; border-radius:50%; background:#fff; }.consumer-ask-intro h2 { margin:0 0 4px; font-size:17px; }.consumer-ask-intro p { margin:0; color:#647068; font-size:13px; }.consumer-question-chips { display:flex; gap:8px; flex-wrap:wrap; padding:13px 0; }.consumer-question-chips button { border:1px solid #b8d3c2; border-radius:20px; color:var(--green); background:#fff; padding:8px 11px; font-size:13px; }.consumer-chat { flex:1; min-height:255px; overflow:auto; display:flex; flex-direction:column; gap:10px; padding:8px 0; }.consumer-chat-answer,.consumer-chat-question { max-width:86%; margin:0; padding:11px 12px; border-radius:12px; font-size:14px; line-height:1.5; }.consumer-chat-answer { background:#fff; align-self:flex-start; border:1px solid #edf0ed; }.consumer-chat-question { background:var(--green); color:#fff; align-self:flex-end; }.consumer-chat p { margin:0; }.consumer-chat footer { margin-top:8px; }.consumer-chat footer a,.consumer-chat footer button { color:var(--green); background:none; border:0; padding:0; font-size:13px; text-decoration:underline; }.consumer-ask-form { display:flex; gap:8px; margin-top:8px; }.consumer-ask-form .input { min-width:0; flex:1; }.consumer-ask-form .btn { flex:none; }.consumer-human-link { color:#66736b; background:none; border:0; font-size:13px; padding:16px 0 2px; }.consumer-human-link svg { color:var(--green); vertical-align:-4px; }
.consumer-reserve-product { display:flex; align-items:center; gap:12px; padding:9px; border:0; background:#fff; border-radius:14px; }.consumer-reserve-product img { width:75px; height:75px; object-fit:cover; border-radius:10px; }.consumer-reserve-product h2 { font-size:18px; margin:0 0 6px; }.consumer-reserve-product p { margin:0 0 7px; color:#6d756f; font-size:13px; }.consumer-reserve-product b { color:var(--green); font-size:14px; }.consumer-reserve-form { margin-top:20px; }.consumer-reserve-form .field { margin-bottom:17px; }.consumer-reserve-form label { display:block; margin:0 0 7px; font-size:14px; font-weight:650; }.consumer-reserve-form .input,.consumer-reserve-form .select { width:100%; min-height:46px; border:1px solid #d7ded9; border-radius:10px; background:#fff; padding:0 12px; color:var(--ink); }.consumer-reserve-submit { width:100%; min-height:50px; margin-top:8px; }.form-error { min-height:18px; margin:6px 0; color:#bb3b31; font-size:13px; }
.consumer-result { text-align:center; padding-top:46px; }.consumer-result-mark { width:70px; height:70px; display:grid; place-items:center; background:#e5f2e9; border-radius:50%; color:var(--green); margin:0 auto 16px; }.consumer-result h1 { font-size:22px; margin:0 0 7px; }.consumer-result>p { color:#677069; margin:0 0 24px; }.consumer-reservation-card { text-align:left; padding:17px; margin-bottom:20px; background:#fff; border:0; border-radius:15px; }.consumer-reservation-card h2 { margin:12px 0; font-size:18px; }.consumer-reservation-card dl { margin:0; display:grid; gap:10px; }.consumer-reservation-card dl>div { display:flex; justify-content:space-between; border-top:1px solid var(--line); padding-top:10px; }.consumer-reservation-card dt { color:#727b75; font-size:13px; }.consumer-reservation-card dd { margin:0; font-size:13px; font-weight:600; }
.consumer-profile { display:flex; align-items:center; gap:12px; padding:20px 0; }.consumer-profile>svg { width:54px; height:54px; padding:12px; color:var(--green); border-radius:50%; background:#e7f3eb; }.consumer-profile h2 { font-size:18px; margin:0 0 5px; }.consumer-profile p { margin:0; color:#7c857f; font-size:13px; }.consumer-me-section { margin-top:13px; }.consumer-reservation-item { border:0; padding:14px; background:#fff; box-shadow:0 4px 14px rgba(31,58,40,.04); }.consumer-reservation-item .row { align-items:center; justify-content:space-between; }.consumer-reservation-item h3 { margin:0; font-size:16px; }.consumer-reservation-item p { margin:7px 0 0; font-size:13px; }.consumer-reservation-item .btn { min-height:36px; padding:6px 0; color:#a04f46; }.consumer-recent-list { background:#fff; border-radius:14px; padding:3px 12px; }.consumer-recent-list>a { min-height:61px; display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); border-bottom:1px solid var(--line); }.consumer-recent-list>a:last-child { border:0; }.consumer-recent-list img { width:43px; height:43px; object-fit:cover; border-radius:7px; }.consumer-recent-list span { flex:1; display:grid; gap:3px; }.consumer-recent-list b { font-size:14px; }.consumer-recent-list small { color:#79817b; }.consumer-demo-note { background:#e9f1eb; border-radius:14px; padding:15px; margin:22px 0; }.consumer-demo-note h2 { display:flex; align-items:center; gap:5px; margin:0 0 6px; font-size:15px; }.consumer-demo-note h2 svg { color:var(--green); }.consumer-demo-note p { margin:0; color:#6c756f; font-size:13px; line-height:1.5; }.consumer-demo-note .btn { padding:8px 0 0; min-height:auto; color:var(--green); display:flex; align-items:center; gap:4px; }
.consumer-empty { margin:28px 0; }.consumer-empty h2 { font-size:17px; }.consumer-empty p { max-width:250px; margin:7px auto 14px; line-height:1.5; }.empty-leaf { margin:auto; width:50px; height:50px; display:grid; place-items:center; border-radius:50%; background:#e7f2eb; color:var(--green); }.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (min-width: 431px) { .app-shell { box-shadow:0 0 30px rgba(26,57,38,.14); } }
@media (max-width:359px) { .consumer-page,.consumer-home { padding-left:14px; padding-right:14px; }.consumer-hero-copy h1 { font-size:27px; }.consumer-shortcut { padding:11px 7px; gap:6px; }.consumer-shortcut small { font-size:10px; }.consumer-stage-photo { width:86px; }.consumer-facts>div { padding:0 5px; }.consumer-facts dd { font-size:12px; } }