/* Identidade visual da Trinia (22/10/2026), a mesma do editor: marinho nos destaques e nos botões,
   rosa nos detalhes, amarelo no realce; Montserrat nos títulos, Open Sauce Sans no corpo (as fontes
   vêm do /static/nav.css). No escuro, fundo marinho profundo e o rosa como cor de ação. */
:root { color-scheme: light dark; --fg:#383838; --bg:#f0f2f4; --card:#ffffff; --muted:#6b6d80; --line:#cdcdcd; --accent:#0a0b69; --link:#0a0b69; --title:#0a0b69; --btn:#0a0b69; --btn-fg:#ffffff; --btn2:#e9e9e9; --btn2-fg:#383838; --warn:#b85c00; --bad:#c4183c; --pink:#f8347b; --yellow:#ffc73b; }
@media (prefers-color-scheme: dark) { :root { --fg:#ecedf5; --bg:#0e0f2e; --card:#14163d; --muted:#a0a3c8; --line:#2b2e66; --accent:#f8347b; --link:#ff7aa8; --title:#ffffff; --btn:#f8347b; --btn-fg:#ffffff; --btn2:#24275a; --btn2-fg:#ecedf5; --warn:#ffc73b; --bad:#ff6f8f; } }
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.5 'Open Sauce Sans', system-ui, sans-serif; color: var(--fg); background: var(--bg); }
h1, h2, h3, legend { font-family: 'Montserrat', system-ui, sans-serif; color: var(--title); letter-spacing: -0.005em; }
h2, h3, legend { font-weight: 600; }
a { color: var(--link); }
:focus-visible { outline: 2px solid var(--pink); outline-offset: 1px; }
/* O cabeçalho (barra de navegação) vem do /static/nav.css, o mesmo de toda tela (nav.ts). */
.product-header > .who { margin-left: auto; color: var(--muted); font-size: .9rem; }
main { max-width: 52rem; margin: 0 auto; padding: 1rem; }
h1 { font-size: 1.45rem; font-weight: 700; }
table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .92rem; }
th, td { text-align: left; padding: .4rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
form.inline { display: inline; }
fieldset { border: 1px solid var(--line); border-radius: 10px; margin: 1rem 0; padding: .75rem 1rem; background: var(--card); }
label { display: block; margin: .35rem 0; }
input[type=text], input[type=url], select { font: inherit; padding: .4rem .55rem; min-width: 16rem; max-width: 100%; }
input[type=url] { width: 100%; }
input[type=text], input[type=url], input[type=email], input[type=password], input[type=number], select, textarea { border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--fg); }
/* Conectar uma IA (página Agentes): uma seção recolhível por IA. */
details.ia { border: 1px solid var(--line); border-radius: 10px; margin: .75rem 0; padding: .5rem 1rem; background: var(--card); }
details.ia > summary { cursor: pointer; font: 600 1.1rem 'Montserrat', system-ui, sans-serif; color: var(--title); padding: .25rem 0; }
details.ia fieldset { background: var(--bg); }
details.ia ol li { margin: .3rem 0; }
/* Primeiros passos (Administração). */
ul.steps { list-style: none; padding-left: 0; }
ul.steps li { margin: .5rem 0; }
/* Botões como no guia da marca: o principal em marinho (no escuro, rosa); os das tabelas, em cinza. */
button { font: inherit; font-weight: 600; padding: .45rem 1rem; border: 1px solid var(--btn); border-radius: 6px; background: var(--btn); color: var(--btn-fg); cursor: pointer; }
button:hover { filter: brightness(1.15); }
td button, button.secondary { background: var(--btn2); border-color: var(--line); color: var(--btn2-fg); font-weight: 500; padding: .3rem .75rem; }
/* Revogar, encerrar, excluir, cancelar, desativar, remover: cinza também fora das tabelas (não é a ação principal da página). */
form[action*="revogar"] button, form[action*="encerrar"] button, form[action*="excluir"] button, form[action*="cancelar"] button, form[action*="desativar"] button, form[action*="remover"] button { background: var(--btn2); border-color: var(--line); color: var(--btn2-fg); }
.code { font: 600 1.6rem ui-monospace, monospace; letter-spacing: .08em; padding: .5rem .75rem; border: 1px dashed var(--line); display: inline-block; }
.muted { color: var(--muted); }
.notice { border-left: 3px solid var(--accent); padding: .25rem .75rem; }
.warn { color: var(--warn); }
.bad { color: var(--bad); }
.tag { font-size: .8rem; border: 1px solid var(--line); border-radius: 999px; padding: 0 .5rem; }
pre { white-space: pre-wrap; word-break: break-word; border: 1px solid var(--line); padding: .5rem; border-radius: 6px; }
/* Listas longas (eventos, backups): recolhidas, com rolagem própria, sem esticar a página. */
details.records { margin: .5rem 0; }
details.records > summary { cursor: pointer; color: var(--accent); }
.scroll-box { max-height: 22rem; overflow: auto; border: 1px solid var(--line); border-radius: 6px; margin: .5rem 0; }
.scroll-box table { margin: 0; }
.scroll-box thead th { position: sticky; top: 0; background: var(--bg); }
td.data { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: .8rem ui-monospace, monospace; }

input[type=email], input[type=password] { font: inherit; padding: .4rem .55rem; min-width: 16rem; max-width: 100%; }
/* Entrar, esqueci a senha, convite: o cartão branco com o logo TRINIA, sobre o marinho da marca. */
body:has(main > .card) { background: radial-gradient(1200px 600px at 20% 0%, #1a1c86, #0a0b69 60%); min-height: 100vh; }
@media (prefers-color-scheme: dark) { body:has(main > .card) { background: radial-gradient(1200px 600px at 20% 0%, #15176a, #07083f 60%); } }
body:has(main > .card) main { min-height: calc(100vh - 48px); display: flex; align-items: center; justify-content: center; }
.card { width: 100%; max-width: 26rem; margin: 2.5rem auto; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 2rem 2.25rem 1.75rem; box-shadow: 0 18px 50px rgba(10, 11, 105, .18); }
.card::before { content: ''; display: block; height: 46px; margin: 0 auto 1.25rem; background: url(marca/trinia.svg) no-repeat center / contain; }
@media (prefers-color-scheme: dark) { .card::before { background-image: url(marca/trinia-branco.svg); } }
.card h1 { text-align: center; font-size: 1.35rem; margin: 0 0 1rem; }
.card label { font-weight: 500; }
.card input[type=email], .card input[type=password], .card input[type=text] { width: 100%; }
.card button[type=submit] { width: 100%; margin-top: .75rem; padding: .7rem 1rem; font-family: 'Montserrat', system-ui, sans-serif; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 8px 18px color-mix(in srgb, var(--btn) 35%, transparent); }
.notice { border: 1px solid var(--line); border-left: 4px solid var(--accent); padding: .5rem .75rem; border-radius: 4px; }
.error { border: 1px solid var(--line); border-left: 4px solid var(--bad); padding: .5rem .75rem; border-radius: 4px; }
.links { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; font-size: .92rem; }
/* A conta de IA no convite: as duas opções uma embaixo da outra, com a explicação. */
fieldset.conta-ia { margin: .5rem 0; padding: .5rem .75rem; }
fieldset.conta-ia label { display: block; font-weight: 400; margin: .35rem 0; }
/* A Plataforma: a tabela das empresas (7 colunas, com a situação do vault) usa mais da tela. */
main:has(table.companies-table) { max-width: 84rem; }
table.companies-table td { vertical-align: top; }
.card .hint { margin: .2rem 0 .6rem; font-size: .88rem; }
/* Cadastro: o campo-isca contra robôs, fora da tela (quem preenche não é gente). */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
ul.companies { list-style: none; padding: 0; }
ul.companies li { border: 1px solid var(--line); border-radius: 6px; margin: .5rem 0; padding: .75rem 1rem; }
ul.companies a { font-weight: 600; }
td form { display: inline; margin-right: .25rem; }
.appearance-area { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: end; margin: .75rem 0 .25rem; }
.appearance-area h3 { flex-basis: 100%; margin: 0; font-size: 1rem; }
.appearance-area select { font: inherit; padding: .25rem .35rem; }
.support textarea { width: 100%; font: inherit; padding: .5rem .6rem; }
/* Ticket como conversa: a mensagem da pessoa à esquerda (destaque marinho), a da Trinia (rosa). */
.ticket-thread { display: flex; flex-direction: column; gap: .75rem; margin: 1rem 0; }
.ticket-msg { border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 8px; padding: .6rem .85rem; background: var(--card); }
.ticket-msg.trinia { border-left-color: #f8347b; }
.ticket-msg header { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: baseline; margin-bottom: .35rem; }
.ticket-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.ticket-msg pre { white-space: pre-wrap; font-size: .85rem; }
.ticket-new { display: inline-block; margin-left: .35rem; padding: 0 .45rem; border-radius: 9px; background: #f8347b; color: #fff; font-size: .75rem; font-weight: 700; }
.ticket-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .5rem 0; }
.ticket-actions button.secondary { background: transparent; color: var(--accent); border: 1px solid var(--line); box-shadow: none; }
.support select { min-width: 16rem; }
.ticket-status { white-space: nowrap; }
.sample { margin: .25rem 0 .75rem; padding: .5rem .75rem; border: 1px solid var(--line); border-radius: 6px; line-height: 1.5; }
/* Uso das empresas: a tabela é larga (7 colunas), então a página usa mais da tela. */
main:has(table.usage) { max-width: 84rem; }
table.usage td { vertical-align: top; line-height: 1.45; }
table.usage td:first-child strong { font-weight: 700; }
table.usage td .muted { font-size: .88rem; }
.usage-summary { display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin: .25rem 0; }
.usage-summary strong { display: block; font-size: 1.35rem; }
.sample-editor { font-family: ui-monospace, 'Cascadia Code', Menlo, Consolas, monospace; font-size: 14px; }
.sample-visual { font-family: 'Open Sauce Sans', system-ui, sans-serif; font-size: 15px; }
.sample-arvore { font-family: 'Open Sauce Sans', system-ui, sans-serif; font-size: 15px; }
.sample.f-opensauce { font-family: 'Open Sauce Sans', system-ui, sans-serif; }
.sample.f-montserrat { font-family: 'Montserrat', system-ui, sans-serif; }
.sample.f-sistema { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
.sample.f-arial { font-family: Arial, 'Liberation Sans', Helvetica, sans-serif; }
.sample.f-verdana { font-family: Verdana, Geneva, sans-serif; }
.sample.f-calibri { font-family: Calibri, Carlito, sans-serif; }
.sample.f-georgia { font-family: Georgia, Cambria, 'Times New Roman', serif; }
.sample.f-times { font-family: 'Times New Roman', Times, 'Liberation Serif', serif; }
.sample.f-mono { font-family: ui-monospace, 'Cascadia Code', Menlo, Consolas, monospace; }
.sample.s-10 { font-size: 10px; }
.sample.s-11 { font-size: 11px; }
.sample.s-12 { font-size: 12px; }
.sample.s-13 { font-size: 13px; }
.sample.s-14 { font-size: 14px; }
.sample.s-15 { font-size: 15px; }
.sample.s-16 { font-size: 16px; }
.sample.s-17 { font-size: 17px; }
.sample.s-18 { font-size: 18px; }
.sample.s-20 { font-size: 20px; }
.sample.s-22 { font-size: 22px; }
.sample.s-24 { font-size: 24px; }