/* ── ProjectID — standalone (mobile-first) ───────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Segoe UI', Inter, Arial, sans-serif;
  background: #0B0C10; color: #C1C2C5; min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; cursor: pointer; }
a { color: #19C37D; text-decoration: none; }

/* ── Brand bar ───────────────────────────────────────────────────────────── */
.pid-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; background: #111214; border-bottom: 2px solid #19C37D;
  position: sticky; top: 0; z-index: 10;
}
.pid-dot { width: 9px; height: 9px; border-radius: 50%; background: #19C37D; box-shadow: 0 0 8px #19C37D; }
.pid-brand { font-size: 16px; font-weight: 800; color: #fff; letter-spacing: 0.5px; }
.pid-brand span { color: #19C37D; }
.pid-bar-actions { margin-left: auto; display: flex; gap: 8px; }

/* ── Layout ──────────────────────────────────────────────────────────────── */
.pid-wrap { max-width: 1100px; margin: 0 auto; padding: 20px 18px 60px; }
.pid-narrow { max-width: 460px; margin: 0 auto; padding: 24px 18px 60px; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.pbtn { border: none; border-radius: 8px; font-size: 14px; font-weight: 700;
  padding: 12px 18px; color: #fff; background: #19C37D; transition: background 0.12s; }
.pbtn:hover { background: #15A86B; }
.pbtn-block { width: 100%; }
.pbtn-ghost { background: #1A1C24; color: #C1C2C5; border: 1px solid #2C2E38; }
.pbtn-ghost:hover { background: #22242E; }
.pbtn-sm { padding: 7px 13px; font-size: 12px; }
.pbtn-blue { background: #1971FF; } .pbtn-blue:hover { background: #155FE0; }

/* ── Inputs ──────────────────────────────────────────────────────────────── */
.pfield { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.pfield label { font-size: 11px; color: #9AA0AB; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.pfield input, .pfield select {
  background: #15161C; border: 1px solid #25272F; border-radius: 8px;
  color: #E8E9ED; font-size: 16px; padding: 12px 14px; outline: none; width: 100%;
}
.pfield input:focus, .pfield select:focus { border-color: #19C37D; }
.prow { display: flex; gap: 12px; }
.prow .pfield { flex: 1; }

/* ── Cards / registry ────────────────────────────────────────────────────── */
.pid-h1 { font-size: 22px; font-weight: 800; color: #fff; margin-bottom: 4px; }
.pid-sub { font-size: 13px; color: #9AA0AB; margin-bottom: 20px; }
.pid-search { width: 100%; background: #15161C; border: 1px solid #25272F; border-radius: 8px;
  color: #E8E9ED; font-size: 15px; padding: 12px 14px; outline: none; margin-bottom: 16px; }
.pid-search:focus { border-color: #19C37D; }

.co-group { margin-bottom: 18px; }
.co-group-head { display: flex; align-items: center; justify-content: space-between;
  background: #111214; border: 1px solid #1E2028; border-radius: 8px 8px 0 0;
  padding: 10px 14px; border-bottom: 2px solid #19C37D; }
.co-group-name { font-size: 12px; font-weight: 800; color: #E0E1E5; text-transform: uppercase; letter-spacing: 0.5px; }
.co-group-count { font-size: 11px; color: #9AA0AB; font-weight: 700; }
.pid-row { display: flex; align-items: center; gap: 12px; background: #0F1014;
  border: 1px solid #1E2028; border-top: none; padding: 12px 14px; cursor: pointer; }
.pid-row:last-child { border-radius: 0 0 8px 8px; }
.pid-row:hover { background: #15161D; }
.pid-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700;
  background: #15161C; border: 2px solid #19C37D; color: #19C37D; }
.pid-row-info { flex: 1; min-width: 0; }
.pid-row-name { font-size: 15px; font-weight: 700; color: #E8E9ED; }
.pid-row-meta { font-size: 12px; color: #9AA0AB; }
.pid-row-num { font-size: 11px; color: #19C37D; font-weight: 700; letter-spacing: 0.5px; }
.pid-chip { font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 10px; }
.chip-Worker { background: #0F1A30; color: #4DABF7; }
.chip-Young.Worker, .chip-YoungWorker { background: #2A1A00; color: #FF9F0A; }
.chip-Visitor { background: #101A00; color: #94D82D; }

/* ── Badge / wallet card ─────────────────────────────────────────────────── */
.badge {
  max-width: 380px; margin: 24px auto; background: linear-gradient(160deg,#16181F,#0E0F14);
  border: 1px solid #25272F; border-radius: 18px; overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
.badge-top { background: linear-gradient(135deg,#19C37D,#0E8F5A); padding: 18px 20px; display: flex; align-items: center; gap: 10px; }
.badge-top .pid-dot { background: #fff; box-shadow: none; }
.badge-brand { font-size: 15px; font-weight: 800; color: #fff; letter-spacing: 1px; }
.badge-body { padding: 22px 20px; text-align: center; }
.badge-avatar { width: 76px; height: 76px; border-radius: 50%; margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 800;
  background: #15161C; border: 3px solid #19C37D; color: #19C37D; }
.badge-name { font-size: 24px; font-weight: 800; color: #fff; }
.badge-pid { font-size: 15px; font-weight: 700; color: #19C37D; letter-spacing: 2px; margin: 5px 0; }
.badge-meta { font-size: 14px; color: #9598A2; }
.badge-type { display: inline-block; font-size: 12px; font-weight: 700; padding: 4px 14px; border-radius: 20px; margin-top: 10px; }
.badge-qr { background: #fff; padding: 14px; border-radius: 12px; display: inline-block; margin: 18px auto 6px; }
.badge-qr img, .badge-qr canvas { display: block; }
.badge-scan-hint { font-size: 11px; color: #9AA0AB; }
.badge-certs { border-top: 1px solid #1E2028; margin-top: 18px; padding-top: 14px; text-align: left; }
.badge-cert { display: flex; align-items: center; justify-content: space-between; font-size: 12px; padding: 5px 0; }
.badge-cert-name { color: #C1C2C5; }
.badge-foot { padding: 12px 20px; background: #0B0C10; border-top: 1px solid #1E2028;
  font-size: 10px; color: #82868F; text-align: center; }

/* ── Certification alerts ────────────────────────────────────────────────── */
.cert-banner { border-radius: 8px; padding: 12px 16px; font-size: 13px; margin-bottom: 16px; }
.cert-banner-warn { background: #2A1500; border: 1px solid #5A3300; color: #FF9F0A;
  cursor: pointer; display: flex; align-items: center; gap: 8px; font-weight: 600; }
.cert-banner-warn:hover { background: #331A00; }
.cert-banner-warn b { color: #fff; }
.cert-banner-cta { margin-left: auto; color: #FF9F0A; font-weight: 700; }
.cert-banner-ok { background: #0F2415; border: 1px solid #1E4A2A; color: #19C37D; font-weight: 600; }
.cert-warn { color: #FF9F0A; font-size: 13px; margin-left: 7px; }
.alert-row { display: flex; align-items: center; gap: 12px; padding: 11px 4px;
  border-bottom: 1px solid #1E2028; cursor: pointer; }
.alert-row:hover { background: #15161D; }
.alert-row:last-child { border-bottom: none; }

/* ── Success / notice ────────────────────────────────────────────────────── */
.pid-success { text-align: center; padding: 20px 0; }
.pid-check { width: 90px; height: 90px; border-radius: 50%; margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center; font-size: 44px;
  background: #0F2415; color: #19C37D; border: 3px solid #19C37D; }
.pid-success-pid { font-size: 26px; font-weight: 800; color: #19C37D; letter-spacing: 2px; margin: 8px 0; }

.pid-empty { text-align: center; color: #82868F; padding: 50px 20px; }
.pid-empty-icon { font-size: 34px; margin-bottom: 10px; }

/* ── Modal ───────────────────────────────────────────────────────────────── */
.pid-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: flex;
  align-items: center; justify-content: center; z-index: 100; padding: 16px; }
.pid-overlay.hidden { display: none; }
.pid-modal { background: #13141A; border: 1px solid #25272F; border-radius: 12px;
  width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto; padding: 20px; }
.pid-modal h3 { font-size: 16px; color: #fff; margin-bottom: 16px; }

/* ── Toast ───────────────────────────────────────────────────────────────── */
#pid-toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: #1A1C24; border: 1px solid #2C2E38; border-radius: 8px; padding: 12px 20px;
  font-size: 14px; color: #E8E9ED; opacity: 0; transition: all 0.25s; pointer-events: none; z-index: 200; }
#pid-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#pid-toast.error { border-color: #FF453A; }

@media print {
  .pid-bar, .pid-bar-actions, .no-print { display: none !important; }
  body { background: #fff; }
  .badge { box-shadow: none; border: 1px solid #999; }
}