:root {
  --bg: #f7f9fd;
  --panel: #ffffff;
  --panel-2: #f3f8ff;
  --muted: #627fa5;
  --text: #2f4f79;
  --line: #c8d9ee;
  --green: #22b96f;
  --amber: #c79736;
  --red: #c96383;
  --blue: #3f6fbb;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Space Grotesk", system-ui, sans-serif;
  background:
    radial-gradient(1200px 800px at 80% -20%, rgba(124, 205, 234, 0.18), transparent 45%),
    radial-gradient(1000px 700px at 0% 120%, rgba(63, 111, 187, 0.14), transparent 55%),
    url("./background.png") center center / cover no-repeat fixed,
    var(--bg);
  color: var(--text);
}

.page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px;
  display: grid;
  gap: 14px;
}

.header,
.section,
.exec-view {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.9);
  border-radius: 16px;
}

.header {
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.header h1 {
  margin: 0;
  font-size: clamp(22px, 3vw, 30px);
}

.header p {
  margin: 4px 0 0;
  color: var(--muted);
}

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

.mode-btn {
  border: 1px solid #8fb7e2;
  border-radius: 999px;
  padding: 6px 12px;
  background: #edf5ff;
  color: var(--text);
  cursor: pointer;
}

.mode-btn.active { border-color: var(--blue); background: #dfeefe; }
.start-demo-btn { border-color: #53b388; }

.layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 14px;
}

.section {
  padding: 12px;
}

.section h2 {
  margin: 0 0 8px;
  font-size: 18px;
}

.host-group + .host-group { margin-top: 8px; }
.host-header {
  width: 100%;
  border: 1px solid #c8d9ee;
  border-radius: 12px;
  background: #f7fbff;
  color: var(--text);
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 10px;
  padding: 10px;
  align-items: center;
  text-align: left;
  cursor: pointer;
}
.host-status {
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 700;
}
.status-online { background: rgba(34, 185, 111, 0.12); color: #0f6d4d; border: 1px solid rgba(34, 185, 111, 0.45); }
.status-offline { background: rgba(201, 99, 131, 0.12); color: #7f2845; border: 1px solid rgba(201, 99, 131, 0.45); }
.host-count { color: var(--muted); font-size: 13px; }
.host-workers { margin-top: 8px; }

.worker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}

.worker-card {
  border: 1px solid #c8d9ee;
  border-radius: 12px;
  background: #f7fbff;
  color: var(--text);
  padding: 10px;
  text-align: left;
  cursor: pointer;
}
.worker-card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.worker-status-pill {
  border: 1px solid #8fb7e2;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 12px;
  text-transform: uppercase;
}
.worker-meta { color: var(--muted); font-size: 13px; margin-top: 4px; }
.worker-stats { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: #4f6f96; }
.worker-running { box-shadow: inset 2px 0 0 var(--green); }
.worker-warning { box-shadow: inset 2px 0 0 var(--amber); }
.worker-approval {
  box-shadow: inset 2px 0 0 #fbbf24;
  border-color: rgba(245, 158, 11, 0.8);
  animation: approvalPulse 1.2s ease-in-out infinite;
}
.worker-approval .worker-status-pill {
  border-color: rgba(245, 158, 11, 0.95);
  color: #ffd69f;
  animation: approvalPillBlink 1s steps(2, start) infinite;
}
.worker-violation { box-shadow: inset 2px 0 0 var(--red); }

.exec-view {
  padding: 12px;
  display: grid;
  gap: 10px;
}
.exec-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.exec-head h2 { margin: 0; font-size: 18px; }
.exec-sub { color: var(--muted); font-size: 13px; }
.governance-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.stage {
  border: 1px solid #c8d9ee;
  border-radius: 999px;
  padding: 6px 8px;
  text-align: center;
  font-size: 12px;
  color: #4f6f96;
  background: rgba(247, 251, 255, 0.96);
}
.stage.done { border-color: rgba(63, 111, 187, 0.5); color: #2f5e9b; }
.stage.active { border-color: rgba(63, 111, 187, 0.85); color: #1f4b84; }
.stage.commit-approved {
  border-color: rgba(34, 197, 94, 0.75);
  color: #8ef1b2;
}
.stage.commit-denied {
  border-color: rgba(239, 68, 68, 0.8);
  color: #ffb3b3;
}
.stage.commit-pending {
  border-color: rgba(245, 158, 11, 0.8);
  color: #ffd69f;
  animation: approvalPillBlink 1s steps(2, start) infinite;
}
.exec-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 10px;
}
.terminal {
  border: 1px solid #c8d9ee;
  border-radius: 12px;
  background: #ffffff;
  color: #24476f;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 13px;
  line-height: 1.4;
  padding: 10px;
  min-height: 220px;
  white-space: pre-wrap;
}
.panel {
  border: 1px solid #c8d9ee;
  border-radius: 12px;
  background: #f7fbff;
  padding: 10px;
  display: grid;
  gap: 8px;
}
.kv { display: flex; justify-content: space-between; gap: 8px; color: #35597f; font-size: 13px; }
.policy-list { display: grid; gap: 6px; }
.policy-item {
  border: 1px solid #c8d9ee;
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 12px;
  background: #ffffff;
}
.approval-box {
  border: 1px solid rgba(245, 158, 11, 0.55);
  border-radius: 8px;
  padding: 8px;
  background: rgba(245, 158, 11, 0.08);
  animation: approvalPulse 1.2s ease-in-out infinite;
}
.approval-title {
  font-size: 12px;
  color: #ffd28d;
  margin-bottom: 6px;
}
.approval-actions {
  display: flex;
  gap: 6px;
}
.approval-btn {
  border: 1px solid #c8d9ee;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  background: #ffffff;
  color: #2f4f79;
}
.approval-allow {
  border-color: rgba(34, 197, 94, 0.6);
  color: #8ef1b2;
}
.approval-deny {
  border-color: rgba(239, 68, 68, 0.6);
  color: #ffadad;
}

@keyframes approvalPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.0), inset 0 0 0 0 rgba(245, 158, 11, 0.0);
  }
  50% {
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25), inset 0 0 0 999px rgba(245, 158, 11, 0.03);
  }
}

@keyframes approvalPillBlink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.65; }
}

.events {
  border: 1px solid #2c4e77;
  border-radius: 12px;
  background: #0f213d;
  padding: 10px;
  max-height: 320px;
  overflow: auto;
}
.event-row + .event-row { margin-top: 8px; padding-top: 8px; border-top: 1px solid #274769; }
.event-head { display: flex; gap: 8px; align-items: center; }
.event-seq { color: #9fc0e6; font-size: 12px; }
.event-type { font-weight: 700; font-size: 13px; }
.event-result { border-radius: 999px; padding: 2px 8px; font-size: 11px; text-transform: uppercase; font-weight: 700; }
.event-result-pass { background: rgba(34, 197, 94, 0.18); color: #8ef1b2; border: 1px solid rgba(34, 197, 94, 0.5); }
.event-result-warn { background: rgba(245, 158, 11, 0.18); color: #ffd28d; border: 1px solid rgba(245, 158, 11, 0.5); }
.event-result-fail { background: rgba(239, 68, 68, 0.16); color: #ffadad; border: 1px solid rgba(239, 68, 68, 0.5); }
.event-meta { color: var(--muted); font-size: 12px; margin-top: 4px; }
.event-details { font-size: 12px; margin-top: 4px; color: #c3d9f8; word-break: break-word; }
.event-code { margin-top: 4px; font-size: 12px; color: #ffadad; }
.empty { color: var(--muted); font-size: 13px; }

.status-bar {
  border: 1px dashed #39608e;
  border-radius: 10px;
  padding: 8px 10px;
  color: #c6dbfb;
  font-size: 13px;
}

.intro-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(2, 8, 20, 0.68);
  display: grid;
  place-items: center;
  z-index: 30;
  padding: 16px;
}
.intro-backdrop.hidden { display: none; }
.intro-modal {
  max-width: 720px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #0d1f39;
  padding: 18px;
}
.intro-body {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 14px;
  align-items: center;
}
.intro-guide-avatar {
  width: min(180px, 100%);
  border: 1px solid #2c4e77;
  border-radius: 14px;
  background: rgba(14, 29, 53, 0.9);
  padding: 8px;
}
.intro-guide-avatar img {
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: 220px;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
}
.intro-copy {
  min-width: 0;
}
.intro-modal h2 {
  margin: 0 0 8px;
  font-size: 24px;
}
.intro-modal p {
  margin: 0;
  color: #c6dbfb;
  line-height: 1.45;
}
.intro-actions {
  margin-top: 14px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.toast-stack {
  position: fixed;
  right: 16px;
  bottom: 16px;
  display: grid;
  gap: 8px;
  z-index: 35;
  max-width: 360px;
}
.toast {
  border: 1px solid #2f5984;
  border-radius: 10px;
  background: rgba(8, 20, 38, 0.95);
  color: #d7e9ff;
  padding: 10px 12px;
  font-size: 13px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
}
.toast.warn {
  border-color: rgba(245, 158, 11, 0.75);
  color: #ffd69f;
}
.toast.fail {
  border-color: rgba(239, 68, 68, 0.75);
  color: #ffb3b3;
}

@media (max-width: 1080px) {
  .layout,
  .exec-grid { grid-template-columns: 1fr; }
  .governance-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .layout > .exec-view { order: 1; }
  .layout > .section { order: 2; }
  .intro-body { grid-template-columns: 1fr; }
  .intro-guide-avatar {
    max-width: 220px;
    margin: 0 auto;
  }
}

@media (max-width: 760px) {
  .page { padding: 12px; }
  .header { padding: 12px; }
  .mode-row { gap: 6px; }
  .mode-btn { padding: 7px 10px; font-size: 13px; }

  .host-header {
    grid-template-columns: auto 1fr;
    row-gap: 6px;
  }
  .host-status,
  .host-count {
    grid-column: 2 / span 1;
    justify-self: start;
  }

  .worker-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .worker-card {
    padding: 12px;
  }
  .worker-card-head strong {
    font-size: 15px;
  }
  .worker-status-pill {
    font-size: 11px;
    padding: 4px 9px;
  }
  .worker-meta,
  .worker-stats {
    font-size: 13px;
  }

  .terminal {
    min-height: 280px;
    font-size: 12px;
  }
  .events {
    max-height: 260px;
  }
}