:root{
  --ink:#14212B; --ink-2:#3C4A55; --paper:#F1F3F2; --card:#FFFFFF; --line:#D8DEDC;
  --blue:#0B67B2;            /* Aruba blue - interactive */
  --custody:#0E7C5B;         /* secured in armory */
  --custody-bg:#E2F3EC;
  --out:#B45309;             /* with participant */
  --out-bg:#FBEEDD;
  --danger:#B3261E;
  --radius:10px;
  font-size:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--paper); color:var(--ink); line-height:1.45;
}
.hidden{display:none !important}
button{font:inherit}
input,select{
  font:inherit; padding:.6rem .7rem; border:1px solid var(--line); border-radius:var(--radius);
  background:#fff; color:var(--ink); width:100%;
}
input:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible{
  outline:3px solid var(--blue); outline-offset:2px;
}
.btn{
  display:inline-block; padding:.55rem 1rem; border-radius:var(--radius); border:1px solid var(--line);
  background:#fff; color:var(--ink); cursor:pointer; text-decoration:none; font-weight:600;
}
.btn.primary{background:var(--blue); border-color:var(--blue); color:#fff}
.btn.ghost{background:transparent; border-color:rgba(255,255,255,.4); color:#fff}
.btn.danger{background:var(--danger); border-color:var(--danger); color:#fff}
.btn.wide{width:100%}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn.mini{padding:.3rem .6rem; font-size:.75rem}
.err{color:var(--danger); font-weight:600; min-height:1.2em; margin:.4rem 0 0}
.hint{color:var(--ink-2); font-size:.9rem}

/* ---------- login ---------- */
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:1rem;
  background:linear-gradient(160deg,var(--ink) 0%, #1E3A4C 100%)}
.login-card{background:var(--card); border-radius:14px; padding:1.6rem; width:100%; max-width:380px;
  box-shadow:0 10px 40px rgba(0,0,0,.35)}
.login-card label{display:block; font-size:.8rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-2); margin:.9rem 0 .25rem}
.login-note{font-size:.8rem; color:var(--ink-2); margin-top:1rem}
#login-btn{margin-top:1.1rem}

/* ---------- brand ---------- */
.brand{display:flex; align-items:center; gap:.7rem}
.brand-logo{height:60px; width:auto; flex:0 0 auto}
.brand-logo.small{height:36px; background:#fff; border-radius:7px; padding:2px}
.brand-title{font-weight:800; letter-spacing:.01em}
.brand-sub{font-size:.85rem; color:var(--ink-2)}
.topbar .brand-title{color:#fff; font-size:.95rem}

/* ---------- app chrome ---------- */
.topbar{
  background:var(--ink); color:#fff; padding:.6rem .9rem;
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  position:sticky; top:0; z-index:20;
}
.topbar-right{display:flex; align-items:center; gap:.6rem}
.who{font-size:.85rem; opacity:.85}
.statusband{
  display:grid; grid-template-columns:repeat(3,1fr); text-align:center;
  background:#fff; border-bottom:1px solid var(--line);
}
.stat{padding:.55rem .25rem}
.stat-n{display:block; font-size:1.5rem; font-weight:800; font-variant-numeric:tabular-nums}
.stat-l{display:block; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2)}
.stat:nth-child(1) .stat-n{color:var(--custody)}
.stat:nth-child(2) .stat-n{color:var(--out)}

.tabs{display:flex; background:#fff; border-bottom:2px solid var(--line); position:sticky; top:52px; z-index:19}
.tab{
  flex:1; padding:.7rem .3rem; background:none; border:none; border-bottom:3px solid transparent;
  font-weight:700; color:var(--ink-2); cursor:pointer; text-transform:uppercase; font-size:.8rem; letter-spacing:.05em;
}
.tab.active{color:var(--blue); border-bottom-color:var(--blue)}

main{padding:1rem; max-width:760px; margin:0 auto}
.pane h2{font-size:1.05rem; text-transform:uppercase; letter-spacing:.05em; margin:1.4rem 0 .6rem}
.pane h2:first-child{margin-top:.2rem}
.pane h3{font-size:.9rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-2)}

/* ---------- scan ---------- */
.scanbox{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1rem}
.qr-reader{max-width:340px; margin:0 auto 1rem; border-radius:var(--radius); overflow:hidden}
.scan-controls{display:flex; flex-direction:column; gap:.6rem; align-items:stretch}
.inline-form{display:flex; gap:.5rem}
.inline-form input,.inline-form select{flex:1}
.inline-form .btn{flex:0 0 auto}

/* ---------- participant card ---------- */
.pcard{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); margin-top:1rem; overflow:hidden}
.pcard-head{padding: .9rem 1rem; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; gap:.6rem; align-items:flex-start}
.pcard-name{font-size:1.15rem; font-weight:800}
.pcard-meta{color:var(--ink-2); font-size:.85rem}
.pid{font-variant-numeric:tabular-nums; font-weight:800; background:var(--ink); color:#fff;
  border-radius:8px; padding:.25rem .55rem; white-space:nowrap}
.gun{display:flex; align-items:center; gap:.7rem; padding:.75rem 1rem; border-bottom:1px solid var(--line); flex-wrap:wrap}
.gun:last-child{border-bottom:none}
.gun-info{flex:1 1 200px; min-width:0}
.gun-serial{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-weight:700}
.gun-desc{font-size:.85rem; color:var(--ink-2)}
.chip{font-size:.72rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  padding:.28rem .6rem; border-radius:999px; white-space:nowrap}
.chip.custody{background:var(--custody-bg); color:var(--custody)}
.chip.out{background:var(--out-bg); color:var(--out)}
.gun .btn{flex:0 0 auto}
.gun .btn.take{background:var(--custody); border-color:var(--custody); color:#fff}
.gun .btn.give{background:var(--out); border-color:var(--out); color:#fff}
.gun-when{font-size:.72rem; color:var(--ink-2); width:100%}
.pcard-foot{padding:.6rem 1rem; background:#FAFBFB; display:flex; gap:.5rem; flex-wrap:wrap}
.flash{animation:flash .8s ease-out}
@keyframes flash{from{background:#FFF7D6}to{background:transparent}}
@media (prefers-reduced-motion: reduce){ .flash{animation:none} }

/* ---------- search ---------- */
.searchbar{display:flex; gap:.5rem; margin-bottom:.8rem}
.searchbar select{max-width:45%}
.list .row{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:.6rem .8rem; margin-bottom:.5rem; display:flex; align-items:center; gap:.7rem; cursor:pointer;
}
.row-main{flex:1; min-width:0}
.row-name{font-weight:700}
.row-sub{font-size:.8rem; color:var(--ink-2)}
.dots{display:flex; gap:4px}
.dot{width:12px; height:12px; border-radius:50%}
.dot.custody{background:var(--custody)}
.dot.out{background:var(--out)}

/* ---------- board ---------- */
.board-head{display:flex; align-items:center; justify-content:space-between}
.logrow{display:grid; grid-template-columns:auto 1fr auto; gap:.6rem; align-items:baseline;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:.5rem .7rem; margin-bottom:.4rem; font-size:.86rem}
.logrow time{font-variant-numeric:tabular-nums; color:var(--ink-2)}
table.audit{width:100%; border-collapse:collapse; background:#fff; font-size:.8rem}
table.audit th,table.audit td{border:1px solid var(--line); padding:.35rem .5rem; text-align:left}
table.audit th{background:#EDF1F0; text-transform:uppercase; font-size:.68rem; letter-spacing:.05em}
.board-admin{margin-top:1.5rem}
.stack-form{display:grid; gap:.5rem; max-width:420px; margin-bottom:1rem}

/* ---------- pass ---------- */
.modal{position:fixed; inset:0; background:rgba(10,20,28,.6); display:flex;
  align-items:center; justify-content:center; padding:1rem; z-index:50}
.modal-body{background:#fff; border-radius:14px; padding:1rem; max-width:420px; width:100%;
  max-height:92vh; overflow:auto}
.modal-actions{display:flex; gap:.5rem; margin-top:.8rem}

.pass{
  --cardw: 340px;
  border:2px solid var(--ink); border-radius:12px; overflow:hidden;
  width:var(--cardw); max-width:100%; aspect-ratio: 85.6 / 54;
  margin:0 auto; background:#fff; color:#000; text-align:left;
  page-break-inside:avoid; break-inside:avoid;
  display:flex; flex-direction:column;
}
.pass-band{background:#fff; color:var(--ink); padding:2.2% 3%;
  border-bottom:1.5px solid var(--ink); display:flex; align-items:center; gap:2.5%}
.pass-logo{height:32px; width:auto; flex:0 0 auto}
.pass-band-txt{min-width:0}
.pass-event{font-size:.5rem; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-2); line-height:1.25}
.pass-kind{font-weight:800; font-size:.66rem; letter-spacing:.05em; text-transform:uppercase}
.pass-main{flex:1; display:flex; align-items:center; gap:3%; padding:1.5% 3%; min-height:0}
.pass-left{flex:1; min-width:0}
.pass-name{font-size:.95rem; font-weight:800; line-height:1.1; text-transform:uppercase;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.pass-country{font-size:.66rem; color:var(--ink-2); margin:.15rem 0 .3rem}
.pass-uid{font-size:1.25rem; font-weight:800; font-variant-numeric:tabular-nums; line-height:1}
.pass-uid small{display:block; font-size:.48rem; letter-spacing:.12em; text-transform:uppercase; color:#555; font-weight:700; margin-bottom:1px}
.pass-qr{height:86%; aspect-ratio:1; flex:0 0 auto}
.pass-qr img{width:100%; height:100%; display:block}
.pass-guns{border-top:1px dashed #999; padding:1.2% 3%; font-size:.5rem;
  display:flex; flex-wrap:wrap; gap:.15rem .6rem; align-items:center; min-height:1.1em}
.pass-guns .s{font-family:ui-monospace,Menlo,Consolas,monospace; font-weight:700; white-space:nowrap}

/* batch printing */
#batch-print .pass{margin:0 auto 12px}
@media print{
  @page{size:A4; margin:0}
  .pass, .pass *{-webkit-print-color-adjust:exact; print-color-adjust:exact}
  body *{visibility:hidden}

  /* single pass: badge centered on the page */
  body.print-pass #pass-holder, body.print-pass #pass-holder *{visibility:visible}
  body.print-pass #pass-holder{
    position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  }
  /* batch: 4 badges per A4 sheet (2 x 2), cut along the middle */
  body.print-batch #batch-print, body.print-batch #batch-print *{visibility:visible}
  body.print-batch #batch-print{position:absolute; inset:0; display:block !important}
  .print-page .pass{margin:0}

  /* exact credit-card size: ISO ID-1, 85.6 x 54 mm */
  body.print-pass .pass, .print-page .pass{
    width:85.6mm; min-width:85.6mm; max-width:85.6mm;
    height:54mm; min-height:54mm; max-height:54mm; aspect-ratio:auto;
  }
  .pass{font-size:8pt; border-width:1pt; border-radius:3mm}
  .pass-band{padding:1.2mm 2.4mm; gap:1.8mm}
  .pass-logo{height:8.5mm}
  .pass-event{font-size:4pt}
  .pass-kind{font-size:5.5pt}
  .pass-main{padding:1mm 2.4mm; gap:2mm}
  .pass-name{font-size:9pt}
  .pass-country{font-size:5.5pt; margin:.4mm 0 1mm}
  .pass-uid{font-size:12pt}
  .pass-uid small{font-size:4pt}
  .pass-qr{height:24mm; width:24mm}
  .pass-guns{font-size:4.5pt; padding:.8mm 2.4mm; gap:.3mm 2mm}

  /* batch: 10 cards per A4 (2 x 5) */
  .print-page{
    width:210mm; height:296mm; page-break-after:always;
    display:grid; grid-template-columns:repeat(2, 85.6mm); grid-template-rows:repeat(5, 54mm);
    gap:2.5mm 6mm; align-content:center; justify-content:center;
    align-items:center; justify-items:center; padding:0; box-sizing:border-box;
  }
  .no-print{display:none !important}
}
@media (max-width:420px){
  .pass-qr{width:104px; height:104px}
  .searchbar{flex-direction:column}
  .searchbar select{max-width:100%}
}