*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:#f4f5f7;color:#1a1a1a;margin:0;padding:1rem;font-size:16px}
.wrap{max-width:420px;margin:0 auto}
h1{font-size:1.3rem;margin:0 0 .25rem}
.sub{color:#666;font-size:.9rem;margin:0 0 1.25rem}
.card{background:#fff;border:1px solid #ddd;border-radius:10px;padding:1rem;margin-bottom:1rem}
label{display:block;font-size:.85rem;font-weight:600;margin:.6rem 0 .25rem}
input,select{width:100%;padding:.6rem;border:1px solid #ccc;border-radius:6px;font-size:1rem}
button{width:100%;padding:.7rem;border:0;border-radius:6px;background:#1a5cff;color:#fff;font-size:1rem;font-weight:600;margin-top:1rem;cursor:pointer}
button.secondary{background:#e2e5eb;color:#1a1a1a}
.btn-link{display:block;text-align:center;width:100%;padding:.7rem;border-radius:6px;background:#1a5cff;color:#fff;font-size:1rem;font-weight:600;margin-top:1rem;text-decoration:none;box-sizing:border-box}
button.danger{background:#d33}
.error{background:#fde;border:1px solid #f9c;color:#900;padding:.6rem;border-radius:6px;font-size:.9rem;margin-bottom:.75rem}
.ok{background:#e6f4ea;border:1px solid #a6d8b6;color:#1a7a34;padding:.6rem;border-radius:6px;font-size:.9rem;margin-bottom:.75rem}
/* Panic alert — gate banner + hold-to-send button */
.panic-card{border-color:#f0b6b6}
.panic-btn{position:relative;overflow:hidden;width:100%;background:#c81e1e;color:#fff;border:0;border-radius:10px;padding:1rem;font-size:1.05rem;font-weight:700;margin-top:.25rem;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none}
.panic-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(0,0,0,.28)}
.panic-label{position:relative}
.panic-banner{position:sticky;top:.5rem;z-index:60;display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}
.panic-item{background:#c81e1e;color:#fff;border-radius:10px;padding:.85rem 1rem;display:flex;justify-content:space-between;align-items:center;gap:.75rem;box-shadow:0 4px 14px rgba(0,0,0,.28);animation:panicPulse 1.2s ease-in-out infinite}
@keyframes panicPulse{0%,100%{box-shadow:0 0 0 0 rgba(200,30,30,.55)}50%{box-shadow:0 0 0 7px rgba(200,30,30,0)}}
.panic-info strong{letter-spacing:.02em}
.panic-addr{font-size:.95rem;margin-top:.1rem}
.panic-ago{font-size:.78rem;opacity:.85;margin-top:.1rem}
.panic-ack{width:auto;margin-top:0;background:#fff;color:#c81e1e;font-weight:700;padding:.55rem .8rem;border-radius:7px;white-space:nowrap}
/* Offline gate verification: status pill + local result */
.offline-status{padding:.5rem .8rem;border-radius:8px;font-size:.85rem;font-weight:600;margin-bottom:1rem;text-align:center}
.offline-status.on{background:#e6f4ea;color:#1a7a34}
.offline-status.off{background:#fff4e5;color:#8a5a12;border:1px solid #f0d9a8}
.offline-result{border-width:2px;border-style:solid}
.offline-result.ok{border-color:#1a7a34}
.offline-result.bad{border-color:#c0392b}
.offline-badge{display:inline-block;background:#8a5a12;color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.05em;padding:.15rem .5rem;border-radius:20px;margin-bottom:.5rem}
.offline-title{font-size:1.3rem;font-weight:700}
.offline-addr{color:#444;margin-top:.2rem}
.brandline{display:flex;align-items:center;gap:.5rem;font-weight:700;font-size:1.05rem;color:#1a5cff;margin:0 0 1rem}
.brandline .mark{margin-right:0}
.brandlogo{max-height:48px;max-width:160px;height:auto;width:auto;display:block;flex:0 0 auto}
.code{font-size:2.4rem;letter-spacing:.4rem;font-weight:700;text-align:center;margin:.5rem 0}
.qr{text-align:center;margin:.75rem 0}
.qr svg{width:160px;height:160px}
.status{display:inline-block;padding:.2rem .6rem;border-radius:20px;font-size:.8rem;font-weight:600}
.status-valid,.status-active,.status-checked_out{background:#e6f4ea;color:#1a7a34}
.status-used,.status-checked_in{background:#e6f0fa;color:#1a5cff}
.status-expired,.status-revoked,.status-not_found{background:#fde8e8;color:#c0392b}
.status-exit_expired,.status-exit_revoked{background:#fff4e5;color:#966922}
.result{text-align:center;padding:1rem 0}
.result .big{font-size:1.4rem;font-weight:700;margin:.5rem 0}
.table-scroll{overflow-x:auto;margin:-1rem;padding:1rem}
table{width:100%;min-width:600px;border-collapse:collapse;font-size:.85rem}
th,td{text-align:left;padding:.4rem;border-bottom:1px solid #eee;white-space:nowrap}
.row{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0;border-bottom:1px solid #eee;font-size:.9rem}
.row:last-child{border-bottom:0}
.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
.top form{display:inline}
.top button{width:auto;margin:0;padding:.4rem .8rem;font-size:.85rem;background:#e2e5eb;color:#1a1a1a}
.filters{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}
.filters input{width:auto;flex:1;min-width:100px}
.hint{color:#888;font-size:.8rem;margin-top:.25rem}
.wide{max-width:800px}
@media (min-width:960px){.wide{max-width:1150px}}