/* Professional ID card (front/back) */

:root{
  /* CR80-ish ratio (85.6mm x 54mm => 1.585) */
  --idcard-w: 420px;
  --idcard-h: 305px;
  --idcard-h-back: 330px;
}

.idcard-stage{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  justify-content:center;
  padding: 8px;
  overflow-x:auto;
}

.idcard{
  width: var(--idcard-w);
  height: var(--idcard-h);
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(15,23,42,.12);
  box-shadow: 0 18px 45px rgba(2,6,23,.10);
  overflow:hidden;
  position:relative;
}

.idcard-back{
  height: var(--idcard-h-back);
}

.idcard .wm{
  position:absolute;
  inset: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 1000;
  letter-spacing: 0;
  color:#0f172a;
  opacity: .06;
  transform: rotate(-18deg);
  font-size: clamp(24px, 4.6vw, 38px);
  pointer-events:none;
  -webkit-user-select:none;
  user-select:none;
  max-width: 92%;
  margin: 0 auto;
  text-align:center;
  white-space: normal;
  line-height: 1.1;
}

.idcard .bar{
  height: 10px;
  background: linear-gradient(90deg,#1d4ed8,#0ea5e9,#22c55e);
}

.idcard .pad{ padding: 14px 16px 78px; }

.idcard .org{
  display:flex;
  align-items:center;
  gap:10px;
}

.idcard .logo{
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background: rgba(255,255,255,.0);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border: 1px solid rgba(15,23,42,.08);
}

.idcard .logo img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
}

.idcard .org .name{
  font-weight: 900;
  color:#0f172a;
  line-height: 1.1;
}

.idcard .org .sub{
  font-size: .78rem;
  color:#64748b;
  margin-top: 2px;
}

.idcard .tag{
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .6px;
  color:#0b1220;
  background: rgba(2,6,23,.04);
  border: 1px solid rgba(2,6,23,.14);
  padding: 4px 10px;
  border-radius: 999px;
}

.idcard .grid{
  display:grid;
  grid-template-columns: 1fr 118px;
  gap: 12px;
  margin-top: 12px;
}

.idcard .photo-wrap{
  width: 118px;
  position: relative;
  overflow: visible;
  padding-bottom: 34px;
}

.idcard .photo{
  width: 118px;
  height: 118px;
  border-radius: 14px;
  background: radial-gradient(circle at top left, rgba(29,78,216,.18), rgba(2,6,23,.04));
  border: 1px solid rgba(15,23,42,.10);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#334155;
  font-weight: 900;
  font-size: 2.2rem;
  position: relative;
  z-index: 1;
}

.idcard .sig-img{
  height: 26px;
  width: auto;
  display:block;
  margin-bottom: 4px;
}

.idcard .stamp-img{
  width: 62px;
  height: 62px;
  opacity: .22;
}

.idcard .stamp-under-photo{
  position:absolute;
  left: 50%;
  transform: translateX(-50%) rotate(-10deg);
  bottom: 0;
  z-index: 2;
  pointer-events:none;
}

.idcard .k{ font-size: .70rem; color:#64748b; font-weight: 800; letter-spacing: .3px; }
.idcard .v{ font-size: .92rem; color:#0f172a; font-weight: 900; }

.idcard .row2{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }

.idcard .foot{
  position:absolute;
  left: 0; right: 0; bottom: 0;
  padding: 10px 16px;
  border-top: none;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
}

.idcard .sign{
  text-align:left;
}

.idcard .sign .line{ display:none; }
.idcard .sign .who{ font-size: .78rem; font-weight: 900; color:#0f172a; line-height:1.1; }
.idcard .sign .role{ font-size: .70rem; color:#64748b; font-weight: 800; }

.idcard .meta{
  text-align:right;
  font-size: .72rem;
  color:#475569;
  font-weight: 800;
}

.idcard-back .pad{ padding: 14px 16px; }
.idcard-back .title{ font-weight: 1000; color:#0f172a; }
.idcard-back .small{ font-size: .80rem; color:#475569; }
.idcard-back .box{ border: 1px solid rgba(15,23,42,.10); border-radius: 12px; padding: 9px 12px; background: rgba(248,250,252,.9); }
.idcard-back .list{ margin: 10px 0 0; padding-left: 18px; color:#334155; font-size:.82rem; }

.idcard-back .wm{
  opacity: .045;
  letter-spacing: 0;
  font-size: 34px;
}

.idcard-back .howbox{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 12px;
  padding: 9px 12px;
  background: rgba(248,250,252,.9);
}

.idcard-back .howgrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 6px;
}

.idcard-back .howtitle{
  font-size: .74rem;
  font-weight: 900;
  color:#0f172a;
  margin-bottom: 2px;
}

.idcard-back .howlist{
  margin: 0;
  padding-left: 18px;
  font-size: .74rem;
  color:#475569;
}

@media (max-width: 520px){
  :root{
    --idcard-w: 360px;
    --idcard-h: 262px;
    --idcard-h-back: 292px;
  }
  .idcard .wm{ font-size: clamp(22px, 5.2vw, 34px); }
}

@media print {
  body{ background:#fff !important; }
  .no-print{ display:none !important; }
  .idcard-stage{ gap: 0; }
  .idcard{ box-shadow:none; border: 1px solid #cbd5e1; }
}