:root {
    color-scheme: light;
    font-family: "Euclid Circular", sans-serif;
    color: #192235;
    background: #f8f7f8;
    font-size: 14px;
    --brand-primary: #c10c1f;
    --brand-secondary: #393939;
    --brand-gradient: linear-gradient(270deg, var(--brand-secondary) 0%, var(--brand-primary) 100%);
}

* { box-sizing: border-box; }
body { margin: 0; }
a { color: var(--brand-primary); text-underline-offset: 3px; }
header { background: white; border-top: 3px solid var(--brand-primary); border-bottom: 1px solid #ebe5e7; }
nav { max-width: 960px; margin: auto; padding: 12px 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-size: 20px; font-weight: 700; text-decoration: none; color: #192235; }
.brand img { width: 32px; height: 32px; object-fit: contain; }
nav div { display: flex; gap: 20px; }
nav div a { font-size: 13px; text-decoration: none; font-weight: 500; }
nav div a:hover { text-decoration: underline; }
main { max-width: 960px; margin: 24px auto; padding: 0 20px; }
.card { background: white; border: 1px solid #ebe5e7; border-radius: 12px; padding: 20px 24px; margin-bottom: 16px; }
.certificate-summary { border-top: 3px solid var(--brand-primary); }
.certificate-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.search-card { max-width: 620px; margin: 24px auto; border-top: 3px solid var(--brand-primary); }
h1 { font-size: clamp(22px, 3vw, 27px); line-height: 1.2; margin: 6px 0 8px; overflow-wrap: anywhere; }
h2 { font-size: 18px; margin: 0 0 6px; }
p { line-height: 1.5; margin: 8px 0; }
.muted { color: #656575; font-size: 13px; }
.eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-primary); }
label { display: block; font-weight: 600; margin: 18px 0 8px; }
input { width: 100%; font: inherit; padding: 11px 13px; border: 1px solid #cfc6cb; border-radius: 8px; }
input:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 3px; }
button, .button { display: inline-block; font: inherit; font-weight: 600; color: white; background: var(--brand-gradient); border: 0; border-radius: 8px; padding: 11px 18px; cursor: pointer; text-decoration: none; margin-top: 12px; }
button:hover, .button:hover { filter: brightness(1.1); }
.status { display: inline-block; flex-shrink: 0; border-radius: 24px; padding: 5px 12px; font-size: 12px; font-weight: 700; background: #edf0f5; }
.valid { color: #155d39; background: #e3f5e9; }
.revoked { color: #9a1d2c; background: #fde8ec; }
.expired { color: #7b450a; background: #fff0d6; }
dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 20px; margin: 16px 0 0; }
dl > div { border-top: 1px solid #f0ebed; padding-top: 9px; }
dt { color: #77717b; font-size: 11px; margin-bottom: 3px; }
dd { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }
.code { font-size: 11px; letter-spacing: .01em; }
.evidence { display: block; width: 100%; height: auto; border: 1px solid #ebe5e7; border-radius: 8px; margin-top: 12px; }
.document-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin: 12px 0; }
.document-actions .button { margin-top: 0; }
.pdf-viewer { border: 1px solid #ebe5e7; border-radius: 8px; overflow: hidden; background: #f0edef; }
.pdf-toolbar { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; padding: 10px; background: #fff; border-bottom: 1px solid #ebe5e7; }
.pdf-toolbar button { margin: 0; padding: 7px 10px; font-size: 12px; }
.pdf-toolbar button:disabled { opacity: .45; cursor: default; }
.pdf-toolbar span { font-size: 12px; padding: 0 4px; }
.pdf-status { text-align: center; font-size: 13px; padding: 0 12px; }
.pdf-status:empty { display: none; }
.pdf-viewport { width: 100%; max-height: 82vh; min-height: 120px; overflow: auto; padding: 8px; }
.pdf-viewport canvas { display: block; margin: 0 auto; background: #fff; }
.pdf-viewport canvas[hidden] { display: none; }
.notes { white-space: pre-line; }
.observations { margin-top: 16px; }
.error { color: #9a1d2c; }
footer { text-align: center; padding: 14px 20px; color: #77717b; font-size: 12px; }
@media (max-width: 760px) { dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) {
    nav { padding: 10px 16px; }
    nav div { gap: 16px; }
    main { padding: 0 12px; margin: 16px auto; }
    .card { padding: 16px; }
    .certificate-heading { align-items: flex-start; gap: 10px; }
    .certificate-heading h1 { font-size: 22px; }
    dl { grid-template-columns: 1fr; gap: 9px; }
    dt { margin-bottom: 2px; }
    .code { font-size: 12px; }
}