body {

	background-color: #f4f7f6;

}



.navbar-custom {

	background: linear-gradient(135deg, #ecefff 0%, #764ba2 100%);

}



.card {

	border-radius: 15px;

	border: none;

	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);

}



#drop-zone {

	border: 2px dashed #dee2e6;

	border-radius: 15px;

	padding: 40px;

	text-align: center;

	cursor: pointer;

	transition: 0.3s;

	background: #fff;

}



#drop-zone:hover,

#drop-zone.drop-active {

	border-color: #667eea;

	background: #f8faff;

}



.log-container {

	background: #1e1e1e;

	color: #4ade80;

	font-family: monospace;

	font-size: 0.8rem;

	height: 120px;

	overflow-y: auto;

	padding: 10px;

	border-radius: 10px;

}



.peer-id-badge {

	background: #eef2ff;

	color: #4f46e5;

	font-weight: bold;

	padding: 5px 10px;

	border-radius: 8px;

}



.role-badge {

	font-size: 0.7rem;

	padding: 2px 6px;

	border-radius: 4px;

	text-transform: uppercase;

	font-weight: bold;

}



.role-admin {

	background: #fee2e2;

	color: #b91c1c;

}



.role-user {

	background: #f3f4f6;

	color: #4b5563;

}



.online-dot {

	width: 8px;

	height: 8px;

	background: #22c55e;

	border-radius: 50%;

	display: inline-block;

	margin-right: 5px;

	box-shadow: 0 0 5px #22c55e;

}



.user-item-online {

	cursor: pointer;

	transition: 0.2s;

	border-radius: 10px;

	border: 1px solid transparent;

}



.user-item-online:hover {

	background: #f0f9ff;

	border-color: #bae6fd;

}