/* ============================================================
   LUYENAI CERTIFICATE - Premium Dopamine-Boost Edition
   Iterations 1-5: Final Polished Version
   ============================================================ */

/* Reset */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

html,body{width:100%;min-height:100%;overflow-x:hidden;background:#070b14}
#form1{width:100%;min-height:100%}

/* ======================== BACKGROUND ======================== */
.certificate-wrapper{
    width:100%;min-height:100vh;
    display:flex;align-items:center;justify-content:center;
    padding:40px 20px;
    background:
        radial-gradient(ellipse at 15% 15%,rgba(212,175,55,.07) 0%,transparent 50%),
        radial-gradient(ellipse at 85% 85%,rgba(184,134,11,.06) 0%,transparent 50%),
        radial-gradient(ellipse at 50% 50%,rgba(10,14,26,.95) 0%,#070b14 100%);
    position:relative;overflow:hidden;
    contain:layout style;
}

/* Slow-drift nebula background */
.certificate-wrapper::before{
    content:'';position:absolute;inset:-60%;
    background:
        conic-gradient(from 0deg at 25% 35%,transparent 0deg,rgba(212,175,55,.035) 45deg,transparent 90deg),
        conic-gradient(from 200deg at 75% 65%,transparent 0deg,rgba(184,134,11,.04) 45deg,transparent 90deg);
    animation:nebulaRotate 40s linear infinite;
    will-change:transform;
}

@keyframes nebulaRotate{to{transform:rotate(360deg)}}

/* Floating gold dust */
.certificate-wrapper::after{
    content:'';position:absolute;inset:0;
    background-image:
        radial-gradient(1.5px 1.5px at 8% 18%,rgba(212,175,55,.55),transparent),
        radial-gradient(1px 1px at 22% 55%,rgba(212,175,55,.35),transparent),
        radial-gradient(1.5px 1.5px at 38% 25%,rgba(255,215,0,.45),transparent),
        radial-gradient(1px 1px at 52% 78%,rgba(212,175,55,.4),transparent),
        radial-gradient(1.5px 1.5px at 68% 12%,rgba(255,215,0,.5),transparent),
        radial-gradient(1px 1px at 82% 48%,rgba(212,175,55,.3),transparent),
        radial-gradient(1.5px 1.5px at 12% 82%,rgba(255,215,0,.5),transparent),
        radial-gradient(1px 1px at 58% 42%,rgba(212,175,55,.25),transparent),
        radial-gradient(1.5px 1.5px at 92% 88%,rgba(255,215,0,.45),transparent),
        radial-gradient(1px 1px at 3% 45%,rgba(212,175,55,.4),transparent);
    animation:dustDrift 25s ease-in-out infinite alternate;
    pointer-events:none;
}

@keyframes dustDrift{
    0%{transform:translateY(0) scale(1);opacity:.5}
    50%{transform:translateY(-25px) scale(1.08);opacity:.9}
    100%{transform:translateY(8px) scale(.96);opacity:.45}
}

/* ======================== CERTIFICATE CARD ======================== */
.certificate{
    width:100%;max-width:920px;
    background:#fffdf8;
    position:relative;
    box-shadow:
        0 0 0 1px rgba(212,175,55,.12),
        0 0 80px rgba(212,175,55,.06),
        0 40px 120px rgba(0,0,0,.75);
    z-index:1;
    border-radius:3px;
    animation:certEnter 1s cubic-bezier(.16,1,.3,1) both;
    transition:box-shadow .5s ease;
}

/* Iter3: Light beam behind certificate on hover */
.certificate:hover{
    box-shadow:
        0 0 0 1px rgba(212,175,55,.18),
        0 0 100px rgba(212,175,55,.1),
        0 40px 120px rgba(0,0,0,.7);
}

@keyframes certEnter{
    0%{opacity:0;transform:scale(.86) translateY(50px);filter:blur(10px)}
    50%{filter:blur(2px)}
    100%{opacity:1;transform:scale(1) translateY(0);filter:blur(0)}
}

/* Holographic shimmer sweep */
.certificate::before{
    content:'';position:absolute;inset:0;z-index:10;pointer-events:none;
    background:linear-gradient(
        105deg,
        transparent 25%,
        rgba(212,175,55,.05) 42%,
        rgba(255,255,255,.12) 50%,
        rgba(212,175,55,.05) 58%,
        transparent 75%
    );
    background-size:200% 100%;
    animation:shimmerSweep 3.5s ease-in-out 1.8s both;
    border-radius:3px;
}

@keyframes shimmerSweep{
    0%{background-position:200% 0}
    100%{background-position:-200% 0}
}

/* Gold border frame with embossed feel */
.certificate::after{
    content:'';position:absolute;inset:5px;z-index:2;pointer-events:none;
    border:2px solid;
    border-image:linear-gradient(
        135deg,
        rgba(212,175,55,.5) 0%,
        rgba(255,223,100,.85) 25%,
        rgba(184,134,11,.6) 50%,
        rgba(255,223,100,.85) 75%,
        rgba(212,175,55,.5) 100%
    ) 1;
}

/* ======================== DECORATIVE CORNERS ======================== */
.corner{position:absolute;width:65px;height:65px;z-index:5}
.corner::before,.corner::after{
    content:'';position:absolute;
    background:linear-gradient(135deg,var(--primary-color,#B8860B),var(--secondary-color,#FFD700));
    border-radius:1px;
}

.corner-tl{top:10px;left:10px}
.corner-tl::before{top:0;left:0;width:3px;height:100%}
.corner-tl::after{top:0;left:0;width:100%;height:3px}

.corner-tr{top:10px;right:10px}
.corner-tr::before{top:0;right:0;width:3px;height:100%}
.corner-tr::after{top:0;right:0;width:100%;height:3px}

.corner-bl{bottom:10px;left:10px}
.corner-bl::before{bottom:0;left:0;width:3px;height:100%}
.corner-bl::after{bottom:0;left:0;width:100%;height:3px}

.corner-br{bottom:10px;right:10px}
.corner-br::before{bottom:0;right:0;width:3px;height:100%}
.corner-br::after{bottom:0;right:0;width:100%;height:3px}

.corner{animation:cornerReveal .7s ease-out .8s both}
@keyframes cornerReveal{
    0%{opacity:0;transform:scale(.4) rotate(-10deg)}
    100%{opacity:1;transform:scale(1) rotate(0)}
}

.corner::before,.corner::after{
    animation:cornerGlow 4s ease-in-out infinite;
}
@keyframes cornerGlow{
    0%,100%{filter:brightness(1);opacity:.7}
    50%{filter:brightness(1.5) drop-shadow(0 0 8px rgba(212,175,55,.5));opacity:1}
}

/* ======================== CERTIFICATE BODY ======================== */
.certificate-body{
    padding:48px 55px;
    position:relative;
    display:flex;flex-direction:column;
    background:
        linear-gradient(to bottom,#fffdf8 0%,#fefcf5 40%,#fdf9ed 100%);
    border:1.5px solid #ddd6c3;
    margin:8px;
}

/* Guilloche watermark pattern */
.certificate-body::before{
    content:'';position:absolute;inset:0;
    background:
        repeating-conic-gradient(
            from 0deg at 50% 50%,
            transparent 0deg,
            rgba(212,175,55,.02) 2deg,
            transparent 4deg
        ),
        radial-gradient(circle at 50% 50%,transparent 30%,rgba(212,175,55,.015) 31%,transparent 32%),
        radial-gradient(circle at 50% 50%,transparent 40%,rgba(212,175,55,.012) 41%,transparent 42%),
        radial-gradient(circle at 50% 50%,transparent 50%,rgba(212,175,55,.01) 51%,transparent 52%),
        radial-gradient(circle at 50% 50%,transparent 60%,rgba(212,175,55,.008) 61%,transparent 62%);
    pointer-events:none;opacity:.8;
}

/* Subtle linen texture */
.certificate-body::after{
    content:'';position:absolute;inset:0;
    background-image:
        repeating-linear-gradient(0deg,transparent,transparent 1px,rgba(0,0,0,.008) 1px,rgba(0,0,0,.008) 2px),
        repeating-linear-gradient(90deg,transparent,transparent 1px,rgba(0,0,0,.008) 1px,rgba(0,0,0,.008) 2px);
    pointer-events:none;opacity:.4;
}

/* ======================== HEADER ======================== */
.certificate-header{
    text-align:center;
    margin-bottom:20px;
    position:relative;z-index:1;
    animation:fadeSlideUp .7s ease-out .3s both;
}

.logo-container{margin-bottom:12px}
.logo{
    height:50px;
    transition:transform .3s ease,filter .3s ease;
    cursor:pointer;
    filter:drop-shadow(0 2px 6px rgba(0,0,0,.08));
}
.logo:hover{transform:scale(1.06);filter:drop-shadow(0 4px 12px rgba(0,0,0,.12))}
.logo:focus-visible{outline:2px solid var(--primary-color,#B8860B);outline-offset:4px;border-radius:4px}

.institution-name{
    font-family:'Cormorant Garamond',serif;
    font-size:2.6rem;font-weight:700;
    color:#1a1a2e;
    letter-spacing:8px;
    margin:0;
    text-transform:uppercase;
}

.institution-subtitle{
    font-family:'DM Sans',sans-serif;
    font-size:.78rem;color:#8e8b82;
    letter-spacing:3px;
    margin:8px 0 0;font-weight:500;
    text-transform:uppercase;
}

/* Iter3: Decorative divider after header */
.certificate-header::after{
    content:'';display:block;
    width:40%;height:1px;margin:16px auto 0;
    background:linear-gradient(to right,transparent,rgba(212,175,55,.25),transparent);
}

/* ======================== RANK MEDALLION ======================== */
.rank-medallion{
    position:absolute;top:40px;right:55px;
    width:94px;height:94px;
    background:linear-gradient(135deg,var(--primary-color,#B8860B) 0%,var(--secondary-color,#FFD700) 50%,var(--accent-color,#FFED4E) 100%);
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    box-shadow:
        0 0 0 4px #fffdf8,
        0 0 0 7px var(--primary-color,#B8860B),
        0 8px 30px rgba(0,0,0,.3),
        inset 0 2px 12px rgba(255,255,255,.5);
    animation:
        fadeSlideUp .7s ease-out .5s both,
        medallionFloat 5s ease-in-out 2s infinite;
    z-index:6;
    cursor:default;
}

@keyframes medallionFloat{
    0%,100%{transform:translateY(0);
        box-shadow:0 0 0 4px #fffdf8,0 0 0 7px var(--primary-color,#B8860B),0 8px 30px rgba(0,0,0,.3),inset 0 2px 12px rgba(255,255,255,.5)}
    50%{transform:translateY(-5px);
        box-shadow:0 0 0 5px #fffdf8,0 0 0 9px var(--secondary-color,#FFD700),0 16px 40px rgba(0,0,0,.2),inset 0 2px 18px rgba(255,255,255,.7)}
}

.badge-icon{
    position:absolute;top:-8px;right:-8px;
    width:34px;height:34px;
    background:#fffdf8;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 2px 8px rgba(0,0,0,.15);z-index:7;
}
.badge-icon::before{font-size:1.4rem;line-height:1}

.medallion-inner{
    text-align:center;color:#fff;
    text-shadow:0 2px 4px rgba(0,0,0,.3);
    position:relative;z-index:1;
}

.rank-text{
    display:block;
    font-family:'DM Sans',sans-serif;
    font-size:.65rem;font-weight:700;
    letter-spacing:2px;text-transform:uppercase;
}

.rank-number{
    display:block;
    font-family:'Cormorant Garamond',serif;
    font-size:2.4rem;font-weight:700;
    line-height:1;margin-top:1px;
}

/* Rank 5-10+ special styles */
.rank-medallion.rank-5{
    background:linear-gradient(135deg,#CD7F32 0%,#E9967A 50%,#DEB887 100%);
    box-shadow:0 0 0 4px #fffdf8,0 0 0 7px #CD7F32,0 8px 30px rgba(205,127,50,.5),inset 0 2px 10px rgba(255,255,255,.5);
}
.rank-medallion.rank-5 .badge-icon::before{content:'\1F949';font-size:1.8rem}

.rank-medallion.rank-6{
    background:linear-gradient(135deg,#C0C0C0 0%,#E8E8E8 50%,#D3D3D3 100%);
    box-shadow:0 0 0 4px #fffdf8,0 0 0 7px #C0C0C0,0 8px 30px rgba(192,192,192,.6),inset 0 2px 10px rgba(255,255,255,.6);
}
.rank-medallion.rank-6 .badge-icon::before{content:'\2B50';font-size:1.8rem}

.rank-medallion.rank-7{
    background:linear-gradient(135deg,#FFD700 0%,#FFA500 50%,#FFED4E 100%);
    box-shadow:0 0 0 4px #fffdf8,0 0 0 7px #FFD700,0 8px 35px rgba(255,215,0,.7),inset 0 2px 10px rgba(255,255,255,.6);
}
.rank-medallion.rank-7 .badge-icon::before{content:'\1F451';font-size:1.8rem}

.rank-medallion.rank-8{
    background:linear-gradient(135deg,#B9F2FF 0%,#00CED1 50%,#48D1CC 100%);
    box-shadow:0 0 0 4px #fffdf8,0 0 0 7px #00CED1,0 8px 35px rgba(0,206,209,.7),inset 0 2px 15px rgba(255,255,255,.7);
    animation:fadeSlideUp .7s ease-out .5s both,medallionFloat 4s ease-in-out 2s infinite,diamondSparkle 3s ease-in-out infinite;
}
.rank-medallion.rank-8 .badge-icon::before{content:'\1F48E';font-size:1.8rem}
@keyframes diamondSparkle{0%,100%{filter:brightness(1)}50%{filter:brightness(1.4) hue-rotate(10deg)}}

.rank-medallion.rank-9{
    background:linear-gradient(135deg,#E5E4E2 0%,#D3D3D3 25%,#C9C0BB 50%,#B8B8B8 75%,#E5E4E2 100%);
    box-shadow:0 0 0 4px #fffdf8,0 0 0 7px #C9C0BB,0 10px 40px rgba(201,192,187,.8),inset 0 2px 15px rgba(255,255,255,.8);
    animation:fadeSlideUp .7s ease-out .5s both,medallionFloat 4s ease-in-out 2s infinite,platinumGlow 4s ease-in-out infinite;
}
.rank-medallion.rank-9 .badge-icon::before{content:'\1F3C6';font-size:1.8rem}
@keyframes platinumGlow{
    0%,100%{box-shadow:0 0 0 4px #fffdf8,0 0 0 7px #C9C0BB,0 10px 40px rgba(201,192,187,.8),inset 0 2px 15px rgba(255,255,255,.8)}
    50%{box-shadow:0 0 0 5px #fffdf8,0 0 0 9px #E5E4E2,0 15px 50px rgba(229,228,226,1),inset 0 2px 20px rgba(255,255,255,1)}
}

.rank-medallion.rank-10,.rank-medallion.rank-legendary{
    background:linear-gradient(135deg,#FF6B6B 0%,#FFD93D 25%,#6BCF7F 50%,#4D96FF 75%,#A78BFA 100%);
    background-size:200% 200%;
    box-shadow:0 0 0 5px #fffdf8,0 0 0 8px #FF6B6B,0 12px 45px rgba(255,107,107,.9),0 0 20px rgba(255,215,61,.6),inset 0 2px 20px rgba(255,255,255,.9);
    animation:fadeSlideUp .7s ease-out .5s both,legendaryGradient 4s ease infinite,legendaryPulse 2s ease-in-out infinite;
}
.rank-medallion.rank-10 .badge-icon::before,
.rank-medallion.rank-legendary .badge-icon::before{content:'\1F31F';font-size:2rem;animation:legendaryIconSpin 3s linear infinite}
@keyframes legendaryGradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes legendaryPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes legendaryIconSpin{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(1.1)}100%{transform:rotate(360deg) scale(1)}}

/* ======================== TITLE ======================== */
.certificate-title{
    text-align:center;margin:22px 0 12px;
    position:relative;z-index:1;
    animation:fadeSlideUp .7s ease-out .6s both;
}

.title-main{
    font-family:'Cormorant Garamond',serif;
    font-size:1.5rem;color:#1a1a2e;
    font-weight:600;letter-spacing:2px;
    position:relative;display:inline-block;
    text-transform:uppercase;
}

/* Decorative line under title */
.title-main::after{
    content:'';display:block;
    width:70%;height:1.5px;margin:10px auto 0;
    background:linear-gradient(to right,transparent,var(--primary-color,#B8860B),var(--secondary-color,#FFD700),var(--primary-color,#B8860B),transparent);
}

.title-sub{
    font-family:'DM Sans',sans-serif;
    font-size:.85rem;color:#9e9a90;
    font-weight:400;margin-top:6px;
    font-style:italic;letter-spacing:1px;
}

/* ======================== CERTIFIES TEXT ======================== */
.certifies-text{
    text-align:center;
    font-family:'DM Sans',sans-serif;
    font-size:.9rem;color:#6b6960;
    margin-bottom:6px;font-weight:400;
    position:relative;z-index:1;
    letter-spacing:.5px;
    animation:fadeSlideUp .7s ease-out .65s both;
}

/* ======================== STUDENT NAME ======================== */
.student-name{
    text-align:center;
    font-family:'Cormorant Garamond',serif;
    font-size:clamp(1.9rem,5vw,2.8rem);
    color:#1a1a2e;font-weight:700;
    margin:6px 0 20px;
    padding:20px 40px;
    position:relative;z-index:1;
    line-height:1.25;word-break:break-word;
    /* Iter3: Gold ribbon bar - wider fade */
    background:linear-gradient(
        to right,
        transparent 0%,
        var(--light-color,rgba(255,249,230,.5)) 10%,
        var(--light-color,rgba(255,249,230,.8)) 50%,
        var(--light-color,rgba(255,249,230,.5)) 90%,
        transparent 100%
    );
    border-top:1.5px solid;
    border-bottom:1.5px solid;
    border-image:linear-gradient(to right,transparent 3%,var(--primary-color,#B8860B) 25%,var(--secondary-color,#FFD700) 50%,var(--primary-color,#B8860B) 75%,transparent 97%) 1;
    animation:nameReveal .9s ease-out .8s both;
}

@keyframes nameReveal{
    0%{opacity:0;transform:translateY(18px) scale(.94);letter-spacing:-3px}
    50%{letter-spacing:1px}
    100%{opacity:1;transform:translateY(0) scale(1);letter-spacing:0}
}

/* Iter5: Refined star ornaments */
.student-name::before,.student-name::after{
    position:absolute;top:50%;
    color:var(--secondary-color,#FFD700);
    font-size:1.15rem;opacity:.35;
    animation:starPulse 3.5s ease-in-out infinite;
}
.student-name::before{content:'\2726';left:12px;transform:translateY(-50%)}
.student-name::after{content:'\2726';right:12px;transform:translateY(-50%);animation-delay:1.7s}

@keyframes starPulse{
    0%,100%{opacity:.2;transform:translateY(-50%) scale(1) rotate(0deg)}
    50%{opacity:.75;transform:translateY(-50%) scale(1.2) rotate(18deg)}
}

/* ======================== CLASS INFO ======================== */
.class-info{
    margin:0 0 20px;padding:14px 24px;
    position:relative;z-index:1;
    background:linear-gradient(135deg,var(--light-color,#FFF9E6) 0%,rgba(255,253,248,.95) 100%);
    border-radius:8px;text-align:center;
    border:1px solid rgba(212,175,55,.1);
    box-shadow:0 2px 16px rgba(0,0,0,.03);
    animation:fadeSlideUp .7s ease-out .9s both;
}

.class-name{
    font-family:'DM Sans',sans-serif;
    font-size:1.08rem;font-weight:700;
    color:#1a1a2e;margin-bottom:5px;
}
.class-name i{color:var(--primary-color,#B8860B);margin-right:6px}

.class-description{
    font-family:'DM Sans',sans-serif;
    font-size:.84rem;color:#6b6960;
    font-style:italic;line-height:1.5;
}

/* ======================== STATS SECTION ======================== */
.stats-section{
    display:flex;justify-content:center;gap:16px;
    margin:6px 0 22px;padding:0;
    position:relative;z-index:1;
}

/* Iter2: Staggered stat card entrances */
.stat-box:nth-child(1){animation:statCardEnter .6s ease-out 1s both}
.stat-box:nth-child(2){animation:statCardEnter .6s ease-out 1.15s both}
.stat-box:nth-child(3){animation:statCardEnter .6s ease-out 1.3s both}

@keyframes statCardEnter{
    0%{opacity:0;transform:translateY(20px) scale(.92)}
    100%{opacity:1;transform:translateY(0) scale(1)}
}

.stat-box{
    flex:1;max-width:195px;
    display:flex;flex-direction:column;align-items:center;
    gap:5px;
    padding:18px 14px;
    background:linear-gradient(180deg,#fffdf8 0%,var(--light-color,#FFF9E6) 100%);
    border-radius:10px;
    border:1px solid rgba(212,175,55,.1);
    box-shadow:0 2px 12px rgba(0,0,0,.03);
    transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s ease;
    position:relative;overflow:hidden;
    text-align:center;
    contain:content;
}

/* Iter3: Top accent line */
.stat-box::before{
    content:'';position:absolute;top:0;left:12%;right:12%;
    height:2px;
    background:linear-gradient(to right,transparent,var(--primary-color,#B8860B),transparent);
    opacity:.35;
}

/* Iter2: Shine sweep on hover */
.stat-box::after{
    content:'';position:absolute;inset:0;
    background:linear-gradient(135deg,transparent 40%,rgba(255,255,255,.5) 50%,transparent 60%);
    background-size:200% 200%;
    opacity:0;transition:opacity .3s ease;
}

.stat-box:hover{
    transform:translateY(-4px) scale(1.02);
    box-shadow:0 12px 32px rgba(0,0,0,.08);
}
.stat-box:hover::after{
    opacity:1;
    animation:statShine .6s ease;
}

@keyframes statShine{
    0%{background-position:200% 0}
    100%{background-position:-200% 0}
}

.stat-box i{
    font-size:1.35rem;
    color:var(--primary-color,#B8860B);
    opacity:.65;
}

.stat-info{text-align:center}

.stat-value{
    font-family:'Cormorant Garamond',serif;
    font-size:2rem;font-weight:700;
    color:#1a1a2e;line-height:1;
    margin-top:2px;
}

.stat-label{
    font-family:'DM Sans',sans-serif;
    font-size:.66rem;color:#8e8b82;
    font-weight:600;margin-top:4px;
    text-transform:uppercase;letter-spacing:.5px;
}

/* ======================== FOOTER ======================== */
.certificate-footer{
    margin-top:auto;padding-top:14px;
    position:relative;z-index:1;
    animation:fadeSlideUp .7s ease-out 1.4s both;
}

/* Iter3: Decorative divider before footer */
.certificate-footer::before{
    content:'';display:block;
    width:30%;height:1px;margin:0 auto 14px;
    background:linear-gradient(to right,transparent,rgba(212,175,55,.2),transparent);
}

.signature-section{
    display:flex;justify-content:space-between;
    align-items:flex-end;margin-bottom:16px;
}

.signature-block{flex:1;text-align:center}

.signature-line{
    width:170px;height:1px;
    background:linear-gradient(to right,transparent,#c5bfb0,transparent);
    margin:0 auto 6px;
}

.signature-title{
    font-family:'DM Sans',sans-serif;
    font-size:.7rem;color:#4a4840;font-weight:600;
    text-transform:uppercase;letter-spacing:.5px;
}

.signature-name{
    font-family:'DM Sans',sans-serif;
    font-size:.6rem;color:#8e8b82;font-weight:400;
}

/* Seal */
.seal-section{flex:0 0 auto;text-align:center}
.official-seal{margin-bottom:8px}

.seal-outer{
    width:66px;height:66px;
    border:3px double var(--primary-color,#B8860B);
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    margin:0 auto;position:relative;
    animation:sealSpin 25s linear infinite;
}

@keyframes sealSpin{to{transform:rotate(360deg)}}

.seal-inner{
    width:46px;height:46px;
    background:linear-gradient(135deg,var(--primary-color,#B8860B),var(--secondary-color,#FFD700));
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    animation:sealSpin 25s linear infinite reverse;
}
.seal-inner i{color:#fff;font-size:1.3rem}

.issue-date{
    font-family:'DM Sans',sans-serif;
    font-size:.66rem;color:#6b6960;font-weight:500;
}

/* QR Block */
.qr-block{flex:1;text-align:center}
#qrcode{
    display:inline-block;padding:5px;
    background:#fff;border:1px solid #ddd6c3;
    border-radius:4px;margin-bottom:5px;
}

.cert-id{
    font-family:'DM Sans',sans-serif;
    font-size:.6rem;color:#8e8b82;font-weight:500;
}

/* Validation Text */
.validation-text{
    text-align:center;
    font-family:'DM Sans',sans-serif;
    font-size:.7rem;color:#8e8b82;
    padding-top:14px;
    border-top:1px solid #ddd6c3;
    font-weight:400;letter-spacing:.3px;
}

/* ======================== ACHIEVEMENT TOAST ======================== */
.achievement-toast{
    position:fixed;top:30px;left:50%;
    transform:translateX(-50%) translateY(-120px);
    background:linear-gradient(135deg,#1a1a2e 0%,#2d2d44 100%);
    color:#fff;
    padding:14px 30px;border-radius:50px;
    box-shadow:
        0 0 0 1px rgba(212,175,55,.3),
        0 12px 40px rgba(0,0,0,.5),
        0 0 40px rgba(212,175,55,.12);
    z-index:10002;
    font-family:'DM Sans',sans-serif;
    display:flex;align-items:center;gap:12px;
    font-size:.92rem;font-weight:600;
    white-space:nowrap;
    animation:toastEnter .7s cubic-bezier(.16,1,.3,1) .6s both;
    /* Iter2: Gold border glow */
    border:1px solid rgba(212,175,55,.25);
}

.achievement-toast .ach-icon{
    font-size:1.4rem;
    animation:achIconBounce 1s ease-in-out 1.3s both;
}

.achievement-toast .ach-text{
    background:linear-gradient(90deg,#d4af37,#f0d060,#d4af37);
    background-size:200% 100%;
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
    background-clip:text;
    animation:achTextShimmer 2.5s ease-in-out 1.4s infinite;
}

@keyframes toastEnter{
    0%{transform:translateX(-50%) translateY(-120px);opacity:0}
    100%{transform:translateX(-50%) translateY(0);opacity:1}
}

@keyframes toastExit{
    0%{transform:translateX(-50%) translateY(0);opacity:1}
    100%{transform:translateX(-50%) translateY(-120px);opacity:0}
}

@keyframes achIconBounce{
    0%{transform:scale(0) rotate(-20deg)}
    50%{transform:scale(1.4) rotate(5deg)}
    70%{transform:scale(.9) rotate(-2deg)}
    100%{transform:scale(1) rotate(0)}
}

@keyframes achTextShimmer{
    0%{background-position:200% 0}
    100%{background-position:-200% 0}
}

/* ======================== FLOATING ACTION BUTTONS ======================== */
.fab-container{
    position:fixed;bottom:30px;right:30px;
    display:flex;flex-direction:column;gap:12px;
    z-index:1000;
    animation:fadeSlideUp .5s ease-out 2.4s both;
}

.fab{
    width:50px;height:50px;border-radius:50%;border:none;
    color:#fff;font-size:1.1rem;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:all .3s cubic-bezier(.34,1.56,.64,1);
    position:relative;overflow:hidden;
}

.fab::before{
    content:'';position:absolute;inset:0;border-radius:50%;
    background:linear-gradient(135deg,rgba(255,255,255,.2),transparent);
    opacity:0;transition:opacity .3s ease;
}

.fab:hover{transform:scale(1.12) translateY(-2px)}
.fab:hover::before{opacity:1}
.fab:active{transform:scale(.95)}
/* Iter4: Focus styles for accessibility */
.fab:focus-visible{outline:2px solid #fff;outline-offset:3px}

.fab-share{
    background:linear-gradient(135deg,#11cdef,#1171ef);
    box-shadow:0 4px 16px rgba(17,205,239,.35);
}
.fab-share:hover{box-shadow:0 8px 25px rgba(17,205,239,.5)}

.fab-download{
    background:linear-gradient(135deg,#2dce89,#2dcecc);
    box-shadow:0 4px 16px rgba(45,206,137,.35);
}
.fab-download:hover{box-shadow:0 8px 25px rgba(45,206,137,.5)}

.fab-print{
    background:linear-gradient(135deg,#fb6340,#fbb140);
    box-shadow:0 4px 16px rgba(251,99,64,.35);
}
.fab-print:hover{box-shadow:0 8px 25px rgba(251,99,64,.5)}

.fab i{position:relative;z-index:1}

/* ======================== GENERAL ANIMATION ======================== */
@keyframes fadeSlideUp{
    0%{opacity:0;transform:translateY(22px)}
    100%{opacity:1;transform:translateY(0)}
}

/* ======================== ACCESSIBILITY ======================== */
/* Iter4: Reduced motion for vestibular disorders */
@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        transition-duration:.01ms!important;
    }
    .certificate-wrapper::before,.certificate-wrapper::after{animation:none!important}
    .certificate{animation:none!important;opacity:1;transform:none;filter:none}
    .certificate::before{animation:none!important}
    .corner,.rank-medallion,.seal-outer,.seal-inner{animation:none!important}
    .student-name::before,.student-name::after{animation:none!important;opacity:.4}
    .stat-box{animation:none!important;opacity:1;transform:none}
    .achievement-toast{animation:none!important;transform:translateX(-50%) translateY(0);opacity:1}
}

/* Iter4: High contrast mode support */
@media(forced-colors:active){
    .certificate{border:2px solid CanvasText}
    .corner::before,.corner::after{background:Highlight}
    .stat-box{border:1px solid CanvasText}
    .fab{border:1px solid CanvasText}
}

/* ======================== RESPONSIVE ======================== */
@media(max-width:768px){
    .certificate-wrapper{padding:20px 12px}
    .certificate-body{padding:30px 22px}
    .corner{width:42px;height:42px}
    .logo{height:40px}
    .institution-name{font-size:clamp(1.5rem,5vw,1.9rem);letter-spacing:3px}
    .institution-subtitle{font-size:.68rem;letter-spacing:1.5px}

    .rank-medallion{width:72px;height:72px;right:22px;top:30px}
    .badge-icon{width:28px;height:28px;top:-6px;right:-6px}
    .badge-icon::before{font-size:1.1rem}
    .rank-text{font-size:.55rem}
    .rank-number{font-size:1.7rem}

    .title-main{font-size:clamp(1rem,4vw,1.2rem);letter-spacing:1px}
    .title-sub{font-size:.78rem}
    .certifies-text{font-size:.82rem}

    .student-name{
        font-size:clamp(1.4rem,5vw,1.8rem);
        padding:14px 20px;margin:5px 0 16px;
    }
    .student-name::before,.student-name::after{font-size:.95rem}

    .stats-section{gap:10px;flex-wrap:wrap}
    .stat-box{
        flex:1 1 calc(33% - 10px);min-width:95px;
        padding:12px 8px;gap:4px;
    }
    .stat-box i{font-size:1.1rem}
    .stat-value{font-size:1.5rem}
    .stat-label{font-size:.6rem}

    .signature-section{flex-direction:column;gap:18px;align-items:center}
    .signature-line{width:140px}
    .seal-outer{width:58px;height:58px}
    .seal-inner{width:40px;height:40px}
    .seal-inner i{font-size:1.1rem}

    .logo:hover,.stat-box:hover{transform:none}
    .achievement-toast{font-size:.8rem;padding:10px 20px}

    .fab-container{bottom:20px;right:15px;gap:10px}
    .fab{width:44px;height:44px;font-size:.95rem}
}

@media(max-width:480px){
    .certificate-wrapper{padding:12px 8px}
    .certificate-body{padding:22px 14px}
    .corner{width:32px;height:32px}
    .logo{height:34px}
    .institution-name{font-size:clamp(1.2rem,5.5vw,1.5rem);letter-spacing:1px}
    .institution-subtitle{font-size:.6rem;letter-spacing:1px}

    .rank-medallion{width:58px;height:58px;top:22px;right:14px}
    .badge-icon{width:22px;height:22px;top:-5px;right:-5px}
    .badge-icon::before{font-size:.9rem}
    .rank-text{font-size:.48rem;letter-spacing:.5px}
    .rank-number{font-size:1.3rem}

    .title-main{font-size:clamp(.85rem,4.5vw,1rem);letter-spacing:.5px}
    .title-sub{font-size:.7rem}
    .certifies-text{font-size:.75rem;margin-bottom:5px}

    .student-name{
        font-size:clamp(1.15rem,6vw,1.45rem);
        padding:10px 14px;margin:4px 0 14px;
    }
    .student-name::before,.student-name::after{font-size:.85rem}

    .stats-section{flex-direction:column;gap:8px}
    .stat-box{
        flex-direction:row;justify-content:center;
        max-width:100%;gap:10px;padding:10px 14px;
    }
    .stat-info{text-align:left}
    .stat-box i{font-size:1.1rem}
    .stat-value{font-size:1.4rem}
    .stat-label{font-size:.58rem}

    .class-name{font-size:.95rem}
    .class-description{font-size:.78rem}

    #qrcode{width:55px;height:55px;padding:3px}
    #qrcode canvas,#qrcode img{width:100%!important;height:100%!important}
    .cert-id{font-size:.52rem}
    .validation-text{font-size:.62rem;padding-top:10px}

    .fab-container{bottom:12px;right:12px;flex-direction:row;gap:8px}
    .fab{width:40px;height:40px;font-size:.9rem}
    .achievement-toast{font-size:.72rem;padding:8px 14px;gap:8px;border-radius:30px}
}

/* Landscape */
@media(max-height:600px) and (orientation:landscape){
    .certificate-body{padding:18px 35px}
    .certificate-header{margin-bottom:8px}
    .certificate-header::after{margin:8px auto 0}
    .logo{height:28px}
    .institution-name{font-size:1.3rem}
    .certificate-title{margin:6px 0}
    .title-main{font-size:.95rem}
    .student-name{font-size:1.4rem;margin:4px 0 8px;padding:8px 15px}
    .stats-section{margin:4px 0;gap:10px}
    .stat-box{padding:8px 10px}
    .stat-value{font-size:1.3rem}
    .signature-section{margin-bottom:6px}
    .certificate-footer::before{margin:0 auto 8px}
}

/* Large Desktop */
@media(min-width:1440px){
    .certificate{max-width:1050px}
    .certificate-body{padding:58px 80px}
    .institution-name{font-size:2.9rem;letter-spacing:10px}
    .rank-medallion{width:102px;height:102px;top:44px;right:70px}
    .badge-icon{width:38px;height:38px;top:-10px;right:-10px}
    .badge-icon::before{font-size:1.6rem}
    .rank-number{font-size:2.6rem}
    .student-name{font-size:3rem;padding:22px 50px}
    .stats-section{gap:24px}
    .stat-box{padding:22px 18px}
    .stat-box i{font-size:1.6rem}
    .stat-value{font-size:2.2rem}
}

/* ======================== PRINT ======================== */
@media print{
    body{background:#fff!important}
    .certificate-wrapper{padding:0;background:#fff!important;min-height:auto}
    .certificate-wrapper::before,.certificate-wrapper::after{display:none!important}
    .certificate{
        box-shadow:none!important;page-break-inside:avoid;
        max-width:100%;animation:none!important;
        background:#fff!important;
    }
    .certificate::before{display:none!important}
    .certificate::after{border-color:rgba(180,160,100,.5)}
    .certificate-body{
        page-break-inside:avoid;
        background:#fff!important;
        border-color:#ccc;
    }
    .certificate-body::before,.certificate-body::after{display:none!important}
    .certificate-header::after{background:linear-gradient(to right,transparent,rgba(180,160,100,.3),transparent)}
    .corner,.rank-medallion,.student-name,.stat-box,.seal-outer,.seal-inner{animation:none!important}
    .student-name::before,.student-name::after{animation:none!important;opacity:.3}
    .achievement-toast,.fab-container{display:none!important}
    .institution-name{color:#333}
    .institution-subtitle,.validation-text{color:#555}
    .stat-box{break-inside:avoid;border-color:#ddd}
    .student-name{border-color:#c5b06a;background:rgba(255,250,230,.3)}
    .certificate-footer::before{background:linear-gradient(to right,transparent,rgba(180,160,100,.3),transparent)}

    /* Iter4: Print colors for rank medallion */
    .rank-medallion{-webkit-print-color-adjust:exact;print-color-adjust:exact}
    .seal-inner{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* Hide scrollbars */
*{-ms-overflow-style:none;scrollbar-width:none}
*::-webkit-scrollbar{display:none}

/* ======================== RANK TOOLTIPS ======================== */
.rank-medallion::after{
    content:attr(data-badge-name);
    position:absolute;bottom:-28px;left:50%;
    transform:translateX(-50%);
    background:rgba(26,26,46,.95);color:#fff;
    padding:4px 12px;border-radius:20px;
    font-size:.66rem;font-weight:600;white-space:nowrap;
    opacity:0;pointer-events:none;transition:opacity .3s ease;
    z-index:10;font-family:'DM Sans',sans-serif;
    box-shadow:0 4px 12px rgba(0,0,0,.3);
}
.rank-medallion:hover::after{opacity:1}

.rank-medallion.rank-5::after{content:'\1F949 \0020 \0110\1ED3ng Xu\1EA5t S\1EAFc'}
.rank-medallion.rank-6::after{content:'\2B50 B\1EA1c Sao'}
.rank-medallion.rank-7::after{content:'\1F451 V\00E0ng V\01B0\01A1ng Mi\1EC7n'}
.rank-medallion.rank-8::after{content:'\1F48E Kim C\01B0\01A1ng Tinh Anh'}
.rank-medallion.rank-9::after{content:'\1F3C6 B\1EA1ch Kim Cao Th\1EE7'}
.rank-medallion.rank-10::after,.rank-medallion.rank-legendary::after{
    content:'\1F31F Huy\1EC1n Tho\1EA1i';
    background:linear-gradient(135deg,#FF6B6B,#FFD93D);color:#1a1a2e;font-weight:700;
}

@media(max-width:768px){
    .rank-medallion::after,.rank-medallion:hover::after{display:none}
}
@media print{.rank-medallion::after{display:none!important}}