/* Probator.ai — certificate verification page */
.vf { width: min(760px, 100% - 40px); margin: 0 auto; padding: 48px 0 72px; }
.vf h1 { margin: 0; font-size: clamp(30px, 4vw, 42px); letter-spacing: -0.035em; font-weight: 650; }
.vf .lead { margin: 12px 0 28px; }
.vf-form label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.vf-form > div { display: flex; gap: 8px; }
.vf-form input { flex: 1; min-width: 0; font: 15px var(--f-mono); padding: 12px 14px; border: 1px solid #d9d7d1; border-radius: 10px; }
.vf-form input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.vf-form button, .vf button.btn { font: 600 15px var(--f-ui); border: 0; border-radius: 10px; padding: 0 20px; background: var(--ink); color: #fff; cursor: pointer; min-height: 46px; }
#result { margin-top: 28px; }
.status { display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: start; padding: 20px 22px; border-radius: 14px; border: 1px solid; }
.status .ic { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; }
.status .ic svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.status h2 { margin: 2px 0 4px; font-size: 21px; letter-spacing: -0.02em; }
.status p { margin: 0; color: var(--ink-2); }
.status.ok { background: #effaf3; border-color: #b8e4c8; } .status.ok .ic { background: #16a364; }
.status.bad { background: #fff1f1; border-color: #f3c0c0; } .status.bad .ic { background: #e5484d; }
.status.warn { background: #fff8e6; border-color: #f1d27a; } .status.warn .ic { background: #d4930f; }
.browser { margin: 12px 0 0; font-size: 13.5px; color: var(--ink-2); display: flex; gap: 8px; align-items: center; }
.browser::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c, #8a8f99); }
.vf h3 { margin: 32px 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); }
.vf table { width: 100%; border-collapse: collapse; font-size: 15px; }
.vf td { padding: 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.vf td:first-child { color: var(--ink-3); width: 38%; padding-right: 12px; }
.vf td.mono, .vf code { font: 13px var(--f-mono); word-break: break-all; }
.results { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.results div { border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.results b { display: block; font-size: 24px; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.results span { font-size: 12.5px; color: var(--ink-3); }
.match textarea { width: 100%; min-height: 140px; font: 14.5px/1.6 var(--f-ui); padding: 12px 14px; border: 1px solid #d9d7d1; border-radius: 10px; resize: vertical; }
.match .row { display: flex; gap: 12px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.match .out { font-weight: 600; }
.match .out.ok { color: #16794b; } .match .out.bad { color: #c02d32; }
details.tech { margin-top: 28px; border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; }
details.tech summary { cursor: pointer; font-weight: 600; }
details.tech p { font-size: 13.5px; color: var(--ink-2); }
.vf-note { margin-top: 32px; font-size: 13.5px; color: var(--ink-3); }
.lang-select { font: 500 13px var(--f-ui); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; background: #fff; }
@media (max-width: 640px) { .results { grid-template-columns: 1fr 1fr; } .vf-form > div { flex-direction: column; } }
.prov-row { margin: 12px 0 0; font-size: 14px; color: var(--ink-2); }
.fine { font-size: 12.5px; color: var(--ink-3); margin: 8px 0 0; }

.acc-notes { padding-left: 20px; color: var(--ink-2); display: grid; gap: 10px; }
.acc-notes b { color: var(--ink); }
#acc table th { text-align: left; font-weight: 600; }
@media (max-width: 620px) { .results { grid-template-columns: repeat(2, 1fr); } }