* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, sans-serif;
  background: #0f1115;
  color: #e6e8eb;
}
.demo-banner {
  background: #4a2a00;
  color: #ffc876;
  text-align: center;
  font-weight: 600;
  font-size: 13px;
  padding: 6px;
}
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: #171a21;
  border-bottom: 1px solid #262a33;
}
.brand { font-weight: 600; }
.topnav a {
  color: #e6e8eb;
  text-decoration: none;
  margin-left: 16px;
  font-size: 14px;
}
.topnav a:hover { color: #4a7dff; }
.canvas { padding: 20px; max-width: 1100px; margin: 0 auto; }
.lane { margin-bottom: 28px; }
.lane-title { font-size: 16px; margin: 0 0 10px; color: #a9afbb; }
.lane-cards { display: flex; flex-wrap: wrap; gap: 14px; }
.card {
  width: 300px;
  background: #1b1f27;
  border: 1px solid #2b303b;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.card.decision-detail { width: 100%; max-width: 640px; }
.card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  background: #20242e;
  border-bottom: 1px solid #2b303b;
  border-radius: 8px 8px 0 0;
}
.card-title { font-weight: 600; font-size: 14px; }
.card-body { padding: 10px; font-size: 13px; }
.card-stat { font-size: 15px; font-weight: 700; margin: 0 0 4px; }
.card-stat.green { color: #7bffb0; }
.card-substat { margin: 0 0 8px; color: #a9afbb; }
.card-empty { color: #a9afbb; font-style: italic; }
.card-footnote { color: #a9afbb; font-size: 12px; }
.card-list { margin: 0; padding-left: 18px; }
.subhead { color: #a9afbb; }
.pill {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  background: #2b303b;
  text-transform: uppercase;
}
.pill-running, .pill-decided { background: #163a24; color: #7bffb0; }
.pill-pending, .pill-open, .pill-queued, .pill-waiting { background: #3a3012; color: #ffd876; }
.pill-failed, .pill-blocked { background: #3a1616; color: #ff7b7b; }
.pill-done { background: #1a2c4a; color: #8fb8ff; }
.ask-form { display: flex; gap: 8px; margin-bottom: 20px; }
.ask-form input {
  flex: 1;
  padding: 8px 10px;
  font-size: 14px;
  background: #1b1f27;
  border: 1px solid #2b303b;
  color: #e6e8eb;
  border-radius: 6px;
}
.ask-form button {
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
  background: #4a7dff;
  color: #fff;
  border: none;
  border-radius: 6px;
}
a { color: #4a7dff; }