/* Certificate-only presentation. The preview and exported PNG share one renderer. */
.certificate-refined {
    background: radial-gradient(ellipse at 50% 32%, #e9eff5 0, #f6f8fb 60%);
    padding: 44px 0 52px;
    font-family: BeVietnam, Inter, Arial, sans-serif;
}
.certificate-refined .certificate-container { max-width: 1020px; }
.certificate-intro { max-width: 670px; margin-bottom: 26px; }
.certificate-eyebrow {
    display: inline-flex; align-items: center; gap: 9px;
    color: #896d35; font: 700 11px/1.6 Inter, Arial, sans-serif;
    letter-spacing: 1.65px; margin-bottom: 13px;
}
.certificate-eyebrow svg { width: 18px; height: 18px; }
.certificate-refined h1 { font-size: clamp(26px, 3.6vw, 37px); color: #132e49; font-weight: 700; letter-spacing: -.9px; margin-bottom: 12px; line-height: 1.3; }
.certificate-intro p { color: #677c8e; font-size: 14px; line-height: 1.8; margin: 0; }
.certificate-status { display: flex; align-items: center; gap: 13px; border: 1px solid #d9e8e2; background: #f5fbf8; border-radius: 16px; padding: 16px 20px; margin-bottom: 30px; }
.certificate-status-icon { display: grid; place-items: center; width: 35px; height: 35px; flex: 0 0 35px; border-radius: 50%; background: #e0f1e9; color: #13785a; }
.certificate-status-icon svg { width: 20px; height: 20px; }
.certificate-status div { min-width: 0; }
.certificate-status strong { display: block; color: #205746; font-size: 13px; font-weight: 600; line-height: 1.6; }
.certificate-status div > span { display: block; color: #687e73; font-size: 11px; line-height: 1.7; margin-top: 1px; }
.certificate-tier { margin-left: auto; flex-shrink: 0; padding: 6px 11px; border: 1px solid #ddd1b5; border-radius: 8px; color: #786136; background: #fffaf0; font-size: 11px; font-weight: 600; }
.certificate-status.is-invalid { border-color: #eacdd1; background: #fff7f8; }
.is-invalid .certificate-status-icon { background: #fae2e7; color: #ac394e; }
.is-invalid strong { color: #9c3247; }
.is-invalid div > span { color: #8b6c72; }
.certificate-stage { perspective: 1400px; padding: 0 0 20px; }
.certificate-artboard {
    --card-metal: #ead19a;
    position: relative; width: 100%; aspect-ratio: 16 / 9;
    container-type: inline-size; overflow: hidden; border-radius: 22px;
    background: #102a42; border: 1px solid #bea773;
    box-shadow: 0 24px 44px -17px #102a4266, 0 4px 8px #102a4212;
    transform-style: preserve-3d; transition: transform .28s ease, box-shadow .28s ease;
    isolation: isolate;
}
.certificate-artboard.is-silver { --card-metal: #e0e7ee; border-color: #adb8c4; }
.certificate-artboard canvas { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; }
.certificate-artboard canvas[hidden] { display: none; }
.certificate-artboard.is-rendered .certificate-fallback { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.certificate-fallback { position: absolute; inset: 0; color: #f7fafc; font-family: BeVietnam, Arial, sans-serif; }
.certificate-fallback header { position: absolute; inset: 0 0 auto; height: 28%; text-align: center; color: #16324a; padding-top: 4%; background: linear-gradient(115deg, #ffefc6, #cdae6b 65%, #f2dfae); }
.is-silver .certificate-fallback header { background: linear-gradient(115deg, #f1f5f9, #afbcca 65%, #e4ecf4); }
.certificate-fallback header > strong { font-size: 3cqw; font-weight: 700; }
.certificate-fallback header h2 { margin: 1.5% 0 0; color: inherit; font-size: 2.2cqw; line-height: 1.4; font-weight: 600; letter-spacing: 0; }
.certificate-fallback-person { position: absolute; left: 5.5%; top: 35%; width: 66%; }
.certificate-fallback-person small { color: var(--card-metal); font-size: 1.3cqw; letter-spacing: 1px; }
.certificate-fallback-person h3 { color: #f8fafc; font-size: 3.8cqw; line-height: 1.5; margin: 2% 0; overflow-wrap: anywhere; }
.certificate-fallback-person p { color: #c3d0dc; font-size: 1.7cqw; line-height: 1.6; max-height: 5.7cqw; overflow: hidden; margin: 0; }
.certificate-fallback-meta { position: absolute; left: 5.5%; bottom: 8%; width: 66%; display: flex; flex-direction: column; gap: .9cqw; }
.certificate-fallback-meta span { font-size: 1.4cqw; color: #c8d5df; overflow-wrap: anywhere; }
.certificate-fallback-meta strong { font-size: 1.7cqw; color: var(--card-metal); }
.certificate-fallback-qr { position: absolute; right: 6%; bottom: 7%; width: 15%; text-align: center; }
.certificate-fallback-qr [data-qr] { background: white; border-radius: 6px; padding: 3%; }
.certificate-fallback-qr svg { display: block; width: 100%; height: auto; }
.certificate-fallback-qr small { display: block; color: var(--card-metal); font-size: 1.2cqw; margin-top: 6%; }
.certificate-fallback-invalid { position: absolute; right: 4%; top: 35%; color: #ffb0bc; font-size: 1.2cqw; }
.certificate-actions { display: flex; gap: 12px; margin-top: 10px; }
.certificate-refined .certificate-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 49px; border-radius: 12px; font-family: inherit; font-size: 13px; font-weight: 600; padding: 12px 21px; transition: transform .2s ease, box-shadow .2s ease; }
.certificate-actions .btn-primary { background: #142f49; border-color: #142f49; box-shadow: 0 6px 15px #142f4915; }
.certificate-actions .btn-primary:hover { background: #204560; border-color: #204560; box-shadow: 0 9px 22px #142f4928; transform: translateY(-2px); }
.certificate-actions .btn-outline { color: #233e56; background: #ffffffd9; border-color: #cbd6df; }
.certificate-actions .btn-outline:hover { background: #fff; border-color: #8c9dac; transform: translateY(-2px); }
.certificate-actions .btn:disabled { opacity: .75; cursor: wait; transform: none; }
.certificate-actions .btn svg { width: 19px; height: 19px; }
.certificate-refined .certificate-export-note { display: flex; flex-wrap: wrap; gap: 6px 16px; color: #788896; font-size: 11px; line-height: 1.7; margin: 14px 0 28px; }
.certificate-export-note span + span::before { content: '·'; color: #b59b61; margin-right: 16px; }
.certificate-readable { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 32px; border: 1px solid #e1e7ed; background: #ffffffd9; border-radius: 16px; padding: 24px; }
.certificate-readable div { min-width: 0; }
.certificate-readable span { display: block; font-size: 11px; color: #768899; margin-bottom: 5px; }
.certificate-readable strong { display: block; font-size: 13px; font-weight: 600; color: #243d52; line-height: 1.6; overflow-wrap: anywhere; }
.certificate-readable .certificate-code { font-family: Inter, Arial, sans-serif; font-size: 12px; letter-spacing: .2px; }
.certificate-disclaimer { display: flex; align-items: flex-start; gap: 12px; margin-top: 22px; padding: 17px 20px; border-radius: 13px; border: 1px solid #e6e9ed; background: #f1f5f8; }
.certificate-disclaimer svg { width: 20px; height: 20px; flex-shrink: 0; color: #8796a4; margin-top: 2px; }
.certificate-disclaimer p { margin: 0; color: #738493; font-size: 11px; line-height: 1.9; }
@media (max-width: 600px) {
    .certificate-refined { padding-top: 28px; padding-bottom: 34px; }
    .certificate-refined .certificate-container { padding-left: 18px; padding-right: 18px; }
    .certificate-intro { margin-bottom: 22px; }
    .certificate-intro p { font-size: 12px; }
    .certificate-status { gap: 10px; padding: 13px; border-radius: 13px; margin-bottom: 24px; }
    .certificate-status strong { font-size: 11px; }
    .certificate-status div > span { font-size: 10px; }
    .certificate-status-icon { width: 30px; height: 30px; flex-basis: 30px; }
    .certificate-tier { display: none; }
    .certificate-artboard { border-radius: 12px; }
    .certificate-stage { padding-bottom: 13px; }
    .certificate-actions { gap: 9px; }
    .certificate-refined .certificate-actions .btn { flex: 1 1 0; min-width: 0; min-height: 48px; padding: 11px 10px; font-size: 11px; gap: 7px; line-height: 1.6; }
    .certificate-actions .btn svg { width: 16px; height: 16px; flex: 0 0 16px; }
    .certificate-refined .certificate-export-note { font-size: 10px; gap: 4px 11px; margin-bottom: 21px; }
    .certificate-export-note span + span::before { margin-right: 11px; }
    .certificate-readable { padding: 18px; gap: 16px; }
    .certificate-readable div:nth-child(1), .certificate-readable div:nth-child(2) { grid-column: 1 / -1; }
    .certificate-readable strong { font-size: 12px; }
    .certificate-disclaimer { padding: 14px; }
}
@media (max-width: 340px) { .certificate-actions { flex-direction: column; } }
@media (prefers-reduced-motion: reduce) {
    .certificate-artboard, .certificate-actions .btn { transition: none; transform: none !important; }
}
@media print {
    .certificate-refined .certificate-artboard { box-shadow: none; transform: none !important; }
    .certificate-actions, .certificate-export-note { display: none; }
}