:root {
    --primary: #2c3e50;
    --accent: #3498db;
    --bg: #f0f2f5;
    --white: #ffffff;
}

body { font-family: 'Inter', sans-serif; background: var(--bg); margin: 0; }

.dashboard-container { display: flex; min-height: 100vh; }

/* Sidebar */
.sidebar { width: 260px; background: var(--primary); color: white; padding: 30px 20px; display: flex; flex-direction: column; }
.user-info-side { text-align: center; margin-bottom: 40px; }
.avatar { width: 70px; height: 70px; background: var(--accent); border-radius: 50%; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: bold; }

nav { display: flex; flex-direction: column; gap: 10px; }
.nav-btn { background: none; border: none; color: #bdc3c7; padding: 12px 15px; text-align: left; cursor: pointer; border-radius: 8px; font-size: 1rem; transition: 0.3s; }
.nav-btn:hover, .nav-btn.active { background: rgba(255,255,255,0.1); color: white; }
.logout { margin-top: auto; color: #e74c3c; }

/* Conteúdo Principal */
.main-content { flex: 1; padding: 40px; overflow-y: auto; }
.tab-content { display: none; }
.tab-content.active { display: block; animation: fadeIn 0.4s; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.header-tab h1 { color: var(--primary); margin-bottom: 5px; }
.header-tab p { color: #7f8c8d; margin-bottom: 30px; }

/* Meus Materiais Vazio */
.empty-state { text-align: center; padding: 60px 20px; background: white; border-radius: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.empty-state i { font-size: 4rem; color: #dcdde1; margin-bottom: 20px; }
.btn-catalog { display: inline-block; margin-top: 20px; padding: 12px 25px; background: var(--accent); color: white; text-decoration: none; border-radius: 8px; font-weight: bold; }

/* Cards de Configuração */
.settings-card { background: white; padding: 30px; border-radius: 15px; max-width: 600px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.settings-card h3 { margin-bottom: 20px; color: var(--primary); border-bottom: 2px solid #f0f2f5; padding-bottom: 10px; }
.input-group { margin-bottom: 20px; }
.input-group label { display: block; margin-bottom: 8px; font-weight: 600; font-size: 0.9rem; }
.input-group input { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; box-sizing: border-box; }

.btn-save { padding: 12px 20px; background: var(--primary); color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: bold; }
.btn-alt { background: var(--accent); }
hr { margin: 40px 0; border: 0; border-top: 1px solid #eee; }