/* ============================================================
   PROCUREMENT OPERATIONS CONTROL TOWER
   Enterprise / Industrial Light UI
   Fully local — no CDN / external assets
============================================================ */


/* ============================================================
   DESIGN TOKENS
============================================================ */

:root {

  --bg: #f3f6f8;
  --surface: #ffffff;
  --surface-soft: #f8fafb;
  --surface-blue: #f4f8fb;

  --border: #d9e1e6;
  --border-strong: #c8d3da;

  --text: #17232d;
  --text-strong: #0d1821;
  --text-muted: #5f6f7b;
  --text-light: #7d8b95;

  --blue: #1769aa;
  --blue-dark: #0e4f82;
  --blue-soft: #eaf4fb;

  --green: #16845b;
  --green-soft: #eaf7f1;

  --amber: #b77908;
  --amber-soft: #fff7df;

  --red: #bd3f3f;
  --red-soft: #fff0f0;

  --purple: #6952a8;
  --purple-soft: #f5f1fc;

  --shadow-sm:
    0 1px 2px rgba(15, 30, 40, .04);

  --shadow:
    0 4px 16px rgba(20, 42, 55, .055);

  --shadow-lg:
    0 10px 32px rgba(20, 42, 55, .08);

  --radius-sm: 6px;
  --radius: 9px;
  --radius-lg: 12px;

  --font:
    Inter,
    "Segoe UI",
    Arial,
    sans-serif;

}


/* ============================================================
   RESET
============================================================ */

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;

  background: var(--bg);

  color: var(--text);

  font-family: var(--font);

  font-size: 14px;

  line-height: 1.5;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

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

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3,
strong,
b {
  color: var(--text-strong);
}


/* ============================================================
   APPLICATION SHELL
============================================================ */

.app-shell {
  width: 100%;
  min-height: 100vh;
}


/* ============================================================
   TOP BAR
============================================================ */

.topbar {

  min-height: 106px;

  padding:
    22px
    32px
    18px;

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 32px;

  background: var(--surface);

  border-bottom: 1px solid var(--border);

}


.brand-block {
  min-width: 0;
}


.eyebrow {

  display: flex;

  align-items: center;

  gap: 6px;

  margin-bottom: 7px;

  color: #326887;

  font-size: 10px;

  font-weight: 800;

  letter-spacing: .11em;

  line-height: 1.25;

  text-transform: uppercase;

}


.brand-separator {
  color: #9aabb5;
}


.brand-block h1 {

  margin: 0 0 5px;

  font-size: 27px;

  line-height: 1.15;

  font-weight: 750;

  letter-spacing: -.025em;

}


.brand-block p {

  margin: 0;

  color: var(--text-muted);

  font-size: 13px;

  line-height: 1.45;

}


.system-block {

  display: flex;

  flex-direction: column;

  align-items: flex-end;

  gap: 8px;

  flex: 0 0 auto;

}


.system-status {

  display: flex;

  align-items: center;

  gap: 8px;

  color: #29404e;

  font-size: 11px;

  font-weight: 800;

  letter-spacing: .06em;

}


.status-dot {

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: var(--green);

  box-shadow:
    0 0 0 3px rgba(22,132,91,.10);

  animation: statusPulse 2.2s ease-in-out infinite;

}


.model-status {

  padding: 6px 10px;

  border: 1px solid #d8e8df;

  border-radius: 5px;

  background: var(--green-soft);

  color: var(--green);

  font-size: 10px;

  font-weight: 800;

  letter-spacing: .04em;

}


.model-status.warn {

  border-color: #eedca8;

  background: var(--amber-soft);

  color: var(--amber);

}


.model-status.down {

  border-color: #efcccc;

  background: var(--red-soft);

  color: var(--red);

}


.model-status.live {

  border-color: #d8e8df;

  background: var(--green-soft);

  color: var(--green);

}


/* ============================================================
   NAVIGATION
============================================================ */

.tabs {

  display: flex;

  align-items: stretch;

  gap: 2px;

  min-height: 49px;

  padding:
    0
    32px;

  background: var(--surface);

  border-bottom: 1px solid var(--border);

  overflow-x: auto;

}


.tab {

  position: relative;

  appearance: none;

  border: 0;

  background: transparent;

  padding:
    0
    18px;

  color: #667782;

  font-size: 12px;

  font-weight: 700;

  white-space: nowrap;

}


.tab::after {

  content: "";

  position: absolute;

  left: 14px;

  right: 14px;

  bottom: -1px;

  height: 2px;

  background: transparent;

}


.tab:hover {
  color: var(--blue);
}


.tab.active {
  color: var(--blue-dark);
}


.tab.active::after {
  background: var(--blue);
}


/* ============================================================
   MAIN
============================================================ */

main {

  width: 100%;

  max-width: 1880px;

  margin: 0 auto;

  padding:
    22px
    28px
    60px;

}


.panel {
  display: none;
}

.panel.active {
  display: block;
}


/* ============================================================
   COMMON CARD
============================================================ */

.card {

  background: var(--surface);

  border:
    1px solid var(--border);

  border-radius: var(--radius);

  box-shadow: var(--shadow-sm);

  overflow: hidden;

}


.panel-head {

  min-height: 82px;

  padding:
    17px
    20px;

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 20px;

  border-bottom: 1px solid #e5ebee;

}


.panel-head.compact {

  min-height: 62px;

  padding:
    13px
    16px;

}


.panel-head h2 {

  margin: 0;

  font-size: 17px;

  line-height: 1.25;

  font-weight: 750;

  letter-spacing: -.012em;

}


.panel-head p {

  max-width: 760px;

  margin:
    5px
    0
    0;

  color: var(--text-muted);

  font-size: 12px;

  line-height: 1.5;

}


.panel-head.compact h2 {
  font-size: 15px;
}


.panel-counter {

  flex: 0 0 auto;

  padding-top: 4px;

  color: #71818c;

  font-size: 10px;

  font-weight: 800;

  letter-spacing: .07em;

}


/* ============================================================
   KPI STRIP
============================================================ */

.kpi-strip {

  display: grid;

  grid-template-columns:
    repeat(6, minmax(0, 1fr));

  gap: 10px;

  margin-bottom: 12px;

}


.kpi {

  position: relative;

  min-height: 112px;

  padding: 16px 17px 14px;

  background: var(--surface);

  border:
    1px solid var(--border);

  border-radius: var(--radius);

  box-shadow: var(--shadow-sm);

  overflow: hidden;

}


.kpi::before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 3px;

  height: 100%;

  background: #b9cbd6;

}


.kpi:first-child::before {
  background: var(--green);
}


.kpi:nth-child(2)::before {
  background: var(--amber);
}


.kpi:nth-child(3)::before {
  background: var(--blue);
}


.kpi:nth-child(4)::before {
  background: var(--blue);
}


.kpi:nth-child(5)::before {
  background: var(--purple);
}


.kpi:nth-child(6)::before {
  background: #657a88;
}


.kpi-label {

  display: block;

  margin-bottom: 7px;

  color: #71828d;

  font-size: 9px;

  font-weight: 850;

  letter-spacing: .10em;

  line-height: 1.3;

}


.kpi strong {

  display: block;

  margin-bottom: 5px;

  font-size: 27px;

  line-height: 1;

  font-weight: 780;

  letter-spacing: -.025em;

}


.kpi small {

  display: block;

  color: #74848e;

  font-size: 11px;

  line-height: 1.35;

}


/* ============================================================
   ACTIVE CASE
============================================================ */

.active-case {

  min-height: 106px;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  margin-bottom: 12px;

  background: var(--surface);

  border:
    1px solid var(--border);

  border-radius: var(--radius);

  box-shadow: var(--shadow-sm);

  overflow: hidden;

}


.active-case-main {

  min-width: 0;

  padding:
    15px
    20px;

}


.case-title-row {

  display: flex;

  align-items: center;

  gap: 10px;

  min-width: 0;

}


.case-title-row h2 {

  margin: 0;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  font-size: 20px;

  line-height: 1.2;

  font-weight: 760;

}


.active-case-main p {

  margin:
    5px
    0
    0;

  color: var(--text-muted);

  font-size: 12px;

}


.run-pill {

  display: inline-flex;

  align-items: center;

  min-height: 23px;

  padding:
    3px
    8px;

  border:
    1px solid #d8e8df;

  border-radius: 999px;

  background: var(--green-soft);

  color: var(--green);

  font-size: 9px;

  font-weight: 850;

  letter-spacing: .07em;

  white-space: nowrap;

}


.case-meta {

  display: grid;

  grid-template-columns:
    repeat(4, minmax(105px, 1fr));

  min-width: 530px;

  border-left: 1px solid var(--border);

}


.case-meta > div {

  display: flex;

  flex-direction: column;

  justify-content: center;

  padding:
    13px
    15px;

  border-right: 1px solid var(--border);

}


.case-meta > div:last-child {
  border-right: 0;
}


.case-meta span {

  margin-bottom: 5px;

  color: #7b8a94;

  font-size: 8px;

  font-weight: 850;

  letter-spacing: .10em;

}


.case-meta strong {

  font-size: 11px;

  line-height: 1.3;

  font-weight: 750;

}


/* ============================================================
   MAIN CONTROL ROOM
============================================================ */

.control-room {

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    360px;

  gap: 12px;

  margin-bottom: 12px;

  align-items: stretch;

}


.map-panel {

  min-width: 0;

  overflow: visible;

}


.map-panel-head {

  min-height: 96px;

}


.map-legend {

  display: flex;

  flex-wrap: wrap;

  justify-content: flex-end;

  align-items: center;

  gap: 10px;

  padding-top: 5px;

  flex: 0 0 auto;

}


.map-legend span {

  display: inline-flex;

  align-items: center;

  gap: 5px;

  color: #6b7b86;

  font-size: 10px;

  font-weight: 700;

  white-space: nowrap;

}


.legend-dot {

  width: 7px;

  height: 7px;

  border-radius: 50%;

  background: #b9c5cc;

}


.legend-dot.active {
  background: var(--blue);
}

.legend-dot.success {
  background: var(--green);
}

.legend-dot.warning {
  background: var(--amber);
}

.legend-dot.blocked {
  background: var(--red);
}


/* ============================================================
   OPERATING MAP
============================================================ */

.operating-map {

  position: relative;

  padding:
    12px
    12px
    14px;

  background:
    linear-gradient(
      180deg,
      #fbfcfd 0%,
      #f6f9fa 100%
    );

}


.governance-band {

  min-height: 48px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  margin-bottom: 10px;

  padding:
    9px
    12px;

  background: #f5f8fa;

  border:
    1px solid #dce5e9;

  border-radius: 6px;

}


.governance-label {

  min-width: 0;

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 7px 12px;

}


.governance-label .eyebrow {
  margin: 0;
}


.governance-label strong {

  color: #566974;

  font-size: 10px;

  font-weight: 700;

}


.governance-label strong span {
  color: #a5b2ba;
  margin: 0 2px;
}


.governance-status {

  flex: 0 0 auto;

  padding:
    5px
    9px;

  border:
    1px solid #d5e9df;

  border-radius: 4px;

  background: var(--green-soft);

  color: var(--green);

  font-size: 9px;

  font-weight: 850;

  letter-spacing: .06em;

}


.governance-status.warning {

  border-color: #eddca9;

  background: var(--amber-soft);

  color: var(--amber);

}


.governance-status.blocked {

  border-color: #eccaca;

  background: var(--red-soft);

  color: var(--red);

}


/* ============================================================
   GRAPH CANVAS
============================================================ */

.graph {

  position: relative;

  min-height: 430px;

  padding:
    25px
    20px;

  border:
    1px solid #dce5e9;

  border-radius: 7px;

  overflow: hidden;

  background-color: #fbfcfd;

  background-image:

    linear-gradient(
      rgba(65, 93, 108, .045) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(65, 93, 108, .045) 1px,
      transparent 1px
    );

  background-size:
    24px 24px;

}


/* subtle central operating corridor */

.graph::before {

  content: "";

  position: absolute;

  left: 4%;

  right: 4%;

  top: 50%;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(23,105,170,.12),
      transparent
    );

  pointer-events: none;

}


/* atmospheric glow */

.graph::after {

  content: "";

  position: absolute;

  width: 300px;

  height: 300px;

  left: 38%;

  top: 23%;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(23,105,170,.045),
      transparent 68%
    );

  pointer-events: none;

}


.graph-loading {

  position: absolute;

  inset: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 9px;

  color: #758690;

  font-size: 13px;

  font-weight: 650;

}


.loading-dot {

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: var(--blue);

  animation:
    loadingPulse 1.3s ease-in-out infinite;

}


/* ============================================================
   MULTI-ROW AGENT GRAPH
============================================================ */

.nodes {

  position: relative;

  z-index: 2;

  width: 100%;

  min-height: 380px;

  display: grid;

  grid-template-columns:
    repeat(4, minmax(150px, 1fr));

  grid-template-rows:
    repeat(3, 1fr);

  gap:
    22px
    34px;

  align-items: center;

}


/*
  JS currently emits:

  node
  edge
  node
  edge
  ...

  The following lets the sequence naturally
  become a 4 + 4 + 3 procurement map.
*/

.node {

  position: relative;

  min-width: 0;

  min-height: 96px;

  padding:
    13px
    13px
    11px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  gap: 4px;

  background:
    linear-gradient(
      180deg,
      #ffffff,
      #f8fafb
    );

  border:
    1px solid #cad8df;

  border-radius: 8px;

  box-shadow:
    0 3px 10px rgba(20,42,55,.055);

  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease,
    background .25s ease;

  overflow: visible;

}


.node::before {

  content: "";

  position: absolute;

  left: 0;

  top: 0;

  bottom: 0;

  width: 3px;

  border-radius:
    8px
    0
    0
    8px;

  background: #c4d0d6;

}


.node:hover {

  transform:
    translateY(-3px);

  border-color:
    #9fb6c4;

  box-shadow:
    0 9px 22px rgba(20,42,55,.09);

}


/* agent name */

.node b {

  display: block;

  color: var(--text-strong);

  font-size: 12px;

  line-height: 1.22;

  font-weight: 780;

}


/* agent group */

.node small {

  display: block;

  color: #6e7e89;

  font-size: 10px;

  line-height: 1.25;

}


.node small:last-child {

  margin-top: 3px;

  color: #84939c;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: .07em;

}


/* completed */

.node.done,
.node.completed,
.node.success {

  border-color:
    #c8e0d5;

}


.node.done::before,
.node.completed::before,
.node.success::before {

  background:
    var(--green);

}


.node.done small:last-child,
.node.completed small:last-child,
.node.success small:last-child {

  color:
    var(--green);

}


/* running */

.node.running {

  border-color:
    #a9cce3;

  background:
    linear-gradient(
      180deg,
      #ffffff,
      #f1f8fc
    );

  box-shadow:
    0 0 0 3px rgba(23,105,170,.07),
    0 7px 20px rgba(23,105,170,.10);

  animation:
    nodeActive 2s ease-in-out infinite;

}


.node.running::before {

  background:
    var(--blue);

  animation:
    barPulse 1.4s ease-in-out infinite;

}


.node.running small:last-child {

  color:
    var(--blue);

}


/* warning */

.node.warning {

  border-color:
    #e4c979;

  background:
    linear-gradient(
      180deg,
      #fffef9,
      #fff9e8
    );

  box-shadow:
    0 0 0 3px rgba(183,121,8,.06),
    0 6px 18px rgba(183,121,8,.08);

}


.node.warning::before {

  background:
    var(--amber);

  animation:
    warningPulse 1.2s ease-in-out infinite;

}


.node.warning small:last-child {

  color:
    var(--amber);

}


/* blocked */

.node.blocked {

  border-color:
    #e2b9b9;

  background:
    linear-gradient(
      180deg,
      #fffafa,
      #fff2f2
    );

}


.node.blocked::before {

  background:
    var(--red);

}


.node.blocked small:last-child {

  color:
    var(--red);

}


/* ============================================================
   GRAPH EDGES
============================================================ */

.edge {

  position: relative;

  height: 2px;

  align-self: center;

  background:
    #cbd7dd;

  border-radius: 2px;

}


/*
  We use the edge as a directional transport
  channel. A moving packet travels through it.
*/

.edge::before {

  content: "";

  position: absolute;

  top: 50%;

  left: -2px;

  width: 7px;

  height: 7px;

  transform:
    translateY(-50%);

  border-radius: 50%;

  background:
    #aebdc5;

  opacity: .65;

}


.edge::after {

  content: "";

  position: absolute;

  right: -1px;

  top: 50%;

  width: 0;

  height: 0;

  transform:
    translateY(-50%);

  border-top:
    4px solid transparent;

  border-bottom:
    4px solid transparent;

  border-left:
    5px solid #b6c4cb;

}


/* active directional packet */

.edge.live {

  background:
    linear-gradient(
      90deg,
      rgba(23,105,170,.20),
      rgba(23,105,170,.60),
      rgba(23,105,170,.20)
    );

  background-size:
    200% 100%;

  animation:
    edgeFlow 1.3s linear infinite;

}


.edge.live::before {

  background:
    var(--blue);

  box-shadow:
    0 0 0 4px rgba(23,105,170,.09),
    0 0 12px rgba(23,105,170,.35);

  animation:
    packetMove 1.3s linear infinite;

}


.edge.live::after {

  border-left-color:
    var(--blue);

}


/*
  If the JS uses horizontal sequence edges,
  keep the arrows visually directional.
*/

.nodes > .edge {

  min-width: 24px;

}


/* ============================================================
   FLOW FOOTER
============================================================ */

.flow-footer {

  min-height: 58px;

  display: flex;

  align-items: center;

  gap: 10px;

  padding:
    10px
    14px
    0;

}


.flow-stage {

  display: flex;

  align-items: center;

  gap: 7px;

  flex: 0 0 auto;

  color: #61737f;

  font-size: 10px;

  font-weight: 750;

}


.flow-number {

  width: 22px;

  height: 22px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  border:
    1px solid #cbd8df;

  border-radius: 50%;

  background:
    #ffffff;

  color:
    #527083;

  font-size: 8px;

  font-weight: 850;

}


.flow-line {

  position: relative;

  height: 1px;

  flex: 1;

  min-width: 20px;

  background:
    #d5dfe4;

  overflow: hidden;

}


.flow-line::after {

  content: "";

  position: absolute;

  top: 0;

  left: -25%;

  width: 25%;

  height: 1px;

  background:
    var(--blue);

  opacity: .45;

  animation:
    footerFlow 3.2s linear infinite;

}


/* ============================================================
   RIGHT CONTROL SIDEBAR
============================================================ */

.control-sidebar {

  min-width: 0;

  display: grid;

  grid-template-rows:
    minmax(260px, 1fr)
    auto
    auto;

  gap: 12px;

}


.trace-panel {

  min-height: 260px;

  display: flex;

  flex-direction: column;

}


.live-indicator {

  display: inline-flex;

  align-items: center;

  gap: 5px;

  color: var(--green);

  font-size: 9px;

  font-weight: 850;

  letter-spacing: .08em;

}


.live-indicator i {

  width: 6px;

  height: 6px;

  border-radius: 50%;

  background: var(--green);

  animation:
    statusPulse 1.5s ease-in-out infinite;

}


.live-trace {

  flex: 1;

  min-height: 0;

  max-height: 370px;

  overflow-y: auto;

}


.live-trace::-webkit-scrollbar,
.activity::-webkit-scrollbar,
.decisions::-webkit-scrollbar,
.ai-reasoning::-webkit-scrollbar {

  width: 6px;

}


.live-trace::-webkit-scrollbar-thumb,
.activity::-webkit-scrollbar-thumb,
.decisions::-webkit-scrollbar-thumb,
.ai-reasoning::-webkit-scrollbar-thumb {

  background: #cbd6dc;

  border-radius: 10px;

}


/* trace item */

.trace-item {

  position: relative;

  padding:
    11px
    14px
    10px
    18px;

  border-bottom:
    1px solid #e8edef;

}


.trace-item::before {

  content: "";

  position: absolute;

  left: 8px;

  top: 17px;

  width: 5px;

  height: 5px;

  border-radius: 50%;

  background:
    #b7c4cb;

}


.trace-item.running::before {
  background: var(--blue);
}

.trace-item.done::before {
  background: var(--green);
}

.trace-item.warning::before {
  background: var(--amber);
}

.trace-item.blocked::before {
  background: var(--red);
}


.trace-item small {

  display: block;

  margin-bottom: 2px;

  color: #8a989f;

  font-size: 9px;

}


.trace-item b {

  display: block;

  margin-bottom: 3px;

  font-size: 11px;

  line-height: 1.3;

}


.trace-item p {

  margin: 0;

  color: #667781;

  font-size: 10px;

  line-height: 1.4;

}


/* ============================================================
   EXCEPTION PANEL
============================================================ */

.exception-panel {

  min-height: 125px;

}


.count-badge {

  min-width: 22px;

  height: 22px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  background:
    var(--amber-soft);

  border:
    1px solid #eadba9;

  color:
    var(--amber);

  font-size: 10px;

  font-weight: 850;

}


.exception-queue {

  padding:
    0
    14px
    13px;

}


.exception-item {

  padding:
    10px;

  border:
    1px solid #eedeb0;

  border-radius: 6px;

  background:
    #fffaf0;

}


.exception-item b {

  display: block;

  margin-bottom: 3px;

  color: #72520b;

  font-size: 11px;

}


.exception-item p {

  margin: 0;

  color: #776b4e;

  font-size: 10px;

  line-height: 1.45;

}


.exception-item .mini {

  margin-top: 7px;

}


/* ============================================================
   DECISION GATE
============================================================ */

.gate-panel {

  padding:
    14px;

}


.gate {

  margin:
    8px
    0
    9px;

  padding:
    8px
    10px;

  border:
    1px solid #d4e7dc;

  border-radius: 5px;

  background:
    var(--green-soft);

  color:
    var(--green);

  font-size: 10px;

  font-weight: 850;

  letter-spacing: .05em;

}


.gate.warn {

  border-color:
    #ead7a0;

  background:
    var(--amber-soft);

  color:
    var(--amber);

}


.gate.bad {

  border-color:
    #e6c2c2;

  background:
    var(--red-soft);

  color:
    var(--red);

}


.gate-evidence {

  color:
    #63747e;

  font-size:
    10px;

  line-height:
    1.5;

}


/* ============================================================
   OPERATIONS GRID
============================================================ */

.operations-grid {

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  gap: 12px;

  margin-bottom: 12px;

}


.operations-panel {

  min-width: 0;

}


.operations-panel.ai-panel {

  grid-column:
    1 / -1;

}


.activity,
.decisions {

  height: 330px;

  overflow-y: auto;

}


/* ============================================================
   ACTIVITY EVENTS
============================================================ */

.event {

  position: relative;

  padding:
    12px
    16px
    12px
    19px;

  border-bottom:
    1px solid #e7edef;

}


.event::before {

  content: "";

  position: absolute;

  left: 8px;

  top: 17px;

  width: 5px;

  height: 5px;

  border-radius: 50%;

  background: #b8c5cc;

}


.event.running::before {
  background: var(--blue);
}

.event.done::before {
  background: var(--green);
}

.event.warning::before {
  background: var(--amber);
}

.event.blocked::before {
  background: var(--red);
}

.event.human::before {
  background: var(--purple);
}


.event small {

  display: block;

  margin-bottom: 3px;

  color: #8b999f;

  font-size: 9px;

}


.event b {

  display: block;

  margin-bottom: 3px;

  font-size: 11px;

  line-height: 1.3;

}


.event p {

  margin: 0;

  color: #657680;

  font-size: 10px;

  line-height: 1.5;

}


/* ============================================================
   EVIDENCE
============================================================ */

.evidence-list {

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 6px;

  margin-top: 8px;

}


.evitem {

  min-width: 0;

  padding:
    7px
    8px;

  background:
    #f7f9fa;

  border:
    1px solid #e3e9ec;

  border-radius: 4px;

}


.evitem label {

  display: block;

  margin-bottom: 2px;

  color: #81909a;

  font-size: 8px;

  font-weight: 800;

  letter-spacing: .05em;

  text-transform: uppercase;

}


.evitem strong {

  display: block;

  overflow-wrap: anywhere;

  color: #394b56;

  font-size: 10px;

  line-height: 1.35;

}


/* ============================================================
   DECISIONS
============================================================ */

.decision {

  padding:
    13px
    16px;

  border-bottom:
    1px solid #e7edef;

}


.decision b {

  display: block;

  margin-bottom: 5px;

  font-size: 11px;

}


.decision p {

  margin:
    0
    0
    6px;

  color: #586a75;

  font-size: 10px;

  line-height: 1.45;

}


.mini {

  color:
    #72828c;

  font-size:
    10px;

  line-height:
    1.45;

}


/* ============================================================
   AI REASONING
============================================================ */

.ai-panel {

  border-color:
    #ddd6ed;

}


.ai-panel .panel-head {

  background:
    linear-gradient(
      90deg,
      #fbfaff,
      #ffffff
    );

}


.model-badge {

  flex: 0 0 auto;

  padding:
    5px
    8px;

  border:
    1px solid #ddd4ee;

  border-radius: 4px;

  background:
    var(--purple-soft);

  color:
    var(--purple);

  font-size:
    9px;

  font-weight:
    850;

  letter-spacing:
    .05em;

}


.model-badge.pill-live {

  border-color:
    #d4e7dc;

  background:
    var(--green-soft);

  color:
    var(--green);

}


.model-badge.pill-warn {

  border-color:
    #ead7a0;

  background:
    var(--amber-soft);

  color:
    var(--amber);

}


.model-badge.pill-down {

  border-color:
    #e6c2c2;

  background:
    var(--red-soft);

  color:
    var(--red);

}


.ai-reasoning {

  max-height: 440px;

  overflow-y: auto;

}


.ai-item {

  padding:
    14px
    16px;

  border-bottom:
    1px solid #ebe7f1;

}


.ai-head {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 15px;

  margin-bottom: 10px;

}


.ai-head b {

  color:
    #56418b;

  font-size:
    11px;

}


.ai-head span {

  color:
    #8a7ca4;

  font-size:
    9px;

  font-weight:
    700;

}


.ai-grid {

  display: grid;

  grid-template-columns:
    1fr
    1.8fr
    1.2fr
    1.2fr;

  gap: 8px;

}


.ai-grid > div {

  min-width: 0;

  min-height: 84px;

  padding:
    10px;

  border:
    1px solid #e5e0ee;

  border-radius: 5px;

  background:
    #fbfaff;

}


.ai-grid label {

  display: block;

  margin-bottom: 6px;

  color:
    #887aa2;

  font-size:
    8px;

  font-weight:
    850;

  letter-spacing:
    .08em;

  text-transform:
    uppercase;

}


.ai-grid strong,
.ai-grid span {

  display: block;

  color:
    #4f5960;

  font-size:
    10px;

  line-height:
    1.5;

  overflow-wrap:
    anywhere;

}


/* ============================================================
   CASE PORTFOLIO
============================================================ */

.cases-panel {

  margin-bottom: 12px;

}


.case-summary {

  display: flex;

  align-items: center;

}


.case-summary span {

  padding:
    6px
    9px;

  border:
    1px solid #dce5e9;

  border-radius: 4px;

  color:
    #6f808b;

  background:
    #f7f9fa;

  font-size:
    9px;

  font-weight:
    850;

  letter-spacing:
    .07em;

}


.table-wrap {

  width: 100%;

  overflow-x: auto;

}


.cases-table {

  min-width:
    900px;

}


.cases-table th,
.cases-table td,
#quotes th,
#quotes td {

  padding:
    11px
    12px;

  border-bottom:
    1px solid #e5ebee;

  text-align: left;

  white-space: nowrap;

}


.cases-table th,
#quotes th {

  background:
    #f7f9fa;

  color:
    #71818b;

  font-size:
    9px;

  font-weight:
    850;

  letter-spacing:
    .07em;

  text-transform:
    uppercase;

}


.cases-table td,
#quotes td {

  color:
    #4c5e69;

  font-size:
    10px;

}


.cases-table tbody tr:hover,
#quotes tbody tr:hover {

  background:
    #fafcfd;

}


.progress {

  position: relative;

  width: 90px;

  height: 6px;

  border-radius: 999px;

  background:
    #e1e7ea;

  overflow: hidden;

}


.progress span {

  display: block;

  height: 100%;

  border-radius: inherit;

  background:
    var(--blue);

}


/* ============================================================
   GENERIC STATUS HELPERS
============================================================ */

.good {
  color: var(--green) !important;
  font-weight: 750;
}

.warn {
  color: var(--amber) !important;
}

.bad {
  color: var(--red) !important;
}


/* ============================================================
   PAGE HEAD
============================================================ */

.page-head {

  margin-bottom:
    18px;

  padding:
    4px
    2px;

}


.page-head h2 {

  margin:
    0
    0
    6px;

  font-size:
    24px;

  line-height:
    1.2;

  font-weight:
    760;

  letter-spacing:
    -.02em;

}


.page-head p {

  max-width:
    900px;

  margin:
    0;

  color:
    var(--text-muted);

  font-size:
    13px;

  line-height:
    1.55;

}


/* ============================================================
   EXCEPTION MANAGEMENT
============================================================ */

.scenario-grid {

  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap:
    12px;

}


.scenario {

  min-width:
    0;

  padding:
    18px;

  background:
    var(--surface);

  border:
    1px solid var(--border);

  border-radius:
    var(--radius);

  box-shadow:
    var(--shadow-sm);

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;

}


.scenario:hover {

  transform:
    translateY(-2px);

  border-color:
    #c2d1d9;

  box-shadow:
    var(--shadow);

}


.scenario h3 {

  margin:
    11px
    0
    7px;

  font-size:
    15px;

  line-height:
    1.3;

}


.scenario > p {

  min-height:
    48px;

  margin:
    0
    12px;

  color:
    #687984;

  font-size:
    11px;

  line-height:
    1.5;

}


.scenario .mini {

  min-height:
    90px;

  margin-bottom:
    14px;

  padding:
    10px;

  background:
    #f7f9fa;

  border:
    1px solid #e3e9ec;

  border-radius:
    5px;

}


.scenario button {

  width:
    100%;

  min-height:
    37px;

  border:
    1px solid #b8cedc;

  border-radius:
    5px;

  background:
    #f7fbfd;

  color:
    var(--blue-dark);

  font-size:
    11px;

  font-weight:
    800;

  transition:
    background .2s ease,
    border-color .2s ease;

}


.scenario button:hover {

  background:
    var(--blue-soft);

  border-color:
    #8fb3c9;

}


/* scenario badge */

.sev {

  display:
    inline-flex;

  align-items:
    center;

  padding:
    4px
    7px;

  border:
    1px solid #dce5e9;

  border-radius:
    4px;

  color:
    #687984;

  background:
    #f7f9fa;

  font-size:
    8px;

  font-weight:
    850;

  letter-spacing:
    .06em;

}


.sev.high,
.sev.critical {

  border-color:
    #ebcdcd;

  background:
    var(--red-soft);

  color:
    var(--red);

}


.sev.medium {

  border-color:
    #ead9a7;

  background:
    var(--amber-soft);

  color:
    var(--amber);

}


.sev.low {

  border-color:
    #d6e7de;

  background:
    var(--green-soft);

  color:
    var(--green);

}


/* ============================================================
   AGENT WORKFORCE
============================================================ */

.agent-grid {

  display:
    grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap:
    12px;

}


.agent {

  padding:
    17px;

  background:
    var(--surface);

  border:
    1px solid var(--border);

  border-radius:
    var(--radius);

  box-shadow:
    var(--shadow-sm);

}


.agent .row {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  margin-bottom:
    9px;

}


.tag {

  padding:
    4px
    7px;

  border:
    1px solid #dce5e9;

  border-radius:
    4px;

  background:
    #f7f9fa;

  color:
    #667985;

  font-size:
    8px;

  font-weight:
    850;

  letter-spacing:
    .06em;

}


.status {

  color:
    var(--green);

  font-size:
    9px;

  font-weight:
    850;

  letter-spacing:
    .05em;

}


.agent h3 {

  margin:
    0
    5px;

  font-size:
    15px;

}


.agent > p {

  min-height:
    42px;

  margin:
    0
    12px;

  color:
    #687984;

  font-size:
    11px;

  line-height:
    1.5;

}


.agent .mini {

  padding:
    10px;

  background:
    #f7f9fa;

  border:
    1px solid #e3e9ec;

  border-radius:
    5px;

}


/* ============================================================
   PROCUREMENT DATA
============================================================ */

.data-overview {

  display:
    grid;

  grid-template-columns:
    minmax(0, .8fr)
    minmax(0, 1.2fr);

  gap:
    12px;

  margin-bottom:
    12px;

}


.data-overview .card {

  min-height:
    210px;

  padding:
    17px;

}


.data-overview h3 {

  margin:
    0
    0
    12px;

  font-size:
    15px;

}


.data-overview .mini {

  padding:
    12px;

  background:
    #f7f9fa;

  border:
    1px solid #e3e9ec;

  border-radius:
    5px;

  font-size:
    11px;

  line-height:
    1.7;

}


#signals {

  display:
    grid;

  gap:
    7px;

}


#signals .event {

  padding:
    9px 10px;

  border:
    1px solid #e5ebee;

  border-radius:
    5px;

  background:
    #fafcfd;

}


#signals .event::before {
  display: none;
}


#signals .event p {
  margin-top: 3px;
}


/* ============================================================
   AUDIT
============================================================ */

.audit-grid {

  display:
    grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    12px;

  margin-bottom:
    12px;

}


.audit-grid .card,
#audit > .card {

  padding:
    17px;

}


.audit-grid h3,
#audit > .card h3 {

  margin:
    0
    0
    13px;

  font-size:
    15px;

}


.audit-item {

  padding:
    11px
    0;

  border-bottom:
    1px solid #e7edef;

  color:
    #586b76;

  font-size:
    11px;

  line-height:
    1.5;

}


.artifact {

  margin-bottom:
    9px;

  padding:
    11px;

  border:
    1px solid #e1e8eb;

  border-radius:
    5px;

  background:
    #fafcfd;

}


.artifact > b {

  display:
    block;

  margin-bottom:
    3px;

  font-size:
    11px;

}


.json {

  margin-top:
    8px;

  padding:
    9px;

  white-space:
    pre-wrap;

  overflow-wrap:
    anywhere;

  background:
    #f4f7f8;

  border:
    1px solid #e2e8eb;

  border-radius:
    4px;

  color:
    #53656f;

  font-family:
    Consolas,
    "Courier New",
    monospace;

  font-size:
    9px;

  line-height:
    1.55;

}


/* ============================================================
   ARCHITECTURE
============================================================ */

.architecture-stack {

  display:
    grid;

  gap:
    10px;

  margin-bottom:
    12px;

}


.architecture-layer {

  position:
    relative;

  min-height:
    94px;

  display:
    grid;

  grid-template-columns:
    55px
    minmax(0, 1fr);

  align-items:
    center;

  gap:
    14px;

  padding:
    15px 18px;

  background:
    var(--surface);

  border:
    1px solid var(--border);

  border-radius:
    var(--radius);

  box-shadow:
    var(--shadow-sm);

}


.architecture-layer.authoritative {

  border-color:
    #c8dce8;

  background:
    #f5f9fc;

}


.architecture-layer.governance {

  border-color:
    #d8d0e8;

  background:
    #faf8fd;

}


.layer-number {

  width:
    40px;

  height:
    40px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid #d4dfe4;

  border-radius:
    7px;

  background:
    #f7f9fa;

  color:
    #607784;

  font-size:
    10px;

  font-weight:
    850;

}


.architecture-layer strong {

  display:
    block;

  margin-bottom:
    4px;

  font-size:
    13px;

}


.architecture-layer p {

  margin:
    0;

  color:
    #687984;

  font-size:
    11px;

  line-height:
    1.5;

}


.model-config {

  margin-bottom:
    12px;

}


.model-details {

  padding:
    14px 17px;

  color:
    #596b76;

  background:
    #f8fafb;

  font-family:
    Consolas,
    "Courier New",
    monospace;

  font-size:
    10px;

  line-height:
    1.6;

  overflow-wrap:
    anywhere;

}


.architecture-rule {

  display:
    flex;

  align-items:
    flex-start;

  gap:
    14px;

  padding:
    15px 17px;

  border:
    1px solid #d9e3e8;

  border-left:
    3px solid var(--blue);

  border-radius:
    6px;

  background:
    #f8fafb;

}


.architecture-rule strong {

  flex:
    0 0 auto;

  font-size:
    11px;

}


.architecture-rule span {

  color:
    #647680;

  font-size:
    11px;

  line-height:
    1.5;

}


/* ============================================================
   EMPTY STATES
============================================================ */

.empty {

  min-height:
    70px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    16px;

  color:
    #85939c;

  font-size:
    11px;

  text-align:
    center;

}


/* ============================================================
   ANIMATIONS
============================================================ */

@keyframes statusPulse {

  0%,
  100% {
    opacity: .55;
    transform: scale(.88);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }

}


@keyframes loadingPulse {

  0%,
  100% {
    opacity: .35;
    transform: scale(.8);
  }

  50% {
    opacity: 1;
    transform: scale(1.15);
  }

}


@keyframes nodeActive {

  0%,
  100% {
    box-shadow:
      0 0 0 3px rgba(23,105,170,.045),
      0 7px 20px rgba(23,105,170,.07);
  }

  50% {
    box-shadow:
      0 0 0 5px rgba(23,105,170,.075),
      0 9px 25px rgba(23,105,170,.12);
  }

}


@keyframes barPulse {

  0%,
  100% {
    opacity: .55;
  }

  50% {
    opacity: 1;
  }

}


@keyframes warningPulse {

  0%,
  100% {
    opacity: .65;
  }

  50% {
    opacity: 1;
  }

}


@keyframes edgeFlow {

  0% {
    background-position:
      100% 0;
  }

  100% {
    background-position:
      0 0;
  }

}


@keyframes packetMove {

  0% {
    left: -3px;
    opacity: 0;
  }

  12% {
    opacity: 1;
  }

  88% {
    opacity: 1;
  }

  100% {
    left: calc(100% - 4px);
    opacity: 0;
  }

}


@keyframes footerFlow {

  0% {
    left: -25%;
    opacity: 0;
  }

  15% {
    opacity: .6;
  }

  85% {
    opacity: .6;
  }

  100% {
    left: 100%;
    opacity: 0;
  }

}


/* ============================================================
   RESPONSIVE — LARGE LAPTOP
============================================================ */

@media (max-width: 1500px) {

  main {
    padding-left: 20px;
    padding-right: 20px;
  }

  .topbar,
  .tabs {
    padding-left: 22px;
    padding-right: 22px;
  }

  .control-room {
    grid-template-columns:
      minmax(0, 1fr)
      330px;
  }

  .nodes {
    grid-template-columns:
      repeat(4, minmax(130px, 1fr));

    gap:
      18px
      27px;
  }

  .node {
    min-height: 90px;
  }

}


/* ============================================================
   RESPONSIVE — TABLET / SMALL LAPTOP
============================================================ */

@media (max-width: 1180px) {

  .kpi-strip {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }

  .control-room {
    grid-template-columns:
      1fr;
  }

  .control-sidebar {
    grid-template-columns:
      1.4fr
      1fr
      1fr;

    grid-template-rows:
      1fr;

    align-items: stretch;
  }

  .trace-panel {
    min-height: 300px;
  }

  .operations-grid {
    grid-template-columns:
      1fr;
  }

  .operations-panel.ai-panel {
    grid-column:
      auto;
  }

  .ai-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .scenario-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .agent-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}


/* ============================================================
   RESPONSIVE — TABLET
============================================================ */

@media (max-width: 900px) {

  .topbar {

    flex-direction:
      column;

    gap:
      15px;

  }

  .system-block {

    align-items:
      flex-start;

  }

  .active-case {

    grid-template-columns:
      1fr;

  }

  .case-meta {

    min-width:
      0;

    border-left:
      0;

    border-top:
      1px solid var(--border);

  }

  .control-sidebar {

    grid-template-columns:
      1fr;

    grid-template-rows:
      auto;

  }

  .trace-panel {
    min-height:
      280px;
  }

  .data-overview,
  .audit-grid {

    grid-template-columns:
      1fr;

  }

  .architecture-rule {

    flex-direction:
      column;

    gap:
      5px;

  }

}


/* ============================================================
   RESPONSIVE — MOBILE
============================================================ */

@media (max-width: 640px) {

  body {
    font-size:
      13px;
  }

  .topbar {

    min-height:
      auto;

    padding:
      16px;

  }

  .brand-block h1 {
    font-size:
      21px;
  }

  .brand-block p {
    font-size:
      11px;
  }

  .tabs {
    padding:
      0 10px;
  }

  .tab {
    padding:
      0 12px;

    font-size:
      10px;
  }

  main {

    padding:
      13px
      12px
      40px;

  }

  .kpi-strip {

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

  }

  .kpi {

    min-height:
      100px;

    padding:
      13px;

  }

  .kpi strong {
    font-size:
      22px;
  }

  .active-case-main {
    padding:
      14px;
  }

  .case-meta {

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

  }

  .case-meta > div:nth-child(2) {
    border-right:
      0;
  }

  .map-panel-head {

    flex-direction:
      column;

  }

  .map-legend {

    justify-content:
      flex-start;

  }

  .governance-band {

    align-items:
      flex-start;

    flex-direction:
      column;

  }

  .graph {

    min-height:
      680px;

    padding:
      18px
      12px;

  }

  /*
    On narrow screens, turn the operating map
    into a clean vertical sequence.
  */

  .nodes {

    min-height:
      640px;

    display:
      flex;

    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      7px;

  }

  .node {

    min-height:
      75px;

  }

  .nodes > .edge {

    width:
      2px;

    min-width:
      2px;

    height:
      20px;

    margin:
      0 auto;

    background:
      #cbd7dd;

  }

  .nodes > .edge::after {

    top:
      auto;

    right:
      auto;

    bottom:
      -1px;

    left:
      50%;

    transform:
      translateX(-50%);

    border-top:
      5px solid #b6c4cb;

    border-right:
      4px solid transparent;

    border-left:
      4px solid transparent;

    border-bottom:
      0;

  }

  .nodes > .edge.live::after {

    border-top-color:
      var(--blue);

  }

  .flow-footer {

    overflow-x:
      auto;

  }

  .flow-stage {
    flex:
      0 0 auto;
  }

  .ai-grid {

    grid-template-columns:
      1fr;

  }

  .scenario-grid,
  .agent-grid {

    grid-template-columns:
      1fr;

  }

  .page-head h2 {
    font-size:
      21px;
  }

}


/* ============================================================
   ACCESSIBILITY / REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {

    animation-duration:
      .001ms !important;

    animation-iteration-count:
      1 !important;

    scroll-behavior:
      auto !important;

    transition-duration:
      .001ms !important;

  }

}

/* ============================================================
   MULTI-ROW PROCUREMENT GRAPH
   JS topology support
============================================================ */

.graph-workspace {
  position: relative;
  z-index: 3;
  min-height: 370px;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 8px;
}


.graph-row {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: 142px minmax(0, 1fr);
  align-items: center;
}


.graph-phase {
  align-self: stretch;
  display: flex;
  align-items: center;
  padding-right: 12px;
}


.graph-phase span {
  position: relative;
  padding-left: 9px;
  color: #71838e;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .07em;
  line-height: 1.3;
}


.graph-phase span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  bottom: 1px;
  width: 2px;
  border-radius: 2px;
  background: #b7c9d3;
}


.graph-row-1 .graph-phase span::before {
  background: #1769aa;
}


.graph-row-2 .graph-phase span::before {
  background: #6952a8;
}


.graph-row-3 .graph-phase span::before {
  background: #16845b;
}


.graph-track {
  min-width: 0;
  min-height: 116px;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    42px
    minmax(0, 1fr)
    42px
    minmax(0, 1fr)
    42px
    minmax(0, 1fr);

  align-items: center;

  column-gap: 0;
}


.graph-row-3 .graph-track {
  grid-template-columns:
    minmax(0, 1fr)
    48px
    minmax(0, 1fr)
    48px
    minmax(0, 1fr);
}


.graph-track .node {
  width: 100%;
  min-height: 88px;
}


.graph-track .edge {
  width: 100%;
  margin: 0;
}


/* phase separation */

.graph-row + .graph-row {
  border-top: 1px dashed rgba(105, 127, 140, .18);
}


/* controlled vertical hand-off */

.graph-handoff {
  position: absolute;
  left: 156px;
  right: 30px;
  height: 12px;
  z-index: 4;
  pointer-events: none;
}


.handoff-one {
  top: 35%;
}


.handoff-two {
  top: 67%;
}


.graph-handoff span {
  position: absolute;
  left: 25%;
  top: 50%;
  width: 50%;
  height: 1px;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(23,105,170,.18),
      transparent
    );
}


.graph-handoff b {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 2px 7px;
  background: #fbfcfd;
  color: #92a0a8;
  font-size: 7px;
  font-weight: 850;
  letter-spacing: .08em;
  white-space: nowrap;
}


.graph-handoff i {
  position: absolute;
  left: 50%;
  top: calc(50% + 5px);
  width: 1px;
  height: 9px;
  background: #b9c8d0;
}


.graph-handoff i::after {
  content: "";
  position: absolute;
  left: -3px;
  bottom: -1px;
  border-top: 4px solid #9eafb8;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
}


/* node state icon */

.node-state {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 12px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}


.node-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1769aa;
  box-shadow:
    0 0 0 3px rgba(23,105,170,.10);
  animation: statusPulse 1.4s ease-in-out infinite;
}


.node-check {
  color: #16845b;
  font-size: 10px;
  font-weight: 900;
}


.node-warning {
  width: 13px;
  height: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff1c7;
  color: #b77908;
  font-size: 8px;
  font-weight: 900;
}


.node-blocked {
  color: #bd3f3f;
  font-size: 12px;
  font-weight: 900;
}


.node-wait {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #bac6cc;
}


/* stronger active focus */

.node.focus-agent {
  animation:
    nodeActive 1.7s ease-in-out infinite;
}


.node.running b {
  color: #0e4f82;
}


.node.warning b {
  color: #765507;
}


.node.blocked b {
  color: #8f3030;
}


/* moving packet */

.edge {
  overflow: visible;
}


.edge-packet {
  position: absolute;
  top: 50%;
  left: -5px;
  width: 6px;
  height: 6px;
  transform: translateY(-50%);
  border-radius: 50%;
  opacity: 0;
}


.edge.live .edge-packet {
  opacity: 1;
  background: #1769aa;
  box-shadow:
    0 0 0 3px rgba(23,105,170,.08),
    0 0 10px rgba(23,105,170,.30);
  animation:
    packetMove 1.25s linear infinite;
}


/* ============================================================
   SMALLER VIEWPORT
============================================================ */

@media (max-width: 1180px) {

  .graph-row {
    grid-template-columns:
      110px
      minmax(0, 1fr);
  }

  .graph-track {
    grid-template-columns:
      minmax(100px, 1fr)
      25px
      minmax(100px, 1fr)
      25px
      minmax(100px, 1fr)
      25px
      minmax(100px, 1fr);
  }

  .graph-row-3 .graph-track {
    grid-template-columns:
      minmax(110px, 1fr)
      28px
      minmax(110px, 1fr)
      28px
      minmax(110px, 1fr);
  }

  .graph-track .node {
    min-height: 82px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .graph-track .node b {
    font-size: 10px;
  }

  .graph-track .node small {
    font-size: 8px;
  }

  .graph-handoff {
    left: 120px;
  }

}


@media (max-width: 900px) {

  .graph {
    min-height: 560px;
  }

  .graph-workspace {
    min-height: 520px;
    gap: 16px;
  }

  .graph-row {
    grid-template-columns: 1fr;
  }

  .graph-phase {
    min-height: 20px;
    align-self: auto;
  }

  .graph-phase span {
    font-size: 8px;
  }

  .graph-track {
    min-height: 92px;
  }

  .graph-handoff {
    display: none;
  }

}


@media (max-width: 640px) {

  .graph-workspace {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .graph-row {
    display: block;
  }

  .graph-phase {
    margin-bottom: 6px;
  }

  .graph-track,
  .graph-row-3 .graph-track {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-height: auto;
  }

  .graph-track .node {
    min-height: 68px;
  }

  .graph-track .edge {
    width: 2px;
    min-width: 2px;
    height: 18px;
    margin: 0 auto;
  }

  .graph-track .edge::after {
    top: auto;
    right: auto;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    border-top: 5px solid #b6c4cb;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    border-bottom: 0;
  }

  .graph-track .edge.live::after {
    border-top-color: #1769aa;
  }

  .edge.live .edge-packet {
    animation:
      packetMoveVertical 1.1s linear infinite;
  }

}


@keyframes packetMoveVertical {

  0% {
    top: -4px;
    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  85% {
    opacity: 1;
  }

  100% {
    top: calc(100% - 2px);
    opacity: 0;
  }

}

/* ============================================================
   OPERATING MODE / MANUAL OPERATIONS
============================================================ */
.operating-mode-card {
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:18px 20px; margin-bottom:18px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
}
.mode-description { margin:5px 0 0; color:var(--text-muted); max-width:680px; }
.mode-switch { display:flex; gap:8px; flex-shrink:0; }
.mode-option { display:flex; align-items:center; gap:9px; min-width:230px; padding:11px 13px; text-align:left; background:var(--surface-soft); border:1px solid var(--border); border-radius:var(--radius); color:var(--text); }
.mode-option.active { border-color:var(--blue); background:var(--blue-soft); }
.mode-option b { display:block; font-size:11px; letter-spacing:.04em; }
.mode-option small { display:block; margin-top:2px; color:var(--text-muted); font-size:11px; }
.mode-dot { width:9px; height:9px; border:2px solid var(--border-strong); border-radius:50%; flex:none; }
.mode-option.active .mode-dot { border-color:var(--blue); box-shadow:inset 0 0 0 2px var(--surface), inset 0 0 0 5px var(--blue); }
.primary-button, .manual-action { border:1px solid var(--blue); background:var(--blue); color:#fff; border-radius:var(--radius-sm); padding:9px 13px; font-weight:600; }
.manual-workspace { display:flex; flex-direction:column; gap:16px; }
.manual-empty { padding:40px; text-align:center; color:var(--text-muted); border:1px dashed var(--border-strong); border-radius:var(--radius-lg); background:var(--surface-soft); }
.manual-case-summary { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.manual-case-summary > div { padding:14px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); }
.manual-case-summary span { display:block; font-size:10px; color:var(--text-light); letter-spacing:.08em; }
.manual-case-summary b { display:block; margin-top:4px; font-size:13px; }
.manual-grid { display:grid; grid-template-columns:1fr 1.5fr; gap:16px; }
.manual-card { padding:18px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); }
.manual-card h3 { margin:5px 0 7px; }
.manual-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.manual-action { background:var(--surface); color:var(--blue-dark); }
.manual-action:hover { background:var(--blue-soft); }
.manual-task-list { display:flex; flex-direction:column; }
.manual-task-row { display:grid; grid-template-columns:30px 1fr auto; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid var(--border); }
.manual-task-row:last-child { border-bottom:0; }
.manual-task-row > span { width:25px; height:25px; display:grid; place-items:center; border-radius:50%; background:var(--surface-blue); color:var(--blue); font-weight:700; }
.manual-task-row small { display:block; color:var(--text-muted); margin-top:2px; }
.task-completed { color:var(--green); }
.task-pending { color:var(--amber); }
@media (max-width: 900px) { .operating-mode-card,.mode-switch { flex-direction:column; align-items:stretch; } .mode-option { min-width:0; } .manual-case-summary { grid-template-columns:repeat(2,1fr); } .manual-grid { grid-template-columns:1fr; } }


/* ============================================================
   EXECUTION COMPARISON
============================================================ */
.comparison-head { align-items: flex-start; }
.secondary-button { border:1px solid var(--border-strong); background:var(--surface); color:var(--blue-dark); border-radius:var(--radius-sm); padding:9px 13px; font-weight:600; }
.secondary-button:hover { background:var(--surface-soft); border-color:var(--blue); }
.comparison-workspace { display:flex; flex-direction:column; gap:16px; }
.comparison-empty { padding:48px 24px; text-align:center; color:var(--text-muted); border:1px dashed var(--border-strong); border-radius:var(--radius-lg); background:var(--surface-soft); }
.comparison-case-bar { display:grid; grid-template-columns:1fr 1fr 1fr 1.2fr; gap:10px; }
.comparison-case-bar > div { padding:14px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); }
.comparison-case-bar span { display:block; font-size:10px; color:var(--text-light); letter-spacing:.08em; }
.comparison-case-bar b { display:block; margin-top:5px; font-size:12px; }
.comparison-case-bar b.match { color:var(--green); }
.comparison-case-bar b.warn { color:var(--amber); }
.comparison-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.comparison-card { padding:20px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); }
.comparison-card-primary { border-top:3px solid var(--blue); }
.comparison-card h3 { margin:5px 0 7px; font-size:20px; }
.comparison-card p { color:var(--text-muted); line-height:1.55; }
.comparison-highlight { display:inline-flex; flex-direction:column; min-width:145px; margin:14px 12px 0 0; padding:12px 14px; background:var(--surface-soft); border:1px solid var(--border); border-radius:var(--radius); }
.comparison-highlight strong { font-size:20px; }
.comparison-highlight span { margin-top:3px; color:var(--text-muted); font-size:11px; }
.comparison-table-wrap { overflow:auto; }
.comparison-table { width:100%; border-collapse:collapse; margin-top:12px; }
.comparison-table th, .comparison-table td { padding:12px 13px; text-align:left; border-bottom:1px solid var(--border); vertical-align:top; }
.comparison-table th { color:var(--text-muted); font-size:11px; letter-spacing:.04em; text-transform:uppercase; }
.comparison-table td { font-size:12px; }
.comparison-principle-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:12px; }
.comparison-principle-grid div { padding:14px; background:var(--surface-soft); border:1px solid var(--border); border-radius:var(--radius); }
.comparison-principle-grid b { display:block; margin-bottom:5px; }
.comparison-principle-grid span { color:var(--text-muted); font-size:12px; line-height:1.5; }
@media (max-width: 900px) { .comparison-case-bar,.comparison-grid,.comparison-principle-grid { grid-template-columns:1fr; } }


/* Execution comparison loading/error states */
.comparison-loading {
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #526475;
  font-weight: 700;
  letter-spacing: .01em;
}
.comparison-loading-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1f8f68;
  box-shadow: 0 0 0 5px rgba(31,143,104,.10);
  animation: comparisonPulse 1.1s ease-in-out infinite;
}
@keyframes comparisonPulse {
  0%, 100% { opacity: .35; transform: scale(.85); }
  50% { opacity: 1; transform: scale(1); }
}
.comparison-error {
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.comparison-retry {
  border: 1px solid #c7d2dc;
  background: #fff;
  border-radius: 6px;
  padding: 8px 12px;
  font-weight: 700;
  cursor: pointer;
}

/* ============================================================
   EXECUTION COMPARISON — EXECUTIVE PRESENTATION
============================================================ */
.comparison-executive-summary {
  display:grid;
  grid-template-columns:minmax(0,1fr) 230px;
  gap:20px;
  align-items:stretch;
  padding:20px 22px;
  background:var(--surface);
  border:1px solid var(--border);
  border-left:3px solid var(--blue);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
}
.comparison-executive-summary h3 { margin:4px 0 6px; font-size:20px; }
.comparison-executive-summary p { margin:0; max-width:820px; color:var(--text-muted); line-height:1.55; }
.comparison-summary-callout { display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:14px 16px; background:var(--surface-soft); border:1px solid var(--border); border-radius:var(--radius); }
.comparison-summary-callout span { color:var(--text-light); font-size:10px; font-weight:800; letter-spacing:.08em; }
.comparison-summary-callout strong { margin:2px 0; font-size:31px; line-height:1; color:var(--blue-dark); }
.comparison-summary-callout small { color:var(--text-muted); font-size:11px; }
.comparison-model-grid { align-items:stretch; }
.comparison-model-card { min-height:225px; }
.comparison-model-top { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; }
.comparison-model-top h3 { margin-top:4px; }
.comparison-status { display:inline-flex; padding:6px 9px; border-radius:999px; font-size:9px; font-weight:800; letter-spacing:.05em; white-space:nowrap; }
.comparison-status-auto { color:var(--green); background:var(--surface-green); border:1px solid rgba(31,143,104,.18); }
.comparison-status-manual { color:var(--blue-dark); background:var(--surface-blue); border:1px solid rgba(31,103,164,.16); }
.comparison-kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:16px; }
.comparison-kpi-grid > div { padding:11px 10px; background:var(--surface-soft); border:1px solid var(--border); border-radius:var(--radius); min-width:0; }
.comparison-kpi-grid strong { display:block; font-size:19px; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.comparison-kpi-grid span { display:block; margin-top:4px; color:var(--text-muted); font-size:10px; line-height:1.3; }
.comparison-contrast-card { padding-bottom:18px; }
.comparison-contrast-grid { display:grid; grid-template-columns:1.15fr 1fr 1fr; gap:0 10px; margin-top:8px; }
.comparison-contrast-grid > div { min-height:66px; padding:12px 10px; border-bottom:1px solid var(--border); }
.comparison-contrast-label { display:flex; flex-direction:column; justify-content:center; }
.comparison-contrast-label strong { font-size:12px; }
.comparison-contrast-label span { margin-top:3px; color:var(--text-muted); font-size:10px; }
.comparison-contrast-side { position:relative; overflow:hidden; }
.comparison-contrast-side strong { display:block; font-size:15px; }
.comparison-contrast-side span { color:var(--text-muted); font-size:10px; }
.comparison-contrast-side i { display:block; height:4px; margin-top:9px; border-radius:99px; background:var(--blue); opacity:.75; }
.comparison-contrast-auto i { background:var(--green); }
.comparison-contrast-manual i { background:var(--amber); }
@media (max-width: 1000px) {
  .comparison-executive-summary { grid-template-columns:1fr; }
  .comparison-summary-callout { min-height:100px; }
  .comparison-kpi-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 700px) {
  .comparison-contrast-grid { grid-template-columns:1fr; }
  .comparison-contrast-grid > div { min-height:auto; }
}