:root {
    --briquezi-laranja: #ff6b1a;
    --briquezi-laranja-escuro: #d9560f;
    --bg: #f7f7f8;
    --card-bg: #ffffff;
    --texto: #222222;
    --texto-suave: #6b6b6b;
    --borda: #e6e6e6;
    --ok: #1a9e57;
    --alerta: #d9560f;
    --erro: #c0392b;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    background: var(--bg);
    color: var(--texto);
}

.topbar {
    background: #1a1a1a;
    color: #fff;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.topbar .marca {
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--briquezi-laranja);
}

.topbar nav a {
    color: #ddd;
    text-decoration: none;
    margin-left: 18px;
    font-size: 14px;
}

.topbar nav a:hover { color: var(--briquezi-laranja); }

.container {
    max-width: 960px;
    margin: 0 auto;
    padding: 32px 20px;
}

.cartao {
    background: var(--card-bg);
    border: 1px solid var(--borda);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 16px;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.badge.ativo { background: #e6f6ec; color: var(--ok); }
.badge.suspenso { background: #fdece3; color: var(--alerta); }
.badge.cancelado { background: #fbe8e6; color: var(--erro); }

.botao {
    display: inline-block;
    background: var(--briquezi-laranja);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.botao:hover { background: var(--briquezi-laranja-escuro); }

.form-login {
    max-width: 380px;
    margin: 60px auto;
    padding: 28px;
    background: var(--card-bg);
    border: 1px solid var(--borda);
    border-radius: 10px;
}

.form-login label {
    display: block;
    font-size: 13px;
    margin: 12px 0 4px;
}

.form-login input {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--borda);
    border-radius: 6px;
    font-size: 14px;
}

.erro-msg {
    background: #fbe8e6;
    color: var(--erro);
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 14px;
    margin-bottom: 12px;
}

.texto-suave { color: var(--texto-suave); font-size: 13px; }

.em-breve {
    text-align: center;
    padding: 60px 20px;
    color: var(--texto-suave);
}