:root{
  --bg:#f1f5f9; --card:#fff; --ink:#0f172a; --muted:#64748b; --line:#cbd5e1;
  --head:#0f172a; --primary:#2563eb; --ok:#16a34a; --warn:#ea580c; --err:#dc2626;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-tap-highlight-color:transparent}
header{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px;padding:10px 14px;padding-top:calc(10px + env(safe-area-inset-top));background:var(--head);color:#fff}
header h1{margin:0;font-size:20px;flex:0 0 auto}
.pill{flex:1;font-size:13px;padding:5px 10px;border-radius:99px;background:#334155;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pill.online{background:#166534}.pill.offline{background:#9a3412}.pill.syncing{background:#1d4ed8}
button{font:inherit;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:10px;padding:12px 14px;min-height:48px;cursor:pointer}
button:active{transform:scale(.98)}
button.primary{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:600}
button.danger{color:var(--err);border-color:#fecaca}
button.big{width:100%;font-size:18px}
button.icon{background:transparent;border:0;color:#fff;font-size:24px;padding:4px 8px;min-height:40px}
main{padding:12px 14px 40px;max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
input,select{font:inherit;width:100%;padding:12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);min-height:48px}

.seg{display:flex;background:#e2e8f0;border-radius:12px;padding:4px;gap:4px}
.seg button{flex:1;border:0;background:transparent;font-weight:600;color:var(--muted)}
.seg button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.15)}
body.mode-check .seg button[data-mode=check]{background:var(--primary);color:#fff}
body.mode-place .seg button[data-mode=place]{background:#7c3aed;color:#fff}
body.mode-check #posBox{display:none}

.pos{background:var(--card);border:2px solid #7c3aed;border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:8px}
.posrow{display:flex;gap:8px}
.posrow select{flex:1;font-size:20px;font-weight:700;text-align:center}
.poslabel{text-align:center;font:700 22px ui-monospace,Consolas,monospace;color:#7c3aed}
.nostruct{text-align:center;color:var(--warn);font-weight:600;padding:10px}
body.has-struct .nostruct{display:none}
body:not(.has-struct) #posSel{display:none}
.grid{position:relative;display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:5px;max-height:260px;overflow-y:auto;padding:2px}
.grid button{min-height:42px;padding:0;font:600 15px system-ui;border-radius:8px;border:2px solid var(--line);background:#fff}
.grid button.fill{background:#bbf7d0;border-color:#86efac;color:#166534}
.grid button.loc{background:#ede9fe;border-color:#c4b5fd;color:#6d28d9}
.grid button.bad{background:#fecaca;border-color:#fca5a5;color:#991b1b}
.grid button.cur{border-color:#7c3aed;box-shadow:0 0 0 3px #c4b5fd;font-weight:800}
.legend{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;font-size:12px;color:var(--muted)}
.legend span::before{content:'';display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;vertical-align:-1px;border:1px solid var(--line);background:#fff}
.legend .loc::before{background:#ede9fe}.legend .fill::before{background:#bbf7d0}.legend .bad::before{background:#fecaca}

#readerWrap{position:relative;background:#000;border-radius:14px;overflow:hidden;min-height:200px}
#reader{width:100%}
#reader video{width:100%!important;display:block}
#camOff{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#94a3b8}
#readerWrap.on #camOff{display:none}

.last{border-radius:14px;padding:14px;background:var(--card);border:3px solid var(--line);text-align:center}
.last .code{font:700 22px/1.2 ui-monospace,Consolas,monospace;word-break:break-all}
.last .meta{color:var(--muted);font-size:14px;margin-top:4px}
.last .msg{font-weight:700;margin-top:6px}
.last .msg:empty{display:none}
.last.ok{border-color:var(--ok);background:#dcfce7}
.last.warn{border-color:var(--warn);background:#ffedd5}
.last.err{border-color:var(--err);background:#fee2e2}
.last.pend{border-color:#94a3b8;background:#f8fafc}
.last.flash{animation:flash .35s}
@keyframes flash{from{filter:brightness(1.25)}to{filter:none}}
.info{margin:8px auto 0;border-collapse:collapse;font-size:15px}
.info td{padding:2px 8px;text-align:left}
.info td:first-child{color:var(--muted)}
.info td:last-child{font-weight:700}

#manual{display:flex;gap:8px}
#manual button{flex:0 0 auto}
.row{display:flex;gap:8px;flex-wrap:wrap}
.row button{flex:1}
.listhead{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
h2{margin:8px 0 0;font-size:17px}
#count{color:var(--muted);font-weight:400;font-size:14px}
label.check{display:flex;align-items:center;gap:8px}
label.check input{width:22px;height:22px;min-height:0}
label.small{font-size:14px;color:var(--muted)}

#list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
#list li{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-left-width:5px;border-radius:10px;padding:8px 10px}
#list li.ok{border-left-color:var(--ok)}#list li.warn{border-left-color:var(--warn)}#list li.err{border-left-color:var(--err)}#list li.pend{border-left-color:#94a3b8}
#list .st{flex:0 0 auto;font-size:18px;width:22px;text-align:center}
#list .body{flex:1;min-width:0}
#list .c{font:600 15px ui-monospace,Consolas,monospace;word-break:break-all}
#list .p{display:inline-block;background:#ede9fe;color:#6d28d9;border-radius:6px;padding:0 6px;font:600 12px system-ui;margin-left:6px;vertical-align:middle}
#list .p.chk{background:#dbeafe;color:#1d4ed8}
#list .m{font-size:13px;color:var(--ink)}
#list .t{font-size:12px;color:var(--muted)}
#list .del{flex:0 0 auto;min-height:36px;padding:4px 10px;color:var(--err);border-color:transparent;background:transparent;font-size:18px}

dialog{border:0;border-radius:16px;padding:0;width:min(560px,94vw)}
dialog::backdrop{background:rgba(15,23,42,.6)}
dialog form{padding:18px;display:flex;flex-direction:column;gap:12px}
dialog h2{margin:0}
dialog label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600}
.muted{color:var(--muted);font-size:13px;margin:0;white-space:pre-line}
#toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);background:#0f172a;color:#fff;padding:10px 16px;border-radius:10px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .2s;max-width:90vw;z-index:20}
#toast.show{opacity:1}