:root { --primary: #2ecc71; --dark: #2c3e50; --light: #f4f4f4; }
body { font-family: 'Segoe UI', sans-serif; margin: 0; background: var(--light); color: var(--dark); overflow-x: hidden; }

/* Header */
header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1rem 5%; background: white; box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: sticky; top: 0; z-index: 1000;
}
.header-left { display: flex; align-items: center; gap: 15px; }
.header-left h1 { margin: 0; font-size: 1.5rem; }

/* Modal */
.modal { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); }
.modal-content {
    background: white; margin: 10% auto; padding: 2rem; width: 350px;
    border-radius: 15px; position: relative; text-align: center; animation: slideDown 0.4s;
}
.close { position: absolute; right: 20px; cursor: pointer; font-size: 20px; }
input, textarea, select { width: 100%; padding: 12px; margin: 10px 0; border: 1px solid #ddd; border-radius: 8px; }

/* Carrossel */
.carousel { height: 450px; background: #ddd; position: relative; }
.slide { height: 100%; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; color: white; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); }
.slide-content { text-align: center; background: rgba(0,0,0,0.3); padding: 20px; border-radius: 10px; }

/* Cards Animação */
.action-cards { display: flex; gap: 30px; padding: 50px 5%; justify-content: center; }
.card {
    background: white; border-radius: 15px; overflow: hidden; width: 350px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); transition: 0.4s ease; cursor: pointer;
}
.card:hover { transform: scale(1.05) translateY(-10px); z-index: 10; box-shadow: 0 15px 30px rgba(0,0,0,0.2); }
.card img { width: 100%; height: 220px; object-fit: cover; }
.card-info { padding: 20px; }

/* Stats */
.stats-section { padding: 50px 5%; background: white; text-align: center; }
.chart-container { max-width: 500px; margin: 20px auto; }

/* Buttons */
.btn-login { background: var(--primary); color: white; border: none; padding: 10px 20px; border-radius: 20px; cursor: pointer; font-weight: bold; }
.btn-main { background: var(--primary); color: white; border: none; padding: 12px; border-radius: 8px; cursor: pointer; width: 100%; font-size: 1rem; }

footer { text-align: center; padding: 30px; background: var(--dark); color: white; }

@keyframes slideDown { from { transform: translateY(-50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }