/* 品保 app：工業風、字大鈕大（規格書 4.1：主要按鈕 ≥ 64px、通知單號 ≥ 32px；顏色只加強，不單靠顏色）。
   電腦版與平板版同一頁：寬螢幕兩欄，窄螢幕一欄。深淺色跟系統（D121）。 */
:root{
  --bg:#eef0f2; --panel:#ffffff; --ink:#1b1f24; --sub:#5b6570; --line:#c9cfd6;
  --pri:#1f5fa8; --pri-ink:#ffffff; --ok:#1e7a3c; --ok-bg:#e3f4e8; --warn:#8a5a00; --warn-bg:#fff2cc;
  --bad:#b3261e; --bad-bg:#fde7e5; --gray-bg:#e4e7eb; --btn:#dfe3e8; --btn-ink:#1b1f24;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#15181c; --panel:#1f242a; --ink:#e9edf1; --sub:#a3adb8; --line:#3a424b;
    --pri:#4c8fdc; --pri-ink:#0b1320; --ok:#5cc47e; --ok-bg:#163423; --warn:#f0c04a; --warn-bg:#3a2f0e;
    --bad:#ff8a80; --bad-bg:#3e1b19; --gray-bg:#2a3038; --btn:#2c333b; --btn-ink:#e9edf1;
  }
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,"Noto Sans TC","Microsoft JhengHei",sans-serif;font-size:20px}
header{display:flex;gap:12px;align-items:center;padding:10px 16px;background:var(--panel);border-bottom:2px solid var(--line);flex-wrap:wrap}
#brand{font-weight:700;font-size:22px}
#who{flex:1;color:var(--sub);font-size:18px}
#langs button{min-height:44px;min-width:64px;font-size:18px}
main{max-width:1100px;margin:0 auto;padding:16px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px;margin-bottom:16px}
.grid2{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:900px){ .grid2{grid-template-columns:1fr 1fr} }
h1{font-size:26px;margin:0 0 12px} h2{font-size:22px;margin:0 0 10px}
.sub{color:var(--sub);font-size:17px}
.wo{font-size:36px;font-weight:800;letter-spacing:1px;font-variant-numeric:tabular-nums;word-break:break-all}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:20px}
.kv b{color:var(--sub);font-weight:600}
button{font:inherit;border:2px solid var(--line);background:var(--btn);color:var(--btn-ink);border-radius:10px;cursor:pointer;padding:8px 14px}
button:disabled{opacity:.45;cursor:not-allowed}
.big{min-height:72px;font-size:24px;font-weight:700;width:100%}
.pri{background:var(--pri);color:var(--pri-ink);border-color:var(--pri)}
.okb{background:var(--ok);color:#fff;border-color:var(--ok)}
.badb{background:var(--bad);color:#fff;border-color:var(--bad)}
.row{display:flex;gap:12px;flex-wrap:wrap}
.row>*{flex:1 1 200px}
.picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.picks button{min-height:64px;font-size:20px;text-align:left}
.picks button.on{outline:4px solid var(--pri);background:var(--pri);color:var(--pri-ink)}
.picks button .vi{display:block;font-size:15px;opacity:.85}
input[type=text],input[type=number],textarea{font:inherit;font-size:24px;padding:10px 12px;border:2px solid var(--line);border-radius:8px;width:100%;background:var(--panel);color:var(--ink)}
input[type=number]{font-variant-numeric:tabular-nums}
label.f{display:block;font-weight:700;margin:12px 0 6px}
.bar{padding:12px 14px;border-radius:8px;margin:10px 0;font-size:20px;border-left:8px solid}
.bar.err{background:var(--bad-bg);border-color:var(--bad)}
.bar.warn{background:var(--warn-bg);border-color:var(--warn)}
.bar.ok{background:var(--ok-bg);border-color:var(--ok)}
.bar.info{background:var(--gray-bg);border-color:var(--line)}
.done{background:var(--ok-bg);border:3px solid var(--ok);text-align:center;padding:28px}
.done .wo{color:var(--ok)}
.tscroll{overflow-x:auto;max-width:100%}
.kv span,.wo{overflow-wrap:anywhere}
table{border-collapse:collapse;width:100%;font-size:17px}
td,th{border-bottom:1px solid var(--line);padding:6px 8px;text-align:left;vertical-align:top}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:8px;display:none;font-size:18px;max-width:90vw}
#scanbox video{max-height:50vh}