/* Complementos ao Tailwind (via CDN). */
.campo { width: 100%; border: 1px solid rgba(250,247,242,0.14); border-radius: 0.75rem; padding: 0.6rem 0.85rem;
         background: rgba(250,247,242,0.04); color: #faf7f2; font-size: 0.9rem; color-scheme: dark; }
.campo::placeholder { color: rgba(250,247,242,0.35); }
.campo:focus { outline: 2px solid #d4a653; outline-offset: 1px; border-color: transparent; }
select.campo option { background: #0a2627; color: #faf7f2; }
.rotulo { display: block; font-family: "JetBrains Mono", monospace; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.03em;
          color: #7fb8ad; margin-bottom: 0.35rem; }
.botao { display: inline-flex; align-items: center; justify-content: center; padding: 0.65rem 1.25rem; border-radius: 9999px;
         background: #c08c3c; color: #0a2627; font-weight: 600; font-size: 0.9rem; box-shadow: 0 10px 25px -12px rgba(192,140,60,0.6); }
.botao:hover { background: #d4a653; }
.botao-sec { display: inline-flex; align-items: center; padding: 0.55rem 1.1rem; border-radius: 9999px; border: 1px solid rgba(250,247,242,0.22);
             color: #faf7f2; font-weight: 600; font-size: 0.85rem; }
.botao-sec:hover { border-color: #d4a653; color: #d4a653; }
.cartao { background: rgba(250,247,242,0.03); border: 1px solid rgba(250,247,242,0.09); border-radius: 1rem; padding: 1.5rem; color: #faf7f2; }
.tabela { width: 100%; font-size: 0.85rem; }
.tabela th:not(.text-right) { text-align: left; }
.tabela th { font-family: "JetBrains Mono", monospace; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.03em; color: #d4a653;
             padding: 0.55rem 0.6rem; border-bottom: 1px solid rgba(250,247,242,0.12); }
.tabela td { padding: 0.6rem 0.6rem; border-bottom: 1px solid rgba(250,247,242,0.06); vertical-align: top; color: rgba(250,247,242,0.85); }
.tabela tbody tr:hover td { background: rgba(250,247,242,0.02); }
.selo { display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.2rem 0.6rem; border-radius: 9999px; }
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline; }

/* Código: quebra linhas em vez de rolar; se precisar rolar, barra fina no tom do bloco. */
.codigo { font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; font-size: 0.78rem; line-height: 1.6;
          background: #0a2627; color: #faf7f2; border-radius: 1rem; padding: 1rem 1.2rem;
          white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: auto; }
.codigo, .janela-corpo { scrollbar-width: thin; scrollbar-color: #1a6b5f transparent; }
.codigo::-webkit-scrollbar, .janela-corpo::-webkit-scrollbar { height: 6px; width: 6px; }
.codigo::-webkit-scrollbar-thumb, .janela-corpo::-webkit-scrollbar-thumb { background: #1a6b5f; border-radius: 9999px; }
.codigo::-webkit-scrollbar-track, .janela-corpo::-webkit-scrollbar-track { background: transparent; }

/* Sintaxe */
.s-chave { color: #e6c47a; }      /* chaves JSON */
.s-texto { color: #7fb8ad; }      /* strings */
.s-num   { color: #d4a653; }      /* números */
.s-com   { color: rgba(250,247,242,0.38); } /* comentários */
.s-verbo { color: #c08c3c; font-weight: 600; }

/* Janela de terminal */
.janela { background: #0a2627; border: 1px solid rgba(250,247,242,0.10); border-radius: 1rem; overflow: hidden;
          box-shadow: 0 30px 60px -20px rgba(0,0,0,0.55), 0 0 0 1px rgba(192,140,60,0.06); }
.janela-barra { display: flex; align-items: center; gap: 0.4rem; padding: 0.65rem 0.9rem; border-bottom: 1px solid rgba(250,247,242,0.08);
                background: rgba(250,247,242,0.03); font-family: "JetBrains Mono", monospace; font-size: 0.72rem; color: rgba(250,247,242,0.5); }
.janela-barra i { width: 0.6rem; height: 0.6rem; border-radius: 9999px; display: inline-block; background: rgba(250,247,242,0.18); }
.janela-corpo { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.76rem; line-height: 1.65; color: #faf7f2;
                padding: 1rem 1.1rem; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Tema escuro "tech" */
.grade-pontos { background-image: radial-gradient(rgba(250,247,242,0.07) 1px, transparent 1px); background-size: 22px 22px; }
.brilho { background: radial-gradient(600px circle at 75% 20%, rgba(26,107,95,0.35), transparent 60%),
                      radial-gradient(500px circle at 10% 90%, rgba(192,140,60,0.10), transparent 60%); }
.cartao-tech { background: rgba(250,247,242,0.03); border: 1px solid rgba(250,247,242,0.09); border-radius: 1rem; padding: 1.4rem;
               transition: border-color .2s, background .2s, box-shadow .2s; }
.cartao-tech:hover { border-color: rgba(212,166,83,0.45); background: rgba(250,247,242,0.05); box-shadow: 0 0 0 1px rgba(212,166,83,0.15), 0 10px 30px -15px rgba(192,140,60,0.35); }
.rotulo-mono { font-family: "JetBrains Mono", monospace; font-size: 0.72rem; letter-spacing: 0.04em; color: #d4a653; }
.ponto-vivo { width: 0.45rem; height: 0.45rem; border-radius: 9999px; background: #7fb8ad; box-shadow: 0 0 0 3px rgba(127,184,173,0.18); display: inline-block; }