/* ---------- Tokens ----------
     Azul-tinta como base, azul elétrico como ação. Verde = vem da origem, azul = já está no destino
     (mesmo código de cores da prévia de mesclagem, inclusive no desenho do topo). */
  :root {
    --bg: #eef2f9; --surface: #ffffff; --field: #f5f8fd; --ink: #0f1a33; --muted: #566383; --line: #d8e0ef;
    --accent: #1666f0; --accent-ink: #ffffff; --accent-soft: #e3ecff;
    --ok: #0e8a62; --ok-soft: #dff5ec; --warn: #955700; --warn-soft: #fdf0d6;
    --bad: #c23a30; --bad-soft: #fbe6e3;
    --copy: #6d4fe0;
    --hero: #0a1330; --hero-line: rgba(122, 162, 255, .10);
    --mono: ui-monospace, "Cascadia Code", SFMono-Regular, Menlo, Consolas, monospace;
    --sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  }
  /* Tema escuro: automático (segue o sistema) ou escolhido no botão do topo (data-theme em <html>) */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --bg: #080e1f; --surface: #101a33; --field: #0b1428; --ink: #e8edf9; --muted: #95a4c6; --line: #1f2d52;
      --accent: #5b9dff; --accent-ink: #04122e; --accent-soft: #15284f;
      --ok: #3ddc84; --ok-soft: #113321; --warn: #e5a93f; --warn-soft: #33270f;
      --bad: #ff7468; --bad-soft: #3a1a1c;
      --hero: #060c1f; --copy: #a58bff;
    }
  }
  :root[data-theme="dark"] {
    color-scheme: dark;
      --bg: #080e1f; --surface: #101a33; --field: #0b1428; --ink: #e8edf9; --muted: #95a4c6; --line: #1f2d52;
      --accent: #5b9dff; --accent-ink: #04122e; --accent-soft: #15284f;
      --ok: #3ddc84; --ok-soft: #113321; --warn: #e5a93f; --warn-soft: #33270f;
      --bad: #ff7468; --bad-soft: #3a1a1c;
      --hero: #060c1f; --copy: #a58bff;
  }
  :root[data-theme="light"] { color-scheme: light; }
  * { box-sizing: border-box; }
  body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
  main { max-width: 1240px; margin: 0 auto; padding: 0 20px 80px; }
  [hidden] { display: none !important; }

  /* ---------- Topo (hero) ---------- */
  .hero { position: relative; overflow: hidden; background: var(--hero); color: #eaf0ff; padding: 44px 20px 100px; }
  /* Grade de "planta técnica" que se dissolve para baixo */
  .hero::before { content: ""; position: absolute; inset: 0;
    background-image: linear-gradient(var(--hero-line) 1px, transparent 1px), linear-gradient(90deg, var(--hero-line) 1px, transparent 1px);
    background-size: 32px 32px; -webkit-mask-image: linear-gradient(#000 35%, transparent); mask-image: linear-gradient(#000 35%, transparent); }
  .hero-in { position: relative; max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; }
  .mark { width: 44px; height: 44px; display: block; margin-bottom: 18px; }
  .hero h1 { margin: 0; font-size: clamp(32px, 4.6vw, 48px); line-height: 1.04; letter-spacing: -.03em; font-weight: 720; }
  .hero p { margin: 16px 0 0; color: #a9b9e0; font-size: 17px; max-width: 44ch; }
  @media (max-width: 820px) { .hero-in { grid-template-columns: 1fr; gap: 28px; } .hero { padding-bottom: 92px; } }

  /* Desenho: origem + destino hoje -> destino depois (o que a ferramenta faz com listas) */
  .flow { display: grid; grid-template-columns: 1fr 52px 1fr; align-items: stretch; }
  .flow .col { display: flex; flex-direction: column; gap: 14px; }
  .node { border: 1px solid rgba(122, 162, 255, .32); background: rgba(255, 255, 255, .04); border-radius: 10px; padding: 10px 12px; }
  .node small { display: block; font-size: 12px; color: #93a7d6; margin-bottom: 7px; }
  .node .set { display: flex; gap: 6px; flex-wrap: wrap; font-family: var(--mono); font-size: 14px; align-items: center; }
  .node .br { color: #5f739f; }
  .c { font-style: normal; padding: 2px 10px; border-radius: 6px; border: 1px solid; }
  .c.src { color: #7ce9c6; background: rgba(63, 208, 160, .13); border-color: rgba(63, 208, 160, .6); }
  .c.dst { color: #9cc2ff; background: rgba(91, 157, 255, .14); border-color: rgba(91, 157, 255, .6); }
  .flow .out { align-self: center; border-color: rgba(91, 157, 255, .75); background: rgba(91, 157, 255, .09); padding: 14px; }
  .wires { width: 100%; height: 100%; display: block; overflow: visible; }
  .wire { fill: none; stroke: rgba(122, 162, 255, .7); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
  .hero .flow-cap { margin: 14px 0 0; font-size: 13px; color: #8da1d0; max-width: none; }
  /* Único movimento da página: os fios se desenham e o resultado aparece */
  @keyframes draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
  @keyframes pop { from { opacity: 0; transform: translateY(6px) scale(.96); } to { opacity: 1; transform: none; } }
  .wire { stroke-dasharray: 100; animation: draw .9s .25s ease-out both; }
  .out .c { animation: pop .45s ease-out both; }
  .out .c:nth-of-type(1) { animation-delay: .95s; } .out .c:nth-of-type(2) { animation-delay: 1.1s; } .out .c:nth-of-type(3) { animation-delay: 1.25s; }

  @media (max-width: 480px) {
    .flow { grid-template-columns: 1fr 24px 1.3fr; }
    .node { padding: 9px 10px; }
    .node .set { gap: 4px; font-size: 13px; flex-wrap: nowrap; }
    .c { padding: 2px 7px; }
  }

  /* ---------- Escolha do modo (cartões que se sobrepõem ao topo) ---------- */
  .modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(188px, 1fr)); gap: 12px; margin: -54px 0 20px; position: relative; }
  @media (max-width: 760px) { .modes { grid-template-columns: 1fr; margin-top: -48px; } }
  .mode { display: flex; gap: 14px; align-items: flex-start; text-align: left; padding: 16px; border-radius: 12px;
          background: var(--surface); border: 1px solid var(--line); box-shadow: 0 14px 30px -20px rgba(6, 14, 40, .6); }
  .mode-ico { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
  .mode-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .mode strong { display: block; font-size: 15.5px; font-weight: 650; letter-spacing: -.01em; }
  .mode small { display: block; font-weight: 400; margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--muted); }
  .mode[aria-selected=true] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 14px 30px -20px rgba(6, 14, 40, .6); }
  .mode[aria-selected=true] .mode-ico { background: var(--accent); color: var(--accent-ink); }

  /* ---------- Painéis (um por etapa) ---------- */
  .panel { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 22px; margin-bottom: 16px; }
  .panel h2 { font-size: 17px; font-weight: 650; letter-spacing: -.01em; margin: 0 0 14px; display: flex; align-items: center; gap: 12px; }
  .step { width: 28px; height: 28px; border-radius: 8px; background: var(--accent-soft); color: var(--accent);
          display: inline-grid; place-items: center; font: 600 13px var(--mono); }
  .hint { color: var(--muted); font-size: 13.5px; margin: 0 0 14px; max-width: 80ch; }

  /* ---------- Controles ---------- */
  input[type=text], input[type=password], input[type=email], input[type=search], input[type=date], select, textarea {
    font: inherit; color: inherit; background: var(--field); border: 1px solid var(--line);
    border-radius: 8px; padding: 8px 11px; min-width: 0; width: 100%;
  }
  input[type=file] { font: inherit; color: var(--muted); max-width: 100%; }
  input[type=file]::file-selector-button { font: inherit; font-weight: 550; cursor: pointer; margin-right: 12px; padding: 8px 14px;
    border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
  input[type=file]::file-selector-button:hover { border-color: var(--accent); }
  input[type=checkbox], input[type=radio] { accent-color: var(--accent); }
  input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
  button:focus-visible, label:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
  button { font: inherit; font-weight: 550; cursor: pointer; border-radius: 8px; border: 1px solid var(--line);
           background: var(--surface); color: var(--ink); padding: 8px 16px; transition: border-color .15s, filter .15s; }
  button:hover:not(:disabled) { border-color: var(--accent); }
  button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
  button.primary:hover:not(:disabled) { filter: brightness(1.08); }
  button.danger { background: var(--bad); color: #fff; border-color: var(--bad); font-weight: 600; }
  button.danger:hover:not(:disabled) { filter: brightness(1.08); border-color: var(--bad); }
  button:disabled { opacity: .5; cursor: not-allowed; }
  .mode:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
  .grow { flex: 1; }
  .msg { font-size: 13.5px; margin-top: 10px; min-height: 1em; }
  .msg.err { color: var(--bad); } .msg.warn { color: var(--warn); } .msg.ok { color: var(--ok); } .msg.info { color: var(--muted); }

  /* ---------- Linha de bot (etapa 1) ---------- */
  .bot { display: grid; grid-template-columns: 12px 1fr 1.6fr auto auto auto; gap: 8px; align-items: center; margin-bottom: 8px; }
  #bots.has-pick .bot { grid-template-columns: 12px 1.1fr 52px 1fr 1.4fr auto auto auto; }
  .envslot { display: flex; align-items: center; min-width: 0; }
  .envslot:empty { display: block; }
  .bot label { display: flex; gap: 5px; align-items: center; white-space: nowrap; font-size: 13.5px; }
  .bot .rm { padding: 5px 10px; color: var(--muted); }
  .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
  .dot.ok { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); } .dot.error { background: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }
  .botmsg { grid-column: 2 / -1; font-size: 12.5px; color: var(--bad); margin: -4px 0 4px; }
  @media (max-width: 760px) {
    .bot, #bots.has-pick .bot { grid-template-columns: 12px 1fr 1fr; }
    .bot .rm { justify-self: end; }
  }

  /* ---------- Lista de recursos ---------- */
  .reslist { max-height: 340px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; margin-top: 10px; background: var(--field); }
  .res { display: flex; gap: 10px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line); cursor: pointer; }
  .res:last-child { border-bottom: 0; } .res:hover { background: var(--accent-soft); }
  .res:has(input:checked) { background: var(--accent-soft); }
  .res span { font-family: var(--mono); font-size: 13px; word-break: break-all; }
  .res em { font-style: normal; color: var(--muted); font-size: 12px; margin-left: auto; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .peek { padding: 7px 12px; border-bottom: 1px solid var(--line); margin: 0; }
  .peek:last-child { border-bottom: 0; }
  .peek summary { font-family: var(--mono); font-size: 13px; color: var(--ink); word-break: break-all; }

  /* ---------- Revisão ---------- */
  .tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
  .tab { border-radius: 20px; padding: 5px 14px; font-size: 14px; }
  .tab[aria-selected=true] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
  .summary { font-size: 14px; color: var(--muted); margin-bottom: 12px; }
  /* A cor da borda esquerda indica o que vai acontecer com o recurso */
  .item { border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; background: var(--surface); }
  .item.create { border-left-color: var(--ok); } .item.merge { border-left-color: var(--accent); }
  .item.replace { border-left-color: var(--warn); } .item.err { border-left-color: var(--bad); }
  .item.copy { border-left-color: var(--copy); } .item.invalid { border-left-color: var(--bad); background: var(--bad-soft); }
  .item.skip { opacity: .65; }
  .item header { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
  .item .key { font-family: var(--mono); font-size: 13px; font-weight: 600; word-break: break-all; flex: 1; min-width: 160px; }
  .item select { width: auto; }
  .badge { font-size: 12.5px; padding: 1px 9px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); }
  .badge.warn { background: var(--warn-soft); color: var(--warn); }
  .badge.bad { background: var(--bad-soft); color: var(--bad); }
  .note { font-size: 13px; color: var(--muted); margin: 8px 0 0; }
  .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
  .chip { display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--line); border-radius: 6px;
          padding: 3px 8px; font-family: var(--mono); font-size: 12.5px; cursor: pointer; max-width: 100%; }
  .chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
  .chip.src { background: var(--ok-soft); border-color: var(--ok); }
  .chip.dst { background: var(--accent-soft); border-color: var(--accent); }
  .chip.off span { text-decoration: line-through; opacity: .55; }
  .chip small { font-family: var(--sans); color: var(--muted); }
  .legend { font-size: 12.5px; color: var(--muted); margin-top: 8px; }
  textarea.json { font-family: var(--mono); font-size: 12.5px; min-height: 140px; margin-top: 10px; }
  textarea.invalid { border-color: var(--bad); }
  details { margin-top: 8px; font-size: 13px; }
  details summary { cursor: pointer; color: var(--muted); }
  pre { background: var(--field); border: 1px solid var(--line); border-radius: 8px; padding: 9px; overflow: auto;
        max-height: 360px; font-family: var(--mono); font-size: 12px; margin: 6px 0 0; white-space: pre-wrap; word-break: break-all; }
  .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  @media (max-width: 700px) { .cols { grid-template-columns: 1fr; } }
  .filechip { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
              padding: 10px 14px; border: 1px solid var(--ok); background: var(--ok-soft); border-radius: 10px; }
  .filechip strong { word-break: break-all; }
  code { font-family: var(--mono); font-size: 12.5px; }

  /* ---------- Resultado ---------- */
  .log { font-family: var(--mono); font-size: 12.5px; max-height: 320px; overflow: auto; }
  .log div { padding: 3px 0; border-bottom: 1px solid var(--line); }
  .log .ok { color: var(--ok); } .log .err { color: var(--bad); }
  @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

  /* ---------- Utilitários (no lugar de style="" inline, que a política de segurança bloqueia) ---------- */
  .hint.flat { margin: 0; } .hint.tight { margin: 2px 0 0; }
  .mt10 { margin-top: 10px; } .mt14 { margin-top: 14px; } .mb12 { margin-bottom: 12px; }
  .note.bad { color: var(--bad); }

  /* ---------- Barra do usuário (topo) ---------- */
  .topbar { position: absolute; z-index: 2; top: 14px; right: 20px; display: flex; gap: 10px; align-items: center; font-size: 13px; color: #a9b9e0; }
  button.ghost { background: transparent; color: #dbe5ff; border-color: rgba(122, 162, 255, .4); padding: 4px 12px; font-size: 13px; }
  button.ghost:hover:not(:disabled) { border-color: #9cc2ff; }

  /* ---------- Diferenças lado a lado ---------- */
  .diffbox { margin-top: 8px; }
  .diff { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; font-family: var(--mono); font-size: 12px; }
  .dhead { padding: 6px 10px; background: var(--field); border-bottom: 1px solid var(--line); font-family: var(--sans); font-weight: 600; color: var(--muted); }
  .dc { padding: 1px 10px 1px 22px; white-space: pre-wrap; word-break: break-all; position: relative; min-width: 0; }
  .dc .mk { position: absolute; left: 8px; }
  .dc.del { background: var(--bad-soft); } .dc.add { background: var(--ok-soft); } .dc.empty { background: var(--field); }
  .dc.del .mk { color: var(--bad); } .dc.add .mk { color: var(--ok); }
  .dgap { grid-column: 1 / -1; padding: 3px 10px; text-align: center; color: var(--muted); background: var(--field); font-family: var(--sans); }
  .plus { color: var(--ok); } .minus { color: var(--bad); }
  @media (max-width: 700px) { .diff { grid-template-columns: 1fr; } }

  /* ---------- Histórico ---------- */
  .tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
  table.audit { width: 100%; border-collapse: collapse; font-size: 14px; }
  .audit th, .audit td { text-align: left; padding: 7px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
  .audit th { background: var(--field); color: var(--muted); font-weight: 600; white-space: nowrap; }
  .audit tr:last-child td { border-bottom: 0; }
  .audit .mono { font-family: var(--mono); word-break: break-all; }
  .audit .ref { color: var(--muted); font-family: var(--mono); font-size: 12px; }
  .audit .okc { color: var(--ok); } .audit .errc { color: var(--bad); }

  /* ---------- Tela de login ---------- */
  .login-page { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; background: var(--hero); padding: 20px; position: relative; }
  .login-page::before { content: ""; position: fixed; inset: 0; pointer-events: none;
    background-image: linear-gradient(var(--hero-line) 1px, transparent 1px), linear-gradient(90deg, var(--hero-line) 1px, transparent 1px); background-size: 32px 32px; }
  .login-box { position: relative; width: min(380px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 30px; }
  .login-box .mark { width: 40px; height: 40px; display: block; margin-bottom: 14px; }
  .login-box h1 { margin: 0 0 4px; font-size: 22px; letter-spacing: -.02em; }
  .field { display: block; margin-bottom: 14px; font-size: 13.5px; color: var(--muted); }
  .field input { margin-top: 5px; }
  button.wide { width: 100%; padding: 10px; }
  .field:focus-within { outline: none; }

  /* ---------- Conta: senha e convite ---------- */
  .center { text-align: center; margin-top: 16px; margin-bottom: 0; }
  .hint a { color: var(--accent); font-weight: 600; }
  .pwgrid { display: grid; gap: 10px; max-width: 380px; }
  .codebox { overflow-wrap: anywhere; word-break: break-all; user-select: all; font-family: var(--mono); font-size: 20px; letter-spacing: .03em; padding: 12px 16px; margin: 14px 0 10px; text-align: center;
             background: var(--field); border: 1px dashed var(--accent); border-radius: 10px; user-select: all; }

  /* ---------- Campo de chave com "olho" ---------- */
  .secret { position: relative; min-width: 0; }
  .secret input { padding-right: 40px; }
  .eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; padding: 0;
         display: grid; place-items: center; border: 0; background: transparent; color: var(--muted); border-radius: 6px; }
  .eye:hover:not(:disabled) { color: var(--accent); background: var(--accent-soft); }
  .eye svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .eye .slash { display: none; }
  .eye[aria-pressed=true] .slash { display: inline; }

  /* ---------- Versões salvas ---------- */
  button.mini { padding: 3px 12px; font-size: 14px; }
  input.note-edit { width: 100%; min-width: 220px; padding: 4px 8px; font-size: 14px; }
  .confirm-text { font-size: 13px; color: var(--bad); margin-right: 6px; }
  .audit td.actions { white-space: nowrap; }
  #users-table td.actions { white-space: normal; }
  #users-table .actbar { display: grid; grid-template-columns: repeat(3, max-content); gap: 6px; justify-content: end; margin-left: auto; }
  #users-table td.actions button.mini { padding: 3px 7px; white-space: nowrap; }
  #users-table td.actions button.danger { background: transparent; color: var(--bad); border-color: var(--bad); }
  #users-table td.actions button.danger:hover:not(:disabled) { background: var(--bad); color: #fff; }
  #pay-refund-note { margin: 12px 0 0; }
  #pix-table td.actions button.danger, #pay-hist button.danger { background: transparent; color: var(--bad); border-color: var(--bad); font-weight: 500; }
  #pix-table td.actions button.danger:hover:not(:disabled), #pay-hist button.danger:hover:not(:disabled) { background: var(--bad); color: #fff; }
  #users-table td.uname { overflow-wrap: anywhere; }
  #users-table td.mailc { overflow-wrap: anywhere; max-width: 170px; font-size: 12px; }

  /* ---------- Aviso do backup automático (canto da tela) ---------- */
  .toast { position: fixed; right: 16px; bottom: 16px; z-index: 20; max-width: min(380px, calc(100vw - 32px)); padding: 10px 14px; border-radius: 10px;
           font-size: 13.5px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); box-shadow: 0 10px 30px -12px rgba(6, 14, 40, .5); }
  .toast.ok { border-left-color: var(--ok); }
  .toast.err { border-left-color: var(--bad); }
  .toast.warn { border-left-color: var(--warn); }

  /* ---------- Validação, cópia e comparação ---------- */
  .badge.copy { background: var(--accent-soft); color: var(--copy); }
  .problems { margin: 8px 0 0; padding: 0; list-style: none; font-size: 13px; }
  .problems li { padding: 2px 0; }
  .perr { color: var(--bad); font-weight: 600; } .pwarn { color: var(--warn); }
  .copykey { margin-top: 10px; } .copykey label { font-size: 13px; color: var(--muted); display: block; }
  .copykey input { margin-top: 4px; max-width: 420px; font-family: var(--mono); font-size: 13px; }
  .seg { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
  .seg button { padding: 3px 12px; font-size: 12.5px; border-radius: 16px; }
  .seg button[aria-pressed=true] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

  /* ---------- Administração ---------- */
  .filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; align-items: center; }
  .field-inline { display: flex; gap: 8px; align-items: center; font-size: 13.5px; color: var(--muted); }
  .field-inline input { width: auto; }
  h3.sub { font-size: 15px; margin: 22px 0 10px; }
  .filter-sel { width: auto; }
  .badge.st-ok { background: var(--ok-soft); color: var(--ok); }
  .badge.st-warn { background: var(--warn-soft); color: var(--warn); }
  .badge.st-bad { background: var(--bad-soft); color: var(--bad); }
  .plan td.conflict { color: var(--warn); font-weight: 600; }
  textarea#bot-bulk { font-family: var(--mono); font-size: 12.5px; }

  /* ---------- Aviso na tela quando o aplicativo não inicia (js/boot-check.js) ---------- */
  .bootfail { position: relative; z-index: 50; margin: 16px; padding: 16px 20px; border: 2px solid var(--bad); border-radius: 12px; background: var(--bad-soft); color: var(--ink); font-size: 14px; }
  .bootfail h2 { margin: 0 0 8px; color: var(--bad); font-size: 18px; }
  .bootfail .bootlabel { margin: 10px 0 0; font-weight: 600; }
  .bootfail ul { margin: 6px 0 10px 20px; padding: 0; } .bootfail li { margin: 3px 0; font-family: var(--mono); font-size: 12.5px; word-break: break-word; }
  @media (max-width: 760px) { .codebox { font-size: 16px; letter-spacing: .02em; } }

  /* ---------- Flows do WhatsApp ---------- */
  .flerr { border-left: 3px solid var(--bad); background: var(--bad-soft); border-radius: 8px; padding: 8px 12px; margin: 8px 0; font-size: 13.5px; }
  .flerr .meta { color: var(--muted); font-family: var(--mono); font-size: 12px; margin-left: 6px; }
  .flerr code { word-break: break-all; }
  .flerr details { margin-top: 4px; }
  .flwarn { border-left-color: var(--warn); background: var(--warn-soft); }
  .audit tr.flowrow { cursor: pointer; }
  .audit tr.flowrow:hover td, .audit tr.sel td { background: var(--accent-soft); }
  .audit tr.has-errors td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
  textarea.wellj { min-height: 280px; width: 100%; resize: vertical; }
  .fl-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
  .cats { display: flex; flex-wrap: wrap; gap: 6px 16px; }
  .cats label { display: flex; gap: 6px; align-items: center; font-size: 13.5px; }
  .confirmbox { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--bad); background: var(--bad-soft); border-radius: 10px; }
  .confirmbox p { margin: 0 0 10px; font-size: 14px; }
  .badge.prd { background: var(--bad); color: #fff; font-weight: 650; }
  .fl-close { margin-left: auto; }
  .badge.dep { background: var(--line); color: var(--muted); text-decoration: line-through; }
  .audit tr.deprecated td { opacity: .6; }
  .audit tr.deprecated.sel td { opacity: 1; }

#usr-pw-temp { font-family: var(--mono); letter-spacing: .05em; font-size: 1.05em; }


/* Fluxos do Builder e contratos */
.badge.hmg { background: var(--accent-soft); color: var(--accent); font-weight: 650; }
.badge.outro { background: var(--line); color: var(--muted); }
button.linkbtn { background: none; border: 0; padding: 0; color: var(--accent, #4c8dff); text-decoration: underline; cursor: pointer; font: inherit; }
pre.code { max-height: 60vh; overflow: auto; margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 8px; font-family: var(--mono); font-size: .85em; white-space: pre; }

#bld-contract, #bld-env { width: auto; min-width: 190px; flex: 0 0 auto; }

/* Abas internas de Resources */
.subtabs { display: flex; flex-wrap: wrap; gap: 4px; width: fit-content; max-width: 100%; margin: 0 0 16px; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.subtabs[hidden] { display: none; }
.subtab { background: transparent; border: 0; box-shadow: none; border-radius: 8px; padding: 8px 14px; font-weight: 600; color: var(--muted); cursor: pointer; }
.subtab:hover { color: var(--ink); }
.subtab[aria-selected=true] { background: var(--accent-soft); color: var(--accent); }

  .cpicks { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
  button.cpick { padding: 3px 12px; font-size: 13px; border-radius: 999px; background: transparent; }
  button.cpick.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
  #bld-table tr.clickrow { cursor: pointer; }
  #bld-table tr.clickrow:hover td { background: var(--accent-soft); }
  #bld-table tr.clickrow.sel td { background: var(--accent-soft); }

  [data-closable] { position: relative; }
  button.xclose { position: absolute; top: 8px; right: 10px; width: 30px; height: 30px; padding: 0; border-radius: 8px; font-size: 20px; line-height: 1; background: transparent; border-color: transparent; color: var(--muted); }
  button.xclose:hover:not(:disabled) { background: var(--accent-soft); color: var(--ink); border-color: var(--line); }
  .checklist { display: grid; gap: 6px; max-height: 320px; overflow: auto; padding: 4px 0; }
  .checklist label { display: flex; gap: 10px; align-items: center; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
  .checklist label:hover { background: var(--accent-soft); }
  .checklist input { width: auto; flex: 0 0 auto; }
  .checklist small { color: var(--muted); margin-left: auto; }
  .badge.ex { background: var(--bad-soft); color: var(--bad); white-space: nowrap; }
  input.ctr-edit { width: 100%; min-width: 160px; padding: 4px 8px; font-size: 14px; }

  .combo { position: relative; flex: 1 1 0; min-width: 0; }
  .combo input { width: 100%; padding-right: 38px; }
  button.combo-btn { position: absolute; top: 0; right: 0; height: 100%; width: 38px; padding: 0; border: 0; background: transparent; color: var(--muted); font-size: 15px; border-radius: 0 8px 8px 0; }
  ul.combo-list { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none; max-height: 260px; overflow: auto;
                  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 28px rgba(5, 12, 35, .28); }
  ul.combo-list li { display: flex; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 7px; cursor: pointer; font-size: 14px; }
  ul.combo-list li small { margin-left: auto; color: var(--muted); font-size: 12px; }
  ul.combo-list li.on, ul.combo-list li:hover { background: var(--accent-soft); }
  ul.combo-list li.combo-new { cursor: default; color: var(--muted); font-size: 13px; }
  ul.combo-list li.combo-new:hover { background: transparent; }
  #bots-filter-select { width: auto; min-width: 220px; }

  .badge.router { background: var(--accent-soft); color: var(--accent); }
  .badge.bot { background: var(--field); color: var(--muted); border: 1px solid var(--line); }

  th.chk, td.chk { width: 34px; padding-right: 0; }
  td.chk input, th.chk input { width: auto; }

.flowsum { margin: 0 0 14px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; }
.flowsum ul, #bld-check-body ul { margin: 4px 0 8px; padding-left: 20px; }
.flowsum details, #bld-check-body details { margin: 6px 0; }
.flowsum summary, #bld-check-body summary { cursor: pointer; }
h3.sub { margin: 10px 0 6px; font-size: 14px; }
td.chg { color: var(--muted); font-size: 13px; }
#bld-check-body code { font-family: var(--mono); font-size: 12.5px; word-break: break-all; }

.fmwrap { overflow: auto; max-height: 70vh; border: 1px solid var(--line); border-radius: 10px; background: var(--field); }
svg.fm { display: block; max-width: none; }
.fm-edge { stroke: #8a96b0; stroke-width: 1.4; fill: none; } .fm-head { fill: #8a96b0; }
.fm-node { fill: var(--surface); stroke: #8a96b0; stroke-width: 1.2; }
.fm-node.root { fill: var(--ok-soft); stroke: var(--ok); } .fm-node.bad { fill: var(--bad-soft); stroke: var(--bad); }
.fm-node.http { stroke: #3b6ef0; } .fm-node.redir { stroke: #e08a00; }
.fm-text { font: 600 12px var(--sans); fill: var(--ink); } .fm-sub { font: 11px var(--sans); fill: var(--muted); }
#bld-hist-table td.actions { white-space: normal; min-width: 270px; } /* 8 botões: quebram em duas linhas em vez de empurrar a tabela */

mark { background: var(--warn-soft); color: inherit; border-radius: 3px; padding: 0 2px; outline: 1px solid var(--warn); }
#bld-search-body code { font-family: var(--mono); font-size: 12.5px; white-space: pre-wrap; word-break: break-word; }
.sr { margin-bottom: 14px; }

.tab.on { background: var(--accent); color: #fff; border-color: var(--accent); }
tr.detrow td { background: var(--field); }
tr.detrow pre.code { margin: 0; max-height: 320px; overflow: auto; white-space: pre-wrap; word-break: break-word; }
details.sr > summary { cursor: pointer; padding: 4px 0; }

/* Botão de tema (topo; nas telas de login fica solto no canto) */
.theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border-radius: 8px; border: 1px solid rgba(160, 185, 235, .35); background: transparent; color: #cfdcff; cursor: pointer; }
.theme-btn:hover { background: rgba(160, 185, 235, .16); }
.theme-btn.floating { position: fixed; top: 14px; right: 16px; z-index: 5; border-color: var(--line); color: var(--ink); background: var(--surface); }
.theme-btn.floating:hover { background: var(--accent-soft); }

/* Abas do Builder */
.btab-off { display: none !important; }
.subtab.has::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-radius: 50%; background: var(--accent); vertical-align: middle; }
.blkdet { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }

/* Comparar versões */
.cmpbar { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 12px; align-items: center; margin: 0 0 16px; }
.cmpslot { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; background: var(--field); border: 1px solid var(--line); border-radius: 12px; min-width: 0; }
.cmpslot select { width: 100%; min-width: 0; }
.cmplabel { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.cmpinfo { margin: 0; }
.cmpswap { font-size: 18px; padding: 6px 12px; }
.cmpgo { align-self: stretch; }
@media (max-width: 900px) { .cmpbar { grid-template-columns: 1fr; } .cmpswap { justify-self: center; } }
.cmphead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; font-weight: 600; }
.vchip { padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--field); font-weight: 600; font-size: 13px; }
.dkpis { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; }
.dk { padding: 8px 14px; border: 1px solid var(--line); border-left-width: 4px; border-radius: 10px; background: var(--surface); font-size: 13px; color: var(--muted); }
.dk b { font-size: 20px; margin-right: 6px; color: var(--ink); }
.dk.new { border-left-color: var(--ok); } .dk.rem { border-left-color: var(--bad); } .dk.chg { border-left-color: var(--warn); } .dk.mov { border-left-color: var(--muted); }
.dlist { margin: 8px 0; border: 1px solid var(--line); border-left-width: 4px; border-radius: 10px; padding: 6px 12px; background: var(--surface); }
.dlist.new { border-left-color: var(--ok); } .dlist.rem { border-left-color: var(--bad); } .dlist.chg { border-left-color: var(--warn); } .dlist.mov { border-left-color: var(--muted); }
.dlist > summary { cursor: pointer; padding: 4px 0; }
.dlist li { margin: 4px 0; }
.dlist details.fields { margin: 4px 0 6px; font-size: 13px; }
.dlist details.fields li { word-break: break-word; }
.fulltext { margin-top: 16px; }
.fulltext > summary { cursor: pointer; font-weight: 600; padding: 6px 0; }

/* Explorar: tabelas com colunas de largura previsível (URL longa quebra em vez de espremer as outras colunas) */
#bld-req-table, #bld-var-table, #bld-blk-table { table-layout: fixed; min-width: 880px; }
#bld-req-table td, #bld-var-table td, #bld-blk-table td { overflow-wrap: anywhere; line-height: 1.45; }
#bld-req-table code, #bld-var-table code { font-size: 12px; font-weight: 500; white-space: normal; word-break: normal; overflow-wrap: anywhere; }
#bld-req-table th:nth-child(1) { width: 25%; } #bld-req-table th:nth-child(2) { width: 76px; } #bld-req-table th:nth-child(3) { width: 31%; } #bld-req-table th:nth-child(4) { width: 20%; } #bld-req-table th:nth-child(5) { width: 104px; }
#bld-var-table th:nth-child(1) { width: 21%; } #bld-var-table th:nth-child(2) { width: 27%; } #bld-var-table th:nth-child(3) { width: 20%; } #bld-var-table th:nth-child(4) { width: 90px; } #bld-var-table th:nth-child(5) { width: 160px; }
#bld-blk-table th:nth-child(1) { width: 46%; } #bld-blk-table th:nth-child(2) { width: 15%; } #bld-blk-table th:nth-child(3) { width: 20%; } #bld-blk-table th:nth-child(4) { width: 130px; }
#bld-req-table td.actions, #bld-var-table td.actions, #bld-blk-table td.actions { white-space: nowrap; text-align: right; }

/* Tabelas do Conteúdo do fluxo: colunas com largura definida e texto longo quebrando, em vez de espremer tudo */
table.xt { table-layout: fixed; }
.xt td, .xt th { overflow-wrap: anywhere; }
.xt code { white-space: normal; word-break: normal; overflow-wrap: anywhere; font-size: 12px; }
.xt .detrow pre.code { white-space: pre-wrap; word-break: break-word; max-height: 360px; overflow: auto; }
.xt-req th:nth-child(1) { width: 26%; } .xt-req th:nth-child(2) { width: 8%; } .xt-req th:nth-child(3) { width: 32%; } .xt-req th:nth-child(4) { width: 22%; } .xt-req th:nth-child(5) { width: 96px; }
.xt-req td.actions { padding-right: 8px; }
.xt-req td.actions .mini { display: block; margin: 0 0 4px auto; }
.xt-var th:nth-child(1) { width: 24%; } .xt-var th:nth-child(2) { width: 28%; } .xt-var th:nth-child(3) { width: 22%; } .xt-var th:nth-child(4) { width: 12%; } .xt-var th:nth-child(5) { width: 14%; }
.xt-blk th:nth-child(1) { width: 50%; } .xt-blk th:nth-child(2) { width: 16%; } .xt-blk th:nth-child(3) { width: 18%; } .xt-blk th:nth-child(4) { width: 16%; }
.xt td.actions { white-space: normal; text-align: right; }
.xt .meth { display: inline-block; padding: 1px 8px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 12px; }
@media (max-width: 760px) { table.xt { table-layout: auto; } }
#bld-var-kind, #bld-blk-kind { width: auto; flex: none; max-width: 100%; }
.xt-var th:nth-child(1) { width: 28%; } .xt-var th:nth-child(2) { width: 26%; } .xt-var th:nth-child(3) { width: 20%; }

/* Carregando */
.loading { display: flex; align-items: center; gap: 10px; margin: 8px 0; color: var(--muted); font-size: 14px; }
.spin { width: 16px; height: 16px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; border-top-color: var(--line); border-right-color: var(--accent); } }
td.chk, th.chk { width: 34px; }
#bld-sort { width: auto; flex: none; max-width: 100%; }
#bld-hist-table td.actions { min-width: 280px; }
button.star { background: none; border: 0; padding: 0 4px 0 0; font-size: 18px; line-height: 1; cursor: pointer; color: var(--muted, #8a94a8); vertical-align: -1px; }
button.star:hover, button.star:focus-visible { color: #e8b100; }
button.star.on { color: #e8b100; }

.inline-details { display: block; margin-top: 4px; }
.inline-details summary { cursor: pointer; color: var(--accent); }
#bots-table td:nth-child(5) { white-space: nowrap; }
#bots-table td:nth-child(4) { min-width: 70px; }
#bld-table td:nth-child(2) { min-width: 150px; }
#bld-table td:nth-child(6) { white-space: nowrap; }
#bld-table td.actions { white-space: nowrap; }
#bld-table td.actions .mini { margin: 0 2px 0 0; padding-left: 8px; padding-right: 8px; }
#bld-table th, #bld-table td { padding-left: 6px; padding-right: 6px; }
#bots-table td:first-child { min-width: 200px; overflow-wrap: anywhere; }
#bots-table td.actions { white-space: nowrap; }
details.more { display: inline-block; }
details.more > summary { list-style: none; cursor: pointer; display: inline-block; padding: 3px 10px; font-size: 14px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); user-select: none; }
details.more > summary::-webkit-details-marker { display: none; }
details.more[open] > summary { color: var(--ink); background: var(--accent-soft); }
details.more .menu { display: none; }
details.more[open] .menu { display: flex; flex-direction: column; gap: 4px; position: fixed; z-index: 50; padding: 6px; background: var(--card, var(--surface)); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
details.more .menu button { width: 100%; text-align: left; white-space: nowrap; }
tr.grp td { background: var(--surface); padding: 4px 8px; border-bottom: 1px solid var(--line); }
button.grpbtn { background: none; border: 0; box-shadow: none; padding: 4px 2px; font-weight: 650; color: var(--ink); cursor: pointer; }
button.grpbtn .hint { font-weight: 400; margin-left: 6px; }
tr.env-prd > td:first-child, tr.env-prd > td.chk:first-child { box-shadow: inset 3px 0 0 var(--bad); }
.ctrhead { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.ctrhead[hidden] { display: none; }
.ctrhead .ctrinfo { flex: 1 1 240px; font-weight: 600; }
.ctrhead .ctrbtns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ctrhead.collapsed .ctrbtns { display: none; }
.ctrhead select { width: auto; max-width: 100%; }
.filters2 { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.filters2 .fld { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted, #667); min-width: 150px; }
.filters2 .fld.grow { flex: 1 1 200px; }
.filters2 .fld select, .filters2 .fld input { width: 100%; font-size: 14px; }
.optrow { align-items: center; }
.optrow .optlabel { font-size: 12px; color: var(--muted, #667); }
.optrow .sp { flex: 1 1 auto; }
.infobar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.infobar .hint { margin: 0; }
.infobar button { flex: none; }
#bots-table td.actions > button, #bots-table td.actions > details { vertical-align: middle; }
details.more > summary { box-sizing: border-box; padding: 3px 12px; font-size: 14px; line-height: normal; height: 100%; min-height: 28px; }
#bots-table td:first-child { min-width: 160px; }
details.more { vertical-align: middle; line-height: 1; }
details.more > summary { display: block; height: auto; min-height: 0; line-height: normal; }
details.more > summary { display: flex; align-items: center; min-height: 30px; box-sizing: border-box; }
#bots-table td.actions > button, #bots-table td.actions > details { vertical-align: top; }
details.more { display: inline-flex; }
details.more { margin: 0; }
#bld-table.no-ctr th:nth-child(3), #bld-table.no-ctr td:nth-child(3) { display: none !important; }
#bld-table td.actions button.mini { padding: 3px 8px; }

/* Resumo para WhatsApp na tela Comparar */
.notesbox { margin: 0 0 12px; }
.notesbox textarea { width: 100%; font-family: var(--mono); font-size: 13px; min-height: 160px; }

#bld-np-table input[type=text] { width: 100%; }
#bld-np-table th:nth-child(1) { width: 38%; }

/* ---------- Sugestões ---------- */
.suggest-pop { position: fixed; z-index: 50; top: 52px; right: 20px; width: min(420px, calc(100vw - 32px)); background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.suggest-pop[hidden] { display: none; }
.suggest-pop h3 { margin: 0 0 4px; font-size: 16px; }
.suggest-pop textarea { width: 100%; box-sizing: border-box; margin: 8px 0; resize: vertical; font: inherit; }
.suggest-pop .row { align-items: center; gap: 10px; }
.filebtn { display: inline-block; padding: 7px 12px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-size: 14px; }
.suggest-prev { margin-top: 8px; display: flex; gap: 10px; align-items: flex-start; }
.suggest-prev img { max-width: 160px; max-height: 110px; border-radius: 6px; border: 1px solid var(--line); }
.nav-item .badge, .tab .badge, .badge.count { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 9px; background: #e5484d; color: #fff; font-size: 12px; line-height: 18px; text-align: center; }
.badge[hidden] { display: none; }
.sugg { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; background: var(--surface); }
.sugg-nova { border-left: 4px solid #1666f0; }
/* v4.42: Minha conta > Excluir a minha conta (zona de perigo, recolhida por padrão) */
.panel.danger-zone { border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); background: color-mix(in srgb, var(--bad) 5%, var(--surface)); }
.danger-zone summary { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 17px; font-weight: 700; color: var(--bad); }
.danger-zone .dz-ico { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--bad); color: #fff; font-size: 14px; font-weight: 800; flex: none; }
.danger-zone .dz-body { margin-top: 14px; }
.danger-zone .dz-body > p { margin: 0 0 10px; }
.danger-zone .dz-list { margin: 0 0 12px; padding-left: 22px; line-height: 1.7; }
.danger-zone .dz-warn { color: var(--bad); }
.danger-zone .profield { margin-top: 14px; }
.danger-zone .hint.flat { margin-top: 4px; }
.sugg-focus { box-shadow: 0 0 0 2px var(--accent); outline: none; } /* mensagem aberta pelo atalho do e-mail */
.sugg header { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.sugg .pill { margin-left: auto; font-size: 12px; padding: 1px 8px; border: 1px solid var(--line); border-radius: 9px; }
.sugg-text { white-space: pre-wrap; margin: 8px 0; }
.sugg-body { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; }
.sugg-body .sugg-text { flex: 1 1 auto; min-width: 0; }
.sugg-thumb { flex: none; }
.sugg-img { width: 110px; height: 70px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); display: block; }
.sugg-thumb:hover .sugg-img { border-color: var(--accent, #1666f0); }

.filters2 .fld.fld-date { min-width: 150px; flex: 0 1 170px; }
input[type=date] { font: inherit; min-height: 38px; }
input[type=date]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .7; }
input[type=date]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
.filters2 .fld input[type=text] { min-width: 0; }

.topbar .ghost .ico { vertical-align: -2px; margin-right: 3px; }
#sugg-btn svg { color: var(--accent, #1666f0); } /* só o ícone chama atenção; a borda azul parecia "item selecionado" */
.profinput { width: min(380px, 100%); flex: 0 1 380px; }
.profprev[hidden] { display: none; }
.profield { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.profprev { margin: 8px 0 0; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }

/* ======================================================================
   Design system v2 (fase 1): tipografia, botões, campos e cartões
   Só aparência: ids, atributos e comportamento continuam os mesmos.
   ====================================================================== */
:root {
  --radius-sm: 8px; --radius-md: 8px; --radius-lg: 12px;
  --h-ctl: 34px; --h-sm: 28px;
  --ring: color-mix(in srgb, var(--accent) 24%, transparent);
  --shadow-card: 0 1px 3px rgba(15, 26, 51, .04), 0 6px 16px -4px rgba(15, 26, 51, .07);
  --btn-top: #2b7afc; --btn-bot: #1666f0; --btn-edge: rgba(10, 60, 160, .35);
  --shadow-btn: 0 1px 2px rgba(22, 102, 240, .2), 0 3px 8px -2px rgba(22, 102, 240, .35);
  --shadow-sm: 0 1px 1px rgba(15, 26, 51, .05);
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, "Cascadia Code", Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --btn-top: #74adff; --btn-bot: #5b9dff; --btn-edge: rgba(255, 255, 255, .22);
    --shadow-btn: 0 1px 2px rgba(0, 0, 0, .35), 0 3px 10px -2px rgba(91, 157, 255, .35);
    --shadow-card: 0 1px 3px rgba(0, 0, 0, .3), 0 8px 20px -6px rgba(0, 0, 0, .4);
    --shadow-sm: 0 1px 1px rgba(0, 0, 0, .25);
  }
}
:root[data-theme="dark"] {
  --btn-top: #74adff; --btn-bot: #5b9dff; --btn-edge: rgba(255, 255, 255, .22);
  --shadow-btn: 0 1px 2px rgba(0, 0, 0, .35), 0 3px 10px -2px rgba(91, 157, 255, .35);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, .3), 0 8px 20px -6px rgba(0, 0, 0, .4);
  --shadow-sm: 0 1px 1px rgba(0, 0, 0, .25);
}
body { font-weight: 400; font-feature-settings: "cv11", "ss01"; }
code, pre, .mono, kbd, samp { font-family: var(--mono); }

/* Botões: altura única, secundário por padrão */
button { min-height: var(--h-ctl); padding: 0 16px; border-radius: var(--radius-sm); font-weight: 500; line-height: 1.2; box-shadow: var(--shadow-sm);
         transition: border-color .15s, background-color .15s, box-shadow .15s, transform .08s, filter .15s; }
button:hover:not(:disabled) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
button:active:not(:disabled) { transform: scale(.98); }
button.mini { min-height: var(--h-sm); padding: 0 12px; font-size: 13.5px; border-radius: var(--radius-sm); }
/* Primário */
button.primary { background: linear-gradient(180deg, var(--btn-top) 0%, var(--btn-bot) 100%); color: var(--accent-ink); font-weight: 600;
                 border-color: var(--btn-edge); box-shadow: var(--shadow-btn); }
button.primary:hover:not(:disabled) { background: linear-gradient(180deg, var(--btn-top) 0%, var(--btn-bot) 100%); border-color: var(--btn-edge); filter: brightness(1.06); }
:root:not([data-theme="dark"]) button.primary { color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) button.primary { color: var(--accent-ink); } }
/* Perigo (gravar, reverter, excluir) */
button.danger { background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%); color: #fff; font-weight: 600; border-color: rgba(127, 29, 29, .45);
                box-shadow: 0 1px 2px rgba(220, 38, 38, .2), 0 3px 8px -2px rgba(220, 38, 38, .35); }
button.danger:hover:not(:disabled) { background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%); border-color: rgba(127, 29, 29, .45); filter: brightness(1.06); }
button:disabled { opacity: .5; box-shadow: none; }
/* Botões de forma própria não ganham a altura padrão */
button.ghost, button.linkbtn, button.star, button.grpbtn, button.cpick, button.xclose, button.combo-btn, button.mode, button.tab, button.subtab,
button.rm, button.theme-btn, button.eye { min-height: 0; box-shadow: none; }
button.ghost { padding: 4px 12px; }
button.cpick { padding: 3px 12px; }
button.rm { padding: 5px 10px; }
button.tab, button.subtab { padding: 7px 14px; }
button.linkbtn, button.grpbtn, button.star { padding: 0 2px; }
button.linkbtn:hover, button.grpbtn:hover, button.star:hover, button.combo-btn:hover, button.eye:hover { background: none; }
button.cpick.on { background: var(--accent-soft); }
button.wide { width: 100%; }

/* Campos */
input[type=text], input[type=password], input[type=search], input[type=date], input[type=email], select { min-height: var(--h-ctl); padding: 0 12px; border-radius: var(--radius-md); }
textarea { padding: 9px 12px; border-radius: var(--radius-md); }
input:focus-visible, select:focus-visible, textarea:focus-visible { box-shadow: 0 0 0 3px var(--ring); }
table input[type=text], table input[type=search], table select, input.note-edit, input.ctr-edit { min-height: var(--h-sm); padding: 0 8px; }
.secret input { padding-right: 42px; }

/* Cartões e painéis */
.panel { border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.mode { box-shadow: var(--shadow-card); }
.mode[aria-selected=true] { box-shadow: 0 0 0 1px var(--accent), var(--shadow-card); }
.login-box { border-radius: 14px; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .5); }

/* Login e registro: olho de senha e conferência */
.fieldmsg { min-height: 1.2em; margin: 4px 0 0; font-size: 12.5px; }
.fieldmsg.ok { color: var(--ok); } .fieldmsg.err { color: var(--bad); }
.field .secret { margin-top: 5px; }
.field .secret input { margin-top: 0; }
details.more > summary { min-height: var(--h-sm); }

/* ---------- Janelas centralizadas (confirmações e sugestão) ---------- */
#modal-backdrop { position: fixed; inset: 0; z-index: 999; background: rgba(15, 23, 42, .45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
body.modal-open { overflow: hidden; }
.modal:not([hidden]) { position: fixed; z-index: 1000; top: 50%; left: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); margin: 0;
  width: min(540px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 20px 22px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: 14px;
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .45); animation: modal-in .16s ease-out; }
#usr-remove.modal:not([hidden]), #fl-confirm.modal:not([hidden]) { border-top-color: var(--bad); }
.modal p { margin: 0 0 12px; }
@keyframes modal-in { from { opacity: 0; transform: translate(-50%, calc(-50% + 8px)) scale(.98); } to { opacity: 1; transform: translate(-50%, -50%); } }
@media (prefers-reduced-motion: reduce) { .modal:not([hidden]) { animation: none; } }

/* ---------- Estrutura do app: sidebar + barra superior (fase 3) ---------- */
:root { --sb-w: 244px; }
.sidebar { position: fixed; z-index: 40; top: 0; left: 0; bottom: 0; width: var(--sb-w); display: flex; flex-direction: column; background: var(--surface); border-right: 1px solid var(--line); overflow-y: auto; }
.sb-brand { display: flex; align-items: center; gap: 10px; padding: 16px 16px 12px; }
.sb-brand .mark { width: 30px; height: 30px; flex: none; margin: 0; }
.sb-title { margin: 0; font-size: 15px; line-height: 1.2; letter-spacing: -.01em; font-weight: 700; }
.sb-nav { flex: 1; padding: 4px 10px; display: flex; flex-direction: column; gap: 2px; }
.sb-group { margin: 14px 8px 4px; font-size: 12px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sb-nav .modes { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.sb-nav .mode, .sidebar .nav-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; min-height: 38px; border: 1px solid transparent; border-radius: 8px; background: transparent; box-shadow: none; color: var(--ink); font-size: 14px; font-weight: 550; }
.sb-nav .mode:hover, .sidebar .nav-item:hover:not(:disabled) { background: var(--field); border-color: transparent; }
.sb-nav .mode[aria-selected=true], .sidebar .nav-item.active { background: var(--accent-soft); border-color: transparent; box-shadow: none; color: var(--accent); }
.sb-nav .mode-ico { width: 20px; height: 20px; background: none; border-radius: 0; color: inherit; }
.sb-nav .mode[aria-selected=true] .mode-ico { background: none; color: inherit; }
.sb-nav .mode-ico svg { width: 18px; height: 18px; }
.sb-nav .mode strong { font-size: 14px; font-weight: 550; display: inline; }
.sb-nav .mode small { display: none; }
.nav-ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sidebar .nav-item[hidden], .sb-nav .mode[hidden] { display: none; }
.sb-foot { padding: 10px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.nav-badge { margin-left: 6px; padding: 0 6px; border-radius: 9px; background: var(--bad); color: #fff; font-size: 12px; font-weight: 700; line-height: 17px; display: inline-block; }
.app-main { margin-left: var(--sb-w); min-width: 0; }
.appbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 20px; background: var(--bg); border-bottom: 1px solid var(--line); }
.appbar #menu-btn { display: none; }
.crumb { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); white-space: nowrap; overflow: hidden; }
.crumb b { color: var(--ink); font-weight: 650; }
.crumb .sep { opacity: .5; }
.crumb #crumb-sub { overflow: hidden; text-overflow: ellipsis; }
.crumb [hidden] { display: none; }
.appbar .topbar { position: static; margin: 0; color: var(--muted); }
.cover { position: relative; max-width: 1240px; margin: 16px auto 0; padding: 0 20px; }
.cover[hidden] { display: none; }
.cover .hero { border-radius: 14px; padding: 32px 28px; }
.cover-x { position: absolute; top: 10px; right: 30px; z-index: 3; min-height: 28px; padding: 0 9px; background: rgba(255,255,255,.08); color: #dbe5ff; border-color: rgba(122,162,255,.35); }
.cover-title { margin: 0; font-size: clamp(26px, 3.4vw, 36px); line-height: 1.08; letter-spacing: -.03em; font-weight: 720; }
.sb-brand { cursor: pointer; border-radius: 8px; }
.sb-brand:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
main { padding-top: 16px; }
#nav-backdrop { position: fixed; inset: 0; z-index: 35; background: rgba(15, 23, 42, .45); }
@media (max-width: 1100px) {
  .sidebar { transform: translateX(-102%); transition: transform .2s ease; box-shadow: none; width: min(300px, 86vw); }
  body.nav-open .sidebar { transform: none; box-shadow: 0 0 40px rgba(0, 0, 0, .35); }
  .app-main { margin-left: 0; }
  .appbar { padding: 8px 12px; }
  .appbar #menu-btn { display: inline-grid; place-items: center; width: 40px; min-height: 40px; padding: 0; }
  #crumb-group, #crumb-sep1, #crumb-sep2, .crumb #crumb-sub { display: none; }
  .appbar .topbar #who { display: none; }
  .cover { padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) { .sidebar { transition: none; } }
details.more-info { margin: 0 0 12px; }
details.more-info > p { margin: 6px 0 0; }

/* ---------- Passos e chips (fase 4) ---------- */
.stepper { margin: 0 0 14px; }
.stepper ol { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 0; }
.stepper li { display: flex; align-items: center; flex: 1; min-width: 0; }
.stepper li:not(:last-child)::after { content: ""; flex: 1; height: 2px; margin: 0 8px; background: var(--line); border-radius: 2px; }
.stepper li[data-state=done]:not(:last-child)::after { background: var(--accent); }
.stepper button { display: inline-flex; align-items: center; gap: 8px; padding: 4px 4px 4px 0; border: 0; background: transparent; color: var(--muted); font-weight: 600; font-size: 13.5px; min-height: 32px; }
.stepper button:disabled { cursor: default; opacity: 1; }
.stepper .sn { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; border: 2px solid var(--line); background: var(--surface); color: var(--muted); }
.stepper li[data-state=current] .sn { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.stepper li[data-state=current] button { color: var(--ink); }
.stepper li[data-state=done] .sn { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.stepper li[data-state=done] .sn::before { content: "✓"; }
.stepper li[data-state=done] .sn { font-size: 0; } .stepper li[data-state=done] .sn::before { font-size: 13px; }
.stepper li[data-state=done] button { color: var(--ink); cursor: pointer; }
.step-compact, .step-track { display: none; }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 1 1 100%; }
.chips-label { font-size: 12.5px; font-weight: 650; color: var(--muted); min-width: 74px; }
.chip-opt { min-height: 30px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--field); color: var(--ink); border: 1px solid var(--line); }
.chip-opt.on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.chip-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
select.chips-src { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; }
@media (max-width: 700px) {
  .stepper ol { display: none; }
  .step-compact { display: block; margin: 0 0 6px; font-size: 13.5px; font-weight: 650; color: var(--ink); }
  .step-track { display: block; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
  .step-track i { display: block; height: 100%; background: var(--accent); transition: width .2s; }
  .chips-label { min-width: 100%; }
}
.filters > .chips { grid-column: 1 / -1; flex: 1 1 100%; width: 100%; }
.chips-label { min-width: 84px; }
#bot-form-panel .filters > .combo { flex: 1 1 100%; width: 100%; grid-column: 1 / -1; }

/* ---------- Resumo, linha do tempo, ilustrações e densidade (fase 5) ---------- */
:root { --row-pad: 8px; }
.summary-strip { margin: 0 0 16px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); gap: 12px; }
.kpi { background: var(--field); border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: grid; gap: 6px; min-width: 0; align-content: start; }
.kpi .kl { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.kpi .kv { font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi .kv-sm { font-size: 19px; }
.kpi .ks { font-size: 12.5px; color: var(--muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.kpi svg.spark { width: 100%; height: 34px; display: block; }
.kpi .bar { height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; }
.kpi .bar i { display: block; height: 100%; background: var(--ok); }
.kpi .bar i.warn { background: var(--warn); } .kpi .bar i.bad { background: var(--bad); }
.pill { display: inline-flex; align-items: center; padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 650; }
.pill.ok { background: var(--ok-soft); color: var(--ok); } .pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.bad { background: var(--bad-soft); color: var(--bad); } .pill.info { background: var(--accent-soft); color: var(--accent); }
@media (min-width: 701px) {
  table.tl tbody td:first-child { position: relative; padding-left: 30px; white-space: nowrap; }
  table.tl tbody td:first-child::before { content: ""; position: absolute; left: 12px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); z-index: 1; }
  table.tl tbody td:first-child::after { content: ""; position: absolute; left: 16px; top: 0; bottom: 0; width: 1px; background: var(--line); }
  table.tl tbody tr:first-child td:first-child::after { top: 50%; }
  table.tl tbody tr:last-child td:first-child::after { bottom: 50%; }
  table.tl tbody tr:has(td.errc) td:first-child::before { background: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }
  table.tl tbody td.okc, table.tl tbody td.errc { font-weight: 650; }
  table.tl tbody tr:hover td { background: var(--field); }
}
.ill-empty { display: grid; justify-items: center; gap: 6px; padding: 18px 12px; text-align: center; }
.ill-empty svg { width: 132px; height: 96px; max-width: 100%; }
.ill-empty b { font-size: 15px; color: var(--ink); }
.ill-empty span { color: var(--muted); font-size: 13.5px; max-width: 44ch; }
#ok-art:not([hidden]) { margin-bottom: 12px; }
.login-art { display: block; width: 132px; height: 96px; margin: 0 auto 10px; max-width: 100%; }
.draw { stroke-dasharray: 60; stroke-dashoffset: 60; animation: draw 1.1s .2s ease forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .draw { animation: none; stroke-dashoffset: 0; } }
.pill.prd { background: var(--bad); color: #fff; }
.seg { display: inline-flex; background: var(--field); border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 2px; }
.seg button { border: 0; background: transparent; color: var(--muted); font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 8px; min-height: 30px; }
.seg button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.prefrow { align-items: center; gap: 12px; }
/* Densidade (Minha conta > Preferências); o padrão não muda nada */
html[data-density="compact"] { --row-pad: 4px; --h-ctl: 30px; --h-sm: 24px; }
html[data-density="compact"] .panel { padding: 14px 16px; }
html[data-density="compact"] .kpi { padding: 10px; }
html[data-density="comfortable"] { --row-pad: 13px; --h-ctl: 40px; --h-sm: 32px; }
html[data-density="comfortable"] .panel { padding: 28px; }
html[data-density="comfortable"] .kpi { padding: 18px; }
.audit th, .audit td { padding: var(--row-pad) 12px; }
.res { padding: var(--row-pad) 12px; }
.pill[hidden] { display: none; }

/* ---------- Diff e editor de código (fase 6) ---------- */
.dc { padding-left: 58px; }
.dc .ln { position: absolute; left: 0; width: 34px; text-align: right; color: var(--muted); opacity: .75; user-select: none; font-variant-numeric: tabular-nums; }
.dc .mk { left: 42px; }
.dnote { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.diff.unified { grid-template-columns: 1fr; }
.diff.unified .dc.same.r, .diff.unified .dc.empty { display: none; }
.diff.unified .dhead + .dhead { border-top: 1px solid var(--line); }
@media (max-width: 700px) {
  .diff { grid-template-columns: 1fr; }
  .diff .dc.same.r, .diff .dc.empty { display: none; }
  .dtoggle { display: none; }
}
.codeed { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--field); margin-top: 10px; }
.codeed-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; background: var(--surface); border-bottom: 1px solid var(--line); }
.codeed-name { font-family: var(--mono); font-size: 13px; font-weight: 600; margin-right: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.codeed-bar .mini[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.codeed-body { display: flex; height: 400px; min-height: 180px; resize: vertical; overflow: hidden; }  /* arraste o canto para aumentar */
.codeed .gutter { margin: 0; flex: none; min-width: 44px; padding: 10px 8px 10px 10px; text-align: right; font: 12.5px/1.5 var(--mono); color: var(--muted); background: var(--surface); border-right: 1px solid var(--line); overflow: hidden; user-select: none; white-space: pre; }
.codeed.wrapped .gutter { display: none; }
.codeed textarea.wellj { flex: 1; min-width: 0; margin: 0; border: 0; border-radius: 0; background: var(--field); font: 12.5px/1.5 var(--mono); padding: 10px; resize: none; white-space: pre; overflow: auto; min-height: 0; }
.codeed.wrapped textarea.wellj { white-space: pre-wrap; overflow-wrap: anywhere; }
.codeed textarea.wellj:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
@media (max-width: 700px) { .codeed textarea.wellj { font-size: 16px; } .codeed-name { flex-basis: 100%; } }

/* Celular: áreas seguras (notch e barra de gestos) e dicas por toque */
.sidebar { height: 100vh; height: 100dvh; }
.sb-foot { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
.appbar { padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
main { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
.touchtip { position: fixed; z-index: 2000; max-width: min(300px, calc(100vw - 24px)); padding: 8px 11px; border-radius: 8px; background: var(--ink); color: var(--bg); font-size: 13px; line-height: 1.4; box-shadow: 0 8px 24px rgba(0, 0, 0, .3); pointer-events: none; }
.envtag { display: inline-flex; align-items: center; flex: none; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .03em; }
.envtag.prd { background: var(--bad); color: #fff; }
.envtag.hmg { background: var(--accent-soft); color: var(--accent); }
.env-warn { margin: 10px 0 0; }

/* ---- avisos no canto (toast) e confirmação digitada ---- */
#toasts { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 90; display: flex; flex-direction: column; gap: 8px; max-width: min(360px, calc(100vw - 32px)); pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 10px; font-size: 14px; background: var(--surface, #fff); color: var(--ink, #111); border: 1px solid var(--line, #ddd); border-left: 4px solid var(--ok, #1a9d5c); box-shadow: 0 8px 24px rgba(0,0,0,.18); animation: toast-in .12s ease-out; }
.toast.out { opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; }
.toast span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
/* v4.43/4.44: visto verde nos avisos de sucesso, pequeno e SEM animação (aparece junto com o aviso, na hora) */
.toast-check { width: 20px; height: 20px; flex: none; order: -1; margin-top: 0; }
.toast-check .c { fill: var(--ok-soft); stroke: var(--ok, #1a9d5c); stroke-width: 3; }
.toast-check .t { fill: none; stroke: var(--ok, #1a9d5c); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
/* sucesso curto: só o aviso flutuante; o texto fica escondido (continua no elemento) */
.msg.quiet { display: none; }
.toast-x { border: 0; background: transparent; color: inherit; font-size: 18px; line-height: 1; padding: 0 2px; cursor: pointer; box-shadow: none; min-height: 0; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }
#ask-box h3 { margin: 0 0 8px; font-size: 16px; }
#ask-box .ask-word { display: block; margin: 0 0 12px; font-size: 14px; }
#ask-box .ask-word input { display: block; width: 100%; margin-top: 6px; }
.lastseen { white-space: nowrap; font-variant-numeric: tabular-nums; }

.envslot .envtag { justify-self: start; }
@media (max-width: 760px) { .envslot:empty { display: none; } }

.kpi-cap { margin: 0 0 6px; font-size: 12.5px; color: var(--muted); font-weight: 600; }



/* ---- Etapa 3: garantias da operação + barra de ações ---- */
.guard { margin: 16px 0 0; padding: 14px 16px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--field); min-width: 0; }
.guard legend { display: inline-flex; align-items: center; gap: 8px; padding: 0 6px; font-size: 12.5px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.guard legend svg { width: 16px; height: 16px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.guard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.guard-opt { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; }
.guard-opt:has(input:checked) { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.guard-opt input { margin-top: 3px; flex: none; }
.guard-opt b { display: block; font-size: 14px; font-weight: 650; }
.guard-opt small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.actionbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }

/* ---- Builder: filtros recolhíveis ---- */
.bldtop { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.bldtop .fld.grow { flex: 1 1 240px; min-width: 200px; }
.bldtop .sp { flex: 1 1 0; }
.filtros { position: relative; }
.filtros > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: var(--h-ctl); padding: 0 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); cursor: pointer; font-weight: 500; user-select: none; }
.filtros > summary::-webkit-details-marker { display: none; }
.filtros > summary::after { content: "▾"; font-size: 12px; color: var(--muted); }
.filtros[open] > summary { border-color: var(--accent); }
.fcount { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; }
.filtros[open] { flex: 1 1 100%; order: 5; }
.fpop { margin-top: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--field); display: grid; gap: 12px; }
.fpop .filters2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0; }
.fpop .optrow { margin: 0; }

/* ---- Menu: usuário no rodapé ---- */
.sb-user { display: flex; align-items: center; gap: 10px; padding: 6px 10px 10px; min-width: 0; }
.sb-user .avatar { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; }
.sb-user .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 600; }


/* ---- Paleta "Grafite" (opcional, só no tema escuro): Preferências > Paleta ---- */
@media (prefers-color-scheme: dark) {
  :root[data-palette="graphite"]:not([data-theme="light"]) {
    --bg: #0f1117; --surface: #161922; --field: #1d212c; --muted: #98a2b8; --line: #262a36;
    --accent-ink: #ffffff; --accent-soft: #172447; --bad-soft: #2d1518; --hero: #0b0e16;
    --btn-top: #2b75f5; --btn-bot: #1666f0; --btn-edge: rgba(255, 255, 255, .18);
    --shadow-btn: 0 1px 2px rgba(0, 0, 0, .35), 0 3px 10px -2px rgba(22, 102, 240, .45);
  }
}
:root[data-palette="graphite"][data-theme="dark"] {
  --bg: #0f1117; --surface: #161922; --field: #1d212c; --muted: #98a2b8; --line: #262a36;
  --accent-ink: #ffffff; --accent-soft: #172447; --bad-soft: #2d1518; --hero: #0b0e16;
  --btn-top: #2b75f5; --btn-bot: #1666f0; --btn-edge: rgba(255, 255, 255, .18);
  --shadow-btn: 0 1px 2px rgba(0, 0, 0, .35), 0 3px 10px -2px rgba(22, 102, 240, .45);
}

/* ---- Abertura: enquanto a página escolhe a tela, não mostra a capa nem a tela inicial por um instante ---- */
html[data-nocover] #cover, html[data-boot] #cover, html[data-boot] #mode-sync, html[data-boot] #res-tabs { display: none !important; }
@media (max-width: 1000px) and (min-width: 701px) { #bld-table td.actions { white-space: normal; } }

/* ---- Ajuda ---- */
.hp-bar { align-items: center; gap: 10px; margin: 10px 0 14px; }
.hp-bar input[type="search"] { flex: 1 1 260px; min-width: 0; }
.hp-group h3 { margin: 18px 0 8px; font-size: 14px; letter-spacing: .02em; }
.hp-topic { border: 1px solid var(--line, rgba(128,128,128,.25)); border-radius: 10px; margin: 6px 0; background: var(--panel, transparent); }
.hp-topic > summary { cursor: pointer; padding: 10px 14px; font-weight: 600; min-height: 34px; }
.hp-body { padding: 2px 16px 14px; }
.hp-body ol { margin: 8px 0; padding-left: 20px; }
.hp-body li { margin: 4px 0; line-height: 1.5; }
.hp-when { margin: 6px 0; }
.hp-go { margin-top: 6px; }
.hp-edit { border: 1px solid var(--line, rgba(128,128,128,.35)); border-radius: 12px; padding: 4px 16px 14px; margin: 10px 0 16px; }
.hp-edit label { display: block; margin: 10px 0; font-size: 13px; }
.hp-edit input[type="text"], .hp-edit select, .hp-edit textarea { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; }
.hp-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.hp-adm { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.hp-hidden { margin-top: 14px; }
.req { color: #e5484d; }
.hp-edit .hp-bad { border-color: #e5484d !important; box-shadow: 0 0 0 3px rgba(229,72,77,.28); outline: none; }
.hp-err { display: block; margin-top: 4px; color: #e5484d; font-size: 12.5px; font-weight: 600; min-height: 0; }
.hp-err:empty, .hp-warn:empty, .hp-hint:empty { display: none; }
.hp-warn { display: block; margin-top: 4px; color: #d9a21b; font-size: 12.5px; }
.hp-check { display: flex !important; align-items: center; gap: 8px; }
.hp-hint { display: block; margin-top: 4px; opacity: .75; font-size: 12.5px; }
.hp-meta { display: block; text-align: right; font-size: 12px; opacity: .7; }
.hp-cnt.over { color: #e5484d; font-weight: 700; opacity: 1; }

/* ---- Ajuda: chips, etapas em nós, alertas com escudo, editor ---- */
.hp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.hp-chip { min-height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line, rgba(128,128,128,.35)); background: transparent; color: inherit; font-weight: 600; font-size: 13px; cursor: pointer; }
.hp-chip.on { background: #1666f0; border-color: #1666f0; color: #fff; }
.hp-flow { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin: 12px 0; padding: 0; }
.hp-node { display: flex; align-items: center; }
.hp-node + .hp-node::before { content: ""; width: 22px; height: 2px; background: currentColor; opacity: .35; margin: 0 2px 0 6px; }
.hp-node + .hp-node::after { content: none; }
.hp-n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(22,102,240,.18); color: #7aa2ff; font-size: 12px; font-weight: 700; margin-right: -8px; position: relative; z-index: 1; }
.hp-step { padding: 6px 12px 6px 16px; border-radius: 8px; border: 1px solid var(--line, rgba(128,128,128,.35)); font-size: 13px; background: rgba(128,128,128,.06); }
.hp-prev:empty { display: none; }
.hp-care { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; padding: 10px 12px; border: 1px solid rgba(217,162,27,.45); border-left-width: 4px; border-radius: 8px; background: rgba(217,162,27,.08); }
.hp-care.danger { border-color: rgba(229,72,77,.5); background: rgba(229,72,77,.08); }
.hp-care p { margin: 2px 0 0; }
.hp-ico { flex: none; width: 20px; height: 20px; margin-top: 1px; fill: none; stroke: #d9a21b; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hp-care.danger .hp-ico { stroke: #e5484d; }
.hp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
@media (max-width: 700px) {
  .hp-grid { grid-template-columns: 1fr; }
  .hp-chip { min-height: 44px; }
  .hp-flow { flex-direction: column; align-items: flex-start; }
  .hp-node + .hp-node::before { width: 2px; height: 14px; margin: 2px 0 2px 10px; }
  .hp-node { flex-wrap: nowrap; }
  .hp-topic > summary { min-height: 44px; display: flex; align-items: center; list-style: none; }
  .hp-topic > summary::-webkit-details-marker { display: none; }
  .hp-topic > summary::before { content: "▸"; margin-right: 8px; opacity: .7; }
  .hp-topic[open] > summary::before { content: "▾"; }
}
.del-detail { margin-top: 14px; }
.del-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.del-detail h4 { margin: 14px 0 6px; }
.del-rows { list-style: none; margin: 0; padding: 0; }
.del-rows li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 6px 0; border-bottom: 1px solid var(--line, rgba(128,128,128,.2)); }
.del-rows .mini { margin-left: auto; }

/* ---- Ajuda: busca com lupa, cartões com ícone, etiqueta, subtítulo e passos ---- */
.hp-search { position: relative; flex: 1 1 260px; min-width: 0; display: flex; align-items: center; }
.hp-search input[type="search"] { width: 100%; padding-left: 40px; padding-right: 110px; }
.hp-lupa { position: absolute; left: 13px; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; opacity: .55; pointer-events: none; }
.hp-count { position: absolute; right: 8px; padding: 3px 9px; border-radius: 6px; font-size: 12px; background: rgba(128,128,128,.14); opacity: .85; pointer-events: none; white-space: nowrap; }
.hp-topic > summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 10px 14px; min-height: 48px; cursor: pointer; }
.hp-topic > summary::-webkit-details-marker { display: none; }
.hp-topic > summary::before { content: none !important; }
.hp-topic > summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-left: 4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .55; transition: transform .15s; }
.hp-topic[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.hp-ic { flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: rgba(22,102,240,.16); color: #7aa2ff; }
.hp-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hp-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hp-ttl { font-weight: 600; overflow-wrap: anywhere; }
.hp-sub { font-weight: 400; font-size: 12.5px; opacity: .65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-tag { flex: none; padding: 2px 9px; border-radius: 6px; border: 1px solid var(--line, rgba(128,128,128,.35)); font-size: 12px; font-weight: 600; opacity: .85; white-space: nowrap; }
.hp-steps { flex: none; font-size: 12px; opacity: .6; white-space: nowrap; }
.hp-when { margin: 6px 0 10px; padding: 10px 14px; border: 1px solid var(--line, rgba(128,128,128,.28)); border-radius: 10px; background: rgba(128,128,128,.06); }
.hp-lbl { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .6; margin-bottom: 3px; }
.hp-when p { margin: 0; }
@media (max-width: 700px) {
  .hp-sub, .hp-tag { display: none; }
  .hp-steps { font-size: 12px; }
  .hp-topic > summary { gap: 10px; padding: 8px 12px; min-height: 52px; }
  .hp-search { flex-basis: 100%; }
  .hp-search input[type="search"] { padding-right: 96px; }
}

/* ---- Troca de tela: sem piscar ---- */
body.leaving { opacity: 0; transition: opacity .09s ease-out; }
body { animation: page-in .16s ease-out; }
.soft-in { animation: page-in .16s ease-out; }
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { body, .soft-in { animation: none; } body.leaving { transition: none; } }

/* ---- Cuidados: um bloco só, âmbar ---- */
.hp-callout-warning { margin: 12px 0; padding: 10px 14px; border-left: 3px solid #f59e0b; border-radius: 6px; background: rgba(245,158,11,.05); }
.hp-callout-title { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-weight: 700; color: #f59e0b; }
.hp-callout-title .hp-ico { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.hp-callout-warning ul { margin: 0; padding-left: 20px; }
.hp-callout-warning li.hp-care { display: list-item; margin: 4px 0; padding: 0; border: 0; background: none; border-radius: 0; }
.hp-callout-warning li.hp-care.danger { color: #ff8a8d; font-weight: 600; }
@media (max-width: 640px) {
  #help-bar { flex-wrap: wrap; }
  #help-bar .hp-search { flex: 1 1 100%; }
  #help-bar > button { flex: 1 1 auto; min-height: 44px; }
}

/* A paleta só vale no tema escuro: no claro a opção some */
html[data-eff="light"] .pal-row { display: none; }

/* ---- Estados vazios com um pouco de vida ---- */
.ill-empty svg { animation: ill-float 4.5s ease-in-out infinite; }
.ill-empty svg [stroke-dasharray] { animation: ill-dash 7s linear infinite; }
@keyframes ill-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes ill-dash { to { stroke-dashoffset: -48; } }
@media (prefers-reduced-motion: reduce) { .ill-empty svg, .ill-empty svg [stroke-dasharray] { animation: none; } }
.idle-slot { display: none; padding: 26px 0 40px; }
#mode-sync:not(:has(> section.panel:not(#p1):not([hidden]))) > .idle-slot,
#mode-export:not(:has(> section.panel:not(:first-of-type):not([hidden]))) > .idle-slot,
#mode-import:not(:has(> section.panel:not(:first-of-type):not([hidden]))) > .idle-slot,
#mode-flows:not(:has(> section.panel:not(:first-of-type):not([hidden]))) > .idle-slot { display: block; }
#bld-tab-empty .ill-empty, .tab-empty .ill-empty { padding: 22px 12px; }

.hp-topic li > b.hp-key { color: var(--accent); font-weight: 700; }
.lastseen .t { display: block; font-size: 12px; opacity: .7; }
.lastseen { font-size: 13px; }
.lastseen-h { white-space: normal; min-width: 104px; }

/* ---- Tags retangulares e status com bolinha ---- */
.pill, .badge { border-radius: 5px; }
.pill.prd, .pill.hmg, .badge.prd, .badge.hmg, .envtag { border-radius: 4px; font-family: var(--mono, ui-monospace, monospace); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.stdot { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted, #8b97ad); }
.stdot i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.stdot.ok { color: var(--ok); } .stdot.warn { color: var(--warn); } .stdot.bad { color: var(--bad); }
.envroute { margin: 0 0 8px; } .envroute .arrow { opacity: .55; margin: 0 4px; }
.callout-prd { margin: 0 0 10px; padding: 10px 14px; border-left: 3px solid var(--bad); border-radius: 6px; background: var(--bad-soft); }
#audit-chips { margin: 8px 0 10px; }

.fld-bad { border-color: #e5484d !important; box-shadow: 0 0 0 3px rgba(229,72,77,.28) !important; outline: none; }
.callout-warn { margin: 10px 0; padding: 12px 14px; border-left: 3px solid #f59e0b; border-radius: 6px; background: rgba(245,158,11,.07); }
#ask-box .ask-check { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 12px; font-size: 14px; }
#ask-box .ask-check input { margin-top: 3px; }


/* Builder: os botões da linha quebram em duas linhas em vez de cortar a tabela */
#bld-table th, #bld-table td { padding-left: 8px; padding-right: 8px; }
#bld-table th { white-space: normal; }
#bld-table td.actions { white-space: nowrap; text-align: right; }
#bld-table td.actions .mini { margin: 0 0 0 3px; padding: 4px 9px; font-size: 12.5px; }
@media (max-width: 1000px) { #bld-table td.actions { white-space: normal; min-width: 200px; } #bld-table td.actions .mini { margin: 0 3px 4px 0; } }
/* Seletor de bot com digitação: campo único (digita e lista no mesmo lugar) */
select.botpick.combo-src { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.combo { position: relative; flex: 1 1 220px; min-width: 0; }
.combo-in { width: 100%; padding-right: 34px; text-overflow: ellipsis; }
.combo::after { content: ''; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; margin-top: -6px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); pointer-events: none; }
.combo-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; max-height: 260px; overflow: auto; margin: 0; padding: 4px; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.combo-list li { padding: 8px 10px; border-radius: 7px; cursor: pointer; font-size: 14px; }
.combo-list li[aria-selected=true] { background: var(--accent-soft); color: var(--accent); }
.combo-list li.on { font-weight: 700; }
.combo-list li.none { color: var(--muted); cursor: default; }
.combo-list mark { background: transparent; color: var(--accent); font-weight: 700; border: 0; outline: 0; box-shadow: none; padding: 0; }
/* Abas de Cadastros: isoladas, como as do Builder */
#cad-tabs { margin: 4px 0 14px; padding: 0; gap: 22px; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; width: auto; }
#cad-tabs .subtab { border-radius: 0; padding: 10px 2px; background: transparent; border-bottom: 2px solid transparent; margin-bottom: -1px; }
#cad-tabs .subtab[aria-selected=true] { background: transparent; color: var(--accent); border-bottom-color: var(--accent); }
.tabn { display: inline-block; min-width: 22px; padding: 1px 7px; margin-left: 4px; font-size: 12px; font-weight: 700; text-align: center; border-radius: 999px; background: var(--field); color: var(--muted); }
#cad-tabs [aria-selected=true] .tabn { background: var(--accent-soft); color: var(--accent); }
.cad-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.cad-head h2 { margin: 0 0 8px; }
.cad-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* o olhinho de mostrar a senha não pode descer quando é clicado (o efeito de apertar dos botões sobrescrevia o translateY) */
.eye:active:not(:disabled), .eye:focus:not(:disabled) { transform: translateY(-50%); }

/* Origem no histórico: Automático (sistema) x Manual (você) */
.orig { display: table; margin: 0 0 3px; padding: 0 7px; border-radius: 4px; font-size: 12px; font-weight: 700; letter-spacing: .02em; vertical-align: 1px; }
.orig.auto { background: var(--accent-soft); color: var(--accent); }
.orig.man { background: var(--field); color: var(--muted); }

/* Revisão: etiquetas de situação e tipo, origem x destino lado a lado */
.ktag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; border: 1px solid transparent; }
.ktag.k-conf { background: var(--warn-soft); color: var(--warn); border-color: var(--warn); }
.ktag.k-new { background: var(--ok-soft); color: var(--ok); border-color: var(--ok); }
.ktag.k-same { background: var(--field); color: var(--muted); border-color: var(--line); }
.item .mime { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.item .cols > div { background: var(--field); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.item .cols > div:first-child > b { color: var(--accent); }
.item .cols > div:last-child > b { color: var(--warn); }
.item .cols b { display: block; margin-bottom: 6px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }

/* Histórico: ação colorida e frase de detalhe */
.atag { display: inline-block; padding: 1px 8px; border-radius: 6px; font-size: 12px; font-weight: 700; border: 1px solid var(--line); background: var(--field); }
.atag.ok { background: var(--ok-soft); color: var(--ok); border-color: var(--ok); }
.atag.info { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.atag.warn { background: var(--warn-soft); color: var(--warn); border-color: var(--warn); }
.atag.bad { background: var(--bad-soft); color: var(--bad); border-color: var(--bad); }
.atag.copy { background: var(--copy-soft, var(--accent-soft)); color: var(--copy, var(--accent)); border-color: var(--copy, var(--accent)); }
.atag.rb { background: #efe6fb; color: #6b3fb0; border-color: #b79be0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .atag.rb { background: #2a1f40; color: #c4a8f5; border-color: #6b4fa0; } }
:root[data-theme="dark"] .atag.rb { background: #2a1f40; color: #c4a8f5; border-color: #6b4fa0; }
.adet { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); font-weight: 400; }

/* Escolhas de Ambiente: Produção em vermelho, Homologação em azul (quando não selecionadas, só a cor do texto) */
.chip-opt.v-prd:not(.on) { color: var(--bad); border-color: var(--bad); }
.chip-opt.v-hmg:not(.on) { color: var(--accent); border-color: var(--accent); }

/* Login com Google e avisos das telas de entrada */
.gbtn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin: 0 0 12px; padding: 10px 14px; background: #fff; color: #1f2937; border: 1px solid #d0d7e2; border-radius: 10px; font-weight: 600; cursor: pointer; }
.gbtn[hidden] { display: none; }
.gbtn:hover:not(:disabled) { background: #f4f7fb; }
.gbtn svg { width: 18px; height: 18px; }
.login-box .msg[hidden] { display: none; }

/* Gráfico de atividade (Administração) */
.ac-box { margin-top: 12px; }
.ac-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 6px; }
.ac-head h3 { margin: 0; font-size: 14px; }
.ac-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--muted); }
.ac-key i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.ac-key b { color: var(--text); font-variant-numeric: tabular-nums; }
.ac-svg { width: 100%; height: auto; display: block; }
.ac-grid { stroke: var(--line); stroke-width: 1; }
.ac-t { fill: var(--muted); font-size: 12px; }
.ac-bar:hover rect:not([fill="transparent"]), .ac-bar:focus rect:not([fill="transparent"]) { opacity: .75; }
.ac-bar:focus { outline: none; }
.invite-mail { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.invite-mail input { flex: 1 1 220px; }
.ac-k0 { background: var(--accent); } .ac-k1 { background: var(--ok); } .ac-k2 { background: var(--warn); }

/* Formulários de cadastro (bot e contrato) como janela flutuante sobre a lista */
#bot-form-panel:not([hidden]), #ctr-form-panel:not([hidden]) { position: fixed; z-index: 60; top: 5vh; left: 0; right: 0; margin: 0 auto; width: min(620px, calc(100vw - 24px)); max-height: 90vh; overflow: auto; box-shadow: 0 0 0 100vmax rgba(15, 23, 42, .42), 0 18px 50px rgba(0, 0, 0, .35); }
/* camada transparente que impede cliques na lista por trás (o escurecimento é a sombra acima) */
#bot-form-panel:not([hidden])::before, #ctr-form-panel:not([hidden])::before { content: ''; position: fixed; inset: 0; z-index: -1; }
.tabn.st-warn { background: var(--warn-soft); color: var(--warn); } .tabn[hidden] { display: none; }

/* Tela de entrada: link de senha ao lado do campo, "ou" e botão Criar conta */
.or-line { display: flex; align-items: center; gap: 12px; margin: 20px 0 14px; color: var(--muted); font-size: 12.5px; }
.or-line::before, .or-line::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.btn-outline { display: block; box-sizing: border-box; width: 100%; padding: 10px 14px; text-align: center; font-weight: 600; text-decoration: none; color: var(--accent); background: transparent; border: 1px solid var(--accent); border-radius: 10px; }
.btn-outline:hover { background: var(--accent-soft); }
#signup-wrap[hidden], #resend-wrap[hidden] { display: none; }
.login-box .invite-line { margin: 18px 0 0; }
#g-or { margin: 14px 0 16px; }

/* Voltar ao login (telas de criar conta, convite, esqueci e redefinir a senha) */
.login-box .back-link { display: inline-block; margin: 0 0 14px; font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; }
.login-box .back-link:hover, .login-box .back-link:focus-visible { color: var(--accent); text-decoration: underline; }

/* Atendimento (Desk) e Status da Blip */
.dkd-sec { margin: 14px 0; }
.dkd-sec h4 { margin: 0 0 6px; font-size: 14px; }
.dkd-list { list-style: none; margin: 0; padding: 0; }
.dkd-list > li { padding: 5px 8px; border-radius: 6px; margin-bottom: 3px; font-size: 13.5px; }
.dkd-list > li b { display: inline-block; width: 16px; text-align: center; }
.dkd-list > li.dk-add { background: var(--ok-soft); color: var(--ink); }
.dkd-list > li.dk-del { background: var(--bad-soft); color: var(--ink); }
.dkd-list > li.dk-chg { background: var(--warn-soft); color: var(--ink); }
.dkd-fields { list-style: none; margin: 4px 0 2px 22px; padding: 0; font-size: 12.5px; color: var(--muted); }
.dkd-fields li { padding: 1px 0; word-break: break-word; }
.stbadge { display: inline-block; padding: 1px 9px; border-radius: 10px; font-size: 12.5px; font-weight: 600; }
.stbadge.good { background: var(--ok-soft); color: var(--ok); }
.stbadge.bad { background: var(--warn-soft); color: var(--warn); }
#st-d-text { width: 100%; font-family: var(--mono); font-size: 13px; }
#st-url { font-family: var(--mono); font-size: 12.5px; }

/* Período do gráfico de atividade e lista "O que cada ação faz" */
.ac-periods { display: flex; gap: 4px; }
.ac-periods .mini.on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); font-weight: 600; }
.actdef { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 10px 0 8px; font-size: 14px; }
.actdef dt { font-weight: 700; }
.actdef dd { margin: 0; color: var(--muted); }
@media (max-width: 560px) { .actdef { grid-template-columns: 1fr; gap: 0; } .actdef dd { margin: 0 0 8px; } }

/* Tabela de usuários: cabeçalhos sem sobreposição e ações em duas fileiras alinhadas */
#users-table th { white-space: nowrap; }
#users-table th.lastseen-h { white-space: normal; }
#users-table td, #users-table th { padding-left: 7px; padding-right: 7px; }
#users-table td.actions button.mini { font-size: 12.5px; padding: 3px 7px; }
#users-table th.lastseen-h { min-width: 98px; }
@media (max-width: 1320px) { #users-table .actbar { grid-template-columns: repeat(2, max-content); } }

.bc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.bc-prev { max-height: 320px; overflow: auto; white-space: pre-wrap; word-break: break-all; }
.jsoned { display: flex; border: 1px solid var(--line, #1f2a44); border-radius: 8px; overflow: hidden; background: var(--bg-code, #0b1224); font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.jsoned-gut { padding: 10px 8px 10px 10px; text-align: right; color: var(--muted, #6b7a99); user-select: none; white-space: pre; overflow: hidden; border-right: 1px solid var(--line, #1f2a44); min-width: 34px; height: 300px; box-sizing: border-box; }
.jsoned-body { position: relative; flex: 1; min-width: 0; height: 300px; }
.jsoned-hl, .jsoned-ta { position: absolute; inset: 0; margin: 0; padding: 10px 12px; font: inherit; line-height: inherit; white-space: pre; tab-size: 4; overflow: auto; box-sizing: border-box; border: 0; text-align: left; }
.jsoned-hl { pointer-events: none; color: var(--fg, #dbe4ff); overflow: hidden; }
.jsoned-ta { background: transparent; color: transparent; caret-color: var(--fg, #dbe4ff); resize: none; outline: none; }
.jsoned:focus-within { border-color: var(--accent, #4c8dff); }
.jk { color: #7cc4ff; } .js { color: #9be29b; } .jn { color: #f0b86e; } .jb { color: #d79bf2; } .jp { color: #8b97b5; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .jk { color: #0b61a4; } :root:not([data-theme="dark"]) .js { color: #1a7f37; } :root:not([data-theme="dark"]) .jn { color: #a05a00; } :root:not([data-theme="dark"]) .jb { color: #8250df; } }
:root[data-theme="light"] .jk { color: #0b61a4; } :root[data-theme="light"] .js { color: #1a7f37; } :root[data-theme="light"] .jn { color: #a05a00; } :root[data-theme="light"] .jb { color: #8250df; }
.bc-m-list { max-height: 220px; overflow: auto; display: grid; gap: 6px; padding: 8px 10px; border: 1px solid var(--line, #1f2a44); border-radius: 8px; }
.jsoned .jsoned-gut { background: rgba(127, 140, 170, .12); color: var(--muted, #6b7a99); }

/* Telas de entrada: Google como ação secundária, "Esqueci a senha" na linha do rótulo, alvos de toque no celular */
.gbtn { background: transparent; color: var(--muted); border: 1px solid var(--line); font-weight: 600; transition: border-color .15s, color .15s, background .15s; }
.gbtn:hover:not(:disabled) { background: var(--field); color: var(--ink); border-color: var(--muted); }
.or-line[hidden] { display: none; }
p.or-line { margin: 4px 0 14px; }
.login-box .forgot-row { float: right; margin: 0; font-size: 13px; line-height: 1.5; position: relative; z-index: 1; }
@media (max-width: 480px) {
  .login-box { width: 100%; }
  .login-box input[type="text"], .login-box input[type="email"], .login-box input[type="password"] { min-height: 44px; font-size: 16px; }
  .login-box button.primary, .login-box .btn-outline, .login-box .gbtn { min-height: 44px; }
  .login-box .eye { width: 44px; height: 44px; right: 0; }
  .login-box .forgot-row a { display: inline-block; padding: 6px 0; margin-top: -6px; }
}
.st-rotate { margin-left: 16px; }

/* Caixa única "digitar e escolher" (combo.js): o <select> original fica invisível, só como fonte do valor */
.cbx { position: relative; min-width: 0; }
.cbx[hidden] { display: none; }
.cbx .cbx-in { width: 100%; padding-right: 38px; text-overflow: ellipsis; }
.cbx .cbx-btn { position: absolute; top: 0; right: 0; height: 100%; width: 38px; padding: 0; border: 0; background: transparent; color: var(--muted); font-size: 15px; box-shadow: none; cursor: pointer; }
.cbx .cbx-btn:hover:not(:disabled) { background: none; color: var(--accent); }
.cbx .cbx-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none; max-height: 280px; overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .55); }
.cbx .cbx-list[hidden] { display: none; }
.cbx .cbx-list li { padding: 7px 10px; border-radius: 7px; cursor: pointer; font-size: 14px; color: var(--ink); }
.cbx .cbx-list li.on, .cbx .cbx-list li[data-i]:hover { background: var(--accent-soft); }
.cbx .cbx-list li.sel { font-weight: 600; }
.cbx .cbx-list li.cbx-none { cursor: default; color: var(--muted); font-size: 13px; }
.cbx select.cbx-native { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; min-width: 0; padding: 0; margin: 0; border: 0; opacity: 0; pointer-events: none; }
.bc-exists { margin: -4px 0 12px; font-size: 13px; color: var(--muted); }
.bc-exists.warn { color: var(--warn, #f0b86e); }
.bc-exists.new { color: var(--ok, #4ade80); }
.bc-m-ctrs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bc-m-ctrs[hidden] { display: none; }
.bc-m-ctrs .cpick.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.bc-m-list .bc-m-grp { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 6px; }
.bc-m-list .bc-m-grp:first-child { margin-top: 0; }
#bc-m-env .mini.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
td.bc-diff { color: var(--warn, #f0b86e); font-weight: 600; }
td.bc-val { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; word-break: break-all; }
.bc-grid .fld { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted, #667); min-width: 0; }
.bc-grid .fld input { width: 100%; font-size: 14px; }
#bc-c-wrap[hidden] { display: none; }

/* Ação destrutiva dentro de tabela: contorno vermelho (preenche só ao passar o mouse), para não pesar em toda linha */
table.audit td.actions button.danger { background: transparent; color: var(--bad); border-color: var(--bad); box-shadow: none; }
table.audit td.actions button.danger:hover:not(:disabled) { background: var(--bad); color: #fff; }
/* O <select> que fica por baixo da caixa única nunca ocupa espaço (nem no celular, onde selects têm largura total) */
select.botpick.combo-src, .cbx select.cbx-native { width: 1px !important; min-width: 0 !important; max-width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; margin: 0 !important; flex: 0 0 auto !important; }

/* ---- Acessibilidade (fase 19) ---- */
.skip-link { position: fixed; left: 12px; top: -60px; z-index: 200; padding: 10px 14px; border-radius: 10px; background: var(--accent); color: #fff; font-weight: 600; text-decoration: none; transition: top .15s; }
.skip-link:focus { top: 12px; outline: 3px solid var(--ink); outline-offset: 2px; }
main:focus { outline: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
/* Status não depende só da cor: um sinal vem junto do texto */
.badge.st-ok::before, .stbadge.good::before { content: '✔\00a0'; }
.badge.st-warn::before { content: '⚠\00a0'; }
.badge.st-bad::before, .stbadge.bad::before { content: '✕\00a0'; }
/* Cabeçalho de tabela que ordena (sorttable.js) */
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { color: var(--accent); }
th.sortable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
th.sortable::after { content: '\00a0↕'; opacity: .35; font-size: 12px; }
th.sortable[aria-sort="ascending"]::after { content: '\00a0↑'; opacity: 1; color: var(--accent); }
th.sortable[aria-sort="descending"]::after { content: '\00a0↓'; opacity: 1; color: var(--accent); }
/* Termo do glossário no texto de apoio */
abbr.gloss { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
abbr.gloss:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
/* Quem pede mais contraste no sistema: texto de apoio e bordas mais fortes */
@media (prefers-contrast: more) {
  :root { --muted: #2b3855; --line: #7385ad; }
  :root[data-theme="dark"] { --muted: #cfd9f0; --line: #5b72ad; }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --muted: #cfd9f0; --line: #5b72ad; }
}
@media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } }
.jsoned[hidden] { display: none; }
/* Rótulo que envolve um campo de texto: o próprio campo já mostra o foco; sem a segunda moldura em volta do rótulo */
label.fld:focus-within, label.field:focus-within { outline: none; }
/* ação sem destaque na auditoria: texto simples (sem a caixinha estreita que quebrava o texto) */
.atag.plain { display: inline; padding: 0; border: 0; background: none; font-weight: 600; font-size: inherit; }

/* Relatório do Desk em PDF (uma página): só o relatório sai na impressão, em claro e compacto */
.print-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
@page { size: A4 landscape; margin: 12mm; }
@media print {
  body.print-report * { visibility: hidden; }
  body.print-report #dk-r-out, body.print-report #dk-r-out * { visibility: visible; color: #111; background: transparent; border-color: #999; box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.print-report #dk-r-out { position: absolute; left: 0; top: 0; width: 100%; font-size: 12px; }
  body.print-report #dk-r-out .row, body.print-report #dk-r-out .subtabs, body.print-report #dk-r-out button { display: none; }
  body.print-report #dk-r-out table { font-size: 12px; }
  body.print-report #dk-r-out th, body.print-report #dk-r-out td { padding: 3px 8px; }
  body.print-report #dk-r-out .kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
}
.print-head[hidden] { display: none; }

/* Biblioteca de scripts */
.sc-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-top: 12px; background: var(--field); }
.sc-card h3 { margin: 0 0 4px; font-size: 16px; }
.sc-card .sc-sum { margin: 6px 0 8px; line-height: 1.5; }
.sc-meta { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; color: var(--muted); font-size: 13px; }
.sc-tag { border: 1px solid var(--line); border-radius: 999px; padding: 1px 9px; font-size: 12px; background: var(--panel); }
.sc-tag.sec { border-color: var(--warn); color: var(--warn); }
.sc-note { margin: 8px 0 0; padding: 6px 10px; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 6px; font-size: 14px; }
.sc-card details { margin-top: 8px; }
.sc-card pre.code { max-height: 340px; }
.sc-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.sc-uses { margin: 6px 0 0; padding-left: 18px; font-size: 13.5px; }
#sc-tags .chip { cursor: pointer; }
#sc-tags .chip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); }
.star { background: none; border: 0; padding: 0 4px; font-size: 20px; line-height: 1; cursor: pointer; color: var(--muted); }
.star[aria-pressed="true"] { color: #f5b942; }
.sc-map { margin: 6px 0 4px 0; font-size: 13px; }
.sc-map ul { margin: 4px 0 0; padding-left: 18px; }
.sc-map .warn-t { color: var(--warn); }
.sc-arrow { color: var(--accent); font-weight: 700; }
.sc-uses > li { margin-bottom: 8px; }
.sc-hist { margin-top: 6px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.sc-hl { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }
.sc-hl li { margin-bottom: 6px; }
.sc-diff { margin-top: 6px; overflow-x: auto; }

.sb-ver { margin: 0 12px 6px; font-size: 12px; color: var(--muted); word-break: break-all; }

/* Biblioteca de componentes do WhatsApp (aba Componentes) */
.cp-box { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-top: 12px; background: var(--field); }
.cp-grid { display: flex; flex-wrap: wrap; gap: 10px 14px; } .cp-grid > .fld { flex: 1 1 220px; }
.cp-cols { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.cp-fields { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.cp-live { flex: 1 1 340px; min-width: 0; }
.cp-live h4 { margin: 12px 0 6px; font-size: 14px; } .cp-live h4:first-child { margin-top: 0; }
.cp-row { align-items: center; margin-bottom: 6px; } .cp-row input { flex: 1; min-width: 0; }
.cp-chat { background: #ece5dd; border-radius: 12px; padding: 14px; }
.cp-bub { background: #fff; color: #1b1f24; border-radius: 10px; max-width: 320px; padding: 8px 10px 0; box-shadow: 0 1px 1px rgba(0,0,0,.12); }
.cp-h { font-weight: 700; margin-bottom: 4px; } .cp-b { white-space: pre-wrap; margin-bottom: 4px; } .cp-f { font-size: 12px; color: #5a6570; margin-bottom: 6px; }
.cp-wb { border-top: 1px solid #e4e7ea; margin: 0 -10px; padding: 9px 10px; text-align: center; color: #067d62; font-weight: 600; }
.cp-bad { margin: 6px 0; padding-left: 18px; } .cp-ok { color: var(--ok); margin: 6px 0; }
.bad-t { color: var(--bad); } .warn-t { color: var(--warn, #b45309); }
.cp-sec { border-left: 3px solid var(--line); padding-left: 10px; margin: 8px 0; }
.cp-row .cp-id { flex: 0 1 150px; font-family: var(--mono); font-size: .9em; }
.cp-lims { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 8px 0; } .cp-lims .fld { flex: 0 1 190px; } .cp-lims small { color: var(--muted); }
.sc-tags2 { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; }
.sc-tag .tagx { background: none; border: 0; padding: 0 2px; cursor: pointer; color: inherit; font-size: 14px; line-height: 1; }
textarea.mono { font-family: var(--mono); font-size: .88em; }
.cp-card { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: flex-start; }
.cp-card-main { flex: 1 1 320px; min-width: 0; } .cp-card-prev { flex: 0 1 300px; min-width: 240px; }
.cp-card-prev .cp-chat { padding: 10px; } .cp-card-prev .cp-b { max-height: 150px; overflow: auto; }
.cp-kind { font-weight: 600; } .cp-st { font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 999px; border: 1px solid currentColor; }
.cp-st.ok { color: var(--ok); } .cp-st.warn { color: #e8b100; } .cp-st.bad { color: #ff6b6b; }
.cp-opts { margin: 8px 0; } .cp-opts summary { cursor: pointer; } .cp-os ul { margin: 2px 0 6px; padding-left: 18px; } .cp-os code { font-size: .85em; opacity: .8; }
.sb-user[role="button"] { cursor: pointer; border-radius: 10px; } .sb-user[role="button"]:hover, .sb-user[role="button"]:focus-visible { background: var(--field); }
.hp-body .hp-flow { padding: 0; margin: 12px 0; } .hp-body .hp-flow .hp-node { margin: 0; line-height: 1.2; }
.hp-body .hp-flow .hp-node + .hp-node::before { margin: 0 8px; }
.hp-body .hp-flow .hp-step { display: inline-flex; align-items: center; min-height: 34px; padding: 4px 14px 4px 38px; margin-left: -30px; }
.hp-body .hp-flow .hp-n { margin-right: 0; width: 26px; height: 26px; margin-left: 5px; }
.cp-box .fld, .cp-fields .fld { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); min-width: 0; }
.cp-box .fld input:not([type=checkbox]), .cp-box .fld textarea, .cp-box .fld select { width: 100%; font-size: 14px; box-sizing: border-box; }
.cp-fields .fld > span { font-weight: 600; }
.cp-kind { font-weight: 700; padding: 1px 9px; border-radius: 6px; font-size: 12.5px; }
.cp-kb-list { background: rgba(61,139,255,.18); color: #7db1ff; } .cp-kb-qr { background: rgba(0,168,132,.18); color: #3ccfae; } .cp-kb-cta { background: rgba(232,177,0,.18); color: #e8b100; }
.cp-kb-loc, .cp-kb-contact, .cp-kb-contact_tpl { background: rgba(160,120,255,.18); color: #b79cff; }
.cp-k-list { border-left: 4px solid #3d8bff; } .cp-k-qr { border-left: 4px solid #00a884; } .cp-k-cta { border-left: 4px solid #e8b100; } .cp-k-loc, .cp-k-contact, .cp-k-contact_tpl { border-left: 4px solid #a078ff; }
button.cp-wb { display: block; width: 100%; background: none; border: 0; border-top: 1px solid #e4e7ea; border-radius: 0; margin: 0 -10px; width: calc(100% + 20px); padding: 9px 10px; text-align: center; color: #067d62; font-weight: 600; cursor: pointer; }
button.cp-wb:hover { background: #f2f6f5; }
.cp-sheet { background: #fff; color: #1b1f24; border-radius: 10px; margin-top: 8px; padding: 8px 10px; box-shadow: 0 1px 3px rgba(0,0,0,.2); max-height: 260px; overflow: auto; }
.cp-sh-t { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; } .cp-x { background: none; border: 0; font-size: 20px; cursor: pointer; color: #5a6570; }
.cp-sh-s { font-size: 12px; font-weight: 700; color: #067d62; margin: 10px 0 2px; text-transform: uppercase; letter-spacing: .02em; }
.cp-sh-r { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid #eef0f2; cursor: pointer; } .cp-sh-r span { display: flex; flex-direction: column; } .cp-sh-r small { color: #5a6570; font-size: 12px; }
button.cp-send { margin-top: 8px; width: 100%; background: #00a884; color: #fff; border: 0; border-radius: 999px; padding: 8px; font-weight: 600; cursor: pointer; }
.cp-out { margin-top: 8px; } .cp-me { margin-left: auto; width: fit-content; max-width: 80%; background: #d9fdd3; color: #1b1f24; border-radius: 10px; padding: 6px 10px; }
.cp-recv { font-size: 12.5px; margin: 6px 0 0; color: #3b4650; } .cp-recv code { background: rgba(0,0,0,.08); padding: 0 4px; border-radius: 4px; }
.cp-try { margin: 6px 0 0; font-size: 12px; }
.cp-kb-list { background: #2f6fe0; color: #fff; } .cp-kb-qr { background: #0a7f69; color: #fff; } .cp-kb-cta { background: #9a6a00; color: #fff; }
.cp-kb-loc, .cp-kb-contact, .cp-kb-contact_tpl { background: #6d48c9; color: #fff; }
.cp-sec .cp-row input[data-rt] { flex: 1.2 1 110px; } .cp-sec .cp-row input[data-rd] { flex: 2 1 160px; } .cp-sec .cp-row .cp-id { flex: 1.3 1 120px; }
.cp-kb-http { background: #0e7490; color: #fff; } .cp-k-http { border-left: 4px solid #0e7490; } .cp-row .cp-hv { flex: 2 1 220px; }

/* v4.4: aviso da versão lida e prévia do tracking (estilo do Builder da Blip) */
.note-ver { margin: 6px 0 10px; padding: 8px 10px; border-left: 3px solid var(--warn, #d9a400); background: color-mix(in srgb, var(--warn, #d9a400) 12%, transparent); border-radius: 4px; font-size: 13px; }
.ev-prev > summary { cursor: pointer; color: var(--accent, #2563eb); font-size: 12px; }
.ev-card { margin-top: 6px; min-width: 220px; max-width: 300px; padding: 10px; border-radius: 8px; background: #1f1f1f; color: #eee; font-size: 12px; }
.ev-card .ev-ct { font-weight: 700; margin-bottom: 8px; }
.ev-card .ev-f { background: #2e2e2e; border-radius: 6px; padding: 5px 8px; margin-bottom: 6px; min-height: 32px; overflow-wrap: anywhere; }
.ev-card .ev-f small { display: block; font-weight: 700; font-size: 12px; color: #ddd; }
.ev-card .ev-kv { display: flex; gap: 6px; }
.ev-card .ev-kv .ev-f { flex: 1; }
.ev-card .ev-cond { margin-top: 4px; font-size: 12px; color: #bbb; }

/* v4.4: bot sem chave (padrão: recurso que precisa de chave fica visível, mas desabilitado, com a explicação na dica) */
.combo-list li.off, .combo ul li.off, .cbx-list li.off { opacity: .5; cursor: not-allowed; }
.badge.nokey { background: color-mix(in srgb, var(--warn, #d9a400) 22%, transparent); color: inherit; border: 1px solid var(--warn, #d9a400); }
button:disabled[data-needkey], .mini:disabled[data-needkey] { cursor: not-allowed; opacity: .5; }

/* v4.4: página de novidades e link da versão no rodapé */
button.sb-ver { display: block; background: none; border: 0; box-shadow: none; padding: 0; text-align: left; font: inherit; font-size: 12px; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
button.sb-ver:hover, button.sb-ver:focus-visible { color: var(--fg, inherit); }
.rel-wrap { max-width: 760px; margin: 0 auto; padding: 24px 16px 48px; }
.rel-card { margin: 14px 0; padding: 14px 16px; border: 1px solid var(--line, #2a2d36); border-radius: 10px; background: var(--panel, transparent); }
.rel-card h2 { margin: 0 0 4px; font-size: 18px; }
.rel-t { font-weight: 400; color: var(--muted); font-size: 15px; }
.rel-g { margin: 12px 0 4px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.rel-card ul { margin: 0 0 4px; padding-left: 20px; }
.rel-card li { margin: 3px 0; }
button.sb-ver.new::after { content: " ●"; color: var(--accent, #1666f0); }
.rel-copy { margin-left: 8px; font-size: 12px; vertical-align: middle; }

/* v4.5: Trackings e textos (abas internas, resumo, busca em destaque, chips, detalhe e comparação lado a lado) */
details.how { margin: 0 0 10px; }
details.how > summary { cursor: pointer; font-size: 13px; color: var(--accent); width: fit-content; }
.ev-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line); margin: 6px 0 14px; }
.ev-tab { background: transparent; border: 0; box-shadow: none; border-radius: 0; padding: 9px 14px; font-weight: 600; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.ev-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.ev-summary { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 10px; }
.ev-sel { padding: 5px 10px; border: 1px solid var(--accent); border-radius: 6px; background: var(--accent-soft); font-size: 13px; margin-right: 4px; }
.ev-ver { margin: 0 0 10px; }
.ev-ver > summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.srch { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; font-size: 13px; font-weight: 600; color: var(--ink); max-width: 560px; }
.srch input { width: 100%; font-size: 14px; font-weight: 400; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--field); color: var(--ink); }
.srch input:focus { border-color: var(--accent); outline: 2px solid var(--accent-soft); }
.ev-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.ev-chip { border: 1px solid var(--line); border-radius: 6px; background: transparent; padding: 4px 10px; font-size: 13px; color: var(--muted); cursor: pointer; }
.ev-chip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); }
.ev-chip small { margin-left: 4px; opacity: .8; }
.ev-tg { background: transparent; border: 0; box-shadow: none; padding: 0; color: var(--accent); cursor: pointer; font-size: 13px; }
tr.ev-det > td { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.ev-det-in { display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; align-items: flex-start; }
.ev-det-txt { flex: 1 1 260px; min-width: 0; }
.ev-det-txt h4 { margin: 0 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.ev-det-txt ul { margin: 0 0 10px; padding-left: 18px; }
.ev-det-card { flex: 0 1 340px; margin-left: auto; }
.ev-card { margin: 0; min-width: 0; max-width: 100%; }
.cmp { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.cmp > div { padding: 10px 12px; border-bottom: 1px solid var(--line); min-width: 0; overflow-wrap: anywhere; }
.cmp > .h { font-weight: 700; background: color-mix(in srgb, var(--accent) 8%, transparent); }
.cmp > .del { background: color-mix(in srgb, var(--bad) 12%, transparent); }
.cmp > .add { background: color-mix(in srgb, var(--ok) 12%, transparent); }
.cmp > .emp { color: var(--muted); font-style: italic; background: repeating-linear-gradient(45deg, transparent, transparent 6px, color-mix(in srgb, var(--muted) 10%, transparent) 6px, color-mix(in srgb, var(--muted) 10%, transparent) 12px); }
.cmp .sub { color: var(--muted); font-size: 12px; margin-top: 2px; }
.cmp del { color: var(--bad); }
.cmp ins { color: var(--ok); text-decoration: none; font-weight: 600; }
@media (max-width: 700px) { .cmp { grid-template-columns: 1fr; } }

/* v4.5 Componentes: grupos, prévia fixa à direita, campos no tema */
.cp-box { background: var(--surface); }
.cp-box .fld input:not([type=checkbox]), .cp-box .fld textarea, .cp-box .fld select, .cp-box .cp-row input { background: var(--field); border: 1px solid var(--line); }
.cp-box .fld input:focus, .cp-box .fld textarea:focus, .cp-box .fld select:focus, .cp-box .cp-row input:focus { border-color: var(--accent); outline: 2px solid var(--accent-soft); }
.cp-fields { flex: 1 1 360px; }
.cp-live { flex: 0 1 380px; position: sticky; top: 12px; align-self: flex-start; max-height: calc(100vh - 24px); overflow: auto; padding: 4px 2px 4px 0; }
@media (max-width: 800px) { .cp-live { position: static; max-height: none; flex-basis: 100%; } }
@keyframes cpflash { from { box-shadow: 0 0 0 3px var(--accent); } to { box-shadow: 0 0 0 0 transparent; } }
.cp-flash { animation: cpflash .9s ease-out; }
.cp-card .row { margin-top: 12px; }
.cp-card .sc-note { margin-bottom: 0; }
.cp-seedbox { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 8px 0; padding: 8px 12px; border: 1px dashed var(--line); border-radius: 10px; }
.cp-seedbox p { margin: 0; flex: 1 1 280px; }

.rel-back { margin-bottom: 4px; }
.rel-card h3 { margin: 0 0 4px; font-size: 18px; }
.rel-card h4.rel-g { margin: 12px 0 4px; }
#rel-list { max-width: 820px; }
.cp-box input:not([type=checkbox]):not([type=radio]):not([type=file]) { font: inherit; font-size: 14px; color: var(--ink); background: var(--field); border: 1px solid var(--line); border-radius: 8px; padding: 8px 11px; min-width: 0; width: 100%; box-sizing: border-box; }
.cp-box .cp-row input { width: auto; }
.cp-box > h3 { margin: 0 0 4px; } .cp-box > .hint { margin: 0 0 12px; }
.cp-box textarea { font: inherit; font-size: 14px; color: var(--ink); }

/* v4.6 gerais */
#toasts .toast { position: static; max-width: none; }
.fld input, .fld textarea, .fld select, label > input, label > textarea, label > select { color: var(--ink); }
button.chg { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); font-weight: 600; }
button.chg:hover:not(:disabled) { background: var(--accent); color: #fff; }
#to-top { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 80; padding: 8px 14px; border-radius: 999px; font-size: 13px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 8px 24px -10px rgba(6, 14, 40, .5); }
#to-top:hover { border-color: var(--accent); color: var(--accent); }
body.has-totop #toasts { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

/* v4.6 Scripts: grupos de filtros, seleção, paginação e janela de ferramentas */
.sc-grp { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 6px 0; }
.sc-grp-t { font-size: 12px; font-weight: 600; color: var(--muted); min-width: 92px; }
.sc-grp .chips { margin: 0; }
.sc-sel { width: 17px; height: 17px; margin-right: 6px; vertical-align: -2px; accent-color: var(--accent); cursor: pointer; }
.sc-tag.v2 { background: var(--accent-soft); color: var(--accent); }
.sc-tag.fn { background: var(--ok-soft); color: var(--ok); }
.sc-selbar { align-items: center; gap: 10px; margin: 8px 0; padding: 8px 12px; border: 1px solid var(--accent); border-radius: 10px; background: var(--accent-soft); }
.sc-selbar .danger { background: transparent; color: var(--bad); border-color: var(--bad); }
.sc-selbar .danger:hover:not(:disabled) { background: var(--bad); color: #fff; }
.sc-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0; }
.sc-pager .sc-per { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); margin-left: auto; }
.sc-tool-body { max-width: 760px; }
.sc-tool-body .fld { margin: 10px 0; }
.sc-tool-code { max-height: 300px; overflow: auto; }
.sc-tool-diff { max-height: 320px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
#sc-tool { width: min(820px, calc(100vw - 32px)); }
.sc-codeed .codeed-body { min-height: 200px; }
/* v4.6 Componentes: contador de caracteres e prévia da requisição no formato do Builder */
.cp-cnt { float: right; font-weight: 400; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cp-cnt.near { color: var(--warn); font-weight: 600; }
.cp-cnt.over { color: var(--bad); font-weight: 700; }
.fld > span { display: block; }
.cp-req { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 12px 14px; font-size: 13px; }
.cp-req-t { font-weight: 700; margin-bottom: 2px; }
.cp-req-d { margin: 2px 0 8px; color: var(--muted); font-size: 12px; }
.cp-rs { margin: 12px 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border-top: 1px solid var(--line); padding-top: 10px; }
.cp-rf { margin: 6px 0; }
.cp-rf > span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.cp-rv { background: var(--field); border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; font-family: var(--mono); font-size: 12px; overflow-wrap: anywhere; }
.cp-rh { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cp-req-b { margin: 0; max-height: 160px; overflow: auto; }

/* v4.6 Novidades: versão atual aberta, antigas recolhidas, etiqueta de área */
details.rel-fold > summary { cursor: pointer; list-style: none; }
details.rel-fold > summary::-webkit-details-marker { display: none; }
details.rel-fold > summary h3 { display: inline; }
details.rel-fold > summary::before { content: "▸"; margin-right: 8px; color: var(--muted); }
details.rel-fold[open] > summary::before { content: "▾"; }
details.rel-fold > summary:hover h3 { color: var(--accent); }
.rel-a { display: inline-block; font-size: 12px; font-weight: 700; padding: 0 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
h4.rel-g.rel-n { color: var(--ok); } h4.rel-g.rel-m { color: var(--accent); } h4.rel-g.rel-c { color: var(--warn); }

/* v4.7: campos dentro do modal de ferramentas de script (mesmo visual dos campos das telas) */
#sc-tool .fld { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; max-width: 420px; }
#sc-tool .fld > span { font-size: 13px; font-weight: 600; color: var(--ink); }
#sc-tool .fld input { width: 100%; font-size: 14px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--field); color: var(--ink); }
#sc-tool .fld input:focus { border-color: var(--accent); outline: 2px solid var(--accent-soft); }
/* v4.7: a Ajuda agrupada em seções recolhíveis */
.hp-fold { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); margin: 10px 0; }
.hp-fold > summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; padding: 12px 14px; font-size: 15px; font-weight: 700; color: var(--ink); }
.hp-fold > summary::-webkit-details-marker { display: none; }
.hp-fold > summary::before { content: '▸'; color: var(--muted); transition: transform .15s; }
.hp-fold[open] > summary::before { transform: rotate(90deg); }
.hp-fold > summary .hp-gcount { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.hp-fold > .hp-fold-body { padding: 0 12px 12px; }
.hp-fold-one .hp-tag { display: none; }  /* dentro da seção do grupo, a etiqueta repetiria o título */
/* v4.7: botão escondido de escolher arquivo fica cinza quando desabilitado */
.filebtn:has(input:disabled) { opacity: .55; pointer-events: none; }
/* v4.7: linha do rótulo "Senha" com o link "Esqueci a senha" ao lado (login) */
.lblrow { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.lblrow a { font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; }
.lblrow a:hover { text-decoration: underline; }

/* v4.7: mensagem junto do campo (cadastro e convite): fica logo abaixo da caixa de digitação */
.fmsg { display: block; margin-top: 6px; font-size: 13px; line-height: 1.35; }
.fmsg:empty { display: none; }
.fmsg.err { color: var(--bad); } .fmsg.ok { color: var(--ok); } .fmsg.info { color: var(--muted); }
input.fbad, select.fbad, textarea.fbad { border-color: var(--bad) !important; }
input.fgood { border-color: var(--ok) !important; }

/* v4.8: caixas de informação e links de apoio nas telas de entrada */
.infobox { margin: 16px 0 0; padding: 12px 14px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 10px; background: var(--surface); color: var(--ink); font-size: 13.5px; line-height: 1.5; }
.infobox[hidden] { display: none; }
.infobox.ok { border-left-color: var(--ok); }
.infobox b { display: block; margin-bottom: 4px; font-size: 13.5px; }
.infobox p, .infobox ul { margin: 0; color: var(--muted); }
.infobox ul { padding-left: 18px; }
.infobox li + li { margin-top: 3px; }
.infobox code { font: 12.5px var(--mono); padding: 1px 5px; border-radius: 5px; background: var(--field); color: var(--ink); }
.infobox a { color: var(--accent); font-weight: 600; }
.altlinks { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--muted); }
.altlinks a { color: var(--accent); font-weight: 600; text-decoration: none; }
.altlinks a:hover { text-decoration: underline; }

/* Administração: gráfico configurável e gráficos fixados */
:root { --ac-c3: #c084fc; --ac-c4: #94a3b8; --ac-c5: #f472b6; }
.ac-k3 { background: var(--ac-c3); } .ac-k4 { background: var(--ac-c4); } .ac-k5 { background: var(--ac-c5); }
.ac-cfg { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 14px; margin: 6px 0 10px; }
.ac-picks { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; flex: 1 1 320px; }
.ac-pick { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.ac-pick i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.ac-pick.off { opacity: .45; cursor: not-allowed; }
.ac-fld { min-width: 150px; }
.ac-pins .kpi { min-width: 220px; }
.ac-pin-body { display: block; margin: 4px 0; }
.ac-pin-body .ac-svg { margin-top: 2px; }

/* Desk > Filas em massa */
.fq-steps { margin: 6px 0 8px 18px; padding: 0; display: grid; gap: 6px; }
#fq-rows td { vertical-align: top; }
#fq-rows th { white-space: nowrap; }
#fq-rows td > input[type=text] { width: 100%; min-width: 130px; height: 38px; box-sizing: border-box; }
#fq-rows td > .mini { height: 38px; }
.fq-ag { min-width: 220px; }
.fq-agbox { position: relative; }
.fq-agbtn { width: 100%; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--field); color: var(--text); font-size: 14px; cursor: pointer; }
.fq-agbtn[aria-expanded="true"] { border-color: var(--accent); }
.fq-agpop { position: absolute; z-index: 30; left: 0; right: 0; top: 42px; min-width: 280px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: 0 10px 30px rgba(0,0,0,.35); display: grid; gap: 8px; }
.fq-agsearch { width: 100%; box-sizing: border-box; height: 34px; }
.fq-aglist { max-height: 220px; overflow: auto; display: grid; gap: 2px; }
.fq-aglist label[hidden] { display: none; }
.fq-agfoot { display: flex; gap: 6px; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 8px; }
.fq-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.fq-chips:empty { display: none; }
.fq-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 12.5px; }
.fq-chip button { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 14px; line-height: 1; padding: 0 3px; }
.fq-aglist label { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.fq-aglist small { color: var(--muted); }
#fq-confirm-text b { display: inline; }

  .qmark { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: 4px; border-radius: 50%; border: 1px solid var(--muted); color: var(--muted); font-size: 12px; font-weight: 700; cursor: help; vertical-align: middle; }
  .qmark:hover, .qmark:focus-visible { color: var(--accent); border-color: var(--accent); }

  .rel-mod { margin: 16px 0 2px; padding-top: 10px; border-top: 1px solid var(--line, #2a2d36); font-size: 14px; font-weight: 700; color: var(--text); }
  .rel-card h4.rel-mod:first-of-type { border-top: 0; padding-top: 0; }
  .rel-card h5.rel-g { margin: 6px 0 2px; font-size: 12px; }
  h5.rel-g.rel-n { color: var(--ok); } h5.rel-g.rel-m { color: var(--accent); } h5.rel-g.rel-c { color: var(--warn); }

.fq-models { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; margin: 6px 0 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.fq-models .fld { min-width: 220px; }
.fq-rule { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }

.sc-sumtag { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 700; }
#sc-e-sum { width: 100%; box-sizing: border-box; }

.fq-live { margin: 10px 0; padding: 10px 12px; border: 1px dashed var(--border); border-radius: 8px; background: var(--card-alt, transparent); }
.fq-live h4 { margin: 0 0 8px; font-size: 13px; }
.fq-live-q { padding: 6px 0; border-top: 1px solid var(--border); }
.fq-live-q:first-of-type { border-top: 0; }
.fq-live-n { color: var(--muted); font-size: 12px; margin-left: 6px; }
.fq-live-r { font-size: 12px; color: var(--muted); margin: 2px 0 4px; }
.fq-live-a { display: flex; flex-wrap: wrap; gap: 4px; }
.tag { display: inline-block; padding: 1px 8px; border-radius: 10px; background: #e6efff; color: #1a56d6; font-size: 12px; margin: 0 2px 2px 0; }
button.tag { border: 0; cursor: pointer; } button.tag[aria-pressed="true"] { background: #1a56d6; color: #fff; }
.lib-filter { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 6px 0; }

.bl-card { background: var(--card, #fff); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin: 8px 0; }
.bl-h { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 6px; }
.bl-on { background: #d9f5e5; color: #11703a; border-radius: 10px; padding: 1px 8px; font-size: 12px; }
.bl-sec { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 8px 0 4px; }
.bl-rule { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; }
.bl-k { color: var(--muted); } .bl-f { border: 1px solid var(--border); border-radius: 6px; padding: 3px 9px; background: var(--card-alt, #f7f8fb); } .bl-v { font-weight: 600; }
.bl-ags { display: flex; flex-wrap: wrap; gap: 8px 16px; } .bl-ag { display: flex; gap: 8px; align-items: center; font-size: 13px; } .bl-ag small { color: var(--muted); }
.bl-av { width: 26px; height: 26px; border-radius: 50%; background: #dbe6ff; color: #1a56d6; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; }
.bl-none { color: var(--muted); font-size: 12px; }

/* Prévia de Flows (estilo Meta) */
.fp-wrap { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.fp-phone { width: 300px; height: 560px; border-radius: 26px; border: 1px solid #d5d9e0; background: #fff; box-shadow: 0 2px 14px rgba(0,0,0,.18); display: flex; flex-direction: column; overflow: hidden; color: #111; font-family: -apple-system, 'Segoe UI', Roboto, sans-serif; flex: none; }
.fp-top { display: flex; align-items: center; gap: 10px; padding: 12px 12px; font-size: 14px; border-bottom: 1px solid #eceff3; }
.fp-top b { flex: 1; font-weight: 500; text-align: center; }
.fp-x { border: 0; background: transparent; font-size: 16px; cursor: pointer; width: 24px; padding: 0; color: #111; }
.fp-dots { width: 24px; height: 16px; background: radial-gradient(circle, #111 1.6px, transparent 2px) center / 100% 33% repeat-y; }
.fp-body { flex: 1; overflow-y: auto; padding: 14px 14px 8px; font-size: 14px; }
.fp-h { margin: 8px 0 12px; font-size: 18px; font-weight: 600; } .fp-sh { margin: 8px 0; font-size: 15px; font-weight: 600; } .fp-b { margin: 8px 0; line-height: 1.4; } .fp-cap { margin: 6px 0; font-size: 12px; color: #667; }
.fp-ol { position: relative; display: block; width: 100%; border: 1px solid #8a94a3; border-radius: 10px; margin: 14px 0 6px; padding: 12px; background: #fff; text-align: left; font: inherit; color: #111; box-sizing: border-box; cursor: text; }
.fp-fl { position: absolute; top: -8px; left: 10px; background: #fff; padding: 0 4px; font-size: 11px; color: #556; }
.fp-inp { border: 0; outline: 0; width: 100%; font: inherit; background: transparent; color: #111; resize: none; padding: 0; }
.fp-ol:focus-within { border-color: #1faa59; box-shadow: 0 0 0 1px #1faa59; }
.fp-dd { cursor: pointer; display: flex; justify-content: space-between; align-items: center; } .fp-dd:not(.has) .fp-val { color: #556; } .fp-dd::after { content: ''; border: 4px solid transparent; border-left-color: #556; margin-left: 8px; }
.fp-hp { font-size: 11px; color: #667; margin: 2px 4px; }
.fp-grp { margin: 10px 0; } .fp-gl { font-size: 13px; color: #334; margin-bottom: 4px; }
.fp-row { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 10px; border: 0; background: transparent; padding: 11px 2px; font: inherit; text-align: left; cursor: pointer; color: #111; border-bottom: 1px solid #f0f2f5; }
.fp-row small { display: block; color: #667; font-size: 11px; }
.fp-rd, .fp-cb { flex: none; width: 18px; height: 18px; border: 2px solid #6b7280; box-sizing: border-box; } .fp-rd { border-radius: 50%; } .fp-cb { border-radius: 4px; }
.fp-rd.on { border: 5px solid #1faa59; } .fp-cb.on { background: #1faa59; border-color: #1faa59; }
.fp-chips { display: flex; flex-wrap: wrap; gap: 6px; } .fp-chips button { border: 1px solid #8a94a3; background: #fff; border-radius: 16px; padding: 5px 12px; font: inherit; font-size: 13px; cursor: pointer; } .fp-chips button.on { background: #d9f5e5; border-color: #1faa59; }
.fp-listv { padding: 6px 0; } .fp-li { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 13px 16px; font: inherit; cursor: pointer; color: #111; } .fp-li:hover, .fp-li.on { background: #eef7f1; }
.fp-foot { padding: 8px 14px 10px; text-align: center; border-top: 1px solid #f3f4f6; }
.fp-btn { width: 100%; border: 0; border-radius: 22px; background: #1faa59; color: #fff; padding: 11px; font: inherit; font-weight: 600; cursor: pointer; } .fp-btn:disabled { background: #eceff1; color: #aab; cursor: not-allowed; }
.fp-mg { font-size: 11px; color: #667; margin-top: 8px; } .fp-mg u { color: #1a7f45; text-decoration: none; }
.fp-unk { background: #eee; border: 1px dashed #999; color: #555; padding: 8px; margin: 6px 0; border-radius: 6px; font-size: 12px; }
.fp-link { color: #1a56d6; text-decoration: underline; } .fp-img { background: #e4e7ec; padding: 26px; text-align: center; border-radius: 8px; color: #667; margin: 8px 0; }
.fp-pre { background: #f4f6f8; padding: 8px; border-radius: 6px; font-size: 11px; overflow: auto; white-space: pre-wrap; }
.fp-chat { flex: 1; background: #efeae2; padding: 70px 12px 12px; display: flex; flex-direction: column; gap: 10px; }
.fp-bub { background: #fff; border-radius: 8px; padding: 8px; } .fp-out { align-self: flex-end; width: 60%; height: 28px; background: #d9fdd3; } .fp-in { width: 64%; } .fp-in i { display: block; height: 7px; background: #d0d3d6; border-radius: 4px; margin: 4px 0; } .fp-in hr { border: 0; border-top: 1px solid #e2e5e8; margin: 8px 0 4px; }
.fp-in button { border: 0; background: transparent; color: #1a73e8; width: 100%; font: inherit; font-size: 13px; cursor: pointer; padding: 4px; }
.fp-side { flex: 1; min-width: 220px; } .fp-jump { font-size: 12px; margin-left: 8px; } .fp-jump select { margin-left: 4px; }
.fp-rd, .fp-cb { margin-left: 8px; }
.fl-edwrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.fl-edwrap.pv-on { grid-template-columns: minmax(0, 1fr) 330px; }
@media (max-width: 1100px) { .fl-edwrap.pv-on { grid-template-columns: minmax(0, 1fr); } }
.fl-livepv { margin-top: 10px; } .fl-livepv .fp-phone { width: 300px; height: 520px; } .fl-livepv .fp-side { min-width: 0; }
.fl-livepv-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .fl-livepv-bar b { margin-right: auto; }
.fl-edwrap:not(.pv-on) .fl-livepv-box, .fl-edwrap:not(.pv-on) .fl-livepv-hint { display: none; }
#fl-lib-table td.actions { white-space: normal; } #fl-lib-table td.actions .mini { margin: 2px 2px 2px 0; }
.fp-dx { margin-top: 8px; padding: 8px 10px; border: 1px dashed var(--line, #c9d3e6); border-radius: 8px; } .fp-dx .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .fp-dx .fp-jump { margin-left: 0; }

.fp-phone button.fp-row, .fp-phone button.fp-row:hover:not(:disabled), .fp-phone button.fp-row:focus, .fp-phone button.fp-row:active { background: transparent; color: #111; border-color: transparent; border-bottom: 1px solid #f0f2f5; transform: none; }
.fp-phone button.fp-li:hover:not(:disabled), .fp-phone button.fp-li:focus { background: #eef7f1; color: #111; border-color: transparent; }
.fp-phone button.fp-x, .fp-phone button.fp-x:hover:not(:disabled), .fp-phone button.fp-x:focus { background: transparent; color: #111; border-color: transparent; }
.fp-phone button.fp-dd, .fp-phone button.fp-dd:hover:not(:disabled), .fp-phone button.fp-dd:focus { background: #fff; color: #111; }
.fp-phone .fp-chips button:hover:not(:disabled) { background: #f3f5f8; color: #111; border-color: #8a94a3; } .fp-phone .fp-chips button.on, .fp-phone .fp-chips button.on:hover:not(:disabled) { background: #d9f5e5; }
.fp-phone, .fp-phone * { color-scheme: light; }
.fp-phone input.fp-inp, .fp-phone textarea.fp-inp, .fp-phone input.fp-inp:focus, .fp-phone textarea.fp-inp:focus { background: #fff; color: #111; border-color: transparent; box-shadow: none; outline: none; }
.fp-phone button.fp-btn:not(:disabled), .fp-phone button.fp-btn:hover:not(:disabled) { background: #1faa59; color: #fff; border-color: transparent; }
.fp-phone button.fp-row, .fp-phone button.fp-x, .fp-phone button.fp-dd, .fp-phone button.fp-li { box-shadow: none; }
.fp-got { margin-top: 8px; } .fp-got .fp-pre { max-height: 160px; }

.fl-typos { margin: 4px 0; } .ty-item { position: relative; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; padding: 3px 0; }
.ty-balloon { position: absolute; z-index: 30; top: 100%; left: 0; max-width: min(520px, 92vw); background: var(--surface, #fff); color: var(--ink, #111); border: 1px solid var(--line, #c9d3e6); border-radius: 10px; padding: 10px 12px; box-shadow: 0 8px 24px rgba(0,0,0,.28); }
.ty-diff { margin: 6px 0 8px; display: grid; gap: 4px; } .ty-diff code { font-size: 12px; word-break: break-all; } .ty-m, .ty-p { font-size: 12px; font-weight: 700; margin-right: 4px; } .ty-m { color: var(--bad, #c0392b); } .ty-p { color: #1a8f4c; }
.fp-pre, .fp-got .fp-pre { color: #1b2430; background: #f4f6f8; }
.lib-filter { max-height: 96px; overflow-y: auto; }

/* Prévia oficial (Meta) */
.warn-box { background: rgba(224, 184, 74, .16); border: 1px solid #e0b84a; color: var(--text); border-radius: 8px; padding: 8px 10px; font-size: 13px; margin: 8px 0; }
.fl-meta-grid { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.fl-meta-frame { border: 1px solid var(--line); border-radius: 12px; background: #fff; max-width: 100%; }

/* v4.24: padronização de controles e agrupamento de ações */
button.mini { min-height: var(--h-sm); }
.fl-actions { align-items: center; gap: 8px 20px; }
.fl-grp { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fl-grp-view { padding-left: 20px; border-left: 1px solid var(--line); }
.fl-grp-danger { margin-left: auto; padding-left: 20px; border-left: 1px solid var(--line); }
.fl-grp-main:only-child, .fl-grp-view:first-child, .fl-grp-danger:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 720px) { .fl-grp-view, .fl-grp-danger { border-left: 0; padding-left: 0; margin-left: 0; } .fl-grp { width: 100%; } }
#fl-d-meta { display: flex; flex-wrap: wrap; gap: 6px; }
#fl-label, #fl-key { min-width: 200px; }
.badge.info, .audit .badge:not(.warn):not(.bad):not(.prd):not(.hmg) { background: var(--accent-soft); color: var(--accent); }
.row > .secret.grow { min-width: 200px; flex: 1 1 200px; }
.row > input.grow { min-width: 200px; flex: 1 1 200px; }
.fl-meta-frame { width: 560px; height: 1000px; max-width: 100%; }
@media (max-height: 900px) { .fl-meta-frame { height: 860px; } }
.cp-card.cp-collapsed .cp-card-prev { display: none; }
.cp-card.cp-collapsed .cp-card-main { flex-basis: 100%; }
.cp-togall { justify-content: flex-end; margin-bottom: 6px; }

.codeed pre.viewcode { flex: 1; min-width: 0; margin: 0; padding: 10px; font: 12.5px/1.5 var(--mono); white-space: pre; overflow: auto; background: var(--field); color: var(--ink); }
.codeed pre.viewcode:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
#fl-view .codeed-body { height: 460px; }

.fl-grp-view { padding-left: 0; border-left: 0; }
.fl-actions { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; }
.fl-grp-main { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; position: relative; }
.fl-grp-danger { margin-left: auto; padding-left: 0; border-left: 0; display: flex; gap: 8px; }
.fl-more { position: relative; }
.fl-more > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; min-height: var(--h-ctl); padding: 0 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); font-weight: 500; }
.fl-more > summary::-webkit-details-marker { display: none; }
.fl-more > summary::after { content: '▾'; margin-left: 8px; font-size: 12px; }
.fl-more[open] > summary::after { content: '▴'; }
.fl-more > summary:hover { border-color: var(--accent); }
.fl-menu { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; min-width: 280px; display: flex; flex-direction: column; gap: 4px; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
.fl-menu button { justify-content: flex-start; text-align: left; width: 100%; box-shadow: none; }
@media (max-width: 720px) { .fl-grp-danger { margin-left: 0; } .fl-menu { min-width: 0; width: calc(100vw - 56px); } }
.fq-card { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 12px 14px; margin-bottom: 12px; background: var(--surface); }
.fq-card h4 { margin: 0 0 10px; font-size: 14px; }
.fq-teams { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.fa-form { margin-bottom: 8px; }

.fa-step { display: flex; align-items: center; gap: 8px; margin: 14px 0 6px; }
.fa-n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 700; }
.fa-tip { margin: -4px 0 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

#fa-rows tr.fa-exists td { opacity: .75; }

/* Administração > Saúde */
#health-body { max-width: 640px; }
.hl-card { margin: 0; padding: 14px 16px; }
.hl-card h3 { margin: 0 0 8px; font-size: 15px; }
.hl-table { width: 100%; }
.hl-table th { width: 42%; text-align: left; font-weight: 600; color: var(--muted); vertical-align: top; }
.hl-table td { word-break: break-word; }
.hl-warn { margin: 0 0 14px; padding: 10px 14px; border-radius: var(--radius-lg); background: var(--warn-soft); color: var(--text); border: 1px solid var(--warn); }
.hl-warn ul { margin: 6px 0 0; padding-left: 20px; }
.hl-good { margin: 0 0 14px; }

/* Cadastros > Importar do portal */
#pi-panel[hidden] { display: none; }
.pi-host { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); background: var(--field); overflow: hidden; }
.pi-host input { border: 0; background: transparent; width: 280px; box-shadow: none; }
.pi-dom { padding: 0 12px 0 0; color: var(--muted); }
.pi-warn { padding: 10px 14px; margin: 0 0 12px; border-radius: var(--radius); background: var(--warn-soft); border: 1px solid var(--warn); }
.pi-how { margin: 0 0 14px; padding-left: 22px; display: grid; gap: 6px; }
.pi-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.pi-lbl { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.pi-read { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--radius); background: var(--ok-soft); color: var(--text); }
#pi-run { margin-top: 12px; }
#pi-prog { width: 100%; height: 8px; accent-color: var(--accent); }
.step.done { background: var(--ok-soft); color: var(--ok); }
#pi-p1.off, #pi-p2.off, #pi-p3.off { opacity: .6; }

/* Em andamento: botão com rodinha e barra fina no topo quando uma consulta demora */
button.is-busy { pointer-events: none; opacity: .85; }
button.is-busy::before { content: ""; display: inline-block; width: 13px; height: 13px; margin: 0 8px -2px 0; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
.netbar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 2000; overflow: hidden; pointer-events: none; background: var(--accent-soft); }
.netbar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 35%; background: var(--accent); animation: netbar 1.1s ease-in-out infinite; }
@keyframes netbar { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
@media (prefers-reduced-motion: reduce) { button.is-busy::before { animation: none; } .netbar::after { animation: none; width: 100%; opacity: .6; } }

/* v4.33: campo válido ganha só um ✓ verde e a borda na cor de "ok", sem brilho */
input.is-valid, .pi-host:has(input.is-valid) { border-color: var(--ok); }
.pi-host:has(input.is-valid) .pi-dom::after { content: ' ✓'; color: var(--ok); font-weight: 700; }
@media (max-width: 1280px) { #users-table td, #users-table th { padding-left: 4px; padding-right: 4px; } #users-table { font-size: 13px; } #users-table th.lastseen-h { min-width: 76px; } #users-table td { white-space: normal; } #users-table td.actions button.mini { font-size: 12px; padding: 3px 6px; } }


/* v4.34: "testada há X" ao lado do resultado do teste da chave: verde = recente, cinza = antigo */
.tested-at { font-size: 12px; white-space: nowrap; }
.tested-at.fresh { color: var(--ok); }
.tested-at.old { color: var(--muted); }

/* v4.34: barra de uso do banco na Saúde */
.hl-bar { width: 100%; max-width: 320px; height: 8px; margin-top: 6px; accent-color: var(--ok); }
.hl-bar.warn { accent-color: var(--warn, #e0a100); }
.hl-note { margin: 10px 14px 4px; }

/* v4.34: botão grande no estado vazio */
.ill-empty .ill-act { margin-top: 8px; min-height: 42px; padding: 0 22px; font-size: 15px; }

/* Cartão que explica um recurso do plano Pro no lugar do conteúdo (tom neutro, não é erro) */
.pro-locked-panel > :not(.pro-card) { display: none !important; }
.pro-card { border: 1px solid var(--line); background: var(--field); border-radius: 12px; padding: 18px 20px; max-width: 560px; }
.pro-card h3 { margin: 8px 0 6px; font-size: 17px; }
.pro-card p { margin: 0 0 8px; }
.pro-card .pro-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 6px; }
.pro-card .pro-link { color: var(--accent); font-weight: 600; text-decoration: none; }
.pro-card .pro-link:hover { text-decoration: underline; }
/* Etiqueta PRO nos recursos do plano Pro que a conta não tem */
.pro-tag { margin-left: 6px; padding: 0 6px; border-radius: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; background: var(--accent-soft); color: var(--accent); vertical-align: middle; }
.pro-locked { opacity: .8; }

/* v4.37: tabelas de bots e de usuários cabem sem rolagem horizontal (o plano da pessoa fica na coluna Perfil) */
#bots-table th:nth-child(6) { white-space: normal; }
#users-table th.sortable { white-space: normal; }
#users-table td.actions button.mini { font-size: 11.5px; padding: 2px 5px; }
@media (max-width: 1320px) { #users-table td, #users-table th { padding-left: 3px; padding-right: 3px; } }
#users-table td > .badge + .hint, #users-table td > .badge + .badge { margin-left: 0; }

/* Suporte: cartão de confirmação depois de enviar (visto desenhado, e-mail da resposta, protocolo e barra de tempo) */
.supp-done { text-align: center; padding: 6px 4px 2px; }
.supp-done h3 { margin: 6px 0 8px; font-size: 18px; }
.supp-done p { margin: 0 0 6px; overflow-wrap: anywhere; }
.supp-check { width: 64px; height: 64px; display: block; margin: 4px auto 6px; }
.supp-check .c { fill: var(--ok-soft); stroke: var(--ok); stroke-width: 2.5; stroke-dasharray: 151; stroke-dashoffset: 151; animation: supp-draw .55s ease-out forwards; }
.supp-check .t { fill: none; stroke: var(--ok); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: supp-draw .4s .45s ease-out forwards; }
@keyframes supp-draw { to { stroke-dashoffset: 0; } }
.supp-timer { position: relative; height: 3px; margin: 14px auto; border-radius: 3px; background: var(--ok-soft); overflow: hidden; }
.supp-timer::after { content: ''; position: absolute; inset: 0; background: var(--ok); transform-origin: left; animation: supp-wait 6s linear forwards; }
@keyframes supp-wait { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .supp-check .c, .supp-check .t { stroke-dashoffset: 0; } }

/* Aba selecionada continua azul com texto branco quando o mouse passa por cima (o hover geral clareava o fundo e deixava o texto ilegível) */
.tab[aria-selected=true]:hover:not(:disabled), .tab.on:hover:not(:disabled) { background: var(--accent); color: var(--accent-ink, #fff); border-color: var(--accent); }

/* v4.44: página de pagamento do plano Pro (Pix) */
.pay-box { display: flex; gap: 12px; flex-wrap: wrap; margin: 14px 0; }
.pay-price { flex: 1 1 150px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--field); }
.pay-price .pay-lbl { display: block; font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.pay-price b { font-size: 24px; color: var(--ink); }
.pay-list { margin: 0 0 14px; padding-left: 20px; line-height: 1.7; }
.pay-pix { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-start; margin: 10px 0 14px; }
.pay-qrbox { padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; flex: none; }
.pay-qrbox img { display: block; width: 200px; height: 200px; max-width: 100%; height: auto; }
.pay-code { flex: 1 1 260px; min-width: 0; }
.pay-code p { margin: 0 0 8px; }
.pay-code textarea { width: 100%; font-family: var(--mono, ui-monospace, Consolas, monospace); font-size: 12px; word-break: break-all; resize: vertical; }
.mini-link { font-size: 13px; margin-left: 12px; align-self: center; }
.pay-done { text-align: center; padding: 18px 8px; }
.pay-done .supp-check { margin: 0 auto 8px; }
@media (max-width: 640px) { .pay-pix { flex-direction: column; align-items: stretch; } .pay-qrbox { align-self: center; } }

/* v4.44: convite ao plano Pro em Minha conta (botão de tamanho normal e link com contorno) */
.plan-up { margin-top: 12px; }
.plan-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.plan-link { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: transparent; font-weight: 600; font-size: 14px; text-decoration: none; }
.plan-link:hover { border-color: var(--accent); color: var(--accent); }

/* v4.45: o selo do tipo do bot ("Atendimento humano") fica como uma peça só, mesmo quando o texto passa para a linha de baixo */
td .badge.ath, td .badge.router, td .badge.bot { display: inline-block; max-width: 100%; line-height: 1.3; padding-top: 2px; padding-bottom: 2px; text-align: center; }

/* v4.45: caixa de transferência de dados (conta inteira) organizada em frase curta, selos e lista */
.tr-intro p { margin: 0 0 8px; }
.tr-intro .pi-chips { margin: 0 0 10px; }
.tr-notes { margin: 6px 0 12px; padding-left: 20px; line-height: 1.6; font-size: 13.5px; color: var(--muted); }
.login-box a.brand-home { display: block; width: 40px; margin: 0 0 14px; border-radius: 11px; }
.login-box a.brand-home .mark { margin: 0; }
.login-box a.brand-home:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.legal-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin: 14px 0 0; font-size: 12.5px; }
.legal-foot a { color: var(--muted); text-decoration: none; padding: 4px 0; }
.legal-foot a:hover, .legal-foot a:focus-visible { color: var(--accent); text-decoration: underline; }
/* v4.47: avisos de plano (acima do limite em Minha conta; biblioteca somente leitura) */
#plan-over, .pro-ro { margin: 14px 0; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--line)); border-left: 4px solid var(--warn); border-radius: 8px; background: var(--warn-soft); color: var(--ink); font-size: 13.5px; line-height: 1.55; }
.pro-ro { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.pro-ro .mini { margin-left: auto; }
#plan-over[hidden] { display: none; }
.cbx .pxu-list { max-height: 340px; }
.cbx .pxu-list li.pxu-it { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; }
.pxu-l1 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.pxu-l1 .badge { margin-left: auto; }
.pxu-dn { color: var(--muted); font-size: 13px; }
.pxu-l2 { color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }
.pxu-l2.warn { color: var(--warn); }
@media (max-width: 640px) {
  .row:has(> #pix-picker) { flex-wrap: wrap; }
  #pix-picker { flex: 1 1 100%; width: 100%; }
  .row:has(> #pix-picker) > #pix-gen { flex: 1 1 100%; }
}
.pi-risks { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 8px; font-size: 14px; line-height: 1.55; }
.pi-agree { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; font-weight: 600; }
.pi-agree input { margin-top: 3px; flex: none; }
#pi-panel.pi-consent > section:not(#pi-p0), #pi-panel.pi-consent > .log { display: none; }
.pi-bang { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-right: 8px; border-radius: 8px; background: var(--warn-soft); color: var(--warn); font-weight: 700; vertical-align: middle; }
/* v4.49: Relatórios (gráficos em SVG, nos dois temas) */
:root { --ch4: #7c5cff; --ch5: #0e8fa1; --ch6: #c2417f; --ch7: #6b7a90; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ch4: #a58bff; --ch5: #3cc4d6; --ch6: #f07ab1; --ch7: #9aa8c0; } }
:root[data-theme="dark"] { --ch4: #a58bff; --ch5: #3cc4d6; --ch6: #f07ab1; --ch7: #9aa8c0; }
.ch-f0 { fill: var(--accent); background: var(--accent); } .ch-f1 { fill: var(--ok); background: var(--ok); } .ch-f2 { fill: var(--warn); background: var(--warn); } .ch-f3 { fill: var(--bad); background: var(--bad); }
.ch-f4 { fill: var(--ch4); background: var(--ch4); } .ch-f5 { fill: var(--ch5); background: var(--ch5); } .ch-f6 { fill: var(--ch6); background: var(--ch6); } .ch-f7 { fill: var(--ch7); background: var(--ch7); }
.ch-s0 { stroke: var(--accent); background: var(--accent); } .ch-s1 { stroke: var(--ok); background: var(--ok); } .ch-s2 { stroke: var(--warn); background: var(--warn); } .ch-s3 { stroke: var(--bad); background: var(--bad); }
svg.ch { width: 100%; height: auto; display: block; overflow: visible; }
.ch-t { fill: var(--muted); font-size: 11.5px; } .ch-tl { fill: var(--ink); } .ch-tv { fill: var(--ink); font-weight: 600; }
.ch-grid { stroke: var(--line); stroke-width: 1; }
.ch-ln { fill: none; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.ch-pt.ch-s0 { fill: var(--accent); stroke: var(--surface); stroke-width: 1.5; } .ch-pt.ch-s3 { fill: var(--bad); stroke: var(--surface); stroke-width: 1.5; }
.ch-h0 { fill: var(--field); stroke: var(--line); stroke-width: 1; } .ch-h1 { fill: color-mix(in srgb, var(--accent) 20%, var(--surface)); } .ch-h2 { fill: color-mix(in srgb, var(--accent) 38%, var(--surface)); } .ch-h3 { fill: color-mix(in srgb, var(--accent) 58%, var(--surface)); } .ch-h4 { fill: color-mix(in srgb, var(--accent) 78%, var(--surface)); } .ch-h5 { fill: var(--accent); }
.ch-donut { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.ch-pie { width: 160px; max-width: 160px; flex: none; } .ch-c1 { fill: var(--ink); font-size: 22px; font-weight: 700; }
.ch-leg { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; flex: 1; min-width: 170px; font-size: 13.5px; }
.ch-leg li { display: flex; align-items: center; gap: 8px; } .ch-ll { flex: 1; overflow-wrap: anywhere; } .ch-pc { color: var(--muted); min-width: 38px; text-align: right; }
.ch-sw { width: 12px; height: 12px; border-radius: 3px; flex: none; display: inline-block; }
.ch-leg-row { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 6px; }
.ch-empty { color: var(--muted); font-size: 13.5px; margin: 6px 0; }
.ch-data { margin-top: 8px; } .ch-data summary { cursor: pointer; font-size: 13px; color: var(--accent); }
.rep-ctl { align-items: center; gap: 8px; flex-wrap: wrap; }
.rep-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 12px; }
.rep-kpi { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.rep-kl { font-size: 12.5px; color: var(--muted); font-weight: 600; } .rep-kv { font-size: 24px; letter-spacing: -.02em; } .rep-ks { font-size: 12.5px; color: var(--muted); }
.rep-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rep-card { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); } .rep-card.wide { grid-column: 1 / -1; } .rep-card h3 { margin: 0 0 10px; font-size: 15px; }
.rep-meter { width: 100%; height: 14px; }
.rep-sec { margin-top: 14px; }
@media (max-width: 1180px) { .rep-grid { grid-template-columns: 1fr; } }
.rep-chip { min-height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line, rgba(128,128,128,.35)); background: transparent; color: inherit; font-weight: 600; font-size: 13px; cursor: pointer; }
.rep-chip.on { background: #1666f0; border-color: #1666f0; color: #fff; }
@media (max-width: 760px) { .rep-chip { min-height: 44px; } }
.pay-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 12px; }
.pay-plan { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; text-align: left; border: 2px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); cursor: pointer; }
.pay-plan[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); }
.pay-plan .pp-name { font-size: 13px; color: var(--muted); font-weight: 600; } .pay-plan .pp-price { font-size: 20px; } .pay-plan .pp-price s { color: var(--muted); font-weight: 400; font-size: 14px; } .pay-plan .pp-sub { font-size: 12.5px; color: var(--muted); }
.note.ok { color: var(--ok); font-weight: 600; margin: 0 0 12px; }

/* Administração > Promoções */
.promo-card { margin-bottom: 12px; }
.promo-card .grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin-bottom: 10px; }
.promo-card .fld { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted, #667); margin-bottom: 8px; }
.promo-card .chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; margin-bottom: 8px; }
.promo-card .chk input { width: auto; }
.promo-prev { padding: 8px 10px; border-radius: 8px; background: var(--panel2, rgba(127,127,127,.1)); }
.promo-cov progress { width: 100%; max-width: 360px; height: 10px; display: block; margin-bottom: 4px; }
.promo-cov .warn { color: var(--warn, #b45309); font-weight: 600; }

/* Administração > Documentação */
.docs-grid { display: grid; grid-template-columns: 230px 1fr; gap: 18px; align-items: start; }
.docs-toc { position: sticky; top: 8px; max-height: calc(100vh - 24px); overflow: auto; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.docs-toc .gt { margin: 10px 0 2px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.docs-toc a { padding: 5px 8px; border-radius: 7px; color: var(--ink); text-decoration: none; }
.docs-toc a:hover, .docs-toc a.on { background: var(--field); }
.docs-sec { margin-bottom: 14px; scroll-margin-top: 10px; }
.docs-sec h3 { margin: 0 0 2px; font-size: 18px; }
.docs-sec .docs-sub { margin: 0 0 10px; color: var(--muted); font-size: 13px; }
.docs-sec h4 { margin: 12px 0 4px; font-size: 14px; }
.docs-sec p { margin: 6px 0; line-height: 1.55; }
.docs-sec ul { margin: 6px 0; padding-left: 20px; line-height: 1.55; }
.docs-sec li { margin: 3px 0; }
.docs-note { margin: 10px 0 0; padding: 9px 12px; border-left: 3px solid var(--warn, #b45309); background: var(--field); border-radius: 6px; font-size: 13.5px; }
.docs-sec mark { background: #ffe58a; color: #1b1200; border-radius: 3px; padding: 0 1px; }
@media (max-width: 820px) { .docs-grid { grid-template-columns: 1fr; } .docs-toc { position: static; max-height: none; flex-direction: row; flex-wrap: wrap; gap: 6px; } .docs-toc .gt { display: none; } .docs-toc a { background: var(--field); } }
@media print { body * { visibility: hidden; } #adm-docs, #adm-docs * { visibility: visible; } #adm-docs { position: absolute; left: 0; top: 0; width: 100%; } .docs-ctl, .docs-toc { display: none; } .docs-grid { display: block; } .docs-sec { break-inside: avoid; } }

/* Administração > Hoje e Reserva para reembolsos */
.today-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 12px; }
.today-tile { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--field); }
.today-tile .tt-l { font-size: 12px; color: var(--muted); }
.today-tile .tt-v { font-size: 24px; color: var(--ink); line-height: 1.2; }
.today-tile .tt-s { font-size: 12.5px; color: var(--muted); }
.today-sub { margin: 4px 0 8px; font-size: 14px; }
.today-todo { display: flex; flex-direction: column; gap: 6px; }
.today-it { display: flex; align-items: center; gap: 10px; text-align: left; width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--field); color: var(--ink); cursor: pointer; font: inherit; }
.today-it b { min-width: 26px; text-align: center; padding: 2px 6px; border-radius: 999px; background: var(--line); }
.today-it.st-bad { border-color: var(--bad); } .today-it.st-bad b { background: var(--bad); color: #fff; }
.today-it.st-warn { border-color: var(--warn, #b45309); } .today-it.st-warn b { background: var(--warn, #b45309); color: #fff; }
.today-it span:nth-child(2) { flex: 1; }
.today-arrow { color: var(--muted); font-size: 18px; }
.today-ok { margin: 4px 0 0; color: var(--muted); }

/* Administração > Configurações */
.cfg-row { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.cfg-row:last-child { border-bottom: 0; }
.cfg-row > label { font-weight: 600; font-size: 14px; }
.cfg-row input, .cfg-row select { max-width: 360px; }
.cfg-row.dirty { border-left: 3px solid var(--warn, #b45309); padding-left: 10px; }
.cfg-std { margin: 0; font-size: 12.5px; color: var(--muted); }
.cfg-row input[type=number] { min-height: var(--h-ctl); padding: 0 12px; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--field); color: var(--ink); font: inherit; width: 100%; box-sizing: border-box; }
.cfg-row input[type=number]:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Cartão discreto do plano no menu lateral */
.sb-plan { display: flex; flex-direction: column; gap: 4px; margin: 0 10px 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--field); font-size: 12.5px; }
.sb-plan .sp-t { font-weight: 700; font-size: 13px; color: var(--ink); }
.sb-plan .sp-u { color: var(--muted); line-height: 1.35; }
.sb-plan progress { width: 100%; height: 6px; }
.sb-plan .sp-n { color: var(--warn, #b45309); font-weight: 600; }
.sb-plan.near { border-color: var(--warn, #b45309); }
.sb-plan .mini { margin-top: 4px; align-self: flex-start; }
.sb-plan { position: relative; }
.sb-plan .sp-x { position: absolute; top: 4px; right: 6px; border: 0; background: transparent; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.sb-plan .sp-x:hover, .sb-plan .sp-x:focus-visible { color: var(--ink); background: var(--line); }
.sb-plan .sp-t { padding-right: 22px; }