*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;background:#0b0d10;color:#f2f4f7}
a{color:inherit;text-decoration:none}
.top{padding:24px 20px 8px;max-width:1080px;margin:0 auto}
.eyebrow{margin:0;color:#7dd3fc;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
h1{margin:6px 0;font-size:28px}
.sub{color:#9aa3af;line-height:1.55;font-size:14px;margin:0}
.sub code{background:#1a2030;padding:2px 6px;border-radius:6px;color:#e2e8f0}
.toolbar{max-width:1080px;margin:10px auto 4px;padding:0 20px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.toolbar input[type=search]{flex:1;min-width:160px;background:#111827;border:1px solid #2a3548;border-radius:999px;color:#e5e7eb;padding:10px 14px;font-size:14px;outline:none}
.toolbar input[type=search]:focus{border-color:#38bdf8}
.btn{border:1px solid #2a3548;background:#151b28;color:#e2e8f0;border-radius:999px;padding:9px 14px;font-size:13px;white-space:nowrap}
.btn:active,.btn:hover{border-color:#38bdf8}
.note{max-width:1080px;margin:8px auto;padding:0 20px;color:#8b96a5;font-size:12px;line-height:1.6}
main{max-width:1080px;margin:0 auto;padding:0 16px 32px}
.pack-title{grid-column:1/-1;margin:18px 2px 0;font-size:14px;color:#7dd3fc}
.pack-title small{color:#64748b;font-weight:400;margin-left:6px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:10px}
.card{display:flex;flex-direction:column;gap:3px;padding:12px;border-radius:14px;background:linear-gradient(160deg,#151b28,#0f1320);border:1px solid #2a3548;min-height:104px}
.card:active,.card:hover{border-color:#38bdf8}
.card .id{font-weight:700;font-size:21px;color:#7dd3fc}
.card .name{font-size:13px;color:#e5e7eb}
.card .pack{font-size:11px;color:#64748b;line-height:1.4}
.card .open{margin-top:auto;font-size:12px;color:#7dd3fc}
.empty{color:#94a3b8;padding:32px 0;text-align:center;grid-column:1/-1}
/* QR download page (qr-download.html) */
.base-row{max-width:1080px;margin:10px auto 4px;padding:0 20px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.base-row label{font-size:13px;color:#9aa3af}
.base-row input[type=url]{flex:1;min-width:220px;background:#111827;border:1px solid #2a3548;border-radius:999px;color:#e5e7eb;padding:10px 14px;font-size:14px;outline:none}
.base-row input[type=url]:focus{border-color:#38bdf8}
.base-row .warn{color:#fbbf24}
.dl-actions{position:sticky;top:0;z-index:5;background:rgba(11,13,16,.92);backdrop-filter:blur(4px);padding-top:8px;padding-bottom:8px}
.dl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px}
.dl-cell{border:1px solid #2a3548;border-radius:12px;padding:10px;background:#101623;text-align:center}
.dl-cell canvas{background:#fff;border-radius:6px;max-width:100%;height:auto}
.dl-cell .lid{font-weight:700;font-size:17px;color:#7dd3fc;margin-top:4px}
.dl-cell .lurl{font-size:9px;color:#64748b;word-break:break-all;line-height:1.35;min-height:24px}
.dl-cell .row{display:flex;gap:6px;align-items:center;justify-content:space-between;margin-top:6px}
.dl-cell label.pick{display:flex;gap:5px;align-items:center;font-size:12px;color:#cbd5e1;cursor:pointer}
.dl-cell button{border:1px solid #2a3548;background:#151b28;color:#e2e8f0;border-radius:999px;padding:6px 10px;font-size:12px;cursor:pointer}
.dl-cell button:hover{border-color:#38bdf8}
.pack-head{grid-column:1/-1;display:flex;gap:8px;align-items:center;margin:16px 2px 0;font-size:14px;color:#7dd3fc}
.pack-head label{display:flex;gap:5px;align-items:center;cursor:pointer}
.pack-head small{color:#64748b}
/* QR wall (qrs.html) */
.qr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.qr-cell{border:1px solid #2a3548;border-radius:12px;padding:12px;text-align:center;background:#101623}
.qr-cell canvas{background:#fff;border-radius:6px;max-width:100%;height:auto}
.qr-cell .lid{font-weight:700;font-size:18px;color:#7dd3fc;margin-top:6px}
.qr-cell .lname{font-size:12px;color:#cbd5e1}
.qr-cell .lurl{font-size:9px;color:#64748b;word-break:break-all;line-height:1.35;margin-top:3px}
@media (max-width:640px){
  .top{padding:18px 14px 6px}
  h1{font-size:23px}
  .toolbar,.note{padding-left:14px;padding-right:14px}
  main{padding:0 10px 24px}
  .grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .card{padding:10px;min-height:92px}
  .card .id{font-size:18px}
  .card .name{font-size:12px}
  .card .pack{font-size:10px}
  .qr-grid,.dl-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .base-row{padding-left:14px;padding-right:14px}
}
/* Access gate (qr pages) */
html.access-locked body{visibility:hidden}
html.access-locked .access-overlay{visibility:visible}
.access-overlay{position:fixed;inset:0;z-index:50;background:rgba(3,6,12,.88);display:flex;align-items:center;justify-content:center;padding:16px}
.access-card{background:#111827;color:#e5e7eb;border:1px solid #334155;border-radius:14px;padding:20px;width:100%;max-width:320px;text-align:center}
.access-card h2{margin:0 0 6px;font-size:17px}
.access-card p{margin:0 0 12px;font-size:12px;color:#94a3b8}
.access-card input{width:100%;background:#0b1220;border:1px solid #2a3548;border-radius:10px;color:#e5e7eb;padding:11px 12px;font-size:15px;outline:none;text-align:center}
.access-card input:focus{border-color:#38bdf8}
.access-err{min-height:18px;margin-top:8px;font-size:12px;color:#f87171}
.access-row{display:flex;gap:8px;margin-top:10px}
.access-row button{flex:1;border-radius:10px;padding:10px;font-size:13px;cursor:pointer;border:1px solid #475569;background:#1e293b;color:#e2e8f0}
.access-row .access-ok{background:#38bdf8;color:#0b1220;border:0;font-weight:700}
@media print{
  body{background:#fff;color:#000}
  .top,.toolbar,.note,.no-print{display:none!important}
  main{max-width:none;padding:0}
  .qr-grid{grid-template-columns:repeat(4,1fr);gap:8px}
  .qr-cell{border:1px solid #bbb;background:#fff;break-inside:avoid}
  .qr-cell .lid{color:#000}
  .qr-cell .lname,.qr-cell .lurl{color:#333}
}