:root {
  --pngtpa-card-w: min(100%, 390px);
  --pngtpa-radius: 28px;
  --pngtpa-gold: #ffd100;
  --pngtpa-gold-soft: #e9cf6b;
  --pngtpa-ink: #f4f7fb;
  --pngtpa-muted: rgba(255,255,255,.78);
}
html .pngtpa-verify-body, html .pngtpa-verify-body body { margin:0; }
.pngtpa-verify-body {
  min-height:100vh;
  background: radial-gradient(circle at top center, rgba(255,209,0,.10), transparent 18%), linear-gradient(180deg, #07090d, #0b0f16 58%, #090b10);
  color: var(--pngtpa-ink);
}
.pngtpa-verify-body *, .pngtpa-id-wrap *, .pngtpa-id-stage *, .pngtpa-id-card * { box-sizing:border-box; }
.pngtpa-verify-shell, .pngtpa-id-wrap { display:flex; justify-content:center; padding:16px 12px 22px; }
.pngtpa-id-stage { width: var(--pngtpa-card-w); margin:0 auto; }

/* Permanent height fix: grid-stacked faces instead of absolute faces */
.pngtpa-id-card {
  width:100%;
  display:grid;
  perspective: 1200px;
  transform-style: preserve-3d;
  isolation:isolate;
}
.pngtpa-card-face {
  grid-area:1 / 1;
  position:relative;
  border-radius:var(--pngtpa-radius);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height: 680px;
  background:
    radial-gradient(circle at top left, rgba(255,209,0,.08), transparent 28%),
    linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.01)),
    linear-gradient(180deg, #171b22, #0d1016 68%, #090b10);
  box-shadow:0 20px 60px rgba(0,0,0,.38);
  border:1px solid rgba(255,255,255,.08);
  color:var(--pngtpa-ink);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transform-style:preserve-3d;
  transition: transform .65s ease, opacity .35s ease, visibility .35s ease;
}
.pngtpa-card-front { transform:rotateY(0deg); z-index:2; }
.pngtpa-card-back { transform:rotateY(180deg); opacity:0; visibility:hidden; z-index:1; }
.pngtpa-id-card.is-back .pngtpa-card-front { transform:rotateY(-180deg); opacity:0; visibility:hidden; z-index:1; }
.pngtpa-id-card.is-back .pngtpa-card-back { transform:rotateY(0deg); opacity:1; visibility:visible; z-index:2; }

.pngtpa-brand-band { padding:18px 18px 10px; }
.pngtpa-brand-band::after { content:""; display:block; height:4px; border-radius:999px; margin-top:12px; background:linear-gradient(90deg,var(--pngtpa-gold),var(--pngtpa-gold-soft)); }
.pngtpa-brand-logo { font-size:34px; font-weight:800; letter-spacing:.6px; color:#fff; line-height:1; }
.pngtpa-brand-sub { margin-top:8px; color:var(--pngtpa-gold-soft); font-size:11px; letter-spacing:2px; text-transform:uppercase; }
.pngtpa-card-content { flex:1; padding:10px 16px 8px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; }
.pngtpa-card-content.back { align-items:stretch; }
.pngtpa-photo-shell { width:120px; height:142px; border-radius:22px; overflow:hidden; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10); box-shadow:0 12px 28px rgba(0,0,0,.28); flex:0 0 auto; }
.pngtpa-photo-shell img { width:100%; height:100%; object-fit:cover; display:block; }
.pngtpa-photo-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; text-align:center; color:rgba(255,255,255,.62); padding:14px; }
.pngtpa-name { margin-top:12px; font-size:23px; line-height:1.08; font-weight:800; text-align:center; text-wrap:balance; }
.pngtpa-role { margin-top:6px; color:var(--pngtpa-gold); font-weight:700; font-size:15px; text-align:center; }
.pngtpa-division { margin-top:4px; color:var(--pngtpa-muted); text-align:center; font-size:13px; text-wrap:balance; }
.pngtpa-mini-grid { width:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:14px; }
.pngtpa-mini-grid.one-col { grid-template-columns:1fr; }
.pngtpa-mini-grid > div, .pngtpa-back-grid > div { border-radius:18px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); padding:11px 12px; min-width:0; }
.pngtpa-mini-grid span, .pngtpa-back-grid span { display:block; color:rgba(255,255,255,.68); font-size:11px; text-transform:uppercase; letter-spacing:1.2px; margin-bottom:6px; }
.pngtpa-mini-grid strong, .pngtpa-back-grid strong { font-size:15px; color:#fff; overflow-wrap:anywhere; word-break:break-word; }
.status-pill { display:inline-flex; align-items:center; justify-content:center; padding:4px 10px; border-radius:999px; max-width:100%; }
.status-active { background:#2f8b1f; }
.status-inactive, .status-contract-ended { background:#8b5a1f; }
.status-suspended { background:#9a2020; }
.pngtpa-id-qr { background:#fff; border-radius:18px; padding:8px; box-sizing:border-box; margin-top:12px; box-shadow:0 12px 26px rgba(0,0,0,.28); display:flex; align-items:center; justify-content:center; }
.pngtpa-id-qr.large { width:108px; height:108px; }
.pngtpa-id-qr.small { width:84px; height:84px; margin:12px auto 0; }
.pngtpa-id-qr img, .pngtpa-id-qr svg, .pngtpa-id-qr canvas { width:100%; height:100%; display:block; border-radius:10px; }
.pngtpa-front-note { margin-top:8px; font-size:12px; color:var(--pngtpa-muted); text-align:center; overflow-wrap:anywhere; word-break:break-word; }
.pngtpa-back-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pngtpa-back-grid .span-2 { grid-column:span 2; }
.pngtpa-back-note { margin-top:12px; line-height:1.42; color:var(--pngtpa-muted); font-size:13px; overflow-wrap:anywhere; word-break:break-word; }
.pngtpa-notes-extra { margin-top:8px; color:#fff; overflow-wrap:anywhere; word-break:break-word; }
.pngtpa-card-actions { padding:0 16px 16px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.mode-public .pngtpa-card-actions.public-actions { grid-template-columns:1fr 1fr; }
.pngtpa-btn { appearance:none; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06); color:#fff; border-radius:15px; padding:12px 10px; font-weight:700; font-size:15px; cursor:pointer; min-height:48px; }
.pngtpa-btn-primary { background:linear-gradient(135deg, #0a67d0, #1c84ff); }
.pngtpa-btn-ghost { background:rgba(255,209,0,.10); color:var(--pngtpa-gold); border-color:rgba(255,209,0,.24); }
.pngtpa-qr-modal { position:fixed; inset:0; background:rgba(3,4,8,.78); display:none; align-items:center; justify-content:center; z-index:999999; padding:16px; }
.pngtpa-qr-modal.open { display:flex; }
.pngtpa-qr-dialog { width:min(92vw,420px); background:#fff; color:#111; border-radius:24px; padding:22px; text-align:center; position:relative; }
.pngtpa-qr-dialog .pngtpa-id-qr { width:280px; height:280px; margin:16px auto 0; box-shadow:none; border:1px solid #ececec; }
.pngtpa-qr-close { position:absolute; top:10px; right:12px; background:transparent; color:#111; border:0; font-size:28px; cursor:pointer; }
.pngtpa-not-found { max-width:420px; margin:60px auto; background:#fff; color:#111; border-radius:20px; padding:24px; }
@media (max-width: 480px) {
  .pngtpa-id-stage { width:min(100%, 360px); }
  .pngtpa-card-face { min-height: 640px; }
  .pngtpa-brand-logo { font-size:30px; }
  .pngtpa-brand-sub { font-size:10px; letter-spacing:1.6px; }
  .pngtpa-name { font-size:21px; }
  .pngtpa-role { font-size:14px; }
  .pngtpa-division { font-size:13px; }
  .pngtpa-mini-grid, .pngtpa-back-grid { grid-template-columns:1fr; }
  .pngtpa-back-grid .span-2 { grid-column:auto; }
  .pngtpa-card-actions, .mode-public .pngtpa-card-actions.public-actions { grid-template-columns:1fr 1fr; }
}
@media (max-width: 380px) {
  .pngtpa-verify-shell, .pngtpa-id-wrap { padding:12px 8px 18px; }
  .pngtpa-card-face { min-height: 612px; }
  .pngtpa-brand-band { padding:16px 14px 10px; }
  .pngtpa-card-content { padding:10px 14px 8px; }
  .pngtpa-card-actions { padding:0 14px 14px; gap:8px; }
  .pngtpa-photo-shell { width:108px; height:130px; }
  .pngtpa-name { font-size:19px; }
  .pngtpa-mini-grid strong, .pngtpa-back-grid strong { font-size:14px; }
  .pngtpa-id-qr.large { width:96px; height:96px; }
}