/* ─────────────────────────────────────────────────────────────────────────────
   OpenVAS Reports – Frontend Styles
   ───────────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --ovr-critical:   #C0392B;
  --ovr-high:       #E67E22;
  --ovr-medium:     #D4A017;
  --ovr-low:        #27AE60;
  --ovr-critical-bg:#FDEDEC;
  --ovr-high-bg:    #FEF5EC;
  --ovr-medium-bg:  #FEFDE7;
  --ovr-low-bg:     #EAFAF1;
  --ovr-dark:       #0D1B2A;
  --ovr-navy:       #1B3A5C;
  --ovr-blue:       #2E6DA4;
  --ovr-light:      #EAF1FB;
  --ovr-border:     #DDE3EC;
  --ovr-text:       #1A1A2E;
  --ovr-muted:      #6B7280;
  --ovr-bg:         #F4F6F9;
  --ovr-white:      #FFFFFF;
  --ovr-radius:     8px;
  --ovr-shadow:     0 2px 12px rgba(13,27,42,.10);
  --ovr-shadow-lg:  0 8px 32px rgba(13,27,42,.16);
  font-family: 'Inter', system-ui, sans-serif;
}

/* ── Wrapper ──────────────────────────────────────────────────────────────── */
.ovr-wrap { max-width: 1200px; margin: 0 auto; padding: 24px 16px; color: var(--ovr-text); }
.ovr-report-wrap { padding-bottom: 64px; }

/* ── Back link ────────────────────────────────────────────────────────────── */
.ovr-back-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--ovr-blue); text-decoration: none; font-size: .875rem; font-weight: 500;
  margin-bottom: 20px; transition: color .2s;
}
.ovr-back-link:hover { color: var(--ovr-navy); text-decoration: underline; }

/* ── Page header ─────────────────────────────────────────────────────────── */
.ovr-page-header { margin-bottom: 28px; }
.ovr-page-header h2 { font-size: 1.75rem; font-weight: 700; color: var(--ovr-dark); margin: 0 0 6px; }
.ovr-page-header p  { color: var(--ovr-muted); margin: 0; }

/* ── Report header ───────────────────────────────────────────────────────── */
.ovr-report-header {
  background: var(--ovr-dark);
  border-radius: var(--ovr-radius);
  padding: 28px 32px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.ovr-report-title-block h1 {
  color: #fff; font-size: 1.5rem; font-weight: 700; margin: 0 0 8px; line-height: 1.3;
}
.ovr-network-badge {
  display: inline-block;
  background: rgba(255,255,255,.1);
  color: #90CAF9;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .8rem; padding: 3px 10px; border-radius: 20px; margin-bottom: 10px;
}
.ovr-report-meta { display: flex; gap: 16px; flex-wrap: wrap; }
.ovr-report-meta span { color: rgba(255,255,255,.65); font-size: .85rem; }

/* ── Download buttons ────────────────────────────────────────────────────── */
.ovr-report-downloads { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; }
.ovr-dl-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: 6px; font-size: .83rem; font-weight: 600;
  text-decoration: none; transition: all .2s; white-space: nowrap;
}
.ovr-dl-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.ovr-dl-pdf  { background: #E74C3C; color: #fff; }
.ovr-dl-pdf:hover  { background: #c0392b; color: #fff; }
.ovr-dl-csv  { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.2); }
.ovr-dl-csv:hover  { background: rgba(255,255,255,.22); color: #fff; }
.ovr-dl-xml  { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.2); }
.ovr-dl-xml:hover  { background: rgba(255,255,255,.22); color: #fff; }

/* ── Summary tiles ───────────────────────────────────────────────────────── */
.ovr-summary-tiles {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px;
}
.ovr-tile {
  border-radius: var(--ovr-radius); padding: 18px 16px 14px; text-align: center;
  box-shadow: var(--ovr-shadow); position: relative; overflow: hidden;
}
.ovr-tile::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
}
.ovr-tile-critical { background: var(--ovr-critical-bg); }
.ovr-tile-critical::before { background: var(--ovr-critical); }
.ovr-tile-high     { background: var(--ovr-high-bg); }
.ovr-tile-high::before     { background: var(--ovr-high); }
.ovr-tile-medium   { background: var(--ovr-medium-bg); }
.ovr-tile-medium::before   { background: var(--ovr-medium); }
.ovr-tile-low      { background: var(--ovr-low-bg); }
.ovr-tile-low::before      { background: var(--ovr-low); }

.ovr-tile-num { display: block; font-size: 2.2rem; font-weight: 700; line-height: 1; margin-bottom: 4px; }
.ovr-tile-critical .ovr-tile-num { color: var(--ovr-critical); }
.ovr-tile-high     .ovr-tile-num { color: var(--ovr-high); }
.ovr-tile-medium   .ovr-tile-num { color: var(--ovr-medium); }
.ovr-tile-low      .ovr-tile-num { color: var(--ovr-low); }
.ovr-tile-lbl { font-size: .78rem; font-weight: 600; color: var(--ovr-muted); text-transform: uppercase; letter-spacing: .05em; }

/* ── Legend bar ──────────────────────────────────────────────────────────── */
.ovr-legend-bar {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  background: var(--ovr-bg); border: 1px solid var(--ovr-border);
  border-radius: 6px; padding: 10px 16px; margin-bottom: 24px; font-size: .82rem;
}
.ovr-legend-title { font-weight: 600; color: var(--ovr-navy); }
.ovr-legend-item  { display: flex; align-items: center; gap: 6px; color: var(--ovr-muted); }
.ovr-dot-inline   { display: inline-block; width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.ovr-dot-red   { background: var(--ovr-critical); }
.ovr-dot-amber { background: var(--ovr-medium); }
.ovr-dot-green { background: var(--ovr-low); }

/* ── Section title ───────────────────────────────────────────────────────── */
.ovr-section-title {
  font-size: 1.15rem; font-weight: 700; color: var(--ovr-navy);
  margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--ovr-blue);
  display: inline-block;
}

/* ── Tables ──────────────────────────────────────────────────────────────── */
.ovr-table-wrap { overflow-x: auto; margin-bottom: 32px; border-radius: var(--ovr-radius); box-shadow: var(--ovr-shadow); }
.ovr-table {
  width: 100%; border-collapse: collapse; font-size: .88rem;
  background: var(--ovr-white);
}
.ovr-table thead tr { background: var(--ovr-dark); }
.ovr-table thead th {
  color: #fff; font-weight: 600; padding: 12px 14px; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .05em; text-align: left; white-space: nowrap;
}
.ovr-table tbody tr { border-bottom: 1px solid var(--ovr-border); transition: background .15s; }
.ovr-table tbody tr:hover { background: var(--ovr-light) !important; }
.ovr-table tbody td { padding: 11px 14px; vertical-align: middle; }
.ovr-th-center, .ovr-td-center { text-align: center !important; }
.ovr-td-right  { text-align: right !important; }

/* IP row coloring by highest severity */
.ovr-ip-row-critical { border-left: 3px solid var(--ovr-critical) !important; }
.ovr-ip-row-high     { border-left: 3px solid var(--ovr-high) !important; }
.ovr-ip-row-medium   { border-left: 3px solid var(--ovr-medium) !important; }
.ovr-ip-row-low      { border-left: 3px solid var(--ovr-low) !important; }

.ovr-ip-cell .ovr-hostname { display: block; font-size: .75rem; color: var(--ovr-muted); font-family: 'IBM Plex Mono', monospace; }

/* Count badges */
.ovr-cnt {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 22px; border-radius: 11px; font-weight: 700; font-size: .82rem; padding: 0 7px;
}
.ovr-cnt-critical { background: var(--ovr-critical-bg); color: var(--ovr-critical); }
.ovr-cnt-high     { background: var(--ovr-high-bg);     color: var(--ovr-high); }
.ovr-cnt-medium   { background: var(--ovr-medium-bg);   color: var(--ovr-medium); }
.ovr-cnt-low      { background: var(--ovr-low-bg);      color: var(--ovr-low); }
.ovr-cnt-zero     { color: #ccc; }

/* ── Traffic lights ──────────────────────────────────────────────────────── */
.ovr-tl {
  display: inline-flex; flex-direction: column; align-items: center; gap: 3px;
  background: #1a1a1a; border-radius: 10px; padding: 5px 6px;
}
.ovr-tl.ovr-tl-sm { gap: 2px; padding: 4px 5px; }
.ovr-dot {
  width: 12px; height: 12px; border-radius: 50%; background: #333; transition: background .2s;
}
.ovr-tl-sm .ovr-dot { width: 10px; height: 10px; }

/* Red active */
.ovr-tl-red   .ovr-dot-r { background: var(--ovr-critical); box-shadow: 0 0 6px var(--ovr-critical); }
.ovr-tl-red   .ovr-dot-a { background: #333; }
.ovr-tl-red   .ovr-dot-g { background: #333; }
/* Amber active */
.ovr-tl-amber .ovr-dot-r { background: #333; }
.ovr-tl-amber .ovr-dot-a { background: var(--ovr-medium); box-shadow: 0 0 6px var(--ovr-medium); }
.ovr-tl-amber .ovr-dot-g { background: #333; }
/* Green active */
.ovr-tl-green .ovr-dot-r { background: #333; }
.ovr-tl-green .ovr-dot-a { background: #333; }
.ovr-tl-green .ovr-dot-g { background: var(--ovr-low); box-shadow: 0 0 6px var(--ovr-low); }

/* ── Expand button ───────────────────────────────────────────────────────── */
.ovr-btn { display: inline-flex; align-items: center; gap: 5px; border: none; cursor: pointer; border-radius: 6px; font-weight: 600; text-decoration: none; transition: all .2s; }
.ovr-btn-primary { background: var(--ovr-blue); color: #fff; padding: 9px 18px; font-size: .88rem; }
.ovr-btn-primary:hover { background: var(--ovr-navy); color: #fff; }
.ovr-btn-sm { background: var(--ovr-light); color: var(--ovr-navy); padding: 6px 12px; font-size: .8rem; }
.ovr-btn-sm:hover { background: var(--ovr-border); }
.ovr-arrow { font-size: .7rem; transition: transform .2s; }
.ovr-btn-sm.ovr-open .ovr-arrow { transform: rotate(180deg); }

/* ── IP detail panel ─────────────────────────────────────────────────────── */
.ovr-ip-detail-row td { padding: 0 !important; }
.ovr-ip-detail-panel { background: #F8FAFD; border-top: 2px solid var(--ovr-blue); padding: 16px 20px; }
.ovr-ip-detail-loading { text-align: center; padding: 20px; color: var(--ovr-muted); font-size: .875rem; }

.ovr-detail-table { width: 100%; border-collapse: collapse; font-size: .83rem; background: var(--ovr-white); border-radius: 6px; overflow: hidden; }
.ovr-detail-table thead th {
  background: var(--ovr-navy); color: #fff; padding: 9px 12px;
  font-size: .75rem; text-transform: uppercase; letter-spacing: .04em;
  text-align: left; white-space: nowrap;
}
.ovr-detail-table tbody td { padding: 10px 12px; vertical-align: top; border-bottom: 1px solid var(--ovr-border); }
.ovr-detail-row:nth-child(even) { background: var(--ovr-bg); }

.ovr-row-critical { border-left: 3px solid var(--ovr-critical); }
.ovr-row-high     { border-left: 3px solid var(--ovr-high); }
.ovr-row-medium   { border-left: 3px solid var(--ovr-medium); }
.ovr-row-low      { border-left: 3px solid var(--ovr-low); }

/* Vuln name */
.ovr-vuln-name { font-weight: 600; color: var(--ovr-text); margin-bottom: 4px; line-height: 1.4; }
.ovr-vuln-details { margin-top: 5px; }
.ovr-vuln-details summary { font-size: .78rem; color: var(--ovr-blue); cursor: pointer; font-weight: 500; }
.ovr-vuln-details summary:hover { text-decoration: underline; }
.ovr-vuln-text { margin-top: 6px; padding: 8px 10px; background: var(--ovr-bg); border-radius: 4px; font-size: .78rem; line-height: 1.5; color: var(--ovr-muted); white-space: pre-wrap; word-break: break-word; }
.ovr-solution-text { background: #EAFAF1; color: #1a6639; }
.ovr-cves { margin-top: 5px; font-size: .75rem; color: var(--ovr-muted); }
.ovr-cves code { font-family: 'IBM Plex Mono', monospace; color: var(--ovr-critical); font-size: .72rem; }

/* CVSS display */
.ovr-cvss-score { display: inline-flex; align-items: center; gap: 5px; }
.ovr-cvss-num { font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: .95rem; }
.ovr-cvss-critical .ovr-cvss-num { color: var(--ovr-critical); }
.ovr-cvss-high     .ovr-cvss-num { color: var(--ovr-high); }
.ovr-cvss-medium   .ovr-cvss-num { color: var(--ovr-medium); }
.ovr-cvss-low      .ovr-cvss-num { color: var(--ovr-low); }
.ovr-cvss-bar-wrap { width: 40px; height: 5px; background: var(--ovr-border); border-radius: 3px; overflow: hidden; }
.ovr-cvss-bar { height: 100%; border-radius: 3px; background: currentColor; }
.ovr-cvss-critical .ovr-cvss-bar { background: var(--ovr-critical); }
.ovr-cvss-high     .ovr-cvss-bar { background: var(--ovr-high); }
.ovr-cvss-medium   .ovr-cvss-bar { background: var(--ovr-medium); }
.ovr-cvss-low      .ovr-cvss-bar { background: var(--ovr-low); }
.ovr-cvss-max { font-size: .7rem; color: var(--ovr-muted); }

/* Severity badge */
.ovr-sev-badge {
  display: inline-block; padding: 3px 9px; border-radius: 12px; font-weight: 700;
  font-size: .73rem; text-transform: uppercase; letter-spacing: .05em;
}
.ovr-sev-critical { background: var(--ovr-critical-bg); color: var(--ovr-critical); }
.ovr-sev-high     { background: var(--ovr-high-bg);     color: var(--ovr-high); }
.ovr-sev-medium   { background: var(--ovr-medium-bg);   color: var(--ovr-medium); }
.ovr-sev-low      { background: var(--ovr-low-bg);      color: var(--ovr-low); }

.ovr-soltype { font-size: .78rem; color: var(--ovr-muted); font-style: italic; }
.ovr-num { font-family: 'IBM Plex Mono', monospace; font-size: .8rem; color: var(--ovr-muted); }

/* ── Report cards (list view) ─────────────────────────────────────────────── */
.ovr-report-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 20px; }
.ovr-report-card {
  background: var(--ovr-white); border-radius: var(--ovr-radius); box-shadow: var(--ovr-shadow);
  overflow: hidden; transition: box-shadow .2s, transform .2s;
  border-top: 4px solid var(--ovr-border);
}
.ovr-report-card:hover { box-shadow: var(--ovr-shadow-lg); transform: translateY(-2px); }
.ovr-card-critical { border-top-color: var(--ovr-critical); }
.ovr-card-high     { border-top-color: var(--ovr-high); }
.ovr-card-medium   { border-top-color: var(--ovr-medium); }
.ovr-card-low      { border-top-color: var(--ovr-low); }

.ovr-card-top { display: flex; align-items: flex-start; gap: 14px; padding: 18px 18px 12px; }
.ovr-traffic-light { display: flex; flex-direction: column; align-items: center; gap: 4px; background: #1a1a1a; border-radius: 10px; padding: 7px 8px; flex-shrink: 0; }
.ovr-tl-dot { width: 13px; height: 13px; border-radius: 50%; background: #333; }
.ovr-tl-critical .ovr-tl-dot:nth-child(1),
.ovr-tl-high     .ovr-tl-dot:nth-child(1) { background: var(--ovr-critical); box-shadow: 0 0 8px var(--ovr-critical); }
.ovr-tl-medium   .ovr-tl-dot:nth-child(2) { background: var(--ovr-medium);  box-shadow: 0 0 8px var(--ovr-medium); }
.ovr-tl-low      .ovr-tl-dot:nth-child(3) { background: var(--ovr-low);     box-shadow: 0 0 8px var(--ovr-low); }

.ovr-card-meta h3 { font-size: 1rem; font-weight: 700; margin: 0 0 5px; color: var(--ovr-dark); }
.ovr-network { font-family: 'IBM Plex Mono', monospace; font-size: .75rem; color: var(--ovr-blue); background: var(--ovr-light); padding: 2px 7px; border-radius: 10px; display: inline-block; margin-bottom: 5px; }
.ovr-card-date { font-size: .78rem; color: var(--ovr-muted); }

.ovr-card-stats { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--ovr-border); }
.ovr-stat { text-align: center; padding: 10px 6px; }
.ovr-stat + .ovr-stat { border-left: 1px solid var(--ovr-border); }
.ovr-stat-num { display: block; font-weight: 700; font-size: 1.3rem; line-height: 1; }
.ovr-stat-lbl { display: block; font-size: .68rem; color: var(--ovr-muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
.ovr-stat-critical .ovr-stat-num { color: var(--ovr-critical); }
.ovr-stat-high     .ovr-stat-num { color: var(--ovr-high); }
.ovr-stat-medium   .ovr-stat-num { color: var(--ovr-medium); }
.ovr-stat-low      .ovr-stat-num { color: var(--ovr-low); }

.ovr-card-footer { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; border-top: 1px solid var(--ovr-border); background: var(--ovr-bg); }
.ovr-hosts-count { font-size: .8rem; color: var(--ovr-muted); }

/* ── Login notice ─────────────────────────────────────────────────────────── */
.ovr-login-notice {
  background: var(--ovr-light); border: 1px solid var(--ovr-blue); border-radius: var(--ovr-radius);
  padding: 20px 24px; text-align: center;
}
.ovr-login-notice a { color: var(--ovr-blue); font-weight: 600; }

/* ── Notes ───────────────────────────────────────────────────────────────── */
.ovr-notes { background: var(--ovr-bg); border-left: 4px solid var(--ovr-blue); border-radius: 0 var(--ovr-radius) var(--ovr-radius) 0; padding: 16px 20px; margin-top: 24px; }
.ovr-notes h3 { margin: 0 0 8px; color: var(--ovr-navy); font-size: .95rem; }
.ovr-notes p  { margin: 0; color: var(--ovr-muted); font-size: .875rem; }

/* ── Empty state ─────────────────────────────────────────────────────────── */
.ovr-empty { text-align: center; padding: 60px 20px; }
.ovr-empty-icon { font-size: 3rem; margin-bottom: 12px; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .ovr-summary-tiles { grid-template-columns: repeat(2,1fr); }
  .ovr-report-header { flex-direction: column; }
  .ovr-report-cards  { grid-template-columns: 1fr; }
  .ovr-legend-bar    { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
  .ovr-summary-tiles { grid-template-columns: repeat(2,1fr); }
  .ovr-table thead { display: none; }
}

/* ── v2 Frontend additions ──────────────────────────────────────────────── */

/* Compare bar */
.ovr-compare-bar {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:var(--ovr-light); border:1px solid var(--ovr-border);
  border-radius:var(--ovr-radius); padding:12px 16px; margin-bottom:20px;
}
.ovr-compare-bar-label { font-weight:600; color:var(--ovr-navy); font-size:.88rem; white-space:nowrap; }
.ovr-compare-bar select { flex:1; min-width:220px; padding:6px 10px; border:1px solid var(--ovr-border); border-radius:5px; font-size:.88rem; }
#ovrCompareResult { margin-bottom:24px; }

/* Risk overview */
.ovr-risk-overview { margin-bottom:20px; }
.ovr-risk-box { display:flex; align-items:center; gap:14px; border-radius:var(--ovr-radius); padding:14px 20px; }
.ovr-risk-improving { background:#EAFAF1; border:1px solid #A9DFBF; }
.ovr-risk-worsening { background:#FDEDEC; border:1px solid #F5B7B1; }
.ovr-risk-stable    { background:var(--ovr-bg); border:1px solid var(--ovr-border); }
.ovr-risk-icon { font-size:1.8rem; }
.ovr-risk-text { display:flex; flex-direction:column; gap:2px; }
.ovr-risk-text strong { font-size:.95rem; color:var(--ovr-dark); }
.ovr-risk-text span   { font-size:.88rem; color:var(--ovr-text); }
.ovr-risk-text small  { font-size:.78rem; color:var(--ovr-muted); }

/* Charts */
.ovr-chart-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:16px 0 28px; }
.ovr-chart-card { background:var(--ovr-white); border:1px solid var(--ovr-border); border-radius:var(--ovr-radius); padding:20px; box-shadow:var(--ovr-shadow); }
.ovr-chart-card h3 { font-size:.95rem; color:var(--ovr-navy); margin:0 0 14px; }
@media(max-width:768px){ .ovr-chart-grid { grid-template-columns:1fr; } }

/* History timeline */
.ovr-history-timeline { display:flex; flex-direction:column; gap:12px; margin-bottom:32px; }
.ovr-history-item {
  background:var(--ovr-white); border:1px solid var(--ovr-border); border-radius:var(--ovr-radius);
  padding:14px 16px; display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap;
  box-shadow:var(--ovr-shadow);
}
.ovr-history-dates { display:flex; align-items:center; gap:6px; font-family:'IBM Plex Mono',monospace; font-size:.78rem; color:var(--ovr-muted); white-space:nowrap; min-width:200px; }
.ovr-hdate-to { color:var(--ovr-navy); font-weight:600; }
.ovr-harrow   { color:var(--ovr-border); }
.ovr-history-body { flex:1; }
.ovr-history-titles { display:flex; align-items:center; gap:8px; font-size:.85rem; color:var(--ovr-text); margin-bottom:8px; flex-wrap:wrap; }
.ovr-history-pills { display:flex; gap:6px; flex-wrap:wrap; }

/* Pills */
.ovr-pill { display:inline-block; padding:3px 9px; border-radius:12px; font-size:.75rem; font-weight:600; }
.ovr-pill-new       { background:#FEF5EC; color:#E67E22; }
.ovr-pill-resolved  { background:#EAFAF1; color:#27AE60; }
.ovr-pill-persist   { background:var(--ovr-bg); color:var(--ovr-muted); }
.ovr-pill-improved  { background:#EAF3FB; color:#2980B9; }
.ovr-pill-worsened  { background:#FDEDEC; color:#C0392B; }
.ovr-pill-risk      { background:var(--ovr-bg); color:var(--ovr-muted); }
.ovr-pill-risk-good { background:#EAFAF1; color:#27AE60; }
.ovr-pill-risk-bad  { background:#FDEDEC; color:#C0392B; }

/* Compare panel */
.ovr-compare-panel { background:#F0F5FF; border:2px solid var(--ovr-blue); border-radius:0 0 var(--ovr-radius) var(--ovr-radius); overflow:hidden; }
.ovr-compare-panel-inner { padding:20px; }
.ovr-compare-header { display:flex; align-items:center; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
.ovr-compare-scan { background:var(--ovr-white); border-radius:var(--ovr-radius); padding:14px 18px; flex:1; min-width:180px; display:flex; flex-direction:column; gap:3px; border:1px solid var(--ovr-border); }
.ovr-compare-scan-lbl { font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ovr-muted); }
.ovr-compare-old { border-top:3px solid var(--ovr-muted); }
.ovr-compare-new { border-top:3px solid var(--ovr-blue); }
.ovr-compare-arrow-block { text-align:center; }
.ovr-compare-arrow { font-size:1.5rem; color:var(--ovr-border); }
.ovr-risk-score  { font-size:.78rem; color:var(--ovr-muted); margin-top:4px; }
.ovr-risk-delta-badge { display:inline-block; padding:5px 12px; border-radius:12px; font-weight:700; font-size:.88rem; margin-top:6px; }
.ovr-delta-good    { background:#EAFAF1; color:#27AE60; }
.ovr-delta-bad     { background:#FDEDEC; color:#C0392B; }
.ovr-delta-neutral { background:var(--ovr-bg); color:var(--ovr-muted); }

/* Compare summary boxes */
.ovr-compare-summary { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:24px; }
.ovr-cs-box { flex:1; min-width:90px; text-align:center; border-radius:var(--ovr-radius); padding:12px 8px; }
.ovr-cs-box span { display:block; font-weight:700; font-size:1.8rem; line-height:1; margin-bottom:4px; }
.ovr-cs-box { font-size:.78rem; color:var(--ovr-muted); }
.ovr-cs-new      { background:#FEF5EC; } .ovr-cs-new span      { color:#E67E22; }
.ovr-cs-resolved { background:#EAFAF1; } .ovr-cs-resolved span { color:#27AE60; }
.ovr-cs-persist  { background:var(--ovr-bg); } .ovr-cs-persist span  { color:var(--ovr-muted); }
.ovr-cs-improved { background:#EAF3FB; } .ovr-cs-improved span { color:#2980B9; }
.ovr-cs-worsened { background:#FDEDEC; } .ovr-cs-worsened span { color:#C0392B; }

/* IP compare groups */
.ovr-compare-ip { background:var(--ovr-white); border:1px solid var(--ovr-border); border-radius:var(--ovr-radius); margin-bottom:14px; overflow:hidden; }
.ovr-compare-ip-header { display:flex; align-items:center; gap:8px; padding:10px 14px; background:var(--ovr-bg); flex-wrap:wrap; }
.ovr-compare-ip-header strong { font-family:'IBM Plex Mono',monospace; font-size:.9rem; color:var(--ovr-navy); }
.ovr-compare-group { border-top:1px solid var(--ovr-border); }
.ovr-compare-group-title { padding:8px 14px; font-weight:600; font-size:.82rem; }
.ovr-group-new      { background:#FEF5EC; color:#E67E22; }
.ovr-group-resolved { background:#EAFAF1; color:#27AE60; }
.ovr-group-changed  { background:#EAF3FB; color:#2980B9; }
.ovr-resolved-name  { text-decoration:line-through; opacity:.65; }

/* Delta badge */
.ovr-delta-badge { display:inline-block; padding:2px 8px; border-radius:10px; font-weight:700; font-size:.8rem; }