:root {
  color-scheme: light;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #1B2330;
  background: #FFFFFF;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; padding: 24px 12px; min-width: 0; }
.card {
  width: 100%; max-width: 720px; margin: 0 auto; padding: 24px;
  background: #FFFFFF; border: 1px solid #DDE3E8; border-radius: 14px;
}
.result-header {
  text-align: center; border-bottom: 1px solid #DDE3E8; padding-bottom: 20px;
}
.status-icon {
  display: inline-grid; place-items: center; vertical-align: middle;
  width: 27px; height: 27px; border: 2px solid currentColor;
  border-radius: 50%; margin-right: 8px; font-size: 18px; font-weight: 700;
  color: #555B65;
}
h1 {
  display: inline; margin: 0; color: #0B1320;
  font-size: 1.3rem; line-height: 1.4; overflow-wrap: anywhere;
}
.result-header p, footer p { color: #555B65; line-height: 1.5; }
.result-header p { margin: 12px 0 0; }
.card[data-state="authentic"] .status-icon,
.confirmed { color: #15803D; }
.card[data-state="revoked"] .status-icon,
.card[data-state="unavailable"] .status-icon { color: #D97706; }
.details { margin: 18px 0 0; }
.details > div {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: 12px; align-items: start; padding: 10px 0;
}
dt { color: #555B65; }
dd { margin: 0; text-align: right; font-weight: 650; overflow-wrap: anywhere; }
footer {
  margin-top: 20px; padding-top: 18px;
  border-top: 1px solid #DDE3E8; text-align: center;
}
footer strong { color: #015EC3; }
footer p { margin: 9px 0 0; font-size: .92rem; }
@media (max-width: 360px) {
  body { padding: 10px; }
  .card { padding: 16px; }
  h1 { font-size: 1.1rem; }
  .details > div { gap: 8px; }
}