:root {
  --v-bg: #f4f6fa; --v-card: #ffffff; --v-ink: #182b49; --v-muted: #596b82; --v-line: #dce3ed;
  --v-blue: #3158c9; --v-ok: #1f7a4d; --v-ok-bg: #e6f4ec; --v-bad: #b42318; --v-bad-bg: #fdecea;
  --v-warn: #8a5a00; --v-warn-bg: #fff4d6;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --v-bg: #101925; --v-card: #192536; --v-ink: #e6edf7; --v-muted: #a8b7ca; --v-line: #304057;
    --v-blue: #a3baff; --v-ok: #6fd49b; --v-ok-bg: #173726; --v-bad: #ff9b8f; --v-bad-bg: #3a1c1a;
    --v-warn: #f6c453; --v-warn-bg: #3a3018;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--v-bg); color: var(--v-ink); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.v-wrap { max-width: 640px; margin: 0 auto; padding: 28px 16px 40px; }
.v-head { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.v-head img { filter: drop-shadow(0 3px 5px rgba(0,0,0,.3)); } /* no circle behind the seal, same shadow as the app */
.v-eyebrow { margin: 0; font-size: 12px; color: var(--v-muted); letter-spacing: .02em; }
h1 { margin: 2px 0 0; font-size: 24px; line-height: 1.2; }
.v-form { background: var(--v-card); border: 1px solid var(--v-line); border-radius: 14px; padding: 18px; }
.v-form label { font-weight: 700; font-size: 14px; }
.v-hint { margin: 4px 0 10px; font-size: 13px; color: var(--v-muted); }
.v-row { display: flex; gap: 8px; flex-wrap: wrap; }
.v-row input { flex: 1 1 220px; min-width: 0; font: 600 18px/1.2 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .08em; text-transform: uppercase;
  padding: 11px 12px; border: 1.5px solid var(--v-line); border-radius: 10px; background: var(--v-bg); color: var(--v-ink); }
.v-row button { flex: 0 0 auto; font: 700 15px system-ui, sans-serif; padding: 11px 20px; border: 0; border-radius: 10px; background: var(--v-blue); color: #fff; cursor: pointer; }
@media (prefers-color-scheme: dark) { .v-row button { color: #0b1626; } }
.v-row button:disabled { opacity: .6; cursor: progress; }
input:focus-visible, button:focus-visible { outline: 2px solid var(--v-blue); outline-offset: 2px; }
#v-result:empty { display: none; }
.v-card { margin-top: 16px; background: var(--v-card); border: 1px solid var(--v-line); border-radius: 14px; overflow: hidden; }
.v-banner { padding: 16px 18px; display: flex; gap: 12px; align-items: flex-start; }
.v-banner svg { flex: 0 0 26px; margin-top: 2px; }
.v-banner h2 { margin: 0; font-size: 18px; }
.v-banner p { margin: 4px 0 0; font-size: 14px; }
.v-ok { background: var(--v-ok-bg); color: var(--v-ok); }
.v-bad { background: var(--v-bad-bg); color: var(--v-bad); }
.v-warn { background: var(--v-warn-bg); color: var(--v-warn); padding: 10px 18px; font-size: 14px; margin: 0; }
.v-details { margin: 0; padding: 6px 18px 12px; display: grid; grid-template-columns: minmax(120px, 38%) 1fr; }
.v-details dt, .v-details dd { padding: 9px 0; border-bottom: 1px solid var(--v-line); margin: 0; font-size: 14px; }
.v-details dt { color: var(--v-muted); padding-right: 10px; }
.v-details dd { font-weight: 600; overflow-wrap: anywhere; }
.v-details .v-mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 600; }
.v-check { padding: 14px 18px 18px; border-top: 1px solid var(--v-line); }
.v-check h3 { margin: 0 0 4px; font-size: 15px; }
.v-check p { margin: 0 0 10px; font-size: 13px; color: var(--v-muted); }
.v-check-result { margin-top: 10px; font-size: 14px; font-weight: 600; }
.v-foot { margin-top: 26px; font-size: 12.5px; color: var(--v-muted); }
.v-foot p { margin: 4px 0; }
@media (max-width: 480px) { .v-details { grid-template-columns: 1fr; } .v-details dt { border-bottom: 0; padding-bottom: 0; } }