.flow-caderno-vivo__status,
.flow-caderno-vivo__notice {
  max-width: 920px;
  margin: 18px auto;
  padding: 12px 16px;
  border: 1px solid rgba(208, 162, 58, .35);
  border-radius: 12px;
  background: #42080d;
  color: #f8eee0;
  font: 600 13px/1.45 Avenir Next, Avenir, Helvetica Neue, Arial, sans-serif;
}

.flow-caderno-vivo__status--ready,
.flow-caderno-vivo__status--saved { border-color: rgba(208, 162, 58, .6); }
.flow-caderno-vivo__status--saving { color: #f0d58a; }
.flow-caderno-vivo__status--error,
.flow-caderno-vivo__notice--error { border-color: #d67a7a; color: #ffe8e8; }
.flow-caderno-vivo__notice--login { background: #591116; }

.flow-caderno-vivo__debug {
  box-sizing: border-box;
  max-width: 1180px;
  margin: 0 auto 18px;
  padding: 12px 14px;
  border: 1px dashed rgba(208, 162, 58, 0.75);
  border-radius: 10px;
  background: rgba(38, 5, 7, 0.94);
  color: #f8eee0;
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  white-space: pre-wrap;
}

.flow-caderno-vivo__loader {
  position: absolute;
  width: 0;
  height: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

/*
 * O tema do Hub aplica cores globais aos campos enquanto estão em foco.
 * Esta regra mantém o texto digitado legível em todos os cadernos vivos,
 * inclusive antes do primeiro salvamento automático.
 */
[data-flow-live-notebook] input:not([type="checkbox"]):not([type="radio"]),
[data-flow-live-notebook] textarea,
[data-flow-live-notebook] select {
  color: #f8eee0 !important;
  -webkit-text-fill-color: #f8eee0 !important;
  caret-color: #f0d58a !important;
  opacity: 1 !important;
}

[data-flow-live-notebook] input:not([type="checkbox"]):not([type="radio"]):focus,
[data-flow-live-notebook] textarea:focus,
[data-flow-live-notebook] select:focus {
  color: #f8eee0 !important;
  -webkit-text-fill-color: #f8eee0 !important;
  caret-color: #f0d58a !important;
}

[data-flow-live-notebook] select option {
  background: #260507;
  color: #f8eee0;
}