.recon-page {
    --recon-border: color-mix(in srgb, var(--qa-border, #303743) 86%, transparent);
    --recon-panel: color-mix(in srgb, var(--qa-surface, #151a21) 94%, transparent);
    max-width: 1680px;
    margin: 0 auto;
    padding: 28px 30px 70px;
}

.recon-hero { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; margin-bottom: 24px; }
.recon-kicker, .recon-section-heading p { margin: 0 0 5px; color: #34c6c2; font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.recon-hero h1 { margin: 0; font-size: clamp(28px, 4vw, 44px); font-weight: 800; }
.recon-lead { margin: 8px 0 0; color: var(--qa-muted, #9ea8b7); max-width: 760px; }
.recon-source-rule { display: flex; gap: 11px; align-items: flex-start; max-width: 390px; padding: 14px 16px; border: 1px solid var(--recon-border); border-radius: 12px; background: var(--recon-panel); color: var(--qa-muted, #b5bdc9); font-size: 13px; }
.recon-source-rule i { color: #34c6c2; font-size: 18px; }

.recon-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; padding: 18px; border: 1px solid var(--recon-border); border-radius: 14px; background: var(--recon-panel); }
.recon-field { display: grid; gap: 6px; min-width: 190px; }
.recon-field-group { min-width: 250px; }
.recon-field-batch { min-width: min(440px, 100%); flex: 1; }
.recon-field label { color: var(--qa-muted, #aab3c0); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.recon-field input, .recon-field select { height: 42px; padding: 0 12px; border: 1px solid var(--recon-border); border-radius: 8px; background: var(--qa-input-bg, #0e1319); color: inherit; }
.recon-run, .recon-export { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 42px; padding: 0 18px; border: 0; border-radius: 8px; font-weight: 750; text-decoration: none; }
.recon-run { background: #2577eb; color: #fff; }
.recon-export { border: 1px solid var(--recon-border); background: transparent; color: inherit; }

.recon-groups { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 14px 0 24px; }
.recon-group-card { display: grid; gap: 4px; min-height: 88px; padding: 14px; border: 1px solid var(--recon-border); border-radius: 10px; background: var(--recon-panel); color: inherit; text-decoration: none; }
.recon-group-card span { color: var(--qa-muted, #9ea8b7); font-size: 12px; line-height: 1.35; }
.recon-group-card.is-active { border-color: #34c6c2; box-shadow: inset 0 0 0 1px #34c6c2; }

.recon-alert, .recon-empty { margin-top: 28px; border: 1px solid var(--recon-border); border-radius: 14px; background: var(--recon-panel); }
.recon-alert { display: flex; gap: 13px; padding: 18px; }
.recon-alert i { color: #ff646f; font-size: 22px; }
.recon-alert div { display: grid; gap: 3px; }
.recon-empty { padding: 70px 24px; text-align: center; color: var(--qa-muted, #9ea8b7); }
.recon-empty i { display: block; margin-bottom: 12px; color: #34c6c2; font-size: 34px; }
.recon-empty h2 { color: inherit; margin: 0 0 7px; }

.recon-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 22px 0; }
.recon-stat { padding: 16px; border: 1px solid var(--recon-border); border-top: 3px solid #6d7888; border-radius: 10px; background: var(--recon-panel); }
.recon-stat span { display: block; color: var(--qa-muted, #9ea8b7); font-size: 12px; }
.recon-stat strong { display: block; margin-top: 5px; font-size: 25px; }
.recon-stat-critical { border-top-color: #ff4d5d; }.recon-stat-high { border-top-color: #ff9d3d; }.recon-stat-medium { border-top-color: #f1c84b; }.recon-stat-pass { border-top-color: #3ecf8e; }

.recon-coverage, .recon-results { margin-top: 28px; }
.recon-section-heading { display: flex; justify-content: space-between; gap: 16px; align-items: end; margin-bottom: 12px; }
.recon-section-heading h2 { margin: 0; font-size: 22px; }
.recon-section-heading > span { color: var(--qa-muted, #9ea8b7); font-size: 12px; }
.recon-coverage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.recon-coverage-grid article { padding: 15px; border: 1px solid var(--recon-border); border-radius: 10px; background: var(--recon-panel); }
.recon-coverage-grid article > span, .recon-coverage-grid article > small { color: var(--qa-muted, #9ea8b7); font-size: 12px; }
.recon-coverage-grid strong { display: block; margin: 4px 0 9px; font-size: 22px; }.recon-coverage-grid strong small { font-size: 13px; font-weight: 500; }
.recon-progress { height: 5px; margin-bottom: 7px; overflow: hidden; border-radius: 10px; background: #303742; }.recon-progress span { display: block; height: 100%; background: #34c6c2; }

.recon-report { margin-bottom: 9px; border: 1px solid var(--recon-border); border-left: 4px solid #6d7888; border-radius: 10px; background: var(--recon-panel); overflow: hidden; }
.recon-report.severity-critical { border-left-color: #ff4d5d; }.recon-report.severity-high { border-left-color: #ff9d3d; }.recon-report.severity-medium { border-left-color: #f1c84b; }
.recon-report summary { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none; }.recon-report summary::-webkit-details-marker { display: none; }
.recon-severity { min-width: 66px; font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.recon-report-title { display: grid; gap: 2px; flex: 1; }.recon-report-title small { color: var(--qa-muted, #9ea8b7); font-weight: 400; }
.recon-count { min-width: 34px; padding: 4px 9px; border-radius: 999px; background: #ff4d5d; color: #fff; text-align: center; font-weight: 800; }
.recon-pass { color: #3ecf8e; font-weight: 750; }
.recon-table-wrap { overflow-x: auto; border-top: 1px solid var(--recon-border); }
.recon-table { width: 100%; min-width: 1050px; border-collapse: collapse; font-size: 12px; }
.recon-table th { padding: 9px 11px; background: color-mix(in srgb, var(--recon-panel) 80%, #000); color: #34c6c2; text-align: left; text-transform: uppercase; letter-spacing: .05em; }
.recon-table td { max-width: 310px; padding: 9px 11px; border-top: 1px solid var(--recon-border); vertical-align: top; overflow-wrap: anywhere; }
.recon-key { white-space: nowrap; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.recon-truncated, .recon-report-empty { margin: 0; padding: 12px 16px; color: var(--qa-muted, #9ea8b7); font-size: 12px; }

@media (max-width: 1000px) { .recon-groups { grid-template-columns: repeat(2, 1fr); }.recon-summary { grid-template-columns: repeat(3, 1fr); }.recon-hero { display: grid; } }
@media (max-width: 620px) { .recon-page { padding: 20px 14px 60px; }.recon-groups, .recon-summary { grid-template-columns: 1fr; }.recon-field, .recon-field-group, .recon-field-batch, .recon-run, .recon-export { width: 100%; min-width: 0; }.recon-section-heading { align-items: flex-start; flex-direction: column; } }

@media print { .qa-topbar, .qa-theme-toggle, .recon-controls, .recon-groups, .recon-export { display: none !important; }.recon-page { max-width: none; padding: 0; }.recon-report { break-inside: avoid; }.recon-report:not([open]) > *:not(summary) { display: block; } }