:root{--sf-amarelo: #ffe500;--sf-amarelo-forte: #e6ce00;--sf-preto: #0b0b0b;--fundo: #f7f7f8;--superficie: #ffffff;--borda: #e4e4e7;--texto: #18181b;--texto-suave: #52525b;--sombra: 0 1px 3px rgb(0 0 0 / .08);--acento: var(--sf-amarelo);--acento-texto: var(--sf-preto);--ok: #15803d;--alerta: #b45309;--erro: #b91c1c}.dark{--fundo: #0b0b0b;--superficie: #171717;--borda: #2a2a2a;--texto: #fafafa;--texto-suave: #a1a1aa;--sombra: 0 1px 3px rgb(0 0 0 / .5);--ok: #4ade80;--alerta: #fbbf24;--erro: #f87171}*{box-sizing:border-box}html,body{height:100%}#root{min-height:100%;display:flex;flex-direction:column}body{margin:0;background:var(--fundo);color:var(--texto);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased}.tela{flex:1;display:grid;place-items:center;padding:2rem 1rem}.tarja-ambiente{flex:none;padding:.4rem 1rem;text-align:center;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff}.tarja-ambiente[data-ambiente=local]{background:#0f766e}.tarja-ambiente[data-ambiente=dev]{background:#6d28d9}.tarja-ambiente[data-ambiente=desconhecido]{background:#b91c1c}.cartao{width:100%;max-width:27rem;background:var(--superficie);border:1px solid var(--borda);border-radius:14px;box-shadow:var(--sombra);padding:2rem;text-align:center}.marca{width:116px;height:116px;object-fit:contain;background:var(--sf-preto);border-radius:12px;padding:8px}h1{font-size:1.25rem;margin:1.25rem 0 .25rem}.legenda{margin:0;color:var(--texto-suave);font-size:.875rem}.faixa{margin:1.75rem 0 0;padding:.75rem 1rem;border-radius:10px;border:1px solid var(--borda);font-size:.9375rem;display:flex;align-items:center;justify-content:center;gap:.5rem}.faixa[data-estado=ok]{color:var(--ok)}.faixa[data-estado=erro]{color:var(--erro)}.faixa[data-estado=carregando]{color:var(--texto-suave)}.ponto{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}.botao-tema{margin-top:1.5rem;background:var(--acento);color:var(--acento-texto);border:none;border-radius:9px;padding:.625rem 1.125rem;font-size:.875rem;font-weight:600;cursor:pointer}.botao-tema:hover{background:var(--sf-amarelo-forte)}.botao-tema:focus-visible{outline:2px solid var(--texto);outline-offset:2px}