.klarion-light { --kl-ink: #17334a; --kl-accent: #087f8c; background: #f7fafc; color: var(--kl-ink); border: 1px solid #d8e4eb; border-radius: 20px; padding: clamp(20px, 4vw, 48px); margin: 24px auto; max-width: 1100px; font: 16px/1.6 system-ui, sans-serif; }
.klarion-light * { box-sizing: border-box; }
.klarion-light [hidden] { display: none !important; }
.klarion-light h2 { font-size: clamp(25px, 4vw, 38px); line-height: 1.2; color: var(--kl-ink); margin: 12px 0 20px; }
.klarion-light h3 { font-size: 26px; margin-top: 32px; }
.klarion-light h4 { font-size: 20px; margin-top: 28px; }
.klarion-light .kl-eyebrow { font-size: 12px; font-weight: 750; letter-spacing: .16em; color: var(--kl-accent); }
.klarion-light .kl-form { display: grid; gap: 16px; margin-top: 24px; }
.klarion-light label { display: block; font-weight: 600; }
.klarion-light input[type="text"] { display: block; width: 100%; margin-top: 8px; background: white; color: var(--kl-ink); border: 1px solid #829bad; border-radius: 8px; padding: 14px; font: inherit; }
.klarion-light .kl-consent { display: flex; gap: 10px; align-items: baseline; font-size: 14px; font-weight: 400; }
.klarion-light .kl-note { font-size: 13px; color: #4c6375; }
.klarion-light button { justify-self: start; background: var(--kl-accent); color: white; border: 0; border-radius: 8px; padding: 14px 24px; font: inherit; font-weight: 650; cursor: pointer; }
.klarion-light button:disabled { opacity: .6; cursor: wait; }
.klarion-light :focus-visible { outline: 3px solid #bc6c00; outline-offset: 3px; }
.klarion-light .kl-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.klarion-light .kl-status { margin: 20px 0 10px; font-weight: 600; }
.klarion-light progress { width: 100%; accent-color: var(--kl-accent); }
.klarion-light .kl-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.klarion-light .kl-card { background: white; border: 1px solid #d8e4eb; border-radius: 12px; padding: 18px; }
.klarion-light .kl-card strong { display: block; font-size: 30px; color: var(--kl-accent); }
.klarion-light .kl-card span { font-size: 13px; }
.klarion-light .kl-table-wrap { overflow-x: auto; }
.klarion-light table { width: 100%; border-collapse: collapse; background: white; font-size: 13px; }
.klarion-light th, .klarion-light td { text-align: left; border-bottom: 1px solid #d8e4eb; padding: 12px; min-width: 110px; overflow-wrap: anywhere; }
.klarion-light th { background: #e8f0f5; }
.klarion-light .kl-warning { background: #fff1d8; padding: 14px; border-radius: 8px; }
.klarion-light .kl-form .kl-challenge-area { grid-column: 1 / -1; grid-row: 4; }
.klarion-light .kl-challenge-area:has(.kl-challenge:empty):not(:has(p)) { display: none; }
@media (min-width: 721px) {
    .scan-content .klarion-light form.kl-form { grid-template-columns: minmax(0, 1fr) 300px; }
    .scan-content .klarion-light .kl-form .kl-consent { grid-column: 1; grid-row: 2; }
    .scan-content .klarion-light .kl-form > p.kl-note { grid-column: 1; grid-row: 3; }
    .scan-content .klarion-light .kl-form .kl-challenge-area { grid-column: 2; grid-row: 2 / 4; align-self: center; }
}
@media (max-width: 720px) {
    .scan-content .klarion-light .kl-form .kl-challenge-area { grid-row: 4; }
    .scan-content .klarion-light .kl-form > button { grid-row: 5; }
}

/* Report styles are scoped independently from the host WordPress theme. */
.klarion-light .kl-report.kl-dashboard { --report-bg: #101b2d; --report-panel: #1e293b; --report-line: #35445c; color: #edf4ff; background: var(--report-bg); border: 1px solid var(--report-line); border-radius: 12px; padding: clamp(16px, 3vw, 30px); margin-top: 30px; font-size: 14px; line-height: 1.6; }
.klarion-light .kl-dashboard * { min-width: 0; }
.klarion-light .kl-dashboard h3 { color: #fff; margin: 0 0 8px; overflow-wrap: anywhere; }
.klarion-light .kl-dashboard h4 { display: flex; gap: 10px; align-items: center; color: #fff; margin: 0 0 16px; font-size: 16px; line-height: 1.4; letter-spacing: -.02em; }
.klarion-light .kl-dashboard p { margin: 8px 0 14px; }
.klarion-light .kl-dashboard .kl-kicker { color: #55c2e8; font-size: 10px; letter-spacing: .16em; font-weight: 700; margin: 0 0 10px; }
.klarion-light .kl-dashboard .kl-caption { color: #b2c3d9; font-size: 12px; line-height: 1.7; }
.klarion-light .kl-dashboard .kl-icon { width: 22px; height: 22px; flex-shrink: 0; color: #55c2e8; }
.klarion-light .kl-dashboard .kl-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 24px 0 16px; }
.klarion-light .kl-dashboard .kl-metric { background: var(--report-panel); border: 1px solid var(--report-line); border-radius: 10px; padding: 16px; }
.klarion-light .kl-dashboard .kl-metric > .kl-icon { display: block; box-sizing: content-box; padding: 8px; border-radius: 9px; background: #38bdf814; margin-bottom: 10px; }
.klarion-light .kl-dashboard .kl-metric:nth-child(2) > .kl-icon { color: #fbbf24; background: #fbbf2414; }
.klarion-light .kl-dashboard .kl-metric:nth-child(4) > .kl-icon { color: #fb7185; background: #fb718514; }
.klarion-light .kl-dashboard .kl-metric strong { display: block; color: #fff; font-size: 32px; line-height: 1.25; }
.klarion-light .kl-dashboard .kl-metric span { display: block; font-size: 12px; margin-top: 5px; }
.klarion-light .kl-dashboard .kl-metric small { display: block; color: #a8bbd4; font-size: 10px; margin-top: 8px; }
.klarion-light .kl-dashboard .kl-panel { padding: 20px; border: 1px solid var(--report-line); background: var(--report-panel); border-radius: 10px; margin: 0 0 16px; }
.klarion-light .kl-dashboard .kl-charts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.klarion-light .kl-dashboard .kl-chart-content { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.klarion-light .kl-dashboard .kl-donut { width: 128px; height: 128px; border-radius: 50%; padding: 13px; flex-shrink: 0; }
.klarion-light .kl-dashboard .kl-donut-center { background: var(--report-panel); border-radius: 50%; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.klarion-light .kl-dashboard .kl-donut-center strong { color: #fff; font-size: 29px; line-height: 1.2; }
.klarion-light .kl-dashboard .kl-donut-center span { color: #b2c3d9; font-size: 10px; }
.klarion-light .kl-dashboard .kl-legend { list-style: none; padding: 0; margin: 0; width: 100%; }
.klarion-light .kl-dashboard .kl-legend li { display: grid; grid-template-columns: 8px 1fr auto; gap: 8px; align-items: center; font-size: 11px; margin: 7px 0; }
.klarion-light .kl-dashboard .kl-legend i { width: 8px; height: 8px; border-radius: 50%; }
.klarion-light .kl-dashboard .kl-legend strong { color: #fff; }
.klarion-light .kl-dashboard .kl-horizon { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 26px 0 4px; }
.klarion-light .kl-dashboard .kl-horizon > div { text-align: center; position: relative; padding: 18px 4px 0; }
.klarion-light .kl-dashboard .kl-horizon > div::before { content: ''; position: absolute; top: 0; left: 0; right: 0; border-top: 1px solid #51617a; }
.klarion-light .kl-dashboard .kl-horizon > div:first-child::before { left: 50%; }
.klarion-light .kl-dashboard .kl-horizon > div:last-child::before { right: 50%; }
.klarion-light .kl-dashboard .kl-horizon i { position: absolute; top: -5px; left: calc(50% - 5px); height: 10px; width: 10px; background: #fbbf24; border: 2px solid var(--report-panel); border-radius: 50%; box-shadow: 0 0 0 1px #51617a; }
.klarion-light .kl-dashboard .kl-horizon > div:nth-child(-n+2) i { background: #fb7185; }
.klarion-light .kl-dashboard .kl-horizon strong { display: block; font-size: 30px; color: #fff; line-height: 1.2; }
.klarion-light .kl-dashboard .kl-horizon span { color: #b2c3d9; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.klarion-light .kl-dashboard .kl-matrix { margin: 20px 0 14px; }
.klarion-light .kl-dashboard .kl-matrix-head, .klarion-light .kl-dashboard button.kl-matrix-row { display: grid; grid-template-columns: 64px minmax(30px, 1fr) 65px 95px; gap: 12px; align-items: center; width: 100%; text-align: left; }
.klarion-light .kl-dashboard .kl-matrix-head { font-size: 10px; color: #b2c3d9; padding: 10px; }
.klarion-light .kl-dashboard button.kl-matrix-row { background: transparent; color: #edf4ff; border: 0; border-top: 1px solid var(--report-line); padding: 13px 10px; height: auto; border-radius: 0; font-size: 12px; font-weight: 500; cursor: pointer; box-shadow: none; }
.klarion-light .kl-dashboard button.kl-matrix-row:hover, .klarion-light .kl-dashboard button.kl-matrix-row[aria-pressed='true'] { background: #38bdf81a; }
.klarion-light .kl-dashboard button:focus-visible, .klarion-light .kl-dashboard summary:focus-visible { outline: 2px solid #55c2e8; outline-offset: 3px; }
.klarion-light .kl-dashboard .kl-source-dots { display: inline-flex; gap: 13px; align-items: center; }
.klarion-light .kl-dashboard .kl-source-dots i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; border: 1px solid #73859c; }
.klarion-light .kl-dashboard .kl-source-dots .active { border-color: #38bdf8; background: #38bdf8; }
.klarion-light .kl-dashboard .kl-volume { height: 5px; background: #334155; border-radius: 4px; overflow: hidden; }
.klarion-light .kl-dashboard .kl-volume i { display: block; height: 100%; background: #38bdf8; border-radius: inherit; }
.klarion-light .kl-dashboard button.kl-filter-reset { width: auto; height: auto; background: #263b56; border: 1px solid #47617d; border-radius: 6px; color: #d8ecff; font-size: 11px; padding: 8px 12px; cursor: pointer; box-shadow: none; }
.klarion-light .kl-dashboard .kl-certificate-table { overflow-x: auto; }
.klarion-light .kl-dashboard table { background: transparent; font-size: 11px; width: 100%; table-layout: fixed; border-collapse: collapse; }
.klarion-light .kl-dashboard th, .klarion-light .kl-dashboard td { color: #d6e3f5; border-bottom: 1px solid var(--report-line); padding: 14px 8px; min-width: 0; vertical-align: top; overflow-wrap: anywhere; }
.klarion-light .kl-dashboard th { color: #a8bbd4; background: #172337; font-size: 10px; font-weight: 600; }
.klarion-light .kl-dashboard th:nth-child(1) { width: 25%; }
.klarion-light .kl-dashboard th:nth-child(2) { width: 13%; }
.klarion-light .kl-dashboard th:nth-child(5) { width: 24%; }
.klarion-light .kl-dashboard td > strong { color: #55c2e8; font-size: 12px; }
.klarion-light .kl-dashboard .kl-source-label { display: block; margin-top: 6px; font-size: 10px; }
.klarion-light .kl-dashboard .kl-badge { display: block; width: fit-content; border-radius: 5px; padding: 3px 6px; font-size: 10px; margin-top: 8px; background: #94a3b81a; color: #cbd5e1; }
.klarion-light .kl-dashboard .kl-valid { color: #6ee7b7; background: #34d39914; }
.klarion-light .kl-dashboard .kl-expiring { color: #fcd34d; background: #fbbf2414; }
.klarion-light .kl-dashboard .kl-expired { color: #fda4af; background: #fb718514; }
.klarion-light .kl-dashboard .kl-future { color: #c4b5fd; background: #c4b5fd14; }
.klarion-light .kl-dashboard summary { cursor: pointer; color: #c6ddf6; font-size: 11px; padding: 7px 0; }
.klarion-light .kl-dashboard details p, .klarion-light .kl-dashboard code { font-size: 11px; color: #b2c3d9; overflow-wrap: anywhere; }
.klarion-light .kl-dashboard .kl-report-warning { padding: 12px 15px; border-left: 3px solid #fbbf24; background: #fbbf2412; color: #fde68a; font-size: 12px; border-radius: 5px; }
.klarion-light .kl-dashboard .kl-findings { padding-left: 18px; font-size: 12px; color: #fde68a; }
.klarion-light .kl-dashboard .kl-findings li { margin-bottom: 10px; overflow-wrap: anywhere; }
.klarion-light .kl-dashboard .kl-method { color: #b2c3d9; font-size: 11px; padding: 0 4px; }
.klarion-light .kl-dashboard .kl-method ul, .klarion-light .kl-dashboard .kl-unobserved ul { padding-left: 18px; overflow-wrap: anywhere; }
.klarion-light .kl-dashboard .kl-empty { color: #b2c3d9; padding-block: 12px; }
.klarion-light .kl-report.kl-dashboard .kl-panel h4 { font-size: 16px; line-height: 1.4; }
.klarion-light .kl-report.kl-dashboard .kl-charts h4 { min-height: 2.8em; }
.klarion-light .kl-report.kl-dashboard th { color: #a8bbd4; background: #172337; }
@media (max-width: 1050px) {
    .klarion-light .kl-dashboard .kl-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .klarion-light .kl-dashboard .kl-charts { grid-template-columns: 1fr; }
    .klarion-light .kl-dashboard .kl-chart-content { flex-direction: row; }
    .klarion-light .kl-dashboard .kl-legend { max-width: 320px; }
}
@media (max-width: 720px) {
    .klarion-light .kl-report.kl-dashboard { margin-inline: -12px; padding: 14px 10px; }
    .klarion-light .kl-dashboard .kl-panel { padding: 16px 12px; }
    .klarion-light .kl-dashboard .kl-metrics { gap: 8px; }
    .klarion-light .kl-dashboard .kl-metric { padding: 12px; }
    .klarion-light .kl-dashboard .kl-metric strong { font-size: 28px; }
    .klarion-light .kl-dashboard .kl-metric span { font-size: 11px; }
    .klarion-light .kl-dashboard .kl-donut { width: 100px; height: 100px; padding: 10px; }
    .klarion-light .kl-dashboard .kl-chart-content { gap: 12px; flex-wrap: wrap; }
    .klarion-light .kl-dashboard .kl-legend { flex: 1; min-width: 118px; }
    .klarion-light .kl-dashboard .kl-horizon { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; }
    .klarion-light .kl-dashboard .kl-horizon > div::before { left: 0; right: 0; }
    .klarion-light .kl-dashboard .kl-horizon > div:nth-child(odd)::before { left: 50%; }
    .klarion-light .kl-dashboard .kl-horizon > div:nth-child(even)::before { right: 50%; }
    .klarion-light .kl-dashboard .kl-matrix-head, .klarion-light .kl-dashboard button.kl-matrix-row { grid-template-columns: 48px minmax(15px, 1fr) 38px 64px; gap: 6px; padding-inline: 0; font-size: 10px; }
    .klarion-light .kl-dashboard table, .klarion-light .kl-dashboard tbody, .klarion-light .kl-dashboard tr, .klarion-light .kl-dashboard td { display: block; width: 100%; }
    .klarion-light .kl-dashboard thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .klarion-light .kl-dashboard tr { padding: 10px 0; border-top: 1px solid #51617a; }
    .klarion-light .kl-dashboard td { padding: 8px 0; border: 0; }
    .klarion-light .kl-dashboard td::before { content: attr(data-label); display: block; font-size: 10px; color: #a8bbd4; margin-bottom: 5px; }
}