:root {
  --sage: #92A595;       
  --sage-deep: #4C7B54;
  --blue: #98B4C3;       
  --blue-deep: #3F7794;
}

.service-card .icon, .srow .icon { background: linear-gradient(135deg, rgba(146, 165, 149, 0.26), rgba(152, 180, 195, 0.32)); }
.pipe-node.after { border-color: rgba(76, 123, 84, 0.35); }
.pipe-step { background: linear-gradient(135deg, rgba(146, 165, 149, 0.18), rgba(152, 180, 195, 0.26)); border-color: rgba(63, 119, 148, 0.22); }
.tieout .pay.scan, .tieout .batch.scan .bank { box-shadow: 0 0 0 0.22em rgba(152, 180, 195, 0.35); }
.tieout .pay.hit, .tieout .batch.ok .bank { background: rgba(146, 165, 149, 0.1); border-color: rgba(76, 123, 84, 0.3); }
.field input:focus, .field textarea:focus { box-shadow: 0 0 0 3px rgba(152, 180, 195, 0.4); }
.field select:focus { box-shadow: 0 0 0 3px rgba(146, 165, 149, 0.4); }
.srow .live { background: rgba(76, 123, 84, 0.12); }
.path .tag { background: rgba(146, 165, 149, 0.2); }
.fx-active { background: rgba(146, 165, 149, 0.18); }
.fx-elabel { border-color: rgba(76, 123, 84, 0.25); }
.is-running .fx-box { box-shadow: 0 0 0 4px rgba(152, 180, 195, 0.3); }
.is-running .fx-badge, .fx-state i { border-color: rgba(152, 180, 195, 0.4); border-top-color: var(--blue-deep); }
.fx-state.ok i { border: 0; }
@keyframes fx-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(63, 119, 148, 0.25); } 50% { box-shadow: 0 0 0 7px rgba(63, 119, 148, 0); } }