:root{
  --brand:#7d3c6a; --brand2:#5b2a4e; --brand-soft:#f3e6ef;
  --bg1:#fbeff5; --bg2:#f1e7ef; --ink:#2c1a28; --muted:#7a6470;
  --good:#1f9d6b; --goodbg:#e6f7ef; --warn:#d98a1f; --warnbg:#fdf3e2; --bad:#d23b54; --badbg:#fdeaee;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--ink);min-height:100vh;
  background:linear-gradient(135deg, var(--bg1), var(--bg2));
  background-attachment:fixed;
  display:flex;flex-direction:column;align-items:center;
  padding:32px 16px;
}
.wrap{width:100%;max-width:640px}
/* brand header */
.brand{display:flex;align-items:center;gap:14px;justify-content:center;margin-bottom:18px;transition:.4s}
.logo{width:54px;height:54px;border-radius:16px;background:linear-gradient(135deg,var(--brand),var(--brand2));
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:22px;letter-spacing:1px;
  box-shadow:0 10px 26px rgba(0,0,0,.18);transition:.4s}
.brand-text{text-align:left}
h1{font-size:25px;font-weight:800;letter-spacing:.5px;background:linear-gradient(90deg,var(--brand),var(--brand2));-webkit-background-clip:text;background-clip:text;color:transparent;transition:.4s}
.brand-sub{font-size:13px;color:var(--muted);margin-top:2px}
.tagline{text-align:center;color:var(--muted);margin-bottom:22px;font-size:14px}
.card{background:#fff;border-radius:22px;padding:26px;box-shadow:0 18px 50px rgba(0,0,0,.10);margin-bottom:18px;animation:rise .5s ease}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin:14px 0 6px}
input,select{width:100%;padding:13px 15px;border:1.5px solid #ecd9e6;border-radius:13px;font-size:15px;outline:none;transition:.2s;background:#fff}
input:focus,select:focus{border-color:var(--brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 18%,transparent)}
button{font-family:inherit;cursor:pointer;border:none;border-radius:13px;font-weight:700;font-size:15px;
  padding:13px 20px;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;
  box-shadow:0 10px 24px rgba(0,0,0,.22);transition:.2s}
button:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.28)}
button:active{transform:none}
button.ghost{background:#fff;color:var(--brand2);border:1.5px solid #ecd9e6;box-shadow:none}
button.ghost:hover{background:#fbeff5}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row>*{flex:1}
.center{text-align:center}
.hint{font-size:12.5px;color:var(--muted);margin-top:10px;line-height:1.6}
#result{min-height:20px}
/* result card */
.result-card{border-radius:22px;padding:30px 26px;text-align:center;animation:pop .45s ease;position:relative;overflow:hidden}
@keyframes pop{from{transform:scale(.94);opacity:0}to{transform:none;opacity:1}}
.result-card::before{content:"";position:absolute;inset:0;opacity:.10;background:radial-gradient(circle at 50% 0%,currentColor,transparent 60%)}
.result-card .icon{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:36px;font-weight:800;margin:0 auto 16px;color:#fff;position:relative;animation:popin .5s ease}
@keyframes popin{from{transform:scale(.5);opacity:0}to{transform:none;opacity:1}}
.result-card h2{font-size:23px;margin-bottom:8px;position:relative}
.result-card p{color:var(--muted);font-size:14px;position:relative;line-height:1.6}
.result-card .meta{margin-top:18px;font-size:13px;color:var(--ink);background:rgba(0,0,0,.04);border-radius:14px;padding:14px 16px;line-height:2;text-align:left;position:relative}
.result-card .meta b{color:var(--muted);font-weight:600;display:inline-block;width:84px}
.result-card .serial{margin-top:10px;font-size:11px;color:var(--muted);font-family:ui-monospace,Menlo,Consolas,monospace;word-break:break-all;position:relative}
.good{background:var(--goodbg);color:var(--good)} .good .icon{background:var(--good)}
.warn{background:var(--warnbg);color:var(--warn)} .warn .icon{background:var(--warn)}
.bad{background:var(--badbg);color:var(--bad)} .bad .icon{background:var(--bad)}
.loading{text-align:center;color:var(--muted);padding:24px}
.loading .spin{width:34px;height:34px;border:4px solid var(--brand-soft);border-top-color:var(--brand);border-radius:50%;margin:0 auto 12px;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* admin */
#dash{display:none}
.stats{display:inline-block;background:#fff;border-radius:12px;padding:8px 14px;font-size:13px;color:var(--brand2);font-weight:600;margin-bottom:14px}
.progress{font-size:14px;color:var(--brand2);margin:14px 0;font-weight:600}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin-top:10px}
.cell{background:#fff;border-radius:14px;padding:12px;text-align:center;border:1px solid #f0e2ec}
.cell .qr img{width:120px;height:120px}
.cell .info{font-size:11px;color:var(--muted);margin-top:8px;line-height:1.5}
.cell code{font-size:10px;word-break:break-all;color:var(--brand2)}
.actions{display:flex;gap:10px;margin:6px 0 4px}
.table{width:100%;border-collapse:collapse;font-size:13px;margin-top:8px}
.table th,.table td{padding:8px 10px;border-bottom:1px solid #f0e2ec;text-align:left}
.table th{color:var(--muted);font-weight:600}
footer{margin-top:28px;text-align:center;color:var(--muted);font-size:12px;line-height:1.8}
.login-card{max-width:380px;margin:60px auto}
/* labels tool */
#labelToolbar{position:sticky;top:0;background:#fff;padding:14px 18px;border-bottom:1px solid #eee;box-shadow:0 2px 10px rgba(0,0,0,.05);z-index:10;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
#labelToolbar .grp{display:flex;gap:8px;align-items:center}
#labelToolbar label{margin:0;white-space:nowrap}
#labelSheet{display:grid;gap:0;padding:0;margin:0 auto;max-width:210mm}
.label{display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px dashed #bbb;padding:6px;box-sizing:border-box;overflow:hidden}
.label .lbrand{font-weight:800;font-size:11px;letter-spacing:.5px;margin-bottom:2px;color:var(--brand2)}
.label .lqr img{width:100%;height:auto;max-width:90px}
.label .linfo{font-size:8px;color:#444;margin-top:3px;text-align:center;line-height:1.25;width:100%}
.label .lserial{font-size:7px;color:#888;font-family:ui-monospace,monospace;word-break:break-all;width:100%}
.label .lhint{font-size:7px;color:#999;margin-top:2px}
@media print{
  body{padding:0;background:#fff}
  #labelToolbar{display:none!important}
  #labelSheet{border:none}
  .label{border:1px solid #ddd;break-inside:avoid}
}
@media print{
  body{padding:0;background:#fff}
  .brand,.tagline,.card:not(#out),footer,.actions,.stats,.progress,.login-card{display:none!important}
  .grid{grid-template-columns:repeat(3,1fr);gap:6px}
  .cell{border:1px solid #ccc;break-inside:avoid}
}