/* Reset e base */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Open Sans', sans-serif; line-height: 1.6; background: #f4f7f6; color: #333; }

/* Header */
header { background: #e0f7fa; padding: 15px; text-align: center; position: relative; }
.logo { max-width: 120px; height: auto; margin-bottom: 10px; }
header p { font-size: 1.1em; color: #00796b; }
nav { margin-top: 10px; }
.btn-nav { background: #b2dfdb; color: #00796b; padding: 8px 12px; margin: 5px; text-decoration: none; border-radius: 5px; display: inline-block; font-size: 0.9em; }
.btn-nav:hover { background: #80cbc4; }

/* Main e Cards */
main { max-width: 900px; margin: 20px auto; padding: 0 15px; }
.card { background: #fff; border-radius: 10px; padding: 20px; margin-bottom: 20px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
.card h1 { font-size: 1.8em; color: #00796b; margin-bottom: 15px; }
.card h2 { font-size: 1.3em; color: #004d40; margin-bottom: 10px; }
.card p { font-size: 1em; color: #555; }

/* Botões */
.btn { display: inline-block; padding: 10px 20px; background: #00796b; color: #fff; text-decoration: none; border-radius: 5px; margin: 5px; font-size: 1em; }
.btn:hover { background: #004d40; }

/* Formulários */
.form-diario select, .form-diario textarea, .login input, .registro input { 
    width: 100%; padding: 10px; margin: 10px 0; border: 1px solid #ccc; border-radius: 5px; font-size: 1em; }
.form-diario textarea { resize: vertical; }
.pergunta label { display: block; margin: 5px 0; }

/* Específicos */
.quiz, .dicas, .diario, .plano, .login, .registro { padding: 0; } /* Cards cuidam do padding */
.filtros { margin: 15px 0; }
.btn-filtro { background: #b2dfdb; color: #00796b; padding: 5px 15px; }
.btn-filtro:hover { background: #80cbc4; }
.dica, .resultado { background: #e0f7fa; padding: 15px; margin: 10px 0; border-radius: 5px; }
.categoria { background: #b0bec5; padding: 5px 10px; border-radius: 3px; font-size: 0.9em; }
.registros table { width: 100%; border-collapse: collapse; }
.registros th, .registros td { padding: 10px; border-bottom: 1px solid #ddd; }
.registros th { background: #e0f7fa; }

/* Footer */
footer { background: #e0f7fa; text-align: center; padding: 10px; margin-top: 20px; }

/* Responsividade */
@media (max-width: 600px) {
    header { padding: 10px; }
    .logo { max-width: 100px; }
    header p { font-size: 0.9em; }
    nav { position: static; margin-top: 5px; }
    .btn-nav { padding: 6px 10px; font-size: 0.8em; }
    main { padding: 0 10px; }
    .card h1 { font-size: 1.5em; }
    .card h2 { font-size: 1.2em; }
    .btn { padding: 8px 15px; font-size: 0.9em; }
    .registros table, .registros th, .registros td { font-size: 0.9em; }
}
.grafico { padding: 20px; }
canvas { max-width: 100%; height: auto; }
@media (max-width: 600px) {
    .grafico { padding: 10px; }
    canvas { max-height: 200px; }
}
.posts { margin-top: 20px; }
.posts .dica { background: #e0f7fa; }
@media (max-width: 600px) {
    .posts .dica { padding: 10px; }
}
.premium-post { border-left: 4px solid #00796b; }
.premium-post .categoria { color: #00796b; font-weight: bold; }
@media (max-width: 600px) {
    .premium-post { border-left-width: 2px; }
}

.captcha { margin: 15px 0; }
.captcha label { display: block; margin-bottom: 5px; font-weight: bold; }
.captcha input { width: 100px; }
@media (max-width: 600px) {
    .captcha input { width: 80px; }
}
.mensagem {
    color: #d32f2f; /* Vermelho para chamar atenção */
    font-weight: bold;
    margin: 10px 0;
}
.mensagem:empty {
    display: none; /* Esconde se não houver mensagem */
}
.btn-donation {
    background-color: #ff5722;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
}
.btn-donation:hover {
    background-color: #e64a19;
}
.desafios .desafio { margin: 10px 0; padding: 10px; background: #f5f5f5; border-radius: 5px; }
.conquistas { list-style: none; padding: 0; }
.conquistas li { padding: 5px 0; }
.conquistas li:before { content: "🏆 "; }