* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
body { background-color: #f4f7f6; color: #333; }
.layout { display: flex; min-height: 100vh; }

.sidebar { width: 250px; background-color: #2c3e50; color: #ecf0f1; padding: 20px 0; display: flex; flex-direction: column; position: fixed; height: 100%; }
.sidebar h2 { text-align: center; font-size: 1.2rem; margin-bottom: 30px; padding: 0 15px; }
.sidebar ul { list-style: none; flex: 1; }
.sidebar ul li a { display: flex; align-items: center; padding: 15px 20px; color: #ecf0f1; text-decoration: none; transition: background 0.3s; }
.sidebar ul li a:hover, .sidebar ul li a.active { background-color: #34495e; border-left: 4px solid #3498db; }
.sidebar .icon { margin-right: 15px; font-size: 1.2rem; }

.content { flex: 1; padding: 30px; margin-left: 250px; }
.card { background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); margin-bottom: 20px; }
.card h1 { font-size: 1.5rem; margin-bottom: 15px; color: #2c3e50; }
.btn { background-color: #3498db; color: white; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; text-decoration: none; display: inline-block; }
.btn-danger { background-color: #e74c3c; }
table { width: 100%; border-collapse: collapse; margin-top: 15px; }
th, td { padding: 12px; text-align: left; border-bottom: 1px solid #ddd; }
th { background-color: #f9f9f9; }