:root {
    --primary: #1b4332;
    --accent: #74c69d;
    --bg: #f8f9fa;
    --card: #ffffff;
    --text: #2d3436;
}

.dark-mode {
    --bg: #121212;
    --card: #1e1e1e;
    --text: #f1f1f1;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { background-color: var(--bg); color: var(--text); font-family: 'Segoe UI', sans-serif; transition: 0.3s; }

/* BARRA DE TOPO */
#top-bar { position: fixed; top: 15px; right: 15px; z-index: 1000; display: flex; gap: 8px; }
.btn-topo { background: var(--primary) !important; color: white !important; border: 1px solid white; padding: 8px 12px; border-radius: 8px; cursor: pointer; font-weight: bold; }

header { background: var(--primary); color: white; padding: 1.5rem; text-align: center; }
.logo span { color: var(--accent); }
.menu { list-style: none; display: flex; justify-content: center; gap: 20px; margin-top: 10px; }
.menu a { color: white; text-decoration: none; font-weight: bold; }

.hero { height: 200px; background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://images.unsplash.com/photo-1500382017468-9049fed747ef?w=800'); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; color: white; border-radius: 15px; margin: 20px; text-align: center; }

.section-card { background: var(--card); margin: 20px auto; padding: 25px; max-width: 900px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }

.grid-botoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 20px 0; }
.btn-problema { background: var(--primary); color: white; padding: 12px; border: none; border-radius: 8px; cursor: pointer; transition: 0.3s; font-weight: bold; }
.btn-problema:hover { background: var(--accent); }

.resposta-box { background: rgba(116, 198, 157, 0.1); border-left: 5px solid var(--accent); padding: 20px; border-radius: 8px; font-size: 1.1rem; }

/* UPLOAD AREA */
.upload-area { border: 2px dashed #ccc; padding: 20px; border-radius: 10px; text-align: center; background: #fafafa; }
.dark-mode .upload-area { background: #222; border-color: #444; }

.grid-imagens { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; }
.item-foto img { width: 100%; height: 180px; object-fit: cover; border-radius: 8px; border: 2px solid var(--accent); }

footer { background: #1b4332; color: white; text-align: center; padding: 1.5rem; margin-top: 30px; }