:root{font-family:system-ui,-apple-system,"Noto Sans TC","Microsoft JhengHei",sans-serif;color:#162d3e;background:#f4f7fa;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;min-height:100vh}button,input,select,textarea{font:inherit}button{cursor:pointer}a{color:#156d96;text-decoration:none}button:disabled{opacity:.5;cursor:not-allowed}
.topbar{background:#123b56;color:#fff;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px max(18px,calc((100vw - 1050px)/2));position:sticky;top:0;z-index:10;box-shadow:0 2px 12px #1e344c18}.brand{display:flex;gap:11px;align-items:center}.brand-mark{display:grid;place-items:center;border:2px solid #9ed1e8;border-radius:12px;width:43px;height:43px;font-weight:800;font-size:24px}.brand strong{display:block;font-size:18px;letter-spacing:1px}.brand small{display:block;font-size:12px;opacity:.75}.top-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.top-actions small{color:#cfe4f2}.top-actions button{border:1px solid #86b4ce;color:#fff;background:transparent;padding:7px 9px;border-radius:8px}
.app{width:min(100%,1050px);margin:0 auto;padding:20px 16px 90px;min-height:calc(100vh - 160px)}.footer{text-align:center;padding:14px;color:#688194;font-size:12px}.card{background:#fff;border:1px solid #e1e9f0;border-radius:18px;box-shadow:0 5px 18px #1b4f7510;padding:22px;margin-bottom:15px}.card h2,.card h3{margin-top:0}.card h2{font-size:23px}.card h3{font-size:18px}.card p{line-height:1.65}.narrow{width:min(100%,510px);margin:28px auto}.eyebrow{font-size:12px;font-weight:800;text-transform:uppercase;color:#2281a9;letter-spacing:1.3px;margin-bottom:6px}.lead{font-size:16px;color:#587184}.muted{color:#6a7d8d}.text-small{font-size:13px}.hidden{display:none!important}
.field{display:block;margin:15px 0}.field span{display:block;margin-bottom:7px;font-weight:700;font-size:14px}.field input,.field select,.field textarea{display:block;width:100%;border:1px solid #c7d6e1;border-radius:11px;padding:13px 14px;color:#163449;background:#fff;outline:none;min-height:48px}.field input:focus,.field select:focus,.field textarea:focus{border-color:#1381b1;box-shadow:0 0 0 3px #bfe4f655}.field input[type=file]{padding:10px}.btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;gap:7px;padding:12px 18px;border-radius:11px;border:1px solid transparent;font-weight:750;min-height:46px;white-space:normal}.btn-primary{background:#176d95;color:white}.btn-secondary{background:#eaf3f9;color:#155677}.btn-outline{background:#fff;border-color:#b9cddb;color:#214d65}.btn-danger{background:#b43b3b;color:#fff}.btn:focus-visible{outline:3px solid #71c0ed;outline-offset:2px}.btn-full{width:100%}.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.row-between{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.tile{border:1px solid #dfebf2;background:#f9fcfe;border-radius:14px;padding:16px;text-align:left;min-width:0}.tile b{display:block;font-size:18px}.tile span{color:#6a8192;font-size:13px}.metric{font-size:30px;font-weight:900;color:#164d6d}.pill{border-radius:22px;padding:4px 10px;font-size:12px;font-weight:750;display:inline-block}.pill-approved{background:#e4f6eb;color:#146638}.pill-pending{background:#fff0d6;color:#8b5100}.pill-rejected{background:#feeaea;color:#a53434}.notice{border-radius:12px;padding:12px 14px;background:#e7f4fb;color:#164b67;line-height:1.55;margin:12px 0}.notice-warn{background:#fff2d8;color:#805214}.notice-error{background:#fff0ee;color:#9b3430}.notice-success{background:#e3f7eb;color:#175c38}.demo-banner{background:#fff3d9;border-bottom:1px solid #e8cb84;color:#684705;padding:11px 18px;text-align:center;font-size:14px;font-weight:650}.steps{display:flex;gap:8px;margin-bottom:15px;flex-wrap:wrap}.step{background:#e7eff5;color:#557187;padding:7px 11px;border-radius:22px;font-size:13px;font-weight:700}.step.active{background:#176d95;color:#fff}.counter-hero{font-size:42px;letter-spacing:2px;font-weight:850;font-variant-numeric:tabular-nums;text-align:center;background:#eff7fb;color:#143e56;border-radius:13px;padding:13px 10px;overflow-wrap:anywhere}.photo-preview{display:block;width:100%;max-height:360px;object-fit:contain;background:#192633;border-radius:12px;margin:12px 0}.camera-zone{border:2px dashed #91b7c9;background:#f3fafd;border-radius:17px;padding:25px 16px;text-align:center;cursor:pointer}.camera-icon{font-size:38px}.camera-zone input{max-width:100%}.ocr-progress{height:8px;background:#deedf3;border-radius:10px;overflow:hidden;margin:10px 0}.ocr-progress div{height:100%;background:#1b86ac;transition:width .2s}.review-list{display:grid;gap:10px}.review-item{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:13px 14px;border:1px solid #e4edf3;border-radius:12px;min-width:0}.review-item>div{min-width:0}.review-item b{display:block}.review-item small{color:#647d8e}.table-scroll{overflow-x:auto;width:100%}table{width:100%;border-collapse:collapse;font-size:14px;min-width:610px}th{text-align:left;background:#edf5fa;color:#3c6178;font-size:12px}td,th{padding:11px 12px;border-bottom:1px solid #e6eef2;white-space:nowrap}.tabs{display:flex;gap:7px;overflow:auto;padding:2px 0 12px}.tab{background:#e8f0f6;color:#365a72;border:none;padding:10px 14px;border-radius:10px;font-weight:800}.tab.active{background:#176d95;color:white}.toast{position:fixed;z-index:30;bottom:22px;left:50%;transform:translateX(-50%);max-width:calc(100% - 30px);background:#173d54;color:white;border-radius:12px;padding:13px 18px;box-shadow:0 8px 20px #1237;line-height:1.5}.loading-page{text-align:center;margin-top:100px;color:#50718b}.scanner-area{max-width:500px;margin:15px auto;border-radius:14px;overflow:hidden}.scanner-area video{width:100%}.count-details{display:grid;grid-template-columns:1fr 1fr;gap:10px}.count-details>div{border-radius:10px;background:#f5f9fc;padding:11px}.count-details small{display:block;color:#6e8494}.count-details strong{font-size:20px;font-variant-numeric:tabular-nums}.tag{background:#eef5f8;padding:5px 9px;border-radius:9px;color:#436b81;font-size:12px;font-weight:700}.photo-lock{font-size:12px;color:#57768a}
@media(max-width:600px){.topbar{padding:12px 14px}.brand strong{font-size:16px}.brand small{font-size:11px}.app{padding:15px 12px 60px}.card{padding:16px;border-radius:14px}.card h2{font-size:21px}.grid-2,.grid-3{grid-template-columns:1fr}.tile{padding:14px}.metric{font-size:24px}.counter-hero{font-size:34px}.review-item{align-items:flex-start;flex-direction:column}.review-item .btn{width:100%}.row>.btn{flex:1;min-width:130px}}