/* ============================================================
   MQTT SCOPE — APPLICATION STYLES
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-0);
  color: var(--text-1);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  overscroll-behavior: none;
}

html { height: 100%; }
body {
  /* Usa 100dvh (dynamic viewport) quando suportado, cai pra 100vh.
     No iOS Safari, definimos --app-h via JS como fallback para os casos
     em que nem dvh funciona (PWA standalone em algumas versões). */
  height: 100vh;
  height: 100dvh;
  height: var(--app-h, 100dvh);
  display: grid;
  grid-template-rows: var(--topbar-h) minmax(0, 1fr);
  overflow: hidden;
}

button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--line-1);
  position: relative;
  z-index: 10;
}

.topbar__left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.topbar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  padding: 4px 6px;
  border-radius: var(--radius-2);
  cursor: pointer;
  color: inherit;
  transition: background 0.15s;
}
.topbar__brand:hover { background: var(--bg-2); }
.topbar__brand:active { transform: translateY(1px); }
.brand-mark {
  width: 26px;
  height: 26px;
  color: var(--accent);
  filter: drop-shadow(0 0 6px rgba(120,180,230,0.4));
}
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
  letter-spacing: 0.04em;
}
.brand-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--text-1);
}
.brand-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: 0.2em;
  margin-top: 2px;
}
.brand-version {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-4);
  padding: 3px 8px;
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-radius: 100px;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.brand-version:hover:not(:disabled) {
  background: var(--bg-3);
  color: var(--text-2);
  border-color: var(--line-2);
}
.brand-version:active:not(:disabled) {
  transform: translateY(1px);
}
.brand-version:disabled {
  opacity: 0.6;
  cursor: wait;
}
.brand-version:empty { display: none; }

.topbar__status {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-2);
  letter-spacing: 0.05em;
}
.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--signal-mute);
  box-shadow: 0 0 0 0 transparent;
  transition: background 0.2s;
}
[data-state="connecting"] .status-dot {
  background: var(--signal-warn);
  animation: pulse 1s ease-in-out infinite;
}
[data-state="connected"] .status-dot {
  background: var(--signal-1);
  box-shadow: 0 0 8px var(--signal-1);
}
[data-state="error"] .status-dot {
  background: var(--signal-err);
  animation: pulse 0.8s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.4; }
}
.status-text { text-transform: uppercase; }
.status-meta {
  color: var(--text-3);
  padding-left: 8px;
  margin-left: 4px;
  border-left: 1px solid var(--line-2);
}
.status-meta:empty { display: none; }

.topbar__actions { display: flex; gap: 8px; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  --btn-bg: var(--bg-3);
  --btn-fg: var(--text-1);
  --btn-border: var(--line-2);
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-border);
  padding: 7px 14px;
  border-radius: var(--radius-2);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: transform 0.08s ease, background 0.15s, border-color 0.15s;
}
.btn:hover { background: var(--bg-hover); border-color: var(--line-3); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.btn--primary {
  --btn-bg: var(--accent);
  --btn-fg: #1a1103;
  --btn-border: var(--accent);
}
.btn--primary:hover { background: #a5caeb; border-color: #a5caeb; }

.btn--accent {
  --btn-bg: transparent;
  --btn-fg: var(--accent);
  --btn-border: var(--accent);
}
.btn--accent:hover:not(:disabled) { background: rgba(120,180,230,0.1); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text-2);
  --btn-border: var(--line-2);
}
.btn--insert {
  --btn-bg: var(--bg-3);
  --btn-fg: var(--text-2);
  --btn-border: var(--line-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;             /* permite encolher abaixo do tamanho intrínseco */
  overflow: hidden;          /* corta conteúdo que ultrapassa, em vez de estourar */
}
/* Equaliza visualmente os SVGs dos botões: paths "preenchidos" vindos de
   viewBox grande (640) ocupam quase todo o quadrado, então renderizam
   menores; paths "stroke" de viewBox 24 ocupam ~60% e ficam maiores.
   `min-width: 0` + sem `flex-shrink: 0` permite que o ícone diminua junto
   com o texto quando a coluna fica muito estreita. */
.btn--insert > svg { min-width: 0; width: 14px; height: 14px; }
.btn--insert > svg[viewBox="0 0 640 640"] { width: 12px; height: 12px; }
.btn--insert:hover:not(:disabled) {
  background: var(--bg-hover);
  border-color: var(--line-3);
  color: var(--text-1);
}
.btn--icon {
  padding: 7px 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Botão conectar/desconectar da topbar: alterna ícone e cor via .is-connected */
.btn-connect .icon-disconnect { display: none; }
.btn-connect.is-connected .icon-connect { display: none; }
.btn-connect.is-connected .icon-disconnect { display: inline-block; }
.btn-connect.is-connected {
  --btn-bg: color-mix(in srgb, var(--signal-err) 14%, var(--bg-1));
  --btn-fg: var(--signal-err);
  --btn-border: color-mix(in srgb, var(--signal-err) 45%, transparent);
}
.btn-connect.is-connected:hover:not(:disabled) {
  background: color-mix(in srgb, var(--signal-err) 22%, var(--bg-1));
  border-color: var(--signal-err);
}

.icon-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-3);
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-1);
  cursor: pointer;
  transition: all 0.15s;
}
.icon-btn:hover { color: var(--text-1); background: var(--bg-hover); }

.text-btn {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 12px;
  font-family: var(--font-mono);
  padding: 2px 4px;
}
.text-btn:hover { text-decoration: underline; }

/* ============================================================
   LAYOUT
   ============================================================ */
.layout {
  display: grid;
  /* grid-template-columns gerenciado pelo Splitter em desktop;
     fallback para caso o JS falhe ou em dispositivos sem splitter */
  grid-template-columns: minmax(260px, 340px) 1fr minmax(280px, 360px);
  background: var(--bg-1);
  overflow: hidden;
  min-height: 0;
}

/* Divisórias arrastáveis (inseridas dinamicamente pelo Splitter) */
.splitter-handle {
  background: var(--line-1);
  position: relative;
  touch-action: none;
  user-select: none;
  transition: background 0.15s;
}
.splitter-handle:hover,
.splitter-handle.is-dragging {
  background: var(--accent);
}
.splitter-handle--horizontal {
  cursor: col-resize;
}
.splitter-handle--vertical {
  cursor: row-resize;
}
/* Área de clique maior que o handle visível (melhora usabilidade) */
.splitter-handle::before {
  content: '';
  position: absolute;
  inset: 0;
}
.splitter-handle--horizontal::before {
  left: -4px;
  right: -4px;
}
.splitter-handle--vertical::before {
  top: -4px;
  bottom: -4px;
}
/* "Agarre" visual centralizado no handle */
.splitter-handle::after {
  content: '';
  position: absolute;
  background: var(--text-4);
  opacity: 0;
  transition: opacity 0.15s;
  border-radius: 2px;
}
.splitter-handle:hover::after,
.splitter-handle.is-dragging::after {
  opacity: 0.6;
}
.splitter-handle--horizontal::after {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 28px;
}
.splitter-handle--vertical::after {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 2px;
  width: 28px;
}

.panel {
  background: var(--bg-1);
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

.panel__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-1);
  background: var(--bg-2);
  min-height: 38px;
}
.panel__title {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--text-3);
}
.panel__badge {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 2px 7px;
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  border-radius: 100px;
  color: var(--text-2);
}
.panel__spacer { flex: 1; }

/* ============================================================
   TREE PANEL
   ============================================================ */
.panel__search { padding: 8px 12px; border-bottom: 1px solid var(--line-1); }

.input {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  color: var(--text-1);
  padding: 7px 10px;
  border-radius: var(--radius-2);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  font-family: var(--font-mono);
  font-size: 12px;
}
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(120,180,230,0.15); }
.input--search { padding-left: 28px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236c7380' stroke-width='2'><circle cx='11' cy='11' r='7'/><path d='m21 21-4.3-4.3'/></svg>"); background-repeat: no-repeat; background-position: 8px 50%; }
.input--area { resize: vertical; min-height: 90px; line-height: 1.45; }

.tree-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  scrollbar-width: thin;
  scrollbar-color: var(--line-3) transparent;
}
.tree-scroll::-webkit-scrollbar { width: 8px; }
.tree-scroll::-webkit-scrollbar-thumb { background: var(--line-3); border-radius: 4px; }
.tree-scroll::-webkit-scrollbar-track { background: transparent; }

.tree-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  pointer-events: none;
  padding: 20px;
  text-align: center;
}
.tree-empty__icon { font-size: 36px; opacity: 0.3; }
.tree-empty__text { margin-top: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.tree-empty__hint { margin-top: 4px; font-size: 11px; color: var(--text-4); }

.tree-list {
  position: relative;
  font-family: var(--font-mono);
  font-size: 12px;
}

.tree-row-v {
  position: absolute;
  left: 0;
  right: 0;
  height: 24px;   /* = ROW_H no JS */
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px 0 4px;
  cursor: pointer;
  user-select: none;
  border-left: 2px solid transparent;
  transition: background 0.1s;
  box-sizing: border-box;
  overflow: hidden;
}
.tree-row-v:hover { background: var(--bg-2); }
.tree-row-v.is-selected {
  background: var(--bg-3);
  border-left-color: var(--accent);
}
.tree-row-v.is-hit { animation: hit 0.6s ease-out; }

@keyframes hit {
  0%   { background: rgba(126,231,135,0.22); }
  100% { background: transparent; }
}

.tree-indent {
  display: inline-block;
  flex-shrink: 0;
  /* width set inline via JS */
}

.tree-caret {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  flex-shrink: 0;
  transition: transform 0.15s;
}
.tree-caret::before {
  content: '';
  width: 0;
  height: 0;
  border-left: 4px solid currentColor;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
}
.tree-caret.is-leaf::before {
  border: none;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--text-4);
}
.tree-caret.is-open { transform: rotate(90deg); }

.tree-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-1);
  min-width: 0;
}
.tree-row-v:not(.has-value) .tree-label { color: var(--text-2); }

.tree-count {
  font-size: 10px;
  padding: 1px 6px;
  background: var(--bg-3);
  color: var(--text-3);
  border-radius: 100px;
  min-width: 18px;
  text-align: center;
  flex-shrink: 0;
}
.tree-value {
  font-size: 10px;
  color: var(--signal-1);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.7;
  flex-shrink: 0;
}
.tree-retained {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--signal-2);
  flex-shrink: 0;
}

/* ============================================================
   DETAIL PANEL (payload)
   ============================================================ */
.topic-path {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.topic-path .seg-sep { color: var(--text-3); margin: 0 2px; }
.msg-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
  display: flex;
  gap: 10px;
}
.msg-meta span { padding: 2px 6px; background: var(--bg-3); border-radius: var(--radius-1); }

.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--line-1);
  background: var(--bg-1);
  padding: 0 12px;
}
.tab {
  background: transparent;
  border: none;
  padding: 10px 14px;
  color: var(--text-3);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.tab:hover { color: var(--text-1); }
.tab--active { color: var(--accent); border-bottom-color: var(--accent); }

.tab-panel {
  flex: 1;
  overflow: auto;
  min-height: 0;
}

.payload {
  margin: 0;
  padding: 16px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text-1);
  min-height: 100%;
}
.payload-placeholder {
  color: var(--text-4);
  font-style: italic;
}

/* Wrapper que permite o botão "copiar" flutuante sobre o <pre> */
.payload-wrap {
  position: relative;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.payload-wrap > .payload {
  flex: 1;
  overflow-y: auto;
}

/* Botão copiar — flutuante no canto superior direito do payload */
.payload-copy {
  position: absolute;
  top: 8px;
  right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-1);
  padding: 4px 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, color 0.15s, border-color 0.15s;
}
.payload-wrap:hover .payload-copy,
.payload-copy:focus-visible {
  opacity: 1;
}
.payload-copy:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.payload-copy.is-copied {
  background: var(--signal-2);
  color: white;
  border-color: var(--signal-2);
  opacity: 1;
}
/* Variante "inline" usada no header do split de Histórico (não flutua, é parte do header) */
.payload-copy--inline {
  position: static;
  opacity: 1;   /* sempre visível */
}
/* No mobile sempre visível (não tem hover) */
@media (max-width: 900px), (pointer: coarse) {
  .payload-copy { opacity: 1; }
}

/* Spacer no header do split de Histórico (empurra o botão pra direita) */
.history-split__spacer {
  flex: 1;
}

/* Syntax colors for JSON highlighting */
.tok-string { color: var(--syn-string); }
.tok-number { color: var(--syn-number); }
.tok-bool   { color: var(--syn-bool); font-weight: 600; }
.tok-null   { color: var(--syn-null); }
.tok-key    { color: var(--syn-key); }
.tok-punct  { color: var(--syn-punct); }

/* ============================================================
   HISTORY SPLIT — lista de mensagens em cima, preview embaixo
   ============================================================ */
.history-split {
  display: grid;
  grid-template-rows: 1fr 1fr;   /* fallback: 50/50 quando splitter não aplicado */
  height: 100%;
  min-height: 0;
}
.history-split__list {
  overflow-y: auto;
  min-height: 0;
}
.history-split__preview {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg-2);
}
.history-split__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  border-bottom: 1px solid var(--line-1);
  background: var(--bg-1);
  min-height: 30px;
}
.history-split__title {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--text-3);
}
.history-split__time {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
}
.history-split__preview .payload {
  flex: 1;
  overflow: auto;
  background: var(--bg-2);
}

/* History list */
.history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 12px;
}
.history-list li {
  padding: 8px 14px;
  border-bottom: 1px solid var(--line-1);
  cursor: pointer;
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 10px;
  align-items: start;
  border-left: 2px solid transparent;
  transition: background 0.1s, border-color 0.1s;
}
.history-list li:hover { background: var(--bg-2); }
.history-list li.is-active {
  background: var(--bg-3);
  border-left-color: var(--accent);
}
.history-time { color: var(--text-3); font-size: 11px; }
.history-payload {
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Diff */
.diff-pane {
  padding: 16px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.diff-line { display: block; padding: 0 6px; border-left: 2px solid transparent; }
.diff-add { background: var(--diff-add-bg); color: var(--diff-add-fg); border-left-color: var(--diff-add-fg); }
.diff-del { background: var(--diff-del-bg); color: var(--diff-del-fg); border-left-color: var(--diff-del-fg); }
.diff-ctx { color: var(--text-2); }

/* ============================================================
   PUBLISH PANEL
   ============================================================ */
.pub-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
}

/* Wrapper de scroll dentro do panel: posicionamento absoluto dentro
   de um pai relative. Essa é a abordagem mais robusta em iOS Safari,
   pois não depende de flex/grid intrinsic-size resolution. */
.panel {
  position: relative;
}
.panel__scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}

/* Botões do form de publicar: duas linhas — inserir (Tasmota/Rotinas) em cima,
   ação (Limpar/Publicar) embaixo. Ambas as linhas quebram com flex-wrap se a
   coluna ficar muito estreita, mas a separação vertical evita que o botão
   PUBLICAR fique pra fora da tela. */
.pub-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.pub-actions__row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.pub-actions__row--insert .btn { flex: 1 1 0; min-width: 0; }
.pub-actions__row--submit #btnPubClear { flex: 0 0 auto; }
.pub-actions__row--submit #btnPublish  { flex: 1 1 auto; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--text-3);
  text-transform: uppercase;
}
.field__hint {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-4);
  margin-top: 2px;
}
.field-row { display: flex; gap: 8px; align-items: flex-end; }
.field--compact { flex: 0 0 90px; }
.field--grow { flex: 1 1 auto; }
.field--grow-2 { flex: 2 1 auto; }

.check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 7px 10px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-2);
  background: var(--bg-2);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-2);
  user-select: none;
}
.check input { accent-color: var(--accent); }
.check:has(input:checked) { border-color: var(--accent); color: var(--accent); }

/* ============================================================
   DIALOG (connection)
   ============================================================ */
.dialog {
  border: 1px solid var(--line-2);
  background: var(--bg-1);
  color: var(--text-1);
  border-radius: var(--radius-3);
  padding: 0;
  width: min(780px, 94vw);
  max-height: 90vh;
  box-shadow: var(--shadow-pop);
}
.dialog::backdrop { background: rgba(0,0,0,0.6); backdrop-filter: blur(3px); }

.dialog__form {
  display: grid;
  grid-template-rows: auto 1fr auto;
  max-height: 90vh;
}
.dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-1);
}
.dialog__head h2 { margin: 0; font-size: 14px; letter-spacing: 0.08em; }

/* Título com ícone à esquerda */
.dialog__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.dialog__title-icon {
  color: var(--accent);
  flex-shrink: 0;
}

/* Meta-pills no header do dialog Tasmota (versão + data) */
.tasmota-dialog__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;          /* empurra pra direita, antes do X */
  margin-right: 12px;
}
.meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;       /* pill shape */
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-decoration: none;
  border: 1px solid var(--line-1);
  background: var(--bg-2);
  color: var(--text-3);
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.meta-pill--version {
  /* Clicável — vai pro GitHub releases */
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line-2));
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-2));
}
.meta-pill--version:hover {
  background: color-mix(in srgb, var(--accent) 15%, var(--bg-2));
  border-color: var(--accent);
}
.meta-pill--date {
  font-style: normal;
}
.meta-pill svg {
  flex-shrink: 0;
  opacity: 0.85;
}

/* No mobile, onde o espaço é apertado, esconde o pill de data
   e encolhe o de versão pra caber */
@media (max-width: 640px) {
  .meta-pill--date { display: none; }
  .meta-pill { font-size: 10px; padding: 2px 6px; }
  .tasmota-dialog__meta { margin-right: 8px; gap: 4px; }
}
.dialog__body {
  display: grid;
  grid-template-columns: 220px 1fr;
  overflow: hidden;
  min-height: 0;
}
.saved-connections {
  border-right: 1px solid var(--line-1);
  background: var(--bg-2);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.saved-connections__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line-1);
}
.saved-list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  overflow-y: auto;
  flex: 1;
}
.saved-list li {
  padding: 8px 14px;
  cursor: pointer;
  border-left: 2px solid transparent;
  font-size: 12px;
  color: var(--text-2);
}
.saved-list li:hover { background: var(--bg-3); color: var(--text-1); }
.saved-list li.is-active {
  background: var(--bg-3);
  border-left-color: var(--accent);
  color: var(--text-1);
}
.saved-list li .saved-name { display: block; font-weight: 600; }
.saved-list li .saved-url { display: block; font-family: var(--font-mono); font-size: 10px; color: var(--text-3); margin-top: 2px; }

.conn-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  overflow-y: auto;
}
.dialog__foot {
  display: flex;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--line-1);
  background: var(--bg-2);
}
.dialog__spacer { flex: 1; }

/* ============================================================
   ABOUT DIALOG
   ============================================================ */
.dialog--about {
  width: min(460px, 94vw);
  max-width: 460px;
}
.dialog--about .dialog__form {
  display: grid;
  grid-template-rows: auto 1fr auto;
}
.about__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 28px 28px 20px;
  text-align: center;
  overflow-y: auto;
}
.about__logo img {
  border-radius: 18px;
  box-shadow: var(--shadow-pop);
}
.about__title {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.about__title h3 {
  margin: 0;
  font-size: 22px;
  letter-spacing: 0.02em;
  color: var(--text-1);
}
.about__version {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  padding: 2px 8px;
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-radius: 100px;
}
.about__desc {
  margin: 0;
  color: var(--text-2);
  line-height: 1.55;
  font-size: 13.5px;
  max-width: 360px;
}
.about__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-top: 12px;
  margin-top: 4px;
  border-top: 1px dashed var(--line-2);
  width: 100%;
}
.about__row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
}
.about__label {
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.about__row a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}
.about__row a:hover { text-decoration: underline; }
.about__love {
  color: var(--text-2);
  font-size: 12px;
}

/* ============================================================
   TASMOTA DIALOG
   ============================================================ */
.dialog--tasmota {
  width: min(900px, 96vw);
  max-width: 900px;
  height: min(680px, 90vh);
  max-height: 90vh;
}
.tasmota-dialog__form {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}
.tasmota-dialog__body {
  display: grid;
  grid-template-columns: 260px 1fr;
  overflow: hidden;
  min-height: 0;
}
/* Splitter vertical entre lista e detalhe. Só visível no mobile. */
.tasmota-splitter {
  display: none;
}

/* Lista esquerda */
.tasmota-list {
  border-right: 1px solid var(--line-1);
  background: var(--bg-2);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.tasmota-list__search {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-1);
}
.tasmota-list__items {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0 12px;
}
.tasmota-cat__head {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--text-3);
  text-transform: uppercase;
  padding: 10px 12px 4px;
  position: sticky;
  top: 0;
  background: var(--bg-2);
}
.tasmota-item {
  padding: 6px 12px;
  cursor: pointer;
  border-left: 2px solid transparent;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "star name" "star title";
  column-gap: 8px;
  row-gap: 1px;
  align-items: center;
  transition: background 0.1s;
}
.tasmota-item:hover { background: var(--bg-3); }
.tasmota-item.is-active {
  background: var(--bg-3);
  border-left-color: var(--accent);
}
.tasmota-item__star {
  grid-area: star;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-4);
  padding: 2px 4px;
  line-height: 1;
  transition: color 0.15s, transform 0.15s;
  border-radius: 3px;
}
.tasmota-item__star:hover {
  color: var(--accent);
  transform: scale(1.15);
}
.tasmota-item__star.is-fav {
  color: #f0b429;  /* dourado */
}
.tasmota-item__name {
  grid-area: name;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-1);
}
.tasmota-item__title {
  grid-area: title;
  font-size: 11px;
  color: var(--text-3);
}

.tasmota-cat__count {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-4);
  margin-left: 6px;
  font-weight: 400;
  letter-spacing: 0;
}

/* Status de validação JSON inline */
.tasmota-json-status {
  font-family: var(--font-mono);
  font-size: 10.5px;
  padding: 2px 0 0 2px;
  min-height: 14px;
  color: var(--text-3);
}
.tasmota-json-status.is-ok    { color: var(--signal-2); }
.tasmota-json-status.is-error { color: var(--signal-1); }
.tasmota-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--text-3);
  font-size: 12px;
}

/* Detalhe direito */
.tasmota-detail {
  overflow-y: auto;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
}
.tasmota-detail__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-3);
  text-align: center;
  gap: 6px;
}
.tasmota-detail__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line-1);
  padding-bottom: 8px;
}
.tasmota-detail__head h3 {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 18px;
  letter-spacing: 0.02em;
  color: var(--text-1);
}
.tasmota-detail__idx {
  font-size: 11px;
  color: var(--text-3);
  margin-left: 6px;
  font-weight: 400;
}
.tasmota-detail__doc {
  font-size: 11px;
  color: var(--accent);
  text-decoration: none;
  font-family: var(--font-mono);
}
.tasmota-detail__doc:hover { text-decoration: underline; }
.tasmota-detail__title {
  font-size: 13px;
  color: var(--text-2);
}
.tasmota-detail__desc-box {
  /* Container do <details>. Não tem estilo de fundo — quem desenha é o filho. */
}
.tasmota-detail__desc-toggle {
  /* <summary> clicável com label + chevron */
  cursor: pointer;
  list-style: none;             /* remove o triângulo padrão */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 2px;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.tasmota-detail__desc-toggle::-webkit-details-marker { display: none; }
.tasmota-detail__desc-toggle:hover .field__label { color: var(--text-2); }
.tasmota-detail__desc-toggle:hover .tasmota-detail__desc-chevron {
  color: var(--text-1);
  background: var(--bg-3);
}
.tasmota-detail__desc-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-radius: 4px;
  width: 22px;
  height: 22px;
  transition: transform 0.18s ease, background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.tasmota-detail__desc-box[open] .tasmota-detail__desc-chevron {
  transform: rotate(180deg);
}
.tasmota-detail__desc {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.5;
  padding: 8px 12px;
  background: var(--bg-2);
  border-left: 2px solid var(--line-2);
  border-radius: 0 var(--radius-1) var(--radius-1) 0;
  /* Preserva quebras de linha da doc (\n) e limita a ~6 linhas com scroll */
  white-space: pre-wrap;
  word-break: break-word;
  max-height: calc(6 * 1.5em + 16px);
  overflow-y: auto;
}
/* Renderização markdown inline dentro da descrição (doc oficial Tasmota) */
.tasmota-detail__desc code {
  background: var(--bg-3);
  color: var(--text-1);
  padding: 1px 5px;
  border-radius: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  white-space: nowrap;
}
.tasmota-detail__desc a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--accent-dim);
  text-underline-offset: 2px;
}
.tasmota-detail__desc a:hover {
  text-decoration-color: var(--accent);
}
.tasmota-detail__desc strong { color: var(--text-1); font-weight: 600; }
.tasmota-detail__desc em     { font-style: italic; color: var(--text-2); }
.tasmota-detail__hint {
  margin: 0;
  font-size: 12px;
  color: var(--text-3);
  font-style: italic;
}

.tasmota-detail__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tasmota-topic-suggest {
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-2);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
}
.tasmota-topic-suggest__row {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 11px;
}
.tasmota-topic-suggest__label {
  color: var(--text-3);
  flex-shrink: 0;
  min-width: 60px;
}
.tasmota-topic-suggest__row code {
  color: var(--text-1);
  background: var(--bg-3);
  padding: 1px 6px;
  border-radius: var(--radius-1);
  word-break: break-all;
}
.tasmota-topic-suggest__row code.tasmota-topic-suggest__new {
  color: var(--accent);
}

.tasmota-detail__examples {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tasmota-detail__examples-label,
.tasmota-detail__preview-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--text-3);
  text-transform: uppercase;
}
.tasmota-detail__examples code {
  font-family: var(--font-mono);
  font-size: 11.5px;
  background: var(--bg-2);
  padding: 4px 8px;
  border-radius: var(--radius-1);
  color: var(--text-2);
  display: block;
}
.tasmota-detail__examples-hint {
  font-family: var(--font-sans, inherit);
  font-size: 10px;
  font-weight: 400;
  color: var(--text-4);
  text-transform: none;
  letter-spacing: 0;
  margin-left: 4px;
}
.tasmota-example {
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  word-break: break-all;
  white-space: pre-wrap;
}
.tasmota-example:hover {
  background: var(--bg-3) !important;
  border-color: var(--accent);
  color: var(--text-1) !important;
}
.tasmota-example:active {
  transform: scale(0.99);
}

.tasmota-detail__preview {
  background: var(--bg-2);
  border: 1px dashed var(--accent);
  border-radius: var(--radius-2);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tasmota-detail__preview-row {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 10px;
  align-items: baseline;
  font-size: 12px;
}
.tasmota-detail__preview-row > span {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.tasmota-detail__preview-row code {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-1);
  word-break: break-all;
  white-space: pre-wrap;
}

/* Mobile: dialog Tasmota fullscreen, painéis empilhados */
@media (max-width: 900px) {
  .dialog--tasmota {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100dvh;
    max-height: var(--app-h, 100dvh);
    border-radius: 0;
    border: none;
    margin: 0;
  }
  .tasmota-dialog__form {
    /* altura total e grid auto/1fr/auto mantém o footer sempre visível */
    height: 100dvh;
    height: var(--app-h, 100dvh);
    max-height: 100dvh;
    max-height: var(--app-h, 100dvh);
  }
  .tasmota-dialog__body {
    grid-template-columns: 1fr;
    grid-template-rows: var(--tasmota-split, 40%) 14px 1fr;
    min-height: 0;
  }
  .tasmota-list {
    border-right: none;
    border-bottom: none;
  }
  .tasmota-splitter {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-2);
    border-top: 1px solid var(--line-1);
    border-bottom: 1px solid var(--line-1);
    cursor: ns-resize;
    touch-action: none;       /* evita scroll nativo durante drag */
    -webkit-tap-highlight-color: transparent;
    position: relative;
  }
  .tasmota-splitter::before {
    /* "alça" visível: 3 pontinhos horizontais */
    content: '';
    width: 36px;
    height: 3px;
    border-radius: 2px;
    background: var(--line-3);
  }
  .tasmota-splitter:active::before,
  .tasmota-splitter.is-dragging::before {
    background: var(--accent);
  }
  .tasmota-splitter.is-dragging {
    background: var(--bg-3);
  }
  /* Footer com safe-area pra ficar acima da home indicator no iPhone */
  .dialog--tasmota .dialog__foot {
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
}
/* Durante resize, impede seleção de texto e muda cursor globalmente */
body.is-resizing-ns, body.is-resizing-ns * {
  cursor: ns-resize !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

/* ============================================================
   ROUTINES DIALOG
   ============================================================ */
.dialog--routines {
  width: min(720px, 96vw);
  max-width: 720px;
  height: min(640px, 90vh);
  max-height: 90vh;
}
.routines-dialog__form {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}
.routines-dialog__body {
  overflow-y: auto;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
}

/* Tópico alvo (info) */
.routine-target {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: var(--bg-2);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-2) var(--radius-2) 0;
}
.routine-target__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--text-3);
  text-transform: uppercase;
}
.routine-target code {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-1);
  word-break: break-all;
}

/* Lista de rotinas */
.routines-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.routine-item {
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-2);
  padding: 12px 14px;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color 0.15s, background 0.15s, transform 0.05s;
  font-family: inherit;
}
.routine-item:hover {
  border-color: var(--accent);
  background: var(--bg-3);
}
.routine-item:active {
  transform: scale(0.99);
}
.routine-item__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
}
.routine-item__desc {
  font-size: 11.5px;
  color: var(--text-3);
  line-height: 1.4;
}

/* Tela de execução */
.routine-config {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-1);
}
.routine-log {
  flex: 1;
  background: var(--bg-3);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-2);
  padding: 8px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  overflow-y: auto;
  min-height: 200px;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.routine-log__line {
  display: grid;
  grid-template-columns: 70px 18px 1fr;
  gap: 6px;
  align-items: baseline;
  padding: 1px 0;
  word-break: break-word;
}
.routine-log__time { color: var(--text-4); font-size: 10px; }
.routine-log__icon { text-align: center; }
.routine-log__msg  { color: var(--text-2); white-space: pre-wrap; }
.routine-log__line--cmd   .routine-log__msg  { color: var(--accent); }
.routine-log__line--cmd   .routine-log__icon { color: var(--accent); }
.routine-log__line--recv  .routine-log__msg  { color: var(--text-1); }
.routine-log__line--recv  .routine-log__icon { color: var(--text-2); }
.routine-log__line--ok    .routine-log__msg,
.routine-log__line--ok    .routine-log__icon { color: var(--signal-2); }
.routine-log__line--warn  .routine-log__msg,
.routine-log__line--warn  .routine-log__icon { color: #d4a73e; }
.routine-log__line--error .routine-log__msg,
.routine-log__line--error .routine-log__icon { color: var(--signal-1); }

/* Tela de seleção de devices */
.routine-help {
  font-size: 12px;
  color: var(--text-3);
  margin: 0;
}
.routine-help code {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--bg-2);
  padding: 1px 5px;
  border-radius: var(--radius-1);
}
.device-actions {
  display: flex;
  gap: 8px;
}
.btn--sm {
  padding: 4px 10px;
  font-size: 10px;
}
.device-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 100%;
  overflow-y: auto;
}
.device-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}
.device-section__head {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: var(--radius-1);
  background: var(--bg-2);
  color: var(--text-2);
  position: sticky;
  top: 0;
  z-index: 1;
}
.device-section__head--warn {
  background: rgba(212, 167, 62, 0.12);
  color: #b88a00;
  border-left: 3px solid #d4a73e;
}
.device-section__head--ok {
  background: rgba(80, 180, 120, 0.10);
  color: var(--signal-2);
  border-left: 3px solid var(--signal-2);
}
.device-section__hint {
  font-family: var(--font-sans, inherit);
  font-size: 10px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.8;
  margin-left: 4px;
}
.device-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-1);
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
}
.device-item:hover { background: var(--bg-3); border-color: var(--line-2); }
.device-item--inactive {
  border-left: 3px solid #d4a73e;
}
.device-item input[type="checkbox"] { cursor: pointer; transform: scale(1.1); }
.device-item__main {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.device-item__addr {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-1);
}
.device-item__name {
  font-size: 11px;
  color: var(--text-3);
}
.device-item__ieee {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-4);
}
.device-item__lastseen {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-3);
  white-space: nowrap;
  text-align: right;
}
.device-item--inactive .device-item__lastseen {
  color: #b88a00;
  font-weight: 600;
}

/* Botão danger (vermelho) usado no remover */
.btn--danger {
  background: var(--signal-1);
  color: white;
  border: 1px solid var(--signal-1);
}
.btn--danger:hover { filter: brightness(1.1); }

/* Mobile fullscreen pro routines dialog */
@media (max-width: 900px) {
  .dialog--routines {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100dvh;
    max-height: var(--app-h, 100dvh);
    border-radius: 0;
    border: none;
    margin: 0;
  }
  .routines-dialog__form {
    height: 100dvh;
    height: var(--app-h, 100dvh);
    max-height: 100dvh;
    max-height: var(--app-h, 100dvh);
  }
  .dialog--routines .dialog__foot {
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .routine-log { min-height: 150px; font-size: 10.5px; }
  .routine-log__line { grid-template-columns: 56px 16px 1fr; gap: 4px; }
}

/* ============================================================
   TOASTS
   ============================================================ */
.toasts {
  position: fixed;
  bottom: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 100;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--signal-2);
  padding: 10px 14px;
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-pop);
  font-size: 12px;
  max-width: 360px;
  animation: toast-in 0.25s ease-out;
}
.toast--error { border-left-color: var(--signal-err); }
.toast--ok    { border-left-color: var(--signal-1); }
.toast--warn  { border-left-color: var(--signal-warn); }

/* Toast de atualização — persistente, mais destacado */
.toast--update {
  border-left-color: var(--accent);
  background: var(--bg-1);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 12px 16px;
  max-width: 400px;
}
.toast--update .toast__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 2px;
}
.toast--update .toast__body strong {
  font-size: 13px;
  color: var(--text-1);
}
.toast--update .toast__body span {
  font-size: 11px;
  color: var(--text-3);
}
.toast--update .toast__action {
  background: var(--accent);
  color: #1a1103;
  border: none;
  padding: 7px 12px;
  border-radius: var(--radius-2);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.05em;
  cursor: pointer;
  flex-shrink: 0;
}
.toast--update .toast__action:hover:not(:disabled) { background: #a5caeb; }
.toast--update .toast__action:disabled { opacity: 0.6; cursor: wait; }
.toast--update .toast__close {
  background: transparent;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 4px 6px;
  flex-shrink: 0;
}
.toast--update .toast__close:hover { color: var(--text-1); }

@keyframes toast-in {
  from { transform: translateX(20px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

.mobile-back {
  display: none;    /* visível só no mobile via media query */
  background: transparent;
  border: none;
  color: var(--text-2);
  padding: 4px 8px 4px 0;
  margin-right: 2px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.mobile-back:hover { color: var(--accent); }

.mobile-tabs {
  display: none;
}

/* ============================================================
   RESPONSIVE: TABLET (só entre 900px e 1100px)
   ============================================================ */
@media (min-width: 901px) and (max-width: 1100px) {
  /* Em tablets, publish vira drawer embaixo */
  .layout {
    grid-template-columns: minmax(240px, 300px) 1fr;
    grid-template-rows: 1fr;
  }
  .panel--publish {
    grid-column: 1 / -1;
    grid-row: 2;
    max-height: 40vh;
    display: none;
  }
  .layout[data-tablet-pub="open"] {
    grid-template-rows: 1fr auto;
  }
  .layout[data-tablet-pub="open"] .panel--publish { display: flex; }
}

/* ============================================================
   RESPONSIVE: MOBILE (até ~900px ou qualquer touch em retrato)
   Estratégia: navegação por abas. Só um painel visível por vez.
   ============================================================ */
@media (max-width: 900px) {
  :root { --topbar-h: 48px; }

  body {
    /* Topbar + layout + mobile-tabs + safe-area */
    grid-template-rows: var(--topbar-h) minmax(0, 1fr) auto;
  }

  /* Layout não pode estourar o grid; painéis precisam caber e scrollar internamente */
  .layout {
    min-height: 0;
    overflow: hidden;
  }
  .panel {
    min-height: 0;
    overflow: hidden;
  }

  /* Topbar compacto */
  .topbar {
    grid-template-columns: auto 1fr auto;
    gap: 8px;
    padding: 0 10px;
  }
  .brand-text { display: none; }   /* mantém só o ícone */
  .topbar__status {
    padding: 5px 10px;
    font-size: 10px;
    gap: 6px;
  }
  .status-meta { display: none; }
  .topbar__actions .btn { padding: 6px 10px; font-size: 10px; letter-spacing: 0.05em; }
  .topbar__actions .btn--icon { padding: 6px 8px; }

  /* Layout vira single-column: um painel visível por vez */
  .layout {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
    height: 100%;
  }
  .panel {
    grid-column: 1;
    grid-row: 1;
    display: none;
  }
  .layout[data-mobile-view="tree"]    .panel--tree    { display: flex; height: 100%; flex-direction: column; max-height: none; grid-row: 1; }
  .layout[data-mobile-view="detail"]  .panel--detail  { display: flex; height: 100%; flex-direction: column; max-height: none; grid-row: 1; }
  .layout[data-mobile-view="publish"] .panel--publish { display: flex; height: 100%; flex-direction: column; max-height: none; grid-row: 1; grid-column: 1; }

  /* Botão voltar visível dentro do painel de mensagem no mobile */
  .panel--detail .mobile-back { display: inline-flex; }

  /* Barra de navegação mobile visível */
  .mobile-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: var(--bg-1);
    border-top: 1px solid var(--line-1);
    /* Respeita safe-area do iPhone (home indicator) */
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .mtab {
    background: transparent;
    border: none;
    color: var(--text-3);
    padding: 10px 4px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: color 0.15s;
    position: relative;
  }
  .mtab svg { opacity: 0.7; transition: opacity 0.15s; }
  .mtab--active {
    color: var(--accent);
  }
  .mtab--active svg { opacity: 1; }
  .mtab--active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 25%;
    right: 25%;
    height: 2px;
    background: var(--accent);
    border-radius: 0 0 2px 2px;
  }
  .mtab__badge {
    position: absolute;
    top: 6px;
    right: calc(50% - 22px);
    background: var(--accent);
    color: #1a1103;
    font-weight: 600;
    min-width: 16px;
    height: 16px;
    border-radius: 100px;
    font-size: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
  }

  /* Inputs precisam ter font-size ≥ 16px para Safari não dar zoom
     automático ao focar campos em iOS */
  .input, .input--area, .input--search, select.input, textarea.input {
    font-size: 16px;
    padding: 10px 12px;
  }
  .input--search { padding-left: 32px; background-position: 10px 50%; }

  /* Buttons um pouco maiores no mobile para toque confortável */
  .btn { padding: 10px 14px; font-size: 12px; }
  .btn--primary, .btn--accent { min-height: 40px; }

  /* Dialog em tela cheia no mobile */
  .dialog {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
    border: none;
    margin: 0;
    /* Usa viewport dinâmico real (exclui home indicator no iPhone standalone) */
    max-height: 100dvh;
    max-height: var(--app-h, 100dvh);
  }
  .dialog__form {
    grid-template-rows: auto 1fr auto;
    max-height: 100dvh;
    max-height: var(--app-h, 100dvh);
    height: 100dvh;
    height: var(--app-h, 100dvh);
  }
  .dialog__body {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }
  .dialog__foot {
    /* Garante que o footer fique acima da home indicator no iPhone */
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .saved-connections {
    border-right: none;
    border-bottom: 1px solid var(--line-1);
    max-height: 30vh;
  }

  /* Pub form com espaçamento maior no mobile */
  .pub-form { gap: 14px; padding: 16px; padding-bottom: 32px; }
  .conn-fields { padding: 16px; padding-bottom: 32px; }

  /* History list: 1 coluna em vez de grid com tempo à esquerda */
  .history-list li {
    grid-template-columns: 1fr;
    gap: 2px;
    padding: 10px 14px;
  }
  .history-time { font-size: 10px; }

  /* No mobile, a altura é preciosa: lista menor, preview maior */
  .history-split {
    grid-template-rows: 40% 60%;
  }

  /* Tabs da mensagem com mais padding */
  .tabs { padding: 0 8px; }
  .tab { padding: 12px 12px; font-size: 12px; }

  /* Status dot mais proeminente sem texto */
  .topbar__status { border-radius: 100px; }

  /* Panel heads compactos */
  .panel__head { padding: 10px 12px; min-height: 42px; }

  /* Tree rows mais altos no mobile (touch target) */
  .tree-row-v { height: 32px; padding: 0 12px 0 6px; font-size: 13px; }
  .tree-label { font-size: 13px; }

  /* Toasts acima da tab bar */
  .toasts { bottom: 72px; right: 12px; left: 12px; }
  .toast { max-width: 100%; }

  /* Field rows viram coluna para caber melhor */
  .field-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .field-row .check { align-self: flex-start; }
  .field--compact { flex: 1 1 auto; }
}

/* ============================================================
   Mobile retrato muito apertado
   ============================================================ */
@media (max-width: 380px) {
  .topbar__status .status-text { display: none; }
  .mtab span { font-size: 9px; }
}

/* ============================================================
   CONSOLE DIALOG
   ============================================================ */
.dialog--console {
  width: min(900px, 96vw);
  max-width: 900px;
  height: min(680px, 90vh);
  max-height: 90vh;
}
.dialog--console .dialog__frame {
  display: grid;
  grid-template-rows: auto auto 1fr auto auto;
  height: 100%;
  min-height: 0;
}

/* Header */
.console-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}
.console-head__device {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  background: var(--bg-3);
  padding: 3px 8px;
  border-radius: var(--radius-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
}
.console-head__actions {
  display: flex;
  gap: 6px;
  align-items: center;
}
.console-head__actions .icon-btn.is-active {
  color: var(--accent);
  background: var(--bg-3);
}

/* Toolbar de filtro + legenda */
.console-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line-1);
  background: var(--bg-1);
}
.console-filter {
  flex: 1;
  min-width: 0;
}
.console-legend {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.console-legend__item {
  display: inline-flex;
}

/* Chip colorido por prefixo */
.console-kind {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 1px 6px;
  border-radius: 3px;
  text-align: center;
  min-width: 42px;
  line-height: 1.5;
  flex-shrink: 0;
}
.console-kind--cmnd {
  color: var(--signal-2);
  background: color-mix(in srgb, var(--signal-2) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--signal-2) 40%, transparent);
}
.console-kind--stat {
  color: var(--signal-1);
  background: color-mix(in srgb, var(--signal-1) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--signal-1) 40%, transparent);
}
.console-kind--tele {
  color: var(--signal-warn);
  background: color-mix(in srgb, var(--signal-warn) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--signal-warn) 40%, transparent);
}

/* Corpo da lista de mensagens */
.console-body {
  overflow-y: auto;
  background: var(--bg-0);
  padding: 6px 0;
  min-height: 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.5;
}
.console-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-3);
  font-family: var(--font-sans);
  font-size: 13px;
}
.console-empty__hint {
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-4);
}
.console-rows {
  display: block;
}

/* Linha individual */
.console-row {
  display: grid;
  grid-template-columns: 96px 52px auto 1fr auto;
  align-items: baseline;
  gap: 8px;
  padding: 2px 12px;
  border-bottom: 1px solid transparent;
  word-break: break-word;
  position: relative;
}
.console-row:hover { background: var(--bg-2); }
.console-row[data-expandable="1"] { cursor: pointer; }
.console-row[data-expandable="1"]:hover { background: var(--bg-hover); }

.console-time {
  color: var(--text-4);
  font-size: 10.5px;
  white-space: nowrap;
}
.console-topic {
  color: var(--text-2);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
.console-payload {
  color: var(--text-1);
  word-break: break-word;
  min-width: 0;
  overflow-wrap: anywhere;
}
.console-payload--empty {
  color: var(--text-4);
  font-style: italic;
}
.console-payload--bin {
  color: var(--signal-warn);
}
.console-payload--json {
  color: var(--syn-string);
}
pre.console-payload--json {
  grid-column: 3 / -1;   /* ocupa da coluna tópico até o fim, quando expandido */
  margin: 4px 0;
  padding: 8px 10px;
  background: var(--bg-2);
  border-left: 2px solid var(--accent-dim);
  border-radius: 0 var(--radius-1) var(--radius-1) 0;
  white-space: pre-wrap;
  overflow-x: auto;
  color: var(--text-1);
  font-size: 11px;
}

/* Badges retained / qos */
.console-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  padding: 0 5px;
  border-radius: 3px;
  background: var(--bg-3);
  color: var(--text-2);
  border: 1px solid var(--line-2);
  line-height: 1.6;
  flex-shrink: 0;
}

/* Rodapé: autoscroll + contador */
.dialog--console .dialog__foot {
  align-items: center;
}
.console-autoscroll {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-3);
  cursor: pointer;
  user-select: none;
}
.console-autoscroll input {
  margin: 0;
  cursor: pointer;
}
.console-count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
  margin-left: 12px;
  white-space: nowrap;
}

/* Mobile */
@media (max-width: 900px) {
  .dialog--console {
    width: 100vw;
    max-width: 100vw;
    height: var(--app-h, 100dvh);
    max-height: var(--app-h, 100dvh);
    margin: 0;
    border-radius: 0;
  }
  .console-row {
    grid-template-columns: 72px 46px 1fr;
    grid-template-areas:
      "time kind topic"
      "payload payload payload";
    row-gap: 2px;
    padding: 4px 10px 6px;
    border-bottom: 1px solid var(--line-1);
  }
  .console-time   { grid-area: time; }
  .console-kind   { grid-area: kind; }
  .console-topic  { grid-area: topic; max-width: none; }
  .console-payload,
  pre.console-payload--json {
    grid-area: payload;
    grid-column: 1 / -1;
    margin-left: 0;
    max-width: 100%;
  }
  .console-badge {
    /* no mobile os badges aparecem inline ao lado do tópico */
    position: absolute;
    right: 10px;
  }
  .console-head__device { max-width: 50%; font-size: 10px; }
  .dialog--console .dialog__foot {
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    flex-wrap: wrap;
    gap: 8px;
  }
  .console-count { margin-left: auto; }
  /* Input: mais compacto, com safe-area */
  .console-input-row {
    padding: 6px 10px;
  }
  .console-input {
    font-size: 13px;       /* 13+ px evita auto-zoom no iOS ao focar */
    max-height: 96px;
  }
  .console-input-prompt { font-size: 13px; padding: 5px 0; }
  .console-send {
    padding: 8px 10px;
    min-height: 36px;
  }
  /* Dropdown ocupa quase toda a largura disponível, max 60% da altura da tela */
  .console-suggest {
    left: 8px;
    right: 8px;
    max-height: min(60vh, 340px);
  }
  .console-suggest__item {
    padding: 10px 12px;         /* alvo de toque maior */
    font-size: 13px;
  }
  .console-suggest__title {
    display: none;              /* economiza espaço no mobile */
  }
  .console-toast {
    left: 8px;
    right: 8px;
    font-size: 12px;
  }
}

/* ============================================================
   CONSOLE — input + autocomplete + toast
   ============================================================ */
.console-input-wrap {
  position: relative;
  border-top: 1px solid var(--line-1);
  background: var(--bg-1);
  flex-shrink: 0;
}
.console-input-row {
  display: flex;
  align-items: flex-start;   /* alinhar pelo topo — garante que prompt e textarea comecem na mesma linha */
  gap: 8px;
  padding: 8px 12px;
}
.console-input-prompt {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  /* Alinha com a primeira linha do textarea: padding-top do textarea (6px)
     + compensação de altura de linha (prompt é 14px, textarea text é 12px * 1.5 = 18px baseline) */
  padding: 7px 0;
  line-height: 1.4;
  flex-shrink: 0;
  user-select: none;
}
.console-input {
  flex: 1;
  min-width: 0;
  resize: none;
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  color: var(--text-1);
  border-radius: var(--radius-2);
  padding: 6px 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  outline: none;
  transition: border-color 0.12s;
  min-height: 32px;    /* garante altura visível mesmo quando vazio */
  max-height: 120px;
  overflow-y: auto;
  overflow-x: hidden;  /* previne scroll horizontal (quirk em alguns browsers) */
  display: block;      /* evita quirks de inline-block em textarea */
  text-indent: 0;      /* defensivo: evita herança de text-indent */
  white-space: pre-wrap;
  word-wrap: break-word;
}
.console-input:focus {
  border-color: var(--accent);
  background: var(--bg-1);
}
.console-input::placeholder {
  color: var(--text-4);
  font-family: var(--font-mono);
}
.console-send {
  flex-shrink: 0;
  padding: 7px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-height: 32px;   /* casa com min-height do textarea */
}

/* Dropdown de sugestões — flutua acima do input */
.console-suggest {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 100%;
  margin-bottom: 4px;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-pop);
  overflow-y: auto;
  max-height: 280px;
  z-index: 10;
}
.console-suggest[hidden] { display: none; }
.console-suggest__item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--line-1);
  font-size: 12px;
}
.console-suggest__item:last-child { border-bottom: none; }
.console-suggest__item:hover {
  background: var(--bg-2);
}
.console-suggest__item.is-selected {
  background: var(--bg-3);
}
.console-suggest__item.is-selected .console-suggest__name {
  color: var(--accent);
}
.console-suggest__name {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text-1);
  flex-shrink: 0;
}
.console-suggest__title {
  color: var(--text-3);
  font-size: 11px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.console-suggest__cat {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-4);
  background: var(--bg-3);
  padding: 1px 6px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* Toast (mensagem de aviso/erro sobre envio) */
.console-toast {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 100%;
  margin-bottom: 4px;
  padding: 8px 12px;
  border-radius: var(--radius-2);
  font-size: 12px;
  z-index: 11;
  box-shadow: var(--shadow-pop);
}
.console-toast[hidden] { display: none; }
.console-toast--warn {
  background: color-mix(in srgb, var(--signal-warn) 18%, var(--bg-1));
  color: var(--signal-warn);
  border: 1px solid color-mix(in srgb, var(--signal-warn) 45%, transparent);
}
.console-toast--error {
  background: color-mix(in srgb, var(--signal-err) 18%, var(--bg-1));
  color: var(--signal-err);
  border: 1px solid color-mix(in srgb, var(--signal-err) 45%, transparent);
}
.console-toast--info {
  background: var(--bg-2);
  color: var(--text-2);
  border: 1px solid var(--line-2);
}

/* ============================================================
   CONFIG DIALOG
   ============================================================ */
.dialog--config {
  width: min(960px, 96vw);
  max-width: 960px;
  height: min(720px, 92vh);
  max-height: 92vh;
}
.dialog--config .dialog__frame {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  min-height: 0;
  position: relative;     /* âncora dos sub-modais (overlay absolute) */
}

/* Header */
.config-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}
.config-head__device {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  background: var(--bg-3);
  padding: 3px 8px;
  border-radius: var(--radius-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
}

/* Body: menu lateral + pane (desktop) */
.config-body {
  display: grid;
  grid-template-columns: 200px 1fr;
  overflow: hidden;
  min-height: 0;
}

/* Nav lateral */
.config-nav {
  border-right: 1px solid var(--line-1);
  background: var(--bg-2);
  padding: 10px 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.config-nav__item {
  appearance: none;
  background: transparent;
  border: none;
  padding: 10px 14px;
  text-align: left;
  color: var(--text-2);
  font-size: 13px;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  white-space: nowrap;
}
.config-nav__item:hover:not(:disabled):not(.is-active) {
  background: var(--bg-3);
  color: var(--text-1);
}
.config-nav__item.is-active {
  background: var(--bg-1);
  color: var(--accent);
  border-left-color: var(--accent);
  font-weight: 600;
}
.config-nav__item:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.config-nav__icon {
  display: inline-flex;
  flex-shrink: 0;
  color: currentColor;
  width: 16px;
  height: 16px;
  align-items: center;
  justify-content: center;
}
.config-nav__label { flex: 1; }
.config-nav__soon {
  font-size: 9px;
  color: var(--text-4);
  background: var(--bg-3);
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: normal;
  letter-spacing: 0.05em;
}

/* Pane (área de conteúdo) */
.config-pane {
  overflow-y: auto;
  padding: 18px 22px;
  min-width: 0;
}
.config-pane__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-1);
}
.config-pane__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-1);
}
.config-pane__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.config-updated {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
}

/* Botão pequeno (variante de .btn) */
.btn--sm {
  padding: 5px 10px;
  font-size: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Sections de Info: cada uma é uma "card" agrupando KV pairs */
.config-section {
  margin-bottom: 22px;
}
.config-section__title {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 8px;
  font-weight: 600;
}
.config-kv {
  display: grid;
  grid-template-columns: minmax(140px, 30%) 1fr;
  gap: 4px 16px;
  margin: 0;
  padding: 12px 14px;
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-2);
  font-size: 12px;
}
.config-kv dt {
  color: var(--text-3);
  padding: 3px 0;
  font-weight: normal;
}
.config-kv dd {
  margin: 0;
  padding: 3px 0;
  color: var(--text-1);
  font-family: var(--font-mono);
  word-break: break-word;
  overflow-wrap: anywhere;
}
.config-kv dt.is-missing,
.config-kv dd.is-missing {
  color: var(--signal-err);
}
.config-kv dd.is-missing {
  font-style: italic;
}
.config-kv__hint {
  display: block;
  margin-top: 2px;
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--text-3);
  font-style: italic;
}

/* Empty state / Loading */
.config-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-3);
}
.config-empty__title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text-2);
}
.config-empty__hint {
  font-size: 12px;
  color: var(--text-4);
  font-family: var(--font-mono);
}
.config-empty__hint code {
  background: var(--bg-3);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
}
.config-empty--error .config-empty__title { color: var(--signal-warn); }
.config-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--line-2);
  border-top-color: var(--accent);
  border-radius: 50%;
  margin: 0 auto 14px;
  animation: config-spin 0.7s linear infinite;
}
@keyframes config-spin { to { transform: rotate(360deg); } }
.config-warn {
  background: color-mix(in srgb, var(--signal-warn) 12%, var(--bg-1));
  color: var(--signal-warn);
  border: 1px solid color-mix(in srgb, var(--signal-warn) 40%, transparent);
  padding: 8px 12px;
  border-radius: var(--radius-2);
  font-size: 12px;
  margin-bottom: 14px;
}

/* Tela Reiniciar */
.config-restart__intro {
  font-size: 12px;
  color: var(--text-3);
  margin: 0 0 16px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--signal-warn) 8%, var(--bg-1));
  border-left: 3px solid var(--signal-warn);
  border-radius: 0 var(--radius-1) var(--radius-1) 0;
  line-height: 1.5;
}
.config-restart__intro strong { color: var(--signal-warn); }
.config-restart__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.config-restart__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-2);
}
.config-restart__item.is-destructive {
  border-color: color-mix(in srgb, var(--signal-err) 30%, var(--line-2));
  background: color-mix(in srgb, var(--signal-err) 5%, var(--bg-2));
}
.config-restart__info { flex: 1; min-width: 0; }
.config-restart__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: 2px;
}
.config-restart__help {
  font-size: 11px;
  color: var(--text-3);
}
.btn--danger {
  --btn-bg: color-mix(in srgb, var(--signal-err) 14%, var(--bg-1));
  --btn-fg: var(--signal-err);
  --btn-border: color-mix(in srgb, var(--signal-err) 45%, transparent);
}
.btn--danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--signal-err) 22%, var(--bg-1));
  border-color: var(--signal-err);
}

/* ============== Mobile ============== */
@media (max-width: 900px) {
  .dialog--config {
    width: 100vw;
    max-width: 100vw;
    height: var(--app-h, 100dvh);
    max-height: var(--app-h, 100dvh);
    margin: 0;
    border-radius: 0;
  }
  /* Vira stack: tabs no topo, conteúdo abaixo */
  .config-body {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .config-nav {
    flex-direction: row;
    border-right: none;
    border-bottom: 1px solid var(--line-1);
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0;
    gap: 0;
  }
  .config-nav__item {
    border-left: none;
    border-bottom: 2px solid transparent;
    padding: 11px 14px;
    flex-shrink: 0;
    font-size: 12px;
  }
  .config-nav__item.is-active {
    border-left-color: transparent;
    border-bottom-color: var(--accent);
    background: var(--bg-1);
  }
  .config-nav__label {
    /* Reduz label no mobile mas mantém pra ler */
  }
  .config-nav__soon {
    display: none;  /* não cabe inline no mobile */
  }
  .config-pane {
    padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px));
  }
  .config-pane__head {
    flex-wrap: wrap;
    gap: 8px;
  }
  .config-kv {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .config-kv dt {
    color: var(--text-4);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 6px 0 0;
  }
  .config-kv dd {
    padding: 0 0 6px;
    border-bottom: 1px solid var(--line-1);
  }
  .config-kv dd:last-of-type { border-bottom: none; }
  .config-restart__item {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .config-restart__item .btn {
    align-self: stretch;
  }
}

/* ============================================================
   CONFIG — sub-modais (confirm/alert/input customizados)
   ============================================================ */
.config-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
  animation: cmFade 0.15s ease;
}
@keyframes cmFade { from { opacity: 0; } to { opacity: 1; } }
.config-modal {
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-2);
  width: min(440px, 100%);
  box-shadow: 0 12px 36px rgba(0,0,0,0.35);
  display: flex;
  flex-direction: column;
  animation: cmPop 0.18s cubic-bezier(0.2, 0.8, 0.4, 1.2);
}
@keyframes cmPop {
  from { transform: scale(0.92) translateY(8px); opacity: 0; }
  to   { transform: scale(1) translateY(0);     opacity: 1; }
}
.config-modal.is-destructive {
  border-color: color-mix(in srgb, var(--signal-err) 50%, var(--line-2));
}
.config-modal__head {
  padding: 14px 18px 4px;
}
.config-modal__title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: 0.02em;
}
.config-modal.is-destructive .config-modal__title {
  color: var(--signal-err);
}
.config-modal__body {
  padding: 6px 18px 14px;
}
.config-modal__msg {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
}
.config-modal__detail {
  margin: 0;
  font-size: 11px;
  color: var(--text-3);
}
.config-modal__detail code {
  background: var(--bg-3);
  padding: 2px 6px;
  border-radius: 3px;
  font-family: var(--font-mono);
  word-break: break-all;
}
.config-modal__input {
  width: 100%;
  margin-top: 10px;
  padding: 8px 10px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-1);
  color: var(--text-1);
  font-family: var(--font-mono);
  font-size: 13px;
  outline: none;
  transition: border-color 0.12s;
  box-sizing: border-box;
}
.config-modal__input:focus { border-color: var(--accent); background: var(--bg-1); }
.config-modal.is-destructive .config-modal__input:focus { border-color: var(--signal-err); }
.config-modal__foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px 14px;
  border-top: 1px solid var(--line-1);
}

/* ============================================================
   CONFIG — formulário de Configuração (WiFi, MQTT)
   ============================================================ */
.config-form {
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-2);
  padding: 14px 16px 12px;
  margin-bottom: 18px;
}
.config-form__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line-1);
}
.config-form__title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: 0.04em;
}
.config-form__current {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
}
.config-field {
  display: grid;
  grid-template-columns: 130px 1fr;
  align-items: center;
  gap: 6px 14px;
  padding: 6px 0;
}
.config-field__label {
  font-size: 12px;
  color: var(--text-2);
  font-weight: 500;
}
.config-field__input {
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-1);
  padding: 6px 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-1);
  outline: none;
  transition: border-color 0.12s, background 0.12s;
  min-width: 0;
}
.config-field__input:focus {
  border-color: var(--accent);
  background: var(--bg-1);
}
.config-field__input.is-modified {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-1));
}
.config-field__current {
  grid-column: 2;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
  padding: 0 2px;
}
.config-field__current code {
  background: transparent;
  color: var(--text-2);
  padding: 0;
}
.config-field__current em {
  font-style: italic;
  color: var(--text-4);
}
.config-field__hint {
  grid-column: 2;
  font-size: 11px;
  color: var(--text-3);
  font-style: italic;
  padding: 0 2px;
}
.config-form__foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--line-1);
}

/* Mobile: campos viram stack */
@media (max-width: 900px) {
  .config-field {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .config-field__label {
    /* no mobile mantém o ícone colado no label, alinhado à esquerda */
    justify-content: flex-start;
    width: 100%;
  }
  .config-field__current,
  .config-field__hint {
    grid-column: 1;
  }
}

/* ============================================================
   CONFIG — aba Atualização firmware
   ============================================================ */
.firmware-version {
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-2);
  padding: 14px 16px 12px;
  margin-bottom: 18px;
}
.firmware-version__main {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 6px;
}
.firmware-version__num {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
}
.firmware-version__meta {
  font-size: 12px;
  color: var(--text-3);
}
.firmware-version__meta code {
  background: var(--bg-3);
  color: var(--text-2);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
}
.firmware-version__hint {
  font-size: 11px;
  color: var(--text-3);
  margin: 6px 0 0;
}
.firmware-version__hint a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--accent-dim);
}

/* Lista de builds */
.firmware-builds__intro {
  font-size: 12px;
  color: var(--text-3);
  margin: 0 0 10px;
  line-height: 1.5;
}
.firmware-builds {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-2);
  overflow: hidden;
}
.firmware-build {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-1);
}
.firmware-build:last-child { border-bottom: none; }
.firmware-build:hover { background: var(--bg-3); }
.firmware-build__info { flex: 1; min-width: 0; }
.firmware-build__name {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-1);
}
.firmware-build__desc {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 1px;
}

/* Card de ação */
.firmware-action {
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-2);
  padding: 14px 16px 12px;
}
.firmware-action__buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.firmware-action__buttons .btn {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.firmware-weblink {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--accent-dim);
}

@media (max-width: 700px) {
  .firmware-action__buttons { flex-direction: column; }
  .firmware-build {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .firmware-build .btn { align-self: flex-end; }
}

/* Comparação de versão (instalada vs latest release) */
.firmware-version__compare {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.5;
}
.firmware-compare {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-1);
  font-size: 11.5px;
}
.firmware-compare code {
  background: rgba(0,0,0,0.06);
  padding: 1px 6px;
  border-radius: 3px;
  font-family: var(--font-mono);
  color: inherit;
}
.firmware-compare--loading {
  color: var(--text-3);
  font-style: italic;
  background: var(--bg-3);
}
.firmware-compare--err {
  color: var(--signal-warn);
  background: color-mix(in srgb, var(--signal-warn) 10%, var(--bg-1));
}
.firmware-compare--ok {
  color: #1a7f3c;
  background: color-mix(in srgb, #1a7f3c 10%, var(--bg-1));
}
.firmware-compare--new {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-1));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.firmware-compare--new strong { color: var(--accent); }
.firmware-compare--dev {
  color: var(--text-3);
  background: var(--bg-3);
  font-style: italic;
}
.firmware-compare__link {
  color: inherit;
  text-decoration: underline;
  font-weight: 600;
}
.link-btn {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
}
.link-btn:hover { opacity: 0.8; }

/* ============================================================
   CONFIG — aba Logging
   ============================================================ */
.logging-help__intro {
  font-size: 12px;
  color: var(--text-3);
  margin: 0 0 10px;
  line-height: 1.55;
}
.logging-levels {
  list-style: none;
  margin: 0;
  padding: 10px 14px;
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-2);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 4px 16px;
  font-size: 12px;
  color: var(--text-2);
}
.logging-levels li {
  font-family: var(--font-mono);
}
.logging-levels code {
  background: var(--bg-3);
  padding: 1px 6px;
  border-radius: 3px;
  margin-right: 4px;
  font-size: 11px;
  color: var(--accent);
  font-weight: 600;
}
.logging-levels em {
  font-style: italic;
  color: var(--text-3);
  font-size: 11px;
}

/* select com mesmo estilo dos input */
select.config-field__input {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 26px;
  cursor: pointer;
}
select.config-field__input.is-modified {
  border-color: var(--accent);
  background-color: color-mix(in srgb, var(--accent) 6%, var(--bg-1));
}

/* Retain toggles */
.logging-retain {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.logging-retain__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-2);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.logging-retain__item:hover {
  background: var(--bg-3);
  border-color: var(--line-2);
}
.logging-retain__item.is-unknown {
  opacity: 0.55;
  cursor: default;
}
.logging-retain__info {
  flex: 1;
  min-width: 0;
}
.logging-retain__label {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
}
.logging-retain__desc {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 2px;
}
.logging-retain__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
}
.logging-retain__toggle input {
  position: absolute;
  opacity: 0;
  width: 36px;
  height: 20px;
  cursor: pointer;
  margin: 0;
}
.logging-retain__toggle input:disabled { cursor: not-allowed; }
.toggle-track {
  display: inline-block;
  width: 36px;
  height: 20px;
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  position: relative;
  transition: background 0.18s, border-color 0.18s;
}
.toggle-track::before {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  width: 16px;
  height: 16px;
  background: var(--bg-1);
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  transition: transform 0.18s;
}
.logging-retain__toggle input:checked + .toggle-track {
  background: var(--accent);
  border-color: var(--accent);
}
.logging-retain__toggle input:checked + .toggle-track::before {
  transform: translateX(16px);
}
.toggle-state {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-3);
  width: 28px;
  text-align: left;
  letter-spacing: 0.05em;
}
.logging-retain__toggle input:checked ~ .toggle-state {
  color: var(--accent);
}

@media (max-width: 900px) {
  .logging-retain__item {
    flex-direction: row; /* mantém horizontal mesmo no mobile, é compacto */
  }
  .logging-levels {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   CONFIG — aba Opções (SetOptions agrupadas + identificação)
   ============================================================ */
.setopt-group {
  margin-bottom: 14px;
}
.setopt-group:last-child { margin-bottom: 0; }
.setopt-group__title {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 6px 2px;
  font-weight: 600;
}
.setopt-num {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: var(--bg-3);
  color: var(--text-3);
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 6px;
  vertical-align: 1px;
}
.opt-status {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 3px;
  letter-spacing: 0.02em;
}
.opt-status--off {
  background: color-mix(in srgb, var(--signal-warn) 12%, var(--bg-1));
  color: var(--signal-warn);
}
.opt-status--on {
  background: color-mix(in srgb, #1a7f3c 10%, var(--bg-1));
  color: #1a7f3c;
}

/* ============================================================
   CONFIG — botão "i" para descrição da documentação
   ============================================================ */

/* Label do campo: flex para acomodar o ícone "i" à direita do texto.
   Usa display:flex (block-level) com justify-content:flex-start pra que
   ele ocupe a célula do grid sem esticar o conteúdo interno. */
.config-field__label {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  /* permite que a célula encolha quando 1fr — evita expansão do label */
  min-width: 0;
}
/* Botão de info (ícone "i" clicável) */
.doc-toggle {
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  width: 18px;
  height: 18px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
  flex-shrink: 0;
}
.doc-toggle:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.doc-toggle.is-open {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

/* Bloco da descrição (markdown da doc oficial Tasmota).
   Sempre ocupa largura total da linha (ambas colunas do grid), aparecendo
   abaixo do input + atual + hint. Isso garante leitura confortável tanto
   no desktop quanto no mobile. */
.doc-body {
  grid-column: 1 / -1;
  margin-top: 8px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--accent) 5%, var(--bg-1));
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line-1));
  border-radius: var(--radius-1);
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.55;
  animation: docFade 0.18s ease;
}
@keyframes docFade {
  from { opacity: 0; transform: translateY(-2px); }
  to { opacity: 1; transform: translateY(0); }
}
.doc-body__head {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}
.doc-body__head code {
  background: var(--bg-3);
  color: var(--accent);
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 600;
}
.doc-body__src {
  margin-left: 4px;
  color: var(--text-4);
  font-style: italic;
}
.doc-body__md code {
  background: var(--bg-2);
  padding: 1px 5px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-1);
}
.doc-body__md a {
  color: var(--accent);
  text-decoration: underline;
}
.doc-body__md p { margin: 6px 0; }
.doc-body__md p:first-child { margin-top: 0; }
.doc-body__md p:last-child { margin-bottom: 0; }
.doc-body__md em { font-style: italic; color: var(--text-3); }
.doc-body__md strong { font-weight: 600; color: var(--text-1); }
.doc-body__md ul {
  margin: 6px 0;
  padding-left: 20px;
}
.doc-body__md li { margin: 2px 0; }

/* Toggles (Retain e SetOptions) — agora são <div> com row interna pra
   acomodar o ícone "i" + body de descrição abaixo */
.logging-retain__row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.logging-retain__item {
  cursor: default;
  flex-direction: column;
  align-items: stretch;
}
.logging-retain__item:hover { background: var(--bg-3); }
.logging-retain__info {
  cursor: pointer; /* o info area continua clicável (label do checkbox) */
  flex: 1;
  min-width: 0;
}
.logging-retain__item .doc-body {
  grid-column: auto;
  margin-top: 8px;
}

/* Lista de opções (`0` = desc, `1` = desc, ...) — gerada pelo
   markdown-inline.js em block mode. Aparece em qualquer descrição
   da doc Tasmota (config-dialog e tasmota-dialog).
   Usa seletor com .doc-body__md / .tasmota-detail__desc pra ganhar
   especificidade e vencer regras genéricas de ul/li. */
.doc-body__md ul.md-opts,
.tasmota-detail__desc ul.md-opts,
ul.md-opts {
  list-style: none;
  padding: 0 !important;
  margin: 8px 0 !important;
  display: block;
}
.doc-body__md ul.md-opts li,
.tasmota-detail__desc ul.md-opts li,
ul.md-opts li {
  display: block;
  padding: 4px 0;
  margin: 0;
  line-height: 1.55;
  border-bottom: 1px dashed color-mix(in srgb, var(--accent) 18%, transparent);
}
.doc-body__md ul.md-opts li:last-child,
.tasmota-detail__desc ul.md-opts li:last-child,
ul.md-opts li:last-child {
  border-bottom: none;
}
.doc-body__md ul.md-opts li code:first-child,
.tasmota-detail__desc ul.md-opts li code:first-child,
ul.md-opts li code:first-child {
  /* primeira "etiqueta" do item (o valor 0/1/etc) — destaca */
  font-weight: 600;
  min-width: 28px;
  display: inline-block;
  text-align: center;
}

/* ============================================================
   ROUTINES — Renomear TH16 (askName + confirmCommands)
   ============================================================ */

/* Tela 1: pedir o novo nome */
.th16-rename__current {
  font-size: 12px;
  color: var(--text-3);
  margin: 4px 0 14px;
}
.th16-rename__current code {
  background: var(--bg-3);
  padding: 2px 6px;
  border-radius: 3px;
  color: var(--text-1);
  font-weight: 600;
}
.th16-rename__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 0 0;
}
.th16-rename__field label {
  font-size: 12px;
  color: var(--text-2);
  font-weight: 500;
}
.th16-rename__field input {
  font-family: var(--font-mono);
  font-size: 18px;
  letter-spacing: 0.06em;
  padding: 10px 14px;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-2);
  color: var(--text-1);
  outline: none;
  text-transform: uppercase;
  transition: border-color 0.12s, background 0.12s;
}
.th16-rename__field input:focus {
  border-color: var(--accent);
}
.th16-rename__hint {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 4px;
  min-height: 16px;
}
.th16-rename__hint code {
  font-family: var(--font-mono);
  background: var(--bg-2);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 10px;
}
.th16-rename__hint--ok {
  color: #1a7f3c;
}
.th16-rename__hint--err {
  color: var(--signal-warn);
}

/* Tela 2: confirmar lista de comandos */
.th16-summary {
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-2);
  padding: 10px 14px;
  margin: 10px 0 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.th16-summary__row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}
.th16-summary__label {
  color: var(--text-3);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.1em;
  width: 40px;
}
.th16-summary__from {
  background: var(--bg-3);
  color: var(--text-2);
  padding: 2px 8px;
  border-radius: 3px;
  font-family: var(--font-mono);
}
.th16-summary__to {
  background: color-mix(in srgb, var(--accent) 15%, var(--bg-1));
  color: var(--accent);
  padding: 2px 8px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-weight: 600;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}

.th16-cmds {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.th16-cmd {
  display: grid;
  grid-template-columns: 22px 130px 18px 1fr;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-1);
  font-size: 12px;
}
.th16-cmd__num {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
  background: var(--bg-3);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}
.th16-cmd__cmd {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text-1);
}
.th16-cmd__arrow {
  color: var(--text-4);
  font-family: var(--font-mono);
}
.th16-cmd__payload {
  font-family: var(--font-mono);
  color: var(--accent);
  word-break: break-all;
}

.th16-backlog {
  margin: 10px 0;
  font-size: 11px;
}
.th16-backlog summary {
  cursor: pointer;
  color: var(--text-3);
  user-select: none;
  padding: 4px 0;
}
.th16-backlog summary:hover { color: var(--text-2); }
.th16-backlog__pre {
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-1);
  padding: 8px 10px;
  margin: 6px 0 0;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-2);
  white-space: pre-wrap;
  word-break: break-all;
}
.th16-warning {
  background: color-mix(in srgb, var(--signal-warn) 8%, var(--bg-1));
  border: 1px solid color-mix(in srgb, var(--signal-warn) 30%, var(--line-1));
  border-radius: var(--radius-1);
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text-2);
  margin: 12px 0 0;
}
.th16-warning code {
  background: var(--bg-2);
  padding: 1px 5px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-1);
  font-weight: 600;
}

/* Mobile */
@media (max-width: 900px) {
  .th16-cmd {
    grid-template-columns: 22px 1fr;
    gap: 4px 8px;
  }
  .th16-cmd__arrow { display: none; }
  .th16-cmd__cmd {
    grid-column: 2;
    font-size: 11px;
  }
  .th16-cmd__payload {
    grid-column: 2;
    font-size: 12px;
  }
  .th16-cmd__num {
    grid-row: 1 / span 2;
  }
}

/* ============================================================
   ROUTINES — tela de preview (mostrada antes de iniciar)
   ============================================================ */
.routine-preview {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-2);
}
.routine-preview__target {
  font-size: 12px;
  color: var(--text-3);
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-1);
  padding: 8px 12px;
}
.routine-preview__target code {
  background: var(--bg-3);
  color: var(--text-1);
  padding: 1px 6px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-weight: 600;
}
.routine-preview__intro {
  margin: 0;
  color: var(--text-2);
}
.routine-preview__intro code,
.routine-preview__steps code,
.routine-preview__changes code,
.routine-preview__warning code {
  background: var(--bg-2);
  padding: 1px 5px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-1);
}

.routine-preview__h4 {
  margin: 4px 0 -4px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
  font-family: var(--font-mono);
}

.routine-preview__steps {
  margin: 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.routine-preview__steps li {
  padding-left: 4px;
}
.routine-preview__steps li::marker {
  color: var(--accent);
  font-weight: 600;
  font-family: var(--font-mono);
}

.routine-preview__changes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.routine-preview__changes li {
  display: grid;
  grid-template-columns: 130px 18px 1fr;
  gap: 8px;
  align-items: center;
  padding: 6px 10px;
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-1);
  font-size: 12px;
}
.routine-preview__changes-label {
  font-weight: 500;
  color: var(--text-2);
}
.routine-preview__changes-arrow {
  color: var(--text-4);
  font-family: var(--font-mono);
  text-align: center;
}
.routine-preview__changes-value {
  font-family: var(--font-mono);
  color: var(--accent);
  font-weight: 500;
  background: transparent !important;
  padding: 0 !important;
  word-break: break-all;
}

.routine-preview__warnings {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.routine-preview__warning {
  background: color-mix(in srgb, var(--signal-warn) 8%, var(--bg-1));
  border: 1px solid color-mix(in srgb, var(--signal-warn) 30%, var(--line-1));
  border-radius: var(--radius-1);
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.5;
}

.routine-preview__note {
  font-size: 11px;
  color: var(--text-3);
  margin: 4px 0 0;
  padding: 8px 12px;
  background: var(--bg-2);
  border: 1px dashed var(--line-2);
  border-radius: var(--radius-1);
  line-height: 1.5;
}

@media (max-width: 900px) {
  .routine-preview__changes li {
    grid-template-columns: 1fr 18px 1fr;
    gap: 6px;
    font-size: 11px;
  }
  .routine-preview__changes-label {
    font-size: 11px;
  }
}

/* ============================================================
   ROUTINES — tela de Validar TH/TR (resultados + correção)
   ============================================================ */

/* Banner de resumo */
.vsummary {
  padding: 10px 14px;
  border-radius: var(--radius-2);
  font-size: 13px;
  margin: 8px 0 14px;
  line-height: 1.5;
}
.vsummary--ok {
  background: color-mix(in srgb, #1a7f3c 8%, var(--bg-1));
  border: 1px solid color-mix(in srgb, #1a7f3c 30%, var(--line-1));
  color: #1a7f3c;
}
.vsummary--err {
  background: color-mix(in srgb, var(--signal-warn) 8%, var(--bg-1));
  border: 1px solid color-mix(in srgb, var(--signal-warn) 30%, var(--line-1));
  color: var(--text-1);
}
.vsummary strong {
  color: var(--accent);
}

/* Lista de checks */
.vchks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vchk {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-1);
  align-items: start;
}
.vchk--ok {
  border-color: color-mix(in srgb, #1a7f3c 25%, var(--line-1));
}
.vchk--err {
  border-color: color-mix(in srgb, var(--signal-warn) 30%, var(--line-1));
  background: color-mix(in srgb, var(--signal-warn) 4%, var(--bg-2));
}
.vchk__icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-mono);
  margin-top: 2px;
}
.vchk__icon--ok {
  background: color-mix(in srgb, #1a7f3c 20%, transparent);
  color: #1a7f3c;
}
.vchk__icon--err {
  background: color-mix(in srgb, var(--signal-warn) 25%, transparent);
  color: var(--signal-warn);
}
.vchk__main {
  min-width: 0;
}
.vchk__label {
  font-size: 13px;
  color: var(--text-1);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}
.vchk__tag {
  font-size: 9px;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
  padding: 1px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  font-family: var(--font-mono);
}
.vchk__detail {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 4px;
  line-height: 1.55;
}
.vchk__field {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-4);
  margin-right: 4px;
}
.vchk__detail code {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--bg-3);
  color: var(--text-2);
  padding: 1px 5px;
  border-radius: 3px;
  word-break: break-all;
}

/* Tela de seleção de fixes */
.vfix-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vfix {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-1);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.vfix:hover {
  border-color: var(--line-2);
  background: var(--bg-3);
}
.vfix input[type=checkbox] {
  margin-top: 4px;
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}
.vfix__main {
  min-width: 0;
}
.vfix__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-1);
}
.vfix__cmd {
  font-size: 11px;
  color: var(--text-2);
  margin-top: 4px;
  font-family: var(--font-mono);
}
.vfix__cmd code {
  background: var(--bg-3);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--accent);
  font-weight: 500;
}
.vfix__diff {
  font-size: 11px;
  margin-top: 3px;
  color: var(--text-3);
}
.vfix__field {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-right: 4px;
  color: var(--text-4);
}
.vfix__bad {
  font-family: var(--font-mono);
  background: var(--bg-3);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--signal-warn);
  word-break: break-all;
}

/* Evidências MQTT em cada check (expansível) */
.vchk__evidence {
  margin-top: 8px;
  font-size: 11px;
}
.vchk__evidence > summary {
  cursor: pointer;
  color: var(--text-3);
  user-select: none;
  padding: 2px 0;
  transition: color 0.12s;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.vchk__evidence > summary:hover { color: var(--accent); }
.vchk__evidence > summary::-webkit-details-marker { display: none; }
.vchk__evidence > summary::before {
  content: '▸';
  display: inline-block;
  font-size: 9px;
  color: var(--text-4);
  transition: transform 0.12s;
}
.vchk__evidence[open] > summary::before {
  transform: rotate(90deg);
}
.vchk__ev-block {
  margin-top: 6px;
  padding: 8px 10px;
  background: var(--bg-1);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-1);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vchk__ev-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.vchk__ev-label {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-4);
  font-weight: 600;
}
.vchk__ev-topic {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--bg-3);
  color: var(--text-2);
  padding: 3px 6px;
  border-radius: 3px;
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  word-break: break-all;
  white-space: pre-wrap;
}
.vchk__ev-payload {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--bg-2);
  color: var(--text-1);
  padding: 6px 8px;
  border-radius: 3px;
  margin: 2px 0 0;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 200px;
  overflow-y: auto;
  line-height: 1.5;
  border: 1px dashed var(--line-1);
}