:root {
    color-scheme: light;
    --certificate-primary: #696cff;
    --certificate-ink: #25324b;
    --certificate-muted: #667085;
}

* {
    box-sizing: border-box;
}

body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    color: var(--certificate-ink);
    background:
        radial-gradient(circle at 12% 18%, rgba(105, 108, 255, .15), transparent 34rem),
        radial-gradient(circle at 88% 82%, rgba(3, 195, 236, .12), transparent 30rem),
        #f6f7fb;
}

.certificate-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 2rem 1rem;
}

.certificate-panel {
    width: min(100%, 720px);
}

.certificate-heading {
    margin-bottom: 1.5rem;
    text-align: center;
}

.certificate-logo {
    width: min(210px, 62vw);
    height: auto;
    margin-bottom: 1.5rem;
}

.certificate-heading h1 {
    margin: 0 0 .55rem;
    font-size: clamp(1.7rem, 4vw, 2.35rem);
    font-weight: 700;
    letter-spacing: -.035em;
}

.certificate-heading p {
    margin: 0 auto;
    max-width: 560px;
    color: var(--certificate-muted);
}

.certificate-card {
    padding: clamp(1.25rem, 4vw, 2.25rem);
    border: 1px solid rgba(37, 50, 75, .08);
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 1.5rem 4rem rgba(37, 50, 75, .12);
}

.certificate-card .form-control {
    letter-spacing: .025em;
}

.certificate-card .form-control:focus {
    border-color: var(--certificate-primary);
    box-shadow: 0 0 0 .2rem rgba(105, 108, 255, .16);
}

.certificate-card .btn-primary {
    border-color: var(--certificate-primary);
    background: var(--certificate-primary);
}

.certificate-result {
    margin-top: 1.75rem;
    padding-top: 1.75rem;
    border-top: 1px solid #eaecf0;
}

.certificate-status {
    display: flex;
    gap: .9rem;
    align-items: center;
    padding: 1rem;
    border: 1px solid transparent;
    border-radius: .85rem;
}

.certificate-status strong {
    display: block;
    margin-bottom: .15rem;
}

.certificate-status p {
    margin: 0;
    font-size: .9rem;
}

.certificate-status-icon {
    flex: 0 0 2.25rem;
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    border-radius: 999px;
    font-weight: 800;
}

.certificate-status-success {
    color: #087443;
    border-color: #a6f4c5;
    background: #ecfdf3;
}

.certificate-status-success .certificate-status-icon {
    color: #fff;
    background: #12b76a;
}

.certificate-status-danger {
    color: #b42318;
    border-color: #fecdca;
    background: #fef3f2;
}

.certificate-status-danger .certificate-status-icon {
    color: #fff;
    background: #f04438;
}

.certificate-status-warning {
    color: #93370d;
    border-color: #fedf89;
    background: #fffaeb;
}

.certificate-status-warning .certificate-status-icon {
    color: #fff;
    background: #f79009;
}

.certificate-details {
    margin: 1.25rem 0 0;
}

.certificate-details > div {
    display: grid;
    grid-template-columns: minmax(130px, .8fr) minmax(0, 1.8fr);
    gap: 1rem;
    padding: .85rem 0;
    border-bottom: 1px solid #f0f1f4;
}

.certificate-details > div:last-child {
    border-bottom: 0;
}

.certificate-details dt {
    color: var(--certificate-muted);
    font-weight: 600;
}

.certificate-details dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
    font-weight: 600;
}

.certificate-details code {
    color: var(--certificate-primary);
}

.certificate-actions {
    display: flex;
    gap: .75rem;
    margin-top: 1.25rem;
}

.certificate-actions .btn {
    min-width: 8rem;
}

.certificate-actions .btn-outline-primary {
    color: var(--certificate-primary);
    border-color: var(--certificate-primary);
}

.certificate-actions .btn-outline-primary:hover,
.certificate-actions .btn-outline-primary:focus {
    color: #fff;
    background: var(--certificate-primary);
}

@media (max-width: 575.98px) {
    .certificate-page {
        align-items: start;
        padding-top: 1.5rem;
    }

    .certificate-card .input-group {
        display: grid;
        gap: .75rem;
    }

    .certificate-card .input-group > .form-control,
    .certificate-card .input-group > .btn {
        width: 100%;
        border-radius: .5rem !important;
    }

    .certificate-details > div {
        grid-template-columns: 1fr;
        gap: .25rem;
    }

    .certificate-actions {
        display: grid;
    }

    .certificate-actions .btn {
        width: 100%;
    }
}