@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Great+Vibes&display=swap";
.certificate-page{--page-bg-1:#f0f5f8;--page-bg-2:#e3edf2;--card-bg:#ffffffe0;--ink:#1f3340;--muted:#5c7684;--accent:#0f7ea0;--accent-strong:#0a667f;--name-color:#8e7768;--id-color:#846b5e;--radius:16px;--shadow-lg:0 18px 40px #1434432e;min-height:100vh;color:var(--ink);background:radial-gradient(circle at 20% 20%,#fff 0%,var(--page-bg-1)35%,var(--page-bg-2)100%);padding-top:88px;padding-bottom:24px;font-family:DM Sans,sans-serif}.certificate-page *{box-sizing:border-box}.navbar.certificate-page-nav{-webkit-backdrop-filter:blur(24px);background:#0f172afa;border-bottom-color:#ffffff1a}.navbar.certificate-page-nav.scrolled{background:#0f172afa;border-bottom-color:#ffffff1a}.certificate-page .app{grid-template-columns:320px minmax(0,1fr);align-items:start;gap:18px;max-width:1320px;margin:0 auto;padding:28px 18px 34px;display:grid}.certificate-page .panel{background:linear-gradient(180deg,#fffffff5,#f5fafce6),var(--card-bg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid #0f7ea024;border-radius:22px;padding:20px;position:relative;overflow:hidden;box-shadow:0 24px 50px #0e2c3929,inset 0 1px #ffffffb3}.certificate-page .panel:before{content:"";background:linear-gradient(90deg,#0f7ea0,#52c1d9 55%,#8ad5e7);width:100%;height:6px;position:absolute;inset:0 auto auto 0}.certificate-page .panel>*{z-index:1;position:relative}.certificate-page .panel h1{margin:0}.certificate-page .panel h1 .certificate-page .form{gap:12px;margin-top:16px;display:grid}.certificate-page .panel h1{letter-spacing:.01em;font-size:1.28rem;line-height:1.15}.certificate-page .panel p{color:var(--muted);margin:10px 0 0;font-size:.94rem;line-height:1.45}.certificate-page .form{gap:12px;margin-top:16px;display:grid}.certificate-page .field{gap:6px;display:grid}.certificate-page .field label{color:#214050;letter-spacing:.01em;justify-content:space-between;align-items:center;font-size:.85rem;font-weight:600;display:flex}.certificate-page .field-hint{color:#6b7280;font-size:.75rem;font-weight:500}.certificate-page .field input{width:100%;font:inherit;color:var(--ink);background:linear-gradient(#fff,#f8fbfc);border:1px solid #6e97aa73;border-radius:12px;padding:12px 14px;transition:border-color .2s,box-shadow .2s,transform .2s;box-shadow:inset 0 1px #ffffffd9}.certificate-page .field input:focus{border-color:var(--accent);outline:none;transform:translateY(-1px);box-shadow:0 0 0 4px #0f7ea026,0 10px 24px #0f7ea014}.certificate-page .field select{opacity:0;pointer-events:none;border:0;width:1px;height:1px;margin:0;padding:0;position:absolute}.certificate-page .dropdown-wrapper{width:100%;min-width:0;position:relative}.certificate-page .dropdown-trigger{width:100%;min-width:0;color:var(--ink);font:inherit;text-align:left;cursor:pointer;background:linear-gradient(#fff 0%,#f8fbfc 100%);border:1px solid #6e97aa73;border-radius:10px;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;transition:border-color .2s,box-shadow .2s,transform .2s,background-color .2s;display:flex;box-shadow:inset 0 1px #ffffffd9}.certificate-page .dropdown-trigger:hover:not(:disabled){border-color:var(--accent);background-color:#0f7ea008}.certificate-page .dropdown-trigger:focus{border-color:var(--accent);outline:none;transform:translateY(-1px);box-shadow:0 0 0 4px #0f7ea026,0 10px 24px #0f7ea014}.certificate-page .dropdown-trigger.is-open{border-color:var(--accent);box-shadow:0 0 0 4px #0f7ea026,0 10px 24px #0f7ea014}.certificate-page .dropdown-trigger:disabled{opacity:.6;cursor:not-allowed;background:#f5f5f5}.certificate-page .dropdown-trigger-text{white-space:nowrap;text-overflow:ellipsis;flex:auto;min-width:0;overflow:hidden}.certificate-page .dropdown-trigger-icon{border-bottom:2px solid #0f7ea0;border-right:2px solid #0f7ea0;flex:none;width:10px;height:10px;transition:transform .2s;transform:translateY(-2px)rotate(45deg)}.certificate-page .dropdown-trigger.is-open .dropdown-trigger-icon{transform:translateY(1px)rotate(225deg)}.certificate-page .dropdown-menu{box-sizing:border-box;z-index:30;opacity:0;pointer-events:none;background:#fff;border:1px solid #0000000f;border-radius:12px;width:100%;max-width:100%;max-height:0;padding:6px;transition:max-height .2s,opacity .2s,transform .2s;position:absolute;top:calc(100% + 8px);left:0;right:0;overflow:hidden;transform:translateY(-5px);box-shadow:0 8px 24px #0000001f,0 2px 6px #00000014}.certificate-page .dropdown-menu.is-open{opacity:1;pointer-events:auto;max-height:220px;animation:.2s forwards dropdownFade;overflow:hidden auto;transform:translateY(0)}.certificate-page .dropdown-menu::-webkit-scrollbar{width:6px}.certificate-page .dropdown-menu::-webkit-scrollbar-track{background:0 0}.certificate-page .dropdown-menu::-webkit-scrollbar-thumb{background:#0f7ea047;border-radius:999px}.certificate-page .dropdown-option{width:100%;color:var(--ink);font:inherit;text-align:left;cursor:pointer;white-space:nowrap;text-overflow:ellipsis;background:0 0;border:0;border-radius:10px;padding:11px 12px;font-size:.95rem;line-height:1.35;transition:background .2s,color .2s;display:block;overflow:hidden}.certificate-page .dropdown-option:hover:not(.is-disabled),.certificate-page .dropdown-option.is-focused{background:#f3f4f6}.certificate-page .dropdown-option.is-selected{color:var(--accent-strong);background:#0f7ea01f;font-weight:600}.certificate-page .dropdown-option.is-disabled{color:#9ca3af;cursor:default;font-style:italic}@keyframes dropdownFade{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.certificate-page .btn-row{grid-template-columns:1fr;gap:10px;margin-top:4px;display:grid}.certificate-page button{font:inherit;cursor:pointer;color:#fff;border:none;border-radius:12px;padding:12px 14px;font-weight:600;transition:transform .15s,filter .2s,box-shadow .2s}.certificate-page button:hover{filter:brightness(1.04)}.certificate-page button:active{transform:translateY(1px)}.certificate-page button:disabled{cursor:not-allowed;opacity:.65;filter:grayscale(.2)}.certificate-page .btn-generate{background:linear-gradient(135deg,#0f7ea0 0%,#20a7c9 55%,#44bdd8 100%);box-shadow:0 14px 28px #0f7ea03d}.certificate-page .btn-download-pdf{background:linear-gradient(135deg,#0a667f 0%,#0f7ea0 60%,#1587a8 100%);box-shadow:0 14px 28px #0a667f33}.certificate-page .hint{color:var(--muted);margin-top:10px;font-size:.82rem;line-height:1.45}.certificate-page .canvas-wrap{background:radial-gradient(circle at top left,#fffffff5,#eef6f9e6 42%,#e4eff4e0 100%),var(--card-bg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid #0f7ea024;border-radius:24px;padding:clamp(12px,2vw,20px);position:relative;overflow:auto;box-shadow:0 26px 54px #0e2c3929,inset 0 1px #ffffffb3}.certificate-page .canvas-wrap:before{content:"";background:linear-gradient(90deg,#0000,#0f7ea059,#0000);height:1px;position:absolute;inset:auto 0 0}.certificate-page .certificate-stage{aspect-ratio:1.4142;background:#fff;border:1px solid #ffffffd9;border-radius:14px;width:100%;max-width:1120px;margin:0 auto;position:relative;overflow:hidden;box-shadow:0 14px 30px #13222d1f}.certificate-page .certificate-background{object-fit:cover;object-position:center;-webkit-user-select:none;user-select:none;pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.certificate-page .overlay{z-index:2;text-align:center;white-space:nowrap;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;filter:drop-shadow(0 1px #fff9);line-height:1;position:absolute;transform:translate(-50%,-50%)}.certificate-page .participant-name{width:60%;color:var(--name-color);font-family:Great Vibes,cursive;font-size:clamp(26px,5.2vw,92px);font-weight:400;top:43.8%;left:50%}.certificate-page .certificate-id{transform-origin:0 0;text-align:left;white-space:nowrap;text-overflow:clip;letter-spacing:0;max-width:22ch;color:var(--id-color);font-kerning:normal;font-family:Helvetica World-Regular,Helvetica World,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:.6rem;font-weight:300;line-height:1;display:inline-block;top:46.05%;left:94.15%;overflow:hidden;transform:rotate(-90deg)}@media screen and (max-width:480px){.certificate-page .certificate-id{font-size:.3rem}}.certificate-page .status{color:#315263;min-height:1.2em;margin-top:10px;font-size:.84rem}.certificate-page .verified-badge{color:#0a667f;min-height:1.2em;margin-top:8px;font-size:.83rem;font-weight:600}.certificate-page .release-countdown-card{z-index:920;color:#e8f0ff;-webkit-backdrop-filter:blur(15px)saturate(125%);isolation:isolate;background:radial-gradient(circle at 18% 0,#5e81ff61,#0000 55%),linear-gradient(140deg,#0e182ceb 0%,#101c31e6 48%,#0a1022ed 100%);border:1px solid #b2c9ff33;border-radius:22px;width:min(460px,100vw - 24px);padding:18px 18px 16px;animation:7.6s ease-in-out infinite releaseCardFloat;position:fixed;bottom:clamp(14px,3.5vw,34px);right:clamp(12px,2.8vw,32px);overflow:hidden;box-shadow:0 22px 46px #050a176b,inset 0 0 0 1px #afcaff0f,0 0 32px #4e7eff38}.certificate-page .release-countdown-card:before{content:"";opacity:.35;pointer-events:none;z-index:0;background:linear-gradient(120deg,#ffffff2e,#0000 34% 62%,#ffffff14);position:absolute;inset:0}.certificate-page .release-countdown-card>*{z-index:1;position:relative}.certificate-page .release-countdown-message{letter-spacing:.01em;color:#e8f2fff2;margin:0;font-size:.92rem;line-height:1.58}.certificate-page .release-countdown-label{letter-spacing:.08em;text-transform:uppercase;color:#adcdfff5;margin:12px 0 10px;font-size:.83rem;font-weight:700}.certificate-page .release-countdown-time{letter-spacing:.08em;text-align:center;color:#f4f7ff;text-shadow:0 0 10px #a0bfff80,0 0 24px #588dff61;background:linear-gradient(#182746d1,#0d172ddb);border:1px solid #7eaaff42;border-radius:14px;margin:0;padding:8px 10px;font-family:JetBrains Mono,DM Sans,monospace;font-size:clamp(1.86rem,4vw,2.4rem);font-weight:700;line-height:1.1;animation:1s ease-in-out infinite countdownPulse;box-shadow:inset 0 1px #ffffff3d,0 12px 20px #060e2357}.certificate-page .release-feedback-button{letter-spacing:.02em;color:#10203f;background:linear-gradient(135deg,#9cc5ff 0%,#d8e7ff 100%);border-radius:12px;justify-content:center;align-items:center;min-height:42px;margin-top:12px;padding:11px 14px;font-size:.88rem;font-weight:700;text-decoration:none;transition:transform .2s,box-shadow .2s,filter .2s;display:inline-flex;box-shadow:0 10px 18px #18408a4d,inset 0 1px #ffffffb8}.certificate-page .release-feedback-button:hover{filter:brightness(1.03);transform:translateY(-1px);box-shadow:0 14px 24px #18408a52,inset 0 1px #ffffffc7}.certificate-page .release-feedback-button:active{transform:translateY(0);box-shadow:0 8px 14px #18408a4d,inset 0 1px #ffffffad}@keyframes countdownPulse{0%,to{box-shadow:inset 0 1px #ffffff3d,0 12px 20px #060e2357,0 0 #6ea4ff1f}50%{box-shadow:inset 0 1px #ffffff3d,0 14px 24px #060e2366,0 0 18px #6ea4ff59}}@keyframes releaseCardFloat{0%,to{transform:translateY(0)translate(0)}33%{transform:translateY(-6px)translate(-1px)}66%{transform:translateY(-2px)translate(1px)}}.certificate-page .modal-backdrop{z-index:1000;width:100vw;max-width:none;height:100vh;max-height:none;box-shadow:none;-webkit-backdrop-filter:blur(4px);opacity:0;pointer-events:none;background:#070c1c33;border:none;outline:none;place-items:center;margin:0;padding:18px;transition:opacity .3s;display:grid;position:fixed;inset:0}.certificate-page .modal-backdrop[open]{display:grid}.certificate-page .modal-backdrop::backdrop{background:0 0}.certificate-page .modal-backdrop.is-visible{opacity:1;pointer-events:auto}.certificate-page .modal{color:#eaf1ff;-webkit-backdrop-filter:blur(18px)saturate(145%);opacity:0;background:linear-gradient(155deg,#5d6d99c7 0%,#3e4c76d4 45%,#28365ce0 100%);border:1px solid #c4d3f885;border-radius:20px;width:min(420px,100%);margin:0;padding:32px 28px 24px;transition:opacity .25s cubic-bezier(.16,1,.3,1),transform .25s cubic-bezier(.16,1,.3,1);transform:scale(.95)translateY(20px);box-shadow:0 30px 62px #09102457,0 12px 24px #0910243d,inset 0 1px #ffffff3d}.certificate-page .modal-backdrop.is-visible .modal{opacity:1;animation:.25s cubic-bezier(.34,1.56,.64,1) modalPop,.35s cubic-bezier(.36,0,.66,-.56) .1s modal-shake;transform:scale(1)translateY(0)}.certificate-page .modal-header{align-items:center;gap:16px;margin-bottom:16px;display:flex}.certificate-page .modal-icon{background:radial-gradient(circle at 30% 30%,#ff6b6b 0%,#ff3b3b 100%);border-radius:999px;flex:none;place-items:center;width:64px;height:64px;animation:.6s cubic-bezier(.68,-.55,.265,1.55) .1s icon-bounce;display:grid;box-shadow:0 0 15px #ff3d3b66}.certificate-page .modal-icon:before{content:"⚠";color:#fff;text-shadow:0 -2px 4px #0003;font-size:2rem;line-height:1}.certificate-page .modal-title{letter-spacing:-.02em;color:#f8fbff;text-shadow:0 1px 1px #070e224d;margin:0;font-size:1.25rem;font-weight:800;line-height:1.3}.certificate-page .modal-message{color:#e9f0fff5;letter-spacing:.005em;margin:0;padding-top:8px;font-size:.95rem;line-height:1.6}.certificate-page .modal-actions{justify-content:flex-end;align-items:stretch;gap:10px;margin-top:32px;display:flex}.certificate-page .modal-retry{color:#fff;letter-spacing:.01em;cursor:pointer;background:linear-gradient(135deg,#ff5b67 0%,#ff6d78 48%,#ff8891 100%);border:none;border-radius:12px;padding:11px 22px;font-size:.94rem;font-weight:800;transition:transform .2s,box-shadow .2s,filter .2s;box-shadow:0 10px 20px #ff5d6d47,inset 0 1px #ffffff59}.certificate-page .modal-retry:hover{filter:brightness(1.02);transform:translateY(-2px);box-shadow:0 14px 24px #ff5d6d57,inset 0 1px #fff6}.certificate-page .modal-retry:active{transform:translateY(0);box-shadow:0 6px 12px #ff5d6d3d}.certificate-page .modal-close{white-space:nowrap;color:#f7faff;letter-spacing:.01em;cursor:pointer;background:linear-gradient(#8195cb9e,#667bb29e);border:1px solid #bfcef18c;border-radius:12px;flex:none;justify-content:center;align-items:center;min-width:100px;min-height:44px;padding:11px 20px;font-size:.94rem;font-weight:700;line-height:1;transition:transform .2s,background .2s,border-color .2s,color .2s;display:inline-flex;box-shadow:0 10px 18px #08112742,inset 0 1px #ffffff47}.certificate-page .modal-close:hover{color:#fff;background:linear-gradient(#90a4dab8,#6f84beb8);border-color:#d6e2ffad;transform:translateY(-1px)}.certificate-page .modal-close:active{background:linear-gradient(#768ac1b8,#5d71a8b8);transform:translateY(0)}@keyframes modalPop{0%{opacity:0;transform:scale(.95)translateY(20px)}to{opacity:1;transform:scale(1)translateY(0)}}@keyframes modal-shake{0%,to{transform:translate(0)}10%{transform:translate(-6px)}20%{transform:translate(6px)}30%{transform:translate(-6px)}40%{transform:translate(6px)}50%{transform:translate(-4px)}60%{transform:translate(4px)}70%{transform:translate(-2px)}80%{transform:translate(2px)}90%{transform:translate(-1px)}}@keyframes icon-bounce{0%{opacity:0;transform:scale(.3)translateY(30px)}50%{transform:scale(1.08)}to{opacity:1;transform:scale(1)translateY(0)}}@keyframes modal-float{0%,to{transform:scale(1)translateY(0)translate(0)}25%{transform:scale(1)translateY(-3px)translate(1px)}50%{transform:scale(1)translateY(-2px)translate(-1px)}75%{transform:scale(1)translateY(-4px)translate(2px)}}@media (max-width:640px){.certificate-page .modal{border-radius:16px;width:min(100%,90vw);padding:24px 20px 20px}.certificate-page .modal-actions{justify-content:stretch;gap:8px}.certificate-page .modal-retry{flex:1}.certificate-page .modal-close{flex:1;min-width:0;padding:11px 14px}.certificate-page .modal-header{gap:14px}.certificate-page .modal-icon{width:60px;height:60px}.certificate-page .modal-icon:before{font-size:1.8rem}.certificate-page .modal-title{font-size:1.24rem}}@media (max-width:1040px){.certificate-page .app{grid-template-columns:1fr}.certificate-page .panel{max-width:680px}}@media (max-width:680px){.certificate-page .panel h1{font-size:1.1rem}.certificate-page .release-countdown-card{border-radius:18px;width:auto;padding:14px 14px 13px;bottom:12px;left:12px;right:12px}.certificate-page .release-countdown-message{font-size:.84rem;line-height:1.5}.certificate-page .release-countdown-label{margin:9px 0 8px;font-size:.76rem}.certificate-page .release-countdown-time{letter-spacing:.05em;padding:8px;font-size:clamp(1.54rem,9vw,2.04rem)}.certificate-page .release-feedback-button{width:100%;font-size:.84rem}.certificate-page .participant-name{width:75%}.certificate-page .dropdown-trigger{padding:14px}.certificate-page .dropdown-option{padding:13px 12px}.certificate-page .dropdown-menu{max-height:200px}}