:root {
    --azul: #1f6feb;
    --azul-escuro: #163d78;
    --cinza: #6b7280;
    --borda: #e5e7eb;
    --fundo: #f7f8fa;
    --texto: #1f2937;
    --verde: #157347;
    --vermelho: #b02a37;
}
* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: "Segoe UI", system-ui, sans-serif;
    color: var(--texto);
    background: var(--fundo);
}
.topbar {
    display: flex; align-items: center; gap: 1.5rem;
    padding: 0.75rem 1.5rem; background: #fff; border-bottom: 1px solid var(--borda);
}
.brand { font-weight: 700; font-size: 1.25rem; color: var(--azul-escuro); text-decoration: none; }
.brand span { color: var(--azul); }
.topbar nav { display: flex; gap: 1rem; flex: 1; }
.topbar nav a { color: var(--texto); text-decoration: none; }
.topbar nav a:hover { color: var(--azul); }
.usuario { display: flex; align-items: center; gap: 1rem; color: var(--cinza); }
.usuario .sair { color: var(--vermelho); text-decoration: none; }
.conteudo { max-width: 960px; margin: 2rem auto; padding: 0 1.5rem; }
.rodape { text-align: center; color: var(--cinza); padding: 2rem; font-size: 0.85rem; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; margin-top: 2rem; }
.card { background: #fff; border: 1px solid var(--borda); border-radius: 10px; padding: 1.5rem; margin-bottom: 1.5rem; }
.card.estreito { max-width: 420px; margin: 3rem auto; }
label { display: block; margin: 0.75rem 0 0.25rem; font-size: 0.9rem; font-weight: 600; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], textarea, select {
    width: 100%; padding: 0.55rem 0.7rem; border: 1px solid var(--borda);
    border-radius: 7px; font-size: 0.95rem; font-family: inherit;
}
.linha { display: flex; gap: 1rem; flex-wrap: wrap; }
.linha > div { flex: 1; min-width: 140px; }
.btn {
    display: inline-block; margin-top: 1rem; padding: 0.55rem 1.1rem; border: 0;
    border-radius: 7px; background: var(--azul); color: #fff; font-size: 0.95rem;
    cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--azul-escuro); }
.btn.secundario { background: #eef2f7; color: var(--texto); }
table { width: 100%; border-collapse: collapse; background: #fff; }
th, td { text-align: left; padding: 0.65rem 0.75rem; border-bottom: 1px solid var(--borda); font-size: 0.92rem; }
th { color: var(--cinza); font-weight: 600; }
.alerta { padding: 0.75rem 1rem; border-radius: 7px; margin: 1rem 0; font-size: 0.92rem; }
.alerta.erro { background: #fbeaec; color: var(--vermelho); }
.alerta.ok { background: #e7f5ee; color: var(--verde); }
.alerta.info { background: #eaf1fb; color: var(--azul-escuro); }
.pill { padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; }
.pill.convidada { background: #fff3cd; color: #7a5c00; }
.pill.ativa { background: #e7f5ee; color: var(--verde); }
.pill.suspensa { background: #fbeaec; color: var(--vermelho); }
.muted { color: var(--cinza); font-size: 0.85rem; }
code.link { display: block; word-break: break-all; background: #f3f4f6; padding: 0.6rem; border-radius: 6px; margin-top: 0.4rem; font-size: 0.82rem; }