/* ---------- Printable ID card (CR80, 54mm x 86mm portrait) front + back ---------- */
:root{ --idc-navy:#4A1D33; --idc-navy2:#6b2b4b; --idc-accent:#E4570C; --idc-gold:#F5A314; --idc-ink:#2b1a23; --idc-mute:#7a6470; }
.idc-pair{ display:flex; flex-wrap:wrap; gap:18px; justify-content:center; }
.idc{ width:54mm; height:86mm; background:#fff; border-radius:3mm; overflow:hidden; position:relative; box-shadow:0 6px 22px rgba(74,29,51,.22); border:.2mm solid #e2d5db; font-family:Inter,'Segoe UI',Arial,sans-serif; color:var(--idc-ink); display:flex; flex-direction:column; text-align:left; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
.idc, .idc *{ box-sizing:border-box; line-height:1.2; margin:0; }
.idc ol, .idc ul{ padding:0; }
.idc .idc-terms{ padding-left:3.2mm; }
.idc::before{ content:""; position:absolute; inset:0; background:url('../images/logo-emblem.png') center 58%/38mm no-repeat; opacity:.045; pointer-events:none; }

/* header */
.idc-top{ flex:none; position:relative; background:linear-gradient(135deg,var(--idc-navy) 0%,var(--idc-navy2) 100%); color:#fff; display:flex; align-items:center; gap:2mm; padding:2mm 2.6mm 2.6mm; }
.idc-top::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:.9mm; background:linear-gradient(90deg,var(--idc-gold),var(--idc-accent),var(--idc-gold)); }
.idc-logo{ width:8.4mm; height:8.4mm; border-radius:50%; background:#fff; padding:.5mm; object-fit:contain; flex:none; border:.3mm solid var(--idc-gold); }
.idc-org{ min-width:0; }
.idc-org-name{ font-size:2.2mm; font-weight:800; line-height:1.18; letter-spacing:.02em; }
.idc-org-reg{ font-size:1.6mm; opacity:.8; margin-top:.5mm; letter-spacing:.03em; }
.idc-top-sm{ padding:1.8mm 2.6mm 2.4mm; }
.idc-top-sm .idc-logo{ width:7mm; height:7mm; }
.idc-top-sm .idc-org-name{ font-size:2mm; }

/* ribbon */
.idc-ribbon{ text-align:center; margin:1.6mm 0 0; position:relative; }
.idc-ribbon span{ display:inline-block; background:var(--idc-accent); color:#fff; font-size:1.85mm; font-weight:800; letter-spacing:.16em; padding:.7mm 4mm; border-radius:0 0 1.6mm 1.6mm; margin-top:-1.6mm; }

/* photo */
.idc-photo-wrap{ display:flex; justify-content:center; margin:1.6mm 0 1mm; }
.idc-photo{ width:21.5mm; height:26mm; border-radius:1.6mm; overflow:hidden; background:#f4eef1; border:.5mm solid #fff; box-shadow:0 0 0 .5mm var(--idc-accent), 0 1mm 2.4mm rgba(74,29,51,.25); }
.idc-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* identity */
.idc-name{ text-align:center; font-weight:800; color:var(--idc-navy); font-size:3.1mm; line-height:1.15; padding:0 2mm; letter-spacing:.02em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; word-break:break-word; }
.idc-course-wrap{ text-align:center; margin:.9mm 2.4mm 1.2mm; }
.idc-course{ display:inline-block; background:#fdeee4; color:var(--idc-accent); border:.2mm solid #f6c7a8; border-radius:99px; font-weight:800; font-size:1.8mm; letter-spacing:.05em; text-transform:uppercase; padding:.5mm 2.6mm; line-height:1.25; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; vertical-align:top; }
.idc-rows{ padding:0 3.4mm; font-size:2.2mm; margin-bottom:1.2mm; }
.idc-rows div{ display:flex; justify-content:space-between; gap:2mm; padding:.45mm 0; border-bottom:.15mm solid #eadfe4; min-width:0; }
.idc-rows div:last-child{ border-bottom:0; }
.idc-rows span{ color:var(--idc-mute); white-space:nowrap; }
.idc-rows b{ min-width:0; font-weight:700; text-align:right; color:var(--idc-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.idc-expired{ color:#b3303d !important; }

/* signature + footer */
.idc-sign-row{ margin-top:auto; padding:0 3.4mm .8mm; display:flex; justify-content:flex-end; }
.idc-sign{ width:20mm; text-align:center; font-size:1.7mm; font-weight:700; color:var(--idc-navy); text-transform:uppercase; letter-spacing:.07em; }
.idc-sign .line{ border-top:.2mm solid var(--idc-navy); margin-bottom:.4mm; }
.idc-foot{ flex:none; margin-top:auto; background:linear-gradient(135deg,var(--idc-navy),var(--idc-navy2)); color:#fff; text-align:center; font-size:2mm; font-weight:700; padding:1.3mm 1.5mm 1.5mm; line-height:1.2; letter-spacing:.14em; border-top:.6mm solid var(--idc-gold); }

/* back */
.idc-back-body{ flex:1; display:flex; flex-direction:column; padding:2.6mm 3.2mm 1.4mm; position:relative; }
.idc-qr-row{ display:flex; align-items:center; gap:2.6mm; margin-bottom:2mm; }
.idc-qr{ width:19mm; height:19mm; flex:none; padding:.8mm; background:#fff; border:.2mm solid #dccdd5; border-radius:1.2mm; }
.idc-qr img, .idc-qr canvas, .jjsk-cert-qr img, .jjsk-cert-qr canvas{ width:100% !important; height:100% !important; display:block; }
.idc-qr-text{ font-size:1.9mm; color:var(--idc-mute); line-height:1.4; }
.idc-qr-text b{ display:block; color:var(--idc-navy); font-size:2.3mm; margin-bottom:.5mm; text-transform:uppercase; letter-spacing:.06em; }
.idc-block{ margin-bottom:1.6mm; }
.idc-block-title{ font-size:1.8mm; font-weight:800; color:var(--idc-accent); text-transform:uppercase; letter-spacing:.1em; border-bottom:.2mm solid #f1d3bf; padding-bottom:.3mm; margin-bottom:.7mm; }
.idc-addr{ font-size:2.1mm; line-height:1.35; }
.idc-terms{ margin:0; padding-left:3mm; font-size:1.8mm; line-height:1.38; color:#51404a; }
.idc-issuer{ margin-top:auto; align-self:flex-end; width:34mm; text-align:center; font-size:1.6mm; font-weight:700; color:var(--idc-navy); text-transform:uppercase; letter-spacing:.05em; }
.idc-issuer .line{ border-top:.2mm solid var(--idc-navy); margin-bottom:.4mm; }
.idc-back-foot{ flex:none; background:linear-gradient(135deg,var(--idc-navy),var(--idc-navy2)); color:#fff; text-align:center; font-size:1.55mm; line-height:1.4; padding:1.4mm 2mm; border-top:.6mm solid var(--idc-gold); }

.jjsk-cert-qr{ width:6.6cqw; height:6.6cqw; margin:0 auto .3cqw; background:#fff; padding:.3cqw; border:.12cqw solid #F5A314; }

.print-page{ background:#f4f1f3; padding:16px; }
.print-bar{ text-align:center; margin-bottom:16px; display:flex; gap:10px; justify-content:center; }
@media print{
  .print-page{ background:#fff; padding:0; }
  .idc{ box-shadow:none; break-inside:avoid; }
  .idc-pair{ gap:8mm; }
}

/* ---------- Certificate (A4 portrait, blue & gold frame) — scales with container width ---------- */
.iso-cert{ --blue:#1b3f7e; --blue2:#102a5c; --gold:#c8962e; --gold2:#e9c46a;
  position:relative; width:100%; max-width:640px; margin:0 auto; aspect-ratio:210/297; background:#fff; container-type:inline-size; overflow:hidden;
  font-family:'Times New Roman',Georgia,serif; color:#14234a; box-shadow:0 6px 28px rgba(16,42,92,.2); -webkit-print-color-adjust:exact; print-color-adjust:exact; }
.iso-frame{ position:absolute; inset:0; background:
  linear-gradient(115deg, var(--gold) 0 3.2%, transparent 3.25%) ,
  linear-gradient(-115deg, var(--gold) 0 3.2%, transparent 3.25%);
  border-left:2.6cqw solid var(--gold2); border-right:2.6cqw solid var(--gold2); }
.iso-band{ position:absolute; left:0; right:0; bottom:0; height:19.5%; background:linear-gradient(180deg,var(--blue),var(--blue2)); border-top:.9cqw solid var(--gold); border-radius:50% 50% 0 0 / 14% 14% 0 0; }
.iso-watermark{ position:absolute; left:50%; top:46%; width:56cqw; transform:translate(-50%,-50%); opacity:.06; }
.iso-body{ position:absolute; inset:0; padding:3.2cqw 9cqw 0; text-align:center; display:flex; flex-direction:column; align-items:center; }
.iso-logo{ width:11.5cqw; height:11.5cqw; object-fit:contain; border-radius:50%; background:#fff; }
.iso-org{ font-family:Georgia,serif; font-weight:700; color:var(--blue); font-size:3.55cqw; letter-spacing:.03em; margin-top:.8cqw; line-height:1.15; }
.iso-reg{ font-size:2cqw; color:#4a5a80; margin-top:.6cqw; }
.iso-ribbon{ margin:1.6cqw 0 1.2cqw; padding:1.2cqw 8cqw; background:linear-gradient(90deg,#9a6f1a,#e9c46a,#9a6f1a); clip-path:polygon(4% 0,96% 0,100% 50%,96% 100%,4% 100%,0 50%); }
.iso-ribbon span{ color:var(--blue2); font-weight:700; font-size:3.7cqw; letter-spacing:.08em; }
.iso-lead{ font-size:2.8cqw; }
.iso-name{ font-weight:700; color:var(--blue); font-size:5cqw; line-height:1.15; margin-top:.8cqw; letter-spacing:.02em; }
.iso-sub{ font-weight:700; font-size:2.7cqw; margin-top:.9cqw; }
.iso-addr{ font-weight:700; font-size:2.3cqw; margin-top:.5cqw; line-height:1.3; }
.iso-text{ font-size:2.5cqw; line-height:1.38; margin:1.6cqw 0 1cqw; }
.iso-course{ font-weight:700; color:#111; font-size:4.1cqw; line-height:1.15; letter-spacing:.01em; }
.iso-scope{ font-weight:700; color:var(--blue); font-size:2.5cqw; margin-top:1cqw; }
.iso-details{ width:100%; display:flex; justify-content:space-between; align-items:flex-end; margin-top:2.6cqw; text-align:left; }
.iso-details p{ margin:0 0 .5cqw; font-size:2.4cqw; }
.iso-sign{ width:30cqw; text-align:center; font-size:2.5cqw; }
.iso-sign .line{ border-top:.25cqw solid var(--blue2); margin-bottom:.6cqw; }
.iso-foot{ position:absolute; left:9cqw; right:9cqw; bottom:1.8cqw; display:flex; align-items:center; gap:3cqw; color:#fff; text-align:left; }
.iso-qr{ flex:none; width:15.5cqw; height:15.5cqw; background:#fff; padding:.9cqw; border:.3cqw solid var(--gold); }
.iso-qr img, .iso-qr canvas{ width:100% !important; height:100% !important; display:block; }
.iso-foot-text{ font-family:Arial,sans-serif; font-size:1.8cqw; line-height:1.38; }
.iso-foot-text b{ font-size:1.95cqw; letter-spacing:.03em; }
.iso-foot-text span{ color:#f6e2a8; }