:root {
  --brand-dark: #002b49;
  --brand-primary: #00bf9a;
  --brand-light: #00b6d6;
  --surface-color: #ffffff;
  --text-primary: #1e293b;
  --text-secondary: #64748b;
  --success: #10b981;
  --warning: #f59e0b;
  --error: #ef4444;
  --neutral: #94a3b8;
  --canvas: #f6fafb;
  --line: #dbe5e8;
  --shadow: 0 10px 30px rgba(0, 43, 73, 0.09);
  --rail-fg: #dcecf2;
  --page-bg: #f8fafc;
  --success-bg: #e2f8f2;
  --success-fg: #087961;
  --warning-bg: #fff3d9;
  --warning-fg: #9a5700;
  --error-bg: #ffebeb;
  --error-fg: #b52525;
  --mint-bg: #f0fffb;
  --mint-fg: #075c51;
  --ds-space-1: 0.25rem;
  --ds-space-2: 0.5rem;
  --ds-space-3: 0.75rem;
  --ds-space-4: 1rem;
  --ds-space-5: 1.25rem;
  --ds-space-6: 1.5rem;
  --ds-space-7: 2rem;
  --ds-space-8: 2.5rem;
  --tint-brand-soft: #f0fffb;
  --tint-brand: #e8faf5;
  --tint-brand-strong: #d9f0ea;
  --tint-brand-border: #b9ebe0;
  --brand-deep: #087961;
  --brand-deep-alt: #057d67;
  --brand-deepest: #075c51;
  --surface-muted: #edf1f2;
  --surface-subtle: #f7fbfc;
  --surface-sunken: #eef4f6;
  --rail-text: #dcecf2;
  --line-strong: #bdcdd2;
  --line-strong-alt: #b9c9ce;
  --tint-warning: #fff3d9;
  --tint-warning-alt: #fff2df;
  --tint-error: #ffebeb;
}

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  min-width: 320px;
  color: var(--text-primary);
  background: var(--page-bg);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, 'system-ui', 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  /* No body-level font-size override - CoE leaves the 16px browser default
     and sizes every component explicitly (confirmed via computed styles
     against the real app); a smaller body base here made anything without
     its own explicit size render off relative to CoE throughout. */
}
button,
input,
textarea,
select {
  font: inherit;
}
button {
  cursor: pointer;
}
/* Nothing in this file ever sized a checkbox - every text-input rule
 * explicitly carves them out (`:not([type='checkbox'])`), so every
 * checkbox in the app rendered at the browser's bare native size, which
 * on some platforms/zoom levels is a large, unstyled square with none of
 * the app's brand on it. One box, everywhere, themed with `accent-color`
 * (keeps native keyboard/screen-reader behaviour - no custom
 * `appearance: none` box to reimplement). The hidden mobile-nav toggle
 * in components/AppChrome.tsx is the one checkbox that must stay
 * invisible, hence the exclusion. */
input[type='checkbox']:not(.visually-hidden) {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  padding: 0;
  margin: 0;
  flex: 0 0 auto;
  vertical-align: middle;
  accent-color: var(--brand-primary);
  cursor: pointer;
}
input[type='checkbox']:disabled {
  cursor: not-allowed;
}
.material-icons {
  font-family: 'Material Icons Round';
  font-weight: normal;
  font-style: normal;
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
  font-variant-ligatures: discretionary-ligatures;
  -webkit-font-smoothing: antialiased;
  vertical-align: middle;
}
/* ============================================================
   Chrome - igual ao AppChrome real do UniConecta CoE:
   header navy fixo (4rem) + sidebar branca de 14.5rem com seções
   recolhíveis, não uma rail de ícones. Valores tirados direto do
   styles.css da suíte (.app-top-header, .app-sidebar, .app-nav-*).
   ============================================================ */
:root {
  --app-header-bar: 4rem;
}
.app-shell {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---------- header ---------- */
.app-top-header {
  position: relative;
  z-index: 50;
  flex-shrink: 0;
  height: var(--app-header-bar);
  background: var(--brand-dark);
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.app-top-header-inner {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
  align-items: center;
  height: 100%;
  padding: 0 var(--ds-space-4);
  gap: var(--ds-space-3);
}
.app-top-header-left {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  min-width: 0;
}
.app-top-header-center {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.app-top-header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-shrink: 0;
}
.app-top-header-tools {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  flex-shrink: 0;
}

/* App-switcher: quadrado navy com uma letra ciano, igual ao apple-touch-icon
 * da suíte - é o mesmo sistema de ícone, só troca a letra por produto. */
.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: #012338;
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 0;
  flex-shrink: 0;
}
.brand-mark svg {
  width: 20px;
  height: 20px;
}
.app-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  font-family: Inter, sans-serif;
  font-weight: 300;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.app-wordmark b {
  font-weight: 300;
  color: var(--brand-light);
}
.app-wordmark span {
  color: #fff;
}
@media (max-width: 900px) {
  .app-wordmark {
    display: none;
  }
}

.app-header-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  background: transparent;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
.app-switcher {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: center;
}
.app-switcher-trigger {
  border-radius: 8px;
}
.app-switcher-trigger:hover {
  background: rgba(255, 255, 255, 0.06);
}
.app-switcher-chevron {
  display: none;
  font-size: 1.15rem !important;
  flex-shrink: 0;
  opacity: 0.75;
}
@media (min-width: 640px) {
  .app-switcher-chevron {
    display: block;
  }
}
.app-switcher-menu {
  position: absolute;
  z-index: 80;
  top: calc(100% + 0.4rem);
  left: 0;
  display: flex;
  flex-direction: column;
  min-width: min(18rem, 94vw);
  margin: 0;
  padding: 0.45rem;
  border-radius: 10px;
  background: var(--brand-dark);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}
.app-switcher-menu-label {
  margin: 0;
  padding: 0.25rem 0.5rem 0.4rem;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55);
}
.app-switcher-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.app-switcher-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  width: 100%;
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  font-size: 0.875rem;
  font-weight: 500;
}
.app-switcher-item:hover {
  background: rgba(255, 255, 255, 0.08);
}
.app-switcher-item--active {
  background: rgba(0, 182, 214, 0.16);
}
.app-switcher-item-name {
  min-width: 0;
}
.app-switcher-item-icon {
  font-size: 1rem !important;
  flex-shrink: 0;
  opacity: 0.7;
}

/* Seletor de organização. Mesmo componente do WorkspaceSwitcher real. */
.org-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  max-width: 20rem;
  min-width: 0;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.12);
  color: inherit;
  text-align: left;
}
.org-chip:hover,
.org-switcher[open] .org-chip {
  background: rgba(255, 255, 255, 0.08);
}
.org-switcher {
  position: relative;
  min-width: 0;
  max-width: 20rem;
  width: 100%;
}
.org-switcher > .org-chip {
  cursor: pointer;
  font: inherit;
  list-style: none;
  width: 100%;
}
.org-switcher > .org-chip::-webkit-details-marker {
  display: none;
}
.org-switcher-panel {
  position: absolute;
  left: 0;
  top: calc(100% + 0.35rem);
  min-width: 16.5rem;
  padding: 0.4rem;
  border-radius: 0.5rem;
  background: rgb(15 23 42);
  border: 1px solid rgb(51 65 85);
  box-shadow: 0 16px 40px rgb(0 0 0 / 0.45);
  z-index: 90;
}
.org-switcher-label {
  margin: 0 0 0.25rem;
  padding: 0.25rem 0.65rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgb(100 116 139);
}
.org-switcher-option {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.65rem;
  border: none;
  border-radius: 0.375rem;
  background: transparent;
  color: rgb(226 232 240);
  font: inherit;
  cursor: pointer;
  text-align: left;
  box-sizing: border-box;
}
.org-switcher-option span {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  gap: 0.1rem;
}
.org-switcher-option strong {
  font-size: 0.875rem;
  font-weight: 600;
}
.org-switcher-option small {
  font-size: 0.75rem;
  font-weight: 400;
  opacity: 0.7;
}
.org-switcher-option .material-icons:first-child,
.org-switcher-option .material-icons:last-child {
  font-size: 1.2rem !important;
  flex-shrink: 0;
}
.org-switcher-option:hover:not(:disabled) {
  background: rgb(255 255 255 / 0.07);
  color: #fff;
}
.org-switcher-option.is-current {
  background: rgb(255 255 255 / 0.08);
}
.org-switcher-option:disabled {
  cursor: default;
}
.org-switcher-error {
  margin: 0.35rem 0.65rem 0.2rem;
  color: rgb(252 165 165);
  font-size: 0.75rem;
}
.org-chip .material-icons:first-child {
  font-size: 18px;
  opacity: 0.9;
  flex-shrink: 0;
}
.org-chip-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
}
.org-chip .org-chip-kicker {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.75;
}
.org-chip .org-chip-label {
  font-size: 0.8125rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.org-chip .material-icons:last-child {
  font-size: 20px;
  opacity: 0.85;
  flex-shrink: 0;
}

@media (max-width: 720px) {
  .org-chip {
    width: 34px;
    max-width: 34px;
    height: 34px;
    padding: 0;
    justify-content: center;
  }
}

/* Botões redondos do header (busca, avisos, ajuda) - pill translúcido
 * sobre navy, igual ao .app-header-tool-btn real. */
.app-header-tool-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgb(241, 245, 249);
  cursor: pointer;
  font: inherit;
  line-height: 1;
}
.app-header-tool-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.2);
}
.app-header-search-kbd {
  font: 600 0.6875rem Inter, sans-serif;
  opacity: 0.8;
}
@media (max-width: 900px) {
  .app-header-search-kbd {
    display: none;
  }
}
.bell-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--error);
  color: white;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: rgb(226, 232, 240);
  font-size: 0.75rem;
  font-weight: 600;
}
.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
}
.count-pill,
.mini-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}

/* Conta - avatar com gradiente + nome, igual ao .user-account-trigger real. */
.avatar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 8px 3px 3px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  max-width: 12rem;
}
.avatar:hover {
  background: rgba(255, 255, 255, 0.12);
}
.avatar-badge {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #2563eb, #0ea5e9);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
}
.avatar-name {
  font-size: 0.75rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .avatar-name {
    display: none;
  }
  .avatar {
    padding: 3px;
  }
}

/* Conta e ajuda - mesmas classes da CoE (user-account / help-menu). */
.user-account {
  position: relative;
  min-width: 0;
}
.user-account--loading {
  min-height: 2.25rem;
  min-width: 8rem;
}
.user-account-skeleton {
  display: block;
  height: 2.25rem;
  width: 10rem;
  border-radius: 0.5rem;
  background: rgb(255 255 255 / 0.1);
}
.user-account-trigger {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: min(100%, 18rem);
  padding: 0.25rem 0.5rem 0.25rem 0.25rem;
  margin: 0;
  list-style: none;
  cursor: pointer;
  border-radius: 0.5rem;
  border: 1px solid transparent;
  color: inherit;
  background: transparent;
  font: inherit;
}
.user-account-trigger::-webkit-details-marker {
  display: none;
}
.user-account-trigger:hover,
.user-account[open] .user-account-trigger {
  background: rgb(255 255 255 / 0.08);
  border-color: rgb(255 255 255 / 0.12);
}
.user-account-avatar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  background: linear-gradient(135deg, rgb(37 99 235), rgb(14 165 233));
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
}
.user-account-text {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.user-account-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 12rem;
}
.user-account-role {
  font-size: 0.6875rem;
  font-weight: 500;
  color: rgb(186 230 253);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.user-account-chevron {
  flex-shrink: 0;
  font-size: 1.125rem !important;
  opacity: 0.85;
}
.user-account-panel,
.help-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.35rem);
  min-width: 15.5rem;
  padding: 0.35rem;
  border-radius: 0.5rem;
  background: rgb(15 23 42);
  border: 1px solid rgb(51 65 85);
  box-shadow: 0 16px 40px rgb(0 0 0 / 0.45);
  z-index: 90;
}
.user-account-panel-identity {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.55rem 0.65rem 0.65rem;
}
.user-account-panel-identity strong {
  color: #fff;
  font-size: 0.875rem;
}
.user-account-panel-identity span {
  color: rgb(148 163 184);
  font-size: 0.75rem;
}
.user-account-panel-divider,
.help-menu-divider {
  height: 1px;
  margin: 0.25rem 0.35rem;
  background: rgb(51 65 85);
}
.help-menu {
  position: relative;
}
.help-menu-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  background: rgb(255 255 255 / 0.08);
  color: rgb(226 232 240);
  cursor: pointer;
  list-style: none;
  border: 1px solid rgb(255 255 255 / 0.1);
  flex-shrink: 0;
}
.help-menu-trigger::-webkit-details-marker {
  display: none;
}
.help-menu-trigger:hover,
.help-menu[open] .help-menu-trigger {
  background: rgb(255 255 255 / 0.18);
  color: #fff;
}
.help-menu-icon {
  font-size: 1.2rem !important;
}
.help-menu-panel {
  width: 17rem;
  padding: 0.5rem;
}
.help-menu-section-label {
  margin: 0 0 0.25rem;
  padding: 0.25rem 0.65rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgb(100 116 139);
}
.help-menu-item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.65rem;
  border: none;
  border-radius: 0.375rem;
  background: transparent;
  color: rgb(226 232 240);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  box-sizing: border-box;
}
.help-menu-item:hover {
  background: rgb(255 255 255 / 0.07);
  color: #fff;
}
.help-menu-item .material-icons {
  font-size: 1.2rem !important;
  flex-shrink: 0;
}
.help-menu-item-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.help-menu-item-title {
  font-size: 0.875rem;
  font-weight: 600;
}
.help-menu-item-sub {
  font-size: 0.75rem;
  font-weight: 400;
  opacity: 0.7;
}
.help-menu-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.65rem;
}
.help-menu-status-icon {
  font-size: 0.9rem !important;
  color: rgb(110 231 183);
}
.help-menu-status-text {
  font-size: 0.75rem;
  color: rgb(100 116 139);
}
@media (max-width: 720px) {
  .user-account-text {
    display: none;
  }
}

/* ---------- corpo: sidebar + conteúdo ---------- */
.app-below-header {
  display: flex;
  flex: 1;
  min-height: 0;
}
.app-sidebar {
  flex-shrink: 0;
  width: 14.5rem;
  background: rgb(252, 252, 253);
  border-right: 1px solid rgb(228, 231, 236);
  overflow: hidden;
}
.app-sidebar-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0.75rem 0.85rem 1rem;
  overflow: hidden;
}
.app-sidebar-nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.app-nav-section {
  margin: 0;
  padding: 0;
}
.app-nav-section--spaced {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgb(237, 240, 244);
}
.app-nav-section-title {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 100%;
  margin: 0 0 0.4rem;
  padding: 0.2rem 0.3rem;
  font: inherit;
  font-weight: 600;
}
.app-nav-section-title-icon {
  font-size: 0.95rem !important;
  width: 0.95rem;
  height: 0.95rem;
  color: rgb(148, 163, 184);
  flex-shrink: 0;
  opacity: 0.9;
}
.app-nav-section-title-text {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgb(100, 116, 139);
  line-height: 1.2;
  white-space: nowrap;
}
/* Collapsible section header (rendered as a button; canCollapse groups only). */
.app-nav-section-toggle {
  width: auto;
  max-width: 100%;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  border-radius: 0.45rem;
  transition: background-color 0.15s ease;
}
.app-nav-section-toggle:hover {
  background: rgb(241, 245, 249);
}
.app-nav-section-chevron {
  margin-left: 0.1rem;
  font-size: 1rem !important;
  width: 1rem;
  height: 1rem;
  color: rgb(148, 163, 184);
  flex-shrink: 0;
  transition: transform 0.18s ease;
}
.app-nav-section--collapsed .app-nav-section-chevron {
  transform: rotate(-90deg);
}
.app-nav-section-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.app-nav-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: rgb(51, 65, 85);
  font-size: 0.8125rem;
  font-weight: 500;
  text-align: left;
  width: 100%;
}
.app-nav-link:hover {
  background: #fff;
  border-color: rgb(226, 232, 240);
  color: rgb(15, 23, 42);
}
.app-nav-link--active {
  /* Verified against the live CoE app's computed styles, not guessed:
     active state is a brand tint background with brand-primary (teal)
     text, not white-on-navy. */
  background: var(--tint-brand);
  border-color: rgba(0, 191, 154, 0.35);
  color: var(--brand-primary);
  font-weight: 600;
  box-shadow: 0 0 0 1px rgba(0, 191, 154, 0.12), 0 1px 3px rgba(0, 43, 73, 0.06);
}
.app-nav-link-icon {
  font-size: 1.125rem !important;
  flex-shrink: 0;
  color: rgb(148, 163, 184);
  transition: color 0.12s ease;
}
.app-nav-link:hover .app-nav-link-icon {
  color: rgb(100, 116, 139);
}
.app-nav-link-label {
  min-width: 0;
  flex: 1;
}
.app-nav-link--active .app-nav-link-icon {
  color: var(--brand-primary);
}
.app-sidebar-footer {
  flex-shrink: 0;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid rgb(228, 231, 236);
  font-size: 0.6875rem;
  color: var(--text-secondary);
}

.main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: rgb(249, 250, 251);
  overflow: hidden;
}
/* Mesma marcação e classes do components/Breadcrumbs.tsx real:
 * <ol> + separador "/" via ::before, sem ícone entre os itens. */
.app-breadcrumbs {
  padding: 0.65rem 1.5rem 0;
  flex-shrink: 0;
}
.app-breadcrumbs-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}
.app-breadcrumbs-list li {
  display: flex;
  align-items: center;
}
.app-breadcrumbs-list li + li::before {
  content: '/';
  margin: 0 0.4rem;
  opacity: 0.4;
}
.app-breadcrumbs-link {
  color: var(--text-secondary);
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
.app-breadcrumbs-link:hover {
  color: var(--brand-primary);
  text-decoration: underline;
}
.app-breadcrumbs-current {
  color: var(--brand-dark);
  font-weight: 600;
}
.app-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: 8px;
  min-height: 36px;
  padding: 0 14px;
  font-weight: 600;
  line-height: 1;
  transition: 0.18s ease;
  white-space: nowrap;
}
.app-btn .material-icons {
  display: block;
  font-size: 18px;
  width: 18px;
  height: 18px;
  line-height: 1;
}
.app-btn--primary {
  color: #fff;
  background: var(--brand-primary);
  border-color: var(--brand-primary);
}
.app-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.app-btn--primary:hover:not(:disabled) {
  background: #00a882;
  border-color: #00a882;
}
.app-btn--secondary {
  color: var(--brand-dark);
  background: white;
  border-color: var(--line-strong);
}
.app-btn--secondary:hover:not(:disabled) {
  border-color: var(--brand-primary);
  background: var(--tint-brand-soft);
}
.app-btn--ghost {
  background: transparent;
  color: var(--text-secondary);
}
.app-btn--ghost:hover:not(:disabled) {
  color: var(--brand-dark);
  background: #edf4f5;
}
.app-btn--ghost-danger {
  background: transparent;
  color: var(--error);
}
.app-btn--danger {
  color: white;
  background: var(--error);
}
.app-btn--sm {
  min-height: 32px;
  padding: 0 11px;
  font-size: 0.75rem;
  gap: 5px;
}
.app-btn--sm .material-icons {
  font-size: 16px;
  width: 16px;
  height: 16px;
}
.app-btn--icon {
  width: 34px;
  min-width: 34px;
  padding: 0;
}
.app-btn--sm.app-btn--icon {
  width: 32px;
  min-width: 32px;
}
.view {
  min-width: 0;
  flex: 1;
}
.builder {
  display: grid;
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
  overflow: hidden;
  position: relative;
}
.builder.has-details {
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr) minmax(280px, 440px);
}
/* The architecture review carries a meter, a ROI table and one card per
   step. minmax(0, …) lets the pane shrink instead of overflowing the
   canvas on a laptop with the sidebar open. Below 1100px it becomes a
   drawer (same idea as the 900px IDE). */
.builder.has-arch {
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
}
.builder.has-arch.has-details {
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr) minmax(0, 360px);
}
.assistant-pane,
.details-pane {
  overflow-y: auto;
  background: white;
  min-width: 0;
}
.assistant-pane {
  border-right: 1px solid var(--line);
  padding: var(--ds-space-5);
  display: flex;
  flex-direction: column;
}
.pane-heading {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
  margin-bottom: var(--ds-space-5);
}
.pane-heading__icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  color: white;
  background: var(--brand-dark);
  display: grid;
  place-items: center;
}
.pane-heading h1,
.pane-heading h2 {
  margin: 0;
  font-size: 1rem;
  color: var(--brand-dark);
}
.pane-heading p {
  margin: 3px 0 0;
  color: var(--text-secondary);
  font-size: 0.75rem;
}
.entry-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ds-space-2);
  margin-bottom: var(--ds-space-4);
}
.entry-tab {
  padding: var(--ds-space-2);
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  text-align: left;
  background: var(--surface-color);
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--text-secondary);
  font-size: 0.75rem;
  line-height: 1.2;
}
.entry-tab .material-icons {
  color: var(--brand-primary);
  font-size: 18px;
}
/* O hint só cabia com o card grande; a versão compacta some com ele -
 * continua no DOM para quem lê por leitor de tela. */
.entry-tab small {
  display: none;
}
.entry-tab.active {
  color: var(--brand-dark);
  border-color: var(--brand-primary);
  background: var(--tint-brand-soft);
  box-shadow: inset 0 0 0 1px var(--brand-primary);
}
.chat-stream {
  display: grid;
  gap: var(--ds-space-4);
  overflow-y: auto;
  padding-right: 2px;
  flex: 1;
  min-height: 0;
  align-content: start;
}
.chat-message {
  font-size: 0.8125rem;
  line-height: 1.5;
  padding: var(--ds-space-3);
  border-radius: 10px;
}
.chat-message.agent {
  background: #f2f7f8;
  color: #425568;
  border-top-left-radius: 2px;
}
.chat-message.user {
  background: #e0faf3;
  color: var(--brand-deepest);
  border-top-right-radius: 2px;
  margin-left: var(--ds-space-5);
}
.chat-message strong {
  color: var(--brand-dark);
}
.chat-input {
  margin-top: auto;
  padding-top: var(--ds-space-4);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3);
}
.chat-input textarea {
  resize: none;
  width: 100%;
  min-height: 78px;
  border: 1px solid #bccfd4;
  border-radius: 9px;
  padding: var(--ds-space-3);
  outline-color: var(--brand-primary);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.9375rem;
  line-height: 1.4;
}
.chat-input__spec {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2);
}
.chat-input__spec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--ds-space-2);
}
.chat-input__spec-head .field-label {
  margin-bottom: 0;
}
.chat-input .spec-box {
  min-height: 72px;
  max-height: 8rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  background: var(--surface-subtle);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.input-actions {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--ds-space-2);
  color: var(--text-secondary);
  font-size: 0.6875rem;
}
.chat-input__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.chat-input__spec-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  background: none;
  padding: 0;
  color: var(--brand-deep);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}
.chat-input__spec-toggle .material-icons {
  font-size: 16px;
  width: 16px;
  height: 16px;
}
.chat-input__spec-toggle:hover,
.chat-input__spec-toggle.is-open {
  color: var(--brand-deepest);
  text-decoration: underline;
}
.chat-input__spec-toggle:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  text-decoration: none;
}
.chat-input__spec-toggle.has-spec:not(.is-open) {
  color: var(--brand-deepest);
}

/* Etapas - a real toolbar: short, grouped, scannable, instead of one long
 * flat list of buttons stretched full-width (that read as a plain link
 * list, not a palette). Icon-first tiles in a 2-col grid, one small-caps
 * label per group. */
.step-palette-fold {
  border: 0;
  padding: 0;
}
.step-palette-fold > summary {
  cursor: pointer;
  list-style: none;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding: 4px 0;
}
.step-palette-fold > summary::-webkit-details-marker {
  display: none;
}
.step-palette {
  display: grid;
  gap: var(--ds-space-2);
}
.step-palette-group + .step-palette-group {
  margin-top: var(--ds-space-1);
}
.step-palette-group-label {
  display: block;
  margin: var(--ds-space-2) 0 6px;
  color: var(--text-secondary);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.step-tile-grid {
  /* The palette lives in the builder's fixed-width side column
   * (`.assistant-pane`, capped ~260px regardless of window width) - two
   * columns there always cramps labels like "Esperar resposta de...", so
   * this stays one column at every breakpoint. */
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
.step-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: white;
  padding: 8px 10px;
  text-align: left;
  color: var(--text-primary);
  transition: border-color 0.12s ease, background 0.12s ease;
}
.step-tile-icon {
  flex: none;
  font-size: 18px;
  color: var(--brand-primary);
}
.step-tile-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}
.step-tile-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
}
.step-tile-note {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-secondary);
  font-size: 0.6875rem;
  font-weight: 500;
}
.step-tile:hover:not(:disabled),
.step-tile:focus-visible:not(:disabled) {
  border-color: var(--brand-primary);
  background: var(--mint-bg);
  outline: none;
}
.step-tile:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
/* A link that carries its own icon (external-open, etc.) inline with text -
 * lighter weight than an .app-btn, meant for a table cell or a card body. */
/* Used on both <a> and <button> - the button case needs its own reset,
 * otherwise it keeps the browser's default button chrome (border,
 * background, padding) underneath these color/type rules and comes out
 * looking like a stray pill button instead of a plain text link. */
.link-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  border: 0;
  background: none;
  padding: 0;
  color: var(--brand-deep);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.link-with-icon .material-icons {
  font-size: 15px;
}
.link-with-icon:hover {
  text-decoration: underline;
}

/* Conectores → Braços: one panel, two equal-height columns. Fields stack
 * full-width (property-group). Actions sit on a shared footer so the
 * buttons line up even when Roberty has more fields. */
.arm-bindings {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  border-top: 1px solid var(--line);
}
.arm-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.25rem;
  background: var(--surface-color);
}
.arm-card + .arm-card {
  border-left: 1px solid var(--line);
}
.arm-card-head {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-space-3);
  margin-bottom: var(--ds-space-5);
}
.arm-card-head-copy {
  min-width: 0;
  flex: 1;
}
.arm-card-head h3 {
  margin: 0;
  color: var(--brand-dark);
  font-size: 1rem;
  line-height: 1.3;
}
.arm-card-head-copy > p {
  margin: 3px 0 0;
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.35;
}
.arm-card-head .mini-status {
  flex-shrink: 0;
  margin-top: 2px;
}
.arm-card-tested {
  margin: 6px 0 0;
  color: var(--text-secondary);
  font-size: 0.6875rem;
  line-height: 1.4;
}
.arm-card-form {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.arm-card-form .property-group {
  margin-bottom: var(--ds-space-4);
}
.arm-card-form .property-group:last-of-type {
  margin-bottom: 0;
}
.arm-card-hint {
  margin: 6px 0 0;
  color: var(--text-secondary);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.4;
}
.arm-card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-2);
  margin-top: auto;
  padding-top: var(--ds-space-4);
  border-top: 1px solid var(--line);
}
.arm-card-toast {
  flex: 1 1 100%;
  margin: 4px 0 0;
}
.arm-card-found {
  margin-top: var(--ds-space-4);
  padding-top: var(--ds-space-4);
  border-top: 1px solid var(--line);
}
.arm-card-found > summary {
  cursor: pointer;
  list-style: none;
  margin-bottom: 0;
}
.arm-card-found > summary::-webkit-details-marker {
  display: none;
}
.arm-card-found[open] > summary {
  margin-bottom: var(--ds-space-2);
}
.arm-card-found > summary::after {
  content: 'expand_more';
  font-family: 'Material Icons Round';
  font-size: 1.125rem;
  vertical-align: middle;
  margin-left: 4px;
  color: var(--text-secondary);
}
.arm-card-found[open] > summary::after {
  content: 'expand_less';
}
.attention-icon--mint {
  background: var(--tint-brand);
  color: var(--brand-deep);
}
.attention-icon--navy {
  background: var(--surface-sunken);
  color: var(--brand-dark);
}
.arm-discovery-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
  max-height: 11rem;
  overflow: auto;
}
.arm-discovery-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-2);
  padding: 8px 0;
  font-size: 0.8125rem;
  border-bottom: 1px solid var(--surface-muted);
}
.arm-discovery-list li:last-child {
  border-bottom: 0;
}
@media (max-width: 900px) {
  .arm-bindings {
    grid-template-columns: 1fr;
  }
  .arm-card + .arm-card {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

/* Canvas node inspector - n8n/Roberty arm state. Unlinked: one primary
 * action plus a dropdown of what's already provisioned, no raw slot typing.
 * Linked: a compact read-only summary, never an editable URI field. */
.arm-picker {
  display: grid;
  gap: var(--ds-space-2);
}
.arm-picker-existing {
  display: grid;
  gap: 4px;
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 600;
}
.arm-linked-card {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  border: 1px solid var(--tint-brand-border);
  background: var(--tint-brand-soft);
  border-radius: 9px;
  padding: 10px 12px;
}
.arm-linked-card .material-icons {
  color: var(--brand-deep);
}
.arm-linked-card-body {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 2px;
}
.arm-linked-card-body strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--brand-dark);
  font-size: 0.8125rem;
}
.arm-linked-card-body span {
  color: var(--text-secondary);
  font-size: 0.6875rem;
}
.arm-linked-card .header-actions {
  margin-left: 0;
}
.canvas-column {
  min-width: 0;
  display: grid;
  /* Without an explicit column the implicit one sizes to MAX-CONTENT, so
   * the toolbar's row of buttons (≈850px) set the width of the titlebar,
   * the canvas, the dock and the footer alike - they all shot past a
   * phone's viewport by ~480px. The canvas has its own pan/zoom and the
   * bars scroll on their own; none of them may widen the column. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto 1fr auto;
  background: var(--canvas);
}
.canvas-titlebar {
  grid-row: 1;
}
.toolbar {
  grid-row: 2;
}
.edit-bar {
  grid-row: 3;
}
.canvas-wrap {
  grid-row: 4;
  position: relative;
  overflow: hidden;
  min-height: 0;
  background-image: radial-gradient(#cfdbdf 1px, transparent 1px);
  background-size: 18px 18px;
}
.canvas-footer {
  grid-row: 5;
}
.canvas-titlebar {
  padding: var(--ds-space-4) var(--ds-space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-4);
  background: white;
  border-bottom: 1px solid var(--line);
}
.canvas-titlebar > div:first-child {
  min-width: 0;
}
.canvas-titlebar h2 {
  font-size: 1rem;
  color: var(--brand-dark);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draft-state {
  color: var(--text-secondary);
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  gap: 5px;
}
.draft-state .material-icons {
  font-size: 1rem;
  color: var(--success);
}
.toolbar {
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: var(--ds-space-1);
  padding: var(--ds-space-2) var(--ds-space-4);
  background: var(--surface-color);
  border-bottom: 1px solid var(--line);
}
.toolbar-divider {
  height: 24px;
  width: 1px;
  background: var(--line);
  margin: 0 var(--ds-space-2);
}
.toolbar-spacer {
  flex: 1;
}
.canvas-wrap.is-loading .canvas {
  visibility: hidden;
}
.canvas-loading {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--ds-space-4);
  background: rgba(246, 250, 251, 0.94);
}
.canvas-loading p {
  margin: 0;
  color: var(--brand-dark);
  font-weight: 600;
  font-size: 0.875rem;
}
.canvas-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--tint-brand-strong);
  border-top-color: var(--brand-primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .canvas-spinner {
    animation: none;
  }
}
.canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 1200px;
  height: 720px;
  transform-origin: 0 0;
  touch-action: none;
}
/* Raia - faixa horizontal atrás dos nós, mostrando de quem é a etapa
 * (departamento ou sistema). Zebra sutil só para separar uma raia da
 * seguinte sem disputar atenção com os nós, que continuam o protagonista. */
.lane-band {
  position: absolute;
  left: 0;
  border-top: 1px dashed var(--line-strong-alt);
  border-bottom: 1px dashed var(--line-strong-alt);
  pointer-events: none;
}
.lane-band--a {
  background: rgba(0, 191, 154, 0.04);
}
.lane-band--b {
  background: rgba(0, 43, 73, 0.03);
}
.lane-band-label {
  position: sticky;
  left: 12px;
  top: 8px;
  display: inline-block;
  margin: 8px 0 0 12px;
  padding: 3px 9px;
  border-radius: 999px;
  background: white;
  border: 1px solid var(--line-strong-alt);
  color: var(--text-secondary);
  font-size: 0.6875rem;
  font-weight: 600;
  white-space: nowrap;
}
.node-help--rule {
  color: var(--brand-primary);
  box-shadow: 0 0 0 2px var(--tint-brand-soft);
  border-radius: 999px;
}
.canvas svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.canvas svg .edge-hit {
  pointer-events: stroke;
}
.edge {
  stroke: #9aabb0;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
}
.edge.active {
  stroke: var(--brand-primary);
  stroke-width: 3;
  stroke-dasharray: 8 6;
  animation: dash 1s linear infinite;
}
.edge-build {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: draw 0.5s ease forwards;
}
.node {
  position: absolute;
  width: 168px;
  min-height: 93px;
  padding: var(--ds-space-3);
  border: 1px solid var(--line-strong-alt);
  border-radius: 11px;
  background: white;
  box-shadow: 0 3px 10px rgba(0, 43, 73, 0.07);
  user-select: none;
  cursor: grab;
  touch-action: none;
}
.node:focus-visible {
  outline: 3px solid var(--brand-light);
  outline-offset: 3px;
}
.node:active {
  cursor: grabbing;
}
.node.selected {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 1px var(--brand-primary), 0 0 0 4px rgba(0, 191, 154, 0.15), var(--shadow);
}
.node.added {
  border-color: var(--success);
  background: #f2fffb;
}
.node.running {
  border-color: var(--brand-primary);
  background: #ecfffa;
  box-shadow: 0 0 0 1px var(--brand-primary), 0 0 0 5px rgba(0, 191, 154, 0.18);
}
.node.building {
  animation: nodeIn 0.4s both;
}
.node-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--ds-space-1);
}
.node-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: #e8f9f5;
  color: #008d75;
}
.node h3 {
  margin: var(--ds-space-2) 0 3px;
  font-size: 0.8125rem;
  color: var(--brand-dark);
  overflow-wrap: anywhere;
}
.node p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.6875rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.node-help {
  border: 0;
  padding: 0;
  color: var(--text-secondary);
  background: transparent;
}
.node-help:hover {
  color: var(--brand-primary);
}
.node-handle {
  position: absolute;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  padding: 0;
  border: 2px solid var(--brand-dark);
  border-radius: 50%;
  background: white;
}
.node-handle:hover,
.node-handle:focus-visible {
  border-color: var(--brand-primary);
  background: var(--brand-primary);
  outline: none;
}
.node-handle--in {
  left: -9px;
  pointer-events: none;
}
.node-handle--out {
  right: -9px;
}
.canvas-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-4);
  padding: var(--ds-space-3) var(--ds-space-5);
  background: var(--surface-color);
  border-top: 1px solid var(--line);
}
.edit-bar {
  margin: var(--ds-space-3) var(--ds-space-5);
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
  padding: 9px var(--ds-space-3);
  border: 1px solid var(--tint-brand-border);
  border-radius: 9px;
  background: var(--tint-brand-soft);
  color: var(--brand-deepest);
  font-size: 0.8125rem;
}
.edit-bar.hidden {
  display: none;
}
.edit-bar .toolbar-spacer {
  min-width: 4px;
}
.details-pane {
  border-left: 1px solid var(--line);
}
.details-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--line);
}
.details-head > div:first-child {
  min-width: 0;
}
.details-head-actions {
  display: flex;
  flex-shrink: 0;
}
.details-head h2 {
  margin: 0;
  font-size: 1rem;
  color: var(--brand-dark);
}
.details-head p {
  margin: var(--ds-space-2) 0 0;
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
.details-body {
  padding: 1rem 1.1rem 1.15rem;
}

/* Propriedades vs. Execução, no mesmo painel direito. */
.details-tabs {
  display: flex;
  gap: 2px;
  padding: 8px 1.1rem 0;
  border-bottom: 1px solid var(--line);
}
.details-tab {
  padding: 7px 11px;
  border: 0;
  border-radius: 8px 8px 0 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.details-tab:hover {
  color: var(--brand-dark);
  background: var(--surface-subtle);
}
.details-tab.is-active {
  color: var(--brand-deep);
  background: var(--tint-brand);
  box-shadow: inset 0 -2px 0 var(--brand-primary);
}
.details-tab-badge {
  min-width: 16px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--brand-primary);
  color: #04231d;
  font-size: 0.625rem;
  line-height: 16px;
  text-align: center;
}
.details-tab:not(.is-active) .details-tab-badge {
  background: var(--surface-muted);
  color: var(--text-secondary);
}

/* ── inspetor de execução de uma etapa ────────────────────────────── */
.node-run {
  padding: 0.9rem 1.1rem 1.15rem;
}
.node-run__summary {
  display: flex;
  gap: var(--ds-space-4);
  margin-bottom: var(--ds-space-3);
  color: var(--text-secondary);
  font-size: 0.75rem;
}
.node-run__summary strong {
  color: var(--brand-dark);
}
.node-run__io {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin-bottom: var(--ds-space-3);
  padding: 7px 9px;
  border-radius: 8px;
  background: var(--surface-sunken);
}
.node-run__io-label {
  flex: 0 0 auto;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--tint-brand);
  color: var(--brand-deep);
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.node-run__io code {
  color: var(--brand-deepest);
  font-size: 0.6875rem;
  word-break: break-word;
}
.node-run__preview {
  margin-bottom: var(--ds-space-3);
  padding: 9px 10px;
  border-radius: 9px;
  border: 1px dashed var(--warning);
  background: var(--tint-warning);
}
.node-run__preview-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  color: var(--warning-fg);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.node-run__preview-head .material-icons {
  font-size: 0.9375rem;
}
.node-run__preview-summary {
  margin: 0;
  color: var(--text-primary);
  font-size: 0.8125rem;
  font-weight: 600;
}
.node-run__preview .node-run__detail {
  margin-left: 0;
}
.node-run__preview .ask-card__call {
  display: block;
  margin-top: 6px;
}
.node-run__list {
  list-style: none;
  margin: 0 0 var(--ds-space-3);
  padding: 0;
  border-left: 2px solid var(--line);
}
.node-run__row {
  position: relative;
  padding: 7px 0 7px 14px;
  margin-left: -1px;
  border-left: 2px solid var(--line-strong-alt);
}
.node-run__row--ok {
  border-left-color: var(--success);
}
.node-run__row--warn {
  border-left-color: var(--warning);
}
.node-run__row--error {
  border-left-color: var(--error);
}
.node-run__row-head {
  display: flex;
  align-items: baseline;
  gap: 7px;
}
.node-run__row .trace-time {
  color: var(--text-secondary);
}
.node-run__row .trace-icon {
  font-size: 1rem !important;
  align-self: center;
}
.node-run__row--ok .trace-icon {
  color: var(--success-fg);
}
.node-run__row--warn .trace-icon {
  color: var(--warning-fg);
}
.node-run__row--error .trace-icon {
  color: var(--error-fg);
}
.node-run__msg {
  flex: 1;
  color: var(--text-primary);
  font-size: 0.8125rem;
}
.node-run__row .trace-token {
  color: var(--text-secondary);
  font-size: 0.625rem;
}
.node-run__detail {
  margin: 3px 0 0 24px;
  color: var(--text-secondary);
  font-size: 0.75rem;
  line-height: 1.4;
}
.node-run__resp {
  margin: 6px 0 0 0;
}
.node-run .http-ex {
  margin-bottom: var(--ds-space-3);
}

/* ── HTTP exchange inspector (pedido / resposta / JSON) ────────────── */
.http-ex {
  margin-top: 6px;
  border-radius: 10px;
  border: 1px solid var(--line-strong-alt);
  background: var(--brand-dark);
  color: #d7f5ec;
  overflow: hidden;
}
/* The global `code` chip is a light box: inside this dark panel it reads
   as a hole punched in the surface. Colour alone carries the meaning. */
.http-ex code {
  padding: 0;
  border-radius: 0;
  background: transparent;
}
.http-ex__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  text-align: left;
  cursor: default;
}
.http-ex--compact .http-ex__bar:not(:disabled) {
  cursor: pointer;
}
.http-ex__bar:disabled {
  cursor: default;
  opacity: 1;
}
.http-ex__verb {
  flex: 0 0 auto;
  padding: 1px 7px;
  border-radius: 4px;
  background: rgba(0, 191, 154, 0.22);
  color: #7dffe0;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}
.http-ex__verb--post,
.http-ex__verb--put,
.http-ex__verb--patch {
  background: rgba(47, 155, 255, 0.22);
  color: #9fd0ff;
}
.http-ex__verb--delete {
  background: rgba(239, 68, 68, 0.22);
  color: #ffb3b3;
}
.http-ex__status {
  flex: 0 0 auto;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.http-ex__status--ok {
  background: rgba(16, 185, 129, 0.22);
  color: #7dffe0;
}
.http-ex__status--error {
  background: rgba(239, 68, 68, 0.22);
  color: #ffb3b3;
}
.http-ex__status--warn {
  background: rgba(245, 158, 11, 0.22);
  color: #ffd79a;
}
.http-ex__status--info {
  background: rgba(255, 255, 255, 0.08);
  color: #9ec5d8;
}
.http-ex__ms {
  flex: 0 0 auto;
  color: #7d98a5;
  font-size: 0.625rem;
  font-variant-numeric: tabular-nums;
}
.http-ex__req {
  flex: 1 1 auto;
  min-width: 0;
  color: #cfe3ea;
  font-size: 0.6875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}
.http-ex__chev {
  margin-left: auto;
  font-size: 1.125rem !important;
  color: #7d98a5;
}
.http-ex__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 10px 8px;
}
.http-ex__chip {
  display: inline-flex;
  gap: 5px;
  max-width: 100%;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #d7f5ec;
  font-size: 0.625rem;
  overflow: hidden;
}
.http-ex__chip em {
  color: #7d98a5;
  font-style: normal;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}
.http-ex__tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.18);
  /* Four tabs plus "Copiar JSON" do not fit the wait card at its
     narrowest, and a wrapped tab row beats a clipped one. */
  flex-wrap: wrap;
}
.http-ex__tab {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #7d98a5;
  font-size: 0.6875rem;
  font-weight: 600;
}
.http-ex__tab em {
  margin-left: 5px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  font-style: normal;
  font-size: 0.5625rem;
}
.http-ex__tab:hover {
  color: #d7f5ec;
}
.http-ex__tab.is-on {
  color: #7dffe0;
  border-bottom-color: var(--brand-primary);
}
.http-ex__copy {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  margin-left: auto;
  padding: 4px 8px;
  white-space: nowrap;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #9ec5d8;
  font-size: 0.625rem;
  font-weight: 600;
}
.http-ex__copy:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #d7f5ec;
}
.http-ex__copy .material-icons {
  font-size: 0.875rem;
}
.http-ex__empty {
  margin: 0;
  padding: 12px 12px 14px;
  color: #7d98a5;
  font-size: 0.75rem;
}
.http-ex__mapped,
.http-ex__headers {
  list-style: none;
  margin: 0;
  padding: 8px 10px 12px;
  display: grid;
  gap: 6px;
}
.http-ex__mapped li,
.http-ex__headers li {
  display: grid;
  grid-template-columns: minmax(72px, 0.9fr) minmax(64px, 0.8fr) 1.3fr;
  gap: 8px;
  align-items: baseline;
  font-size: 0.75rem;
}
.http-ex__mapped code,
.http-ex__headers code,
.http-ex__mapped strong,
.http-ex__headers span {
  min-width: 0;
}
.http-ex__headers li {
  grid-template-columns: minmax(90px, 0.8fr) 1.4fr;
}
.http-ex__mapped code,
.http-ex__headers code {
  color: #9fd0ff;
  font-size: 0.6875rem;
}
.http-ex__from {
  min-width: 0;
  color: #7d98a5;
  font-size: 0.625rem;
  /* `location.coordinates.0` is longer than its column: without this it
     prints straight over the value next to it. */
  overflow-wrap: anywhere;
}
.http-ex__mapped strong {
  color: #7dffe0;
  font-weight: 600;
  word-break: break-word;
}
.http-ex__headers span {
  color: #d7f5ec;
  word-break: break-all;
}
.http-ex__note {
  margin: 0;
  padding: 0 12px 12px;
  color: #7d98a5;
  font-size: 0.6875rem;
  line-height: 1.5;
}

/* ── the outbound half (o que vai na chamada) ─────────────────────── */
.http-req {
  padding: 8px 0 4px;
}
.http-req__line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 0 10px 8px;
}
.http-req__line code {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: #cfe3ea;
  font-size: 0.6875rem;
  line-height: 1.5;
  word-break: break-all;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}
.http-req__line .http-ex__copy {
  flex: 0 0 auto;
  margin-left: 0;
}
.http-req__missing {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0 10px 8px;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(245, 158, 11, 0.14);
  color: #ffd79a;
  font-size: 0.6875rem;
  line-height: 1.45;
}
.http-req__missing .material-icons {
  font-size: 0.9375rem;
}
.http-req__group {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.http-req__label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px 0;
  color: #7d98a5;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.http-req__label em {
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  font-style: normal;
  letter-spacing: 0;
}
.http-req__group .http-ex__empty {
  padding: 4px 10px 10px;
}
.http-req__group .http-ex__headers {
  padding: 6px 10px 10px;
}
.http-req__group .json-tree {
  max-height: 200px;
}
.http-req__secret {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #9ec5d8;
}
.http-req__secret em {
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #7d98a5;
  font-style: normal;
  font-size: 0.5625rem;
  font-weight: 700;
  text-transform: uppercase;
}

.json-tree {
  padding: 8px 10px 12px;
  max-height: 280px;
  overflow: auto;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.75rem;
  line-height: 1.55;
}
.http-ex--compact .json-tree {
  max-height: 200px;
}
.json-node {
  min-width: 0;
}
.json-node--string .json-val,
.json-val--string {
  color: #7dffe0;
}
.json-val--number {
  color: #ffd79a;
}
.json-val--boolean {
  color: #9fd0ff;
}
.json-val--null {
  color: #7d98a5;
  font-style: italic;
}
.json-key {
  margin-right: 8px;
  color: #9ec5d8;
}
.json-key::after {
  content: ':';
  color: #4f6b78;
}
.json-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}
.json-toggle .material-icons {
  font-size: 1rem;
  color: #7d98a5;
}
.json-meta {
  color: #7d98a5;
  font-size: 0.6875rem;
}
.json-meta em {
  margin-left: 6px;
  font-style: normal;
  color: #9ec5d8;
}
.json-kids {
  margin-left: 14px;
  padding-left: 10px;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}
.json-more {
  margin: 4px 0 0;
  color: #7d98a5;
  font-size: 0.6875rem;
}
.vars-json {
  display: block;
  max-height: 180px;
  overflow: auto;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.25);
}
.vars-json .json-tree {
  padding: 0;
  max-height: none;
}

.property-group {
  margin-bottom: 0.875rem;
}
.assignee-sub {
  margin-top: 8px;
  width: 100%;
}
.property-group:last-child {
  margin-bottom: 0;
}
.property-group label,
.field-label {
  display: block;
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 4px;
}
.property-group input,
.property-group select,
.property-group textarea {
  width: 100%;
  border: 1px solid var(--line-strong-alt);
  border-radius: 7px;
  min-height: 35px;
  padding: 0 9px;
  color: var(--text-primary);
  background: white;
}
.property-group textarea {
  padding: 9px;
  resize: vertical;
  font: inherit;
}
.hint-card {
  padding: var(--ds-space-4);
  border-radius: 9px;
  background: #eff8fb;
  color: #335a6f;
  font-size: 0.8125rem;
  line-height: 1.5;
}
.hint-card .material-icons {
  color: var(--brand-light);
  margin-right: 5px;
}
.info-line {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: var(--ds-space-3) 0;
  border-bottom: 1px solid var(--surface-muted);
  font-size: 0.8125rem;
}
.info-line .material-icons {
  color: var(--brand-primary);
  flex: none;
  width: 20px;
  height: 20px;
  font-size: 20px;
}
.sim-card {
  margin-top: var(--ds-space-5);
  padding: var(--ds-space-4);
  border: 1px solid var(--tint-brand-border);
  border-radius: 10px;
  background: var(--tint-brand-soft);
}
.sim-card h3 {
  margin: 0 0 var(--ds-space-2);
  font-size: 0.875rem;
  color: var(--brand-dark);
}
.sim-card p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.75rem;
  line-height: 1.45;
}
.sim-progress {
  height: 5px;
  margin: var(--ds-space-3) 0;
  border-radius: 999px;
  overflow: hidden;
  background: var(--tint-brand-strong);
}
.sim-progress > span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--brand-primary);
  transition: width 0.35s ease;
}
.sim-progress.p1 > span {
  width: 24%;
}
.sim-progress.p2 > span {
  width: 48%;
}
.sim-progress.p3 > span {
  width: 72%;
}
.sim-progress.p4 > span {
  width: 100%;
}
.page {
  width: 100%;
  max-width: none;
  padding: 1.25rem 1.5rem 5.5rem;
  margin: 0;
}
/* Antes disto o "narrow" não fazia nada - repetia o `max-width: none` do
 * `.page` base, então uma tela com um painel curto (Cofre, Permissões,
 * Regras…) esticava até a largura toda do conteúdo principal e sobrava uma
 * folha de página em branco embaixo. Largura real aqui: o painel some do
 * jeito que devia - do tamanho do que tem dentro, não do tamanho da tela. */
.page.narrow {
  max-width: 720px;
}
.page--inbox {
  max-width: 68rem;
}
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ds-space-4);
  margin: 0 0 1.125rem;
  padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--line);
}
.page-header h1 {
  margin: 0;
  color: var(--brand-dark);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
}
.page-header p {
  margin: 4px 0 0;
  max-width: 62ch;
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.45;
}
/* Título + status à esquerda; botões sempre em `.header-actions` à direita.
 * Chip nunca entra no mesmo grupo que Devolver/Aprovar. */
.page-header-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ds-space-2);
}
.page-header-copy p {
  margin: 0;
}
.page-header > .header-actions {
  flex-shrink: 0;
}
.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--ds-space-3);
  margin-bottom: var(--ds-space-5);
}
.summary-card {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 0.75rem;
  row-gap: 2px;
  align-items: center;
  min-height: 4.75rem;
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.9rem 1.1rem;
  box-shadow: 0 3px 10px rgba(0, 43, 73, 0.03);
}
.summary-card--action {
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.summary-card--action:hover,
.summary-card--action.is-active {
  border-color: color-mix(in srgb, var(--brand) 45%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 12%, transparent);
}
.summary-card--action.is-active {
  background: color-mix(in srgb, var(--brand) 6%, white);
}
.templates-toggle {
  gap: 0.4rem;
}
.templates-toggle__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 14%, white);
  color: var(--brand-dark);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
}
.panel--templates {
  border-color: color-mix(in srgb, var(--brand) 28%, var(--line));
  box-shadow: 0 10px 28px color-mix(in srgb, var(--brand) 8%, transparent);
}
.flow-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 0.45rem;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  vertical-align: middle;
  text-transform: lowercase;
}
.flow-badge--template {
  background: color-mix(in srgb, var(--brand) 12%, white);
  color: var(--brand-dark);
  border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--line));
}
.task-row.is-muted {
  opacity: 0.62;
}
.task-row h3 .flow-badge {
  position: relative;
  top: -1px;
}
.summary-card .material-icons {
  grid-row: 1 / span 2;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--brand-deep);
  background: var(--tint-brand);
  font-size: 1.125rem;
}
.summary-card strong {
  display: block;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--brand-dark);
  font-size: 1.25rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.summary-card span {
  color: var(--text-secondary);
  font-size: 0.75rem;
  line-height: 1.3;
}
.summary-grid--compact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.summary-grid--compact .summary-card {
  flex: 0 0 auto;
  width: max-content;
  max-width: 100%;
  min-height: 0;
  min-width: 11.5rem;
  padding: 0.55rem 0.8rem;
  column-gap: 0.6rem;
}
.summary-grid--compact .summary-card .material-icons {
  width: 1.85rem;
  height: 1.85rem;
  font-size: 1rem;
}
.summary-grid--compact .summary-card strong {
  font-size: 1.05rem;
}
.panel {
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-3);
  flex-wrap: wrap;
  padding: 0.8rem 1.25rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface-subtle);
}
.panel-head:not(:has(+ *)) {
  border-bottom: 0;
}
.panel-head .header-actions {
  margin-left: auto;
}
.panel-head-copy {
  min-width: 0;
}
.panel-head h2 {
  margin: 0;
  color: var(--brand-dark);
  font-size: 1rem;
}
.panel-kicker {
  margin: 3px 0 0;
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
}
.panel-head--tools {
  align-items: flex-start;
  row-gap: 0.65rem;
}
.panel-head--tools .inbox-toolbar {
  flex: 1 1 16rem;
  justify-content: flex-end;
}
.filter-row {
  padding: var(--ds-space-3) var(--ds-space-5);
  border-bottom: 1px solid var(--line);
  color: var(--text-secondary);
  font-size: 0.8125rem;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2);
  align-items: center;
}
.page > .filter-row {
  padding-left: 0;
  padding-right: 0;
  border-bottom: 0;
  margin-bottom: var(--ds-space-5);
}
.filter-chip {
  color: var(--brand-deep-alt);
  padding: 5px 9px;
  background: var(--tint-brand);
  border: 0;
  border-radius: 999px;
  font-weight: 600;
  font: inherit;
  cursor: pointer;
}
button.filter-chip {
  color: var(--text-secondary);
  background: var(--surface-color);
  border: 1px solid var(--line);
}
button.filter-chip.is-on {
  color: var(--brand-deep-alt);
  background: var(--tint-brand);
  border-color: transparent;
}
button.filter-chip em {
  margin-left: 0.3rem;
  font-style: normal;
  font-weight: 700;
  color: inherit;
  opacity: 0.72;
}
.flow-groups {
  display: grid;
  gap: var(--ds-space-5);
}
.flow-group {
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0, 43, 73, 0.03);
}
.flow-group-head {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
  width: 100%;
  padding: 0.85rem 1.15rem;
  background: var(--surface-color);
  border: 0;
  text-align: left;
  color: inherit;
  cursor: pointer;
}
.flow-group-head:hover {
  background: var(--surface-subtle);
}
.flow-group-head h2 {
  margin: 0;
  flex: 1;
  color: var(--brand-dark);
  font-size: 1rem;
}
.flow-group-count {
  color: var(--text-secondary);
  font-size: 0.8125rem;
  font-weight: 600;
}
.flow-group-chevron {
  color: var(--brand-primary);
  transition: transform 0.16s ease;
}
.flow-group.is-collapsed .flow-group-chevron {
  transform: rotate(-90deg);
}
.flow-group.is-collapsed .flow-group-body {
  display: none;
}
.flow-group-body {
  border-top: 1px solid var(--line);
}
.flow-group-head:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: -2px;
}
.task-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  column-gap: 1.25rem;
  padding: 0.95rem 1.25rem;
  min-height: 4.5rem;
  border-bottom: 1px solid var(--surface-muted);
  cursor: pointer;
}
.task-row:has(.header-actions),
.task-row:has(.task-actions) {
  grid-template-columns: minmax(0, 1fr) max-content max-content;
}
.task-row:last-child {
  border-bottom: 0;
}
.task-row:hover {
  background: var(--surface-subtle);
}
.task-row__main {
  min-width: 0;
}
.task-row h3 {
  margin: 0 0 3px;
  font-size: 0.875rem;
  color: var(--brand-dark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-row p,
.task-row time {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.75rem;
}
.task-row p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-row__meta {
  display: grid;
  grid-template-columns: 10.75rem 9.25rem;
  align-items: center;
  column-gap: 0.75rem;
}
.task-row__meta .mini-status {
  justify-self: start;
  max-width: 100%;
}
.task-row__meta time {
  white-space: nowrap;
}
.task-row .task-actions,
.task-row .header-actions {
  justify-self: end;
  flex-wrap: nowrap;
}
.task-row .app-btn--primary.app-btn--sm {
  min-width: 10.25rem;
}
.inbox-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem 0.75rem;
  padding: 0;
  border: 0;
}
.inbox-toolbar .filter-row {
  padding: 0;
  margin: 0;
  border: 0;
  gap: 0.4rem;
}
.inbox-search {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 1 15rem;
  min-width: 11rem;
  padding: 0 0.65rem;
  background: var(--surface-color);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-secondary);
}
.inbox-search .material-icons {
  font-size: 1.05rem;
}
.inbox-search input,
.panel .inbox-search input {
  flex: 1;
  min-width: 0;
  min-height: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0.35rem 0;
  color: var(--text-primary);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
.inbox-search input[type='search']::-webkit-search-decoration,
.inbox-search input[type='search']::-webkit-search-cancel-button,
.inbox-search input[type='search']::-webkit-search-results-button,
.inbox-search input[type='search']::-webkit-search-results-decoration {
  appearance: none;
  -webkit-appearance: none;
}
.inbox-row {
  display: grid;
  grid-template-columns: 2.1rem minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.7rem;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--surface-muted);
  cursor: pointer;
}
a.inbox-row {
  text-decoration: none;
  color: inherit;
}
.inbox-list .inbox-row:last-child {
  border-bottom: 0;
}
.inbox-row:hover {
  background: var(--surface-subtle);
}
.inbox-row__icon {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--brand-deep);
  background: var(--tint-brand);
}
.inbox-row__icon .material-icons {
  font-size: 1.1rem;
}
.inbox-row__main {
  min-width: 0;
}
.inbox-row h3 {
  margin: 0 0 2px;
  font-size: 0.875rem;
  color: var(--brand-dark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inbox-row p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inbox-row__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.3rem;
}
.inbox-fact {
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--surface-sunken);
  color: var(--text-secondary);
  white-space: nowrap;
}
.inbox-fact--source,
.inbox-fact--money {
  background: var(--tint-brand);
  color: var(--brand-deep);
}
.inbox-fact--muted {
  font-weight: 500;
  background: transparent;
  padding-left: 0;
}
.inbox-row__side {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
}
.inbox-row__side .mini-status {
  max-width: 11.5rem;
}
.inbox-row__actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.35rem;
}
.inbox-row__actions .app-btn--primary.app-btn--sm {
  min-width: 0;
}
.task-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-3);
}
.mini-status {
  padding: 4px 10px;
  justify-content: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mini-status.warning {
  color: #9a5700;
  background: var(--tint-warning);
}
.mini-status.danger {
  color: #b52525;
  background: var(--tint-error);
}
.mini-status.success {
  color: var(--brand-deep);
  background: var(--tint-brand);
}
/* Fresh islands (islands/CaseDetail.tsx): inline result of the last
 * command run, next to the action buttons - no fixed-corner toast stack
 * hookup from an island yet, so this stays a simple inline banner. */
.inline-status {
  margin: 10px 0 0;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.8125rem;
  background: var(--tint-brand);
  color: var(--brand-deep);
}
.inline-status--danger {
  background: var(--tint-error);
  color: #b52525;
}
.attention-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--ds-space-3);
  padding: 0.9rem 1.25rem;
  min-height: 4.5rem;
  border-bottom: 1px solid var(--line);
}
.attention-row:last-child {
  border-bottom: 0;
}
.attention-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--tint-warning-alt);
  color: #c57000;
}
.attention-row h3 {
  font-size: 0.875rem;
  margin: 0 0 3px;
  color: var(--brand-dark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.attention-row p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.attention-row .task-actions {
  flex-wrap: nowrap;
  justify-self: end;
}
.history {
  position: relative;
  padding-left: 34px;
}
.history::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: #c9ddd9;
}
.history-item {
  position: relative;
  padding: 0 0 var(--ds-space-6);
}
.history-dot {
  position: absolute;
  left: -30px;
  top: 2px;
  width: 12px;
  height: 12px;
  border: 3px solid white;
  border-radius: 50%;
  background: var(--brand-primary);
  box-shadow: 0 0 0 1px var(--brand-primary);
}
.history-item h3 {
  margin: 0;
  font-size: 0.9rem;
  color: var(--brand-dark);
}
.history-item p,
.history-item time {
  margin: 5px 0 0;
  color: var(--text-secondary);
  font-size: 0.8125rem;
  line-height: 1.45;
}
.modal-backdrop {
  position: fixed;
  z-index: 70;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--ds-space-5);
  background: rgba(0, 30, 48, 0.48);
}
.modal {
  width: min(540px, 100%);
  /* Item de grade nasce com `min-width: auto`, então o min-content do
   * conteúdo (a fileira de botões que não quebra) esticava a caixa para
   * além do `width` declarado - num telefone o botão principal ficava
   * fora da tela, inalcançável. */
  min-width: 0;
  max-width: 100%;
  max-height: min(88vh, 920px);
  padding: var(--ds-space-6);
  border-radius: 15px;
  background: white;
  box-shadow: 0 24px 70px rgba(0, 20, 40, 0.3);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.modal--wide {
  width: min(820px, 100%);
}
.modal-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0 calc(var(--ds-space-6) * -1);
  padding: 0 var(--ds-space-6);
}
.modal h2 {
  margin: 0;
  color: var(--brand-dark);
  font-size: 1.25rem;
  flex: 0 0 auto;
}
.modal p {
  color: var(--text-secondary);
  line-height: 1.55;
  flex: 0 0 auto;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  /* Quebra em vez de empurrar a caixa: três botões não cabem lado a lado
   * em 375px. */
  flex-wrap: wrap;
  gap: var(--ds-space-3);
  margin-top: var(--ds-space-5);
  padding-top: var(--ds-space-4);
  border-top: 1px solid var(--line);
  flex: 0 0 auto;
}
.modal-summary {
  padding: var(--ds-space-4);
  border-left: 3px solid var(--brand-primary);
  background: #f1fbfa;
  font-size: 0.875rem;
  line-height: 1.55;
}
#toast-stack {
  position: fixed;
  z-index: 20;
  right: 20px;
  bottom: 20px;
  display: grid;
  gap: var(--ds-space-2);
}
.toast {
  min-width: 260px;
  padding: 12px 14px;
  border-radius: 9px;
  color: white;
  background: var(--brand-dark);
  box-shadow: var(--shadow);
  font-size: 0.8125rem;
  animation: toastIn 0.2s ease both;
}
@keyframes nodeIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes dash {
  to {
    stroke-dashoffset: -14;
  }
}
@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
@media (max-width: 1100px) {
  .builder,
  .builder.has-details {
    grid-template-columns: 245px minmax(0, 1fr);
  }
  .builder.has-details .details-pane,
  .builder.has-arch.has-details .details-pane {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(420px, 92vw);
    z-index: 8;
    box-shadow: -12px 0 28px rgba(15, 23, 42, 0.12);
  }
}
/* --- Menu da sidebar como gaveta, abaixo de 1024px --- igual ao
 * #app-nav-toggle/.app-nav-backdrop reais (checkbox puro, sem JS): o rail de
 * ícones antigo (.rail, .rail-nav, .rail-bottom) que morava aqui era da
 * chrome de antes da Parte V - ficou travando a barra lateral aberta em
 * qualquer largura de tela, porque nenhuma dessas classes existe mais no
 * HTML. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.app-header-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: -0.375rem;
  margin-right: var(--ds-space-2);
  padding: 8px;
  border-radius: 7px;
  color: inherit;
  cursor: pointer;
}
.app-header-menu-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}
@media (min-width: 1024px) {
  .app-header-menu-btn {
    display: none;
  }
}
.app-nav-backdrop {
  display: none;
  position: fixed;
  inset: var(--app-header-bar) 0 0 0;
  z-index: 40;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
@media (max-width: 1023px) {
  #app-nav-toggle:checked ~ .app-below-header .app-nav-backdrop {
    display: block;
  }
  .app-sidebar {
    position: fixed;
    top: var(--app-header-bar);
    left: 0;
    z-index: 50;
    width: min(16.5rem, 100vw - 1.5rem);
    height: calc(100dvh - var(--app-header-bar));
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    transform: translateX(-100%);
    transition: transform 0.2s ease-out;
  }
  #app-nav-toggle:checked ~ .app-below-header .app-sidebar {
    transform: translateX(0);
  }
}

@media (max-width: 1100px) {
  .task-row {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 0.5rem;
  }
  .task-row__meta {
    grid-column: 1 / -1;
    grid-template-columns: 10.75rem 9.25rem;
  }
  .inbox-row {
    grid-template-columns: 2.1rem minmax(0, 1fr);
    row-gap: 0.4rem;
  }
  .inbox-row__side {
    grid-column: 2;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .list-row__meta {
    flex-wrap: wrap;
  }
}

@media (max-width: 760px) {
  .status-pill {
    display: none;
  }
  /* The builder's own small-screen layout lives at the end of this file
   * (search "IDE em tela pequena"). It used to be here, stacking the
   * assistant pane above the canvas, but `.canvas-column, .assistant-pane,
   * .details-pane { min-height: 0 }` further down the file quietly beat
   * every min-height set here (same specificity, later wins), so the pane
   * collapsed to 178px with a zero-height palette and the rules read as
   * if they worked. Keeping the layout after that rule is what makes it
   * actually apply. */
  .page {
    padding: var(--ds-space-5) var(--ds-space-5) 5.5rem;
  }
  .summary-grid {
    grid-template-columns: 1fr;
  }
  .task-row {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 0.55rem;
    column-gap: 0.75rem;
    align-items: start;
  }
  .task-row__meta {
    grid-column: 1 / -1;
    grid-template-columns: auto 1fr;
  }
  .task-row .task-actions,
  .task-row .header-actions {
    padding-top: 0;
  }
  .task-row .app-btn--primary.app-btn--sm {
    min-width: 0;
  }
  .inbox-row {
    grid-template-columns: 2.1rem minmax(0, 1fr);
    row-gap: 0.4rem;
  }
  .inbox-row__side {
    grid-column: 1 / -1;
    justify-content: space-between;
  }
  .summary-grid--compact .summary-card {
    flex: 1 1 9.5rem;
  }
  .panel-head--tools .inbox-toolbar {
    flex-basis: 100%;
    justify-content: flex-start;
  }
  .list-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .list-row:has(.attention-icon),
  .attention-row {
    grid-template-columns: 38px minmax(0, 1fr);
  }
  .list-row__meta,
  .attention-row .task-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
  .page-header {
    flex-wrap: wrap;
  }
  .page-header-copy,
  .page-header > div:first-child {
    flex: 1 1 100%;
  }
  .page-header > .header-actions {
    flex: 1 1 100%;
    justify-content: flex-end;
  }
}

/* --- Conexões clicáveis, rótulo do caminho e cursor de deslocamento --- */
.edge-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 16;
  cursor: pointer;
  pointer-events: stroke;
}

.edge-hit:hover + .edge-label,
.edge-hit:hover {
  stroke: rgba(239, 68, 68, 0.18);
}

.edge-label {
  fill: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  text-anchor: middle;
  paint-order: stroke;
  stroke: var(--canvas);
  stroke-width: 4px;
  pointer-events: none;
}

#canvas-wrap.panning,
.canvas-wrap.is-panning,
.canvas-wrap.space-pan {
  cursor: grabbing;
}

#canvas-wrap,
.canvas-wrap {
  cursor: grab;
}

/* Alças aparecem no bloco em foco, para o canvas ficar calmo em repouso. */
.node-handle {
  opacity: 0;
  transition: opacity 0.12s ease;
}

.node:hover .node-handle,
.node.selected .node-handle,
.node-handle:focus-visible {
  opacity: 1;
}

.sim-hint {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

/* --- Altura do app: a janela manda, a página nunca rola --- */
html,
body {
  height: 100%;
}

.app-shell {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

.main {
  min-height: 0;
  overflow: hidden;
}

/* Em vez de calcular a altura com vh, deixar o flex resolver:
   assim o construtor acompanha a janela em qualquer contexto. */
.view {
  min-height: 0;
}

.builder {
  height: auto;
  flex: 1;
  min-height: 0;
}

.canvas-column,
.assistant-pane,
.details-pane {
  min-height: 0;
}

/* Telas de lista rolam por dentro, não empurram a página. */
.view.page {
  overflow-y: auto;
}

.picker {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3);
  overflow: hidden;
}
.picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-2);
}
.picker-head h2 {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--brand-dark);
}
.picker-grid {
  overflow-y: auto;
  display: grid;
  gap: var(--ds-space-2);
  padding-right: 2px;
  flex: 1;
  min-height: 0;
  align-content: start;
}
.picker-card {
  display: grid;
  gap: 2px;
  text-align: left;
  padding: var(--ds-space-3);
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-color);
  color: var(--text-primary);
}
.picker-card:hover,
.picker-card:focus-visible {
  border-color: var(--brand-primary);
  background: var(--mint-bg);
  outline: none;
}
.picker-org {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--brand-primary);
}
.picker-card strong {
  font-size: 0.8125rem;
  color: var(--brand-dark);
}
.picker-card small {
  color: var(--text-secondary);
  font-size: 0.75rem;
}

.add-wrap {
  position: relative;
}
.add-menu {
  position: absolute;
  z-index: 5;
  top: calc(100% + 6px);
  left: 0;
  width: 240px;
  padding: var(--ds-space-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-color);
  box-shadow: var(--shadow);
  display: grid;
  gap: 2px;
}
.add-menu button {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  width: 100%;
  border: 0;
  border-radius: 7px;
  padding: var(--ds-space-2) var(--ds-space-3);
  background: transparent;
  color: var(--text-primary);
  font-size: 0.8125rem;
  text-align: left;
}
.add-menu button:hover,
.add-menu button:focus-visible {
  background: var(--mint-bg);
  outline: none;
}

.empty-canvas {
  position: absolute;
  inset: 18% 12%;
  display: grid;
  place-content: center;
  gap: var(--ds-space-2);
  text-align: center;
  color: var(--text-secondary);
  pointer-events: none;
}
.empty-canvas strong {
  color: var(--brand-dark);
}

.node.connect-source {
  box-shadow: 0 0 0 3px rgba(0, 182, 214, 0.28);
}
.canvas.connecting .node-handle--in {
  opacity: 1;
}

.empty-state {
  padding: var(--ds-space-7);
  text-align: center;
  color: var(--text-secondary);
}
.empty-state strong {
  display: block;
  margin-bottom: var(--ds-space-2);
  color: var(--brand-dark);
}

.attention-row.is-done,
.task-row.is-done {
  opacity: 0.45;
}

.task-row h3:hover {
  color: var(--brand-primary);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
  flex-wrap: wrap;
  justify-content: flex-end;
}
.header-actions:empty {
  display: none;
}
.action-stack {
  display: grid;
  gap: var(--ds-space-4);
}
.action-stack .property-group {
  margin-bottom: 0;
}
.action-field {
  display: grid;
  gap: var(--ds-space-2);
}
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--ds-space-3);
  padding: var(--ds-space-4);
}
.page > .tile-grid {
  padding: 0;
}
.tile {
  display: grid;
  justify-items: start;
  gap: 6px;
  text-align: left;
  padding: var(--ds-space-5);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: white;
  color: inherit;
  font: inherit;
  box-shadow: 0 3px 10px rgba(0, 43, 73, 0.03);
}
.tile:hover {
  border-color: var(--brand-primary);
}
.tile .material-icons {
  color: var(--brand-primary);
}
.tile strong {
  color: var(--brand-dark);
}
.tile span {
  color: var(--text-secondary);
  font-size: 0.8125rem;
}
.split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ds-space-5);
  margin-bottom: var(--ds-space-5);
}
/* O composer da Início é o primeiro caminho (agêntico) - por isso o único
 * bloco colorido da tela, antes de qualquer card ou atalho manual. */
.home-composer {
  background: linear-gradient(135deg, var(--brand-dark), #013f68);
  border-radius: 14px;
  padding: 1.15rem 1.25rem 1.2rem;
  color: white;
  margin-bottom: var(--ds-space-5);
}
.home-composer-head {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
  margin-bottom: var(--ds-space-4);
}
.home-composer-head .material-icons {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.16);
  display: grid;
  place-items: center;
  flex: none;
}
.home-composer-head h2 {
  margin: 0;
  font-size: 1.0625rem;
}
.home-composer-head p {
  margin: 3px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.8125rem;
}
.home-composer-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
}
.home-composer-row input {
  flex: 1;
  min-width: 0;
  border: none;
  border-radius: 10px;
  padding: 0 var(--ds-space-4);
  min-height: 42px;
  font-size: 0.875rem;
  color: var(--text-primary);
  font-family: inherit;
}
.home-composer-row .app-btn {
  min-height: 42px;
  padding: 0 16px;
  font-size: 0.875rem;
  gap: 8px;
  flex: none;
}
.home-composer .header-actions {
  padding-top: 10px;
}
.home-composer-row input:focus-visible {
  outline: 3px solid rgba(0, 191, 154, 0.5);
  outline-offset: 1px;
}
.home-composer-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2);
  margin-top: var(--ds-space-3);
}
.home-composer-chips button {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.26);
  color: white;
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 0.75rem;
  font-weight: 500;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.home-composer-chips button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.22);
}
.home-composer-chips button:disabled {
  opacity: 0.55;
  cursor: default;
}

/* ---------- Nexo - copiloto flutuante ----------
 * Mesmo componente que já existe em toda a suíte (islands/AiContextButton.tsx
 * real, .nexo-float-btn no styles.css real) - aqui simplificado (sem os
 * skills contextuais por tela), mas com a mesma aparência e posição, porque
 * é o mesmo assistente, disponível em qualquer tela do Flow, não uma versão
 * separada. Esse botão - não o composer da Início - é o primeiro caminho de
 * verdade: funciona de qualquer lugar, o resto do produto é o caminho manual
 * de reserva. */
.nexo-float-btn {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 60;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-light) 100%);
  color: white;
  box-shadow: 0 4px 16px rgba(0, 191, 154, 0.4), 0 2px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.nexo-float-btn:hover {
  transform: scale(1.08) translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 191, 154, 0.5), 0 2px 6px rgba(0, 0, 0, 0.12);
}
.nexo-float-btn--active {
  background: var(--brand-dark);
}
.nexo-float-btn .material-icons {
  font-size: 1.375rem;
}
.nexo-panel {
  position: fixed;
  bottom: 5.25rem;
  right: 1.5rem;
  z-index: 60;
  width: min(23rem, calc(100vw - 2rem));
  background: white;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  animation: nexo-slide-up 0.16s ease;
}
@keyframes nexo-slide-up {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .nexo-panel {
    animation: none;
  }
}
.nexo-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ds-space-4) var(--ds-space-4) var(--ds-space-3);
  border-bottom: 1px solid var(--line);
}
.nexo-panel-head-title {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
}
.nexo-panel-head-title .material-icons {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  color: white;
  background: var(--brand-dark);
  display: grid;
  place-items: center;
  font-size: 1.125rem;
}
.nexo-panel-head-title strong {
  display: block;
  color: var(--brand-dark);
  font-size: 0.875rem;
}
.nexo-panel-head-title span {
  display: block;
  color: var(--text-secondary);
  font-size: 0.6875rem;
}
.nexo-panel-close {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  border-radius: 7px;
  padding: 5px;
  display: flex;
}
.nexo-panel-close:hover {
  background: var(--surface-color);
}
.nexo-panel-body {
  padding: var(--ds-space-4);
}
.nexo-panel-body > p {
  margin: 0 0 var(--ds-space-3);
  color: var(--text-secondary);
  font-size: 0.8125rem;
  line-height: 1.5;
}
.nexo-panel-body .chat-input {
  margin-top: 0;
  border-top: none;
  padding-top: 0;
}
.nexo-panel-links {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2);
  margin-top: var(--ds-space-3);
  padding-top: var(--ds-space-3);
  border-top: 1px solid var(--line);
}
.nexo-panel-links button {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  padding: 8px 10px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 0.8125rem;
  text-align: left;
}
.nexo-panel-links button:hover {
  background: var(--tint-brand-soft);
}
.nexo-panel-links .material-icons {
  color: var(--brand-primary);
  font-size: 18px;
}
@media (max-width: 480px) {
  .nexo-panel {
    right: 1rem;
    bottom: 4.75rem;
  }
  .nexo-float-btn {
    right: 1rem;
    bottom: 1rem;
  }
  .home-composer-row {
    flex-direction: column;
  }
  .home-composer-row .app-btn {
    width: 100%;
  }
}
.panel + .panel {
  margin-top: var(--ds-space-4);
}
.panel-body {
  display: flex;
  flex-direction: column;
  padding: 16px 20px 18px;
}
.panel-body > p,
.panel-body > .muted {
  margin: 0 0 10px;
}
.panel-body > .property-group:last-child,
.panel-body > p:last-child,
.panel-body > .muted:last-child {
  margin-bottom: 0;
}
.panel-body > .app-btn {
  align-self: flex-start;
  margin-top: 2px;
}
.panel-body > .task-actions {
  padding: 4px 0 0;
}
.panel-body > .info-line:first-child {
  padding-top: 0;
}
.panel-body > .info-line:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.panel-body > .list-row,
.panel-body > .filter-row,
.panel-body > .tile-grid,
.panel-body > .table-wrap,
.panel-body > .data-table,
.panel-body > .bar-list,
.panel-body > .spark {
  margin-left: -20px;
  margin-right: -20px;
}
.panel-body > .list-row:first-child,
.panel-body > .filter-row:first-child,
.panel-body > .tile-grid:first-child,
.panel-body > .table-wrap:first-child,
.panel-body > .bar-list:first-child,
.panel-body > .spark:first-child {
  margin-top: -16px;
}
.panel-body > .list-row:last-child,
.panel-body > .tile-grid:last-child,
.panel-body > .table-wrap:last-child,
.panel-body > .bar-list:last-child {
  margin-bottom: -18px;
}
.panel-pad-btn {
  margin: var(--ds-space-3) var(--ds-space-5);
}
.muted {
  color: var(--text-secondary);
  font-size: 0.8125rem;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.data-table th,
.data-table td {
  padding: var(--ds-space-3) var(--ds-space-4);
  text-align: left;
  border-bottom: 1px solid var(--surface-muted);
  vertical-align: middle;
}
.data-table th {
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 600;
}
.data-table tr.is-click {
  cursor: pointer;
}
.data-table tr.is-click:hover,
.list-row:hover {
  background: var(--surface-subtle);
}
.data-table tr.is-highlighted {
  background: #fff7e6;
}
.data-table code,
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--surface-sunken);
}
.table-wrap {
  overflow: auto;
}
.page-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--surface-muted);
}
.page-bar p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.8125rem;
}
.page-bar .header-actions {
  margin: 0;
}
.page-bar .app-btn .material-icons {
  font-size: 18px;
}
.page-bar__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.page-bar__size {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  font-size: 0.8125rem;
  white-space: nowrap;
}
.page-bar__size select {
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--line-strong-alt);
  border-radius: 8px;
  background: white;
  font: inherit;
  font-size: 0.8125rem;
  color: var(--text-primary);
}
.list-search {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 16rem;
  min-width: 10rem;
  max-width: 24rem;
  height: 36px;
  box-sizing: border-box;
  padding: 0 10px;
  border: 1px solid var(--line-strong-alt);
  border-radius: 8px;
  background: white;
}
.list-search .material-icons {
  font-size: 18px;
  color: var(--text-secondary);
}
.list-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.8125rem;
  color: var(--text-primary);
}
.list-search input:focus {
  outline: none;
}
.list-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 20px;
  border-bottom: 1px solid var(--surface-muted);
}
@media (max-width: 640px) {
  .page-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .page-bar__actions {
    justify-content: space-between;
  }
  .page-bar__actions .header-actions {
    flex: 1 1 auto;
    justify-content: space-between;
  }
  .list-search {
    max-width: none;
  }
  .list-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
}
.list-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 14px;
  padding: 0.85rem 1.25rem;
  min-height: 4.25rem;
  border-bottom: 1px solid var(--surface-muted);
}
.list-row:last-child {
  border-bottom: 0;
}
.list-row h3 {
  margin: 0 0 3px;
  font-size: 0.875rem;
  color: var(--brand-dark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list-row p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list-row > div:not(.list-row__meta) {
  min-width: 0;
}
.list-row:not(:has(.attention-icon)) {
  grid-template-columns: minmax(0, 1fr) auto;
}
.list-row__meta {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.list-row__stat {
  width: 8.5rem;
  text-align: right;
  color: var(--text-secondary);
  font-size: 0.75rem;
  white-space: nowrap;
}
.list-row__meta .source-pill {
  width: 5.75rem;
  justify-content: center;
  text-align: center;
}
.list-row__meta .mini-status {
  width: 7.25rem;
}
.list-row__meta .app-btn {
  min-width: 7.25rem;
}
.bar-list {
  display: grid;
  gap: 10px;
  padding: var(--ds-space-5);
}
.bar-row {
  display: grid;
  grid-template-columns: 160px 1fr 48px;
  gap: 10px;
  align-items: center;
  font-size: 0.8125rem;
}
.bar-row i {
  display: block;
  height: 8px;
  border-radius: 99px;
  background: #e8eef0;
}
.bar-row b {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--brand-primary);
}
.bar-row em {
  font-style: normal;
  color: var(--text-secondary);
  text-align: right;
}
.spark {
  width: 100%;
  height: 72px;
  color: var(--brand-primary);
  padding: var(--ds-space-4) var(--ds-space-5) 0;
}
.toggle {
  width: 40px;
  height: 22px;
  border: 0;
  border-radius: 99px;
  background: #c5d4d8;
  position: relative;
  flex-shrink: 0;
}
.toggle::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: white;
  transition: 0.18s ease;
}
.toggle.is-on {
  background: var(--brand-primary);
}
.toggle.is-on::after {
  left: 21px;
}
.form-studio {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--ds-space-5);
  margin-bottom: var(--ds-space-5);
}
.form-palette {
  display: grid;
  align-content: start;
  gap: var(--ds-space-2);
}
.form-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  color: var(--brand-dark);
  font-size: 0.8125rem;
}
.form-canvas {
  background: white;
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  padding: var(--ds-space-6);
  display: grid;
  gap: var(--ds-space-4);
}
.form-canvas h3 {
  margin: 0;
  color: var(--brand-dark);
}
.form-canvas label,
.field-label {
  display: grid;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.form-canvas input:not([type='file']),
.form-canvas select,
.panel input:not([type='checkbox']):not([type='search']):not([type='radio']):not([type='hidden']):not([type='file']) {
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.viewer-bar {
  margin-bottom: var(--ds-space-4);
}
.live-form .property-group {
  margin-bottom: 12px;
}
/* .portal-card / .portal-steps do protótipo saíram: nenhuma tela usava, e o
 * "text-align: center" delas vazava para a tela real do portal, centrando
 * rótulo de campo. O portal vivo está em ".portal-*" mais abaixo. */
.search-hero {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--ds-space-5);
  padding: 0 var(--ds-space-4);
  min-height: 52px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: white;
}
.search-hero input {
  flex: 1;
  border: 0;
  outline: none;
  min-height: 48px;
}
.ctx-menu {
  position: fixed;
  z-index: 80;
  min-width: 220px;
  padding: 6px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
}
.ctx-menu button {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--brand-dark);
  font-size: 0.8125rem;
  text-align: left;
}
.ctx-menu button:hover,
.palette-item.active,
.palette-item:hover {
  background: #f0f7f8;
}
.ctx-menu button.is-danger {
  color: var(--error);
}
.ctx-sep {
  margin: 6px 8px;
  border: 0;
  border-top: 1px solid var(--line);
}
.palette-backdrop {
  position: fixed;
  z-index: 75;
  inset: 0;
  background: rgba(0, 43, 73, 0.28);
  display: grid;
  align-content: start;
  justify-content: center;
  padding-top: 12vh;
}
.palette {
  width: min(560px, calc(100vw - 32px));
  background: white;
  border-radius: 14px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.palette-search {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  padding: var(--ds-space-3) var(--ds-space-4);
  border-bottom: 1px solid var(--line);
  color: var(--text-secondary);
}
.palette-search input {
  flex: 1;
  border: 0;
  outline: none;
  min-height: 36px;
}
.palette-list {
  max-height: 360px;
  overflow: auto;
  padding: 6px;
}
.palette-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  text-align: left;
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
}
.palette-item small,
.palette-hint,
.palette-empty {
  display: block;
  color: var(--text-secondary);
  font-size: 0.75rem;
}
.palette-hint {
  margin: 0;
  padding: 8px 16px 14px;
}
.modal .tile-grid {
  padding: var(--ds-space-3) 0 var(--ds-space-4);
  grid-template-columns: repeat(3, 1fr);
}
.modal-scroll .field-label {
  display: block;
  margin-top: var(--ds-space-3);
}
.modal kbd,
.panel kbd {
  font: 600 0.75rem Inter, sans-serif;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--surface-sunken);
  border: 1px solid var(--line);
}
.list-row.is-selected {
  background: var(--tint-brand-soft);
  box-shadow: inset 3px 0 0 var(--brand-primary);
}
.pack-switch {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2);
  margin-bottom: var(--ds-space-4);
}
.pack-switch button {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-color);
  color: var(--text-secondary);
  font-weight: 600;
}
.pack-switch button.is-on {
  color: var(--brand-dark);
  border-color: var(--brand-primary);
  background: var(--tint-brand-soft);
  box-shadow: inset 0 0 0 1px var(--brand-primary);
}
.source-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--brand-dark);
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: var(--ds-space-1) var(--ds-space-2);
  white-space: nowrap;
}
@media (max-width: 900px) {
  .split-grid,
  .form-studio {
    grid-template-columns: 1fr;
  }
  .search-chip span,
  .search-chip kbd {
    display: none;
  }
}

/* --- Canvas vazio: fora da transformação, com ação clara --- */
.empty-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-3);
  padding: var(--ds-space-6);
  text-align: center;
  pointer-events: none;
}

.empty-canvas > * {
  pointer-events: auto;
}

.empty-canvas__icon .material-icons {
  font-size: 40px;
  color: var(--tint-brand-border);
}

.empty-canvas strong {
  font-size: 1.05rem;
  color: var(--text-primary);
}

.empty-canvas__lead {
  max-width: 42ch;
  color: var(--text-secondary);
}

.ctx-menu button small {
  margin-left: auto;
  padding-left: 12px;
  color: var(--text-secondary);
  font-size: 0.7rem;
  font-weight: 500;
  white-space: nowrap;
}
.org-picker {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}
.org-option {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: white;
  text-align: left;
}
.org-option span {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.org-option small {
  color: var(--text-secondary);
  font-weight: 400;
}
.org-option:hover {
  border-color: var(--brand-primary);
  background: var(--tint-brand-soft);
}
.org-option.is-current {
  border-color: var(--brand-primary);
  background: var(--tint-brand);
}
.org-option .material-icons:first-child {
  color: var(--brand-primary);
}
.org-option .material-icons:last-child {
  color: var(--success);
}

@media (max-width: 720px) {
  .org-chip-text {
    display: none;
  }
}

/* --- Rastro (inspetor de instância): mesmo desenho do Fluxo, só leitura,
   com status por nó - a resposta visual pra "onde travou". --- */
.trace-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--ds-space-4);
  align-items: start;
  padding: var(--ds-space-5);
}
.trace-canvas-wrap {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--canvas);
  background-image: radial-gradient(#cfdbdf 1px, transparent 1px);
  background-size: 18px 18px;
  overflow: auto;
  max-height: 70vh;
}
.trace-canvas {
  position: relative;
  transform: scale(0.62);
  transform-origin: top left;
}
.trace-svg {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}
.trace-edge {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 2;
}
.trace-edge--walked {
  stroke: var(--brand-primary);
  stroke-width: 2.5;
}
.trace-node {
  position: absolute;
  width: 168px;
  min-height: 93px;
  padding: var(--ds-space-3);
  border: 1px solid var(--line-strong-alt);
  border-radius: 11px;
  background: white;
  box-shadow: 0 3px 10px rgba(0, 43, 73, 0.07);
}
.trace-node-icon {
  display: inline-flex;
  color: var(--text-secondary);
}
.trace-node-badge {
  float: right;
  display: inline-flex;
}
.trace-node h3 {
  font-size: 0.8125rem;
  margin: 8px 0 2px;
  color: var(--brand-dark);
}
.trace-node p {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin: 0;
}
.trace-node--done {
  border-color: var(--tint-brand-border);
  background: var(--tint-brand-soft);
}
.trace-node--done .trace-node-badge {
  color: var(--success);
}
.trace-node--pending {
  opacity: 0.55;
  border-style: dashed;
}
.trace-node--pending .trace-node-badge {
  color: var(--neutral);
}
.trace-node--current {
  border-color: var(--warning);
  border-width: 2px;
  box-shadow: 0 0 0 4px var(--tint-warning);
  animation: trace-pulse 1.8s ease-in-out infinite;
}
.trace-node--current .trace-node-badge {
  color: var(--warning);
}
@media (prefers-reduced-motion: reduce) {
  .trace-node--current {
    animation: none;
  }
}
@keyframes trace-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 4px var(--tint-warning);
  }
  50% {
    box-shadow: 0 0 0 8px var(--tint-warning);
  }
}
.trace-side {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-4);
}
.trace-current h3 {
  margin: 0 0 4px;
  padding: 0 20px;
  color: var(--brand-dark);
  font-size: 0.9375rem;
}
.trace-current p {
  margin: 0 0 8px;
  padding: 0 20px;
  color: var(--text-secondary);
  font-size: 0.8125rem;
}

/* ---------- Slice 3 a 4: canvas, Início, calendário ---------- */
.canvas-title-input {
  display: block;
  width: min(420px, 100%);
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  color: var(--brand-dark);
  padding: 0;
  min-height: 28px;
}
.canvas-title-input:focus-visible {
  outline: none;
  box-shadow: 0 1px 0 var(--brand-primary);
}
/* The publish code is a Fluxo-level setting, not a node one - it lives here,
 * always reachable, instead of inside the per-node inspector (which can now
 * be collapsed or empty with nothing selected). */
.draft-state--code {
  flex-wrap: wrap;
}
.code-inline-input {
  min-width: 90px;
  max-width: 220px;
  border: 0;
  border-bottom: 1px dashed var(--line-strong-alt);
  background: transparent;
  font: inherit;
  font-size: 0.75rem;
  color: var(--text-secondary);
  padding: 0 2px;
}
.code-inline-input:focus-visible {
  outline: none;
  border-bottom-style: solid;
  border-bottom-color: var(--brand-primary);
}
.draft-state--code .link-with-icon {
  margin-top: 0;
}
.add-menu--inline {
  position: static;
  width: auto;
  box-shadow: none;
  border: 0;
  padding: 0;
  background: transparent;
}
.edge-label {
  font-size: 11px;
  fill: var(--text-secondary);
  text-anchor: middle;
}
a.task-row {
  text-decoration: none;
  color: inherit;
}
button.tile {
  font: inherit;
  cursor: pointer;
}
.home-composer-match {
  margin-top: 16px;
  padding: 18px 20px;
  border-radius: 12px;
  background: white;
  color: var(--text-primary);
  border: 1px solid var(--line);
  box-shadow: 0 12px 32px rgba(0, 43, 73, 0.14);
  animation: composer-match-in 0.18s ease-out;
}
@keyframes composer-match-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}
.home-composer-match > p:first-child:not(:only-child) {
  font-size: 0.9375rem;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.home-composer-match strong {
  color: var(--brand-dark);
}
.home-composer-match a {
  color: var(--brand-deep);
  font-weight: 600;
}
.home-composer-match p {
  margin: 0;
}
.home-composer-match:has(.property-group) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 16px;
}
.home-composer-match > :not(.property-group),
.home-composer-match > .property-group:has(textarea, .form-file, .form-field-choices) {
  grid-column: 1 / -1;
}
.home-composer-match .property-group {
  margin-bottom: 12px;
}
.home-composer-match .property-group input,
.home-composer-match .property-group select,
.home-composer-match .property-group textarea {
  border-radius: 9px;
  font-size: 0.875rem;
}
@media (max-width: 720px) {
  .home-composer-match:has(.property-group) {
    grid-template-columns: minmax(0, 1fr);
  }
}
.home-composer-match .header-actions {
  justify-content: flex-end;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.home-composer-note {
  margin: 8px 0 0 !important;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}
.home-composer-valor {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.home-composer-valor input {
  max-width: 180px;
  border: 1px solid var(--line-strong-alt);
  border-radius: 8px;
  min-height: 36px;
  padding: 0 12px;
  color: var(--text-primary);
  font: inherit;
}
/* Medida curta (calendário, portal público) centrada: encostada à
 * esquerda ela deixava meia tela de vazio à direita e lia como layout
 * quebrado, não como escolha. */
.page--narrow {
  max-width: 880px;
  margin-inline: auto;
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  padding: 12px 16px 16px;
}
.cal-dow {
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 4px 0;
}
.cal-cell {
  min-height: 72px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: white;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 8px;
  text-align: left;
  color: inherit;
  font: inherit;
}
.cal-cell.is-empty {
  border: 0;
  background: transparent;
  min-height: 0;
}
.cal-cell.is-weekend {
  background: var(--surface-color);
}
.cal-cell.is-today {
  box-shadow: inset 0 0 0 2px var(--brand-primary);
}
.cal-cell.is-holiday {
  background: #fff4e8;
  border-color: #f0c48a;
}
.cal-cell:hover:not(.is-empty) {
  border-color: var(--brand-primary);
}
.cal-num {
  font-weight: 700;
  color: var(--brand-dark);
  font-size: 0.875rem;
}
.cal-name {
  font-size: 0.6875rem;
  color: #9a5b12;
  line-height: 1.3;
}
.cal-form {
  display: grid;
  grid-template-columns: 160px 1fr auto;
  gap: 12px;
  align-items: end;
  padding: 16px 20px 20px;
}
.cal-form label {
  display: grid;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.cal-form input {
  min-height: 38px;
  border: 1px solid var(--line-strong-alt);
  border-radius: 8px;
  padding: 0 10px;
  font: inherit;
  color: var(--text-primary);
}
@media (max-width: 720px) {
  .cal-form {
    grid-template-columns: 1fr;
  }
  .cal-cell {
    min-height: 56px;
    padding: 6px;
  }
}

/* ── Acabamento: auditoria visual das telas do kernel ─────────────────
 * Passada de acabamento nas telas novas (Portal, Evidência, Versões,
 * Entradas, Histórico do caso). Nada aqui muda comportamento - só corrige
 * o que estava sem tratamento: <select> cru do browser, botão-link com
 * sublinhado, bolinha da timeline fora do trilho, chip sem tom e JSON
 * solto no branco.
 */

/* Um <a> com cara de botão não pode herdar o sublinhado do link. */
.app-btn {
  text-decoration: none;
}
/* Ghost sem borda nenhuma lia como texto flutuante ("Mais ações",
 * "Abrir no canvas"), então ganha a borda fraca - a diferença com o
 * secondary continua sendo o fundo transparente. */
.app-btn--ghost {
  border-color: var(--line);
}
.app-btn--ghost:hover {
  border-color: var(--line-strong);
}
.app-btn--ghost-danger,
.app-btn--icon.app-btn--ghost {
  border-color: transparent;
}

/* Campos: um único tratamento para input/select/textarea, com seta
 * própria no select - o nativo do Chrome não aceita raio nem altura. */
.form-grid input:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='file']),
.form-grid select,
.form-grid textarea,
.cal-form input:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='file']),
.cal-form select,
.cal-form textarea {
  min-height: 38px;
  width: 100%;
  border: 1px solid var(--line-strong-alt);
  border-radius: 8px;
  padding: 0 10px;
  font: inherit;
  color: var(--text-primary);
  background: white;
}
.form-grid select,
.cal-form select,
.property-group select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 16px 16px;
  text-overflow: ellipsis;
}
.form-grid textarea,
.cal-form textarea {
  padding: 9px 10px;
  resize: vertical;
}
.form-grid input:not([type='checkbox']):not([type='radio']):not([type='file']):focus-visible,
.form-grid select:focus-visible,
.form-grid textarea:focus-visible,
.cal-form input:not([type='checkbox']):not([type='radio']):not([type='file']):focus-visible,
.cal-form select:focus-visible,
.cal-form textarea:focus-visible,
.property-group input:focus-visible,
.property-group select:focus-visible,
.property-group textarea:focus-visible {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(0, 191, 154, 0.16);
}

/* Formulário de uma linha: campos à esquerda; o botão na última linha,
 * encostado à direita - o mesmo canto que `.header-actions`. */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 15rem);
  justify-content: start;
  gap: var(--ds-space-4) var(--ds-space-3);
  align-items: end;
  padding: var(--ds-space-4) 1.25rem 1.25rem;
}
.form-grid > label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 600;
}
.form-grid > button,
.form-grid > .header-actions {
  grid-column: 1 / -1;
  justify-self: end;
}
.people-dir {
  display: flex;
  flex-direction: column;
}
.people-card {
  border-bottom: 1px solid var(--surface-muted);
}
.people-card:last-child {
  border-bottom: 0;
}
.people-card.is-open {
  background: var(--surface-subtle);
}
.people-card__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 14px;
  width: 100%;
  min-height: 4.25rem;
  padding: 0.9rem 1.25rem;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.people-card__row:hover {
  background: rgba(0, 43, 73, 0.03);
}
.people-card.is-open > .people-card__row:hover {
  background: transparent;
}
.people-card__avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--brand-deep), var(--brand-light));
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.people-card__id h3 {
  margin: 0 0 3px;
  font-size: 0.875rem;
  color: var(--brand-dark);
}
.people-card__id p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.75rem;
}
.people-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  max-width: 28rem;
}
.people-card__meta .mini-status {
  width: auto;
  max-width: 16rem;
}
.people-card__chev {
  color: var(--neutral);
  transition: transform 0.18s ease;
}
.people-card.is-open .people-card__chev {
  transform: rotate(180deg);
}
.band-chip--admin {
  background: var(--brand-dark);
  color: #fff;
}
.band-chip--supervisor {
  background: #e8f0f8;
  color: var(--brand-dark);
}
.band-chip--worker {
  background: var(--tint-brand);
  color: var(--brand-deep);
}
.people-card__editor {
  display: grid;
  gap: 1.1rem;
  padding: 0 1.25rem 1.25rem 4.85rem;
}
.people-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
  gap: 0.85rem 0.75rem;
}
.people-fields > label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 600;
}
.people-fields input,
.people-fields select {
  min-height: 38px;
  width: 100%;
  border: 1px solid var(--line-strong-alt);
  border-radius: 8px;
  padding: 0 10px;
  font: inherit;
  color: var(--text-primary);
  background: white;
}
.people-fields select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 16px 16px;
}
.people-fields input:focus-visible,
.people-fields select:focus-visible {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(0, 191, 154, 0.16);
}
.perm-block {
  display: grid;
  gap: 0.65rem;
}
.perm-block header {
  display: grid;
  gap: 4px;
}
.perm-block h3 {
  margin: 0;
  color: var(--brand-dark);
  font-size: 0.8125rem;
  font-weight: 700;
}
.perm-block p {
  margin: 0;
  max-width: 62ch;
  color: var(--text-secondary);
  font-size: 0.75rem;
  line-height: 1.45;
}
.access-profiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
  gap: 0.6rem;
}
.access-profile {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 0.65rem;
  row-gap: 2px;
  align-items: start;
  min-height: 4.5rem;
  padding: 0.75rem 0.85rem;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.access-profile .material-icons {
  grid-row: 1 / span 2;
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--brand-deep);
  background: var(--tint-brand);
  font-size: 1.05rem;
}
.access-profile b {
  font-size: 0.8125rem;
  font-weight: 650;
  color: var(--brand-dark);
}
.access-profile small {
  grid-column: 2;
  color: var(--text-secondary);
  font-size: 0.7rem;
  line-height: 1.35;
}
.access-profile:hover {
  border-color: var(--line-strong);
}
.access-profile.is-on {
  border-color: var(--brand-primary);
  background: var(--mint-bg);
  box-shadow: 0 0 0 3px rgba(0, 191, 154, 0.14);
}
.perm-matrix {
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 0.85rem;
  background: #fff;
}
.perm-matrix__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.65rem;
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.perm-matrix__head em {
  color: var(--brand-deep);
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
}
.perm-group {
  margin-bottom: 0.75rem;
}
.perm-group:last-child {
  margin-bottom: 0;
}
.perm-group__title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.35rem 0 0.25rem;
  color: var(--brand-dark);
  font-size: 0.78rem;
  font-weight: 700;
}
.perm-group__title .material-icons {
  color: var(--brand-deep);
  font-size: 1.05rem;
}
.perm-group__all {
  margin-left: auto;
  border: 0;
  background: none;
  color: var(--text-secondary);
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
}
.perm-group__all:hover {
  color: var(--brand-deep);
}
.perm-row {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.4rem 0.5rem;
  border-radius: 8px;
  cursor: pointer;
}
.perm-row:hover {
  background: var(--surface-subtle);
}
.perm-row.is-locked {
  cursor: default;
  opacity: 0.72;
}
.perm-row input {
  margin-top: 0.2rem;
  accent-color: var(--brand-primary);
}
.perm-row span {
  display: grid;
  gap: 1px;
}
.perm-row b {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
}
.perm-row small {
  color: var(--text-secondary);
  font-size: 0.72rem;
  line-height: 1.35;
}
.people-card--create .people-card__editor {
  padding-left: 1.25rem;
}
@media (max-width: 720px) {
  .people-card__row {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .people-card__meta {
    grid-column: 1 / -1;
    justify-content: flex-start;
    max-width: none;
  }
  .people-card__editor {
    padding-left: 1.25rem;
  }
}
.cal-form > button {
  justify-self: end;
}
@media (max-width: 720px) {
  .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Timeline do histórico: a bolinha tem de ficar centrada no trilho.
 * 28px de recuo, trilho em 5px + 2px de largura (centro 6px) e a
 * bolinha de 12px encostada em 0 (centro 6px) - mesma linha. O último
 * item perde o padding para o trilho não sobrar embaixo. */
.history {
  padding-left: 28px;
}
.history::before {
  left: 5px;
  top: 8px;
  bottom: 8px;
}
.history-dot {
  left: -28px;
  top: 3px;
}
.history-item:last-child {
  padding-bottom: 0;
}
/* Evento mais recente em destaque; os anteriores viram trilho passado. */
.history-item:not(:first-child) .history-dot {
  background: #fff;
  box-shadow: 0 0 0 1px #c9ddd9;
}

/* Chip sem tom (ex.: "aposentada" em Versões) precisa parecer chip. */
.mini-status.muted {
  color: var(--text-secondary);
  background: var(--surface-sunken);
}

/* JSON dos campos: bloco de código, não texto solto no branco. */
.code-block {
  margin: 0;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-sunken);
  color: var(--brand-dark);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  line-height: 1.55;
  overflow: auto;
  max-height: 22rem;
}

/* Painel "Campos" - adapta a leitura ao que chegou: formulário, payload de
 * webhook ou e-mail. .field-grid encaixota valores curtos em colunas;
 * valores longos e blocos JSON quebram a largura toda. */
.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  background: var(--surface-color);
  border-bottom: 1px solid var(--surface-muted);
}
.field-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0.8rem 1.25rem;
  border-top: 1px solid var(--surface-muted);
  border-right: 1px solid var(--surface-muted);
  min-width: 0;
}
.field-grid .field-cell:has(.field-value--block) {
  grid-column: 1 / -1;
}
.field-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.field-value {
  font-size: 0.875rem;
  color: var(--brand-dark);
  word-break: break-word;
}
.field-value--empty {
  color: var(--text-secondary);
}
.field-value--block {
  white-space: pre-wrap;
  line-height: 1.5;
}
.field-email {
  display: flex;
  flex-direction: column;
}
.field-email .field-cell {
  border-right: 0;
}
.field-email .field-cell + .field-cell {
  border-top: 1px solid var(--surface-muted);
}
.field-payload {
  display: flex;
  flex-direction: column;
}
.field-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0.9rem 1.25rem 1.1rem;
  border-top: 1px solid var(--surface-muted);
}
.field-block:first-child {
  border-top: 0;
}

/* Link dentro de linha de lista (caso #12) segue a marca, sem o azul
 * sublinhado do browser. */
.list-row p a,
.list-row h3 a {
  color: var(--brand-deep);
  font-weight: 600;
  text-decoration: none;
}
.list-row p a:hover,
.list-row h3 a:hover {
  text-decoration: underline;
}
.inline-status a {
  color: var(--brand-deep);
  font-weight: 600;
  word-break: break-all;
}

/* Menu lateral rola quando a janela é curta - sem barra visível ele
 * cortava o último item no meio, parecendo tela quebrada. */
.app-sidebar-nav {
  padding-bottom: var(--ds-space-2);
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
.app-sidebar-nav::-webkit-scrollbar {
  width: 6px;
}
.app-sidebar-nav::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #cbd5e1;
}
.app-sidebar-nav::-webkit-scrollbar-track {
  background: transparent;
}

/* Menu lateral e cards navegáveis são controles, não links de texto - o
 * sublinhado do browser deixava a tela toda com cara de documento. */
.app-nav-link,
a.tile {
  text-decoration: none;
}

/* Ícone de linha de catálogo (Pessoas, Versões, Conectores, Chaves,
 * Entradas, Evidência…) herdava o âmbar de ".attention-icon", que quer
 * dizer "precisa de você agora". Na mesma tela o summary-card já usava a
 * marca, então a linha ficava com dois tons para a mesma hierarquia.
 * Dentro de .list-row o chip é neutro; em .attention-row o âmbar fica. */
.list-row > .attention-icon {
  background: var(--tint-brand);
  color: var(--brand-deep);
}

/* ── Portal público (islands/PortalPick.tsx) ──────────────────────────
 * Página de quem está fora: sem menu, sem conta. Antes era um textarea de
 * JSON solto no canto; agora é uma coluna centrada com marca, o contexto
 * do caso e os campos que já chegaram, com rótulo.
 */
.portal-page {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--page-bg);
}
.portal-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 var(--ds-space-5);
  height: 3.25rem;
  background: var(--brand-dark);
  color: #fff;
}
.portal-brand-mark {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 8px;
  background: var(--brand-primary);
  color: var(--brand-dark);
  font-weight: 700;
}
.portal-brand strong {
  display: block;
  font-size: 0.875rem;
  line-height: 1.2;
}
.portal-brand small {
  display: block;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.6875rem;
}
.portal-body {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: var(--ds-space-7) var(--ds-space-5);
}
.portal-card {
  width: min(34rem, 100%);
  box-shadow: 0 6px 24px rgba(0, 43, 73, 0.06);
}
.portal-card h1 {
  margin: 0;
  color: var(--brand-dark);
  font-size: 1.125rem;
  letter-spacing: -0.01em;
}
/* Valor e prazo lado a lado: o de fora precisa saber do que se trata antes
 * de digitar. */
.portal-facts {
  display: flex;
  gap: var(--ds-space-7);
  margin: 0;
  padding: var(--ds-space-4) 1.25rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface-subtle);
}
.portal-facts dt {
  color: var(--text-secondary);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.portal-facts dd {
  margin: 3px 0 0;
  color: var(--brand-dark);
  font-size: 0.9375rem;
  font-weight: 600;
}
.portal-form {
  padding: var(--ds-space-5) 1.25rem 1.25rem;
}
.portal-form-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-3);
  margin-top: var(--ds-space-5);
}
.portal-form-foot small {
  color: var(--text-secondary);
  font-size: 0.75rem;
}
.portal-done {
  padding: var(--ds-space-8) var(--ds-space-6);
  text-align: center;
}
.portal-done .material-icons {
  font-size: 2.5rem;
  color: var(--brand-primary);
}
.portal-done h1 {
  margin: var(--ds-space-3) 0 var(--ds-space-2);
}
.portal-done p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.8125rem;
  line-height: 1.5;
}
.portal-done--error .material-icons {
  color: var(--error);
}

/* Org no topo: só o nome. Sem kicker "Cooperativa". */
.org-chip-text {
  justify-content: center;
}
.org-chip .org-chip-label {
  font-size: 0.875rem;
}

.portal-brand strong {
  font-size: 0.9375rem;
  font-weight: 600;
}

.portal-form-foot {
  flex-wrap: wrap;
}

@media (max-width: 480px) {
  .page-header p {
    max-width: none;
  }
  .portal-body {
    padding: var(--ds-space-5) var(--ds-space-4);
  }
  .portal-form-foot {
    flex-direction: column;
    align-items: stretch;
  }
  .portal-form-foot .app-btn {
    width: 100%;
  }
  .cal-form {
    grid-template-columns: 1fr;
  }
  .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .form-grid > button,
  .cal-form > button {
    width: 100%;
    justify-self: stretch;
  }
}

/* Login - same surface as UniConecta CoE (Microsoft + e-mail/senha). */
.app-header-auth-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  border-radius: 0.375rem;
  border: 1px solid rgb(255 255 255 / 0.25);
  background: rgb(255 255 255 / 0.08);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.app-header-auth-btn:hover {
  background: rgb(255 255 255 / 0.16);
  border-color: rgb(255 255 255 / 0.35);
}
.app-header-auth-btn:disabled,
.app-header-auth-btn.is-loading {
  cursor: default;
  opacity: 0.85;
}
.app-header-auth-btn--accent {
  border-color: rgb(96 165 250 / 0.6);
  background: rgb(37 99 235 / 0.35);
}
.app-header-auth-btn--accent:hover {
  background: rgb(37 99 235 / 0.5);
}
.app-header-auth-ms-icon {
  flex-shrink: 0;
  display: inline-block;
}

.login-page {
  position: relative;
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgb(37 99 235 / 0.18), transparent 60%),
    radial-gradient(900px 500px at 110% 110%, rgb(14 165 233 / 0.14), transparent 55%),
    linear-gradient(160deg, rgb(15 23 42) 0%, rgb(0 43 73) 100%);
  color: #fff;
}
.login-page-card {
  width: 100%;
  max-width: 26rem;
  padding: 2.25rem 2rem;
  border-radius: 1rem;
  background: rgb(255 255 255 / 0.06);
  border: 1px solid rgb(255 255 255 / 0.12);
  box-shadow: 0 20px 50px rgb(0 0 0 / 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.login-page-brand {
  display: flex;
  justify-content: center;
}
.login-page-logo {
  display: block;
  height: 2.25rem;
  width: auto;
  margin: 0 auto 1.25rem;
}
.login-page-logo--flow {
  height: 2.5rem;
  width: 2.5rem;
  filter: none;
}
.login-page-title {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: center;
}
.login-page-hint {
  margin: 0 0 1.75rem;
  font-size: 0.875rem;
  line-height: 1.5;
  text-align: center;
  color: rgb(203 213 225);
}
.login-page-hint--aside {
  margin: 0;
  text-align: left;
}
.login-page-actions {
  display: flex;
  justify-content: center;
  min-height: 2.5rem;
}
.login-page-footer {
  margin: 1.5rem 0 0;
  font-size: 0.75rem;
  text-align: center;
  color: rgb(148 163 184);
}
.login-page-error {
  margin: 0;
  font-size: 0.875rem;
  color: rgb(252 165 165);
  text-align: center;
}
.app-header-auth--standalone {
  flex-direction: column;
  width: 100%;
  max-width: none;
}
.app-header-auth--standalone .app-header-auth-btn {
  width: 100%;
  justify-content: center;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  border-radius: 0.5rem;
}
.app-header-auth--standalone .app-header-auth-btn--accent {
  border-color: rgb(96 165 250 / 0.7);
  background: linear-gradient(180deg, rgb(59 130 246 / 0.55) 0%, rgb(37 99 235 / 0.55) 100%);
  box-shadow: 0 6px 20px rgb(37 99 235 / 0.35);
}
.app-header-auth--standalone .app-header-auth-btn--accent:hover {
  background: linear-gradient(180deg, rgb(59 130 246 / 0.75) 0%, rgb(37 99 235 / 0.75) 100%);
}
.login-page-actions--stack {
  flex-direction: column;
  width: 100%;
  align-items: stretch;
  gap: 0.75rem;
}
.login-demo {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: 100%;
}
.login-demo-label {
  margin: 0;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgb(148 163 184);
  text-align: center;
}
.login-demo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.login-demo-seat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  padding: 0.65rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid rgb(255 255 255 / 0.18);
  background: rgb(255 255 255 / 0.06);
  color: #fff;
  cursor: pointer;
  text-align: left;
}
.login-demo-seat:hover:not(:disabled) {
  background: rgb(255 255 255 / 0.12);
}
.login-demo-seat:disabled {
  opacity: 0.6;
  cursor: wait;
}
.login-demo-seat strong {
  font-size: 0.8125rem;
  font-weight: 600;
}
.login-demo-seat span {
  font-size: 0.6875rem;
  color: rgb(203 213 225);
}
.login-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  color: rgb(148 163 184);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.login-divider::before,
.login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgb(255 255 255 / 0.15);
}
.login-email-toggle {
  width: 100%;
  justify-content: center;
  border-color: rgb(255 255 255 / 0.2);
  background: rgb(255 255 255 / 0.06);
  color: rgb(226 232 240);
}
.login-email-toggle:hover {
  background: rgb(255 255 255 / 0.1);
}
.login-email-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
}
.login-email-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  text-align: left;
}
.login-email-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: rgb(203 213 225);
}
.login-email-input {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid rgb(255 255 255 / 0.18);
  background: rgb(15 23 42 / 0.55);
  color: #fff;
  font-size: 0.875rem;
}
.login-email-input:focus {
  outline: 2px solid rgb(96 165 250 / 0.65);
  outline-offset: 1px;
}
.login-email-submit {
  width: 100%;
  justify-content: center;
  margin-top: 0.25rem;
}
.login-email-back {
  background: none;
  border: none;
  color: rgb(148 163 184);
  font-size: 0.8125rem;
  cursor: pointer;
  padding: 0.25rem;
  text-decoration: underline;
}

.view-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.35rem;
  color: var(--brand-deep);
  font-size: 0.72rem;
  font-weight: 780;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.view-eyebrow .material-icons {
  font-size: 0.95rem;
  letter-spacing: normal;
  text-transform: none;
}
.view-title {
  letter-spacing: -0.035em;
}
.view-subtitle {
  max-width: 48rem;
  line-height: 1.55;
}
/* Light variant once the person already has open cases: the composer
 * stops being the hero, so every white-on-navy color flips to ink. */
.home-composer--secondary {
  margin-top: 1.25rem;
  color: var(--text-primary);
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(0, 191, 154, 0.08), transparent 55%),
    white;
  box-shadow: 0 1px 2px rgba(0, 43, 73, 0.05);
}
.home-composer--secondary .home-composer-head .material-icons {
  background: var(--tint-brand);
  color: var(--brand-deep);
}
.home-composer--secondary .home-composer-head h2 {
  color: var(--brand-dark);
}
.home-composer--secondary .home-composer-head p {
  color: var(--text-secondary);
}
.home-composer--secondary .home-composer-row input {
  border: 1px solid var(--line-strong-alt);
  background: var(--surface-subtle);
}
.home-composer--secondary .home-composer-row input:focus-visible {
  outline: none;
  border-color: var(--brand-primary);
  background: white;
  box-shadow: 0 0 0 3px rgba(0, 191, 154, 0.16);
}
.home-composer--secondary .home-composer-chips button {
  background: var(--tint-brand-soft);
  border-color: var(--tint-brand-border);
  color: var(--brand-deepest);
}
.home-composer--secondary .home-composer-chips button:hover:not(:disabled) {
  background: var(--tint-brand);
  border-color: var(--brand-primary);
}
.home-composer--secondary .home-composer-match {
  box-shadow: none;
  background: var(--surface-subtle);
}
.status-pill--off {
  opacity: 0.65;
}

.flow-dashboard {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.flow-dashboard--embed {
  margin-bottom: 0.5rem;
}

.agent-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.75rem;
}
.stat-tile {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  min-height: 6.35rem;
  padding: 1rem 1.05rem;
  overflow: hidden;
  border: 1px solid #dfeaec;
  border-radius: 0.85rem;
  background: var(--surface-color);
  box-shadow: 0 0.15rem 0.55rem rgb(15 55 75 / 0.04);
  color: inherit;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.stat-tile::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 0.2rem;
  background: #8ba7ad;
}
.stat-tile--success::before {
  background: var(--brand-primary);
}
.stat-tile--warning::before {
  background: var(--warning);
}
.stat-tile--danger::before {
  background: #e75a63;
}
.stat-tile--info::before {
  background: var(--brand-light);
}
.stat-tile:hover {
  transform: translateY(-2px);
  border-color: #b9d8d6;
  box-shadow: 0 0.75rem 1.7rem rgb(15 55 75 / 0.1);
}
.stat-tile__icon {
  width: 2.65rem;
  height: 2.65rem;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  background: linear-gradient(135deg, #eff6ff, #ecfeff);
  color: var(--brand-dark);
}
.stat-tile__icon .material-icons {
  font-size: 1.35rem;
}
.stat-tile--danger .stat-tile__icon {
  background: linear-gradient(135deg, #fef2f2, #fee2e2);
  color: #b91c1c;
}
.stat-tile--success .stat-tile__icon {
  background: linear-gradient(135deg, #ecfdf5, #d1fae5);
  color: #047857;
}
.stat-tile--info .stat-tile__icon {
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  color: #1d4ed8;
}
.stat-tile--warning .stat-tile__icon {
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
  color: #b45309;
}
.stat-tile__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.stat-tile--interactive .stat-tile__body {
  padding-right: 1.15rem;
}
.stat-tile__label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.stat-tile__value {
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--brand-dark);
  line-height: 1.1;
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
}
.stat-tile--danger .stat-tile__value {
  font-size: 1.55rem;
  color: var(--error);
  overflow-wrap: normal;
  word-break: normal;
}
.stat-tile--success .stat-tile__value {
  color: #047857;
}
.stat-tile__hint {
  margin-top: 0.15rem;
  font-size: 0.68rem;
  color: var(--text-secondary);
}
.stat-tile--interactive {
  width: 100%;
  min-width: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.stat-tile--interactive:hover,
.stat-tile--interactive:focus-visible,
.stat-tile--interactive.is-selected {
  border-color: rgba(0, 191, 154, 0.55);
}
.stat-tile--interactive.is-selected {
  background: linear-gradient(145deg, #ffffff, #f0fdfa);
  box-shadow: 0 0 0 3px rgba(0, 191, 154, 0.18), 0 0.75rem 1.7rem rgb(15 55 75 / 0.1);
}
.stat-tile__drill-icon {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  font-size: 0.95rem;
  color: #94a3b8;
  opacity: 0;
}
.stat-tile--interactive:hover .stat-tile__drill-icon,
.stat-tile--interactive.is-selected .stat-tile__drill-icon {
  opacity: 1;
  color: #009f83;
}

.dashboard-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.75fr);
  align-items: center;
  gap: 2rem;
  min-height: 16rem;
  padding: clamp(1.4rem, 3vw, 2.3rem);
  border-radius: 24px;
  color: #fff;
  background:
    radial-gradient(circle at 75% 10%, rgb(0 191 154 / 0.22), transparent 30%),
    linear-gradient(125deg, #032b48 0%, #073b55 54%, #075464 100%);
  box-shadow: 0 24px 60px rgb(0 43 73 / 0.2);
}
.dashboard-hero--danger {
  background:
    radial-gradient(circle at 75% 10%, rgb(231 90 99 / 0.28), transparent 30%),
    linear-gradient(125deg, #3b1018 0%, #5a1a24 54%, #073b55 100%);
}
.dashboard-hero--warning {
  background:
    radial-gradient(circle at 75% 10%, rgb(245 158 11 / 0.24), transparent 30%),
    linear-gradient(125deg, #3a2a0c 0%, #073b55 100%);
}
.dashboard-hero--success {
  background:
    radial-gradient(circle at 75% 10%, rgb(0 191 154 / 0.3), transparent 28%),
    linear-gradient(125deg, #032b48 0%, #075c51 100%);
}
.dashboard-hero__glow {
  position: absolute;
  z-index: -1;
  width: 22rem;
  height: 22rem;
  right: -6rem;
  bottom: -14rem;
  border-radius: 50%;
  background: radial-gradient(circle, #00bf9a, transparent 70%);
  filter: blur(8px);
  opacity: 0.28;
}
.dashboard-hero__content {
  max-width: 46rem;
}
.dashboard-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.38rem 0.75rem 0.38rem 0.55rem;
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: 999px;
  color: #a7f3e7;
  background: rgb(255 255 255 / 0.08);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.dashboard-hero__eyebrow .material-icons {
  letter-spacing: normal;
  text-transform: none;
  font-size: 1rem;
}
.dashboard-hero h2 {
  max-width: 42rem;
  margin: 1rem 0 0;
  font-size: clamp(1.55rem, 3vw, 2.4rem);
  line-height: 1.08;
  letter-spacing: -0.045em;
}
.dashboard-hero__content > p {
  max-width: 38rem;
  margin: 0.75rem 0 0;
  color: rgb(226 242 247 / 0.75);
  font-size: 0.9rem;
}
.dashboard-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 1.25rem;
}
.dashboard-hero__button {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 1rem;
  border-radius: 10px;
  color: #003b42;
  background: #7ff4df;
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 750;
}
.dashboard-hero__sync {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: rgb(226 242 247 / 0.64);
  font-size: 0.7rem;
}
.dashboard-hero__sync i {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: #56e6bd;
}
.dashboard-hero__pulse {
  position: relative;
  min-height: 12rem;
  display: grid;
  place-items: center;
}
.dashboard-hero__ring {
  width: 10.5rem;
  height: 10.5rem;
  display: grid;
  place-content: center;
  text-align: center;
  border: 1px solid rgb(255 255 255 / 0.24);
  border-radius: 50%;
  background: rgb(255 255 255 / 0.08);
  box-shadow: 0 0 0 14px rgb(255 255 255 / 0.035), inset 0 1px 18px rgb(255 255 255 / 0.08);
}
.dashboard-hero__ring span {
  font-size: 3.1rem;
  font-weight: 800;
  letter-spacing: -0.07em;
}
.dashboard-hero__ring small {
  margin-top: 0.4rem;
  color: #a7f3e7;
  font-size: 0.64rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.dashboard-hero__mini {
  position: absolute;
  display: grid;
  padding: 0.65rem 0.8rem;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: 14px;
  background: rgb(3 43 72 / 0.66);
}
.dashboard-hero__mini--top {
  top: 0;
  right: 0;
}
.dashboard-hero__mini--bottom {
  left: 0;
  bottom: 0;
}
.dashboard-hero__mini b {
  font-size: 0.9rem;
}
.dashboard-hero__mini small {
  color: rgb(226 242 247 / 0.58);
  font-size: 0.6rem;
}
.dashboard-live-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
.dashboard-trend {
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 700;
}
.dashboard-section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 1rem;
}
.dashboard-section-head > div > span,
.dashboard-panel__eyebrow {
  display: block;
  color: #00a889;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.dashboard-section-head h3,
.dashboard-panel__head h3 {
  margin: 0.18rem 0 0;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}
.dashboard-section-head__note {
  color: #94a3b8;
  font-size: 0.68rem;
}
.dashboard-quality-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  overflow: hidden;
  border: 1px solid #e7edf3;
  border-radius: 16px;
  background: #fff;
}
.dashboard-quality-strip .stat-tile {
  min-height: 6.4rem;
  border: 0;
  border-right: 1px solid #edf2f7;
  border-radius: 0;
  box-shadow: none;
}
.dashboard-grid,
.dashboard-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.dashboard-panel {
  min-width: 0;
  padding: 1.15rem 1.2rem;
  border: 1px solid #dfeaec;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 26px rgb(15 51 72 / 0.05);
}
.dashboard-panel__head {
  margin-bottom: 0.85rem;
}
.dashboard-panel__head p {
  margin: 0.2rem 0 0;
  color: #8493a8;
  font-size: 0.7rem;
}
.dash-weeks {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
  gap: 0.35rem;
  min-height: 9rem;
}
.dash-week__cols {
  display: flex;
  align-items: end;
  gap: 3px;
  height: 7.5rem;
}
.dash-week__cols i,
.dash-week__cols b {
  display: block;
  flex: 1;
  min-height: 4px;
  border-radius: 4px 4px 0 0;
}
.dash-week__cols i {
  background: #00b6d6;
}
.dash-week__cols b {
  background: #00bf9a;
}
.dash-week small {
  display: block;
  margin-top: 0.3rem;
  color: #94a3b8;
  font-size: 0.58rem;
  text-align: center;
}
.dash-legend {
  display: flex;
  gap: 1rem;
  margin-top: 0.75rem;
  color: #64748b;
  font-size: 0.72rem;
}
.dash-swatch {
  display: inline-block;
  width: 0.65rem;
  height: 0.65rem;
  margin-right: 0.35rem;
  border-radius: 2px;
  vertical-align: -1px;
}
.dash-swatch--start {
  background: #00b6d6;
}
.dash-swatch--done {
  background: #00bf9a;
}
.dash-mix {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.dash-donut {
  width: 7.5rem;
  height: 7.5rem;
  flex-shrink: 0;
  border-radius: 50%;
  mask: radial-gradient(circle, transparent 48%, #000 50%);
}
.dash-mix-list,
.dash-ranks,
.dash-aging,
.dash-items,
.dash-activity {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dash-mix-list li,
.dash-items li a,
.dash-activity li {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid #edf2f2;
  color: inherit;
  text-decoration: none;
}
.dash-ranks li {
  position: relative;
  padding: 0.55rem 0 0.75rem;
}
.dash-ranks i,
.dash-aging i {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  border-radius: 99px;
  background: linear-gradient(90deg, #00b6d6, #00bf9a);
}
.dash-ranks strong,
.dash-items strong,
.dash-activity strong {
  display: block;
}
.dash-ranks span,
.dash-items span,
.dash-activity span {
  color: #8493a8;
  font-size: 0.75rem;
}
.dash-aging li {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 0.65rem 0 0.85rem;
}
.dash-team {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem;
}
.dash-team article {
  padding: 0.85rem;
  border: 1px solid #e7edf3;
  border-radius: 12px;
  background: #f8fffd;
}
.dash-team b {
  display: block;
  margin-top: 0.35rem;
  font-size: 1.4rem;
}
.dash-team small {
  color: #8493a8;
}
.dash-empty {
  color: #8493a8;
}
.dash-items a.is-late strong {
  color: var(--error);
}
.dashboard-agent-note {
  margin: 0;
  padding: 0.9rem 1rem;
  border-left: 3px solid var(--brand-primary);
  border-radius: 10px;
  background: var(--mint-bg);
  color: var(--mint-fg);
  font-size: 0.85rem;
}
.dashboard-sheet {
  padding: 1rem 1.15rem;
  border: 1px solid #dfeaec;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 16px 40px rgb(15 55 75 / 0.08);
}
.dashboard-sheet header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

@media (max-width: 960px) {
  .dashboard-hero,
  .dashboard-grid,
  .dashboard-split,
  .dashboard-kpi-grid {
    grid-template-columns: 1fr;
  }
  .dashboard-hero__pulse {
    min-height: 10rem;
  }
}

.notif-menu-trigger {
  position: relative;
}
.notif-badge {
  position: absolute;
  top: -0.2rem;
  right: -0.2rem;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.25rem;
  border-radius: 9999px;
  background: #d97706;
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.1rem;
  text-align: center;
  border: 2px solid rgb(15 23 42);
}
.notif-badge--danger {
  background: #dc2626;
}
.notif-menu-panel {
  width: 22rem;
  max-width: calc(100vw - 2rem);
  max-height: 70vh;
  overflow-y: auto;
  padding: 0.5rem;
}
.notif-empty {
  margin: 0.25rem 0.65rem 0.5rem;
  font-size: 0.8125rem;
  color: rgb(148 163 184);
}
.notif-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 0.6rem;
  padding: 0.65rem;
  border-radius: 10px;
  margin-bottom: 0.35rem;
}
.notif-item:last-child {
  margin-bottom: 0;
}
.notif-item--warning {
  background: rgb(217 119 6 / 0.14);
}
.notif-item--danger {
  background: rgb(220 38 38 / 0.16);
}
.notif-item-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 18px !important;
  flex-shrink: 0;
}
.notif-item--warning .notif-item-icon {
  color: #f59e0b;
}
.notif-item--danger .notif-item-icon {
  color: #f87171;
}
.notif-item-copy {
  min-width: 0;
}
.notif-item-copy strong {
  display: block;
  font-size: 0.8125rem;
  color: #fff;
}
.notif-item-copy p {
  margin: 0.15rem 0 0;
  font-size: 0.75rem;
  color: rgb(203 213 225);
}
.notif-item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
}
.join-fix-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid var(--line);
}
.join-card {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--line);
}
.join-card:last-child {
  border-bottom: 0;
}
.join-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}
.join-card__head h3 {
  margin: 0;
  font-size: 0.95rem;
}
.join-card__head p {
  margin: 0.15rem 0 0;
  color: var(--muted);
  font-size: 0.8125rem;
}
.join-leg {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-top: 1px solid var(--line);
}
.join-leg p {
  margin: 0.1rem 0 0;
  font-size: 0.8125rem;
  color: var(--muted);
}
.join-card__force {
  display: flex;
  gap: 0.4rem;
  padding-top: 0.65rem;
}
@media (max-width: 720px) {
  .join-fix-bar,
  .join-leg {
    grid-template-columns: 1fr;
    display: grid;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Depurador do canvas
   Executar um Fluxo tem que ser uma coisa que se VÊ: o passo aceso, a
   ligação que a execução escolheu, o ponto de parada que segurou. As
   cores de cada caminho em paralelo existem para que dois ramos
   não virem uma coisa só.
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --run-h0: #00bf9a;
  --run-h1: #7c5cff;
  --run-h2: #f5a524;
  --run-h3: #2f9bff;
  --run-h4: #ff5c9d;
  --run-h5: #7dd33f;
  --run-break: #ef4444;
  --run-wait: #f59e0b;
  --dock-bg: #0d1b26;
  --dock-line: #1e3341;
  --dock-fg: #cfe3ea;
  --dock-muted: #7d98a5;
}

.canvas-column {
  grid-template-rows: auto auto auto 1fr auto auto;
}
.canvas-wrap {
  grid-row: 4;
}
.dock {
  grid-row: 5;
}
.canvas-footer {
  grid-row: 6;
}

/* ── barra de controle flutuante ──────────────────────────────────── */
.canvas-overlay {
  position: absolute;
  z-index: 8;
  /* Centrado esticando de ponta a ponta, não com `left:50%`: ali a
   * largura disponível vira metade do canvas, e num telefone a barra do
   * depurador quebrava em três linhas por falta de espaço que existia. */
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-space-2);
  padding: 0 10px;
  pointer-events: none;
}
.canvas-overlay--top {
  top: 12px;
}
.assistant-pane.is-locked .step-palette,
.assistant-pane.is-locked .chat-input {
  opacity: 0.72;
}
.assistant-pane.is-locked {
  pointer-events: auto;
}
.canvas-footer .draft-state kbd {
  font-size: 0.6875rem;
}
.link-with-icon:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.detail-run-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.debug-lock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(9, 26, 37, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #cfe3ea;
  font-size: 0.6875rem;
  font-weight: 600;
}
.debug-lock .material-icons {
  font-size: 0.9375rem;
  color: var(--run-h2);
}
.debug-lock kbd {
  padding: 0 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.625rem;
}
.canvas-wrap.is-locked .node-handle {
  display: none;
}
.canvas-wrap.is-locked .node {
  cursor: pointer;
}
.details-lock {
  margin: 0 1.1rem 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--tint-warning);
  color: var(--warning-fg);
  font-size: 0.75rem;
  line-height: 1.4;
}
.details-body.is-locked > *:not(.detail-run-row) {
  opacity: 0.55;
  pointer-events: none;
}
.palette__item.is-off {
  opacity: 0.45;
  cursor: not-allowed;
}
.palette__item.is-off:hover,
.palette__item.is-off.is-active {
  background: transparent;
}
.ctx-item:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.canvas-title-input:disabled,
.code-inline-input:disabled,
.chat-input__prompt:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
.canvas-overlay > * {
  pointer-events: auto;
}
.debug-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 12px;
  border-radius: 999px;
  background: rgba(9, 26, 37, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 12px 34px rgba(0, 25, 40, 0.34);
  backdrop-filter: blur(9px);
  color: #e6f2f6;
  font-size: 0.75rem;
  animation: barIn 0.28s cubic-bezier(0.2, 0.9, 0.25, 1) both;
  max-width: min(96%, 900px);
}
@keyframes barIn {
  from {
    opacity: 0;
    transform: translateY(-12px) scale(0.96);
  }
}
.debug-bar__state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.debug-bar__pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--run-h0);
  box-shadow: 0 0 0 0 rgba(0, 191, 154, 0.6);
}
.debug-bar--running .debug-bar__pulse {
  animation: livePulse 1.15s ease-out infinite;
}
.debug-bar--paused .debug-bar__pulse {
  background: var(--run-wait);
}
.debug-bar--done .debug-bar__pulse {
  background: #62d0a8;
}
.debug-bar--stopped .debug-bar__pulse {
  background: var(--neutral);
}
@keyframes livePulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 191, 154, 0.55);
  }
  70% {
    box-shadow: 0 0 0 9px rgba(0, 191, 154, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 191, 154, 0);
  }
}
.debug-bar__where {
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #a9c6d1;
}
.debug-bar__sep {
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.14);
  margin: 0 2px;
}
.debug-btn {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  color: #e6f2f6;
  transition: background 0.15s ease, transform 0.15s ease;
}
.debug-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.16);
  transform: translateY(-1px);
}
.debug-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.debug-btn .material-icons {
  font-size: 1.05rem;
}
.debug-btn--go {
  background: var(--run-h0);
  color: #04231d;
}
.debug-btn--go:hover:not(:disabled) {
  background: #23d6b3;
}
.debug-btn--stop:hover {
  background: rgba(239, 68, 68, 0.85);
}
.debug-btn.is-on {
  background: rgba(0, 191, 154, 0.28);
  color: #7ff0d6;
  box-shadow: inset 0 0 0 1px rgba(0, 191, 154, 0.5);
}
.debug-bar__speed {
  height: 26px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: #e6f2f6;
  font-size: 0.6875rem;
  padding: 0 4px;
}
.debug-bar__speed option {
  color: var(--text-primary);
}
.debug-bar__meta {
  color: #93b2bf;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.debug-bar__legs {
  display: flex;
  gap: 4px;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
}
.leg-chip {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 700;
  white-space: nowrap;
  color: #04231d;
  background: var(--run-h0);
}
.leg-chip--h1 {
  background: var(--run-h1);
  color: #fff;
}
.leg-chip--h2 {
  background: var(--run-h2);
}
.leg-chip--h3 {
  background: var(--run-h3);
  color: #fff;
}
.leg-chip--h4 {
  background: var(--run-h4);
  color: #fff;
}
.leg-chip--h5 {
  background: var(--run-h5);
}
.leg-chip--more {
  background: rgba(255, 255, 255, 0.16);
  color: #e6f2f6;
}

/* ── faixa do caso real ───────────────────────────────────────────── */
.live-bar {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  padding: 5px 6px 5px 12px;
  border-radius: 999px;
  background: white;
  border: 1px solid var(--tint-brand-border);
  box-shadow: 0 10px 26px rgba(0, 43, 73, 0.14);
  font-size: 0.75rem;
  color: var(--brand-dark);
}
.live-bar__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--error);
  animation: livePulse 1.4s ease-out infinite;
}
.live-bar__where {
  color: var(--text-secondary);
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── estados de execução nos nós ──────────────────────────────────── */
.node {
  transition:
    box-shadow 0.22s ease,
    border-color 0.22s ease,
    transform 0.22s ease,
    opacity 0.3s ease,
    filter 0.3s ease;
}
.node-bp {
  position: absolute;
  left: -9px;
  top: 12px;
  z-index: 3;
  width: 14px;
  height: 14px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  background: white;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
.node:hover .node-bp,
.node-bp:focus-visible {
  opacity: 0.55;
}
.node-bp:hover {
  opacity: 1;
  transform: scale(1.15);
  border-color: var(--run-break);
}
.node-bp.is-set {
  opacity: 1;
  background: var(--run-break);
  border-color: #b91c1c;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18);
}
.node-bp.is-set.is-cond {
  background: #fff;
  border-color: var(--run-break);
  border-width: 4px;
}
.node-bp.is-set.is-off {
  background: #fff;
  border-color: #f4b4b4;
  box-shadow: none;
}
.node-flag {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--success-bg);
  color: var(--success-fg);
}
.node-flag .material-icons {
  font-size: 0.75rem;
}
.node-flag--live {
  background: var(--brand-primary);
  color: #04231d;
}
.node.sim-visited {
  border-color: #a9e3d3;
  background: linear-gradient(180deg, #fbfffe, #f4fdfa);
}
.node.sim-here {
  z-index: 4;
  transform: translateY(-2px) scale(1.02);
  border-color: var(--run-h0);
  box-shadow:
    0 0 0 2px var(--run-h0),
    0 0 0 8px rgba(0, 191, 154, 0.16),
    0 14px 32px rgba(0, 43, 73, 0.18);
  animation: hereIn 0.32s cubic-bezier(0.2, 0.9, 0.25, 1) both;
}
@keyframes hereIn {
  from {
    transform: translateY(2px) scale(0.97);
  }
}
.node.sim-here.sim-h1 {
  border-color: var(--run-h1);
  box-shadow:
    0 0 0 2px var(--run-h1),
    0 0 0 8px rgba(124, 92, 255, 0.16),
    0 14px 32px rgba(0, 43, 73, 0.18);
}
.node.sim-here.sim-h2 {
  border-color: var(--run-h2);
  box-shadow:
    0 0 0 2px var(--run-h2),
    0 0 0 8px rgba(245, 165, 36, 0.18),
    0 14px 32px rgba(0, 43, 73, 0.18);
}
.node.sim-here.sim-h3 {
  border-color: var(--run-h3);
  box-shadow:
    0 0 0 2px var(--run-h3),
    0 0 0 8px rgba(47, 155, 255, 0.16),
    0 14px 32px rgba(0, 43, 73, 0.18);
}
.node.sim-here.sim-h4 {
  border-color: var(--run-h4);
  box-shadow:
    0 0 0 2px var(--run-h4),
    0 0 0 8px rgba(255, 92, 157, 0.16),
    0 14px 32px rgba(0, 43, 73, 0.18);
}
.node.sim-here.sim-h5 {
  border-color: var(--run-h5);
  box-shadow:
    0 0 0 2px var(--run-h5),
    0 0 0 8px rgba(125, 211, 63, 0.18),
    0 14px 32px rgba(0, 43, 73, 0.18);
}
.node.sim-waiting {
  border-color: var(--run-wait);
  box-shadow:
    0 0 0 2px var(--run-wait),
    0 0 0 8px rgba(245, 158, 11, 0.16),
    0 14px 32px rgba(0, 43, 73, 0.18);
}
.node.sim-waiting .node-flag--live {
  background: var(--run-wait);
  color: #452a02;
}
.node.sim-break {
  border-color: var(--run-break);
  box-shadow:
    0 0 0 2px var(--run-break),
    0 0 0 10px rgba(239, 68, 68, 0.16),
    0 14px 32px rgba(0, 43, 73, 0.2);
  animation: breakPulse 1.1s ease-in-out infinite;
}
@keyframes breakPulse {
  0%,
  100% {
    box-shadow:
      0 0 0 2px var(--run-break),
      0 0 0 8px rgba(239, 68, 68, 0.14),
      0 14px 32px rgba(0, 43, 73, 0.2);
  }
  50% {
    box-shadow:
      0 0 0 2px var(--run-break),
      0 0 0 15px rgba(239, 68, 68, 0),
      0 14px 32px rgba(0, 43, 73, 0.2);
  }
}
.node.sim-cold {
  opacity: 0.42;
  filter: saturate(0.25);
}
/* varredura fina que corre pelo nó ativo - "isto está acontecendo agora" */
.node-scan {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}
.node-scan::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 42%;
  background: linear-gradient(
    100deg,
    transparent,
    rgba(255, 255, 255, 0.72),
    transparent
  );
  animation: scanSweep 1.6s linear infinite;
}
@keyframes scanSweep {
  from {
    transform: translateX(-140%);
  }
  to {
    transform: translateX(340%);
  }
}

/* ── ligações ─────────────────────────────────────────────────────── */
.edge {
  transition: stroke 0.25s ease, stroke-width 0.25s ease, opacity 0.3s ease;
}
.edge--hot {
  stroke: var(--brand-primary);
  stroke-width: 2.6;
}
.edge--live {
  stroke: var(--brand-primary);
  stroke-width: 3.4;
  stroke-dasharray: 9 7;
  animation: dash 0.55s linear infinite;
  filter: drop-shadow(0 0 5px rgba(0, 191, 154, 0.5));
}
.edge--cold {
  opacity: 0.3;
  stroke-dasharray: 4 6;
}
.edge-label.is-hot {
  fill: var(--brand-deep);
  font-weight: 700;
}
.flow-token__dot {
  fill: var(--run-h0);
}
.flow-token__halo {
  fill: var(--run-h0);
  opacity: 0.22;
  animation: haloBeat 0.7s ease-in-out infinite;
}
@keyframes haloBeat {
  50% {
    opacity: 0.06;
  }
}
.flow-token--h1 .flow-token__dot,
.flow-token--h1 .flow-token__halo {
  fill: var(--run-h1);
}
.flow-token--h2 .flow-token__dot,
.flow-token--h2 .flow-token__halo {
  fill: var(--run-h2);
}
.flow-token--h3 .flow-token__dot,
.flow-token--h3 .flow-token__halo {
  fill: var(--run-h3);
}
.flow-token--h4 .flow-token__dot,
.flow-token--h4 .flow-token__halo {
  fill: var(--run-h4);
}
.flow-token--h5 .flow-token__dot,
.flow-token--h5 .flow-token__halo {
  fill: var(--run-h5);
}

/* ── pergunta ancorada no nó parado ───────────────────────────────── */
.ask-anchor {
  position: absolute;
  z-index: 9;
  width: 278px;
}
.ask-anchor:has(.ask-card--http) {
  width: 420px;
}
.ask-card {
  border-radius: 13px;
  background: white;
  border: 1px solid var(--line-strong-alt);
  box-shadow: 0 18px 44px rgba(0, 30, 50, 0.2);
  padding: var(--ds-space-4);
  animation: askIn 0.26s cubic-bezier(0.2, 0.9, 0.25, 1) both;
}
.ask-card--http {
  width: 420px;
}
@keyframes askIn {
  from {
    opacity: 0;
    transform: translateX(-10px) scale(0.97);
  }
}
.ask-card::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 34px;
  width: 12px;
  height: 12px;
  transform: rotate(45deg);
  background: white;
  border-left: 1px solid var(--line-strong-alt);
  border-bottom: 1px solid var(--line-strong-alt);
}
.ask-card__instruction {
  margin: 0 0 var(--ds-space-3);
  color: var(--text-secondary);
  font-size: 0.875rem;
  line-height: 1.45;
}
.property-group .assignee-sub {
  margin-top: 8px;
}
.ask-card__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: var(--ds-space-3);
}
.ask-card__head strong {
  color: var(--brand-dark);
  font-size: 0.875rem;
  line-height: 1.3;
}
.ask-card__kind {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  padding: 2px 8px 2px 5px;
  border-radius: 999px;
  background: var(--tint-warning);
  color: var(--warning-fg);
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.ask-card__kind .material-icons {
  font-size: 0.875rem;
}
.ask-card__kind--system {
  background: #e7f2ff;
  color: #1b4f8a;
}
.ask-card__kind--subflow {
  background: #f1ecff;
  color: #4b32a8;
}
.ask-card__call {
  display: block;
  padding: 6px 8px;
  margin-bottom: var(--ds-space-3);
  border-radius: 7px;
  background: var(--surface-sunken);
  color: var(--brand-deepest);
  font-size: 0.6875rem;
  word-break: break-all;
}
.ask-card__fields {
  display: grid;
  gap: 6px;
  margin-bottom: var(--ds-space-3);
}
.ask-card__fields label {
  display: grid;
  gap: 3px;
  font-size: 0.6875rem;
  color: var(--text-secondary);
}
.ask-card__fields input {
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--line-strong-alt);
  border-radius: 7px;
}
.ask-card__choices {
  display: grid;
  gap: 6px;
}
.ask-choice {
  display: grid;
  gap: 1px;
  text-align: left;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--line-strong-alt);
  background: white;
  color: var(--brand-dark);
  font-size: 0.75rem;
  font-weight: 600;
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.ask-choice:hover {
  transform: translateX(2px);
}
.ask-choice em {
  font-style: normal;
  font-weight: 400;
  font-size: 0.625rem;
  line-height: 1.35;
  white-space: normal;
  color: var(--text-secondary);
}
.ask-choice--ok:hover {
  border-color: var(--brand-primary);
  background: var(--tint-brand);
}
.ask-choice--error:hover {
  border-color: var(--error);
  background: var(--tint-error);
}
.ask-choice--warn:hover {
  border-color: var(--warning);
  background: var(--tint-warning);
}

/* ── rehearsal: a real (or pasted) response inside the wait card ─── */
.ask-card__rehearse {
  margin-bottom: var(--ds-space-3);
  padding-top: var(--ds-space-2);
  border-top: 1px dashed var(--line-strong-alt);
}
.ask-card__fetch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--tint-brand-border);
  background: var(--tint-brand);
  color: var(--brand-deep);
  font-size: 0.75rem;
  font-weight: 700;
}
.ask-card__fetch:hover:not(:disabled) {
  background: var(--tint-brand-strong);
}
.ask-card__fetch:disabled {
  opacity: 0.7;
  cursor: wait;
}
.ask-card__fetch .material-icons {
  font-size: 1rem;
}
.ask-card__fetch:disabled .material-icons {
  animation: spin 0.8s linear infinite;
}
.ask-card__blocked {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  padding: 7px 9px;
  border-radius: 8px;
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font-size: 0.6875rem;
  line-height: 1.4;
}
.ask-card__blocked .material-icons {
  font-size: 0.9375rem;
  flex: 0 0 auto;
}
.ask-card__error {
  margin: 6px 0 0;
  color: var(--error-fg);
  font-size: 0.6875rem;
}
.ask-card__paste-toggle {
  display: block;
  margin-top: 6px;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.6875rem;
  text-decoration: underline;
  padding: 0;
}
.ask-card__paste-toggle:hover {
  color: var(--brand-deep);
}
.ask-card__paste {
  margin-top: 6px;
  display: grid;
  gap: 6px;
}
.ask-card__paste textarea {
  width: 100%;
  border-radius: 7px;
  border: 1px solid var(--line-strong-alt);
  padding: 6px 8px;
  font-size: 0.6875rem;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}
.ask-card__resp-head {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 6px;
  color: var(--success-fg);
  font-size: 0.6875rem;
  font-weight: 700;
}
.ask-card__resp-head .material-icons {
  font-size: 0.9375rem;
}
.ask-card__resp-again {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font-weight: 400;
  font-size: 0.625rem;
  text-decoration: underline;
  padding: 0;
}
.ask-card__resp {
  max-height: 160px;
  overflow: auto;
  margin: 0;
  padding: 8px;
  border-radius: 7px;
  background: var(--brand-dark);
  color: #d7f5ec;
  font-size: 0.625rem;
  line-height: 1.5;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  white-space: pre-wrap;
  word-break: break-word;
}
.ask-card__resp-map {
  margin: 6px 0 0;
  font-size: 0.6875rem;
  color: var(--text-secondary);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.ask-card__resp-map code {
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--tint-brand);
  color: var(--brand-deep);
  font-size: 0.625rem;
}
.ask-card__rehearse .ask-card__choices {
  margin-top: var(--ds-space-2);
}
.ask-card__foot {
  margin: var(--ds-space-3) 0 0;
  font-size: 0.625rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* ── mapa ─────────────────────────────────────────────────────────── */
.minimap {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 7;
  width: 190px;
  height: 122px;
  padding: 6px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--line);
  box-shadow: 0 8px 22px rgba(0, 43, 73, 0.12);
  backdrop-filter: blur(6px);
}
/* A pergunta ancorada tem que ganhar do mapa: o mapa é orientação, a
 * pergunta é o que trava a execução. */
.canvas-wrap.is-asking .minimap {
  opacity: 0;
  pointer-events: none;
}
.minimap {
  transition: opacity 0.2s ease;
}
.minimap svg {
  width: 100%;
  height: 100%;
  cursor: pointer;
  display: block;
}
.mini-edge {
  stroke: #c3d2d7;
  stroke-width: 6;
}
.mini-node {
  fill: #cfe0e5;
}
.mini-node.is-visited {
  fill: #8fd9c6;
}
.mini-node.is-active {
  fill: var(--brand-primary);
}
.mini-view {
  fill: rgba(0, 191, 154, 0.1);
  stroke: var(--brand-primary);
  stroke-width: 6;
}

/* ── dock inferior ────────────────────────────────────────────────── */
.dock {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--dock-bg);
  color: var(--dock-fg);
  border-top: 1px solid var(--dock-line);
  position: relative;
}
.dock-grip {
  position: absolute;
  top: -3px;
  left: 0;
  right: 0;
  height: 7px;
  cursor: ns-resize;
  z-index: 2;
}
.dock-grip:hover {
  background: linear-gradient(180deg, transparent, rgba(0, 191, 154, 0.4));
}
.dock-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 8px;
  border-bottom: 1px solid transparent;
  flex: 0 0 auto;
}
.dock.is-open .dock-tabs {
  border-bottom-color: var(--dock-line);
}
.dock-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--dock-muted);
  font-size: 0.75rem;
  font-weight: 600;
  transition: background 0.15s ease, color 0.15s ease;
}
.dock-tab:hover {
  color: var(--dock-fg);
  background: rgba(255, 255, 255, 0.05);
}
.dock-tab.is-active {
  color: #fff;
  background: rgba(0, 191, 154, 0.16);
  box-shadow: inset 0 -2px 0 var(--brand-primary);
}
.dock-tab .material-icons {
  font-size: 1rem;
}
.dock-badge {
  min-width: 17px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 0.625rem;
  line-height: 17px;
  text-align: center;
}
.dock-spacer {
  flex: 1;
}
.dock-hint {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.6875rem;
  color: var(--dock-muted);
  margin-right: var(--ds-space-2);
}
.dock-hint .material-icons {
  font-size: 0.9375rem;
}
.dock-hint--error {
  color: #ff9b9b;
}
.dock .app-btn--ghost {
  color: var(--dock-muted);
  border-color: transparent;
  background: transparent;
}
.dock .app-btn--ghost:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
.dock-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.dock-empty {
  height: 100%;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  color: var(--dock-muted);
  padding: var(--ds-space-5);
  text-align: center;
}
.dock-empty .material-icons {
  font-size: 1.75rem;
  opacity: 0.5;
}
.dock-empty p {
  margin: 0;
  font-size: 0.75rem;
  max-width: 380px;
}
.dock-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: var(--ds-space-3) var(--ds-space-4);
  color: var(--dock-muted);
  font-size: 0.6875rem;
}
.dock-note .material-icons {
  font-size: 0.9375rem;
  color: var(--run-h2);
}

/* execução */
.trace-list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  font-size: 0.75rem;
}
.trace-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 12px;
  cursor: pointer;
  border-left: 2px solid transparent;
  animation: traceIn 0.24s ease both;
}
.trace-row__main {
  display: grid;
  grid-template-columns: 52px 20px 1fr auto;
  align-items: baseline;
  gap: 8px;
}
.trace-row--http {
  align-items: stretch;
}
.trace-row .http-ex {
  margin-left: 80px;
}
@keyframes traceIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}
.trace-row:hover {
  background: rgba(255, 255, 255, 0.05);
  border-left-color: var(--brand-primary);
}
.trace-time {
  color: #4f6b78;
  font-variant-numeric: tabular-nums;
  font-size: 0.6875rem;
  text-align: right;
}
.trace-icon {
  font-size: 0.9375rem !important;
  color: var(--dock-muted);
  align-self: center;
}
.trace-icon--ok {
  color: #4fd6b0;
}
.trace-icon--warn {
  color: var(--run-h2);
}
.trace-icon--error {
  color: #ff8080;
}
.trace-msg {
  color: var(--dock-fg);
  line-height: 1.45;
}
.trace-detail {
  display: block;
  font-style: normal;
  color: var(--dock-muted);
  font-size: 0.6875rem;
}
.trace-row--warn .trace-msg {
  color: #ffd79a;
}
.trace-row--error .trace-msg {
  color: #ffb3b3;
}
.trace-row--ok .trace-msg {
  color: #b6f2df;
}
.trace-token {
  color: #4f6b78;
  font-size: 0.625rem;
  white-space: nowrap;
}

/* variáveis */
.vars-pane {
  padding: var(--ds-space-2) 0;
}
.vars-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
}
.vars-table th {
  text-align: left;
  padding: 6px 12px;
  color: var(--dock-muted);
  font-weight: 600;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--dock-line);
}
.vars-table td {
  padding: 4px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.vars-table code {
  color: #7fd8f5;
}
.vars-table input {
  width: 100%;
  max-width: 320px;
  height: 26px;
  padding: 0 7px;
  border-radius: 6px;
  border: 1px solid var(--dock-line);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 0.75rem;
}
.vars-table input:focus-visible {
  outline: none;
  border-color: var(--brand-primary);
  background: rgba(0, 191, 154, 0.09);
}
.vars-ro {
  color: var(--dock-fg);
}

/* problemas */
.problem-list,
.bp-list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  font-size: 0.75rem;
}
.problem-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-3);
  padding: 8px 12px;
  border-bottom: 1px solid var(--dock-line);
  color: var(--dock-muted);
  font-size: 0.6875rem;
}
.problem-agent {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0, 191, 154, 0.4);
  background: rgba(0, 191, 154, 0.12);
  color: #7ff0d6;
  font-size: 0.6875rem;
  font-weight: 600;
  white-space: nowrap;
}
.problem-agent:hover {
  background: rgba(0, 191, 154, 0.22);
}
.problem-agent .material-icons {
  font-size: 0.9375rem;
}
.problem-fix {
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--dock-line);
  background: rgba(255, 255, 255, 0.07);
  color: var(--dock-fg);
  font-size: 0.6875rem;
  font-weight: 600;
  white-space: nowrap;
}
.problem-fix:hover {
  background: rgba(0, 191, 154, 0.22);
  border-color: rgba(0, 191, 154, 0.5);
  color: #fff;
}
.problem-row {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 7px 12px;
  cursor: pointer;
  border-left: 2px solid transparent;
}
.problem-row > span:nth-of-type(2) {
  flex: 1;
}
.problem-row:hover {
  background: rgba(255, 255, 255, 0.05);
}
.problem-row .material-icons {
  font-size: 1rem;
}
.problem-row--error {
  border-left-color: #ff6b6b;
}
.problem-row--error .material-icons {
  color: #ff8080;
}
.problem-row--warn {
  border-left-color: var(--run-h2);
}
.problem-row--warn .material-icons {
  color: var(--run-h2);
}
.problem-node {
  color: var(--dock-muted);
  font-size: 0.6875rem;
  white-space: nowrap;
}

/* pontos de parada */
.bp-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
}
.bp-row.is-off {
  opacity: 0.55;
}
.bp-dot {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 2px solid #7d3b3b;
  background: transparent;
  padding: 0;
}
.bp-dot.is-on {
  background: var(--run-break);
  border-color: var(--run-break);
}
.bp-name {
  border: 0;
  background: transparent;
  color: var(--dock-fg);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0;
  text-align: left;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bp-name:hover {
  color: #fff;
  text-decoration: underline;
}
.bp-cond {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--dock-muted);
  font-size: 0.6875rem;
}
.bp-cond select,
.bp-cond input {
  height: 24px;
  border-radius: 6px;
  border: 1px solid var(--dock-line);
  background: rgba(255, 255, 255, 0.05);
  color: var(--dock-fg);
  font-size: 0.6875rem;
  padding: 0 5px;
  max-width: 110px;
}
.bp-cond option {
  color: var(--text-primary);
}

/* ── barra de ferramentas: novos chips ────────────────────────────── */
.run-chip {
  border-color: var(--tint-brand-border);
  background: var(--tint-brand);
  color: var(--brand-deep);
  font-weight: 600;
}
.run-chip:hover {
  background: var(--tint-brand-strong);
}
.bp-chip.has-bp {
  color: var(--run-break);
}
.problem-chip {
  color: var(--warning-fg);
}
.problem-chip.is-error {
  color: var(--error-fg);
}
.kbd-chip {
  color: var(--text-secondary);
  gap: 5px;
}
.kbd-chip kbd,
.palette kbd,
.ctx-item kbd,
.shortcuts kbd {
  padding: 1px 5px;
  border-radius: 5px;
  border: 1px solid var(--line-strong-alt);
  background: var(--surface-muted);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.625rem;
  font-weight: 600;
}
.app-btn--icon.is-on {
  color: var(--brand-deep);
  background: var(--tint-brand);
}

/* ── paleta de comandos ───────────────────────────────────────────── */
.palette-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  justify-items: center;
  align-items: start;
  padding-top: 12vh;
  background: rgba(0, 30, 48, 0.42);
  backdrop-filter: blur(3px);
}
.palette {
  width: min(620px, 92vw);
  max-height: 66vh;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  background: white;
  box-shadow: 0 30px 80px rgba(0, 20, 40, 0.34);
  overflow: hidden;
  animation: paletteIn 0.2s cubic-bezier(0.2, 0.9, 0.25, 1) both;
}
@keyframes paletteIn {
  from {
    opacity: 0;
    transform: translateY(-14px) scale(0.98);
  }
}
.palette__input {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.palette__input .material-icons {
  color: var(--text-secondary);
}
.palette__input input {
  flex: 1;
  border: 0;
  outline: none;
  font-size: 0.9375rem;
  color: var(--brand-dark);
}
.palette__list {
  list-style: none;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
}
.palette__group {
  padding: 8px 10px 4px;
  color: var(--text-secondary);
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.palette__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 9px;
  cursor: pointer;
  color: var(--brand-dark);
  font-size: 0.8125rem;
}
.palette__item .material-icons {
  color: var(--text-secondary);
  font-size: 1.125rem;
}
.palette__item.is-active {
  background: var(--tint-brand);
}
.palette__item.is-active .material-icons {
  color: var(--brand-deep);
}
.palette__label {
  flex: 1;
  display: grid;
}
.palette__label em {
  font-style: normal;
  color: var(--text-secondary);
  font-size: 0.6875rem;
}
.palette__empty {
  padding: 18px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.8125rem;
}

/* ── menu de contexto ─────────────────────────────────────────────── */
.ctx-backdrop {
  position: fixed;
  inset: 0;
  z-index: 85;
}
.ctx-menu {
  position: fixed;
  min-width: 214px;
  padding: 5px;
  border-radius: 11px;
  background: white;
  border: 1px solid var(--line);
  box-shadow: 0 18px 44px rgba(0, 25, 45, 0.22);
  animation: paletteIn 0.14s ease both;
}
.ctx-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--brand-dark);
  font-size: 0.8125rem;
  text-align: left;
}
.ctx-item kbd {
  margin-left: auto;
}
.ctx-item .material-icons {
  font-size: 1.0625rem;
  color: var(--text-secondary);
}
.ctx-item:hover {
  background: var(--tint-brand);
}
.ctx-item.is-danger:hover {
  background: var(--tint-error);
  color: var(--error-fg);
}
.ctx-item.is-danger:hover .material-icons {
  color: var(--error-fg);
}

/* ── folha de atalhos ─────────────────────────────────────────────── */
.shortcuts__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--ds-space-5);
  margin-top: var(--ds-space-4);
}
.shortcuts__cols ul {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.shortcuts__cols li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.8125rem;
  color: var(--text-primary);
}
.shortcuts__cols kbd {
  min-width: 62px;
  text-align: center;
}

/* ── folha de simulação ───────────────────────────────────────────── */
.launch__head {
  display: flex;
  gap: var(--ds-space-4);
  align-items: flex-start;
}
.launch__icon {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--tint-brand);
  color: var(--brand-deep);
}
.launch__head p {
  margin: 5px 0 0;
  font-size: 0.8125rem;
}
.launch__fields {
  margin-top: var(--ds-space-5);
}
.launch__extra {
  margin-top: var(--ds-space-4);
  font-size: 0.8125rem;
  color: var(--text-secondary);
}
.launch__extra summary {
  cursor: pointer;
}
.launch__extra textarea {
  width: 100%;
  margin-top: 6px;
  border-radius: 8px;
  border: 1px solid var(--line-strong-alt);
  padding: 8px;
}
.launch__warn {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: var(--ds-space-4);
  padding: var(--ds-space-3);
  border-radius: 9px;
  background: var(--tint-warning);
  color: var(--warning-fg);
  font-size: 0.75rem;
  line-height: 1.45;
}
.launch__warn .material-icons {
  font-size: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  .node-scan::after,
  .debug-bar__pulse,
  .live-bar__dot,
  .edge--live,
  .node.sim-break,
  .flow-token__halo {
    animation: none;
  }
  .debug-bar,
  .ask-card,
  .palette,
  .ctx-menu,
  .trace-row,
  .node.sim-here {
    animation: none;
  }
}

/* Depuração dentro das propriedades da etapa - o caminho de quem não
 * descobriu a bolinha do ponto de parada no próprio nó. */
.detail-run-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--ds-space-4);
}
.detail-run-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--line-strong-alt);
  background: white;
  color: var(--text-secondary);
  font-size: 0.6875rem;
  font-weight: 600;
}
.detail-run-btn:hover {
  border-color: var(--brand-primary);
  color: var(--brand-deep);
}
.detail-run-btn .material-icons {
  font-size: 0.9375rem;
}
.detail-run-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
}
.detail-run-btn.is-on {
  border-color: var(--run-break);
  color: var(--error-fg);
  background: var(--tint-error);
}
.detail-run-btn.is-on .detail-run-dot {
  background: var(--run-break);
  border-color: var(--run-break);
}

/* ── inspetor de etapa (bindings, REST, tabelas) ─────────────────── */
.insp-section {
  margin: 0 0 0.75rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-subtle, #f8fafc);
  overflow: hidden;
}
.insp-section > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--brand-dark);
  list-style: none;
}
.insp-section > summary::-webkit-details-marker {
  display: none;
}
.insp-section > summary .material-icons {
  font-size: 1rem;
  color: var(--brand-light);
}
.insp-section[open] > summary {
  border-bottom: 1px solid var(--line);
  background: white;
}
.insp-section > *:not(summary) {
  padding: 10px;
  background: white;
}
.insp-count {
  margin-left: auto;
  min-width: 16px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--tint-brand);
  color: var(--brand-deep);
  font-size: 0.625rem;
  line-height: 16px;
  text-align: center;
}
.insp-toggle {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.bind-field {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
.bind-field input,
.bind-field textarea {
  flex: 1;
  min-width: 0;
  width: auto;
  border: 1px solid var(--line-strong-alt);
  border-radius: 7px;
  min-height: 35px;
  padding: 0 9px;
  color: var(--text-primary);
  background: white;
  font: inherit;
}
.bind-field textarea {
  padding: 9px;
  resize: vertical;
}
.bind-field--stack {
  flex-wrap: wrap;
}
.bind-field--stack .bind-bolt {
  position: absolute;
  top: 6px;
  right: 6px;
}
.bind-bolt {
  flex: none;
  width: 35px;
  border: 1px solid var(--line-strong-alt);
  border-radius: 7px;
  background: white;
  color: var(--brand-primary);
  display: grid;
  place-items: center;
}
.bind-bolt .material-icons {
  font-size: 1.05rem;
}
.bind-bolt:hover,
.bind-bolt.is-on {
  background: var(--tint-brand);
  border-color: var(--brand-primary);
  color: var(--brand-deep);
}
.bind-chip {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 35px;
  padding: 0 8px;
  border-radius: 7px;
  border: 1px solid var(--tint-brand-border, #b7e6dc);
  background: var(--tint-brand);
  color: var(--brand-deep);
  font-size: 0.75rem;
  font-weight: 700;
  text-align: left;
}
.bind-chip .material-icons {
  font-size: 0.95rem;
}
.bind-chip-x {
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 99px;
  color: var(--text-secondary);
}
.bind-chip-x:hover {
  background: white;
  color: var(--error-fg);
}
.bind-chip-x .material-icons {
  font-size: 0.85rem;
}

.bind-menu {
  position: fixed;
  z-index: 40;
  max-height: 280px;
  overflow: auto;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid var(--line-strong-alt);
  background: white;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
}
.bind-menu-search {
  width: 100%;
  min-height: 32px;
  margin-bottom: 6px;
  padding: 0 8px;
  border: 1px solid var(--line-strong-alt);
  border-radius: 7px;
  font: inherit;
  font-size: 0.75rem;
}
.bind-menu-empty {
  margin: 8px 4px;
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.45;
}
.bind-menu-label {
  margin: 8px 4px 4px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.bind-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  text-align: left;
  color: var(--text-primary);
}
.bind-menu-item:hover {
  background: var(--tint-brand);
}
.bind-menu-item .material-icons {
  font-size: 1rem;
  color: var(--brand-light);
}
.bind-menu-item strong {
  display: block;
  font-size: 0.8125rem;
}
.bind-menu-item em {
  display: block;
  font-size: 0.6875rem;
  font-style: normal;
  color: var(--text-secondary);
}

.vault-bolt {
  width: 100%;
  justify-content: center;
  gap: 6px;
}
.vault-chip {
  background: var(--success-bg, #ecfdf5);
  border-color: var(--success, #059669);
  color: var(--success, #059669);
}
.vault-menu {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vault-new {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}
.vault-new input {
  width: 100%;
}

.kv-table {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kv-row {
  display: grid;
  grid-template-columns: minmax(72px, 0.9fr) minmax(0, 1.3fr) 32px;
  gap: 6px;
  align-items: start;
}
.kv-name,
.kv-row input {
  width: 100%;
  min-height: 35px;
  padding: 0 8px;
  border: 1px solid var(--line-strong-alt);
  border-radius: 7px;
  font: inherit;
  font-size: 0.8125rem;
}
.kv-name--locked {
  display: flex;
  align-items: center;
  background: var(--surface-subtle, #f8fafc);
  color: var(--brand-dark);
  font-size: 0.75rem;
  font-weight: 700;
}
.kv-empty {
  margin: 0 0 6px;
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.45;
}

.form-schema {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form-schema-row {
  border: 1px solid var(--line-strong-alt);
  border-radius: 8px;
  padding: 8px;
  background: var(--surface-subtle, #f8fafc);
}
.form-schema-row__main {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 32px;
  gap: 6px;
  align-items: start;
}
.form-schema-row__main input,
.form-schema-row__main select {
  width: 100%;
  min-height: 35px;
  padding: 0 8px;
  border: 1px solid var(--line-strong-alt);
  border-radius: 7px;
  font: inherit;
  font-size: 0.8125rem;
  background: white;
}
.form-schema-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.form-schema-check input,
.form-field-check input,
.property-group input[type='checkbox'],
.property-group input[type='radio'] {
  width: auto;
  min-height: 0;
  height: auto;
}
.form-schema-extra,
.form-schema-help {
  margin-top: 6px;
}
.form-schema-extra textarea,
.form-schema-extra input,
.form-schema-help {
  width: 100%;
  border: 1px solid var(--line-strong-alt);
  border-radius: 7px;
  padding: 8px;
  font: inherit;
  font-size: 0.8125rem;
  background: white;
}
.form-file {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 38px;
  padding: 3px 10px 3px 3px;
  border: 1px solid var(--line-strong-alt);
  border-radius: 7px;
  background: white;
}
.form-file:focus-within {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(0, 191, 154, 0.16);
}
.form-file__pick {
  flex: none;
}
.form-file input[type='file'] {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  box-shadow: none;
}
.form-file input[type='file']:focus-visible {
  outline: none;
  border: 0;
  box-shadow: none;
}
.form-file__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
}
.form-file__name.is-set {
  color: var(--text-primary);
}
.form-field-help {
  margin: 4px 0 0;
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.4;
}
.form-field-check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  font-weight: 600;
  color: var(--text-secondary);
}
.form-field-choices {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.form-field-affix {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--line-strong-alt);
  border-radius: 7px;
  background: white;
  overflow: hidden;
}
.form-field-affix span {
  display: flex;
  align-items: center;
  padding: 0 10px;
  background: var(--surface-subtle, #f8fafc);
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 700;
}
.form-field-affix input {
  border: 0;
  min-height: 35px;
  border-radius: 0;
}
.ask-card__fields .property-group {
  margin-bottom: 0;
}
.ask-card__fields textarea {
  height: auto;
  min-height: 64px;
}
.ask-card__fields input[type='checkbox'],
.ask-card__fields input[type='radio'] {
  height: auto;
  width: auto;
}
.hint-card--warn {
  background: var(--tint-warning, #fff7ed);
  color: var(--warning-fg, #9a3412);
}
/* `.field-hint` era usada em dez lugares sem regra base, herdando o
 * tamanho do corpo. É uma legenda de campo, não um parágrafo. */
.field-hint {
  margin: 4px 0 0;
  color: var(--text-secondary);
  font-size: 0.75rem;
  line-height: 1.45;
}
.hint-card code,
.field-hint code {
  font-size: 0.75em;
  padding: 1px 4px;
  border-radius: 4px;
  background: var(--surface-muted, #eef2f6);
}
.hint-sample {
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--surface-muted, #eef2f6);
  font-size: 0.75rem;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow: auto;
}
.assignee-sub {
  margin-top: 8px;
}
.wait-ttl {
  display: flex;
  gap: 8px;
  align-items: center;
}
.wait-ttl input {
  width: 5.5rem;
  flex: 0 0 5.5rem;
}
.wait-ttl select {
  flex: 1;
}
.portal-instruction {
  margin: 0 0 16px;
  padding: 0 1.25rem;
  color: var(--text-secondary);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.portal-readonly {
  margin: 0;
  padding: 0 1.25rem;
}
.portal-readonly div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.875rem;
}
.portal-readonly dt {
  color: var(--text-secondary);
}
.portal-readonly dd {
  margin: 0;
  color: var(--brand-dark);
  font-weight: 600;
  text-align: right;
}
.portal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.portal-once {
  margin: 12px 0 0;
  color: var(--text-secondary);
  font-size: 0.75rem;
}

/* ═══════════════════════════════════════════════════════════════════
   IDE em tela pequena
   Num telefone o canvas é a tela - não cabe dividi-la em três colunas.
   As duas laterais viram gavetas sobre o canvas (o painel de
   propriedades já era uma, abaixo de 1100px), e as barras que não
   cabem rolam na horizontal em vez de esticar a coluna.

   Este bloco vive no fim do arquivo de propósito: `.canvas-column,
   .assistant-pane, .details-pane { min-height: 0 }` lá em cima anulava,
   por ordem, qualquer regra de mesma especificidade escrita antes dele.
   ═══════════════════════════════════════════════════════════════════ */
/* O véu atrás da gaveta. Fica ANTES do @media que o liga: uma regra de
   mesma especificidade escrita depois venceria por ordem e o véu nunca
   apareceria. Sem layout de gaveta ele não existe - senão viraria uma
   célula solta na grade de três colunas do desktop. */
.builder-scrim {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 20;
  border: 0;
  padding: 0;
  background: rgba(0, 30, 48, 0.32);
  cursor: pointer;
}

@media (max-width: 900px) {
  /* Uma coluna só: o canvas. `.builder.has-details` / `.builder.has-arch`
     (mais classes) ganhavam de `.builder` e reimpunham 340px+360px numa
     tela de 375px, jogando o canvas para fora e recortando o painel. */
  .builder,
  .builder.has-details,
  .builder.has-arch,
  .builder.has-arch.has-details {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    position: relative;
    overflow: hidden;
  }

  .assistant-pane {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 30;
    width: min(330px, 88vw);
    border-right: 1px solid var(--line);
    box-shadow: 12px 0 28px rgba(15, 23, 42, 0.14);
    transform: translateX(-100%);
    transition: transform 0.2s ease-out;
  }
  .assistant-pane.is-open {
    transform: translateX(0);
  }

  /* Propriedades e o inspetor de execução viram uma folha de baixo, não
     uma gaveta lateral: numa pausa do depurador a gaveta cobria o canvas
     inteiro e a pessoa perdia justamente a etapa acesa que foi ver. A
     folha deixa o canvas à mostra em cima e ainda dá largura cheia aos
     campos do formulário. */
  .builder.has-details .details-pane,
  .details-pane {
    position: absolute;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 30;
    width: auto;
    height: min(58%, 460px);
    border-top: 1px solid var(--line);
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -14px 30px rgba(15, 23, 42, 0.16);
  }

  .builder-scrim {
    display: block;
  }

  /* Barras: rolam em vez de esticar a coluna. */
  .canvas-titlebar {
    flex-wrap: wrap;
    row-gap: var(--ds-space-2);
    padding: var(--ds-space-3) var(--ds-space-4);
  }
  .canvas-titlebar > div:first-child {
    flex: 1 1 100%;
  }
  .canvas-titlebar .header-actions {
    flex: 1 1 100%;
    /* Uma faixa que rola, não duas linhas de botões: o título já custa
       uma linha, e o canvas é o que a pessoa veio ver. E alinhada ao
       INÍCIO: com `justify-content: flex-end` (o padrão desta classe) o
       excesso transborda para a esquerda, fora do alcance da rolagem -
       o botão "Montar", que é a única porta para a paleta no telefone,
       simplesmente não dava para alcançar. */
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .canvas-titlebar .header-actions > * {
    flex: 0 0 auto;
  }
  .canvas-titlebar .header-actions::-webkit-scrollbar {
    display: none;
  }
  .toolbar,
  .dock-tabs {
    overflow-x: auto;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
  .toolbar::-webkit-scrollbar,
  .dock-tabs::-webkit-scrollbar {
    display: none;
  }
  .toolbar > *,
  .dock-tabs > * {
    flex: 0 0 auto;
  }
  .toolbar-spacer {
    flex: 1 0 var(--ds-space-2);
  }
  /* Sem espaço para um mapa que só orienta; o canvas já enquadra sozinho. */
  .minimap {
    display: none;
  }
  .canvas-footer {
    padding: var(--ds-space-2) var(--ds-space-4);
  }
  .canvas-footer .draft-state:first-child {
    display: none;
  }
  /* A pergunta encostada na base do canvas, fora do pan/zoom: sempre
     visível, sempre alcançável, sem precisar arrastar o desenho. */
  .ask-dock {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 9;
    max-height: min(62%, 420px);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 13px;
    box-shadow: 0 18px 44px rgba(0, 30, 50, 0.24);
  }
  .ask-dock .ask-card {
    box-shadow: none;
  }
  .ask-dock .ask-card::before {
    display: none;
  }
  .debug-bar {
    max-width: calc(100vw - 20px);
    flex-wrap: wrap;
    row-gap: 4px;
    border-radius: 14px;
  }
  .debug-bar__where,
  .debug-bar__meta,
  .debug-bar__legs {
    display: none;
  }
  .node-run__resp pre,
  .ask-card__resp {
    max-height: 150px;
  }
}

/* O botão que abre a gaveta do agente só existe onde há gaveta. */
.assistant-toggle {
  display: none;
}
@media (max-width: 900px) {
  .assistant-toggle {
    display: inline-flex;
  }
}

/* Arquitetura aberta: a revisão não cabe ao lado do canvas com a
   sidebar (14.5rem) abaixo de ~1100px. Vira a mesma gaveta do IDE
   pequeno, um pouco mais larga, para os cartões por etapa. */
@media (max-width: 1100px) {
  .builder.has-arch,
  .builder.has-arch.has-details {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    position: relative;
    overflow: hidden;
  }
  .builder.has-arch .assistant-pane {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 30;
    width: min(400px, 92vw);
    border-right: 1px solid var(--line);
    box-shadow: 12px 0 28px rgba(15, 23, 42, 0.14);
    transform: translateX(-100%);
    transition: transform 0.2s ease-out;
  }
  .builder.has-arch .assistant-pane.is-open {
    transform: translateX(0);
  }
  .builder.has-arch .builder-scrim {
    display: block;
  }
  .builder.has-arch .assistant-toggle {
    display: inline-flex;
  }
}

@media (max-width: 560px) {
  /* Título e código ocupam a linha toda; as ações rolam embaixo. */
  .canvas-titlebar h2,
  .canvas-title-input {
    font-size: 0.9375rem;
  }
  .dock {
    font-size: 0.75rem;
  }
  .details-tabs {
    padding-left: var(--ds-space-4);
    padding-right: var(--ds-space-4);
  }
  .node-run,
  .details-body {
    padding-left: var(--ds-space-4);
    padding-right: var(--ds-space-4);
  }
}

/* Um caminho longo (URL, código de fluxo, chave) não pode empurrar a
   página: quebra dentro da própria caixa. */
code,
.arm-linked-card strong,
.trace-detail,
.node-run__io code {
  overflow-wrap: anywhere;
}

/* ── Construtor de formulários ──────────────────────────────────────
 * Três colunas: paleta, formulário, propriedades do campo escolhido.
 * A mesma peça serve a tela Formulários e o modal do canvas, então
 * ela nunca fixa altura - quem hospeda decide. */
.fb {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 260px;
  gap: 1px;
  background: var(--line);
  min-height: 420px;
}
.fb-palette,
.fb-props {
  background: var(--surface-subtle);
  padding: var(--ds-space-4);
  overflow-y: auto;
  max-height: 62vh;
}
.fb-palette-group {
  margin-bottom: var(--ds-space-4);
}
.fb-palette-group__name {
  display: block;
  margin-bottom: 4px;
  color: var(--text-secondary);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.fb-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin-bottom: 4px;
  padding: 6px 8px;
  border: 1px solid var(--line-strong-alt);
  border-radius: 7px;
  background: white;
  color: var(--text-primary);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.fb-chip:hover {
  border-color: var(--brand-primary);
  color: var(--brand-dark);
}
.fb-chip .material-icons {
  font-size: 16px;
  color: var(--text-secondary);
}
.fb-stage {
  background: white;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.fb-tabs {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  padding: 0 var(--ds-space-4);
  border-bottom: 1px solid var(--line);
}
.fb-tabs__spacer {
  flex: 1 1 auto;
}
.fb-tab {
  padding: 10px 4px;
  margin-right: var(--ds-space-3);
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
}
.fb-tab.is-on {
  color: var(--brand-dark);
  border-bottom-color: var(--brand-primary);
}
.fb-count {
  color: var(--text-secondary);
  font-size: 0.75rem;
}
.fb-list {
  padding: var(--ds-space-4);
  overflow-y: auto;
  max-height: 62vh;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fb-card {
  display: grid;
  grid-template-columns: 20px 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--line-strong-alt);
  border-radius: 9px;
  background: white;
  cursor: pointer;
}
.fb-card:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 1px;
}
.fb-card.is-selected {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 2px rgba(0, 191, 154, 0.16);
}
.fb-card.is-dragging {
  opacity: 0.45;
}
.fb-card.is-drop {
  border-top: 2px solid var(--brand-primary);
}
.fb-card__grip {
  color: var(--line-strong-alt);
  cursor: grab;
  font-size: 18px;
}
.fb-card__icon {
  color: var(--text-secondary);
  font-size: 18px;
}
.fb-card__body {
  min-width: 0;
}
.fb-card__body h4 {
  margin: 0;
  color: var(--brand-dark);
  font-size: 0.8125rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fb-card__body p {
  margin: 1px 0 0;
  color: var(--text-secondary);
  font-size: 0.6875rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fb-card__tools {
  display: flex;
  gap: 2px;
}
.fb-req {
  margin-left: 3px;
  color: #d94a4a;
  font-weight: 700;
}
.fb-preview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  gap: var(--ds-space-5);
  padding: var(--ds-space-5);
  overflow-y: auto;
  max-height: 62vh;
}
.fb-preview__paper {
  padding: var(--ds-space-5);
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-subtle);
}
.fb-preview__paper h3 {
  margin: 0 0 var(--ds-space-4);
  color: var(--brand-dark);
  font-size: 1rem;
}
.fb-errors {
  margin: 0 0 var(--ds-space-3);
  padding-left: 1.1rem;
  color: #a33;
  font-size: 0.75rem;
  line-height: 1.5;
}
.fb-props .property-group input,
.fb-props .property-group select,
.fb-props .property-group textarea,
.fb-cond select,
.fb-cond input {
  font-size: 0.8125rem;
}
.fb-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.fb-cond {
  margin-top: var(--ds-space-4);
  padding-top: var(--ds-space-4);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fb-cond select,
.fb-cond input {
  width: 100%;
  min-height: 35px;
  padding: 0 9px;
  border: 1px solid var(--line-strong-alt);
  border-radius: 7px;
  background: white;
  font: inherit;
}
/* Metade da linha, sem exigir que o container vire flex - o formulário
 * é renderizado em cinco telas diferentes. */
.property-group--half {
  display: inline-block;
  width: calc(50% - 5px);
  vertical-align: top;
}
.property-group--half + .property-group--half {
  margin-left: 8px;
}
.modal--builder {
  width: min(1100px, 100%);
}
.modal--builder .fb {
  border: 1px solid var(--line);
  border-radius: 11px;
  overflow: hidden;
  margin-top: var(--ds-space-4);
}
.panel--flush {
  padding: 0;
}
.panel-head-search {
  min-width: 220px;
  min-height: 35px;
  padding: 0 10px;
  border: 1px solid var(--line-strong-alt);
  border-radius: 7px;
  background: white;
  font: inherit;
  font-size: 0.8125rem;
}
.form-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--ds-space-4);
  padding: var(--ds-space-5);
}

/* Editor estreito do painel do canvas: cartão fechado por padrão,
 * propriedades dobradas dentro do escolhido. */
.form-schema-row__head {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 2px;
}
.form-schema-row__grip {
  color: var(--line-strong-alt);
  cursor: grab;
  font-size: 16px;
}
.form-schema-row__toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 4px 2px;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.form-schema-row__toggle .material-icons {
  font-size: 16px;
  color: var(--text-secondary);
}
.form-schema-row__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--brand-dark);
  font-size: 0.8125rem;
  font-weight: 600;
}
.form-schema-row__kind {
  color: var(--text-secondary);
  font-size: 0.6875rem;
  white-space: nowrap;
}
.form-schema-row.is-open {
  border-color: var(--brand-primary);
}
.form-schema-row.is-dragging {
  opacity: 0.45;
}
.form-schema-row.is-drop {
  border-top: 2px solid var(--brand-primary);
}
.form-schema-body {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-schema-body textarea,
.form-schema-pair input {
  width: 100%;
  border: 1px solid var(--line-strong-alt);
  border-radius: 7px;
  padding: 8px;
  font: inherit;
  font-size: 0.8125rem;
  background: white;
}
.form-schema-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.form-schema-pair input {
  min-height: 35px;
  padding: 0 8px;
}
.form-schema-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

@media (max-width: 1100px) {
  .fb {
    grid-template-columns: minmax(0, 1fr);
  }
  .fb-palette,
  .fb-props,
  .fb-list {
    max-height: none;
  }
  .fb-palette {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--ds-space-3);
  }
  .fb-preview {
    grid-template-columns: minmax(0, 1fr);
    max-height: none;
  }
  .form-meta {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── Dados: a tabela de um processo ─────────────────────────────────
 * Cabeçalho e primeira coluna fixos, porque um processo com vinte
 * campos rola nos dois eixos e a pessoa precisa saber de que caso é a
 * linha que está lendo. */
.records-toolbar {
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
}
.records-picker,
.records-search,
.records-toolbar > .app-btn {
  box-sizing: border-box;
  height: 36px;
  min-height: 36px;
  border-radius: 8px;
}
.records-picker {
  flex: 0 1 22rem;
  min-width: 14rem;
  padding: 0 10px;
  border: 1px solid var(--line-strong-alt);
  background: white;
  font: inherit;
  font-weight: 600;
  color: var(--brand-dark);
}
.records-search {
  flex: 1 1 14rem;
  min-width: 10rem;
  padding: 0 10px;
  border: 1px solid var(--line-strong-alt);
  background: white;
  font: inherit;
  font-size: 0.8125rem;
  appearance: none;
  -webkit-appearance: none;
}
.records-toolbar > .app-btn {
  flex: 0 0 auto;
  padding: 0 12px;
}
.records-columns {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 4px var(--ds-space-4);
  padding: var(--ds-space-4) 1.25rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface-subtle);
}
.records-columns .form-field-check {
  min-height: 26px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-primary);
}
.records-columns__kind {
  margin-left: auto;
  color: var(--text-secondary);
  font-size: 0.6875rem;
}
.records-note {
  margin: 0;
  padding: 0.6rem 1.25rem;
  border-bottom: 1px solid var(--line);
  color: var(--text-secondary);
  font-size: 0.75rem;
}
.records-scroll {
  overflow: auto;
  max-height: 62vh;
}
.records-table {
  border-collapse: separate;
  border-spacing: 0;
  width: max-content;
  min-width: 100%;
  font-size: 0.8125rem;
}
.records-table th,
.records-table td {
  border-bottom: 1px solid var(--line);
  padding: 0;
  text-align: left;
  white-space: nowrap;
}
.records-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-subtle);
  border-bottom: 1px solid var(--line-strong-alt);
}
.records-table thead tr.records-filters th {
  top: 33px;
  z-index: 2;
}
/* A coluna do número acompanha a rolagem horizontal. */
.records-table th:first-child,
.records-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: white;
  border-right: 1px solid var(--line);
}
.records-table thead th:first-child {
  z-index: 3;
  background: var(--surface-subtle);
}
.records-th {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  min-height: 33px;
  padding: 0 10px;
  border: 0;
  background: none;
  color: var(--brand-dark);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.records-th .material-icons {
  font-size: 14px;
  color: var(--brand-primary);
}
.records-th__old {
  padding: 0 4px;
  border-radius: 4px;
  background: var(--surface-muted, #eef2f6);
  color: var(--text-secondary);
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
}
.records-filters input,
.records-filters select {
  width: 100%;
  min-width: 110px;
  min-height: 28px;
  padding: 0 6px;
  border: 0;
  border-top: 1px solid var(--line);
  background: white;
  font: inherit;
  font-size: 0.75rem;
  color: var(--text-secondary);
}
.records-filters input:focus,
.records-filters select:focus {
  outline: 2px solid var(--brand-primary);
  outline-offset: -2px;
}
.records-table tbody td {
  padding: 7px 10px;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.records-table tbody tr {
  cursor: pointer;
}
.records-table tbody tr:hover td {
  background: var(--surface-subtle);
}
.records-more {
  display: flex;
  align-items: center;
  gap: var(--ds-space-4);
  flex-wrap: wrap;
  padding: var(--ds-space-4) 1.25rem;
}
.records-more .field-hint {
  margin: 0;
}

@media (max-width: 900px) {
  .records-picker,
  .records-search {
    flex: 1 1 100%;
    min-width: 0;
    max-width: none;
  }
  .records-toolbar > .app-btn {
    margin-left: auto;
  }
  .records-scroll {
    max-height: none;
  }
}

/* ── Architecture agent review (BPMN → Flow) ─────────────────────── */
.modal--arch {
  width: min(1120px, 96vw);
  height: min(840px, 92vh);
  max-height: min(92vh, 920px);
}
.arch-modal__scroll {
  display: grid;
  gap: var(--ds-space-3);
  margin-top: var(--ds-space-2);
}
.arch-review {
  display: grid;
  gap: var(--ds-space-3);
  background: #f4f8f9;
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand-primary);
}
.arch-review__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--ds-space-2);
}
.modal--arch .arch-review__head h2 {
  margin: 0;
}
.arch-review .draft-review__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2);
  position: sticky;
  bottom: 0;
  background: #f4f8f9;
  padding: 8px 0 2px;
  margin-top: 4px;
}
.verify-ok,
.verify-warn,
.verify-note {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8125rem;
}
.verify-ok {
  color: var(--success);
}
.verify-ok .material-icons {
  font-size: 1rem;
}
.verify-warn {
  color: var(--error-fg, #b91c1c);
}
.verify-note {
  color: var(--text-secondary);
}
.arch-review__src {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7f8c;
  background: #e6eef0;
  padding: 2px 8px;
  border-radius: 999px;
}
.arch-review__rationale {
  margin: 0;
  color: #3d4f5c;
}
.arch-review__hint {
  margin: 0;
  font-size: 0.75rem;
  color: #55697a;
}
.arch-meter {
  display: grid;
  gap: 6px;
}
.arch-meter__bar {
  height: 8px;
  border-radius: 999px;
  background: #dde7ea;
  overflow: hidden;
}
.arch-meter__bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #00bf9a, #35d0b4);
  transition: width 0.4s ease;
}
.arch-meter__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2) var(--ds-space-4);
  font-size: 0.75rem;
  color: #55697a;
}
.arch-meter__stats b {
  color: var(--brand-dark);
}
.arch-moves {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
}
.arch-moves li {
  font-size: 0.75rem;
  color: #3d4f5c;
  display: flex;
  gap: 6px;
  align-items: baseline;
}
.arch-move__tag {
  flex: none;
  font-weight: 600;
  color: var(--brand-dark);
  background: #dff5ef;
  border-radius: 4px;
  padding: 1px 6px;
}
.arch-cards {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  padding-right: 2px;
}
.arch-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 8px 10px;
  display: grid;
  gap: 6px;
  border-left: 3px solid #cdd9dd;
}
.arch-card.conf--high {
  border-left-color: #00bf9a;
}
.arch-card.conf--medium {
  border-left-color: #f0b429;
}
.arch-card.conf--low {
  border-left-color: #e2856e;
}
.arch-card.is-locked {
  background: #f3fbf8;
  border-color: #9fe0ce;
}
.arch-card__top {
  display: flex;
  align-items: center;
  gap: 6px;
}
.arch-card__name {
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.arch-card__actor {
  font-size: 0.6875rem;
  color: #6b7f8c;
  background: #eef3f4;
  border-radius: 999px;
  padding: 1px 7px;
  flex: none;
}
.arch-card__row {
  display: flex;
  gap: 6px;
}
.arch-card__row select {
  flex: 1;
  min-width: 0;
  border: 1px solid #bccfd4;
  border-radius: 7px;
  padding: 5px 7px;
  font-size: 0.75rem;
  background: #fff;
  color: var(--text-primary);
}
.arch-card__path,
.arch-card__alts {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.arch-card__path-label {
  flex: none;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7f8c;
  min-width: 3.6rem;
}
.arch-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}
.arch-path {
  border: 1px solid #9fe0ce;
  background: #f3fbf8;
  color: #04785f;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
}
.arch-path:hover:not(:disabled) {
  background: #dff5ef;
}
.arch-path.is-picked {
  background: #00bf9a;
  border-color: #00bf9a;
  color: #fff;
}
.arch-path--alt {
  background: #fff;
  border-color: #bccfd4;
  color: #3d4f5c;
  font-weight: 500;
}
.arch-path--alt.is-picked {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #fff;
}
.arch-card__more {
  font-size: 0.72rem;
  color: #55697a;
}
.arch-card__more summary {
  cursor: pointer;
}
.arch-card__more select {
  display: block;
  width: 100%;
  margin-top: 4px;
  border: 1px solid #bccfd4;
  border-radius: 7px;
  padding: 5px 7px;
  font-size: 0.75rem;
  background: #fff;
  color: var(--text-primary);
}
.arch-card__why {
  margin: 0;
  font-size: 0.72rem;
  color: #64778a;
}
.arch-card__note {
  border: 1px solid #bccfd4;
  border-radius: 7px;
  padding: 5px 7px;
  font-size: 0.72rem;
}
.conf {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 1px 6px;
  border-radius: 999px;
  flex: none;
}
.conf.conf--high {
  background: #dff5ef;
  color: #04785f;
}
.conf.conf--medium {
  background: #fdf0d5;
  color: #8a5a05;
}
.conf.conf--low {
  background: #fbe6e0;
  color: #9c4527;
}
.arch-roi summary,
.arch-lint summary {
  cursor: pointer;
  font-size: 0.75rem;
  color: var(--brand-dark);
  font-weight: 600;
}
.arch-roi ul,
.arch-lint ul {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 5px;
}
.arch-roi li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  font-size: 0.72rem;
  color: #55697a;
}
.arch-roi__name {
  font-weight: 600;
  color: var(--text-primary);
}
.arch-roi__pill {
  border-radius: 999px;
  padding: 1px 6px;
  font-size: 0.625rem;
}
.arch-roi__pill.impact-alto {
  background: #dff5ef;
  color: #04785f;
}
.arch-roi__pill.impact-médio {
  background: #eef3f4;
  color: #4b5f6c;
}
.arch-roi__pill.impact-baixo {
  background: #f1f4f5;
  color: #7c8b96;
}
.arch-roi__pill.effort-baixo {
  background: #dff5ef;
  color: #04785f;
}
.arch-roi__pill.effort-médio {
  background: #fdf0d5;
  color: #8a5a05;
}
.arch-roi__pill.effort-alto {
  background: #fbe6e0;
  color: #9c4527;
}
.arch-roi__note {
  color: #7c8b96;
}
.arch-lint li {
  font-size: 0.72rem;
}
.arch-lint__error {
  color: #a3341c;
}
.arch-lint__warn,
.arch-lint__warning {
  color: #8a5a05;
}
.arch-lint__info {
  color: #55697a;
}
.app-btn.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

.arch-move__accept {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.arch-move__accept input {
  margin: 0;
}

/* Architecture review is a focused decision workspace, not another
   inspector squeezed beside the canvas. */
.modal-backdrop--arch {
  background: rgba(6, 28, 40, 0.62);
  backdrop-filter: blur(6px);
}
.modal--arch {
  width: min(1080px, calc(100vw - 40px));
  height: min(800px, calc(100vh - 40px));
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 22px;
  box-shadow: 0 32px 90px rgba(0, 25, 38, 0.34);
}
.modal--arch .arch-review__head {
  padding: 20px 24px 16px;
  border-bottom: 1px solid #e8edef;
  background: #fff;
  flex: 0 0 auto;
}
.arch-review__title,
.arch-review__head-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.arch-review__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(145deg, #063f4c, #00a985);
  box-shadow: 0 8px 20px rgba(0, 169, 133, 0.22);
}
.arch-review__eyebrow {
  display: block;
  margin-bottom: 2px;
  color: #6d7f88;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.modal--arch .arch-review__head h2 {
  color: #102f3a;
  font-size: 1.3rem;
  line-height: 1.2;
}
.arch-review__close {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  color: #627681;
  background: #f2f5f6;
  cursor: pointer;
}
.arch-review__close:hover {
  color: #102f3a;
  background: #e7edef;
}
.modal--arch .arch-review__src {
  padding: 5px 9px;
  color: #3d5964;
  background: #eef3f4;
}
.arch-review__intro {
  padding: 14px 24px 10px;
  background: #fff;
}
.modal--arch .arch-review__rationale {
  font-size: 0.84rem;
  line-height: 1.45;
}
.modal--arch .arch-review__hint {
  margin-top: 4px;
}
.modal--arch .arch-meter {
  padding: 0 24px 14px;
  background: #fff;
}
.modal--arch .arch-meter__bar {
  height: 6px;
  background: #e7edee;
}
.modal--arch .arch-meter__stats {
  padding-top: 4px;
}
.modal--arch > .arch-moves {
  margin: 0;
  padding: 10px 24px;
  border-top: 1px solid #eef2f3;
  border-bottom: 1px solid #e5ebed;
  background: #f7faf9;
}
.modal--arch .arch-modal__scroll {
  margin: 0;
  padding: 18px 24px 26px;
  background: #f4f7f8;
}
.modal--arch .arch-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.modal--arch .arch-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 310px);
  grid-template-areas:
    'title choice'
    'reason more'
    'note note';
  align-items: center;
  gap: 7px 24px;
  padding: 15px 18px;
  border: 1px solid #e1e8ea;
  border-left: 3px solid #cbd7da;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 3px 12px rgba(20, 54, 66, 0.04);
}
.modal--arch .arch-card:hover {
  border-color: #bfd0d5;
  box-shadow: 0 8px 22px rgba(20, 54, 66, 0.08);
}
.modal--arch .arch-card.is-locked {
  border-color: #78ceb8;
  background: #fbfffe;
  box-shadow: 0 6px 18px rgba(0, 169, 133, 0.08);
}
.modal--arch .arch-card__top {
  grid-area: title;
}
.modal--arch .arch-card__name {
  overflow: visible;
  color: #183b46;
  font-size: 0.9rem;
  white-space: normal;
}
.modal--arch .arch-card__why {
  grid-area: reason;
  color: #657984;
  font-size: 0.75rem;
  line-height: 1.4;
}
.modal--arch .arch-card__path {
  grid-area: choice;
  justify-content: flex-end;
}
.modal--arch .arch-card__path-label {
  display: none;
}
.modal--arch .arch-path {
  flex: 1;
  max-width: 250px;
  padding: 7px 12px;
  border: 1px solid #8bd6c2;
  border-radius: 9px;
  text-align: left;
}
.modal--arch .arch-card__more {
  grid-area: more;
  justify-self: stretch;
}
.modal--arch .arch-card__more summary {
  color: #536b76;
  font-weight: 600;
  text-align: right;
}
.modal--arch .arch-card__more select {
  margin-top: 7px;
  padding: 8px 10px;
}
.modal--arch .arch-card__note {
  grid-area: note;
  margin-top: 3px;
  padding: 8px 10px;
}
.modal--arch .arch-roi,
.modal--arch .arch-lint {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid #dde6e8;
  border-radius: 11px;
  background: #fff;
}
.modal--arch > .modal-actions {
  flex: 0 0 auto;
  margin: 0;
  padding: 14px 24px;
  border-top: 1px solid #e2e9eb;
  background: #fff;
  box-shadow: 0 -8px 24px rgba(20, 54, 66, 0.05);
}
.modal--arch > .modal-actions .app-btn {
  min-height: 40px;
  padding-inline: 16px;
  border-radius: 10px;
}
@media (max-width: 720px) {
  .modal-backdrop--arch {
    padding: 0;
  }
  .modal--arch {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }
  .modal--arch .arch-card {
    grid-template-columns: 1fr;
    grid-template-areas:
      'title'
      'reason'
      'choice'
      'more'
      'note';
  }
  .modal--arch .arch-card__path,
  .modal--arch .arch-card__more summary {
    justify-content: flex-start;
    text-align: left;
  }
  .modal--arch .arch-review__src,
  .modal--arch .arch-review__hint,
  .modal--arch .arch-shell__shortcut {
    display: none;
  }
}

/* Import from UniConecta CoE (catalog browser). */
.modal--coe {
  width: min(1080px, 96vw);
  height: min(720px, 90vh);
}
.coe-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ds-space-3);
  flex-wrap: wrap;
}
.coe-head h2 {
  margin: 0;
}
.coe-src {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7f8c;
  background: #e6eef0;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.coe-src--live {
  color: #04785f;
  background: #dff5ef;
}
.coe-toolbar {
  display: flex;
  gap: var(--ds-space-2);
  flex: 0 0 auto;
  margin-bottom: var(--ds-space-3);
}
.coe-search {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid #bccfd4;
  border-radius: 9px;
  padding: 8px 12px;
  font-size: 0.875rem;
  color: var(--text-primary);
}
.coe-body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(220px, 340px) 1fr;
  gap: var(--ds-space-4);
  overflow: hidden;
}
.coe-list {
  min-height: 0;
  overflow-y: auto;
  display: grid;
  gap: 6px;
  align-content: start;
  padding-right: 4px;
}
.coe-list-item {
  display: grid;
  gap: 4px;
  text-align: left;
  padding: 9px 11px;
  border-radius: 9px;
  border: 1px solid var(--line);
  border-left: 3px solid #cdd9dd;
  background: #fff;
  cursor: pointer;
  font: inherit;
}
.coe-list-item:hover {
  border-color: #9fc8c2;
  background: #f7fbfb;
}
.coe-list-item.is-selected {
  border-left-color: var(--brand-primary);
  background: #f1fbfa;
}
.coe-list-item.is-cursor {
  box-shadow: 0 0 0 2px rgba(0, 191, 154, 0.35) inset;
}
.coe-list-item__name {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.85rem;
}
.coe-list-item__org {
  font-size: 0.72rem;
  color: #6b7f8c;
}
.coe-list-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}
.coe-pill {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 1px 6px;
  border-radius: 999px;
  background: #eef3f4;
  color: #55697a;
  flex: none;
}
.coe-pill--ai {
  background: #eaf1fd;
  color: #2158b8;
}
.coe-pill--system {
  background: #f4f1fd;
  color: #5a3fb0;
}
.coe-empty {
  padding: var(--ds-space-5);
  color: var(--text-secondary);
  font-size: 0.85rem;
  text-align: center;
}
.coe-detail {
  min-height: 0;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f9fbfb;
  padding: var(--ds-space-4);
  display: grid;
  gap: var(--ds-space-3);
  align-content: start;
}
.coe-detail-empty {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--text-secondary);
  font-size: 0.85rem;
  text-align: center;
  padding: var(--ds-space-5);
}
.coe-detail__title {
  margin: 0;
  color: var(--brand-dark);
  font-size: 1.05rem;
}
.coe-detail__sub {
  margin: 0;
  color: #6b7f8c;
  font-size: 0.8rem;
}
.coe-detail__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2);
}
.coe-xml {
  max-height: 220px;
  overflow: auto;
  background: #10262b;
  color: #d3f2ec;
  border-radius: 9px;
  padding: var(--ds-space-3);
  font-size: 0.7rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-all;
}

/* Roteiro: the code editor field in its inspector. */
.code-field {
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 0.8125rem;
  line-height: 1.5;
  tab-size: 2;
  background: #10262b;
  color: #d3f2ec;
  border-radius: 9px;
  border: 1px solid #0b1c20;
  padding: var(--ds-space-3);
  resize: vertical;
}

/* ---------- Loading skeleton ---------- */
.skeleton-page {
  display: grid;
  gap: 14px;
}
.skeleton-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.skeleton {
  border-radius: 12px;
  background: linear-gradient(90deg, var(--surface-muted), #f7fafb, var(--surface-muted));
  background-size: 200% 100%;
  animation: vagas-shimmer 1.2s linear infinite;
}
.skeleton--title {
  width: 14rem;
  height: 30px;
  border-radius: 8px;
}
.skeleton--line {
  width: 22rem;
  max-width: 70%;
  height: 14px;
  border-radius: 6px;
  margin-bottom: 10px;
}
.skeleton--card {
  height: 72px;
}
.skeleton--panel {
  height: 120px;
}
.skeleton--tall {
  height: 220px;
}

/* ---------- Segmented control (Dados: Quadro | Tabela) ---------- */
.segmented {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border-radius: 10px;
  background: var(--surface-muted);
  border: 1px solid var(--line);
}
.segmented button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.8125rem;
  font-weight: 600;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.segmented button .material-icons {
  font-size: 17px;
}
.segmented button:hover:not(.is-on) {
  color: var(--brand-dark);
}
.segmented button.is-on {
  background: white;
  color: var(--brand-dark);
  box-shadow: 0 1px 3px rgba(0, 43, 73, 0.12);
}

.assignee-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  margin-bottom: 6px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: white;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.assignee-check:has(input:checked) {
  border-color: var(--brand-primary);
  background: var(--tint-brand-soft);
}

/* ============================================================
   Banco de talentos (Dados · candidatura)
   ============================================================ */
.talent-board {
  --stage-bank: #64748b;
  --stage-pre: #00a882;
  --stage-interview: #2f7fd6;
  --stage-out: #b45309;
  padding: 1rem 1.25rem 1.25rem;
  display: grid;
  gap: 14px;
}
.talent-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.talent-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: white;
}
.talent-stat > .material-icons {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--surface-muted);
  color: var(--stage-bank);
  font-size: 20px;
}
.talent-stat--pre > .material-icons {
  background: #e3f8f1;
  color: var(--stage-pre);
}
.talent-stat--interview > .material-icons {
  background: #e6f0fc;
  color: var(--stage-interview);
}
.talent-stat--rating > .material-icons {
  background: #fff4d6;
  color: #d97706;
}
.talent-stat div {
  display: grid;
  line-height: 1.15;
}
.talent-stat strong {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--brand-dark);
  letter-spacing: -0.02em;
}
.talent-stat span {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.talent-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.talent-tools__spacer {
  flex: 1 1 0;
}
.talent-search,
.talent-select {
  position: relative;
  display: flex;
  align-items: center;
  height: 36px;
  border: 1px solid var(--line-strong-alt);
  border-radius: 9px;
  background: white;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.talent-search:focus-within,
.talent-select:focus-within {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(0, 191, 154, 0.16);
}
.talent-search {
  flex: 1 1 12rem;
  min-width: 10rem;
  max-width: 22rem;
}
.talent-select {
  flex: 0 1 auto;
  min-width: 0;
}
.talent-select select {
  max-width: 12rem;
  text-overflow: ellipsis;
}
.talent-search > .material-icons,
.talent-select > .material-icons {
  position: absolute;
  left: 10px;
  font-size: 18px;
  color: var(--text-secondary);
  pointer-events: none;
}
.talent-search input {
  width: 100%;
  height: 100%;
  border: 0;
  outline: none;
  padding: 0 12px 0 36px;
  background: transparent;
  font-size: 0.8125rem;
  color: var(--text-primary);
}
.talent-select select {
  height: 100%;
  border: 0;
  outline: none;
  padding: 0 30px 0 34px;
  background: transparent;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-primary);
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%),
    linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%);
  background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.talent-saving {
  position: fixed;
  right: 5.5rem;
  bottom: 1.6rem;
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--brand-dark);
  box-shadow: 0 10px 24px rgba(0, 43, 73, 0.25);
  font-size: 0.75rem;
  font-weight: 600;
  color: white;
  animation: composer-match-in 0.15s ease-out;
}
.talent-saving__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-primary);
  animation: talent-pulse 0.9s ease-in-out infinite;
}
@keyframes talent-pulse {
  50% {
    opacity: 0.3;
    transform: scale(0.7);
  }
}
.talent-error {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 9px;
}
.talent-filter-note {
  margin: -4px 0 0;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.talent-columns {
  display: grid;
  grid-template-columns: repeat(4, minmax(16rem, 1fr));
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.talent-column {
  --stage: var(--stage-bank);
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 22rem;
  border-radius: 14px;
  background: var(--surface-sunken);
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.talent-column--pre {
  --stage: var(--stage-pre);
}
.talent-column--interview {
  --stage: var(--stage-interview);
}
.talent-column--out {
  --stage: var(--stage-out);
}
.talent-column.is-drop {
  background: color-mix(in srgb, var(--stage) 9%, white);
  border-color: color-mix(in srgb, var(--stage) 55%, white);
  border-style: dashed;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--stage) 25%, white);
}
.talent-column__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 12px 10px;
  border-top: 3px solid var(--stage);
  border-radius: 14px 14px 0 0;
}
.talent-column__icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  font-size: 16px !important;
  color: var(--stage);
  background: color-mix(in srgb, var(--stage) 14%, white);
}
.talent-column__head h3 {
  flex: 1;
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--brand-dark);
}
.talent-column__count {
  min-width: 24px;
  height: 22px;
  padding: 0 7px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: white;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--stage);
  box-shadow: 0 0 0 1px var(--line);
}
.talent-column__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 10px 12px;
}
.talent-column__empty {
  flex: 1;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 6px;
  min-height: 9rem;
  padding: 1rem;
  border: 1.5px dashed var(--line-strong);
  border-radius: 12px;
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-secondary);
}
.talent-column__empty .material-icons {
  font-size: 22px;
  color: var(--neutral);
}
.talent-column.is-drop .talent-column__empty {
  border-color: var(--stage);
  color: var(--stage);
}
.talent-column.is-drop .talent-column__empty .material-icons {
  color: var(--stage);
}

.talent-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  gap: 10px;
  padding: 14px;
  border-radius: 12px;
  background: white;
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(0, 43, 73, 0.05);
  cursor: grab;
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease, opacity 0.18s;
}
.talent-card:hover {
  border-color: var(--line-strong);
  box-shadow: 0 8px 22px rgba(0, 43, 73, 0.1);
  transform: translateY(-1px);
}
.talent-card.is-dragging {
  opacity: 0.45;
  cursor: grabbing;
  transform: rotate(1deg);
}
.talent-card__top {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.talent-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: white;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}
.talent-card__who {
  display: grid;
  min-width: 0;
  flex: 1;
}
.talent-card__name {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--brand-dark);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.talent-card__name:hover {
  color: var(--brand-deep);
  text-decoration: underline;
}
.talent-card__mail {
  font-size: 0.75rem;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.talent-prio {
  flex: none;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  background: var(--surface-muted);
  color: var(--text-secondary);
}
.talent-prio--1 {
  background: #fee4e2;
  color: #b42318;
}
.talent-prio--2 {
  background: #ffedd5;
  color: #c2410c;
}
.talent-prio--3 {
  background: #fef7c3;
  color: #a15c07;
}
.talent-card__vaga {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  justify-self: start;
  max-width: 100%;
  padding: 4px 9px;
  border-radius: 7px;
  background: var(--tint-brand-soft);
  border: 1px solid var(--tint-brand-border);
  color: var(--brand-deepest);
  font-size: 0.75rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.talent-card__vaga .material-icons {
  font-size: 14px;
}
.talent-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.talent-card__meta li {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: var(--text-secondary);
}
.talent-card__meta .material-icons {
  font-size: 14px;
  color: var(--neutral);
}
.talent-card__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.talent-card__facts > span,
.talent-card__facts > a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--surface-subtle);
  border: 1px solid var(--line);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.talent-card__facts > a {
  color: #0a66c2;
  border-color: #cfe1f5;
  background: #f1f7fd;
}
.talent-card__facts > a:hover {
  background: #e3effb;
}
.talent-card__facts .material-icons {
  font-size: 13px;
}
.talent-card__rate {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.talent-stars {
  display: inline-flex;
}
.talent-stars button {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--line-strong);
  border-radius: 6px;
  transition: transform 0.12s ease, color 0.12s ease;
}
.talent-stars button .material-icons {
  font-size: 19px;
}
.talent-stars button.is-on {
  color: #f59e0b;
}
.talent-stars:hover button {
  color: #f59e0b;
}
.talent-stars button:hover ~ button {
  color: var(--line-strong);
}
.talent-stars button:hover {
  transform: scale(1.15);
}
.talent-prio-pick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.talent-prio-pick select,
.talent-card__move {
  height: 28px;
  padding: 0 24px 0 8px;
  border: 1px solid var(--line-strong-alt);
  border-radius: 7px;
  background-color: white;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-primary);
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%),
    linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%);
  background-position: calc(100% - 12px) 50%, calc(100% - 8px) 50%;
  background-size: 4px 4px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.talent-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.talent-card__actions .app-btn--primary {
  flex: 1 1 100%;
}
.talent-card__order {
  display: inline-flex;
  gap: 2px;
}
.talent-card__order .app-btn--icon {
  width: 28px;
  min-width: 28px;
  min-height: 28px;
}
.talent-card__move {
  flex: 1;
  min-width: 0;
}
.talent-card__actions .app-btn--primary {
  min-height: 28px;
}
.talent-card__since {
  font-size: 0.6875rem;
  color: var(--neutral);
}
.talent-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 0.75rem;
  color: var(--text-secondary);
}
.talent-hint .material-icons {
  font-size: 16px;
  color: var(--neutral);
}
@media (max-width: 1100px) {
  .talent-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ============================================================
   /vagas · página pública de candidatura
   ============================================================ */
.vagas-page {
  --pub-accent: var(--brand-primary);
  --pub-on-accent: #041018;
  --pub-ink: var(--text-primary);
  --pub-surface: #ffffff;
  --pub-radius: 10px;
  --pub-card: 18px;
  min-height: 100vh;
  background: var(--page-bg);
  padding-bottom: 4rem;
}
.vagas-hero {
  position: relative;
  overflow: hidden;
  padding: 2.5rem 1.5rem 6.5rem;
  color: white;
  background:
    radial-gradient(60rem 30rem at 85% -20%, rgba(0, 191, 154, 0.35), transparent 60%),
    radial-gradient(40rem 24rem at 0% 120%, rgba(0, 182, 214, 0.25), transparent 60%),
    linear-gradient(135deg, #002b49, #013f68);
}
.vagas-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(to bottom, black, transparent 85%);
  pointer-events: none;
}
.vagas-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 68rem;
  margin: 0 auto;
}
.vagas-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
}
.vagas-brand em {
  font-style: normal;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
}
.vagas-brand__mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--brand-primary);
  color: var(--brand-dark);
  font-weight: 800;
  font-size: 1.05rem;
}
.vagas-hero h1 {
  margin: 1.75rem 0 0.6rem;
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.1;
}
.vagas-hero p {
  max-width: 36rem;
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.8);
}
.vagas-shell {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(16rem, 21rem) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
  max-width: 68rem;
  margin: -4.5rem auto 0;
  padding: 0 1.5rem;
}
.vagas-shell--narrow {
  grid-template-columns: minmax(0, 36rem);
  justify-content: center;
}
.vagas-card {
  border-radius: 18px;
  background: white;
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(0, 43, 73, 0.14);
}

.vagas-list {
  position: sticky;
  top: 1rem;
  display: grid;
  gap: 10px;
  padding: 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(0, 43, 73, 0.12);
  backdrop-filter: blur(8px);
}
.vagas-list h2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 2px 4px 4px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.vagas-count {
  min-width: 24px;
  height: 22px;
  padding: 0 7px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--tint-brand);
  color: var(--brand-deep);
  font-size: 0.75rem;
  letter-spacing: 0;
}
.vagas-item {
  position: relative;
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 14px 40px 14px 14px;
  text-align: left;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: white;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.vagas-item:hover {
  border-color: var(--line-strong);
  box-shadow: 0 6px 16px rgba(0, 43, 73, 0.08);
}
.vagas-item.is-on {
  border-color: var(--brand-primary);
  background: var(--tint-brand-soft);
  box-shadow: 0 0 0 3px rgba(0, 191, 154, 0.14);
}
.vagas-item__title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--brand-dark);
}
.vagas-item__area {
  font-size: 0.75rem;
  color: var(--text-secondary);
}
.vagas-item__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 4px;
}
.vagas-item__tags > span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.75rem;
  color: var(--text-secondary);
}
.vagas-item__tags .material-icons {
  font-size: 14px;
  color: var(--neutral);
}
.vagas-item__check {
  position: absolute;
  top: 12px;
  right: 12px;
  color: var(--brand-primary);
}
.vagas-skeleton {
  height: 84px;
  border-radius: 12px;
  background: linear-gradient(90deg, var(--surface-muted), #f7fafb, var(--surface-muted));
  background-size: 200% 100%;
  animation: vagas-shimmer 1.2s linear infinite;
}
@keyframes vagas-shimmer {
  to {
    background-position: -200% 0;
  }
}
.vagas-empty {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 1.5rem 1rem;
  text-align: center;
  border: 1.5px dashed var(--line-strong);
  border-radius: 12px;
}
.vagas-empty .material-icons {
  font-size: 28px;
  color: var(--neutral);
}
.vagas-empty strong {
  color: var(--brand-dark);
  font-size: 0.875rem;
}
.vagas-empty p {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.vagas-form {
  display: grid;
  gap: 16px;
  padding: 28px 30px 30px;
}
.vagas-field--select-vaga {
  display: none !important;
}
.vagas-chosen {
  display: grid;
  gap: 4px;
  padding: 16px 18px;
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(0, 191, 154, 0.08), rgba(0, 182, 214, 0.06)),
    white;
  border: 1px solid var(--tint-brand-border);
}
.vagas-chosen__kicker {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--brand-deep);
}
.vagas-chosen strong {
  font-size: 1.25rem;
  color: var(--brand-dark);
  letter-spacing: -0.02em;
}
.vagas-chosen p {
  margin: 4px 0 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-secondary);
}
.vagas-section {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 -2px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--brand-dark);
}
.vagas-section .material-icons {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--tint-brand);
  color: var(--brand-deep);
  font-size: 17px;
}
.vagas-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}
.vagas-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.vagas-field > span:first-child,
.vagas-pills legend {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
}
.vagas-field input,
.vagas-field select,
.vagas-affix {
  width: 100%;
  height: 44px;
  border: 1px solid var(--line-strong-alt);
  border-radius: 10px;
  background: white;
  font-size: 0.9375rem;
  color: var(--text-primary);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.vagas-field input,
.vagas-field select {
  padding: 0 14px;
}
.vagas-field select {
  appearance: none;
  padding-right: 36px;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%),
    linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
.vagas-field input::placeholder {
  color: #9aa9b5;
}
.vagas-field input:focus,
.vagas-field select:focus,
.vagas-affix:focus-within {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 4px rgba(0, 191, 154, 0.15);
}
.vagas-affix {
  display: flex;
  align-items: stretch;
  overflow: hidden;
}
.vagas-affix > span {
  display: grid;
  place-items: center;
  padding: 0 12px;
  background: var(--surface-subtle);
  border-right: 1px solid var(--line);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text-secondary);
}
.vagas-affix input {
  height: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none !important;
}
.vagas-pills {
  display: grid;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.vagas-pills legend {
  padding: 0;
  margin-bottom: 6px;
}
.vagas-pills__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.vagas-pills label {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--line-strong-alt);
  background: white;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}
.vagas-pills label:hover {
  border-color: var(--brand-primary);
  color: var(--brand-dark);
}
.vagas-pills label.is-on {
  border-color: var(--brand-primary);
  background: var(--brand-primary);
  color: white;
  box-shadow: 0 4px 12px rgba(0, 191, 154, 0.28);
}
.vagas-pills input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.vagas-pills label:has(input:focus-visible) {
  outline: 3px solid rgba(0, 191, 154, 0.35);
  outline-offset: 2px;
}
.vagas-drop {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border: 1.5px dashed var(--line-strong);
  border-radius: 14px;
  background: var(--surface-subtle);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.vagas-drop:hover,
.vagas-drop.is-drag {
  border-color: var(--brand-primary);
  background: var(--tint-brand-soft);
}
.vagas-drop.is-set {
  border-style: solid;
  border-color: var(--tint-brand-border);
  background: var(--tint-brand-soft);
}
.vagas-drop input[type='file'] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.vagas-drop:has(input:focus-visible) {
  outline: 3px solid rgba(0, 191, 154, 0.35);
  outline-offset: 2px;
}
.vagas-drop__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: white;
  color: var(--brand-primary);
  font-size: 24px !important;
  box-shadow: 0 2px 6px rgba(0, 43, 73, 0.08);
}
.vagas-drop__text {
  display: grid;
  gap: 3px;
  min-width: 0;
  font-size: 0.875rem;
  color: var(--text-secondary);
}
.vagas-drop__text strong {
  color: var(--brand-dark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vagas-drop__text small {
  font-size: 0.75rem;
  color: var(--text-secondary);
}
.vagas-drop__swap {
  margin-left: auto;
  flex: none;
  padding: 6px 12px;
  border-radius: 8px;
  background: white;
  border: 1px solid var(--line-strong-alt);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--brand-dark);
}
.vagas-error {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--tint-error);
  color: var(--error-fg);
  font-size: 0.875rem;
  font-weight: 500;
}
.vagas-submit {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.vagas-submit .app-btn {
  min-height: 48px;
  padding: 0 28px;
  border-radius: 12px;
  font-size: 1rem;
  box-shadow: 0 8px 20px rgba(0, 191, 154, 0.3);
}
.vagas-submit .app-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(0, 191, 154, 0.34);
}
.vagas-submit > span {
  font-size: 0.8125rem;
  color: var(--text-secondary);
}
.vagas-done {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 2.5rem 2rem;
  text-align: center;
  animation: composer-match-in 0.25s ease-out;
}
.vagas-done__icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--tint-brand);
  color: var(--brand-primary);
  font-size: 42px !important;
  box-shadow: 0 0 0 10px var(--tint-brand-soft);
  margin-bottom: 8px;
}
.vagas-done h2 {
  margin: 0;
  font-size: 1.5rem;
  color: var(--brand-dark);
  letter-spacing: -0.02em;
}
.vagas-done p {
  max-width: 28rem;
  margin: 0;
  line-height: 1.6;
  color: var(--text-secondary);
}
.vagas-done__code {
  margin-top: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--surface-muted);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.vagas-shell--single {
  grid-template-columns: minmax(0, 46rem);
  justify-content: center;
}
.pub-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 18px;
}
.pub-cell {
  min-width: 0;
}
.pub-cell.is-full {
  grid-column: 1 / -1;
}
.pub-optional {
  margin-left: 6px;
  font-style: normal;
  font-weight: 500;
  font-size: 0.75rem;
  color: var(--text-secondary);
}
.pub-hint {
  font-size: 0.75rem;
  color: var(--text-secondary);
}
.vagas-field textarea {
  width: 100%;
  min-height: 120px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong-alt);
  border-radius: 10px;
  background: white;
  font: inherit;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-primary);
  resize: vertical;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.vagas-field textarea:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 4px rgba(0, 191, 154, 0.15);
}
.vagas-field textarea::placeholder {
  color: #9aa9b5;
}
.pub-check {
  margin: 0 4px 0 -4px;
  font-size: 16px !important;
}
.pub-trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.skeleton-form {
  min-height: 420px;
  background: linear-gradient(90deg, white, #f5f8fa, white);
  background-size: 200% 100%;
  animation: vagas-shimmer 1.2s linear infinite;
}
@media (max-width: 880px) {
  .pub-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .vagas-shell {
    grid-template-columns: minmax(0, 1fr);
  }
  .vagas-list {
    display: none;
  }
  .vagas-field--select-vaga {
    display: grid !important;
  }
  .vagas-form {
    padding: 22px 18px 24px;
  }
  .vagas-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .vagas-submit {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
}

/* Tokens the author sets on the public form. Plain drops the product
   page so a host (landing, iframe) can own the look. */
.vagas-page .vagas-card {
  background: var(--pub-surface);
  border-radius: var(--pub-card);
}
.vagas-page .vagas-field input,
.vagas-page .vagas-field select,
.vagas-page .vagas-field textarea,
.vagas-page .vagas-affix {
  border-radius: var(--pub-radius);
}
.vagas-page .vagas-field input:focus,
.vagas-page .vagas-field select:focus,
.vagas-page .vagas-field textarea:focus,
.vagas-page .vagas-affix:focus-within {
  border-color: var(--pub-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--pub-accent) 22%, transparent);
}
.vagas-page .vagas-pills label.is-on {
  border-color: var(--pub-accent);
  background: var(--pub-accent);
  color: var(--pub-on-accent);
  box-shadow: none;
}
.vagas-page .vagas-brand__mark,
.vagas-page .vagas-submit .app-btn--primary,
.vagas-page .pub-btn {
  background: var(--pub-accent);
  color: var(--pub-on-accent);
}
.vagas-page .vagas-submit .app-btn--primary,
.vagas-page .pub-btn {
  border: 0;
  border-radius: var(--pub-radius);
}
.vagas-page .vagas-field > span:first-child,
.vagas-page .vagas-pills legend {
  color: var(--pub-ink);
}
.vagas-page[data-chrome='fields'] .vagas-hero {
  display: none;
}
.vagas-page[data-chrome='fields'] .vagas-shell {
  margin-top: 0;
}

.vagas-page[data-skin='plain'] {
  --pub-accent: transparent;
  --pub-on-accent: inherit;
  --pub-surface: transparent;
  --pub-ink: inherit;
  min-height: 0;
  padding-bottom: 0;
  background: transparent;
  color: var(--pub-ink);
  font-family: inherit;
}
.vagas-page[data-skin='plain'] .vagas-hero {
  padding: 0 0 1.25rem;
  color: inherit;
  background: none;
}
.vagas-page[data-skin='plain'] .vagas-hero::after,
.vagas-page[data-skin='plain'] .vagas-brand,
.vagas-page[data-skin='plain'] .vagas-submit .material-icons,
.vagas-page[data-skin='plain'] .vagas-submit > span {
  display: none;
}
.vagas-page[data-skin='plain'] .vagas-hero h1 {
  margin: 0 0 0.4rem;
  color: inherit;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0;
}
.vagas-page[data-skin='plain'] .vagas-hero p {
  color: inherit;
  opacity: 0.72;
  font-size: 1rem;
}
.vagas-page[data-skin='plain'] .vagas-shell {
  margin-top: 0;
  padding: 0;
}
.vagas-page[data-skin='plain'] .vagas-card,
.vagas-page[data-skin='plain'] .vagas-list {
  background: var(--pub-surface, transparent);
  border: 0;
  box-shadow: none;
  border-radius: 0;
}
.vagas-page[data-skin='plain'] .vagas-form {
  padding: 0;
  gap: 14px;
}
.vagas-page[data-skin='plain'] .vagas-field input,
.vagas-page[data-skin='plain'] .vagas-field select,
.vagas-page[data-skin='plain'] .vagas-field textarea,
.vagas-page[data-skin='plain'] .vagas-affix {
  background: transparent;
  color: inherit;
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  box-shadow: none;
}
.vagas-page[data-skin='plain'] .vagas-pills label {
  background: transparent;
  color: inherit;
  border-radius: var(--pub-radius);
}
.vagas-page[data-skin='plain'] .vagas-drop {
  background: transparent;
  color: inherit;
  border-radius: var(--pub-radius);
}
.vagas-page[data-skin='plain'] .vagas-submit {
  padding-top: 4px;
  border-top: 0;
}
.vagas-page .pub-btn {
  min-height: 44px;
  padding: 0 18px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.vagas-page[data-skin='plain'] .pub-btn {
  box-shadow: none;
  border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
}
html:has(body > .vagas-page[data-skin='plain']),
html:has(body > .vagas-page[data-skin='plain']) body {
  background: transparent;
}

.pub-stage {
  display: grid;
  gap: 8px;
}
.pub-stage > p {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.pub-look.vagas-page {
  min-height: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.pub-look.vagas-page[data-skin='flow'] {
  background:
    radial-gradient(20rem 10rem at 90% 0%, rgba(0, 191, 154, 0.2), transparent 60%),
    #f4f7f8;
}
.pub-look .vagas-hero {
  padding: 0.25rem 0.25rem 1.5rem;
}
.pub-look .vagas-hero h1 {
  margin-top: 0.6rem;
  font-size: 1.35rem;
}
.pub-look .vagas-shell {
  margin-top: -0.75rem;
  padding: 0;
}
.pub-look .vagas-form {
  padding: 16px;
}
.pub-look[data-skin='plain'] {
  background:
    linear-gradient(135deg, rgba(0, 224, 176, 0.16), transparent 42%),
    #102833;
  color: #f4fffb;
}
.pub-look[data-skin='plain'] .vagas-form {
  padding: 0;
}

.public-link__skins {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.public-link__skins button {
  display: grid;
  gap: 4px;
  padding: 12px;
  text-align: left;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: white;
}
.public-link__skins button.is-on {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(0, 191, 154, 0.16);
}
.public-link__skins strong {
  font-size: 0.875rem;
  color: var(--brand-dark);
}
.public-link__skins small {
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--text-secondary);
}
.public-link__tokens {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
}
.public-link__color {
  display: flex;
  align-items: center;
  gap: 8px;
}
.public-link__color input[type='color'] {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}
.public-link__color input[type='text'] {
  min-width: 0;
  flex: 1;
}
.fb-look {
  display: flex;
  gap: 8px;
  padding: var(--ds-space-5) var(--ds-space-5) 0;
}
.fb-look button {
  border: 1px solid var(--line);
  background: white;
  border-radius: 999px;
  padding: 6px 12px;
  font-weight: 700;
  font-size: 0.8125rem;
}
.fb-look button.is-on {
  background: var(--brand-dark);
  color: white;
  border-color: var(--brand-dark);
}

/* ------------------------------------------------------------------
   Link público (canvas start step and Formulários editor)
   ------------------------------------------------------------------ */
.public-link {
  display: grid;
  gap: 12px;
  margin-top: var(--ds-space-4, 16px);
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-subtle);
}
.public-link__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}
.public-link__head strong {
  font-size: 0.875rem;
  color: var(--brand-dark);
}
.public-link__head p {
  margin: 2px 0 0;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--text-secondary);
}
.public-link__icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--tint-brand);
  color: var(--brand-deep);
  font-size: 18px !important;
}
.public-link__url {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.public-link__url code {
  flex: 1 1 12rem;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: white;
  border: 1px solid var(--line);
  font-size: 0.75rem;
  color: var(--brand-dark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.public-link .field-hint {
  margin: -4px 0 0;
}
.public-link__texts summary {
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--brand-dark);
}
.public-link__texts[open] summary {
  margin-bottom: 10px;
}
.public-link__texts textarea {
  width: 100%;
  resize: vertical;
}
.public-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--tint-brand);
  color: var(--brand-deep);
  font-size: 0.6875rem;
  font-weight: 700;
  vertical-align: middle;
}
.public-chip .material-icons {
  font-size: 13px;
}
.form-templates {
  display: grid;
  gap: 10px;
}
.form-templates__row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: 10px;
}
.form-template {
  display: grid;
  justify-items: start;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: white;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.form-template:hover {
  border-color: var(--line-strong);
  box-shadow: 0 6px 16px rgba(0, 43, 73, 0.08);
}
.form-template.is-on {
  border-color: var(--brand-primary);
  background: var(--tint-brand-soft);
  box-shadow: 0 0 0 3px rgba(0, 191, 154, 0.14);
}
.form-template .material-icons {
  font-size: 20px;
  color: var(--brand-primary);
}
.form-template strong {
  font-size: 0.875rem;
  color: var(--brand-dark);
}
.form-template small {
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--text-secondary);
}

.sys-composer {
  display: grid;
  gap: 12px;
}
.sys-composer__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--brand-dark);
}
.sys-composer__row {
  display: flex;
  gap: 10px;
}
.sys-composer__row input {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line-strong-alt);
  border-radius: 10px;
  font-size: 0.9375rem;
}
.sys-paste summary {
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--brand-dark);
}
.sys-paste textarea {
  width: 100%;
  resize: vertical;
  font-family: inherit;
}
.sys-draft {
  display: grid;
  gap: 10px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.sys-draft__head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
}
.sys-draft__head strong {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--brand-dark);
}
.sys-row {
  border-top: 1px solid var(--line);
}
.sys-row__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 14px 20px;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}
.sys-row__head:hover {
  background: var(--canvas);
}
.sys-row__head .attention-icon {
  background: var(--tint-brand);
  color: var(--brand-deep);
}
.sys-row__title {
  min-width: 0;
}
.sys-row__head h3 {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--brand-dark);
}
.sys-row__head p {
  margin: 2px 0 0;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}
.sys-row__head p code {
  font-size: 0.75rem;
}
.sys-row__chev {
  color: var(--text-secondary);
  font-size: 22px;
}
.sys-row__body {
  display: grid;
  gap: 12px;
  padding: 4px 20px 18px;
}
.sys-row__body > .segmented {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
}
.sys-row__body > .segmented button {
  justify-content: center;
}
.sys-mode {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--canvas);
  border: 1px solid var(--line);
}
.sys-mode.is-live {
  background: var(--tint-brand-soft);
  border-color: var(--tint-brand-border);
}
.sys-mode .material-icons {
  color: var(--brand-deep);
}
.sys-mode strong {
  display: block;
  font-size: 0.875rem;
  color: var(--brand-dark);
}
.sys-mode p {
  margin: 2px 0 0;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}
.sys-sections {
  display: grid;
  gap: 10px;
}
.sys-section,
.sys-fold {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: white;
}
.sys-section {
  display: grid;
  gap: 12px;
  padding: 14px;
}
.sys-section h4,
.sys-fold summary {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.sys-section .property-group {
  margin: 0;
}
.sys-fold summary {
  cursor: pointer;
  padding: 12px 14px;
  color: var(--brand-dark);
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.875rem;
}
.sys-fold[open] summary {
  border-bottom: 1px solid var(--line);
}
.sys-section__body {
  display: grid;
  gap: 12px;
  padding: 14px;
}
.sys-address {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}
.sys-address span {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.sys-address code {
  min-width: 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--surface-muted);
  border: 1px solid var(--line);
  font-size: 0.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sys-ops {
  display: grid;
  gap: 6px;
}
.sys-ops button {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  text-align: left;
  font-size: 0.8125rem;
  color: var(--brand-dark);
}
.sys-ops button em {
  min-width: 3.4rem;
  font-style: normal;
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}
.sys-ops button.is-on {
  border-color: var(--brand-primary);
  background: var(--tint-brand);
}
.sys-test-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 12px;
}
.sys-test-fields label {
  display: grid;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 600;
}
.sys-test-fields input {
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line-strong-alt);
  border-radius: 8px;
  font-weight: 400;
  font-size: 0.875rem;
}
.sys-optional summary {
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--brand-dark);
}
.sys-optional .sys-test-fields {
  margin-top: 12px;
}
.sys-actions {
  display: flex;
  gap: 8px;
}
.sys-log {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.sys-call {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 0;
  padding: 8px 12px;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
}
.sys-call:first-child {
  border-top: 0;
}
.sys-call strong.ok {
  color: var(--success-fg);
}
.sys-call strong.warn {
  color: var(--warning-fg);
}
.sys-call strong.bad {
  color: var(--error-fg);
}
.sys-call strong {
  min-width: 2.4rem;
}
.sys-call em {
  min-width: 2.6rem;
  font-style: normal;
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
}
.sys-call span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sys-call time {
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}
.sys-questions {
  display: grid;
  gap: 10px;
}
@media (max-width: 720px) {
  .sys-composer__row {
    flex-direction: column;
  }
  .sys-row__head,
  .sys-row__body {
    padding-left: 14px;
    padding-right: 14px;
  }
  .sys-row__body > .segmented {
    grid-template-columns: 1fr;
  }
}
.vagas-done__icon.pub-missing {
  background: var(--surface-muted);
  color: var(--text-secondary);
}