:root{
  --ink:#16201c; --paper:#f5f2ea; --crate:#c8722e; --crate-dark:#a35a1f;
  --line:#d8d1c0; --green:#3a6b4f; --green-dark:#2c5340; --muted:#6f6a5d;
  --red:#7a2b2b; --shadow:rgba(22,32,28,.12);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--paper);color:var(--ink);min-height:100vh;-webkit-font-smoothing:antialiased;}
.hidden{display:none!important}

/* ---- Header ---- */
header{background:var(--ink);color:var(--paper);
  padding:14px 18px;position:sticky;top:0;z-index:50;
  padding-top:max(14px,env(safe-area-inset-top));
  display:flex;align-items:center;justify-content:space-between;}
.brand{display:flex;align-items:center;gap:11px}
.mark{width:32px;height:32px;border-radius:7px;flex-shrink:0;background:var(--crate);position:relative;box-shadow:inset 0 -3px 0 var(--crate-dark);}
.mark::before,.mark::after{content:"";position:absolute;background:var(--paper);opacity:.85}
.mark::before{left:7px;right:7px;top:11px;height:2px}
.mark::after{top:7px;bottom:7px;left:15px;width:2px}
.brand h1{font-size:17px;font-weight:800;letter-spacing:-.3px}
.brand span{display:block;font-size:10px;font-weight:500;opacity:.6;letter-spacing:.5px;text-transform:uppercase}
.userbox{display:flex;align-items:center;gap:10px;font-size:12px}
.userbox .who{opacity:.75}
.userbox .who b{color:var(--crate);font-weight:700}
.linkbtn{background:none;border:1px solid rgba(245,242,234,.25);color:var(--paper);
  font-family:inherit;font-size:11.5px;font-weight:600;padding:6px 11px;border-radius:7px;cursor:pointer}
.linkbtn:active{background:rgba(245,242,234,.1)}

/* ---- Tabs ---- */
nav{display:flex;background:var(--ink);border-top:1px solid rgba(245,242,234,.12);position:sticky;top:60px;z-index:40}
nav button{flex:1;background:none;border:none;color:rgba(245,242,234,.55);
  padding:13px 4px;font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit;
  border-bottom:2.5px solid transparent;transition:.18s}
nav button.on{color:var(--paper);border-bottom-color:var(--crate)}

main{padding:20px 16px 40px;max-width:680px;margin:0 auto}
.view{display:none;animation:fade .25s ease}
.view.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
h2{font-size:15px;font-weight:700;margin-bottom:4px}
.hint{font-size:13px;color:var(--muted);margin-bottom:16px;line-height:1.5}

/* ---- Buttons ---- */
.btn{width:100%;border:none;padding:15px;border-radius:12px;font-size:15.5px;font-weight:700;
  font-family:inherit;cursor:pointer;margin-bottom:12px}
.btn-crate{background:var(--crate);color:#fff;box-shadow:inset 0 -3px 0 var(--crate-dark)}
.btn-crate:active{transform:translateY(1px);box-shadow:inset 0 -1px 0 var(--crate-dark)}
.btn-crate.stop{background:#7a2b2b;box-shadow:inset 0 -3px 0 #5e1f1f}
.btn-green{background:var(--green);color:#fff}
.btn-ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn-danger{background:#fff;color:var(--red);border:1px solid #e0b8b0}
.btn.small{width:auto;padding:9px 15px;font-size:13px;margin:0}

/* ---- Login ---- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:30px 26px;max-width:360px;width:100%;box-shadow:0 8px 30px var(--shadow)}
.login-card .mark{width:46px;height:46px;margin:0 auto 16px}
.login-card h2{font-size:20px;text-align:center;margin-bottom:4px}
.login-card .hint{text-align:center}
label{display:block;font-size:12.5px;font-weight:600;margin:14px 0 6px}
input,select,textarea{width:100%;padding:12px 13px;font-size:16px;border:1px solid var(--line);
  border-radius:11px;font-family:inherit;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--crate)}
textarea{resize:vertical;min-height:90px;line-height:1.5}
.formrow{margin-bottom:6px}
.msg{font-size:13px;padding:10px 12px;border-radius:9px;margin-bottom:8px}
.msg.err{background:#fff5f0;border:1px solid #e8c4b0;color:var(--red)}
.msg.ok{background:#eef4ef;border:1px solid #b8d4c2;color:var(--green-dark)}

/* ---- Scan ---- */
#reader{border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#000;margin-bottom:8px}

/* ---- Card result ---- */
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;margin-top:16px;box-shadow:0 4px 16px var(--shadow)}
.card .id{display:inline-block;font-size:11px;font-weight:700;letter-spacing:1px;background:var(--ink);color:var(--paper);padding:4px 9px;border-radius:5px;margin-bottom:10px}
.card h3{font-size:21px;font-weight:800;letter-spacing:-.4px;margin-bottom:12px}
.loc{display:flex;align-items:center;gap:8px;background:var(--paper);border-radius:9px;padding:11px 13px;margin-bottom:14px}
.loc svg{width:18px;height:18px;flex-shrink:0;color:var(--green)}
.loc b{font-size:14.5px}
.loc em{font-style:normal;color:var(--muted);font-size:13px}
.contents-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin-bottom:8px}
.contents li{list-style:none;padding:9px 0;border-bottom:1px solid var(--line);font-size:15px;display:flex;align-items:center;gap:9px}
.contents li:last-child{border-bottom:none}
.contents li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--crate);flex-shrink:0}
.updated{font-size:11.5px;color:#9a9486;margin-top:12px}
.card-actions{display:flex;gap:8px;margin-top:14px}
.notfound{background:#fff5f0;border-color:#e8c4b0}
.notfound h3{color:var(--red)}

/* ---- Search ---- */
.searchbar{margin-bottom:8px}
.filterrow{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}
.chip{font-size:12.5px;font-weight:600;padding:7px 13px;border-radius:20px;border:1px solid var(--line);background:#fff;cursor:pointer;font-family:inherit;color:var(--muted)}
.chip.on{background:var(--green);color:#fff;border-color:var(--green)}
.box-item{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 15px;margin-bottom:10px;cursor:pointer;transition:.15s}
.box-item:active{transform:scale(.99)}
.box-item .top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:5px}
.box-item .name{font-size:16px;font-weight:700}
.box-item .tag{font-size:10.5px;font-weight:700;letter-spacing:.5px;color:#9a9486;white-space:nowrap}
.box-item .meta{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:6px}
.box-item .meta svg{width:14px;height:14px;color:var(--green)}
.empty{text-align:center;padding:40px 20px;color:#9a9486;font-size:14px}
.spin{text-align:center;padding:30px;color:#9a9486;font-size:13px}

/* ---- Admin ---- */
.admin-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:10px}
.admin-item{background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 15px;margin-bottom:9px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.admin-item .info{min-width:0}
.admin-item .name{font-size:15px;font-weight:700}
.admin-item .sub{font-size:12px;color:var(--muted);margin-top:2px}
.admin-item .acts{display:flex;gap:6px;flex-shrink:0}
.iconbtn{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.iconbtn svg{width:16px;height:16px}
.iconbtn.edit svg{color:var(--green)} .iconbtn.del svg{color:var(--red)} .iconbtn.qr svg{color:var(--crate-dark)}

/* ---- Modal ---- */
.modal{position:fixed;inset:0;background:rgba(22,32,28,.55);z-index:100;display:flex;align-items:flex-end;justify-content:center;padding:0}
.modal-card{background:var(--paper);width:100%;max-width:680px;max-height:92vh;overflow-y:auto;border-radius:18px 18px 0 0;padding:22px 18px calc(22px + env(safe-area-inset-bottom))}
.modal-card h3{font-size:18px;font-weight:800;margin-bottom:14px}
.modal-actions{display:flex;gap:8px;margin-top:18px}
.modal-actions .btn{margin:0}
.itemrow{display:flex;gap:7px;margin-bottom:7px}
.itemrow input{flex:1}
.itemrow button{width:42px;flex-shrink:0;border:1px solid var(--line);background:#fff;border-radius:10px;font-size:18px;cursor:pointer;color:var(--red)}
.addrow{background:none;border:1px dashed var(--line);color:var(--muted);padding:10px;border-radius:10px;width:100%;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;margin-top:2px}

/* ---- QR label modal ---- */
.qr-print{background:#fff;border:1.5px dashed var(--line);border-radius:10px;padding:18px;text-align:center;max-width:240px;margin:0 auto}
.qr-print .qrbox{display:flex;justify-content:center;margin-bottom:10px}
.qr-print .qrbox img,.qr-print .qrbox canvas{width:150px!important;height:150px!important}
.qr-print .lbl-id{font-size:13px;font-weight:700;letter-spacing:1px}
.qr-print .lbl-name{font-size:13px;color:var(--muted);margin-top:3px}

@media print{
  header,nav,.hint,.modal-actions,h2,.admin-head{display:none!important}
  .modal{position:static;background:#fff;padding:0}
  .modal-card{box-shadow:none;max-height:none}
}