.crux-panel { margin-top: 24px; }
.crux-selector { display: flex; width: fit-content; max-width: calc(100% - 52px); margin: 24px 26px 0; padding: 3px; gap: 3px; border: 1px solid var(--psi-line); border-radius: 7px; }
.crux-selector label { padding: 8px 16px; border-radius: 4px; font-size: 12px; line-height: 1.4; color: var(--psi-muted); cursor: pointer; }
.crux-selector input:checked+label { background: color-mix(in srgb, var(--psi-accent) 14%, transparent); color: var(--psi-ink); }
.crux-selector input:focus-visible+label { outline: 2px solid var(--psi-accent); outline-offset: 1px; }
.crux-device { padding: 24px 26px; }
.crux-device-desktop { display: none; }
.crux-panel:has(input[value="desktop"]:checked) .crux-device-mobile { display: none; }
.crux-panel:has(input[value="desktop"]:checked) .crux-device-desktop { display: block; }
.crux-context { display: flex; align-items: baseline; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin-bottom: 22px; }
.crux-context p { display: flex; flex-wrap: wrap; gap: 5px 10px; margin: 0; font-size: 11px; line-height: 1.6; color: var(--psi-muted); overflow-wrap: anywhere; }
.crux-context strong { color: var(--psi-ink); font-weight: 500; }
.crux-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.crux-metric { min-width: 0; padding: 22px 0 0; border-top: 1px solid var(--psi-line); }
.crux-metric h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 0; font-size: 13px; font-weight: 500; }
.crux-metric h3 span { font-size: 10px; color: var(--psi-muted); font-weight: 400; }
.crux-metric .crux-value { margin: 14px 0 10px; color: var(--psi-score-text); font: 400 28px/1.2 "Space Grotesk", sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -.5px; }
.crux-metric-missing .crux-value { font-size: 18px; letter-spacing: 0; }
.crux-rating { display: flex; gap: 7px; align-items: center; font-size: 11px; color: var(--psi-muted); margin: 0; }
.crux-rating i { width: 8px; height: 8px; background: var(--psi-score-color); }
.psi-rating-pass .crux-rating i { border-radius: 50%; }
.psi-rating-fail .crux-rating i { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.psi-rating-unrated .crux-rating i { height: 2px; }
.crux-distribution { display: flex; gap: 2px; height: 5px; overflow: hidden; border-radius: 2px; margin-top: 20px; }
.crux-distribution span { flex-basis: 0; min-width: 0; }
.crux-bin-0 { background: #0c6; }.crux-bin-1 { background: #fa3; }.crux-bin-2 { background: #f33; }
.crux-distribution-label { margin: 8px 0 0; font-size: 10px; color: var(--psi-muted); }
.crux-footnote { margin: 24px 0 0; font-size: 10px; color: var(--psi-muted); }
.crux-notice { color: var(--psi-muted); font-size: 11px; margin: 0 0 14px; }
.crux-empty { padding: 8px 0 12px; }
.crux-empty h3 { font-size: 14px; font-weight: 500; margin: 0 0 8px; }
.crux-empty p { color: var(--psi-muted); font-size: 12px; line-height: 1.6; margin: 0; max-width: 65ch; }
@media (max-width: 600px) {
    .crux-selector { margin: 20px 18px 0; max-width: calc(100% - 36px); }
    .crux-device { padding: 22px 18px; }
    .crux-metrics { grid-template-columns: 1fr; gap: 20px; }
    .crux-metric { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding-top: 18px; }
    .crux-metric h3 { align-self: center; font-size: 12px; }
    .crux-metric .crux-value { margin: 0; font-size: 24px; }
    .crux-metric-missing .crux-value { font-size: 13px; }
    .crux-rating, .crux-distribution, .crux-distribution-label { grid-column: 1 / -1; }
    .crux-distribution { margin-top: 7px; }
    .crux-distribution-label { margin-top: 0; }
}