.cert-page-heading{
    margin-bottom:18px;
}

.cert-layout{
    display:grid;
    grid-template-columns:minmax(300px,.72fr) minmax(0,1.55fr);
    gap:18px;
    align-items:start;
}

.cert-generator,
.cert-preview-panel,
.cert-verification{
    position:relative;
    overflow:hidden;
}

.cert-generator::before,
.cert-preview-panel::before{
    content:"";
    position:absolute;
    inset:0 0 auto;
    height:2px;
    background:linear-gradient(
        90deg,
        transparent,
        #d9b45b,
        #4ba4ff,
        transparent
    );
    opacity:.9;
}

.cert-special-banner{
    padding:16px;
    margin-bottom:20px;
    border:1px solid rgba(218,181,91,.4);
    border-radius:14px;
    background:
        radial-gradient(circle at 85% 20%,rgba(218,181,91,.18),transparent 38%),
        linear-gradient(135deg,rgba(9,42,83,.9),rgba(5,24,49,.92));
    box-shadow:inset 0 0 25px rgba(44,133,224,.08);
}

.cert-special-banner span{
    display:block;
    margin-bottom:4px;
    color:#e4c775;
    font-size:.72rem;
    font-weight:800;
    letter-spacing:.12em;
}

.cert-special-banner strong{
    display:block;
    color:#fff;
    font-size:1.08rem;
    line-height:1.25;
}

.cert-special-banner small{
    display:block;
    margin-top:5px;
    color:#b8cce4;
    line-height:1.4;
}

.cert-intro h2,
.cert-preview-top h2{
    margin:0;
}

.cert-intro p{
    color:var(--muted,#aebed0);
    line-height:1.55;
}

.cert-form{
    margin-top:20px;
}

.cert-form label{
    display:block;
    margin-bottom:8px;
    font-weight:800;
}

.cert-input-row{
    display:flex;
    gap:10px;
}

.cert-input-row input{
    min-width:0;
    flex:1;
    height:48px;
    padding:0 14px;
    border:1px solid rgba(120,162,207,.35);
    border-radius:10px;
    background:rgba(3,17,34,.72);
    color:#fff;
    font-size:1rem;
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
    outline:none;
}

.cert-input-row input:focus{
    border-color:#4ba4ff;
    box-shadow:0 0 0 3px rgba(75,164,255,.12);
}

.cert-primary-btn,
.cert-secondary-btn{
    border:0;
    border-radius:10px;
    padding:0 18px;
    min-height:46px;
    font-weight:800;
    cursor:pointer;
    transition:.18s ease;
}

.cert-primary-btn{
    color:#06182d;
    background:linear-gradient(135deg,#f0cf74,#d9a93c);
}

.cert-primary-btn:hover{
    transform:translateY(-1px);
    filter:brightness(1.04);
}

.cert-primary-btn:disabled{
    cursor:wait;
    opacity:.6;
    transform:none;
}

.cert-secondary-btn{
    color:#dceaff;
    background:#102b49;
    border:1px solid rgba(112,164,220,.3);
}

.cert-message{
    margin-top:15px;
    padding:12px 14px;
    border-radius:10px;
    line-height:1.45;
}

.cert-message.ok{
    color:#c8f7d6;
    background:rgba(31,142,78,.17);
    border:1px solid rgba(62,190,111,.25);
}

.cert-message.error{
    color:#ffd3d3;
    background:rgba(179,45,45,.15);
    border:1px solid rgba(221,76,76,.25);
}

.cert-message.info{
    color:#d9eaff;
    background:rgba(49,115,180,.14);
    border:1px solid rgba(75,164,255,.22);
}

.cert-rules{
    display:grid;
    gap:10px;
    margin-top:22px;
}

.cert-rules div{
    padding:11px 12px;
    border:1px solid rgba(120,162,207,.15);
    border-radius:10px;
    background:rgba(5,23,44,.45);
}

.cert-rules strong,
.cert-rules span{
    display:block;
}

.cert-rules strong{
    color:#e7edf5;
    font-size:.88rem;
}

.cert-rules span{
    margin-top:3px;
    color:#9fb2c7;
    font-size:.79rem;
    line-height:1.4;
}

.cert-preview-top{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:13px;
}

#certPreviewState{
    color:#95abc2;
    font-size:.78rem;
}

.cert-canvas-wrap{
    width:100%;
    overflow:hidden;
    border-radius:10px;
    background:#07192d;
    box-shadow:
        0 18px 45px rgba(0,0,0,.24),
        inset 0 0 0 1px rgba(255,255,255,.05);
}

#certCanvas{
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:1.4145/1;
    background:#fff;
}

.cert-actions{
    display:flex;
    justify-content:center;
    gap:10px;
    margin-top:14px;
}

.cert-verification{
    margin-top:18px;
}

.cert-verification.valid{
    border-color:rgba(55,190,104,.4);
}

.cert-verification.invalid{
    border-color:rgba(218,78,78,.4);
}

.cert-verify-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    margin-top:15px;
}

.cert-verify-item{
    padding:12px;
    border:1px solid rgba(120,162,207,.16);
    border-radius:10px;
    background:rgba(6,25,47,.48);
}

.cert-verify-item span{
    display:block;
    color:#8ea6bf;
    font-size:.73rem;
    text-transform:uppercase;
    letter-spacing:.06em;
}

.cert-verify-item strong{
    display:block;
    margin-top:4px;
    color:#fff;
    overflow-wrap:anywhere;
}

.cert-qr-stage{
    position:fixed;
    left:-10000px;
    top:-10000px;
    width:220px;
    height:220px;
    background:#fff;
    padding:10px;
}

@media (max-width:1050px){
    .cert-layout{
        grid-template-columns:1fr;
    }
}

@media (max-width:640px){
    .cert-input-row{
        flex-direction:column;
    }

    .cert-primary-btn,
    .cert-secondary-btn{
        width:100%;
    }

    .cert-actions{
        flex-direction:column;
    }

    .cert-verify-grid{
        grid-template-columns:1fr;
    }

    .cert-preview-top{
        align-items:flex-start;
        flex-direction:column;
        gap:5px;
    }
}