/* Contact Flow JSON Validator — plus features. Uses the site theme tokens (light + dark). */
.kmv-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 12px 0 0; font: 400 14px var(--km-font); color: var(--km-ink); }
.kmv-lbl { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 600 14px var(--km-font); color: var(--km-ink); }
.kmv-lbl select { height: 36px; padding: 0 10px; border: 1px solid var(--km-border-strong); border-radius: 8px; background: var(--km-surface); color: var(--km-ink); font: 400 14px var(--km-font); max-width: 100%; }
.kmv-hint, .kmv-muted2 { color: var(--km-faint); font-size: 13px; }

.kmv-top { margin: 0 0 14px; }
.kmv-score { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; border: 1px solid var(--km-border); border-left: 5px solid #16a34a; border-radius: 12px; padding: 14px 18px; background: var(--km-surface); }
.kmv-score.warn { border-left-color: #d97706; } .kmv-score.bad { border-left-color: #dc2626; }
.kmv-ring { --v: 0; width: 76px; height: 76px; border-radius: 50%; display: grid; place-content: center; text-align: center;
    background: radial-gradient(closest-side, var(--km-surface) 78%, transparent 80% 100%), conic-gradient(var(--kmv-c, #16a34a) calc(var(--v) * 1%), var(--km-border) 0); }
.kmv-score.warn .kmv-ring { --kmv-c: #d97706; } .kmv-score.bad .kmv-ring { --kmv-c: #dc2626; }
.kmv-ring b { font: 800 22px/1 var(--km-font); color: var(--km-ink); } .kmv-ring span { font-size: 11px; color: var(--km-faint); }
.kmv-verdict { font: 700 18px var(--km-font); color: var(--km-ink); }
.kmv-sub { font-size: 13.5px; color: var(--km-faint); margin: 2px 0 8px; }
.kmv-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.kmv-btn { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border: 1px solid var(--km-border-strong); border-radius: 8px; background: var(--km-surface); color: var(--km-ink); font: 600 13.5px var(--km-font); cursor: pointer; text-decoration: none; }
.kmv-btn.primary { background: var(--km-accent); border-color: var(--km-accent); color: #fff; }
.kmv-btn[disabled] { opacity: .5; cursor: not-allowed; }
.kmv-promo { margin: 10px 0 0; padding: 8px 12px; border-radius: 8px; background: var(--km-intro-bg); font-size: 13.5px; color: var(--km-ink); word-break: break-word; }
.kmv-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 0; font-size: 13px; color: var(--km-faint); }
.kmv-chip { border: 1px solid var(--km-border-strong); background: var(--km-surface); color: var(--km-ink); border-radius: 999px; padding: 3px 12px; font: 600 13px var(--km-font); cursor: pointer; }
.kmv-chip.on { background: var(--km-accent); border-color: var(--km-accent); color: #fff; }
.kmv-muted { margin-left: 8px; }
.kmv-unmute { border: 1px dashed var(--km-border-strong); background: none; color: var(--km-faint); border-radius: 999px; padding: 2px 8px; font: 600 12px var(--km-font); cursor: pointer; }

.kmv-rowact { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.kmv-mini { border: 1px solid var(--km-border); background: none; color: var(--km-accent); border-radius: 6px; padding: 2px 8px; font: 600 12px var(--km-font); cursor: pointer; }
.kmv-mini:hover { border-color: var(--km-accent); }

.kmv-fix { padding: 16px 4px; font: 400 15px/1.55 var(--km-font); color: var(--km-ink); }
.kmv-fix p { margin: 0 0 12px; }
.kmv-fixopts { display: grid; gap: 8px; margin: 0 0 14px; }
.kmv-check { display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.kmv-check input { width: 16px; height: 16px; accent-color: var(--km-accent); }
.kmv-check.off { color: var(--km-faint); font-weight: 400; cursor: default; }
.kmv-h { margin: 16px 0 6px; font: 700 15px var(--km-font); color: var(--km-ink); }
.kmv-log { margin: 0 0 10px; padding-left: 20px; font-size: 14px; }
.kmv-log li { margin: 2px 0; word-break: break-word; }
.kmv-good { color: #15803d; font-weight: 600; }
.kmv-warn { color: #b45309; font-weight: 600; }
@media (max-width: 640px) { .kmv-score { padding: 12px; } .kmv-ring { width: 64px; height: 64px; } }