/* Drabuff achievement diploma — responsive, print-ready and code-native. */
.certificate.diploma{position:relative;background:#142942;color:#172d46;padding:26px;border:1px solid #bba36e;border-radius:22px;margin:0 auto 30px;text-align:center;overflow:hidden;box-shadow:0 20px 55px #14294222,0 5px 0 #0c1c2f;max-width:1120px;isolation:isolate}.diploma:before{content:'';position:absolute;inset:9px;border:1px solid #d8bb734d;border-radius:15px;pointer-events:none}.diploma-top{display:flex;align-items:center;justify-content:space-between;padding:2px 10px 24px;color:#fff;gap:20px}.diploma-brand{display:flex;align-items:center;gap:12px;text-align:left}.diploma-brand img{width:58px;height:58px;object-fit:contain;background:#fff;border-radius:11px;padding:5px}.diploma-brand b{display:block;font-size:23px;letter-spacing:2px;line-height:1.3;color:#fff}.diploma-brand span{font-size:9px;letter-spacing:2.6px;color:#d4b878;display:block;margin-top:3px}.diploma-edition{text-align:right}.diploma-edition span{display:block;font-size:10px;letter-spacing:2px;color:#f2da9a}.diploma-edition b{display:block;margin-top:5px;font-size:10px;font-weight:600;color:#ccd6e4;letter-spacing:1px}.diploma-sheet{position:relative;background:#fffcf5;background-image:radial-gradient(ellipse at 50% 0,#f9e6b52b,transparent 60%);border:1px solid #dfc789;padding:44px 45px 30px;border-radius:4px;overflow:hidden}.diploma-sheet:before,.diploma-sheet:after{content:'';position:absolute;pointer-events:none;width:70px;height:70px;border:2px solid #c49a48}.diploma-sheet:before{top:12px;left:12px;border-right:0;border-bottom:0}.diploma-sheet:after{bottom:12px;right:12px;border-left:0;border-top:0}.diploma-watermark{position:absolute;right:-80px;top:130px;font-size:400px;line-height:1;color:#c49a4807;pointer-events:none}.diploma-kicker{color:#9a7434;font-size:10px;letter-spacing:3.2px;font-weight:800;margin:0 110px 16px}.certificate.diploma h2{color:#172d46;font-size:42px;letter-spacing:3px;line-height:1.15;font-weight:1000;margin:0 110px 24px;text-shadow:none}.certificate.diploma h2 span{font-size:28px;letter-spacing:6px;font-weight:700}.certificate.diploma p.diploma-present{font-size:13px;color:#697789;margin:0 0 5px}.certificate.diploma .cert-name{font-size:46px;color:#172d46;font-weight:1000;line-height:1.3;margin:6px 0 11px;letter-spacing:-1px;overflow-wrap:anywhere;text-shadow:none}.diploma-name-line{height:2px;width:90px;background:#c49a48;margin:0 auto 12px}.certificate.diploma p.diploma-school{font-size:13px;color:#5c6c7e;font-weight:700;margin:0 0 22px;overflow-wrap:anywhere}.certificate.diploma p.diploma-course{font-size:12px;color:#607186;line-height:1.8;margin:0 0 24px}.diploma-course strong{font-size:16px;color:#172d46;letter-spacing:1px;display:inline-block;margin:3px 0}.diploma-award{position:absolute;right:26px;top:35px;width:95px;transform:rotate(8deg)}.diploma-award svg{width:85px;display:block;margin:auto;filter:drop-shadow(0 4px 3px #7b571224)}.diploma-award span{font-size:8px;font-weight:900;letter-spacing:1.5px;display:block;color:#a17a34}.diploma-metrics{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #e3d9c2;border-bottom:1px solid #e3d9c2;padding:19px 0;position:relative}.diploma-metrics>div+div{border-left:1px solid #e3d9c2}.diploma-metrics span{display:block;font-size:9px;color:#8b754e;font-weight:800;letter-spacing:1.8px;margin-bottom:5px}.diploma-metrics b{display:block;font-size:22px;line-height:1.3;color:#172d46;font-weight:1000}.diploma-metrics small{font-size:12px;font-weight:700;margin-left:3px}.diploma-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;text-align:left;margin-top:30px}.diploma-record span{display:block;font-size:9px;font-weight:800;color:#607186;margin-top:5px;letter-spacing:.4px;overflow-wrap:anywhere}.diploma-record small{font-size:9px;color:#8190a0;display:block;margin-top:5px}.diploma-issuer{text-align:right}.diploma-issuer>span{font-size:8px;letter-spacing:1.5px;color:#8b754e;font-weight:800}.diploma-issuer b{display:block;font-size:19px;letter-spacing:.8px;color:#172d46;margin:5px 0 2px}.certificate.diploma .diploma-issuer p{font-size:11px;color:#607186;margin:0}.diploma-footer{display:flex;justify-content:space-between;gap:10px;padding:20px 8px 0;color:#d4b878;font-size:8px;font-weight:800;letter-spacing:1.5px}.diploma-footer span:last-child{color:#9eafc4}
@media(max-width:1050px){.certificate.diploma h2{font-size:34px;margin-left:50px;margin-right:90px}.certificate.diploma h2 span{font-size:24px;letter-spacing:4px}.diploma-kicker{margin-left:50px;margin-right:90px;font-size:8px}.diploma-sheet{padding:38px 26px 26px}.diploma-award{right:15px;width:75px}.diploma-award svg{width:70px}.certificate.diploma .cert-name{font-size:38px}}
@media(max-width:600px){.certificate.diploma{padding:13px;border-radius:18px;box-shadow:0 10px 28px #14294220,0 4px 0 #0c1c2f}.diploma-top{padding:5px 5px 17px;gap:10px}.diploma-brand{gap:8px}.diploma-brand img{width:43px;height:43px;border-radius:8px;padding:3px}.diploma-brand b{font-size:16px;letter-spacing:1.4px}.diploma-brand span{font-size:6px;letter-spacing:1.2px}.diploma-edition span{font-size:6px;letter-spacing:.8px}.diploma-edition b{font-size:6px;letter-spacing:0;max-width:100px}.diploma-sheet{padding:26px 17px 22px}.diploma-sheet:before,.diploma-sheet:after{width:35px;height:35px;inset:auto}.diploma-sheet:before{top:8px;left:8px}.diploma-sheet:after{bottom:8px;right:8px}.diploma-award{position:relative;top:auto;right:auto;width:64px;margin:0 auto 12px;transform:none}.diploma-award svg{width:59px}.diploma-award span{display:none}.diploma-kicker{font-size:6px;letter-spacing:1.7px;margin:0 0 10px}.certificate.diploma h2{font-size:24px;letter-spacing:1px;margin:0 0 20px;line-height:1.2}.certificate.diploma h2 span{font-size:18px;letter-spacing:3px}.certificate.diploma p.diploma-present{font-size:10px}.certificate.diploma .cert-name{font-size:29px;letter-spacing:-.7px;margin:8px 0 12px}.certificate.diploma p.diploma-school{font-size:10px;line-height:1.6;margin-bottom:20px}.certificate.diploma p.diploma-course{font-size:10px;line-height:1.8;margin-bottom:20px}.diploma-course strong{font-size:12px;letter-spacing:.3px;line-height:1.5}.diploma-metrics{padding:15px 0;gap:4px}.diploma-metrics span{font-size:6px;letter-spacing:.7px}.diploma-metrics b{font-size:16px}.diploma-metrics>div:first-child b{font-size:11px;line-height:1.8}.diploma-metrics small{font-size:8px;display:block;margin:0}.diploma-bottom{display:flex;flex-direction:column-reverse;align-items:center;text-align:center;gap:18px;margin-top:24px}.diploma-issuer{text-align:center}.diploma-issuer>span{font-size:7px}.diploma-issuer b{font-size:18px}.certificate.diploma .diploma-issuer p{font-size:10px}.diploma-record span{font-size:8px}.diploma-record small{font-size:8px}.diploma-footer{padding:16px 3px 3px;justify-content:center;text-align:center;font-size:6px;letter-spacing:1px}.diploma-footer span:last-child{display:none}}
@media print{@page{size:A4 landscape;margin:8mm}.certificate.diploma{border-radius:0;background:#142942!important;color:#172d46;margin:0;padding:7mm;width:100%;max-width:none;box-shadow:none;print-color-adjust:exact;-webkit-print-color-adjust:exact;break-inside:avoid}.diploma-top{padding-bottom:5mm}.diploma-sheet{padding:8mm 10mm 6mm}.certificate.diploma h2{font-size:30px;margin-bottom:5mm}.certificate.diploma h2 span{font-size:22px}.certificate.diploma .cert-name{font-size:36px}.certificate.diploma p.diploma-school{margin-bottom:4mm}.certificate.diploma p.diploma-course{margin-bottom:4mm}.diploma-metrics{padding:4mm 0}.diploma-bottom{margin-top:6mm}.diploma-footer{padding-top:4mm}.diploma-award{width:75px;top:25px}.diploma-award svg{width:70px}.diploma-brand img{width:42px;height:42px}.diploma-watermark{display:none}.certificate.diploma p{color:#607186}}