:root{--bg:#f4f6fb;--card:#fff;--text:#14213d;--text-2:#46506e;--text-3:#7a839f;--line:#e1e5f0;--acc:#1539a8;--acc-t:#e8edfb;--bad:#c0392b;--ok:#17803d;--amber:#b45309;--shadow:0 1px 2px rgba(20,33,61,.06)}
body.dark{--bg:#0e1424;--card:#161e36;--text:#e8ecf8;--text-2:#b6bfdc;--text-3:#8792b5;--line:#2a3558;--acc:#7b9bff;--acc-t:#1d2850;--bad:#ff8a7a;--ok:#5fd18b;--amber:#f5b24a;--shadow:none}
@media (prefers-color-scheme:dark){body:not(.light){--bg:#0e1424;--card:#161e36;--text:#e8ecf8;--text-2:#b6bfdc;--text-3:#8792b5;--line:#2a3558;--acc:#7b9bff;--acc-t:#1d2850;--bad:#ff8a7a;--ok:#5fd18b;--amber:#f5b24a;--shadow:none}}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Inter,system-ui,sans-serif;font-size:14px;background:var(--bg);color:var(--text);min-height:100vh}
a{color:var(--acc);text-decoration:none}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px}
.note{color:var(--text-3);font-size:12.5px;line-height:1.45}.note.bad{color:var(--bad)}
#gate{position:fixed;inset:0;background:var(--bg);display:grid;place-items:center;text-align:center;z-index:50;color:var(--text-3)}
#gateMsg{margin-top:12px;font-size:13px}
.spin{width:26px;height:26px;border:3px solid var(--line);border-top-color:var(--acc);border-radius:50%;animation:s .8s linear infinite;margin:0 auto}@keyframes s{to{transform:rotate(360deg)}}
/* top bar */
#top{display:flex;align-items:center;gap:10px;padding:8px 14px;background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
#ham{display:none;background:none;border:0;color:var(--text);font-size:18px;padding:6px}
.brand{display:flex;align-items:center;gap:8px;color:var(--text);font-weight:700;font-size:16px}.brand img{height:28px;width:auto}.brand b{color:var(--acc)}.brand .bs{font-weight:500;color:var(--text-3);font-size:13px}
#nav{display:flex;gap:2px;margin-left:12px}.sp{flex:1}
.nv,.ddb{display:flex;align-items:center;gap:7px;padding:8px 11px;border-radius:8px;color:var(--text-2);background:none;border:0;font:inherit;font-weight:500;cursor:pointer;white-space:nowrap}
.nv:hover,.ddb:hover,.nv.on{background:var(--acc-t);color:var(--acc)}.nv.soon{opacity:.6}.tag{font-size:10px;background:var(--line);padding:1px 6px;border-radius:9px}
.dd{position:relative}.ddm{display:none;position:absolute;top:100%;left:0;min-width:230px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:5px;box-shadow:0 8px 24px rgba(0,0,0,.15)}.dd.open .ddm{display:block}
.ddm .nv{width:100%}.who{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2;font-size:12.5px}.who span{color:var(--text-3);font-size:11.5px}
#crumbbar{padding:10px 18px 0;color:var(--text-3);font-size:12.5px}#crumb b{color:var(--text-2)}
#view{padding:10px 18px 60px;max-width:1280px;margin:0 auto}
@media(max-width:860px){#ham{display:block}#nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--card);border-bottom:1px solid var(--line);padding:8px;margin:0}#nav.open{display:flex}.ddm{position:static;box-shadow:none;border:0;display:block;padding:0 0 0 12px}.ddb .fa-chevron-down{display:none}.who{display:none}#view{padding:10px 12px 60px}}
/* page */
.ph{display:flex;align-items:flex-end;gap:12px;margin:8px 0 14px;flex-wrap:wrap}.ph h1{font-size:22px}.sub{color:var(--text-3);font-size:13px;margin-top:2px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);margin-bottom:14px;overflow:hidden}.card-hd{padding:12px 14px;border-bottom:1px solid var(--line)}.card-ttl{font-weight:700}.card-bd{padding:12px 14px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}.grid .card{margin:0}
.list{list-style:none}.list li{padding:7px 0;border-bottom:1px solid var(--line)}.list li:last-child{border:0}.list a{font-weight:600}
.empty{padding:34px 16px;text-align:center;color:var(--text-3);line-height:1.6}
/* tables */
.tw{overflow-x:auto}table{width:100%;border-collapse:collapse}th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-3);padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}tr:last-child td{border:0}tr.click{cursor:pointer}tr.click:hover td{background:var(--acc-t)}td.r,th.r{text-align:right}
/* controls */
.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--card);color:var(--text);font:inherit;font-weight:600;padding:9px 14px;border-radius:9px;cursor:pointer}
.btn:hover{border-color:var(--acc)}.btn:disabled{opacity:.55;cursor:not-allowed}.btn-pri{background:var(--acc);color:#fff;border-color:var(--acc)}body.dark .btn-pri{color:#0e1424}.btn-sm{padding:6px 10px}.btn-gh{background:transparent}
.inp{width:100%;font:inherit;padding:9px 11px;border:1.5px solid var(--line);border-radius:9px;background:var(--card);color:var(--text)}.inp:focus{outline:none;border-color:var(--acc)}.inp:disabled{opacity:.6}
.filters{display:flex;gap:10px;margin-bottom:12px;flex-wrap:wrap;align-items:center}.grow{flex:1;min-width:200px}.chk{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--text-2)}.chk input{width:auto}
.fld{margin-bottom:12px}.fld label{display:block;font-size:12.5px;font-weight:600;color:var(--text-2);margin-bottom:5px}
.g3{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.row{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}.row .btn-pri{margin-left:auto}
.chip{display:inline-block;font-size:11px;font-weight:600;padding:2px 8px;border-radius:9px;background:var(--line);color:var(--text-2)}.c-red{background:rgba(192,57,43,.15);color:var(--bad)}.c-green{background:rgba(23,128,61,.15);color:var(--ok)}.c-amber{background:rgba(180,83,9,.15);color:var(--amber)}.c-acc{background:var(--acc-t);color:var(--acc)}
.bar{height:6px;background:var(--line);border-radius:4px;overflow:hidden}.bar>div{height:100%;background:var(--acc)}
/* full-page sheet, toasts */
#sheet{display:none;position:fixed;inset:0;top:0;background:var(--bg);z-index:40;overflow:auto}#sheetBar{padding:10px 16px;border-bottom:1px solid var(--line);background:var(--card);position:sticky;top:0}
#sheetBar button{background:none;border:0;color:var(--acc);font:inherit;font-weight:600;cursor:pointer}#sheetBody{max-width:900px;margin:0 auto;padding:16px 16px 60px}.sh-ttl{font-size:17px;font-weight:700;margin-bottom:8px}
#toasts{position:fixed;right:14px;bottom:14px;display:flex;flex-direction:column;gap:8px;z-index:60;max-width:340px}.toast{background:var(--text);color:var(--bg);padding:10px 13px;border-radius:10px;font-size:13px}.toast.err{background:var(--bad);color:#fff}.toast.ok{background:var(--ok);color:#fff}.toast div{opacity:.85;font-size:12px;margin-top:2px}

/* roll label */
.label { display: flex; gap: 12px; align-items: center; border: 2px solid var(--ink, #111); border-radius: 6px; padding: 10px; width: 100%; max-width: 420px; background: #fff; color: #111; }
.label-qr { width: 96px; height: 96px; flex: none; } .label-qr svg { width: 100%; height: 100%; display: block; }
.label-txt { font-size: 13px; line-height: 1.45; } .label-no { font-size: 20px; font-weight: 800; letter-spacing: .5px; font-family: ui-monospace, Menlo, Consolas, monospace; }
.label-st { margin-top: 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: #555; }
@media print {
  body > *:not(#sheet) { display: none !important; }
  #sheet { position: static !important; display: block !important; background: #fff !important; }
  #sheetBar, #sheet .row, #sheet .sh-ttl, #sheet .note { display: none !important; }
  .label { max-width: none; width: 100mm; border-width: 1px; page-break-after: always; }
}
ul.trace, ul.trace ul { list-style: none; margin: 0; padding-left: 18px; border-left: 2px solid var(--line); } ul.trace { border: 0; padding-left: 0; } ul.trace li { margin: 6px 0; font-size: 13px; }