/* ============================================================
   站擎 · 诊断卡样式
   ============================================================ */

.zq-diag {
  margin-top: 20px;
  background: #FFFFFF;
  border: 1px solid #E4EDE7;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 16px -8px rgba(15,26,20,0.08);
}

.zq-diag-head {
  padding: 24px 28px;
  border-bottom: 1px solid #E4EDE7;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.zq-diag-score {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 700;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  letter-spacing: -0.02em;
  box-shadow: 0 6px 20px -6px currentColor;
}
.zq-diag-score.excellent { background: linear-gradient(135deg, #22C55E, #15803D); }
.zq-diag-score.good      { background: linear-gradient(135deg, #22C55E, #16A34A); }
.zq-diag-score.warning   { background: linear-gradient(135deg, #F59E0B, #D97706); }
.zq-diag-score.poor      { background: linear-gradient(135deg, #F97316, #EA580C); }
.zq-diag-score.critical  { background: linear-gradient(135deg, #EF4444, #DC2626); }

.zq-diag-summary {
  flex: 1;
  min-width: 0;
}
.zq-diag-summary-title {
  font-size: 18px;
  font-weight: 700;
  color: #0F1A14;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
  line-height: 1.35;
}
.zq-diag-summary-sub {
  font-size: 13px;
  color: #55665C;
}

.zq-diag-body {
  padding: 0 28px 24px;
}

.zq-diag-section {
  margin-top: 24px;
}
.zq-diag-section-title {
  font-size: 11.5px;
  font-weight: 700;
  color: #8A968D;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.zq-diag-section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #E4EDE7;
}

.zq-finding {
  padding: 14px 16px;
  border-radius: 10px;
  border-left: 3px solid;
  margin-bottom: 10px;
  background: #FBFDFC;
}
.zq-finding:last-child { margin-bottom: 0; }
.zq-finding.sev-info     { border-left-color: #94A3B8; background: #F8FAFC; }
.zq-finding.sev-low      { border-left-color: #22C55E; background: #F0FDF4; }
.zq-finding.sev-medium   { border-left-color: #F59E0B; background: #FFFBEB; }
.zq-finding.sev-high     { border-left-color: #EA580C; background: #FFF7ED; }
.zq-finding.sev-critical { border-left-color: #DC2626; background: #FEF2F2; }

.zq-finding-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.zq-finding-title {
  font-size: 14px;
  font-weight: 600;
  color: #0F1A14;
  letter-spacing: -0.01em;
}
.zq-sev-badge {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.zq-sev-badge.info     { background: #E2E8F0; color: #475569; }
.zq-sev-badge.low      { background: #DCFCE7; color: #15803D; }
.zq-sev-badge.medium   { background: #FEF3C7; color: #B45309; }
.zq-sev-badge.high     { background: #FFEDD5; color: #C2410C; }
.zq-sev-badge.critical { background: #FEE2E2; color: #B91C1C; }
.zq-sev-badge.cat      { background: #EFF6FF; color: #2563EB; }

.zq-finding-detail {
  font-size: 13px;
  color: #55665C;
  line-height: 1.7;
}
.zq-finding-evidence {
  margin-top: 8px;
  padding: 6px 10px;
  background: rgba(15,26,20,0.04);
  border-radius: 6px;
  font-family: ui-monospace, monospace;
  font-size: 11.5px;
  color: #8A968D;
}

.zq-impact {
  padding: 12px 16px;
  background: #FFF7ED;
  border-left: 3px solid #F97316;
  border-radius: 10px;
  margin-bottom: 8px;
}
.zq-impact:last-child { margin-bottom: 0; }
.zq-impact-area {
  font-size: 12px;
  font-weight: 700;
  color: #C2410C;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.zq-impact-desc {
  font-size: 13px;
  color: #0F1A14;
  line-height: 1.65;
}

.zq-solution {
  padding: 16px 18px;
  border: 1px solid #E4EDE7;
  border-radius: 12px;
  margin-bottom: 12px;
  background: #FFFFFF;
}
.zq-solution:last-child { margin-bottom: 0; }
.zq-solution.p1 { border-color: #FCA5A5; background: #FEF2F2; }
.zq-solution.p2 { border-color: #FDBA74; background: #FFF7ED; }

.zq-solution-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 6px;
}
.zq-solution-priority {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #0F1A14;
  color: #FFFFFF;
  font-size: 11.5px;
  font-weight: 700;
  margin-top: 1px;
}
.zq-solution.p1 .zq-solution-priority { background: #DC2626; }
.zq-solution.p2 .zq-solution-priority { background: #EA580C; }

.zq-solution-title {
  font-size: 14.5px;
  font-weight: 700;
  color: #0F1A14;
  letter-spacing: -0.01em;
  line-height: 1.35;
}
.zq-solution-meta {
  display: flex;
  gap: 6px;
  margin: 6px 0 10px;
  flex-wrap: wrap;
}
.zq-meta-tag {
  font-size: 10.5px;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.zq-meta-tag.effort-easy   { background: #DCFCE7; color: #15803D; }
.zq-meta-tag.effort-medium { background: #FEF3C7; color: #B45309; }
.zq-meta-tag.effort-hard   { background: #FEE2E2; color: #B91C1C; }
.zq-meta-tag.impact-low    { background: #EFF6FF; color: #2563EB; }
.zq-meta-tag.impact-medium { background: #EDE9FE; color: #6D28D9; }
.zq-meta-tag.impact-high   { background: #FCE7F3; color: #BE185D; }

.zq-solution-desc {
  font-size: 13px;
  color: #55665C;
  line-height: 1.7;
  margin-bottom: 10px;
}

.zq-steps-title {
  font-size: 11.5px;
  font-weight: 700;
  color: #8A968D;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 6px;
}
.zq-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: step;
}
.zq-steps li {
  position: relative;
  padding: 6px 0 6px 30px;
  font-size: 13px;
  color: #0F1A14;
  line-height: 1.7;
  counter-increment: step;
  border-bottom: 1px dashed #E4EDE7;
}
.zq-steps li:last-child { border-bottom: none; }
.zq-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 6px;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: #F1F7F3;
  color: #15803D;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.zq-steps li code {
  background: #0F1A14;
  color: #A7F3C2;
  padding: 1px 6px;
  border-radius: 4px;
  font-family: ui-monospace, monospace;
  font-size: 0.86em;
}

.zq-solution-ref {
  display: inline-block;
  margin-top: 10px;
  font-size: 12px;
  color: #15803D;
  text-decoration: none;
  border-bottom: 1px solid rgba(21,128,61,0.3);
}
.zq-solution-ref:hover { border-bottom-color: #15803D; }

.zq-raw {
  margin-top: 24px;
  border-top: 1px solid #E4EDE7;
  padding-top: 16px;
}
.zq-raw summary {
  cursor: pointer;
  font-size: 12.5px;
  color: #8A968D;
  padding: 6px 0;
  user-select: none;
  list-style: none;
}
.zq-raw summary::-webkit-details-marker { display: none; }
.zq-raw summary::before {
  content: '▸ ';
  display: inline-block;
  transition: transform 0.2s;
}
.zq-raw[open] summary::before {
  content: '▾ ';
}
.zq-raw summary:hover { color: #15803D; }
.zq-raw pre {
  margin-top: 8px;
  padding: 12px 16px;
  background: #0F1A14;
  color: #A7F3C2;
  border-radius: 8px;
  font-size: 11.5px;
  line-height: 1.6;
  overflow-x: auto;
  font-family: ui-monospace, monospace;
  max-height: 400px;
}