/* ============================================================
   Interactive Diagram Component
   ============================================================ */
.interactive-diagram {
  background: #f5f3ed;
  border: 1px solid #d4cbbe;
  border-radius: 10px;
  margin: 28px 0;
  overflow: hidden;
  outline: none;
}
.id-chrome { background: #e3dacc; }
.id-title-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
}
.id-title {
  font-size: 15px;
  font-weight: 700;
  color: #1a1612;
  letter-spacing: -0.2px;
}
.id-counter {
  font-size: 11px;
  font-weight: 600;
  color: #6b5e4f;
  background: #f5f3ed;
  padding: 3px 10px;
  border-radius: 12px;
}
.id-journey {
  padding: 24px 20px 16px;
  position: relative;
}
.id-track {
  display: flex;
  align-items: stretch;
  position: relative;
}
.id-track::before {
  content: '';
  position: absolute;
  top: 18px;
  left: 20px;
  right: 20px;
  height: 2px;
  background: #d4cbbe;
  z-index: 0;
}
.id-track-fill {
  position: absolute;
  top: 18px;
  left: 20px;
  height: 2px;
  background: #c4b9a8;
  z-index: 1;
  transition: width 0.3s ease;
}
.id-node {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  position: relative;
  z-index: 2;
  padding: 0 4px;
}
.id-node-ring {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  background: #f5f3ed;
  border: 2px solid #d4cbbe;
  color: #6b5e4f;
  transition: all 0.25s ease;
  flex-shrink: 0;
}
.id-node.active .id-node-ring {
  background: var(--node-color);
  border-color: var(--node-color);
  color: #fff;
  transform: scale(1.2);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--node-color) 15%, transparent);
}
.id-node.past .id-node-ring {
  background: var(--node-color);
  border-color: var(--node-color);
  color: #fff;
  opacity: 0.55;
}
.id-node:hover:not(.active) .id-node-ring {
  border-color: #3d3224;
  transform: scale(1.05);
}
.id-node-label {
  font-size: 10px;
  font-weight: 500;
  color: #6b5e4f;
  text-align: center;
  margin-top: 8px;
  line-height: 1.25;
  max-width: 100px;
  transition: color 0.2s;
}
.id-node.active .id-node-label {
  color: #1a1612;
  font-weight: 600;
}
.id-content {
  padding: 0 20px 20px;
  min-height: 80px;
}
.id-content-inner {
  background: #f0eee6;
  border: 1px solid #d4cbbe;
  border-radius: 8px;
  padding: 16px 20px;
  border-left: 3px solid #2563eb;
  animation: idFadeIn 0.25s ease;
}
.id-svg-wrap {
  margin-bottom: 12px;
  border-radius: 6px;
  overflow: hidden;
}
.id-svg-wrap svg {
  display: block;
  width: 100%;
  height: auto;
}
@keyframes idFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.id-headline {
  font-size: 13px;
  font-weight: 600;
  color: #1a1612;
  margin-bottom: 6px;
  letter-spacing: -0.1px;
}
.id-caption {
  font-size: 13px;
  color: #3d3224;
  line-height: 1.6;
}
.id-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px 16px;
}
.id-nav-hint {
  font-size: 11px;
  color: #6b5e4f;
}
.id-arrow {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #d4cbbe;
  background: #f5f3ed;
  color: #1a1612;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
  padding: 0;
}
.id-arrow:hover:not(:disabled) {
  background: #e3dacc;
  border-color: #3d3224;
}
.id-arrow:disabled {
  opacity: 0.25;
  cursor: default;
}
@media (max-width: 640px) {
  .id-node-ring { width: 30px; height: 30px; font-size: 12px; }
  .id-node.active .id-node-ring { transform: scale(1.15); }
  .id-node-label { font-size: 9px; max-width: 64px; }
  .id-journey { padding: 20px 12px 12px; }
  .id-content { padding: 0 12px 16px; }
  .id-content-inner { padding: 12px 14px; }
  .id-nav { padding: 0 12px 12px; }
  .id-track::before { left: 15px; right: 15px; }
  .id-track-fill { left: 15px; }
}
.id-stage { display: none !important; }
.id-dots, .id-stage-label, .id-viewport, .id-nav-wrap { display: none !important; }

/* ============================================================
   Decision Simulator Component
   ============================================================ */
.decision-sim {
  margin: 28px 0;
}
.ds-header {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: #f0eee6;
  border: 1px solid #d4cbbe;
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 12px;
}
.ds-icon {
  font-size: 24px;
  flex-shrink: 0;
  margin-top: 2px;
}
.ds-label {
  font-size: 11px;
  font-weight: 700;
  color: #2563eb;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.ds-scenario p {
  font-size: 14px;
  color: #1a1612;
  line-height: 1.6;
  margin: 0;
}
.ds-instruction {
  font-size: 13px;
  color: #3d3224;
  text-align: center;
  padding: 6px 0 10px;
  font-style: italic;
}
.ds-instruction.ds-revealed {
  font-style: normal;
  color: #059669;
  font-weight: 600;
}
.ds-choice {
  background: #f5f3ed;
  border: 1px solid #d4cbbe;
  border-left: 4px solid #d4cbbe;
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 10px;
  transition: all 0.3s ease;
}
.ds-choice:hover {
  border-left-color: #2563eb;
  background: #f0eee6;
}
.ds-choice.ds-selected {
  box-shadow: 0 0 0 2px #2563eb;
}
.ds-choice-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.ds-choice-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #e3dacc;
  color: #1a1612;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.ds-choice-label {
  font-size: 14px;
  font-weight: 600;
  color: #1a1612;
}
.ds-choice-body {
  font-size: 13px;
  color: #3d3224;
  line-height: 1.55;
  padding-left: 36px;
}
.ds-choice-body p {
  margin: 0 0 6px;
}
.ds-consequence {
  margin-top: 12px;
  padding: 12px 16px 12px 36px;
  border-top: 1px solid #d4cbbe;
  animation: ds-reveal 0.3s ease;
}
.ds-consequence-header {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
}
.ds-consequence-icon {
  font-size: 15px;
}
.ds-consequence p {
  font-size: 13px;
  color: #3d3224;
  line-height: 1.55;
  margin: 0;
}
@keyframes ds-reveal {
  from { opacity: 0; max-height: 0; }
  to { opacity: 1; max-height: 300px; }
}

/* Dark mode */
[data-theme="dark"] .ds-header { background: #0f2b3d; border-color: #1a3348; }
[data-theme="dark"] .ds-scenario p { color: #e2e8f0; }
[data-theme="dark"] .ds-instruction { color: #94a3b8; }
[data-theme="dark"] .ds-choice { background: #112436; border-color: #1a3348; }
[data-theme="dark"] .ds-choice:hover { background: #0f2b3d; }
[data-theme="dark"] .ds-choice-letter { background: #1a3348; color: #e2e8f0; }
[data-theme="dark"] .ds-choice-label { color: #e2e8f0; }
[data-theme="dark"] .ds-choice-body { color: #94a3b8; }
[data-theme="dark"] .ds-consequence { border-top-color: #1a3348; }
[data-theme="dark"] .ds-consequence p { color: #94a3b8; }

/* ============================================================
   Portal Screenshot Component
   ============================================================ */
.portal-screenshot {
  margin: 24px 0;
  border: 1px solid #d4cbbe;
  border-radius: 10px;
  overflow: hidden;
  background: #f5f3ed;
}
.ps-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: #e3dacc;
  border-bottom: 1px solid #d4cbbe;
}
.ps-browser-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d4cbbe;
}
.ps-browser-dot:nth-child(1) { background: #dc2626; }
.ps-browser-dot:nth-child(2) { background: #d97706; }
.ps-browser-dot:nth-child(3) { background: #059669; }
.ps-url {
  font-size: 11px;
  color: #3d3224;
  background: #f5f3ed;
  padding: 3px 10px;
  border-radius: 4px;
  flex: 1;
  margin-left: 8px;
  font-family: monospace;
}
.ps-image-wrap {
  position: relative;
  line-height: 0;
}
.ps-image-wrap img {
  width: 100%;
  height: auto;
  display: block;
}
/* Numbered callout overlays — positioned via inline style in HTML */
.ps-callout {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #dc2626;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  z-index: 2;
  transform: translate(-50%, -50%);
}
.ps-legend {
  padding: 12px 16px;
  border-top: 1px solid #d4cbbe;
}
.ps-legend-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 13px;
  color: #3d3224;
  line-height: 1.5;
}
.ps-legend-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #dc2626;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.ps-caption {
  font-size: 12px;
  color: #3d3224;
  font-style: italic;
  padding: 8px 16px 12px;
}

/* Dark mode */
[data-theme="dark"] .portal-screenshot { background: #112436; border-color: #1a3348; }
[data-theme="dark"] .ps-header { background: #0f2b3d; border-bottom-color: #1a3348; }
[data-theme="dark"] .ps-url { background: #112436; color: #94a3b8; }
[data-theme="dark"] .ps-legend { border-top-color: #1a3348; }
[data-theme="dark"] .ps-legend-item { color: #94a3b8; }
[data-theme="dark"] .ps-caption { color: #64748b; }

/* Mobile responsive */
@media (max-width: 768px) {
  .id-arrow { width: 30px; height: 30px; font-size: 18px; line-height: 28px; }
  .id-viewport { padding: 10px; }
  .ds-header { flex-direction: column; gap: 8px; }
  .ds-choice-body { padding-left: 0; }
  .ds-consequence { padding-left: 0; }
  .ps-callout { width: 24px; height: 24px; font-size: 11px; }
}

/* ============================================================
   Environment Simulator Component
   ============================================================ */
.env-sim {
  margin: 28px 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.es-header { margin-bottom: 16px; }
.es-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 6px;
  background: #e6f1fb;
  color: #185fa5;
  margin-bottom: 6px;
}
.es-title { font-family: 'Fraunces', serif; font-size: 17px; font-weight: 700; color: #1a1612; margin-bottom: 4px; }
.es-desc { font-size: 13px; color: #3d3224; line-height: 1.6; }

.es-tenant {
  background: #f0eee6;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
}
.es-tenant-label { font-size: 11px; font-weight: 600; color: #3d3224; letter-spacing: 0.5px; margin-bottom: 10px; }

.es-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.es-metric {
  background: #f5f3ed;
  border-radius: 8px;
  padding: 10px 12px;
  text-align: center;
  border: 1px solid #d4cbbe;
  transition: all 0.3s;
}
.es-metric-val { font-size: 20px; font-weight: 700; color: #1a1612; }
.es-metric-label { font-size: 11px; color: #3d3224; margin-top: 2px; }
.es-metric.danger { border-color: #dc2626; }
.es-metric.danger .es-metric-val { color: #dc2626; }
.es-metric.warn { border-color: #d97706; }
.es-metric.warn .es-metric-val { color: #d97706; }
.es-metric.good { border-color: #059669; }
.es-metric.good .es-metric-val { color: #059669; }

.es-viz { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.es-viz-box { background: #f5f3ed; border-radius: 10px; border: 1px solid #d4cbbe; padding: 14px; }
.es-viz-title { font-size: 12px; font-weight: 600; color: #3d3224; margin-bottom: 10px; }
.es-bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.es-bar-label { font-size: 11px; color: #3d3224; min-width: 70px; }
.es-bar-track { flex: 1; height: 8px; background: #e3dacc; border-radius: 4px; overflow: hidden; }
.es-bar-fill { height: 100%; border-radius: 4px; transition: width 0.5s ease; }
.es-bar-val { font-size: 11px; font-weight: 600; min-width: 32px; text-align: right; color: #1a1612; }

.es-controls { margin-bottom: 16px; }
.es-controls-label { font-size: 12px; font-weight: 600; color: #3d3224; margin-bottom: 8px; }
.es-controls-grid { display: flex; flex-direction: column; gap: 6px; }
.es-ctrl {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #f5f3ed;
  border: 1px solid #d4cbbe;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
}
.es-ctrl:hover { border-color: #3d3224; }
.es-ctrl.active { border-color: #2563eb; background: #eff6ff; }

.es-ctrl-toggle {
  width: 38px;
  height: 22px;
  border-radius: 11px;
  background: #d4cbbe;
  position: relative;
  transition: background 0.2s;
  flex-shrink: 0;
}
.es-ctrl.active .es-ctrl-toggle { background: #2563eb; }
.es-ctrl-toggle::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.es-ctrl.active .es-ctrl-toggle::after { transform: translateX(16px); }
.es-ctrl-name { font-size: 13px; font-weight: 600; color: #1a1612; }
.es-ctrl-desc { font-size: 11px; color: #3d3224; }

.es-alert {
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.55;
  margin-bottom: 12px;
  display: none;
}
.es-alert.visible { display: block; }
.es-alert.danger { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.es-alert.warn { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.es-alert.good { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }

.es-audit {
  background: #f5f3ed;
  border: 1px solid #d4cbbe;
  border-radius: 10px;
  padding: 14px;
}
.es-audit-title { font-size: 12px; font-weight: 600; color: #3d3224; margin-bottom: 10px; }
.es-audit-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; font-size: 12px; border-bottom: 1px solid #e3dacc; }
.es-audit-row:last-child { border-bottom: none; }
.es-audit-ctrl { color: #1a1612; }
.es-audit-status {
  font-weight: 600;
  font-size: 11px;
  padding: 2px 10px;
  border-radius: 6px;
}
.es-audit-status.pass { background: #ecfdf5; color: #065f46; }
.es-audit-status.fail { background: #fef2f2; color: #991b1b; }

/* Dark mode */
[data-theme="dark"] .es-badge { background: #112436; color: #85b7eb; }
[data-theme="dark"] .es-title { color: #e2e8f0; }
[data-theme="dark"] .es-desc { color: #94a3b8; }
[data-theme="dark"] .es-tenant { background: #0f2b3d; }
[data-theme="dark"] .es-tenant-label { color: #94a3b8; }
[data-theme="dark"] .es-metric { background: #112436; border-color: #1a3348; }
[data-theme="dark"] .es-metric-val { color: #e2e8f0; }
[data-theme="dark"] .es-metric-label { color: #94a3b8; }
[data-theme="dark"] .es-viz-box { background: #112436; border-color: #1a3348; }
[data-theme="dark"] .es-viz-title { color: #94a3b8; }
[data-theme="dark"] .es-bar-label { color: #94a3b8; }
[data-theme="dark"] .es-bar-track { background: #1a3348; }
[data-theme="dark"] .es-bar-val { color: #e2e8f0; }
[data-theme="dark"] .es-ctrl { background: #112436; border-color: #1a3348; }
[data-theme="dark"] .es-ctrl:hover { border-color: #94a3b8; }
[data-theme="dark"] .es-ctrl.active { border-color: #3b82f6; background: #0c1f33; }
[data-theme="dark"] .es-ctrl-toggle { background: #1a3348; }
[data-theme="dark"] .es-ctrl-name { color: #e2e8f0; }
[data-theme="dark"] .es-ctrl-desc { color: #64748b; }
[data-theme="dark"] .es-alert.danger { background: #1f0a0a; color: #f09595; border-color: #501313; }
[data-theme="dark"] .es-alert.warn { background: #1a1505; color: #fac775; border-color: #412402; }
[data-theme="dark"] .es-alert.good { background: #041a12; color: #5dcaa5; border-color: #04342c; }
[data-theme="dark"] .es-audit { background: #112436; border-color: #1a3348; }
[data-theme="dark"] .es-audit-title { color: #94a3b8; }
[data-theme="dark"] .es-audit-row { border-bottom-color: #1a3348; }
[data-theme="dark"] .es-audit-ctrl { color: #e2e8f0; }
[data-theme="dark"] .es-audit-status.pass { background: #04342c; color: #5dcaa5; }
[data-theme="dark"] .es-audit-status.fail { background: #501313; color: #f09595; }

/* Mobile */
@media (max-width: 768px) {
  .es-metrics { grid-template-columns: repeat(2, 1fr); }
  .es-viz { grid-template-columns: 1fr; }
  .es-bar-label { min-width: 55px; font-size: 10px; }
}

/* ============================================================
   Inline Checkpoint Component
   ============================================================ */
.inline-checkpoint {
  margin: 28px 0;
  border: 1px solid #d4cbbe;
  border-radius: 10px;
  overflow: hidden;
  background: #f5f3ed;
}
.ic-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #e3dacc;
  border-bottom: 1px solid #d4cbbe;
  transition: background 0.3s;
}
.ic-header-correct { background: #ecfdf5; border-bottom-color: #a7f3d0; }
.ic-header-wrong { background: #fef2f2; border-bottom-color: #fecaca; }
.ic-icon { font-size: 16px; }
.ic-header-correct .ic-icon { color: #059669; }
.ic-header-wrong .ic-icon { color: #dc2626; }
.ic-label {
  font-size: 12px;
  font-weight: 600;
  color: #3d3224;
  letter-spacing: 0.3px;
}
.ic-header-correct .ic-label { color: #065f46; }
.ic-header-wrong .ic-label { color: #991b1b; }

.ic-question {
  padding: 14px 16px 10px;
  font-size: 14px;
  font-weight: 500;
  color: #1a1612;
  line-height: 1.55;
}
.ic-options {
  padding: 0 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ic-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #d4cbbe;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-size: 13px;
  color: #1a1612;
  line-height: 1.5;
  transition: all 0.15s;
  width: 100%;
}
.ic-option:hover:not(.ic-correct):not(.ic-wrong):not(.ic-dimmed) {
  border-color: #2563eb;
  background: #eff6ff;
}
.ic-option-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #e3dacc;
  color: #1a1612;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  transition: all 0.3s;
}
.ic-option-text { flex: 1; padding-top: 2px; }

/* States after answering */
.ic-correct {
  border-color: #059669;
  background: #ecfdf5;
}
.ic-correct .ic-option-letter {
  background: #059669;
  color: #fff;
}
.ic-wrong {
  border-color: #dc2626;
  background: #fef2f2;
}
.ic-wrong .ic-option-letter {
  background: #dc2626;
  color: #fff;
}
.ic-dimmed {
  opacity: 0.45;
  border-color: #e3dacc;
}

/* Explanation panel */
.ic-explanation {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  font-size: 13px;
  line-height: 1.55;
  border-top: 1px solid #d4cbbe;
  animation: ic-reveal 0.3s ease;
}
.ic-exp-correct { background: #f0fdf4; color: #065f46; }
.ic-exp-wrong { background: #fff7ed; color: #7c2d12; }
.ic-exp-icon { font-size: 15px; flex-shrink: 0; margin-top: 1px; }
.ic-exp-text { flex: 1; }

@keyframes ic-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Dark mode */
[data-theme="dark"] .inline-checkpoint { background: #112436; border-color: #1a3348; }
[data-theme="dark"] .ic-header { background: #0f2b3d; border-bottom-color: #1a3348; }
[data-theme="dark"] .ic-header-correct { background: #04342c; border-bottom-color: #085041; }
[data-theme="dark"] .ic-header-wrong { background: #501313; border-bottom-color: #791f1f; }
[data-theme="dark"] .ic-label { color: #94a3b8; }
[data-theme="dark"] .ic-header-correct .ic-label { color: #5dcaa5; }
[data-theme="dark"] .ic-header-wrong .ic-label { color: #f09595; }
[data-theme="dark"] .ic-question { color: #e2e8f0; }
[data-theme="dark"] .ic-option { background: #0f2b3d; border-color: #1a3348; color: #e2e8f0; }
[data-theme="dark"] .ic-option:hover:not(.ic-correct):not(.ic-wrong):not(.ic-dimmed) { border-color: #3b82f6; background: #0c1f33; }
[data-theme="dark"] .ic-option-letter { background: #1a3348; color: #e2e8f0; }
[data-theme="dark"] .ic-correct { border-color: #059669; background: #04342c; }
[data-theme="dark"] .ic-wrong { border-color: #dc2626; background: #501313; }
[data-theme="dark"] .ic-dimmed { opacity: 0.35; }
[data-theme="dark"] .ic-explanation { border-top-color: #1a3348; }
[data-theme="dark"] .ic-exp-correct { background: #04342c; color: #5dcaa5; }
[data-theme="dark"] .ic-exp-wrong { background: #2d1216; color: #fac775; }

/* ============================================================
   Attack-Telemetry Split Pane Component
   ============================================================ */
.attack-telemetry {
  margin: 28px 0;
  outline: none;
}
.at-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.at-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 6px;
  background: #fef2f2;
  color: #991b1b;
}
.at-title {
  font-family: 'Fraunces', serif;
  font-size: 17px;
  font-weight: 700;
  color: #1a1612;
}
.at-steps {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.at-step-btn {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid #d4cbbe;
  background: transparent;
  color: #3d3224;
  transition: all 0.15s;
}
.at-step-btn:hover { border-color: #3d3224; }
.at-step-btn.active { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.at-step-btn.visited { border-color: #3d3224; color: #1a1612; }

.at-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
.at-pane {
  border-radius: 10px;
  border: 1px solid #d4cbbe;
  overflow: hidden;
}
.at-pane-header {
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.at-pane-icon { font-size: 14px; }
.at-attack .at-pane-header { background: #4a1b0c; color: #f5c4b3; }
.at-defend .at-pane-header { background: #042c53; color: #b5d4f4; }
.at-pane-body { padding: 14px; min-height: 180px; background: #f5f3ed; }

.at-cmd {
  font-family: 'Menlo', 'Consolas', 'Courier New', monospace;
  font-size: 12px;
  line-height: 1.6;
  color: #1a1612;
  background: #e3dacc;
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 10px;
  white-space: pre-wrap;
  word-break: break-all;
}
.at-narr {
  font-size: 13px;
  line-height: 1.55;
  color: #3d3224;
}
.at-tags { margin-bottom: 8px; }
.at-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  margin-right: 4px;
  margin-bottom: 4px;
}
.at-tag-mitre { background: #fffbeb; color: #92400e; }
.at-tag-table { background: #e6f1fb; color: #185fa5; }
.at-tag-verdict { background: #ecfdf5; color: #065f46; }

.at-nav {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.at-nav-btn {
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid #d4cbbe;
  border-radius: 6px;
  background: #f5f3ed;
  color: #1a1612;
  cursor: pointer;
  transition: all 0.15s;
}
.at-nav-btn:hover:not(:disabled) { border-color: #3d3224; }
.at-nav-btn:disabled { cursor: default; }

/* Dark mode */
[data-theme="dark"] .at-badge { background: #501313; color: #f09595; }
[data-theme="dark"] .at-title { color: #e2e8f0; }
[data-theme="dark"] .at-step-btn { border-color: #1a3348; color: #94a3b8; }
[data-theme="dark"] .at-step-btn:hover { border-color: #94a3b8; }
[data-theme="dark"] .at-step-btn.active { background: #501313; color: #f09595; border-color: #791f1f; }
[data-theme="dark"] .at-step-btn.visited { border-color: #94a3b8; color: #e2e8f0; }
[data-theme="dark"] .at-pane { border-color: #1a3348; }
[data-theme="dark"] .at-pane-body { background: #112436; }
[data-theme="dark"] .at-cmd { background: #0f2b3d; color: #e2e8f0; }
[data-theme="dark"] .at-narr { color: #94a3b8; }
[data-theme="dark"] .at-tag-mitre { background: #412402; color: #fac775; }
[data-theme="dark"] .at-tag-table { background: #042c53; color: #85b7eb; }
[data-theme="dark"] .at-tag-verdict { background: #04342c; color: #5dcaa5; }
[data-theme="dark"] .at-nav-btn { background: #112436; border-color: #1a3348; color: #e2e8f0; }
[data-theme="dark"] .at-nav-btn:hover:not(:disabled) { border-color: #94a3b8; }

/* Mobile — stack panes vertically */
@media (max-width: 768px) {
  .at-split { grid-template-columns: 1fr; }
  .at-pane-body { min-height: 120px; }
  .at-cmd { font-size: 11px; }
}

/* ---- Reading progress bar (Feature 3) ---- */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, #E86A2A, #d97706);
  z-index: 9999;
  transition: width 80ms linear;
  pointer-events: none;
}

/* ---- Mobile heading TOC (Feature 4) ---- */
.mobile-heading-toc {
  display: none;
}
.mht-divider {
  font-size: 11px;
  font-weight: 600;
  color: #6b5d4d;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 12px 12px 6px;
  border-top: 1px solid #d4cbbe;
  margin-top: 4px;
}
.mht-link {
  display: block;
  padding: 6px 12px;
  font-size: 13px;
  color: #1a1612;
  text-decoration: none;
  border-radius: 4px;
  line-height: 1.4;
}
.mht-link:hover {
  background: #e3dacc;
  color: #E86A2A;
}
@media (max-width: 768px) {
  .mobile-heading-toc {
    display: block;
  }
}

/* ============================================================
   FP COST CALCULATOR — interactive cost-of-noise tool
   ============================================================ */

.fp-cost-calc {
  background: #e3dacc;
  border: 1px solid #d4cbbe;
  border-radius: 8px;
  padding: 24px;
  margin: 24px 0;
  font-family: 'Inter', -apple-system, sans-serif;
}

.fpc-header { margin-bottom: 20px; }
.fpc-badge {
  display: inline-block;
  background: #1a3f55;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 10px;
}
.fpc-title {
  font-family: 'Fraunces', serif;
  font-size: 19px;
  font-weight: 700;
  color: #1a1612;
  margin-bottom: 6px;
  line-height: 1.3;
}
.fpc-desc {
  font-size: 13px;
  color: #3d3224;
  line-height: 1.5;
}

.fpc-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 18px;
}

@media (max-width: 768px) {
  .fpc-main { grid-template-columns: 1fr; }
}

.fpc-controls {
  background: #f5f3ed;
  border: 1px solid #d4cbbe;
  border-radius: 6px;
  padding: 18px 20px;
}

.fpc-slider {
  margin-bottom: 18px;
}
.fpc-slider:last-child { margin-bottom: 0; }

.fpc-slider-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.fpc-slider-label {
  font-size: 13px;
  font-weight: 600;
  color: #1a1612;
}
.fpc-slider-value {
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 14px;
  font-weight: 700;
  color: #E86A2A;
  background: #fef7f3;
  padding: 2px 10px;
  border-radius: 4px;
  border: 1px solid #fed7c3;
}

.fpc-slider-input {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: #d4cbbe;
  border-radius: 3px;
  outline: none;
  margin: 4px 0;
}
.fpc-slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: #E86A2A;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.fpc-slider-input::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: #E86A2A;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.fpc-slider-range {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #6b5d4d;
  margin-top: 2px;
}

.fpc-output {
  background: #0F2B3C;
  color: #e2e8f0;
  border-radius: 6px;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.fpc-output-label {
  font-size: 12px;
  font-weight: 600;
  color: #93c5fd;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.fpc-output-value {
  font-family: 'Fraunces', serif;
  font-size: 42px;
  font-weight: 700;
  color: #fdba74;
  line-height: 1.1;
  margin-bottom: 6px;
}
.fpc-output-detail {
  font-size: 12px;
  color: #94a3b8;
  margin-bottom: 14px;
}

.fpc-divider {
  height: 1px;
  background: #1e3a52;
  margin: 6px 0 14px;
}

.fpc-secondary {
  margin-bottom: 14px;
}
.fpc-sec-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 13px;
}
.fpc-sec-label { color: #cbd5e1; }
.fpc-sec-value {
  color: #fff;
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-weight: 600;
}

.fpc-impact {
  background: rgba(232, 106, 42, 0.12);
  border: 1px solid rgba(232, 106, 42, 0.4);
  border-radius: 6px;
  padding: 12px 14px;
  margin-top: auto;
}
.fpc-impact-label {
  font-size: 11px;
  font-weight: 700;
  color: #fed7c3;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.fpc-impact-stats {
  display: flex;
  gap: 16px;
}
.fpc-impact-stat { flex: 1; }
.fpc-impact-val {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 700;
  color: #fdba74;
  line-height: 1.1;
}
.fpc-impact-cap {
  font-size: 11px;
  color: #cbd5e1;
  line-height: 1.3;
  margin-top: 2px;
}

.fpc-footer {
  background: #f5f3ed;
  border: 1px solid #d4cbbe;
  border-radius: 6px;
  padding: 14px 18px;
  font-size: 13px;
  color: #1a1612;
  line-height: 1.6;
}
.fpc-footer strong { color: #1a3f55; }

/* ============================================================
   SOC MATURITY ASSESSMENT — interactive self-assessment tool
   ============================================================ */

.soc-maturity-assessment {
  background: #e3dacc;
  border: 1px solid #d4cbbe;
  border-radius: 8px;
  padding: 24px;
  margin: 24px 0;
  font-family: 'Inter', -apple-system, sans-serif;
}

.sma-header { margin-bottom: 20px; }
.sma-badge {
  display: inline-block;
  background: #1a3f55;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 10px;
}
.sma-title {
  font-family: 'Fraunces', serif;
  font-size: 21px;
  font-weight: 700;
  color: #1a1612;
  margin-bottom: 6px;
  line-height: 1.3;
}
.sma-desc {
  font-size: 13px;
  color: #3d3224;
  line-height: 1.5;
}

.sma-progress {
  background: #f5f3ed;
  border: 1px solid #d4cbbe;
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 20px;
  position: sticky;
  top: 70px;
  z-index: 10;
}
.sma-progress-bar {
  background: #d4cbbe;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 6px;
}
.sma-progress-fill {
  background: linear-gradient(90deg, #E86A2A 0%, #d97706 100%);
  height: 100%;
  width: 0;
  transition: width 0.3s ease;
}
.sma-progress-text {
  font-size: 12px;
  font-weight: 600;
  color: #6b5d4d;
  text-align: right;
}

.sma-questions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 20px;
}

.sma-question {
  background: #f5f3ed;
  border: 1px solid #d4cbbe;
  border-radius: 6px;
  padding: 18px 20px;
}

.sma-q-head {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
  align-items: flex-start;
}
.sma-q-num {
  background: #1a3f55;
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.sma-q-meta { flex: 1; }
.sma-q-cap {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #E86A2A;
  margin-bottom: 2px;
}
.sma-q-text {
  font-family: 'Fraunces', serif;
  font-size: 16px;
  font-weight: 700;
  color: #1a1612;
  line-height: 1.4;
}

.sma-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sma-option {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 12px;
  background: #fff;
  border: 1.5px solid #d4cbbe;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s;
}
.sma-option:hover {
  border-color: #1a3f55;
  background: #f0eee6;
}
.sma-option.selected {
  border-color: #E86A2A;
  background: #fef7f3;
  box-shadow: 0 0 0 1px #E86A2A;
}
.sma-option-badge {
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 4px;
  flex-shrink: 0;
  margin-top: 1px;
}
.sma-option-text {
  font-size: 13px;
  color: #1a1612;
  line-height: 1.5;
}

.sma-submit-wrap {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}
.sma-submit {
  background: #E86A2A;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 14px 32px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.sma-submit:hover:not(:disabled) {
  background: #d4571f;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.sma-submit:disabled {
  background: #c4b9a8;
  cursor: not-allowed;
}

/* ===== RESULT VIEW ===== */

.sma-result {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sma-result-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  background: #f5f3ed;
  border: 1px solid #d4cbbe;
  border-radius: 6px;
  padding: 20px 24px;
}
.sma-result-score {
  text-align: right;
}
.sma-score-num {
  font-family: 'Fraunces', serif;
  font-size: 48px;
  font-weight: 700;
  color: #E86A2A;
  line-height: 1;
}
.sma-score-max {
  font-size: 24px;
  color: #6b5d4d;
}
.sma-score-label {
  font-size: 12px;
  color: #6b5d4d;
  margin-top: 4px;
}

.sma-profile-grid {
  background: #f5f3ed;
  border: 1px solid #d4cbbe;
  border-radius: 6px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sma-profile-row {
  display: grid;
  grid-template-columns: 160px 1fr 44px;
  gap: 12px;
  align-items: center;
  padding: 4px 0;
}
.sma-profile-row.constraint {
  background: rgba(220, 38, 38, 0.06);
  border-radius: 4px;
  padding: 6px 8px;
  margin: 0 -8px;
}
.sma-profile-cap {
  font-weight: 600;
  font-size: 13px;
  color: #1a1612;
}
.sma-constraint-tag {
  background: #dc2626;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 0.5px;
  margin-left: 4px;
  vertical-align: middle;
}
.sma-profile-bar {
  background: #e3dacc;
  height: 14px;
  border-radius: 7px;
  overflow: hidden;
}
.sma-profile-fill {
  height: 100%;
  transition: width 0.6s ease;
  border-radius: 7px;
}
.sma-profile-level {
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  text-align: center;
  padding: 2px 0;
  border-radius: 3px;
}

.sma-constraint-box {
  background: #0F2B3C;
  color: #e2e8f0;
  border-radius: 6px;
  padding: 20px 24px;
  border-left: 4px solid #dc2626;
}
.sma-cb-label {
  font-size: 11px;
  font-weight: 700;
  color: #fdba74;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.sma-cb-name {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}
.sma-cb-desc {
  font-size: 13px;
  color: #cbd5e1;
  line-height: 1.6;
}

.sma-plan {
  background: #f5f3ed;
  border: 1px solid #d4cbbe;
  border-left: 4px solid #E86A2A;
  border-radius: 6px;
  padding: 20px 24px;
}
.sma-plan-label {
  font-size: 11px;
  font-weight: 700;
  color: #E86A2A;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.sma-plan-title {
  font-family: 'Fraunces', serif;
  font-size: 20px;
  font-weight: 700;
  color: #1a1612;
  margin-bottom: 4px;
}
.sma-plan-effort {
  font-size: 13px;
  color: #6b5d4d;
  margin-bottom: 12px;
  font-style: italic;
}
.sma-plan-deliverable {
  font-size: 14px;
  color: #1a1612;
  line-height: 1.6;
  margin-bottom: 14px;
}
.sma-plan-reference {
  background: rgba(26, 63, 85, 0.08);
  border: 1px solid rgba(26, 63, 85, 0.2);
  border-radius: 4px;
  padding: 10px 14px;
  font-size: 13px;
  color: #1a3f55;
  line-height: 1.5;
}

.sma-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.sma-restart, .sma-copy {
  background: #f5f3ed;
  border: 1.5px solid #d4cbbe;
  color: #1a1612;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.sma-restart:hover, .sma-copy:hover {
  background: #fff;
  border-color: #1a3f55;
}
.sma-copy {
  background: #1a3f55;
  color: #fff;
  border-color: #1a3f55;
}
.sma-copy:hover {
  background: #143247;
  color: #fff;
}

@media (max-width: 768px) {
  .sma-result-head { flex-direction: column; }
  .sma-result-score { text-align: left; }
  .sma-profile-row { grid-template-columns: 100px 1fr 36px; }
  .sma-actions { flex-direction: column; align-items: stretch; }
}

/* ============================================================
   TRIAGE DECISION SIMULATOR — 3-scenario L1 triage practice
   ============================================================ */

.triage-simulator {
  background: #e3dacc;
  border: 1px solid #d4cbbe;
  border-radius: 8px;
  padding: 24px;
  margin: 24px 0;
  font-family: 'Inter', -apple-system, sans-serif;
}

.trs-header { margin-bottom: 20px; }
.trs-badge {
  display: inline-block;
  background: #1a3f55;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 6px;
}
.trs-progress {
  display: inline-block;
  background: #E86A2A;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  border-radius: 4px;
  margin-left: 8px;
  margin-bottom: 6px;
}
.trs-title {
  font-family: 'Fraunces', serif;
  font-size: 21px;
  font-weight: 700;
  color: #1a1612;
  margin-bottom: 6px;
  line-height: 1.3;
}
.trs-desc {
  font-size: 13px;
  color: #3d3224;
  line-height: 1.5;
}

.trs-alert {
  background: #0F2B3C;
  color: #e2e8f0;
  border-radius: 6px;
  padding: 16px 20px;
  margin-bottom: 12px;
  border-left: 4px solid #E86A2A;
}
.trs-alert-label {
  font-size: 10px;
  font-weight: 700;
  color: #fdba74;
  letter-spacing: 1px;
  margin-bottom: 10px;
}
.trs-alert-row {
  display: flex;
  padding: 4px 0;
  font-size: 13px;
  border-bottom: 1px solid #1e3a52;
}
.trs-alert-row:last-child { border-bottom: none; }
.trs-alert-key {
  color: #94a3b8;
  width: 80px;
  flex-shrink: 0;
}
.trs-alert-val {
  color: #fff;
  font-family: 'JetBrains Mono', Consolas, monospace;
}
.trs-sev-medium { color: #fdba74 !important; font-weight: 600; }
.trs-sev-high { color: #fca5a5 !important; font-weight: 600; }
.trs-sev-critical { color: #f87171 !important; font-weight: 700; }
.trs-sev-low { color: #93c5fd !important; }

.trs-context {
  background: #f5f3ed;
  border: 1px solid #d4cbbe;
  border-left: 4px solid #2563eb;
  border-radius: 5px;
  padding: 12px 16px;
  font-size: 13px;
  color: #1a1612;
  line-height: 1.6;
  margin-bottom: 18px;
}

.trs-section-label {
  font-size: 12px;
  font-weight: 700;
  color: #6b5d4d;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin: 18px 0 10px;
}

.trs-enrichments {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}
.trs-enrichment {
  background: #f5f3ed;
  border: 1px solid #d4cbbe;
  border-radius: 5px;
  overflow: hidden;
}
.trs-enrich-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  gap: 12px;
}
.trs-enrich-info { flex: 1; min-width: 0; }
.trs-enrich-name {
  font-weight: 600;
  font-size: 13px;
  color: #1a1612;
}
.trs-enrich-desc {
  font-size: 11px;
  color: #6b5d4d;
  margin-top: 1px;
}
.trs-enrich-btn {
  background: #1a3f55;
  color: #fff;
  border: none;
  padding: 6px 14px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: all 0.15s;
}
.trs-enrich-btn:hover:not(:disabled) { background: #143247; }
.trs-enrich-btn:disabled {
  background: #059669;
  cursor: default;
}
.trs-enrich-output {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s;
}
.trs-enrich-output.visible {
  max-height: 500px;
  padding: 0;
}
.trs-enrich-output pre {
  margin: 0;
  padding: 12px 16px;
  background: #0F2B3C;
  color: #e2e8f0;
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
  border-top: 1px solid #d4cbbe;
}

.trs-classify {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
@media (max-width: 600px) {
  .trs-classify { grid-template-columns: 1fr; }
}
.trs-classify-btn {
  background: #f5f3ed;
  border: 1.5px solid #d4cbbe;
  border-radius: 5px;
  padding: 12px 16px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.trs-classify-btn:hover {
  border-color: #E86A2A;
  background: #fef7f3;
  transform: translateY(-1px);
}
.trs-classify-btn strong {
  color: #1a1612;
  font-size: 14px;
  font-weight: 700;
}
.trs-classify-btn span {
  color: #6b5d4d;
  font-size: 12px;
}
.trs-classify-btn.trs-escalate {
  background: #fff8f3;
  border-color: #fed7c3;
}
.trs-classify-btn.trs-escalate strong { color: #E86A2A; }

/* Result view */
.trs-result {
  padding: 20px 24px;
  border-radius: 6px;
  margin-bottom: 16px;
}
.trs-result.correct {
  background: #ecfdf5;
  border: 2px solid #059669;
}
.trs-result.incorrect {
  background: #fef2f2;
  border: 2px solid #dc2626;
}
.trs-result-head {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 12px;
}
.trs-result-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
}
.trs-result.correct .trs-result-icon { background: #059669; }
.trs-result.incorrect .trs-result-icon { background: #dc2626; }
.trs-result-label {
  font-family: 'Fraunces', serif;
  font-size: 19px;
  font-weight: 700;
  color: #1a1612;
}
.trs-result-row {
  display: flex;
  padding: 4px 0;
  font-size: 13px;
}
.trs-result-key {
  width: 110px;
  color: #6b5d4d;
}
.trs-result-val {
  color: #1a1612;
  font-weight: 600;
}
.trs-correct-answer { color: #059669; }

.trs-explanation {
  background: #f5f3ed;
  border: 1px solid #d4cbbe;
  border-left: 4px solid #2563eb;
  border-radius: 5px;
  padding: 14px 18px;
  margin-bottom: 12px;
}
.trs-exp-label {
  font-size: 11px;
  font-weight: 700;
  color: #2563eb;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.trs-exp-text {
  font-size: 13px;
  color: #1a1612;
  line-height: 1.65;
}

.trs-wrong-explanation {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-left: 4px solid #d97706;
  border-radius: 5px;
  padding: 14px 18px;
  margin-bottom: 12px;
}
.trs-wrong-label {
  font-size: 11px;
  font-weight: 700;
  color: #d97706;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.trs-wrong-text {
  font-size: 13px;
  color: #1a1612;
  line-height: 1.65;
}

.trs-missed {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-left: 4px solid #dc2626;
  border-radius: 5px;
  padding: 14px 18px;
  margin-bottom: 12px;
}
.trs-missed-label {
  font-size: 12px;
  font-weight: 700;
  color: #dc2626;
  margin-bottom: 6px;
}
.trs-missed-text {
  font-size: 13px;
  color: #1a1612;
  line-height: 1.65;
  margin-bottom: 8px;
}
.trs-missed-list {
  font-size: 12px;
  color: #6b5d4d;
  font-style: italic;
}

.trs-actions {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}
.trs-next, .trs-restart {
  background: #E86A2A;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 12px 28px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.trs-next:hover, .trs-restart:hover {
  background: #d4571f;
  transform: translateY(-1px);
}

/* Summary */
.trs-summary {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.trs-summary-score {
  display: flex;
  gap: 24px;
  background: #f5f3ed;
  border: 1px solid #d4cbbe;
  border-radius: 6px;
  padding: 20px 24px;
  align-items: center;
}
@media (max-width: 600px) {
  .trs-summary-score { flex-direction: column; align-items: flex-start; }
}
.trs-score-circle {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.trs-score-circle.high { background: #059669; }
.trs-score-circle.mid { background: #d97706; }
.trs-score-circle.low { background: #dc2626; }
.trs-score-pct {
  font-family: 'Fraunces', serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
}
.trs-score-lbl {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
}
.trs-summary-context {
  flex: 1;
}
.trs-summary-context p {
  font-size: 13px;
  color: #1a1612;
  line-height: 1.65;
  margin: 0 0 8px;
}
.trs-summary-context p:last-child { margin-bottom: 0; }

.trs-summary-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #f5f3ed;
  border: 1px solid #d4cbbe;
  border-radius: 6px;
  padding: 14px 18px;
}
.trs-summary-row {
  display: flex;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 4px;
  align-items: flex-start;
}
.trs-summary-row.correct { background: #ecfdf5; }
.trs-summary-row.incorrect { background: #fef2f2; }
.trs-sum-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.trs-summary-row.correct .trs-sum-icon { background: #059669; }
.trs-summary-row.incorrect .trs-sum-icon { background: #dc2626; }
.trs-sum-meta { flex: 1; }
.trs-sum-name {
  font-weight: 600;
  font-size: 13px;
  color: #1a1612;
}
.trs-sum-detail {
  font-size: 12px;
  color: #3d3224;
  margin-top: 2px;
}
.trs-sum-missed {
  font-size: 11px;
  color: #dc2626;
  margin-top: 2px;
  font-style: italic;
}

.trs-conversion {
  background: #0F2B3C;
  color: #e2e8f0;
  border-radius: 6px;
  padding: 18px 22px;
  border-left: 4px solid #E86A2A;
}
.trs-conv-label {
  font-size: 11px;
  font-weight: 700;
  color: #fdba74;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.trs-conversion p {
  font-size: 13px;
  color: #cbd5e1;
  line-height: 1.65;
  margin: 0;
}
.trs-conversion strong { color: #fff; }

/* ============================================================
   DETECTION COVERAGE ESTIMATOR — data sources + rules → coverage
   ============================================================ */

.coverage-estimator {
  background: #e3dacc;
  border: 1px solid #d4cbbe;
  border-radius: 8px;
  padding: 24px;
  margin: 24px 0;
  font-family: 'Inter', -apple-system, sans-serif;
}

.cov-header { margin-bottom: 20px; }
.cov-badge {
  display: inline-block;
  background: #1a3f55;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 10px;
}
.cov-title {
  font-family: 'Fraunces', serif;
  font-size: 21px;
  font-weight: 700;
  color: #1a1612;
  margin-bottom: 6px;
  line-height: 1.3;
}
.cov-desc {
  font-size: 13px;
  color: #3d3224;
  line-height: 1.5;
}
.cov-desc-sm {
  font-size: 12px;
  color: #6b5d4d;
  line-height: 1.5;
  margin-bottom: 12px;
}

.cov-form { display: flex; flex-direction: column; gap: 4px; }
.cov-section-label {
  font-size: 13px;
  font-weight: 700;
  color: #1a1612;
  margin: 14px 0 4px;
}

.cov-sources {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 4px;
}
@media (max-width: 600px) {
  .cov-sources { grid-template-columns: 1fr; }
}
.cov-source {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  background: #f5f3ed;
  border: 1px solid #d4cbbe;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s;
}
.cov-source:hover { border-color: #1a3f55; }
.cov-source input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
  cursor: pointer;
}
.cov-source-name {
  font-weight: 600;
  font-size: 13px;
  color: #1a1612;
}
.cov-source-desc {
  font-size: 11px;
  color: #6b5d4d;
  margin-top: 1px;
  line-height: 1.5;
}

.cov-rules {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 8px;
}
@media (max-width: 600px) {
  .cov-rules { grid-template-columns: 1fr; }
}
.cov-rule-input {
  background: #f5f3ed;
  border: 1px solid #d4cbbe;
  border-radius: 5px;
  padding: 12px 14px;
}
.cov-rule-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #1a1612;
  margin-bottom: 6px;
}
.cov-rule-input input[type="number"] {
  width: 100%;
  padding: 8px 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
  font-weight: 700;
  color: #E86A2A;
  background: #fff;
  border: 1px solid #d4cbbe;
  border-radius: 4px;
  margin-bottom: 4px;
}
.cov-rule-hint {
  font-size: 11px;
  color: #6b5d4d;
  font-style: italic;
}

.cov-submit-wrap {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}
.cov-submit {
  background: #E86A2A;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 14px 32px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.cov-submit:hover {
  background: #d4571f;
  transform: translateY(-1px);
}

/* Result */
.cov-result { display: flex; flex-direction: column; gap: 16px; }

.cov-score-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 12px;
}
@media (max-width: 600px) {
  .cov-score-row { grid-template-columns: 1fr; }
}
.cov-score-card {
  background: #f5f3ed;
  border: 1px solid #d4cbbe;
  border-radius: 6px;
  padding: 16px 20px;
  text-align: center;
}
.cov-score-pct {
  font-family: 'Fraunces', serif;
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
}
.cov-score-num {
  font-family: 'Fraunces', serif;
  font-size: 36px;
  font-weight: 700;
  color: #1a1612;
  line-height: 1;
}
.cov-score-lbl {
  font-size: 11px;
  color: #6b5d4d;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 6px;
}

.cov-heatmap {
  background: #f5f3ed;
  border: 1px solid #d4cbbe;
  border-radius: 6px;
  padding: 18px 22px;
}
.cov-heatmap-label {
  font-size: 12px;
  font-weight: 700;
  color: #1a1612;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.cov-tactic-row {
  display: grid;
  grid-template-columns: 150px 1fr 50px 90px;
  gap: 12px;
  align-items: center;
  padding: 5px 0;
}
.cov-tactic-name {
  font-size: 12px;
  font-weight: 600;
  color: #1a1612;
}
.cov-tactic-bar {
  background: #e3dacc;
  height: 14px;
  border-radius: 7px;
  overflow: hidden;
}
.cov-tactic-fill {
  height: 100%;
  transition: width 0.6s ease;
  border-radius: 7px;
}
.cov-tactic-pct {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  text-align: right;
}
.cov-tactic-lbl {
  font-size: 11px;
  font-weight: 600;
}
@media (max-width: 600px) {
  .cov-tactic-row { grid-template-columns: 100px 1fr 36px; }
  .cov-tactic-lbl { display: none; }
}

.cov-gaps-label {
  font-size: 13px;
  font-weight: 700;
  color: #1a1612;
  margin-top: 6px;
}
.cov-gaps {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cov-gap {
  display: flex;
  gap: 14px;
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-left: 4px solid #dc2626;
  border-radius: 5px;
  padding: 12px 16px;
}
.cov-gap-rank {
  background: #dc2626;
  color: #fff;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.cov-gap-content { flex: 1; }
.cov-gap-name {
  font-weight: 700;
  font-size: 14px;
  color: #1a1612;
}
.cov-gap-techniques {
  font-size: 11px;
  color: #6b5d4d;
  margin: 2px 0 6px;
}
.cov-gap-fix {
  font-size: 12px;
  color: #1a1612;
  line-height: 1.6;
}
.cov-gap-fix strong { color: #dc2626; }

.cov-context {
  background: #f5f3ed;
  border: 1px solid #d4cbbe;
  border-left: 4px solid #2563eb;
  border-radius: 5px;
  padding: 14px 18px;
}
.cov-context p {
  font-size: 13px;
  color: #1a1612;
  line-height: 1.65;
  margin: 0 0 8px;
}
.cov-context p:last-child { margin-bottom: 0; }

.cov-actions {
  display: flex;
  justify-content: center;
}
.cov-restart {
  background: #f5f3ed;
  border: 1.5px solid #d4cbbe;
  color: #1a1612;
  padding: 10px 24px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.cov-restart:hover {
  background: #fff;
  border-color: #1a3f55;
}

/* ============================================================
   KQL WORKBENCH v2
   Microsoft Sentinel / Defender Advanced Hunting visual language:
   dark editor surface, dense results grid, sticky toolbar, system
   fonts, minimal chrome.
   ============================================================ */

/* === SCOPED RESET ===
   Platform `.module-content pre/table/code/th/td` rules apply dark
   gradient backgrounds, padding, and borders that beat component
   classes on specificity. Clear those decorations within the workbench
   so component styles can take over without !important. */
.kql-workbench pre,
.kql-workbench code,
.kql-workbench table,
.kql-workbench thead,
.kql-workbench tbody,
.kql-workbench tr,
.kql-workbench th,
.kql-workbench td,
.kql-workbench ul,
.kql-workbench li {
  background: none;
  background-image: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.kql-workbench tbody tr:nth-child(even),
.kql-workbench tbody tr:hover { background: transparent; }

.kql-workbench {
  margin: 28px 0;
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 13px;
  color: #d6dde4;
  line-height: 1.5;
}

/* === CARD ===
   Outer container — dark frame matching Defender portal chrome */

/* ══════════════════════════════════════════════════════════════
   KQL WORKBENCH — Parchment theme
   Editor stays dark (code editor convention).
   Everything else matches the site parchment palette.
   ══════════════════════════════════════════════════════════════ */

.kqlwb-card {
  background: #f5f3ed;
  border: 1px solid #d4cbbe;
  border-radius: 8px;
  overflow: hidden;
}

/* === HEADER === */
.kqlwb-head {
  padding: 14px 18px;
  background: #e3dacc;
  border-bottom: 1px solid #d4cbbe;
  color: #1a1612;
}
.kqlwb-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.kqlwb-head-left,
.kqlwb-head-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.kqlwb-badge {
  display: inline-flex;
  align-items: center;
  background: #2563eb;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 3px 9px;
  border-radius: 4px;
  line-height: 1.4;
}
.kqlwb-env {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #6b5d4d;
  font-weight: 600;
  letter-spacing: 0.2px;
}
.kqlwb-env::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #059669;
  border-radius: 50%;
}
.kqlwb-solved {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #059669;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 2px 0;
}
.kqlwb-solved-ico { width: 12px; height: 12px; color: #059669; }
.kqlwb-prompt {
  font-size: 13px;
  line-height: 1.55;
  color: #1a1612;
  font-weight: 400;
}

/* === SCHEMA STRIP === */
.kqlwb-schema {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 18px;
  background: #f0eee6;
  border-bottom: 1px solid #d4cbbe;
  flex-wrap: wrap;
}
.kqlwb-schema-lbl {
  font-size: 10px;
  font-weight: 700;
  color: #6b5d4d;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.kqlwb-schema-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.kqlwb-schema-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid #d4cbbe;
  color: #1a1612;
  font-family: 'Cascadia Code', 'JetBrains Mono', Consolas, monospace;
  font-size: 11.5px;
  font-weight: 500;
  padding: 3px 9px 3px 7px;
  border-radius: 4px;
}
.kqlwb-schema-dot {
  width: 6px;
  height: 6px;
  background: #2563eb;
  border-radius: 2px;
}

/* === TOOLBAR === */
.kqlwb-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  background: #e3dacc;
  border-bottom: 1px solid #d4cbbe;
}
.kqlwb-tb-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: #3d3224;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  line-height: 1;
  white-space: nowrap;
}
.kqlwb-tb-btn:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 1px;
}
.kqlwb-tb-btn:disabled { cursor: not-allowed; opacity: 0.45; }
.kqlwb-tb-ico { width: 12px; height: 12px; flex-shrink: 0; color: currentColor; }
.kqlwb-tb-divider {
  width: 1px;
  height: 18px;
  background: #d4cbbe;
  margin: 0 4px;
}

/* Run — blue */
.kqlwb-tb-run {
  background: #2563eb;
  color: #fff;
  padding: 6px 14px;
}
.kqlwb-tb-run:hover:not(:disabled) { background: #1d4ed8; }
.kqlwb-tb-run:active:not(:disabled) { background: #1e40af; }
.kqlwb-tb-run:disabled { background: #d4cbbe; color: #6b5d4d; }
.kqlwb-tb-run.is-running { background: #6b5d4d; color: #fff; }

/* Check — green */
.kqlwb-tb-check {
  background: #059669;
  color: #fff;
  padding: 6px 14px;
}
.kqlwb-tb-check:hover:not(:disabled) { background: #047857; }
.kqlwb-tb-check:active:not(:disabled) { background: #065f46; }
.kqlwb-tb-check:disabled { background: #d4cbbe; color: #6b5d4d; }
.kqlwb-tb-check.is-running { background: #6b5d4d; color: #fff; }

.kqlwb-tb-ghost { color: #6b5d4d; }
.kqlwb-tb-ghost:hover:not(:disabled) {
  background: #d4cbbe;
  color: #1a1612;
}
.kqlwb-tb-ghost.is-active {
  background: #dbeafe;
  color: #2563eb;
}

/* Inline confirm — amber */
.kqlwb-tb-btn.is-confirming {
  background: #d97706;
  color: #fff;
  font-weight: 700;
  animation: kqlwb-confirm-pulse 1.2s ease-in-out infinite;
}
.kqlwb-tb-btn.is-confirming:hover { background: #b45309; }
.kqlwb-tb-btn.is-confirming .kqlwb-tb-ico { color: #fff; }
@keyframes kqlwb-confirm-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.4); }
  50%      { box-shadow: 0 0 0 4px rgba(217, 119, 6, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .kqlwb-tb-btn.is-confirming { animation: none; }
}

.kqlwb-tb-tiny {
  padding: 3px 8px;
  font-size: 11px;
  color: #6b5d4d;
  border: 1px solid #d4cbbe;
}
.kqlwb-tb-tiny:hover { background: #d4cbbe; color: #1a1612; }

.kqlwb-tb-spacer { flex: 1 1 auto; }

.kqlwb-tb-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-right: 6px;
  font-size: 10.5px;
  color: #6b5d4d;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.kqlwb-tb-hint kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 4px;
  background: #f5f3ed;
  border: 1px solid #d4cbbe;
  border-radius: 3px;
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: #3d3224;
  line-height: 1;
}
.kqlwb-tb-hint-text { margin-left: 2px; }

/* === EDITOR (dark — code editor convention) === */
.kqlwb-editor-area {
  background: #0F2B3C;
  border-bottom: 1px solid #d4cbbe;
  position: relative;
}
.kql-workbench .kqlwb-editor {
  display: flex;
  position: relative;
  font-family: 'Cascadia Code', 'JetBrains Mono', Consolas, 'Liberation Mono', monospace;
  font-size: 13px;
  line-height: 20px;
}
.kql-workbench .kqlwb-gutter {
  flex: 0 0 auto;
  width: 44px;
  padding: 12px 10px 12px 0;
  text-align: right;
  color: #5a7a8a;
  background: #0a2230;
  border-right: 1px solid #1a3f55;
  user-select: none;
  white-space: pre;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  font-size: 12px;
}
.kql-workbench .kqlwb-scroller {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}
.kql-workbench .kqlwb-highlight,
.kql-workbench .kqlwb-input {
  margin: 0;
  padding: 12px 16px;
  border: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  white-space: pre;
  word-wrap: normal;
  overflow: auto;
  tab-size: 2;
  -moz-tab-size: 2;
}
.kql-workbench .kqlwb-highlight {
  position: absolute;
  inset: 0;
  color: #e2e8f0;
  background: transparent;
  pointer-events: none;
}
.kql-workbench .kqlwb-input {
  position: relative;
  display: block;
  width: 100%;
  background: transparent;
  color: transparent;
  caret-color: #fff;
  resize: none;
  outline: 0;
  box-shadow: none;
}
.kql-workbench .kqlwb-input::selection {
  background: rgba(37, 99, 235, 0.35);
}

/* === SYNTAX TOKENS === */
.tok-keyword   { color: #93c5fd; font-weight: 400; }
.tok-operator  { color: #93c5fd; }
.tok-function  { color: #86efac; }
.tok-string    { color: #86efac; }
.tok-number    { color: #fde68a; }
.tok-timespan  { color: #fde68a; }
.tok-pipe      { color: #e2e8f0; font-weight: 700; }
.tok-comment   { color: #6b8a7a; font-style: italic; }
.tok-ident     { color: #e2e8f0; }

/* === AUX PANE (hint + solution) === */
.kqlwb-aux {
  background: #f5f3ed;
}
.kqlwb-aux:empty { display: none; }

.kqlwb-hint {
  display: flex;
  gap: 10px;
  padding: 10px 18px;
  background: #fff7ed;
  border-left: 4px solid #E86A2A;
  border-bottom: 1px solid #d4cbbe;
}
.kqlwb-hint-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #E86A2A;
  padding-top: 2px;
}
.kqlwb-hint-ico { width: 12px; height: 12px; }
.kqlwb-hint-body {
  font-size: 13px;
  line-height: 1.55;
  color: #1a1612;
}
.kqlwb-hint-body code {
  display: inline-block;
  background: #e3dacc;
  color: #1a1612;
  font-family: 'Cascadia Code', 'JetBrains Mono', Consolas, monospace;
  font-size: 11.5px;
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid #d4cbbe;
}

.kqlwb-solution {
  padding: 12px 18px 14px;
  background: #eff6ff;
  border-left: 4px solid #2563eb;
  border-bottom: 1px solid #d4cbbe;
}
.kqlwb-solution-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.kqlwb-solution-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #2563eb;
}
.kqlwb-solution-ico { width: 12px; height: 12px; }
.kql-workbench .kqlwb-solution-code {
  margin: 0;
  padding: 10px 12px;
  background: #0F2B3C;
  border: 1px solid #1a3f55;
  border-radius: 6px;
  font-family: 'Cascadia Code', 'JetBrains Mono', Consolas, monospace;
  font-size: 12px;
  line-height: 1.6;
  overflow-x: auto;
  white-space: pre;
  color: #e2e8f0;
}

/* === OUTPUT === */
.kqlwb-output {
  background: #f5f3ed;
  min-height: 80px;
}

.kqlwb-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 22px;
  text-align: center;
  color: #6b5d4d;
}
.kqlwb-placeholder-icon { width: 28px; height: 28px; color: #a89e90; margin-bottom: 8px; }
.kqlwb-placeholder-text { font-size: 13px; font-weight: 600; color: #3d3224; margin-bottom: 2px; }
.kqlwb-placeholder-sub { font-size: 11.5px; color: #6b5d4d; }
.kqlwb-placeholder-sub b { color: #1a1612; font-weight: 600; }

/* === STATE MESSAGES === */
.kqlwb-msg {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 18px;
  border-bottom: 1px solid #d4cbbe;
}
.kqlwb-msg-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 1px;
}
.kqlwb-msg-body { flex: 1; min-width: 0; }
.kqlwb-msg-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 3px;
  color: #1a1612;
}
.kqlwb-msg-text {
  font-size: 12.5px;
  line-height: 1.55;
  color: #3d3224;
}
.kql-workbench .kqlwb-msg-code {
  margin: 6px 0 0;
  padding: 8px 10px;
  background: #0F2B3C;
  border: 1px solid #1a3f55;
  border-radius: 4px;
  font-family: 'Cascadia Code', 'JetBrains Mono', Consolas, monospace;
  font-size: 11.5px;
  color: #e2e8f0;
  white-space: pre-wrap;
  overflow-x: auto;
}

.kqlwb-msg-success {
  background: #ecfdf5;
  border-left: 4px solid #059669;
  animation: kqlwb-success-in 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
.kqlwb-msg-success .kqlwb-msg-icon {
  color: #059669;
  animation: kqlwb-success-pulse 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: center;
}
.kqlwb-msg-success .kqlwb-msg-title { color: #047857; }

@keyframes kqlwb-success-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes kqlwb-success-pulse {
  0%   { transform: scale(0.6); opacity: 0; }
  60%  { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .kqlwb-msg-success,
  .kqlwb-msg-success .kqlwb-msg-icon { animation: none; }
}

.kqlwb-msg-warn { background: #fff7ed; border-left: 4px solid #E86A2A; }
.kqlwb-msg-warn .kqlwb-msg-icon { color: #E86A2A; }
.kqlwb-msg-warn .kqlwb-msg-title { color: #c2410c; }

.kqlwb-msg-error { background: #fef2f2; border-left: 4px solid #dc2626; }
.kqlwb-msg-error .kqlwb-msg-icon { color: #dc2626; }
.kqlwb-msg-error .kqlwb-msg-title { color: #dc2626; }

.kqlwb-msg-empty { background: #f5f3ed; }
.kqlwb-msg-empty .kqlwb-msg-icon { color: #a89e90; }
.kqlwb-msg-empty .kqlwb-msg-title { color: #3d3224; }

.kqlwb-msg-running { background: #f5f3ed; align-items: center; }
.kqlwb-spinner {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border: 2px solid #d4cbbe;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: kqlwb-spin 0.7s linear infinite;
}
@keyframes kqlwb-spin { to { transform: rotate(360deg); } }

.kqlwb-reasons {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 12.5px;
  line-height: 1.55;
}
.kqlwb-reason {
  margin-bottom: 3px;
  color: #3d3224;
}
.kqlwb-reason-warning { color: #6b5d4d; font-style: italic; }

/* === RESULTS === */
.kqlwb-results {
  background: #f5f3ed;
}
.kqlwb-results-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 18px;
  background: #e3dacc;
  border-bottom: 1px solid #d4cbbe;
  font-size: 11.5px;
  color: #3d3224;
}
.kqlwb-rb-item { display: inline-flex; align-items: baseline; gap: 5px; }
.kqlwb-rb-val { font-size: 13px; font-weight: 700; color: #2563eb; font-variant-numeric: tabular-nums; }
.kqlwb-rb-lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.6px; color: #6b5d4d; font-weight: 600; }
.kqlwb-rb-divider { width: 1px; height: 14px; background: #d4cbbe; }
.kqlwb-rb-note { color: #6b5d4d; font-style: italic; }

/* === GRID === */
.kqlwb-grid-wrap {
  max-height: 500px;
  overflow: auto;
  background: #fff;
}
.kqlwb-grid-wrap::-webkit-scrollbar { width: 12px; height: 12px; background: #f5f3ed; }
.kqlwb-grid-wrap::-webkit-scrollbar-thumb { background: #d4cbbe; border: 3px solid #f5f3ed; border-radius: 6px; }
.kqlwb-grid-wrap::-webkit-scrollbar-thumb:hover { background: #b8b0a4; }

.kql-workbench .kqlwb-grid {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Segoe UI', -apple-system, system-ui, sans-serif;
  font-size: 12px;
}
.kql-workbench .kqlwb-grid thead {
  position: sticky;
  top: 0;
  z-index: 1;
}
.kql-workbench .kqlwb-grid th {
  padding: 7px 12px;
  background: #e3dacc;
  color: #1a1612;
  text-align: left;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.2px;
  white-space: nowrap;
  border-bottom: 2px solid #d4cbbe;
  border-right: 1px solid #d4cbbe;
}
.kql-workbench .kqlwb-grid th:last-child { border-right: 0; }
.kql-workbench .kqlwb-grid td {
  padding: 5px 12px;
  border-bottom: 1px solid #e0d6c8;
  border-right: 1px solid #e0d6c8;
  color: #1a1612;
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: top;
  font-variant-numeric: tabular-nums;
  font-family: 'Cascadia Code', 'JetBrains Mono', Consolas, monospace;
  font-size: 11.5px;
}
.kql-workbench .kqlwb-grid td:last-child { border-right: 0; }
.kql-workbench .kqlwb-grid tbody tr:nth-child(even) { background: #faf8f4; }
.kql-workbench .kqlwb-grid tbody tr:hover { background: #eff6ff; }

.kqlwb-null { color: #a89e90; font-style: italic; }
.kqlwb-num { color: #2563eb; font-weight: 600; }
.kqlwb-bool { color: #d97706; font-weight: 600; }
.kqlwb-arr { color: #059669; font-weight: 600; }
.kqlwb-arr-empty { color: #6b5d4d; }
.kqlwb-trunc { color: #6b5d4d; }

/* === RESPONSIVE === */
@media (max-width: 768px) {
  .kqlwb-head { padding: 12px 14px; }
  .kqlwb-prompt { font-size: 12.5px; }
  .kqlwb-schema { padding: 7px 14px; }
  .kqlwb-toolbar { padding: 5px 6px; gap: 4px; flex-wrap: wrap; }
  .kqlwb-tb-btn { padding: 6px 10px; font-size: 12px; }
  .kqlwb-tb-hint { display: none; }
  .kqlwb-tb-spacer { display: none; }
  .kql-workbench .kqlwb-gutter { width: 36px; padding-right: 7px; }
  .kql-workbench .kqlwb-highlight,
  .kql-workbench .kqlwb-input { padding: 10px 12px; font-size: 12px; }
  .kql-workbench .kqlwb-grid th,
  .kql-workbench .kqlwb-grid td { padding: 5px 8px; max-width: 200px; font-size: 11px; }
  .kqlwb-results-bar { padding: 7px 14px; gap: 10px; }
  .kqlwb-msg { padding: 10px 14px; }
  .kqlwb-hint, .kqlwb-solution { padding: 10px 14px; }
}

/* ============================================================
   KQL INVESTIGATION LAB
   Multi-step investigation exercise with progressive unlock,
   finding validation, and investigation journal.
   ============================================================ */

.kql-investigation-lab {
  background: #f5f3ed;
  border: 1px solid #d4cbbe;
  border-radius: 10px;
  margin: 28px 0;
  overflow: hidden;
}

.kqllab-header {
  background: #e3dacc;
  padding: 20px 24px 16px;
  border-bottom: 1px solid #d4cbbe;
}
.kqllab-badge {
  font-size: 11px;
  font-weight: 700;
  color: #E86A2A;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.kqllab-title {
  font-size: 20px;
  font-weight: 700;
  color: #1a1612;
  line-height: 1.3;
}

.kqllab-briefing {
  background: #fef7f3;
  border-bottom: 1px solid #fed7c3;
  padding: 18px 24px;
}
.kqllab-briefing-label {
  font-size: 10px;
  font-weight: 700;
  color: #E86A2A;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.kqllab-briefing-text {
  font-size: 14px;
  color: #1a1612;
  line-height: 1.65;
  margin-bottom: 10px;
}
.kqllab-briefing-tables {
  font-size: 12px;
  color: #6b5d4d;
}
.kqllab-briefing-tables code {
  background: #e3dacc;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 11px;
  font-family: 'JetBrains Mono', Consolas, monospace;
}

.kqllab-progress {
  padding: 12px 24px;
  border-bottom: 1px solid #d4cbbe;
  display: flex;
  align-items: center;
  gap: 12px;
}
.kqllab-progress-bar {
  flex: 1;
  height: 6px;
  background: #d4cbbe;
  border-radius: 3px;
  overflow: hidden;
}
.kqllab-progress-fill {
  height: 100%;
  background: #059669;
  border-radius: 3px;
  transition: width 0.4s ease;
  width: 0%;
}
.kqllab-progress-text {
  font-size: 12px;
  color: #6b5d4d;
  white-space: nowrap;
}

.kqllab-steps { padding: 0; }

.kqllab-step {
  border-bottom: 1px solid #d4cbbe;
  padding: 20px 24px;
}
.kqllab-step:last-child { border-bottom: none; }
.kqllab-step.locked { opacity: 0.5; }

.kqllab-step-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.kqllab-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #d4cbbe;
  color: #1a1612;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.kqllab-step.completed .kqllab-step-num { background: transparent; }
.kqllab-step.active .kqllab-step-num { background: #E86A2A; color: white; }
.kqllab-step-title {
  font-size: 15px;
  font-weight: 600;
  color: #1a1612;
  flex: 1;
}
.kqllab-step-pts {
  font-size: 11px;
  color: #6b5d4d;
  background: #e3dacc;
  padding: 2px 8px;
  border-radius: 10px;
}

.kqllab-step-objective {
  font-size: 14px;
  color: #3d3224;
  line-height: 1.6;
  margin-bottom: 14px;
  padding-left: 38px;
}

.kqllab-step-editor {
  margin: 0 0 10px 38px;
}
.kqllab-editor {
  width: 100%;
  min-height: 100px;
  background: #0F2B3C;
  color: #e2e8f0;
  border: 1px solid #1a3f55;
  border-radius: 6px;
  padding: 12px 16px;
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 13px;
  line-height: 1.6;
  resize: vertical;
  box-sizing: border-box;
}
.kqllab-editor:focus { outline: 2px solid #E86A2A; outline-offset: -1px; }

.kqllab-step-toolbar {
  display: flex;
  gap: 8px;
  margin: 0 0 10px 38px;
}
.kqllab-btn {
  padding: 7px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid #d4cbbe;
  transition: all 0.15s;
}
.kqllab-btn-run { background: #f5f3ed; color: #1a1612; }
.kqllab-btn-run:hover { background: #e3dacc; }
.kqllab-btn-check { background: #E86A2A; color: white; border-color: #E86A2A; }
.kqllab-btn-check:hover { background: #d45a1a; }
.kqllab-btn-check:disabled, .kqllab-btn-done { background: #059669; border-color: #059669; cursor: default; }
.kqllab-btn-hint { background: transparent; color: #6b5d4d; }
.kqllab-btn-hint:hover, .kqllab-btn-hint.active { background: #fff7ed; color: #E86A2A; }

.kqllab-step-hint { margin: 0 0 10px 38px; }
.kqllab-hint-box {
  background: #fff7ed;
  border: 1px solid #fed7c3;
  border-left: 3px solid #E86A2A;
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 13px;
  color: #1a1612;
  line-height: 1.5;
}

.kqllab-step-output { margin: 0 0 10px 38px; }
.kqllab-step-validation { margin: 0 0 10px 38px; }

.kqllab-valid {
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.kqllab-valid-pass { background: rgba(5,150,105,0.1); color: #059669; border: 1px solid rgba(5,150,105,0.3); }
.kqllab-valid-fail { background: rgba(220,38,38,0.1); color: #dc2626; border: 1px solid rgba(220,38,38,0.3); }

.kqllab-results-wrap { overflow-x: auto; max-height: 300px; overflow-y: auto; border: 1px solid #d4cbbe; border-radius: 6px; }
.kqllab-results { width: 100%; border-collapse: collapse; font-size: 12px; }
.kqllab-results th { background: #e3dacc; padding: 6px 10px; text-align: left; font-weight: 600; color: #1a1612; position: sticky; top: 0; border-bottom: 1px solid #d4cbbe; }
.kqllab-results td { padding: 5px 10px; border-bottom: 1px solid #f0eee6; color: #1a1612; font-family: 'JetBrains Mono', Consolas, monospace; font-size: 11px; white-space: nowrap; }
.kqllab-results tr:hover td { background: #f0eee6; }
.kqllab-no-results { padding: 16px; text-align: center; color: #6b5d4d; font-size: 13px; }
.kqllab-truncated { padding: 6px 10px; font-size: 11px; color: #6b5d4d; text-align: center; background: #f0eee6; }

.kqllab-step-notes { margin: 0 0 0 38px; }
.kqllab-notes-label { font-size: 11px; font-weight: 600; color: #6b5d4d; text-transform: uppercase; letter-spacing: 0.5px; display: block; margin-bottom: 4px; }
.kqllab-notes {
  width: 100%;
  min-height: 60px;
  background: white;
  border: 1px solid #d4cbbe;
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.5;
  color: #1a1612;
  resize: vertical;
  box-sizing: border-box;
}
.kqllab-notes:focus { outline: 2px solid #E86A2A; outline-offset: -1px; }

.kqllab-step-locked {
  padding: 8px 0 0 38px;
  font-size: 13px;
  color: #6b5d4d;
  font-style: italic;
}

.kqllab-msg { padding: 16px; font-size: 13px; color: #6b5d4d; }
.kqllab-msg-loading { color: #E86A2A; }
.kqllab-msg-error { color: #dc2626; }

.kqllab-summary {
  border-top: 2px solid #059669;
  padding: 28px 24px;
  text-align: center;
}
.kqllab-summary-inner { max-width: 600px; margin: 0 auto; }
.kqllab-summary-icon { margin-bottom: 12px; }
.kqllab-summary-title { font-size: 22px; font-weight: 700; color: #1a1612; margin-bottom: 8px; }
.kqllab-summary-score { font-size: 18px; font-weight: 600; color: #059669; margin-bottom: 4px; }
.kqllab-summary-time { font-size: 14px; color: #6b5d4d; margin-bottom: 16px; }
.kqllab-summary-journal { text-align: left; background: white; border: 1px solid #d4cbbe; border-radius: 8px; padding: 16px 20px; margin-top: 16px; }
.kqllab-summary-journal-title { font-size: 13px; font-weight: 700; color: #1a1612; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; }
.kqllab-summary-journal-entry { font-size: 13px; color: #3d3224; line-height: 1.5; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid #f0eee6; }
.kqllab-summary-journal-entry:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

/* KQL Workbench — warning messages for user errors */
.kqlwb-warnings { padding: 8px 12px; }
.kqlwb-warning-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 12px;
  margin: 4px 0;
  background: #fff7ed;
  border: 1px solid #fed7c3;
  border-left: 3px solid #d97706;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.5;
  color: #92400e;
}
.kqlwb-warn-ico { flex-shrink: 0; margin-top: 1px; width: 14px; height: 14px; }

/* KQL Workbench — Schema Browser */
.kqlwb-schema-header {
  display: flex;
  align-items: center;
  gap: 6px;
}
.kqlwb-schema-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  color: #6b5d4d;
  border-radius: 4px;
  transition: transform 0.2s, color 0.15s;
}
.kqlwb-schema-toggle:hover { color: #E86A2A; }
.kqlwb-schema-toggle.is-open svg { transform: rotate(180deg); }

.kqlwb-schema-pill { cursor: pointer; transition: background 0.15s; }
.kqlwb-schema-pill:hover { background: #d4cbbe; }

.kqlwb-schema-browser {
  border-top: 1px solid #d4cbbe;
  max-height: 280px;
  overflow-y: auto;
  background: #f5f3ed;
}

.kqlwb-sb-loading {
  padding: 12px 16px;
  font-size: 12px;
  color: #6b5d4d;
}

.kqlwb-sb-table { border-bottom: 1px solid #e8e2d8; }
.kqlwb-sb-table:last-child { border-bottom: none; }

.kqlwb-sb-table-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 12px;
  color: #1a1612;
  transition: background 0.1s;
}
.kqlwb-sb-table-header:hover { background: #eae6de; }

.kqlwb-sb-arrow {
  width: 10px;
  height: 10px;
  color: #6b5d4d;
  transition: transform 0.2s;
  flex-shrink: 0;
}
.kqlwb-sb-arrow.is-expanded { transform: rotate(90deg); }

.kqlwb-sb-table-name {
  font-weight: 600;
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 12px;
}
.kqlwb-sb-table-count {
  font-size: 10px;
  color: #6b5d4d;
  margin-left: auto;
}

.kqlwb-sb-columns { padding: 0 0 4px 0; }

.kqlwb-sb-col {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 16px 3px 30px;
  cursor: pointer;
  font-size: 11px;
  transition: background 0.1s;
}
.kqlwb-sb-col:hover {
  background: #e3dacc;
}

.kqlwb-sb-col-type {
  width: 20px;
  text-align: center;
  font-size: 10px;
  color: #6b5d4d;
  flex-shrink: 0;
}

.kqlwb-sb-col-name {
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 11px;
  color: #1a1612;
  flex: 1;
}

.kqlwb-sb-col-dtype {
  font-size: 9px;
  color: #9b8d7a;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* KQL Workbench — Query Explain View */
.kqlwb-explain { padding: 0; }
.kqlwb-explain-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: #e3dacc;
  border-bottom: 1px solid #d4cbbe;
}
.kqlwb-explain-badge {
  font-size: 11px;
  font-weight: 700;
  color: #2563eb;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.kqlwb-explain-meta {
  font-size: 11px;
  color: #6b5d4d;
  margin-left: auto;
}

.kqlwb-exp-step {
  padding: 10px 16px;
  border-bottom: 1px solid #f0eee6;
}
.kqlwb-exp-step:last-child { border-bottom: none; }
.kqlwb-exp-source { background: #f5f3ed; }

.kqlwb-exp-step-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.kqlwb-exp-num {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #d4cbbe;
  font-size: 10px;
  font-weight: 700;
  color: #1a1612;
  flex-shrink: 0;
}
.kqlwb-exp-source .kqlwb-exp-num { background: #2563eb; color: white; }

.kqlwb-exp-op {
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 12px;
  font-weight: 600;
  color: #1a1612;
}
.kqlwb-exp-delta {
  font-size: 11px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
}
.kqlwb-exp-delta-down { color: #dc2626; background: rgba(220,38,38,0.08); }
.kqlwb-exp-delta-up { color: #059669; background: rgba(5,150,105,0.08); }
.kqlwb-exp-rows {
  font-size: 11px;
  color: #6b5d4d;
  margin-left: auto;
  font-weight: 600;
}

.kqlwb-exp-bar-wrap {
  height: 4px;
  background: #e8e2d8;
  border-radius: 2px;
  margin-bottom: 6px;
  overflow: hidden;
}
.kqlwb-exp-bar {
  height: 100%;
  background: linear-gradient(90deg, #2563eb, #3b82f6);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.kqlwb-exp-desc {
  font-size: 12px;
  color: #3d3224;
  line-height: 1.5;
}

.kqlwb-exp-cols {
  font-size: 11px;
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.kqlwb-exp-cols code {
  background: #f5f3ed;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 10px;
  font-family: 'JetBrains Mono', Consolas, monospace;
}
.kqlwb-exp-cols-add { color: #059669; }
.kqlwb-exp-cols-add code { background: rgba(5,150,105,0.08); }
.kqlwb-exp-cols-rm { color: #dc2626; }
.kqlwb-exp-cols-rm code { background: rgba(220,38,38,0.08); }
.kqlwb-exp-more { font-size: 10px; color: #9b8d7a; }

/* KQL Workbench — Query History Panel */
.kqlwb-history-panel {
  border-top: 1px solid #d4cbbe;
  max-height: 200px;
  overflow-y: auto;
  background: #f5f3ed;
}
.kqlwb-history-empty {
  padding: 12px 16px;
  font-size: 12px;
  color: #9b8d7a;
  text-align: center;
}
.kqlwb-history-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px 4px;
}
.kqlwb-history-label {
  font-size: 10px;
  font-weight: 700;
  color: #6b5d4d;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.kqlwb-history-count {
  font-size: 10px;
  color: #9b8d7a;
  background: #e3dacc;
  padding: 1px 6px;
  border-radius: 8px;
}
.kqlwb-history-list { padding: 0 8px 8px; }

.kqlwb-history-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.1s;
}
.kqlwb-history-item:hover { background: #e3dacc; }

.kqlwb-history-query {
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 11px;
  color: #1a1612;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kqlwb-history-meta {
  font-size: 10px;
  color: #9b8d7a;
  white-space: nowrap;
  flex-shrink: 0;
}

/* KQL Workbench — Autocomplete Dropdown */
.kqlwb-ac-drop {
  position: absolute;
  z-index: 100;
  bottom: 4px;
  left: 32px;
  min-width: 180px;
  max-width: 320px;
  max-height: 200px;
  overflow-y: auto;
  background: #0F2B3C;
  border: 1px solid #1a3f55;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 12px;
}
.kqlwb-editor { position: relative; }
.kqlwb-ac-item {
  padding: 5px 12px;
  color: #e2e8f0;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kqlwb-ac-item:hover { background: #1a3f55; }
.kqlwb-ac-active { background: #1a3f55; color: #fdba74; }

/* ============================================================
   INVESTIGATION PIVOT ENGINE v2
   Entity-graph investigation simulator with KQL integration,
   non-linear steps, notes, scoring, and progress persistence.
   ============================================================ */

.ipv-root {
  background: #f5f3ed;
  border: 1px solid #d4cbbe;
  border-radius: 10px;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  margin: 28px 0;
}

/* Header */
.ipv-header {
  padding: 10px 16px;
  background: #e3dacc;
  border-bottom: 1px solid #d4cbbe;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.ipv-header-left { display: flex; align-items: center; gap: 8px; }
.ipv-header-badge { font-size: 10px; font-weight: 700; color: #fff; background: #2563eb; padding: 3px 8px; border-radius: 4px; }
.ipv-header-title { color: #1a3f55; font-size: 13px; font-weight: 700; }
.ipv-header-right { display: flex; align-items: center; gap: 12px; }
.ipv-header-stat { font-size: 11px; color: #6b5d4d; }
.ipv-header-stat strong { color: #059669; }

/* Body: graph + detail split */
.ipv-body { display: flex; min-height: 320px; }
.ipv-graph-pane { width: 45%; border-right: 1px solid #d4cbbe; overflow: hidden; min-width: 280px; }
.ipv-detail-pane { width: 55%; overflow-y: auto; max-height: 450px; background: #f5f3ed; }

@media (max-width: 768px) {
  .ipv-body { flex-direction: column; }
  .ipv-graph-pane { width: 100%; border-right: none; border-bottom: 1px solid #d4cbbe; }
  .ipv-detail-pane { width: 100%; max-height: 350px; }
}

/* Graph SVG */
.ipv-graph-svg { background: #eae6de; display: block; }
.ipv-edge-active { stroke: #a89e90; stroke-width: 1.5; stroke-dasharray: 6,4; }
.ipv-edge-dim { stroke: #d4cbbe; stroke-width: 1; stroke-dasharray: 4,4; opacity: 0.4; }
.ipv-edge-label { font-size: 9px; fill: #6b5d4d; text-anchor: middle; font-family: sans-serif; }

/* Graph nodes */
.ipv-node { cursor: pointer; }
.ipv-node-locked { cursor: default; opacity: 0.5; }
.ipv-node-revealed .ipv-node-bg { fill: #1a3f55; stroke: #2563eb; stroke-width: 1.5; }
.ipv-node-selected .ipv-node-bg { fill: #2563eb; stroke: #2563eb; stroke-width: 2; }
.ipv-node-kql .ipv-node-bg { fill: #22576f; stroke: #d97706; stroke-width: 1.5; stroke-dasharray: 4,3; }
.ipv-node-locked .ipv-node-bg { fill: #c8c0b4; stroke: #b8b0a4; stroke-width: 1; }
.ipv-node-glow { fill: none; stroke: #2563eb; stroke-width: 1; opacity: 0.3; }
.ipv-node-label { fill: #ffffff; font-family: -apple-system, sans-serif; font-size: 11px; font-weight: 600; dominant-baseline: middle; }
.ipv-node-locked .ipv-node-label { fill: #8a7e72; }
.ipv-node-icon { color: #ffffff; }
.ipv-node-locked .ipv-node-icon { color: #8a7e72; }
.ipv-node-kql-badge { fill: #d97706; font-size: 8px; font-weight: 700; font-family: monospace; dominant-baseline: middle; }

/* Detail pane */
.ipv-detail-empty, .ipv-detail-locked { padding: 40px; text-align: center; color: #6b5d4d; font-size: 13px; }
.ipv-detail-header { padding: 10px 16px; background: #e3dacc; border-bottom: 1px solid #d4cbbe; display: flex; align-items: center; gap: 8px; }
.ipv-detail-icon { color: #2563eb; flex-shrink: 0; }
.ipv-detail-title { color: #2563eb; font-size: 14px; font-weight: 700; }
.ipv-detail-type { color: #6b5d4d; font-size: 11px; margin-left: auto; background: #f5f3ed; padding: 2px 8px; border-radius: 4px; border: 1px solid #d4cbbe; }

/* Evidence sections */
.ipv-evidence-section { padding: 14px 16px; border-bottom: 1px solid #e0d6c8; }
.ipv-evidence-label { font-size: 11px; font-weight: 700; color: #2563eb; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 10px; }
.ipv-evidence-text { color: #3d3224; font-size: 12px; line-height: 1.7; white-space: pre-wrap; padding: 12px 14px; background: #ffffff; border-radius: 6px; border: 1px solid #e0d6c8; }

/* Evidence table */
.ipv-evidence-table-wrap { overflow-x: auto; border-radius: 6px; border: 1px solid #d4cbbe; background: #ffffff; }
.ipv-evidence-table { width: 100%; border-collapse: collapse; font-size: 12px; font-family: Consolas, 'SF Mono', monospace; }
.ipv-evidence-table th { padding: 8px 10px; text-align: left; color: #6b5d4d; background: #e3dacc; font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 2px solid #d4cbbe; }
.ipv-evidence-table td { padding: 7px 10px; color: #1a1612; border-bottom: 1px solid #e0d6c8; }
.ipv-evidence-table tr:nth-child(even) td { background: #faf8f4; }
.ipv-cell-highlight { color: #E86A2A !important; font-weight: 700; background: #fff7ed; }

/* Evidence timeline */
.ipv-timeline-entry { display: flex; gap: 10px; padding: 7px 10px; border-left: 3px solid #d4cbbe; margin: 3px 0; border-radius: 0 6px 6px 0; }
.ipv-timeline-flagged { border-left-color: #dc2626; background: #fef2f2; }
.ipv-timeline-time { color: #6b5d4d; font-family: Consolas, monospace; font-size: 12px; white-space: nowrap; min-width: 44px; font-weight: 600; }
.ipv-timeline-text { color: #1a1612; font-size: 12px; line-height: 1.5; }
.ipv-timeline-flagged .ipv-timeline-text { color: #dc2626; font-weight: 600; }

/* Per-entity notes */
.ipv-entity-notes { padding: 12px 16px; border-top: 1px solid #e0d6c8; }
.ipv-notes-label { font-size: 10px; font-weight: 700; color: #6b5d4d; text-transform: uppercase; letter-spacing: 0.5px; display: block; margin-bottom: 4px; }
.ipv-notes-input { width: 100%; min-height: 50px; background: #fff; border: 1px solid #d4cbbe; border-radius: 6px; padding: 8px 12px; font-size: 12px; line-height: 1.5; color: #1a1612; resize: vertical; box-sizing: border-box; font-family: inherit; }
.ipv-notes-input:focus { outline: 2px solid #E86A2A; outline-offset: -1px; }

/* KQL evidence pane */
.ipv-kql-prompt { padding: 14px 16px; }
.ipv-kql-label { font-size: 10px; font-weight: 700; color: #d97706; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
.ipv-kql-desc { font-size: 13px; color: #1a1612; line-height: 1.6; margin-bottom: 12px; }
.ipv-kql-textarea { width: 100%; min-height: 80px; background: #0F2B3C; color: #e2e8f0; border: 1px solid #1a3f55; border-radius: 6px; padding: 10px 14px; font-family: 'JetBrains Mono', Consolas, monospace; font-size: 12px; line-height: 1.5; resize: vertical; box-sizing: border-box; }
.ipv-kql-textarea:focus { outline: 2px solid #E86A2A; outline-offset: -1px; }
.ipv-kql-toolbar { display: flex; gap: 8px; margin: 8px 0; }
.ipv-btn { padding: 6px 14px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; border: 1px solid #d4cbbe; font-family: inherit; transition: all 0.15s; }
.ipv-btn-run { background: #f5f3ed; color: #1a1612; }
.ipv-btn-run:hover { background: #e3dacc; }
.ipv-btn-submit { background: #E86A2A; color: #fff; border-color: #E86A2A; }
.ipv-btn-submit:hover { background: #d45a1a; }
.ipv-btn-ghost { background: transparent; color: #6b5d4d; }
.ipv-btn-ghost:hover { background: #fff7ed; color: #E86A2A; }
.ipv-kql-output { margin-top: 8px; }
.ipv-kql-msg { padding: 10px; font-size: 12px; color: #6b5d4d; }
.ipv-kql-loading { color: #E86A2A; }
.ipv-kql-error { color: #dc2626; }
.ipv-kql-validation { padding: 8px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; margin-bottom: 8px; }
.ipv-kql-fail { background: rgba(220,38,38,0.1); color: #dc2626; border: 1px solid rgba(220,38,38,0.3); }
.ipv-kql-hint { padding: 8px 12px; margin: 8px 0; background: #fff7ed; border: 1px solid #fed7c3; border-left: 3px solid #E86A2A; border-radius: 6px; font-size: 12px; color: #1a1612; }
.ipv-kql-results-wrap { overflow-x: auto; max-height: 200px; overflow-y: auto; border: 1px solid #d4cbbe; border-radius: 6px; }
.ipv-kql-results { width: 100%; border-collapse: collapse; font-size: 11px; }
.ipv-kql-results th { background: #e3dacc; padding: 5px 8px; text-align: left; font-weight: 600; color: #1a1612; position: sticky; top: 0; border-bottom: 1px solid #d4cbbe; font-size: 10px; }
.ipv-kql-results td { padding: 4px 8px; border-bottom: 1px solid #f0eee6; color: #1a1612; font-family: 'JetBrains Mono', Consolas, monospace; font-size: 10px; white-space: nowrap; }
.ipv-kql-truncated { padding: 4px 8px; font-size: 10px; color: #6b5d4d; text-align: center; background: #f0eee6; }

/* Decision bar */
.ipv-decision-bar { border-top: 1px solid #d4cbbe; }
.ipv-decision-header { padding: 10px 16px; background: #fff7ed; border-bottom: 1px solid #fed7aa; }
.ipv-decision-badge { font-size: 10px; font-weight: 700; color: #E86A2A; text-transform: uppercase; letter-spacing: 1px; }
.ipv-decision-prompt { padding: 10px 16px; color: #1a1612; font-size: 13px; line-height: 1.6; font-weight: 600; border-bottom: 1px solid #e0d6c8; }
.ipv-decision-options { padding: 10px 12px; display: flex; flex-wrap: wrap; gap: 8px; background: #f5f3ed; }
.ipv-option-btn {
  flex: 1 1 calc(50% - 8px); min-width: 200px; padding: 12px 16px;
  background: #ffffff; color: #1a1612; border: 1px solid #d4cbbe; border-radius: 8px;
  font-size: 12px; line-height: 1.5; text-align: left; cursor: pointer;
  font-family: inherit; transition: all 0.15s;
}
.ipv-option-btn:hover { border-color: #2563eb; box-shadow: 0 0 0 1px #2563eb; }

/* Journal */
.ipv-journal-pane { border-top: 1px solid #d4cbbe; background: #e3dacc; }
.ipv-journal-empty { padding: 12px 16px; color: #6b5d4d; font-size: 12px; font-style: italic; }
.ipv-journal-header { padding: 8px 16px; font-size: 11px; font-weight: 700; color: #1a1612; display: flex; align-items: center; gap: 6px; }
.ipv-journal-count { font-size: 10px; color: #6b5d4d; background: #f5f3ed; padding: 1px 6px; border-radius: 8px; }
.ipv-journal-list { padding: 0 12px 8px; max-height: 180px; overflow-y: auto; }
.ipv-journal-entry { padding: 8px 12px; margin-bottom: 4px; border-radius: 6px; display: flex; gap: 8px; align-items: flex-start; }
.ipv-journal-pass { background: #ecfdf5; border: 1px solid #a7f3d0; }
.ipv-journal-fail { background: #fef2f2; border: 1px solid #fecaca; }
.ipv-journal-icon { font-weight: 700; font-size: 14px; min-width: 16px; }
.ipv-journal-pass .ipv-journal-icon { color: #059669; }
.ipv-journal-fail .ipv-journal-icon { color: #dc2626; }
.ipv-journal-body { flex: 1; }
.ipv-journal-action { color: #1a1612; font-size: 12px; font-weight: 500; }
.ipv-journal-explain { color: #6b5d4d; font-size: 11px; margin-top: 3px; line-height: 1.5; }
.ipv-journal-pts { font-size: 12px; font-weight: 700; white-space: nowrap; }
.ipv-journal-pass .ipv-journal-pts { color: #059669; }
.ipv-journal-fail .ipv-journal-pts { color: #dc2626; }

/* Summary */
.ipv-summary { padding: 24px; text-align: center; background: #f5f3ed; }
.ipv-summary-badge { font-size: 11px; font-weight: 700; color: #E86A2A; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 10px; }
.ipv-summary-pct { font-size: 32px; font-weight: 700; }
.ipv-summary-grade { font-size: 14px; font-weight: 600; margin-top: 4px; }
.ipv-summary-score { color: #6b5d4d; font-size: 12px; margin-top: 10px; }
.ipv-summary-time { color: #6b5d4d; font-size: 12px; margin-top: 4px; }
.ipv-grade-expert { color: #059669; }
.ipv-grade-proficient { color: #2563eb; }
.ipv-grade-developing { color: #E86A2A; }
.ipv-grade-needs { color: #dc2626; }
.ipv-summary-debrief { text-align: left; margin-top: 20px; padding: 16px; background: #ffffff; border-radius: 8px; border: 1px solid #d4cbbe; }
.ipv-summary-debrief-label { font-size: 10px; font-weight: 700; color: #2563eb; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 8px; }
.ipv-summary-debrief-text { color: #1a1612; font-size: 12px; line-height: 1.7; }

/* Demo label */
.ipv-demo-label { padding: 8px 16px; background: #eff6ff; text-align: center; font-size: 11px; color: #6b5d4d; font-style: italic; border-top: 1px solid #bfdbfe; }

/* Loading / error states */
.ipv-loading { padding: 20px; text-align: center; color: #6b5d4d; font-size: 13px; }
.ipv-error { padding: 20px; color: #dc2626; font-size: 13px; }

/* Investigation Pivot v2.1 — Cost model, timer, red herrings */
.ipv-node-cost-badge { fill: #dc2626; font-size: 8px; font-weight: 700; font-family: monospace; dominant-baseline: middle; text-anchor: end; }
.ipv-budget-low { color: #dc2626 !important; }
.ipv-budget-low strong { color: #dc2626 !important; }
.ipv-header-timer { font-family: 'JetBrains Mono', Consolas, monospace; font-weight: 600; }
.ipv-timer-low { color: #dc2626 !important; animation: ipv-pulse 1s ease-in-out infinite; }
@keyframes ipv-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }

/* Summary breakdown */
.ipv-summary-breakdown { margin-top: 16px; text-align: left; max-width: 320px; margin-left: auto; margin-right: auto; }
.ipv-summary-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 12px; color: #3d3224; border-bottom: 1px solid #e0d6c8; }
.ipv-summary-row span { font-weight: 600; color: #1a1612; }

/* Red herring debrief */
.ipv-summary-herrings { text-align: left; margin-top: 16px; padding: 12px 16px; background: #ffffff; border-radius: 8px; border: 1px solid #d4cbbe; }
.ipv-summary-herrings-label { font-size: 10px; font-weight: 700; color: #E86A2A; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 8px; }
.ipv-herring-item { font-size: 12px; padding: 4px 0; color: #1a1612; }
.ipv-herring-hit { color: #dc2626; }
.ipv-herring-miss { color: #059669; }

/* Investigation Pivot v2.2 — Items 5-10 */

/* Item 5: neutral journal entry (zero points — neither good nor bad) */
.ipv-journal-neutral { background: #f5f3ed; border: 1px solid #d4cbbe; }
.ipv-journal-neutral .ipv-journal-icon { color: #6b5d4d; }
.ipv-journal-neutral .ipv-journal-pts { color: #6b5d4d; }

/* Item 6: KQL quality notes */
.ipv-kql-quality-note { font-size: 11px; color: #E86A2A; font-style: italic; }

/* Item 7: progressive evidence — dig deeper button */
.ipv-deeper-wrap { padding: 12px 16px; text-align: center; border-top: 1px solid #e0d6c8; }
.ipv-btn-deeper { background: #f5f3ed; color: #1a1612; border: 1px dashed #d4cbbe; padding: 8px 20px; border-radius: 6px; cursor: pointer; font-size: 12px; transition: all 0.15s; }
.ipv-btn-deeper:hover { border-color: #E86A2A; color: #E86A2A; background: #fff7ed; }
.ipv-deeper-cost { color: #dc2626; font-size: 10px; font-weight: 600; }

/* Item 8: investigation narrative */
.ipv-narrative { padding: 20px 16px; background: #f5f3ed; }
.ipv-narrative-header { font-size: 13px; font-weight: 700; color: #1a3f55; margin-bottom: 6px; }
.ipv-narrative-desc { font-size: 12px; color: #3d3224; line-height: 1.6; margin-bottom: 12px; }
.ipv-narrative-input {
  width: 100%; min-height: 120px; background: #fff; border: 1px solid #d4cbbe; border-radius: 6px;
  padding: 12px 14px; font-size: 12px; line-height: 1.6; color: #1a1612; resize: vertical;
  box-sizing: border-box; font-family: inherit; margin-bottom: 10px;
}
.ipv-narrative-input:focus { outline: 2px solid #E86A2A; outline-offset: -1px; }
.ipv-narrative-submit { display: block; margin: 0 auto; }

/* Item 8: narrative in summary */
.ipv-summary-narrative { text-align: left; margin-top: 16px; padding: 12px 16px; background: #ffffff; border-radius: 8px; border: 1px solid #d4cbbe; }
.ipv-summary-narrative-label { font-size: 10px; font-weight: 700; color: #1a3f55; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 8px; }
.ipv-summary-narrative-text { font-size: 12px; line-height: 1.7; color: #1a1612; white-space: pre-wrap; }

/* Item 10: optimal path comparison */
.ipv-summary-optimal { text-align: left; margin-top: 16px; padding: 12px 16px; background: #ffffff; border-radius: 8px; border: 1px solid #d4cbbe; }
.ipv-summary-optimal-label { font-size: 10px; font-weight: 700; color: #2563eb; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 6px; }
.ipv-summary-optimal-desc { font-size: 12px; color: #3d3224; line-height: 1.6; margin-bottom: 10px; }
.ipv-optimal-steps { display: flex; flex-direction: column; gap: 4px; }
.ipv-optimal-step { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px; font-size: 12px; }
.ipv-optimal-match { background: #ecfdf5; border: 1px solid #a7f3d0; }
.ipv-optimal-miss { background: #fef2f2; border: 1px solid #fecaca; }
.ipv-optimal-num { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex-shrink: 0; }
.ipv-optimal-match .ipv-optimal-num { background: #059669; color: #fff; }
.ipv-optimal-miss .ipv-optimal-num { background: #dc2626; color: #fff; }
.ipv-optimal-text { flex: 1; color: #1a1612; }
.ipv-optimal-status { font-weight: 700; font-size: 14px; }
.ipv-optimal-match .ipv-optimal-status { color: #059669; }
.ipv-optimal-miss .ipv-optimal-status { color: #dc2626; }

/* ============================================================
   THREAT ADVISORY PIPELINE
   6-step workflow: advisory → TTPs → ATT&CK → coverage → rule → spec
   ============================================================ */

.ap-root { background: #f5f3ed; border: 1px solid #d4cbbe; border-radius: 10px; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; margin: 28px 0; }

/* Progress steps */
.ap-progress { padding: 16px 20px; background: #e3dacc; border-bottom: 1px solid #d4cbbe; overflow-x: auto; }
.ap-progress-steps { display: flex; align-items: center; gap: 0; min-width: max-content; }
.ap-step-item { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 70px; }
.ap-step-dot { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; border: 2px solid #d4cbbe; color: #6b5d4d; background: #f5f3ed; }
.ap-step-active { border-color: #E86A2A; color: #E86A2A; background: #fff7ed; }
.ap-step-done { border-color: #059669; color: #fff; background: #059669; }
.ap-step-label { font-size: 9px; color: #6b5d4d; text-align: center; max-width: 70px; }
.ap-step-label-active { color: #E86A2A; font-weight: 600; }
.ap-step-line { flex: 1; height: 2px; background: #d4cbbe; min-width: 20px; margin: 0 4px; align-self: flex-start; margin-top: 14px; }
.ap-step-line-done { background: #059669; }

/* Content area */
.ap-content { padding: 20px; }
.ap-step-header { margin-bottom: 16px; }
.ap-step-title { font-size: 15px; font-weight: 700; color: #1a3f55; margin-bottom: 4px; }
.ap-step-desc { font-size: 12px; color: #3d3224; line-height: 1.6; }
.ap-step-footer { display: flex; justify-content: space-between; margin-top: 16px; padding-top: 16px; border-top: 1px solid #e0d6c8; }

/* Buttons */
.ap-btn { padding: 8px 18px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; border: 1px solid #d4cbbe; font-family: inherit; transition: all 0.15s; }
.ap-btn-primary { background: #E86A2A; color: #fff; border-color: #E86A2A; }
.ap-btn-primary:hover { background: #d45a1a; }
.ap-btn-primary:disabled { opacity: 0.4; cursor: default; }
.ap-btn-secondary { background: #f5f3ed; color: #1a1612; }
.ap-btn-secondary:hover { background: #e3dacc; }
.ap-btn-ghost { background: transparent; color: #6b5d4d; border-color: transparent; }
.ap-btn-ghost:hover { color: #1a1612; }

/* Inputs */
.ap-input { width: 100%; background: #fff; border: 1px solid #d4cbbe; border-radius: 6px; padding: 8px 12px; font-size: 12px; color: #1a1612; box-sizing: border-box; font-family: inherit; }
.ap-input:focus { outline: 2px solid #E86A2A; outline-offset: -1px; }
.ap-input-ta { min-height: 60px; resize: vertical; line-height: 1.5; }
.ap-select { background: #f5f3ed; border: 1px solid #d4cbbe; border-radius: 6px; padding: 6px 10px; font-size: 12px; color: #1a1612; }

/* Step 1: Advisory input */
.ap-advisory-input { width: 100%; min-height: 160px; background: #fff; border: 1px solid #d4cbbe; border-radius: 8px; padding: 14px 16px; font-size: 13px; line-height: 1.7; color: #1a1612; resize: vertical; box-sizing: border-box; font-family: inherit; }
.ap-advisory-input:focus { outline: 2px solid #E86A2A; outline-offset: -1px; }

/* Step 2: TTP list */
.ap-ttp-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.ap-ttp-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #fff; border: 1px solid #d4cbbe; border-radius: 6px; }
.ap-ttp-main { flex: 1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ap-ttp-desc { font-size: 12px; color: #1a1612; font-weight: 500; }
.ap-ttp-tactic { font-size: 10px; color: #6b5d4d; background: #e3dacc; padding: 2px 8px; border-radius: 4px; }
.ap-ttp-remove { background: none; border: none; color: #dc2626; cursor: pointer; font-size: 14px; padding: 2px 6px; }
.ap-ttp-add { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ap-ttp-add input { flex: 1; min-width: 200px; }

/* Step 3: ATT&CK mapping */
.ap-map-list { display: flex; flex-direction: column; gap: 8px; }
.ap-map-item { padding: 10px 12px; background: #fff; border: 1px solid #d4cbbe; border-radius: 6px; }
.ap-map-tech { margin-bottom: 4px; }
.ap-tech-select { width: 100%; }
.ap-map-desc { font-size: 12px; color: #3d3224; }
.ap-map-tactic { font-size: 10px; color: #6b5d4d; margin-top: 4px; }

/* Step 4: Coverage */
.ap-coverage-summary { text-align: center; padding: 16px 0; margin-bottom: 16px; }
.ap-coverage-pct { font-size: 36px; font-weight: 700; color: #E86A2A; }
.ap-coverage-label { font-size: 12px; color: #6b5d4d; }
.ap-coverage-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin-bottom: 16px; }
.ap-cov-item { padding: 10px 12px; border-radius: 6px; border: 1px solid; }
.ap-cov-covered { background: #ecfdf5; border-color: #a7f3d0; }
.ap-cov-gap { background: #fef2f2; border-color: #fecaca; }
.ap-cov-id { font-size: 10px; font-family: 'JetBrains Mono', Consolas, monospace; color: #6b5d4d; }
.ap-cov-name { font-size: 12px; font-weight: 600; color: #1a1612; }
.ap-cov-status { font-size: 11px; margin-top: 4px; }
.ap-cov-covered .ap-cov-status { color: #059669; }
.ap-cov-gap .ap-cov-status { color: #dc2626; }
.ap-gap-prompt { font-size: 13px; font-weight: 600; color: #1a3f55; margin-top: 16px; margin-bottom: 8px; }
.ap-gap-select-wrap { margin-bottom: 8px; }
.ap-gap-select { width: 100%; }

/* Step 5: Rule editor */
.ap-rule-editor { margin-bottom: 8px; }
.ap-rule-tables { margin-bottom: 8px; font-size: 11px; color: #6b5d4d; }
.ap-table-pill { display: inline-block; background: #e3dacc; padding: 2px 8px; border-radius: 4px; font-family: 'JetBrains Mono', Consolas, monospace; font-size: 10px; color: #1a1612; margin-right: 4px; }
.ap-kql-textarea { width: 100%; min-height: 120px; background: #0F2B3C; color: #e2e8f0; border: 1px solid #1a3f55; border-radius: 6px; padding: 12px 14px; font-family: 'JetBrains Mono', Consolas, monospace; font-size: 12px; line-height: 1.5; resize: vertical; box-sizing: border-box; }
.ap-kql-textarea:focus { outline: 2px solid #E86A2A; outline-offset: -1px; }
.ap-rule-toolbar { display: flex; gap: 8px; margin: 8px 0; }
.ap-rule-output { margin-top: 8px; }
.ap-msg { padding: 8px 12px; font-size: 12px; color: #6b5d4d; }
.ap-loading { color: #E86A2A; }
.ap-error { color: #dc2626; }
.ap-test-result { padding: 10px 14px; border-radius: 6px; font-size: 12px; margin-bottom: 8px; }
.ap-test-pass { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }
.ap-test-warn { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.ap-test-fail { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.ap-results-wrap { overflow-x: auto; max-height: 200px; border: 1px solid #d4cbbe; border-radius: 6px; }
.ap-results { width: 100%; border-collapse: collapse; font-size: 10px; }
.ap-results th { background: #e3dacc; padding: 5px 8px; text-align: left; font-weight: 600; font-size: 10px; position: sticky; top: 0; }
.ap-results td { padding: 4px 8px; border-bottom: 1px solid #f0eee6; font-family: 'JetBrains Mono', Consolas, monospace; white-space: nowrap; }
.ap-truncated { padding: 4px 8px; font-size: 10px; color: #6b5d4d; text-align: center; }

/* Step 6: Spec form */
.ap-spec-form { display: flex; flex-direction: column; gap: 12px; }
.ap-spec-field label { display: block; font-size: 10px; font-weight: 700; color: #6b5d4d; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.ap-spec-query { background: #0F2B3C; color: #e2e8f0; padding: 10px 14px; border-radius: 6px; font-size: 11px; overflow-x: auto; line-height: 1.5; white-space: pre-wrap; margin: 0; }
.ap-spec-test { font-size: 12px; color: #3d3224; }

/* Completion */
.ap-completion { text-align: center; padding: 30px 20px; }
.ap-completion-badge { font-size: 14px; font-weight: 700; color: #059669; margin-bottom: 8px; }
.ap-completion-title { font-size: 18px; font-weight: 700; color: #1a3f55; margin-bottom: 16px; }
.ap-completion-summary { text-align: left; max-width: 400px; margin: 0 auto 16px; }
.ap-completion-row { padding: 6px 0; font-size: 12px; color: #3d3224; border-bottom: 1px solid #e0d6c8; }
.ap-completion-cta { font-size: 12px; color: #6b5d4d; line-height: 1.6; font-style: italic; }



/* ============================================================
   ENV SIMULATOR v2 — budget, attacks, initial states
   ============================================================ */

/* Budget panel */
.es-budget { padding: 12px 16px; margin: 0 12px 8px; background: #fff; border: 1px solid #e0d6c8; border-radius: 8px; }
.es-budget-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.es-budget-title { font-size: 11px; font-weight: 700; color: #1a1612; }
.es-budget-remaining { font-size: 12px; font-weight: 700; }
.es-budget-remaining.good { color: #059669; }
.es-budget-remaining.warn { color: #d97706; }
.es-budget-remaining.danger { color: #dc2626; }
.es-budget-bar { height: 6px; background: #e0d6c8; border-radius: 3px; overflow: hidden; margin-bottom: 6px; }
.es-budget-bar-fill { height: 100%; border-radius: 3px; transition: width 0.3s; }
.es-budget-bar-fill.good { background: #059669; }
.es-budget-bar-fill.warn { background: #d97706; }
.es-budget-bar-fill.danger { background: #dc2626; }
.es-budget-detail { display: flex; justify-content: space-between; font-size: 10px; color: #6b5d4d; }
.es-budget-flash { animation: es-flash 0.6s ease; }
@keyframes es-flash { 0%,100% { border-color: #e0d6c8; } 50% { border-color: #dc2626; background: #fef2f2; } }

/* Control cost label */
.es-ctrl-info { flex: 1; }
.es-ctrl-cost { font-size: 10px; color: #6b5d4d; margin-top: 2px; font-weight: 600; }
.es-ctrl.active .es-ctrl-cost { color: #059669; }

/* Attack panel */
.es-attack { padding: 12px 16px; margin: 0 12px 8px; background: #fff; border: 1px solid #e0d6c8; border-radius: 8px; }
.es-attack-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.es-attack-title { font-size: 11px; font-weight: 700; color: #1a1612; }
.es-attack-controls { display: flex; gap: 6px; align-items: center; }
.es-attack-select { background: #f5f3ed; border: 1px solid #d4cbbe; border-radius: 6px; padding: 5px 8px; font-size: 11px; color: #1a1612; }
.es-attack-btn { background: #2563eb; color: #fff; border: none; border-radius: 6px; padding: 6px 14px; font-size: 11px; font-weight: 600; cursor: pointer; transition: background 0.15s; }
.es-attack-btn:hover { background: #1d4ed8; }

/* Attack results */
.es-attack-result { padding: 12px; border-radius: 8px; margin-top: 8px; }
.es-attack-blocked { background: #ecfdf5; border: 1px solid #a7f3d0; }
.es-attack-breached { background: #fef2f2; border: 1px solid #fecaca; }
.es-attack-outcome { font-size: 13px; font-weight: 700; margin-bottom: 10px; }
.es-attack-blocked .es-attack-outcome { color: #059669; }
.es-attack-breached .es-attack-outcome { color: #dc2626; }

/* Attack chain steps */
.es-attack-chain { display: flex; flex-direction: column; gap: 0; }
.es-attack-step { display: flex; align-items: flex-start; gap: 8px; padding: 6px 8px; border-radius: 6px; }
.es-step-num { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex-shrink: 0; background: #e0d6c8; color: #1a1612; }
.es-step-icon { font-size: 14px; flex-shrink: 0; width: 18px; text-align: center; }
.es-step-body { flex: 1; }
.es-step-label { font-size: 12px; font-weight: 600; color: #1a1612; }
.es-step-technique { font-size: 10px; color: #6b5d4d; font-family: 'JetBrains Mono', Consolas, monospace; }
.es-step-blocker { font-size: 10px; color: #059669; font-weight: 600; margin-top: 2px; }
.es-step-arrow { text-align: center; font-size: 12px; color: #6b5d4d; padding: 0 0 0 24px; }
.es-step-arrow.dim { color: #d4cbbe; }

.es-step-success { background: #fef2f2; }
.es-step-success .es-step-num { background: #dc2626; color: #fff; }
.es-step-success .es-step-icon { color: #dc2626; }
.es-step-blocked { background: #ecfdf5; }
.es-step-blocked .es-step-num { background: #059669; color: #fff; }
.es-step-blocked .es-step-icon { color: #059669; }
.es-step-skipped { opacity: 0.4; }
.es-step-skipped .es-step-num { background: #d4cbbe; color: #6b5d4d; }

/* ============================================================
   TRIAGE SIMULATOR v2 — timer, evidence linking, narrative
   ============================================================ */

/* Timer */
.trs-header-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.trs-timer { font-size: 12px; color: #6b5d4d; margin-left: auto; display: flex; align-items: center; gap: 4px; padding: 4px 10px; background: #f5f3ed; border-radius: 6px; font-family: 'JetBrains Mono', Consolas, monospace; }
.trs-timer-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.5px; font-family: -apple-system, sans-serif; }
.trs-timer-val { font-weight: 700; font-size: 14px; color: #1a1612; }
.trs-timer-slow .trs-timer-val { color: #d97706; }
.trs-timer-over .trs-timer-val { color: #dc2626; }

/* Classification button selected state */
.trs-classify-btn.selected { border-color: #2563eb; background: #eff6ff; box-shadow: 0 0 0 2px rgba(37,99,235,0.2); }

/* Evidence linking */
.trs-evidence-link { padding: 12px 16px; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; margin-top: 12px; }
.trs-evidence-prompt { font-size: 12px; font-weight: 600; color: #1e40af; margin-bottom: 8px; }
.trs-evidence-checks { display: flex; flex-direction: column; gap: 4px; }
.trs-evidence-check { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #6b5d4d; padding: 4px 8px; border-radius: 4px; cursor: pointer; }
.trs-evidence-check input { margin: 0; }
.trs-evidence-check input:disabled { opacity: 0.3; }
.trs-evidence-viewed { color: #1a1612; font-weight: 500; }

/* Investigation narrative */
.trs-narrative { margin-top: 12px; }
.trs-narrative-prompt { font-size: 12px; font-weight: 600; color: #1a3f55; margin-bottom: 6px; }
.trs-narrative-input { width: 100%; min-height: 80px; background: #fff; border: 1px solid #d4cbbe; border-radius: 6px; padding: 10px 12px; font-size: 12px; line-height: 1.6; color: #1a1612; resize: vertical; box-sizing: border-box; font-family: inherit; }
.trs-narrative-input:focus { outline: 2px solid #E86A2A; outline-offset: -1px; }

/* Submit button */
.trs-submit-wrap { margin-top: 12px; text-align: center; }
.trs-submit-btn { background: #E86A2A; color: #fff; border: none; border-radius: 8px; padding: 10px 28px; font-size: 13px; font-weight: 700; cursor: pointer; transition: background 0.15s; }
.trs-submit-btn:hover { background: #d45a1a; }

/* Evidence citation feedback on result */
.trs-evidence-feedback { margin: 12px 0; padding: 10px 14px; background: #f5f3ed; border-radius: 8px; }
.trs-ef-good { font-size: 12px; color: #059669; font-weight: 600; margin-bottom: 4px; }
.trs-ef-miss { font-size: 12px; color: #dc2626; font-weight: 600; }

/* Narrative review on result */
.trs-narrative-review { margin: 12px 0; padding: 10px 14px; background: #fff; border: 1px solid #e0d6c8; border-radius: 8px; }
.trs-narrative-review-label { font-size: 10px; font-weight: 700; color: #6b5d4d; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.trs-narrative-review-text { font-size: 12px; color: #1a1612; line-height: 1.6; white-space: pre-wrap; }

/* Time feedback colors */
.trs-time-good { color: #059669; }
.trs-time-warn { color: #d97706; }
.trs-time-over { color: #dc2626; }

/* Summary stats */
.trs-summary-stats { margin-top: 12px; }
.trs-sum-stat { font-size: 12px; color: #3d3224; margin-bottom: 4px; }

/* ============================================================
   RESET BUTTONS — consistent style across all components
   ============================================================ */
.es-reset-btn, .kqllab-reset-btn, .ipv-reset-btn, .ds-reset-btn,
.at-reset-btn, .fpc-reset-btn, .trs-reset-scenario {
  background: none; color: #6b5d4d; border: 1px solid #c4b9a8;
  border-radius: 6px; padding: 6px 14px; font-size: 11px;
  cursor: pointer; transition: all 0.15s; font-family: inherit;
}
.es-reset-btn:hover, .kqllab-reset-btn:hover, .ipv-reset-btn:hover,
.ds-reset-btn:hover, .at-reset-btn:hover, .fpc-reset-btn:hover,
.trs-reset-scenario:hover {
  border-color: #E86A2A; color: #E86A2A; background: #fff7ed;
}

/* Per-component placement */
.es-reset-btn { margin-top: 8px; display: block; }
.kqllab-reset-btn { margin-left: auto; font-size: 10px; padding: 4px 10px; }
.kqllab-header { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.ipv-reset-wrap { padding: 8px 16px; text-align: right; }
.ds-reset-btn { margin-top: 12px; display: block; }
.at-reset-btn { margin: 0 4px; }
.fpc-reset-wrap { text-align: center; padding: 8px 0 0; }
.trs-reset-scenario { margin-left: 8px; }
.trs-submit-btn:disabled { opacity: 0.4; cursor: default; }

/* Triage reset always visible */
.trs-reset-wrap { text-align: center; padding: 12px 0 0; }

/* ============================================================
   NE CURIOSITY — Cross-Platform IR Investigation Simulator
   Parchment theme — matches Ridgeline design system
   ============================================================ */

.nec-root { background: #f5f3ed; border: 1px solid #d4cbbe; border-radius: 10px; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; margin: 28px 0; }

/* Header — parchment with warm tones */
.nec-header { padding: 12px 20px; background: #e3dacc; border-bottom: 1px solid #d4cbbe; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.nec-header-left { display: flex; align-items: center; gap: 10px; }
.nec-badge { font-size: 10px; font-weight: 700; color: #fff; background: #E86A2A; padding: 3px 10px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.8px; }
.nec-incident-id { font-size: 12px; color: #6b5d4d; font-family: 'JetBrains Mono', Consolas, monospace; }
.nec-header-right { display: flex; align-items: center; gap: 12px; }
.nec-header-stat { font-size: 11px; color: #6b5d4d; }
.nec-header-stat strong { color: #1a1612; }
.nec-timer { font-family: 'JetBrains Mono', Consolas, monospace; font-weight: 600; }
.nec-timer-warn { color: #d97706; }
.nec-timer-over { color: #dc2626; font-weight: 700; }

/* Briefing */
.nec-briefing { padding: 14px 20px; background: #fff; border-bottom: 1px solid #d4cbbe; }
.nec-briefing-label { font-size: 9px; font-weight: 700; color: #E86A2A; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
.nec-briefing-text { font-size: 12px; color: #3d3224; line-height: 1.6; }

/* Tabs */
.nec-tabs { display: flex; background: #e3dacc; border-bottom: 1px solid #d4cbbe; overflow-x: auto; }
.nec-tab { flex: 1; padding: 10px 16px; background: none; border: none; border-bottom: 3px solid transparent; cursor: pointer; font-size: 12px; font-weight: 600; color: #6b5d4d; display: flex; align-items: center; gap: 6px; justify-content: center; transition: all 0.15s; font-family: inherit; min-width: 0; }
.nec-tab:hover { background: #f5f3ed; }
.nec-tab-active { border-bottom-color: var(--tab-color, #2563eb); color: #1a1612; background: #f5f3ed; }
.nec-tab-icon { font-size: 16px; }
.nec-tab-label { white-space: nowrap; }
.nec-tab-host { font-size: 10px; color: #6b5d4d; font-family: 'JetBrains Mono', Consolas, monospace; }
.nec-tab-badge { background: #dc2626; color: #fff; font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 8px; margin-left: 4px; }
.nec-tab-progress { font-size: 9px; color: #94a3b8; margin-left: 4px; font-weight: 600; }
.nec-tab-active .nec-tab-progress { color: #6b5d4d; }

/* Workspace layout */
.nec-ws-layout { display: grid; grid-template-columns: 200px 1fr; min-height: 300px; }
@media (max-width: 700px) { .nec-ws-layout { grid-template-columns: 1fr; } }

/* Source sidebar */
.nec-sources { background: #f0eee6; border-right: 1px solid #d4cbbe; padding: 10px; overflow-y: auto; max-height: 500px; }
.nec-sources-label { font-size: 9px; font-weight: 700; color: #6b5d4d; text-transform: uppercase; letter-spacing: 0.5px; padding: 4px 8px; margin-bottom: 4px; }
.nec-source { display: block; width: 100%; text-align: left; background: #fff; border: 1px solid #e0d6c8; border-radius: 6px; padding: 8px 10px; margin-bottom: 4px; font-size: 11px; color: #1a1612; cursor: pointer; transition: all 0.15s; font-family: inherit; line-height: 1.3; }
.nec-source:hover { border-color: #2563eb; background: #f8f7f4; }
.nec-source-active { background: #fff; border-color: #2563eb; font-weight: 600; box-shadow: 0 0 0 1px #2563eb; }
.nec-source-found { border-left: 3px solid #059669; }
.nec-source-check { color: #059669; font-weight: 700; }

/* Evidence area */
.nec-evidence { padding: 14px 18px; }
.nec-evidence-header { font-size: 13px; font-weight: 700; color: #1a3f55; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid #e0d6c8; }

/* Command input — parchment theme */
.nec-cmd-wrap { display: flex; align-items: center; gap: 0; background: #fff; border: 1px solid #d4cbbe; border-radius: 6px; overflow: hidden; margin-bottom: 8px; }
.nec-cmd-prompt { font-size: 11px; color: #059669; font-family: 'JetBrains Mono', Consolas, monospace; font-weight: 700; padding: 8px 10px; background: #f0eee6; white-space: nowrap; border-right: 1px solid #d4cbbe; }
.nec-cmd-input { flex: 1; border: none; padding: 8px 10px; font-family: 'JetBrains Mono', Consolas, monospace; font-size: 12px; color: #1a1612; background: transparent; outline: none; }
.nec-cmd-input:focus { background: #faf9f5; }
.nec-cmd-bar { margin-bottom: 8px; }

/* KQL editor — parchment with code styling */
.nec-kql-wrap { margin-bottom: 8px; }
.nec-kql-input { width: 100%; min-height: 100px; background: #faf9f5; color: #1a1612; border: 1px solid #d4cbbe; border-radius: 6px; padding: 12px 14px; font-family: 'JetBrains Mono', Consolas, monospace; font-size: 12px; line-height: 1.6; resize: vertical; box-sizing: border-box; }
.nec-kql-input:focus { outline: 2px solid #E86A2A; outline-offset: -1px; border-color: #E86A2A; }

/* Buttons */
.nec-btn { display: inline-flex; align-items: center; gap: 4px; padding: 7px 14px; border: 1px solid #d4cbbe; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s; font-family: inherit; background: #fff; color: #1a1612; }
.nec-btn:hover { border-color: #94a3b8; }
.nec-btn-run { background: #E86A2A; color: #fff; border-color: #E86A2A; }
.nec-btn-run:hover { background: #d4590f; }
.nec-btn-submit { background: #059669; color: #fff; border-color: #059669; }
.nec-btn-submit:hover { background: #047857; }
.nec-btn-reset { color: #6b5d4d; }

/* Hints */
.nec-hints { padding: 6px 0; }
.nec-hint { font-size: 11px; color: #6b5d4d; padding: 4px 10px; background: #fef7f3; border-left: 3px solid #E86A2A; border-radius: 0 4px 4px 0; margin-bottom: 4px; line-height: 1.5; }

/* Output */
.nec-output { margin-top: 8px; }
.nec-output-pre { margin: 0; padding: 12px 14px; background: #faf9f5; border: 1px solid #d4cbbe; border-radius: 6px; color: #1a1612; font-family: 'JetBrains Mono', Consolas, monospace; font-size: 11px; line-height: 1.5; overflow-x: auto; white-space: pre-wrap; word-break: break-word; max-height: 300px; overflow-y: auto; }
.nec-output-error { padding: 10px 14px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 6px; color: #991b1b; font-size: 12px; }
.nec-output-loading { padding: 10px 14px; color: #E86A2A; font-size: 12px; }
.nec-output-empty { padding: 10px 14px; color: #6b5d4d; font-size: 12px; font-style: italic; }
.nec-finding-confirmed { padding: 8px 12px; background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 6px; color: #059669; font-size: 12px; font-weight: 600; margin-top: 8px; }

/* KQL results table */
.nec-results-wrap { overflow-x: auto; max-height: 280px; border: 1px solid #d4cbbe; border-radius: 6px; }
.nec-results { width: 100%; border-collapse: collapse; font-size: 10px; }
.nec-results th { background: #e3dacc; color: #1a1612; padding: 6px 8px; text-align: left; font-weight: 700; font-size: 9px; position: sticky; top: 0; border-bottom: 1px solid #d4cbbe; text-transform: uppercase; letter-spacing: 0.3px; }
.nec-results td { padding: 5px 8px; border-bottom: 1px solid #f0eee6; color: #1a1612; background: #fff; font-family: 'JetBrains Mono', Consolas, monospace; white-space: nowrap; }
.nec-results tr:hover td { background: #faf9f5; }
.nec-indicator-mark { background: #fef3c7; color: #1a1612; padding: 0 2px; border-radius: 2px; font-weight: 700; }

/* Indicators */
.nec-indicators { padding: 0 16px; }
.nec-indicators:empty { display: none; }
.nec-indicators-label { font-size: 10px; font-weight: 700; color: #1a3f55; text-transform: uppercase; letter-spacing: 0.5px; padding: 10px 0 6px; border-top: 1px solid #d4cbbe; }
.nec-indicator-list { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 10px; }
.nec-indicator { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: #fff; border: 1px solid #e0d6c8; border-radius: 6px; font-size: 11px; }
.nec-indicator-type { font-size: 9px; font-weight: 700; text-transform: uppercase; padding: 1px 5px; border-radius: 3px; color: #fff; }
.nec-ind-ip { background: #dc2626; }
.nec-ind-user { background: #2563eb; }
.nec-ind-process { background: #d97706; }
.nec-ind-file { background: #059669; }
.nec-ind-other { background: #6b5d4d; }
.nec-indicator-val { font-family: 'JetBrains Mono', Consolas, monospace; font-weight: 600; color: #1a1612; }
.nec-indicator-sig { color: #6b5d4d; font-size: 10px; }
.nec-indicator-goto { background: none; border: 1px solid #d4cbbe; border-radius: 4px; padding: 2px 8px; font-size: 10px; cursor: pointer; color: #2563eb; font-weight: 600; font-family: inherit; }
.nec-indicator-goto:hover { background: #eff6ff; border-color: #2563eb; }

/* Journal */
.nec-journal { padding: 0 16px; }
.nec-journal:empty { display: none; }
.nec-journal-label { font-size: 10px; font-weight: 700; color: #1a3f55; text-transform: uppercase; letter-spacing: 0.5px; padding: 10px 0 6px; border-top: 1px solid #d4cbbe; display: flex; align-items: center; gap: 6px; }
.nec-journal-count { background: #e3dacc; color: #6b5d4d; font-size: 9px; padding: 1px 6px; border-radius: 8px; }
.nec-journal-entries { display: flex; flex-direction: column; gap: 4px; padding-bottom: 10px; }
.nec-journal-entry { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.nec-je-platform { color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 3px; flex-shrink: 0; }
.nec-je-text { color: #1a1612; }

/* Classification */
.nec-classify-wrap { padding: 16px; border-top: 1px solid #d4cbbe; }
.nec-classify-label { font-size: 14px; font-weight: 700; color: #1a3f55; margin-bottom: 4px; }
.nec-classify-desc { font-size: 12px; color: #3d3224; margin-bottom: 12px; }
.nec-classify-narrative { width: 100%; min-height: 100px; background: #fff; border: 1px solid #d4cbbe; border-radius: 6px; padding: 12px 14px; font-size: 12px; line-height: 1.6; color: #1a1612; resize: vertical; box-sizing: border-box; font-family: inherit; }
.nec-classify-narrative:focus { outline: 2px solid #E86A2A; outline-offset: -1px; }
.nec-classify-actions { display: flex; gap: 8px; margin-top: 12px; }

/* Containment drag-and-drop */
.nec-containment { margin-top: 12px; padding: 12px 14px; background: #fff; border: 1px solid #d4cbbe; border-radius: 8px; }
.nec-containment-label { font-size: 11px; font-weight: 700; color: #1a3f55; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.nec-contain-desc { font-size: 11px; color: #3d3224; margin-bottom: 8px; }
.nec-contain-list { display: flex; flex-direction: column; gap: 4px; }
.nec-contain-drag { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #f5f3ed; border: 1px solid #d4cbbe; border-radius: 6px; cursor: grab; font-size: 12px; color: #1a1612; transition: box-shadow 0.15s, border-color 0.15s; user-select: none; }
.nec-contain-drag:hover { border-color: #2563eb; box-shadow: 0 1px 4px rgba(37,99,235,0.12); }
.nec-contain-drag.nec-dragging { opacity: 0.4; }
.nec-contain-drag.nec-drag-over { border-color: #E86A2A; box-shadow: 0 0 0 2px rgba(232,106,42,0.2); }
.nec-contain-num { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; background: #1a3f55; color: #fff; font-size: 10px; font-weight: 700; border-radius: 50%; flex-shrink: 0; }
.nec-contain-text { flex: 1; line-height: 1.4; }
.nec-contain-grip { color: #d4cbbe; font-size: 14px; flex-shrink: 0; }

/* Summary */
.nec-summary { text-align: center; }
.nec-summary-badge { font-size: 14px; font-weight: 700; color: #059669; margin-bottom: 4px; }
.nec-summary-score { font-size: 36px; font-weight: 800; color: #1a3f55; }
.nec-summary-grade { font-size: 14px; font-weight: 600; color: #6b5d4d; margin-bottom: 16px; }
.nec-summary-breakdown { text-align: left; max-width: 400px; margin: 0 auto 16px; }
.nec-summary-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 12px; color: #3d3224; border-bottom: 1px solid #e0d6c8; }
.nec-summary-row span { font-weight: 600; color: #1a1612; }
.nec-summary-chain { text-align: left; margin-top: 16px; padding: 12px 16px; background: #fff; border: 1px solid #e0d6c8; border-radius: 8px; }
.nec-summary-chain-label { font-size: 10px; font-weight: 700; color: #dc2626; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.nec-summary-chain-text { font-size: 12px; color: #1a1612; line-height: 1.6; }
.nec-summary-narrative { text-align: left; margin-top: 12px; padding: 12px 16px; background: #fff; border: 1px solid #e0d6c8; border-radius: 8px; }
.nec-summary-narrative-label { font-size: 10px; font-weight: 700; color: #1a3f55; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.nec-summary-narrative-text { font-size: 12px; color: #1a1612; line-height: 1.6; white-space: pre-wrap; }
.nec-summary-missed { text-align: left; margin-top: 12px; padding: 12px 16px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; }
.nec-summary-missed-label { font-size: 10px; font-weight: 700; color: #dc2626; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.nec-summary-missed-item { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #1a1612; padding: 3px 0; }
.nec-summary-actions { margin-top: 16px; }

/* Loading / error */
.nec-loading { padding: 40px; text-align: center; color: #E86A2A; font-size: 13px; }
.nec-error { padding: 40px; text-align: center; color: #dc2626; font-size: 13px; }

/* Indicator pills in output */
.nec-pill { display: inline; background: #fef3c7; color: #1a1612; padding: 1px 6px; border-radius: 3px; font-weight: 700; white-space: nowrap; border: 1px solid #fcd34d; }
.nec-pill-ip { background: #fee2e2; border-color: #fca5a5; }
.nec-pill-user { background: #dbeafe; border-color: #93c5fd; }
.nec-pill-process { background: #ffedd5; border-color: #fdba74; }
.nec-pill-file { background: #d1fae5; border-color: #6ee7b7; }
.nec-pill-goto { display: inline-block; margin-left: 4px; padding: 0 4px; background: rgba(0,0,0,0.06); border-radius: 3px; font-size: 10px; font-weight: 600; cursor: pointer; color: #2563eb; vertical-align: baseline; }
.nec-pill-goto:hover { background: #eff6ff; text-decoration: underline; }

/* Investigation timeline */
.nec-timeline { padding: 0 16px; }
.nec-timeline:empty { display: none; }
.nec-tl-label { font-size: 10px; font-weight: 700; color: #1a3f55; text-transform: uppercase; letter-spacing: 0.5px; padding: 10px 0 8px; border-top: 1px solid #d4cbbe; }
.nec-tl-track { display: flex; gap: 0; overflow-x: auto; padding-bottom: 10px; position: relative; }
.nec-tl-track::before { content: ''; position: absolute; top: 30px; left: 0; right: 0; height: 2px; background: #d4cbbe; z-index: 0; }
.nec-tl-phase { flex: 1; min-width: 72px; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; z-index: 1; }
.nec-tl-time { font-size: 9px; font-weight: 700; color: #6b5d4d; font-family: 'JetBrains Mono', Consolas, monospace; margin-bottom: 4px; }
.nec-tl-dot { width: 12px; height: 12px; border-radius: 50%; background: #d4cbbe; border: 2px solid #f5f3ed; box-shadow: 0 0 0 1px #d4cbbe; margin-bottom: 6px; transition: background 0.3s, box-shadow 0.3s; }
.nec-tl-found .nec-tl-dot { background: #059669; box-shadow: 0 0 0 1px #059669, 0 0 6px rgba(5,150,105,0.3); }
.nec-tl-desc { font-size: 9px; color: #1a1612; line-height: 1.3; max-width: 80px; }
.nec-tl-found .nec-tl-desc { font-weight: 600; }
.nec-tl-hidden { color: #bfb5a5; font-style: italic; }

/* Dual scoring cards */
.nec-summary-dual { display: flex; gap: 12px; justify-content: center; margin-bottom: 16px; }
.nec-dual-card { flex: 1; max-width: 180px; background: #fff; border: 1px solid #e0d6c8; border-radius: 8px; padding: 12px 16px; text-align: center; }
.nec-dual-pct { font-size: 28px; font-weight: 800; color: #1a3f55; }
.nec-dual-label { font-size: 10px; font-weight: 700; color: #6b5d4d; text-transform: uppercase; letter-spacing: 0.3px; margin-top: 2px; }
.nec-dual-detail { font-size: 11px; color: #3d3224; margin-top: 4px; }

/* Containment sequence evaluation */
.nec-summary-contain { text-align: left; margin-top: 16px; padding: 12px 16px; background: #fff; border: 1px solid #e0d6c8; border-radius: 8px; }
.nec-summary-contain-label { font-size: 10px; font-weight: 700; color: #1a3f55; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; }
.nec-sc-item { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; padding: 8px 10px; border-radius: 6px; margin-bottom: 4px; font-size: 12px; }
.nec-sc-correct { background: #ecfdf5; border: 1px solid #a7f3d0; }
.nec-sc-wrong { background: #fef2f2; border: 1px solid #fecaca; }
.nec-sc-num { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 10px; font-weight: 700; flex-shrink: 0; }
.nec-sc-correct .nec-sc-num { background: #059669; color: #fff; }
.nec-sc-wrong .nec-sc-num { background: #dc2626; color: #fff; }
.nec-sc-icon { font-size: 14px; flex-shrink: 0; }
.nec-sc-correct .nec-sc-icon { color: #059669; }
.nec-sc-wrong .nec-sc-icon { color: #dc2626; }
.nec-sc-text { flex: 1; color: #1a1612; line-height: 1.4; }
.nec-sc-feedback { width: 100%; font-size: 11px; color: #3d3224; padding: 4px 0 0 28px; line-height: 1.5; font-style: italic; }

/* Attacker debrief — subtle dark panel */
.nec-debrief { text-align: left; margin-top: 16px; padding: 14px 16px; background: #1a3f55; border-radius: 8px; }
.nec-debrief-label { font-size: 12px; font-weight: 700; color: #f1f5f9; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.nec-debrief-desc { font-size: 11px; color: #94a3b8; margin-bottom: 12px; }
.nec-debrief-phase { padding: 10px 12px; border-radius: 6px; margin-bottom: 6px; border-left: 3px solid transparent; }
.nec-debrief-found { background: rgba(5,150,105,0.08); border-left-color: #059669; }
.nec-debrief-missed { background: rgba(220,38,38,0.08); border-left-color: #dc2626; }
.nec-debrief-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.nec-debrief-time { font-family: 'JetBrains Mono', Consolas, monospace; font-size: 10px; font-weight: 700; color: #94a3b8; }
.nec-debrief-status { font-size: 11px; font-weight: 700; margin-left: auto; }
.nec-debrief-found .nec-debrief-status { color: #34d399; }
.nec-debrief-missed .nec-debrief-status { color: #f87171; }
.nec-debrief-action { font-size: 11px; color: #cbd5e1; line-height: 1.5; margin-bottom: 4px; }
.nec-debrief-action strong { color: #f1f5f9; }
.nec-debrief-telemetry { font-size: 11px; color: #94a3b8; line-height: 1.5; margin-bottom: 4px; }
.nec-debrief-telemetry strong { color: #cbd5e1; }
.nec-debrief-howto { font-size: 11px; color: #fbbf24; line-height: 1.5; padding: 6px 10px; background: rgba(251,191,36,0.08); border-radius: 4px; margin-top: 4px; }
.nec-debrief-howto strong { color: #fcd34d; }

/* Header buttons */
.nec-hdr-btn { background: #fff; border: 1px solid #d4cbbe; border-radius: 4px; color: #6b5d4d; font-size: 12px; font-weight: 700; width: 28px; height: 28px; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; justify-content: center; margin-left: 6px; }
.nec-hdr-btn:hover { background: #f0eee6; border-color: #94a3b8; }
.nec-hdr-reset { color: #dc2626; border-color: #fecaca; }
.nec-hdr-reset:hover { background: #fef2f2; }
.nec-hdr-confirming { background: #dc2626 !important; color: #fff !important; border-color: #dc2626 !important; animation: nec-pulse 0.6s ease-in-out infinite alternate; }
@keyframes nec-pulse { from { opacity: 1; } to { opacity: 0.6; } }
.nec-validation-msg { padding: 8px 12px; background: #fef2f2; border: 1px solid #fecaca; border-left: 3px solid #dc2626; border-radius: 6px; color: #991b1b; font-size: 12px; margin-bottom: 8px; animation: nec-fade-in 0.2s ease; }
@keyframes nec-fade-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* Toolbar */
.nec-toolbar { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0; border-bottom: 1px solid #e0d6c8; margin-bottom: 10px; }
.nec-tb-btn { background: #fff; border: 1px solid #d4cbbe; border-radius: 5px; padding: 5px 12px; font-size: 11px; font-weight: 600; color: #3d3224; cursor: pointer; font-family: inherit; transition: background 0.15s, border-color 0.15s; }
.nec-tb-btn:hover { background: #f0eee6; border-color: #94a3b8; }
.nec-tb-solution { color: #d97706; border-color: #fcd34d; }
.nec-tb-solution:hover { background: #fffbeb; }
.nec-tb-explain { color: #2563eb; border-color: #93c5fd; }
.nec-tb-explain:hover { background: #eff6ff; }

/* Revealed hints */
.nec-revealed-hints { padding: 6px 0; }
.nec-revealed-hints .nec-hint { margin-bottom: 4px; }

/* Solution panel */
.nec-solution { padding: 12px; background: #fffbeb; border: 1px solid #fcd34d; border-radius: 8px; margin-top: 8px; }
.nec-solution-label { font-size: 10px; font-weight: 700; color: #d97706; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.nec-solution-cmd { padding: 8px 12px; background: #faf9f5; border: 1px solid #d4cbbe; border-radius: 6px; margin-bottom: 8px; }
.nec-solution-cmd code { color: #1a1612; font-family: 'JetBrains Mono', Consolas, monospace; font-size: 12px; word-break: break-all; }
.nec-solution-run { font-size: 11px; }

/* Explain panel */
.nec-explain { padding: 12px; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; margin-top: 8px; }
.nec-explain-label { font-size: 10px; font-weight: 700; color: #1e40af; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.nec-explain-finding { font-size: 12px; color: #1a1612; margin-bottom: 8px; line-height: 1.5; padding: 8px 10px; background: #fff; border-radius: 6px; border: 1px solid #e0d6c8; }
.nec-explain-detail { font-size: 12px; color: #3d3224; margin-bottom: 6px; line-height: 1.5; }
.nec-explain-detail strong { color: #1a1612; }

/* History panel */
.nec-history-panel { padding: 8px 0; }
.nec-history-label { font-size: 10px; font-weight: 700; color: #6b5d4d; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.nec-history-item { padding: 5px 10px; background: #fff; border: 1px solid #e0d6c8; border-radius: 5px; margin-bottom: 3px; cursor: pointer; transition: background 0.15s; }
.nec-history-item:hover { background: #f0eee6; border-color: #d4cbbe; }
.nec-history-item code { font-family: 'JetBrains Mono', Consolas, monospace; font-size: 11px; color: #1a1612; word-break: break-all; }

/* Help panel */
.nec-help-panel { display: none; padding: 0 16px; }
.nec-help-inner { background: #fff; border: 1px solid #d4cbbe; border-radius: 8px; padding: 16px; margin-bottom: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.nec-help-title { font-size: 14px; font-weight: 700; color: #1a3f55; margin-bottom: 12px; }
.nec-help-row { font-size: 12px; color: #3d3224; line-height: 1.5; padding: 6px 0; border-bottom: 1px solid #f0eee6; }
.nec-help-key { display: inline-block; font-weight: 700; color: #1a1612; min-width: 120px; }
.nec-btn-close { margin-top: 10px; font-size: 11px; }

/* ============================================================
   KQL CHALLENGE ENGINE
   ============================================================ */
.kqlc-inner { background: #f5f3ed; border: 1px solid #d4cbbe; border-radius: 8px; overflow: hidden; margin: 20px 0; }
.kqlc-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: #e3dacc; border-bottom: 1px solid #d4cbbe; }
.kqlc-header .kqlc-badge { font-size: 9px; font-weight: 700; color: #fff; padding: 2px 8px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.5px; margin-right: 8px; }
.kqlc-header .kqlc-prompt { font-size: 13px; font-weight: 700; color: #1a1612; }
.kqlc-status { font-size: 11px; color: #6b5d4d; }
.kqlc-passed { color: #059669; font-weight: 700; }
.kqlc-attempts { color: #6b5d4d; }
.kqlc-empty { padding: 12px 16px; font-size: 12px; color: #6b5d4d; font-style: italic; }
.kqlc-error { padding: 10px 14px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 6px; color: #991b1b; font-size: 12px; margin: 8px 16px; }
.kqlc-loading { padding: 10px 14px; color: #E86A2A; font-size: 12px; }
.kqlc-hints { padding: 0 16px; }
.kqlc-hint { font-size: 11px; color: #6b5d4d; padding: 4px 10px; background: #fef7f3; border-left: 3px solid #E86A2A; border-radius: 0 4px 4px 0; margin-bottom: 4px; line-height: 1.5; }
.kqlc-tb-btn { background: #fff; border: 1px solid #d4cbbe; border-radius: 5px; padding: 5px 12px; font-size: 11px; font-weight: 600; color: #3d3224; cursor: pointer; font-family: inherit; margin: 0 4px 8px 0; }
.kqlc-tb-btn:hover { background: #f0eee6; border-color: #94a3b8; }
.kqlc-tb-solution { color: #d97706; border-color: #fcd34d; }
.kqlc-editor-wrap { padding: 0 16px 8px; }
.kqlc-editor-wrap label, .kqlc-editor-wrap .kqlc-tables { font-size: 10px; color: #6b5d4d; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 4px; display: block; }
.kqlc-editor { width: 100%; min-height: 80px; background: #faf9f5; color: #1a1612; border: 1px solid #d4cbbe; border-radius: 6px; padding: 10px 12px; font-family: 'JetBrains Mono', Consolas, monospace; font-size: 12px; line-height: 1.5; resize: vertical; box-sizing: border-box; }
.kqlc-editor:focus { outline: 2px solid #E86A2A; outline-offset: -1px; }
.kqlc-actions { padding: 0 16px 12px; display: flex; align-items: center; gap: 10px; }
.kqlc-btn { display: inline-flex; align-items: center; gap: 4px; padding: 7px 14px; border: 1px solid #d4cbbe; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; background: #fff; color: #1a1612; }
.kqlc-btn-run { background: #E86A2A; color: #fff; border-color: #E86A2A; }
.kqlc-btn-run:hover { background: #d4590f; }
.kqlc-btn-run:disabled { opacity: 0.5; cursor: not-allowed; }
.kqlc-output { padding: 0 16px 12px; }
.kqlc-results { padding: 0 16px 12px; }
.kqlc-results-wrap { overflow-x: auto; max-height: 200px; border: 1px solid #d4cbbe; border-radius: 6px; margin-top: 8px; }
.kqlc-results-wrap table { width: 100%; border-collapse: collapse; font-size: 10px; }
.kqlc-results-wrap th { background: #e3dacc; color: #1a1612; padding: 5px 8px; text-align: left; font-weight: 700; font-size: 9px; position: sticky; top: 0; }
.kqlc-results-wrap td { padding: 4px 8px; border-bottom: 1px solid #f0eee6; color: #1a1612; background: #fff; font-family: 'JetBrains Mono', Consolas, monospace; white-space: nowrap; }
.kqlc-grade { padding: 8px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; margin: 8px 0; }
.kqlc-grade-pass { background: #ecfdf5; border: 1px solid #a7f3d0; color: #059669; }
.kqlc-grade-fail { background: #fef2f2; border: 1px solid #fecaca; color: #dc2626; }
.kqlc-grade-info { background: #eff6ff; border: 1px solid #bfdbfe; color: #2563eb; }
.kqlc-grade-reason { font-weight: 400; color: #3d3224; margin-top: 4px; font-size: 11px; }
.kqlc-solution-reveal { margin-top: 8px; }
.kqlc-solution-label { font-size: 10px; font-weight: 700; color: #d97706; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.kqlc-solution-code { padding: 10px 12px; background: #faf9f5; border: 1px solid #d4cbbe; border-radius: 6px; color: #1a1612; font-family: 'JetBrains Mono', Consolas, monospace; font-size: 12px; line-height: 1.5; white-space: pre-wrap; margin: 0; }
.kqlc-teaching { margin-top: 10px; padding: 10px 14px; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 6px; }
.kqlc-teaching-label { font-size: 10px; font-weight: 700; color: #1e40af; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.kqlc-teaching-text { font-size: 12px; color: #3d3224; line-height: 1.6; }

/* ============================================================
   INCIDENT QUEUE SIMULATOR
   ============================================================ */
.iq-inner, .incident-queue { background: #f5f3ed; border: 1px solid #d4cbbe; border-radius: 8px; overflow: hidden; margin: 20px 0; }
.iq-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: #e3dacc; border-bottom: 1px solid #d4cbbe; }
.iq-header-left { display: flex; align-items: center; gap: 8px; }
.iq-header-right { display: flex; align-items: center; gap: 10px; }
.iq-badge { font-size: 10px; font-weight: 700; color: #fff; background: #E86A2A; padding: 2px 8px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.5px; }
.iq-queue-label { font-size: 13px; font-weight: 700; color: #1a1612; }
.iq-queue-count { font-size: 11px; color: #6b5d4d; }
.iq-hdr-btn { background: #fff; border: 1px solid #d4cbbe; border-radius: 4px; color: #6b5d4d; font-size: 12px; font-weight: 700; width: 28px; height: 28px; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; justify-content: center; }
.iq-hdr-btn:hover { background: #f0eee6; }
.iq-hdr-reset { color: #dc2626; border-color: #fecaca; }
.iq-alert-list { padding: 8px; }
.iq-alert { background: #fff; border: 1px solid #e0d6c8; border-radius: 6px; margin-bottom: 6px; overflow: hidden; transition: border-color 0.15s; }
.iq-alert:hover { border-color: #94a3b8; }
.iq-alert-done { opacity: 0.7; }
.iq-alert-header { display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer; }
.iq-alert-sev { font-size: 9px; font-weight: 700; color: #fff; padding: 2px 6px; border-radius: 3px; text-transform: uppercase; flex-shrink: 0; }
.iq-sev-critical, .iq-sev-high { background: #dc2626; }
.iq-sev-medium { background: #d97706; }
.iq-sev-low { background: #2563eb; }
.iq-sev-informational { background: #6b5d4d; }
.iq-alert-title { font-size: 12px; font-weight: 600; color: #1a1612; flex: 1; }
.iq-alert-src { font-size: 10px; color: #6b5d4d; }
.iq-alert-time { font-size: 10px; color: #94a3b8; font-family: 'JetBrains Mono', Consolas, monospace; }
.iq-alert-body { padding: 0 12px 12px; border-top: 1px solid #f0eee6; }
.iq-alert-classified { font-size: 11px; color: #059669; font-weight: 600; padding: 4px 8px; background: #ecfdf5; border-radius: 4px; display: inline-block; }
.iq-raw-data { padding: 8px 10px; background: #faf9f5; border: 1px solid #d4cbbe; border-radius: 6px; font-family: 'JetBrains Mono', Consolas, monospace; font-size: 10px; color: #1a1612; line-height: 1.5; white-space: pre-wrap; margin: 8px 0; max-height: 150px; overflow-y: auto; }
.iq-classify-form { margin-top: 10px; }
.iq-form-row { margin-bottom: 8px; }
.iq-form-label { font-size: 10px; font-weight: 700; color: #6b5d4d; text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 4px; display: block; }
.iq-form-opt { display: inline-block; padding: 4px 10px; border: 1px solid #d4cbbe; border-radius: 4px; font-size: 11px; cursor: pointer; margin-right: 4px; margin-bottom: 4px; color: #3d3224; background: #fff; }
.iq-form-opt:hover { border-color: #2563eb; }
.iq-form-sel { background: #eff6ff; border-color: #2563eb; color: #1e40af; font-weight: 600; }
.iq-form-corr { border-color: #059669; }
.iq-form-input { width: 100%; padding: 6px 10px; border: 1px solid #d4cbbe; border-radius: 4px; font-size: 11px; font-family: inherit; box-sizing: border-box; }
.iq-form-input:focus { outline: 2px solid #E86A2A; outline-offset: -1px; }
.iq-btn { display: inline-flex; padding: 6px 12px; border: 1px solid #d4cbbe; border-radius: 5px; font-size: 11px; font-weight: 600; cursor: pointer; font-family: inherit; background: #E86A2A; color: #fff; border-color: #E86A2A; }
.iq-btn:hover { background: #d4590f; }
.iq-ok { color: #059669; font-weight: 700; }
.iq-error { color: #dc2626; font-size: 11px; }
.iq-loading { padding: 20px; text-align: center; color: #E86A2A; font-size: 12px; }

/* ============================================================
   CONFIGURATION AUDITOR
   ============================================================ */
.config-auditor { background: #f5f3ed; border: 1px solid #d4cbbe; border-radius: 8px; overflow: hidden; margin: 20px 0; }
.ca-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: #e3dacc; border-bottom: 1px solid #d4cbbe; }
.ca-badge { font-size: 9px; font-weight: 700; color: #fff; padding: 2px 8px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.5px; background: #d97706; margin-right: 8px; }
.ca-title { font-size: 13px; font-weight: 700; color: #1a1612; }
.ca-hdr-btn { background: #fff; border: 1px solid #d4cbbe; border-radius: 4px; color: #6b5d4d; font-size: 12px; width: 28px; height: 28px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.ca-context-text { padding: 12px 16px; font-size: 12px; color: #3d3224; line-height: 1.6; border-bottom: 1px solid #d4cbbe; background: #fff; }
.ca-layout { display: grid; grid-template-columns: 1fr 1fr; min-height: 300px; }
@media (max-width: 700px) { .ca-layout { grid-template-columns: 1fr; } }
.ca-config-pane { border-right: 1px solid #d4cbbe; padding: 12px; overflow-y: auto; max-height: 400px; }
.ca-config-label { font-size: 10px; font-weight: 700; color: #6b5d4d; text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 6px; }
.ca-config-code { padding: 10px 12px; background: #faf9f5; border: 1px solid #d4cbbe; border-radius: 6px; font-family: 'JetBrains Mono', Consolas, monospace; font-size: 11px; color: #1a1612; line-height: 1.5; white-space: pre-wrap; overflow-x: auto; }
.ca-gap-pane { padding: 12px; overflow-y: auto; max-height: 400px; }
.ca-gap-card { background: #fff; border: 1px solid #e0d6c8; border-radius: 6px; padding: 10px 12px; margin-bottom: 8px; }
.ca-gap-num { font-size: 10px; font-weight: 700; color: #1a3f55; margin-bottom: 4px; }
.ca-gap-desc { font-size: 11px; color: #6b5d4d; margin-bottom: 6px; line-height: 1.5; }
.ca-gap-hint { font-size: 10px; color: #E86A2A; margin-bottom: 6px; }
.ca-gap-fields { display: flex; flex-direction: column; gap: 6px; }
.ca-gap-label { font-size: 10px; font-weight: 600; color: #3d3224; }
.ca-gap-input { width: 100%; padding: 6px 10px; border: 1px solid #d4cbbe; border-radius: 4px; font-size: 11px; font-family: inherit; box-sizing: border-box; }
.ca-gap-wide { min-height: 50px; resize: vertical; }
.ca-gap-input:focus { outline: 2px solid #E86A2A; outline-offset: -1px; }
.ca-gap-select { padding: 5px 8px; border: 1px solid #d4cbbe; border-radius: 4px; font-size: 11px; font-family: inherit; background: #fff; }
.ca-actions { padding: 12px 16px; border-top: 1px solid #d4cbbe; }
.ca-btn { display: inline-flex; padding: 7px 14px; border: 1px solid #d4cbbe; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; background: #fff; color: #1a1612; }
.ca-btn-submit { background: #059669; color: #fff; border-color: #059669; }
.ca-btn-submit:hover { background: #047857; }
.ca-error { padding: 10px 14px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 6px; color: #991b1b; font-size: 12px; margin: 8px 16px; }

/* ============================================================
   FORENSIC ARTIFACT EXAMINER
   ============================================================ */
.artifact-examiner { background: #f5f3ed; border: 1px solid #d4cbbe; border-radius: 8px; overflow: hidden; margin: 20px 0; }
.ae-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: #e3dacc; border-bottom: 1px solid #d4cbbe; }
.ae-badge { font-size: 9px; font-weight: 700; color: #fff; padding: 2px 8px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.5px; background: #059669; margin-right: 8px; }
.ae-title { font-size: 13px; font-weight: 700; color: #1a1612; }
.ae-context-text { padding: 12px 16px; font-size: 12px; color: #3d3224; line-height: 1.6; border-bottom: 1px solid #d4cbbe; background: #fff; }
.ae-layout { display: grid; grid-template-columns: 1fr 1fr; min-height: 300px; }
@media (max-width: 700px) { .ae-layout { grid-template-columns: 1fr; } }
.ae-artifact-pane { border-right: 1px solid #d4cbbe; padding: 12px; overflow-y: auto; max-height: 400px; }
.ae-artifact-label { font-size: 10px; font-weight: 700; color: #6b5d4d; text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 6px; }
.ae-artifact-instruction { font-size: 11px; color: #E86A2A; margin-bottom: 8px; }
.ae-artifact-code { padding: 10px 12px; background: #faf9f5; border: 1px solid #d4cbbe; border-radius: 6px; font-family: 'JetBrains Mono', Consolas, monospace; font-size: 11px; color: #1a1612; line-height: 1.5; white-space: pre-wrap; overflow-x: auto; max-height: 250px; overflow-y: auto; }
.ae-analysis-pane { padding: 12px; overflow-y: auto; }
.ae-classify { margin-bottom: 10px; }
.ae-classify-label { font-size: 10px; font-weight: 700; color: #6b5d4d; text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 6px; }
.ae-class-btn { display: inline-block; padding: 5px 12px; border: 1px solid #d4cbbe; border-radius: 4px; font-size: 11px; cursor: pointer; margin-right: 4px; margin-bottom: 4px; color: #3d3224; background: #fff; }
.ae-class-btn:hover { border-color: #2563eb; }
.ae-class-sel { background: #eff6ff; border-color: #2563eb; color: #1e40af; font-weight: 600; }
.ae-add-indicator { margin-bottom: 10px; }
.ae-add-input { flex: 1; padding: 5px 8px; border: 1px solid #d4cbbe; border-radius: 4px; font-size: 11px; font-family: 'JetBrains Mono', Consolas, monospace; }
.ae-add-btn { padding: 5px 10px; background: #E86A2A; color: #fff; border: none; border-radius: 4px; font-size: 11px; cursor: pointer; }
.ae-found-item { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; background: #fef3c7; border: 1px solid #fcd34d; border-radius: 4px; font-size: 10px; font-family: 'JetBrains Mono', Consolas, monospace; margin: 2px; }
.ae-actions { padding: 12px 16px; border-top: 1px solid #d4cbbe; }
.ae-btn { display: inline-flex; padding: 7px 14px; border: 1px solid #d4cbbe; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; background: #fff; color: #1a1612; }
.ae-btn-submit { background: #059669; color: #fff; border-color: #059669; }
.ae-btn-submit:hover { background: #047857; }
.ae-error { padding: 10px 14px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 6px; color: #991b1b; font-size: 12px; margin: 8px 16px; }

/* ============================================================
   DETECTION RULE BUILDER
   ============================================================ */
.rule-builder { background: #f5f3ed; border: 1px solid #d4cbbe; border-radius: 8px; overflow: hidden; margin: 20px 0; }
.rb-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: #e3dacc; border-bottom: 1px solid #d4cbbe; }
.rb-header-left { display: flex; align-items: center; gap: 8px; }
.rb-header-right { display: flex; align-items: center; gap: 8px; }
.rb-badge { font-size: 9px; font-weight: 700; color: #fff; padding: 2px 8px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.5px; background: #2563eb; margin-right: 8px; }
.rb-title { font-size: 13px; font-weight: 700; color: #1a1612; }
.rb-hdr-btn { background: #fff; border: 1px solid #d4cbbe; border-radius: 4px; color: #6b5d4d; font-size: 12px; width: 28px; height: 28px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.rb-scenario { padding: 12px 16px; font-size: 12px; color: #3d3224; line-height: 1.6; border-bottom: 1px solid #d4cbbe; background: #fff; }
.rb-scenario-label { font-size: 9px; font-weight: 700; color: #E86A2A; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
.rb-editor-section { padding: 12px 16px; }
.rb-section-label { font-size: 10px; font-weight: 700; color: #1a3f55; text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 6px; }
.rb-editor { width: 100%; min-height: 100px; background: #faf9f5; color: #1a1612; border: 1px solid #d4cbbe; border-radius: 6px; padding: 10px 12px; font-family: 'JetBrains Mono', Consolas, monospace; font-size: 12px; line-height: 1.5; resize: vertical; box-sizing: border-box; }
.rb-editor:focus { outline: 2px solid #E86A2A; outline-offset: -1px; }
.rb-entity-list { margin-top: 8px; }
.rb-entity-row { display: flex; gap: 8px; margin-bottom: 6px; align-items: center; }
.rb-entity-type { padding: 5px 8px; border: 1px solid #d4cbbe; border-radius: 4px; font-size: 11px; background: #fff; }
.rb-entity-input { flex: 1; padding: 5px 8px; border: 1px solid #d4cbbe; border-radius: 4px; font-size: 11px; font-family: 'JetBrains Mono', Consolas, monospace; }
.rb-fp-input { width: 100%; min-height: 50px; padding: 8px 10px; border: 1px solid #d4cbbe; border-radius: 4px; font-size: 11px; font-family: inherit; resize: vertical; box-sizing: border-box; }
.rb-hints { padding: 0 16px 8px; }
.rb-hint { font-size: 11px; color: #6b5d4d; padding: 4px 10px; background: #fef7f3; border-left: 3px solid #E86A2A; border-radius: 0 4px 4px 0; margin-bottom: 4px; }
.rb-actions { padding: 12px 16px; border-top: 1px solid #d4cbbe; }
.rb-btn { display: inline-flex; padding: 7px 14px; border: 1px solid #d4cbbe; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; background: #fff; color: #1a1612; }
.rb-btn-validate { background: #2563eb; color: #fff; border-color: #2563eb; }
.rb-btn-validate:hover { background: #1d4ed8; }
.rb-feedback { padding: 12px 16px; }
.rb-fb-item { display: flex; align-items: flex-start; gap: 8px; padding: 6px 10px; border-radius: 5px; margin-bottom: 4px; font-size: 12px; }
.rb-fb-item.rb-pass { background: #ecfdf5; border: 1px solid #a7f3d0; }
.rb-fb-item.rb-fail { background: #fef2f2; border: 1px solid #fecaca; }
.rb-fb-item.rb-info { background: #eff6ff; border: 1px solid #bfdbfe; }
.rb-fb-icon { flex-shrink: 0; font-size: 14px; }
.rb-fb-score { font-size: 11px; color: #6b5d4d; margin-left: auto; font-weight: 600; }
.rb-error { padding: 10px 14px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 6px; color: #991b1b; font-size: 12px; margin: 8px 16px; }