@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Noto+Sans+TC:wght@400;500;600;700;800&display=swap');
:root{color-scheme:light;--ink:#17231f;--muted:#6b7973;--line:#e2e9e4;--paper:#f5f7f3;--card:#fff;--green:#184f3b;--green-2:#28684e;--lime:#d7fa8c;--orange:#ef945a;--shadow:0 16px 46px rgba(25,49,38,.07);font-family:Manrope,"Noto Sans TC",system-ui,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);min-height:100vh}.shell{width:min(100% - 40px,860px);margin:0 auto;padding:28px 0 max(28px,env(safe-area-inset-bottom))}.topbar{height:46px;display:flex;align-items:center;justify-content:space-between;margin-bottom:45px}.brand{display:inline-flex;gap:11px;align-items:center;color:var(--ink);text-decoration:none}.brand-mark{width:35px;height:35px;border-radius:12px;background:var(--green);display:flex;align-items:center;justify-content:center;gap:3px;transform:rotate(-5deg)}.brand-mark span{width:3px;border-radius:5px;background:var(--lime);height:16px;transform:skew(-15deg)}.brand-mark span:nth-child(2){height:21px}.brand-mark span:nth-child(3){height:13px}.brand strong{display:block;font-size:15px;letter-spacing:.04em}.brand small{display:block;margin-top:1px;font:9px "DM Mono",monospace;letter-spacing:.16em;color:var(--muted)}.topbar-right{display:flex;gap:10px;align-items:center}.local-pill,.step-tag{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:rgba(255,255,255,.64);border-radius:99px;padding:7px 11px;color:#56665d;font:10px "DM Mono","Noto Sans TC",monospace;letter-spacing:.04em}.local-pill i{width:7px;height:7px;border-radius:50%;background:#6ca77f;box-shadow:0 0 0 3px #e8f4e9}.icon-button{border:1px solid var(--line);border-radius:50%;width:36px;height:36px;background:#fff;color:var(--green);font-size:20px;cursor:pointer}.intro{display:flex;align-items:flex-end;justify-content:space-between;margin:0 0 30px;position:relative}.eyebrow{font:10px "DM Mono",monospace;letter-spacing:.15em;color:#75877e;margin:0 0 13px}.intro h1{font-size:clamp(34px,7vw,54px);line-height:1.23;letter-spacing:-.065em;margin:0;font-weight:800}.intro h1 em{font-style:normal;color:var(--green-2)}.intro-text{color:var(--muted);font-size:14px;margin:14px 0 0;letter-spacing:.01em}.intro-stamp{margin:0 17px 14px 20px;width:78px;height:78px;border:1px solid #cdd9d0;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;color:#8c9c91;transform:rotate(13deg);font:8px "DM Mono",monospace;letter-spacing:.17em;flex:none}.intro-stamp b{font-size:22px;font-weight:400;color:var(--orange);line-height:1.1}.panel{background:var(--card);border:1px solid #e8eee9;border-radius:20px;box-shadow:var(--shadow)}.scan-card{padding:26px 30px 27px}.section-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}.section-head .eyebrow{margin:0 0 4px}.section-head h2{font-size:20px;line-height:1.4;letter-spacing:-.04em;margin:0;font-weight:750}.step-tag{font-size:10px;background:#f7faf7}.photo-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}.action-button{min-height:72px;border:1px solid var(--line);border-radius:13px;display:flex;align-items:center;gap:13px;padding:13px 16px;cursor:pointer;transition:transform .16s,border-color .16s,background .16s}.action-button:hover{transform:translateY(-1px);border-color:#a6b8aa;background:#fbfdfb}.action-primary{background:var(--green);color:#fff;border-color:var(--green)}.action-primary:hover{background:#215e46;border-color:#215e46}.button-icon{width:37px;height:37px;display:grid;place-items:center;background:#eff4ef;color:var(--green);border-radius:11px;font-size:22px;flex:none}.action-primary .button-icon{background:rgba(255,255,255,.14);color:var(--lime)}.action-button>span:last-child{font-size:14px;font-weight:700}.action-button small{display:block;color:var(--muted);font-size:10px;font-weight:400;margin-top:2px}.action-primary small{color:#bdcec4}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.photo-stage{position:relative;margin-top:14px;max-height:320px;border-radius:14px;background:#eff3ef;overflow:hidden;display:grid;place-items:center}.photo-stage[hidden]{display:none}.photo-stage img{display:block;max-width:100%;max-height:320px;object-fit:contain}.remove-photo{position:absolute;top:9px;right:9px;border:0;background:rgba(23,35,31,.75);color:white;border-radius:50%;width:30px;height:30px;font-size:21px;line-height:1;cursor:pointer}.scan-progress{display:flex;align-items:center;gap:10px;margin:15px 0 0;color:#586b60;font-size:12px;min-height:24px}.scan-progress[hidden]{display:none}.spinner{width:15px;height:15px;border:2px solid #dae6dc;border-top-color:var(--green-2);border-radius:50%;animation:spin .8s linear infinite}.progress-track{height:4px;background:#edf1ed;border-radius:9px;flex:1;overflow:hidden;max-width:120px}.progress-track i{height:100%;display:block;width:0;background:var(--green-2);transition:width .2s}.scan-button{width:100%;margin-top:15px}.primary-button{border:0;border-radius:11px;background:var(--green);color:#fff;font:700 13px Manrope,"Noto Sans TC",sans-serif;letter-spacing:.015em;cursor:pointer;transition:background .16s,transform .16s}.primary-button:hover:not(:disabled){background:#28684e;transform:translateY(-1px)}.primary-button:disabled{cursor:not-allowed;background:#aebdb2;color:#f4f7f4}.scan-button{height:47px;font-size:14px}.scan-button span{color:var(--lime);font-size:16px;margin-right:5px}.microcopy{text-align:center;font-size:10px;color:#89958e;margin:9px 0 22px}.manual-entry label{display:block;font-size:12px;font-weight:700;margin-bottom:8px}.input-row{display:flex;gap:9px}input{font:inherit}.input-row input{min-width:0;width:100%;border:1px solid var(--line);background:#fbfcfa;border-radius:10px;color:var(--ink);padding:12px 13px;outline:none;font:14px "DM Mono","Noto Sans TC",monospace;letter-spacing:.06em}.input-row input:focus{border-color:#7d9d86;box-shadow:0 0 0 3px #eaf3e9}.input-row input::placeholder{font-family:Manrope,"Noto Sans TC",sans-serif;letter-spacing:0;color:#a3aca6;font-size:12px}.check-button{padding:0 17px;white-space:nowrap}.ocr-text-wrap{border-top:1px solid var(--line);margin-top:20px;padding-top:14px}.ocr-caption{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:10px;margin-bottom:8px}.ocr-caption span:first-child{font-weight:700;color:var(--ink);font-size:11px}.candidate-list{display:flex;flex-wrap:wrap;gap:7px}.candidate-chip{border:1px solid #cfdccf;background:#f7fbf5;color:var(--green);padding:7px 10px;border-radius:8px;font:600 12px "DM Mono",monospace;letter-spacing:.06em;cursor:pointer}.candidate-chip:hover,.candidate-chip.selected{background:#e6f2e2;border-color:#8db092}.raw-details{margin-top:9px;color:#86928b;font-size:10px}.raw-details summary{cursor:pointer}.raw-details pre{white-space:pre-wrap;word-break:break-word;background:#f7f9f6;border-radius:8px;padding:10px;color:#53635a;font:11px/1.5 "DM Mono",monospace}.match-result{margin-top:18px;padding:15px 16px;border-radius:12px;border:1px solid #d9e8d9;background:#f3faf1}.match-result.not-found{border-color:#f0dfc9;background:#fff9f0}.result-top{display:flex;gap:10px;align-items:center}.result-mark{width:29px;height:29px;border-radius:50%;background:#dff0da;display:grid;place-items:center;color:#2e7049;flex:none}.not-found .result-mark{background:#f7e9d6;color:#a6692c}.result-copy strong{display:block;font-size:13px}.result-copy small{display:block;margin-top:2px;color:var(--muted);font-size:10px}.result-members{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}.result-member{background:#fff;border:1px solid #e1eae0;border-radius:8px;padding:7px 9px;font-size:11px}.result-member b{font:600 12px "DM Mono","Noto Sans TC",monospace;margin-right:7px;color:var(--green)}.member-empty{padding:22px 5px;text-align:center;color:#98a39b;font-size:11px}.footer{display:flex;justify-content:space-between;margin:22px 5px 0;color:#89958d;font:9px "DM Mono","Noto Sans TC",monospace;letter-spacing:.09em}.footer b{color:var(--orange);padding:0 3px}@keyframes spin{to{transform:rotate(360deg)}}button:focus-visible,.action-button:focus-within,.candidate-chip:focus-visible{outline:2px solid #548366;outline-offset:3px}button:focus:not(:focus-visible){outline:none}
@media(max-width:600px){.shell{width:min(100% - 26px,860px);padding-top:18px}.topbar{margin-bottom:36px}.intro{margin-bottom:23px}.intro-stamp{width:60px;height:60px;margin-right:5px;margin-bottom:8px}.intro-stamp b{font-size:17px}.intro-stamp span{font-size:7px}.intro-text{font-size:12px;max-width:300px;line-height:1.7}.intro h1{font-size:clamp(34px,9vw,46px)}.scan-card{padding:20px 17px;border-radius:16px}.section-head{margin-bottom:16px}.photo-actions{gap:8px}.action-button{min-height:67px;padding:10px;gap:8px}.button-icon{width:32px;height:32px;border-radius:9px;font-size:19px}.action-button>span:last-child{font-size:12px}.action-button small{font-size:9px}.step-tag{font-size:9px;padding:6px 8px}.input-row{gap:7px}.check-button{padding:0 12px;font-size:12px}.microcopy{font-size:9px}.footer{font-size:8px}.ocr-caption{font-size:9px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
.photo-stage{position:relative;touch-action:pan-y}.photo-stage.crop-mode{cursor:crosshair;touch-action:none}.crop-selection{position:absolute;z-index:2;border:2px solid #d7fa8c;border-radius:4px;background:rgba(215,250,140,.12);box-shadow:0 0 0 999px rgba(12,24,18,.34);pointer-events:none}.crop-controls{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:9px}.crop-controls[hidden]{display:none}.crop-button,.crop-clear{border:1px solid #cfdbd0;border-radius:8px;padding:7px 10px;background:#f8fbf7;color:#28563f;font:600 11px Manrope,"Noto Sans TC",sans-serif;cursor:pointer}.crop-button:hover,.crop-clear:hover{background:#edf5ec}.crop-hint{font-size:10px;color:#78877e}.crop-controls span{flex:1 1 180px;font-size:10px;color:#78877e;line-height:1.5}
.plate-overlay{position:absolute;z-index:1;pointer-events:none;overflow:visible}.plate-overlay polygon{fill:rgba(215,250,140,.12);stroke:#d7fa8c;stroke-width:8;vector-effect:non-scaling-stroke;stroke-linejoin:round}.detection-note{margin:8px 0 0;color:#54715f;font-size:11px;line-height:1.5}.detection-note[hidden]{display:none}
.scan-progress[data-state=done] .spinner,.scan-progress[data-state=warn] .spinner,.scan-progress[data-state=error] .spinner{animation:none;border:0;display:grid;place-items:center;font:700 13px/1 Manrope,sans-serif}.scan-progress[data-state=done] .spinner::before{content:"✓";color:var(--green-2)}.scan-progress[data-state=warn] .spinner::before,.scan-progress[data-state=error] .spinner::before{content:"!";color:#c07436}.scan-progress[data-state=done] .progress-track i{background:#5c936e}.scan-progress[data-state=warn] .progress-track i{background:#d28b50}.scan-progress[data-state=error] .progress-track{display:none}
.candidate-chip small{display:block;margin-top:3px;color:#7c9180;font:9px "DM Mono","Noto Sans TC",monospace;letter-spacing:0}.candidate-chip.selected small{color:#376449}
.candidate-chip.suggestion{border-style:dashed;background:#fffaf2;color:#8a5a26;border-color:#e8cfa9}.candidate-chip.suggestion small{color:#a17a4c}