:root{
  --bg:#f1f5f6; --panel:#ffffff; --ink:#1a2b32; --muted:#6b7f88;
  --line:#dbe4e8; --brand:#0d7a8c; --brand-dark:#0a5f6e; --brand-soft:#e3f1f3;
  --accent:#0d7a8c; --danger:#dc2626; --ok:#16a34a; --shadow:0 1px 3px rgba(18,45,55,.08);
  --radius:10px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",
    "Segoe UI",Meiryo,sans-serif;
  background:var(--bg); color:var(--ink); font-size:15px; line-height:1.6;
}
a{color:var(--brand-dark); text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:1.4rem; margin:.2rem 0 1rem}
h2{font-size:1.05rem; margin:0 0 .8rem}
h3{font-size:.95rem; margin:1.2rem 0 .5rem; color:var(--muted)}
.mono{font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace}
.muted{color:var(--muted)}
.small{font-size:.85rem}
.center{text-align:center}
.r{text-align:right}
.nowrap{white-space:nowrap}
.break{word-break:break-all}

/* ---- top bar ---- */
.topbar{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  background:var(--panel); border-bottom:1px solid var(--line);
  padding:.55rem 1.1rem; position:sticky; top:0; z-index:20; box-shadow:var(--shadow);
}
.brand a{color:var(--ink); font-weight:700; font-size:1.05rem; display:flex; align-items:center; gap:.4rem}
.brand a:hover{text-decoration:none}
.logo{color:var(--brand); font-size:1.2rem}
.mainnav{display:flex; gap:.15rem; flex-wrap:wrap; flex:1}
.mainnav a{
  padding:.4rem .7rem; border-radius:7px; color:var(--muted); font-size:.9rem; font-weight:600;
}
.mainnav a:hover{background:var(--brand-soft); color:var(--brand-dark); text-decoration:none}
.mainnav a.active{background:var(--brand); color:#fff}
.userbox{display:flex; align-items:center; gap:.5rem; font-size:.85rem}
.uname{font-weight:600}
.role{padding:.1rem .45rem; border-radius:5px; font-size:.72rem; background:#eef2f4; color:var(--muted)}
.role-admin{background:#fde8e8; color:#b42318}
.role-staff{background:var(--brand-soft); color:var(--brand-dark)}
.btn-logout{color:var(--muted); font-size:.82rem}

/* ---- layout ---- */
.wrap{max-width:1100px; margin:1.4rem auto; padding:0 1.1rem}
.cols{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
@media(max-width:760px){.cols{grid-template-columns:1fr}}
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.1rem 1.2rem; margin-bottom:1rem; box-shadow:var(--shadow);
}
.card-inset{background:#f8fafb; border:1px solid var(--line); border-radius:8px; padding:.9rem; margin-top:.8rem}
.card.danger{border-color:#f3c7c7}
.page-head{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; flex-wrap:wrap}
.page-head h1{margin:0}
.head-actions{display:flex; gap:.4rem; flex-wrap:wrap}
.foot{text-align:center; color:var(--muted); font-size:.8rem; padding:2rem 1rem}

/* ---- stat cards ---- */
.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem; margin-bottom:1.2rem}
@media(max-width:640px){.stat-grid{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:1rem; text-align:center; box-shadow:var(--shadow)}
.stat-num{font-size:1.9rem; font-weight:700; color:var(--brand-dark); line-height:1.1}
.stat-lbl{color:var(--muted); font-size:.82rem; margin-top:.2rem}

/* ---- tables ---- */
.tbl{width:100%; border-collapse:collapse; font-size:.9rem}
.tbl th,.tbl td{padding:.5rem .6rem; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle}
.tbl th{color:var(--muted); font-weight:600; font-size:.8rem; background:#f8fafb}
.tbl-hover tbody tr{cursor:pointer}
.tbl-hover tbody tr:hover{background:var(--brand-soft)}
.row-off{opacity:.5}
.kv{width:100%; border-collapse:collapse}
.kv th{text-align:left; width:8rem; color:var(--muted); font-weight:600; padding:.4rem .6rem; vertical-align:top; font-size:.85rem}
.kv td{padding:.4rem .6rem; border-bottom:1px solid var(--line)}

/* ---- badges / chips ---- */
.badge{display:inline-block; padding:.12rem .5rem; border-radius:20px; color:#fff; font-size:.75rem; font-weight:600; background:#64748b}
.chips{display:flex; flex-wrap:wrap; gap:.5rem}
.chip{display:inline-flex; align-items:center; gap:.35rem; border:1px solid var(--line); border-radius:20px; padding:.25rem .7rem; font-size:.85rem}
.chip .dot{width:.6rem; height:.6rem; border-radius:50%}
.chip b{color:var(--ink)}

/* ---- forms ---- */
label{display:block; margin-bottom:.75rem; font-size:.85rem; color:var(--muted); font-weight:600}
input[type=text],input[type=password],input[type=number],input[type=color],select,textarea{
  width:100%; padding:.5rem .6rem; border:1px solid var(--line); border-radius:8px;
  font-size:.95rem; font-family:inherit; color:var(--ink); background:#fff; margin-top:.25rem;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand-soft); border-color:var(--brand)}
input[type=color]{padding:.2rem; height:2.3rem}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 1rem}
@media(max-width:640px){.form-grid{grid-template-columns:1fr}}
.form-grid .full{grid-column:1 / -1}
.form-actions{display:flex; gap:.6rem; align-items:center; margin-top:.5rem}
.input-row{display:flex; gap:.4rem; align-items:center}
.input-row input{margin-top:0}
.inline-form{display:flex; gap:.5rem; align-items:center; flex-wrap:wrap}
.inline-form input,.inline-form select{margin-top:0; width:auto}
.inline-check{display:flex; align-items:center; gap:.4rem; font-size:.85rem}
.inline-check select{margin-top:0; width:auto}
fieldset.attrs{grid-column:1 / -1; border:1px solid var(--line); border-radius:8px; padding:.8rem; margin:0 0 .9rem}
fieldset.attrs legend{color:var(--muted); font-size:.82rem; padding:0 .4rem}
.attr-holder label,.attr-row{margin-bottom:.5rem}
.attr-row{display:grid; grid-template-columns:1fr 1fr auto; gap:.5rem; align-items:center}

/* ---- buttons ---- */
.btn{
  display:inline-block; padding:.5rem .9rem; border-radius:8px; border:1px solid var(--line);
  background:#fff; color:var(--ink); font-size:.88rem; font-weight:600; cursor:pointer;
  font-family:inherit; text-align:center;
}
.btn:hover{background:#f2f6f7; text-decoration:none}
.btn-primary{background:var(--brand); border-color:var(--brand); color:#fff}
.btn-primary:hover{background:var(--brand-dark)}
.btn-ghost{background:transparent}
.btn-danger{background:var(--danger); border-color:var(--danger); color:#fff}
.btn-danger:hover{background:#b91c1c}
.btn-sm{padding:.3rem .55rem; font-size:.78rem}

/* ---- filters / pager ---- */
.filters{display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1rem; align-items:center}
.filters input[type=text]{flex:1; min-width:14rem; margin-top:0}
.filters select{margin-top:0; width:auto}
.pager{display:flex; gap:.3rem; flex-wrap:wrap; margin-top:1rem}
.pg{padding:.35rem .6rem; border:1px solid var(--line); border-radius:6px; font-size:.85rem}
.pg.current{background:var(--brand); color:#fff; border-color:var(--brand)}

/* ---- flash ---- */
.flash{padding:.65rem .9rem; border-radius:8px; margin-bottom:1rem; font-size:.9rem}
.flash-ok{background:#e7f6ec; color:#166534; border:1px solid #bbe6c9}
.flash-err{background:#fdeaea; color:#991b1b; border:1px solid #f3c7c7}

/* ---- QR ---- */
.qr-card{text-align:center}
.qrbox{display:inline-block; padding:.6rem; background:#fff; border:1px solid var(--line); border-radius:8px; margin:.5rem auto}
.qrbox img,.qrbox canvas{display:block}
.reader-box{margin-top:.8rem; max-width:340px}
.scan-log{list-style:none; padding:0; margin:0; font-size:.9rem}
.scan-log li{padding:.35rem 0; border-bottom:1px solid var(--line)}
.scan-log .miss{color:var(--danger)}
.res-head{display:flex; align-items:center; justify-content:space-between; gap:.6rem}
.res-code{font-size:1.1rem; font-weight:700}

/* ---- auth ---- */
.centered{display:flex; align-items:center; justify-content:center; min-height:100vh; padding:1rem}
.auth-card{max-width:380px; width:100%}
.auth-card h1{text-align:center; font-size:1.2rem; display:flex; gap:.4rem; justify-content:center; align-items:center}

/* ---- labels (print) ---- */
.label-sheet{display:flex; flex-wrap:wrap; gap:4mm; margin-top:1rem}
.label{
  border:1px dashed #c3d0d5; border-radius:4px; padding:2mm; display:flex; gap:2mm; align-items:center;
  page-break-inside:avoid; break-inside:avoid; background:#fff;
}
.size-s .label{width:40mm}
.size-m .label{width:50mm}
.size-l .label{width:60mm}
.label-qr{flex:0 0 auto}
.label-qr img,.label-qr canvas{display:block; width:16mm; height:16mm}
.size-l .label-qr img,.size-l .label-qr canvas{width:20mm; height:20mm}
.label-txt{min-width:0; overflow:hidden}
.label-code{font-weight:700; font-size:2.6mm; word-break:break-all}
.label-name{font-size:2.4mm; color:#333; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.label-epc{font-size:1.9mm; color:#666; word-break:break-all}

@media print{
  .topbar,.foot,.no-print,.page-head{display:none !important}
  body{background:#fff}
  .wrap{margin:0; max-width:none; padding:0}
  .label-sheet{gap:2mm}
  .label{border:1px solid #ddd}
}

/* ---- inspect (kenpin) ---- */
.phase-tabs{display:flex; gap:.4rem}
.chk-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:.5rem .8rem; margin-top:.3rem}
@media(max-width:640px){.chk-grid{grid-template-columns:1fr}}
.chk{display:flex; align-items:center; gap:.5rem; margin:0; font-weight:600; color:var(--ink); cursor:pointer; padding:.35rem .5rem; border:1px solid var(--line); border-radius:8px}
.chk:hover{background:var(--brand-soft)}
.chk input[type=checkbox]{width:auto; margin:0}
.chk .dot{width:.7rem; height:.7rem; border-radius:50%; flex:0 0 auto}