.vrm-workspace-shell {
  --vrm-bg: #0a1220;
  --vrm-surface: #111b2f;
  --vrm-surface-soft: #162238;
  --vrm-surface-alt: #1a2940;
  --vrm-border: rgba(62, 103, 155, 0.28);
  --vrm-border-strong: rgba(76, 129, 190, 0.42);
  --vrm-text: #edf3ff;
  --vrm-text-soft: #94a8c7;
  --vrm-text-muted: #8a9fc0;
  --vrm-cyan: #3ec8ff;
  --vrm-blue: #47a7ff;
  --vrm-magenta: #ee3f8f;
  --vrm-gold: #f0b429;
  --vrm-green: #18d39d;
  --vrm-danger: #ff5d77;
  width: min(1680px, 100%);
  margin: 0;
  padding: 14px 18px 24px 20px;
  color: var(--vrm-text);
}

.vrm-workspace-shell .btn-gradient {
  border-color: rgba(120, 179, 255, 0.45);
  background: linear-gradient(90deg, rgba(65, 176, 255, 0.9), rgba(224, 57, 160, 0.95));
  color: #f8fbff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04) inset, 0 10px 28px rgba(69, 159, 255, 0.18);
}

.vrm-workspace-command,
.vrm-kpi-strip,
.vrm-workspace-card,
.vendor-section-card,
.vrm-workflow-nav {
  border: 1px solid var(--vrm-border);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(15, 24, 40, 0.96), rgba(13, 21, 35, 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.vrm-workspace-command,
.vrm-kpi-strip,
.vrm-workflow-nav,
.vrm-workspace-grid {
  margin-bottom: 14px;
}

.vrm-workspace-command {
  padding: 18px 20px 20px;
}

.vrm-workspace-topbar,
.vendor-section-heading,
.vendor-actions,
.vrm-workspace-header,
.vrm-rail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

.vrm-workspace-backlink {
  color: var(--vrm-cyan);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.vrm-workspace-topbar-actions,
.vrm-workspace-header-actions,
.vrm-workspace-chip-row,
.vendor-row-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.vrm-requirements-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.vrm-requirement-card,
.vrm-mini-card,
.vrm-flag-card,
.vrm-snapshot-card,
.vendor-activity-item {
  border: 1px solid rgba(67, 104, 156, 0.3);
  border-radius: 13px;
  background: rgba(17, 28, 45, 0.92);
}

.vrm-requirement-card {
  min-width: 0;
  padding: 14px 16px;
}

.vrm-requirement-label,
.vrm-kpi-label,
.vrm-workflow-step,
.vrm-section-kicker,
.vrm-mini-label {
  color: var(--vrm-text-soft);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vrm-requirement-card strong,
.vrm-mini-card strong,
.vrm-snapshot-card strong,
.vrm-renewal-value,
.vrm-readiness-score {
  display: block;
  margin-top: 6px;
  color: #f8fbff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}

.vrm-requirement-meta,
.vendor-section-copy,
.vrm-workflow-meta,
.vrm-snapshot-narrative,
.vendor-muted,
.vendor-activity-meta,
.vendor-activity-detail {
  color: var(--vrm-text-soft);
}

.vrm-requirement-meta {
  display: block;
  margin-top: 6px;
  font-size: 12px;
}

.vrm-workspace-header {
  padding-top: 4px;
}

.vrm-workspace-brand {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
}

.vrm-workspace-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(65, 176, 255, 0.92), rgba(145, 83, 255, 0.88));
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.08em;
  box-shadow: 0 14px 28px rgba(67, 117, 255, 0.28);
}

.vrm-workspace-titleblock {
  min-width: 0;
}

.vrm-workspace-kicker {
  margin: 0 0 4px;
  color: var(--vrm-cyan);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vrm-workspace-heading-row h1 {
  margin: 0;
  font-size: 2rem;
  line-height: 1.1;
}

.vrm-workspace-subtitle {
  margin: 8px 0 0;
  max-width: 880px;
  color: var(--vrm-text-soft);
  font-size: 14px;
  line-height: 1.55;
}

.vrm-status-pill,
.vrm-inline-count,
.vrm-flag-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid rgba(86, 121, 170, 0.34);
  border-radius: 999px;
  background: rgba(15, 25, 42, 0.9);
  color: #edf3ff;
  font-size: 12px;
  font-weight: 700;
}

.tone-neutral { border-color: rgba(86, 121, 170, 0.34); color: var(--vrm-text-soft); }
.tone-info { border-color: rgba(65, 176, 255, 0.34); color: var(--vrm-cyan); }
.tone-low,
.tone-complete { border-color: rgba(24, 211, 157, 0.34); color: var(--vrm-green); }
.tone-medium,
.tone-review { border-color: rgba(240, 180, 41, 0.32); color: #ffd66d; }
.tone-high,
.tone-pending { border-color: rgba(238, 63, 143, 0.34); color: #ff8abc; }
.tone-critical,
.tone-overdue { border-color: rgba(255, 93, 119, 0.34); color: #ff8da0; }

.vrm-kpi-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  padding: 14px;
  overflow: visible;
}

.vrm-kpi-card {
  min-width: 0;
  padding: 18px 20px;
  border-radius: 14px;
  border: 1px solid rgba(68, 108, 161, 0.32);
  background: linear-gradient(180deg, rgba(16, 25, 42, 0.96), rgba(16, 26, 42, 0.86));
}

.vrm-kpi-card[data-tone="critical"] { border-color: rgba(255, 93, 119, 0.34); }
.vrm-kpi-card[data-tone="high"] { border-color: rgba(238, 63, 143, 0.34); }
.vrm-kpi-card[data-tone="medium"] { border-color: rgba(240, 180, 41, 0.34); }
.vrm-kpi-card[data-tone="low"] { border-color: rgba(24, 211, 157, 0.34); }
.vrm-kpi-card[data-tone="info"] { border-color: rgba(65, 176, 255, 0.34); }

.vrm-kpi-value {
  margin-top: 10px;
  color: #f8fbff;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.1;
}

.vrm-kpi-sub {
  margin-top: 8px;
  color: var(--vrm-text-soft);
  font-size: 13px;
}

.vrm-workflow-nav {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  padding: 12px;
}

.vendor-tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-height: 82px;
  padding: 14px 16px;
  border: 1px solid rgba(67, 104, 156, 0.3);
  border-radius: 13px;
  background: rgba(16, 26, 42, 0.9);
  color: var(--vrm-text);
  text-align: left;
  cursor: pointer;
}

.vendor-tab strong {
  font-size: 15px;
}

.vendor-tab.active {
  border-color: rgba(120, 179, 255, 0.4);
  background: linear-gradient(180deg, rgba(21, 34, 54, 0.98), rgba(27, 32, 58, 0.96));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 12px 24px rgba(61, 112, 196, 0.18);
}

.vrm-workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 18px;
  align-items: start;
}

.vrm-workspace-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.workspace-section {
  scroll-margin-top: 96px;
}

.vendor-panel {
  display: block;
}

.vendor-section-card {
  padding: 20px 22px;
}

.vendor-section-heading {
  margin-bottom: 16px;
}

.vendor-section-heading h2,
.vrm-rail-header h3,
.vrm-readiness-title {
  margin: 0;
}

.vendor-form-grid,
.vendor-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 18px;
}

.vrm-detail-grid,
.vrm-tool-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.vrm-contract-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 16px;
}

.vrm-workspace-card {
  overflow: hidden;
}
.vrm-workspace-card:has(.ai-action-btn:hover),
.vrm-workspace-card:has(.ai-action-btn.popover-open) {
  overflow: visible;
}

.vrm-card-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 18px;
  background: linear-gradient(90deg, rgba(37, 73, 105, 0.96), rgba(46, 77, 109, 0.88));
  color: #edf3ff;
  font-size: 14px;
  font-weight: 700;
}

.vrm-card-band-risk {
  background: linear-gradient(90deg, rgba(89, 42, 71, 0.98), rgba(89, 42, 71, 0.8));
}

.vrm-card-band-cta {
  background: linear-gradient(90deg, rgba(45, 84, 132, 0.96), rgba(115, 41, 108, 0.86));
}

.vrm-workspace-card-body {
  padding: 18px;
}

.vendor-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vendor-field label {
  color: var(--vrm-text-soft);
  font-size: 12px;
  font-weight: 700;
}

.vendor-field input,
.vendor-field select,
.vendor-field textarea {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid rgba(67, 104, 156, 0.38);
  border-radius: 10px;
  background: rgba(9, 17, 30, 0.86);
  color: var(--vrm-text);
}

.vendor-field textarea {
  min-height: 96px;
  resize: vertical;
}

.vendor-field.wide,
.vrm-grid-wide {
  grid-column: 1 / -1;
}

.vrm-requirement-mini-grid,
.vrm-flag-grid,
.vrm-snapshot-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.vrm-requirement-mini-grid,
.vrm-flag-grid {
  margin-top: 16px;
}

.vrm-mini-card,
.vrm-flag-card,
.vrm-snapshot-card {
  padding: 14px 16px;
}

.vrm-snapshot-card span {
  color: var(--vrm-text-soft);
  font-size: 12px;
}

.vendor-table-wrap {
  overflow-x: auto;
}

.vendor-table {
  width: 100%;
  border-collapse: collapse;
}

.vendor-table th,
.vendor-table td {
  padding: 13px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  text-align: left;
  vertical-align: top;
}

.vendor-table th {
  color: var(--vrm-text-soft);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vendor-table td {
  color: #edf3ff;
  font-size: 13px;
}

.vendor-row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.vendor-empty {
  padding: 24px 18px;
  border: 1px dashed rgba(87, 122, 170, 0.32);
  border-radius: 12px;
  background: rgba(13, 21, 34, 0.74);
  color: var(--vrm-text-soft);
  text-align: center;
}

.vendor-activity-feed {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vendor-activity-item {
  padding: 14px 16px;
}

.vendor-activity-item h4 {
  margin: 0 0 6px;
  font-size: 14px;
}

.vrm-renewal-card .vrm-workspace-card-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.vrm-readiness-score-row {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

.vrm-readiness-score {
  font-size: 38px;
}

.vrm-readiness-bar {
  height: 12px;
  border-radius: 999px;
  background: rgba(12, 20, 34, 0.92);
  overflow: hidden;
}

.vrm-readiness-bar-fill {
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, rgba(65, 176, 255, 0.94), rgba(224, 57, 160, 0.92));
  border-radius: inherit;
  transition: width 200ms ease;
}

.vrm-readiness-checklist {
  display: grid;
  gap: 10px;
}

.vrm-check-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(67, 104, 156, 0.24);
  border-radius: 10px;
  background: rgba(13, 21, 35, 0.72);
  color: var(--vrm-text-soft);
  font-size: 13px;
}

.vrm-check-item.is-complete {
  border-color: rgba(24, 211, 157, 0.26);
  color: #dffdf3;
}

.vrm-check-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid rgba(24, 211, 157, 0.34);
  color: var(--vrm-green);
  font-size: 12px;
}

.vrm-check-item:not(.is-complete) .vrm-check-icon {
  border-color: rgba(240, 180, 41, 0.32);
  color: #ffd66d;
}

.vrm-check-item.is-actionable {
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s;
}

.vrm-check-item.is-actionable:hover {
  border-color: rgba(120, 179, 255, 0.45);
  background: rgba(25, 40, 65, 0.7);
}

.vrm-check-item.is-actionable:active {
  background: rgba(30, 48, 75, 0.85);
}

.vrm-check-go {
  margin-left: auto;
  color: var(--vrm-cyan, #78b3ff);
  font-size: 11px;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.15s;
  white-space: nowrap;
}

.vrm-check-item.is-actionable:hover .vrm-check-go {
  opacity: 1;
}

/* Findings KPI popover anchor */
.vrm-kpi-findings {
  position: relative;
  cursor: pointer;
  transition: border-color 0.18s, box-shadow 0.18s;
}

.vrm-kpi-findings:hover {
  border-color: rgba(255, 93, 119, 0.4);
  box-shadow: 0 0 0 1px rgba(255, 93, 119, 0.15);
}

.vrm-kpi-findings.has-findings .vrm-kpi-value {
  color: #ff7a95;
}

.vrm-finding-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.vrm-finding-meta {
  color: var(--vrm-text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.vrm-finding-severity {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.severity-critical { background: rgba(255, 93, 119, 0.15); color: #ff9cad; }
.severity-high { background: rgba(238, 63, 143, 0.15); color: #ff7dc5; }
.severity-medium { background: rgba(240, 180, 41, 0.14); color: #ffd66d; }
.severity-low { background: rgba(24, 211, 157, 0.14); color: #47e8ba; }

.vrm-snapshot-grid {
  margin-top: 14px;
}

.vrm-snapshot-narrative {
  margin: 14px 0 0;
  line-height: 1.55;
}

/* ── Light theme overrides ─────────────────────────────── */

[data-theme-variant="light"] .vrm-workspace-shell {
  --vrm-bg: var(--color-bg);
  --vrm-surface: var(--color-surface-solid);
  --vrm-surface-soft: var(--color-surface-solid-alt);
  --vrm-surface-alt: var(--color-surface-solid-alt);
  --vrm-border: var(--color-border);
  --vrm-border-strong: color-mix(in srgb, var(--color-border) 80%, var(--color-text) 20%);
  --vrm-text: var(--color-text);
  --vrm-text-soft: var(--color-text-muted);
  --vrm-text-muted: var(--color-text-dim);
}

[data-theme-variant="light"] .workflow-container {
  background: rgba(220, 230, 248, 0.5);
  border-color: rgba(100, 130, 200, 0.25);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

[data-theme-variant="light"] .vrm-phase-header {
  background: linear-gradient(
    90deg,
    rgba(124, 92, 255, 0.10) 0%,
    rgba(124, 92, 255, 0.04) 35%,
    rgba(240, 245, 255, 0.85) 55%,
    rgba(0, 180, 100, 0.03) 72%,
    rgba(0, 180, 100, 0.05) 100%
  );
  box-shadow: inset 0 1px 0 rgba(124, 92, 255, 0.08),
              inset 0 -1px 0 rgba(124, 92, 255, 0.15);
}

[data-theme-variant="light"] .vrm-phase-body {
  background: rgba(255, 255, 255, 0.5);
}

@media (max-width: 1440px) {
  .vrm-requirements-strip,
  .vrm-workflow-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1180px) {
  .vrm-workspace-shell {
    padding-inline: 0;
  }

  .vrm-workspace-grid,
  .vrm-contract-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .vrm-workspace-topbar,
  .vendor-section-heading,
  .vendor-actions,
  .vrm-workspace-header {
    flex-direction: column;
    align-items: stretch;
  }

  .vrm-requirements-strip,
  .vrm-kpi-strip,
  .vrm-workflow-nav,
  .vrm-detail-grid,
  .vrm-tool-grid,
  .vendor-form-grid,
  .vendor-modal-grid,
  .vrm-requirement-mini-grid,
  .vrm-flag-grid,
  .vrm-snapshot-grid {
    grid-template-columns: 1fr;
  }

  .vrm-readiness-score-row {
    grid-template-columns: 1fr;
  }

  .workflow-container {
    padding: 14px 10px 14px 14px;
  }

  .workflow-spine {
    left: 20px;
  }

  .vrm-phase-body {
    padding-left: 28px;
  }

  .vrm-security-review-body {
    padding-left: 28px;
  }
}

.vrm-workspace-shell {
  background: var(--color-surface);
}

.vrm-workspace-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.vrm-workspace-topline-meta {
  color: var(--vrm-cyan);
  font-size: 12px;
  font-weight: 700;
}

.vrm-workspace-overview-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: start;
  margin-bottom: 12px;
  overflow: visible;
}

.vrm-workspace-main-top {
  display: grid;
  gap: 12px;
  overflow: visible;
}

.vrm-workspace-hero,
.vrm-kpi-card,
.vrm-detail-card {
  border: 1px solid rgba(66, 96, 142, 0.34);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(24, 35, 56, 0.96), rgba(19, 29, 47, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

/* Phase cards are borderless inside the workflow container */
.vrm-phase-card {
  border: none;
  background: none;
  box-shadow: none;
}

.vrm-workspace-hero {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 30px;
  border-color: rgba(255, 255, 255, 0.08);
  background: linear-gradient(145deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  box-shadow: 0 12px 30px rgba(2, 6, 23, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
}

.vrm-workspace-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #8b5cf6, #06b6d4, #10b981, #f59e0b, #ec4899);
}

.vrm-workspace-hero::after {
  content: "";
  position: absolute;
  inset: auto -60px -80px auto;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.16), transparent 68%);
  pointer-events: none;
}

.vrm-workspace-mark {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  font-size: 20px;
  box-shadow: 0 14px 28px rgba(67, 117, 255, 0.24);
}

.vrm-workspace-brand {
  position: relative;
  z-index: 1;
  align-items: center;
  gap: 18px;
  flex: 1 1 auto;
}

.vrm-workspace-titleblock {
  display: grid;
  gap: 4px;
}

.vrm-workspace-heading-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.vrm-workspace-heading-row h1 {
  font-size: clamp(1.55rem, 2vw, 2rem);
  font-weight: 800;
  line-height: 1.08;
}

.vrm-workspace-subtitle {
  max-width: 1080px;
  margin-top: 6px;
  color: #94a3b8;
  font-size: 0.95rem;
  line-height: 1.55;
}

.vrm-status-pill {
  min-height: 28px;
  font-size: 11px;
}

.vrm-workspace-header-actions {
  position: relative;
  z-index: 1;
  justify-content: flex-end;
  align-self: center;
}

.vrm-kpi-strip {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  gap: 14px;
}

.vrm-kpi-card {
  --vrm-kpi-accent: #7c5cff;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 118px;
  padding: 18px 16px;
  border-color: rgba(148, 163, 184, 0.22);
  background: linear-gradient(145deg, rgba(30,41,59,0.64) 0%, rgba(15,23,42,0.64) 100%);
  text-align: center;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.18s ease;
}

.vrm-kpi-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--vrm-kpi-accent) 65%, white 35%), var(--vrm-kpi-accent));
  opacity: 0.78;
}

.vrm-kpi-card[data-tone="neutral"] { --vrm-kpi-accent: #7c5cff; }
.vrm-kpi-card[data-tone="info"] { --vrm-kpi-accent: #38bdf8; }
.vrm-kpi-card[data-tone="low"] { --vrm-kpi-accent: #00d4aa; }
.vrm-kpi-card[data-tone="medium"] { --vrm-kpi-accent: #f59e0b; }
.vrm-kpi-card[data-tone="high"] { --vrm-kpi-accent: #ec4899; }
.vrm-kpi-card[data-tone="critical"] { --vrm-kpi-accent: #ef4444; }

.vrm-kpi-card:hover,
.vrm-kpi-card:focus-within {
  border-color: color-mix(in srgb, var(--vrm-kpi-accent) 70%, transparent);
  box-shadow: 0 0 24px color-mix(in srgb, var(--vrm-kpi-accent) 38%, transparent), 0 8px 24px rgba(0,0,0,0.32);
  transform: translateY(-3px);
}

.vrm-kpi-card:hover .vrm-kpi-label,
.vrm-kpi-card:focus-within .vrm-kpi-label {
  color: rgba(255, 255, 255, 0.72);
}

.vrm-kpi-label {
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.52);
  letter-spacing: 0.08em;
  text-align: center;
}

.vrm-kpi-value {
  margin-top: 0;
  max-width: 100%;
  color: #ffffff;
  font-size: clamp(1.15rem, 1.8vw, 1.85rem);
  line-height: 1.2;
  text-align: center;
  word-break: break-word;
}

.vrm-kpi-sub {
  display: block;
  margin-top: 6px;
  max-width: 24ch;
  color: #94a3b8;
  font-size: 11px;
  line-height: 1.4;
  text-align: center;
}

.vrm-kpi-card[data-tone="info"] .vrm-kpi-value { color: #54c3ff; }
.vrm-kpi-card[data-tone="low"] .vrm-kpi-value { color: #00d4aa; }
.vrm-kpi-card[data-tone="medium"] .vrm-kpi-value { color: #ffaa00; }
.vrm-kpi-card[data-tone="high"] .vrm-kpi-value { color: #ff8abc; }
.vrm-kpi-card[data-tone="critical"] .vrm-kpi-value { color: #ff7b93; }

/* ── Findings Popover ───────────────────────────────────────────────── */
.vrm-findings-popover {
  position: fixed;
  z-index: 900;
  width: max-content;
  min-width: 420px;
  max-width: min(520px, calc(100vw - 40px));
  max-height: 70vh;
  border: 1px solid rgba(66, 96, 142, 0.45);
  border-radius: 14px;
  background: rgba(12, 20, 36, 0.97);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(120, 179, 255, 0.08);
  backdrop-filter: blur(16px);
  overflow: hidden;
  overflow-wrap: break-word;
  word-break: break-word;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
  /* pointer-events controlled by JS via .is-inert to avoid race conditions
     during gap transit between KPI card and popover */
}

/* .is-inert is added by JS AFTER the fade-out transition completes,
   so the popover stays interactive while the mouse transits the gap. */
.vrm-findings-popover.is-inert {
  pointer-events: none;
}

.vrm-findings-popover.is-hovering,
.vrm-findings-popover.is-pinned {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.vrm-scan-activity-popover {
  position: fixed;
  z-index: 900;
  width: max-content;
  min-width: 420px;
  max-width: min(560px, calc(100vw - 40px));
  max-height: 70vh;
  border: 1px solid rgba(66, 96, 142, 0.45);
  border-radius: 14px;
  background: rgba(12, 20, 36, 0.97);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(120, 179, 255, 0.08);
  backdrop-filter: blur(16px);
  overflow: hidden;
  overflow-wrap: break-word;
  word-break: break-word;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
  pointer-events: none;
}

.vrm-scan-activity-popover.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.vrm-findings-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.vrm-findings-popover-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.vrm-findings-popover-close {
  display: none;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(91, 110, 139, 0.4);
  border-radius: 6px;
  background: transparent;
  color: var(--vrm-text-soft, #94a3b8);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.vrm-findings-popover-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.vrm-findings-popover.is-pinned .vrm-findings-popover-close {
  display: inline-flex;
}

.vrm-scan-activity-popover.is-open .vrm-findings-popover-close {
  display: inline-flex;
}

.vrm-rail-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.vrm-scan-activity-title {
  align-items: flex-start;
}

.vrm-rail-title h3 {
  margin: 0;
  font-size: 1rem;
}

.vrm-rail-icon {
  color: #f3a53f;
  font-weight: 900;
}

.vrm-scan-activity-popover-copy {
  margin: 4px 0 0;
  color: #86a0bf;
  font-size: 12px;
}

.vrm-scan-activity-popover-body {
  padding: 16px 18px 18px;
  max-height: calc(70vh - 82px);
  overflow: auto;
}

.vrm-scan-activity-list {
  min-width: min(520px, calc(100vw - 88px));
}

.vrm-open-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  border: 1px solid rgba(255, 93, 119, 0.35);
  border-radius: 999px;
  color: #ff7a95;
  font-size: 11px;
  font-weight: 700;
}

.vrm-findings-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 18px 0;
}

.vrm-findings-filter-row button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 6px 12px;
  border: 1px solid rgba(91, 110, 139, 0.4);
  border-radius: 999px;
  background: rgba(16, 25, 42, 0.82);
  color: #d6e4fb;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.vrm-findings-filter-row button:hover {
  border-color: rgba(120, 179, 255, 0.5);
  background: rgba(25, 40, 65, 0.85);
}

.vrm-findings-filter-row button.active {
  border-color: rgba(120, 179, 255, 0.6);
  background: rgba(35, 55, 85, 0.9);
  color: var(--vrm-cyan, #78b3ff);
}

.vrm-findings-list {
  display: grid;
  gap: 10px;
  max-height: calc(70vh - 140px);
  padding: 14px 18px 20px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.vrm-finding-item {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(67, 104, 156, 0.25);
  border-radius: 10px;
  background: rgba(15, 24, 40, 0.7);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
}

.vrm-finding-item:hover {
  border-color: rgba(120, 179, 255, 0.45);
  background: rgba(25, 40, 65, 0.85);
  box-shadow: 0 0 0 1px rgba(120, 179, 255, 0.15);
}

.vrm-finding-item:active {
  background: rgba(30, 48, 75, 0.9);
}

.vrm-finding-item strong {
  display: block;
  margin: 6px 0 4px;
  font-size: 13px;
  line-height: 1.35;
}

.vrm-finding-item p {
  margin: 0;
  color: var(--vrm-text-soft);
  font-size: 12px;
  line-height: 1.45;
}

.vrm-finding-item .vrm-finding-meta {
  display: block;
  margin-top: 8px;
  color: var(--vrm-text-muted, rgba(148, 163, 184, 0.7));
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.vrm-finding-item .vrm-finding-goto {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  color: var(--vrm-cyan, #78b3ff);
  font-size: 11px;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.15s;
}

.vrm-finding-item:hover .vrm-finding-goto {
  opacity: 1;
}

.vrm-finding-item .vrm-finding-goto svg {
  width: 12px;
  height: 12px;
}

@keyframes vrm-finding-flash {
  0%   { box-shadow: 0 0 0 3px rgba(120, 179, 255, 0.5); }
  100% { box-shadow: 0 0 0 0 rgba(120, 179, 255, 0); }
}

/* ── Finding Detail Modal ────────────────────────────────────────── */
.vrm-finding-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}
.vrm-finding-modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.vrm-finding-modal {
  width: min(520px, calc(100vw - 40px));
  max-height: 80vh;
  overflow-y: auto;
  border: 1px solid rgba(66, 96, 142, 0.5);
  border-radius: 14px;
  background: rgba(12, 20, 36, 0.98);
  box-shadow: 0 16px 64px rgba(0, 0, 0, 0.6);
  transform: translateY(12px);
  transition: transform 0.2s;
  scrollbar-width: thin;
}
.vrm-finding-modal-overlay.is-open .vrm-finding-modal {
  transform: translateY(0);
}

.vrm-finding-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 20px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.vrm-finding-modal-header h3 {
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
}
.vrm-finding-modal-close {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  background: transparent;
  color: var(--vrm-text-muted);
  font-size: 18px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.vrm-finding-modal-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--vrm-text-primary);
}

.vrm-finding-modal-body {
  padding: 18px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.vrm-finding-modal-row {
  display: flex;
  gap: 12px;
}
.vrm-finding-modal-label {
  flex-shrink: 0;
  width: 80px;
  color: var(--vrm-text-muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-top: 2px;
}
.vrm-finding-modal-value {
  font-size: 13px;
  line-height: 1.5;
  color: var(--vrm-text-soft);
}

.vrm-finding-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.vrm-finding-modal-footer button {
  padding: 8px 20px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.vrm-finding-modal-btn-secondary {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: transparent;
  color: var(--vrm-text-soft);
}
.vrm-finding-modal-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.06);
}
.vrm-finding-modal-btn-primary {
  border: none;
  background: var(--accent-primary, #7c5cff);
  color: #fff;
}
.vrm-finding-modal-btn-primary:hover {
  background: #6b4de6;
}

/* ── Workflow Container (pop-out mat) ────────────────────────────── */
.vrm-phase-stack {
  display: grid;
  gap: 0;
}

.workflow-container {
  position: relative;
  padding: 18px;
  border: 1px solid rgba(72, 130, 200, 0.22);
  border-radius: 16px;
  background: rgba(22, 32, 58, 0.72);
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.38),
    0 0 20px rgba(0, 200, 255, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

/* ── Workflow Spine (gradient connector) ─────────────────────────── */
.workflow-spine {
  position: absolute;
  left: 32px;
  top: 46px;
  bottom: 46px;
  width: 2px;
  background: linear-gradient(
    180deg,
    rgba(72, 224, 200, 0.9) 0%,
    rgba(60, 180, 255, 0.85) 33%,
    rgba(160, 100, 255, 0.8) 66%,
    rgba(230, 60, 160, 0.85) 100%
  );
  border-radius: 2px;
  z-index: 0;
}

/* Spine start cap — small diamond */
.workflow-spine::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  width: 6px;
  height: 6px;
  background: rgba(72, 224, 200, 0.9);
  border-radius: 1px;
  transform: translateX(-50%) rotate(45deg);
  box-shadow: 0 0 6px rgba(72, 224, 200, 0.4);
}

/* Spine end cap — checkered flag */
.workflow-spine::after {
  content: "\1F3C1";
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 16px;
  line-height: 1;
  filter: drop-shadow(0 0 4px rgba(230, 60, 160, 0.3));
}

/* ── Phase Cards ────────────────────────────────────────────────── */
.vrm-phase-card {
  overflow: hidden;
  border-radius: 12px;
  margin-bottom: 12px;
}
.vrm-phase-card:has(.ai-action-btn:hover),
.vrm-phase-card:has(.ai-action-btn.popover-open),
.vrm-phase-card:has(.wizard-ai-trigger:hover) {
  overflow: visible;
}

.vrm-phase-card:last-child {
  margin-bottom: 0;
}

.vrm-phase-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 14px 18px 14px 0;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(
    90deg,
    rgba(124, 92, 255, 0.18) 0%,
    rgba(124, 92, 255, 0.06) 35%,
    transparent 55%,
    rgba(0, 180, 100, 0.03) 72%,
    rgba(0, 180, 100, 0.07) 100%
  );
  box-shadow: inset 0 1px 0 rgba(124, 92, 255, 0.10),
              inset 0 -1px 0 rgba(124, 92, 255, 0.22);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.18s;
}

.vrm-phase-header:hover {
  background: linear-gradient(
    90deg,
    rgba(124, 92, 255, 0.24) 0%,
    rgba(124, 92, 255, 0.08) 35%,
    transparent 55%,
    rgba(0, 180, 100, 0.04) 72%,
    rgba(0, 180, 100, 0.09) 100%
  );
}

.vrm-phase-card:not(.is-collapsed) .vrm-phase-header {
  border-bottom: 1px solid rgba(60, 200, 255, 0.12);
  border-radius: 12px 12px 0 0;
}

/* Accent border-bottom per step */
[data-phase="evidence"]:not(.is-collapsed) .vrm-phase-header {
  border-bottom-color: rgba(72, 224, 200, 0.25);
}
[data-phase="scans"]:not(.is-collapsed) .vrm-phase-header {
  border-bottom-color: rgba(60, 180, 255, 0.25);
}
[data-phase="consolidate"]:not(.is-collapsed) .vrm-phase-header {
  border-bottom-color: rgba(160, 100, 255, 0.25);
}
[data-phase="review"]:not(.is-collapsed) .vrm-phase-header {
  border-bottom-color: rgba(230, 60, 160, 0.25);
}

.vrm-phase-header-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.vrm-phase-index {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border: 1.5px solid rgba(72, 224, 166, 0.8);
  border-radius: 999px;
  background: rgba(16, 25, 42, 0.98);
  color: #5ae3ae;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 0 8px rgba(72, 224, 200, 0.2);
}

/* Per-step spine gradient coloring */
[data-phase="evidence"] .vrm-phase-index {
  border-color: rgba(72, 224, 200, 0.85);
  color: #48e0c8;
  box-shadow: 0 0 8px rgba(72, 224, 200, 0.25);
}

[data-phase="scans"] .vrm-phase-index {
  border-color: rgba(60, 180, 255, 0.85);
  color: #3cb4ff;
  box-shadow: 0 0 8px rgba(60, 180, 255, 0.25);
}

[data-phase="consolidate"] .vrm-phase-index {
  border-color: rgba(160, 100, 255, 0.85);
  color: #a064ff;
  box-shadow: 0 0 8px rgba(160, 100, 255, 0.25);
}

[data-phase="review"] .vrm-phase-index {
  border-color: rgba(230, 60, 160, 0.85);
  color: #e63ca0;
  box-shadow: 0 0 8px rgba(230, 60, 160, 0.25);
}

.vrm-phase-header-main h2 {
  margin: 0;
  font-size: 1rem;
}

.vrm-phase-header-main p {
  margin: 4px 0 0;
  color: #7f94b2;
  font-size: 13px;
}

.vrm-phase-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 20px;
  padding: 0 8px;
  border: 1px solid rgba(88, 106, 136, 0.4);
  border-radius: 8px;
  color: #7f94b2;
  font-size: 11px;
  font-weight: 700;
}

.vrm-phase-header-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.vrm-phase-progress-label {
  color: #8fa5c4;
  font-size: 13px;
  font-weight: 700;
}

.vrm-phase-progress-bar {
  width: 54px;
  height: 4px;
  border-radius: 999px;
  background: rgba(88, 104, 130, 0.35);
  overflow: hidden;
}

.vrm-phase-progress-fill {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #55dcae, #3db7ff);
}

.vrm-phase-chevron {
  width: 9px;
  height: 9px;
  border-right: 1.5px solid #7088ac;
  border-bottom: 1.5px solid #7088ac;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.vrm-phase-card.is-collapsed .vrm-phase-chevron {
  transform: rotate(-45deg);
}

.vrm-phase-body {
  padding: 14px 18px 18px 42px;
  background: rgba(8, 14, 28, 0.65);
  border-radius: 0 0 12px 12px;
}

.vrm-phase-body[hidden] {
  display: none;
}

.vrm-stage-tools-grid,
.vrm-detail-deck {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.vrm-detail-deck {
  margin-top: 14px;
}

.vrm-scan-activity-bar {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

.vrm-scan-activity-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.vrm-scan-activity-trigger[aria-expanded="true"] {
  border-color: rgba(84, 195, 255, 0.52);
  box-shadow: 0 0 0 1px rgba(84, 195, 255, 0.18), 0 10px 24px rgba(7, 20, 38, 0.34);
}

.vrm-tool-card {
  position: relative;
  padding: 14px 16px 16px;
  border: 1px solid rgba(50, 216, 160, 0.18);
  border-radius: 13px;
  background: rgba(14, 24, 40, 0.88);
}

.vrm-tool-card.is-blocked {
  border-color: rgba(255, 137, 98, 0.28);
}

.vrm-tool-card-header,
.vrm-tool-card-status,
.vrm-detail-card-header,
.vrm-security-review-head,
.vrm-security-review-stats,
.vrm-subprocessor-item,
.vrm-details-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.vrm-tool-card-header h3,
.vrm-detail-card-header h3 {
  margin: 0;
  font-size: 0.98rem;
}

.vrm-tool-card-header p,
.vrm-tool-metric,
.vrm-subprocessor-item p,
.vrm-subprocessor-item span,
.vrm-security-review-titleblock p {
  margin: 4px 0 0;
  color: #86a0bf;
  font-size: 12px;
}

.vrm-tool-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #62728c;
}

.vrm-tool-card.is-complete .vrm-tool-dot {
  background: #38d3a1;
}

.vrm-tool-info {
  color: #4c91d8;
  font-size: 12px;
}

.vrm-tool-actions {
  margin-top: 14px;
}

.vrm-tool-card .btn {
  min-height: 28px;
  padding: 5px 12px;
  font-size: 11px;
}

.vrm-tool-chevron {
  position: absolute;
  right: 16px;
  bottom: 18px;
  width: 8px;
  height: 8px;
  border-right: 1px solid #7088ac;
  border-bottom: 1px solid #7088ac;
  transform: rotate(-45deg);
}

.vrm-detail-card {
  padding: 16px;
}

.vrm-profile-form {
  margin-top: 12px;
}

.vrm-subprocessor-list {
  margin-top: 12px;
  display: grid;
  gap: 12px;
}

.vrm-subprocessor-item {
  padding: 14px;
  border: 1px solid rgba(68, 96, 140, 0.28);
  border-radius: 12px;
  background: rgba(14, 24, 40, 0.82);
}

.vrm-subprocessor-item h4 {
  margin: 0;
}

.vrm-phase-connector {
  display: none;
}

.vrm-security-review-card {
  padding: 0;
  overflow: hidden;
}

.vrm-security-review-header {
  padding: 18px 20px 14px 0;
}

.vrm-phase-header-main-review {
  align-items: flex-start;
}

.vrm-security-review-titleblock {
  min-width: 0;
}

.vrm-security-review-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.vrm-security-review-titleblock h2 {
  margin: 0;
  font-size: 1.9rem;
  line-height: 1.08;
}

.vrm-security-review-subline {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.vrm-security-review-progress-inline {
  color: #56dfa8;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.vrm-security-review-header-meta {
  align-self: flex-start;
  padding-top: 8px;
}

.vrm-security-review-body {
  padding: 0 20px 20px 42px;
}

.vrm-security-review-banner {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(79, 154, 125, 0.4);
  border-radius: 10px;
  background: rgba(32, 66, 73, 0.45);
  color: #5be0aa;
  font-size: 13px;
  font-weight: 700;
}

.vrm-security-review-stats {
  margin-top: 14px;
  justify-content: flex-start;
  gap: 20px;
}

.vrm-security-review-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #8fa5c4;
  font-size: 12px;
}

.vrm-security-review-stat strong {
  color: #dce9fb;
}

.vrm-readiness-checklist {
  margin-top: 16px;
}

.vrm-details-modal-content {
  width: min(1280px, calc(100vw - 48px));
  max-width: 1280px;
  background: var(--color-surface-solid);
}

.vrm-debug-pill {
  min-height: 32px;
  padding: 7px 12px;
  border: 1px solid rgba(114, 132, 165, 0.45);
  border-radius: 10px;
  background: rgba(22, 33, 51, 0.92);
  color: #dfeafb;
  font-size: 12px;
  font-weight: 700;
}

.vrm-details-modal-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 22px;
}

.vrm-details-panel {
  border: 1px solid rgba(63, 97, 145, 0.34);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(15, 23, 38, 0.95);
}

.vrm-details-panel-band,
.vrm-details-subcard-band {
  padding: 12px 16px;
  background: linear-gradient(90deg, rgba(35, 75, 107, 0.96), rgba(43, 77, 110, 0.88));
  font-size: 14px;
  font-weight: 700;
}

.vrm-details-panel-band-risk {
  background: linear-gradient(90deg, rgba(90, 42, 71, 0.98), rgba(89, 42, 71, 0.8));
}

.vrm-details-panel-body,
.vrm-details-subcard {
  padding: 14px 16px;
}

.vrm-details-list {
  display: grid;
  gap: 12px;
}

.vrm-detail-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: #dce8fb;
  font-size: 13px;
}

.vrm-detail-row span {
  color: #8ea4c3;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  font-weight: 700;
}

.vrm-detail-flags-card {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid rgba(63, 97, 145, 0.34);
  border-radius: 10px;
  background: rgba(22, 35, 54, 0.72);
}

.vrm-detail-flags-grid {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.vrm-detail-flag-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #dce8fb;
  font-size: 13px;
}

.vrm-detail-flag {
  min-width: 38px;
  justify-content: center;
}

.vrm-history-disclosure {
  margin-top: 16px;
}

.vrm-history-disclosure summary {
  cursor: pointer;
  color: #dfeafb;
  font-size: 13px;
  font-weight: 700;
}

.vrm-detail-history-list {
  margin-top: 12px;
  display: grid;
  gap: 10px;
}

.vrm-detail-history-item {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: #8ea4c3;
  font-size: 12px;
}

.vrm-ai-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(4, 8, 14, 0.45);
  z-index: 1190;
}

.vrm-ai-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1200;
  width: min(390px, 100vw);
  height: 100vh;
  padding: 18px 18px 16px;
  background: var(--color-surface-solid-alt);
  border-left: 1px solid rgba(77, 101, 138, 0.32);
  box-shadow: -18px 0 42px rgba(4, 8, 14, 0.38);
  transform: translateX(100%);
  transition: transform 0.22s ease;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.vrm-ai-drawer.is-open {
  transform: translateX(0);
}

.vrm-ai-drawer-head h2 {
  margin: 0;
}

.vrm-ai-drawer-head p {
  margin: 4px 0 0;
  color: #8ca2c0;
  font-size: 12px;
}

.vrm-ai-drawer-close {
  border: 0;
  background: transparent;
  color: #b9cbe4;
  font-size: 22px;
}

.vrm-ai-drawer-messages {
  flex: 1;
  overflow-y: auto;
  display: grid;
  gap: 10px;
}

.vrm-ai-system-message,
.vrm-ai-message {
  padding: 12px 13px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.5;
}

.vrm-ai-system-message,
.vrm-ai-message.is-assistant {
  background: rgba(18, 30, 49, 0.9);
  color: #d7e6fb;
}

.vrm-ai-message.is-user {
  margin-left: auto;
  background: rgba(63, 127, 201, 0.24);
  color: #f3f9ff;
}

.vrm-ai-drawer-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.vrm-ai-suggestion {
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid rgba(79, 104, 143, 0.34);
  border-radius: 999px;
  background: rgba(18, 30, 49, 0.9);
  color: #d6e6fc;
  font-size: 11px;
  font-weight: 700;
}

.vrm-ai-drawer-form {
  display: grid;
  gap: 10px;
}

.vrm-ai-drawer-form textarea {
  width: 100%;
  min-height: 72px;
  padding: 12px;
  border: 1px solid rgba(67, 104, 156, 0.38);
  border-radius: 12px;
  background: rgba(11, 20, 35, 0.92);
  color: #edf3ff;
  resize: vertical;
}

@media (max-width: 1280px) {
  .vrm-workspace-overview-grid,
  .vrm-details-modal-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .vrm-workspace-topline,
  .vrm-workspace-hero,
  .vrm-phase-header,
  .vrm-details-modal-header {
    flex-direction: column;
    align-items: stretch;
  }

  .vrm-stage-tools-grid,
  .vrm-detail-deck {
    grid-template-columns: 1fr;
  }

  .vrm-findings-popover,
  .vrm-scan-activity-popover {
    top: auto !important;
    right: 12px;
    bottom: 12px;
    left: 12px !important;
    width: auto;
    min-width: 0;
    max-width: none;
    max-height: 60vh;
  }

  .vrm-security-review-header-meta {
    align-self: stretch;
    padding-top: 0;
    justify-content: flex-end;
  }
}

/* ── Editable detail rows (ISS-007) ──────────────────────────────── */

.vrm-detail-value-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.vrm-detail-edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #6888ab;
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}

.vrm-detail-editable-row:hover .vrm-detail-edit-btn,
.vrm-detail-flag-row:hover .vrm-detail-edit-btn {
  opacity: 1;
}

.vrm-detail-edit-btn:hover {
  background: rgba(88, 199, 255, 0.12);
  color: #58c7ff;
}

.vrm-detail-edit-input {
  display: none;
  width: 100%;
  max-width: 220px;
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid rgba(88, 199, 255, 0.35);
  border-radius: 6px;
  background: rgba(11, 20, 35, 0.92);
  color: #edf3ff;
  font-size: 13px;
}

.vrm-detail-editable-row.is-editing .vrm-detail-edit-input {
  display: block;
}

.vrm-detail-editable-row.is-editing > .vrm-detail-value-wrap > strong {
  display: none;
}

.vrm-detail-editable-row.is-editing .vrm-detail-edit-btn {
  opacity: 1;
  color: #34d399;
}

.vrm-detail-editable-row.is-dirty > .vrm-detail-value-wrap > strong {
  color: #58c7ff;
}

.vrm-detail-flag-row.is-editing .vrm-detail-edit-btn {
  opacity: 1;
  color: #34d399;
}

.vrm-detail-flag-row.is-dirty > .vrm-detail-value-wrap > strong {
  color: #58c7ff;
}