:root{--deep:#031521;--navy:#0c2c48;--blue:#1472a8;--red:#e33239;--bright:#ff5257;--cyan:#63ddeb;--paper:#f4f8fc;--ink:#132233;--muted:#657789}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 12% 0,#dff7ff,transparent 32%),radial-gradient(circle at 92% 18%,#ffe7e7,transparent 30%),var(--paper);color:var(--ink);font-family:Inter,Arial,sans-serif}.certificate-header{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,5vw,76px);background:linear-gradient(110deg,var(--deep),var(--navy) 62%,#451c2c);color:#fff}.certificate-header>a{display:flex;align-items:center;gap:14px;color:#fff;text-decoration:none}.certificate-header img{width:155px;max-height:48px;object-fit:contain}.certificate-header a span,.certificate-header>span{font-size:9px;font-weight:1000;letter-spacing:.18em}.certificate-header>span{padding:9px 12px;border:1px solid rgba(255,255,255,.2);border-radius:99px;background:rgba(255,255,255,.08)}main{width:min(1500px,calc(100% - 36px));margin:38px auto 65px}.certificate-intro{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:24px}.certificate-intro p{margin:0 0 9px;color:var(--red);font-size:10px;font-weight:1000;letter-spacing:.17em}.certificate-intro h1{max-width:870px;margin:0;font-size:clamp(35px,5vw,68px);line-height:.98;letter-spacing:-.055em}.certificate-intro div>span{display:block;margin-top:14px;color:var(--muted);font-weight:800}.certificate-intro>a{flex:none;padding:13px 16px;border:1px solid #cad7e1;border-radius:13px;background:#fff;color:var(--navy);font-size:11px;font-weight:900;text-decoration:none}.certificate-workspace{display:grid;grid-template-columns:minmax(0,1fr) 315px;gap:18px}.certificate-stage{position:relative;min-height:420px;display:grid;place-items:center;overflow:hidden;padding:20px;border:1px solid #d4e0e9;border-radius:30px;background:linear-gradient(145deg,#e8f2fa,#fff);box-shadow:0 25px 70px rgba(3,21,33,.12)}.certificate-stage canvas{display:block;max-width:100%;max-height:72vh;width:auto;height:auto;border-radius:8px;box-shadow:0 18px 45px rgba(3,21,33,.18)}.certificate-loading{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:8px;background:linear-gradient(145deg,#e8f2faf2,#fffffff2);text-align:center}.certificate-loading[hidden]{display:none}.certificate-loading i{width:45px;height:45px;border:4px solid #d9e8f2;border-top-color:var(--red);border-radius:50%;animation:certificate-spin .8s linear infinite}.certificate-loading b{font-size:18px}.certificate-loading span{color:var(--muted);font-size:11px}.certificate-workspace>aside{align-self:start;display:grid;justify-items:start;padding:25px;border-radius:26px;background:linear-gradient(145deg,var(--deep),var(--navy));color:#fff;box-shadow:0 24px 65px rgba(3,21,33,.2)}.certificate-seal{display:grid;place-items:center;width:52px;height:52px;border-radius:17px;background:linear-gradient(145deg,var(--red),var(--bright));font-size:24px;font-weight:1000}.certificate-workspace aside p{display:grid;gap:6px;margin:18px 0}.certificate-workspace aside p small{color:var(--cyan);font-size:9px;font-weight:1000;letter-spacing:.13em}.certificate-workspace aside p b{font-size:23px;line-height:1.05}.certificate-workspace aside p em{color:#acc0cf;font-size:11px;font-style:normal;line-height:1.5}.certificate-workspace aside button{width:100%;min-height:51px;border:0;border-radius:14px;background:linear-gradient(135deg,var(--red),var(--bright));color:#fff;font-weight:1000;cursor:pointer;box-shadow:0 13px 28px rgba(227,50,57,.28)}.certificate-workspace aside button:disabled{opacity:.45;cursor:wait}.certificate-workspace aside>small{margin-top:10px;color:#9fb5c5;font-size:9px;line-height:1.45}footer{display:flex;align-items:center;gap:18px;padding:28px clamp(20px,5vw,76px);background:var(--deep);color:#b5c8d5}footer img{width:145px}footer span{padding-left:18px;border-left:1px solid #ffffff2e;font-size:10px;font-weight:800}@keyframes certificate-spin{to{transform:rotate(360deg)}}@media(max-width:850px){.certificate-header{height:68px;padding:0 16px}.certificate-header img{width:125px}.certificate-header>a span{display:none}main{width:min(100% - 22px,700px);margin-top:24px}.certificate-intro{align-items:flex-start;flex-direction:column}.certificate-intro h1{font-size:39px}.certificate-workspace{grid-template-columns:1fr}.certificate-stage{min-height:260px;padding:9px;border-radius:20px}.certificate-workspace>aside{width:100%}}