/* Páginas de apoio (painel e instruções). Cores e fonte vêm das variáveis do tema, injetadas por script. */
:root { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--preto); color: var(--branco); font-family: var(--f); font-size: 15px; line-height: 1.5; }
h1 { margin: 0 0 4px; font-size: 22px; font-weight: 900; letter-spacing: -0.02em; }
h2 { margin: 28px 0 8px; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
a { color: var(--amarelo); }
code, kbd { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; background: var(--cartao2); border-radius: 6px; padding: 2px 6px; }
pre { background: var(--cartao); border-radius: 12px; padding: 12px 14px; overflow-x: auto; }
pre code { background: none; padding: 0; }
.mudo { color: var(--texto2); margin: 4px 0; }

.dock { max-width: 520px; margin: 0 auto; padding: 14px; }
.linha { margin: 6px 0; padding: 8px 12px; background: var(--cartao); border-radius: 12px; overflow-wrap: anywhere; }
.linha[data-estado="falta"], .linha[data-estado="sem-conexao"] { border-left: 4px solid var(--fake); }
.linha[data-estado="ok"] { border-left: 4px solid var(--fato); }
.botoes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 14px 0 6px; }
button { font: 700 15px/1 var(--f); min-height: 44px; padding: 10px 14px; border: 0; border-radius: 12px; background: var(--cartao2); color: var(--branco); cursor: pointer; }
button:hover { background: var(--cartao); outline: 1px solid var(--texto2); }
button:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 2px; }
button:active { transform: translateY(1px); }
details { margin-top: 18px; background: var(--cartao); border-radius: 12px; padding: 10px 14px; }
summary { cursor: pointer; font-weight: 700; }
label { display: grid; gap: 4px; margin: 10px 0; color: var(--texto2); }
input { font: 500 15px var(--f); padding: 10px 12px; border-radius: 10px; border: 1px solid var(--tracejado); background: var(--preto); color: var(--branco); }

.pagina { max-width: 760px; margin: 0 auto; padding: 28px 20px 60px; }
.pagina li { margin: 6px 0; }
table { border-collapse: collapse; width: 100%; margin: 8px 0; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--cartao2); vertical-align: top; }